@devalok/shilp-sutra 0.55.0 → 0.55.1

package/dist/tokens/primitives.css

@@ -60,7 +60,12 @@
   --neutral-6:  oklch(0.78 0.0053 350);
   --neutral-7:  oklch(0.7 0.0074 350);
   --neutral-8:  oklch(0.62 0.0089 350);
-  --neutral-9:  oklch(0.55 0.01 350);
+  /* 0.55 → 0.54: at 0.55 this measured 4.472:1 on --neutral-2 (the light
+     surface-base), just under WCAG AA's 4.5 for normal text. 0.54 gives
+     4.664:1. The intermediate 0.545 also clears at 4.567, but with only
+     0.067 of headroom — a later tweak to surface-base would silently push it
+     back under, which is how the previous attempt at this fix landed short. */
+  --neutral-9:  oklch(0.54 0.01 350);
   --neutral-10: oklch(0.5 0.01 350);
   --neutral-11: oklch(0.43 0.0074 350);
   --neutral-12: oklch(0.32 0.0042 350);

package/dist/tokens/semantic.css

@@ -180,7 +180,7 @@
   --color-surface-fg-disabled:   var(--neutral-8);
   --color-surface-fg:            var(--neutral-12);
   --color-surface-fg-muted:      var(--neutral-11);
-  --color-surface-fg-subtle:     var(--neutral-9);  /* darkened for WCAG AA 4.5:1 */
+  --color-surface-fg-subtle:     var(--neutral-9);  /* 4.664:1 on surface-base — WCAG AA (verify, don't assume: see neutral-9) */
   --color-surface-border:        var(--neutral-6);  /* bumped for WCAG 1.4.11 (interactive/control edge) */
   --color-surface-border-strong: var(--neutral-7);
   --color-surface-border-subtle: var(--neutral-5);

package/dist/ui/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,iBAAiB,MAAM,4BAA4B,CAAA;AAE/D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,UAAU,EAAqB,MAAM,mBAAmB,CAAA;AAWtE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC;IAClG,8GAA8G;IAC9G,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qFAAqF;IACrF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;AAcD,QAAA,MAAM,QAAQ,yFAuGZ,CAAA;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,iBAAiB,MAAM,4BAA4B,CAAA;AAE/D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,UAAU,EAAqB,MAAM,mBAAmB,CAAA;AAWtE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC;IAClG,8GAA8G;IAC9G,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qFAAqF;IACrF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;AAcD,QAAA,MAAM,QAAQ,yFA4GZ,CAAA;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/ui/checkbox.js

