Class Name	Description
+ `.{className.value}` +	+ {className.description} +

+ {hasNav && ( + + + + Overview + + + {hasNavAPI && ( + + + API + + + )} + {hasNavCustomizing && ( + + + Customizing + + + )} + {hasNavAccesibility && ( + + + Accesibility + + + )} + + )}

- {name && name !== title ? (

@@ -50,6 +97,7 @@ const DocsLayout: FC = ({ children, data, pageContext }) => { {title}

)} +

{description}

{frameworks && ( diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx index cfe62f86..60c5fe65 100644 --- a/packages/docs/src/templates/MdxLayout.tsx +++ b/packages/docs/src/templates/MdxLayout.tsx @@ -1,8 +1,7 @@ import React, { FC } from 'react' import { graphql } from 'gatsby' import { MDXProvider } from '@mdx-js/react' -import { CBadge, CTable } from '@coreui/react/src/index' -import { Callout, CodeBlock, Example, ScssDocs } from '../components' +import { Callout, CodeBlock, ClassNamesDocs, Example, JSXDocs, ScssDocs } from '../components' interface MdxLayoutProps { data: any // eslint-disable-line @typescript-eslint/no-explicit-any @@ -14,39 +13,13 @@ const MdxLayout: FC = ({ children }) => { , + JSXDocs: (props: any) => , // eslint-disable-next-line @typescript-eslint/no-explicit-any - strong: (props: any) => { - if (props.children.type == 'em') { - const color = props.children.props.children.includes('Deprecated') - ? 'warning' - : 'primary' - return ( - <> -
- - - ) - } else { - return {props.children} - } - }, + ClassNamesDocs: (props: any) => , // eslint-disable-next-line @typescript-eslint/no-explicit-any - pre: (props: any) => , + ScssDocs: (props: any) => , // eslint-disable-next-line @typescript-eslint/no-explicit-any - table: (props: any) => { - // TODO: find better soultion - const isApiTable = - props.children[0].props.children.props.children[0].props.children && - props.children[0].props.children.props.children[0].props.children.includes('Property') - return ( - - ) - }, + pre: (props: any) => , // eslint-disable-next-line @typescript-eslint/no-explicit-any Callout: (props: any) => { const { children, title, ...rest } = props @@ -83,9 +56,20 @@ MdxLayout.displayName = 'MdxLayout' export default MdxLayout export const pageQuery = graphql` - query BlogPostQuery($id: String) { + query BlogPostQuery($id: String, $route: String!) { mdx(id: { eq: $id }) { tableOfContents(maxDepth: 3) } + allMdx(filter: { frontmatter: { route: { eq: $route } } }) { + edges { + node { + id + frontmatter { + route + title + } + } + } + } } ` diff --git a/packages/gatsby-remark-import-markdown/index.js b/packages/gatsby-remark-import-markdown/index.js index 398ce941..f1e5018b 100755 --- a/packages/gatsby-remark-import-markdown/index.js +++ b/packages/gatsby-remark-import-markdown/index.js @@ -1,52 +1,143 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -'use strict' - -const fs = require('fs') +/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires, unicorn/prefer-module */ +const fs = require('node:fs') +const path = require('node:path') const normalizePath = require('normalize-path') -const visit = require('unist-util-visit') +const visitParents = require('unist-util-visit-parents') // Ensure you have installed this const unified = require('unified') const parse = require('remark-parse') const remarkGfm = require('remark-gfm') -const html = require('remark-html') +/** + * Plugin Options Interface + * @typedef {Object} PluginOptions + * @property {string} directory - The directory containing markdown fragments + */ + +/** + * Main plugin function + * @param {Object} param0 - Object containing the markdown AST + * @param {Object} [pluginOptions={}] - Plugin options + * @param {PluginOptions} pluginOptions.directory - Required directory option + * @returns {Object} - The transformed markdown AST + */ +// eslint-disable-next-line unicorn/no-anonymous-default-export module.exports = ({ markdownAST }, pluginOptions = {}) => { - const directory = pluginOptions.directory + const { directory } = pluginOptions + + validateDirectory(directory) + + const normalizedDirectory = ensureTrailingSlash(normalizeDirectory(directory)) + + const processor = unified().use(parse).use(remarkGfm) + visitParents(markdownAST, 'inlineCode', (node, ancestors) => { + processInlineCodeNode(node, ancestors, normalizedDirectory, processor) + }) + + return markdownAST +} + +/** + * Validates the directory option + * @param {string} directory - The directory to validate + */ +function validateDirectory(directory) { if (!directory) { - throw Error(`Required option \"directory\" not specified`) - } else if (!fs.existsSync(directory)) { - throw Error(`Invalid directory specified \"${directory}\"`) - } else if (!directory.endsWith('/')) { - directory += '/' + throw new Error(`Required option "directory" not specified`) + } + + if (!fs.existsSync(directory)) { + throw new Error(`Invalid directory specified "${directory}"`) + } +} + +/** + * Normalizes the directory path + * @param {string} directory - The directory path to normalize + * @returns {string} - The normalized directory path + */ +function normalizeDirectory(directory) { + return path.resolve(directory) +} + +/** + * Ensures the directory path ends with a trailing slash + * @param {string} directory - The directory path + * @returns {string} - The directory path with a trailing slash + */ +function ensureTrailingSlash(directory) { + return directory.endsWith(path.sep) ? directory : `${directory}${path.sep}` +} + +/** + * Processes an inline code node that starts with 'markdown:' + * @param {Object} node - The AST node + * @param {Array} ancestors - Ancestor nodes + * @param {string} directory - The base directory for markdown fragments + * @param {Object} processor - Unified processor instance + */ +function processInlineCodeNode(node, ancestors, directory, processor) { + const { value } = node + + if (!value.startsWith('markdown:')) { + return } - visit(markdownAST, 'inlineCode', (node, _, parent) => { - const value = node.value + const fileName = value.slice('markdown:'.length).trim() - if (value.startsWith('markdown:')) { - const file = value.substr(9) - const path = normalizePath('' + directory + file) + if (!fileName) { + throw new Error('Inline code starting with "markdown:" must specify a file name') + } - if (!fs.existsSync(path)) { - throw Error(`Invalid fragment specified; no such file "${path}"`) - } + const filePath = normalizePath(path.join(directory, fileName)) - const code = fs.readFileSync(path, 'utf8') - const markdown = unified() - .use(parse) - .use(remarkGfm) - .use(html, { sanitize: false }) - .parse(code) + if (!fs.existsSync(filePath)) { + throw new Error(`Invalid fragment specified; no such file "${filePath}"`) + } + + const fileContent = fs.readFileSync(filePath, 'utf8') + const parsed = processor.parse( + fileContent.replaceAll('className="', 'class="').replaceAll('{`', '').replaceAll('`}', ''), + ) + + removePositionData(parsed) + + replaceParentNodeWithParsedContent(ancestors, parsed.children) +} - parent.type = 'div' - parent.children = [] +/** + * Removes position information from AST nodes to avoid conflicts + * @param {Object} parsed - The parsed AST + */ +function removePositionData(parsed) { + if (!parsed.children) return - markdown.children.forEach((child) => { - delete child.position - parent.children.push(child) - }) + parsed.children.forEach((child) => { + if (child.position) { + delete child.position } }) +} - return markdownAST +/** + * Replaces the parent node with the new array of nodes from the parsed content + * @param {Array} ancestors - Ancestor nodes + * @param {Array} newChildren - New child nodes to insert + */ +function replaceParentNodeWithParsedContent(ancestors, newChildren) { + const parent = ancestors.at(-1) + const grandparent = ancestors.at(-2) + + if (!grandparent || !Array.isArray(grandparent.children)) { + throw new Error('Parent node does not have a grandparent with children') + } + + const parentIndex = grandparent.children.indexOf(parent) + + if (parentIndex === -1) { + throw new Error("Parent node not found in grandparent's children") + } + + // Replace the parent node with the new nodes + grandparent.children.splice(parentIndex, 1, ...newChildren) } diff --git a/packages/gatsby-remark-import-markdown/package.json b/packages/gatsby-remark-import-markdown/package.json index 84f9c71d..42b8f614 100644 --- a/packages/gatsby-remark-import-markdown/package.json +++ b/packages/gatsby-remark-import-markdown/package.json @@ -14,9 +14,9 @@ "description": "Gatsby plugin to embed markdown fragments within markdown", "dependencies": { "normalize-path": "^2.1.1", - "unist-util-map": "^1.0.3", - "unist-util-visit": "^2.0.3", - "unified": "^9.2.1", + "unist-util-map": "^1.0.5", + "unist-util-visit-parents": "^3.1.1", + "unified": "^9.2.2", "remark-gfm": "^1.0.0", "remark-html": "^13.0.2", "remark-parse": "^9.0.0", diff --git a/packages/gatsby-remark-jsx-preview/index.js b/packages/gatsby-remark-jsx-preview/index.js index f2219dba..a0eaadb8 100755 --- a/packages/gatsby-remark-jsx-preview/index.js +++ b/packages/gatsby-remark-jsx-preview/index.js @@ -1,6 +1,4 @@ -/* eslint-disable @typescript-eslint/no-var-requires */ -'use strict' - +/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires, unicorn/prefer-module */ const acorn = require('acorn') const fromMarkdown = require('mdast-util-from-markdown') const mdxJsx = require('mdast-util-mdx-jsx') @@ -8,12 +6,13 @@ const mdxMd = require('micromark-extension-mdx-md') const syntax = require('micromark-extension-mdx-jsx') const visit = require('unist-util-visit') +// eslint-disable-next-line unicorn/no-anonymous-default-export module.exports = ({ markdownAST }) => { visit(markdownAST, 'code', (node) => { if (node.meta && node.meta.includes('preview')) { const value = node.value const className = /className="(.*)"/.test(node.meta) ? RegExp.$1 : '' - const tree = fromMarkdown(value.replace(/(\r\n|\n|\r)/gm, ''), { + const tree = fromMarkdown(value.replaceAll(/(\r\n|\n|\r)/gm, ''), { extensions: [syntax({ acorn: acorn, addResult: true }), mdxMd], mdastExtensions: [mdxJsx.fromMarkdown], }) From 96805662f78c83d7da7f73a740a85b14c869138c Mon Sep 17 00:00:00 2001 From: mrholek Date: Thu, 28 Nov 2024 13:43:01 +0100 Subject: [PATCH 025/116] feat(CAccordion): improve accessibility; allow passing or overriding class names for all subcomponents. --- .../src/components/accordion/CAccordion.tsx | 77 +++++++++++++++++-- .../components/accordion/CAccordionBody.tsx | 49 ++++++++++-- .../components/accordion/CAccordionButton.tsx | 34 ++++++-- .../components/accordion/CAccordionHeader.tsx | 40 +++++++++- .../components/accordion/CAccordionItem.tsx | 39 +++++++++- packages/coreui-react/src/utils/index.ts | 2 + .../coreui-react/src/utils/mergeClassNames.ts | 25 ++++++ packages/docs/content/api/CAccordion.api.mdx | 67 ++++++++++++++-- .../docs/content/api/CAccordionBody.api.mdx | 40 ++++++++-- .../docs/content/api/CAccordionButton.api.mdx | 39 ++++++++-- .../docs/content/api/CAccordionHeader.api.mdx | 40 ++++++++-- .../docs/content/api/CAccordionItem.api.mdx | 48 ++++++++++-- .../components/accordion/accesibility.mdx | 66 ++++++++++++++++ .../docs/content/components/accordion/api.mdx | 27 +++++++ .../components/accordion/customizing.mdx | 42 ++++++++++ .../{accordion.mdx => accordion/index.mdx} | 42 +--------- 16 files changed, 585 insertions(+), 92 deletions(-) create mode 100644 packages/coreui-react/src/utils/mergeClassNames.ts create mode 100644 packages/docs/content/components/accordion/accesibility.mdx create mode 100644 packages/docs/content/components/accordion/api.mdx create mode 100644 packages/docs/content/components/accordion/customizing.mdx rename packages/docs/content/components/{accordion.mdx => accordion/index.mdx} (89%) diff --git a/packages/coreui-react/src/components/accordion/CAccordion.tsx b/packages/coreui-react/src/components/accordion/CAccordion.tsx index 9fe4c634..ebc8b37f 100644 --- a/packages/coreui-react/src/components/accordion/CAccordion.tsx +++ b/packages/coreui-react/src/components/accordion/CAccordion.tsx @@ -2,25 +2,78 @@ import React, { createContext, forwardRef, HTMLAttributes, useState } from 'reac import PropTypes from 'prop-types' import classNames from 'classnames' +import { mergeClassNames } from '../../utils' + export interface CAccordionProps extends HTMLAttributes { /** - * The active item key. + * Determines which accordion item is currently active (expanded) by default. + * Accepts a number or string corresponding to the `itemKey` of the desired accordion item. + * + * @example + * ... */ activeItemKey?: number | string + /** - * Make accordion items stay open when another item is opened + * When set to `true`, multiple accordion items within the React Accordion can be open simultaneously. + * This is ideal for scenarios where users need to view multiple sections at once without collapsing others. + * + * @default false + * + * @example + * ... */ alwaysOpen?: boolean + /** - * A string of all className you want applied to the base component. + * Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming. + * + * @example + * ... */ className?: string + /** - * Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. + * Allows overriding or extending the default CSS class names used in the component. + * + * - `ACCORDION`: Base class for the accordion component. + * - `ACCORDION_FLUSH`: Class applied when the `flush` prop is set to true, ensuring an edge-to-edge layout. + * + * Use this prop to customize the styles of specific parts of the accordion. + * + * @example + * const customClasses = { + * ACCORDION: 'custom-accordion', + * ACCORDION_FLUSH: 'custom-accordion-flush' + * } + * ... + */ + customClassNames?: Partial + + /** + * When `flush` is set to `true`, the React Accordion renders edge-to-edge with its parent container, + * creating a seamless and modern look ideal for minimalist designs. + * + * @default false + * + * @example + * ... */ flush?: boolean } +export const ACCORDION_CLASS_NAMES = { + /** + * Base class for the accordion container. + */ + ACCORDION: 'accordion', + + /** + * Applied when the `flush` prop is enabled. + */ + ACCORDION_FLUSH: 'accordion-flush', +} + export interface CAccordionContextProps { _activeItemKey?: number | string alwaysOpen?: boolean @@ -30,12 +83,24 @@ export interface CAccordionContextProps { export const CAccordionContext = createContext({} as CAccordionContextProps) export const CAccordion = forwardRef( - ({ children, activeItemKey, alwaysOpen = false, className, flush, ...rest }, ref) => { + ( + { children, activeItemKey, alwaysOpen = false, className, customClassNames, flush, ...rest }, + ref, + ) => { const [_activeItemKey, setActiveKey] = useState(activeItemKey) + const _classNames = mergeClassNames( + ACCORDION_CLASS_NAMES, + customClassNames, + ) + return (

diff --git a/packages/coreui-react/src/components/accordion/CAccordionBody.tsx b/packages/coreui-react/src/components/accordion/CAccordionBody.tsx index 532f3ff6..a873a228 100644 --- a/packages/coreui-react/src/components/accordion/CAccordionBody.tsx +++ b/packages/coreui-react/src/components/accordion/CAccordionBody.tsx @@ -5,21 +5,60 @@ import classNames from 'classnames' import { CAccordionItemContext } from './CAccordionItem' import { CCollapse } from './../collapse/CCollapse' +import { mergeClassNames } from '../../utils' export interface CAccordionBodyProps extends HTMLAttributes { /** - * A string of all className you want applied to the base component. + * Allows you to apply custom CSS classes to the React Accordion Body for enhanced styling and theming. + * + * @example + * ... */ className?: string + + /** + * Allows overriding or extending the default CSS class names used in the accordion body component. + * Accepts a partial object matching the shape of `ACCORDION_BODY_CLASS_NAMES`, which includes: + * + * - `ACCORDION_COLLAPSE`: Base class for the collapse container in the accordion body. + * - `ACCORDION_BODY`: Base class for the main content container inside the accordion body. + * + * Use this prop to customize the styles of specific parts of the accordion body. + * + * @example + * const customClasses = { + * ACCORDION_COLLAPSE: 'custom-collapse-class', + * ACCORDION_BODY: 'custom-body-class', + * } + * ... + */ + customClassNames?: Partial +} + +export const ACCORDION_BODY_CLASS_NAMES = { + /** + * Used for managing collapsible behavior in the accordion body. + */ + ACCORDION_COLLAPSE: 'accordion-collapse', + + /** + * Styles the main content container inside the accordion. + */ + ACCORDION_BODY: 'accordion-body', } export const CAccordionBody = forwardRef( - ({ children, className, ...rest }, ref) => { - const { visible } = useContext(CAccordionItemContext) + ({ children, className, customClassNames, ...rest }, ref) => { + const { id, visible } = useContext(CAccordionItemContext) + + const _classNames = mergeClassNames( + ACCORDION_BODY_CLASS_NAMES, + customClassNames, + ) return ( - -

+ +

{children}

Key	Function
`Tab`	Moves focus to the next focusable element.
`Shift` + `Tab`	Moves focus to the previous focusable element.
`Space` or `Enter`	Toggle the expansion of the focused accordion header.

diff --git a/packages/coreui-react/src/components/accordion/CAccordionButton.tsx b/packages/coreui-react/src/components/accordion/CAccordionButton.tsx index 4235ca6e..2c6eb097 100644 --- a/packages/coreui-react/src/components/accordion/CAccordionButton.tsx +++ b/packages/coreui-react/src/components/accordion/CAccordionButton.tsx @@ -4,22 +4,46 @@ import classNames from 'classnames' import { CAccordionItemContext } from './CAccordionItem' +import { mergeClassNames } from '../../utils' + export interface CAccordionButtonProps extends HTMLAttributes { /** - * A string of all className you want applied to the base component. + * Styles the clickable element in the accordion header. */ className?: string + + /** + * Allows overriding or extending the default CSS class names used in the accordion button component. + * Accepts a partial object matching the shape of `CLASS_NAMES`, which includes: + * + * - `ACCORDION_BUTTON`: Base class for the accordion button. + * + * Use this prop to customize the styles of the accordion button. + * + * @example + * const customClasses = { + * ACCORDION_BUTTON: 'custom-button-class', + * } + * ... + */ + customClassNames?: Partial +} + +export const CLASS_NAMES = { + ACCORDION_BUTTON: 'accordion-button', } export const CAccordionButton = forwardRef( - ({ children, className, ...rest }, ref) => { - const { visible, setVisible } = useContext(CAccordionItemContext) + ({ children, className, customClassNames, ...rest }, ref) => { + const { id, visible, setVisible } = useContext(CAccordionItemContext) + const _classNames = mergeClassNames(CLASS_NAMES, customClassNames) return ( + + )} + {stackBlitz && ( + + + + )} + + + + +

+ +

+ + {({ className, style, tokens, getLineProps, getTokenProps }) => ( +

+              {tokens.map((line, i) => (
+                
+                  {line.map((token, key) => (
+                    
+                  ))}
+                
+              ))}
+

+ )} + +

+ ) +} + +ExampleSnippet.displayName = 'ExampleSnippet' + +export default ExampleSnippet diff --git a/packages/docs/src/components/index.ts b/packages/docs/src/components/index.ts index 6bbfd51e..346e8eb2 100644 --- a/packages/docs/src/components/index.ts +++ b/packages/docs/src/components/index.ts @@ -4,6 +4,7 @@ import Callout from './Callout' import CodeBlock from './CodeBlock' import ClassNamesDocs from './ClassNamesDocs' import Example from './Example' +import ExampleSnippet from './ExampleSnippet' import Footer from './Footer' import Header from './Header' import JSXDocs from './JSXDocs' @@ -20,6 +21,7 @@ export { CodeBlock, ClassNamesDocs, Example, + ExampleSnippet, Footer, Header, JSXDocs, diff --git a/packages/docs/src/pages/404.tsx b/packages/docs/src/pages/404.tsx index e72e73b4..196b2c6d 100644 --- a/packages/docs/src/pages/404.tsx +++ b/packages/docs/src/pages/404.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { graphql, useStaticQuery } from 'gatsby' import { CButton } from '@coreui/react/src/index' -import Seo from './../components/Seo' +import Seo from '../components/Seo' const NotFoundPage = () => { const { site } = useStaticQuery(query) diff --git a/packages/docs/src/styles/_component-examples.scss b/packages/docs/src/styles/_component-examples.scss index 1fb306de..ff304013 100644 --- a/packages/docs/src/styles/_component-examples.scss +++ b/packages/docs/src/styles/_component-examples.scss @@ -27,9 +27,39 @@ .docs-example-snippet { border: solid var(--cui-border-color); border-width: 1px 0; + margin: 0 ($cd-gutter-x * -.5) 1rem ($cd-gutter-x * -.5); + padding: 0; + @include border-radius(0); - @include media-breakpoint-up(md) { + .docs-example { + margin: 0; + padding: 1rem; + border-width: 0 1px 0 0; + } + + .highlight-toolbar { + border-top: 1px solid var(--cui-border-color); + } + + .highlight { + margin: 0; + padding: 1rem; + } + + .docs-example, + .highlight { + border: 0 + } + + .highlight { + margin-bottom: 0; + @include border-top-radius(0); + } + + @include media-breakpoint-up(sm) { + margin: 0 0 1rem 0; border-width: 1px; + @include border-radius(var(--cui-border-radius)); } } diff --git a/packages/docs/src/templates/DocsLayout.tsx b/packages/docs/src/templates/DocsLayout.tsx index 333277e7..289862ef 100644 --- a/packages/docs/src/templates/DocsLayout.tsx +++ b/packages/docs/src/templates/DocsLayout.tsx @@ -32,16 +32,13 @@ const DocsLayout: FC = ({ children, data, location, pageContext const frameworks = other_frameworks ? other_frameworks.split(', ') : false const otherFrameworks = JSON.parse(JSON.stringify(jsonData)) - const hasNav = data.allMdx.edges.length > 1 - const hasNavAccesibility = data.allMdx.edges.filter((edge: any) => - edge.node.frontmatter.title.includes('Accesibility'), - ).length - const hasNavAPI = data.allMdx.edges.filter((edge: any) => - edge.node.frontmatter.title.includes('API'), - ).length - const hasNavCustomizing = data.allMdx.edges.filter((edge: any) => - edge.node.frontmatter.title.includes('Customizing'), - ).length + const hasNav = data?.allMdx?.edges.length > 1 + const hasNavAccesibility = + hasNav && data.allMdx.edges.some((edge: any) => edge.node.fields.slug.includes('accesibility')) + const hasNavAPI = + hasNav && data.allMdx.edges.some((edge: any) => edge.node.fields.slug.includes('api')) + const hasNavCustomizing = + hasNav && data.allMdx.edges.some((edge: any) => edge.node.fields.slug.includes('customizing')) return ( <> @@ -52,7 +49,7 @@ const DocsLayout: FC = ({ children, data, location, pageContext - Overview + Features {hasNavAPI && ( diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx index 60c5fe65..72f2e48c 100644 --- a/packages/docs/src/templates/MdxLayout.tsx +++ b/packages/docs/src/templates/MdxLayout.tsx @@ -1,7 +1,15 @@ import React, { FC } from 'react' import { graphql } from 'gatsby' import { MDXProvider } from '@mdx-js/react' -import { Callout, CodeBlock, ClassNamesDocs, Example, JSXDocs, ScssDocs } from '../components' +import { + Callout, + CodeBlock, + ClassNamesDocs, + Example, + JSXDocs, + ExampleSnippet, + ScssDocs, +} from '../components' interface MdxLayoutProps { data: any // eslint-disable-line @typescript-eslint/no-explicit-any @@ -12,15 +20,6 @@ const MdxLayout: FC = ({ children }) => { return ( , - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ClassNamesDocs: (props: any) => , - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ScssDocs: (props: any) => , - // eslint-disable-next-line @typescript-eslint/no-explicit-any - pre: (props: any) => , - // eslint-disable-next-line @typescript-eslint/no-explicit-any Callout: (props: any) => { const { children, title, ...rest } = props return ( @@ -31,6 +30,8 @@ const MdxLayout: FC = ({ children }) => { ) }, // eslint-disable-next-line @typescript-eslint/no-explicit-any + ClassNamesDocs: (props: any) => , + // eslint-disable-next-line @typescript-eslint/no-explicit-any Example: (props: any) => { const { children, ...rest } = props return ( @@ -44,6 +45,15 @@ const MdxLayout: FC = ({ children }) => { ) }, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + ExampleSnippet: (props: any) => , + // eslint-disable-next-line @typescript-eslint/no-explicit-any + JSXDocs: (props: any) => , + // eslint-disable-next-line @typescript-eslint/no-explicit-any + ScssDocs: (props: any) => , + // eslint-disable-next-line @typescript-eslint/no-explicit-any + pre: (props: any) => , + // eslint-disable-next-line @typescript-eslint/no-explicit-any }} > {children} @@ -56,17 +66,16 @@ MdxLayout.displayName = 'MdxLayout' export default MdxLayout export const pageQuery = graphql` - query BlogPostQuery($id: String, $route: String!) { + query PageQuery($id: String, $regex: String) { mdx(id: { eq: $id }) { tableOfContents(maxDepth: 3) } - allMdx(filter: { frontmatter: { route: { eq: $route } } }) { + allMdx(filter: { fields: { slug: { regex: $regex } } }) { edges { node { id - frontmatter { - route - title + fields { + slug } } } diff --git a/packages/docs/src/utils/codesandbox.ts b/packages/docs/src/utils/codesandbox.ts new file mode 100644 index 00000000..c826e18f --- /dev/null +++ b/packages/docs/src/utils/codesandbox.ts @@ -0,0 +1,78 @@ +// openCodeSandboxProject.ts + +import { + ProjectOptions, + generateTitle, + generateDescription, + generateIndexHTML, + generateIndexJS, + generatePackageJSON, +} from './projectUtils' + +// Define the options interface specific to CodeSandbox +interface CodeSandboxOptions extends ProjectOptions { + language: 'js' | 'ts' +} + +// Function to open a CodeSandbox project +export const openCodeSandboxProject = async (options: CodeSandboxOptions) => { + const { code, componentName, language, name } = options + + const title = generateTitle(componentName) + const description = generateDescription(componentName) + const template = 'create-react-app' + + const indexHTML = generateIndexHTML(title) + const indexExtension = language === 'ts' ? 'tsx' : 'js' + const indexJS = generateIndexJS(name, language, 'codesandbox') + const packageJSON = generatePackageJSON(title, description, language, 'codesandbox') + + // Define the files structure + const files: Record = { + 'public/index.html': { + content: indexHTML, + }, + [`src/${name}.${language}x`]: { + content: code, + }, + [`src/index.${indexExtension}`]: { + content: indexJS, + }, + 'package.json': { + content: packageJSON, + }, + } + + // Define the payload for CodeSandbox API + const payload = { + files, + template, + title, + description, + } + + try { + // Make a POST request to CodeSandbox API + const response = await fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Accept: 'application/json', + }, + body: JSON.stringify(payload), + }) + + if (!response.ok) { + throw new Error(`Error creating sandbox: ${response.statusText}`) + } + + const result = await response.json() + + // Open the sandbox in a new tab + const sandboxURL = `https://codesandbox.io/s/${result.sandbox_id}` + window.open(sandboxURL, '_blank') + } catch (error) { + console.error('Failed to create CodeSandbox:', error) + alert('Failed to create CodeSandbox. Please check the console for more details.') + } +} diff --git a/packages/docs/src/utils/projectUtils.ts b/packages/docs/src/utils/projectUtils.ts new file mode 100644 index 00000000..81c97cd7 --- /dev/null +++ b/packages/docs/src/utils/projectUtils.ts @@ -0,0 +1,129 @@ +// projectUtils.ts + +// Define a unified options interface +export interface ProjectOptions { + code: string + componentName?: string + language: 'js' | 'ts' + name: string + pro?: boolean +} + +// Function to generate title +export const generateTitle = (componentName?: string): string => { + return componentName ? `${componentName} Example` : 'Project Preview' +} + +// Function to generate description +export const generateDescription = (componentName?: string): string => { + const baseURL = globalThis.location.href + return componentName + ? `${componentName} example from ${baseURL}` + : `Official example from ${baseURL}` +} + +// Function to generate dependencies +export const getDependencies = (language: 'js' | 'ts'): Record => { + const dependencies: Record = { + '@coreui/coreui': 'latest', + '@coreui/react': 'latest', + '@popperjs/core': 'latest', + react: 'latest', + 'react-dom': 'latest', + 'react-scripts': 'latest', + } + + if (language === 'ts') { + dependencies['typescript'] = 'latest' + dependencies['@types/jest'] = 'latest' + dependencies['@types/node'] = 'latest' + dependencies['@types/react'] = 'latest' + dependencies['@types/react-dom'] = 'latest' + } + + return dependencies +} + +// Function to generate scripts +export const getScripts = (): Record => { + return { + start: 'react-scripts start', + build: 'react-scripts build', + } +} + +// Function to generate index.html content +export const generateIndexHTML = (title: string): string => { + return ` + + + + ${title} + + + +

+ + ` +} + +// Function to generate index.js or index.tsx content +export const generateIndexJS = ( + name: string, + language: 'js' | 'ts', + templateType: 'codesandbox' | 'stackblitz', +): string => { + const importReactDOM = + templateType === 'codesandbox' + ? `import ReactDOM from 'react-dom';` + : `import * as ReactDOM from 'react-dom/client';` + + const renderMethod = + templateType === 'codesandbox' + ? `ReactDOM.render( + +

+ <${name} /> +

+ , + document.getElementById('root') + );` + : `ReactDOM.createRoot(document.querySelector("#root")).render( + +

+ <${name} /> +

+ + );` + + return `import React from 'react'; + ${importReactDOM} + import '@coreui/coreui/dist/css/coreui.min.css'; + import { ${name} } from './${name}.${language}x'; + + ${renderMethod}` +} + +// Function to generate package.json content +export const generatePackageJSON = ( + title: string, + description: string, + language: 'js' | 'ts', + templateType: 'codesandbox' | 'stackblitz', +): string => { + const indexExtension = language === 'ts' ? 'tsx' : 'js' + + const packageJSON = { + name: title.toLowerCase().replaceAll(/\s+/g, '-'), + version: '1.0.0', + description, + main: templateType === 'codesandbox' ? `src/index.${indexExtension}` : `index.js`, + scripts: getScripts(), + dependencies: getDependencies(language), + ...(templateType === 'stackblitz' && { + devDependencies: language === 'ts' ? getDependencies(language) : {}, + }), + } + + return JSON.stringify(packageJSON, null, 2) +} diff --git a/packages/docs/src/utils/stackblitz.ts b/packages/docs/src/utils/stackblitz.ts new file mode 100644 index 00000000..68fbb8fd --- /dev/null +++ b/packages/docs/src/utils/stackblitz.ts @@ -0,0 +1,48 @@ +// openStackBlitzProject.ts + +import sdk, { Project } from '@stackblitz/sdk' +import { + ProjectOptions, + generateTitle, + generateDescription, + getDependencies, + generateIndexHTML, + generateIndexJS, + generatePackageJSON, +} from './projectUtils' + +// Define the options interface specific to StackBlitz +interface StackBlitzOptions extends ProjectOptions { + language: 'js' | 'ts' +} + +// Function to open a StackBlitz project +export const openStackBlitzProject = (options: StackBlitzOptions) => { + const { code, componentName, language, name } = options + + const title = generateTitle(componentName) + const description = generateDescription(componentName) + const template = 'create-react-app' + + const indexHTML = generateIndexHTML(title) + const indexJS = generateIndexJS(name, language, 'stackblitz') + const packageJSON = generatePackageJSON(title, description, language, 'stackblitz') + + const files = { + 'public/index.html': indexHTML, + [`src/${name}.${language}x`]: code, + [`src/index.js`]: indexJS, // StackBlitz uses 'index.js' regardless of language + 'package.json': packageJSON, + } + + const project: Project = { + title, + description, + template, + files, + dependencies: getDependencies(language), + tags: ['coreui', 'react'], + } + + sdk.openProject(project, { openFile: `src/index.${language === 'ts' ? 'tsx' : 'js'}` }) +} From d7750f6ba11330784d55e8be02b3c40d5ee84842 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 30 Nov 2024 12:13:58 +0100 Subject: [PATCH 027/116] docs(CAccordion): update documentation --- .../components/accordion/customizing.mdx | 2 +- .../examples/AccordionAlwaysOpenExample.tsx | 42 ++++++ .../accordion/examples/AccordionExample.tsx | 42 ++++++ .../examples/AccordionFlushExample.tsx | 42 ++++++ .../content/components/accordion/index.mdx | 139 +++--------------- 5 files changed, 145 insertions(+), 122 deletions(-) create mode 100644 packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx create mode 100644 packages/docs/content/components/accordion/examples/AccordionExample.tsx create mode 100644 packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx diff --git a/packages/docs/content/components/accordion/customizing.mdx b/packages/docs/content/components/accordion/customizing.mdx index c8efeaff..e5021548 100644 --- a/packages/docs/content/components/accordion/customizing.mdx +++ b/packages/docs/content/components/accordion/customizing.mdx @@ -34,7 +34,7 @@ const customVars = { '--cui-accordion-bg': '#f8f9fa', } -;{/* Accordion content */} +return {/* Accordion content */} ``` ### SASS variables diff --git a/packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx b/packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx new file mode 100644 index 00000000..04091e0f --- /dev/null +++ b/packages/docs/content/components/accordion/examples/AccordionAlwaysOpenExample.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react' + +export const AccordionAlwaysOpenExample = () => { + return ( + + + Accordion Item #1 + + This is the first item's accordion body. It is hidden by default, + until the collapse plugin adds the appropriate classes that we use to style each element. + These classes control the overall appearance, as well as the showing and hiding via CSS + transitions. You can modify any of this with custom CSS or overriding our default + variables. It's also worth noting that just about any HTML can go within the{' '} + .accordion-body, though the transition does limit overflow. + + + + Accordion Item #2 + + This is the second item's accordion body. It is hidden by default, + until the collapse plugin adds the appropriate classes that we use to style each element. + These classes control the overall appearance, as well as the showing and hiding via CSS + transitions. You can modify any of this with custom CSS or overriding our default + variables. It's also worth noting that just about any HTML can go within the{' '} + .accordion-body, though the transition does limit overflow. + + + + Accordion Item #3 + + This is the second item's accordion body. It is hidden by default, + until the collapse plugin adds the appropriate classes that we use to style each element. + These classes control the overall appearance, as well as the showing and hiding via CSS + transitions. You can modify any of this with custom CSS or overriding our default + variables. It's also worth noting that just about any HTML can go within the{' '} + .accordion-body, though the transition does limit overflow. + + + + ) +} diff --git a/packages/docs/content/components/accordion/examples/AccordionExample.tsx b/packages/docs/content/components/accordion/examples/AccordionExample.tsx new file mode 100644 index 00000000..cc6598d0 --- /dev/null +++ b/packages/docs/content/components/accordion/examples/AccordionExample.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react' + +export const AccordionExample = () => { + return ( + + + Accordion Item #1 TSX + + This is the first item's accordion body. It is hidden by default, + until the collapse plugin adds the appropriate classes that we use to style each element. + These classes control the overall appearance, as well as the showing and hiding via CSS + transitions. You can modify any of this with custom CSS or overriding our default + variables. It's also worth noting that just about any HTML can go within the{' '} + .accordion-body, though the transition does limit overflow. + + + + Accordion Item #2 + + This is the second item's accordion body. It is hidden by default, + until the collapse plugin adds the appropriate classes that we use to style each element. + These classes control the overall appearance, as well as the showing and hiding via CSS + transitions. You can modify any of this with custom CSS or overriding our default + variables. It's also worth noting that just about any HTML can go within the{' '} + .accordion-body, though the transition does limit overflow. + + + + Accordion Item #3 + + This is the second item's accordion body. It is hidden by default, + until the collapse plugin adds the appropriate classes that we use to style each element. + These classes control the overall appearance, as well as the showing and hiding via CSS + transitions. You can modify any of this with custom CSS or overriding our default + variables. It's also worth noting that just about any HTML can go within the{' '} + .accordion-body, though the transition does limit overflow. + + + + ) +} diff --git a/packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx b/packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx new file mode 100644 index 00000000..0b9e1ed4 --- /dev/null +++ b/packages/docs/content/components/accordion/examples/AccordionFlushExample.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import { CAccordion, CAccordionBody, CAccordionHeader, CAccordionItem } from '@coreui/react' + +export const AccordionFlushExample = () => { + return ( + + + Accordion Item #1 + + This is the first item's accordion body. It is hidden by default, + until the collapse plugin adds the appropriate classes that we use to style each element. + These classes control the overall appearance, as well as the showing and hiding via CSS + transitions. You can modify any of this with custom CSS or overriding our default + variables. It's also worth noting that just about any HTML can go within the{' '} + .accordion-body, though the transition does limit overflow. + + + + Accordion Item #2 + + This is the second item's accordion body. It is hidden by default, + until the collapse plugin adds the appropriate classes that we use to style each element. + These classes control the overall appearance, as well as the showing and hiding via CSS + transitions. You can modify any of this with custom CSS or overriding our default + variables. It's also worth noting that just about any HTML can go within the{' '} + .accordion-body, though the transition does limit overflow. + + + + Accordion Item #3 + + This is the third item's accordion body. It is hidden by default, + until the collapse plugin adds the appropriate classes that we use to style each element. + These classes control the overall appearance, as well as the showing and hiding via CSS + transitions. You can modify any of this with custom CSS or overriding our default + variables. It's also worth noting that just about any HTML can go within the{' '} + .accordion-body, though the transition does limit overflow. + + + + ) +} diff --git a/packages/docs/content/components/accordion/index.mdx b/packages/docs/content/components/accordion/index.mdx index 1273767c..491ea4bf 100644 --- a/packages/docs/content/components/accordion/index.mdx +++ b/packages/docs/content/components/accordion/index.mdx @@ -8,138 +8,35 @@ other_frameworks: accordion pro_component: false --- -import { useState } from 'react' - -import { - CAccordion, - CAccordionBody, - CAccordionCollapse, - CAccordionHeader, - CAccordionItem, -} from '@coreui/react/src/index' - ## How to use React Accordion component. Click the accordions below to expand/collapse the accordion content. -```jsx preview - - - Accordion Item #1 - - This is the first item's accordion body. It is hidden by default, until the - collapse plugin adds the appropriate classes that we use to style each element. These classes - control the overall appearance, as well as the showing and hiding via CSS transitions. You can - modify any of this with custom CSS or overriding our default variables. It's also worth noting - that just about any HTML can go within the .accordion-body, though the transition - does limit overflow. - - - - Accordion Item #2 - - This is the second item's accordion body. It is hidden by default, until the - collapse plugin adds the appropriate classes that we use to style each element. These classes - control the overall appearance, as well as the showing and hiding via CSS transitions. You can - modify any of this with custom CSS or overriding our default variables. It's also worth noting - that just about any HTML can go within the .accordion-body, though the transition - does limit overflow. - - - - Accordion Item #3 - - This is the second item's accordion body. It is hidden by default, until the - collapse plugin adds the appropriate classes that we use to style each element. These classes - control the overall appearance, as well as the showing and hiding via CSS transitions. You can - modify any of this with custom CSS or overriding our default variables. It's also worth noting - that just about any HTML can go within the .accordion-body, though the transition - does limit overflow. - - - -``` +import { AccordionExample } from './examples/AccordionExample.tsx' +import AccordionExampleTS from '!!raw-loader!./examples/AccordionExample.tsx' + + + + ### Flush Add `flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. -```jsx preview - - - Accordion Item #1 - - This is the first item's accordion body. It is hidden by default, until the - collapse plugin adds the appropriate classes that we use to style each element. These classes - control the overall appearance, as well as the showing and hiding via CSS transitions. You can - modify any of this with custom CSS or overriding our default variables. It's also worth noting - that just about any HTML can go within the .accordion-body, though the transition - does limit overflow. - - - - Accordion Item #2 - - This is the second item's accordion body. It is hidden by default, until the - collapse plugin adds the appropriate classes that we use to style each element. These classes - control the overall appearance, as well as the showing and hiding via CSS transitions. You can - modify any of this with custom CSS or overriding our default variables. It's also worth noting - that just about any HTML can go within the .accordion-body, though the transition - does limit overflow. - - - - Accordion Item #3 - - This is the third item's accordion body. It is hidden by default, until the - collapse plugin adds the appropriate classes that we use to style each element. These classes - control the overall appearance, as well as the showing and hiding via CSS transitions. You can - modify any of this with custom CSS or overriding our default variables. It's also worth noting - that just about any HTML can go within the .accordion-body, though the transition - does limit overflow. - - - -``` +import { AccordionFlushExample } from './examples/AccordionFlushExample.tsx' +import AccordionFlushExampleTS from '!!raw-loader!./examples/AccordionFlushExample.tsx' + + + + ### Always open Add `alwaysOpen` property to make react accordion items stay open when another item is opened. -```jsx preview - - - Accordion Item #1 - - This is the first item's accordion body. It is hidden by default, until the - collapse plugin adds the appropriate classes that we use to style each element. These classes - control the overall appearance, as well as the showing and hiding via CSS transitions. You can - modify any of this with custom CSS or overriding our default variables. It's also worth noting - that just about any HTML can go within the .accordion-body, though the transition - does limit overflow. - - - - Accordion Item #2 - - This is the second item's accordion body. It is hidden by default, until the - collapse plugin adds the appropriate classes that we use to style each element. These classes - control the overall appearance, as well as the showing and hiding via CSS transitions. You can - modify any of this with custom CSS or overriding our default variables. It's also worth noting - that just about any HTML can go within the .accordion-body, though the transition - does limit overflow. - - - - Accordion Item #3 - - This is the second item's accordion body. It is hidden by default, until the - collapse plugin adds the appropriate classes that we use to style each element. These classes - control the overall appearance, as well as the showing and hiding via CSS transitions. You can - modify any of this with custom CSS or overriding our default variables. It's also worth noting - that just about any HTML can go within the .accordion-body, though the transition - does limit overflow. - - - -``` +import { AccordionAlwaysOpenExample } from './examples/AccordionAlwaysOpenExample.tsx' +import AccordionAlwaysOpenExampleTS from '!!raw-loader!./examples/AccordionAlwaysOpenExample.tsx' + + + + From 6f0e81e4f1136d1821e569ff475731a418a5da1e Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 30 Nov 2024 12:43:12 +0100 Subject: [PATCH 028/116] docs: refactor code --- packages/docs/src/components/Callout.tsx | 2 +- .../docs/src/components/ClassNamesDocs.tsx | 2 +- packages/docs/src/components/CodeBlock.tsx | 4 +- packages/docs/src/components/Example.tsx | 2 +- .../docs/src/components/ExampleSnippet.tsx | 2 +- packages/docs/src/templates/DocsLayout.tsx | 222 +++++++++++------- packages/docs/src/templates/MdxLayout.tsx | 53 +++-- 7 files changed, 180 insertions(+), 107 deletions(-) diff --git a/packages/docs/src/components/Callout.tsx b/packages/docs/src/components/Callout.tsx index b1299b12..a04e594d 100644 --- a/packages/docs/src/components/Callout.tsx +++ b/packages/docs/src/components/Callout.tsx @@ -1,5 +1,5 @@ import React, { FC, ReactNode } from 'react' -interface CalloutProps { +export interface CalloutProps { children: ReactNode color: string title?: string diff --git a/packages/docs/src/components/ClassNamesDocs.tsx b/packages/docs/src/components/ClassNamesDocs.tsx index 774da05f..e9017c78 100644 --- a/packages/docs/src/components/ClassNamesDocs.tsx +++ b/packages/docs/src/components/ClassNamesDocs.tsx @@ -72,7 +72,7 @@ const extractCLassNames = (code: string) => { return classNamesArray } -const ClassNamesDocs = ({ files }) => { +const ClassNamesDocs = ({ files }: { files: string | string[] }) => { const _files = Array.isArray(files) ? files : [files] const classNames = _files.flatMap((file) => { diff --git a/packages/docs/src/components/CodeBlock.tsx b/packages/docs/src/components/CodeBlock.tsx index d7fd2422..9b78aabc 100644 --- a/packages/docs/src/components/CodeBlock.tsx +++ b/packages/docs/src/components/CodeBlock.tsx @@ -1,12 +1,12 @@ import React, { FC } from 'react' import { Highlight, Prism } from 'prism-react-renderer' -interface CodeBlockProps { +export interface CodeBlockProps { children: any // eslint-disable-line @typescript-eslint/no-explicit-any } const CodeBlock: FC = ({ children }) => { - ;(typeof global === 'undefined' ? window : global).Prism = Prism + ;(typeof globalThis === 'undefined' ? globalThis : globalThis).Prism = Prism // eslint-disable-next-line unicorn/prefer-module require('prismjs/components/prism-bash') require('prismjs/components/prism-scss') diff --git a/packages/docs/src/components/Example.tsx b/packages/docs/src/components/Example.tsx index c8c2a47e..d5992eae 100644 --- a/packages/docs/src/components/Example.tsx +++ b/packages/docs/src/components/Example.tsx @@ -1,5 +1,5 @@ import React, { FC, ReactNode } from 'react' -interface ExampleProps { +export interface ExampleProps { children: ReactNode className: string } diff --git a/packages/docs/src/components/ExampleSnippet.tsx b/packages/docs/src/components/ExampleSnippet.tsx index 87a50bd7..1e5428f3 100644 --- a/packages/docs/src/components/ExampleSnippet.tsx +++ b/packages/docs/src/components/ExampleSnippet.tsx @@ -13,7 +13,7 @@ interface CodeSnippets { ts?: string } -interface ExampleSnippetProps { +export interface ExampleSnippetProps { children: ReactNode className?: string code: string | CodeSnippets diff --git a/packages/docs/src/templates/DocsLayout.tsx b/packages/docs/src/templates/DocsLayout.tsx index 289862ef..99b256f2 100644 --- a/packages/docs/src/templates/DocsLayout.tsx +++ b/packages/docs/src/templates/DocsLayout.tsx @@ -1,44 +1,131 @@ -import React, { FC } from 'react' +import React, { FC, ReactNode, useMemo } from 'react' import { Ads, Banner, Seo, Toc } from '../components' -import { CContainer, CNav, CNavItem, CNavLink } from '@coreui/react/src/' +import { CContainer, CNav, CNavItem, CNavLink } from '@coreui/react' +// @ts-expect-error json file +import jsonData from './../data/other_frameworks.json' + +import type { TocItem } from '../components/Toc' interface DocsLayoutProps { - children: any // eslint-disable-line @typescript-eslint/no-explicit-any - data: any // eslint-disable-line @typescript-eslint/no-explicit-any - location: any // eslint-disable-line @typescript-eslint/no-explicit-any - pageContext: any // eslint-disable-line @typescript-eslint/no-explicit-any + children: ReactNode + data: DocsData + location: Location + pageContext: PageContext } -// @ts-expect-error json file -import jsonData from './../data/other_frameworks.json' +interface DocsData { + allMdx: { + edges: Array<{ + node: { + fields: { + slug: string + } + } + }> + } + mdx?: { + tableOfContents: { + items: TocItem[] + } + } +} + +interface PageContext { + frontmatter?: Frontmatter +} -const humanize = (text: string) => { - const string = text +interface Frontmatter { + title?: string + description?: string + name?: string + other_frameworks?: string + pro_component?: boolean + route?: string +} + +interface OtherFrameworks { + [key: string]: { + [key: string]: string + } +} + +const humanize = (text: string): string => { + return text .split('-') - .reduce( - (accumulator, currentValue) => - accumulator + ' ' + currentValue[0].toUpperCase() + currentValue.slice(1), - ) - return string[0].toUpperCase() + string.slice(1) + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) + .join(' ') } +const DocsNav: FC<{ + route: string + locationPathname: string + hasNavAPI: boolean + hasNavStyling: boolean + hasNavAccessibility: boolean +}> = ({ route, locationPathname, hasNavAPI, hasNavStyling, hasNavAccessibility }) => ( + + + + Features + + + {hasNavAPI && ( + + + API + + + )} + {hasNavStyling && ( + + + Styling + + + )} + {hasNavAccessibility && ( + + + Accessibility + + + )} + +) + const DocsLayout: FC = ({ children, data, location, pageContext }) => { - const title = pageContext.frontmatter ? pageContext.frontmatter.title : '' - const description = pageContext.frontmatter ? pageContext.frontmatter.description : '' - const name = pageContext.frontmatter ? pageContext.frontmatter.name : '' - const other_frameworks = pageContext.frontmatter ? pageContext.frontmatter.other_frameworks : '' - const pro_component = pageContext.frontmatter ? pageContext.frontmatter.pro_component : '' - const route = pageContext.frontmatter ? pageContext.frontmatter.route : '' - const frameworks = other_frameworks ? other_frameworks.split(', ') : false - const otherFrameworks = JSON.parse(JSON.stringify(jsonData)) + const frontmatter = pageContext.frontmatter || {} - const hasNav = data?.allMdx?.edges.length > 1 - const hasNavAccesibility = - hasNav && data.allMdx.edges.some((edge: any) => edge.node.fields.slug.includes('accesibility')) - const hasNavAPI = - hasNav && data.allMdx.edges.some((edge: any) => edge.node.fields.slug.includes('api')) - const hasNavCustomizing = - hasNav && data.allMdx.edges.some((edge: any) => edge.node.fields.slug.includes('customizing')) + const { + title = '', + description = '', + name = '', + other_frameworks: otherFrameworksStr = '', + pro_component: proComponent = false, + route = '', + } = frontmatter + const frameworks = useMemo( + () => otherFrameworksStr.split(', ').filter(Boolean), + [otherFrameworksStr], + ) + const otherFrameworks: OtherFrameworks = useMemo(() => ({ ...jsonData }), []) + const hasNav = useMemo(() => data?.allMdx?.edges.length > 1, [data]) + const hasNavAccessibility = useMemo( + () => + hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('accessibility')), + [hasNav, data], + ) + const hasNavAPI = useMemo( + () => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('api')), + [hasNav, data], + ) + const hasNavStyling = useMemo( + () => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('styling')), + [hasNav, data], + ) return ( <> @@ -46,40 +133,13 @@ const DocsLayout: FC = ({ children, data, location, pageContext

{hasNav && ( - - - - Features - - - {hasNavAPI && ( - - - API - - - )} - {hasNavCustomizing && ( - - - Customizing - - - )} - {hasNavAccesibility && ( - - - Accesibility - - - )} - + )}

{name && name !== title ? ( @@ -94,38 +154,36 @@ const DocsLayout: FC = ({ children, data, location, pageContext {title} )} - +

{description}

- {frameworks && ( + {frameworks.length > 0 && ( <> -

Other frameworks

Other Frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

- {Object.keys(otherFrameworks[item]).map( - (el, index) => - el !== 'react' && ( -

- - <> - {el[0].toUpperCase() + el.slice(1)} {humanize(item)} - - -

- ), - )} + {frameworks.map((item) => ( + + {Object.entries(otherFrameworks[item] || {}) + .filter(([key]) => key !== 'react') + .map(([framework, url]) => ( +

+ + {framework.charAt(0).toUpperCase() + framework.slice(1)}{' '} + {humanize(item)} + +

+ ))} ))}

)}

- {data && data.mdx && } + {data.mdx && }

{children}

diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx index 72f2e48c..a0b1c551 100644 --- a/packages/docs/src/templates/MdxLayout.tsx +++ b/packages/docs/src/templates/MdxLayout.tsx @@ -1,5 +1,5 @@ import React, { FC } from 'react' -import { graphql } from 'gatsby' +import { graphql, PageProps } from 'gatsby' import { MDXProvider } from '@mdx-js/react' import { Callout, @@ -11,16 +11,38 @@ import { ScssDocs, } from '../components' -interface MdxLayoutProps { - data: any // eslint-disable-line @typescript-eslint/no-explicit-any - children: any // eslint-disable-line @typescript-eslint/no-explicit-any +import { CalloutProps } from '../components/Callout' +import { CodeBlockProps } from '../components/CodeBlock' +import { ExampleProps } from '../components/Example' +import { ExampleSnippetProps } from '../components/ExampleSnippet' +import { ScssDocsProps } from '../components/ScssDocs' +import type { TocItem } from '../components/Toc' + +interface DataProps { + mdx: { + tableOfContents: Toc + } + allMdx: { + edges: Array<{ + node: { + id: string + fields: { + slug: string + } + } + }> + } +} + +interface Toc { + items: TocItem[] } -const MdxLayout: FC = ({ children }) => { +const MdxLayout: FC> = ({ children }) => { return ( { + Callout: (props: CalloutProps) => { const { children, title, ...rest } = props return ( @@ -29,10 +51,8 @@ const MdxLayout: FC = ({ children }) => { ) }, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ClassNamesDocs: (props: any) => , - // eslint-disable-next-line @typescript-eslint/no-explicit-any - Example: (props: any) => { + ClassNamesDocs: (props: { files: string | string[] }) => , + Example: (props: ExampleProps) => { const { children, ...rest } = props return ( @@ -45,15 +65,10 @@ const MdxLayout: FC = ({ children }) => { ) }, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ExampleSnippet: (props: any) => , - // eslint-disable-next-line @typescript-eslint/no-explicit-any - JSXDocs: (props: any) => , - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ScssDocs: (props: any) => , - // eslint-disable-next-line @typescript-eslint/no-explicit-any - pre: (props: any) => , - // eslint-disable-next-line @typescript-eslint/no-explicit-any + ExampleSnippet: (props: ExampleSnippetProps) => , + JSXDocs: (props: { code: string }) => , + ScssDocs: (props: ScssDocsProps) => , + pre: (props: CodeBlockProps) => , }} > {children} From 05d218ad765db8618ab1ed62ed1d035e7e427b91 Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 30 Nov 2024 12:51:59 +0100 Subject: [PATCH 029/116] docs: refactor code --- packages/docs/src/components/ScssDocs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/src/components/ScssDocs.tsx b/packages/docs/src/components/ScssDocs.tsx index 53c36b9f..85abd683 100644 --- a/packages/docs/src/components/ScssDocs.tsx +++ b/packages/docs/src/components/ScssDocs.tsx @@ -2,7 +2,7 @@ import React from 'react' import { useStaticQuery, graphql } from 'gatsby' import { Highlight, Prism } from 'prism-react-renderer' -interface ScssDocsProps { +export interface ScssDocsProps { file: string capture: string } From d9255fee5224ca4f968a58de2112b036522e9a5b Mon Sep 17 00:00:00 2001 From: mrholek Date: Sat, 30 Nov 2024 12:52:26 +0100 Subject: [PATCH 030/116] docs(CAccordion): update documentation --- .../accordion/{accesibility.mdx => accessibility.mdx} | 0 .../components/accordion/{customizing.mdx => styling.mdx} | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) rename packages/docs/content/components/accordion/{accesibility.mdx => accessibility.mdx} (100%) rename packages/docs/content/components/accordion/{customizing.mdx => styling.mdx} (94%) diff --git a/packages/docs/content/components/accordion/accesibility.mdx b/packages/docs/content/components/accordion/accessibility.mdx similarity index 100% rename from packages/docs/content/components/accordion/accesibility.mdx rename to packages/docs/content/components/accordion/accessibility.mdx diff --git a/packages/docs/content/components/accordion/customizing.mdx b/packages/docs/content/components/accordion/styling.mdx similarity index 94% rename from packages/docs/content/components/accordion/customizing.mdx rename to packages/docs/content/components/accordion/styling.mdx index e5021548..5f48c98a 100644 --- a/packages/docs/content/components/accordion/customizing.mdx +++ b/packages/docs/content/components/accordion/styling.mdx @@ -1,6 +1,6 @@ --- -title: React Accordion Component Customizing -name: Accordion Customizing +title: React Accordion Component Styling +name: Accordion Styling description: Learn how to customize the React Accordion component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design. route: /components/accordion/ --- From dbd9f9297efc180d1f0ba0fe778f28163bf1b468 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 2 Dec 2024 09:24:53 +0100 Subject: [PATCH 031/116] docs(ExampleSnippet): add support for pro component --- .../docs/src/components/ExampleSnippet.tsx | 8 +++- packages/docs/src/utils/codesandbox.ts | 6 +-- packages/docs/src/utils/projectUtils.ts | 45 +++++++++++-------- packages/docs/src/utils/stackblitz.ts | 8 ++-- 4 files changed, 40 insertions(+), 27 deletions(-) diff --git a/packages/docs/src/components/ExampleSnippet.tsx b/packages/docs/src/components/ExampleSnippet.tsx index 1e5428f3..c7a4ed09 100644 --- a/packages/docs/src/components/ExampleSnippet.tsx +++ b/packages/docs/src/components/ExampleSnippet.tsx @@ -19,6 +19,7 @@ export interface ExampleSnippetProps { code: string | CodeSnippets codeSandbox?: boolean componentName?: string + pro?: boolean stackBlitz?: boolean } @@ -28,6 +29,7 @@ const ExampleSnippet: FC = ({ code, codeSandbox = true, componentName, + pro = false, stackBlitz = true, }) => { const [language, setLanguage] = useState<'js' | 'ts'>('js') @@ -87,9 +89,10 @@ const ExampleSnippet: FC = ({ onClick={() => openCodeSandboxProject({ name: React.isValidElement(children) && (children as any).type?.name, - language: language, + language, code: language === 'js' ? codeJS : codeTS || '', componentName, + pro, }) } disabled={language === 'ts' && !hasTS} @@ -107,9 +110,10 @@ const ExampleSnippet: FC = ({ onClick={() => openStackBlitzProject({ name: React.isValidElement(children) && (children as any).type?.name, - language: language, + language, code: language === 'js' ? codeJS : codeTS || '', componentName, + pro, }) } disabled={language === 'ts' && !hasTS} diff --git a/packages/docs/src/utils/codesandbox.ts b/packages/docs/src/utils/codesandbox.ts index c826e18f..19fbb6b2 100644 --- a/packages/docs/src/utils/codesandbox.ts +++ b/packages/docs/src/utils/codesandbox.ts @@ -16,7 +16,7 @@ interface CodeSandboxOptions extends ProjectOptions { // Function to open a CodeSandbox project export const openCodeSandboxProject = async (options: CodeSandboxOptions) => { - const { code, componentName, language, name } = options + const { code, componentName, language, name, pro = false } = options const title = generateTitle(componentName) const description = generateDescription(componentName) @@ -24,8 +24,8 @@ export const openCodeSandboxProject = async (options: CodeSandboxOptions) => { const indexHTML = generateIndexHTML(title) const indexExtension = language === 'ts' ? 'tsx' : 'js' - const indexJS = generateIndexJS(name, language, 'codesandbox') - const packageJSON = generatePackageJSON(title, description, language, 'codesandbox') + const indexJS = generateIndexJS(name, language, pro, 'codesandbox') + const packageJSON = generatePackageJSON(title, description, language, pro, 'codesandbox') // Define the files structure const files: Record = { diff --git a/packages/docs/src/utils/projectUtils.ts b/packages/docs/src/utils/projectUtils.ts index 81c97cd7..be6041fd 100644 --- a/packages/docs/src/utils/projectUtils.ts +++ b/packages/docs/src/utils/projectUtils.ts @@ -6,7 +6,7 @@ export interface ProjectOptions { componentName?: string language: 'js' | 'ts' name: string - pro?: boolean + pro: boolean } // Function to generate title @@ -23,10 +23,17 @@ export const generateDescription = (componentName?: string): string => { } // Function to generate dependencies -export const getDependencies = (language: 'js' | 'ts'): Record => { +export const getDependencies = (language: 'js' | 'ts', pro: boolean): Record => { const dependencies: Record = { - '@coreui/coreui': 'latest', - '@coreui/react': 'latest', + ...(pro + ? { + '@coreui/coreui-pro': 'latest', + '@coreui/react-pro': 'latest', + } + : { + '@coreui/coreui': 'latest', + '@coreui/react': 'latest', + }), '@popperjs/core': 'latest', react: 'latest', 'react-dom': 'latest', @@ -55,22 +62,23 @@ export const getScripts = (): Record => { // Function to generate index.html content export const generateIndexHTML = (title: string): string => { return ` - - - - ${title} - - - -

- - ` + + + + ${title} + + + +

+ + ` } // Function to generate index.js or index.tsx content export const generateIndexJS = ( name: string, language: 'js' | 'ts', + pro: boolean, templateType: 'codesandbox' | 'stackblitz', ): string => { const importReactDOM = @@ -98,9 +106,9 @@ export const generateIndexJS = ( return `import React from 'react'; ${importReactDOM} - import '@coreui/coreui/dist/css/coreui.min.css'; + import '@coreui/${pro ? 'coreui-pro' : 'coreui'}/dist/css/coreui.min.css'; import { ${name} } from './${name}.${language}x'; - + ${renderMethod}` } @@ -109,6 +117,7 @@ export const generatePackageJSON = ( title: string, description: string, language: 'js' | 'ts', + pro: boolean, templateType: 'codesandbox' | 'stackblitz', ): string => { const indexExtension = language === 'ts' ? 'tsx' : 'js' @@ -119,9 +128,9 @@ export const generatePackageJSON = ( description, main: templateType === 'codesandbox' ? `src/index.${indexExtension}` : `index.js`, scripts: getScripts(), - dependencies: getDependencies(language), + dependencies: getDependencies(language, pro), ...(templateType === 'stackblitz' && { - devDependencies: language === 'ts' ? getDependencies(language) : {}, + devDependencies: language === 'ts' ? getDependencies(language, pro) : {}, }), } diff --git a/packages/docs/src/utils/stackblitz.ts b/packages/docs/src/utils/stackblitz.ts index 68fbb8fd..7805132b 100644 --- a/packages/docs/src/utils/stackblitz.ts +++ b/packages/docs/src/utils/stackblitz.ts @@ -18,15 +18,15 @@ interface StackBlitzOptions extends ProjectOptions { // Function to open a StackBlitz project export const openStackBlitzProject = (options: StackBlitzOptions) => { - const { code, componentName, language, name } = options + const { code, componentName, language, name, pro = false } = options const title = generateTitle(componentName) const description = generateDescription(componentName) const template = 'create-react-app' const indexHTML = generateIndexHTML(title) - const indexJS = generateIndexJS(name, language, 'stackblitz') - const packageJSON = generatePackageJSON(title, description, language, 'stackblitz') + const indexJS = generateIndexJS(name, language, pro, 'stackblitz') + const packageJSON = generatePackageJSON(title, description, language, pro, 'stackblitz') const files = { 'public/index.html': indexHTML, @@ -40,7 +40,7 @@ export const openStackBlitzProject = (options: StackBlitzOptions) => { description, template, files, - dependencies: getDependencies(language), + dependencies: getDependencies(language, pro), tags: ['coreui', 'react'], } From 988294c581339aefebff691e706a9dbe2b7db66c Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 2 Dec 2024 09:25:52 +0100 Subject: [PATCH 032/116] build: update API generator --- packages/docs/build/api.mjs | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/docs/build/api.mjs b/packages/docs/build/api.mjs index e6b6d7be..d2d174a8 100644 --- a/packages/docs/build/api.mjs +++ b/packages/docs/build/api.mjs @@ -52,12 +52,15 @@ const DOCGEN_OPTIONS = { * List of pro components that require special handling. */ const PRO_COMPONENTS = [ + 'CCalendar', 'CDatePicker', 'CDateRangePicker', 'CFormMask', 'CLoadingButton', 'CMultiSelect', 'CRating', + 'CRangeSlider', + 'CRating', 'CSmartPagination', 'CSmartTable', 'CTimePicker', @@ -72,13 +75,10 @@ const PRO_COMPONENTS = [ */ function escapeMarkdown(text) { if (typeof text !== 'string') return text - return ( - text - .replaceAll(/(<)/g, String.raw`\$1`) - // .replaceAll(//g, '``') - .replaceAll('\n', '
') - .replaceAll(/`([^`]+)`/g, '{`$1`}') - ) + return text + .replaceAll(/(<)/g, String.raw`\$1`) + .replaceAll('\n', '
') + .replaceAll(/`([^`]+)`/g, '{`$1`}') } /** @@ -190,10 +190,10 @@ async function createMdx(file, component) { let content = `\n\`\`\`jsx\n` const importPathParts = relativeFilename.split('/') if (importPathParts.length > 1) { - content += `import { ${component.displayName} } from '@coreui/${importPathParts[1]}'\n` + content += `import { ${component.displayName} } from '@coreui/${importPathParts[0]}'\n` } content += `// or\n` - content += `import ${component.displayName} from '@coreui${relativeFilename.replace('.tsx', '')}'\n` + content += `import ${component.displayName} from '@coreui/${relativeFilename.replace('.tsx', '')}'\n` content += `\`\`\`\n\n` const sortedProps = Object.entries(component.props).sort(([a], [b]) => a.localeCompare(b)) From 54d8484c68b4380897211384ff69f86d398039d9 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 2 Dec 2024 09:26:20 +0100 Subject: [PATCH 033/116] docs(Toc): update typings --- packages/docs/src/components/Toc.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docs/src/components/Toc.tsx b/packages/docs/src/components/Toc.tsx index ad99fa73..cf29129c 100644 --- a/packages/docs/src/components/Toc.tsx +++ b/packages/docs/src/components/Toc.tsx @@ -1,7 +1,7 @@ import React, { FC, useState } from 'react' import { CCollapse, CNav } from '@coreui/react/src/index' -type TocItem = { +export type TocItem = { url: string title: string items: TocItem[] From 83fc24fc7ca81c72b8e8dfae69e756c4c5fa77c9 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 2 Dec 2024 09:40:57 +0100 Subject: [PATCH 034/116] docs: update content --- packages/docs/content/components/spinner.mdx | 2 +- packages/docs/content/customize/options.mdx | 1 + packages/docs/content/layout/breakpoints.mdx | 1 + packages/docs/content/layout/columns.mdx | 1 + packages/docs/content/layout/grid.mdx | 3 ++- 5 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/docs/content/components/spinner.mdx b/packages/docs/content/components/spinner.mdx index a304992c..dc977bda 100644 --- a/packages/docs/content/components/spinner.mdx +++ b/packages/docs/content/components/spinner.mdx @@ -73,7 +73,7 @@ Use [margin utilities](https://coreui.io/docs/utilities/spacing/#margin-and-padd ### Placement -Use [flexbox utilities][https://coreui.io/docs/utilities/flex/], [float utilities][https://coreui.io/docs/utilities/float/], or [text alignment][https://coreui.io/docs/utilities/text/] utilities to place spinners exactly where you need them in any situation. +Use [flexbox utilities](https://coreui.io/docs/utilities/flex/), [float utilities](https://coreui.io/docs/utilities/float/), or [text alignment](https://coreui.io/docs/utilities/text/) utilities to place spinners exactly where you need them in any situation. #### Flex diff --git a/packages/docs/content/customize/options.mdx b/packages/docs/content/customize/options.mdx index 4e1e6b3e..1e54ce92 100644 --- a/packages/docs/content/customize/options.mdx +++ b/packages/docs/content/customize/options.mdx @@ -1,4 +1,5 @@ --- +title: Options name: Options description: Quickly customize CoreUI for React with built-in variables to easily toggle global CSS preferences for controlling style and behavior. menu: Customize diff --git a/packages/docs/content/layout/breakpoints.mdx b/packages/docs/content/layout/breakpoints.mdx index fd7ddd93..16dced59 100644 --- a/packages/docs/content/layout/breakpoints.mdx +++ b/packages/docs/content/layout/breakpoints.mdx @@ -1,4 +1,5 @@ --- +title: Breakpoints name: Breakpoints description: Breakpoints are the triggers in CoreUI for React.js for how your layout responsive changes across device or viewport sizes. menu: Layout diff --git a/packages/docs/content/layout/columns.mdx b/packages/docs/content/layout/columns.mdx index ed496b07..fb81e457 100644 --- a/packages/docs/content/layout/columns.mdx +++ b/packages/docs/content/layout/columns.mdx @@ -1,4 +1,5 @@ --- +title: Columns name: Columns description: Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. menu: Layout diff --git a/packages/docs/content/layout/grid.mdx b/packages/docs/content/layout/grid.mdx index e6c2c9f3..30c632c8 100644 --- a/packages/docs/content/layout/grid.mdx +++ b/packages/docs/content/layout/grid.mdx @@ -1,8 +1,9 @@ --- name: Grid +title: Grid description: Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes. menu: Layout -route: '/layout/grid' +route: "/layout/grid" --- import { CCol, CContainer, CRow } from '@coreui/react/src/index' From 5bebe21c83a5776bb8b2b203938f52fbad9fce22 Mon Sep 17 00:00:00 2001 From: mrholek Date: Mon, 2 Dec 2024 09:41:21 +0100 Subject: [PATCH 035/116] docs: update API --- packages/docs/content/api/CAccordion.api.mdx | 4 +- .../docs/content/api/CAccordionBody.api.mdx | 4 +- .../docs/content/api/CAccordionButton.api.mdx | 4 +- .../docs/content/api/CAccordionHeader.api.mdx | 4 +- .../docs/content/api/CAccordionItem.api.mdx | 4 +- packages/docs/content/api/CAlert.api.mdx | 69 ++++++- .../docs/content/api/CAlertHeading.api.mdx | 33 +++- packages/docs/content/api/CAlertLink.api.mdx | 24 ++- packages/docs/content/api/CAvatar.api.mdx | 78 +++++++- packages/docs/content/api/CBackdrop.api.mdx | 33 +++- packages/docs/content/api/CBadge.api.mdx | 87 +++++++- packages/docs/content/api/CBreadcrumb.api.mdx | 24 ++- .../docs/content/api/CBreadcrumbItem.api.mdx | 51 ++++- packages/docs/content/api/CButton.api.mdx | 114 +++++++++-- .../docs/content/api/CButtonGroup.api.mdx | 42 +++- .../docs/content/api/CButtonToolbar.api.mdx | 24 ++- packages/docs/content/api/CCallout.api.mdx | 33 +++- packages/docs/content/api/CCard.api.mdx | 51 ++++- packages/docs/content/api/CCardBody.api.mdx | 24 ++- packages/docs/content/api/CCardFooter.api.mdx | 24 ++- packages/docs/content/api/CCardGroup.api.mdx | 24 ++- packages/docs/content/api/CCardHeader.api.mdx | 33 +++- packages/docs/content/api/CCardImage.api.mdx | 42 +++- .../content/api/CCardImageOverlay.api.mdx | 24 ++- packages/docs/content/api/CCardLink.api.mdx | 33 +++- .../docs/content/api/CCardSubtitle.api.mdx | 33 +++- packages/docs/content/api/CCardText.api.mdx | 33 +++- packages/docs/content/api/CCardTitle.api.mdx | 33 +++- packages/docs/content/api/CCarousel.api.mdx | 123 ++++++++++-- .../docs/content/api/CCarouselCaption.api.mdx | 24 ++- .../docs/content/api/CCarouselItem.api.mdx | 33 +++- packages/docs/content/api/CChart.api.mdx | 152 ++++++++++++-- packages/docs/content/api/CCharts.api.mdx | 143 ++++++++++++-- .../docs/content/api/CCloseButton.api.mdx | 51 ++++- packages/docs/content/api/CCol.api.mdx | 78 +++++++- packages/docs/content/api/CCollapse.api.mdx | 60 +++++- .../content/api/CConditionalPortal.api.mdx | 33 +++- packages/docs/content/api/CContainer.api.mdx | 78 +++++++- packages/docs/content/api/CDropdown.api.mdx | 150 ++++++++++++-- .../docs/content/api/CDropdownDivider.api.mdx | 24 ++- .../docs/content/api/CDropdownHeader.api.mdx | 33 +++- .../docs/content/api/CDropdownItem.api.mdx | 60 +++++- .../content/api/CDropdownItemPlain.api.mdx | 33 +++- .../docs/content/api/CDropdownMenu.api.mdx | 33 +++- .../docs/content/api/CDropdownToggle.api.mdx | 150 ++++++++++++-- packages/docs/content/api/CFooter.api.mdx | 33 +++- packages/docs/content/api/CForm.api.mdx | 33 +++- packages/docs/content/api/CFormCheck.api.mdx | 159 +++++++++++++-- .../api/CFormControlValidation.api.mdx | 78 +++++++- .../content/api/CFormControlWrapper.api.mdx | 105 ++++++++-- .../docs/content/api/CFormFeedback.api.mdx | 60 +++++- .../docs/content/api/CFormFloating.api.mdx | 24 ++- packages/docs/content/api/CFormInput.api.mdx | 186 ++++++++++++++++-- packages/docs/content/api/CFormLabel.api.mdx | 33 +++- packages/docs/content/api/CFormRange.api.mdx | 96 +++++++-- packages/docs/content/api/CFormSelect.api.mdx | 159 +++++++++++++-- packages/docs/content/api/CFormSwitch.api.mdx | 87 +++++++- packages/docs/content/api/CFormText.api.mdx | 33 +++- .../docs/content/api/CFormTextarea.api.mdx | 159 +++++++++++++-- packages/docs/content/api/CHeader.api.mdx | 42 +++- .../docs/content/api/CHeaderBrand.api.mdx | 33 +++- .../docs/content/api/CHeaderDivider.api.mdx | 24 ++- packages/docs/content/api/CHeaderNav.api.mdx | 33 +++- packages/docs/content/api/CHeaderText.api.mdx | 24 ++- .../docs/content/api/CHeaderToggler.api.mdx | 24 ++- packages/docs/content/api/CIcon.api.mdx | 118 +++++++++-- packages/docs/content/api/CIconSvg.api.mdx | 71 ++++++- packages/docs/content/api/CImage.api.mdx | 60 +++++- packages/docs/content/api/CInputGroup.api.mdx | 33 +++- .../docs/content/api/CInputGroupText.api.mdx | 33 +++- packages/docs/content/api/CLink.api.mdx | 60 +++++- packages/docs/content/api/CListGroup.api.mdx | 51 ++++- .../docs/content/api/CListGroupItem.api.mdx | 60 +++++- packages/docs/content/api/CModal.api.mdx | 159 +++++++++++++-- packages/docs/content/api/CModalBody.api.mdx | 24 ++- .../docs/content/api/CModalContent.api.mdx | 24 ++- .../docs/content/api/CModalDialog.api.mdx | 60 +++++- .../docs/content/api/CModalFooter.api.mdx | 24 ++- .../docs/content/api/CModalHeader.api.mdx | 33 +++- packages/docs/content/api/CModalTitle.api.mdx | 33 +++- packages/docs/content/api/CNav.api.mdx | 51 ++++- packages/docs/content/api/CNavGroup.api.mdx | 60 +++++- .../docs/content/api/CNavGroupItems.api.mdx | 33 +++- packages/docs/content/api/CNavItem.api.mdx | 60 +++++- packages/docs/content/api/CNavLink.api.mdx | 60 +++++- packages/docs/content/api/CNavTitle.api.mdx | 33 +++- packages/docs/content/api/CNavbar.api.mdx | 78 +++++++- .../docs/content/api/CNavbarBrand.api.mdx | 42 +++- packages/docs/content/api/CNavbarNav.api.mdx | 33 +++- packages/docs/content/api/CNavbarText.api.mdx | 24 ++- .../docs/content/api/CNavbarToggler.api.mdx | 24 ++- packages/docs/content/api/COffcanvas.api.mdx | 114 +++++++++-- .../docs/content/api/COffcanvasBody.api.mdx | 24 ++- .../docs/content/api/COffcanvasHeader.api.mdx | 24 ++- .../docs/content/api/COffcanvasTitle.api.mdx | 33 +++- packages/docs/content/api/CPagination.api.mdx | 42 +++- .../docs/content/api/CPaginationItem.api.mdx | 42 +++- .../docs/content/api/CPlaceholder.api.mdx | 114 +++++++++-- packages/docs/content/api/CPopover.api.mdx | 132 +++++++++++-- packages/docs/content/api/CProgress.api.mdx | 96 +++++++-- .../docs/content/api/CProgressBar.api.mdx | 60 +++++- .../docs/content/api/CProgressStacked.api.mdx | 24 ++- packages/docs/content/api/CRow.api.mdx | 78 +++++++- packages/docs/content/api/CSidebar.api.mdx | 123 ++++++++++-- .../docs/content/api/CSidebarBrand.api.mdx | 33 +++- .../docs/content/api/CSidebarFooter.api.mdx | 24 ++- .../docs/content/api/CSidebarHeader.api.mdx | 24 ++- packages/docs/content/api/CSidebarNav.api.mdx | 33 +++- .../docs/content/api/CSidebarToggler.api.mdx | 24 ++- packages/docs/content/api/CSpinner.api.mdx | 69 ++++++- packages/docs/content/api/CTab.api.mdx | 42 +++- packages/docs/content/api/CTabContent.api.mdx | 24 ++- packages/docs/content/api/CTabList.api.mdx | 42 +++- packages/docs/content/api/CTabPane.api.mdx | 60 +++++- packages/docs/content/api/CTabPanel.api.mdx | 69 ++++++- packages/docs/content/api/CTable.api.mdx | 177 +++++++++++++++-- packages/docs/content/api/CTableBody.api.mdx | 33 +++- .../docs/content/api/CTableCaption.api.mdx | 13 ++ .../docs/content/api/CTableDataCell.api.mdx | 51 ++++- packages/docs/content/api/CTableFoot.api.mdx | 33 +++- packages/docs/content/api/CTableHead.api.mdx | 33 +++- .../docs/content/api/CTableHeaderCell.api.mdx | 33 +++- .../api/CTableResponsiveWrapper.api.mdx | 24 ++- packages/docs/content/api/CTableRow.api.mdx | 51 ++++- packages/docs/content/api/CTabs.api.mdx | 42 +++- packages/docs/content/api/CToast.api.mdx | 87 +++++++- packages/docs/content/api/CToastBody.api.mdx | 24 ++- packages/docs/content/api/CToastClose.api.mdx | 114 +++++++++-- .../docs/content/api/CToastHeader.api.mdx | 33 +++- packages/docs/content/api/CToaster.api.mdx | 42 +++- packages/docs/content/api/CTooltip.api.mdx | 123 ++++++++++-- .../docs/content/api/CWidgetStatsA.api.mdx | 69 ++++++- .../docs/content/api/CWidgetStatsB.api.mdx | 78 +++++++- .../docs/content/api/CWidgetStatsC.api.mdx | 78 +++++++- .../docs/content/api/CWidgetStatsD.api.mdx | 60 +++++- .../docs/content/api/CWidgetStatsE.api.mdx | 51 ++++- .../docs/content/api/CWidgetStatsF.api.mdx | 78 +++++++- .../docs/content/api/CoreUIProvider.api.mdx | 7 + 138 files changed, 6789 insertions(+), 905 deletions(-) create mode 100644 packages/docs/content/api/CoreUIProvider.api.mdx diff --git a/packages/docs/content/api/CAccordion.api.mdx b/packages/docs/content/api/CAccordion.api.mdx index 166e7bb3..dfff727c 100644 --- 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' ```

diff --git a/packages/docs/content/api/CAccordionBody.api.mdx b/packages/docs/content/api/CAccordionBody.api.mdx index b283abe6..c280bef1 100644 --- 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' ```

diff --git a/packages/docs/content/api/CAccordionButton.api.mdx b/packages/docs/content/api/CAccordionButton.api.mdx index 196b70ad..c659fd49 100644 --- 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' ```

diff --git a/packages/docs/content/api/CAccordionHeader.api.mdx b/packages/docs/content/api/CAccordionHeader.api.mdx index 871f15f6..c158599b 100644 --- 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' ```

diff --git a/packages/docs/content/api/CAccordionItem.api.mdx b/packages/docs/content/api/CAccordionItem.api.mdx index 3fece5d6..1eb6b121 100644 --- 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' ```

diff --git a/packages/docs/content/api/CAlert.api.mdx b/packages/docs/content/api/CAlert.api.mdx index f2ed443c..f2f95bfd 100644 --- 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 | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	{`primary`}	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
dismissible#	undefined	{`boolean`}
Optionally add a close button to alert and allow it to self dismiss.
onClose#	undefined	{`() => void`}
Callback fired when the component requests to be closed.
variant#	undefined	{`string`}
Set the alert variant to a solid.
visible#	{`true`}	{`boolean`}
Toggle the visibility of component.

diff --git a/packages/docs/content/api/CAlertHeading.api.mdx b/packages/docs/content/api/CAlertHeading.api.mdx index 25150dea..0bb3f9dd 100644 --- 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` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "h4")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the base component.

diff --git a/packages/docs/content/api/CAlertLink.api.mdx b/packages/docs/content/api/CAlertLink.api.mdx index 027b3254..bbff921e 100644 --- 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` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.

diff --git a/packages/docs/content/api/CAvatar.api.mdx b/packages/docs/content/api/CAvatar.api.mdx index 5e6f6399..e0a72315 100644 --- 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` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
shape#	undefined	{`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`}
Select the shape of the component.
size#	undefined	{`string`}
Size the component small, large, or extra large.
src#	undefined	{`string`}
The src attribute for the img element.
status#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the status indicator to one of CoreUI’s themed colors.
textColor#	undefined	{`'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`}
Sets the text color of the component to one of CoreUI’s themed colors.

diff --git a/packages/docs/content/api/CBackdrop.api.mdx b/packages/docs/content/api/CBackdrop.api.mdx index 0e202b4e..a39d1537 100644 --- 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` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	{`modal-backdrop`}	{`string`}
A string of all className you want applied to the base component.
visible#	undefined	{`boolean`}
Toggle the visibility of modal component.

diff --git a/packages/docs/content/api/CBadge.api.mdx b/packages/docs/content/api/CBadge.api.mdx index b8231272..67e73873 100644 --- a/packages/docs/content/api/CBadge.api.mdx +++ b/packages/docs/content/api/CBadge.api.mdx @@ -5,13 +5,80 @@ import { CBadge } from '@coreui/react' import CBadge from '@coreui/react/src/components/badge/CBadge' ``` -| 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 & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **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` | - | -| **position** | Position badge in one of the corners of a link or button. | `'top-start'` \| `'top-end'` \| `'bottom-end'` \| `'bottom-start'` | - | -| **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. | `'sm'` | - | -| **textBgColor** **_5.0.0+_** | Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. | `'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` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "span")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
position#	undefined	{`"top-start"`}, {`"top-end"`}, {`"bottom-end"`}, {`"bottom-start"`}
Position badge in one of the corners of a link or button.
shape#	undefined	{`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`}
Select the shape of the component.
size#	undefined	{`"sm"`}
Size the component small.
textBgColor#5.0.0+	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.
textColor#	undefined	{`'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`}
Sets the text color of the component to one of CoreUI’s themed colors.

diff --git a/packages/docs/content/api/CBreadcrumb.api.mdx b/packages/docs/content/api/CBreadcrumb.api.mdx index 51e20bf3..c6994e9e 100644 --- a/packages/docs/content/api/CBreadcrumb.api.mdx +++ b/packages/docs/content/api/CBreadcrumb.api.mdx @@ -5,6 +5,24 @@ import { CBreadcrumb } from '@coreui/react' import CBreadcrumb from '@coreui/react/src/components/breadcrumb/CBreadcrumb' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CBreadcrumbItem.api.mdx b/packages/docs/content/api/CBreadcrumbItem.api.mdx index e3b91512..e48c7a5e 100644 --- a/packages/docs/content/api/CBreadcrumbItem.api.mdx +++ b/packages/docs/content/api/CBreadcrumbItem.api.mdx @@ -5,9 +5,48 @@ import { CBreadcrumbItem } from '@coreui/react' import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumbItem' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** **_5.4.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **href** | The `href` attribute for the inner `` component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
active#	undefined	{`boolean`}
Toggle the active state for the component.
as#5.4.0+	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the base component.
href#	undefined	{`string`}
The {`href`} attribute for the inner {`\`} component.

diff --git a/packages/docs/content/api/CButton.api.mdx b/packages/docs/content/api/CButton.api.mdx index 68209926..eabef071 100644 --- a/packages/docs/content/api/CButton.api.mdx +++ b/packages/docs/content/api/CButton.api.mdx @@ -5,16 +5,104 @@ import { CButton } from '@coreui/react' import CButton from '@coreui/react/src/components/button/CButton' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'button')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | button | -| **className** | A string of all className you want applied to the base 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` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | -| **role** | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. | `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 or large. | `'sm'` \| `'lg'` | - | -| **type** | Specifies the type of button. Always specify the type attribute for the `

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "img")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the base component.
orientation#	undefined	{`"top"`}, {`"bottom"`}
Optionally orientate the image to the top, bottom, or make it overlaid across the card.

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "p")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.

Property	Default	Type
activeIndex#	{`0`}	{`number`}
index of the active item.
className#	undefined	{`string`}
A string of all className you want applied to the base component.
controls#	undefined	{`boolean`}
Adding in the previous and next controls.
dark#	undefined	{`boolean`}
Add darker controls, indicators, and captions.
indicators#	undefined	{`boolean`}
Adding indicators at the bottom of the carousel for each item.
interval#	{`5000`}	{`number`}, {`boolean`}
The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
onSlid#	undefined	{`(active: number, direction: string) => void`}
Callback fired when a slide transition end.
onSlide#	undefined	{`(active: number, direction: string) => void`}
Callback fired when a slide transition starts.
pause#	{`hover`}	{`boolean`}, {`"hover"`}
If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.
touch#4.5.0+	{`true`}	{`boolean`}
Set whether the carousel should support left/right swipe interactions on touchscreen devices.
transition#	undefined	{`"slide"`}, {`"crossfade"`}
Set type of the transition.
wrap#	{`true`}	{`boolean`}
Set whether the carousel should cycle continuously or have hard stops.

diff --git a/packages/docs/content/api/CCharts.api.mdx b/packages/docs/content/api/CCharts.api.mdx index 8ab5082b..df4faa63 100644 --- a/packages/docs/content/api/CCharts.api.mdx +++ b/packages/docs/content/api/CCharts.api.mdx @@ -5,19 +5,130 @@ import { CChartBar } from '@coreui/react-chartjs' import CChartBar from '@coreui/react-chartjs/src/CCharts' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **customTooltips** | Enables custom html based tooltips instead of standard tooltips. | `boolean` | true | -| **data** | The data object that is passed into the Chart.js chart (more info). | `ChartData` \| `((canvas: HTMLCanvasElement) => ChartData<...>)` | - | -| **fallbackContent** | A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions. | `React.ReactNode` | - | -| **getDatasetAtEvent** | Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event. | `(dataset: InteractionItem[], event: React.MouseEvent) => void` | - | -| **getElementAtEvent** | Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event. | `(element: InteractionItem[], event: React.MouseEvent) => void` | - | -| **getElementsAtEvent** | Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event. | `(elements: InteractionItem[], event: React.MouseEvent) => void` | - | -| **height** | Height attribute applied to the rendered canvas. | `number` | 150 | -| **id** | ID attribute applied to the rendered canvas. | `string` | - | -| **options** | The options object that is passed into the Chart.js chart. | `_DeepPartialObject & ElementChartOptions & PluginChartOptions<...> & DatasetChartOptions<...> & ScaleChartOptions<...>>` | - | -| **plugins** | The plugins array that is passed into the Chart.js chart (more info) | `Plugin[]` | - | -| **redraw** | If true, will tear down and redraw chart on all updates. | `boolean` | false | -| **width** | Width attribute applied to the rendered canvas. | `number` | 300 | -| **wrapper** | Put the chart into the wrapper div element. | `boolean` | true | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.
customTooltips#	{`true`}	{`boolean`}
Enables custom html based tooltips instead of standard tooltips.
data#	undefined	{`ChartData\`}, {`((canvas: HTMLCanvasElement) => ChartData\<...>)`}
The data object that is passed into the Chart.js chart (more info).
fallbackContent#	undefined	{`React.ReactNode`}
A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.
getDatasetAtEvent#	undefined	{`(dataset: InteractionItem[], event: React.MouseEvent\) => void`}
Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
getElementAtEvent#	undefined	{`(element: InteractionItem[], event: React.MouseEvent\) => void`}
Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
getElementsAtEvent#	undefined	{`(elements: InteractionItem[], event: React.MouseEvent\) => void`}
Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.
height#	{`150`}	{`number`}
Height attribute applied to the rendered canvas.
id#	undefined	{`string`}
ID attribute applied to the rendered canvas.
options#	undefined	{`_DeepPartialObject\ & ElementChartOptions\ & PluginChartOptions\<...> & DatasetChartOptions\<...> & ScaleChartOptions\<...>>`}
The options object that is passed into the Chart.js chart.
plugins#	undefined	{`Plugin\[]`}
The plugins array that is passed into the Chart.js chart (more info)
redraw#	{`false`}	{`boolean`}
If true, will tear down and redraw chart on all updates.
width#	{`300`}	{`number`}
Width attribute applied to the rendered canvas.
wrapper#	{`true`}	{`boolean`}
Put the chart into the wrapper div element.

+able> +

diff --git a/packages/docs/content/api/CCloseButton.api.mdx b/packages/docs/content/api/CCloseButton.api.mdx index c7517889..46f59259 100644 --- a/packages/docs/content/api/CCloseButton.api.mdx +++ b/packages/docs/content/api/CCloseButton.api.mdx @@ -5,9 +5,48 @@ import { CCloseButton } from '@coreui/react' import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **dark** | Invert the default color. | `boolean` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **white** **_Deprecated 5.0.0+_** | Change the default color to white. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.
dark#	undefined	{`boolean`}
Invert the default color.
disabled#	undefined	{`boolean`}
Toggle the disabled state for the component.
white#Deprecated undefined	undefined	{`boolean`}
Change the default color to white.

diff --git a/packages/docs/content/api/CCol.api.mdx b/packages/docs/content/api/CCol.api.mdx index c0c1566d..a905bd79 100644 --- a/packages/docs/content/api/CCol.api.mdx +++ b/packages/docs/content/api/CCol.api.mdx @@ -5,12 +5,72 @@ import { CCol } from '@coreui/react' import CCol from '@coreui/react/src/components/grid/CCol' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **lg** | The number of columns/offset/order on large devices (\<1200px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - | -| **md** | The number of columns/offset/order on medium devices (\<992px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - | -| **sm** | The number of columns/offset/order on small devices (\<768px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - | -| **xl** | The number of columns/offset/order on X-Large devices (\<1400px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - | -| **xs** | The number of columns/offset/order on extra small devices (\<576px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - | -| **xxl** | The number of columns/offset/order on XX-Large devices (≥1400px). | `{ 'auto'` \| `number` \| `string` \| `boolean` \| `{ span: 'auto'` \| `number` \| `string` \| `boolean }` \| `{ offset: number` \| `string }` \| `{ order: 'first'` \| `'last'` \| `number` \| `string }}` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.
lg#	undefined	{`{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}`}
The number of columns/offset/order on large devices (\<1200px).
md#	undefined	{`{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}`}
The number of columns/offset/order on medium devices (\<992px).
sm#	undefined	{`{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}`}
The number of columns/offset/order on small devices (\<768px).
xl#	undefined	{`{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}`}
The number of columns/offset/order on X-Large devices (\<1400px).
xs#	undefined	{`{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}`}
The number of columns/offset/order on extra small devices (\<576px).
xxl#	undefined	{`{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}`}
The number of columns/offset/order on XX-Large devices (≥1400px).

diff --git a/packages/docs/content/api/CCollapse.api.mdx b/packages/docs/content/api/CCollapse.api.mdx index c2b78d28..3fe185f9 100644 --- a/packages/docs/content/api/CCollapse.api.mdx +++ b/packages/docs/content/api/CCollapse.api.mdx @@ -5,10 +5,56 @@ import { CCollapse } from '@coreui/react' import CCollapse from '@coreui/react/src/components/collapse/CCollapse' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **horizontal** | Set horizontal collapsing to transition the width instead of height. | `boolean` | - | -| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **visible** | Toggle the visibility of component. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.
horizontal#	undefined	{`boolean`}
Set horizontal collapsing to transition the width instead of height.
onHide#	undefined	{`() => void`}
Callback fired when the component requests to be hidden.
onShow#	undefined	{`() => void`}
Callback fired when the component requests to be shown.
visible#	undefined	{`boolean`}
Toggle the visibility of component.

diff --git a/packages/docs/content/api/CConditionalPortal.api.mdx b/packages/docs/content/api/CConditionalPortal.api.mdx index 9a90013e..1b24cc9d 100644 --- a/packages/docs/content/api/CConditionalPortal.api.mdx +++ b/packages/docs/content/api/CConditionalPortal.api.mdx @@ -5,7 +5,32 @@ import { CConditionalPortal } from '@coreui/react' import CConditionalPortal from '@coreui/react/src/components/conditional-portal/CConditionalPortal' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **container** **_4.11.0+_** | An HTML element or function that returns a single element, with `document.body` as the default. | `DocumentFragment` \| `Element` \| `(() => DocumentFragment` \| `Element)` | - | -| **portal** | Render some children into a different part of the DOM | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
container#4.11.0+	undefined	{`DocumentFragment`}, {`Element`}, {`(() => DocumentFragment \| Element)`}
An HTML element or function that returns a single element, with {`document.body`} as the default.
portal#	undefined	{`boolean`}
Render some children into a different part of the DOM

diff --git a/packages/docs/content/api/CContainer.api.mdx b/packages/docs/content/api/CContainer.api.mdx index db6dcb4a..23928448 100644 --- a/packages/docs/content/api/CContainer.api.mdx +++ b/packages/docs/content/api/CContainer.api.mdx @@ -5,12 +5,72 @@ import { CContainer } from '@coreui/react' import CContainer from '@coreui/react/src/components/grid/CContainer' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **fluid** | Set container 100% wide, spanning the entire width of the viewport. | `boolean` | - | -| **lg** | Set container 100% wide until large breakpoint. | `boolean` | - | -| **md** | Set container 100% wide until medium breakpoint. | `boolean` | - | -| **sm** | Set container 100% wide until small breakpoint. | `boolean` | - | -| **xl** | Set container 100% wide until X-large breakpoint. | `boolean` | - | -| **xxl** | Set container 100% wide until XX-large breakpoint. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.
fluid#	undefined	{`boolean`}
Set container 100% wide, spanning the entire width of the viewport.
lg#	undefined	{`boolean`}
Set container 100% wide until large breakpoint.
md#	undefined	{`boolean`}
Set container 100% wide until medium breakpoint.
sm#	undefined	{`boolean`}
Set container 100% wide until small breakpoint.
xl#	undefined	{`boolean`}
Set container 100% wide until X-large breakpoint.
xxl#	undefined	{`boolean`}
Set container 100% wide until XX-large breakpoint.

diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx index 80106e4d..ef5afd8f 100644 --- a/packages/docs/content/api/CDropdown.api.mdx +++ b/packages/docs/content/api/CDropdown.api.mdx @@ -5,20 +5,136 @@ import { CDropdown } from '@coreui/react' import CDropdown from '@coreui/react/src/components/dropdown/CDropdown' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **alignment** | Set aligment of dropdown menu. | `'start'` \| `'end'` \| `{ xs: 'start'` \| `'end' }` \| `{ sm: 'start'` \| `'end' }` \| `{ md: 'start'` \| `'end' }` \| `{ lg: 'start'` \| `'end' }` \| `{ xl: 'start'` \| `'end'}` \| `{ xxl: 'start'` \| `'end'}` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | div | -| **autoClose** | Configure the auto close behavior of the dropdown:
- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | `boolean` \| `'inside'` \| `'outside'` | true | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **container** **_4.11.0+_** | Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - | -| **dark** | Sets a darker color scheme to match a dark navbar. | `boolean` | - | -| **direction** | Sets a specified direction and location of the dropdown menu. | `'center'` \| `'dropup'` \| `'dropup-center'` \| `'dropend'` \| `'dropstart'` | - | -| **offset** | Offset of the dropdown menu relative to its target. | `[number, number]` | [0, 2] | -| **onHide** **_4.9.0+_** | Callback fired when the component requests to be hidden. | `() => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top-end'` \| `'top'` \| `'top-start'` \| `'bottom-end'` \| `'bottom'` \| `'bottom-start'` \| `'right-start'` \| `'right'` \| `'right-end'` \| `'left-start'` \| `'left'` \| `'left-end'` | bottom-start | -| **popper** | If you want to disable dynamic positioning set this property to `true`. | `boolean` | true | -| **portal** **_4.8.0+_** | Generates dropdown menu using createPortal. | `boolean` | false | -| **variant** | Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item. | `'btn-group'` \| `'dropdown'` \| `'input-group'` \| `'nav-item'` | btn-group | -| **visible** | Toggle the visibility of dropdown menu component. | `boolean` | false | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
alignment#	undefined	{`'start'`}, {`'end'`}, {`{ xs: 'start' \| 'end' }`}, {`{ sm: 'start' \| 'end' }`}, {`{ md: 'start' \| 'end' }`}, {`{ lg: 'start' \| 'end' }`}, {`{ xl: 'start' \| 'end'}`}, {`{ xxl: 'start' \| 'end'}`}
Set aligment of dropdown menu.
as#	{`div`}	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
autoClose#	{`true`}	{`boolean`}, {`"inside"`}, {`"outside"`}
Configure the auto close behavior of the dropdown: - {`true`} - the dropdown will be closed by clicking outside or inside the dropdown menu. - {`false`} - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key) - {`'inside'`} - the dropdown will be closed (only) by clicking inside the dropdown menu. - {`'outside'`} - the dropdown will be closed (only) by clicking outside the dropdown menu.
className#	undefined	{`string`}
A string of all className you want applied to the base component.
container#4.11.0+	undefined	{`Element`}, {`DocumentFragment`}, {`(() => Element \| DocumentFragment)`}
Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.
dark#	undefined	{`boolean`}
Sets a darker color scheme to match a dark navbar.
direction#	undefined	{`"center"`}, {`"dropup"`}, {`"dropup-center"`}, {`"dropend"`}, {`"dropstart"`}
Sets a specified direction and location of the dropdown menu.
offset#	{`[0, 2]`}	{`[number, number]`}
Offset of the dropdown menu relative to its target.
onHide#4.9.0+	undefined	{`() => void`}
Callback fired when the component requests to be hidden.
onShow#	undefined	{`() => void`}
Callback fired when the component requests to be shown.
placement#	{`bottom-start`}	{`'auto'`}, {`'top-end'`}, {`'top'`}, {`'top-start'`}, {`'bottom-end'`}, {`'bottom'`}, {`'bottom-start'`}, {`'right-start'`}, {`'right'`}, {`'right-end'`}, {`'left-start'`}, {`'left'`}, {`'left-end'`}
Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
popper#	{`true`}	{`boolean`}
If you want to disable dynamic positioning set this property to {`true`}.
portal#4.8.0+	{`false`}	{`boolean`}
Generates dropdown menu using createPortal.
variant#	{`btn-group`}	{`"btn-group"`}, {`"dropdown"`}, {`"input-group"`}, {`"nav-item"`}
Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
visible#	{`false`}	{`boolean`}
Toggle the visibility of dropdown menu component.

diff --git a/packages/docs/content/api/CDropdownDivider.api.mdx b/packages/docs/content/api/CDropdownDivider.api.mdx index 9228a01f..c364ba91 100644 --- a/packages/docs/content/api/CDropdownDivider.api.mdx +++ b/packages/docs/content/api/CDropdownDivider.api.mdx @@ -5,6 +5,24 @@ import { CDropdownDivider } from '@coreui/react' import CDropdownDivider from '@coreui/react/src/components/dropdown/CDropdownDivider' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CDropdownHeader.api.mdx b/packages/docs/content/api/CDropdownHeader.api.mdx index f8f2f909..727ce4dc 100644 --- a/packages/docs/content/api/CDropdownHeader.api.mdx +++ b/packages/docs/content/api/CDropdownHeader.api.mdx @@ -5,7 +5,32 @@ import { CDropdownHeader } from '@coreui/react' import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHeader' ``` -| 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 & 'h6')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "h6")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CDropdownItem.api.mdx b/packages/docs/content/api/CDropdownItem.api.mdx index a3aa0617..210289c3 100644 --- a/packages/docs/content/api/CDropdownItem.api.mdx +++ b/packages/docs/content/api/CDropdownItem.api.mdx @@ -5,10 +5,56 @@ import { CDropdownItem } from '@coreui/react' import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | a | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
active#	undefined	{`boolean`}
Toggle the active state for the component.
as#	{`a`}	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "cite")`}, {`(ElementType & "data")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.
disabled#	undefined	{`boolean`}
Toggle the disabled state for the component.
href#	undefined	{`string`}
The href attribute specifies the URL of the page the link goes to.

diff --git a/packages/docs/content/api/CDropdownItemPlain.api.mdx b/packages/docs/content/api/CDropdownItemPlain.api.mdx index 64737fa7..77b6a09b 100644 --- a/packages/docs/content/api/CDropdownItemPlain.api.mdx +++ b/packages/docs/content/api/CDropdownItemPlain.api.mdx @@ -5,7 +5,32 @@ import { CDropdownItemPlain } from '@coreui/react' import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownItemPlain' ``` -| 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 & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "span")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CDropdownMenu.api.mdx b/packages/docs/content/api/CDropdownMenu.api.mdx index 05b746f4..659abcb3 100644 --- a/packages/docs/content/api/CDropdownMenu.api.mdx +++ b/packages/docs/content/api/CDropdownMenu.api.mdx @@ -5,7 +5,32 @@ import { CDropdownMenu } from '@coreui/react' import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu' ``` -| 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 & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the base component.

diff --git a/packages/docs/content/api/CDropdownToggle.api.mdx b/packages/docs/content/api/CDropdownToggle.api.mdx index 7a4ecef2..c8e5832f 100644 --- a/packages/docs/content/api/CDropdownToggle.api.mdx +++ b/packages/docs/content/api/CDropdownToggle.api.mdx @@ -5,20 +5,136 @@ import { CDropdownToggle } from '@coreui/react' import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownToggle' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `ElementType` | - | -| **caret** | Enables pseudo element caret on toggler. | `boolean` | true | -| **className** | A string of all className you want applied to the base 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` | - | -| **custom** | Create a custom toggler which accepts any content. | `boolean` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | -| **navLink** **_5.0.0+_** | If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button. | `boolean` | true | -| **role** | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. | `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 or large. | `'sm'` \| `'lg'` | - | -| **split** | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. | `boolean` | - | -| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | click | -| **variant** | Set the button variant to an outlined button or a ghost button. | `'outline'` \| `'ghost'` | - | +

Property	Default	Type
active#	undefined	{`boolean`}
Toggle the active state for the component.
as#	undefined	{`ElementType`}
Component used for the root node. Either a string to use a HTML element or a component.
caret#	{`true`}	{`boolean`}
Enables pseudo element caret on toggler.
className#	undefined	{`string`}
A string of all className you want applied to the base component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
custom#	undefined	{`boolean`}
Create a custom toggler which accepts any content.
disabled#	undefined	{`boolean`}
Toggle the disabled state for the component.
href#	undefined	{`string`}
The href attribute specifies the URL of the page the link goes to.
navLink#5.0.0+	{`true`}	{`boolean`}
If a dropdown {`variant`} is set to {`nav-item`} then render the toggler as a link instead of a button.
role#	undefined	{`string`}
The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.
shape#	undefined	{`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`}
Select the shape of the component.
size#	undefined	{`"sm"`}, {`"lg"`}
Size the component small or large.
split#	undefined	{`boolean`}
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of {`.dropdown-toggle-split`} className for proper spacing around the dropdown caret.
trigger#	{`click`}	{`'hover'`}, {`'focus'`}, {`'click'`}
Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
variant#	undefined	{`"outline"`}, {`"ghost"`}
Set the button variant to an outlined button or a ghost button.

diff --git a/packages/docs/content/api/CFooter.api.mdx b/packages/docs/content/api/CFooter.api.mdx index b6d11d4b..91d28698 100644 --- a/packages/docs/content/api/CFooter.api.mdx +++ b/packages/docs/content/api/CFooter.api.mdx @@ -5,7 +5,32 @@ import { CFooter } from '@coreui/react' import CFooter from '@coreui/react/src/components/footer/CFooter' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **position** | Place footer in non-static positions. | `'fixed'` \| `'sticky'` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.
position#	undefined	{`"fixed"`}, {`"sticky"`}
Place footer in non-static positions.

diff --git a/packages/docs/content/api/CForm.api.mdx b/packages/docs/content/api/CForm.api.mdx index 9759844f..e1fca1e0 100644 --- a/packages/docs/content/api/CForm.api.mdx +++ b/packages/docs/content/api/CForm.api.mdx @@ -5,7 +5,32 @@ import { CForm } from '@coreui/react' import CForm from '@coreui/react/src/components/form/CForm' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **validated** | Mark a form as validated. If you set it `true`, all validation styles will be applied to the forms component. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
validated#	undefined	{`boolean`}
Mark a form as validated. If you set it {`true`}, all validation styles will be applied to the forms component.

diff --git a/packages/docs/content/api/CFormCheck.api.mdx b/packages/docs/content/api/CFormCheck.api.mdx index 43472818..59fcbea7 100644 --- a/packages/docs/content/api/CFormCheck.api.mdx +++ b/packages/docs/content/api/CFormCheck.api.mdx @@ -5,21 +5,144 @@ import { CFormCheck } from '@coreui/react' import CFormCheck from '@coreui/react/src/components/form/CFormCheck' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **button** | Create button-like checkboxes and radio buttons. | `ButtonObject` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **hitArea** | Sets hit area to the full area of the component. | `'full'` | - | -| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | `string` | - | -| **indeterminate** | Input Checkbox indeterminate Property. | `boolean` | - | -| **inline** | Group checkboxes or radios on the same horizontal row. | `boolean` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **label** | The element represents a caption for a component. | `ReactNode` | - | -| **reverse** | Put checkboxes or radios on the opposite side. | `boolean` | - | -| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - | -| **type** | Specifies the type of component. | `'checkbox'` \| `'radio'` | checkbox | -| **valid** | Set component validation state to valid. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
button#	undefined	{`ButtonObject`}
Create button-like checkboxes and radio buttons.
className#	undefined	{`string`}
A string of all className you want applied to the component.
feedback#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable feedback.
feedbackInvalid#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable feedback.
feedbackValid#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
floatingLabel#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
hitArea#	undefined	{`"full"`}
Sets hit area to the full area of the component.
id#	undefined	{`string`}
The id global attribute defines an identifier (ID) that must be unique in the whole document.
indeterminate#	undefined	{`boolean`}
Input Checkbox indeterminate Property.
inline#	undefined	{`boolean`}
Group checkboxes or radios on the same horizontal row.
invalid#	undefined	{`boolean`}
Set component validation state to invalid.
label#	undefined	{`ReactNode`}
The element represents a caption for a component.
reverse#	undefined	{`boolean`}
Put checkboxes or radios on the opposite side.
tooltipFeedback#4.2.0+	undefined	{`boolean`}
Display validation feedback in a styled tooltip.
type#	{`checkbox`}	{`"checkbox"`}, {`"radio"`}
Specifies the type of component.
valid#	undefined	{`boolean`}
Set component validation state to valid.

diff --git a/packages/docs/content/api/CFormControlValidation.api.mdx b/packages/docs/content/api/CFormControlValidation.api.mdx index 371e9918..be49958a 100644 --- a/packages/docs/content/api/CFormControlValidation.api.mdx +++ b/packages/docs/content/api/CFormControlValidation.api.mdx @@ -5,12 +5,72 @@ import { CFormControlValidation } from '@coreui/react' import CFormControlValidation from '@coreui/react/src/components/form/CFormControlValidation' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - | -| **valid** | Set component validation state to valid. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
feedback#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable feedback.
feedbackInvalid#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable feedback.
feedbackValid#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
floatingLabel#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
invalid#	undefined	{`boolean`}
Set component validation state to invalid.
tooltipFeedback#4.2.0+	undefined	{`boolean`}
Display validation feedback in a styled tooltip.
valid#	undefined	{`boolean`}
Set component validation state to valid.

diff --git a/packages/docs/content/api/CFormControlWrapper.api.mdx b/packages/docs/content/api/CFormControlWrapper.api.mdx index 4f412d96..49ab36b1 100644 --- a/packages/docs/content/api/CFormControlWrapper.api.mdx +++ b/packages/docs/content/api/CFormControlWrapper.api.mdx @@ -5,15 +5,96 @@ import { CFormControlWrapper } from '@coreui/react' import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlWrapper' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **floatingClassName** **_4.5.0+_** | A string of all className you want applied to the floating label wrapper. | `string` | - | -| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - | -| **text** **_4.2.0+_** | Add helper text to the component. | `ReactNode` | - | -| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - | -| **valid** | Set component validation state to valid. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
feedback#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable feedback.
feedbackInvalid#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable feedback.
feedbackValid#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
floatingClassName#4.5.0+	undefined	{`string`}
A string of all className you want applied to the floating label wrapper.
floatingLabel#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
invalid#	undefined	{`boolean`}
Set component validation state to invalid.
label#4.2.0+	undefined	{`ReactNode`}
Add a caption for a component.
text#4.2.0+	undefined	{`ReactNode`}
Add helper text to the component.
tooltipFeedback#4.2.0+	undefined	{`boolean`}
Display validation feedback in a styled tooltip.
valid#	undefined	{`boolean`}
Set component validation state to valid.

diff --git a/packages/docs/content/api/CFormFeedback.api.mdx b/packages/docs/content/api/CFormFeedback.api.mdx index f763006a..0ee22dde 100644 --- a/packages/docs/content/api/CFormFeedback.api.mdx +++ b/packages/docs/content/api/CFormFeedback.api.mdx @@ -5,10 +5,56 @@ import { CFormFeedback } from '@coreui/react' import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback' ``` -| 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 & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **invalid** | Method called immediately after the `value` prop changes. | `boolean` | - | -| **tooltip** | If your form layout allows it, you can display validation feedback in a styled tooltip. | `boolean` | - | -| **valid** | Set component validation state to valid. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.
invalid#	undefined	{`boolean`}
Method called immediately after the {`value`} prop changes.
tooltip#	undefined	{`boolean`}
If your form layout allows it, you can display validation feedback in a styled tooltip.
valid#	undefined	{`boolean`}
Set component validation state to valid.

diff --git a/packages/docs/content/api/CFormFloating.api.mdx b/packages/docs/content/api/CFormFloating.api.mdx index 5a7f7d76..0ba29670 100644 --- a/packages/docs/content/api/CFormFloating.api.mdx +++ b/packages/docs/content/api/CFormFloating.api.mdx @@ -5,6 +5,24 @@ import { CFormFloating } from '@coreui/react' import CFormFloating from '@coreui/react/src/components/form/CFormFloating' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CFormInput.api.mdx b/packages/docs/content/api/CFormInput.api.mdx index a48c769f..b69c5cfb 100644 --- a/packages/docs/content/api/CFormInput.api.mdx +++ b/packages/docs/content/api/CFormInput.api.mdx @@ -5,24 +5,168 @@ import { CFormInput } from '@coreui/react' import CFormInput from '@coreui/react/src/components/form/CFormInput' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **delay** | Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event. | `number` \| `boolean` | false | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **floatingClassName** **_4.5.0+_** | A string of all className you want applied to the floating label wrapper. | `string` | - | -| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - | -| **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler` | - | -| **plainText** | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. | `boolean` | - | -| **readOnly** | Toggle the readonly state for the component. | `boolean` | - | -| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - | -| **text** **_4.2.0+_** | Add helper text to the component. | `ReactNode` | - | -| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - | -| **type** | Specifies the type of component. | `string` | text | -| **valid** | Set component validation state to valid. | `boolean` | - | -| **value** | The `value` attribute of component. | `string` \| `number` \| `string[]` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
delay#	{`false`}	{`number`}, {`boolean`}
Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event.
disabled#	undefined	{`boolean`}
Toggle the disabled state for the component.
feedback#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable feedback.
feedbackInvalid#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable feedback.
feedbackValid#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
floatingClassName#4.5.0+	undefined	{`string`}
A string of all className you want applied to the floating label wrapper.
floatingLabel#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
invalid#	undefined	{`boolean`}
Set component validation state to invalid.
label#4.2.0+	undefined	{`ReactNode`}
Add a caption for a component.
onChange#	undefined	{`ChangeEventHandler\`}
Method called immediately after the {`value`} prop changes.
plainText#	undefined	{`boolean`}
Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side {`readonly`}.
readOnly#	undefined	{`boolean`}
Toggle the readonly state for the component.
size#	undefined	{`"sm"`}, {`"lg"`}
Size the component small or large.
text#4.2.0+	undefined	{`ReactNode`}
Add helper text to the component.
tooltipFeedback#4.2.0+	undefined	{`boolean`}
Display validation feedback in a styled tooltip.
type#	{`text`}	{`string`}
Specifies the type of component.
valid#	undefined	{`boolean`}
Set component validation state to valid.
value#	undefined	{`string`}, {`number`}, {`string[]`}
The {`value`} attribute of component.

diff --git a/packages/docs/content/api/CFormLabel.api.mdx b/packages/docs/content/api/CFormLabel.api.mdx index 8d6d5ffc..d6d7ab74 100644 --- a/packages/docs/content/api/CFormLabel.api.mdx +++ b/packages/docs/content/api/CFormLabel.api.mdx @@ -5,7 +5,32 @@ import { CFormLabel } from '@coreui/react' import CFormLabel from '@coreui/react/src/components/form/CFormLabel' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **customClassName** | A string of all className you want to be applied to the component, and override standard className value. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
customClassName#	undefined	{`string`}
A string of all className you want to be applied to the component, and override standard className value.

diff --git a/packages/docs/content/api/CFormRange.api.mdx b/packages/docs/content/api/CFormRange.api.mdx index f2b5a83f..65ea10c7 100644 --- a/packages/docs/content/api/CFormRange.api.mdx +++ b/packages/docs/content/api/CFormRange.api.mdx @@ -5,14 +5,88 @@ import { CFormRange } from '@coreui/react' import CFormRange from '@coreui/react/src/components/form/CFormRange' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - | -| **max** | Specifies the maximum value for the component. | `number` | - | -| **min** | Specifies the minimum value for the component. | `number` | - | -| **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler` | - | -| **readOnly** | Toggle the readonly state for the component. | `boolean` | - | -| **step** | Specifies the interval between legal numbers in the component. | `number` | - | -| **value** | The `value` attribute of component. | `string` \| `number` \| `string[]` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
disabled#	undefined	{`boolean`}
Toggle the disabled state for the component.
label#4.2.0+	undefined	{`ReactNode`}
Add a caption for a component.
max#	undefined	{`number`}
Specifies the maximum value for the component.
min#	undefined	{`number`}
Specifies the minimum value for the component.
onChange#	undefined	{`ChangeEventHandler\`}
Method called immediately after the {`value`} prop changes.
readOnly#	undefined	{`boolean`}
Toggle the readonly state for the component.
step#	undefined	{`number`}
Specifies the interval between legal numbers in the component.
value#	undefined	{`string`}, {`number`}, {`string[]`}
The {`value`} attribute of component.

diff --git a/packages/docs/content/api/CFormSelect.api.mdx b/packages/docs/content/api/CFormSelect.api.mdx index f507ca9f..105db26a 100644 --- a/packages/docs/content/api/CFormSelect.api.mdx +++ b/packages/docs/content/api/CFormSelect.api.mdx @@ -5,21 +5,144 @@ import { CFormSelect } from '@coreui/react' import CFormSelect from '@coreui/react/src/components/form/CFormSelect' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **floatingClassName** **_4.5.0+_** | A string of all className you want applied to the floating label wrapper. | `string` | - | -| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **htmlSize** | Specifies the number of visible options in a drop-down list. | `number` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - | -| **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler` | - | -| **options** | Options list of the select component. Available keys: `label`, `value`, `disabled`.
Examples:
- `options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`
- `options={['js', 'html']}` | `Option[]` \| `string[]` | - | -| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - | -| **text** **_4.2.0+_** | Add helper text to the component. | `ReactNode` | - | -| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - | -| **valid** | Set component validation state to valid. | `boolean` | - | -| **value** | The `value` attribute of component. | `string` \| `number` \| `string[]` | - | +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
feedback#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable feedback.
feedbackInvalid#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable feedback.
feedbackValid#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
floatingClassName#4.5.0+	undefined	{`string`}
A string of all className you want applied to the floating label wrapper.
floatingLabel#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
htmlSize#	undefined	{`number`}
Specifies the number of visible options in a drop-down list.
invalid#	undefined	{`boolean`}
Set component validation state to invalid.
label#4.2.0+	undefined	{`ReactNode`}
Add a caption for a component.
onChange#	undefined	{`ChangeEventHandler\`}
Method called immediately after the {`value`} prop changes.
options#	undefined	{`Option[]`}, {`string[]`}
Options list of the select component. Available keys: {`label`}, {`value`}, {`disabled`}. Examples: - {`options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`} - {`options={['js', 'html']}`}
size#	undefined	{`"sm"`}, {`"lg"`}
Size the component small or large.
text#4.2.0+	undefined	{`ReactNode`}
Add helper text to the component.
tooltipFeedback#4.2.0+	undefined	{`boolean`}
Display validation feedback in a styled tooltip.
valid#	undefined	{`boolean`}
Set component validation state to valid.
value#	undefined	{`string`}, {`number`}, {`string[]`}
The {`value`} attribute of component.

diff --git a/packages/docs/content/api/CFormSwitch.api.mdx b/packages/docs/content/api/CFormSwitch.api.mdx index fa8e1bf0..5c420a83 100644 --- a/packages/docs/content/api/CFormSwitch.api.mdx +++ b/packages/docs/content/api/CFormSwitch.api.mdx @@ -5,13 +5,80 @@ import { CFormSwitch } from '@coreui/react' import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | `string` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **label** | The element represents a caption for a component. | `ReactNode` | - | -| **reverse** | Put switch on the opposite side. | `boolean` | - | -| **size** | Size the component large or extra large. Works only with `switch`. | `'lg'` \| `'xl'` | - | -| **type** | Specifies the type of component. | `'checkbox'` \| `'radio'` | checkbox | -| **valid** | Set component validation state to valid. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
id#	undefined	{`string`}
The id global attribute defines an identifier (ID) that must be unique in the whole document.
invalid#	undefined	{`boolean`}
Set component validation state to invalid.
label#	undefined	{`ReactNode`}
The element represents a caption for a component.
reverse#	undefined	{`boolean`}
Put switch on the opposite side.
size#	undefined	{`"lg"`}, {`"xl"`}
Size the component large or extra large. Works only with {`switch`}.
type#	{`checkbox`}	{`"checkbox"`}, {`"radio"`}
Specifies the type of component.
valid#	undefined	{`boolean`}
Set component validation state to valid.

diff --git a/packages/docs/content/api/CFormText.api.mdx b/packages/docs/content/api/CFormText.api.mdx index 98e40c42..2f666b98 100644 --- a/packages/docs/content/api/CFormText.api.mdx +++ b/packages/docs/content/api/CFormText.api.mdx @@ -5,7 +5,32 @@ import { CFormText } from '@coreui/react' import CFormText from '@coreui/react/src/components/form/CFormText' ``` -| 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 & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CFormTextarea.api.mdx b/packages/docs/content/api/CFormTextarea.api.mdx index 552a328a..6f831f59 100644 --- a/packages/docs/content/api/CFormTextarea.api.mdx +++ b/packages/docs/content/api/CFormTextarea.api.mdx @@ -5,21 +5,144 @@ import { CFormTextarea } from '@coreui/react' import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **feedback** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackInvalid** **_4.2.0+_** | Provide valuable, actionable feedback. | `ReactNode` | - | -| **feedbackValid** **_4.2.0+_** | Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **floatingClassName** **_4.5.0+_** | A string of all className you want applied to the floating label wrapper. | `string` | - | -| **floatingLabel** **_4.2.0+_** | Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`. | `ReactNode` | - | -| **invalid** | Set component validation state to invalid. | `boolean` | - | -| **label** **_4.2.0+_** | Add a caption for a component. | `ReactNode` | - | -| **onChange** | Method called immediately after the `value` prop changes. | `ChangeEventHandler` | - | -| **plainText** | Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`. | `boolean` | - | -| **readOnly** | Toggle the readonly state for the component. | `boolean` | - | -| **text** **_4.2.0+_** | Add helper text to the component. | `ReactNode` | - | -| **tooltipFeedback** **_4.2.0+_** | Display validation feedback in a styled tooltip. | `boolean` | - | -| **valid** | Set component validation state to valid. | `boolean` | - | -| **value** | The `value` attribute of component. | `string` \| `number` \| `string[]` | - | +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
disabled#	undefined	{`boolean`}
Toggle the disabled state for the component.
feedback#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable feedback.
feedbackInvalid#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable feedback.
feedbackValid#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
floatingClassName#4.5.0+	undefined	{`string`}
A string of all className you want applied to the floating label wrapper.
floatingLabel#4.2.0+	undefined	{`ReactNode`}
Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
invalid#	undefined	{`boolean`}
Set component validation state to invalid.
label#4.2.0+	undefined	{`ReactNode`}
Add a caption for a component.
onChange#	undefined	{`ChangeEventHandler\`}
Method called immediately after the {`value`} prop changes.
plainText#	undefined	{`boolean`}
Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side {`readonly`}.
readOnly#	undefined	{`boolean`}
Toggle the readonly state for the component.
text#4.2.0+	undefined	{`ReactNode`}
Add helper text to the component.
tooltipFeedback#4.2.0+	undefined	{`boolean`}
Display validation feedback in a styled tooltip.
valid#	undefined	{`boolean`}
Set component validation state to valid.
value#	undefined	{`string`}, {`number`}, {`string[]`}
The {`value`} attribute of component.

diff --git a/packages/docs/content/api/CHeader.api.mdx b/packages/docs/content/api/CHeader.api.mdx index ae583495..692cee33 100644 --- a/packages/docs/content/api/CHeader.api.mdx +++ b/packages/docs/content/api/CHeader.api.mdx @@ -5,8 +5,40 @@ import { CHeader } from '@coreui/react' import CHeader from '@coreui/react/src/components/header/CHeader' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **container** | Defines optional container wrapping children elements. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'fluid'` | - | -| **position** | Place header in non-static positions. | `'fixed'` \| `'sticky'` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
container#	undefined	{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"fluid"`}
Defines optional container wrapping children elements.
position#	undefined	{`"fixed"`}, {`"sticky"`}
Place header in non-static positions.

diff --git a/packages/docs/content/api/CHeaderBrand.api.mdx b/packages/docs/content/api/CHeaderBrand.api.mdx index 7d81e72d..10369861 100644 --- a/packages/docs/content/api/CHeaderBrand.api.mdx +++ b/packages/docs/content/api/CHeaderBrand.api.mdx @@ -5,7 +5,32 @@ import { CHeaderBrand } from '@coreui/react' import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand' ``` -| 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 & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CHeaderDivider.api.mdx b/packages/docs/content/api/CHeaderDivider.api.mdx index b779fdf3..ba8343d3 100644 --- a/packages/docs/content/api/CHeaderDivider.api.mdx +++ b/packages/docs/content/api/CHeaderDivider.api.mdx @@ -5,6 +5,24 @@ import { CHeaderDivider } from '@coreui/react' import CHeaderDivider from '@coreui/react/src/components/header/CHeaderDivider' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CHeaderNav.api.mdx b/packages/docs/content/api/CHeaderNav.api.mdx index e839f694..c9538fbe 100644 --- a/packages/docs/content/api/CHeaderNav.api.mdx +++ b/packages/docs/content/api/CHeaderNav.api.mdx @@ -5,7 +5,32 @@ import { CHeaderNav } from '@coreui/react' import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav' ``` -| 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 & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CHeaderText.api.mdx b/packages/docs/content/api/CHeaderText.api.mdx index bcae33fa..7b2b049d 100644 --- a/packages/docs/content/api/CHeaderText.api.mdx +++ b/packages/docs/content/api/CHeaderText.api.mdx @@ -5,6 +5,24 @@ import { CHeaderText } from '@coreui/react' import CHeaderText from '@coreui/react/src/components/header/CHeaderText' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.

diff --git a/packages/docs/content/api/CHeaderToggler.api.mdx b/packages/docs/content/api/CHeaderToggler.api.mdx index 63b8d754..9ed97ec8 100644 --- a/packages/docs/content/api/CHeaderToggler.api.mdx +++ b/packages/docs/content/api/CHeaderToggler.api.mdx @@ -5,6 +5,24 @@ import { CHeaderToggler } from '@coreui/react' import CHeaderToggler from '@coreui/react/src/components/header/CHeaderToggler' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.

diff --git a/packages/docs/content/api/CIcon.api.mdx b/packages/docs/content/api/CIcon.api.mdx index 83244b3c..922cde27 100644 --- a/packages/docs/content/api/CIcon.api.mdx +++ b/packages/docs/content/api/CIcon.api.mdx @@ -1,20 +1,108 @@ ```jsx -import { CIcon } from '@coreui/icons-react' +import { CIcon } from '@coreui/..' // or -import CIcon from '@coreui/icons-react/src/CIcon' +import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **content** **_Deprecated 3.0+_** | Use `icon={...}` instead of | `string` \| `string[]` | - | -| **customClassName** | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. | `string` \| `string[]` | - | -| **height** | The height attribute defines the vertical length of an icon. | `number` | - | -| **icon** | Name of the icon placed in React object or SVG content. | `string` \| `string[]` | - | -| **name** **_Deprecated 3.0+_** | Use `icon="..."` instead of | `string` | - | -| **size** | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. | `'custom'` \| `'custom-size'` \| `'sm'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'3xl'` \| `'4xl'` \| `'5xl'` \| `'6xl'` \| `'7xl'` \| `'8xl'` \| `'9xl'` | - | -| **title** | Title tag content. | `string` | - | -| **use** | If defined component will be rendered using 'use' tag. | `string` | - | -| **viewBox** | The viewBox attribute defines the position and dimension of an SVG viewport. | `string` | - | -| **width** | The width attribute defines the horizontal length of an icon. | `number` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
content#Deprecated undefined	undefined	{`string`}, {`string[]`}
Use {`icon={...}`} instead of
customClassName#	undefined	{`string`}, {`string[]`}
Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
height#	undefined	{`number`}
The height attribute defines the vertical length of an icon.
icon#	undefined	{`string`}, {`string[]`}
Name of the icon placed in React object or SVG content.
name#Deprecated undefined	undefined	{`string`}
Use {`icon="..."`} instead of
size#	undefined	{`"custom"`}, {`"custom-size"`}, {`"sm"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"3xl"`}, {`"4xl"`}, {`"5xl"`}, {`"6xl"`}, {`"7xl"`}, {`"8xl"`}, {`"9xl"`}
Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
title#	undefined	{`string`}
Title tag content.
use#	undefined	{`string`}
If defined component will be rendered using 'use' tag.
viewBox#	undefined	{`string`}
The viewBox attribute defines the position and dimension of an SVG viewport.
width#	undefined	{`number`}
The width attribute defines the horizontal length of an icon.

diff --git a/packages/docs/content/api/CIconSvg.api.mdx b/packages/docs/content/api/CIconSvg.api.mdx index 29a8ed9f..66f86fd5 100644 --- a/packages/docs/content/api/CIconSvg.api.mdx +++ b/packages/docs/content/api/CIconSvg.api.mdx @@ -5,11 +5,66 @@ import { CIconSvg } from '@coreui/icons-react' import CIconSvg from '@coreui/icons-react/src/CIconSvg' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **customClassName** | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. | `string` \| `string[]` | - | -| **height** | The height attribute defines the vertical length of an icon. | `number` | - | -| **size** | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. | `'custom'` \| `'custom-size'` \| `'sm'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'3xl'` \| `'4xl'` \| `'5xl'` \| `'6xl'` \| `'7xl'` \| `'8xl'` \| `'9xl'` | - | -| **title** | Title tag content. | `string` | - | -| **width** | The width attribute defines the horizontal length of an icon. | `number` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
customClassName#	undefined	{`string`}, {`string[]`}
Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
height#	undefined	{`number`}
The height attribute defines the vertical length of an icon.
size#	undefined	{`"custom"`}, {`"custom-size"`}, {`"sm"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"3xl"`}, {`"4xl"`}, {`"5xl"`}, {`"6xl"`}, {`"7xl"`}, {`"8xl"`}, {`"9xl"`}
Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
title#	undefined	{`string`}
Title tag content.
width#	undefined	{`number`}
The width attribute defines the horizontal length of an icon.

+/table> +

diff --git a/packages/docs/content/api/CImage.api.mdx b/packages/docs/content/api/CImage.api.mdx index 1c5a685c..2b619e44 100644 --- a/packages/docs/content/api/CImage.api.mdx +++ b/packages/docs/content/api/CImage.api.mdx @@ -5,10 +5,56 @@ import { CImage } from '@coreui/react' import CImage from '@coreui/react/src/components/image/CImage' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **align** | Set the horizontal aligment. | `'start'` \| `'center'` \| `'end'` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **fluid** | Make image responsive. | `boolean` | - | -| **rounded** | Make image rounded. | `boolean` | - | -| **thumbnail** | Give an image a rounded 1px border appearance. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
align#	undefined	{`"start"`}, {`"center"`}, {`"end"`}
Set the horizontal aligment.
className#	undefined	{`string`}
A string of all className you want applied to the component.
fluid#	undefined	{`boolean`}
Make image responsive.
rounded#	undefined	{`boolean`}
Make image rounded.
thumbnail#	undefined	{`boolean`}
Give an image a rounded 1px border appearance.

diff --git a/packages/docs/content/api/CInputGroup.api.mdx b/packages/docs/content/api/CInputGroup.api.mdx index 25adc26c..8e11a1cb 100644 --- a/packages/docs/content/api/CInputGroup.api.mdx +++ b/packages/docs/content/api/CInputGroup.api.mdx @@ -5,7 +5,32 @@ import { CInputGroup } from '@coreui/react' import CInputGroup from '@coreui/react/src/components/form/CInputGroup' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
size#	undefined	{`"sm"`}, {`"lg"`}
Size the component small or large.

diff --git a/packages/docs/content/api/CInputGroupText.api.mdx b/packages/docs/content/api/CInputGroupText.api.mdx index b76f7fd8..7333ae46 100644 --- a/packages/docs/content/api/CInputGroupText.api.mdx +++ b/packages/docs/content/api/CInputGroupText.api.mdx @@ -5,7 +5,32 @@ import { CInputGroupText } from '@coreui/react' import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText' ``` -| 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 & 'span')` \| `(ElementType & 'form')` \| `(ElementType & 'slot')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "span")`}, {`(ElementType & "form")`}, {`(ElementType & "slot")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CLink.api.mdx b/packages/docs/content/api/CLink.api.mdx index e2993154..297687c3 100644 --- a/packages/docs/content/api/CLink.api.mdx +++ b/packages/docs/content/api/CLink.api.mdx @@ -5,10 +5,56 @@ import { CLink } from '@coreui/react' import CLink from '@coreui/react/src/components/link/CLink' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
active#	undefined	{`boolean`}
Toggle the active state for the component.
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "cite")`}, {`(ElementType & "data")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.
disabled#	undefined	{`boolean`}
Toggle the disabled state for the component.
href#	undefined	{`string`}
The href attribute specifies the URL of the page the link goes to.

diff --git a/packages/docs/content/api/CListGroup.api.mdx b/packages/docs/content/api/CListGroup.api.mdx index b2bbff7e..5ff0ad27 100644 --- a/packages/docs/content/api/CListGroup.api.mdx +++ b/packages/docs/content/api/CListGroup.api.mdx @@ -5,9 +5,48 @@ import { CListGroup } from '@coreui/react' import CListGroup from '@coreui/react/src/components/list-group/CListGroup' ``` -| 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 & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **flush** | Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., ``). | `boolean` | - | -| **layout** | Specify a layout type. | `'horizontal'` \| `'horizontal-sm'` \| `'horizontal-md'` \| `'horizontal-lg'` \| `'horizontal-xl'` \| `'horizontal-xxl'` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.
flush#	undefined	{`boolean`}
Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., {`\`}).
layout#	undefined	{`"horizontal"`}, {`"horizontal-sm"`}, {`"horizontal-md"`}, {`"horizontal-lg"`}, {`"horizontal-xl"`}, {`"horizontal-xxl"`}
Specify a layout type.

diff --git a/packages/docs/content/api/CListGroupItem.api.mdx b/packages/docs/content/api/CListGroupItem.api.mdx index b39ab4f1..ae42cde7 100644 --- a/packages/docs/content/api/CListGroupItem.api.mdx +++ b/packages/docs/content/api/CListGroupItem.api.mdx @@ -5,10 +5,56 @@ import { CListGroupItem } from '@coreui/react' import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupItem' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | li | -| **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` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
active#	undefined	{`boolean`}
Toggle the active state for the component.
as#	{`li`}	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
disabled#	undefined	{`boolean`}
Toggle the disabled state for the component.

diff --git a/packages/docs/content/api/CModal.api.mdx b/packages/docs/content/api/CModal.api.mdx index 1f5a391a..5d55be8e 100644 --- a/packages/docs/content/api/CModal.api.mdx +++ b/packages/docs/content/api/CModal.api.mdx @@ -5,21 +5,144 @@ import { CModal } from '@coreui/react' import CModal from '@coreui/react/src/components/modal/CModal' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **alignment** | Align the modal in the center or top of the screen. | `'top'` \| `'center'` | - | -| **backdrop** | Apply a backdrop on body while modal is open. | `boolean` \| `'static'` | true | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **container** **_5.3.0+_** | Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - | -| **focus** **_4.10.0+_** | Puts the focus on the modal when shown. | `boolean` | true | -| **fullscreen** | Set modal to covers the entire user viewport. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - | -| **keyboard** | Closes the modal when escape key is pressed. | `boolean` | true | -| **onClose** | Callback fired when the component requests to be closed. | `() => void` | - | -| **onClosePrevented** | Callback fired when the component requests to be closed. | `() => void` | - | -| **onShow** | Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false. | `() => void` | - | -| **portal** | Generates modal using createPortal. | `boolean` | true | -| **scrollable** | Create a scrollable modal that allows scrolling the modal body. | `boolean` | - | -| **size** | Size the component small, large, or extra large. | `'sm'` \| `'lg'` \| `'xl'` | - | -| **transition** | Remove animation to create modal that simply appear rather than fade in to view. | `boolean` | true | -| **unmountOnClose** | By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false. | `boolean` | true | -| **visible** | Toggle the visibility of modal component. | `boolean` | - | +

Property	Default	Type
alignment#	undefined	{`"top"`}, {`"center"`}
Align the modal in the center or top of the screen.
backdrop#	{`true`}	{`boolean`}, {`"static"`}
Apply a backdrop on body while modal is open.
className#	undefined	{`string`}
A string of all className you want applied to the base component.
container#5.3.0+	undefined	{`Element`}, {`DocumentFragment`}, {`(() => Element \| DocumentFragment)`}
Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.
focus#4.10.0+	{`true`}	{`boolean`}
Puts the focus on the modal when shown.
fullscreen#	undefined	{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
Set modal to covers the entire user viewport.
keyboard#	{`true`}	{`boolean`}
Closes the modal when escape key is pressed.
onClose#	undefined	{`() => void`}
Callback fired when the component requests to be closed.
onClosePrevented#	undefined	{`() => void`}
Callback fired when the component requests to be closed.
onShow#	undefined	{`() => void`}
Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.
portal#	{`true`}	{`boolean`}
Generates modal using createPortal.
scrollable#	undefined	{`boolean`}
Create a scrollable modal that allows scrolling the modal body.
size#	undefined	{`"sm"`}, {`"lg"`}, {`"xl"`}
Size the component small, large, or extra large.
transition#	{`true`}	{`boolean`}
Remove animation to create modal that simply appear rather than fade in to view.
unmountOnClose#	{`true`}	{`boolean`}
By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
visible#	undefined	{`boolean`}
Toggle the visibility of modal component.

diff --git a/packages/docs/content/api/CModalBody.api.mdx b/packages/docs/content/api/CModalBody.api.mdx index be05908c..db2858ae 100644 --- a/packages/docs/content/api/CModalBody.api.mdx +++ b/packages/docs/content/api/CModalBody.api.mdx @@ -5,6 +5,24 @@ import { CModalBody } from '@coreui/react' import CModalBody from '@coreui/react/src/components/modal/CModalBody' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.

diff --git a/packages/docs/content/api/CModalContent.api.mdx b/packages/docs/content/api/CModalContent.api.mdx index 3e4986c5..65bcb134 100644 --- a/packages/docs/content/api/CModalContent.api.mdx +++ b/packages/docs/content/api/CModalContent.api.mdx @@ -5,6 +5,24 @@ import { CModalContent } from '@coreui/react' import CModalContent from '@coreui/react/src/components/modal/CModalContent' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.

diff --git a/packages/docs/content/api/CModalDialog.api.mdx b/packages/docs/content/api/CModalDialog.api.mdx index 4697259f..aa9ee1e4 100644 --- a/packages/docs/content/api/CModalDialog.api.mdx +++ b/packages/docs/content/api/CModalDialog.api.mdx @@ -5,10 +5,56 @@ import { CModalDialog } from '@coreui/react' import CModalDialog from '@coreui/react/src/components/modal/CModalDialog' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **alignment** | Align the modal in the center or top of the screen. | `'top'` \| `'center'` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **fullscreen** | Set modal to covers the entire user viewport. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - | -| **scrollable** | Does the modal dialog itself scroll, or does the whole dialog scroll within the window. | `boolean` | - | -| **size** | Size the component small, large, or extra large. | `'sm'` \| `'lg'` \| `'xl'` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
alignment#	undefined	{`"top"`}, {`"center"`}
Align the modal in the center or top of the screen.
className#	undefined	{`string`}
A string of all className you want applied to the base component.
fullscreen#	undefined	{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
Set modal to covers the entire user viewport.
scrollable#	undefined	{`boolean`}
Does the modal dialog itself scroll, or does the whole dialog scroll within the window.
size#	undefined	{`"sm"`}, {`"lg"`}, {`"xl"`}
Size the component small, large, or extra large.

diff --git a/packages/docs/content/api/CModalFooter.api.mdx b/packages/docs/content/api/CModalFooter.api.mdx index 3f52a784..25a3d54e 100644 --- a/packages/docs/content/api/CModalFooter.api.mdx +++ b/packages/docs/content/api/CModalFooter.api.mdx @@ -5,6 +5,24 @@ import { CModalFooter } from '@coreui/react' import CModalFooter from '@coreui/react/src/components/modal/CModalFooter' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.

diff --git a/packages/docs/content/api/CModalHeader.api.mdx b/packages/docs/content/api/CModalHeader.api.mdx index 9c78e6e8..3bb8fdb8 100644 --- a/packages/docs/content/api/CModalHeader.api.mdx +++ b/packages/docs/content/api/CModalHeader.api.mdx @@ -5,7 +5,32 @@ import { CModalHeader } from '@coreui/react' import CModalHeader from '@coreui/react/src/components/modal/CModalHeader' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **closeButton** | Add a close button component to the header. | `boolean` | true | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.
closeButton#	{`true`}	{`boolean`}
Add a close button component to the header.

diff --git a/packages/docs/content/api/CModalTitle.api.mdx b/packages/docs/content/api/CModalTitle.api.mdx index c476b185..78393a10 100644 --- a/packages/docs/content/api/CModalTitle.api.mdx +++ b/packages/docs/content/api/CModalTitle.api.mdx @@ -5,7 +5,32 @@ import { CModalTitle } from '@coreui/react' import CModalTitle from '@coreui/react/src/components/modal/CModalTitle' ``` -| 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 & 'h5')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "h5")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the base component.

diff --git a/packages/docs/content/api/CNav.api.mdx b/packages/docs/content/api/CNav.api.mdx index 9bb57841..7a216738 100644 --- a/packages/docs/content/api/CNav.api.mdx +++ b/packages/docs/content/api/CNav.api.mdx @@ -5,9 +5,48 @@ import { CNav } from '@coreui/react' import CNav from '@coreui/react/src/components/nav/CNav' ``` -| 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 & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **layout** | Specify a layout type for component. | `'fill'` \| `'justified'` | - | -| **variant** | Set the nav variant to tabs or pills. | `'pills'` \| `'tabs'` \| `'underline'` \| `'underline-border'` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the base component.
layout#	undefined	{`"fill"`}, {`"justified"`}
Specify a layout type for component.
variant#	undefined	{`"pills"`}, {`"tabs"`}, {`"underline"`}, {`"underline-border"`}
Set the nav variant to tabs or pills.

diff --git a/packages/docs/content/api/CNavGroup.api.mdx b/packages/docs/content/api/CNavGroup.api.mdx index 31413677..83b3d884 100644 --- a/packages/docs/content/api/CNavGroup.api.mdx +++ b/packages/docs/content/api/CNavGroup.api.mdx @@ -5,10 +5,56 @@ import { CNavGroup } from '@coreui/react' import CNavGroup from '@coreui/react/src/components/nav/CNavGroup' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **compact** | Make nav group more compact by cutting all `padding` in half. | `boolean` | - | -| **toggler** | Set group toggler label. | `ReactNode` | - | -| **visible** | Show nav group items. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#5.0.0+	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.
compact#	undefined	{`boolean`}
Make nav group more compact by cutting all {`padding`} in half.
toggler#	undefined	{`ReactNode`}
Set group toggler label.
visible#	undefined	{`boolean`}
Show nav group items.

diff --git a/packages/docs/content/api/CNavGroupItems.api.mdx b/packages/docs/content/api/CNavGroupItems.api.mdx index 467622bc..3b911547 100644 --- a/packages/docs/content/api/CNavGroupItems.api.mdx +++ b/packages/docs/content/api/CNavGroupItems.api.mdx @@ -5,7 +5,32 @@ import { CNavGroupItems } from '@coreui/react' import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#5.0.0+	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CNavItem.api.mdx b/packages/docs/content/api/CNavItem.api.mdx index 426df0b1..5d629503 100644 --- a/packages/docs/content/api/CNavItem.api.mdx +++ b/packages/docs/content/api/CNavItem.api.mdx @@ -5,10 +5,56 @@ import { CNavItem } from '@coreui/react' import CNavItem from '@coreui/react/src/components/nav/CNavItem' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
active#	undefined	{`boolean`}
Toggle the active state for the component.
as#5.0.0+	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "cite")`}, {`(ElementType & "data")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.
disabled#	undefined	{`boolean`}
Toggle the disabled state for the component.
href#	undefined	{`string`}
The href attribute specifies the URL of the page the link goes to.

diff --git a/packages/docs/content/api/CNavLink.api.mdx b/packages/docs/content/api/CNavLink.api.mdx index 6d4c07e2..f3154093 100644 --- a/packages/docs/content/api/CNavLink.api.mdx +++ b/packages/docs/content/api/CNavLink.api.mdx @@ -5,10 +5,56 @@ import { CNavLink } from '@coreui/react' import CNavLink from '@coreui/react/src/components/nav/CNavLink' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'cite')` \| `(ElementType & 'data')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
active#	undefined	{`boolean`}
Toggle the active state for the component.
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "cite")`}, {`(ElementType & "data")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.
disabled#	undefined	{`boolean`}
Toggle the disabled state for the component.
href#	undefined	{`string`}
The href attribute specifies the URL of the page the link goes to.

diff --git a/packages/docs/content/api/CNavTitle.api.mdx b/packages/docs/content/api/CNavTitle.api.mdx index 74c2c7b6..83abb795 100644 --- a/packages/docs/content/api/CNavTitle.api.mdx +++ b/packages/docs/content/api/CNavTitle.api.mdx @@ -5,7 +5,32 @@ import { CNavTitle } from '@coreui/react' import CNavTitle from '@coreui/react/src/components/nav/CNavTitle' ``` -| 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 & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CNavbar.api.mdx b/packages/docs/content/api/CNavbar.api.mdx index 67a11a51..730f1c1e 100644 --- a/packages/docs/content/api/CNavbar.api.mdx +++ b/packages/docs/content/api/CNavbar.api.mdx @@ -5,12 +5,72 @@ import { CNavbar } from '@coreui/react' import CNavbar from '@coreui/react/src/components/navbar/CNavbar' ``` -| 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 & 'nav')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **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` | - | -| **colorScheme** | Sets if the color of text should be colored for a light or dark background. | `'dark'` \| `'light'` | - | -| **container** | Defines optional container wrapping children elements. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'fluid'` | - | -| **expand** | Defines the responsive breakpoint to determine when content collapses. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - | -| **placement** | Place component in non-static positions. | `'fixed-top'` \| `'fixed-bottom'` \| `'sticky-top'` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "nav")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
colorScheme#	undefined	{`"dark"`}, {`"light"`}
Sets if the color of text should be colored for a light or dark background.
container#	undefined	{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"fluid"`}
Defines optional container wrapping children elements.
expand#	undefined	{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
Defines the responsive breakpoint to determine when content collapses.
placement#	undefined	{`"fixed-top"`}, {`"fixed-bottom"`}, {`"sticky-top"`}
Place component in non-static positions.

diff --git a/packages/docs/content/api/CNavbarBrand.api.mdx b/packages/docs/content/api/CNavbarBrand.api.mdx index ba23022d..03d98309 100644 --- a/packages/docs/content/api/CNavbarBrand.api.mdx +++ b/packages/docs/content/api/CNavbarBrand.api.mdx @@ -5,8 +5,40 @@ import { CNavbarBrand } from '@coreui/react' import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand' ``` -| 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 & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.
href#	undefined	{`string`}
The href attribute specifies the URL of the page the link goes to.

diff --git a/packages/docs/content/api/CNavbarNav.api.mdx b/packages/docs/content/api/CNavbarNav.api.mdx index 0d7f3c28..2c46edf3 100644 --- a/packages/docs/content/api/CNavbarNav.api.mdx +++ b/packages/docs/content/api/CNavbarNav.api.mdx @@ -5,7 +5,32 @@ import { CNavbarNav } from '@coreui/react' import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav' ``` -| 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 & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CNavbarText.api.mdx b/packages/docs/content/api/CNavbarText.api.mdx index 115a93b5..a7c58443 100644 --- a/packages/docs/content/api/CNavbarText.api.mdx +++ b/packages/docs/content/api/CNavbarText.api.mdx @@ -5,6 +5,24 @@ import { CNavbarText } from '@coreui/react' import CNavbarText from '@coreui/react/src/components/navbar/CNavbarText' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.

diff --git a/packages/docs/content/api/CNavbarToggler.api.mdx b/packages/docs/content/api/CNavbarToggler.api.mdx index 23763e4e..ce474a31 100644 --- a/packages/docs/content/api/CNavbarToggler.api.mdx +++ b/packages/docs/content/api/CNavbarToggler.api.mdx @@ -5,6 +5,24 @@ import { CNavbarToggler } from '@coreui/react' import CNavbarToggler from '@coreui/react/src/components/navbar/CNavbarToggler' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.

diff --git a/packages/docs/content/api/COffcanvas.api.mdx b/packages/docs/content/api/COffcanvas.api.mdx index 5fc4c054..744d2595 100644 --- a/packages/docs/content/api/COffcanvas.api.mdx +++ b/packages/docs/content/api/COffcanvas.api.mdx @@ -5,16 +5,104 @@ import { COffcanvas } from '@coreui/react' import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **backdrop** | Apply a backdrop on body while offcanvas is open. | `boolean` \| `'static'` | true | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **dark** | Sets a darker color scheme. | `boolean` | - | -| **keyboard** | Closes the offcanvas when escape key is pressed. | `boolean` | true | -| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **placement** | Components placement, there’s no default placement. | `'start'` \| `'end'` \| `'top'` \| `'bottom'` | - | -| **portal** | Generates modal using createPortal. | `boolean` | false | -| **responsive** **_4.6.0+_** | Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | true | -| **scroll** | Allow body scrolling while offcanvas is open | `boolean` | false | -| **visible** | Toggle the visibility of offcanvas component. | `boolean` | false | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
backdrop#	{`true`}	{`boolean`}, {`"static"`}
Apply a backdrop on body while offcanvas is open.
className#	undefined	{`string`}
A string of all className you want applied to the base component.
dark#	undefined	{`boolean`}
Sets a darker color scheme.
keyboard#	{`true`}	{`boolean`}
Closes the offcanvas when escape key is pressed.
onHide#	undefined	{`() => void`}
Callback fired when the component requests to be hidden.
onShow#	undefined	{`() => void`}
Callback fired when the component requests to be shown.
placement#	undefined	{`"start"`}, {`"end"`}, {`"top"`}, {`"bottom"`}
Components placement, there’s no default placement.
portal#	{`false`}	{`boolean`}
Generates modal using createPortal.
responsive#4.6.0+	{`true`}	{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
scroll#	{`false`}	{`boolean`}
Allow body scrolling while offcanvas is open
visible#	{`false`}	{`boolean`}
Toggle the visibility of offcanvas component.

diff --git a/packages/docs/content/api/COffcanvasBody.api.mdx b/packages/docs/content/api/COffcanvasBody.api.mdx index 07838824..63a205df 100644 --- a/packages/docs/content/api/COffcanvasBody.api.mdx +++ b/packages/docs/content/api/COffcanvasBody.api.mdx @@ -5,6 +5,24 @@ import { COffcanvasBody } from '@coreui/react' import COffcanvasBody from '@coreui/react/src/components/offcanvas/COffcanvasBody' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.

diff --git a/packages/docs/content/api/COffcanvasHeader.api.mdx b/packages/docs/content/api/COffcanvasHeader.api.mdx index 6edbcc05..5ca4bdd5 100644 --- a/packages/docs/content/api/COffcanvasHeader.api.mdx +++ b/packages/docs/content/api/COffcanvasHeader.api.mdx @@ -5,6 +5,24 @@ import { COffcanvasHeader } from '@coreui/react' import COffcanvasHeader from '@coreui/react/src/components/offcanvas/COffcanvasHeader' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.

diff --git a/packages/docs/content/api/COffcanvasTitle.api.mdx b/packages/docs/content/api/COffcanvasTitle.api.mdx index ed737933..5ff8759d 100644 --- a/packages/docs/content/api/COffcanvasTitle.api.mdx +++ b/packages/docs/content/api/COffcanvasTitle.api.mdx @@ -5,7 +5,32 @@ import { COffcanvasTitle } from '@coreui/react' import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTitle' ``` -| 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 & 'h5')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "h5")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CPagination.api.mdx b/packages/docs/content/api/CPagination.api.mdx index 39f9ea2d..d1870dac 100644 --- a/packages/docs/content/api/CPagination.api.mdx +++ b/packages/docs/content/api/CPagination.api.mdx @@ -5,8 +5,40 @@ import { CPagination } from '@coreui/react' import CPagination from '@coreui/react/src/components/pagination/CPagination' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **align** | Set the alignment of pagination components. | `'start'` \| `'center'` \| `'end'` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **size** | Size the component small or large. | `'sm'` \| `'lg'` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
align#	undefined	{`"start"`}, {`"center"`}, {`"end"`}
Set the alignment of pagination components.
className#	undefined	{`string`}
A string of all className you want applied to the base component.
size#	undefined	{`"sm"`}, {`"lg"`}
Size the component small or large.

diff --git a/packages/docs/content/api/CPaginationItem.api.mdx b/packages/docs/content/api/CPaginationItem.api.mdx index d63d72e4..b8573635 100644 --- a/packages/docs/content/api/CPaginationItem.api.mdx +++ b/packages/docs/content/api/CPaginationItem.api.mdx @@ -5,8 +5,40 @@ import { CPaginationItem } from '@coreui/react' import CPaginationItem from '@coreui/react/src/components/pagination/CPaginationItem' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & string)` \| `(ElementType & ComponentClass)` \| `(ElementType & FunctionComponent)` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
active#	undefined	{`boolean`}
Toggle the active state for the component.
as#	undefined	{`(ElementType & string)`}, {`(ElementType & ComponentClass\)`}, {`(ElementType & FunctionComponent\)`}
Component used for the root node. Either a string to use a HTML element or a component.
disabled#	undefined	{`boolean`}
Toggle the disabled state for the component.

diff --git a/packages/docs/content/api/CPlaceholder.api.mdx b/packages/docs/content/api/CPlaceholder.api.mdx index d7907a96..7247c5cc 100644 --- a/packages/docs/content/api/CPlaceholder.api.mdx +++ b/packages/docs/content/api/CPlaceholder.api.mdx @@ -5,16 +5,104 @@ import { CPlaceholder } from '@coreui/react' import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **animation** | Set animation type to better convey the perception of something being actively loaded. | `'glow'` \| `'wave'` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **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` | - | -| **lg** | The number of columns on large devices (\<1200px). | `number` | - | -| **md** | The number of columns on medium devices (\<992px). | `number` | - | -| **size** | Size the component extra small, small, or large. | `'xs'` \| `'sm'` \| `'lg'` | - | -| **sm** | The number of columns on small devices (\<768px). | `number` | - | -| **xl** | The number of columns on X-Large devices (\<1400px). | `number` | - | -| **xs** | The number of columns on extra small devices (\<576px). | `number` | - | -| **xxl** | The number of columns on XX-Large devices (≥1400px). | `number` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
animation#	undefined	{`"glow"`}, {`"wave"`}
Set animation type to better convey the perception of something being actively loaded.
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "span")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
lg#	undefined	{`number`}
The number of columns on large devices (\<1200px).
md#	undefined	{`number`}
The number of columns on medium devices (\<992px).
size#	undefined	{`"xs"`}, {`"sm"`}, {`"lg"`}
Size the component extra small, small, or large.
sm#	undefined	{`number`}
The number of columns on small devices (\<768px).
xl#	undefined	{`number`}
The number of columns on X-Large devices (\<1400px).
xs#	undefined	{`number`}
The number of columns on extra small devices (\<576px).
xxl#	undefined	{`number`}
The number of columns on XX-Large devices (≥1400px).

diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx index c850d297..784e2a0d 100644 --- a/packages/docs/content/api/CPopover.api.mdx +++ b/packages/docs/content/api/CPopover.api.mdx @@ -5,18 +5,120 @@ import { CPopover } from '@coreui/react' import CPopover from '@coreui/react/src/components/popover/CPopover' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **animation** **_4.9.0+_** | Apply a CSS fade transition to the popover. | `boolean` | true | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **container** **_4.11.0+_** | Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - | -| **content** | Content node for your component. | `ReactNode` | - | -| **delay** **_4.9.0+_** | The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`. | `number` \| `{ show: number; hide: number; }` | 0 | -| **fallbackPlacements** **_4.9.0+_** | Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference. | `Placements` \| `Placements[]` | ['top', 'right', 'bottom', 'left'] | -| **offset** | Offset of the popover relative to its target. | `[number, number]` | [0, 8] | -| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **placement** | Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property. | `'auto'` \| `'top'` \| `'bottom'` \| `'right'` \| `'left'` | top | -| **title** | Title node for your component. | `ReactNode` | - | -| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | click | -| **visible** | Toggle the visibility of popover component. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
animation#4.9.0+	{`true`}	{`boolean`}
Apply a CSS fade transition to the popover.
className#	undefined	{`string`}
A string of all className you want applied to the component.
container#4.11.0+	undefined	{`Element`}, {`DocumentFragment`}, {`(() => Element \| DocumentFragment)`}
Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.
content#	undefined	{`ReactNode`}
Content node for your component.
delay#4.9.0+	{`0`}	{`number`}, {`{ show: number; hide: number; }`}
The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: {`{ 'show': 500, 'hide': 100 }`}.
fallbackPlacements#4.9.0+	{`['top', 'right', 'bottom', 'left']`}	{`Placements`}, {`Placements[]`}
Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
offset#	{`[0, 8]`}	{`[number, number]`}
Offset of the popover relative to its target.
onHide#	undefined	{`() => void`}
Callback fired when the component requests to be hidden.
onShow#	undefined	{`() => void`}
Callback fired when the component requests to be shown.
placement#	{`top`}	{`"auto"`}, {`"top"`}, {`"bottom"`}, {`"right"`}, {`"left"`}
Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
title#	undefined	{`ReactNode`}
Title node for your component.
trigger#	{`click`}	{`'hover'`}, {`'focus'`}, {`'click'`}
Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
visible#	undefined	{`boolean`}
Toggle the visibility of popover component.

diff --git a/packages/docs/content/api/CProgress.api.mdx b/packages/docs/content/api/CProgress.api.mdx index e7d61f16..efd6a125 100644 --- a/packages/docs/content/api/CProgress.api.mdx +++ b/packages/docs/content/api/CProgress.api.mdx @@ -5,14 +5,88 @@ import { CProgress } from '@coreui/react' import CProgress from '@coreui/react/src/components/progress/CProgress' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **animated** | Use to animate the stripes right to left via CSS3 animations. | `boolean` | - | -| **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` | - | -| **height** | Sets the height of the component. If you set that value the inner `` will automatically resize accordingly. | `number` | - | -| **progressBarClassName** **_4.9.0+_** | A string of all className you want applied to the `` component. | `string` | - | -| **thin** | Makes progress bar thinner. | `boolean` | - | -| **value** | The percent to progress the ProgressBar (out of 100). | `number` | - | -| **variant** | Set the progress bar variant to optional striped. | `'striped'` | - | -| **white** | Change the default color to white. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
animated#	undefined	{`boolean`}
Use to animate the stripes right to left via CSS3 animations.
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
height#	undefined	{`number`}
Sets the height of the component. If you set that value the inner {`\`} will automatically resize accordingly.
progressBarClassName#4.9.0+	undefined	{`string`}
A string of all className you want applied to the \ component.
thin#	undefined	{`boolean`}
Makes progress bar thinner.
value#	undefined	{`number`}
The percent to progress the ProgressBar (out of 100).
variant#	undefined	{`"striped"`}
Set the progress bar variant to optional striped.
white#	undefined	{`boolean`}
Change the default color to white.

diff --git a/packages/docs/content/api/CProgressBar.api.mdx b/packages/docs/content/api/CProgressBar.api.mdx index 844d98e8..1e21b9c7 100644 --- a/packages/docs/content/api/CProgressBar.api.mdx +++ b/packages/docs/content/api/CProgressBar.api.mdx @@ -5,10 +5,56 @@ import { CProgressBar } from '@coreui/react' import CProgressBar from '@coreui/react/src/components/progress/CProgressBar' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **animated** | Use to animate the stripes right to left via CSS3 animations. | `boolean` | - | -| **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` | - | -| **value** | The percent to progress the ProgressBar. | `number` | 0 | -| **variant** | Set the progress bar variant to optional striped. | `'striped'` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
animated#	undefined	{`boolean`}
Use to animate the stripes right to left via CSS3 animations.
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
value#	{`0`}	{`number`}
The percent to progress the ProgressBar.
variant#	undefined	{`"striped"`}
Set the progress bar variant to optional striped.

diff --git a/packages/docs/content/api/CProgressStacked.api.mdx b/packages/docs/content/api/CProgressStacked.api.mdx index 109af3cf..19f2beef 100644 --- a/packages/docs/content/api/CProgressStacked.api.mdx +++ b/packages/docs/content/api/CProgressStacked.api.mdx @@ -5,6 +5,24 @@ import { CProgressStacked } from '@coreui/react' import CProgressStacked from '@coreui/react/src/components/progress/CProgressStacked' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CRow.api.mdx b/packages/docs/content/api/CRow.api.mdx index e0103350..f2e0f907 100644 --- a/packages/docs/content/api/CRow.api.mdx +++ b/packages/docs/content/api/CRow.api.mdx @@ -5,12 +5,72 @@ import { CRow } from '@coreui/react' import CRow from '@coreui/react/src/components/grid/CRow' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **lg** | The number of columns/offset/order on large devices (\<1200px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - | -| **md** | The number of columns/offset/order on medium devices (\<992px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - | -| **sm** | The number of columns/offset/order on small devices (\<768px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - | -| **xl** | The number of columns/offset/order on X-Large devices (\<1400px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - | -| **xs** | The number of columns/offset/order on extra small devices (\<576px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - | -| **xxl** | The number of columns/offset/order on XX-Large devices (≥1400px). | `{{ cols: 'auto'` \| `number` \| `string }` \| `{ gutter: number` \| `string }` \| `{ gutterX: number` \| `string }` \| `{ gutterY: number` \| `string }}` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.
lg#	undefined	{`{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}`}
The number of columns/offset/order on large devices (\<1200px).
md#	undefined	{`{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}`}
The number of columns/offset/order on medium devices (\<992px).
sm#	undefined	{`{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}`}
The number of columns/offset/order on small devices (\<768px).
xl#	undefined	{`{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}`}
The number of columns/offset/order on X-Large devices (\<1400px).
xs#	undefined	{`{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}`}
The number of columns/offset/order on extra small devices (\<576px).
xxl#	undefined	{`{{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }}`}
The number of columns/offset/order on XX-Large devices (≥1400px).

diff --git a/packages/docs/content/api/CSidebar.api.mdx b/packages/docs/content/api/CSidebar.api.mdx index 8cd6ab08..e251864c 100644 --- a/packages/docs/content/api/CSidebar.api.mdx +++ b/packages/docs/content/api/CSidebar.api.mdx @@ -5,17 +5,112 @@ import { CSidebar } from '@coreui/react' import CSidebar from '@coreui/react/src/components/sidebar/CSidebar' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | -| **colorScheme** | Sets if the color of text should be colored for a light or dark dark background. | `'dark'` \| `'light'` | - | -| **narrow** | Make sidebar narrow. | `boolean` | - | -| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **onVisibleChange** | Event emitted after visibility of component changed. | `(visible: boolean) => void` | - | -| **overlaid** | Set sidebar to overlaid variant. | `boolean` | - | -| **placement** | Components placement, there’s no default placement. | `'start'` \| `'end'` | - | -| **position** | Place sidebar in non-static positions. | `'fixed'` \| `'sticky'` | - | -| **size** | Size the component small, large, or extra large. | `'sm'` \| `'lg'` \| `'xl'` | - | -| **unfoldable** | Expand narrowed sidebar on hover. | `boolean` | - | -| **visible** | Toggle the visibility of sidebar component. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
colorScheme#	undefined	{`'dark'`}, {`'light'`}
Sets if the color of text should be colored for a light or dark dark background.
narrow#	undefined	{`boolean`}
Make sidebar narrow.
onHide#	undefined	{`() => void`}
Callback fired when the component requests to be hidden.
onShow#	undefined	{`() => void`}
Callback fired when the component requests to be shown.
onVisibleChange#	undefined	{`(visible: boolean) => void`}
Event emitted after visibility of component changed.
overlaid#	undefined	{`boolean`}
Set sidebar to overlaid variant.
placement#	undefined	{`'start'`}, {`'end'`}
Components placement, there’s no default placement.
position#	undefined	{`"fixed"`}, {`"sticky"`}
Place sidebar in non-static positions.
size#	undefined	{`"sm"`}, {`"lg"`}, {`"xl"`}
Size the component small, large, or extra large.
unfoldable#	undefined	{`boolean`}
Expand narrowed sidebar on hover.
visible#	undefined	{`boolean`}
Toggle the visibility of sidebar component.

diff --git a/packages/docs/content/api/CSidebarBrand.api.mdx b/packages/docs/content/api/CSidebarBrand.api.mdx index bd665b8c..fc56e0d0 100644 --- a/packages/docs/content/api/CSidebarBrand.api.mdx +++ b/packages/docs/content/api/CSidebarBrand.api.mdx @@ -5,7 +5,32 @@ import { CSidebarBrand } from '@coreui/react' import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'a')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#5.0.0+	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CSidebarFooter.api.mdx b/packages/docs/content/api/CSidebarFooter.api.mdx index ec781c61..ac4cc6b1 100644 --- a/packages/docs/content/api/CSidebarFooter.api.mdx +++ b/packages/docs/content/api/CSidebarFooter.api.mdx @@ -5,6 +5,24 @@ import { CSidebarFooter } from '@coreui/react' import CSidebarFooter from '@coreui/react/src/components/sidebar/CSidebarFooter' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CSidebarHeader.api.mdx b/packages/docs/content/api/CSidebarHeader.api.mdx index a854177d..fae56074 100644 --- a/packages/docs/content/api/CSidebarHeader.api.mdx +++ b/packages/docs/content/api/CSidebarHeader.api.mdx @@ -5,6 +5,24 @@ import { CSidebarHeader } from '@coreui/react' import CSidebarHeader from '@coreui/react/src/components/sidebar/CSidebarHeader' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CSidebarNav.api.mdx b/packages/docs/content/api/CSidebarNav.api.mdx index 52cc8df7..099b5949 100644 --- a/packages/docs/content/api/CSidebarNav.api.mdx +++ b/packages/docs/content/api/CSidebarNav.api.mdx @@ -5,7 +5,32 @@ import { CSidebarNav } from '@coreui/react' import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **as** **_5.0.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'ul')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#5.0.0+	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CSidebarToggler.api.mdx b/packages/docs/content/api/CSidebarToggler.api.mdx index 0ff604df..f35f392e 100644 --- a/packages/docs/content/api/CSidebarToggler.api.mdx +++ b/packages/docs/content/api/CSidebarToggler.api.mdx @@ -5,6 +5,24 @@ import { CSidebarToggler } from '@coreui/react' import CSidebarToggler from '@coreui/react/src/components/sidebar/CSidebarToggler' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.

diff --git a/packages/docs/content/api/CSpinner.api.mdx b/packages/docs/content/api/CSpinner.api.mdx index 4ff6306f..48fc06f8 100644 --- a/packages/docs/content/api/CSpinner.api.mdx +++ b/packages/docs/content/api/CSpinner.api.mdx @@ -5,11 +5,64 @@ import { CSpinner } from '@coreui/react' import CSpinner from '@coreui/react/src/components/spinner/CSpinner' ``` -| 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 & 'div')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - | -| **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` | - | -| **size** | Size the component small. | `'sm'` | - | -| **variant** | Set the button variant to an outlined button or a ghost button. | `'border'` \| `'grow'` | border | -| **visuallyHiddenLabel** | Set visually hidden label for accessibility purposes. | `string` | Loading... | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
as#	undefined	{`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
Component used for the root node. Either a string to use a HTML element or a component.
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
size#	undefined	{`"sm"`}
Size the component small.
variant#	{`border`}	{`"border"`}, {`"grow"`}
Set the button variant to an outlined button or a ghost button.
visuallyHiddenLabel#	{`Loading...`}	{`string`}
Set visually hidden label for accessibility purposes.

diff --git a/packages/docs/content/api/CTab.api.mdx b/packages/docs/content/api/CTab.api.mdx index 9a9835e5..6ead7a6c 100644 --- a/packages/docs/content/api/CTab.api.mdx +++ b/packages/docs/content/api/CTab.api.mdx @@ -5,8 +5,40 @@ import { CTab } from '@coreui/react' import CTab from '@coreui/react/src/components/tabs/CTab' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **itemKey** | Item key. | `string` \| `number` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.
disabled#	undefined	{`boolean`}
Toggle the disabled state for the component.
itemKey#	undefined	{`string`}, {`number`}
Item key.

diff --git a/packages/docs/content/api/CTabContent.api.mdx b/packages/docs/content/api/CTabContent.api.mdx index 49ebd3b6..76755621 100644 --- a/packages/docs/content/api/CTabContent.api.mdx +++ b/packages/docs/content/api/CTabContent.api.mdx @@ -5,6 +5,24 @@ import { CTabContent } from '@coreui/react' import CTabContent from '@coreui/react/src/components/tabs/CTabContent' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.

diff --git a/packages/docs/content/api/CTabList.api.mdx b/packages/docs/content/api/CTabList.api.mdx index 0625b962..59fe0074 100644 --- a/packages/docs/content/api/CTabList.api.mdx +++ b/packages/docs/content/api/CTabList.api.mdx @@ -5,8 +5,40 @@ import { CTabList } from '@coreui/react' import CTabList from '@coreui/react/src/components/tabs/CTabList' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **layout** | Specify a layout type for component. | `'fill'` \| `'justified'` | - | -| **variant** | Set the nav variant to tabs or pills. | `'pills'` \| `'tabs'` \| `'underline'` \| `'underline-border'` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.
layout#	undefined	{`"fill"`}, {`"justified"`}
Specify a layout type for component.
variant#	undefined	{`"pills"`}, {`"tabs"`}, {`"underline"`}, {`"underline-border"`}
Set the nav variant to tabs or pills.

diff --git a/packages/docs/content/api/CTabPane.api.mdx b/packages/docs/content/api/CTabPane.api.mdx index e37cc210..96326f15 100644 --- a/packages/docs/content/api/CTabPane.api.mdx +++ b/packages/docs/content/api/CTabPane.api.mdx @@ -5,10 +5,56 @@ import { CTabPane } from '@coreui/react' import CTabPane from '@coreui/react/src/components/tabs/CTabPane' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **transition** **_5.1.0+_** | Enable fade in and fade out transition. | `boolean` | true | -| **visible** | Toggle the visibility of component. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.
onHide#	undefined	{`() => void`}
Callback fired when the component requests to be hidden.
onShow#	undefined	{`() => void`}
Callback fired when the component requests to be shown.
transition#5.1.0+	{`true`}	{`boolean`}
Enable fade in and fade out transition.
visible#	undefined	{`boolean`}
Toggle the visibility of component.

diff --git a/packages/docs/content/api/CTabPanel.api.mdx b/packages/docs/content/api/CTabPanel.api.mdx index 02745245..db4df643 100644 --- a/packages/docs/content/api/CTabPanel.api.mdx +++ b/packages/docs/content/api/CTabPanel.api.mdx @@ -5,11 +5,64 @@ import { CTabPanel } from '@coreui/react' import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **itemKey** | Item key. | `string` \| `number` | - | -| **onHide** | Callback fired when the component requests to be hidden. | `() => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `() => void` | - | -| **transition** | Enable fade in and fade out transition. | `boolean` | true | -| **visible** | Toggle the visibility of component. | `boolean` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.
itemKey#	undefined	{`string`}, {`number`}
Item key.
onHide#	undefined	{`() => void`}
Callback fired when the component requests to be hidden.
onShow#	undefined	{`() => void`}
Callback fired when the component requests to be shown.
transition#	{`true`}	{`boolean`}
Enable fade in and fade out transition.
visible#	undefined	{`boolean`}
Toggle the visibility of component.

diff --git a/packages/docs/content/api/CTable.api.mdx b/packages/docs/content/api/CTable.api.mdx index 3bb76f86..b1f101b4 100644 --- a/packages/docs/content/api/CTable.api.mdx +++ b/packages/docs/content/api/CTable.api.mdx @@ -5,23 +5,160 @@ import { CTable } from '@coreui/react' import CTable from '@coreui/react/src/components/table/CTable' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **align** | Set the vertical aligment. | `string` | - | -| **borderColor** | Sets the border color of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - | -| **bordered** | Add borders on all sides of the table and cells. | `boolean` | - | -| **borderless** | Remove borders on all sides of the table and cells. | `boolean` | - | -| **caption** | Put the caption on the top if you set `caption="top"` of the table or set the text of the table caption. | `string` | - | -| **captionTop** **_4.3.0+_** | Set the text of the table caption and the caption on the top of the table. | `string` | - | -| **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` | - | -| **columns** **_4.3.0+_** | Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')

In columns prop each array item represents one column. Item might be specified in two ways:
String: each item define column name equal to item value.
Object: item is object with following keys available as column configuration:
- key (required)(String) - define column name equal to item key.
- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
- _props (Object) - adds classes to all cels in column, ex. `_props: { scope: 'col', className: 'custom-class' }`,
- _style (Object) - adds styles to the column header (useful for defining widths) | `(string` \| `Column)[]` | - | -| **footer** **_4.3.0+_** | Array of objects or strings, where each element represents one cell in the table footer.

Example items:
`['FooterCell', 'FooterCell', 'FooterCell']`
or
`[{ label: 'FooterCell', _props: { color: 'success' }, ...]` | `(string` \| `FooterItem)[]` | - | -| **hover** | Enable a hover state on table rows within a ``. | `boolean` | - | -| **items** **_4.3.0+_** | Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.

Example item:
`{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}` | `Item[]` | - | -| **responsive** | Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - | -| **small** | Make table more compact by cutting all cell `padding` in half. | `boolean` | - | -| **striped** | Add zebra-striping to any table row within the ``. | `boolean` | - | -| **stripedColumns** **_4.3.0+_** | Add zebra-striping to any table column. | `boolean` | - | -| **tableFootProps** **_4.3.0+_** | Properties that will be passed to the table footer component. | `CTableFootProps` | - | -| **tableHeadProps** **_4.3.0+_** | Properties that will be passed to the table head component. | `CTableHeadProps` | - | +

Property	Default	Type
align#	undefined	{`string`}
Set the vertical aligment.
borderColor#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the border color of the component to one of CoreUI’s themed colors.
bordered#	undefined	{`boolean`}
Add borders on all sides of the table and cells.
borderless#	undefined	{`boolean`}
Remove borders on all sides of the table and cells.
caption#	undefined	{`string`}
Put the caption on the top if you set {`caption="top"`} of the table or set the text of the table caption.
captionTop#4.3.0+	undefined	{`string`}
Set the text of the table caption and the caption on the top of the table.
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
columns#4.3.0+	undefined	{`(string \| Column)[]`}
Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props') In columns prop each array item represents one column. Item might be specified in two ways: String: each item define column name equal to item value. Object: item is object with following keys available as column configuration: - key (required)(String) - define column name equal to item key. - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word. - _props (Object) - adds classes to all cels in column, ex. {`_props: { scope: 'col', className: 'custom-class' }`}, - _style (Object) - adds styles to the column header (useful for defining widths)
footer#4.3.0+	undefined	{`(string \| FooterItem)[]`}
Array of objects or strings, where each element represents one cell in the table footer. Example items: {`['FooterCell', 'FooterCell', 'FooterCell']`} or {`[{ label: 'FooterCell', _props: { color: 'success' }, ...]`}
hover#	undefined	{`boolean`}
Enable a hover state on table rows within a {`\`}.
items#4.3.0+	undefined	{`Item[]`}
Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'. Example item: {`{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`}
responsive#	undefined	{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
small#	undefined	{`boolean`}
Make table more compact by cutting all cell {`padding`} in half.
striped#	undefined	{`boolean`}
Add zebra-striping to any table row within the {`\`}.
stripedColumns#4.3.0+	undefined	{`boolean`}
Add zebra-striping to any table column.
tableFootProps#4.3.0+	undefined	{`CTableFootProps`}
Properties that will be passed to the table footer component.
tableHeadProps#4.3.0+	undefined	{`CTableHeadProps`}
Properties that will be passed to the table head component.

diff --git a/packages/docs/content/api/CTableBody.api.mdx b/packages/docs/content/api/CTableBody.api.mdx index ad8c2c61..8bfc35ea 100644 --- a/packages/docs/content/api/CTableBody.api.mdx +++ b/packages/docs/content/api/CTableBody.api.mdx @@ -5,7 +5,32 @@ import { CTableBody } from '@coreui/react' import CTableBody from '@coreui/react/src/components/table/CTableBody' ``` -| 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` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.

diff --git a/packages/docs/content/api/CTableCaption.api.mdx b/packages/docs/content/api/CTableCaption.api.mdx index 3bebec25..b98bd598 100644 --- a/packages/docs/content/api/CTableCaption.api.mdx +++ b/packages/docs/content/api/CTableCaption.api.mdx @@ -5,3 +5,16 @@ import { CTableCaption } from '@coreui/react' import CTableCaption from '@coreui/react/src/components/table/CTableCaption' ``` +

+ + + + + + + + + + +

Property	Default	Type

diff --git a/packages/docs/content/api/CTableDataCell.api.mdx b/packages/docs/content/api/CTableDataCell.api.mdx index 5c5c2c3f..1c8c79ac 100644 --- a/packages/docs/content/api/CTableDataCell.api.mdx +++ b/packages/docs/content/api/CTableDataCell.api.mdx @@ -5,9 +5,48 @@ import { CTableDataCell } from '@coreui/react' import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Highlight a table row or cell. | `boolean` | - | -| **align** | Set the vertical aligment. | `string` | - | -| **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` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
active#	undefined	{`boolean`}
Highlight a table row or cell.
align#	undefined	{`string`}
Set the vertical aligment.
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.

diff --git a/packages/docs/content/api/CTableFoot.api.mdx b/packages/docs/content/api/CTableFoot.api.mdx index 9a363ce4..87e1e2c8 100644 --- a/packages/docs/content/api/CTableFoot.api.mdx +++ b/packages/docs/content/api/CTableFoot.api.mdx @@ -5,7 +5,32 @@ import { CTableFoot } from '@coreui/react' import CTableFoot from '@coreui/react/src/components/table/CTableFoot' ``` -| 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` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.

diff --git a/packages/docs/content/api/CTableHead.api.mdx b/packages/docs/content/api/CTableHead.api.mdx index f890796d..00b9bca3 100644 --- a/packages/docs/content/api/CTableHead.api.mdx +++ b/packages/docs/content/api/CTableHead.api.mdx @@ -5,7 +5,32 @@ import { CTableHead } from '@coreui/react' import CTableHead from '@coreui/react/src/components/table/CTableHead' ``` -| 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` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.

diff --git a/packages/docs/content/api/CTableHeaderCell.api.mdx b/packages/docs/content/api/CTableHeaderCell.api.mdx index ec0ce6e8..1e1c963e 100644 --- a/packages/docs/content/api/CTableHeaderCell.api.mdx +++ b/packages/docs/content/api/CTableHeaderCell.api.mdx @@ -5,7 +5,32 @@ import { CTableHeaderCell } from '@coreui/react' import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCell' ``` -| 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` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.

diff --git a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx index 70181df4..ff57b8c7 100644 --- a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx +++ b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx @@ -5,6 +5,24 @@ import { CTableResponsiveWrapper } from '@coreui/react' import CTableResponsiveWrapper from '@coreui/react/src/components/table/CTableResponsiveWrapper' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **responsive** | Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
responsive#	undefined	{`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.

diff --git a/packages/docs/content/api/CTableRow.api.mdx b/packages/docs/content/api/CTableRow.api.mdx index 0b0adefc..c45094b8 100644 --- a/packages/docs/content/api/CTableRow.api.mdx +++ b/packages/docs/content/api/CTableRow.api.mdx @@ -5,9 +5,48 @@ import { CTableRow } from '@coreui/react' import CTableRow from '@coreui/react/src/components/table/CTableRow' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Highlight a table row or cell.. | `boolean` | - | -| **align** | Set the vertical aligment. | `string` | - | -| **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` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
active#	undefined	{`boolean`}
Highlight a table row or cell..
align#	undefined	{`string`}
Set the vertical aligment.
className#	undefined	{`string`}
A string of all className you want applied to the component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.

diff --git a/packages/docs/content/api/CTabs.api.mdx b/packages/docs/content/api/CTabs.api.mdx index 3a31ef16..50d56cae 100644 --- a/packages/docs/content/api/CTabs.api.mdx +++ b/packages/docs/content/api/CTabs.api.mdx @@ -5,8 +5,40 @@ import { CTabs } from '@coreui/react' import CTabs from '@coreui/react/src/components/tabs/CTabs' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **activeItemKey** | The active item key. | `string` \| `number` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **onChange** | The callback is fired when the active tab changes. | `(value: string` \| `number) => void` | - | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
activeItemKey#	undefined	{`string`}, {`number`}
The active item key.
className#	undefined	{`string`}
A string of all className you want applied to the base component.
onChange#	undefined	{`(value: string \| number) => void`}
The callback is fired when the active tab changes.

diff --git a/packages/docs/content/api/CToast.api.mdx b/packages/docs/content/api/CToast.api.mdx index ac0aba30..4c623448 100644 --- a/packages/docs/content/api/CToast.api.mdx +++ b/packages/docs/content/api/CToast.api.mdx @@ -5,13 +5,80 @@ import { CToast } from '@coreui/react' import CToast from '@coreui/react/src/components/toast/CToast' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **animation** | Apply a CSS fade transition to the toast. | `boolean` | true | -| **autohide** | Auto hide the toast. | `boolean` | true | -| **className** | A string of all className you want applied to the base 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` | - | -| **delay** | Delay hiding the toast (ms). | `number` | 5000 | -| **onClose** | Callback fired when the component requests to be closed. | `(index: number) => void` | - | -| **onShow** | Callback fired when the component requests to be shown. | `(index: number) => void` | - | -| **visible** | Toggle the visibility of component. | `boolean` | false | +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Property	Default	Type
animation#	{`true`}	{`boolean`}
Apply a CSS fade transition to the toast.
autohide#	{`true`}	{`boolean`}
Auto hide the toast.
className#	undefined	{`string`}
A string of all className you want applied to the base component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
delay#	{`5000`}	{`number`}
Delay hiding the toast (ms).
onClose#	undefined	{`(index: number) => void`}
Callback fired when the component requests to be closed.
onShow#	undefined	{`(index: number) => void`}
Callback fired when the component requests to be shown.
visible#	{`false`}	{`boolean`}
Toggle the visibility of component.

diff --git a/packages/docs/content/api/CToastBody.api.mdx b/packages/docs/content/api/CToastBody.api.mdx index b6ee2bb4..b5c2004f 100644 --- a/packages/docs/content/api/CToastBody.api.mdx +++ b/packages/docs/content/api/CToastBody.api.mdx @@ -5,6 +5,24 @@ import { CToastBody } from '@coreui/react' import CToastBody from '@coreui/react/src/components/toast/CToastBody' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **className** | A string of all className you want applied to the base component. | `string` | - | +

+ + + + + + + + + + + + + + + + + + +

Property	Default	Type
className#	undefined	{`string`}
A string of all className you want applied to the base component.

diff --git a/packages/docs/content/api/CToastClose.api.mdx b/packages/docs/content/api/CToastClose.api.mdx index 1d5b0ca4..f08ce983 100644 --- a/packages/docs/content/api/CToastClose.api.mdx +++ b/packages/docs/content/api/CToastClose.api.mdx @@ -5,16 +5,104 @@ import { CToastClose } from '@coreui/react' import CToastClose from '@coreui/react/src/components/toast/CToastClose' ``` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| **active** | Toggle the active state for the component. | `boolean` | - | -| **as** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & string)` \| `(ElementType & ComponentClass)` \| `(ElementType & FunctionComponent)` | - | -| **className** | A string of all className you want applied to the base component. | `string` | - | -| **dark** | Invert the default color. | `boolean` | - | -| **disabled** | Toggle the disabled state for the component. | `boolean` | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | `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 or large. | `'sm'` \| `'lg'` | - | -| **type** | Specifies the type of button. Always specify the type attribute for the `


-able>
-


diff --git a/packages/docs/content/api/CCharts.api.mdx b/packages/docs/content/api/CCharts.api.mdx
index df4faa63..ef3bafe1 100644
--- a/packages/docs/content/api/CCharts.api.mdx
+++ b/packages/docs/content/api/CCharts.api.mdx
@@ -21,7 +21,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         customTooltips#
@@ -29,7 +31,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         {`boolean`}
       
       
-        Enables custom html based tooltips instead of standard tooltips.
+        
+          Enables custom html based tooltips instead of standard tooltips.
+        
       
       
         data#
@@ -37,7 +41,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         {`ChartData\`}, {`((canvas: HTMLCanvasElement) => ChartData\<...>)`}
       
       
-        The data object that is passed into the Chart.js chart (more info).
+        
+          The data object that is passed into the Chart.js chart (more info).
+        
       
       
         fallbackContent#
@@ -45,7 +51,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         {`React.ReactNode`}
       
       
-        A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.
+        
+          A fallback for when the canvas cannot be rendered. Can be used for accessible chart descriptions.
+        
       
       
         getDatasetAtEvent#
@@ -53,7 +61,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         {`(dataset: InteractionItem[], event: React.MouseEvent\) => void`}
       
       
-        Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
+        
+          Proxy for Chart.js getDatasetAtEvent. Calls with dataset and triggering event.
+        
       
       
         getElementAtEvent#
@@ -61,7 +71,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         {`(element: InteractionItem[], event: React.MouseEvent\) => void`}
       
       
-        Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
+        
+          Proxy for Chart.js getElementAtEvent. Calls with single element array and triggering event.
+        
       
       
         getElementsAtEvent#
@@ -69,7 +81,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         {`(elements: InteractionItem[], event: React.MouseEvent\) => void`}
       
       
-        Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.
+        
+          Proxy for Chart.js getElementsAtEvent. Calls with element array and triggering event.
+        
       
       
         height#
@@ -77,7 +91,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         {`number`}
       
       
-        Height attribute applied to the rendered canvas.
+        
+          Height attribute applied to the rendered canvas.
+        
       
       
         id#
@@ -85,7 +101,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         {`string`}
       
       
-        ID attribute applied to the rendered canvas.
+        
+          ID attribute applied to the rendered canvas.
+        
       
       
         options#
@@ -93,7 +111,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         {`_DeepPartialObject\ & ElementChartOptions\ & PluginChartOptions\<...> & DatasetChartOptions\<...> & ScaleChartOptions\<...>>`}
       
       
-        The options object that is passed into the Chart.js chart.
+        
+          The options object that is passed into the Chart.js chart.
+        
       
       
         plugins#
@@ -101,7 +121,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         {`Plugin\[]`}
       
       
-        The plugins array that is passed into the Chart.js chart (more info)
+        
+          The plugins array that is passed into the Chart.js chart (more info)
+        
       
       
         redraw#
@@ -109,7 +131,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         {`boolean`}
       
       
-        If true, will tear down and redraw chart on all updates.
+        
+          If true, will tear down and redraw chart on all updates.
+        
       
       
         width#
@@ -117,7 +141,9 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         {`number`}
       
       
-        Width attribute applied to the rendered canvas.
+        
+          Width attribute applied to the rendered canvas.
+        
       
       
         wrapper#
@@ -125,10 +151,10 @@ import CChartBar from '@coreui/react-chartjs/src/CCharts'
         {`boolean`}
       
       
-        Put the chart into the wrapper div element.
+        
+          Put the chart into the wrapper div element.
+


-able>
-


diff --git a/packages/docs/content/api/CCloseButton.api.mdx b/packages/docs/content/api/CCloseButton.api.mdx
index 46f59259..fba3e552 100644
--- a/packages/docs/content/api/CCloseButton.api.mdx
+++ b/packages/docs/content/api/CCloseButton.api.mdx
@@ -21,7 +21,9 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         dark#
@@ -29,7 +31,9 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton
         {`boolean`}
       
       
-        Invert the default color.
+        
+          Invert the default color.
+        
       
       
         disabled#
@@ -37,15 +41,19 @@ import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton
         {`boolean`}
       
       
-        Toggle the disabled state for the component.
+        
+          Toggle the disabled state for the component.
+        
       
       
-        white#Deprecated undefined
+        white#Deprecated 5.0.0
         undefined
         {`boolean`}
       
       
-        Change the default color to white.
+        
+          Change the default color to white.
+        
       
     
   
diff --git a/packages/docs/content/api/CCol.api.mdx b/packages/docs/content/api/CCol.api.mdx
index a905bd79..90cba258 100644
--- a/packages/docs/content/api/CCol.api.mdx
+++ b/packages/docs/content/api/CCol.api.mdx
@@ -21,7 +21,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         lg#
@@ -29,7 +31,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
         {`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
       
       
-        The number of columns/offset/order on large devices (\<1200px).
+        
+          The number of columns/offset/order on large devices (<1200px).
+        
       
       
         md#
@@ -37,7 +41,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
         {`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
       
       
-        The number of columns/offset/order on medium devices (\<992px).
+        
+          The number of columns/offset/order on medium devices (<992px).
+        
       
       
         sm#
@@ -45,7 +51,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
         {`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
       
       
-        The number of columns/offset/order on small devices (\<768px).
+        
+          The number of columns/offset/order on small devices (<768px).
+        
       
       
         xl#
@@ -53,7 +61,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
         {`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
       
       
-        The number of columns/offset/order on X-Large devices (\<1400px).
+        
+          The number of columns/offset/order on X-Large devices (<1400px).
+        
       
       
         xs#
@@ -61,7 +71,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
         {`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
       
       
-        The number of columns/offset/order on extra small devices (\<576px).
+        
+          The number of columns/offset/order on extra small devices (<576px).
+        
       
       
         xxl#
@@ -69,7 +81,9 @@ import CCol from '@coreui/react/src/components/grid/CCol'
         {`{ 'auto' | number | string | boolean | { span: 'auto' | number | string | boolean } | { offset: number | string } | { order: 'first' | 'last' | number | string }}`}
       
       
-        The number of columns/offset/order on XX-Large devices (≥1400px).
+        
+          The number of columns/offset/order on XX-Large devices (≥1400px).
+        
       
     
   
diff --git a/packages/docs/content/api/CCollapse.api.mdx b/packages/docs/content/api/CCollapse.api.mdx
index 3fe185f9..997d55fd 100644
--- a/packages/docs/content/api/CCollapse.api.mdx
+++ b/packages/docs/content/api/CCollapse.api.mdx
@@ -21,7 +21,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         horizontal#
@@ -29,7 +31,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
         {`boolean`}
       
       
-        Set horizontal collapsing to transition the width instead of height.
+        
+          Set horizontal collapsing to transition the width instead of height.
+        
       
       
         onHide#
@@ -37,7 +41,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
         {`() => void`}
       
       
-        Callback fired when the component requests to be hidden.
+        
+          Callback fired when the component requests to be hidden.
+        
       
       
         onShow#
@@ -45,7 +51,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
         {`() => void`}
       
       
-        Callback fired when the component requests to be shown.
+        
+          Callback fired when the component requests to be shown.
+        
       
       
         visible#
@@ -53,7 +61,9 @@ import CCollapse from '@coreui/react/src/components/collapse/CCollapse'
         {`boolean`}
       
       
-        Toggle the visibility of component.
+        
+          Toggle the visibility of component.
+        
       
     
   
diff --git a/packages/docs/content/api/CConditionalPortal.api.mdx b/packages/docs/content/api/CConditionalPortal.api.mdx
index 1b24cc9d..18508ee1 100644
--- a/packages/docs/content/api/CConditionalPortal.api.mdx
+++ b/packages/docs/content/api/CConditionalPortal.api.mdx
@@ -21,7 +21,9 @@ import CConditionalPortal from '@coreui/react/src/components/conditional-portal/
         {`DocumentFragment`}, {`Element`}, {`(() => DocumentFragment | Element)`}
       
       
-        An HTML element or function that returns a single element, with {`document.body`} as the default.
+        
+          An HTML element or function that returns a single element, with {`document.body`} as the default.
+        
       
       
         portal#
@@ -29,7 +31,9 @@ import CConditionalPortal from '@coreui/react/src/components/conditional-portal/
         {`boolean`}
       
       
-        Render some children into a different part of the DOM
+        
+          Render some children into a different part of the DOM
+        
       
     
   
diff --git a/packages/docs/content/api/CContainer.api.mdx b/packages/docs/content/api/CContainer.api.mdx
index 23928448..d98c8ead 100644
--- a/packages/docs/content/api/CContainer.api.mdx
+++ b/packages/docs/content/api/CContainer.api.mdx
@@ -21,7 +21,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         fluid#
@@ -29,7 +31,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
         {`boolean`}
       
       
-        Set container 100% wide, spanning the entire width of the viewport.
+        
+          Set container 100% wide, spanning the entire width of the viewport.
+        
       
       
         lg#
@@ -37,7 +41,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
         {`boolean`}
       
       
-        Set container 100% wide until large breakpoint.
+        
+          Set container 100% wide until large breakpoint.
+        
       
       
         md#
@@ -45,7 +51,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
         {`boolean`}
       
       
-        Set container 100% wide until medium breakpoint.
+        
+          Set container 100% wide until medium breakpoint.
+        
       
       
         sm#
@@ -53,7 +61,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
         {`boolean`}
       
       
-        Set container 100% wide until small breakpoint.
+        
+          Set container 100% wide until small breakpoint.
+        
       
       
         xl#
@@ -61,7 +71,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
         {`boolean`}
       
       
-        Set container 100% wide until X-large breakpoint.
+        
+          Set container 100% wide until X-large breakpoint.
+        
       
       
         xxl#
@@ -69,7 +81,9 @@ import CContainer from '@coreui/react/src/components/grid/CContainer'
         {`boolean`}
       
       
-        Set container 100% wide until XX-large breakpoint.
+        
+          Set container 100% wide until XX-large breakpoint.
+        
       
     
   
diff --git a/packages/docs/content/api/CDropdown.api.mdx b/packages/docs/content/api/CDropdown.api.mdx
index ef5afd8f..5262dcc9 100644
--- a/packages/docs/content/api/CDropdown.api.mdx
+++ b/packages/docs/content/api/CDropdown.api.mdx
@@ -21,7 +21,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         {`'start'`}, {`'end'`}, {`{ xs: 'start' | 'end' }`}, {`{ sm: 'start' | 'end' }`}, {`{ md: 'start' | 'end' }`}, {`{ lg: 'start' | 'end' }`}, {`{ xl: 'start' | 'end'}`}, {`{ xxl: 'start' | 'end'}`}
       
       
-        Set aligment of dropdown menu.
+        
+          Set aligment of dropdown menu.
+        
       
       
         as#
@@ -29,7 +31,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         autoClose#
@@ -37,7 +41,15 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         {`boolean`}, {`"inside"`}, {`"outside"`}
       
       
-        Configure the auto close behavior of the dropdown:
- {`true`} - the dropdown will be closed by clicking outside or inside the dropdown menu.
- {`false`} - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
- {`'inside'`} - the dropdown will be closed (only) by clicking inside the dropdown menu.
- {`'outside'`} - the dropdown will be closed (only) by clicking outside the dropdown menu.
+        
+          Configure the auto close behavior of the dropdown:
+
+{`true`} - the dropdown will be closed by clicking outside or inside the dropdown menu.
+{`false`} - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
+{`'inside'`} - the dropdown will be closed (only) by clicking inside the dropdown menu.
+{`'outside'`} - the dropdown will be closed (only) by clicking outside the dropdown menu.
+
+        
       
       
         className#
@@ -45,7 +57,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         container#4.11.0+
@@ -53,7 +67,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         {`Element`}, {`DocumentFragment`}, {`(() => Element | DocumentFragment)`}
       
       
-        Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.
+        
+          Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.
+        
       
       
         dark#
@@ -61,7 +77,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         {`boolean`}
       
       
-        Sets a darker color scheme to match a dark navbar.
+        
+          Sets a darker color scheme to match a dark navbar.
+        
       
       
         direction#
@@ -69,7 +87,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         {`"center"`}, {`"dropup"`}, {`"dropup-center"`}, {`"dropend"`}, {`"dropstart"`}
       
       
-        Sets a specified  direction and location of the dropdown menu.
+        
+          Sets a specified  direction and location of the dropdown menu.
+        
       
       
         offset#
@@ -77,7 +97,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         {`[number, number]`}
       
       
-        Offset of the dropdown menu relative to its target.
+        
+          Offset of the dropdown menu relative to its target.
+        
       
       
         onHide#4.9.0+
@@ -85,7 +107,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         {`() => void`}
       
       
-        Callback fired when the component requests to be hidden.
+        
+          Callback fired when the component requests to be hidden.
+        
       
       
         onShow#
@@ -93,7 +117,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         {`() => void`}
       
       
-        Callback fired when the component requests to be shown.
+        
+          Callback fired when the component requests to be shown.
+        
       
       
         placement#
@@ -101,7 +127,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         {`'auto'`}, {`'top-end'`}, {`'top'`}, {`'top-start'`}, {`'bottom-end'`}, {`'bottom'`}, {`'bottom-start'`}, {`'right-start'`}, {`'right'`}, {`'right-end'`}, {`'left-start'`}, {`'left'`}, {`'left-end'`}
       
       
-        Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+        
+          Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+        
       
       
         popper#
@@ -109,7 +137,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         {`boolean`}
       
       
-        If you want to disable dynamic positioning set this property to {`true`}.
+        
+          If you want to disable dynamic positioning set this property to {`true`}.
+        
       
       
         portal#4.8.0+
@@ -117,7 +147,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         {`boolean`}
       
       
-        Generates dropdown menu using createPortal.
+        
+          Generates dropdown menu using createPortal.
+        
       
       
         variant#
@@ -125,7 +157,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         {`"btn-group"`}, {`"dropdown"`}, {`"input-group"`}, {`"nav-item"`}
       
       
-        Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
+        
+          Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
+        
       
       
         visible#
@@ -133,7 +167,9 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
         {`boolean`}
       
       
-        Toggle the visibility of dropdown menu component.
+        
+          Toggle the visibility of dropdown menu component.
+        
       
     
   
diff --git a/packages/docs/content/api/CDropdownDivider.api.mdx b/packages/docs/content/api/CDropdownDivider.api.mdx
index c364ba91..aaab8e37 100644
--- a/packages/docs/content/api/CDropdownDivider.api.mdx
+++ b/packages/docs/content/api/CDropdownDivider.api.mdx
@@ -21,7 +21,9 @@ import CDropdownDivider from '@coreui/react/src/components/dropdown/CDropdownDiv
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CDropdownHeader.api.mdx b/packages/docs/content/api/CDropdownHeader.api.mdx
index 727ce4dc..7652f974 100644
--- a/packages/docs/content/api/CDropdownHeader.api.mdx
+++ b/packages/docs/content/api/CDropdownHeader.api.mdx
@@ -21,7 +21,9 @@ import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHead
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "h6")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CDropdownHeader from '@coreui/react/src/components/dropdown/CDropdownHead
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CDropdownItem.api.mdx b/packages/docs/content/api/CDropdownItem.api.mdx
index 210289c3..7bc03b89 100644
--- a/packages/docs/content/api/CDropdownItem.api.mdx
+++ b/packages/docs/content/api/CDropdownItem.api.mdx
@@ -21,7 +21,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
         {`boolean`}
       
       
-        Toggle the active state for the component.
+        
+          Toggle the active state for the component.
+        
       
       
         as#
@@ -29,7 +31,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "cite")`}, {`(ElementType & "data")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -37,7 +41,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         disabled#
@@ -45,7 +51,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
         {`boolean`}
       
       
-        Toggle the disabled state for the component.
+        
+          Toggle the disabled state for the component.
+        
       
       
         href#
@@ -53,7 +61,9 @@ import CDropdownItem from '@coreui/react/src/components/dropdown/CDropdownItem'
         {`string`}
       
       
-        The href attribute specifies the URL of the page the link goes to.
+        
+          The href attribute specifies the URL of the page the link goes to.
+        
       
     
   
diff --git a/packages/docs/content/api/CDropdownItemPlain.api.mdx b/packages/docs/content/api/CDropdownItemPlain.api.mdx
index 77b6a09b..074f67b0 100644
--- a/packages/docs/content/api/CDropdownItemPlain.api.mdx
+++ b/packages/docs/content/api/CDropdownItemPlain.api.mdx
@@ -21,7 +21,9 @@ import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownI
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "span")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CDropdownItemPlain from '@coreui/react/src/components/dropdown/CDropdownI
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CDropdownMenu.api.mdx b/packages/docs/content/api/CDropdownMenu.api.mdx
index 659abcb3..cef37751 100644
--- a/packages/docs/content/api/CDropdownMenu.api.mdx
+++ b/packages/docs/content/api/CDropdownMenu.api.mdx
@@ -21,7 +21,9 @@ import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CDropdownMenu from '@coreui/react/src/components/dropdown/CDropdownMenu'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
     
   
diff --git a/packages/docs/content/api/CDropdownToggle.api.mdx b/packages/docs/content/api/CDropdownToggle.api.mdx
index c8e5832f..cd887421 100644
--- a/packages/docs/content/api/CDropdownToggle.api.mdx
+++ b/packages/docs/content/api/CDropdownToggle.api.mdx
@@ -21,7 +21,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         {`boolean`}
       
       
-        Toggle the active state for the component.
+        
+          Toggle the active state for the component.
+        
       
       
         as#
@@ -29,7 +31,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         {`ElementType`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         caret#
@@ -37,7 +41,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         {`boolean`}
       
       
-        Enables pseudo element caret on toggler.
+        
+          Enables pseudo element caret on toggler.
+        
       
       
         className#
@@ -45,7 +51,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         color#
@@ -53,7 +61,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the color context of the component to one of CoreUI’s themed colors.
+        
+          Sets the color context of the component to one of CoreUI’s themed colors.
+        
       
       
         custom#
@@ -61,7 +71,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         {`boolean`}
       
       
-        Create a custom toggler which accepts any content.
+        
+          Create a custom toggler which accepts any content.
+        
       
       
         disabled#
@@ -69,7 +81,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         {`boolean`}
       
       
-        Toggle the disabled state for the component.
+        
+          Toggle the disabled state for the component.
+        
       
       
         href#
@@ -77,7 +91,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         {`string`}
       
       
-        The href attribute specifies the URL of the page the link goes to.
+        
+          The href attribute specifies the URL of the page the link goes to.
+        
       
       
         navLink#5.0.0+
@@ -85,7 +101,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         {`boolean`}
       
       
-        If a dropdown {`variant`} is set to {`nav-item`} then render the toggler as a link instead of a button.
+        
+          If a dropdown {`variant`} is set to {`nav-item`} then render the toggler as a link instead of a button.
+        
       
       
         role#
@@ -93,7 +111,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         {`string`}
       
       
-        The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.
+        
+          The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.
+        
       
       
         shape#
@@ -101,7 +121,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         {`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`}
       
       
-        Select the shape of the component.
+        
+          Select the shape of the component.
+        
       
       
         size#
@@ -109,7 +131,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         {`"sm"`}, {`"lg"`}
       
       
-        Size the component small or large.
+        
+          Size the component small or large.
+        
       
       
         split#
@@ -117,7 +141,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         {`boolean`}
       
       
-        Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of {`.dropdown-toggle-split`} className for proper spacing around the dropdown caret.
+        
+          Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of {`.dropdown-toggle-split`} className for proper spacing around the dropdown caret.
+        
       
       
         trigger#
@@ -125,7 +151,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         {`'hover'`}, {`'focus'`}, {`'click'`}
       
       
-        Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+        
+          Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+        
       
       
         variant#
@@ -133,7 +161,9 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
         {`"outline"`}, {`"ghost"`}
       
       
-        Set the button variant to an outlined button or a ghost button.
+        
+          Set the button variant to an outlined button or a ghost button.
+        
       
     
   
diff --git a/packages/docs/content/api/CFooter.api.mdx b/packages/docs/content/api/CFooter.api.mdx
index 91d28698..d58c8223 100644
--- a/packages/docs/content/api/CFooter.api.mdx
+++ b/packages/docs/content/api/CFooter.api.mdx
@@ -21,7 +21,9 @@ import CFooter from '@coreui/react/src/components/footer/CFooter'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         position#
@@ -29,7 +31,9 @@ import CFooter from '@coreui/react/src/components/footer/CFooter'
         {`"fixed"`}, {`"sticky"`}
       
       
-        Place footer in non-static positions.
+        
+          Place footer in non-static positions.
+        
       
     
   
diff --git a/packages/docs/content/api/CForm.api.mdx b/packages/docs/content/api/CForm.api.mdx
index e1fca1e0..076a0e96 100644
--- a/packages/docs/content/api/CForm.api.mdx
+++ b/packages/docs/content/api/CForm.api.mdx
@@ -21,7 +21,9 @@ import CForm from '@coreui/react/src/components/form/CForm'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         validated#
@@ -29,7 +31,9 @@ import CForm from '@coreui/react/src/components/form/CForm'
         {`boolean`}
       
       
-        Mark a form as validated. If you set it {`true`}, all validation styles will be applied to the forms component.
+        
+          Mark a form as validated. If you set it {`true`}, all validation styles will be applied to the forms component.
+        
       
     
   
diff --git a/packages/docs/content/api/CFormCheck.api.mdx b/packages/docs/content/api/CFormCheck.api.mdx
index 59fcbea7..9427f66f 100644
--- a/packages/docs/content/api/CFormCheck.api.mdx
+++ b/packages/docs/content/api/CFormCheck.api.mdx
@@ -21,7 +21,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`ButtonObject`}
       
       
-        Create button-like checkboxes and radio buttons.
+        
+          Create button-like checkboxes and radio buttons.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         feedback#4.2.0+
@@ -37,7 +41,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`ReactNode`}
       
       
-        Provide valuable, actionable feedback.
+        
+          Provide valuable, actionable feedback.
+        
       
       
         feedbackInvalid#4.2.0+
@@ -45,7 +51,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`ReactNode`}
       
       
-        Provide valuable, actionable feedback.
+        
+          Provide valuable, actionable feedback.
+        
       
       
         feedbackValid#4.2.0+
@@ -53,7 +61,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`ReactNode`}
       
       
-        Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
+          Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
       
       
         floatingLabel#4.2.0+
@@ -61,7 +71,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`ReactNode`}
       
       
-        Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
+          Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
       
       
         hitArea#
@@ -69,7 +81,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`"full"`}
       
       
-        Sets hit area to the full area of the component.
+        
+          Sets hit area to the full area of the component.
+        
       
       
         id#
@@ -77,7 +91,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`string`}
       
       
-        The id global attribute defines an identifier (ID) that must be unique in the whole document.
+        
+          The id global attribute defines an identifier (ID) that must be unique in the whole document.
+        
       
       
         indeterminate#
@@ -85,7 +101,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`boolean`}
       
       
-        Input Checkbox indeterminate Property.
+        
+          Input Checkbox indeterminate Property.
+        
       
       
         inline#
@@ -93,7 +111,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`boolean`}
       
       
-        Group checkboxes or radios on the same horizontal row.
+        
+          Group checkboxes or radios on the same horizontal row.
+        
       
       
         invalid#
@@ -101,7 +121,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`boolean`}
       
       
-        Set component validation state to invalid.
+        
+          Set component validation state to invalid.
+        
       
       
         label#
@@ -109,7 +131,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`ReactNode`}
       
       
-        The element represents a caption for a component.
+        
+          The element represents a caption for a component.
+        
       
       
         reverse#
@@ -117,7 +141,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`boolean`}
       
       
-        Put checkboxes or radios on the opposite side.
+        
+          Put checkboxes or radios on the opposite side.
+        
       
       
         tooltipFeedback#4.2.0+
@@ -125,7 +151,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`boolean`}
       
       
-        Display validation feedback in a styled tooltip.
+        
+          Display validation feedback in a styled tooltip.
+        
       
       
         type#
@@ -133,7 +161,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`"checkbox"`}, {`"radio"`}
       
       
-        Specifies the type of component.
+        
+          Specifies the type of component.
+        
       
       
         valid#
@@ -141,7 +171,9 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
         {`boolean`}
       
       
-        Set component validation state to valid.
+        
+          Set component validation state to valid.
+        
       
     
   
diff --git a/packages/docs/content/api/CFormControlValidation.api.mdx b/packages/docs/content/api/CFormControlValidation.api.mdx
index be49958a..e2fdfe60 100644
--- a/packages/docs/content/api/CFormControlValidation.api.mdx
+++ b/packages/docs/content/api/CFormControlValidation.api.mdx
@@ -21,7 +21,9 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
         {`ReactNode`}
       
       
-        Provide valuable, actionable feedback.
+        
+          Provide valuable, actionable feedback.
+        
       
       
         feedbackInvalid#4.2.0+
@@ -29,7 +31,9 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
         {`ReactNode`}
       
       
-        Provide valuable, actionable feedback.
+        
+          Provide valuable, actionable feedback.
+        
       
       
         feedbackValid#4.2.0+
@@ -37,7 +41,9 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
         {`ReactNode`}
       
       
-        Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
+          Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
       
       
         floatingLabel#4.2.0+
@@ -45,7 +51,9 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
         {`ReactNode`}
       
       
-        Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
+          Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
       
       
         invalid#
@@ -53,7 +61,9 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
         {`boolean`}
       
       
-        Set component validation state to invalid.
+        
+          Set component validation state to invalid.
+        
       
       
         tooltipFeedback#4.2.0+
@@ -61,7 +71,9 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
         {`boolean`}
       
       
-        Display validation feedback in a styled tooltip.
+        
+          Display validation feedback in a styled tooltip.
+        
       
       
         valid#
@@ -69,7 +81,9 @@ import CFormControlValidation from '@coreui/react/src/components/form/CFormContr
         {`boolean`}
       
       
-        Set component validation state to valid.
+        
+          Set component validation state to valid.
+        
       
     
   
diff --git a/packages/docs/content/api/CFormControlWrapper.api.mdx b/packages/docs/content/api/CFormControlWrapper.api.mdx
index 49ab36b1..f0a44eaa 100644
--- a/packages/docs/content/api/CFormControlWrapper.api.mdx
+++ b/packages/docs/content/api/CFormControlWrapper.api.mdx
@@ -21,7 +21,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
         {`ReactNode`}
       
       
-        Provide valuable, actionable feedback.
+        
+          Provide valuable, actionable feedback.
+        
       
       
         feedbackInvalid#4.2.0+
@@ -29,7 +31,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
         {`ReactNode`}
       
       
-        Provide valuable, actionable feedback.
+        
+          Provide valuable, actionable feedback.
+        
       
       
         feedbackValid#4.2.0+
@@ -37,7 +41,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
         {`ReactNode`}
       
       
-        Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
+          Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
       
       
         floatingClassName#4.5.0+
@@ -45,7 +51,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
         {`string`}
       
       
-        A string of all className you want applied to the floating label wrapper.
+        
+          A string of all className you want applied to the floating label wrapper.
+        
       
       
         floatingLabel#4.2.0+
@@ -53,7 +61,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
         {`ReactNode`}
       
       
-        Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
+          Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
       
       
         invalid#
@@ -61,7 +71,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
         {`boolean`}
       
       
-        Set component validation state to invalid.
+        
+          Set component validation state to invalid.
+        
       
       
         label#4.2.0+
@@ -69,7 +81,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
         {`ReactNode`}
       
       
-        Add a caption for a component.
+        
+          Add a caption for a component.
+        
       
       
         text#4.2.0+
@@ -77,7 +91,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
         {`ReactNode`}
       
       
-        Add helper text to the component.
+        
+          Add helper text to the component.
+        
       
       
         tooltipFeedback#4.2.0+
@@ -85,7 +101,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
         {`boolean`}
       
       
-        Display validation feedback in a styled tooltip.
+        
+          Display validation feedback in a styled tooltip.
+        
       
       
         valid#
@@ -93,7 +111,9 @@ import CFormControlWrapper from '@coreui/react/src/components/form/CFormControlW
         {`boolean`}
       
       
-        Set component validation state to valid.
+        
+          Set component validation state to valid.
+        
       
     
   
diff --git a/packages/docs/content/api/CFormFeedback.api.mdx b/packages/docs/content/api/CFormFeedback.api.mdx
index 0ee22dde..845d95e2 100644
--- a/packages/docs/content/api/CFormFeedback.api.mdx
+++ b/packages/docs/content/api/CFormFeedback.api.mdx
@@ -21,7 +21,9 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         invalid#
@@ -37,7 +41,9 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
         {`boolean`}
       
       
-        Method called immediately after the {`value`} prop changes.
+        
+          Method called immediately after the {`value`} prop changes.
+        
       
       
         tooltip#
@@ -45,7 +51,9 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
         {`boolean`}
       
       
-        If your form layout allows it, you can display validation feedback in a styled tooltip.
+        
+          If your form layout allows it, you can display validation feedback in a styled tooltip.
+        
       
       
         valid#
@@ -53,7 +61,9 @@ import CFormFeedback from '@coreui/react/src/components/form/CFormFeedback'
         {`boolean`}
       
       
-        Set component validation state to valid.
+        
+          Set component validation state to valid.
+        
       
     
   
diff --git a/packages/docs/content/api/CFormFloating.api.mdx b/packages/docs/content/api/CFormFloating.api.mdx
index 0ba29670..c4539363 100644
--- a/packages/docs/content/api/CFormFloating.api.mdx
+++ b/packages/docs/content/api/CFormFloating.api.mdx
@@ -21,7 +21,9 @@ import CFormFloating from '@coreui/react/src/components/form/CFormFloating'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CFormInput.api.mdx b/packages/docs/content/api/CFormInput.api.mdx
index b69c5cfb..b3ed91a0 100644
--- a/packages/docs/content/api/CFormInput.api.mdx
+++ b/packages/docs/content/api/CFormInput.api.mdx
@@ -21,7 +21,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         delay#
@@ -29,7 +31,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`number`}, {`boolean`}
       
       
-        Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event.
+        
+          Delay onChange event while typing. If set to true onChange event will be delayed 500ms, you can also provide the number of milliseconds you want to delay the onChange event.
+        
       
       
         disabled#
@@ -37,7 +41,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`boolean`}
       
       
-        Toggle the disabled state for the component.
+        
+          Toggle the disabled state for the component.
+        
       
       
         feedback#4.2.0+
@@ -45,7 +51,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`ReactNode`}
       
       
-        Provide valuable, actionable feedback.
+        
+          Provide valuable, actionable feedback.
+        
       
       
         feedbackInvalid#4.2.0+
@@ -53,7 +61,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`ReactNode`}
       
       
-        Provide valuable, actionable feedback.
+        
+          Provide valuable, actionable feedback.
+        
       
       
         feedbackValid#4.2.0+
@@ -61,7 +71,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`ReactNode`}
       
       
-        Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
+          Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
       
       
         floatingClassName#4.5.0+
@@ -69,7 +81,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`string`}
       
       
-        A string of all className you want applied to the floating label wrapper.
+        
+          A string of all className you want applied to the floating label wrapper.
+        
       
       
         floatingLabel#4.2.0+
@@ -77,7 +91,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`ReactNode`}
       
       
-        Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
+          Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
       
       
         invalid#
@@ -85,7 +101,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`boolean`}
       
       
-        Set component validation state to invalid.
+        
+          Set component validation state to invalid.
+        
       
       
         label#4.2.0+
@@ -93,7 +111,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`ReactNode`}
       
       
-        Add a caption for a component.
+        
+          Add a caption for a component.
+        
       
       
         onChange#
@@ -101,7 +121,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`ChangeEventHandler\`}
       
       
-        Method called immediately after the {`value`} prop changes.
+        
+          Method called immediately after the {`value`} prop changes.
+        
       
       
         plainText#
@@ -109,7 +131,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`boolean`}
       
       
-        Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side {`readonly`}.
+        
+          Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side {`readonly`}.
+        
       
       
         readOnly#
@@ -117,7 +141,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`boolean`}
       
       
-        Toggle the readonly state for the component.
+        
+          Toggle the readonly state for the component.
+        
       
       
         size#
@@ -125,7 +151,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`"sm"`}, {`"lg"`}
       
       
-        Size the component small or large.
+        
+          Size the component small or large.
+        
       
       
         text#4.2.0+
@@ -133,7 +161,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`ReactNode`}
       
       
-        Add helper text to the component.
+        
+          Add helper text to the component.
+        
       
       
         tooltipFeedback#4.2.0+
@@ -141,7 +171,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`boolean`}
       
       
-        Display validation feedback in a styled tooltip.
+        
+          Display validation feedback in a styled tooltip.
+        
       
       
         type#
@@ -149,7 +181,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`string`}
       
       
-        Specifies the type of component.
+        
+          Specifies the type of component.
+        
       
       
         valid#
@@ -157,7 +191,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`boolean`}
       
       
-        Set component validation state to valid.
+        
+          Set component validation state to valid.
+        
       
       
         value#
@@ -165,7 +201,9 @@ import CFormInput from '@coreui/react/src/components/form/CFormInput'
         {`string`}, {`number`}, {`string[]`}
       
       
-        The {`value`} attribute of component.
+        
+          The {`value`} attribute of component.
+        
       
     
   
diff --git a/packages/docs/content/api/CFormLabel.api.mdx b/packages/docs/content/api/CFormLabel.api.mdx
index d6d7ab74..fe2e2470 100644
--- a/packages/docs/content/api/CFormLabel.api.mdx
+++ b/packages/docs/content/api/CFormLabel.api.mdx
@@ -21,7 +21,9 @@ import CFormLabel from '@coreui/react/src/components/form/CFormLabel'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         customClassName#
@@ -29,7 +31,9 @@ import CFormLabel from '@coreui/react/src/components/form/CFormLabel'
         {`string`}
       
       
-        A string of all className you want to be applied to the component, and override standard className value.
+        
+          A string of all className you want to be applied to the component, and override standard className value.
+        
       
     
   
diff --git a/packages/docs/content/api/CFormRange.api.mdx b/packages/docs/content/api/CFormRange.api.mdx
index 65ea10c7..b16951cb 100644
--- a/packages/docs/content/api/CFormRange.api.mdx
+++ b/packages/docs/content/api/CFormRange.api.mdx
@@ -21,7 +21,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         disabled#
@@ -29,7 +31,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
         {`boolean`}
       
       
-        Toggle the disabled state for the component.
+        
+          Toggle the disabled state for the component.
+        
       
       
         label#4.2.0+
@@ -37,7 +41,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
         {`ReactNode`}
       
       
-        Add a caption for a component.
+        
+          Add a caption for a component.
+        
       
       
         max#
@@ -45,7 +51,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
         {`number`}
       
       
-        Specifies the maximum value for the component.
+        
+          Specifies the maximum value for the component.
+        
       
       
         min#
@@ -53,7 +61,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
         {`number`}
       
       
-        Specifies the minimum value for the component.
+        
+          Specifies the minimum value for the component.
+        
       
       
         onChange#
@@ -61,7 +71,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
         {`ChangeEventHandler\`}
       
       
-        Method called immediately after the {`value`} prop changes.
+        
+          Method called immediately after the {`value`} prop changes.
+        
       
       
         readOnly#
@@ -69,7 +81,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
         {`boolean`}
       
       
-        Toggle the readonly state for the component.
+        
+          Toggle the readonly state for the component.
+        
       
       
         step#
@@ -77,7 +91,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
         {`number`}
       
       
-        Specifies the interval between legal numbers in the component.
+        
+          Specifies the interval between legal numbers in the component.
+        
       
       
         value#
@@ -85,7 +101,9 @@ import CFormRange from '@coreui/react/src/components/form/CFormRange'
         {`string`}, {`number`}, {`string[]`}
       
       
-        The {`value`} attribute of component.
+        
+          The {`value`} attribute of component.
+        
       
     
   
diff --git a/packages/docs/content/api/CFormSelect.api.mdx b/packages/docs/content/api/CFormSelect.api.mdx
index 105db26a..45a1295f 100644
--- a/packages/docs/content/api/CFormSelect.api.mdx
+++ b/packages/docs/content/api/CFormSelect.api.mdx
@@ -21,7 +21,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         feedback#4.2.0+
@@ -29,7 +31,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`ReactNode`}
       
       
-        Provide valuable, actionable feedback.
+        
+          Provide valuable, actionable feedback.
+        
       
       
         feedbackInvalid#4.2.0+
@@ -37,7 +41,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`ReactNode`}
       
       
-        Provide valuable, actionable feedback.
+        
+          Provide valuable, actionable feedback.
+        
       
       
         feedbackValid#4.2.0+
@@ -45,7 +51,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`ReactNode`}
       
       
-        Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
+          Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
       
       
         floatingClassName#4.5.0+
@@ -53,7 +61,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`string`}
       
       
-        A string of all className you want applied to the floating label wrapper.
+        
+          A string of all className you want applied to the floating label wrapper.
+        
       
       
         floatingLabel#4.2.0+
@@ -61,7 +71,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`ReactNode`}
       
       
-        Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
+          Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
       
       
         htmlSize#
@@ -69,7 +81,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`number`}
       
       
-        Specifies the number of visible options in a drop-down list.
+        
+          Specifies the number of visible options in a drop-down list.
+        
       
       
         invalid#
@@ -77,7 +91,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`boolean`}
       
       
-        Set component validation state to invalid.
+        
+          Set component validation state to invalid.
+        
       
       
         label#4.2.0+
@@ -85,7 +101,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`ReactNode`}
       
       
-        Add a caption for a component.
+        
+          Add a caption for a component.
+        
       
       
         onChange#
@@ -93,7 +111,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`ChangeEventHandler\`}
       
       
-        Method called immediately after the {`value`} prop changes.
+        
+          Method called immediately after the {`value`} prop changes.
+        
       
       
         options#
@@ -101,7 +121,14 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`Option[]`}, {`string[]`}
       
       
-        Options list of the select component. Available keys: {`label`}, {`value`}, {`disabled`}.
Examples:
- {`options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`}
- {`options={['js', 'html']}`}
+        
+          Options list of the select component. Available keys: {`label`}, {`value`}, {`disabled`}.

+Examples:
+
+{`options={[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]}`}
+{`options={['js', 'html']}`}
+
+        
       
       
         size#
@@ -109,7 +136,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`"sm"`}, {`"lg"`}
       
       
-        Size the component small or large.
+        
+          Size the component small or large.
+        
       
       
         text#4.2.0+
@@ -117,7 +146,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`ReactNode`}
       
       
-        Add helper text to the component.
+        
+          Add helper text to the component.
+        
       
       
         tooltipFeedback#4.2.0+
@@ -125,7 +156,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`boolean`}
       
       
-        Display validation feedback in a styled tooltip.
+        
+          Display validation feedback in a styled tooltip.
+        
       
       
         valid#
@@ -133,7 +166,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`boolean`}
       
       
-        Set component validation state to valid.
+        
+          Set component validation state to valid.
+        
       
       
         value#
@@ -141,7 +176,9 @@ import CFormSelect from '@coreui/react/src/components/form/CFormSelect'
         {`string`}, {`number`}, {`string[]`}
       
       
-        The {`value`} attribute of component.
+        
+          The {`value`} attribute of component.
+        
       
     
   
diff --git a/packages/docs/content/api/CFormSwitch.api.mdx b/packages/docs/content/api/CFormSwitch.api.mdx
index 5c420a83..3dfe443d 100644
--- a/packages/docs/content/api/CFormSwitch.api.mdx
+++ b/packages/docs/content/api/CFormSwitch.api.mdx
@@ -21,7 +21,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         id#
@@ -29,7 +31,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
         {`string`}
       
       
-        The id global attribute defines an identifier (ID) that must be unique in the whole document.
+        
+          The id global attribute defines an identifier (ID) that must be unique in the whole document.
+        
       
       
         invalid#
@@ -37,7 +41,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
         {`boolean`}
       
       
-        Set component validation state to invalid.
+        
+          Set component validation state to invalid.
+        
       
       
         label#
@@ -45,7 +51,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
         {`ReactNode`}
       
       
-        The element represents a caption for a component.
+        
+          The element represents a caption for a component.
+        
       
       
         reverse#
@@ -53,7 +61,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
         {`boolean`}
       
       
-        Put switch on the opposite side.
+        
+          Put switch on the opposite side.
+        
       
       
         size#
@@ -61,7 +71,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
         {`"lg"`}, {`"xl"`}
       
       
-        Size the component large or extra large. Works only with {`switch`}.
+        
+          Size the component large or extra large. Works only with {`switch`}.
+        
       
       
         type#
@@ -69,7 +81,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
         {`"checkbox"`}, {`"radio"`}
       
       
-        Specifies the type of component.
+        
+          Specifies the type of component.
+        
       
       
         valid#
@@ -77,7 +91,9 @@ import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
         {`boolean`}
       
       
-        Set component validation state to valid.
+        
+          Set component validation state to valid.
+        
       
     
   
diff --git a/packages/docs/content/api/CFormText.api.mdx b/packages/docs/content/api/CFormText.api.mdx
index 2f666b98..25e307a4 100644
--- a/packages/docs/content/api/CFormText.api.mdx
+++ b/packages/docs/content/api/CFormText.api.mdx
@@ -21,7 +21,9 @@ import CFormText from '@coreui/react/src/components/form/CFormText'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CFormText from '@coreui/react/src/components/form/CFormText'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CFormTextarea.api.mdx b/packages/docs/content/api/CFormTextarea.api.mdx
index 6f831f59..010175d7 100644
--- a/packages/docs/content/api/CFormTextarea.api.mdx
+++ b/packages/docs/content/api/CFormTextarea.api.mdx
@@ -21,7 +21,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         disabled#
@@ -29,7 +31,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`boolean`}
       
       
-        Toggle the disabled state for the component.
+        
+          Toggle the disabled state for the component.
+        
       
       
         feedback#4.2.0+
@@ -37,7 +41,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`ReactNode`}
       
       
-        Provide valuable, actionable feedback.
+        
+          Provide valuable, actionable feedback.
+        
       
       
         feedbackInvalid#4.2.0+
@@ -45,7 +51,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`ReactNode`}
       
       
-        Provide valuable, actionable feedback.
+        
+          Provide valuable, actionable feedback.
+        
       
       
         feedbackValid#4.2.0+
@@ -53,7 +61,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`ReactNode`}
       
       
-        Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
+          Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
       
       
         floatingClassName#4.5.0+
@@ -61,7 +71,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`string`}
       
       
-        A string of all className you want applied to the floating label wrapper.
+        
+          A string of all className you want applied to the floating label wrapper.
+        
       
       
         floatingLabel#4.2.0+
@@ -69,7 +81,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`ReactNode`}
       
       
-        Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
+          Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, {`:invalid`} and {`:valid`}.
+        
       
       
         invalid#
@@ -77,7 +91,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`boolean`}
       
       
-        Set component validation state to invalid.
+        
+          Set component validation state to invalid.
+        
       
       
         label#4.2.0+
@@ -85,7 +101,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`ReactNode`}
       
       
-        Add a caption for a component.
+        
+          Add a caption for a component.
+        
       
       
         onChange#
@@ -93,7 +111,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`ChangeEventHandler\`}
       
       
-        Method called immediately after the {`value`} prop changes.
+        
+          Method called immediately after the {`value`} prop changes.
+        
       
       
         plainText#
@@ -101,7 +121,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`boolean`}
       
       
-        Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side {`readonly`}.
+        
+          Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side {`readonly`}.
+        
       
       
         readOnly#
@@ -109,7 +131,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`boolean`}
       
       
-        Toggle the readonly state for the component.
+        
+          Toggle the readonly state for the component.
+        
       
       
         text#4.2.0+
@@ -117,7 +141,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`ReactNode`}
       
       
-        Add helper text to the component.
+        
+          Add helper text to the component.
+        
       
       
         tooltipFeedback#4.2.0+
@@ -125,7 +151,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`boolean`}
       
       
-        Display validation feedback in a styled tooltip.
+        
+          Display validation feedback in a styled tooltip.
+        
       
       
         valid#
@@ -133,7 +161,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`boolean`}
       
       
-        Set component validation state to valid.
+        
+          Set component validation state to valid.
+        
       
       
         value#
@@ -141,7 +171,9 @@ import CFormTextarea from '@coreui/react/src/components/form/CFormTextarea'
         {`string`}, {`number`}, {`string[]`}
       
       
-        The {`value`} attribute of component.
+        
+          The {`value`} attribute of component.
+        
       
     
   
diff --git a/packages/docs/content/api/CHeader.api.mdx b/packages/docs/content/api/CHeader.api.mdx
index 692cee33..7670d5b2 100644
--- a/packages/docs/content/api/CHeader.api.mdx
+++ b/packages/docs/content/api/CHeader.api.mdx
@@ -21,7 +21,9 @@ import CHeader from '@coreui/react/src/components/header/CHeader'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         container#
@@ -29,7 +31,9 @@ import CHeader from '@coreui/react/src/components/header/CHeader'
         {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"fluid"`}
       
       
