@cerberus-design/react 0.16.0-next-1e5283a → 0.16.0-next-004ae01

package/build/modern/_tsup-dts-rollup.d.ts

@@ -26,6 +26,23 @@ import { closestCorners } from '@dnd-kit/core';
 import { Collision } from '@dnd-kit/core';
 import { CollisionDescriptor } from '@dnd-kit/core';
 import { CollisionDetection } from '@dnd-kit/core';
+import { Combobox as Combobox_2 } from '@ark-ui/react/combobox';
+import { ComboboxClearTriggerProps } from '@ark-ui/react/combobox';
+import { ComboboxContentProps } from '@ark-ui/react/combobox';
+import { ComboboxControlProps } from '@ark-ui/react/combobox';
+import { ComboboxInputProps } from '@ark-ui/react/combobox';
+import type { ComboboxInputValueChangeDetails as ComboboxInputValueChangeDetails_2 } from '@ark-ui/react/combobox';
+import { ComboboxItemGroupLabelProps } from '@ark-ui/react/combobox';
+import { ComboboxItemGroupProps } from '@ark-ui/react/combobox';
+import { ComboboxItemIndicatorProps } from '@ark-ui/react/combobox';
+import { ComboboxItemProps } from '@ark-ui/react/combobox';
+import type { ComboboxItemProps as ComboboxItemProps_2 } from '@ark-ui/react';
+import { ComboboxItemTextProps } from '@ark-ui/react/combobox';
+import { ComboboxLabelProps } from '@ark-ui/react/combobox';
+import { ComboboxPositionerProps } from '@ark-ui/react/combobox';
+import { ComboboxRootProps } from '@ark-ui/react/combobox';
+import { ComboboxTriggerProps } from '@ark-ui/react/combobox';
+import { ComboboxVariantProps } from '@cerberus/styled-system/recipes';
 import { Context } from 'react';
 import { Data } from '@dnd-kit/core';
 import { DataRef } from '@dnd-kit/core';
@@ -925,6 +942,254 @@ declare type ColorModes = 'light' | 'dark' | 'system';
 export { ColorModes }
 export { ColorModes as ColorModes_alias_1 }
 
