@cerberus-design/react 0.8.0-next-29d0773 → 0.8.0-next-5e1561d

package/build/modern/{chunk-QRTCZO2W.js → chunk-3CMOWLNY.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4CAT3FHV.js";
 import {
   Input
-} from "./chunk-URKYD3YB.js";
+} from "./chunk-M7HQ5V66.js";
 import {
   Label
 } from "./chunk-RQPDRHRP.js";
@@ -36,7 +36,7 @@ import {
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-TSUSAKL3.js";
+} from "./chunk-Q6AA6XBS.js";
 import {
   useModal
 } from "./chunk-C5HLLGME.js";
@@ -204,4 +204,4 @@ export {
   PromptModal,
   usePromptModal
 };
-//# sourceMappingURL=chunk-QRTCZO2W.js.map
+//# sourceMappingURL=chunk-3CMOWLNY.js.map

package/build/modern/chunk-EBRWD5EE.js

@@ -0,0 +1,54 @@
+import {
+  useFieldContext
+} from "./chunk-ZAU4JVLL.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+import {
+  $cerberusIcons
+} from "./chunk-Q6AA6XBS.js";
+
+// src/components/Checkbox.tsx
+import {
+  checkbox
+} from "@cerberus/styled-system/recipes";
+import { vstack } from "@cerberus/styled-system/patterns";
+import { cx } from "@cerberus/styled-system/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Checkbox(props) {
+  const { describedBy, size, checked, ...nativeProps } = props;
+  const { invalid, ...fieldStates } = useFieldContext();
+  const styles = checkbox({ size });
+  const { checkbox: CheckIcon } = $cerberusIcons;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        styles.root,
+        vstack({
+          gap: "0",
+          justify: "center"
+        })
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...nativeProps,
+            ...fieldStates,
+            ...describedBy && { "aria-describedby": describedBy },
+            ...invalid && { "aria-invalid": true },
+            className: cx("peer", nativeProps.className, styles.input),
+            type: "checkbox"
+          }
+        ),
+        /* @__PURE__ */ jsx(Show, { when: checked, children: /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(CheckIcon, {}) }) })
+      ]
+    }
+  );
+}
+
+export {
+  Checkbox
+};
+//# sourceMappingURL=chunk-EBRWD5EE.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  checkbox,\n  type CheckboxVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { cx } from '@cerberus/styled-system/css'\nimport type { InputHTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { useFieldContext } from '../context/field'\nimport { $cerberusIcons } from '../config/defineIcons'\n\n/**\n * This module contains the Checkbox component.\n * @module\n */\n\nexport type CheckboxProps = CheckboxVariantProps &\n  Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {\n    describedBy?: string\n    id: string\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 * @definition [Checkbox docs](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 Checkbox(props: CheckboxProps) {\n  const { describedBy, size, checked, ...nativeProps } = props\n  const { invalid, ...fieldStates } = useFieldContext()\n  const styles = checkbox({ size })\n  const { checkbox: CheckIcon } = $cerberusIcons\n\n  return (\n    <div\n      className={cx(\n        styles.root,\n        vstack({\n          gap: '0',\n          justify: 'center',\n        }),\n      )}\n    >\n      <input\n        {...nativeProps}\n        {...fieldStates}\n        {...(describedBy && { 'aria-describedby': describedBy })}\n        {...(invalid && { 'aria-invalid': true })}\n        className={cx('peer', nativeProps.className, styles.input)}\n        type=\"checkbox\"\n      />\n      <Show when={checked}>\n        <span className={styles.icon}>\n          <CheckIcon />\n        </span>\n      </Show>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAEA;AAAA,EACE;AAAA,OAEK;AACP,SAAS,cAAc;AACvB,SAAS,UAAU;AAoCf,SASE,KATF;AAPG,SAAS,SAAS,OAAsB;AAC7C,QAAM,EAAE,aAAa,MAAM,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,SAAS,SAAS,EAAE,KAAK,CAAC;AAChC,QAAM,EAAE,UAAU,UAAU,IAAI;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,UACL,KAAK;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,YACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACvC,WAAW,GAAG,QAAQ,YAAY,WAAW,OAAO,KAAK;AAAA,YACzD,MAAK;AAAA;AAAA,QACP;AAAA,QACA,oBAAC,QAAK,MAAM,SACV,8BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,aAAU,GACb,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/build/modern/{chunk-NVCUFUD7.js → chunk-GE7RTD5F.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-4O4QFF4S.js";
 import {
   $cerberusIcons
-} from "./chunk-TSUSAKL3.js";
+} from "./chunk-Q6AA6XBS.js";
 
 // src/components/FileUploader.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -59,4 +59,4 @@ function FileUploader(props) {
 export {
   FileUploader
 };
