@apipass/design-system 4.2.1 → 4.3.0

package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.js

@@ -1,88 +1,104 @@
-const s = { top: 16, right: 16, bottom: 24, left: 56 }, d = 6, b = 0.15, p = { thin: 1, normal: 2, thick: 4 }, L = "solid", f = "normal";
-function m(o) {
-  const { valueFormatter: l } = o;
-  if (l)
-    return (t) => t === null ? "" : l(t);
+const n = { top: 16, right: 16, bottom: 24, left: 56 }, u = 6, f = 0.15, y = { thin: 1, normal: 2, thick: 4 }, L = "solid", g = "normal", h = new Intl.DateTimeFormat(void 0, { year: "numeric" }), E = new Intl.DateTimeFormat(void 0, {
+  day: "2-digit",
+  month: "2-digit"
+}), b = new Intl.DateTimeFormat(void 0, {
+  hour: "2-digit",
+  minute: "2-digit",
+  hour12: !1
+}), p = new Intl.DateTimeFormat(void 0, {
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+  hour12: !1
+});
+function S(t) {
+  const e = new Date(t);
+  return e.getSeconds() !== 0 || e.getMilliseconds() !== 0 ? p.format(e) : e.getHours() !== 0 || e.getMinutes() !== 0 ? b.format(e) : e.getMonth() === 0 && e.getDate() === 1 ? h.format(e) : E.format(e);
 }
-function h(o) {
-  const { showValueLabels: l, theme: t } = o, i = m(o);
+function c(t) {
+  const { valueFormatter: e } = t;
+  if (e)
+    return (i) => i === null ? "" : e(i);
+}
+function T(t) {
+  const { showValueLabels: e, theme: i } = t, l = c(t);
   return {
-    show: l,
+    show: e,
     position: "top",
-    color: t.labelColor,
-    formatter: i ? (e) => i(e.value[1]) : void 0
+    color: i.labelColor,
+    formatter: l ? (o) => l(o.value[1]) : void 0
   };
 }
-function u(o, l, t) {
-  const i = o.points.map((r) => [
+function _(t, e, i) {
+  const l = t.points.map((r) => [
     r.timestamp,
     r.value
-  ]), e = h(l);
-  return l.displayType === "bar" ? { id: o.id, name: o.name, type: "bar", data: i, itemStyle: { color: t }, label: e } : {
-    id: o.id,
-    name: o.name,
+  ]), o = T(e);
+  return e.displayType === "bar" ? { id: t.id, name: t.name, type: "bar", data: l, itemStyle: { color: i }, label: o } : {
+    id: t.id,
+    name: t.name,
     type: "line",
-    data: i,
-    showSymbol: l.showSymbols,
-    symbolSize: d,
+    data: l,
+    showSymbol: e.showSymbols,
+    symbolSize: u,
     lineStyle: {
-      color: t,
-      type: l.line.style ?? L,
-      width: p[l.line.width ?? f]
+      color: i,
+      type: e.line.style ?? L,
+      width: y[e.line.width ?? g]
     },
-    itemStyle: { color: t },
-    areaStyle: l.displayType === "area" ? { color: t, opacity: b } : void 0,
-    label: e
+    itemStyle: { color: i },
+    areaStyle: e.displayType === "area" ? { color: i, opacity: f } : void 0,
+    label: o
   };
 }
-function x(o) {
-  const { series: l, legend: t, yAxis: i, theme: e, seriesColorOverrides: r } = o, a = t !== "none" && l.length > 0, n = m(o);
+function x(t) {
+  const { series: e, legend: i, yAxis: l, theme: o, seriesColorOverrides: r } = t, s = i !== "none" && e.length > 0, a = c(t);
   return {
     animation: !1,
-    color: e.seriesColors,
-    textStyle: { fontFamily: e.fontFamily, color: e.labelColor },
+    color: o.seriesColors,
+    textStyle: { fontFamily: o.fontFamily, color: o.labelColor },
     grid: {
-      ...s,
-      top: a ? s.top + 32 : s.top,
+      ...n,
+      top: s ? n.top + 32 : n.top,
       containLabel: !1
     },
-    legend: a ? {
+    legend: s ? {
       type: "scroll",
       top: 0,
       left: 0,
       icon: "roundRect",
       itemHeight: 8,
       itemWidth: 12,
-      textStyle: { color: e.labelColor }
+      textStyle: { color: o.labelColor }
     } : { show: !1 },
     tooltip: {
       trigger: "axis",
-      backgroundColor: e.tooltipBackgroundColor,
-      borderColor: e.tooltipBorderColor,
-      textStyle: { color: e.labelColor },
-      valueFormatter: n
+      backgroundColor: o.tooltipBackgroundColor,
+      borderColor: o.tooltipBorderColor,
+      textStyle: { color: o.labelColor },
+      valueFormatter: a
     },
     xAxis: {
       type: "time",
-      axisLine: { lineStyle: { color: e.axisLineColor } },
+      axisLine: { lineStyle: { color: o.axisLineColor } },
       axisTick: { show: !1 },
-      axisLabel: { color: e.labelColor, hideOverlap: !0 },
+      axisLabel: { color: o.labelColor, hideOverlap: !0, formatter: S },
       splitLine: { show: !1 }
     },
     yAxis: {
-      type: i.scale === "log" ? "log" : "value",
-      scale: i.includeZero !== !0,
-      min: i.min,
-      max: i.max,
+      type: l.scale === "log" ? "log" : "value",
+      scale: l.includeZero !== !0,
+      min: l.min,
+      max: l.max,
       axisLine: { show: !1 },
-      axisLabel: { color: e.labelColor, formatter: n },
-      splitLine: { lineStyle: { color: e.splitLineColor } }
+      axisLabel: { color: o.labelColor, formatter: a },
+      splitLine: { lineStyle: { color: o.splitLineColor } }
     },
-    series: l.map(
-      (c, y) => u(
-        c,
-        o,
-        r[c.id] ?? e.seriesColors[y % e.seriesColors.length]
+    series: e.map(
+      (m, d) => _(
+        m,
+        t,
+        r[m.id] ?? o.seriesColors[d % o.seriesColors.length]
       )
     )
   };

package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-series-option.js","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n  timestamp: number;\n  value: number | null;\n}\n\nexport interface TimeSeriesData {\n  id: string;\n  name: string;\n  points: TimeSeriesPoint[];\n  // Nome de token, nunca hex: é o que mantém a cor válida nos dois temas. Sem ele a série\n  // recebe a próxima cor da paleta.\n  colorToken?: string;\n}\n\nexport type TimeSeriesDisplayType = \"line\" | \"bar\" | \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" | \"dashed\" | \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" | \"normal\" | \"thick\";\n\nexport interface TimeSeriesLineOptions {\n  style?: TimeSeriesLineStyle;\n  width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" | \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" | \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n  scale?: TimeSeriesAxisScale;\n  min?: number;\n  max?: number;\n  includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n  series: TimeSeriesData[];\n  displayType: TimeSeriesDisplayType;\n  legend: TimeSeriesLegendMode;\n  line: TimeSeriesLineOptions;\n  yAxis: TimeSeriesYAxisOptions;\n  theme: ChartTheme;\n  showSymbols: boolean;\n  showValueLabels: boolean;\n  seriesColorOverrides: Record<string, string>;\n  valueFormatter?: (value: number) => string;\n}\n\nconst LEGEND_HEIGHT_PX: number = 32;\n\nconst GRID_WITHOUT_LEGEND = { top: 16, right: 16, bottom: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n  input: TimeSeriesOptionInput,\n): ((value: number | null) => string) | undefined {\n  const { valueFormatter } = input;\n  if (!valueFormatter) return undefined;\n  return (value: number | null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { showValueLabels, theme } = input;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n  return {\n    show: showValueLabels,\n    position: \"top\",\n    color: theme.labelColor,\n    formatter: formatValue\n      ? (params: { value: [number, number | null] }) => formatValue(params.value[1])\n      : undefined,\n  };\n}\n\nfunction seriesEntry(\n  data: TimeSeriesData,\n  input: TimeSeriesOptionInput,\n  color: string,\n): Record<string, unknown> {\n  const values: Array<[number, number | null]> = data.points.map((point: TimeSeriesPoint) => [\n    point.timestamp,\n    point.value,\n  ]);\n  const label: Record<string, unknown> = seriesLabel(input);\n\n  if (input.displayType === \"bar\") {\n    return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n  }\n\n  return {\n    id: data.id,\n    name: data.name,\n    type: \"line\",\n    data: values,\n    showSymbol: input.showSymbols,\n    symbolSize: SYMBOL_SIZE_PX,\n    lineStyle: {\n      color,\n      type: input.line.style ?? DEFAULT_LINE_STYLE,\n      width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n    },\n    itemStyle: { color },\n    areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n    label,\n  };\n}\n\n// O retorno é `Record<string, unknown>` de propósito, e não `EChartsOption`: é o que impede\n// um tipo da biblioteca de vazar para o resto do design system.\nexport function buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { series, legend, yAxis, theme, seriesColorOverrides } = input;\n  const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n\n  return {\n    animation: false,\n    color: theme.seriesColors,\n    textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n    grid: {\n      ...GRID_WITHOUT_LEGEND,\n      top: isLegendVisible ? GRID_WITHOUT_LEGEND.top + LEGEND_HEIGHT_PX : GRID_WITHOUT_LEGEND.top,\n      containLabel: false,\n    },\n    legend: isLegendVisible\n      ? {\n          type: \"scroll\",\n          top: 0,\n          left: 0,\n          icon: \"roundRect\",\n          itemHeight: 8,\n          itemWidth: 12,\n          textStyle: { color: theme.labelColor },\n        }\n      : { show: false },\n    tooltip: {\n      trigger: \"axis\",\n      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      valueFormatter: formatValue,\n    },\n    xAxis: {\n      type: \"time\",\n      axisLine: { lineStyle: { color: theme.axisLineColor } },\n      axisTick: { show: false },\n      axisLabel: { color: theme.labelColor, hideOverlap: true },\n      splitLine: { show: false },\n    },\n    yAxis: {\n      type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n      scale: yAxis.includeZero !== true,\n      min: yAxis.min,\n      max: yAxis.max,\n      axisLine: { show: false },\n      axisLabel: { color: theme.labelColor, formatter: formatValue },\n      splitLine: { lineStyle: { color: theme.splitLineColor } },\n    },\n    series: series.map((data: TimeSeriesData, index: number) =>\n      seriesEntry(\n        data,\n        input,\n        seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n      ),\n    ),\n  };\n}\n"],"names":["GRID_WITHOUT_LEGEND","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","legend","yAxis","seriesColorOverrides","isLegendVisible","index"],"mappings":"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"}
+{"version":3,"file":"time-series-option.js","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n  timestamp: number;\n  value: number | null;\n}\n\nexport interface TimeSeriesData {\n  id: string;\n  name: string;\n  points: TimeSeriesPoint[];\n  // Nome de token, nunca hex: é o que mantém a cor válida nos dois temas. Sem ele a série\n  // recebe a próxima cor da paleta.\n  colorToken?: string;\n}\n\nexport type TimeSeriesDisplayType = \"line\" | \"bar\" | \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" | \"dashed\" | \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" | \"normal\" | \"thick\";\n\nexport interface TimeSeriesLineOptions {\n  style?: TimeSeriesLineStyle;\n  width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" | \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" | \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n  scale?: TimeSeriesAxisScale;\n  min?: number;\n  max?: number;\n  includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n  series: TimeSeriesData[];\n  displayType: TimeSeriesDisplayType;\n  legend: TimeSeriesLegendMode;\n  line: TimeSeriesLineOptions;\n  yAxis: TimeSeriesYAxisOptions;\n  theme: ChartTheme;\n  showSymbols: boolean;\n  showValueLabels: boolean;\n  seriesColorOverrides: Record<string, string>;\n  valueFormatter?: (value: number) => string;\n}\n\nconst LEGEND_HEIGHT_PX: number = 32;\n\nconst GRID_WITHOUT_LEGEND = { top: 16, right: 16, bottom: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O eixo de tempo do ECharts rotula a marca de dia so com o numero do dia -- \"2\", \"3\", \"4\" --, que\n// sozinho nao diz nem o mes. Aqui a marca de dia vira data e a marca dentro do dia vira hora, que e\n// o que se espera de uma serie temporal.\n//\n// A precisao sai do proprio instante, e nao de um nivel pedido ao ECharts: ele alinha as marcas ao\n// nivel que cabe no eixo, entao meia-noite e marca de dia, minuto cheio e marca de hora, e assim por\n// diante. Ler o instante e o que permite usar `Intl` e escrever a data na convencao de quem le -- o\n// objeto de niveis do ECharts so aceita template, e um `{dd}/{MM}` fixo seria lido como mes/dia por\n// metade dos usuarios.\nconst YEAR_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, { year: \"numeric\" });\n\nconst DAY_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  day: \"2-digit\",\n  month: \"2-digit\",\n});\n\nconst MINUTE_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  hour12: false,\n});\n\nconst SECOND_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  second: \"2-digit\",\n  hour12: false,\n});\n\nfunction timeAxisLabel(timestamp: number): string {\n  const instant: Date = new Date(timestamp);\n  if (instant.getSeconds() !== 0 || instant.getMilliseconds() !== 0) return SECOND_LABEL.format(instant);\n  if (instant.getHours() !== 0 || instant.getMinutes() !== 0) return MINUTE_LABEL.format(instant);\n  // Primeiro de janeiro e a marca de ano do ECharts, e ali a data sem o ano nao situa ninguem.\n  if (instant.getMonth() === 0 && instant.getDate() === 1) return YEAR_LABEL.format(instant);\n  return DAY_LABEL.format(instant);\n}\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n  input: TimeSeriesOptionInput,\n): ((value: number | null) => string) | undefined {\n  const { valueFormatter } = input;\n  if (!valueFormatter) return undefined;\n  return (value: number | null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { showValueLabels, theme } = input;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n  return {\n    show: showValueLabels,\n    position: \"top\",\n    color: theme.labelColor,\n    formatter: formatValue\n      ? (params: { value: [number, number | null] }) => formatValue(params.value[1])\n      : undefined,\n  };\n}\n\nfunction seriesEntry(\n  data: TimeSeriesData,\n  input: TimeSeriesOptionInput,\n  color: string,\n): Record<string, unknown> {\n  const values: Array<[number, number | null]> = data.points.map((point: TimeSeriesPoint) => [\n    point.timestamp,\n    point.value,\n  ]);\n  const label: Record<string, unknown> = seriesLabel(input);\n\n  if (input.displayType === \"bar\") {\n    return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n  }\n\n  return {\n    id: data.id,\n    name: data.name,\n    type: \"line\",\n    data: values,\n    showSymbol: input.showSymbols,\n    symbolSize: SYMBOL_SIZE_PX,\n    lineStyle: {\n      color,\n      type: input.line.style ?? DEFAULT_LINE_STYLE,\n      width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n    },\n    itemStyle: { color },\n    areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n    label,\n  };\n}\n\n// O retorno é `Record<string, unknown>` de propósito, e não `EChartsOption`: é o que impede\n// um tipo da biblioteca de vazar para o resto do design system.\nexport function buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { series, legend, yAxis, theme, seriesColorOverrides } = input;\n  const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n\n  return {\n    animation: false,\n    color: theme.seriesColors,\n    textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n    grid: {\n      ...GRID_WITHOUT_LEGEND,\n      top: isLegendVisible ? GRID_WITHOUT_LEGEND.top + LEGEND_HEIGHT_PX : GRID_WITHOUT_LEGEND.top,\n      containLabel: false,\n    },\n    legend: isLegendVisible\n      ? {\n          type: \"scroll\",\n          top: 0,\n          left: 0,\n          icon: \"roundRect\",\n          itemHeight: 8,\n          itemWidth: 12,\n          textStyle: { color: theme.labelColor },\n        }\n      : { show: false },\n    tooltip: {\n      trigger: \"axis\",\n      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      valueFormatter: formatValue,\n    },\n    xAxis: {\n      type: \"time\",\n      axisLine: { lineStyle: { color: theme.axisLineColor } },\n      axisTick: { show: false },\n      axisLabel: { color: theme.labelColor, hideOverlap: true, formatter: timeAxisLabel },\n      splitLine: { show: false },\n    },\n    yAxis: {\n      type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n      scale: yAxis.includeZero !== true,\n      min: yAxis.min,\n      max: yAxis.max,\n      axisLine: { show: false },\n      axisLabel: { color: theme.labelColor, formatter: formatValue },\n      splitLine: { lineStyle: { color: theme.splitLineColor } },\n    },\n    series: series.map((data: TimeSeriesData, index: number) =>\n      seriesEntry(\n        data,\n        input,\n        seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n      ),\n    ),\n  };\n}\n"],"names":["GRID_WITHOUT_LEGEND","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","YEAR_LABEL","DAY_LABEL","MINUTE_LABEL","SECOND_LABEL","timeAxisLabel","timestamp","instant","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","legend","yAxis","seriesColorOverrides","isLegendVisible","index"],"mappings":"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"}

package/dist/lib/ui/primitives/Table/Table.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../vendor/clsx/dist/clsx.cjs"),a=require("react-aria-components");;/* empty css            */const m=require("../../icons/IconChevronUp.cjs"),h=require("../../icons/IconChevronDown.cjs"),x=require("../Checkbox/Checkbox.cjs");function j({bleed:s=!1,dense:l=!1,grid:n=!1,striped:t=!1,className:c,...o}){const i=r.clsx(c,"table-container",s&&"table-container-bleed"),b=r.clsx("table",s&&"table-bleed",l&&"table-dense",n&&"table-grid",t&&"table-striped");return e.jsx("div",{className:i,children:e.jsx(a.Table,{className:b,...o})})}function d({align:s="start",className:l,...n}){const t=r.clsx(l,"table-column",`table-align-${s}`);return e.jsx(a.Column,{className:t,...n,children:({allowsSorting:c,sortDirection:o})=>e.jsx("div",{className:r.clsx("table-column-inner"),children:e.jsxs(e.Fragment,{children:[n.children,c&&e.jsx("span",{"aria-hidden":"true",className:"sort-indicator",children:o==="ascending"?e.jsx(m.IconChevronUp,{}):e.jsx(h.IconChevronDown,{})})]})})})}function g({className:s,...l}){return e.jsx(a.TableBody,{...l})}function C({className:s,columns:l,children:n,...t}){const{selectionBehavior:c,selectionMode:o,allowsDragging:i}=a.useTableOptions(),b=r.clsx(s,"table-head");return e.jsxs(a.TableHeader,{className:b,...t,children:[i&&e.jsx(d,{}),c==="toggle"&&e.jsx(d,{children:o==="multiple"&&e.jsx(x.Checkbox,{slot:"selection"})}),e.jsx(a.Collection,{items:l,children:n})]})}function T({id:s,columns:l,children:n,className:t,...c}){const{selectionBehavior:o,allowsDragging:i}=a.useTableOptions(),b=r.clsx(t,"table-row");return e.jsxs(a.Row,{id:s,...c,className:b,children:[i&&e.jsx(u,{children:e.jsx(a.Button,{slot:"drag",children:"≡"})}),o==="toggle"&&e.jsx(u,{children:e.jsx(x.Checkbox,{slot:"selection"})}),e.jsx(a.Collection,{items:l,children:n})]})}function u({align:s="start",className:l,...n}){const t=r.clsx(l,"table-cell",`table-align-${s}`);return e.jsx(a.Cell,{className:t,...n})}exports.Table=j;exports.TableBody=g;exports.TableCell=u;exports.TableColumn=d;exports.TableHead=C;exports.TableRow=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../vendor/clsx/dist/clsx.cjs"),l=require("react-aria-components");;/* empty css            */const m=require("../../icons/IconChevronUp.cjs"),h=require("../../icons/IconChevronDown.cjs"),u=require("../Checkbox/Checkbox.cjs");function j({bleed:s=!1,dense:a=!1,grid:n=!1,striped:c=!1,className:t,...o}){const i=r.clsx(t,"table-container",s&&"table-container-bleed"),b=r.clsx("table",s&&"table-bleed",a&&"table-dense",n&&"table-grid",c&&"table-striped");return e.jsx("div",{className:i,children:e.jsx(l.Table,{className:b,...o})})}function x({align:s="start",className:a,...n}){const c=r.clsx(a,"table-column",`table-align-${s}`);return e.jsx(l.Column,{className:c,...n,children:({allowsSorting:t,sortDirection:o})=>e.jsx("div",{className:r.clsx("table-column-inner"),children:e.jsxs(e.Fragment,{children:[n.children,t&&e.jsx("span",{"aria-hidden":"true",className:"sort-indicator",children:o==="ascending"?e.jsx(m.IconChevronUp,{}):e.jsx(h.IconChevronDown,{})})]})})})}function C({className:s,...a}){return e.jsx(l.TableBody,{...a})}function N({className:s,columns:a,children:n,...c}){const{selectionBehavior:t,selectionMode:o,allowsDragging:i}=l.useTableOptions(),b=r.clsx(s,"table-head");return e.jsxs(l.TableHeader,{className:b,...c,children:[i&&e.jsx(x,{}),t==="toggle"&&e.jsx(x,{className:"table-selection-col",children:o==="multiple"&&e.jsx(l.Checkbox,{slot:"selection",className:"table-selection-checkbox",children:e.jsx(u.Checkbox,{})})}),e.jsx(l.Collection,{items:a,children:n})]})}function g({id:s,columns:a,children:n,className:c,...t}){const{selectionBehavior:o,allowsDragging:i}=l.useTableOptions(),b=r.clsx(c,"table-row");return e.jsxs(l.Row,{id:s,...t,className:b,children:[i&&e.jsx(d,{children:e.jsx(l.Button,{slot:"drag",children:"≡"})}),o==="toggle"&&e.jsx(d,{className:"table-selection-cell",children:e.jsx(l.Checkbox,{slot:"selection",className:"table-selection-checkbox",children:e.jsx(u.Checkbox,{})})}),e.jsx(l.Collection,{items:a,children:n})]})}function d({align:s="start",className:a,...n}){const c=r.clsx(a,"table-cell",`table-align-${s}`);return e.jsx(l.Cell,{className:c,...n})}exports.Table=j;exports.TableBody=C;exports.TableCell=d;exports.TableColumn=x;exports.TableHead=N;exports.TableRow=g;
 //# sourceMappingURL=Table.cjs.map

package/dist/lib/ui/primitives/Table/Table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs","sources":["../../../../../src/ui/primitives/Table/Table.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconChevronDown, IconChevronUp } from \"icons\";\nimport { Checkbox } from \"primitives\";\nimport {\n  Button as RACButton,\n  Cell as RACCell,\n  Collection as RACCollection,\n  Column as RACColumn,\n  Row as RACRow,\n  Table as RACTable,\n  TableBody as RACTableBody,\n  TableHeader as RACTableHeader,\n  useTableOptions,\n  type CellProps as RACCellProps,\n  type ColumnProps as RACColumnProps,\n  type RowProps as RACRowProps,\n  type TableBodyProps as RACTableBodyProps,\n  type TableHeaderProps as RACTableHeaderProps,\n  type TableProps as RACTableProps,\n} from \"react-aria-components\";\nimport \"./table.css\";\n\ntype TableAlign = \"start\" | \"center\" | \"right\";\n\nexport type TableProps = RACTableProps & {\n  bleed?: boolean;\n  dense?: boolean;\n  grid?: boolean;\n  striped?: boolean;\n};\nexport function Table({\n  bleed = false,\n  dense = false,\n  grid = false,\n  striped = false,\n  className,\n  ...props\n}: TableProps) {\n  const containerClassNames = clsx(\n    className,\n    \"table-container\",\n    bleed && \"table-container-bleed\",\n  );\n  const tableClassNames = clsx(\n    \"table\",\n    bleed && \"table-bleed\",\n    dense && \"table-dense\",\n    grid && \"table-grid\",\n    striped && \"table-striped\",\n  );\n  return (\n    <div className={containerClassNames}>\n      <RACTable className={tableClassNames} {...props} />\n    </div>\n  );\n}\n\nexport type TableColumnProps = RACColumnProps & {\n  align?: TableAlign;\n};\nexport function TableColumn({\n  align = \"start\",\n  className,\n  ...props\n}: TableColumnProps) {\n  const classNames = clsx(className, \"table-column\", `table-align-${align}`);\n  return (\n    <RACColumn className={classNames} {...props}>\n      {({ allowsSorting, sortDirection }) => (\n        <div className={clsx(\"table-column-inner\")}>\n          <>\n            {props.children}\n            {allowsSorting && (\n              <span aria-hidden=\"true\" className=\"sort-indicator\">\n                {sortDirection === \"ascending\" ? (\n                  <IconChevronUp />\n                ) : (\n                  <IconChevronDown />\n                )}\n              </span>\n            )}\n          </>\n        </div>\n      )}\n    </RACColumn>\n  );\n}\n\nexport type TableBodyProps<T> = RACTableBodyProps<T>;\nexport function TableBody<T extends object>({\n  className,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody {...props} />;\n}\n\nexport type TableHeadProps<T> = RACTableHeaderProps<T>;\nexport function TableHead<T extends object>({\n  className,\n  columns,\n  children,\n  ...props\n}: TableHeadProps<T>) {\n  const { selectionBehavior, selectionMode, allowsDragging } =\n    useTableOptions();\n  const classNames = clsx(className, \"table-head\");\n  return (\n    <RACTableHeader className={classNames} {...props}>\n      {/* Add extra columns for drag and drop and selection. */}\n      {allowsDragging && <TableColumn />}\n      {selectionBehavior === \"toggle\" && (\n        <TableColumn>\n          {selectionMode === \"multiple\" && <Checkbox slot=\"selection\" />}\n        </TableColumn>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACTableHeader>\n  );\n}\n\nexport type TableRowProps<T> = RACRowProps<T>;\nexport function TableRow<T extends object>({\n  id,\n  columns,\n  children,\n  className,\n  ...otherProps\n}: TableRowProps<T>) {\n  const { selectionBehavior, allowsDragging } = useTableOptions();\n  const classNames = clsx(className, \"table-row\");\n  return (\n    <RACRow id={id} {...otherProps} className={classNames}>\n      {allowsDragging && (\n        <TableCell>\n          <RACButton slot=\"drag\">≡</RACButton>\n        </TableCell>\n      )}\n      {selectionBehavior === \"toggle\" && (\n        <TableCell>\n          <Checkbox slot=\"selection\" />\n        </TableCell>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACRow>\n  );\n}\n\nexport type TableCellProps = RACCellProps & { align?: TableAlign };\nexport function TableCell({\n  align = \"start\",\n  className,\n  ...props\n}: TableCellProps) {\n  const classNames = clsx(className, \"table-cell\", `table-align-${align}`);\n  return <RACCell className={classNames} {...props} />;\n}\n"],"names":["Table","bleed","dense","grid","striped","className","props","containerClassNames","clsx","tableClassNames","jsx","RACTable","TableColumn","align","classNames","RACColumn","allowsSorting","sortDirection","jsxs","Fragment","IconChevronUp","IconChevronDown","TableBody","RACTableBody","TableHead","columns","children","selectionBehavior","selectionMode","allowsDragging","useTableOptions","RACTableHeader","Checkbox","RACCollection","TableRow","id","otherProps","RACRow","TableCell","RACButton","RACCell"],"mappings":"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"}
+{"version":3,"file":"Table.cjs","sources":["../../../../../src/ui/primitives/Table/Table.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconChevronDown, IconChevronUp } from \"icons\";\nimport { Checkbox } from \"primitives\";\nimport {\n  Button as RACButton,\n  Cell as RACCell,\n  Checkbox as RACSelectionCheckbox,\n  Collection as RACCollection,\n  Column as RACColumn,\n  Row as RACRow,\n  Table as RACTable,\n  TableBody as RACTableBody,\n  TableHeader as RACTableHeader,\n  useTableOptions,\n  type CellProps as RACCellProps,\n  type ColumnProps as RACColumnProps,\n  type RowProps as RACRowProps,\n  type TableBodyProps as RACTableBodyProps,\n  type TableHeaderProps as RACTableHeaderProps,\n  type TableProps as RACTableProps,\n} from \"react-aria-components\";\nimport \"./table.css\";\n\ntype TableAlign = \"start\" | \"center\" | \"right\";\n\nexport type TableProps = RACTableProps & {\n  bleed?: boolean;\n  dense?: boolean;\n  grid?: boolean;\n  striped?: boolean;\n};\nexport function Table({\n  bleed = false,\n  dense = false,\n  grid = false,\n  striped = false,\n  className,\n  ...props\n}: TableProps) {\n  const containerClassNames = clsx(\n    className,\n    \"table-container\",\n    bleed && \"table-container-bleed\",\n  );\n  const tableClassNames = clsx(\n    \"table\",\n    bleed && \"table-bleed\",\n    dense && \"table-dense\",\n    grid && \"table-grid\",\n    striped && \"table-striped\",\n  );\n  return (\n    <div className={containerClassNames}>\n      <RACTable className={tableClassNames} {...props} />\n    </div>\n  );\n}\n\nexport type TableColumnProps = RACColumnProps & {\n  align?: TableAlign;\n};\nexport function TableColumn({\n  align = \"start\",\n  className,\n  ...props\n}: TableColumnProps) {\n  const classNames = clsx(className, \"table-column\", `table-align-${align}`);\n  return (\n    <RACColumn className={classNames} {...props}>\n      {({ allowsSorting, sortDirection }) => (\n        <div className={clsx(\"table-column-inner\")}>\n          <>\n            {props.children}\n            {allowsSorting && (\n              <span aria-hidden=\"true\" className=\"sort-indicator\">\n                {sortDirection === \"ascending\" ? (\n                  <IconChevronUp />\n                ) : (\n                  <IconChevronDown />\n                )}\n              </span>\n            )}\n          </>\n        </div>\n      )}\n    </RACColumn>\n  );\n}\n\nexport type TableBodyProps<T> = RACTableBodyProps<T>;\nexport function TableBody<T extends object>({\n  className,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody {...props} />;\n}\n\nexport type TableHeadProps<T> = RACTableHeaderProps<T>;\nexport function TableHead<T extends object>({\n  className,\n  columns,\n  children,\n  ...props\n}: TableHeadProps<T>) {\n  const { selectionBehavior, selectionMode, allowsDragging } =\n    useTableOptions();\n  const classNames = clsx(className, \"table-head\");\n  return (\n    <RACTableHeader className={classNames} {...props}>\n      {/* Add extra columns for drag and drop and selection. */}\n      {allowsDragging && <TableColumn />}\n      {selectionBehavior === \"toggle\" && (\n        <TableColumn className=\"table-selection-col\">\n          {selectionMode === \"multiple\" && (\n            <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n              <Checkbox />\n            </RACSelectionCheckbox>\n          )}\n        </TableColumn>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACTableHeader>\n  );\n}\n\nexport type TableRowProps<T> = RACRowProps<T>;\nexport function TableRow<T extends object>({\n  id,\n  columns,\n  children,\n  className,\n  ...otherProps\n}: TableRowProps<T>) {\n  const { selectionBehavior, allowsDragging } = useTableOptions();\n  const classNames = clsx(className, \"table-row\");\n  return (\n    <RACRow id={id} {...otherProps} className={classNames}>\n      {allowsDragging && (\n        <TableCell>\n          <RACButton slot=\"drag\">≡</RACButton>\n        </TableCell>\n      )}\n      {selectionBehavior === \"toggle\" && (\n        <TableCell className=\"table-selection-cell\">\n          <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n            <Checkbox />\n          </RACSelectionCheckbox>\n        </TableCell>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACRow>\n  );\n}\n\nexport type TableCellProps = RACCellProps & { align?: TableAlign };\nexport function TableCell({\n  align = \"start\",\n  className,\n  ...props\n}: TableCellProps) {\n  const classNames = clsx(className, \"table-cell\", `table-align-${align}`);\n  return <RACCell className={classNames} {...props} />;\n}\n"],"names":["Table","bleed","dense","grid","striped","className","props","containerClassNames","clsx","tableClassNames","jsx","RACTable","TableColumn","align","classNames","RACColumn","allowsSorting","sortDirection","jsxs","Fragment","IconChevronUp","IconChevronDown","TableBody","RACTableBody","TableHead","columns","children","selectionBehavior","selectionMode","allowsDragging","useTableOptions","RACTableHeader","RACSelectionCheckbox","Checkbox","RACCollection","TableRow","id","otherProps","RACRow","TableCell","RACButton","RACCell"],"mappings":"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"}

package/dist/lib/ui/primitives/Table/Table.js

@@ -1,89 +1,89 @@
 import { jsx as e, jsxs as m, Fragment as g } from "react/jsx-runtime";
-import { clsx as r } from "../../../vendor/clsx/dist/clsx.js";
-import { Table as N, Column as T, TableBody as p, useTableOptions as u, TableHeader as C, Collection as h, Row as v, Button as w, Cell as B } from "react-aria-components";
+import { clsx as c } from "../../../vendor/clsx/dist/clsx.js";
+import { Table as C, Column as T, TableBody as p, useTableOptions as h, TableHeader as x, Checkbox as u, Collection as N, Row as v, Button as w, Cell as B } from "react-aria-components";
 /* empty css          */
-import { IconChevronUp as x } from "../../icons/IconChevronUp.js";
+import { IconChevronUp as k } from "../../icons/IconChevronUp.js";
 import { IconChevronDown as $ } from "../../icons/IconChevronDown.js";
 import { Checkbox as f } from "../Checkbox/Checkbox.js";
-function F({
+function M({
   bleed: l = !1,
   dense: a = !1,
-  grid: n = !1,
-  striped: s = !1,
+  grid: s = !1,
+  striped: n = !1,
   className: t,
   ...o
 }) {
-  const c = r(
+  const r = c(
     t,
     "table-container",
     l && "table-container-bleed"
-  ), i = r(
+  ), i = c(
     "table",
     l && "table-bleed",
     a && "table-dense",
-    n && "table-grid",
-    s && "table-striped"
+    s && "table-grid",
+    n && "table-striped"
   );
-  return /* @__PURE__ */ e("div", { className: c, children: /* @__PURE__ */ e(N, { className: i, ...o }) });
+  return /* @__PURE__ */ e("div", { className: r, children: /* @__PURE__ */ e(C, { className: i, ...o }) });
 }
-function d({
+function b({
   align: l = "start",
   className: a,
-  ...n
+  ...s
 }) {
-  const s = r(a, "table-column", `table-align-${l}`);
-  return /* @__PURE__ */ e(T, { className: s, ...n, children: ({ allowsSorting: t, sortDirection: o }) => /* @__PURE__ */ e("div", { className: r("table-column-inner"), children: /* @__PURE__ */ m(g, { children: [
-    n.children,
-    t && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "sort-indicator", children: o === "ascending" ? /* @__PURE__ */ e(x, {}) : /* @__PURE__ */ e($, {}) })
+  const n = c(a, "table-column", `table-align-${l}`);
+  return /* @__PURE__ */ e(T, { className: n, ...s, children: ({ allowsSorting: t, sortDirection: o }) => /* @__PURE__ */ e("div", { className: c("table-column-inner"), children: /* @__PURE__ */ m(g, { children: [
+    s.children,
+    t && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "sort-indicator", children: o === "ascending" ? /* @__PURE__ */ e(k, {}) : /* @__PURE__ */ e($, {}) })
   ] }) }) });
 }
-function M({
+function O({
   className: l,
   ...a
 }) {
   return /* @__PURE__ */ e(p, { ...a });
 }
-function O({
+function U({
   className: l,
   columns: a,
-  children: n,
-  ...s
+  children: s,
+  ...n
 }) {
-  const { selectionBehavior: t, selectionMode: o, allowsDragging: c } = u(), i = r(l, "table-head");
-  return /* @__PURE__ */ m(C, { className: i, ...s, children: [
-    c && /* @__PURE__ */ e(d, {}),
-    t === "toggle" && /* @__PURE__ */ e(d, { children: o === "multiple" && /* @__PURE__ */ e(f, { slot: "selection" }) }),
-    /* @__PURE__ */ e(h, { items: a, children: n })
+  const { selectionBehavior: t, selectionMode: o, allowsDragging: r } = h(), i = c(l, "table-head");
+  return /* @__PURE__ */ m(x, { className: i, ...n, children: [
+    r && /* @__PURE__ */ e(b, {}),
+    t === "toggle" && /* @__PURE__ */ e(b, { className: "table-selection-col", children: o === "multiple" && /* @__PURE__ */ e(u, { slot: "selection", className: "table-selection-checkbox", children: /* @__PURE__ */ e(f, {}) }) }),
+    /* @__PURE__ */ e(N, { items: a, children: s })
   ] });
 }
-function U({
+function q({
   id: l,
   columns: a,
-  children: n,
-  className: s,
+  children: s,
+  className: n,
   ...t
 }) {
-  const { selectionBehavior: o, allowsDragging: c } = u(), i = r(s, "table-row");
+  const { selectionBehavior: o, allowsDragging: r } = h(), i = c(n, "table-row");
   return /* @__PURE__ */ m(v, { id: l, ...t, className: i, children: [
-    c && /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(w, { slot: "drag", children: "≡" }) }),
-    o === "toggle" && /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(f, { slot: "selection" }) }),
-    /* @__PURE__ */ e(h, { items: a, children: n })
+    r && /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(w, { slot: "drag", children: "≡" }) }),
+    o === "toggle" && /* @__PURE__ */ e(d, { className: "table-selection-cell", children: /* @__PURE__ */ e(u, { slot: "selection", className: "table-selection-checkbox", children: /* @__PURE__ */ e(f, {}) }) }),
+    /* @__PURE__ */ e(N, { items: a, children: s })
   ] });
 }
-function b({
+function d({
   align: l = "start",
   className: a,
-  ...n
+  ...s
 }) {
-  const s = r(a, "table-cell", `table-align-${l}`);
-  return /* @__PURE__ */ e(B, { className: s, ...n });
+  const n = c(a, "table-cell", `table-align-${l}`);
+  return /* @__PURE__ */ e(B, { className: n, ...s });
 }
 export {
-  F as Table,
-  M as TableBody,
-  b as TableCell,
-  d as TableColumn,
-  O as TableHead,
-  U as TableRow
+  M as Table,
+  O as TableBody,
+  d as TableCell,
+  b as TableColumn,
+  U as TableHead,
+  q as TableRow
 };
 //# sourceMappingURL=Table.js.map

package/dist/lib/ui/primitives/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../../src/ui/primitives/Table/Table.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconChevronDown, IconChevronUp } from \"icons\";\nimport { Checkbox } from \"primitives\";\nimport {\n  Button as RACButton,\n  Cell as RACCell,\n  Collection as RACCollection,\n  Column as RACColumn,\n  Row as RACRow,\n  Table as RACTable,\n  TableBody as RACTableBody,\n  TableHeader as RACTableHeader,\n  useTableOptions,\n  type CellProps as RACCellProps,\n  type ColumnProps as RACColumnProps,\n  type RowProps as RACRowProps,\n  type TableBodyProps as RACTableBodyProps,\n  type TableHeaderProps as RACTableHeaderProps,\n  type TableProps as RACTableProps,\n} from \"react-aria-components\";\nimport \"./table.css\";\n\ntype TableAlign = \"start\" | \"center\" | \"right\";\n\nexport type TableProps = RACTableProps & {\n  bleed?: boolean;\n  dense?: boolean;\n  grid?: boolean;\n  striped?: boolean;\n};\nexport function Table({\n  bleed = false,\n  dense = false,\n  grid = false,\n  striped = false,\n  className,\n  ...props\n}: TableProps) {\n  const containerClassNames = clsx(\n    className,\n    \"table-container\",\n    bleed && \"table-container-bleed\",\n  );\n  const tableClassNames = clsx(\n    \"table\",\n    bleed && \"table-bleed\",\n    dense && \"table-dense\",\n    grid && \"table-grid\",\n    striped && \"table-striped\",\n  );\n  return (\n    <div className={containerClassNames}>\n      <RACTable className={tableClassNames} {...props} />\n    </div>\n  );\n}\n\nexport type TableColumnProps = RACColumnProps & {\n  align?: TableAlign;\n};\nexport function TableColumn({\n  align = \"start\",\n  className,\n  ...props\n}: TableColumnProps) {\n  const classNames = clsx(className, \"table-column\", `table-align-${align}`);\n  return (\n    <RACColumn className={classNames} {...props}>\n      {({ allowsSorting, sortDirection }) => (\n        <div className={clsx(\"table-column-inner\")}>\n          <>\n            {props.children}\n            {allowsSorting && (\n              <span aria-hidden=\"true\" className=\"sort-indicator\">\n                {sortDirection === \"ascending\" ? (\n                  <IconChevronUp />\n                ) : (\n                  <IconChevronDown />\n                )}\n              </span>\n            )}\n          </>\n        </div>\n      )}\n    </RACColumn>\n  );\n}\n\nexport type TableBodyProps<T> = RACTableBodyProps<T>;\nexport function TableBody<T extends object>({\n  className,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody {...props} />;\n}\n\nexport type TableHeadProps<T> = RACTableHeaderProps<T>;\nexport function TableHead<T extends object>({\n  className,\n  columns,\n  children,\n  ...props\n}: TableHeadProps<T>) {\n  const { selectionBehavior, selectionMode, allowsDragging } =\n    useTableOptions();\n  const classNames = clsx(className, \"table-head\");\n  return (\n    <RACTableHeader className={classNames} {...props}>\n      {/* Add extra columns for drag and drop and selection. */}\n      {allowsDragging && <TableColumn />}\n      {selectionBehavior === \"toggle\" && (\n        <TableColumn>\n          {selectionMode === \"multiple\" && <Checkbox slot=\"selection\" />}\n        </TableColumn>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACTableHeader>\n  );\n}\n\nexport type TableRowProps<T> = RACRowProps<T>;\nexport function TableRow<T extends object>({\n  id,\n  columns,\n  children,\n  className,\n  ...otherProps\n}: TableRowProps<T>) {\n  const { selectionBehavior, allowsDragging } = useTableOptions();\n  const classNames = clsx(className, \"table-row\");\n  return (\n    <RACRow id={id} {...otherProps} className={classNames}>\n      {allowsDragging && (\n        <TableCell>\n          <RACButton slot=\"drag\">≡</RACButton>\n        </TableCell>\n      )}\n      {selectionBehavior === \"toggle\" && (\n        <TableCell>\n          <Checkbox slot=\"selection\" />\n        </TableCell>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACRow>\n  );\n}\n\nexport type TableCellProps = RACCellProps & { align?: TableAlign };\nexport function TableCell({\n  align = \"start\",\n  className,\n  ...props\n}: TableCellProps) {\n  const classNames = clsx(className, \"table-cell\", `table-align-${align}`);\n  return <RACCell className={classNames} {...props} />;\n}\n"],"names":["Table","bleed","dense","grid","striped","className","props","containerClassNames","clsx","tableClassNames","jsx","RACTable","TableColumn","align","classNames","RACColumn","allowsSorting","sortDirection","jsxs","Fragment","IconChevronUp","IconChevronDown","TableBody","RACTableBody","TableHead","columns","children","selectionBehavior","selectionMode","allowsDragging","useTableOptions","RACTableHeader","Checkbox","RACCollection","TableRow","id","otherProps","RACRow","TableCell","RACButton","RACCell"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../../../src/ui/primitives/Table/Table.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconChevronDown, IconChevronUp } from \"icons\";\nimport { Checkbox } from \"primitives\";\nimport {\n  Button as RACButton,\n  Cell as RACCell,\n  Checkbox as RACSelectionCheckbox,\n  Collection as RACCollection,\n  Column as RACColumn,\n  Row as RACRow,\n  Table as RACTable,\n  TableBody as RACTableBody,\n  TableHeader as RACTableHeader,\n  useTableOptions,\n  type CellProps as RACCellProps,\n  type ColumnProps as RACColumnProps,\n  type RowProps as RACRowProps,\n  type TableBodyProps as RACTableBodyProps,\n  type TableHeaderProps as RACTableHeaderProps,\n  type TableProps as RACTableProps,\n} from \"react-aria-components\";\nimport \"./table.css\";\n\ntype TableAlign = \"start\" | \"center\" | \"right\";\n\nexport type TableProps = RACTableProps & {\n  bleed?: boolean;\n  dense?: boolean;\n  grid?: boolean;\n  striped?: boolean;\n};\nexport function Table({\n  bleed = false,\n  dense = false,\n  grid = false,\n  striped = false,\n  className,\n  ...props\n}: TableProps) {\n  const containerClassNames = clsx(\n    className,\n    \"table-container\",\n    bleed && \"table-container-bleed\",\n  );\n  const tableClassNames = clsx(\n    \"table\",\n    bleed && \"table-bleed\",\n    dense && \"table-dense\",\n    grid && \"table-grid\",\n    striped && \"table-striped\",\n  );\n  return (\n    <div className={containerClassNames}>\n      <RACTable className={tableClassNames} {...props} />\n    </div>\n  );\n}\n\nexport type TableColumnProps = RACColumnProps & {\n  align?: TableAlign;\n};\nexport function TableColumn({\n  align = \"start\",\n  className,\n  ...props\n}: TableColumnProps) {\n  const classNames = clsx(className, \"table-column\", `table-align-${align}`);\n  return (\n    <RACColumn className={classNames} {...props}>\n      {({ allowsSorting, sortDirection }) => (\n        <div className={clsx(\"table-column-inner\")}>\n          <>\n            {props.children}\n            {allowsSorting && (\n              <span aria-hidden=\"true\" className=\"sort-indicator\">\n                {sortDirection === \"ascending\" ? (\n                  <IconChevronUp />\n                ) : (\n                  <IconChevronDown />\n                )}\n              </span>\n            )}\n          </>\n        </div>\n      )}\n    </RACColumn>\n  );\n}\n\nexport type TableBodyProps<T> = RACTableBodyProps<T>;\nexport function TableBody<T extends object>({\n  className,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody {...props} />;\n}\n\nexport type TableHeadProps<T> = RACTableHeaderProps<T>;\nexport function TableHead<T extends object>({\n  className,\n  columns,\n  children,\n  ...props\n}: TableHeadProps<T>) {\n  const { selectionBehavior, selectionMode, allowsDragging } =\n    useTableOptions();\n  const classNames = clsx(className, \"table-head\");\n  return (\n    <RACTableHeader className={classNames} {...props}>\n      {/* Add extra columns for drag and drop and selection. */}\n      {allowsDragging && <TableColumn />}\n      {selectionBehavior === \"toggle\" && (\n        <TableColumn className=\"table-selection-col\">\n          {selectionMode === \"multiple\" && (\n            <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n              <Checkbox />\n            </RACSelectionCheckbox>\n          )}\n        </TableColumn>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACTableHeader>\n  );\n}\n\nexport type TableRowProps<T> = RACRowProps<T>;\nexport function TableRow<T extends object>({\n  id,\n  columns,\n  children,\n  className,\n  ...otherProps\n}: TableRowProps<T>) {\n  const { selectionBehavior, allowsDragging } = useTableOptions();\n  const classNames = clsx(className, \"table-row\");\n  return (\n    <RACRow id={id} {...otherProps} className={classNames}>\n      {allowsDragging && (\n        <TableCell>\n          <RACButton slot=\"drag\">≡</RACButton>\n        </TableCell>\n      )}\n      {selectionBehavior === \"toggle\" && (\n        <TableCell className=\"table-selection-cell\">\n          <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n            <Checkbox />\n          </RACSelectionCheckbox>\n        </TableCell>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACRow>\n  );\n}\n\nexport type TableCellProps = RACCellProps & { align?: TableAlign };\nexport function TableCell({\n  align = \"start\",\n  className,\n  ...props\n}: TableCellProps) {\n  const classNames = clsx(className, \"table-cell\", `table-align-${align}`);\n  return <RACCell className={classNames} {...props} />;\n}\n"],"names":["Table","bleed","dense","grid","striped","className","props","containerClassNames","clsx","tableClassNames","jsx","RACTable","TableColumn","align","classNames","RACColumn","allowsSorting","sortDirection","jsxs","Fragment","IconChevronUp","IconChevronDown","TableBody","RACTableBody","TableHead","columns","children","selectionBehavior","selectionMode","allowsDragging","useTableOptions","RACTableHeader","RACSelectionCheckbox","Checkbox","RACCollection","TableRow","id","otherProps","RACRow","TableCell","RACButton","RACCell"],"mappings":"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"}

package/dist/types/ui/components/DataTable/DataTable.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { Selection } from "react-aria-components";
 import "./datatable.css";
 export interface Column<T> {
     key: keyof T | string;
@@ -30,6 +31,14 @@ export interface DataTableProps<T extends {
     rowActions?: RowActionDef<T>[] | ((item: T) => RowActionDef<T>[]);
     /** Label for the row actions column header. Defaults to empty string. */
     rowActionsLabel?: string;
+    /**
+     * When true, renders a checkbox column before the first data column — a per-row checkbox on
+     * every row, plus a "select all" checkbox in the header. Off by default.
+     */
+    selectable?: boolean;
+    /** Controlled selection state. Omit to let the table manage its own selection internally. */
+    selectedKeys?: Selection;
+    onSelectionChange?: (keys: Selection) => void;
     searchPlaceholder?: string;
     searchKeys?: (keyof T)[];
     isLoading?: boolean;
@@ -49,4 +58,4 @@ export interface DataTableProps<T extends {
 }
 export declare function DataTable<T extends {
     id: string;
-}>({ columns, data, actions, rowActions, rowActionsLabel, searchPlaceholder, searchKeys, isLoading, loadingMessage, emptyMessage, previousLabel, nextLabel, pageSize, nestedColumns, getNestedData, nestedLoadingMessage, nestedEmptyMessage, nestedSearchKeys, nestedSearchPlaceholder, nestedActions, nestedPageSize, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+}>({ columns, data, actions, rowActions, rowActionsLabel, selectable, selectedKeys, onSelectionChange, searchPlaceholder, searchKeys, isLoading, loadingMessage, emptyMessage, previousLabel, nextLabel, pageSize, nestedColumns, getNestedData, nestedLoadingMessage, nestedEmptyMessage, nestedSearchKeys, nestedSearchPlaceholder, nestedActions, nestedPageSize, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apipass/design-system",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [