@astryxdesign/core 0.1.5 → 0.1.6-canary.02f2602

package/src/PowerSearch/usePowerSearchSource.ts

@@ -14,14 +14,22 @@
 
 import {useMemo} from 'react';
 import type {SearchSource} from '../Typeahead/types';
+import {useTranslator} from '../i18n';
+import {resolveOperatorLabel} from './resolveOperatorLabel';
 import type {InternalConfig} from './useInternalConfig';
 import type {PowerSearchItem, PowerSearchOperator, FilterValue} from './types';
 
 export function usePowerSearchSource(
   config: InternalConfig,
 ): SearchSource<PowerSearchItem> {
+  const t = useTranslator();
   return useMemo(() => {
     const allItems = buildFieldItems(config);
+    // Resolver stays inline — `t()` internally memoizes both catalog
+    // lookups and parsed IntlMessageFormat instances, so calling it
+    // per keystroke is already O(1).
+    const opLabel = (op: PowerSearchOperator): string =>
+      resolveOperatorLabel(op, t);
 
     return {
       search(query: string): PowerSearchItem[] {
@@ -68,14 +76,15 @@ export function usePowerSearchSource(
 
           // Check each field+operator combo against the query
           for (const op of field.operators) {
-            const combinedLabel = `${field.label} ${op.label}`.toLowerCase();
+            const combinedLabel =
+              `${field.label} ${opLabel(op)}`.toLowerCase();
             if (combinedLabel.includes(lower)) {
               const id = `${field.key}:${op.key}`;
               if (!seen.has(id)) {
                 seen.add(id);
                 results.push({
                   id,
-                  label: `${field.label} ${op.label}`,
+                  label: `${field.label} ${opLabel(op)}`,
                   auxiliaryData: {
                     fieldKey: field.key,
                     operatorKey: op.key,
@@ -100,7 +109,7 @@ export function usePowerSearchSource(
           // Try "<field> <operator> <value>" first (longer match wins)
           let hasExactOperatorMatch = false;
           for (const op of field.operators) {
-            const prefix = `${fieldLabel} ${op.label.toLowerCase()} `;
+            const prefix = `${fieldLabel} ${opLabel(op).toLowerCase()} `;
             if (lower.startsWith(prefix) && lower.length > prefix.length) {
               const rawValue = query.slice(prefix.length);
               const matches = resolveValueMatches(op, rawValue);
@@ -113,7 +122,7 @@ export function usePowerSearchSource(
                   seen.add(id);
                   results.push({
                     id,
-                    label: `${field.label} ${op.label} ${match.quoted ? `"${match.displayValue}"` : match.displayValue}`,
+                    label: `${field.label} ${opLabel(op)} ${match.quoted ? `"${match.displayValue}"` : match.displayValue}`,
                     auxiliaryData: {
                       fieldKey: field.key,
                       operatorKey: op.key,
@@ -136,7 +145,7 @@ export function usePowerSearchSource(
             // Check the remainder isn't the start of an operator name
             const remainder = lower.slice(fieldPrefix.length);
             const isOperatorPrefix = field.operators.some(op =>
-              op.label.toLowerCase().startsWith(remainder),
+              opLabel(op).toLowerCase().startsWith(remainder),
             );
             if (!isOperatorPrefix) {
               const rawValue = query.slice(fieldPrefix.length);
@@ -148,7 +157,7 @@ export function usePowerSearchSource(
                     seen.add(id);
                     results.push({
                       id,
-                      label: `${field.label} ${op.label} ${match.quoted ? `"${match.displayValue}"` : match.displayValue}`,
+                      label: `${field.label} ${opLabel(op)} ${match.quoted ? `"${match.displayValue}"` : match.displayValue}`,
                       auxiliaryData: {
                         fieldKey: field.key,
                         operatorKey: op.key,
@@ -171,7 +180,7 @@ export function usePowerSearchSource(
             f =>
               f.label.toLowerCase() === lower ||
               f.operators.some(
-                op => `${f.label} ${op.label}`.toLowerCase() === lower,
+                op => `${f.label} ${opLabel(op)}`.toLowerCase() === lower,
               ),
           );
         if (contentFieldKey && !hasExactMatch) {
@@ -197,7 +206,7 @@ export function usePowerSearchSource(
         return allItems;
       },
     };
-  }, [config]);
+  }, [config, t]);
 }
 
 interface ValueMatch {

package/src/RadioList/RadioList.doc.mjs

@@ -100,7 +100,7 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description: 'Status indicator ({ type, message }).',
     },
     {

package/src/Resizable/ResizeHandle.tsx

@@ -33,6 +33,7 @@ import {
 import {mergeProps, mergeRefs} from '../utils';
 import type {ResizableProps} from './useResizable';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 const KEYBOARD_STEP = 10;
 const KEYBOARD_LARGE_STEP = 50;
@@ -307,7 +308,7 @@ export function ResizeHandle({
   hasDivider = false,
   isAlwaysVisible = true,
   pillPlacement = 'auto',
-  label = 'Resize handle',
+  label: labelFromProps,
   resizable,
   children,
   xstyle,
@@ -315,6 +316,8 @@ export function ResizeHandle({
   ref,
   ...props
 }: ResizeHandleProps) {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.resizable.handle.label');
   const handleRef = useRef<HTMLDivElement>(null);
   // Removes the in-flight drag's window listeners (and resets body styles).
   // Held in a ref so unmount can tear down a drag that never got a pointerup.

package/src/Section/Section.doc.mjs

@@ -49,13 +49,13 @@ export const docs = {
     },
     {
       name: 'padding',
-      type: 'SpacingStep',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description: 'Internal padding using the spacing scale (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10). Use padding={0} for edge-to-edge content.',
       default: '4',
     },
     {
       name: 'paddingBlock',
-      type: 'SpacingStep',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description: 'Block (vertical) padding override. Overrides only the block-axis padding while preserving inline padding from `padding` or the container theme default. Accepts the spacing scale (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10).',
     },
     {
@@ -131,13 +131,13 @@ export const docsZh = {
     },
     {
       name: 'padding',
-      type: 'SpacingStep',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description: '使用间距比例的内部内边距（0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10）。使用 padding={0} 实现全宽内容。',
       default: '4',
     },
     {
       name: 'paddingBlock',
-      type: 'SpacingStep',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description: '块（垂直）方向内边距覆盖。仅覆盖块轴内边距，同时保留来自 padding 或容器主题默认值的行内内边距。使用间距比例（0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10）。',
     },
     {

package/src/SelectableCard/SelectableCard.doc.mjs

@@ -25,7 +25,7 @@ export const docs = {
     {name: 'onChange', type: '(isSelected: boolean) => void', description: 'Called when toggled.', required: true},
     {name: 'isDisabled', type: 'boolean', description: 'Disables the card.', default: 'false'},
     {name: 'children', type: 'ReactNode', description: 'Card content.'},
-    {name: 'padding', type: "SpacingStep", description: 'Inner padding.', default: '4'},
+    {name: 'padding', type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10', description: 'Inner padding.', default: '4'},
     {name: 'variant', type: "'default' | 'transparent' | 'muted' | 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow'", description: 'Background color variant.', default: "'default'"},
     {name: 'width', type: 'SizeValue', description: 'Card width.'},
     {name: 'height', type: 'SizeValue', description: 'Card height.'},

package/src/Selector/Selector.tsx

@@ -72,6 +72,7 @@ import {themeProps} from '../utils/themeProps';
 import {groupStyles} from '../InputGroup/groupStyles';
 import {useInputGroup} from '../InputGroup/InputGroupContext';
 import {VisuallyHidden} from '../VisuallyHidden';
+import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   // Trigger container — the enhanced click target wrapping the combobox button and clear button as siblings
@@ -524,8 +525,7 @@ type SelectorPropsClearable<T extends SelectorOptionType = SelectorOptionType> =
   };
 
 export type SelectorProps<T extends SelectorOptionType = SelectorOptionType> =
-  | SelectorPropsNonClearable<T>
-  | SelectorPropsClearable<T>;
+  SelectorPropsNonClearable<T> | SelectorPropsClearable<T>;
 
 /**
  * Default option renderer
@@ -553,6 +553,7 @@ function DefaultOption({option}: {option: SelectorOptionData}) {
 export function Selector<T extends SelectorOptionType>(
   props: SelectorProps<T>,
 ) {
+  const t = useTranslator();
   const {
     label,
     isLabelHidden = false,
@@ -566,7 +567,7 @@ export function Selector<T extends SelectorOptionType>(
     onChange,
     changeAction,
     isLoading = false,
-    placeholder = 'Select...',
+    placeholder: placeholderFromProps,
     size: sizeProp,
     status,
     labelTooltip,
@@ -574,7 +575,7 @@ export function Selector<T extends SelectorOptionType>(
     htmlName,
     renderOption,
     hasSearch = false,
-    searchPlaceholder = 'Search...',
+    searchPlaceholder: searchPlaceholderFromProps,
     placement,
     isDefaultOpen = false,
     'data-testid': testId,
@@ -585,6 +586,9 @@ export function Selector<T extends SelectorOptionType>(
     hasClear: hasClearProp,
     ...rest
   } = props as SelectorPropsClearable<T>;
+  const placeholder = placeholderFromProps ?? t('@astryx.selector.placeholder');
+  const searchPlaceholder =
+    searchPlaceholderFromProps ?? t('@astryx.selector.searchPlaceholder');
   const hasClear = hasClearProp === true;
   const size = useSize(sizeProp, 'md');
 
@@ -803,7 +807,7 @@ export function Selector<T extends SelectorOptionType>(
               ? getItemId(highlightedIndex)
               : undefined
           }
-          aria-label="Search options"
+          aria-label={t('@astryx.selector.searchOptions')}
           type="text"
           value={searchQuery}
           onChange={e => setSearchQuery(e.target.value)}
@@ -835,6 +839,7 @@ export function Selector<T extends SelectorOptionType>(
     popover.isOpen,
     highlightedIndex,
     getItemId,
+    t,
   ]);
 
   // Render an individual item
@@ -1014,7 +1019,7 @@ export function Selector<T extends SelectorOptionType>(
           <button
             type="button"
             onClick={handleClear}
-            aria-label={`Clear ${label}`}
+            aria-label={t('@astryx.selector.clearLabel', {label})}
             {...stylex.props(styles.clearButton)}>
             <Icon icon="close" size="sm" color="secondary" />
           </button>

package/src/SideNav/SideNav.tsx

@@ -45,6 +45,7 @@ import {useResizable} from '../Resizable/useResizable';
 import type {ResizableConfig} from '../Resizable/useResizable';
 import {ResizeHandle} from '../Resizable/ResizeHandle';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Constants
@@ -330,6 +331,7 @@ export function SideNav({
   handleRef,
   ...props
 }: SideNavProps) {
+  const t = useTranslator();
   // Parse collapsible prop
   const collapsibleConfig = typeof collapsible === 'object' ? collapsible : {};
   const isCollapsible = !!collapsible;
@@ -504,7 +506,7 @@ export function SideNav({
     <nav
       ref={mergeRefs(ref, navRef)}
       role="navigation"
-      aria-label="Side navigation"
+      aria-label={t('@astryx.sideNav.label')}
       data-testid={testId}
       {...mergeProps(
         themeProps('side-nav'),
@@ -569,7 +571,7 @@ export function SideNav({
         pillPlacement="end"
         isAlwaysVisible={false}
         resizable={resizableHook.props}
-        label="Resize sidebar"
+        label={t('@astryx.sideNav.resizeSidebar')}
       />
     </div>
   ) : (

package/src/SideNav/SideNavCollapseButton.tsx

@@ -30,6 +30,7 @@ import {
   type SideNavImperativeCollapseHandle,
 } from './SideNavCollapseContext';
 import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Styles
@@ -105,6 +106,7 @@ export function SideNavCollapseButton({
   onClick: onClickProp,
   ...props
 }: SideNavCollapseButtonProps) {
+  const t = useTranslator();
   const {isCollapsed, toggle, isCollapsible} =
     useSideNavCollapseState(handleRef);
   const {isMobile} = useAppShellMobile();
@@ -118,7 +120,7 @@ export function SideNavCollapseButton({
   return (
     <Button
       ref={ref}
-      label={label ?? (isCollapsed ? 'Expand sidebar' : 'Collapse sidebar')}
+      label={label ?? (isCollapsed ? t('@astryx.sideNavCollapseButton.expandSidebar') : t('@astryx.sideNavCollapseButton.collapseSidebar'))}
       variant="ghost"
       {...props}
       onClick={composeEventHandlers(onClickProp, toggle)}

package/src/SideNav/SideNavHeading.tsx

@@ -44,6 +44,7 @@ import type {BaseProps} from '../BaseProps';
 import {useMenuHover} from '../hooks/useMenuHover';
 import {NavHeadingCloseContext} from '../NavMenu/NavMenuContext';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Styles
@@ -342,13 +343,14 @@ export function SideNavHeading({
   ref,
   ...props
 }: SideNavHeadingProps) {
+  const t = useTranslator();
   const LinkComponent = useLinkComponent(as);
   const {isCollapsed} = useSideNavCollapse();
   const rootRef = useRef<HTMLDivElement>(null);
   const collapsedItemRef = useRef<HTMLElement>(null);
 
   const popover = usePopover({
-    dialogLabel: 'Navigation menu',
+    dialogLabel: t('@astryx.sideNav.heading.dialogLabel'),
     hasCloseButton: false,
   });
 
@@ -603,7 +605,7 @@ export function SideNavHeading({
           {renderTextContent(
             <button
               type="button"
-              aria-label="Open menu"
+              aria-label={t('@astryx.sideNav.heading.openMenu')}
               onClick={e => {
                 e.stopPropagation();
                 triggerProps.onClick();
@@ -665,7 +667,7 @@ export function SideNavHeading({
             showChevron ? (
               <button
                 type="button"
-                aria-label="Open menu"
+                aria-label={t('@astryx.sideNav.heading.openMenu')}
                 onClick={e => {
                   e.stopPropagation();
                   triggerProps.onClick();

package/src/SideNav/SideNavItem.tsx

@@ -54,6 +54,7 @@ import {getIcon} from '../Icon/globalIconRegistry';
 import {useSideNavRenderMode} from './SideNavRenderContext';
 import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Styles
@@ -356,6 +357,7 @@ export function SideNavItem({
   'data-testid': testId,
   ref,
 }: SideNavItemProps) {
+  const t = useTranslator();
   const {isCollapsed} = useSideNavCollapse();
   const renderMode = useSideNavRenderMode();
   const {closeMobileNav} = useAppShellMobile();
@@ -626,7 +628,7 @@ export function SideNavItem({
         <button
           type="button"
           onClick={handleToggleClick}
-          aria-label={isItemCollapsed ? `Expand ${label}` : `Collapse ${label}`}
+          aria-label={isItemCollapsed ? t('@astryx.sideNavItem.expand', {label}) : t('@astryx.sideNavItem.collapse', {label})}
           aria-expanded={!isItemCollapsed}
           aria-controls={`${id}-children`}
           {...stylex.props(styles.expandToggle)}>

package/src/Slider/Slider.doc.mjs

@@ -132,7 +132,7 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description:
         'Status indicator object (`{ type, message }`) for validation feedback.',
     },
@@ -286,7 +286,7 @@ export const docsZh = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description:
         '验证反馈的状态指示器对象（`{ type, message }`）。',
     },

package/src/Stack/Stack.doc.mjs

@@ -24,25 +24,25 @@ export const docs = {
       props: [
         {
           name: 'gap',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Spacing step (number literal): 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10. Pass as a JSX number expression e.g. gap={4}, NOT a string like gap="4".',
         },
         {
           name: 'padding',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Inner padding on all sides, using the spacing scale (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10). Matches the padding prop on Card, LayoutContent, and LayoutPanel. Pass as a JSX number expression e.g. padding={3}.',
         },
         {
           name: 'paddingInline',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Inline (horizontal) padding, using the spacing scale. Overrides padding on the inline axis when both are set.',
         },
         {
           name: 'paddingBlock',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Block (vertical) padding, using the spacing scale. Overrides padding on the block axis when both are set.',
         },
@@ -127,25 +127,25 @@ export const docs = {
       props: [
         {
           name: 'gap',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Spacing step (number literal): 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10. Pass as a JSX number expression e.g. gap={4}, NOT a string like gap="4".',
         },
         {
           name: 'padding',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Inner padding on all sides, using the spacing scale (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10). Matches the padding prop on Card, LayoutContent, and LayoutPanel. Pass as a JSX number expression e.g. padding={3}.',
         },
         {
           name: 'paddingInline',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Inline (horizontal) padding, using the spacing scale. Overrides padding on the inline axis when both are set.',
         },
         {
           name: 'paddingBlock',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             'Block (vertical) padding, using the spacing scale. Overrides padding on the block axis when both are set.',
         },
@@ -289,7 +289,7 @@ export const docsZh = {
       props: [
         {
           name: 'gap',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             '间距步进（数字字面量）：0、0.5、1、1.5、2、3、4、5、6、8、10。在 JSX 中使用数字表达式 e.g. gap={4}，不要使用字符串 gap="4"。',
         },
@@ -358,7 +358,7 @@ export const docsZh = {
       props: [
         {
           name: 'gap',
-          type: 'SpacingStep',
+          type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
           description:
             '间距步进（数字字面量）：0、0.5、1、1.5、2、3、4、5、6、8、10。在 JSX 中使用数字表达式 e.g. gap={4}，不要使用字符串 gap="4"。',
         },

package/src/Switch/Switch.doc.mjs

@@ -90,7 +90,7 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description:
         'Status indicator with type and message. Displays a colored message box below the switch and sets aria-invalid when type is "error".',
     },
@@ -236,7 +236,7 @@ export const docsZh = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description:
         '带类型和消息的状态指示器。在开关下方显示彩色消息框，当类型为 "error" 时设置 aria-invalid。',
     },

package/src/Switch/Switch.test.tsx

@@ -197,6 +197,22 @@ describe('Switch', () => {
     expect(screen.getByLabelText('Toggle row')).toBeInTheDocument();
   });
 
+  it('keeps description linked via aria-describedby when isLabelHidden', () => {
+    render(
+      <Switch
+        label="Toggle row"
+        isLabelHidden
+        description="Enables sync for this row"
+        value={false}
+        onChange={() => {}}
+      />,
+    );
+    const switchEl = screen.getByRole('switch');
+    const description = screen.getByText('Enables sync for this row');
+    expect(description.id).not.toBe('');
+    expect(switchEl.getAttribute('aria-describedby')).toContain(description.id);
+  });
+
   it('shows label visually by default', () => {
     render(
       <Switch label="Enable notifications" value={false} onChange={() => {}} />,

package/src/Switch/Switch.tsx

@@ -393,9 +393,11 @@ export function Switch({
   });
 
   // Build aria-describedby from description and status message
-  // Only include descriptionID when the element actually renders
+  // Only include descriptionID when the element actually renders.
+  // FieldLabel renders the description (with descriptionID) even when the
+  // label is visually hidden — it's sr-only, so keep it linked.
   const describedByParts: string[] = [];
-  if (description && !isLabelHidden) {
+  if (description) {
     describedByParts.push(descriptionID);
   }
   if (status?.message) {

package/src/TabList/TabList.tsx

@@ -29,6 +29,7 @@ import {useListFocus} from '../hooks/useListFocus';
 import {useKeyboardHint} from '../hooks/useKeyboardHint';
 import {EDGE_COMP_ATTR} from '../Layout/edgeCompensation.stylex';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 /**
  * Selector matching the focusable stops in the tab strip: every Tab
@@ -129,11 +130,13 @@ export function TabList({
   onKeyDown: onKeyDownProp,
   onFocus: onFocusProp,
   onBlur: onBlurProp,
-  'aria-label': ariaLabel = 'Tabs',
+  'aria-label': ariaLabelFromProps,
   'aria-orientation': _ariaOrientation,
   [EDGE_COMP_ATTR]: _edgeCompAttr,
   ...restProps
 }: TabListProps) {
+  const t = useTranslator();
+  const ariaLabel = ariaLabelFromProps ?? t('@astryx.tabList.label');
   const size = useSize(sizeProp, 'md');
 
   // Roving-tabindex keyboard navigation across the tab strip via the shared

package/src/Table/BaseTable.tsx

@@ -45,6 +45,7 @@ import {mergeProps} from '../utils';
 import {EmptyState} from '../EmptyState';
 import {Text} from '../Text';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   table: {
@@ -326,6 +327,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
   emptyState,
   ref,
 }: BaseTableProps<T> & {ref?: Ref<HTMLTableElement>}): ReactElement {
+  const t = useTranslator();
   // Use stable empty array when no plugins provided
   const plugins = pluginsProp ?? (EMPTY_PLUGINS as TablePlugin<T>[]);
 
@@ -527,7 +529,12 @@ function BaseTableInner<T extends Record<string, unknown>>({
                 emptyState !== false && (
                   <tr>
                     <td colSpan={resolvedColumns.length}>
-                      {emptyState ?? <EmptyState title="No data" isCompact />}
+                      {emptyState ?? (
+                        <EmptyState
+                          title={t('@astryx.table.noData')}
+                          isCompact
+                        />
+                      )}
                     </td>
                   </tr>
                 )}

package/src/Table/Table.doc.mjs

@@ -45,7 +45,7 @@ export const docs = {
     {
       name: 'columns',
       type: 'TableColumn<T>[]',
-      description: 'Column definitions: each column has {key, header, width?, align?, renderCell?}. The `header` field sets the column heading text. If omitted, columns are auto-generated from data object keys. The `width` field is typed as `ColumnWidth` (not a number) — use `proportional(n)` or `pixel(n)` helpers imported from `@astryxdesign/core/Table`. Example: `width: pixel(120)` for 120px fixed, `width: proportional(1)` for flex distribution.',
+      description: 'Column definitions: each column has {key, header, width?, align?, renderCell?}. The `header` field sets the column heading text. If omitted, columns are auto-generated from data object keys. The `width` field is typed as `ColumnWidth` (not a number); use `proportional(n)` or `pixel(n)` helpers imported from `@astryxdesign/core/Table`. Example: `width: pixel(120)` for 120px fixed, `width: proportional(1)` for flex distribution.',
     },
     {
       name: 'idKey',

package/src/Table/Table.tsx

@@ -31,6 +31,7 @@ import type {
   TableRenderProps,
 } from './types';
 import type {StyleXStyles} from '../theme/types';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Table Types
@@ -147,6 +148,7 @@ function TableScrollWrapper({
   beforeTable?: React.ReactNode;
   afterTable?: React.ReactNode;
 }) {
+  const t = useTranslator();
   const {ref, ...restHtmlProps} = htmlProps ?? {};
   return (
     <div
@@ -158,7 +160,7 @@ function TableScrollWrapper({
       // htmlProps.
       tabIndex={0}
       role="group"
-      aria-label="Table"
+      aria-label={t('@astryx.table.label')}
       {...restHtmlProps}
       {...mergeProps(
         themeProps('table-scroll-wrapper'),

package/src/Table/index.ts

@@ -26,6 +26,8 @@ export {useTableColumnSettings} from './plugins/columnSettings';
 export {useTableColumnSettingsState} from './plugins/columnSettings';
 export {useTableColumnResize} from './plugins/columnResize';
 export {useTableStickyColumns} from './plugins/stickyColumns';
+export {useTableGroupedRows} from './plugins/groupedRows';
+export {useTableRowIndex} from './plugins/rowIndex';
 export {
   useTableRowExpansion,
   useTableRowExpansionState,
@@ -102,6 +104,11 @@ export type {
 export type {UseTableColumnResizeConfig} from './plugins/columnResize';
 export type {UseTableStickyColumnsConfig} from './plugins/stickyColumns';
 export type {UseTableRowExpansionConfig} from './plugins/rowExpansion';
+export type {UseTableRowIndexConfig} from './plugins/rowIndex';
+export type {
+  UseTableGroupedRowsConfig,
+  UseTableGroupedRowsResult,
+} from './plugins/groupedRows';
 export type {
   UseTableFilteringConfig,
   TableFilterState,