@cerberus-design/react 0.8.0 → 0.8.1

package/build/modern/components/FileStatus.js

@@ -0,0 +1,17 @@
+"use client";
+import {
+  FileStatus,
+  processStatus
+} from "../chunk-7NX4RGDB.js";
+import "../chunk-TYTEREKZ.js";
+import "../chunk-SLHX5K6I.js";
+import "../chunk-VGHVH2T3.js";
+import "../chunk-ZAU4JVLL.js";
+import "../chunk-5WVXIAG2.js";
+import "../chunk-GUECLKHY.js";
+import "../chunk-CP7OUC2Q.js";
+export {
+  FileStatus,
+  processStatus
+};
+//# sourceMappingURL=FileStatus.js.map

package/build/modern/components/FileUploader.js

@@ -1,10 +1,11 @@
 "use client";
 import {
   FileUploader
-} from "../chunk-IOG6XIR5.js";
+} from "../chunk-TF3HRELU.js";
 import "../chunk-4O4QFF4S.js";
-import "../chunk-BEYPMC73.js";
-import "../chunk-GVNPFXKL.js";
+import "../chunk-5WVXIAG2.js";
+import "../chunk-GUECLKHY.js";
+import "../chunk-CP7OUC2Q.js";
 export {
   FileUploader
 };

package/build/modern/components/Input.js

@@ -1,11 +1,12 @@
 "use client";
 import {
   Input
-} from "../chunk-XB4ZRAH4.js";
-import "../chunk-ZAU4JVLL.js";
+} from "../chunk-53QBTZZF.js";
 import "../chunk-4O4QFF4S.js";
-import "../chunk-BEYPMC73.js";
-import "../chunk-GVNPFXKL.js";
+import "../chunk-ZAU4JVLL.js";
+import "../chunk-5WVXIAG2.js";
+import "../chunk-GUECLKHY.js";
+import "../chunk-CP7OUC2Q.js";
 export {
   Input
 };

package/build/modern/components/Label.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Label
-} from "../chunk-JJGZRBIR.js";
-import "../chunk-ZAU4JVLL.js";
+} from "../chunk-2FK7NR7Y.js";
 import "../chunk-4O4QFF4S.js";
+import "../chunk-ZAU4JVLL.js";
 export {
   Label
 };

package/build/modern/components/ModalIcon.js

@@ -1,6 +1,6 @@
 import {
   ModalIcon
-} from "../chunk-JJP2TFTU.js";
+} from "../chunk-VCR5C6Q3.js";
 export {
   ModalIcon
 };

package/build/modern/components/Notification.js

@@ -1,10 +1,11 @@
 "use client";
 import {
   Notification
-} from "../chunk-4N2L357B.js";
+} from "../chunk-EJIMJWPB.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-BEYPMC73.js";
-import "../chunk-GVNPFXKL.js";
+import "../chunk-5WVXIAG2.js";
+import "../chunk-GUECLKHY.js";
+import "../chunk-CP7OUC2Q.js";
 export {
   Notification
 };

package/build/modern/components/ProgressBar.js

@@ -0,0 +1,7 @@
+import {
+  ProgressBar
+} from "../chunk-TYTEREKZ.js";
+export {
+  ProgressBar
+};
+//# sourceMappingURL=ProgressBar.js.map

package/build/modern/components/Select.js

@@ -0,0 +1,15 @@
+"use client";
+import {
+  Option,
+  Select
+} from "../chunk-RHG26FYL.js";
+import "../chunk-4O4QFF4S.js";
+import "../chunk-ZAU4JVLL.js";
+import "../chunk-5WVXIAG2.js";
+import "../chunk-GUECLKHY.js";
+import "../chunk-CP7OUC2Q.js";
+export {
+  Option,
+  Select
+};
+//# sourceMappingURL=Select.js.map

package/build/modern/components/Toggle.js

@@ -1,10 +1,11 @@
 "use client";
 import {
   Toggle
-} from "../chunk-IL5ELPTT.js";
+} from "../chunk-ID3XWGLY.js";
 import "../chunk-ZAU4JVLL.js";
-import "../chunk-BEYPMC73.js";
-import "../chunk-GVNPFXKL.js";
+import "../chunk-5WVXIAG2.js";
+import "../chunk-GUECLKHY.js";
+import "../chunk-CP7OUC2Q.js";
 export {
   Toggle
 };

package/build/modern/config/cerbIcons.js

@@ -1,6 +1,7 @@
 import {
   defaultIcons
-} from "../chunk-GVNPFXKL.js";
+} from "../chunk-GUECLKHY.js";
+import "../chunk-CP7OUC2Q.js";
 export {
   defaultIcons
 };

package/build/modern/config/defineIcons.js

@@ -1,8 +1,9 @@
 import {
   $cerberusIcons,
   defineIcons
-} from "../chunk-BEYPMC73.js";
-import "../chunk-GVNPFXKL.js";
+} from "../chunk-5WVXIAG2.js";
+import "../chunk-GUECLKHY.js";
+import "../chunk-CP7OUC2Q.js";
 export {
   $cerberusIcons,
   defineIcons

package/build/modern/config/icons/checkbox.icons.js

@@ -0,0 +1,9 @@
+import {
+  CheckmarkIcon,
+  IndeterminateIcon
+} from "../../chunk-CP7OUC2Q.js";
+export {
+  CheckmarkIcon,
+  IndeterminateIcon
+};
+//# sourceMappingURL=checkbox.icons.js.map

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

@@ -2,18 +2,19 @@
 import {
   ConfirmModal,
   useConfirmModal
-} from "../chunk-Y5IY7O23.js";
+} from "../chunk-GZY6CH7D.js";
+import "../chunk-VCR5C6Q3.js";
 import "../chunk-4CAT3FHV.js";
 import "../chunk-2UFNQM55.js";
 import "../chunk-4M4LCQ43.js";
 import "../chunk-QU7UV5DB.js";
 import "../chunk-JB7IQ2BM.js";
-import "../chunk-JJP2TFTU.js";
 import "../chunk-6F34A7NZ.js";
 import "../chunk-4O4QFF4S.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-BEYPMC73.js";
-import "../chunk-GVNPFXKL.js";
+import "../chunk-5WVXIAG2.js";
+import "../chunk-GUECLKHY.js";
+import "../chunk-CP7OUC2Q.js";
 import "../chunk-C5HLLGME.js";
 export {
   ConfirmModal,

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

@@ -2,16 +2,17 @@
 import {
   NotificationCenter,
   useNotificationCenter
-} from "../chunk-QO2UXGW4.js";
-import "../chunk-4N2L357B.js";
+} from "../chunk-VPWBSZAR.js";
+import "../chunk-EJIMJWPB.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-BEYPMC73.js";
-import "../chunk-GVNPFXKL.js";
+import "../chunk-5WVXIAG2.js";
+import "../chunk-GUECLKHY.js";
+import "../chunk-CP7OUC2Q.js";
 export {
   NotificationCenter,
   useNotificationCenter

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

@@ -2,21 +2,22 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-LTDNZRUY.js";
+} from "../chunk-S6CMAXQF.js";
+import "../chunk-VCR5C6Q3.js";
 import "../chunk-4CAT3FHV.js";
-import "../chunk-XB4ZRAH4.js";
-import "../chunk-JJGZRBIR.js";
+import "../chunk-53QBTZZF.js";
+import "../chunk-2FK7NR7Y.js";
 import "../chunk-2UFNQM55.js";
 import "../chunk-4M4LCQ43.js";
 import "../chunk-QU7UV5DB.js";
 import "../chunk-JB7IQ2BM.js";
-import "../chunk-JJP2TFTU.js";
 import "../chunk-6F34A7NZ.js";
-import "../chunk-ZAU4JVLL.js";
 import "../chunk-4O4QFF4S.js";
+import "../chunk-ZAU4JVLL.js";
 import "../chunk-JIZQFTW6.js";
