@worldresources/wri-design-systems 2.191.24 → 2.192.0

package/README.md

@@ -399,6 +399,7 @@ line-height: ${getThemedLineHeight(600)};
 - [Slider Input](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Inputs/SliderInput)
 - [Text Area](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Inputs/Textarea)
 - [Text Input](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Inputs/TextInput)
+- [Rich Text Editor](https://github.com/wri/wri-design-systems/tree/main/src/components/Forms/Inputs/RichTextEditor)
 
 ### Tags
 

package/agents/AGENTS.md

@@ -39,6 +39,28 @@ Key rules (full details in the instructions file):
 5. **No Chakra v2 API** — v3 has breaking changes. Verify props via Chakra MCP.
 6. **Accessibility first** — always provide `aria-*` props (like `aria-label` or `aria-describedby`), explicit `role` attributes, and ensure keyboard focus navigation context when consuming components.
 
+## Internationalization (i18n) — Optional
+
+All WRI DS components ship with English defaults. No i18n setup is needed for English-only apps.
+
+If your application supports multiple languages, override internal component strings by passing pre-translated values via `DesignSystemLocaleProvider` (app-wide) or the component's `labels` prop (per-instance). The library has no runtime i18n dependency — pass strings from your own stack (react-intl, react-i18next, etc.).
+
+```tsx
+import { DesignSystemLocaleProvider } from '@worldresources/wri-design-systems'
+;<DesignSystemLocaleProvider
+  labels={{
+    TextInput: {
+      optionalSuffix: t('common.optional'),
+      requiredSymbolLabel: t('common.required'),
+    },
+  }}
+>
+  <App />
+</DesignSystemLocaleProvider>
+```
+
+Full reference — supported components, label types, and usage patterns: `docs/i18n/README.md`.
+
 ## Design Tokens — Source of Truth
 
 All token functions are imported from the **package**:

package/agents/setup-ai.mjs

@@ -85,6 +85,7 @@ function ensureGitignoreBlock() {
     '.windsurfrules',
     '.clinerules',
     '.github/copilot-instructions.md',
+    '.github/instructions/wri-ds.instructions.md',
     '.cursor/rules',
     '.cursor/mcp.json',
     '.vscode/mcp.json',

package/agents/wri-ds.instructions.md

@@ -126,3 +126,33 @@ import {
 | Raw token strings: `<Box bg="primary.500" />`                        | `getThemedColor('primary', 500)`                              |
 | Inventing prop names without checking MCP                            | Query Storybook MCP first                                     |
 | Chakra v2 API (`colorScheme`, `variant` on v2 components)            | Verify via Chakra MCP                                         |
+
+## Internationalization (i18n)
+
+All WRI DS components render English by default — no setup required for English-only apps.
+
+To provide translated strings, use one of two opt-in approaches:
+
+**Provider** (recommended when multiple components or screens need translations):
+
+```tsx
+import { DesignSystemLocaleProvider, type DesignSystemLabels } from '@worldresources/wri-design-systems'
+
+const labels: DesignSystemLabels = {
+  CheckboxList: { expandLabel: t('ds.expand'), hideLabel: t('ds.hide') },
+  TextInput: { optionalSuffix: t('common.optional'), requiredSymbolLabel: t('common.required') },
+}
+<DesignSystemLocaleProvider labels={labels}><App /></DesignSystemLocaleProvider>
+```
+
+**Per-component `labels` prop** (for isolated instances):
+
+```tsx
+<Password
+  labels={{ showLabel: t('password.show'), hideLabel: t('password.hide') }}
+/>
+```
+
+Pass pre-resolved strings only — never hardcoded English literals in `labels` props. Always route through your app's translation function.
+
+Full reference — all supported components, label types, and patterns: `docs/i18n/README.md`.