@cerberus-design/react 0.13.2-next-d63dca1 → 0.13.2-next-4bdc7c3

package/build/modern/index.js

@@ -1,15 +1,21 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-3XGLNXJJ.js";
+} from "./chunk-C3CDRCHS.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-FBSESDWJ.js";
+} from "./chunk-4QBPJVEN.js";
 import {
   ThemeProvider,
   useThemeContext
 } from "./chunk-EB37HRCN.js";
+import {
+  Textarea
+} from "./chunk-JIJM6JFJ.js";
+import {
+  Th
+} from "./chunk-SGKHA4EB.js";
 import {
   Thead
 } from "./chunk-Y6QQCRQV.js";
@@ -18,15 +24,21 @@ import {
 } from "./chunk-NMNONSHU.js";
 import {
   Tooltip
-} from "./chunk-KML4CTMK.js";
+} from "./chunk-LPALHB6R.js";
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-GRUXP3NG.js";
+} from "./chunk-TM5AS6M6.js";
 import {
   CTAModal,
   useCTAModal
-} from "./chunk-WFJWCZ7E.js";
+} from "./chunk-622N7YRT.js";
+import {
+  Spinner
+} from "./chunk-7SYJFI5E.js";
+import {
+  Tab
+} from "./chunk-SLF6SIPB.js";
 import {
   TabList
 } from "./chunk-UKPF7JOB.js";
@@ -47,11 +59,11 @@ import {
   Td
 } from "./chunk-3R4TIF2X.js";
 import {
-  Textarea
-} from "./chunk-JIJM6JFJ.js";
+  Notification
+} from "./chunk-7SGPJM66.js";
 import {
-  Th
-} from "./chunk-SGKHA4EB.js";
+  NotificationDescription
+} from "./chunk-XEW6TJJ4.js";
 import {
   NotificationHeading
 } from "./chunk-SXIXDXG3.js";
@@ -66,11 +78,17 @@ import {
   Select
 } from "./chunk-XL4JREDT.js";
 import {
-  Spinner
-} from "./chunk-7SYJFI5E.js";
+  Menu,
+  MenuContent,
+  MenuGroupLabel,
+  MenuItem,
+  MenuItemGroup,
+  MenuSeparator,
+  MenuTrigger
+} from "./chunk-RUR5MV54.js";
 import {
-  Tab
-} from "./chunk-SLF6SIPB.js";
+  Modal
+} from "./chunk-BE4EOU2P.js";
 import {
   ModalDescription
 } from "./chunk-Q7BRMIBR.js";