@@ -34,6 +34,7 @@ var u = {
 		"aria-describedby": D,
 		"aria-required": O || void 0,
 		...b,
+		id: b.id ?? T.inputId,
 		children: /* @__PURE__ */ s(c, { children: A && /* @__PURE__ */ s(a, {
 			forceMount: !0,
 			asChild: !0,

package/dist/ui/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/ui/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport * as CheckboxPrimitive from '@primitives/react-checkbox'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { durations } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/** Border + background tint per validation state (checked state uses accent regardless). */\nconst stateTintClasses: Record<Exclude<FieldState, 'default'>, string> = {\n  error: 'border-error-7 bg-error-3',\n  warning: 'border-warning-7 bg-warning-3',\n  success: 'border-success-7 bg-success-3',\n}\n\n/**\n * Props for Checkbox — a Radix-powered accessible checkbox with error state styling and\n * an indeterminate state for \"select all\" row controls.\n *\n * **Indeterminate:** Pass `indeterminate={true}` to show the \"−\" dash (overrides `checked`).\n * This is correct for \"select all\" headers when only some rows are selected.\n *\n * **Controlled:** Use `checked` + `onCheckedChange` for controlled usage.\n * `onCheckedChange` receives `true | false | 'indeterminate'` from Radix.\n *\n * @example\n * // Basic controlled checkbox:\n * <Checkbox checked={agreed} onCheckedChange={(v) => setAgreed(v === true)} />\n *\n * @example\n * // Error state when required checkbox is not checked:\n * <Checkbox state={!termsAccepted ? 'error' : 'default'} checked={termsAccepted} onCheckedChange={(v) => setTerms(v === true)} />\n *\n * @example\n * // \"Select all\" checkbox with indeterminate state:\n * <Checkbox\n *   indeterminate={someSelected && !allSelected}\n *   checked={allSelected}\n *   onCheckedChange={(v) => toggleAll(v === true)}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. */\n  state?: FieldState\n  indeterminate?: boolean\n  /** Control size — `sm` (20px), `md` (24px, default, WCAG compliant), `lg` (28px). */\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst checkboxSizeClasses = {\n  sm: 'h-5 w-5',\n  md: 'h-6 w-6',\n  lg: 'h-7 w-7',\n} as const\n\nconst checkboxIconClasses = {\n  sm: 'h-[14px] w-[14px]',\n  md: 'h-[18px] w-[18px]',\n  lg: 'h-5 w-5',\n} as const\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(({ className, state: stateProp, indeterminate, size = 'md', checked, onCheckedChange, defaultChecked, ...props }, ref) => {\n  // Track internal state so AnimatePresence works for both controlled & uncontrolled usage\n  const isControlled = checked !== undefined\n  const [internalChecked, setInternalChecked] = React.useState<boolean | 'indeterminate'>(\n    indeterminate ? 'indeterminate' : (defaultChecked ? true : false),\n  )\n\n  const fieldCtx = useFormField()\n  const state = resolveFieldState(stateProp, fieldCtx.state)\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  const actualChecked = indeterminate ? 'indeterminate' : (isControlled ? checked : internalChecked)\n  const isActive = actualChecked === true || actualChecked === 'indeterminate'\n\n  const handleCheckedChange = React.useCallback(\n    (value: boolean | 'indeterminate') => {\n      if (!isControlled) setInternalChecked(value)\n      onCheckedChange?.(value)\n    },\n    [isControlled, onCheckedChange],\n  )\n\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      checked={isControlled || indeterminate ? actualChecked : undefined}\n      defaultChecked={!isControlled && !indeterminate ? defaultChecked : undefined}\n      onCheckedChange={handleCheckedChange}\n      className={cn(\n        'touch-target peer flex items-center justify-center shrink-0 rounded-control-inner',\n        checkboxSizeClasses[size],\n        'border border-surface-border-strong',\n        'bg-surface-raised-hover',\n        'transition-colors duration-fast-01 ease-productive-standard',\n        'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:opacity-action-disabled',\n        'data-[state=unchecked]:hover:border-accent-7 data-[state=unchecked]:hover:bg-surface-raised-active',\n        'data-[state=checked]:bg-accent-9 data-[state=checked]:border-accent-7 data-[state=checked]:text-accent-fg',\n        'data-[state=indeterminate]:bg-accent-9 data-[state=indeterminate]:border-accent-7 data-[state=indeterminate]:text-accent-fg',\n        state && stateTintClasses[state],\n        className,\n      )}\n      aria-invalid={state === 'error' || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      {...props}\n    >\n      <AnimatePresence>\n        {isActive && (\n          <CheckboxPrimitive.Indicator forceMount asChild>\n            <motion.span\n              className=\"flex items-center justify-center text-current\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: durations.fast01 }}\n            >\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                className={checkboxIconClasses[size]}\n              >\n                {actualChecked === 'indeterminate' ? (\n                  <motion.line\n                    x1=\"4\"\n                    y1=\"8\"\n                    x2=\"12\"\n                    y2=\"8\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    initial={{ pathLength: 0 }}\n                    animate={{ pathLength: 1 }}\n                    exit={{ pathLength: 0 }}\n                    transition={{ duration: durations.moderate02, ease: 'easeOut' }}\n                  />\n                ) : (\n                  <motion.path\n                    d=\"M3.5 8.5l3 3 6-6\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    fill=\"none\"\n                    initial={{ pathLength: 0 }}\n                    animate={{ pathLength: 1 }}\n                    exit={{ pathLength: 0 }}\n                    transition={{ duration: durations.moderate02, ease: 'easeOut' }}\n                  />\n                )}\n              </svg>\n            </motion.span>\n          </CheckboxPrimitive.Indicator>\n        )}\n      </AnimatePresence>\n    </CheckboxPrimitive.Root>\n  )\n})\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n"],"mappings":";;;;;;;;;;AAYA,IAAM,IAAmE;CACvE,OAAO;CACP,SAAS;CACT,SAAS;AACX,GAqCM,IAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAW,EAAM,YAGpB,EAAE,cAAW,OAAO,GAAW,kBAAe,UAAO,MAAM,YAAS,oBAAiB,mBAAgB,GAAG,KAAS,MAAQ;CAE1H,IAAM,IAAe,MAAY,KAAA,GAC3B,CAAC,GAAiB,KAAsB,EAAM,SAClD,IAAgB,kBAAmB,GACrC,GAEM,IAAW,EAAa,GACxB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAElD,IAAgB,IAAgB,kBAAmB,IAAe,IAAU,GAC5E,IAAW,MAAkB,MAAQ,MAAkB,iBAEvD,IAAsB,EAAM,aAC/B,MAAqC;EAEpC,AADK,KAAc,EAAmB,CAAK,GAC3C,IAAkB,CAAK;CACzB,GACA,CAAC,GAAc,CAAe,CAChC;CAEA,OACE,kBAAC,GAAD;EACO;EACL,SAAS,KAAgB,IAAgB,IAAgB,KAAA;EACzD,gBAAgB,CAAC,KAAgB,CAAC,IAAgB,IAAiB,KAAA;EACnE,iBAAiB;EACjB,WAAW,EACT,qFACA,EAAoB,IACpB,uCACA,2BACA,+DACA,6GACA,gEACA,sGACA,6GACA,+HACA,KAAS,EAAiB,IAC1B,CACF;EACA,gBAAc,MAAU,WAAW,KAAA;EACnC,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,GAAI;YAEJ,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,GAAD;GAA6B,YAAA;GAAW,SAAA;aACtC,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,SAAS,EAAE,SAAS,EAAE;IACtB,SAAS,EAAE,SAAS,EAAE;IACtB,MAAM,EAAE,SAAS,EAAE;IACnB,YAAY,EAAE,UAAU,EAAU,OAAO;cAEzC,kBAAC,OAAD;KACE,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,WAAW,EAAoB;eAE9B,MAAkB,kBACjB,kBAAC,EAAO,MAAR;MACE,IAAG;MACH,IAAG;MACH,IAAG;MACH,IAAG;MACH,QAAO;MACP,aAAY;MACZ,eAAc;MACd,SAAS,EAAE,YAAY,EAAE;MACzB,SAAS,EAAE,YAAY,EAAE;MACzB,MAAM,EAAE,YAAY,EAAE;MACtB,YAAY;OAAE,UAAU,EAAU;OAAY,MAAM;MAAU;KAC/D,CAAA,IAED,kBAAC,EAAO,MAAR;MACE,GAAE;MACF,QAAO;MACP,aAAY;MACZ,eAAc;MACd,gBAAe;MACf,MAAK;MACL,SAAS,EAAE,YAAY,EAAE;MACzB,SAAS,EAAE,YAAY,EAAE;MACzB,MAAM,EAAE,YAAY,EAAE;MACtB,YAAY;OAAE,UAAU,EAAU;OAAY,MAAM;MAAU;KAC/D,CAAA;IAEA,CAAA;GACM,CAAA;EACc,CAAA,EAEhB,CAAA;CACK,CAAA;AAE5B,CAAC;AACD,EAAS,cAAA,EAAqC"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../src/ui/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport * as CheckboxPrimitive from '@primitives/react-checkbox'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { durations } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/** Border + background tint per validation state (checked state uses accent regardless). */\nconst stateTintClasses: Record<Exclude<FieldState, 'default'>, string> = {\n  error: 'border-error-7 bg-error-3',\n  warning: 'border-warning-7 bg-warning-3',\n  success: 'border-success-7 bg-success-3',\n}\n\n/**\n * Props for Checkbox — a Radix-powered accessible checkbox with error state styling and\n * an indeterminate state for \"select all\" row controls.\n *\n * **Indeterminate:** Pass `indeterminate={true}` to show the \"−\" dash (overrides `checked`).\n * This is correct for \"select all\" headers when only some rows are selected.\n *\n * **Controlled:** Use `checked` + `onCheckedChange` for controlled usage.\n * `onCheckedChange` receives `true | false | 'indeterminate'` from Radix.\n *\n * @example\n * // Basic controlled checkbox:\n * <Checkbox checked={agreed} onCheckedChange={(v) => setAgreed(v === true)} />\n *\n * @example\n * // Error state when required checkbox is not checked:\n * <Checkbox state={!termsAccepted ? 'error' : 'default'} checked={termsAccepted} onCheckedChange={(v) => setTerms(v === true)} />\n *\n * @example\n * // \"Select all\" checkbox with indeterminate state:\n * <Checkbox\n *   indeterminate={someSelected && !allSelected}\n *   checked={allSelected}\n *   onCheckedChange={(v) => toggleAll(v === true)}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. */\n  state?: FieldState\n  indeterminate?: boolean\n  /** Control size — `sm` (20px), `md` (24px, default, WCAG compliant), `lg` (28px). */\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst checkboxSizeClasses = {\n  sm: 'h-5 w-5',\n  md: 'h-6 w-6',\n  lg: 'h-7 w-7',\n} as const\n\nconst checkboxIconClasses = {\n  sm: 'h-[14px] w-[14px]',\n  md: 'h-[18px] w-[18px]',\n  lg: 'h-5 w-5',\n} as const\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(({ className, state: stateProp, indeterminate, size = 'md', checked, onCheckedChange, defaultChecked, ...props }, ref) => {\n  // Track internal state so AnimatePresence works for both controlled & uncontrolled usage\n  const isControlled = checked !== undefined\n  const [internalChecked, setInternalChecked] = React.useState<boolean | 'indeterminate'>(\n    indeterminate ? 'indeterminate' : (defaultChecked ? true : false),\n  )\n\n  const fieldCtx = useFormField()\n  const state = resolveFieldState(stateProp, fieldCtx.state)\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  const actualChecked = indeterminate ? 'indeterminate' : (isControlled ? checked : internalChecked)\n  const isActive = actualChecked === true || actualChecked === 'indeterminate'\n\n  const handleCheckedChange = React.useCallback(\n    (value: boolean | 'indeterminate') => {\n      if (!isControlled) setInternalChecked(value)\n      onCheckedChange?.(value)\n    },\n    [isControlled, onCheckedChange],\n  )\n\n  return (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      checked={isControlled || indeterminate ? actualChecked : undefined}\n      defaultChecked={!isControlled && !indeterminate ? defaultChecked : undefined}\n      onCheckedChange={handleCheckedChange}\n      className={cn(\n        'touch-target peer flex items-center justify-center shrink-0 rounded-control-inner',\n        checkboxSizeClasses[size],\n        'border border-surface-border-strong',\n        'bg-surface-raised-hover',\n        'transition-colors duration-fast-01 ease-productive-standard',\n        'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2',\n        'disabled:cursor-not-allowed disabled:opacity-action-disabled',\n        'data-[state=unchecked]:hover:border-accent-7 data-[state=unchecked]:hover:bg-surface-raised-active',\n        'data-[state=checked]:bg-accent-9 data-[state=checked]:border-accent-7 data-[state=checked]:text-accent-fg',\n        'data-[state=indeterminate]:bg-accent-9 data-[state=indeterminate]:border-accent-7 data-[state=indeterminate]:text-accent-fg',\n        state && stateTintClasses[state],\n        className,\n      )}\n      aria-invalid={state === 'error' || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      {...props}\n      // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor>\n      // resolves. Without this the label renders, points at nothing, and the\n      // control has NO accessible name — a screen reader announces an unnamed\n      // checkbox even though the consumer wrote FormField + Label correctly.\n      id={props.id ?? fieldCtx.inputId}\n    >\n      <AnimatePresence>\n        {isActive && (\n          <CheckboxPrimitive.Indicator forceMount asChild>\n            <motion.span\n              className=\"flex items-center justify-center text-current\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: durations.fast01 }}\n            >\n              <svg\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                className={checkboxIconClasses[size]}\n              >\n                {actualChecked === 'indeterminate' ? (\n                  <motion.line\n                    x1=\"4\"\n                    y1=\"8\"\n                    x2=\"12\"\n                    y2=\"8\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    initial={{ pathLength: 0 }}\n                    animate={{ pathLength: 1 }}\n                    exit={{ pathLength: 0 }}\n                    transition={{ duration: durations.moderate02, ease: 'easeOut' }}\n                  />\n                ) : (\n                  <motion.path\n                    d=\"M3.5 8.5l3 3 6-6\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    fill=\"none\"\n                    initial={{ pathLength: 0 }}\n                    animate={{ pathLength: 1 }}\n                    exit={{ pathLength: 0 }}\n                    transition={{ duration: durations.moderate02, ease: 'easeOut' }}\n                  />\n                )}\n              </svg>\n            </motion.span>\n          </CheckboxPrimitive.Indicator>\n        )}\n      </AnimatePresence>\n    </CheckboxPrimitive.Root>\n  )\n})\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n"],"mappings":";;;;;;;;;;AAYA,IAAM,IAAmE;CACvE,OAAO;CACP,SAAS;CACT,SAAS;AACX,GAqCM,IAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAsB;CAC1B,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAEM,IAAW,EAAM,YAGpB,EAAE,cAAW,OAAO,GAAW,kBAAe,UAAO,MAAM,YAAS,oBAAiB,mBAAgB,GAAG,KAAS,MAAQ;CAE1H,IAAM,IAAe,MAAY,KAAA,GAC3B,CAAC,GAAiB,KAAsB,EAAM,SAClD,IAAgB,kBAAmB,GACrC,GAEM,IAAW,EAAa,GACxB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAElD,IAAgB,IAAgB,kBAAmB,IAAe,IAAU,GAC5E,IAAW,MAAkB,MAAQ,MAAkB,iBAEvD,IAAsB,EAAM,aAC/B,MAAqC;EAEpC,AADK,KAAc,EAAmB,CAAK,GAC3C,IAAkB,CAAK;CACzB,GACA,CAAC,GAAc,CAAe,CAChC;CAEA,OACE,kBAAC,GAAD;EACO;EACL,SAAS,KAAgB,IAAgB,IAAgB,KAAA;EACzD,gBAAgB,CAAC,KAAgB,CAAC,IAAgB,IAAiB,KAAA;EACnE,iBAAiB;EACjB,WAAW,EACT,qFACA,EAAoB,IACpB,uCACA,2BACA,+DACA,6GACA,gEACA,sGACA,6GACA,+HACA,KAAS,EAAiB,IAC1B,CACF;EACA,gBAAc,MAAU,WAAW,KAAA;EACnC,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,GAAI;EAKJ,IAAI,EAAM,MAAM,EAAS;YAEzB,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,GAAD;GAA6B,YAAA;GAAW,SAAA;aACtC,kBAAC,EAAO,MAAR;IACE,WAAU;IACV,SAAS,EAAE,SAAS,EAAE;IACtB,SAAS,EAAE,SAAS,EAAE;IACtB,MAAM,EAAE,SAAS,EAAE;IACnB,YAAY,EAAE,UAAU,EAAU,OAAO;cAEzC,kBAAC,OAAD;KACE,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,WAAW,EAAoB;eAE9B,MAAkB,kBACjB,kBAAC,EAAO,MAAR;MACE,IAAG;MACH,IAAG;MACH,IAAG;MACH,IAAG;MACH,QAAO;MACP,aAAY;MACZ,eAAc;MACd,SAAS,EAAE,YAAY,EAAE;MACzB,SAAS,EAAE,YAAY,EAAE;MACzB,MAAM,EAAE,YAAY,EAAE;MACtB,YAAY;OAAE,UAAU,EAAU;OAAY,MAAM;MAAU;KAC/D,CAAA,IAED,kBAAC,EAAO,MAAR;MACE,GAAE;MACF,QAAO;MACP,aAAY;MACZ,eAAc;MACd,gBAAe;MACf,MAAK;MACL,SAAS,EAAE,YAAY,EAAE;MACzB,SAAS,EAAE,YAAY,EAAE;MACzB,MAAM,EAAE,YAAY,EAAE;MACtB,YAAY;OAAE,UAAU,EAAU;OAAY,MAAM;MAAU;KAC/D,CAAA;IAEA,CAAA;GACM,CAAA;EACc,CAAA,EAEhB,CAAA;CACK,CAAA;AAE5B,CAAC;AACD,EAAS,cAAA,EAAqC"}

package/dist/ui/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/ui/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAAM,mBAAmB;;8EAYxB,CAAA;AAED,QAAA,MAAM,mBAAmB;;;8EAkBxB,CAAA;AASD,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AACtF,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAA;AAExF,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAClF,oEAAoE;IACpE,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,MAAM,qFAwCV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAC,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/ui/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAAM,mBAAmB;;8EAYxB,CAAA;AAED,QAAA,MAAM,mBAAmB;;;8EAkBxB,CAAA;AASD,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AACtF,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAA;AAExF,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAClF,oEAAoE;IACpE,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,gDAAgD;IAChD,KAAK,CAAC,EAAE,WAAW,CAAA;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,MAAM,qFAmDV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAC,mBAAmB,EAAE,CAAA"}

package/dist/ui/slider.js

@@ -52,6 +52,7 @@ var u = e("relative w-full grow overflow-hidden rounded-pill bg-surface-raised-h
 			children: /* @__PURE__ */ c(r, { className: t("absolute h-full", f[b]) })
 		}), Array.from({ length: T }, (e, t) => /* @__PURE__ */ c(a, {
 			"aria-label": T === 1 ? s : void 0,
+			"aria-labelledby": T === 1 && !s ? x.labelId : void 0,
 			className: d({
 				size: y,
 				color: b

package/dist/ui/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../src/ui/slider.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@primitives/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { cn } from './lib/utils'\n\nconst sliderTrackVariants = cva(\n  'relative w-full grow overflow-hidden rounded-pill bg-surface-raised-hover',\n  {\n    variants: {\n      size: {\n        sm: 'h-ds-02',\n        md: 'h-ds-02b',\n        lg: 'h-[10px]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst sliderThumbVariants = cva(\n  'touch-target block rounded-pill bg-surface-overlay shadow-raised transition-[color,transform,box-shadow] duration-fast-02 ease-productive-standard hover:shadow-raised-hover active:scale-[1.15] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4 border',\n        md: 'h-6 w-6 border-2',\n        lg: 'h-8 w-8 border-[3px]',\n      },\n      color: {\n        accent: 'border-accent-7 focus-visible:ring-accent-9',\n        success: 'border-success-7 focus-visible:ring-success-9',\n        warning: 'border-warning-7 focus-visible:ring-warning-9',\n        error: 'border-error-7 focus-visible:ring-error-9',\n      },\n    },\n    defaultVariants: { size: 'md', color: 'accent' },\n  },\n)\n\nconst sliderRangeColorMap: Record<string, string> = {\n  accent: 'bg-accent-9',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n}\n\nexport type SliderSize = NonNullable<VariantProps<typeof sliderTrackVariants>['size']>\nexport type SliderColor = NonNullable<VariantProps<typeof sliderThumbVariants>['color']>\n\nexport interface SliderProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'color'> {\n  /** Size of the slider. Controls track height and thumb diameter. */\n  size?: SliderSize\n  /** Color of the range fill and thumb border. */\n  color?: SliderColor\n}\n\n/**\n * A Radix-powered slider supporting single or multiple thumbs.\n *\n * Pass `defaultValue={[50]}` for a single thumb, or `defaultValue={[25, 75]}`\n * for a range slider with two thumbs. One `<Thumb>` is rendered per value entry.\n *\n * When using multiple thumbs, provide per-thumb labels via the `aria-label` array\n * on the `value`/`defaultValue` entries, or wrap each in a labelled form field.\n *\n * **Sizes:** `sm` | `md` (default) | `lg`\n *\n * **Colors:** `accent` (default) | `success` | `warning` | `error`\n */\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ className, 'aria-label': ariaLabel, value, defaultValue, size: sizeProp = 'md', color: colorProp = 'accent', ...props }, ref) => {\n  const size = sizeProp ?? 'md'\n  const color = colorProp ?? 'accent'\n  const fieldCtx = useFormField()\n  const isError = fieldCtx.state === 'error'\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  // Determine how many thumbs to render from controlled or default value\n  const thumbCount = (value ?? defaultValue ?? [0]).length\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      value={value}\n      defaultValue={defaultValue}\n      aria-invalid={isError || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      className={cn(\n        'relative flex w-full touch-none select-none items-center',\n        className,\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track className={sliderTrackVariants({ size })}>\n        <SliderPrimitive.Range className={cn('absolute h-full', sliderRangeColorMap[color])} />\n      </SliderPrimitive.Track>\n      {Array.from({ length: thumbCount }, (_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          aria-label={thumbCount === 1 ? (ariaLabel as string | undefined) : undefined}\n          className={sliderThumbVariants({ size, color })}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n})\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider, sliderThumbVariants,sliderTrackVariants }\n"],"mappings":";;;;;;;;AASA,IAAM,IAAsB,EAC1B,6EACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF,GAEM,IAAsB,EAC1B,gVACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,QAAQ;GACR,SAAS;GACT,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,OAAO;CAAS;AACjD,CACF,GAEM,IAA8C;CAClD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;AACT,GA0BM,IAAS,EAAM,YAGlB,EAAE,cAAW,cAAc,GAAW,UAAO,iBAAc,MAAM,IAAW,MAAM,OAAO,IAAY,UAAU,GAAG,KAAS,MAAQ;CACpI,IAAM,IAAO,KAAY,MACnB,IAAQ,KAAa,UACrB,IAAW,EAAa,GACxB,IAAU,EAAS,UAAU,SAC7B,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAGlD,KAAc,KAAS,KAAgB,CAAC,CAAC,EAAA,CAAG;CAElD,OACE,kBAAC,GAAD;EACO;EACE;EACO;EACd,gBAAc,KAAW,KAAA;EACzB,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,WAAW,EACT,4DACA,CACF;EACA,GAAI;YAXN,CAaE,kBAAC,GAAD;GAAuB,WAAW,EAAoB,EAAE,QAAK,CAAC;aAC5D,kBAAC,GAAD,EAAuB,WAAW,EAAG,mBAAmB,EAAoB,EAAM,EAAI,CAAA;EACjE,CAAA,GACtB,MAAM,KAAK,EAAE,QAAQ,EAAW,IAAI,GAAG,MACtC,kBAAC,GAAD;GAEE,cAAY,MAAe,IAAK,IAAmC,KAAA;GACnE,WAAW,EAAoB;IAAE;IAAM;GAAM,CAAC;EAC/C,GAHM,CAGN,CACF,CACmB;;AAE1B,CAAC;AACD,EAAO,cAAA,EAAmC"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/ui/slider.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@primitives/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { cn } from './lib/utils'\n\nconst sliderTrackVariants = cva(\n  'relative w-full grow overflow-hidden rounded-pill bg-surface-raised-hover',\n  {\n    variants: {\n      size: {\n        sm: 'h-ds-02',\n        md: 'h-ds-02b',\n        lg: 'h-[10px]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst sliderThumbVariants = cva(\n  'touch-target block rounded-pill bg-surface-overlay shadow-raised transition-[color,transform,box-shadow] duration-fast-02 ease-productive-standard hover:shadow-raised-hover active:scale-[1.15] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4 border',\n        md: 'h-6 w-6 border-2',\n        lg: 'h-8 w-8 border-[3px]',\n      },\n      color: {\n        accent: 'border-accent-7 focus-visible:ring-accent-9',\n        success: 'border-success-7 focus-visible:ring-success-9',\n        warning: 'border-warning-7 focus-visible:ring-warning-9',\n        error: 'border-error-7 focus-visible:ring-error-9',\n      },\n    },\n    defaultVariants: { size: 'md', color: 'accent' },\n  },\n)\n\nconst sliderRangeColorMap: Record<string, string> = {\n  accent: 'bg-accent-9',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n}\n\nexport type SliderSize = NonNullable<VariantProps<typeof sliderTrackVariants>['size']>\nexport type SliderColor = NonNullable<VariantProps<typeof sliderThumbVariants>['color']>\n\nexport interface SliderProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'color'> {\n  /** Size of the slider. Controls track height and thumb diameter. */\n  size?: SliderSize\n  /** Color of the range fill and thumb border. */\n  color?: SliderColor\n}\n\n/**\n * A Radix-powered slider supporting single or multiple thumbs.\n *\n * Pass `defaultValue={[50]}` for a single thumb, or `defaultValue={[25, 75]}`\n * for a range slider with two thumbs. One `<Thumb>` is rendered per value entry.\n *\n * When using multiple thumbs, provide per-thumb labels via the `aria-label` array\n * on the `value`/`defaultValue` entries, or wrap each in a labelled form field.\n *\n * **Sizes:** `sm` | `md` (default) | `lg`\n *\n * **Colors:** `accent` (default) | `success` | `warning` | `error`\n */\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ className, 'aria-label': ariaLabel, value, defaultValue, size: sizeProp = 'md', color: colorProp = 'accent', ...props }, ref) => {\n  const size = sizeProp ?? 'md'\n  const color = colorProp ?? 'accent'\n  const fieldCtx = useFormField()\n  const isError = fieldCtx.state === 'error'\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  // Determine how many thumbs to render from controlled or default value\n  const thumbCount = (value ?? defaultValue ?? [0]).length\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      value={value}\n      defaultValue={defaultValue}\n      aria-invalid={isError || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      className={cn(\n        'relative flex w-full touch-none select-none items-center',\n        className,\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track className={sliderTrackVariants({ size })}>\n        <SliderPrimitive.Range className={cn('absolute h-full', sliderRangeColorMap[color])} />\n      </SliderPrimitive.Track>\n      {Array.from({ length: thumbCount }, (_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          aria-label={thumbCount === 1 ? (ariaLabel as string | undefined) : undefined}\n          // `role=\"slider\"` lives on the THUMB, and Radix renders Root as a\n          // <span> — not a labellable element — so `<Label htmlFor>` cannot name\n          // this control the way it names Input/Select. Without an explicit\n          // aria-label the thumb had NO accessible name even inside\n          // FormField + Label. Point it at the field's label instead.\n          //\n          // Single-thumb only: with a range, one label cannot disambiguate the\n          // two thumbs, so the consumer must name each (`aria-label` per thumb).\n          aria-labelledby={\n            thumbCount === 1 && !ariaLabel ? fieldCtx.labelId : undefined\n          }\n          className={sliderThumbVariants({ size, color })}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n})\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider, sliderThumbVariants,sliderTrackVariants }\n"],"mappings":";;;;;;;;AASA,IAAM,IAAsB,EAC1B,6EACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF,GAEM,IAAsB,EAC1B,gVACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,QAAQ;GACR,SAAS;GACT,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,OAAO;CAAS;AACjD,CACF,GAEM,IAA8C;CAClD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;AACT,GA0BM,IAAS,EAAM,YAGlB,EAAE,cAAW,cAAc,GAAW,UAAO,iBAAc,MAAM,IAAW,MAAM,OAAO,IAAY,UAAU,GAAG,KAAS,MAAQ;CACpI,IAAM,IAAO,KAAY,MACnB,IAAQ,KAAa,UACrB,IAAW,EAAa,GACxB,IAAU,EAAS,UAAU,SAC7B,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAGlD,KAAc,KAAS,KAAgB,CAAC,CAAC,EAAA,CAAG;CAElD,OACE,kBAAC,GAAD;EACO;EACE;EACO;EACd,gBAAc,KAAW,KAAA;EACzB,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,WAAW,EACT,4DACA,CACF;EACA,GAAI;YAXN,CAaE,kBAAC,GAAD;GAAuB,WAAW,EAAoB,EAAE,QAAK,CAAC;aAC5D,kBAAC,GAAD,EAAuB,WAAW,EAAG,mBAAmB,EAAoB,EAAM,EAAI,CAAA;EACjE,CAAA,GACtB,MAAM,KAAK,EAAE,QAAQ,EAAW,IAAI,GAAG,MACtC,kBAAC,GAAD;GAEE,cAAY,MAAe,IAAK,IAAmC,KAAA;GASnE,mBACE,MAAe,KAAK,CAAC,IAAY,EAAS,UAAU,KAAA;GAEtD,WAAW,EAAoB;IAAE;IAAM;GAAM,CAAC;EAC/C,GAdM,CAcN,CACF,CACmB;;AAE1B,CAAC;AACD,EAAO,cAAA,EAAmC"}

package/dist/ui/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/ui/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,gBAAgB,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,UAAU,EAAqB,MAAM,mBAAmB,CAAA;AAuBtE,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC;IAC/F,yJAAyJ;IACzJ,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAED,QAAA,MAAM,MAAM,uFA8DV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/ui/switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,gBAAgB,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,KAAK,UAAU,EAAqB,MAAM,mBAAmB,CAAA;AAuBtE,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC;IAC/F,yJAAyJ;IACzJ,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAED,QAAA,MAAM,MAAM,uFAkEV,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/ui/switch.js

@@ -45,6 +45,7 @@ var u = {
 		"aria-describedby": T,
 		"aria-required": E || void 0,
 		...x,
+		id: x.id ?? C.inputId,
 		ref: S,
 		children: /* @__PURE__ */ s(a, {
 			asChild: !0,

package/dist/ui/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../../src/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as SwitchPrimitives from \"@primitives/react-switch\"\nimport { motion, useReducedMotion } from 'framer-motion'\nimport * as React from \"react\"\n\nimport { useFormField } from './form'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { springs } from './lib/motion'\nimport { cn } from \"./lib/utils\"\n\nconst sizeConfig = {\n  sm: { track: 'h-6 w-[38px]', thumb: 'h-5 w-5', travel: 16 },\n  md: { track: 'h-6 w-11', thumb: 'h-ico-md w-ico-md', travel: 20 },\n  lg: { track: 'h-7 w-[52px]', thumb: 'h-6 w-6', travel: 24 },\n} as const\n\n/** Validation border + checked-track tint per state (overrides `color` when set). */\nconst stateTintClasses: Record<Exclude<FieldState, 'default'>, string> = {\n  error: 'border-error-7 data-[state=checked]:bg-error-9',\n  warning: 'border-warning-7 data-[state=checked]:bg-warning-9',\n  success: 'border-success-7 data-[state=checked]:bg-success-9',\n}\n\nconst colorMap = {\n  accent: 'data-[state=checked]:bg-accent-9',\n  success: 'data-[state=checked]:bg-success-9',\n  warning: 'data-[state=checked]:bg-warning-9',\n} as const\n\nexport interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. Distinct from `color` (the ON-track tint). */\n  state?: FieldState\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'accent' | 'success' | 'warning'\n  thumbIcon?: React.ReactNode\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  SwitchProps\n>(({ className, state: stateProp, size = 'md', color = 'accent', thumbIcon, checked, defaultChecked, onCheckedChange, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  const state = resolveFieldState(stateProp, fieldCtx.state)\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  // Track checked state internally to drive Framer Motion animation\n  const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false)\n  const isChecked = checked !== undefined ? checked : internalChecked\n  const reduced = useReducedMotion()\n  // Thumb travels toward the inline-end — mirror it under RTL.\n  const isRtl =\n    typeof document !== 'undefined' &&\n    (document.dir === 'rtl' || document.documentElement.dir === 'rtl')\n  const { track, thumb, travel } = sizeConfig[size]\n\n  const handleCheckedChange = React.useCallback(\n    (value: boolean) => {\n      if (checked === undefined) {\n        setInternalChecked(value)\n      }\n      onCheckedChange?.(value)\n    },\n    [checked, onCheckedChange],\n  )\n\n  return (\n    <SwitchPrimitives.Root\n      className={cn(\n        \"touch-target peer inline-flex shrink-0 cursor-pointer items-center rounded-pill border-2 border-surface-border-strong shadow-raised transition-colors duration-fast-01 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled data-[state=checked]:border-transparent data-[state=unchecked]:bg-surface-border-strong data-[state=unchecked]:hover:bg-surface-raised-active\",\n        track,\n        colorMap[color],\n        state && stateTintClasses[state],\n        className\n      )}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={handleCheckedChange}\n      aria-invalid={state === 'error' || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      {...props}\n      ref={ref}\n    >\n      <SwitchPrimitives.Thumb asChild>\n        <motion.span\n          className={cn(\n            \"pointer-events-none flex items-center justify-center rounded-pill bg-accent-fg shadow-raised-hover ring-0\",\n            thumb\n          )}\n          animate={{ x: (isChecked ? travel : 0) * (isRtl ? -1 : 1) }}\n          whileTap={reduced ? undefined : { scale: 0.85 }}\n          transition={reduced ? { duration: 0 } : springs.snappy}\n        >\n          {thumbIcon}\n        </motion.span>\n      </SwitchPrimitives.Thumb>\n    </SwitchPrimitives.Root>\n  )\n})\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAa;CACjB,IAAI;EAAE,OAAO;EAAgB,OAAO;EAAW,QAAQ;CAAG;CAC1D,IAAI;EAAE,OAAO;EAAY,OAAO;EAAqB,QAAQ;CAAG;CAChE,IAAI;EAAE,OAAO;EAAgB,OAAO;EAAW,QAAQ;CAAG;AAC5D,GAGM,IAAmE;CACvE,OAAO;CACP,SAAS;CACT,SAAS;AACX,GAEM,IAAW;CACf,QAAQ;CACR,SAAS;CACT,SAAS;AACX,GAUM,IAAS,EAAM,YAGlB,EAAE,cAAW,OAAO,GAAW,UAAO,MAAM,WAAQ,UAAU,cAAW,YAAS,mBAAgB,oBAAiB,GAAG,KAAS,MAAQ;CACxI,IAAM,IAAW,EAAa,GACxB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAGlD,CAAC,GAAiB,KAAsB,EAAM,SAAS,KAAkB,EAAK,GAC9E,IAAY,MAAY,KAAA,IAAsB,IAAV,GACpC,IAAU,EAAiB,GAE3B,IACJ,OAAO,WAAa,QACnB,SAAS,QAAQ,SAAS,SAAS,gBAAgB,QAAQ,QACxD,EAAE,UAAO,UAAO,cAAW,EAAW,IAEtC,IAAsB,EAAM,aAC/B,MAAmB;EAIlB,AAHI,MAAY,KAAA,KACd,EAAmB,CAAK,GAE1B,IAAkB,CAAK;CACzB,GACA,CAAC,GAAS,CAAe,CAC3B;CAEA,OACE,kBAAC,GAAD;EACE,WAAW,EACT,+dACA,GACA,EAAS,IACT,KAAS,EAAiB,IAC1B,CACF;EACS;EACO;EAChB,iBAAiB;EACjB,gBAAc,MAAU,WAAW,KAAA;EACnC,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,GAAI;EACC;YAEL,kBAAC,GAAD;GAAwB,SAAA;aACtB,kBAAC,EAAO,MAAR;IACE,WAAW,EACT,6GACA,CACF;IACA,SAAS,EAAE,IAAI,IAAY,IAAS,MAAM,IAAQ,KAAK,GAAG;IAC1D,UAAU,IAAU,KAAA,IAAY,EAAE,OAAO,IAAK;IAC9C,YAAY,IAAU,EAAE,UAAU,EAAE,IAAI,EAAQ;cAE/C;GACU,CAAA;EACS,CAAA;CACH,CAAA;AAE3B,CAAC;AACD,EAAO,cAAA,EAAoC"}
+{"version":3,"file":"switch.js","names":[],"sources":["../../src/ui/switch.tsx"],"sourcesContent":["'use client'\n\nimport * as SwitchPrimitives from \"@primitives/react-switch\"\nimport { motion, useReducedMotion } from 'framer-motion'\nimport * as React from \"react\"\n\nimport { useFormField } from './form'\nimport { type FieldState, resolveFieldState } from './lib/field-state'\nimport { springs } from './lib/motion'\nimport { cn } from \"./lib/utils\"\n\nconst sizeConfig = {\n  sm: { track: 'h-6 w-[38px]', thumb: 'h-5 w-5', travel: 16 },\n  md: { track: 'h-6 w-11', thumb: 'h-ico-md w-ico-md', travel: 20 },\n  lg: { track: 'h-7 w-[52px]', thumb: 'h-6 w-6', travel: 24 },\n} as const\n\n/** Validation border + checked-track tint per state (overrides `color` when set). */\nconst stateTintClasses: Record<Exclude<FieldState, 'default'>, string> = {\n  error: 'border-error-7 data-[state=checked]:bg-error-9',\n  warning: 'border-warning-7 data-[state=checked]:bg-warning-9',\n  success: 'border-success-7 data-[state=checked]:bg-success-9',\n}\n\nconst colorMap = {\n  accent: 'data-[state=checked]:bg-accent-9',\n  success: 'data-[state=checked]:bg-success-9',\n  warning: 'data-[state=checked]:bg-warning-9',\n} as const\n\nexport interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {\n  /** Validation/feedback state. `'error'` also sets `aria-invalid`. Inherited from `FormField` when omitted. Distinct from `color` (the ON-track tint). */\n  state?: FieldState\n  size?: 'sm' | 'md' | 'lg'\n  color?: 'accent' | 'success' | 'warning'\n  thumbIcon?: React.ReactNode\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitives.Root>,\n  SwitchProps\n>(({ className, state: stateProp, size = 'md', color = 'accent', thumbIcon, checked, defaultChecked, onCheckedChange, ...props }, ref) => {\n  const fieldCtx = useFormField()\n  const state = resolveFieldState(stateProp, fieldCtx.state)\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  // Track checked state internally to drive Framer Motion animation\n  const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false)\n  const isChecked = checked !== undefined ? checked : internalChecked\n  const reduced = useReducedMotion()\n  // Thumb travels toward the inline-end — mirror it under RTL.\n  const isRtl =\n    typeof document !== 'undefined' &&\n    (document.dir === 'rtl' || document.documentElement.dir === 'rtl')\n  const { track, thumb, travel } = sizeConfig[size]\n\n  const handleCheckedChange = React.useCallback(\n    (value: boolean) => {\n      if (checked === undefined) {\n        setInternalChecked(value)\n      }\n      onCheckedChange?.(value)\n    },\n    [checked, onCheckedChange],\n  )\n\n  return (\n    <SwitchPrimitives.Root\n      className={cn(\n        \"touch-target peer inline-flex shrink-0 cursor-pointer items-center rounded-pill border-2 border-surface-border-strong shadow-raised transition-colors duration-fast-01 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled data-[state=checked]:border-transparent data-[state=unchecked]:bg-surface-border-strong data-[state=unchecked]:hover:bg-surface-raised-active\",\n        track,\n        colorMap[color],\n        state && stateTintClasses[state],\n        className\n      )}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={handleCheckedChange}\n      aria-invalid={state === 'error' || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      {...props}\n      // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor>\n      // resolves. Without this the label points at nothing and the switch has NO\n      // accessible name, despite the consumer wiring FormField + Label correctly.\n      id={props.id ?? fieldCtx.inputId}\n      ref={ref}\n    >\n      <SwitchPrimitives.Thumb asChild>\n        <motion.span\n          className={cn(\n            \"pointer-events-none flex items-center justify-center rounded-pill bg-accent-fg shadow-raised-hover ring-0\",\n            thumb\n          )}\n          animate={{ x: (isChecked ? travel : 0) * (isRtl ? -1 : 1) }}\n          whileTap={reduced ? undefined : { scale: 0.85 }}\n          transition={reduced ? { duration: 0 } : springs.snappy}\n        >\n          {thumbIcon}\n        </motion.span>\n      </SwitchPrimitives.Thumb>\n    </SwitchPrimitives.Root>\n  )\n})\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAa;CACjB,IAAI;EAAE,OAAO;EAAgB,OAAO;EAAW,QAAQ;CAAG;CAC1D,IAAI;EAAE,OAAO;EAAY,OAAO;EAAqB,QAAQ;CAAG;CAChE,IAAI;EAAE,OAAO;EAAgB,OAAO;EAAW,QAAQ;CAAG;AAC5D,GAGM,IAAmE;CACvE,OAAO;CACP,SAAS;CACT,SAAS;AACX,GAEM,IAAW;CACf,QAAQ;CACR,SAAS;CACT,SAAS;AACX,GAUM,IAAS,EAAM,YAGlB,EAAE,cAAW,OAAO,GAAW,UAAO,MAAM,WAAQ,UAAU,cAAW,YAAS,mBAAgB,oBAAiB,GAAG,KAAS,MAAQ;CACxI,IAAM,IAAW,EAAa,GACxB,IAAQ,EAAkB,GAAW,EAAS,KAAK,GACnD,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAGlD,CAAC,GAAiB,KAAsB,EAAM,SAAS,KAAkB,EAAK,GAC9E,IAAY,MAAY,KAAA,IAAsB,IAAV,GACpC,IAAU,EAAiB,GAE3B,IACJ,OAAO,WAAa,QACnB,SAAS,QAAQ,SAAS,SAAS,gBAAgB,QAAQ,QACxD,EAAE,UAAO,UAAO,cAAW,EAAW,IAEtC,IAAsB,EAAM,aAC/B,MAAmB;EAIlB,AAHI,MAAY,KAAA,KACd,EAAmB,CAAK,GAE1B,IAAkB,CAAK;CACzB,GACA,CAAC,GAAS,CAAe,CAC3B;CAEA,OACE,kBAAC,GAAD;EACE,WAAW,EACT,+dACA,GACA,EAAS,IACT,KAAS,EAAiB,IAC1B,CACF;EACS;EACO;EAChB,iBAAiB;EACjB,gBAAc,MAAU,WAAW,KAAA;EACnC,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,GAAI;EAIJ,IAAI,EAAM,MAAM,EAAS;EACpB;YAEL,kBAAC,GAAD;GAAwB,SAAA;aACtB,kBAAC,EAAO,MAAR;IACE,WAAW,EACT,6GACA,CACF;IACA,SAAS,EAAE,IAAI,IAAY,IAAS,MAAM,IAAQ,KAAK,GAAG;IAC1D,UAAU,IAAU,KAAA,IAAY,EAAE,OAAO,IAAK;IAC9C,YAAY,IAAU,EAAE,UAAU,EAAE,IAAI,EAAQ;cAE/C;GACU,CAAA;EACS,CAAA;CACH,CAAA;AAE3B,CAAC;AACD,EAAO,cAAA,EAAoC"}

package/llms.txt

@@ -1,6 +1,6 @@
 # @devalok/shilp-sutra
 
-> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.55.0.
+> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.55.1.
 > Built on the same primitives as shadcn/ui but with DIFFERENT prop APIs — never guess from shadcn knowledge; verify every prop.
 > This file is a ROUTER: it tells you what exists and where to get details. Do not look for prop tables here — fetch them per component (MCP tool or per-component doc file below).
 

package/mcp-manifest.json

@@ -2,7 +2,7 @@
   "$schema": "./mcp-manifest.schema.json",
   "manifestVersion": "1.2.0",
   "package": "@devalok/shilp-sutra",
-  "packageVersion": "0.55.0",
+  "packageVersion": "0.55.1",
   "components": {
     "accordion": {
       "displayName": "Accordion",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devalok/shilp-sutra",
-  "version": "0.55.0",
+  "version": "0.55.1",
   "description": "Devalok Design System — accessible React components, OKLCH design tokens, and Tailwind 4 CSS-first setup. Ships with AI-agent setup recipes.",
   "license": "MIT",
   "author": "Devalok Design & Strategy Studios <shilp-sutra@devalok.in>",
@@ -65,6 +65,7 @@
     },
     "./css": "./dist/tokens/shilp-sutra.css",
     "./tokens": "./dist/tokens/index.css",
+    "./package.json": "./package.json",
     "./BREAKING.json": "./BREAKING.json",
     "./BREAKING.schema.json": "./BREAKING.schema.json",
     "./ui": {

package/skill/SKILL.md

@@ -3,7 +3,7 @@ name: shilp-sutra
 description: Add, configure, and use components from Devalok's shilp-sutra design system (@devalok/shilp-sutra) — a Tailwind 4 + React 19 + CVA library with 110+ accessible components, OKLCH design tokens, framer-motion animations, and per-component RSC-safe entry points. Use this skill whenever the user mentions shilp-sutra, Devalok, the @devalok npm scope, or asks to install/add/style/theme UI in any React project that already depends on the package — even if they don't name it explicitly. Use it instead of generic shadcn/ui, MUI, or Chakra knowledge when shilp-sutra is in the project. Covers Next.js (App + Pages), Vite, Astro, Remix, TanStack Start setup playbooks; component API and variant reference; brand token customization; Server Component import patterns; and a troubleshoot tree for the thirteen most common breakages.
 license: MIT
 metadata:
-  version: "0.55.0"
+  version: "0.55.1"
   author: Devalok Design & Strategy Studios
   homepage: https://github.com/devalok-design/shilp-sutra
   npm: https://www.npmjs.com/package/@devalok/shilp-sutra

package/skill/references/components.md

@@ -2,7 +2,7 @@
 
 # @devalok/shilp-sutra
 
-> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.55.0.
+> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.55.1.
 > Built on the same primitives as shadcn/ui but with DIFFERENT prop APIs — never guess from shadcn knowledge; verify every prop.
 > This file is a ROUTER: it tells you what exists and where to get details. Do not look for prop tables here — fetch them per component (MCP tool or per-component doc file below).