@cerberus-design/react 0.18.3 → 0.19.0

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/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\nexport * from './components/deprecated/Legend'\nexport * from './hooks/useDate'\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/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/navMenu'\nexport * from './context/prompt-modal'\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFA,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/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\nexport * from './components/deprecated/Legend'\nexport * from './hooks/useDate'\nexport * from './hooks/useToggle'\nexport * from './components/Droppable'\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/circular-progress/index'\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/feature-flag/index'\nexport * from './components/field/index'\nexport * from './components/fieldset/index'\nexport * from './components/file-upload/index'\nexport * from './components/for/index'\nexport * from './components/icon-button/index'\nexport * from './components/menu/index'\nexport * from './components/notifications/index'\nexport * from './components/portal/index'\nexport * from './components/progress/index'\nexport * from './components/radio/index'\nexport * from './components/rating/index'\nexport * from './components/select/index'\nexport * from './components/show/index'\nexport * from './components/spinner/index'\nexport * from './components/switch/index'\nexport * from './components/table/index'\nexport * from './components/tabs/index'\nexport * from './components/tag/index'\nexport * from './components/text/index'\nexport * from './components/theme/index'\nexport * from './components/toggle/index'\nexport * from './components/tooltip/index'\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/prompt-modal'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\nexport * from './hooks/useRootColors'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\nexport * from './system/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,cAAc;","names":[]}

package/build/modern/system/factory.d.ts

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

package/build/modern/system/factory.js

@@ -0,0 +1,9 @@
+import {
+  cerberusFactoryProxy
+} from "../chunk-WC5DERNW.js";
+import "../chunk-GZ6T3352.js";
+import "../chunk-VT6DJ2VM.js";
+export {
+  cerberusFactoryProxy
+};
+//# sourceMappingURL=factory.js.map

package/build/modern/system/factory.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

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

@@ -0,0 +1,12 @@
+export { createCerberusPrimitive_alias_1 as createCerberusPrimitive } from '../_tsup-dts-rollup.js';
+export { cerberus_alias_1 as cerberus } from '../_tsup-dts-rollup.js';
+export { CerberusRecipe_alias_1 as CerberusRecipe } from '../_tsup-dts-rollup.js';
+export { CerberusSlotRecipe_alias_1 as CerberusSlotRecipe } from '../_tsup-dts-rollup.js';
+export { CerberusPrimitiveRecipe_alias_1 as CerberusPrimitiveRecipe } from '../_tsup-dts-rollup.js';
+export { WithRecipeOptions_alias_1 as WithRecipeOptions } from '../_tsup-dts-rollup.js';
+export { CerberusPrimitiveProps_alias_1 as CerberusPrimitiveProps } from '../_tsup-dts-rollup.js';
+export { CerberusPrimitiveEl_alias_1 as CerberusPrimitiveEl } from '../_tsup-dts-rollup.js';
+export { ArkPropsWithRef_alias_1 as ArkPropsWithRef } from '../_tsup-dts-rollup.js';
+export { CerberusFactoryFn_alias_1 as CerberusFactoryFn } from '../_tsup-dts-rollup.js';
+export { CerberusFactoryObject_alias_1 as CerberusFactoryObject } from '../_tsup-dts-rollup.js';
+export { CerberusFactory_alias_1 as CerberusFactory } from '../_tsup-dts-rollup.js';

package/build/modern/system/index.js

@@ -0,0 +1,11 @@
+import {
+  cerberus,
+  createCerberusPrimitive
+} from "../chunk-WC5DERNW.js";
+import "../chunk-GZ6T3352.js";
+import "../chunk-VT6DJ2VM.js";
+export {
+  cerberus,
+  createCerberusPrimitive
+};
+//# sourceMappingURL=index.js.map

package/build/modern/system/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/system/primitive-factory.d.ts

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

package/build/modern/system/primitive-factory.js

@@ -0,0 +1,7 @@
+import {
+  CerberusPrimitive
+} from "../chunk-GZ6T3352.js";
+export {
+  CerberusPrimitive
+};
+//# sourceMappingURL=primitive-factory.js.map

