@acronis-platform/ui-react 0.62.0 → 2.0.0

package/dist/components/ui/stepper/stepper.js

@@ -0,0 +1,70 @@
+import { jsxs as e, jsx as a } from "react/jsx-runtime";
+import * as f from "react";
+import { cn as u } from "../../../lib/utils.js";
+const h = f.forwardRef(
+  ({
+    className: s,
+    children: r,
+    currentStep: l,
+    totalSteps: p,
+    current: i,
+    next: t,
+    stepLabel: n = "Step",
+    ofLabel: c = "of",
+    nextLabel: d = "Next:",
+    separatorLabel: o = ": ",
+    ...m
+  }, x) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: x,
+      "data-slot": "stepper",
+      className: u("w-full", s),
+      ...m,
+      children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            "data-slot": "stepper-summary",
+            className: "flex flex-col gap-[var(--ui-gap-4)] text-sm leading-6 lg:hidden",
+            children: [
+              /* @__PURE__ */ e("p", { "data-slot": "stepper-current-line", children: [
+                /* @__PURE__ */ e("span", { className: "text-[var(--ui-text-on-surface-secondary)]", children: [
+                  n,
+                  " ",
+                  l,
+                  " ",
+                  c,
+                  " ",
+                  p,
+                  o
+                ] }),
+                /* @__PURE__ */ a("span", { className: "text-[var(--ui-text-on-surface-primary)]", children: i })
+              ] }),
+              t != null && /* @__PURE__ */ e("p", { "data-slot": "stepper-next-line", children: [
+                /* @__PURE__ */ e("span", { className: "text-[var(--ui-text-on-surface-secondary)]", children: [
+                  d,
+                  " "
+                ] }),
+                /* @__PURE__ */ a("span", { className: "text-[var(--ui-text-on-surface-primary)]", children: t })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            "data-slot": "stepper-items",
+            className: "hidden flex-wrap content-start items-start justify-start gap-[var(--ui-gap-8)] lg:flex",
+            children: r
+          }
+        )
+      ]
+    }
+  )
+);
+h.displayName = "Stepper";
+export {
+  h as Stepper
+};
+//# sourceMappingURL=stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sources":["../../../../src/components/ui/stepper/stepper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The stepper root. It renders the sequence two ways and lets CSS pick one:\n// a start-aligned, wrapping row of `StepperItem` children on wide viewports, and a\n// two-line text summary (\"Step 3 of 5: <current>\" / \"Next: <next>\") on narrow\n// ones. There is no `variant` prop and no `cva`: the only axis the design has\n// is the viewport width, which is not something JS decides here.\n//\n// ── Why a real media query, and why both trees always render ──\n// The Figma component models the two layouts as a `breakpoint` variant\n// (`0-1024` / `>1025`). In code that is a viewport media query, so it is\n// expressed with Tailwind's stock `lg:` variant (`hidden lg:flex` /\n// `flex lg:hidden`) rather than a `ResizeObserver`. `page-header.tsx`'s\n// `useRowOverflow` hook is deliberately *not* reused: that measures whether\n// content fits its own container (a content-fit problem), which is a different\n// question from \"how wide is the viewport\". A media query needs no measuring\n// pass, no hydration mismatch, and no layout thrash.\n//\n// Consequence, and it is intentional: **both subtrees are always in the DOM**,\n// and only their visibility differs. Nothing is `aria-hidden`, because which\n// tree is showing is not knowable from JS — the browser decides it in CSS.\n// That is correct rather than a compromise: `hidden` / `lg:hidden` resolve to\n// `display: none`, and a `display: none` subtree is not exposed to assistive\n// tech, so exactly one of the two is announced at any width. In jsdom, though,\n// no media query is evaluated, so unit tests see both at once.\n//\n// ── Breakpoint boundary: 1024, not 1025 ──\n// Figma's variant names say `0-1024` and `>1025`, which leaves 1024px itself\n// ambiguous and 1025 as the first \"desktop\" pixel. Tailwind's `lg:` is\n// `@media (min-width: 64rem)` = exactly 1024px (see the `@theme` block in\n// `src/styles/index.css` and `BREAKPOINT_LG` in `src/lib/breakpoints.ts`), so\n// 1024px renders the desktop row here. That 1px difference is accepted rather\n// than hand-rolling a one-off `1025px` query: the repo already pins the design\n// team's ranges to clean rem values and documents the rounding where it differs\n// (see the comments in `src/stories/breakpoints-demo.stories.tsx`), and\n// inventing a bespoke breakpoint for one component would put it out of step\n// with every other responsive surface in the kit.\n//\n// ── Token substitution (placeholder — re-point once design ships the tier) ──\n// Same situation as `StepperItem`: the design references `components/Stepper/*`\n// variables, but there is no `--ui-stepper-*` tier in\n// @acronis-platform/tokens-pd (a grep for `Stepper` across tokens-pd and the\n// design-tokens source returns nothing). Rather than hand-author values, this\n// consumes the semantic/generic tokens whose *resolved* value in\n// `packages/tokens-pd/css/default.css` matches the Figma variable exactly —\n// verified value-by-value:\n//\n//   components/Stepper/_global/list/gap      (4px)     -> --ui-gap-4\n//   (the item row's gap came through Figma as the generic `gap/gap-8`,\n//    the same 8px token StepperItem already uses internally)   -> --ui-gap-8\n//   components/Stepper/_global/prefix/color  (#61656b) -> --ui-text-on-surface-secondary\n//   components/Stepper/current/label/color   (#18191b) -> --ui-text-on-surface-primary\n//   components/Stepper/next/label/color      (#18191b) -> --ui-text-on-surface-primary\n//\n// The last two are separate Figma variables carrying an identical value, so one\n// semantic token covers both faithfully — and it is the same token StepperItem\n// already uses for its own label, which is the point.\n\nexport interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * The `StepperItem` elements making up the sequence. Rendered in the wide\n   * (>= 1024px) layout only — the compact layout is a text summary and shows no\n   * items at all.\n   */\n  children?: React.ReactNode;\n  /** 1-based index of the step the user is on, e.g. `3`. Compact layout only. */\n  currentStep: React.ReactNode;\n  /** How many steps there are in total, e.g. `5`. Compact layout only. */\n  totalSteps: React.ReactNode;\n  /** The current step's name. Compact layout only. */\n  current: React.ReactNode;\n  /**\n   * The next step's name. Omit it — on the last step, say — and the whole\n   * \"Next: …\" line is left out rather than rendered empty. Compact layout only.\n   */\n  next?: React.ReactNode;\n  /**\n   * The word introducing the step counter. A prop, not an inlined literal, so\n   * the string can be translated (see `context/conventions.md` §\"Localization —\n   * no hardcoded labels\"): this component generates the text itself, unlike the\n   * step names, which the caller supplies.\n   */\n  stepLabel?: string;\n  /** The word joining the current step number to the total. Translatable — see `stepLabel`. */\n  ofLabel?: string;\n  /** The label introducing the next step's name. Translatable — see `stepLabel`. */\n  nextLabel?: string;\n  /**\n   * The punctuation joining the step counter to the current step's name. A prop\n   * for the same reason as `stepLabel`: the component generates it, and not every\n   * locale writes it as `\": \"` (French, say, spaces before the colon; CJK uses a\n   * full-width one).\n   */\n  separatorLabel?: string;\n}\n\nconst Stepper = React.forwardRef<HTMLDivElement, StepperProps>(\n  (\n    {\n      className,\n      children,\n      currentStep,\n      totalSteps,\n      current,\n      next,\n      stepLabel = 'Step',\n      ofLabel = 'of',\n      nextLabel = 'Next:',\n      separatorLabel = ': ',\n      ...props\n    },\n    ref\n  ) => (\n    <div\n      ref={ref}\n      data-slot=\"stepper\"\n      className={cn('w-full', className)}\n      {...props}\n    >\n      {/* Compact summary — the only thing visible below the `lg` breakpoint. */}\n      <div\n        data-slot=\"stepper-summary\"\n        className=\"flex flex-col gap-[var(--ui-gap-4)] text-sm leading-6 lg:hidden\"\n      >\n        <p data-slot=\"stepper-current-line\">\n          <span className=\"text-[var(--ui-text-on-surface-secondary)]\">\n            {stepLabel} {currentStep} {ofLabel} {totalSteps}\n            {separatorLabel}\n          </span>\n          <span className=\"text-[var(--ui-text-on-surface-primary)]\">\n            {current}\n          </span>\n        </p>\n        {next != null && (\n          <p data-slot=\"stepper-next-line\">\n            <span className=\"text-[var(--ui-text-on-surface-secondary)]\">\n              {nextLabel}{' '}\n            </span>\n            <span className=\"text-[var(--ui-text-on-surface-primary)]\">\n              {next}\n            </span>\n          </p>\n        )}\n      </div>\n\n      {/* The item row — hidden below `lg`, where the summary replaces it. */}\n      <div\n        data-slot=\"stepper-items\"\n        className=\"hidden flex-wrap content-start items-start justify-start gap-[var(--ui-gap-8)] lg:flex\"\n      >\n        {children}\n      </div>\n    </div>\n  )\n);\nStepper.displayName = 'Stepper';\n\nexport { Stepper };\n"],"names":["Stepper","React","className","children","currentStep","totalSteps","current","next","stepLabel","ofLabel","nextLabel","separatorLabel","props","ref","jsxs","cn","jsx"],"mappings":";;;AAoGA,MAAMA,IAAUC,EAAM;AAAA,EACpB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,aAAU;AAAA,MACV,WAAWE,EAAG,UAAUb,CAAS;AAAA,MAChC,GAAGU;AAAA,MAGJ,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAEV,UAAA;AAAA,cAAA,gBAAAA,EAAC,KAAA,EAAE,aAAU,wBACX,UAAA;AAAA,gBAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,8CACb,UAAA;AAAA,kBAAAN;AAAA,kBAAU;AAAA,kBAAEJ;AAAA,kBAAY;AAAA,kBAAEK;AAAA,kBAAQ;AAAA,kBAAEJ;AAAA,kBACpCM;AAAA,gBAAA,GACH;AAAA,gBACA,gBAAAK,EAAC,QAAA,EAAK,WAAU,4CACb,UAAAV,EAAA,CACH;AAAA,cAAA,GACF;AAAA,cACCC,KAAQ,QACP,gBAAAO,EAAC,KAAA,EAAE,aAAU,qBACX,UAAA;AAAA,gBAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,8CACb,UAAA;AAAA,kBAAAJ;AAAA,kBAAW;AAAA,gBAAA,GACd;AAAA,gBACA,gBAAAM,EAAC,QAAA,EAAK,WAAU,4CACb,UAAAT,EAAA,CACH;AAAA,cAAA,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAKJ,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,WAAU;AAAA,YAET,UAAAb;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;AACAH,EAAQ,cAAc;"}