-        Defines optional container wrapping children elements.
+        
+          Defines optional container wrapping children elements.
+        
       
       
         position#
@@ -37,7 +41,9 @@ import CHeader from '@coreui/react/src/components/header/CHeader'
         {`"fixed"`}, {`"sticky"`}
       
       
-        Place header in non-static positions.
+        
+          Place header in non-static positions.
+        
       
     
   
diff --git a/packages/docs/content/api/CHeaderBrand.api.mdx b/packages/docs/content/api/CHeaderBrand.api.mdx
index 10369861..bd517329 100644
--- a/packages/docs/content/api/CHeaderBrand.api.mdx
+++ b/packages/docs/content/api/CHeaderBrand.api.mdx
@@ -21,7 +21,9 @@ import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CHeaderBrand from '@coreui/react/src/components/header/CHeaderBrand'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CHeaderDivider.api.mdx b/packages/docs/content/api/CHeaderDivider.api.mdx
index ba8343d3..6916f36a 100644
--- a/packages/docs/content/api/CHeaderDivider.api.mdx
+++ b/packages/docs/content/api/CHeaderDivider.api.mdx
@@ -21,7 +21,9 @@ import CHeaderDivider from '@coreui/react/src/components/header/CHeaderDivider'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CHeaderNav.api.mdx b/packages/docs/content/api/CHeaderNav.api.mdx
index c9538fbe..e7592905 100644
--- a/packages/docs/content/api/CHeaderNav.api.mdx
+++ b/packages/docs/content/api/CHeaderNav.api.mdx
@@ -21,7 +21,9 @@ import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CHeaderNav from '@coreui/react/src/components/header/CHeaderNav'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CHeaderText.api.mdx b/packages/docs/content/api/CHeaderText.api.mdx
index 7b2b049d..51fa4f6d 100644
--- a/packages/docs/content/api/CHeaderText.api.mdx
+++ b/packages/docs/content/api/CHeaderText.api.mdx
@@ -21,7 +21,9 @@ import CHeaderText from '@coreui/react/src/components/header/CHeaderText'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
     
   
diff --git a/packages/docs/content/api/CHeaderToggler.api.mdx b/packages/docs/content/api/CHeaderToggler.api.mdx
index 9ed97ec8..b6318096 100644
--- a/packages/docs/content/api/CHeaderToggler.api.mdx
+++ b/packages/docs/content/api/CHeaderToggler.api.mdx
@@ -21,7 +21,9 @@ import CHeaderToggler from '@coreui/react/src/components/header/CHeaderToggler'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
     
   
diff --git a/packages/docs/content/api/CIcon.api.mdx b/packages/docs/content/api/CIcon.api.mdx
index 922cde27..3b6f21b5 100644
--- a/packages/docs/content/api/CIcon.api.mdx
+++ b/packages/docs/content/api/CIcon.api.mdx
@@ -21,15 +21,19 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
-        content#Deprecated undefined
+        content#Deprecated 3.0
         undefined
         {`string`}, {`string[]`}
       
       
