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

package/build/modern/index.js

@@ -1,3 +1,12 @@
+import {
+  ModalHeader
+} from "./chunk-AUALRL3U.js";
+import {
+  ModalHeading
+} from "./chunk-SWX5JWZR.js";
+import {
+  NavMenuLink
+} from "./chunk-YOTXFCCC.js";
 import {
   NavMenuList,
   getPosition
@@ -13,22 +22,13 @@ import {
 } from "./chunk-DRDNNRU3.js";
 import {
   Label
-} from "./chunk-R7IDIIST.js";
+} from "./chunk-LT62577B.js";
 import {
   Modal
 } from "./chunk-Q3I4H6EC.js";
 import {
   ModalDescription
 } from "./chunk-WECB67DC.js";
-import {
-  ModalHeader
-} from "./chunk-AUALRL3U.js";
-import {
-  ModalHeading
-} from "./chunk-SWX5JWZR.js";
-import {
-  NavMenuLink
-} from "./chunk-YOTXFCCC.js";
 import {
   ThemeProvider,
   useThemeContext
@@ -36,7 +36,7 @@ import {
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-WA3QADO4.js";
+} from "./chunk-EQPYRZ3X.js";
 import {
   NavMenu,
   useNavMenuContext
@@ -48,7 +48,7 @@ import {
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-R662TP4N.js";
+} from "./chunk-XYDJ5TRW.js";
 import {
   Tab,
   TabIndicator,
@@ -105,7 +105,7 @@ import {
 import {
   FileStatus,
   processStatus
-} from "./chunk-Z6EXPMTS.js";
+} from "./chunk-EKZENP7X.js";
 import {
   ProgressBar
 } from "./chunk-WZJ5UQNM.js";
@@ -124,13 +124,15 @@ import {
   MenuSeparator,
   MenuTrigger
 } from "./chunk-RUR5MV54.js";
-import "./chunk-V3M3ZOQI.js";
+import "./chunk-V4YYGGMH.js";
 import {
-  Admonition,
-  AdmonitionDescription,
-  AdmonitionHeading
-} from "./chunk-DXBZ3HMY.js";
-import "./chunk-2HOUQ2DX.js";
+  ToggleParts
+} from "./chunk-2CVGNLIM.js";
+import {
+  ToggleIndicator,
+  ToggleRoot
+} from "./chunk-CIMY2U22.js";
+import "./chunk-V3M3ZOQI.js";
 import {
   CircularProgress
 } from "./chunk-6QHOKCV3.js";
@@ -156,6 +158,23 @@ import {
   DatePickerView,
   DatePickerViewControl
 } from "./chunk-5EWCH7AI.js";
+import "./chunk-OGYMMATX.js";
+import {
+  Radio
+} from "./chunk-STLN7BMJ.js";
+import {
+  RadioParts
+} from "./chunk-FUL2VRDU.js";
+import {
+  RadioGroup,
+  RadioGroupIndicator,
+  RadioGroupItem,
+  RadioGroupItemControl,
+  RadioGroupItemHiddenInput,
+  RadioGroupItemText,
+  RadioGroupLabel,
+  RadioGroupRoot
+} from "./chunk-5RTNSVYU.js";
 import "./chunk-ZOSGUATV.js";
 import {
   Rating
@@ -199,21 +218,50 @@ import {
   SwitchRoot,
   SwitchThumb
 } from "./chunk-LZWNHXRP.js";
-import "./chunk-V4YYGGMH.js";
+import "./chunk-IKDXADLX.js";
 import {
-  ToggleParts
-} from "./chunk-2CVGNLIM.js";
+  CTAModal,
+  useCTAModal
+} from "./chunk-A45TFOGO.js";
+import "./chunk-4LSTU6WU.js";
+import "./chunk-MVO2GNUA.js";
 import {
-  ToggleIndicator,
-  ToggleRoot
-} from "./chunk-CIMY2U22.js";
+  For
+} from "./chunk-DXOKSZVQ.js";
+import {
+  createCTAModalActions
+} from "./chunk-PLHYOCY3.js";
+import "./chunk-DJOYRUNT.js";
+import {
+  DialogCloseIconTrigger
+} from "./chunk-NZKE7C53.js";
+import {
+  Dialog
+} from "./chunk-MH6CIBDU.js";
+import {
+  IconButton
+} from "./chunk-APD6IX5R.js";
+import {
+  DialogParts
+} from "./chunk-FCSO6N2Y.js";
+import {
+  DialogBackdrop,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogDescription,
+  DialogHeading,
+  DialogPositioner,
+  DialogProvider,
+  DialogRoot,
+  DialogTrigger
+} from "./chunk-D7UIWAFO.js";
 import "./chunk-TYPULJMJ.js";
 import {
   Field
-} from "./chunk-3J5D3O6Z.js";
+} from "./chunk-NTU5OYUF.js";
 import {
   FieldParts
-} from "./chunk-32M5JS5F.js";
+} from "./chunk-6I2FW4WI.js";
 import {
   FieldErrorText,
   FieldHelperText,
@@ -224,13 +272,13 @@ import {
   FieldTextarea,
   Input,
   Textarea
-} from "./chunk-VNPLKMEM.js";
-import {
-  FieldStatusIndicator
-} from "./chunk-CNA2VKAH.js";
+} from "./chunk-VSTOSLFS.js";
 import {
   FieldStartIndicator
 } from "./chunk-Z52R6ABJ.js";
