@cerberus-design/react 0.16.0-next-ba05f96 → 0.16.0-next-7f1fa64

package/build/modern/index.js

@@ -1,6 +1,19 @@
+import {
+  NavMenuList,
+  getPosition
+} from "./chunk-AIJ75ENY.js";
+import {
+  NavMenuTrigger
+} from "./chunk-245SMQ45.js";
+import {
+  FieldMessage
+} from "./chunk-L7N24B6B.js";
+import {
+  FieldsetLabel
+} from "./chunk-DRDNNRU3.js";
 import {
   Label
-} from "./chunk-LT62577B.js";
+} from "./chunk-R7IDIIST.js";
 import {
   Modal
 } from "./chunk-Q3I4H6EC.js";
@@ -16,34 +29,14 @@ import {
 import {
   NavMenuLink
 } from "./chunk-YOTXFCCC.js";
-import {
-  NavMenuList,
-  getPosition
-} from "./chunk-AIJ75ENY.js";
-import {
-  NavMenuTrigger
-} from "./chunk-245SMQ45.js";
-import {
-  FieldMessage
-} from "./chunk-L7N24B6B.js";
-import {
-  FieldsetLabel
-} from "./chunk-DRDNNRU3.js";
-import {
-  PromptModal,
-  usePromptModal
-} from "./chunk-R7MPDSXX.js";
 import {
   ThemeProvider,
   useThemeContext
 } from "./chunk-EB37HRCN.js";
-import {
-  Tooltip
-} from "./chunk-LPALHB6R.js";
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-U5XRQ2JZ.js";
+} from "./chunk-WA3QADO4.js";
 import {
   NavMenu,
   useNavMenuContext
@@ -51,11 +44,11 @@ import {
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-RKVY2HJ3.js";
+} from "./chunk-AAGQR6B4.js";
 import {
-  Table,
-  Tr
-} from "./chunk-B4CVET74.js";
+  PromptModal,
+  usePromptModal
+} from "./chunk-R662TP4N.js";
 import {
   Tab,
   TabIndicator,
@@ -84,14 +77,8 @@ import {
   Thead
 } from "./chunk-Y6QQCRQV.js";
 import {
-  Menu,
-  MenuContent,
-  MenuGroupLabel,
-  MenuItem,
-  MenuItemGroup,
-  MenuSeparator,
-  MenuTrigger
-} from "./chunk-RUR5MV54.js";
+  Tooltip
+} from "./chunk-LPALHB6R.js";
 import {
   Notification
 } from "./chunk-RDRD6ACD.js";
@@ -102,27 +89,9 @@ import {
   NotificationHeading
 } from "./chunk-SLHYBPJ5.js";
 import {
-  DatePicker,
-  DatePickerCalendar,
-  DatePickerContent,
-  DatePickerDayView,
-  DatePickerInput,
-  DatePickerMonthView,
-  DatePickerTrigger,
-  DatePickerViewControlGroup,
-  DatePickerYearView,
-  RangePickerInput
-} from "./chunk-RHCTPSKT.js";
-import {
-  DatePickerContext,
-  DatePickerLabel,
-  DatePickerTable,
-  DatePickerTableCell,
-  DatePickerTableCellTrigger,
-  DatePickerTableHeader,
-  DatePickerView,
-  DatePickerViewControl
-} from "./chunk-5EWCH7AI.js";
+  Table,
+  Tr
+} from "./chunk-B4CVET74.js";
 import {
   Droppable
 } from "./chunk-TKI2CKHH.js";
@@ -136,7 +105,7 @@ import {
 import {
   FileStatus,
   processStatus
-} from "./chunk-VTQ6RW3Z.js";
+} from "./chunk-Z6EXPMTS.js";
 import {
   ProgressBar
 } from "./chunk-WZJ5UQNM.js";