+declare function Combobox(props: ComboboxProps): JSX_2.Element;
+export { Combobox }
+export { Combobox as Combobox_alias_1 }
+export { Combobox as Combobox_alias_2 }
+
+/**
+ * The trigger to clear the combobox input.
+ */
+declare function ComboboxClearTrigger(props: ComboboxClearTriggerProps): JSX_2.Element;
+export { ComboboxClearTrigger }
+export { ComboboxClearTrigger as ComboboxClearTrigger_alias_1 }
+export { ComboboxClearTrigger as ComboboxClearTrigger_alias_2 }
+
+/**
+ * The content of the combobox component.
+ */
+declare function ComboboxContent(props: ComboboxContentProps & ComboboxVariantProps): JSX_2.Element;
+export { ComboboxContent }
+export { ComboboxContent as ComboboxContent_alias_1 }
+export { ComboboxContent as ComboboxContent_alias_2 }
+
+/**
+ * The control that wraps the combobox input.
+ */
+declare function ComboboxControl(props: ComboboxControlProps): JSX_2.Element;
+export { ComboboxControl }
+export { ComboboxControl as ComboboxControl_alias_1 }
+export { ComboboxControl as ComboboxControl_alias_2 }
+
+/**
+ * The input of the combobox.
+ */
+declare function ComboboxInput(props: ComboboxInputProps): JSX_2.Element;
+export { ComboboxInput }
+export { ComboboxInput as ComboboxInput_alias_1 }
+export { ComboboxInput as ComboboxInput_alias_2 }
+
+declare type ComboboxInputValueChangeDetails = Combobox_2.InputValueChangeDetails;
+export { ComboboxInputValueChangeDetails }
+export { ComboboxInputValueChangeDetails as ComboboxInputValueChangeDetails_alias_1 }
+export { ComboboxInputValueChangeDetails as ComboboxInputValueChangeDetails_alias_2 }
+
+/**
+ * An individual item in the combobox component.
+ */
+declare function ComboboxItem(props: ComboboxItemProps): JSX_2.Element;
+export { ComboboxItem }
+export { ComboboxItem as ComboboxItem_alias_1 }
+export { ComboboxItem as ComboboxItem_alias_2 }
+
+/**
+ * A group of items in the combobox component.
+ */
+declare function ComboboxItemGroup(props: ComboboxItemGroupProps): JSX_2.Element;
+export { ComboboxItemGroup }
+export { ComboboxItemGroup as ComboboxItemGroup_alias_1 }
+export { ComboboxItemGroup as ComboboxItemGroup_alias_2 }
+
+/**
+ * The label for a group of items in the combobox component.
+ */
+declare function ComboboxItemGroupLabel(props: ComboboxItemGroupLabelProps): JSX_2.Element;
+export { ComboboxItemGroupLabel }
+export { ComboboxItemGroupLabel as ComboboxItemGroupLabel_alias_1 }
+export { ComboboxItemGroupLabel as ComboboxItemGroupLabel_alias_2 }
+
+/**
+ * The indicator that appears when the item has been selected.
+ */
+declare function ComboboxItemIndicator(props: ComboboxItemIndicatorProps): JSX_2.Element;
+export { ComboboxItemIndicator }
+export { ComboboxItemIndicator as ComboboxItemIndicator_alias_1 }
+export { ComboboxItemIndicator as ComboboxItemIndicator_alias_2 }
+
+/**
+ * The text that labels a single item of the combobox.
+ */
+declare function ComboboxItemText(props: ComboboxItemTextProps): JSX_2.Element;
+export { ComboboxItemText }
+export { ComboboxItemText as ComboboxItemText_alias_1 }
+export { ComboboxItemText as ComboboxItemText_alias_2 }
+
+/**
+ * The label that appears above the combobox input.
+ */
+declare function ComboboxLabel(props: ComboboxLabelProps): JSX_2.Element;
+export { ComboboxLabel }
+export { ComboboxLabel as ComboboxLabel_alias_1 }
+export { ComboboxLabel as ComboboxLabel_alias_2 }
+
+/**
+ * An Object containing the parts of the Radio component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the ComboboxParts object and
+ * the entire family of components vs. only what you use.
+ */
+declare const ComboboxParts: ComboboxPartsValue;
+export { ComboboxParts }
+export { ComboboxParts as ComboboxParts_alias_1 }
+export { ComboboxParts as ComboboxParts_alias_2 }
+
+/**
+ * This module contains the parts of the Combobox parts.
+ * @module 'combobox/parts'
+ */
+declare interface ComboboxPartsValue {
+    /**
+     * The context provider for the Select component.
+     */
+    Root: ElementType;
+    /**
+     * The label that appears above the select input.
+     */
+    Label: ElementType;
+    /**
+     * The control that wraps the select trigger.
+     */
+    Control: ElementType;
+    /**
+     * The filterable input of the combobox.
+     */
+    Input: ElementType;
+    /**
+     * The trigger that opens the dropdown.
+     */
+    Trigger: ElementType;
+    /**
+     * The trigger to clear the select input.
+     */
+    ClearTrigger: ElementType;
+    /**
+     * The positioner that wraps the content.
+     */
+    Positioner: ElementType;
+    /**
+     * The content of the select component.
+     */
+    Content: ElementType;
+    /**
+     * A group of items in the select component.
+     */
+    ItemGroup: ElementType;
+    /**
+     * The label for a group of items in the select component.
+     */
+    ItemGroupLabel: ElementType;
+    /**
+     * An individual item in the select component.
+     */
+    Item: ElementType;
+    /**
+     * The text that labels a single radio of the field.
+     */
+    ItemText: ElementType;
+    /**
+     * The indicator that appears when the item has been selected.
+     */
+    ItemIndicator: ElementType;
+}
+
+/**
+ * The positioner that wraps the content.
+ */
+declare function ComboboxPositioner(props: ComboboxPositionerProps): JSX_2.Element;
+export { ComboboxPositioner }
+export { ComboboxPositioner as ComboboxPositioner_alias_1 }
+export { ComboboxPositioner as ComboboxPositioner_alias_2 }
+
+declare interface ComboboxProps extends ComboboxRootProps<SelectCollectionItem>, ComboboxVariantProps {
+    /**
+     * The label that appears above the combobox input.
+     */
+    label?: string;
+    /**
+     * The icon that appears at the start of the combobox input.
+     */
+    startIcon?: FieldInputProps['startIcon'];
+}
+export { ComboboxProps }
+export { ComboboxProps as ComboboxProps_alias_1 }
+export { ComboboxProps as ComboboxProps_alias_2 }
+
+/**
+ * This module contains the primitives of the Combobox.
+ * @module 'combobox/primitives'
+ */
+/**
+ * The ComboboxRoot component is the context provider for the Combobox
+ * component.
+ */
+declare function ComboboxRoot(props: ComboboxRootProps<SelectCollectionItem> & ComboboxVariantProps): JSX_2.Element;
+export { ComboboxRoot }
+export { ComboboxRoot as ComboboxRoot_alias_1 }
+export { ComboboxRoot as ComboboxRoot_alias_2 }
+
+/**
+ * The icon that appears at the start of the combobox input.
+ */
+declare function ComboboxStartIcon(props: PropsWithChildren): JSX_2.Element;
+export { ComboboxStartIcon }
+export { ComboboxStartIcon as ComboboxStartIcon_alias_1 }
+export { ComboboxStartIcon as ComboboxStartIcon_alias_2 }
+
+/**
+ * The trigger that opens the dropdown.
+ */
+declare function ComboboxTrigger(props: ComboboxTriggerProps): JSX_2.Element;
+export { ComboboxTrigger }
+export { ComboboxTrigger as ComboboxTrigger_alias_1 }
+export { ComboboxTrigger as ComboboxTrigger_alias_2 }
+
+declare function ComboItemGroup(props: ComboItemGroupProps): JSX_2.Element;
+export { ComboItemGroup }
+export { ComboItemGroup as ComboItemGroup_alias_1 }
+export { ComboItemGroup as ComboItemGroup_alias_2 }
+
+declare interface ComboItemGroupProps extends ComboboxItemGroupProps {
+    /**
+     * The label that appears for the combobox item group.
+     */
+    label?: string;
+}
+export { ComboItemGroupProps }
+export { ComboItemGroupProps as ComboItemGroupProps_alias_1 }
+export { ComboItemGroupProps as ComboItemGroupProps_alias_2 }
+
+declare const ComboItemText: typeof ComboboxItemText;
+export { ComboItemText }
+export { ComboItemText as ComboItemText_alias_1 }
+export { ComboItemText as ComboItemText_alias_2 }
+
+/**
+ * This module contains the ComboboxItemWithIndicator component.
+ * @module 'combobox/item'
+ */
+/**
+ * An abstraction of the ComboboxItem component that includes an indicator.
+ * @description [Combobox Docs](https://cerberus.digitalu.design/react/combobox)
+ * @description [Ark Docs](https://ark-ui.com/react/docs/components/combobox)
+ */
+declare function ComboItemWithIndicator(props: ComboboxItemProps_2): JSX_2.Element;
+export { ComboItemWithIndicator }
+export { ComboItemWithIndicator as ComboItemWithIndicator_alias_1 }
+export { ComboItemWithIndicator as ComboItemWithIndicator_alias_2 }
+
 /**
  * Provides a confirm modal to the app.
  * @see https://cerberus.digitalu.design/react/confirm-modal
@@ -4169,6 +4434,28 @@ declare function splitProps<T extends object>(props: T, ...keyGroups: (keyof T)[
 export { splitProps }
 export { splitProps as splitProps_alias_1 }
 
+/**
+ * This module contains a custom hook that provides a stateful collection for
+ * the Combobox component.
+ */
+declare interface StatefulCollectionReturn {
+    /**
+     * The collection of items.
+     */
+    collection: ReturnType<typeof createSelectCollection>;
+    /**
+     * The filter value split into an array of characters.
+     */
+    filterChars: string[];
+    /**
+     * The function to handle input changes.
+     */
+    handleInputChange: (details: ComboboxInputValueChangeDetails_2) => void;
+}
+export { StatefulCollectionReturn }
+export { StatefulCollectionReturn as StatefulCollectionReturn_alias_1 }
+export { StatefulCollectionReturn as StatefulCollectionReturn_alias_2 }
+
 /**
  * This module contains the tag component.
  * @module
@@ -5021,6 +5308,17 @@ export { useSensor }
 
 export { useSensors }
 
+/**
+ * This hook provides a stateful collection for the Combobox component.
+ * It returns a collection of items and a function to handle input changes.
+ * @param initialItems - The initial collection of items.
+ * @return An object containing the collection and a function to handle input changes.
+ */
+declare function useStatefulCollection(initialItems?: SelectCollectionItem[]): StatefulCollectionReturn;
+export { useStatefulCollection }
+export { useStatefulCollection as useStatefulCollection_alias_1 }
+export { useStatefulCollection as useStatefulCollection_alias_2 }
+
 /**
  * Used to access the tabs context.
  * @returns The tabs context.

package/build/modern/{chunk-4WKM2MJC.js → chunk-3B4SFTQB.js}

@@ -15,7 +15,7 @@ import {
 } from "./chunk-NZKE7C53.js";
 import {
   Dialog
-} from "./chunk-C45HS2C4.js";
+} from "./chunk-MH6CIBDU.js";
 import {
   DialogDescription,
   DialogHeading,
@@ -116,4 +116,4 @@ export {
   CTAModal,
   useCTAModal
 };
-//# sourceMappingURL=chunk-4WKM2MJC.js.map
+//# sourceMappingURL=chunk-3B4SFTQB.js.map

package/build/modern/chunk-FZ53535Q.js

@@ -0,0 +1,18 @@
+import {
+  ComboboxParts
+} from "./chunk-HIC7Z23X.js";
+
+// src/components/combobox/item-group.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ComboItemGroup(props) {
+  const { label, children, ...groupProps } = props;
+  return /* @__PURE__ */ jsxs(ComboboxParts.ItemGroup, { ...groupProps, children: [
+    /* @__PURE__ */ jsx(ComboboxParts.ItemGroupLabel, { children: label }),
+    children
+  ] });
+}
+
+export {
+  ComboItemGroup
+};
+//# sourceMappingURL=chunk-FZ53535Q.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/combobox/item-group.tsx"],"sourcesContent":["import type { ComboboxItemGroupProps } from '@ark-ui/react/combobox'\nimport { ComboboxParts } from './parts'\n\nexport interface ComboItemGroupProps extends ComboboxItemGroupProps {\n  /**\n   * The label that appears for the combobox item group.\n   */\n  label?: string\n}\n\nexport function ComboItemGroup(props: ComboItemGroupProps) {\n  const { label, children, ...groupProps } = props\n  return (\n    <ComboboxParts.ItemGroup {...groupProps}>\n      <ComboboxParts.ItemGroupLabel>{label}</ComboboxParts.ItemGroupLabel>\n      {children}\n    </ComboboxParts.ItemGroup>\n  )\n}\n"],"mappings":";;;;;AAaI,SACE,KADF;AAHG,SAAS,eAAe,OAA4B;AACzD,QAAM,EAAE,OAAO,UAAU,GAAG,WAAW,IAAI;AAC3C,SACE,qBAAC,cAAc,WAAd,EAAyB,GAAG,YAC3B;AAAA,wBAAC,cAAc,gBAAd,EAA8B,iBAAM;AAAA,IACpC;AAAA,KACH;AAEJ;","names":[]}

