@vygruppen/spor-react 5.1.1 → 5.3.0

package/dist/index.d.mts

@@ -408,7 +408,7 @@ type FloatingActionButtonProps = BoxProps & {
  *  placement="bottom right"
  * />
  */
-declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button">, FloatingActionButtonProps>;
+declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "button", {}>, FloatingActionButtonProps>;
 
 type CardProps = Exclude<BoxProps, "size"> & {
     size?: "sm" | "lg";
@@ -456,20 +456,25 @@ declare const Card: _chakra_ui_system_dist_system_types.ComponentWithAs<As, Card
  * <DatePicker label="Dato" variant="base" />
  * ```
  */
-declare const DatePicker: React__default.ForwardRefExoticComponent<AriaDatePickerProps<DateValue> & Pick<BoxProps, "width" | "minHeight"> & {
+declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<AriaDatePickerProps<DateValue>, "onChange"> & Pick<BoxProps, "width" | "minHeight"> & {
     variant: ResponsiveValue<"base" | "floating" | "ghost">;
     name?: string | undefined;
     showYearNavigation?: boolean | undefined;
     withPortal?: boolean | undefined;
+    onChange?: ((value: DateValue | null) => void) | undefined;
 } & React__default.RefAttributes<HTMLDivElement>>;
 
-type DateRangePickerProps = AriaDateRangePickerProps<DateValue> & Pick<BoxProps, "minHeight"> & {
+type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "onChange"> & Pick<BoxProps, "minHeight"> & {
     startLabel?: string;
     startName?: string;
     endLabel?: string;
     endName?: string;
     variant: ResponsiveValue<"base" | "floating" | "ghost">;
     withPortal?: boolean;
+    onChange?: (dates: {
+        start: DateValue | null;
+        end: DateValue | null;
+    } | null) => void;
 };
 /**
  * A date range picker component.
@@ -501,7 +506,7 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
      **/
     defaultValue?: TimeValue | null;
     /** Callback for when the time changes */
-    onChange?: (value: TimeValue) => void;
+    onChange?: (value: TimeValue | null) => void;
     /** The maxiumum number of minutes to move when the step buttons are used.
      *
      * Defaults to 30 minutes.
@@ -939,6 +944,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.
@@ -975,7 +981,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 */
@@ -1818,8 +1824,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
@@ -1857,7 +1883,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;
@@ -1967,6 +1993,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: {
@@ -3185,7 +3215,7 @@ declare const theme: {
                 }>;
             } | undefined;
             defaultProps?: {
-                size?: "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "full" | undefined;
+                size?: "sm" | "md" | "lg" | "xs" | "2xl" | "xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full" | undefined;
                 variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
@@ -3529,29 +3559,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;
@@ -3587,13 +3601,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")[];
@@ -4048,24 +4077,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: {};
@@ -4253,7 +4276,7 @@ declare const theme: {
                 }>;
             } | undefined;
             defaultProps?: {
-                size?: "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "full" | undefined;
+                size?: "sm" | "md" | "lg" | "xs" | "2xl" | "xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full" | undefined;
                 variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
@@ -4329,6 +4352,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: {
@@ -4733,7 +4795,7 @@ declare const theme: {
                 variant?: "solid" | "outline" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("track" | "container" | "thumb")[];
+            parts: ("label" | "track" | "container" | "thumb")[];
         };
         Table: {
             baseStyle?: {
@@ -4880,7 +4942,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | undefined;
-                variant?: "outline" | "unstyled" | "simple" | undefined;
+                variant?: "outline" | "simple" | "unstyled" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("caption" | "table" | "tbody" | "td" | "tfoot" | "th" | "thead" | "tr")[];
@@ -5686,7 +5748,7 @@ declare const theme: {
                 }>;
             } | undefined;
             defaultProps?: {
-                size?: "sm" | "md" | "lg" | "xl" | "2xl" | "2xs" | "xs" | "full" | undefined;
+                size?: "sm" | "md" | "lg" | "xs" | "2xl" | "xl" | "full" | "2xs" | undefined;
                 variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
@@ -5848,7 +5910,7 @@ declare const theme: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
             } | undefined;
             defaultProps?: {
-                size?: "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "3xl" | "4xl" | undefined;
+                size?: "sm" | "md" | "lg" | "xs" | "2xl" | "xl" | "3xl" | "4xl" | undefined;
                 variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
@@ -6187,7 +6249,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | "xs" | undefined;
-                variant?: "outline" | "unstyled" | "filled" | "flushed" | undefined;
+                variant?: "outline" | "filled" | "unstyled" | "flushed" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("root" | "field" | "stepper" | "stepperGroup")[];
@@ -6245,7 +6307,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | "xs" | undefined;
-                variant?: "outline" | "unstyled" | "filled" | "flushed" | undefined;
+                variant?: "outline" | "filled" | "unstyled" | "flushed" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };
@@ -6557,7 +6619,7 @@ declare const theme: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
             } | undefined;
             defaultProps?: {
-                size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
+                size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
                 variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
@@ -7160,6 +7222,18 @@ declare const theme: {
     };
     direction: "ltr";
 };
+declare const brandTheme: {
+    VyDigital: {
+        colors: {
+            accent: string;
+        };
+    };
+    VyUtvikling: {
+        colors: {
+            accent: string;
+        };
+    };
+};
 
 type BaseToastProps = {
     children: React__default.ReactNode;
@@ -7297,4 +7371,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 };