@cerberus-design/react 0.16.0 → 0.17.0-next-e7f9956

package/src/components/table/table.tsx

@@ -0,0 +1,75 @@
+import type { HTMLArkProps } from '@ark-ui/react/factory'
+import type { TablePartsValue } from './parts'
+import {
+  Caption,
+  TableEl,
+  TableRoot,
+  TableTrigger,
+  Tbody,
+  Td,
+  Tfoot,
+  Th,
+  Thead,
+  Tr,
+} from './primitives'
+import type { TableVariantProps } from '@cerberus/styled-system/recipes'
+import { Show } from '../Show'
+
+interface TableRootElProps extends HTMLArkProps<'div'>, TableVariantProps {
+  /**
+   * An easy to understand description of the table. Required for accessibility.
+   */
+  caption: string
+  /**
+   * If true, the table header will be sticky.
+   *
+   * @default false
+   */
+  sticky?: boolean
+}
+
+/**
+ * An abstraction over the TableRoot component that adds a sticky attribute.
+ *
+ * @description [Cerberus Docs](https://cerberus.digitalu.design/react/table)
+ *
+ * @remarks
+ *
+ * This component is used to create a table with an optional sticky header.
+ * It is a wrapper around the TableRoot component and the TableEl primitive.
+ */
+function TableRootEl(props: TableRootElProps) {
+  const { sticky, caption, ...rootProps } = props
+  return (
+    <TableRoot {...rootProps} data-sticky={sticky ?? false}>
+      <TableEl>
+        <Show when={Boolean(caption)}>
+          <Caption>{caption}</Caption>
+        </Show>
+
+        {rootProps.children}
+      </TableEl>
+    </TableRoot>
+  )
+}
+
+/**
+ * An Object containing the parts of the Table component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the TableParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const Table: Omit<TablePartsValue, 'Table'> = {
+  Root: TableRootEl,
+  Caption: Caption,
+  Header: Thead,
+  HeaderCol: Th,
+  Body: Tbody,
+  Row: Tr,
+  Cell: Td,
+  Footer: Tfoot,
+  Trigger: TableTrigger,
+}

package/src/components/tabs/index.ts

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

package/src/components/tabs/parts.ts

@@ -0,0 +1,53 @@
+import type { ElementType } from 'react'
+import {
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsRoot,
+  TabsTrigger,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Tabs parts.
+ * @module 'tabs/parts'
+ */
+
+export interface TabsPartsValue {
+  /**
+   * The container of the tabs.
+   */
+  Root: ElementType
+  /**
+   * The tab list element.
+   */
+  List: ElementType
+  /**
+   * The tab element.
+   */
+  Trigger: ElementType
+  /**
+   * The tab content element.
+   */
+  Content: ElementType
+  /**
+   * The tab indicator element.
+   */
+  Indicator: ElementType
+}
+
+/**
+ * An Object containing the parts of the Switch component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the TabsParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const TabsParts: TabsPartsValue = {
+  Root: TabsRoot,
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent,
+  Indicator: TabsIndicator,
+}

package/src/components/tabs/primitives.tsx

@@ -0,0 +1,70 @@
+import {
+  Tabs,
+  type TabContentProps,
+  type TabIndicatorProps,
+  type TabListProps,
+  type TabsRootProps,
+  type TabTriggerProps,
+} from '@ark-ui/react/tabs'
+import { cx } from '@cerberus/styled-system/css'
+import { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'
+
+/**
+ * This module provides the primitives for the Tabs component.
+ * @module 'tabs/primitives'
+ */
+
+/**
+ * The container and context provider of the tabs.
+ */
+export function TabsRoot(props: TabsRootProps & TabsVariantProps) {
+  const { palette, ...rootProps } = props
+  const styles = tabs({ palette })
+  return (
+    <Tabs.Root
+      {...rootProps}
+      className={cx(styles.root, rootProps.className)}
+    />
+  )
+}
+
+/**
+ * The tab list container for the Tabs group.
+ */
+export function TabsList(props: TabListProps) {
+  const styles = tabs()
+  return <Tabs.List {...props} className={cx(styles.list, props.className)} />
+}
+
+/**
+ * The tab element.
+ */
+export function TabsTrigger(props: TabTriggerProps) {
+  const styles = tabs()
+  return (
+    <Tabs.Trigger {...props} className={cx(styles.trigger, props.className)} />
+  )
+}
+
+/**
+ * The tab content element.
+ */
+export function TabsContent(props: TabContentProps) {
+  const styles = tabs()
+  return (
+    <Tabs.Content {...props} className={cx(styles.content, props.className)} />
+  )
+}
+
+/**
+ * The tab indicator element.
+ */
+export function TabsIndicator(props: TabIndicatorProps) {
+  const styles = tabs()
+  return (
+    <Tabs.Indicator
+      {...props}
+      className={cx(styles.indicator, props.className)}
+    />
+  )
+}

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,48 @@
+import type { TabListProps } from '@ark-ui/react/tabs'
+import { TabsParts, type TabsPartsValue } from './parts'
+import type { ElementType } from 'react'
+
+/**
+ * This module contains an abstraction of the Tabs family.
+ * @module 'tabs'
+ */
+
+interface TabsValueProps
+  extends Omit<TabsPartsValue, 'Trigger' | 'Content' | 'Indicator'> {
+  /**
+   * A named component for the TabsTrigger.
+   */
+  Tab: ElementType
+  /**
+   * A named component for the TabsContent.
+   */
+  Panel: ElementType
+}
+
+/**
+ * An abstraction of the TabsList component that includes the TabIndicator.
+ */
+function TabsList(props: TabListProps) {
+  const { children, ...listProps } = props
+  return (
+    <TabsParts.List {...listProps}>
+      {children}
+      <TabsParts.Indicator />
+    </TabsParts.List>
+  )
+}
+
+/**
+ * An Object containing the abstracted parts of the Tabs component.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the TabsParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const Tabs: TabsValueProps = {
+  Root: TabsParts.Root,
+  List: TabsList,
+  Tab: TabsParts.Trigger,
+  Panel: TabsParts.Content,
+}

package/src/context/confirm-modal.tsx

@@ -14,7 +14,7 @@ import {
 import { Button } from '../components/button/button'
 import { css } from '@cerberus/styled-system/css'
 import { Show } from '../components/Show'
-import { Avatar } from '../components/Avatar'
+import { Avatar } from '../components/avatar/avatar'
 import { HStack, VStack } from '@cerberus/styled-system/jsx'
 import { useCerberusContext } from './cerberus'
 import {
@@ -23,7 +23,7 @@ import {
   DialogDescription,
   DialogHeading,
   DialogProvider,
-} from '../components/Dialog'
+} from '../components/dialog'
 
 /**
  * This module provides a context and hook for the confirm modal.
@@ -176,18 +176,14 @@ export function ConfirmModal(
                   when={palette === 'danger'}
                   fallback={
                     <Avatar
-                      ariaLabel=""
                       gradient="charon-light"
-                      icon={<ConfirmIcon size={24} />}
-                      src=""
+                      fallback={<ConfirmIcon size={24} />}
                     />
                   }
                 >
                   <Avatar
-                    ariaLabel=""
                     gradient="hades-dark"
-                    icon={<ConfirmIcon size={24} />}
-                    src=""
+                    fallback={<ConfirmIcon size={24} />}
                   />
                 </Show>
               </HStack>

package/src/context/notification-center.tsx

@@ -10,15 +10,15 @@ import {
   type PropsWithChildren,
   type ReactNode,
 } from 'react'
-import { Show } from '../components/Show'
-import { NotificationHeading } from '../components/NotificationHeading'
-import { NotificationDescription } from '../components/NotificationDescription'
-import { Notification } from '../components/Notification'
 import { animateIn, vstack } from '@cerberus/styled-system/patterns'
-import { Portal, type PortalProps } from '../components/Portal'
 import { notification } from '@cerberus/styled-system/recipes'
-import { Button } from '../components/button/button'
 import { cx } from '@cerberus/styled-system/css'
+import { Show } from '../components/Show'
+import { NotificationHeading } from '../components/deprecated/NotificationHeading'
+import { NotificationDescription } from '../components/deprecated/NotificationDescription'
+import { Notification } from '../components/deprecated/Notification'
+import { Portal, type PortalProps } from '../components/Portal'
+import { Button } from '../components/button/button'
 import {
   addNotification,
   clearNotificationState,
@@ -71,28 +71,9 @@ export type NotificationsProviderProps = PortalProps & {
 }
 
 /**
- * Provides a notification center to the app.
- * @see https://cerberus.digitalu.design/react/notification
- * @example
- * ```tsx
- * // Wrap the Provider around the root of the feature.
- * <Notifications>
- *   <SomeFeatureSection />
- * </Notifications>
- *
- * // Use the hook to show a notification.
- * const notify = useNotifications()
- *
- * const handleClick = useCallback(() => {
- *  notify({
- *   palette: 'info',
- *   heading: 'New feature!',
- *   description: 'We have added a new feature to the app.',
- * })
- * }, [notify])
- * ```
+ * @deprecated
  */