-//# sourceMappingURL=chunk-NVCUFUD7.js.map
+//# sourceMappingURL=chunk-GE7RTD5F.js.map

package/build/{legacy/chunk-YRGASCC5.js → modern/chunk-GOJYBQNG.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-ZAU4JVLL.js";
 import {
   $cerberusIcons
-} from "./chunk-TSUSAKL3.js";
+} from "./chunk-Q6AA6XBS.js";
 
 // src/components/Toggle.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -55,4 +55,4 @@ function Toggle(props) {
 export {
   Toggle
 };
-//# sourceMappingURL=chunk-YRGASCC5.js.map
+//# sourceMappingURL=chunk-GOJYBQNG.js.map

package/build/modern/{chunk-O7SC4O5S.js → chunk-GX63P3NP.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-TSUSAKL3.js";
+} from "./chunk-Q6AA6XBS.js";
 
 // src/components/Notification.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -73,4 +73,4 @@ function Notification(props) {
 export {
   Notification
 };
-//# sourceMappingURL=chunk-O7SC4O5S.js.map
+//# sourceMappingURL=chunk-GX63P3NP.js.map

package/build/modern/{chunk-URKYD3YB.js → chunk-M7HQ5V66.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-4O4QFF4S.js";
 import {
   $cerberusIcons
-} from "./chunk-TSUSAKL3.js";
+} from "./chunk-Q6AA6XBS.js";
 
 // src/components/Input.tsx
 import { input } from "@cerberus/styled-system/recipes";
@@ -39,4 +39,4 @@ function Input(props) {
 export {
   Input
 };
-//# sourceMappingURL=chunk-URKYD3YB.js.map
+//# sourceMappingURL=chunk-M7HQ5V66.js.map

package/build/{legacy/chunk-MINQJYGV.js → modern/chunk-NKJL4J2S.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-4O4QFF4S.js";
 import {
   $cerberusIcons
-} from "./chunk-TSUSAKL3.js";
+} from "./chunk-Q6AA6XBS.js";
 
 // src/components/Select.tsx
 import { cx } from "@cerberus/styled-system/css";
@@ -65,4 +65,4 @@ export {
   Select,
   Option
 };
-//# sourceMappingURL=chunk-MINQJYGV.js.map
+//# sourceMappingURL=chunk-NKJL4J2S.js.map

package/build/modern/{chunk-XWE45ZOL.js → chunk-PQGIVCAA.js}

@@ -1,6 +1,6 @@
 import {
   Notification
-} from "./chunk-O7SC4O5S.js";
+} from "./chunk-GX63P3NP.js";
 import {
   NotificationDescription
 } from "./chunk-HW76XVA3.js";
@@ -119,4 +119,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-XWE45ZOL.js.map
+//# sourceMappingURL=chunk-PQGIVCAA.js.map

package/build/modern/{chunk-TSUSAKL3.js → chunk-Q6AA6XBS.js}

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "./chunk-H4F2ONKN.js";
+} from "./chunk-YBD32ORB.js";
 
 // src/config/defineIcons.ts
 function _validateIconsProperties(icons) {
@@ -24,4 +24,4 @@ export {
   defineIcons,
   $cerberusIcons
 };
-//# sourceMappingURL=chunk-TSUSAKL3.js.map
+//# sourceMappingURL=chunk-Q6AA6XBS.js.map

package/build/modern/{chunk-GM3AUVXL.js → chunk-WA7ZWO2U.js}

@@ -27,7 +27,7 @@ import {
 } from "./chunk-JIZQFTW6.js";
 import {
   $cerberusIcons
-} from "./chunk-TSUSAKL3.js";
+} from "./chunk-Q6AA6XBS.js";
 import {
   useModal
 } from "./chunk-C5HLLGME.js";
@@ -151,4 +151,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-GM3AUVXL.js.map
+//# sourceMappingURL=chunk-WA7ZWO2U.js.map

package/build/modern/{chunk-H4F2ONKN.js → chunk-YBD32ORB.js}

