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

package/src/OverflowList/OverflowList.doc.mjs

@@ -50,7 +50,7 @@ export const docs = {
     },
     {
       name: 'gap',
-      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      type: 'SpacingStep',
       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: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
+      type: 'SpacingStep',
       description:
         '项目间距，使用间距步进值（0、0.5、1、1.5、2、3、4、5、6、8、10）。',
       default: '2',

package/src/Pagination/Pagination.tsx

@@ -39,7 +39,6 @@ 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
@@ -345,7 +344,7 @@ export function Pagination({
   siblingCount = 1,
   size = 'md',
   isDisabled = false,
-  label: labelFromProps,
+  label = 'Pagination',
   'data-testid': testId,
   xstyle,
   className,
@@ -355,14 +354,6 @@ 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
@@ -427,11 +418,8 @@ export function Pagination({
     onChange(newPage);
     announce(
       computedTotalPages != null
-        ? t('@astryx.pagination.pageOfTotal', {
-            current: newPage,
-            total: computedTotalPages,
-          })
-        : t('@astryx.pagination.pageAnnounce', {current: newPage}),
+        ? `Page ${newPage} of ${computedTotalPages}`
+        : `Page ${newPage}`,
     );
     startTransition(async () => {
       setOptimisticPage(newPage);
@@ -523,10 +511,8 @@ export function Pagination({
               return (
                 <Button
                   key={item}
-                  label={t('@astryx.pagination.goToPage', {page: item})}
-                  aria-label={t('@astryx.pagination.goToPage', {
-                    page: item,
-                  })}
+                  label={`Go to page ${item}`}
+                  aria-label={`Go to page ${item}`}
                   variant="ghost"
                   size={buttonSize}
                   onClick={() => handlePageChange(item)}
@@ -548,11 +534,7 @@ export function Pagination({
         return (
           <span {...stylex.props(styles.infoText)}>
             <Text type="body" size="sm" color="secondary">
-              {t('@astryx.pagination.count', {
-                from: rangeStart,
-                to: rangeEnd,
-                total: totalItems,
-              })}
+              {`${rangeStart}\u2013${rangeEnd} of ${totalItems}`}
             </Text>
           </span>
         );
@@ -565,10 +547,7 @@ export function Pagination({
         return (
           <span {...stylex.props(styles.infoText)}>
             <Text type="body" size="sm" color="secondary">
-              {t('@astryx.pagination.pageOfTotal', {
-                current: optimisticPage,
-                total: computedTotalPages,
-              })}
+              {`Page ${optimisticPage} of ${computedTotalPages}`}
             </Text>
           </span>
         );
@@ -584,7 +563,7 @@ export function Pagination({
             ref={dotsListRef}
             {...stylex.props(styles.dotsContainer)}
             role="group"
-            aria-label={pageIndicatorsLabel}
+            aria-label="Page indicators"
             onKeyDown={handleDotsKeyDown}
             onFocus={handleDotsFocus}>
             {Array.from({length: computedTotalPages}, (_, i) => {
@@ -594,9 +573,7 @@ export function Pagination({
                   key={i + 1}
                   type="button"
                   data-page={i + 1}
-                  aria-label={t('@astryx.pagination.goToPage', {
-                    page: i + 1,
-                  })}
+                  aria-label={`Go to 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.
@@ -647,7 +624,7 @@ export function Pagination({
         <div {...stylex.props(styles.pageSizeSelector)}>
           <div {...stylex.props(styles.pageSizeSelectorControl)}>
             <Selector
-              label={itemsPerPageLabel}
+              label="Items per page"
               isLabelHidden
               options={pageSizeOptions.map(opt => String(opt))}
               value={String(pageSize)}
@@ -660,7 +637,7 @@ export function Pagination({
       )}
       <div {...stylex.props(styles.controls)}>
         <Button
-          label={previousLabel}
+          label="Go to previous page"
           variant="ghost"
           size={buttonSize}
           icon={<Icon icon="chevronLeft" size={isSm ? 'sm' : 'md'} />}
@@ -672,7 +649,7 @@ export function Pagination({
         {renderIndicator()}
 
         <Button
-          label={nextLabel}
+          label="Go to next page"
           variant="ghost"
           size={buttonSize}
           icon={<Icon icon="chevronRight" size={isSm ? 'sm' : 'md'} />}

package/src/Popover/usePopover.tsx

@@ -27,7 +27,6 @@ import {
   shadowVars,
 } from '../theme/tokens.stylex';
 import {Button} from '../Button';
-import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   // Default popover surface — background, radius, shadow.
@@ -310,16 +309,12 @@ export function usePopover(options: UsePopoverOptions = {}): UsePopoverReturn {
     hasAutoFocus = true,
     hasSurface = true,
     hasCloseButton = true,
-    closeButtonLabel: closeButtonLabelFromProps,
+    closeButtonLabel = 'Close popover',
     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: 'add' | 'edit' | 'remove', index: number) => void",
+      type: '(filters: ReadonlyArray<PowerSearchFilter>, changeType: PowerSearchChangeType, 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: "{type: 'warning' | 'error' | 'success', message?: string}",
+      type: 'InputStatus',
       description:
         'Validation status object with type and optional message.',
     },
@@ -177,7 +177,7 @@ export const docsZh = {
     },
     {
       name: 'onChange',
-      type: "(filters: ReadonlyArray<PowerSearchFilter>, changeType: 'add' | 'edit' | 'remove', index: number) => void",
+      type: '(filters: ReadonlyArray<PowerSearchFilter>, changeType: PowerSearchChangeType, index: number) => void',
       description:
         "当过滤器变更时调用。changeType 为 'add'、'edit' 或 'remove'。index 为受影响的过滤器位置。",
       required: true,
@@ -232,7 +232,7 @@ export const docsZh = {
     },
     {
       name: 'status',
-      type: "{type: 'warning' | 'error' | 'success', message?: string}",
+      type: 'InputStatus',
       description: '带有类型和可选消息的验证状态对象。',
     },
     {

package/src/PowerSearch/PowerSearch.tsx

@@ -52,9 +52,7 @@ 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,
@@ -515,9 +513,9 @@ export function PowerSearch({
   config: configProp,
   filters,
   onChange,
-  label: labelFromProps,
+  label = 'Search',
   isLabelHidden = true,
-  placeholder: placeholderFromProps,
+  placeholder = 'Search...',
   hasAutoFocus = false,
   hasClear = true,
   isReadOnly = false,
@@ -528,7 +526,7 @@ export function PowerSearch({
   onBlur,
   status,
   maxTokenLength = 40,
-  popoverSaveButtonLabel: popoverSaveButtonLabelFromProps,
+  popoverSaveButtonLabel = 'Apply',
   timezoneID,
   tokenOverflowBehavior,
   endContent,
@@ -545,12 +543,6 @@ 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>({
@@ -606,15 +598,13 @@ export function PowerSearch({
     return filters.map((filter, index) => {
       const field = config.getField(filter.field);
       const operator = config.getOperator(filter.field, filter.operator);
-      const resolvedOp = operator ? resolveOperatorLabel(operator, t) : '';
-      const operatorLabel = resolvedOp ? `: ${resolvedOp}` : '';
+      const operatorLabel = operator?.label ? `: ${operator.label}` : '';
       const valueStr = operator
         ? formatFilterValue(
             config,
             operator.value,
             filter.value,
             maxTokenLength,
-            t,
             timezoneID,
           )
         : '';
@@ -634,7 +624,7 @@ export function PowerSearch({
         },
       };
     });
-  }, [filters, config, maxTokenLength, timezoneID, t]);
+  }, [filters, config, maxTokenLength, timezoneID]);
 
   // Handle tokenizer onChange (field selected from typeahead)
   const handleTokenizerChange = useCallback(
@@ -797,7 +787,7 @@ export function PowerSearch({
 
       // Default token rendering
       const fieldLabel = field?.label ?? '';
-      const operatorLabel = operator ? resolveOperatorLabel(operator, t) : '';
+      const operatorLabel = operator?.label ?? '';
       const tokenLabel = `${fieldLabel}: ${operatorLabel}`.trim();
       const adjustedMaxLength = Math.max(
         maxTokenLength - fieldLabel.length - operatorLabel.length,
@@ -853,7 +843,6 @@ export function PowerSearch({
       isDisabled,
       handleTokenClick,
       componentOverrides,
-      t,
     ],
   );
 
@@ -959,18 +948,17 @@ 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. The ICU plural handles
-  // the number formatting + `result` vs `results` in one message so translators
-  // can match the locale's plural rules.
+  // screen-reader announcement so the two never drift.
   const resultCountText = useMemo((): string | null => {
     if (resultCount == null) {
       return null;
     }
     if (typeof resultCount === 'number') {
-      return t('@astryx.powersearch.resultCount', {count: resultCount});
+      const formatted = new Intl.NumberFormat().format(resultCount);
+      return `${formatted} ${resultCount === 1 ? 'result' : 'results'}`;
     }
     return resultCount;
-  }, [resultCount, t]);
+  }, [resultCount]);
 
   // 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,10 +19,8 @@ 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,
@@ -240,7 +238,6 @@ function NestedSubFilterRow({
   onChange,
   isReadOnly,
 }: NestedSubFilterRowProps) {
-  const t = useTranslator();
   const fieldOptions = useMemo(
     () =>
       config.getVisibleFields().map(field => ({
@@ -254,9 +251,9 @@ function NestedSubFilterRow({
     const operators = config.getVisibleOperators(subFilter.field);
     return operators.map(op => ({
       value: op.key,
-      label: resolveOperatorLabel(op, t),
+      label: op.label,
     }));
-  }, [config, subFilter.field, t]);
+  }, [config, subFilter.field]);
 
   const currentOperator = subFilter.operator
     ? config.getOperator(subFilter.field, subFilter.operator)
@@ -311,7 +308,7 @@ function NestedSubFilterRow({
     <HStack gap={2} vAlign="center">
       <div {...stylex.props(styles.nestedFieldSelector)}>
         <Selector
-          label={t('@astryx.powersearch.editor.field')}
+          label="Field"
           isLabelHidden
           options={fieldOptions}
           value={subFilter.field}
@@ -323,7 +320,7 @@ function NestedSubFilterRow({
       {operatorOptions.length > 0 && (
         <div {...stylex.props(styles.nestedOperatorSelector)}>
           <Selector
-            label={t('@astryx.powersearch.editor.operator')}
+            label="Operator"
             isLabelHidden
             options={operatorOptions}
             value={subFilter.operator}
@@ -369,7 +366,6 @@ 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));
@@ -472,7 +468,7 @@ function NestedEditor({
             id: `${itemPath.join('-')}-add`,
             label: (
               <Button
-                label={t('@astryx.powersearch.editor.addFilter')}
+                label="+ Add filter"
                 onClick={() => handleAdd(itemPath)}
                 variant="ghost"
                 size="sm"
@@ -495,7 +491,7 @@ function NestedEditor({
           children,
           endContent: !isReadOnly ? (
             <Button
-              label={t('@astryx.powersearch.editor.removeFilter')}
+              label="Remove filter"
               icon={<Icon icon="close" size="sm" />}
               variant="ghost"
               size="sm"
@@ -519,7 +515,7 @@ function NestedEditor({
         ),
         endContent: !isReadOnly ? (
           <Button
-            label={t('@astryx.powersearch.editor.removeFilter')}
+            label="Remove filter"
             icon={<Icon icon="close" size="sm" />}
             variant="ghost"
             size="sm"
@@ -540,7 +536,7 @@ function NestedEditor({
       id: 'add-filter',
       label: (
         <Button
-          label={t('@astryx.powersearch.editor.addFilter')}
+          label="+ Add filter"
           onClick={() => handleAdd([])}
           variant="ghost"
           size="sm"
@@ -554,7 +550,7 @@ function NestedEditor({
       {operatorOptions.length > 1 ? (
         <div {...stylex.props(styles.operatorSelector)}>
           <Selector
-            label={t('@astryx.powersearch.editor.groupOperator')}
+            label="Group operator"
             isLabelHidden
             options={operatorOptions}
             value={partialFilter.operator}
@@ -564,7 +560,7 @@ function NestedEditor({
           />
         </div>
       ) : (
-        (operatorOptions[0]?.label ?? t('@astryx.powersearch.editor.group'))
+        (operatorOptions[0]?.label ?? 'Group')
       )}
     </div>
   );
@@ -591,12 +587,9 @@ export function PowerSearchEditPopover({
   mode,
   onSave,
   onCancel,
-  saveButtonLabel: saveButtonLabelFromProps,
+  saveButtonLabel = 'Apply',
   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);
@@ -635,9 +628,9 @@ export function PowerSearchEditPopover({
     const operators = config.getVisibleOperators(partialFilter.field);
     return operators.map(op => ({
       value: op.key,
-      label: resolveOperatorLabel(op, t),
+      label: op.label,
     }));
-  }, [config, partialFilter.field, t]);
+  }, [config, partialFilter.field]);
 
   const handleFieldChange = useCallback(
     (fieldKey: string) => {
@@ -739,7 +732,7 @@ export function PowerSearchEditPopover({
             <HStack gap={2}>
               <div {...stylex.props(styles.fieldSelector)}>
                 <Selector
-                  label={t('@astryx.powersearch.editor.field')}
+                  label="Field"
                   isLabelHidden
                   options={fieldOptions}
                   value={partialFilter.field}
@@ -763,7 +756,7 @@ export function PowerSearchEditPopover({
           <HStack gap={2} hAlign="between">
             {!isReadOnly && mode === 'edit' ? (
               <Button
-                label={t('@astryx.powersearch.editor.delete')}
+                label="Delete"
                 onClick={handleDelete}
                 variant="ghost"
                 size="sm"
@@ -773,7 +766,7 @@ export function PowerSearchEditPopover({
             )}
             <HStack gap={2}>
               <Button
-                label={t('@astryx.powersearch.editor.cancel')}
+                label="Cancel"
                 onClick={onCancel}
                 variant="ghost"
                 size="sm"
@@ -798,7 +791,7 @@ export function PowerSearchEditPopover({
         <HStack gap={2}>
           <div {...stylex.props(styles.fieldSelector)}>
             <Selector
-              label={t('@astryx.powersearch.editor.field')}
+              label="Field"
               isLabelHidden
               options={fieldOptions}
               value={partialFilter.field}
@@ -810,7 +803,7 @@ export function PowerSearchEditPopover({
           {showOperatorSelector && operatorOptions.length > 0 && (
             <div {...stylex.props(styles.operatorSelector)}>
               <Selector
-                label={t('@astryx.powersearch.editor.operator')}
+                label="Operator"
                 isLabelHidden
                 options={operatorOptions}
                 value={partialFilter.operator}
@@ -839,7 +832,7 @@ export function PowerSearchEditPopover({
           <HStack gap={2} hAlign="between">
             {!isReadOnly && mode === 'edit' ? (
               <Button
-                label={t('@astryx.powersearch.editor.delete')}
+                label="Delete"
                 onClick={handleDelete}
                 variant="ghost"
                 size="sm"
@@ -849,7 +842,7 @@ export function PowerSearchEditPopover({
             )}
             <HStack gap={2}>
               <Button
-                label={t('@astryx.powersearch.editor.cancel')}
+                label="Cancel"
                 onClick={onCancel}
                 variant="ghost"
                 size="sm"

package/src/PowerSearch/PowerSearchToken.tsx

@@ -12,10 +12,8 @@
 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';
 
@@ -43,17 +41,13 @@ export function PowerSearchToken({
   isDisabled,
 }: PowerSearchTokenProps) {
   const config = useInternalConfig(configProp);
-  const t = useTranslator();
 
   const fieldLabel = field.label;
-  const resolvedOperatorLabel = resolveOperatorLabel(operator, t);
-  const operatorLabel = resolvedOperatorLabel
-    ? `: ${resolvedOperatorLabel}`
-    : '';
+  const operatorLabel = operator.label ? `: ${operator.label}` : '';
   const tokenLabel = `${fieldLabel}${operatorLabel}`;
 
   const adjustedMaxLength = Math.max(
-    maxLength - fieldLabel.length - resolvedOperatorLabel.length,
+    maxLength - fieldLabel.length - (operator.label?.length ?? 0),
     10,
   );
 
@@ -62,7 +56,6 @@ export function PowerSearchToken({
     operator.value,
     filter.value,
     adjustedMaxLength,
-    t,
   );
 
   const valueContent = valueStr ? (
@@ -73,14 +66,10 @@ 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}
     />