@astryxdesign/core 0.4.0 → 0.4.1

package/src/DateInput/DateInput.tsx

@@ -80,11 +80,6 @@ const styles = stylex.create({
     backgroundColor: 'transparent',
     cursor: 'pointer',
     borderRadius: radiusVars['--radius-element'],
-    outline: {
-      default: 'none',
-      ':focus-visible': `${borderVars['--border-width']} solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: 1,
   },
   iconButtonDisabled: {
     cursor: 'not-allowed',
@@ -163,6 +158,7 @@ import {mergeProps, mergeRefs, isFocusDetached} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {stableClassName} from '../naming';
 import {useTranslator} from '../i18n';
 
@@ -694,6 +690,7 @@ export function DateInput({
             : t('@astryx.dateInput.openCalendar')
         }
         {...stylex.props(
+          focusOutlineStyles.focusVisible,
           styles.iconButton,
           isEffectivelyDisabled && styles.iconButtonDisabled,
         )}>
@@ -754,7 +751,7 @@ export function DateInput({
           user would get no feedback that their entry was rejected (WCAG 3.3.1).
         */}
       <VisuallyHidden as="div" role="alert" aria-live="assertive">
-        {!isInputValid ? 'Invalid date' : ''}
+        {!isInputValid ? t('@astryx.dateInput.invalidDate') : ''}
       </VisuallyHidden>
       {hasClear && value !== undefined && !isEffectivelyDisabled && (
         <InputClearButton

package/src/DateRangeInput/DateRangeInput.tsx

@@ -61,6 +61,7 @@ import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {stableClassName} from '../naming';
 import {useTranslator} from '../i18n';
 
@@ -118,11 +119,6 @@ const styles = stylex.create({
     backgroundColor: 'transparent',
     cursor: 'pointer',
     borderRadius: radiusVars['--radius-element'],
-    outline: {
-      default: 'none',
-      ':focus-visible': `${borderVars['--border-width']} solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: 1,
   },
   iconButtonDisabled: {
     cursor: 'not-allowed',
@@ -160,10 +156,6 @@ const styles = stylex.create({
     color: colorVars['--color-text-primary'],
     cursor: 'pointer',
     textAlign: 'start',
-    outline: {
-      default: 'none',
-      ':focus-visible': `${borderVars['--border-width']} solid ${colorVars['--color-accent']}`,
-    },
   },
   presetButtonActive: {
     backgroundColor: colorVars['--color-accent-muted'],
@@ -592,6 +584,7 @@ export function DateRangeInput({
           }
           tabIndex={-1}
           {...stylex.props(
+            focusOutlineStyles.focusVisible,
             styles.iconButton,
             isEffectivelyDisabled && styles.iconButtonDisabled,
           )}>
@@ -661,6 +654,7 @@ export function DateRangeInput({
                     aria-current={isActive ? 'true' : undefined}
                     onClick={() => handlePresetClick(preset)}
                     {...stylex.props(
+                      focusOutlineStyles.focusVisible,
                       styles.presetButton,
                       isActive && styles.presetButtonActive,
                     )}>

package/src/DateTimeInput/DateTimeInput.test.tsx

@@ -9,7 +9,7 @@
  * SYNC: When DateTimeInput.tsx changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {getButton, queryButton} from '../__tests__/fastRoleQueries';
@@ -17,6 +17,16 @@ import {DateTimeInput} from './DateTimeInput';
 import type {ISODateTimeString} from './DateTimeInput';
 import {defineTheme} from '../theme/defineTheme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
+import {InternationalizationProvider} from '../i18n';
+import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+
+function politeRegion(): HTMLElement | null {
+  return document.querySelector('[data-astryx-live-region="polite"]');
+}
+
+afterEach(() => {
+  __resetLiveRegionsForTest();
+});
 
 function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
   const {prose, component} = generateThemeCSS(theme);
@@ -626,6 +636,35 @@ describe('DateTimeInput', () => {
 
       expect(screen.getByText('Invalid time')).toBeInTheDocument();
     });
+
+    it('resolves the invalid date and time announcements from the i18n catalog', () => {
+      render(
+        <InternationalizationProvider
+          locale="en"
+          overrides={{
+            en: {
+              '@astryx.dateInput.invalidDate': 'Ungültiges Datum',
+              '@astryx.timeInput.invalidTime': 'Ungültige Zeit',
+            },
+          }}>
+          <DateTimeInput
+            label="Meeting"
+            value={'2026-03-15T10:00' as ISODateTimeString}
+            onChange={() => {}}
+          />
+        </InternationalizationProvider>,
+      );
+
+      fireEvent.change(screen.getByRole('combobox'), {
+        target: {value: '13/45/2024'},
+      });
+      expect(screen.getByText('Ungültiges Datum')).toBeInTheDocument();
+
+      fireEvent.change(screen.getByLabelText('Meeting time'), {
+        target: {value: '99:99 zz'},
+      });
+      expect(screen.getByText('Ungültige Zeit')).toBeInTheDocument();
+    });
   });
   describe('disabledMessage', () => {
     // jsdom does not implement the Popover API used by the tooltip, so mock
@@ -819,6 +858,45 @@ describe('DateTimeInput', () => {
       expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange.mock.calls[0][0]).toContain('14:31');
     });
+
+    // Arrow-key stepping mutates a plain textbox programmatically, and screen
+    // readers do not announce programmatic textbox changes — the new value
+    // must be announced through the polite live region (WCAG 4.1.2).
+    it('politely announces the new time after ArrowUp stepping', async () => {
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:30' as ISODateTimeString}
+          onChange={() => {}}
+        />,
+      );
+
+      fireEvent.keyDown(screen.getByLabelText('Meeting time'), {
+        key: 'ArrowUp',
+      });
+
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('2:31 PM');
+      });
+    });
+
+    it('politely announces the new time after ArrowDown stepping', async () => {
+      render(
+        <DateTimeInput
+          label="Meeting"
+          value={'2026-03-15T14:30' as ISODateTimeString}
+          onChange={() => {}}
+        />,
+      );
+
+      fireEvent.keyDown(screen.getByLabelText('Meeting time'), {
+        key: 'ArrowDown',
+      });
+
+      await waitFor(() => {
+        expect(politeRegion()).toHaveTextContent('2:29 PM');
+      });
+    });
   });
 
   describe('weekStartsOn', () => {

package/src/DateTimeInput/DateTimeInput.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file DateTimeInput.tsx
- * @input Uses React, Field, Calendar, usePopover, time parsing utilities
+ * @input Uses React, Field, Calendar, usePopover, useAnnounce, time parsing utilities
  * @output Exports DateTimeInput component, DateTimeInputProps
  * @position Core implementation; consumed by index.ts, tested by DateTimeInput.test.tsx
  *
@@ -82,8 +82,10 @@ import {
 
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
+import {useAnnounce} from '../hooks/useAnnounce';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {useTranslator} from '../i18n';
 
 export type ISODateTimeString = string & {
@@ -118,11 +120,6 @@ const styles = stylex.create({
     backgroundColor: 'transparent',
     cursor: 'pointer',
     borderRadius: radiusVars['--radius-element'],
-    outline: {
-      default: 'none',
-      ':focus-visible': `${borderVars['--border-width']} solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: 1,
   },
   iconButtonDisabled: {
     cursor: 'not-allowed',
@@ -450,6 +447,10 @@ export function DateTimeInput({
   ...rest
 }: DateTimeInputProps) {
   const t = useTranslator();
+  // Speaks arrow-key stepping results through the persistent live regions:
+  // stepping programmatically rewrites a plain textbox's value, which screen
+  // readers do not announce on their own (WCAG 4.1.2).
+  const announce = useAnnounce();
   const placeholder =
     placeholderFromProps ?? t('@astryx.dateTimeInput.placeholder');
   const timePlaceholder =
@@ -855,11 +856,23 @@ export function DateTimeInput({
           const combined = combineDateTime(valueParts.date, newTime);
           if (combined) {
             fireChange(combined);
+            // Screen readers do not announce the programmatic value rewrite,
+            // so speak the new time explicitly (WCAG 4.1.2).
+            announce(formatDisplayTime(newTime, hasSeconds));
           }
         }
       }
     },
-    [valueParts, hasSeconds, timeIncrement, timeMin, timeMax, fireChange],
+    [
+      valueParts,
+      hasSeconds,
+      timeIncrement,
+      timeMin,
+      timeMax,
+      fireChange,
+      announce,
+      formatDisplayTime,
+    ],
   );
 
   // --- Clear ---
@@ -941,6 +954,7 @@ export function DateTimeInput({
                 : t('@astryx.dateInput.openCalendar')
             }
             {...stylex.props(
+              focusOutlineStyles.focusVisible,
               styles.iconButton,
               isEffectivelyDisabled && styles.iconButtonDisabled,
             )}>
@@ -988,7 +1002,7 @@ export function DateTimeInput({
             rejected (WCAG 3.3.1).
           */}
           <VisuallyHidden as="div" role="alert" aria-live="assertive">
-            {!isDateInputValid ? 'Invalid date' : ''}
+            {!isDateInputValid ? t('@astryx.dateInput.invalidDate') : ''}
           </VisuallyHidden>
           {hasClear && value !== undefined && !isEffectivelyDisabled && (
             <InputClearButton
@@ -1061,7 +1075,7 @@ export function DateTimeInput({
             technology (WCAG 3.3.1).
           */}
           <VisuallyHidden as="div" role="alert" aria-live="assertive">
-            {!isTimeInputValid ? 'Invalid time' : ''}
+            {!isTimeInputValid ? t('@astryx.timeInput.invalidTime') : ''}
           </VisuallyHidden>
         </div>
       </div>

package/src/DropdownMenu/DropdownMenuRadioGroup.tsx

@@ -92,6 +92,7 @@ export function DropdownMenuRadioGroup({
   label,
   hasCloseOnSelect = true,
   children,
+  xstyle,
   className,
   style,
   ...rest
@@ -106,7 +107,7 @@ export function DropdownMenuRadioGroup({
       {...rest}
       role="group"
       aria-label={label}
-      {...mergeProps(stylex.props(styles.group), {className, style})}>
+      {...mergeProps(stylex.props(styles.group, xstyle), {className, style})}>
       <DropdownMenuRadioGroupContext value={contextValue}>
         {children}
       </DropdownMenuRadioGroupContext>

package/src/Field/PanelSearchInput.tsx

@@ -0,0 +1,271 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file PanelSearchInput.tsx
+ * @input Uses React, StyleX, Icon, InputClearButton, theme tokens
+ * @output Exports PanelSearchInput — the search row that sits at the top of a
+ *   dropdown panel
+ * @position Shared internal primitive; used by Selector and MultiSelector
+ *
+ * A dropdown panel is already a bordered, elevated surface. Nesting a bordered
+ * TextInput inside it draws a second box within that box, so the field reads as
+ * a control dropped into the menu rather than part of it. This row is the
+ * seamless alternative — magnifier, borderless input, clear button — separated
+ * from the options by a divider the panel owns.
+ *
+ * The field is shaped like the option rows under it rather than like a form
+ * input: same inset from the panel edge, same `--radius-element` corners, same
+ * height. The focus ring is drawn on that rounded box, so focus reads as "this
+ * row of the panel" — the same visual language as an item's highlight — instead
+ * of ringing the whole panel header. It appears for keyboard focus only; see
+ * `fieldKeyboardFocus` for why `:focus-visible` alone does not mean that.
+ *
+ *   ┌─ panel ──────────────────┐
+ *   │ ┌──────────────────────┐ │  ← field: rounded, inset, item-sized
+ *   │ │ ⌕  Search…         ✕ │ │
+ *   │ └──────────────────────┘ │
+ *   ├──────────────────────────┤  ← divider (full-bleed)
+ *   │ ┌──────────────────────┐ │
+ *   │ │ Apple                │ │  ← option row: same box
+ *
+ * The clear button is the shared `InputClearButton`, so the affordance and its
+ * ghost-button behavior match every other input's clear. It renders AFTER the
+ * input in DOM order: the selector components' Tab handling depends on that
+ * order to keep the popup open while focus moves onto it.
+ *
+ * Not exported from the package: it is an implementation detail of the panels
+ * that use it, not public API.
+ */
+
+import {useCallback, useEffect, useState, type Ref} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {Icon} from '../Icon';
+import {InputClearButton} from './InputClearButton';
+import {mergeProps} from '../utils';
+import {
+  getInteractionModality,
+  trackInteractionModality,
+} from '../utils/interactionModality';
+import {
+  colorVars,
+  durationVars,
+  easeVars,
+  radiusVars,
+  spacingVars,
+  typeScaleVars,
+  typographyVars,
+} from '../theme/tokens.stylex';
+import type {BaseProps} from '../BaseProps';
+
+const styles = stylex.create({
+  // Gutter only. Matches the option list's own padding so the field below
+  // lines up with the option rows rather than with the panel edge.
+  wrapper: {
+    paddingBlock: spacingVars['--spacing-1'],
+    paddingInline: spacingVars['--spacing-1'],
+  },
+  // The field proper — the same box an option row draws: `--radius-element`
+  // corners and, at md, a 6/8 padding pair that lands it on the option row's
+  // 32px height. Focus rings THIS, not the full-width row.
+  field: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacingVars['--spacing-2'],
+    width: '100%',
+    paddingBlock: spacingVars['--spacing-1-5'],
+    paddingInline: spacingVars['--spacing-2'],
+    borderRadius: radiusVars['--radius-element'],
+    transitionProperty: 'box-shadow',
+    transitionDuration: {
+      default: durationVars['--duration-fast'],
+      '@media (prefers-reduced-motion: reduce)': '0s',
+    },
+    transitionTimingFunction: easeVars['--ease-standard'],
+  },
+  // The focus ring, applied only while focus was taken by keyboard (see
+  // `isKeyboardFocus`). `:has(input:focus-visible)` stays the CSS condition —
+  // the browser's heuristic still decides, this only narrows it — and rings
+  // the field rather than the bare <input> so the magnifier and the clear
+  // button sit inside it, and so tabbing ONTO the clear button does not
+  // re-ring the field.
+  //
+  // Inset, not the shared 3px-offset outline: the field is inset 4-5px from
+  // the panel edge, so an outline at that offset would land on the panel's own
+  // border and the divider. Measured, not guessed.
+  fieldKeyboardFocus: {
+    boxShadow: {
+      default: 'none',
+      ':has(input:focus-visible)': `inset 0 0 0 2px ${colorVars['--color-accent']}`,
+    },
+  },
+  // The icon span needs explicit flex centering to avoid a line-height offset.
+  icon: {
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+  },
+  input: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0,
+    padding: 0,
+    margin: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: 'transparent',
+    color: colorVars['--color-text-primary'],
+    fontFamily: typographyVars['--font-family-body'],
+    // Matches the option rows below it, so the query reads as the first line of
+    // the list. The coarse-pointer floor keeps iOS from zooming on focus.
+    fontSize: {
+      default: typeScaleVars['--text-label-size'],
+      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-label-size']})`,
+    },
+    lineHeight: typeScaleVars['--text-label-leading'],
+    // The field draws the focus ring (see `field`), so the bare input must not
+    // draw a second one inside it.
+    outline: 'none',
+    '::placeholder': {
+      color: colorVars['--color-text-secondary'],
+    },
+  },
+});
+
+export interface PanelSearchInputProps extends Omit<
+  BaseProps<HTMLInputElement>,
+  'onChange'
+> {
+  /** Ref forwarded to the input element (for focus management). */
+  ref?: Ref<HTMLInputElement>;
+
+  /**
+   * Accessible name for the input. Rendered as `aria-label`: the panel has no
+   * visible label for the field, and a placeholder is not a reliable name.
+   */
+  label: string;
+
+  /** Accessible name for the clear (✕) button, e.g. `Clear Search options`. */
+  clearLabel: string;
+
+  /** Placeholder text shown while the query is empty. */
+  placeholder?: string;
+
+  /** The current query. */
+  value: string;
+
+  /** Called with the next query on every keystroke and on clear. */
+  onValueChange: (value: string) => void;
+
+  /** Key handler for the input itself. */
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+
+  /** Focus handler for the input; runs after the ring's own bookkeeping. */
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+
+  /** Blur handler for the input; runs after the ring's own bookkeeping. */
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+
+  /**
+   * Key handler for the row. Events from the input are handled by `onKeyDown`;
+   * this one exists for keys pressed on the clear button, which has no other
+   * handler of its own.
+   */
+  onContainerKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+}
+
+/**
+ * Search row for the top of a dropdown panel: magnifier, borderless input, and
+ * a clear button once a query is typed, in a rounded box shaped like the
+ * option rows beneath it.
+ *
+ * `className`/`style`/`xstyle` apply to the outer row (use them to match the
+ * option list's inline padding); every other prop (`role`, `aria-*`, `id`, …)
+ * passes through to the `<input>`, so the caller owns the combobox wiring.
+ */
+export function PanelSearchInput({
+  ref,
+  label,
+  clearLabel,
+  placeholder,
+  value,
+  onValueChange,
+  onKeyDown,
+  onFocus,
+  onBlur,
+  onContainerKeyDown,
+  xstyle,
+  className,
+  style,
+  ...props
+}: PanelSearchInputProps) {
+  // `:focus-visible` matches a text input focused by POINTER as well (CSS
+  // Selectors 4, verified in Chromium), so it cannot express "keyboard focus"
+  // by itself. Gate it on how the user last interacted; the CSS condition
+  // stays `:focus-visible`, this only narrows it.
+  const [isKeyboardFocus, setIsKeyboardFocus] = useState(false);
+
+  useEffect(() => {
+    trackInteractionModality();
+  }, []);
+
+  const handleFocus = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsKeyboardFocus(getInteractionModality() === 'keyboard');
+      onFocus?.(e);
+    },
+    [onFocus],
+  );
+
+  const handleBlur = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsKeyboardFocus(false);
+      onBlur?.(e);
+    },
+    [onBlur],
+  );
+
+  const handleClear = useCallback(() => {
+    onValueChange('');
+    // Clearing puts the caret back where the user was typing, matching
+    // TextInput's built-in clear.
+    if (typeof ref === 'object' && ref?.current) {
+      ref.current.focus();
+    }
+  }, [onValueChange, ref]);
+
+  return (
+    <div
+      onKeyDown={onContainerKeyDown}
+      {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}>
+      <div
+        data-keyboard-focus={isKeyboardFocus ? 'true' : undefined}
+        {...stylex.props(
+          styles.field,
+          isKeyboardFocus && styles.fieldKeyboardFocus,
+        )}>
+        <Icon icon="search" size="sm" color="secondary" xstyle={styles.icon} />
+        <input
+          ref={ref}
+          type="text"
+          aria-label={label}
+          placeholder={placeholder}
+          value={value}
+          onChange={e => onValueChange(e.target.value)}
+          onKeyDown={onKeyDown}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          {...stylex.props(styles.input)}
+          {...props}
+        />
+        {value !== '' && (
+          <InputClearButton label={clearLabel} onClick={handleClear} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+PanelSearchInput.displayName = 'PanelSearchInput';

package/src/FileInput/FileInput.tsx

@@ -59,6 +59,7 @@ import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
+import type {TranslatorFn} from '../i18n';
 
 function formatFileSize(bytes: number): string {
   if (bytes < 1024) {
@@ -76,12 +77,13 @@ function validateFiles(
   maxSize: number | undefined,
   maxFiles: number | undefined,
   isMultiple: boolean,
+  t: TranslatorFn,
 ): {valid: File[]; errors: string[]} {
   const errors: string[] = [];
   let valid = files;
 
   if (accept) {
-    const acceptedTypes = accept.split(',').map(t => t.trim().toLowerCase());
+    const acceptedTypes = accept.split(',').map(s => s.trim().toLowerCase());
     valid = valid.filter(file => {
       const matches = acceptedTypes.some(type => {
         if (type.startsWith('.')) {
@@ -93,7 +95,9 @@ function validateFiles(
         return file.type.toLowerCase() === type;
       });
       if (!matches) {
-        errors.push(`"${file.name}" is not an accepted file type`);
+        errors.push(
+          t('@astryx.fileInput.errorInvalidType', {fileName: file.name}),
+        );
       }
       return matches;
     });
@@ -102,7 +106,12 @@ function validateFiles(
   if (maxSize != null) {
     valid = valid.filter(file => {
       if (file.size > maxSize) {
-        errors.push(`"${file.name}" exceeds ${formatFileSize(maxSize)} limit`);
+        errors.push(
+          t('@astryx.fileInput.errorMaxSize', {
+            fileName: file.name,
+            maxSize: formatFileSize(maxSize),
+          }),
+        );
         return false;
       }
       return true;
@@ -110,7 +119,7 @@ function validateFiles(
   }
 
   if (isMultiple && maxFiles != null && valid.length > maxFiles) {
-    errors.push(`Maximum ${maxFiles} files allowed`);
+    errors.push(t('@astryx.fileInput.errorMaxFiles', {maxFiles}));
     valid = valid.slice(0, maxFiles);
   }
 
@@ -488,7 +497,9 @@ export function FileInput({
       .filter(Boolean)
       .join(' ') || undefined;
 
-  const defaultPlaceholder = isMultiple ? 'Choose files' : 'Choose file';
+  const defaultPlaceholder = isMultiple
+    ? t('@astryx.fileInput.placeholderMultiple')
+    : t('@astryx.fileInput.placeholder');
   const displayPlaceholder = placeholder ?? defaultPlaceholder;
 
   const handleFiles = useCallback(
@@ -503,6 +514,7 @@ export function FileInput({
         maxSize,
         maxFiles,
         isMultiple,
+        t,
       );
 
       if (errors.length > 0) {
@@ -526,8 +538,8 @@ export function FileInput({
       if (errors.length === 0) {
         announce(
           valid.length === 1
-            ? `1 file selected: ${valid[0].name}`
-            : `${valid.length} files selected`,
+            ? t('@astryx.fileInput.fileSelected', {fileName: valid[0].name})
+            : t('@astryx.fileInput.filesSelected', {count: valid.length}),
         );
       }
 
@@ -547,6 +559,7 @@ export function FileInput({
       changeAction,
       startTransition,
       announce,
+      t,
     ],
   );
 
@@ -679,7 +692,7 @@ export function FileInput({
       <>
         <Icon icon="arrowUp" size="md" color="secondary" />
         <span {...stylex.props(styles.placeholderText)}>
-          {isDragOver ? 'Drop files here' : displayPlaceholder}
+          {isDragOver ? t('@astryx.fileInput.dropHint') : displayPlaceholder}
         </span>
       </>
     );

package/src/Grid/Grid.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Grid.tsx
  * @input Uses React, stylex, spacing tokens

package/src/Grid/index.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports from Grid.tsx and GridSpan.tsx