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

package/build/modern/index.js

@@ -1,9 +1,3 @@
-import {
-  NavMenuTrigger
-} from "./chunk-245SMQ45.js";
-import {
-  FieldsetLabel
-} from "./chunk-DRDNNRU3.js";
 import {
   Label
 } from "./chunk-LT62577B.js";
@@ -26,47 +20,38 @@ import {
   NavMenuList,
   getPosition
 } from "./chunk-AIJ75ENY.js";
+import {
+  NavMenuTrigger
+} from "./chunk-245SMQ45.js";
 import {
   FieldMessage
 } from "./chunk-L7N24B6B.js";
 import {
-  ConfirmModal,
-  useConfirmModal
-} from "./chunk-MTZDZXZM.js";
-import {
-  NavMenu,
-  useNavMenuContext
-} from "./chunk-6WS765J3.js";
-import {
-  NotificationCenter,
-  useNotificationCenter
-} from "./chunk-6DAOKE6Z.js";
+  FieldsetLabel
+} from "./chunk-DRDNNRU3.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-OOUNB643.js";
+} from "./chunk-R7MPDSXX.js";
 import {
   ThemeProvider,
   useThemeContext
 } from "./chunk-EB37HRCN.js";
-import {
-  Tbody
-} from "./chunk-ZR37P4NZ.js";
-import {
-  Td
-} from "./chunk-3R4TIF2X.js";
-import {
-  Th
-} from "./chunk-SGKHA4EB.js";
-import {
-  Thead
-} from "./chunk-Y6QQCRQV.js";
 import {
   Tooltip
 } from "./chunk-LPALHB6R.js";
 import {
-  NotificationHeading
-} from "./chunk-SLHYBPJ5.js";
+  ConfirmModal,
+  useConfirmModal
+} from "./chunk-U5XRQ2JZ.js";
+import {
+  NavMenu,
+  useNavMenuContext
+} from "./chunk-6WS765J3.js";
+import {
+  NotificationCenter,
+  useNotificationCenter
+} from "./chunk-RKVY2HJ3.js";
 import {
   Table,
   Tr
@@ -87,25 +72,17 @@ import {
   Tag
 } from "./chunk-MISIUX63.js";
 import {
-  FeatureFlag
-} from "./chunk-BIDE4IJG.js";
-import {
-  FeatureFlags,
-  useFeatureFlags
-} from "./chunk-CJFW36DZ.js";
-import {
-  FileStatus,
-  processStatus
-} from "./chunk-CF3EHG42.js";
+  Tbody
+} from "./chunk-ZR37P4NZ.js";
 import {
-  ProgressBar
-} from "./chunk-WZJ5UQNM.js";
+  Td
+} from "./chunk-3R4TIF2X.js";
 import {
-  FileUploader
-} from "./chunk-7SU6FCTJ.js";
+  Th
+} from "./chunk-SGKHA4EB.js";
 import {
-  Legend
-} from "./chunk-RBNOEAWJ.js";
+  Thead
+} from "./chunk-Y6QQCRQV.js";
 import {
   Menu,
   MenuContent,
@@ -122,14 +99,8 @@ import {
   NotificationDescription
 } from "./chunk-UXY3KCC3.js";
 import {
-  Admonition,
-  AdmonitionDescription,
-  AdmonitionHeading
-} from "./chunk-DXBZ3HMY.js";
-import "./chunk-2HOUQ2DX.js";
-import {
-  CircularProgress
-} from "./chunk-6QHOKCV3.js";
+  NotificationHeading
+} from "./chunk-SLHYBPJ5.js";
 import {
   DatePicker,
   DatePickerCalendar,
@@ -155,15 +126,26 @@ import {
 import {
   Droppable
 } from "./chunk-TKI2CKHH.js";
-import "./chunk-V4YYGGMH.js";
 import {
-  ToggleParts
-} from "./chunk-2CVGNLIM.js";
+  FeatureFlag
+} from "./chunk-BIDE4IJG.js";
 import {
-  ToggleIndicator,
-  ToggleRoot
-} from "./chunk-CIMY2U22.js";
-import "./chunk-V3M3ZOQI.js";
+  FeatureFlags,
+  useFeatureFlags
+} from "./chunk-CJFW36DZ.js";
+import {
+  FileStatus,
+  processStatus
+} from "./chunk-VTQ6RW3Z.js";
+import {
+  ProgressBar
+} from "./chunk-WZJ5UQNM.js";
+import {
+  FileUploader
+} from "./chunk-7SU6FCTJ.js";
+import {
+  Legend
+} from "./chunk-RBNOEAWJ.js";
 import {
   AccordionItemGroup
 } from "./chunk-WN7TJX6J.js";
