@cerberus-design/react 0.19.2 → 0.20.0

package/build/legacy/components/icon-button/primitives.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/icon-button/primitives.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport { iconButton, type IconButtonVariantProps } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the IconButton component primitives.\n * @module @cerberus-design/react/components/icon-button/primitives\n */\n\nconst { withRecipe } = createCerberusPrimitive(iconButton)\n\n/**\n * The root element of the Button component.\n */\nexport type IconButtonRootProps = CerberusPrimitiveProps<\n  HTMLArkProps<'button'> & IconButtonVariantProps\n>\nexport const IconButtonRoot = withRecipe(ark.button)\n","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 {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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 {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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","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;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAuC;AACvC,qBAAwD;;;ACDxD,iBAAwB;AAmEX;AA9CN,IAAM,oBAAN,MAAwB;AAAA,EAG7B,YAAY,QAAkC;AAF9C;AAkCA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wCAAe,CACb,WACA,YAC2B;AAC3B,YAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AAErC,WAAK,kBAAkB,SAAS;AAEhC,YAAM,gBAAgB,CAAC,UAA0C;AAC/D,cAAM,EAAE,KAAK,WAAW,WAAW,GAAG,YAAY,IAAI;AACtD,cAAM,SAAS,KAAK,cAAU,eAAG,eAAW,gBAAI,SAAS,CAAC,CAAC;AAC3D,eAAO,4CAAC,aAAW,GAAG,cAAe,GAAG,QAAS,GAAI,aAAmB;AAAA,MAC1E;AAEA,oBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,aAAO;AAAA,IACT;AASA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sCAAa,CACX,WACA,YAC+D;AAC/D,YAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AACrC,YAAM,SAAS,KAAK;AAEpB,WAAK,kBAAkB,SAAS;AAEhC,YAAM,gBAAgB,CAAC,kBAAkD;AACvE,cAAM;AAAA,UACJ,KAAK;AAAA,UACL;AAAA,UACA,GAAG;AAAA,QACL,IAAI;AAEJ,cAAM,CAAC,gBAAgB,WAAW,IAChC,OAAO,kBAAkB,mBAAmB;AAC9C,cAAM,eAAe,OAAO,cAAc;AAE1C,eACE;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAI;AAAA,YACL,eAAW,eAAG,WAAW,kBAAc,gBAAI,SAAS,CAAC;AAAA;AAAA,QACvD;AAAA,MAEJ;AAEA,oBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,aAAO;AAAA,IACT;AAcA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0CAAiB,CACf,WACA,MACA,YACG;AACH,YAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AACrC,YAAM,SAAS,KAAK;AAEpB,WAAK,kBAAkB,SAAS;AAEhC,YAAM,gBAAgB,CAAC,kBAAkD;AACvE,cAAM;AAAA,UACJ,KAAK;AAAA,UACL;AAAA,UACA,GAAG;AAAA,QACL,IAAI;AAEJ,cAAM,CAAC,gBAAgB,WAAW,IAChC,OAAO,kBAAkB,mBAAmB;AAC9C,cAAM,SAAS,OAAO,cAAc;AACpC,cAAM,aAAa,OAAO,IAA2B;AAErD,eACE;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAI;AAAA,YACL,eAAW,eAAG,WAAW,gBAAY,gBAAI,SAAS,CAAC;AAAA;AAAA,QACrD;AAAA,MAEJ;AAEA,oBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,aAAO;AAAA,IACT;AAtIE,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;AAqHF;;;AC1IO,SAAS,wBACd,QACA;AACA,SAAO,IAAI,kBAAkB,MAAM;AACrC;;;AFdA,IAAM,EAAE,WAAW,IAAI,wBAAwB,yBAAU;AAQlD,IAAM,iBAAiB,WAAW,mBAAI,MAAM;","names":[]}
+{"version":3,"sources":["../../../../src/components/icon-button/primitives.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport { iconButton, type IconButtonVariantProps } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the IconButton component primitives.\n * @module @cerberus-design/react/components/icon-button/primitives\n */\n\nconst { withRecipe } = createCerberusPrimitive(iconButton)\n\n/**\n * The root element of the Button component.\n */\nexport type IconButtonRootProps = CerberusPrimitiveProps<\n  HTMLArkProps<'button'> & IconButtonVariantProps\n>\nexport const IconButtonRoot = withRecipe(ark.button)\n","import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n  type ComponentType,\n  type ElementType,\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> | string,\n  ) {\n    if (typeof Component !== 'function' && typeof Component !== 'object') {\n      return false\n    }\n    return true\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   * Can be a string or a component reference.\n   * @returns A new React component that applies Cerberus features to the\n   * original component.\n   *\n   * @example\n   * ```ts\n   * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)\n   * const Button = withNoRecipe('button')\n   * ```\n   */\n  withNoRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P> | string,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P> => {\n    const { defaultProps } = options || {}\n    const El = Component as ComponentType<P> | ElementType\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 <El {...defaultProps} {...styles} {...(nativeProps as P)} />\n    }\n\n    if (this.validateComponent(El)) {\n      const ElName = typeof El === 'string' ? El : El.displayName || El.name\n      CerbComponent.displayName = ElName\n    }\n\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> | string,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n    const { defaultProps } = options || {}\n    const El = Component as ComponentType<P> | ElementType\n\n    const recipe = this.recipe as CerberusRecipe\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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    if (this.validateComponent(El)) {\n      const ElName = typeof El === 'string' ? El : El.displayName || El.name\n      CerbComponent.displayName = ElName\n    }\n\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> | string,\n    slot: keyof RecipeVariantRecord,\n    options?: WithRecipeOptions,\n  ) => {\n    const { defaultProps } = options || {}\n    const El = Component as ComponentType<P> | ElementType\n\n    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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    if (this.validateComponent(El)) {\n      const ElName = typeof El === 'string' ? El : El.displayName || El.name\n      CerbComponent.displayName = ElName\n    }\n\n    return CerbComponent\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":"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","names":[]}

package/build/legacy/components/menu/index.cjs

@@ -55,23 +55,28 @@ var CerberusPrimitive = class {
     /**
      * 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')
      * ```
      */
     __publicField(this, "withNoRecipe", (Component, options) => {
       const { defaultProps } = options || {};
-      this.validateComponent(Component);
+      const El = Component;
       const CerbComponent = (props) => {
         const { css: customCss, className, ...nativeProps } = props;
         const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(El, { ...defaultProps, ...styles, ...nativeProps });
       };
-      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;
     });
     /**
@@ -83,8 +88,8 @@ var CerberusPrimitive = class {
      */
     __publicField(this, "withRecipe", (Component, options) => {
       const { defaultProps } = options || {};
+      const El = Component;
       const recipe = this.recipe;
-      this.validateComponent(Component);
       const CerbComponent = (internalProps) => {
         const {
           css: customCss,
@@ -102,7 +107,10 @@ var CerberusPrimitive = class {
           }
         );
       };
-      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;
     });
     /**
@@ -119,8 +127,8 @@ var CerberusPrimitive = class {
      */
     __publicField(this, "withSlotRecipe", (Component, slot, options) => {
       const { defaultProps } = options || {};
+      const El = Component;
       const recipe = this.recipe;
-      this.validateComponent(Component);
       const CerbComponent = (internalProps) => {
         const {
           css: customCss,
@@ -139,7 +147,10 @@ var CerberusPrimitive = class {
           }
         );
       };
-      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;
     });
     this.recipe = recipe ?? null;
@@ -154,8 +165,9 @@ var CerberusPrimitive = class {
   }
   validateComponent(Component) {
     if (typeof Component !== "function" && typeof Component !== "object") {
-      throw new Error("Expected a React component as the first argument.");
+      return false;
     }
+    return true;
   }
 };
 

package/build/legacy/components/menu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/menu/index.ts","../../../../src/components/menu/primitives.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts","../../../../src/components/menu/menu.tsx"],"sourcesContent":["export * from './primitives'\nexport * from './menu'\n","import {\n  Menu as ArkMenu,\n  type MenuRootProps as ArkMenuRootProps,\n  type MenuTriggerProps as ArkMenuTriggerProps,\n  type MenuTriggerItemProps as ArkMenuTriggerItemProps,\n  type MenuIndicatorProps as ArkMenuIndicatorProps,\n  type MenuPositionerProps as ArkMenuPositionerProps,\n  type MenuContentProps as ArkMenuContentProps,\n  type MenuItemProps as ArkMenuItemProps,\n  type MenuItemGroupProps as ArkMenuItemGroupProps,\n  type MenuItemGroupLabelProps as ArkMenuItemGroupLabelProps,\n  type MenuSeparatorProps as ArkMenuSeparatorProps,\n} from '@ark-ui/react'\nimport { menu } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the Menu component primitives.\n * @module @cerberus-design/react/components/menu/primitives\n */\n\nconst { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(menu)\n\n// Root\n\nexport type MenuRootProps = CerberusPrimitiveProps<ArkMenuRootProps>\n// @ts-expect-error this is a workaround for the type mismatch\nexport const MenuRoot = withSlotRecipe<MenuRootProps>(ArkMenu.Root, 'root')\n\n// Trigger\n\nexport type MenuTriggerProps = CerberusPrimitiveProps<ArkMenuTriggerProps>\nexport const MenuTriggerEl = withNoRecipe<MenuTriggerProps>(ArkMenu.Trigger)\n\n// TriggerItem\n\nexport type MenuTriggerItemProps =\n  CerberusPrimitiveProps<ArkMenuTriggerItemProps>\nexport const MenuTriggerItem = withNoRecipe<MenuTriggerItemProps>(\n  ArkMenu.TriggerItem,\n)\n\n// Indicator\n\nexport type MenuIndicatorProps = CerberusPrimitiveProps<ArkMenuIndicatorProps>\nexport const MenuIndicator = withNoRecipe<MenuIndicatorProps>(ArkMenu.Indicator)\n\n// Positioner\n\nexport type MenuPositionerProps = CerberusPrimitiveProps<ArkMenuPositionerProps>\nexport const MenuPositioner = withNoRecipe<MenuPositionerProps>(\n  ArkMenu.Positioner,\n)\n\n// Content\n\nexport type MenuContentProps = CerberusPrimitiveProps<ArkMenuContentProps>\nexport const MenuContentEl = withSlotRecipe<MenuContentProps>(\n  ArkMenu.Content,\n  'content',\n)\n\n// Item\n\nexport type MenuItemProps = CerberusPrimitiveProps<ArkMenuItemProps>\nexport const MenuItemEl = withSlotRecipe<MenuItemProps>(ArkMenu.Item, 'item')\n\n// ItemGroup\n\nexport type MenuItemGroupProps = CerberusPrimitiveProps<ArkMenuItemGroupProps>\nexport const MenuItemGroupEl = withNoRecipe<MenuItemGroupProps>(\n  ArkMenu.ItemGroup,\n)\n\n// ItemGroupLabel\n\nexport type MenuItemGroupLabelProps =\n  CerberusPrimitiveProps<ArkMenuItemGroupLabelProps>\nexport const MenuItemGroupLabelEl = withSlotRecipe<MenuItemGroupLabelProps>(\n  ArkMenu.ItemGroupLabel,\n  'itemGroupLabel',\n)\n\n// Separator\n\nexport type MenuSeparatorProps = CerberusPrimitiveProps<ArkMenuSeparatorProps>\nexport const MenuSeparatorEl = withSlotRecipe<MenuSeparatorProps>(\n  ArkMenu.Separator,\n  'separator',\n)\n","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 {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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 {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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","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","import {\n  MenuContentEl,\n  MenuItemEl,\n  MenuItemGroupEl,\n  MenuItemGroupLabelEl,\n  MenuPositioner,\n  MenuRoot,\n  MenuSeparatorEl,\n  MenuTriggerEl,\n  type MenuContentProps,\n  type MenuTriggerProps,\n} from './primitives'\n\n/**\n * This module contains the Menu named abstractions component.\n * @module @cerberus-design/react/components/menu\n */\n\n/**\n * The root Menu component which controls the menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n *\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>Trigger</MenuTrigger>\n * </Menu>\n */\nexport const Menu = MenuRoot\n\n/**\n * The MenuTrigger component opens/closes the Menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n * </Menu>\n */\nexport function MenuTrigger(props: MenuTriggerProps) {\n  return <MenuTriggerEl {...props} asChild />\n}\n\n/**\n * The MenuContent component is the container for the menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItem value=\"item_1\">Item 1</MenuItem>\n *   <MenuItem value=\"item_2\">Item 2</MenuItem>\n *  </MenuContent>\n * </Menu>\n */\nexport function MenuContent(props: MenuContentProps) {\n  return (\n    <MenuPositioner>\n      <MenuContentEl {...props} />\n    </MenuPositioner>\n  )\n}\n\n/**\n * The MenuItem component is a single item in the menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItem value=\"item_1\">Item 1</MenuItem>\n *   <MenuItem value=\"item_2\">Item 2</MenuItem>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuItem = MenuItemEl\n\n/**\n * The MenuItemGroup component is a group of menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItemGroup>\n *    <MenuItem value=\"item_1\">Item 1</MenuItem>\n *    <MenuItem value=\"item_2\">Item 2</MenuItem>\n *   </MenuItemGroup>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuItemGroup = MenuItemGroupEl\n\n/**\n * The MenuItemGroupLabel component is the label for a group of menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItemGroup>\n *    <MenuItemGroupLabel>Group Label</MenuItemGroupLabel>\n *    <MenuItem value=\"item_1\">Item 1</MenuItem>\n *    <MenuItem value=\"item_2\">Item 2</MenuItem>\n *   </MenuItemGroup>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuGroupLabel = MenuItemGroupLabelEl\n\n/**\n * The MenuSeparator component is a visual divider between menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *    <MenuItemGroup>\n *      <MenuGroupLabel>Group Label</MenuGroupLabel>\n *      <MenuSeparator />\n *      <MenuItem value=\"item_1\">Item 1</MenuItem>\n *      <MenuItem value=\"item_2\">Item 2</MenuItem>\n *    </MenuItemGroup>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuSeparator = MenuSeparatorEl\n"],"mappings":"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","names":["ArkMenu","import_jsx_runtime"]}
+{"version":3,"sources":["../../../../src/components/menu/index.ts","../../../../src/components/menu/primitives.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts","../../../../src/components/menu/menu.tsx"],"sourcesContent":["export * from './primitives'\nexport * from './menu'\n","import {\n  Menu as ArkMenu,\n  type MenuRootProps as ArkMenuRootProps,\n  type MenuTriggerProps as ArkMenuTriggerProps,\n  type MenuTriggerItemProps as ArkMenuTriggerItemProps,\n  type MenuIndicatorProps as ArkMenuIndicatorProps,\n  type MenuPositionerProps as ArkMenuPositionerProps,\n  type MenuContentProps as ArkMenuContentProps,\n  type MenuItemProps as ArkMenuItemProps,\n  type MenuItemGroupProps as ArkMenuItemGroupProps,\n  type MenuItemGroupLabelProps as ArkMenuItemGroupLabelProps,\n  type MenuSeparatorProps as ArkMenuSeparatorProps,\n} from '@ark-ui/react'\nimport { menu } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the Menu component primitives.\n * @module @cerberus-design/react/components/menu/primitives\n */\n\nconst { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(menu)\n\n// Root\n\nexport type MenuRootProps = CerberusPrimitiveProps<ArkMenuRootProps>\n// @ts-expect-error this is a workaround for the type mismatch\nexport const MenuRoot = withSlotRecipe<MenuRootProps>(ArkMenu.Root, 'root')\n\n// Trigger\n\nexport type MenuTriggerProps = CerberusPrimitiveProps<ArkMenuTriggerProps>\nexport const MenuTriggerEl = withNoRecipe<MenuTriggerProps>(ArkMenu.Trigger)\n\n// TriggerItem\n\nexport type MenuTriggerItemProps =\n  CerberusPrimitiveProps<ArkMenuTriggerItemProps>\nexport const MenuTriggerItem = withNoRecipe<MenuTriggerItemProps>(\n  ArkMenu.TriggerItem,\n)\n\n// Indicator\n\nexport type MenuIndicatorProps = CerberusPrimitiveProps<ArkMenuIndicatorProps>\nexport const MenuIndicator = withNoRecipe<MenuIndicatorProps>(ArkMenu.Indicator)\n\n// Positioner\n\nexport type MenuPositionerProps = CerberusPrimitiveProps<ArkMenuPositionerProps>\nexport const MenuPositioner = withNoRecipe<MenuPositionerProps>(\n  ArkMenu.Positioner,\n)\n\n// Content\n\nexport type MenuContentProps = CerberusPrimitiveProps<ArkMenuContentProps>\nexport const MenuContentEl = withSlotRecipe<MenuContentProps>(\n  ArkMenu.Content,\n  'content',\n)\n\n// Item\n\nexport type MenuItemProps = CerberusPrimitiveProps<ArkMenuItemProps>\nexport const MenuItemEl = withSlotRecipe<MenuItemProps>(ArkMenu.Item, 'item')\n\n// ItemGroup\n\nexport type MenuItemGroupProps = CerberusPrimitiveProps<ArkMenuItemGroupProps>\nexport const MenuItemGroupEl = withNoRecipe<MenuItemGroupProps>(\n  ArkMenu.ItemGroup,\n)\n\n// ItemGroupLabel\n\nexport type MenuItemGroupLabelProps =\n  CerberusPrimitiveProps<ArkMenuItemGroupLabelProps>\nexport const MenuItemGroupLabelEl = withSlotRecipe<MenuItemGroupLabelProps>(\n  ArkMenu.ItemGroupLabel,\n  'itemGroupLabel',\n)\n\n// Separator\n\nexport type MenuSeparatorProps = CerberusPrimitiveProps<ArkMenuSeparatorProps>\nexport const MenuSeparatorEl = withSlotRecipe<MenuSeparatorProps>(\n  ArkMenu.Separator,\n  'separator',\n)\n","import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n  type ComponentType,\n  type ElementType,\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> | string,\n  ) {\n    if (typeof Component !== 'function' && typeof Component !== 'object') {\n      return false\n    }\n    return true\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   * Can be a string or a component reference.\n   * @returns A new React component that applies Cerberus features to the\n   * original component.\n   *\n   * @example\n   * ```ts\n   * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)\n   * const Button = withNoRecipe('button')\n   * ```\n   */\n  withNoRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P> | string,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P> => {\n    const { defaultProps } = options || {}\n    const El = Component as ComponentType<P> | ElementType\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 <El {...defaultProps} {...styles} {...(nativeProps as P)} />\n    }\n\n    if (this.validateComponent(El)) {\n      const ElName = typeof El === 'string' ? El : El.displayName || El.name\n      CerbComponent.displayName = ElName\n    }\n\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> | string,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n    const { defaultProps } = options || {}\n    const El = Component as ComponentType<P> | ElementType\n\n    const recipe = this.recipe as CerberusRecipe\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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    if (this.validateComponent(El)) {\n      const ElName = typeof El === 'string' ? El : El.displayName || El.name\n      CerbComponent.displayName = ElName\n    }\n\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> | string,\n    slot: keyof RecipeVariantRecord,\n    options?: WithRecipeOptions,\n  ) => {\n    const { defaultProps } = options || {}\n    const El = Component as ComponentType<P> | ElementType\n\n    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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    if (this.validateComponent(El)) {\n      const ElName = typeof El === 'string' ? El : El.displayName || El.name\n      CerbComponent.displayName = ElName\n    }\n\n    return CerbComponent\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","import {\n  MenuContentEl,\n  MenuItemEl,\n  MenuItemGroupEl,\n  MenuItemGroupLabelEl,\n  MenuPositioner,\n  MenuRoot,\n  MenuSeparatorEl,\n  MenuTriggerEl,\n  type MenuContentProps,\n  type MenuTriggerProps,\n} from './primitives'\n\n/**\n * This module contains the Menu named abstractions component.\n * @module @cerberus-design/react/components/menu\n */\n\n/**\n * The root Menu component which controls the menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n *\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>Trigger</MenuTrigger>\n * </Menu>\n */\nexport const Menu = MenuRoot\n\n/**\n * The MenuTrigger component opens/closes the Menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n * </Menu>\n */\nexport function MenuTrigger(props: MenuTriggerProps) {\n  return <MenuTriggerEl {...props} asChild />\n}\n\n/**\n * The MenuContent component is the container for the menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItem value=\"item_1\">Item 1</MenuItem>\n *   <MenuItem value=\"item_2\">Item 2</MenuItem>\n *  </MenuContent>\n * </Menu>\n */\nexport function MenuContent(props: MenuContentProps) {\n  return (\n    <MenuPositioner>\n      <MenuContentEl {...props} />\n    </MenuPositioner>\n  )\n}\n\n/**\n * The MenuItem component is a single item in the menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItem value=\"item_1\">Item 1</MenuItem>\n *   <MenuItem value=\"item_2\">Item 2</MenuItem>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuItem = MenuItemEl\n\n/**\n * The MenuItemGroup component is a group of menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItemGroup>\n *    <MenuItem value=\"item_1\">Item 1</MenuItem>\n *    <MenuItem value=\"item_2\">Item 2</MenuItem>\n *   </MenuItemGroup>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuItemGroup = MenuItemGroupEl\n\n/**\n * The MenuItemGroupLabel component is the label for a group of menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItemGroup>\n *    <MenuItemGroupLabel>Group Label</MenuItemGroupLabel>\n *    <MenuItem value=\"item_1\">Item 1</MenuItem>\n *    <MenuItem value=\"item_2\">Item 2</MenuItem>\n *   </MenuItemGroup>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuGroupLabel = MenuItemGroupLabelEl\n\n/**\n * The MenuSeparator component is a visual divider between menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *    <MenuItemGroup>\n *      <MenuGroupLabel>Group Label</MenuGroupLabel>\n *      <MenuSeparator />\n *      <MenuItem value=\"item_1\">Item 1</MenuItem>\n *      <MenuItem value=\"item_2\">Item 2</MenuItem>\n *    </MenuItemGroup>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuSeparator = MenuSeparatorEl\n"],"mappings":"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","names":["ArkMenu","import_jsx_runtime"]}

package/build/legacy/components/menu/menu.cjs

@@ -45,23 +45,28 @@ var CerberusPrimitive = class {
     /**
      * 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')
      * ```
      */
     __publicField(this, "withNoRecipe", (Component, options) => {
       const { defaultProps } = options || {};
-      this.validateComponent(Component);
+      const El = Component;
       const CerbComponent = (props) => {
         const { css: customCss, className, ...nativeProps } = props;
         const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(El, { ...defaultProps, ...styles, ...nativeProps });
       };
-      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;
     });
     /**
@@ -73,8 +78,8 @@ var CerberusPrimitive = class {
      */
     __publicField(this, "withRecipe", (Component, options) => {
       const { defaultProps } = options || {};
+      const El = Component;
       const recipe = this.recipe;
-      this.validateComponent(Component);
       const CerbComponent = (internalProps) => {
         const {
           css: customCss,
@@ -92,7 +97,10 @@ var CerberusPrimitive = class {
           }
         );
       };
-      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;
     });
     /**
@@ -109,8 +117,8 @@ var CerberusPrimitive = class {
      */
     __publicField(this, "withSlotRecipe", (Component, slot, options) => {
       const { defaultProps } = options || {};
+      const El = Component;
       const recipe = this.recipe;
-      this.validateComponent(Component);
       const CerbComponent = (internalProps) => {
         const {
           css: customCss,
@@ -129,7 +137,10 @@ var CerberusPrimitive = class {
           }
         );
       };
-      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;
     });
     this.recipe = recipe ?? null;
@@ -144,8 +155,9 @@ var CerberusPrimitive = class {
   }
   validateComponent(Component) {
     if (typeof Component !== "function" && typeof Component !== "object") {
-      throw new Error("Expected a React component as the first argument.");
+      return false;
     }
+    return true;
   }
 };
 

package/build/legacy/components/menu/menu.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/menu/menu.tsx","../../../../src/components/menu/primitives.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import {\n  MenuContentEl,\n  MenuItemEl,\n  MenuItemGroupEl,\n  MenuItemGroupLabelEl,\n  MenuPositioner,\n  MenuRoot,\n  MenuSeparatorEl,\n  MenuTriggerEl,\n  type MenuContentProps,\n  type MenuTriggerProps,\n} from './primitives'\n\n/**\n * This module contains the Menu named abstractions component.\n * @module @cerberus-design/react/components/menu\n */\n\n/**\n * The root Menu component which controls the menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n *\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>Trigger</MenuTrigger>\n * </Menu>\n */\nexport const Menu = MenuRoot\n\n/**\n * The MenuTrigger component opens/closes the Menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n * </Menu>\n */\nexport function MenuTrigger(props: MenuTriggerProps) {\n  return <MenuTriggerEl {...props} asChild />\n}\n\n/**\n * The MenuContent component is the container for the menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItem value=\"item_1\">Item 1</MenuItem>\n *   <MenuItem value=\"item_2\">Item 2</MenuItem>\n *  </MenuContent>\n * </Menu>\n */\nexport function MenuContent(props: MenuContentProps) {\n  return (\n    <MenuPositioner>\n      <MenuContentEl {...props} />\n    </MenuPositioner>\n  )\n}\n\n/**\n * The MenuItem component is a single item in the menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItem value=\"item_1\">Item 1</MenuItem>\n *   <MenuItem value=\"item_2\">Item 2</MenuItem>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuItem = MenuItemEl\n\n/**\n * The MenuItemGroup component is a group of menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItemGroup>\n *    <MenuItem value=\"item_1\">Item 1</MenuItem>\n *    <MenuItem value=\"item_2\">Item 2</MenuItem>\n *   </MenuItemGroup>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuItemGroup = MenuItemGroupEl\n\n/**\n * The MenuItemGroupLabel component is the label for a group of menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItemGroup>\n *    <MenuItemGroupLabel>Group Label</MenuItemGroupLabel>\n *    <MenuItem value=\"item_1\">Item 1</MenuItem>\n *    <MenuItem value=\"item_2\">Item 2</MenuItem>\n *   </MenuItemGroup>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuGroupLabel = MenuItemGroupLabelEl\n\n/**\n * The MenuSeparator component is a visual divider between menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *    <MenuItemGroup>\n *      <MenuGroupLabel>Group Label</MenuGroupLabel>\n *      <MenuSeparator />\n *      <MenuItem value=\"item_1\">Item 1</MenuItem>\n *      <MenuItem value=\"item_2\">Item 2</MenuItem>\n *    </MenuItemGroup>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuSeparator = MenuSeparatorEl\n","import {\n  Menu as ArkMenu,\n  type MenuRootProps as ArkMenuRootProps,\n  type MenuTriggerProps as ArkMenuTriggerProps,\n  type MenuTriggerItemProps as ArkMenuTriggerItemProps,\n  type MenuIndicatorProps as ArkMenuIndicatorProps,\n  type MenuPositionerProps as ArkMenuPositionerProps,\n  type MenuContentProps as ArkMenuContentProps,\n  type MenuItemProps as ArkMenuItemProps,\n  type MenuItemGroupProps as ArkMenuItemGroupProps,\n  type MenuItemGroupLabelProps as ArkMenuItemGroupLabelProps,\n  type MenuSeparatorProps as ArkMenuSeparatorProps,\n} from '@ark-ui/react'\nimport { menu } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the Menu component primitives.\n * @module @cerberus-design/react/components/menu/primitives\n */\n\nconst { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(menu)\n\n// Root\n\nexport type MenuRootProps = CerberusPrimitiveProps<ArkMenuRootProps>\n// @ts-expect-error this is a workaround for the type mismatch\nexport const MenuRoot = withSlotRecipe<MenuRootProps>(ArkMenu.Root, 'root')\n\n// Trigger\n\nexport type MenuTriggerProps = CerberusPrimitiveProps<ArkMenuTriggerProps>\nexport const MenuTriggerEl = withNoRecipe<MenuTriggerProps>(ArkMenu.Trigger)\n\n// TriggerItem\n\nexport type MenuTriggerItemProps =\n  CerberusPrimitiveProps<ArkMenuTriggerItemProps>\nexport const MenuTriggerItem = withNoRecipe<MenuTriggerItemProps>(\n  ArkMenu.TriggerItem,\n)\n\n// Indicator\n\nexport type MenuIndicatorProps = CerberusPrimitiveProps<ArkMenuIndicatorProps>\nexport const MenuIndicator = withNoRecipe<MenuIndicatorProps>(ArkMenu.Indicator)\n\n// Positioner\n\nexport type MenuPositionerProps = CerberusPrimitiveProps<ArkMenuPositionerProps>\nexport const MenuPositioner = withNoRecipe<MenuPositionerProps>(\n  ArkMenu.Positioner,\n)\n\n// Content\n\nexport type MenuContentProps = CerberusPrimitiveProps<ArkMenuContentProps>\nexport const MenuContentEl = withSlotRecipe<MenuContentProps>(\n  ArkMenu.Content,\n  'content',\n)\n\n// Item\n\nexport type MenuItemProps = CerberusPrimitiveProps<ArkMenuItemProps>\nexport const MenuItemEl = withSlotRecipe<MenuItemProps>(ArkMenu.Item, 'item')\n\n// ItemGroup\n\nexport type MenuItemGroupProps = CerberusPrimitiveProps<ArkMenuItemGroupProps>\nexport const MenuItemGroupEl = withNoRecipe<MenuItemGroupProps>(\n  ArkMenu.ItemGroup,\n)\n\n// ItemGroupLabel\n\nexport type MenuItemGroupLabelProps =\n  CerberusPrimitiveProps<ArkMenuItemGroupLabelProps>\nexport const MenuItemGroupLabelEl = withSlotRecipe<MenuItemGroupLabelProps>(\n  ArkMenu.ItemGroupLabel,\n  'itemGroupLabel',\n)\n\n// Separator\n\nexport type MenuSeparatorProps = CerberusPrimitiveProps<ArkMenuSeparatorProps>\nexport const MenuSeparatorEl = withSlotRecipe<MenuSeparatorProps>(\n  ArkMenu.Separator,\n  'separator',\n)\n","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 {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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 {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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","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":"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","names":["ArkMenu","import_jsx_runtime"]}
+{"version":3,"sources":["../../../../src/components/menu/menu.tsx","../../../../src/components/menu/primitives.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import {\n  MenuContentEl,\n  MenuItemEl,\n  MenuItemGroupEl,\n  MenuItemGroupLabelEl,\n  MenuPositioner,\n  MenuRoot,\n  MenuSeparatorEl,\n  MenuTriggerEl,\n  type MenuContentProps,\n  type MenuTriggerProps,\n} from './primitives'\n\n/**\n * This module contains the Menu named abstractions component.\n * @module @cerberus-design/react/components/menu\n */\n\n/**\n * The root Menu component which controls the menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n *\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>Trigger</MenuTrigger>\n * </Menu>\n */\nexport const Menu = MenuRoot\n\n/**\n * The MenuTrigger component opens/closes the Menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n * </Menu>\n */\nexport function MenuTrigger(props: MenuTriggerProps) {\n  return <MenuTriggerEl {...props} asChild />\n}\n\n/**\n * The MenuContent component is the container for the menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItem value=\"item_1\">Item 1</MenuItem>\n *   <MenuItem value=\"item_2\">Item 2</MenuItem>\n *  </MenuContent>\n * </Menu>\n */\nexport function MenuContent(props: MenuContentProps) {\n  return (\n    <MenuPositioner>\n      <MenuContentEl {...props} />\n    </MenuPositioner>\n  )\n}\n\n/**\n * The MenuItem component is a single item in the menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItem value=\"item_1\">Item 1</MenuItem>\n *   <MenuItem value=\"item_2\">Item 2</MenuItem>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuItem = MenuItemEl\n\n/**\n * The MenuItemGroup component is a group of menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItemGroup>\n *    <MenuItem value=\"item_1\">Item 1</MenuItem>\n *    <MenuItem value=\"item_2\">Item 2</MenuItem>\n *   </MenuItemGroup>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuItemGroup = MenuItemGroupEl\n\n/**\n * The MenuItemGroupLabel component is the label for a group of menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *   <MenuItemGroup>\n *    <MenuItemGroupLabel>Group Label</MenuItemGroupLabel>\n *    <MenuItem value=\"item_1\">Item 1</MenuItem>\n *    <MenuItem value=\"item_2\">Item 2</MenuItem>\n *   </MenuItemGroup>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuGroupLabel = MenuItemGroupLabelEl\n\n/**\n * The MenuSeparator component is a visual divider between menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu/dev)\n * @example\n * ```tsx\n * <Menu>\n *  <MenuTrigger>\n *   <Button>Trigger</Button>\n *  </MenuTrigger>\n *  <MenuContent>\n *    <MenuItemGroup>\n *      <MenuGroupLabel>Group Label</MenuGroupLabel>\n *      <MenuSeparator />\n *      <MenuItem value=\"item_1\">Item 1</MenuItem>\n *      <MenuItem value=\"item_2\">Item 2</MenuItem>\n *    </MenuItemGroup>\n *  </MenuContent>\n * </Menu>\n */\nexport const MenuSeparator = MenuSeparatorEl\n","import {\n  Menu as ArkMenu,\n  type MenuRootProps as ArkMenuRootProps,\n  type MenuTriggerProps as ArkMenuTriggerProps,\n  type MenuTriggerItemProps as ArkMenuTriggerItemProps,\n  type MenuIndicatorProps as ArkMenuIndicatorProps,\n  type MenuPositionerProps as ArkMenuPositionerProps,\n  type MenuContentProps as ArkMenuContentProps,\n  type MenuItemProps as ArkMenuItemProps,\n  type MenuItemGroupProps as ArkMenuItemGroupProps,\n  type MenuItemGroupLabelProps as ArkMenuItemGroupLabelProps,\n  type MenuSeparatorProps as ArkMenuSeparatorProps,\n} from '@ark-ui/react'\nimport { menu } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the Menu component primitives.\n * @module @cerberus-design/react/components/menu/primitives\n */\n\nconst { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(menu)\n\n// Root\n\nexport type MenuRootProps = CerberusPrimitiveProps<ArkMenuRootProps>\n// @ts-expect-error this is a workaround for the type mismatch\nexport const MenuRoot = withSlotRecipe<MenuRootProps>(ArkMenu.Root, 'root')\n\n// Trigger\n\nexport type MenuTriggerProps = CerberusPrimitiveProps<ArkMenuTriggerProps>\nexport const MenuTriggerEl = withNoRecipe<MenuTriggerProps>(ArkMenu.Trigger)\n\n// TriggerItem\n\nexport type MenuTriggerItemProps =\n  CerberusPrimitiveProps<ArkMenuTriggerItemProps>\nexport const MenuTriggerItem = withNoRecipe<MenuTriggerItemProps>(\n  ArkMenu.TriggerItem,\n)\n\n// Indicator\n\nexport type MenuIndicatorProps = CerberusPrimitiveProps<ArkMenuIndicatorProps>\nexport const MenuIndicator = withNoRecipe<MenuIndicatorProps>(ArkMenu.Indicator)\n\n// Positioner\n\nexport type MenuPositionerProps = CerberusPrimitiveProps<ArkMenuPositionerProps>\nexport const MenuPositioner = withNoRecipe<MenuPositionerProps>(\n  ArkMenu.Positioner,\n)\n\n// Content\n\nexport type MenuContentProps = CerberusPrimitiveProps<ArkMenuContentProps>\nexport const MenuContentEl = withSlotRecipe<MenuContentProps>(\n  ArkMenu.Content,\n  'content',\n)\n\n// Item\n\nexport type MenuItemProps = CerberusPrimitiveProps<ArkMenuItemProps>\nexport const MenuItemEl = withSlotRecipe<MenuItemProps>(ArkMenu.Item, 'item')\n\n// ItemGroup\n\nexport type MenuItemGroupProps = CerberusPrimitiveProps<ArkMenuItemGroupProps>\nexport const MenuItemGroupEl = withNoRecipe<MenuItemGroupProps>(\n  ArkMenu.ItemGroup,\n)\n\n// ItemGroupLabel\n\nexport type MenuItemGroupLabelProps =\n  CerberusPrimitiveProps<ArkMenuItemGroupLabelProps>\nexport const MenuItemGroupLabelEl = withSlotRecipe<MenuItemGroupLabelProps>(\n  ArkMenu.ItemGroupLabel,\n  'itemGroupLabel',\n)\n\n// Separator\n\nexport type MenuSeparatorProps = CerberusPrimitiveProps<ArkMenuSeparatorProps>\nexport const MenuSeparatorEl = withSlotRecipe<MenuSeparatorProps>(\n  ArkMenu.Separator,\n  'separator',\n)\n","import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n  type ComponentType,\n  type ElementType,\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> | string,\n  ) {\n    if (typeof Component !== 'function' && typeof Component !== 'object') {\n      return false\n    }\n    return true\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   * Can be a string or a component reference.\n   * @returns A new React component that applies Cerberus features to the\n   * original component.\n   *\n   * @example\n   * ```ts\n   * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)\n   * const Button = withNoRecipe('button')\n   * ```\n   */\n  withNoRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P> | string,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P> => {\n    const { defaultProps } = options || {}\n    const El = Component as ComponentType<P> | ElementType\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 <El {...defaultProps} {...styles} {...(nativeProps as P)} />\n    }\n\n    if (this.validateComponent(El)) {\n      const ElName = typeof El === 'string' ? El : El.displayName || El.name\n      CerbComponent.displayName = ElName\n    }\n\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> | string,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n    const { defaultProps } = options || {}\n    const El = Component as ComponentType<P> | ElementType\n\n    const recipe = this.recipe as CerberusRecipe\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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    if (this.validateComponent(El)) {\n      const ElName = typeof El === 'string' ? El : El.displayName || El.name\n      CerbComponent.displayName = ElName\n    }\n\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> | string,\n    slot: keyof RecipeVariantRecord,\n    options?: WithRecipeOptions,\n  ) => {\n    const { defaultProps } = options || {}\n    const El = Component as ComponentType<P> | ElementType\n\n    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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    if (this.validateComponent(El)) {\n      const ElName = typeof El === 'string' ? El : El.displayName || El.name\n      CerbComponent.displayName = ElName\n    }\n\n    return CerbComponent\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":"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","names":["ArkMenu","import_jsx_runtime"]}

package/build/legacy/components/menu/primitives.cjs

@@ -46,23 +46,28 @@ var CerberusPrimitive = class {
     /**
      * 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')
      * ```
      */
     __publicField(this, "withNoRecipe", (Component, options) => {
       const { defaultProps } = options || {};
-      this.validateComponent(Component);
+      const El = Component;
       const CerbComponent = (props) => {
         const { css: customCss, className, ...nativeProps } = props;
         const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(El, { ...defaultProps, ...styles, ...nativeProps });
       };
-      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;
     });
     /**
@@ -74,8 +79,8 @@ var CerberusPrimitive = class {
      */
     __publicField(this, "withRecipe", (Component, options) => {
       const { defaultProps } = options || {};
+      const El = Component;
       const recipe = this.recipe;
-      this.validateComponent(Component);
       const CerbComponent = (internalProps) => {
         const {
           css: customCss,
@@ -93,7 +98,10 @@ var CerberusPrimitive = class {
           }
         );
       };
-      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;
     });
     /**
@@ -110,8 +118,8 @@ var CerberusPrimitive = class {
      */
     __publicField(this, "withSlotRecipe", (Component, slot, options) => {
       const { defaultProps } = options || {};
+      const El = Component;
       const recipe = this.recipe;
-      this.validateComponent(Component);
       const CerbComponent = (internalProps) => {
         const {
           css: customCss,
@@ -130,7 +138,10 @@ var CerberusPrimitive = class {
           }
         );
       };
-      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;
     });
     this.recipe = recipe ?? null;
@@ -145,8 +156,9 @@ var CerberusPrimitive = class {
   }
   validateComponent(Component) {
     if (typeof Component !== "function" && typeof Component !== "object") {
-      throw new Error("Expected a React component as the first argument.");
+      return false;
     }
+    return true;
   }
 };
 

package/build/legacy/components/menu/primitives.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/menu/primitives.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import {\n  Menu as ArkMenu,\n  type MenuRootProps as ArkMenuRootProps,\n  type MenuTriggerProps as ArkMenuTriggerProps,\n  type MenuTriggerItemProps as ArkMenuTriggerItemProps,\n  type MenuIndicatorProps as ArkMenuIndicatorProps,\n  type MenuPositionerProps as ArkMenuPositionerProps,\n  type MenuContentProps as ArkMenuContentProps,\n  type MenuItemProps as ArkMenuItemProps,\n  type MenuItemGroupProps as ArkMenuItemGroupProps,\n  type MenuItemGroupLabelProps as ArkMenuItemGroupLabelProps,\n  type MenuSeparatorProps as ArkMenuSeparatorProps,\n} from '@ark-ui/react'\nimport { menu } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the Menu component primitives.\n * @module @cerberus-design/react/components/menu/primitives\n */\n\nconst { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(menu)\n\n// Root\n\nexport type MenuRootProps = CerberusPrimitiveProps<ArkMenuRootProps>\n// @ts-expect-error this is a workaround for the type mismatch\nexport const MenuRoot = withSlotRecipe<MenuRootProps>(ArkMenu.Root, 'root')\n\n// Trigger\n\nexport type MenuTriggerProps = CerberusPrimitiveProps<ArkMenuTriggerProps>\nexport const MenuTriggerEl = withNoRecipe<MenuTriggerProps>(ArkMenu.Trigger)\n\n// TriggerItem\n\nexport type MenuTriggerItemProps =\n  CerberusPrimitiveProps<ArkMenuTriggerItemProps>\nexport const MenuTriggerItem = withNoRecipe<MenuTriggerItemProps>(\n  ArkMenu.TriggerItem,\n)\n\n// Indicator\n\nexport type MenuIndicatorProps = CerberusPrimitiveProps<ArkMenuIndicatorProps>\nexport const MenuIndicator = withNoRecipe<MenuIndicatorProps>(ArkMenu.Indicator)\n\n// Positioner\n\nexport type MenuPositionerProps = CerberusPrimitiveProps<ArkMenuPositionerProps>\nexport const MenuPositioner = withNoRecipe<MenuPositionerProps>(\n  ArkMenu.Positioner,\n)\n\n// Content\n\nexport type MenuContentProps = CerberusPrimitiveProps<ArkMenuContentProps>\nexport const MenuContentEl = withSlotRecipe<MenuContentProps>(\n  ArkMenu.Content,\n  'content',\n)\n\n// Item\n\nexport type MenuItemProps = CerberusPrimitiveProps<ArkMenuItemProps>\nexport const MenuItemEl = withSlotRecipe<MenuItemProps>(ArkMenu.Item, 'item')\n\n// ItemGroup\n\nexport type MenuItemGroupProps = CerberusPrimitiveProps<ArkMenuItemGroupProps>\nexport const MenuItemGroupEl = withNoRecipe<MenuItemGroupProps>(\n  ArkMenu.ItemGroup,\n)\n\n// ItemGroupLabel\n\nexport type MenuItemGroupLabelProps =\n  CerberusPrimitiveProps<ArkMenuItemGroupLabelProps>\nexport const MenuItemGroupLabelEl = withSlotRecipe<MenuItemGroupLabelProps>(\n  ArkMenu.ItemGroupLabel,\n  'itemGroupLabel',\n)\n\n// Separator\n\nexport type MenuSeparatorProps = CerberusPrimitiveProps<ArkMenuSeparatorProps>\nexport const MenuSeparatorEl = withSlotRecipe<MenuSeparatorProps>(\n  ArkMenu.Separator,\n  'separator',\n)\n","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 {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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 {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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","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":"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","names":["ArkMenu"]}
+{"version":3,"sources":["../../../../src/components/menu/primitives.ts","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import {\n  Menu as ArkMenu,\n  type MenuRootProps as ArkMenuRootProps,\n  type MenuTriggerProps as ArkMenuTriggerProps,\n  type MenuTriggerItemProps as ArkMenuTriggerItemProps,\n  type MenuIndicatorProps as ArkMenuIndicatorProps,\n  type MenuPositionerProps as ArkMenuPositionerProps,\n  type MenuContentProps as ArkMenuContentProps,\n  type MenuItemProps as ArkMenuItemProps,\n  type MenuItemGroupProps as ArkMenuItemGroupProps,\n  type MenuItemGroupLabelProps as ArkMenuItemGroupLabelProps,\n  type MenuSeparatorProps as ArkMenuSeparatorProps,\n} from '@ark-ui/react'\nimport { menu } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the Menu component primitives.\n * @module @cerberus-design/react/components/menu/primitives\n */\n\nconst { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(menu)\n\n// Root\n\nexport type MenuRootProps = CerberusPrimitiveProps<ArkMenuRootProps>\n// @ts-expect-error this is a workaround for the type mismatch\nexport const MenuRoot = withSlotRecipe<MenuRootProps>(ArkMenu.Root, 'root')\n\n// Trigger\n\nexport type MenuTriggerProps = CerberusPrimitiveProps<ArkMenuTriggerProps>\nexport const MenuTriggerEl = withNoRecipe<MenuTriggerProps>(ArkMenu.Trigger)\n\n// TriggerItem\n\nexport type MenuTriggerItemProps =\n  CerberusPrimitiveProps<ArkMenuTriggerItemProps>\nexport const MenuTriggerItem = withNoRecipe<MenuTriggerItemProps>(\n  ArkMenu.TriggerItem,\n)\n\n// Indicator\n\nexport type MenuIndicatorProps = CerberusPrimitiveProps<ArkMenuIndicatorProps>\nexport const MenuIndicator = withNoRecipe<MenuIndicatorProps>(ArkMenu.Indicator)\n\n// Positioner\n\nexport type MenuPositionerProps = CerberusPrimitiveProps<ArkMenuPositionerProps>\nexport const MenuPositioner = withNoRecipe<MenuPositionerProps>(\n  ArkMenu.Positioner,\n)\n\n// Content\n\nexport type MenuContentProps = CerberusPrimitiveProps<ArkMenuContentProps>\nexport const MenuContentEl = withSlotRecipe<MenuContentProps>(\n  ArkMenu.Content,\n  'content',\n)\n\n// Item\n\nexport type MenuItemProps = CerberusPrimitiveProps<ArkMenuItemProps>\nexport const MenuItemEl = withSlotRecipe<MenuItemProps>(ArkMenu.Item, 'item')\n\n// ItemGroup\n\nexport type MenuItemGroupProps = CerberusPrimitiveProps<ArkMenuItemGroupProps>\nexport const MenuItemGroupEl = withNoRecipe<MenuItemGroupProps>(\n  ArkMenu.ItemGroup,\n)\n\n// ItemGroupLabel\n\nexport type MenuItemGroupLabelProps =\n  CerberusPrimitiveProps<ArkMenuItemGroupLabelProps>\nexport const MenuItemGroupLabelEl = withSlotRecipe<MenuItemGroupLabelProps>(\n  ArkMenu.ItemGroupLabel,\n  'itemGroupLabel',\n)\n\n// Separator\n\nexport type MenuSeparatorProps = CerberusPrimitiveProps<ArkMenuSeparatorProps>\nexport const MenuSeparatorEl = withSlotRecipe<MenuSeparatorProps>(\n  ArkMenu.Separator,\n  'separator',\n)\n","import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n  type ComponentType,\n  type ElementType,\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> | string,\n  ) {\n    if (typeof Component !== 'function' && typeof Component !== 'object') {\n      return false\n    }\n    return true\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   * Can be a string or a component reference.\n   * @returns A new React component that applies Cerberus features to the\n   * original component.\n   *\n   * @example\n   * ```ts\n   * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)\n   * const Button = withNoRecipe('button')\n   * ```\n   */\n  withNoRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P> | string,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P> => {\n    const { defaultProps } = options || {}\n    const El = Component as ComponentType<P> | ElementType\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 <El {...defaultProps} {...styles} {...(nativeProps as P)} />\n    }\n\n    if (this.validateComponent(El)) {\n      const ElName = typeof El === 'string' ? El : El.displayName || El.name\n      CerbComponent.displayName = ElName\n    }\n\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> | string,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n    const { defaultProps } = options || {}\n    const El = Component as ComponentType<P> | ElementType\n\n    const recipe = this.recipe as CerberusRecipe\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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    if (this.validateComponent(El)) {\n      const ElName = typeof El === 'string' ? El : El.displayName || El.name\n      CerbComponent.displayName = ElName\n    }\n\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> | string,\n    slot: keyof RecipeVariantRecord,\n    options?: WithRecipeOptions,\n  ) => {\n    const { defaultProps } = options || {}\n    const El = Component as ComponentType<P> | ElementType\n\n    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const {\n        css: customCss,\n        className,\n        ...restOfInternalProps\n      } = internalProps\n\n      const [variantOptions, nativeProps] =\n        recipe.splitVariantProps(restOfInternalProps)\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    if (this.validateComponent(El)) {\n      const ElName = typeof El === 'string' ? El : El.displayName || El.name\n      CerbComponent.displayName = ElName\n    }\n\n    return CerbComponent\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":"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","names":["ArkMenu"]}