@12-apps/ui 6.7.0 → 6.8.0

package/src/components/form/AddressAutocomplete/AddressAutocompleteField.tsx

@@ -17,6 +17,7 @@ export type AddressAutocompleteFieldProps = ResolvedAddressProps & AddressAutoco
 
 // The live field, rendered once Google Maps (or the mock stand-in) is ready.
 export const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({
+  copy,
   variant,
   label,
   placeholder,
@@ -62,6 +63,7 @@ export const AddressAutocompleteField: FC<AddressAutocompleteFieldProps> = ({
       )}
       renderInput={(params) => (
         <AddressInputField
+          copy={copy}
           params={params}
           addressVariant={variant}
           label={floating ? undefined : label}

package/src/components/form/AddressAutocomplete/AddressFallbackField.tsx

@@ -6,6 +6,7 @@ import type { AddressAutocompleteProps } from './AddressAutocomplete.types';
 import { AddressTextField } from './AddressTextField';
 
 export interface AddressFallbackFieldProps {
+  copy: AddressAutocompleteProps['copy'];
   variant: AddressAutocompleteProps['variant'];
   label?: string;
   placeholder?: string;
@@ -18,6 +19,7 @@ export interface AddressFallbackFieldProps {
 // Stands in for the Autocomplete before Google Maps is usable: a disabled field
 // that either spins or explains why it never loaded.
 export const AddressFallbackField: FC<AddressFallbackFieldProps> = ({
+  copy,
   variant,
   label,
   placeholder,
@@ -33,7 +35,7 @@ export const AddressFallbackField: FC<AddressFallbackFieldProps> = ({
       <AddressTextField
         addressVariant={variant}
         label={floating ? undefined : label}
-        placeholder="Loading Google Maps..."
+        placeholder={copy.loadingMaps}
         disabled
         fullWidth={fullWidth}
         InputProps={{
@@ -57,7 +59,7 @@ export const AddressFallbackField: FC<AddressFallbackFieldProps> = ({
         InputProps={{ startAdornment }}
       />
       <Alert severity="error" sx={{ mt: 1 }}>
-        Google Maps API failed to load. Please check your API key and internet connection.
+        {copy.mapsLoadFailed}
       </Alert>
     </Box>
   );

package/src/components/form/AddressAutocomplete/AddressInputField.tsx

@@ -7,16 +7,17 @@ import React from 'react';
 import type { AddressAutocompleteProps } from './AddressAutocomplete.types';
 import { AddressTextField } from './AddressTextField';
 
-const CurrentLocationButton: FC<{ disabled: boolean; onClick: () => void }> = ({
-  disabled,
-  onClick,
-}) => (
+const CurrentLocationButton: FC<{
+  disabled: boolean;
+  onClick: () => void;
+  currentLocationLabel: string;
+}> = ({ disabled, onClick, currentLocationLabel }) => (
   <InputAdornment position="end">
     <IconButton
       edge="end"
       onClick={onClick}
       size="small"
-      title="Use current location"
+      title={currentLocationLabel}
       disabled={disabled}
       data-testid="address-current-location-button"
     >
@@ -26,6 +27,7 @@ const CurrentLocationButton: FC<{ disabled: boolean; onClick: () => void }> = ({
 );
 
 export interface AddressInputFieldProps {
+  copy: AddressAutocompleteProps['copy'];
   params: AutocompleteRenderInputParams;
   addressVariant: AddressAutocompleteProps['variant'];
   label?: string;
@@ -41,6 +43,7 @@ export interface AddressInputFieldProps {
 }
 
 export const AddressInputField: FC<AddressInputFieldProps> = ({
+  copy,
   params,
   addressVariant,
   label,
@@ -69,7 +72,11 @@ export const AddressInputField: FC<AddressInputFieldProps> = ({
         <>
           {loading && <CircularProgress color="inherit" size={20} data-testid="address-loading" />}
           {showCurrentLocation && (
-            <CurrentLocationButton disabled={disabled} onClick={onGetCurrentLocation} />
+            <CurrentLocationButton
+              disabled={disabled}
+              onClick={onGetCurrentLocation}
+              currentLocationLabel={copy.useCurrentLocation}
+            />
           )}
           {params.InputProps.endAdornment}
         </>

package/src/components/form/Autocomplete/Autocomplete.parts.tsx

@@ -17,6 +17,7 @@ import React from 'react';
 
 import { highlightLabel, type MatchMode } from './Autocomplete.helpers';
 import type { SuggestionItemState, SuggestionType } from './Autocomplete.types';
+import type { AutocompleteCopy } from '../../../copy';
 
 const StyledPopper = styled(Popper)(({ theme }) => ({
   zIndex: theme.zIndex.tooltip,
@@ -213,13 +214,13 @@ export function DefaultSuggestion<T>({
 }
 
 /** A "Loading…" row shown while async suggestions resolve. */
-export function LoadingRow(): React.JSX.Element {
+export function LoadingRow({ label }: { label: string }): React.JSX.Element {
   return (
     <ListItem>
       <Box display="flex" alignItems="center" gap={1}>
         <CircularProgress size={16} />
         <Typography variant="body2" color="text.secondary">
-          Loading...
+          {label}
         </Typography>
       </Box>
     </ListItem>
@@ -227,11 +228,11 @@ export function LoadingRow(): React.JSX.Element {
 }
 
 /** The empty "No results found" row. */
-export function NoResultsRow(): React.JSX.Element {
+export function NoResultsRow({ label }: { label: string }): React.JSX.Element {
   return (
     <ListItem>
       <Typography variant="body2" color="text.secondary">
-        No results found
+        {label}
       </Typography>
     </ListItem>
   );
@@ -251,6 +252,7 @@ const SAME_WIDTH_MODIFIER = {
 };
 
 export interface SuggestionListBoxProps<T> {
+  copy: AutocompleteCopy;
   open: boolean;
   anchorEl: HTMLElement | null;
   portal: boolean | { container?: HTMLElement };
@@ -272,6 +274,7 @@ export interface SuggestionListBoxProps<T> {
 
 /** The suggestions dropdown: a same-width Popper with the option list + loading/empty rows. */
 export function SuggestionListBox<T>({
+  copy,
   open,
   anchorEl,
   portal,
@@ -328,8 +331,8 @@ export function SuggestionListBox<T>({
               {renderItem(item, index === activeIndex)}
             </ListItem>
           ))}
-          {isLoading && <LoadingRow />}
-          {showNoResults && <NoResultsRow />}
+          {isLoading && <LoadingRow label={copy.loading} />}
+          {showNoResults && <NoResultsRow label={copy.noResults} />}
         </List>
       </Paper>
     </StyledPopper>

package/src/components/form/Autocomplete/Autocomplete.tsx

@@ -54,7 +54,7 @@ function resolveRenderConfig<T>(p: AutocompleteProps<T>): RenderConfig<T> {
     selectedItems: p.selectedItems ?? [],
     isLoading: Boolean(p.isLoading),
     showGhostText: p.showGhostText ?? true,
-    placeholder: p.placeholder ?? 'Type to search...',
+    placeholder: p.placeholder ?? p.copy.placeholder,
     autoFocus: Boolean(p.autoFocus),
     disabled: Boolean(p.disabled),
     portal: p.portal ?? false,
@@ -137,6 +137,7 @@ export const Autocomplete = <T = AutocompleteOption>(props: AutocompleteProps<T>
 
         {s.open && (
           <SuggestionListBox
+            copy={props.copy}
             open={s.open}
             anchorEl={s.inputRef.current}
             portal={cfg.portal}

package/src/components/form/Autocomplete/Autocomplete.types.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { AutocompleteCopy } from '../../../copy';
 
 /**
  * A suggestion's behavior on select:
@@ -24,6 +25,12 @@ export interface AutocompleteOption<T = unknown> {
 }
 
 export interface AutocompleteProps<T = AutocompleteOption> {
+  /**
+   * The two rows the dropdown shows in place of options — while an async
+   * fetch is in flight, and when it came back empty. REQUIRED: this package
+   * ships no default copy.
+   */
+  copy: AutocompleteCopy;
   /** Controlled input value */
   value: string;
   /** Input value change */

package/src/components/form/Calendar/Calendar.tsx

@@ -23,7 +23,7 @@ const containerSx = (monthsToShow: number): SxProps<Theme> => ({
 
 export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>((componentProps, ref) => {
   const props = resolveCalendarProps(componentProps);
-  const { monthsToShow, locale, renderHeader, renderFooter, className } = props;
+  const { monthsToShow, locale, renderHeader, renderFooter, className, ariaLabel } = props;
 
   const calendar = useCalendar(props);
 
@@ -48,7 +48,7 @@ export const Calendar = React.forwardRef<HTMLDivElement, CalendarProps>((compone
       ref={ref}
       className={className}
       role="application"
-      aria-label="Calendar"
+      aria-label={ariaLabel}
       tabIndex={0}
       onKeyDown={calendar.handleKeyDown}
       data-testid="calendar-container"

package/src/components/form/Calendar/Calendar.types.ts

@@ -23,6 +23,13 @@ export interface HeaderRenderContext {
 }
 
 export interface CalendarProps {
+  /**
+   * The grid's accessible name. REQUIRED: the container is a
+   * `role="application"`, so a screen reader announces this and nothing else —
+   * and the package cannot know whether it picks a delivery day or a birthday.
+   */
+  ariaLabel: string;
+
   // Mode
   selectionMode?: SelectionMode; // default: 'single'
 

package/src/components/form/CodeEditor/CodeEditor.tsx

@@ -50,7 +50,7 @@ const PlaceholderOverlay = styled(Box)(({ theme }) => ({
   userSelect: 'none' }));
 
 // Monaco editor themes
-const EditorLoading: FC = () => (
+const EditorLoading: FC<{ label: string }> = ({ label }) => (
   <Box
     sx={{
       display: 'flex',
@@ -59,7 +59,7 @@ const EditorLoading: FC = () => (
       height: '100%',
       color: 'text.secondary' }}
   >
-    <Typography variant="body2">Loading editor...</Typography>
+    <Typography variant="body2">{label}</Typography>
   </Box>
 );
 
@@ -116,7 +116,8 @@ export const CodeEditor: FC<CodeEditorProps> = (componentProps) => {
     autoFormat,
     placeholder,
     onSave,
-    dataTestId } = resolveCodeEditorProps(componentProps);
+    dataTestId,
+    copy } = resolveCodeEditorProps(componentProps);
 
   const testId = makeTestId(dataTestId);
   const editor = useCodeEditor({ themeProp, wordWrap, autoFormat, readOnly, onSave });
@@ -132,6 +133,7 @@ export const CodeEditor: FC<CodeEditorProps> = (componentProps) => {
     <EditorContainer elevation={2} data-testid={dataTestId || 'code-editor'}>
       {showToolbar && (
         <EditorToolbar
+          copy={copy}
           language={language}
           readOnly={readOnly}
           isWrapped={editor.isWrapped}
@@ -158,7 +160,7 @@ export const CodeEditor: FC<CodeEditorProps> = (componentProps) => {
           theme={editor.editorTheme}
           options={editorOptions}
           onMount={editor.handleEditorDidMount}
-          loading={<EditorLoading />}
+          loading={<EditorLoading label={copy.loading} />}
         />
       </EditorWrapper>
     </EditorContainer>

package/src/components/form/CodeEditor/CodeEditor.types.ts

@@ -1,10 +1,17 @@
 // Types for CodeEditor component
+import type { CodeEditorCopy } from '../../../copy';
 
 export type EditorLanguage = 'json' | 'javascript' | 'typescript' | 'css' | 'html' | 'yaml' | 'markdown' | 'sql' | 'python';
 
 export type EditorTheme = 'light' | 'dark' | 'auto';
 
 export interface CodeEditorProps {
+  /**
+   * The editor's chrome — the loading line, the read-only badge and the four
+   * toolbar tooltips, which are also those buttons' accessible names.
+   * REQUIRED: this package ships no default copy.
+   */
+  copy: CodeEditorCopy;
   /** Programming language for syntax highlighting */
   language: EditorLanguage;
   /** Editor height (default: '400px') */

package/src/components/form/CodeEditor/CodeEditorToolbar.tsx

@@ -7,6 +7,8 @@ import { Box, IconButton, Stack, Tooltip, Typography } from '@mui/material';
 import { alpha, styled } from '@mui/material';
 import React from 'react';
 
+import type { CodeEditorCopy } from '../../../copy';
+
 // Each button repeated the same conditional test id; this is that ternary once.
 const makeTestId =
   (dataTestId?: string) =>
@@ -37,6 +39,7 @@ const LanguageBadge = styled(Box)(({ theme }) => ({
 }));
 
 const EditorActions: React.FC<{
+  copy: CodeEditorCopy;
   readOnly: boolean;
   isWrapped: boolean;
   isCopied: boolean;
@@ -47,6 +50,7 @@ const EditorActions: React.FC<{
   onWrapToggle: () => void;
   onFullscreenToggle: () => void;
 }> = ({
+  copy,
   readOnly,
   isWrapped,
   isCopied,
@@ -62,7 +66,7 @@ const EditorActions: React.FC<{
   return (
     <Stack direction="row" spacing={1}>
     {!readOnly && (
-      <Tooltip title="Format Code (Ctrl+Shift+F)">
+      <Tooltip title={copy.formatCode}>
         <IconButton
           size="small"
           onClick={onFormat}
@@ -73,7 +77,7 @@ const EditorActions: React.FC<{
       </Tooltip>
     )}
 
-    <Tooltip title={isWrapped ? 'Disable Word Wrap' : 'Enable Word Wrap'}>
+    <Tooltip title={isWrapped ? copy.disableWrap : copy.enableWrap}>
       <IconButton
         size="small"
         onClick={onWrapToggle}
@@ -84,7 +88,7 @@ const EditorActions: React.FC<{
       </IconButton>
     </Tooltip>
 
-    <Tooltip title={isCopied ? 'Copied!' : 'Copy to Clipboard'}>
+    <Tooltip title={isCopied ? copy.copied : copy.copyToClipboard}>
       <IconButton
         size="small"
         onClick={onCopy}
@@ -95,7 +99,7 @@ const EditorActions: React.FC<{
       </IconButton>
     </Tooltip>
 
-    <Tooltip title={isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}>
+    <Tooltip title={isFullscreen ? copy.exitFullscreen : copy.enterFullscreen}>
       <IconButton
         size="small"
         onClick={onFullscreenToggle}
@@ -114,6 +118,7 @@ const EditorActions: React.FC<{
 
 // Language badge, read-only marker and the four action buttons.
 export const EditorToolbar: React.FC<{
+  copy: CodeEditorCopy;
   language: string;
   readOnly: boolean;
   isWrapped: boolean;
@@ -125,6 +130,7 @@ export const EditorToolbar: React.FC<{
   onWrapToggle: () => void;
   onFullscreenToggle: () => void;
 }> = ({
+  copy,
   language,
   readOnly,
   isWrapped,
@@ -147,12 +153,13 @@ export const EditorToolbar: React.FC<{
       </LanguageBadge>
       {readOnly && (
         <Typography variant="caption" color="text.secondary">
-          Read Only
+          {copy.readOnly}
         </Typography>
       )}
     </Stack>
 
     <EditorActions
+      copy={copy}
       readOnly={readOnly}
       isWrapped={isWrapped}
       isCopied={isCopied}

package/src/components/form/DateRangePicker/DateRangePicker.range.ts

@@ -61,6 +61,8 @@ export function defaultMessages(): DateRangePickerMessages {
     reversed: 'The end date must be on or after the start date.',
     overMax: ({ maxRangeDays }) => `Choose a range of at most ${maxRangeDays} days.`,
     summary: ({ from, to }) => `${isoToBr(from)} – ${isoToBr(to)}`,
+    calendarLabel: 'Calendar',
+    dayMask: 'dd/mm/yyyy',
   };
 }
 

package/src/components/form/DateRangePicker/DateRangePicker.tsx

@@ -129,6 +129,7 @@ function useMonthCount(requested: number | undefined): number | undefined {
 
 /** The grid, in range mode — `Calendar`, never a second implementation of one. */
 function RangeCalendar({
+  calendarLabel,
   picker,
   value,
   locale,
@@ -142,10 +143,12 @@ function RangeCalendar({
   weekStartsOn: WeekStart;
   months: number | undefined;
   maxRangeDays: number | undefined;
+  calendarLabel: string;
 }): React.JSX.Element {
   return (
     <Calendar
       key={picker.viewNonce}
+      ariaLabel={calendarLabel}
       className={CALENDAR_CLASS}
       selectionMode="range"
       locale={locale}
@@ -223,6 +226,7 @@ export function DateRangePicker({
     <Paper className={className} data-testid={dataTestId} sx={ROOT_SX}>
       <Box sx={BODY_SX}>
         <RangeCalendar
+          calendarLabel={picker.copy.calendarLabel}
           picker={picker}
           value={value}
           locale={locale}

package/src/components/form/DateRangePicker/DateRangePicker.types.ts

@@ -96,6 +96,17 @@ export interface DateRangePickerMessages {
   overMax: (info: { maxRangeDays: number; days: number }) => string;
   /** The chosen window, in words. */
   summary: (window: DayWindow) => string;
+  /**
+   * The month grid's accessible name. The grid is a `role="application"`, so
+   * this is the only thing a screen reader announces for it.
+   */
+  calendarLabel: string;
+  /**
+   * The two fields' mask, which IS their placeholder — the expected ORDER is
+   * on screen before the first keystroke rather than discovered by getting it
+   * wrong. `dd/mm/aaaa` is one locale's order and one locale's letters.
+   */
+  dayMask: string;
 }
 
 /** Which of the three views moved the range, and what it moved it to. */

package/src/components/form/DateRangePicker/DateRangePickerFields.tsx

@@ -57,6 +57,7 @@ export function DateRangeFields({
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
       <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
         <DayBoundInput
+          mask={messages.dayMask}
           label={messages.from}
           value={value.from ?? undefined}
           onChange={(bound) => onEdit('from', bound ?? null)}
@@ -65,6 +66,7 @@ export function DateRangeFields({
           describedBy={statusId}
         />
         <DayBoundInput
+          mask={messages.dayMask}
           label={messages.to}
           value={value.to ?? undefined}
           onChange={(bound) => onEdit('to', bound ?? null)}

package/src/components/form/Menubar/Menubar.toolbar.tsx

@@ -7,6 +7,7 @@ import { MenubarSeparator } from './Menubar.separator';
 import type { MenubarItem, MenubarProps } from './Menubar.types';
 
 export interface MenubarToolbarProps {
+  ariaLabel: string;
   barSx: CSSObject;
   items: MenubarItem[];
   size: NonNullable<MenubarProps['size']>;
@@ -31,6 +32,7 @@ export interface MenubarToolbarProps {
  * wrapping it differs.
  */
 export const MenubarToolbar: React.FC<MenubarToolbarProps> = ({
+  ariaLabel,
   barSx,
   items,
   size,
@@ -53,7 +55,7 @@ export const MenubarToolbar: React.FC<MenubarToolbarProps> = ({
   return (
     <Toolbar
       role="toolbar"
-      aria-label="Main navigation"
+      aria-label={ariaLabel}
       sx={{
         ...barSx,
         width: fullWidth ? '100%' : 'auto',

package/src/components/form/Menubar/Menubar.tsx

@@ -47,7 +47,7 @@ type ResolvedProps = MenubarProps & Required<Pick<MenubarProps, keyof typeof DEF
 
 export const Menubar: React.FC<MenubarProps> = (props) => {
   const {
-    items, variant, size, color, orientation, glow, pulse, glass, gradient,
+    ariaLabel, items, variant, size, color, orientation, glow, pulse, glass, gradient,
     loading, disabled, className, style, logo, endContent, sticky, transparent,
     blur, elevation, fullWidth, onClick, onFocus, onBlur,
     'data-testid': dataTestId,
@@ -65,6 +65,7 @@ export const Menubar: React.FC<MenubarProps> = (props) => {
 
   const content = (
     <MenubarToolbar
+      ariaLabel={ariaLabel}
       barSx={barSx}
       items={items}
       size={size}

package/src/components/form/Menubar/Menubar.types.ts

@@ -13,6 +13,11 @@ export interface MenubarItem {
 }
 
 export interface MenubarProps {
+  /**
+   * The bar's accessible name. REQUIRED: it is a `role="toolbar"` whose items
+   * are the host's own, so only the host can say what this bar navigates.
+   */
+  ariaLabel: string;
   items: MenubarItem[];
   variant?: 'default' | 'glass' | 'gradient' | 'elevated' | 'minimal' | 'bordered';
   size?: SizeValue;

package/src/components/form/PasswordStrength/PasswordStrength.helpers.tsx

@@ -4,6 +4,7 @@ import WarningIcon from '@mui/icons-material/Warning';
 import { Box, Typography } from '@mui/material';
 import React from 'react';
 
+import type { PasswordRequirementCopy, PasswordStrengthCopy } from '../../../copy';
 import type { PasswordRequirements } from './PasswordStrength.types';
 
 export const defaultRequirements: PasswordRequirements = {
@@ -72,15 +73,19 @@ export const calculatePasswordStrength = (
   return Math.min(earned + lengthBonus(password.length), 100);
 };
 
-const STRENGTH_LABELS: ReadonlyArray<[number, string]> = [
-  [20, 'Very Weak'],
-  [40, 'Weak'],
-  [60, 'Fair'],
-  [80, 'Good'],
+// The four ceilings, and which band each one names. The band NAMES come from
+// the host's table — only the thresholds are ours.
+const STRENGTH_BANDS: ReadonlyArray<[number, keyof PasswordStrengthCopy['bands']]> = [
+  [20, 'veryWeak'],
+  [40, 'weak'],
+  [60, 'fair'],
+  [80, 'good'],
 ];
 
-export const getStrengthLabel = (strength: number): string =>
-  STRENGTH_LABELS.find(([ceiling]) => strength <= ceiling)?.[1] ?? 'Strong';
+export const getStrengthLabel = (
+  strength: number,
+  bands: PasswordStrengthCopy['bands'],
+): string => bands[STRENGTH_BANDS.find(([ceiling]) => strength <= ceiling)?.[1] ?? 'strong'];
 
 export const getStrengthIcon = (strength: number) => {
   if (strength <= 40) return <WarningIcon />;
@@ -88,23 +93,34 @@ export const getStrengthIcon = (strength: number) => {
   return <SuccessIcon />;
 };
 
-const SUGGESTIONS: ReadonlyArray<[keyof RequirementChecks, string]> = [
-  ['length', 'Use at least 8 characters'],
-  ['uppercase', 'Add uppercase letters'],
-  ['lowercase', 'Add lowercase letters'],
-  ['numbers', 'Include numbers'],
-  ['special', 'Add special characters'],
+// One tip per unmet requirement, in checklist order. The `length` tip carries
+// the configured minimum, so the number in the sentence is the one enforced.
+const SUGGESTION_KEYS: ReadonlyArray<[keyof RequirementChecks, keyof PasswordRequirementCopy]> = [
+  ['length', 'minLength'],
+  ['uppercase', 'uppercase'],
+  ['lowercase', 'lowercase'],
+  ['numbers', 'numbers'],
+  ['special', 'special'],
 ];
 
-export const buildSuggestions = (checks: RequirementChecks): string[] =>
-  SUGGESTIONS.filter(([key]) => !checks[key]).map(([, tip]) => tip);
+export const buildSuggestions = (
+  checks: RequirementChecks,
+  copy: PasswordRequirementCopy,
+  minLength: number,
+): string[] =>
+  SUGGESTION_KEYS.filter(([check]) => !checks[check]).map(([, key]) =>
+    key === 'minLength' ? copy.minLength(minLength) : copy[key],
+  );
 
 // Rendered by PasswordStrength; depends on nothing styled, so it lives beside
 // the pure helpers rather than in the component file.
-export const SuggestionsList: React.FC<{ suggestions: string[] }> = ({ suggestions }) => (
+export const SuggestionsList: React.FC<{ suggestions: string[]; heading: string }> = ({
+  suggestions,
+  heading,
+}) => (
   <Box>
     <Typography variant="caption" color="text.secondary" fontWeight="medium">
-      Suggestions:
+      {heading}
     </Typography>
     <Box sx={{ mt: 1 }}>
       {suggestions.map((tip) => (