@acronis-platform/ui-react 0.57.0 → 0.58.0

package/dist/components/ui/metric/metric.js

@@ -0,0 +1,185 @@
+import { jsxs as t, jsx as e, Fragment as k } from "react/jsx-runtime";
+import * as n from "react";
+import { cva as S } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { CircleInfoIcon as I } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as a } from "../../../lib/utils.js";
+import { Card as _ } from "../card/card.js";
+import { Tooltip as z, TooltipTrigger as T, TooltipContent as A } from "../tooltip/tooltip.js";
+import { Skeleton as Z } from "../skeleton/skeleton.js";
+const j = S("flex flex-col", {
+  variants: {
+    size: {
+      small: "gap-1",
+      medium: "gap-1.5",
+      large: "gap-2"
+    },
+    // Semantic status — drives the icon badge tint (see STATUS_BADGE). Kept as a
+    // cva axis so the enum is spec-conformant; the tint is applied on the badge.
+    status: {
+      neutral: "",
+      info: "",
+      success: "",
+      warning: "",
+      danger: "",
+      critical: ""
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    status: "neutral"
+  }
+}), y = {
+  small: "text-[10px]",
+  medium: "text-[11px]",
+  large: "text-xs"
+}, B = {
+  small: "text-2xl",
+  medium: "text-3xl",
+  large: "text-4xl"
+}, C = {
+  small: "text-sm",
+  medium: "text-base",
+  large: "text-lg"
+}, G = {
+  small: "text-xs",
+  medium: "text-xs",
+  large: "text-sm"
+}, L = {
+  small: "size-7",
+  medium: "size-8",
+  large: "size-10"
+}, U = {
+  small: 14,
+  medium: 16,
+  large: 20
+}, V = {
+  small: "h-6 w-16",
+  medium: "h-8 w-20",
+  large: "h-10 w-28"
+}, D = {
+  neutral: "bg-[var(--ui-background-status-neutral-pressed)] text-[var(--ui-text-on-status-neutral)]",
+  info: "bg-[var(--ui-background-status-info-pressed)] text-[var(--ui-text-on-status-info)]",
+  success: "bg-[var(--ui-background-status-success-pressed)] text-[var(--ui-text-on-status-success)]",
+  warning: "bg-[var(--ui-background-status-warning-pressed)] text-[var(--ui-text-on-status-warning)]",
+  danger: "bg-[var(--ui-background-status-danger-pressed)] text-[var(--ui-text-on-status-danger)]",
+  critical: "bg-[var(--ui-background-status-critical-pressed)] text-[var(--ui-text-on-status-critical)]"
+}, M = n.forwardRef(
+  ({
+    className: f,
+    label: p,
+    value: h,
+    unit: l,
+    caption: i,
+    trend: c,
+    supportingText: m,
+    badge: d,
+    icon: r,
+    tooltip: u,
+    tooltipLabel: v = "More information",
+    loading: N = !1,
+    size: o,
+    status: x,
+    children: b,
+    ...w
+  }, E) => {
+    const s = o ?? "medium", g = x ?? "neutral";
+    return /* @__PURE__ */ t(
+      _,
+      {
+        ref: E,
+        "data-size": s,
+        "data-status": g,
+        className: a("flex flex-col p-4", f),
+        ...w,
+        children: [
+          /* @__PURE__ */ t("div", { className: a(j({ size: o, status: x })), children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ t("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: a(
+                      "min-w-0 truncate font-bold uppercase leading-none tracking-wide text-muted-foreground",
+                      y[s]
+                    ),
+                    children: p
+                  }
+                ),
+                u != null && /* @__PURE__ */ t(z, { children: [
+                  /* @__PURE__ */ e(
+                    T,
+                    {
+                      "aria-label": v,
+                      className: "inline-flex shrink-0 cursor-default appearance-none border-0 bg-transparent p-0 text-muted-foreground",
+                      children: /* @__PURE__ */ e(I, { size: 16, "aria-hidden": !0 })
+                    }
+                  ),
+                  /* @__PURE__ */ e(A, { children: u })
+                ] })
+              ] }),
+              i != null && /* @__PURE__ */ e("div", { className: "shrink-0", children: i })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex items-center justify-between gap-3", children: [
+              /* @__PURE__ */ t("div", { className: "flex min-w-0 items-center gap-2", children: [
+                r != null && /* @__PURE__ */ e(
+                  "span",
+                  {
+                    "aria-hidden": !0,
+                    className: a(
+                      "flex shrink-0 items-center justify-center rounded-lg [&_svg]:shrink-0",
+                      L[s],
+                      D[g]
+                    ),
+                    children: n.isValidElement(r) ? n.cloneElement(
+                      r,
+                      { size: U[s] }
+                    ) : r
+                  }
+                ),
+                /* @__PURE__ */ t("div", { className: "flex min-w-0 items-baseline gap-1", children: [
+                  N ? /* @__PURE__ */ e(Z, { className: V[s] }) : /* @__PURE__ */ t(k, { children: [
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: a(
+                          "font-bold leading-none tabular-nums text-foreground",
+                          B[s]
+                        ),
+                        children: h
+                      }
+                    ),
+                    l != null && /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: a(
+                          "font-medium text-muted-foreground",
+                          C[s]
+                        ),
+                        children: l
+                      }
+                    )
+                  ] }),
+                  d != null && /* @__PURE__ */ e("span", { className: "ms-1 self-center", children: d })
+                ] })
+              ] }),
+              c != null && /* @__PURE__ */ e("div", { className: "shrink-0", children: c })
+            ] }),
+            m != null && /* @__PURE__ */ e(
+              "div",
+              {
+                className: a("text-muted-foreground", G[s]),
+                children: m
+              }
+            )
+          ] }),
+          b
+        ]
+      }
+    );
+  }
+);
+M.displayName = "Metric";
+export {
+  M as Metric
+};
+//# sourceMappingURL=metric.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"metric.js","sources":["../../../../src/components/ui/metric/metric.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { CircleInfoIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Card } from '../card';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A presentational metric / statistic, laid out after the Figma MetricCard node:\n// a label row (label + an optional top-right caption) over a value row (an\n// optional status-tinted icon badge + the value + unit on the left, an optional\n// trend on the right), with optional supporting text below. It owns visual\n// hierarchy and layout only — it never computes or formats the value, converts\n// units, or decides whether a value is good or bad; the consumer passes\n// ready-to-render nodes and a resolved `status`, and composes a `TrendIndicator`\n// into the trend slot. `status` tints the icon badge (a subtle cue, not a full\n// color fill). No dedicated token tier — colors are semantic `--ui-*` tokens and\n// geometry uses the Tailwind scale.\nconst metricVariants = cva('flex flex-col', {\n  variants: {\n    size: {\n      small: 'gap-1',\n      medium: 'gap-1.5',\n      large: 'gap-2',\n    },\n    // Semantic status — drives the icon badge tint (see STATUS_BADGE). Kept as a\n    // cva axis so the enum is spec-conformant; the tint is applied on the badge.\n    status: {\n      neutral: '',\n      info: '',\n      success: '',\n      warning: '',\n      danger: '',\n      critical: '',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    status: 'neutral',\n  },\n});\n\nconst LABEL_SIZE = {\n  small: 'text-[10px]',\n  medium: 'text-[11px]',\n  large: 'text-xs',\n} as const;\n\nconst VALUE_SIZE = {\n  small: 'text-2xl',\n  medium: 'text-3xl',\n  large: 'text-4xl',\n} as const;\n\nconst UNIT_SIZE = {\n  small: 'text-sm',\n  medium: 'text-base',\n  large: 'text-lg',\n} as const;\n\nconst SUPPORTING_SIZE = {\n  small: 'text-xs',\n  medium: 'text-xs',\n  large: 'text-sm',\n} as const;\n\nconst BADGE_SIZE = {\n  small: 'size-7',\n  medium: 'size-8',\n  large: 'size-10',\n} as const;\n\n// icons-react icons size themselves from a `size` prop (which also picks the\n// designed stroke weight) — CSS can't do that reliably — so the badge icon is\n// cloned to the right px for the Metric size.\nconst BADGE_ICON_PX = {\n  small: 14,\n  medium: 16,\n  large: 20,\n} as const;\n\nconst SKELETON_SIZE = {\n  small: 'h-6 w-16',\n  medium: 'h-8 w-20',\n  large: 'h-10 w-28',\n} as const;\n\n// The badge pairs the status \"pressed\" background tint with its matching icon\n// color (the same pairing the design uses for status icon chips).\nconst STATUS_BADGE = {\n  neutral:\n    'bg-[var(--ui-background-status-neutral-pressed)] text-[var(--ui-text-on-status-neutral)]',\n  info: 'bg-[var(--ui-background-status-info-pressed)] text-[var(--ui-text-on-status-info)]',\n  success:\n    'bg-[var(--ui-background-status-success-pressed)] text-[var(--ui-text-on-status-success)]',\n  warning:\n    'bg-[var(--ui-background-status-warning-pressed)] text-[var(--ui-text-on-status-warning)]',\n  danger:\n    'bg-[var(--ui-background-status-danger-pressed)] text-[var(--ui-text-on-status-danger)]',\n  critical:\n    'bg-[var(--ui-background-status-critical-pressed)] text-[var(--ui-text-on-status-critical)]',\n} as const;\n\nexport interface MetricProps\n  extends React.ComponentProps<'div'>,\n    VariantProps<typeof metricVariants> {\n  /** What the value measures — e.g. \"Gross margin\". Rendered as an uppercase note heading. */\n  label: React.ReactNode;\n  /**\n   * The primary value, already formatted (`73`, `\"94%\"`, `\"$72K\"`, `\"2.8\"`).\n   * The kit does not format currency, units, or decimals.\n   */\n  value: React.ReactNode;\n  /** Unit shown next to the value at a smaller, muted size — e.g. `\"%\"`, `\"hours\"`. */\n  unit?: React.ReactNode;\n  /** A top-right caption aligned with the label — e.g. a timeframe `Tag` (\"Last 30 days\"). */\n  caption?: React.ReactNode;\n  /** A trend slot on the right of the value — typically a `TrendIndicator`. */\n  trend?: React.ReactNode;\n  /** Secondary line below the value — e.g. \"Target: 99%\". */\n  supportingText?: React.ReactNode;\n  /** A small badge / metadata slot beside the value — e.g. a `Tag`. */\n  badge?: React.ReactNode;\n  /** Icon rendered in a status-tinted badge before the value. */\n  icon?: React.ReactNode;\n  /** Contextual hint on an info affordance next to the label (Base UI Tooltip). */\n  tooltip?: React.ReactNode;\n  /** Accessible name for the info affordance that reveals `tooltip`. */\n  tooltipLabel?: string;\n  /** Show a skeleton in place of the value, preserving its space. */\n  loading?: boolean;\n  /** Card body below the header — e.g. a chart, a Separator, an insight line. */\n  children?: React.ReactNode;\n}\n\nconst Metric = React.forwardRef<HTMLDivElement, MetricProps>(\n  (\n    {\n      className,\n      label,\n      value,\n      unit,\n      caption,\n      trend,\n      supportingText,\n      badge,\n      icon,\n      tooltip,\n      tooltipLabel = 'More information',\n      loading = false,\n      size,\n      status,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const resolvedSize = size ?? 'medium';\n    const resolvedStatus = status ?? 'neutral';\n\n    return (\n      <Card\n        ref={ref}\n        data-size={resolvedSize}\n        data-status={resolvedStatus}\n        className={cn('flex flex-col p-4', className)}\n        {...props}\n      >\n        <div className={cn(metricVariants({ size, status }))}>\n        {/* Label row: label (+ optional info) on the left, caption on the right. */}\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"flex min-w-0 items-center gap-1.5\">\n            <span\n              className={cn(\n                'min-w-0 truncate font-bold uppercase leading-none tracking-wide text-muted-foreground',\n                LABEL_SIZE[resolvedSize]\n              )}\n            >\n              {label}\n            </span>\n            {tooltip != null && (\n              <Tooltip>\n                <TooltipTrigger\n                  aria-label={tooltipLabel}\n                  className=\"inline-flex shrink-0 cursor-default appearance-none border-0 bg-transparent p-0 text-muted-foreground\"\n                >\n                  <CircleInfoIcon size={16} aria-hidden />\n                </TooltipTrigger>\n                <TooltipContent>{tooltip}</TooltipContent>\n              </Tooltip>\n            )}\n          </div>\n          {caption != null && <div className=\"shrink-0\">{caption}</div>}\n        </div>\n\n        {/* Value row: badge + value + unit on the left, trend on the right. */}\n        <div className=\"flex items-center justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            {icon != null && (\n              <span\n                aria-hidden\n                className={cn(\n                  'flex shrink-0 items-center justify-center rounded-lg [&_svg]:shrink-0',\n                  BADGE_SIZE[resolvedSize],\n                  STATUS_BADGE[resolvedStatus]\n                )}\n              >\n                {React.isValidElement(icon)\n                  ? React.cloneElement(\n                      icon as React.ReactElement<{ size?: number }>,\n                      { size: BADGE_ICON_PX[resolvedSize] }\n                    )\n                  : icon}\n              </span>\n            )}\n            <div className=\"flex min-w-0 items-baseline gap-1\">\n              {loading ? (\n                <Skeleton className={SKELETON_SIZE[resolvedSize]} />\n              ) : (\n                <>\n                  <span\n                    className={cn(\n                      'font-bold leading-none tabular-nums text-foreground',\n                      VALUE_SIZE[resolvedSize]\n                    )}\n                  >\n                    {value}\n                  </span>\n                  {unit != null && (\n                    <span\n                      className={cn(\n                        'font-medium text-muted-foreground',\n                        UNIT_SIZE[resolvedSize]\n                      )}\n                    >\n                      {unit}\n                    </span>\n                  )}\n                </>\n              )}\n              {badge != null && <span className=\"ms-1 self-center\">{badge}</span>}\n            </div>\n          </div>\n          {trend != null && <div className=\"shrink-0\">{trend}</div>}\n        </div>\n\n        {supportingText != null && (\n          <div\n            className={cn('text-muted-foreground', SUPPORTING_SIZE[resolvedSize])}\n          >\n            {supportingText}\n          </div>\n        )}\n        </div>\n        {children}\n      </Card>\n    );\n  }\n);\nMetric.displayName = 'Metric';\n\nexport { Metric };\n"],"names":["metricVariants","cva","LABEL_SIZE","VALUE_SIZE","UNIT_SIZE","SUPPORTING_SIZE","BADGE_SIZE","BADGE_ICON_PX","SKELETON_SIZE","STATUS_BADGE","Metric","React","className","label","value","unit","caption","trend","supportingText","badge","icon","tooltip","tooltipLabel","loading","size","status","children","props","ref","resolvedSize","resolvedStatus","jsxs","Card","cn","jsx","Tooltip","TooltipTrigger","CircleInfoIcon","TooltipContent","Skeleton","Fragment"],"mappings":"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"}

