@vygruppen/spor-react 13.7.2 → 13.8.0

package/dist/index.d.cts

@@ -3925,37 +3925,31 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
             list: {
                 color: "text.core";
                 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: {
@@ -3964,23 +3958,18 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
                     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";
+            };
         };
     };
     size: {
@@ -3993,6 +3982,9 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
                 paddingX: number;
                 paddingY: number;
             };
+            indicator: {
+                top: "1px";
+            };
         };
         sm: {
             list: {
@@ -4022,10 +4014,6 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
                 fontWeight: "bold";
                 fontSize: "sm";
                 paddingX: number;
-                _focus: {
-                    border: "md";
-                    borderColor: "surface.accent";
-                };
             };
         };
     };

package/dist/index.d.ts

@@ -3925,37 +3925,31 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
             list: {
                 color: "text.core";
                 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: {
@@ -3964,23 +3958,18 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
                     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";
+            };
         };
     };
     size: {
@@ -3993,6 +3982,9 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
                 paddingX: number;
                 paddingY: number;
             };
+            indicator: {
+                top: "1px";
+            };
         };
         sm: {
             list: {
@@ -4022,10 +4014,6 @@ declare const tabsSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "in
                 fontWeight: "bold";
                 fontSize: "sm";
                 paddingX: number;
-                _focus: {
-                    border: "md";
-                    borderColor: "surface.accent";
-                };
             };
         };
     };

package/dist/index.mjs

@@ -1576,11 +1576,11 @@ var RadioCard = ({
   showIndicator = false,
   ...props
 }) => {
-  const { inputProps, children } = props;
+  const { inputProps, children, invalid } = props;
   const uniqueId = 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__ */ jsxs(RadioCard$1.Item, { ...props, children: [
+  return /* @__PURE__ */ jsxs(RadioCard$1.Item, { ...props, "aria-invalid": invalid, children: [
     /* @__PURE__ */ jsx(
       RadioCard$1.ItemHiddenInput,
       {
@@ -5010,8 +5010,8 @@ var Radio = ({
   ref,
   ...props
 }) => {
-  const { children, inputProps, rootRef, ...rest } = props;
-  return /* @__PURE__ */ jsxs(RadioGroup$1.Item, { ref: rootRef, ...rest, children: [
+  const { children, inputProps, rootRef, invalid, ...rest } = props;
+  return /* @__PURE__ */ jsxs(RadioGroup$1.Item, { ref: rootRef, ...rest, "aria-invalid": invalid, children: [
     /* @__PURE__ */ jsx(RadioGroup$1.ItemHiddenInput, { ref, ...inputProps }),
     /* @__PURE__ */ jsx(RadioGroup$1.ItemIndicator, {}),
     children && /* @__PURE__ */ jsx(RadioGroup$1.ItemText, { children })
@@ -5131,7 +5131,7 @@ var SelectItem = ({
   const multiple = selectContext.multiple;
   const isSelected = selectContext.value.includes(item.value);
   return /* @__PURE__ */ jsxs(Select$1.Item, { item, ...rest, ref, children: [
-    multiple && /* @__PURE__ */ jsx(Checkbox$1.Root, { checked: isSelected, pointerEvents: "none", children: /* @__PURE__ */ jsx(Checkbox$1.Control, { children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {}) }) }),
+    multiple && /* @__PURE__ */ jsx(Checkbox$1.Root, { checked: isSelected, pointerEvents: "none", children: /* @__PURE__ */ jsx(Checkbox$1.Control, { children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { marginLeft: "1px" }) }) }),
     /* @__PURE__ */ jsxs(Box, { width: "100%", children: [
       /* @__PURE__ */ jsx(Select$1.ItemText, { display: "flex", children }),
       description && /* @__PURE__ */ jsx(Box, { "data-part": "item-description", children: description })
@@ -11259,6 +11259,18 @@ var radioGroupSlotRecipe = 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",
@@ -11308,6 +11320,25 @@ var radioCardSlotRecipe = 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: {
@@ -11523,10 +11554,9 @@ var selectSlotRecipe = defineSlotRecipe({
       }
     },
     item: {
-      paddingX: 2,
-      paddingY: 2,
-      marginY: 1,
-      marginX: 1,
+      px: 2,
+      py: 1,
+      margin: 1,
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
@@ -11535,38 +11565,28 @@ var selectSlotRecipe = 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: {
@@ -11691,9 +11711,7 @@ var selectSlotRecipe = defineSlotRecipe({
           }
         },
         item: {
-          paddingX: 2,
-          paddingY: 1,
-          fontSize: "xs",
+          fontSize: ["mobile.xs", "desktop.xs"],
           "& [data-part='item-description']": {
             fontSize: ["mobile.2xs", "desktop.2xs"]
           }
@@ -12163,7 +12181,9 @@ var tabsSlotRecipe = defineSlotRecipe({
       alignItems: "center",
       gap: 0.5,
       borderRadius: "xl",
-      width: "fit-content"
+      width: "fit-content",
+      position: "relative",
+      overflow: "hidden"
     },
     trigger: {
       display: "flex",
@@ -12174,7 +12194,32 @@ var tabsSlotRecipe = 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: {
@@ -12212,38 +12257,32 @@ var tabsSlotRecipe = 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: {
@@ -12252,22 +12291,17 @@ var tabsSlotRecipe = 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"
         }
       }
     },
@@ -12280,6 +12314,9 @@ var tabsSlotRecipe = defineSlotRecipe({
         trigger: {
           paddingX: 2,
           paddingY: 0
+        },
+        indicator: {
+          top: "1px"
         }
       },
       sm: {
@@ -12309,11 +12346,7 @@ var tabsSlotRecipe = defineSlotRecipe({
         trigger: {
           fontWeight: "bold",
           fontSize: "sm",
-          paddingX: 3,
-          _focus: {
-            border: "md",
-            borderColor: "surface.accent"
-          }
+          paddingX: 3
         }
       }
     }