@vygruppen/spor-react 12.6.2 → 12.6.4

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.6.2 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.6.4 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -10,18 +10,18 @@ CLI Target: node16
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js           311.23 KB
-CJS dist/icons/index.js     380.00 B
-CJS dist/index.js.map       623.00 KB
-CJS dist/icons/index.js.map 157.00 B
-CJS ⚡️ Build success in 2615ms
-ESM dist/index.mjs           290.58 KB
+ESM dist/index.mjs           290.84 KB
 ESM dist/icons/index.mjs     110.00 B
+ESM dist/index.mjs.map       623.43 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM dist/index.mjs.map       623.00 KB
-ESM ⚡️ Build success in 2616ms
-DTS ⚡️ Build success in 29060ms
+ESM ⚡️ Build success in 2736ms
+CJS dist/index.js           311.49 KB
+CJS dist/icons/index.js     380.00 B
+CJS dist/index.js.map       623.43 KB
+CJS dist/icons/index.js.map 157.00 B
+CJS ⚡️ Build success in 2737ms
+DTS ⚡️ Build success in 29941ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        153.28 KB
+DTS dist/index.d.ts        153.52 KB
 DTS dist/icons/index.d.mts 44.00 B
-DTS dist/index.d.mts       153.28 KB
+DTS dist/index.d.mts       153.52 KB

package/.turbo/turbo-postinstall.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.6.2 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.6.4 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @vygruppen/spor-react
 
+## 12.6.4
+
+### Patch Changes
+
+- f88c33b: Field: Fix styling for multi line errorText, where arrow collided with the error box.
+  DateRangePicker: Use same value type as DatePicker.
+  Button: Update style from figma, different padding and font sizes.
+
+## 12.6.3
+
+### Patch Changes
+
+- 552118e: Combobox: Fix forwarding of props so styles, like background, can be applied
+  Dialog: Fix resonspive sizes, and shrink margin of fullscreen, "cover", modal
+  Tabs: Fix hover style for active tab
+- Updated dependencies [3414328]
+  - @vygruppen/spor-icon-react@4.2.1
+
 ## 12.6.2
 
 ### Patch Changes

package/dist/index.d.mts

@@ -286,27 +286,30 @@ declare const buttonRecipe: _chakra_ui_react.RecipeDefinition<{
         xs: {
             minHeight: number;
             minWidth: number;
-            paddingY: number;
-            fontSize: "xs";
+            paddingX: number;
+            fontSize: "mobile.xs";
             fontWeight: "normal";
         };
         sm: {
             minHeight: number;
             minWidth: number;
-            fontSize: "xs";
+            paddingX: number;
+            fontSize: "mobile.sm";
             fontWeight: "normal";
         };
         md: {
             minHeight: number;
             minWidth: number;
-            fontSize: "sm";
+            fontSize: "mobile.md";
             fontWeight: "bold";
+            paddingX: number;
         };
         lg: {
             minHeight: number;
             minWidth: number;
-            fontSize: "sm";
+            fontSize: "mobile.md";
             fontWeight: "bold";
+            paddingX: number;
         };
     };
 }>;
@@ -623,15 +626,15 @@ declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<AriaDate
     positioning?: PopoverRootProps["positioning"];
 } & FieldBaseProps & React__default.RefAttributes<HTMLDivElement>>;
 
-type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue$1>, "onChange" | "errorMessage" | "isInvalid" | "isRequired"> & Pick<BoxProps, "minHeight"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {
+type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "onChange" | "errorMessage" | "isInvalid" | "isRequired"> & Pick<BoxProps, "minHeight"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {
     startLabel?: string;
     startName?: string;
     endLabel?: string;
     endName?: string;
     withPortal?: boolean;
     onChange?: (dates: {
-        start: DateValue$1 | null;
-        end: DateValue$1 | null;
+        start: DateValue | null;
+        end: DateValue | null;
     } | null) => void;
     positioning?: PopoverRootProps["positioning"];
 } & FieldBaseProps;
@@ -3084,6 +3087,9 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
                 _selected: {
                     backgroundColor: "brand.surface";
                     color: "brand.text";
+                    _hover: {
+                        outline: "none";
+                    };
                 };
                 _disabled: {
                     backgroundColor: "surface.disabled";
@@ -3115,6 +3121,7 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
                     _hover: {
                         backgroundColor: "brand.surface.hover";
                         color: "brand.text";
+                        outline: "none";
                     };
                 };
             };

package/dist/index.d.ts

@@ -286,27 +286,30 @@ declare const buttonRecipe: _chakra_ui_react.RecipeDefinition<{
         xs: {
             minHeight: number;
             minWidth: number;
-            paddingY: number;
-            fontSize: "xs";
+            paddingX: number;
+            fontSize: "mobile.xs";
             fontWeight: "normal";
         };
         sm: {
             minHeight: number;
             minWidth: number;
-            fontSize: "xs";
+            paddingX: number;
+            fontSize: "mobile.sm";
             fontWeight: "normal";
         };
         md: {
             minHeight: number;
             minWidth: number;
-            fontSize: "sm";
+            fontSize: "mobile.md";
             fontWeight: "bold";
+            paddingX: number;
         };
         lg: {
             minHeight: number;
             minWidth: number;
-            fontSize: "sm";
+            fontSize: "mobile.md";
             fontWeight: "bold";
+            paddingX: number;
         };
     };
 }>;
@@ -623,15 +626,15 @@ declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<AriaDate
     positioning?: PopoverRootProps["positioning"];
 } & FieldBaseProps & React__default.RefAttributes<HTMLDivElement>>;
 
