@cerberus-design/react 0.19.1 → 0.19.2

package/build/modern/index.js

@@ -1,22 +1,22 @@
 import "./chunk-LRHHDORZ.js";
 import {
   Theme
-} from "./chunk-YTKY3AHF.js";
+} from "./chunk-MPVUVQCJ.js";
 import "./chunk-V4YYGGMH.js";
 import {
   ToggleParts
-} from "./chunk-YUEVV2DE.js";
+} from "./chunk-L4CKWLXL.js";
 import {
   ToggleIndicator,
   ToggleRoot
-} from "./chunk-D47GTCQZ.js";
+} from "./chunk-WC6SOU2F.js";
 import "./chunk-TLRRDNS3.js";
 import {
   Tooltip
-} from "./chunk-LW62VSVZ.js";
+} from "./chunk-ROWT3E5K.js";
 import {
   TooltipParts
-} from "./chunk-SGFITMUF.js";
+} from "./chunk-IX5QZCM4.js";
 import {
   TooltipArrow,
   TooltipArrowTip,
@@ -24,32 +24,32 @@ import {
   TooltipPositioner,
   TooltipRoot,
   TooltipTrigger
-} from "./chunk-ALJYABJX.js";
+} from "./chunk-7MWSOSOY.js";
 import "./chunk-4HVKAHBX.js";
 import {
   Tabs
-} from "./chunk-BOATN5PB.js";
+} from "./chunk-U2ZT7UDW.js";
 import {
   TabsParts
-} from "./chunk-JSK6OD6J.js";
+} from "./chunk-X34MYQKI.js";
 import {
   TabsContent,
   TabsIndicator,
   TabsList,
   TabsRoot,
   TabsTrigger
-} from "./chunk-SQIB5EOA.js";
+} from "./chunk-UHS2TNFC.js";
 import "./chunk-EZTDGHEX.js";
 import {
   Tag
-} from "./chunk-BK5BIPCG.js";
+} from "./chunk-Y7UXAFII.js";
 import "./chunk-M6WOFFOA.js";
 import {
   TableParts
-} from "./chunk-BW64QBCK.js";
+} from "./chunk-LMEGBPKK.js";
 import {
   Table
-} from "./chunk-M4NNRVTU.js";
+} from "./chunk-KHU3YTLM.js";
 import {
   Caption,
   TableEl,
@@ -61,29 +61,29 @@ import {
   Th,
   Thead,
   Tr
-} from "./chunk-RXAHVNN2.js";
+} from "./chunk-7GVDVLCR.js";
 import "./chunk-UDY6USHW.js";
 import {
   Switch
-} from "./chunk-A57LVJJF.js";
+} from "./chunk-CYK3ZJIX.js";
 import {
   SwitchParts
-} from "./chunk-RDFAC3XX.js";
+} from "./chunk-ETYXG2J2.js";
 import {
   SwitchControl,
   SwitchHiddenInput,
   SwitchLabel,
   SwitchRoot,
   SwitchThumb
-} from "./chunk-AZ5LB6IS.js";
+} from "./chunk-LVA6QLLM.js";
 import "./chunk-CAZ3EICD.js";
 import "./chunk-ZOSGUATV.js";
 import {
   Rating
-} from "./chunk-P6WEDKIB.js";
+} from "./chunk-P3J5P524.js";
 import {
   RatingParts
-} from "./chunk-VZXYGBU6.js";
+} from "./chunk-BT6FMOKM.js";
 import {
   RatingContext,
   RatingControl,
@@ -92,28 +92,28 @@ import {
   RatingItemContext,
   RatingLabel,
   RatingRoot
-} from "./chunk-KLZPY4YX.js";
+} from "./chunk-T3U6K34Y.js";
 import "./chunk-B4GBNIU7.js";
 import {
   Select
-} from "./chunk-THMNM4CZ.js";
+} from "./chunk-UZHBWTSE.js";
 import {
   OptionGroup,
   OptionGroupLabel
-} from "./chunk-2T2S226G.js";
+} from "./chunk-PGINYK2P.js";
 import {
   Option
-} from "./chunk-QOTRCNC7.js";
+} from "./chunk-FL3J7LTC.js";
 import {
   SelectParts
-} from "./chunk-COIQJKC3.js";
+} from "./chunk-A6NEZNGY.js";
 import "./chunk-OGYMMATX.js";
 import {
   Radio
-} from "./chunk-YZFXHGMG.js";
+} from "./chunk-KELIM5A3.js";
 import {
   RadioParts
-} from "./chunk-VXG4AEMZ.js";
+} from "./chunk-7GT7UUCB.js";
 import {
   RadioGroup,
   RadioGroupIndicator,
@@ -123,18 +123,18 @@ import {
   RadioGroupItemText,
   RadioGroupLabel,
   RadioGroupRoot
-} from "./chunk-WO6MF3XM.js";
+} from "./chunk-ZGJDFQN2.js";
 import "./chunk-IOLYX3SY.js";
 import {
   NotificationCenter,
   toaster,
   useNotificationCenter
-} from "./chunk-IOK2RQK6.js";
-import "./chunk-OFACU2SY.js";
+} from "./chunk-CBJ5A5BD.js";
+import "./chunk-VQIBX475.js";
 import "./chunk-JHCKXQEK.js";
 import {
   NotificationParts
-} from "./chunk-OVYHM5DH.js";
+} from "./chunk-KUF4UUC7.js";
 import {
   NotificationActionTrigger,
   NotificationCloseTrigger,
@@ -142,7 +142,7 @@ import {
   NotificationHeading,
   NotificationProvider,
   NotificationRoot
-} from "./chunk-E4DXMJ3C.js";
+} from "./chunk-KF3WIC2Y.js";
 import "./chunk-MV2AU6UV.js";
 import "./chunk-34U4QQ3I.js";
 import "./chunk-X5LBBTCV.js";
