@coreui/react-pro 5.0.0-rc.0 → 5.0.0-rc.1

package/dist/esm/utils/isObjectInArray.js.map

@@ -1 +1 @@
-{"version":3,"file":"isObjectInArray.js","sources":["../../../src/utils/isObjectInArray.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,IAAM,eAAe,GAAG,UAAI,KAAU,EAAE,IAAO,EAAE,MAAqB,EAAA;AAArB,IAAA,IAAA,MAAA,KAAA,KAAA,CAAA,EAAA,EAAA,MAAqB,GAAA,EAAA,CAAA,EAAA;AACpE,IAAA,OAAA,KAAK,CAAC,IAAI,CAAC,UAAC,KAAQ,EAAA;QAClB,IAAI,MAAM,GAAG,IAAI,CAAA;AACjB,QAAA,KAAK,IAAM,GAAG,IAAI,KAAK,EAAE;AACvB,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,EAAE;gBACrD,MAAM,GAAG,KAAK,CAAA;gBACd,MAAK;AACN,aAAA;AACF,SAAA;AAED,QAAA,OAAO,MAAM,CAAA;AACf,KAAC,CAAC,CAAA;AAVF;;;;"}
+{"version":3,"file":"isObjectInArray.js","sources":["../../../src/utils/isObjectInArray.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,IAAM,eAAe,GAAG,UAAI,KAAU,EAAE,IAAO,EAAE,MAAqB,EAAA;AAArB,IAAA,IAAA,MAAA,KAAA,KAAA,CAAA,EAAA,EAAA,MAAqB,GAAA,EAAA,CAAA,EAAA;AACpE,IAAA,OAAA,KAAK,CAAC,IAAI,CAAC,UAAC,KAAQ,EAAA;QAClB,IAAI,MAAM,GAAG,IAAI,CAAA;AACjB,QAAA,KAAK,IAAM,GAAG,IAAI,KAAK,EAAE;AACvB,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,EAAE;gBACrD,MAAM,GAAG,KAAK,CAAA;gBACd,MAAK;aACN;SACF;AAED,QAAA,OAAO,MAAM,CAAA;AACf,KAAC,CAAC,CAAA;AAVF;;;;"}

package/dist/esm/utils/isRTL.js.map

@@ -1 +1 @@
-{"version":3,"file":"isRTL.js","sources":["../../../src/utils/isRTL.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAM,IAAA,KAAK,GAAG,UAAC,OAA6C,EAAA;AAC1D,IAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,GAAG,KAAK,KAAK,EAAE;AAC7E,QAAA,OAAO,IAAI,CAAA;AACZ,KAAA;AAED,IAAA,IAAI,OAAO,EAAE;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;AAC/C,KAAA;AAED,IAAA,OAAO,KAAK,CAAA;AACd;;;;"}
+{"version":3,"file":"isRTL.js","sources":["../../../src/utils/isRTL.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAM,IAAA,KAAK,GAAG,UAAC,OAA6C,EAAA;AAC1D,IAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,GAAG,KAAK,KAAK,EAAE;AAC7E,QAAA,OAAO,IAAI,CAAA;KACZ;IAED,IAAI,OAAO,EAAE;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;KAC/C;AAED,IAAA,OAAO,KAAK,CAAA;AACd;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "5.0.0-rc.0",
+  "version": "5.0.0-rc.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -41,7 +41,7 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui-pro": "^5.0.0-rc.0",
+    "@coreui/coreui-pro": "^5.0.0-rc.1",
     "@popperjs/core": "^2.11.8",
     "prop-types": "^15.8.1"
   },
@@ -49,12 +49,12 @@
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.0",
-    "@types/jest": "^29.5.8",
-    "@types/react": "18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@types/react-transition-group": "^4.4.9",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.11",
+    "@types/react": "18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-transition-group": "^4.4.10",
     "classnames": "^2.3.2",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
@@ -63,10 +63,10 @@
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "rollup": "^4.4.1",
+    "rollup": "^4.9.1",
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "react": ">=17",

package/src/components/alert/CAlertHeading.tsx

@@ -2,31 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CAlertHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
   /**
-   * A string of all className you want applied to the base component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the base component.
    */
-  component?: string | ElementType
+  className?: string
 }
 
-export const CAlertHeading = forwardRef<HTMLHeadingElement, CAlertHeadingProps>(
-  ({ children, className, component: Component = 'h4', ...rest }, ref) => {
-    return (
-      <Component className={classNames('alert-heading', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+export const CAlertHeading: PolymorphicRefForwardingComponent<'h4', CAlertHeadingProps> =
+  forwardRef<HTMLHeadingElement, CAlertHeadingProps>(
+    ({ children, as: Component = 'h4', className, ...rest }, ref) => {
+      return (
+        <Component className={classNames('alert-heading', className)} {...rest} ref={ref}>
+          {children}
+        </Component>
+      )
+    },
+  )
 
 CAlertHeading.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CAlertHeading.displayName = 'CAlertHeading'

package/src/components/alert/__tests__/CAlertHeading.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CAlertHeading component', async () => {
 
 test('CAlertHeading customize', async () => {
   const { container } = render(
-    <CAlertHeading component="h3" className="bazinga">
+    <CAlertHeading as="h3" className="bazinga">
       Test
     </CAlertHeading>,
   )

package/src/components/badge/CBadge.tsx

@@ -2,10 +2,15 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { colorPropType, gradientsPropType, shapePropType, textColorsPropType } from '../../props'
 import type { Colors, Gradients, Shapes, TextColors } from '../../types'
 
 export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanElement> {
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the component.
    */
@@ -16,10 +21,6 @@ export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanEle
    * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-gradient' | 'secondary-gradient' | 'success-gradient' | 'danger-gradient' | 'warning-gradient' | 'info-gradient' | 'dark-gradient' | 'light-gradient' | string
    */
   color?: Colors | Gradients
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: string | ElementType
   /**
    * Position badge in one of the corners of a link or button.
    */
@@ -41,13 +42,16 @@ export interface CBadgeProps extends HTMLAttributes<HTMLDivElement | HTMLSpanEle
    */
   textColor?: TextColors
 }
-export const CBadge = forwardRef<HTMLDivElement | HTMLSpanElement, CBadgeProps>(
+export const CBadge: PolymorphicRefForwardingComponent<'span', CBadgeProps> = forwardRef<
+  HTMLDivElement | HTMLSpanElement,
+  CBadgeProps
+>(
   (
     {
       children,
+      as: Component = 'span',
       className,
       color,
-      component: Component = 'span',
       position,
       shape,
       size,
@@ -83,10 +87,10 @@ export const CBadge = forwardRef<HTMLDivElement | HTMLSpanElement, CBadgeProps>(
 )
 
 CBadge.propTypes = {
+  as: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
   color: PropTypes.oneOfType([colorPropType, gradientsPropType]),
-  component: PropTypes.string,
   position: PropTypes.oneOf(['top-start', 'top-end', 'bottom-end', 'bottom-start']),
   shape: shapePropType,
   size: PropTypes.oneOf(['sm']),

package/src/components/badge/__tests__/CBadge.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CBadge component', async () => {
 
 test('CBadge customize', async () => {
   const { container } = render(
-    <CBadge className="bazinga" color="warning" component="div" shape="rounded" textColor="white">
+    <CBadge className="bazinga" color="warning" as="div" shape="rounded" textColor="white">
       Test
     </CBadge>,
   )

package/src/components/button/CButton.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames'
 
 import { CLink, CLinkProps } from '../link/CLink'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { colorPropType } from '../../props'
 import type { Colors, Shapes } from '../../types'
 
@@ -12,6 +13,10 @@ export interface CButtonProps extends Omit<CLinkProps, 'size'> {
    * Toggle the active state for the component.
    */
   active?: boolean
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the base component.
    */
@@ -22,10 +27,6 @@ export interface CButtonProps extends Omit<CLinkProps, 'size'> {
    * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
    */
   color?: Colors
-  /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
-   */
-  component?: string | ElementType
   /**
    * Toggle the disabled state for the component.
    */
@@ -59,24 +60,17 @@ export interface CButtonProps extends Omit<CLinkProps, 'size'> {
   variant?: 'outline' | 'ghost'
 }
 
-export const CButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, CButtonProps>(
+export const CButton: PolymorphicRefForwardingComponent<'button', CButtonProps> = forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  CButtonProps
+>(
   (
-    {
-      children,
-      className,
-      color,
-      component = 'button',
-      shape,
-      size,
-      type = 'button',
-      variant,
-      ...rest
-    },
+    { children, as = 'button', className, color, shape, size, type = 'button', variant, ...rest },
     ref,
   ) => {
     return (
       <CLink
-        component={rest.href ? 'a' : component}
+        as={rest.href ? 'a' : as}
         {...(!rest.href && { type: type })}
         className={classNames(
           'btn',
@@ -95,10 +89,10 @@ export const CButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, CButton
 )
 
 CButton.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
   color: colorPropType,
-  component: PropTypes.elementType,
   shape: PropTypes.string,
   size: PropTypes.oneOf(['sm', 'lg']),
   type: PropTypes.oneOf(['button', 'submit', 'reset']),

package/src/components/button/__tests__/CButton.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CButton component', async () => {
 
 test('CButton customize witch href', async () => {
   const { container } = render(
-    <CButton color="primary" component="span" href="/bazinga">
+    <CButton color="primary" as="span" href="/bazinga">
       Test
     </CButton>,
   )
@@ -23,7 +23,7 @@ test('CButton customize', async () => {
       active={true}
       className="bazinga"
       color="warning"
-      component="span"
+      as="span"
       disabled={true}
       role="bazinga"
       shape="rounded"

package/src/components/calendar/CCalendar.tsx

@@ -122,7 +122,7 @@ export interface CCalendarProps {
   /**
    * Set whether to display week numbers in the calendar.
    *
-   * @since 5.0.0-rc.0
+   * @since 5.0.0-rc.1
    */
   showWeekNumber?: boolean
   /**
@@ -132,7 +132,7 @@ export interface CCalendarProps {
   /**
    * Specify the type of date selection as day, week, month, or year.
    *
-   * @since 5.0.0-rc.0
+   * @since 5.0.0-rc.1
    */
   selectionType?: 'day' | 'week' | 'month' | 'year'
   /**
@@ -148,7 +148,7 @@ export interface CCalendarProps {
   /**
    * Label displayed over week numbers in the calendar.
    *
-   * @since 5.0.0-rc.0
+   * @since 5.0.0-rc.1
    */
   weekNumbersLabel?: string
   /**
@@ -256,8 +256,10 @@ const Calendar = (props: {
                   {typeof weekdayFormat === 'function'
                     ? weekdayFormat(date)
                     : typeof weekdayFormat === 'string'
-                    ? date.toLocaleDateString(locale, { weekday: weekdayFormat })
-                    : date.toLocaleDateString(locale, { weekday: 'long' }).slice(0, weekdayFormat)}
+                      ? date.toLocaleDateString(locale, { weekday: weekdayFormat })
+                      : date
+                          .toLocaleDateString(locale, { weekday: 'long' })
+                          .slice(0, weekdayFormat)}
                 </div>
               </th>
             ))}
@@ -379,7 +381,7 @@ const Calendar = (props: {
                         range: isDateInRange(date, startDate, endDate),
                       })}
                       key={idx}
-                      tabIndex={!isDisabled ? 0 : -1}
+                      tabIndex={isDisabled ? -1 : 0}
                       {...(!isDisabled && {
                         onBlur: () => onCalendarMouseLeave(),
                         onClick: () => onCalendarClick(date),
@@ -416,7 +418,7 @@ const Calendar = (props: {
                         range: isDateInRange(date, startDate, endDate),
                       })}
                       key={idx}
-                      tabIndex={!isDisabled ? 0 : -1}
+                      tabIndex={isDisabled ? -1 : 0}
                       {...(!isDisabled && {
                         onBlur: () => onCalendarMouseLeave(),
                         onClick: () => onCalendarClick(date),
@@ -777,7 +779,7 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
         const list: HTMLElement[] = [].concat(
           ...Element.prototype.querySelectorAll.call(
             calendarRef.current,
-            selectionType === 'week' ? 'tr[tabindex="0"]' : 'td.current',
+            selectionType === 'week' ? 'tr[tabindex="0"]' : 'td[tabindex="0"]',
           ),
         )
 
@@ -823,19 +825,19 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
               ),
             )
 
-            if (_list.length && event.key === 'ArrowRight') {
+            if (_list.length > 0 && event.key === 'ArrowRight') {
               _list[0].focus()
             }
 
-            if (_list.length && event.key === 'ArrowLeft') {
+            if (_list.length > 0 && event.key === 'ArrowLeft') {
               _list[_list.length - 1].focus()
             }
 
-            if (_list.length && event.key === 'ArrowDown') {
+            if (_list.length > 0 && event.key === 'ArrowDown') {
               _list[gap['ArrowDown'] - (list.length - index)].focus()
             }
 
-            if (_list.length && event.key === 'ArrowUp') {
+            if (_list.length > 0 && event.key === 'ArrowUp') {
               _list[_list.length - (Math.abs(gap['ArrowUp']) + 1 - (index + 1))].focus()
             }
           }, 1)
@@ -848,7 +850,11 @@ export const CCalendar = forwardRef<HTMLDivElement, CCalendarProps>(
           return
         }
 
-        for (let i = index; i < list.length; event.key === 'ArrowRight' || event.key === 'ArrowDown'? i++ : i--) {
+        for (
+          let i = index;
+          i < list.length;
+          event.key === 'ArrowRight' || event.key === 'ArrowDown' ? i++ : i--
+        ) {
           if (list[i + gap[event.key]].tabIndex === 0) {
             list[i + gap[event.key]].focus()
             break

package/src/components/card/CCardHeader.tsx

@@ -2,31 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CCardHeaderProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * A string of all className you want applied to the base component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the base component.
    */
-  component?: string | ElementType
+  className?: string
 }
 
-export const CCardHeader = forwardRef<HTMLDivElement, CCardHeaderProps>(
-  ({ children, component: Component = 'div', className, ...rest }, ref) => {
-    return (
-      <Component className={classNames('card-header', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+export const CCardHeader: PolymorphicRefForwardingComponent<'div', CCardHeaderProps> = forwardRef<
+  HTMLDivElement,
+  CCardHeaderProps
+>(({ children, as: Component = 'div', className, ...rest }, ref) => {
+  return (
+    <Component className={classNames('card-header', className)} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+})
 
 CCardHeader.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CCardHeader.displayName = 'CCardHeader'

package/src/components/card/CCardImage.tsx

@@ -2,26 +2,28 @@ import React, { ElementType, forwardRef, ImgHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CCardImageProps
   extends ImgHTMLAttributes<HTMLImageElement | HTMLOrSVGElement | HTMLOrSVGImageElement> {
   /**
-   * A string of all className you want applied to the base component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the base component.
    */
-  component?: string | ElementType
+  className?: string
   /**
    * Optionally orientate the image to the top, bottom, or make it overlaid across the card.
    */
   orientation?: 'top' | 'bottom'
 }
 
-export const CCardImage = forwardRef<
+export const CCardImage: PolymorphicRefForwardingComponent<'img', CCardImageProps> = forwardRef<
   HTMLImageElement | HTMLOrSVGElement | HTMLOrSVGImageElement,
   CCardImageProps
->(({ children, className, component: Component = 'img', orientation, ...rest }, ref) => {
+>(({ children, as: Component = 'img', className, orientation, ...rest }, ref) => {
   return (
     <Component
       className={classNames(orientation ? `card-img-${orientation}` : 'card-img', className)}
@@ -34,9 +36,9 @@ export const CCardImage = forwardRef<
 })
 
 CCardImage.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
   orientation: PropTypes.oneOf(['top', 'bottom']),
 }
 

package/src/components/card/CCardSubtitle.tsx

@@ -2,30 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CCardSubtitleProps extends HTMLAttributes<HTMLHeadingElement> {
   /**
-   * A string of all className you want applied to the component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the component.
    */
-  component?: string | ElementType
+  className?: string
 }
-export const CCardSubtitle = forwardRef<HTMLHeadingElement, CCardSubtitleProps>(
-  ({ children, component: Component = 'h6', className, ...rest }, ref) => {
-    return (
-      <Component className={classNames('card-subtitle', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+
+export const CCardSubtitle: PolymorphicRefForwardingComponent<'h6', CCardSubtitleProps> =
+  forwardRef<HTMLHeadingElement, CCardSubtitleProps>(
+    ({ children, as: Component = 'h6', className, ...rest }, ref) => {
+      return (
+        <Component className={classNames('card-subtitle', className)} {...rest} ref={ref}>
+          {children}
+        </Component>
+      )
+    },
+  )
 
 CCardSubtitle.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CCardSubtitle.displayName = 'CCardSubtitle'

package/src/components/card/CCardText.tsx

@@ -2,31 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CCardTextProps extends HTMLAttributes<HTMLParagraphElement> {
   /**
-   * A string of all className you want applied to the component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the component.
    */
-  component?: string | ElementType
+  className?: string
 }
 
-export const CCardText = forwardRef<HTMLParagraphElement, CCardTextProps>(
-  ({ children, component: Component = 'p', className, ...rest }, ref) => {
-    return (
-      <Component className={classNames('card-text', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+export const CCardText: PolymorphicRefForwardingComponent<'p', CCardTextProps> = forwardRef<
+  HTMLParagraphElement,
+  CCardTextProps
+>(({ children, as: Component = 'p', className, ...rest }, ref) => {
+  return (
+    <Component className={classNames('card-text', className)} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+})
 
 CCardText.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CCardText.displayName = 'CCardText'

package/src/components/card/CCardTitle.tsx

@@ -2,31 +2,34 @@ import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CCardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
   /**
-   * A string of all className you want applied to the component.
+   * Component used for the root node. Either a string to use a HTML element or a component.
    */
-  className?: string
+  as?: ElementType
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * A string of all className you want applied to the component.
    */
-  component?: string | ElementType
+  className?: string
 }
 
-export const CCardTitle = forwardRef<HTMLHeadingElement, CCardTitleProps>(
-  ({ children, component: Component = 'h5', className, ...rest }, ref) => {
-    return (
-      <Component className={classNames('card-title', className)} {...rest} ref={ref}>
-        {children}
-      </Component>
-    )
-  },
-)
+export const CCardTitle: PolymorphicRefForwardingComponent<'h5', CCardTitleProps> = forwardRef<
+  HTMLHeadingElement,
+  CCardTitleProps
+>(({ children, as: Component = 'h5', className, ...rest }, ref) => {
+  return (
+    <Component className={classNames('card-title', className)} {...rest} ref={ref}>
+      {children}
+    </Component>
+  )
+})
 
 CCardTitle.propTypes = {
+  as: PropTypes.elementType,
   children: PropTypes.node,
   className: PropTypes.string,
-  component: PropTypes.elementType,
 }
 
 CCardTitle.displayName = 'CCardTitle'

package/src/components/card/__tests__/CCardGroup.spec.tsx

@@ -30,7 +30,7 @@ test('CCardGroup full example', async () => {
   const { container } = render(
     <CCardGroup className="bazinga">
       <CCard>
-        <CCardImage component="svg">Image</CCardImage>
+        <CCardImage as="svg">Image</CCardImage>
         <CCardHeader>Header</CCardHeader>
         <CCardBody>
           <CCardTitle>Title</CCardTitle>

package/src/components/card/__tests__/CCardHeader.spec.tsx

@@ -10,7 +10,7 @@ test('loads and displays CCardHeader component', async () => {
 
 test('CCardHeader customize', async () => {
   const { container } = render(
-    <CCardHeader className="bazinga" component="h3">
+    <CCardHeader className="bazinga" as="h3">
       Test
     </CCardHeader>,
   )