@astryxdesign/core 0.1.6 → 0.1.7-canary.0a6de96

package/dist/Table/plugins/filtering/useTableFiltering.js

@@ -27,6 +27,7 @@ import { Selector } from "../../../Selector/index.js";
 import { MultiSelector } from "../../../MultiSelector/index.js";
 import { Tokenizer } from "../../../Tokenizer/index.js";
 import { proportional } from "../../columnUtils.js";
+import { useTranslator } from "../../../i18n/index.js";
 
 // =============================================================================
 // Filter Value Types
@@ -288,18 +289,23 @@ function TextFilterControl({
   size,
   hasClear
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
   const strValue = typeof value === 'string' ? value : '';
   return /*#__PURE__*/_jsx(TextInput, {
-    label: `Filter ${header}`,
+    label: t('@astryx.tableFiltering.filterByColumn', {
+      header
+    }),
     isLabelHidden: true,
     value: strValue,
     onChange: newValue => {
       store.getConfig().onFilterChange(columnKey, newValue === '' ? null : newValue);
     },
-    placeholder: `Filter ${header}`,
+    placeholder: t('@astryx.tableFiltering.filterByColumn', {
+      header
+    }),
     size: size,
     hasClear: hasClear
   });
@@ -311,6 +317,7 @@ function NumberFilterControl({
   size,
   hasClear
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -321,11 +328,15 @@ function NumberFilterControl({
   }, [store, columnKey]);
   if (hasClear) {
     return /*#__PURE__*/_jsx(NumberInput, {
-      label: `Filter ${header}`,
+      label: t('@astryx.tableFiltering.filterByColumn', {
+        header
+      }),
       isLabelHidden: true,
       value: numValue,
       onChange: handleChange,
-      placeholder: `Filter ${header}`,
+      placeholder: t('@astryx.tableFiltering.filterByColumn', {
+        header
+      }),
       min: operatorValue.minValue ?? null,
       max: operatorValue.maxValue ?? null,
       step: step,
@@ -334,11 +345,15 @@ function NumberFilterControl({
     });
   }
   return /*#__PURE__*/_jsx(NumberInput, {
-    label: `Filter ${header}`,
+    label: t('@astryx.tableFiltering.filterByColumn', {
+      header
+    }),
     isLabelHidden: true,
     value: numValue,
     onChange: handleChange,
-    placeholder: `Filter ${header}`,
+    placeholder: t('@astryx.tableFiltering.filterByColumn', {
+      header
+    }),
     min: operatorValue.minValue ?? null,
     max: operatorValue.maxValue ?? null,
     step: step,
@@ -352,6 +367,7 @@ function SelectorFilterControl({
   size,
   hasClear
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -365,23 +381,27 @@ function SelectorFilterControl({
   }, [store, columnKey]);
   if (hasClear) {
     return /*#__PURE__*/_jsx(Selector, {
-      label: `Filter ${header}`,
+      label: t('@astryx.tableFiltering.filterByColumn', {
+        header
+      }),
       isLabelHidden: true,
       options: options,
       value: strValue || null,
       onChange: handleChange,
-      placeholder: "All",
+      placeholder: t('@astryx.table.filter.allPlaceholder'),
       size: size,
       hasClear: true
     });
   }
   return /*#__PURE__*/_jsx(Selector, {
-    label: `Filter ${header}`,
+    label: t('@astryx.tableFiltering.filterByColumn', {
+      header
+    }),
     isLabelHidden: true,
     options: options,
     value: strValue,
     onChange: handleChange,
-    placeholder: "All",
+    placeholder: t('@astryx.table.filter.allPlaceholder'),
     size: size
   });
 }
@@ -392,6 +412,7 @@ function MultiSelectorFilterControl({
   size,
   hasClear
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -401,14 +422,16 @@ function MultiSelectorFilterControl({
     label: v.label
   }));
   return /*#__PURE__*/_jsx(MultiSelector, {
-    label: `Filter ${header}`,
+    label: t('@astryx.tableFiltering.filterByColumn', {
+      header
+    }),
     isLabelHidden: true,
     options: options,
     value: arrValue,
     onChange: newValue => {
       store.getConfig().onFilterChange(columnKey, newValue.length === 0 ? null : newValue);
     },
-    placeholder: "All",
+    placeholder: t('@astryx.table.filter.allPlaceholder'),
     size: size,
     hasSelectAll: true,
     hasSearch: false,
@@ -421,10 +444,13 @@ function DateFilterControl({
   size,
   hasClear
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const value = store.getConfig().filters[columnKey];
   return /*#__PURE__*/_jsx(DateInput, {
-    label: `Filter ${header}`,
+    label: t('@astryx.tableFiltering.filterByColumn', {
+      header
+    }),
     isLabelHidden: true,
     value: value ?? undefined,
     onChange: newValue => {
@@ -440,10 +466,13 @@ function TimeFilterControl({
   size,
   hasClear
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const value = store.getConfig().filters[columnKey];
   return /*#__PURE__*/_jsx(TimeInput, {
-    label: `Filter ${header}`,
+    label: t('@astryx.tableFiltering.filterByColumn', {
+      header
+    }),
     isLabelHidden: true,
     value: value ?? undefined,
     onChange: newValue => {
@@ -460,6 +489,7 @@ function StringListFilterControl({
   size,
   hasClear
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const value = store.getConfig().filters[columnKey] ?? [];
 
@@ -474,7 +504,9 @@ function StringListFilterControl({
   }), []);
   const searchSource = operatorValue.searchSource ?? fallbackSource;
   return /*#__PURE__*/_jsx(Tokenizer, {
-    label: `Filter ${header}`,
+    label: t('@astryx.tableFiltering.filterByColumn', {
+      header
+    }),
     isLabelHidden: true,
     searchSource: searchSource,
     value: value.map(v => ({
@@ -572,6 +604,7 @@ function PopoverFilterTrigger({
   header,
   operatorValue
 }) {
+  const t = useTranslator();
   const store = useFilterStore();
   const config = store.getConfig();
   const value = config.filters[columnKey];
@@ -616,7 +649,9 @@ function PopoverFilterTrigger({
   return /*#__PURE__*/_jsx(Popover, {
     isOpen: isOpen,
     onOpenChange: handleOpen,
-    label: `Filter ${header}`,
+    label: t('@astryx.tableFiltering.filterByColumn', {
+      header
+    }),
     placement: "below",
     alignment: "start",
     content: /*#__PURE__*/_jsx(FilterStoreContext, {
@@ -635,7 +670,7 @@ function PopoverFilterTrigger({
             className: "x78zum5 x1txdalj xtbrsbv"
           },
           children: [/*#__PURE__*/_jsx(Button, {
-            label: "Reset",
+            label: t('@astryx.table.filter.reset'),
             variant: "ghost",
             size: "sm",
             onClick: handleClear
@@ -644,7 +679,7 @@ function PopoverFilterTrigger({
               className: "x98rzlu"
             }
           }), /*#__PURE__*/_jsx(Button, {
-            label: "Apply",
+            label: t('@astryx.table.filter.apply'),
             variant: "primary",
             size: "sm",
             onClick: handleApply
@@ -654,7 +689,9 @@ function PopoverFilterTrigger({
     }),
     children: /*#__PURE__*/_jsx("button", {
       type: "button",
-      "aria-label": `Filter ${header}`,
+      "aria-label": t('@astryx.tableFiltering.filterByColumn', {
+        header
+      }),
       "aria-haspopup": "dialog",
       ...{
         0: {

package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts

@@ -52,7 +52,7 @@ export interface UseTableGroupedRowsResult<T extends Record<string, unknown>> {
  * pass all three to `<Table>`.
  *
  * @example
- * ```tsx
+ * ```
  * const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
  * const grouped = useTableGroupedRows({
  *   data: rows,

package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableGroupedRows.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/groupedRows/useTableGroupedRows.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAoD7C,qDAAqD;AACrD,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1E,8BAA8B;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,8EAA8E;IAC9E,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC7B,6CAA6C;IAC7C,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,0DAA0D;IAC1D,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAClB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,OAAO,KACf,SAAS,CAAC;IACf,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,oFAAoF;IACpF,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1E,iDAAiD;IACjD,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACvB,0EAA0E;IAC1E,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;;OAIG;IACH,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CAC5B;AA6DD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,MAAM,EAAE,yBAAyB,CAAC,CAAC,CAAC,GACnC,yBAAyB,CAAC,CAAC,CAAC,CA8I9B"}
+{"version":3,"file":"useTableGroupedRows.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/groupedRows/useTableGroupedRows.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ3D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAqD7C,qDAAqD;AACrD,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1E,8BAA8B;IAC9B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,8EAA8E;IAC9E,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC7B,6CAA6C;IAC7C,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,0DAA0D;IAC1D,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAClB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,OAAO,KACf,SAAS,CAAC;IACf,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,oFAAoF;IACpF,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC1E,iDAAiD;IACjD,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACvB,0EAA0E;IAC1E,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;;OAIG;IACH,KAAK,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CAC5B;AA6DD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACnE,MAAM,EAAE,yBAAyB,CAAC,CAAC,CAAC,GACnC,yBAAyB,CAAC,CAAC,CAAC,CA+I9B"}

package/dist/Table/plugins/groupedRows/useTableGroupedRows.js

@@ -16,9 +16,11 @@ import * as stylex from '@stylexjs/stylex';
 import "../../../theme/tokens.stylex.js";
 import { spacingVars, colorVars, fontWeightVars } from "../../../theme/tokens.stylex.js";
 import { Icon } from "../../../Icon/index.js";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useTranslator } from "../../../i18n/index.js";
+
 // A synthetic group-header row injected into the flattened data. Real rows
 // never carry this marker.
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const GROUP_HEADER = Symbol('tableGroupHeader');
 function isGroupHeader(item) {
   return typeof item === 'object' && item !== null && item[GROUP_HEADER] === true;
@@ -78,7 +80,7 @@ const styles = {
  * pass all three to `<Table>`.
  *
  * @example
- * ```tsx
+ * ```
  * const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
  * const grouped = useTableGroupedRows({
  *   data: rows,
@@ -101,6 +103,7 @@ const styles = {
  * ```
  */
 export function useTableGroupedRows(config) {
+  const t = useTranslator();
   const {
     data,
     groupBy,
@@ -196,7 +199,7 @@ export function useTableGroupedRows(config) {
           onClick: toggle,
           'aria-expanded': !collapsed
         },
-        styles: [...props.styles, styles.headerRow],
+        xstyle: [...props.xstyle, styles.headerRow],
         children:
         /*#__PURE__*/
         // colSpan larger than the column count is clamped by the browser
@@ -220,7 +223,11 @@ export function useTableGroupedRows(config) {
                 e.stopPropagation();
                 toggle();
               },
-              "aria-label": collapsed ? `Expand group ${header.groupKey}` : `Collapse group ${header.groupKey}`,
+              "aria-label": collapsed ? t('@astryx.tableGroupedRows.expandGroup', {
+                groupKey: header.groupKey
+              }) : t('@astryx.tableGroupedRows.collapseGroup', {
+                groupKey: header.groupKey
+              }),
               "aria-expanded": !collapsed,
               children: /*#__PURE__*/_jsx("span", {
                 ...{
@@ -241,7 +248,7 @@ export function useTableGroupedRows(config) {
         })
       };
     }
-  }), [collapsedGroups, onToggleGroup, renderGroupHeader]);
+  }), [collapsedGroups, onToggleGroup, renderGroupHeader, t]);
   return {
     plugin,
     data: flattened,

package/dist/Table/plugins/pagination/useTablePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTablePagination.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/pagination/useTablePagination.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AA+B7C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,wBAAwB;IAGvC,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IAEb,sEAAsE;IACtE,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAIrC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAIlB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAI3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAE1D;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEnB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAE/C;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAInC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,MAAM,EAAE,wBAAwB,GAC/B,WAAW,CAAC,CAAC,CAAC,CAiGhB"}
+{"version":3,"file":"useTablePagination.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/pagination/useTablePagination.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,aAAa,CAAC;AAgC7C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,wBAAwB;IAGvC,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IAEb,sEAAsE;IACtE,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAIrC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAIlB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9C;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAI3B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAE1D;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEnB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAE/C;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAInC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAClE,MAAM,EAAE,wBAAwB,GAC/B,WAAW,CAAC,CAAC,CAAC,CAmGhB"}

package/dist/Table/plugins/pagination/useTablePagination.js

@@ -20,11 +20,12 @@ import * as stylex from '@stylexjs/stylex';
 import "../../../theme/tokens.stylex.js";
 import { spacingVars } from "../../../theme/tokens.stylex.js";
 import { Pagination } from "../../../Pagination/index.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslator } from "../../../i18n/index.js";
+
 // =============================================================================
 // Styles
 // =============================================================================
-
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   wrapper: {
     k1xSpc: "x78zum5",
@@ -98,6 +99,7 @@ const styles = {
  * ```
  */
 export function useTablePagination(config) {
+  const t = useTranslator();
   const {
     page,
     onPageChange,
@@ -111,8 +113,9 @@ export function useTablePagination(config) {
     size = 'md',
     position = 'below',
     align = 'center',
-    label = 'Table pagination'
+    label: labelFromProps
   } = config;
+  const label = labelFromProps ?? t('@astryx.table.pagination.label');
 
   // Same guard as Pagination itself: 0/NaN/negative pageSize would produce an
   // Infinity/NaN totalPages here, which bypasses Pagination's own coercion

package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableRowExpansion.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowExpansion/useTableRowExpansion.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EACV,WAAW,EAKZ,MAAM,aAAa,CAAC;AAMrB;;;;;;;GAOG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3E,0CAA0C;IAC1C,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,sEAAsE;IACtE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,uFAAuF;IACvF,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAC1C,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,+BAA+B,CAC9C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,mCAAmC;IACnC,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,qEAAqE;IACrE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C,qDAAqD;IACrD,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,+CAA+C;IAC/C,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CACpE;AAED,MAAM,WAAW,+BAA+B,CAC9C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,qEAAqE;IACrE,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,4DAA4D;IAC5D,eAAe,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3E,QAAQ,EACR,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,YAAY,EACZ,eAAe,GAChB,EAAE,+BAA+B,CAAC,CAAC,CAAC,GAAG,+BAA+B,CAAC,CAAC,CAAC,CAyHzE;AAuGD,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACpE,MAAM,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACpC,WAAW,CAAC,CAAC,CAAC,CAwOhB"}
+{"version":3,"file":"useTableRowExpansion.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/rowExpansion/useTableRowExpansion.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,WAAW,EAKZ,MAAM,aAAa,CAAC;AAMrB;;;;;;;GAOG;AACH,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3E,0CAA0C;IAC1C,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,gDAAgD;IAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,sEAAsE;IACtE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B,uFAAuF;IACvF,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IAC1C,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,+BAA+B,CAC9C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,mCAAmC;IACnC,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,qEAAqE;IACrE,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9B,kDAAkD;IAClD,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC/B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C,qDAAqD;IACrD,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,+CAA+C;IAC/C,eAAe,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;CACpE;AAED,MAAM,WAAW,+BAA+B,CAC9C,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEjC,qEAAqE;IACrE,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,4DAA4D;IAC5D,eAAe,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;CAChD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAC3E,QAAQ,EACR,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,YAAY,EACZ,eAAe,GAChB,EAAE,+BAA+B,CAAC,CAAC,CAAC,GAAG,+BAA+B,CAAC,CAAC,CAAC,CAyHzE;AAuGD,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACpE,MAAM,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACpC,WAAW,CAAC,CAAC,CAAC,CAwOhB"}

package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js

@@ -17,6 +17,7 @@ import "../../../theme/tokens.stylex.js";
 import { spacingVars, colorVars, radiusVars } from "../../../theme/tokens.stylex.js";
 import { Icon } from "../../../Icon/index.js";
 import { resolveContextActions } from "../../tableContextMenu.js";
+import { useTranslator } from "../../../i18n/index.js";
 
 // =============================================================================
 // Config
@@ -229,6 +230,7 @@ function ExpansionChevron({
 // =============================================================================
 
 export function useTableRowExpansion(config) {
+  const t = useTranslator();
   const {
     expandedKeys,
     onToggle,
@@ -264,10 +266,10 @@ export function useTableRowExpansion(config) {
       return /*#__PURE__*/_jsx(ExpansionChevron, {
         isExpanded: isExpanded,
         onToggle: () => onToggle(key),
-        ariaLabel: isExpanded ? 'Collapse row' : 'Expand row'
+        ariaLabel: isExpanded ? t('@astryx.tableRowExpansion.collapseRow') : t('@astryx.tableRowExpansion.expandRow')
       });
     }
-  }), [expandedKeys, onToggle, getRowKey, getChildren, getIsItemExpandable, getDepth]);
+  }), [expandedKeys, onToggle, getRowKey, getChildren, getIsItemExpandable, getDepth, t]);
   return useMemo(() => ({
     transformColumns(columns) {
       // Track the first user column for indentation.
@@ -298,7 +300,7 @@ export function useTableRowExpansion(config) {
             const chevron = expandable ? /*#__PURE__*/_jsx(ExpansionChevron, {
               isExpanded: isExpanded,
               onToggle: () => onToggle(key),
-              ariaLabel: isExpanded ? 'Collapse row' : 'Expand row'
+              ariaLabel: isExpanded ? t('@astryx.tableRowExpansion.collapseRow') : t('@astryx.tableRowExpansion.expandRow')
             }) : /*#__PURE__*/_jsx("span", {
               ...{
                 className: "x1rg5ohu xvy4d1p xxk0z11 x2lah0s"
@@ -329,7 +331,7 @@ export function useTableRowExpansion(config) {
               className: "x3nfvp2 x6s0dn4 xl56j7k xvy4d1p xxk0z11 xx3sua9 x1ypdohk xv9yike xefglzl xx6bhzk x1717udv x2lah0s x1ilzqfv x1cqbx0l"
             },
             onClick: () => onToggleExpandAll(!allExpanded),
-            "aria-label": allExpanded ? 'Collapse all rows' : 'Expand all rows',
+            "aria-label": allExpanded ? t('@astryx.tableRowExpansion.collapseAllRows') : t('@astryx.tableRowExpansion.expandAllRows'),
             children: /*#__PURE__*/_jsx("span", {
               ...{
                 0: {
@@ -391,8 +393,8 @@ export function useTableRowExpansion(config) {
           ...props.htmlProps,
           onClick: () => onToggle(key)
         },
-        styles: [...props.styles, expansionStyles.clickableRow]
+        xstyle: [...props.xstyle, expansionStyles.clickableRow]
       };
     }
-  }), [expandedKeys, getRowKey, onToggle, getChildren, getDepth, getIsItemExpandable, hasRowClickExpansion, isAllExpanded, onToggleExpandAll, expansionColumn]);
+  }), [expandedKeys, getRowKey, onToggle, getChildren, getDepth, getIsItemExpandable, hasRowClickExpansion, isAllExpanded, onToggleExpandAll, expansionColumn, t]);
 }

package/dist/Table/plugins/rowIndex/useTableRowIndex.d.ts

@@ -41,7 +41,7 @@ export interface UseTableRowIndexConfig<T extends Record<string, unknown>> {
  * so it reflects the current sort / filter / pagination view.
  *
  * @example
- * ```tsx
+ * ```
  * const rowIndex = useTableRowIndex({data});
  * <Table data={data} columns={columns} idKey="id" plugins={{rowIndex}} />;
  * ```

package/dist/Table/plugins/rowIndex/useTableRowIndex.js

@@ -37,7 +37,7 @@ const INDEX_COLUMN_WIDTH = {
  * so it reflects the current sort / filter / pagination view.
  *
  * @example
- * ```tsx
+ * ```
  * const rowIndex = useTableRowIndex({data});
  * <Table data={data} columns={columns} idKey="id" plugins={{rowIndex}} />;
  * ```

package/dist/Table/plugins/selection/useTableSelection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSelection.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/selection/useTableSelection.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EACV,WAAW,EAGZ,MAAM,aAAa,CAAC;AAOrB,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE,uCAAuC;IACvC,iBAAiB,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,YAAY,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,CAAC,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAC9D,kDAAkD;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE;QAAC,aAAa,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IACvD,mDAAmD;IACnD,gBAAgB,EAAE,MAAM,OAAO,CAAC;IAChC,iFAAiF;IACjF,kBAAkB,CAAC,EAAE,MAAM,OAAO,CAAC;IACnC,+FAA+F;IAC/F,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C,oGAAoG;IACpG,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;CACzC;AAgND,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACjC,WAAW,CAAC,CAAC,CAAC,CAmFhB"}
+{"version":3,"file":"useTableSelection.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/selection/useTableSelection.tsx"],"names":[],"mappings":"AA+CA,OAAO,KAAK,EAAC,WAAW,EAAkC,MAAM,aAAa,CAAC;AAQ9E,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACxE,uCAAuC;IACvC,iBAAiB,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACxC,6EAA6E;IAC7E,YAAY,EAAE,CAAC,KAAK,EAAE;QAAC,IAAI,EAAE,CAAC,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAC9D,kDAAkD;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE;QAAC,aAAa,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IACvD,mDAAmD;IACnD,gBAAgB,EAAE,MAAM,OAAO,CAAC;IAChC,iFAAiF;IACjF,kBAAkB,CAAC,EAAE,MAAM,OAAO,CAAC;IACnC,+FAA+F;IAC/F,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAC3C,oGAAoG;IACpG,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;CACzC;AAkND,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,GACjC,WAAW,CAAC,CAAC,CAAC,CAmFhB"}

package/dist/Table/plugins/selection/useTableSelection.js

@@ -36,6 +36,7 @@ import { colorVars } from "../../../theme/tokens.stylex.js";
 import { CheckboxInput } from "../../../CheckboxInput/index.js";
 import { mergeRefs } from "../../../utils/index.js";
 import { pixel } from "../../columnUtils.js";
+import { useTranslator } from "../../../i18n/index.js";
 
 // =============================================================================
 // Config Type
@@ -130,6 +131,7 @@ const SELECT_ALL = 2;
 function SelectAllCheckboxInner({
   store
 }) {
+  const t = useTranslator();
   const getSnapshot = useCallback(() => {
     const config = store.getConfig();
     const allSelected = config.getIsAllSelected();
@@ -143,7 +145,7 @@ function SelectAllCheckboxInner({
   const allSelected = state === SELECT_ALL;
   const indeterminate = state === SELECT_INDETERMINATE;
   return /*#__PURE__*/_jsx(CheckboxInput, {
-    label: "Select all rows",
+    label: t('@astryx.table.selection.selectAllRows'),
     isLabelHidden: true,
     value: allSelected ? true : indeterminate ? 'indeterminate' : false,
     onChange: () => store.getConfig().onSelectAll({
@@ -173,6 +175,7 @@ function SelectionCellContentInner({
   store,
   item
 }) {
+  const t = useTranslator();
   const config = store.getConfig();
   const isSelected = useIsItemSelected(store, item);
   const selectable = config.getIsItemSelectable?.(item) ?? true;
@@ -181,7 +184,7 @@ function SelectionCellContentInner({
     return null;
   }
   return /*#__PURE__*/_jsx(CheckboxInput, {
-    label: "Select row",
+    label: t('@astryx.table.selection.selectRow'),
     isLabelHidden: true,
     value: isSelected,
     onChange: () => store.getConfig().onSelectItem({

package/dist/Table/plugins/sortable/useTableSortable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSortable.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/sortable/useTableSortable.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAMrB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE5D;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM;IAC9D,2EAA2E;IAC3E,OAAO,EAAE,QAAQ,CAAC;IAClB,0BAA0B;IAC1B,SAAS,EAAE,kBAAkB,CAAC;CAC/B;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM,IACzD,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;AAM7B;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,sBAAsB,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM;IACtE,iEAAiE;IACjE,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE/B;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAEvD;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAmND;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,QAAQ,SAAS,MAAM,GAAG,MAAM,EAChC,MAAM,EAAE,sBAAsB,CAAC,QAAQ,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAyF1D"}
+{"version":3,"file":"useTableSortable.d.ts","sourceRoot":"","sources":["../../../../src/Table/plugins/sortable/useTableSortable.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EACV,WAAW,EAIZ,MAAM,aAAa,CAAC;AAMrB;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE5D;;GAEG;AACH,MAAM,WAAW,cAAc,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM;IAC9D,2EAA2E;IAC3E,OAAO,EAAE,QAAQ,CAAC;IAClB,0BAA0B;IAC1B,SAAS,EAAE,kBAAkB,CAAC;CAC/B;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM,IACzD,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;AAM7B;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,sBAAsB,CAAC,QAAQ,SAAS,MAAM,GAAG,MAAM;IACtE,iEAAiE;IACjE,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE/B;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IAEvD;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAmND;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAC9B,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,QAAQ,SAAS,MAAM,GAAG,MAAM,EAChC,MAAM,EAAE,sBAAsB,CAAC,QAAQ,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CA2F1D"}

package/dist/Table/plugins/sortable/useTableSortable.js

@@ -18,6 +18,7 @@ import "../../../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars } from "../../../theme/tokens.stylex.js";
 import { Icon } from "../../../Icon/index.js";
 import { resolveContextActions } from "../../tableContextMenu.js";
+import { useTranslator } from "../../../i18n/index.js";
 
 // =============================================================================
 // Sort Types
@@ -236,6 +237,7 @@ function SortHeaderButton({
  * ```
  */
 export function useTableSortable(config) {
+  const t = useTranslator();
   const configRef = useRef(config);
   configRef.current = config;
   return useMemo(() => ({
@@ -257,7 +259,7 @@ export function useTableSortable(config) {
         const actions = [{
           id: 'sort-asc',
           group: 'sort',
-          label: 'Sort ascending',
+          label: t('@astryx.table.sort.ascending'),
           icon: /*#__PURE__*/_jsx(Icon, {
             icon: "arrowUp",
             size: "xsm",
@@ -271,7 +273,7 @@ export function useTableSortable(config) {
         }, {
           id: 'sort-desc',
           group: 'sort',
-          label: 'Sort descending',
+          label: t('@astryx.table.sort.descending'),
           icon: /*#__PURE__*/_jsx(Icon, {
             icon: "arrowDown",
             size: "xsm",
@@ -287,7 +289,7 @@ export function useTableSortable(config) {
           actions.push({
             id: 'sort-clear',
             group: 'sort-clear',
-            label: 'Clear sort',
+            label: t('@astryx.table.sort.clear'),
             icon: /*#__PURE__*/_jsx(Icon, {
               icon: "close",
               size: "xsm",
@@ -318,5 +320,5 @@ export function useTableSortable(config) {
         contextMenuActions: () => [...resolveContextActions(priorActions), ...getSortActions()]
       };
     }
-  }), []);
+  }), [t]);
 }

package/dist/Table/plugins/stickyColumns/useTableStickyColumns.js

@@ -307,7 +307,7 @@ export function useTableStickyColumns(config) {
             ...offsetStyle
           }
         },
-        styles: [...props.styles, stickyStyles.cell, stickyStyles.headerCell, side.edge === 'start' ? shadowStyles.start : shadowStyles.end]
+        xstyle: [...props.xstyle, stickyStyles.cell, stickyStyles.headerCell, side.edge === 'start' ? shadowStyles.start : shadowStyles.end]
       };
     },
     transformBodyCell(props, column) {
@@ -333,7 +333,7 @@ export function useTableStickyColumns(config) {
             ...offsetStyle
           }
         },
-        styles: [...props.styles, stickyStyles.cell, stickyStyles.bodyCell, side.edge === 'start' ? shadowStyles.start : shadowStyles.end]
+        xstyle: [...props.xstyle, stickyStyles.cell, stickyStyles.bodyCell, side.edge === 'start' ? shadowStyles.start : shadowStyles.end]
       };
     },
     transformScrollWrapper(props) {

package/dist/Table/types.d.ts

@@ -181,12 +181,12 @@ export interface TableColumn<T extends Record<string, unknown>> {
 /** Props passed through the plugin pipeline for the `<table>` element */
 export interface TableRenderProps {
     htmlProps: HTMLAttributes<HTMLTableElement>;
-    styles: StyleXStyles[];
+    xstyle: StyleXStyles[];
 }
 /** Props passed through the plugin pipeline for the header `<tr>` */
 export interface HeaderRowRenderProps {
     htmlProps: HTMLAttributes<HTMLTableRowElement>;
-    styles: StyleXStyles[];
+    xstyle: StyleXStyles[];
     children: ReactNode;
 }
 /**
@@ -206,7 +206,7 @@ export interface HeaderRowRenderProps {
  */
 export interface HeaderCellRenderProps {
     htmlProps: ThHTMLAttributes<HTMLTableCellElement>;
-    styles: StyleXStyles[];
+    xstyle: StyleXStyles[];
     /** Content rendered before the header label. */
     before?: ReactNode;
     /** The header label content. Initialized from `column.header ?? column.key`. Plugins may wrap or replace. */
@@ -241,7 +241,7 @@ export interface HeaderCellRenderProps {
 /** Props passed through the plugin pipeline for each body `<tr>` */
 export interface BodyRowRenderProps {
     htmlProps: HTMLAttributes<HTMLTableRowElement>;
-    styles: StyleXStyles[];
+    xstyle: StyleXStyles[];
     children: ReactNode;
     /** Ref for the `<tr>` element. Plugins can set this to access the row DOM node. */
     ref?: Ref<HTMLTableRowElement>;
@@ -249,7 +249,7 @@ export interface BodyRowRenderProps {
 /** Props passed through the plugin pipeline for each body `<td>` */
 export interface BodyCellRenderProps {
     htmlProps: TdHTMLAttributes<HTMLTableCellElement>;
-    styles: StyleXStyles[];
+    xstyle: StyleXStyles[];
     /**
      * Right-click context-menu actions for this body cell. Plugins append their
      * actions in `transformBodyCell`; BaseTable concatenates the arrays across
@@ -294,7 +294,7 @@ export interface ScrollWrapperRenderProps {
     htmlProps: HTMLAttributes<HTMLDivElement> & {
         ref?: Ref<HTMLDivElement>;
     };
-    styles: StyleXStyles[];
+    xstyle: StyleXStyles[];
     /** Content rendered before the `<table>`, inside the scroll container. */
     beforeTable?: ReactNode;
     /** Content rendered after the `<table>`, inside the scroll container. */
@@ -449,7 +449,14 @@ export interface BaseTableProps<T extends Record<string, unknown>> extends BaseP
     plugins?: TablePlugin<T>[];
     /** Children mode — render `<tr>`/`<td>` directly instead of data-driven */
     children?: ReactNode;
-    /** Additional HTML attributes for the `<table>` element */
+    /**
+     * Additional HTML attributes for the `<table>` element.
+     *
+     * @deprecated Pass `className`, `style`, `xstyle`, and other HTML
+     * attributes directly on the component instead — they now reach the root
+     * `<table>` and win over `tableProps` on conflicts. Migrate with
+     * `npx astryx upgrade --codemod migrate-table-tableprops-to-direct-props`.
+     */
     tableProps?: HTMLAttributes<HTMLTableElement>;
     /**
      * Optional wrapper rendered around the `<table>` element, inside the
@@ -457,9 +464,9 @@ export interface BaseTableProps<T extends Record<string, unknown>> extends BaseP
      * horizontal scroll container so plugin chrome (pagination, toolbars)
      * stays outside the scrollable area.
      *
-     * Receives `htmlProps` (including an optional `ref`) and `styles` produced
+     * Receives `htmlProps` (including an optional `ref`) and `xstyle` produced
      * by the plugin `transformScrollWrapper` pipeline, plus `beforeTable`/`afterTable`
-     * chrome. The wrapper must spread `htmlProps` (and apply `styles`) onto its
+     * chrome. The wrapper must spread `htmlProps` (and apply `xstyle`) onto its
      * scroll-container element so plugins can attach refs / scroll listeners.
      */
     scrollWrapper?: ComponentType<{
@@ -467,7 +474,7 @@ export interface BaseTableProps<T extends Record<string, unknown>> extends BaseP
         htmlProps?: HTMLAttributes<HTMLDivElement> & {
             ref?: Ref<HTMLDivElement>;
         };
-        styles?: StyleXStyles[];
+        xstyle?: StyleXStyles[];
         beforeTable?: ReactNode;
         afterTable?: ReactNode;
     }>;