@@ -176,6 +158,75 @@ import {
   AccordionItemContent,
   AccordionItemTrigger
 } from "./chunk-AZRFYQO7.js";
+import {
+  Admonition,
+  AdmonitionDescription,
+  AdmonitionHeading
+} from "./chunk-DXBZ3HMY.js";
+import "./chunk-2HOUQ2DX.js";
+import {
+  CircularProgress
+} from "./chunk-6QHOKCV3.js";
+import "./chunk-2LF3HPNA.js";
+import {
+  Option,
+  Select
+} from "./chunk-YLKFZGBY.js";
+import {
+  OptionGroup,
+  OptionGroupLabel
+} from "./chunk-IASVL7CW.js";
+import {
+  SelectParts
+} from "./chunk-XTNGF4D6.js";
+import "./chunk-UDY6USHW.js";
+import {
+  Switch
+} from "./chunk-OVHCXBBI.js";
+import "./chunk-CAZ3EICD.js";
+import {
+  SwitchParts
+} from "./chunk-KQQPZJEI.js";
+import {
+  SwitchControl,
+  SwitchHiddenInput,
+  SwitchLabel,
+  SwitchRoot,
+  SwitchThumb
+} from "./chunk-LZWNHXRP.js";
+import "./chunk-V4YYGGMH.js";
+import {
+  ToggleParts
+} from "./chunk-2CVGNLIM.js";
+import {
+  ToggleIndicator,
+  ToggleRoot
+} from "./chunk-CIMY2U22.js";
+import "./chunk-V3M3ZOQI.js";
+import "./chunk-TYPULJMJ.js";
+import {
+  Field
+} from "./chunk-FBS7AX76.js";
+import {
+  FieldParts
+} from "./chunk-6I2FW4WI.js";
+import {
+  FieldErrorText,
+  FieldHelperText,
+  FieldInput,
+  FieldLabel,
+  FieldRequiredIndicator,
+  FieldRoot,
+  FieldTextarea,
+  Input,
+  Textarea
+} from "./chunk-VSTOSLFS.js";
+import {
+  FieldStartIndicator
+} from "./chunk-Z52R6ABJ.js";
+import {
+  FieldStatusIndicator
+} from "./chunk-CNA2VKAH.js";
 import "./chunk-IDTAB2UJ.js";
 import {
   Fieldset
@@ -222,18 +273,58 @@ import {
   RatingLabel,
   RatingRoot
 } from "./chunk-W47QEZD5.js";
-import "./chunk-2LF3HPNA.js";
+import "./chunk-TIJAFPHQ.js";
 import {
-  Option,
-  Select
-} from "./chunk-6ICNCCPD.js";
+  Checkbox
+} from "./chunk-UNRQAXLJ.js";
+import "./chunk-EL4MX2PG.js";
 import {
-  OptionGroup,
-  OptionGroupLabel
-} from "./chunk-IASVL7CW.js";
+  Text
+} from "./chunk-RU5LOXWI.js";
 import {
-  SelectParts
-} from "./chunk-XTNGF4D6.js";
+  CheckboxParts
+} from "./chunk-KWZ3CEG6.js";
+import {
+  CheckboxControl,
+  CheckboxGroup,
+  CheckboxHiddenInput,
+  CheckboxIndicator,
+  CheckboxLabel,
+  CheckboxRoot
+} from "./chunk-BPRF34DU.js";
+import "./chunk-ML2IKLMJ.js";
+import {
+  ComboItemGroup
+} from "./chunk-FZ53535Q.js";
+import {
+  ComboItemWithIndicator
+} from "./chunk-XBUXVNTY.js";
+import {
+  Combobox
+} from "./chunk-J7SAFAW3.js";
+import {
+  ComboboxParts
+} from "./chunk-HIC7Z23X.js";
+import {
+  ComboItemText,
+  ComboboxClearTrigger,
+  ComboboxContent,
+  ComboboxControl,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemGroup,
+  ComboboxItemGroupLabel,
+  ComboboxItemIndicator,
+  ComboboxItemText,
+  ComboboxLabel,
+  ComboboxPositioner,
+  ComboboxRoot,
+  ComboboxStartIcon,
+  ComboboxTrigger
+} from "./chunk-NR5XDIJ7.js";
+import {
+  useStatefulCollection
+} from "./chunk-MR4DX76C.js";
 import {
   SelectClearTrigger,
   SelectContent,
@@ -252,45 +343,11 @@ import {
   SelectValueText,
   createSelectCollection
 } from "./chunk-QCBLRACK.js";
-import "./chunk-UDY6USHW.js";
-import {
-  Switch
-} from "./chunk-OVHCXBBI.js";
-import "./chunk-CAZ3EICD.js";
-import {
-  SwitchParts
-} from "./chunk-KQQPZJEI.js";
-import {
-  SwitchControl,
-  SwitchHiddenInput,
-  SwitchLabel,
-  SwitchRoot,
-  SwitchThumb
-} from "./chunk-LZWNHXRP.js";
-import "./chunk-TIJAFPHQ.js";
-import {
-  Checkbox
-} from "./chunk-UNRQAXLJ.js";
-import "./chunk-EL4MX2PG.js";
-import {
-  Text
-} from "./chunk-RU5LOXWI.js";
-import {
-  CheckboxParts
-} from "./chunk-KWZ3CEG6.js";
-import {
-  CheckboxControl,
-  CheckboxGroup,
-  CheckboxHiddenInput,
-  CheckboxIndicator,
-  CheckboxLabel,
-  CheckboxRoot
-} from "./chunk-BPRF34DU.js";
 import "./chunk-IKDXADLX.js";
 import {
   CTAModal,
   useCTAModal
-} from "./chunk-4WKM2MJC.js";
+} from "./chunk-3B4SFTQB.js";
 import "./chunk-4LSTU6WU.js";
 import "./chunk-MVO2GNUA.js";
 import {
@@ -308,13 +365,10 @@ import {
 } from "./chunk-NZKE7C53.js";
 import {
   Dialog
-} from "./chunk-C45HS2C4.js";
+} from "./chunk-MH6CIBDU.js";
 import {
   IconButton
 } from "./chunk-APD6IX5R.js";