package/build/modern/chunk-HIC7Z23X.js

@@ -0,0 +1,37 @@
+import {
+  ComboboxClearTrigger,
+  ComboboxContent,
+  ComboboxControl,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemGroup,
+  ComboboxItemGroupLabel,
+  ComboboxItemIndicator,
+  ComboboxItemText,
+  ComboboxLabel,
+  ComboboxPositioner,
+  ComboboxRoot,
+  ComboboxTrigger
+} from "./chunk-NR5XDIJ7.js";
+
+// src/components/combobox/parts.ts
+var ComboboxParts = {
+  Root: ComboboxRoot,
+  Label: ComboboxLabel,
+  Control: ComboboxControl,
+  Input: ComboboxInput,
+  Trigger: ComboboxTrigger,
+  ClearTrigger: ComboboxClearTrigger,
+  Positioner: ComboboxPositioner,
+  Content: ComboboxContent,
+  ItemGroup: ComboboxItemGroup,
+  ItemGroupLabel: ComboboxItemGroupLabel,
+  Item: ComboboxItem,
+  ItemText: ComboboxItemText,
+  ItemIndicator: ComboboxItemIndicator
+};
+
+export {
+  ComboboxParts
+};
+//# sourceMappingURL=chunk-HIC7Z23X.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/combobox/parts.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"],"mappings":";;;;;;;;;;;;;;;;;AAsFO,IAAM,gBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,eAAe;AACjB;","names":[]}

