docs: update API

coreui · Dec 2, 2024 · 5bebe21 · 5bebe21
1 parent 83fc24f
commit 5bebe21
Show file tree

Hide file tree

Showing 138 changed files with 6,789 additions and 905 deletions.
diff --git a/packages/docs/content/api/CAccordion.api.mdx b/packages/docs/content/api/CAccordion.api.mdx
@@ -1,8 +1,8 @@
 
 ```jsx
-import { CAccordion } from '@coreui/src'
+import { CAccordion } from '@coreui/react'
 // or
-import CAccordion from '@coreuireact/src/components/accordion/CAccordion'
+import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
 ```
 
 <div className="table-responsive table-api border rounded mb-3">

diff --git a/packages/docs/content/api/CAccordionBody.api.mdx b/packages/docs/content/api/CAccordionBody.api.mdx
@@ -1,8 +1,8 @@
 
 ```jsx
-import { CAccordionBody } from '@coreui/src'
+import { CAccordionBody } from '@coreui/react'
 // or
-import CAccordionBody from '@coreuireact/src/components/accordion/CAccordionBody'
+import CAccordionBody from '@coreui/react/src/components/accordion/CAccordionBody'
 ```
 
 <div className="table-responsive table-api border rounded mb-3">

diff --git a/packages/docs/content/api/CAccordionButton.api.mdx b/packages/docs/content/api/CAccordionButton.api.mdx
@@ -1,8 +1,8 @@
 
 ```jsx
-import { CAccordionButton } from '@coreui/src'
+import { CAccordionButton } from '@coreui/react'
 // or
-import CAccordionButton from '@coreuireact/src/components/accordion/CAccordionButton'
+import CAccordionButton from '@coreui/react/src/components/accordion/CAccordionButton'
 ```
 
 <div className="table-responsive table-api border rounded mb-3">

diff --git a/packages/docs/content/api/CAccordionHeader.api.mdx b/packages/docs/content/api/CAccordionHeader.api.mdx
@@ -1,8 +1,8 @@
 
 ```jsx
-import { CAccordionHeader } from '@coreui/src'
+import { CAccordionHeader } from '@coreui/react'
 // or
-import CAccordionHeader from '@coreuireact/src/components/accordion/CAccordionHeader'
+import CAccordionHeader from '@coreui/react/src/components/accordion/CAccordionHeader'
 ```
 
 <div className="table-responsive table-api border rounded mb-3">

diff --git a/packages/docs/content/api/CAccordionItem.api.mdx b/packages/docs/content/api/CAccordionItem.api.mdx
@@ -1,8 +1,8 @@
 
 ```jsx
-import { CAccordionItem } from '@coreui/src'
+import { CAccordionItem } from '@coreui/react'
 // or
-import CAccordionItem from '@coreuireact/src/components/accordion/CAccordionItem'
+import CAccordionItem from '@coreui/react/src/components/accordion/CAccordionItem'
 ```
 
 <div className="table-responsive table-api border rounded mb-3">

diff --git a/packages/docs/content/api/CAlert.api.mdx b/packages/docs/content/api/CAlert.api.mdx
@@ -5,11 +5,64 @@ import { CAlert } from '@coreui/react'
 import CAlert from '@coreui/react/src/components/alert/CAlert'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | primary |
