@vygruppen/spor-react 13.7.1 → 13.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.7.1",
+  "version": "13.8.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
     "@vygruppen/spor-design-tokens": "5.1.1",
-    "@vygruppen/spor-icon-react": "5.0.3",
+    "@vygruppen/spor-icon-react": "5.0.4",
     "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {

package/src/input/Radio.tsx

@@ -34,10 +34,10 @@ export const Radio = ({
 }: RadioProps & {
   ref?: React.Ref<HTMLInputElement>;
 }) => {
-  const { children, inputProps, rootRef, ...rest } = props;
+  const { children, inputProps, rootRef, invalid, ...rest } = props;
 
   return (
-    <ChakraRadioGroup.Item ref={rootRef} {...rest}>
+    <ChakraRadioGroup.Item ref={rootRef} {...rest} aria-invalid={invalid}>
       <ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
       <ChakraRadioGroup.ItemIndicator />
       {children && (

package/src/input/Select.tsx

@@ -138,7 +138,7 @@ export const SelectItem = ({
       {multiple && (
         <ChakraCheckbox.Root checked={isSelected} pointerEvents="none">
           <ChakraCheckbox.Control>
-            <ChakraCheckbox.Indicator />
+            <ChakraCheckbox.Indicator marginLeft="1px" />
           </ChakraCheckbox.Control>
         </ChakraCheckbox.Root>
       )}

package/src/layout/RadioCard.tsx

@@ -47,7 +47,7 @@ export const RadioCard = ({
 }: RadioCardItemProps & {
   ref?: React.Ref<HTMLInputElement>;
 }) => {
-  const { inputProps, children } = props;
+  const { inputProps, children, invalid } = props;
   const uniqueId = useId();
   const itemControlId = `radio-card-item-control-${uniqueId}`;
 
@@ -55,7 +55,7 @@ export const RadioCard = ({
     inputProps?.["aria-labelledby"] || inputProps?.["aria-label"];
 
   return (
-    <ChakraRadioCard.Item {...props}>
+    <ChakraRadioCard.Item {...props} aria-invalid={invalid}>
       <ChakraRadioCard.ItemHiddenInput
         aria-labelledby={
           inputHasAriaLabel ? inputProps?.["aria-labelledby"] : itemControlId
@@ -65,7 +65,9 @@ export const RadioCard = ({
       />
       <ChakraRadioCard.ItemControl id={itemControlId} aria-hidden>
         {showIndicator && <ChakraRadioCard.ItemIndicator />}
-        <Flex direction="column">{children}</Flex>
+        <Flex direction="column" width="100%">
+          {children}
+        </Flex>
       </ChakraRadioCard.ItemControl>
     </ChakraRadioCard.Item>
   );

package/src/theme/slot-recipes/radio-card.ts

@@ -30,6 +30,25 @@ export const radioCardSlotRecipe = defineSlotRecipe({
         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: {
       userSelect: "none",

package/src/theme/slot-recipes/radio.ts

@@ -60,6 +60,18 @@ export const 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",

package/src/theme/slot-recipes/select.ts

@@ -101,10 +101,9 @@ export const selectSlotRecipe = defineSlotRecipe({
       },
     },
     item: {
-      paddingX: 2,
-      paddingY: 2,
-      marginY: 1,
-      marginX: 1,
+      px: 2,
+      py: 1,
+      margin: 1,
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
@@ -113,38 +112,28 @@ export const selectSlotRecipe = defineSlotRecipe({
       color: "text.ghost",
       cursor: "pointer",
       outline: "none",
-      "&[data-highlighted]:hover": {
-        outlineOffset: "2px",
-        outline: "2px solid",
-        outlineColor: "outline.focus",
+      _hover: {
         backgroundColor: "surface.accent.hover",
-      },
-      "&[data-highlighted]": {
-        outlineOffset: "2px",
-        outline: "2px solid",
-        outlineColor: "outline.focus",
-      },
-      _active: {
-        backgroundColor: "surface.accent.active",
-      },
-      _highlighted: {
         _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: {
@@ -269,9 +258,7 @@ export const selectSlotRecipe = defineSlotRecipe({
           },
         },
         item: {
-          paddingX: 2,
-          paddingY: 1,
-          fontSize: "xs",
+          fontSize: ["mobile.xs", "desktop.xs"],
           "& [data-part='item-description']": {
             fontSize: ["mobile.2xs", "desktop.2xs"],
           },

package/src/theme/slot-recipes/tabs.ts

@@ -16,6 +16,8 @@ export const tabsSlotRecipe = defineSlotRecipe({
       gap: 0.5,
       borderRadius: "xl",
       width: "fit-content",
+      position: "relative",
+      overflow: "hidden",
     },
     trigger: {
       display: "flex",
@@ -27,6 +29,31 @@ export const tabsSlotRecipe = defineSlotRecipe({
       height: "100%",
       whiteSpace: "nowrap",
       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: {
@@ -65,37 +92,31 @@ export const tabsSlotRecipe = defineSlotRecipe({
         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: {
@@ -105,23 +126,18 @@ export const 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",
+        },
       },
     },
     size: {
@@ -134,6 +150,9 @@ export const tabsSlotRecipe = defineSlotRecipe({
           paddingX: 2,
           paddingY: 0,
         },
+        indicator: {
+          top: "1px",
+        },
       },
       sm: {
         list: {
@@ -163,10 +182,6 @@ export const tabsSlotRecipe = defineSlotRecipe({
           fontWeight: "bold",
           fontSize: "sm",
           paddingX: 3,
-          _focus: {
-            border: "md",
-            borderColor: "surface.accent",
-          },
         },
       },
     },