@acronis-platform/ui-react 4.0.0 → 4.1.0

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