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

package/src/Markdown/Markdown.tsx

@@ -56,6 +56,7 @@ import {
 } from './parser';
 import type {BlockNode, InlineNode, IncrementalState} from './parser';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator, type TranslatorFn} from '../i18n';
 
 type SyncReactNode = Exclude<React.ReactNode, Promise<unknown>>;
 
@@ -1041,8 +1042,9 @@ function renderBlock(
   contentWidthValue: string | null,
   contentAlign: 'start' | 'center',
   linkComponent: LinkComponentType = 'a',
-  inlinePlugins?: MarkdownInlinePlugin[],
-  components?: Partial<MarkdownComponents>,
+  inlinePlugins: MarkdownInlinePlugin[] | undefined,
+  components: Partial<MarkdownComponents> | undefined,
+  t: TranslatorFn,
 ): SyncReactNode {
   const blockAlignMargin = BLOCK_ALIGN_MARGIN[contentAlign];
   const blockAlignStyle =
@@ -1197,6 +1199,7 @@ function renderBlock(
             linkComponent,
             inlinePlugins,
             components,
+            t,
           ),
         );
         return <BlockquoteComp key={index}>{bqC}</BlockquoteComp>;
@@ -1230,6 +1233,7 @@ function renderBlock(
               linkComponent,
               inlinePlugins,
               components,
+              t,
             ),
           )}
         </Blockquote>
@@ -1256,7 +1260,7 @@ function renderBlock(
               isLast && styles.noMarginBlockEnd,
             )}>
             <CheckboxList
-              label="Task list"
+              label={t('@astryx.markdown.taskList')}
               isLabelHidden
               value={checkedValues}
               xstyle={styles.blockIndent}
@@ -1300,6 +1304,7 @@ function renderBlock(
                         linkComponent,
                         inlinePlugins,
                         components,
+                        t,
                       ),
                     )}
                   </>
@@ -1378,6 +1383,7 @@ function renderBlock(
                       linkComponent,
                       inlinePlugins,
                       components,
+                      t,
                     ),
                   )}
                 </>