@@ -154,7 +154,7 @@ import {
   MenuItemGroup,
   MenuSeparator,
   MenuTrigger
-} from "./chunk-ZO3GSLWZ.js";
+} from "./chunk-PI7MKQ62.js";
 import {
   MenuContentEl,
   MenuIndicator,
@@ -166,35 +166,35 @@ import {
   MenuSeparatorEl,
   MenuTriggerEl,
   MenuTriggerItem
-} from "./chunk-RFANIL5H.js";
+} from "./chunk-RCXKKQQA.js";
 import "./chunk-IDTAB2UJ.js";
 import {
   Fieldset
-} from "./chunk-U6ECBUYN.js";
+} from "./chunk-QV5JHBHO.js";
 import {
   FieldsetParts
-} from "./chunk-YI3P5QG4.js";
+} from "./chunk-6XO2RTIJ.js";
 import {
   FieldsetErrorText,
   FieldsetHelperText,
   FieldsetLegend,
   FieldsetRoot
-} from "./chunk-S7ALRSVU.js";
+} from "./chunk-77QDH2Q5.js";
 import {
   FileStatus,
   processStatus
-} from "./chunk-2Q4KTP6D.js";
+} from "./chunk-NC7AHNAS.js";
 import "./chunk-WJW4FF4J.js";
 import {
   ProgressBar
-} from "./chunk-KYYKBLP2.js";
+} from "./chunk-4ZQUC4DA.js";
 import {
   ProgressBarBar,
   ProgressBarRoot
-} from "./chunk-UXU2CVPI.js";
+} from "./chunk-X6KB5LWU.js";
 import {
   FileUploader
-} from "./chunk-YCVNE3CA.js";
+} from "./chunk-H7N6M7VO.js";
 import "./chunk-JIXUOTH4.js";
 import {
   FeatureFlag
@@ -218,7 +218,7 @@ import {
 } from "./chunk-IIH4VDQA.js";
 import {
   Label
-} from "./chunk-VIUQS3VG.js";
+} from "./chunk-7LNGA4BX.js";
 import {
   Legend
 } from "./chunk-TOXQSWPN.js";
@@ -231,39 +231,39 @@ import {
 } from "./chunk-ADI4DOEW.js";
 import {
   RangePickerInput
-} from "./chunk-RGLJDMIO.js";
+} from "./chunk-X6WOC4RF.js";
 import {
   DatePicker
-} from "./chunk-6TIG456O.js";
+} from "./chunk-NLZGGXMB.js";
 import {
   DatePickerInput
-} from "./chunk-OVDJPTML.js";
-import "./chunk-AJ5TWPXM.js";
+} from "./chunk-RMLBOGDE.js";
+import "./chunk-XB4HMXOQ.js";
 import "./chunk-IKDXADLX.js";
 import {
   CTAModal,
   useCTAModal
-} from "./chunk-ACK44GEO.js";
+} from "./chunk-CKCGLHLS.js";
 import "./chunk-Q4CS3AKY.js";
 import {
   For
 } from "./chunk-D2TQPEZQ.js";
 import "./chunk-4LSTU6WU.js";
-import "./chunk-CIIFJ2SA.js";
+import "./chunk-WK7TUQIS.js";
 import {
   createCTAModalActions
 } from "./chunk-PLHYOCY3.js";
 import {
   DatePickerCalendar
-} from "./chunk-NPZJTTTS.js";
-import "./chunk-6BNGJMNL.js";
-import "./chunk-NH2RSI7N.js";
-import "./chunk-2MU6WE52.js";
-import "./chunk-KSYZMMXN.js";
-import "./chunk-A655GBYQ.js";
+} from "./chunk-2VVJATIW.js";
+import "./chunk-EMLKVTGD.js";
+import "./chunk-5UZUXCMO.js";
+import "./chunk-VB7T2YYD.js";
+import "./chunk-CI7JYXUR.js";
+import "./chunk-GBV7MIBU.js";
 import {
   DatePickerParts
-} from "./chunk-BWZXR2WZ.js";
+} from "./chunk-HUKQPIDV.js";
 import {
   DatePickerClearTrigger,
   DatePickerContent,
@@ -289,11 +289,11 @@ import {
   DatePickerViewControl,
   DatePickerViewTrigger,
   DatePickerYearSelect
-} from "./chunk-ZPMGW4U7.js";
+} from "./chunk-2UD72VLC.js";
 import "./chunk-5IMS6G4G.js";
 import {
   CircularProgress
-} from "./chunk-HJ67FKQ6.js";
+} from "./chunk-6KGRHE3J.js";
 import {
   CircularProgressCircle,
   CircularProgressCircleRange,
@@ -302,11 +302,11 @@ import {
   CircularProgressLabel,
   CircularProgressRoot,
   CircularProgressValueText
-} from "./chunk-QM4DC6QF.js";
+} from "./chunk-ZUC3X6GQ.js";
 import "./chunk-ML2IKLMJ.js";
 import {
   useStatefulCollection
-} from "./chunk-L2G4XKLT.js";
+} from "./chunk-BGJIAA5F.js";
 import {
   SelectClearTrigger,
   SelectContent,
@@ -324,19 +324,19 @@ import {
   SelectTrigger,
   SelectValueText,
   createSelectCollection
-} from "./chunk-MG2YW4IP.js";
+} from "./chunk-Q6FTLT7K.js";
 import {
   Combobox
-} from "./chunk-UKAVYSJ5.js";
+} from "./chunk-BS4V2YJV.js";
 import {
   ComboItemGroup
-} from "./chunk-5XU3LUPC.js";
+} from "./chunk-H6ZGH4VM.js";
 import {
   ComboItemWithIndicator
-} from "./chunk-N2DZNGUS.js";
+} from "./chunk-27RTYRM7.js";
 import {
   ComboboxParts
-} from "./chunk-MXW63O5N.js";
+} from "./chunk-OG74JDYL.js";
 import {
   ComboItemText,
   ComboboxClearTrigger,
@@ -353,19 +353,19 @@ import {
   ComboboxRoot,
   ComboboxStartIcon,
   ComboboxTrigger
-} from "./chunk-ZZSHEW4N.js";
+} from "./chunk-ZFEGJR5E.js";
 import "./chunk-CYC2YUKU.js";
 import {
   ButtonParts
-} from "./chunk-IU5YJTKN.js";
+} from "./chunk-6P2JY52I.js";
 import "./chunk-TIJAFPHQ.js";
 import {
   Checkbox
-} from "./chunk-7WX2RQT6.js";
-import "./chunk-GIIPOOSM.js";
+} from "./chunk-YMFUEQ2A.js";
+import "./chunk-TJXWSSHO.js";
 import {
   CheckboxParts
-} from "./chunk-J3XTP6VP.js";
+} from "./chunk-5W6HMI2G.js";
 import {
   CheckboxControl,
   CheckboxGroup,
@@ -373,7 +373,7 @@ import {
   CheckboxIndicator,
   CheckboxLabel,
   CheckboxRoot
-} from "./chunk-CMQZN2GZ.js";
+} from "./chunk-Q3NDU44T.js";
 import {
   useAvatarContext
 } from "./chunk-DC4F5ZK5.js";
