@acronis-platform/ui-react 0.57.0 → 0.58.0

package/dist/components/ui/confidence-cone/confidence-cone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confidence-cone.js","sources":["../../../../src/components/ui/confidence-cone/confidence-cone.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  Area,\n  CartesianGrid,\n  ComposedChart,\n  Line,\n  ReferenceArea,\n  ReferenceLine,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n  type ChartLegendContentProps,\n  type ChartTooltipContentProps,\n} from '../chart';\n\n// A forecast confidence-cone: a solid line over the known/actual period, a\n// dashed line over the forecast period, and a shaded band (the \"cone\") between\n// a lower and upper bound that typically widens with the horizon — visualizing\n// growing uncertainty. Built on the shared Chart primitives; no new tokens\n// (series colors are caller-supplied via `config`). The whole metric renders in\n// one hue — actual and forecast differ by line style, not color — so the cone\n// band and the forecast line both reuse the actual series' color.\n\n// The band is a synthetic `[lower, upper]` range field per row that a recharts\n// <Area> shades; kept out of the tooltip/legend (see the filters below).\nconst BAND_KEY = '__cone';\n\n/**\n * Drop the synthetic cone-band range series from a recharts tooltip/legend\n * payload, keeping the real actual/forecast series (and their order). Applied to\n * both the default tooltip and any caller-supplied `tooltipContent`, so the\n * `__cone` band never surfaces regardless of which path renders.\n */\nexport function dropConeBand<T extends { dataKey?: unknown }>(\n  payload: readonly T[] | undefined\n): T[] | undefined {\n  return payload?.filter((item) => item.dataKey !== BAND_KEY);\n}\n\n/**\n * Wrap a caller-supplied `tooltipContent` so the synthetic cone band is stripped\n * from the payload before it renders, while preserving recharts' own mount\n * semantics — a function is mounted via `createElement` (its own component\n * identity + hook state), an element via `cloneElement`. This mirrors what the\n * pass-through charts get by handing `content` straight to recharts, so a\n * function-form tooltip keeps its state across re-renders here too. The returned\n * component is a stable content type (memoize it on `tooltipContent`).\n */\ntype TooltipContentType = NonNullable<\n  React.ComponentProps<typeof ChartTooltip>['content']\n>;\ntype TooltipContentFn = Extract<TooltipContentType, (...args: never[]) => unknown>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\n\nexport function createConeTooltip(tooltipContent: TooltipContentType) {\n  return function ConeTooltip(props: TooltipRenderProps) {\n    const merged = {\n      ...props,\n      payload: dropConeBand(props.payload),\n    } as TooltipRenderProps;\n    return typeof tooltipContent === 'function'\n      ? React.createElement(\n          tooltipContent as React.FunctionComponent<TooltipRenderProps>,\n          merged\n        )\n      : React.cloneElement(tooltipContent, merged);\n  };\n}\n\nexport interface ConfidenceConeProps\n  extends Omit<React.ComponentProps<'div'>, 'children'> {\n  /**\n   * Row-per-point data — the shared x dimension plus the actual / forecast /\n   * bound fields. Rows are naturally sparse (a point has either an actual or a\n   * forecast + bounds), so missing fields are allowed. Avoid a field named\n   * `__cone` — it's reserved for the internal prediction-band series.\n   */\n  data: ReadonlyArray<Record<string, string | number | null | undefined>>;\n  /**\n   * Per-series map of `label` / `color` for the actual + forecast lines\n   * (imported from the shared `Chart` primitives). Colors are caller-supplied —\n   * reference an existing semantic `--ui-*` token; there is no chart palette tier\n   * yet. The cone band and the forecast line both reuse the actual series'\n   * color — actual and forecast differ by line style, not hue.\n   */\n  config: ChartConfig;\n  /** Category / time axis key (the shared dimension across rows). */\n  xKey: string;\n  /** Field for the known/actual values — drawn as a solid line with a filled area. */\n  actualKey: string;\n  /** Field for the projected values — drawn as a dashed line. */\n  forecastKey: string;\n  /** Field for the cone's lower bound. */\n  lowerKey: string;\n  /** Field for the cone's upper bound. */\n  upperKey: string;\n  /** Title rendered beneath the horizontal (X) axis. */\n  xAxisLabel?: string;\n  /** Title rendered beside the vertical (Y) axis (rotated). */\n  yAxisLabel?: string;\n  /** Unit suffix appended to Y-axis tick values (recharts `unit`; the X axis is categorical). */\n  yUnit?: string;\n  /** Stroke width of the actual + forecast lines. */\n  strokeWidth?: number;\n  /**\n   * Set off the forecast period from the actuals with a dashed divider at the\n   * hand-off point (the first row with a forecast value) and a subtle shaded\n   * band over the forecast region.\n   */\n  showForecastRegion?: boolean;\n  showGrid?: boolean;\n  showTooltip?: boolean;\n  showLegend?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —\n   * to customize the tooltip without composing recharts yourself. The synthetic\n   * cone band is filtered out of the payload before your tooltip sees it, so a\n   * `__cone` item never reaches your formatter. Ignored when `showTooltip` is\n   * false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst ConfidenceCone = React.forwardRef<HTMLDivElement, ConfidenceConeProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      xKey,\n      actualKey,\n      forecastKey,\n      lowerKey,\n      upperKey,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      strokeWidth = 2,\n      showForecastRegion = true,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    // Memoized so recharts sees a stable content type across renders — a fresh\n    // wrapper each render would remount the caller's tooltip and reset its state.\n    const customTooltip = React.useMemo(\n      () => (tooltipContent ? createConeTooltip(tooltipContent) : undefined),\n      [tooltipContent]\n    );\n\n    const xAxisTitle = xAxisLabel\n      ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n      : undefined;\n    const yAxisTitle = yAxisLabel\n      ? {\n          value: yAxisLabel,\n          angle: -90,\n          position: 'insideLeft' as const,\n          style: { textAnchor: 'middle' as const },\n        }\n      : undefined;\n\n    // Augment each row with the `[lower, upper]` band tuple the Area shades.\n    // Rows missing a numeric bound are left un-coned (the band breaks there).\n    const chartData = data.map((row) => {\n      const lower = row[lowerKey];\n      const upper = row[upperKey];\n      return {\n        ...row,\n        [BAND_KEY]:\n          typeof lower === 'number' && typeof upper === 'number'\n            ? [lower, upper]\n            : undefined,\n      };\n    });\n\n    // The forecast begins at the first row carrying a forecast value; set that\n    // region off from the actuals with a shaded band + a divider at the hand-off.\n    const forecastStart = showForecastRegion\n      ? data.find((row) => typeof row[forecastKey] === 'number')?.[xKey]\n      : undefined;\n    const lastX = data[data.length - 1]?.[xKey];\n\n    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <ChartContainer\n          config={config}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <ComposedChart data={chartData as readonly unknown[]}>\n            {showGrid && <CartesianGrid vertical={false} />}\n            <XAxis\n              dataKey={xKey}\n              type=\"category\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              height={xAxisLabel ? 48 : undefined}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              tickLine={false}\n              axisLine={false}\n              unit={yUnit}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {/* Set the forecast region off from the actuals (behind everything). */}\n            {forecastStart != null && lastX != null && (\n              <ReferenceArea\n                x1={forecastStart}\n                x2={lastX}\n                fill=\"var(--ui-background-surface-secondary)\"\n                fillOpacity={0.5}\n                ifOverflow=\"extendDomain\"\n              />\n            )}\n            {forecastStart != null && (\n              <ReferenceLine\n                x={forecastStart}\n                stroke=\"var(--ui-border-on-surface-border)\"\n                strokeDasharray=\"4 4\"\n              />\n            )}\n            {showTooltip &&\n              (customTooltip ? (\n                // Strips the synthetic band before the caller's tooltip sees it\n                // — the `__cone` series feeds the Area, not the tooltip.\n                <ChartTooltip content={customTooltip} />\n              ) : (\n                <ChartTooltip\n                  content={(tp) => (\n                    <ChartTooltipContent\n                      active={tp.active}\n                      label={tp.label}\n                      // The synthetic band feeds the Area, not the tooltip.\n                      payload={\n                        dropConeBand(\n                          tp.payload\n                        ) as ChartTooltipContentProps['payload']\n                      }\n                    />\n                  )}\n                />\n              ))}\n            {showLegend && (\n              <ChartLegend\n                content={(lp) => (\n                  <ChartLegendContent\n                    verticalAlign={lp.verticalAlign}\n                    payload={\n                      dropConeBand(\n                        lp.payload\n                      ) as ChartLegendContentProps['payload']\n                    }\n                  />\n                )}\n              />\n            )}\n            {/* The cone renders first so the lines draw on top. One color for the\n                whole metric — actual and forecast differ by line style, not hue —\n                so the cone + forecast line reuse the actual series' color. */}\n            <Area\n              dataKey={BAND_KEY}\n              type=\"monotone\"\n              stroke=\"none\"\n              fill={`var(--color-${actualKey})`}\n              fillOpacity={0.15}\n              connectNulls={false}\n              dot={false}\n              activeDot={false}\n              isAnimationActive={false}\n              legendType=\"none\"\n              tooltipType=\"none\"\n            />\n            <Area\n              dataKey={actualKey}\n              type=\"monotone\"\n              stroke={`var(--color-${actualKey})`}\n              strokeWidth={strokeWidth}\n              fill={`var(--color-${actualKey})`}\n              fillOpacity={0.15}\n              dot={false}\n              activeDot={false}\n              connectNulls\n              isAnimationActive={false}\n            />\n            <Line\n              dataKey={forecastKey}\n              type=\"monotone\"\n              stroke={`var(--color-${actualKey})`}\n              strokeWidth={strokeWidth}\n              strokeDasharray=\"5 5\"\n              dot={false}\n              connectNulls\n              isAnimationActive={false}\n            />\n          </ComposedChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nConfidenceCone.displayName = 'ConfidenceCone';\n\nexport { ConfidenceCone };\n"],"names":["BAND_KEY","dropConeBand","payload","item","createConeTooltip","tooltipContent","props","merged","React","ConfidenceCone","className","config","data","xKey","actualKey","forecastKey","lowerKey","upperKey","xAxisLabel","yAxisLabel","yUnit","strokeWidth","showForecastRegion","showGrid","showTooltip","showLegend","ref","customTooltip","xAxisTitle","yAxisTitle","chartData","row","lower","upper","forecastStart","_a","lastX","_b","jsx","cn","ChartContainer","jsxs","ComposedChart","CartesianGrid","XAxis","YAxis","ReferenceArea","ReferenceLine","ChartTooltip","tp","ChartTooltipContent","ChartLegend","lp","ChartLegendContent","Area","Line"],"mappings":"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"}