-type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue$1>, "onChange" | "errorMessage" | "isInvalid" | "isRequired"> & Pick<BoxProps, "minHeight"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {
+type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "onChange" | "errorMessage" | "isInvalid" | "isRequired"> & Pick<BoxProps, "minHeight"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {
     startLabel?: string;
     startName?: string;
     endLabel?: string;
     endName?: string;
     withPortal?: boolean;
     onChange?: (dates: {
-        start: DateValue$1 | null;
-        end: DateValue$1 | null;
+        start: DateValue | null;
+        end: DateValue | null;
     } | null) => void;
     positioning?: PopoverRootProps["positioning"];
 } & FieldBaseProps;
@@ -3084,6 +3087,9 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
                 _selected: {
                     backgroundColor: "brand.surface";
                     color: "brand.text";
+                    _hover: {
+                        outline: "none";
+                    };
                 };
                 _disabled: {
                     backgroundColor: "surface.disabled";
@@ -3115,6 +3121,7 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
                     _hover: {
                         backgroundColor: "brand.surface.hover";
                         color: "brand.text";
+                        outline: "none";
                     };
                 };
             };

package/dist/index.js

@@ -2681,7 +2681,8 @@ var Combobox = (props) => {
     emptyContent,
     inputRef: externalInputRef,
     children,
-    variant
+    variant,
+    ...restProps
   } = props;
   const { contains } = reactAria.useFilter({ sensitivity: "base" });
   const fallbackInputRef = React28.useRef(null);
@@ -2729,6 +2730,7 @@ var Combobox = (props) => {
     /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
+        ...restProps,
         ...styleProps(comboBoxProps),
         "aria-haspopup": "listbox",
         ref: inputRef,
@@ -5556,8 +5558,6 @@ var buttonRecipe = react.defineRecipe({
     cursor: "pointer",
     textWrap: "wrap",
     width: "fit-content",
-    paddingX: 3,
-    paddingY: 1,
     _disabled: {
       cursor: "not-allowed",
       pointerEvents: "none",
@@ -5637,27 +5637,30 @@ var buttonRecipe = react.defineRecipe({
       xs: {
         minHeight: 5,
         minWidth: 5,
-        paddingY: 0.5,
-        fontSize: "xs",
+        paddingX: 1.5,
+        fontSize: "mobile.xs",
         fontWeight: "normal"
       },
       sm: {
         minHeight: 6,
         minWidth: 6,
-        fontSize: "xs",
+        paddingX: 2,
+        fontSize: "mobile.sm",
         fontWeight: "normal"
       },
       md: {
         minHeight: 7,
         minWidth: 7,
-        fontSize: "sm",
-        fontWeight: "bold"
+        fontSize: "mobile.md",
+        fontWeight: "bold",
+        paddingX: 3
       },
       lg: {
         minHeight: 8,
         minWidth: 8,
-        fontSize: "sm",
-        fontWeight: "bold"
+        fontSize: "mobile.md",
+        fontWeight: "bold",
+        paddingX: 3
       }
     }
   },
@@ -7294,37 +7297,43 @@ var dialogSlotRecipe = react.defineSlotRecipe({
     size: {
       xs: {
         content: {
-          maxWidth: "sm"
+          maxWidth: "sm",
+          height: "auto"
         }
       },
       sm: {
         content: {
-          maxWidth: "md"
+          maxWidth: "md",
+          height: "auto"
         }
       },
       md: {
         content: {
-          maxWidth: "lg"
+          maxWidth: "lg",
+          height: "auto"
         }
       },
       lg: {
         content: {
-          maxWidth: "2xl"
+          maxWidth: "2xl",
+          height: "auto"
         }
       },
       xl: {
         content: {
-          maxWidth: "4xl"
+          maxWidth: "4xl",
+          height: "auto"
         }
       },
       cover: {
         positioner: {
-          padding: "10"
+          padding: "4"
         },
         content: {
           width: "100%",
           height: "100%",
-          "--dialog-margin": "0"
+          "--dialog-margin": "0",
+          margin: "0"
         }
       }
     },
@@ -7603,15 +7612,13 @@ var fieldSlotRecipe = react.defineSlotRecipe({
       _after: {
         content: "''",
         position: "absolute",
-        marginTop: "-0.45em",
+        top: 0,
         left: "1em",
-        width: 0,
-        height: 0,
-        transform: "rotate(45deg)",
-        borderLeft: "0.5em solid transparent",
-        borderRight: "0.5em solid transparent",
-        borderBottom: "0.5em solid",
-        borderColor: "lightRed"
+        width: "0.5rem",
+        height: "0.5rem",
+        backgroundColor: "lightRed",
+        transform: "translateY(-50%) rotate(45deg)",
+        pointerEvents: "none"
       }
     }
   }
@@ -9561,7 +9568,10 @@ var tabsSlotRecipe = react.defineSlotRecipe({
           },
           _selected: {
             backgroundColor: "brand.surface",
-            color: "brand.text"
+            color: "brand.text",
+            _hover: {
+              outline: "none"
+            }
           },
           _disabled: {
             backgroundColor: "surface.disabled",
@@ -9592,7 +9602,8 @@ var tabsSlotRecipe = react.defineSlotRecipe({
             color: "brand.text",
             _hover: {
               backgroundColor: "brand.surface.hover",
-              color: "brand.text"
+              color: "brand.text",
+              outline: "none"
             }
           }
         }