@@ -381,33 +381,33 @@ import "./chunk-R2V75WU6.js";
 import {
   Accordion,
   AccordionItemGroup
-} from "./chunk-GHM4I5BN.js";
-import "./chunk-UHXKG2ZP.js";
+} from "./chunk-BFE2SHZO.js";
+import "./chunk-JBAE2B2H.js";
 import {
   AccordionParts
-} from "./chunk-3Z4TSR6V.js";
+} from "./chunk-S7HDNFJJ.js";
 import {
   AccordionItem,
   AccordionItemContent,
   AccordionItemIndicator,
   AccordionItemTrigger,
   AccordionRoot
-} from "./chunk-BDXVYV32.js";
+} from "./chunk-6KIXF4ES.js";
 import "./chunk-UR2NYAQC.js";
 import {
   Admonition
-} from "./chunk-Y67NIX2N.js";
-import "./chunk-KM3G4YFF.js";
+} from "./chunk-W7WPVM34.js";
+import "./chunk-YAZIBTA2.js";
 import {
   AdmonitionParts
-} from "./chunk-4Q62OI72.js";
+} from "./chunk-AHYFFHUW.js";
 import {
   AdmonitionContent,
   AdmonitionDescription,
   AdmonitionHeading,
   AdmonitionIndicator,
   AdmonitionRoot
-} from "./chunk-2OWVBM5W.js";
+} from "./chunk-BGZTC53N.js";
 import {
   useRootColors
 } from "./chunk-TTWDHJ3J.js";
