@vygruppen/spor-react 5.2.0 → 5.4.0

package/dist/index.d.mts

@@ -474,7 +474,7 @@ type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "onChange"
     onChange?: (dates: {
         start: DateValue | null;
         end: DateValue | null;
-    }) => void;
+    } | null) => void;
 };
 /**
  * A date range picker component.
@@ -686,6 +686,7 @@ type CardSelectProps = BoxProps & {
  * ```
  *
  * @see https://spor.vy.no/components/card-select
+ *
  */
 declare const CardSelect: _chakra_ui_system_dist_system_types.ComponentWithAs<"button", CardSelectProps>;
 
@@ -944,6 +945,7 @@ type InfoSelectProps<T extends object> = {
     disabledKeys?: string[];
     /** Whether or not the input is invalid */
     "aria-invalid"?: boolean;
+    variant?: "base" | "floating";
 };
 /**
  * A styled select component.
@@ -980,7 +982,7 @@ type InfoSelectProps<T extends object> = {
  *
  * @see https://spor.vy.no/components/info-select
  */
-declare function InfoSelect<T extends object>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, ...props }: InfoSelectProps<T>): React__default.JSX.Element;
+declare function InfoSelect<T extends object>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, variant, ...props }: InfoSelectProps<T>): React__default.JSX.Element;
 
 type InputProps = Omit<InputProps$1, "variant" | "size"> & {
     /** The input's label */
@@ -1823,8 +1825,28 @@ type WizardPopoverProps = PopoverProps & {
  */
 declare const WizardPopover: ({ children, triggerElement, withCloseButton, }: WizardPopoverProps) => React.JSX.Element;
 
+type ProgressIndicatorProps = {
+    numberOfSteps: number;
+    activeStep: number;
+};
+/**
+ * A progress indicator is used to show which step of a process a user is currently in
+ * to give them a sense of progress.
+ *
+ * You specify the active step, which starts at 1 (not 0)
+ *
+ * ```tsx
+ * <ProgressIndicator
+ *  numberOfSteps={3}
+ *  activeStep={2}
+ * />
+ * ```
+ */
+declare const ProgressIndicator: ({ numberOfSteps, activeStep, }: ProgressIndicatorProps) => React__default.JSX.Element;
+
 type SporProviderProps = ChakraProviderProps & {
     language?: Language;
+    brand?: Brand;
 };
 /**
  * This component is used to provide the specified theme of colors and other
@@ -1862,7 +1884,7 @@ type SporProviderProps = ChakraProviderProps & {
  * );
  * ```
  */
-declare const SporProvider: ({ theme, language, children, ...props }: SporProviderProps) => React__default.JSX.Element;
+declare const SporProvider: ({ theme, language, brand, children, ...props }: SporProviderProps) => React__default.JSX.Element;
 
 type StepperProps = {
     onClick: (clickedStep: number) => void;
@@ -1972,6 +1994,10 @@ declare const textStyles: {
 /** A string of CSS that should be injected in the global CSS space */
 declare const fontFaces: string;
 
+declare enum Brand {
+    VyDigital = "VyDigital",
+    VyUtvikling = "VyUtvikling"
+}
 declare const theme: {
     components: {
         Accordion: {
@@ -2513,14 +2539,12 @@ declare const theme: {
                     appearance: string;
                     display: string;
                     alignItems: string;
-                    _expanded: {
-                        backgroundColor: string;
-                    };
                 };
                 card: {
                     borderRadius: string;
                     boxShadow: string;
                     padding: number;
+                    color: string;
                 };
             }) | undefined;
             sizes?: {
@@ -2553,34 +2577,25 @@ declare const theme: {
                 };
             } | undefined;
             variants?: {
-                ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    trigger: {
-                        _hover: {
-                            backgroundColor: string;
-                        };
-                        _active: {
-                            backgroundColor: string;
-                        };
-                    };
-                };
-                outline: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     trigger: {
                         _hover: {
                             boxShadow: string;
                         };
                         _active: {
-                            backgroundColor: string;
                             boxShadow: string;
+                            backgroundColor: string;
                         };
                         _expanded: {
                             _hover: {
-                                backgroundColor: string;
                                 boxShadow: string;
+                                backgroundColor: string;
                             };
                             _active: {
-                                backgroundColor: string;
                                 boxShadow: string;
+                                backgroundColor: string;
                             };
+                            backgroundColor: string;
                         };
                         _focus: _chakra_ui_styled_system.SystemStyleObject;
                         _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
@@ -2588,34 +2603,48 @@ declare const theme: {
                         boxShadow: string;
                     };
                 };
-                card: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    trigger: {
+                        _hover: {
+                            backgroundColor: string;
+                        };
+                        _active: {
+                            backgroundColor: string;
+                        };
+                        _expanded: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     trigger: {
-                        backgroundColor: string;
                         boxShadow: string;
                         transition: string;
                         _hover: {
-                            backgroundColor: string;
                             boxShadow: string;
+                            backgroundColor: string;
                         };
                         _active: {
-                            backgroundColor: string;
                             boxShadow: string;
+                            backgroundColor: string;
                         };
                         _expanded: {
                             _hover: {
                                 boxShadow: string;
                             };
                             _active: {
-                                backgroundColor: string;
                                 boxShadow: string;
+                                backgroundColor: string;
                             };
+                            backgroundColor: string;
                         };
+                        backgroundColor: string;
                     };
                 };
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | undefined;
-                variant?: "outline" | "card" | "ghost" | undefined;
+                variant?: "base" | "ghost" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("card" | "trigger")[];
@@ -3534,29 +3563,13 @@ declare const theme: {
                         };
                         backgroundColor: string;
                         color: string;
-                    } | {
-                        _hover: {
-                            boxShadow: string;
-                        };
-                        _focus: {
-                            boxShadow: string;
-                        };
-                        backgroundColor?: undefined;
-                        color: string;
                     };
                     _active: {
                         boxShadow: string;
                         backgroundColor: string;
-                    } | {
-                        boxShadow: string;
-                        backgroundColor?: undefined;
                     };
                     _expanded: {
                         boxShadow: string;
-                        backgroundColor: string;
-                    } | {
-                        boxShadow: string;
-                        backgroundColor?: undefined;
                     };
                     _invalid: {
                         _focus: _chakra_ui_styled_system.SystemStyleObject;
@@ -3592,13 +3605,28 @@ declare const theme: {
                 }>;
             } | undefined;
             variants?: {
-                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("button" | "label" | "container" | "arrowIcon")[];
-                }>;
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {};
+                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    button: {
+                        _active: {
+                            backgroundColor: string;
+                            boxShadow: string;
+                        };
+                        _focus: _chakra_ui_styled_system.SystemStyleObject;
+                        _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
+                        "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
+                        _hover: {
+                            backgroundColor: string;
+                            boxShadow: string;
+                        };
+                        boxShadow: string;
+                        backgroundColor: string;
+                    };
+                };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: string | number | undefined;
+                variant?: "base" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("button" | "label" | "container" | "arrowIcon")[];
@@ -4053,24 +4081,18 @@ declare const theme: {
                     borderRadius: string;
                     color: string;
                     cursor: string;
-                    _hover: {
-                        backgroundColor: string;
-                        outline: string;
-                    };
+                    outline: string;
                     _active: {
                         backgroundColor: string;
-                        outline: string;
                     };
                     _focus: {
-                        outline: string;
+                        backgroundColor: string;
+                    };
+                    _hover: {
                         backgroundColor: string;
                     };
                     _selected: {
-                        color: string;
                         backgroundColor: string;
-                    } | {
-                        color: string;
-                        backgroundColor?: undefined;
                     };
                 };
                 label: {};
@@ -4334,6 +4356,45 @@ declare const theme: {
             } | undefined;
             parts: ("body" | "footer" | "header" | "content" | "closeButton" | "arrow" | "popper")[];
         };
+        ProgressIndicator: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                root: {
+                    width: string;
+                };
+                container: {
+                    display: string;
+                    alignItems: string;
+                    gap: number;
+                    justifyContent: ("center" | "space-between")[];
+                };
+                progressDot: {
+                    height: number;
+                    width: number;
+                    "&[aria-current='step']": {
+                        circle: {
+                            fill: string;
+                        };
+                    };
+                    circle: {
+                        fill: string;
+                    };
+                };
+            }) | undefined;
+            sizes?: {
+                [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
+                    keys: ("container" | "root" | "progressDot")[];
+                }>;
+            } | undefined;
+            variants?: {
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {};
+            } | undefined;
+            defaultProps?: {
+                size?: string | number | undefined;
+                variant?: "base" | undefined;
+                colorScheme?: string | undefined;
+            } | undefined;
+            parts: ("container" | "root" | "progressDot")[];
+        };
         Radio: {
             baseStyle?: {
                 container: {
@@ -7165,6 +7226,18 @@ declare const theme: {
     };
     direction: "ltr";
 };
+declare const brandTheme: {
+    VyDigital: {
+        colors: {
+            accent: string;
+        };
+    };
+    VyUtvikling: {
+        colors: {
+            accent: string;
+        };
+    };
+};
 
 type BaseToastProps = {
     children: React__default.ReactNode;
@@ -7302,4 +7375,4 @@ type TextProps = Omit<TextProps$1, "textStyle"> & {
  */
 declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", TextProps>;
 
-export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, PopoverWizardProps, ProgressBar, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, SimplePopover, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardPopover, WizardPopoverProps, createTexts, fontFaces, theme, useToast, useTranslation };
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, PopoverWizardProps, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, SimplePopover, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardPopover, WizardPopoverProps, brandTheme, createTexts, fontFaces, theme, useToast, useTranslation };