@@ -1407,7 +1413,7 @@ function renderBlock(
           // (axe: landmark-unique).
           tabIndex={0}
           role="group"
-          aria-label="Table"
+          aria-label={t('@astryx.markdown.table')}
           {...stylex.props(
             styles.tableWrapper,
             spacing,
@@ -1567,6 +1573,7 @@ export function Markdown({
   style,
   'data-testid': testId,
 }: MarkdownProps): React.ReactElement {
+  const t = useTranslator();
   const LinkComponent = useLinkComponent();
   // Derive the set of source IDs for the parser (stable across renders when sources don't change)
   const sourceIds = useMemo(
@@ -1725,6 +1732,7 @@ export function Markdown({
           LinkComponent,
           inlinePlugins,
           components,
+          t,
         ),
       )}
     </div>

package/src/MobileNav/MobileNav.tsx

@@ -49,6 +49,7 @@ import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
 import {mergeProps, mergeRefs, composeEventHandlers} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Styles
@@ -290,6 +291,7 @@ export function MobileNav({
   ref,
   ...rest
 }: MobileNavProps) {
+  const t = useTranslator();
   // Read from AppShell context as fallback
   const appShellMobile = useAppShellMobile();
   const isOpen = isOpenProp ?? appShellMobile.isMobileNavOpen;
@@ -423,7 +425,7 @@ export function MobileNav({
       )}
       {...rest}
       data-testid={testId}
-      aria-label={label ?? (typeof header === 'string' ? header : 'Navigation')}
+      aria-label={label ?? (typeof header === 'string' ? header : t('@astryx.mobileNav.navigation'))}
       onClick={composeEventHandlers(onClickProp, handleDialogClick)}
       onCancel={handleCancel}>
       {/* Drawer panel — tabIndex so showModal() focuses the drawer, not the close button */}
@@ -448,7 +450,7 @@ export function MobileNav({
           )}
           <Button
             variant="ghost"
-            label="Close navigation"
+            label={t('@astryx.mobileNav.closeNavigation')}
             icon={<Icon icon="close" color="inherit" />}
             onClick={() => onOpenChange(false)}
             isIconOnly

package/src/MobileNav/MobileNavToggle.tsx

@@ -18,6 +18,7 @@ import {Button} from '../Button';
 import {Icon} from '../Icon';
 import {useAppShellMobile} from '../AppShell/AppShellMobileContext';
 import type {BaseProps} from '../BaseProps';
+import {useTranslator} from '../i18n';
 
 export interface MobileNavToggleProps extends Pick<
   BaseProps,
@@ -60,14 +61,15 @@ export interface MobileNavToggleProps extends Pick<
 export function MobileNavToggle({
   ref,
   children,
-  label = 'Open navigation',
+  label: labelFromProps,
   'data-testid': testId,
   xstyle,
   className,
   style,
 }: MobileNavToggleProps) {
-  const {isMobile, isMobileNavEnabled, toggleMobileNav} =
-    useAppShellMobile();
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.mobileNav.toggle.open');
+  const {isMobile, isMobileNavEnabled, toggleMobileNav} = useAppShellMobile();
 
   // Don't render above the breakpoint or when mobile nav is disabled
   if (!isMobile || !isMobileNavEnabled) {

package/src/MoreMenu/MoreMenu.tsx

@@ -26,6 +26,7 @@ import type {DropdownMenuOption} from '../DropdownMenu';
 import type {ButtonVariant, ButtonSize} from '../Button';
 import type {BaseProps} from '../BaseProps';
 import {stableClassName} from '../naming';
+import {useTranslator} from '../i18n';
 
 export interface MoreMenuProps extends Pick<
   BaseProps,
@@ -102,7 +103,7 @@ export interface MoreMenuProps extends Pick<
  */
 export function MoreMenu({
   items,
-  label = 'More options',
+  label: labelFromProps,
   variant = 'ghost',
   size: sizeProp,
   icon,
@@ -115,6 +116,8 @@ export function MoreMenu({
   'data-testid': testId,
   ref,
 }: MoreMenuProps) {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.moreMenu.label');
   const size = useSize(sizeProp, 'md');
   const moreIcon = getIcon('moreHorizontal');
 

package/src/MultiSelector/MultiSelector.tsx

@@ -76,6 +76,7 @@ import {themeProps} from '../utils/themeProps';
 import {groupStyles} from '../InputGroup/groupStyles';
 import {useInputGroup} from '../InputGroup/InputGroupContext';
 import {VisuallyHidden} from '../VisuallyHidden';
+import {useTranslator} from '../i18n';
 
 // Sentinel value for the select-all item in keyboard navigation
 const SELECT_ALL_VALUE = '__xds_select_all__';
@@ -589,16 +590,16 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
   onChange,
   changeAction,
   isLoading = false,
-  placeholder = 'Select...',
+  placeholder: placeholderFromProps,
   size: sizeProp,
   status,
   labelTooltip,
   startIcon,
   hasClear = false,
   hasSelectAll = false,
-  selectAllLabel = 'Select all',
+  selectAllLabel: selectAllLabelFromProps,
   hasSearch = false,
-  searchPlaceholder = 'Search...',
+  searchPlaceholder: searchPlaceholderFromProps,
   triggerDisplay = 'count',
   maxBadges = 3,
   renderOption,
@@ -610,6 +611,13 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
   className,
   style,
 }: MultiSelectorProps<T>) {
+  const t = useTranslator();
+  const placeholder =
+    placeholderFromProps ?? t('@astryx.multiSelector.selectPlaceholder');
+  const selectAllLabel =
+    selectAllLabelFromProps ?? t('@astryx.multiSelector.selectAll');
+  const searchPlaceholder =
+    searchPlaceholderFromProps ?? t('@astryx.multiSelector.searchPlaceholder');
   const size = useSize(sizeProp, 'md');
   const triggerId = useId();
   const listboxId = useId();
@@ -1030,7 +1038,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
               ? getItemId(highlightedIndex)
               : undefined
           }
-          aria-label="Search options"
+          aria-label={t('@astryx.multiSelector.searchOptions')}
           type="text"
           value={searchQuery}
           onChange={e => setSearchQuery(e.target.value)}
@@ -1063,6 +1071,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
     popover.isOpen,
     highlightedIndex,
     getItemId,
+    t,
   ]);
 
   // Render an individual item (index-based)
@@ -1305,7 +1314,7 @@ export function MultiSelector<T extends MultiSelectorOptionType>({
           <button
             type="button"
             onClick={handleClear}
-            aria-label={`Clear all ${label}`}
+            aria-label={t('@astryx.multiSelector.clearAll', {label})}
             {...stylex.props(styles.clearButton)}>
             <Icon icon="close" size="sm" color="secondary" />
           </button>

package/src/NumberInput/NumberInput.tsx

@@ -135,6 +135,7 @@ import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 interface NumberInputPropsBase extends Omit<
   BaseProps,
@@ -399,6 +400,7 @@ export function NumberInput({
   ref,
   ...rest
 }: NumberInputProps) {
+  const t = useTranslator();
   const size = useSize(sizeProp, 'md');
   const id = useId();
   const inputLabelID = useId();
@@ -663,7 +665,7 @@ export function NumberInput({
         <button
           type="button"
           onClick={handleClear}
-          aria-label={`Clear ${label}`}
+          aria-label={t('@astryx.numberInput.clearLabel', {label})}
           {...stylex.props(styles.clearButton)}>
           <Icon icon="close" size="sm" color="secondary" />
         </button>

package/src/Outline/Outline.tsx

@@ -37,6 +37,7 @@ import type {BaseProps} from '../BaseProps';
 import {useScrollSpy} from './useScrollSpy';
 import type {OutlineItem} from './types';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export type {OutlineItem} from './types';
 
@@ -236,7 +237,7 @@ export function Outline({
   items,
   activeId,
   onActiveIdChange,
-  label = 'Table of contents',
+  label: labelFromProps,
   density = 'default',
   xstyle,
   className,
@@ -245,6 +246,8 @@ export function Outline({
   'data-testid': testId,
   ...props
 }: OutlineProps) {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.outline.label');
   const rootRef = useRef<HTMLElement | null>(null);
   const LinkComponent = useLinkComponent();
   const isControlled = activeId !== undefined;

package/src/OverflowList/OverflowList.doc.mjs

@@ -50,7 +50,7 @@ export const docs = {
     },
     {
       name: 'gap',
-      type: 'SpacingStep',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description:
         'Gap between items as a spacing token step (0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10).',
       default: '2',
@@ -116,7 +116,7 @@ export const docsZh = {
     },
     {
       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）。',
       default: '2',

package/src/Pagination/Pagination.tsx

@@ -39,6 +39,7 @@ import {useListFocus} from '../hooks/useListFocus';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n/useTranslator';
 
 // =============================================================================
 // Types
@@ -344,7 +345,7 @@ export function Pagination({
   siblingCount = 1,
   size = 'md',
   isDisabled = false,
-  label = 'Pagination',
+  label: labelFromProps,
   'data-testid': testId,
   xstyle,
   className,
@@ -354,6 +355,14 @@ export function Pagination({
 }: PaginationProps) {
   const [, startTransition] = useTransition();
 
+  // Resolve system strings once per render. Prop overrides win.
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.pagination.label');
+  const previousLabel = t('@astryx.pagination.previous');
+  const nextLabel = t('@astryx.pagination.next');
+  const pageIndicatorsLabel = t('@astryx.pagination.pageIndicators');
+  const itemsPerPageLabel = t('@astryx.pagination.itemsPerPage');
+
   // pageSize is typed as number, so 0, NaN, and negatives are valid at the
   // type level but yield Infinity/NaN page counts, and
   // Array.from({length: Infinity}) crashes the dots variant. Coerce to a
@@ -418,8 +427,11 @@ export function Pagination({
     onChange(newPage);
     announce(
       computedTotalPages != null
-        ? `Page ${newPage} of ${computedTotalPages}`
-        : `Page ${newPage}`,
+        ? t('@astryx.pagination.pageOfTotal', {
+            current: newPage,
+            total: computedTotalPages,
+          })
+        : t('@astryx.pagination.pageAnnounce', {current: newPage}),
     );
     startTransition(async () => {
       setOptimisticPage(newPage);
@@ -511,8 +523,10 @@ export function Pagination({
               return (
                 <Button
                   key={item}
-                  label={`Go to page ${item}`}
-                  aria-label={`Go to page ${item}`}
+                  label={t('@astryx.pagination.goToPage', {page: item})}
+                  aria-label={t('@astryx.pagination.goToPage', {
+                    page: item,
+                  })}
                   variant="ghost"
                   size={buttonSize}
                   onClick={() => handlePageChange(item)}
@@ -534,7 +548,11 @@ export function Pagination({
         return (
           <span {...stylex.props(styles.infoText)}>
             <Text type="body" size="sm" color="secondary">
-              {`${rangeStart}\u2013${rangeEnd} of ${totalItems}`}
+              {t('@astryx.pagination.count', {
+                from: rangeStart,
+                to: rangeEnd,
+                total: totalItems,
+              })}
             </Text>
           </span>
         );
@@ -547,7 +565,10 @@ export function Pagination({
         return (
           <span {...stylex.props(styles.infoText)}>
             <Text type="body" size="sm" color="secondary">
-              {`Page ${optimisticPage} of ${computedTotalPages}`}
+              {t('@astryx.pagination.pageOfTotal', {
+                current: optimisticPage,
+                total: computedTotalPages,
+              })}
             </Text>
           </span>
         );
@@ -563,7 +584,7 @@ export function Pagination({
             ref={dotsListRef}
             {...stylex.props(styles.dotsContainer)}
             role="group"
-            aria-label="Page indicators"
+            aria-label={pageIndicatorsLabel}
             onKeyDown={handleDotsKeyDown}
             onFocus={handleDotsFocus}>
             {Array.from({length: computedTotalPages}, (_, i) => {
@@ -573,7 +594,9 @@ export function Pagination({
                   key={i + 1}
                   type="button"
                   data-page={i + 1}
-                  aria-label={`Go to page ${i + 1}`}
+                  aria-label={t('@astryx.pagination.goToPage', {
+                    page: i + 1,
+                  })}
                   aria-current={isActive ? 'page' : undefined}
                   // The active dot is the single roving tab stop; useListFocus
                   // maintains it as focus and the active page move.
@@ -624,7 +647,7 @@ export function Pagination({
         <div {...stylex.props(styles.pageSizeSelector)}>
           <div {...stylex.props(styles.pageSizeSelectorControl)}>
             <Selector
-              label="Items per page"
+              label={itemsPerPageLabel}
               isLabelHidden
               options={pageSizeOptions.map(opt => String(opt))}
               value={String(pageSize)}
@@ -637,7 +660,7 @@ export function Pagination({
       )}
       <div {...stylex.props(styles.controls)}>
         <Button
-          label="Go to previous page"
+          label={previousLabel}
           variant="ghost"
           size={buttonSize}
           icon={<Icon icon="chevronLeft" size={isSm ? 'sm' : 'md'} />}
@@ -649,7 +672,7 @@ export function Pagination({
         {renderIndicator()}
 
         <Button
-          label="Go to next page"
+          label={nextLabel}
           variant="ghost"
           size={buttonSize}
           icon={<Icon icon="chevronRight" size={isSm ? 'sm' : 'md'} />}

package/src/Popover/usePopover.tsx

@@ -27,6 +27,7 @@ import {
   shadowVars,
 } from '../theme/tokens.stylex';
 import {Button} from '../Button';
+import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   // Default popover surface — background, radius, shadow.
@@ -309,12 +310,16 @@ export function usePopover(options: UsePopoverOptions = {}): UsePopoverReturn {
     hasAutoFocus = true,
     hasSurface = true,
     hasCloseButton = true,
-    closeButtonLabel = 'Close popover',
+    closeButtonLabel: closeButtonLabelFromProps,
     dialogLabel,
     role = 'dialog',
     isModal = true,
   } = options;
 
+  const t = useTranslator();
+  const closeButtonLabel =
+    closeButtonLabelFromProps ?? t('@astryx.popover.close');
+
   // Track the trigger element for returning focus
   const triggerElementRef = useRef<HTMLElement | null>(null);
 

package/src/PowerSearch/PowerSearch.doc.mjs

@@ -23,7 +23,7 @@ export const docs = {
     },
     {
       name: 'onChange',
-      type: '(filters: ReadonlyArray<PowerSearchFilter>, changeType: PowerSearchChangeType, index: number) => void',
+      type: "(filters: ReadonlyArray<PowerSearchFilter>, changeType: 'add' | 'edit' | 'remove', index: number) => void",
       description:
         "Called when filters change. changeType is 'add', 'edit', or 'remove'. index is the affected filter's position.",
       required: true,
@@ -79,7 +79,7 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description:
         'Validation status object with type and optional message.',
     },
@@ -145,6 +145,11 @@ export const docs = {
       { guidance: false, description: 'Wrap a disabled PowerSearch in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.' },
     ],
   },
+  theming: {
+    targets: [
+      {className: 'astryx-power-search'},
+    ],
+  },
 };
 
 // -------------------------------------------------------
@@ -172,7 +177,7 @@ export const docsZh = {
     },
     {
       name: 'onChange',
-      type: '(filters: ReadonlyArray<PowerSearchFilter>, changeType: PowerSearchChangeType, index: number) => void',
+      type: "(filters: ReadonlyArray<PowerSearchFilter>, changeType: 'add' | 'edit' | 'remove', index: number) => void",
       description:
         "当过滤器变更时调用。changeType 为 'add'、'edit' 或 'remove'。index 为受影响的过滤器位置。",
       required: true,
@@ -227,7 +232,7 @@ export const docsZh = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description: '带有类型和可选消息的验证状态对象。',
     },
     {

package/src/PowerSearch/PowerSearch.tsx

@@ -52,7 +52,9 @@ import {useInternalConfig} from './useInternalConfig';
 import {usePowerSearchSource} from './usePowerSearchSource';
 import {formatFilterValue} from './formatFilterValue';
 import {PowerSearchEditPopover} from './PowerSearchEditPopover';
+import {resolveOperatorLabel} from './resolveOperatorLabel';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 import type {
   PowerSearchConfig,
   PowerSearchFilter,
@@ -513,9 +515,9 @@ export function PowerSearch({
   config: configProp,
   filters,
   onChange,
-  label = 'Search',
+  label: labelFromProps,
   isLabelHidden = true,
-  placeholder = 'Search...',
+  placeholder: placeholderFromProps,
   hasAutoFocus = false,
   hasClear = true,
   isReadOnly = false,
@@ -526,7 +528,7 @@ export function PowerSearch({
   onBlur,
   status,
   maxTokenLength = 40,
-  popoverSaveButtonLabel = 'Apply',
+  popoverSaveButtonLabel: popoverSaveButtonLabelFromProps,
   timezoneID,
   tokenOverflowBehavior,
   endContent,
@@ -543,6 +545,12 @@ export function PowerSearch({
   const size = useSize(sizeProp, 'md');
   const config = useInternalConfig(configProp);
   const searchSource = usePowerSearchSource(config);
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.powersearch.label');
+  const placeholder =
+    placeholderFromProps ?? t('@astryx.powersearch.placeholder');
+  const popoverSaveButtonLabel =
+    popoverSaveButtonLabelFromProps ?? t('@astryx.powersearch.editor.apply');
   const tokenizerRef = useRef<TokenizerHandle>(null);
 
   const [popoverState, setPopoverStateRaw] = useState<PopoverState>({
@@ -598,13 +606,15 @@ export function PowerSearch({
     return filters.map((filter, index) => {
       const field = config.getField(filter.field);
       const operator = config.getOperator(filter.field, filter.operator);
-      const operatorLabel = operator?.label ? `: ${operator.label}` : '';
+      const resolvedOp = operator ? resolveOperatorLabel(operator, t) : '';
+      const operatorLabel = resolvedOp ? `: ${resolvedOp}` : '';
       const valueStr = operator
         ? formatFilterValue(
             config,
             operator.value,
             filter.value,
             maxTokenLength,
+            t,
             timezoneID,
           )
         : '';
@@ -624,7 +634,7 @@ export function PowerSearch({
         },
       };
     });
-  }, [filters, config, maxTokenLength, timezoneID]);
+  }, [filters, config, maxTokenLength, timezoneID, t]);
 
   // Handle tokenizer onChange (field selected from typeahead)
   const handleTokenizerChange = useCallback(
@@ -787,7 +797,7 @@ export function PowerSearch({
 
       // Default token rendering
       const fieldLabel = field?.label ?? '';
-      const operatorLabel = operator?.label ?? '';
+      const operatorLabel = operator ? resolveOperatorLabel(operator, t) : '';
       const tokenLabel = `${fieldLabel}: ${operatorLabel}`.trim();
       const adjustedMaxLength = Math.max(
         maxTokenLength - fieldLabel.length - operatorLabel.length,
@@ -843,6 +853,7 @@ export function PowerSearch({
       isDisabled,
       handleTokenClick,
       componentOverrides,
+      t,
     ],
   );
 
@@ -948,17 +959,18 @@ export function PowerSearch({
   ]);
 
   // Plain-text form of the result count, shared by the visible label and the
-  // screen-reader announcement so the two never drift.
+  // screen-reader announcement so the two never drift. The ICU plural handles
+  // the number formatting + `result` vs `results` in one message so translators
+  // can match the locale's plural rules.
   const resultCountText = useMemo((): string | null => {
     if (resultCount == null) {
       return null;
     }
     if (typeof resultCount === 'number') {
-      const formatted = new Intl.NumberFormat().format(resultCount);
-      return `${formatted} ${resultCount === 1 ? 'result' : 'results'}`;
+      return t('@astryx.powersearch.resultCount', {count: resultCount});
     }
     return resultCount;
-  }, [resultCount]);
+  }, [resultCount, t]);
 
   // Announce result-count changes to screen readers through a polite live
   // region, mirroring the way Typeahead announces its dropdown result count.