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

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/DatePicker.client'\nexport * from './components/DatePicker.server'\nexport * from './components/Dialog'\nexport * from './components/Dialog.client'\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/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/cta-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 './components/deprecated/Legend'\nexport * from './context/confirm-modal'\nexport * from './context/prompt-modal'\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useToggle'\n\n// components\n\nexport * from './components/admonition/index'\nexport * from './components/accordion/index'\nexport * from './components/avatar/index'\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/date-picker/index'\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/Menu'\nexport * from './components/notifications/index'\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/table/index'\nexport * from './components/tabs/index'\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/feature-flags'\nexport * from './context/navMenu'\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,cAAc;","names":[]}

package/build/modern/types.d.ts

@@ -0,0 +1 @@
+export { Positions_alias_1 as Positions } from './_tsup-dts-rollup.js';

package/build/modern/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { formatNotifyCount_alias_1 as formatNotifyCount } from '../_tsup-dts-rollup.js';
+export { splitProps_alias_1 as splitProps } from '../_tsup-dts-rollup.js';
+export { getLocalStorage_alias_1 as getLocalStorage } from '../_tsup-dts-rollup.js';
+export { setLocalStorage_alias_1 as setLocalStorage } from '../_tsup-dts-rollup.js';

package/build/modern/utils/localStorage.d.ts