package/build/modern/chunk-J7SAFAW3.js

@@ -0,0 +1,44 @@
+import {
+  ComboboxParts
+} from "./chunk-HIC7Z23X.js";
+import {
+  ComboboxStartIcon
+} from "./chunk-NR5XDIJ7.js";
+import {
+  Portal
+} from "./chunk-IQJDVFPP.js";
+import {
+  useCerberusContext
+} from "./chunk-GITT5645.js";
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
+
+// src/components/combobox/combobox.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Combobox(props) {
+  const { label, children, startIcon, ...rootProps } = props;
+  const { icons } = useCerberusContext();
+  const { selectArrow: SelectArrow, close: CloseIcon } = icons;
+  const hasStartIcon = Boolean(startIcon);
+  return /* @__PURE__ */ jsxs(ComboboxParts.Root, { ...rootProps, children: [
+    /* @__PURE__ */ jsx(Show, { when: Boolean(label), children: /* @__PURE__ */ jsx(ComboboxParts.Label, { children: label }) }),
+    /* @__PURE__ */ jsxs(ComboboxParts.Control, { children: [
+      /* @__PURE__ */ jsx(Show, { when: hasStartIcon, children: /* @__PURE__ */ jsx(ComboboxStartIcon, { children: startIcon }) }),
+      /* @__PURE__ */ jsx(
+        ComboboxParts.Input,
+        {
+          ...hasStartIcon && { "data-has": "start-indicator" }
+        }
+      ),
+      /* @__PURE__ */ jsx(ComboboxParts.ClearTrigger, { children: /* @__PURE__ */ jsx(CloseIcon, {}) }),
+      /* @__PURE__ */ jsx(ComboboxParts.Trigger, { children: /* @__PURE__ */ jsx(SelectArrow, {}) })
+    ] }),
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(ComboboxParts.Positioner, { children: /* @__PURE__ */ jsx(ComboboxParts.Content, { size: rootProps.size, children }) }) })
+  ] });
+}
+
+export {
+  Combobox
+};
+//# sourceMappingURL=chunk-J7SAFAW3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/combobox/combobox.tsx"],"sourcesContent":["'use client'\n\nimport type { ComboboxRootProps } from '@ark-ui/react/combobox'\nimport type { ComboboxVariantProps } from '@cerberus/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={Boolean(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"],"mappings":";;;;;;;;;;;;;;;;;AAoCQ,cAGF,YAHE;AAXD,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,OAAO,UAAU,WAAW,GAAG,UAAU,IAAI;AAErD,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,aAAa,aAAa,OAAO,UAAU,IAAI;AAEvD,QAAM,eAAe,QAAQ,SAAS;AAEtC,SACE,qBAAC,cAAc,MAAd,EAAoB,GAAG,WACtB;AAAA,wBAAC,QAAK,MAAM,QAAQ,KAAK,GACvB,8BAAC,cAAc,OAAd,EAAqB,iBAAM,GAC9B;AAAA,IAEA,qBAAC,cAAc,SAAd,EACC;AAAA,0BAAC,QAAK,MAAM,cACV,8BAAC,qBAAmB,qBAAU,GAChC;AAAA,MAEA;AAAA,QAAC,cAAc;AAAA,QAAd;AAAA,UACE,GAAI,gBAAgB,EAAE,YAAY,kBAAkB;AAAA;AAAA,MACvD;AAAA,MAEA,oBAAC,cAAc,cAAd,EACC,8BAAC,aAAU,GACb;AAAA,MACA,oBAAC,cAAc,SAAd,EACC,8BAAC,eAAY,GACf;AAAA,OACF;AAAA,IAEA,oBAAC,UACC,8BAAC,cAAc,YAAd,EACC,8BAAC,cAAc,SAAd,EAAsB,MAAM,UAAU,MACpC,UACH,GACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/build/modern/{chunk-C45HS2C4.js → chunk-MH6CIBDU.js}