@@ -417,7 +417,7 @@ import {
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-2UFNNWLA.js";
+} from "./chunk-HJYVIRNA.js";
 import {
   FeatureFlags,
   useFeatureFlags
@@ -429,15 +429,15 @@ import {
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-4DJ6KC4K.js";
+} from "./chunk-46QXBKGK.js";
 import "./chunk-TYPULJMJ.js";
 import {
   Field
-} from "./chunk-4WSCG2CM.js";
-import "./chunk-PQ5DEKSH.js";
+} from "./chunk-262PENBL.js";
+import "./chunk-J37VR33H.js";
 import {
   FieldParts
-} from "./chunk-CLGDJ4GM.js";
+} from "./chunk-XMFTL6KG.js";
 import "./chunk-NZP3XQNQ.js";
 import {
   Text
@@ -445,13 +445,13 @@ import {
 import "./chunk-DJOYRUNT.js";
 import {
   DialogCloseIconTrigger
-} from "./chunk-LRIYLZSL.js";
+} from "./chunk-IWJCQ4BM.js";
 import {
   Dialog
-} from "./chunk-YQNOAJM7.js";
+} from "./chunk-XZ2FNMMC.js";
 import {
   DialogParts
-} from "./chunk-FMNYWD5T.js";
+} from "./chunk-RKKI3J6R.js";
 import {
   DialogBackdrop,
   DialogCloseTrigger,
@@ -462,14 +462,14 @@ import {
   DialogProvider,
   DialogRoot,
   DialogTrigger
-} from "./chunk-HPWLIE64.js";
+} from "./chunk-KDIDKP2L.js";
 import "./chunk-3RPBRD5W.js";
 import {
   IconButton
-} from "./chunk-YVYOOJ3X.js";
+} from "./chunk-ADOFKGU3.js";
 import {
   IconButtonRoot
-} from "./chunk-WKAI4OK3.js";
+} from "./chunk-FIVEPZ5F.js";
 import "./chunk-PAQ6YQ7Y.js";
 import {
   Portal
@@ -477,23 +477,23 @@ import {
 import {
   Button,
   ButtonIcon
-} from "./chunk-TF2DXEUF.js";
+} from "./chunk-TIKG6U4Y.js";
 import "./chunk-XDMGFB6Q.js";
 import {
   Spinner
 } from "./chunk-QUOJS5LL.js";
-import "./chunk-DC3NTCCW.js";
+import "./chunk-QHPJ2C76.js";
 import {
   Avatar
-} from "./chunk-OMM4CPZU.js";
+} from "./chunk-ABMK5P66.js";
 import {
   AvatarParts
-} from "./chunk-WGSUBJNI.js";
+} from "./chunk-LNDQW46A.js";
 import {
   AvatarFallback,
   AvatarImage,
   AvatarRoot
-} from "./chunk-SFAJKI45.js";
+} from "./chunk-OSUFAZAK.js";
 import "./chunk-RMEVOJ2E.js";
 import {
   Show
@@ -509,20 +509,20 @@ import {
   FieldTextarea,
   Input,
   Textarea
-} from "./chunk-JG5V3AK4.js";
+} from "./chunk-GLH23RDO.js";
 import {
   FieldStartIndicator
 } from "./chunk-EMDNETC7.js";
 import {
   FieldStatusIndicator
-} from "./chunk-VIKVLJGG.js";
+} from "./chunk-LCURHO24.js";
 import "./chunk-QTV75ATT.js";
 import {
   cerberus,
   createCerberusPrimitive
-} from "./chunk-ZGPHSKEB.js";
-import "./chunk-UCP3GQOJ.js";
-import "./chunk-GZ6T3352.js";
+} from "./chunk-5WT5BM3V.js";
+import "./chunk-2SBNSYYC.js";
+import "./chunk-33OXE7IJ.js";
 import "./chunk-VT6DJ2VM.js";
 import {
   formatNotifyCount,

package/build/modern/system/factory.js

@@ -1,7 +1,7 @@
 import {
   cerberusFactoryProxy
-} from "../chunk-UCP3GQOJ.js";
-import "../chunk-GZ6T3352.js";
+} from "../chunk-2SBNSYYC.js";
+import "../chunk-33OXE7IJ.js";
 export {
   cerberusFactoryProxy
 };

package/build/modern/system/index.js

