@mortenbrudvik/waveui 0.8.0 → 0.9.0

package/dist/components/input/Checkbox.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),ee=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),te=require("../../hooks/useControllable.cjs"),a=require("../../hooks/useId.cjs"),ne=require("../../hooks/useMergedRefs.cjs"),o=require("../../lib/aria.cjs"),s=require("../../hooks/useFieldControl.cjs"),c=require("../../lib/styles.cjs"),l=require("../../lib/icons.cjs"),u=require("../../hooks/useFormReset.cjs"),re=require("../internal/HiddenInput.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var ie=`forced-colors:border-[Highlight] forced-colors:bg-[Highlight]`,ae=`forced-colors:border-[GrayText] forced-colors:bg-[Canvas]`,oe=`forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none`,p=({checked:e,defaultChecked:p=!1,indeterminate:m=!1,onCheckedChange:h,onChange:g,disabled:_=!1,disabledFocusable:v=!1,label:y,labelPosition:b=`after`,name:se,value:ce,required:x,form:S,id:le,"aria-label":C,"aria-labelledby":w,"aria-describedby":T,"aria-invalid":E,"aria-required":D,"aria-errormessage":O,"aria-details":k,"aria-disabled":A,autoFocus:j,tabIndex:M,onClick:N,onFocus:P,onBlur:F,onKeyDown:I,onKeyUp:L,controlRef:R,className:ue,children:z,ref:B,...V})=>{g!==void 0&&n.warnDeprecated(`Checkbox`,`onChange`,`onCheckedChange`);let H=r.slotRendersContent(z);d.useEffect(()=>{H&&n.warnOnce(`Checkbox:children`,"Checkbox: children are not rendered. Pass the label in `label`.")},[H]);let[U,W]=te.useControllable(e,p,e=>{h?.(e),g?.(e)}),de=a.useId(`checkbox`),G=a.useId(`checkbox-label`),K=s.useFieldContext(),q=s.useFieldControl({id:le,"aria-label":C,"aria-labelledby":w,"aria-describedby":T,"aria-invalid":E,"aria-required":D??x}),J=x??K?.required??!1,Y=r.slotRendersContent(y),fe=Y&&q[`aria-label`]===void 0?o.joinIds(q[`aria-labelledby`],K&&q.id===K.controlId?K.labelId:void 0,G):q[`aria-labelledby`],X=d.useRef(null),pe=ne.useMergedRefs(X,R);u.useFormReset(X,()=>W(p),S);let me=U||m,Z=_||v,Q=Z?oe:c.forcedColors.selectedLeaf,$=Y?(0,f.jsx)(`span`,{id:G,className:t.cn(i.checkboxClassNames.label,`text-body-1 text-foreground`),children:r.materialiseSlotContent(y)}):null;return(0,f.jsxs)(`label`,{ref:B,"data-label-position":b,className:t.cn(i.checkboxClassNames.root,`relative inline-flex items-start gap-2 select-none`,Z?`cursor-not-allowed opacity-50 has-focus-visible:opacity-100`:`cursor-pointer`,ue),...V,children:[b===`before`&&$,(0,f.jsx)(`button`,{id:de,type:`button`,...q,"aria-labelledby":fe,"aria-errormessage":O,"aria-details":k,"aria-disabled":A,autoFocus:j,tabIndex:M,onFocus:P,onBlur:F,onKeyDown:I,onKeyUp:L,ref:pe,role:`checkbox`,"aria-checked":m?`mixed`:U,disabled:_&&!v,...o.focusableDisabledProps(v,{reachable:!0}),onClick:v?e=>{e.preventDefault(),e.stopPropagation()}:ee.composeEventHandlers(N,()=>W(e=>!e)),className:t.cn(i.checkboxClassNames.indicator,`flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-xs border p-0 transition-colors motion-reduce:transition-none`,Y&&`mt-px`,c.focusRing,me?t.cn(`border-primary bg-primary text-primary-foreground`,Z?ae:ie):t.cn(`border-stroke-accessible bg-transparent`,Z?c.forcedColors.disabled:c.forcedColors.control)),children:m?(0,f.jsx)(l.SubtractIcon,{size:12,className:Q}):U?(0,f.jsx)(l.CheckIcon,{size:12,className:Q}):null}),b!==`before`&&$,(0,f.jsx)(re.HiddenInput,{type:`checkbox`,name:se,form:S,disabled:Z,value:ce,checked:U,required:J,onInvalid:()=>X.current?.focus()})]})};p.displayName=`Checkbox`,exports.Checkbox=p;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),ee=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),te=require("../../hooks/useControllable.cjs"),a=require("../../hooks/useId.cjs"),ne=require("../../hooks/useMergedRefs.cjs"),o=require("../../lib/aria.cjs"),s=require("../../hooks/useFieldControl.cjs"),c=require("../../lib/styles.cjs"),l=require("../../lib/icons.cjs"),re=require("../../hooks/useFormReset.cjs"),ie=require("../internal/HiddenInput.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var ae=`forced-colors:border-[Highlight] forced-colors:bg-[Highlight]`,oe=`forced-colors:border-[GrayText] forced-colors:bg-[Canvas]`,f=`forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none`,p={medium:{box:`h-[18px] w-[18px]`,glyph:12,offset:`mt-px`},large:{box:`h-[22px] w-[22px]`,glyph:16,offset:`-mt-px`}},m={square:`rounded-xs`,circular:`rounded-full`},h=({checked:e,defaultChecked:h=!1,indeterminate:g=!1,onCheckedChange:se,onChange:_,disabled:v=!1,disabledFocusable:y=!1,label:b,labelPosition:x=`after`,size:S=`medium`,shape:C=`square`,name:ce,value:le,required:w,form:T,id:ue,"aria-label":de,"aria-labelledby":fe,"aria-describedby":pe,"aria-invalid":me,"aria-required":E,"aria-errormessage":D,"aria-details":O,"aria-disabled":k,autoFocus:A,tabIndex:j,onClick:M,onFocus:N,onBlur:P,onKeyDown:F,onKeyUp:I,controlRef:L,className:R,children:z,ref:he,...ge})=>{_!==void 0&&n.warnDeprecated(`Checkbox`,`onChange`,`onCheckedChange`);let B=r.slotRendersContent(z);u.useEffect(()=>{B&&n.warnOnce(`Checkbox:children`,"Checkbox: children are not rendered. Pass the label in `label`.")},[B]);let[V,H]=te.useControllable(e,h,e=>{se?.(e),_?.(e)}),_e=a.useId(`checkbox`),U=a.useId(`checkbox-label`),W=s.useFieldContext(),G=s.useFieldControl({id:ue,"aria-label":de,"aria-labelledby":fe,"aria-describedby":pe,"aria-invalid":me,"aria-required":E??w}),ve=w??W?.required??!1,K=r.slotRendersContent(b),ye=K&&G[`aria-label`]===void 0?o.joinIds(G[`aria-labelledby`],W&&G.id===W.controlId?W.labelId:void 0,U):G[`aria-labelledby`],q=u.useRef(null),be=ne.useMergedRefs(q,L);re.useFormReset(q,()=>H(h),T);let xe=V||g,J=Object.hasOwn(p,S)?S:`medium`,Y=Object.hasOwn(m,C)?C:`square`,X=p[J],Se=m[Y],Z=v||y,Q=Z?f:c.forcedColors.selectedLeaf,$=K?(0,d.jsx)(`span`,{id:U,className:t.cn(i.checkboxClassNames.label,`text-body-1 text-foreground`),children:r.materialiseSlotContent(b)}):null;return(0,d.jsxs)(`label`,{ref:he,"data-label-position":x,"data-size":J,"data-shape":Y,className:t.cn(i.checkboxClassNames.root,`relative inline-flex items-start gap-2 select-none`,Z?`cursor-not-allowed opacity-50 has-focus-visible:opacity-100`:`cursor-pointer`,R),...ge,children:[x===`before`&&$,(0,d.jsx)(`button`,{id:_e,type:`button`,...G,"aria-labelledby":ye,"aria-errormessage":D,"aria-details":O,"aria-disabled":k,autoFocus:A,tabIndex:j,onFocus:N,onBlur:P,onKeyDown:F,onKeyUp:I,ref:be,role:`checkbox`,"aria-checked":g?`mixed`:V,disabled:v&&!y,...o.focusableDisabledProps(y,{reachable:!0}),onClick:y?e=>{e.preventDefault(),e.stopPropagation()}:ee.composeEventHandlers(M,()=>H(e=>!e)),className:t.cn(i.checkboxClassNames.indicator,t.cn(`flex shrink-0 items-center justify-center border p-0 transition-colors motion-reduce:transition-none`,X.box,Se),K&&X.offset,c.focusRing,xe?t.cn(`border-primary bg-primary text-primary-foreground`,Z?oe:ae):t.cn(`border-stroke-accessible bg-transparent`,Z?c.forcedColors.disabled:c.forcedColors.control)),children:g?(0,d.jsx)(l.SubtractIcon,{size:X.glyph,className:Q}):V?(0,d.jsx)(l.CheckIcon,{size:X.glyph,className:Q}):null}),x!==`before`&&$,(0,d.jsx)(ie.HiddenInput,{type:`checkbox`,name:ce,form:T,disabled:Z,value:le,checked:V,required:ve,onInvalid:()=>q.current?.focus()})]})};h.displayName=`Checkbox`,exports.Checkbox=h;
 //# sourceMappingURL=Checkbox.cjs.map

package/dist/components/input/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["slotRendersContent","useControllable","useId","useFieldContext","useFieldControl","joinIds","React","useMergedRefs","forcedColors","cn","checkboxClassNames","materialiseSlotContent","focusableDisabledProps","composeEventHandlers","focusRing","SubtractIcon","CheckIcon","HiddenInput","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useControllable","require_useId","require_useMergedRefs","require_aria","require_useFieldControl","require_styles","require_icons","require_useFormReset","require_HiddenInput","react","react_jsx_runtime","checkedBox","disabledCheckedBox","disabledGlyph","Checkbox","checkedProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","ariaDisabled","rest","onChange","hasChildren","children","checked","setChecked","defaultChecked","onCheckedChange","next","generatedId","labelTextId","field","fieldProps","required","isRequired","hasLabel","label","labelledBy","buttonRef","mergedControlRef","controlRef","form","on","indeterminate","unavailable","disabled","disabledFocusable","glyphClassName","labelText","labelPosition","className","event","onClick","prev"],"sources":["../../../src/components/input/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { focusableDisabledProps, joinIds } from '../../lib/aria';\nimport { checkboxClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { CheckIcon, SubtractIcon } from '../../lib/icons';\nimport { materialiseSlotContent, slotRendersContent } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { LabelPosition } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\n\n/*\n * Forced colors: the focusable box keeps system-color utilities, so the browser still forces its\n * focus outline and border; only the glyph (the leaf indicator) opts out of forced colors. A\n * disabled box draws a GrayText glyph and border on Canvas, without the Highlight fill.\n */\nconst checkedBox = 'forced-colors:border-[Highlight] forced-colors:bg-[Highlight]';\nconst disabledCheckedBox = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\nconst disabledGlyph = 'forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** Handlers that run on the `role=\"checkbox\"` button instead of the root label (C-ROUTING). */\ntype CheckboxControlHandlers = 'onClick' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';\n\n/** Where a Checkbox renders its label: after the box (default) or before it. */\nexport type CheckboxLabelPosition = Extract<LabelPosition, 'before' | 'after'>;\n\n/** Properties for the Checkbox component. */\nexport interface CheckboxProps extends Omit<\n  React.HTMLAttributes<HTMLLabelElement>,\n  'onChange' | 'defaultChecked' | CheckboxControlHandlers\n> {\n  /** Controlled checked state. */\n  checked?: boolean;\n  /** Initial checked state for uncontrolled usage (also the value a form reset restores).\n   * @default false\n   */\n  defaultChecked?: boolean;\n  /**\n   * Shows the mixed state: the dash glyph and `aria-checked=\"mixed\"`, whatever `checked` is. A\n   * click still toggles `checked` and calls `onCheckedChange`, but the checkbox keeps showing and\n   * announcing \"mixed\" until you clear `indeterminate`. For a tri-state \"select all\", derive\n   * `checked` and `indeterminate` from the items and set every item in `onCheckedChange`.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /** Called with the new checked state when it changes (not for no-op updates). */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * Called with the new checked state when it changes.\n   * @deprecated Use `onCheckedChange`.\n   */\n  onChange?: (checked: boolean) => void;\n  /** Whether the checkbox is disabled and non-interactive. */\n  disabled?: boolean;\n  /**\n   * Marks the checkbox unavailable but keeps it focusable and in the tab order: for a disabled\n   * checkbox that needs a Tooltip, or one in a toolbar. Renders `aria-disabled=\"true\"`,\n   * `data-disabled` and `data-disabled-focusable` on the checkbox instead of the native `disabled`\n   * attribute. The checkbox cannot be toggled and is not submitted with its form; your `onClick`\n   * is not called, and a click on the checkbox (or Space and Enter) does not reach ancestor click\n   * handlers, as for a natively disabled control. Wins over `disabled` when both are set. In a\n   * roving container (a `Toolbar`) it stays in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Label next to the control (any phrasing content, links included, but no other form\n   * controls). It names the control through `aria-labelledby`, after a consumer or Field\n   * `aria-labelledby`; a consumer `aria-label` names it instead. Clicking its text toggles the\n   * control; clicking a link inside it follows the link. `children` are not rendered: pass the\n   * label here.\n   */\n  label?: React.ReactNode;\n  /**\n   * Where the label renders: after the control (default) or before it. The DOM order follows the\n   * visual order.\n   * @default 'after'\n   */\n  labelPosition?: CheckboxLabelPosition;\n  /**\n   * Form field name. With a name, the checkbox takes part in native form submission: it submits\n   * `name=value` while checked.\n   */\n  name?: string;\n  /** Value submitted while checked.\n   * @default 'on'\n   */\n  value?: string;\n  /** The form must not be submitted while the checkbox is unchecked (native validation). */\n  required?: boolean;\n  /** Id of the form the checkbox belongs to, when it is rendered outside that form. */\n  form?: string;\n  /** Click handler of the checkbox control (the `role=\"checkbox\"` button). */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Focus handler of the checkbox control. */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Blur handler of the checkbox control. */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Keydown handler of the checkbox control. */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Keyup handler of the checkbox control. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Ref to the focusable `role=\"checkbox\"` button. */\n  controlRef?: React.Ref<HTMLButtonElement>;\n  /** Ref to the root `<label>` element. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\n/**\n * A checkbox for a boolean (or mixed) choice, drawn as a `role=\"checkbox\"` button inside a\n * `<label>`.\n *\n * - The root `<label>` receives `ref`, `className`, `style` and `data-*`; the control receives\n *   `id`, `aria-label`/`-labelledby`/`-describedby`/`-invalid`/`-required`/`-errormessage`/\n *   `-details`/`-disabled`, `tabIndex`, `autoFocus` and the click, focus and key handlers\n *   (`controlRef` exposes it). A consumer `onClick` runs once per activation, before the toggle;\n *   `preventDefault()` in it cancels the toggle.\n * - Inside a `Field` it is named by the Field label (followed by its own `label` text) and described\n *   by the Field message and hint.\n * - With `name` (or `required`) it takes part in native forms like `<input type=\"checkbox\">`, and\n *   a form reset restores `defaultChecked`.\n * - `label` takes rich content (a link to the terms) and renders after the box, or before it with\n *   `labelPosition=\"before\"` (the root carries `data-label-position`). The box lines up with the\n *   first line of a label that wraps or has a second line. `children` are not rendered (a\n *   development warning says so).\n */\nexport const Checkbox = ({\n  checked: checkedProp,\n  defaultChecked = false,\n  indeterminate = false,\n  onCheckedChange,\n  onChange,\n  disabled = false,\n  disabledFocusable = false,\n  label,\n  labelPosition = 'after',\n  name,\n  value,\n  required,\n  form,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-errormessage': ariaErrorMessage,\n  'aria-details': ariaDetails,\n  'aria-disabled': ariaDisabled,\n  autoFocus,\n  tabIndex,\n  onClick,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  controlRef,\n  className,\n  children,\n  ref,\n  ...rest\n}: CheckboxProps) => {\n  if (onChange !== undefined) warnDeprecated('Checkbox', 'onChange', 'onCheckedChange');\n  const hasChildren = slotRendersContent(children);\n  React.useEffect(() => {\n    if (hasChildren) {\n      warnOnce(\n        'Checkbox:children',\n        'Checkbox: children are not rendered. Pass the label in `label`.',\n      );\n    }\n  }, [hasChildren]);\n  const [checked, setChecked] = useControllable(checkedProp, defaultChecked, (next: boolean) => {\n    onCheckedChange?.(next);\n    onChange?.(next);\n  });\n\n  const generatedId = useId('checkbox');\n  const labelTextId = useId('checkbox-label');\n  const field = useFieldContext();\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required always matches\n    // the native validation below (`isRequired`).\n    'aria-required': ariaRequired ?? required,\n  });\n  const isRequired = required ?? field?.required ?? false;\n  // `0` is a label; `null`, `false`, `''` and empty collections are not (C-SLOTS).\n  const hasLabel = slotRendersContent(label);\n  // The label text names the control through aria-labelledby, disabled or not: axe exempts the\n  // dimmed text of a disabled control only when the control references it this way (its <label>\n  // exemption covers native inputs only). A consumer aria-label still names the control alone.\n  // The ids already there (the consumer's, the Field label from useFieldControl) come first, then\n  // the Field label whose <label htmlFor> targets this control (aria-labelledby would hide it), so\n  // the name keeps every label.\n  const labelledBy =\n    hasLabel && fieldProps['aria-label'] === undefined\n      ? joinIds(\n          fieldProps['aria-labelledby'],\n          field && fieldProps.id === field.controlId ? field.labelId : undefined,\n          labelTextId,\n        )\n      : fieldProps['aria-labelledby'];\n\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const mergedControlRef = useMergedRefs(buttonRef, controlRef);\n  useFormReset(buttonRef, () => setChecked(defaultChecked), form);\n\n  const on = checked || indeterminate;\n  // Focusable-disabled wins over `disabled`: the box stays focusable but looks and acts disabled.\n  const unavailable = disabled || disabledFocusable;\n  // The glyph is the forced-colors leaf; the box stays on system colors (see `checkedBox`).\n  const glyphClassName = unavailable ? disabledGlyph : forcedColors.selectedLeaf;\n  const labelText = hasLabel ? (\n    <span id={labelTextId} className={cn(checkboxClassNames.label, 'text-body-1 text-foreground')}>\n      {materialiseSlotContent(label)}\n    </span>\n  ) : null;\n\n  return (\n    <label\n      ref={ref}\n      data-label-position={labelPosition}\n      className={cn(\n        checkboxClassNames.root,\n        // items-start: the box lines up with the first line of a label that wraps or has a second\n        // line, not with its middle.\n        'relative inline-flex items-start gap-2 select-none',\n        // The dimmed look lifts while a focus ring shows inside the root (the control's, under\n        // disabledFocusable, or a link's in the label): opacity would dim the ring below 3:1.\n        unavailable\n          ? 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100'\n          : 'cursor-pointer',\n        className,\n      )}\n      {...rest}\n    >\n      {labelPosition === 'before' && labelText}\n      <button\n        id={generatedId}\n        type=\"button\"\n        {...fieldProps}\n        aria-labelledby={labelledBy}\n        aria-errormessage={ariaErrorMessage}\n        aria-details={ariaDetails}\n        aria-disabled={ariaDisabled}\n        autoFocus={autoFocus}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        ref={mergedControlRef}\n        role=\"checkbox\"\n        aria-checked={indeterminate ? 'mixed' : checked}\n        disabled={disabled && !disabledFocusable}\n        {...focusableDisabledProps(disabledFocusable, { reachable: true })}\n        onClick={\n          disabledFocusable\n            ? // Clicks, Space and Enter (which click a button) neither toggle nor reach `onClick`,\n              // and, as a natively disabled control dispatches no click, no ancestor sees them.\n              (event: React.MouseEvent<HTMLButtonElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n              }\n            : composeEventHandlers(onClick, () => setChecked((prev) => !prev))\n        }\n        className={cn(\n          checkboxClassNames.indicator,\n          // p-0 and the unchecked bg-transparent are set here, not left to the native reset, which\n          // any app button style overrides (C-NATIVE).\n          'flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-xs border p-0 transition-colors motion-reduce:transition-none',\n          // Centred on the 20px first line of the label text.\n          hasLabel && 'mt-px',\n          focusRing,\n          on\n            ? cn(\n                'border-primary bg-primary text-primary-foreground',\n                unavailable ? disabledCheckedBox : checkedBox,\n              )\n            : cn(\n                'border-stroke-accessible bg-transparent',\n                unavailable ? forcedColors.disabled : forcedColors.control,\n              ),\n        )}\n      >\n        {indeterminate ? (\n          <SubtractIcon size={12} className={glyphClassName} />\n        ) : checked ? (\n          <CheckIcon size={12} className={glyphClassName} />\n        ) : null}\n      </button>\n      {labelPosition !== 'before' && labelText}\n      <HiddenInput\n        type=\"checkbox\"\n        name={name}\n        form={form}\n        disabled={unavailable}\n        value={value}\n        checked={checked}\n        required={isRequired}\n        onInvalid={() => buttonRef.current?.focus()}\n      />\n    </label>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.cjs","names":["slotRendersContent","useControllable","useId","useFieldContext","useFieldControl","joinIds","React","useMergedRefs","forcedColors","cn","checkboxClassNames","materialiseSlotContent","focusableDisabledProps","composeEventHandlers","focusRing","SubtractIcon","CheckIcon","HiddenInput","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useControllable","require_useId","require_useMergedRefs","require_aria","require_useFieldControl","require_styles","require_icons","require_useFormReset","require_HiddenInput","react","react_jsx_runtime","checkedBox","disabledCheckedBox","disabledGlyph","CHECKBOX_SIZE","CHECKBOX_SHAPE","Checkbox","checkedProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","ariaDisabled","rest","onChange","hasChildren","children","checked","setChecked","defaultChecked","onCheckedChange","next","generatedId","labelTextId","field","fieldProps","required","isRequired","hasLabel","label","labelledBy","buttonRef","mergedControlRef","controlRef","form","on","indeterminate","resolvedSize","size","resolvedShape","shape","sizeMetrics","shapeClass","unavailable","disabled","disabledFocusable","glyphClassName","labelText","labelPosition","className","event","onClick","prev"],"sources":["../../../src/components/input/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { focusableDisabledProps, joinIds } from '../../lib/aria';\nimport { checkboxClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { CheckIcon, SubtractIcon } from '../../lib/icons';\nimport { materialiseSlotContent, slotRendersContent } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { LabelPosition, Shape, Size } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\n\n/*\n * Forced colors: the focusable box keeps system-color utilities, so the browser still forces its\n * focus outline and border; only the glyph (the leaf indicator) opts out of forced colors. A\n * disabled box draws a GrayText glyph and border on Canvas, without the Highlight fill.\n */\nconst checkedBox = 'forced-colors:border-[Highlight] forced-colors:bg-[Highlight]';\nconst disabledCheckedBox = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\nconst disabledGlyph = 'forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** Handlers that run on the `role=\"checkbox\"` button instead of the root label (C-ROUTING). */\ntype CheckboxControlHandlers = 'onClick' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';\n\n/** Where a Checkbox renders its label: after the box (default) or before it. */\nexport type CheckboxLabelPosition = Extract<LabelPosition, 'before' | 'after'>;\n\n/** Size of the box: an 18px box (the 0.7 look) or a 22px box with a bigger glyph. */\nexport type CheckboxSize = Extract<Size, 'medium' | 'large'>;\n\n/** Shape of the box: square corners (the 0.7 look) or a circular, round box. */\nexport type CheckboxShape = Extract<Shape, 'square' | 'circular'>;\n\n/** Per-size box, glyph and label-offset classes. */\nconst CHECKBOX_SIZE: Readonly<\n  Record<CheckboxSize, { box: string; glyph: number; offset: string }>\n> = {\n  medium: { box: 'h-[18px] w-[18px]', glyph: 12, offset: 'mt-px' },\n  large: { box: 'h-[22px] w-[22px]', glyph: 16, offset: '-mt-px' },\n};\n\n/** Per-shape corner classes. */\nconst CHECKBOX_SHAPE: Readonly<Record<CheckboxShape, string>> = {\n  square: 'rounded-xs',\n  circular: 'rounded-full',\n};\n\n/** Properties for the Checkbox component. */\nexport interface CheckboxProps extends Omit<\n  React.HTMLAttributes<HTMLLabelElement>,\n  'onChange' | 'defaultChecked' | CheckboxControlHandlers\n> {\n  /** Controlled checked state. */\n  checked?: boolean;\n  /** Initial checked state for uncontrolled usage (also the value a form reset restores).\n   * @default false\n   */\n  defaultChecked?: boolean;\n  /**\n   * Shows the mixed state: the dash glyph and `aria-checked=\"mixed\"`, whatever `checked` is. A\n   * click still toggles `checked` and calls `onCheckedChange`, but the checkbox keeps showing and\n   * announcing \"mixed\" until you clear `indeterminate`. For a tri-state \"select all\", derive\n   * `checked` and `indeterminate` from the items and set every item in `onCheckedChange`.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /** Called with the new checked state when it changes (not for no-op updates). */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * Called with the new checked state when it changes.\n   * @deprecated Use `onCheckedChange`.\n   */\n  onChange?: (checked: boolean) => void;\n  /** Whether the checkbox is disabled and non-interactive. */\n  disabled?: boolean;\n  /**\n   * Marks the checkbox unavailable but keeps it focusable and in the tab order: for a disabled\n   * checkbox that needs a Tooltip, or one in a toolbar. Renders `aria-disabled=\"true\"`,\n   * `data-disabled` and `data-disabled-focusable` on the checkbox instead of the native `disabled`\n   * attribute. The checkbox cannot be toggled and is not submitted with its form; your `onClick`\n   * is not called, and a click on the checkbox (or Space and Enter) does not reach ancestor click\n   * handlers, as for a natively disabled control. Wins over `disabled` when both are set. In a\n   * roving container (a `Toolbar`) it stays in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Label next to the control (any phrasing content, links included, but no other form\n   * controls). It names the control through `aria-labelledby`, after a consumer or Field\n   * `aria-labelledby`; a consumer `aria-label` names it instead. Clicking its text toggles the\n   * control; clicking a link inside it follows the link. `children` are not rendered: pass the\n   * label here.\n   */\n  label?: React.ReactNode;\n  /**\n   * Where the label renders: after the control (default) or before it. The DOM order follows the\n   * visual order.\n   * @default 'after'\n   */\n  labelPosition?: CheckboxLabelPosition;\n  /**\n   * Size of the box: an 18px box (the 0.7 look) or a 22px box with a bigger glyph. Unlike the\n   * text controls and pickers, Checkbox does not read a surrounding Field's size or a\n   * WaveProvider's input defaults: this prop is the only source of its size.\n   * @default 'medium'\n   */\n  size?: CheckboxSize;\n  /**\n   * Shape of the box: square corners (the 0.7 look) or a circular, round box.\n   * @default 'square'\n   */\n  shape?: CheckboxShape;\n  /**\n   * Form field name. With a name, the checkbox takes part in native form submission: it submits\n   * `name=value` while checked.\n   */\n  name?: string;\n  /** Value submitted while checked.\n   * @default 'on'\n   */\n  value?: string;\n  /** The form must not be submitted while the checkbox is unchecked (native validation). */\n  required?: boolean;\n  /** Id of the form the checkbox belongs to, when it is rendered outside that form. */\n  form?: string;\n  /** Click handler of the checkbox control (the `role=\"checkbox\"` button). */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Focus handler of the checkbox control. */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Blur handler of the checkbox control. */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Keydown handler of the checkbox control. */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Keyup handler of the checkbox control. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Ref to the focusable `role=\"checkbox\"` button. */\n  controlRef?: React.Ref<HTMLButtonElement>;\n  /** Ref to the root `<label>` element. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\n/**\n * A checkbox for a boolean (or mixed) choice, drawn as a `role=\"checkbox\"` button inside a\n * `<label>`.\n *\n * - The root `<label>` receives `ref`, `className`, `style` and `data-*`; the control receives\n *   `id`, `aria-label`/`-labelledby`/`-describedby`/`-invalid`/`-required`/`-errormessage`/\n *   `-details`/`-disabled`, `tabIndex`, `autoFocus` and the click, focus and key handlers\n *   (`controlRef` exposes it). A consumer `onClick` runs once per activation, before the toggle;\n *   `preventDefault()` in it cancels the toggle.\n * - Inside a `Field` it is named by the Field label (followed by its own `label` text) and described\n *   by the Field message and hint.\n * - With `name` (or `required`) it takes part in native forms like `<input type=\"checkbox\">`, and\n *   a form reset restores `defaultChecked`.\n * - `label` takes rich content (a link to the terms) and renders after the box, or before it with\n *   `labelPosition=\"before\"` (the root carries `data-label-position`). The box lines up with the\n *   first line of a label that wraps or has a second line. `children` are not rendered (a\n *   development warning says so).\n * - `size` (`medium`, `large`) and `shape` (`square`, `circular`) set the box's dimensions and\n *   corners; the root carries `data-size` and `data-shape`. Checkbox does not read a surrounding\n *   `Field`'s size or a `WaveProvider`'s input defaults.\n */\nexport const Checkbox = ({\n  checked: checkedProp,\n  defaultChecked = false,\n  indeterminate = false,\n  onCheckedChange,\n  onChange,\n  disabled = false,\n  disabledFocusable = false,\n  label,\n  labelPosition = 'after',\n  size = 'medium',\n  shape = 'square',\n  name,\n  value,\n  required,\n  form,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-errormessage': ariaErrorMessage,\n  'aria-details': ariaDetails,\n  'aria-disabled': ariaDisabled,\n  autoFocus,\n  tabIndex,\n  onClick,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  controlRef,\n  className,\n  children,\n  ref,\n  ...rest\n}: CheckboxProps) => {\n  if (onChange !== undefined) warnDeprecated('Checkbox', 'onChange', 'onCheckedChange');\n  const hasChildren = slotRendersContent(children);\n  React.useEffect(() => {\n    if (hasChildren) {\n      warnOnce(\n        'Checkbox:children',\n        'Checkbox: children are not rendered. Pass the label in `label`.',\n      );\n    }\n  }, [hasChildren]);\n  const [checked, setChecked] = useControllable(checkedProp, defaultChecked, (next: boolean) => {\n    onCheckedChange?.(next);\n    onChange?.(next);\n  });\n\n  const generatedId = useId('checkbox');\n  const labelTextId = useId('checkbox-label');\n  const field = useFieldContext();\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required always matches\n    // the native validation below (`isRequired`).\n    'aria-required': ariaRequired ?? required,\n  });\n  const isRequired = required ?? field?.required ?? false;\n  // `0` is a label; `null`, `false`, `''` and empty collections are not (C-SLOTS).\n  const hasLabel = slotRendersContent(label);\n  // The label text names the control through aria-labelledby, disabled or not: axe exempts the\n  // dimmed text of a disabled control only when the control references it this way (its <label>\n  // exemption covers native inputs only). A consumer aria-label still names the control alone.\n  // The ids already there (the consumer's, the Field label from useFieldControl) come first, then\n  // the Field label whose <label htmlFor> targets this control (aria-labelledby would hide it), so\n  // the name keeps every label.\n  const labelledBy =\n    hasLabel && fieldProps['aria-label'] === undefined\n      ? joinIds(\n          fieldProps['aria-labelledby'],\n          field && fieldProps.id === field.controlId ? field.labelId : undefined,\n          labelTextId,\n        )\n      : fieldProps['aria-labelledby'];\n\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const mergedControlRef = useMergedRefs(buttonRef, controlRef);\n  useFormReset(buttonRef, () => setChecked(defaultChecked), form);\n\n  const on = checked || indeterminate;\n  // A size or shape outside the unions (from untyped code) renders, and is reported in the data\n  // attributes, as the default: TypeScript rejects one, but the value still reaches this render.\n  const resolvedSize: CheckboxSize = Object.hasOwn(CHECKBOX_SIZE, size) ? size : 'medium';\n  const resolvedShape: CheckboxShape = Object.hasOwn(CHECKBOX_SHAPE, shape) ? shape : 'square';\n  const sizeMetrics = CHECKBOX_SIZE[resolvedSize];\n  const shapeClass = CHECKBOX_SHAPE[resolvedShape];\n  // Focusable-disabled wins over `disabled`: the box stays focusable but looks and acts disabled.\n  const unavailable = disabled || disabledFocusable;\n  // The glyph is the forced-colors leaf; the box stays on system colors (see `checkedBox`).\n  const glyphClassName = unavailable ? disabledGlyph : forcedColors.selectedLeaf;\n  const labelText = hasLabel ? (\n    <span id={labelTextId} className={cn(checkboxClassNames.label, 'text-body-1 text-foreground')}>\n      {materialiseSlotContent(label)}\n    </span>\n  ) : null;\n\n  return (\n    <label\n      ref={ref}\n      data-label-position={labelPosition}\n      data-size={resolvedSize}\n      data-shape={resolvedShape}\n      className={cn(\n        checkboxClassNames.root,\n        // items-start: the box lines up with the first line of a label that wraps or has a second\n        // line, not with its middle.\n        'relative inline-flex items-start gap-2 select-none',\n        // The dimmed look lifts while a focus ring shows inside the root (the control's, under\n        // disabledFocusable, or a link's in the label): opacity would dim the ring below 3:1.\n        unavailable\n          ? 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100'\n          : 'cursor-pointer',\n        className,\n      )}\n      {...rest}\n    >\n      {labelPosition === 'before' && labelText}\n      <button\n        id={generatedId}\n        type=\"button\"\n        {...fieldProps}\n        aria-labelledby={labelledBy}\n        aria-errormessage={ariaErrorMessage}\n        aria-details={ariaDetails}\n        aria-disabled={ariaDisabled}\n        autoFocus={autoFocus}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        ref={mergedControlRef}\n        role=\"checkbox\"\n        aria-checked={indeterminate ? 'mixed' : checked}\n        disabled={disabled && !disabledFocusable}\n        {...focusableDisabledProps(disabledFocusable, { reachable: true })}\n        onClick={\n          disabledFocusable\n            ? // Clicks, Space and Enter (which click a button) neither toggle nor reach `onClick`,\n              // and, as a natively disabled control dispatches no click, no ancestor sees them.\n              (event: React.MouseEvent<HTMLButtonElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n              }\n            : composeEventHandlers(onClick, () => setChecked((prev) => !prev))\n        }\n        className={cn(\n          checkboxClassNames.indicator,\n          // p-0 and the unchecked bg-transparent are set here, not left to the native reset, which\n          // any app button style overrides (C-NATIVE).\n          cn(\n            'flex shrink-0 items-center justify-center border p-0 transition-colors motion-reduce:transition-none',\n            sizeMetrics.box,\n            shapeClass,\n          ),\n          // Centred on the label's 20px first line: nudged down at medium, up at large.\n          hasLabel && sizeMetrics.offset,\n          focusRing,\n          on\n            ? cn(\n                'border-primary bg-primary text-primary-foreground',\n                unavailable ? disabledCheckedBox : checkedBox,\n              )\n            : cn(\n                'border-stroke-accessible bg-transparent',\n                unavailable ? forcedColors.disabled : forcedColors.control,\n              ),\n        )}\n      >\n        {indeterminate ? (\n          <SubtractIcon size={sizeMetrics.glyph} className={glyphClassName} />\n        ) : checked ? (\n          <CheckIcon size={sizeMetrics.glyph} className={glyphClassName} />\n        ) : null}\n      </button>\n      {labelPosition !== 'before' && labelText}\n      <HiddenInput\n        type=\"checkbox\"\n        name={name}\n        form={form}\n        disabled={unavailable}\n        value={value}\n        checked={checked}\n        required={isRequired}\n        onInvalid={() => buttonRef.current?.focus()}\n      />\n    </label>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n"],"mappings":"sqBAsBA,IAAMmC,GAAa,gEACbC,GAAqB,4DACrBC,EAAgB,uEAehBC,EAEF,CACF,OAAQ,CAAE,IAAK,oBAAqB,MAAO,GAAI,OAAQ,OAAQ,EAC/D,MAAO,CAAE,IAAK,oBAAqB,MAAO,GAAI,OAAQ,QAAS,CACjE,EAGMC,EAA0D,CAC9D,OAAQ,aACR,SAAU,cACZ,EAqHaC,GAAY,CACvB,QAASC,EACT,iBAAiB,GACjB,gBAAgB,GAChB,mBACA,WACA,WAAW,GACX,oBAAoB,GACpB,QACA,gBAAgB,QAChB,OAAO,SACP,QAAQ,SACR,QACA,SACA,WACA,OACA,MACA,aAAcC,GACd,kBAAmBC,GACnB,mBAAoBC,GACpB,eAAgBC,GAChB,gBAAiBC,EACjB,oBAAqBC,EACrB,eAAgBC,EAChB,gBAAiBC,EACjB,YACA,WACA,UACA,UACA,SACA,YACA,UACA,aACA,YACA,WACA,OACA,GAAGC,MACgB,CACfC,IAAa,IAAA,IAAW/B,EAAA,eAAe,WAAY,WAAY,iBAAiB,EACpF,IAAMgC,EAAcpD,EAAAA,mBAAmBqD,CAAQ,EAC/CpB,EAAM,cAAgB,CAChBmB,GACFhC,EAAA,SACE,oBACA,iEACF,CAEJ,EAAG,CAACgC,CAAW,CAAC,EAChB,GAAM,CAACE,EAASC,GAActD,GAAAA,gBAAgBwC,EAAae,EAAiB,GAAkB,CAC5FC,KAAkBC,CAAI,EACtBP,IAAWO,CAAI,CACjB,CAAC,EAEKC,GAAczD,EAAAA,MAAM,UAAU,EAC9B0D,EAAc1D,EAAAA,MAAM,gBAAgB,EACpC2D,EAAQ1D,EAAAA,gBAAgB,EACxB2D,EAAa1D,EAAAA,gBAAgB,CACjC,MACA,aAAcsC,GACd,kBAAmBC,GACnB,mBAAoBC,GACpB,eAAgBC,GAGhB,gBAAiBC,GAAgBiB,CACnC,CAAC,EACKC,GAAaD,GAAYF,GAAO,UAAY,GAE5CI,EAAWjE,EAAAA,mBAAmBkE,CAAK,EAOnCC,GACJF,GAAYH,EAAW,gBAAkB,IAAA,GACrCzD,EAAAA,QACEyD,EAAW,mBACXD,GAASC,EAAW,KAAOD,EAAM,UAAYA,EAAM,QAAU,IAAA,GAC7DD,CACF,EACAE,EAAW,mBAEXM,EAAY9D,EAAM,OAA0B,IAAI,EAChD+D,GAAmB9D,GAAAA,cAAc6D,EAAWE,CAAU,EAC5DvC,GAAA,aAAaqC,MAAiBb,EAAWC,CAAc,EAAGe,CAAI,EAE9D,IAAMC,GAAKlB,GAAWmB,EAGhBC,EAA6B,OAAO,OAAOpC,EAAeqC,CAAI,EAAIA,EAAO,SACzEC,EAA+B,OAAO,OAAOrC,EAAgBsC,CAAK,EAAIA,EAAQ,SAC9EC,EAAcxC,EAAcoC,GAC5BK,GAAaxC,EAAeqC,GAE5BI,EAAcC,GAAYC,EAE1BC,EAAiBH,EAAc3C,EAAgB7B,EAAAA,aAAa,aAC5D4E,EAAYnB,GAChB,EAAA/B,EAAA,IAAA,CAAC,OAAD,CAAM,GAAI0B,EAAa,UAAWnD,EAAAA,GAAGC,EAAAA,mBAAmB,MAAO,6BAA6B,EACzF,SAAAC,EAAAA,uBAAuBuD,CAAK,CACzB,CAAA,EACJ,KAEJ,OACE,EAAAhC,EAAA,KAAA,CAAC,QAAD,CACO,OACL,sBAAqBmD,EACrB,YAAWX,EACX,aAAYE,EACZ,UAAWnE,EAAAA,GACTC,EAAAA,mBAAmB,KAGnB,qDAGAsE,EACI,8DACA,iBACJM,CACF,EACA,GAAIpC,GAjBN,SAAA,CAmBGmC,IAAkB,UAAYD,GAC/B,EAAAlD,EAAA,IAAA,CAAC,SAAD,CACE,GAAIyB,GACJ,KAAK,SACL,GAAIG,EACJ,kBAAiBK,GACjB,oBAAmBpB,EACnB,eAAcC,EACd,gBAAeC,EACJ,YACD,WACD,UACD,SACG,YACF,UACT,IAAKoB,GACL,KAAK,WACL,eAAcI,EAAgB,QAAUnB,EACxC,SAAU2B,GAAY,CAACC,EACvB,GAAItE,EAAAA,uBAAuBsE,EAAmB,CAAE,UAAW,EAAK,CAAC,EACjE,QACEA,EAGK,GAA+C,CAC9CK,EAAM,eAAe,EACrBA,EAAM,gBAAgB,CACxB,EACA1E,GAAAA,qBAAqB2E,MAAejC,EAAY,GAAS,CAACkC,CAAI,CAAC,EAErE,UAAWhF,EAAAA,GACTC,EAAAA,mBAAmB,UAGnBD,EAAAA,GACE,uGACAqE,EAAY,IACZC,EACF,EAEAd,GAAYa,EAAY,OACxBhE,EAAAA,UACA0D,GACI/D,EAAAA,GACE,oDACAuE,EAAc5C,GAAqBD,EACrC,EACA1B,EAAAA,GACE,0CACAuE,EAAcxE,EAAAA,aAAa,SAAWA,EAAAA,aAAa,OACrD,CACN,EAEC,SAAAiE,GACC,EAAAvC,EAAA,IAAA,CAACnB,EAAAA,aAAD,CAAc,KAAM+D,EAAY,MAAO,UAAWK,CAAiB,CAAA,EACjE7B,GACF,EAAApB,EAAA,IAAA,CAAClB,EAAAA,UAAD,CAAW,KAAM8D,EAAY,MAAO,UAAWK,CAAiB,CAAA,EAC9D,IACE,CAAA,EACPE,IAAkB,UAAYD,GAC/B,EAAAlD,EAAA,IAAA,CAACjB,GAAAA,YAAD,CACE,KAAK,WACC,QACA,OACN,SAAU+D,EACH,SACE,UACT,SAAUhB,GACV,cAAiBI,EAAU,SAAS,MAAM,CAC3C,CAAA,CACI,GAEX,EAEA,EAAS,YAAc"}

package/dist/components/input/Checkbox.mjs

@@ -1,97 +1,113 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
 import { warnDeprecated as t, warnOnce as ee } from "../../lib/dev.mjs";
-import { materialiseSlotContent as te, slotRendersContent as n } from "../../lib/slot.mjs";
-import { composeEventHandlers as r } from "../../lib/composeEventHandlers.mjs";
-import { checkboxClassNames as i } from "../../lib/classNames.mjs";
-import { useControllable as ne } from "../../hooks/useControllable.mjs";
-import { useId as a } from "../../hooks/useId.mjs";
-import { useMergedRefs as re } from "../../hooks/useMergedRefs.mjs";
-import { focusableDisabledProps as ie, joinIds as o } from "../../lib/aria.mjs";
-import { useFieldContext as s, useFieldControl as c } from "../../hooks/useFieldControl.mjs";
-import { focusRing as l, forcedColors as u } from "../../lib/styles.mjs";
-import { CheckIcon as d, SubtractIcon as f } from "../../lib/icons.mjs";
-import { useFormReset as ae } from "../../hooks/useFormReset.mjs";
-import { HiddenInput as oe } from "../internal/HiddenInput.mjs";
-import * as p from "react";
-import { jsx as m, jsxs as se } from "react/jsx-runtime";
+import { materialiseSlotContent as n, slotRendersContent as r } from "../../lib/slot.mjs";
+import { composeEventHandlers as i } from "../../lib/composeEventHandlers.mjs";
+import { checkboxClassNames as a } from "../../lib/classNames.mjs";
+import { useControllable as te } from "../../hooks/useControllable.mjs";
+import { useId as o } from "../../hooks/useId.mjs";
+import { useMergedRefs as ne } from "../../hooks/useMergedRefs.mjs";
+import { focusableDisabledProps as re, joinIds as ie } from "../../lib/aria.mjs";
+import { useFieldContext as ae, useFieldControl as oe } from "../../hooks/useFieldControl.mjs";
+import { focusRing as se, forcedColors as s } from "../../lib/styles.mjs";
+import { CheckIcon as ce, SubtractIcon as le } from "../../lib/icons.mjs";
+import { useFormReset as c } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as l } from "../internal/HiddenInput.mjs";
+import * as u from "react";
+import { jsx as d, jsxs as ue } from "react/jsx-runtime";
 //#region src/components/input/Checkbox.tsx