@@ -1,11 +1,11 @@
-import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
 import {
   DialogBackdrop,
   DialogContent,
   DialogPositioner
 } from "./chunk-D7UIWAFO.js";
+import {
+  Portal
+} from "./chunk-IQJDVFPP.js";
 
 // src/components/dialog/dialog.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -19,4 +19,4 @@ function Dialog(props) {
 export {
   Dialog
 };
-//# sourceMappingURL=chunk-C45HS2C4.js.map
+//# sourceMappingURL=chunk-MH6CIBDU.js.map

package/build/modern/chunk-ML2IKLMJ.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-ML2IKLMJ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/chunk-MR4DX76C.js

@@ -0,0 +1,38 @@
+import {
+  createSelectCollection
+} from "./chunk-QCBLRACK.js";
+
+// src/components/combobox/use-stateful-collection.ts
+import { useCallback, useMemo, useState } from "react";
+function useStatefulCollection(initialItems = []) {
+  const [items, setItems] = useState(initialItems);
+  const [filterValue, setFilterValue] = useState([]);
+  const collection = useMemo(() => createSelectCollection(items), [items]);
+  const handleInputChange = useCallback(
+    (details) => {
+      if (details.inputValue === "") {
+        return setItems(initialItems);
+      }
+      setItems(
+        (prev) => prev.filter(
+          (item) => item.value.includes(details.inputValue.toLowerCase())
+        )
+      );
+      setFilterValue(details.inputValue.split(""));
+    },
+    [initialItems]
+  );
+  return useMemo(
+    () => ({
+      collection,
+      filterChars: filterValue,
+      handleInputChange
+    }),
+    [collection, filterValue, handleInputChange]
+  );
+}
+
+export {
+  useStatefulCollection
+};
+//# sourceMappingURL=chunk-MR4DX76C.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/combobox/use-stateful-collection.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"],"mappings":";;;;;AAEA,SAAS,aAAa,SAAS,gBAAgB;AA+BxC,SAAS,sBACd,eAAuC,CAAC,GACd;AAC1B,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAmB,CAAC,CAAC;AAE3D,QAAM,aAAa,QAAQ,MAAM,uBAAuB,KAAK,GAAG,CAAC,KAAK,CAAC;AAEvE,QAAM,oBAAoB;AAAA,IACxB,CAAC,YAA6C;AAC5C,UAAI,QAAQ,eAAe,IAAI;AAC7B,eAAO,SAAS,YAAY;AAAA,MAC9B;AACA;AAAA,QAAS,CAAC,SACR,KAAK;AAAA,UAAO,CAAC,SACX,KAAK,MAAM,SAAS,QAAQ,WAAW,YAAY,CAAC;AAAA,QACtD;AAAA,MACF;AACA,qBAAe,QAAQ,WAAW,MAAM,EAAE,CAAC;AAAA,IAC7C;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAC,YAAY,aAAa,iBAAiB;AAAA,EAC7C;AACF;","names":[]}

