@vygruppen/spor-react 13.7.1 → 13.8.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@13.7.1 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@13.8.0 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-CJS dist/index.cjs           381.85 KB
 CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       757.94 KB
+CJS dist/index.cjs           382.91 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2364ms
-ESM dist/index.mjs           357.12 KB
+CJS dist/index.cjs.map       759.61 KB
+CJS ⚡️ Build success in 2740ms
+ESM dist/index.mjs           358.17 KB
 ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs.map       757.94 KB
+ESM dist/index.mjs.map       759.61 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM ⚡️ Build success in 2366ms
-DTS ⚡️ Build success in 21092ms
+ESM ⚡️ Build success in 2741ms
+DTS ⚡️ Build success in 19907ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        156.60 KB
+DTS dist/index.d.ts        156.17 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       156.60 KB
+DTS dist/index.d.cts       156.17 KB

package/.turbo/turbo-postinstall.log

@@ -1,8 +1,8 @@
 
-> @vygruppen/spor-react@13.7.1 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@13.8.0 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
-◇ injected env (0) from .env // tip: ◈ encrypted .env [www.dotenvx.com]
+◇ injected env (0) from .env // tip: ⌘ custom filepath { path: '/custom/path/.env' }
 ┌  Chakra CLI ⚡️
 [?25l│
 ◇  ✅ Generated conditions typings

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @vygruppen/spor-react
 
+## 13.8.0
+
+### Minor Changes
+
+- d5a0149: RadioGroup: Introduce invalid state for RadioGroup, Radio, and RadioCard.
+
+### Patch Changes
+
+- 988b0ad: Select: adjust the styling of select-items to make them similar to the ones in Autocomplete
+- 64589d0: Tabs: Added indicator with animation when navigating between tabtriggers.
+- Updated dependencies [ee08c36]
+  - @vygruppen/spor-icon-react@5.0.4
+
+## 13.7.2
+
+### Patch Changes
+
+- ff28880: RadioCard: Make children take 100% width
+
 ## 13.7.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -1595,11 +1595,11 @@ var RadioCard = ({
   showIndicator = false,
   ...props
 }) => {
-  const { inputProps, children } = props;
+  const { inputProps, children, invalid } = props;
   const uniqueId = React14.useId();
   const itemControlId = `radio-card-item-control-${uniqueId}`;
   const inputHasAriaLabel = (inputProps == null ? void 0 : inputProps["aria-labelledby"]) || (inputProps == null ? void 0 : inputProps["aria-label"]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioCard.Item, { ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioCard.Item, { ...props, "aria-invalid": invalid, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       react.RadioCard.ItemHiddenInput,
       {
@@ -1610,7 +1610,7 @@ var RadioCard = ({
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(react.RadioCard.ItemControl, { id: itemControlId, "aria-hidden": true, children: [
       showIndicator && /* @__PURE__ */ jsxRuntime.jsx(react.RadioCard.ItemIndicator, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { direction: "column", children })
+      /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { direction: "column", width: "100%", children })
     ] })
   ] });
 };
@@ -5029,8 +5029,8 @@ var Radio = ({
   ref,
   ...props
 }) => {
-  const { children, inputProps, rootRef, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioGroup.Item, { ref: rootRef, ...rest, children: [
+  const { children, inputProps, rootRef, invalid, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioGroup.Item, { ref: rootRef, ...rest, "aria-invalid": invalid, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup.ItemHiddenInput, { ref, ...inputProps }),
     /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup.ItemIndicator, {}),
     children && /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup.ItemText, { children })
@@ -5150,7 +5150,7 @@ var SelectItem = ({
   const multiple = selectContext.multiple;
   const isSelected = selectContext.value.includes(item.value);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Select.Item, { item, ...rest, ref, children: [
-    multiple && /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Root, { checked: isSelected, pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Indicator, {}) }) }),
+    multiple && /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Root, { checked: isSelected, pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Checkbox.Indicator, { marginLeft: "1px" }) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { width: "100%", children: [
       /* @__PURE__ */ jsxRuntime.jsx(react.Select.ItemText, { display: "flex", children }),
       description && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { "data-part": "item-description", children: description })
@@ -11278,6 +11278,18 @@ var radioGroupSlotRecipe = react.defineSlotRecipe({
           backgroundColor: "outline.disabled"
         }
       },
+      _invalid: {
+        borderColor: "outline.error",
+        "& .dot": {
+          backgroundColor: "outline.error"
+        },
+        _hover: {
+          borderColor: "outline.error",
+          "& .dot": {
+            backgroundColor: "outline.error"
+          }
+        }
+      },
       _focusVisible: {
         outlineWidth: "2px",
         outlineColor: "outline.focus",
@@ -11327,6 +11339,25 @@ var radioCardSlotRecipe = react.defineSlotRecipe({
         pointerEvents: "none",
         background: "surface.disabled",
         color: "text.disabled"
+      },
+      _invalid: {
+        outlineColor: "outline.error",
+        "& .dot": {
+          backgroundColor: "outline.error"
+        },
+        _hover: {
+          outlineColor: "outline.error",
+          "& .dot": {
+            backgroundColor: "outline.error"
+          },
+          _active: {
+            backgroundColor: "surface.critical"
+          }
+        },
+        _checked: {
+          outlineColor: "outline.error",
+          backgroundColor: "surface.critical"
+        }
       }
     },
     label: {
@@ -11542,10 +11573,9 @@ var selectSlotRecipe = react.defineSlotRecipe({
       }
     },
     item: {
-      paddingX: 2,
-      paddingY: 2,
-      marginY: 1,
-      marginX: 1,
+      px: 2,
+      py: 1,
+      margin: 1,
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
@@ -11554,38 +11584,28 @@ var selectSlotRecipe = react.defineSlotRecipe({
       color: "text.ghost",
       cursor: "pointer",
       outline: "none",
-      "&[data-highlighted]:hover": {
-        outlineOffset: "2px",
-        outline: "2px solid",
-        outlineColor: "outline.focus",
-        backgroundColor: "surface.accent.hover"
-      },
-      "&[data-highlighted]": {
-        outlineOffset: "2px",
-        outline: "2px solid",
-        outlineColor: "outline.focus"
-      },
-      _active: {
-        backgroundColor: "surface.accent.active"
-      },
-      _highlighted: {
+      _hover: {
+        backgroundColor: "surface.accent.hover",
         _active: {
-          color: "text"
+          backgroundColor: "surface.accent.active"
         }
       },
-      _hover: {
-        backgroundColor: "surface.accent.hover"
-      },
       _selected: {
         backgroundColor: "surface.accent"
       },
+      _highlighted: {
+        backgroundColor: "surface.ghost.active",
+        _selected: {
+          backgroundColor: "surface.accent"
+        }
+      },
       _icon: {
         width: 3,
         height: 3
       },
       "& [data-part='item-description']": {
         fontSize: ["mobile.xs", "desktop.xs"],
-        color: "text.ghost"
+        color: "text.subtle"
       }
     },
     control: {
@@ -11710,9 +11730,7 @@ var selectSlotRecipe = react.defineSlotRecipe({
           }
         },
         item: {
-          paddingX: 2,
-          paddingY: 1,
-          fontSize: "xs",
+          fontSize: ["mobile.xs", "desktop.xs"],
           "& [data-part='item-description']": {
             fontSize: ["mobile.2xs", "desktop.2xs"]
           }
@@ -12182,7 +12200,9 @@ var tabsSlotRecipe = react.defineSlotRecipe({
       alignItems: "center",
       gap: 0.5,
       borderRadius: "xl",
-      width: "fit-content"
+      width: "fit-content",
+      position: "relative",
+      overflow: "hidden"
     },
     trigger: {
       display: "flex",
@@ -12193,7 +12213,32 @@ var tabsSlotRecipe = react.defineSlotRecipe({
       transitionDuration: "normal",
       height: "100%",
       whiteSpace: "nowrap",
-      borderRadius: "xl"
+      borderRadius: "xl",
+      position: "relative",
+      ".spor-tabs__list:has(.spor-tabs__indicator) &": {
+        transition: "color 0.2s ease"
+      },
+      _selected: {
+        color: "text.brand",
+        // @ts-expect-error — valid CSS selector, not recognized by Chakra's types
+        ".spor-tabs__list:not(:has(.spor-tabs__indicator)) &[data-selected]": {
+          backgroundColor: "surface.brand",
+          _hover: {
+            backgroundColor: "surface.brand"
+          }
+        }
+      }
+    },
+    indicator: {
+      position: "absolute",
+      top: "2.5px",
+      left: 0,
+      width: "var(--width)",
+      height: "var(--height)",
+      transform: "translate(var(--x), var(--y))",
+      transition: "transform 0.2s ease, width 0.2s ease",
+      borderRadius: "xl",
+      backgroundColor: "surface.brand"
     }
   },
   variants: {
@@ -12231,38 +12276,32 @@ var tabsSlotRecipe = react.defineSlotRecipe({
       core: {
         list: {
           color: "text.core",
-          border: "sm"
+          border: "sm",
+          borderColor: "outline"
         },
         trigger: {
           color: "text.core",
           border: "md",
           borderColor: "transparent",
-          _hover: {
-            outline: "2px solid",
-            outlineColor: "outline.core.hover",
-            outlineOffset: "-2px"
-          },
-          _active: {
-            backgroundColor: "surface.brand.active",
-            color: "text.brand",
-            outline: "none"
-          },
-          _selected: {
-            backgroundColor: "surface.brand",
-            color: "text.brand",
+          "&:not([data-selected])": {
             _hover: {
-              outline: "none"
+              backgroundColor: "surface.ghost.hover",
+              _active: {
+                backgroundColor: "surface.ghost.active",
+                outline: "none",
+                outlineColor: "transparent"
+              }
             }
-          },
-          _disabled: {
-            backgroundColor: "surface.disabled",
-            color: "surface.disabled"
           }
+        },
+        _disabled: {
+          backgroundColor: "surface.disabled",
+          color: "surface.disabled"
         }
       },
       accent: {
         list: {
-          backgroundColor: "bg.accent",
+          backgroundColor: "surface.accent",
           color: "text.accent"
         },
         trigger: {
@@ -12271,22 +12310,17 @@ var tabsSlotRecipe = react.defineSlotRecipe({
             backgroundColor: "surface.disabled",
             color: "icon.disabled"
           },
-          _hover: {
-            backgroundColor: "surface.accent.hover",
-            _active: {
-              backgroundColor: "surface.brand.active",
-              color: "text.brand"
-            }
-          },
-          _selected: {
-            backgroundColor: "surface.brand",
-            color: "text.brand",
+          "&:not([data-selected])": {
             _hover: {
-              backgroundColor: "surface.brand.hover",
-              color: "text.brand",
-              outline: "none"
+              backgroundColor: "surface.accent.hover",
+              _active: {
+                backgroundColor: "surface.accent.active"
+              }
             }
           }
+        },
+        indicator: {
+          backgroundColor: "surface.brand"
         }
       }
     },
@@ -12299,6 +12333,9 @@ var tabsSlotRecipe = react.defineSlotRecipe({
         trigger: {
           paddingX: 2,
           paddingY: 0
+        },
+        indicator: {
+          top: "1px"
         }
       },
       sm: {
@@ -12328,11 +12365,7 @@ var tabsSlotRecipe = react.defineSlotRecipe({
         trigger: {
           fontWeight: "bold",
           fontSize: "sm",
-          paddingX: 3,
-          _focus: {
-            border: "md",
-            borderColor: "surface.accent"
-          }
+          paddingX: 3
         }
       }
     }