@@ -0,0 +1,2 @@
+export { getLocalStorage_alias_2 as getLocalStorage } from '../_tsup-dts-rollup.js';
+export { setLocalStorage_alias_2 as setLocalStorage } from '../_tsup-dts-rollup.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.16.0",
+  "version": "0.17.0-next-e7f9956",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -8,14 +8,12 @@
   "main": "build/legacy/index.cjs",
   "module": "build/modern/index.js",
   "peerDependencies": {
-    "@cerberus/panda-preset": "npm:@jsr/cerberus__panda-preset",
-    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@*",
     "@pandacss/dev": "*",
     "react": "*",
     "react-dom": "*"
   },
   "dependencies": {
-    "@ark-ui/react": "^4.4.0",
+    "@ark-ui/react": "^4.9.2",
     "@dnd-kit/core": "^6.1.0"
   },
   "devDependencies": {
@@ -24,9 +22,9 @@
     "@types/react-dom": "^18",
     "react": "^18",
     "react-dom": "^18",
-    "tsup": "^8.1.0",
+    "tsup": "^8.4.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.16.0"
+    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.17.0-next-e7f9956"
   },
   "publishConfig": {
     "access": "public"

package/src/components/AnimatingUploadIcon.tsx

@@ -55,8 +55,8 @@ export function AnimatingUploadIcon(props: AnimatingUploadIconProps) {
         <svg
           aria-hidden="true"
           xmlns="http://www.w3.org/2000/svg"
-          width="0.8em"
-          height="0.8em"
+          width="1.1em"
+          height="1.1em"
           x="27%"
           y="27%"
           viewBox="0 0 24 24"

package/src/components/FileStatus.tsx

@@ -15,7 +15,7 @@ import { hstack, vstack } from '@cerberus/styled-system/patterns'
 import { useCerberusContext } from '../context/cerberus'
 import { ProgressBar, type ProgressBarProps } from './ProgressBar'
 import { IconButton } from './IconButton'
-import { Avatar } from './Avatar'
+import { Avatar } from './avatar/avatar'
 import { Field, FieldHelperText } from './field/index'
 
 /**
@@ -129,10 +129,8 @@ export function FileStatus(props: FileStatusProps) {
       className={cx(nativeProps.className, styles.root, hstack())}
     >
       <Avatar
-        ariaLabel=""
         gradient={modalIconPalette}
-        icon={<MatchFileStatusIcon size={24} status={status} />}
-        src=""
+        fallback={<MatchFileStatusIcon size={24} status={status} />}
       />
 
       <div

package/src/components/FileUploader.tsx

@@ -6,7 +6,7 @@ import { type InputHTMLAttributes } from 'react'
 import { Show } from './Show'
 import { fileUploader } from '@cerberus/styled-system/recipes'
 import { useCerberusContext } from '../context/cerberus'
-import { Avatar } from './Avatar'
+import { Avatar } from './avatar/avatar'
 
 export interface FileUploaderProps
   extends InputHTMLAttributes<HTMLInputElement> {
@@ -44,13 +44,7 @@ export function FileUploader(props: FileUploaderProps) {
       )}
     >
       <div className={styles.icon}>
-        <Avatar
-          gradient="charon-light"
-          ariaLabel=""
-          icon={<Icon />}
-          size="md"
-          src=""
-        />
+        <Avatar gradient="charon-light" fallback={<Icon />} />
       </div>
 
       <label

package/src/components/IconButton.tsx

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes } from 'react'
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
 import { cx } from '@cerberus/styled-system/css'
 import {
   iconButton,
@@ -10,8 +10,7 @@ import {
  * @module
  */
 
-export interface IconButtonRawProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface IconButtonRawProps extends HTMLArkProps<'button'> {
   /**
    * The aria-label attribute for the icon button.
    */
@@ -26,7 +25,7 @@ export type IconButtonProps = IconButtonRawProps & IconButtonVariantProps
 export function IconButton(props: IconButtonProps): JSX.Element {
   const { ariaLabel, palette, usage, size, ...nativeProps } = props
   return (
-    <button
+    <ark.button
       {...nativeProps}
       aria-label={ariaLabel ?? 'Icon Button'}
       className={cx(

package/src/components/ProgressBar.tsx

@@ -1,16 +1,16 @@
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
 import { cx } from '@cerberus/styled-system/css'
 import {
   progressBar,
   type ProgressBarVariantProps,
 } from '@cerberus/styled-system/recipes'
-import type { HTMLAttributes } from 'react'
 
 /**
  * This module contains the ProgressBar component.
  * @module
  */
 
-export type ProgressBarBaseProps = HTMLAttributes<HTMLDivElement>
+export type ProgressBarBaseProps = HTMLArkProps<'div'>
 export type NonIndeterminateProgressBarProps = {
   /**
    * A unique identifier for the progress bar. Required for accessibility.
@@ -68,7 +68,7 @@ export function ProgressBar(props: ProgressBarProps) {
   }
 
   return (
-    <div
+    <ark.div
       {...nativeProps}
       aria-label={label}
       aria-valuemin={0}
@@ -77,12 +77,12 @@ export function ProgressBar(props: ProgressBarProps) {
       className={cx(nativeProps.className, styles.root)}
       role="progressbar"
     >
-      <div
+      <ark.div
         {...(indeterminate && { 'data-indeterminate': true })}
         data-complete={nowClamped === 100}
         className={styles.bar}
         style={width}
       />
-    </div>
+    </ark.div>
   )
 }

package/src/components/Tag.tsx

@@ -1,25 +1,19 @@
 'use client'
 
-import type {
-  HTMLAttributes,
-  MouseEventHandler,
-  PropsWithChildren,
-} from 'react'
-import { Show } from './Show'
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
+import type { MouseEventHandler, PropsWithChildren } from 'react'
 import { css, cx } from '@cerberus/styled-system/css'
-import {
-  iconButton,
-  tag,
-  type TagVariantProps,
-} from '@cerberus/styled-system/recipes'
+import { tag, type TagVariantProps } from '@cerberus/styled-system/recipes'
 import { useCerberusContext } from '../context/cerberus'
+import { Show } from './Show'
+import { IconButton } from './IconButton'
 
 /**
  * This module contains the tag component.
  * @module
  */
 
-export type StaticTagProps = HTMLAttributes<HTMLSpanElement> &
+export type StaticTagProps = HTMLArkProps<'span'> &
   TagVariantProps & {
     /**
      * The action to be performed when the tag is clicked. Not available when
@@ -28,7 +22,7 @@ export type StaticTagProps = HTMLAttributes<HTMLSpanElement> &
     onClick?: never
   }
 
-export type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
+export type ClickableTagProps = HTMLArkProps<'span'> & {
   /**
    * The gradient to apply to the tag. Not available when the onClick prop is
    * provided.
@@ -67,7 +61,7 @@ export type TagProps = StaticTagProps | ClickableTagProps
  * <Tag>Tag</Tag>
  * ```
  */
-export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
+export function Tag(props: PropsWithChildren<TagProps>) {
   const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props
   const palette = props?.palette ?? 'page'
   const isClosable = Boolean(onClick)
@@ -77,7 +71,7 @@ export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
   const { close: Close } = icons
 
   return (
-    <span
+    <ark.span
       {...nativeProps}
       className={cx(
         nativeProps.className,
@@ -93,19 +87,17 @@ export function Tag(props: PropsWithChildren<TagProps>): JSX.Element {
       {props.children}
 
       <Show when={isClosable}>
-        <button
-          aria-label="Close"
-          className={iconButton({
-            palette: 'action',
-            usage: 'filled',
-            size: 'sm',
-          })}
+        <IconButton
+          ariaLabel="Close"
           onClick={onClick}
+          palette="action"
+          usage="filled"
+          size="sm"
         >
           <Close />
-        </button>
+        </IconButton>
       </Show>
-    </span>
+    </ark.span>
   )
 }
 

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/components/admonition/admonition.tsx

@@ -0,0 +1,65 @@
+import type { HTMLArkProps } from '@ark-ui/react/factory'
+import type { AdmonitionVariantProps } from '@cerberus/styled-system/recipes'
+import type { ReactNode } from 'react'
+import { splitProps } from '../../utils/index'
+import { AdmonitionParts } from './parts'
+import { Show } from '../Show'
+import { MatchAvatar } from './match-avatar'
+
+/**
+ * This module provides an abstraction for the Admonition component.
+ * @module 'admonition/admonition'
+ */
+
+export interface AdmonitionProps
+  extends AdmonitionVariantProps,
+    HTMLArkProps<'aside'> {
+  /**
+   * The heading title for the Admonition.
+   */
+  heading?: string
+  /**
+   * One off replacement for the icon.
+   */
+  icon?: ReactNode
+}
+
+/**
+ * The Admonition component is an abstraction of the primitives which
+ * displays a Admonition with a label.
+ *
+ * @description [Cerberus Docs](https://cerberus.digitalu.design/react/admonition)
+ *
+ * @remarks
+ *
+ * For a customizable Admonition, use the `AdmonitionParts` object to access the
+ * individual primitives of the Admonition component.
+ */
+export function Admonition(props: AdmonitionProps) {
+  const [elProps, styleProps, rootProps] = splitProps(
+    props,
+    ['heading', 'icon', 'children'],
+    ['palette', 'usage'],
+  )
+
+  return (
+    <AdmonitionParts.Root {...styleProps} {...rootProps}>
+      <Show
+        when={Boolean(elProps.icon)}
+        fallback={<MatchAvatar palette={styleProps.palette} />}
+      >
+        <AdmonitionParts.Indicator>{elProps.icon}</AdmonitionParts.Indicator>
+      </Show>
+
+      <AdmonitionParts.Content>
+        <Show when={Boolean(elProps.heading)}>
+          <AdmonitionParts.Heading>{elProps.heading}</AdmonitionParts.Heading>
+        </Show>
+
+        <AdmonitionParts.Description>
+          {elProps.children}
+        </AdmonitionParts.Description>
+      </AdmonitionParts.Content>
+    </AdmonitionParts.Root>
+  )
+}

package/src/components/admonition/index.ts

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

package/src/components/admonition/match-avatar.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import type { AdmonitionVariantProps } from '@cerberus/styled-system/recipes'
+import { useRef, type ReactNode } from 'react'
+import { useCerberusContext } from '../../context/cerberus'
+import { Avatar } from '../avatar/avatar'
+
+/**
+ * This module provides a component for creating the admonition indicator.
+ * @module 'admonition/match-avatar'
+ */
+
+interface AvatarRefProps {
+  page: ReactNode
+  info: ReactNode
+  success: ReactNode
+  warning: ReactNode
+  danger: ReactNode
+}
+
+type MatchAvatarProps = AdmonitionVariantProps
+
+export function MatchAvatar(props: MatchAvatarProps) {
+  const { palette = 'page' } = props
+
+  const { icons } = useCerberusContext()
+  const {
+    infoNotification: InfoIcon,
+    successNotification: SuccessIcon,
+    warningNotification: WarningIcon,
+    dangerNotification: DangerIcon,
+  } = icons
+
+  // cache the el since the result is static and the component is client side
+  const elRef = useRef<AvatarRefProps>({
+    page: <Avatar gradient="charon-light" fallback={<InfoIcon />} size="sm" />,
+    info: (
+      <Avatar gradient="amphiaraus-dark" fallback={<InfoIcon />} size="sm" />
+    ),
+    success: (
+      <Avatar gradient="thanatos-dark" fallback={<SuccessIcon />} size="sm" />
+    ),
+    warning: (
+      <Avatar gradient="asphodel-light" fallback={<WarningIcon />} size="sm" />
+    ),
+    danger: (
+      <Avatar gradient="hades-light" fallback={<DangerIcon />} size="sm" />
+    ),
+  })
+
+  return <>{elRef.current[palette]}</>
+}