package/build/modern/chunk-NR5XDIJ7.js

@@ -0,0 +1,148 @@
+// src/components/combobox/primitives.tsx
+import {
+  Combobox
+} from "@ark-ui/react/combobox";
+import { ark } from "@ark-ui/react/factory";
+import {
+  combobox
+} from "@cerberus/styled-system/recipes";
+import { cx } from "@cerberus/styled-system/css";
+import { jsx } from "react/jsx-runtime";
+function ComboboxRoot(props) {
+  const { size, ...rootProps } = props;
+  const styles = combobox({ size });
+  return /* @__PURE__ */ jsx(
+    Combobox.Root,
+    {
+      ...rootProps,
+      className: cx(styles.root, rootProps.className)
+    }
+  );
+}
+function ComboboxLabel(props) {
+  const styles = combobox();
+  return /* @__PURE__ */ jsx(Combobox.Label, { ...props, className: cx(styles.label, props.className) });
+}
+function ComboboxControl(props) {
+  const styles = combobox();
+  return /* @__PURE__ */ jsx(
+    Combobox.Control,
+    {
+      ...props,
+      className: cx(styles.control, props.className)
+    }
+  );
+}
+function ComboboxInput(props) {
+  const styles = combobox();
+  return /* @__PURE__ */ jsx(Combobox.Input, { ...props, className: cx(styles.input, props.className) });
+}
+function ComboboxTrigger(props) {
+  const styles = combobox();
+  return /* @__PURE__ */ jsx(
+    Combobox.Trigger,
+    {
+      ...props,
+      className: cx(styles.trigger, props.className)
+    }
+  );
+}
+function ComboboxClearTrigger(props) {
+  const styles = combobox();
+  return /* @__PURE__ */ jsx(
+    Combobox.ClearTrigger,
+    {
+      ...props,
+      className: cx(styles.clearTrigger, props.className)
+    }
+  );
+}
+function ComboboxPositioner(props) {
+  const styles = combobox();
+  return /* @__PURE__ */ jsx(
+    Combobox.Positioner,
+    {
+      ...props,
+      className: cx(styles.positioner, props.className)
+    }
+  );
+}
+function ComboboxContent(props) {
+  const { size, ...contentProps } = props;
+  const styles = combobox({ size });
+  return /* @__PURE__ */ jsx(
+    Combobox.Content,
+    {
+      ...contentProps,
+      className: cx(styles.content, contentProps.className)
+    }
+  );
+}
+function ComboboxItemGroup(props) {
+  const styles = combobox();
+  return /* @__PURE__ */ jsx(
+    Combobox.ItemGroup,
+    {
+      ...props,
+      className: cx(styles.itemGroup, props.className)
+    }
+  );
+}
+function ComboboxItemGroupLabel(props) {
+  const styles = combobox();
+  return /* @__PURE__ */ jsx(
+    Combobox.ItemGroupLabel,
+    {
+      ...props,
+      className: cx(styles.itemGroupLabel, props.className)
+    }
+  );
+}
+function ComboboxItem(props) {
+  const styles = combobox();
+  return /* @__PURE__ */ jsx(Combobox.Item, { ...props, className: cx(styles.item, props.className) });
+}
+function ComboboxItemText(props) {
+  const styles = combobox();
+  return /* @__PURE__ */ jsx(
+    Combobox.ItemText,
+    {
+      ...props,
+      className: cx(styles.itemText, props.className)
+    }
+  );
+}
+function ComboboxItemIndicator(props) {
+  const styles = combobox();
+  return /* @__PURE__ */ jsx(
+    Combobox.ItemIndicator,
+    {
+      ...props,
+      className: cx(styles.itemIndicator, props.className)
+    }
+  );
+}
+function ComboboxStartIcon(props) {
+  const styles = combobox();
+  return /* @__PURE__ */ jsx(ark.span, { ...props, className: styles.startIcon });
+}
+var ComboItemText = ComboboxItemText;
+
+export {
+  ComboboxRoot,
+  ComboboxLabel,
+  ComboboxControl,
+  ComboboxInput,
+  ComboboxTrigger,
+  ComboboxClearTrigger,
+  ComboboxPositioner,
+  ComboboxContent,
+  ComboboxItemGroup,
+  ComboboxItemGroupLabel,
+  ComboboxItem,
+  ComboboxItemText,
+  ComboboxItemIndicator,
+  ComboboxStartIcon,
+  ComboItemText
+};
+//# sourceMappingURL=chunk-NR5XDIJ7.js.map