@zyncat/ui 0.10.0 → 0.12.0

package/dist/motion-tokens.js

@@ -1,3 +1,3 @@
-export { UIMotion, motion_tokens_default as default } from './chunk-S5ZTZANS.js';
+export { UIMotion, motion_tokens_default as default } from './chunk-7IZJERGA.js';
 //# sourceMappingURL=motion-tokens.js.map
 //# sourceMappingURL=motion-tokens.js.map

package/dist/multi-select.js

@@ -1,20 +1,21 @@
-'use client';import { useListbox, SelectTrigger, ListboxPanel } from './chunk-OMHQ4U4J.js';
-import './chunk-62P3KD57.js';
-import './chunk-RCONNA7I.js';
+'use client';import { useListbox, SelectTrigger, ListboxPanel } from './chunk-43M6GQ4Q.js';
+import './chunk-XNIYSAMJ.js';
+import './chunk-IUQAUBVM.js';
 import './chunk-UE63OOVG.js';
-import './chunk-WM5J5TDI.js';
-import './chunk-NEF5XAHG.js';
-import './chunk-356HZMT4.js';
-import './chunk-XWUWYSCT.js';
-import './chunk-YGCVWGUG.js';
-import './chunk-2ERBBFZS.js';
-import './chunk-3SBCBYB7.js';
+import './chunk-VAXCXZ53.js';
+import './chunk-JY6A2ZJZ.js';
+import './chunk-CNWTIMIP.js';
+import './chunk-DDRSMHN4.js';
+import './chunk-TUTXXC3W.js';
+import './chunk-M43IOM5C.js';
+import './chunk-IJS7TPGV.js';
+import './chunk-3MPF7FZV.js';
+import './chunk-EAI4POPB.js';
 import { useControllable } from './chunk-MMRIQNEN.js';
-import './chunk-S5ZTZANS.js';
-import './chunk-2F5PITAO.js';
-import { CheckGlyph } from './chunk-NNXJCLTV.js';
-import './chunk-7SZCJ7WI.js';
-import './chunk-VTJTGVZZ.js';
+import './chunk-7IZJERGA.js';
+import { CheckGlyph } from './chunk-RJFGWJ4W.js';
+import './chunk-45R4Z5XN.js';
+import './chunk-DMX2F6B4.js';
 import { cx } from './chunk-QGNC7LH5.js';
 import './select.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -38,6 +39,7 @@ function MultiSelect({
   id,
   ariaLabel,
   htmlProps,