-export function NotificationCenter(
+export function NotificationCenter_deprecated(
   props: PropsWithChildren<NotificationsProviderProps>,
 ) {
   const [state, dispatch] = useReducer(notificationCenterReducer, [])
@@ -265,20 +246,7 @@ function MatchNotification(props: MatchNotificationProps) {
   }
 }
 
-/**
- * The hook to use the NotificationCenter.
- * @returns The notify method to trigger a notification.
- * @example
- * ```tsx
- * const {notify} = useNotificationCenter()
- * notify({
- *  palette: 'info',
- *  heading: 'New feature',
- *  description: 'We have added a new feature to the app.',
- * })
- * ```
- */
-export function useNotificationCenter(): NotificationsValue {
+export function useNotificationCenter_deprecated(): NotificationsValue {
   const context = useContext(NotificationsContext)
   if (!context) {
     throw new Error(

package/src/context/prompt-modal.tsx

@@ -18,7 +18,7 @@ import { hstack } from '@cerberus/styled-system/patterns'
 import { FieldLabel, FieldRoot, Input } from '../components/field/index'
 import { Button } from '../components/button/button'
 import { Show } from '../components/Show'
-import { Avatar } from '../components/Avatar'
+import { Avatar } from '../components/avatar/avatar'
 import { Text } from '../components/Text'
 import { useCerberusContext } from './cerberus'
 import {
@@ -26,7 +26,7 @@ import {
   DialogDescription,
   DialogHeading,
   DialogProvider,
-} from '../components/Dialog'
+} from '../components/dialog'
 
 /**
  * This module provides a context and hook for the prompt modal.
@@ -189,18 +189,14 @@ export function PromptModal(
                   when={palette === 'danger'}
                   fallback={
                     <Avatar
-                      ariaLabel=""
                       gradient="charon-light"
-                      icon={<PromptIcon size={24} />}
-                      src=""
+                      fallback={<PromptIcon size={24} />}
                     />
                   }
                 >
                   <Avatar
-                    ariaLabel=""
                     gradient="hades-dark"
-                    icon={<PromptIcon size={24} />}
-                    src=""
+                    fallback={<PromptIcon size={24} />}
                   />
                 </Show>
               </HStack>

package/src/index.ts

@@ -15,24 +15,25 @@ export * from './components/deprecated/ModalDescription'
 export * from './components/deprecated/NavMenuTrigger'
 export * from './components/deprecated/NavMenuList'
 export * from './components/deprecated/NavMenuLink'
+export * from './components/deprecated/Legend'
+export * from './context/confirm-modal'
+export * from './context/prompt-modal'
 export * from './hooks/useDate'
 export * from './hooks/useModal'
 export * from './hooks/useToggle'
 
 // components
 
-export * from './components/Accordion'
-export * from './components/Accordion.client'
-export * from './components/AccordionItemGroup'
-export * from './components/Admonition'
-export * from './components/Avatar'
+export * from './components/admonition/index'
+export * from './components/accordion/index'
+export * from './components/avatar/index'
 export * from './components/button/index'
 export * from './components/checkbox/index'
 export * from './components/CircularProgress'
-export * from './components/DatePicker.client'
-export * from './components/DatePicker.server'
-export * from './components/Dialog'
-export * from './components/Dialog.client'
+export * from './components/combobox/index'
+export * from './components/cta-dialog/index'
+export * from './components/date-picker/index'
+export * from './components/dialog/index'
 export * from './components/Droppable'
 export * from './components/FeatureFlag'
 export * from './components/field/index'
@@ -41,24 +42,18 @@ export * from './components/FileStatus'
 export * from './components/FileUploader'
 export * from './components/for'
 export * from './components/IconButton'
-export * from './components/Legend'
 export * from './components/Menu'
-export * from './components/Notification'
-export * from './components/NotificationHeading'
-export * from './components/NotificationDescription'
+export * from './components/notifications/index'
 export * from './components/Portal'
 export * from './components/ProgressBar'
 export * from './components/radio/index'
+export * from './components/rating/index'
 export * from './components/select/index'
 export * from './components/Show'
 export * from './components/Spinner'
 export * from './components/switch/index'
-export * from './components/Tabs.client'
-export * from './components/Table'
-export * from './components/Thead'
-export * from './components/Th'
-export * from './components/Td'
-export * from './components/Tbody'
+export * from './components/table/index'
+export * from './components/tabs/index'
 export * from './components/Tag'
 export * from './components/Text'
 export * from './components/toggle/index'
@@ -67,13 +62,8 @@ export * from './components/Tooltip'
 // context
 
 export * from './context/cerberus'
-export * from './context/confirm-modal'
-export * from './context/cta-modal'
 export * from './context/feature-flags'
 export * from './context/navMenu'
-export * from './context/notification-center'
-export * from './context/prompt-modal'
-export * from './context/tabs'
 export * from './context/theme'
 
 // hooks

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"]}

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

@@ -1,64 +0,0 @@
-"use strict";
-"use client";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/components/Accordion.client.tsx
-var Accordion_client_exports = {};
-__export(Accordion_client_exports, {
-  AccordionItemIndicator: () => AccordionItemIndicator
-});
-module.exports = __toCommonJS(Accordion_client_exports);
-var import_react2 = require("@ark-ui/react");
-var import_css = require("@cerberus/styled-system/css");
-var import_recipes = require("@cerberus/styled-system/recipes");
-
-// src/context/cerberus.tsx
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var CerberusContext = (0, import_react.createContext)(null);
-function useCerberusContext() {
-  const context = (0, import_react.useContext)(CerberusContext);
-  if (!context) {
-    throw new Error("useCerberus must be used within a CerberusProvider");
-  }
-  return context;
-}
-
-// src/components/Accordion.client.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function AccordionItemIndicator(props) {
-  const { size, ...indicatorProps } = props;
-  const styles = (0, import_recipes.accordion)({ size });
-  const iconSize = size === "sm" ? 16 : "24";
-  const { icons } = useCerberusContext();
-  const ChevronDown = icons.accordionIndicator;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react2.Accordion.ItemIndicator,
-    {
-      ...indicatorProps,
-      className: (0, import_css.cx)(indicatorProps.className, styles.itemIndicator),
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronDown, { size: iconSize })
-    }
-  );
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  AccordionItemIndicator
-});
-//# sourceMappingURL=Accordion.client.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/Accordion.client.tsx","../../../src/context/cerberus.tsx"],"sourcesContent":["'use client'\n\nimport { 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'\nimport { useCerberusContext } from '../context/cerberus'\n\nexport type AccordionItemIndicatorProps = ArkAccordion.ItemIndicatorProps &\n  AccordionVariantProps\n\n/**\n * The indicator 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 AccordionItemIndicator(props: AccordionItemIndicatorProps) {\n  const { size, ...indicatorProps } = props\n  const styles = accordion({ size })\n  const iconSize = size === 'sm' ? 16 : '24'\n  const { icons } = useCerberusContext()\n  const ChevronDown = icons.accordionIndicator\n\n  return (\n    <ArkAccordion.ItemIndicator\n      {...indicatorProps}\n      className={cx(indicatorProps.className, styles.itemIndicator)}\n    >\n      <ChevronDown size={iconSize} />\n    </ArkAccordion.ItemIndicator>\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAA0C;AAC1C,iBAAmB;AACnB,qBAGO;;;ACLP,mBAAkE;AAyB9D;AAfJ,IAAM,sBAAkB,4BAA2C,IAAI;AAyBhE,SAAS,qBAAqB;AACnC,QAAM,cAAU,yBAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;ADDM,IAAAC,sBAAA;AAZC,SAAS,uBAAuB,OAAoC;AACzE,QAAM,EAAE,MAAM,GAAG,eAAe,IAAI;AACpC,QAAM,aAAS,0BAAU,EAAE,KAAK,CAAC;AACjC,QAAM,WAAW,SAAS,OAAO,KAAK;AACtC,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,cAAc,MAAM;AAE1B,SACE;AAAA,IAAC,cAAAC,UAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,eAAe,WAAW,OAAO,aAAa;AAAA,MAE5D,uDAAC,eAAY,MAAM,UAAU;AAAA;AAAA,EAC/B;AAEJ;","names":["import_react","import_jsx_runtime","ArkAccordion"]}