@@ -147,17 +116,15 @@ import {
   Legend
 } from "./chunk-RBNOEAWJ.js";
 import {
-  AccordionItemGroup
-} from "./chunk-WN7TJX6J.js";
-import {
-  AccordionItemIndicator
-} from "./chunk-XZGXRRSQ.js";
-import {
-  Accordion,
-  AccordionItem,
-  AccordionItemContent,
-  AccordionItemTrigger
-} from "./chunk-AZRFYQO7.js";
+  Menu,
+  MenuContent,
+  MenuGroupLabel,
+  MenuItem,
+  MenuItemGroup,
+  MenuSeparator,
+  MenuTrigger
+} from "./chunk-RUR5MV54.js";
+import "./chunk-V3M3ZOQI.js";
 import {
   Admonition,
   AdmonitionDescription,
@@ -167,15 +134,53 @@ import "./chunk-2HOUQ2DX.js";
 import {
   CircularProgress
 } from "./chunk-6QHOKCV3.js";
-import "./chunk-2LF3HPNA.js";
 import {
-  Option,
-  Select
-} from "./chunk-YLKFZGBY.js";
+  DatePicker,
+  DatePickerCalendar,
+  DatePickerContent,
+  DatePickerDayView,
+  DatePickerInput,
+  DatePickerMonthView,
+  DatePickerTrigger,
+  DatePickerViewControlGroup,
+  DatePickerYearView,
+  RangePickerInput
+} from "./chunk-2KPSUYFL.js";
+import {
+  DatePickerContext,
+  DatePickerLabel,
+  DatePickerTable,
+  DatePickerTableCell,
+  DatePickerTableCellTrigger,
+  DatePickerTableHeader,
+  DatePickerView,
+  DatePickerViewControl
+} from "./chunk-5EWCH7AI.js";
+import "./chunk-ZOSGUATV.js";
+import {
+  Rating
+} from "./chunk-XTIIAYPU.js";
+import {
+  RatingParts
+} from "./chunk-OS73F4SR.js";
+import {
+  RatingContext,
+  RatingControl,
+  RatingHiddenInput,
+  RatingItem,
+  RatingItemContext,
+  RatingLabel,
+  RatingRoot
+} from "./chunk-W47QEZD5.js";
+import "./chunk-2LF3HPNA.js";
 import {
   OptionGroup,
   OptionGroupLabel
 } from "./chunk-IASVL7CW.js";
+import {
+  Option,
+  Select
+} from "./chunk-YLKFZGBY.js";
 import {
   SelectParts
 } from "./chunk-XTNGF4D6.js";
@@ -202,14 +207,13 @@ import {
   ToggleIndicator,
   ToggleRoot
 } from "./chunk-CIMY2U22.js";
-import "./chunk-V3M3ZOQI.js";
 import "./chunk-TYPULJMJ.js";
 import {
   Field
-} from "./chunk-FBS7AX76.js";
+} from "./chunk-3J5D3O6Z.js";
 import {
   FieldParts
-} from "./chunk-6I2FW4WI.js";
+} from "./chunk-32M5JS5F.js";
 import {
   FieldErrorText,
   FieldHelperText,
@@ -220,13 +224,13 @@ import {
   FieldTextarea,
   Input,
   Textarea
-} from "./chunk-VSTOSLFS.js";
-import {
-  FieldStartIndicator
-} from "./chunk-Z52R6ABJ.js";
+} from "./chunk-VNPLKMEM.js";
 import {
   FieldStatusIndicator
 } from "./chunk-CNA2VKAH.js";