+  activateOn = "pointerdown",
   animation
 }) {
   const [value, setValue] = useControllable(
@@ -82,7 +84,8 @@ function MultiSelect({
             leading: leadingIcon || selectedOptions.length === 1 && selectedOptions[0].icon || null,
             text: loading ? "Loading..." : isPlaceholder ? placeholder : selectedOptions[0].label,
             isPlaceholder,
-            count: selectedOptions.length - 1
+            count: selectedOptions.length - 1,
+            activateOn
           }
         ),
         /* @__PURE__ */ jsx(
@@ -94,8 +97,8 @@ function MultiSelect({
             searchPlaceholder,
             ariaLabel,
             multiple: true,
+            activateOn,
             animation,
-            size,
             check: (sel) => /* @__PURE__ */ jsx(CheckboxTick, { checked: sel })
           }
         )

package/dist/multi-select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/composites/select/MultiSelect.tsx"],"names":[],"mappings":"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","file":"multi-select.js","sourcesContent":["'use client';\n\nimport './select.css';\nimport type { HTMLAttributes, ReactNode } from 'react';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { CheckGlyph } from '../../primitives/checkbox/check-glyph';\nimport { useListbox, ListboxPanel, SelectTrigger, type SelectOption, type SelectGroup } from './core';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nexport type { SelectOption, SelectGroup } from './core';\n\nexport interface MultiSelectProps {\n  /** The choices - a flat `SelectOption[]`, or `SelectGroup[]` to render labeled sections. @default [] */\n  options: SelectOption[] | SelectGroup[];\n  /** Controlled value - the array of selected option `value`s. Omit for uncontrolled (use `defaultValue`). */\n  value?: string[];\n  /** Initial selection when uncontrolled. @default [] */\n  defaultValue?: string[];\n  /** Fires with the NEXT array and the option that was toggled. Committing keeps the menu open. */\n  onChange?: (value: string[], toggled: SelectOption) => void;\n  /** Trigger text when nothing is selected. @default 'Select options' */\n  placeholder?: string;\n  /** Control height. @default 'md' */\n  size?: 'sm' | 'md' | 'lg';\n  /** Disabled - trigger is inert and the menu cannot open. @default false */\n  disabled?: boolean;\n  /** Danger ring + border. @default false */\n  invalid?: boolean;\n  /** Skeleton rows in the menu; trigger reads \"Loading...\". @default false */\n  loading?: boolean;\n  /** Type-to-filter field pinned above the list. @default false */\n  searchable?: boolean;\n  /** Placeholder for the `searchable` filter input. @default 'Filter options' */\n  searchPlaceholder?: string;\n  /** Your own icon node pinned before the trigger label; else the sole selected option's icon. */\n  leadingIcon?: ReactNode;\n  /** Base id for the trigger/menu/list ids and a11y wiring; auto-generated if omitted. */\n  id?: string;\n  /** Accessible name for the trigger and listbox - supply when there is no visible label. */\n  ariaLabel?: string;\n  /** Standard <div> attributes (className, style, data-*, ...) forwarded to the select root. */\n  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  /** Menu open/close timing - motion tokens only, or `null` to disable. @default duration 'base' + ease 'entrance'/'exit' */\n  animation?: DisableableAnimation;\n}\n\nfunction CheckboxTick({ checked }: { checked: boolean }) {\n  return (\n    <span className=\"cbx\" aria-hidden=\"true\">\n      <CheckGlyph checked={checked} readOnly tabIndex={-1} />\n    </span>\n  );\n}\n\nexport function MultiSelect({\n  options = [],\n  value: controlledValue,\n  defaultValue = [],\n  onChange,\n  placeholder = 'Select options',\n  size = 'md',\n  disabled = false,\n  invalid = false,\n  loading = false,\n  searchable = false,\n  searchPlaceholder = 'Filter options',\n  leadingIcon = null,\n  id,\n  ariaLabel,\n  htmlProps,\n  animation,\n}: MultiSelectProps) {\n  const [value, setValue] = useControllable<string[], SelectOption>(\n    controlledValue,\n    defaultValue,\n    onChange as ((next: string[], opt?: SelectOption) => void) | undefined,\n  );\n  const values = Array.isArray(value) ? value : [];\n  const isSelected = (v: string) => values.indexOf(v) !== -1;\n\n  const lb = useListbox({\n    options,\n    disabled,\n    loading,\n    searchable,\n    id,\n    idPrefix: 'mselect-',\n    isSelected,\n    onCommit: (opt) =>\n      setValue(isSelected(opt.value) ? values.filter((v) => v !== opt.value) : [...values, opt.value], opt),\n    closeOnCommit: false,\n  });\n\n  const selectedOptions = lb.flat.filter((o) => isSelected(o.value));\n  const isPlaceholder = !loading && selectedOptions.length === 0;\n\n  return (\n    <div\n      {...htmlProps}\n      className={cx('select', htmlProps?.className)}\n      data-multiple=\"true\"\n      data-size={size}\n      data-open={lb.open ? 'true' : undefined}\n      data-disabled={disabled ? 'true' : undefined}\n      data-invalid={invalid ? 'true' : undefined}\n      data-loading={loading ? 'true' : undefined}\n    >\n      <SelectTrigger\n        lb={lb}\n        disabled={disabled}\n        invalid={invalid}\n        ariaLabel={ariaLabel}\n        leading={leadingIcon || (selectedOptions.length === 1 && selectedOptions[0].icon) || null}\n        text={loading ? 'Loading...' : isPlaceholder ? placeholder : selectedOptions[0].label}\n        isPlaceholder={isPlaceholder}\n        count={selectedOptions.length - 1}\n      />\n      <ListboxPanel\n        lb={lb}\n        loading={loading}\n        searchable={searchable}\n        searchPlaceholder={searchPlaceholder}\n        ariaLabel={ariaLabel}\n        multiple\n        animation={animation}\n        size={size}\n        check={(sel) => <CheckboxTick checked={sel} />}\n      />\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/composites/select/MultiSelect.tsx"],"names":[],"mappings":"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","file":"multi-select.js","sourcesContent":["'use client';\n\nimport './select.css';\n\nimport type { HTMLAttributes, ReactNode } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport type { ActivateOn } from '../../internal/utils/activation';\nimport { cx } from '../../internal/utils/cx';\nimport { CheckGlyph } from '../../primitives/checkbox/check-glyph';\nimport { ListboxPanel, SelectTrigger, useListbox, type SelectGroup, type SelectOption } from './core';\n\nexport type { SelectOption, SelectGroup } from './core';\n\nexport interface MultiSelectProps {\n  /** The choices - a flat `SelectOption[]`, or `SelectGroup[]` to render labeled sections. @default [] */\n  options: SelectOption[] | SelectGroup[];\n  /** Controlled value - the array of selected option `value`s. Omit for uncontrolled (use `defaultValue`). */\n  value?: string[];\n  /** Initial selection when uncontrolled. @default [] */\n  defaultValue?: string[];\n  /** Fires with the NEXT array and the option that was toggled. Committing keeps the menu open. */\n  onChange?: (value: string[], toggled: SelectOption) => void;\n  /** Trigger text when nothing is selected. @default 'Select options' */\n  placeholder?: string;\n  /** Control height. @default 'md' */\n  size?: 'sm' | 'md' | 'lg';\n  /** Disabled - trigger is inert and the menu cannot open. @default false */\n  disabled?: boolean;\n  /** Danger ring + border. @default false */\n  invalid?: boolean;\n  /** Skeleton rows in the menu; trigger reads \"Loading...\". @default false */\n  loading?: boolean;\n  /** Type-to-filter field pinned above the list. @default false */\n  searchable?: boolean;\n  /** Placeholder for the `searchable` filter input. @default 'Filter options' */\n  searchPlaceholder?: string;\n  /** Your own icon node pinned before the trigger label; else the sole selected option's icon. */\n  leadingIcon?: ReactNode;\n  /** Base id for the trigger/menu/list ids and a11y wiring; auto-generated if omitted. */\n  id?: string;\n  /** Accessible name for the trigger and listbox - supply when there is no visible label. */\n  ariaLabel?: string;\n  /** Standard <div> attributes (className, style, data-*, ...) forwarded to the select root. */\n  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  /** Whether the trigger and the options fire on `pointerdown` (snappier) or wait for `click`.\n   *  @default 'pointerdown' */\n  activateOn?: ActivateOn;\n  /** Menu open/close timing - motion tokens only, or `null` to disable. @default duration 'base' + ease 'entrance'/'exit' */\n  animation?: DisableableAnimation;\n}\n\nfunction CheckboxTick({ checked }: { checked: boolean }) {\n  return (\n    <span className=\"cbx\" aria-hidden=\"true\">\n      <CheckGlyph checked={checked} readOnly tabIndex={-1} />\n    </span>\n  );\n}\n\nexport function MultiSelect({\n  options = [],\n  value: controlledValue,\n  defaultValue = [],\n  onChange,\n  placeholder = 'Select options',\n  size = 'md',\n  disabled = false,\n  invalid = false,\n  loading = false,\n  searchable = false,\n  searchPlaceholder = 'Filter options',\n  leadingIcon = null,\n  id,\n  ariaLabel,\n  htmlProps,\n  activateOn = 'pointerdown',\n  animation,\n}: MultiSelectProps) {\n  const [value, setValue] = useControllable<string[], SelectOption>(\n    controlledValue,\n    defaultValue,\n    onChange as ((next: string[], opt?: SelectOption) => void) | undefined,\n  );\n  const values = Array.isArray(value) ? value : [];\n  const isSelected = (v: string) => values.indexOf(v) !== -1;\n\n  const lb = useListbox({\n    options,\n    disabled,\n    loading,\n    searchable,\n    id,\n    idPrefix: 'mselect-',\n    isSelected,\n    onCommit: (opt) =>\n      setValue(isSelected(opt.value) ? values.filter((v) => v !== opt.value) : [...values, opt.value], opt),\n    closeOnCommit: false,\n  });\n\n  const selectedOptions = lb.flat.filter((o) => isSelected(o.value));\n  const isPlaceholder = !loading && selectedOptions.length === 0;\n\n  return (\n    <div\n      {...htmlProps}\n      className={cx('select', htmlProps?.className)}\n      data-multiple=\"true\"\n      data-size={size}\n      data-open={lb.open ? 'true' : undefined}\n      data-disabled={disabled ? 'true' : undefined}\n      data-invalid={invalid ? 'true' : undefined}\n      data-loading={loading ? 'true' : undefined}\n    >\n      <SelectTrigger\n        lb={lb}\n        disabled={disabled}\n        invalid={invalid}\n        ariaLabel={ariaLabel}\n        leading={leadingIcon || (selectedOptions.length === 1 && selectedOptions[0].icon) || null}\n        text={loading ? 'Loading...' : isPlaceholder ? placeholder : selectedOptions[0].label}\n        isPlaceholder={isPlaceholder}\n        count={selectedOptions.length - 1}\n        activateOn={activateOn}\n      />\n      <ListboxPanel\n        lb={lb}\n        loading={loading}\n        searchable={searchable}\n        searchPlaceholder={searchPlaceholder}\n        ariaLabel={ariaLabel}\n        multiple\n        activateOn={activateOn}\n        animation={animation}\n        check={(sel) => <CheckboxTick checked={sel} />}\n      />\n    </div>\n  );\n}\n"]}

package/dist/number-field.js

@@ -1,11 +1,11 @@
-'use client';import { FieldLabel, FieldMessage } from './chunk-I4XQ4PV2.js';
-import { Icon } from './chunk-3SBCBYB7.js';
+'use client';import { fieldMessageId, FieldLabel, joinIds, FieldMessage } from './chunk-4BSHB7R3.js';
+import { Icon } from './chunk-EAI4POPB.js';
 import { useControllable } from './chunk-MMRIQNEN.js';
-import './chunk-7SZCJ7WI.js';
-import './chunk-VTJTGVZZ.js';
+import './chunk-45R4Z5XN.js';
+import './chunk-DMX2F6B4.js';
 import { cx } from './chunk-QGNC7LH5.js';
 import './input.css';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function NumberField({
@@ -26,6 +26,9 @@ function NumberField({
   style,
   htmlProps
 }) {
+  const autoId = useId();
+  const message = error || helper;
+  const msgId = fieldMessageId(id ?? autoId, message);
   const resolvedValue = value === void 0 ? void 0 : typeof value === "number" ? value : parseFloat(value) || 0;
   const [num, setNum] = useControllable(resolvedValue, defaultValue, onChange);
   const [draft, setDraft] = useState(null);
@@ -74,7 +77,8 @@ function NumberField({
             }
             if (e.key === "Enter") commit(v);
           },
-          ...htmlProps
+          ...htmlProps,
+          "aria-describedby": joinIds(msgId, htmlProps?.["aria-describedby"])
         }
       ),
       unit && /* @__PURE__ */ jsx("span", { className: "numf__unit", children: unit }),
@@ -103,7 +107,7 @@ function NumberField({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx(FieldMessage, { message: error || helper, icon: error ? "warning-circle" : null })
+    /* @__PURE__ */ jsx(FieldMessage, { id: msgId, message, icon: error ? "warning-circle" : null })
   ] });
 }
 

package/dist/number-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/primitives/input/NumberField.tsx"],"names":[],"mappings":"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","file":"number-field.js","sourcesContent":["'use client';\n\nimport './input.css';\nimport { useState } from 'react';\nimport type { CSSProperties, InputHTMLAttributes } from 'react';\nimport { Icon } from '../../internal/icon/Icon';\nimport { FieldLabel, FieldMessage, type FieldCoreMessagingProps, type FieldIdProps } from './field-chrome';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\ninterface NumberFieldOwnProps extends FieldIdProps, FieldCoreMessagingProps {\n  /** Unit suffix shown inside the field (e.g. \"days\", \"%\"). */\n  unit?: string;\n  /** Minimum value - steps and committed typing clamp up to this; the decrease stepper disables here. @default 0 */\n  min?: number;\n  /** Maximum value - steps and committed typing clamp down to this; the increase stepper disables here. @default Infinity */\n  max?: number;\n  /** Amount added/removed per ArrowUp/ArrowDown press and per caret stepper click. Decimals work. @default 1 */\n  step?: number;\n  /** Controlled numeric value. Omit for uncontrolled (use `defaultValue`). */\n  value?: number | string;\n  /** Uncontrolled initial value. Use instead of `value`. @default 0 */\n  defaultValue?: number;\n  /** Called with the next clamped number. */\n  onChange?: (value: number) => void;\n  /** Disabled - the input and both steppers go inert. */\n  disabled?: boolean;\n  /** Control height: sm - md (default) - lg. */\n  size?: 'sm' | 'md' | 'lg';\n  /** Extra class(es) merged onto the field root. */\n  className?: string;\n  /** Inline styles merged onto the field root. */\n  style?: CSSProperties;\n}\n\nexport interface NumberFieldProps extends NumberFieldOwnProps {\n  /** Standard <input> attributes (name, aria-*, ...) forwarded to the input. */\n  htmlProps?: Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    keyof NumberFieldOwnProps | 'size' | 'value' | 'onChange' | 'min' | 'max' | 'step'\n  > &\n    DataAttributes;\n}\n\nexport function NumberField({\n  id,\n  label,\n  helper,\n  error,\n  unit,\n  min = 0,\n  max = Infinity,\n  step = 1,\n  value,\n  defaultValue = 0,\n  onChange,\n  disabled,\n  size,\n  className = '',\n  style,\n  htmlProps,\n}: NumberFieldProps) {\n  const resolvedValue = value === undefined ? undefined : typeof value === 'number' ? value : parseFloat(value) || 0;\n  const [num, setNum] = useControllable<number>(resolvedValue, defaultValue, onChange);\n  const [draft, setDraft] = useState<string | null>(null);\n  const v = draft !== null ? parseFloat(draft) || 0 : num;\n  const snap = (n: number) => parseFloat(n.toFixed(10));\n  const clamp = (n: number) => Math.min(max, Math.max(min, snap(n)));\n  const commit = (n: number) => {\n    setDraft(null);\n    setNum(clamp(n));\n  };\n  const cls = cx(\n    'fld',\n    'numf',\n    unit && 'numf--unit',\n    size === 'sm' ? 'fld--sm' : size === 'lg' ? 'fld--lg' : '',\n    error && 'is-error',\n    className,\n  );\n\n  return (\n    <div className={cls} style={style}>\n      <FieldLabel id={id} label={label} />\n      <div className=\"fld__control\">\n        <input\n          id={id}\n          className=\"fld__input\"\n          type=\"text\"\n          inputMode=\"decimal\"\n          disabled={disabled}\n          aria-invalid={error ? true : undefined}\n          value={draft !== null ? draft : String(num)}\n          onChange={(e) => {\n            const text = e.target.value.replace(/[^\\d.-]/g, '');\n            setDraft(text);\n            setNum(clamp(parseFloat(text) || 0));\n          }}\n          onBlur={() => commit(v)}\n          onKeyDown={(e) => {\n            if (e.key === 'ArrowUp') {\n              e.preventDefault();\n              commit(v + step);\n            }\n            if (e.key === 'ArrowDown') {\n              e.preventDefault();\n              commit(v - step);\n            }\n            if (e.key === 'Enter') commit(v);\n          }}\n          {...htmlProps}\n        />\n        {unit && <span className=\"numf__unit\">{unit}</span>}\n        <div className=\"numf__steppers\">\n          <button\n            type=\"button\"\n            className=\"numf__step\"\n            aria-label=\"Increase\"\n            disabled={disabled || v >= max}\n            onClick={() => commit(v + step)}\n          >\n            <Icon name=\"caret-up\" size=\"sm\" />\n          </button>\n          <button\n            type=\"button\"\n            className=\"numf__step\"\n            aria-label=\"Decrease\"\n            disabled={disabled || v <= min}\n            onClick={() => commit(v - step)}\n          >\n            <Icon name=\"caret-down\" size=\"sm\" />\n          </button>\n        </div>\n      </div>\n      <FieldMessage message={error || helper} icon={error ? 'warning-circle' : null} />\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/primitives/input/NumberField.tsx"],"names":[],"mappings":"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","file":"number-field.js","sourcesContent":["'use client';\n\nimport './input.css';\n\nimport { useId, useState } from 'react';\nimport type { CSSProperties, InputHTMLAttributes } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { Icon } from '../../internal/icon/Icon';\nimport { cx } from '../../internal/utils/cx';\nimport {\n  FieldLabel,\n  FieldMessage,\n  fieldMessageId,\n  joinIds,\n  type FieldCoreMessagingProps,\n  type FieldIdProps,\n} from './field-chrome';\n\ninterface NumberFieldOwnProps extends FieldIdProps, FieldCoreMessagingProps {\n  /** Unit suffix shown inside the field (e.g. \"days\", \"%\"). */\n  unit?: string;\n  /** Minimum value - steps and committed typing clamp up to this; the decrease stepper disables here. @default 0 */\n  min?: number;\n  /** Maximum value - steps and committed typing clamp down to this; the increase stepper disables here. @default Infinity */\n  max?: number;\n  /** Amount added/removed per ArrowUp/ArrowDown press and per caret stepper click. Decimals work. @default 1 */\n  step?: number;\n  /** Controlled numeric value. Omit for uncontrolled (use `defaultValue`). */\n  value?: number | string;\n  /** Uncontrolled initial value. Use instead of `value`. @default 0 */\n  defaultValue?: number;\n  /** Called with the next clamped number. */\n  onChange?: (value: number) => void;\n  /** Disabled - the input and both steppers go inert. */\n  disabled?: boolean;\n  /** Control height: sm - md (default) - lg. */\n  size?: 'sm' | 'md' | 'lg';\n  /** Extra class(es) merged onto the field root. */\n  className?: string;\n  /** Inline styles merged onto the field root. */\n  style?: CSSProperties;\n}\n\nexport interface NumberFieldProps extends NumberFieldOwnProps {\n  /** Standard <input> attributes (name, aria-*, ...) forwarded to the input. */\n  htmlProps?: Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    keyof NumberFieldOwnProps | 'size' | 'value' | 'onChange' | 'min' | 'max' | 'step'\n  > &\n    DataAttributes;\n}\n\nexport function NumberField({\n  id,\n  label,\n  helper,\n  error,\n  unit,\n  min = 0,\n  max = Infinity,\n  step = 1,\n  value,\n  defaultValue = 0,\n  onChange,\n  disabled,\n  size,\n  className = '',\n  style,\n  htmlProps,\n}: NumberFieldProps) {\n  const autoId = useId();\n  const message = error || helper;\n  const msgId = fieldMessageId(id ?? autoId, message);\n  const resolvedValue = value === undefined ? undefined : typeof value === 'number' ? value : parseFloat(value) || 0;\n  const [num, setNum] = useControllable<number>(resolvedValue, defaultValue, onChange);\n  const [draft, setDraft] = useState<string | null>(null);\n  const v = draft !== null ? parseFloat(draft) || 0 : num;\n  const snap = (n: number) => parseFloat(n.toFixed(10));\n  const clamp = (n: number) => Math.min(max, Math.max(min, snap(n)));\n  const commit = (n: number) => {\n    setDraft(null);\n    setNum(clamp(n));\n  };\n  const cls = cx(\n    'fld',\n    'numf',\n    unit && 'numf--unit',\n    size === 'sm' ? 'fld--sm' : size === 'lg' ? 'fld--lg' : '',\n    error && 'is-error',\n    className,\n  );\n\n  return (\n    <div className={cls} style={style}>\n      <FieldLabel id={id} label={label} />\n      <div className=\"fld__control\">\n        <input\n          id={id}\n          className=\"fld__input\"\n          type=\"text\"\n          inputMode=\"decimal\"\n          disabled={disabled}\n          aria-invalid={error ? true : undefined}\n          value={draft !== null ? draft : String(num)}\n          onChange={(e) => {\n            const text = e.target.value.replace(/[^\\d.-]/g, '');\n            setDraft(text);\n            setNum(clamp(parseFloat(text) || 0));\n          }}\n          onBlur={() => commit(v)}\n          onKeyDown={(e) => {\n            if (e.key === 'ArrowUp') {\n              e.preventDefault();\n              commit(v + step);\n            }\n            if (e.key === 'ArrowDown') {\n              e.preventDefault();\n              commit(v - step);\n            }\n            if (e.key === 'Enter') commit(v);\n          }}\n          {...htmlProps}\n          aria-describedby={joinIds(msgId, htmlProps?.['aria-describedby'])}\n        />\n        {unit && <span className=\"numf__unit\">{unit}</span>}\n        <div className=\"numf__steppers\">\n          <button\n            type=\"button\"\n            className=\"numf__step\"\n            aria-label=\"Increase\"\n            disabled={disabled || v >= max}\n            onClick={() => commit(v + step)}\n          >\n            <Icon name=\"caret-up\" size=\"sm\" />\n          </button>\n          <button\n            type=\"button\"\n            className=\"numf__step\"\n            aria-label=\"Decrease\"\n            disabled={disabled || v <= min}\n            onClick={() => commit(v - step)}\n          >\n            <Icon name=\"caret-down\" size=\"sm\" />\n          </button>\n        </div>\n      </div>\n      <FieldMessage id={msgId} message={message} icon={error ? 'warning-circle' : null} />\n    </div>\n  );\n}\n"]}

package/dist/odometer.css

@@ -1,62 +1,61 @@
-/* Odometer - each digit is a column clipping a 0-9 strip; .odo__strip--N sets the translateY (no inline styles). */
-.odo {
-  display: inline-flex;
-  align-items: center;
-}
-.odo__col {
-  display: inline-block;
-  height: 1em;
-  line-height: 1;
-  overflow: hidden;
-}
-.odo__strip {
-  display: flex;
-  flex-direction: column;
-  transition: transform var(--duration-slow) var(--ease-entrance);
-  will-change: transform;
-}
-.odo__strip > span {
-  height: 1em;
-  line-height: 1;
-  display: block;
-  text-align: center;
-}
-.odo__fixed {
-  display: inline-block;
-}
-.odo__strip--0 {
-  transform: translateY(0);
-}
-.odo__strip--1 {
-  transform: translateY(-1em);
-}
-.odo__strip--2 {
-  transform: translateY(-2em);
-}
-.odo__strip--3 {
-  transform: translateY(-3em);
-}
-.odo__strip--4 {
-  transform: translateY(-4em);
-}
-.odo__strip--5 {
-  transform: translateY(-5em);
-}
-.odo__strip--6 {
-  transform: translateY(-6em);
-}
-.odo__strip--7 {
-  transform: translateY(-7em);
-}
-.odo__strip--8 {
-  transform: translateY(-8em);
-}
-.odo__strip--9 {
-  transform: translateY(-9em);
-}
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  .odometer {
+    --odometer-cell: 1em;
+    --odometer-digit: 1ch;
+    --odometer-gap: 0.02em;
+    --odometer-ink: var(--text-strong);
+    --odometer-accent: var(--accent);
+    --odometer-separator-ink: var(--text-muted);
+    --odometer-size: var(--size-display);
+    --odometer-weight: var(--weight-medium);
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--odometer-gap);
+    font-family: var(--font-sans);
+    font-size: var(--odometer-size);
+    font-weight: var(--odometer-weight);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    color: var(--odometer-ink);
+  }
+
+  .odometer__label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .odometer__col {
+    display: block;
+    width: var(--odometer-digit);
+    height: var(--odometer-cell);
+    overflow: hidden;
+  }
+
+  .odometer__strip {
+    --odometer-velocity: 0;
+    --odometer-blur: 0;
+
+    display: block;
+    will-change: translate, filter;
+    filter: blur(calc(var(--odometer-blur) * 1px));
+    color: color-mix(in oklab, var(--odometer-accent) calc(var(--odometer-velocity) * 100%), var(--odometer-ink));
+  }
+
+  .odometer__cell {
+    display: grid;
+    place-items: center;
+    height: var(--odometer-cell);
+  }
 
-@media (prefers-reduced-motion: reduce) {
-  .odo__strip {
-    transition: none;
+  .odometer__separator {
+    color: var(--odometer-separator-ink);
   }
 }

package/dist/odometer.js

@@ -0,0 +1,109 @@
+'use client';import { loop } from './chunk-IJS7TPGV.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './odometer.css';
+import { useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DIGITS_PER_RUN = 10;
+var STRIP_RUNS = 2;
+var SPRING_PULL = 0.05;
+var SPRING_DAMPING = 0.185;
+var ARRIVAL_MARGIN = 0.5;
+var TINT_GAIN = 2.2;
+var TINT_CEILING = 0.8;
+var TINT_FLOOR = 0.02;
+var BLUR_GAIN = 11;
+var BLUR_CEILING = 6;
+var BLUR_FLOOR = 0.25;
+var STRIP_CELLS = Array.from({ length: DIGITS_PER_RUN * STRIP_RUNS }, (_, i) => i % DIGITS_PER_RUN);
+var clampUnit = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+function writeColumn(el, column) {
+  const rate = Math.abs(column.velocity);
+  const tint = clampUnit(rate * TINT_GAIN) * TINT_CEILING;
+  const blur = Math.min(BLUR_CEILING, rate * BLUR_GAIN);
+  el.style.translate = `0 calc(var(--odometer-cell) * ${-column.position})`;
+  el.style.setProperty("--odometer-velocity", tint > TINT_FLOOR ? tint.toFixed(3) : "0");
+  el.style.setProperty("--odometer-blur", blur > BLUR_FLOOR ? blur.toFixed(2) : "0");
+}
+function stepColumns(columns, strips, k) {
+  for (let i = 0; i < columns.length; i++) {
+    const column = columns[i];
+    const el = strips[i];
+    if (!column || !el) continue;
+    column.velocity += ((column.target - column.position) * SPRING_PULL - column.velocity * SPRING_DAMPING) * k;
+    column.position += column.velocity * k;
+    if (column.position > DIGITS_PER_RUN && column.target > DIGITS_PER_RUN) {
+      column.position -= DIGITS_PER_RUN;
+      column.target -= DIGITS_PER_RUN;
+    }
+    writeColumn(el, column);
+  }
+}
+function snapColumns(columns, strips) {
+  for (let i = 0; i < columns.length; i++) {
+    const column = columns[i];
+    const el = strips[i];
+    if (!column || !el) continue;
+    column.position = column.target % DIGITS_PER_RUN;
+    column.target = column.position;
+    column.velocity = 0;
+    writeColumn(el, column);
+  }
+}
+function aimColumns(columns, digits) {
+  columns.length = digits.length;
+  for (let i = 0; i < digits.length; i++) {
+    const column = columns[i] ??= { position: 0, velocity: 0, target: 0 };
+    let target = Number(digits[i]);
+    while (target < column.position + ARRIVAL_MARGIN) target += DIGITS_PER_RUN;
+    column.target = target;
+  }
+}
+function Odometer({ value, format, speed = 1, className = "", style, htmlProps }) {
+  const text = format ? format(value) : String(Math.trunc(value));
+  const rootRef = useRef(null);
+  const stripsRef = useRef([]);
+  const columnsRef = useRef([]);
+  const speedRef = useRef(speed);
+  useEffect(() => {
+    speedRef.current = speed;
+  }, [speed]);
+  useEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const playback = loop((k) => stepColumns(columnsRef.current, stripsRef.current, k), {
+      el,
+      speed: () => speedRef.current,
+      snap: () => snapColumns(columnsRef.current, stripsRef.current)
+    });
+    return () => playback.stop();
+  }, []);
+  useEffect(() => {
+    aimColumns(columnsRef.current, text.replace(/\D/g, ""));
+    if (UIMotion.reduced) snapColumns(columnsRef.current, stripsRef.current);
+  }, [text]);
+  let digitIndex = -1;
+  return /* @__PURE__ */ jsxs("span", { ref: rootRef, className: cx("odometer", className), style, ...htmlProps, children: [
+    /* @__PURE__ */ jsx("span", { className: "odometer__label", children: text }),
+    Array.from(text, (char, i) => {
+      if (!/\d/.test(char))
+        return /* @__PURE__ */ jsx("span", { className: "odometer__separator", "aria-hidden": "true", children: char }, i);
+      const slot = ++digitIndex;
+      return /* @__PURE__ */ jsx("span", { className: "odometer__col", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "odometer__strip",
+          ref: (el) => {
+            stripsRef.current[slot] = el;
+          },
+          children: STRIP_CELLS.map((cell, c) => /* @__PURE__ */ jsx("span", { className: "odometer__cell", children: cell }, c))
+        }
+      ) }, i);
+    })
+  ] });
+}
+
+export { Odometer };
+//# sourceMappingURL=odometer.js.map
+//# sourceMappingURL=odometer.js.map