package/dist/components/ui/stepper-item/stepper-item.js

@@ -0,0 +1,97 @@
+import { jsxs as p, Fragment as m, jsx as d } from "react/jsx-runtime";
+import * as l from "react";
+import { mergeProps as v } from "@base-ui/react/merge-props";
+import { useRender as f } from "@base-ui/react/use-render";
+import { cva as g } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as x } from "../../../lib/utils.js";
+const b = g(
+  "inline-flex items-center gap-[var(--ui-gap-8)] rounded-lg px-[var(--ui-gap-16)] py-[var(--ui-gap-8)] text-sm leading-6 outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]",
+  {
+    variants: {
+      variant: {
+        current: "bg-[var(--ui-background-surface-active)] text-[var(--ui-text-on-surface-primary)]",
+        completed: "text-[var(--ui-text-on-surface-primary)]",
+        future: "pointer-events-none text-[var(--ui-text-on-surface-disabled)]"
+      },
+      // Declared as an axis so the variant x state matrix below can key off it;
+      // on its own it paints nothing, because only `completed` reacts to it.
+      state: {
+        idle: "",
+        hover: "",
+        active: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "completed",
+        state: "hover",
+        class: "bg-[var(--ui-background-surface-hover)]"
+      },
+      {
+        variant: "completed",
+        state: "active",
+        class: "bg-[var(--ui-background-surface-active)]"
+      }
+    ],
+    defaultVariants: {
+      variant: "current",
+      state: "idle"
+    }
+  }
+), h = l.forwardRef(
+  ({
+    className: i,
+    variant: e = "current",
+    state: r = "idle",
+    avatar: s,
+    label: t,
+    render: a,
+    children: n,
+    ...o
+  }, u) => {
+    const c = {
+      "data-slot": "stepper-item",
+      "data-variant": e,
+      "data-state": r,
+      ...e === "future" ? {
+        "aria-disabled": !0,
+        // `pointer-events-none` only stops the mouse. Without this, a step
+        // composed as a real control (`render={<button />}`) would still be
+        // reachable by Tab and activatable by Enter/Space, which contradicts
+        // what `aria-disabled` promises. A consumer prop still wins — `props`
+        // is merged after these.
+        tabIndex: -1,
+        // ARIA 1.2: `aria-disabled` on an element with no widget role is not
+        // announced, and the default rendering here is a plain `<div>`. Give
+        // it an explicit role so "unavailable" actually reaches assistive
+        // tech — the same fix `BreadcrumbPage` applies to the current-page
+        // `<span>`. Skipped when the consumer composes a real element via
+        // `render`, which brings its own (correct) role.
+        ...a ? {} : { role: "link" }
+      } : {}
+    };
+    return f({
+      render: a,
+      ref: u,
+      defaultTagName: "div",
+      props: v(
+        {
+          ...c,
+          className: x(b({ variant: e, state: r }), i),
+          children: /* @__PURE__ */ p(m, { children: [
+            s,
+            t != null && /* @__PURE__ */ d("span", { className: "min-w-0 truncate", children: t }),
+            n
+          ] })
+        },
+        o
+      )
+    });
+  }
+);
+h.displayName = "StepperItem";
+export {
+  h as StepperItem,
+  b as stepperItemVariants
+};
+//# sourceMappingURL=stepper-item.js.map