+import {
+  FieldStatusIndicator
+} from "./chunk-CNA2VKAH.js";
 import "./chunk-IDTAB2UJ.js";
 import {
   Fieldset
@@ -244,27 +292,35 @@ import {
   FieldsetLegend,
   FieldsetRoot
 } from "./chunk-Z3FDG263.js";
-import "./chunk-OGYMMATX.js";
+import "./chunk-UR2NYAQC.js";
 import {
-  Radio
-} from "./chunk-STLN7BMJ.js";
+  Admonition
+} from "./chunk-572S5CLA.js";
+import "./chunk-TM6TVO2D.js";
 import {
-  RadioParts
-} from "./chunk-FUL2VRDU.js";
+  Avatar
+} from "./chunk-SXLPDPOZ.js";
 import {
-  RadioGroup,
-  RadioGroupIndicator,
-  RadioGroupItem,
-  RadioGroupItemControl,
-  RadioGroupItemHiddenInput,
-  RadioGroupItemText,
-  RadioGroupLabel,
-  RadioGroupRoot
-} from "./chunk-5RTNSVYU.js";
+  AdmonitionParts
+} from "./chunk-RQCJKDXU.js";
+import {
+  AdmonitionContent,
+  AdmonitionDescription,
+  AdmonitionHeading,
+  AdmonitionIndicator,
+  AdmonitionRoot
+} from "./chunk-RKGFPKKK.js";
 import "./chunk-CYC2YUKU.js";
 import {
   ButtonParts
 } from "./chunk-2BIHLH4V.js";
