@astryxdesign/core 0.1.6-canary.1b61ba6 → 0.1.6-canary.1d64659

package/src/Table/plugins/pagination/useTablePagination.tsx

@@ -22,7 +22,6 @@ import {spacingVars} from '../../../theme/tokens.stylex';
 import {Pagination} from '../../../Pagination';
 import type {PaginationProps} from '../../../Pagination';
 import type {TablePlugin} from '../../types';
-import {useTranslator} from '../../../i18n';
 
 // =============================================================================
 // Styles
@@ -194,7 +193,6 @@ export interface UseTablePaginationConfig {
 export function useTablePagination<T extends Record<string, unknown>>(
   config: UseTablePaginationConfig,
 ): TablePlugin<T> {
-  const t = useTranslator();
   const {
     page,
     onPageChange,
@@ -208,9 +206,8 @@ export function useTablePagination<T extends Record<string, unknown>>(
     size = 'md',
     position = 'below',
     align = 'center',
-    label: labelFromProps,
+    label = 'Table pagination',
   } = 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/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx

@@ -17,7 +17,6 @@ import * as stylex from '@stylexjs/stylex';
 import {spacingVars, colorVars, radiusVars} from '../../../theme/tokens.stylex';
 import {Icon} from '../../../Icon';
 import {resolveContextActions} from '../../tableContextMenu';
-import {useTranslator} from '../../../i18n';
 import type {
   TablePlugin,
   TableColumn,
@@ -357,7 +356,6 @@ function ExpansionChevron({
 export function useTableRowExpansion<T extends Record<string, unknown>>(
   config: UseTableRowExpansionConfig<T>,
 ): TablePlugin<T> {
-  const t = useTranslator();
   const {
     expandedKeys,
     onToggle,
@@ -399,7 +397,7 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
           <ExpansionChevron
             isExpanded={isExpanded}
             onToggle={() => onToggle(key)}
-            ariaLabel={isExpanded ? t('@astryx.tableRowExpansion.collapseRow') : t('@astryx.tableRowExpansion.expandRow')}
+            ariaLabel={isExpanded ? 'Collapse row' : 'Expand row'}
           />
         );
       },
@@ -411,7 +409,6 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
       getChildren,
       getIsItemExpandable,
       getDepth,
-      t,
     ],
   );
 
@@ -439,7 +436,10 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
                 ? originalRenderCell(item)
                 : String(
                     ((item as Record<string, unknown>)[col.key] as
-                      string | number | null | undefined) ?? '',
+                      | string
+                      | number
+                      | null
+                      | undefined) ?? '',
                   );
 
               if (depth === 0) {
@@ -457,7 +457,7 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
                 <ExpansionChevron
                   isExpanded={isExpanded}
                   onToggle={() => onToggle(key)}
-                  ariaLabel={isExpanded ? t('@astryx.tableRowExpansion.collapseRow') : t('@astryx.tableRowExpansion.expandRow')}
+                  ariaLabel={isExpanded ? 'Collapse row' : 'Expand row'}
                 />
               ) : (
                 <span {...stylex.props(expansionStyles.placeholder)} />
@@ -499,7 +499,7 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
                 {...stylex.props(expansionStyles.chevronButton)}
                 onClick={() => onToggleExpandAll(!allExpanded)}
                 aria-label={
-                  allExpanded ? t('@astryx.tableRowExpansion.collapseAllRows') : t('@astryx.tableRowExpansion.expandAllRows')
+                  allExpanded ? 'Collapse all rows' : 'Expand all rows'
                 }>
                 <span
                   {...stylex.props(
@@ -570,7 +570,7 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
             ...props.htmlProps,
             onClick: () => onToggle(key),
           },
-          xstyle: [...props.xstyle, expansionStyles.clickableRow],
+          styles: [...props.styles, expansionStyles.clickableRow],
         };
       },
     }),
@@ -585,7 +585,6 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
       isAllExpanded,
       onToggleExpandAll,
       expansionColumn,
-      t,
     ],
   );
 }

package/src/Table/plugins/selection/useTableSelection.tsx

@@ -45,9 +45,12 @@ import * as stylex from '@stylexjs/stylex';
 import {colorVars} from '../../../theme/tokens.stylex';
 import {CheckboxInput} from '../../../CheckboxInput';
 import {mergeRefs} from '../../../utils';
-import type {TablePlugin, TableColumn, BodyRowRenderProps} from '../../types';
+import type {
+  TablePlugin,
+  TableColumn,
+  BodyRowRenderProps,
+} from '../../types';
 import {pixel} from '../../columnUtils';
