@worldresources/wri-design-systems 2.186.2 → 2.187.0

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as _chakra_ui_react from '@chakra-ui/react';
 import { ButtonProps as ButtonProps$1, Checkbox as Checkbox$1, RadioCardRootProps, RadioGroup as RadioGroup$1, Slider as Slider$1, Switch as Switch$1, SelectRootProps, SliderRootProps, TextareaProps as TextareaProps$1, InputProps, Tag as Tag$1, Accordion, Table as Table$1, Tabs } from '@chakra-ui/react';
-import * as React$1 from 'react';
-import React__default, { ReactElement, Ref } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default, { ReactNode, ReactElement, Ref } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { Placement } from '@floating-ui/react';
 
@@ -10,8 +10,138 @@ declare const designSystemStylesForTailwind: Record<string, string>;
 declare const designSystemStyles: _chakra_ui_react.SystemContext;
 declare const getThemedColor: (variant: "neutral" | "primary" | "secondary" | "success" | "warning" | "error" | "accessible", index: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | "text-on-primary-mids" | "text-on-secondary-mids" | "controls-on-neutral-lights" | "controls-on-neutral-darks") => string;
 
+/**
+ * Use for label keys that are rendered as visible JSX text (children of elements).
+ * Consumers can pass strings, elements, or fragments.
+ *
+ * Keys used directly as `aria-label` / `aria-roledescription` or inside
+ * template literals fed to ARIA attributes must stay typed as `string` — the
+ * HTML spec requires those values to be plain strings.
+ */
+type ReactNodeLabel = ReactNode;
+/**
+ * Labels for CheckboxList internal UI strings.
+ * Override any key to provide translations.
+ */
+type CheckboxListLabels = {
+    /**
+     * Text on the toggle button when the list is collapsed.
+     * Rendered as JSX child — accepts ReactNode.
+     * Default: "Expand"
+     */
+    expandLabel: ReactNodeLabel;
+    /**
+     * Text on the toggle button when the list is expanded.
+     * Rendered as JSX child — accepts ReactNode.
+     * Default: "Hide"
+     */
+    hideLabel: ReactNodeLabel;
+    /** Appended to the group aria-label when the field is required. Must be string (aria-label). Default: "Required." */
+    requiredLabel: string;
+    /** Appended to the group aria-label when the field is optional. Must be string (aria-label). Default: "Optional" */
+    optionalLabel: string;
+    /** Prefix prepended to error messages in the group aria-label. Must be string (aria-label). Default: "Error:" */
+    errorPrefix: string;
+    /** Accessible label for the required (*) symbol. Must be string (aria-label). Default: "required" */
+    requiredSymbolLabel: string;
+};
+/**
+ * Labels for Password internal UI strings.
+ * Override any key to provide translations.
+ */
+type PasswordLabels = {
+    /** Button label when password is hidden. Must be string (passed to Button.label: string). Default: "Show" */
+    showLabel: string;
+    /** Button label when password is visible. Must be string (passed to Button.label: string). Default: "Hide" */
+    hideLabel: string;
+    /** Aria-label for the reveal button when password is hidden. Must be string (aria-label). Default: "Show password" */
+    showPasswordLabel: string;
+    /** Aria-label for the reveal button when password is visible. Must be string (aria-label). Default: "Hide password" */
+    hidePasswordLabel: string;
+    /**
+     * Text prefix before the strength value.
+     * Rendered as JSX child — accepts ReactNode.
+     * Default: "Password Strength:"
+     */
+    strengthPrefix: ReactNodeLabel;
+    /**
+     * Displayed label for each strength level — rendered as JSX children.
+     * All five accept ReactNode.
+     */
+    strengthVeryWeak: ReactNodeLabel;
+    strengthWeak: ReactNodeLabel;
+    strengthMedium: ReactNodeLabel;
+    strengthStrong: ReactNodeLabel;
+    strengthVeryStrong: ReactNodeLabel;
+    /** Appended to a rule's aria-label when satisfied. Must be string (aria-label template). Default: "Requirement met." */
+    requirementMet: string;
+    /** Appended to a rule's aria-label when not satisfied. Must be string (aria-label template). Default: "Requirement not met." */
+    requirementNotMet: string;
+    /**
+     * Dual-use: rendered as `<p>` text AND inside an aria-label template.
+     * Must be string to satisfy the aria-label constraint.
+     * Default: (min) => `Use a minimum of ${min} characters`
+     */
+    minLengthRule: (min: number) => string;
+    /** Dual-use (p + aria-label). Must be string. Default: "Use an uppercase letter" */
+    uppercaseRule: string;
+    /** Dual-use (p + aria-label). Must be string. Default: "Use a lowercase letter" */
+    lowercaseRule: string;
+    /** Dual-use (p + aria-label). Must be string. Default: "Use a number" */
+    numberRule: string;
+    /** Dual-use (p + aria-label). Must be string. Default: "Use a special character" */
+    specialCharRule: string;
+};
+/**
+ * Labels for TextInput internal UI strings.
+ * Override any key to provide translations.
+ */
+type TextInputLabels = {
+    /** Accessible label for the required (*) indicator. Must be string (aria-label). Default: "required" */
+    requiredSymbolLabel: string;
+    /**
+     * Suffix appended after the field label when the field is optional.
+     * Rendered as JSX child inside a <span> — accepts ReactNode.
+     * Default: " (Optional)"
+     */
+    optionalSuffix: ReactNodeLabel;
+};
+/**
+ * Top-level labels map for the design system.
+ * Consumers can provide partial overrides for any component via
+ * `DesignSystemLocaleProvider` or directly via each component's `labels` prop.
+ *
+ * Add new component entries here as i18n support is rolled out.
+ */
+type DesignSystemLabels = {
+    CheckboxList?: Partial<CheckboxListLabels>;
+    Password?: Partial<PasswordLabels>;
+    TextInput?: Partial<TextInputLabels>;
+};
+
+type DesignSystemLocaleProviderProps = {
+    /** Partial label overrides for any supported component. */
+    labels: DesignSystemLabels;
+    children: ReactNode;
+};
+/**
+ * Provides translated label overrides to all child design system components.
+ * Works with any i18n library (react-intl, react-i18next, etc.) — consumers
+ * pass pre-translated strings.
+ *
+ * @example
+ * ```tsx
+ * <DesignSystemLocaleProvider labels={{
+ *   CheckboxList: { expandLabel: 'Mostrar', hideLabel: 'Ocultar' },
+ * }}>
+ *   <App />
+ * </DesignSystemLocaleProvider>
+ * ```
+ */
+declare const DesignSystemLocaleProvider: ({ labels, children, }: DesignSystemLocaleProviderProps) => react_jsx_runtime.JSX.Element;
+
 /** @jsxImportSource @emotion/react */
