@techzyapp/ui-library 1.0.27 → 1.0.28

package/dist/{SwatchPicker-C8amdDnA.cjs → SwatchPicker-BWXqgsEy.cjs}

@@ -1,2 +1,2 @@
-"use strict";const t=require("react/jsx-runtime"),u=require("react"),N=require("clsx"),U=require("./formContext-bTWrqdEV.cjs"),G=require("./Icon-BVULqOJD.cjs"),R=require("./Typography-BFatE1_A.cjs"),i=require("./TextField.module-DsNCo8vN.cjs"),J="_swatches_1kbcs_3",M="_sm_1kbcs_13",O="_md_1kbcs_18",Q="_lg_1kbcs_23",W="_swatch_1kbcs_3",m={swatches:J,sm:M,md:O,lg:Q,swatch:W},X=u.forwardRef(function({colors:r,value:p,defaultValue:A=null,onChange:h,size:b="md",labels:w,label:d,error:C,helperText:L,required:D=!1,name:c,className:F,"aria-label":P,...B},E){const x=u.useId(),v=`${x}-label`,k=`${x}-helper`,o=U.useFormContext(),_=!!(o&&c),l=o&&c?o.field(c):void 0,S=p!==void 0?p:_?o.values[c]??null:void 0,I=S!==void 0,[H,K]=u.useState(A),g=((I?S:H)??"").toLowerCase(),f=C??(l==null?void 0:l.error)??!1,y=L??(l==null?void 0:l.helperText),j=e=>{I||K(e),_&&o.setValue(c,e),h==null||h(e)},q=u.useRef([]),T=r.findIndex(e=>e.toLowerCase()===g),V=T>=0?T:0,$=(e,a)=>{var n;let s=a;switch(e.key){case"ArrowRight":case"ArrowDown":s=(a+1)%r.length;break;case"ArrowLeft":case"ArrowUp":s=(a-1+r.length)%r.length;break;case"Home":s=0;break;case"End":s=r.length-1;break;default:return}e.preventDefault(),j(r[s]),(n=q.current[s])==null||n.focus()};return t.jsxs("div",{ref:E,className:N.clsx(i.fieldStyles.field,i.fieldStyles[b],f&&i.fieldStyles.error,F),...B,children:[d!=null&&t.jsxs("label",{id:v,className:i.fieldStyles.label,children:[t.jsx(R.Typography,{as:"span",variant:"bodySmall",color:"muted",children:d}),D&&t.jsx("span",{className:i.fieldStyles.required,"aria-hidden":"true",children:"*"})]}),t.jsx("div",{role:"radiogroup","aria-labelledby":d!=null?v:void 0,"aria-label":d==null?P:void 0,"aria-invalid":f||void 0,"aria-describedby":y!=null?k:void 0,className:N.clsx(m.swatches,m[b]),...c?{name:c,tabIndex:-1}:{},children:r.map((e,a)=>{const s=e.toLowerCase()===g;return t.jsx("button",{ref:n=>{q.current[a]=n},type:"button",role:"radio","aria-checked":s,"aria-label":(w==null?void 0:w[e])??e,tabIndex:a===V?0:-1,className:m.swatch,style:{"--sw":e},onClick:()=>j(e),onKeyDown:n=>$(n,a),children:s?t.jsx(G.Icon,{name:"TickCircle",style:{width:"var(--sw-icon)",height:"var(--sw-icon)"}}):null},e)})}),y!=null&&t.jsx(R.Typography,{as:"span",id:k,variant:"bodySmall",color:f?"error":"muted",className:i.fieldStyles.helper,children:y})]})});exports.SwatchPicker=X;
-//# sourceMappingURL=SwatchPicker-C8amdDnA.cjs.map
+"use strict";const t=require("react/jsx-runtime"),u=require("react"),N=require("clsx"),U=require("./formContext-bTWrqdEV.cjs"),G=require("./Icon-BVULqOJD.cjs"),R=require("./Typography-B6ASPrzT.cjs"),i=require("./TextField.module-DsNCo8vN.cjs"),J="_swatches_1kbcs_3",M="_sm_1kbcs_13",O="_md_1kbcs_18",Q="_lg_1kbcs_23",W="_swatch_1kbcs_3",m={swatches:J,sm:M,md:O,lg:Q,swatch:W},X=u.forwardRef(function({colors:r,value:p,defaultValue:A=null,onChange:h,size:b="md",labels:w,label:d,error:C,helperText:L,required:D=!1,name:c,className:F,"aria-label":P,...B},E){const x=u.useId(),v=`${x}-label`,k=`${x}-helper`,o=U.useFormContext(),_=!!(o&&c),l=o&&c?o.field(c):void 0,S=p!==void 0?p:_?o.values[c]??null:void 0,I=S!==void 0,[H,K]=u.useState(A),g=((I?S:H)??"").toLowerCase(),f=C??(l==null?void 0:l.error)??!1,y=L??(l==null?void 0:l.helperText),j=e=>{I||K(e),_&&o.setValue(c,e),h==null||h(e)},q=u.useRef([]),T=r.findIndex(e=>e.toLowerCase()===g),V=T>=0?T:0,$=(e,a)=>{var n;let s=a;switch(e.key){case"ArrowRight":case"ArrowDown":s=(a+1)%r.length;break;case"ArrowLeft":case"ArrowUp":s=(a-1+r.length)%r.length;break;case"Home":s=0;break;case"End":s=r.length-1;break;default:return}e.preventDefault(),j(r[s]),(n=q.current[s])==null||n.focus()};return t.jsxs("div",{ref:E,className:N.clsx(i.fieldStyles.field,i.fieldStyles[b],f&&i.fieldStyles.error,F),...B,children:[d!=null&&t.jsxs("label",{id:v,className:i.fieldStyles.label,children:[t.jsx(R.Typography,{as:"span",variant:"bodySmall",color:"muted",children:d}),D&&t.jsx("span",{className:i.fieldStyles.required,"aria-hidden":"true",children:"*"})]}),t.jsx("div",{role:"radiogroup","aria-labelledby":d!=null?v:void 0,"aria-label":d==null?P:void 0,"aria-invalid":f||void 0,"aria-describedby":y!=null?k:void 0,className:N.clsx(m.swatches,m[b]),...c?{name:c,tabIndex:-1}:{},children:r.map((e,a)=>{const s=e.toLowerCase()===g;return t.jsx("button",{ref:n=>{q.current[a]=n},type:"button",role:"radio","aria-checked":s,"aria-label":(w==null?void 0:w[e])??e,tabIndex:a===V?0:-1,className:m.swatch,style:{"--sw":e},onClick:()=>j(e),onKeyDown:n=>$(n,a),children:s?t.jsx(G.Icon,{name:"TickCircle",style:{width:"var(--sw-icon)",height:"var(--sw-icon)"}}):null},e)})}),y!=null&&t.jsx(R.Typography,{as:"span",id:k,variant:"bodySmall",color:f?"error":"muted",className:i.fieldStyles.helper,children:y})]})});exports.SwatchPicker=X;
+//# sourceMappingURL=SwatchPicker-BWXqgsEy.cjs.map