-        Use {`icon={...}`} instead of
+        
+          Use {`icon={...}`} instead of
+        
       
       
         customClassName#
@@ -37,7 +41,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
         {`string`}, {`string[]`}
       
       
-        Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
+        
+          Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
+        
       
       
         height#
@@ -45,7 +51,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
         {`number`}
       
       
-        The height attribute defines the vertical length of an icon.
+        
+          The height attribute defines the vertical length of an icon.
+        
       
       
         icon#
@@ -53,15 +61,19 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
         {`string`}, {`string[]`}
       
       
-        Name of the icon placed in React object or SVG content.
+        
+          Name of the icon placed in React object or SVG content.
+        
       
       
-        name#Deprecated undefined
+        name#Deprecated 3.0
         undefined
         {`string`}
       
       
-        Use {`icon="..."`} instead of
+        
+          Use {`icon="..."`} instead of
+        
       
       
         size#
@@ -69,7 +81,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
         {`"custom"`}, {`"custom-size"`}, {`"sm"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"3xl"`}, {`"4xl"`}, {`"5xl"`}, {`"6xl"`}, {`"7xl"`}, {`"8xl"`}, {`"9xl"`}
       
       
-        Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
+        
+          Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl…9xl', 'custom', 'custom-size'.
+        
       
       
         title#