@@ -1,9 +1,9 @@
 import {
   cerberus,
   createCerberusPrimitive
-} from "../chunk-ZGPHSKEB.js";
-import "../chunk-UCP3GQOJ.js";
-import "../chunk-GZ6T3352.js";
+} from "../chunk-5WT5BM3V.js";
+import "../chunk-2SBNSYYC.js";
+import "../chunk-33OXE7IJ.js";
 import "../chunk-VT6DJ2VM.js";
 export {
   cerberus,

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

@@ -1,6 +1,6 @@
 import {
   CerberusPrimitive
-} from "../chunk-GZ6T3352.js";
+} from "../chunk-33OXE7IJ.js";
 export {
   CerberusPrimitive
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.19.1",
+  "version": "0.19.2",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -25,8 +25,8 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tsup": "^8.4.0",
-    "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/panda-preset": "0.19.1"
+    "@cerberus-design/panda-preset": "0.19.2",
+    "@cerberus-design/configs": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/field/status-indicator.tsx

@@ -26,12 +26,15 @@ export interface FieldStatusIndicatorProps
  */
 export function FieldStatusIndicator(props: FieldStatusIndicatorProps) {
   const { fallback, ...nativeProps } = props
-  const styles = field()
+
   const fieldContext = useFieldContext()
+  const styles = field()
 
   const { icons } = useCerberusContext()
   const { invalid: InvalidIcon } = icons
 
+  if (!fieldContext) return null
+
   if (fieldContext.invalid) {
     return (
       <span

package/src/components/file-upload/file-status.tsx

@@ -271,7 +271,7 @@ function getModalIconPalette(status: FileStatusKey) {
     case processStatus.ERROR:
       return 'hades-dark'
     case processStatus.DONE:
-      return 'thanatos-light'
+      return 'thanatos-dark'
     default:
       return 'charon-light'
   }

package/src/system/primitive-factory.tsx

@@ -89,9 +89,14 @@ export class CerberusPrimitive {
     this.validateComponent(Component)
 
     const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {
-      const { css: customCss, className, ...nativeProps } = internalProps
-
-      const [variantOptions] = recipe.splitVariantProps(nativeProps)
+      const {
+        css: customCss,
+        className,
+        ...restOfInternalProps
+      } = internalProps
+
+      const [variantOptions, nativeProps] =
+        recipe.splitVariantProps(restOfInternalProps)
       const recipeStyles = recipe(variantOptions)
 
       return (
@@ -130,9 +135,14 @@ export class CerberusPrimitive {
     this.validateComponent(Component)
 
     const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {
-      const { css: customCss, className, ...nativeProps } = internalProps
-
-      const [variantOptions] = recipe.splitVariantProps(nativeProps)
+      const {
+        css: customCss,
+        className,
+        ...restOfInternalProps
+      } = internalProps
+
+      const [variantOptions, nativeProps] =
+        recipe.splitVariantProps(restOfInternalProps)
       const styles = recipe(variantOptions)
       const slotStyles = styles[slot as keyof typeof styles]
 

package/src/types.ts

@@ -15,6 +15,16 @@ export interface WithCss {
    * In most cases, you should use the `css` prop instead.
    */
   style?: CSSProperties | Record<string, number | string>
+  /**
+   * If true, the component will render as a child as the provided element
+   * passing all the given props to the child.
+   */
+  asChild?: boolean
+  /**
+   * The class name to apply to the component.
+   * Can be a single class name or an array of class names.
+   */
+  className?: string
 }
 
 // types

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/system/primitive-factory.tsx"],"sourcesContent":["import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n  type ComponentType,\n  type HTMLAttributes,\n  type PropsWithChildren,\n} from 'react'\nimport type { WithCss } from '../types'\nimport type {\n  CerberusPrimitiveEl,\n  CerberusPrimitiveRecipe,\n  CerberusRecipe,\n  CerberusSlotRecipe,\n  WithRecipeOptions,\n} from './types'\n\n/**\n * This module contains a factory for creating Cerberus primitives.\n * @module @cerberus/core/system/factory\n */\n\nexport class CerberusPrimitive {\n  recipe: CerberusPrimitiveRecipe | null\n\n  constructor(recipe?: CerberusPrimitiveRecipe) {\n    this.recipe = recipe ?? null\n  }\n\n  private hasStyles(styles: string | undefined): Record<string, unknown> {\n    if (styles) {\n      return {\n        className: styles,\n      }\n    }\n    return {}\n  }\n\n  private validateComponent<P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n  ) {\n    if (typeof Component !== 'function' && typeof Component !== 'object') {\n      throw new Error('Expected a React component as the first argument.')\n    }\n  }\n\n  /**\n   * Creates a Cerberus component with bare features and no recipe.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @returns A new React component that applies Cerberus features to the\n   * original component.\n   * @example\n   * ```typescript\n   * const { withNoRecipe } = createCerberusPrimitive(button)\n   * const Button = withNoRecipe(RawButton)\n   * ```\n   */\n  withNoRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P> => {\n    const { defaultProps } = options || {}\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (props: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = props\n      const styles = this.hasStyles(cx(className, css(customCss)))\n      return <Component {...defaultProps} {...styles} {...(nativeProps as P)} />\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with the given recipe.\n   * @param Component - The React component to enhance with the recipe.\n   * @param options - Options for the recipe.\n   * @returns A new React component that applies the recipe to the original\n   * component.\n   */\n  withRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    options?: WithRecipeOptions,\n  ): CerberusPrimitiveEl<P & WithRecipeOptions['defaultProps']> => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusRecipe\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const recipeStyles = recipe(variantOptions)\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, recipeStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n\n  /**\n   * Creates a Cerberus component with a slot recipe applied.\n   * @param Component - The React component to enhance with Cerberus features.\n   * @param recipe - The slot recipe to apply to the component.\n   * @returns A new React component that applies Cerberus features and the\n   * specified slot recipe to the original component.\n   * @example\n   * ```typescript\n   * const { withSlotRecipe } = createCerberusPrimitive(field)\n   * const Field = withSlotRecipe(RawField, field)\n   * ```\n   */\n  withSlotRecipe = <P extends HTMLAttributes<unknown>>(\n    Component: ComponentType<P>,\n    slot: keyof RecipeVariantRecord,\n    options?: WithRecipeOptions,\n  ) => {\n    const { defaultProps } = options || {}\n    const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n    this.validateComponent(Component)\n\n    const CerbComponent = (internalProps: PropsWithChildren<P> & WithCss) => {\n      const { css: customCss, className, ...nativeProps } = internalProps\n\n      const [variantOptions] = recipe.splitVariantProps(nativeProps)\n      const styles = recipe(variantOptions)\n      const slotStyles = styles[slot as keyof typeof styles]\n\n      return (\n        <Component\n          {...defaultProps}\n          {...(nativeProps as P)}\n          className={cx(className, slotStyles, css(customCss))}\n        />\n      )\n    }\n\n    CerbComponent.displayName = Component.displayName || Component.name\n    return CerbComponent\n  }\n}\n"],"mappings":";AAAA,SAAS,KAAK,UAAU;AAmEX;AA9CN,IAAM,oBAAN,MAAwB;AAAA,EAC7B;AAAA,EAEA,YAAY,QAAkC;AAC5C,SAAK,SAAS,UAAU;AAAA,EAC1B;AAAA,EAEQ,UAAU,QAAqD;AACrE,QAAI,QAAQ;AACV,aAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,IACF;AACA,WAAO,CAAC;AAAA,EACV;AAAA,EAEQ,kBACN,WACA;AACA,QAAI,OAAO,cAAc,cAAc,OAAO,cAAc,UAAU;AACpE,YAAM,IAAI,MAAM,mDAAmD;AAAA,IACrE;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,eAAe,CACb,WACA,YAC2B;AAC3B,UAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AAErC,SAAK,kBAAkB,SAAS;AAEhC,UAAM,gBAAgB,CAAC,UAA0C;AAC/D,YAAM,EAAE,KAAK,WAAW,WAAW,GAAG,YAAY,IAAI;AACtD,YAAM,SAAS,KAAK,UAAU,GAAG,WAAW,IAAI,SAAS,CAAC,CAAC;AAC3D,aAAO,oBAAC,aAAW,GAAG,cAAe,GAAG,QAAS,GAAI,aAAmB;AAAA,IAC1E;AAEA,kBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,aAAa,CACX,WACA,YAC+D;AAC/D,UAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AACrC,UAAM,SAAS,KAAK;AAEpB,SAAK,kBAAkB,SAAS;AAEhC,UAAM,gBAAgB,CAAC,kBAAkD;AACvE,YAAM,EAAE,KAAK,WAAW,WAAW,GAAG,YAAY,IAAI;AAEtD,YAAM,CAAC,cAAc,IAAI,OAAO,kBAAkB,WAAW;AAC7D,YAAM,eAAe,OAAO,cAAc;AAE1C,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAI;AAAA,UACL,WAAW,GAAG,WAAW,cAAc,IAAI,SAAS,CAAC;AAAA;AAAA,MACvD;AAAA,IAEJ;AAEA,kBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcA,iBAAiB,CACf,WACA,MACA,YACG;AACH,UAAM,EAAE,aAAa,IAAI,WAAW,CAAC;AACrC,UAAM,SAAS,KAAK;AAEpB,SAAK,kBAAkB,SAAS;AAEhC,UAAM,gBAAgB,CAAC,kBAAkD;AACvE,YAAM,EAAE,KAAK,WAAW,WAAW,GAAG,YAAY,IAAI;AAEtD,YAAM,CAAC,cAAc,IAAI,OAAO,kBAAkB,WAAW;AAC7D,YAAM,SAAS,OAAO,cAAc;AACpC,YAAM,aAAa,OAAO,IAA2B;AAErD,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAI;AAAA,UACL,WAAW,GAAG,WAAW,YAAY,IAAI,SAAS,CAAC;AAAA;AAAA,MACrD;AAAA,IAEJ;AAEA,kBAAc,cAAc,UAAU,eAAe,UAAU;AAC/D,WAAO;AAAA,EACT;AACF;","names":[]}