@@ -10,6 +10,7 @@ import {
   WarningFilled
 } from "@cerberus/icons";
 var defaultIcons = {
+  checkbox: Checkmark,
   confirmModal: Information,
   promptModal: Information,
   fileUploader: CloudUpload,
@@ -25,4 +26,4 @@ var defaultIcons = {
 export {
   defaultIcons
 };
-//# sourceMappingURL=chunk-H4F2ONKN.js.map
+//# sourceMappingURL=chunk-YBD32ORB.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n  Checkmark,\n  CheckmarkFilled,\n  ChevronDown,\n  CloudUpload,\n  ErrorFilled,\n  Information,\n  InformationFilled,\n  WarningFilled,\n  type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n  checkbox?: IconType\n  confirmModal?: IconType\n  promptModal?: IconType\n  fileUploader?: IconType\n  infoNotification?: IconType\n  successNotification?: IconType\n  warningNotification?: IconType\n  dangerNotification?: IconType\n  invalid: IconType\n  selectArrow?: IconType\n  toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n  checkbox: Checkmark,\n  confirmModal: Information,\n  promptModal: Information,\n  fileUploader: CloudUpload,\n  infoNotification: InformationFilled,\n  successNotification: CheckmarkFilled,\n  warningNotification: WarningFilled,\n  dangerNotification: ErrorFilled,\n  invalid: WarningFilled,\n  selectArrow: ChevronDown,\n  toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAmBA,IAAM,eAA6B;AAAA,EACxC,UAAU;AAAA,EACV,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,aAAa;AAAA,EACb,eAAe;AACjB;","names":[]}

package/build/modern/components/Checkbox.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  Checkbox
+} from "../chunk-EBRWD5EE.js";
+import "../chunk-ZAU4JVLL.js";
+import "../chunk-4O4QFF4S.js";
+import "../chunk-Q6AA6XBS.js";
+import "../chunk-YBD32ORB.js";
+export {
+  Checkbox
+};
+//# sourceMappingURL=Checkbox.js.map

package/build/modern/components/Checkbox.js.map

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

package/build/modern/components/FileUploader.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   FileUploader
-} from "../chunk-NVCUFUD7.js";
+} from "../chunk-GE7RTD5F.js";
 import "../chunk-4O4QFF4S.js";
-import "../chunk-TSUSAKL3.js";
-import "../chunk-H4F2ONKN.js";
+import "../chunk-Q6AA6XBS.js";
+import "../chunk-YBD32ORB.js";
 export {
   FileUploader
 };

package/build/modern/components/Input.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   Input
-} from "../chunk-URKYD3YB.js";
+} from "../chunk-M7HQ5V66.js";
 import "../chunk-ZAU4JVLL.js";
 import "../chunk-4O4QFF4S.js";
-import "../chunk-TSUSAKL3.js";
-import "../chunk-H4F2ONKN.js";
+import "../chunk-Q6AA6XBS.js";
+import "../chunk-YBD32ORB.js";
 export {
   Input
 };

package/build/modern/components/Notification.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Notification
-} from "../chunk-O7SC4O5S.js";
+} from "../chunk-GX63P3NP.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-TSUSAKL3.js";
-import "../chunk-H4F2ONKN.js";
+import "../chunk-Q6AA6XBS.js";
+import "../chunk-YBD32ORB.js";
 export {
   Notification
 };

package/build/modern/components/Select.js

@@ -2,11 +2,11 @@
 import {
   Option,
   Select
-} from "../chunk-MINQJYGV.js";
+} from "../chunk-NKJL4J2S.js";
 import "../chunk-ZAU4JVLL.js";
 import "../chunk-4O4QFF4S.js";
-import "../chunk-TSUSAKL3.js";
-import "../chunk-H4F2ONKN.js";
+import "../chunk-Q6AA6XBS.js";
+import "../chunk-YBD32ORB.js";
 export {
   Option,
   Select

package/build/modern/components/Toggle.js

@@ -1,10 +1,10 @@
 "use client";
 import {
   Toggle
-} from "../chunk-YRGASCC5.js";
+} from "../chunk-GOJYBQNG.js";
 import "../chunk-ZAU4JVLL.js";
-import "../chunk-TSUSAKL3.js";
-import "../chunk-H4F2ONKN.js";
+import "../chunk-Q6AA6XBS.js";
+import "../chunk-YBD32ORB.js";
 export {
   Toggle
 };

package/build/modern/config/cerbIcons.js

@@ -1,6 +1,6 @@
 import {
   defaultIcons
-} from "../chunk-H4F2ONKN.js";
+} from "../chunk-YBD32ORB.js";
 export {
   defaultIcons
 };

package/build/modern/config/defineIcons.js