@@ -77,7 +91,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
         {`string`}
       
       
-        Title tag content.
+        
+          Title tag content.
+        
       
       
         use#
@@ -85,7 +101,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
         {`string`}
       
       
-        If defined component will be rendered using 'use' tag.
+        
+          If defined component will be rendered using 'use' tag.
+        
       
       
         viewBox#
@@ -93,7 +111,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
         {`string`}
       
       
-        The viewBox attribute defines the position and dimension of an SVG viewport.
+        
+          The viewBox attribute defines the position and dimension of an SVG viewport.
+        
       
       
         width#
@@ -101,7 +121,9 @@ import CIcon from '@coreui/../node_modules/@coreui/icons-react/src/CIcon'
         {`number`}
       
       
-        The width attribute defines the horizontal length of an icon.
+        
+          The width attribute defines the horizontal length of an icon.
+        
       
     
   
diff --git a/packages/docs/content/api/CIconSvg.api.mdx b/packages/docs/content/api/CIconSvg.api.mdx
index 66f86fd5..6b19c7ea 100644
--- a/packages/docs/content/api/CIconSvg.api.mdx
+++ b/packages/docs/content/api/CIconSvg.api.mdx
@@ -21,7 +21,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         customClassName#
@@ -29,7 +31,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
         {`string`}, {`string[]`}
       
       
