@vygruppen/spor-react 4.0.2 → 4.1.0

package/dist/index.d.mts

@@ -282,7 +282,7 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
  *
  * ```tsx
  * <Button variant="primary" onClick={confirmOrder}>
- *   Buy trip
+ *  Buy trip
  * </Button>
  * ```
  *
@@ -412,7 +412,7 @@ declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "butto
 type CardProps = Exclude<BoxProps, "size"> & {
     size?: "sm" | "lg";
     children: React__default.ReactNode;
-    colorScheme: "white" | "grey" | "blue" | "green" | "teal" | "yellow" | "orange";
+    colorScheme: "white" | "grey" | "blue" | "green" | "teal" | "yellow" | "orange" | "red";
 };
 /**
  * Renders a card.
@@ -493,9 +493,11 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
     value?: TimeValue;
     /** A default value, if any.
      *
-     * A `new Time(hours, minutes)` should be passed. Defaults to the current time if not provided.
+     * A `new Time(hours, minutes)` should be passed.
+     * Defaults to the current time if not provided.
+     * Can be set to null if you don't want a time to be selected by default.
      **/
-    defaultValue?: TimeValue;
+    defaultValue?: TimeValue | null;
     /** Callback for when the time changes */
     onChange?: (value: TimeValue) => void;
     /** The maxiumum number of minutes to move when the step buttons are used.
@@ -1168,6 +1170,8 @@ type CountryCodeAndPhoneNumber = {
     nationalNumber: string;
 };
 type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
+    /** The label. Defaults to a localized version of "Phone number" */
+    label?: string;
     /** The root name.
      *
      * Please note that when specifying the name, the rendered names will be `${name}-country-code` and `${name}-phone-number`, respectively
@@ -1855,10 +1859,10 @@ declare const SporProvider: ({ theme, language, children, ...props }: SporProvid
 
 type StepperProps = {
     onClick: (clickedStep: number) => void;
-    colorScheme: "light" | "dark" | "green";
     title?: string;
     activeStep: number;
     steps: string[];
+    variant: "base" | "accent";
 };
 /**
  * A stepper is used to show which step of a process a user is currently in.
@@ -1874,13 +1878,14 @@ type StepperProps = {
  * />
  * ```
  **/
-declare const Stepper: ({ onClick, steps, activeStep: activeStepAsStringOrNumber, title, colorScheme, }: StepperProps) => React__default.JSX.Element;
+declare const Stepper: ({ onClick, steps, activeStep: activeStepAsStringOrNumber, title, variant, }: StepperProps) => React__default.JSX.Element;
 
 type StepperStepProps = {
     children: React__default.ReactNode;
     stepNumber: number;
+    variant: "base" | "accent";
 };
-declare const StepperStep: ({ children, stepNumber }: StepperStepProps) => React__default.JSX.Element;
+declare const StepperStep: ({ children, stepNumber, variant, }: StepperStepProps) => React__default.JSX.Element;
 
 type TabsProps = Exclude<TabsProps$1, "colorScheme" | "variant" | "orientation" | "size"> & {
     colorScheme: "base" | "accent";
@@ -2278,19 +2283,6 @@ declare const theme: {
                 };
             } | undefined;
             variants?: {
-                control: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    _hover: {
-                        backgroundColor: string;
-                    };
-                    _active: {
-                        backgroundColor: string;
-                    };
-                    _focus: _chakra_ui_styled_system.SystemStyleObject;
-                    _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
-                    "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
-                    backgroundColor: string;
-                    color: string;
-                };
                 primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
                         backgroundColor: string;
@@ -2321,7 +2313,7 @@ declare const theme: {
                         backgroundColor: string;
                     };
                 };
-                additional: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                tertiary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
                         boxShadow: string;
                     };