-declare const Button: React$1.ForwardRefExoticComponent<Omit<_chakra_ui_react.ButtonProps, "size" | "variant" | "colorPalette" | "children"> & {
+declare const Button: React$1.ForwardRefExoticComponent<Omit<_chakra_ui_react.ButtonProps, "children" | "size" | "variant" | "colorPalette"> & {
     label?: string;
     loading?: boolean;
     variant?: "primary" | "secondary" | "borderless" | "outline";
@@ -256,9 +386,11 @@ type CheckboxListProps = {
     required?: boolean;
     hideCheckedCounter?: boolean;
     hideExpandToggle?: boolean;
+    /** Override internal UI labels for internationalization support. */
+    labels?: Partial<CheckboxListLabels>;
 };
 
-declare const CheckboxList: ({ label, caption, checkboxes, defaultValues, onCheckedChange, errorMessage, horizontal, required, hideCheckedCounter, hideExpandToggle, }: CheckboxListProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const CheckboxList: ({ label, caption, checkboxes, defaultValues, onCheckedChange, errorMessage, horizontal, required, hideCheckedCounter, hideExpandToggle, labels, }: CheckboxListProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type InputWithUnitsProps = {
     label: string;
@@ -299,9 +431,11 @@ type PasswordProps = {
     };
     minLength?: number;
     hideValidations?: boolean;
+    /** Override internal UI labels for internationalization support. */
+    labels?: Partial<PasswordLabels>;
 };
 
-declare const Password: ({ label, caption, required, disabledRules, onChange, minLength, hideValidations, }: PasswordProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Password: ({ label, caption, required, disabledRules, onChange, minLength, hideValidations, labels, }: PasswordProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type RadioListProps = {
     label: string;
@@ -396,9 +530,11 @@ type TextInputProps = Omit<InputProps, 'size' | 'variant' | 'colorPalette' | 'de
     noMarginBottom?: boolean;
     defaultValue?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Override internal UI labels for internationalization support. */
+    labels?: Partial<TextInputLabels>;
 };
 
-declare const TextInput: ({ label, caption, placeholder, errorMessage, required, disabled, size, noMarginBottom, defaultValue, onChange, ...rest }: TextInputProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TextInput: ({ label, caption, placeholder, errorMessage, required, disabled, size, noMarginBottom, defaultValue, onChange, labels, ...rest }: TextInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TagProps = Omit<Tag$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'children'> & {
     label: string;
@@ -927,4 +1063,4 @@ type ToastProps = {
 
 declare const showToast: (props: ToastProps) => void;
 
-export { AnalysisWidget, Avatar, Badge, BaseMap, Breadcrumb, Button, Checkbox, CheckboxList, CheckboxOptionCard, CloseButton, ClusterPoint, ExtendableCard, Footer, IconButton, InlineMessage, InputWithUnits, ItemCount, LayerGroup, LayerGroupContainer, LayerItem, LayerParameters, LegendItem, List, MapControlsToolbar, MapMarker, MapMarkers, MapPopUp, Menu, MobileTabBar, Modal, MultiActionButton, Navbar, NavigationRail, OptionCard, Pagination, Panel, Password, ProgressBar, QualitativeAttribute, Radio, RadioGroup, RadioList, SSOButtons, ScaleBar, Search, Select, Sheet, SimpleMapPin, Slider, SliderInput, StepProgressIndicator, Switch, TabBar, Table, TableCell, TableRow, Tag, TextInput, Textarea, Toast, Toolbar, Tooltip, designSystemStyles, designSystemStylesForTailwind, getThemedColor, showToast };
+export { AnalysisWidget, Avatar, Badge, BaseMap, Breadcrumb, Button, Checkbox, CheckboxList, type CheckboxListLabels, CheckboxOptionCard, CloseButton, ClusterPoint, type DesignSystemLabels, DesignSystemLocaleProvider, type DesignSystemLocaleProviderProps, ExtendableCard, Footer, IconButton, InlineMessage, InputWithUnits, ItemCount, LayerGroup, LayerGroupContainer, LayerItem, LayerParameters, LegendItem, List, MapControlsToolbar, MapMarker, MapMarkers, MapPopUp, Menu, MobileTabBar, Modal, MultiActionButton, Navbar, NavigationRail, OptionCard, Pagination, Panel, Password, type PasswordLabels, ProgressBar, QualitativeAttribute, Radio, RadioGroup, RadioList, SSOButtons, ScaleBar, Search, Select, Sheet, SimpleMapPin, Slider, SliderInput, StepProgressIndicator, Switch, TabBar, Table, TableCell, TableRow, Tag, TextInput, type TextInputLabels, Textarea, Toast, Toolbar, Tooltip, designSystemStyles, designSystemStylesForTailwind, getThemedColor, showToast };