@astryxdesign/core 0.1.6 → 0.1.7-canary.04cd8f7

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.

package/src/PowerSearch/PowerSearchEditPopover.tsx

@@ -19,8 +19,10 @@ import {Selector} from '../Selector';
 import {HStack, VStack} from '../Stack';
 import {Icon} from '../Icon';
 import {TreeList, type TreeListItemData} from '../TreeList';
+import {useTranslator} from '../i18n';
 import {spacingVars, typeScaleVars} from '../theme/tokens.stylex';
 import {PowerSearchValueEditor} from './PowerSearchValueEditor';
+import {resolveOperatorLabel} from './resolveOperatorLabel';
 import type {InternalConfig} from './useInternalConfig';
 import type {
   PowerSearchFilter,
@@ -238,6 +240,7 @@ function NestedSubFilterRow({
   onChange,
   isReadOnly,
 }: NestedSubFilterRowProps) {
+  const t = useTranslator();
   const fieldOptions = useMemo(
     () =>
       config.getVisibleFields().map(field => ({
@@ -251,9 +254,9 @@ function NestedSubFilterRow({
     const operators = config.getVisibleOperators(subFilter.field);
     return operators.map(op => ({
       value: op.key,
-      label: op.label,
+      label: resolveOperatorLabel(op, t),
     }));
-  }, [config, subFilter.field]);
+  }, [config, subFilter.field, t]);
 
   const currentOperator = subFilter.operator
     ? config.getOperator(subFilter.field, subFilter.operator)
@@ -308,7 +311,7 @@ function NestedSubFilterRow({
     <HStack gap={2} vAlign="center">
       <div {...stylex.props(styles.nestedFieldSelector)}>
         <Selector
-          label="Field"
+          label={t('@astryx.powersearch.editor.field')}
           isLabelHidden
           options={fieldOptions}
           value={subFilter.field}
@@ -320,7 +323,7 @@ function NestedSubFilterRow({
       {operatorOptions.length > 0 && (
         <div {...stylex.props(styles.nestedOperatorSelector)}>
           <Selector
-            label="Operator"
+            label={t('@astryx.powersearch.editor.operator')}
             isLabelHidden
             options={operatorOptions}
             value={subFilter.operator}
@@ -366,6 +369,7 @@ function NestedEditor({
   onPartialFilterChange,
   isReadOnly,
 }: NestedEditorProps) {
+  const t = useTranslator();
   const [subFilters, setSubFilters] = useState<EditablePartialFilter[]>(() => {
     if (partialFilter.value && partialFilter.value.type === 'nested') {
       return partialFilter.value.value.map(f => initEditableFilter(config, f));
@@ -468,7 +472,7 @@ function NestedEditor({
             id: `${itemPath.join('-')}-add`,
             label: (
               <Button
-                label="+ Add filter"
+                label={t('@astryx.powersearch.editor.addFilter')}
                 onClick={() => handleAdd(itemPath)}
                 variant="ghost"
                 size="sm"
@@ -491,7 +495,7 @@ function NestedEditor({
           children,
           endContent: !isReadOnly ? (
             <Button
-              label="Remove filter"
+              label={t('@astryx.powersearch.editor.removeFilter')}
               icon={<Icon icon="close" size="sm" />}
               variant="ghost"
               size="sm"
@@ -515,7 +519,7 @@ function NestedEditor({
         ),
         endContent: !isReadOnly ? (
           <Button
-            label="Remove filter"
+            label={t('@astryx.powersearch.editor.removeFilter')}
             icon={<Icon icon="close" size="sm" />}
             variant="ghost"
             size="sm"
@@ -536,7 +540,7 @@ function NestedEditor({
       id: 'add-filter',
       label: (
         <Button
-          label="+ Add filter"
+          label={t('@astryx.powersearch.editor.addFilter')}
           onClick={() => handleAdd([])}
           variant="ghost"
           size="sm"
@@ -550,7 +554,7 @@ function NestedEditor({
       {operatorOptions.length > 1 ? (
         <div {...stylex.props(styles.operatorSelector)}>
           <Selector
-            label="Group operator"
+            label={t('@astryx.powersearch.editor.groupOperator')}
             isLabelHidden
             options={operatorOptions}
             value={partialFilter.operator}
@@ -560,7 +564,7 @@ function NestedEditor({
           />
         </div>
       ) : (
-        (operatorOptions[0]?.label ?? 'Group')
+        (operatorOptions[0]?.label ?? t('@astryx.powersearch.editor.group'))
       )}
     </div>
   );
@@ -587,9 +591,12 @@ export function PowerSearchEditPopover({
   mode,
   onSave,
   onCancel,
-  saveButtonLabel = 'Apply',
+  saveButtonLabel: saveButtonLabelFromProps,
   isReadOnly = false,
 }: PowerSearchEditPopoverProps) {
+  const t = useTranslator();
+  const saveButtonLabel =
+    saveButtonLabelFromProps ?? t('@astryx.powersearch.editor.apply');
   const [partialFilter, setPartialFilter] =
     useState<PartialFilter>(initialFilter);
   const valueEditorRef = useRef<HTMLDivElement>(null);
@@ -628,9 +635,9 @@ export function PowerSearchEditPopover({
     const operators = config.getVisibleOperators(partialFilter.field);
     return operators.map(op => ({
       value: op.key,
-      label: op.label,
+      label: resolveOperatorLabel(op, t),
     }));
-  }, [config, partialFilter.field]);
+  }, [config, partialFilter.field, t]);
 
   const handleFieldChange = useCallback(
     (fieldKey: string) => {
@@ -732,7 +739,7 @@ export function PowerSearchEditPopover({
             <HStack gap={2}>
               <div {...stylex.props(styles.fieldSelector)}>
                 <Selector
-                  label="Field"
+                  label={t('@astryx.powersearch.editor.field')}
                   isLabelHidden
                   options={fieldOptions}
                   value={partialFilter.field}
@@ -756,7 +763,7 @@ export function PowerSearchEditPopover({
           <HStack gap={2} hAlign="between">
             {!isReadOnly && mode === 'edit' ? (
               <Button
-                label="Delete"
+                label={t('@astryx.powersearch.editor.delete')}
                 onClick={handleDelete}
                 variant="ghost"
                 size="sm"
@@ -766,7 +773,7 @@ export function PowerSearchEditPopover({
             )}
             <HStack gap={2}>
               <Button
-                label="Cancel"
+                label={t('@astryx.powersearch.editor.cancel')}
                 onClick={onCancel}
                 variant="ghost"
                 size="sm"
@@ -791,7 +798,7 @@ export function PowerSearchEditPopover({
         <HStack gap={2}>
           <div {...stylex.props(styles.fieldSelector)}>
             <Selector
-              label="Field"
+              label={t('@astryx.powersearch.editor.field')}
               isLabelHidden
               options={fieldOptions}
               value={partialFilter.field}
@@ -803,7 +810,7 @@ export function PowerSearchEditPopover({
           {showOperatorSelector && operatorOptions.length > 0 && (
             <div {...stylex.props(styles.operatorSelector)}>
               <Selector
-                label="Operator"
+                label={t('@astryx.powersearch.editor.operator')}
                 isLabelHidden
                 options={operatorOptions}
                 value={partialFilter.operator}
@@ -832,7 +839,7 @@ export function PowerSearchEditPopover({
           <HStack gap={2} hAlign="between">
             {!isReadOnly && mode === 'edit' ? (
               <Button
-                label="Delete"
+                label={t('@astryx.powersearch.editor.delete')}
                 onClick={handleDelete}
                 variant="ghost"
                 size="sm"
@@ -842,7 +849,7 @@ export function PowerSearchEditPopover({
             )}
             <HStack gap={2}>
               <Button
-                label="Cancel"
+                label={t('@astryx.powersearch.editor.cancel')}
                 onClick={onCancel}
                 variant="ghost"
                 size="sm"

package/src/PowerSearch/PowerSearchToken.tsx

@@ -12,8 +12,10 @@
 import React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Token} from '../Token';
+import {useTranslator} from '../i18n';
 import {fontWeightVars} from '../theme/tokens.stylex';
 import {formatFilterValue} from './formatFilterValue';
+import {resolveOperatorLabel} from './resolveOperatorLabel';
 import {useInternalConfig} from './useInternalConfig';
 import type {PowerSearchTokenProps} from './types';
 
@@ -41,13 +43,17 @@ export function PowerSearchToken({
   isDisabled,
 }: PowerSearchTokenProps) {
   const config = useInternalConfig(configProp);
+  const t = useTranslator();
 
   const fieldLabel = field.label;
-  const operatorLabel = operator.label ? `: ${operator.label}` : '';
+  const resolvedOperatorLabel = resolveOperatorLabel(operator, t);
+  const operatorLabel = resolvedOperatorLabel
+    ? `: ${resolvedOperatorLabel}`
+    : '';
   const tokenLabel = `${fieldLabel}${operatorLabel}`;
 
   const adjustedMaxLength = Math.max(
-    maxLength - fieldLabel.length - (operator.label?.length ?? 0),
+    maxLength - fieldLabel.length - resolvedOperatorLabel.length,
     10,
   );
 
@@ -56,6 +62,7 @@ export function PowerSearchToken({
     operator.value,
     filter.value,
     adjustedMaxLength,
+    t,
   );
 
   const valueContent = valueStr ? (
@@ -66,10 +73,14 @@ export function PowerSearchToken({
     <Token
       label={tokenLabel}
       endContent={valueContent}
-      onClick={onClick ? (e: React.MouseEvent) => {
-        e.stopPropagation();
-        onClick();
-      } : undefined}
+      onClick={
+        onClick
+          ? (e: React.MouseEvent) => {
+              e.stopPropagation();
+              onClick();
+            }
+          : undefined
+      }
       onRemove={onRemove}
       isDisabled={isDisabled}
     />