@vygruppen/spor-react 3.7.7 → 3.8.0

package/dist/index.d.mts

@@ -459,14 +459,14 @@ declare const Card: _chakra_ui_system_dist_system_types.ComponentWithAs<As, Card
 /**
  * A date picker component.
  *
- * There are two versions of this component – a simple one, and one with a trigger button for showing the calendar. Use whatever fits your design.
+ * There are two versions of this component – a simple one, and one with a trigger button for showing the calendar. Use whatever fits your design.
  *
  * ```tsx
  * <DatePicker label="Dato" variant="simple" />
  * ```
  */
 declare const DatePicker: React__default.ForwardRefExoticComponent<AriaDatePickerProps<DateValue> & Pick<BoxProps, "width" | "minHeight"> & {
-    variant: ResponsiveValue<"simple" | "with-trigger">;
+    variant: ResponsiveValue<"base" | "floating" | "ghost">;
     name?: string | undefined;
     showYearNavigation?: boolean | undefined;
     withPortal?: boolean | undefined;
@@ -477,7 +477,7 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> & Pick<BoxProps,
     startName?: string;
     endLabel?: string;
     endName?: string;
-    variant: ResponsiveValue<"simple" | "with-trigger">;
+    variant: ResponsiveValue<"base" | "floating" | "ghost">;
     withPortal?: boolean;
 };
 /**
@@ -1139,6 +1139,10 @@ type NumericStepperProps = {
     isDisabled?: boolean;
     /** Whether to show input field or not */
     withInput?: boolean;
+    /** The amount to increase/decrease when pressing +/- */
+    stepSize?: number;
+    /** Whether to show the number input when value is zero  */
+    showZero?: boolean;
 } & Omit<BoxProps, "onChange">;
 /** A simple stepper component for integer values
  *
@@ -1149,10 +1153,10 @@ type NumericStepperProps = {
  * <NumericStepper value={value} onChange={setValue} />
  * ```
  *
- * You can also set a minimum and/or maximum value:
+ * You can also set a minimum and/or maximum value and step size:
  *
  * ```tsx
- * <NumericStepper value={value} onChange={setValue} minValue={1} maxValue={10} />
+ * <NumericStepper value={value} onChange={setValue} minValue={1} maxValue={10} stepSize={3} />
  * ```
  *
  * You can use the NumericStepper inside of a FormControl component to get IDs etc linked up automatically:
@@ -1164,7 +1168,7 @@ type NumericStepperProps = {
  * </FormControl>
  * ```
  */
-declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, ...boxProps }: NumericStepperProps): React__default.JSX.Element;
+declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, stepSize, showZero, ...boxProps }: NumericStepperProps): React__default.JSX.Element;
 
 type PasswordInputProps = InputProps;
 declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", InputProps>;