package/dist/components/ui/stepper-item/stepper-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper-item.js","sources":["../../../../src/components/ui/stepper-item/stepper-item.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// One step in a stepper: an Avatar marker (the step's number, icon, or image)\n// followed by the step name. `variant` is the step's structural role in the\n// sequence — `current` (where the user is), `completed` (already passed, and so\n// realistically clickable to jump back), `future` (not reachable yet). `state`\n// is the interaction state, and it only produces a different look on a\n// `completed` step: `current` is always painted in its highlighted look and\n// `future` is always painted disabled, which is exactly what the Figma component\n// set models — only five state x variant combos exist there\n// (active+current, idle/hover/active+completed, disabled+future).\n//\n// The Avatar is fully consumer-supplied and consumer-styled: this component\n// renders the element it is given verbatim and never sizes, tints, or recolors\n// it. That is why the Figma variables that color the digit *inside* the circle\n// (`components/Stepper/Item/{current,future}/label/color/*`) are deliberately\n// not consumed here — they belong to whatever the caller puts in the `avatar`\n// slot.\n//\n// ── Token substitution (placeholder — re-point once design ships the tier) ──\n// The design references `components/Stepper/Item/*`, which is not \"ready for\n// dev\": there is no `--ui-stepper-item-*` tier in @acronis-platform/tokens-pd\n// (a grep for `Stepper` across tokens-pd and the design-tokens source returns\n// nothing). Rather than hand-author values, this consumes the semantic/generic\n// tokens whose *resolved* value in `packages/tokens-pd/css/default.css` matches\n// the Figma variable exactly — verified value-by-value:\n//\n//   components/Stepper/Item/_global/container/gap          (8px)     -> --ui-gap-8\n//   components/Stepper/Item/_global/container/paddingY      (8px)     -> --ui-gap-8\n//   (padding-x came through Figma as the generic `gap/gap-16`)        -> --ui-gap-16\n//   components/Stepper/Item/_global/container/borderRadius  (8px)     -> `rounded-lg`\n//   components/Stepper/Item/_global/container/color/active  (#e2ebf5) -> --ui-background-surface-active\n//   components/Stepper/Item/_global/container/color/hover   (#eef2f7) -> --ui-background-surface-hover\n//   semantics/colors/text/onSurface/primary                 (#18191b) -> --ui-text-on-surface-primary\n//   semantics/colors/text/onSurface/disabled                (#afb2b6) -> --ui-text-on-surface-disabled\n//\n// The radius is the one exception that stays a static Tailwind utility: tokens-pd\n// has no generic radius scale at all — every `*border-radius*` token is\n// component-owned (e.g. `--ui-card-filter-global-container-border-radius`) — so\n// there is nothing honest to point at, and inventing a token name would be worse\n// than an 8px utility. Figma also defines three separate\n// `completed/label/color/{idle,hover,active}` variables, but all three carry the\n// identical `#18191b`, so the single semantic token covers them faithfully.\n//\n// `focus-visible` lives on the base class rather than a variant: the default\n// `<div>` is never focusable, so the ring only ever appears on a step composed\n// as a real control via `render` — the same 3px `--ui-focus-primary` ring\n// `CardFilter` and `BreadcrumbLink` use.\nconst stepperItemVariants = cva(\n  'inline-flex items-center gap-[var(--ui-gap-8)] rounded-lg px-[var(--ui-gap-16)] py-[var(--ui-gap-8)] text-sm leading-6 outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n  {\n    variants: {\n      variant: {\n        current:\n          'bg-[var(--ui-background-surface-active)] text-[var(--ui-text-on-surface-primary)]',\n        completed: 'text-[var(--ui-text-on-surface-primary)]',\n        future:\n          'pointer-events-none text-[var(--ui-text-on-surface-disabled)]',\n      },\n      // Declared as an axis so the variant x state matrix below can key off it;\n      // on its own it paints nothing, because only `completed` reacts to it.\n      state: {\n        idle: '',\n        hover: '',\n        active: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'completed',\n        state: 'hover',\n        class: 'bg-[var(--ui-background-surface-hover)]',\n      },\n      {\n        variant: 'completed',\n        state: 'active',\n        class: 'bg-[var(--ui-background-surface-active)]',\n      },\n    ],\n    defaultVariants: {\n      variant: 'current',\n      state: 'idle',\n    },\n  }\n);\n\n/** Kept in lockstep with the `cva` axes above. */\nexport type StepperItemVariant = NonNullable<\n  VariantProps<typeof stepperItemVariants>['variant']\n>;\nexport type StepperItemState = NonNullable<\n  VariantProps<typeof stepperItemVariants>['state']\n>;\n\nexport interface StepperItemProps\n  extends React.ComponentPropsWithoutRef<'div'> {\n  /**\n   * The step's structural role in the sequence. Drives the container background\n   * and the label color. Defaults to `current` for prop ergonomics — in a real\n   * sequence every step declares its own.\n   */\n  variant?: StepperItemVariant;\n  /**\n   * Interaction state. Only produces a different look when `variant` is\n   * `completed` (`idle` has no background, `hover` and `active` paint one).\n   * Ignored for `current`, which always renders in its highlighted look, and for\n   * `future`, which always renders disabled and non-interactive.\n   */\n  state?: StepperItemState;\n  /**\n   * The step's marker — required, and entirely the caller's to compose. Pass any\n   * `Avatar` composition (color scheme, initials / icon / image, size overrides);\n   * this component renders it verbatim and never styles it.\n   */\n  avatar: React.ReactElement;\n  /** The step name. */\n  label?: React.ReactNode;\n  /**\n   * Replace the rendered `<div>` with another element or component (Base UI\n   * composition) — e.g. a `<button>`, since a completed step is usually a way\n   * back to an earlier step.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst StepperItem = React.forwardRef<HTMLDivElement, StepperItemProps>(\n  (\n    {\n      className,\n      variant = 'current',\n      state = 'idle',\n      avatar,\n      label,\n      render,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Hoisted out of the `mergeProps` literal: `data-*` keys aren't part of the\n    // Base UI element prop type, so they only pass the excess-property check\n    // when spread in (same shape as CardFilter's `data-selected`).\n    const attributes = {\n      'data-slot': 'stepper-item',\n      'data-variant': variant,\n      'data-state': state,\n      ...(variant === 'future'\n        ? {\n            'aria-disabled': true,\n            // `pointer-events-none` only stops the mouse. Without this, a step\n            // composed as a real control (`render={<button />}`) would still be\n            // reachable by Tab and activatable by Enter/Space, which contradicts\n            // what `aria-disabled` promises. A consumer prop still wins — `props`\n            // is merged after these.\n            tabIndex: -1,\n            // ARIA 1.2: `aria-disabled` on an element with no widget role is not\n            // announced, and the default rendering here is a plain `<div>`. Give\n            // it an explicit role so \"unavailable\" actually reaches assistive\n            // tech — the same fix `BreadcrumbPage` applies to the current-page\n            // `<span>`. Skipped when the consumer composes a real element via\n            // `render`, which brings its own (correct) role.\n            ...(render ? {} : { role: 'link' }),\n          }\n        : {}),\n    };\n\n    return useRender({\n      render,\n      ref,\n      defaultTagName: 'div',\n      props: mergeProps<'div'>(\n        {\n          ...attributes,\n          className: cn(stepperItemVariants({ variant, state }), className),\n          children: (\n            <>\n              {avatar}\n              {label != null && (\n                <span className=\"min-w-0 truncate\">{label}</span>\n              )}\n              {children}\n            </>\n          ),\n        },\n        props\n      ),\n    });\n  }\n);\nStepperItem.displayName = 'StepperItem';\n\nexport { StepperItem, stepperItemVariants };\n"],"names":["stepperItemVariants","cva","StepperItem","React","className","variant","state","avatar","label","render","children","props","ref","attributes","useRender","mergeProps","cn","jsxs","Fragment","jsx"],"mappings":";;;;;;AAuDA,MAAMA,IAAsBC;AAAA,EAC1B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SACE;AAAA,QACF,WAAW;AAAA,QACX,QACE;AAAA,MAAA;AAAA;AAAA;AAAA,MAIJ,OAAO;AAAA,QACL,MAAM;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,IAEF,kBAAkB;AAAA,MAChB;AAAA,QACE,SAAS;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAET;AAAA,QACE,SAAS;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,GAyCMC,IAAcC,EAAM;AAAA,EACxB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AAIH,UAAMC,IAAa;AAAA,MACjB,aAAa;AAAA,MACb,gBAAgBR;AAAA,MAChB,cAAcC;AAAA,MACd,GAAID,MAAY,WACZ;AAAA,QACE,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMjB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOV,GAAII,IAAS,CAAA,IAAK,EAAE,MAAM,OAAA;AAAA,MAAO,IAEnC,CAAA;AAAA,IAAC;AAGP,WAAOK,EAAU;AAAA,MACf,QAAAL;AAAA,MACA,KAAAG;AAAA,MACA,gBAAgB;AAAA,MAChB,OAAOG;AAAA,QACL;AAAA,UACE,GAAGF;AAAA,UACH,WAAWG,EAAGhB,EAAoB,EAAE,SAAAK,GAAS,OAAAC,EAAA,CAAO,GAAGF,CAAS;AAAA,UAChE,UACE,gBAAAa,EAAAC,GAAA,EACG,UAAA;AAAA,YAAAX;AAAA,YACAC,KAAS,QACR,gBAAAW,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAX,GAAM;AAAA,YAE3CE;AAAA,UAAA,EAAA,CACH;AAAA,QAAA;AAAA,QAGJC;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH;AACF;AACAT,EAAY,cAAc;"}

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