package/dist/components/ui/number-field/number-field.js

@@ -0,0 +1,61 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as a from "react";
+import { NumberField as t } from "@base-ui/react/number-field";
+import { MinusIcon as n, PlusIcon as u } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as l } from "../../../lib/utils.js";
+const g = t.Root, b = a.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ i(
+  t.Group,
+  {
+    ref: o,
+    className: l(
+      "flex h-[var(--ui-input-text-global-box-height)] w-full min-w-0 items-stretch overflow-hidden rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] transition-colors",
+      "not-has-disabled:hover:border-[var(--ui-input-text-normal-box-border-color-hover)]",
+      "has-[input:focus-visible]:border-[var(--ui-input-text-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]",
+      "has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-text-global-box-color-disabled)]",
+      "has-[input[aria-invalid=true]]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]",
+      e
+    ),
+    ...r
+  }
+));
+b.displayName = "NumberFieldGroup";
+const c = a.forwardRef(({ className: e, ...r }, o) => /* @__PURE__ */ i(
+  t.Input,
+  {
+    ref: o,
+    className: l(
+      "min-w-0 flex-1 bg-transparent px-[var(--ui-input-text-global-box-padding-x)] text-center text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-text-global-value-color-disabled)]",
+      e
+    ),
+    ...r
+  }
+));
+c.displayName = "NumberFieldInput";
+const s = "flex w-9 shrink-0 cursor-pointer items-center justify-center text-[var(--ui-text-on-surface-secondary)] transition-colors not-disabled:hover:bg-[var(--ui-background-surface-hover)] not-disabled:hover:text-[var(--ui-text-on-surface-primary)] disabled:cursor-not-allowed disabled:text-[var(--ui-text-on-surface-disabled)]", m = a.forwardRef(({ className: e, children: r, ...o }, d) => /* @__PURE__ */ i(
+  t.Decrement,
+  {
+    ref: d,
+    className: l(s, e),
+    ...o,
+    children: r ?? /* @__PURE__ */ i(n, { size: 16 })
+  }
+));
+m.displayName = "NumberFieldDecrement";
+const p = a.forwardRef(({ className: e, children: r, ...o }, d) => /* @__PURE__ */ i(
+  t.Increment,
+  {
+    ref: d,
+    className: l(s, e),
+    ...o,
+    children: r ?? /* @__PURE__ */ i(u, { size: 16 })
+  }
+));
+p.displayName = "NumberFieldIncrement";
+export {
+  g as NumberField,
+  m as NumberFieldDecrement,
+  b as NumberFieldGroup,
+  p as NumberFieldIncrement,
+  c as NumberFieldInput
+};
+//# sourceMappingURL=number-field.js.map

