@acronis-platform/ui-react 4.0.0 → 5.0.0

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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"}

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

@@ -1,130 +1,75 @@
-import { jsxs as b, jsx as o } from "react/jsx-runtime";
-import * as c from "react";
-import { EyeIcon as E, EyeOffIcon as j } from "@acronis-platform/icons-react/stroke-mono";
 import { cn as e } from "../../../lib/utils.js";
-import { ButtonIconInput as k } from "../button-icon-input/button-icon-input.js";
-function B({
-  htmlFor: a,
-  disabled: r,
-  required: l,
-  children: s
-}) {
-  return /* @__PURE__ */ b(
-    "label",
-    {
-      htmlFor: a,
-      className: e(
-        "flex gap-[var(--ui-input-password-global-container-label-gap)] text-sm leading-4",
-        r ? "text-[var(--ui-input-password-global-label-color-disabled)]" : "text-[var(--ui-input-password-global-label-color-idle)]"
-      ),
-      children: [
-        s,
-        l && /* @__PURE__ */ o(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: "text-[var(--ui-input-password-global-required-color)]",
-            children: "*"
-          }
-        )
-      ]
-    }
-  );
+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 { EyeIcon as a, EyeOffIcon as o } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/input-password/input-password.tsx
+function s({ htmlFor: t, disabled: n, required: a, children: o }) {
+	return /* @__PURE__ */ i("label", {
+		htmlFor: t,
+		className: e("flex gap-[var(--ui-input-password-global-container-label-gap)] text-sm leading-4", n ? "text-[var(--ui-input-password-global-label-color-disabled)]" : "text-[var(--ui-input-password-global-label-color-idle)]"),
+		children: [o, a && /* @__PURE__ */ r("span", {
+			"aria-hidden": "true",
+			className: "text-[var(--ui-input-password-global-required-color)]",
+			children: "*"
+		})]
+	});
 }
