@cerberus-design/react 0.8.0-next-ff54309 → 0.8.0-next-79fb5c6

package/package.json

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

package/src/components/Checkbox.tsx

@@ -20,6 +20,7 @@ export type CheckboxProps = CheckboxVariantProps &
   Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'id'> & {
     describedBy?: string
     id: string
+    mixed?: boolean
   }
 
 /**
@@ -35,10 +36,11 @@ export type CheckboxProps = CheckboxVariantProps &
  * ```
  */
 export function Checkbox(props: CheckboxProps) {
-  const { describedBy, size, checked, ...nativeProps } = props
+  const { describedBy, size, checked, mixed, ...nativeProps } = props
   const { invalid, ...fieldStates } = useFieldContext()
   const styles = checkbox({ size })
-  const { checkbox: CheckIcon } = $cerberusIcons
+  const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } =
+    $cerberusIcons
 
   return (
     <div
@@ -55,14 +57,20 @@ export function Checkbox(props: CheckboxProps) {
         {...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}>
+      <Show when={checked && !mixed}>
         <span className={styles.icon}>
           <CheckIcon />
         </span>
       </Show>
+      <Show when={mixed}>
+        <span className={styles.icon}>
+          <IndeterminateIcon />
+        </span>
+      </Show>
     </div>
   )
 }

package/src/config/cerbIcons.ts

@@ -10,6 +10,7 @@ import {
   type CarbonIconType,
 } from '@cerberus/icons'
 import type { ElementType } from 'react'
+import { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'
 
 export type IconType = CarbonIconType | ElementType
 
@@ -18,6 +19,7 @@ export interface DefinedIcons {
   confirmModal?: IconType
   promptModal?: IconType
   fileUploader?: IconType
+  indeterminate?: IconType
   infoNotification?: IconType
   successNotification?: IconType
   warningNotification?: IconType
@@ -28,10 +30,11 @@ export interface DefinedIcons {
 }
 
 export const defaultIcons: DefinedIcons = {
-  checkbox: Checkmark,
+  checkbox: CheckmarkIcon,
   confirmModal: Information,
   promptModal: Information,
   fileUploader: CloudUpload,
+  indeterminate: IndeterminateIcon,
   infoNotification: InformationFilled,
   successNotification: CheckmarkFilled,
   warningNotification: WarningFilled,

package/src/config/icons/checkbox.icons.tsx

@@ -0,0 +1,49 @@
+import type { SVGProps } from 'react'
+
+/**
+ * This module contains substitute icons for the Checkbox component.
+ * @module
+ */
+
+interface CheckboxIconProps extends SVGProps<SVGSVGElement> {}
+
+/**
+ * Checkmark icon for Checkbox component
+ */
+export function CheckmarkIcon(props: CheckboxIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      role="img"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z"
+      />
+    </svg>
+  )
+}
+
+interface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}
+
+/**
+ * Indeterminate icon for Checkbox component
+ */
+export function IndeterminateIcon(props: IndeterminateIconProps) {
+  return (
+    <svg
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path fill="currentColor" d="M4 11h16v2.667H4z" />
+    </svg>
+  )
+}

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

@@ -1 +0,0 @@
-{"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/legacy/chunk-YBD32ORB.js.map

@@ -1 +0,0 @@
-{"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/chunk-EBRWD5EE.js.map

@@ -1 +0,0 @@
-{"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-YBD32ORB.js.map

@@ -1 +0,0 @@
-{"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":[]}