+import {
+  FieldStartIndicator
+} from "./chunk-Z52R6ABJ.js";
 import "./chunk-IDTAB2UJ.js";
 import {
   Fieldset
@@ -257,22 +261,10 @@ import {
   RadioGroupLabel,
   RadioGroupRoot
 } from "./chunk-5RTNSVYU.js";
-import "./chunk-ZOSGUATV.js";
-import {
-  Rating
-} from "./chunk-QQCB6JXW.js";
-import {
-  RatingParts
-} from "./chunk-OS73F4SR.js";
+import "./chunk-CYC2YUKU.js";
 import {
-  RatingContext,
-  RatingControl,
-  RatingHiddenInput,
-  RatingItem,
-  RatingItemContext,
-  RatingLabel,
-  RatingRoot
-} from "./chunk-W47QEZD5.js";
+  ButtonParts
+} from "./chunk-2BIHLH4V.js";
 import "./chunk-TIJAFPHQ.js";
 import {
   Checkbox
@@ -293,15 +285,15 @@ import {
   CheckboxRoot
 } from "./chunk-BPRF34DU.js";
 import "./chunk-ML2IKLMJ.js";
+import {
+  Combobox
+} from "./chunk-J7SAFAW3.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";
@@ -383,13 +375,16 @@ import {
   DialogRoot,
   DialogTrigger
 } from "./chunk-D7UIWAFO.js";
+import {
+  Button,
+  ButtonIcon
+} from "./chunk-6KZVE4HC.js";
+import {
+  Spinner
+} from "./chunk-7SYJFI5E.js";
 import {
   Portal
 } from "./chunk-IQJDVFPP.js";
-import {
-  CerberusProvider,
-  useCerberusContext
-} from "./chunk-GITT5645.js";
 import {
   useModal
 } from "./chunk-KGQG5JGW.js";
@@ -404,6 +399,19 @@ import {
 import {
   useToggle
 } from "./chunk-ICTISECN.js";
+import "./chunk-R2V75WU6.js";
+import {
+  Accordion,
+  AccordionItemGroup
+} from "./chunk-FWVFM7RK.js";
+import "./chunk-6OJ27QWV.js";
+import {
+  CerberusProvider,
+  useCerberusContext
+} from "./chunk-GITT5645.js";
+import {
+  Show
+} from "./chunk-BUVVRQLZ.js";
 import {
   formatNotifyCount,
   splitProps
@@ -412,20 +420,16 @@ import {
   getLocalStorage,
   setLocalStorage
 } from "./chunk-FQLMPEYX.js";
-import "./chunk-CYC2YUKU.js";
-import {
-  ButtonParts
-} from "./chunk-2BIHLH4V.js";
 import {
-  Button,
-  ButtonIcon
-} from "./chunk-6KZVE4HC.js";
-import {
-  Spinner
-} from "./chunk-7SYJFI5E.js";
+  AccordionParts
+} from "./chunk-XBDEIBW2.js";
 import {
-  Show
-} from "./chunk-BUVVRQLZ.js";
+  AccordionItem,
+  AccordionItemContent,
+  AccordionItemIndicator,
+  AccordionItemTrigger,
+  AccordionRoot
+} from "./chunk-CPNKDKC2.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -459,6 +463,8 @@ export {
   AccordionItemGroup,
   AccordionItemIndicator,
   AccordionItemTrigger,
+  AccordionParts,
+  AccordionRoot,
   Admonition,
   AdmonitionDescription,
   AdmonitionHeading,

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/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":[]}
+{"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/index'\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkGA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.16.0-next-ba05f96",
+  "version": "0.16.0-next-7f1fa64",
   "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-ba05f96"
+    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.16.0-next-7f1fa64"
   },
   "publishConfig": {
     "access": "public"

package/src/components/accordion/index.ts

@@ -0,0 +1,3 @@
+export * from './parts'
+export * from './primitives'
+export * from './item-group'

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

@@ -0,0 +1,66 @@
+import type { AccordionItemProps } from '@ark-ui/react/accordion'
+import { type AccordionVariantProps } from '@cerberus/styled-system/recipes'
+import { splitProps } from '../../utils/index'
+import { Show } from '../Show'
+import { AccordionParts } from './parts'
+import { AccordionChevronItemIndicator } from './item-indicator'
+
+/**
+ * This module contains an abstraction of the AccordionItem components.
+ * @module
+ */
+
+// We are only exposing this to keep the API consistent
+export const Accordion = AccordionParts.Root
+
+export interface AccordionItemGroupProps
+  extends AccordionItemProps,
+    AccordionVariantProps {
+  /**
+   * The heading of the accordion item to open and close the content.
+   */
+  heading: string
+  /**
+   * The position of the arrow indicator.
+   */
+  indicatorPosition?: 'start' | 'end'
+}
+
+/**
+ * The AccordionItemGroup component is an abstraction of the Accordion primitive
+ * components which renders an accordion item with a heading and an indicator.
+ *
+ * It is a wrapper around the `AccordionParts.Item`, `AccordionParts.
+ * ItemTrigger`, `AccordionParts.ItemIndicator`, and `AccordionParts.ItemContent` components.
+ *
+ * @description [Cerberus docs](https://cerberus.digitalu.design/react/accordion)
+ * @description [Ark docs](https://ark-ui.com/react/docs/components/accordion)
+ */
+export function AccordionItemGroup(props: AccordionItemGroupProps) {
+  const [groupProps, itemProps] = splitProps(props, [
+    'heading',
+    'children',
+    'indicatorPosition',
+  ])
+  const indicatorPosition = groupProps.indicatorPosition ?? 'end'
+
+  return (
+    <AccordionParts.Item {...itemProps}>
+      <AccordionParts.ItemTrigger data-indicator-position={indicatorPosition}>
+        <Show when={indicatorPosition === 'start'}>
+          <AccordionChevronItemIndicator />
+        </Show>
+
+        {groupProps.heading}
+
+        <Show when={indicatorPosition === 'end'}>
+          <AccordionChevronItemIndicator />
+        </Show>
+      </AccordionParts.ItemTrigger>
+
+      <AccordionParts.ItemContent>
+        {groupProps.children}
+      </AccordionParts.ItemContent>
+    </AccordionParts.Item>
+  )
+}

package/src/components/accordion/item-indicator.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { type AccordionItemIndicatorProps } from '@ark-ui/react/accordion'
+import { type AccordionVariantProps } from '@cerberus/styled-system/recipes'
+import { useCerberusContext } from '../../context/cerberus'
+import { AccordionParts } from './parts'
+
+/**
+ * This module contains the internal AccordionItemIndicator component.
+ * @module 'accordion/item-indicator'
+ */
+
+export function AccordionChevronItemIndicator(
+  props: AccordionItemIndicatorProps & AccordionVariantProps,
+) {
+  const { size, ...indicatorProps } = props
+  const iconSize = size === 'sm' ? 16 : '24'
+
+  const { icons } = useCerberusContext()
+  const { accordionIndicator: ChevronDown } = icons
+
+  return (
+    <AccordionParts.ItemIndicator {...indicatorProps}>
+      <ChevronDown size={iconSize} />
+    </AccordionParts.ItemIndicator>
+  )
+}

package/src/components/accordion/parts.ts

@@ -0,0 +1,53 @@
+import type { ElementType } from 'react'
+import {
+  AccordionItem,
+  AccordionItemContent,
+  AccordionItemIndicator,
+  AccordionItemTrigger,
+  AccordionRoot,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Accordion component.
+ * @module 'accordion/parts'
+ */
+
+interface AccordionPartsValue {
+  /**
+   * The context provider of the accordion.
+   */
+  Root: ElementType
+  /**
+   * The item of the accordion.
+   */
+  Item: ElementType
+  /**
+   * The trigger of the accordion item.
+   */
+  ItemTrigger: ElementType
+  /**
+   * The content of the accordion item.
+   */
+  ItemContent: ElementType
+  /**
+   * The indicator of the accordion item.
+   */
+  ItemIndicator: ElementType
+}
+
+/**
+ * An Object containing the parts of the Accordion component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the AccordionParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const AccordionParts: AccordionPartsValue = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  ItemTrigger: AccordionItemTrigger,
+  ItemContent: AccordionItemContent,
+  ItemIndicator: AccordionItemIndicator,
+}

package/src/components/accordion/primitives.tsx

@@ -0,0 +1,101 @@
+import {
+  Accordion,
+  type AccordionItemContentProps,
+  type AccordionItemIndicatorProps,
+  type AccordionItemProps,
+  type AccordionItemTriggerProps,
+  type AccordionRootProps,
+} from '@ark-ui/react/accordion'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  accordion,
+  type AccordionVariantProps,
+} from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the primitives of the Accordion component.
+ * @module 'accordion/primitives'
+ */
+
+/**
+ * The primitive root component of the Accordion component.
+ *
+ * This component returns the Ark `Accordion.Root` component which has a
+ * base style using the Cerberus `accordion` recipe that can be overridden.
+ */
+export function AccordionRoot(
+  props: AccordionRootProps & AccordionVariantProps,
+) {
+  const { size, ...rootProps } = props
+  const styles = accordion({ size })
+  return (
+    <Accordion.Root
+      {...props}
+      className={cx(styles.root, rootProps.className)}
+      data-size={size}
+    />
+  )
+}
+
+/**
+ * The primitive item component of the Accordion component.
+ *
+ * This component returns the Ark `Accordion.Item` component which has a
+ * base style using the Cerberus `accordion` recipe that can be overridden.
+ */
+export function AccordionItem(
+  props: AccordionItemProps & AccordionVariantProps,
+) {
+  const styles = accordion()
+  return (
+    <Accordion.Item {...props} className={cx(styles.item, props.className)} />
+  )
+}
+
+/**
+ * The primitive trigger component of the Accordion component.
+ *
+ * This component returns the Ark `Accordion.ItemTrigger` component which has
+ * a base style using the Cerberus `accordion` recipe that can be overridden.
+ */
+export function AccordionItemTrigger(props: AccordionItemTriggerProps) {
+  const styles = accordion()
+  return (
+    <Accordion.ItemTrigger
+      {...props}
+      className={cx(styles.itemTrigger, props.className)}
+    />
+  )
+}
+
+/**
+ * The primitive item indicator component of the Accordion component.
+ *
+ * This component returns the Ark `Accordion.ItemIndicator` component which has
+ * a base style using the Cerberus `accordion` recipe that can be overridden.
+ */
+export function AccordionItemIndicator(props: AccordionItemIndicatorProps) {
+  const styles = accordion()
+  return (
+    <Accordion.ItemIndicator
+      {...props}
+      className={cx(styles.itemIndicator, props.className)}
+    />
+  )
+}
+
+/**
+ * The primitive content component of the Accordion component.
+ *
+ * This component returns the Ark `Accordion.Content` component which has a
+ * base style using the Cerberus `accordion` recipe that can be overridden.
+ */
+export function AccordionItemContent(props: AccordionItemContentProps) {
+  const styles = accordion()
+  return (
+    <Accordion.ItemContent
+      {...props}
+      className={cx(styles.itemContent, props.className)}
+    />
+  )
+}

package/src/index.ts

@@ -21,9 +21,7 @@ export * from './hooks/useToggle'
 
 // components
 
-export * from './components/Accordion'
-export * from './components/Accordion.client'
-export * from './components/AccordionItemGroup'
+export * from './components/accordion/index'
 export * from './components/Admonition'
 export * from './components/Avatar'
 export * from './components/button/index'

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Accordion.tsx"],"sourcesContent":["import { Accordion as ArkAccordion } from '@ark-ui/react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n  accordion,\n  type AccordionVariantProps,\n} from '@cerberus/styled-system/recipes'\n\nexport type AccordionProps = ArkAccordion.RootProps & AccordionVariantProps\n\n/**\n * The context provider for the Accordion family.\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n *  <AccordionItemGroup heading=\"Item 1 heading\" value=\"one\">\n *     This is the content\n *  </AccordionItemGroup>\n * </Accordion>\n * ```\n */\nexport function Accordion(props: AccordionProps) {\n  const { size, className, ...rootProps } = props\n  const styles = accordion({ size })\n\n  return (\n    <ArkAccordion.Root\n      collapsible\n      className={cx(className, styles.root)}\n      {...rootProps}\n    />\n  )\n}\n\ntype AccordionItemProps = ArkAccordion.ItemProps & AccordionVariantProps\n\n/**\n * The item for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n *   <AccordionItem value=\"one\">\n *     <AccordionTrigger>\n *        Accordion Item 1\n *     <AccordionIndicator />\n *     </AccordionTrigger>\n *     <AccordionContent>Accordion Item 1 content</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n */\nexport function AccordionItem(props: AccordionItemProps) {\n  const { size, ...itemProps } = props\n  const styles = accordion({ size })\n  return (\n    <ArkAccordion.Item\n      {...itemProps}\n      className={cx(itemProps.className, styles.item)}\n    />\n  )\n}\n\nexport type AccordionItemTriggerProps = ArkAccordion.ItemTriggerProps &\n  AccordionVariantProps\n\n/**\n * The trigger for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n *   <AccordionItem value=\"one\">\n *     <AccordionTrigger>\n *        Accordion Item 1\n *     <AccordionIndicator />\n *     </AccordionTrigger>\n *     <AccordionContent>Accordion Item 1 content</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n */\nexport function AccordionItemTrigger(props: AccordionItemTriggerProps) {\n  const { size, ...triggerProps } = props\n  const styles = accordion({ size })\n  return (\n    <ArkAccordion.ItemTrigger\n      {...triggerProps}\n      className={cx(triggerProps.className, styles.itemTrigger)}\n    />\n  )\n}\n\nexport type AccordionItemContentProps = ArkAccordion.ItemContentProps &\n  AccordionVariantProps\n\n/**\n * The content for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n *   <AccordionItem value=\"one\">\n *     <AccordionTrigger>\n *        Accordion Item 1\n *     <AccordionIndicator />\n *     </AccordionTrigger>\n *     <AccordionContent>Accordion Item 1 content</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n * */\nexport function AccordionItemContent(props: AccordionItemContentProps) {\n  const { size, ...contentProps } = props\n  const styles = accordion({ size })\n  return (\n    <ArkAccordion.ItemContent\n      {...contentProps}\n      className={cx(contentProps.className, styles.itemContent)}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAC1C,iBAAmB;AACnB,qBAGO;AAqBH;AALG,SAAS,UAAU,OAAuB;AAC/C,QAAM,EAAE,MAAM,WAAW,GAAG,UAAU,IAAI;AAC1C,QAAM,aAAS,0BAAU,EAAE,KAAK,CAAC;AAEjC,SACE;AAAA,IAAC,aAAAA,UAAa;AAAA,IAAb;AAAA,MACC,aAAW;AAAA,MACX,eAAW,eAAG,WAAW,OAAO,IAAI;AAAA,MACnC,GAAG;AAAA;AAAA,EACN;AAEJ;AAqBO,SAAS,cAAc,OAA2B;AACvD,QAAM,EAAE,MAAM,GAAG,UAAU,IAAI;AAC/B,QAAM,aAAS,0BAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAAA,UAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,UAAU,WAAW,OAAO,IAAI;AAAA;AAAA,EAChD;AAEJ;AAsBO,SAAS,qBAAqB,OAAkC;AACrE,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,aAAS,0BAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAAA,UAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,aAAa,WAAW,OAAO,WAAW;AAAA;AAAA,EAC1D;AAEJ;AAsBO,SAAS,qBAAqB,OAAkC;AACrE,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,aAAS,0BAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAAA,UAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,aAAa,WAAW,OAAO,WAAW;AAAA;AAAA,EAC1D;AAEJ;","names":["ArkAccordion"]}