@cerberus-design/react 0.19.2 → 0.20.0

package/build/legacy/components/combobox/parts.cjs

@@ -40,23 +40,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;
     });
     /**
@@ -68,8 +73,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,
@@ -87,7 +92,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;
     });
     /**
@@ -104,8 +112,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,
@@ -124,7 +132,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;
@@ -139,8 +150,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/combobox/parts.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/combobox/parts.ts","../../../../src/components/combobox/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import type { ElementType } from 'react'\nimport {\n  ComboboxClearTrigger,\n  ComboboxContent,\n  ComboboxControl,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemGroup,\n  ComboboxItemGroupLabel,\n  ComboboxItemIndicator,\n  ComboboxItemText,\n  ComboboxLabel,\n  ComboboxPositioner,\n  ComboboxRoot,\n  ComboboxTrigger,\n} from './primitives'\n\n/**\n * This module contains the parts of the Combobox parts.\n * @module 'combobox/parts'\n */\n\ninterface ComboboxPartsValue {\n  /**\n   * The context provider for the Select component.\n   */\n  Root: ElementType\n  /**\n   * The label that appears above the select input.\n   */\n  Label: ElementType\n  /**\n   * The control that wraps the select trigger.\n   */\n  Control: ElementType\n  /**\n   * The filterable input of the combobox.\n   */\n  Input: ElementType\n  /**\n   * The trigger that opens the dropdown.\n   */\n  Trigger: ElementType\n  /**\n   * The trigger to clear the select input.\n   */\n  ClearTrigger: ElementType\n  /**\n   * The positioner that wraps the content.\n   */\n  Positioner: ElementType\n  /**\n   * The content of the select component.\n   */\n  Content: ElementType\n  /**\n   * A group of items in the select component.\n   */\n  ItemGroup: ElementType\n  /**\n   * The label for a group of items in the select component.\n   */\n  ItemGroupLabel: ElementType\n  /**\n   * An individual item in the select component.\n   */\n  Item: ElementType\n  /**\n   * The text that labels a single radio of the field.\n   */\n  ItemText: ElementType\n  /**\n   * The indicator that appears when the item has been selected.\n   */\n  ItemIndicator: ElementType\n}\n\n/**\n * An Object containing the parts of the Radio component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the ComboboxParts object and\n * the entire family of components vs. only what you use.\n */\nexport const ComboboxParts: ComboboxPartsValue = {\n  Root: ComboboxRoot,\n  Label: ComboboxLabel,\n  Control: ComboboxControl,\n  Input: ComboboxInput,\n  Trigger: ComboboxTrigger,\n  ClearTrigger: ComboboxClearTrigger,\n  Positioner: ComboboxPositioner,\n  Content: ComboboxContent,\n  ItemGroup: ComboboxItemGroup,\n  ItemGroupLabel: ComboboxItemGroupLabel,\n  Item: ComboboxItem,\n  ItemText: ComboboxItemText,\n  ItemIndicator: ComboboxItemIndicator,\n}\n","import {\n  Combobox,\n  type ComboboxClearTriggerProps as ArkComboboxClearTriggerProps,\n  type ComboboxContentProps as ArkComboboxContentProps,\n  type ComboboxControlProps as ArkComboboxControlProps,\n  type ComboboxInputProps as ArkComboboxInputProps,\n  type ComboboxItemGroupLabelProps as ArkComboboxItemGroupLabelProps,\n  type ComboboxItemGroupProps as ArkComboboxItemGroupProps,\n  type ComboboxItemIndicatorProps as ArkComboboxItemIndicatorProps,\n  type ComboboxItemProps as ArkComboboxItemProps,\n  type ComboboxItemTextProps as ArkComboboxItemTextProps,\n  type ComboboxLabelProps as ArkComboboxLabelProps,\n  type ComboboxPositionerProps as ArkComboboxPositionerProps,\n  type ComboboxRootProps as ArkComboboxRootProps,\n  type ComboboxTriggerProps as ArkComboboxTriggerProps,\n} from '@ark-ui/react/combobox'\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport type { SelectCollectionItem } from '../select/select'\nimport { combobox, type ComboboxVariantProps } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the primitives of the Combobox.\n * @module 'combobox/primitives'\n */\n\nconst { withSlotRecipe } = createCerberusPrimitive(combobox)\n\n/**\n * The ComboboxRoot component is the context provider for the Combobox\n * component.\n */\n\n// @ts-expect-error there is a type mismatch here, but it works in practice\nexport const ComboboxRoot = withSlotRecipe<ComboboxRootProps>(\n  Combobox.Root,\n  'root',\n)\nexport type ComboboxRootProps = CerberusPrimitiveProps<\n  ArkComboboxRootProps<SelectCollectionItem> & ComboboxVariantProps\n>\n\n/**\n * The label that appears above the combobox input.\n */\nexport const ComboboxLabel = withSlotRecipe<ComboboxLabelProps>(\n  Combobox.Label,\n  'label',\n)\nexport type ComboboxLabelProps = CerberusPrimitiveProps<ArkComboboxLabelProps>\n\n/**\n * The control that wraps the combobox input.\n */\nexport const ComboboxControl = withSlotRecipe<ComboboxControlProps>(\n  Combobox.Control,\n  'control',\n)\nexport type ComboboxControlProps =\n  CerberusPrimitiveProps<ArkComboboxControlProps>\n\n/**\n * The input of the combobox.\n */\nexport const ComboboxInput = withSlotRecipe<ComboboxInputProps>(\n  Combobox.Input,\n  'input',\n)\nexport type ComboboxInputProps = CerberusPrimitiveProps<ArkComboboxInputProps>\n\n/**\n * The trigger that opens the dropdown.\n */\nexport const ComboboxTrigger = withSlotRecipe<ComboboxTriggerProps>(\n  Combobox.Trigger,\n  'trigger',\n)\nexport type ComboboxTriggerProps =\n  CerberusPrimitiveProps<ArkComboboxTriggerProps>\n\n/**\n * The trigger to clear the combobox input.\n */\nexport const ComboboxClearTrigger = withSlotRecipe<ComboboxClearTriggerProps>(\n  Combobox.ClearTrigger,\n  'clearTrigger',\n)\nexport type ComboboxClearTriggerProps =\n  CerberusPrimitiveProps<ArkComboboxClearTriggerProps>\n\n/**\n * The positioner that wraps the content.\n */\nexport const ComboboxPositioner = withSlotRecipe<ComboboxPositionerProps>(\n  Combobox.Positioner,\n  'positioner',\n)\nexport type ComboboxPositionerProps =\n  CerberusPrimitiveProps<ArkComboboxPositionerProps>\n\n/**\n * The content of the combobox component.\n */\nexport const ComboboxContent = withSlotRecipe<ComboboxContentProps>(\n  Combobox.Content,\n  'content',\n)\nexport type ComboboxContentProps = CerberusPrimitiveProps<\n  ArkComboboxContentProps & ComboboxVariantProps\n>\n\n/**\n * A group of items in the combobox component.\n */\nexport const ComboboxItemGroup = withSlotRecipe<ComboboxItemGroupProps>(\n  Combobox.ItemGroup,\n  'itemGroup',\n)\nexport type ComboboxItemGroupProps =\n  CerberusPrimitiveProps<ArkComboboxItemGroupProps>\n\n/**\n * The label for a group of items in the combobox component.\n */\nexport const ComboboxItemGroupLabel =\n  withSlotRecipe<ComboboxItemGroupLabelProps>(\n    Combobox.ItemGroupLabel,\n    'itemGroupLabel',\n  )\nexport type ComboboxItemGroupLabelProps =\n  CerberusPrimitiveProps<ArkComboboxItemGroupLabelProps>\n\n/**\n * An individual item in the combobox component.\n */\nexport const ComboboxItem = withSlotRecipe<ComboboxItemProps>(\n  Combobox.Item,\n  'item',\n)\nexport type ComboboxItemProps = CerberusPrimitiveProps<ArkComboboxItemProps>\n\n/**\n * The text that labels a single item of the combobox.\n */\nexport const ComboboxItemText = withSlotRecipe<ComboboxItemTextProps>(\n  Combobox.ItemText,\n  'itemText',\n)\nexport type ComboboxItemTextProps =\n  CerberusPrimitiveProps<ArkComboboxItemTextProps>\n\n/**\n * The indicator that appears when the item has been selected.\n */\nexport const ComboboxItemIndicator = withSlotRecipe<ComboboxItemIndicatorProps>(\n  Combobox.ItemIndicator,\n  'itemIndicator',\n)\nexport type ComboboxItemIndicatorProps =\n  CerberusPrimitiveProps<ArkComboboxItemIndicatorProps>\n\n/**\n * The icon that appears at the start of the combobox input.\n */\nexport const ComboboxStartIcon = withSlotRecipe<ComboboxStartIconProps>(\n  ark.span,\n  'startIcon',\n)\nexport type ComboboxStartIconProps = CerberusPrimitiveProps<\n  HTMLArkProps<'span'>\n>\n\n// We are only doing this to make the API consistent\nexport const ComboItemText = ComboboxItemText\nexport type ComboboxInputValueChangeDetails = Combobox.InputValueChangeDetails\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":[]}
+{"version":3,"sources":["../../../../src/components/combobox/parts.ts","../../../../src/components/combobox/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import type { ElementType } from 'react'\nimport {\n  ComboboxClearTrigger,\n  ComboboxContent,\n  ComboboxControl,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemGroup,\n  ComboboxItemGroupLabel,\n  ComboboxItemIndicator,\n  ComboboxItemText,\n  ComboboxLabel,\n  ComboboxPositioner,\n  ComboboxRoot,\n  ComboboxTrigger,\n} from './primitives'\n\n/**\n * This module contains the parts of the Combobox parts.\n * @module 'combobox/parts'\n */\n\ninterface ComboboxPartsValue {\n  /**\n   * The context provider for the Select component.\n   */\n  Root: ElementType\n  /**\n   * The label that appears above the select input.\n   */\n  Label: ElementType\n  /**\n   * The control that wraps the select trigger.\n   */\n  Control: ElementType\n  /**\n   * The filterable input of the combobox.\n   */\n  Input: ElementType\n  /**\n   * The trigger that opens the dropdown.\n   */\n  Trigger: ElementType\n  /**\n   * The trigger to clear the select input.\n   */\n  ClearTrigger: ElementType\n  /**\n   * The positioner that wraps the content.\n   */\n  Positioner: ElementType\n  /**\n   * The content of the select component.\n   */\n  Content: ElementType\n  /**\n   * A group of items in the select component.\n   */\n  ItemGroup: ElementType\n  /**\n   * The label for a group of items in the select component.\n   */\n  ItemGroupLabel: ElementType\n  /**\n   * An individual item in the select component.\n   */\n  Item: ElementType\n  /**\n   * The text that labels a single radio of the field.\n   */\n  ItemText: ElementType\n  /**\n   * The indicator that appears when the item has been selected.\n   */\n  ItemIndicator: ElementType\n}\n\n/**\n * An Object containing the parts of the Radio component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the ComboboxParts object and\n * the entire family of components vs. only what you use.\n */\nexport const ComboboxParts: ComboboxPartsValue = {\n  Root: ComboboxRoot,\n  Label: ComboboxLabel,\n  Control: ComboboxControl,\n  Input: ComboboxInput,\n  Trigger: ComboboxTrigger,\n  ClearTrigger: ComboboxClearTrigger,\n  Positioner: ComboboxPositioner,\n  Content: ComboboxContent,\n  ItemGroup: ComboboxItemGroup,\n  ItemGroupLabel: ComboboxItemGroupLabel,\n  Item: ComboboxItem,\n  ItemText: ComboboxItemText,\n  ItemIndicator: ComboboxItemIndicator,\n}\n","import {\n  Combobox,\n  type ComboboxClearTriggerProps as ArkComboboxClearTriggerProps,\n  type ComboboxContentProps as ArkComboboxContentProps,\n  type ComboboxControlProps as ArkComboboxControlProps,\n  type ComboboxInputProps as ArkComboboxInputProps,\n  type ComboboxItemGroupLabelProps as ArkComboboxItemGroupLabelProps,\n  type ComboboxItemGroupProps as ArkComboboxItemGroupProps,\n  type ComboboxItemIndicatorProps as ArkComboboxItemIndicatorProps,\n  type ComboboxItemProps as ArkComboboxItemProps,\n  type ComboboxItemTextProps as ArkComboboxItemTextProps,\n  type ComboboxLabelProps as ArkComboboxLabelProps,\n  type ComboboxPositionerProps as ArkComboboxPositionerProps,\n  type ComboboxRootProps as ArkComboboxRootProps,\n  type ComboboxTriggerProps as ArkComboboxTriggerProps,\n} from '@ark-ui/react/combobox'\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport type { SelectCollectionItem } from '../select/select'\nimport { combobox, type ComboboxVariantProps } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the primitives of the Combobox.\n * @module 'combobox/primitives'\n */\n\nconst { withSlotRecipe } = createCerberusPrimitive(combobox)\n\n/**\n * The ComboboxRoot component is the context provider for the Combobox\n * component.\n */\n\n// @ts-expect-error there is a type mismatch here, but it works in practice\nexport const ComboboxRoot = withSlotRecipe<ComboboxRootProps>(\n  Combobox.Root,\n  'root',\n)\nexport type ComboboxRootProps = CerberusPrimitiveProps<\n  ArkComboboxRootProps<SelectCollectionItem> & ComboboxVariantProps\n>\n\n/**\n * The label that appears above the combobox input.\n */\nexport const ComboboxLabel = withSlotRecipe<ComboboxLabelProps>(\n  Combobox.Label,\n  'label',\n)\nexport type ComboboxLabelProps = CerberusPrimitiveProps<ArkComboboxLabelProps>\n\n/**\n * The control that wraps the combobox input.\n */\nexport const ComboboxControl = withSlotRecipe<ComboboxControlProps>(\n  Combobox.Control,\n  'control',\n)\nexport type ComboboxControlProps =\n  CerberusPrimitiveProps<ArkComboboxControlProps>\n\n/**\n * The input of the combobox.\n */\nexport const ComboboxInput = withSlotRecipe<ComboboxInputProps>(\n  Combobox.Input,\n  'input',\n)\nexport type ComboboxInputProps = CerberusPrimitiveProps<ArkComboboxInputProps>\n\n/**\n * The trigger that opens the dropdown.\n */\nexport const ComboboxTrigger = withSlotRecipe<ComboboxTriggerProps>(\n  Combobox.Trigger,\n  'trigger',\n)\nexport type ComboboxTriggerProps =\n  CerberusPrimitiveProps<ArkComboboxTriggerProps>\n\n/**\n * The trigger to clear the combobox input.\n */\nexport const ComboboxClearTrigger = withSlotRecipe<ComboboxClearTriggerProps>(\n  Combobox.ClearTrigger,\n  'clearTrigger',\n)\nexport type ComboboxClearTriggerProps =\n  CerberusPrimitiveProps<ArkComboboxClearTriggerProps>\n\n/**\n * The positioner that wraps the content.\n */\nexport const ComboboxPositioner = withSlotRecipe<ComboboxPositionerProps>(\n  Combobox.Positioner,\n  'positioner',\n)\nexport type ComboboxPositionerProps =\n  CerberusPrimitiveProps<ArkComboboxPositionerProps>\n\n/**\n * The content of the combobox component.\n */\nexport const ComboboxContent = withSlotRecipe<ComboboxContentProps>(\n  Combobox.Content,\n  'content',\n)\nexport type ComboboxContentProps = CerberusPrimitiveProps<\n  ArkComboboxContentProps & ComboboxVariantProps\n>\n\n/**\n * A group of items in the combobox component.\n */\nexport const ComboboxItemGroup = withSlotRecipe<ComboboxItemGroupProps>(\n  Combobox.ItemGroup,\n  'itemGroup',\n)\nexport type ComboboxItemGroupProps =\n  CerberusPrimitiveProps<ArkComboboxItemGroupProps>\n\n/**\n * The label for a group of items in the combobox component.\n */\nexport const ComboboxItemGroupLabel =\n  withSlotRecipe<ComboboxItemGroupLabelProps>(\n    Combobox.ItemGroupLabel,\n    'itemGroupLabel',\n  )\nexport type ComboboxItemGroupLabelProps =\n  CerberusPrimitiveProps<ArkComboboxItemGroupLabelProps>\n\n/**\n * An individual item in the combobox component.\n */\nexport const ComboboxItem = withSlotRecipe<ComboboxItemProps>(\n  Combobox.Item,\n  'item',\n)\nexport type ComboboxItemProps = CerberusPrimitiveProps<ArkComboboxItemProps>\n\n/**\n * The text that labels a single item of the combobox.\n */\nexport const ComboboxItemText = withSlotRecipe<ComboboxItemTextProps>(\n  Combobox.ItemText,\n  'itemText',\n)\nexport type ComboboxItemTextProps =\n  CerberusPrimitiveProps<ArkComboboxItemTextProps>\n\n/**\n * The indicator that appears when the item has been selected.\n */\nexport const ComboboxItemIndicator = withSlotRecipe<ComboboxItemIndicatorProps>(\n  Combobox.ItemIndicator,\n  'itemIndicator',\n)\nexport type ComboboxItemIndicatorProps =\n  CerberusPrimitiveProps<ArkComboboxItemIndicatorProps>\n\n/**\n * The icon that appears at the start of the combobox input.\n */\nexport const ComboboxStartIcon = withSlotRecipe<ComboboxStartIconProps>(\n  ark.span,\n  'startIcon',\n)\nexport type ComboboxStartIconProps = CerberusPrimitiveProps<\n  HTMLArkProps<'span'>\n>\n\n// We are only doing this to make the API consistent\nexport const ComboItemText = ComboboxItemText\nexport type ComboboxInputValueChangeDetails = Combobox.InputValueChangeDetails\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/combobox/primitives.cjs

@@ -52,23 +52,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;
     });
     /**
@@ -80,8 +85,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,
@@ -99,7 +104,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;
     });
     /**
@@ -116,8 +124,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,
@@ -136,7 +144,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;
@@ -151,8 +162,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/combobox/primitives.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/combobox/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import {\n  Combobox,\n  type ComboboxClearTriggerProps as ArkComboboxClearTriggerProps,\n  type ComboboxContentProps as ArkComboboxContentProps,\n  type ComboboxControlProps as ArkComboboxControlProps,\n  type ComboboxInputProps as ArkComboboxInputProps,\n  type ComboboxItemGroupLabelProps as ArkComboboxItemGroupLabelProps,\n  type ComboboxItemGroupProps as ArkComboboxItemGroupProps,\n  type ComboboxItemIndicatorProps as ArkComboboxItemIndicatorProps,\n  type ComboboxItemProps as ArkComboboxItemProps,\n  type ComboboxItemTextProps as ArkComboboxItemTextProps,\n  type ComboboxLabelProps as ArkComboboxLabelProps,\n  type ComboboxPositionerProps as ArkComboboxPositionerProps,\n  type ComboboxRootProps as ArkComboboxRootProps,\n  type ComboboxTriggerProps as ArkComboboxTriggerProps,\n} from '@ark-ui/react/combobox'\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport type { SelectCollectionItem } from '../select/select'\nimport { combobox, type ComboboxVariantProps } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the primitives of the Combobox.\n * @module 'combobox/primitives'\n */\n\nconst { withSlotRecipe } = createCerberusPrimitive(combobox)\n\n/**\n * The ComboboxRoot component is the context provider for the Combobox\n * component.\n */\n\n// @ts-expect-error there is a type mismatch here, but it works in practice\nexport const ComboboxRoot = withSlotRecipe<ComboboxRootProps>(\n  Combobox.Root,\n  'root',\n)\nexport type ComboboxRootProps = CerberusPrimitiveProps<\n  ArkComboboxRootProps<SelectCollectionItem> & ComboboxVariantProps\n>\n\n/**\n * The label that appears above the combobox input.\n */\nexport const ComboboxLabel = withSlotRecipe<ComboboxLabelProps>(\n  Combobox.Label,\n  'label',\n)\nexport type ComboboxLabelProps = CerberusPrimitiveProps<ArkComboboxLabelProps>\n\n/**\n * The control that wraps the combobox input.\n */\nexport const ComboboxControl = withSlotRecipe<ComboboxControlProps>(\n  Combobox.Control,\n  'control',\n)\nexport type ComboboxControlProps =\n  CerberusPrimitiveProps<ArkComboboxControlProps>\n\n/**\n * The input of the combobox.\n */\nexport const ComboboxInput = withSlotRecipe<ComboboxInputProps>(\n  Combobox.Input,\n  'input',\n)\nexport type ComboboxInputProps = CerberusPrimitiveProps<ArkComboboxInputProps>\n\n/**\n * The trigger that opens the dropdown.\n */\nexport const ComboboxTrigger = withSlotRecipe<ComboboxTriggerProps>(\n  Combobox.Trigger,\n  'trigger',\n)\nexport type ComboboxTriggerProps =\n  CerberusPrimitiveProps<ArkComboboxTriggerProps>\n\n/**\n * The trigger to clear the combobox input.\n */\nexport const ComboboxClearTrigger = withSlotRecipe<ComboboxClearTriggerProps>(\n  Combobox.ClearTrigger,\n  'clearTrigger',\n)\nexport type ComboboxClearTriggerProps =\n  CerberusPrimitiveProps<ArkComboboxClearTriggerProps>\n\n/**\n * The positioner that wraps the content.\n */\nexport const ComboboxPositioner = withSlotRecipe<ComboboxPositionerProps>(\n  Combobox.Positioner,\n  'positioner',\n)\nexport type ComboboxPositionerProps =\n  CerberusPrimitiveProps<ArkComboboxPositionerProps>\n\n/**\n * The content of the combobox component.\n */\nexport const ComboboxContent = withSlotRecipe<ComboboxContentProps>(\n  Combobox.Content,\n  'content',\n)\nexport type ComboboxContentProps = CerberusPrimitiveProps<\n  ArkComboboxContentProps & ComboboxVariantProps\n>\n\n/**\n * A group of items in the combobox component.\n */\nexport const ComboboxItemGroup = withSlotRecipe<ComboboxItemGroupProps>(\n  Combobox.ItemGroup,\n  'itemGroup',\n)\nexport type ComboboxItemGroupProps =\n  CerberusPrimitiveProps<ArkComboboxItemGroupProps>\n\n/**\n * The label for a group of items in the combobox component.\n */\nexport const ComboboxItemGroupLabel =\n  withSlotRecipe<ComboboxItemGroupLabelProps>(\n    Combobox.ItemGroupLabel,\n    'itemGroupLabel',\n  )\nexport type ComboboxItemGroupLabelProps =\n  CerberusPrimitiveProps<ArkComboboxItemGroupLabelProps>\n\n/**\n * An individual item in the combobox component.\n */\nexport const ComboboxItem = withSlotRecipe<ComboboxItemProps>(\n  Combobox.Item,\n  'item',\n)\nexport type ComboboxItemProps = CerberusPrimitiveProps<ArkComboboxItemProps>\n\n/**\n * The text that labels a single item of the combobox.\n */\nexport const ComboboxItemText = withSlotRecipe<ComboboxItemTextProps>(\n  Combobox.ItemText,\n  'itemText',\n)\nexport type ComboboxItemTextProps =\n  CerberusPrimitiveProps<ArkComboboxItemTextProps>\n\n/**\n * The indicator that appears when the item has been selected.\n */\nexport const ComboboxItemIndicator = withSlotRecipe<ComboboxItemIndicatorProps>(\n  Combobox.ItemIndicator,\n  'itemIndicator',\n)\nexport type ComboboxItemIndicatorProps =\n  CerberusPrimitiveProps<ArkComboboxItemIndicatorProps>\n\n/**\n * The icon that appears at the start of the combobox input.\n */\nexport const ComboboxStartIcon = withSlotRecipe<ComboboxStartIconProps>(\n  ark.span,\n  'startIcon',\n)\nexport type ComboboxStartIconProps = CerberusPrimitiveProps<\n  HTMLArkProps<'span'>\n>\n\n// We are only doing this to make the API consistent\nexport const ComboItemText = ComboboxItemText\nexport type ComboboxInputValueChangeDetails = Combobox.InputValueChangeDetails\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":[]}
+{"version":3,"sources":["../../../../src/components/combobox/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["import {\n  Combobox,\n  type ComboboxClearTriggerProps as ArkComboboxClearTriggerProps,\n  type ComboboxContentProps as ArkComboboxContentProps,\n  type ComboboxControlProps as ArkComboboxControlProps,\n  type ComboboxInputProps as ArkComboboxInputProps,\n  type ComboboxItemGroupLabelProps as ArkComboboxItemGroupLabelProps,\n  type ComboboxItemGroupProps as ArkComboboxItemGroupProps,\n  type ComboboxItemIndicatorProps as ArkComboboxItemIndicatorProps,\n  type ComboboxItemProps as ArkComboboxItemProps,\n  type ComboboxItemTextProps as ArkComboboxItemTextProps,\n  type ComboboxLabelProps as ArkComboboxLabelProps,\n  type ComboboxPositionerProps as ArkComboboxPositionerProps,\n  type ComboboxRootProps as ArkComboboxRootProps,\n  type ComboboxTriggerProps as ArkComboboxTriggerProps,\n} from '@ark-ui/react/combobox'\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport type { SelectCollectionItem } from '../select/select'\nimport { combobox, type ComboboxVariantProps } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the primitives of the Combobox.\n * @module 'combobox/primitives'\n */\n\nconst { withSlotRecipe } = createCerberusPrimitive(combobox)\n\n/**\n * The ComboboxRoot component is the context provider for the Combobox\n * component.\n */\n\n// @ts-expect-error there is a type mismatch here, but it works in practice\nexport const ComboboxRoot = withSlotRecipe<ComboboxRootProps>(\n  Combobox.Root,\n  'root',\n)\nexport type ComboboxRootProps = CerberusPrimitiveProps<\n  ArkComboboxRootProps<SelectCollectionItem> & ComboboxVariantProps\n>\n\n/**\n * The label that appears above the combobox input.\n */\nexport const ComboboxLabel = withSlotRecipe<ComboboxLabelProps>(\n  Combobox.Label,\n  'label',\n)\nexport type ComboboxLabelProps = CerberusPrimitiveProps<ArkComboboxLabelProps>\n\n/**\n * The control that wraps the combobox input.\n */\nexport const ComboboxControl = withSlotRecipe<ComboboxControlProps>(\n  Combobox.Control,\n  'control',\n)\nexport type ComboboxControlProps =\n  CerberusPrimitiveProps<ArkComboboxControlProps>\n\n/**\n * The input of the combobox.\n */\nexport const ComboboxInput = withSlotRecipe<ComboboxInputProps>(\n  Combobox.Input,\n  'input',\n)\nexport type ComboboxInputProps = CerberusPrimitiveProps<ArkComboboxInputProps>\n\n/**\n * The trigger that opens the dropdown.\n */\nexport const ComboboxTrigger = withSlotRecipe<ComboboxTriggerProps>(\n  Combobox.Trigger,\n  'trigger',\n)\nexport type ComboboxTriggerProps =\n  CerberusPrimitiveProps<ArkComboboxTriggerProps>\n\n/**\n * The trigger to clear the combobox input.\n */\nexport const ComboboxClearTrigger = withSlotRecipe<ComboboxClearTriggerProps>(\n  Combobox.ClearTrigger,\n  'clearTrigger',\n)\nexport type ComboboxClearTriggerProps =\n  CerberusPrimitiveProps<ArkComboboxClearTriggerProps>\n\n/**\n * The positioner that wraps the content.\n */\nexport const ComboboxPositioner = withSlotRecipe<ComboboxPositionerProps>(\n  Combobox.Positioner,\n  'positioner',\n)\nexport type ComboboxPositionerProps =\n  CerberusPrimitiveProps<ArkComboboxPositionerProps>\n\n/**\n * The content of the combobox component.\n */\nexport const ComboboxContent = withSlotRecipe<ComboboxContentProps>(\n  Combobox.Content,\n  'content',\n)\nexport type ComboboxContentProps = CerberusPrimitiveProps<\n  ArkComboboxContentProps & ComboboxVariantProps\n>\n\n/**\n * A group of items in the combobox component.\n */\nexport const ComboboxItemGroup = withSlotRecipe<ComboboxItemGroupProps>(\n  Combobox.ItemGroup,\n  'itemGroup',\n)\nexport type ComboboxItemGroupProps =\n  CerberusPrimitiveProps<ArkComboboxItemGroupProps>\n\n/**\n * The label for a group of items in the combobox component.\n */\nexport const ComboboxItemGroupLabel =\n  withSlotRecipe<ComboboxItemGroupLabelProps>(\n    Combobox.ItemGroupLabel,\n    'itemGroupLabel',\n  )\nexport type ComboboxItemGroupLabelProps =\n  CerberusPrimitiveProps<ArkComboboxItemGroupLabelProps>\n\n/**\n * An individual item in the combobox component.\n */\nexport const ComboboxItem = withSlotRecipe<ComboboxItemProps>(\n  Combobox.Item,\n  'item',\n)\nexport type ComboboxItemProps = CerberusPrimitiveProps<ArkComboboxItemProps>\n\n/**\n * The text that labels a single item of the combobox.\n */\nexport const ComboboxItemText = withSlotRecipe<ComboboxItemTextProps>(\n  Combobox.ItemText,\n  'itemText',\n)\nexport type ComboboxItemTextProps =\n  CerberusPrimitiveProps<ArkComboboxItemTextProps>\n\n/**\n * The indicator that appears when the item has been selected.\n */\nexport const ComboboxItemIndicator = withSlotRecipe<ComboboxItemIndicatorProps>(\n  Combobox.ItemIndicator,\n  'itemIndicator',\n)\nexport type ComboboxItemIndicatorProps =\n  CerberusPrimitiveProps<ArkComboboxItemIndicatorProps>\n\n/**\n * The icon that appears at the start of the combobox input.\n */\nexport const ComboboxStartIcon = withSlotRecipe<ComboboxStartIconProps>(\n  ark.span,\n  'startIcon',\n)\nexport type ComboboxStartIconProps = CerberusPrimitiveProps<\n  HTMLArkProps<'span'>\n>\n\n// We are only doing this to make the API consistent\nexport const ComboItemText = ComboboxItemText\nexport type ComboboxInputValueChangeDetails = Combobox.InputValueChangeDetails\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":";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAeO;AACP,qBAAuC;AAEvC,qBAAoD;;;AClBpD,iBAAwB;AAsEX;AAhDN,IAAM,oBAAN,MAAwB;AAAA,EAG7B,YAAY,QAAkC;AAF9C;AAqCA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wCAAe,CACb,WACA,YAC2B;AAC3B,YAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AACrC,YAAM,KAAK;AAEX,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,MAAI,GAAG,cAAe,GAAG,QAAS,GAAI,aAAmB;AAAA,MACnE;AAEA,UAAI,KAAK,kBAAkB,EAAE,GAAG;AAC9B,cAAM,SAAS,OAAO,OAAO,WAAW,KAAK,GAAG,eAAe,GAAG;AAClE,sBAAc,cAAc;AAAA,MAC9B;AAEA,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,KAAK;AAEX,YAAM,SAAS,KAAK;AAEpB,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,UAAI,KAAK,kBAAkB,EAAE,GAAG;AAC9B,cAAM,SAAS,OAAO,OAAO,WAAW,KAAK,GAAG,eAAe,GAAG;AAClE,sBAAc,cAAc;AAAA,MAC9B;AAEA,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,KAAK;AAEX,YAAM,SAAS,KAAK;AAEpB,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,UAAI,KAAK,kBAAkB,EAAE,GAAG;AAC9B,cAAM,SAAS,OAAO,OAAO,WAAW,KAAK,GAAG,eAAe,GAAG;AAClE,sBAAc,cAAc;AAAA,MAC9B;AAEA,aAAO;AAAA,IACT;AApJE,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,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAkIF;;;ACzJO,SAAS,wBACd,QACA;AACA,SAAO,IAAI,kBAAkB,MAAM;AACrC;;;AFGA,IAAM,EAAE,eAAe,IAAI,wBAAwB,uBAAQ;AAQpD,IAAM,eAAe;AAAA,EAC1B,yBAAS;AAAA,EACT;AACF;AAQO,IAAM,gBAAgB;AAAA,EAC3B,yBAAS;AAAA,EACT;AACF;AAMO,IAAM,kBAAkB;AAAA,EAC7B,yBAAS;AAAA,EACT;AACF;AAOO,IAAM,gBAAgB;AAAA,EAC3B,yBAAS;AAAA,EACT;AACF;AAMO,IAAM,kBAAkB;AAAA,EAC7B,yBAAS;AAAA,EACT;AACF;AAOO,IAAM,uBAAuB;AAAA,EAClC,yBAAS;AAAA,EACT;AACF;AAOO,IAAM,qBAAqB;AAAA,EAChC,yBAAS;AAAA,EACT;AACF;AAOO,IAAM,kBAAkB;AAAA,EAC7B,yBAAS;AAAA,EACT;AACF;AAQO,IAAM,oBAAoB;AAAA,EAC/B,yBAAS;AAAA,EACT;AACF;AAOO,IAAM,yBACX;AAAA,EACE,yBAAS;AAAA,EACT;AACF;AAOK,IAAM,eAAe;AAAA,EAC1B,yBAAS;AAAA,EACT;AACF;AAMO,IAAM,mBAAmB;AAAA,EAC9B,yBAAS;AAAA,EACT;AACF;AAOO,IAAM,wBAAwB;AAAA,EACnC,yBAAS;AAAA,EACT;AACF;AAOO,IAAM,oBAAoB;AAAA,EAC/B,mBAAI;AAAA,EACJ;AACF;AAMO,IAAM,gBAAgB;","names":[]}

package/build/legacy/components/combobox/use-stateful-collection.cjs

@@ -41,23 +41,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;
     });
     /**
@@ -69,8 +74,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,
@@ -88,7 +93,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;
     });
     /**
@@ -105,8 +113,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,
@@ -125,7 +133,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;
@@ -140,8 +151,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/combobox/use-stateful-collection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/combobox/use-stateful-collection.ts","../../../../src/components/select/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useMemo, useState } from 'react'\nimport type { ComboboxInputValueChangeDetails } from '@ark-ui/react/combobox'\nimport type { SelectCollectionItem } from '../select/select'\nimport { createSelectCollection } from '../select/primitives'\n\n/**\n * This module contains a custom hook that provides a stateful collection for\n * the Combobox component.\n */\n\nexport interface StatefulCollectionReturn {\n  /**\n   * The collection of items.\n   */\n  collection: ReturnType<typeof createSelectCollection>\n  /**\n   * The filter value split into an array of characters.\n   */\n  filterChars: string[]\n  /**\n   * The function to handle input changes.\n   */\n  handleInputChange: (details: ComboboxInputValueChangeDetails) => void\n}\n\n/**\n * This hook provides a stateful collection for the Combobox component.\n * It returns a collection of items and a function to handle input changes.\n * @param initialItems - The initial collection of items.\n * @return An object containing the collection and a function to handle input changes.\n */\nexport function useStatefulCollection(\n  initialItems: SelectCollectionItem[] = [],\n): StatefulCollectionReturn {\n  const [items, setItems] = useState(initialItems)\n  const [filterValue, setFilterValue] = useState<string[]>([])\n\n  const collection = useMemo(() => createSelectCollection(items), [items])\n\n  const handleInputChange = useCallback(\n    (details: ComboboxInputValueChangeDetails) => {\n      if (details.inputValue === '') {\n        return setItems(initialItems)\n      }\n      setItems((prev) =>\n        prev.filter((item) =>\n          item.value.includes(details.inputValue.toLowerCase()),\n        ),\n      )\n      setFilterValue(details.inputValue.split(''))\n    },\n    [initialItems],\n  )\n\n  return useMemo(\n    () => ({\n      collection,\n      filterChars: filterValue,\n      handleInputChange,\n    }),\n    [collection, filterValue, handleInputChange],\n  )\n}\n","import {\n  createListCollection,\n  Select,\n  type ListCollection,\n  type SelectClearTriggerProps as ArkSelectClearTrigger,\n  type SelectContentProps as ArkSelectContentProps,\n  type SelectControlProps as ArkSelectControlProps,\n  type SelectHiddenSelectProps as ArkSelectHiddenSelectProps,\n  type SelectIndicatorProps as ArkSelectIndicatorProps,\n  type SelectItemGroupLabelProps as ArkSelectItemGroupLabelProps,\n  type SelectItemGroupProps as ArkSelectItemGroupProps,\n  type SelectItemIndicatorProps as ArkSelectItemIndicatorProps,\n  type SelectItemProps as ArkSelectItemProps,\n  type SelectItemTextProps as ArkSelectItemTextProps,\n  type SelectLabelProps as ArkSelectLabelProps,\n  type SelectPositionerProps as ArkSelectPositionerProps,\n  type SelectRootProps as ArkSelectRootProps,\n  type SelectTriggerProps as ArkSelectTriggerProps,\n  type SelectValueChangeDetails,\n  type SelectValueTextProps as ArkSelectValueTextProps,\n} from '@ark-ui/react/select'\nimport { select, type SelectVariantProps } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\nimport type { SelectCollectionItem } from './select'\n\n/**\n * This module contains the Select primitives\n * @module 'react/select'\n */\n\nconst { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(select)\n\n// Root\n\nexport type SelectRootProps = CerberusPrimitiveProps<\n  ArkSelectRootProps<SelectCollectionItem> & SelectVariantProps\n>\n// @ts-expect-error this is a workaround for the type mismatch WIP\nexport const SelectRoot = withSlotRecipe<SelectRootProps>(Select.Root, 'root')\n\n// Label\n\nexport type SelectLabelProps = CerberusPrimitiveProps<ArkSelectLabelProps>\nexport const SelectLabel = withSlotRecipe<SelectLabelProps>(\n  Select.Label,\n  'label',\n)\n\n// Control\n\nexport type SelectControlProps = CerberusPrimitiveProps<ArkSelectControlProps>\nexport const SelectControl = withNoRecipe<SelectControlProps>(Select.Control)\n\n// Trigger\n\nexport type SelectTriggerProps = CerberusPrimitiveProps<ArkSelectTriggerProps>\nexport const SelectTrigger = withSlotRecipe<SelectTriggerProps>(\n  Select.Trigger,\n  'trigger',\n)\n\n// Value Text\n\nexport type SelectValueTextProps =\n  CerberusPrimitiveProps<ArkSelectValueTextProps>\nexport const SelectValueText = withNoRecipe<SelectValueTextProps>(\n  Select.ValueText,\n)\n\n// Indicator\n\nexport type SelectIndicatorProps =\n  CerberusPrimitiveProps<ArkSelectIndicatorProps>\nexport const SelectIndicator = withSlotRecipe<SelectIndicatorProps>(\n  Select.Indicator,\n  'indicator',\n)\n\n// Clear Trigger\n\nexport type SelectClearTriggerProps =\n  CerberusPrimitiveProps<ArkSelectClearTrigger>\nexport const SelectClearTrigger = withNoRecipe<SelectClearTriggerProps>(\n  Select.ClearTrigger,\n)\n\n// Positioner\n\nexport type SelectPositionerProps =\n  CerberusPrimitiveProps<ArkSelectPositionerProps>\nexport const SelectPositioner = withSlotRecipe<SelectPositionerProps>(\n  Select.Positioner,\n  'positioner',\n)\n\n// Content\n\nexport type SelectContentProps = CerberusPrimitiveProps<\n  ArkSelectContentProps & SelectVariantProps\n>\nexport const SelectContent = withSlotRecipe<SelectContentProps>(\n  Select.Content,\n  'content',\n)\n\n// Item Group\n\nexport type SelectItemGroupProps =\n  CerberusPrimitiveProps<ArkSelectItemGroupProps>\nexport const SelectItemGroup = withNoRecipe<SelectItemGroupProps>(\n  Select.ItemGroup,\n)\n\n// Item Group Label\n\nexport type SelectItemGroupLabelProps =\n  CerberusPrimitiveProps<ArkSelectItemGroupLabelProps>\nexport const SelectItemGroupLabel = withSlotRecipe<SelectItemGroupLabelProps>(\n  Select.ItemGroupLabel,\n  'itemGroupLabel',\n)\n\n// Item\n\nexport type SelectItemProps = CerberusPrimitiveProps<ArkSelectItemProps>\nexport const SelectItem = withSlotRecipe<SelectItemProps>(Select.Item, 'item')\n\n// Item Text\n\nexport type SelectItemTextProps = CerberusPrimitiveProps<ArkSelectItemTextProps>\nexport const SelectItemText = withNoRecipe<SelectItemTextProps>(Select.ItemText)\n\n// Item Indicator\n\nexport type SelectItemIndicatorProps =\n  CerberusPrimitiveProps<ArkSelectItemIndicatorProps>\nexport const SelectItemIndicator = withSlotRecipe<SelectItemIndicatorProps>(\n  Select.ItemIndicator,\n  'itemIndicator',\n)\n\n// Hidden Select\n\nexport type SelectHiddenSelectProps =\n  CerberusPrimitiveProps<ArkSelectHiddenSelectProps>\nexport const SelectHiddenSelect = withNoRecipe<SelectHiddenSelectProps>(\n  Select.HiddenSelect,\n)\n\n// Collection\n\n/**\n * A helper function to create a SelectCollection object.\n * @param collection - An array of SelectCollectionItem objects that matches\n * the following shape:\n * ```ts\n * [{ label: 'Hades', value: 'hades', disabled?: true }]\n * ```\n */\nexport function createSelectCollection(\n  collection: SelectCollectionItem[],\n): ListCollection<SelectCollectionItem> {\n  return createListCollection({\n    items: collection,\n  })\n}\n\nexport type { SelectValueChangeDetails, ListCollection }\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":[]}
+{"version":3,"sources":["../../../../src/components/combobox/use-stateful-collection.ts","../../../../src/components/select/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useMemo, useState } from 'react'\nimport type { ComboboxInputValueChangeDetails } from '@ark-ui/react/combobox'\nimport type { SelectCollectionItem } from '../select/select'\nimport { createSelectCollection } from '../select/primitives'\n\n/**\n * This module contains a custom hook that provides a stateful collection for\n * the Combobox component.\n */\n\nexport interface StatefulCollectionReturn {\n  /**\n   * The collection of items.\n   */\n  collection: ReturnType<typeof createSelectCollection>\n  /**\n   * The filter value split into an array of characters.\n   */\n  filterChars: string[]\n  /**\n   * The function to handle input changes.\n   */\n  handleInputChange: (details: ComboboxInputValueChangeDetails) => void\n}\n\n/**\n * This hook provides a stateful collection for the Combobox component.\n * It returns a collection of items and a function to handle input changes.\n * @param initialItems - The initial collection of items.\n * @return An object containing the collection and a function to handle input changes.\n */\nexport function useStatefulCollection(\n  initialItems: SelectCollectionItem[] = [],\n): StatefulCollectionReturn {\n  const [items, setItems] = useState(initialItems)\n  const [filterValue, setFilterValue] = useState<string[]>([])\n\n  const collection = useMemo(() => createSelectCollection(items), [items])\n\n  const handleInputChange = useCallback(\n    (details: ComboboxInputValueChangeDetails) => {\n      if (details.inputValue === '') {\n        return setItems(initialItems)\n      }\n      setItems((prev) =>\n        prev.filter((item) =>\n          item.value.includes(details.inputValue.toLowerCase()),\n        ),\n      )\n      setFilterValue(details.inputValue.split(''))\n    },\n    [initialItems],\n  )\n\n  return useMemo(\n    () => ({\n      collection,\n      filterChars: filterValue,\n      handleInputChange,\n    }),\n    [collection, filterValue, handleInputChange],\n  )\n}\n","import {\n  createListCollection,\n  Select,\n  type ListCollection,\n  type SelectClearTriggerProps as ArkSelectClearTrigger,\n  type SelectContentProps as ArkSelectContentProps,\n  type SelectControlProps as ArkSelectControlProps,\n  type SelectHiddenSelectProps as ArkSelectHiddenSelectProps,\n  type SelectIndicatorProps as ArkSelectIndicatorProps,\n  type SelectItemGroupLabelProps as ArkSelectItemGroupLabelProps,\n  type SelectItemGroupProps as ArkSelectItemGroupProps,\n  type SelectItemIndicatorProps as ArkSelectItemIndicatorProps,\n  type SelectItemProps as ArkSelectItemProps,\n  type SelectItemTextProps as ArkSelectItemTextProps,\n  type SelectLabelProps as ArkSelectLabelProps,\n  type SelectPositionerProps as ArkSelectPositionerProps,\n  type SelectRootProps as ArkSelectRootProps,\n  type SelectTriggerProps as ArkSelectTriggerProps,\n  type SelectValueChangeDetails,\n  type SelectValueTextProps as ArkSelectValueTextProps,\n} from '@ark-ui/react/select'\nimport { select, type SelectVariantProps } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\nimport type { SelectCollectionItem } from './select'\n\n/**\n * This module contains the Select primitives\n * @module 'react/select'\n */\n\nconst { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(select)\n\n// Root\n\nexport type SelectRootProps = CerberusPrimitiveProps<\n  ArkSelectRootProps<SelectCollectionItem> & SelectVariantProps\n>\n// @ts-expect-error this is a workaround for the type mismatch WIP\nexport const SelectRoot = withSlotRecipe<SelectRootProps>(Select.Root, 'root')\n\n// Label\n\nexport type SelectLabelProps = CerberusPrimitiveProps<ArkSelectLabelProps>\nexport const SelectLabel = withSlotRecipe<SelectLabelProps>(\n  Select.Label,\n  'label',\n)\n\n// Control\n\nexport type SelectControlProps = CerberusPrimitiveProps<ArkSelectControlProps>\nexport const SelectControl = withNoRecipe<SelectControlProps>(Select.Control)\n\n// Trigger\n\nexport type SelectTriggerProps = CerberusPrimitiveProps<ArkSelectTriggerProps>\nexport const SelectTrigger = withSlotRecipe<SelectTriggerProps>(\n  Select.Trigger,\n  'trigger',\n)\n\n// Value Text\n\nexport type SelectValueTextProps =\n  CerberusPrimitiveProps<ArkSelectValueTextProps>\nexport const SelectValueText = withNoRecipe<SelectValueTextProps>(\n  Select.ValueText,\n)\n\n// Indicator\n\nexport type SelectIndicatorProps =\n  CerberusPrimitiveProps<ArkSelectIndicatorProps>\nexport const SelectIndicator = withSlotRecipe<SelectIndicatorProps>(\n  Select.Indicator,\n  'indicator',\n)\n\n// Clear Trigger\n\nexport type SelectClearTriggerProps =\n  CerberusPrimitiveProps<ArkSelectClearTrigger>\nexport const SelectClearTrigger = withNoRecipe<SelectClearTriggerProps>(\n  Select.ClearTrigger,\n)\n\n// Positioner\n\nexport type SelectPositionerProps =\n  CerberusPrimitiveProps<ArkSelectPositionerProps>\nexport const SelectPositioner = withSlotRecipe<SelectPositionerProps>(\n  Select.Positioner,\n  'positioner',\n)\n\n// Content\n\nexport type SelectContentProps = CerberusPrimitiveProps<\n  ArkSelectContentProps & SelectVariantProps\n>\nexport const SelectContent = withSlotRecipe<SelectContentProps>(\n  Select.Content,\n  'content',\n)\n\n// Item Group\n\nexport type SelectItemGroupProps =\n  CerberusPrimitiveProps<ArkSelectItemGroupProps>\nexport const SelectItemGroup = withNoRecipe<SelectItemGroupProps>(\n  Select.ItemGroup,\n)\n\n// Item Group Label\n\nexport type SelectItemGroupLabelProps =\n  CerberusPrimitiveProps<ArkSelectItemGroupLabelProps>\nexport const SelectItemGroupLabel = withSlotRecipe<SelectItemGroupLabelProps>(\n  Select.ItemGroupLabel,\n  'itemGroupLabel',\n)\n\n// Item\n\nexport type SelectItemProps = CerberusPrimitiveProps<ArkSelectItemProps>\nexport const SelectItem = withSlotRecipe<SelectItemProps>(Select.Item, 'item')\n\n// Item Text\n\nexport type SelectItemTextProps = CerberusPrimitiveProps<ArkSelectItemTextProps>\nexport const SelectItemText = withNoRecipe<SelectItemTextProps>(Select.ItemText)\n\n// Item Indicator\n\nexport type SelectItemIndicatorProps =\n  CerberusPrimitiveProps<ArkSelectItemIndicatorProps>\nexport const SelectItemIndicator = withSlotRecipe<SelectItemIndicatorProps>(\n  Select.ItemIndicator,\n  'itemIndicator',\n)\n\n// Hidden Select\n\nexport type SelectHiddenSelectProps =\n  CerberusPrimitiveProps<ArkSelectHiddenSelectProps>\nexport const SelectHiddenSelect = withNoRecipe<SelectHiddenSelectProps>(\n  Select.HiddenSelect,\n)\n\n// Collection\n\n/**\n * A helper function to create a SelectCollection object.\n * @param collection - An array of SelectCollectionItem objects that matches\n * the following shape:\n * ```ts\n * [{ label: 'Hades', value: 'hades', disabled?: true }]\n * ```\n */\nexport function createSelectCollection(\n  collection: SelectCollectionItem[],\n): ListCollection<SelectCollectionItem> {\n  return createListCollection({\n    items: collection,\n  })\n}\n\nexport type { SelectValueChangeDetails, ListCollection }\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/cta-dialog/index.cjs

@@ -100,23 +100,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_runtime4.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+        return /* @__PURE__ */ (0, import_jsx_runtime4.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;
     });
     /**
@@ -128,8 +133,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,
@@ -147,7 +152,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;
     });
     /**
@@ -164,8 +172,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,
@@ -184,7 +192,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;
@@ -199,8 +210,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;
   }
 };