@acronis-platform/ui-react 0.57.0 → 0.57.1

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

@@ -0,0 +1,340 @@
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import * as a from "react";
+import { Select as c } from "@base-ui/react/select";
+import { ChevronDownIcon as f, ChevronRightIcon as N, CheckIcon as h, MagnifierIcon as k, InboxIcon as C, CircleWarningIcon as R } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as s } from "../../../lib/utils.js";
+import { usePortalContainer as z } from "../../../lib/portal-container.js";
+const w = a.createContext(!1), g = a.createContext(null);
+function X() {
+  const t = a.useContext(g);
+  if (!t)
+    throw new Error("useInputSelectFilter must be used within <InputSelect>.");
+  return t;
+}
+function E(t) {
+  const { onOpenChange: e } = t, [r, i] = a.useState(""), l = a.useMemo(() => ({ query: r, setQuery: i }), [r]), d = a.useCallback(
+    (n, u) => {
+      e == null || e(n, u), n || i("");
+    },
+    [e]
+  );
+  return /* @__PURE__ */ o(w.Provider, { value: !!t.multiple, children: /* @__PURE__ */ o(g.Provider, { value: l, children: /* @__PURE__ */ o(c.Root, { ...t, onOpenChange: d }) }) });
+}
+E.displayName = "InputSelect";
+const Y = c.Group, T = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: r,
+    className: s(
+      "flex w-full min-w-[var(--ui-input-select-global-container-width-min)] flex-col gap-[var(--ui-input-select-global-container-gap)]",
+      t
+    ),
+    ...e
+  }
+));
+T.displayName = "InputSelectField";
+const L = a.forwardRef(({ className: t, children: e, required: r, ...i }, l) => /* @__PURE__ */ m(
+  c.Label,
+  {
+    ref: l,
+    className: s(
+      "flex gap-[var(--ui-input-select-global-container-label-gap)] text-sm leading-4 text-[var(--ui-input-select-global-label-color-idle)] data-[disabled]:text-[var(--ui-input-select-global-label-color-disabled)]",
+      t
+    ),
+    ...i,
+    children: [
+      e,
+      r && /* @__PURE__ */ o(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "text-[var(--ui-input-select-global-required-color)]",
+          children: "*"
+        }
+      )
+    ]
+  }
+));
+L.displayName = "InputSelectLabel";
+const P = a.forwardRef(({ className: t, children: e, ...r }, i) => /* @__PURE__ */ m(
+  c.Trigger,
+  {
+    ref: i,
+    className: s(
+      "group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-select-global-value-color-idle)] outline-none transition-colors",
+      "not-data-[disabled]:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]",
+      "focus-visible:border-[var(--ui-input-select-normal-box-border-color-hover)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]",
+      "data-[popup-open]:border-[var(--ui-input-select-normal-box-border-color-hover)] data-[popup-open]:ring-[3px] data-[popup-open]:ring-[var(--ui-focus-primary)]",
+      "data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-select-normal-box-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-select-global-box-color-disabled)] data-[disabled]:text-[var(--ui-input-select-global-value-color-disabled)]",
+      // Error treatment (driven by `aria-invalid`).
+      "aria-invalid:border-[var(--ui-input-select-error-box-border-color-idle)] not-data-[disabled]:aria-invalid:hover:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:ring-[var(--ui-focus-error)] aria-invalid:data-[popup-open]:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:data-[popup-open]:ring-[var(--ui-focus-error)]",
+      t
+    ),
+    ...r,
+    children: [
+      e,
+      /* @__PURE__ */ o(c.Icon, { className: "flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] group-data-[disabled]:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]", children: /* @__PURE__ */ o(
+        f,
+        {
+          size: 16,
+          className: "transition-transform group-data-[popup-open]:rotate-180"
+        }
+      ) })
+    ]
+  }
+));
+P.displayName = "InputSelectTrigger";
+const G = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
+  c.Value,
+  {
+    ref: r,
+    className: s(
+      "min-w-0 flex-1 truncate text-start text-[var(--ui-input-select-global-value-color-idle)] data-[placeholder]:text-[var(--ui-input-select-global-placeholder-color-idle)]",
+      "group-data-[disabled]:!text-[var(--ui-input-select-global-value-color-disabled)] group-data-[disabled]:data-[placeholder]:!text-[var(--ui-input-select-global-placeholder-color-disabled)]",
+      t
+    ),
+    ...e
+  }
+));
+G.displayName = "InputSelectValue";
+const j = a.forwardRef(
+  ({
+    className: t,
+    children: e,
+    sideOffset: r = 4,
+    align: i = "start",
+    side: l = "bottom",
+    portalContainer: d,
+    ...n
+  }, u) => {
+    const b = z(), p = d ?? b;
+    return /* @__PURE__ */ o(c.Portal, { container: p, children: /* @__PURE__ */ o(
+      c.Positioner,
+      {
+        sideOffset: r,
+        align: i,
+        side: l,
+        alignItemWithTrigger: !1,
+        className: "z-50 outline-none",
+        children: /* @__PURE__ */ o(
+          c.Popup,
+          {
+            ref: u,
+            className: s(
+              "max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none",
+              t
+            ),
+            ...n,
+            children: e
+          }
+        )
+      }
+    ) });
+  }
+);
+j.displayName = "InputSelectContent";
+const q = a.forwardRef(({ className: t, value: e, onChange: r, onKeyDown: i, ...l }, d) => {
+  const n = a.useContext(g), u = n == null ? void 0 : n.setQuery, b = e !== void 0;
+  return a.useEffect(() => {
+    b && (u == null || u(String(e ?? "")));
+  }, [b, e, u]), /* @__PURE__ */ m("div", { className: "flex items-center gap-[var(--ui-input-select-dropdown-dropdown-search-gap)] px-[var(--ui-input-select-dropdown-dropdown-search-padding-x)] py-[var(--ui-input-select-dropdown-dropdown-search-padding-y)]", children: [
+    /* @__PURE__ */ o(
+      k,
+      {
+        size: 16,
+        className: "shrink-0 text-[var(--ui-glyph-on-surface-primary)]"
+      }
+    ),
+    /* @__PURE__ */ o(
+      "input",
+      {
+        ref: d,
+        type: "search",
+        value: e ?? (n == null ? void 0 : n.query) ?? "",
+        onChange: (p) => {
+          r == null || r(p), b || n == null || n.setQuery(p.currentTarget.value);
+        },
+        onKeyDown: (p) => {
+          i == null || i(p), p.key.length === 1 && p.stopPropagation();
+        },
+        className: s(
+          "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm leading-6 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-value)] outline-none placeholder:text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)] [&::-webkit-search-cancel-button]:appearance-none",
+          t
+        ),
+        ...l
+      }
+    )
+  ] });
+});
+q.displayName = "InputSelectSearch";
+const F = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
+  c.Group,
+  {
+    ref: r,
+    className: s(
+      "flex flex-col border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] py-[var(--ui-input-select-dropdown-section-container-padding-y)] first:border-t-0",
+      t
+    ),
+    ...e
+  }
+));
+F.displayName = "InputSelectSection";
+const W = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
+  c.GroupLabel,
+  {
+    ref: r,
+    className: s(
+      "px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]",
+      t
+    ),
+    ...e
+  }
+));
+W.displayName = "InputSelectSectionLabel";
+const y = 16, M = 24;
+function I(t) {
+  return y + (t - 1) * M;
+}
+const V = a.forwardRef(({ className: t, children: e, icon: r, indent: i, textValue: l, hidden: d, ...n }, u) => {
+  const b = a.useContext(w), p = a.useContext(g), v = (p == null ? void 0 : p.query.trim().toLowerCase()) ?? "", x = l ?? (typeof e == "string" ? e : void 0), S = v.length > 0 && x !== void 0 && !x.toLowerCase().includes(v);
+  return /* @__PURE__ */ m(
+    c.Item,
+    {
+      ref: u,
+      hidden: d ?? S,
+      className: s(
+        "group/item relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none",
+        "bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]",
+        // Single-select rows tint when selected; multiple-select rows keep the
+        // unselected background (the leading checkbox carries the state).
+        !b && "data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]",
+        "data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]",
+        t
+      ),
+      ...n,
+      children: [
+        b && /* @__PURE__ */ o(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "flex size-[var(--ui-checkbox-global-box-size)] shrink-0 items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border-[length:var(--ui-checkbox-global-box-border-width)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)] bg-[var(--ui-checkbox-unchecked-box-color-idle)] text-transparent group-data-[selected]/item:border-[var(--ui-checkbox-checked-box-border-color-idle)] group-data-[selected]/item:bg-[var(--ui-checkbox-checked-box-color-idle)] group-data-[selected]/item:text-[var(--ui-checkbox-checked-icon-color-idle)]",
+            children: /* @__PURE__ */ o(h, { size: 16 })
+          }
+        ),
+        typeof i == "number" && i > 0 && /* @__PURE__ */ o(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "size-4 shrink-0",
+            style: { minWidth: I(i) }
+          }
+        ),
+        r && /* @__PURE__ */ o("span", { className: "flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]", children: r }),
+        /* @__PURE__ */ o(c.ItemText, { className: "min-w-0 flex-1 truncate", children: e }),
+        !b && /* @__PURE__ */ o(c.ItemIndicator, { className: "flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-checked)]", children: /* @__PURE__ */ o(h, { size: 16 }) })
+      ]
+    }
+  );
+});
+V.displayName = "InputSelectItem";
+const B = a.forwardRef(({ className: t, children: e, expanded: r, onToggle: i, icon: l, indent: d, ...n }, u) => /* @__PURE__ */ m(
+  "button",
+  {
+    ref: u,
+    type: "button",
+    onClick: i,
+    "aria-expanded": r,
+    className: s(
+      "group/item relative flex w-full cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-start leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none",
+      "bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] hover:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]",
+      t
+    ),
+    ...n,
+    children: [
+      /* @__PURE__ */ o(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "flex shrink-0 items-center justify-end text-[var(--ui-input-select-dropdown-item-global-icon-collapse)]",
+          style: {
+            minWidth: typeof d == "number" && d > 0 ? I(d) : y
+          },
+          children: r ? /* @__PURE__ */ o(f, { size: 16 }) : /* @__PURE__ */ o(N, { size: 16 })
+        }
+      ),
+      l && /* @__PURE__ */ o("span", { className: "flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]", children: l }),
+      /* @__PURE__ */ o("span", { className: "min-w-0 flex-1 truncate", children: e })
+    ]
+  }
+));
+B.displayName = "InputSelectExpander";
+const Q = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
+  "p",
+  {
+    ref: r,
+    className: s(
+      "text-xs leading-4 text-[var(--ui-input-select-normal-description-color-idle)]",
+      t
+    ),
+    ...e
+  }
+));
+Q.displayName = "InputSelectDescription";
+const _ = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
+  "p",
+  {
+    ref: r,
+    className: s(
+      "text-xs leading-4 text-[var(--ui-input-select-error-error-msg-color)]",
+      t
+    ),
+    ...e
+  }
+));
+_.displayName = "InputSelectError";
+const A = a.forwardRef(
+  ({ className: t, variant: e, children: r, action: i, ...l }, d) => /* @__PURE__ */ m(
+    "div",
+    {
+      ref: d,
+      className: s(
+        "flex min-h-[var(--ui-input-select-dropdown-container-status-width-min)] flex-col items-center justify-center gap-[var(--ui-input-select-dropdown-container-status-gap)] border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] px-[var(--ui-input-select-dropdown-container-status-padding-x)] py-[var(--ui-input-select-dropdown-container-status-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)]",
+        t
+      ),
+      ...l,
+      children: [
+        e === "loading" && /* @__PURE__ */ o(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "size-6 animate-spin rounded-full border-2 border-[var(--ui-glyph-on-surface-primary)] border-t-transparent"
+          }
+        ),
+        e === "empty" && /* @__PURE__ */ o(C, { size: 24, className: "text-[var(--ui-glyph-on-status-info)]" }),
+        e === "error" && /* @__PURE__ */ o(R, { size: 24, className: "text-[var(--ui-glyph-on-status-warning)]" }),
+        r,
+        e === "error" && i
+      ]
+    }
+  )
+);
+A.displayName = "InputSelectStatus";
+export {
+  E as InputSelect,
+  j as InputSelectContent,
+  Q as InputSelectDescription,
+  _ as InputSelectError,
+  B as InputSelectExpander,
+  T as InputSelectField,
+  Y as InputSelectGroup,
+  V as InputSelectItem,
+  L as InputSelectLabel,
+  q as InputSelectSearch,
+  F as InputSelectSection,
+  W as InputSelectSectionLabel,
+  A as InputSelectStatus,
+  P as InputSelectTrigger,
+  G as InputSelectValue,
+  X as useInputSelectFilter
+};
+//# sourceMappingURL=input-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-select.js","sources":["../../../../src/components/ui/input-select/input-select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Select as SelectPrimitive } from '@base-ui/react/select';\nimport {\n  CheckIcon,\n  ChevronDownIcon,\n  ChevronRightIcon,\n  CircleWarningIcon,\n  InboxIcon,\n  MagnifierIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// The next-gen select, themed by the dedicated `--ui-input-select-*` tier (global /\n// normal / error / dropdown). It composes Base UI `Select` and adds the field\n// furniture (label, required, description, error) and the dropdown machinery\n// (in-dropdown search, sections/groups, single + multiple items, loading/empty/error\n// status). The trigger box wires each state to its own token — idle / hover / open\n// (`data-popup-open`) + focus ring / disabled — and switches to the error border +\n// `--ui-focus-error` ring when `aria-invalid` is set. Selection mode (single vs\n// multiple) flows from the `multiple` prop on the root via `InputSelectModeContext`:\n// single items toggle the row background and show a trailing check; multiple items\n// keep the row background and show a leading checkbox.\n\nconst InputSelectModeContext = React.createContext(false);\n\ninterface InputSelectFilterContextValue {\n  /** Current in-dropdown search query. */\n  query: string;\n  /** Update the search query. */\n  setQuery: (query: string) => void;\n}\n\nconst InputSelectFilterContext =\n  React.createContext<InputSelectFilterContextValue | null>(null);\n\n/**\n * Read the live in-dropdown search query (and its setter) from the nearest\n * `InputSelect`. Flat item lists filter themselves; use this for hierarchical\n * (tree) dropdowns that need to compute their own visibility.\n */\nfunction useInputSelectFilter(): InputSelectFilterContextValue {\n  const context = React.useContext(InputSelectFilterContext);\n  if (!context) {\n    throw new Error('useInputSelectFilter must be used within <InputSelect>.');\n  }\n  return context;\n}\n\nfunction InputSelect<Value, Multiple extends boolean | undefined = false>(\n  props: SelectPrimitive.Root.Props<Value, Multiple>\n) {\n  const { onOpenChange } = props;\n  const [query, setQuery] = React.useState('');\n  const filter = React.useMemo(() => ({ query, setQuery }), [query]);\n\n  // Reset the query when the popup closes so it reopens unfiltered.\n  const handleOpenChange = React.useCallback<\n    NonNullable<SelectPrimitive.Root.Props<Value, Multiple>['onOpenChange']>\n  >(\n    (open, eventDetails) => {\n      onOpenChange?.(open, eventDetails);\n      if (!open) {\n        setQuery('');\n      }\n    },\n    [onOpenChange]\n  );\n\n  return (\n    <InputSelectModeContext.Provider value={Boolean(props.multiple)}>\n      <InputSelectFilterContext.Provider value={filter}>\n        <SelectPrimitive.Root {...props} onOpenChange={handleOpenChange} />\n      </InputSelectFilterContext.Provider>\n    </InputSelectModeContext.Provider>\n  );\n}\nInputSelect.displayName = 'InputSelect';\n\nconst InputSelectGroup = SelectPrimitive.Group;\n\n/** Vertical field stack: label, trigger, description/error. */\nconst InputSelectField = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex w-full min-w-[var(--ui-input-select-global-container-width-min)] flex-col gap-[var(--ui-input-select-global-container-gap)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectField.displayName = 'InputSelectField';\n\nconst InputSelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {\n    /** Appends a required `*` after the label text. */\n    required?: boolean;\n  }\n>(({ className, children, required, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\n      'flex gap-[var(--ui-input-select-global-container-label-gap)] text-sm leading-4 text-[var(--ui-input-select-global-label-color-idle)] data-[disabled]:text-[var(--ui-input-select-global-label-color-disabled)]',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    {required && (\n      <span\n        aria-hidden=\"true\"\n        className=\"text-[var(--ui-input-select-global-required-color)]\"\n      >\n        *\n      </span>\n    )}\n  </SelectPrimitive.Label>\n));\nInputSelectLabel.displayName = 'InputSelectLabel';\n\nconst InputSelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      'group flex h-[var(--ui-input-select-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-select-global-box-gap)] rounded-[var(--ui-input-select-global-box-border-radius)] border bg-[var(--ui-input-select-global-box-color-idle)] border-[var(--ui-input-select-normal-box-border-color-idle)] px-[var(--ui-input-select-global-box-padding-x)] text-sm leading-6 text-[var(--ui-input-select-global-value-color-idle)] outline-none transition-colors',\n      'not-data-[disabled]:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-data-[disabled]:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]',\n      'focus-visible:border-[var(--ui-input-select-normal-box-border-color-hover)] focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n      'data-[popup-open]:border-[var(--ui-input-select-normal-box-border-color-hover)] data-[popup-open]:ring-[3px] data-[popup-open]:ring-[var(--ui-focus-primary)]',\n      'data-[disabled]:cursor-not-allowed data-[disabled]:border-[var(--ui-input-select-normal-box-border-color-disabled)] data-[disabled]:bg-[var(--ui-input-select-global-box-color-disabled)] data-[disabled]:text-[var(--ui-input-select-global-value-color-disabled)]',\n      // Error treatment (driven by `aria-invalid`).\n      'aria-invalid:border-[var(--ui-input-select-error-box-border-color-idle)] not-data-[disabled]:aria-invalid:hover:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:focus-visible:ring-[var(--ui-focus-error)] aria-invalid:data-[popup-open]:border-[var(--ui-input-select-error-box-border-color-hover)] aria-invalid:data-[popup-open]:ring-[var(--ui-focus-error)]',\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon className=\"flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] group-data-[disabled]:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]\">\n      <ChevronDownIcon\n        size={16}\n        className=\"transition-transform group-data-[popup-open]:rotate-180\"\n      />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n));\nInputSelectTrigger.displayName = 'InputSelectTrigger';\n\nconst InputSelectValue = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Value>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Value\n    ref={ref}\n    className={cn(\n      'min-w-0 flex-1 truncate text-start text-[var(--ui-input-select-global-value-color-idle)] data-[placeholder]:text-[var(--ui-input-select-global-placeholder-color-idle)]',\n      'group-data-[disabled]:!text-[var(--ui-input-select-global-value-color-disabled)] group-data-[disabled]:data-[placeholder]:!text-[var(--ui-input-select-global-placeholder-color-disabled)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectValue.displayName = 'InputSelectValue';\n\nconst InputSelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Popup> & {\n    sideOffset?: number;\n    align?: SelectPrimitive.Positioner.Props['align'];\n    side?: SelectPrimitive.Positioner.Props['side'];\n    /**\n     * Container to portal the dropdown into. Defaults to the document body;\n     * pass an element to scope the portal (e.g. a shadow root, so the popup\n     * inherits styles defined there).\n     */\n    portalContainer?: SelectPrimitive.Portal.Props['container'];\n  }\n>(\n  (\n    {\n      className,\n      children,\n      sideOffset = 4,\n      align = 'start',\n      side = 'bottom',\n      portalContainer,\n      ...props\n    },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    return (\n    <SelectPrimitive.Portal container={resolvedContainer}>\n      <SelectPrimitive.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n        alignItemWithTrigger={false}\n        className=\"z-50 outline-none\"\n      >\n        <SelectPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-y-auto rounded-[var(--ui-input-select-dropdown-container-border-radius)] border border-[var(--ui-input-select-dropdown-container-border-color)] bg-[var(--ui-input-select-dropdown-container-color)] py-[var(--ui-input-select-dropdown-container-padding-y)] text-sm shadow-md outline-none',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n    );\n  }\n);\nInputSelectContent.displayName = 'InputSelectContent';\n\n/**\n * In-dropdown search row (magnifier + input). By default it drives the\n * `InputSelect` filter context — flat `InputSelectItem`s filter themselves, and\n * tree dropdowns read the query via `useInputSelectFilter`. Pass `value`/`onChange`\n * to control the query externally.\n */\nconst InputSelectSearch = React.forwardRef<\n  HTMLInputElement,\n  React.ComponentPropsWithoutRef<'input'>\n>(({ className, value, onChange, onKeyDown, ...props }, ref) => {\n  const filter = React.useContext(InputSelectFilterContext);\n  const setQuery = filter?.setQuery;\n  const controlled = value !== undefined;\n\n  // When the query is controlled externally, the consumer's `value` is the\n  // source of truth for what's displayed, so keep the internal filter context\n  // (what flat items match against) synced to it. A prop-driven value change —\n  // a \"clear\" button resetting to '', a debounced/transformed value — doesn't\n  // fire `onChange`, so driving the filter off raw DOM events alone would leave\n  // `filter.query` stale and hide every item against a query the box no longer\n  // shows. `setQuery` is a stable state setter, so this runs only when `value`\n  // changes.\n  React.useEffect(() => {\n    if (controlled) {\n      setQuery?.(String(value ?? ''));\n    }\n  }, [controlled, value, setQuery]);\n\n  return (\n    <div className=\"flex items-center gap-[var(--ui-input-select-dropdown-dropdown-search-gap)] px-[var(--ui-input-select-dropdown-dropdown-search-padding-x)] py-[var(--ui-input-select-dropdown-dropdown-search-padding-y)]\">\n      <MagnifierIcon\n        size={16}\n        className=\"shrink-0 text-[var(--ui-glyph-on-surface-primary)]\"\n      />\n      <input\n        ref={ref}\n        type=\"search\"\n        value={value ?? filter?.query ?? ''}\n        onChange={(event) => {\n          onChange?.(event);\n          // Uncontrolled: the input's value *is* the filter query, so write it\n          // straight through. Controlled: the effect above syncs the filter to\n          // the consumer's `value` once it re-renders, avoiding a flash of raw\n          // typed text when the consumer debounces or transforms the value.\n          if (!controlled) {\n            filter?.setQuery(event.currentTarget.value);\n          }\n        }}\n        // Base UI Select's typeahead would consume printable keys before they\n        // reach this input, so stop those from bubbling — but let navigation and\n        // selection keys (Arrow*/Home/End/Enter/Escape, all multi-char `key`\n        // names) through so the user can move from the search box into the\n        // filtered list and pick a result with the keyboard.\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (event.key.length === 1) {\n            event.stopPropagation();\n          }\n        }}\n        className={cn(\n          'min-w-0 flex-1 border-0 bg-transparent p-0 text-sm leading-6 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-value)] outline-none placeholder:text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)] [&::-webkit-search-cancel-button]:appearance-none',\n          className\n        )}\n        {...props}\n      />\n    </div>\n  );\n});\nInputSelectSearch.displayName = 'InputSelectSearch';\n\n/** A section (group) of items with an optional header. Divided by a top border. */\nconst InputSelectSection = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Group\n    ref={ref}\n    className={cn(\n      'flex flex-col border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] py-[var(--ui-input-select-dropdown-section-container-padding-y)] first:border-t-0',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectSection.displayName = 'InputSelectSection';\n\nconst InputSelectSectionLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.GroupLabel\n    ref={ref}\n    className={cn(\n      'px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectSectionLabel.displayName = 'InputSelectSectionLabel';\n\n/**\n * Width (px) of the leading nesting spacer for a 1-based tree `indent` level, per\n * the Figma \"InputSelectDropdownTenants\" spec: level 1 reserves 16 px (enough for a\n * single chevron) and each deeper level adds 24 px — 16 / 40 / 64 for levels 1–3.\n * The tenant icon therefore starts at the same x-position whether or not the row is\n * expandable, because the chevron lives right-aligned inside this reserved space.\n */\nconst NESTING_BASE = 16;\nconst NESTING_STEP = 24;\nfunction nestingWidth(indent: number): number {\n  return NESTING_BASE + (indent - 1) * NESTING_STEP;\n}\n\nexport interface InputSelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {\n  /** Optional leading icon rendered before the label text. Colored by `--ui-input-select-dropdown-item-global-icon-tenant`. */\n  icon?: React.ReactNode;\n  /** 1-based nesting level (0 / omitted = no indent). Levels 1–3 reserve 16 / 40 / 64 px. */\n  indent?: number;\n  /**\n   * Text used to match the in-dropdown search query. Defaults to the string\n   * `children`. When a query is active and this text doesn't match, the row hides\n   * itself — unless `hidden` is passed explicitly (tree dropdowns compute their own\n   * visibility). Rows stay mounted while hidden to keep Base UI's selection index\n   * stable.\n   */\n  textValue?: string;\n}\n\nconst InputSelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  InputSelectItemProps\n>(({ className, children, icon, indent, textValue, hidden, ...props }, ref) => {\n  const multiple = React.useContext(InputSelectModeContext);\n  const filter = React.useContext(InputSelectFilterContext);\n  const query = filter?.query.trim().toLowerCase() ?? '';\n  const label = textValue ?? (typeof children === 'string' ? children : undefined);\n  const autoHidden =\n    query.length > 0 && label !== undefined && !label.toLowerCase().includes(query);\n  return (\n    <SelectPrimitive.Item\n      ref={ref}\n      hidden={hidden ?? autoHidden}\n      className={cn(\n        'group/item relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n        'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n        // Single-select rows tint when selected; multiple-select rows keep the\n        // unselected background (the leading checkbox carries the state).\n        !multiple &&\n          'data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]',\n        'data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]',\n        className\n      )}\n      {...props}\n    >\n      {multiple && (\n        <span\n          aria-hidden=\"true\"\n          className=\"flex size-[var(--ui-checkbox-global-box-size)] shrink-0 items-center justify-center rounded-[var(--ui-checkbox-global-box-border-radius)] border-[length:var(--ui-checkbox-global-box-border-width)] border-[var(--ui-checkbox-unchecked-box-border-color-idle)] bg-[var(--ui-checkbox-unchecked-box-color-idle)] text-transparent group-data-[selected]/item:border-[var(--ui-checkbox-checked-box-border-color-idle)] group-data-[selected]/item:bg-[var(--ui-checkbox-checked-box-color-idle)] group-data-[selected]/item:text-[var(--ui-checkbox-checked-icon-color-idle)]\"\n        >\n          <CheckIcon size={16} />\n        </span>\n      )}\n      {typeof indent === 'number' && indent > 0 && (\n        <span\n          aria-hidden=\"true\"\n          className=\"size-4 shrink-0\"\n          style={{ minWidth: nestingWidth(indent) }}\n        />\n      )}\n      {icon && (\n        <span className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]\">\n          {icon}\n        </span>\n      )}\n      <SelectPrimitive.ItemText className=\"min-w-0 flex-1 truncate\">\n        {children}\n      </SelectPrimitive.ItemText>\n      {!multiple && (\n        <SelectPrimitive.ItemIndicator className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-checked)]\">\n          <CheckIcon size={16} />\n        </SelectPrimitive.ItemIndicator>\n      )}\n    </SelectPrimitive.Item>\n  );\n});\nInputSelectItem.displayName = 'InputSelectItem';\n\nexport interface InputSelectExpanderProps\n  extends React.ComponentPropsWithoutRef<'button'> {\n  /** Whether the group is currently expanded. */\n  expanded: boolean;\n  /** Called when the user clicks the row to toggle expand/collapse. */\n  onToggle: () => void;\n  /** Optional leading icon rendered after the chevron. */\n  icon?: React.ReactNode;\n  /** 1-based nesting level (0 / omitted = level 1). Levels 1–3 reserve 16 / 40 / 64 px; the chevron sits right-aligned inside. */\n  indent?: number;\n}\n\n/**\n * A non-selectable row that acts as an expand/collapse toggle for a tree group.\n * Visually identical to `InputSelectItem` but is **not** a `SelectPrimitive.Item`,\n * so clicking it won't set the select value.\n *\n * When collapsing a group, keep its child `InputSelectItem`s mounted and toggle\n * their `hidden` prop rather than unmounting them: Base UI's Select tracks the\n * selection by list index, so removing the selected row from the DOM makes a\n * sibling inherit its index and render a phantom check. `hidden` rows keep the\n * indices stable and are skipped by keyboard navigation.\n */\nconst InputSelectExpander = React.forwardRef<\n  HTMLButtonElement,\n  InputSelectExpanderProps\n>(({ className, children, expanded, onToggle, icon, indent, ...props }, ref) => (\n  <button\n    ref={ref}\n    type=\"button\"\n    onClick={onToggle}\n    aria-expanded={expanded}\n    className={cn(\n      'group/item relative flex w-full cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-start leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none',\n      'bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] hover:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]',\n      className\n    )}\n    {...props}\n  >\n    <span\n      aria-hidden=\"true\"\n      className=\"flex shrink-0 items-center justify-end text-[var(--ui-input-select-dropdown-item-global-icon-collapse)]\"\n      style={{\n        minWidth:\n          typeof indent === 'number' && indent > 0 ? nestingWidth(indent) : NESTING_BASE,\n      }}\n    >\n      {expanded ? <ChevronDownIcon size={16} /> : <ChevronRightIcon size={16} />}\n    </span>\n    {icon && (\n      <span className=\"flex shrink-0 items-center text-[var(--ui-input-select-dropdown-item-global-icon-tenant)]\">\n        {icon}\n      </span>\n    )}\n    <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n  </button>\n));\nInputSelectExpander.displayName = 'InputSelectExpander';\n\nconst InputSelectDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      'text-xs leading-4 text-[var(--ui-input-select-normal-description-color-idle)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectDescription.displayName = 'InputSelectDescription';\n\nconst InputSelectError = React.forwardRef<\n  HTMLParagraphElement,\n  React.ComponentPropsWithoutRef<'p'>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      'text-xs leading-4 text-[var(--ui-input-select-error-error-msg-color)]',\n      className\n    )}\n    {...props}\n  />\n));\nInputSelectError.displayName = 'InputSelectError';\n\nexport interface InputSelectStatusProps\n  extends React.ComponentPropsWithoutRef<'div'> {\n  /** Which status to show. Drives the leading icon. */\n  variant: 'loading' | 'empty' | 'error';\n  /** Optional trailing action (e.g. a \"Try again\" button) — shown for `error`. */\n  action?: React.ReactNode;\n}\n\n/** Loading / empty / error status row shown instead of items inside the dropdown. */\nconst InputSelectStatus = React.forwardRef<HTMLDivElement, InputSelectStatusProps>(\n  ({ className, variant, children, action, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex min-h-[var(--ui-input-select-dropdown-container-status-width-min)] flex-col items-center justify-center gap-[var(--ui-input-select-dropdown-container-status-gap)] border-t border-[var(--ui-input-select-dropdown-section-container-border-color)] px-[var(--ui-input-select-dropdown-container-status-padding-x)] py-[var(--ui-input-select-dropdown-container-status-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)]',\n        className\n      )}\n      {...props}\n    >\n      {variant === 'loading' && (\n        <span\n          aria-hidden=\"true\"\n          className=\"size-6 animate-spin rounded-full border-2 border-[var(--ui-glyph-on-surface-primary)] border-t-transparent\"\n        />\n      )}\n      {variant === 'empty' && <InboxIcon size={24} className=\"text-[var(--ui-glyph-on-status-info)]\" />}\n      {variant === 'error' && <CircleWarningIcon size={24} className=\"text-[var(--ui-glyph-on-status-warning)]\" />}\n      {children}\n      {variant === 'error' && action}\n    </div>\n  )\n);\nInputSelectStatus.displayName = 'InputSelectStatus';\n\nexport {\n  InputSelect,\n  InputSelectField,\n  InputSelectLabel,\n  InputSelectTrigger,\n  InputSelectValue,\n  InputSelectContent,\n  InputSelectSearch,\n  InputSelectGroup,\n  InputSelectSection,\n  InputSelectSectionLabel,\n  InputSelectItem,\n  InputSelectExpander,\n  InputSelectDescription,\n  InputSelectError,\n  InputSelectStatus,\n  useInputSelectFilter,\n};\n"],"names":["InputSelectModeContext","React","InputSelectFilterContext","useInputSelectFilter","context","InputSelect","props","onOpenChange","query","setQuery","filter","handleOpenChange","open","eventDetails","jsx","SelectPrimitive","InputSelectGroup","InputSelectField","className","ref","cn","InputSelectLabel","children","required","jsxs","InputSelectTrigger","ChevronDownIcon","InputSelectValue","InputSelectContent","sideOffset","align","side","portalContainer","ctxContainer","usePortalContainer","resolvedContainer","InputSelectSearch","value","onChange","onKeyDown","controlled","MagnifierIcon","event","InputSelectSection","InputSelectSectionLabel","NESTING_BASE","NESTING_STEP","nestingWidth","indent","InputSelectItem","icon","textValue","hidden","multiple","label","autoHidden","CheckIcon","InputSelectExpander","expanded","onToggle","ChevronRightIcon","InputSelectDescription","InputSelectError","InputSelectStatus","variant","action","InboxIcon","CircleWarningIcon"],"mappings":"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"}

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