package/dist/components/ui/data-table/data-table-column-header.js

@@ -0,0 +1,36 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { ArrowUpIcon as c, ArrowDownIcon as l, ArrowsDownUpIcon as u } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as s } from "../../../lib/utils.js";
+function m({
+  column: r,
+  title: o,
+  className: t,
+  ...a
+}) {
+  if (!r.getCanSort())
+    return /* @__PURE__ */ e("div", { className: s(t), children: o });
+  const i = r.getIsSorted();
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      onClick: () => r.toggleSorting(),
+      "aria-label": `Sort by ${o}`,
+      className: s(
+        // -ms-2 px-2 keeps the label flush at the cell padding while giving the
+        // toggle a comfortable click/hover target.
+        "-ms-2 inline-flex h-8 cursor-pointer select-none items-center gap-2 rounded px-2 text-sm font-semibold transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0",
+        t
+      ),
+      ...a,
+      children: [
+        /* @__PURE__ */ e("span", { children: o }),
+        i === "asc" ? /* @__PURE__ */ e(c, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : i === "desc" ? /* @__PURE__ */ e(l, { className: "text-[var(--ui-table-header-sort-icon-color-active)]" }) : /* @__PURE__ */ e(u, { className: "text-[var(--ui-table-header-sort-icon-color-inactive)]" })
+      ]
+    }
+  );
+}
+export {
+  m as DataTableColumnHeader
+};
+//# sourceMappingURL=data-table-column-header.js.map