-import "../chunk-BEYPMC73.js";
-import "../chunk-GVNPFXKL.js";
+import "../chunk-5WVXIAG2.js";
+import "../chunk-GUECLKHY.js";
+import "../chunk-CP7OUC2Q.js";
 import "../chunk-C5HLLGME.js";
 export {
   PromptModal,

package/build/modern/index.js

@@ -1,7 +1,23 @@
+import {
+  NotificationCenter,
+  useNotificationCenter
+} from "./chunk-VPWBSZAR.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-LTDNZRUY.js";
+} from "./chunk-S6CMAXQF.js";
+import {
+  Tag
+} from "./chunk-Z6IWNVPN.js";
+import {
+  Tbody
+} from "./chunk-PJ3744I6.js";
+import {
+  Td
+} from "./chunk-XREC5IJE.js";
+import {
+  Textarea
+} from "./chunk-TCO46FK7.js";
 import {
   Th
 } from "./chunk-3GXISGPS.js";
@@ -10,15 +26,18 @@ import {
 } from "./chunk-N3FUF4TB.js";
 import {
   Toggle
-} from "./chunk-IL5ELPTT.js";
+} from "./chunk-ID3XWGLY.js";
 import {
   ConfirmModal,
   useConfirmModal
-} from "./chunk-Y5IY7O23.js";
+} from "./chunk-GZY6CH7D.js";
 import {
-  NotificationCenter,
-  useNotificationCenter
-} from "./chunk-QO2UXGW4.js";
+  Radio
+} from "./chunk-PH64POOB.js";
+import {
+  Option,
+  Select
+} from "./chunk-RHG26FYL.js";
 import {
   Tab
 } from "./chunk-SONHHNYQ.js";
@@ -33,17 +52,11 @@ import {
   Tr
 } from "./chunk-A5WYZVUR.js";
 import {
-  Tag
-} from "./chunk-Z6IWNVPN.js";
-import {
-  Tbody
-} from "./chunk-PJ3744I6.js";
-import {
-  Td
-} from "./chunk-XREC5IJE.js";
+  ModalIcon
+} from "./chunk-VCR5C6Q3.js";
 import {
-  Textarea
-} from "./chunk-TCO46FK7.js";
+  NavMenuLink
+} from "./chunk-6DIGPXAD.js";
 import {
   NavMenuList,
   getPosition
@@ -57,7 +70,7 @@ import {
 } from "./chunk-KJUCHZHV.js";
 import {
   Notification
-} from "./chunk-4N2L357B.js";
+} from "./chunk-EJIMJWPB.js";
 import {
   NotificationDescription
 } from "./chunk-HW76XVA3.js";
@@ -68,14 +81,14 @@ import {
   Portal
 } from "./chunk-4CAT3FHV.js";
 import {
-  Radio
-} from "./chunk-PH64POOB.js";
+  FileUploader
+} from "./chunk-TF3HRELU.js";
 import {
   Input
-} from "./chunk-XB4ZRAH4.js";
+} from "./chunk-53QBTZZF.js";
 import {
   Label
-} from "./chunk-JJGZRBIR.js";
+} from "./chunk-2FK7NR7Y.js";
 import {
   Modal
 } from "./chunk-2UFNQM55.js";
