npm - @acronis-platform/ui-react - Versions diffs - 3.0.0 → 4.1.0 - Mend

@acronis-platform/ui-react 3.0.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (772) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
1	+ {"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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
1	+ {"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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"}