@@ -1,88 +1,95 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import * as b from "react";
-import { ChevronFirstIcon as x, ChevronLeftIcon as g, ChevronRightIcon as y, ChevronLastIcon as $ } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as S } from "../../../lib/utils.js";
-import { InputSelect as j, InputSelectTrigger as k, InputSelectValue as w, InputSelectContent as C, InputSelectItem as G } from "../input-select/input-select.js";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import * as S from "react";
+import { ChevronFirstIcon as j, ChevronLeftIcon as k, ChevronRightIcon as G, ChevronLastIcon as I } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as R } from "../../../lib/utils.js";
+import { InputSelect as T, InputSelectTrigger as V, InputSelectValue as B, InputSelectContent as F, InputSelectItem as L } from "../input-select/input-select.js";
 import { ButtonIcon as c } from "../button-icon/button-icon.js";
-const I = b.forwardRef(
+const q = S.forwardRef(
   ({
     className: d,
-    pageIndex: l,
-    pageCount: i,
+    pageIndex: i,
+    pageCount: s,
     pageSize: f,
     pageSizeOptions: p = [10, 20, 30, 40, 50],
-    totalRows: n,
-    selectedRows: s,
-    onPageIndexChange: t,
+    totalRows: o,
+    selectedRows: h,
+    onPageIndexChange: n,
     onPageSizeChange: u,
-    ...h
-  }, v) => {
-    const o = l > 0, m = l < i - 1, N = s != null && n != null ? `${s} of ${n} row(s) selected.` : n != null ? `${n} row(s).` : null;
-    return /* @__PURE__ */ r(
+    rowsPerPageLabel: m = "Rows per page",
+    firstPageLabel: v = "Go to first page",
+    previousPageLabel: N = "Go to previous page",
+    nextPageLabel: x = "Go to next page",
+    lastPageLabel: b = "Go to last page",
+    pageLabel: g = (a, l) => l === 0 ? "No pages" : `Page ${a} of ${l}`,
+    summaryLabel: y = (a, l) => a != null ? `${a} of ${l} row(s) selected.` : `${l} row(s).`,
+    ...$
+  }, w) => {
+    const a = i > 0, l = i < s - 1, C = o != null ? y(h, o) : null;
+    return /* @__PURE__ */ t(
       "div",
       {
-        ref: v,
-        className: S("flex items-center justify-between px-2", d),
-        ...h,
+        ref: w,
+        className: R("flex items-center justify-between px-2", d),
+        ...$,
         children: [
-          /* @__PURE__ */ e("div", { className: "flex-1 text-sm text-muted-foreground", children: N }),
-          /* @__PURE__ */ r("div", { className: "flex items-center gap-6 lg:gap-8", children: [
-            /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e("p", { className: "text-sm font-medium", children: "Rows per page" }),
-              /* @__PURE__ */ r(
-                j,
+          /* @__PURE__ */ e("div", { className: "flex-1 text-sm text-muted-foreground", children: C }),
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-6 lg:gap-8", children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e("p", { className: "text-sm font-medium", children: m }),
+              /* @__PURE__ */ t(
+                T,
                 {
                   value: `${f}`,
-                  onValueChange: (a) => u(Number(a)),
+                  onValueChange: (r) => u(Number(r)),
                   children: [
-                    /* @__PURE__ */ e(k, { "aria-label": "Rows per page", className: "h-8 w-[70px]", children: /* @__PURE__ */ e(w, {}) }),
-                    /* @__PURE__ */ e(C, { children: p.map((a) => /* @__PURE__ */ e(G, { value: `${a}`, children: a }, a)) })
+                    /* @__PURE__ */ e(V, { "aria-label": m, className: "h-8 w-[70px]", children: /* @__PURE__ */ e(B, {}) }),
+                    /* @__PURE__ */ e(F, { children: p.map((r) => /* @__PURE__ */ e(L, { value: `${r}`, children: r }, r)) })
                   ]
                 }
               )
             ] }),
-            /* @__PURE__ */ e("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: i === 0 ? "No pages" : `Page ${l + 1} of ${i}` }),
-            /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: g(i + 1, s) }),
+            /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ e(
                 c,
                 {
                   variant: "secondary",
-                  "aria-label": "Go to first page",
+                  "aria-label": v,
                   className: "hidden lg:inline-flex",
-                  onClick: () => t(0),
-                  disabled: !o,
-                  children: /* @__PURE__ */ e(x, {})
+                  onClick: () => n(0),
+                  disabled: !a,
+                  children: /* @__PURE__ */ e(j, {})
                 }
               ),
               /* @__PURE__ */ e(
                 c,
                 {
                   variant: "secondary",
-                  "aria-label": "Go to previous page",
-                  onClick: () => t(l - 1),
-                  disabled: !o,
-                  children: /* @__PURE__ */ e(g, {})
+                  "aria-label": N,
+                  onClick: () => n(i - 1),
+                  disabled: !a,
+                  children: /* @__PURE__ */ e(k, {})
                 }
               ),
               /* @__PURE__ */ e(
                 c,
                 {
                   variant: "secondary",
-                  "aria-label": "Go to next page",
-                  onClick: () => t(l + 1),
-                  disabled: !m,
-                  children: /* @__PURE__ */ e(y, {})
+                  "aria-label": x,
+                  onClick: () => n(i + 1),
+                  disabled: !l,
+                  children: /* @__PURE__ */ e(G, {})
                 }
               ),
               /* @__PURE__ */ e(
                 c,
                 {
                   variant: "secondary",
-                  "aria-label": "Go to last page",
+                  "aria-label": b,
                   className: "hidden lg:inline-flex",
-                  onClick: () => t(i - 1),
-                  disabled: !m,
-                  children: /* @__PURE__ */ e($, {})
+                  onClick: () => n(s - 1),
+                  disabled: !l,
+                  children: /* @__PURE__ */ e(I, {})
                 }
               )
             ] })
@@ -92,8 +99,8 @@ const I = b.forwardRef(
     );
   }
 );
-I.displayName = "TablePagination";
+q.displayName = "TablePagination";
 export {
-  I as TablePagination
+  q as TablePagination
 };
 //# sourceMappingURL=table-pagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-pagination.js","sources":["../../../../src/components/ui/table/table-pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\nimport { ButtonIcon } from '../button-icon';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../select';\n\nexport interface TablePaginationProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Zero-based index of the current page. */\n  pageIndex: number;\n  /** Total number of pages. */\n  pageCount: number;\n  /** Number of rows shown per page. */\n  pageSize: number;\n  /** Page-size options offered in the rows-per-page select. */\n  pageSizeOptions?: number[];\n  /** Total number of rows across all pages (drives the summary text). */\n  totalRows?: number;\n  /** Number of currently selected rows (drives the selection summary text). */\n  selectedRows?: number;\n  /** Invoked with the next zero-based page index. */\n  onPageIndexChange: (pageIndex: number) => void;\n  /** Invoked with the next page size. */\n  onPageSizeChange: (pageSize: number) => void;\n}\n\n// TanStack-independent twin of `DataTablePagination` — same visual design\n// (first/prev/next/last + rows-per-page select + page-count text, no numbered\n// button window) driven by plain props so it can pair with the `Table`\n// primitives without pulling in `@tanstack/react-table`.\nconst TablePagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(\n  (\n    {\n      className,\n      pageIndex,\n      pageCount,\n      pageSize,\n      pageSizeOptions = [10, 20, 30, 40, 50],\n      totalRows,\n      selectedRows,\n      onPageIndexChange,\n      onPageSizeChange,\n      ...props\n    },\n    ref\n  ) => {\n    const canPrevious = pageIndex > 0;\n    const canNext = pageIndex < pageCount - 1;\n\n    const summary =\n      selectedRows != null && totalRows != null\n        ? `${selectedRows} of ${totalRows} row(s) selected.`\n        : totalRows != null\n          ? `${totalRows} row(s).`\n          : null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn('flex items-center justify-between px-2', className)}\n        {...props}\n      >\n        <div className=\"flex-1 text-sm text-muted-foreground\">{summary}</div>\n        <div className=\"flex items-center gap-6 lg:gap-8\">\n          <div className=\"flex items-center gap-2\">\n            <p className=\"text-sm font-medium\">Rows per page</p>\n            <Select\n              value={`${pageSize}`}\n              onValueChange={(value) => onPageSizeChange(Number(value))}\n            >\n              <SelectTrigger aria-label=\"Rows per page\" className=\"h-8 w-[70px]\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                {pageSizeOptions.map((option) => (\n                  <SelectItem key={option} value={`${option}`}>\n                    {option}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </div>\n          <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n            {pageCount === 0 ? 'No pages' : `Page ${pageIndex + 1} of ${pageCount}`}\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <ButtonIcon\n              variant=\"secondary\"\n              aria-label=\"Go to first page\"\n              className=\"hidden lg:inline-flex\"\n              onClick={() => onPageIndexChange(0)}\n              disabled={!canPrevious}\n            >\n              <ChevronFirstIcon />\n            </ButtonIcon>\n            <ButtonIcon\n              variant=\"secondary\"\n              aria-label=\"Go to previous page\"\n              onClick={() => onPageIndexChange(pageIndex - 1)}\n              disabled={!canPrevious}\n            >\n              <ChevronLeftIcon />\n            </ButtonIcon>\n            <ButtonIcon\n              variant=\"secondary\"\n              aria-label=\"Go to next page\"\n              onClick={() => onPageIndexChange(pageIndex + 1)}\n              disabled={!canNext}\n            >\n              <ChevronRightIcon />\n            </ButtonIcon>\n            <ButtonIcon\n              variant=\"secondary\"\n              aria-label=\"Go to last page\"\n              className=\"hidden lg:inline-flex\"\n              onClick={() => onPageIndexChange(pageCount - 1)}\n              disabled={!canNext}\n            >\n              <ChevronLastIcon />\n            </ButtonIcon>\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\nTablePagination.displayName = 'TablePagination';\n\nexport { TablePagination };\n"],"names":["TablePagination","React","className","pageIndex","pageCount","pageSize","pageSizeOptions","totalRows","selectedRows","onPageIndexChange","onPageSizeChange","props","ref","canPrevious","canNext","summary","jsxs","cn","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","option","SelectItem","ButtonIcon","ChevronFirstIcon","ChevronLeftIcon","ChevronRightIcon","ChevronLastIcon"],"mappings":"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"}
+{"version":3,"file":"table-pagination.js","sources":["../../../../src/components/ui/table/table-pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\nimport { ButtonIcon } from '../button-icon';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../select';\n\nexport interface TablePaginationProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Zero-based index of the current page. */\n  pageIndex: number;\n  /** Total number of pages. */\n  pageCount: number;\n  /** Number of rows shown per page. */\n  pageSize: number;\n  /** Page-size options offered in the rows-per-page select. */\n  pageSizeOptions?: number[];\n  /** Total number of rows across all pages (drives the summary text). */\n  totalRows?: number;\n  /** Number of currently selected rows (drives the selection summary text). */\n  selectedRows?: number;\n  /** Invoked with the next zero-based page index. */\n  onPageIndexChange: (pageIndex: number) => void;\n  /** Invoked with the next page size. */\n  onPageSizeChange: (pageSize: number) => void;\n  /** Label of the rows-per-page select (also its accessible name). */\n  rowsPerPageLabel?: string;\n  /** Accessible name of the first-page control. */\n  firstPageLabel?: string;\n  /** Accessible name of the previous-page control. */\n  previousPageLabel?: string;\n  /** Accessible name of the next-page control. */\n  nextPageLabel?: string;\n  /** Accessible name of the last-page control. */\n  lastPageLabel?: string;\n  /**\n   * Builds the page indicator. Receives the 1-based page number and the total\n   * page count; `pageCount === 0` means there are no pages.\n   */\n  pageLabel?: (page: number, pageCount: number) => string;\n  /**\n   * Builds the leading row summary. Receives the selected-row count (or\n   * `undefined` when selection isn't tracked) and the total row count. Return\n   * `null` for no summary.\n   */\n  summaryLabel?: (\n    selectedRows: number | undefined,\n    totalRows: number\n  ) => string | null;\n}\n\n// TanStack-independent twin of `DataTablePagination` — same visual design\n// (first/prev/next/last + rows-per-page select + page-count text, no numbered\n// button window) driven by plain props so it can pair with the `Table`\n// primitives without pulling in `@tanstack/react-table`.\nconst TablePagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(\n  (\n    {\n      className,\n      pageIndex,\n      pageCount,\n      pageSize,\n      pageSizeOptions = [10, 20, 30, 40, 50],\n      totalRows,\n      selectedRows,\n      onPageIndexChange,\n      onPageSizeChange,\n      rowsPerPageLabel = 'Rows per page',\n      firstPageLabel = 'Go to first page',\n      previousPageLabel = 'Go to previous page',\n      nextPageLabel = 'Go to next page',\n      lastPageLabel = 'Go to last page',\n      pageLabel = (page, count) =>\n        count === 0 ? 'No pages' : `Page ${page} of ${count}`,\n      summaryLabel = (selected, total) =>\n        selected != null\n          ? `${selected} of ${total} row(s) selected.`\n          : `${total} row(s).`,\n      ...props\n    },\n    ref\n  ) => {\n    const canPrevious = pageIndex > 0;\n    const canNext = pageIndex < pageCount - 1;\n\n    const summary =\n      totalRows != null ? summaryLabel(selectedRows, totalRows) : null;\n\n    return (\n      <div\n        ref={ref}\n        className={cn('flex items-center justify-between px-2', className)}\n        {...props}\n      >\n        <div className=\"flex-1 text-sm text-muted-foreground\">{summary}</div>\n        <div className=\"flex items-center gap-6 lg:gap-8\">\n          <div className=\"flex items-center gap-2\">\n            <p className=\"text-sm font-medium\">{rowsPerPageLabel}</p>\n            <Select\n              value={`${pageSize}`}\n              onValueChange={(value) => onPageSizeChange(Number(value))}\n            >\n              <SelectTrigger aria-label={rowsPerPageLabel} className=\"h-8 w-[70px]\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                {pageSizeOptions.map((option) => (\n                  <SelectItem key={option} value={`${option}`}>\n                    {option}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </div>\n          <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n            {pageLabel(pageIndex + 1, pageCount)}\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <ButtonIcon\n              variant=\"secondary\"\n              aria-label={firstPageLabel}\n              className=\"hidden lg:inline-flex\"\n              onClick={() => onPageIndexChange(0)}\n              disabled={!canPrevious}\n            >\n              <ChevronFirstIcon />\n            </ButtonIcon>\n            <ButtonIcon\n              variant=\"secondary\"\n              aria-label={previousPageLabel}\n              onClick={() => onPageIndexChange(pageIndex - 1)}\n              disabled={!canPrevious}\n            >\n              <ChevronLeftIcon />\n            </ButtonIcon>\n            <ButtonIcon\n              variant=\"secondary\"\n              aria-label={nextPageLabel}\n              onClick={() => onPageIndexChange(pageIndex + 1)}\n              disabled={!canNext}\n            >\n              <ChevronRightIcon />\n            </ButtonIcon>\n            <ButtonIcon\n              variant=\"secondary\"\n              aria-label={lastPageLabel}\n              className=\"hidden lg:inline-flex\"\n              onClick={() => onPageIndexChange(pageCount - 1)}\n              disabled={!canNext}\n            >\n              <ChevronLastIcon />\n            </ButtonIcon>\n          </div>\n        </div>\n      </div>\n    );\n  }\n);\nTablePagination.displayName = 'TablePagination';\n\nexport { TablePagination };\n"],"names":["TablePagination","React","className","pageIndex","pageCount","pageSize","pageSizeOptions","totalRows","selectedRows","onPageIndexChange","onPageSizeChange","rowsPerPageLabel","firstPageLabel","previousPageLabel","nextPageLabel","lastPageLabel","pageLabel","page","count","summaryLabel","selected","total","props","ref","canPrevious","canNext","summary","jsxs","cn","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","option","SelectItem","ButtonIcon","ChevronFirstIcon","ChevronLeftIcon","ChevronRightIcon","ChevronLastIcon"],"mappings":"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"}

package/dist/components/ui/table/table-view-options.js

@@ -1,41 +1,54 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { CogIcon as d, CheckIcon as t } from "@acronis-platform/icons-react/stroke-mono";
-import { DropdownMenu as p, DropdownMenuTrigger as s, DropdownMenuContent as c, DropdownMenuGroup as l, DropdownMenuItem as h } from "../dropdown-menu/dropdown-menu.js";
-import { Button as m } from "../button/button.js";
-function w({
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { CogIcon as s } from "@acronis-platform/icons-react/stroke-mono";
+import { DropdownMenu as p, DropdownMenuTrigger as c, DropdownMenuContent as l, DropdownMenuGroup as m, DropdownMenuItem as h } from "../dropdown-menu/dropdown-menu.js";
+import { ButtonIcon as f } from "../button-icon/button-icon.js";
+import { Button as u } from "../button/button.js";
+import { Checkbox as w } from "../checkbox/checkbox.js";
+function b({
   columns: i,
-  onToggle: o,
-  triggerLabel: a = "View"
+  onToggle: a,
+  triggerLabel: t = "View",
+  iconOnly: o = !1,
+  triggerAriaLabel: d = "Column settings"
 }) {
   return /* @__PURE__ */ r(p, { children: [
     /* @__PURE__ */ r(
-      s,
+      c,
       {
-        render: /* @__PURE__ */ n(m, { variant: "secondary", className: "h-8 shrink-0 gap-2" }),
+        render: o ? /* @__PURE__ */ e(f, { "aria-label": d }) : /* @__PURE__ */ e(u, { variant: "secondary", className: "h-8 shrink-0 gap-2" }),
         children: [
-          /* @__PURE__ */ n(d, {}),
-          a
+          /* @__PURE__ */ e(s, {}),
+          !o && t
         ]
       }
     ),
-    /* @__PURE__ */ n(c, { align: "end", className: "w-[150px]", children: /* @__PURE__ */ n(l, { children: i.map((e) => /* @__PURE__ */ r(
+    /* @__PURE__ */ e(l, { align: "end", className: "w-[150px]", children: /* @__PURE__ */ e(m, { children: i.map((n) => /* @__PURE__ */ r(
       h,
       {
         role: "menuitemcheckbox",
-        "aria-checked": !e.hidden,
+        "aria-checked": !n.hidden,
         closeOnClick: !1,
-        onClick: () => o(e.id),
+        onClick: () => a(n.id),
+        className: "items-center",
         children: [
-          e.label,
-          !e.hidden && /* @__PURE__ */ n(t, { className: "ms-auto", "aria-hidden": !0 })
+          /* @__PURE__ */ e(
+            w,
+            {
+              checked: !n.hidden,
+              "aria-hidden": !0,
+              tabIndex: -1,
+              className: "pointer-events-none"
+            }
+          ),
+          n.label
         ]
       },
-      e.id
+      n.id
     )) }) })
   ] });
 }
-w.displayName = "TableViewOptions";
+b.displayName = "TableViewOptions";
 export {
-  w as TableViewOptions
+  b as TableViewOptions
 };
 //# sourceMappingURL=table-view-options.js.map

package/dist/components/ui/table/table-view-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-view-options.js","sources":["../../../../src/components/ui/table/table-view-options.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CheckIcon, CogIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\n\nexport interface TableColumnVisibility {\n  /** Stable column identifier. */\n  id: string;\n  /** Human-readable label shown in the menu. */\n  label: string;\n  /** Whether the column is currently hidden. */\n  hidden: boolean;\n}\n\nexport interface TableViewOptionsProps {\n  /** The toggleable columns and their current visibility. */\n  columns: TableColumnVisibility[];\n  /** Invoked with the column id whose visibility was toggled. */\n  onToggle: (id: string) => void;\n  /** Trigger label. Defaults to `View`. */\n  triggerLabel?: React.ReactNode;\n}\n\n// TanStack-independent show/hide-columns dropdown extracted from\n// `DataTableViewOptions`'s UI. Driven by a plain `{ id, label, hidden }[]` +\n// `onToggle`, so it pairs with the `Table` primitives; `DataTableViewOptions`\n// can later become a thin TanStack adapter over this part.\nfunction TableViewOptions({\n  columns,\n  onToggle,\n  triggerLabel = 'View',\n}: TableViewOptionsProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        render={<Button variant=\"secondary\" className=\"h-8 shrink-0 gap-2\" />}\n      >\n        <CogIcon />\n        {triggerLabel}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-[150px]\">\n        <DropdownMenuGroup>\n          {columns.map((column) => (\n            <DropdownMenuItem\n              key={column.id}\n              role=\"menuitemcheckbox\"\n              aria-checked={!column.hidden}\n              closeOnClick={false}\n              onClick={() => onToggle(column.id)}\n            >\n              {column.label}\n              {!column.hidden && <CheckIcon className=\"ms-auto\" aria-hidden />}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\nTableViewOptions.displayName = 'TableViewOptions';\n\nexport { TableViewOptions };\n"],"names":["TableViewOptions","columns","onToggle","triggerLabel","DropdownMenu","jsxs","DropdownMenuTrigger","jsx","Button","CogIcon","DropdownMenuContent","DropdownMenuGroup","column","DropdownMenuItem","CheckIcon"],"mappings":";;;;AAkCA,SAASA,EAAiB;AAAA,EACxB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe;AACjB,GAA0B;AACxB,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,QAAQ,gBAAAC,EAACC,GAAA,EAAO,SAAQ,aAAY,WAAU,sBAAqB;AAAA,QAEnE,UAAA;AAAA,UAAA,gBAAAD,EAACE,GAAA,EAAQ;AAAA,UACRN;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAI,EAACG,GAAA,EAAoB,OAAM,OAAM,WAAU,aACzC,UAAA,gBAAAH,EAACI,GAAA,EACE,UAAAV,EAAQ,IAAI,CAACW,MACZ,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,gBAAc,CAACD,EAAO;AAAA,QACtB,cAAc;AAAA,QACd,SAAS,MAAMV,EAASU,EAAO,EAAE;AAAA,QAEhC,UAAA;AAAA,UAAAA,EAAO;AAAA,UACP,CAACA,EAAO,UAAU,gBAAAL,EAACO,KAAU,WAAU,WAAU,eAAW,GAAA,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAPzDF,EAAO;AAAA,IAAA,CASf,GACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AACAZ,EAAiB,cAAc;"}
+{"version":3,"file":"table-view-options.js","sources":["../../../../src/components/ui/table/table-view-options.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CogIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport { ButtonIcon } from '../button-icon';\nimport { Checkbox } from '../checkbox';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '../dropdown-menu';\n\nexport interface TableColumnVisibility {\n  /** Stable column identifier. */\n  id: string;\n  /** Human-readable label shown in the menu. */\n  label: string;\n  /** Whether the column is currently hidden. */\n  hidden: boolean;\n}\n\nexport interface TableViewOptionsProps {\n  /** The toggleable columns and their current visibility. */\n  columns: TableColumnVisibility[];\n  /** Invoked with the column id whose visibility was toggled. */\n  onToggle: (id: string) => void;\n  /** Trigger label. Defaults to `View`. Ignored when `iconOnly`. */\n  triggerLabel?: React.ReactNode;\n  /**\n   * Render the trigger as a cog-only icon button instead of a labelled\n   * `Button` — the shape that fits the 48px `TableSettingsCell` column.\n   */\n  iconOnly?: boolean;\n  /** Accessible name of the `iconOnly` trigger. Override to localize. */\n  triggerAriaLabel?: string;\n}\n\n// TanStack-independent show/hide-columns dropdown extracted from\n// `DataTableViewOptions`'s UI. Driven by a plain `{ id, label, hidden }[]` +\n// `onToggle`, so it pairs with the `Table` primitives; `DataTableViewOptions`\n// can later become a thin TanStack adapter over this part.\n//\n// Each row shows a real `Checkbox` box beside the column name, per the design.\n// That box is presentation only (`aria-hidden`, not focusable, click-through):\n// the accessible control is the `menuitemcheckbox` row itself, which carries\n// `aria-checked` and the click handler.\nfunction TableViewOptions({\n  columns,\n  onToggle,\n  triggerLabel = 'View',\n  iconOnly = false,\n  triggerAriaLabel = 'Column settings',\n}: TableViewOptionsProps) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        render={\n          iconOnly ? (\n            <ButtonIcon aria-label={triggerAriaLabel} />\n          ) : (\n            <Button variant=\"secondary\" className=\"h-8 shrink-0 gap-2\" />\n          )\n        }\n      >\n        <CogIcon />\n        {!iconOnly && triggerLabel}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-[150px]\">\n        <DropdownMenuGroup>\n          {columns.map((column) => (\n            <DropdownMenuItem\n              key={column.id}\n              role=\"menuitemcheckbox\"\n              aria-checked={!column.hidden}\n              closeOnClick={false}\n              onClick={() => onToggle(column.id)}\n              className=\"items-center\"\n            >\n              <Checkbox\n                checked={!column.hidden}\n                aria-hidden\n                tabIndex={-1}\n                className=\"pointer-events-none\"\n              />\n              {column.label}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\nTableViewOptions.displayName = 'TableViewOptions';\n\nexport { TableViewOptions };\n"],"names":["TableViewOptions","columns","onToggle","triggerLabel","iconOnly","triggerAriaLabel","DropdownMenu","jsxs","DropdownMenuTrigger","jsx","ButtonIcon","Button","CogIcon","DropdownMenuContent","DropdownMenuGroup","column","DropdownMenuItem","Checkbox"],"mappings":";;;;;;AAgDA,SAASA,EAAiB;AAAA,EACxB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AACrB,GAA0B;AACxB,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,QACEJ,IACE,gBAAAK,EAACC,GAAA,EAAW,cAAYL,EAAA,CAAkB,IAE1C,gBAAAI,EAACE,GAAA,EAAO,SAAQ,aAAY,WAAU,qBAAA,CAAqB;AAAA,QAI/D,UAAA;AAAA,UAAA,gBAAAF,EAACG,GAAA,EAAQ;AAAA,UACR,CAACR,KAAYD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEhB,gBAAAM,EAACI,GAAA,EAAoB,OAAM,OAAM,WAAU,aACzC,UAAA,gBAAAJ,EAACK,GAAA,EACE,UAAAb,EAAQ,IAAI,CAACc,MACZ,gBAAAR;AAAA,MAACS;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,gBAAc,CAACD,EAAO;AAAA,QACtB,cAAc;AAAA,QACd,SAAS,MAAMb,EAASa,EAAO,EAAE;AAAA,QACjC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAN;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,SAAS,CAACF,EAAO;AAAA,cACjB,eAAW;AAAA,cACX,UAAU;AAAA,cACV,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEXA,EAAO;AAAA,QAAA;AAAA,MAAA;AAAA,MAbHA,EAAO;AAAA,IAAA,CAef,GACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AACAf,EAAiB,cAAc;"}