@@ -0,0 +1,87 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import * as m from "react";
+import { TimesIcon as j } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as c } from "../../../lib/utils.js";
+import { InputBox as C } from "../input/input.js";
+const T = m.forwardRef(
+  ({
+    className: g,
+    id: b,
+    label: i,
+    required: u,
+    description: v,
+    error: a,
+    clearable: f,
+    onClear: h,
+    disabled: e,
+    value: o,
+    ...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 !== "";
+    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,
+          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)]"
+          ),
+          children: [
+            i,
+            u && /* @__PURE__ */ t(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "text-[var(--ui-input-text-global-required-color)]",
+                children: "*"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ s("div", { className: "relative", children: [
+        /* @__PURE__ */ t(
+          C,
+          {
+            ref: N,
+            id: l,
+            disabled: e,
+            value: o,
+            "aria-invalid": r || void 0,
+            "aria-required": u || void 0,
+            "aria-describedby": x ? d : void 0,
+            className: c(p && "pe-9", g),
+            ...I
+          }
+        ),
+        p && /* @__PURE__ */ t(
+          "button",
+          {
+            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",
+            children: /* @__PURE__ */ t(j, {})
+          }
+        )
+      ] }),
+      x && /* @__PURE__ */ t(
+        "p",
+        {
+          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)]"
+          ),
+          children: n
+        }
+      )
+    ] });
+  }
+);
+T.displayName = "InputText";
+export {
+  T as InputText
+};
+//# sourceMappingURL=input-text.js.map

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

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

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