-| **dismissible** | Optionally add a close button to alert and allow it to self dismiss. | `boolean` | - |
-| **onClose** | Callback fired when the component requests to be closed. | `() => void` | - |
-| **variant** | Set the alert variant to a solid. | `string` | - |
-| **visible** | Toggle the visibility of component. | `boolean` | true |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="calert-className">
+        <td className="text-primary fw-semibold">className<a href="#calert-className" aria-label="CAlert className permalink" className="anchor-link after">#</a></td>
+        <td>undefined</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">A string of all className you want applied to the component.</td>
+      </tr>
+      <tr id="calert-color">
+        <td className="text-primary fw-semibold">color<a href="#calert-color" aria-label="CAlert color permalink" className="anchor-link after">#</a></td>
+        <td><code>{`primary`}</code></td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+      </tr>
+      <tr id="calert-dismissible">
+        <td className="text-primary fw-semibold">dismissible<a href="#calert-dismissible" aria-label="CAlert dismissible permalink" className="anchor-link after">#</a></td>
+        <td>undefined</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">Optionally add a close button to alert and allow it to self dismiss.</td>
+      </tr>
+      <tr id="calert-onClose">
+        <td className="text-primary fw-semibold">onClose<a href="#calert-onClose" aria-label="CAlert onClose permalink" className="anchor-link after">#</a></td>
+        <td>undefined</td>
+        <td><code>{`() => void`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">Callback fired when the component requests to be closed.</td>
+      </tr>
+      <tr id="calert-variant">
+        <td className="text-primary fw-semibold">variant<a href="#calert-variant" aria-label="CAlert variant permalink" className="anchor-link after">#</a></td>
+        <td>undefined</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">Set the alert variant to a solid.</td>
+      </tr>
+      <tr id="calert-visible">
+        <td className="text-primary fw-semibold">visible<a href="#calert-visible" aria-label="CAlert visible permalink" className="anchor-link after">#</a></td>
+        <td><code>{`true`}</code></td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">Toggle the visibility of component.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CAlertHeading.api.mdx b/packages/docs/content/api/CAlertHeading.api.mdx
@@ -5,7 +5,32 @@ import { CAlertHeading } from '@coreui/react'
 import CAlertHeading from '@coreui/react/src/components/alert/CAlertHeading'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'h4')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="calertheading-as">