package/dist/odometer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/expressive/odometer/Odometer.tsx"],"names":[],"mappings":"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","file":"odometer.js","sourcesContent":["'use client';\n\nimport './odometer.css';\n\nimport { useEffect, useRef, type HTMLAttributes } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { loop } from '../../../engine';\nimport type { OdometerStyle } from '../../../tokens/component-styles.generated';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { cx } from '../../internal/utils/cx';\n\nconst DIGITS_PER_RUN = 10;\nconst STRIP_RUNS = 2;\nconst SPRING_PULL = 0.05;\nconst SPRING_DAMPING = 0.185;\nconst ARRIVAL_MARGIN = 0.5;\nconst TINT_GAIN = 2.2;\nconst TINT_CEILING = 0.8;\nconst TINT_FLOOR = 0.02;\nconst BLUR_GAIN = 11;\nconst BLUR_CEILING = 6;\nconst BLUR_FLOOR = 0.25;\n\nconst STRIP_CELLS = Array.from({ length: DIGITS_PER_RUN * STRIP_RUNS }, (_, i) => i % DIGITS_PER_RUN);\n\ninterface Column {\n  position: number;\n  velocity: number;\n  target: number;\n}\n\nconst clampUnit = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v);\n\nfunction writeColumn(el: HTMLElement, column: Column) {\n  const rate = Math.abs(column.velocity);\n  const tint = clampUnit(rate * TINT_GAIN) * TINT_CEILING;\n  const blur = Math.min(BLUR_CEILING, rate * BLUR_GAIN);\n  el.style.translate = `0 calc(var(--odometer-cell) * ${-column.position})`;\n  el.style.setProperty('--odometer-velocity', tint > TINT_FLOOR ? tint.toFixed(3) : '0');\n  el.style.setProperty('--odometer-blur', blur > BLUR_FLOOR ? blur.toFixed(2) : '0');\n}\n\nfunction stepColumns(columns: Column[], strips: (HTMLElement | null)[], k: number) {\n  for (let i = 0; i < columns.length; i++) {\n    const column = columns[i];\n    const el = strips[i];\n    if (!column || !el) continue;\n    column.velocity += ((column.target - column.position) * SPRING_PULL - column.velocity * SPRING_DAMPING) * k;\n    column.position += column.velocity * k;\n    if (column.position > DIGITS_PER_RUN && column.target > DIGITS_PER_RUN) {\n      column.position -= DIGITS_PER_RUN;\n      column.target -= DIGITS_PER_RUN;\n    }\n    writeColumn(el, column);\n  }\n}\n\nfunction snapColumns(columns: Column[], strips: (HTMLElement | null)[]) {\n  for (let i = 0; i < columns.length; i++) {\n    const column = columns[i];\n    const el = strips[i];\n    if (!column || !el) continue;\n    column.position = column.target % DIGITS_PER_RUN;\n    column.target = column.position;\n    column.velocity = 0;\n    writeColumn(el, column);\n  }\n}\n\nfunction aimColumns(columns: Column[], digits: string) {\n  columns.length = digits.length;\n  for (let i = 0; i < digits.length; i++) {\n    const column = (columns[i] ??= { position: 0, velocity: 0, target: 0 });\n    let target = Number(digits[i]);\n    while (target < column.position + ARRIVAL_MARGIN) target += DIGITS_PER_RUN;\n    column.target = target;\n  }\n}\n\nexport interface OdometerOwnProps {\n  /** The number to roll to. Every digit column carries its own spring, so digits arrive out of sync. */\n  value: number;\n  /** Renders the value into the displayed string; digits become rolling columns, everything else becomes a static separator. @default String(Math.trunc(value)) */\n  format?: (value: number) => string;\n  /** Multiplies the simulation rate; sampled live on every frame. @default 1 */\n  speed?: number;\n  /** Extra class(es) merged onto the root. */\n  className?: string;\n  /** Inline styles merged onto the root. */\n  style?: OdometerStyle;\n}\n\nexport interface OdometerProps extends OdometerOwnProps {\n  /** Standard <span> attributes (aria-*, data-*, title, ...) forwarded to the root. */\n  htmlProps?: Omit<HTMLAttributes<HTMLSpanElement>, keyof OdometerOwnProps> & DataAttributes;\n}\n\nexport function Odometer({ value, format, speed = 1, className = '', style, htmlProps }: OdometerProps) {\n  const text = format ? format(value) : String(Math.trunc(value));\n  const rootRef = useRef<HTMLSpanElement>(null);\n  const stripsRef = useRef<(HTMLElement | null)[]>([]);\n  const columnsRef = useRef<Column[]>([]);\n  const speedRef = useRef(speed);\n\n  useEffect(() => {\n    speedRef.current = speed;\n  }, [speed]);\n\n  useEffect(() => {\n    const el = rootRef.current;\n    if (!el) return;\n    const playback = loop((k) => stepColumns(columnsRef.current, stripsRef.current, k), {\n      el,\n      speed: () => speedRef.current,\n      snap: () => snapColumns(columnsRef.current, stripsRef.current),\n    });\n    return () => playback.stop();\n  }, []);\n\n  useEffect(() => {\n    aimColumns(columnsRef.current, text.replace(/\\D/g, ''));\n    if (UIMotion.reduced) snapColumns(columnsRef.current, stripsRef.current);\n  }, [text]);\n\n  let digitIndex = -1;\n\n  return (\n    <span ref={rootRef} className={cx('odometer', className)} style={style} {...htmlProps}>\n      <span className=\"odometer__label\">{text}</span>\n      {Array.from(text, (char, i) => {\n        if (!/\\d/.test(char))\n          return (\n            <span key={i} className=\"odometer__separator\" aria-hidden=\"true\">\n              {char}\n            </span>\n          );\n        const slot = ++digitIndex;\n        return (\n          <span key={i} className=\"odometer__col\" aria-hidden=\"true\">\n            <span\n              className=\"odometer__strip\"\n              ref={(el) => {\n                stripsRef.current[slot] = el;\n              }}\n            >\n              {STRIP_CELLS.map((cell, c) => (\n                <span key={c} className=\"odometer__cell\">\n                  {cell}\n                </span>\n              ))}\n            </span>\n          </span>\n        );\n      })}\n    </span>\n  );\n}\n"]}