-import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
 import {
   DialogParts
 } from "./chunk-FCSO6N2Y.js";
@@ -329,30 +383,9 @@ import {
   DialogRoot,
   DialogTrigger
 } from "./chunk-D7UIWAFO.js";
-import "./chunk-TYPULJMJ.js";
-import {
-  Field
-} from "./chunk-FBS7AX76.js";
-import {
-  FieldParts
-} from "./chunk-6I2FW4WI.js";
 import {
-  FieldErrorText,
-  FieldHelperText,
-  FieldInput,
-  FieldLabel,
-  FieldRequiredIndicator,
-  FieldRoot,
-  FieldTextarea,
-  Input,
-  Textarea
-} from "./chunk-VSTOSLFS.js";
-import {
-  FieldStartIndicator
-} from "./chunk-Z52R6ABJ.js";
-import {
-  FieldStatusIndicator
-} from "./chunk-CNA2VKAH.js";
+  Portal
+} from "./chunk-IQJDVFPP.js";
 import {
   CerberusProvider,
   useCerberusContext
@@ -444,6 +477,25 @@ export {
   CheckboxParts,
   CheckboxRoot,
   CircularProgress,
+  ComboItemGroup,
+  ComboItemText,
+  ComboItemWithIndicator,
+  Combobox,
+  ComboboxClearTrigger,
+  ComboboxContent,
+  ComboboxControl,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemGroup,
+  ComboboxItemGroupLabel,
+  ComboboxItemIndicator,
+  ComboboxItemText,
+  ComboboxLabel,
+  ComboboxParts,
+  ComboboxPositioner,
+  ComboboxRoot,
+  ComboboxStartIcon,
+  ComboboxTrigger,
   ConfirmModal,
   DateFormats,
   DatePicker,
@@ -623,6 +675,7 @@ export {
   useNotificationCenter,
   usePromptModal,
   useRootColors,
+  useStatefulCollection,
   useTabsContext,
   useTheme,
   useThemeContext,

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// deprecated\n\nexport * from './components/deprecated/FieldMessage'\nexport * from './components/deprecated/FieldsetLabel'\nexport * from './components/deprecated/Label'\nexport * from './components/deprecated/Modal'\nexport * from './components/deprecated/ModalHeader'\nexport * from './components/deprecated/ModalHeading'\nexport * from './components/deprecated/ModalDescription'\nexport * from './components/deprecated/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useToggle'\n\n// components\n\nexport * from './components/Accordion'\nexport * from './components/Accordion.client'\nexport * from './components/AccordionItemGroup'\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/button/index'\nexport * from './components/checkbox/index'\nexport * from './components/CircularProgress'\nexport * from './components/cta-dialog/index'\nexport * from './components/DatePicker.client'\nexport * from './components/DatePicker.server'\nexport * from './components/dialog/index'\nexport * from './components/Droppable'\nexport * from './components/FeatureFlag'\nexport * from './components/field/index'\nexport * from './components/fieldset/index'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/for'\nexport * from './components/IconButton'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/radio/index'\nexport * from './components/rating/index'\nexport * from './components/select/index'\nexport * from './components/Show'\nexport * from './components/Spinner'\nexport * from './components/switch/index'\nexport * from './components/Tabs.client'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Text'\nexport * from './components/toggle/index'\nexport * from './components/Tooltip'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// deprecated\n\nexport * from './components/deprecated/FieldMessage'\nexport * from './components/deprecated/FieldsetLabel'\nexport * from './components/deprecated/Label'\nexport * from './components/deprecated/Modal'\nexport * from './components/deprecated/ModalHeader'\nexport * from './components/deprecated/ModalHeading'\nexport * from './components/deprecated/ModalDescription'\nexport * from './components/deprecated/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useToggle'\n\n// components\n\nexport * from './components/Accordion'\nexport * from './components/Accordion.client'\nexport * from './components/AccordionItemGroup'\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/button/index'\nexport * from './components/checkbox/index'\nexport * from './components/CircularProgress'\nexport * from './components/combobox/index'\nexport * from './components/cta-dialog/index'\nexport * from './components/DatePicker.client'\nexport * from './components/DatePicker.server'\nexport * from './components/dialog/index'\nexport * from './components/Droppable'\nexport * from './components/FeatureFlag'\nexport * from './components/field/index'\nexport * from './components/fieldset/index'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/for'\nexport * from './components/IconButton'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/radio/index'\nexport * from './components/rating/index'\nexport * from './components/select/index'\nexport * from './components/Show'\nexport * from './components/Spinner'\nexport * from './components/switch/index'\nexport * from './components/Tabs.client'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Text'\nexport * from './components/toggle/index'\nexport * from './components/Tooltip'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoGA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.16.0-next-1e5283a",
+  "version": "0.16.0-next-004ae01",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -26,7 +26,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.16.0-next-1e5283a"
+    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.16.0-next-004ae01"
   },
   "publishConfig": {
     "access": "public"

package/src/components/combobox/combobox.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import type { ComboboxRootProps } from '@ark-ui/react/combobox'
+import type { ComboboxVariantProps } from '@cerberus/styled-system/recipes'
+import { useCerberusContext } from '../../context/cerberus'
+import type { SelectCollectionItem } from '../select/select'
+import { type FieldInputProps } from '../field/index'
+import { Portal } from '../Portal'
+import { Show } from '../Show'
+import { ComboboxParts } from './parts'
+import { ComboboxStartIcon } from './primitives'
+
+export 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 function Combobox(props: ComboboxProps) {
+  const { label, children, startIcon, ...rootProps } = props
+
+  const { icons } = useCerberusContext()
+  const { selectArrow: SelectArrow, close: CloseIcon } = icons
+
+  const hasStartIcon = Boolean(startIcon)
+
+  return (
+    <ComboboxParts.Root {...rootProps}>
+      <Show when={Boolean(label)}>
+        <ComboboxParts.Label>{label}</ComboboxParts.Label>
+      </Show>
+
+      <ComboboxParts.Control>
+        <Show when={hasStartIcon}>
+          <ComboboxStartIcon>{startIcon}</ComboboxStartIcon>
+        </Show>
+
+        <ComboboxParts.Input
+          {...(hasStartIcon && { 'data-has': 'start-indicator' })}
+        />
+
+        <ComboboxParts.ClearTrigger>
+          <CloseIcon />
+        </ComboboxParts.ClearTrigger>
+        <ComboboxParts.Trigger>
+          <SelectArrow />
+        </ComboboxParts.Trigger>
+      </ComboboxParts.Control>
+
+      <Portal>
+        <ComboboxParts.Positioner>
+          <ComboboxParts.Content size={rootProps.size}>
+            {children}
+          </ComboboxParts.Content>
+        </ComboboxParts.Positioner>
+      </Portal>
+    </ComboboxParts.Root>
+  )
+}

package/src/components/combobox/index.ts

@@ -0,0 +1,6 @@
+export * from './parts'
+export * from './primitives'
+export * from './combobox'
+export * from './item'
+export * from './item-group'
+export * from './use-stateful-collection'

package/src/components/combobox/item-group.tsx

@@ -0,0 +1,19 @@
+import type { ComboboxItemGroupProps } from '@ark-ui/react/combobox'
+import { ComboboxParts } from './parts'
+
+export interface ComboItemGroupProps extends ComboboxItemGroupProps {
+  /**
+   * The label that appears for the combobox item group.
+   */
+  label?: string
+}
+
+export function ComboItemGroup(props: ComboItemGroupProps) {
+  const { label, children, ...groupProps } = props
+  return (
+    <ComboboxParts.ItemGroup {...groupProps}>
+      <ComboboxParts.ItemGroupLabel>{label}</ComboboxParts.ItemGroupLabel>
+      {children}
+    </ComboboxParts.ItemGroup>
+  )
+}

package/src/components/combobox/item.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import type { ComboboxItemProps } from '@ark-ui/react'
+import { useCerberusContext } from '../../context/cerberus'
+import { ComboboxParts } from './parts'
+
+/**
+ * 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)
+ */
+export function ComboItemWithIndicator(props: ComboboxItemProps) {
+  const { icons } = useCerberusContext()
+  const { selectChecked: CheckedIcon } = icons
+
+  return (
+    <ComboboxParts.Item {...props}>
+      <ComboboxParts.ItemIndicator>
+        <CheckedIcon />
+      </ComboboxParts.ItemIndicator>
+
+      {props.children}
+    </ComboboxParts.Item>
+  )
+}

package/src/components/combobox/parts.ts

@@ -0,0 +1,101 @@
+import type { ElementType } from 'react'
+import {
+  ComboboxClearTrigger,
+  ComboboxContent,
+  ComboboxControl,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemGroup,
+  ComboboxItemGroupLabel,
+  ComboboxItemIndicator,
+  ComboboxItemText,
+  ComboboxLabel,
+  ComboboxPositioner,
+  ComboboxRoot,
+  ComboboxTrigger,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Combobox parts.
+ * @module 'combobox/parts'
+ */
+
+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
+}
+
+/**
+ * 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.
+ */
+export const ComboboxParts: ComboboxPartsValue = {
+  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,
+}