package/build/modern/system/primitive-factory.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/system/types.d.ts

@@ -0,0 +1,10 @@
+export { CerberusRecipe_alias_2 as CerberusRecipe } from '../_tsup-dts-rollup.js';
+export { CerberusSlotRecipe_alias_2 as CerberusSlotRecipe } from '../_tsup-dts-rollup.js';
+export { CerberusPrimitiveRecipe_alias_2 as CerberusPrimitiveRecipe } from '../_tsup-dts-rollup.js';
+export { WithRecipeOptions_alias_2 as WithRecipeOptions } from '../_tsup-dts-rollup.js';
+export { CerberusPrimitiveProps_alias_2 as CerberusPrimitiveProps } from '../_tsup-dts-rollup.js';
+export { CerberusPrimitiveEl_alias_2 as CerberusPrimitiveEl } from '../_tsup-dts-rollup.js';
+export { ArkPropsWithRef_alias_2 as ArkPropsWithRef } from '../_tsup-dts-rollup.js';
+export { CerberusFactoryFn_alias_2 as CerberusFactoryFn } from '../_tsup-dts-rollup.js';
+export { CerberusFactoryObject_alias_2 as CerberusFactoryObject } from '../_tsup-dts-rollup.js';
+export { CerberusFactory_alias_2 as CerberusFactory } from '../_tsup-dts-rollup.js';

package/build/modern/system/types.js

@@ -0,0 +1,2 @@
+import "../chunk-VT6DJ2VM.js";
+//# sourceMappingURL=types.js.map

package/build/modern/system/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/modern/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.18.3",
+  "version": "0.19.0",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -8,24 +8,25 @@
   "main": "build/legacy/index.cjs",
   "module": "build/modern/index.js",
   "peerDependencies": {
-    "@pandacss/dev": "^0.53.3",
+    "@pandacss/dev": "^0.54.0",
     "react": "*",
     "react-dom": "*"
   },
   "dependencies": {
-    "@ark-ui/react": "^5.5.0",
-    "@dnd-kit/core": "^6.1.0"
+    "@ark-ui/react": "^5.14.1",
+    "@dnd-kit/core": "^6.3.1"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.46.2",
-    "@pandacss/dev": "^0.53.3",
-    "@types/react": "^19.1.0",
+    "@internationalized/date": "^3.8.2",
+    "@microsoft/api-extractor": "^7.52.4",
+    "@pandacss/dev": "^0.54.0",
+    "@types/react": "^19.1.6",
     "@types/react-dom": "^19.0.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tsup": "^8.4.0",
-    "@cerberus-design/panda-preset": "0.18.3",
-    "@cerberus-design/configs": "0.0.0"
+    "@cerberus-design/configs": "0.0.0",
+    "@cerberus-design/panda-preset": "0.19.0"
   },
   "publishConfig": {
     "access": "public"
@@ -65,12 +66,25 @@
         "default": "./build/legacy/index.cjs"
       }
     },
