@cerberus-design/react 0.18.3 → 0.19.0

package/build/legacy/components/checkbox/checkbox-icon.cjs

@@ -4,6 +4,7 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -17,6 +18,7 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/checkbox/checkbox-icon.tsx
 var checkbox_icon_exports = {};
@@ -37,55 +39,159 @@ function useCerberusContext() {
   return context;
 }
 
+// src/components/show/show.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Show(props) {
+  const { when, children, fallback } = props;
+  if (when) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children });
+  }
+  if (fallback) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: fallback });
+  }
+  return null;
+}
+
 // src/components/checkbox/primitives.tsx
 var import_react2 = require("@ark-ui/react");
-var import_css = require("styled-system/css");
 var import_recipes = require("styled-system/recipes");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function CheckboxRoot(props) {
-  const styles = (0, import_recipes.checkbox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Checkbox.Root, { ...props, className: (0, import_css.cx)(styles.root, props.className) });
-}
-function CheckboxLabel(props) {
-  const { size, ...labelProps } = props;
-  const styles = (0, import_recipes.checkbox)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react2.Checkbox.Label,
-    {
-      ...labelProps,
-      className: (0, import_css.cx)(styles.label, labelProps.className)
-    }
-  );
-}
-function CheckboxControl(props) {
-  const { size, ...controlProps } = props;
-  const styles = (0, import_recipes.checkbox)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react2.Checkbox.Control,
-    {
-      ...controlProps,
-      className: (0, import_css.cx)(styles.control, controlProps.className)
+
+// src/system/primitive-factory.tsx
+var import_css = require("styled-system/css");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CerberusPrimitive = class {
+  constructor(recipe) {
+    __publicField(this, "recipe");
+    /**
+     * Creates a Cerberus component with bare features and no recipe.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @returns A new React component that applies Cerberus features to the
+     * original component.
+     * @example
+     * ```typescript
+     * const { withNoRecipe } = createCerberusPrimitive(button)
+     * const Button = withNoRecipe(RawButton)
+     * ```
+     */
+    __publicField(this, "withNoRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      this.validateComponent(Component);
+      const CerbComponent = (props) => {
+        const { css: customCss, className, ...nativeProps } = props;
+        const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with the given recipe.
+     * @param Component - The React component to enhance with the recipe.
+     * @param options - Options for the recipe.
+     * @returns A new React component that applies the recipe to the original
+     * component.
+     */
+    __publicField(this, "withRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const recipeStyles = recipe(variantOptions);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, recipeStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with a slot recipe applied.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @param recipe - The slot recipe to apply to the component.
+     * @returns A new React component that applies Cerberus features and the
+     * specified slot recipe to the original component.
+     * @example
+     * ```typescript
+     * const { withSlotRecipe } = createCerberusPrimitive(field)
+     * const Field = withSlotRecipe(RawField, field)
+     * ```
+     */
+    __publicField(this, "withSlotRecipe", (Component, slot, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const styles = recipe(variantOptions);
+        const slotStyles = styles[slot];
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, slotStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    this.recipe = recipe ?? null;
+  }
+  hasStyles(styles) {
+    if (styles) {
+      return {
+        className: styles
+      };
     }
-  );
-}
-function CheckboxIndicator(props) {
-  const styles = (0, import_recipes.checkbox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react2.Checkbox.Indicator,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.indicator, props.className)
+    return {};
+  }
+  validateComponent(Component) {
+    if (typeof Component !== "function" && typeof Component !== "object") {
+      throw new Error("Expected a React component as the first argument.");
     }
-  );
-}
-function CheckboxHiddenInput(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Checkbox.HiddenInput, { ...props });
-}
-function CheckboxGroup(props) {
-  const styles = (0, import_recipes.checkbox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Checkbox.Group, { ...props, className: (0, import_css.cx)(styles.group, props.className) });
+  }
+};
+
+// src/system/index.ts
+function createCerberusPrimitive(recipe) {
+  return new CerberusPrimitive(recipe);
 }
 
+// src/components/checkbox/primitives.tsx
+var { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(import_recipes.checkbox);
+var CheckboxRoot = withSlotRecipe(
+  import_react2.Checkbox.Root,
+  "root"
+);
+var CheckboxLabel = withSlotRecipe(
+  import_react2.Checkbox.Label,
+  "label"
+);
+var CheckboxControl = withSlotRecipe(
+  import_react2.Checkbox.Control,
+  "control"
+);
+var CheckboxIndicator = withSlotRecipe(
+  import_react2.Checkbox.Indicator,
+  "indicator"
+);
+var CheckboxHiddenInput = withNoRecipe(
+  import_react2.Checkbox.HiddenInput
+);
+var CheckboxGroup = withSlotRecipe(
+  import_react2.Checkbox.Group,
+  "group"
+);
+
 // src/components/checkbox/parts.ts
 var CheckboxParts = {
   Root: CheckboxRoot,
@@ -96,19 +202,6 @@ var CheckboxParts = {
   Group: CheckboxGroup
 };
 
-// src/components/Show.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function Show(props) {
-  const { when, children, fallback } = props;
-  if (when) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children });
-  }
-  if (fallback) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: fallback });
-  }
-  return null;
-}
-
 // src/components/checkbox/checkbox-icon.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function CheckboxIcon(props) {

