@worldresources/wri-design-systems 1.2.0 → 2.117.0

package/dist/index.d.ts

@@ -1,6 +1,10 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps as ButtonProps$1, Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, Slider as Slider$1, Switch as Switch$1, SelectRootProps, TextareaProps as TextareaProps$1, InputProps, Tag as Tag$1, Accordion, Tabs } from '@chakra-ui/react';
+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, Tabs } from '@chakra-ui/react';
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import React$1 from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const designSystemStyles: _chakra_ui_react.SystemContext;
 
 type ButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children'> & {
     label?: string;
@@ -12,20 +16,20 @@ type ButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'ch
     rightIcon?: React$1.ReactNode;
 };
 
-declare const Button: ({ label, loading, variant, size, disabled, leftIcon, rightIcon, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ label, loading, variant, size, disabled, leftIcon, rightIcon, ...rest }: ButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type CloseButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children' | '_loading'> & {
     disabled?: boolean;
 };
 
-declare const CloseButton: ({ disabled, ...rest }: CloseButtonProps) => react_jsx_runtime.JSX.Element;
+declare const CloseButton: ({ disabled, ...rest }: CloseButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type IconButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children' | '_loading'> & {
     icon: React$1.ReactNode;
     disabled?: boolean;
 };
 
-declare const IconButton: ({ icon, disabled, ...rest }: IconButtonProps) => react_jsx_runtime.JSX.Element;
+declare const IconButton: ({ icon, disabled, ...rest }: IconButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type MultiActionButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children'> & {
     variant?: 'primary' | 'secondary';
@@ -40,7 +44,7 @@ type MultiActionButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPal
     disabled?: boolean;
 };
 
-declare const MultiActionButton: ({ variant, size, mainActionLabel, mainActionOnClick, otherActions, ...rest }: MultiActionButtonProps) => react_jsx_runtime.JSX.Element;
+declare const MultiActionButton: ({ variant, size, mainActionLabel, mainActionOnClick, otherActions, ...rest }: MultiActionButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type CheckboxProps = Omit<Checkbox$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'icon' | 'iconColor' | 'iconSize' | 'spacing' | 'invalid'> & {
     name?: string;
@@ -54,29 +58,51 @@ type CheckboxProps = Omit<Checkbox$1.RootProps, 'size' | 'variant' | 'colorPalet
     }) => void;
 };
 