@@ -88,12 +101,6 @@ import {
 import {
   ModalHeading
 } from "./chunk-JB7IQ2BM.js";
-import {
-  ModalIcon
-} from "./chunk-JJP2TFTU.js";
-import {
-  NavMenuLink
-} from "./chunk-6DIGPXAD.js";
 import {
   MODE_KEY,
   THEME_KEY,
@@ -107,6 +114,9 @@ import {
 import {
   Button
 } from "./chunk-6F34A7NZ.js";
+import {
+  Checkbox
+} from "./chunk-4FD33RTW.js";
 import {
   Droppable
 } from "./chunk-7VJOPJVX.js";
@@ -117,6 +127,19 @@ import {
   FeatureFlags,
   useFeatureFlags
 } from "./chunk-4M3EUP57.js";
+import {
+  Show
+} from "./chunk-4O4QFF4S.js";
+import {
+  FileStatus,
+  processStatus
+} from "./chunk-7NX4RGDB.js";
+import {
+  ProgressBar
+} from "./chunk-TYTEREKZ.js";
+import {
+  IconButton
+} from "./chunk-SLHX5K6I.js";
 import {
   FieldMessage
 } from "./chunk-VGHVH2T3.js";
@@ -124,15 +147,6 @@ import {
   Field,
   useFieldContext
 } from "./chunk-ZAU4JVLL.js";
-import {
-  FileUploader
-} from "./chunk-IOG6XIR5.js";
-import {
-  Show
-} from "./chunk-4O4QFF4S.js";
-import {
-  IconButton
-} from "./chunk-SLHX5K6I.js";
 import "./chunk-55J6XMHW.js";
 import {
   createNavTriggerProps
@@ -151,8 +165,9 @@ import {
 import {
   $cerberusIcons,
   defineIcons
-} from "./chunk-BEYPMC73.js";
-import "./chunk-GVNPFXKL.js";
+} from "./chunk-5WVXIAG2.js";
+import "./chunk-GUECLKHY.js";
+import "./chunk-CP7OUC2Q.js";
 import {
   useModal
 } from "./chunk-C5HLLGME.js";
@@ -162,12 +177,14 @@ export * from "@dnd-kit/core";
 export {
   $cerberusIcons,
   Button,
+  Checkbox,
   ConfirmModal,
   Droppable,
   FeatureFlag,
   FeatureFlags,
   Field,
   FieldMessage,
+  FileStatus,
   FileUploader,
   IconButton,
   Input,
@@ -186,9 +203,12 @@ export {
   NotificationCenter,
   NotificationDescription,
   NotificationHeading,
+  Option,
   Portal,
+  ProgressBar,
   PromptModal,
   Radio,
+  Select,
   Show,
   THEME_KEY,
   Tab,
@@ -209,6 +229,7 @@ export {
   createNavTriggerProps,
   defineIcons,
   getPosition,
+  processStatus,
   trapFocus,
   useConfirmModal,
   useFeatureFlags,

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/Radio'\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA,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/FileStatus'\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8EA,cAAc;","names":[]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
   "type": "module",
   "main": "build/legacy/index.cjs",
-  "module": "build/legacy/index.js",
+  "module": "build/modern/index.js",
   "peerDependencies": {
     "@cerberus/icons": "npm:@jsr/cerberus__icons",
     "@cerberus/panda-preset": "npm:@jsr/cerberus__panda-preset",
@@ -26,7 +26,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus-design/styled-system": "0.8.0"
+    "@cerberus-design/styled-system": "0.8.1"
   },
   "publishConfig": {
     "access": "public"
@@ -63,8 +63,8 @@
         "default": "./build/modern/index.js"
       },
       "require": {
-        "types": "./build/modern/index.d.cts",
-        "default": "./build/modern/index.cjs"
+        "types": "./build/legacy/_tsup-dts-rollup.d.cts",
+        "default": "./build/legacy/index.cjs"
       }
     },
     "./package.json": "./package.json"
@@ -72,7 +72,7 @@
   "typesVersions": {
     "*": {
       ".": [
-        "build/legacy/_tsup-dts-rollup.d.ts"
+        "build/legacy/_tsup-dts-rollup.d.cts"
       ]
     }
   }

package/src/components/Checkbox.tsx

@@ -0,0 +1,76 @@
+'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
+    mixed?: boolean
+  }
+
+/**
+ * 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, mixed, ...nativeProps } = props
+  const { invalid, ...fieldStates } = useFieldContext()
+  const styles = checkbox({ size })
+  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } =
+    $cerberusIcons
+
+  return (
+    <div
+      className={cx(
+        styles.root,
+        vstack({
+          gap: '0',
+          justify: 'center',
+        }),
+      )}
+    >
+      <input
+        {...nativeProps}
+        {...fieldStates}
+        {...(describedBy && { 'aria-describedby': describedBy })}
+        {...(invalid && { 'aria-invalid': true })}
+        {...(mixed && { 'aria-checked': 'mixed' })}
+        className={cx('peer', nativeProps.className, styles.input)}
+        type="checkbox"
+      />
+      <Show when={checked && !mixed}>
+        <span className={styles.icon}>
+          <CheckIcon />
+        </span>
+      </Show>
+      <Show when={mixed}>
+        <span className={styles.icon}>
+          <IndeterminateIcon />
+        </span>
+      </Show>
+    </div>
+  )
+}