@acronis-platform/ui-react 0.54.0 → 0.55.0

package/dist/components/ui/input-date-picker/input-date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-date-picker.js","sources":["../../../../src/components/ui/input-date-picker/input-date-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CalendarIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputDatePicker\" component: the date-field **trigger** — a\n// button box that displays a formatted date `value` (or a `startDate – endDate`\n// range when `pickerType=\"dateRange\"`) and a trailing calendar icon, with the field\n// furniture (optional `label` + required `*`, optional `description` / `error`).\n// Themed by the `--ui-input-date-picker-*` tier. The box border is wired per state:\n// idle / hover / open (`open` → `-active`) / focus (`-active` + a 3px\n// `--ui-focus-primary` ring) / disabled; `error` (or `aria-invalid`) swaps the\n// border to `error-box-border-color-*` and the ring to `--ui-focus-error`.\n//\n// This is the trigger only — the calendar popup is NOT in the Figma design or the\n// token tier yet, so the consumer renders the date `value`/range as formatted\n// strings and wires their own calendar to `open` / `onClick`.\nexport interface InputDatePickerProps\n  extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value'> {\n  /** Field label, rendered above the box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the box. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /** Error message below the box. Its presence switches the field to the error treatment. */\n  error?: React.ReactNode;\n  /** Single date or a start–end range. */\n  pickerType?: 'date' | 'dateRange';\n  /** Hint shown when no value is selected. */\n  placeholder?: React.ReactNode;\n  /** Formatted selected date (`pickerType=\"date\"`). */\n  value?: React.ReactNode;\n  /** Formatted range start (`pickerType=\"dateRange\"`). */\n  startDate?: React.ReactNode;\n  /** Formatted range end (`pickerType=\"dateRange\"`). */\n  endDate?: React.ReactNode;\n  /** Separator between range dates. */\n  separator?: React.ReactNode;\n  /** Whether the (consumer-owned) calendar popup is open — paints the active border. */\n  open?: boolean;\n}\n\nconst InputDatePicker = React.forwardRef<HTMLButtonElement, InputDatePickerProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      description,\n      error,\n      pickerType = 'date',\n      placeholder,\n      value,\n      startDate,\n      endDate,\n      separator = '–',\n      open,\n      disabled,\n      'aria-invalid': ariaInvalid,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n\n    const hasError = error != null && error !== '';\n    const invalid = hasError || ariaInvalid;\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    const isRange = pickerType === 'dateRange';\n    const hasValue = isRange\n      ? (startDate != null && startDate !== '') ||\n        (endDate != null && endDate !== '')\n      : value != null && value !== '';\n\n    return (\n      <div className=\"flex w-full min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]\">\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-date-picker-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-date-picker-global-label-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-date-picker-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <button\n          ref={ref}\n          id={inputId}\n          type=\"button\"\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open || undefined}\n          aria-describedby={hasMessage ? messageId : undefined}\n          data-open={open || undefined}\n          className={cn(\n            'group flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-left text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors',\n            'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)]',\n            'not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)]',\n            'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n            'disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]',\n            className\n          )}\n          {...props}\n        >\n          {hasValue ? (\n            isRange ? (\n              <span className=\"flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate\">\n                <span>{startDate}</span>\n                <span className=\"text-[var(--ui-input-date-picker-global-separator-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-separator-color-disabled)]\">\n                  {separator}\n                </span>\n                <span>{endDate}</span>\n              </span>\n            ) : (\n              <span className=\"min-w-0 flex-1 truncate\">{value}</span>\n            )\n          ) : (\n            <span className=\"min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]\">\n              {placeholder}\n            </span>\n          )}\n          <CalendarIcon\n            size={16}\n            className=\"shrink-0 text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-disabled:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]:text-[var(--ui-input-date-picker-error-icon-color-idle)]\"\n          />\n        </button>\n\n        {hasMessage && (\n          <p\n            id={messageId}\n            className={cn(\n              'text-xs leading-4',\n              hasError\n                ? 'text-[var(--ui-input-date-picker-error-error-msg-color)]'\n                : disabled\n                  ? 'text-[var(--ui-input-date-picker-normal-description-color-disabled)]'\n                  : 'text-[var(--ui-input-date-picker-normal-description-color-idle)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputDatePicker.displayName = 'InputDatePicker';\n\nexport { InputDatePicker };\n"],"names":["InputDatePicker","React","className","id","label","required","description","error","pickerType","placeholder","value","startDate","endDate","separator","open","disabled","ariaInvalid","props","ref","reactId","inputId","messageId","hasError","invalid","message","hasMessage","isRange","hasValue","jsxs","cn","jsx","CalendarIcon"],"mappings":"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"}
+{"version":3,"file":"input-date-picker.js","sources":["../../../../src/components/ui/input-date-picker/input-date-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CalendarIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputDatePicker\" component: the date-field **trigger** — a\n// button box that displays a formatted date `value` (or a `startDate – endDate`\n// range when `pickerType=\"dateRange\"`) and a trailing calendar icon, with the field\n// furniture (optional `label` + required `*`, optional `description` / `error`).\n// Themed by the `--ui-input-date-picker-*` tier. The box border is wired per state:\n// idle / hover / open (`open` → `-active`) / focus (`-active` + a 3px\n// `--ui-focus-primary` ring) / disabled; `error` (or `aria-invalid`) swaps the\n// border to `error-box-border-color-*` and the ring to `--ui-focus-error`.\n//\n// This is the trigger only — the calendar popup is NOT in the Figma design or the\n// token tier yet, so the consumer renders the date `value`/range as formatted\n// strings and wires their own calendar to `open` / `onClick`.\nexport interface InputDatePickerProps\n  extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value'> {\n  /** Field label, rendered above the box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the box. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /** Error message below the box. Its presence switches the field to the error treatment. */\n  error?: React.ReactNode;\n  /** Single date or a start–end range. */\n  pickerType?: 'date' | 'dateRange';\n  /** Hint shown when no value is selected. */\n  placeholder?: React.ReactNode;\n  /** Formatted selected date (`pickerType=\"date\"`). */\n  value?: React.ReactNode;\n  /** Formatted range start (`pickerType=\"dateRange\"`). */\n  startDate?: React.ReactNode;\n  /** Formatted range end (`pickerType=\"dateRange\"`). */\n  endDate?: React.ReactNode;\n  /** Separator between range dates. */\n  separator?: React.ReactNode;\n  /** Whether the (consumer-owned) calendar popup is open — paints the active border. */\n  open?: boolean;\n}\n\nconst InputDatePicker = React.forwardRef<HTMLButtonElement, InputDatePickerProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      description,\n      error,\n      pickerType = 'date',\n      placeholder,\n      value,\n      startDate,\n      endDate,\n      separator = '–',\n      open,\n      disabled,\n      'aria-invalid': ariaInvalid,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n\n    const hasError = error != null && error !== '';\n    const invalid = hasError || ariaInvalid;\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    const isRange = pickerType === 'dateRange';\n    const hasValue = isRange\n      ? (startDate != null && startDate !== '') ||\n        (endDate != null && endDate !== '')\n      : value != null && value !== '';\n\n    return (\n      <div className=\"flex w-full min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]\">\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-date-picker-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-date-picker-global-label-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-date-picker-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <button\n          ref={ref}\n          id={inputId}\n          type=\"button\"\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open || undefined}\n          aria-describedby={hasMessage ? messageId : undefined}\n          data-open={open || undefined}\n          className={cn(\n            'group flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-start text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors',\n            'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)]',\n            'not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)]',\n            'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n            'disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]',\n            className\n          )}\n          {...props}\n        >\n          {hasValue ? (\n            isRange ? (\n              <span className=\"flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate\">\n                <span>{startDate}</span>\n                <span className=\"text-[var(--ui-input-date-picker-global-separator-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-separator-color-disabled)]\">\n                  {separator}\n                </span>\n                <span>{endDate}</span>\n              </span>\n            ) : (\n              <span className=\"min-w-0 flex-1 truncate\">{value}</span>\n            )\n          ) : (\n            <span className=\"min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]\">\n              {placeholder}\n            </span>\n          )}\n          <CalendarIcon\n            size={16}\n            className=\"shrink-0 text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-disabled:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]:text-[var(--ui-input-date-picker-error-icon-color-idle)]\"\n          />\n        </button>\n\n        {hasMessage && (\n          <p\n            id={messageId}\n            className={cn(\n              'text-xs leading-4',\n              hasError\n                ? 'text-[var(--ui-input-date-picker-error-error-msg-color)]'\n                : disabled\n                  ? 'text-[var(--ui-input-date-picker-normal-description-color-disabled)]'\n                  : 'text-[var(--ui-input-date-picker-normal-description-color-idle)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputDatePicker.displayName = 'InputDatePicker';\n\nexport { InputDatePicker };\n"],"names":["InputDatePicker","React","className","id","label","required","description","error","pickerType","placeholder","value","startDate","endDate","separator","open","disabled","ariaInvalid","props","ref","reactId","inputId","messageId","hasError","invalid","message","hasMessage","isRange","hasValue","jsxs","cn","jsx","CalendarIcon"],"mappings":";;;;AA2CA,MAAMA,IAAkBC,EAAM;AAAA,EAC5B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAgBC;AAAA,IAChB,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUlB,EAAM,MAAA,GAChBmB,IAAUjB,KAAMgB,GAChBE,IAAY,GAAGD,CAAO,YAEtBE,IAAWf,KAAS,QAAQA,MAAU,IACtCgB,IAAUD,KAAYN,GACtBQ,IAAUF,IAAWf,IAAQD,GAC7BmB,IAAaD,KAAW,QAAQA,MAAY,IAE5CE,IAAUlB,MAAe,aACzBmB,IAAWD,IACZf,KAAa,QAAQA,MAAc,MACnCC,KAAW,QAAQA,MAAY,KAChCF,KAAS,QAAQA,MAAU;AAE/B,WACE,gBAAAkB,EAAC,OAAA,EAAI,WAAU,8IACZ,UAAA;AAAA,MAAAxB,KAAS,QAAQA,MAAU,MAC1B,gBAAAwB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASR;AAAA,UACT,WAAWS;AAAA,YACT;AAAA,YACAd,IACI,mEACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAX;AAAA,YACAC,KACC,gBAAAyB;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;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAV;AAAA,UACA,IAAIE;AAAA,UACJ,MAAK;AAAA,UACL,UAAAL;AAAA,UACA,gBAAcQ,KAAW;AAAA,UACzB,iBAAelB,KAAY;AAAA,UAC3B,iBAAc;AAAA,UACd,iBAAeS,KAAQ;AAAA,UACvB,oBAAkBW,IAAaJ,IAAY;AAAA,UAC3C,aAAWP,KAAQ;AAAA,UACnB,WAAWe;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA3B;AAAA,UAAA;AAAA,UAED,GAAGe;AAAA,UAEH,UAAA;AAAA,YAAAU,IACCD,IACE,gBAAAE,EAAC,QAAA,EAAK,WAAU,oGACd,UAAA;AAAA,cAAA,gBAAAE,EAAC,UAAM,UAAAnB,EAAA,CAAU;AAAA,cACjB,gBAAAmB,EAAC,QAAA,EAAK,WAAU,oJACb,UAAAjB,GACH;AAAA,cACA,gBAAAiB,EAAC,UAAM,UAAAlB,EAAA,CAAQ;AAAA,YAAA,EAAA,CACjB,IAEA,gBAAAkB,EAAC,QAAA,EAAK,WAAU,2BAA2B,UAAApB,EAAA,CAAM,IAGnD,gBAAAoB,EAAC,QAAA,EAAK,WAAU,gLACb,UAAArB,GACH;AAAA,YAEF,gBAAAqB;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MAAA;AAAA,MAGDN,KACC,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIT;AAAA,UACJ,WAAWQ;AAAA,YACT;AAAA,YACAP,IACI,6DACAP,IACE,yEACA;AAAA,UAAA;AAAA,UAGP,UAAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AACAxB,EAAgB,cAAc;"}

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

