@worldresources/wri-design-systems 2.205.2 → 2.207.0

package/dist/index.d.ts

@@ -175,6 +175,21 @@ type MapPopUpLabels = {
     /** aria-label on the close button. Default: "Close" */
     closeLabel: string;
 };
+/** Labels for GuidedTour internal UI strings. */
+type GuidedTourLabels = {
+    /** Builds the step counter shown in the footer. Default: (current, total) => `${current} of ${total}` */
+    stepCounterLabel: (current: number, total: number) => string;
+    /** aria-label on the previous step button. Default: "Previous step" */
+    previousStepLabel: string;
+    /** aria-label on the next step button. Default: "Next step" */
+    nextStepLabel: string;
+    /** Label on the last step button. Default: "Finish" */
+    finishLabel: string;
+    /** Label on the skip button. Default: "Skip all" */
+    skipAllLabel: string;
+    /** Label on the primary button shown on the last step. Default: "Start exploring" */
+    startExploringLabel: string;
+};
 /** Labels for MapMarker internal UI strings. */
 type MapMarkerLabels = {
     /** aria-label builder for cluster markers when count is provided. Default: (count) => `Cluster of ${count} locations` */
@@ -609,6 +624,7 @@ type DesignSystemLabels = {
     ProgressBar?: Partial<ProgressBarLabels>;
     InlineMessage?: Partial<InlineMessageLabels>;
     MapPopUp?: Partial<MapPopUpLabels>;
+    GuidedTour?: Partial<GuidedTourLabels>;
     MapMarker?: Partial<MapMarkerLabels>;
     AnalysisWidget?: Partial<AnalysisWidgetLabels>;
     Table?: Partial<TableLabels>;
@@ -687,7 +703,7 @@ type RichTextEditorProps = {
 declare const RichTextEditor: ({ defaultValue, disabled, ariaLabel, placeholder, minHeight, visibleControls, onChange, labels, }: RichTextEditorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type ButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'children'> & {
-    label?: string;
+    label?: string | React__default.ReactNode;
     loading?: boolean;
     variant?: 'primary' | 'secondary' | 'borderless' | 'outline' | 'negative';
     size?: 'default' | 'small';
@@ -701,7 +717,7 @@ type ButtonProps = Omit<ButtonProps$1, 'size' | 'variant' | 'colorPalette' | 'ch
 
 /** @jsxImportSource @emotion/react */
 declare const Button: React$1.ForwardRefExoticComponent<Omit<_chakra_ui_react.ButtonProps, "children" | "colorPalette" | "size" | "variant"> & {
-    label?: string;
+    label?: string | React.ReactNode;
     loading?: boolean;
     variant?: "primary" | "secondary" | "borderless" | "outline" | "negative";
     size?: "default" | "small";
@@ -954,6 +970,7 @@ declare const Slider: React__default.ForwardRefExoticComponent<Omit<Slider$1.Roo
         value: number[];
     }) => void;
     isCentred?: boolean;
+    colors?: string[];
 } & React__default.RefAttributes<HTMLDivElement>>;
 
 type SliderMarksProps = {
@@ -980,6 +997,8 @@ type SliderProps = Omit<SliderRootProps, 'size' | 'variant' | 'colorPalette' | '
     onValueChange?: (details: ValueChangeDetails) => void;
     onValueChangeEnd?: (details: ValueChangeDetails) => void;
     isCentred?: boolean;
+    /** Colors used to render a gradient track, e.g. for data-driven scales (low → high). */
+    colors?: string[];
 };
 
 type SwitchProps = Omit<Switch$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'invalid' | 'onCheckedChange' | 'onChange' | 'labels'> & {
@@ -1236,6 +1255,58 @@ type TagProps = Omit<Tag$1.RootProps, 'size' | 'variant' | 'colorPalette' | 'chi
 
 declare const Tag: ({ label, size, variant, disabled, icon, onClose, closable, labels, ...rest }: TagProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type GuidedTourStep = {
+    /** Stable identifier for the step, useful as a React key and for tracking. */
+    id: string;
+    /** The element the popup/connector should point to for this step. */
+    anchorRef: React.RefObject<HTMLButtonElement | null>;
+    /** Preferred placement. Default: "bottom" */
+    placement?: Placement;
+    /** Gap between anchor and popup. Also affects connector length. Default: 30 */
+    offset?: number;
+    /** Bold heading rendered in the popup header. */
+    title: React.ReactNode;
+    /** Optional secondary line under the title. */
+    caption?: React.ReactNode;
+    /** Optional icon rendered before the title. */
+    icon?: React.ReactNode;
+    /** Body of the step. */
+    content: React.ReactNode;
+    /** Extra content appended below the tour footer controls for this step. */
+    footer?: React.ReactNode;
+    /** Override internal MapPopUp labels for this step. */
+    labels?: Partial<MapPopUpLabels>;
+};
+type GuidedTourProps = {
+    /** Whether the tour is visible. */
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The tour steps, in order. */
+    steps: GuidedTourStep[];
+    /** Zero-based index of the visible step. */
+    activeStepIndex: number;
+    /** Called with the next/previous index when navigating. */
+    onStepChange: (index: number) => void;
+    /** Called on Finish (last step). Defaults to closing the tour. */
+    onFinish?: () => void;
+    /** Called on Skip all. Defaults to closing the tour. */
+    onSkip?: () => void;
+    /**
+     * Surface style of the popup. `dark` uses neutral/800 as background,
+     * neutral/100 as text color and neutral/900 for the connector (arrow).
+     * Default: "dark"
+     */
+    variant?: 'default' | 'dark';
+    /** Close the tour with the Escape key. Default: true */
+    closeOnEscape?: boolean;
+    /** Close the tour when clicking outside the popup. Default: false */
+    closeOnOutsideClick?: boolean;
+    /** Override internal UI labels for internationalization support. */
+    labels?: Partial<GuidedTourLabels>;
+};
+
+declare const GuidedTour: ({ open, onOpenChange, steps, activeStepIndex, onStepChange, onFinish, onSkip, variant, closeOnEscape, closeOnOutsideClick, labels, }: GuidedTourProps) => _emotion_react_jsx_runtime.JSX.Element | null;
+
 type AdditionalSettingsProps = {
     label: string;
     checked?: boolean;
@@ -1314,6 +1385,12 @@ type MapPopUpProps = {
     content: React.ReactNode;
     footer?: React.ReactNode;
     placement?: Placement;
+    /**
+     * Surface style of the popup. `dark` uses neutral/800 as background,
+     * neutral/100 as text color and neutral/900 for the connector (arrow).
+     * Default: "default"
+     */
+    variant?: 'default' | 'dark';
     /** Gap between anchor and modal. Also affects connector length */
     offset?: number;
     closeOnEscape?: boolean;
@@ -1322,7 +1399,7 @@ type MapPopUpProps = {
     labels?: Partial<MapPopUpLabels>;
 };
 
-declare const MapPopUp: ({ open, onOpenChange, anchorRef, header, content, footer, placement, offset, closeOnEscape, closeOnOutsideClick, labels, }: MapPopUpProps) => _emotion_react_jsx_runtime.JSX.Element | null;
+declare const MapPopUp: ({ open, onOpenChange, anchorRef, header, content, footer, placement, variant, offset, closeOnEscape, closeOnOutsideClick, labels, }: MapPopUpProps) => _emotion_react_jsx_runtime.JSX.Element | null;
 
 type LayerItemProps = {
     name: string;
@@ -1857,4 +1934,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, type BadgeSize, 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, OpacityControl, type OpacityControlLabels, type OpacityControlProps, 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 ToolbarExpandSide, 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, type BadgeSize, 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, GuidedTour, type GuidedTourProps, type GuidedTourStep, 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, OpacityControl, type OpacityControlLabels, type OpacityControlProps, 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 ToolbarExpandSide, type ToolbarItem, type ToolbarLabels, type ToolbarProps, Tooltip, type TooltipProps, closeToast, designSystemStyles, designSystemStylesForTailwind, getThemedBorderWidth, getThemedColor, getThemedFontSize, getThemedLineHeight, getThemedRadius, getThemedSpacing, showToast };