@@ -0,0 +1,77 @@
+import { jsxs as x, jsx as l } from "react/jsx-runtime";
+import * as c from "react";
+import { cn as n } from "../../../lib/utils.js";
+const y = c.forwardRef(
+  ({
+    className: v,
+    id: p,
+    label: e,
+    required: d,
+    description: b,
+    error: r,
+    disabled: a,
+    "aria-invalid": h,
+    ...m
+  }, g) => {
+    const f = c.useId(), i = p ?? f, u = `${i}-message`, t = r != null && r !== "", w = t || h, o = t ? r : b, s = o != null && o !== "";
+    return /* @__PURE__ */ x("div", { className: "flex w-full min-w-[var(--ui-input-text-area-container-width-min)] flex-col gap-[var(--ui-input-text-area-container-gap)]", children: [
+      e != null && e !== "" && /* @__PURE__ */ x(
+        "label",
+        {
+          htmlFor: i,
+          className: n(
+            "flex gap-[var(--ui-input-text-area-container-label-gap)] text-sm leading-4",
+            a ? "text-[var(--ui-input-text-area-label-color-disabled)]" : "text-[var(--ui-input-text-area-label-color-idle)]"
+          ),
+          children: [
+            e,
+            d && /* @__PURE__ */ l(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "text-[var(--ui-input-text-area-required-color)]",
+                children: "*"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ l(
+        "textarea",
+        {
+          ref: g,
+          id: i,
+          disabled: a,
+          "aria-invalid": w || void 0,
+          "aria-required": d || void 0,
+          "aria-describedby": s ? u : void 0,
+          className: n(
+            "min-h-[var(--ui-input-text-area-box-height-min)] w-full min-w-0 resize-y rounded-[var(--ui-input-text-area-box-border-radius)] border bg-[var(--ui-input-text-area-box-color-idle)] border-[var(--ui-input-text-area-border-color-idle)] px-[var(--ui-input-text-area-box-padding-x)] py-[var(--ui-input-text-area-box-padding-y)] text-sm leading-6 text-[var(--ui-input-text-area-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-area-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px]",
+            "enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-area-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-area-border-color-hover)] enabled:hover:text-[var(--ui-input-text-area-value-color-hover)] enabled:hover:placeholder:text-[var(--ui-input-text-area-placeholder-color-hover)]",
+            "not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-border-color-focus)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]",
+            "aria-[invalid=true]:border-[var(--ui-input-text-area-error-msg-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]",
+            "disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-area-border-color-disabled)] disabled:bg-[var(--ui-input-text-area-box-color-disabled)] disabled:text-[var(--ui-input-text-area-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-area-placeholder-color-disabled)]",
+            v
+          ),
+          ...m
+        }
+      ),
+      s && /* @__PURE__ */ l(
+        "p",
+        {
+          id: u,
+          className: n(
+            "text-xs leading-4",
+            t ? "text-[var(--ui-input-text-area-error-msg-error-color)]" : a ? "text-[var(--ui-input-text-area-description-color-disabled)]" : "text-[var(--ui-input-text-area-description-color-idle)]"
+          ),
+          children: o
+        }
+      )
+    ] });
+  }
+);
+y.displayName = "InputTextArea";
+export {
+  y as InputTextArea
+};
+//# sourceMappingURL=input-text-area.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-text-area.js","sources":["../../../../src/components/ui/input-text-area/input-text-area.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputTextArea\" component: a full multiline text field built\n// around a `<textarea>` (themed by the dedicated `--ui-input-text-area-*` tier). It\n// adds the field furniture: an optional `label` (with an optional required `*`) and\n// an optional `description` or `error` message below. Passing `error` switches the\n// field to its error treatment — the box gets the red error border (via the\n// textarea's `aria-invalid` styling) and the red error message replaces the\n// description. The box fill / border are wired per state: idle / hover / focus\n// (`border-color-focus` + a 3px `--ui-focus-primary` ring) / disabled; the error\n// state (driven by `aria-invalid`) swaps the border to\n// `error-msg-box-border-color-{idle,hover}` and the focus ring to `--ui-focus-error`.\n// Box geometry (96px min-height, 4px radius, 12px padding-x, 8px padding-y) comes\n// from `--ui-input-text-area-box-*`; it grows with vertical resize. `ref` and\n// `className` target the underlying `<textarea>`, so the bare usage\n// (`<InputTextArea placeholder=… />`, no label) renders just the box.\nexport interface InputTextAreaProps\n  extends Omit<React.ComponentPropsWithoutRef<'textarea'>, 'children'> {\n  /** Field label, rendered above the textarea. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the textarea. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /**\n   * Error message below the textarea. Its presence switches the field to the error\n   * treatment (red box border + red message).\n   */\n  error?: React.ReactNode;\n}\n\nconst InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextAreaProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      description,\n      error,\n      disabled,\n      'aria-invalid': ariaInvalid,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n\n    const hasError = error != null && error !== '';\n    const invalid = hasError || ariaInvalid;\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    return (\n      <div className=\"flex w-full min-w-[var(--ui-input-text-area-container-width-min)] flex-col gap-[var(--ui-input-text-area-container-gap)]\">\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-text-area-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-text-area-label-color-disabled)]'\n                : 'text-[var(--ui-input-text-area-label-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-text-area-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <textarea\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-describedby={hasMessage ? messageId : undefined}\n          className={cn(\n            'min-h-[var(--ui-input-text-area-box-height-min)] w-full min-w-0 resize-y rounded-[var(--ui-input-text-area-box-border-radius)] border bg-[var(--ui-input-text-area-box-color-idle)] border-[var(--ui-input-text-area-border-color-idle)] px-[var(--ui-input-text-area-box-padding-x)] py-[var(--ui-input-text-area-box-padding-y)] text-sm leading-6 text-[var(--ui-input-text-area-value-color-idle)] transition-colors placeholder:text-[var(--ui-input-text-area-placeholder-color-idle)] focus-visible:outline-none focus-visible:ring-[3px]',\n            'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-text-area-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-text-area-border-color-hover)] enabled:hover:text-[var(--ui-input-text-area-value-color-hover)] enabled:hover:placeholder:text-[var(--ui-input-text-area-placeholder-color-hover)]',\n            'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-border-color-focus)] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-[invalid=true]:border-[var(--ui-input-text-area-error-msg-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-text-area-error-msg-box-border-color-hover)] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n            'disabled:cursor-not-allowed disabled:border-[var(--ui-input-text-area-border-color-disabled)] disabled:bg-[var(--ui-input-text-area-box-color-disabled)] disabled:text-[var(--ui-input-text-area-value-color-disabled)] disabled:placeholder:text-[var(--ui-input-text-area-placeholder-color-disabled)]',\n            className\n          )}\n          {...props}\n        />\n\n        {hasMessage && (\n          <p\n            id={messageId}\n            className={cn(\n              'text-xs leading-4',\n              hasError\n                ? 'text-[var(--ui-input-text-area-error-msg-error-color)]'\n                : disabled\n                  ? 'text-[var(--ui-input-text-area-description-color-disabled)]'\n                  : 'text-[var(--ui-input-text-area-description-color-idle)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputTextArea.displayName = 'InputTextArea';\n\nexport { InputTextArea };\n"],"names":["InputTextArea","React","className","id","label","required","description","error","disabled","ariaInvalid","props","ref","reactId","inputId","messageId","hasError","invalid","message","hasMessage","jsxs","cn","jsx"],"mappings":";;;AAiCA,MAAMA,IAAgBC,EAAM;AAAA,EAC1B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAgBC;AAAA,IAChB,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUX,EAAM,MAAA,GAChBY,IAAUV,KAAMS,GAChBE,IAAY,GAAGD,CAAO,YAEtBE,IAAWR,KAAS,QAAQA,MAAU,IACtCS,IAAUD,KAAYN,GACtBQ,IAAUF,IAAWR,IAAQD,GAC7BY,IAAaD,KAAW,QAAQA,MAAY;AAElD,WACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,4HACZ,UAAA;AAAA,MAAAf,KAAS,QAAQA,MAAU,MAC1B,gBAAAe;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASN;AAAA,UACT,WAAWO;AAAA,YACT;AAAA,YACAZ,IACI,0DACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAJ;AAAA,YACAC,KACC,gBAAAgB;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,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAV;AAAA,UACA,IAAIE;AAAA,UACJ,UAAAL;AAAA,UACA,gBAAcQ,KAAW;AAAA,UACzB,iBAAeX,KAAY;AAAA,UAC3B,oBAAkBa,IAAaJ,IAAY;AAAA,UAC3C,WAAWM;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAlB;AAAA,UAAA;AAAA,UAED,GAAGQ;AAAA,QAAA;AAAA,MAAA;AAAA,MAGLQ,KACC,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIP;AAAA,UACJ,WAAWM;AAAA,YACT;AAAA,YACAL,IACI,2DACAP,IACE,gEACA;AAAA,UAAA;AAAA,UAGP,UAAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AACAjB,EAAc,cAAc;"}

package/dist/components/ui/label/label.js

@@ -0,0 +1,12 @@
+import { jsx as l } from "react/jsx-runtime";
+import * as r from "react";
+import { cn as s } from "../../../lib/utils.js";
+const m = "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", t = r.forwardRef(
+  ({ className: e, ...a }, o) => /* @__PURE__ */ l("label", { ref: o, className: s(m, e), ...a })
+);
+t.displayName = "Label";
+export {
+  t as Label,
+  m as labelClassName
+};
+//# sourceMappingURL=label.js.map

package/dist/components/ui/label/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sources":["../../../../src/components/ui/label/label.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `label`\n// (packages/ui-legacy/src/components/ui/label.tsx). A caption for a form\n// control — a plain `<label>`, no Base UI primitive. The text color is\n// inherited (`text-foreground` from context), so no `--ui-label-*` tier is\n// needed. `peer-disabled:*` dims the label when an associated `peer`-marked\n// control is disabled, mirroring the legacy behavior.\nconst labelClassName =\n  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70';\n\nexport type LabelProps = React.ComponentPropsWithoutRef<'label'>;\n\nconst Label = React.forwardRef<HTMLLabelElement, LabelProps>(\n  ({ className, ...props }, ref) => (\n    <label ref={ref} className={cn(labelClassName, className)} {...props} />\n  )\n);\nLabel.displayName = 'Label';\n\nexport { Label, labelClassName };\n"],"names":["labelClassName","Label","React","className","props","ref","jsx","cn"],"mappings":";;;AAUA,MAAMA,IACJ,8FAIIC,IAAQC,EAAM;AAAA,EAClB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC,EAAC,SAAA,EAAM,KAAAD,GAAU,WAAWE,EAAGP,GAAgBG,CAAS,GAAI,GAAGC,EAAA,CAAO;AAE1E;AACAH,EAAM,cAAc;"}