@acronis-platform/ui-react 0.61.0 → 1.0.0

package/dist/components/ui/fitted-actions/fitted-actions.js

@@ -0,0 +1,139 @@
+import { jsx as p, jsxs as l, Fragment as G } from "react/jsx-runtime";
+import * as s from "react";
+import { cn as k } from "../../../lib/utils.js";
+import { Button as V, buttonVariants as I } from "../button/button.js";
+import { DropdownMenu as P, DropdownMenuTrigger as T, DropdownMenuContent as U, DropdownMenuItem as _ } from "../dropdown-menu/dropdown-menu.js";
+const D = 8;
+function q({
+  containerWidth: m,
+  itemWidths: n,
+  dropdownWidth: d,
+  gap: r = D
+}) {
+  const i = n.length;
+  if (i === 0) return 0;
+  const b = m - d;
+  let o = 0, c = 0;
+  for (let u = 0; u < i; u += 1) {
+    const h = o + (c > 0 ? r : 0) + (n[u] ?? 0);
+    if (h <= b)
+      o = h, c += 1;
+    else break;
+  }
+  return c;
+}
+const w = I({ variant: "ghost" }), H = s.forwardRef(
+  ({
+    actions: m = [],
+    showDropdown: n = !0,
+    moreLabel: d = "More",
+    gap: r = D,
+    onAction: i,
+    renderAction: b,
+    renderTrigger: o,
+    className: c,
+    style: u,
+    ...h
+  }, a) => {
+    const t = s.useMemo(
+      () => m.filter((e) => e.isDisplayed !== !1),
+      [m]
+    ), x = s.useRef(null), y = s.useRef(null), [E, S] = s.useState(t.length), j = s.useCallback(
+      (e) => {
+        x.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
+      },
+      [a]
+    );
+    s.useLayoutEffect(() => {
+      const e = x.current, f = y.current;
+      if (!n || !e || !f || typeof ResizeObserver > "u")
+        return;
+      const N = new ResizeObserver(() => {
+        var W;
+        const g = Array.from(f.children), $ = ((W = g[g.length - 1]) == null ? void 0 : W.offsetWidth) ?? 0, A = g.slice(0, t.length).map((B) => B.offsetWidth), R = e.clientWidth;
+        S(
+          R === 0 ? t.length : q({
+            containerWidth: R,
+            itemWidths: A,
+            dropdownWidth: $,
+            gap: r
+          })
+        );
+      });
+      return N.observe(e), () => N.disconnect();
+    }, [t, n, d, r]);
+    const C = n ? E : t.length, z = t.slice(0, C), F = n ? t.slice(C) : [], v = (e) => {
+      var f;
+      (f = e.onSelect) == null || f.call(e), i == null || i(e);
+    }, O = (e) => /* @__PURE__ */ l(
+      V,
+      {
+        variant: "ghost",
+        disabled: e.disabled,
+        onClick: () => v(e),
+        children: [
+          e.icon,
+          e.label
+        ]
+      }
+    ), M = o ? o({ label: d }) : /* @__PURE__ */ p(V, { variant: "ghost", children: d });
+    return /* @__PURE__ */ l(G, { children: [
+      /* @__PURE__ */ l(
+        "div",
+        {
+          ref: j,
+          "data-slot": "fitted-actions",
+          className: k("flex min-w-0 items-center overflow-hidden", c),
+          style: { gap: `${r}px`, ...u },
+          ...h,
+          children: [
+            z.map((e) => /* @__PURE__ */ p(s.Fragment, { children: b ? b(e, {
+              onSelect: () => v(e),
+              disabled: e.disabled
+            }) : O(e) }, e.id)),
+            F.length > 0 && /* @__PURE__ */ l(P, { children: [
+              /* @__PURE__ */ p(T, { render: M }),
+              /* @__PURE__ */ p(U, { align: "end", children: F.map((e) => /* @__PURE__ */ l(
+                _,
+                {
+                  disabled: e.disabled,
+                  onClick: () => v(e),
+                  className: k(
+                    e.divided && "mt-1 border-t border-border pt-1"
+                  ),
+                  children: [
+                    e.icon,
+                    e.label
+                  ]
+                },
+                e.id
+              )) })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ l(
+        "div",
+        {
+          ref: y,
+          "aria-hidden": "true",
+          className: "pointer-events-none invisible absolute left-0 top-0 flex",
+          style: { gap: `${r}px` },
+          children: [
+            t.map((e) => /* @__PURE__ */ l("span", { className: w, children: [
+              e.icon,
+              e.label
+            ] }, e.id)),
+            M
+          ]
+        }
+      )
+    ] });
+  }
+);
+H.displayName = "FittedActions";
+export {
+  H as FittedActions,
+  q as computeFittedVisibleCount
+};
+//# sourceMappingURL=fitted-actions.js.map

package/dist/components/ui/fitted-actions/fitted-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fitted-actions.js","sources":["../../../../src/components/ui/fitted-actions/fitted-actions.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { Button, buttonVariants } from '../button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\n\n// A responsive action row with automatic overflow — actions render inline in\n// priority order; when they don't fit the available width, the trailing ones\n// collapse into a \"More\" dropdown menu, recomputed on resize (ResizeObserver).\n//\n// Widths come from an off-screen \"tracing layer\" that renders every action at its\n// intrinsic width (ghost-button footprint) plus the overflow trigger; the pure\n// `computeFittedVisibleCount` turns those measurements into a visible count. All\n// state updates happen inside the ResizeObserver callback (never synchronously in\n// the effect), so before the first measurement every action is shown.\n\nconst DEFAULT_GAP = 8;\n\n/**\n * Pure overflow math (no DOM). Greedily fits leading actions into\n * `containerWidth - dropdownWidth`, accounting for the inter-item `gap`. Returns\n * how many render inline; the rest overflow into the menu. Exported for testing.\n */\nexport function computeFittedVisibleCount({\n  containerWidth,\n  itemWidths,\n  dropdownWidth,\n  gap = DEFAULT_GAP,\n}: {\n  containerWidth: number;\n  itemWidths: number[];\n  dropdownWidth: number;\n  gap?: number;\n}): number {\n  const count = itemWidths.length;\n  if (count === 0) return 0;\n  const available = containerWidth - dropdownWidth;\n  let used = 0;\n  let visible = 0;\n  for (let index = 0; index < count; index += 1) {\n    const next = used + (visible > 0 ? gap : 0) + (itemWidths[index] ?? 0);\n    if (next <= available) {\n      used = next;\n      visible += 1;\n    } else break;\n  }\n  return visible;\n}\n\nexport interface FittedAction {\n  /** Stable identity. */\n  id: string;\n  /** Visible label (also the overflow menu-item label). */\n  label: React.ReactNode;\n  /** Optional leading 16px icon. */\n  icon?: React.ReactNode;\n  /** Set `false` to omit the action entirely. */\n  isDisplayed?: boolean;\n  /** Render a divider above this item when it sits in the overflow menu. */\n  divided?: boolean;\n  disabled?: boolean;\n  /** Invoked when this action is chosen (inline click or menu select). */\n  onSelect?: () => void;\n}\n\nexport interface FittedActionsProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  /** Ordered actions; trailing items overflow into the menu first. Defaults to `[]`. */\n  actions?: FittedAction[];\n  /** Collapse overflow into a \"More\" menu. Default true. */\n  showDropdown?: boolean;\n  /** Label for the overflow trigger. Default \"More\". */\n  moreLabel?: React.ReactNode;\n  /** Inter-item gap in px (also reserved when measuring). Default 8. */\n  gap?: number;\n  /** Fired for any chosen action, after its own `onSelect`. */\n  onAction?: (action: FittedAction) => void;\n  /** Customize the inline action element. Default: a ghost `Button`. */\n  renderAction?: (\n    action: FittedAction,\n    api: { onSelect: () => void; disabled?: boolean }\n  ) => React.ReactNode;\n  /** Customize the overflow trigger (used as the menu trigger's `render`). Default: a ghost `Button`. */\n  renderTrigger?: (api: { label: React.ReactNode }) => React.ReactElement;\n}\n\nconst measureClass = buttonVariants({ variant: 'ghost' });\n\nconst FittedActions = React.forwardRef<HTMLDivElement, FittedActionsProps>(\n  (\n    {\n      actions = [],\n      showDropdown = true,\n      moreLabel = 'More',\n      gap = DEFAULT_GAP,\n      onAction,\n      renderAction,\n      renderTrigger,\n      className,\n      style,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const displayed = React.useMemo(\n      () => actions.filter((action) => action.isDisplayed !== false),\n      [actions]\n    );\n\n    const containerRef = React.useRef<HTMLDivElement | null>(null);\n    const measureRef = React.useRef<HTMLDivElement | null>(null);\n    const [visibleCount, setVisibleCount] = React.useState(displayed.length);\n\n    const setContainer = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        containerRef.current = node;\n        if (typeof forwardedRef === 'function') forwardedRef(node);\n        else if (forwardedRef) forwardedRef.current = node;\n      },\n      [forwardedRef]\n    );\n\n    React.useLayoutEffect(() => {\n      const container = containerRef.current;\n      const measure = measureRef.current;\n      // With no overflow menu, or no way to measure, show everything inline.\n      // Every state update happens inside the observer callback below (which\n      // fires an initial notification on observe), never synchronously here.\n      if (\n        !showDropdown ||\n        !container ||\n        !measure ||\n        typeof ResizeObserver === 'undefined'\n      )\n        return;\n      const observer = new ResizeObserver(() => {\n        const clones = Array.from(measure.children) as HTMLElement[];\n        const dropdownWidth = clones[clones.length - 1]?.offsetWidth ?? 0;\n        const itemWidths = clones\n          .slice(0, displayed.length)\n          .map((element) => element.offsetWidth);\n        const containerWidth = container.clientWidth;\n        setVisibleCount(\n          containerWidth === 0\n            ? displayed.length\n            : computeFittedVisibleCount({\n                containerWidth,\n                itemWidths,\n                dropdownWidth,\n                gap,\n              })\n        );\n      });\n      observer.observe(container);\n      return () => observer.disconnect();\n    }, [displayed, showDropdown, moreLabel, gap]);\n\n    const effectiveVisible = showDropdown ? visibleCount : displayed.length;\n    const inline = displayed.slice(0, effectiveVisible);\n    const overflow = showDropdown ? displayed.slice(effectiveVisible) : [];\n\n    const select = (action: FittedAction) => {\n      action.onSelect?.();\n      onAction?.(action);\n    };\n\n    const defaultRenderAction = (action: FittedAction) => (\n      <Button\n        variant=\"ghost\"\n        disabled={action.disabled}\n        onClick={() => select(action)}\n      >\n        {action.icon}\n        {action.label}\n      </Button>\n    );\n\n    const triggerElement = renderTrigger ? (\n      renderTrigger({ label: moreLabel })\n    ) : (\n      <Button variant=\"ghost\">{moreLabel}</Button>\n    );\n\n    return (\n      <>\n        <div\n          ref={setContainer}\n          data-slot=\"fitted-actions\"\n          className={cn('flex min-w-0 items-center overflow-hidden', className)}\n          style={{ gap: `${gap}px`, ...style }}\n          {...props}\n        >\n          {inline.map((action) => (\n            <React.Fragment key={action.id}>\n              {renderAction\n                ? renderAction(action, {\n                    onSelect: () => select(action),\n                    disabled: action.disabled,\n                  })\n                : defaultRenderAction(action)}\n            </React.Fragment>\n          ))}\n          {overflow.length > 0 && (\n            <DropdownMenu>\n              <DropdownMenuTrigger render={triggerElement} />\n              <DropdownMenuContent align=\"end\">\n                {overflow.map((action) => (\n                  <DropdownMenuItem\n                    key={action.id}\n                    disabled={action.disabled}\n                    onClick={() => select(action)}\n                    className={cn(\n                      action.divided && 'mt-1 border-t border-border pt-1'\n                    )}\n                  >\n                    {action.icon}\n                    {action.label}\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )}\n        </div>\n        {/* Off-screen tracing layer: intrinsic widths of every action (ghost\n            footprint) + the overflow trigger, read on resize. Not part of the\n            focus order or the a11y tree. */}\n        <div\n          ref={measureRef}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none invisible absolute left-0 top-0 flex\"\n          style={{ gap: `${gap}px` }}\n        >\n          {displayed.map((action) => (\n            <span key={action.id} className={measureClass}>\n              {action.icon}\n              {action.label}\n            </span>\n          ))}\n          {triggerElement}\n        </div>\n      </>\n    );\n  }\n);\nFittedActions.displayName = 'FittedActions';\n\nexport { FittedActions };\n"],"names":["DEFAULT_GAP","computeFittedVisibleCount","containerWidth","itemWidths","dropdownWidth","gap","count","available","used","visible","index","next","measureClass","buttonVariants","FittedActions","React","actions","showDropdown","moreLabel","onAction","renderAction","renderTrigger","className","style","props","forwardedRef","displayed","action","containerRef","measureRef","visibleCount","setVisibleCount","setContainer","node","container","measure","observer","clones","_a","element","effectiveVisible","inline","overflow","select","defaultRenderAction","jsxs","Button","triggerElement","jsx","Fragment","cn","DropdownMenu","DropdownMenuTrigger","DropdownMenuContent","DropdownMenuItem"],"mappings":"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"}

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

@@ -1,104 +1,114 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import * as m from "react";
-import { CalendarIcon as C } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as p } from "../../../lib/utils.js";
-const E = m.forwardRef(
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import * as h from "react";
+import { CalendarIcon as E } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as i } from "../../../lib/utils.js";
+const F = h.forwardRef(
   ({
     className: k,
-    id: h,
-    label: e,
-    required: s,
-    description: f,
-    error: a,
-    pickerType: N = "date",
-    placeholder: w,
-    value: o,
+    style: m,
+    id: f,
+    label: a,
+    required: v,
+    description: N,
+    error: o,
+    pickerType: w = "date",
+    placeholder: I,
+    value: t,
     startDate: l,
-    endDate: t,
-    separator: I = "–",
-    open: b,
+    endDate: n,
+    separator: y = "–",
+    open: s,
     disabled: d,
-    "aria-invalid": y,
-    ...R
-  }, j) => {
-    const P = m.useId(), n = h ?? P, v = `${n}-message`, c = a != null && a !== "", q = c || y, u = c ? a : f, g = u != null && u !== "", x = N === "dateRange", z = x ? l != null && l !== "" || t != null && t !== "" : o != null && o !== "";
-    return /* @__PURE__ */ i("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)]", children: [
-      e != null && e !== "" && /* @__PURE__ */ i(
-        "label",
-        {
-          htmlFor: n,
-          className: p(
-            "flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4",
-            d ? "text-[var(--ui-input-date-picker-global-label-color-disabled)]" : "text-[var(--ui-input-date-picker-global-label-color-idle)]"
+    "aria-invalid": R,
+    ...j
+  }, z) => {
+    const P = h.useId(), u = f ?? P, g = `${u}-message`, p = o != null && o !== "", q = p || R, c = p ? o : N, b = c != null && c !== "", x = w === "dateRange", C = x ? l != null && l !== "" || n != null && n !== "" : t != null && t !== "";
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        className: i(
+          "group/field flex min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]",
+          k
+        ),
+        style: m,
+        children: [
+          a != null && a !== "" && /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: u,
+              className: i(
+                "flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4",
+                d ? "text-[var(--ui-input-date-picker-global-label-color-disabled)]" : "text-[var(--ui-input-date-picker-global-label-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-global-label-color-hover)]"
+              ),
+              children: [
+                a,
+                v && /* @__PURE__ */ r(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "text-[var(--ui-input-date-picker-global-required-color)]",
+                    children: "*"
+                  }
+                )
+              ]
+            }
           ),
-          children: [
-            e,
-            s && /* @__PURE__ */ r(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: "text-[var(--ui-input-date-picker-global-required-color)]",
-                children: "*"
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ i(
-        "button",
-        {
-          ref: j,
-          id: n,
-          type: "button",
-          disabled: d,
-          "aria-invalid": q || void 0,
-          "aria-required": s || void 0,
-          "aria-haspopup": "dialog",
-          "aria-expanded": b || void 0,
-          "aria-describedby": g ? v : void 0,
-          "data-open": b || void 0,
-          className: p(
-            "group flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer 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",
-            "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)]",
-            "not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)]",
-            "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)]",
-            "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)]",
-            "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)]",
-            k
+          /* @__PURE__ */ e(
+            "button",
+            {
+              ref: z,
+              id: u,
+              type: "button",
+              disabled: d,
+              "aria-invalid": q || void 0,
+              "aria-required": v || void 0,
+              "aria-haspopup": "dialog",
+              "aria-expanded": s || void 0,
+              "aria-describedby": b ? g : void 0,
+              "data-open": s || void 0,
+              className: i(
+                "group/trigger flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer 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",
+                "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)] enabled:not-aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)]",
+                "not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)]",
+                "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)]",
+                "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)] enabled:aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)] 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)]",
+                "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)]"
+              ),
+              ...j,
+              children: [
+                C ? x ? /* @__PURE__ */ e("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate", children: [
+                  /* @__PURE__ */ r("span", { children: l }),
+                  /* @__PURE__ */ r("span", { className: "text-[var(--ui-input-date-picker-global-separator-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-separator-color-disabled)]", children: y }),
+                  /* @__PURE__ */ r("span", { children: n })
+                ] }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate", children: t }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]", children: I }),
+                /* @__PURE__ */ r("span", { className: "flex size-[var(--ui-input-date-picker-global-icon-box-size)] shrink-0 items-center justify-center", children: /* @__PURE__ */ r(
+                  E,
+                  {
+                    size: 16,
+                    className: "text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]/trigger:text-[var(--ui-input-date-picker-error-icon-color-idle)] group-aria-[invalid=true]/trigger:group-hover/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)] group-aria-[invalid=true]/trigger:group-data-[open]/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)]"
+                  }
+                ) })
+              ]
+            }
           ),
-          ...R,
-          children: [
-            z ? x ? /* @__PURE__ */ i("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate", children: [
-              /* @__PURE__ */ r("span", { children: l }),
-              /* @__PURE__ */ r("span", { className: "text-[var(--ui-input-date-picker-global-separator-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-separator-color-disabled)]", children: I }),
-              /* @__PURE__ */ r("span", { children: t })
-            ] }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate", children: o }) : /* @__PURE__ */ r("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)]", children: w }),
-            /* @__PURE__ */ r(
-              C,
-              {
-                size: 16,
-                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)]"
-              }
-            )
-          ]
-        }
-      ),
-      g && /* @__PURE__ */ r(
-        "p",
-        {
-          id: v,
-          className: p(
-            "text-xs leading-4",
-            c ? "text-[var(--ui-input-date-picker-error-error-msg-color)]" : d ? "text-[var(--ui-input-date-picker-normal-description-color-disabled)]" : "text-[var(--ui-input-date-picker-normal-description-color-idle)]"
-          ),
-          children: u
-        }
-      )
-    ] });
+          b && /* @__PURE__ */ r(
+            "p",
+            {
+              id: g,
+              className: i(
+                "text-xs leading-4",
+                p ? "text-[var(--ui-input-date-picker-error-error-msg-color)]" : d ? "text-[var(--ui-input-date-picker-normal-description-color-disabled)]" : "text-[var(--ui-input-date-picker-normal-description-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-normal-description-color-hover)]"
+              ),
+              children: c
+            }
+          )
+        ]
+      }
+    );
   }
 );
-E.displayName = "InputDatePicker";
+F.displayName = "InputDatePicker";
 export {
-  E as InputDatePicker
+  F as InputDatePicker
 };
 //# sourceMappingURL=input-date-picker.js.map

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 cursor-pointer 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":"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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`. The\n// label / value / placeholder / separator / description / icon text colors switch\n// to their `-hover` token on trigger hover **or** `open` — the Figma design groups\n// hover and the open (active) state under one visual treatment for these parts.\n//\n// `ref` targets the trigger `<button>`; `className` and `style` both target the field\n// wrapper (label + box + message), so sizing the field works the same way whichever\n// one a consumer reaches for.\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      style,\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\n        className={cn(\n          'group/field flex min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]',\n          className\n        )}\n        style={style}\n      >\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)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-global-label-color-hover)]'\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/trigger flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer 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)] enabled:not-aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)]',\n            'not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)]',\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)] enabled:aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)] 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          )}\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-hover/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-disabled/trigger: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-hover/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]\">\n              {placeholder}\n            </span>\n          )}\n          <span className=\"flex size-[var(--ui-input-date-picker-global-icon-box-size)] shrink-0 items-center justify-center\">\n            <CalendarIcon\n              size={16}\n              className=\"text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]/trigger:text-[var(--ui-input-date-picker-error-icon-color-idle)] group-aria-[invalid=true]/trigger:group-hover/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)] group-aria-[invalid=true]/trigger:group-data-[open]/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)]\"\n            />\n          </span>\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)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-normal-description-color-hover)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputDatePicker.displayName = 'InputDatePicker';\n\nexport { InputDatePicker };\n"],"names":["InputDatePicker","React","className","style","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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"}