@acronis-platform/ui-react 4.0.0 → 4.1.0

package/dist/components/ui/page-header/page-header.js

@@ -1,184 +1,123 @@
-import { jsx as a, jsxs as p, Fragment as v } from "react/jsx-runtime";
-import * as n from "react";
-import { mergeProps as N } from "@base-ui/react/merge-props";
-import { useRender as P } from "@base-ui/react/use-render";
-import { EllipsisIcon as A, CircleInfoIcon as C } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as i } from "../../../lib/utils.js";
-import { DropdownMenu as D, DropdownMenuTrigger as I, DropdownMenuContent as M, DropdownMenuItem as S } from "../dropdown-menu/dropdown-menu.js";
-import { ButtonIcon as O } from "../button-icon/button-icon.js";
-import { Tooltip as j, TooltipTrigger as z, TooltipContent as B } from "../tooltip/tooltip.js";
-import { Tag as F } from "../tag/tag.js";
-import { Button as E } from "../button/button.js";
-function H() {
-  const e = n.useRef(null), r = n.useRef(null), [t, c] = n.useState(!1);
-  return n.useEffect(() => {
-    const o = e.current, s = r.current;
-    if (!o || !s) return;
-    const l = () => c(s.scrollWidth > o.clientWidth);
-    l();
-    const d = new ResizeObserver(l);
-    return d.observe(o), () => d.disconnect();
-  }), { containerRef: e, measureRef: r, collapsed: t };
+import { cn as e } from "../../../lib/utils.js";
+import { ButtonIcon as t } from "../button-icon/button-icon.js";
+import { Tooltip as n, TooltipContent as r, TooltipTrigger as i } from "../tooltip/tooltip.js";
+import { Button as a } from "../button/button.js";
+import { DropdownMenu as o, DropdownMenuContent as s, DropdownMenuItem as c, DropdownMenuTrigger as l } from "../dropdown-menu/dropdown-menu.js";
+import { Tag as u } from "../tag/tag.js";
+import * as d from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { CircleInfoIcon as h, EllipsisIcon as g } from "@acronis-platform/icons-react/stroke-mono";
+import { useRender as _ } from "@base-ui/react/use-render";
+import { mergeProps as v } from "@base-ui/react/merge-props";
+//#region src/components/ui/page-header/page-header.tsx
+function y() {
+	let e = d.useRef(null), t = d.useRef(null), [n, r] = d.useState(!1);
+	return d.useEffect(() => {
+		let n = e.current, i = t.current;
+		if (!n || !i) return;
+		let a = () => r(i.scrollWidth > n.clientWidth);
+		a();
+		let o = new ResizeObserver(a);
+		return o.observe(n), () => o.disconnect();
+	}), {
+		containerRef: e,
+		measureRef: t,
+		collapsed: n
+	};
 }
-const W = n.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ a(
-  "div",
-  {
-    ref: t,
-    "data-slot": "page-header",
-    role: "banner",
-    className: i("flex w-full flex-col items-start gap-1", e),
-    ...r
-  }
-));
-W.displayName = "PageHeader";
-const k = n.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ a(
-  "div",
-  {
-    ref: t,
-    "data-slot": "page-header-row",
-    className: i("flex w-full items-center gap-2", e),
-    ...r
-  }
-));
-k.displayName = "PageHeaderRow";
-const $ = n.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ a(
-  "h1",
-  {
-    ref: t,
-    "data-slot": "page-header-title",
-    className: i(
-      "shrink-0 whitespace-nowrap text-2xl font-normal leading-8 text-foreground",
-      e
-    ),
-    ...r
-  }
-));
-$.displayName = "PageHeaderTitle";
-const q = n.forwardRef(({ className: e, children: r, ...t }, c) => {
-  const o = n.Children.toArray(r), { containerRef: s, measureRef: l, collapsed: d } = H(), m = d && o.length > 1, g = m ? o.slice(1) : [], u = /* @__PURE__ */ p(v, { children: [
-    m ? /* @__PURE__ */ p(v, { children: [
-      o[0],
-      /* @__PURE__ */ p(j, { children: [
-        /* @__PURE__ */ a(z, { render: /* @__PURE__ */ a(F, { icon: /* @__PURE__ */ a(C, { size: 16 }) }), children: `+${g.length}` }),
-        /* @__PURE__ */ a(B, { children: /* @__PURE__ */ a("ul", { children: g.map((w, R) => {
-          var h;
-          return /* @__PURE__ */ a("li", { children: (h = w.props) == null ? void 0 : h.children }, R);
-        }) }) })
-      ] })
-    ] }) : o,
-    o.length > 1 && /* @__PURE__ */ a(
-      "div",
-      {
-        ref: l,
-        "aria-hidden": !0,
-        className: "invisible absolute flex items-center gap-2",
-        children: o
-      }
-    )
-  ] });
-  return P({
-    ref: [c, s],
-    defaultTagName: "div",
-    props: {
-      "data-slot": "page-header-tags",
-      ...N(
-        {
-          className: i(
-            "flex min-w-0 flex-1 items-center gap-2 overflow-hidden",
-            e
-          ),
-          children: u
-        },
-        t
-      )
-    }
-  });
+var b = d.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ p("div", {
+	ref: r,
+	"data-slot": "page-header",
+	role: "banner",
+	className: e("flex w-full flex-col items-start gap-1", t),
+	...n
+}));
+b.displayName = "PageHeader";
+var x = d.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ p("div", {
+	ref: r,
+	"data-slot": "page-header-row",
+	className: e("flex w-full items-center gap-2", t),
+	...n
+}));
+x.displayName = "PageHeaderRow";
+var S = d.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ p("h1", {
+	ref: r,
+	"data-slot": "page-header-title",
+	className: e("shrink-0 whitespace-nowrap text-2xl font-normal leading-8 text-foreground", t),
+	...n
+}));
+S.displayName = "PageHeaderTitle";
+var C = d.forwardRef(({ className: t, children: a, ...o }, s) => {
+	let c = d.Children.toArray(a), { containerRef: l, measureRef: g, collapsed: b } = y(), x = b && c.length > 1, S = x ? c.slice(1) : [], C = /* @__PURE__ */ m(f, { children: [x ? /* @__PURE__ */ m(f, { children: [c[0], /* @__PURE__ */ m(n, { children: [/* @__PURE__ */ p(i, {
+		render: /* @__PURE__ */ p(u, { icon: /* @__PURE__ */ p(h, { size: 16 }) }),
+		children: `+${S.length}`
+	}), /* @__PURE__ */ p(r, { children: /* @__PURE__ */ p("ul", { children: S.map((e, t) => /* @__PURE__ */ p("li", { children: e.props?.children }, t)) }) })] })] }) : c, c.length > 1 && /* @__PURE__ */ p("div", {
+		ref: g,
+		"aria-hidden": !0,
+		className: "invisible absolute flex items-center gap-2",
+		children: c
+	})] });
+	return _({
+		ref: [s, l],
+		defaultTagName: "div",
+		props: {
+			"data-slot": "page-header-tags",
+			...v({
+				className: e("flex min-w-0 flex-1 items-center gap-2 overflow-hidden", t),
+				children: C
+			}, o)
+		}
+	});
 });