+    "./*": {
+      "import": {
+        "types": "./build/modern/components/*/index.d.ts",
+        "default": "./build/modern/components/*/index.js"
+      },
+      "require": {
+        "types": "./build/legacy/components/*/index.d.cts",
+        "default": "./build/legacy/components/*/index.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "typesVersions": {
     "*": {
       ".": [
         "build/legacy/index.d.cts"
+      ],
+      "./*": [
+        "build/legacy/components/*/index.d.cts"
       ]
     }
   }

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

@@ -4,7 +4,7 @@ import type {
 } from '@ark-ui/react/accordion'
 import { type AccordionVariantProps } from 'styled-system/recipes'
 import { splitProps } from '../../utils/index'
-import { Show } from '../Show'
+import { Show } from '../show/index'
 import { AccordionParts } from './parts'
 import { AccordionChevronItemIndicator } from './item-indicator'
 

package/src/components/accordion/primitives.tsx

@@ -1,38 +1,39 @@
 import {
   Accordion,
-  type AccordionItemContentProps,
-  type AccordionItemIndicatorProps,
-  type AccordionItemProps,
-  type AccordionItemTriggerProps,
-  type AccordionRootProps,
+  type AccordionItemContentProps as ArkAccordionItemContentProps,
+  type AccordionItemIndicatorProps as ArkAccordionItemIndicatorProps,
+  type AccordionItemProps as ArkAccordionItemProps,
+  type AccordionItemTriggerProps as ArkAccordionItemTriggerProps,
+  type AccordionRootProps as ArkAccordionRootProps,
 } from '@ark-ui/react/accordion'
-import { cx } from 'styled-system/css'
 import { accordion, type AccordionVariantProps } from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 
 /**
  * This module contains the primitives of the Accordion component.
  * @module 'accordion/primitives'
  */
 
+const { withSlotRecipe } = createCerberusPrimitive(accordion)
+
+function AccordionRootEl(props: AccordionRootProps) {
+  const { size, ...rootProps } = props
+  return <Accordion.Root {...rootProps} data-size={size} />
+}
+
 /**
  * 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}
-    />
-  )
-}
+export const AccordionRoot = withSlotRecipe(AccordionRootEl, 'root')
+export type AccordionRootProps = CerberusPrimitiveProps<
+  ArkAccordionRootProps & AccordionVariantProps
+>
 
 /**
  * The primitive item component of the Accordion component.
@@ -40,14 +41,13 @@ export function AccordionRoot(
  * 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)} />
-  )
-}
+export const AccordionItem = withSlotRecipe<AccordionItemProps>(
+  Accordion.Item,
+  'item',
+)
+export type AccordionItemProps = CerberusPrimitiveProps<
+  ArkAccordionItemProps & AccordionVariantProps
+>
 
 /**
  * The primitive trigger component of the Accordion component.
@@ -55,15 +55,12 @@ export function AccordionItem(
  * 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)}
-    />
-  )
-}
+export const AccordionItemTrigger = withSlotRecipe<AccordionItemTriggerProps>(
+  Accordion.ItemTrigger,
+  'itemTrigger',
+)
+export type AccordionItemTriggerProps =
+  CerberusPrimitiveProps<ArkAccordionItemTriggerProps>
 
 /**
  * The primitive item indicator component of the Accordion component.
@@ -71,15 +68,13 @@ export function AccordionItemTrigger(props: AccordionItemTriggerProps) {
  * 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)}
-    />
+export const AccordionItemIndicator =
+  withSlotRecipe<AccordionItemIndicatorProps>(
+    Accordion.ItemIndicator,
+    'itemIndicator',
   )
-}
+export type AccordionItemIndicatorProps =
+  CerberusPrimitiveProps<ArkAccordionItemIndicatorProps>
 
 /**
  * The primitive content component of the Accordion component.
@@ -87,12 +82,9 @@ export function AccordionItemIndicator(props: AccordionItemIndicatorProps) {
  * 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)}
-    />
-  )
-}
+export const AccordionItemContent = withSlotRecipe<AccordionItemContentProps>(
+  Accordion.ItemContent,
+  'itemContent',
+)
+export type AccordionItemContentProps =
+  CerberusPrimitiveProps<ArkAccordionItemContentProps>

package/src/components/admonition/admonition.tsx

@@ -1,9 +1,8 @@
-import type { HTMLArkProps } from '@ark-ui/react/factory'
-import type { AdmonitionVariantProps } from 'styled-system/recipes'
 import type { ReactNode } from 'react'
 import { splitProps } from '../../utils/index'
+import { Show } from '../show/index'
 import { AdmonitionParts } from './parts'
-import { Show } from '../Show'
+import type { AdmonitionRootProps } from './primitives'
 import { MatchAvatar } from './match-avatar'
 
 /**
@@ -11,9 +10,7 @@ import { MatchAvatar } from './match-avatar'
  * @module 'admonition/admonition'
  */
 
-export interface AdmonitionProps
-  extends AdmonitionVariantProps,
-    HTMLArkProps<'aside'> {
+export interface AdmonitionProps extends AdmonitionRootProps {
   /**
    * The heading title for the Admonition.
    */

package/src/components/admonition/primitives.tsx

@@ -1,70 +1,91 @@
 import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
-import { cx } from 'styled-system/css'
 import { admonition, type AdmonitionVariantProps } from 'styled-system/recipes'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 
 /**
  * This module contains the primitives of the Admonition components.
  * @module 'admonition/primitives'
  */
 
+const { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(admonition)
+
 /**
  * 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"
-    />
-  )
-}
+export const AdmonitionRoot = withSlotRecipe<AdmonitionRootProps>(
+  ark.aside,
+  'root',
+  {
+    defaultProps: {
+      'data-scope': 'admonition',
+      'data-part': 'root',
+    },
+  },
+)
+export type AdmonitionRootProps = CerberusPrimitiveProps<
+  HTMLArkProps<'aside'> & AdmonitionVariantProps
+>
 
 /**
  * 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" />
-}
+export const AdmonitionIndicator = withNoRecipe<AdmonitionIndicatorProps>(
+  ark.span,
+  {
+    defaultProps: {
+      'data-scope': 'admonition',
+      'data-part': 'indicator',
+    },
+  },
+)
+export type AdmonitionIndicatorProps = CerberusPrimitiveProps<
+  HTMLArkProps<'span'>
+>
 
 /**
  * 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" />
-}
+export const AdmonitionContent = withNoRecipe<AdmonitionContentProps>(ark.div, {
+  defaultProps: {
+    'data-scope': 'admonition',
+    'data-part': 'content',
+  },
+})
+export type AdmonitionContentProps = CerberusPrimitiveProps<HTMLArkProps<'div'>>
 
 /**
  * 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"
-    />
-  )
-}
+export const AdmonitionHeading = withSlotRecipe<AdmonitionHeadingProps>(
+  ark.p,
+  'heading',
+  {
+    defaultProps: {
+      'data-scope': 'admonition',
+      'data-part': 'heading',
+    },
+  },
+)
+export type AdmonitionHeadingProps = CerberusPrimitiveProps<
+  HTMLArkProps<'p'> & AdmonitionVariantProps
+>
 
 /**
  * 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"
-    />
-  )
-}
+export const AdmonitionDescription = withSlotRecipe<AdmonitionDescriptionProps>(
+  ark.p,
+  'description',
+  {
+    defaultProps: {
+      'data-scope': 'admonition',
+      'data-part': 'description',
+    },
+  },
+)
+export type AdmonitionDescriptionProps = CerberusPrimitiveProps<
+  HTMLArkProps<'p'> & AdmonitionVariantProps
+>

package/src/components/avatar/avatar.tsx

@@ -1,18 +1,16 @@
-import type { AvatarRootProps } from '@ark-ui/react/avatar'
 import type { AvatarVariantProps } from 'styled-system/recipes'
 import type { ReactNode } from 'react'
 import { splitProps } from '../../utils'
-import { Show } from '../Show'
+import { Show } from '../show/index'
 import { AvatarParts } from './parts'
+import type { AvatarRootProps } from './primitives'
 
 /**
  * This module provides an abstraction of the Avatar primitives.
  * @module 'avatar'
  */
 
-export interface AvatarWithoutImage
-  extends AvatarRootProps,
-    AvatarVariantProps {
+export interface AvatarWithoutImage extends AvatarRootProps {
   alt?: never
   src?: never
   fallback?: ReactNode

package/src/components/avatar/primitives.tsx

@@ -1,50 +1,44 @@
 import {
   Avatar,
-  type AvatarFallbackProps,
-  type AvatarImageProps,
-  type AvatarRootProps,
+  type AvatarFallbackProps as ArkAvatarFallbackProps,
+  type AvatarImageProps as ArkAvatarImageProps,
+  type AvatarRootProps as ArkAvatarRootProps,
 } from '@ark-ui/react/avatar'
 import { avatar, type AvatarVariantProps } from 'styled-system/recipes'
-import { cx } from 'styled-system/css'
+import {
+  createCerberusPrimitive,
+  type CerberusPrimitiveProps,
+} from '../../system/index'
 
 /**
  * This module provides the primitive components for the Avatar component.
  * @module 'avatar/primitives'
  */
 
+const { withSlotRecipe } = createCerberusPrimitive(avatar)
+
 /**
  * The root component of the Avatar.
  */
-export function AvatarRoot(props: AvatarRootProps & AvatarVariantProps) {
-  const { gradient, shape, size, ...rootProps } = props
-  const styles = avatar({ gradient, shape, size })
-  return (
-    <Avatar.Root
-      {...rootProps}
-      className={cx(styles.root, rootProps.className)}
-    />
-  )
-}
+export const AvatarRoot = withSlotRecipe<AvatarRootProps>(Avatar.Root, 'root')
+export type AvatarRootProps = CerberusPrimitiveProps<
+  ArkAvatarRootProps & AvatarVariantProps
+>
 
 /**
  * The image component of the Avatar.
  */
-export function AvatarImage(props: AvatarImageProps) {
-  const styles = avatar()
-  return (
-    <Avatar.Image {...props} className={cx(styles.image, props.className)} />
-  )
-}
+export const AvatarImage = withSlotRecipe<ArkAvatarImageProps>(
+  Avatar.Image,
+  'image',
+)
+export type AvatarImageProps = CerberusPrimitiveProps<ArkAvatarImageProps>
 
 /**
  * The fallback component of the Avatar.
  */
-export function AvatarFallback(props: AvatarFallbackProps) {
-  const styles = avatar()
-  return (
-    <Avatar.Fallback
-      {...props}
-      className={cx(styles.fallback, props.className)}
-    />
-  )
-}
+export const AvatarFallback = withSlotRecipe<ArkAvatarFallbackProps>(
+  Avatar.Fallback,
+  'fallback',
+)
+export type AvatarFallbackProps = CerberusPrimitiveProps<ArkAvatarFallbackProps>

package/src/components/button/button.tsx

@@ -1,17 +1,18 @@
 'use client'
 
-import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
+import { type HTMLArkProps } from '@ark-ui/react/factory'
 import {
   type PropsWithChildren,
   createContext,
   useContext,
   useMemo,
 } from 'react'
-import { cx } from 'styled-system/css'
-import { button, type ButtonVariantProps } from 'styled-system/recipes'
+import { type ButtonVariantProps } from 'styled-system/recipes'
 import { Box } from 'styled-system/jsx'
-import { Show } from '../Show'
-import { Spinner } from '../Spinner'
+import type { CerberusPrimitiveProps } from '../../system/types'
+import { Show } from '../show/index'
+import { Spinner } from '../spinner/index'
+import { ButtonRoot } from './primitives'
 
 /**
  * This module contains the Button component.
@@ -26,34 +27,23 @@ const ButtonContext = createContext<ButtonContextValue>({
   pending: false,
 })
 
-export type ButtonProps = HTMLArkProps<'button'> &
-  ButtonVariantProps & {
-    pending?: boolean
-  }
+export type ButtonProps = CerberusPrimitiveProps<
+  HTMLArkProps<'button'> &
+    ButtonVariantProps & {
+      pending?: boolean
+    }
+>
 
 /**
  * A component that allows the user to perform actions
  * @see https://cerberus.digitalu.design/react/button
  */
 export function Button(props: ButtonProps) {
-  const { palette, usage, shape, size, pending = false, ...nativeProps } = props
+  const { pending = false, ...nativeProps } = props
   const value = useMemo(() => ({ pending }), [pending])
-
   return (
     <ButtonContext.Provider value={value}>
-      <ark.button
-        {...nativeProps}
-        disabled={pending || nativeProps.disabled}
-        className={cx(
-          nativeProps.className,
-          button({
-            palette,
-            usage,
-            shape,
-            size,
-          }),
-        )}
-      />
+      <ButtonRoot {...nativeProps} disabled={pending || nativeProps.disabled} />
     </ButtonContext.Provider>
   )
 }