@cerberus-design/react 0.18.4 → 0.19.0

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

@@ -4,6 +4,7 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -17,6 +18,7 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/combobox/combobox.tsx
 var combobox_exports = {};
@@ -37,22 +39,39 @@ function useCerberusContext() {
   return context;
 }
 
-// src/components/Portal.tsx
-var import_react2 = require("@ark-ui/react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function Portal(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Portal, { ...props });
+// src/utils/index.ts
+function splitProps(props, ...keyGroups) {
+  const result = keyGroups.map(() => ({}));
+  const rest = {};
+  for (const key in props) {
+    let assigned = false;
+    for (let i = 0; i < keyGroups.length; i++) {
+      if (keyGroups[i].includes(key)) {
+        result[i][key] = props[key];
+        assigned = true;
+        break;
+      }
+    }
+    if (!assigned) {
+      rest[key] = props[key];
+    }
+  }
+  return [...result, rest];
 }
 
-// src/components/Show.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+// src/components/portal/portal.tsx
+var import_react2 = require("@ark-ui/react");
+var Portal = import_react2.Portal;
+
+// src/components/show/show.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function Show(props) {
   const { when, children, fallback } = props;
   if (when) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
   }
   if (fallback) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fallback });
   }
   return null;
 }
@@ -61,127 +80,176 @@ function Show(props) {
 var import_combobox = require("@ark-ui/react/combobox");
 var import_factory = require("@ark-ui/react/factory");
 var import_recipes = require("styled-system/recipes");
+
+// src/system/primitive-factory.tsx
 var import_css = require("styled-system/css");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function ComboboxRoot(props) {
-  const { size, ...rootProps } = props;
-  const styles = (0, import_recipes.combobox)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_combobox.Combobox.Root,
-    {
-      ...rootProps,
-      className: (0, import_css.cx)(styles.root, rootProps.className)
-    }
-  );
-}
-function ComboboxLabel(props) {
-  const styles = (0, import_recipes.combobox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_combobox.Combobox.Label, { ...props, className: (0, import_css.cx)(styles.label, props.className) });
-}
-function ComboboxControl(props) {
-  const styles = (0, import_recipes.combobox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_combobox.Combobox.Control,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.control, props.className)
-    }
-  );
-}
-function ComboboxInput(props) {
-  const styles = (0, import_recipes.combobox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_combobox.Combobox.Input, { ...props, className: (0, import_css.cx)(styles.input, props.className) });
-}
-function ComboboxTrigger(props) {
-  const styles = (0, import_recipes.combobox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_combobox.Combobox.Trigger,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.trigger, props.className)
-    }
-  );
-}
-function ComboboxClearTrigger(props) {
-  const styles = (0, import_recipes.combobox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_combobox.Combobox.ClearTrigger,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.clearTrigger, props.className)
-    }
-  );
-}
-function ComboboxPositioner(props) {
-  const styles = (0, import_recipes.combobox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_combobox.Combobox.Positioner,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.positioner, props.className)
-    }
-  );
-}
-function ComboboxContent(props) {
-  const { size, ...contentProps } = props;
-  const styles = (0, import_recipes.combobox)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_combobox.Combobox.Content,
-    {
-      ...contentProps,
-      className: (0, import_css.cx)(styles.content, contentProps.className)
-    }
-  );
-}
-function ComboboxItemGroup(props) {
-  const styles = (0, import_recipes.combobox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_combobox.Combobox.ItemGroup,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.itemGroup, props.className)
-    }
-  );
-}
-function ComboboxItemGroupLabel(props) {
-  const styles = (0, import_recipes.combobox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_combobox.Combobox.ItemGroupLabel,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.itemGroupLabel, props.className)
-    }
-  );
-}
-function ComboboxItem(props) {
-  const styles = (0, import_recipes.combobox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_combobox.Combobox.Item, { ...props, className: (0, import_css.cx)(styles.item, props.className) });
-}
-function ComboboxItemText(props) {
-  const styles = (0, import_recipes.combobox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_combobox.Combobox.ItemText,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.itemText, props.className)
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CerberusPrimitive = class {
+  constructor(recipe) {
+    __publicField(this, "recipe");
+    /**
+     * Creates a Cerberus component with bare features and no recipe.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @returns A new React component that applies Cerberus features to the
+     * original component.
+     * @example
+     * ```typescript
+     * const { withNoRecipe } = createCerberusPrimitive(button)
+     * const Button = withNoRecipe(RawButton)
+     * ```
+     */
+    __publicField(this, "withNoRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      this.validateComponent(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_runtime3.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with the given recipe.
+     * @param Component - The React component to enhance with the recipe.
+     * @param options - Options for the recipe.
+     * @returns A new React component that applies the recipe to the original
+     * component.
+     */
+    __publicField(this, "withRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const recipeStyles = recipe(variantOptions);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, recipeStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with a slot recipe applied.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @param recipe - The slot recipe to apply to the component.
+     * @returns A new React component that applies Cerberus features and the
+     * specified slot recipe to the original component.
+     * @example
+     * ```typescript
+     * const { withSlotRecipe } = createCerberusPrimitive(field)
+     * const Field = withSlotRecipe(RawField, field)
+     * ```
+     */
+    __publicField(this, "withSlotRecipe", (Component, slot, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const styles = recipe(variantOptions);
+        const slotStyles = styles[slot];
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, slotStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    this.recipe = recipe ?? null;
+  }
+  hasStyles(styles) {
+    if (styles) {
+      return {
+        className: styles
+      };
     }
-  );
-}
-function ComboboxItemIndicator(props) {
-  const styles = (0, import_recipes.combobox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_combobox.Combobox.ItemIndicator,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.itemIndicator, props.className)
+    return {};
+  }
+  validateComponent(Component) {
+    if (typeof Component !== "function" && typeof Component !== "object") {
+      throw new Error("Expected a React component as the first argument.");
     }
-  );
-}
-function ComboboxStartIcon(props) {
-  const styles = (0, import_recipes.combobox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_factory.ark.span, { ...props, className: styles.startIcon });
+  }
+};
+
+// src/system/index.ts
+function createCerberusPrimitive(recipe) {
+  return new CerberusPrimitive(recipe);
 }
 
+// src/components/combobox/primitives.tsx
+var { withSlotRecipe } = createCerberusPrimitive(import_recipes.combobox);
+var ComboboxRoot = withSlotRecipe(
+  import_combobox.Combobox.Root,
+  "root"
+);
+var ComboboxLabel = withSlotRecipe(
+  import_combobox.Combobox.Label,
+  "label"
+);
+var ComboboxControl = withSlotRecipe(
+  import_combobox.Combobox.Control,
+  "control"
+);
+var ComboboxInput = withSlotRecipe(
+  import_combobox.Combobox.Input,
+  "input"
+);
+var ComboboxTrigger = withSlotRecipe(
+  import_combobox.Combobox.Trigger,
+  "trigger"
+);
+var ComboboxClearTrigger = withSlotRecipe(
+  import_combobox.Combobox.ClearTrigger,
+  "clearTrigger"
+);
+var ComboboxPositioner = withSlotRecipe(
+  import_combobox.Combobox.Positioner,
+  "positioner"
+);
+var ComboboxContent = withSlotRecipe(
+  import_combobox.Combobox.Content,
+  "content"
+);
+var ComboboxItemGroup = withSlotRecipe(
+  import_combobox.Combobox.ItemGroup,
+  "itemGroup"
+);
+var ComboboxItemGroupLabel = withSlotRecipe(
+  import_combobox.Combobox.ItemGroupLabel,
+  "itemGroupLabel"
+);
+var ComboboxItem = withSlotRecipe(
+  import_combobox.Combobox.Item,
+  "item"
+);
+var ComboboxItemText = withSlotRecipe(
+  import_combobox.Combobox.ItemText,
+  "itemText"
+);
+var ComboboxItemIndicator = withSlotRecipe(
+  import_combobox.Combobox.ItemIndicator,
+  "itemIndicator"
+);
+var ComboboxStartIcon = withSlotRecipe(
+  import_factory.ark.span,
+  "startIcon"
+);
+
 // src/components/combobox/parts.ts
 var ComboboxParts = {
   Root: ComboboxRoot,
@@ -200,26 +268,31 @@ var ComboboxParts = {
 };
 
 // src/components/combobox/combobox.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Combobox2(props) {
-  const { label, children, startIcon, ...rootProps } = props;
+  const [{ startIcon, label, ...elProps }, rootProps] = splitProps(props, [
+    "label",
+    "children",
+    "startIcon",
+    "container"
+  ]);
   const { icons } = useCerberusContext();
   const { selectArrow: SelectArrow, close: CloseIcon } = icons;
   const hasStartIcon = Boolean(startIcon);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ComboboxParts.Root, { ...rootProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Show, { when: label, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComboboxParts.Label, { children: label }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ComboboxParts.Control, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Show, { when: hasStartIcon, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComboboxStartIcon, { children: startIcon }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ComboboxParts.Root, { ...rootProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: label, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComboboxParts.Label, { children: label }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ComboboxParts.Control, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: hasStartIcon, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComboboxStartIcon, { children: startIcon }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         ComboboxParts.Input,
         {
           ...hasStartIcon && { "data-has": "start-indicator" }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComboboxParts.ClearTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComboboxParts.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectArrow, {}) })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComboboxParts.ClearTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CloseIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComboboxParts.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SelectArrow, {}) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComboboxParts.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ComboboxParts.Content, { size: rootProps.size, children }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Portal, { container: elProps.container, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComboboxParts.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ComboboxParts.Content, { size: rootProps.size, children: elProps.children }) }) })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/combobox/combobox.tsx","../../../../src/context/cerberus.tsx","../../../../src/components/Portal.tsx","../../../../src/components/Show.tsx","../../../../src/components/combobox/primitives.tsx","../../../../src/components/combobox/parts.ts"],"sourcesContent":["'use client'\n\nimport type { ComboboxRootProps } from '@ark-ui/react/combobox'\nimport type { ComboboxVariantProps } from 'styled-system/recipes'\nimport { useCerberusContext } from '../../context/cerberus'\nimport type { SelectCollectionItem } from '../select/select'\nimport { type FieldInputProps } from '../field/index'\nimport { Portal } from '../Portal'\nimport { Show } from '../Show'\nimport { ComboboxParts } from './parts'\nimport { ComboboxStartIcon } from './primitives'\n\nexport interface ComboboxProps\n  extends ComboboxRootProps<SelectCollectionItem>,\n    ComboboxVariantProps {\n  /**\n   * The label that appears above the combobox input.\n   */\n  label?: string\n  /**\n   * The icon that appears at the start of the combobox input.\n   */\n  startIcon?: FieldInputProps['startIcon']\n}\n\nexport function Combobox(props: ComboboxProps) {\n  const { label, children, startIcon, ...rootProps } = props\n\n  const { icons } = useCerberusContext()\n  const { selectArrow: SelectArrow, close: CloseIcon } = icons\n\n  const hasStartIcon = Boolean(startIcon)\n\n  return (\n    <ComboboxParts.Root {...rootProps}>\n      <Show when={label}>\n        <ComboboxParts.Label>{label}</ComboboxParts.Label>\n      </Show>\n\n      <ComboboxParts.Control>\n        <Show when={hasStartIcon}>\n          <ComboboxStartIcon>{startIcon}</ComboboxStartIcon>\n        </Show>\n\n        <ComboboxParts.Input\n          {...(hasStartIcon && { 'data-has': 'start-indicator' })}\n        />\n\n        <ComboboxParts.ClearTrigger>\n          <CloseIcon />\n        </ComboboxParts.ClearTrigger>\n        <ComboboxParts.Trigger>\n          <SelectArrow />\n        </ComboboxParts.Trigger>\n      </ComboboxParts.Control>\n\n      <Portal>\n        <ComboboxParts.Positioner>\n          <ComboboxParts.Content size={rootProps.size}>\n            {children}\n          </ComboboxParts.Content>\n        </ComboboxParts.Positioner>\n      </Portal>\n    </ComboboxParts.Root>\n  )\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import { Portal as ArkPortal, type PortalProps } from '@ark-ui/react'\nimport type { PropsWithChildren } from 'react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type { PortalProps }\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n  return <ArkPortal {...props} />\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n","import {\n  Combobox,\n  type ComboboxClearTriggerProps,\n  type ComboboxContentProps,\n  type ComboboxControlProps,\n  type ComboboxInputProps,\n  type ComboboxItemGroupLabelProps,\n  type ComboboxItemGroupProps,\n  type ComboboxItemIndicatorProps,\n  type ComboboxItemProps,\n  type ComboboxItemTextProps,\n  type ComboboxLabelProps,\n  type ComboboxPositionerProps,\n  type ComboboxRootProps,\n  type ComboboxTriggerProps,\n} from '@ark-ui/react/combobox'\nimport { ark } from '@ark-ui/react/factory'\nimport type { SelectCollectionItem } from '../select/select'\nimport { combobox, type ComboboxVariantProps } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\nimport type { PropsWithChildren } from 'react'\n\n/**\n * This module contains the primitives of the Combobox.\n * @module 'combobox/primitives'\n */\n\n/**\n * The ComboboxRoot component is the context provider for the Combobox\n * component.\n */\nexport function ComboboxRoot(\n  props: ComboboxRootProps<SelectCollectionItem> & ComboboxVariantProps,\n) {\n  const { size, ...rootProps } = props\n  const styles = combobox({ size })\n  return (\n    <Combobox.Root\n      {...rootProps}\n      className={cx(styles.root, rootProps.className)}\n    />\n  )\n}\n\n/**\n * The label that appears above the combobox input.\n */\nexport function ComboboxLabel(props: ComboboxLabelProps) {\n  const styles = combobox()\n  return (\n    <Combobox.Label {...props} className={cx(styles.label, props.className)} />\n  )\n}\n\n/**\n * The control that wraps the combobox input.\n */\nexport function ComboboxControl(props: ComboboxControlProps) {\n  const styles = combobox()\n  return (\n    <Combobox.Control\n      {...props}\n      className={cx(styles.control, props.className)}\n    />\n  )\n}\n\n/**\n * The input of the combobox.\n */\nexport function ComboboxInput(props: ComboboxInputProps) {\n  const styles = combobox()\n  return (\n    <Combobox.Input {...props} className={cx(styles.input, props.className)} />\n  )\n}\n\n/**\n * The trigger that opens the dropdown.\n */\nexport function ComboboxTrigger(props: ComboboxTriggerProps) {\n  const styles = combobox()\n  return (\n    <Combobox.Trigger\n      {...props}\n      className={cx(styles.trigger, props.className)}\n    />\n  )\n}\n\n/**\n * The trigger to clear the combobox input.\n */\nexport function ComboboxClearTrigger(props: ComboboxClearTriggerProps) {\n  const styles = combobox()\n  return (\n    <Combobox.ClearTrigger\n      {...props}\n      className={cx(styles.clearTrigger, props.className)}\n    />\n  )\n}\n\n/**\n * The positioner that wraps the content.\n */\nexport function ComboboxPositioner(props: ComboboxPositionerProps) {\n  const styles = combobox()\n  return (\n    <Combobox.Positioner\n      {...props}\n      className={cx(styles.positioner, props.className)}\n    />\n  )\n}\n\n/**\n * The content of the combobox component.\n */\nexport function ComboboxContent(\n  props: ComboboxContentProps & ComboboxVariantProps,\n) {\n  const { size, ...contentProps } = props\n  const styles = combobox({ size })\n  return (\n    <Combobox.Content\n      {...contentProps}\n      className={cx(styles.content, contentProps.className)}\n    />\n  )\n}\n\n/**\n * A group of items in the combobox component.\n */\nexport function ComboboxItemGroup(props: ComboboxItemGroupProps) {\n  const styles = combobox()\n  return (\n    <Combobox.ItemGroup\n      {...props}\n      className={cx(styles.itemGroup, props.className)}\n    />\n  )\n}\n\n/**\n * The label for a group of items in the combobox component.\n */\nexport function ComboboxItemGroupLabel(props: ComboboxItemGroupLabelProps) {\n  const styles = combobox()\n  return (\n    <Combobox.ItemGroupLabel\n      {...props}\n      className={cx(styles.itemGroupLabel, props.className)}\n    />\n  )\n}\n\n/**\n * An individual item in the combobox component.\n */\nexport function ComboboxItem(props: ComboboxItemProps) {\n  const styles = combobox()\n  return (\n    <Combobox.Item {...props} className={cx(styles.item, props.className)} />\n  )\n}\n\n/**\n * The text that labels a single item of the combobox.\n */\nexport function ComboboxItemText(props: ComboboxItemTextProps) {\n  const styles = combobox()\n  return (\n    <Combobox.ItemText\n      {...props}\n      className={cx(styles.itemText, props.className)}\n    />\n  )\n}\n\n/**\n * The indicator that appears when the item has been selected.\n */\nexport function ComboboxItemIndicator(props: ComboboxItemIndicatorProps) {\n  const styles = combobox()\n  return (\n    <Combobox.ItemIndicator\n      {...props}\n      className={cx(styles.itemIndicator, props.className)}\n    />\n  )\n}\n\n/**\n * The icon that appears at the start of the combobox input.\n */\nexport function ComboboxStartIcon(props: PropsWithChildren) {\n  const styles = combobox()\n  return <ark.span {...props} className={styles.startIcon} />\n}\n\n// We are only doing this to make the API consistent\nexport const ComboItemText = ComboboxItemText\n\nexport type ComboboxInputValueChangeDetails = Combobox.InputValueChangeDetails\n","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"],"mappings":"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","names":["Combobox","import_react","import_jsx_runtime","ArkPortal","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","Combobox"]}
+{"version":3,"sources":["../../../../src/components/combobox/combobox.tsx","../../../../src/context/cerberus.tsx","../../../../src/utils/index.ts","../../../../src/components/portal/portal.tsx","../../../../src/components/show/show.tsx","../../../../src/components/combobox/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts","../../../../src/components/combobox/parts.ts"],"sourcesContent":["'use client'\n\nimport type { ComboboxRootProps } from '@ark-ui/react/combobox'\nimport type { ComboboxVariantProps } from 'styled-system/recipes'\nimport type { RefObject } from 'react'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { splitProps } from '../../utils/index'\nimport type { SelectCollectionItem } from '../select/select'\nimport { type FieldInputElProps } from '../field/index'\nimport { Portal } from '../portal/index'\nimport { Show } from '../show/index'\nimport { ComboboxParts } from './parts'\nimport { ComboboxStartIcon } from './primitives'\n\nexport interface ComboboxProps\n  extends ComboboxRootProps<SelectCollectionItem>,\n    ComboboxVariantProps {\n  /**\n   * The label that appears above the combobox input.\n   */\n  label?: string\n  /**\n   * The icon that appears at the start of the combobox input.\n   */\n  startIcon?: FieldInputElProps['startIcon']\n  /**\n   * The container element to render the Select dropdown in. This is used\n   * to render the Select dropdown in a specific context, such as a modal.\n   * @default document.body\n   */\n  container?: RefObject<HTMLElement | null>\n}\n\nexport function Combobox(props: ComboboxProps) {\n  const [{ startIcon, label, ...elProps }, rootProps] = splitProps(props, [\n    'label',\n    'children',\n    'startIcon',\n    'container',\n  ])\n\n  const { icons } = useCerberusContext()\n  const { selectArrow: SelectArrow, close: CloseIcon } = icons\n\n  const hasStartIcon = Boolean(startIcon)\n\n  return (\n    <ComboboxParts.Root {...rootProps}>\n      <Show when={label}>\n        <ComboboxParts.Label>{label}</ComboboxParts.Label>\n      </Show>\n\n      <ComboboxParts.Control>\n        <Show when={hasStartIcon}>\n          <ComboboxStartIcon>{startIcon}</ComboboxStartIcon>\n        </Show>\n\n        <ComboboxParts.Input\n          {...(hasStartIcon && { 'data-has': 'start-indicator' })}\n        />\n\n        <ComboboxParts.ClearTrigger>\n          <CloseIcon />\n        </ComboboxParts.ClearTrigger>\n        <ComboboxParts.Trigger>\n          <SelectArrow />\n        </ComboboxParts.Trigger>\n      </ComboboxParts.Control>\n\n      <Portal container={elProps.container}>\n        <ComboboxParts.Positioner>\n          <ComboboxParts.Content size={rootProps.size}>\n            {elProps.children}\n          </ComboboxParts.Content>\n        </ComboboxParts.Positioner>\n      </Portal>\n    </ComboboxParts.Root>\n  )\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n  if (count > 99) return '99+'\n  return count.toString()\n}\n\n/**\n * Splits the properties of an object into multiple groups based on lists of keys.\n * @param props - The object to split.\n * @param keyGroups - The lists of keys to include in each group.\n * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.\n */\nexport function splitProps<T extends object>(\n  props: T,\n  ...keyGroups: (keyof T)[][]\n): { [K in keyof T]?: T[K] }[] {\n  const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })\n  const rest = {} as { [K in keyof T]?: T[K] }\n\n  for (const key in props) {\n    let assigned = false\n    for (let i = 0; i < keyGroups.length; i++) {\n      if (keyGroups[i].includes(key as keyof T)) {\n        result[i][key as keyof T] = props[key]\n        assigned = true\n        break\n      }\n    }\n    if (!assigned) {\n      rest[key as keyof T] = props[key]\n    }\n  }\n\n  return [...result, rest]\n}\n\nexport * from './localStorage'\n","import { Portal as ArkPortal, type PortalProps } from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type { PortalProps }\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n *   return (\n *     <Portal>\n *       <div>Portal Content outside of the React VDom tree</div>\n *     </Portal>\n *   )\n * }\n */\nexport const Portal = ArkPortal\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\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 { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const recipeStyles = recipe(variantOptions)\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, recipeStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with a slot recipe applied.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @param recipe - The slot recipe to apply to the component.\n   * @returns A new React component that applies Cerberus features and the\n   * specified slot recipe to the original component.\n   * @example\n   * ```typescript\n   * const { withSlotRecipe } = createCerberusPrimitive(field)\n   * const Field = withSlotRecipe(RawField, field)\n   * ```\n   */\n  withSlotRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    slot: keyof RecipeVariantRecord,\n    options?: WithRecipeOptions,\n  ) => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const styles = recipe(variantOptions)\n      const slotStyles = styles[slot as keyof typeof styles]\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, slotStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n}\n","import { CerberusPrimitive } from './primitive-factory'\nimport type { CerberusFactory, CerberusPrimitiveRecipe } from './types'\nimport { cerberusFactoryProxy } from './factory'\n\n/**\n * This module contains the user interface for creating Cerberus primitives.\n * @module @cerberus/core/system/create-cerb-primitive\n */\n\n/**\n * A factory function that creates a Cerberus primitive instance with the given\n * recipe.\n * @param recipe\n * @returns An object with three methods: `withNoRecipe`, `withRecipe`, and `withSlotRecipe` that\n * apply the recipes and special Cerberus helpers like `css`.\n *\n * @example\n * ```tsx\n * const { withRecipe } = createCerberusPrimitive(myCustomRecipe);\n * export const Button = withRecipe(MyCustomButton)\n * ```\n */\nexport function createCerberusPrimitive<T extends CerberusPrimitiveRecipe>(\n  recipe?: T,\n) {\n  return new CerberusPrimitive(recipe)\n}\n\n/**\n * A utility function to access Cerberus components by their name.\n * @param component - The name of the Cerberus component to access.\n * @returns The Cerberus component corresponding to the provided name.\n * @throws An error if the component name is not valid.\n *\n * @example\n * ```tsx\n * import { cerberus } from '@cerberus/react'\n * const Button = cerberus('button')\n *\n * <Button css={{ color: 'blue' }} asChild>\n *  <Link href=\"/some-page\">Click me</Link>\n * </Button>\n * ```\n */\nexport const cerberus = cerberusFactoryProxy as CerberusFactory\n\nexport * from './types'\n","import 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"],"mappings":"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","names":["Combobox","import_react","ArkPortal","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","Combobox"]}