-q.displayName = "PageHeaderTags";
-const y = (e) => {
-  var r;
-  return e.type === E && ((r = e.props) == null ? void 0 : r.variant) === "secondary";
-}, G = n.forwardRef(({ className: e, children: r, ...t }, c) => {
-  const o = n.Children.toArray(r), s = o.filter(y), { containerRef: l, measureRef: d, collapsed: m } = H(), g = m && s.length > 0, u = /* @__PURE__ */ p(D, { children: [
-    /* @__PURE__ */ a(
-      I,
-      {
-        render: /* @__PURE__ */ a(O, { variant: "secondary", "aria-label": "More actions", children: /* @__PURE__ */ a(A, { size: 16 }) })
-      }
-    ),
-    /* @__PURE__ */ a(M, { align: "end", children: s.map((f, x) => {
-      const { variant: L, children: T, ...b } = f.props;
-      return /* @__PURE__ */ a(
-        S,
-        {
-          ...b,
-          children: T
-        },
-        x
-      );
-    }) })
-  ] }, "page-header-actions-more"), w = (f) => y(f) ? f === s[0] ? [u] : [] : [f], R = g ? o.flatMap(w) : o, h = /* @__PURE__ */ p(v, { children: [
-    R,
-    s.length > 0 && /* @__PURE__ */ a(
-      "div",
-      {
-        ref: d,
-        "aria-hidden": !0,
-        className: "invisible absolute flex items-center gap-4",
-        children: o
-      }
-    )
-  ] });
-  return P({
-    ref: [c, l],
-    defaultTagName: "div",
-    props: {
-      "data-slot": "page-header-actions",
-      ...N(
-        {
-          className: i(
-            "flex min-w-0 flex-1 items-center justify-end gap-4 overflow-hidden",
-            e
-          ),
-          children: h
-        },
-        t
-      )
-    }
-  });
+C.displayName = "PageHeaderTags";
+var w = (e) => e.type === a && e.props?.variant === "secondary", T = d.forwardRef(({ className: n, children: r, ...i }, a) => {
+	let u = d.Children.toArray(r), h = u.filter(w), { containerRef: b, measureRef: x, collapsed: S } = y(), C = S && h.length > 0, T = /* @__PURE__ */ m(o, { children: [/* @__PURE__ */ p(l, { render: /* @__PURE__ */ p(t, {
+		variant: "secondary",
+		"aria-label": "More actions",
+		children: /* @__PURE__ */ p(g, { size: 16 })
+	}) }), /* @__PURE__ */ p(s, {
+		align: "end",
+		children: h.map((e, t) => {
+			let { variant: n, children: r, ...i } = e.props;
+			return /* @__PURE__ */ p(c, {
+				...i,
+				children: r
+			}, t);
+		})
+	})] }, "page-header-actions-more"), E = C ? u.flatMap((e) => w(e) ? e === h[0] ? [T] : [] : [e]) : u, D = /* @__PURE__ */ m(f, { children: [E, h.length > 0 && /* @__PURE__ */ p("div", {
+		ref: x,
+		"aria-hidden": !0,
+		className: "invisible absolute flex items-center gap-4",
+		children: u
+	})] });
+	return _({
+		ref: [a, b],
+		defaultTagName: "div",
+		props: {
+			"data-slot": "page-header-actions",
+			...v({
+				className: e("flex min-w-0 flex-1 items-center justify-end gap-4 overflow-hidden", n),
+				children: D
+			}, i)
+		}
+	});
 });
-G.displayName = "PageHeaderActions";
-const J = n.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ a(
-  "div",
-  {
-    ref: t,
-    "data-slot": "page-header-description-row",
-    className: i("flex max-w-lg items-start gap-2", e),
-    ...r
-  }
-));
-J.displayName = "PageHeaderDescriptionRow";
-const K = n.forwardRef(({ className: e, ...r }, t) => /* @__PURE__ */ a(
-  "p",
-  {
-    ref: t,
-    "data-slot": "page-header-description",
-    className: i(
-      "min-w-0 flex-1 text-sm font-normal leading-6 text-muted-foreground",
-      e
-    ),
-    ...r
-  }
-));
-K.displayName = "PageHeaderDescription";
-export {
-  W as PageHeader,
-  G as PageHeaderActions,
-  K as PageHeaderDescription,
-  J as PageHeaderDescriptionRow,
-  k as PageHeaderRow,
-  q as PageHeaderTags,
-  $ as PageHeaderTitle,
-  H as useRowOverflow
-};
-//# sourceMappingURL=page-header.js.map
+T.displayName = "PageHeaderActions";
+var E = d.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ p("div", {
+	ref: r,
+	"data-slot": "page-header-description-row",
+	className: e("flex max-w-lg items-start gap-2", t),
+	...n
+}));
+E.displayName = "PageHeaderDescriptionRow";
+var D = d.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ p("p", {
+	ref: r,
+	"data-slot": "page-header-description",
+	className: e("min-w-0 flex-1 text-sm font-normal leading-6 text-muted-foreground", t),
+	...n
+}));
+D.displayName = "PageHeaderDescription";
+//#endregion
+export { b as PageHeader, T as PageHeaderActions, D as PageHeaderDescription, E as PageHeaderDescriptionRow, x as PageHeaderRow, C as PageHeaderTags, S as PageHeaderTitle, y as useRowOverflow };
+
+//# sourceMappingURL=page-header.js.map