-        Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
+        
+          Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
+        
       
       
         height#
@@ -37,7 +41,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
         {`number`}
       
       
-        The height attribute defines the vertical length of an icon.
+        
+          The height attribute defines the vertical length of an icon.
+        
       
       
         size#
@@ -45,7 +51,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
         {`"custom"`}, {`"custom-size"`}, {`"sm"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"3xl"`}, {`"4xl"`}, {`"5xl"`}, {`"6xl"`}, {`"7xl"`}, {`"8xl"`}, {`"9xl"`}
       
       
-        Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
+        
+          Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl…9xl', 'custom', 'custom-size'.
+        
       
       
         title#
@@ -53,7 +61,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
         {`string`}
       
       
-        Title tag content.
+        
+          Title tag content.
+        
       
       
         width#
@@ -61,7 +71,9 @@ import CIconSvg from '@coreui/icons-react/src/CIconSvg'
         {`number`}
       
       
-        The width attribute defines the horizontal length of an icon.
+        
+          The width attribute defines the horizontal length of an icon.
+        
       
     
   
diff --git a/packages/docs/content/api/CImage.api.mdx b/packages/docs/content/api/CImage.api.mdx
index 2b619e44..ea5c6c03 100644
--- a/packages/docs/content/api/CImage.api.mdx
+++ b/packages/docs/content/api/CImage.api.mdx
@@ -21,7 +21,9 @@ import CImage from '@coreui/react/src/components/image/CImage'
         {`"start"`}, {`"center"`}, {`"end"`}
       
       
