@cerberus-design/react 0.19.1 → 0.19.3

package/src/system/primitive-factory.tsx

@@ -2,6 +2,7 @@ import { css, cx } from 'styled-system/css'
 import type { RecipeVariantRecord } from 'styled-system/types'
 import {
   type ComponentType,
+  type ElementType,
   type HTMLAttributes,
   type PropsWithChildren,
 } from 'react'
@@ -36,39 +37,45 @@ export class CerberusPrimitive {
   }
 
   private validateComponent<P extends HTMLAttributes<unknown>>(
-    Component: ComponentType<P>,
+    Component: ComponentType<P> | string,
   ) {
     if (typeof Component !== 'function' && typeof Component !== 'object') {
-      throw new Error('Expected a React component as the first argument.')
+      return false
     }
+    return true
   }
 
   /**
    * Creates a Cerberus component with bare features and no recipe.
    * @param Component - The React component to enhance with Cerberus features.
+   * Can be a string or a component reference.
    * @returns A new React component that applies Cerberus features to the
    * original component.
+   *
    * @example
-   * ```typescript
-   * const { withNoRecipe } = createCerberusPrimitive(button)
-   * const Button = withNoRecipe(RawButton)
+   * ```ts
+   * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)
+   * const Button = withNoRecipe('button')
    * ```
    */
   withNoRecipe = <P extends HTMLAttributes<unknown>>(
-    Component: ComponentType<P>,
+    Component: ComponentType<P> | string,
     options?: WithRecipeOptions,
   ): CerberusPrimitiveEl<P> => {
     const { defaultProps } = options || {}
-
-    this.validateComponent(Component)
+    const El = Component as ComponentType<P> | ElementType
 
     const CerbComponent = (props: PropsWithChildren<P> & WithCss) => {
       const { css: customCss, className, ...nativeProps } = props
       const styles = this.hasStyles(cx(className, css(customCss)))
-      return <Component {...defaultProps} {...styles} {...(nativeProps as P)} />
+      return <El {...defaultProps} {...styles} {...(nativeProps as P)} />
+    }
+
+    if (this.validateComponent(El)) {
+      const ElName = typeof El === 'string' ? El : El.displayName || El.name
+      CerbComponent.displayName = ElName
     }
 
-    CerbComponent.displayName = Component.displayName || Component.name
     return CerbComponent
   }
 