package/dist/components/ui/page-header/page-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.js","sources":["../../../../src/components/ui/page-header/page-header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { CircleInfoIcon, EllipsisIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Button, type ButtonProps } from '../button';\nimport { ButtonIcon } from '../button-icon';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\nimport { Tag } from '../tag';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// The page header region from the Figma \"PageHeader\" component (shadcn-uikit /\n// ui-react file, node 2905-7678): a title row (title left, an optional edit\n// icon-button, a tags slot, an actions slot) and an optional description row\n// (text + an optional edit icon-button), capped at 512px. The design's\n// breadcrumb is a separate sibling above PageHeader (see the \"Breakpoints\"\n// page composition), not one of its own parts — render a `Breadcrumb` next to\n// it, don't nest one inside. Title uses the design's `headings/title` style\n// (24px/32px, regular) in `--ui-text-on-surface-primary`; the description uses\n// `link/default` (14px/24px, regular) in `--ui-text-on-surface-secondary` — the\n// only two colors here. The edit affordance is a plain `ButtonIcon` the\n// consumer places as a sibling; PageHeader doesn't own a dedicated part for it\n// since it's the same atom either row.\n\n// Detects whether a row's full-width content (measured off-screen, at natural\n// size) exceeds the space actually available to it — the Figma \"Breakpoints\"\n// page requires an all-or-nothing collapse (fit everything, or collapse), not\n// a partial \"show however many fit\" reflow. Re-measures on resize and after\n// every render (children content, e.g. tag count, isn't in a dependency array).\n// Unlike `useIsOverflowing` in sidebar-primary.tsx (which measures one element\n// against itself and returns a bare boolean), this compares a hidden\n// full-size clone against the live container and returns the refs alongside\n// the collapsed flag.\nfunction useRowOverflow() {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const measureRef = React.useRef<HTMLDivElement>(null);\n  const [collapsed, setCollapsed] = React.useState(false);\n\n  React.useEffect(() => {\n    const container = containerRef.current;\n    const measure = measureRef.current;\n    if (!container || !measure) return;\n\n    const recalc = () =>\n      setCollapsed(measure.scrollWidth > container.clientWidth);\n\n    recalc();\n    const observer = new ResizeObserver(recalc);\n    observer.observe(container);\n    return () => observer.disconnect();\n  });\n\n  return { containerRef, measureRef, collapsed };\n}\n\nconst PageHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"page-header\"\n    role=\"banner\"\n    className={cn('flex w-full flex-col items-start gap-1', className)}\n    {...props}\n  />\n));\nPageHeader.displayName = 'PageHeader';\n\n// The title row: title, optional edit button, tags slot, actions slot.\nconst PageHeaderRow = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"page-header-row\"\n    className={cn('flex w-full items-center gap-2', className)}\n    {...props}\n  />\n));\nPageHeaderRow.displayName = 'PageHeaderRow';\n\nconst PageHeaderTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h1\n    ref={ref}\n    data-slot=\"page-header-title\"\n    className={cn(\n      'shrink-0 whitespace-nowrap text-2xl font-normal leading-8 text-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nPageHeaderTitle.displayName = 'PageHeaderTitle';\n\ntype TagElement = React.ReactElement<{ children?: React.ReactNode }>;\n\n// The tags slot: grows to share the row's remaining width with the actions\n// slot (so actions stay flush right even when tags are omitted entirely).\n// Per the Figma \"Breakpoints\" page annotation: if all tags don't fit, show\n// only the first tag and fold the rest under a \"+#\" tag whose tooltip lists\n// their labels on hover — not a partial \"show however many fit\" reflow.\nconst PageHeaderTags = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n  const items = React.Children.toArray(children) as TagElement[];\n  const { containerRef, measureRef, collapsed } = useRowOverflow();\n  const showOverflow = collapsed && items.length > 1;\n  const hiddenItems = showOverflow ? items.slice(1) : [];\n\n  const tagsChildren = (\n    <>\n      {showOverflow ? (\n        <>\n          {items[0]}\n          <Tooltip>\n            <TooltipTrigger render={<Tag icon={<CircleInfoIcon size={16} />} />}>\n              {`+${hiddenItems.length}`}\n            </TooltipTrigger>\n            <TooltipContent>\n              <ul>\n                {hiddenItems.map((item, index) => (\n                  <li key={index}>{item.props?.children}</li>\n                ))}\n              </ul>\n            </TooltipContent>\n          </Tooltip>\n        </>\n      ) : (\n        items\n      )}\n      {items.length > 1 && (\n        <div\n          ref={measureRef}\n          aria-hidden\n          className=\"invisible absolute flex items-center gap-2\"\n        >\n          {items}\n        </div>\n      )}\n    </>\n  );\n\n  return useRender({\n    ref: [ref, containerRef],\n    defaultTagName: 'div',\n    props: {\n      'data-slot': 'page-header-tags',\n      ...mergeProps<'div'>(\n        {\n          className: cn(\n            'flex min-w-0 flex-1 items-center gap-2 overflow-hidden',\n            className\n          ),\n          children: tagsChildren,\n        },\n        props\n      ),\n    },\n  });\n});\nPageHeaderTags.displayName = 'PageHeaderTags';\n\ntype ActionElement = React.ReactElement<\n  Omit<ButtonProps, 'render'> & {\n    // Only the element form is meaningful once folded — a function-form\n    // render receives Button's own state shape, not the \"More\" menu item's.\n    render?: React.ReactElement;\n  }\n>;\n\n// Fold only reduces a secondary action to a generic \"Menu Item\" label — the\n// Figma \"Breakpoints\" page annotation and its \"More\" menu mockup only cover a\n// plain button with a single click action. A trigger-style component (e.g.\n// ButtonMenu, which opens its own menu rather than firing one action) has no\n// single action to reduce to, so it's excluded even if given `variant=\"secondary\"`.\nconst isSecondaryAction = (item: ActionElement) =>\n  item.type === Button && item.props?.variant === 'secondary';\n\n// The actions slot: grows to share the row's remaining width with the tags\n// slot. Per the Figma \"Breakpoints\" page annotation: if all buttons don't\n// fit, fold all secondary buttons under a single \"More\" ButtonIcon — primary\n// buttons are never hidden.\nconst PageHeaderActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n  const items = React.Children.toArray(children) as ActionElement[];\n  const secondaryItems = items.filter(isSecondaryAction);\n  const { containerRef, measureRef, collapsed } = useRowOverflow();\n  const showOverflow = collapsed && secondaryItems.length > 0;\n\n  // Each secondary item becomes zero or one output items: dropped, except\n  // the first (in original order), which becomes the \"More\" menu holding\n  // all of them — hence `flatMap` over `map`/`filter`.\n  const moreButton = (\n    <DropdownMenu key=\"page-header-actions-more\">\n      <DropdownMenuTrigger\n        render={\n          <ButtonIcon variant=\"secondary\" aria-label=\"More actions\">\n            <EllipsisIcon size={16} />\n          </ButtonIcon>\n        }\n      />\n      <DropdownMenuContent align=\"end\">\n        {secondaryItems.map((secondaryItem, index) => {\n          const { variant, children, ...rest } = secondaryItem.props;\n          return (\n            <DropdownMenuItem\n              key={index}\n              {...(rest as React.ComponentPropsWithoutRef<typeof DropdownMenuItem>)}\n            >\n              {children}\n            </DropdownMenuItem>\n          );\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n\n  const collapseSecondaryActions = (item: ActionElement) => {\n    if (!isSecondaryAction(item)) return [item];\n    const isFirstSecondaryAction = item === secondaryItems[0];\n    return isFirstSecondaryAction ? [moreButton] : [];\n  };\n\n  const visibleItems = showOverflow\n    ? items.flatMap(collapseSecondaryActions)\n    : items;\n\n  const actionsChildren = (\n    <>\n      {visibleItems}\n      {secondaryItems.length > 0 && (\n        <div\n          ref={measureRef}\n          aria-hidden\n          className=\"invisible absolute flex items-center gap-4\"\n        >\n          {items}\n        </div>\n      )}\n    </>\n  );\n\n  return useRender({\n    ref: [ref, containerRef],\n    defaultTagName: 'div',\n    props: {\n      'data-slot': 'page-header-actions',\n      ...mergeProps<'div'>(\n        {\n          className: cn(\n            'flex min-w-0 flex-1 items-center justify-end gap-4 overflow-hidden',\n            className\n          ),\n          children: actionsChildren,\n        },\n        props\n      ),\n    },\n  });\n});\nPageHeaderActions.displayName = 'PageHeaderActions';\n\n// The description row: caps the text (+ its optional edit button) at 512px,\n// matching the Figma's explicit \"Description max width 512px\" note.\nconst PageHeaderDescriptionRow = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"page-header-description-row\"\n    className={cn('flex max-w-lg items-start gap-2', className)}\n    {...props}\n  />\n));\nPageHeaderDescriptionRow.displayName = 'PageHeaderDescriptionRow';\n\nconst PageHeaderDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    data-slot=\"page-header-description\"\n    className={cn(\n      'min-w-0 flex-1 text-sm font-normal leading-6 text-muted-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nPageHeaderDescription.displayName = 'PageHeaderDescription';\n\nexport {\n  PageHeader,\n  PageHeaderRow,\n  PageHeaderTitle,\n  PageHeaderTags,\n  PageHeaderActions,\n  PageHeaderDescriptionRow,\n  PageHeaderDescription,\n  useRowOverflow,\n};\n"],"names":["useRowOverflow","containerRef","React","measureRef","collapsed","setCollapsed","container","measure","recalc","observer","PageHeader","className","props","ref","jsx","cn","PageHeaderRow","PageHeaderTitle","PageHeaderTags","children","items","showOverflow","hiddenItems","tagsChildren","jsxs","Fragment","Tooltip","TooltipTrigger","Tag","CircleInfoIcon","TooltipContent","item","index","_a","useRender","mergeProps","isSecondaryAction","Button","PageHeaderActions","secondaryItems","moreButton","DropdownMenu","DropdownMenuTrigger","ButtonIcon","EllipsisIcon","DropdownMenuContent","secondaryItem","variant","rest","DropdownMenuItem","collapseSecondaryActions","visibleItems","actionsChildren","PageHeaderDescriptionRow","PageHeaderDescription"],"mappings":"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"}
+{"version":3,"file":"page-header.js","names":[],"sources":["../../../../src/components/ui/page-header/page-header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { CircleInfoIcon, EllipsisIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Button, type ButtonProps } from '../button';\nimport { ButtonIcon } from '../button-icon';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\nimport { Tag } from '../tag';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// The page header region from the Figma \"PageHeader\" component (shadcn-uikit /\n// ui-react file, node 2905-7678): a title row (title left, an optional edit\n// icon-button, a tags slot, an actions slot) and an optional description row\n// (text + an optional edit icon-button), capped at 512px. The design's\n// breadcrumb is a separate sibling above PageHeader (see the \"Breakpoints\"\n// page composition), not one of its own parts — render a `Breadcrumb` next to\n// it, don't nest one inside. Title uses the design's `headings/title` style\n// (24px/32px, regular) in `--ui-text-on-surface-primary`; the description uses\n// `link/default` (14px/24px, regular) in `--ui-text-on-surface-secondary` — the\n// only two colors here. The edit affordance is a plain `ButtonIcon` the\n// consumer places as a sibling; PageHeader doesn't own a dedicated part for it\n// since it's the same atom either row.\n\n// Detects whether a row's full-width content (measured off-screen, at natural\n// size) exceeds the space actually available to it — the Figma \"Breakpoints\"\n// page requires an all-or-nothing collapse (fit everything, or collapse), not\n// a partial \"show however many fit\" reflow. Re-measures on resize and after\n// every render (children content, e.g. tag count, isn't in a dependency array).\n// Unlike `useIsOverflowing` in sidebar-primary.tsx (which measures one element\n// against itself and returns a bare boolean), this compares a hidden\n// full-size clone against the live container and returns the refs alongside\n// the collapsed flag.\nfunction useRowOverflow() {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const measureRef = React.useRef<HTMLDivElement>(null);\n  const [collapsed, setCollapsed] = React.useState(false);\n\n  React.useEffect(() => {\n    const container = containerRef.current;\n    const measure = measureRef.current;\n    if (!container || !measure) return;\n\n    const recalc = () =>\n      setCollapsed(measure.scrollWidth > container.clientWidth);\n\n    recalc();\n    const observer = new ResizeObserver(recalc);\n    observer.observe(container);\n    return () => observer.disconnect();\n  });\n\n  return { containerRef, measureRef, collapsed };\n}\n\nconst PageHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"page-header\"\n    role=\"banner\"\n    className={cn('flex w-full flex-col items-start gap-1', className)}\n    {...props}\n  />\n));\nPageHeader.displayName = 'PageHeader';\n\n// The title row: title, optional edit button, tags slot, actions slot.\nconst PageHeaderRow = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"page-header-row\"\n    className={cn('flex w-full items-center gap-2', className)}\n    {...props}\n  />\n));\nPageHeaderRow.displayName = 'PageHeaderRow';\n\nconst PageHeaderTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h1\n    ref={ref}\n    data-slot=\"page-header-title\"\n    className={cn(\n      'shrink-0 whitespace-nowrap text-2xl font-normal leading-8 text-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nPageHeaderTitle.displayName = 'PageHeaderTitle';\n\ntype TagElement = React.ReactElement<{ children?: React.ReactNode }>;\n\n// The tags slot: grows to share the row's remaining width with the actions\n// slot (so actions stay flush right even when tags are omitted entirely).\n// Per the Figma \"Breakpoints\" page annotation: if all tags don't fit, show\n// only the first tag and fold the rest under a \"+#\" tag whose tooltip lists\n// their labels on hover — not a partial \"show however many fit\" reflow.\nconst PageHeaderTags = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n  const items = React.Children.toArray(children) as TagElement[];\n  const { containerRef, measureRef, collapsed } = useRowOverflow();\n  const showOverflow = collapsed && items.length > 1;\n  const hiddenItems = showOverflow ? items.slice(1) : [];\n\n  const tagsChildren = (\n    <>\n      {showOverflow ? (\n        <>\n          {items[0]}\n          <Tooltip>\n            <TooltipTrigger render={<Tag icon={<CircleInfoIcon size={16} />} />}>\n              {`+${hiddenItems.length}`}\n            </TooltipTrigger>\n            <TooltipContent>\n              <ul>\n                {hiddenItems.map((item, index) => (\n                  <li key={index}>{item.props?.children}</li>\n                ))}\n              </ul>\n            </TooltipContent>\n          </Tooltip>\n        </>\n      ) : (\n        items\n      )}\n      {items.length > 1 && (\n        <div\n          ref={measureRef}\n          aria-hidden\n          className=\"invisible absolute flex items-center gap-2\"\n        >\n          {items}\n        </div>\n      )}\n    </>\n  );\n\n  return useRender({\n    ref: [ref, containerRef],\n    defaultTagName: 'div',\n    props: {\n      'data-slot': 'page-header-tags',\n      ...mergeProps<'div'>(\n        {\n          className: cn(\n            'flex min-w-0 flex-1 items-center gap-2 overflow-hidden',\n            className\n          ),\n          children: tagsChildren,\n        },\n        props\n      ),\n    },\n  });\n});\nPageHeaderTags.displayName = 'PageHeaderTags';\n\ntype ActionElement = React.ReactElement<\n  Omit<ButtonProps, 'render'> & {\n    // Only the element form is meaningful once folded — a function-form\n    // render receives Button's own state shape, not the \"More\" menu item's.\n    render?: React.ReactElement;\n  }\n>;\n\n// Fold only reduces a secondary action to a generic \"Menu Item\" label — the\n// Figma \"Breakpoints\" page annotation and its \"More\" menu mockup only cover a\n// plain button with a single click action. A trigger-style component (e.g.\n// ButtonMenu, which opens its own menu rather than firing one action) has no\n// single action to reduce to, so it's excluded even if given `variant=\"secondary\"`.\nconst isSecondaryAction = (item: ActionElement) =>\n  item.type === Button && item.props?.variant === 'secondary';\n\n// The actions slot: grows to share the row's remaining width with the tags\n// slot. Per the Figma \"Breakpoints\" page annotation: if all buttons don't\n// fit, fold all secondary buttons under a single \"More\" ButtonIcon — primary\n// buttons are never hidden.\nconst PageHeaderActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n  const items = React.Children.toArray(children) as ActionElement[];\n  const secondaryItems = items.filter(isSecondaryAction);\n  const { containerRef, measureRef, collapsed } = useRowOverflow();\n  const showOverflow = collapsed && secondaryItems.length > 0;\n\n  // Each secondary item becomes zero or one output items: dropped, except\n  // the first (in original order), which becomes the \"More\" menu holding\n  // all of them — hence `flatMap` over `map`/`filter`.\n  const moreButton = (\n    <DropdownMenu key=\"page-header-actions-more\">\n      <DropdownMenuTrigger\n        render={\n          <ButtonIcon variant=\"secondary\" aria-label=\"More actions\">\n            <EllipsisIcon size={16} />\n          </ButtonIcon>\n        }\n      />\n      <DropdownMenuContent align=\"end\">\n        {secondaryItems.map((secondaryItem, index) => {\n          const { variant, children, ...rest } = secondaryItem.props;\n          return (\n            <DropdownMenuItem\n              key={index}\n              {...(rest as React.ComponentPropsWithoutRef<typeof DropdownMenuItem>)}\n            >\n              {children}\n            </DropdownMenuItem>\n          );\n        })}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n\n  const collapseSecondaryActions = (item: ActionElement) => {\n    if (!isSecondaryAction(item)) return [item];\n    const isFirstSecondaryAction = item === secondaryItems[0];\n    return isFirstSecondaryAction ? [moreButton] : [];\n  };\n\n  const visibleItems = showOverflow\n    ? items.flatMap(collapseSecondaryActions)\n    : items;\n\n  const actionsChildren = (\n    <>\n      {visibleItems}\n      {secondaryItems.length > 0 && (\n        <div\n          ref={measureRef}\n          aria-hidden\n          className=\"invisible absolute flex items-center gap-4\"\n        >\n          {items}\n        </div>\n      )}\n    </>\n  );\n\n  return useRender({\n    ref: [ref, containerRef],\n    defaultTagName: 'div',\n    props: {\n      'data-slot': 'page-header-actions',\n      ...mergeProps<'div'>(\n        {\n          className: cn(\n            'flex min-w-0 flex-1 items-center justify-end gap-4 overflow-hidden',\n            className\n          ),\n          children: actionsChildren,\n        },\n        props\n      ),\n    },\n  });\n});\nPageHeaderActions.displayName = 'PageHeaderActions';\n\n// The description row: caps the text (+ its optional edit button) at 512px,\n// matching the Figma's explicit \"Description max width 512px\" note.\nconst PageHeaderDescriptionRow = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"page-header-description-row\"\n    className={cn('flex max-w-lg items-start gap-2', className)}\n    {...props}\n  />\n));\nPageHeaderDescriptionRow.displayName = 'PageHeaderDescriptionRow';\n\nconst PageHeaderDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    data-slot=\"page-header-description\"\n    className={cn(\n      'min-w-0 flex-1 text-sm font-normal leading-6 text-muted-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nPageHeaderDescription.displayName = 'PageHeaderDescription';\n\nexport {\n  PageHeader,\n  PageHeaderRow,\n  PageHeaderTitle,\n  PageHeaderTags,\n  PageHeaderActions,\n  PageHeaderDescriptionRow,\n  PageHeaderDescription,\n  useRowOverflow,\n};\n"],"mappings":"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"}