package/build/legacy/components/checkbox/checkbox-icon.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/checkbox/checkbox-icon.tsx","../../../../src/context/cerberus.tsx","../../../../src/components/checkbox/primitives.tsx","../../../../src/components/checkbox/parts.ts","../../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { useCerberusContext } from '../../context/cerberus'\nimport { CheckboxParts } from './parts'\nimport { Show } from '../Show'\n\n/**\n * This module contains the Checkbox Icon component.\n * @module\n */\n\ninterface CheckboxIconProps {\n  indeterminate?: boolean\n}\n\n/**\n * Checkbox component\n * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @see https://cerberus.digitalu.design/react/checkbox\n * @example\n * ```tsx\n * <Field>\n *   <Checkbox id=\"legal\" checked={checked.legal} onChange={handleChange} />\n * </Field>\n * ```\n */\nexport function CheckboxIcon(props: CheckboxIconProps) {\n  const { icons } = useCerberusContext()\n  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons\n\n  return (\n    <CheckboxParts.Indicator indeterminate={props.indeterminate}>\n      <Show when={props.indeterminate} fallback={<CheckIcon />}>\n        <IndeterminateIcon />\n      </Show>\n    </CheckboxParts.Indicator>\n  )\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import {\n  Checkbox,\n  type CheckboxControlProps,\n  type CheckboxGroupProps,\n  type CheckboxIndicatorProps,\n  type CheckboxLabelProps,\n  type CheckboxRootProps,\n} from '@ark-ui/react'\nimport { cx } from 'styled-system/css'\nimport { checkbox, type CheckboxVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the Checkbox primitives.\n * @module 'react/checkbox'\n */\n\n/**\n * Checkbox Root component used to provide the context to all other checkbox\n * primitives.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxRoot(props: CheckboxRootProps) {\n  const styles = checkbox()\n  return (\n    <Checkbox.Root {...props} className={cx(styles.root, props.className)} />\n  )\n}\n\n/**\n * Checkbox Label component used to display the label of the checkbox.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxLabel(\n  props: CheckboxLabelProps & CheckboxVariantProps,\n) {\n  const { size, ...labelProps } = props\n  const styles = checkbox({ size })\n  return (\n    <Checkbox.Label\n      {...labelProps}\n      className={cx(styles.label, labelProps.className)}\n    />\n  )\n}\n\n/**\n * Checkbox Control component used to display the control of the checkbox.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxControl(\n  props: CheckboxControlProps & CheckboxVariantProps,\n) {\n  const { size, ...controlProps } = props\n  const styles = checkbox({ size })\n  return (\n    <Checkbox.Control\n      {...controlProps}\n      className={cx(styles.control, controlProps.className)}\n    />\n  )\n}\n\n/**\n * Checkbox Indicator component used to display the indicator of the checkbox.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxIndicator(props: CheckboxIndicatorProps) {\n  const styles = checkbox()\n  return (\n    <Checkbox.Indicator\n      {...props}\n      className={cx(styles.indicator, props.className)}\n    />\n  )\n}\n\n/**\n * Checkbox HiddenInput component used to provide the native checkbox input.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxHiddenInput(props: CheckboxControlProps) {\n  return <Checkbox.HiddenInput {...props} />\n}\n\n/**\n * Checkbox Group is used to group checkboxes together in a consistently styled\n * way.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxGroup(props: CheckboxGroupProps) {\n  const styles = checkbox()\n  return (\n    <Checkbox.Group {...props} className={cx(styles.group, props.className)} />\n  )\n}\n","import type { ElementType } from 'react'\nimport {\n  CheckboxRoot,\n  CheckboxLabel,\n  CheckboxControl,\n  CheckboxIndicator,\n  CheckboxHiddenInput,\n  CheckboxGroup,\n} from './primitives'\n\n/**\n * This module contains the parts of the Field component.\n * @module 'field/parts'\n */\n\ninterface CheckboxPartsValue {\n  /**\n   * The container of the field.\n   */\n  Root: ElementType\n  /**\n   * The label of the field.\n   */\n  Label: ElementType\n  /**\n   * The control of the field.\n   */\n  Control: ElementType\n  /**\n   * The indicator of the field.\n   */\n  Indicator: ElementType\n  /**\n   * The hidden input of the field.\n   */\n  HiddenInput: ElementType\n  /**\n   * The checkbox group component.\n   */\n  Group: ElementType\n}\n\n/**\n * An Object containing the parts of the Checkbox component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the CheckboxParts object and\n * the entire family of components vs. only what you use.\n */\nexport const CheckboxParts: CheckboxPartsValue = {\n  Root: CheckboxRoot,\n  Label: CheckboxLabel,\n  Control: CheckboxControl,\n  Indicator: CheckboxIndicator,\n  HiddenInput: CheckboxHiddenInput,\n  Group: CheckboxGroup,\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAAkE;AAyB9D;AAfJ,IAAM,sBAAkB,4BAA2C,IAAI;AAyBhE,SAAS,qBAAqB;AACnC,QAAM,cAAU,yBAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;AC3CA,IAAAA,gBAOO;AACP,iBAAmB;AACnB,qBAAoD;AAgBhD,IAAAC,sBAAA;AAHG,SAAS,aAAa,OAA0B;AACrD,QAAM,aAAS,yBAAS;AACxB,SACE,6CAAC,uBAAS,MAAT,EAAe,GAAG,OAAO,eAAW,eAAG,OAAO,MAAM,MAAM,SAAS,GAAG;AAE3E;AAOO,SAAS,cACd,OACA;AACA,QAAM,EAAE,MAAM,GAAG,WAAW,IAAI;AAChC,QAAM,aAAS,yBAAS,EAAE,KAAK,CAAC;AAChC,SACE;AAAA,IAAC,uBAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,OAAO,WAAW,SAAS;AAAA;AAAA,EAClD;AAEJ;AAOO,SAAS,gBACd,OACA;AACA,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,aAAS,yBAAS,EAAE,KAAK,CAAC;AAChC,SACE;AAAA,IAAC,uBAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,SAAS,aAAa,SAAS;AAAA;AAAA,EACtD;AAEJ;AAOO,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,aAAS,yBAAS;AACxB,SACE;AAAA,IAAC,uBAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,WAAW,MAAM,SAAS;AAAA;AAAA,EACjD;AAEJ;AAOO,SAAS,oBAAoB,OAA6B;AAC/D,SAAO,6CAAC,uBAAS,aAAT,EAAsB,GAAG,OAAO;AAC1C;AAQO,SAAS,cAAc,OAA2B;AACvD,QAAM,aAAS,yBAAS;AACxB,SACE,6CAAC,uBAAS,OAAT,EAAgB,GAAG,OAAO,eAAW,eAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE7E;;;ACjDO,IAAM,gBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AAAA,EACb,OAAO;AACT;;;AC1BW,IAAAC,sBAAA;AAJJ,SAAS,KAAQ,OAAwC;AAC9D,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AAErC,MAAI,MAAM;AACR,WAAO,6EAAG,UAAS;AAAA,EACrB;AAEA,MAAI,UAAU;AACZ,WAAO,6EAAG,oBAAS;AAAA,EACrB;AAEA,SAAO;AACT;;;AJPiD,IAAAC,sBAAA;AAN1C,SAAS,aAAa,OAA0B;AACrD,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,UAAU,WAAW,eAAe,kBAAkB,IAAI;AAElE,SACE,6CAAC,cAAc,WAAd,EAAwB,eAAe,MAAM,eAC5C,uDAAC,QAAK,MAAM,MAAM,eAAe,UAAU,6CAAC,aAAU,GACpD,uDAAC,qBAAkB,GACrB,GACF;AAEJ;","names":["import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
+{"version":3,"sources":["../../../../src/components/checkbox/checkbox-icon.tsx","../../../../src/context/cerberus.tsx","../../../../src/components/show/show.tsx","../../../../src/components/checkbox/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts","../../../../src/components/checkbox/parts.ts"],"sourcesContent":["'use client'\n\nimport { useCerberusContext } from '../../context/cerberus'\nimport { Show } from '../show/index'\nimport { CheckboxParts } from './parts'\n\n/**\n * This module contains the Checkbox Icon component.\n * @module\n */\n\ninterface CheckboxIconProps {\n  indeterminate?: boolean\n}\n\n/**\n * Checkbox component\n * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @see https://cerberus.digitalu.design/react/checkbox\n * @example\n * ```tsx\n * <Field>\n *   <Checkbox id=\"legal\" checked={checked.legal} onChange={handleChange} />\n * </Field>\n * ```\n */\nexport function CheckboxIcon(props: CheckboxIconProps) {\n  const { icons } = useCerberusContext()\n  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons\n\n  return (\n    <CheckboxParts.Indicator indeterminate={props.indeterminate}>\n      <Show when={props.indeterminate} fallback={<CheckIcon />}>\n        <IndeterminateIcon />\n      </Show>\n    </CheckboxParts.Indicator>\n  )\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This  module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n  config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n  props: PropsWithChildren<CerberusProviderProps>,\n) {\n  return (\n    <CerberusContext.Provider value={props.config}>\n      {props.children}\n    </CerberusContext.Provider>\n  )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n  const context = useContext(CerberusContext)\n  if (!context) {\n    throw new Error('useCerberus must be used within a CerberusProvider')\n  }\n  return context\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n  /**\n   * The condition to render memoized children or the fallback content.\n   */\n  when: T | boolean | null | undefined\n  /**\n   * The children to render when the condition is false.\n   */\n  fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n *   <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n  const { when, children, fallback } = props\n\n  if (when) {\n    return <>{children}</>\n  }\n\n  if (fallback) {\n    return <>{fallback}</>\n  }\n\n  return null\n}\n","import {\n  Checkbox,\n  type CheckboxControlProps as ArkCheckboxControlProps,\n  type CheckboxGroupProps as ArkCheckboxGroupProps,\n  type CheckboxIndicatorProps as ArkCheckboxIndicatorProps,\n  type CheckboxLabelProps as ArkCheckboxLabelProps,\n  type CheckboxRootProps as ArkCheckboxRootProps,\n  type CheckboxHiddenInputProps as ArkCheckboxHiddenInputProps,\n} from '@ark-ui/react'\nimport { checkbox, type CheckboxVariantProps } from 'styled-system/recipes'\nimport {\n  createCerberusPrimitive,\n  type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the Checkbox primitives.\n * @module 'react/checkbox'\n */\n\nconst { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(checkbox)\n\n/**\n * Checkbox Root component used to provide the context to all other checkbox\n * primitives.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\n\n// @ts-expect-error there is a type mismatch here, but it works in practice\nexport const CheckboxRoot = withSlotRecipe<CheckboxRootProps>(\n  Checkbox.Root,\n  'root',\n)\nexport type CheckboxRootProps = CerberusPrimitiveProps<ArkCheckboxRootProps>\n\n/**\n * Checkbox Label component used to display the label of the checkbox.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport const CheckboxLabel = withSlotRecipe<CheckboxLabelProps>(\n  Checkbox.Label,\n  'label',\n)\nexport type CheckboxLabelProps = CerberusPrimitiveProps<\n  ArkCheckboxLabelProps & CheckboxVariantProps\n>\n\n/**\n * Checkbox Control component used to display the control of the checkbox.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport const CheckboxControl = withSlotRecipe<CheckboxControlProps>(\n  Checkbox.Control,\n  'control',\n)\nexport type CheckboxControlProps = CerberusPrimitiveProps<\n  ArkCheckboxControlProps & CheckboxVariantProps\n>\n\n/**\n * Checkbox Indicator component used to display the indicator of the checkbox.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport const CheckboxIndicator = withSlotRecipe<CheckboxIndicatorProps>(\n  Checkbox.Indicator,\n  'indicator',\n)\nexport type CheckboxIndicatorProps =\n  CerberusPrimitiveProps<ArkCheckboxIndicatorProps>\n\n// export function CheckboxIndicator(props: CheckboxIndicatorProps) {\n//   const styles = checkbox()\n//   return (\n//     <Checkbox.Indicator\n//       {...props}\n//       className={cx(styles.indicator, props.className)}\n//     />\n//   )\n// }\n\n/**\n * Checkbox HiddenInput component used to provide the native checkbox input.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport const CheckboxHiddenInput = withNoRecipe<CheckboxHiddenInputProps>(\n  Checkbox.HiddenInput,\n)\nexport type CheckboxHiddenInputProps =\n  CerberusPrimitiveProps<ArkCheckboxHiddenInputProps>\n\n/**\n * Checkbox Group is used to group checkboxes together in a consistently styled\n * way.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport const CheckboxGroup = withSlotRecipe<CheckboxGroupProps>(\n  Checkbox.Group,\n  'group',\n)\nexport type CheckboxGroupProps = CerberusPrimitiveProps<ArkCheckboxGroupProps>\n","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","import { CerberusPrimitive } from './primitive-factory'\nimport type { CerberusFactory, CerberusPrimitiveRecipe } from './types'\nimport { cerberusFactoryProxy } from './factory'\n\n/**\n * This module contains the user interface for creating Cerberus primitives.\n * @module @cerberus/core/system/create-cerb-primitive\n */\n\n/**\n * A factory function that creates a Cerberus primitive instance with the given\n * recipe.\n * @param recipe\n * @returns An object with three methods: `withNoRecipe`, `withRecipe`, and `withSlotRecipe` that\n * apply the recipes and special Cerberus helpers like `css`.\n *\n * @example\n * ```tsx\n * const { withRecipe } = createCerberusPrimitive(myCustomRecipe);\n * export const Button = withRecipe(MyCustomButton)\n * ```\n */\nexport function createCerberusPrimitive<T extends CerberusPrimitiveRecipe>(\n  recipe?: T,\n) {\n  return new CerberusPrimitive(recipe)\n}\n\n/**\n * A utility function to access Cerberus components by their name.\n * @param component - The name of the Cerberus component to access.\n * @returns The Cerberus component corresponding to the provided name.\n * @throws An error if the component name is not valid.\n *\n * @example\n * ```tsx\n * import { cerberus } from '@cerberus/react'\n * const Button = cerberus('button')\n *\n * <Button css={{ color: 'blue' }} asChild>\n *  <Link href=\"/some-page\">Click me</Link>\n * </Button>\n * ```\n */\nexport const cerberus = cerberusFactoryProxy as CerberusFactory\n\nexport * from './types'\n","import type { ElementType } from 'react'\nimport {\n  CheckboxRoot,\n  CheckboxLabel,\n  CheckboxControl,\n  CheckboxIndicator,\n  CheckboxHiddenInput,\n  CheckboxGroup,\n} from './primitives'\n\n/**\n * This module contains the parts of the Field component.\n * @module 'field/parts'\n */\n\ninterface CheckboxPartsValue {\n  /**\n   * The container of the field.\n   */\n  Root: ElementType\n  /**\n   * The label of the field.\n   */\n  Label: ElementType\n  /**\n   * The control of the field.\n   */\n  Control: ElementType\n  /**\n   * The indicator of the field.\n   */\n  Indicator: ElementType\n  /**\n   * The hidden input of the field.\n   */\n  HiddenInput: ElementType\n  /**\n   * The checkbox group component.\n   */\n  Group: ElementType\n}\n\n/**\n * An Object containing the parts of the Checkbox component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the CheckboxParts object and\n * the entire family of components vs. only what you use.\n */\nexport const CheckboxParts: CheckboxPartsValue = {\n  Root: CheckboxRoot,\n  Label: CheckboxLabel,\n  Control: CheckboxControl,\n  Indicator: CheckboxIndicator,\n  HiddenInput: CheckboxHiddenInput,\n  Group: CheckboxGroup,\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime"]}

package/build/legacy/components/checkbox/checkbox.cjs

@@ -3,6 +3,7 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -16,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/checkbox/checkbox.tsx
 var checkbox_exports = {};
@@ -24,7 +26,7 @@ __export(checkbox_exports, {
 });
 module.exports = __toCommonJS(checkbox_exports);
 
-// src/components/Show.tsx
+// src/components/show/show.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function Show(props) {
   const { when, children, fallback } = props;
@@ -37,86 +39,171 @@ function Show(props) {
   return null;
 }
 
-// src/components/Text.tsx
+// src/components/text/text.tsx
 var import_jsx = require("styled-system/jsx");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function Text(props) {
   const { as = "p", ...pandaJSXProps } = props;
-  switch (as) {
-    case "h1":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.H1, { ...pandaJSXProps });
-    case "h2":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.H2, { ...pandaJSXProps });
-    case "h3":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.H3, { ...pandaJSXProps });
-    case "h4":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.H4, { ...pandaJSXProps });
-    case "h5":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.H5, { ...pandaJSXProps });
-    case "h6":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.H6, { ...pandaJSXProps });
-    case "strong":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.Strong, { ...pandaJSXProps });
-    case "em":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.Em, { ...pandaJSXProps });
-    case "small":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.Small, { ...pandaJSXProps });
-    case "span":
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.Span, { ...pandaJSXProps });
-    default:
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.P, { ...pandaJSXProps });
+  const cache = {
+    h1: import_jsx.H1,
+    h2: import_jsx.H2,
+    h3: import_jsx.H3,
+    h4: import_jsx.H4,
+    h5: import_jsx.H5,
+    h6: import_jsx.H6,
+    strong: import_jsx.Strong,
+    em: import_jsx.Em,
+    small: import_jsx.Small,
+    span: import_jsx.Span,
+    p: import_jsx.P
+  };
+  if (as in cache) {
+    const Component = cache[as];
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...pandaJSXProps });
   }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx.P, { ...pandaJSXProps });
 }
 
 // src/components/checkbox/primitives.tsx
 var import_react = require("@ark-ui/react");
