@worldresources/wri-design-systems 2.202.0 → 2.202.2

package/dist/index.d.ts

@@ -2,7 +2,7 @@ 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, SliderRootProps, Switch as Switch$1, SelectRootProps, TextareaProps as TextareaProps$1, InputProps, Tag as Tag$1, Accordion, Table as Table$1, Tabs, Alert } from '@chakra-ui/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 React__default, { ReactNode, HTMLAttributes, ReactElement, Ref } from 'react';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import { Placement } from '@floating-ui/react';
 import { MaybeElement } from '@zag-js/types';
@@ -15,7 +15,7 @@ type RadiusToken = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 type BorderWidthToken = 100 | 200 | 300 | 400;
 declare const designSystemStylesForTailwind: Record<string, string>;
 declare const designSystemStyles: _chakra_ui_react.SystemContext;
-declare const getThemedColor: (variant: ColorVariant, 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;
+declare const getThemedColor: (variant: ColorVariant, 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" | "text-on-negative-mids") => string;
 declare const getThemedFontSize: (token: FontSizeToken) => string;
 declare const getThemedSpacing: (token: SpacingToken) => string;
 declare const getThemedLineHeight: (token: LineHeightToken) => string;
@@ -689,7 +689,7 @@ declare const RichTextEditor: ({ defaultValue, disabled, ariaLabel, placeholder,
 type ButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children'> & {
     label?: string;
     loading?: boolean;
-    variant?: 'primary' | 'secondary' | 'borderless' | 'outline';
+    variant?: 'primary' | 'secondary' | 'borderless' | 'outline' | 'negative';
     size?: 'default' | 'small';
     disabled?: boolean;
     leftIcon?: React__default.ReactNode;
@@ -703,7 +703,7 @@ type ButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'ch
 declare const Button: React$1.ForwardRefExoticComponent<Omit<_chakra_ui_react.ButtonProps, "children" | "colorPalette" | "size" | "variant"> & {
     label?: string;
     loading?: boolean;
-    variant?: "primary" | "secondary" | "borderless" | "outline";
+    variant?: "primary" | "secondary" | "borderless" | "outline" | "negative";
     size?: "default" | "small";
     disabled?: boolean;
     leftIcon?: React.ReactNode;
@@ -825,9 +825,7 @@ type MenuProps = {
 
 declare const Menu: ({ theme, label, hideArrow, fontSize, items, groups, onSelect, customTrigger, selectionMode, defaultSelectedValues, menuWidth, labels, }: MenuProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-type MultiActionButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children'> & {
-    variant?: 'primary' | 'secondary';
-    size?: 'default' | 'small';
+type MultiActionButtonProps = Omit<ButtonProps, 'label' | 'leftIcon' | 'rightIcon' | 'onClick' | 'children' | 'css'> & {
     mainActionLeftIcon?: React__default.ReactNode;
     mainActionRightIcon?: React__default.ReactNode;
     mainActionLabel: string;
@@ -836,8 +834,8 @@ type MultiActionButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPal
         label: React__default.ReactNode;
         value: string;
         onClick: VoidFunction;
+        disabled?: boolean;
     }[];
-    disabled?: boolean;
 };
 
 declare const MultiActionButton: ({ variant, size, mainActionLabel, mainActionOnClick, otherActions, disabled: isDisabledProp, mainActionLeftIcon, mainActionRightIcon, ...rest }: MultiActionButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
@@ -995,6 +993,51 @@ type SwitchProps = Omit<Switch$1.RootProps, 'size' | 'variant' | 'colorPalette'
 
 declare const Switch: ({ name, defaultChecked, onChange, disabled, isLabelOnLeft, children, labels, ...rest }: SwitchProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type FieldWrapperSize = 'small' | 'default';
+type FieldWrapperLabels = {
+    /** Accessible label for the required (*) indicator. Default: "required" */
+    requiredSymbolLabel?: string;
+    /**
+     * Suffix appended after the field label when the field is optional.
+     * Default: " (Optional)"
+     */
+    optionalSuffix?: ReactNode;
+};
+type FieldWrapperProps = {
+    label?: ReactNode;
+    caption?: string;
+    errorMessage?: string;
+    /**
+     * Forces the error-bar / invalid state even when `errorMessage` is empty
+     * (e.g. Textarea min/max validation shown in the footer).
+     */
+    invalid?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    size?: FieldWrapperSize;
+    showOptionalLabel?: boolean;
+    noMarginBottom?: boolean;
+    /** Override strings used by field-semantics labels. */
+    labels?: FieldWrapperLabels;
+    /** Optional slot rendered after the control (e.g. Textarea char-count / min-max errors). */
+    footer?: ReactNode;
+    /**
+     * `field` — Chakra Field primitives (TextInput, Textarea, Combobox).
+     * `group` — plain markup for composite / list inputs (Select, RadioList, etc.).
+     */
+    semantics?: 'field' | 'group';
+    className?: string;
+    children: ReactNode;
+    /** Optional id on the caption element (for aria-describedby). */
+    captionId?: string;
+    /** Optional id on the error element (for aria-describedby). */
+    errorId?: string;
+    /** Extra props applied to the outer container element. */
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+};
+
+declare const FieldWrapper: ({ label, caption, errorMessage, invalid, required, disabled, size, showOptionalLabel, noMarginBottom, labels, footer, semantics, className, children, captionId, errorId, containerProps, }: FieldWrapperProps) => _emotion_react_jsx_runtime.JSX.Element;
+
 type CheckboxListLabel = string | {
     type: 'checkbox';
     label: string;
@@ -1107,7 +1150,7 @@ type SelectProps = Omit<SelectRootProps, 'collection' | 'size' | 'colorPalette'
     labels?: Partial<SelectLabels>;
 };
 
-declare const Select: ({ label, caption, placeholder, items, size, required, disabled, onChange, errorMessage, multiple, labels, ...rest }: SelectProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Select: ({ label, caption, placeholder, items, size, required, disabled, onChange, errorMessage, multiple, labels, value: controlledValue, defaultValue, ...rest }: SelectProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SliderInputProps = {
     label: string;
@@ -1137,7 +1180,7 @@ type TextareaProps = Omit<TextareaProps$1, 'size' | 'variant' | 'colorPalette' |
     labels?: Partial<TextareaLabels>;
 };
 
-declare const Textarea: ({ label, caption, placeholder, errorMessage, required, disabled, size, showOptionalLabel, defaultValue, onChange, minLength, maxLength, labels, ...rest }: TextareaProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Textarea: ({ label, caption, placeholder, errorMessage, required, disabled, size, showOptionalLabel, defaultValue, onChange, minLength, maxLength, labels, value: controlledValue, ...rest }: TextareaProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TextInputProps = Omit<InputProps, 'size' | 'variant' | 'colorPalette' | 'defaultChecked'> & {
     label?: string;
@@ -1155,7 +1198,7 @@ type TextInputProps = Omit<InputProps, 'size' | 'variant' | 'colorPalette' | 'de
     labels?: Partial<TextInputLabels>;
 };
 
-declare const TextInput: ({ label, caption, placeholder, errorMessage, required, disabled, size, showOptionalLabel, noMarginBottom, defaultValue, onChange, labels, ...rest }: TextInputProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TextInput: ({ label, caption, placeholder, errorMessage, required, disabled, size, showOptionalLabel, noMarginBottom, defaultValue, onChange, labels, value: controlledValue, ...rest }: TextInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ComboboxProps = {
     initialItems?: {
@@ -1795,4 +1838,4 @@ declare const Toast: React__default.FC<ToastComponentProps>;
 declare const showToast: (props: ToastProps) => void;
 declare const closeToast: (id?: string) => void;
 
-export { AlertBanner, type AlertBannerLabels, type AlertProps, AnalysisWidget, type AnalysisWidgetActionsProps, type AnalysisWidgetLabels, type AnalysisWidgetProps, Avatar, type AvatarLabels, type AvatarProps, Badge, type BadgeLabels, type BadgeProps, BaseMap, type BaseMapLabels, type BaseMapOptionProps, type BaseMapProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonLabels, type ButtonProps, Checkbox, CheckboxList, type CheckboxListLabel, type CheckboxListLabels, type CheckboxListProps, CheckboxOptionCard, type CheckboxOptionCardItemProps, type CheckboxOptionCardProps, type CheckboxProps, CloseButton, type CloseButtonLabels, type CloseButtonProps, ClusterPoint, Combobox, type ComboboxLabels, type ComboboxProps, type DesignSystemLabels, DesignSystemLocaleProvider, type DesignSystemLocaleProviderProps, ExtendableCard, type ExtendableCardProps, Footer, type FooterProps, FormContainer, type FormContainerProps, IconButton, type IconButtonProps, InlineMessage, type InlineMessageLabels, type InlineMessageProps, InputWithUnits, type InputWithUnitsProps, ItemCount, type ItemCountLabels, type ItemCountProps, LayerGroup, LayerGroupContainer, type LayerGroupContainerProps, type LayerGroupLabels, type LayerGroupProps, LayerItem, type LayerItemLabels, type LayerItemProps, LayerParameters, type LayerParametersProps, LegendItem, type LegendItemLabels, type LegendItemProps, List, type ListItemProps, type ListItemVariant, type ListProps, MapControlsToolbar, type MapControlsToolbarLabels, type MapControlsToolbarProps, MapMarker, type MapMarkerLabels, type MapMarkerProps, MapMarkers, MapPopUp, type MapPopUpLabels, type MapPopUpProps, Menu, type MenuItemProps, type MenuLabels, type MenuProps, MobileSearch, type MobileSearchLabels, type MobileSearchProps, MobileTabBar, type MobileTabBarItemProps, type MobileTabBarLabels, type MobileTabBarProps, Modal, type ModalLabels, type ModalProps, MultiActionButton, type MultiActionButtonProps, Navbar, type NavbarLabels, type NavbarNavigationItemsProps, type NavbarProps, NavigationRail, type NavigationRailLabels, type NavigationRailProps, type NavigationRailTabProps, type OpacityControlLabels, OptionCard, type OptionCardItemProps, type OptionCardProps, Pagination, type PaginationLabels, type PaginationProps, Panel, type PanelProps, Password, type PasswordLabels, type PasswordProps, ProgressBar, type ProgressBarLabels, type ProgressBarProps, QualitativeAttribute, type QualitativeAttributeLabels, type QualitativeAttributeProps, Radio, RadioGroup, type RadioGroupProps, RadioList, type RadioListLabels, type RadioListProps, type RadioProps, RichTextEditor, type RichTextEditorControlKey, type RichTextEditorLabels, type RichTextEditorProps, type RichTextEditorSize, SSOButtons, ScaleBar, type ScaleBarProps, Search, type SearchLabels, type SearchProps, Select, type SelectItemProps, type SelectLabels, type SelectProps, Sheet, type SheetLabels, type SheetProps, SimpleMapPin, Slider, SliderInput, type SliderInputProps, type SliderMarksProps, type SliderProps, StepProgressIndicator, type StepProgressIndicatorLabels, type StepProgressIndicatorProps, type StrengthLevel, Switch, type SwitchLabels, type SwitchProps, TabBar, type TabBarItemProps, type TabBarProps, Table, TableCell, type TableLabels, type TableProps, TableRow, Tag, type TagLabels, type TagProps, TextInput, type TextInputLabels, type TextInputProps, Textarea, type TextareaLabels, type TextareaProps, Toast, type ToastComponentProps, type ToastLabels, type ToastProps, Toolbar, type ToolbarButtonProps, type ToolbarItem, type ToolbarLabels, type ToolbarProps, Tooltip, type TooltipProps, closeToast, designSystemStyles, designSystemStylesForTailwind, getThemedBorderWidth, getThemedColor, getThemedFontSize, getThemedLineHeight, getThemedRadius, getThemedSpacing, showToast };
+export { AlertBanner, type AlertBannerLabels, type AlertProps, AnalysisWidget, type AnalysisWidgetActionsProps, type AnalysisWidgetLabels, type AnalysisWidgetProps, Avatar, type AvatarLabels, type AvatarProps, Badge, type BadgeLabels, type BadgeProps, BaseMap, type BaseMapLabels, type BaseMapOptionProps, type BaseMapProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonLabels, type ButtonProps, Checkbox, CheckboxList, type CheckboxListLabel, type CheckboxListLabels, type CheckboxListProps, CheckboxOptionCard, type CheckboxOptionCardItemProps, type CheckboxOptionCardProps, type CheckboxProps, CloseButton, type CloseButtonLabels, type CloseButtonProps, ClusterPoint, Combobox, type ComboboxLabels, type ComboboxProps, type DesignSystemLabels, DesignSystemLocaleProvider, type DesignSystemLocaleProviderProps, ExtendableCard, type ExtendableCardProps, FieldWrapper, type FieldWrapperLabels, type FieldWrapperProps, type FieldWrapperSize, Footer, type FooterProps, FormContainer, type FormContainerProps, IconButton, type IconButtonProps, InlineMessage, type InlineMessageLabels, type InlineMessageProps, InputWithUnits, type InputWithUnitsProps, ItemCount, type ItemCountLabels, type ItemCountProps, LayerGroup, LayerGroupContainer, type LayerGroupContainerProps, type LayerGroupLabels, type LayerGroupProps, LayerItem, type LayerItemLabels, type LayerItemProps, LayerParameters, type LayerParametersProps, LegendItem, type LegendItemLabels, type LegendItemProps, List, type ListItemProps, type ListItemVariant, type ListProps, MapControlsToolbar, type MapControlsToolbarLabels, type MapControlsToolbarProps, MapMarker, type MapMarkerLabels, type MapMarkerProps, MapMarkers, MapPopUp, type MapPopUpLabels, type MapPopUpProps, Menu, type MenuItemProps, type MenuLabels, type MenuProps, MobileSearch, type MobileSearchLabels, type MobileSearchProps, MobileTabBar, type MobileTabBarItemProps, type MobileTabBarLabels, type MobileTabBarProps, Modal, type ModalLabels, type ModalProps, MultiActionButton, type MultiActionButtonProps, Navbar, type NavbarLabels, type NavbarNavigationItemsProps, type NavbarProps, NavigationRail, type NavigationRailLabels, type NavigationRailProps, type NavigationRailTabProps, type OpacityControlLabels, OptionCard, type OptionCardItemProps, type OptionCardProps, Pagination, type PaginationLabels, type PaginationProps, Panel, type PanelProps, Password, type PasswordLabels, type PasswordProps, ProgressBar, type ProgressBarLabels, type ProgressBarProps, QualitativeAttribute, type QualitativeAttributeLabels, type QualitativeAttributeProps, Radio, RadioGroup, type RadioGroupProps, RadioList, type RadioListLabels, type RadioListProps, type RadioProps, RichTextEditor, type RichTextEditorControlKey, type RichTextEditorLabels, type RichTextEditorProps, type RichTextEditorSize, SSOButtons, ScaleBar, type ScaleBarProps, Search, type SearchLabels, type SearchProps, Select, type SelectItemProps, type SelectLabels, type SelectProps, Sheet, type SheetLabels, type SheetProps, SimpleMapPin, Slider, SliderInput, type SliderInputProps, type SliderMarksProps, type SliderProps, StepProgressIndicator, type StepProgressIndicatorLabels, type StepProgressIndicatorProps, type StrengthLevel, Switch, type SwitchLabels, type SwitchProps, TabBar, type TabBarItemProps, type TabBarProps, Table, TableCell, type TableLabels, type TableProps, TableRow, Tag, type TagLabels, type TagProps, TextInput, type TextInputLabels, type TextInputProps, Textarea, type TextareaLabels, type TextareaProps, Toast, type ToastComponentProps, type ToastLabels, type ToastProps, Toolbar, type ToolbarButtonProps, type ToolbarItem, type ToolbarLabels, type ToolbarProps, Tooltip, type TooltipProps, closeToast, designSystemStyles, designSystemStylesForTailwind, getThemedBorderWidth, getThemedColor, getThemedFontSize, getThemedLineHeight, getThemedRadius, getThemedSpacing, showToast };