@@ -1,24 +1,24 @@
 import { jsxs as c, jsx as l } from "react/jsx-runtime";
 import * as o from "react";
-import { cn as x } from "../../../lib/utils.js";
+import { cn as s } from "../../../lib/utils.js";
 import { SearchBox as f } from "../search/search.js";
 const v = o.forwardRef(
   ({
-    className: s,
-    id: u,
+    className: u,
+    id: p,
     label: a,
     required: r,
     disabled: e,
     "aria-label": i,
-    ...p
-  }, d) => {
-    const h = o.useId(), t = u ?? h, n = a != null && a !== "", m = n ? { "aria-label": void 0 } : i != null ? { "aria-label": i } : {};
-    return /* @__PURE__ */ c("div", { className: "flex w-full min-w-[var(--ui-input-search-container-width-min)] flex-col gap-[var(--ui-input-search-container-gap)]", children: [
+    ...d
+  }, h) => {
+    const m = o.useId(), t = p ?? m, n = a != null && a !== "", x = n ? { "aria-label": void 0 } : i != null ? { "aria-label": i } : {};
+    return /* @__PURE__ */ c("div", { className: s("flex w-full min-w-[var(--ui-input-search-container-width-min)] flex-col gap-[var(--ui-input-search-container-gap)]", u), children: [
       n && /* @__PURE__ */ c(
         "label",
         {
           htmlFor: t,
-          className: x(
+          className: s(
             "flex gap-[var(--ui-input-search-container-label-gap)] text-sm leading-4",
             e ? "text-[var(--ui-input-search-color-disabled)]" : "text-[var(--ui-input-search-color-idle)]"
           ),
@@ -38,13 +38,12 @@ const v = o.forwardRef(
       /* @__PURE__ */ l(
         f,
         {
-          ref: d,
+          ref: h,
           id: t,
           disabled: e,
           "aria-required": r || void 0,
-          className: s,
-          ...m,
-          ...p
+          ...x,
+          ...d
         }
       )
     ] });

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

@@ -1 +1 @@
-{"version":3,"file":"input-search.js","sources":["../../../../src/components/ui/input-search/input-search.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { SearchBox, type SearchBoxProps } from '../search';\n\n// Mirrors the Figma \"InputSearch\" component: a full search field built around the\n// bare `SearchBox` (themed by the `--ui-input-search-*` tier). It adds the field\n// furniture — an optional `label` above the box (with an optional `required` `*`).\n// Every other prop (placeholder, value, onClear, disabled, …) passes straight\n// through to `Search`. Label colors come from `--ui-input-search-color-{idle,disabled}`\n// and the required marker from `--ui-input-search-required-color`, so brand overrides\n// are honored. When a visible label is present it names the field via `htmlFor`/`id`,\n// and `Search`'s built-in `aria-label=\"Search\"` is cleared so it doesn't shadow the\n// visible label.\nexport interface InputSearchProps extends SearchBoxProps {\n  /** Field label, rendered above the search box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n}\n\nconst InputSearch = React.forwardRef<HTMLInputElement, InputSearchProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      disabled,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const hasLabel = label != null && label !== '';\n\n    // A visible label names the field via `htmlFor`/`id`, so clear `Search`'s\n    // default `aria-label`. With no label, forward the caller's `aria-label` (if\n    // any) and otherwise let `Search`'s default stand.\n    const ariaLabelProps = hasLabel\n      ? { 'aria-label': undefined }\n      : ariaLabel != null\n        ? { 'aria-label': ariaLabel }\n        : {};\n\n    return (\n      <div className=\"flex w-full min-w-[var(--ui-input-search-container-width-min)] flex-col gap-[var(--ui-input-search-container-gap)]\">\n        {hasLabel && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-search-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-search-color-disabled)]'\n                : 'text-[var(--ui-input-search-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-search-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n        <SearchBox\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          aria-required={required || undefined}\n          className={className}\n          {...ariaLabelProps}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nInputSearch.displayName = 'InputSearch';\n\nexport { InputSearch };\n"],"names":["InputSearch","React","className","id","label","required","disabled","ariaLabel","props","ref","reactId","inputId","hasLabel","ariaLabelProps","jsxs","cn","jsx","SearchBox"],"mappings":";;;;AAqBA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUT,EAAM,MAAA,GAChBU,IAAUR,KAAMO,GAChBE,IAAWR,KAAS,QAAQA,MAAU,IAKtCS,IAAiBD,IACnB,EAAE,cAAc,OAAA,IAChBL,KAAa,OACX,EAAE,cAAcA,EAAA,IAChB,CAAA;AAEN,WACE,gBAAAO,EAAC,OAAA,EAAI,WAAU,sHACZ,UAAA;AAAA,MAAAF,KACC,gBAAAE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASH;AAAA,UACT,WAAWI;AAAA,YACT;AAAA,YACAT,IACI,iDACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAF;AAAA,YACAC,KACC,gBAAAW;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAIN,gBAAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAAR;AAAA,UACA,IAAIE;AAAA,UACJ,UAAAL;AAAA,UACA,iBAAeD,KAAY;AAAA,UAC3B,WAAAH;AAAA,UACC,GAAGW;AAAA,UACH,GAAGL;AAAA,QAAA;AAAA,MAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AACAR,EAAY,cAAc;"}
+{"version":3,"file":"input-search.js","sources":["../../../../src/components/ui/input-search/input-search.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { SearchBox, type SearchBoxProps } from '../search';\n\n// Mirrors the Figma \"InputSearch\" component: a full search field built around the\n// bare `SearchBox` (themed by the `--ui-input-search-*` tier). It adds the field\n// furniture — an optional `label` above the box (with an optional `required` `*`).\n// Every other prop (placeholder, value, onClear, disabled, …) passes straight\n// through to `Search`. Label colors come from `--ui-input-search-color-{idle,disabled}`\n// and the required marker from `--ui-input-search-required-color`, so brand overrides\n// are honored. When a visible label is present it names the field via `htmlFor`/`id`,\n// and `Search`'s built-in `aria-label=\"Search\"` is cleared so it doesn't shadow the\n// visible label.\nexport interface InputSearchProps extends SearchBoxProps {\n  /** Field label, rendered above the search box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n}\n\nconst InputSearch = React.forwardRef<HTMLInputElement, InputSearchProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      disabled,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const hasLabel = label != null && label !== '';\n\n    // A visible label names the field via `htmlFor`/`id`, so clear `Search`'s\n    // default `aria-label`. With no label, forward the caller's `aria-label` (if\n    // any) and otherwise let `Search`'s default stand.\n    const ariaLabelProps = hasLabel\n      ? { 'aria-label': undefined }\n      : ariaLabel != null\n        ? { 'aria-label': ariaLabel }\n        : {};\n\n    return (\n      <div className={cn('flex w-full min-w-[var(--ui-input-search-container-width-min)] flex-col gap-[var(--ui-input-search-container-gap)]', className)}>\n        {hasLabel && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-search-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-search-color-disabled)]'\n                : 'text-[var(--ui-input-search-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-search-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n        <SearchBox\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          aria-required={required || undefined}\n          {...ariaLabelProps}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nInputSearch.displayName = 'InputSearch';\n\nexport { InputSearch };\n"],"names":["InputSearch","React","className","id","label","required","disabled","ariaLabel","props","ref","reactId","inputId","hasLabel","ariaLabelProps","cn","jsxs","jsx","SearchBox"],"mappings":";;;;AAqBA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUT,EAAM,MAAA,GAChBU,IAAUR,KAAMO,GAChBE,IAAWR,KAAS,QAAQA,MAAU,IAKtCS,IAAiBD,IACnB,EAAE,cAAc,OAAA,IAChBL,KAAa,OACX,EAAE,cAAcA,EAAA,IAChB,CAAA;AAEN,6BACG,OAAA,EAAI,WAAWO,EAAG,sHAAsHZ,CAAS,GAC/I,UAAA;AAAA,MAAAU,KACC,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASJ;AAAA,UACT,WAAWG;AAAA,YACT;AAAA,YACAR,IACI,iDACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAF;AAAA,YACAC,KACC,gBAAAW;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAIN,gBAAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAAR;AAAA,UACA,IAAIE;AAAA,UACJ,UAAAL;AAAA,UACA,iBAAeD,KAAY;AAAA,UAC1B,GAAGQ;AAAA,UACH,GAAGL;AAAA,QAAA;AAAA,MAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AACAR,EAAY,cAAc;"}

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

@@ -1,14 +1,15 @@
 import { jsx as o, jsxs as c } from "react/jsx-runtime";
 import * as l from "react";
 import { Select as a } from "@base-ui/react/select";
-import { CheckIcon as p, MagnifierIcon as m, InboxIcon as g, CircleWarningIcon as x, ChevronDownIcon as h } from "@acronis-platform/icons-react/stroke-mono";
+import { CheckIcon as p, MagnifierIcon as g, InboxIcon as h, CircleWarningIcon as f, ChevronDownIcon as w } from "@acronis-platform/icons-react/stroke-mono";
 import { cn as i } from "../../../lib/utils.js";
+import { usePortalContainer as I } from "../../../lib/portal-container.js";
 const u = l.createContext(!1);
-function f(e) {
+function N(e) {
   return /* @__PURE__ */ o(u.Provider, { value: !!e.multiple, children: /* @__PURE__ */ o(a.Root, { ...e }) });
 }
-f.displayName = "InputSelect";
-const E = a.Group, w = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
+N.displayName = "InputSelect";
+const q = a.Group, S = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
   "div",
   {
     ref: t,
@@ -19,8 +20,8 @@ const E = a.Group, w = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__
     ...r
   }
 ));
-w.displayName = "InputSelectField";
-const I = l.forwardRef(({ className: e, children: r, required: t, ...n }, d) => /* @__PURE__ */ c(
+S.displayName = "InputSelectField";
+const y = l.forwardRef(({ className: e, children: r, required: t, ...n }, d) => /* @__PURE__ */ c(
   a.Label,
   {
     ref: d,
@@ -42,8 +43,8 @@ const I = l.forwardRef(({ className: e, children: r, required: t, ...n }, d) =>
     ]
   }
 ));
-I.displayName = "InputSelectLabel";
-const N = l.forwardRef(({ className: e, children: r, ...t }, n) => /* @__PURE__ */ c(
+y.displayName = "InputSelectLabel";
+const k = l.forwardRef(({ className: e, children: r, ...t }, n) => /* @__PURE__ */ c(
   a.Trigger,
   {
     ref: n,
@@ -61,7 +62,7 @@ const N = l.forwardRef(({ className: e, children: r, ...t }, n) => /* @__PURE__
     children: [
       r,
       /* @__PURE__ */ o(a.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(
-        h,
+        w,
         {
           size: 16,
           className: "transition-transform group-data-[popup-open]:rotate-180"
@@ -70,21 +71,21 @@ const N = l.forwardRef(({ className: e, children: r, ...t }, n) => /* @__PURE__
     ]
   }
 ));
-N.displayName = "InputSelectTrigger";
-const S = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
+k.displayName = "InputSelectTrigger";
+const R = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
   a.Value,
   {
     ref: t,
     className: i(
-      "min-w-0 flex-1 truncate text-left text-[var(--ui-input-select-global-value-color-idle)] data-[placeholder]:text-[var(--ui-input-select-global-placeholder-color-idle)]",
+      "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)]",
       e
     ),
     ...r
   }
 ));
-S.displayName = "InputSelectValue";
-const y = l.forwardRef(
+R.displayName = "InputSelectValue";
+const C = l.forwardRef(
   ({
     className: e,
     children: r,
@@ -93,33 +94,36 @@ const y = l.forwardRef(
     side: d = "bottom",
     portalContainer: s,
     ...b
-  }, v) => /* @__PURE__ */ o(a.Portal, { container: s, children: /* @__PURE__ */ o(
-    a.Positioner,
-    {
-      sideOffset: t,
-      align: n,
-      side: d,
-      alignItemWithTrigger: !1,
-      className: "z-50 outline-none",
-      children: /* @__PURE__ */ o(
-        a.Popup,
-        {
-          ref: v,
-          className: i(
-            "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",
-            e
-          ),
-          ...b,
-          children: r
-        }
-      )
-    }
-  ) })
+  }, v) => {
+    const m = I(), x = s ?? m;
+    return /* @__PURE__ */ o(a.Portal, { container: x, children: /* @__PURE__ */ o(
+      a.Positioner,
+      {
+        sideOffset: t,
+        align: n,
+        side: d,
+        alignItemWithTrigger: !1,
+        className: "z-50 outline-none",
+        children: /* @__PURE__ */ o(
+          a.Popup,
+          {
+            ref: v,
+            className: i(
+              "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",
+              e
+            ),
+            ...b,
+            children: r
+          }
+        )
+      }
+    ) });
+  }
 );
-y.displayName = "InputSelectContent";
-const k = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ c("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: [
+C.displayName = "InputSelectContent";
+const z = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ c("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(
-    m,
+    g,
     {
       size: 16,
       className: "shrink-0 text-[var(--ui-input-select-dropdown-dropdown-search-label-color-placeholder)]"
@@ -138,8 +142,8 @@ const k = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ c("div", {
     }
   )
 ] }));
-k.displayName = "InputSelectSearch";
-const R = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
+z.displayName = "InputSelectSearch";
+const L = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
   a.Group,
   {
     ref: t,
@@ -150,8 +154,8 @@ const R = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
     ...r
   }
 ));
-R.displayName = "InputSelectSection";
-const z = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
+L.displayName = "InputSelectSection";
+const P = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
   a.GroupLabel,
   {
     ref: t,
@@ -162,8 +166,8 @@ const z = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
     ...r
   }
 ));
-z.displayName = "InputSelectSectionLabel";
-const C = l.forwardRef(({ className: e, children: r, ...t }, n) => {
+P.displayName = "InputSelectSectionLabel";
+const T = l.forwardRef(({ className: e, children: r, ...t }, n) => {
   const d = l.useContext(u);
   return /* @__PURE__ */ c(
     a.Item,
@@ -194,8 +198,8 @@ const C = l.forwardRef(({ className: e, children: r, ...t }, n) => {
     }
   );
 });
-C.displayName = "InputSelectItem";
-const L = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
+T.displayName = "InputSelectItem";
+const j = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
   "p",
   {
     ref: t,
@@ -206,8 +210,8 @@ const L = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
     ...r
   }
 ));
-L.displayName = "InputSelectDescription";
-const T = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
+j.displayName = "InputSelectDescription";
+const G = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
   "p",
   {
     ref: t,
@@ -218,8 +222,8 @@ const T = l.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ o(
     ...r
   }
 ));
-T.displayName = "InputSelectError";
-const j = l.forwardRef(
+G.displayName = "InputSelectError";
+const D = l.forwardRef(
   ({ className: e, variant: r, children: t, action: n, ...d }, s) => /* @__PURE__ */ c(
     "div",
     {
@@ -237,29 +241,29 @@ const j = l.forwardRef(
             className: "size-6 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70"
           }
         ),
-        r === "empty" && /* @__PURE__ */ o(g, { size: 24, className: "opacity-70" }),
-        r === "error" && /* @__PURE__ */ o(x, { size: 24, className: "opacity-70" }),
+        r === "empty" && /* @__PURE__ */ o(h, { size: 24, className: "opacity-70" }),
+        r === "error" && /* @__PURE__ */ o(f, { size: 24, className: "opacity-70" }),
         t,
         r === "error" && n
       ]
     }
   )
 );
-j.displayName = "InputSelectStatus";
+D.displayName = "InputSelectStatus";
 export {
-  f as InputSelect,
-  y as InputSelectContent,
-  L as InputSelectDescription,
-  T as InputSelectError,
-  w as InputSelectField,
-  E as InputSelectGroup,
-  C as InputSelectItem,
-  I as InputSelectLabel,
-  k as InputSelectSearch,
-  R as InputSelectSection,
-  z as InputSelectSectionLabel,
-  j as InputSelectStatus,
-  N as InputSelectTrigger,
-  S as InputSelectValue
+  N as InputSelect,
+  C as InputSelectContent,
+  j as InputSelectDescription,
+  G as InputSelectError,
+  S as InputSelectField,
+  q as InputSelectGroup,
+  T as InputSelectItem,
+  y as InputSelectLabel,
+  z as InputSelectSearch,
+  L as InputSelectSection,
+  P as InputSelectSectionLabel,
+  D as InputSelectStatus,
+  k as InputSelectTrigger,
+  R as InputSelectValue
 };
 //# sourceMappingURL=input-select.js.map

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

@@ -1 +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  CircleWarningIcon,\n  InboxIcon,\n  MagnifierIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\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\nfunction InputSelect<Value, Multiple extends boolean | undefined = false>(\n  props: SelectPrimitive.Root.Props<Value, Multiple>\n) {\n  return (\n    <InputSelectModeContext.Provider value={Boolean(props.multiple)}>\n      <SelectPrimitive.Root {...props} />\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-left 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    <SelectPrimitive.Portal container={portalContainer}>\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);\nInputSelectContent.displayName = 'InputSelectContent';\n\n/**\n * Presentational in-dropdown search row (magnifier + input). The consumer wires\n * `value`/`onChange` to filter the items it renders.\n */\nconst InputSelectSearch = React.forwardRef<\n  HTMLInputElement,\n  React.ComponentPropsWithoutRef<'input'>\n>(({ className, ...props }, ref) => (\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-input-select-dropdown-dropdown-search-label-color-placeholder)]\"\n    />\n    <input\n      ref={ref}\n      type=\"search\"\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));\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\nconst InputSelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => {\n  const multiple = React.useContext(InputSelectModeContext);\n  return (\n    <SelectPrimitive.Item\n      ref={ref}\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      <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-normal-icon-expand-color-hover)]\">\n          <CheckIcon size={16} />\n        </SelectPrimitive.ItemIndicator>\n      )}\n    </SelectPrimitive.Item>\n  );\n});\nInputSelectItem.displayName = 'InputSelectItem';\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-[128px] 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-current border-t-transparent opacity-70\"\n        />\n      )}\n      {variant === 'empty' && <InboxIcon size={24} className=\"opacity-70\" />}\n      {variant === 'error' && <CircleWarningIcon size={24} className=\"opacity-70\" />}\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  InputSelectDescription,\n  InputSelectError,\n  InputSelectStatus,\n};\n"],"names":["InputSelectModeContext","React","InputSelect","props","jsx","SelectPrimitive","InputSelectGroup","InputSelectField","className","ref","cn","InputSelectLabel","children","required","jsxs","InputSelectTrigger","ChevronDownIcon","InputSelectValue","InputSelectContent","sideOffset","align","side","portalContainer","InputSelectSearch","MagnifierIcon","InputSelectSection","InputSelectSectionLabel","InputSelectItem","multiple","CheckIcon","InputSelectDescription","InputSelectError","InputSelectStatus","variant","action","InboxIcon","CircleWarningIcon"],"mappings":"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"}
+{"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  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\nfunction InputSelect<Value, Multiple extends boolean | undefined = false>(\n  props: SelectPrimitive.Root.Props<Value, Multiple>\n) {\n  return (\n    <InputSelectModeContext.Provider value={Boolean(props.multiple)}>\n      <SelectPrimitive.Root {...props} />\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 * Presentational in-dropdown search row (magnifier + input). The consumer wires\n * `value`/`onChange` to filter the items it renders.\n */\nconst InputSelectSearch = React.forwardRef<\n  HTMLInputElement,\n  React.ComponentPropsWithoutRef<'input'>\n>(({ className, ...props }, ref) => (\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-input-select-dropdown-dropdown-search-label-color-placeholder)]\"\n    />\n    <input\n      ref={ref}\n      type=\"search\"\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));\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\nconst InputSelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => {\n  const multiple = React.useContext(InputSelectModeContext);\n  return (\n    <SelectPrimitive.Item\n      ref={ref}\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      <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-normal-icon-expand-color-hover)]\">\n          <CheckIcon size={16} />\n        </SelectPrimitive.ItemIndicator>\n      )}\n    </SelectPrimitive.Item>\n  );\n});\nInputSelectItem.displayName = 'InputSelectItem';\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-[128px] 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-current border-t-transparent opacity-70\"\n        />\n      )}\n      {variant === 'empty' && <InboxIcon size={24} className=\"opacity-70\" />}\n      {variant === 'error' && <CircleWarningIcon size={24} className=\"opacity-70\" />}\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  InputSelectDescription,\n  InputSelectError,\n  InputSelectStatus,\n};\n"],"names":["InputSelectModeContext","React","InputSelect","props","jsx","SelectPrimitive","InputSelectGroup","InputSelectField","className","ref","cn","InputSelectLabel","children","required","jsxs","InputSelectTrigger","ChevronDownIcon","InputSelectValue","InputSelectContent","sideOffset","align","side","portalContainer","ctxContainer","usePortalContainer","resolvedContainer","InputSelectSearch","MagnifierIcon","InputSelectSection","InputSelectSectionLabel","InputSelectItem","multiple","CheckIcon","InputSelectDescription","InputSelectError","InputSelectStatus","variant","action","InboxIcon","CircleWarningIcon"],"mappings":";;;;;;AAwBA,MAAMA,IAAyBC,EAAM,cAAc,EAAK;AAExD,SAASC,EACPC,GACA;AACA,SACE,gBAAAC,EAACJ,EAAuB,UAAvB,EAAgC,OAAO,EAAQG,EAAM,UACpD,4BAACE,EAAgB,MAAhB,EAAsB,GAAGF,GAAO,GACnC;AAEJ;AACAD,EAAY,cAAc;AAE1B,MAAMI,IAAmBD,EAAgB,OAGnCE,IAAmBN,EAAM,WAG7B,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASM,MAC1B,gBAAAL;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAK;AAAA,IACA,WAAWC;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACDI,EAAiB,cAAc;AAE/B,MAAMI,IAAmBV,EAAM,WAM7B,CAAC,EAAE,WAAAO,GAAW,UAAAI,GAAU,UAAAC,GAAU,GAAGV,KAASM,MAC9C,gBAAAK;AAAA,EAACT,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAI;AAAA,IACA,WAAWC;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,IAEH,UAAA;AAAA,MAAAS;AAAA,MACAC,KACC,gBAAAT;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAU;AAAA,UACX,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAAA;AAEJ,CACD;AACDO,EAAiB,cAAc;AAE/B,MAAMI,IAAqBd,EAAM,WAG/B,CAAC,EAAE,WAAAO,GAAW,UAAAI,GAAU,GAAGT,KAASM,MACpC,gBAAAK;AAAA,EAACT,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAI;AAAA,IACA,WAAWC;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,IAEH,UAAA;AAAA,MAAAS;AAAA,MACD,gBAAAR,EAACC,EAAgB,MAAhB,EAAqB,WAAU,gLAC9B,UAAA,gBAAAD;AAAA,QAACY;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,QAAA;AAAA,MAAA,EACZ,CACF;AAAA,IAAA;AAAA,EAAA;AACF,CACD;AACDD,EAAmB,cAAc;AAEjC,MAAME,IAAmBhB,EAAM,WAG7B,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASM,MAC1B,gBAAAL;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAI;AAAA,IACA,WAAWC;AAAA,MACT;AAAA,MACA;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACDc,EAAiB,cAAc;AAE/B,MAAMC,IAAqBjB,EAAM;AAAA,EAc/B,CACE;AAAA,IACE,WAAAO;AAAA,IACA,UAAAI;AAAA,IACA,YAAAO,IAAa;AAAA,IACb,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,iBAAAC;AAAA,IACA,GAAGnB;AAAA,EAAA,GAELM,MACG;AACH,UAAMc,IAAeC,EAAA,GACfC,IAAoBH,KAAmBC;AAE7C,WACA,gBAAAnB,EAACC,EAAgB,QAAhB,EAAuB,WAAWoB,GACjC,UAAA,gBAAArB;AAAA,MAACC,EAAgB;AAAA,MAAhB;AAAA,QACC,YAAAc;AAAA,QACA,OAAAC;AAAA,QACA,MAAAC;AAAA,QACA,sBAAsB;AAAA,QACtB,WAAU;AAAA,QAEV,UAAA,gBAAAjB;AAAA,UAACC,EAAgB;AAAA,UAAhB;AAAA,YACC,KAAAI;AAAA,YACA,WAAWC;AAAA,cACT;AAAA,cACAF;AAAA,YAAA;AAAA,YAED,GAAGL;AAAA,YAEH,UAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,GAEJ;AAAA,EAEF;AACF;AACAM,EAAmB,cAAc;AAMjC,MAAMQ,IAAoBzB,EAAM,WAG9B,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASM,MAC1B,gBAAAK,EAAC,OAAA,EAAI,WAAU,6MACb,UAAA;AAAA,EAAA,gBAAAV;AAAA,IAACuB;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,WAAU;AAAA,IAAA;AAAA,EAAA;AAAA,EAEZ,gBAAAvB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAK;AAAA,MACA,MAAK;AAAA,MACL,WAAWC;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGL;AAAA,IAAA;AAAA,EAAA;AACN,GACF,CACD;AACDuB,EAAkB,cAAc;AAGhC,MAAME,IAAqB3B,EAAM,WAG/B,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASM,MAC1B,gBAAAL;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAI;AAAA,IACA,WAAWC;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACDyB,EAAmB,cAAc;AAEjC,MAAMC,IAA0B5B,EAAM,WAGpC,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASM,MAC1B,gBAAAL;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAI;AAAA,IACA,WAAWC;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACD0B,EAAwB,cAAc;AAEtC,MAAMC,IAAkB7B,EAAM,WAG5B,CAAC,EAAE,WAAAO,GAAW,UAAAI,GAAU,GAAGT,EAAA,GAASM,MAAQ;AAC5C,QAAMsB,IAAW9B,EAAM,WAAWD,CAAsB;AACxD,SACE,gBAAAc;AAAA,IAACT,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAI;AAAA,MACA,WAAWC;AAAA,QACT;AAAA,QACA;AAAA;AAAA;AAAA,QAGA,CAACqB,KACC;AAAA,QACF;AAAA,QACAvB;AAAA,MAAA;AAAA,MAED,GAAGL;AAAA,MAEH,UAAA;AAAA,QAAA4B,KACC,gBAAA3B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,YAEV,UAAA,gBAAAA,EAAC4B,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,0BAGxB3B,EAAgB,UAAhB,EAAyB,WAAU,2BACjC,UAAAO,GACH;AAAA,QACC,CAACmB,KACA,gBAAA3B,EAACC,EAAgB,eAAhB,EAA8B,WAAU,2FACvC,UAAA,gBAAAD,EAAC4B,GAAA,EAAU,MAAM,GAAA,CAAI,EAAA,CACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AACDF,EAAgB,cAAc;AAE9B,MAAMG,IAAyBhC,EAAM,WAGnC,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASM,MAC1B,gBAAAL;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAK;AAAA,IACA,WAAWC;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACD8B,EAAuB,cAAc;AAErC,MAAMC,IAAmBjC,EAAM,WAG7B,CAAC,EAAE,WAAAO,GAAW,GAAGL,EAAA,GAASM,MAC1B,gBAAAL;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAK;AAAA,IACA,WAAWC;AAAA,MACT;AAAA,MACAF;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACD+B,EAAiB,cAAc;AAW/B,MAAMC,IAAoBlC,EAAM;AAAA,EAC9B,CAAC,EAAE,WAAAO,GAAW,SAAA4B,GAAS,UAAAxB,GAAU,QAAAyB,GAAQ,GAAGlC,EAAA,GAASM,MACnD,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAWC;AAAA,QACT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGL;AAAA,MAEH,UAAA;AAAA,QAAAiC,MAAY,aACX,gBAAAhC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGbgC,MAAY,WAAW,gBAAAhC,EAACkC,KAAU,MAAM,IAAI,WAAU,cAAa;AAAA,QACnEF,MAAY,WAAW,gBAAAhC,EAACmC,KAAkB,MAAM,IAAI,WAAU,cAAa;AAAA,QAC3E3B;AAAA,QACAwB,MAAY,WAAWC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9B;AACAF,EAAkB,cAAc;"}

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

@@ -17,7 +17,7 @@ const T = m.forwardRef(
     value: r,
     ...I
   }, N) => {
-    const y = m.useId(), l = v ?? y, p = `${l}-message`, o = a != null && a !== "", w = r != null && r !== "", d = !!f && w && !e, n = o ? a : b, x = n != null && n !== "";
+    const y = m.useId(), l = v ?? y, d = `${l}-message`, o = a != null && a !== "", w = r != null && r !== "", p = !!f && w && !e, n = o ? a : b, 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",
@@ -50,18 +50,18 @@ const T = m.forwardRef(
             value: r,
             "aria-invalid": o || void 0,
             "aria-required": u || void 0,
-            "aria-describedby": x ? p : void 0,
-            className: c(d && "pr-9", g),
+            "aria-describedby": x ? d : void 0,
+            className: c(p && "pe-9", g),
             ...I
           }
         ),
-        d && /* @__PURE__ */ t(
+        p && /* @__PURE__ */ t(
           "button",
           {
             type: "button",
             onClick: h,
             "aria-label": "Clear",
-            className: "absolute right-[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-input-text-global-clear-icon-color)] 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-4 -translate-y-1/2 items-center justify-center rounded-[var(--ui-input-text-global-box-border-radius)] text-[var(--ui-input-text-global-clear-icon-color)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0",
             children: /* @__PURE__ */ t(j, {})
           }
         )
@@ -69,7 +69,7 @@ const T = m.forwardRef(
       x && /* @__PURE__ */ t(
         "p",
         {
-          id: p,
+          id: d,
           className: c(
             "text-xs leading-4",
             o ? "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)]"

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/clear — so\n// brand overrides are honored; the clear button uses 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 && 'pr-9', className)}\n            {...props}\n          />\n          {showClear && (\n            <button\n              type=\"button\"\n              onClick={onClear}\n              aria-label=\"Clear\"\n              className=\"absolute right-[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-input-text-global-clear-icon-color)] 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":";;;;;AAmCA,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/clear — so\n// brand overrides are honored; the clear button uses 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-input-text-global-clear-icon-color)] 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":";;;;;AAmCA,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;"}