-var import_css = require("styled-system/css");
 var import_recipes = require("styled-system/recipes");
+
+// src/system/primitive-factory.tsx
+var import_css = require("styled-system/css");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function CheckboxRoot(props) {
-  const styles = (0, import_recipes.checkbox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react.Checkbox.Root, { ...props, className: (0, import_css.cx)(styles.root, props.className) });
-}
-function CheckboxLabel(props) {
-  const { size, ...labelProps } = props;
-  const styles = (0, import_recipes.checkbox)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react.Checkbox.Label,
-    {
-      ...labelProps,
-      className: (0, import_css.cx)(styles.label, labelProps.className)
-    }
-  );
-}
-function CheckboxControl(props) {
-  const { size, ...controlProps } = props;
-  const styles = (0, import_recipes.checkbox)({ size });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react.Checkbox.Control,
-    {
-      ...controlProps,
-      className: (0, import_css.cx)(styles.control, controlProps.className)
+var CerberusPrimitive = class {
+  constructor(recipe) {
+    __publicField(this, "recipe");
+    /**
+     * Creates a Cerberus component with bare features and no recipe.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @returns A new React component that applies Cerberus features to the
+     * original component.
+     * @example
+     * ```typescript
+     * const { withNoRecipe } = createCerberusPrimitive(button)
+     * const Button = withNoRecipe(RawButton)
+     * ```
+     */
+    __publicField(this, "withNoRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      this.validateComponent(Component);
+      const CerbComponent = (props) => {
+        const { css: customCss, className, ...nativeProps } = props;
+        const styles = this.hasStyles((0, import_css.cx)(className, (0, import_css.css)(customCss)));
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ...defaultProps, ...styles, ...nativeProps });
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with the given recipe.
+     * @param Component - The React component to enhance with the recipe.
+     * @param options - Options for the recipe.
+     * @returns A new React component that applies the recipe to the original
+     * component.
+     */
+    __publicField(this, "withRecipe", (Component, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const recipeStyles = recipe(variantOptions);
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, recipeStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    /**
+     * Creates a Cerberus component with a slot recipe applied.
+     * @param Component - The React component to enhance with Cerberus features.
+     * @param recipe - The slot recipe to apply to the component.
+     * @returns A new React component that applies Cerberus features and the
+     * specified slot recipe to the original component.
+     * @example
+     * ```typescript
+     * const { withSlotRecipe } = createCerberusPrimitive(field)
+     * const Field = withSlotRecipe(RawField, field)
+     * ```
+     */
+    __publicField(this, "withSlotRecipe", (Component, slot, options) => {
+      const { defaultProps } = options || {};
+      const recipe = this.recipe;
+      this.validateComponent(Component);
+      const CerbComponent = (internalProps) => {
+        const { css: customCss, className, ...nativeProps } = internalProps;
+        const [variantOptions] = recipe.splitVariantProps(nativeProps);
+        const styles = recipe(variantOptions);
+        const slotStyles = styles[slot];
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Component,
+          {
+            ...defaultProps,
+            ...nativeProps,
+            className: (0, import_css.cx)(className, slotStyles, (0, import_css.css)(customCss))
+          }
+        );
+      };
+      CerbComponent.displayName = Component.displayName || Component.name;
+      return CerbComponent;
+    });
+    this.recipe = recipe ?? null;
+  }
+  hasStyles(styles) {
+    if (styles) {
+      return {
+        className: styles
+      };
     }
-  );
-}
-function CheckboxIndicator(props) {
-  const styles = (0, import_recipes.checkbox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react.Checkbox.Indicator,
-    {
-      ...props,
-      className: (0, import_css.cx)(styles.indicator, props.className)
+    return {};
+  }
+  validateComponent(Component) {
+    if (typeof Component !== "function" && typeof Component !== "object") {
+      throw new Error("Expected a React component as the first argument.");
     }
-  );
-}
-function CheckboxHiddenInput(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react.Checkbox.HiddenInput, { ...props });
-}
-function CheckboxGroup(props) {
-  const styles = (0, import_recipes.checkbox)();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react.Checkbox.Group, { ...props, className: (0, import_css.cx)(styles.group, props.className) });
+  }
+};
+
+// src/system/index.ts
+function createCerberusPrimitive(recipe) {
+  return new CerberusPrimitive(recipe);
 }
 
+// src/components/checkbox/primitives.tsx
+var { withSlotRecipe, withNoRecipe } = createCerberusPrimitive(import_recipes.checkbox);
+var CheckboxRoot = withSlotRecipe(
+  import_react.Checkbox.Root,
+  "root"
+);
+var CheckboxLabel = withSlotRecipe(
+  import_react.Checkbox.Label,
+  "label"
+);
+var CheckboxControl = withSlotRecipe(
+  import_react.Checkbox.Control,
+  "control"
+);
+var CheckboxIndicator = withSlotRecipe(
+  import_react.Checkbox.Indicator,
+  "indicator"
+);
+var CheckboxHiddenInput = withNoRecipe(
+  import_react.Checkbox.HiddenInput
+);
+var CheckboxGroup = withSlotRecipe(
+  import_react.Checkbox.Group,
+  "group"
+);
+
 // src/components/checkbox/parts.ts
 var CheckboxParts = {
   Root: CheckboxRoot,