@@ -1,8 +1,8 @@
 import {
   $cerberusIcons,
   defineIcons
-} from "../chunk-TSUSAKL3.js";
-import "../chunk-H4F2ONKN.js";
+} from "../chunk-Q6AA6XBS.js";
+import "../chunk-YBD32ORB.js";
 export {
   $cerberusIcons,
   defineIcons

package/build/modern/context/confirm-modal.js

@@ -2,7 +2,7 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-GM3AUVXL.js";
+} from "../chunk-WA7ZWO2U.js";
 import "../chunk-4CAT3FHV.js";
 import "../chunk-2UFNQM55.js";
 import "../chunk-4M4LCQ43.js";
@@ -12,8 +12,8 @@ import "../chunk-JJP2TFTU.js";
 import "../chunk-6F34A7NZ.js";
 import "../chunk-4O4QFF4S.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-TSUSAKL3.js";
-import "../chunk-H4F2ONKN.js";
+import "../chunk-Q6AA6XBS.js";
+import "../chunk-YBD32ORB.js";
 import "../chunk-C5HLLGME.js";
 export {
   ConfirmModal,

package/build/modern/context/notification-center.js

@@ -2,16 +2,16 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "../chunk-XWE45ZOL.js";
-import "../chunk-O7SC4O5S.js";
+} from "../chunk-PQGIVCAA.js";
+import "../chunk-GX63P3NP.js";
 import "../chunk-HW76XVA3.js";
 import "../chunk-3C2DJSEE.js";
 import "../chunk-4CAT3FHV.js";
 import "../chunk-6F34A7NZ.js";
 import "../chunk-4O4QFF4S.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-TSUSAKL3.js";
-import "../chunk-H4F2ONKN.js";
+import "../chunk-Q6AA6XBS.js";
+import "../chunk-YBD32ORB.js";
 export {
   NotificationCenter,
   useNotificationCenter

package/build/modern/context/prompt-modal.js

@@ -2,9 +2,9 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-QRTCZO2W.js";
+} from "../chunk-3CMOWLNY.js";
 import "../chunk-4CAT3FHV.js";
-import "../chunk-URKYD3YB.js";
+import "../chunk-M7HQ5V66.js";
 import "../chunk-RQPDRHRP.js";
 import "../chunk-2UFNQM55.js";
 import "../chunk-4M4LCQ43.js";
@@ -15,8 +15,8 @@ import "../chunk-6F34A7NZ.js";
 import "../chunk-ZAU4JVLL.js";
 import "../chunk-4O4QFF4S.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-TSUSAKL3.js";
-import "../chunk-H4F2ONKN.js";
+import "../chunk-Q6AA6XBS.js";
+import "../chunk-YBD32ORB.js";
 import "../chunk-C5HLLGME.js";
 export {
   PromptModal,

package/build/modern/index.js

@@ -1,11 +1,14 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-XWE45ZOL.js";
+} from "./chunk-PQGIVCAA.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-QRTCZO2W.js";
+} from "./chunk-3CMOWLNY.js";
+import {
+  Tbody
+} from "./chunk-PJ3744I6.js";
 import {
   Td
 } from "./chunk-XREC5IJE.js";
@@ -20,15 +23,18 @@ import {
 } from "./chunk-N3FUF4TB.js";
 import {
   Toggle
-} from "./chunk-YRGASCC5.js";
+} from "./chunk-GOJYBQNG.js";
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-GM3AUVXL.js";
+} from "./chunk-WA7ZWO2U.js";
+import {
+  Radio
+} from "./chunk-PH64POOB.js";
 import {
   Option,
   Select
-} from "./chunk-MINQJYGV.js";
+} from "./chunk-NKJL4J2S.js";
 import {
   Tab
 } from "./chunk-SONHHNYQ.js";
@@ -46,8 +52,8 @@ import {
   Tag
 } from "./chunk-Z6IWNVPN.js";
 import {
-  Tbody
-} from "./chunk-PJ3744I6.js";
+  NavMenuLink
+} from "./chunk-6DIGPXAD.js";
 import {
   NavMenuList,
   getPosition
@@ -61,7 +67,7 @@ import {
 } from "./chunk-KJUCHZHV.js";
 import {
   Notification
-} from "./chunk-O7SC4O5S.js";
+} from "./chunk-GX63P3NP.js";
 import {
   NotificationDescription
 } from "./chunk-HW76XVA3.js";
@@ -75,11 +81,11 @@ import {
   ProgressBar
 } from "./chunk-TYTEREKZ.js";
 import {
-  Radio
-} from "./chunk-PH64POOB.js";
+  IconButton
+} from "./chunk-SLHX5K6I.js";
 import {
   Input
-} from "./chunk-URKYD3YB.js";
+} from "./chunk-M7HQ5V66.js";
 import {
   Label
 } from "./chunk-RQPDRHRP.js";
@@ -98,9 +104,6 @@ import {
 import {
   ModalIcon
 } from "./chunk-JJP2TFTU.js";
-import {
-  NavMenuLink
-} from "./chunk-6DIGPXAD.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -114,6 +117,9 @@ import {
 import {
   Button
 } from "./chunk-6F34A7NZ.js";
+import {
+  Checkbox
+} from "./chunk-EBRWD5EE.js";
 import {
   Droppable
 } from "./chunk-7VJOPJVX.js";
@@ -133,13 +139,10 @@ import {
 } from "./chunk-ZAU4JVLL.js";
 import {
   FileUploader
-} from "./chunk-NVCUFUD7.js";
+} from "./chunk-GE7RTD5F.js";
 import {
   Show
 } from "./chunk-4O4QFF4S.js";
-import {
-  IconButton
-} from "./chunk-SLHX5K6I.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -158,8 +161,8 @@ import {
 import {
   $cerberusIcons,
   defineIcons
-} from "./chunk-TSUSAKL3.js";
-import "./chunk-H4F2ONKN.js";
+} from "./chunk-Q6AA6XBS.js";
+import "./chunk-YBD32ORB.js";
 import {
   useModal
 } from "./chunk-C5HLLGME.js";
@@ -169,6 +172,7 @@ export * from "@dnd-kit/core";
 export {
   $cerberusIcons,
   Button,
+  Checkbox,
   ConfirmModal,
   Droppable,
   FeatureFlag,

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// components\n\nexport * from './components/Button'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/ModalIcon'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA,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// components\n\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/ModalIcon'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.8.0-next-29d0773",
+  "version": "0.8.0-next-5e1561d",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -25,8 +25,8 @@
     "react": "^18",
     "react-dom": "^18",
     "tsup": "^8.1.0",
-    "@cerberus-design/styled-system": "0.8.0-next-29d0773",
-    "@cerberus-design/configs": "0.0.0"
+    "@cerberus-design/configs": "0.0.0",
+    "@cerberus-design/styled-system": "0.8.0-next-5e1561d"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Checkbox.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import {
+  checkbox,
+  type CheckboxVariantProps,
+} from '@cerberus/styled-system/recipes'
+import { vstack } from '@cerberus/styled-system/patterns'
+import { cx } from '@cerberus/styled-system/css'
+import type { InputHTMLAttributes } from 'react'
+import { Show } from './Show'
+import { useFieldContext } from '../context/field'
+import { $cerberusIcons } from '../config/defineIcons'
+
+/**
+ * This module contains the Checkbox component.
+ * @module
+ */
+
+export type CheckboxProps = CheckboxVariantProps &
+  Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {
+    describedBy?: string
+    id: string
+  }
+
+/**
+ * Checkbox component
+ * @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)
+ * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)
+ * @definition [Checkbox docs](https://cerberus.digitalu.design/react/checkbox)
+ * @example
+ * ```tsx
+ * <Field>
+ *   <Checkbox id="legal" checked={checked.legal} onChange={handleChange} />
+ * </Field>
+ * ```
+ */
+export function Checkbox(props: CheckboxProps) {
+  const { describedBy, size, checked, ...nativeProps } = props
+  const { invalid, ...fieldStates } = useFieldContext()
+  const styles = checkbox({ size })
+  const { checkbox: CheckIcon } = $cerberusIcons
+
+  return (
+    <div
+      className={cx(
+        styles.root,
+        vstack({
+          gap: '0',
+          justify: 'center',
+        }),
+      )}
+    >
+      <input
+        {...nativeProps}
+        {...fieldStates}
+        {...(describedBy && { 'aria-describedby': describedBy })}
+        {...(invalid && { 'aria-invalid': true })}
+        className={cx('peer', nativeProps.className, styles.input)}
+        type="checkbox"
+      />
+      <Show when={checked}>
+        <span className={styles.icon}>
+          <CheckIcon />
+        </span>
+      </Show>
+    </div>
+  )
+}

package/src/config/cerbIcons.ts

@@ -14,6 +14,7 @@ import type { ElementType } from 'react'
 export type IconType = CarbonIconType | ElementType
 
 export interface DefinedIcons {
+  checkbox?: IconType
   confirmModal?: IconType
   promptModal?: IconType
   fileUploader?: IconType
@@ -27,6 +28,7 @@ export interface DefinedIcons {
 }
 
 export const defaultIcons: DefinedIcons = {
+  checkbox: Checkmark,
   confirmModal: Information,
   promptModal: Information,
   fileUploader: CloudUpload,