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

package/src/DateInput/DateInput.tsx

@@ -137,6 +137,7 @@ import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export interface DateInputProps extends Omit<
   BaseProps,
@@ -311,7 +312,7 @@ export function DateInput({
   min,
   max,
   dateConstraints,
-  placeholder = 'Select a date',
+  placeholder: placeholderFromProps,
   size: sizeProp,
   status,
   labelTooltip,
@@ -324,6 +325,9 @@ export function DateInput({
   ref,
   ...rest
 }: DateInputProps) {
+  const t = useTranslator();
+  const placeholder =
+    placeholderFromProps ?? t('@astryx.dateInput.placeholder');
   const size = useSize(sizeProp, 'md');
   const id = useId();
   const inputLabelID = useId();
@@ -415,8 +419,8 @@ export function DateInput({
       : parseDateInput(pendingInput) !== null;
 
   const popover = usePopover({
-    dialogLabel: 'Choose date',
-    closeButtonLabel: 'Close calendar',
+    dialogLabel: t('@astryx.dateInput.dialogLabel'),
+    closeButtonLabel: t('@astryx.dateInput.closeCalendar'),
     onHide: () => inputRef.current?.focus(),
   });
 
@@ -582,7 +586,11 @@ export function DateInput({
         type="button"
         onClick={handleToggle}
         disabled={isEffectivelyDisabled}
-        aria-label={popover.isOpen ? 'Close calendar' : 'Open calendar'}
+        aria-label={
+          popover.isOpen
+            ? t('@astryx.dateInput.toggleCalendarClose')
+            : t('@astryx.dateInput.openCalendar')
+        }
         {...stylex.props(
           styles.iconButton,
           isEffectivelyDisabled && styles.iconButtonDisabled,
@@ -637,7 +645,7 @@ export function DateInput({
         <button
           type="button"
           onClick={handleClear}
-          aria-label={`Clear ${label}`}
+          aria-label={t('@astryx.dateInput.clear', {label})}
           {...stylex.props(styles.iconButton)}>
           <Icon icon="close" size="sm" color="secondary" />
         </button>

package/src/DateRangeInput/DateRangeInput.doc.mjs

@@ -58,7 +58,7 @@ export const docs = {
       name: 'value',
       type: 'DateRange | null',
       description:
-        'Selected date range or null. Import the `DateRange` type from `@astryxdesign/core/DateRangeInput` — it is `{start: ISODateString, end: ISODateString}`. Do NOT redeclare your own DateRange type; use the exported one so TypeScript structurally matches.',
+        'Selected date range or null. Import the `DateRange` type from `@astryxdesign/core/DateRangeInput`; it is `{start: ISODateString, end: ISODateString}`. Do NOT redeclare your own DateRange type; use the exported one so TypeScript structurally matches.',
       required: true,
     },
     {
@@ -85,13 +85,13 @@ export const docs = {
       name: 'min',
       type: 'ISODateString',
       description:
-        'Minimum selectable date. `ISODateString` is a template literal type (`\\`${number}${number}${number}${number}-${number}${number}-${number}${number}\\``) — pass a string literal like `"2026-01-28"`, not a runtime string variable. Import it from `@astryxdesign/core/Calendar` or use `as ISODateString` if computing the value dynamically.',
+        'Minimum selectable date. `ISODateString` is a template literal type (`\\`${number}${number}${number}${number}-${number}${number}-${number}${number}\\``). Pass a string literal like `"2026-01-28"`, not a runtime string variable. Import it from `@astryxdesign/core/Calendar` or use `as ISODateString` if computing the value dynamically.',
     },
     {
       name: 'max',
       type: 'ISODateString',
       description:
-        'Maximum selectable date. Same template literal type as `min` — use a YYYY-MM-DD string literal or cast with `as ISODateString`.',
+        'Maximum selectable date. Same template literal type as `min`: use a YYYY-MM-DD string literal or cast with `as ISODateString`.',
     },
     {
       name: 'dateConstraints',
@@ -124,7 +124,7 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description: 'Status indicator for error, warning, or success states.',
     },
     {
@@ -286,10 +286,10 @@ export const docsDense = {
     isDisabled: 'disable trigger+picker',
     disabledMessage:
       'reason shown in a tooltip on hover/focus when disabled; keeps trigger focusable via aria-disabled',
-    value: 'selected range {start, end} or null — import DateRange type from @astryxdesign/core/DateRangeInput (do not redeclare)',
+    value: 'selected range {start, end} or null; import DateRange type from @astryxdesign/core/DateRangeInput (do not redeclare)',
     onChange: 'callback on range change; null on clear',
-    min: 'min selectable date — ISODateString template literal type (YYYY-MM-DD); use string literal or cast `as ISODateString`',
-    max: 'max selectable date — ISODateString template literal type (YYYY-MM-DD); use string literal or cast `as ISODateString`',
+    min: 'min selectable date: ISODateString template literal type (YYYY-MM-DD); use string literal or cast `as ISODateString`',
+    max: 'max selectable date: ISODateString template literal type (YYYY-MM-DD); use string literal or cast `as ISODateString`',
     dateConstraints: 'custom constraint fns to disable dates',
     presets: 'preset ranges as quick-select options',
     hasClear: 'clear button when range is set (default true)',

package/src/DateRangeInput/DateRangeInput.tsx

@@ -54,6 +54,7 @@ import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export type {DateRange} from '../Calendar';
 
@@ -381,7 +382,7 @@ export function DateRangeInput({
   dateConstraints,
   presets,
   hasClear = true,
-  placeholder = 'Select date range',
+  placeholder: placeholderFromProps,
   size: sizeProp,
   status,
   labelTooltip,
@@ -393,6 +394,9 @@ export function DateRangeInput({
   ref,
   ...rest
 }: DateRangeInputProps) {
+  const t = useTranslator();
+  const placeholder =
+    placeholderFromProps ?? t('@astryx.dateRangeInput.placeholder');
   const size = useSize(sizeProp, 'md');
   const id = useId();
   const descriptionID = useId();
@@ -448,8 +452,8 @@ export function DateRangeInput({
   );
 
   const popover = usePopover({
-    dialogLabel: 'Choose date range',
-    closeButtonLabel: 'Close calendar',
+    dialogLabel: t('@astryx.dateRangeInput.dialogLabel'),
+    closeButtonLabel: t('@astryx.dateInput.closeCalendar'),
   });
 
   const fireChange = useCallback(
@@ -557,7 +561,11 @@ export function DateRangeInput({
           type="button"
           onClick={handleToggle}
           disabled={isEffectivelyDisabled}
-          aria-label={popover.isOpen ? 'Close calendar' : 'Open calendar'}
+          aria-label={
+            popover.isOpen
+              ? t('@astryx.dateInput.toggleCalendarClose')
+              : t('@astryx.dateInput.openCalendar')
+          }
           tabIndex={-1}
           {...stylex.props(
             styles.iconButton,
@@ -594,7 +602,7 @@ export function DateRangeInput({
           <button
             type="button"
             onClick={handleClear}
-            aria-label={`Clear ${label}`}
+            aria-label={t('@astryx.dateInput.clear', {label})}
             {...stylex.props(styles.iconButton)}>
             <Icon icon="close" size="sm" color="secondary" />
           </button>
@@ -613,7 +621,7 @@ export function DateRangeInput({
           {presets && presets.length > 0 && (
             <div
               role="group"
-              aria-label="Preset date ranges"
+              aria-label={t('@astryx.dateRangeInput.presetDateRanges')}
               {...stylex.props(styles.presetSidebar)}>
               {presets.map(preset => {
                 const presetRange = preset.getRange();

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -157,7 +157,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.',
     },
@@ -449,7 +449,7 @@ export const docsZh = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description: '错误、警告或成功状态的状态指示对象，附带消息。',
     },
     {

package/src/DateTimeInput/DateTimeInput.tsx

@@ -77,6 +77,7 @@ import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 export type ISODateTimeString = string & {
   readonly __brand: 'ISODateTimeString';
@@ -418,8 +419,8 @@ export function DateTimeInput({
   hourFormat = '12h',
   timeIncrement = 1,
   hasClear = false,
-  placeholder = 'Select a date',
-  timePlaceholder = 'Select a time',
+  placeholder: placeholderFromProps,
+  timePlaceholder: timePlaceholderFromProps,
   timeLabel,
   size: sizeProp,
   status,
@@ -432,6 +433,11 @@ export function DateTimeInput({
   ref,
   ...rest
 }: DateTimeInputProps) {
+  const t = useTranslator();
+  const placeholder =
+    placeholderFromProps ?? t('@astryx.dateTimeInput.placeholder');
+  const timePlaceholder =
+    timePlaceholderFromProps ?? t('@astryx.dateTimeInput.timePlaceholder');
   const size = useSize(sizeProp, 'md');
   const dateInputId = useId();
   const timeInputId = useId();
@@ -599,8 +605,8 @@ export function DateTimeInput({
 
   // --- Popover ---
   const popover = usePopover({
-    dialogLabel: 'Choose date',
-    closeButtonLabel: 'Close calendar',
+    dialogLabel: t('@astryx.dateTimeInput.dialogLabel'),
+    closeButtonLabel: t('@astryx.dateInput.closeCalendar'),
     onHide: () => dateInputRef.current?.focus(),
   });
 
@@ -887,7 +893,11 @@ export function DateTimeInput({
             type="button"
             onClick={handleCalendarToggle}
             disabled={isEffectivelyDisabled}
-            aria-label={popover.isOpen ? 'Close calendar' : 'Open calendar'}
+            aria-label={
+              popover.isOpen
+                ? t('@astryx.dateInput.toggleCalendarClose')
+                : t('@astryx.dateInput.openCalendar')
+            }
             {...stylex.props(
               styles.iconButton,
               isEffectivelyDisabled && styles.iconButtonDisabled,
@@ -942,7 +952,7 @@ export function DateTimeInput({
             <button
               type="button"
               onClick={handleClear}
-              aria-label={`Clear ${label}`}
+              aria-label={t('@astryx.dateInput.clear', {label})}
               {...stylex.props(styles.iconButton)}>
               <Icon icon="close" size="sm" color="secondary" />
             </button>
@@ -990,7 +1000,7 @@ export function DateTimeInput({
             disabled={isEffectivelyDisabled && !showsDisabledMessage}
             aria-disabled={showsDisabledMessage ? 'true' : undefined}
             readOnly={showsDisabledMessage || undefined}
-            aria-label={timeLabel ?? `${label} time`}
+            aria-label={timeLabel ?? t('@astryx.dateTimeInput.timeSuffix', {label})}
             aria-describedby={ariaDescribedBy}
             aria-required={isRequired === true ? 'true' : undefined}
             aria-invalid={

package/src/Dialog/DialogHeader.tsx

@@ -26,6 +26,7 @@ import {Heading} from '../Heading/Heading';
 import {Text} from '../Text/Text';
 import type {BaseProps} from '../BaseProps';
 import {useDialogContext} from './DialogContext';
+import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   container: {
@@ -131,6 +132,7 @@ export function DialogHeader({
   style,
   ref,
 }: DialogHeaderProps) {
+  const t = useTranslator();
   const titleRef = useRef<HTMLHeadingElement>(null);
   const dialogContext = useDialogContext();
   const shouldAutoFocus = dialogContext?.isInline !== true;
@@ -179,8 +181,8 @@ export function DialogHeader({
             {onOpenChange && (
               <Button
                 variant="ghost"
-                label="Close"
-                tooltip="Close"
+                label={t('@astryx.dialog.close')}
+                tooltip={t('@astryx.dialog.close')}
                 icon={<Icon icon="close" color="inherit" />}
                 onClick={() => {
                   onOpenChange?.(false);

package/src/DropdownMenu/DropdownMenu.tsx

@@ -55,6 +55,7 @@ import {
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 const styles = stylex.create({
   dropdown: {
@@ -111,9 +112,7 @@ export interface DropdownMenuSection {
 }
 
 export type DropdownMenuOption =
-  | DropdownMenuItemData
-  | DropdownMenuDivider
-  | DropdownMenuSection;
+  DropdownMenuItemData | DropdownMenuDivider | DropdownMenuSection;
 
 // =============================================================================
 // Props
@@ -149,8 +148,7 @@ interface DropdownMenuCompoundProps extends DropdownMenuBaseProps {
 }
 
 export type DropdownMenuProps =
-  | DropdownMenuDataProps
-  | DropdownMenuCompoundProps;
+  DropdownMenuDataProps | DropdownMenuCompoundProps;
 
 // =============================================================================
 // DropdownMenu
@@ -176,10 +174,13 @@ export type DropdownMenuProps =
  * />
  * ```
  */
-const DEFAULT_BUTTON = {label: 'Menu'} as const;
+// When the consumer doesn't pass `button`, the default label is looked up
+// at render time so it respects the active InternationalizationProvider
+// locale.
+const DEFAULT_BUTTON_I18N_KEY = '@astryx.dropdownMenu.label' as const;
 
 export function DropdownMenu({
-  button = DEFAULT_BUTTON,
+  button: buttonFromProps,
   isMenuOpen: controlledIsOpen,
   onOpenChange,
   menuWidth,
@@ -192,11 +193,14 @@ export function DropdownMenu({
   'data-testid': testId,
   ...props
 }: DropdownMenuProps) {
+  const t = useTranslator();
+  const button = buttonFromProps ?? {label: t(DEFAULT_BUTTON_I18N_KEY)};
+
   const items = ('items' in props ? props.items : undefined) ?? [];
   const children = props.children;
 
   const menuId = useId();
-  const menuSize = button?.size ?? 'md';
+  const menuSize = button.size ?? 'md';
   const buttonRef = useRef<HTMLButtonElement>(null);
 
   // Open state

package/src/EmptyState/EmptyState.doc.mjs

@@ -39,7 +39,7 @@ export const docs = {
       name: 'headingLevel',
       type: '1 | 2 | 3 | 4 | 5 | 6',
       description:
-        'Controls the rendered HTML heading tag (h1-h6) to fit the document outline.',
+        'Controls only the rendered HTML heading tag (h1-h6) so the title fits the document outline. This is a semantic change for accessibility and does not change the visual size of the title, which stays fixed regardless of level.',
       default: '3',
     },
     {
@@ -121,7 +121,7 @@ export const docsZh = {
       name: 'headingLevel',
       type: '1 | 2 | 3 | 4 | 5 | 6',
       description:
-        '控制渲染的 HTML 标题标签（h1-h6），以适配文档大纲。',
+        '仅控制渲染的 HTML 标题标签（h1-h6），使标题适配文档大纲。这是用于无障碍的语义变化，不会改变标题的视觉大小，标题大小始终固定，与级别无关。',
       default: '3',
     },
     {
@@ -173,7 +173,7 @@ export const docsDense = {
   },
   propDescriptions: {
     title: 'Primary msg rendered as heading (h1-h6) inside empty state.',
-    headingLevel: 'Controls HTML heading tag (h1-h6) for document outline.',
+    headingLevel: 'Controls only HTML heading tag (h1-h6) for document outline; does not change visual title size.',
     description: 'Optional secondary text w/ additional context below title.',
     icon: 'Optional icon/illustration above title; rendered decorative (aria-hidden="true").',
     actions: 'Optional action buttons below description; horizontal by default, vertical when isCompact.',

package/src/EmptyState/EmptyState.tsx

@@ -105,7 +105,10 @@ export interface EmptyStateProps extends BaseProps<HTMLDivElement> {
   actions?: ReactNode;
   /**
    * Semantic heading level for the title element.
-   * Controls the rendered HTML tag (h1–h6) to fit the document outline.
+   * Controls only the rendered HTML tag (h1–h6) so the title fits the
+   * document outline. This is a semantic change for accessibility and does
+   * not change the visual size of the title, which stays fixed regardless
+   * of level.
    * @default 3
    */
   headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;

package/src/Field/Field.doc.mjs

@@ -104,8 +104,8 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'FieldStatus',
-      description: 'Status indicator with type and optional message. When message is set, displays a colored status box.',
+      type: "{type: 'warning' | 'error' | 'success', message?: string, messageID?: string}",
+      description: 'Status indicator with type and optional message. When message is set, displays a colored status box. messageID is for wiring aria-describedby on the input.',
     },
     {
       name: 'statusVariant',

package/src/FileInput/FileInput.tsx

@@ -55,6 +55,7 @@ import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 function formatFileSize(bytes: number): string {
   if (bytes < 1024) {
@@ -425,6 +426,7 @@ export function FileInput({
   ref,
   ...rest
 }: FileInputProps) {
+  const t = useTranslator();
   const id = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
@@ -774,7 +776,7 @@ export function FileInput({
         />
         {isDropzone ? renderDropzoneContent() : renderCompactContent()}
         {hasFiles && !isDisabled && !isLoading && (
-          <InputClearButton label={`Clear ${label}`} onClick={handleClear} />
+          <InputClearButton label={t('@astryx.fileInput.clearLabel', {label})} onClick={handleClear} />
         )}
       </div>
       <div

package/src/Grid/Grid.doc.mjs

@@ -60,28 +60,28 @@ export const docs = {
     },
     {
       name: 'gap',
-      type: 'SpacingStep',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description: 'Spacing between all items.',
     },
     {
       name: 'rowGap',
-      type: 'SpacingStep',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description: 'Row spacing; overrides `gap` for the row axis.',
     },
     {
       name: 'columnGap',
-      type: 'SpacingStep',
+      type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10',
       description: 'Column spacing; overrides `gap` for the column axis.',
     },
     {
       name: 'align',
-      type: 'GridAlignment',
+      type: "'start' | 'center' | 'end' | 'stretch'",
       description: 'Vertical alignment of items.',
       default: "'stretch'",
     },
     {
       name: 'justify',
-      type: 'GridAlignment',
+      type: "'start' | 'center' | 'end' | 'stretch'",
       description: 'Horizontal alignment of items.',
       default: "'stretch'",
     },

package/src/InputGroup/InputGroup.doc.mjs

@@ -76,7 +76,7 @@ export const docs = {
     },
     {
       name: 'status',
-      type: 'InputStatus',
+      type: "{type: 'warning' | 'error' | 'success', message?: string}",
       description: 'Status indicator applied to the group border.',
     },
     {

package/src/Layer/useLayer.doc.mjs

@@ -78,7 +78,7 @@ export const docs = {
       name: 'render',
       type: '(children: ReactNode, props: ContextRenderProps | FixedRenderProps) => ReactNode',
       description:
-        'Render function for the popover element. Pass placement/alignment in context mode or x/y in fixed mode. Placement/alignment are logical: they map to the self-* position-area keyword family, which resolves against the popover\'s own inherited direction, so RTL contexts mirror automatically in pure CSS. Pass `positioning: "custom"` in context mode to author position styles yourself via `style` (e.g. explicit anchor() insets or an anchor-size() cover): the hook keeps the popover behavior and position-anchor wiring but derives no position styles — including the automatic RTL mirroring, which becomes your responsibility. In context mode, pass `as: "span"` to render an inline-safe layer (e.g. inside a paragraph). The layer renders inline in the React tree; the Popover API promotes it to the top layer when shown, so it escapes ancestor clipping and stacking without a portal.',
+        'Render function for the popover element. Pass placement/alignment in context mode or x/y in fixed mode. Placement/alignment are logical: they map to the self-* position-area keyword family, which resolves against the popover\'s own inherited direction, so RTL contexts mirror automatically in pure CSS. Pass `positioning: "custom"` in context mode to author position styles yourself via `style` (e.g. explicit anchor() insets or an anchor-size() cover): the hook keeps the popover behavior and position-anchor wiring but derives no position styles, including the automatic RTL mirroring, which becomes your responsibility. In context mode, pass `as: "span"` to render an inline-safe layer (e.g. inside a paragraph). The layer renders inline in the React tree; the Popover API promotes it to the top layer when shown, so it escapes ancestor clipping and stacking without a portal.',
     },
   ],
   usage: {
@@ -130,7 +130,7 @@ export const docsDense = {
     hide: 'hide layer.',
     isOpen: 'whether layer is open.',
     id: 'unique ARIA id.',
-    render: 'renders popover element; pass placement/alignment or x/y. Placement/alignment logical: mapped to self-* position-area keywords resolved against the popover\'s inherited direction (RTL mirrors in pure CSS). `positioning: "custom"` (context mode) = author position styles yourself via `style`; keeps popover behavior + position-anchor wiring, derives nothing (incl. RTL mirroring — yours). Context mode accepts `as: "span"` for inline-safe layers. Renders inline; the Popover API top layer escapes clipping/stacking without a portal.',
+    render: 'renders popover element; pass placement/alignment or x/y. Placement/alignment logical: mapped to self-* position-area keywords resolved against the popover\'s inherited direction (RTL mirrors in pure CSS). `positioning: "custom"` (context mode) = author position styles yourself via `style`; keeps popover behavior + position-anchor wiring, derives nothing (incl. RTL mirroring, which becomes yours). Context mode accepts `as: "span"` for inline-safe layers. Renders inline; the Popover API top layer escapes clipping/stacking without a portal.',
   },
   usage: {
     description:

package/src/Lightbox/Lightbox.doc.mjs

@@ -22,8 +22,13 @@ export const docs = {
     },
     {
       name: 'media',
+      // Left as the named type on purpose: the shape carries `caption?:
+      // ReactNode`, so spelling it out makes the docsite playground parse the
+      // whole prop as an editable *string*, which would feed the preview text
+      // where a media object belongs. The shape and its legal values live in
+      // the description instead (#1645).
       type: 'LightboxMedia | LightboxMedia[]',
-      description: 'Media to display. Pass a single object for one item, or an array for gallery mode with prev/next navigation. Each item has src, alt, optional caption and type.',
+      description: "Media to display. Pass a single object for one item, or an array for gallery mode with prev/next navigation. Each item is {src: string, alt: string, caption?: ReactNode, type?: 'image' | 'video'}; type defaults to 'image', and zoom/pan is disabled for 'video'.",
       required: true,
     },
     {
@@ -100,7 +105,7 @@ export const docsZh = {
     {
       name: 'media',
       type: 'LightboxMedia | LightboxMedia[]',
-      description: '要显示的媒体。传入单个对象或数组（用于画廊模式的上一张/下一张导航）。',
+      description: "要显示的媒体。传入单个对象或数组（用于画廊模式的上一张/下一张导航）。每项为 {src, alt, caption?, type?: 'image' | 'video'}；type 默认为 'image'，'video' 禁用缩放/平移。",
       required: true,
     },
     {

package/src/Lightbox/Lightbox.tsx

@@ -35,6 +35,7 @@ import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 /**
  * Media type for lightbox items.
@@ -282,6 +283,7 @@ export function Lightbox({
   onKeyDown: onKeyDownProp,
   ...props
 }: LightboxProps) {
+  const t = useTranslator();
   const dialogRef = useRef<HTMLDialogElement>(null);
   const imageWrapperRef = useRef<HTMLDivElement>(null);
   const triggerElementRef = useRef<Element | null>(null);
@@ -504,7 +506,7 @@ export function Lightbox({
         handleKeyDown(e);
         onKeyDownProp?.(e);
       }}
-      aria-label={currentItem.alt || 'Media viewer'}
+      aria-label={currentItem.alt || t('@astryx.lightbox.mediaViewer')}
       {...mergeProps(
         themeProps('lightbox'),
         stylex.props(styles.dialog, xstyle),
@@ -517,7 +519,7 @@ export function Lightbox({
         <div {...stylex.props(styles.closeButton)}>
           <IconButton
             icon={<Icon icon="close" size="sm" color="inherit" />}
-            label="Close"
+            label={t('@astryx.lightbox.close')}
             variant="ghost"
             onClick={handleClose}
             xstyle={styles.controlButton}
@@ -531,7 +533,7 @@ export function Lightbox({
           <div {...stylex.props(styles.navButton, styles.navPrev)}>
             <IconButton
               icon={<Icon icon="chevronLeft" size="sm" color="inherit" />}
-              label="Previous"
+              label={t('@astryx.lightbox.previous')}
               variant="ghost"
               isDisabled={!canPrev}
               onClick={goToPrev}
@@ -586,7 +588,7 @@ export function Lightbox({
           <div {...stylex.props(styles.navButton, styles.navNext)}>
             <IconButton
               icon={<Icon icon="chevronRight" size="sm" color="inherit" />}
-              label="Next"
+              label={t('@astryx.lightbox.next')}
               variant="ghost"
               isDisabled={!canNext}
               onClick={goToNext}

package/src/Lightbox/useLightbox.tsx

@@ -76,7 +76,6 @@ export interface UseLightboxReturn {
  * @example
  * ```
  * const lightbox = useLightbox({ media: photos });
- *
  * {photos.map((photo, i) => (
  *   <img
  *     key={photo.src}