package/dist/components/ui/number-field/number-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.js","sources":["../../../../src/components/ui/number-field/number-field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';\nimport { MinusIcon, PlusIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Ported from `@acronis-platform`'s `number-field`, on Base UI's NumberField\n// (Root / Group / Decrement / Input / Increment). No `--ui-number-field-*` tier —\n// the box reuses the `--ui-input-text-*` tier (already imported) so it matches\n// InputBox / InputText; the steppers use the muted/primary surface + text tokens.\n\nconst NumberField = NumberFieldPrimitive.Root;\n\n// The bordered box wrapping the steppers + input. Mirrors the InputBox field box\n// (height / radius / border / bg / hover / focus-within ring / disabled / invalid).\nconst NumberFieldGroup = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <NumberFieldPrimitive.Group\n    ref={ref}\n    className={cn(\n      'flex h-[var(--ui-input-text-global-box-height)] w-full min-w-0 items-stretch overflow-hidden rounded-[var(--ui-input-text-global-box-border-radius)] border bg-[var(--ui-input-text-global-box-color-idle)] border-[var(--ui-input-text-normal-box-border-color-idle)] transition-colors',\n      'not-has-disabled:hover:border-[var(--ui-input-text-normal-box-border-color-hover)]',\n      'has-[input:focus-visible]:border-[var(--ui-input-text-normal-box-border-color-hover)] has-[input:focus-visible]:ring-[3px] has-[input:focus-visible]:ring-[var(--ui-focus-primary)]',\n      'has-disabled:cursor-not-allowed has-disabled:border-[var(--ui-input-text-normal-box-border-color-disabled)] has-disabled:bg-[var(--ui-input-text-global-box-color-disabled)]',\n      'has-[input[aria-invalid=true]]:border-[var(--ui-input-text-error-msg-box-border-color-idle)] has-[input[aria-invalid=true]:focus-visible]:ring-[var(--ui-focus-error)]',\n      className\n    )}\n    {...props}\n  />\n));\nNumberFieldGroup.displayName = 'NumberFieldGroup';\n\nconst NumberFieldInput = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <NumberFieldPrimitive.Input\n    ref={ref}\n    className={cn(\n      'min-w-0 flex-1 bg-transparent px-[var(--ui-input-text-global-box-padding-x)] text-center text-sm leading-6 text-[var(--ui-input-text-global-value-color-idle)] outline-none placeholder:text-[var(--ui-input-text-global-placeholder-color-idle)] disabled:cursor-not-allowed disabled:text-[var(--ui-input-text-global-value-color-disabled)]',\n      className\n    )}\n    {...props}\n  />\n));\nNumberFieldInput.displayName = 'NumberFieldInput';\n\nconst stepperClassName =\n  'flex w-9 shrink-0 cursor-pointer items-center justify-center text-[var(--ui-text-on-surface-secondary)] transition-colors not-disabled:hover:bg-[var(--ui-background-surface-hover)] not-disabled:hover:text-[var(--ui-text-on-surface-primary)] disabled:cursor-not-allowed disabled:text-[var(--ui-text-on-surface-disabled)]';\n\nconst NumberFieldDecrement = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Decrement>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Decrement>\n>(({ className, children, ...props }, ref) => (\n  <NumberFieldPrimitive.Decrement\n    ref={ref}\n    className={cn(stepperClassName, className)}\n    {...props}\n  >\n    {children ?? <MinusIcon size={16} />}\n  </NumberFieldPrimitive.Decrement>\n));\nNumberFieldDecrement.displayName = 'NumberFieldDecrement';\n\nconst NumberFieldIncrement = React.forwardRef<\n  React.ElementRef<typeof NumberFieldPrimitive.Increment>,\n  React.ComponentPropsWithoutRef<typeof NumberFieldPrimitive.Increment>\n>(({ className, children, ...props }, ref) => (\n  <NumberFieldPrimitive.Increment\n    ref={ref}\n    className={cn(stepperClassName, className)}\n    {...props}\n  >\n    {children ?? <PlusIcon size={16} />}\n  </NumberFieldPrimitive.Increment>\n));\nNumberFieldIncrement.displayName = 'NumberFieldIncrement';\n\nexport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldInput,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n};\n"],"names":["NumberField","NumberFieldPrimitive","NumberFieldGroup","React","className","props","ref","jsx","cn","NumberFieldInput","stepperClassName","NumberFieldDecrement","children","MinusIcon","NumberFieldIncrement","PlusIcon"],"mappings":";;;;;AAaA,MAAMA,IAAcC,EAAqB,MAInCC,IAAmBC,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAiB,cAAc;AAE/B,MAAMO,IAAmBN,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAiB,cAAc;AAE/B,MAAMC,IACJ,mUAEIC,IAAuBR,EAAM,WAGjC,CAAC,EAAE,WAAAC,GAAW,UAAAQ,GAAU,GAAGP,KAASC,MACpC,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE,EAAGE,GAAkBN,CAAS;AAAA,IACxC,GAAGC;AAAA,IAEH,UAAAO,KAAY,gBAAAL,EAACM,GAAA,EAAU,MAAM,GAAA,CAAI;AAAA,EAAA;AACpC,CACD;AACDF,EAAqB,cAAc;AAEnC,MAAMG,IAAuBX,EAAM,WAGjC,CAAC,EAAE,WAAAC,GAAW,UAAAQ,GAAU,GAAGP,KAASC,MACpC,gBAAAC;AAAA,EAACN,EAAqB;AAAA,EAArB;AAAA,IACC,KAAAK;AAAA,IACA,WAAWE,EAAGE,GAAkBN,CAAS;AAAA,IACxC,GAAGC;AAAA,IAEH,UAAAO,KAAY,gBAAAL,EAACQ,GAAA,EAAS,MAAM,GAAA,CAAI;AAAA,EAAA;AACnC,CACD;AACDD,EAAqB,cAAc;"}

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