package/dist/components/ui/data-table/data-table-column-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-column-header.js","sources":["../../../../src/components/ui/data-table/data-table-column-header.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Column } from '@tanstack/react-table';\nimport {\n  ArrowDownIcon,\n  ArrowsDownUpIcon,\n  ArrowUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableColumnHeaderProps<TData, TValue>\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  column: Column<TData, TValue>;\n  title: string;\n}\n\n// Single-click sortable column header — matches the Table primitive's sortable\n// `TableHead`: one click toggles the sort (ascending → descending → unsorted) via\n// TanStack's `column.toggleSorting()`. The trailing icon shows the state with the\n// same `--ui-table-header-sort-icon-*` tokens — an up arrow (ascending) or down\n// arrow (descending) in the active blue, or the muted up/down arrows when\n// unsorted. (Column hiding lives in the toolbar's `DataTableViewOptions`, not a\n// per-header menu, so sorting is a single click.)\nexport function DataTableColumnHeader<TData, TValue>({\n  column,\n  title,\n  className,\n  ...props\n}: DataTableColumnHeaderProps<TData, TValue>) {\n  if (!column.getCanSort()) {\n    return <div className={cn(className)}>{title}</div>;\n  }\n\n  const sorted = column.getIsSorted();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => column.toggleSorting()}\n      aria-label={`Sort by ${title}`}\n      className={cn(\n        // -ms-2 px-2 keeps the label flush at the cell padding while giving the\n        // toggle a comfortable click/hover target.\n        '-ms-2 inline-flex h-8 cursor-pointer select-none items-center gap-2 rounded px-2 text-sm font-semibold transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-[var(--ui-table-header-sort-icon-size)] [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      <span>{title}</span>\n      {sorted === 'asc' ? (\n        <ArrowUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n      ) : sorted === 'desc' ? (\n        <ArrowDownIcon className=\"text-[var(--ui-table-header-sort-icon-color-active)]\" />\n      ) : (\n        <ArrowsDownUpIcon className=\"text-[var(--ui-table-header-sort-icon-color-inactive)]\" />\n      )}\n    </button>\n  );\n}\n"],"names":["DataTableColumnHeader","column","title","className","props","cn","sorted","jsxs","jsx","ArrowUpIcon","ArrowDownIcon","ArrowsDownUpIcon"],"mappings":";;;AAuBO,SAASA,EAAqC;AAAA,EACnD,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAA8C;AAC5C,MAAI,CAACH,EAAO;AACV,6BAAQ,OAAA,EAAI,WAAWI,EAAGF,CAAS,GAAI,UAAAD,GAAM;AAG/C,QAAMI,IAASL,EAAO,YAAA;AAEtB,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAMN,EAAO,cAAA;AAAA,MACtB,cAAY,WAAWC,CAAK;AAAA,MAC5B,WAAWG;AAAA;AAAA;AAAA,QAGT;AAAA,QACAF;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAAC,UAAM,UAAAN,EAAA,CAAM;AAAA,QACZI,MAAW,QACV,gBAAAE,EAACC,GAAA,EAAY,WAAU,wDAAuD,IAC5EH,MAAW,SACb,gBAAAE,EAACE,KAAc,WAAU,uDAAA,CAAuD,IAEhF,gBAAAF,EAACG,GAAA,EAAiB,WAAU,yDAAA,CAAyD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAI7F;"}

package/dist/components/ui/data-table/data-table-expand-trigger.js

@@ -0,0 +1,39 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as l from "react";
+import { ChevronDownIcon as s } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as o } from "../../../lib/utils.js";
+function c({ row: e, className: t, ...n }, i) {
+  if (!e.getCanExpand()) return null;
+  const r = e.getIsExpanded();
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      ref: i,
+      type: "button",
+      onClick: e.getToggleExpandedHandler(),
+      "aria-label": r ? "Collapse row" : "Expand row",
+      "aria-expanded": r,
+      className: o(
+        "inline-flex size-6 cursor-pointer items-center justify-center rounded text-[var(--ui-table-data-value-color-idle)] transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0",
+        t
+      ),
+      ...n,
+      children: /* @__PURE__ */ a(
+        s,
+        {
+          className: o(
+            "transition-transform",
+            !r && "ltr:-rotate-90 rtl:rotate-90"
+          )
+        }
+      )
+    }
+  );
+}
+const f = l.forwardRef(
+  c
+);
+export {
+  f as DataTableExpandTrigger
+};
+//# sourceMappingURL=data-table-expand-trigger.js.map

