@astryxdesign/core 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @xds/core
 
+# 0.5.2
+
+#### Fixes
+
+- Rename the Data Input component category to Form Controls (#5686)
+
+#### Performance
+
+- Improve frequent translation lookups by pre-building locale maps (#4696)
+
+#### Contributors
+
+Thanks to everyone who contributed to this release:
+
+- @ngolin
+- @rubyycheung
+
+---
+
 # 0.5.1
 
 #### New Features

package/dist/i18n/InternationalizationContext.d.ts

@@ -1,9 +1,11 @@
+import { getResolve } from './resolve';
 import type { Locale, MessagesByLocale, Overrides } from './types';
 export interface InternationalizationContextValue {
     locale: Locale;
     direction: 'ltr' | 'rtl';
     messages: MessagesByLocale;
     overrides?: Overrides;
+    translate: ReturnType<typeof getResolve>;
 }
 /**
  * Default value falls through to the shipped en catalog in resolve().

package/dist/i18n/InternationalizationContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InternationalizationContext.d.ts","sourceRoot":"","sources":["../../src/i18n/InternationalizationContext.ts"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAC,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAEjE,MAAM,WAAW,gCAAgC;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,2BAA2B,2DAKpC,CAAC"}
+{"version":3,"file":"InternationalizationContext.d.ts","sourceRoot":"","sources":["../../src/i18n/InternationalizationContext.ts"],"names":[],"mappings":"AAyBA,OAAO,EAAC,UAAU,EAAC,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,EAAC,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAEjE,MAAM,WAAW,gCAAgC;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;CAC1C;AAED;;;GAGG;AACH,eAAO,MAAM,2BAA2B,2DAMpC,CAAC"}

package/dist/i18n/InternationalizationContext.js

@@ -22,6 +22,7 @@
  * - /packages/core/src/i18n/index.ts
  */
 import { createContext } from 'react';
+import { getResolve } from "./resolve.js";
 /**
  * Default value falls through to the shipped en catalog in resolve().
  * A consumer that doesn't render a provider still gets English defaults.
@@ -29,6 +30,7 @@ import { createContext } from 'react';
 export const InternationalizationContext = /*#__PURE__*/createContext({
   locale: 'en',
   direction: 'ltr',
-  messages: {}
+  messages: {},
+  translate: getResolve('en', {})
 });
 InternationalizationContext.displayName = 'InternationalizationContext';

package/dist/i18n/InternationalizationProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InternationalizationProvider.d.ts","sourceRoot":"","sources":["../../src/i18n/InternationalizationProvider.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG9C,OAAO,KAAK,EAAC,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAEjE,MAAM,WAAW,iCAAiC;IAChD;;;;;;OAMG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,QAAQ,GACT,EAAE,iCAAiC,+BAWnC;yBAjBe,4BAA4B"}
+{"version":3,"file":"InternationalizationProvider.d.ts","sourceRoot":"","sources":["../../src/i18n/InternationalizationProvider.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG9C,OAAO,KAAK,EAAC,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,iCAAiC;IAChD;;;;;;OAMG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;OAWG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,MAAM,EACN,QAAQ,EACR,SAAS,EACT,GAAG,EACH,QAAQ,GACT,EAAE,iCAAiC,+BAiBnC;yBAvBe,4BAA4B"}

package/dist/i18n/InternationalizationProvider.js

@@ -21,6 +21,7 @@
 import { useMemo } from 'react';
 import { InternationalizationContext } from "./InternationalizationContext.js";
 import { getLocaleDirection } from "./getLocaleDirection.js";
+import { getResolve } from "./resolve.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Provides locale + additional messages + overrides to all astryx
@@ -38,7 +39,8 @@ export function InternationalizationProvider({
     locale,
     direction,
     messages: messages ?? {},
-    overrides
+    overrides,
+    translate: getResolve(locale, messages ?? {}, overrides)
   }), [locale, direction, messages, overrides]);
   return /*#__PURE__*/_jsx(InternationalizationContext, {
     value: value,

package/dist/i18n/resolve.d.ts

@@ -13,7 +13,7 @@ import type { Locale, MessagesByLocale, Overrides } from './types';
  * shipped en catalog separately as the final source-of-truth.
  */
 export declare function resolveLocaleChain(locale: Locale): Locale[];
-export declare function resolve(key: string, values: Record<string, unknown> | undefined, locale: Locale, messages: MessagesByLocale, overrides: Overrides | undefined): string;
+export declare function getResolve(locale: Locale, messages: MessagesByLocale, overrides?: Overrides): (key: string, values: Record<string, unknown> | undefined) => string;
 /**
  * Reset internal caches. Test-only.
  * @internal

package/dist/i18n/resolve.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../src/i18n/resolve.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAU,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAwB1E;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAc3D;AAsCD,wBAAgB,OAAO,CACrB,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,EAC3C,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE,SAAS,GAAG,SAAS,GAC/B,MAAM,CA0BR;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAGtC"}
+{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../src/i18n/resolve.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAU,MAAM,EAAE,gBAAgB,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAwB1E;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAc3D;AAkCD,wBAAgB,UAAU,CACxB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,CAAC,EAAE,SAAS,IAIb,KAAK,MAAM,EAAE,QAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,YA0BjE;AAED;;;GAGG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAGtC"}

package/dist/i18n/resolve.js

@@ -69,55 +69,54 @@ export function resolveLocaleChain(locale) {
   }
   return chain;
 }
-function lookup(key, locale, messages, overrides) {
+function getLookup(locale, messages, overrides) {
+  const lookup = {};
   const chain = resolveLocaleChain(locale);
-
   // 1 + 2. Overrides (most specific to least specific in the chain)
   if (overrides !== undefined) {
     for (const tag of chain) {
-      const value = overrides[tag]?.[key];
-      if (value !== undefined) {
-        return value;
+      if (overrides[tag]) {
+        for (const [key, value] of Object.entries(overrides[tag])) {
+          if (lookup[key] === undefined && value !== null) {
+            lookup[key] = value;
+          }
+        }
       }
     }
   }
-
-  // 3 + 4. Shipped catalogs (most specific to least specific)
   for (const tag of chain) {
-    const entry = messages[tag]?.[key];
-    if (entry !== undefined) {
-      return entry.defaultMessage;
+    if (messages[tag]) {
+      for (const [key, value] of Object.entries(messages[tag])) {
+        if (lookup[key] === undefined && value?.defaultMessage !== null) {
+          lookup[key] = value?.defaultMessage;
+        }
+      }
     }
   }
-
-  // 5. Shipped en catalog — always present
-  const enEntry = EN_CATALOG[key];
-  if (enEntry !== undefined) {
-    return enEntry.defaultMessage;
-  }
-
-  // 6. Nothing found
-  return null;
+  return lookup;
 }
-export function resolve(key, values, locale, messages, overrides) {
-  const result = lookup(key, locale, messages, overrides);
-  if (result === null) {
-    // Fires ONLY when a key is missing from every source including the
-    // shipped `en` catalog — a real bug (typo, stale catalog, deleted key).
-    // Fallback to `en` from a non-en locale is expected and stays silent,
-    // matching the FormatJS / i18next default.
-    warnOnce(`astryx-i18n:${locale}::${key}`, 'astryx-i18n', `missing key: ${key} (locale: ${locale})`);
-    return key;
-  }
-  if (values === undefined) {
-    // Static string — skip the parser entirely for the common case
-    return result;
-  }
-  const formatted = getFormatter(result, locale).format(values);
-  // IntlMessageFormat.format returns string | (string | React elements) — we
-  // only ever pass string values so it will be a string; assert for the type
-  // system.
-  return formatted;
+export function getResolve(locale, messages, overrides) {
+  const lookup = getLookup(locale, messages, overrides);
+  return (key, values) => {
+    const result = lookup[key] ?? EN_CATALOG[key]?.defaultMessage;
+    if (result === undefined) {
+      // Fires ONLY when a key is missing from every source including the
+      // shipped `en` catalog — a real bug (typo, stale catalog, deleted key).
+      // Fallback to `en` from a non-en locale is expected and stays silent,
+      // matching the FormatJS / i18next default.
+      warnOnce(`astryx-i18n:${locale}::${key}`, 'astryx-i18n', `missing key: ${key} (locale: ${locale})`);
+      return key;
+    }
+    if (values === undefined) {
+      // Static string — skip the parser entirely for the common case
+      return result;
+    }
+    const formatted = getFormatter(result, locale).format(values);
+    // IntlMessageFormat.format returns string | (string | React elements) — we
+    // only ever pass string values so it will be a string; assert for the type
+    // system.
+    return formatted;
+  };
 }
 
 /**

package/dist/i18n/useTranslator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTranslator.d.ts","sourceRoot":"","sources":["../../src/i18n/useTranslator.ts"],"names":[],"mappings":"AAyBA,MAAM,MAAM,YAAY,GAAG,CACzB,GAAG,EAAE,MAAM,EACX,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC7B,MAAM,CAAC;AAEZ;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,IAAI,YAAY,CAO5C"}
+{"version":3,"file":"useTranslator.d.ts","sourceRoot":"","sources":["../../src/i18n/useTranslator.ts"],"names":[],"mappings":"AAwBA,MAAM,MAAM,YAAY,GAAG,CACzB,GAAG,EAAE,MAAM,EACX,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC7B,MAAM,CAAC;AAEZ;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,IAAI,YAAY,CAG5C"}

package/dist/i18n/useTranslator.js

@@ -18,9 +18,8 @@
  * - /packages/core/src/i18n/index.ts
  * - /packages/core/src/i18n/t.client.ts
  */
-import { use, useCallback } from 'react';
+import { use } from 'react';
 import { InternationalizationContext } from "./InternationalizationContext.js";
-import { resolve } from "./resolve.js";
 /**
  * Returns a translator function bound to the current provider's locale.
  * Safe to call from event handlers and effects.
@@ -35,5 +34,5 @@ import { resolve } from "./resolve.js";
  */
 export function useTranslator() {
   const ctx = use(InternationalizationContext);
-  return useCallback((key, values) => resolve(key, values, ctx.locale, ctx.messages, ctx.overrides), [ctx.locale, ctx.messages, ctx.overrides]);
+  return ctx.translate;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -669,7 +669,7 @@
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.2",
-    "@astryxdesign/cli": "0.5.1"
+    "@astryxdesign/cli": "0.5.2"
   },
   "dependencies": {
     "intl-messageformat": "^11.2.9"

package/src/Calendar/Calendar.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'Calendar',
   displayName: 'Calendar',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["calendar","datepicker","date picker","rangepicker","date range","monthview","daypicker"],
   usage: {
     description:

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'CheckboxInput',
   displayName: 'Checkbox Input',
   group: 'Checkbox',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["checkbox","check","toggle","tick","indeterminate","boolean","tristate"],
   props: [
     {

package/src/CheckboxList/CheckboxList.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'CheckboxList',
   displayName: 'Checkbox List',
   group: 'Checkbox',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   keywords: ["checkboxlist","checkbox","checkboxgroup","multichoice","multiselect","checklist"],
   description: 'Checkbox group container with field integration for label, description, and status.',

package/src/ComplexSelector/ComplexSelector.doc.mjs

@@ -15,7 +15,7 @@ export const docs = {
   name: 'ComplexSelector',
   displayName: 'Complex Selector',
   group: 'Selector',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'selector',
     'picker',
@@ -214,7 +214,7 @@ export const docsDense = {
   name: 'ComplexSelector',
   displayName: 'Complex Selector',
   group: 'Selector',
-  category: 'Data Input',
+  category: 'Form Controls',
   description:
     'Input/ghost trigger + dialog-popover shell for rich custom selectors. Content gets value/onChange/close/state; content owns semantics. Use focus hooks and evaluate custom content against WCAG 2.2.',
   usage: {

package/src/DateInput/DateInput.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'DateInput',
   displayName: 'Date Input',
   group: 'DateInput',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'dateinput',
     'datepicker',

package/src/DateRangeInput/DateRangeInput.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'DateRangeInput',
   displayName: 'Date Range Input',
   group: 'DateInput',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'daterangepicker',
     'daterange',

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'DateTimeInput',
   displayName: 'Date Time Input',
   group: 'DateInput',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'datetimepicker',
     'datetime',

package/src/Field/Field.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'Field',
   displayName: 'Field',
   group: 'Field',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["field","formfield","formgroup","formcontrol","label","input","required","optional","helpertext","hint"],
   playground: {
     defaults: {

package/src/FieldStatus/FieldStatus.doc.mjs

@@ -5,7 +5,7 @@ export const docs = {
   name: 'FieldStatus',
   displayName: 'Field Status',
   group: 'Field',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   description:
     'Status message component for form field validation feedback. Messages are announced to screen readers through persistent live regions (assertive for errors, polite otherwise), so conditional mounting is safe.',

package/src/FileInput/FileInput.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'FileInput',
   displayName: 'File Input',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["fileinput","file","upload","drag","drop","dropzone","attachment","browse"],
   props: [
     {

package/src/Indicator/Indicator.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'Indicator',
   displayName: 'Indicator',
   group: 'Indicator',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   keywords: [
     'indicator',

package/src/InputGroup/InputGroup.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'InputGroup',
   displayName: 'Input Group',
   group: 'Field',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   keywords: [
     'inputgroup',

package/src/MultiSelector/MultiSelector.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'MultiSelector',
   displayName: 'Multi Selector',
   group: 'Selector',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'multiselect',
     'checkbox',

package/src/NumberInput/NumberInput.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'NumberInput',
   displayName: 'Number Input',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'numberinput',
     'numberfield',

package/src/PowerSearch/PowerSearch.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'PowerSearch',
   displayName: 'Power Search',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'powersearch',
     'search',

package/src/RadioList/RadioList.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'RadioList',
   displayName: 'Radio List',
   group: 'Radio',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["radiolist","radio","radiogroup","radiobutton","optionlist","singlechoice","choicelist"],
   theming: {
     targets: [

package/src/Selector/Selector.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'Selector',
   displayName: 'Selector',
   group: 'Selector',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'selector',
     'select',

package/src/Slider/Slider.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'Slider',
   displayName: 'Slider',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["slider","range","slidebar","trackbar","scrubber","knob","thumb","rangeslider"],
   playground: {
     defaults: {
@@ -364,4 +364,4 @@ export const docsDense = {
     labelTooltip: 'Tooltip text for info icon next to label.',
     xstyle: 'StyleX layout styles; must be stylex.create() value.',
   },
-};
+};

package/src/Switch/Switch.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'Switch',
   displayName: 'Switch',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'switch',
     'toggle',

package/src/TextArea/TextArea.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'TextArea',
   displayName: 'Text Area',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["textarea","textfield","multiline","comment","message","autoresize","autosize","charlimit"],
   props: [
     {

package/src/TextInput/TextInput.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'TextInput',
   displayName: 'Text Input',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["textinput","textfield","input","search","clearable","prefix","suffix","adornment","validation"],
   props: [
     {

package/src/TimeInput/TimeInput.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'TimeInput',
   displayName: 'Time Input',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'timeinput',
     'timepicker',

package/src/Tokenizer/Tokenizer.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'Tokenizer',
   displayName: 'Tokenizer',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["tokenizer","multiselect","multi-select","chips","tags","combobox","autocomplete","taginput","chipinput"],
   props: [
     {

package/src/Typeahead/Typeahead.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'Typeahead',
   displayName: 'Typeahead',
   group: 'Typeahead',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'typeahead',
     'autocomplete',

package/src/i18n/InternationalizationContext.ts

@@ -23,6 +23,7 @@
  */
 
 import {createContext} from 'react';
+import {getResolve} from './resolve';
 import type {Locale, MessagesByLocale, Overrides} from './types';
 
 export interface InternationalizationContextValue {
@@ -30,6 +31,7 @@ export interface InternationalizationContextValue {
   direction: 'ltr' | 'rtl';
   messages: MessagesByLocale;
   overrides?: Overrides;
+  translate: ReturnType<typeof getResolve>;
 }
 
 /**
@@ -41,5 +43,6 @@ export const InternationalizationContext =
     locale: 'en',
     direction: 'ltr',
     messages: {},
+    translate: getResolve('en', {}),
   });
 InternationalizationContext.displayName = 'InternationalizationContext';

package/src/i18n/InternationalizationProvider.tsx

@@ -23,6 +23,7 @@ import {useMemo, type ReactNode} from 'react';
 import {InternationalizationContext} from './InternationalizationContext';
 import {getLocaleDirection} from './getLocaleDirection';
 import type {Locale, MessagesByLocale, Overrides} from './types';
+import {getResolve} from './resolve';
 
 export interface InternationalizationProviderProps {
   /**
@@ -85,7 +86,13 @@ export function InternationalizationProvider({
 }: InternationalizationProviderProps) {
   const direction = dir ?? getLocaleDirection(locale);
   const value = useMemo(
-    () => ({locale, direction, messages: messages ?? {}, overrides}),
+    () => ({
+      locale,
+      direction,
+      messages: messages ?? {},
+      overrides,
+      translate: getResolve(locale, messages ?? {}, overrides),
+    }),
     [locale, direction, messages, overrides],
   );
   return (

package/src/i18n/__tests__/resolve.test.ts

@@ -9,9 +9,16 @@
  */
 
 import {describe, expect, test, beforeEach, vi} from 'vitest';
-import {__resetForTests, resolve, resolveLocaleChain} from '../resolve';
+import {__resetForTests, getResolve, resolveLocaleChain} from '../resolve';
 import type {Catalog, MessagesByLocale, Overrides} from '../types';
 
+const resolve = (
+  ...[key, values, locale, messages, overrides]: [
+    ...Parameters<ReturnType<typeof getResolve>>,
+    ...Parameters<typeof getResolve>,
+  ]
+) => getResolve(locale, messages, overrides)(key, values);
+
 // Reset caches between tests so warn-once and formatter cache don't bleed.
 beforeEach(() => {
   __resetForTests();
@@ -209,6 +216,21 @@ describe('resolve — overrides', () => {
     // Should fall through to en since fr has no messages and es override doesn't apply
     expect(out).toBe('Go to next page');
   });
+
+  test('override `pt` should take precedence over message `pt-BR`', () => {
+    const overrides: Overrides = {
+      pt: {key: 'override'},
+    };
+    const messages: MessagesByLocale = {
+      'pt-BR': {
+        key: {
+          defaultMessage: 'shipped',
+        },
+      },
+    };
+    const out = resolve('key', undefined, 'pt-BR', messages, overrides);
+    expect(out).toBe('override');
+  });
 });
 
 describe('resolve — ICU MessageFormat', () => {

package/src/i18n/resolve.ts

@@ -73,74 +73,71 @@ export function resolveLocaleChain(locale: Locale): Locale[] {
   return chain;
 }
 
-function lookup(
-  key: string,
+function getLookup(
   locale: Locale,
   messages: MessagesByLocale,
-  overrides: Overrides | undefined,
-): string | null {
+  overrides?: Overrides,
+): Record<string, string> {
+  const lookup: Record<string, string> = {};
   const chain = resolveLocaleChain(locale);
-
   // 1 + 2. Overrides (most specific to least specific in the chain)
   if (overrides !== undefined) {
     for (const tag of chain) {
-      const value = overrides[tag]?.[key];
-      if (value !== undefined) {
-        return value;
+      if (overrides[tag]) {
+        for (const [key, value] of Object.entries(overrides[tag])) {
+          if (lookup[key] === undefined && value !== null) {
+            lookup[key] = value;
+          }
+        }
       }
     }
   }
-
-  // 3 + 4. Shipped catalogs (most specific to least specific)
   for (const tag of chain) {
-    const entry = messages[tag]?.[key];
-    if (entry !== undefined) {
-      return entry.defaultMessage;
+    if (messages[tag]) {
+      for (const [key, value] of Object.entries(messages[tag])) {
+        if (lookup[key] === undefined && value?.defaultMessage !== null) {
+          lookup[key] = value?.defaultMessage;
+        }
+      }
     }
   }
 
-  // 5. Shipped en catalog — always present
-  const enEntry = EN_CATALOG[key];
-  if (enEntry !== undefined) {
-    return enEntry.defaultMessage;
-  }
-
-  // 6. Nothing found
-  return null;
+  return lookup;
 }
 
-export function resolve(
-  key: string,
-  values: Record<string, unknown> | undefined,
+export function getResolve(
   locale: Locale,
   messages: MessagesByLocale,
-  overrides: Overrides | undefined,
-): string {
-  const result = lookup(key, locale, messages, overrides);
-
-  if (result === null) {
-    // Fires ONLY when a key is missing from every source including the
-    // shipped `en` catalog — a real bug (typo, stale catalog, deleted key).
-    // Fallback to `en` from a non-en locale is expected and stays silent,
-    // matching the FormatJS / i18next default.
-    warnOnce(
-      `astryx-i18n:${locale}::${key}`,
-      'astryx-i18n',
-      `missing key: ${key} (locale: ${locale})`,
-    );
-    return key;
-  }
+  overrides?: Overrides,
+) {
+  const lookup = getLookup(locale, messages, overrides);
+
+  return (key: string, values: Record<string, unknown> | undefined) => {
+    const result = lookup[key] ?? EN_CATALOG[key]?.defaultMessage;
+    if (result === undefined) {
+      // Fires ONLY when a key is missing from every source including the
+      // shipped `en` catalog — a real bug (typo, stale catalog, deleted key).
+      // Fallback to `en` from a non-en locale is expected and stays silent,
+      // matching the FormatJS / i18next default.
+      warnOnce(
+        `astryx-i18n:${locale}::${key}`,
+        'astryx-i18n',
+        `missing key: ${key} (locale: ${locale})`,
+      );
+      return key;
+    }
 
-  if (values === undefined) {
-    // Static string — skip the parser entirely for the common case
-    return result;
-  }
+    if (values === undefined) {
+      // Static string — skip the parser entirely for the common case
+      return result;
+    }
 
-  const formatted = getFormatter(result, locale).format(values);
-  // IntlMessageFormat.format returns string | (string | React elements) — we
-  // only ever pass string values so it will be a string; assert for the type
-  // system.
-  return formatted as string;
+    const formatted = getFormatter(result, locale).format(values);
+    // IntlMessageFormat.format returns string | (string | React elements) — we
+    // only ever pass string values so it will be a string; assert for the type
+    // system.
+    return formatted as string;
+  };
 }
 
 /**

package/src/i18n/useTranslator.ts

@@ -19,9 +19,8 @@
  * - /packages/core/src/i18n/t.client.ts
  */
 
-import {use, useCallback} from 'react';
+import {use} from 'react';
 import {InternationalizationContext} from './InternationalizationContext';
-import {resolve} from './resolve';
 
 export type TranslatorFn = (
   key: string,
@@ -42,9 +41,5 @@ export type TranslatorFn = (
  */
 export function useTranslator(): TranslatorFn {
   const ctx = use(InternationalizationContext);
-  return useCallback(
-    (key: string, values?: Record<string, unknown>) =>
-      resolve(key, values, ctx.locale, ctx.messages, ctx.overrides),
-    [ctx.locale, ctx.messages, ctx.overrides],
-  );
+  return ctx.translate;
 }