@acronis-platform/ui-react 4.0.0 → 5.0.0

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

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

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

@@ -1 +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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"}
+{"version":3,"file":"fitted-actions.js","names":[],"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"],"mappings":"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"}

package/dist/components/ui/form/form.js

@@ -1,16 +1,15 @@
-import { jsx as m } from "react/jsx-runtime";
-import { Form as f } from "@base-ui/react/form";
-import { cn as l } from "../../../lib/utils.js";
-function a({ className: o, ...r }) {
-  return /* @__PURE__ */ m(
-    f,
-    {
-      className: l("flex w-full flex-col gap-6", o),
-      ...r
-    }
-  );
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Form as n } from "@base-ui/react/form";
+//#region src/components/ui/form/form.tsx
+function r({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n, {
+		className: e("flex w-full flex-col gap-6", r),
+		...i
+	});
 }
-export {
-  a as Form
-};
-//# sourceMappingURL=form.js.map
+//#endregion
+export { r as Form };
+
+//# sourceMappingURL=form.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":["../../../../src/components/ui/form/form.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Form as FormPrimitive,\n  type FormProps as BaseFormProps,\n} from '@base-ui/react/form';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `form`\n// (packages/ui-legacy/src/components/ui/form.tsx), rebuilt on Base UI's Form.\n// The legacy form was a react-hook-form wrapper (FormProvider/Controller); this\n// version drops that dependency and coordinates the ui-react `Field`s directly via\n// Base UI's native form: it collects values by each Field's `name`, runs their\n// validation on submit (or per `validationMode`), surfaces server `errors` keyed\n// by field name, and calls `onFormSubmit(values)` only when all fields are valid.\nexport interface FormProps<\n  FormValues extends Record<string, unknown> = Record<string, unknown>,\n> extends Omit<BaseFormProps<FormValues>, 'className'> {\n  className?: string;\n}\n\nfunction Form<\n  FormValues extends Record<string, unknown> = Record<string, unknown>,\n>({ className, ...props }: FormProps<FormValues>) {\n  return (\n    <FormPrimitive\n      className={cn('flex w-full flex-col gap-6', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Form };\n"],"names":["Form","className","props","jsx","FormPrimitive","cn"],"mappings":";;;AAsBA,SAASA,EAEP,EAAE,WAAAC,GAAW,GAAGC,KAAgC;AAChD,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAG,8BAA8BJ,CAAS;AAAA,MACpD,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"form.js","names":[],"sources":["../../../../src/components/ui/form/form.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Form as FormPrimitive,\n  type FormProps as BaseFormProps,\n} from '@base-ui/react/form';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform/shadcn-uikit`'s `form`\n// (packages/ui-legacy/src/components/ui/form.tsx), rebuilt on Base UI's Form.\n// The legacy form was a react-hook-form wrapper (FormProvider/Controller); this\n// version drops that dependency and coordinates the ui-react `Field`s directly via\n// Base UI's native form: it collects values by each Field's `name`, runs their\n// validation on submit (or per `validationMode`), surfaces server `errors` keyed\n// by field name, and calls `onFormSubmit(values)` only when all fields are valid.\nexport interface FormProps<\n  FormValues extends Record<string, unknown> = Record<string, unknown>,\n> extends Omit<BaseFormProps<FormValues>, 'className'> {\n  className?: string;\n}\n\nfunction Form<\n  FormValues extends Record<string, unknown> = Record<string, unknown>,\n>({ className, ...props }: FormProps<FormValues>) {\n  return (\n    <FormPrimitive\n      className={cn('flex w-full flex-col gap-6', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Form };\n"],"mappings":";;;;;AAsBA,SAAS,EAEP,EAAE,cAAW,GAAG,KAAgC;CAChD,OACE,kBAAC,GAAD;EACE,WAAW,EAAG,8BAA8B,CAAS;EACrD,GAAI;CACL,CAAA;AAEL"}