@@ -95,11 +113,11 @@ import {
   useNavMenuContext
 } from "./chunk-6WS765J3.js";
 import {
-  Notification
-} from "./chunk-7SGPJM66.js";
+  Fieldset
+} from "./chunk-3ZDFQO25.js";
 import {
-  NotificationDescription
-} from "./chunk-XEW6TJJ4.js";
+  FieldsetLabel
+} from "./chunk-PZAZKQMO.js";
 import {
   FileStatus,
   processStatus
@@ -122,18 +140,6 @@ import {
 import {
   Legend
 } from "./chunk-ILQW5VZT.js";
-import {
-  Menu,
-  MenuContent,
-  MenuGroupLabel,
-  MenuItem,
-  MenuItemGroup,
-  MenuSeparator,
-  MenuTrigger
-} from "./chunk-RUR5MV54.js";
-import {
-  Modal
-} from "./chunk-BE4EOU2P.js";
 import {
   Button
 } from "./chunk-EXGKZGML.js";
@@ -156,16 +162,10 @@ import {
 import {
   FieldMessage
 } from "./chunk-JWIJHSI6.js";
-import {
-  Fieldset
-} from "./chunk-3ZDFQO25.js";
 import {
   Field,
   useFieldContext
 } from "./chunk-UZDVOIW5.js";
-import {
-  FieldsetLabel
-} from "./chunk-PZAZKQMO.js";
 import {
   useModal
 } from "./chunk-KGQG5JGW.js";
@@ -183,6 +183,16 @@ import {
 import {
   formatNotifyCount
 } from "./chunk-UTGEFJ3L.js";
+import {
+  AccordionItemGroup
+} from "./chunk-CSMPRYNC.js";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemContent,
+  AccordionItemIndicator,
+  AccordionItemTrigger
+} from "./chunk-ZTYKIWYQ.js";
 import {
   Admonition,
   AdmonitionDescription,
@@ -227,6 +237,12 @@ import {
 export * from "@dnd-kit/core";
 export {
   $cerberusIcons,
+  Accordion,
+  AccordionItem,
+  AccordionItemContent,
+  AccordionItemGroup,
+  AccordionItemIndicator,
+  AccordionItemTrigger,
   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// components\n\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\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/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\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/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,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// components\n\nexport * from './components/Accordion'\nexport * from './components/AccordionItemGroup'\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\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/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\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/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4FA,cAAc;","names":[]}

package/package.json

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

package/src/components/Accordion.tsx

@@ -0,0 +1,161 @@
+import { Accordion as ArkAccordion } from '@ark-ui/react'
+import { ChevronDown } from '@cerberus/icons'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  accordion,
+  type AccordionVariantProps,
+} from '@cerberus/styled-system/recipes'
+
+export type AccordionProps = ArkAccordion.RootProps & AccordionVariantProps
+
+/**
+ * The context provider for the Accordion family.
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
+ * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
+ * @example
+ * ```tsx
+ * <Accordion>
+ *  <AccordionItemGroup heading="Item 1 heading" value="one">
+ *     This is the content
+ *  </AccordionItemGroup>
+ * </Accordion>
+ * ```
+ */
+export function Accordion(props: AccordionProps) {
+  const { size, className, ...rootProps } = props
+  const styles = accordion({ size })
+  return (
+    <ArkAccordion.Root
+      collapsible
+      className={cx(className, styles.root)}
+      {...rootProps}
+    />
+  )
+}
+
+type AccordionItemProps = ArkAccordion.ItemProps & AccordionVariantProps
+
+/**
+ * The item for the Accordion component.
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
+ * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem value="one">
+ *     <AccordionTrigger>
+ *        Accordion Item 1
+ *     <AccordionIndicator />
+ *     </AccordionTrigger>
+ *     <AccordionContent>Accordion Item 1 content</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export function AccordionItem(props: AccordionItemProps) {
+  const { size, ...itemProps } = props
+  const styles = accordion({ size })
+  return (
+    <ArkAccordion.Item
+      {...itemProps}
+      className={cx(itemProps.className, styles.item)}
+    />
+  )
+}
+
+export type AccordionItemTriggerProps = ArkAccordion.ItemTriggerProps &
+  AccordionVariantProps
+
+/**
+ * The trigger for the Accordion component.
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
+ * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem value="one">
+ *     <AccordionTrigger>
+ *        Accordion Item 1
+ *     <AccordionIndicator />
+ *     </AccordionTrigger>
+ *     <AccordionContent>Accordion Item 1 content</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+export function AccordionItemTrigger(props: AccordionItemTriggerProps) {
+  const { size, ...triggerProps } = props
+  const styles = accordion({ size })
+  return (
+    <ArkAccordion.ItemTrigger
+      {...triggerProps}
+      className={cx(triggerProps.className, styles.itemTrigger)}
+    />
+  )
+}
+
+export type AccordionItemIndicatorProps = ArkAccordion.ItemIndicatorProps &
+  AccordionVariantProps
+
+/**
+ * The indicator for the Accordion component.
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
+ * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem value="one">
+ *     <AccordionTrigger>
+ *        Accordion Item 1
+ *     <AccordionIndicator />
+ *     </AccordionTrigger>
+ *     <AccordionContent>Accordion Item 1 content</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ * */
+export function AccordionItemIndicator(props: AccordionItemIndicatorProps) {
+  const { size, ...indicatorProps } = props
+  const styles = accordion({ size })
+  const iconSize = size === 'sm' ? 16 : '24'
+
+  return (
+    <ArkAccordion.ItemIndicator
+      {...indicatorProps}
+      className={cx(indicatorProps.className, styles.itemIndicator)}
+    >
+      <ChevronDown size={iconSize} />
+    </ArkAccordion.ItemIndicator>
+  )
+}
+
+export type AccordionItemContentProps = ArkAccordion.ItemContentProps &
+  AccordionVariantProps
+
+/**
+ * The content for the Accordion component.
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
+ * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItem value="one">
+ *     <AccordionTrigger>
+ *        Accordion Item 1
+ *     <AccordionIndicator />
+ *     </AccordionTrigger>
+ *     <AccordionContent>Accordion Item 1 content</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ * */
+export function AccordionItemContent(props: AccordionItemContentProps) {
+  const { size, ...contentProps } = props
+  const styles = accordion({ size })
+  return (
+    <ArkAccordion.ItemContent
+      {...contentProps}
+      className={cx(contentProps.className, styles.itemContent)}
+    />
+  )
+}

package/src/components/AccordionItemGroup.tsx

@@ -0,0 +1,79 @@
+import { Accordion as ArkAccordion } from '@ark-ui/react'
+import { type AccordionVariantProps } from '@cerberus/styled-system/recipes'
+import type { PropsWithChildren } from 'react'
+import { Show } from './Show'
+import {
+  AccordionItem,
+  AccordionItemContent,
+  AccordionItemIndicator,
+  AccordionItemTrigger,
+} from './Accordion'
+import { css } from '@cerberus/styled-system/css'
+
+/**
+ * This module contains an abstraction of the AccordionItem components.
+ * @module
+ */
+
+export interface AccordionItemGroupBaseProps extends ArkAccordion.ItemProps {
+  /**
+   * The heading of the accordion item to open and close the content.
+   */
+  heading: string
+  /**
+   * The position of the arrow indicator.
+   */
+  indicatorPosition?: 'start' | 'end'
+}
+export type AccordionItemGroupProps = AccordionItemGroupBaseProps &
+  AccordionVariantProps
+
+/**
+ * A grouped item for the Accordion component.
+ * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)
+ * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <AccordionItemGroup heading="Accordion Item 1" value="one">
+ *     Accordion Item 1 content
+ *   </AccordionItemGroup>
+ * </Accordion>
+ * ```
+ */
+export function AccordionItemGroup(
+  props: PropsWithChildren<AccordionItemGroupProps>,
+) {
+  const {
+    size,
+    heading,
+    children,
+    indicatorPosition = 'end',
+    ...itemProps
+  } = props
+  const triggerStyles =
+    indicatorPosition === 'start'
+      ? {
+          gap: 'md',
+          justifyContent: 'flex-start',
+        }
+      : undefined
+
+  return (
+    <AccordionItem {...itemProps}>
+      <AccordionItemTrigger className={css(triggerStyles)} size={size}>
+        <Show when={indicatorPosition === 'start'}>
+          <AccordionItemIndicator size={size} />
+        </Show>
+
+        {heading}
+
+        <Show when={indicatorPosition === 'end'}>
+          <AccordionItemIndicator size={size} />
+        </Show>
+      </AccordionItemTrigger>
+
+      <AccordionItemContent size={size}>{children}</AccordionItemContent>
+    </AccordionItem>
+  )
+}

package/src/components/Tooltip.tsx

@@ -32,7 +32,7 @@ export interface TooltipProps {
  * </Tooltip>
  */
 export function Tooltip(props: TooltipProps & TooltipContentProps) {
-  const { content, children, ...nativeProps } = props
+  const { content, children, asChild, ...nativeProps } = props
   const styles = tooltip()
   const position = {
     placement: props.position || 'top',
@@ -40,7 +40,7 @@ export function Tooltip(props: TooltipProps & TooltipContentProps) {
 
   return (
     <ArkTooltip.Root openDelay={400} positioning={position}>
-      <ArkTooltip.Trigger className={styles.trigger}>
+      <ArkTooltip.Trigger className={styles.trigger} asChild={asChild}>
         {children}
       </ArkTooltip.Trigger>
 

package/src/index.ts

@@ -5,6 +5,8 @@
 
 // components
 
+export * from './components/Accordion'
+export * from './components/AccordionItemGroup'
 export * from './components/Admonition'
 export * from './components/Avatar'
 export * from './components/Button'

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Tooltip.tsx"],"sourcesContent":["import {\n  Tooltip as ArkTooltip,\n  type TooltipContentProps,\n} from '@ark-ui/react/tooltip'\nimport { cx } from '@cerberus/styled-system/css'\nimport { tooltip } from '@cerberus/styled-system/recipes'\nimport type { ReactNode } from 'react'\n\n/**\n * This module contains the Tooltip component.\n * @module Tooltip\n */\n\nexport interface TooltipProps {\n  /**\n   * The text content to display in the tooltip.\n   */\n  content: ReactNode\n  /**\n   * The position of the tooltip relative to the trigger element.\n   */\n  position?: 'top' | 'right' | 'bottom' | 'left'\n}\n\n/**\n * The Tooltip component is used to provide additional information about an element when it is hovered over.\n * @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)\n * @example\n * ```tsx\n * <Tooltip content=\"This is a tooltip\">\n *   <Information />\n * </Tooltip>\n */\nexport function Tooltip(props: TooltipProps & TooltipContentProps) {\n  const { content, children, ...nativeProps } = props\n  const styles = tooltip()\n  const position = {\n    placement: props.position || 'top',\n  }\n\n  return (\n    <ArkTooltip.Root openDelay={400} positioning={position}>\n      <ArkTooltip.Trigger className={styles.trigger}>\n        {children}\n      </ArkTooltip.Trigger>\n\n      <ArkTooltip.Positioner>\n        <ArkTooltip.Content\n          {...nativeProps}\n          className={cx(nativeProps.className, styles.content)}\n        >\n          <ArkTooltip.Arrow className={styles.arrow}>\n            <ArkTooltip.ArrowTip className={styles.arrowTip} />\n          </ArkTooltip.Arrow>\n\n          {content}\n        </ArkTooltip.Content>\n      </ArkTooltip.Positioner>\n    </ArkTooltip.Root>\n  )\n}\n"],"mappings":";AAAA;AAAA,EACE,WAAW;AAAA,OAEN;AACP,SAAS,UAAU;AACnB,SAAS,eAAe;AAqClB,cAKE,YALF;AATC,SAAS,QAAQ,OAA2C;AACjE,QAAM,EAAE,SAAS,UAAU,GAAG,YAAY,IAAI;AAC9C,QAAM,SAAS,QAAQ;AACvB,QAAM,WAAW;AAAA,IACf,WAAW,MAAM,YAAY;AAAA,EAC/B;AAEA,SACE,qBAAC,WAAW,MAAX,EAAgB,WAAW,KAAK,aAAa,UAC5C;AAAA,wBAAC,WAAW,SAAX,EAAmB,WAAW,OAAO,SACnC,UACH;AAAA,IAEA,oBAAC,WAAW,YAAX,EACC;AAAA,MAAC,WAAW;AAAA,MAAX;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,GAAG,YAAY,WAAW,OAAO,OAAO;AAAA,QAEnD;AAAA,8BAAC,WAAW,OAAX,EAAiB,WAAW,OAAO,OAClC,8BAAC,WAAW,UAAX,EAAoB,WAAW,OAAO,UAAU,GACnD;AAAA,UAEC;AAAA;AAAA;AAAA,IACH,GACF;AAAA,KACF;AAEJ;","names":[]}