-declare const Checkbox: ({ name, value, checked, defaultChecked, disabled, indeterminate, onCheckedChange, children, ...rest }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+declare const Checkbox: ({ name, value, checked, defaultChecked, disabled, indeterminate, onCheckedChange, children, ...rest }: CheckboxProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type OptionCardProps = {
+    label: string;
+    caption?: string;
+    icon?: React.ReactNode;
+    variant?: 'default' | 'centered' | 'expanded';
+    disabled?: boolean;
+    children?: React.ReactNode;
+    value: string;
+};
+type OptionCardGroupProps = Omit<RadioCardRootProps, 'colorPalette' | 'size' | 'variant' | 'as' | 'asChild' | 'unstyled' | 'defaultChecked'> & {
+    defaultValue?: string;
+    onValueChange?: ({ value }: {
+        value: string;
+    }) => void;
+};
+
+declare const OptionCard: ({ label, caption, icon, variant, disabled, children, value, }: OptionCardProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+declare const OptionCardGroup: ({ children, ...rest }: OptionCardGroupProps) => react_jsx_runtime.JSX.Element;
 
 type RadioProps = Omit<RadioGroup$1.ItemProps, 'size' | 'variant' | 'colorPalette' | 'name' | 'defaultChecked' | 'onChange'> & {
     value: string;
     disabled?: boolean;
 };
-type RadioGroupProps = Omit<RadioGroup$1.ItemProps, 'size' | 'variant' | 'colorPalette' | 'value' | 'onChange'> & {
+type RadioGroupProps = Omit<RadioGroup$1.ItemProps, 'size' | 'variant' | 'colorPalette' | 'value' | 'onChange' | 'children'> & {
     name: string;
     defaultValue?: string;
-    isRow?: boolean;
+    horizontal?: boolean;
     onChange?: (name: string, selectedValue: string) => void;
     customGap?: string;
+    children?: React.ReactNode;
 };
 
-declare const Radio: ({ children, value, disabled, ...rest }: RadioProps) => react_jsx_runtime.JSX.Element;
+declare const Radio: ({ children, value, disabled, ...rest }: RadioProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+declare const RadioGroup: ({ children, horizontal, name, defaultValue, onChange, customGap, ...rest }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
 
-declare const RadioGroup: ({ children, isRow, name, defaultValue, onChange, customGap, ...rest }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
+/** @jsxImportSource @emotion/react */
 
-declare const Slider: React$1.ForwardRefExoticComponent<Omit<Slider$1.RootProps, "size" | "variant" | "colorPalette" | "label" | "defaultChecked" | "origin" | "thumbAlignment" | "thumbSize"> & {
+declare const Slider: React$1.ForwardRefExoticComponent<Omit<Slider$1.RootProps, "size" | "variant" | "colorPalette" | "label" | "defaultChecked" | "defaultValue" | "origin" | "thumbAlignment" | "thumbSize"> & {
     width?: string;
     min?: number;
     max?: number;
-    defaultValue?: number[];
     value?: number[];
     marks?: Array<number | {
         value: number;
@@ -101,7 +127,78 @@ type SwitchProps = Omit<Switch$1.RootProps, 'size' | 'variant' | 'colorPalette'
     isLabelOnLeft?: boolean;
 };
 
-declare const Switch: ({ name, defaultChecked, onChange, disabled, isLabelOnLeft, children, ...rest }: SwitchProps) => react_jsx_runtime.JSX.Element;
+declare const Switch: ({ name, defaultChecked, onChange, disabled, isLabelOnLeft, children, ...rest }: SwitchProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type CheckboxListProps = {
+    label: string;
+    caption?: string;
+    checkboxes: CheckboxProps[];
+    defaultValue?: string;
+    onCheckedChange?: (checkedValues: {
+        [name: string]: boolean;
+    }) => void;
+    errorMessage?: string;
+    horizontal?: boolean;
+    required?: boolean;
+};
+
+declare const CheckboxList: ({ label, caption, checkboxes, defaultValue, onCheckedChange, errorMessage, horizontal, required, }: CheckboxListProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type InputWithUnitsProps = {
+    label: string;
+    caption?: string;
+    errorMessage?: string;
+    units: {
+        label: string;
+        value: string;
+    }[];
+    unitsPosition?: 'start' | 'end';
+    defaultValue?: string;
+    defaultUnit?: string;
+    onChange?: (value: string) => void;
+    required?: boolean;
+    disabled?: boolean;
+};
+
+declare const InputWithUnits: ({ label, caption, errorMessage, units, unitsPosition, defaultUnit, defaultValue, onChange, required, disabled, }: InputWithUnitsProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type PasswordProps = {
+    label: string;
+    caption?: string;
+    required?: boolean;
+    onChange?: ({ strength, length, uppercase, lowercase, numbers, specialCharacters, }: {
+        strength: string;
+        length: boolean;
+        uppercase: boolean;
+        lowercase: boolean;
+        numbers: boolean;
+        specialCharacters: boolean;
+    }) => void;
+    disabledRules?: {
+        uppercase?: boolean;
+        lowercase?: boolean;
+        numbers?: boolean;
+        specialCharacters?: boolean;
+    };
+    minLength?: number;
+    hideValidations?: boolean;
+};
+
+declare const Password: ({ label, caption, required, disabledRules, onChange, minLength, hideValidations, }: PasswordProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type RadioListProps = {
+    label: string;
+    caption?: string;
+    name: string;
+    radios: RadioProps[];
+    defaultValue?: string;
+    onCheckedChange?: (name: string, selectedValue: string) => void;
+    errorMessage?: string;
+    horizontal?: boolean;
+    required?: boolean;
+};
+
+declare const RadioList: ({ label, caption, name, radios, defaultValue, onCheckedChange, errorMessage, horizontal, required, }: RadioListProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type SelectItemProps = {
     label: string;
@@ -109,7 +206,7 @@ type SelectItemProps = {
     value: string;
 };
 type SelectProps = Omit<SelectRootProps, 'collection' | 'size' | 'colorPalette' | 'variant' | 'onValueChange' | 'onChange' | 'defaultChecked' | 'invalid'> & {
-    label: string;
+    label?: string;
     caption?: string;
     placeholder: string;
     defaultValue?: string[];
@@ -122,7 +219,37 @@ type SelectProps = Omit<SelectRootProps, 'collection' | 'size' | 'colorPalette'
     multiple?: boolean;
 };
 
-declare const Select: ({ label, caption, placeholder, items, size, required, disabled, onChange, errorMessage, multiple, ...rest }: SelectProps) => react_jsx_runtime.JSX.Element;
+declare const Select: ({ label, caption, placeholder, items, size, required, disabled, onChange, errorMessage, multiple, ...rest }: SelectProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type ValueChangeDetails = {
+    value: number[];
+};
+type SliderProps = Omit<SliderRootProps, 'size' | 'variant' | 'colorPalette' | 'thumbAlignment' | 'thumbSize' | 'label' | 'defaultChecked' | 'origin' | 'defaultValue'> & {
+    width?: string;
+    min?: number;
+    max?: number;
+    value?: number[];
+    marks?: Array<number | {
+        value: number;
+        label: React.ReactNode;
+    }>;
+    step?: number;
+    disabled?: boolean;
+    onValueChange?: (details: ValueChangeDetails) => void;
+    onValueChangeEnd?: (details: ValueChangeDetails) => void;
+    isCentred?: boolean;
+};
+
+type SliderInputProps = {
+    label: string;
+    caption?: string;
+    size?: 'default' | 'small';
+    sliderItem: SliderProps;
+    required?: boolean;
+    onChange?: (value: number[]) => void;
+};
+
+declare const SliderInput: ({ label, caption, size, sliderItem, required, onChange, }: SliderInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TextareaProps = Omit<TextareaProps$1, 'size' | 'variant' | 'colorPalette' | 'defaultChecked'> & {
     label: string;
@@ -138,7 +265,7 @@ type TextareaProps = Omit<TextareaProps$1, 'size' | 'variant' | 'colorPalette' |
     maxLength?: number;
 };
 
-declare const Textarea: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, minLength, maxLength, ...rest }: TextareaProps) => react_jsx_runtime.JSX.Element;
+declare const Textarea: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, minLength, maxLength, ...rest }: TextareaProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TextInputProps = Omit<InputProps, 'size' | 'variant' | 'colorPalette' | 'defaultChecked'> & {
     label?: string;
@@ -152,7 +279,7 @@ type TextInputProps = Omit<InputProps, 'size' | 'variant' | 'colorPalette' | 'de
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-declare const TextInput: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, ...rest }: TextInputProps) => react_jsx_runtime.JSX.Element;
+declare const TextInput: ({ label, caption, placeholder, errorMessage, required, disabled, size, defaultValue, onChange, ...rest }: TextInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TagProps = Omit<Tag$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'children'> & {
     label: string;
@@ -164,7 +291,7 @@ type TagProps = Omit<Tag$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'chi
     closable?: boolean;
 };
 
-declare const Tag: ({ label, size, variant, disabled, icon, onClose, closable, ...rest }: TagProps) => react_jsx_runtime.JSX.Element;
+declare const Tag: ({ label, size, variant, disabled, icon, onClose, closable, ...rest }: TagProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type LayerItemProps = {
     name: string;
@@ -190,11 +317,11 @@ type LayerGroupProps = {
     onChangeForRadioVariant?: (name: string, checked: boolean, selectedValue?: string) => void;
 };
 
-declare const LayerGroup: ({ label, caption, value, layerItems, onChangeForRadioVariant, }: LayerGroupProps) => react_jsx_runtime.JSX.Element;
+declare const LayerGroup: ({ label, caption, value, layerItems, onChangeForRadioVariant, }: LayerGroupProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare const LayerGroupContainer: ({ children, defaultValue, ...rest }: LayerGroupContainerProps) => react_jsx_runtime.JSX.Element;
+declare const LayerGroupContainer: ({ children, defaultValue, ...rest }: LayerGroupContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare const LayerItem: ({ name, label, caption, showInfoButton, infoButtonLabel, variant, disabled, onInfoClick, isDefaultSelected, onChange, }: LayerItemProps) => react_jsx_runtime.JSX.Element;
+declare const LayerItem: ({ name, label, caption, showInfoButton, infoButtonLabel, variant, disabled, onInfoClick, isDefaultSelected, onChange, }: LayerItemProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TabBarItemProps = Omit<Tabs.TriggerProps, 'asChild'> & {
     label: string;
@@ -219,7 +346,7 @@ type LayerPanelProps = {
     children: React.ReactNode;
 };
 
-declare const LayerPanel: ({ title, description, tabBarVariant, buttonTabs, defaultValue, onTabClick, children, }: LayerPanelProps) => react_jsx_runtime.JSX.Element;
+declare const LayerPanel: ({ title, description, tabBarVariant, buttonTabs, defaultValue, onTabClick, children, }: LayerPanelProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type LayerParametersProps = {
     label: string;
@@ -227,7 +354,7 @@ type LayerParametersProps = {
     openedByDefault?: boolean;
 };
 
-declare const LayerParameters: ({ label, children, openedByDefault, }: LayerParametersProps) => react_jsx_runtime.JSX.Element;
+declare const LayerParameters: ({ label, children, openedByDefault, }: LayerParametersProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type LegendItemProps = {
     layerName: string;
@@ -241,7 +368,7 @@ type LegendItemProps = {
     onOpacityChanged: (value: number) => void;
 };
 
-declare const LegendItem: ({ layerName, dataUnit, onDrag, onUpClick, onDownClick, onRemoveClick, children, onInfoClick, onOpacityChanged, }: LegendItemProps) => react_jsx_runtime.JSX.Element;
+declare const LegendItem: ({ layerName, dataUnit, onDrag, onUpClick, onDownClick, onRemoveClick, children, onInfoClick, onOpacityChanged, }: LegendItemProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type LegendPanelProps = {
     legendContent: React$1.ReactElement[];
@@ -249,7 +376,7 @@ type LegendPanelProps = {
     onTabClick?: (tabValue: string) => void;
 };
 
-declare const LegendPanel: ({ legendContent, analysisContent, onTabClick, }: LegendPanelProps) => react_jsx_runtime.JSX.Element;
+declare const LegendPanel: ({ legendContent, analysisContent, onTabClick, }: LegendPanelProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type QualitativeAttributeProps = {
     type: 'raster' | 'line' | 'point';
@@ -261,7 +388,7 @@ type QualitativeAttributeProps = {
     pointIcon?: React.ReactNode;
 };
 
-declare const QualitativeAttribute: ({ type, label, caption, color, onActionClick, showActionButton, pointIcon, }: QualitativeAttributeProps) => react_jsx_runtime.JSX.Element;
+declare const QualitativeAttribute: ({ type, label, caption, color, onActionClick, showActionButton, pointIcon, }: QualitativeAttributeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ScaleBarProps = {
     colors: string[];
@@ -270,7 +397,30 @@ type ScaleBarProps = {
     isGradient?: boolean;
 };
 
-declare const ScaleBar: ({ colors, values, subLabels, isGradient }: ScaleBarProps) => react_jsx_runtime.JSX.Element;
+declare const ScaleBar: ({ colors, values, subLabels, isGradient }: ScaleBarProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type BreadcrumbProps = {
+    links: {
+        label: string;
+        link: string;
+        icon?: React.ReactNode;
+    }[];
+    separator?: React.ReactNode;
+    maxItems?: number;
+    linkRouter: any;
+};
+
+declare const Breadcrumb: ({ links, separator, maxItems, linkRouter, }: BreadcrumbProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type FooterProps = {
+    children: React.ReactNode;
+    label?: string;
+    fixed?: boolean;
+    filled?: boolean;
+    maxWidth?: number;
+};
+
+declare const Footer: ({ children, label, fixed, filled, maxWidth, }: FooterProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type NavigationRailTabProps = Omit<Tabs.TriggerProps, 'asChild'> & {
     label: string;
@@ -284,11 +434,19 @@ type NavigationRailProps = {
     onTabClick?: (selectedValue: string) => void;
     children?: React.ReactNode;
     onOpenChange?: (open: boolean) => void;
+    customHeight?: string;
 };
 
-declare const NavigationRail: ({ tabs, defaultValue, onTabClick, children, onOpenChange, }: NavigationRailProps) => react_jsx_runtime.JSX.Element;
+declare const NavigationRail: ({ tabs, defaultValue, onTabClick, children, onOpenChange, customHeight, }: NavigationRailProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+declare const TabBar: ({ variant, defaultValue, tabs, onTabClick, }: TabBarProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type BadgeProps = {
+    hasNotification?: boolean;
+    notificationCount?: number;
+};
 
-declare const TabBar: ({ variant, defaultValue, tabs, onTabClick, }: TabBarProps) => react_jsx_runtime.JSX.Element;
+declare const Badge: ({ hasNotification, notificationCount }: BadgeProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type InlineMessageProps = {
     label: string;
@@ -301,6 +459,27 @@ type InlineMessageProps = {
     isButtonRight?: boolean;
 };
 
-declare const InlineMessage: ({ label, caption, variant, size, icon, onActionClick, actionLabel, isButtonRight, }: InlineMessageProps) => react_jsx_runtime.JSX.Element;
+declare const InlineMessage: ({ label, caption, variant, size, icon, onActionClick, actionLabel, isButtonRight, }: InlineMessageProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+/** @jsxImportSource @emotion/react */
+
+declare const Toast: React$1.FC;
+
+type ToastProps = {
+    label: string;
+    caption?: React.ReactNode;
+    type: 'success' | 'warning' | 'error' | 'info' | 'loading';
+    placement: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    duration?: number;
+    icon?: React.ReactNode;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    closable?: boolean;
+    closableLabel?: string;
+};
+
+declare const showToast: (props: ToastProps) => void;
 
-export { Button, Checkbox, CloseButton, IconButton, InlineMessage, LayerGroup, LayerGroupContainer, LayerItem, LayerPanel, LayerParameters, LegendItem, LegendPanel, MultiActionButton, NavigationRail, QualitativeAttribute, Radio, RadioGroup, ScaleBar, Select, Slider, Switch, TabBar, Tag, TextInput, Textarea };
+export { Badge, Breadcrumb, Button, Checkbox, CheckboxList, CloseButton, Footer, IconButton, InlineMessage, InputWithUnits, LayerGroup, LayerGroupContainer, LayerItem, LayerPanel, LayerParameters, LegendItem, LegendPanel, MultiActionButton, NavigationRail, OptionCard, OptionCardGroup, Password, QualitativeAttribute, Radio, RadioGroup, RadioList, ScaleBar, Select, Slider, SliderInput, Switch, TabBar, Tag, TextInput, Textarea, Toast, designSystemStyles, showToast };