-function C({
-  id: a,
-  hasError: r,
-  disabled: l,
-  children: s
-}) {
-  return /* @__PURE__ */ o(
-    "p",
-    {
-      id: a,
-      className: e(
-        "text-xs leading-4",
-        r ? "text-[var(--ui-input-password-error-msg-error-color)]" : l ? "text-[var(--ui-input-password-normal-description-color-disabled)]" : "text-[var(--ui-input-password-normal-description-color-idle)]"
-      ),
-      children: s
-    }
-  );
+function c({ id: t, hasError: n, disabled: i, children: a }) {
+	return /* @__PURE__ */ r("p", {
+		id: t,
+		className: e("text-xs leading-4", n ? "text-[var(--ui-input-password-error-msg-error-color)]" : i ? "text-[var(--ui-input-password-normal-description-color-disabled)]" : "text-[var(--ui-input-password-normal-description-color-idle)]"),
+		children: a
+	});
 }
-function M(a, r) {
-  return e(
-    "flex h-[var(--ui-input-password-global-box-height)] items-center gap-[var(--ui-input-password-global-box-gap)] rounded-[var(--ui-input-password-global-box-border-radius)] border-[length:var(--ui-input-password-global-box-border-width)] px-[var(--ui-input-password-global-box-padding-x)] py-[var(--ui-input-password-global-box-padding-y)] transition-colors",
-    a ? "border-[var(--ui-input-password-error-msg-box-border-color-idle)] bg-[var(--ui-input-password-global-box-color-idle)] has-[:focus-visible]:border-[var(--ui-input-password-error-msg-box-border-color-hover)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-[var(--ui-focus-error)]" : e(
-      "border-[var(--ui-input-password-normal-box-border-color-idle)] bg-[var(--ui-input-password-global-box-color-idle)]",
-      !r && "hover:border-[var(--ui-input-password-normal-box-border-color-hover)] hover:bg-[var(--ui-input-password-global-box-color-hover)]",
-      "has-[:focus-visible]:border-[var(--ui-input-password-normal-box-border-color-hover)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-[var(--ui-focus-primary)]"
-    ),
-    r && "cursor-not-allowed border-[var(--ui-input-password-normal-box-border-color-disabled)] bg-[var(--ui-input-password-global-box-color-disabled)]"
-  );
+function l(t, n) {
+	return e("flex h-[var(--ui-input-password-global-box-height)] items-center gap-[var(--ui-input-password-global-box-gap)] rounded-[var(--ui-input-password-global-box-border-radius)] border-[length:var(--ui-input-password-global-box-border-width)] px-[var(--ui-input-password-global-box-padding-x)] py-[var(--ui-input-password-global-box-padding-y)] transition-colors", t ? "border-[var(--ui-input-password-error-msg-box-border-color-idle)] bg-[var(--ui-input-password-global-box-color-idle)] has-[:focus-visible]:border-[var(--ui-input-password-error-msg-box-border-color-hover)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-[var(--ui-focus-error)]" : e("border-[var(--ui-input-password-normal-box-border-color-idle)] bg-[var(--ui-input-password-global-box-color-idle)]", !n && "hover:border-[var(--ui-input-password-normal-box-border-color-hover)] hover:bg-[var(--ui-input-password-global-box-color-hover)]", "has-[:focus-visible]:border-[var(--ui-input-password-normal-box-border-color-hover)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-[var(--ui-focus-primary)]"), n && "cursor-not-allowed border-[var(--ui-input-password-normal-box-border-color-disabled)] bg-[var(--ui-input-password-global-box-color-disabled)]");
 }
-const R = c.forwardRef(
-  ({
-    className: a,
-    style: r,
-    id: l,
-    label: s,
-    required: v,
-    description: x,
-    error: d,
-    disabled: i,
-    showPasswordLabel: m = "Show password",
-    hidePasswordLabel: h = "Hide password",
-    ...f
-  }, I) => {
-    const N = c.useId(), p = l ?? N, g = `${p}-message`, [n, y] = c.useState(!1), t = d != null && d !== "", u = t ? d : x, w = u != null && u !== "";
-    return /* @__PURE__ */ b(
-      "div",
-      {
-        className: e(
-          "flex min-w-[var(--ui-input-password-global-container-width-min)] flex-col gap-[var(--ui-input-password-global-container-gap)]",
-          a
-        ),
-        style: r,
-        children: [
-          s != null && s !== "" && /* @__PURE__ */ o(B, { htmlFor: p, disabled: i, required: v, children: s }),
-          /* @__PURE__ */ b("div", { className: M(t, i), children: [
-            /* @__PURE__ */ o(
-              "input",
-              {
-                ref: I,
-                id: p,
-                type: n ? "text" : "password",
-                disabled: i,
-                "aria-invalid": t || void 0,
-                "aria-required": v || void 0,
-                "aria-describedby": w ? g : void 0,
-                className: e(
-                  "min-w-0 flex-1 bg-transparent text-sm leading-6 outline-none",
-                  i ? "text-[var(--ui-input-password-global-value-color-disabled)] placeholder:text-[var(--ui-input-password-global-placeholder-color-disabled)]" : "text-[var(--ui-input-password-global-value-color-idle)] placeholder:text-[var(--ui-input-password-global-placeholder-color-idle)]"
-                ),
-                ...f
-              }
-            ),
-            /* @__PURE__ */ o(
-              k,
-              {
-                variant: t ? "error" : "normal",
-                onClick: () => y((P) => !P),
-                disabled: i,
-                "aria-label": n ? h : m,
-                "aria-pressed": n,
-                className: "shrink-0",
-                children: n ? /* @__PURE__ */ o(E, {}) : /* @__PURE__ */ o(j, {})
-              }
-            )
-          ] }),
-          w && /* @__PURE__ */ o(C, { id: g, hasError: t, disabled: i, children: u })
-        ]
-      }
-    );
-  }
-);
-R.displayName = "InputPassword";
-export {
-  R as InputPassword,
-  M as getInputPasswordBoxClassName
-};
-//# sourceMappingURL=input-password.js.map
+var u = n.forwardRef(({ className: u, style: d, id: f, label: p, required: m, description: h, error: g, disabled: _, showPasswordLabel: v = "Show password", hidePasswordLabel: y = "Hide password", ...b }, x) => {
+	let S = n.useId(), C = f ?? S, w = `${C}-message`, [T, E] = n.useState(!1), D = g != null && g !== "", O = D ? g : h, k = O != null && O !== "";
+	return /* @__PURE__ */ i("div", {
+		className: e("flex min-w-[var(--ui-input-password-global-container-width-min)] flex-col gap-[var(--ui-input-password-global-container-gap)]", u),
+		style: d,
+		children: [
+			p != null && p !== "" && /* @__PURE__ */ r(s, {
+				htmlFor: C,
+				disabled: _,
+				required: m,
+				children: p
+			}),
+			/* @__PURE__ */ i("div", {
+				className: l(D, _),
+				children: [/* @__PURE__ */ r("input", {
+					ref: x,
+					id: C,
+					type: T ? "text" : "password",
+					disabled: _,
+					"aria-invalid": D || void 0,
+					"aria-required": m || void 0,
+					"aria-describedby": k ? w : void 0,
+					className: e("min-w-0 flex-1 bg-transparent text-sm leading-6 outline-none", _ ? "text-[var(--ui-input-password-global-value-color-disabled)] placeholder:text-[var(--ui-input-password-global-placeholder-color-disabled)]" : "text-[var(--ui-input-password-global-value-color-idle)] placeholder:text-[var(--ui-input-password-global-placeholder-color-idle)]"),
+					...b
+				}), /* @__PURE__ */ r(t, {
+					variant: D ? "error" : "normal",
+					onClick: () => E((e) => !e),
+					disabled: _,
+					"aria-label": T ? y : v,
+					"aria-pressed": T,
+					className: "shrink-0",
+					children: r(T ? a : o, {})
+				})]
+			}),
+			k && /* @__PURE__ */ r(c, {
+				id: w,
+				hasError: D,
+				disabled: _,
+				children: O
+			})
+		]
+	});
+});
+u.displayName = "InputPassword";
+//#endregion
+export { u as InputPassword, l as getInputPasswordBoxClassName };
+
+//# sourceMappingURL=input-password.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-password.js","sources":["../../../../src/components/ui/input-password/input-password.tsx"],"sourcesContent":["import * as React from 'react';\nimport { EyeIcon, EyeOffIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIconInput } from '../button-icon-input';\n\n// Mirrors the Figma \"InputPassword\" component: an `InputText`-shaped field\n// (label / required / description / error) with a built-in show/hide toggle.\n// Unlike `InputText`, the box itself isn't the bare `Input` primitive — the\n// design gives InputPassword its own token tier (`--ui-input-password-*`)\n// down to the box fill/border, so the value input renders borderless/\n// transparent inside a themed flex container alongside the toggle button\n// (the tier's own `global-box-gap` token implies this layout, not an\n// absolutely-positioned overlay). The toggle is the Figma \"ButtonIconInput\"\n// instance, rendered here via the `ButtonIconInput` component. Visibility is\n// fully internal state; nothing in the design calls for a consumer-controlled\n// mode. `ref` targets the underlying `<input>`; `className` and `style` both\n// target the field wrapper (label + box + message), so sizing the field works\n// the same way whichever one a consumer reaches for.\nexport interface InputPasswordProps\n  extends Omit<React.ComponentPropsWithoutRef<'input'>, 'children' | 'type'> {\n  /** Field label, rendered above the input. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the input. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /**\n   * Error message below the input. Its presence switches the field to the error\n   * treatment (red box border + red message).\n   */\n  error?: React.ReactNode;\n  /** Accessible label for the toggle button while the password is hidden. */\n  showPasswordLabel?: string;\n  /** Accessible label for the toggle button while the password is shown. */\n  hidePasswordLabel?: string;\n}\n\ninterface InputPasswordLabelProps {\n  htmlFor: string;\n  disabled?: boolean;\n  required?: boolean;\n  children: React.ReactNode;\n}\n\nfunction InputPasswordLabel({\n  htmlFor,\n  disabled,\n  required,\n  children,\n}: InputPasswordLabelProps) {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={cn(\n        'flex gap-[var(--ui-input-password-global-container-label-gap)] text-sm leading-4',\n        disabled\n          ? 'text-[var(--ui-input-password-global-label-color-disabled)]'\n          : 'text-[var(--ui-input-password-global-label-color-idle)]'\n      )}\n    >\n      {children}\n      {required && (\n        <span\n          aria-hidden=\"true\"\n          className=\"text-[var(--ui-input-password-global-required-color)]\"\n        >\n          *\n        </span>\n      )}\n    </label>\n  );\n}\n\ninterface InputPasswordMessageProps {\n  id: string;\n  hasError: boolean;\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\nfunction InputPasswordMessage({\n  id,\n  hasError,\n  disabled,\n  children,\n}: InputPasswordMessageProps) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        'text-xs leading-4',\n        hasError\n          ? 'text-[var(--ui-input-password-error-msg-error-color)]'\n          : disabled\n            ? 'text-[var(--ui-input-password-normal-description-color-disabled)]'\n            : 'text-[var(--ui-input-password-normal-description-color-idle)]'\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\n// The box's border/background/focus-ring classes branch on `hasError` and\n// `disabled` independently, so inlining it is a 3-way nested ternary. Pulled\n// out as a pure function so the branches can be unit-tested directly.\nexport function getInputPasswordBoxClassName(\n  hasError: boolean,\n  disabled?: boolean\n) {\n  return cn(\n    'flex h-[var(--ui-input-password-global-box-height)] items-center gap-[var(--ui-input-password-global-box-gap)] rounded-[var(--ui-input-password-global-box-border-radius)] border-[length:var(--ui-input-password-global-box-border-width)] px-[var(--ui-input-password-global-box-padding-x)] py-[var(--ui-input-password-global-box-padding-y)] transition-colors',\n    hasError\n      ? 'border-[var(--ui-input-password-error-msg-box-border-color-idle)] bg-[var(--ui-input-password-global-box-color-idle)] has-[:focus-visible]:border-[var(--ui-input-password-error-msg-box-border-color-hover)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-[var(--ui-focus-error)]'\n      : cn(\n          'border-[var(--ui-input-password-normal-box-border-color-idle)] bg-[var(--ui-input-password-global-box-color-idle)]',\n          !disabled &&\n            'hover:border-[var(--ui-input-password-normal-box-border-color-hover)] hover:bg-[var(--ui-input-password-global-box-color-hover)]',\n          'has-[:focus-visible]:border-[var(--ui-input-password-normal-box-border-color-hover)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-[var(--ui-focus-primary)]'\n        ),\n    disabled &&\n      'cursor-not-allowed border-[var(--ui-input-password-normal-box-border-color-disabled)] bg-[var(--ui-input-password-global-box-color-disabled)]'\n  );\n}\n\nconst InputPassword = React.forwardRef<HTMLInputElement, InputPasswordProps>(\n  (\n    {\n      className,\n      style,\n      id,\n      label,\n      required,\n      description,\n      error,\n      disabled,\n      showPasswordLabel = 'Show password',\n      hidePasswordLabel = 'Hide password',\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n    const [visible, setVisible] = React.useState(false);\n\n    const hasError = error != null && error !== '';\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    return (\n      <div\n        className={cn(\n          'flex min-w-[var(--ui-input-password-global-container-width-min)] flex-col gap-[var(--ui-input-password-global-container-gap)]',\n          className\n        )}\n        style={style}\n      >\n        {label != null && label !== '' && (\n          <InputPasswordLabel htmlFor={inputId} disabled={disabled} required={required}>\n            {label}\n          </InputPasswordLabel>\n        )}\n\n        <div className={getInputPasswordBoxClassName(hasError, disabled)}>\n          <input\n            ref={ref}\n            id={inputId}\n            type={visible ? 'text' : 'password'}\n            disabled={disabled}\n            aria-invalid={hasError || undefined}\n            aria-required={required || undefined}\n            aria-describedby={hasMessage ? messageId : undefined}\n            className={cn(\n              'min-w-0 flex-1 bg-transparent text-sm leading-6 outline-none',\n              disabled\n                ? 'text-[var(--ui-input-password-global-value-color-disabled)] placeholder:text-[var(--ui-input-password-global-placeholder-color-disabled)]'\n                : 'text-[var(--ui-input-password-global-value-color-idle)] placeholder:text-[var(--ui-input-password-global-placeholder-color-idle)]'\n            )}\n            {...props}\n          />\n          <ButtonIconInput\n            variant={hasError ? 'error' : 'normal'}\n            onClick={() => setVisible((prev) => !prev)}\n            disabled={disabled}\n            aria-label={visible ? hidePasswordLabel : showPasswordLabel}\n            aria-pressed={visible}\n            className=\"shrink-0\"\n          >\n            {visible ? <EyeIcon /> : <EyeOffIcon />}\n          </ButtonIconInput>\n        </div>\n\n        {hasMessage && (\n          <InputPasswordMessage id={messageId} hasError={hasError} disabled={disabled}>\n            {message}\n          </InputPasswordMessage>\n        )}\n      </div>\n    );\n  }\n);\nInputPassword.displayName = 'InputPassword';\n\nexport { InputPassword };\n"],"names":["InputPasswordLabel","htmlFor","disabled","required","children","jsxs","cn","jsx","InputPasswordMessage","id","hasError","getInputPasswordBoxClassName","InputPassword","React","className","style","label","description","error","showPasswordLabel","hidePasswordLabel","props","ref","reactId","inputId","messageId","visible","setVisible","message","hasMessage","ButtonIconInput","prev","EyeIcon","EyeOffIcon"],"mappings":"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"}
+{"version":3,"file":"input-password.js","names":[],"sources":["../../../../src/components/ui/input-password/input-password.tsx"],"sourcesContent":["import * as React from 'react';\nimport { EyeIcon, EyeOffIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIconInput } from '../button-icon-input';\n\n// Mirrors the Figma \"InputPassword\" component: an `InputText`-shaped field\n// (label / required / description / error) with a built-in show/hide toggle.\n// Unlike `InputText`, the box itself isn't the bare `Input` primitive — the\n// design gives InputPassword its own token tier (`--ui-input-password-*`)\n// down to the box fill/border, so the value input renders borderless/\n// transparent inside a themed flex container alongside the toggle button\n// (the tier's own `global-box-gap` token implies this layout, not an\n// absolutely-positioned overlay). The toggle is the Figma \"ButtonIconInput\"\n// instance, rendered here via the `ButtonIconInput` component. Visibility is\n// fully internal state; nothing in the design calls for a consumer-controlled\n// mode. `ref` targets the underlying `<input>`; `className` and `style` both\n// target the field wrapper (label + box + message), so sizing the field works\n// the same way whichever one a consumer reaches for.\nexport interface InputPasswordProps\n  extends Omit<React.ComponentPropsWithoutRef<'input'>, 'children' | 'type'> {\n  /** Field label, rendered above the input. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the input. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /**\n   * Error message below the input. Its presence switches the field to the error\n   * treatment (red box border + red message).\n   */\n  error?: React.ReactNode;\n  /** Accessible label for the toggle button while the password is hidden. */\n  showPasswordLabel?: string;\n  /** Accessible label for the toggle button while the password is shown. */\n  hidePasswordLabel?: string;\n}\n\ninterface InputPasswordLabelProps {\n  htmlFor: string;\n  disabled?: boolean;\n  required?: boolean;\n  children: React.ReactNode;\n}\n\nfunction InputPasswordLabel({\n  htmlFor,\n  disabled,\n  required,\n  children,\n}: InputPasswordLabelProps) {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={cn(\n        'flex gap-[var(--ui-input-password-global-container-label-gap)] text-sm leading-4',\n        disabled\n          ? 'text-[var(--ui-input-password-global-label-color-disabled)]'\n          : 'text-[var(--ui-input-password-global-label-color-idle)]'\n      )}\n    >\n      {children}\n      {required && (\n        <span\n          aria-hidden=\"true\"\n          className=\"text-[var(--ui-input-password-global-required-color)]\"\n        >\n          *\n        </span>\n      )}\n    </label>\n  );\n}\n\ninterface InputPasswordMessageProps {\n  id: string;\n  hasError: boolean;\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\nfunction InputPasswordMessage({\n  id,\n  hasError,\n  disabled,\n  children,\n}: InputPasswordMessageProps) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        'text-xs leading-4',\n        hasError\n          ? 'text-[var(--ui-input-password-error-msg-error-color)]'\n          : disabled\n            ? 'text-[var(--ui-input-password-normal-description-color-disabled)]'\n            : 'text-[var(--ui-input-password-normal-description-color-idle)]'\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\n// The box's border/background/focus-ring classes branch on `hasError` and\n// `disabled` independently, so inlining it is a 3-way nested ternary. Pulled\n// out as a pure function so the branches can be unit-tested directly.\nexport function getInputPasswordBoxClassName(\n  hasError: boolean,\n  disabled?: boolean\n) {\n  return cn(\n    'flex h-[var(--ui-input-password-global-box-height)] items-center gap-[var(--ui-input-password-global-box-gap)] rounded-[var(--ui-input-password-global-box-border-radius)] border-[length:var(--ui-input-password-global-box-border-width)] px-[var(--ui-input-password-global-box-padding-x)] py-[var(--ui-input-password-global-box-padding-y)] transition-colors',\n    hasError\n      ? 'border-[var(--ui-input-password-error-msg-box-border-color-idle)] bg-[var(--ui-input-password-global-box-color-idle)] has-[:focus-visible]:border-[var(--ui-input-password-error-msg-box-border-color-hover)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-[var(--ui-focus-error)]'\n      : cn(\n          'border-[var(--ui-input-password-normal-box-border-color-idle)] bg-[var(--ui-input-password-global-box-color-idle)]',\n          !disabled &&\n            'hover:border-[var(--ui-input-password-normal-box-border-color-hover)] hover:bg-[var(--ui-input-password-global-box-color-hover)]',\n          'has-[:focus-visible]:border-[var(--ui-input-password-normal-box-border-color-hover)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-[var(--ui-focus-primary)]'\n        ),\n    disabled &&\n      'cursor-not-allowed border-[var(--ui-input-password-normal-box-border-color-disabled)] bg-[var(--ui-input-password-global-box-color-disabled)]'\n  );\n}\n\nconst InputPassword = React.forwardRef<HTMLInputElement, InputPasswordProps>(\n  (\n    {\n      className,\n      style,\n      id,\n      label,\n      required,\n      description,\n      error,\n      disabled,\n      showPasswordLabel = 'Show password',\n      hidePasswordLabel = 'Hide password',\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n    const [visible, setVisible] = React.useState(false);\n\n    const hasError = error != null && error !== '';\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    return (\n      <div\n        className={cn(\n          'flex min-w-[var(--ui-input-password-global-container-width-min)] flex-col gap-[var(--ui-input-password-global-container-gap)]',\n          className\n        )}\n        style={style}\n      >\n        {label != null && label !== '' && (\n          <InputPasswordLabel htmlFor={inputId} disabled={disabled} required={required}>\n            {label}\n          </InputPasswordLabel>\n        )}\n\n        <div className={getInputPasswordBoxClassName(hasError, disabled)}>\n          <input\n            ref={ref}\n            id={inputId}\n            type={visible ? 'text' : 'password'}\n            disabled={disabled}\n            aria-invalid={hasError || undefined}\n            aria-required={required || undefined}\n            aria-describedby={hasMessage ? messageId : undefined}\n            className={cn(\n              'min-w-0 flex-1 bg-transparent text-sm leading-6 outline-none',\n              disabled\n                ? 'text-[var(--ui-input-password-global-value-color-disabled)] placeholder:text-[var(--ui-input-password-global-placeholder-color-disabled)]'\n                : 'text-[var(--ui-input-password-global-value-color-idle)] placeholder:text-[var(--ui-input-password-global-placeholder-color-idle)]'\n            )}\n            {...props}\n          />\n          <ButtonIconInput\n            variant={hasError ? 'error' : 'normal'}\n            onClick={() => setVisible((prev) => !prev)}\n            disabled={disabled}\n            aria-label={visible ? hidePasswordLabel : showPasswordLabel}\n            aria-pressed={visible}\n            className=\"shrink-0\"\n          >\n            {visible ? <EyeIcon /> : <EyeOffIcon />}\n          </ButtonIconInput>\n        </div>\n\n        {hasMessage && (\n          <InputPasswordMessage id={messageId} hasError={hasError} disabled={disabled}>\n            {message}\n          </InputPasswordMessage>\n        )}\n      </div>\n    );\n  }\n);\nInputPassword.displayName = 'InputPassword';\n\nexport { InputPassword };\n"],"mappings":";;;;;;AA6CA,SAAS,EAAmB,EAC1B,YACA,aACA,aACA,eAC0B;CAC1B,OACE,kBAAC,SAAD;EACW;EACT,WAAW,EACT,oFACA,IACI,gEACA,yDACN;EAPF,UAAA,CASG,GACA,KACC,kBAAC,QAAD;GACE,eAAY;GACZ,WAAU;GACX,UAAA;EAEK,CAAA,CAEH;;AAEX;AASA,SAAS,EAAqB,EAC5B,OACA,aACA,aACA,eAC4B;CAC5B,OACE,kBAAC,KAAD;EACM;EACJ,WAAW,EACT,qBACA,IACI,0DACA,IACE,sEACA,+DACR;EAEC;CACA,CAAA;AAEP;AAKA,SAAgB,EACd,GACA,GACA;CACA,OAAO,EACL,uWACA,IACI,oSACA,EACE,sHACA,CAAC,KACC,oIACF,0KACF,GACJ,KACE,+IACJ;AACF;AAEA,IAAM,IAAgB,EAAM,YAExB,EACE,cACA,UACA,OACA,UACA,aACA,gBACA,UACA,aACA,uBAAoB,iBACpB,uBAAoB,iBACpB,GAAG,KAEL,MACG;CACH,IAAM,IAAU,EAAM,MAAM,GACtB,IAAU,KAAM,GAChB,IAAY,GAAG,EAAQ,WACvB,CAAC,GAAS,KAAc,EAAM,SAAS,EAAK,GAE5C,IAAW,KAAS,QAAQ,MAAU,IACtC,IAAU,IAAW,IAAQ,GAC7B,IAAa,KAAW,QAAQ,MAAY;CAElD,OACE,kBAAC,OAAD;EACE,WAAW,EACT,iIACA,CACF;EACO;EALT,UAAA;GAOG,KAAS,QAAQ,MAAU,MAC1B,kBAAC,GAAD;IAAoB,SAAS;IAAmB;IAAoB;IACjE,UAAA;GACiB,CAAA;GAGtB,kBAAC,OAAD;IAAK,WAAW,EAA6B,GAAU,CAAQ;IAA/D,UAAA,CACE,kBAAC,SAAD;KACO;KACL,IAAI;KACJ,MAAM,IAAU,SAAS;KACf;KACV,gBAAc,KAAY,KAAA;KAC1B,iBAAe,KAAY,KAAA;KAC3B,oBAAkB,IAAa,IAAY,KAAA;KAC3C,WAAW,EACT,gEACA,IACI,8IACA,mIACN;KACA,GAAI;IACL,CAAA,GACD,kBAAC,GAAD;KACE,SAAS,IAAW,UAAU;KAC9B,eAAe,GAAY,MAAS,CAAC,CAAI;KAC/B;KACV,cAAY,IAAU,IAAoB;KAC1C,gBAAc;KACd,WAAU;KAET,UAAU,EAAV,IAAW,IAAc,GAAf,CAAU,CAAiB;IACvB,CAAA,CACd;;GAEJ,KACC,kBAAC,GAAD;IAAsB,IAAI;IAAqB;IAAoB;IAChE,UAAA;GACmB,CAAA;EAErB;;AAET,CACF;AACA,EAAc,cAAc"}

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

@@ -1,56 +1,32 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import * as l from "react";
-import { cn as s } from "../../../lib/utils.js";
-import { SearchBox as f } from "../search/search.js";
-const v = l.forwardRef(
-  ({
-    className: p,
-    id: u,
-    label: a,
-    required: r,
-    disabled: e,
-    "aria-label": i,
-    ...d
-  }, h) => {
-    const m = l.useId(), t = u ?? m, n = a != null && a !== "", x = n ? { "aria-label": void 0 } : i != null ? { "aria-label": i } : {};
-    return /* @__PURE__ */ c("div", { className: s("flex min-w-[var(--ui-input-search-container-width-min)] flex-col gap-[var(--ui-input-search-container-gap)]", p), children: [
-      n && /* @__PURE__ */ c(
-        "label",
-        {
-          htmlFor: t,
-          className: s(
-            "flex gap-[var(--ui-input-search-container-label-gap)] text-sm leading-4",
-            e ? "text-[var(--ui-input-search-color-disabled)]" : "text-[var(--ui-input-search-color-idle)]"
-          ),
-          children: [
-            a,
-            r && /* @__PURE__ */ o(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: "text-[var(--ui-input-search-required-color)]",
-                children: "*"
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ o(
-        f,
-        {
-          ref: h,
-          id: t,
-          disabled: e,
-          "aria-required": r || void 0,
-          ...x,
-          ...d
-        }
-      )
-    ] });
-  }
-);
-v.displayName = "InputSearch";
-export {
-  v as InputSearch
-};
-//# sourceMappingURL=input-search.js.map
+import { cn as e } from "../../../lib/utils.js";
+import { SearchBox as t } from "../search/search.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/ui/input-search/input-search.tsx
+var a = n.forwardRef(({ className: a, id: o, label: s, required: c, disabled: l, "aria-label": u, ...d }, f) => {
+	let p = n.useId(), m = o ?? p, h = s != null && s !== "", g = h ? { "aria-label": void 0 } : u == null ? {} : { "aria-label": u };
+	return /* @__PURE__ */ i("div", {
+		className: e("flex min-w-[var(--ui-input-search-container-width-min)] flex-col gap-[var(--ui-input-search-container-gap)]", a),
+		children: [h && /* @__PURE__ */ i("label", {
+			htmlFor: m,
+			className: e("flex gap-[var(--ui-input-search-container-label-gap)] text-sm leading-4", l ? "text-[var(--ui-input-search-color-disabled)]" : "text-[var(--ui-input-search-color-idle)]"),
+			children: [s, c && /* @__PURE__ */ r("span", {
+				"aria-hidden": "true",
+				className: "text-[var(--ui-input-search-required-color)]",
+				children: "*"
+			})]
+		}), /* @__PURE__ */ r(t, {
+			ref: f,
+			id: m,
+			disabled: l,
+			"aria-required": c || void 0,
+			...g,
+			...d
+		})]
+	});
+});
+a.displayName = "InputSearch";
+//#endregion
+export { a as InputSearch };
+
+//# sourceMappingURL=input-search.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-search.js","sources":["../../../../src/components/ui/input-search/input-search.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { SearchBox, type SearchBoxProps } from '../search';\n\n// Mirrors the Figma \"InputSearch\" component: a full search field built around the\n// bare `SearchBox` (themed by the `--ui-input-search-*` tier). It adds the field\n// furniture — an optional `label` above the box (with an optional `required` `*`).\n// Every other prop (placeholder, value, onClear, disabled, …) passes straight\n// through to `Search`. Label colors come from `--ui-input-search-color-{idle,disabled}`\n// and the required marker from `--ui-input-search-required-color`, so brand overrides\n// are honored. When a visible label is present it names the field via `htmlFor`/`id`,\n// and `Search`'s built-in `aria-label=\"Search\"` is cleared so it doesn't shadow the\n// visible label.\nexport interface InputSearchProps extends SearchBoxProps {\n  /** Field label, rendered above the search box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n}\n\nconst InputSearch = React.forwardRef<HTMLInputElement, InputSearchProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      disabled,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const hasLabel = label != null && label !== '';\n\n    // A visible label names the field via `htmlFor`/`id`, so clear `Search`'s\n    // default `aria-label`. With no label, forward the caller's `aria-label` (if\n    // any) and otherwise let `Search`'s default stand.\n    const ariaLabelProps = hasLabel\n      ? { 'aria-label': undefined }\n      : ariaLabel != null\n        ? { 'aria-label': ariaLabel }\n        : {};\n\n    return (\n      <div className={cn('flex min-w-[var(--ui-input-search-container-width-min)] flex-col gap-[var(--ui-input-search-container-gap)]', className)}>\n        {hasLabel && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-search-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-search-color-disabled)]'\n                : 'text-[var(--ui-input-search-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-search-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n        <SearchBox\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          aria-required={required || undefined}\n          {...ariaLabelProps}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nInputSearch.displayName = 'InputSearch';\n\nexport { InputSearch };\n"],"names":["InputSearch","React","className","id","label","required","disabled","ariaLabel","props","ref","reactId","inputId","hasLabel","ariaLabelProps","cn","jsxs","jsx","SearchBox"],"mappings":";;;;AAqBA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUT,EAAM,MAAA,GAChBU,IAAUR,KAAMO,GAChBE,IAAWR,KAAS,QAAQA,MAAU,IAKtCS,IAAiBD,IACnB,EAAE,cAAc,OAAA,IAChBL,KAAa,OACX,EAAE,cAAcA,EAAA,IAChB,CAAA;AAEN,6BACG,OAAA,EAAI,WAAWO,EAAG,+GAA+GZ,CAAS,GACxI,UAAA;AAAA,MAAAU,KACC,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASJ;AAAA,UACT,WAAWG;AAAA,YACT;AAAA,YACAR,IACI,iDACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAF;AAAA,YACAC,KACC,gBAAAW;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAIN,gBAAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAAR;AAAA,UACA,IAAIE;AAAA,UACJ,UAAAL;AAAA,UACA,iBAAeD,KAAY;AAAA,UAC1B,GAAGQ;AAAA,UACH,GAAGL;AAAA,QAAA;AAAA,MAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AACAR,EAAY,cAAc;"}
+{"version":3,"file":"input-search.js","names":[],"sources":["../../../../src/components/ui/input-search/input-search.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { SearchBox, type SearchBoxProps } from '../search';\n\n// Mirrors the Figma \"InputSearch\" component: a full search field built around the\n// bare `SearchBox` (themed by the `--ui-input-search-*` tier). It adds the field\n// furniture — an optional `label` above the box (with an optional `required` `*`).\n// Every other prop (placeholder, value, onClear, disabled, …) passes straight\n// through to `Search`. Label colors come from `--ui-input-search-color-{idle,disabled}`\n// and the required marker from `--ui-input-search-required-color`, so brand overrides\n// are honored. When a visible label is present it names the field via `htmlFor`/`id`,\n// and `Search`'s built-in `aria-label=\"Search\"` is cleared so it doesn't shadow the\n// visible label.\nexport interface InputSearchProps extends SearchBoxProps {\n  /** Field label, rendered above the search box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n}\n\nconst InputSearch = React.forwardRef<HTMLInputElement, InputSearchProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      disabled,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const hasLabel = label != null && label !== '';\n\n    // A visible label names the field via `htmlFor`/`id`, so clear `Search`'s\n    // default `aria-label`. With no label, forward the caller's `aria-label` (if\n    // any) and otherwise let `Search`'s default stand.\n    const ariaLabelProps = hasLabel\n      ? { 'aria-label': undefined }\n      : ariaLabel != null\n        ? { 'aria-label': ariaLabel }\n        : {};\n\n    return (\n      <div className={cn('flex min-w-[var(--ui-input-search-container-width-min)] flex-col gap-[var(--ui-input-search-container-gap)]', className)}>\n        {hasLabel && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-search-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-search-color-disabled)]'\n                : 'text-[var(--ui-input-search-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-search-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n        <SearchBox\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          aria-required={required || undefined}\n          {...ariaLabelProps}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nInputSearch.displayName = 'InputSearch';\n\nexport { InputSearch };\n"],"mappings":";;;;;AAqBA,IAAM,IAAc,EAAM,YAEtB,EACE,cACA,OACA,UACA,aACA,aACA,cAAc,GACd,GAAG,KAEL,MACG;CACH,IAAM,IAAU,EAAM,MAAM,GACtB,IAAU,KAAM,GAChB,IAAW,KAAS,QAAQ,MAAU,IAKtC,IAAiB,IACnB,EAAE,cAAc,KAAA,EAAU,IAC1B,KAAa,OAEX,CAAC,IADD,EAAE,cAAc,EAAU;CAGhC,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,+GAA+G,CAAS;EAA3I,UAAA,CACG,KACC,kBAAC,SAAD;GACE,SAAS;GACT,WAAW,EACT,2EACA,IACI,iDACA,0CACN;GAPF,UAAA,CASG,GACA,KACC,kBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IACX,UAAA;GAEK,CAAA,CAEH;EAET,CAAA,GAAA,kBAAC,GAAD;GACO;GACL,IAAI;GACM;GACV,iBAAe,KAAY,KAAA;GAC3B,GAAI;GACJ,GAAI;EACL,CAAA,CACE;;AAET,CACF;AACA,EAAY,cAAc"}