-        Set the horizontal aligment.
+        
+          Set the horizontal aligment.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CImage from '@coreui/react/src/components/image/CImage'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         fluid#
@@ -37,7 +41,9 @@ import CImage from '@coreui/react/src/components/image/CImage'
         {`boolean`}
       
       
-        Make image responsive.
+        
+          Make image responsive.
+        
       
       
         rounded#
@@ -45,7 +51,9 @@ import CImage from '@coreui/react/src/components/image/CImage'
         {`boolean`}
       
       
-        Make image rounded.
+        
+          Make image rounded.
+        
       
       
         thumbnail#
@@ -53,7 +61,9 @@ import CImage from '@coreui/react/src/components/image/CImage'
         {`boolean`}
       
       
-        Give an image a rounded 1px border appearance.
+        
+          Give an image a rounded 1px border appearance.
+        
       
     
   
diff --git a/packages/docs/content/api/CInputGroup.api.mdx b/packages/docs/content/api/CInputGroup.api.mdx
index 8e11a1cb..2e7fc300 100644
--- a/packages/docs/content/api/CInputGroup.api.mdx
+++ b/packages/docs/content/api/CInputGroup.api.mdx
@@ -21,7 +21,9 @@ import CInputGroup from '@coreui/react/src/components/form/CInputGroup'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         size#
@@ -29,7 +31,9 @@ import CInputGroup from '@coreui/react/src/components/form/CInputGroup'
         {`"sm"`}, {`"lg"`}
       
       
