@acronis-platform/ui-react 4.0.0 → 4.1.0

package/dist/components/ui/input-date-picker/input-date-picker.js

@@ -1,114 +1,70 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import * as h from "react";
-import { CalendarIcon as E } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as i } from "../../../lib/utils.js";
-const F = h.forwardRef(
-  ({
-    className: k,
-    style: m,
-    id: f,
-    label: a,
-    required: v,
-    description: N,
-    error: o,
-    pickerType: w = "date",
-    placeholder: I,
-    value: t,
-    startDate: l,
-    endDate: n,
-    separator: y = "–",
-    open: s,
-    disabled: d,
-    "aria-invalid": R,
-    ...j
-  }, z) => {
-    const P = h.useId(), u = f ?? P, g = `${u}-message`, p = o != null && o !== "", q = p || R, c = p ? o : N, b = c != null && c !== "", x = w === "dateRange", C = x ? l != null && l !== "" || n != null && n !== "" : t != null && t !== "";
-    return /* @__PURE__ */ e(
-      "div",
-      {
-        className: i(
-          "group/field flex min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]",
-          k
-        ),
-        style: m,
-        children: [
-          a != null && a !== "" && /* @__PURE__ */ e(
-            "label",
-            {
-              htmlFor: u,
-              className: i(
-                "flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4",
-                d ? "text-[var(--ui-input-date-picker-global-label-color-disabled)]" : "text-[var(--ui-input-date-picker-global-label-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-global-label-color-hover)]"
-              ),
-              children: [
-                a,
-                v && /* @__PURE__ */ r(
-                  "span",
-                  {
-                    "aria-hidden": "true",
-                    className: "text-[var(--ui-input-date-picker-global-required-color)]",
-                    children: "*"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ e(
-            "button",
-            {
-              ref: z,
-              id: u,
-              type: "button",
-              disabled: d,
-              "aria-invalid": q || void 0,
-              "aria-required": v || void 0,
-              "aria-haspopup": "dialog",
-              "aria-expanded": s || void 0,
-              "aria-describedby": b ? g : void 0,
-              "data-open": s || void 0,
-              className: i(
-                "group/trigger flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-start text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors",
-                "enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)]",
-                "not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)]",
-                "not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]",
-                "aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] enabled:aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]",
-                "disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]"
-              ),
-              ...j,
-              children: [
-                C ? x ? /* @__PURE__ */ e("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate", children: [
-                  /* @__PURE__ */ r("span", { children: l }),
-                  /* @__PURE__ */ r("span", { className: "text-[var(--ui-input-date-picker-global-separator-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-separator-color-disabled)]", children: y }),
-                  /* @__PURE__ */ r("span", { children: n })
-                ] }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate", children: t }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]", children: I }),
-                /* @__PURE__ */ r("span", { className: "flex size-[var(--ui-input-date-picker-global-icon-box-size)] shrink-0 items-center justify-center", children: /* @__PURE__ */ r(
-                  E,
-                  {
-                    size: 16,
-                    className: "text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]/trigger:text-[var(--ui-input-date-picker-error-icon-color-idle)] group-aria-[invalid=true]/trigger:group-hover/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)] group-aria-[invalid=true]/trigger:group-data-[open]/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)]"
-                  }
-                ) })
-              ]
-            }
-          ),
-          b && /* @__PURE__ */ r(
-            "p",
-            {
-              id: g,
-              className: i(
-                "text-xs leading-4",
-                p ? "text-[var(--ui-input-date-picker-error-error-msg-color)]" : d ? "text-[var(--ui-input-date-picker-normal-description-color-disabled)]" : "text-[var(--ui-input-date-picker-normal-description-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-normal-description-color-hover)]"
-              ),
-              children: c
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-F.displayName = "InputDatePicker";
-export {
-  F as InputDatePicker
-};
-//# sourceMappingURL=input-date-picker.js.map
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { CalendarIcon as i } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/input-date-picker/input-date-picker.tsx
+var a = t.forwardRef(({ className: a, style: o, id: s, label: c, required: l, description: u, error: d, pickerType: f = "date", placeholder: p, value: m, startDate: h, endDate: g, separator: _ = "–", open: v, disabled: y, "aria-invalid": b, ...x }, S) => {
+	let C = t.useId(), w = s ?? C, T = `${w}-message`, E = d != null && d !== "", D = E || b, O = E ? d : u, k = O != null && O !== "", A = f === "dateRange", j = A ? h != null && h !== "" || g != null && g !== "" : m != null && m !== "";
+	return /* @__PURE__ */ r("div", {
+		className: e("group/field flex min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]", a),
+		style: o,
+		children: [
+			c != null && c !== "" && /* @__PURE__ */ r("label", {
+				htmlFor: w,
+				className: e("flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4", y ? "text-[var(--ui-input-date-picker-global-label-color-disabled)]" : "text-[var(--ui-input-date-picker-global-label-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-global-label-color-hover)]"),
+				children: [c, l && /* @__PURE__ */ n("span", {
+					"aria-hidden": "true",
+					className: "text-[var(--ui-input-date-picker-global-required-color)]",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ r("button", {
+				ref: S,
+				id: w,
+				type: "button",
+				disabled: y,
+				"aria-invalid": D || void 0,
+				"aria-required": l || void 0,
+				"aria-haspopup": "dialog",
+				"aria-expanded": v || void 0,
+				"aria-describedby": k ? T : void 0,
+				"data-open": v || void 0,
+				className: e("group/trigger flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-start text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors", "enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)]", "not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)]", "not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]", "aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] enabled:aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]", "disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]"),
+				...x,
+				children: [j ? A ? /* @__PURE__ */ r("span", {
+					className: "flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate",
+					children: [
+						/* @__PURE__ */ n("span", { children: h }),
+						/* @__PURE__ */ n("span", {
+							className: "text-[var(--ui-input-date-picker-global-separator-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-separator-color-disabled)]",
+							children: _
+						}),
+						/* @__PURE__ */ n("span", { children: g })
+					]
+				}) : /* @__PURE__ */ n("span", {
+					className: "min-w-0 flex-1 truncate",
+					children: m
+				}) : /* @__PURE__ */ n("span", {
+					className: "min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]",
+					children: p
+				}), /* @__PURE__ */ n("span", {
+					className: "flex size-[var(--ui-input-date-picker-global-icon-box-size)] shrink-0 items-center justify-center",
+					children: /* @__PURE__ */ n(i, {
+						size: 16,
+						className: "text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]/trigger:text-[var(--ui-input-date-picker-error-icon-color-idle)] group-aria-[invalid=true]/trigger:group-hover/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)] group-aria-[invalid=true]/trigger:group-data-[open]/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)]"
+					})
+				})]
+			}),
+			k && /* @__PURE__ */ n("p", {
+				id: T,
+				className: e("text-xs leading-4", E ? "text-[var(--ui-input-date-picker-error-error-msg-color)]" : y ? "text-[var(--ui-input-date-picker-normal-description-color-disabled)]" : "text-[var(--ui-input-date-picker-normal-description-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-normal-description-color-hover)]"),
+				children: O
+			})
+		]
+	});
+});
+a.displayName = "InputDatePicker";
+//#endregion
+export { a as InputDatePicker };
+
+//# sourceMappingURL=input-date-picker.js.map

package/dist/components/ui/input-date-picker/input-date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-date-picker.js","sources":["../../../../src/components/ui/input-date-picker/input-date-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CalendarIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputDatePicker\" component: the date-field **trigger** — a\n// button box that displays a formatted date `value` (or a `startDate – endDate`\n// range when `pickerType=\"dateRange\"`) and a trailing calendar icon, with the field\n// furniture (optional `label` + required `*`, optional `description` / `error`).\n// Themed by the `--ui-input-date-picker-*` tier. The box border is wired per state:\n// idle / hover / open (`open` → `-active`) / focus (`-active` + a 3px\n// `--ui-focus-primary` ring) / disabled; `error` (or `aria-invalid`) swaps the\n// border to `error-box-border-color-*` and the ring to `--ui-focus-error`. The\n// label / value / placeholder / separator / description / icon text colors switch\n// to their `-hover` token on trigger hover **or** `open` — the Figma design groups\n// hover and the open (active) state under one visual treatment for these parts.\n//\n// `ref` targets the trigger `<button>`; `className` and `style` both target the field\n// wrapper (label + box + message), so sizing the field works the same way whichever\n// one a consumer reaches for.\n//\n// This is the trigger only — the calendar popup is NOT in the Figma design or the\n// token tier yet, so the consumer renders the date `value`/range as formatted\n// strings and wires their own calendar to `open` / `onClick`.\nexport interface InputDatePickerProps\n  extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value'> {\n  /** Field label, rendered above the box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the box. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /** Error message below the box. Its presence switches the field to the error treatment. */\n  error?: React.ReactNode;\n  /** Single date or a start–end range. */\n  pickerType?: 'date' | 'dateRange';\n  /** Hint shown when no value is selected. */\n  placeholder?: React.ReactNode;\n  /** Formatted selected date (`pickerType=\"date\"`). */\n  value?: React.ReactNode;\n  /** Formatted range start (`pickerType=\"dateRange\"`). */\n  startDate?: React.ReactNode;\n  /** Formatted range end (`pickerType=\"dateRange\"`). */\n  endDate?: React.ReactNode;\n  /** Separator between range dates. */\n  separator?: React.ReactNode;\n  /** Whether the (consumer-owned) calendar popup is open — paints the active border. */\n  open?: boolean;\n}\n\nconst InputDatePicker = React.forwardRef<HTMLButtonElement, InputDatePickerProps>(\n  (\n    {\n      className,\n      style,\n      id,\n      label,\n      required,\n      description,\n      error,\n      pickerType = 'date',\n      placeholder,\n      value,\n      startDate,\n      endDate,\n      separator = '–',\n      open,\n      disabled,\n      'aria-invalid': ariaInvalid,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n\n    const hasError = error != null && error !== '';\n    const invalid = hasError || ariaInvalid;\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    const isRange = pickerType === 'dateRange';\n    const hasValue = isRange\n      ? (startDate != null && startDate !== '') ||\n        (endDate != null && endDate !== '')\n      : value != null && value !== '';\n\n    return (\n      <div\n        className={cn(\n          'group/field flex min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]',\n          className\n        )}\n        style={style}\n      >\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-date-picker-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-date-picker-global-label-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-global-label-color-hover)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-date-picker-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <button\n          ref={ref}\n          id={inputId}\n          type=\"button\"\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open || undefined}\n          aria-describedby={hasMessage ? messageId : undefined}\n          data-open={open || undefined}\n          className={cn(\n            'group/trigger flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-start text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors',\n            'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)]',\n            'not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)]',\n            'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] enabled:aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n            'disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]'\n          )}\n          {...props}\n        >\n          {hasValue ? (\n            isRange ? (\n              <span className=\"flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate\">\n                <span>{startDate}</span>\n                <span className=\"text-[var(--ui-input-date-picker-global-separator-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-separator-color-disabled)]\">\n                  {separator}\n                </span>\n                <span>{endDate}</span>\n              </span>\n            ) : (\n              <span className=\"min-w-0 flex-1 truncate\">{value}</span>\n            )\n          ) : (\n            <span className=\"min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]\">\n              {placeholder}\n            </span>\n          )}\n          <span className=\"flex size-[var(--ui-input-date-picker-global-icon-box-size)] shrink-0 items-center justify-center\">\n            <CalendarIcon\n              size={16}\n              className=\"text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]/trigger:text-[var(--ui-input-date-picker-error-icon-color-idle)] group-aria-[invalid=true]/trigger:group-hover/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)] group-aria-[invalid=true]/trigger:group-data-[open]/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)]\"\n            />\n          </span>\n        </button>\n\n        {hasMessage && (\n          <p\n            id={messageId}\n            className={cn(\n              'text-xs leading-4',\n              hasError\n                ? 'text-[var(--ui-input-date-picker-error-error-msg-color)]'\n                : disabled\n                  ? 'text-[var(--ui-input-date-picker-normal-description-color-disabled)]'\n                  : 'text-[var(--ui-input-date-picker-normal-description-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-normal-description-color-hover)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputDatePicker.displayName = 'InputDatePicker';\n\nexport { InputDatePicker };\n"],"names":["InputDatePicker","React","className","style","id","label","required","description","error","pickerType","placeholder","value","startDate","endDate","separator","open","disabled","ariaInvalid","props","ref","reactId","inputId","messageId","hasError","invalid","message","hasMessage","isRange","hasValue","jsxs","cn","jsx","CalendarIcon"],"mappings":"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"}
+{"version":3,"file":"input-date-picker.js","names":[],"sources":["../../../../src/components/ui/input-date-picker/input-date-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CalendarIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputDatePicker\" component: the date-field **trigger** — a\n// button box that displays a formatted date `value` (or a `startDate – endDate`\n// range when `pickerType=\"dateRange\"`) and a trailing calendar icon, with the field\n// furniture (optional `label` + required `*`, optional `description` / `error`).\n// Themed by the `--ui-input-date-picker-*` tier. The box border is wired per state:\n// idle / hover / open (`open` → `-active`) / focus (`-active` + a 3px\n// `--ui-focus-primary` ring) / disabled; `error` (or `aria-invalid`) swaps the\n// border to `error-box-border-color-*` and the ring to `--ui-focus-error`. The\n// label / value / placeholder / separator / description / icon text colors switch\n// to their `-hover` token on trigger hover **or** `open` — the Figma design groups\n// hover and the open (active) state under one visual treatment for these parts.\n//\n// `ref` targets the trigger `<button>`; `className` and `style` both target the field\n// wrapper (label + box + message), so sizing the field works the same way whichever\n// one a consumer reaches for.\n//\n// This is the trigger only — the calendar popup is NOT in the Figma design or the\n// token tier yet, so the consumer renders the date `value`/range as formatted\n// strings and wires their own calendar to `open` / `onClick`.\nexport interface InputDatePickerProps\n  extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value'> {\n  /** Field label, rendered above the box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the box. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /** Error message below the box. Its presence switches the field to the error treatment. */\n  error?: React.ReactNode;\n  /** Single date or a start–end range. */\n  pickerType?: 'date' | 'dateRange';\n  /** Hint shown when no value is selected. */\n  placeholder?: React.ReactNode;\n  /** Formatted selected date (`pickerType=\"date\"`). */\n  value?: React.ReactNode;\n  /** Formatted range start (`pickerType=\"dateRange\"`). */\n  startDate?: React.ReactNode;\n  /** Formatted range end (`pickerType=\"dateRange\"`). */\n  endDate?: React.ReactNode;\n  /** Separator between range dates. */\n  separator?: React.ReactNode;\n  /** Whether the (consumer-owned) calendar popup is open — paints the active border. */\n  open?: boolean;\n}\n\nconst InputDatePicker = React.forwardRef<HTMLButtonElement, InputDatePickerProps>(\n  (\n    {\n      className,\n      style,\n      id,\n      label,\n      required,\n      description,\n      error,\n      pickerType = 'date',\n      placeholder,\n      value,\n      startDate,\n      endDate,\n      separator = '–',\n      open,\n      disabled,\n      'aria-invalid': ariaInvalid,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n\n    const hasError = error != null && error !== '';\n    const invalid = hasError || ariaInvalid;\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    const isRange = pickerType === 'dateRange';\n    const hasValue = isRange\n      ? (startDate != null && startDate !== '') ||\n        (endDate != null && endDate !== '')\n      : value != null && value !== '';\n\n    return (\n      <div\n        className={cn(\n          'group/field flex min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]',\n          className\n        )}\n        style={style}\n      >\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-date-picker-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-date-picker-global-label-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-global-label-color-hover)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-date-picker-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <button\n          ref={ref}\n          id={inputId}\n          type=\"button\"\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open || undefined}\n          aria-describedby={hasMessage ? messageId : undefined}\n          data-open={open || undefined}\n          className={cn(\n            'group/trigger flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-start text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors',\n            'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)]',\n            'not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)]',\n            'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] enabled:aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n            'disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]'\n          )}\n          {...props}\n        >\n          {hasValue ? (\n            isRange ? (\n              <span className=\"flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate\">\n                <span>{startDate}</span>\n                <span className=\"text-[var(--ui-input-date-picker-global-separator-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-separator-color-disabled)]\">\n                  {separator}\n                </span>\n                <span>{endDate}</span>\n              </span>\n            ) : (\n              <span className=\"min-w-0 flex-1 truncate\">{value}</span>\n            )\n          ) : (\n            <span className=\"min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]\">\n              {placeholder}\n            </span>\n          )}\n          <span className=\"flex size-[var(--ui-input-date-picker-global-icon-box-size)] shrink-0 items-center justify-center\">\n            <CalendarIcon\n              size={16}\n              className=\"text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]/trigger:text-[var(--ui-input-date-picker-error-icon-color-idle)] group-aria-[invalid=true]/trigger:group-hover/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)] group-aria-[invalid=true]/trigger:group-data-[open]/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)]\"\n            />\n          </span>\n        </button>\n\n        {hasMessage && (\n          <p\n            id={messageId}\n            className={cn(\n              'text-xs leading-4',\n              hasError\n                ? 'text-[var(--ui-input-date-picker-error-error-msg-color)]'\n                : disabled\n                  ? 'text-[var(--ui-input-date-picker-normal-description-color-disabled)]'\n                  : 'text-[var(--ui-input-date-picker-normal-description-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-normal-description-color-hover)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputDatePicker.displayName = 'InputDatePicker';\n\nexport { InputDatePicker };\n"],"mappings":";;;;;AAkDA,IAAM,IAAkB,EAAM,YAE1B,EACE,cACA,UACA,OACA,UACA,aACA,gBACA,UACA,gBAAa,QACb,gBACA,UACA,cACA,YACA,eAAY,KACZ,SACA,aACA,gBAAgB,GAChB,GAAG,KAEL,MACG;CACH,IAAM,IAAU,EAAM,MAAM,GACtB,IAAU,KAAM,GAChB,IAAY,GAAG,EAAQ,WAEvB,IAAW,KAAS,QAAQ,MAAU,IACtC,IAAU,KAAY,GACtB,IAAU,IAAW,IAAQ,GAC7B,IAAa,KAAW,QAAQ,MAAY,IAE5C,IAAU,MAAe,aACzB,IAAW,IACZ,KAAa,QAAQ,MAAc,MACnC,KAAW,QAAQ,MAAY,KAChC,KAAS,QAAQ,MAAU;CAE/B,OACE,kBAAC,OAAD;EACE,WAAW,EACT,mJACA,CACF;EACO;EALT,UAAA;GAOG,KAAS,QAAQ,MAAU,MAC1B,kBAAC,SAAD;IACE,SAAS;IACT,WAAW,EACT,uFACA,IACI,mEACA,yKACN;IAPF,UAAA,CASG,GACA,KACC,kBAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACX,UAAA;IAEK,CAAA,CAEH;;GAGT,kBAAC,UAAD;IACO;IACL,IAAI;IACJ,MAAK;IACK;IACV,gBAAc,KAAW,KAAA;IACzB,iBAAe,KAAY,KAAA;IAC3B,iBAAc;IACd,iBAAe,KAAQ,KAAA;IACvB,oBAAkB,IAAa,IAAY,KAAA;IAC3C,aAAW,KAAQ,KAAA;IACnB,WAAW,EACT,ghBACA,4SACA,2MACA,mOACA,0qBACA,wPACF;IACA,GAAI;IAnBN,UAAA,CAqBG,IACC,IACE,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MACE,kBAAC,QAAD,EAAA,UAAO,EAAgB,CAAA;MACvB,kBAAC,QAAD;OAAM,WAAU;OACb,UAAA;MACG,CAAA;MACN,kBAAC,QAAD,EAAA,UAAO,EAAc,CAAA;KACjB;IAEN,CAAA,IAAA,kBAAC,QAAD;KAAM,WAAU;KAA2B,UAAA;IAAY,CAAA,IAGzD,kBAAC,QAAD;KAAM,WAAU;KACb,UAAA;IACG,CAAA,GAER,kBAAC,QAAD;KAAM,WAAU;KACd,UAAA,kBAAC,GAAD;MACE,MAAM;MACN,WAAU;KACX,CAAA;IACG,CAAA,CACA;;GAEP,KACC,kBAAC,KAAD;IACE,IAAI;IACJ,WAAW,EACT,qBACA,IACI,6DACA,IACE,yEACA,qLACR;IAEC,UAAA;GACA,CAAA;EAEF;;AAET,CACF;AACA,EAAgB,cAAc"}

package/dist/components/ui/input-num-picker/input-num-picker.js

@@ -0,0 +1,48 @@
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { ButtonIconInput as t } from "../button-icon-input/button-icon-input.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { MinusIcon as a, PlusIcon as o } from "@acronis-platform/icons-react/stroke-mono";
+import { NumberField as s } from "@base-ui/react/number-field";
+//#region src/components/ui/input-num-picker/input-num-picker.tsx
+var c = n.forwardRef(({ className: c, id: l, label: u, required: d, disabled: f, decrementLabel: p = "Decrease", incrementLabel: m = "Increase", ...h }, g) => {
+	let _ = n.useId(), v = l ?? _;
+	return /* @__PURE__ */ i(s.Root, {
+		id: v,
+		disabled: f,
+		required: d,
+		className: e("flex min-w-[var(--ui-input-num-picker-global-container-width-min)] flex-col items-center gap-[var(--ui-input-num-picker-global-container-gap)]", c),
+		...h,
+		children: [u != null && u !== "" && /* @__PURE__ */ i("label", {
+			htmlFor: v,
+			className: e("flex w-full gap-[var(--ui-input-num-picker-global-container-label-gap)] text-sm leading-4", f ? "text-[var(--ui-input-num-picker-global-label-color-disabled)]" : "text-[var(--ui-input-num-picker-global-label-color-idle)]"),
+			children: [u, d && /* @__PURE__ */ r("span", {
+				"aria-hidden": "true",
+				className: "text-[var(--ui-input-num-picker-global-required-color)]",
+				children: "*"
+			})]
+		}), /* @__PURE__ */ i(s.Group, {
+			className: e("flex h-[var(--ui-input-num-picker-global-box-height)] w-full items-center gap-[var(--ui-input-num-picker-global-box-gap)] rounded-[var(--ui-input-num-picker-global-box-border-radius)] border-[length:var(--ui-input-num-picker-global-box-border-width)] border-solid border-[var(--ui-input-num-picker-normal-box-border-color-idle)] bg-[var(--ui-input-num-picker-global-box-color-idle)] px-[var(--ui-input-num-picker-global-box-padding-x)] py-[var(--ui-input-num-picker-global-box-padding-y)] transition-colors", "not-has-disabled:hover:border-[var(--ui-input-num-picker-normal-box-border-color-hover)] not-has-disabled:hover:bg-[var(--ui-input-num-picker-global-box-color-hover)]", "has-[input:focus-visible]:border-[var(--ui-input-num-picker-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]", "has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-num-picker-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-num-picker-global-box-color-disabled)]"),
+			children: [
+				/* @__PURE__ */ r(s.Decrement, { render: /* @__PURE__ */ r(t, {
+					"aria-label": p,
+					children: /* @__PURE__ */ r(a, { size: 16 })
+				}) }),
+				/* @__PURE__ */ r(s.Input, {
+					ref: g,
+					className: e("min-w-0 flex-1 bg-transparent text-center text-sm leading-6 outline-none", f ? "text-[var(--ui-input-num-picker-global-value-color-disabled)]" : "text-[var(--ui-input-num-picker-global-value-color-idle)]")
+				}),
+				/* @__PURE__ */ r(s.Increment, { render: /* @__PURE__ */ r(t, {
+					"aria-label": m,
+					children: /* @__PURE__ */ r(o, { size: 16 })
+				}) })
+			]
+		})]
+	});
+});
+c.displayName = "InputNumPicker";
+//#endregion
+export { c as InputNumPicker };
+
+//# sourceMappingURL=input-num-picker.js.map

package/dist/components/ui/input-num-picker/input-num-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-num-picker.js","names":[],"sources":["../../../../src/components/ui/input-num-picker/input-num-picker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';\nimport { MinusIcon, PlusIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIconInput } from '../button-icon-input';\n\n// Mirrors the Figma \"InputNumPicker\" component: a numeric stepper field built on\n// Base UI's NumberField (Root/Group/Input/Decrement/Increment), themed by its own\n// `--ui-input-num-picker-*` tier. Adds the field furniture InputText/InputSelect\n// already ship: an optional `label` (with an optional `required` `*`). The stepper\n// buttons reuse `ButtonIconInput` (already themed for exactly this \"small icon\n// inside a field box\" role) via its `render` prop, rather than duplicating its\n// idle/hover/active/disabled token wiring here.\nexport interface InputNumPickerProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Root>,\n    'children'\n  > {\n  /** Field label, rendered above the stepper box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Accessible label for the decrement button. */\n  decrementLabel?: string;\n  /** Accessible label for the increment button. */\n  incrementLabel?: string;\n}\n\nconst InputNumPicker = React.forwardRef<HTMLInputElement, InputNumPickerProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      disabled,\n      decrementLabel = 'Decrease',\n      incrementLabel = 'Increase',\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n\n    return (\n      <NumberFieldPrimitive.Root\n        id={inputId}\n        disabled={disabled}\n        required={required}\n        className={cn(\n          'flex min-w-[var(--ui-input-num-picker-global-container-width-min)] flex-col items-center gap-[var(--ui-input-num-picker-global-container-gap)]',\n          className\n        )}\n        {...props}\n      >\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex w-full gap-[var(--ui-input-num-picker-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-num-picker-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-num-picker-global-label-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-num-picker-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <NumberFieldPrimitive.Group\n          className={cn(\n            'flex h-[var(--ui-input-num-picker-global-box-height)] w-full items-center gap-[var(--ui-input-num-picker-global-box-gap)] rounded-[var(--ui-input-num-picker-global-box-border-radius)] border-[length:var(--ui-input-num-picker-global-box-border-width)] border-solid border-[var(--ui-input-num-picker-normal-box-border-color-idle)] bg-[var(--ui-input-num-picker-global-box-color-idle)] px-[var(--ui-input-num-picker-global-box-padding-x)] py-[var(--ui-input-num-picker-global-box-padding-y)] transition-colors',\n            'not-has-disabled:hover:border-[var(--ui-input-num-picker-normal-box-border-color-hover)] not-has-disabled:hover:bg-[var(--ui-input-num-picker-global-box-color-hover)]',\n            'has-[input:focus-visible]:border-[var(--ui-input-num-picker-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]',\n            'has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-num-picker-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-num-picker-global-box-color-disabled)]'\n          )}\n        >\n          <NumberFieldPrimitive.Decrement\n            render={\n              <ButtonIconInput aria-label={decrementLabel}>\n                <MinusIcon size={16} />\n              </ButtonIconInput>\n            }\n          />\n\n          <NumberFieldPrimitive.Input\n            ref={ref}\n            className={cn(\n              'min-w-0 flex-1 bg-transparent text-center text-sm leading-6 outline-none',\n              disabled\n                ? 'text-[var(--ui-input-num-picker-global-value-color-disabled)]'\n                : 'text-[var(--ui-input-num-picker-global-value-color-idle)]'\n            )}\n          />\n\n          <NumberFieldPrimitive.Increment\n            render={\n              <ButtonIconInput aria-label={incrementLabel}>\n                <PlusIcon size={16} />\n              </ButtonIconInput>\n            }\n          />\n        </NumberFieldPrimitive.Group>\n      </NumberFieldPrimitive.Root>\n    );\n  }\n);\nInputNumPicker.displayName = 'InputNumPicker';\n\nexport { InputNumPicker };\n"],"mappings":";;;;;;;;AA+BA,IAAM,IAAiB,EAAM,YAEzB,EACE,cACA,OACA,UACA,aACA,aACA,oBAAiB,YACjB,oBAAiB,YACjB,GAAG,KAEL,MACG;CACH,IAAM,IAAU,EAAM,MAAM,GACtB,IAAU,KAAM;CAEtB,OACE,kBAAC,EAAqB,MAAtB;EACE,IAAI;EACM;EACA;EACV,WAAW,EACT,kJACA,CACF;EACA,GAAI;EARN,UAAA,CAUG,KAAS,QAAQ,MAAU,MAC1B,kBAAC,SAAD;GACE,SAAS;GACT,WAAW,EACT,6FACA,IACI,kEACA,2DACN;GAPF,UAAA,CASG,GACA,KACC,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IACX,UAAA;GAEK,CAAA,CAEH;EAGT,CAAA,GAAA,kBAAC,EAAqB,OAAtB;GACE,WAAW,EACT,8fACA,0KACA,6LACA,0LACF;GANF,UAAA;IAQE,kBAAC,EAAqB,WAAtB,EACE,QACE,kBAAC,GAAD;KAAiB,cAAY;KAC3B,UAAA,kBAAC,GAAD,EAAW,MAAM,GAAK,CAAA;IACP,CAAA,EAEpB,CAAA;IAED,kBAAC,EAAqB,OAAtB;KACO;KACL,WAAW,EACT,4EACA,IACI,kEACA,2DACN;IACD,CAAA;IAED,kBAAC,EAAqB,WAAtB,EACE,QACE,kBAAC,GAAD;KAAiB,cAAY;KAC3B,UAAA,kBAAC,GAAD,EAAU,MAAM,GAAK,CAAA;IACN,CAAA,EAEpB,CAAA;GACyB;EACH,CAAA,CAAA;;AAE/B,CACF;AACA,EAAe,cAAc"}

package/dist/components/ui/input-otp/input-otp.js

@@ -1,104 +1,75 @@
-import { jsx as h } from "react/jsx-runtime";
-import * as c from "react";
-import { cn as S } from "../../../lib/utils.js";
-const _ = (s, e) => `Digit ${s} of ${e}`, $ = /^[0-9]$/, R = (s, e) => Array.from({ length: e }, (n, p) => s[p] ?? ""), E = c.forwardRef(
-  ({
-    className: s,
-    length: e = 6,
-    value: n,
-    defaultValue: p,
-    onChange: f,
-    onComplete: b,
-    disabled: w,
-    error: m,
-    autoFocus: x,
-    slotAriaLabel: A = _,
-    ...j
-  }, k) => {
-    const [I, P] = c.useState(
-      () => R(p ?? "", e)
-    ), y = n != null, u = y ? R(n, e) : I, g = c.useRef([]), d = c.useRef(!1), v = (r) => {
-      y || P(r);
-      const t = r.join("");
-      f == null || f(t), r.every((o) => o !== "") ? d.current || (d.current = !0, b == null || b(t)) : d.current = !1;
-    }, a = (r) => {
-      const t = g.current[r];
-      t == null || t.focus(), t == null || t.select();
-    };
-    c.useEffect(() => {
-      x && a(0);
-    }, []);
-    const D = (r, t) => {
-      const o = [...u];
-      let i = r;
-      for (const l of t) {
-        if (i >= e) break;
-        o[i] = l, i += 1;
-      }
-      v(o), a(Math.min(i, e - 1));
-    }, T = (r, t) => {
-      if (t.length > 1) {
-        const l = t.replace(/\D/g, "");
-        l && D(r, l);
-        return;
-      }
-      const o = t;
-      if (o !== "" && !$.test(o)) return;
-      const i = [...u];
-      i[r] = o, v(i), o && r < e - 1 && a(r + 1);
-    }, N = (r, t) => {
-      if (t.key === "Backspace" && !u[r] && r > 0) {
-        t.preventDefault();
-        const o = [...u];
-        o[r - 1] = "", v(o), a(r - 1);
-      } else t.key === "ArrowLeft" && r > 0 ? (t.preventDefault(), a(r - 1)) : t.key === "ArrowRight" && r < e - 1 && (t.preventDefault(), a(r + 1));
-    }, L = (r, t) => {
-      const o = t.clipboardData.getData("text").replace(/\D/g, "");
-      o && (t.preventDefault(), D(r, o));
-    };
-    return /* @__PURE__ */ h(
-      "div",
-      {
-        ref: k,
-        role: "group",
-        className: S(
-          "inline-flex justify-[var(--ui-input-otp-container-justify-content)] gap-3",
-          s
-        ),
-        ...j,
-        children: Array.from({ length: e }, (r, t) => /* @__PURE__ */ h(
-          "input",
-          {
-            ref: (o) => {
-              g.current[t] = o;
-            },
-            type: "text",
-            inputMode: "numeric",
-            pattern: "[0-9]*",
-            autoComplete: "one-time-code",
-            maxLength: 1,
-            value: u[t],
-            placeholder: String(t + 1),
-            disabled: w,
-            "aria-label": A(t + 1, e),
-            "aria-invalid": m || void 0,
-            onChange: (o) => T(t, o.target.value),
-            onKeyDown: (o) => N(t, o),
-            onPaste: (o) => L(t, o),
-            onFocus: (o) => o.target.select(),
-            className: S(
-              "ui-input-otp-value-text-style h-[var(--ui-input-otp-box-height)] w-[var(--ui-input-otp-box-width)] rounded-[var(--ui-input-otp-box-border-radius)] border-[length:var(--ui-input-otp-box-border-width)] bg-[var(--ui-input-otp-box-color)] px-[var(--ui-input-otp-box-padding-x)] py-[var(--ui-input-otp-box-padding-y)] text-center text-[var(--ui-input-otp-value-color)] caret-[var(--ui-input-otp-value-color)] placeholder:text-[var(--ui-input-otp-placeholder-color)] transition-colors focus-visible:outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-              m ? "border-[var(--ui-input-otp-box-border-color-error)] focus-visible:ring-[var(--ui-focus-error)]" : "border-[var(--ui-input-otp-box-border-color-idle)] focus-visible:border-[var(--ui-input-otp-box-border-color-active)] focus-visible:ring-[var(--ui-focus-primary)]"
-            )
-          },
-          t
-        ))
-      }
-    );
-  }
-);
-E.displayName = "InputOTP";
-export {
-  E as InputOTP
-};
-//# sourceMappingURL=input-otp.js.map
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/ui/input-otp/input-otp.tsx
+var r = (e, t) => `Digit ${e} of ${t}`, i = /^[0-9]$/, a = (e, t) => Array.from({ length: t }, (t, n) => e[n] ?? ""), o = t.forwardRef(({ className: o, length: s = 6, value: c, defaultValue: l, onChange: u, onComplete: d, disabled: f, error: p, autoFocus: m, slotAriaLabel: h = r, ...g }, _) => {
+	let [v, y] = t.useState(() => a(l ?? "", s)), b = c != null, x = b ? a(c, s) : v, S = t.useRef([]), C = t.useRef(!1), w = (e) => {
+		b || y(e);
+		let t = e.join("");
+		u?.(t), e.every((e) => e !== "") ? C.current || (C.current = !0, d?.(t)) : C.current = !1;
+	}, T = (e) => {
+		let t = S.current[e];
+		t?.focus(), t?.select();
+	};
+	t.useEffect(() => {
+		m && T(0);
+	}, []);
+	let E = (e, t) => {
+		let n = [...x], r = e;
+		for (let e of t) {
+			if (r >= s) break;
+			n[r] = e, r += 1;
+		}
+		w(n), T(Math.min(r, s - 1));
+	}, D = (e, t) => {
+		if (t.length > 1) {
+			let n = t.replace(/\D/g, "");
+			n && E(e, n);
+			return;
+		}
+		let n = t;
+		if (n !== "" && !i.test(n)) return;
+		let r = [...x];
+		r[e] = n, w(r), n && e < s - 1 && T(e + 1);
+	}, O = (e, t) => {
+		if (t.key === "Backspace" && !x[e] && e > 0) {
+			t.preventDefault();
+			let n = [...x];
+			n[e - 1] = "", w(n), T(e - 1);
+		} else t.key === "ArrowLeft" && e > 0 ? (t.preventDefault(), T(e - 1)) : t.key === "ArrowRight" && e < s - 1 && (t.preventDefault(), T(e + 1));
+	}, k = (e, t) => {
+		let n = t.clipboardData.getData("text").replace(/\D/g, "");
+		n && (t.preventDefault(), E(e, n));
+	};
+	return /* @__PURE__ */ n("div", {
+		ref: _,
+		role: "group",
+		className: e("inline-flex justify-[var(--ui-input-otp-container-justify-content)] gap-3", o),
+		...g,
+		children: Array.from({ length: s }, (t, r) => /* @__PURE__ */ n("input", {
+			ref: (e) => {
+				S.current[r] = e;
+			},
+			type: "text",
+			inputMode: "numeric",
+			pattern: "[0-9]*",
+			autoComplete: "one-time-code",
+			maxLength: 1,
+			value: x[r],
+			placeholder: String(r + 1),
+			disabled: f,
+			"aria-label": h(r + 1, s),
+			"aria-invalid": p || void 0,
+			onChange: (e) => D(r, e.target.value),
+			onKeyDown: (e) => O(r, e),
+			onPaste: (e) => k(r, e),
+			onFocus: (e) => e.target.select(),
+			className: e("ui-input-otp-value-text-style h-[var(--ui-input-otp-box-height)] w-[var(--ui-input-otp-box-width)] rounded-[var(--ui-input-otp-box-border-radius)] border-[length:var(--ui-input-otp-box-border-width)] bg-[var(--ui-input-otp-box-color)] px-[var(--ui-input-otp-box-padding-x)] py-[var(--ui-input-otp-box-padding-y)] text-center text-[var(--ui-input-otp-value-color)] caret-[var(--ui-input-otp-value-color)] placeholder:text-[var(--ui-input-otp-placeholder-color)] transition-colors focus-visible:outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", p ? "border-[var(--ui-input-otp-box-border-color-error)] focus-visible:ring-[var(--ui-focus-error)]" : "border-[var(--ui-input-otp-box-border-color-idle)] focus-visible:border-[var(--ui-input-otp-box-border-color-active)] focus-visible:ring-[var(--ui-focus-primary)]")
+		}, r))
+	});
+});
+o.displayName = "InputOTP";
+//#endregion
+export { o as InputOTP };
+
+//# sourceMappingURL=input-otp.js.map

package/dist/components/ui/input-otp/input-otp.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.js","sources":["../../../../src/components/ui/input-otp/input-otp.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"inputOTP\" component: a bare row of single-character boxes\n// (no label/description — like `Input`, field furniture is a future `Field`\n// wrapper). Themed by the `--ui-input-otp-*` token tier. Each slot is a plain\n// `<input>`; typing a digit advances focus to the next slot, Backspace on an\n// empty slot clears and moves back to the previous one, and pasting — or a\n// browser/password-manager autofill that drops the full code into one slot's\n// `onChange` — distributes it across the slots from the focused one onward.\n// `error`\n// reddens every box (via `--ui-input-otp-box-border-color-error`); there is no\n// disabled treatment in the design, so `disabled` falls back to the generic\n// `disabled:opacity-50` convention used elsewhere in this package. OTP codes\n// are numeric-only by design (SMS/authenticator codes): `inputMode=\"numeric\"`\n// and `pattern=\"[0-9]*\"` are mobile-keyboard hints only, so both typed and\n// pasted input are also filtered to digits in JS — a non-digit keystroke is\n// rejected outright and non-digit characters are stripped from a paste.\nexport interface InputOTPProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<'div'>,\n    'onChange' | 'defaultValue' | 'children'\n  > {\n  /** Number of single-character slots. */\n  length?: number;\n  /** Controlled value (the digits entered so far, left to right). */\n  value?: string;\n  /** Initial value for uncontrolled usage. */\n  defaultValue?: string;\n  /** Fires with the full value on every change. */\n  onChange?: (value: string) => void;\n  /** Fires once, the moment the value reaches `length` characters. */\n  onComplete?: (value: string) => void;\n  /** Disables every slot. */\n  disabled?: boolean;\n  /** Switches every slot to the error treatment. */\n  error?: boolean;\n  /** Focuses the first slot on mount. */\n  autoFocus?: boolean;\n  /** Builds the accessible name for a slot from its 1-based index and the total length. */\n  slotAriaLabel?: (index: number, length: number) => string;\n}\n\nconst defaultSlotAriaLabel = (index: number, length: number) =>\n  `Digit ${index} of ${length}`;\n\nconst DIGIT_PATTERN = /^[0-9]$/;\n\n// Fixed-length per-slot array, not a derived dense string — a slot's\n// position must survive edits to other slots (see `commitSlots`).\nconst toSlots = (value: string, length: number): string[] =>\n  Array.from({ length }, (_, index) => value[index] ?? '');\n\nconst InputOTP = React.forwardRef<HTMLDivElement, InputOTPProps>(\n  (\n    {\n      className,\n      length = 6,\n      value,\n      defaultValue,\n      onChange,\n      onComplete,\n      disabled,\n      error,\n      autoFocus,\n      slotAriaLabel = defaultSlotAriaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalSlots, setInternalSlots] = React.useState(() =>\n      toSlots(defaultValue ?? '', length)\n    );\n    const isControlled = value != null;\n    const slots = isControlled ? toSlots(value, length) : internalSlots;\n    const slotRefs = React.useRef<Array<HTMLInputElement | null>>([]);\n    const completedRef = React.useRef(false);\n\n    // `nextSlots` is the source of truth — each index keeps its own slot's\n    // character regardless of whether earlier slots are filled. The joined\n    // string handed to `onChange`/`onComplete` is a derived value; only\n    // `nextSlots.every(...)` can tell whether every slot has been filled,\n    // since a joined string with a blank slot collapses indistinguishably\n    // from a shorter one.\n    const commitSlots = (nextSlots: string[]) => {\n      if (!isControlled) setInternalSlots(nextSlots);\n      const joined = nextSlots.join('');\n      onChange?.(joined);\n      if (nextSlots.every((char) => char !== '')) {\n        if (!completedRef.current) {\n          completedRef.current = true;\n          onComplete?.(joined);\n        }\n      } else {\n        completedRef.current = false;\n      }\n    };\n\n    const focusSlot = (index: number) => {\n      const slot = slotRefs.current[index];\n      slot?.focus();\n      slot?.select();\n    };\n\n    React.useEffect(() => {\n      if (autoFocus) focusSlot(0);\n      // Only run on mount.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    // Distributes digits across slots starting at `index` — shared by a\n    // multi-character paste and a multi-character autofill `onChange` (a\n    // password manager or Chrome's OTP autofill can set a single slot's\n    // `.value` to the entire code, bypassing `maxLength`).\n    const distributeFrom = (index: number, digits: string) => {\n      const nextSlots = [...slots];\n      let cursor = index;\n      for (const char of digits) {\n        if (cursor >= length) break;\n        nextSlots[cursor] = char;\n        cursor += 1;\n      }\n      commitSlots(nextSlots);\n      focusSlot(Math.min(cursor, length - 1));\n    };\n\n    const handleSlotChange = (index: number, raw: string) => {\n      if (raw.length > 1) {\n        const digits = raw.replace(/\\D/g, '');\n        if (digits) distributeFrom(index, digits);\n        return;\n      }\n      const char = raw;\n      if (char !== '' && !DIGIT_PATTERN.test(char)) return;\n      const nextSlots = [...slots];\n      nextSlots[index] = char;\n      commitSlots(nextSlots);\n      if (char && index < length - 1) focusSlot(index + 1);\n    };\n\n    const handleKeyDown = (\n      index: number,\n      event: React.KeyboardEvent<HTMLInputElement>\n    ) => {\n      if (event.key === 'Backspace' && !slots[index] && index > 0) {\n        event.preventDefault();\n        const nextSlots = [...slots];\n        nextSlots[index - 1] = '';\n        commitSlots(nextSlots);\n        focusSlot(index - 1);\n      } else if (event.key === 'ArrowLeft' && index > 0) {\n        event.preventDefault();\n        focusSlot(index - 1);\n      } else if (event.key === 'ArrowRight' && index < length - 1) {\n        event.preventDefault();\n        focusSlot(index + 1);\n      }\n    };\n\n    const handlePaste = (\n      index: number,\n      event: React.ClipboardEvent<HTMLInputElement>\n    ) => {\n      const digits = event.clipboardData.getData('text').replace(/\\D/g, '');\n      if (!digits) return;\n      event.preventDefault();\n      distributeFrom(index, digits);\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        className={cn(\n          'inline-flex justify-[var(--ui-input-otp-container-justify-content)] gap-3',\n          className\n        )}\n        {...props}\n      >\n        {Array.from({ length }, (_, index) => (\n          <input\n            key={index}\n            ref={(el) => {\n              slotRefs.current[index] = el;\n            }}\n            type=\"text\"\n            inputMode=\"numeric\"\n            pattern=\"[0-9]*\"\n            autoComplete=\"one-time-code\"\n            maxLength={1}\n            value={slots[index]}\n            placeholder={String(index + 1)}\n            disabled={disabled}\n            aria-label={slotAriaLabel(index + 1, length)}\n            aria-invalid={error || undefined}\n            onChange={(event) => handleSlotChange(index, event.target.value)}\n            onKeyDown={(event) => handleKeyDown(index, event)}\n            onPaste={(event) => handlePaste(index, event)}\n            onFocus={(event) => event.target.select()}\n            className={cn(\n              'ui-input-otp-value-text-style h-[var(--ui-input-otp-box-height)] w-[var(--ui-input-otp-box-width)] rounded-[var(--ui-input-otp-box-border-radius)] border-[length:var(--ui-input-otp-box-border-width)] bg-[var(--ui-input-otp-box-color)] px-[var(--ui-input-otp-box-padding-x)] py-[var(--ui-input-otp-box-padding-y)] text-center text-[var(--ui-input-otp-value-color)] caret-[var(--ui-input-otp-value-color)] placeholder:text-[var(--ui-input-otp-placeholder-color)] transition-colors focus-visible:outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',\n              error\n                ? 'border-[var(--ui-input-otp-box-border-color-error)] focus-visible:ring-[var(--ui-focus-error)]'\n                : 'border-[var(--ui-input-otp-box-border-color-idle)] focus-visible:border-[var(--ui-input-otp-box-border-color-active)] focus-visible:ring-[var(--ui-focus-primary)]'\n            )}\n          />\n        ))}\n      </div>\n    );\n  }\n);\nInputOTP.displayName = 'InputOTP';\n\nexport { InputOTP };\n"],"names":["defaultSlotAriaLabel","index","length","DIGIT_PATTERN","toSlots","value","_","InputOTP","React","className","defaultValue","onChange","onComplete","disabled","error","autoFocus","slotAriaLabel","props","ref","internalSlots","setInternalSlots","isControlled","slots","slotRefs","completedRef","commitSlots","nextSlots","joined","char","focusSlot","slot","distributeFrom","digits","cursor","handleSlotChange","raw","handleKeyDown","event","handlePaste","jsx","cn","el"],"mappings":"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"}
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../../../src/components/ui/input-otp/input-otp.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"inputOTP\" component: a bare row of single-character boxes\n// (no label/description — like `Input`, field furniture is a future `Field`\n// wrapper). Themed by the `--ui-input-otp-*` token tier. Each slot is a plain\n// `<input>`; typing a digit advances focus to the next slot, Backspace on an\n// empty slot clears and moves back to the previous one, and pasting — or a\n// browser/password-manager autofill that drops the full code into one slot's\n// `onChange` — distributes it across the slots from the focused one onward.\n// `error`\n// reddens every box (via `--ui-input-otp-box-border-color-error`); there is no\n// disabled treatment in the design, so `disabled` falls back to the generic\n// `disabled:opacity-50` convention used elsewhere in this package. OTP codes\n// are numeric-only by design (SMS/authenticator codes): `inputMode=\"numeric\"`\n// and `pattern=\"[0-9]*\"` are mobile-keyboard hints only, so both typed and\n// pasted input are also filtered to digits in JS — a non-digit keystroke is\n// rejected outright and non-digit characters are stripped from a paste.\nexport interface InputOTPProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<'div'>,\n    'onChange' | 'defaultValue' | 'children'\n  > {\n  /** Number of single-character slots. */\n  length?: number;\n  /** Controlled value (the digits entered so far, left to right). */\n  value?: string;\n  /** Initial value for uncontrolled usage. */\n  defaultValue?: string;\n  /** Fires with the full value on every change. */\n  onChange?: (value: string) => void;\n  /** Fires once, the moment the value reaches `length` characters. */\n  onComplete?: (value: string) => void;\n  /** Disables every slot. */\n  disabled?: boolean;\n  /** Switches every slot to the error treatment. */\n  error?: boolean;\n  /** Focuses the first slot on mount. */\n  autoFocus?: boolean;\n  /** Builds the accessible name for a slot from its 1-based index and the total length. */\n  slotAriaLabel?: (index: number, length: number) => string;\n}\n\nconst defaultSlotAriaLabel = (index: number, length: number) =>\n  `Digit ${index} of ${length}`;\n\nconst DIGIT_PATTERN = /^[0-9]$/;\n\n// Fixed-length per-slot array, not a derived dense string — a slot's\n// position must survive edits to other slots (see `commitSlots`).\nconst toSlots = (value: string, length: number): string[] =>\n  Array.from({ length }, (_, index) => value[index] ?? '');\n\nconst InputOTP = React.forwardRef<HTMLDivElement, InputOTPProps>(\n  (\n    {\n      className,\n      length = 6,\n      value,\n      defaultValue,\n      onChange,\n      onComplete,\n      disabled,\n      error,\n      autoFocus,\n      slotAriaLabel = defaultSlotAriaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalSlots, setInternalSlots] = React.useState(() =>\n      toSlots(defaultValue ?? '', length)\n    );\n    const isControlled = value != null;\n    const slots = isControlled ? toSlots(value, length) : internalSlots;\n    const slotRefs = React.useRef<Array<HTMLInputElement | null>>([]);\n    const completedRef = React.useRef(false);\n\n    // `nextSlots` is the source of truth — each index keeps its own slot's\n    // character regardless of whether earlier slots are filled. The joined\n    // string handed to `onChange`/`onComplete` is a derived value; only\n    // `nextSlots.every(...)` can tell whether every slot has been filled,\n    // since a joined string with a blank slot collapses indistinguishably\n    // from a shorter one.\n    const commitSlots = (nextSlots: string[]) => {\n      if (!isControlled) setInternalSlots(nextSlots);\n      const joined = nextSlots.join('');\n      onChange?.(joined);\n      if (nextSlots.every((char) => char !== '')) {\n        if (!completedRef.current) {\n          completedRef.current = true;\n          onComplete?.(joined);\n        }\n      } else {\n        completedRef.current = false;\n      }\n    };\n\n    const focusSlot = (index: number) => {\n      const slot = slotRefs.current[index];\n      slot?.focus();\n      slot?.select();\n    };\n\n    React.useEffect(() => {\n      if (autoFocus) focusSlot(0);\n      // Only run on mount.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    // Distributes digits across slots starting at `index` — shared by a\n    // multi-character paste and a multi-character autofill `onChange` (a\n    // password manager or Chrome's OTP autofill can set a single slot's\n    // `.value` to the entire code, bypassing `maxLength`).\n    const distributeFrom = (index: number, digits: string) => {\n      const nextSlots = [...slots];\n      let cursor = index;\n      for (const char of digits) {\n        if (cursor >= length) break;\n        nextSlots[cursor] = char;\n        cursor += 1;\n      }\n      commitSlots(nextSlots);\n      focusSlot(Math.min(cursor, length - 1));\n    };\n\n    const handleSlotChange = (index: number, raw: string) => {\n      if (raw.length > 1) {\n        const digits = raw.replace(/\\D/g, '');\n        if (digits) distributeFrom(index, digits);\n        return;\n      }\n      const char = raw;\n      if (char !== '' && !DIGIT_PATTERN.test(char)) return;\n      const nextSlots = [...slots];\n      nextSlots[index] = char;\n      commitSlots(nextSlots);\n      if (char && index < length - 1) focusSlot(index + 1);\n    };\n\n    const handleKeyDown = (\n      index: number,\n      event: React.KeyboardEvent<HTMLInputElement>\n    ) => {\n      if (event.key === 'Backspace' && !slots[index] && index > 0) {\n        event.preventDefault();\n        const nextSlots = [...slots];\n        nextSlots[index - 1] = '';\n        commitSlots(nextSlots);\n        focusSlot(index - 1);\n      } else if (event.key === 'ArrowLeft' && index > 0) {\n        event.preventDefault();\n        focusSlot(index - 1);\n      } else if (event.key === 'ArrowRight' && index < length - 1) {\n        event.preventDefault();\n        focusSlot(index + 1);\n      }\n    };\n\n    const handlePaste = (\n      index: number,\n      event: React.ClipboardEvent<HTMLInputElement>\n    ) => {\n      const digits = event.clipboardData.getData('text').replace(/\\D/g, '');\n      if (!digits) return;\n      event.preventDefault();\n      distributeFrom(index, digits);\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        className={cn(\n          'inline-flex justify-[var(--ui-input-otp-container-justify-content)] gap-3',\n          className\n        )}\n        {...props}\n      >\n        {Array.from({ length }, (_, index) => (\n          <input\n            key={index}\n            ref={(el) => {\n              slotRefs.current[index] = el;\n            }}\n            type=\"text\"\n            inputMode=\"numeric\"\n            pattern=\"[0-9]*\"\n            autoComplete=\"one-time-code\"\n            maxLength={1}\n            value={slots[index]}\n            placeholder={String(index + 1)}\n            disabled={disabled}\n            aria-label={slotAriaLabel(index + 1, length)}\n            aria-invalid={error || undefined}\n            onChange={(event) => handleSlotChange(index, event.target.value)}\n            onKeyDown={(event) => handleKeyDown(index, event)}\n            onPaste={(event) => handlePaste(index, event)}\n            onFocus={(event) => event.target.select()}\n            className={cn(\n              'ui-input-otp-value-text-style h-[var(--ui-input-otp-box-height)] w-[var(--ui-input-otp-box-width)] rounded-[var(--ui-input-otp-box-border-radius)] border-[length:var(--ui-input-otp-box-border-width)] bg-[var(--ui-input-otp-box-color)] px-[var(--ui-input-otp-box-padding-x)] py-[var(--ui-input-otp-box-padding-y)] text-center text-[var(--ui-input-otp-value-color)] caret-[var(--ui-input-otp-value-color)] placeholder:text-[var(--ui-input-otp-placeholder-color)] transition-colors focus-visible:outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',\n              error\n                ? 'border-[var(--ui-input-otp-box-border-color-error)] focus-visible:ring-[var(--ui-focus-error)]'\n                : 'border-[var(--ui-input-otp-box-border-color-idle)] focus-visible:border-[var(--ui-input-otp-box-border-color-active)] focus-visible:ring-[var(--ui-focus-primary)]'\n            )}\n          />\n        ))}\n      </div>\n    );\n  }\n);\nInputOTP.displayName = 'InputOTP';\n\nexport { InputOTP };\n"],"mappings":"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"}