package/dist/{SwatchPicker-C8amdDnA.cjs.map → SwatchPicker-BWXqgsEy.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"SwatchPicker-C8amdDnA.cjs","sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\n// shared field chrome (wrapper / label / helper / required / error / sizes)\nimport fieldStyles from '../TextField/TextField.module.css'\nimport styles from './SwatchPicker.module.css'\n\nexport type SwatchPickerSize = 'sm' | 'md' | 'lg'\n\nexport interface SwatchPickerProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** The color values to render as selectable swatches (any CSS color — hex / `rgb()` / …). */\n  colors: string[]\n  /** The selected color (controlled) — matched case-insensitively against `colors`; `null` = none. */\n  value?: string | null\n  /** Initial selected color (uncontrolled). */\n  defaultValue?: string | null\n  /** Fires with the clicked color. */\n  onChange?: (color: string) => void\n  /**\n   * Swatch size — `sm` 30 / `md` 36 / `lg` 42 px, each with its own corner radius and tick size\n   * (12/16/20). Defaults to `md`. All three are per-size CSS vars in the module.\n   */\n  size?: SwatchPickerSize\n  /** Per-color accessible labels (falls back to the color value itself). */\n  labels?: Record<string, string>\n  /** Label rendered above the swatches. */\n  label?: ReactNode\n  /** Marks the field invalid — reddens the label/asterisk and shows `helperText` in the error color. */\n  error?: boolean\n  /** Helper / validation text under the swatches. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Form field name — auto-binds to a surrounding `<Form>` (the form value is the color string). */\n  name?: string\n}\n\n/**\n * A grid of selectable color **swatches** (rounded tiles) — pick one from a fixed palette. The selected\n * swatch shows a centered white **`TickCircle`** icon. Unlike `ColorPicker` (a field + full popover\n * picker), this is a lightweight primitive for a **preset** set of colors — e.g. an accent-color chooser.\n * Controlled (`value` + `onChange`) or uncontrolled (`defaultValue`); binds to a surrounding `<Form>` by\n * `name` (the form value is the color string — validate with e.g. `z.string().min(1, 'Pick a color')`),\n * and shares the field family's `label` / `error` + `helperText` / `required` chrome.\n *\n * Swatch fills are arbitrary CSS colors (fed via an inline `--sw` var), not `--tz-*` tokens — a\n * deliberate exception, like `ColorPicker`'s spectrum. a11y: `role=\"radiogroup\"` (labelled by `label`\n * or `aria-label`) with `role=\"radio\"` + `aria-checked` swatches; the group carries `name` for the\n * form's scroll-to-error.\n */\nexport const SwatchPicker = forwardRef<HTMLDivElement, SwatchPickerProps>(function SwatchPicker(\n  {\n    colors,\n    value,\n    defaultValue = null,\n    onChange,\n    size = 'md',\n    labels,\n    label,\n    error,\n    helperText,\n    required = false,\n    name,\n    className,\n    'aria-label': ariaLabel,\n    ...props\n  },\n  ref,\n) {\n  const id = useId()\n  const labelId = `${id}-label`\n  const helperId = `${id}-helper`\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is the color string.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue: string | null | undefined =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? ((form!.values[name!] as string | null | undefined) ?? null)\n        : undefined\n  const isControlled = externalValue !== undefined\n  const [internal, setInternal] = useState<string | null>(defaultValue)\n  const selected = isControlled ? externalValue! : internal\n  const active = (selected ?? '').toLowerCase()\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  const pick = (color: string) => {\n    if (!isControlled) setInternal(color)\n    if (isFormBound) form!.setValue(name!, color)\n    onChange?.(color)\n  }\n\n  // roving tabindex (ARIA radiogroup): only the selected swatch — or the first, if none — is tabbable;\n  // arrows move selection between swatches (wrapping), Home/End jump to the ends\n  const swatchRefs = useRef<(HTMLButtonElement | null)[]>([])\n  const selectedIndex = colors.findIndex((c) => c.toLowerCase() === active)\n  const tabbableIndex = selectedIndex >= 0 ? selectedIndex : 0\n  const onSwatchKey = (event: ReactKeyboardEvent<HTMLButtonElement>, index: number) => {\n    let target = index\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        target = (index + 1) % colors.length\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        target = (index - 1 + colors.length) % colors.length\n        break\n      case 'Home':\n        target = 0\n        break\n      case 'End':\n        target = colors.length - 1\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    pick(colors[target])\n    swatchRefs.current[target]?.focus()\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        fieldStyles.field,\n        fieldStyles[size],\n        resolvedError && fieldStyles.error,\n        className,\n      )}\n      {...props}\n    >\n      {label != null && (\n        <label id={labelId} className={fieldStyles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={fieldStyles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-labelledby={label != null ? labelId : undefined}\n        aria-label={label == null ? ariaLabel : undefined}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        className={clsx(styles.swatches, styles[size])}\n        // name + tabIndex are load-bearing for the form's scroll-to-error\n        {...(name ? { name, tabIndex: -1 } : {})}\n      >\n        {colors.map((color, index) => {\n          const isSelected = color.toLowerCase() === active\n          return (\n            <button\n              key={color}\n              ref={(el) => {\n                swatchRefs.current[index] = el\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              aria-label={labels?.[color] ?? color}\n              tabIndex={index === tabbableIndex ? 0 : -1}\n              className={styles.swatch}\n              style={{ '--sw': color } as CSSProperties}\n              onClick={() => pick(color)}\n              onKeyDown={(e) => onSwatchKey(e, index)}\n            >\n              {isSelected ? (\n                <Icon\n                  name=\"TickCircle\"\n                  style={{ width: 'var(--sw-icon)', height: 'var(--sw-icon)' }}\n                />\n              ) : null}\n            </button>\n          )\n        })}\n      </div>\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={fieldStyles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["SwatchPicker","forwardRef","colors","value","defaultValue","onChange","size","labels","label","error","helperText","required","name","className","ariaLabel","props","ref","id","useId","labelId","helperId","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","active","resolvedError","resolvedHelperText","pick","color","swatchRefs","useRef","selectedIndex","c","tabbableIndex","onSwatchKey","event","index","target","_a","jsxs","clsx","fieldStyles","jsx","Typography","styles","isSelected","el","e","Icon"],"mappings":"wXAgEaA,EAAeC,EAAAA,WAA8C,SACxE,CACE,OAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,KACf,SAAAC,EACA,KAAAC,EAAO,KACP,OAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,SAAAC,EAAW,GACX,KAAAC,EACA,UAAAC,EACA,aAAcC,EACd,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAKC,EAAAA,MAAA,EACLC,EAAU,GAAGF,CAAE,SACfG,EAAW,GAAGH,CAAE,UAGhBI,EAAOC,EAAAA,eAAA,EACPC,EAAc,GAAQF,GAAQT,GAC9BY,EAAQH,GAAQT,EAAOS,EAAK,MAAMT,CAAI,EAAI,OAE1Ca,EACJtB,IAAU,OACNA,EACAoB,EACIF,EAAM,OAAOT,CAAK,GAAmC,KACvD,OACFc,EAAeD,IAAkB,OACjC,CAACE,EAAUC,CAAW,EAAIC,EAAAA,SAAwBzB,CAAY,EAE9D0B,IADWJ,EAAeD,EAAiBE,IACrB,IAAI,YAAA,EAE1BI,EAAgBtB,IAASe,GAAA,YAAAA,EAAO,QAAS,GACzCQ,EAAqBtB,IAAcc,GAAA,YAAAA,EAAO,YAE1CS,EAAQC,GAAkB,CACzBR,GAAcE,EAAYM,CAAK,EAChCX,GAAaF,EAAM,SAAST,EAAOsB,CAAK,EAC5C7B,GAAA,MAAAA,EAAW6B,EACb,EAIMC,EAAaC,EAAAA,OAAqC,EAAE,EACpDC,EAAgBnC,EAAO,UAAWoC,GAAMA,EAAE,YAAA,IAAkBR,CAAM,EAClES,EAAgBF,GAAiB,EAAIA,EAAgB,EACrDG,EAAc,CAACC,EAA8CC,IAAkB,OACnF,IAAIC,EAASD,EACb,OAAQD,EAAM,IAAA,CACZ,IAAK,aACL,IAAK,YACHE,GAAUD,EAAQ,GAAKxC,EAAO,OAC9B,MACF,IAAK,YACL,IAAK,UACHyC,GAAUD,EAAQ,EAAIxC,EAAO,QAAUA,EAAO,OAC9C,MACF,IAAK,OACHyC,EAAS,EACT,MACF,IAAK,MACHA,EAASzC,EAAO,OAAS,EACzB,MACF,QACE,MAAA,CAEJuC,EAAM,eAAA,EACNR,EAAK/B,EAAOyC,CAAM,CAAC,GACnBC,EAAAT,EAAW,QAAQQ,CAAM,IAAzB,MAAAC,EAA4B,OAC9B,EAEA,OACEC,EAAAA,KAAC,MAAA,CACC,IAAA7B,EACA,UAAW8B,EAAAA,KACTC,EAAAA,YAAY,MACZA,EAAAA,YAAYzC,CAAI,EAChByB,GAAiBgB,EAAAA,YAAY,MAC7BlC,CAAA,EAED,GAAGE,EAEH,SAAA,CAAAP,GAAS,MACRqC,OAAC,QAAA,CAAM,GAAI1B,EAAS,UAAW4B,EAAAA,YAAY,MACzC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,YAAW,GAAG,OAAO,QAAQ,YAAY,MAAM,QAC7C,SAAAzC,CAAA,CACH,EACCG,SACE,OAAA,CAAK,UAAWoC,EAAAA,YAAY,SAAU,cAAY,OAAO,SAAA,GAAA,CAE1D,CAAA,EAEJ,EAEFC,EAAAA,IAAC,MAAA,CACC,KAAK,aACL,kBAAiBxC,GAAS,KAAOW,EAAU,OAC3C,aAAYX,GAAS,KAAOM,EAAY,OACxC,eAAciB,GAAiB,OAC/B,mBAAkBC,GAAsB,KAAOZ,EAAW,OAC1D,UAAW0B,EAAAA,KAAKI,EAAO,SAAUA,EAAO5C,CAAI,CAAC,EAE5C,GAAIM,EAAO,CAAE,KAAAA,EAAM,SAAU,EAAA,EAAO,CAAA,EAEpC,SAAAV,EAAO,IAAI,CAACgC,EAAOQ,IAAU,CAC5B,MAAMS,EAAajB,EAAM,YAAA,IAAkBJ,EAC3C,OACEkB,EAAAA,IAAC,SAAA,CAEC,IAAMI,GAAO,CACXjB,EAAW,QAAQO,CAAK,EAAIU,CAC9B,EACA,KAAK,SACL,KAAK,QACL,eAAcD,EACd,cAAY5C,GAAA,YAAAA,EAAS2B,KAAUA,EAC/B,SAAUQ,IAAUH,EAAgB,EAAI,GACxC,UAAWW,EAAO,OAClB,MAAO,CAAE,OAAQhB,CAAA,EACjB,QAAS,IAAMD,EAAKC,CAAK,EACzB,UAAYmB,GAAMb,EAAYa,EAAGX,CAAK,EAErC,SAAAS,EACCH,EAAAA,IAACM,EAAAA,KAAA,CACC,KAAK,aACL,MAAO,CAAE,MAAO,iBAAkB,OAAQ,gBAAA,CAAiB,CAAA,EAE3D,IAAA,EAnBCpB,CAAA,CAsBX,CAAC,CAAA,CAAA,EAEFF,GAAsB,MACrBgB,EAAAA,IAACC,EAAAA,WAAA,CACC,GAAG,OACH,GAAI7B,EACJ,QAAQ,YACR,MAAOW,EAAgB,QAAU,QACjC,UAAWgB,EAAAA,YAAY,OAEtB,SAAAf,CAAA,CAAA,CACH,CAAA,CAAA,CAIR,CAAC"}
+{"version":3,"file":"SwatchPicker-BWXqgsEy.cjs","sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\n// shared field chrome (wrapper / label / helper / required / error / sizes)\nimport fieldStyles from '../TextField/TextField.module.css'\nimport styles from './SwatchPicker.module.css'\n\nexport type SwatchPickerSize = 'sm' | 'md' | 'lg'\n\nexport interface SwatchPickerProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** The color values to render as selectable swatches (any CSS color — hex / `rgb()` / …). */\n  colors: string[]\n  /** The selected color (controlled) — matched case-insensitively against `colors`; `null` = none. */\n  value?: string | null\n  /** Initial selected color (uncontrolled). */\n  defaultValue?: string | null\n  /** Fires with the clicked color. */\n  onChange?: (color: string) => void\n  /**\n   * Swatch size — `sm` 30 / `md` 36 / `lg` 42 px, each with its own corner radius and tick size\n   * (12/16/20). Defaults to `md`. All three are per-size CSS vars in the module.\n   */\n  size?: SwatchPickerSize\n  /** Per-color accessible labels (falls back to the color value itself). */\n  labels?: Record<string, string>\n  /** Label rendered above the swatches. */\n  label?: ReactNode\n  /** Marks the field invalid — reddens the label/asterisk and shows `helperText` in the error color. */\n  error?: boolean\n  /** Helper / validation text under the swatches. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Form field name — auto-binds to a surrounding `<Form>` (the form value is the color string). */\n  name?: string\n}\n\n/**\n * A grid of selectable color **swatches** (rounded tiles) — pick one from a fixed palette. The selected\n * swatch shows a centered white **`TickCircle`** icon. Unlike `ColorPicker` (a field + full popover\n * picker), this is a lightweight primitive for a **preset** set of colors — e.g. an accent-color chooser.\n * Controlled (`value` + `onChange`) or uncontrolled (`defaultValue`); binds to a surrounding `<Form>` by\n * `name` (the form value is the color string — validate with e.g. `z.string().min(1, 'Pick a color')`),\n * and shares the field family's `label` / `error` + `helperText` / `required` chrome.\n *\n * Swatch fills are arbitrary CSS colors (fed via an inline `--sw` var), not `--tz-*` tokens — a\n * deliberate exception, like `ColorPicker`'s spectrum. a11y: `role=\"radiogroup\"` (labelled by `label`\n * or `aria-label`) with `role=\"radio\"` + `aria-checked` swatches; the group carries `name` for the\n * form's scroll-to-error.\n */\nexport const SwatchPicker = forwardRef<HTMLDivElement, SwatchPickerProps>(function SwatchPicker(\n  {\n    colors,\n    value,\n    defaultValue = null,\n    onChange,\n    size = 'md',\n    labels,\n    label,\n    error,\n    helperText,\n    required = false,\n    name,\n    className,\n    'aria-label': ariaLabel,\n    ...props\n  },\n  ref,\n) {\n  const id = useId()\n  const labelId = `${id}-label`\n  const helperId = `${id}-helper`\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is the color string.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue: string | null | undefined =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? ((form!.values[name!] as string | null | undefined) ?? null)\n        : undefined\n  const isControlled = externalValue !== undefined\n  const [internal, setInternal] = useState<string | null>(defaultValue)\n  const selected = isControlled ? externalValue! : internal\n  const active = (selected ?? '').toLowerCase()\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  const pick = (color: string) => {\n    if (!isControlled) setInternal(color)\n    if (isFormBound) form!.setValue(name!, color)\n    onChange?.(color)\n  }\n\n  // roving tabindex (ARIA radiogroup): only the selected swatch — or the first, if none — is tabbable;\n  // arrows move selection between swatches (wrapping), Home/End jump to the ends\n  const swatchRefs = useRef<(HTMLButtonElement | null)[]>([])\n  const selectedIndex = colors.findIndex((c) => c.toLowerCase() === active)\n  const tabbableIndex = selectedIndex >= 0 ? selectedIndex : 0\n  const onSwatchKey = (event: ReactKeyboardEvent<HTMLButtonElement>, index: number) => {\n    let target = index\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        target = (index + 1) % colors.length\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        target = (index - 1 + colors.length) % colors.length\n        break\n      case 'Home':\n        target = 0\n        break\n      case 'End':\n        target = colors.length - 1\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    pick(colors[target])\n    swatchRefs.current[target]?.focus()\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        fieldStyles.field,\n        fieldStyles[size],\n        resolvedError && fieldStyles.error,\n        className,\n      )}\n      {...props}\n    >\n      {label != null && (\n        <label id={labelId} className={fieldStyles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={fieldStyles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-labelledby={label != null ? labelId : undefined}\n        aria-label={label == null ? ariaLabel : undefined}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        className={clsx(styles.swatches, styles[size])}\n        // name + tabIndex are load-bearing for the form's scroll-to-error\n        {...(name ? { name, tabIndex: -1 } : {})}\n      >\n        {colors.map((color, index) => {\n          const isSelected = color.toLowerCase() === active\n          return (\n            <button\n              key={color}\n              ref={(el) => {\n                swatchRefs.current[index] = el\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              aria-label={labels?.[color] ?? color}\n              tabIndex={index === tabbableIndex ? 0 : -1}\n              className={styles.swatch}\n              style={{ '--sw': color } as CSSProperties}\n              onClick={() => pick(color)}\n              onKeyDown={(e) => onSwatchKey(e, index)}\n            >\n              {isSelected ? (\n                <Icon\n                  name=\"TickCircle\"\n                  style={{ width: 'var(--sw-icon)', height: 'var(--sw-icon)' }}\n                />\n              ) : null}\n            </button>\n          )\n        })}\n      </div>\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={fieldStyles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["SwatchPicker","forwardRef","colors","value","defaultValue","onChange","size","labels","label","error","helperText","required","name","className","ariaLabel","props","ref","id","useId","labelId","helperId","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","active","resolvedError","resolvedHelperText","pick","color","swatchRefs","useRef","selectedIndex","c","tabbableIndex","onSwatchKey","event","index","target","_a","jsxs","clsx","fieldStyles","jsx","Typography","styles","isSelected","el","e","Icon"],"mappings":"wXAgEaA,EAAeC,EAAAA,WAA8C,SACxE,CACE,OAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,KACf,SAAAC,EACA,KAAAC,EAAO,KACP,OAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,SAAAC,EAAW,GACX,KAAAC,EACA,UAAAC,EACA,aAAcC,EACd,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAKC,EAAAA,MAAA,EACLC,EAAU,GAAGF,CAAE,SACfG,EAAW,GAAGH,CAAE,UAGhBI,EAAOC,EAAAA,eAAA,EACPC,EAAc,GAAQF,GAAQT,GAC9BY,EAAQH,GAAQT,EAAOS,EAAK,MAAMT,CAAI,EAAI,OAE1Ca,EACJtB,IAAU,OACNA,EACAoB,EACIF,EAAM,OAAOT,CAAK,GAAmC,KACvD,OACFc,EAAeD,IAAkB,OACjC,CAACE,EAAUC,CAAW,EAAIC,EAAAA,SAAwBzB,CAAY,EAE9D0B,IADWJ,EAAeD,EAAiBE,IACrB,IAAI,YAAA,EAE1BI,EAAgBtB,IAASe,GAAA,YAAAA,EAAO,QAAS,GACzCQ,EAAqBtB,IAAcc,GAAA,YAAAA,EAAO,YAE1CS,EAAQC,GAAkB,CACzBR,GAAcE,EAAYM,CAAK,EAChCX,GAAaF,EAAM,SAAST,EAAOsB,CAAK,EAC5C7B,GAAA,MAAAA,EAAW6B,EACb,EAIMC,EAAaC,EAAAA,OAAqC,EAAE,EACpDC,EAAgBnC,EAAO,UAAWoC,GAAMA,EAAE,YAAA,IAAkBR,CAAM,EAClES,EAAgBF,GAAiB,EAAIA,EAAgB,EACrDG,EAAc,CAACC,EAA8CC,IAAkB,OACnF,IAAIC,EAASD,EACb,OAAQD,EAAM,IAAA,CACZ,IAAK,aACL,IAAK,YACHE,GAAUD,EAAQ,GAAKxC,EAAO,OAC9B,MACF,IAAK,YACL,IAAK,UACHyC,GAAUD,EAAQ,EAAIxC,EAAO,QAAUA,EAAO,OAC9C,MACF,IAAK,OACHyC,EAAS,EACT,MACF,IAAK,MACHA,EAASzC,EAAO,OAAS,EACzB,MACF,QACE,MAAA,CAEJuC,EAAM,eAAA,EACNR,EAAK/B,EAAOyC,CAAM,CAAC,GACnBC,EAAAT,EAAW,QAAQQ,CAAM,IAAzB,MAAAC,EAA4B,OAC9B,EAEA,OACEC,EAAAA,KAAC,MAAA,CACC,IAAA7B,EACA,UAAW8B,EAAAA,KACTC,EAAAA,YAAY,MACZA,EAAAA,YAAYzC,CAAI,EAChByB,GAAiBgB,EAAAA,YAAY,MAC7BlC,CAAA,EAED,GAAGE,EAEH,SAAA,CAAAP,GAAS,MACRqC,OAAC,QAAA,CAAM,GAAI1B,EAAS,UAAW4B,EAAAA,YAAY,MACzC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,YAAW,GAAG,OAAO,QAAQ,YAAY,MAAM,QAC7C,SAAAzC,CAAA,CACH,EACCG,SACE,OAAA,CAAK,UAAWoC,EAAAA,YAAY,SAAU,cAAY,OAAO,SAAA,GAAA,CAE1D,CAAA,EAEJ,EAEFC,EAAAA,IAAC,MAAA,CACC,KAAK,aACL,kBAAiBxC,GAAS,KAAOW,EAAU,OAC3C,aAAYX,GAAS,KAAOM,EAAY,OACxC,eAAciB,GAAiB,OAC/B,mBAAkBC,GAAsB,KAAOZ,EAAW,OAC1D,UAAW0B,EAAAA,KAAKI,EAAO,SAAUA,EAAO5C,CAAI,CAAC,EAE5C,GAAIM,EAAO,CAAE,KAAAA,EAAM,SAAU,EAAA,EAAO,CAAA,EAEpC,SAAAV,EAAO,IAAI,CAACgC,EAAOQ,IAAU,CAC5B,MAAMS,EAAajB,EAAM,YAAA,IAAkBJ,EAC3C,OACEkB,EAAAA,IAAC,SAAA,CAEC,IAAMI,GAAO,CACXjB,EAAW,QAAQO,CAAK,EAAIU,CAC9B,EACA,KAAK,SACL,KAAK,QACL,eAAcD,EACd,cAAY5C,GAAA,YAAAA,EAAS2B,KAAUA,EAC/B,SAAUQ,IAAUH,EAAgB,EAAI,GACxC,UAAWW,EAAO,OAClB,MAAO,CAAE,OAAQhB,CAAA,EACjB,QAAS,IAAMD,EAAKC,CAAK,EACzB,UAAYmB,GAAMb,EAAYa,EAAGX,CAAK,EAErC,SAAAS,EACCH,EAAAA,IAACM,EAAAA,KAAA,CACC,KAAK,aACL,MAAO,CAAE,MAAO,iBAAkB,OAAQ,gBAAA,CAAiB,CAAA,EAE3D,IAAA,EAnBCpB,CAAA,CAsBX,CAAC,CAAA,CAAA,EAEFF,GAAsB,MACrBgB,EAAAA,IAACC,EAAAA,WAAA,CACC,GAAG,OACH,GAAI7B,EACJ,QAAQ,YACR,MAAOW,EAAgB,QAAU,QACjC,UAAWgB,EAAAA,YAAY,OAEtB,SAAAf,CAAA,CAAA,CACH,CAAA,CAAA,CAIR,CAAC"}

package/dist/{SwatchPicker-DXEE9xqY.js → SwatchPicker-Bpxk0IOe.js}

@@ -3,7 +3,7 @@ import { forwardRef as U, useId as G, useState as J, useRef as M } from "react";
 import { clsx as L } from "clsx";
 import { u as O } from "./formContext-B7ln1Miy.js";
 import { I as Q } from "./Icon-DaTvzLBu.js";
-import { T as R } from "./Typography-Cta6Rg4L.js";
+import { T as R } from "./Typography-CJv5AnRP.js";
 import { f as n } from "./TextField.module-6gYcR9TL.js";
 const W = "_swatches_1kbcs_3", X = "_sm_1kbcs_13", Y = "_md_1kbcs_18", Z = "_lg_1kbcs_23", z = "_swatch_1kbcs_3", w = {
   swatches: W,
@@ -126,4 +126,4 @@ const W = "_swatches_1kbcs_3", X = "_sm_1kbcs_13", Y = "_md_1kbcs_18", Z = "_lg_
 export {
   ie as S
 };
-//# sourceMappingURL=SwatchPicker-DXEE9xqY.js.map
+//# sourceMappingURL=SwatchPicker-Bpxk0IOe.js.map

package/dist/{SwatchPicker-DXEE9xqY.js.map → SwatchPicker-Bpxk0IOe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SwatchPicker-DXEE9xqY.js","sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\n// shared field chrome (wrapper / label / helper / required / error / sizes)\nimport fieldStyles from '../TextField/TextField.module.css'\nimport styles from './SwatchPicker.module.css'\n\nexport type SwatchPickerSize = 'sm' | 'md' | 'lg'\n\nexport interface SwatchPickerProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** The color values to render as selectable swatches (any CSS color — hex / `rgb()` / …). */\n  colors: string[]\n  /** The selected color (controlled) — matched case-insensitively against `colors`; `null` = none. */\n  value?: string | null\n  /** Initial selected color (uncontrolled). */\n  defaultValue?: string | null\n  /** Fires with the clicked color. */\n  onChange?: (color: string) => void\n  /**\n   * Swatch size — `sm` 30 / `md` 36 / `lg` 42 px, each with its own corner radius and tick size\n   * (12/16/20). Defaults to `md`. All three are per-size CSS vars in the module.\n   */\n  size?: SwatchPickerSize\n  /** Per-color accessible labels (falls back to the color value itself). */\n  labels?: Record<string, string>\n  /** Label rendered above the swatches. */\n  label?: ReactNode\n  /** Marks the field invalid — reddens the label/asterisk and shows `helperText` in the error color. */\n  error?: boolean\n  /** Helper / validation text under the swatches. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Form field name — auto-binds to a surrounding `<Form>` (the form value is the color string). */\n  name?: string\n}\n\n/**\n * A grid of selectable color **swatches** (rounded tiles) — pick one from a fixed palette. The selected\n * swatch shows a centered white **`TickCircle`** icon. Unlike `ColorPicker` (a field + full popover\n * picker), this is a lightweight primitive for a **preset** set of colors — e.g. an accent-color chooser.\n * Controlled (`value` + `onChange`) or uncontrolled (`defaultValue`); binds to a surrounding `<Form>` by\n * `name` (the form value is the color string — validate with e.g. `z.string().min(1, 'Pick a color')`),\n * and shares the field family's `label` / `error` + `helperText` / `required` chrome.\n *\n * Swatch fills are arbitrary CSS colors (fed via an inline `--sw` var), not `--tz-*` tokens — a\n * deliberate exception, like `ColorPicker`'s spectrum. a11y: `role=\"radiogroup\"` (labelled by `label`\n * or `aria-label`) with `role=\"radio\"` + `aria-checked` swatches; the group carries `name` for the\n * form's scroll-to-error.\n */\nexport const SwatchPicker = forwardRef<HTMLDivElement, SwatchPickerProps>(function SwatchPicker(\n  {\n    colors,\n    value,\n    defaultValue = null,\n    onChange,\n    size = 'md',\n    labels,\n    label,\n    error,\n    helperText,\n    required = false,\n    name,\n    className,\n    'aria-label': ariaLabel,\n    ...props\n  },\n  ref,\n) {\n  const id = useId()\n  const labelId = `${id}-label`\n  const helperId = `${id}-helper`\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is the color string.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue: string | null | undefined =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? ((form!.values[name!] as string | null | undefined) ?? null)\n        : undefined\n  const isControlled = externalValue !== undefined\n  const [internal, setInternal] = useState<string | null>(defaultValue)\n  const selected = isControlled ? externalValue! : internal\n  const active = (selected ?? '').toLowerCase()\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  const pick = (color: string) => {\n    if (!isControlled) setInternal(color)\n    if (isFormBound) form!.setValue(name!, color)\n    onChange?.(color)\n  }\n\n  // roving tabindex (ARIA radiogroup): only the selected swatch — or the first, if none — is tabbable;\n  // arrows move selection between swatches (wrapping), Home/End jump to the ends\n  const swatchRefs = useRef<(HTMLButtonElement | null)[]>([])\n  const selectedIndex = colors.findIndex((c) => c.toLowerCase() === active)\n  const tabbableIndex = selectedIndex >= 0 ? selectedIndex : 0\n  const onSwatchKey = (event: ReactKeyboardEvent<HTMLButtonElement>, index: number) => {\n    let target = index\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        target = (index + 1) % colors.length\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        target = (index - 1 + colors.length) % colors.length\n        break\n      case 'Home':\n        target = 0\n        break\n      case 'End':\n        target = colors.length - 1\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    pick(colors[target])\n    swatchRefs.current[target]?.focus()\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        fieldStyles.field,\n        fieldStyles[size],\n        resolvedError && fieldStyles.error,\n        className,\n      )}\n      {...props}\n    >\n      {label != null && (\n        <label id={labelId} className={fieldStyles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={fieldStyles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-labelledby={label != null ? labelId : undefined}\n        aria-label={label == null ? ariaLabel : undefined}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        className={clsx(styles.swatches, styles[size])}\n        // name + tabIndex are load-bearing for the form's scroll-to-error\n        {...(name ? { name, tabIndex: -1 } : {})}\n      >\n        {colors.map((color, index) => {\n          const isSelected = color.toLowerCase() === active\n          return (\n            <button\n              key={color}\n              ref={(el) => {\n                swatchRefs.current[index] = el\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              aria-label={labels?.[color] ?? color}\n              tabIndex={index === tabbableIndex ? 0 : -1}\n              className={styles.swatch}\n              style={{ '--sw': color } as CSSProperties}\n              onClick={() => pick(color)}\n              onKeyDown={(e) => onSwatchKey(e, index)}\n            >\n              {isSelected ? (\n                <Icon\n                  name=\"TickCircle\"\n                  style={{ width: 'var(--sw-icon)', height: 'var(--sw-icon)' }}\n                />\n              ) : null}\n            </button>\n          )\n        })}\n      </div>\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={fieldStyles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["SwatchPicker","forwardRef","colors","value","defaultValue","onChange","size","labels","label","error","helperText","required","name","className","ariaLabel","props","ref","id","useId","labelId","helperId","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","active","resolvedError","resolvedHelperText","pick","color","swatchRefs","useRef","selectedIndex","c","tabbableIndex","onSwatchKey","event","index","target","_a","jsxs","clsx","fieldStyles","jsx","Typography","styles","isSelected","el","e","Icon"],"mappings":"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"}
+{"version":3,"file":"SwatchPicker-Bpxk0IOe.js","sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\n// shared field chrome (wrapper / label / helper / required / error / sizes)\nimport fieldStyles from '../TextField/TextField.module.css'\nimport styles from './SwatchPicker.module.css'\n\nexport type SwatchPickerSize = 'sm' | 'md' | 'lg'\n\nexport interface SwatchPickerProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** The color values to render as selectable swatches (any CSS color — hex / `rgb()` / …). */\n  colors: string[]\n  /** The selected color (controlled) — matched case-insensitively against `colors`; `null` = none. */\n  value?: string | null\n  /** Initial selected color (uncontrolled). */\n  defaultValue?: string | null\n  /** Fires with the clicked color. */\n  onChange?: (color: string) => void\n  /**\n   * Swatch size — `sm` 30 / `md` 36 / `lg` 42 px, each with its own corner radius and tick size\n   * (12/16/20). Defaults to `md`. All three are per-size CSS vars in the module.\n   */\n  size?: SwatchPickerSize\n  /** Per-color accessible labels (falls back to the color value itself). */\n  labels?: Record<string, string>\n  /** Label rendered above the swatches. */\n  label?: ReactNode\n  /** Marks the field invalid — reddens the label/asterisk and shows `helperText` in the error color. */\n  error?: boolean\n  /** Helper / validation text under the swatches. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Form field name — auto-binds to a surrounding `<Form>` (the form value is the color string). */\n  name?: string\n}\n\n/**\n * A grid of selectable color **swatches** (rounded tiles) — pick one from a fixed palette. The selected\n * swatch shows a centered white **`TickCircle`** icon. Unlike `ColorPicker` (a field + full popover\n * picker), this is a lightweight primitive for a **preset** set of colors — e.g. an accent-color chooser.\n * Controlled (`value` + `onChange`) or uncontrolled (`defaultValue`); binds to a surrounding `<Form>` by\n * `name` (the form value is the color string — validate with e.g. `z.string().min(1, 'Pick a color')`),\n * and shares the field family's `label` / `error` + `helperText` / `required` chrome.\n *\n * Swatch fills are arbitrary CSS colors (fed via an inline `--sw` var), not `--tz-*` tokens — a\n * deliberate exception, like `ColorPicker`'s spectrum. a11y: `role=\"radiogroup\"` (labelled by `label`\n * or `aria-label`) with `role=\"radio\"` + `aria-checked` swatches; the group carries `name` for the\n * form's scroll-to-error.\n */\nexport const SwatchPicker = forwardRef<HTMLDivElement, SwatchPickerProps>(function SwatchPicker(\n  {\n    colors,\n    value,\n    defaultValue = null,\n    onChange,\n    size = 'md',\n    labels,\n    label,\n    error,\n    helperText,\n    required = false,\n    name,\n    className,\n    'aria-label': ariaLabel,\n    ...props\n  },\n  ref,\n) {\n  const id = useId()\n  const labelId = `${id}-label`\n  const helperId = `${id}-helper`\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is the color string.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue: string | null | undefined =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? ((form!.values[name!] as string | null | undefined) ?? null)\n        : undefined\n  const isControlled = externalValue !== undefined\n  const [internal, setInternal] = useState<string | null>(defaultValue)\n  const selected = isControlled ? externalValue! : internal\n  const active = (selected ?? '').toLowerCase()\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  const pick = (color: string) => {\n    if (!isControlled) setInternal(color)\n    if (isFormBound) form!.setValue(name!, color)\n    onChange?.(color)\n  }\n\n  // roving tabindex (ARIA radiogroup): only the selected swatch — or the first, if none — is tabbable;\n  // arrows move selection between swatches (wrapping), Home/End jump to the ends\n  const swatchRefs = useRef<(HTMLButtonElement | null)[]>([])\n  const selectedIndex = colors.findIndex((c) => c.toLowerCase() === active)\n  const tabbableIndex = selectedIndex >= 0 ? selectedIndex : 0\n  const onSwatchKey = (event: ReactKeyboardEvent<HTMLButtonElement>, index: number) => {\n    let target = index\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        target = (index + 1) % colors.length\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        target = (index - 1 + colors.length) % colors.length\n        break\n      case 'Home':\n        target = 0\n        break\n      case 'End':\n        target = colors.length - 1\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    pick(colors[target])\n    swatchRefs.current[target]?.focus()\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        fieldStyles.field,\n        fieldStyles[size],\n        resolvedError && fieldStyles.error,\n        className,\n      )}\n      {...props}\n    >\n      {label != null && (\n        <label id={labelId} className={fieldStyles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={fieldStyles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-labelledby={label != null ? labelId : undefined}\n        aria-label={label == null ? ariaLabel : undefined}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        className={clsx(styles.swatches, styles[size])}\n        // name + tabIndex are load-bearing for the form's scroll-to-error\n        {...(name ? { name, tabIndex: -1 } : {})}\n      >\n        {colors.map((color, index) => {\n          const isSelected = color.toLowerCase() === active\n          return (\n            <button\n              key={color}\n              ref={(el) => {\n                swatchRefs.current[index] = el\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={isSelected}\n              aria-label={labels?.[color] ?? color}\n              tabIndex={index === tabbableIndex ? 0 : -1}\n              className={styles.swatch}\n              style={{ '--sw': color } as CSSProperties}\n              onClick={() => pick(color)}\n              onKeyDown={(e) => onSwatchKey(e, index)}\n            >\n              {isSelected ? (\n                <Icon\n                  name=\"TickCircle\"\n                  style={{ width: 'var(--sw-icon)', height: 'var(--sw-icon)' }}\n                />\n              ) : null}\n            </button>\n          )\n        })}\n      </div>\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={fieldStyles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["SwatchPicker","forwardRef","colors","value","defaultValue","onChange","size","labels","label","error","helperText","required","name","className","ariaLabel","props","ref","id","useId","labelId","helperId","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","active","resolvedError","resolvedHelperText","pick","color","swatchRefs","useRef","selectedIndex","c","tabbableIndex","onSwatchKey","event","index","target","_a","jsxs","clsx","fieldStyles","jsx","Typography","styles","isSelected","el","e","Icon"],"mappings":";;;;;;;;;;;;;GAgEaA,KAAeC,EAA8C,SACxE;AAAA,EACE,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAcC;AAAA,EACd,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAKC,EAAA,GACLC,IAAU,GAAGF,CAAE,UACfG,IAAW,GAAGH,CAAE,WAGhBI,IAAOC,EAAA,GACPC,IAAc,GAAQF,KAAQT,IAC9BY,IAAQH,KAAQT,IAAOS,EAAK,MAAMT,CAAI,IAAI,QAE1Ca,IACJtB,MAAU,SACNA,IACAoB,IACIF,EAAM,OAAOT,CAAK,KAAmC,OACvD,QACFc,IAAeD,MAAkB,QACjC,CAACE,GAAUC,CAAW,IAAIC,EAAwBzB,CAAY,GAE9D0B,MADWJ,IAAeD,IAAiBE,MACrB,IAAI,YAAA,GAE1BI,IAAgBtB,MAASe,KAAA,gBAAAA,EAAO,UAAS,IACzCQ,IAAqBtB,MAAcc,KAAA,gBAAAA,EAAO,aAE1CS,IAAO,CAACC,MAAkB;AAC9B,IAAKR,KAAcE,EAAYM,CAAK,GAChCX,KAAaF,EAAM,SAAST,GAAOsB,CAAK,GAC5C7B,KAAA,QAAAA,EAAW6B;AAAA,EACb,GAIMC,IAAaC,EAAqC,EAAE,GACpDC,IAAgBnC,EAAO,UAAU,CAACoC,MAAMA,EAAE,YAAA,MAAkBR,CAAM,GAClES,IAAgBF,KAAiB,IAAIA,IAAgB,GACrDG,IAAc,CAACC,GAA8CC,MAAkB;;AACnF,QAAIC,IAASD;AACb,YAAQD,EAAM,KAAA;AAAA,MACZ,KAAK;AAAA,MACL,KAAK;AACH,QAAAE,KAAUD,IAAQ,KAAKxC,EAAO;AAC9B;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AACH,QAAAyC,KAAUD,IAAQ,IAAIxC,EAAO,UAAUA,EAAO;AAC9C;AAAA,MACF,KAAK;AACH,QAAAyC,IAAS;AACT;AAAA,MACF,KAAK;AACH,QAAAA,IAASzC,EAAO,SAAS;AACzB;AAAA,MACF;AACE;AAAA,IAAA;AAEJ,IAAAuC,EAAM,eAAA,GACNR,EAAK/B,EAAOyC,CAAM,CAAC,IACnBC,IAAAT,EAAW,QAAQQ,CAAM,MAAzB,QAAAC,EAA4B;AAAA,EAC9B;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAA7B;AAAA,MACA,WAAW8B;AAAA,QACTC,EAAY;AAAA,QACZA,EAAYzC,CAAI;AAAA,QAChByB,KAAiBgB,EAAY;AAAA,QAC7BlC;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAP,KAAS,QACR,gBAAAqC,EAAC,SAAA,EAAM,IAAI1B,GAAS,WAAW4B,EAAY,OACzC,UAAA;AAAA,UAAA,gBAAAC,EAACC,KAAW,IAAG,QAAO,SAAQ,aAAY,OAAM,SAC7C,UAAAzC,EAAA,CACH;AAAA,UACCG,uBACE,QAAA,EAAK,WAAWoC,EAAY,UAAU,eAAY,QAAO,UAAA,IAAA,CAE1D;AAAA,QAAA,GAEJ;AAAA,QAEF,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,mBAAiBxC,KAAS,OAAOW,IAAU;AAAA,YAC3C,cAAYX,KAAS,OAAOM,IAAY;AAAA,YACxC,gBAAciB,KAAiB;AAAA,YAC/B,oBAAkBC,KAAsB,OAAOZ,IAAW;AAAA,YAC1D,WAAW0B,EAAKI,EAAO,UAAUA,EAAO5C,CAAI,CAAC;AAAA,YAE5C,GAAIM,IAAO,EAAE,MAAAA,GAAM,UAAU,GAAA,IAAO,CAAA;AAAA,YAEpC,UAAAV,EAAO,IAAI,CAACgC,GAAOQ,MAAU;AAC5B,oBAAMS,IAAajB,EAAM,YAAA,MAAkBJ;AAC3C,qBACE,gBAAAkB;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC,KAAK,CAACI,MAAO;AACX,oBAAAjB,EAAW,QAAQO,CAAK,IAAIU;AAAA,kBAC9B;AAAA,kBACA,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,gBAAcD;AAAA,kBACd,eAAY5C,KAAA,gBAAAA,EAAS2B,OAAUA;AAAA,kBAC/B,UAAUQ,MAAUH,IAAgB,IAAI;AAAA,kBACxC,WAAWW,EAAO;AAAA,kBAClB,OAAO,EAAE,QAAQhB,EAAA;AAAA,kBACjB,SAAS,MAAMD,EAAKC,CAAK;AAAA,kBACzB,WAAW,CAACmB,MAAMb,EAAYa,GAAGX,CAAK;AAAA,kBAErC,UAAAS,IACC,gBAAAH;AAAA,oBAACM;AAAA,oBAAA;AAAA,sBACC,MAAK;AAAA,sBACL,OAAO,EAAE,OAAO,kBAAkB,QAAQ,iBAAA;AAAA,oBAAiB;AAAA,kBAAA,IAE3D;AAAA,gBAAA;AAAA,gBAnBCpB;AAAA,cAAA;AAAA,YAsBX,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFF,KAAsB,QACrB,gBAAAgB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAI7B;AAAA,YACJ,SAAQ;AAAA,YACR,OAAOW,IAAgB,UAAU;AAAA,YACjC,WAAWgB,EAAY;AAAA,YAEtB,UAAAf;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/Switch-DSs2Y0IR.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),a=require("react"),b=require("clsx"),E=require("./formContext-bTWrqdEV.cjs"),V="_field_1hhz8_1",A="_row_1hhz8_9",D="_disabled_1hhz8_21",G="_input_1hhz8_27",H="_track_1hhz8_41",J="_thumb_1hhz8_60",K="_error_1hhz8_72",L="_label_1hhz8_76",M="_required_1hhz8_81",O="_sm_1hhz8_87",P="_md_1hhz8_99",Q="_lg_1hhz8_111",s={field:V,row:A,disabled:D,input:G,track:H,thumb:J,error:K,label:L,required:M,sm:O,md:P,lg:Q},T=a.forwardRef(function({label:d,color:h="accent",size:p="md",error:v,required:w=!1,checked:_,defaultChecked:j=!1,onChange:l,name:t,onBlur:n,disabled:u=!1,id:k,className:q,style:N,...g},S){const y=a.useId(),C=k??y,c=E.useFormContext(),f=!!(c&&t),r=c&&t?c.field(t):void 0,m=_!==void 0?_:f?!!c.values[t]:void 0,x=m!==void 0,[I,B]=a.useState(j),F=x?m:I,z=v??(r==null?void 0:r.error)??!1,R=o=>{const i=o.target.checked;x||B(i),f&&c.setValue(t,i),l==null||l(i)},$=o=>{r==null||r.onBlur(o),n==null||n(o)};return e.jsx("div",{className:b.clsx(s.field,z&&s.error,u&&s.disabled,q),style:{"--tz-btn-rgb":`var(--tz-color-${h}-rgb)`,"--tz-btn-on":`var(--tz-color-${h}-contrast, #fff)`,...N},children:e.jsxs("label",{className:b.clsx(s.row,s[p]),children:[e.jsx("input",{ref:S,id:C,name:t,type:"checkbox",role:"switch",className:s.input,checked:F,onChange:R,onBlur:$,disabled:u,"aria-invalid":z||void 0,...g}),e.jsx("span",{className:s.track,"aria-hidden":"true",children:e.jsx("span",{className:s.thumb})}),d!=null&&e.jsxs("span",{className:s.label,children:[d,w&&e.jsx("span",{className:s.required,"aria-hidden":"true",children:"*"})]})]})})});exports.Switch=T;
+//# sourceMappingURL=Switch-DSs2Y0IR.cjs.map

package/dist/{Switch-CodRZD3y.cjs.map → Switch-DSs2Y0IR.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Switch-CodRZD3y.cjs","sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Switch.module.css'\n\nexport type SwitchSize = 'sm' | 'md' | 'lg'\n\nexport interface SwitchProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'color' | 'type' | 'onChange'\n> {\n  /** Text shown to the right of the switch. */\n  label?: ReactNode\n  /** Theme palette token used for the \"on\" fill. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — track/thumb dimensions and label font. */\n  size?: SwitchSize\n  /** Marks the field invalid — reddens the track ring (no helper text). */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Controlled on/off state. */\n  checked?: boolean\n  /** Initial state for uncontrolled use. Defaults to `false`. */\n  defaultChecked?: boolean\n  /** Fires with the next on/off state. */\n  onChange?: (checked: boolean) => void\n}\n\n/**\n * A toggle switch. The native `<input type=\"checkbox\" role=\"switch\">` is visually hidden but fully\n * accessible (keyboard + screen reader); a styled track + sliding thumb show the state, the track\n * filling with `color` when on. Controlled (`checked` + `onChange`) or uncontrolled (`defaultChecked`),\n * and — like the other fields — binds to a surrounding `<Form>` by `name` (its form value is a\n * `boolean`). `error` reddens the track (no message text). Styling uses `--tz-*` tokens only.\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    label,\n    color = 'accent',\n    size = 'md',\n    error,\n    required = false,\n    checked,\n    defaultChecked = false,\n    onChange,\n    name,\n    onBlur,\n    disabled = false,\n    id: idProp,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const reactId = useId()\n  const id = idProp ?? reactId\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is a boolean.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalChecked: boolean | undefined =\n    checked !== undefined ? checked : isFormBound ? Boolean(form!.values[name!]) : undefined\n  const isControlled = externalChecked !== undefined\n  const [internal, setInternal] = useState<boolean>(defaultChecked)\n  const isChecked = isControlled ? externalChecked! : internal\n\n  const resolvedError = error ?? bound?.error ?? false\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const next = event.target.checked\n    if (!isControlled) setInternal(next)\n    if (isFormBound) form!.setValue(name!, next)\n    onChange?.(next)\n  }\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    bound?.onBlur(event)\n    onBlur?.(event)\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles.field,\n        resolvedError && styles.error,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <label className={clsx(styles.row, styles[size])}>\n        <input\n          ref={ref}\n          id={id}\n          name={name}\n          type=\"checkbox\"\n          role=\"switch\"\n          className={styles.input}\n          checked={isChecked}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          disabled={disabled}\n          aria-invalid={resolvedError || undefined}\n          {...props}\n        />\n        <span className={styles.track} aria-hidden=\"true\">\n          <span className={styles.thumb} />\n        </span>\n        {label != null && (\n          <span className={styles.label}>\n            {label}\n            {required && (\n              <span className={styles.required} aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </span>\n        )}\n      </label>\n    </div>\n  )\n})\n"],"names":["Switch","forwardRef","label","color","size","error","required","checked","defaultChecked","onChange","name","onBlur","disabled","idProp","className","style","props","ref","reactId","useId","id","form","useFormContext","isFormBound","bound","externalChecked","isControlled","internal","setInternal","useState","isChecked","resolvedError","handleChange","event","next","handleBlur","jsx","clsx","styles","jsxs"],"mappings":"wcA8CaA,EAASC,EAAAA,WAA0C,SAC9D,CACE,MAAAC,EACA,MAAAC,EAAQ,SACR,KAAAC,EAAO,KACP,MAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EACA,eAAAC,EAAiB,GACjB,SAAAC,EACA,KAAAC,EACA,OAAAC,EACA,SAAAC,EAAW,GACX,GAAIC,EACJ,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAUC,EAAAA,MAAA,EACVC,EAAKP,GAAUK,EAGfG,EAAOC,EAAAA,eAAA,EACPC,EAAc,GAAQF,GAAQX,GAC9Bc,EAAQH,GAAQX,EAAOW,EAAK,MAAMX,CAAI,EAAI,OAE1Ce,EACJlB,IAAY,OAAYA,EAAUgB,EAAc,EAAQF,EAAM,OAAOX,CAAK,EAAK,OAC3EgB,EAAeD,IAAoB,OACnC,CAACE,EAAUC,CAAW,EAAIC,EAAAA,SAAkBrB,CAAc,EAC1DsB,EAAYJ,EAAeD,EAAmBE,EAE9CI,EAAgB1B,IAASmB,GAAA,YAAAA,EAAO,QAAS,GAEzCQ,EAAgBC,GAAyC,CAC7D,MAAMC,EAAOD,EAAM,OAAO,QACrBP,GAAcE,EAAYM,CAAI,EAC/BX,GAAaF,EAAM,SAASX,EAAOwB,CAAI,EAC3CzB,GAAA,MAAAA,EAAWyB,EACb,EAEMC,EAAcF,GAAwC,CAC1DT,GAAA,MAAAA,EAAO,OAAOS,GACdtB,GAAA,MAAAA,EAASsB,EACX,EAEA,OACEG,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,KACTC,EAAO,MACPP,GAAiBO,EAAO,MACxB1B,GAAY0B,EAAO,SACnBxB,CAAA,EAEF,MACE,CACE,eAAgB,kBAAkBX,CAAK,QACvC,cAAe,kBAAkBA,CAAK,mBACtC,GAAGY,CAAA,EAIP,SAAAwB,EAAAA,KAAC,SAAM,UAAWF,EAAAA,KAAKC,EAAO,IAAKA,EAAOlC,CAAI,CAAC,EAC7C,SAAA,CAAAgC,EAAAA,IAAC,QAAA,CACC,IAAAnB,EACA,GAAAG,EACA,KAAAV,EACA,KAAK,WACL,KAAK,SACL,UAAW4B,EAAO,MAClB,QAASR,EACT,SAAUE,EACV,OAAQG,EACR,SAAAvB,EACA,eAAcmB,GAAiB,OAC9B,GAAGf,CAAA,CAAA,EAENoB,EAAAA,IAAC,OAAA,CAAK,UAAWE,EAAO,MAAO,cAAY,OACzC,SAAAF,EAAAA,IAAC,OAAA,CAAK,UAAWE,EAAO,KAAA,CAAO,EACjC,EACCpC,GAAS,MACRqC,EAAAA,KAAC,OAAA,CAAK,UAAWD,EAAO,MACrB,SAAA,CAAApC,EACAI,SACE,OAAA,CAAK,UAAWgC,EAAO,SAAU,cAAY,OAAO,SAAA,GAAA,CAErD,CAAA,CAAA,CAEJ,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN,CAAC"}
+{"version":3,"file":"Switch-DSs2Y0IR.cjs","sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Switch.module.css'\n\nexport type SwitchSize = 'sm' | 'md' | 'lg'\n\nexport interface SwitchProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'color' | 'type' | 'onChange'\n> {\n  /** Text shown to the right of the switch. */\n  label?: ReactNode\n  /** Theme palette token used for the \"on\" fill. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — track/thumb dimensions and label font. */\n  size?: SwitchSize\n  /** Marks the field invalid — reddens the track ring (no helper text). */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Controlled on/off state. */\n  checked?: boolean\n  /** Initial state for uncontrolled use. Defaults to `false`. */\n  defaultChecked?: boolean\n  /** Fires with the next on/off state. */\n  onChange?: (checked: boolean) => void\n}\n\n/**\n * A toggle switch. The native `<input type=\"checkbox\" role=\"switch\">` is visually hidden but fully\n * accessible (keyboard + screen reader); a styled track + sliding thumb show the state, the track\n * filling with `color` when on. Controlled (`checked` + `onChange`) or uncontrolled (`defaultChecked`),\n * and — like the other fields — binds to a surrounding `<Form>` by `name` (its form value is a\n * `boolean`). `error` reddens the track (no message text). Styling uses `--tz-*` tokens only.\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    label,\n    color = 'accent',\n    size = 'md',\n    error,\n    required = false,\n    checked,\n    defaultChecked = false,\n    onChange,\n    name,\n    onBlur,\n    disabled = false,\n    id: idProp,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const reactId = useId()\n  const id = idProp ?? reactId\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is a boolean.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalChecked: boolean | undefined =\n    checked !== undefined ? checked : isFormBound ? Boolean(form!.values[name!]) : undefined\n  const isControlled = externalChecked !== undefined\n  const [internal, setInternal] = useState<boolean>(defaultChecked)\n  const isChecked = isControlled ? externalChecked! : internal\n\n  const resolvedError = error ?? bound?.error ?? false\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const next = event.target.checked\n    if (!isControlled) setInternal(next)\n    if (isFormBound) form!.setValue(name!, next)\n    onChange?.(next)\n  }\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    bound?.onBlur(event)\n    onBlur?.(event)\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles.field,\n        resolvedError && styles.error,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <label className={clsx(styles.row, styles[size])}>\n        <input\n          ref={ref}\n          id={id}\n          name={name}\n          type=\"checkbox\"\n          role=\"switch\"\n          className={styles.input}\n          checked={isChecked}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          disabled={disabled}\n          aria-invalid={resolvedError || undefined}\n          {...props}\n        />\n        <span className={styles.track} aria-hidden=\"true\">\n          <span className={styles.thumb} />\n        </span>\n        {label != null && (\n          <span className={styles.label}>\n            {label}\n            {required && (\n              <span className={styles.required} aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </span>\n        )}\n      </label>\n    </div>\n  )\n})\n"],"names":["Switch","forwardRef","label","color","size","error","required","checked","defaultChecked","onChange","name","onBlur","disabled","idProp","className","style","props","ref","reactId","useId","id","form","useFormContext","isFormBound","bound","externalChecked","isControlled","internal","setInternal","useState","isChecked","resolvedError","handleChange","event","next","handleBlur","jsx","clsx","styles","jsxs"],"mappings":"wcA8CaA,EAASC,EAAAA,WAA0C,SAC9D,CACE,MAAAC,EACA,MAAAC,EAAQ,SACR,KAAAC,EAAO,KACP,MAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EACA,eAAAC,EAAiB,GACjB,SAAAC,EACA,KAAAC,EACA,OAAAC,EACA,SAAAC,EAAW,GACX,GAAIC,EACJ,UAAAC,EACA,MAAAC,EACA,GAAGC,CACL,EACAC,EACA,CACA,MAAMC,EAAUC,EAAAA,MAAA,EACVC,EAAKP,GAAUK,EAGfG,EAAOC,EAAAA,eAAA,EACPC,EAAc,GAAQF,GAAQX,GAC9Bc,EAAQH,GAAQX,EAAOW,EAAK,MAAMX,CAAI,EAAI,OAE1Ce,EACJlB,IAAY,OAAYA,EAAUgB,EAAc,EAAQF,EAAM,OAAOX,CAAK,EAAK,OAC3EgB,EAAeD,IAAoB,OACnC,CAACE,EAAUC,CAAW,EAAIC,EAAAA,SAAkBrB,CAAc,EAC1DsB,EAAYJ,EAAeD,EAAmBE,EAE9CI,EAAgB1B,IAASmB,GAAA,YAAAA,EAAO,QAAS,GAEzCQ,EAAgBC,GAAyC,CAC7D,MAAMC,EAAOD,EAAM,OAAO,QACrBP,GAAcE,EAAYM,CAAI,EAC/BX,GAAaF,EAAM,SAASX,EAAOwB,CAAI,EAC3CzB,GAAA,MAAAA,EAAWyB,EACb,EAEMC,EAAcF,GAAwC,CAC1DT,GAAA,MAAAA,EAAO,OAAOS,GACdtB,GAAA,MAAAA,EAASsB,EACX,EAEA,OACEG,EAAAA,IAAC,MAAA,CACC,UAAWC,EAAAA,KACTC,EAAO,MACPP,GAAiBO,EAAO,MACxB1B,GAAY0B,EAAO,SACnBxB,CAAA,EAEF,MACE,CACE,eAAgB,kBAAkBX,CAAK,QACvC,cAAe,kBAAkBA,CAAK,mBACtC,GAAGY,CAAA,EAIP,SAAAwB,EAAAA,KAAC,SAAM,UAAWF,EAAAA,KAAKC,EAAO,IAAKA,EAAOlC,CAAI,CAAC,EAC7C,SAAA,CAAAgC,EAAAA,IAAC,QAAA,CACC,IAAAnB,EACA,GAAAG,EACA,KAAAV,EACA,KAAK,WACL,KAAK,SACL,UAAW4B,EAAO,MAClB,QAASR,EACT,SAAUE,EACV,OAAQG,EACR,SAAAvB,EACA,eAAcmB,GAAiB,OAC9B,GAAGf,CAAA,CAAA,EAENoB,EAAAA,IAAC,OAAA,CAAK,UAAWE,EAAO,MAAO,cAAY,OACzC,SAAAF,EAAAA,IAAC,OAAA,CAAK,UAAWE,EAAO,KAAA,CAAO,EACjC,EACCpC,GAAS,MACRqC,EAAAA,KAAC,OAAA,CAAK,UAAWD,EAAO,MACrB,SAAA,CAAApC,EACAI,SACE,OAAA,CAAK,UAAWgC,EAAO,SAAU,cAAY,OAAO,SAAA,GAAA,CAErD,CAAA,CAAA,CAEJ,CAAA,CAAA,CAEJ,CAAA,CAAA,CAGN,CAAC"}

package/dist/Switch-Jh2Ch8GO.js

@@ -0,0 +1,85 @@
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { forwardRef as R, useId as V, useState as A } from "react";
+import { clsx as b } from "clsx";
+import { u as D } from "./formContext-B7ln1Miy.js";
+const G = "_field_1hhz8_1", H = "_row_1hhz8_9", J = "_disabled_1hhz8_21", K = "_input_1hhz8_27", L = "_track_1hhz8_41", M = "_thumb_1hhz8_60", O = "_error_1hhz8_72", P = "_label_1hhz8_76", Q = "_required_1hhz8_81", T = "_sm_1hhz8_87", U = "_md_1hhz8_99", W = "_lg_1hhz8_111", t = {
+  field: G,
+  row: H,
+  disabled: J,
+  input: K,
+  track: L,
+  thumb: M,
+  error: O,
+  label: P,
+  required: Q,
+  sm: T,
+  md: U,
+  lg: W
+}, et = R(function({
+  label: n,
+  color: d = "accent",
+  size: v = "md",
+  error: k,
+  required: w = !1,
+  checked: h,
+  defaultChecked: x = !1,
+  onChange: l,
+  name: s,
+  onBlur: a,
+  disabled: _ = !1,
+  id: N,
+  className: g,
+  style: q,
+  ...S
+}, y) {
+  const I = V(), j = N ?? I, r = D(), m = !!(r && s), e = r && s ? r.field(s) : void 0, f = h !== void 0 ? h : m ? !!r.values[s] : void 0, u = f !== void 0, [B, C] = A(x), F = u ? f : B, z = k ?? (e == null ? void 0 : e.error) ?? !1, $ = (c) => {
+    const i = c.target.checked;
+    u || C(i), m && r.setValue(s, i), l == null || l(i);
+  }, E = (c) => {
+    e == null || e.onBlur(c), a == null || a(c);
+  };
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: b(
+        t.field,
+        z && t.error,
+        _ && t.disabled,
+        g
+      ),
+      style: {
+        "--tz-btn-rgb": `var(--tz-color-${d}-rgb)`,
+        "--tz-btn-on": `var(--tz-color-${d}-contrast, #fff)`,
+        ...q
+      },
+      children: /* @__PURE__ */ p("label", { className: b(t.row, t[v]), children: [
+        /* @__PURE__ */ o(
+          "input",
+          {
+            ref: y,
+            id: j,
+            name: s,
+            type: "checkbox",
+            role: "switch",
+            className: t.input,
+            checked: F,
+            onChange: $,
+            onBlur: E,
+            disabled: _,
+            "aria-invalid": z || void 0,
+            ...S
+          }
+        ),
+        /* @__PURE__ */ o("span", { className: t.track, "aria-hidden": "true", children: /* @__PURE__ */ o("span", { className: t.thumb }) }),
+        n != null && /* @__PURE__ */ p("span", { className: t.label, children: [
+          n,
+          w && /* @__PURE__ */ o("span", { className: t.required, "aria-hidden": "true", children: "*" })
+        ] })
+      ] })
+    }
+  );
+});
+export {
+  et as S
+};
+//# sourceMappingURL=Switch-Jh2Ch8GO.js.map

package/dist/{Switch-ESrhkpJC.js.map → Switch-Jh2Ch8GO.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Switch-ESrhkpJC.js","sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Switch.module.css'\n\nexport type SwitchSize = 'sm' | 'md' | 'lg'\n\nexport interface SwitchProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'color' | 'type' | 'onChange'\n> {\n  /** Text shown to the right of the switch. */\n  label?: ReactNode\n  /** Theme palette token used for the \"on\" fill. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — track/thumb dimensions and label font. */\n  size?: SwitchSize\n  /** Marks the field invalid — reddens the track ring (no helper text). */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Controlled on/off state. */\n  checked?: boolean\n  /** Initial state for uncontrolled use. Defaults to `false`. */\n  defaultChecked?: boolean\n  /** Fires with the next on/off state. */\n  onChange?: (checked: boolean) => void\n}\n\n/**\n * A toggle switch. The native `<input type=\"checkbox\" role=\"switch\">` is visually hidden but fully\n * accessible (keyboard + screen reader); a styled track + sliding thumb show the state, the track\n * filling with `color` when on. Controlled (`checked` + `onChange`) or uncontrolled (`defaultChecked`),\n * and — like the other fields — binds to a surrounding `<Form>` by `name` (its form value is a\n * `boolean`). `error` reddens the track (no message text). Styling uses `--tz-*` tokens only.\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    label,\n    color = 'accent',\n    size = 'md',\n    error,\n    required = false,\n    checked,\n    defaultChecked = false,\n    onChange,\n    name,\n    onBlur,\n    disabled = false,\n    id: idProp,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const reactId = useId()\n  const id = idProp ?? reactId\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is a boolean.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalChecked: boolean | undefined =\n    checked !== undefined ? checked : isFormBound ? Boolean(form!.values[name!]) : undefined\n  const isControlled = externalChecked !== undefined\n  const [internal, setInternal] = useState<boolean>(defaultChecked)\n  const isChecked = isControlled ? externalChecked! : internal\n\n  const resolvedError = error ?? bound?.error ?? false\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const next = event.target.checked\n    if (!isControlled) setInternal(next)\n    if (isFormBound) form!.setValue(name!, next)\n    onChange?.(next)\n  }\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    bound?.onBlur(event)\n    onBlur?.(event)\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles.field,\n        resolvedError && styles.error,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <label className={clsx(styles.row, styles[size])}>\n        <input\n          ref={ref}\n          id={id}\n          name={name}\n          type=\"checkbox\"\n          role=\"switch\"\n          className={styles.input}\n          checked={isChecked}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          disabled={disabled}\n          aria-invalid={resolvedError || undefined}\n          {...props}\n        />\n        <span className={styles.track} aria-hidden=\"true\">\n          <span className={styles.thumb} />\n        </span>\n        {label != null && (\n          <span className={styles.label}>\n            {label}\n            {required && (\n              <span className={styles.required} aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </span>\n        )}\n      </label>\n    </div>\n  )\n})\n"],"names":["Switch","forwardRef","label","color","size","error","required","checked","defaultChecked","onChange","name","onBlur","disabled","idProp","className","style","props","ref","reactId","useId","id","form","useFormContext","isFormBound","bound","externalChecked","isControlled","internal","setInternal","useState","isChecked","resolvedError","handleChange","event","next","handleBlur","jsx","clsx","styles","jsxs"],"mappings":";;;;;;;;;;;;;;;;;GA8CaA,KAASC,EAA0C,SAC9D;AAAA,EACE,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,IAAIC;AAAA,EACJ,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAAA,GACVC,IAAKP,KAAUK,GAGfG,IAAOC,EAAA,GACPC,IAAc,GAAQF,KAAQX,IAC9Bc,IAAQH,KAAQX,IAAOW,EAAK,MAAMX,CAAI,IAAI,QAE1Ce,IACJlB,MAAY,SAAYA,IAAUgB,IAAc,EAAQF,EAAM,OAAOX,CAAK,IAAK,QAC3EgB,IAAeD,MAAoB,QACnC,CAACE,GAAUC,CAAW,IAAIC,EAAkBrB,CAAc,GAC1DsB,IAAYJ,IAAeD,IAAmBE,GAE9CI,IAAgB1B,MAASmB,KAAA,gBAAAA,EAAO,UAAS,IAEzCQ,IAAe,CAACC,MAAyC;AAC7D,UAAMC,IAAOD,EAAM,OAAO;AAC1B,IAAKP,KAAcE,EAAYM,CAAI,GAC/BX,KAAaF,EAAM,SAASX,GAAOwB,CAAI,GAC3CzB,KAAA,QAAAA,EAAWyB;AAAA,EACb,GAEMC,IAAa,CAACF,MAAwC;AAC1D,IAAAT,KAAA,QAAAA,EAAO,OAAOS,IACdtB,KAAA,QAAAA,EAASsB;AAAA,EACX;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO;AAAA,QACPP,KAAiBO,EAAO;AAAA,QACxB1B,KAAY0B,EAAO;AAAA,QACnBxB;AAAA,MAAA;AAAA,MAEF,OACE;AAAA,QACE,gBAAgB,kBAAkBX,CAAK;AAAA,QACvC,eAAe,kBAAkBA,CAAK;AAAA,QACtC,GAAGY;AAAA,MAAA;AAAA,MAIP,UAAA,gBAAAwB,EAAC,WAAM,WAAWF,EAAKC,EAAO,KAAKA,EAAOlC,CAAI,CAAC,GAC7C,UAAA;AAAA,QAAA,gBAAAgC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAnB;AAAA,YACA,IAAAG;AAAA,YACA,MAAAV;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,WAAW4B,EAAO;AAAA,YAClB,SAASR;AAAA,YACT,UAAUE;AAAA,YACV,QAAQG;AAAA,YACR,UAAAvB;AAAA,YACA,gBAAcmB,KAAiB;AAAA,YAC9B,GAAGf;AAAA,UAAA;AAAA,QAAA;AAAA,QAEN,gBAAAoB,EAAC,QAAA,EAAK,WAAWE,EAAO,OAAO,eAAY,QACzC,UAAA,gBAAAF,EAAC,QAAA,EAAK,WAAWE,EAAO,MAAA,CAAO,GACjC;AAAA,QACCpC,KAAS,QACR,gBAAAqC,EAAC,QAAA,EAAK,WAAWD,EAAO,OACrB,UAAA;AAAA,UAAApC;AAAA,UACAI,uBACE,QAAA,EAAK,WAAWgC,EAAO,UAAU,eAAY,QAAO,UAAA,IAAA,CAErD;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"Switch-Jh2Ch8GO.js","sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport type { ThemeColor } from '../../theme'\nimport styles from './Switch.module.css'\n\nexport type SwitchSize = 'sm' | 'md' | 'lg'\n\nexport interface SwitchProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'color' | 'type' | 'onChange'\n> {\n  /** Text shown to the right of the switch. */\n  label?: ReactNode\n  /** Theme palette token used for the \"on\" fill. Defaults to `accent`. */\n  color?: ThemeColor\n  /** Preset size — track/thumb dimensions and label font. */\n  size?: SwitchSize\n  /** Marks the field invalid — reddens the track ring (no helper text). */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Controlled on/off state. */\n  checked?: boolean\n  /** Initial state for uncontrolled use. Defaults to `false`. */\n  defaultChecked?: boolean\n  /** Fires with the next on/off state. */\n  onChange?: (checked: boolean) => void\n}\n\n/**\n * A toggle switch. The native `<input type=\"checkbox\" role=\"switch\">` is visually hidden but fully\n * accessible (keyboard + screen reader); a styled track + sliding thumb show the state, the track\n * filling with `color` when on. Controlled (`checked` + `onChange`) or uncontrolled (`defaultChecked`),\n * and — like the other fields — binds to a surrounding `<Form>` by `name` (its form value is a\n * `boolean`). `error` reddens the track (no message text). Styling uses `--tz-*` tokens only.\n */\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  {\n    label,\n    color = 'accent',\n    size = 'md',\n    error,\n    required = false,\n    checked,\n    defaultChecked = false,\n    onChange,\n    name,\n    onBlur,\n    disabled = false,\n    id: idProp,\n    className,\n    style,\n    ...props\n  },\n  ref,\n) {\n  const reactId = useId()\n  const id = idProp ?? reactId\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is a boolean.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalChecked: boolean | undefined =\n    checked !== undefined ? checked : isFormBound ? Boolean(form!.values[name!]) : undefined\n  const isControlled = externalChecked !== undefined\n  const [internal, setInternal] = useState<boolean>(defaultChecked)\n  const isChecked = isControlled ? externalChecked! : internal\n\n  const resolvedError = error ?? bound?.error ?? false\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const next = event.target.checked\n    if (!isControlled) setInternal(next)\n    if (isFormBound) form!.setValue(name!, next)\n    onChange?.(next)\n  }\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    bound?.onBlur(event)\n    onBlur?.(event)\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles.field,\n        resolvedError && styles.error,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={\n        {\n          '--tz-btn-rgb': `var(--tz-color-${color}-rgb)`,\n          '--tz-btn-on': `var(--tz-color-${color}-contrast, #fff)`,\n          ...style,\n        } as CSSProperties\n      }\n    >\n      <label className={clsx(styles.row, styles[size])}>\n        <input\n          ref={ref}\n          id={id}\n          name={name}\n          type=\"checkbox\"\n          role=\"switch\"\n          className={styles.input}\n          checked={isChecked}\n          onChange={handleChange}\n          onBlur={handleBlur}\n          disabled={disabled}\n          aria-invalid={resolvedError || undefined}\n          {...props}\n        />\n        <span className={styles.track} aria-hidden=\"true\">\n          <span className={styles.thumb} />\n        </span>\n        {label != null && (\n          <span className={styles.label}>\n            {label}\n            {required && (\n              <span className={styles.required} aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </span>\n        )}\n      </label>\n    </div>\n  )\n})\n"],"names":["Switch","forwardRef","label","color","size","error","required","checked","defaultChecked","onChange","name","onBlur","disabled","idProp","className","style","props","ref","reactId","useId","id","form","useFormContext","isFormBound","bound","externalChecked","isControlled","internal","setInternal","useState","isChecked","resolvedError","handleChange","event","next","handleBlur","jsx","clsx","styles","jsxs"],"mappings":";;;;;;;;;;;;;;;;;GA8CaA,KAASC,EAA0C,SAC9D;AAAA,EACE,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,IAAIC;AAAA,EACJ,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAAA,GACVC,IAAKP,KAAUK,GAGfG,IAAOC,EAAA,GACPC,IAAc,GAAQF,KAAQX,IAC9Bc,IAAQH,KAAQX,IAAOW,EAAK,MAAMX,CAAI,IAAI,QAE1Ce,IACJlB,MAAY,SAAYA,IAAUgB,IAAc,EAAQF,EAAM,OAAOX,CAAK,IAAK,QAC3EgB,IAAeD,MAAoB,QACnC,CAACE,GAAUC,CAAW,IAAIC,EAAkBrB,CAAc,GAC1DsB,IAAYJ,IAAeD,IAAmBE,GAE9CI,IAAgB1B,MAASmB,KAAA,gBAAAA,EAAO,UAAS,IAEzCQ,IAAe,CAACC,MAAyC;AAC7D,UAAMC,IAAOD,EAAM,OAAO;AAC1B,IAAKP,KAAcE,EAAYM,CAAI,GAC/BX,KAAaF,EAAM,SAASX,GAAOwB,CAAI,GAC3CzB,KAAA,QAAAA,EAAWyB;AAAA,EACb,GAEMC,IAAa,CAACF,MAAwC;AAC1D,IAAAT,KAAA,QAAAA,EAAO,OAAOS,IACdtB,KAAA,QAAAA,EAASsB;AAAA,EACX;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO;AAAA,QACPP,KAAiBO,EAAO;AAAA,QACxB1B,KAAY0B,EAAO;AAAA,QACnBxB;AAAA,MAAA;AAAA,MAEF,OACE;AAAA,QACE,gBAAgB,kBAAkBX,CAAK;AAAA,QACvC,eAAe,kBAAkBA,CAAK;AAAA,QACtC,GAAGY;AAAA,MAAA;AAAA,MAIP,UAAA,gBAAAwB,EAAC,WAAM,WAAWF,EAAKC,EAAO,KAAKA,EAAOlC,CAAI,CAAC,GAC7C,UAAA;AAAA,QAAA,gBAAAgC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAnB;AAAA,YACA,IAAAG;AAAA,YACA,MAAAV;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,WAAW4B,EAAO;AAAA,YAClB,SAASR;AAAA,YACT,UAAUE;AAAA,YACV,QAAQG;AAAA,YACR,UAAAvB;AAAA,YACA,gBAAcmB,KAAiB;AAAA,YAC9B,GAAGf;AAAA,UAAA;AAAA,QAAA;AAAA,QAEN,gBAAAoB,EAAC,QAAA,EAAK,WAAWE,EAAO,OAAO,eAAY,QACzC,UAAA,gBAAAF,EAAC,QAAA,EAAK,WAAWE,EAAO,MAAA,CAAO,GACjC;AAAA,QACCpC,KAAS,QACR,gBAAAqC,EAAC,QAAA,EAAK,WAAWD,EAAO,OACrB,UAAA;AAAA,UAAApC;AAAA,UACAI,uBACE,QAAA,EAAK,WAAWgC,EAAO,UAAU,eAAY,QAAO,UAAA,IAAA,CAErD;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}