package/dist/otp-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/primitives/input/OtpField.tsx"],"names":[],"mappings":"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","file":"otp-field.js","sourcesContent":["'use client';\n\nimport './input.css';\nimport { useRef } from 'react';\nimport type {\n  ChangeEvent,\n  ClipboardEvent,\n  CSSProperties,\n  FocusEvent,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n} from 'react';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\ninterface OtpFieldOwnProps {\n  /** Number of slots. @default 6 */\n  length?: number;\n  /** Controlled value (digit string). */\n  value?: string;\n  /** Called with the next value string. */\n  onChange?: (value: string) => void;\n  /** Insert a separator every N slots (e.g. 3 - \"-------\"). */\n  group?: number;\n  /** Error state (red slots + ring). */\n  error?: boolean;\n  /** Disable every slot. */\n  disabled?: boolean;\n  /** Compact slot sizing. Only `sm`; omit for default. */\n  size?: 'sm';\n  /** Extra class(es) appended to the root wrapper. */\n  className?: string;\n  /** Inline styles merged onto the root wrapper. */\n  style?: CSSProperties;\n}\n\nexport interface OtpFieldProps extends OtpFieldOwnProps {\n  /** Standard <div> attributes (aria-*, data-*, ...) forwarded to the root wrapper. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof OtpFieldOwnProps> & DataAttributes;\n}\n\nexport function OtpField({\n  length = 6,\n  value = '',\n  onChange,\n  group,\n  error,\n  disabled,\n  size,\n  className = '',\n  style,\n  htmlProps,\n}: OtpFieldProps) {\n  const refs = useRef<(HTMLInputElement | null)[]>([]);\n  const chars = String(value).slice(0, length).padEnd(length).split('');\n  const emit = (s: string) => onChange && onChange(s.replace(/ +$/, '').slice(0, length));\n  const setAt = (i: number, ch: string) => {\n    const a = chars.slice();\n    a[i] = ch || ' ';\n    emit(a.join(''));\n  };\n  const caretEnd = (el: HTMLInputElement | null) => {\n    if (!el) return;\n    const n = el.value.length;\n    try {\n      el.setSelectionRange(n, n);\n    } catch {}\n  };\n  const go = (j: number) => {\n    const el = refs.current[j];\n    if (el) {\n      el.focus();\n      caretEnd(el);\n    }\n  };\n\n  const cls = cx('otp', size === 'sm' && 'otp--sm', error && 'is-error', className);\n\n  const cells: ReactNode[] = [];\n  for (let i = 0; i < length; i++) {\n    if (group && i > 0 && i % group === 0) cells.push(<span key={`sep${i}`} className=\"otp__sep\" />);\n    cells.push(\n      <input\n        key={i}\n        ref={(el) => {\n          refs.current[i] = el;\n        }}\n        className=\"otp__slot\"\n        inputMode=\"numeric\"\n        autoComplete=\"one-time-code\"\n        disabled={disabled}\n        aria-invalid={error || undefined}\n        value={chars[i].trim()}\n        data-filled={chars[i].trim() ? 'true' : 'false'}\n        onFocus={(e: FocusEvent<HTMLInputElement>) => caretEnd(e.target)}\n        onMouseDown={(e: MouseEvent<HTMLInputElement>) => {\n          e.preventDefault();\n          go(i);\n        }}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          const ch = e.target.value.replace(/[^\\d]/g, '').slice(-1);\n          setAt(i, ch);\n          if (ch && i < length - 1) go(i + 1);\n        }}\n        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n          if (e.key === 'Backspace' && !chars[i].trim() && i > 0) {\n            e.preventDefault();\n            setAt(i - 1, '');\n            go(i - 1);\n          } else if (e.key === 'ArrowLeft' && i > 0) {\n            e.preventDefault();\n            go(i - 1);\n          } else if (e.key === 'ArrowRight' && i < length - 1) {\n            e.preventDefault();\n            go(i + 1);\n          }\n        }}\n        onPaste={(e: ClipboardEvent<HTMLInputElement>) => {\n          e.preventDefault();\n          const d = (e.clipboardData.getData('text') || '').replace(/[^\\d]/g, '');\n          emit(chars.slice(0, i).join('') + d);\n          refs.current[Math.min(i + d.length, length - 1)]?.focus();\n        }}\n      />,\n    );\n  }\n  return (\n    <div className={cls} style={style} {...htmlProps}>\n      {cells}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/primitives/input/OtpField.tsx"],"names":[],"mappings":";;;;;AA6CO,SAAS,QAAA,CAAS;AAAA,EACvB,MAAA,GAAS,CAAA;AAAA,EACT,KAAA,GAAQ,EAAA;AAAA,EACR,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,KAAA;AAAA,EACA;AACF,CAAA,EAAkB;AAChB,EAAA,MAAM,IAAA,GAAO,MAAA,CAAoC,EAAE,CAAA;AACnD,EAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,KAAK,CAAA,CAAE,KAAA,CAAM,CAAA,EAAG,MAAM,CAAA,CAAE,MAAA,CAAO,MAAM,CAAA,CAAE,KAAA,CAAM,EAAE,CAAA;AACpE,EAAA,MAAM,IAAA,GAAO,CAAC,CAAA,KAAc,QAAA,IAAY,QAAA,CAAS,CAAA,CAAE,OAAA,CAAQ,KAAA,EAAO,EAAE,CAAA,CAAE,KAAA,CAAM,CAAA,EAAG,MAAM,CAAC,CAAA;AACtF,EAAA,MAAM,KAAA,GAAQ,CAAC,CAAA,EAAW,EAAA,KAAe;AACvC,IAAA,MAAM,CAAA,GAAI,MAAM,KAAA,EAAM;AACtB,IAAA,CAAA,CAAE,CAAC,IAAI,EAAA,IAAM,GAAA;AACb,IAAA,IAAA,CAAK,CAAA,CAAE,IAAA,CAAK,EAAE,CAAC,CAAA;AAAA,EACjB,CAAA;AACA,EAAA,MAAM,QAAA,GAAW,CAAC,EAAA,KAAgC;AAChD,IAAA,IAAI,CAAC,EAAA,EAAI;AACT,IAAA,MAAM,CAAA,GAAI,GAAG,KAAA,CAAM,MAAA;AACnB,IAAA,IAAI;AACF,MAAA,EAAA,CAAG,iBAAA,CAAkB,GAAG,CAAC,CAAA;AAAA,IAC3B,CAAA,CAAA,MAAQ;AAAA,IAAC;AAAA,EACX,CAAA;AACA,EAAA,MAAM,EAAA,GAAK,CAAC,CAAA,KAAc;AACxB,IAAA,MAAM,EAAA,GAAK,IAAA,CAAK,OAAA,CAAQ,CAAC,CAAA;AACzB,IAAA,IAAI,EAAA,EAAI;AACN,MAAA,EAAA,CAAG,KAAA,EAAM;AACT,MAAA,QAAA,CAAS,EAAE,CAAA;AAAA,IACb;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,GAAA,GAAM,GAAG,KAAA,EAAO,IAAA,KAAS,QAAQ,SAAA,EAAW,KAAA,IAAS,YAAY,SAAS,CAAA;AAEhF,EAAA,MAAM,QAAqB,EAAC;AAC5B,EAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,MAAA,EAAQ,CAAA,EAAA,EAAK;AAC/B,IAAA,IAAI,KAAA,IAAS,CAAA,GAAI,CAAA,IAAK,CAAA,GAAI,UAAU,CAAA,EAAG,KAAA,CAAM,IAAA,iBAAK,GAAA,CAAC,UAAqB,SAAA,EAAU,UAAA,EAAA,EAArB,CAAA,GAAA,EAAM,CAAC,EAAyB,CAAE,CAAA;AAC/F,IAAA,KAAA,CAAM,IAAA;AAAA,sBACJ,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UAEC,GAAA,EAAK,CAAC,EAAA,KAAO;AACX,YAAA,IAAA,CAAK,OAAA,CAAQ,CAAC,CAAA,GAAI,EAAA;AAAA,UACpB,CAAA;AAAA,UACA,SAAA,EAAU,WAAA;AAAA,UACV,SAAA,EAAU,SAAA;AAAA,UACV,YAAA,EAAa,eAAA;AAAA,UACb,QAAA;AAAA,UACA,gBAAc,KAAA,IAAS,MAAA;AAAA,UACvB,KAAA,EAAO,KAAA,CAAM,CAAC,CAAA,CAAE,IAAA,EAAK;AAAA,UACrB,eAAa,KAAA,CAAM,CAAC,CAAA,CAAE,IAAA,KAAS,MAAA,GAAS,OAAA;AAAA,UACxC,OAAA,EAAS,CAAC,CAAA,KAAoC,QAAA,CAAS,EAAE,MAAM,CAAA;AAAA,UAC/D,WAAA,EAAa,CAAC,CAAA,KAAoC;AAChD,YAAA,CAAA,CAAE,cAAA,EAAe;AACjB,YAAA,EAAA,CAAG,CAAC,CAAA;AAAA,UACN,CAAA;AAAA,UACA,QAAA,EAAU,CAAC,CAAA,KAAqC;AAC9C,YAAA,MAAM,EAAA,GAAK,EAAE,MAAA,CAAO,KAAA,CAAM,QAAQ,QAAA,EAAU,EAAE,CAAA,CAAE,KAAA,CAAM,EAAE,CAAA;AACxD,YAAA,KAAA,CAAM,GAAG,EAAE,CAAA;AACX,YAAA,IAAI,MAAM,CAAA,GAAI,MAAA,GAAS,CAAA,EAAG,EAAA,CAAG,IAAI,CAAC,CAAA;AAAA,UACpC,CAAA;AAAA,UACA,SAAA,EAAW,CAAC,CAAA,KAAuC;AACjD,YAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,WAAA,IAAe,CAAC,KAAA,CAAM,CAAC,CAAA,CAAE,IAAA,EAAK,IAAK,CAAA,GAAI,CAAA,EAAG;AACtD,cAAA,CAAA,CAAE,cAAA,EAAe;AACjB,cAAA,KAAA,CAAM,CAAA,GAAI,GAAG,EAAE,CAAA;AACf,cAAA,EAAA,CAAG,IAAI,CAAC,CAAA;AAAA,YACV,CAAA,MAAA,IAAW,CAAA,CAAE,GAAA,KAAQ,WAAA,IAAe,IAAI,CAAA,EAAG;AACzC,cAAA,CAAA,CAAE,cAAA,EAAe;AACjB,cAAA,EAAA,CAAG,IAAI,CAAC,CAAA;AAAA,YACV,WAAW,CAAA,CAAE,GAAA,KAAQ,YAAA,IAAgB,CAAA,GAAI,SAAS,CAAA,EAAG;AACnD,cAAA,CAAA,CAAE,cAAA,EAAe;AACjB,cAAA,EAAA,CAAG,IAAI,CAAC,CAAA;AAAA,YACV;AAAA,UACF,CAAA;AAAA,UACA,OAAA,EAAS,CAAC,CAAA,KAAwC;AAChD,YAAA,CAAA,CAAE,cAAA,EAAe;AACjB,YAAA,MAAM,CAAA,GAAA,CAAK,EAAE,aAAA,CAAc,OAAA,CAAQ,MAAM,CAAA,IAAK,EAAA,EAAI,OAAA,CAAQ,QAAA,EAAU,EAAE,CAAA;AACtE,YAAA,IAAA,CAAK,KAAA,CAAM,MAAM,CAAA,EAAG,CAAC,EAAE,IAAA,CAAK,EAAE,IAAI,CAAC,CAAA;AACnC,YAAA,IAAA,CAAK,OAAA,CAAQ,IAAA,CAAK,GAAA,CAAI,CAAA,GAAI,CAAA,CAAE,QAAQ,MAAA,GAAS,CAAC,CAAC,CAAA,EAAG,KAAA,EAAM;AAAA,UAC1D;AAAA,SAAA;AAAA,QAvCK;AAAA;AAwCP,KACF;AAAA,EACF;AACA,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,KAAK,KAAA,EAAe,GAAG,WACpC,QAAA,EAAA,KAAA,EACH,CAAA;AAEJ","file":"otp-field.js","sourcesContent":["'use client';\n\nimport './input.css';\n\nimport { useRef } from 'react';\nimport type {\n  ChangeEvent,\n  ClipboardEvent,\n  CSSProperties,\n  FocusEvent,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n} from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\ninterface OtpFieldOwnProps {\n  /** Number of slots. @default 6 */\n  length?: number;\n  /** Controlled value (digit string). */\n  value?: string;\n  /** Called with the next value string. */\n  onChange?: (value: string) => void;\n  /** Insert a separator every N slots (e.g. 3 - \"-------\"). */\n  group?: number;\n  /** Error state (red slots + ring). */\n  error?: boolean;\n  /** Disable every slot. */\n  disabled?: boolean;\n  /** Compact slot sizing. Only `sm`; omit for default. */\n  size?: 'sm';\n  /** Extra class(es) appended to the root wrapper. */\n  className?: string;\n  /** Inline styles merged onto the root wrapper. */\n  style?: CSSProperties;\n}\n\nexport interface OtpFieldProps extends OtpFieldOwnProps {\n  /** Standard <div> attributes (aria-*, data-*, ...) forwarded to the root wrapper. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof OtpFieldOwnProps> & DataAttributes;\n}\n\nexport function OtpField({\n  length = 6,\n  value = '',\n  onChange,\n  group,\n  error,\n  disabled,\n  size,\n  className = '',\n  style,\n  htmlProps,\n}: OtpFieldProps) {\n  const refs = useRef<(HTMLInputElement | null)[]>([]);\n  const chars = String(value).slice(0, length).padEnd(length).split('');\n  const emit = (s: string) => onChange && onChange(s.replace(/ +$/, '').slice(0, length));\n  const setAt = (i: number, ch: string) => {\n    const a = chars.slice();\n    a[i] = ch || ' ';\n    emit(a.join(''));\n  };\n  const caretEnd = (el: HTMLInputElement | null) => {\n    if (!el) return;\n    const n = el.value.length;\n    try {\n      el.setSelectionRange(n, n);\n    } catch {}\n  };\n  const go = (j: number) => {\n    const el = refs.current[j];\n    if (el) {\n      el.focus();\n      caretEnd(el);\n    }\n  };\n\n  const cls = cx('otp', size === 'sm' && 'otp--sm', error && 'is-error', className);\n\n  const cells: ReactNode[] = [];\n  for (let i = 0; i < length; i++) {\n    if (group && i > 0 && i % group === 0) cells.push(<span key={`sep${i}`} className=\"otp__sep\" />);\n    cells.push(\n      <input\n        key={i}\n        ref={(el) => {\n          refs.current[i] = el;\n        }}\n        className=\"otp__slot\"\n        inputMode=\"numeric\"\n        autoComplete=\"one-time-code\"\n        disabled={disabled}\n        aria-invalid={error || undefined}\n        value={chars[i].trim()}\n        data-filled={chars[i].trim() ? 'true' : 'false'}\n        onFocus={(e: FocusEvent<HTMLInputElement>) => caretEnd(e.target)}\n        onMouseDown={(e: MouseEvent<HTMLInputElement>) => {\n          e.preventDefault();\n          go(i);\n        }}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          const ch = e.target.value.replace(/[^\\d]/g, '').slice(-1);\n          setAt(i, ch);\n          if (ch && i < length - 1) go(i + 1);\n        }}\n        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n          if (e.key === 'Backspace' && !chars[i].trim() && i > 0) {\n            e.preventDefault();\n            setAt(i - 1, '');\n            go(i - 1);\n          } else if (e.key === 'ArrowLeft' && i > 0) {\n            e.preventDefault();\n            go(i - 1);\n          } else if (e.key === 'ArrowRight' && i < length - 1) {\n            e.preventDefault();\n            go(i + 1);\n          }\n        }}\n        onPaste={(e: ClipboardEvent<HTMLInputElement>) => {\n          e.preventDefault();\n          const d = (e.clipboardData.getData('text') || '').replace(/[^\\d]/g, '');\n          emit(chars.slice(0, i).join('') + d);\n          refs.current[Math.min(i + d.length, length - 1)]?.focus();\n        }}\n      />,\n    );\n  }\n  return (\n    <div className={cls} style={style} {...htmlProps}>\n      {cells}\n    </div>\n  );\n}\n"]}

package/dist/overlay.css

@@ -1,26 +1,30 @@
-/* overlay.css - the modal shell geometry shared by dialog and sheet: a fixed
+@layer zyncat.tokens, zyncat.components;
+
+@layer zyncat.components {
+  /* overlay.css - the modal shell geometry shared by dialog and sheet: a fixed
    full-viewport layer, the scrim filling it, and the grid cell the panel
    mounts in (min 0 + max 100% give a scroll constraint chain). Per-component
    placement lives with each consumer (dialog.css, sheet.css); the popover
    paints itself entirely from popover.css. */
-.overlay-layer {
-  position: fixed;
-  inset: 0;
-  display: grid;
-}
-.overlay-layer--scoped {
-  position: absolute;
-}
-.overlay-scrim {
-  position: absolute;
-  inset: 0;
-  background: var(--bg-overlay);
-}
+  .overlay-layer {
+    position: fixed;
+    inset: 0;
+    display: grid;
+  }
+  .overlay-layer--scoped {
+    position: absolute;
+  }
+  .overlay-scrim {
+    position: absolute;
+    inset: 0;
+    background: var(--bg-overlay);
+  }
 
-.overlay-panel {
-  position: relative;
-  display: grid;
-  outline: none;
-  min-width: 0;
-  min-height: 0;
+  .overlay-panel {
+    position: relative;
+    display: grid;
+    outline: none;
+    min-width: 0;
+    min-height: 0;
+  }
 }