@acronis-platform/ui-react 0.57.1 → 0.60.0

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

@@ -0,0 +1,104 @@
+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

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,120 @@
+import { jsxs as b, jsx as o } from "react/jsx-runtime";
+import * as c from "react";
+import { EyeIcon as P, EyeCrossedIcon as C } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as t } from "../../../lib/utils.js";
+import { ButtonIconInput as E } from "../button-icon-input/button-icon-input.js";
+function j({
+  htmlFor: a,
+  disabled: r,
+  required: s,
+  children: i
+}) {
+  return /* @__PURE__ */ b(
+    "label",
+    {
+      htmlFor: a,
+      className: t(
+        "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: [
+        i,
+        s && /* @__PURE__ */ o(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "text-[var(--ui-input-password-global-required-color)]",
+            children: "*"
+          }
+        )
+      ]
+    }
+  );
+}
+function k({
+  id: a,
+  hasError: r,
+  disabled: s,
+  children: i
+}) {
+  return /* @__PURE__ */ o(
+    "p",
+    {
+      id: a,
+      className: t(
+        "text-xs leading-4",
+        r ? "text-[var(--ui-input-password-error-msg-error-color)]" : s ? "text-[var(--ui-input-password-normal-description-color-disabled)]" : "text-[var(--ui-input-password-normal-description-color-idle)]"
+      ),
+      children: i
+    }
+  );
+}
+function B(a, r) {
+  return t(
+    "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)]" : t(
+      "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)]"
+  );
+}
+const M = c.forwardRef(
+  ({
+    className: a,
+    id: r,
+    label: s,
+    required: i,
+    description: w,
+    error: d,
+    disabled: e,
+    showPasswordLabel: x = "Show password",
+    hidePasswordLabel: m = "Hide password",
+    ...h
+  }, f) => {
+    const I = c.useId(), p = r ?? I, v = `${p}-message`, [n, N] = c.useState(!1), l = d != null && d !== "", u = l ? d : w, g = u != null && u !== "";
+    return /* @__PURE__ */ b("div", { className: "flex w-full min-w-[var(--ui-input-password-global-container-width-min)] flex-col gap-[var(--ui-input-password-global-container-gap)]", children: [
+      s != null && s !== "" && /* @__PURE__ */ o(j, { htmlFor: p, disabled: e, required: i, children: s }),
+      /* @__PURE__ */ b("div", { className: B(l, e), children: [
+        /* @__PURE__ */ o(
+          "input",
+          {
+            ref: f,
+            id: p,
+            type: n ? "text" : "password",
+            disabled: e,
+            "aria-invalid": l || void 0,
+            "aria-required": i || void 0,
+            "aria-describedby": g ? v : void 0,
+            className: t(
+              "min-w-0 flex-1 bg-transparent text-sm leading-6 outline-none",
+              e ? "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)]",
+              a
+            ),
+            ...h
+          }
+        ),
+        /* @__PURE__ */ o(
+          E,
+          {
+            variant: l ? "error" : "normal",
+            onClick: () => N((y) => !y),
+            disabled: e,
+            "aria-label": n ? m : x,
+            "aria-pressed": n,
+            className: "shrink-0",
+            children: n ? /* @__PURE__ */ o(P, {}) : /* @__PURE__ */ o(C, {})
+          }
+        )
+      ] }),
+      g && /* @__PURE__ */ o(k, { id: v, hasError: l, disabled: e, children: u })
+    ] });
+  }
+);
+M.displayName = "InputPassword";
+export {
+  M as InputPassword,
+  B as getInputPasswordBoxClassName
+};
+//# sourceMappingURL=input-password.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-password.js","sources":["../../../../src/components/ui/input-password/input-password.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  EyeIcon,\n  EyeCrossedIcon,\n} 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.\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      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 className=\"flex w-full min-w-[var(--ui-input-password-global-container-width-min)] flex-col gap-[var(--ui-input-password-global-container-gap)]\">\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              className\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 /> : <EyeCrossedIcon />}\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","label","description","error","showPasswordLabel","hidePasswordLabel","props","ref","reactId","inputId","messageId","visible","setVisible","message","hasMessage","ButtonIconInput","prev","EyeIcon","EyeCrossedIcon"],"mappings":"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"}

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

@@ -10,19 +10,19 @@ const T = m.forwardRef(
     label: i,
     required: u,
     description: v,
-    error: a,
+    error: o,
     clearable: f,
     onClear: h,
     disabled: e,
-    value: o,
+    value: a,
     ...I
   }, N) => {
-    const y = m.useId(), l = b ?? y, d = `${l}-message`, r = a != null && a !== "", w = o != null && o !== "", p = !!f && w && !e, n = r ? a : v, x = n != null && n !== "";
+    const y = m.useId(), r = b ?? y, d = `${r}-message`, l = o != null && o !== "", w = a != null && a !== "", p = !!f && w && !e, n = l ? o : v, x = n != null && n !== "";
     return /* @__PURE__ */ s("div", { className: "flex w-full min-w-[var(--ui-input-text-global-container-width-min)] flex-col gap-[var(--ui-input-text-global-container-gap)]", children: [
       i != null && i !== "" && /* @__PURE__ */ s(
         "label",
         {
-          htmlFor: l,
+          htmlFor: r,
           className: c(
             "flex gap-[var(--ui-input-text-global-container-label-gap)] text-sm leading-4",
             e ? "text-[var(--ui-input-text-global-label-color-disabled)]" : "text-[var(--ui-input-text-global-label-color-idle)]"
@@ -45,10 +45,10 @@ const T = m.forwardRef(
           C,
           {
             ref: N,
-            id: l,
+            id: r,
             disabled: e,
-            value: o,
-            "aria-invalid": r || void 0,
+            value: a,
+            "aria-invalid": l || void 0,
             "aria-required": u || void 0,
             "aria-describedby": x ? d : void 0,
             className: c(p && "pe-9", g),
@@ -61,7 +61,7 @@ const T = m.forwardRef(
             type: "button",
             onClick: h,
             "aria-label": "Clear",
-            className: "absolute end-[var(--ui-input-text-global-box-padding-x)] top-1/2 flex size-4 -translate-y-1/2 items-center justify-center rounded-[var(--ui-input-text-global-box-border-radius)] text-[var(--ui-button-icon-global-icon-color-idle)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0",
+            className: "absolute end-[var(--ui-input-text-global-box-padding-x)] top-1/2 flex size-5 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[var(--ui-input-text-global-box-border-radius)] p-0.5 text-[var(--ui-button-icon-global-icon-color-idle)] outline-none hover:bg-[var(--ui-button-icon-global-container-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0",
             children: /* @__PURE__ */ t(j, {})
           }
         )
@@ -72,7 +72,7 @@ const T = m.forwardRef(
           id: d,
           className: c(
             "text-xs leading-4",
-            r ? "text-[var(--ui-input-text-error-msg-error-color)]" : e ? "text-[var(--ui-input-text-normal-description-color-disabled)]" : "text-[var(--ui-input-text-normal-description-color-idle)]"
+            l ? "text-[var(--ui-input-text-error-msg-error-color)]" : e ? "text-[var(--ui-input-text-normal-description-color-disabled)]" : "text-[var(--ui-input-text-normal-description-color-idle)]"
           ),
           children: n
         }

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

@@ -1 +1 @@
-{"version":3,"file":"input-text.js","sources":["../../../../src/components/ui/input-text/input-text.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { InputBox } from '../input';\n\n// Mirrors the Figma \"InputText\" component: a full single-line text field built\n// around the bare `InputBox` primitive (themed by the `--ui-input-text-*` tier). It\n// adds the field furniture: an optional `label` (with an optional `required` `*`),\n// an optional clear (✕) button, and an optional `description` or `error` message\n// below. Passing `error` switches the field to its error treatment — the box gets\n// the red error border (via the input's `aria-invalid` styling) and the red error\n// message replaces the description. The clear button appears only while `clearable`\n// is set and the (controlled) field has a value, and calls `onClear`. Colors come\n// from the `--ui-input-text-*` tokens — label/required/description/error — so brand\n// overrides are honored; the clear button is a ghost ButtonIcon (glyph\n// `--ui-button-icon-global-icon-color-idle`, since the input-text tier dropped its\n// own clear-icon token in the Figma sync) with a 3px `--ui-focus-primary` ring.\nexport interface InputTextProps\n  extends Omit<React.ComponentPropsWithoutRef<'input'>, 'children'> {\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  /** Show a clear (✕) button while the (controlled) field has a value. */\n  clearable?: boolean;\n  /** Called when the clear button is activated. */\n  onClear?: () => void;\n}\n\nconst InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      description,\n      error,\n      clearable,\n      onClear,\n      disabled,\n      value,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n\n    const hasError = error != null && error !== '';\n    const hasValue = value != null && value !== '';\n    const showClear = Boolean(clearable) && hasValue && !disabled;\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    return (\n      <div className=\"flex w-full min-w-[var(--ui-input-text-global-container-width-min)] flex-col gap-[var(--ui-input-text-global-container-gap)]\">\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-text-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-text-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-text-global-label-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-text-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <div className=\"relative\">\n          <InputBox\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            value={value}\n            aria-invalid={hasError || undefined}\n            aria-required={required || undefined}\n            aria-describedby={hasMessage ? messageId : undefined}\n            className={cn(showClear && 'pe-9', className)}\n            {...props}\n          />\n          {showClear && (\n            <button\n              type=\"button\"\n              onClick={onClear}\n              aria-label=\"Clear\"\n              className=\"absolute end-[var(--ui-input-text-global-box-padding-x)] top-1/2 flex size-4 -translate-y-1/2 items-center justify-center rounded-[var(--ui-input-text-global-box-border-radius)] text-[var(--ui-button-icon-global-icon-color-idle)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0\"\n            >\n              <TimesIcon />\n            </button>\n          )}\n        </div>\n\n        {hasMessage && (\n          <p\n            id={messageId}\n            className={cn(\n              'text-xs leading-4',\n              hasError\n                ? 'text-[var(--ui-input-text-error-msg-error-color)]'\n                : disabled\n                  ? 'text-[var(--ui-input-text-normal-description-color-disabled)]'\n                  : 'text-[var(--ui-input-text-normal-description-color-idle)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputText.displayName = 'InputText';\n\nexport { InputText };\n"],"names":["InputText","React","className","id","label","required","description","error","clearable","onClear","disabled","value","props","ref","reactId","inputId","messageId","hasError","hasValue","showClear","message","hasMessage","jsxs","cn","jsx","InputBox","TimesIcon"],"mappings":";;;;;AAqCA,MAAMA,IAAYC,EAAM;AAAA,EACtB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUb,EAAM,MAAA,GAChBc,IAAUZ,KAAMW,GAChBE,IAAY,GAAGD,CAAO,YAEtBE,IAAWV,KAAS,QAAQA,MAAU,IACtCW,IAAWP,KAAS,QAAQA,MAAU,IACtCQ,IAAY,EAAQX,KAAcU,KAAY,CAACR,GAC/CU,IAAUH,IAAWV,IAAQD,GAC7Be,IAAaD,KAAW,QAAQA,MAAY;AAElD,WACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,gIACZ,UAAA;AAAA,MAAAlB,KAAS,QAAQA,MAAU,MAC1B,gBAAAkB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASP;AAAA,UACT,WAAWQ;AAAA,YACT;AAAA,YACAb,IACI,4DACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAN;AAAA,YACAC,KACC,gBAAAmB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAKN,gBAAAF,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAAZ;AAAA,YACA,IAAIE;AAAA,YACJ,UAAAL;AAAA,YACA,OAAAC;AAAA,YACA,gBAAcM,KAAY;AAAA,YAC1B,iBAAeZ,KAAY;AAAA,YAC3B,oBAAkBgB,IAAaL,IAAY;AAAA,YAC3C,WAAWO,EAAGJ,KAAa,QAAQjB,CAAS;AAAA,YAC3C,GAAGU;AAAA,UAAA;AAAA,QAAA;AAAA,QAELO,KACC,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAASf;AAAA,YACT,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,4BAACiB,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACb,GAEJ;AAAA,MAECL,KACC,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIR;AAAA,UACJ,WAAWO;AAAA,YACT;AAAA,YACAN,IACI,sDACAP,IACE,kEACA;AAAA,UAAA;AAAA,UAGP,UAAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AACApB,EAAU,cAAc;"}
+{"version":3,"file":"input-text.js","sources":["../../../../src/components/ui/input-text/input-text.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { InputBox } from '../input';\n\n// Mirrors the Figma \"InputText\" component: a full single-line text field built\n// around the bare `InputBox` primitive (themed by the `--ui-input-text-*` tier). It\n// adds the field furniture: an optional `label` (with an optional `required` `*`),\n// an optional clear (✕) button, and an optional `description` or `error` message\n// below. Passing `error` switches the field to its error treatment — the box gets\n// the red error border (via the input's `aria-invalid` styling) and the red error\n// message replaces the description. The clear button appears only while `clearable`\n// is set and the (controlled) field has a value, and calls `onClear`. Colors come\n// from the `--ui-input-text-*` tokens — label/required/description/error — so brand\n// overrides are honored; the clear button is a ghost ButtonIcon (glyph\n// `--ui-button-icon-global-icon-color-idle`, since the input-text tier dropped its\n// own clear-icon token in the Figma sync) with a 3px `--ui-focus-primary` ring.\nexport interface InputTextProps\n  extends Omit<React.ComponentPropsWithoutRef<'input'>, 'children'> {\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  /** Show a clear (✕) button while the (controlled) field has a value. */\n  clearable?: boolean;\n  /** Called when the clear button is activated. */\n  onClear?: () => void;\n}\n\nconst InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      description,\n      error,\n      clearable,\n      onClear,\n      disabled,\n      value,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n\n    const hasError = error != null && error !== '';\n    const hasValue = value != null && value !== '';\n    const showClear = Boolean(clearable) && hasValue && !disabled;\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    return (\n      <div className=\"flex w-full min-w-[var(--ui-input-text-global-container-width-min)] flex-col gap-[var(--ui-input-text-global-container-gap)]\">\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-text-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-text-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-text-global-label-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-text-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <div className=\"relative\">\n          <InputBox\n            ref={ref}\n            id={inputId}\n            disabled={disabled}\n            value={value}\n            aria-invalid={hasError || undefined}\n            aria-required={required || undefined}\n            aria-describedby={hasMessage ? messageId : undefined}\n            className={cn(showClear && 'pe-9', className)}\n            {...props}\n          />\n          {showClear && (\n            <button\n              type=\"button\"\n              onClick={onClear}\n              aria-label=\"Clear\"\n              className=\"absolute end-[var(--ui-input-text-global-box-padding-x)] top-1/2 flex size-5 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[var(--ui-input-text-global-box-border-radius)] p-0.5 text-[var(--ui-button-icon-global-icon-color-idle)] outline-none hover:bg-[var(--ui-button-icon-global-container-color-hover)] active:bg-[var(--ui-button-icon-global-container-color-active)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0\"\n            >\n              <TimesIcon />\n            </button>\n          )}\n        </div>\n\n        {hasMessage && (\n          <p\n            id={messageId}\n            className={cn(\n              'text-xs leading-4',\n              hasError\n                ? 'text-[var(--ui-input-text-error-msg-error-color)]'\n                : disabled\n                  ? 'text-[var(--ui-input-text-normal-description-color-disabled)]'\n                  : 'text-[var(--ui-input-text-normal-description-color-idle)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputText.displayName = 'InputText';\n\nexport { InputText };\n"],"names":["InputText","React","className","id","label","required","description","error","clearable","onClear","disabled","value","props","ref","reactId","inputId","messageId","hasError","hasValue","showClear","message","hasMessage","jsxs","cn","jsx","InputBox","TimesIcon"],"mappings":";;;;;AAqCA,MAAMA,IAAYC,EAAM;AAAA,EACtB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUb,EAAM,MAAA,GAChBc,IAAUZ,KAAMW,GAChBE,IAAY,GAAGD,CAAO,YAEtBE,IAAWV,KAAS,QAAQA,MAAU,IACtCW,IAAWP,KAAS,QAAQA,MAAU,IACtCQ,IAAY,EAAQX,KAAcU,KAAY,CAACR,GAC/CU,IAAUH,IAAWV,IAAQD,GAC7Be,IAAaD,KAAW,QAAQA,MAAY;AAElD,WACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,gIACZ,UAAA;AAAA,MAAAlB,KAAS,QAAQA,MAAU,MAC1B,gBAAAkB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASP;AAAA,UACT,WAAWQ;AAAA,YACT;AAAA,YACAb,IACI,4DACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAN;AAAA,YACAC,KACC,gBAAAmB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAKN,gBAAAF,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAAZ;AAAA,YACA,IAAIE;AAAA,YACJ,UAAAL;AAAA,YACA,OAAAC;AAAA,YACA,gBAAcM,KAAY;AAAA,YAC1B,iBAAeZ,KAAY;AAAA,YAC3B,oBAAkBgB,IAAaL,IAAY;AAAA,YAC3C,WAAWO,EAAGJ,KAAa,QAAQjB,CAAS;AAAA,YAC3C,GAAGU;AAAA,UAAA;AAAA,QAAA;AAAA,QAELO,KACC,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAASf;AAAA,YACT,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,4BAACiB,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACb,GAEJ;AAAA,MAECL,KACC,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIR;AAAA,UACJ,WAAWO;AAAA,YACT;AAAA,YACAN,IACI,sDACAP,IACE,kEACA;AAAA,UAAA;AAAA,UAGP,UAAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AACApB,EAAU,cAAc;"}

package/dist/components/ui/line-chart/line-chart.js

@@ -0,0 +1,234 @@
+import { jsx as e, jsxs as at } from "react/jsx-runtime";
+import * as m from "react";
+import { cva as nt } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { ComposedChart as ot, LineChart as it, CartesianGrid as rt, XAxis as lt, YAxis as st, Area as dt, Line as ct } from "recharts";
+import { cn as mt } from "../../../lib/utils.js";
+import { ChartContainer as ft, ChartTooltip as C, ChartTooltipContent as b, ChartLegend as _, ChartLegendContent as B } from "../chart/chart.js";
+import { resolveAxisDomain as ht } from "../chart/chart-format.js";
+const ut = nt("", {
+  variants: {
+    curve: {
+      linear: "",
+      monotone: "",
+      step: ""
+    },
+    lineStyle: {
+      solid: "",
+      dashed: ""
+    }
+  },
+  defaultVariants: {
+    curve: "monotone",
+    lineStyle: "solid"
+  }
+}), $ = "__band_";
+function T(n) {
+  return n == null ? void 0 : n.filter(
+    (l) => !String(l.dataKey).startsWith($)
+  );
+}
+function vt(n) {
+  return function(i) {
+    const s = {
+      ...i,
+      payload: T(i.payload)
+    };
+    return typeof n == "function" ? m.createElement(
+      n,
+      s
+    ) : m.cloneElement(n, s);
+  };
+}
+const pt = m.forwardRef(
+  ({
+    className: n,
+    config: l,
+    data: i,
+    dataKeys: s,
+    comparisonKeys: f,
+    deltaBands: A,
+    xKey: E,
+    xAxisLabel: d,
+    yAxisLabel: h,
+    yUnit: F,
+    curve: c = "monotone",
+    lineStyle: u = "solid",
+    strokeWidth: M = 2,
+    showDots: k = !0,
+    connectNulls: D = !1,
+    showGrid: R = !0,
+    showTooltip: S = !0,
+    showLegend: N = !0,
+    showXAxis: j = !0,
+    showYAxis: z = !0,
+    xTickFormatter: I,
+    yTickFormatter: O,
+    xAxisAngle: r,
+    xAxisInterval: V,
+    yAxisTickCount: X,
+    yAxisDomain: G,
+    gridDashed: H,
+    gridHorizontal: P,
+    gridVertical: W,
+    tooltipContent: v,
+    ...Y
+  }, q) => {
+    const x = u === "dashed" ? "5 5" : void 0, J = ht(G), K = d || r != null ? 30 + (r != null ? 20 : 0) + (d ? 18 : 0) : void 0, L = m.useMemo(
+      () => v ? vt(v) : void 0,
+      [v]
+    ), Q = d ? { value: d, position: "insideBottom", offset: 0 } : void 0, U = h ? {
+      value: h,
+      angle: -90,
+      position: "insideLeft",
+      style: { textAnchor: "middle" }
+    } : void 0, o = (A ?? []).map(([t, a], p) => ({
+      field: `${$}${p}`,
+      current: t,
+      comparison: a
+    })), Z = o.length ? i.map((t) => {
+      const a = { ...t };
+      for (const { field: p, current: tt, comparison: et } of o) {
+        const y = t[tt], g = t[et];
+        a[p] = typeof y == "number" && typeof g == "number" ? [Math.min(y, g), Math.max(y, g)] : void 0;
+      }
+      return a;
+    }) : i, w = o.length > 0 ? ot : it;
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: q,
+        "data-curve": c,
+        "data-line-style": u,
+        className: mt(ut({ curve: c, lineStyle: u }), n),
+        ...Y,
+        children: /* @__PURE__ */ e(
+          ft,
+          {
+            config: l,
+            className: "size-full [&_.recharts-label]:fill-foreground",
+            children: /* @__PURE__ */ at(w, { data: Z, children: [
+              R && /* @__PURE__ */ e(
+                rt,
+                {
+                  horizontal: P ?? !0,
+                  vertical: W ?? !1,
+                  strokeDasharray: H ? "3 3" : void 0
+                }
+              ),
+              /* @__PURE__ */ e(
+                lt,
+                {
+                  dataKey: E,
+                  type: "category",
+                  hide: !j,
+                  tickLine: !1,
+                  axisLine: !1,
+                  tickMargin: 8,
+                  tickFormatter: I,
+                  angle: r,
+                  interval: V,
+                  textAnchor: r != null ? r < 0 ? "end" : "start" : void 0,
+                  height: K,
+                  label: Q
+                }
+              ),
+              /* @__PURE__ */ e(
+                st,
+                {
+                  type: "number",
+                  hide: !z,
+                  tickLine: !1,
+                  axisLine: !1,
+                  unit: F,
+                  tickFormatter: O,
+                  tickCount: X,
+                  domain: J,
+                  width: h ? 72 : void 0,
+                  label: U
+                }
+              ),
+              S && (L ? (
+                // Strips the synthetic delta bands before the caller's tooltip
+                // sees them — the `__band_*` series feed the Areas, not the
+                // tooltip (a no-op when no bands are configured).
+                /* @__PURE__ */ e(C, { content: L })
+              ) : o.length > 0 ? /* @__PURE__ */ e(
+                C,
+                {
+                  content: (t) => /* @__PURE__ */ e(
+                    b,
+                    {
+                      active: t.active,
+                      label: t.label,
+                      payload: T(
+                        t.payload
+                      )
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ e(C, { content: /* @__PURE__ */ e(b, {}) })),
+              N && (o.length > 0 ? /* @__PURE__ */ e(
+                _,
+                {
+                  content: (t) => /* @__PURE__ */ e(
+                    B,
+                    {
+                      verticalAlign: t.verticalAlign,
+                      payload: T(
+                        t.payload
+                      )
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ e(_, { content: /* @__PURE__ */ e(B, {}) })),
+              o.map(({ field: t, current: a }) => /* @__PURE__ */ e(
+                dt,
+                {
+                  dataKey: t,
+                  type: c ?? "monotone",
+                  stroke: "none",
+                  fill: `var(--color-${a})`,
+                  fillOpacity: 0.12,
+                  connectNulls: D,
+                  dot: !1,
+                  activeDot: !1,
+                  isAnimationActive: !1,
+                  legendType: "none",
+                  tooltipType: "none"
+                },
+                t
+              )),
+              s.map((t) => {
+                const a = f == null ? void 0 : f.includes(t);
+                return /* @__PURE__ */ e(
+                  ct,
+                  {
+                    type: c ?? "monotone",
+                    dataKey: t,
+                    stroke: `var(--color-${t})`,
+                    strokeWidth: M,
+                    strokeDasharray: a ? "5 5" : x,
+                    strokeOpacity: a ? 0.5 : void 0,
+                    dot: !a && k ? { r: 3 } : !1,
+                    activeDot: !a && k ? { r: 5 } : !1,
+                    connectNulls: D,
+                    isAnimationActive: !1
+                  },
+                  t
+                );
+              })
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+pt.displayName = "LineChart";
+export {
+  pt as LineChart,
+  vt as createBandStrippedTooltip,
+  T as dropBandSeries,
+  ut as lineChartVariants
+};
+//# sourceMappingURL=line-chart.js.map