package/dist/components/ui/data-table/data-table-expand-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-expand-trigger.js","sources":["../../../../src/components/ui/data-table/data-table-expand-trigger.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { Row } from '@tanstack/react-table';\nimport { ChevronDownIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\ninterface DataTableExpandTriggerProps<TData>\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {\n  /** The row this trigger toggles. */\n  row: Row<TData>;\n}\n\n// A chevron toggle button wired to a row's expansion state, meant to live inside\n// a column's `cell` render function so the expand affordance sits in a real\n// column (like the Vue2 `type=\"expand\"` column) instead of requiring a\n// whole-row click. Reads the row's own `getCanExpand`/`getIsExpanded` and calls\n// `toggleExpanded()` — the underlying expand state model is unchanged. Renders\n// nothing when the row can't expand.\nfunction DataTableExpandTriggerImpl<TData>(\n  { row, className, ...props }: DataTableExpandTriggerProps<TData>,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  if (!row.getCanExpand()) return null;\n\n  const expanded = row.getIsExpanded();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      onClick={row.getToggleExpandedHandler()}\n      aria-label={expanded ? 'Collapse row' : 'Expand row'}\n      aria-expanded={expanded}\n      className={cn(\n        'inline-flex size-6 cursor-pointer items-center justify-center rounded text-[var(--ui-table-data-value-color-idle)] transition-colors hover:bg-[var(--ui-table-header-cell-color-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-primary)] [&_svg]:size-4 [&_svg]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n        className={cn(\n          'transition-transform',\n          !expanded && 'ltr:-rotate-90 rtl:rotate-90'\n        )}\n      />\n    </button>\n  );\n}\n\n// `forwardRef` erases the generic; re-cast so callers keep `DataTableExpandTrigger<TData>`.\nexport const DataTableExpandTrigger = React.forwardRef(\n  DataTableExpandTriggerImpl\n) as <TData>(\n  props: DataTableExpandTriggerProps<TData> & {\n    ref?: React.Ref<HTMLButtonElement>;\n  }\n) => React.ReactElement | null;\n"],"names":["DataTableExpandTriggerImpl","row","className","props","ref","expanded","jsx","cn","ChevronDownIcon","DataTableExpandTrigger","React"],"mappings":";;;;AAkBA,SAASA,EACP,EAAE,KAAAC,GAAK,WAAAC,GAAW,GAAGC,EAAA,GACrBC,GACA;AACA,MAAI,CAACH,EAAI,aAAA,EAAgB,QAAO;AAEhC,QAAMI,IAAWJ,EAAI,cAAA;AAErB,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,MAAK;AAAA,MACL,SAASH,EAAI,yBAAA;AAAA,MACb,cAAYI,IAAW,iBAAiB;AAAA,MACxC,iBAAeA;AAAA,MACf,WAAWE;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACA,CAACF,KAAY;AAAA,UAAA;AAAA,QACf;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAGO,MAAMI,IAAyBC,EAAM;AAAA,EAC1CV;AACF;"}

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

@@ -0,0 +1,89 @@
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import { ChevronFirstIcon as o, ChevronLeftIcon as l, ChevronRightIcon as s, ChevronLastIcon as c } from "@acronis-platform/icons-react/stroke-mono";
+import { InputSelect as d, InputSelectTrigger as g, InputSelectValue as m, InputSelectContent as p, InputSelectItem as h } from "../input-select/input-select.js";
+import { ButtonIcon as i } from "../button-icon/button-icon.js";
+function C({
+  table: e,
+  pageSizeOptions: r = [10, 20, 30, 40, 50]
+}) {
+  return /* @__PURE__ */ a("div", { className: "flex items-center justify-between px-2", children: [
+    /* @__PURE__ */ a("div", { className: "flex-1 text-sm text-muted-foreground", children: [
+      e.getFilteredSelectedRowModel().rows.length,
+      " of",
+      " ",
+      e.getFilteredRowModel().rows.length,
+      " row(s) selected."
+    ] }),
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-6 lg:gap-8", children: [
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ n("p", { className: "text-sm font-medium", children: "Rows per page" }),
+        /* @__PURE__ */ a(
+          d,
+          {
+            value: `${e.getState().pagination.pageSize}`,
+            onValueChange: (t) => e.setPageSize(Number(t)),
+            children: [
+              /* @__PURE__ */ n(g, { "aria-label": "Rows per page", className: "h-8 w-[70px]", children: /* @__PURE__ */ n(m, {}) }),
+              /* @__PURE__ */ n(p, { children: r.map((t) => /* @__PURE__ */ n(h, { value: `${t}`, children: t }, t)) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a("div", { className: "flex w-[100px] items-center justify-center text-sm font-medium", children: [
+        "Page ",
+        e.getState().pagination.pageIndex + 1,
+        " of",
+        " ",
+        e.getPageCount()
+      ] }),
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ n(
+          i,
+          {
+            variant: "secondary",
+            "aria-label": "Go to first page",
+            className: "hidden lg:inline-flex",
+            onClick: () => e.setPageIndex(0),
+            disabled: !e.getCanPreviousPage(),
+            children: /* @__PURE__ */ n(o, {})
+          }
+        ),
+        /* @__PURE__ */ n(
+          i,
+          {
+            variant: "secondary",
+            "aria-label": "Go to previous page",
+            onClick: () => e.previousPage(),
+            disabled: !e.getCanPreviousPage(),
+            children: /* @__PURE__ */ n(l, {})
+          }
+        ),
+        /* @__PURE__ */ n(
+          i,
+          {
+            variant: "secondary",
+            "aria-label": "Go to next page",
+            onClick: () => e.nextPage(),
+            disabled: !e.getCanNextPage(),
+            children: /* @__PURE__ */ n(s, {})
+          }
+        ),
+        /* @__PURE__ */ n(
+          i,
+          {
+            variant: "secondary",
+            "aria-label": "Go to last page",
+            className: "hidden lg:inline-flex",
+            onClick: () => e.setPageIndex(e.getPageCount() - 1),
+            disabled: !e.getCanNextPage(),
+            children: /* @__PURE__ */ n(c, {})
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  C as DataTablePagination
+};
+//# sourceMappingURL=data-table-pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination.js","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\nimport {\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { ButtonIcon } from '../button-icon';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '../select';\n\ninterface DataTablePaginationProps<TData> {\n  table: Table<TData>;\n  /** Page-size options offered in the rows-per-page select. */\n  pageSizeOptions?: number[];\n}\n\nexport function DataTablePagination<TData>({\n  table,\n  pageSizeOptions = [10, 20, 30, 40, 50],\n}: DataTablePaginationProps<TData>) {\n  return (\n    <div className=\"flex items-center justify-between px-2\">\n      <div className=\"flex-1 text-sm text-muted-foreground\">\n        {table.getFilteredSelectedRowModel().rows.length} of{' '}\n        {table.getFilteredRowModel().rows.length} row(s) selected.\n      </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={`${table.getState().pagination.pageSize}`}\n            onValueChange={(value) => table.setPageSize(Number(value))}\n          >\n            <SelectTrigger aria-label=\"Rows per page\" className=\"h-8 w-[70px]\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {pageSizeOptions.map((pageSize) => (\n                <SelectItem key={pageSize} value={`${pageSize}`}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"flex w-[100px] items-center justify-center text-sm font-medium\">\n          Page {table.getState().pagination.pageIndex + 1} of{' '}\n          {table.getPageCount()}\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={() => table.setPageIndex(0)}\n            disabled={!table.getCanPreviousPage()}\n          >\n            <ChevronFirstIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to previous page\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n          >\n            <ChevronLeftIcon />\n          </ButtonIcon>\n          <ButtonIcon\n            variant=\"secondary\"\n            aria-label=\"Go to next page\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\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={() => table.setPageIndex(table.getPageCount() - 1)}\n            disabled={!table.getCanNextPage()}\n          >\n            <ChevronLastIcon />\n          </ButtonIcon>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTablePagination","table","pageSizeOptions","jsxs","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","pageSize","SelectItem","ButtonIcon","ChevronFirstIcon","ChevronLeftIcon","ChevronRightIcon","ChevronLastIcon"],"mappings":";;;;AAuBO,SAASA,EAA2B;AAAA,EACzC,OAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE;AACvC,GAAoC;AAClC,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,wCACZ,UAAA;AAAA,MAAAF,EAAM,8BAA8B,KAAK;AAAA,MAAO;AAAA,MAAI;AAAA,MACpDA,EAAM,sBAAsB,KAAK;AAAA,MAAO;AAAA,IAAA,GAC3C;AAAA,IACA,gBAAAE,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAC,EAAC,KAAA,EAAE,WAAU,uBAAsB,UAAA,iBAAa;AAAA,QAChD,gBAAAD;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,OAAO,GAAGJ,EAAM,SAAA,EAAW,WAAW,QAAQ;AAAA,YAC9C,eAAe,CAACK,MAAUL,EAAM,YAAY,OAAOK,CAAK,CAAC;AAAA,YAEzD,UAAA;AAAA,cAAA,gBAAAF,EAACG,KAAc,cAAW,iBAAgB,WAAU,gBAClD,UAAA,gBAAAH,EAACI,KAAY,EAAA,CACf;AAAA,cACA,gBAAAJ,EAACK,GAAA,EACE,UAAAP,EAAgB,IAAI,CAACQ,MACpB,gBAAAN,EAACO,GAAA,EAA0B,OAAO,GAAGD,CAAQ,IAC1C,UAAAA,EAAA,GADcA,CAEjB,CACD,EAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MACA,gBAAAP,EAAC,OAAA,EAAI,WAAU,kEAAiE,UAAA;AAAA,QAAA;AAAA,QACxEF,EAAM,SAAA,EAAW,WAAW,YAAY;AAAA,QAAE;AAAA,QAAI;AAAA,QACnDA,EAAM,aAAA;AAAA,MAAa,GACtB;AAAA,MACA,gBAAAE,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS,MAAMX,EAAM,aAAa,CAAC;AAAA,YACnC,UAAU,CAACA,EAAM,mBAAA;AAAA,YAEjB,4BAACY,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAT;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,SAAS,MAAMX,EAAM,aAAA;AAAA,YACrB,UAAU,CAACA,EAAM,mBAAA;AAAA,YAEjB,4BAACa,GAAA,CAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnB,gBAAAV;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,SAAS,MAAMX,EAAM,SAAA;AAAA,YACrB,UAAU,CAACA,EAAM,eAAA;AAAA,YAEjB,4BAACc,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpB,gBAAAX;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,cAAW;AAAA,YACX,WAAU;AAAA,YACV,SAAS,MAAMX,EAAM,aAAaA,EAAM,aAAA,IAAiB,CAAC;AAAA,YAC1D,UAAU,CAACA,EAAM,eAAA;AAAA,YAEjB,4BAACe,GAAA,CAAA,CAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,MACnB,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/ui/data-table/data-table-toolbar.js

@@ -0,0 +1,81 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import { TimesIcon as C } from "@acronis-platform/icons-react/stroke-mono";
+import { DataTableViewOptions as v } from "./data-table-view-options.js";
+import { FilterSearch as S, FilterSearchFilters as T, FilterSearchActions as x, FilterSearchAppliedFilters as V } from "../filter-search/filter-search.js";
+import { InputSearch as j } from "../input-search/input-search.js";
+import { Button as N } from "../button/button.js";
+function O(t, l) {
+  return Object.fromEntries(
+    t.filter((e) => e.id !== l).map((e) => [e.id, e.value])
+  );
+}
+function R(t) {
+  return Object.entries(t).map(([l, e]) => ({ id: l, value: e }));
+}
+function k({
+  table: t,
+  leading: l,
+  searchKey: e,
+  searchPlaceholder: c = "Filter…",
+  children: m,
+  filtersLabel: p = "Filters",
+  getFilterChipLabel: d
+}) {
+  var f;
+  const o = t.getState().columnFilters, n = !!m, g = o.length > 0, u = O(o, e), F = (a) => {
+    const i = e ? o.filter((h) => h.id === e) : [];
+    t.setColumnFilters([...i, ...R(a)]);
+  };
+  return /* @__PURE__ */ s("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ s(S, { children: [
+      l,
+      e && /* @__PURE__ */ r(
+        j,
+        {
+          placeholder: c,
+          "aria-label": c,
+          value: ((f = t.getColumn(e)) == null ? void 0 : f.getFilterValue()) ?? "",
+          onChange: (a) => {
+            var i;
+            return (i = t.getColumn(e)) == null ? void 0 : i.setFilterValue(a.target.value);
+          },
+          className: "w-56"
+        }
+      ),
+      n && /* @__PURE__ */ r(
+        T,
+        {
+          value: u,
+          onValueChange: F,
+          label: p,
+          children: m
+        }
+      ),
+      !n && g && /* @__PURE__ */ s(
+        N,
+        {
+          variant: "ghost",
+          onClick: () => t.resetColumnFilters(),
+          className: "h-8 gap-2",
+          children: [
+            "Reset",
+            /* @__PURE__ */ r(C, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(v, { table: t }) })
+    ] }),
+    n && /* @__PURE__ */ r(
+      V,
+      {
+        filters: u,
+        onValueChange: F,
+        getFilterChipLabel: d
+      }
+    )
+  ] });
+}
+export {
+  k as DataTableToolbar
+};
+//# sourceMappingURL=data-table-toolbar.js.map

package/dist/components/ui/data-table/data-table-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-toolbar.js","sources":["../../../../src/components/ui/data-table/data-table-toolbar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ColumnFiltersState, Table } from '@tanstack/react-table';\nimport { TimesIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { Button } from '../button';\nimport {\n  FilterSearch,\n  FilterSearchActions,\n  FilterSearchAppliedFilters,\n  FilterSearchFilters,\n} from '../filter-search';\nimport { InputSearch } from '../input-search';\nimport { DataTableViewOptions } from './data-table-view-options';\n\n// Convert between TanStack's `ColumnFiltersState` (an array of `{ id, value }`,\n// keyed by column id) and `FilterSearchFilters`'s `Record<string, unknown>`\n// (keyed by the same column id). The plain text search filter (`searchKey`) is a\n// separate concern and is excluded from the per-column filter record.\nfunction filtersToRecord(\n  columnFilters: ColumnFiltersState,\n  excludeKey?: string\n): Record<string, unknown> {\n  return Object.fromEntries(\n    columnFilters\n      .filter((filter) => filter.id !== excludeKey)\n      .map((filter) => [filter.id, filter.value])\n  );\n}\n\nfunction recordToFilters(\n  record: Record<string, unknown>\n): ColumnFiltersState {\n  return Object.entries(record).map(([id, value]) => ({ id, value }));\n}\n\ninterface DataTableToolbarProps<TData> {\n  table: Table<TData>;\n  /**\n   * Rendered as the leading element of the toolbar row, before the search\n   * box — e.g. a tenant/scope `Select` (matches the Figma \"FilterSearch\"\n   * anatomy, which places a scope switcher ahead of search).\n   */\n  leading?: ReactNode;\n  /** Column id to wire the search box to (client-side text filter). */\n  searchKey?: string;\n  searchPlaceholder?: string;\n  /**\n   * Filter field children rendered inside the `FilterSearchFilters` popover.\n   * Wire each field to a column via `useFilterSearchFilters()` keyed by column\n   * id. When provided, the toolbar renders the filter popover + an applied-filter\n   * chip row below it.\n   */\n  children?: ReactNode;\n  /** Label for the filters trigger button. */\n  filtersLabel?: ReactNode;\n  /** Format an applied-filter chip's label (defaults to `\"<id>: <value>\"`). */\n  getFilterChipLabel?: (key: string, value: unknown) => ReactNode;\n}\n\nexport function DataTableToolbar<TData>({\n  table,\n  leading,\n  searchKey,\n  searchPlaceholder = 'Filter…',\n  children,\n  filtersLabel = 'Filters',\n  getFilterChipLabel,\n}: DataTableToolbarProps<TData>) {\n  const columnFilters = table.getState().columnFilters;\n  const hasFilterFields = Boolean(children);\n  const isFiltered = columnFilters.length > 0;\n\n  const filterRecord = filtersToRecord(columnFilters, searchKey);\n\n  // Commit the per-column filter record back to TanStack, preserving the\n  // separate text-search filter (`searchKey`) untouched.\n  const handleFiltersChange = (next: Record<string, unknown>) => {\n    const searchFilter = searchKey\n      ? columnFilters.filter((filter) => filter.id === searchKey)\n      : [];\n    table.setColumnFilters([...searchFilter, ...recordToFilters(next)]);\n  };\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <FilterSearch>\n        {leading}\n        {searchKey && (\n          <InputSearch\n            placeholder={searchPlaceholder}\n            aria-label={searchPlaceholder}\n            value={\n              (table.getColumn(searchKey)?.getFilterValue() as string) ?? ''\n            }\n            onChange={(event) =>\n              table.getColumn(searchKey)?.setFilterValue(event.target.value)\n            }\n            className=\"w-56\"\n          />\n        )}\n        {hasFilterFields && (\n          <FilterSearchFilters\n            value={filterRecord}\n            onValueChange={handleFiltersChange}\n            label={filtersLabel}\n          >\n            {children}\n          </FilterSearchFilters>\n        )}\n        {!hasFilterFields && isFiltered && (\n          <Button\n            variant=\"ghost\"\n            onClick={() => table.resetColumnFilters()}\n            className=\"h-8 gap-2\"\n          >\n            Reset\n            <TimesIcon />\n          </Button>\n        )}\n        <FilterSearchActions>\n          <DataTableViewOptions table={table} />\n        </FilterSearchActions>\n      </FilterSearch>\n      {hasFilterFields && (\n        <FilterSearchAppliedFilters\n          filters={filterRecord}\n          onValueChange={handleFiltersChange}\n          getFilterChipLabel={getFilterChipLabel}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["filtersToRecord","columnFilters","excludeKey","filter","recordToFilters","record","id","value","DataTableToolbar","table","leading","searchKey","searchPlaceholder","children","filtersLabel","getFilterChipLabel","hasFilterFields","isFiltered","filterRecord","handleFiltersChange","next","searchFilter","jsxs","FilterSearch","jsx","InputSearch","_a","event","FilterSearchFilters","Button","TimesIcon","FilterSearchActions","DataTableViewOptions","FilterSearchAppliedFilters"],"mappings":";;;;;;AAkBA,SAASA,EACPC,GACAC,GACyB;AACzB,SAAO,OAAO;AAAA,IACZD,EACG,OAAO,CAACE,MAAWA,EAAO,OAAOD,CAAU,EAC3C,IAAI,CAACC,MAAW,CAACA,EAAO,IAAIA,EAAO,KAAK,CAAC;AAAA,EAAA;AAEhD;AAEA,SAASC,EACPC,GACoB;AACpB,SAAO,OAAO,QAAQA,CAAM,EAAE,IAAI,CAAC,CAACC,GAAIC,CAAK,OAAO,EAAE,IAAAD,GAAI,OAAAC,IAAQ;AACpE;AA0BO,SAASC,EAAwB;AAAA,EACtC,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,oBAAAC;AACF,GAAiC;;AAC/B,QAAMd,IAAgBQ,EAAM,SAAA,EAAW,eACjCO,IAAkB,EAAQH,GAC1BI,IAAahB,EAAc,SAAS,GAEpCiB,IAAelB,EAAgBC,GAAeU,CAAS,GAIvDQ,IAAsB,CAACC,MAAkC;AAC7D,UAAMC,IAAeV,IACjBV,EAAc,OAAO,CAACE,MAAWA,EAAO,OAAOQ,CAAS,IACxD,CAAA;AACJ,IAAAF,EAAM,iBAAiB,CAAC,GAAGY,GAAc,GAAGjB,EAAgBgB,CAAI,CAAC,CAAC;AAAA,EACpE;AAEA,SACE,gBAAAE,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAA,gBAAAA,EAACC,GAAA,EACE,UAAA;AAAA,MAAAb;AAAA,MACAC,KACC,gBAAAa;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,aAAab;AAAA,UACb,cAAYA;AAAA,UACZ,SACGc,IAAAjB,EAAM,UAAUE,CAAS,MAAzB,gBAAAe,EAA4B,qBAA+B;AAAA,UAE9D,UAAU,CAACC,MAAA;;AACT,oBAAAD,IAAAjB,EAAM,UAAUE,CAAS,MAAzB,gBAAAe,EAA4B,eAAeC,EAAM,OAAO;AAAA;AAAA,UAE1D,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAGbX,KACC,gBAAAQ;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,OAAOV;AAAA,UACP,eAAeC;AAAA,UACf,OAAOL;AAAA,UAEN,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJ,CAACG,KAAmBC,KACnB,gBAAAK;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAMpB,EAAM,mBAAA;AAAA,UACrB,WAAU;AAAA,UACX,UAAA;AAAA,YAAA;AAAA,8BAEEqB,GAAA,CAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGf,gBAAAN,EAACO,GAAA,EACC,UAAA,gBAAAP,EAACQ,GAAA,EAAqB,OAAAvB,GAAc,EAAA,CACtC;AAAA,IAAA,GACF;AAAA,IACCO,KACC,gBAAAQ;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,SAASf;AAAA,QACT,eAAeC;AAAA,QACf,oBAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;"}

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

@@ -0,0 +1,27 @@
+import { jsx as s } from "react/jsx-runtime";
+import { TableViewOptions as n } from "../table/table-view-options.js";
+function r({
+  table: t
+}) {
+  const o = t.getAllColumns().filter(
+    (e) => typeof e.accessorFn < "u" && e.getCanHide()
+  ).map((e) => ({
+    id: e.id,
+    label: e.id,
+    hidden: !e.getIsVisible()
+  }));
+  return /* @__PURE__ */ s(
+    n,
+    {
+      columns: o,
+      onToggle: (e) => {
+        const i = t.getColumn(e);
+        i == null || i.toggleVisibility(!i.getIsVisible());
+      }
+    }
+  );
+}
+export {
+  r as DataTableViewOptions
+};
+//# sourceMappingURL=data-table-view-options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-view-options.js","sources":["../../../../src/components/ui/data-table/data-table-view-options.tsx"],"sourcesContent":["import type { Table } from '@tanstack/react-table';\n\nimport { TableViewOptions } from '../table';\n\ninterface DataTableViewOptionsProps<TData> {\n  table: Table<TData>;\n}\n\n// Thin TanStack adapter over the primitive-only `TableViewOptions`: maps\n// `table.getAllColumns()` onto the plain `{ id, label, hidden }[]` shape and\n// routes `onToggle` back through `column.toggleVisibility()`.\nexport function DataTableViewOptions<TData>({\n  table,\n}: DataTableViewOptionsProps<TData>) {\n  const columns = table\n    .getAllColumns()\n    .filter(\n      (column) =>\n        typeof column.accessorFn !== 'undefined' && column.getCanHide()\n    )\n    .map((column) => ({\n      id: column.id,\n      label: column.id,\n      hidden: !column.getIsVisible(),\n    }));\n\n  return (\n    <TableViewOptions\n      columns={columns}\n      onToggle={(id) => {\n        const column = table.getColumn(id);\n        column?.toggleVisibility(!column.getIsVisible());\n      }}\n    />\n  );\n}\n"],"names":["DataTableViewOptions","table","columns","column","jsx","TableViewOptions","id"],"mappings":";;AAWO,SAASA,EAA4B;AAAA,EAC1C,OAAAC;AACF,GAAqC;AACnC,QAAMC,IAAUD,EACb,cAAA,EACA;AAAA,IACC,CAACE,MACC,OAAOA,EAAO,aAAe,OAAeA,EAAO,WAAA;AAAA,EAAW,EAEjE,IAAI,CAACA,OAAY;AAAA,IAChB,IAAIA,EAAO;AAAA,IACX,OAAOA,EAAO;AAAA,IACd,QAAQ,CAACA,EAAO,aAAA;AAAA,EAAa,EAC7B;AAEJ,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAH;AAAA,MACA,UAAU,CAACI,MAAO;AAChB,cAAMH,IAASF,EAAM,UAAUK,CAAE;AACjC,QAAAH,KAAA,QAAAA,EAAQ,iBAAiB,CAACA,EAAO,aAAA;AAAA,MACnC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,280 @@
+import { jsx as n, jsxs as y } from "react/jsx-runtime";
+import { useState as m, useEffect as ve, Fragment as K } from "react";
+import { useReactTable as Se, flexRender as k } from "../../../node_modules/.pnpm/@tanstack_react-table@8.21.3_react-dom@19.2.6_react@19.2.6__react@19.2.6/node_modules/@tanstack/react-table/build/lib/index.js";
+import { cn as h } from "../../../lib/utils.js";
+import { useIntersectionObserver as ye } from "../../../hooks/use-intersection-observer.js";
+import { Table as we, TableHeader as Re, TableRow as u, TableHead as xe, TableBody as ze, TableCell as g } from "../table/table.js";
+import { getFilteredRowModel as Ne, getSortedRowModel as Ce, getPaginationRowModel as De, getExpandedRowModel as Ie, getCoreRowModel as Me } from "../../../node_modules/.pnpm/@tanstack_table-core@8.21.3/node_modules/@tanstack/table-core/build/lib/index.js";
+function U(o) {
+  const l = o.getIsPinned();
+  if (l)
+    return {
+      position: "sticky",
+      left: l === "left" ? o.getStart("left") : void 0,
+      right: l === "right" ? o.getAfter("right") : void 0,
+      zIndex: 1,
+      // Derived from the same border token every other table divider uses (not a
+      // hardcoded color), so the separator theme-adapts automatically.
+      boxShadow: l === "left" ? "4px 0 4px -4px var(--ui-table-global-row-border-color)" : "-4px 0 4px -4px var(--ui-table-global-row-border-color)"
+    };
+}
+function B(o, l) {
+  if (l || o.columnDef.size !== void 0)
+    return o.getSize();
+}
+function Ee(o, l) {
+  const i = U(o.column), s = B(o.column, l);
+  if (!(!i && s === void 0))
+    return { ...i, width: s };
+}
+function _e(o, l) {
+  const i = U(o.column), s = B(o.column, l);
+  if (!(!i && s === void 0))
+    return { ...i, width: s };
+}
+const L = 20, H = Number.MAX_SAFE_INTEGER;
+function Fe(o, l, { shiftKey: i, min: s, max: b }) {
+  const p = i ? 50 : 10;
+  if (o === "ArrowLeft")
+    return Math.min(b, Math.max(s, l - p));
+  if (o === "ArrowRight")
+    return Math.max(s, Math.min(b, l + p));
+}
+function He({
+  columns: o = [],
+  data: l = [],
+  table: i,
+  getRowCanExpand: s,
+  renderExpandedRow: b,
+  striped: p = !1,
+  bordered: O = !1,
+  highlightCurrentRow: w = !1,
+  skeleton: R = !1,
+  skeletonRows: j = 5,
+  enableColumnResizing: I = !1,
+  onColumnSizingChange: x,
+  columnVisibility: X,
+  onColumnVisibilityChange: z,
+  manualSorting: M = !1,
+  sorting: E,
+  onSortingChange: N,
+  renderRow: _,
+  renderEmptyState: F,
+  paginationMode: A = "page",
+  onLoadMore: C,
+  loadMoreRootMargin: Z,
+  hasNextPage: T = !1,
+  isLoadingMore: P = !1
+}) {
+  const [G, W] = m([]), $ = E ?? G, [q, J] = m([]), [Q, Y] = m({}), ee = X ?? Q, [te, ne] = m({}), [oe, le] = m({}), [ie, re] = m({}), [ae, se] = m(), ce = (e) => {
+    re(e), x == null || x(e);
+  }, de = (e) => {
+    Y(e), z == null || z(e);
+  }, ue = (e) => {
+    E === void 0 && W(e), N == null || N(e);
+  }, me = Se({
+    data: l,
+    columns: o,
+    enableColumnResizing: I,
+    columnResizeMode: "onChange",
+    getCoreRowModel: Me(),
+    getExpandedRowModel: Ie(),
+    ...A === "page" ? { getPaginationRowModel: De() } : {},
+    getRowCanExpand: s,
+    onExpandedChange: le,
+    manualSorting: M,
+    onSortingChange: ue,
+    ...M ? {} : { getSortedRowModel: Ce() },
+    onColumnFiltersChange: J,
+    getFilteredRowModel: Ne(),
+    onColumnVisibilityChange: de,
+    onRowSelectionChange: ne,
+    onColumnSizingChange: ce,
+    state: {
+      sorting: $,
+      columnFilters: q,
+      columnVisibility: ee,
+      rowSelection: te,
+      expanded: oe,
+      columnSizing: ie
+    }
+  }), r = i ?? me, D = !i && A === "infinite", v = I && !i, ge = ye({
+    onIntersect: () => C == null ? void 0 : C(),
+    disabled: !D || !T || P,
+    rootMargin: Z
+  }), fe = (e, t) => {
+    if (e.ctrlKey || e.altKey || e.metaKey) return;
+    const a = Fe(e.key, t.column.getSize(), {
+      shiftKey: e.shiftKey,
+      min: t.column.columnDef.minSize ?? L,
+      max: t.column.columnDef.maxSize ?? H
+    });
+    a !== void 0 && (e.preventDefault(), r.setColumnSizing((c) => ({ ...c, [t.column.id]: a })));
+  };
+  ve(() => {
+    i || r.getAllLeafColumns().forEach((e) => {
+      var t;
+      e.pin(((t = e.columnDef.meta) == null ? void 0 : t.pin) ?? !1);
+    });
+  }, [r, o, i]);
+  const f = r.getRowModel().rows, be = O ? "[&_th:not(:last-child)]:border-e [&_td:not(:last-child)]:border-e [&_th]:border-[var(--ui-table-global-row-border-color)] [&_td]:border-[var(--ui-table-global-row-border-color)]" : void 0, pe = "bg-background";
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: h(
+        "rounded-md border border-[var(--ui-table-global-row-border-color)]",
+        be
+      ),
+      children: /* @__PURE__ */ y(
+        we,
+        {
+          style: v ? { width: r.getCenterTotalSize() } : void 0,
+          children: [
+            /* @__PURE__ */ n(Re, { children: r.getHeaderGroups().map((e) => /* @__PURE__ */ n(u, { children: e.headers.map((t) => {
+              var S;
+              const a = t.column.getIsPinned(), c = v && t.column.getCanResize();
+              return /* @__PURE__ */ y(
+                xe,
+                {
+                  wrap: (S = t.column.columnDef.meta) == null ? void 0 : S.wrap,
+                  style: Ee(t, v),
+                  className: h(
+                    c && "relative",
+                    a && pe
+                  ),
+                  children: [
+                    t.isPlaceholder ? null : k(
+                      t.column.columnDef.header,
+                      t.getContext()
+                    ),
+                    c && /* @__PURE__ */ n(
+                      "div",
+                      {
+                        role: "separator",
+                        "aria-orientation": "vertical",
+                        "aria-label": "Resize column",
+                        "aria-valuenow": t.column.getSize(),
+                        "aria-valuemin": t.column.columnDef.minSize ?? L,
+                        "aria-valuemax": t.column.columnDef.maxSize ?? H,
+                        tabIndex: 0,
+                        onMouseDown: t.getResizeHandler(),
+                        onTouchStart: t.getResizeHandler(),
+                        onKeyDown: (d) => fe(d, t),
+                        className: h(
+                          "absolute end-0 top-0 h-full w-1 cursor-(--ui-resizable-cursor) touch-none select-none bg-[var(--ui-table-global-row-border-color)] opacity-0 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-(--ui-focus-primary)",
+                          t.column.getIsResizing() && "opacity-100"
+                        )
+                      }
+                    )
+                  ]
+                },
+                t.id
+              );
+            }) }, e.id)) }),
+            /* @__PURE__ */ y(ze, { children: [
+              R ? Array.from({ length: j }).map((e, t) => /* @__PURE__ */ n(
+                u,
+                {
+                  className: "hover:bg-transparent",
+                  children: r.getVisibleLeafColumns().map((a) => /* @__PURE__ */ n(g, { children: /* @__PURE__ */ n("div", { className: "h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]" }) }, a.id))
+                },
+                `skeleton-${t}`
+              )) : f != null && f.length ? f.map((e, t) => {
+                if (_)
+                  return /* @__PURE__ */ n(K, { children: _(e, t) }, e.id);
+                const a = e.getIsSelected(), c = w && ae === e.id, S = a || c ? "bg-[var(--ui-table-data-row-color-active)]" : p && t % 2 === 1 ? "bg-[var(--ui-background-surface-secondary)]" : "bg-background";
+                return /* @__PURE__ */ y(K, { children: [
+                  /* @__PURE__ */ n(
+                    u,
+                    {
+                      selected: a,
+                      onClick: w ? () => se(e.id) : void 0,
+                      className: h(
+                        w && "cursor-pointer",
+                        p && t % 2 === 1 && !a && !c && "bg-[var(--ui-background-surface-secondary)]",
+                        c && !a && "bg-[var(--ui-table-data-row-color-active)]"
+                      ),
+                      children: e.getVisibleCells().map((d) => {
+                        var V;
+                        const he = d.column.getIsPinned();
+                        return /* @__PURE__ */ n(
+                          g,
+                          {
+                            wrap: (V = d.column.columnDef.meta) == null ? void 0 : V.wrap,
+                            style: _e(d, v),
+                            className: h(he && S),
+                            children: k(
+                              d.column.columnDef.cell,
+                              d.getContext()
+                            )
+                          },
+                          d.id
+                        );
+                      })
+                    }
+                  ),
+                  b && e.getIsExpanded() && /* @__PURE__ */ n(u, { className: "hover:bg-transparent", children: /* @__PURE__ */ n(
+                    g,
+                    {
+                      className: "h-auto py-3",
+                      colSpan: e.getVisibleCells().length,
+                      children: b(e)
+                    }
+                  ) })
+                ] }, e.id);
+              }) : F ? /* @__PURE__ */ n(u, { children: /* @__PURE__ */ n(
+                g,
+                {
+                  colSpan: r.getVisibleLeafColumns().length,
+                  className: "h-24 text-center",
+                  children: F({
+                    hasFilters: r.getState().columnFilters.length > 0
+                  })
+                }
+              ) }) : /* @__PURE__ */ n(u, { children: /* @__PURE__ */ n(
+                g,
+                {
+                  colSpan: r.getVisibleLeafColumns().length,
+                  className: "h-24 text-center text-[var(--ui-table-data-value-color-disabled)]",
+                  children: "No results."
+                }
+              ) }),
+              D && !R && f.length > 0 && T && /* @__PURE__ */ n(
+                u,
+                {
+                  ref: ge,
+                  "aria-hidden": !0,
+                  className: "hover:bg-transparent",
+                  children: /* @__PURE__ */ n(
+                    g,
+                    {
+                      colSpan: r.getVisibleLeafColumns().length,
+                      className: "h-1 p-0"
+                    }
+                  )
+                }
+              ),
+              D && !R && f.length > 0 && P && /* @__PURE__ */ n(u, { className: "hover:bg-transparent", children: /* @__PURE__ */ n(g, { colSpan: r.getVisibleLeafColumns().length, children: /* @__PURE__ */ n(
+                "div",
+                {
+                  role: "status",
+                  "aria-live": "polite",
+                  className: "h-4 w-full animate-pulse rounded bg-[var(--ui-background-surface-secondary)]",
+                  children: /* @__PURE__ */ n("span", { className: "sr-only", children: "Loading more rows…" })
+                }
+              ) }) })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  He as DataTable,
+  _e as getCellStyle,
+  B as getColumnWidth,
+  U as getPinnedStyle,
+  Fe as getResizeKeyboardStep
+};
+//# sourceMappingURL=data-table.js.map