-var ce = "forced-colors:border-[Highlight] forced-colors:bg-[Highlight]", le = "forced-colors:border-[GrayText] forced-colors:bg-[Canvas]", ue = "forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none", h = ({ checked: h, defaultChecked: g = !1, indeterminate: _ = !1, onCheckedChange: de, onChange: v, disabled: y = !1, disabledFocusable: b = !1, label: x, labelPosition: S = "after", name: C, value: w, required: T, form: E, id: D, "aria-label": O, "aria-labelledby": k, "aria-describedby": A, "aria-invalid": j, "aria-required": M, "aria-errormessage": N, "aria-details": P, "aria-disabled": F, autoFocus: I, tabIndex: fe, onClick: L, onFocus: R, onBlur: z, onKeyDown: B, onKeyUp: V, controlRef: pe, className: me, children: he, ref: ge, ..._e }) => {
-	v !== void 0 && t("Checkbox", "onChange", "onCheckedChange");
-	let H = n(he);
-	p.useEffect(() => {
-		H && ee("Checkbox:children", "Checkbox: children are not rendered. Pass the label in `label`.");
-	}, [H]);
-	let [U, W] = ne(h, g, (e) => {
-		de?.(e), v?.(e);
-	}), ve = a("checkbox"), G = a("checkbox-label"), K = s(), q = c({
-		id: D,
-		"aria-label": O,
-		"aria-labelledby": k,
-		"aria-describedby": A,
-		"aria-invalid": j,
-		"aria-required": M ?? T
-	}), J = T ?? K?.required ?? !1, Y = n(x), ye = Y && q["aria-label"] === void 0 ? o(q["aria-labelledby"], K && q.id === K.controlId ? K.labelId : void 0, G) : q["aria-labelledby"], X = p.useRef(null), be = re(X, pe);
-	ae(X, () => W(g), E);
-	let xe = U || _, Z = y || b, Q = Z ? ue : u.selectedLeaf, $ = Y ? /* @__PURE__ */ m("span", {
-		id: G,
-		className: e(i.label, "text-body-1 text-foreground"),
-		children: te(x)
+var de = "forced-colors:border-[Highlight] forced-colors:bg-[Highlight]", fe = "forced-colors:border-[GrayText] forced-colors:bg-[Canvas]", pe = "forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none", f = {
+	medium: {
+		box: "h-[18px] w-[18px]",
+		glyph: 12,
+		offset: "mt-px"
+	},
+	large: {
+		box: "h-[22px] w-[22px]",
+		glyph: 16,
+		offset: "-mt-px"
+	}
+}, p = {
+	square: "rounded-xs",
+	circular: "rounded-full"
+}, m = ({ checked: m, defaultChecked: h = !1, indeterminate: g = !1, onCheckedChange: me, onChange: _, disabled: v = !1, disabledFocusable: y = !1, label: b, labelPosition: x = "after", size: S = "medium", shape: C = "square", name: w, value: T, required: E, form: D, id: O, "aria-label": k, "aria-labelledby": A, "aria-describedby": j, "aria-invalid": M, "aria-required": N, "aria-errormessage": P, "aria-details": F, "aria-disabled": I, autoFocus: L, tabIndex: R, onClick: z, onFocus: he, onBlur: ge, onKeyDown: _e, onKeyUp: ve, controlRef: ye, className: be, children: xe, ref: Se, ...Ce }) => {
+	_ !== void 0 && t("Checkbox", "onChange", "onCheckedChange");
+	let B = r(xe);
+	u.useEffect(() => {
+		B && ee("Checkbox:children", "Checkbox: children are not rendered. Pass the label in `label`.");
+	}, [B]);
+	let [V, H] = te(m, h, (e) => {
+		me?.(e), _?.(e);
+	}), we = o("checkbox"), U = o("checkbox-label"), W = ae(), G = oe({
+		id: O,
+		"aria-label": k,
+		"aria-labelledby": A,
+		"aria-describedby": j,
+		"aria-invalid": M,
+		"aria-required": N ?? E
+	}), Te = E ?? W?.required ?? !1, K = r(b), Ee = K && G["aria-label"] === void 0 ? ie(G["aria-labelledby"], W && G.id === W.controlId ? W.labelId : void 0, U) : G["aria-labelledby"], q = u.useRef(null), De = ne(q, ye);
+	c(q, () => H(h), D);
+	let Oe = V || g, J = Object.hasOwn(f, S) ? S : "medium", Y = Object.hasOwn(p, C) ? C : "square", X = f[J], ke = p[Y], Z = v || y, Q = Z ? pe : s.selectedLeaf, $ = K ? /* @__PURE__ */ d("span", {
+		id: U,
+		className: e(a.label, "text-body-1 text-foreground"),
+		children: n(b)
 	}) : null;
-	return /* @__PURE__ */ se("label", {
-		ref: ge,
-		"data-label-position": S,
-		className: e(i.root, "relative inline-flex items-start gap-2 select-none", Z ? "cursor-not-allowed opacity-50 has-focus-visible:opacity-100" : "cursor-pointer", me),
-		..._e,
+	return /* @__PURE__ */ ue("label", {
+		ref: Se,
+		"data-label-position": x,
+		"data-size": J,
+		"data-shape": Y,
+		className: e(a.root, "relative inline-flex items-start gap-2 select-none", Z ? "cursor-not-allowed opacity-50 has-focus-visible:opacity-100" : "cursor-pointer", be),
+		...Ce,
 		children: [
-			S === "before" && $,
-			/* @__PURE__ */ m("button", {
-				id: ve,
+			x === "before" && $,
+			/* @__PURE__ */ d("button", {
+				id: we,
 				type: "button",
-				...q,
-				"aria-labelledby": ye,
-				"aria-errormessage": N,
-				"aria-details": P,
-				"aria-disabled": F,
-				autoFocus: I,
-				tabIndex: fe,
-				onFocus: R,
-				onBlur: z,
-				onKeyDown: B,
-				onKeyUp: V,
-				ref: be,
+				...G,
+				"aria-labelledby": Ee,
+				"aria-errormessage": P,
+				"aria-details": F,
+				"aria-disabled": I,
+				autoFocus: L,
+				tabIndex: R,
+				onFocus: he,
+				onBlur: ge,
+				onKeyDown: _e,
+				onKeyUp: ve,
+				ref: De,
 				role: "checkbox",
-				"aria-checked": _ ? "mixed" : U,
-				disabled: y && !b,
-				...ie(b, { reachable: !0 }),
-				onClick: b ? (e) => {
+				"aria-checked": g ? "mixed" : V,
+				disabled: v && !y,
+				...re(y, { reachable: !0 }),
+				onClick: y ? (e) => {
 					e.preventDefault(), e.stopPropagation();
-				} : r(L, () => W((e) => !e)),
-				className: e(i.indicator, "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-xs border p-0 transition-colors motion-reduce:transition-none", Y && "mt-px", l, xe ? e("border-primary bg-primary text-primary-foreground", Z ? le : ce) : e("border-stroke-accessible bg-transparent", Z ? u.disabled : u.control)),
-				children: _ ? /* @__PURE__ */ m(f, {
-					size: 12,
+				} : i(z, () => H((e) => !e)),
+				className: e(a.indicator, e("flex shrink-0 items-center justify-center border p-0 transition-colors motion-reduce:transition-none", X.box, ke), K && X.offset, se, Oe ? e("border-primary bg-primary text-primary-foreground", Z ? fe : de) : e("border-stroke-accessible bg-transparent", Z ? s.disabled : s.control)),
+				children: g ? /* @__PURE__ */ d(le, {
+					size: X.glyph,
 					className: Q
-				}) : U ? /* @__PURE__ */ m(d, {
-					size: 12,
+				}) : V ? /* @__PURE__ */ d(ce, {
+					size: X.glyph,
 					className: Q
 				}) : null
 			}),
-			S !== "before" && $,
-			/* @__PURE__ */ m(oe, {
+			x !== "before" && $,
+			/* @__PURE__ */ d(l, {
 				type: "checkbox",
-				name: C,
-				form: E,
+				name: w,
+				form: D,
 				disabled: Z,
-				value: w,
-				checked: U,
-				required: J,
-				onInvalid: () => X.current?.focus()
+				value: T,
+				checked: V,
+				required: Te,
+				onInvalid: () => q.current?.focus()
 			})
 		]
 	});
 };
-h.displayName = "Checkbox";
+m.displayName = "Checkbox";
 //#endregion
-export { h as Checkbox };
+export { m as Checkbox };
 
 //# sourceMappingURL=Checkbox.mjs.map

package/dist/components/input/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["useId","useId$1","React","checkedBox","disabledCheckedBox","disabledGlyph","Checkbox","checkedProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","ariaDisabled","rest","onChange","warnDeprecated","hasChildren","slotRendersContent","children","warnOnce","checked","setChecked","useControllable","defaultChecked","onCheckedChange","next","generatedId","labelTextId","field","useFieldContext","fieldProps","useFieldControl","required","isRequired","hasLabel","label","labelledBy","joinIds","buttonRef","mergedControlRef","useMergedRefs","controlRef","form","on","indeterminate","unavailable","disabled","disabledFocusable","glyphClassName","forcedColors","labelText","cn","checkboxClassNames","materialiseSlotContent","labelPosition","className","focusableDisabledProps","event","composeEventHandlers","onClick","prev","focusRing","SubtractIcon","CheckIcon","HiddenInput"],"sources":["../../../src/components/input/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { focusableDisabledProps, joinIds } from '../../lib/aria';\nimport { checkboxClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { CheckIcon, SubtractIcon } from '../../lib/icons';\nimport { materialiseSlotContent, slotRendersContent } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { LabelPosition } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\n\n/*\n * Forced colors: the focusable box keeps system-color utilities, so the browser still forces its\n * focus outline and border; only the glyph (the leaf indicator) opts out of forced colors. A\n * disabled box draws a GrayText glyph and border on Canvas, without the Highlight fill.\n */\nconst checkedBox = 'forced-colors:border-[Highlight] forced-colors:bg-[Highlight]';\nconst disabledCheckedBox = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\nconst disabledGlyph = 'forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** Handlers that run on the `role=\"checkbox\"` button instead of the root label (C-ROUTING). */\ntype CheckboxControlHandlers = 'onClick' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';\n\n/** Where a Checkbox renders its label: after the box (default) or before it. */\nexport type CheckboxLabelPosition = Extract<LabelPosition, 'before' | 'after'>;\n\n/** Properties for the Checkbox component. */\nexport interface CheckboxProps extends Omit<\n  React.HTMLAttributes<HTMLLabelElement>,\n  'onChange' | 'defaultChecked' | CheckboxControlHandlers\n> {\n  /** Controlled checked state. */\n  checked?: boolean;\n  /** Initial checked state for uncontrolled usage (also the value a form reset restores).\n   * @default false\n   */\n  defaultChecked?: boolean;\n  /**\n   * Shows the mixed state: the dash glyph and `aria-checked=\"mixed\"`, whatever `checked` is. A\n   * click still toggles `checked` and calls `onCheckedChange`, but the checkbox keeps showing and\n   * announcing \"mixed\" until you clear `indeterminate`. For a tri-state \"select all\", derive\n   * `checked` and `indeterminate` from the items and set every item in `onCheckedChange`.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /** Called with the new checked state when it changes (not for no-op updates). */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * Called with the new checked state when it changes.\n   * @deprecated Use `onCheckedChange`.\n   */\n  onChange?: (checked: boolean) => void;\n  /** Whether the checkbox is disabled and non-interactive. */\n  disabled?: boolean;\n  /**\n   * Marks the checkbox unavailable but keeps it focusable and in the tab order: for a disabled\n   * checkbox that needs a Tooltip, or one in a toolbar. Renders `aria-disabled=\"true\"`,\n   * `data-disabled` and `data-disabled-focusable` on the checkbox instead of the native `disabled`\n   * attribute. The checkbox cannot be toggled and is not submitted with its form; your `onClick`\n   * is not called, and a click on the checkbox (or Space and Enter) does not reach ancestor click\n   * handlers, as for a natively disabled control. Wins over `disabled` when both are set. In a\n   * roving container (a `Toolbar`) it stays in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Label next to the control (any phrasing content, links included, but no other form\n   * controls). It names the control through `aria-labelledby`, after a consumer or Field\n   * `aria-labelledby`; a consumer `aria-label` names it instead. Clicking its text toggles the\n   * control; clicking a link inside it follows the link. `children` are not rendered: pass the\n   * label here.\n   */\n  label?: React.ReactNode;\n  /**\n   * Where the label renders: after the control (default) or before it. The DOM order follows the\n   * visual order.\n   * @default 'after'\n   */\n  labelPosition?: CheckboxLabelPosition;\n  /**\n   * Form field name. With a name, the checkbox takes part in native form submission: it submits\n   * `name=value` while checked.\n   */\n  name?: string;\n  /** Value submitted while checked.\n   * @default 'on'\n   */\n  value?: string;\n  /** The form must not be submitted while the checkbox is unchecked (native validation). */\n  required?: boolean;\n  /** Id of the form the checkbox belongs to, when it is rendered outside that form. */\n  form?: string;\n  /** Click handler of the checkbox control (the `role=\"checkbox\"` button). */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Focus handler of the checkbox control. */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Blur handler of the checkbox control. */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Keydown handler of the checkbox control. */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Keyup handler of the checkbox control. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Ref to the focusable `role=\"checkbox\"` button. */\n  controlRef?: React.Ref<HTMLButtonElement>;\n  /** Ref to the root `<label>` element. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\n/**\n * A checkbox for a boolean (or mixed) choice, drawn as a `role=\"checkbox\"` button inside a\n * `<label>`.\n *\n * - The root `<label>` receives `ref`, `className`, `style` and `data-*`; the control receives\n *   `id`, `aria-label`/`-labelledby`/`-describedby`/`-invalid`/`-required`/`-errormessage`/\n *   `-details`/`-disabled`, `tabIndex`, `autoFocus` and the click, focus and key handlers\n *   (`controlRef` exposes it). A consumer `onClick` runs once per activation, before the toggle;\n *   `preventDefault()` in it cancels the toggle.\n * - Inside a `Field` it is named by the Field label (followed by its own `label` text) and described\n *   by the Field message and hint.\n * - With `name` (or `required`) it takes part in native forms like `<input type=\"checkbox\">`, and\n *   a form reset restores `defaultChecked`.\n * - `label` takes rich content (a link to the terms) and renders after the box, or before it with\n *   `labelPosition=\"before\"` (the root carries `data-label-position`). The box lines up with the\n *   first line of a label that wraps or has a second line. `children` are not rendered (a\n *   development warning says so).\n */\nexport const Checkbox = ({\n  checked: checkedProp,\n  defaultChecked = false,\n  indeterminate = false,\n  onCheckedChange,\n  onChange,\n  disabled = false,\n  disabledFocusable = false,\n  label,\n  labelPosition = 'after',\n  name,\n  value,\n  required,\n  form,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-errormessage': ariaErrorMessage,\n  'aria-details': ariaDetails,\n  'aria-disabled': ariaDisabled,\n  autoFocus,\n  tabIndex,\n  onClick,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  controlRef,\n  className,\n  children,\n  ref,\n  ...rest\n}: CheckboxProps) => {\n  if (onChange !== undefined) warnDeprecated('Checkbox', 'onChange', 'onCheckedChange');\n  const hasChildren = slotRendersContent(children);\n  React.useEffect(() => {\n    if (hasChildren) {\n      warnOnce(\n        'Checkbox:children',\n        'Checkbox: children are not rendered. Pass the label in `label`.',\n      );\n    }\n  }, [hasChildren]);\n  const [checked, setChecked] = useControllable(checkedProp, defaultChecked, (next: boolean) => {\n    onCheckedChange?.(next);\n    onChange?.(next);\n  });\n\n  const generatedId = useId('checkbox');\n  const labelTextId = useId('checkbox-label');\n  const field = useFieldContext();\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required always matches\n    // the native validation below (`isRequired`).\n    'aria-required': ariaRequired ?? required,\n  });\n  const isRequired = required ?? field?.required ?? false;\n  // `0` is a label; `null`, `false`, `''` and empty collections are not (C-SLOTS).\n  const hasLabel = slotRendersContent(label);\n  // The label text names the control through aria-labelledby, disabled or not: axe exempts the\n  // dimmed text of a disabled control only when the control references it this way (its <label>\n  // exemption covers native inputs only). A consumer aria-label still names the control alone.\n  // The ids already there (the consumer's, the Field label from useFieldControl) come first, then\n  // the Field label whose <label htmlFor> targets this control (aria-labelledby would hide it), so\n  // the name keeps every label.\n  const labelledBy =\n    hasLabel && fieldProps['aria-label'] === undefined\n      ? joinIds(\n          fieldProps['aria-labelledby'],\n          field && fieldProps.id === field.controlId ? field.labelId : undefined,\n          labelTextId,\n        )\n      : fieldProps['aria-labelledby'];\n\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const mergedControlRef = useMergedRefs(buttonRef, controlRef);\n  useFormReset(buttonRef, () => setChecked(defaultChecked), form);\n\n  const on = checked || indeterminate;\n  // Focusable-disabled wins over `disabled`: the box stays focusable but looks and acts disabled.\n  const unavailable = disabled || disabledFocusable;\n  // The glyph is the forced-colors leaf; the box stays on system colors (see `checkedBox`).\n  const glyphClassName = unavailable ? disabledGlyph : forcedColors.selectedLeaf;\n  const labelText = hasLabel ? (\n    <span id={labelTextId} className={cn(checkboxClassNames.label, 'text-body-1 text-foreground')}>\n      {materialiseSlotContent(label)}\n    </span>\n  ) : null;\n\n  return (\n    <label\n      ref={ref}\n      data-label-position={labelPosition}\n      className={cn(\n        checkboxClassNames.root,\n        // items-start: the box lines up with the first line of a label that wraps or has a second\n        // line, not with its middle.\n        'relative inline-flex items-start gap-2 select-none',\n        // The dimmed look lifts while a focus ring shows inside the root (the control's, under\n        // disabledFocusable, or a link's in the label): opacity would dim the ring below 3:1.\n        unavailable\n          ? 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100'\n          : 'cursor-pointer',\n        className,\n      )}\n      {...rest}\n    >\n      {labelPosition === 'before' && labelText}\n      <button\n        id={generatedId}\n        type=\"button\"\n        {...fieldProps}\n        aria-labelledby={labelledBy}\n        aria-errormessage={ariaErrorMessage}\n        aria-details={ariaDetails}\n        aria-disabled={ariaDisabled}\n        autoFocus={autoFocus}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        ref={mergedControlRef}\n        role=\"checkbox\"\n        aria-checked={indeterminate ? 'mixed' : checked}\n        disabled={disabled && !disabledFocusable}\n        {...focusableDisabledProps(disabledFocusable, { reachable: true })}\n        onClick={\n          disabledFocusable\n            ? // Clicks, Space and Enter (which click a button) neither toggle nor reach `onClick`,\n              // and, as a natively disabled control dispatches no click, no ancestor sees them.\n              (event: React.MouseEvent<HTMLButtonElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n              }\n            : composeEventHandlers(onClick, () => setChecked((prev) => !prev))\n        }\n        className={cn(\n          checkboxClassNames.indicator,\n          // p-0 and the unchecked bg-transparent are set here, not left to the native reset, which\n          // any app button style overrides (C-NATIVE).\n          'flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-xs border p-0 transition-colors motion-reduce:transition-none',\n          // Centred on the 20px first line of the label text.\n          hasLabel && 'mt-px',\n          focusRing,\n          on\n            ? cn(\n                'border-primary bg-primary text-primary-foreground',\n                unavailable ? disabledCheckedBox : checkedBox,\n              )\n            : cn(\n                'border-stroke-accessible bg-transparent',\n                unavailable ? forcedColors.disabled : forcedColors.control,\n              ),\n        )}\n      >\n        {indeterminate ? (\n          <SubtractIcon size={12} className={glyphClassName} />\n        ) : checked ? (\n          <CheckIcon size={12} className={glyphClassName} />\n        ) : null}\n      </button>\n      {labelPosition !== 'before' && labelText}\n      <HiddenInput\n        type=\"checkbox\"\n        name={name}\n        form={form}\n        disabled={unavailable}\n        value={value}\n        checked={checked}\n        required={isRequired}\n        onInvalid={() => buttonRef.current?.focus()}\n      />\n    </label>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.mjs","names":["useId","useId$1","React","checkedBox","disabledCheckedBox","disabledGlyph","CHECKBOX_SIZE","CHECKBOX_SHAPE","Checkbox","checkedProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","ariaErrorMessage","ariaDetails","ariaDisabled","rest","onChange","warnDeprecated","hasChildren","slotRendersContent","children","warnOnce","checked","setChecked","useControllable","defaultChecked","onCheckedChange","next","generatedId","labelTextId","field","useFieldContext","fieldProps","useFieldControl","required","isRequired","hasLabel","label","labelledBy","joinIds","buttonRef","mergedControlRef","useMergedRefs","controlRef","form","on","indeterminate","resolvedSize","size","resolvedShape","shape","sizeMetrics","shapeClass","unavailable","disabled","disabledFocusable","glyphClassName","forcedColors","labelText","cn","checkboxClassNames","materialiseSlotContent","labelPosition","className","focusableDisabledProps","event","composeEventHandlers","onClick","prev","focusRing","SubtractIcon","CheckIcon","HiddenInput"],"sources":["../../../src/components/input/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { focusableDisabledProps, joinIds } from '../../lib/aria';\nimport { checkboxClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { CheckIcon, SubtractIcon } from '../../lib/icons';\nimport { materialiseSlotContent, slotRendersContent } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { LabelPosition, Shape, Size } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\n\n/*\n * Forced colors: the focusable box keeps system-color utilities, so the browser still forces its\n * focus outline and border; only the glyph (the leaf indicator) opts out of forced colors. A\n * disabled box draws a GrayText glyph and border on Canvas, without the Highlight fill.\n */\nconst checkedBox = 'forced-colors:border-[Highlight] forced-colors:bg-[Highlight]';\nconst disabledCheckedBox = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\nconst disabledGlyph = 'forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** Handlers that run on the `role=\"checkbox\"` button instead of the root label (C-ROUTING). */\ntype CheckboxControlHandlers = 'onClick' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp';\n\n/** Where a Checkbox renders its label: after the box (default) or before it. */\nexport type CheckboxLabelPosition = Extract<LabelPosition, 'before' | 'after'>;\n\n/** Size of the box: an 18px box (the 0.7 look) or a 22px box with a bigger glyph. */\nexport type CheckboxSize = Extract<Size, 'medium' | 'large'>;\n\n/** Shape of the box: square corners (the 0.7 look) or a circular, round box. */\nexport type CheckboxShape = Extract<Shape, 'square' | 'circular'>;\n\n/** Per-size box, glyph and label-offset classes. */\nconst CHECKBOX_SIZE: Readonly<\n  Record<CheckboxSize, { box: string; glyph: number; offset: string }>\n> = {\n  medium: { box: 'h-[18px] w-[18px]', glyph: 12, offset: 'mt-px' },\n  large: { box: 'h-[22px] w-[22px]', glyph: 16, offset: '-mt-px' },\n};\n\n/** Per-shape corner classes. */\nconst CHECKBOX_SHAPE: Readonly<Record<CheckboxShape, string>> = {\n  square: 'rounded-xs',\n  circular: 'rounded-full',\n};\n\n/** Properties for the Checkbox component. */\nexport interface CheckboxProps extends Omit<\n  React.HTMLAttributes<HTMLLabelElement>,\n  'onChange' | 'defaultChecked' | CheckboxControlHandlers\n> {\n  /** Controlled checked state. */\n  checked?: boolean;\n  /** Initial checked state for uncontrolled usage (also the value a form reset restores).\n   * @default false\n   */\n  defaultChecked?: boolean;\n  /**\n   * Shows the mixed state: the dash glyph and `aria-checked=\"mixed\"`, whatever `checked` is. A\n   * click still toggles `checked` and calls `onCheckedChange`, but the checkbox keeps showing and\n   * announcing \"mixed\" until you clear `indeterminate`. For a tri-state \"select all\", derive\n   * `checked` and `indeterminate` from the items and set every item in `onCheckedChange`.\n   * @default false\n   */\n  indeterminate?: boolean;\n  /** Called with the new checked state when it changes (not for no-op updates). */\n  onCheckedChange?: (checked: boolean) => void;\n  /**\n   * Called with the new checked state when it changes.\n   * @deprecated Use `onCheckedChange`.\n   */\n  onChange?: (checked: boolean) => void;\n  /** Whether the checkbox is disabled and non-interactive. */\n  disabled?: boolean;\n  /**\n   * Marks the checkbox unavailable but keeps it focusable and in the tab order: for a disabled\n   * checkbox that needs a Tooltip, or one in a toolbar. Renders `aria-disabled=\"true\"`,\n   * `data-disabled` and `data-disabled-focusable` on the checkbox instead of the native `disabled`\n   * attribute. The checkbox cannot be toggled and is not submitted with its form; your `onClick`\n   * is not called, and a click on the checkbox (or Space and Enter) does not reach ancestor click\n   * handlers, as for a natively disabled control. Wins over `disabled` when both are set. In a\n   * roving container (a `Toolbar`) it stays in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Label next to the control (any phrasing content, links included, but no other form\n   * controls). It names the control through `aria-labelledby`, after a consumer or Field\n   * `aria-labelledby`; a consumer `aria-label` names it instead. Clicking its text toggles the\n   * control; clicking a link inside it follows the link. `children` are not rendered: pass the\n   * label here.\n   */\n  label?: React.ReactNode;\n  /**\n   * Where the label renders: after the control (default) or before it. The DOM order follows the\n   * visual order.\n   * @default 'after'\n   */\n  labelPosition?: CheckboxLabelPosition;\n  /**\n   * Size of the box: an 18px box (the 0.7 look) or a 22px box with a bigger glyph. Unlike the\n   * text controls and pickers, Checkbox does not read a surrounding Field's size or a\n   * WaveProvider's input defaults: this prop is the only source of its size.\n   * @default 'medium'\n   */\n  size?: CheckboxSize;\n  /**\n   * Shape of the box: square corners (the 0.7 look) or a circular, round box.\n   * @default 'square'\n   */\n  shape?: CheckboxShape;\n  /**\n   * Form field name. With a name, the checkbox takes part in native form submission: it submits\n   * `name=value` while checked.\n   */\n  name?: string;\n  /** Value submitted while checked.\n   * @default 'on'\n   */\n  value?: string;\n  /** The form must not be submitted while the checkbox is unchecked (native validation). */\n  required?: boolean;\n  /** Id of the form the checkbox belongs to, when it is rendered outside that form. */\n  form?: string;\n  /** Click handler of the checkbox control (the `role=\"checkbox\"` button). */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Focus handler of the checkbox control. */\n  onFocus?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Blur handler of the checkbox control. */\n  onBlur?: React.FocusEventHandler<HTMLButtonElement>;\n  /** Keydown handler of the checkbox control. */\n  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Keyup handler of the checkbox control. */\n  onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;\n  /** Ref to the focusable `role=\"checkbox\"` button. */\n  controlRef?: React.Ref<HTMLButtonElement>;\n  /** Ref to the root `<label>` element. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\n/**\n * A checkbox for a boolean (or mixed) choice, drawn as a `role=\"checkbox\"` button inside a\n * `<label>`.\n *\n * - The root `<label>` receives `ref`, `className`, `style` and `data-*`; the control receives\n *   `id`, `aria-label`/`-labelledby`/`-describedby`/`-invalid`/`-required`/`-errormessage`/\n *   `-details`/`-disabled`, `tabIndex`, `autoFocus` and the click, focus and key handlers\n *   (`controlRef` exposes it). A consumer `onClick` runs once per activation, before the toggle;\n *   `preventDefault()` in it cancels the toggle.\n * - Inside a `Field` it is named by the Field label (followed by its own `label` text) and described\n *   by the Field message and hint.\n * - With `name` (or `required`) it takes part in native forms like `<input type=\"checkbox\">`, and\n *   a form reset restores `defaultChecked`.\n * - `label` takes rich content (a link to the terms) and renders after the box, or before it with\n *   `labelPosition=\"before\"` (the root carries `data-label-position`). The box lines up with the\n *   first line of a label that wraps or has a second line. `children` are not rendered (a\n *   development warning says so).\n * - `size` (`medium`, `large`) and `shape` (`square`, `circular`) set the box's dimensions and\n *   corners; the root carries `data-size` and `data-shape`. Checkbox does not read a surrounding\n *   `Field`'s size or a `WaveProvider`'s input defaults.\n */\nexport const Checkbox = ({\n  checked: checkedProp,\n  defaultChecked = false,\n  indeterminate = false,\n  onCheckedChange,\n  onChange,\n  disabled = false,\n  disabledFocusable = false,\n  label,\n  labelPosition = 'after',\n  size = 'medium',\n  shape = 'square',\n  name,\n  value,\n  required,\n  form,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-errormessage': ariaErrorMessage,\n  'aria-details': ariaDetails,\n  'aria-disabled': ariaDisabled,\n  autoFocus,\n  tabIndex,\n  onClick,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  controlRef,\n  className,\n  children,\n  ref,\n  ...rest\n}: CheckboxProps) => {\n  if (onChange !== undefined) warnDeprecated('Checkbox', 'onChange', 'onCheckedChange');\n  const hasChildren = slotRendersContent(children);\n  React.useEffect(() => {\n    if (hasChildren) {\n      warnOnce(\n        'Checkbox:children',\n        'Checkbox: children are not rendered. Pass the label in `label`.',\n      );\n    }\n  }, [hasChildren]);\n  const [checked, setChecked] = useControllable(checkedProp, defaultChecked, (next: boolean) => {\n    onCheckedChange?.(next);\n    onChange?.(next);\n  });\n\n  const generatedId = useId('checkbox');\n  const labelTextId = useId('checkbox-label');\n  const field = useFieldContext();\n  const fieldProps = useFieldControl({\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    // An explicit `required={false}` wins over a required Field, so aria-required always matches\n    // the native validation below (`isRequired`).\n    'aria-required': ariaRequired ?? required,\n  });\n  const isRequired = required ?? field?.required ?? false;\n  // `0` is a label; `null`, `false`, `''` and empty collections are not (C-SLOTS).\n  const hasLabel = slotRendersContent(label);\n  // The label text names the control through aria-labelledby, disabled or not: axe exempts the\n  // dimmed text of a disabled control only when the control references it this way (its <label>\n  // exemption covers native inputs only). A consumer aria-label still names the control alone.\n  // The ids already there (the consumer's, the Field label from useFieldControl) come first, then\n  // the Field label whose <label htmlFor> targets this control (aria-labelledby would hide it), so\n  // the name keeps every label.\n  const labelledBy =\n    hasLabel && fieldProps['aria-label'] === undefined\n      ? joinIds(\n          fieldProps['aria-labelledby'],\n          field && fieldProps.id === field.controlId ? field.labelId : undefined,\n          labelTextId,\n        )\n      : fieldProps['aria-labelledby'];\n\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const mergedControlRef = useMergedRefs(buttonRef, controlRef);\n  useFormReset(buttonRef, () => setChecked(defaultChecked), form);\n\n  const on = checked || indeterminate;\n  // A size or shape outside the unions (from untyped code) renders, and is reported in the data\n  // attributes, as the default: TypeScript rejects one, but the value still reaches this render.\n  const resolvedSize: CheckboxSize = Object.hasOwn(CHECKBOX_SIZE, size) ? size : 'medium';\n  const resolvedShape: CheckboxShape = Object.hasOwn(CHECKBOX_SHAPE, shape) ? shape : 'square';\n  const sizeMetrics = CHECKBOX_SIZE[resolvedSize];\n  const shapeClass = CHECKBOX_SHAPE[resolvedShape];\n  // Focusable-disabled wins over `disabled`: the box stays focusable but looks and acts disabled.\n  const unavailable = disabled || disabledFocusable;\n  // The glyph is the forced-colors leaf; the box stays on system colors (see `checkedBox`).\n  const glyphClassName = unavailable ? disabledGlyph : forcedColors.selectedLeaf;\n  const labelText = hasLabel ? (\n    <span id={labelTextId} className={cn(checkboxClassNames.label, 'text-body-1 text-foreground')}>\n      {materialiseSlotContent(label)}\n    </span>\n  ) : null;\n\n  return (\n    <label\n      ref={ref}\n      data-label-position={labelPosition}\n      data-size={resolvedSize}\n      data-shape={resolvedShape}\n      className={cn(\n        checkboxClassNames.root,\n        // items-start: the box lines up with the first line of a label that wraps or has a second\n        // line, not with its middle.\n        'relative inline-flex items-start gap-2 select-none',\n        // The dimmed look lifts while a focus ring shows inside the root (the control's, under\n        // disabledFocusable, or a link's in the label): opacity would dim the ring below 3:1.\n        unavailable\n          ? 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100'\n          : 'cursor-pointer',\n        className,\n      )}\n      {...rest}\n    >\n      {labelPosition === 'before' && labelText}\n      <button\n        id={generatedId}\n        type=\"button\"\n        {...fieldProps}\n        aria-labelledby={labelledBy}\n        aria-errormessage={ariaErrorMessage}\n        aria-details={ariaDetails}\n        aria-disabled={ariaDisabled}\n        autoFocus={autoFocus}\n        tabIndex={tabIndex}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        ref={mergedControlRef}\n        role=\"checkbox\"\n        aria-checked={indeterminate ? 'mixed' : checked}\n        disabled={disabled && !disabledFocusable}\n        {...focusableDisabledProps(disabledFocusable, { reachable: true })}\n        onClick={\n          disabledFocusable\n            ? // Clicks, Space and Enter (which click a button) neither toggle nor reach `onClick`,\n              // and, as a natively disabled control dispatches no click, no ancestor sees them.\n              (event: React.MouseEvent<HTMLButtonElement>) => {\n                event.preventDefault();\n                event.stopPropagation();\n              }\n            : composeEventHandlers(onClick, () => setChecked((prev) => !prev))\n        }\n        className={cn(\n          checkboxClassNames.indicator,\n          // p-0 and the unchecked bg-transparent are set here, not left to the native reset, which\n          // any app button style overrides (C-NATIVE).\n          cn(\n            'flex shrink-0 items-center justify-center border p-0 transition-colors motion-reduce:transition-none',\n            sizeMetrics.box,\n            shapeClass,\n          ),\n          // Centred on the label's 20px first line: nudged down at medium, up at large.\n          hasLabel && sizeMetrics.offset,\n          focusRing,\n          on\n            ? cn(\n                'border-primary bg-primary text-primary-foreground',\n                unavailable ? disabledCheckedBox : checkedBox,\n              )\n            : cn(\n                'border-stroke-accessible bg-transparent',\n                unavailable ? forcedColors.disabled : forcedColors.control,\n              ),\n        )}\n      >\n        {indeterminate ? (\n          <SubtractIcon size={sizeMetrics.glyph} className={glyphClassName} />\n        ) : checked ? (\n          <CheckIcon size={sizeMetrics.glyph} className={glyphClassName} />\n        ) : null}\n      </button>\n      {labelPosition !== 'before' && labelText}\n      <HiddenInput\n        type=\"checkbox\"\n        name={name}\n        form={form}\n        disabled={unavailable}\n        value={value}\n        checked={checked}\n        required={isRequired}\n        onInvalid={() => buttonRef.current?.focus()}\n      />\n    </label>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n"],"mappings":"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"}

package/dist/components/input/ColorPicker.parts.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../hooks/useControllable.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../lib/aria.cjs"),l=require("../../lib/styles.cjs"),u=require("./Input.cjs"),d=require("./colorUtils.cjs"),f=require("./SwatchPicker.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=`#0f6cbd`,g={h:208,s:.92,v:.74},_={hex:`Hex`,hexInput:`Hex color value`,hexError:`Enter a hex color such as ${h}.`,presets:`Preset colors`,opacity:`Opacity`,area:`Saturation and brightness`,saturation:`Saturation`,brightness:`Brightness`,roleDescription:`2D slider`,hue:`Hue`,transparency:`Transparency`},v=p.createContext(null);v.displayName=`ColorPickerContext`;function y(){return p.useContext(v)}var b=()=>{};function x({value:e,defaultValue:t,onValueChange:n,disabled:r}){let i=y(),o=i!==null&&e===void 0&&t===void 0?i:null,s=t??g,[c,l]=a.useControllable(e,s,o?void 0:n);return o?{picker:o,color:o.hsv,setColor:e=>{o.setHsv(e),n?.(e)},reset:b,disabled:r||o.disabled}:{picker:null,color:c,setColor:l,reset:()=>{d.sameColor(c,s)||l(s)},disabled:r}}var S={hsv:g,setHsv:b,color:h,parsed:null,setColor:b,pickPreset:b,presetItems:[],shape:`rounded`,labels:_,disabled:!0,draftResetKey:0,field:null,groupInvalid:void 0,errorMessageId:void 0,registerHexInput:b};function C(e){return p.useContext(v)||(n.reportMissingContext(e,`<ColorPicker>`),S)}function w(e){let t=e.trim();return t===``||t===`#`}function T(e){let t=e.trim().replace(/^#/,``).length;return t===4||t===8}var E=({id:e,"aria-label":n,"aria-labelledby":a,"aria-describedby":f,"aria-invalid":h,"aria-errormessage":g,"aria-details":_,"aria-required":v,autoFocus:y,tabIndex:b,onFocus:x,onBlur:S,onKeyDown:E,onKeyUp:D,inputMode:O,enterKeyHint:k,autoCapitalize:ee,autoCorrect:te,spellCheck:ne,controlRef:re,className:A,ref:j,...M})=>{let N=C(`ColorPicker.HexField`),{color:P,parsed:ie,field:F,groupInvalid:I,errorMessageId:L,labels:R}=N,z=ie?.alpha??255,[B,V]=p.useState(null),[H,U]=p.useState(P);P!==H&&(U(P),B?.flagged&&V(null));let[W,G]=p.useState(N.draftResetKey);N.draftResetKey!==W&&(G(N.draftResetKey),V(null));let K=B?.text??P,q=B!==null&&!w(B.text)&&(B.flagged||!d.isHexDraft(B.text)),J=I!==void 0&&I!==!1&&I!==`false`,Y=o.useId(`wave-color-picker-error`),X=h??(q?!0:J?I:void 0),ae=u.isInvalidLook(!1,X),oe=p.useRef(null),se=s.useMergedRefs(oe,re,N.registerHexInput),Z=(e,t)=>N.setColor(d.formatHexColor(e,t)),Q=e=>{let t=e.target.value.trim();t!==``&&!t.startsWith(`#`)&&(t=`#${t}`),V({text:t,flagged:!1});let n=d.parseHexInput(t);n&&Z(n.rgb,T(t)?n.alpha:z)},$=()=>{if(B===null||B.flagged)return;let e=d.parseHexColor(B.text);if(e||w(B.text)){e&&!d.parseHexInput(B.text)&&Z(e.rgb,T(B.text)?e.alpha:z),V(null);return}V({text:B.text,flagged:!0})},ce=r.composeEventHandlers(S,$),le=r.composeEventHandlers(E,e=>{e.key===`Enter`&&!e.nativeEvent.isComposing&&$()});return(0,m.jsxs)(`label`,{ref:j,className:t.cn(i.colorPickerHexFieldClassNames.root,`flex min-w-0 flex-col gap-1`,A),...M,children:[(0,m.jsx)(`span`,{className:t.cn(i.colorPickerHexFieldClassNames.label,`text-caption-1 text-muted-foreground`),children:R.hex}),(0,m.jsx)(`input`,{ref:se,id:e,type:`text`,value:K,onChange:Q,onKeyDown:le,onKeyUp:D,onFocus:x,onBlur:ce,"aria-label":n??(a===void 0?R.hexInput:void 0),"aria-labelledby":a,"aria-invalid":X,"aria-errormessage":g??L,"aria-describedby":c.joinIds(q&&Y,F?.validationMessageId??(J?F?.errorId:void 0),L,f),"aria-details":_,"aria-required":v,autoFocus:y,tabIndex:b,inputMode:O,enterKeyHint:k,autoCapitalize:ee,autoCorrect:te,spellCheck:ne??!1,maxLength:9,autoComplete:`off`,className:t.cn(i.colorPickerHexFieldClassNames.input,`w-24 rounded border border-input border-b-stroke-accessible bg-background px-2 py-1 text-body-1 text-foreground`,l.inputFocus,ae&&`border-destructive focus:border-b-destructive`)}),q&&(0,m.jsx)(`span`,{id:Y,className:t.cn(i.colorPickerHexFieldClassNames.errorMessage,`text-caption-1 text-error`),children:R.hexError})]})};E.displayName=`ColorPickerHexField`;var D=({className:e,"aria-label":n,size:r=`small`,shape:a=`rounded`,...o})=>{let s=C(`ColorPicker.Swatches`);return s.presetItems.length===0?null:(0,m.jsx)(f.SwatchPicker,{"aria-label":n??(o[`aria-labelledby`]===void 0?s.labels.presets:void 0),size:r,shape:a,...o,className:t.cn(i.colorPickerSwatchesClassNames.root,e),items:s.presetItems,value:s.parsed?s.parsed.rgb:``,onValueChange:s.pickPreset})};D.displayName=`ColorPickerSwatches`;var O=({className:e,style:n,ref:r,...a})=>{let o=C(`ColorPicker.Preview`),s=o.parsed?d.formatHexColor(o.parsed.rgb,o.parsed.alpha):o.color;return(0,m.jsx)(`div`,{"data-color-preview":``,"aria-hidden":`true`,...a,ref:r,className:t.cn(i.colorPickerPreviewClassNames.root,`h-10 w-10 shrink-0 rounded border border-border forced-colors:forced-color-adjust-none`,o.shape===`square`&&`rounded-none`,e),style:{...n,backgroundColor:s}})};O.displayName=`ColorPickerPreview`,exports.ColorPickerContext=v,exports.ColorPickerHexField=E,exports.ColorPickerPreview=O,exports.ColorPickerSwatches=D,exports.DEFAULT_COLOR=h,exports.DEFAULT_COLOR_PICKER_LABELS=_,exports.DEFAULT_PART_COLOR=g,exports.useColorPartState=x,exports.useColorPickerContext=y,exports.usePickerPartContext=C;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../hooks/useControllable.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../lib/aria.cjs"),l=require("../../lib/styles.cjs"),u=require("./Input.cjs"),d=require("./colorUtils.cjs"),f=require("./SwatchPicker.cjs");let p=require("react");p=e.__toESM(p,1);let m=require("react/jsx-runtime");var h=`#0f6cbd`,g={h:208,s:.92,v:.74},_={hex:`Hex`,hexInput:`Hex color value`,hexError:`Enter a hex color such as ${h}.`,presets:`Preset colors`,opacity:`Opacity`,area:`Saturation and brightness`,saturation:`Saturation`,brightness:`Brightness`,roleDescription:`2D slider`,hue:`Hue`,transparency:`Transparency`},v=p.createContext(null);v.displayName=`ColorPickerContext`;function y(){return p.useContext(v)}var b=()=>{};function x({value:e,defaultValue:t,onValueChange:n,disabled:r}){let i=y(),o=i!==null&&e===void 0&&t===void 0?i:null,s=t??g,[c,l]=a.useControllable(e,s,o?void 0:n);return o?{picker:o,color:o.hsv,setColor:e=>{o.setHsv(e),n?.(e)},reset:b,disabled:r||o.disabled}:{picker:null,color:c,setColor:l,reset:()=>{d.sameColor(c,s)||l(s)},disabled:r}}var S={hsv:g,setHsv:b,color:h,parsed:null,setColor:b,pickPreset:b,presetItems:[],shape:`rounded`,labels:_,disabled:!0,draftResetKey:0,field:null,groupInvalid:void 0,errorMessageId:void 0,registerHexInput:b};function C(e){return p.useContext(v)||(n.reportMissingContext(e,`<ColorPicker>`),S)}function w(e){let t=e.trim();return t===``||t===`#`}function T(e){let t=e.trim().replace(/^#/,``).length;return t===4||t===8}var E=({id:e,"aria-label":n,"aria-labelledby":a,"aria-describedby":f,"aria-invalid":h,"aria-errormessage":g,"aria-details":_,"aria-required":v,autoFocus:y,tabIndex:b,onFocus:x,onBlur:S,onKeyDown:E,onKeyUp:D,inputMode:O,enterKeyHint:k,autoCapitalize:ee,autoCorrect:te,spellCheck:ne,controlRef:re,className:A,ref:j,...M})=>{let N=C(`ColorPicker.HexField`),{color:P,parsed:ie,field:F,groupInvalid:I,errorMessageId:L,labels:R}=N,z=ie?.alpha??255,[B,V]=p.useState(null),[H,U]=p.useState(P);P!==H&&(U(P),B?.flagged&&V(null));let[W,G]=p.useState(N.draftResetKey);N.draftResetKey!==W&&(G(N.draftResetKey),V(null));let K=B?.text??P,q=B!==null&&!w(B.text)&&(B.flagged||!d.isHexDraft(B.text)),J=I!==void 0&&I!==!1&&I!==`false`,Y=o.useId(`wave-color-picker-error`),X=h??(q?!0:J?I:void 0),ae=u.isInvalidLook(!1,X),oe=p.useRef(null),se=s.useMergedRefs(oe,re,N.registerHexInput),Z=(e,t)=>N.setColor(d.formatHexColor(e,t)),Q=e=>{let t=e.target.value.trim();t!==``&&!t.startsWith(`#`)&&(t=`#${t}`),V({text:t,flagged:!1});let n=d.parseHexInput(t);n&&Z(n.rgb,T(t)?n.alpha:z)},$=()=>{if(B===null||B.flagged)return;let e=d.parseHexColor(B.text);if(e||w(B.text)){e&&!d.parseHexInput(B.text)&&Z(e.rgb,T(B.text)?e.alpha:z),V(null);return}V({text:B.text,flagged:!0})},ce=r.composeEventHandlers(S,$),le=r.composeEventHandlers(E,e=>{e.key===`Enter`&&!e.nativeEvent.isComposing&&$()});return(0,m.jsxs)(`label`,{ref:j,className:t.cn(i.colorPickerHexFieldClassNames.root,`flex min-w-0 flex-col gap-1`,A),...M,children:[(0,m.jsx)(`span`,{className:t.cn(i.colorPickerHexFieldClassNames.label,`text-caption-1 text-muted-foreground`),children:R.hex}),(0,m.jsx)(`input`,{ref:se,id:e,type:`text`,value:K,onChange:Q,onKeyDown:le,onKeyUp:D,onFocus:x,onBlur:ce,"aria-label":n??(a===void 0?R.hexInput:void 0),"aria-labelledby":a,"aria-invalid":X,"aria-errormessage":g??L,"aria-describedby":c.joinIds(q&&Y,F?.validationMessageId??(J?F?.errorId:void 0),L,f),"aria-details":_,"aria-required":v,autoFocus:y,tabIndex:b,inputMode:O,enterKeyHint:k,autoCapitalize:ee,autoCorrect:te,spellCheck:ne??!1,maxLength:9,autoComplete:`off`,className:t.cn(i.colorPickerHexFieldClassNames.input,`w-24 rounded border border-input border-b-stroke-accessible bg-background px-2 py-1 text-body-1 text-foreground`,l.inputFocus,ae&&`border-destructive`)}),q&&(0,m.jsx)(`span`,{id:Y,className:t.cn(i.colorPickerHexFieldClassNames.errorMessage,`text-caption-1 text-error`),children:R.hexError})]})};E.displayName=`ColorPickerHexField`;var D=({className:e,"aria-label":n,size:r=`small`,shape:a=`rounded`,...o})=>{let s=C(`ColorPicker.Swatches`);return s.presetItems.length===0?null:(0,m.jsx)(f.SwatchPicker,{"aria-label":n??(o[`aria-labelledby`]===void 0?s.labels.presets:void 0),size:r,shape:a,...o,className:t.cn(i.colorPickerSwatchesClassNames.root,e),items:s.presetItems,value:s.parsed?s.parsed.rgb:``,onValueChange:s.pickPreset})};D.displayName=`ColorPickerSwatches`;var O=({className:e,style:n,ref:r,...a})=>{let o=C(`ColorPicker.Preview`),s=o.parsed?d.formatHexColor(o.parsed.rgb,o.parsed.alpha):o.color;return(0,m.jsx)(`div`,{"data-color-preview":``,"aria-hidden":`true`,...a,ref:r,className:t.cn(i.colorPickerPreviewClassNames.root,`h-10 w-10 shrink-0 rounded border border-border forced-colors:forced-color-adjust-none`,o.shape===`square`&&`rounded-none`,e),style:{...n,backgroundColor:s}})};O.displayName=`ColorPickerPreview`,exports.ColorPickerContext=v,exports.ColorPickerHexField=E,exports.ColorPickerPreview=O,exports.ColorPickerSwatches=D,exports.DEFAULT_COLOR=h,exports.DEFAULT_COLOR_PICKER_LABELS=_,exports.DEFAULT_PART_COLOR=g,exports.useColorPartState=x,exports.useColorPickerContext=y,exports.usePickerPartContext=C;
 //# sourceMappingURL=ColorPicker.parts.cjs.map