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

package/src/Chat/useTriggerMenu.tsx

@@ -40,6 +40,7 @@ import {
 import {mergeProps, groupItems} from '../utils';
 import type {SearchableItem} from '../Typeahead/types';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 import type {ChatComposerTrigger, ChatComposerToken} from './ChatComposerInput';
 
 // =============================================================================
@@ -254,6 +255,7 @@ function deleteTriggerText(
 export function useTriggerMenu(
   options: UseTriggerMenuOptions,
 ): UseTriggerMenuReturn {
+  const t = useTranslator();
   const {
     triggers,
     editableRef,
@@ -697,7 +699,7 @@ export function useTriggerMenu(
       <div
         id={listboxId}
         role="listbox"
-        aria-label={trigger?.menuLabel ?? 'Suggestions'}
+        aria-label={trigger?.menuLabel ?? t('@astryx.chatTriggerMenu.suggestions')}
         {...mergeProps(
           themeProps('trigger-menu'),
           stylex.props(styles.dropdown),
@@ -710,7 +712,7 @@ export function useTriggerMenu(
         xstyle: [styles.popoverSurface, styles.popoverGap],
       },
     );
-  }, [popover, listboxId, state, selectItem, getItemId]);
+  }, [popover, listboxId, state, selectItem, getItemId, t]);
 
   return {
     state,

package/src/CheckboxInput/CheckboxInput.test.tsx

@@ -248,6 +248,22 @@ describe('CheckboxInput', () => {
     expect(screen.getByLabelText('Select row')).toBeInTheDocument();
   });
 
+  it('keeps description linked via aria-describedby when isLabelHidden', () => {
+    render(
+      <CheckboxInput
+        label="Select row"
+        isLabelHidden
+        description="Selects this row for bulk actions"
+        value={false}
+        onChange={() => {}}
+      />,
+    );
+    const checkbox = screen.getByRole('checkbox');
+    const description = screen.getByText('Selects this row for bulk actions');
+    expect(description.id).not.toBe('');
+    expect(checkbox.getAttribute('aria-describedby')).toContain(description.id);
+  });
+
   it('shows label visually by default', () => {
     render(
       <CheckboxInput label="Accept terms" value={false} onChange={() => {}} />,

package/src/CheckboxInput/CheckboxInput.tsx

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

package/src/CheckboxList/CheckboxList.doc.mjs

@@ -85,7 +85,7 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description: 'Status indicator ({ type, message }).',
     },
     {
@@ -108,6 +108,11 @@ export const docs = {
       { guidance: false, description: 'Wrap a disabled CheckboxList 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-checkbox-list'},
+    ],
+  },
 };
 
 /** @type {import('../docs-types').TranslationDoc} */

package/src/CheckboxList/CheckboxList.tsx

@@ -163,6 +163,7 @@ export function CheckboxList({
   className,
   style,
   'data-testid': dataTestId,
+  ...rest
 }: CheckboxListProps) {
   const inputID = useId();
   const labelID = useId();
@@ -234,6 +235,7 @@ export function CheckboxList({
 
   return (
     <Field
+      {...rest}
       ref={ref}
       data-testid={dataTestId}
       label={label}

package/src/CheckboxList/CheckboxListItem.tsx

@@ -26,6 +26,7 @@ import {CheckboxInput} from '../CheckboxInput/CheckboxInput';
 import {ListItem} from '../List/ListItem';
 import {ListContext} from '../List/ListContext';
 import {CheckboxListContext} from './CheckboxListContext';
+import {useTranslator} from '../i18n';
 
 // =============================================================================
 // Styles
@@ -132,6 +133,7 @@ export function CheckboxListItem({
   onClick: onClickProp,
   ...restProps
 }: CheckboxListItemProps) {
+  const t = useTranslator();
   const ctx = use(CheckboxListContext);
 
   if (ctx && ctx.value !== undefined && value === undefined) {
@@ -224,7 +226,11 @@ export function CheckboxListItem({
       style={style}
       startContent={
         <CheckboxInput
-          label={typeof label === 'string' ? label : 'Checkbox'}
+          label={
+            typeof label === 'string'
+              ? label
+              : t('@astryx.checkboxList.item.checkbox')
+          }
           isLabelHidden
           value={resolvedChecked}
           onChange={() => handleToggle()}

package/src/Citation/Citation.tsx

@@ -28,6 +28,7 @@ import {
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export interface CitationSource {
   title?: string;
@@ -154,6 +155,7 @@ export function Citation({
   'data-testid': testId,
   ...rest
 }: CitationProps): React.ReactElement {
+  const t = useTranslator();
   const title = source.title ?? String(number);
   const href = source.url;
   const icon = source.icon;
@@ -181,7 +183,7 @@ export function Citation({
         {...rest}
         ref={elementRef}
         role={noteRole}
-        aria-label={`Citation ${number}: ${title}`}
+        aria-label={t('@astryx.citation.label', {number, title})}
         data-testid={testId}
         {...linkProps}
         {...mergeProps(
@@ -204,7 +206,7 @@ export function Citation({
       {...rest}
       ref={elementRef}
       role={noteRole}
-      aria-label={`Citation ${number}: ${title}`}
+      aria-label={t('@astryx.citation.label', {number, title})}
       data-testid={testId}
       {...linkProps}
       {...mergeProps(

package/src/ClickableCard/ClickableCard.doc.mjs

@@ -26,7 +26,7 @@ export const docs = {
     {name: 'target', type: 'string', description: 'Link target.', default: "'_self'"},
     {name: 'isDisabled', type: 'boolean', description: 'Disables the card.', default: 'false'},
     {name: 'children', type: 'ReactNode', description: 'Card content.'},
-    {name: 'padding', type: "SpacingStep", description: 'Inner padding.', default: '4'},
+    {name: 'padding', type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10', description: 'Inner padding.', default: '4'},
     {name: 'variant', type: "'default' | 'transparent' | 'muted' | 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow'", description: 'Background color variant.', default: "'default'"},
     {name: 'width', type: 'SizeValue', description: 'Card width.'},
     {name: 'height', type: 'SizeValue', description: 'Card height.'},

package/src/CodeBlock/CodeBlock.tsx

@@ -45,6 +45,7 @@ import type {SyntaxToken, TokenLine} from './tokenizer';
 import {ensureHighlightStyles} from './highlightStyles';
 import {applyHighlightRangesChunked} from './highlightRanges';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 import {SyntaxTheme, type SyntaxThemeDefinition} from '../theme/syntax';
 
 // ---------------------------------------------------------------------------
@@ -78,6 +79,13 @@ const dynamicStyles = stylex.create({
     minWidth: value === 'fit-content' ? 'min(100%, 400px)' : null,
     maxWidth: value === 'fit-content' ? '100%' : null,
   }),
+  // Width of the line-number column, sized to the widest number. `ch` is the
+  // advance of "0" in the (monospace) code font, so N digits => N ch. Set on
+  // <code>; `--_codeblock-gutter-width` is unregistered so it inherits (with its var()
+  // substituted) down to the line divs that read it for their grid track.
+  gutterWidth: (digits: number) => ({
+    '--_codeblock-gutter-width': `${digits}ch`,
+  }),
 });
 
 const styles = stylex.create({
@@ -188,22 +196,6 @@ const styles = stylex.create({
       ':focus-visible': '2px',
     },
   },
-  gutter: {
-    flexShrink: 0,
-    paddingBlock: spacingVars['--spacing-3'],
-    paddingInlineStart: spacingVars['--spacing-4'],
-    paddingInlineEnd: spacingVars['--spacing-3'],
-    textAlign: 'end',
-    userSelect: 'none',
-    color: 'var(--color-syntax-punctuation)',
-    borderRightWidth: borderVars['--border-width'],
-    borderRightStyle: 'solid',
-    borderRightColor: colorVars['--color-border'],
-  },
-  gutterLine: {
-    fontFamily: typographyVars['--font-family-code'],
-    lineHeight: typeScaleVars['--text-code-leading'],
-  },
   code: {
     display: 'block',
     flex: 1,
@@ -222,9 +214,53 @@ const styles = stylex.create({
     wordBreak: 'break-all',
     overflowWrap: 'break-word',
   },
+  // With line numbers on, the <code> element hosts the full-height divider
+  // between the number gutter and the code. It spans the code's block padding
+  // too (inset-block: 0), so the rule reaches the top and bottom edges the way
+  // the old separate gutter column did. The numbers themselves are drawn per
+  // line (see `lineNumbered`) — a separate column can't track wrap height.
+  codeNumbered: {
+    position: 'relative',
+    '::after': {
+      content: '""',
+      position: 'absolute',
+      insetBlock: 0,
+      insetInlineStart: `calc(${spacingVars['--spacing-4']} + var(--_codeblock-gutter-width) + ${spacingVars['--spacing-3']})`,
+      width: 0,
+      borderInlineStartWidth: borderVars['--border-width'],
+      borderInlineStartStyle: 'solid',
+      borderInlineStartColor: colorVars['--color-border'],
+      pointerEvents: 'none',
+    },
+  },
   line: {
     lineHeight: typeScaleVars['--text-code-leading'],
   },
+  // Per-line number gutter: a two-column grid ([number] [code]). The number is
+  // a ::before generated from the data-line attribute. Because the number and
+  // its code occupy one grid row, the row grows to fit wrapped code while the
+  // number stays pinned to the row's first visual line (alignSelf: start) —
+  // this is what keeps numbers aligned when isWrapped wraps a line.
+  lineNumbered: {
+    display: 'grid',
+    gridTemplateColumns: 'var(--_codeblock-gutter-width) 1fr',
+    columnGap: `calc(${spacingVars['--spacing-3']} + ${borderVars['--border-width']} + ${spacingVars['--spacing-4']})`,
+    '::before': {
+      content: 'attr(data-line)',
+      gridColumn: '1',
+      alignSelf: 'start',
+      textAlign: 'end',
+      color: 'var(--color-syntax-punctuation)',
+      userSelect: 'none',
+      fontFamily: typographyVars['--font-family-code'],
+    },
+  },
+  // In span mode the tokens are wrapped in this element so they form a single
+  // grid item in column 2 (otherwise each token span would flow into its own
+  // grid cell). minWidth:0 lets it shrink so long lines wrap within the track.
+  lineContent: {
+    minWidth: 0,
+  },
   lineChunk: {
     contentVisibility: 'auto',
   },
@@ -239,12 +275,6 @@ const styles = stylex.create({
   sizeMd: {
     fontSize: typeScaleVars['--text-code-size'],
   },
-  gutterSm: {
-    fontSize: typeScaleVars['--text-supporting-size'],
-  },
-  gutterMd: {
-    fontSize: typeScaleVars['--text-code-size'],
-  },
   copyButton: {
     display: 'inline-flex',
     alignItems: 'center',
@@ -285,11 +315,13 @@ const CodeChunk = React.memo(function CodeChunk({
   startIndex,
   highlightSet,
   renderLineContent,
+  lineNumbers,
 }: {
   lines: string[];
   startIndex: number;
   highlightSet: Set<number> | null;
   renderLineContent: (line: string, lineIndex: number) => React.ReactNode;
+  lineNumbers: boolean;
 }) {
   return (
     <>
@@ -301,6 +333,7 @@ const CodeChunk = React.memo(function CodeChunk({
             data-line={i + 1}
             {...stylex.props(
               styles.line,
+              lineNumbers && styles.lineNumbered,
               (highlightSet?.has(i + 1) ?? false) && styles.lineHighlighted,
             )}>
             {renderLineContent(line, i)}
@@ -315,6 +348,7 @@ function renderLines(
   lines: string[],
   highlightSet: Set<number> | null,
   renderLineContent: (line: string, lineIndex: number) => React.ReactNode,
+  lineNumbers: boolean,
   chunkSize: number = LINE_CHUNK_SIZE,
 ): React.ReactNode {
   chunkSize = Math.max(1, Math.floor(chunkSize));
@@ -326,6 +360,7 @@ function renderLines(
         startIndex={0}
         highlightSet={highlightSet}
         renderLineContent={renderLineContent}
+        lineNumbers={lineNumbers}
       />
     );
   }
@@ -347,6 +382,7 @@ function renderLines(
           startIndex={start}
           highlightSet={highlightSet}
           renderLineContent={renderLineContent}
+          lineNumbers={lineNumbers}
         />
       </div>,
     );
@@ -542,12 +578,16 @@ function SpanCodeContent({
   highlightSet,
   isWrapped,
   sizeStyle,
+  hasLineNumbers,
+  maxDigits,
 }: {
   lines: string[];
   tokenLines: TokenLine[];
   highlightSet: Set<number> | null;
   isWrapped: boolean;
   sizeStyle: stylex.StyleXStyles;
+  hasLineNumbers: boolean;
+  maxDigits: number;
 }) {
   useInsertionEffect(() => {
     ensureHighlightStyles();
@@ -556,7 +596,13 @@ function SpanCodeContent({
   const renderLineContent = useCallback(
     (line: string, lineIndex: number): React.ReactNode => {
       const tokens = tokenLines[lineIndex] ?? [];
-      return buildSpanLine(line, tokens);
+      // Wrap tokens in a single element so they occupy one grid cell when line
+      // numbers are on (see `lineNumbered`); an inline span is a no-op when off.
+      return (
+        <span {...stylex.props(styles.lineContent)}>
+          {buildSpanLine(line, tokens)}
+        </span>
+      );
     },
     [tokenLines],
   );
@@ -567,8 +613,10 @@ function SpanCodeContent({
         styles.code,
         sizeStyle,
         isWrapped && styles.codeWrapped,
+        hasLineNumbers && styles.codeNumbered,
+        hasLineNumbers && dynamicStyles.gutterWidth(maxDigits),
       )}>
-      {renderLines(lines, highlightSet, renderLineContent)}
+      {renderLines(lines, highlightSet, renderLineContent, hasLineNumbers)}
     </code>
   );
 }
@@ -583,12 +631,16 @@ function RangeCodeContent({
   highlightSet,
   isWrapped,
   sizeStyle,
+  hasLineNumbers,
+  maxDigits,
 }: {
   lines: string[];
   tokenLines: TokenLine[];
   highlightSet: Set<number> | null;
   isWrapped: boolean;
   sizeStyle: stylex.StyleXStyles;
+  hasLineNumbers: boolean;
+  maxDigits: number;
 }) {
   const codeRef = useRef<HTMLElement>(null);
 
@@ -606,6 +658,9 @@ function RangeCodeContent({
     return applyHighlightRangesChunked(codeEl, tokenLines);
   }, [tokenLines]);
 
+  // Range mode keeps the line's text as a bare text node (its firstChild) so
+  // applyHighlightRangesChunked can map token offsets onto it \u2014 no wrapper. The
+  // number ::before is a pseudo-element, so it never becomes a child node here.
   const renderLineContent = useCallback(
     (line: string): React.ReactNode => line || '\u200b',
     [],
@@ -618,8 +673,10 @@ function RangeCodeContent({
         styles.code,
         sizeStyle,
         isWrapped && styles.codeWrapped,
+        hasLineNumbers && styles.codeNumbered,
+        hasLineNumbers && dynamicStyles.gutterWidth(maxDigits),
       )}>
-      {renderLines(lines, highlightSet, renderLineContent)}
+      {renderLines(lines, highlightSet, renderLineContent, hasLineNumbers)}
     </code>
   );
 }
@@ -662,6 +719,7 @@ export function CodeBlock({
   ref,
   ...props
 }: CodeBlockProps) {
+  const t = useTranslator();
   const [copied, setCopied] = useState(false);
   const copyResetTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const announce = useAnnounce();
@@ -718,7 +776,8 @@ export function CodeBlock({
   }, [code, onCopy, announce]);
 
   const sizeStyle = size === 'sm' ? styles.sizeSm : styles.sizeMd;
-  const gutterSizeStyle = size === 'sm' ? styles.gutterSm : styles.gutterMd;
+  // Digits in the largest line number — sizes the gutter column width.
+  const maxLineDigits = String(lines.length).length;
   const languageLabel =
     hasLanguageLabel && language !== 'plaintext' ? language : null;
   const showHeader = title != null || languageLabel != null;
@@ -748,7 +807,7 @@ export function CodeBlock({
         e.stopPropagation();
         void handleCopy();
       }}
-      aria-label={copied ? 'Copied' : 'Copy code'}
+      aria-label={copied ? t('@astryx.codeBlock.copied') : t('@astryx.codeBlock.copyCode')}
       {...stylex.props(
         styles.copyButton,
         !showHeader && styles.copyButtonAbsolute,
@@ -811,7 +870,7 @@ export function CodeBlock({
       // create duplicate same-named landmarks (axe: landmark-unique).
       tabIndex={0}
       role="group"
-      aria-label={languageLabel ?? 'Code'}
+      aria-label={languageLabel ?? t('@astryx.codeBlock.code')}
       {...mergeProps(stylex.props(styles.scrollContainer), {
         style: scrollStyle,
       })}>
@@ -820,18 +879,6 @@ export function CodeBlock({
           styles.codeWrapper,
           showHeader && !hasLineNumbers && styles.codeWrapperCompact,
         )}>
-        {hasLineNumbers && (
-          <div
-            {...stylex.props(styles.gutter, gutterSizeStyle)}
-            aria-hidden="true">
-            {lines.map((_, i) => (
-              // eslint-disable-next-line @eslint-react/no-array-index-key -- gutter line numbers are positional by definition
-              <div key={i} {...stylex.props(styles.gutterLine)}>
-                {i + 1}
-              </div>
-            ))}
-          </div>
-        )}
         {useSpans ? (
           <SpanCodeContent
             lines={lines}
@@ -839,6 +886,8 @@ export function CodeBlock({
             highlightSet={highlightSet}
             isWrapped={isWrapped}
             sizeStyle={sizeStyle}
+            hasLineNumbers={hasLineNumbers}
+            maxDigits={maxLineDigits}
           />
         ) : (
           <RangeCodeContent
@@ -847,6 +896,8 @@ export function CodeBlock({
             highlightSet={highlightSet}
             isWrapped={isWrapped}
             sizeStyle={sizeStyle}
+            hasLineNumbers={hasLineNumbers}
+            maxDigits={maxLineDigits}
           />
         )}
       </div>

package/src/Collapsible/Collapsible.doc.mjs

@@ -70,7 +70,7 @@ export const docs = {
   usage: {
     description: 'Collapsible hides and reveals content behind a trigger button. Use it in settings panels, FAQ pages, or detail views to keep the page scannable while letting users drill into sections they care about. Wrap multiple collapsibles in CollapsibleGroup for accordion behavior. For custom collapsible components, use the `useCollapsible` hook directly (`astryx hook useCollapsible`).',
     bestPractices: [
-      { guidance: true, description: 'Use hasDividers on CollapsibleGroup for FAQ-style lists — built-in row hairlines with themed border tokens, no hand-rolled borders.' },
+      { guidance: true, description: 'Use hasDividers on CollapsibleGroup for FAQ-style lists: built-in row hairlines with themed border tokens, no hand-rolled borders.' },
       { guidance: true, description: 'Wrap each Collapsible in an Card for visual separation in accordion layouts, or use CollapsibleGroup\'s hasDividers for flat lists; don\'t combine both.' },
       { guidance: true, description: 'Use CollapsibleGroup with type="single" for settings or FAQ pages where only one section should be open at a time.' },
       { guidance: true, description: 'Use type="multiple" when users need to compare content across sections, like feature lists or pricing tiers.' },
@@ -92,7 +92,7 @@ export const docsZh = {
   usage: {
     description: 'Collapsible hides and reveals content behind a trigger button. Use it in settings panels, FAQ pages, or detail views to keep the page scannable while letting users drill into sections they care about. Wrap multiple collapsibles in CollapsibleGroup for accordion behavior.',
     bestPractices: [
-      { guidance: true, description: 'Use hasDividers on CollapsibleGroup for FAQ-style lists — built-in row hairlines with themed border tokens, no hand-rolled borders.' },
+      { guidance: true, description: 'Use hasDividers on CollapsibleGroup for FAQ-style lists: built-in row hairlines with themed border tokens, no hand-rolled borders.' },
       { guidance: true, description: 'Wrap each Collapsible in an Card for visual separation in accordion layouts, or use CollapsibleGroup\'s hasDividers for flat lists; don\'t combine both.' },
       { guidance: true, description: 'Use CollapsibleGroup with type="single" for settings or FAQ pages where only one section should be open at a time.' },
       { guidance: true, description: 'Use type="multiple" when users need to compare content across sections, like feature lists or pricing tiers.' },
@@ -110,7 +110,7 @@ export const docsDense = {
   usage: {
     description: 'Collapsible hides and reveals content behind a trigger button. Use in settings, FAQs, or detail views. Wrap in CollapsibleGroup for accordion behavior.',
     bestPractices: [
-      { guidance: true, description: 'Use hasDividers on CollapsibleGroup for FAQ-style lists — built-in row hairlines, no hand-rolled borders.' },
+      { guidance: true, description: 'Use hasDividers on CollapsibleGroup for FAQ-style lists: built-in row hairlines, no hand-rolled borders.' },
       { guidance: true, description: 'Wrap each Collapsible in an Card for visual separation, or use CollapsibleGroup\'s hasDividers for flat lists; not both.' },
       { guidance: true, description: 'Use CollapsibleGroup with type="single" for settings or FAQ pages where only one section should be open at a time.' },
       { guidance: true, description: 'Use type="multiple" when users need to compare across sections.' },

package/src/CommandPalette/CommandPalette.tsx

@@ -36,6 +36,7 @@ import {CommandPaletteInput} from './CommandPaletteInput';
 import {CommandPaletteFooter} from './CommandPaletteFooter';
 import {CommandPaletteEmpty} from './CommandPaletteEmpty';
 import type {BaseProps} from '../BaseProps';
+import {useTranslator} from '../i18n';
 
 export interface CommandPaletteProps<
   T extends SearchableItem = SearchableItem,
@@ -260,14 +261,20 @@ export function CommandPalette<T extends SearchableItem = SearchableItem>({
   input,
   footer,
   renderItem,
-  emptySearchText = 'No results',
-  emptyBootstrapText = 'Type to search',
+  emptySearchText: emptySearchTextFromProps,
+  emptyBootstrapText: emptyBootstrapTextFromProps,
   value: controlledValue,
   onValueChange,
-  label = 'Command palette',
+  label: labelFromProps,
   width = 640,
   maxHeight = 480,
 }: CommandPaletteProps<T>) {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.commandPalette.label');
+  const emptySearchText =
+    emptySearchTextFromProps ?? t('@astryx.commandPalette.emptySearch');
+  const emptyBootstrapText =
+    emptyBootstrapTextFromProps ?? t('@astryx.commandPalette.emptyBootstrap');
   const listId = useId();
   // search: the committed query — only advances when async results arrive.
   // optimisticSearch: updates immediately on keystroke, drives input + empty state.

package/src/CommandPalette/CommandPaletteInput.test.tsx

@@ -17,7 +17,7 @@ import type {CommandPaletteContextValue} from './CommandPaletteContext';
 describe('CommandPaletteInput', () => {
   it('renders with default placeholder', () => {
     render(<CommandPaletteInput />);
-    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Search…')).toBeInTheDocument();
   });
 
   it('renders with custom placeholder', () => {

package/src/CommandPalette/CommandPaletteInput.tsx

@@ -27,6 +27,7 @@ import {useCommandPaletteContext} from './CommandPaletteContext';
 import {useDialogContext} from '../Dialog/DialogContext';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   wrapper: {
@@ -147,7 +148,7 @@ export interface CommandPaletteInputProps extends Omit<
 export function CommandPaletteInput({
   value: controlledValue,
   onValueChange,
-  placeholder = 'Search...',
+  placeholder: placeholderFromProps,
   hasAutoFocus = true,
   endContent,
   onChange,
@@ -156,6 +157,9 @@ export function CommandPaletteInput({
   xstyle,
   ...props
 }: CommandPaletteInputProps) {
+  const t = useTranslator();
+  const placeholder =
+    placeholderFromProps ?? t('@astryx.commandPalette.input.placeholder');
   const ctx = useCommandPaletteContext();
   const dialogContext = useDialogContext();
   const inputRef = useRef<HTMLInputElement>(null);

package/src/CommandPalette/CommandPaletteList.tsx

@@ -20,6 +20,7 @@ import {mergeProps} from '../utils';
 import {spacingVars} from '../theme/tokens.stylex';
 import {useCommandPaletteContext} from './CommandPaletteContext';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   list: {
@@ -72,13 +73,15 @@ export interface CommandPaletteListProps extends BaseProps<HTMLDivElement> {
  */
 export function CommandPaletteList({
   children,
-  label = 'Commands',
+  label: labelFromProps,
   ref,
   xstyle,
   className,
   style,
   ...props
 }: CommandPaletteListProps) {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.commandPalette.list.label');
   const ctx = useCommandPaletteContext();
 
   return (

package/src/ContextMenu/ContextMenu.tsx

@@ -62,6 +62,7 @@ import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {StyleXStyles} from '../theme/types';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 import type {
   DropdownMenuOption,
   DropdownMenuItemData,
@@ -205,7 +206,7 @@ export function ContextMenu({
   children,
   menuWidth,
   size = 'md',
-  label = 'Context menu',
+  label: labelFromProps,
   isDisabled = false,
   onOpenChange,
   ref,
@@ -216,6 +217,8 @@ export function ContextMenu({
   'data-testid': testId,
   ...props
 }: ContextMenuProps) {
+  const t = useTranslator();
+  const label = labelFromProps ?? t('@astryx.contextMenu.label');
   const items = ('items' in props ? props.items : undefined) ?? [];
   const menuContent = 'menuContent' in props ? props.menuContent : undefined;
 

package/src/DateInput/DateInput.doc.mjs

@@ -111,7 +111,7 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description:
         'Status indicator object for error, warning, or success states with a message.',
     },
@@ -374,7 +374,7 @@ export const docsZh = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description: '错误、警告或成功状态的状态指示对象，附带消息。',
     },
     {