-        Size the component small or large.
+        
+          Size the component small or large.
+        
       
     
   
diff --git a/packages/docs/content/api/CInputGroupText.api.mdx b/packages/docs/content/api/CInputGroupText.api.mdx
index 7333ae46..5064e0c8 100644
--- a/packages/docs/content/api/CInputGroupText.api.mdx
+++ b/packages/docs/content/api/CInputGroupText.api.mdx
@@ -21,7 +21,9 @@ import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "span")`}, {`(ElementType & "form")`}, {`(ElementType & "slot")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CLink.api.mdx b/packages/docs/content/api/CLink.api.mdx
index 297687c3..621c917b 100644
--- a/packages/docs/content/api/CLink.api.mdx
+++ b/packages/docs/content/api/CLink.api.mdx
@@ -21,7 +21,9 @@ import CLink from '@coreui/react/src/components/link/CLink'
         {`boolean`}
       
       
-        Toggle the active state for the component.
+        
+          Toggle the active state for the component.
+        
       
       
         as#
@@ -29,7 +31,9 @@ import CLink from '@coreui/react/src/components/link/CLink'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "cite")`}, {`(ElementType & "data")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -37,7 +41,9 @@ import CLink from '@coreui/react/src/components/link/CLink'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         disabled#
@@ -45,7 +51,9 @@ import CLink from '@coreui/react/src/components/link/CLink'
         {`boolean`}
       
       
-        Toggle the disabled state for the component.
+        
+          Toggle the disabled state for the component.
+        
       
       
         href#
@@ -53,7 +61,9 @@ import CLink from '@coreui/react/src/components/link/CLink'
         {`string`}
       
       
-        The href attribute specifies the URL of the page the link goes to.
+        
+          The href attribute specifies the URL of the page the link goes to.
+        
       
     
   
diff --git a/packages/docs/content/api/CListGroup.api.mdx b/packages/docs/content/api/CListGroup.api.mdx
index 5ff0ad27..a43d46e4 100644
--- a/packages/docs/content/api/CListGroup.api.mdx
+++ b/packages/docs/content/api/CListGroup.api.mdx
@@ -21,7 +21,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         flush#
@@ -37,7 +41,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup'
         {`boolean`}
       
       
-        Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., {`\`}).
+        
+          Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., {``}).
+        
       
       
         layout#
@@ -45,7 +51,9 @@ import CListGroup from '@coreui/react/src/components/list-group/CListGroup'
         {`"horizontal"`}, {`"horizontal-sm"`}, {`"horizontal-md"`}, {`"horizontal-lg"`}, {`"horizontal-xl"`}, {`"horizontal-xxl"`}
       
       
-        Specify a layout type.
+        
+          Specify a layout type.
+        
       
     
   
diff --git a/packages/docs/content/api/CListGroupItem.api.mdx b/packages/docs/content/api/CListGroupItem.api.mdx
index ae42cde7..84b91e1d 100644
--- a/packages/docs/content/api/CListGroupItem.api.mdx
+++ b/packages/docs/content/api/CListGroupItem.api.mdx
@@ -21,7 +21,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt
         {`boolean`}
       
       
-        Toggle the active state for the component.
+        
+          Toggle the active state for the component.
+        
       
       
         as#
@@ -29,7 +31,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -37,7 +41,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         color#
@@ -45,7 +51,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the color context of the component to one of CoreUI’s themed colors.
+        
+          Sets the color context of the component to one of CoreUI’s themed colors.
+        
       
       
         disabled#
@@ -53,7 +61,9 @@ import CListGroupItem from '@coreui/react/src/components/list-group/CListGroupIt
         {`boolean`}
       
       
-        Toggle the disabled state for the component.
+        
+          Toggle the disabled state for the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CModal.api.mdx b/packages/docs/content/api/CModal.api.mdx
index 5d55be8e..0e9608a9 100644
--- a/packages/docs/content/api/CModal.api.mdx
+++ b/packages/docs/content/api/CModal.api.mdx
@@ -21,7 +21,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`"top"`}, {`"center"`}
       
       
-        Align the modal in the center or top of the screen.
+        
+          Align the modal in the center or top of the screen.
+        
       
       
         backdrop#
@@ -29,7 +31,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`boolean`}, {`"static"`}
       
       
-        Apply a backdrop on body while modal is open.
+        
+          Apply a backdrop on body while modal is open.
+        
       
       
         className#
@@ -37,7 +41,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         container#5.3.0+
@@ -45,7 +51,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`Element`}, {`DocumentFragment`}, {`(() => Element | DocumentFragment)`}
       
       
-        Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.
+        
+          Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.
+        
       
       
         focus#4.10.0+
@@ -53,7 +61,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`boolean`}
       
       
-        Puts the focus on the modal when shown.
+        
+          Puts the focus on the modal when shown.
+        
       
       
         fullscreen#
@@ -61,7 +71,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
       
       
-        Set modal to covers the entire user viewport.
+        
+          Set modal to covers the entire user viewport.
+        
       
       
         keyboard#
@@ -69,7 +81,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`boolean`}
       
       
-        Closes the modal when escape key is pressed.
+        
+          Closes the modal when escape key is pressed.
+        
       
       
         onClose#
@@ -77,7 +91,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`() => void`}
       
       
-        Callback fired when the component requests to be closed.
+        
+          Callback fired when the component requests to be closed.
+        
       
       
         onClosePrevented#
@@ -85,7 +101,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`() => void`}
       
       
-        Callback fired when the component requests to be closed.
+        
+          Callback fired when the component requests to be closed.
+        
       
       
         onShow#
@@ -93,7 +111,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`() => void`}
       
       
-        Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.
+        
+          Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.
+        
       
       
         portal#
@@ -101,7 +121,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`boolean`}
       
       
-        Generates modal using createPortal.
+        
+          Generates modal using createPortal.
+        
       
       
         scrollable#
@@ -109,7 +131,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`boolean`}
       
       
-        Create a scrollable modal that allows scrolling the modal body.
+        
+          Create a scrollable modal that allows scrolling the modal body.
+        
       
       
         size#
@@ -117,7 +141,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`"sm"`}, {`"lg"`}, {`"xl"`}
       
       
-        Size the component small, large, or extra large.
+        
+          Size the component small, large, or extra large.
+        
       
       
         transition#
@@ -125,7 +151,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`boolean`}
       
       
-        Remove animation to create modal that simply appear rather than fade in to view.
+        
+          Remove animation to create modal that simply appear rather than fade in to view.
+        
       
       
         unmountOnClose#
@@ -133,7 +161,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`boolean`}
       
       
-        By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
+        
+          By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
+        
       
       
         visible#
@@ -141,7 +171,9 @@ import CModal from '@coreui/react/src/components/modal/CModal'
         {`boolean`}
       
       
-        Toggle the visibility of modal component.
+        
+          Toggle the visibility of modal component.
+        
       
     
   
diff --git a/packages/docs/content/api/CModalBody.api.mdx b/packages/docs/content/api/CModalBody.api.mdx
index db2858ae..42c701f2 100644
--- a/packages/docs/content/api/CModalBody.api.mdx
+++ b/packages/docs/content/api/CModalBody.api.mdx
@@ -21,7 +21,9 @@ import CModalBody from '@coreui/react/src/components/modal/CModalBody'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
     
   
diff --git a/packages/docs/content/api/CModalContent.api.mdx b/packages/docs/content/api/CModalContent.api.mdx
index 65bcb134..9b19d13b 100644
--- a/packages/docs/content/api/CModalContent.api.mdx
+++ b/packages/docs/content/api/CModalContent.api.mdx
@@ -21,7 +21,9 @@ import CModalContent from '@coreui/react/src/components/modal/CModalContent'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
     
   
diff --git a/packages/docs/content/api/CModalDialog.api.mdx b/packages/docs/content/api/CModalDialog.api.mdx
index aa9ee1e4..768c38ca 100644
--- a/packages/docs/content/api/CModalDialog.api.mdx
+++ b/packages/docs/content/api/CModalDialog.api.mdx
@@ -21,7 +21,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
         {`"top"`}, {`"center"`}
       
       
-        Align the modal in the center or top of the screen.
+        
+          Align the modal in the center or top of the screen.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         fullscreen#
@@ -37,7 +41,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
         {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
       
       
-        Set modal to covers the entire user viewport.
+        
+          Set modal to covers the entire user viewport.
+        
       
       
         scrollable#
@@ -45,7 +51,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
         {`boolean`}
       
       
-        Does the modal dialog itself scroll, or does the whole dialog scroll within the window.
+        
+          Does the modal dialog itself scroll, or does the whole dialog scroll within the window.
+        
       
       
         size#
@@ -53,7 +61,9 @@ import CModalDialog from '@coreui/react/src/components/modal/CModalDialog'
         {`"sm"`}, {`"lg"`}, {`"xl"`}
       
       
-        Size the component small, large, or extra large.
+        
+          Size the component small, large, or extra large.
+        
       
     
   
diff --git a/packages/docs/content/api/CModalFooter.api.mdx b/packages/docs/content/api/CModalFooter.api.mdx
index 25a3d54e..f413e986 100644
--- a/packages/docs/content/api/CModalFooter.api.mdx
+++ b/packages/docs/content/api/CModalFooter.api.mdx
@@ -21,7 +21,9 @@ import CModalFooter from '@coreui/react/src/components/modal/CModalFooter'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
     
   
diff --git a/packages/docs/content/api/CModalHeader.api.mdx b/packages/docs/content/api/CModalHeader.api.mdx
index 3bb8fdb8..ca5db296 100644
--- a/packages/docs/content/api/CModalHeader.api.mdx
+++ b/packages/docs/content/api/CModalHeader.api.mdx
@@ -21,7 +21,9 @@ import CModalHeader from '@coreui/react/src/components/modal/CModalHeader'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         closeButton#
@@ -29,7 +31,9 @@ import CModalHeader from '@coreui/react/src/components/modal/CModalHeader'
         {`boolean`}
       
       
-        Add a close button component to the header.
+        
+          Add a close button component to the header.
+        
       
     
   
diff --git a/packages/docs/content/api/CModalTitle.api.mdx b/packages/docs/content/api/CModalTitle.api.mdx
index 78393a10..7876d479 100644
--- a/packages/docs/content/api/CModalTitle.api.mdx
+++ b/packages/docs/content/api/CModalTitle.api.mdx
@@ -21,7 +21,9 @@ import CModalTitle from '@coreui/react/src/components/modal/CModalTitle'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "h5")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CModalTitle from '@coreui/react/src/components/modal/CModalTitle'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
     
   
diff --git a/packages/docs/content/api/CNav.api.mdx b/packages/docs/content/api/CNav.api.mdx
index 7a216738..2d6cafd2 100644
--- a/packages/docs/content/api/CNav.api.mdx
+++ b/packages/docs/content/api/CNav.api.mdx
@@ -21,7 +21,9 @@ import CNav from '@coreui/react/src/components/nav/CNav'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CNav from '@coreui/react/src/components/nav/CNav'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         layout#
@@ -37,7 +41,9 @@ import CNav from '@coreui/react/src/components/nav/CNav'
         {`"fill"`}, {`"justified"`}
       
       
-        Specify a layout type for component.
+        
+          Specify a layout type for component.
+        
       
       
         variant#
@@ -45,7 +51,9 @@ import CNav from '@coreui/react/src/components/nav/CNav'
         {`"pills"`}, {`"tabs"`}, {`"underline"`}, {`"underline-border"`}
       
       
-        Set the nav variant to tabs or pills.
+        
+          Set the nav variant to tabs or pills.
+        
       
     
   
diff --git a/packages/docs/content/api/CNavGroup.api.mdx b/packages/docs/content/api/CNavGroup.api.mdx
index 83b3d884..0e0714d6 100644
--- a/packages/docs/content/api/CNavGroup.api.mdx
+++ b/packages/docs/content/api/CNavGroup.api.mdx
@@ -21,7 +21,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         compact#
@@ -37,7 +41,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
         {`boolean`}
       
       
-        Make nav group more compact by cutting all {`padding`} in half.
+        
+          Make nav group more compact by cutting all {`padding`} in half.
+        
       
       
         toggler#
@@ -45,7 +51,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
         {`ReactNode`}
       
       
-        Set group toggler label.
+        
+          Set group toggler label.
+        
       
       
         visible#
@@ -53,7 +61,9 @@ import CNavGroup from '@coreui/react/src/components/nav/CNavGroup'
         {`boolean`}
       
       
-        Show nav group items.
+        
+          Show nav group items.
+        
       
     
   
diff --git a/packages/docs/content/api/CNavGroupItems.api.mdx b/packages/docs/content/api/CNavGroupItems.api.mdx
index 3b911547..3b0df119 100644
--- a/packages/docs/content/api/CNavGroupItems.api.mdx
+++ b/packages/docs/content/api/CNavGroupItems.api.mdx
@@ -21,7 +21,9 @@ import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CNavGroupItems from '@coreui/react/src/components/nav/CNavGroupItems'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CNavItem.api.mdx b/packages/docs/content/api/CNavItem.api.mdx
index 5d629503..4e260edb 100644
--- a/packages/docs/content/api/CNavItem.api.mdx
+++ b/packages/docs/content/api/CNavItem.api.mdx
@@ -21,7 +21,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem'
         {`boolean`}
       
       
-        Toggle the active state for the component.
+        
+          Toggle the active state for the component.
+        
       
       
         as#5.0.0+
@@ -29,7 +31,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "cite")`}, {`(ElementType & "data")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -37,7 +41,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         disabled#
@@ -45,7 +51,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem'
         {`boolean`}
       
       
-        Toggle the disabled state for the component.
+        
+          Toggle the disabled state for the component.
+        
       
       
         href#
@@ -53,7 +61,9 @@ import CNavItem from '@coreui/react/src/components/nav/CNavItem'
         {`string`}
       
       
-        The href attribute specifies the URL of the page the link goes to.
+        
+          The href attribute specifies the URL of the page the link goes to.
+        
       
     
   
diff --git a/packages/docs/content/api/CNavLink.api.mdx b/packages/docs/content/api/CNavLink.api.mdx
index f3154093..7e3c45c9 100644
--- a/packages/docs/content/api/CNavLink.api.mdx
+++ b/packages/docs/content/api/CNavLink.api.mdx
@@ -21,7 +21,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink'
         {`boolean`}
       
       
-        Toggle the active state for the component.
+        
+          Toggle the active state for the component.
+        
       
       
         as#
@@ -29,7 +31,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "cite")`}, {`(ElementType & "data")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -37,7 +41,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         disabled#
@@ -45,7 +51,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink'
         {`boolean`}
       
       
-        Toggle the disabled state for the component.
+        
+          Toggle the disabled state for the component.
+        
       
       
         href#
@@ -53,7 +61,9 @@ import CNavLink from '@coreui/react/src/components/nav/CNavLink'
         {`string`}
       
       
-        The href attribute specifies the URL of the page the link goes to.
+        
+          The href attribute specifies the URL of the page the link goes to.
+        
       
     
   
diff --git a/packages/docs/content/api/CNavTitle.api.mdx b/packages/docs/content/api/CNavTitle.api.mdx
index 83abb795..bab5f5f9 100644
--- a/packages/docs/content/api/CNavTitle.api.mdx
+++ b/packages/docs/content/api/CNavTitle.api.mdx
@@ -21,7 +21,9 @@ import CNavTitle from '@coreui/react/src/components/nav/CNavTitle'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "li")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CNavTitle from '@coreui/react/src/components/nav/CNavTitle'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CNavbar.api.mdx b/packages/docs/content/api/CNavbar.api.mdx
index 730f1c1e..1aaa1c87 100644
--- a/packages/docs/content/api/CNavbar.api.mdx
+++ b/packages/docs/content/api/CNavbar.api.mdx
@@ -21,7 +21,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "nav")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         color#
@@ -37,7 +41,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the color context of the component to one of CoreUI’s themed colors.
+        
+          Sets the color context of the component to one of CoreUI’s themed colors.
+        
       
       
         colorScheme#
@@ -45,7 +51,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
         {`"dark"`}, {`"light"`}
       
       
-        Sets if the color of text should be colored for a light or dark background.
+        
+          Sets if the color of text should be colored for a light or dark background.
+        
       
       
         container#
@@ -53,7 +61,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
         {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}, {`"fluid"`}
       
       
-        Defines optional container wrapping children elements.
+        
+          Defines optional container wrapping children elements.
+        
       
       
         expand#
@@ -61,7 +71,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
         {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
       
       
-        Defines the responsive breakpoint to determine when content collapses.
+        
+          Defines the responsive breakpoint to determine when content collapses.
+        
       
       
         placement#
@@ -69,7 +81,9 @@ import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
         {`"fixed-top"`}, {`"fixed-bottom"`}, {`"sticky-top"`}
       
       
-        Place component in non-static positions.
+        
+          Place component in non-static positions.
+        
       
     
   
diff --git a/packages/docs/content/api/CNavbarBrand.api.mdx b/packages/docs/content/api/CNavbarBrand.api.mdx
index 03d98309..cbb61ccf 100644
--- a/packages/docs/content/api/CNavbarBrand.api.mdx
+++ b/packages/docs/content/api/CNavbarBrand.api.mdx
@@ -21,7 +21,9 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         href#
@@ -37,7 +41,9 @@ import CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand'
         {`string`}
       
       
-        The href attribute specifies the URL of the page the link goes to.
+        
+          The href attribute specifies the URL of the page the link goes to.
+        
       
     
   
diff --git a/packages/docs/content/api/CNavbarNav.api.mdx b/packages/docs/content/api/CNavbarNav.api.mdx
index 2c46edf3..577e403a 100644
--- a/packages/docs/content/api/CNavbarNav.api.mdx
+++ b/packages/docs/content/api/CNavbarNav.api.mdx
@@ -21,7 +21,9 @@ import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CNavbarText.api.mdx b/packages/docs/content/api/CNavbarText.api.mdx
index a7c58443..158f710f 100644
--- a/packages/docs/content/api/CNavbarText.api.mdx
+++ b/packages/docs/content/api/CNavbarText.api.mdx
@@ -21,7 +21,9 @@ import CNavbarText from '@coreui/react/src/components/navbar/CNavbarText'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
     
   
diff --git a/packages/docs/content/api/CNavbarToggler.api.mdx b/packages/docs/content/api/CNavbarToggler.api.mdx
index ce474a31..38e4b19a 100644
--- a/packages/docs/content/api/CNavbarToggler.api.mdx
+++ b/packages/docs/content/api/CNavbarToggler.api.mdx
@@ -21,7 +21,9 @@ import CNavbarToggler from '@coreui/react/src/components/navbar/CNavbarToggler'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
     
   
diff --git a/packages/docs/content/api/COffcanvas.api.mdx b/packages/docs/content/api/COffcanvas.api.mdx
index 744d2595..2b50ddc3 100644
--- a/packages/docs/content/api/COffcanvas.api.mdx
+++ b/packages/docs/content/api/COffcanvas.api.mdx
@@ -21,7 +21,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         {`boolean`}, {`"static"`}
       
       
-        Apply a backdrop on body while offcanvas is open.
+        
+          Apply a backdrop on body while offcanvas is open.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         dark#
@@ -37,7 +41,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         {`boolean`}
       
       
-        Sets a darker color scheme.
+        
+          Sets a darker color scheme.
+        
       
       
         keyboard#
@@ -45,7 +51,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         {`boolean`}
       
       
-        Closes the offcanvas when escape key is pressed.
+        
+          Closes the offcanvas when escape key is pressed.
+        
       
       
         onHide#
@@ -53,7 +61,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         {`() => void`}
       
       
-        Callback fired when the component requests to be hidden.
+        
+          Callback fired when the component requests to be hidden.
+        
       
       
         onShow#
@@ -61,7 +71,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         {`() => void`}
       
       
-        Callback fired when the component requests to be shown.
+        
+          Callback fired when the component requests to be shown.
+        
       
       
         placement#
@@ -69,7 +81,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         {`"start"`}, {`"end"`}, {`"top"`}, {`"bottom"`}
       
       
-        Components placement, there’s no default placement.
+        
+          Components placement, there’s no default placement.
+        
       
       
         portal#
@@ -77,7 +91,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         {`boolean`}
       
       
-        Generates modal using createPortal.
+        
+          Generates modal using createPortal.
+        
       
       
         responsive#4.6.0+
@@ -85,7 +101,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
       
       
-        Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
+        
+          Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
+        
       
       
         scroll#
@@ -93,7 +111,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         {`boolean`}
       
       
-        Allow body scrolling while offcanvas is open
+        
+          Allow body scrolling while offcanvas is open
+        
       
       
         visible#
@@ -101,7 +121,9 @@ import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
         {`boolean`}
       
       
-        Toggle the visibility of offcanvas component.
+        
+          Toggle the visibility of offcanvas component.
+        
       
     
   
diff --git a/packages/docs/content/api/COffcanvasBody.api.mdx b/packages/docs/content/api/COffcanvasBody.api.mdx
index 63a205df..a68dc896 100644
--- a/packages/docs/content/api/COffcanvasBody.api.mdx
+++ b/packages/docs/content/api/COffcanvasBody.api.mdx
@@ -21,7 +21,9 @@ import COffcanvasBody from '@coreui/react/src/components/offcanvas/COffcanvasBod
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
     
   
diff --git a/packages/docs/content/api/COffcanvasHeader.api.mdx b/packages/docs/content/api/COffcanvasHeader.api.mdx
index 5ca4bdd5..a505a208 100644
--- a/packages/docs/content/api/COffcanvasHeader.api.mdx
+++ b/packages/docs/content/api/COffcanvasHeader.api.mdx
@@ -21,7 +21,9 @@ import COffcanvasHeader from '@coreui/react/src/components/offcanvas/COffcanvasH
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
     
   
diff --git a/packages/docs/content/api/COffcanvasTitle.api.mdx b/packages/docs/content/api/COffcanvasTitle.api.mdx
index 5ff8759d..06c1ac6a 100644
--- a/packages/docs/content/api/COffcanvasTitle.api.mdx
+++ b/packages/docs/content/api/COffcanvasTitle.api.mdx
@@ -21,7 +21,9 @@ import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTi
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "h5")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import COffcanvasTitle from '@coreui/react/src/components/offcanvas/COffcanvasTi
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CPagination.api.mdx b/packages/docs/content/api/CPagination.api.mdx
index d1870dac..a0dfe5af 100644
--- a/packages/docs/content/api/CPagination.api.mdx
+++ b/packages/docs/content/api/CPagination.api.mdx
@@ -21,7 +21,9 @@ import CPagination from '@coreui/react/src/components/pagination/CPagination'
         {`"start"`}, {`"center"`}, {`"end"`}
       
       
-        Set the alignment of pagination components.
+        
+          Set the alignment of pagination components.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CPagination from '@coreui/react/src/components/pagination/CPagination'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         size#
@@ -37,7 +41,9 @@ import CPagination from '@coreui/react/src/components/pagination/CPagination'
         {`"sm"`}, {`"lg"`}
       
       
-        Size the component small or large.
+        
+          Size the component small or large.
+        
       
     
   
diff --git a/packages/docs/content/api/CPaginationItem.api.mdx b/packages/docs/content/api/CPaginationItem.api.mdx
index b8573635..71479d0a 100644
--- a/packages/docs/content/api/CPaginationItem.api.mdx
+++ b/packages/docs/content/api/CPaginationItem.api.mdx
@@ -21,7 +21,9 @@ import CPaginationItem from '@coreui/react/src/components/pagination/CPagination
         {`boolean`}
       
       
-        Toggle the active state for the component.
+        
+          Toggle the active state for the component.
+        
       
       
         as#
@@ -29,7 +31,9 @@ import CPaginationItem from '@coreui/react/src/components/pagination/CPagination
         {`(ElementType & string)`}, {`(ElementType & ComponentClass\)`}, {`(ElementType & FunctionComponent\)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         disabled#
@@ -37,7 +41,9 @@ import CPaginationItem from '@coreui/react/src/components/pagination/CPagination
         {`boolean`}
       
       
-        Toggle the disabled state for the component.
+        
+          Toggle the disabled state for the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CPlaceholder.api.mdx b/packages/docs/content/api/CPlaceholder.api.mdx
index 7247c5cc..7ad82151 100644
--- a/packages/docs/content/api/CPlaceholder.api.mdx
+++ b/packages/docs/content/api/CPlaceholder.api.mdx
@@ -21,7 +21,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         {`"glow"`}, {`"wave"`}
       
       
-        Set animation type to better convey the perception of something being actively loaded.
+        
+          Set animation type to better convey the perception of something being actively loaded.
+        
       
       
         as#
@@ -29,7 +31,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "span")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -37,7 +41,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         color#
@@ -45,7 +51,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the color context of the component to one of CoreUI’s themed colors.
+        
+          Sets the color context of the component to one of CoreUI’s themed colors.
+        
       
       
         lg#
@@ -53,7 +61,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         {`number`}
       
       
-        The number of columns on large devices (\<1200px).
+        
+          The number of columns on large devices (<1200px).
+        
       
       
         md#
@@ -61,7 +71,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         {`number`}
       
       
-        The number of columns on medium devices (\<992px).
+        
+          The number of columns on medium devices (<992px).
+        
       
       
         size#
@@ -69,7 +81,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         {`"xs"`}, {`"sm"`}, {`"lg"`}
       
       
-        Size the component extra small, small, or large.
+        
+          Size the component extra small, small, or large.
+        
       
       
         sm#
@@ -77,7 +91,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         {`number`}
       
       
-        The number of columns on small devices (\<768px).
+        
+          The number of columns on small devices (<768px).
+        
       
       
         xl#
@@ -85,7 +101,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         {`number`}
       
       
-        The number of columns on X-Large devices (\<1400px).
+        
+          The number of columns on X-Large devices (<1400px).
+        
       
       
         xs#