-import {useTranslator} from '../../../i18n';
 
 // =============================================================================
 // Config Type
@@ -178,7 +181,6 @@ function SelectAllCheckboxInner<T extends Record<string, unknown>>({
 }: {
   store: SelectionStore<T>;
 }) {
-  const t = useTranslator();
   const getSnapshot = useCallback(() => {
     const config = store.getConfig();
     const allSelected = config.getIsAllSelected();
@@ -195,7 +197,7 @@ function SelectAllCheckboxInner<T extends Record<string, unknown>>({
 
   return (
     <CheckboxInput
-      label={t('@astryx.table.selection.selectAllRows')}
+      label="Select all rows"
       isLabelHidden
       value={allSelected ? true : indeterminate ? 'indeterminate' : false}
       onChange={() =>
@@ -230,7 +232,6 @@ function SelectionCellContentInner<T extends Record<string, unknown>>({
   store: SelectionStore<T>;
   item: T;
 }) {
-  const t = useTranslator();
   const config = store.getConfig();
   const isSelected = useIsItemSelected(store, item);
   const selectable = config.getIsItemSelectable?.(item) ?? true;
@@ -242,7 +243,7 @@ function SelectionCellContentInner<T extends Record<string, unknown>>({
 
   return (
     <CheckboxInput
-      label={t('@astryx.table.selection.selectRow')}
+      label="Select row"
       isLabelHidden
       value={isSelected}
       onChange={() =>

package/src/Table/plugins/sortable/useTableSortable.tsx

@@ -18,7 +18,6 @@ import * as stylex from '@stylexjs/stylex';
 import {colorVars, spacingVars, radiusVars} from '../../../theme/tokens.stylex';
 import {Icon} from '../../../Icon';
 import {resolveContextActions} from '../../tableContextMenu';
-import {useTranslator} from '../../../i18n';
 import type {
   TablePlugin,
   HeaderCellRenderProps,
@@ -345,7 +344,6 @@ export function useTableSortable<
   T extends Record<string, unknown>,
   TSortKey extends string = string,
 >(config: UseTableSortableConfig<TSortKey>): TablePlugin<T> {
-  const t = useTranslator();
   const configRef = useRef(config);
   configRef.current = config;
 
@@ -369,13 +367,12 @@ export function useTableSortable<
         // checked/clear state always reflects the latest sort.
         const getSortActions = (): TableContextAction[] => {
           const c = configRef.current;
-          const dir =
-            c.sort.find(e => e.sortKey === sortKey)?.direction ?? null;
+          const dir = c.sort.find(e => e.sortKey === sortKey)?.direction ?? null;
           const actions: TableContextAction[] = [
             {
               id: 'sort-asc',
               group: 'sort',
-              label: t('@astryx.table.sort.ascending'),
+              label: 'Sort ascending',
               icon: <Icon icon="arrowUp" size="xsm" aria-hidden />,
               checked: dir === 'ascending',
               onSelect: () =>
@@ -386,7 +383,7 @@ export function useTableSortable<
             {
               id: 'sort-desc',
               group: 'sort',
-              label: t('@astryx.table.sort.descending'),
+              label: 'Sort descending',
               icon: <Icon icon="arrowDown" size="xsm" aria-hidden />,
               checked: dir === 'descending',
               onSelect: () =>
@@ -399,7 +396,7 @@ export function useTableSortable<
             actions.push({
               id: 'sort-clear',
               group: 'sort-clear',
-              label: t('@astryx.table.sort.clear'),
+              label: 'Clear sort',
               icon: <Icon icon="close" size="xsm" aria-hidden />,
               onSelect: () =>
                 c.onSortChange(c.sort.filter(e => e.sortKey !== sortKey)),
@@ -433,6 +430,6 @@ export function useTableSortable<
         };
       },
     }),
-    [t],
+    [],
   );
 }

package/src/Table/plugins/stickyColumns/useTableStickyColumns.tsx

@@ -337,8 +337,8 @@ export function useTableStickyColumns<T extends Record<string, unknown>>(
             ...props.htmlProps,
             style: {...props.htmlProps.style, ...offsetStyle},
           },
-          xstyle: [
-            ...props.xstyle,
+          styles: [
+            ...props.styles,
             stickyStyles.cell,
             stickyStyles.headerCell,
             side.edge === 'start' ? shadowStyles.start : shadowStyles.end,
@@ -365,8 +365,8 @@ export function useTableStickyColumns<T extends Record<string, unknown>>(
             ...props.htmlProps,
             style: {...props.htmlProps.style, ...offsetStyle},
           },
-          xstyle: [
-            ...props.xstyle,
+          styles: [
+            ...props.styles,
             stickyStyles.cell,
             stickyStyles.bodyCell,
             side.edge === 'start' ? shadowStyles.start : shadowStyles.end,

package/src/Table/types.ts

@@ -223,13 +223,13 @@ export interface TableColumn<T extends Record<string, unknown>> {
 /** Props passed through the plugin pipeline for the `<table>` element */
 export interface TableRenderProps {
   htmlProps: HTMLAttributes<HTMLTableElement>;
-  xstyle: StyleXStyles[];
+  styles: StyleXStyles[];
 }
 
 /** Props passed through the plugin pipeline for the header `<tr>` */
 export interface HeaderRowRenderProps {
   htmlProps: HTMLAttributes<HTMLTableRowElement>;
-  xstyle: StyleXStyles[];
+  styles: StyleXStyles[];
   children: ReactNode;
 }
 
@@ -250,7 +250,7 @@ export interface HeaderRowRenderProps {
  */
 export interface HeaderCellRenderProps {
   htmlProps: ThHTMLAttributes<HTMLTableCellElement>;
-  xstyle: StyleXStyles[];
+  styles: StyleXStyles[];
   /** Content rendered before the header label. */
   before?: ReactNode;
   /** The header label content. Initialized from `column.header ?? column.key`. Plugins may wrap or replace. */
@@ -286,7 +286,7 @@ export interface HeaderCellRenderProps {
 /** Props passed through the plugin pipeline for each body `<tr>` */
 export interface BodyRowRenderProps {
   htmlProps: HTMLAttributes<HTMLTableRowElement>;
-  xstyle: StyleXStyles[];
+  styles: StyleXStyles[];
   children: ReactNode;
   /** Ref for the `<tr>` element. Plugins can set this to access the row DOM node. */
   ref?: Ref<HTMLTableRowElement>;
@@ -295,7 +295,7 @@ export interface BodyRowRenderProps {
 /** Props passed through the plugin pipeline for each body `<td>` */
 export interface BodyCellRenderProps {
   htmlProps: TdHTMLAttributes<HTMLTableCellElement>;
-  xstyle: StyleXStyles[];
+  styles: StyleXStyles[];
   /**
    * Right-click context-menu actions for this body cell. Plugins append their
    * actions in `transformBodyCell`; BaseTable concatenates the arrays across
@@ -341,7 +341,7 @@ export interface ScrollWrapperRenderProps {
   htmlProps: HTMLAttributes<HTMLDivElement> & {
     ref?: Ref<HTMLDivElement>;
   };
-  xstyle: StyleXStyles[];
+  styles: StyleXStyles[];
   /** Content rendered before the `<table>`, inside the scroll container. */
   beforeTable?: ReactNode;
   /** Content rendered after the `<table>`, inside the scroll container. */
@@ -389,7 +389,8 @@ export interface TableContextAction {
  * every render.
  */
 export type TableContextActions =
-  TableContextAction[] | (() => TableContextAction[]);
+  | TableContextAction[]
+  | (() => TableContextAction[]);
 
 // =============================================================================
 // Plugin Interface
@@ -542,14 +543,7 @@ export interface BaseTableProps<
 
   /** Children mode — render `<tr>`/`<td>` directly instead of data-driven */
   children?: ReactNode;
-  /**
-   * 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`.
-   */
+  /** Additional HTML attributes for the `<table>` element */
   tableProps?: HTMLAttributes<HTMLTableElement>;
   /**
    * Optional wrapper rendered around the `<table>` element, inside the
@@ -557,15 +551,15 @@ export interface BaseTableProps<
    * horizontal scroll container so plugin chrome (pagination, toolbars)
    * stays outside the scrollable area.
    *
-   * Receives `htmlProps` (including an optional `ref`) and `xstyle` produced
+   * Receives `htmlProps` (including an optional `ref`) and `styles` produced
    * by the plugin `transformScrollWrapper` pipeline, plus `beforeTable`/`afterTable`
-   * chrome. The wrapper must spread `htmlProps` (and apply `xstyle`) onto its
+   * chrome. The wrapper must spread `htmlProps` (and apply `styles`) onto its
    * scroll-container element so plugins can attach refs / scroll listeners.
    */
   scrollWrapper?: ComponentType<{
     children: ReactNode;
     htmlProps?: HTMLAttributes<HTMLDivElement> & {ref?: Ref<HTMLDivElement>};
-    xstyle?: StyleXStyles[];
+    styles?: StyleXStyles[];
     beforeTable?: ReactNode;
     afterTable?: ReactNode;
   }>;

package/src/Table/useTableFiltering.doc.mjs

@@ -23,7 +23,7 @@ export const docs = {
     },
     {
       name: 'variant',
-      type: "'popover' | 'inline' | 'inline-compact'",
+      type: "'popover' | 'inline'",
       description: 'Display variant for filter controls.',
       default: "'popover'",
     },
@@ -50,7 +50,7 @@ export const docsZh = {
     },
     {
       name: 'variant',
-      type: "'popover' | 'inline' | 'inline-compact'",
+      type: "'popover' | 'inline'",
       description: '筛选控件的显示变体。',
       default: "'popover'",
     },

package/src/Table/useTableSortable.doc.mjs

@@ -13,20 +13,20 @@ export const docs = {
   props: [
     {
       name: 'sort',
-      type: "Array<{sortKey: TSortKey, direction: 'ascending' | 'descending'}>",
-      description: "Current sort state (TableSortState<TSortKey>). Ordered array of entries; the first is the primary sort, the rest are tiebreakers. An empty array means unsorted. Direction is the full word — 'ascending' / 'descending', not 'asc' / 'desc'.",
+      type: 'TableSortState<TSortKey>',
+      description: 'Current sort state. Ordered array of {sortKey, direction} entries. First entry is the primary sort.',
       required: true,
     },
     {
       name: 'onSortChange',
-      type: "(sort: Array<{sortKey: TSortKey, direction: 'ascending' | 'descending'}>) => void",
-      description: 'Called when the user clicks a header cell to change sort. Receives the next sort state.',
+      type: '(sort: TableSortState<TSortKey>) => void',
+      description: 'Called when the user clicks a header cell to change sort.',
       required: true,
     },
     {
       name: 'allowUnsortedState',
       type: 'boolean',
-      description: "Allow cycling back to unsorted. When true: 'ascending', 'descending', unsorted. When false: 'ascending', 'descending', 'ascending'.",
+      description: 'Allow cycling back to unsorted. When true: asc, desc, unsorted. When false: asc, desc, asc.',
       default: 'false',
     },
     {
@@ -45,20 +45,20 @@ export const docsZh = {
   props: [
     {
       name: 'sort',
-      type: "Array<{sortKey: TSortKey, direction: 'ascending' | 'descending'}>",
-      description: "当前排序状态。{sortKey, direction} 条目的有序数组。第一个条目是主排序。方向值为完整单词 'ascending' / 'descending'，不是 'asc' / 'desc'。",
+      type: 'TableSortState<TSortKey>',
+      description: '当前排序状态。{sortKey, direction} 条目的有序数组。第一个条目是主排序。',
       required: true,
     },
     {
       name: 'onSortChange',
-      type: "(sort: Array<{sortKey: TSortKey, direction: 'ascending' | 'descending'}>) => void",
+      type: '(sort: TableSortState<TSortKey>) => void',
       description: '用户点击表头单元格更改排序时调用。',
       required: true,
     },
     {
       name: 'allowUnsortedState',
       type: 'boolean',
-      description: "允许循环回到未排序状态。为 true 时：'ascending'、'descending'、未排序。为 false 时：'ascending'、'descending'、'ascending'。",
+      description: '允许循环回到未排序状态。为 true 时：升序、降序、未排序。为 false 时：升序、降序、升序。',
       default: 'false',
     },
     {
@@ -75,9 +75,9 @@ export const docsDense = {
   displayName: 'useTableSortable',
   description: 'Headless multi-sort plugin. Consumer owns sort state + callback. Shift+click for secondary sort. Sort indicators auto-render in header cells.',
   propDescriptions: {
-    sort: "Current sort state; ordered array of {sortKey, direction: 'ascending'|'descending'} entries. Not 'asc'/'desc'.",
+    sort: 'Current sort state; ordered array of {sortKey, direction} entries.',
     onSortChange: 'Called on header click to change sort.',
-    allowUnsortedState: "Allow cycling to unsorted. true: ascending>descending>unsorted. false: ascending>descending>ascending.",
+    allowUnsortedState: 'Allow cycling to unsorted. true: asc>desc>unsorted. false: asc>desc>asc.',
     isMultiSortEnabled: 'Enable multi-sort via Shift+click. Regular click replaces sort state.',
   },
 };

package/src/Text/Text.doc.mjs

@@ -23,8 +23,8 @@ export const docs = {
   props: [
     {
       name: 'type',
-      type: "'body' | 'large' | 'label' | 'supporting' | 'code' | 'display-1' | 'display-2' | 'display-3' | 'inherit'",
-      description: "Semantic text type. Determines size, weight, and line-height from the theme. 'inherit' takes all three from the surrounding text instead. Themes may add custom types. Note: this prop is called `type`, not `variant`.",
+      type: "'body' | 'large' | 'label' | 'supporting' | 'code' | 'display-1' | 'display-2' | 'display-3'",
+      description: 'Semantic text type. Determines size, weight, and line-height from the theme. Note: this prop is called `type`, not `variant`.',
       default: "'body'",
     },
     {

package/src/TextInput/TextInput.tsx

@@ -123,7 +123,6 @@ import {useInputGroup} from '../InputGroup/InputGroupContext';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 
 export type TextInputType = 'text' | 'password' | 'email';
 
@@ -299,7 +298,6 @@ export function TextInput({
   ref,
   ...rest
 }: TextInputProps) {
-  const t = useTranslator();
   const size = useSize(sizeProp, 'md');
 
   const id = useId();
@@ -450,7 +448,7 @@ export function TextInput({
         <button
           type="button"
           onClick={handleClear}
-          aria-label={t('@astryx.textInput.clearLabel', {label})}
+          aria-label={`Clear ${label}`}
           {...stylex.props(styles.clearButton)}>
           <Icon icon="close" size="sm" color="secondary" />
         </button>

package/src/Thumbnail/Thumbnail.tsx

@@ -40,7 +40,6 @@ import {useImageMode} from '../hooks/useImageMode';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 
 /** Sample the region behind the remove button (20px button, 4px inset, in 64px container). */
 const BUTTON_REGION = {x: 0.5, y: 0.06, width: 0.44, height: 0.44};
@@ -253,7 +252,6 @@ export function Thumbnail({
   ref,
   ...props
 }: ThumbnailProps) {
-  const t = useTranslator();
   const imageMode = useImageMode(src, {region: BUTTON_REGION, fallback: null});
 
   const hasSrc = src != null;
@@ -283,7 +281,7 @@ export function Thumbnail({
     onRemove != null && !isDisabled ? (
       <Button
         icon={<Icon icon="close" size="xsm" />}
-        label={t('@astryx.thumbnail.remove', {accessibleName})}
+        label={`Remove ${accessibleName}`}
         variant="secondary"
         size="sm"
         isIconOnly
@@ -317,7 +315,7 @@ export function Thumbnail({
           <button
             type="button"
             onClick={onClick}
-            aria-label={t('@astryx.thumbnail.open', {accessibleName})}
+            aria-label={`Open ${accessibleName}`}
             {...stylex.props(styles.interactiveButton)}>
             {imageContent}
           </button>

package/src/TimeInput/TimeInput.doc.mjs

@@ -225,7 +225,7 @@ export const docs = {
     },
     {
       name: 'status',
-      type: "{type: 'warning' | 'error' | 'success', message?: string}",
+      type: 'InputStatus',
       description:
         'Status indicator that colors the border and displays an icon. When a message is provided it is rendered below the input.',
     },
@@ -368,7 +368,7 @@ export const docsZh = {
     },
     {
       name: 'status',
-      type: "{type: 'warning' | 'error' | 'success', message?: string}",
+      type: 'InputStatus',
       description:
         '为边框着色并显示图标的状态指示器。当提供消息时，消息渲染在输入框下方。',
     },

package/src/TimeInput/TimeInput.tsx

@@ -69,7 +69,6 @@ import {useInputGroup} from '../InputGroup/InputGroupContext';
 import {groupStyles} from '../InputGroup/groupStyles';
 import {useTooltip} from '../Tooltip';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   icon: {
@@ -342,7 +341,7 @@ export function TimeInput({
   hasAutoFocus = false,
   hourFormat = '12h',
   increment = 1,
-  placeholder: placeholderFromProps,
+  placeholder = 'Select a time',
   size: sizeProp,
   status,
   labelTooltip,
@@ -352,9 +351,6 @@ export function TimeInput({
   style,
   ref,
 }: TimeInputProps) {
-  const t = useTranslator();
-  const placeholder =
-    placeholderFromProps ?? t('@astryx.timeInput.placeholder');
   const size = useSize(sizeProp, 'md');
 
   const id = useId();
@@ -663,7 +659,7 @@ export function TimeInput({
         <button
           type="button"
           onClick={handleClear}
-          aria-label={t('@astryx.timeInput.clearLabel', {label})}
+          aria-label={`Clear ${label}`}
           {...stylex.props(styles.clearButton)}>
           <Icon icon="close" size="sm" color="secondary" />
         </button>

package/src/Timestamp/Timestamp.doc.mjs

@@ -61,24 +61,24 @@ export const docs = {
     },
     {
       name: 'type',
-      type: "'body' | 'large' | 'label' | 'supporting' | 'code' | 'display-1' | 'display-2' | 'display-3' | 'inherit'",
+      type: 'TextType',
       description: 'Semantic text type from Text. Determines size, weight, and line-height.',
       default: "'supporting'",
     },
     {
       name: 'size',
-      type: "'4xs' | '3xs' | '2xs' | 'xsm' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'",
+      type: 'TextSize',
       description: 'Explicit font size override. Overrides the size from type.',
     },
     {
       name: 'color',
-      type: "'primary' | 'secondary' | 'disabled' | 'placeholder' | 'accent' | 'inherit'",
+      type: 'TextColor',
       description: 'Text color.',
       default: "'secondary'",
     },
     {
       name: 'weight',
-      type: "'normal' | 'medium' | 'semibold' | 'bold'",
+      type: 'TextWeight',
       description: 'Font weight override.',
     },
   ],

package/src/Toast/Toast.tsx

@@ -22,7 +22,6 @@ import {useTheme} from '../theme';
 import {MediaTheme} from '../theme/MediaTheme';
 import type {ToastType, ToastDismissReason} from './types';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   root: {
@@ -116,7 +115,6 @@ export function Toast({
   isExiting = false,
   onDismiss,
 }: ToastProps) {
-  const t = useTranslator();
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const isPausedRef = useRef(false);
   const remainingRef = useRef(autoHideDuration);
@@ -228,7 +226,7 @@ export function Toast({
               variant="ghost"
               size="sm"
               icon={<Icon icon="close" size="sm" color="inherit" />}
-              label={t('@astryx.toast.dismiss')}
+              label="Dismiss notification"
               onClick={handleDismiss}
               isIconOnly
             />

package/src/Toast/ToastViewport.tsx

@@ -17,7 +17,6 @@ import {INTERACTIVE_SELECTORS} from '../hooks/useClickableContainer';
 import {Toast} from './Toast';
 import {ToastContext, type ToastContextValue} from './ToastContext';
 import type {ToastEntry, ToastPosition, ToastDismissReason} from './types';
-import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   viewport: {
@@ -108,7 +107,6 @@ export function ToastViewport({
   isTopLayer = true,
   children,
 }: ToastViewportProps) {
-  const t = useTranslator();
   const [toasts, setToasts] = useState<ToastEntry[]>([]);
   const [exitingIds, setExitingIds] = useState<Set<string>>(new Set());
   const toastsRef = useRef(toasts);
@@ -365,7 +363,7 @@ export function ToastViewport({
       <div
         ref={viewportRef}
         role="region"
-        aria-label={t('@astryx.toast.viewport')}
+        aria-label="Notifications"
         tabIndex={-1}
         // popover="manual" promotes to the top layer (above dialogs).
         // Omitted inside dialogs where the viewport is already in a top layer.

package/src/Token/Token.tsx

@@ -34,7 +34,6 @@ import {useLinkComponent} from '../Link/useLinkComponent';
 import {useInteractiveRole} from '../hooks/useInteractiveRole';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
-import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Types
@@ -325,7 +324,6 @@ export function Token({
   'data-testid': testId,
   ref,
 }: TokenProps) {
-  const t = useTranslator();
   const LinkComponent = useLinkComponent();
   const role = useInteractiveRole({href, onClick, isDisabled});
 
@@ -344,7 +342,7 @@ export function Token({
       {onRemove != null && (
         <button
           type="button"
-          aria-label={t('@astryx.token.remove', {label})}
+          aria-label={`Remove ${label}`}
           onClick={e => {
             e.stopPropagation();
             onRemove(e);
@@ -434,7 +432,7 @@ export function Token({
         {onRemove != null && (
           <button
             type="button"
-            aria-label={t('@astryx.token.remove', {label})}
+            aria-label={`Remove ${label}`}
             onClick={e => {
               e.stopPropagation();
               onRemove(e);