@@ -2822,7 +2826,7 @@ declare const theme: {
             parts: ("label" | "container" | "icon")[];
         };
         CloseButton: {
-            baseStyle?: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 _hover: {
                     backgroundColor: string;
                     _disabled: {
@@ -2843,7 +2847,7 @@ declare const theme: {
                 backgroundColor: string;
                 color: string;
                 fontWeight: string;
-            } | undefined;
+            }) | undefined;
             sizes?: {
                 lg: {
                     [x: string]: string;
@@ -2898,6 +2902,7 @@ declare const theme: {
                     boxShadow: string;
                     transitionProperty: string;
                     transitionDuration: string;
+                    borderRadius: string;
                     display: string;
                     flex: number;
                     paddingY: number;
@@ -2942,13 +2947,17 @@ declare const theme: {
                     display: string;
                     alignItems: string;
                     justifyContent: string;
-                    borderRightRadius: string;
+                    borderLeftRadius: string;
                     transitionProperty: string;
                     transitionSpeed: string;
                     position: string;
-                    left: string;
+                    paddingTop: number;
+                    paddingBottom: number;
+                    borderRadius: string;
+                    right: string;
                     _hover: {
                         boxShadow: string;
+                        backgroundColor: string;
                     };
                     _active: {
                         backgroundColor: string;
@@ -2960,6 +2969,7 @@ declare const theme: {
                 calendar: {
                     backgroundColor: string;
                     color: string;
+                    boxShadow: string;
                 };
                 weekdays: {
                     color: string;
@@ -3022,20 +3032,56 @@ declare const theme: {
                 }>;
             } | undefined;
             variants?: {
-                simple: {
-                    wrapper: {
-                        borderRadius: string;
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    calendar: {
+                        backgroundColor: string;
+                        color: string;
+                        boxShadow: string;
+                    };
+                    dateCell: {
+                        color: string;
+                        _hover: {
+                            backgroundColor: string;
+                        };
+                        "&[data-today]": {
+                            boxShadow: string;
+                        };
                     };
                 };
-                "with-trigger": {
-                    wrapper: {
-                        borderLeftRadius: string;
+                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    calendar: {
+                        backgroundColor: string;
+                        color: string;
+                        boxShadow: string;
+                    };
+                    dateCell: {
+                        color: string;
+                        _hover: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    calendar: {
+                        backgroundColor: string;
+                        color: string;
+                        boxShadow: string;
+                    };
+                    dateCell: {
+                        color: string;
+                        _hover: {
+                            backgroundColor: string;
+                        };
+                        _selected: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                 };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "simple" | "with-trigger" | undefined;
+                variant?: "base" | "ghost" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "arrow")[];
@@ -4152,6 +4198,7 @@ declare const theme: {
                 };
                 closeButton: {
                     position: string;
+                    color: string;
                     top: number;
                     insetEnd: number;
                 };

package/dist/index.d.ts

@@ -459,14 +459,14 @@ declare const Card: _chakra_ui_system_dist_system_types.ComponentWithAs<As, Card
 /**
  * A date picker component.
  *
- * There are two versions of this component – a simple one, and one with a trigger button for showing the calendar. Use whatever fits your design.
+ * There are two versions of this component – a simple one, and one with a trigger button for showing the calendar. Use whatever fits your design.
  *
  * ```tsx
  * <DatePicker label="Dato" variant="simple" />
  * ```
  */
 declare const DatePicker: React__default.ForwardRefExoticComponent<AriaDatePickerProps<DateValue> & Pick<BoxProps, "width" | "minHeight"> & {
-    variant: ResponsiveValue<"simple" | "with-trigger">;
+    variant: ResponsiveValue<"base" | "floating" | "ghost">;
     name?: string | undefined;
     showYearNavigation?: boolean | undefined;
     withPortal?: boolean | undefined;
@@ -477,7 +477,7 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> & Pick<BoxProps,
     startName?: string;
     endLabel?: string;
     endName?: string;
-    variant: ResponsiveValue<"simple" | "with-trigger">;
+    variant: ResponsiveValue<"base" | "floating" | "ghost">;
     withPortal?: boolean;
 };
 /**
@@ -1139,6 +1139,10 @@ type NumericStepperProps = {
     isDisabled?: boolean;
     /** Whether to show input field or not */
     withInput?: boolean;
+    /** The amount to increase/decrease when pressing +/- */
+    stepSize?: number;
+    /** Whether to show the number input when value is zero  */
+    showZero?: boolean;
 } & Omit<BoxProps, "onChange">;
 /** A simple stepper component for integer values
  *
@@ -1149,10 +1153,10 @@ type NumericStepperProps = {
  * <NumericStepper value={value} onChange={setValue} />
  * ```
  *
- * You can also set a minimum and/or maximum value:
+ * You can also set a minimum and/or maximum value and step size:
  *
  * ```tsx
- * <NumericStepper value={value} onChange={setValue} minValue={1} maxValue={10} />
+ * <NumericStepper value={value} onChange={setValue} minValue={1} maxValue={10} stepSize={3} />
  * ```
  *
  * You can use the NumericStepper inside of a FormControl component to get IDs etc linked up automatically:
@@ -1164,7 +1168,7 @@ type NumericStepperProps = {
  * </FormControl>
  * ```
  */
-declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, ...boxProps }: NumericStepperProps): React__default.JSX.Element;
+declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, stepSize, showZero, ...boxProps }: NumericStepperProps): React__default.JSX.Element;
 
 type PasswordInputProps = InputProps;
 declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", InputProps>;
@@ -2822,7 +2826,7 @@ declare const theme: {
             parts: ("label" | "container" | "icon")[];
         };
         CloseButton: {
-            baseStyle?: {
+            baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
                 _hover: {
                     backgroundColor: string;
                     _disabled: {
@@ -2843,7 +2847,7 @@ declare const theme: {
                 backgroundColor: string;
                 color: string;
                 fontWeight: string;
-            } | undefined;
+            }) | undefined;
             sizes?: {
                 lg: {
                     [x: string]: string;
@@ -2898,6 +2902,7 @@ declare const theme: {
                     boxShadow: string;
                     transitionProperty: string;
                     transitionDuration: string;
+                    borderRadius: string;
                     display: string;
                     flex: number;
                     paddingY: number;
@@ -2942,13 +2947,17 @@ declare const theme: {
                     display: string;
                     alignItems: string;
                     justifyContent: string;
-                    borderRightRadius: string;
+                    borderLeftRadius: string;
                     transitionProperty: string;
                     transitionSpeed: string;
                     position: string;
-                    left: string;
+                    paddingTop: number;
+                    paddingBottom: number;
+                    borderRadius: string;
+                    right: string;
                     _hover: {
                         boxShadow: string;
+                        backgroundColor: string;
                     };
                     _active: {
                         backgroundColor: string;
@@ -2960,6 +2969,7 @@ declare const theme: {
                 calendar: {
                     backgroundColor: string;
                     color: string;
+                    boxShadow: string;
                 };
                 weekdays: {
                     color: string;
@@ -3022,20 +3032,56 @@ declare const theme: {
                 }>;
             } | undefined;
             variants?: {
-                simple: {
-                    wrapper: {
-                        borderRadius: string;
+                base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    calendar: {
+                        backgroundColor: string;
+                        color: string;
+                        boxShadow: string;
+                    };
+                    dateCell: {
+                        color: string;
+                        _hover: {
+                            backgroundColor: string;
+                        };
+                        "&[data-today]": {
+                            boxShadow: string;
+                        };
                     };
                 };
-                "with-trigger": {
-                    wrapper: {
-                        borderLeftRadius: string;
+                floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    calendar: {
+                        backgroundColor: string;
+                        color: string;
+                        boxShadow: string;
+                    };
+                    dateCell: {
+                        color: string;
+                        _hover: {
+                            backgroundColor: string;
+                        };
+                    };
+                };
+                ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    calendar: {
+                        backgroundColor: string;
+                        color: string;
+                        boxShadow: string;
+                    };
+                    dateCell: {
+                        color: string;
+                        _hover: {
+                            backgroundColor: string;
+                        };
+                        _selected: {
+                            backgroundColor: string;
+                            color: string;
+                        };
                     };
                 };
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "simple" | "with-trigger" | undefined;
+                variant?: "base" | "ghost" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("dateCell" | "weekdays" | "weekend" | "calendar" | "calendarTriggerButton" | "dateTimeSegment" | "inputLabel" | "wrapper" | "arrow")[];
@@ -4152,6 +4198,7 @@ declare const theme: {
                 };
                 closeButton: {
                     position: string;
+                    color: string;
                     top: number;
                     insetEnd: number;
                 };