+        <td className="text-primary fw-semibold">as<a href="#calertheading-as" aria-label="CAlertHeading as permalink" className="anchor-link after">#</a></td>
+        <td>undefined</td>
+        <td><code>{`(ElementType & "symbol")`}</code>, <code>{`(ElementType & "object")`}</code>, <code>{`(ElementType & "h4")`}</code>, <code>{`(ElementType & "slot")`}</code>, <code>{`(ElementType & "style")`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent\<...>)`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">Component used for the root node. Either a string to use a HTML element or a component.</td>
+      </tr>
+      <tr id="calertheading-className">
+        <td className="text-primary fw-semibold">className<a href="#calertheading-className" aria-label="CAlertHeading className permalink" className="anchor-link after">#</a></td>
+        <td>undefined</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">A string of all className you want applied to the base component.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CAlertLink.api.mdx b/packages/docs/content/api/CAlertLink.api.mdx
@@ -5,6 +5,24 @@ import { CAlertLink } from '@coreui/react'
 import CAlertLink from '@coreui/react/src/components/alert/CAlertLink'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="calertlink-className">
+        <td className="text-primary fw-semibold">className<a href="#calertlink-className" aria-label="CAlertLink className permalink" className="anchor-link after">#</a></td>
+        <td>undefined</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">A string of all className you want applied to the base component.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CAvatar.api.mdx b/packages/docs/content/api/CAvatar.api.mdx
@@ -5,12 +5,72 @@ import { CAvatar } from '@coreui/react'
 import CAvatar from '@coreui/react/src/components/avatar/CAvatar'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the component. | `string` | - |
-| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - |
-| **size** | Size the component small, large, or extra large. | `string` | - |
-| **src** | The src attribute for the img element. | `string` | - |
-| **status** | Sets the color context of the status indicator to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
-| **textColor** | Sets the text color of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'primary-emphasis'` \| `'secondary-emphasis'` \| `'success-emphasis'` \| `'danger-emphasis'` \| `'warning-emphasis'` \| `'info-emphasis'` \| `'light-emphasis'` \| `'body'` \| `'body-emphasis'` \| `'body-secondary'` \| `'body-tertiary'` \| `'black'` \| `'black-50'` \| `'white'` \| `'white-50'` \| `string` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cavatar-className">
+        <td className="text-primary fw-semibold">className<a href="#cavatar-className" aria-label="CAvatar className permalink" className="anchor-link after">#</a></td>
+        <td>undefined</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">A string of all className you want applied to the component.</td>
+      </tr>
+      <tr id="cavatar-color">
+        <td className="text-primary fw-semibold">color<a href="#cavatar-color" aria-label="CAvatar color permalink" className="anchor-link after">#</a></td>
+        <td>undefined</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">Sets the color context of the component to one of CoreUI’s themed colors.</td>
+      </tr>
+      <tr id="cavatar-shape">
+        <td className="text-primary fw-semibold">shape<a href="#cavatar-shape" aria-label="CAvatar shape permalink" className="anchor-link after">#</a></td>
+        <td>undefined</td>
+        <td><code>{`'rounded'`}</code>, <code>{`'rounded-top'`}</code>, <code>{`'rounded-end'`}</code>, <code>{`'rounded-bottom'`}</code>, <code>{`'rounded-start'`}</code>, <code>{`'rounded-circle'`}</code>, <code>{`'rounded-pill'`}</code>, <code>{`'rounded-0'`}</code>, <code>{`'rounded-1'`}</code>, <code>{`'rounded-2'`}</code>, <code>{`'rounded-3'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">Select the shape of the component.</td>
+      </tr>
+      <tr id="cavatar-size">
+        <td className="text-primary fw-semibold">size<a href="#cavatar-size" aria-label="CAvatar size permalink" className="anchor-link after">#</a></td>
+        <td>undefined</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">Size the component small, large, or extra large.</td>
+      </tr>
+      <tr id="cavatar-src">
+        <td className="text-primary fw-semibold">src<a href="#cavatar-src" aria-label="CAvatar src permalink" className="anchor-link after">#</a></td>
+        <td>undefined</td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">The src attribute for the img element.</td>
+      </tr>
+      <tr id="cavatar-status">
+        <td className="text-primary fw-semibold">status<a href="#cavatar-status" aria-label="CAvatar status permalink" className="anchor-link after">#</a></td>
+        <td>undefined</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">Sets the color context of the status indicator to one of CoreUI’s themed colors.</td>
+      </tr>
+      <tr id="cavatar-textColor">
+        <td className="text-primary fw-semibold">textColor<a href="#cavatar-textColor" aria-label="CAvatar textColor permalink" className="anchor-link after">#</a></td>
+        <td>undefined</td>
+        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`'primary-emphasis'`}</code>, <code>{`'secondary-emphasis'`}</code>, <code>{`'success-emphasis'`}</code>, <code>{`'danger-emphasis'`}</code>, <code>{`'warning-emphasis'`}</code>, <code>{`'info-emphasis'`}</code>, <code>{`'light-emphasis'`}</code>, <code>{`'body'`}</code>, <code>{`'body-emphasis'`}</code>, <code>{`'body-secondary'`}</code>, <code>{`'body-tertiary'`}</code>, <code>{`'black'`}</code>, <code>{`'black-50'`}</code>, <code>{`'white'`}</code>, <code>{`'white-50'`}</code>, <code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">Sets the text color of the component to one of CoreUI’s themed colors.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/docs/content/api/CBackdrop.api.mdx b/packages/docs/content/api/CBackdrop.api.mdx
@@ -5,7 +5,32 @@ import { CBackdrop } from '@coreui/react'
 import CBackdrop from '@coreui/react/src/components/backdrop/CBackdrop'
 ```
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| **className** | A string of all className you want applied to the base component. | `string` | modal-backdrop |
-| **visible** | Toggle the visibility of modal component. | `boolean` | - |
+<div className="table-responsive table-api border rounded mb-3">
+  <table className="table">
+    <thead>
+      <tr>
+        <th>Property</th>
+        <th>Default</th>
+        <th>Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr id="cbackdrop-className">
+        <td className="text-primary fw-semibold">className<a href="#cbackdrop-className" aria-label="CBackdrop className permalink" className="anchor-link after">#</a></td>
+        <td><code>{`modal-backdrop`}</code></td>
+        <td><code>{`string`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">A string of all className you want applied to the base component.</td>
+      </tr>
+      <tr id="cbackdrop-visible">
+        <td className="text-primary fw-semibold">visible<a href="#cbackdrop-visible" aria-label="CBackdrop visible permalink" className="anchor-link after">#</a></td>
+        <td>undefined</td>
+        <td><code>{`boolean`}</code></td>
+      </tr>
+      <tr>
+        <td colSpan="3">Toggle the visibility of modal component.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>