@@ -80,18 +87,23 @@ export class CerberusPrimitive {
    * component.
    */
   withRecipe = <P extends HTMLAttributes<unknown>>(
-    Component: ComponentType<P>,
+    Component: ComponentType<P> | string,
     options?: WithRecipeOptions,
   ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {
     const { defaultProps } = options || {}
-    const recipe = this.recipe as CerberusRecipe
+    const El = Component as ComponentType<P> | ElementType
 
-    this.validateComponent(Component)
+    const recipe = this.recipe as CerberusRecipe
 
     const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {
-      const { css: customCss, className, ...nativeProps } = internalProps
-
-      const [variantOptions] = recipe.splitVariantProps(nativeProps)
+      const {
+        css: customCss,
+        className,
+        ...restOfInternalProps
+      } = internalProps
+
+      const [variantOptions, nativeProps] =
+        recipe.splitVariantProps(restOfInternalProps)
       const recipeStyles = recipe(variantOptions)
 
       return (
@@ -103,7 +115,11 @@ export class CerberusPrimitive {
       )
     }
 
-    CerbComponent.displayName = Component.displayName || Component.name
+    if (this.validateComponent(El)) {
+      const ElName = typeof El === 'string' ? El : El.displayName || El.name
+      CerbComponent.displayName = ElName
+    }
+
     return CerbComponent
   }
 
@@ -120,19 +136,24 @@ export class CerberusPrimitive {
    * ```
    */
   withSlotRecipe = <P extends HTMLAttributes<unknown>>(
-    Component: ComponentType<P>,
+    Component: ComponentType<P> | string,
     slot: keyof RecipeVariantRecord,
     options?: WithRecipeOptions,
   ) => {
     const { defaultProps } = options || {}
-    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>
+    const El = Component as ComponentType<P> | ElementType
 
-    this.validateComponent(Component)
+    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>
 
     const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {
-      const { css: customCss, className, ...nativeProps } = internalProps
-
-      const [variantOptions] = recipe.splitVariantProps(nativeProps)
+      const {
+        css: customCss,
+        className,
+        ...restOfInternalProps
+      } = internalProps
+
+      const [variantOptions, nativeProps] =
+        recipe.splitVariantProps(restOfInternalProps)
       const styles = recipe(variantOptions)
       const slotStyles = styles[slot as keyof typeof styles]
 
@@ -145,7 +166,11 @@ export class CerberusPrimitive {
       )
     }
 
-    CerbComponent.displayName = Component.displayName || Component.name
+    if (this.validateComponent(El)) {
+      const ElName = typeof El === 'string' ? El : El.displayName || El.name
+      CerbComponent.displayName = ElName
+    }
+
     return CerbComponent
   }
 }

package/src/types.ts

@@ -15,6 +15,16 @@ export interface WithCss {
    * In most cases, you should use the `css` prop instead.
    */
   style?: CSSProperties | Record<string, number | string>
+  /**
+   * If true, the component will render as a child as the provided element
+   * passing all the given props to the child.
+   */
+  asChild?: boolean
+  /**
+   * The class name to apply to the component.
+   * Can be a single class name or an array of class names.
+   */
+  className?: string
 }
 
 // types

package/build/modern/chunk-GZ6T3352.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/system/primitive-factory.tsx"],"sourcesContent":["import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react'\nimport type { WithCss } from '../types'\nimport type {\n  CerberusPrimitiveEl,\n  CerberusPrimitiveRecipe,\n  CerberusRecipe,\n  CerberusSlotRecipe,\n  WithRecipeOptions,\n} from './types'\n\n/**\n * This module contains a factory for creating Cerberus primitives.\n * @module @cerberus/core/system/factory\n */\n\nexport class CerberusPrimitive {\n  recipe: CerberusPrimitiveRecipe | null\n\n  constructor(recipe?: CerberusPrimitiveRecipe) {\n    this.recipe = recipe ?? null\n  }\n\n  private hasStyles(styles: string | undefined): Record<string, unknown> {\n    if (styles) {\n      return {\n        className: styles,\n      }\n    }\n    return {}\n  }\n\n  private validateComponent<P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n  ) {\n    if (typeof Component !== 'function' && typeof Component !== 'object') {\n      throw new Error('Expected a React component as the first argument.')\n    }\n  }\n\n  /**\n   * Creates a Cerberus component with bare features and no recipe.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @returns A new React component that applies Cerberus features to the\n   * original component.\n   * @example\n   * ```typescript\n   * const { withNoRecipe } = createCerberusPrimitive(button)\n   * const Button = withNoRecipe(RawButton)\n   * ```\n   */\n  withNoRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P> => {\n    const { defaultProps } = options || {}\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (props: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = props\n      const styles = this.hasStyles(cx(className, css(customCss)))\n      return <Component {...defaultProps} {...styles} {...(nativeProps as P)} />\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with the given recipe.\n   * @param Component - The React component to enhance with the recipe.\n   * @param options - Options for the recipe.\n   * @returns A new React component that applies the recipe to the original\n   * component.\n   */\n  withRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusRecipe\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const recipeStyles = recipe(variantOptions)\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, recipeStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with a slot recipe applied.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @param recipe - The slot recipe to apply to the component.\n   * @returns A new React component that applies Cerberus features and the\n   * specified slot recipe to the original component.\n   * @example\n   * ```typescript\n   * const { withSlotRecipe } = createCerberusPrimitive(field)\n   * const Field = withSlotRecipe(RawField, field)\n   * ```\n   */\n  withSlotRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    slot: keyof RecipeVariantRecord,\n    options?: WithRecipeOptions,\n  ) => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const styles = recipe(variantOptions)\n      const slotStyles = styles[slot as keyof typeof styles]\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, slotStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n}\n"],"mappings":";AAAA,SAAS,KAAK,UAAU;AAmEX;AA9CN,IAAM,oBAAN,MAAwB;AAAA,EAC7B;AAAA,EAEA,YAAY,QAAkC;AAC5C,SAAK,SAAS,UAAU;AAAA,EAC1B;AAAA,EAEQ,UAAU,QAAqD;AACrE,QAAI,QAAQ;AACV,aAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,IACF;AACA,WAAO,CAAC;AAAA,EACV;AAAA,EAEQ,kBACN,WACA;AACA,QAAI,OAAO,cAAc,cAAc,OAAO,cAAc,UAAU;AACpE,YAAM,IAAI,MAAM,mDAAmD;AAAA,IACrE;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,eAAe,CACb,WACA,YAC2B;AAC3B,UAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AAErC,SAAK,kBAAkB,SAAS;AAEhC,UAAM,gBAAgB,CAAC,UAA0C;AAC/D,YAAM,EAAE,KAAK,WAAW,WAAW,GAAG,YAAY,IAAI;AACtD,YAAM,SAAS,KAAK,UAAU,GAAG,WAAW,IAAI,SAAS,CAAC,CAAC;AAC3D,aAAO,oBAAC,aAAW,GAAG,cAAe,GAAG,QAAS,GAAI,aAAmB;AAAA,IAC1E;AAEA,kBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,aAAa,CACX,WACA,YAC+D;AAC/D,UAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AACrC,UAAM,SAAS,KAAK;AAEpB,SAAK,kBAAkB,SAAS;AAEhC,UAAM,gBAAgB,CAAC,kBAAkD;AACvE,YAAM,EAAE,KAAK,WAAW,WAAW,GAAG,YAAY,IAAI;AAEtD,YAAM,CAAC,cAAc,IAAI,OAAO,kBAAkB,WAAW;AAC7D,YAAM,eAAe,OAAO,cAAc;AAE1C,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAI;AAAA,UACL,WAAW,GAAG,WAAW,cAAc,IAAI,SAAS,CAAC;AAAA;AAAA,MACvD;AAAA,IAEJ;AAEA,kBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcA,iBAAiB,CACf,WACA,MACA,YACG;AACH,UAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AACrC,UAAM,SAAS,KAAK;AAEpB,SAAK,kBAAkB,SAAS;AAEhC,UAAM,gBAAgB,CAAC,kBAAkD;AACvE,YAAM,EAAE,KAAK,WAAW,WAAW,GAAG,YAAY,IAAI;AAEtD,YAAM,CAAC,cAAc,IAAI,OAAO,kBAAkB,WAAW;AAC7D,YAAM,SAAS,OAAO,cAAc;AACpC,YAAM,aAAa,OAAO,IAA2B;AAErD,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAI;AAAA,UACL,WAAW,GAAG,WAAW,YAAY,IAAI,SAAS,CAAC;AAAA;AAAA,MACrD;AAAA,IAEJ;AAEA,kBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,WAAO;AAAA,EACT;AACF;","names":[]}