package/dist/components/ui/pagination/pagination.js

@@ -1,87 +1,59 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import * as r from "react";
-import { EllipsisIcon as l, ChevronRightIcon as c, ChevronLeftIcon as m } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as t } from "../../../lib/utils.js";
-function y({ className: a, ...i }) {
-  return /* @__PURE__ */ e(
-    "nav",
-    {
-      role: "navigation",
-      "aria-label": "pagination",
-      className: t("mx-auto flex w-full justify-center", a),
-      ...i
-    }
-  );
+import { cn as e } from "../../../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { ChevronLeftIcon as i, ChevronRightIcon as a, EllipsisIcon as o } from "@acronis-platform/icons-react/stroke-mono";
+//#region src/components/ui/pagination/pagination.tsx
+function s({ className: t, ...r }) {
+	return /* @__PURE__ */ n("nav", {
+		role: "navigation",
+		"aria-label": "pagination",
+		className: e("mx-auto flex w-full justify-center", t),
+		...r
+	});
 }
-const u = r.forwardRef(({ className: a, ...i }, n) => /* @__PURE__ */ e(
-  "ul",
-  {
-    ref: n,
-    className: t("flex flex-row items-center gap-1", a),
-    ...i
-  }
-));
-u.displayName = "PaginationContent";
-const g = r.forwardRef(({ className: a, ...i }, n) => /* @__PURE__ */ e("li", { ref: n, className: a, ...i }));
-g.displayName = "PaginationItem";
-const f = (a) => t(
-  "inline-flex h-8 min-w-8 select-none items-center justify-center rounded-md px-2 text-sm font-medium text-[var(--ui-text-on-surface-primary)] transition-colors outline-none",
-  "focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]",
-  a ? "bg-[var(--ui-background-surface-active)]" : "hover:bg-[var(--ui-background-surface-hover)]"
-), o = ({
-  className: a,
-  isActive: i,
-  ...n
-}) => /* @__PURE__ */ e(
-  "a",
-  {
-    "aria-current": i ? "page" : void 0,
-    className: t(f(i), a),
-    ...n
-  }
-);
-o.displayName = "PaginationLink";
-const p = ({
-  className: a,
-  ...i
-}) => /* @__PURE__ */ e(
-  o,
-  {
-    "aria-label": "Go to previous page",
-    className: a,
-    ...i,
-    children: /* @__PURE__ */ e(m, { size: 16 })
-  }
-);
-p.displayName = "PaginationPrevious";
-const d = ({ className: a, ...i }) => /* @__PURE__ */ e(o, { "aria-label": "Go to next page", className: a, ...i, children: /* @__PURE__ */ e(c, { size: 16 }) });
-d.displayName = "PaginationNext";
-const x = ({
-  className: a,
-  ...i
-}) => /* @__PURE__ */ s(
-  "span",
-  {
-    "aria-hidden": !0,
-    className: t(
-      "flex h-8 w-8 items-center justify-center text-[var(--ui-text-on-surface-secondary)]",
-      a
-    ),
-    ...i,
-    children: [
-      /* @__PURE__ */ e(l, { size: 16 }),
-      /* @__PURE__ */ e("span", { className: "sr-only", children: "More pages" })
-    ]
-  }
-);
-x.displayName = "PaginationEllipsis";
-export {
-  y as Pagination,
-  u as PaginationContent,
-  x as PaginationEllipsis,
-  g as PaginationItem,
-  o as PaginationLink,
-  d as PaginationNext,
-  p as PaginationPrevious
-};
-//# sourceMappingURL=pagination.js.map
+var c = t.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n("ul", {
+	ref: i,
+	className: e("flex flex-row items-center gap-1", t),
+	...r
+}));
+c.displayName = "PaginationContent";
+var l = t.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ n("li", {
+	ref: r,
+	className: e,
+	...t
+}));
+l.displayName = "PaginationItem";
+var u = (t) => e("inline-flex h-8 min-w-8 select-none items-center justify-center rounded-md px-2 text-sm font-medium text-[var(--ui-text-on-surface-primary)] transition-colors outline-none", "focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]", t ? "bg-[var(--ui-background-surface-active)]" : "hover:bg-[var(--ui-background-surface-hover)]"), d = ({ className: t, isActive: r, ...i }) => /* @__PURE__ */ n("a", {
+	"aria-current": r ? "page" : void 0,
+	className: e(u(r), t),
+	...i
+});
+d.displayName = "PaginationLink";
+var f = ({ className: e, ...t }) => /* @__PURE__ */ n(d, {
+	"aria-label": "Go to previous page",
+	className: e,
+	...t,
+	children: /* @__PURE__ */ n(i, { size: 16 })
+});
+f.displayName = "PaginationPrevious";
+var p = ({ className: e, ...t }) => /* @__PURE__ */ n(d, {
+	"aria-label": "Go to next page",
+	className: e,
+	...t,
+	children: /* @__PURE__ */ n(a, { size: 16 })
+});
+p.displayName = "PaginationNext";
+var m = ({ className: t, ...i }) => /* @__PURE__ */ r("span", {
+	"aria-hidden": !0,
+	className: e("flex h-8 w-8 items-center justify-center text-[var(--ui-text-on-surface-secondary)]", t),
+	...i,
+	children: [/* @__PURE__ */ n(o, { size: 16 }), /* @__PURE__ */ n("span", {
+		className: "sr-only",
+		children: "More pages"
+	})]
+});
+m.displayName = "PaginationEllipsis";
+//#endregion
+export { s as Pagination, c as PaginationContent, m as PaginationEllipsis, l as PaginationItem, d as PaginationLink, p as PaginationNext, f as PaginationPrevious };
+
+//# sourceMappingURL=pagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../../src/components/ui/pagination/pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  EllipsisIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform`'s `pagination`. Markup-only (no Base UI\n// primitive). The page links are styled directly with semantic tokens (rather than\n// the Button cva, whose min-width tokens don't fit a compact square link): neutral\n// foreground page numbers, the active surface for the current page, and the hover\n// surface on hover.\nfunction Pagination({ className, ...props }: React.ComponentProps<'nav'>) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      className={cn('mx-auto flex w-full justify-center', className)}\n      {...props}\n    />\n  );\n}\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<'ul'>\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn('flex flex-row items-center gap-1', className)}\n    {...props}\n  />\n));\nPaginationContent.displayName = 'PaginationContent';\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<'li'>\n>(({ className, ...props }, ref) => <li ref={ref} className={className} {...props} />);\nPaginationItem.displayName = 'PaginationItem';\n\nexport interface PaginationLinkProps extends React.ComponentProps<'a'> {\n  /** Marks the current page (sets aria-current and the selected treatment). */\n  isActive?: boolean;\n}\n\nconst paginationLinkClassName = (isActive?: boolean) =>\n  cn(\n    'inline-flex h-8 min-w-8 select-none items-center justify-center rounded-md px-2 text-sm font-medium text-[var(--ui-text-on-surface-primary)] transition-colors outline-none',\n    'focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]',\n    isActive\n      ? 'bg-[var(--ui-background-surface-active)]'\n      : 'hover:bg-[var(--ui-background-surface-hover)]'\n  );\n\nconst PaginationLink = ({\n  className,\n  isActive,\n  ...props\n}: PaginationLinkProps) => (\n  <a\n    aria-current={isActive ? 'page' : undefined}\n    className={cn(paginationLinkClassName(isActive), className)}\n    {...props}\n  />\n);\nPaginationLink.displayName = 'PaginationLink';\n\nconst PaginationPrevious = ({\n  className,\n  ...props\n}: PaginationLinkProps) => (\n  <PaginationLink\n    aria-label=\"Go to previous page\"\n    className={className}\n    {...props}\n  >\n    <ChevronLeftIcon size={16} />\n  </PaginationLink>\n);\nPaginationPrevious.displayName = 'PaginationPrevious';\n\nconst PaginationNext = ({ className, ...props }: PaginationLinkProps) => (\n  <PaginationLink aria-label=\"Go to next page\" className={className} {...props}>\n    <ChevronRightIcon size={16} />\n  </PaginationLink>\n);\nPaginationNext.displayName = 'PaginationNext';\n\nconst PaginationEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) => (\n  <span\n    aria-hidden\n    className={cn(\n      'flex h-8 w-8 items-center justify-center text-[var(--ui-text-on-surface-secondary)]',\n      className\n    )}\n    {...props}\n  >\n    <EllipsisIcon size={16} />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n);\nPaginationEllipsis.displayName = 'PaginationEllipsis';\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"],"names":["Pagination","className","props","jsx","cn","PaginationContent","React","ref","PaginationItem","paginationLinkClassName","isActive","PaginationLink","PaginationPrevious","ChevronLeftIcon","PaginationNext","ChevronRightIcon","PaginationEllipsis","jsxs","EllipsisIcon"],"mappings":";;;;AAcA,SAASA,EAAW,EAAE,WAAAC,GAAW,GAAGC,KAAsC;AACxE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAWC,EAAG,sCAAsCH,CAAS;AAAA,MAC5D,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAMG,IAAoBC,EAAM,WAG9B,CAAC,EAAE,WAAAL,GAAW,GAAGC,EAAA,GAASK,MAC1B,gBAAAJ;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAI;AAAA,IACA,WAAWH,EAAG,oCAAoCH,CAAS;AAAA,IAC1D,GAAGC;AAAA,EAAA;AACN,CACD;AACDG,EAAkB,cAAc;AAEhC,MAAMG,IAAiBF,EAAM,WAG3B,CAAC,EAAE,WAAAL,GAAW,GAAGC,EAAA,GAASK,wBAAS,MAAA,EAAG,KAAAA,GAAU,WAAAN,GAAuB,GAAGC,GAAO,CAAE;AACrFM,EAAe,cAAc;AAO7B,MAAMC,IAA0B,CAACC,MAC/BN;AAAA,EACE;AAAA,EACA;AAAA,EACAM,IACI,6CACA;AACN,GAEIC,IAAiB,CAAC;AAAA,EACtB,WAAAV;AAAA,EACA,UAAAS;AAAA,EACA,GAAGR;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,gBAAcO,IAAW,SAAS;AAAA,IAClC,WAAWN,EAAGK,EAAwBC,CAAQ,GAAGT,CAAS;AAAA,IACzD,GAAGC;AAAA,EAAA;AACN;AAEFS,EAAe,cAAc;AAE7B,MAAMC,IAAqB,CAAC;AAAA,EAC1B,WAAAX;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAACQ;AAAA,EAAA;AAAA,IACC,cAAW;AAAA,IACX,WAAAV;AAAA,IACC,GAAGC;AAAA,IAEJ,UAAA,gBAAAC,EAACU,GAAA,EAAgB,MAAM,GAAA,CAAI;AAAA,EAAA;AAC7B;AAEFD,EAAmB,cAAc;AAEjC,MAAME,IAAiB,CAAC,EAAE,WAAAb,GAAW,GAAGC,EAAA,MACtC,gBAAAC,EAACQ,GAAA,EAAe,cAAW,mBAAkB,WAAAV,GAAuB,GAAGC,GACrE,4BAACa,GAAA,EAAiB,MAAM,IAAI,EAAA,CAC9B;AAEFD,EAAe,cAAc;AAE7B,MAAME,IAAqB,CAAC;AAAA,EAC1B,WAAAf;AAAA,EACA,GAAGC;AACL,MACE,gBAAAe;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAW;AAAA,IACX,WAAWb;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAC,EAACe,GAAA,EAAa,MAAM,GAAA,CAAI;AAAA,MACxB,gBAAAf,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,aAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AACtC;AAEFa,EAAmB,cAAc;"}
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../../src/components/ui/pagination/pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  EllipsisIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform`'s `pagination`. Markup-only (no Base UI\n// primitive). The page links are styled directly with semantic tokens (rather than\n// the Button cva, whose min-width tokens don't fit a compact square link): neutral\n// foreground page numbers, the active surface for the current page, and the hover\n// surface on hover.\nfunction Pagination({ className, ...props }: React.ComponentProps<'nav'>) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      className={cn('mx-auto flex w-full justify-center', className)}\n      {...props}\n    />\n  );\n}\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<'ul'>\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn('flex flex-row items-center gap-1', className)}\n    {...props}\n  />\n));\nPaginationContent.displayName = 'PaginationContent';\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<'li'>\n>(({ className, ...props }, ref) => <li ref={ref} className={className} {...props} />);\nPaginationItem.displayName = 'PaginationItem';\n\nexport interface PaginationLinkProps extends React.ComponentProps<'a'> {\n  /** Marks the current page (sets aria-current and the selected treatment). */\n  isActive?: boolean;\n}\n\nconst paginationLinkClassName = (isActive?: boolean) =>\n  cn(\n    'inline-flex h-8 min-w-8 select-none items-center justify-center rounded-md px-2 text-sm font-medium text-[var(--ui-text-on-surface-primary)] transition-colors outline-none',\n    'focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)]',\n    isActive\n      ? 'bg-[var(--ui-background-surface-active)]'\n      : 'hover:bg-[var(--ui-background-surface-hover)]'\n  );\n\nconst PaginationLink = ({\n  className,\n  isActive,\n  ...props\n}: PaginationLinkProps) => (\n  <a\n    aria-current={isActive ? 'page' : undefined}\n    className={cn(paginationLinkClassName(isActive), className)}\n    {...props}\n  />\n);\nPaginationLink.displayName = 'PaginationLink';\n\nconst PaginationPrevious = ({\n  className,\n  ...props\n}: PaginationLinkProps) => (\n  <PaginationLink\n    aria-label=\"Go to previous page\"\n    className={className}\n    {...props}\n  >\n    <ChevronLeftIcon size={16} />\n  </PaginationLink>\n);\nPaginationPrevious.displayName = 'PaginationPrevious';\n\nconst PaginationNext = ({ className, ...props }: PaginationLinkProps) => (\n  <PaginationLink aria-label=\"Go to next page\" className={className} {...props}>\n    <ChevronRightIcon size={16} />\n  </PaginationLink>\n);\nPaginationNext.displayName = 'PaginationNext';\n\nconst PaginationEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) => (\n  <span\n    aria-hidden\n    className={cn(\n      'flex h-8 w-8 items-center justify-center text-[var(--ui-text-on-surface-secondary)]',\n      className\n    )}\n    {...props}\n  >\n    <EllipsisIcon size={16} />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n);\nPaginationEllipsis.displayName = 'PaginationEllipsis';\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n  PaginationLink,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"],"mappings":";;;;;AAcA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAW;EACX,WAAW,EAAG,sCAAsC,CAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,IAAoB,EAAM,YAG7B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,MAAD;CACO;CACL,WAAW,EAAG,oCAAoC,CAAS;CAC3D,GAAI;AACL,CAAA,CACF;AACD,EAAkB,cAAc;AAEhC,IAAM,IAAiB,EAAM,YAG1B,EAAE,cAAW,GAAG,KAAS,MAAQ,kBAAC,MAAD;CAAS;CAAgB;CAAW,GAAI;AAAQ,CAAA,CAAC;AACrF,EAAe,cAAc;AAO7B,IAAM,KAA2B,MAC/B,EACE,+KACA,qEACA,IACI,6CACA,+CACN,GAEI,KAAkB,EACtB,cACA,aACA,GAAG,QAEH,kBAAC,KAAD;CACE,gBAAc,IAAW,SAAS,KAAA;CAClC,WAAW,EAAG,EAAwB,CAAQ,GAAG,CAAS;CAC1D,GAAI;AACL,CAAA;AAEH,EAAe,cAAc;AAE7B,IAAM,KAAsB,EAC1B,cACA,GAAG,QAEH,kBAAC,GAAD;CACE,cAAW;CACA;CACX,GAAI;CAEJ,UAAA,kBAAC,GAAD,EAAiB,MAAM,GAAK,CAAA;AACd,CAAA;AAElB,EAAmB,cAAc;AAEjC,IAAM,KAAkB,EAAE,cAAW,GAAG,QACtC,kBAAC,GAAD;CAAgB,cAAW;CAA6B;CAAW,GAAI;CACrE,UAAA,kBAAC,GAAD,EAAkB,MAAM,GAAK,CAAA;AACf,CAAA;AAElB,EAAe,cAAc;AAE7B,IAAM,KAAsB,EAC1B,cACA,GAAG,QAEH,kBAAC,QAAD;CACE,eAAA;CACA,WAAW,EACT,uFACA,CACF;CACA,GAAI;CANN,UAAA,CAQE,kBAAC,GAAD,EAAc,MAAM,GAAK,CAAA,GACzB,kBAAC,QAAD;EAAM,WAAU;EAAU,UAAA;CAAgB,CAAA,CACtC;;AAER,EAAmB,cAAc"}