+import {
+  Button,
+  ButtonIcon
+} from "./chunk-6KZVE4HC.js";
+import {
+  Spinner
+} from "./chunk-7SYJFI5E.js";
 import "./chunk-TIJAFPHQ.js";
 import {
   Checkbox
@@ -287,33 +343,13 @@ import {
 import "./chunk-ML2IKLMJ.js";
 import {
   Combobox
-} from "./chunk-J7SAFAW3.js";
+} from "./chunk-EKIAT7N7.js";
 import {
   ComboItemGroup
 } from "./chunk-FZ53535Q.js";
 import {
   ComboItemWithIndicator
 } from "./chunk-XBUXVNTY.js";
-import {
-  ComboboxParts
-} from "./chunk-HIC7Z23X.js";
-import {
-  ComboItemText,
-  ComboboxClearTrigger,
-  ComboboxContent,
-  ComboboxControl,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxItemGroup,
-  ComboboxItemGroupLabel,
-  ComboboxItemIndicator,
-  ComboboxItemText,
-  ComboboxLabel,
-  ComboboxPositioner,
-  ComboboxRoot,
-  ComboboxStartIcon,
-  ComboboxTrigger
-} from "./chunk-NR5XDIJ7.js";
 import {
   useStatefulCollection
 } from "./chunk-MR4DX76C.js";
@@ -335,56 +371,29 @@ import {
   SelectValueText,
   createSelectCollection
 } from "./chunk-QCBLRACK.js";
-import "./chunk-IKDXADLX.js";
-import {
-  CTAModal,
-  useCTAModal
-} from "./chunk-3B4SFTQB.js";
-import "./chunk-4LSTU6WU.js";
-import "./chunk-MVO2GNUA.js";
-import {
-  For
-} from "./chunk-DXOKSZVQ.js";
-import {
-  Avatar
-} from "./chunk-SXLPDPOZ.js";
-import {
-  createCTAModalActions
-} from "./chunk-PLHYOCY3.js";
-import "./chunk-DJOYRUNT.js";
-import {
-  DialogCloseIconTrigger
-} from "./chunk-NZKE7C53.js";
-import {
-  Dialog
-} from "./chunk-MH6CIBDU.js";
-import {
-  IconButton
-} from "./chunk-APD6IX5R.js";
-import {
-  DialogParts
-} from "./chunk-FCSO6N2Y.js";
-import {
-  DialogBackdrop,
-  DialogCloseTrigger,
-  DialogContent,
-  DialogDescription,
-  DialogHeading,
-  DialogPositioner,
-  DialogProvider,
-  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 {
+  ComboboxParts
+} from "./chunk-HIC7Z23X.js";
+import {
+  ComboItemText,
+  ComboboxClearTrigger,
+  ComboboxContent,
+  ComboboxControl,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemGroup,
+  ComboboxItemGroupLabel,
+  ComboboxItemIndicator,
+  ComboboxItemText,
+  ComboboxLabel,
+  ComboboxPositioner,
+  ComboboxRoot,
+  ComboboxStartIcon,
+  ComboboxTrigger
+} from "./chunk-NR5XDIJ7.js";
 import {
   useModal
 } from "./chunk-KGQG5JGW.js";
@@ -466,8 +475,12 @@ export {
   AccordionParts,
   AccordionRoot,
   Admonition,
+  AdmonitionContent,
   AdmonitionDescription,
   AdmonitionHeading,
+  AdmonitionIndicator,
+  AdmonitionParts,
+  AdmonitionRoot,
   Avatar,
   Button,
   ButtonIcon,

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/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":[]}
+{"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/admonition/index'\nexport * from './components/accordion/index'\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-7f1fa64",
+  "version": "0.16.0-next-d049636",
   "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-7f1fa64"
+    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.16.0-next-d049636"
   },
   "publishConfig": {
     "access": "public"

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,84 @@
+'use client'
+
+import type { AdmonitionVariantProps } from '@cerberus/styled-system/recipes'
+import { useCerberusContext } from '../../context/cerberus'
+import { Avatar } from '../Avatar'
+import { useRef, type ReactNode } from 'react'
+
+/**
+ * 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"
+        ariaLabel=""
+        icon={<InfoIcon />}
+        size="sm"
+        src=""
+      />
+    ),
+    info: (
+      <Avatar
+        gradient="amphiaraus-dark"
+        ariaLabel=""
+        icon={<InfoIcon />}
+        size="sm"
+        src=""
+      />
+    ),
+    success: (
+      <Avatar
+        gradient="thanatos-dark"
+        ariaLabel=""
+        icon={<SuccessIcon />}
+        size="sm"
+        src=""
+      />
+    ),
+    warning: (
+      <Avatar
+        gradient="asphodel-light"
+        ariaLabel=""
+        icon={<WarningIcon />}
+        size="sm"
+        src=""
+      />
+    ),
+    danger: (
+      <Avatar
+        gradient="hades-light"
+        ariaLabel=""
+        icon={<DangerIcon />}
+        size="sm"
+        src=""
+      />
+    ),
+  })
+
+  return <>{elRef.current[palette]}</>
+}

package/src/components/admonition/parts.ts

@@ -0,0 +1,53 @@
+import type { ElementType } from 'react'
+import {
+  AdmonitionContent,
+  AdmonitionDescription,
+  AdmonitionHeading,
+  AdmonitionIndicator,
+  AdmonitionRoot,
+} from './primitives'
+
+/**
+ * This module contains the parts of the Admonition component.
+ * @module 'admonition/parts'
+ */
+
+interface AdmonitionPartsValue {
+  /**
+   * The context provider of the Admonition.
+   */
+  Root: ElementType
+  /**
+   * The indicator of the Admonition.
+   */
+  Indicator: ElementType
+  /**
+   * The content of the Admonition.
+   */
+  Content: ElementType
+  /**
+   * The heading of the Admonition.
+   */
+  Heading: ElementType
+  /**
+   * The description of the Admonition.
+   */
+  Description: 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 AdmonitionParts object and
+ * the entire family of components vs. only what you use.
+ */
+export const AdmonitionParts: AdmonitionPartsValue = {
+  Root: AdmonitionRoot,
+  Indicator: AdmonitionIndicator,
+  Content: AdmonitionContent,
+  Heading: AdmonitionHeading,
+  Description: AdmonitionDescription,
+}

package/src/components/admonition/primitives.tsx

@@ -0,0 +1,73 @@
+import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
+import { cx } from '@cerberus/styled-system/css'
+import {
+  admonition,
+  type AdmonitionVariantProps,
+} from '@cerberus/styled-system/recipes'
+
+/**
+ * This module contains the primitives of the Admonition components.
+ * @module 'admonition/primitives'
+ */
+
+/**
+ * The `AdmonitionRoot` component is the container for the Admonition.
+ */
+export function AdmonitionRoot(
+  props: HTMLArkProps<'aside'> & AdmonitionVariantProps,
+) {
+  const { palette, usage, ...nativeProps } = props
+  const styles = admonition({ palette, usage })
+  return (
+    <ark.aside
+      {...nativeProps}
+      className={cx(styles.root, nativeProps.className)}
+      data-scope="admonition"
+      data-part="root"
+    />
+  )
+}
+
+/**
+ * The `AdmonitionIndicator` component is the indicator for the Admonition.
+ */
+export function AdmonitionIndicator(props: HTMLArkProps<'span'>) {
+  return <ark.span {...props} data-scope="admonition" data-part="indicator" />
+}
+
+/**
+ * The `AdmonitionContent` component is the content for the Admonition.
+ */
+export function AdmonitionContent(props: HTMLArkProps<'div'>) {
+  return <ark.div {...props} data-scope="admonition" data-part="content" />
+}
+
+/**
+ * The `AdmonitionHeading` component is the heading title for the Admonition.
+ */
+export function AdmonitionHeading(props: HTMLArkProps<'p'>) {
+  const styles = admonition()
+  return (
+    <ark.p
+      {...props}
+      className={cx(styles.heading, props.className)}
+      data-scope="admonition"
+      data-part="heading"
+    />
+  )
+}
+
+/**
+ * The `AdmonitionDescription` component is the description for the Admonition.
+ */
+export function AdmonitionDescription(props: HTMLArkProps<'p'>) {
+  const styles = admonition()
+  return (
+    <ark.p
+      {...props}
+      className={cx(styles.description, props.className)}
+      data-scope="admonition"
+      data-part="description"
+    />
+  )
+}

package/src/index.ts

@@ -21,8 +21,8 @@ export * from './hooks/useToggle'
 
 // components
 
+export * from './components/admonition/index'
 export * from './components/accordion/index'
-export * from './components/Admonition'
 export * from './components/Avatar'
 export * from './components/button/index'
 export * from './components/checkbox/index'