@acronis-platform/ui-react 4.0.0 → 4.1.0

package/dist/components/ui/combobox/combobox.js

@@ -1,153 +1,90 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { usePortalContainer as t } from "../../../lib/portal-container.js";
 import * as n from "react";
-import { Combobox as o } from "@base-ui/react/combobox";
-import { TimesIcon as x, ChevronDownIcon as v, CheckIcon as g } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as a } from "../../../lib/utils.js";
-import { usePortalContainer as h } from "../../../lib/portal-container.js";
-function f(r) {
-  return /* @__PURE__ */ e(o.Root, { ...r });
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { CheckIcon as a, ChevronDownIcon as o, TimesIcon as s } from "@acronis-platform/icons-react/stroke-mono";
+import { Combobox as c } from "@base-ui/react/combobox";
+//#region src/components/ui/combobox/combobox.tsx
+function l(e) {
+	return /* @__PURE__ */ r(c.Root, { ...e });
 }
-f.displayName = "Combobox";
-const w = n.forwardRef(({ className: r, containerClassName: i, clearable: t, ...l }, d) => (
-  // InputGroup (not a plain div) is the popup's anchor, so the dropdown aligns to
-  // the box's left edge rather than to the bare input inside the box padding.
-  /* @__PURE__ */ s(
-    o.InputGroup,
-    {
-      className: a(
-        "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 transition-colors",
-        "not-has-disabled:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-has-disabled:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]",
-        "has-[input:focus-visible]:border-[var(--ui-input-select-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]",
-        "has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-select-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-select-global-box-color-disabled)]",
-        "has-[input[aria-invalid=true]]:border-[var(--ui-input-select-error-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]",
-        i
-      ),
-      children: [
-        /* @__PURE__ */ e(
-          o.Input,
-          {
-            ref: d,
-            className: a(
-              "min-w-0 flex-1 bg-transparent text-[var(--ui-input-select-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-select-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-select-global-value-color-disabled)]",
-              r
-            ),
-            ...l
-          }
-        ),
-        t && /* @__PURE__ */ e(
-          o.Clear,
-          {
-            "aria-label": "Clear",
-            className: "flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[disabled]:hidden",
-            children: /* @__PURE__ */ e(x, { size: 16 })
-          }
-        ),
-        /* @__PURE__ */ e(
-          o.Trigger,
-          {
-            "aria-label": "Toggle",
-            className: "flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none group-has-disabled:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]",
-            children: /* @__PURE__ */ e(
-              v,
-              {
-                size: 16,
-                className: "transition-transform group-has-[input[aria-expanded=true]]:rotate-180"
-              }
-            )
-          }
-        )
-      ]
-    }
-  )
-));
-w.displayName = "ComboboxInput";
-const C = n.forwardRef(
-  ({ className: r, children: i, sideOffset: t = 4, align: l = "start", side: d = "bottom", portalContainer: c, ...u }, p) => {
-    const b = h(), m = c ?? b;
-    return /* @__PURE__ */ e(o.Portal, { container: m, children: /* @__PURE__ */ e(
-      o.Positioner,
-      {
-        sideOffset: t,
-        align: l,
-        side: d,
-        className: "z-50 outline-none",
-        children: /* @__PURE__ */ e(
-          o.Popup,
-          {
-            ref: p,
-            className: a(
-              "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",
-              r
-            ),
-            ...u,
-            children: i
-          }
-        )
-      }
-    ) });
-  }
-);
-C.displayName = "ComboboxContent";
-const y = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
-  o.List,
-  {
-    ref: t,
-    className: a("flex flex-col", r),
-    ...i
-  }
-));
-y.displayName = "ComboboxList";
-const N = n.forwardRef(({ className: r, children: i, ...t }, l) => /* @__PURE__ */ s(
-  o.Item,
-  {
-    ref: l,
-    className: a(
-      "relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none",
-      "bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]",
-      "data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]",
-      "data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]",
-      r
-    ),
-    ...t,
-    children: [
-      /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: i }),
-      /* @__PURE__ */ e(o.ItemIndicator, { className: "flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-hover)]", children: /* @__PURE__ */ e(g, { size: 16 }) })
-    ]
-  }
-));
-N.displayName = "ComboboxItem";
-const I = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
-  o.Empty,
-  {
-    ref: t,
-    className: a(
-      "px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-normal-description-color-idle)] empty:m-0 empty:p-0",
-      r
-    ),
-    ...i
-  }
-));
-I.displayName = "ComboboxEmpty";
-const E = o.Group, R = n.forwardRef(({ className: r, ...i }, t) => /* @__PURE__ */ e(
-  o.GroupLabel,
-  {
-    ref: t,
-    className: a(
-      "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)]",
-      r
-    ),
-    ...i
-  }
-));
-R.displayName = "ComboboxGroupLabel";
-export {
-  f as Combobox,
-  C as ComboboxContent,
-  I as ComboboxEmpty,
-  E as ComboboxGroup,
-  R as ComboboxGroupLabel,
-  w as ComboboxInput,
-  N as ComboboxItem,
-  y as ComboboxList
-};
-//# sourceMappingURL=combobox.js.map
+l.displayName = "Combobox";
+var u = n.forwardRef(({ className: t, containerClassName: n, clearable: a, ...l }, u) => /* @__PURE__ */ i(c.InputGroup, {
+	className: e("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 transition-colors", "not-has-disabled:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-has-disabled:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]", "has-[input:focus-visible]:border-[var(--ui-input-select-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]", "has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-select-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-select-global-box-color-disabled)]", "has-[input[aria-invalid=true]]:border-[var(--ui-input-select-error-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]", n),
+	children: [
+		/* @__PURE__ */ r(c.Input, {
+			ref: u,
+			className: e("min-w-0 flex-1 bg-transparent text-[var(--ui-input-select-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-select-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-select-global-value-color-disabled)]", t),
+			...l
+		}),
+		a && /* @__PURE__ */ r(c.Clear, {
+			"aria-label": "Clear",
+			className: "flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[disabled]:hidden",
+			children: /* @__PURE__ */ r(s, { size: 16 })
+		}),
+		/* @__PURE__ */ r(c.Trigger, {
+			"aria-label": "Toggle",
+			className: "flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none group-has-disabled:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]",
+			children: /* @__PURE__ */ r(o, {
+				size: 16,
+				className: "transition-transform group-has-[input[aria-expanded=true]]:rotate-180"
+			})
+		})
+	]
+}));
+u.displayName = "ComboboxInput";
+var d = n.forwardRef(({ className: n, children: i, sideOffset: a = 4, align: o = "start", side: s = "bottom", portalContainer: l, ...u }, d) => {
+	let f = t(), p = l ?? f;
+	return /* @__PURE__ */ r(c.Portal, {
+		container: p,
+		children: /* @__PURE__ */ r(c.Positioner, {
+			sideOffset: a,
+			align: o,
+			side: s,
+			className: "z-50 outline-none",
+			children: /* @__PURE__ */ r(c.Popup, {
+				ref: d,
+				className: e("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),
+				...u,
+				children: i
+			})
+		})
+	});
+});
+d.displayName = "ComboboxContent";
+var f = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r(c.List, {
+	ref: i,
+	className: e("flex flex-col", t),
+	...n
+}));
+f.displayName = "ComboboxList";
+var p = n.forwardRef(({ className: t, children: n, ...o }, s) => /* @__PURE__ */ i(c.Item, {
+	ref: s,
+	className: e("relative flex cursor-default items-center gap-[var(--ui-input-select-dropdown-item-global-container-gap)] px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] leading-6 text-[var(--ui-input-select-dropdown-item-global-label-color)] outline-none select-none", "bg-[var(--ui-input-select-dropdown-item-unselected-container-color-idle)] data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-hover)]", "data-[selected]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-idle)] data-[selected]:data-[highlighted]:bg-[var(--ui-input-select-dropdown-item-selected-container-color-hover)]", "data-[disabled]:pointer-events-none data-[disabled]:bg-[var(--ui-input-select-dropdown-item-unselected-container-color-disabled)]", t),
+	...o,
+	children: [/* @__PURE__ */ r("span", {
+		className: "min-w-0 flex-1 truncate",
+		children: n
+	}), /* @__PURE__ */ r(c.ItemIndicator, {
+		className: "flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-hover)]",
+		children: /* @__PURE__ */ r(a, { size: 16 })
+	})]
+}));
+p.displayName = "ComboboxItem";
+var m = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r(c.Empty, {
+	ref: i,
+	className: e("px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-normal-description-color-idle)] empty:m-0 empty:p-0", t),
+	...n
+}));
+m.displayName = "ComboboxEmpty";
+var h = c.Group, g = n.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r(c.GroupLabel, {
+	ref: i,
+	className: e("px-[var(--ui-input-select-dropdown-section-container-header-padding-x)] py-[var(--ui-input-select-dropdown-section-container-header-padding-y)] text-sm font-semibold leading-6 text-[var(--ui-input-select-dropdown-section-label-group-color)]", t),
+	...n
+}));
+g.displayName = "ComboboxGroupLabel";
+//#endregion
+export { l as Combobox, d as ComboboxContent, m as ComboboxEmpty, h as ComboboxGroup, g as ComboboxGroupLabel, u as ComboboxInput, p as ComboboxItem, f as ComboboxList };
+
+//# sourceMappingURL=combobox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","sources":["../../../../src/components/ui/combobox/combobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';\nimport {\n  CheckIcon,\n  ChevronDownIcon,\n  TimesIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// A searchable single/multi-select built on Base UI's Combobox primitive. The\n// legacy `combobox` was only a hardcoded Popover + cmdk demo; this is a real,\n// reusable component. There is no `--ui-combobox-*` tier, so it reuses the\n// `--ui-input-select-*` tokens (already imported) — the field box, dropdown\n// container, and items match InputSelect, the non-searchable sibling. The Root\n// auto-extracts `{ value, label }` items and filters them by the input value.\n\nfunction Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>\n) {\n  return <ComboboxPrimitive.Root {...props} />;\n}\nCombobox.displayName = 'Combobox';\n\nexport interface ComboboxInputProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Input>,\n    'className'\n  > {\n  className?: string;\n  /** Wrapper (box) className. */\n  containerClassName?: string;\n  /** Show a clear (✕) button while the field has a value. */\n  clearable?: boolean;\n}\n\n// The field box: a typeable input + a clear button (optional) + a chevron trigger.\nconst ComboboxInput = React.forwardRef<\n  HTMLInputElement,\n  ComboboxInputProps\n>(({ className, containerClassName, clearable, ...props }, ref) => (\n  // InputGroup (not a plain div) is the popup's anchor, so the dropdown aligns to\n  // the box's left edge rather than to the bare input inside the box padding.\n  <ComboboxPrimitive.InputGroup\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 transition-colors',\n      'not-has-disabled:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-has-disabled:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]',\n      'has-[input:focus-visible]:border-[var(--ui-input-select-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]',\n      'has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-select-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-select-global-box-color-disabled)]',\n      'has-[input[aria-invalid=true]]:border-[var(--ui-input-select-error-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]',\n      containerClassName\n    )}\n  >\n    <ComboboxPrimitive.Input\n      ref={ref}\n      className={cn(\n        'min-w-0 flex-1 bg-transparent text-[var(--ui-input-select-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-select-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-select-global-value-color-disabled)]',\n        className\n      )}\n      {...props}\n    />\n    {clearable && (\n      <ComboboxPrimitive.Clear\n        aria-label=\"Clear\"\n        className=\"flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[disabled]:hidden\"\n      >\n        <TimesIcon size={16} />\n      </ComboboxPrimitive.Clear>\n    )}\n    <ComboboxPrimitive.Trigger\n      aria-label=\"Toggle\"\n      className=\"flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none group-has-disabled:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]\"\n    >\n      <ChevronDownIcon\n        size={16}\n        className=\"transition-transform group-has-[input[aria-expanded=true]]:rotate-180\"\n      />\n    </ComboboxPrimitive.Trigger>\n  </ComboboxPrimitive.InputGroup>\n));\nComboboxInput.displayName = 'ComboboxInput';\n\nexport interface ComboboxContentProps\n  extends React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Popup> {\n  sideOffset?: number;\n  align?: ComboboxPrimitive.Positioner.Props['align'];\n  side?: ComboboxPrimitive.Positioner.Props['side'];\n  /** Container to portal into (e.g. a shadow root, so the popup inherits styles). */\n  portalContainer?: ComboboxPrimitive.Portal.Props['container'];\n}\n\nconst ComboboxContent = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.Popup>,\n  ComboboxContentProps\n>(\n  (\n    { className, children, sideOffset = 4, align = 'start', side = 'bottom', portalContainer, ...props },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    return (\n    <ComboboxPrimitive.Portal container={resolvedContainer}>\n      <ComboboxPrimitive.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n        className=\"z-50 outline-none\"\n      >\n        <ComboboxPrimitive.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        </ComboboxPrimitive.Popup>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n    );\n  }\n);\nComboboxContent.displayName = 'ComboboxContent';\n\nconst ComboboxList = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <ComboboxPrimitive.List\n    ref={ref}\n    className={cn('flex flex-col', className)}\n    {...props}\n  />\n));\nComboboxList.displayName = 'ComboboxList';\n\nconst ComboboxItem = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <ComboboxPrimitive.Item\n    ref={ref}\n    className={cn(\n      '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      '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    <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n    <ComboboxPrimitive.ItemIndicator className=\"flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-hover)]\">\n      <CheckIcon size={16} />\n    </ComboboxPrimitive.ItemIndicator>\n  </ComboboxPrimitive.Item>\n));\nComboboxItem.displayName = 'ComboboxItem';\n\nconst ComboboxEmpty = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n  <ComboboxPrimitive.Empty\n    ref={ref}\n    className={cn(\n      'px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-normal-description-color-idle)] empty:m-0 empty:p-0',\n      className\n    )}\n    {...props}\n  />\n));\nComboboxEmpty.displayName = 'ComboboxEmpty';\n\nconst ComboboxGroup = ComboboxPrimitive.Group;\n\nconst ComboboxGroupLabel = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n  <ComboboxPrimitive.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));\nComboboxGroupLabel.displayName = 'ComboboxGroupLabel';\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n};\n"],"names":["Combobox","props","jsx","ComboboxPrimitive","ComboboxInput","React","className","containerClassName","clearable","ref","jsxs","cn","TimesIcon","ChevronDownIcon","ComboboxContent","children","sideOffset","align","side","portalContainer","ctxContainer","usePortalContainer","resolvedContainer","ComboboxList","ComboboxItem","CheckIcon","ComboboxEmpty","ComboboxGroup","ComboboxGroupLabel"],"mappings":";;;;;;AAoBA,SAASA,EACPC,GACA;AACA,SAAO,gBAAAC,EAACC,EAAkB,MAAlB,EAAwB,GAAGF,EAAA,CAAO;AAC5C;AACAD,EAAS,cAAc;AAevB,MAAMI,IAAgBC,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,oBAAAC,GAAoB,WAAAC,GAAW,GAAGP,EAAA,GAASQ;AAAA;AAAA;AAAA,EAGzD,gBAAAC;AAAA,IAACP,EAAkB;AAAA,IAAlB;AAAA,MACC,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAL;AAAA,UAACC,EAAkB;AAAA,UAAlB;AAAA,YACC,KAAAM;AAAA,YACA,WAAWE;AAAA,cACT;AAAA,cACAL;AAAA,YAAA;AAAA,YAED,GAAGL;AAAA,UAAA;AAAA,QAAA;AAAA,QAELO,KACC,gBAAAN;AAAA,UAACC,EAAkB;AAAA,UAAlB;AAAA,YACC,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,UAAA,gBAAAD,EAACU,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGzB,gBAAAV;AAAA,UAACC,EAAkB;AAAA,UAAlB;AAAA,YACC,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,UAAA,gBAAAD;AAAA,cAACW;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAAA,CAEH;AACDT,EAAc,cAAc;AAW5B,MAAMU,IAAkBT,EAAM;AAAA,EAI5B,CACE,EAAE,WAAAC,GAAW,UAAAS,GAAU,YAAAC,IAAa,GAAG,OAAAC,IAAQ,SAAS,MAAAC,IAAO,UAAU,iBAAAC,GAAiB,GAAGlB,EAAA,GAC7FQ,MACG;AACH,UAAMW,IAAeC,EAAA,GACfC,IAAoBH,KAAmBC;AAE7C,WACA,gBAAAlB,EAACC,EAAkB,QAAlB,EAAyB,WAAWmB,GACnC,UAAA,gBAAApB;AAAA,MAACC,EAAkB;AAAA,MAAlB;AAAA,QACC,YAAAa;AAAA,QACA,OAAAC;AAAA,QACA,MAAAC;AAAA,QACA,WAAU;AAAA,QAEV,UAAA,gBAAAhB;AAAA,UAACC,EAAkB;AAAA,UAAlB;AAAA,YACC,KAAAM;AAAA,YACA,WAAWE;AAAA,cACT;AAAA,cACAL;AAAA,YAAA;AAAA,YAED,GAAGL;AAAA,YAEH,UAAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA,GAEJ;AAAA,EAEF;AACF;AACAD,EAAgB,cAAc;AAE9B,MAAMS,IAAelB,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGL,EAAA,GAASQ,MAC1B,gBAAAP;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE,EAAG,iBAAiBL,CAAS;AAAA,IACvC,GAAGL;AAAA,EAAA;AACN,CACD;AACDsB,EAAa,cAAc;AAE3B,MAAMC,IAAenB,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,UAAAS,GAAU,GAAGd,KAASQ,MACpC,gBAAAC;AAAA,EAACP,EAAkB;AAAA,EAAlB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,2BAA2B,UAAAa,EAAA,CAAS;AAAA,MACpD,gBAAAb,EAACC,EAAkB,eAAlB,EAAgC,WAAU,2FACzC,UAAA,gBAAAD,EAACuB,GAAA,EAAU,MAAM,GAAA,CAAI,EAAA,CACvB;AAAA,IAAA;AAAA,EAAA;AACF,CACD;AACDD,EAAa,cAAc;AAE3B,MAAME,IAAgBrB,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGL,EAAA,GAASQ,MAC1B,gBAAAP;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACDyB,EAAc,cAAc;AAE5B,MAAMC,IAAgBxB,EAAkB,OAElCyB,IAAqBvB,EAAM,WAG/B,CAAC,EAAE,WAAAC,GAAW,GAAGL,EAAA,GAASQ,MAC1B,gBAAAP;AAAA,EAACC,EAAkB;AAAA,EAAlB;AAAA,IACC,KAAAM;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGL;AAAA,EAAA;AACN,CACD;AACD2B,EAAmB,cAAc;"}
+{"version":3,"file":"combobox.js","names":[],"sources":["../../../../src/components/ui/combobox/combobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';\nimport {\n  CheckIcon,\n  ChevronDownIcon,\n  TimesIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { usePortalContainer } from '@/lib/portal-container';\n\n// A searchable single/multi-select built on Base UI's Combobox primitive. The\n// legacy `combobox` was only a hardcoded Popover + cmdk demo; this is a real,\n// reusable component. There is no `--ui-combobox-*` tier, so it reuses the\n// `--ui-input-select-*` tokens (already imported) — the field box, dropdown\n// container, and items match InputSelect, the non-searchable sibling. The Root\n// auto-extracts `{ value, label }` items and filters them by the input value.\n\nfunction Combobox<Value, Multiple extends boolean | undefined = false>(\n  props: ComboboxPrimitive.Root.Props<Value, Multiple>\n) {\n  return <ComboboxPrimitive.Root {...props} />;\n}\nCombobox.displayName = 'Combobox';\n\nexport interface ComboboxInputProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Input>,\n    'className'\n  > {\n  className?: string;\n  /** Wrapper (box) className. */\n  containerClassName?: string;\n  /** Show a clear (✕) button while the field has a value. */\n  clearable?: boolean;\n}\n\n// The field box: a typeable input + a clear button (optional) + a chevron trigger.\nconst ComboboxInput = React.forwardRef<\n  HTMLInputElement,\n  ComboboxInputProps\n>(({ className, containerClassName, clearable, ...props }, ref) => (\n  // InputGroup (not a plain div) is the popup's anchor, so the dropdown aligns to\n  // the box's left edge rather than to the bare input inside the box padding.\n  <ComboboxPrimitive.InputGroup\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 transition-colors',\n      'not-has-disabled:hover:bg-[var(--ui-input-select-global-box-color-hover)] not-has-disabled:hover:border-[var(--ui-input-select-normal-box-border-color-hover)]',\n      'has-[input:focus-visible]:border-[var(--ui-input-select-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]',\n      'has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-select-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-select-global-box-color-disabled)]',\n      'has-[input[aria-invalid=true]]:border-[var(--ui-input-select-error-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]',\n      containerClassName\n    )}\n  >\n    <ComboboxPrimitive.Input\n      ref={ref}\n      className={cn(\n        'min-w-0 flex-1 bg-transparent text-[var(--ui-input-select-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-select-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-select-global-value-color-disabled)]',\n        className\n      )}\n      {...props}\n    />\n    {clearable && (\n      <ComboboxPrimitive.Clear\n        aria-label=\"Clear\"\n        className=\"flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)] data-[disabled]:hidden\"\n      >\n        <TimesIcon size={16} />\n      </ComboboxPrimitive.Clear>\n    )}\n    <ComboboxPrimitive.Trigger\n      aria-label=\"Toggle\"\n      className=\"flex shrink-0 cursor-pointer items-center text-[var(--ui-input-select-normal-icon-expand-color-idle)] outline-none group-has-disabled:text-[var(--ui-input-select-normal-icon-expand-color-disabled)]\"\n    >\n      <ChevronDownIcon\n        size={16}\n        className=\"transition-transform group-has-[input[aria-expanded=true]]:rotate-180\"\n      />\n    </ComboboxPrimitive.Trigger>\n  </ComboboxPrimitive.InputGroup>\n));\nComboboxInput.displayName = 'ComboboxInput';\n\nexport interface ComboboxContentProps\n  extends React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Popup> {\n  sideOffset?: number;\n  align?: ComboboxPrimitive.Positioner.Props['align'];\n  side?: ComboboxPrimitive.Positioner.Props['side'];\n  /** Container to portal into (e.g. a shadow root, so the popup inherits styles). */\n  portalContainer?: ComboboxPrimitive.Portal.Props['container'];\n}\n\nconst ComboboxContent = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.Popup>,\n  ComboboxContentProps\n>(\n  (\n    { className, children, sideOffset = 4, align = 'start', side = 'bottom', portalContainer, ...props },\n    ref\n  ) => {\n    const ctxContainer = usePortalContainer();\n    const resolvedContainer = portalContainer ?? ctxContainer;\n\n    return (\n    <ComboboxPrimitive.Portal container={resolvedContainer}>\n      <ComboboxPrimitive.Positioner\n        sideOffset={sideOffset}\n        align={align}\n        side={side}\n        className=\"z-50 outline-none\"\n      >\n        <ComboboxPrimitive.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        </ComboboxPrimitive.Popup>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n    );\n  }\n);\nComboboxContent.displayName = 'ComboboxContent';\n\nconst ComboboxList = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <ComboboxPrimitive.List\n    ref={ref}\n    className={cn('flex flex-col', className)}\n    {...props}\n  />\n));\nComboboxList.displayName = 'ComboboxList';\n\nconst ComboboxItem = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <ComboboxPrimitive.Item\n    ref={ref}\n    className={cn(\n      '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      '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    <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n    <ComboboxPrimitive.ItemIndicator className=\"flex shrink-0 items-center text-[var(--ui-input-select-normal-icon-expand-color-hover)]\">\n      <CheckIcon size={16} />\n    </ComboboxPrimitive.ItemIndicator>\n  </ComboboxPrimitive.Item>\n));\nComboboxItem.displayName = 'ComboboxItem';\n\nconst ComboboxEmpty = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.Empty>\n>(({ className, ...props }, ref) => (\n  <ComboboxPrimitive.Empty\n    ref={ref}\n    className={cn(\n      'px-[var(--ui-input-select-dropdown-item-global-container-padding-x)] py-[var(--ui-input-select-dropdown-item-global-container-padding-y)] text-center text-sm leading-6 text-[var(--ui-input-select-normal-description-color-idle)] empty:m-0 empty:p-0',\n      className\n    )}\n    {...props}\n  />\n));\nComboboxEmpty.displayName = 'ComboboxEmpty';\n\nconst ComboboxGroup = ComboboxPrimitive.Group;\n\nconst ComboboxGroupLabel = React.forwardRef<\n  React.ElementRef<typeof ComboboxPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof ComboboxPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => (\n  <ComboboxPrimitive.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));\nComboboxGroupLabel.displayName = 'ComboboxGroupLabel';\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n};\n"],"mappings":";;;;;;;;AAoBA,SAAS,EACP,GACA;CACA,OAAO,kBAAC,EAAkB,MAAnB,EAAwB,GAAI,EAAQ,CAAA;AAC7C;AACA,EAAS,cAAc;AAevB,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,uBAAoB,cAAW,GAAG,KAAS,MAGzD,kBAAC,EAAkB,YAAnB;CACE,WAAW,EACT,wYACA,kKACA,yLACA,oLACA,wKACA,CACF;CARF,UAAA;EAUE,kBAAC,EAAkB,OAAnB;GACO;GACL,WAAW,EACT,2QACA,CACF;GACA,GAAI;EACL,CAAA;EACA,KACC,kBAAC,EAAkB,OAAnB;GACE,cAAW;GACX,WAAU;GAEV,UAAA,kBAAC,GAAD,EAAW,MAAM,GAAK,CAAA;EACC,CAAA;EAE3B,kBAAC,EAAkB,SAAnB;GACE,cAAW;GACX,WAAU;GAEV,UAAA,kBAAC,GAAD;IACE,MAAM;IACN,WAAU;GACX,CAAA;EACwB,CAAA;CACC;AAC/B,CAAA,CAAA;AACD,EAAc,cAAc;AAW5B,IAAM,IAAkB,EAAM,YAK1B,EAAE,cAAW,aAAU,gBAAa,GAAG,WAAQ,SAAS,UAAO,UAAU,oBAAiB,GAAG,KAC7F,MACG;CACH,IAAM,IAAe,EAAmB,GAClC,IAAoB,KAAmB;CAE7C,OACA,kBAAC,EAAkB,QAAnB;EAA0B,WAAW;EACnC,UAAA,kBAAC,EAAkB,YAAnB;GACc;GACL;GACD;GACN,WAAU;GAEV,UAAA,kBAAC,EAAkB,OAAnB;IACO;IACL,WAAW,EACT,qWACA,CACF;IACA,GAAI;IAEH;GACsB,CAAA;EACG,CAAA;CACN,CAAA;AAE5B,CACF;AACA,EAAgB,cAAc;AAE9B,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAkB,MAAnB;CACO;CACL,WAAW,EAAG,iBAAiB,CAAS;CACxC,GAAI;AACL,CAAA,CACF;AACD,EAAa,cAAc;AAE3B,IAAM,IAAe,EAAM,YAGxB,EAAE,cAAW,aAAU,GAAG,KAAS,MACpC,kBAAC,EAAkB,MAAnB;CACO;CACL,WAAW,EACT,yVACA,2KACA,uMACA,qIACA,CACF;CACA,GAAI;CATN,UAAA,CAWE,kBAAC,QAAD;EAAM,WAAU;EAA2B;CAAe,CAAA,GAC1D,kBAAC,EAAkB,eAAnB;EAAiC,WAAU;EACzC,UAAA,kBAAC,GAAD,EAAW,MAAM,GAAK,CAAA;CACS,CAAA,CACX;AACzB,CAAA,CAAA;AACD,EAAa,cAAc;AAE3B,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAkB,OAAnB;CACO;CACL,WAAW,EACT,2PACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAc,cAAc;AAE5B,IAAM,IAAgB,EAAkB,OAElC,IAAqB,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAkB,YAAnB;CACO;CACL,WAAW,EACT,oPACA,CACF;CACA,GAAI;AACL,CAAA,CACF;AACD,EAAmB,cAAc"}