@@ -93,7 +111,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         {`number`}
       
       
-        The number of columns on extra small devices (\<576px).
+        
+          The number of columns on extra small devices (<576px).
+        
       
       
         xxl#
@@ -101,7 +121,9 @@ import CPlaceholder from '@coreui/react/src/components/placeholder/CPlaceholder'
         {`number`}
       
       
-        The number of columns on XX-Large devices (≥1400px).
+        
+          The number of columns on XX-Large devices (≥1400px).
+        
       
     
   
diff --git a/packages/docs/content/api/CPopover.api.mdx b/packages/docs/content/api/CPopover.api.mdx
index 784e2a0d..bfc98bd5 100644
--- a/packages/docs/content/api/CPopover.api.mdx
+++ b/packages/docs/content/api/CPopover.api.mdx
@@ -21,7 +21,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         {`boolean`}
       
       
-        Apply a CSS fade transition to the popover.
+        
+          Apply a CSS fade transition to the popover.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         container#4.11.0+
@@ -37,7 +41,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         {`Element`}, {`DocumentFragment`}, {`(() => Element | DocumentFragment)`}
       
       
-        Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.
+        
+          Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default {`document.body`}.
+        
       
       
         content#
@@ -45,7 +51,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         {`ReactNode`}
       
       
-        Content node for your component.
+        
+          Content node for your component.
+        
       
       
         delay#4.9.0+
@@ -53,7 +61,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         {`number`}, {`{ show: number; hide: number; }`}
       
       
-        The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: {`{ 'show': 500, 'hide': 100 }`}.
+        
+          The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: {`{ 'show': 500, 'hide': 100 }`}.
+        
       
       
         fallbackPlacements#4.9.0+
@@ -61,7 +71,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         {`Placements`}, {`Placements[]`}
       
       
-        Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+        
+          Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+        
       
       
         offset#
@@ -69,7 +81,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         {`[number, number]`}
       
       
-        Offset of the popover relative to its target.
+        
+          Offset of the popover relative to its target.
+        
       
       
         onHide#
@@ -77,7 +91,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         {`() => void`}
       
       
-        Callback fired when the component requests to be hidden.
+        
+          Callback fired when the component requests to be hidden.
+        
       
       
         onShow#
@@ -85,7 +101,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         {`() => void`}
       
       
-        Callback fired when the component requests to be shown.
+        
+          Callback fired when the component requests to be shown.
+        
       
       
         placement#
@@ -93,7 +111,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         {`"auto"`}, {`"top"`}, {`"bottom"`}, {`"right"`}, {`"left"`}
       
       
-        Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+        
+          Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+        
       
       
         title#
@@ -101,7 +121,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         {`ReactNode`}
       
       
-        Title node for your component.
+        
+          Title node for your component.
+        
       
       
         trigger#
@@ -109,7 +131,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         {`'hover'`}, {`'focus'`}, {`'click'`}
       
       
-        Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+        
+          Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+        
       
       
         visible#
@@ -117,7 +141,9 @@ import CPopover from '@coreui/react/src/components/popover/CPopover'
         {`boolean`}
       
       
-        Toggle the visibility of popover component.
+        
+          Toggle the visibility of popover component.
+        
       
     
   
diff --git a/packages/docs/content/api/CProgress.api.mdx b/packages/docs/content/api/CProgress.api.mdx
index efd6a125..07b83230 100644
--- a/packages/docs/content/api/CProgress.api.mdx
+++ b/packages/docs/content/api/CProgress.api.mdx
@@ -21,7 +21,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         {`boolean`}
       
       
-        Use to animate the stripes right to left via CSS3 animations.
+        
+          Use to animate the stripes right to left via CSS3 animations.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         color#
@@ -37,7 +41,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the color context of the component to one of CoreUI’s themed colors.
+        
+          Sets the color context of the component to one of CoreUI’s themed colors.
+        
       
       
         height#
@@ -45,7 +51,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         {`number`}
       
       
-        Sets the height of the component. If you set that value the inner {`\`} will automatically resize accordingly.
+        
+          Sets the height of the component. If you set that value the inner {``} will automatically resize accordingly.
+        
       
       
         progressBarClassName#4.9.0+
@@ -53,7 +61,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         {`string`}
       
       
-        A string of all className you want applied to the \ component.
+        
+          A string of all className you want applied to the  component.
+        
       
       
         thin#
@@ -61,7 +71,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         {`boolean`}
       
       
-        Makes progress bar thinner.
+        
+          Makes progress bar thinner.
+        
       
       
         value#
@@ -69,7 +81,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         {`number`}
       
       
-        The percent to progress the ProgressBar (out of 100).
+        
+          The percent to progress the ProgressBar (out of 100).
+        
       
       
         variant#
@@ -77,7 +91,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         {`"striped"`}
       
       
-        Set the progress bar variant to optional striped.
+        
+          Set the progress bar variant to optional striped.
+        
       
       
         white#
@@ -85,7 +101,9 @@ import CProgress from '@coreui/react/src/components/progress/CProgress'
         {`boolean`}
       
       
-        Change the default color to white.
+        
+          Change the default color to white.
+        
       
     
   
diff --git a/packages/docs/content/api/CProgressBar.api.mdx b/packages/docs/content/api/CProgressBar.api.mdx
index 1e21b9c7..56197cb6 100644
--- a/packages/docs/content/api/CProgressBar.api.mdx
+++ b/packages/docs/content/api/CProgressBar.api.mdx
@@ -21,7 +21,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
         {`boolean`}
       
       
-        Use to animate the stripes right to left via CSS3 animations.
+        
+          Use to animate the stripes right to left via CSS3 animations.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         color#
@@ -37,7 +41,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the color context of the component to one of CoreUI’s themed colors.
+        
+          Sets the color context of the component to one of CoreUI’s themed colors.
+        
       
       
         value#
@@ -45,7 +51,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
         {`number`}
       
       
-        The percent to progress the ProgressBar.
+        
+          The percent to progress the ProgressBar.
+        
       
       
         variant#
@@ -53,7 +61,9 @@ import CProgressBar from '@coreui/react/src/components/progress/CProgressBar'
         {`"striped"`}
       
       
-        Set the progress bar variant to optional striped.
+        
+          Set the progress bar variant to optional striped.
+        
       
     
   
diff --git a/packages/docs/content/api/CProgressStacked.api.mdx b/packages/docs/content/api/CProgressStacked.api.mdx
index 19f2beef..ce482129 100644
--- a/packages/docs/content/api/CProgressStacked.api.mdx
+++ b/packages/docs/content/api/CProgressStacked.api.mdx
@@ -21,7 +21,9 @@ import CProgressStacked from '@coreui/react/src/components/progress/CProgressSta
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CRow.api.mdx b/packages/docs/content/api/CRow.api.mdx
index f2e0f907..f8f3b137 100644
--- a/packages/docs/content/api/CRow.api.mdx
+++ b/packages/docs/content/api/CRow.api.mdx
@@ -21,7 +21,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         lg#
@@ -29,7 +31,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
         {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
       
       
-        The number of columns/offset/order on large devices (\<1200px).
+        
+          The number of columns/offset/order on large devices (<1200px).
+        
       
       
         md#
@@ -37,7 +41,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
         {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
       
       
-        The number of columns/offset/order on medium devices (\<992px).
+        
+          The number of columns/offset/order on medium devices (<992px).
+        
       
       
         sm#
@@ -45,7 +51,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
         {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
       
       
-        The number of columns/offset/order on small devices (\<768px).
+        
+          The number of columns/offset/order on small devices (<768px).
+        
       
       
         xl#
@@ -53,7 +61,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
         {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
       
       
-        The number of columns/offset/order on X-Large devices (\<1400px).
+        
+          The number of columns/offset/order on X-Large devices (<1400px).
+        
       
       
         xs#
@@ -61,7 +71,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
         {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
       
       
-        The number of columns/offset/order on extra small devices (\<576px).
+        
+          The number of columns/offset/order on extra small devices (<576px).
+        
       
       
         xxl#
@@ -69,7 +81,9 @@ import CRow from '@coreui/react/src/components/grid/CRow'
         {`{{ cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }}`}
       
       
-        The number of columns/offset/order on XX-Large devices (≥1400px).
+        
+          The number of columns/offset/order on XX-Large devices (≥1400px).
+        
       
     
   
diff --git a/packages/docs/content/api/CSidebar.api.mdx b/packages/docs/content/api/CSidebar.api.mdx
index e251864c..7d7dd7d4 100644
--- a/packages/docs/content/api/CSidebar.api.mdx
+++ b/packages/docs/content/api/CSidebar.api.mdx
@@ -21,7 +21,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         colorScheme#
@@ -29,7 +31,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         {`'dark'`}, {`'light'`}
       
       
-        Sets if the color of text should be colored for a light or dark dark background.
+        
+          Sets if the color of text should be colored for a light or dark dark background.
+        
       
       
         narrow#
@@ -37,7 +41,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         {`boolean`}
       
       
-        Make sidebar narrow.
+        
+          Make sidebar narrow.
+        
       
       
         onHide#
@@ -45,7 +51,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         {`() => void`}
       
       
-        Callback fired when the component requests to be hidden.
+        
+          Callback fired when the component requests to be hidden.
+        
       
       
         onShow#
@@ -53,7 +61,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         {`() => void`}
       
       
-        Callback fired when the component requests to be shown.
+        
+          Callback fired when the component requests to be shown.
+        
       
       
         onVisibleChange#
@@ -61,7 +71,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         {`(visible: boolean) => void`}
       
       
-        Event emitted after visibility of component changed.
+        
+          Event emitted after visibility of component changed.
+        
       
       
         overlaid#
@@ -69,7 +81,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         {`boolean`}
       
       
-        Set sidebar to overlaid variant.
+        
+          Set sidebar to overlaid variant.
+        
       
       
         placement#
@@ -77,7 +91,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         {`'start'`}, {`'end'`}
       
       
-        Components placement, there’s no default placement.
+        
+          Components placement, there’s no default placement.
+        
       
       
         position#
@@ -85,7 +101,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         {`"fixed"`}, {`"sticky"`}
       
       
-        Place sidebar in non-static positions.
+        
+          Place sidebar in non-static positions.
+        
       
       
         size#
@@ -93,7 +111,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         {`"sm"`}, {`"lg"`}, {`"xl"`}
       
       
-        Size the component small, large, or extra large.
+        
+          Size the component small, large, or extra large.
+        
       
       
         unfoldable#
@@ -101,7 +121,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         {`boolean`}
       
       
-        Expand narrowed sidebar on hover.
+        
+          Expand narrowed sidebar on hover.
+        
       
       
         visible#
@@ -109,7 +131,9 @@ import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
         {`boolean`}
       
       
-        Toggle the visibility of sidebar component.
+        
+          Toggle the visibility of sidebar component.
+        
       
     
   
diff --git a/packages/docs/content/api/CSidebarBrand.api.mdx b/packages/docs/content/api/CSidebarBrand.api.mdx
index fc56e0d0..55a39332 100644
--- a/packages/docs/content/api/CSidebarBrand.api.mdx
+++ b/packages/docs/content/api/CSidebarBrand.api.mdx
@@ -21,7 +21,9 @@ import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "a")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CSidebarBrand from '@coreui/react/src/components/sidebar/CSidebarBrand'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CSidebarFooter.api.mdx b/packages/docs/content/api/CSidebarFooter.api.mdx
index ac4cc6b1..d3f357b2 100644
--- a/packages/docs/content/api/CSidebarFooter.api.mdx
+++ b/packages/docs/content/api/CSidebarFooter.api.mdx
@@ -21,7 +21,9 @@ import CSidebarFooter from '@coreui/react/src/components/sidebar/CSidebarFooter'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CSidebarHeader.api.mdx b/packages/docs/content/api/CSidebarHeader.api.mdx
index fae56074..ea6eaf7f 100644
--- a/packages/docs/content/api/CSidebarHeader.api.mdx
+++ b/packages/docs/content/api/CSidebarHeader.api.mdx
@@ -21,7 +21,9 @@ import CSidebarHeader from '@coreui/react/src/components/sidebar/CSidebarHeader'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CSidebarNav.api.mdx b/packages/docs/content/api/CSidebarNav.api.mdx
index 099b5949..dbc289a6 100644
--- a/packages/docs/content/api/CSidebarNav.api.mdx
+++ b/packages/docs/content/api/CSidebarNav.api.mdx
@@ -21,7 +21,9 @@ import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "ul")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CSidebarNav from '@coreui/react/src/components/sidebar/CSidebarNav'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CSidebarToggler.api.mdx b/packages/docs/content/api/CSidebarToggler.api.mdx
index f35f392e..4c39a565 100644
--- a/packages/docs/content/api/CSidebarToggler.api.mdx
+++ b/packages/docs/content/api/CSidebarToggler.api.mdx
@@ -21,7 +21,9 @@ import CSidebarToggler from '@coreui/react/src/components/sidebar/CSidebarToggle
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
     
   
diff --git a/packages/docs/content/api/CSpinner.api.mdx b/packages/docs/content/api/CSpinner.api.mdx
index 48fc06f8..c072502a 100644
--- a/packages/docs/content/api/CSpinner.api.mdx
+++ b/packages/docs/content/api/CSpinner.api.mdx
@@ -21,7 +21,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
         {`(ElementType & "symbol")`}, {`(ElementType & "object")`}, {`(ElementType & "div")`}, {`(ElementType & "slot")`}, {`(ElementType & "style")`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         color#
@@ -37,7 +41,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the color context of the component to one of CoreUI’s themed colors.
+        
+          Sets the color context of the component to one of CoreUI’s themed colors.
+        
       
       
         size#
@@ -45,7 +51,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
         {`"sm"`}
       
       
-        Size the component small.
+        
+          Size the component small.
+        
       
       
         variant#
@@ -53,7 +61,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
         {`"border"`}, {`"grow"`}
       
       
-        Set the button variant to an outlined button or a ghost button.
+        
+          Set the button variant to an outlined button or a ghost button.
+        
       
       
         visuallyHiddenLabel#
@@ -61,7 +71,9 @@ import CSpinner from '@coreui/react/src/components/spinner/CSpinner'
         {`string`}
       
       
-        Set visually hidden label for accessibility purposes.
+        
+          Set visually hidden label for accessibility purposes.
+        
       
     
   
diff --git a/packages/docs/content/api/CTab.api.mdx b/packages/docs/content/api/CTab.api.mdx
index 6ead7a6c..1d298ded 100644
--- a/packages/docs/content/api/CTab.api.mdx
+++ b/packages/docs/content/api/CTab.api.mdx
@@ -21,7 +21,9 @@ import CTab from '@coreui/react/src/components/tabs/CTab'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         disabled#
@@ -29,7 +31,9 @@ import CTab from '@coreui/react/src/components/tabs/CTab'
         {`boolean`}
       
       
-        Toggle the disabled state for the component.
+        
+          Toggle the disabled state for the component.
+        
       
       
         itemKey#
@@ -37,7 +41,9 @@ import CTab from '@coreui/react/src/components/tabs/CTab'
         {`string`}, {`number`}
       
       
-        Item key.
+        
+          Item key.
+        
       
     
   
diff --git a/packages/docs/content/api/CTabContent.api.mdx b/packages/docs/content/api/CTabContent.api.mdx
index 76755621..c57cbae0 100644
--- a/packages/docs/content/api/CTabContent.api.mdx
+++ b/packages/docs/content/api/CTabContent.api.mdx
@@ -21,7 +21,9 @@ import CTabContent from '@coreui/react/src/components/tabs/CTabContent'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
     
   
diff --git a/packages/docs/content/api/CTabList.api.mdx b/packages/docs/content/api/CTabList.api.mdx
index 59fe0074..176e4fb7 100644
--- a/packages/docs/content/api/CTabList.api.mdx
+++ b/packages/docs/content/api/CTabList.api.mdx
@@ -21,7 +21,9 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         layout#
@@ -29,7 +31,9 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList'
         {`"fill"`}, {`"justified"`}
       
       
-        Specify a layout type for component.
+        
+          Specify a layout type for component.
+        
       
       
         variant#
@@ -37,7 +41,9 @@ import CTabList from '@coreui/react/src/components/tabs/CTabList'
         {`"pills"`}, {`"tabs"`}, {`"underline"`}, {`"underline-border"`}
       
       
-        Set the nav variant to tabs or pills.
+        
+          Set the nav variant to tabs or pills.
+        
       
     
   
diff --git a/packages/docs/content/api/CTabPane.api.mdx b/packages/docs/content/api/CTabPane.api.mdx
index 96326f15..4d401d33 100644
--- a/packages/docs/content/api/CTabPane.api.mdx
+++ b/packages/docs/content/api/CTabPane.api.mdx
@@ -21,7 +21,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         onHide#
@@ -29,7 +31,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane'
         {`() => void`}
       
       
-        Callback fired when the component requests to be hidden.
+        
+          Callback fired when the component requests to be hidden.
+        
       
       
         onShow#
@@ -37,7 +41,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane'
         {`() => void`}
       
       
-        Callback fired when the component requests to be shown.
+        
+          Callback fired when the component requests to be shown.
+        
       
       
         transition#5.1.0+
@@ -45,7 +51,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane'
         {`boolean`}
       
       
-        Enable fade in and fade out transition.
+        
+          Enable fade in and fade out transition.
+        
       
       
         visible#
@@ -53,7 +61,9 @@ import CTabPane from '@coreui/react/src/components/tabs/CTabPane'
         {`boolean`}
       
       
-        Toggle the visibility of component.
+        
+          Toggle the visibility of component.
+        
       
     
   
diff --git a/packages/docs/content/api/CTabPanel.api.mdx b/packages/docs/content/api/CTabPanel.api.mdx
index db4df643..f8f092dd 100644
--- a/packages/docs/content/api/CTabPanel.api.mdx
+++ b/packages/docs/content/api/CTabPanel.api.mdx
@@ -21,7 +21,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         itemKey#
@@ -29,7 +31,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
         {`string`}, {`number`}
       
       
-        Item key.
+        
+          Item key.
+        
       
       
         onHide#
@@ -37,7 +41,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
         {`() => void`}
       
       
-        Callback fired when the component requests to be hidden.
+        
+          Callback fired when the component requests to be hidden.
+        
       
       
         onShow#
@@ -45,7 +51,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
         {`() => void`}
       
       
-        Callback fired when the component requests to be shown.
+        
+          Callback fired when the component requests to be shown.
+        
       
       
         transition#
@@ -53,7 +61,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
         {`boolean`}
       
       
-        Enable fade in and fade out transition.
+        
+          Enable fade in and fade out transition.
+        
       
       
         visible#
@@ -61,7 +71,9 @@ import CTabPanel from '@coreui/react/src/components/tabs/CTabPanel'
         {`boolean`}
       
       
-        Toggle the visibility of component.
+        
+          Toggle the visibility of component.
+        
       
     
   
diff --git a/packages/docs/content/api/CTable.api.mdx b/packages/docs/content/api/CTable.api.mdx
index b1f101b4..e8d0598b 100644
--- a/packages/docs/content/api/CTable.api.mdx
+++ b/packages/docs/content/api/CTable.api.mdx
@@ -21,7 +21,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`string`}
       
       
-        Set the vertical aligment.
+        
+          Set the vertical aligment.
+        
       
       
         borderColor#
@@ -29,7 +31,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the border color of the component to one of CoreUI’s themed colors.
+        
+          Sets the border color of the component to one of CoreUI’s themed colors.
+        
       
       
         bordered#
@@ -37,7 +41,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`boolean`}
       
       
-        Add borders on all sides of the table and cells.
+        
+          Add borders on all sides of the table and cells.
+        
       
       
         borderless#
@@ -45,7 +51,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`boolean`}
       
       
-        Remove borders on all sides of the table and cells.
+        
+          Remove borders on all sides of the table and cells.
+        
       
       
         caption#
@@ -53,7 +61,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`string`}
       
       
-        Put the caption on the top if you set {`caption="top"`} of the table or set the text of the table caption.
+        
+          Put the caption on the top if you set {`caption="top"`} of the table or set the text of the table caption.
+        
       
       
         captionTop#4.3.0+
@@ -61,7 +71,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`string`}
       
       
-        Set the text of the table caption and the caption on the top of the table.
+        
+          Set the text of the table caption and the caption on the top of the table.
+        
       
       
         className#
@@ -69,7 +81,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         color#
@@ -77,7 +91,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the color context of the component to one of CoreUI’s themed colors.
+        
+          Sets the color context of the component to one of CoreUI’s themed colors.
+        
       
       
         columns#4.3.0+
@@ -85,7 +101,18 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`(string | Column)[]`}
       
       
-        Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')

In columns prop each array item represents one column. Item might be specified in two ways:
String: each item define column name equal to item value.
Object: item is object with following keys available as column configuration:
- key (required)(String) - define column name equal to item key.
- label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
- _props (Object) - adds classes to all cels in column, ex. {`_props: { scope: 'col', className: 'custom-class' }`},
- _style (Object) - adds styles to the column header (useful for defining widths)
+        
+          Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')
+In columns prop each array item represents one column. Item might be specified in two ways:

+String: each item define column name equal to item value.

+Object: item is object with following keys available as column configuration:
+
+key (required)(String) - define column name equal to item key.
+label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
+_props (Object) - adds classes to all cels in column, ex. {`_props: { scope: 'col', className: 'custom-class' }`},
+_style (Object) - adds styles to the column header (useful for defining widths)
+
+        
       
       
         footer#4.3.0+
@@ -93,7 +120,13 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`(string | FooterItem)[]`}
       
       
-        Array of objects or strings, where each element represents one cell in the table footer.

Example items:
{`['FooterCell', 'FooterCell', 'FooterCell']`}
or
{`[{ label: 'FooterCell', _props: { color: 'success' }, ...]`}
+        
+          Array of objects or strings, where each element represents one cell in the table footer.
+Example items:

+{`['FooterCell', 'FooterCell', 'FooterCell']`}

+or

+{`[{ label: 'FooterCell', _props: { color: 'success' }, ...]`}
+        
       
       
         hover#
@@ -101,7 +134,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`boolean`}
       
       
-        Enable a hover state on table rows within a {`\`}.
+        
+          Enable a hover state on table rows within a {``}.
+        
       
       
         items#4.3.0+
@@ -109,7 +144,11 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`Item[]`}
       
       
-        Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.

Example item:
{`{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`}
+        
+          Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by 'props' key and to single cell by 'cellProps'.
+Example item:

+{`{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`}
+        
       
       
         responsive#
@@ -117,7 +156,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
       
       
-        Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
+        
+          Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
+        
       
       
         small#
@@ -125,7 +166,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`boolean`}
       
       
-        Make table more compact by cutting all cell {`padding`} in half.
+        
+          Make table more compact by cutting all cell {`padding`} in half.
+        
       
       
         striped#
@@ -133,7 +176,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`boolean`}
       
       
-        Add zebra-striping to any table row within the {`\`}.
+        
+          Add zebra-striping to any table row within the {``}.
+        
       
       
         stripedColumns#4.3.0+
@@ -141,7 +186,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`boolean`}
       
       
-        Add zebra-striping to any table column.
+        
+          Add zebra-striping to any table column.
+        
       
       
         tableFootProps#4.3.0+
@@ -149,7 +196,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`CTableFootProps`}
       
       
-        Properties that will be passed to the table footer component.
+        
+          Properties that will be passed to the table footer component.
+        
       
       
         tableHeadProps#4.3.0+
@@ -157,7 +206,9 @@ import CTable from '@coreui/react/src/components/table/CTable'
         {`CTableHeadProps`}
       
       
-        Properties that will be passed to the table head component.
+        
+          Properties that will be passed to the table head component.
+        
       
     
   
diff --git a/packages/docs/content/api/CTableBody.api.mdx b/packages/docs/content/api/CTableBody.api.mdx
index 8bfc35ea..fa015ba9 100644
--- a/packages/docs/content/api/CTableBody.api.mdx
+++ b/packages/docs/content/api/CTableBody.api.mdx
@@ -21,7 +21,9 @@ import CTableBody from '@coreui/react/src/components/table/CTableBody'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         color#
@@ -29,7 +31,9 @@ import CTableBody from '@coreui/react/src/components/table/CTableBody'
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the color context of the component to one of CoreUI’s themed colors.
+        
+          Sets the color context of the component to one of CoreUI’s themed colors.
+        
       
     
   
diff --git a/packages/docs/content/api/CTableCaption.api.mdx b/packages/docs/content/api/CTableCaption.api.mdx
index b98bd598..73372f90 100644
--- a/packages/docs/content/api/CTableCaption.api.mdx
+++ b/packages/docs/content/api/CTableCaption.api.mdx
@@ -5,16 +5,6 @@ import { CTableCaption } from '@coreui/react'
 import CTableCaption from '@coreui/react/src/components/table/CTableCaption'
 ```
 
-
-  
-    
-      
-        
-        
-        
-      
-    
-    Property Default Type

     
   
 
diff --git a/packages/docs/content/api/CTableDataCell.api.mdx b/packages/docs/content/api/CTableDataCell.api.mdx
index 1c8c79ac..5c133fbd 100644
--- a/packages/docs/content/api/CTableDataCell.api.mdx
+++ b/packages/docs/content/api/CTableDataCell.api.mdx
@@ -21,7 +21,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'
         {`boolean`}
       
       
-        Highlight a table row or cell.
+        
+          Highlight a table row or cell.
+        
       
       
         align#
@@ -29,7 +31,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'
         {`string`}
       
       
-        Set the vertical aligment.
+        
+          Set the vertical aligment.
+        
       
       
         className#
@@ -37,7 +41,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         color#
@@ -45,7 +51,9 @@ import CTableDataCell from '@coreui/react/src/components/table/CTableDataCell'
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the color context of the component to one of CoreUI’s themed colors.
+        
+          Sets the color context of the component to one of CoreUI’s themed colors.
+        
       
     
   
diff --git a/packages/docs/content/api/CTableFoot.api.mdx b/packages/docs/content/api/CTableFoot.api.mdx
index 87e1e2c8..005b256f 100644
--- a/packages/docs/content/api/CTableFoot.api.mdx
+++ b/packages/docs/content/api/CTableFoot.api.mdx
@@ -21,7 +21,9 @@ import CTableFoot from '@coreui/react/src/components/table/CTableFoot'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         color#
@@ -29,7 +31,9 @@ import CTableFoot from '@coreui/react/src/components/table/CTableFoot'
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the color context of the component to one of CoreUI’s themed colors.
+        
+          Sets the color context of the component to one of CoreUI’s themed colors.
+        
       
     
   
diff --git a/packages/docs/content/api/CTableHead.api.mdx b/packages/docs/content/api/CTableHead.api.mdx
index 00b9bca3..2d4fdffb 100644
--- a/packages/docs/content/api/CTableHead.api.mdx
+++ b/packages/docs/content/api/CTableHead.api.mdx
@@ -21,7 +21,9 @@ import CTableHead from '@coreui/react/src/components/table/CTableHead'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         color#
@@ -29,7 +31,9 @@ import CTableHead from '@coreui/react/src/components/table/CTableHead'
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the color context of the component to one of CoreUI’s themed colors.
+        
+          Sets the color context of the component to one of CoreUI’s themed colors.
+        
       
     
   
diff --git a/packages/docs/content/api/CTableHeaderCell.api.mdx b/packages/docs/content/api/CTableHeaderCell.api.mdx
index 1e1c963e..8e4a1175 100644
--- a/packages/docs/content/api/CTableHeaderCell.api.mdx
+++ b/packages/docs/content/api/CTableHeaderCell.api.mdx
@@ -21,7 +21,9 @@ import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCel
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         color#
@@ -29,7 +31,9 @@ import CTableHeaderCell from '@coreui/react/src/components/table/CTableHeaderCel
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the color context of the component to one of CoreUI’s themed colors.
+        
+          Sets the color context of the component to one of CoreUI’s themed colors.
+        
       
     
   
diff --git a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx
index ff57b8c7..34bfbfeb 100644
--- a/packages/docs/content/api/CTableResponsiveWrapper.api.mdx
+++ b/packages/docs/content/api/CTableResponsiveWrapper.api.mdx
@@ -21,7 +21,9 @@ import CTableResponsiveWrapper from '@coreui/react/src/components/table/CTableRe
         {`boolean`}, {`"sm"`}, {`"md"`}, {`"lg"`}, {`"xl"`}, {`"xxl"`}
       
       
-        Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
+        
+          Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
+        
       
     
   
diff --git a/packages/docs/content/api/CTableRow.api.mdx b/packages/docs/content/api/CTableRow.api.mdx
index c45094b8..7bd30762 100644
--- a/packages/docs/content/api/CTableRow.api.mdx
+++ b/packages/docs/content/api/CTableRow.api.mdx
@@ -21,7 +21,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow'
         {`boolean`}
       
       
-        Highlight a table row or cell..
+        
+          Highlight a table row or cell..
+        
       
       
         align#
@@ -29,7 +31,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow'
         {`string`}
       
       
-        Set the vertical aligment.
+        
+          Set the vertical aligment.
+        
       
       
         className#
@@ -37,7 +41,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow'
         {`string`}
       
       
-        A string of all className you want applied to the component.
+        
+          A string of all className you want applied to the component.
+        
       
       
         color#
@@ -45,7 +51,9 @@ import CTableRow from '@coreui/react/src/components/table/CTableRow'
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the color context of the component to one of CoreUI’s themed colors.
+        
+          Sets the color context of the component to one of CoreUI’s themed colors.
+        
       
     
   
diff --git a/packages/docs/content/api/CTabs.api.mdx b/packages/docs/content/api/CTabs.api.mdx
index 50d56cae..edade324 100644
--- a/packages/docs/content/api/CTabs.api.mdx
+++ b/packages/docs/content/api/CTabs.api.mdx
@@ -21,7 +21,9 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs'
         {`string`}, {`number`}
       
       
-        The active item key.
+        
+          The active item key.
+        
       
       
         className#
@@ -29,7 +31,9 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         onChange#
@@ -37,7 +41,9 @@ import CTabs from '@coreui/react/src/components/tabs/CTabs'
         {`(value: string | number) => void`}
       
       
-        The callback is fired when the active tab changes.
+        
+          The callback is fired when the active tab changes.
+        
       
     
   
diff --git a/packages/docs/content/api/CToast.api.mdx b/packages/docs/content/api/CToast.api.mdx
index 4c623448..ab94a25f 100644
--- a/packages/docs/content/api/CToast.api.mdx
+++ b/packages/docs/content/api/CToast.api.mdx
@@ -21,7 +21,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
         {`boolean`}
       
       
-        Apply a CSS fade transition to the toast.
+        
+          Apply a CSS fade transition to the toast.
+        
       
       
         autohide#
@@ -29,7 +31,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
         {`boolean`}
       
       
-        Auto hide the toast.
+        
+          Auto hide the toast.
+        
       
       
         className#
@@ -37,7 +41,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         color#
@@ -45,7 +51,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
         {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
       
       
-        Sets the color context of the component to one of CoreUI’s themed colors.
+        
+          Sets the color context of the component to one of CoreUI’s themed colors.
+        
       
       
         delay#
@@ -53,7 +61,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
         {`number`}
       
       
-        Delay hiding the toast (ms).
+        
+          Delay hiding the toast (ms).
+        
       
       
         onClose#
@@ -61,7 +71,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
         {`(index: number) => void`}
       
       
-        Callback fired when the component requests to be closed.
+        
+          Callback fired when the component requests to be closed.
+        
       
       
         onShow#
@@ -69,7 +81,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
         {`(index: number) => void`}
       
       
-        Callback fired when the component requests to be shown.
+        
+          Callback fired when the component requests to be shown.
+        
       
       
         visible#
@@ -77,7 +91,9 @@ import CToast from '@coreui/react/src/components/toast/CToast'
         {`boolean`}
       
       
-        Toggle the visibility of component.
+        
+          Toggle the visibility of component.
+        
       
     
   
diff --git a/packages/docs/content/api/CToastBody.api.mdx b/packages/docs/content/api/CToastBody.api.mdx
index b5c2004f..22ec20e3 100644
--- a/packages/docs/content/api/CToastBody.api.mdx
+++ b/packages/docs/content/api/CToastBody.api.mdx
@@ -21,7 +21,9 @@ import CToastBody from '@coreui/react/src/components/toast/CToastBody'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
     
   
diff --git a/packages/docs/content/api/CToastClose.api.mdx b/packages/docs/content/api/CToastClose.api.mdx
index f08ce983..6b7e855e 100644
--- a/packages/docs/content/api/CToastClose.api.mdx
+++ b/packages/docs/content/api/CToastClose.api.mdx
@@ -21,7 +21,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         {`boolean`}
       
       
-        Toggle the active state for the component.
+        
+          Toggle the active state for the component.
+        
       
       
         as#
@@ -29,7 +31,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         {`(ElementType & string)`}, {`(ElementType & ComponentClass\)`}, {`(ElementType & FunctionComponent\)`}
       
       
-        Component used for the root node. Either a string to use a HTML element or a component.
+        
+          Component used for the root node. Either a string to use a HTML element or a component.
+        
       
       
         className#
@@ -37,7 +41,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         {`string`}
       
       
-        A string of all className you want applied to the base component.
+        
+          A string of all className you want applied to the base component.
+        
       
       
         dark#
@@ -45,7 +51,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         {`boolean`}
       
       
-        Invert the default color.
+        
+          Invert the default color.
+        
       
       
         disabled#
@@ -53,7 +61,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         {`boolean`}
       
       
-        Toggle the disabled state for the component.
+        
+          Toggle the disabled state for the component.
+        
       
       
         href#
@@ -61,7 +71,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         {`string`}
       
       
-        The href attribute specifies the URL of the page the link goes to.
+        
+          The href attribute specifies the URL of the page the link goes to.
+        
       
       
         shape#
@@ -69,7 +81,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         {`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`}
       
       
-        Select the shape of the component.
+        
+          Select the shape of the component.
+        
       
       
         size#
@@ -77,7 +91,9 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         {`"sm"`}, {`"lg"`}
       
       
-        Size the component small or large.
+        
+          Size the component small or large.
+        
       
       
         type#
@@ -85,7 +101,10 @@ import CToastClose from '@coreui/react/src/components/toast/CToastClose'
         {`"button"`}, {`"submit"`}, {`"reset"`}
       
       
-        Specifies the type of button. Always specify the type attribute for the {`\
-

Property	Default	Type
action#	undefined	{`ReactNode`}
Action node for your component.
chart#	undefined	{`ReactNode`}
Chart node for your component.
className#	undefined	{`string`}
A string of all className you want applied to the base component.
color#	undefined	{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`}
Sets the color context of the component to one of CoreUI’s themed colors.
title#	undefined	{`ReactNode`}
Title node for your component.
value#	undefined	{`ReactNode`}
Value node for your component.

customClassNames	Class Name	Description
{className.className}	`.{className.value}`	{`string`}, {`number`}
Determines which accordion item is currently active (expanded) by default. Accepts a number or string corresponding to the {`itemKey`} of the desired accordion item. ...`} />			+ Determines which accordion item is currently active (expanded) by default. +Accepts a number or string corresponding to the {`itemKey`} of the desired accordion item. + ...`} /> +
alwaysOpen#	{`boolean`}
When set to {`true`}, multiple accordion items within the React Accordion can be open simultaneously. This is ideal for scenarios where users need to view multiple sections at once without collapsing others. ...`} />			+ When set to {`true`}, multiple accordion items within the React Accordion can be open simultaneously. +This is ideal for scenarios where users need to view multiple sections at once without collapsing others. + ...`} /> +
className#	{`string`}
Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming. ...`} />			+ Allows you to apply custom CSS classes to the React Accordion for enhanced styling and theming. + ...`} /> +
customClassNames#	{`Partial\<{ ACCORDION: string; ACCORDION_FLUSH: string; }>`}
Allows overriding or extending the default CSS class names used in the component. - {`ACCORDION`}: Base class for the accordion component. - {`ACCORDION_FLUSH`}: Class applied when the {`flush`} prop is set to true, ensuring an edge-to-edge layout. Use this prop to customize the styles of specific parts of the accordion. + Allows overriding or extending the default CSS class names used in the component. + + {`ACCORDION`}: Base class for the accordion component. + {`ACCORDION_FLUSH`}: Class applied when the {`flush`} prop is set to true, ensuring an edge-to-edge layout. + + Use this prop to customize the styles of specific parts of the accordion. + ...`} />
flush#	{`boolean`}
When {`flush`} is set to {`true`}, the React Accordion renders edge-to-edge with its parent container, creating a seamless and modern look ideal for minimalist designs. ...`} />			+ When {`flush`} is set to {`true`}, the React Accordion renders edge-to-edge with its parent container, +creating a seamless and modern look ideal for minimalist designs. + ...`} /> +

CoreUI PRO Component

Support CoreUI Development

Alpha release

@@ -50,6 +97,7 @@ const DocsLayout: FC = ({ children, data, pageContext }) => { {title}

Other frameworks

Other Frameworks

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

First slide label

Second slide label

Third slide label

First slide label

Second slide label

Third slide label

First slide label

Second slide label

Third slide label

First slide label

Second slide label

Third slide label

First slide label

Second slide label

Third slide label

First slide label

Second slide label

Third slide label

List group item heading

List group item heading

List group item heading

List group item heading

List group item heading

List group item heading

React Modal title

Popover in a modal

Tooltips in a modal

Popover in a modal

Tooltips in a modal

Popover in a modal

Tooltips in a modal

React Modal title

Collapsed content

Collapsed content

Collapsed content