@@ -0,0 +1,19 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as r from "react";
+import { cn as m } from "../../../lib/utils.js";
+const n = r.forwardRef(
+  ({ className: t, ...o }, a) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: a,
+      "data-slot": "page-content",
+      className: m("flex-1 p-6", t),
+      ...o
+    }
+  )
+);
+n.displayName = "PageContent";
+export {
+  n as PageContent
+};
+//# sourceMappingURL=page-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"page-content.js","sources":["../../../../src/components/ui/page-content/page-content.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The page content region — the padded gutter for a page's body. Ported from\n// `@acronis-platform`'s `page-content`. Rendered as a `<div>` (not `<main>`) so it\n// nests inside `AppShellMain` without duplicating the `main` landmark; if used\n// standalone, wrap it in your own `<main>`. Layout-only (flex-1 + page padding).\nexport type PageContentProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst PageContent = React.forwardRef<HTMLDivElement, PageContentProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"page-content\"\n      className={cn('flex-1 p-6', className)}\n      {...props}\n    />\n  )\n);\nPageContent.displayName = 'PageContent';\n\nexport { PageContent };\n"],"names":["PageContent","React","className","props","ref","jsx","cn"],"mappings":";;;AAUA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACV,WAAWE,EAAG,cAAcJ,CAAS;AAAA,MACpC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AACAH,EAAY,cAAc;"}

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

@@ -0,0 +1,184 @@
+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 };
+}
+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
+      )
+    }
+  });
+});
+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
+      )
+    }
+  });
+});
+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

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,87 @@
+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
+    }
+  );
+}
+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

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

@@ -0,0 +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;"}