@cerberus-design/react 0.19.0 → 0.19.2

package/src/system/primitive-factory.tsx

@@ -89,9 +89,14 @@ export class CerberusPrimitive {
     this.validateComponent(Component)
 
     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 (
@@ -130,9 +135,14 @@ export class CerberusPrimitive {
     this.validateComponent(Component)
 
     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]
 

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":[]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/system/factory.ts","../../src/system/index.ts"],"sourcesContent":["import { ark } from '@ark-ui/react/factory'\nimport { createCerberusPrimitive } from './index'\nimport type { ComponentType } from 'react'\n\nfunction cerberusFactory<T extends Record<string, unknown>>(\n  component: keyof typeof ark,\n  defaultProps?: T,\n) {\n  const { withNoRecipe } = createCerberusPrimitive()\n  const arkComponent = ark[component] as ComponentType\n\n  if (arkComponent) {\n    return withNoRecipe(arkComponent, { defaultProps: defaultProps ?? {} })\n  }\n\n  throw new Error(\n    `Component \"${String(component)}\" is not a valid Cerberus component. Please check the component name.`,\n  )\n}\n\nconst cache = new Map()\n\n// Create a proxy that handles both function calls and property access\nexport const cerberusFactoryProxy = new Proxy(cerberusFactory, {\n  apply(target, thisArg, argArray) {\n    // Handle function calls like cerberus('button')\n    // @ts-expect-error: Ignore type error for dynamic property access\n    return target.apply(thisArg, argArray)\n  },\n  get(_target, el: keyof typeof ark) {\n    // Handle property access like cerberus.button\n    if (!cache.has(el)) {\n      cache.set(el, cerberusFactory(el))\n    }\n    return cache.get(el) as ReturnType<typeof cerberusFactory>\n  },\n})\n","import { CerberusPrimitive } from './primitive-factory'\nimport type { CerberusFactory, CerberusPrimitiveRecipe } from './types'\nimport { cerberusFactoryProxy } from './factory'\n\n/**\n * This module contains the user interface for creating Cerberus primitives.\n * @module @cerberus/core/system/create-cerb-primitive\n */\n\n/**\n * A factory function that creates a Cerberus primitive instance with the given\n * recipe.\n * @param recipe\n * @returns An object with three methods: `withNoRecipe`, `withRecipe`, and `withSlotRecipe` that\n * apply the recipes and special Cerberus helpers like `css`.\n *\n * @example\n * ```tsx\n * const { withRecipe } = createCerberusPrimitive(myCustomRecipe);\n * export const Button = withRecipe(MyCustomButton)\n * ```\n */\nexport function createCerberusPrimitive<T extends CerberusPrimitiveRecipe>(\n  recipe?: T,\n) {\n  return new CerberusPrimitive(recipe)\n}\n\n/**\n * A utility function to access Cerberus components by their name.\n * @param component - The name of the Cerberus component to access.\n * @returns The Cerberus component corresponding to the provided name.\n * @throws An error if the component name is not valid.\n *\n * @example\n * ```tsx\n * import { cerberus } from '@cerberus/react'\n * const Button = cerberus('button')\n *\n * <Button css={{ color: 'blue' }} asChild>\n *  <Link href=\"/some-page\">Click me</Link>\n * </Button>\n * ```\n */\nexport const cerberus = cerberusFactoryProxy as CerberusFactory\n\nexport * from './types'\n"],"mappings":";;;;;AAAA,SAAS,WAAW;;;ACsBb,SAAS,wBACd,QACA;AACA,SAAO,IAAI,kBAAkB,MAAM;AACrC;AAkBO,IAAM,WAAW;;;ADxCxB,SAAS,gBACP,WACA,cACA;AACA,QAAM,EAAE,aAAa,IAAI,wBAAwB;AACjD,QAAM,eAAe,IAAI,SAAS;AAElC,MAAI,cAAc;AAChB,WAAO,aAAa,cAAc,EAAE,cAAc,gBAAgB,CAAC,EAAE,CAAC;AAAA,EACxE;AAEA,QAAM,IAAI;AAAA,IACR,cAAc,OAAO,SAAS,CAAC;AAAA,EACjC;AACF;AAEA,IAAM,QAAQ,oBAAI,IAAI;AAGf,IAAM,uBAAuB,IAAI,MAAM,iBAAiB;AAAA,EAC7D,MAAM,QAAQ,SAAS,UAAU;AAG/B,WAAO,OAAO,MAAM,SAAS,QAAQ;AAAA,EACvC;AAAA,EACA,IAAI,SAAS,IAAsB;AAEjC,QAAI,CAAC,MAAM,IAAI,EAAE,GAAG;AAClB,YAAM,IAAI,IAAI,gBAAgB,EAAE,CAAC;AAAA,IACnC;AACA,WAAO,MAAM,IAAI,EAAE;AAAA,EACrB;AACF,CAAC;","names":[]}