@@ -2371,7 +2363,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | "xs" | undefined;
-                variant?: "control" | "primary" | "secondary" | "additional" | "ghost" | "floating" | undefined;
+                variant?: "primary" | "secondary" | "ghost" | "floating" | "tertiary" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };
@@ -3445,7 +3437,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "base" | "green" | "light" | "accent" | "brand" | "dark" | undefined;
+                variant?: "base" | "green" | "light" | "dark" | "accent" | "brand" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("text" | "container" | "icon")[];
@@ -4540,7 +4532,6 @@ declare const theme: {
         Stepper: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 root: {
-                    backgroundColor: string;
                     display: string;
                     alignItems: string;
                     justifyContent: ("center" | "space-between")[];
@@ -4559,7 +4550,6 @@ declare const theme: {
                     display: ("flex" | "none")[];
                     alignItems: string;
                     justifyContent: string;
-                    color: string;
                 };
                 backButton: {
                     borderRadius: string;
@@ -4576,33 +4566,10 @@ declare const theme: {
                     ml: number;
                     textAlign: string;
                 };
-                stepCounter: {
-                    whiteSpace: string;
-                    textDecoration: string;
-                };
                 stepContainer: {
                     display: string;
                     alignItems: string;
                 };
-                stepButton: {
-                    color: string;
-                    display: string;
-                    alignItems: string;
-                    padding: number;
-                    borderRadius: string;
-                };
-                stepNumber: {
-                    borderRadius: string;
-                    border: string;
-                    borderColor: string;
-                    width: number;
-                    height: number;
-                    mr: number;
-                    display: string;
-                    alignItems: string;
-                    justifyContent: string;
-                    fontSize: ("mobile.xs" | "desktop.xs")[];
-                };
                 stepTitle: {
                     textStyle: string;
                     whiteSpace: string;
@@ -4614,61 +4581,20 @@ declare const theme: {
                 }>;
             } | undefined;
             variants?: {
-                completed: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    stepContainer: {
-                        color: string;
-                    };
-                    stepButton: {
-                        _hover: {
-                            backgroundColor: string;
-                        };
-                        _focus: {
-                            outline: string;
-                            boxShadow: string;
-                        };
-                        "&:focus:not(:focus-visible)": {
-                            boxShadow: string;
-                        };
-                        _focusVisible: {
-                            outline: string;
-                            boxShadow: string;
-                        };
-                        _active: {
-                            backgroundColor: string;
-                            color?: undefined;
-                        } | {
-                            color: string;
-                            backgroundColor: string;
-                        };
-                    };
-                };
-                active: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    stepContainer: {
-                        color: string;
-                    };
-                    stepButton: {
-                        pointerEvents: string;
-                    };
-                    stepNumber: {
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    root: {
                         backgroundColor: string;
-                        color: string;
-                    };
-                    stepTitle: {
-                        fontWeight: string;
                     };
                 };
-                disabled: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    stepContainer: {
-                        color: string;
-                    };
-                    stepButton: {
-                        pointerEvents: string;
+                accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    root: {
+                        backgroundColor: string;
                     };
                 };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "disabled" | "active" | "completed" | undefined;
+                variant?: "base" | "accent" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "backButton" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
@@ -7149,7 +7075,7 @@ declare const theme: {
     };
     styles: {
         global: (props: Record<string, any> | _chakra_ui_styled_system.StyleFunctionProps) => {
-            'html, body': {
+            "html, body": {
                 color: string;
             };
             svg: {

package/dist/index.d.ts

@@ -282,7 +282,7 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
  *
  * ```tsx
  * <Button variant="primary" onClick={confirmOrder}>
- *   Buy trip
+ *  Buy trip
  * </Button>
  * ```
  *
@@ -412,7 +412,7 @@ declare const FloatingActionButton: ComponentWithAs<ComponentWithAs<"a" | "butto
 type CardProps = Exclude<BoxProps, "size"> & {
     size?: "sm" | "lg";
     children: React__default.ReactNode;
-    colorScheme: "white" | "grey" | "blue" | "green" | "teal" | "yellow" | "orange";
+    colorScheme: "white" | "grey" | "blue" | "green" | "teal" | "yellow" | "orange" | "red";
 };
 /**
  * Renders a card.
@@ -493,9 +493,11 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
     value?: TimeValue;
     /** A default value, if any.
      *
-     * A `new Time(hours, minutes)` should be passed. Defaults to the current time if not provided.
+     * A `new Time(hours, minutes)` should be passed.
+     * Defaults to the current time if not provided.
+     * Can be set to null if you don't want a time to be selected by default.
      **/
-    defaultValue?: TimeValue;
+    defaultValue?: TimeValue | null;
     /** Callback for when the time changes */
     onChange?: (value: TimeValue) => void;
     /** The maxiumum number of minutes to move when the step buttons are used.
@@ -1168,6 +1170,8 @@ type CountryCodeAndPhoneNumber = {
     nationalNumber: string;
 };
 type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
+    /** The label. Defaults to a localized version of "Phone number" */
+    label?: string;
     /** The root name.
      *
      * Please note that when specifying the name, the rendered names will be `${name}-country-code` and `${name}-phone-number`, respectively
@@ -1855,10 +1859,10 @@ declare const SporProvider: ({ theme, language, children, ...props }: SporProvid
 
 type StepperProps = {
     onClick: (clickedStep: number) => void;
-    colorScheme: "light" | "dark" | "green";
     title?: string;
     activeStep: number;
     steps: string[];
+    variant: "base" | "accent";
 };
 /**
  * A stepper is used to show which step of a process a user is currently in.
@@ -1874,13 +1878,14 @@ type StepperProps = {
  * />
  * ```
  **/
-declare const Stepper: ({ onClick, steps, activeStep: activeStepAsStringOrNumber, title, colorScheme, }: StepperProps) => React__default.JSX.Element;
+declare const Stepper: ({ onClick, steps, activeStep: activeStepAsStringOrNumber, title, variant, }: StepperProps) => React__default.JSX.Element;
 
 type StepperStepProps = {
     children: React__default.ReactNode;
     stepNumber: number;
+    variant: "base" | "accent";
 };
-declare const StepperStep: ({ children, stepNumber }: StepperStepProps) => React__default.JSX.Element;
+declare const StepperStep: ({ children, stepNumber, variant, }: StepperStepProps) => React__default.JSX.Element;
 
 type TabsProps = Exclude<TabsProps$1, "colorScheme" | "variant" | "orientation" | "size"> & {
     colorScheme: "base" | "accent";
@@ -2278,19 +2283,6 @@ declare const theme: {
                 };
             } | undefined;
             variants?: {
-                control: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    _hover: {
-                        backgroundColor: string;
-                    };
-                    _active: {
-                        backgroundColor: string;
-                    };
-                    _focus: _chakra_ui_styled_system.SystemStyleObject;
-                    _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
-                    "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
-                    backgroundColor: string;
-                    color: string;
-                };
                 primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
                         backgroundColor: string;
@@ -2321,7 +2313,7 @@ declare const theme: {
                         backgroundColor: string;
                     };
                 };
-                additional: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                tertiary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
                     _hover: {
                         boxShadow: string;
                     };
@@ -2371,7 +2363,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | "xs" | undefined;
-                variant?: "control" | "primary" | "secondary" | "additional" | "ghost" | "floating" | undefined;
+                variant?: "primary" | "secondary" | "ghost" | "floating" | "tertiary" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };
@@ -3445,7 +3437,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "base" | "green" | "light" | "accent" | "brand" | "dark" | undefined;
+                variant?: "base" | "green" | "light" | "dark" | "accent" | "brand" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("text" | "container" | "icon")[];
@@ -4540,7 +4532,6 @@ declare const theme: {
         Stepper: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 root: {
-                    backgroundColor: string;
                     display: string;
                     alignItems: string;
                     justifyContent: ("center" | "space-between")[];
@@ -4559,7 +4550,6 @@ declare const theme: {
                     display: ("flex" | "none")[];
                     alignItems: string;
                     justifyContent: string;
-                    color: string;
                 };
                 backButton: {
                     borderRadius: string;
@@ -4576,33 +4566,10 @@ declare const theme: {
                     ml: number;
                     textAlign: string;
                 };
-                stepCounter: {
-                    whiteSpace: string;
-                    textDecoration: string;
-                };
                 stepContainer: {
                     display: string;
                     alignItems: string;
                 };
-                stepButton: {
-                    color: string;
-                    display: string;
-                    alignItems: string;
-                    padding: number;
-                    borderRadius: string;
-                };
-                stepNumber: {
-                    borderRadius: string;
-                    border: string;
-                    borderColor: string;
-                    width: number;
-                    height: number;
-                    mr: number;
-                    display: string;
-                    alignItems: string;
-                    justifyContent: string;
-                    fontSize: ("mobile.xs" | "desktop.xs")[];
-                };
                 stepTitle: {
                     textStyle: string;
                     whiteSpace: string;
@@ -4614,61 +4581,20 @@ declare const theme: {
                 }>;
             } | undefined;
             variants?: {
-                completed: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    stepContainer: {
-                        color: string;
-                    };
-                    stepButton: {
-                        _hover: {
-                            backgroundColor: string;
-                        };
-                        _focus: {
-                            outline: string;
-                            boxShadow: string;
-                        };
-                        "&:focus:not(:focus-visible)": {
-                            boxShadow: string;
-                        };
-                        _focusVisible: {
-                            outline: string;
-                            boxShadow: string;
-                        };
-                        _active: {
-                            backgroundColor: string;
-                            color?: undefined;
-                        } | {
-                            color: string;
-                            backgroundColor: string;
-                        };
-                    };
-                };
-                active: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    stepContainer: {
-                        color: string;
-                    };
-                    stepButton: {
-                        pointerEvents: string;
-                    };
-                    stepNumber: {
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    root: {
                         backgroundColor: string;
-                        color: string;
-                    };
-                    stepTitle: {
-                        fontWeight: string;
                     };
                 };
-                disabled: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    stepContainer: {
-                        color: string;
-                    };
-                    stepButton: {
-                        pointerEvents: string;
+                accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    root: {
+                        backgroundColor: string;
                     };
                 };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "disabled" | "active" | "completed" | undefined;
+                variant?: "base" | "accent" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("title" | "container" | "closeButton" | "root" | "innerContainer" | "backButton" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle")[];
@@ -7149,7 +7075,7 @@ declare const theme: {
     };
     styles: {
         global: (props: Record<string, any> | _chakra_ui_styled_system.StyleFunctionProps) => {
-            'html, body': {
+            "html, body": {
                 color: string;
             };
             svg: {