@vygruppen/spor-react 13.3.1 → 13.4.0

package/src/theme/recipes/badge.ts

@@ -13,74 +13,52 @@ export const badgeRecipie = defineRecipe({
       neutral: {
         backgroundColor: "surface",
         color: "text",
-        "& svg": {
-          color: "icon",
-        },
+        "& svg": { color: "icon" },
       },
       grey: {
         backgroundColor: "surface.neutral",
         color: "text.neutral",
-        "& svg": {
-          color: "icon.neutral",
-        },
+        "& svg": { color: "icon.neutral" },
       },
       green: {
         backgroundColor: "surface.success",
         color: "text.success",
-        "& svg": {
-          color: "icon.success",
-        },
+        "& svg": { color: "icon.success" },
       },
       blue: {
         backgroundColor: "surface.info",
         color: "text.info",
-        "& svg": {
-          color: "icon.info",
-        },
+        "& svg": { color: "icon.info" },
       },
       cream: {
         backgroundColor: "surface.warning",
         color: "text.warning",
-        "& svg": {
-          color: "icon.warning",
-        },
+        "& svg": { color: "icon.warning" },
       },
       yellow: {
         backgroundColor: "surface.notice",
         color: "text.notice",
-        "& svg": {
-          color: "icon.notice",
-        },
+        "& svg": { color: "icon.notice" },
       },
       orange: {
         backgroundColor: "surface.caution",
         color: "text.caution",
-        "& svg": {
-          color: "icon.caution",
-        },
+        "& svg": { color: "icon.caution" },
       },
       red: {
         backgroundColor: "surface.critical",
         color: "text.critical",
-        "& svg": {
-          color: "icon.critical",
-        },
+        "& svg": { color: "icon.critical" },
       },
       brightRed: {
-        backgroundColor: {
-          _light: "brightRed",
-          _dark: "brightRed",
-        },
-        color: {
-          _light: "pink",
-          _dark: "pink",
-        },
-        "& svg": {
-          color: {
-            _light: "pink",
-            _dark: "pink",
-          },
-        },
+        backgroundColor: { _light: "brightRed", _dark: "brightRed" },
+        color: { _light: "pink", _dark: "pink" },
+        "& svg": { color: { _light: "pink", _dark: "pink" } },
+      },
+      disabled: {
+        backgroundColor: "surface.disabled",
+        color: "text.disabled",
+        "& svg": { color: "icon.disabled" },
       },
     },
     size: {
@@ -106,11 +84,7 @@ export const badgeRecipie = defineRecipe({
         borderRadius: "xs",
       },
     },
-    attached: {
-      true: {
-        borderBottomRadius: "none",
-      },
-    },
+    attached: { true: { borderBottomRadius: "none" } },
     inverted: { true: {} },
   },
   defaultVariants: {
@@ -124,60 +98,27 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "blue",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "darkBlue",
-          _dark: "lightBlue",
-        },
-        color: {
-          _light: "icyBlue",
-          _dark: "royal",
-        },
-        "& svg": {
-          color: {
-            _light: "royal",
-            _dark: "icyBlue",
-          },
-        },
+        backgroundColor: { _light: "darkBlue", _dark: "lightBlue" },
+        color: { _light: "icyBlue", _dark: "royal" },
+        "& svg": { color: { _light: "royal", _dark: "icyBlue" } },
       },
     },
     {
       colorPalette: "green",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "darkTeal",
-          _dark: "seaMist",
-        },
-        color: {
-          _light: "mint",
-          _dark: "jungle",
-        },
-        "& svg": {
-          color: {
-            _light: "mint",
-            _dark: "jungle",
-          },
-        },
+        backgroundColor: { _light: "darkTeal", _dark: "seaMist" },
+        color: { _light: "mint", _dark: "jungle" },
+        "& svg": { color: { _light: "mint", _dark: "jungle" } },
       },
     },
     {
       colorPalette: "grey",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "carbon",
-          _dark: "platinum",
-        },
-        color: {
-          _light: "white",
-          _dark: "darkGrey",
-        },
-        "& svg": {
-          color: {
-            _light: "white",
-            _dark: "darkGrey",
-          },
-        },
+        backgroundColor: { _light: "carbon", _dark: "platinum" },
+        color: { _light: "white", _dark: "darkGrey" },
+        "& svg": { color: { _light: "white", _dark: "darkGrey" } },
       },
     },
     {
@@ -185,80 +126,36 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "cream",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "coffee",
-          _dark: "blonde",
-        },
-        color: {
-          _light: "cornsilk",
-          _dark: "coffee",
-        },
-        "& svg": {
-          color: {
-            _light: "cornsilk",
-            _dark: "coffee",
-          },
-        },
+        backgroundColor: { _light: "coffee", _dark: "blonde" },
+        color: { _light: "cornsilk", _dark: "coffee" },
+        "& svg": { color: { _light: "cornsilk", _dark: "coffee" } },
       },
     },
     {
       colorPalette: "yellow",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "bronze",
-          _dark: "banana",
-        },
-        color: {
-          _light: "cornsilk",
-          _dark: "coffee",
-        },
-        "& svg": {
-          color: {
-            _light: "cornsilk",
-            _dark: "coffee",
-          },
-        },
+        backgroundColor: { _light: "bronze", _dark: "banana" },
+        color: { _light: "cornsilk", _dark: "coffee" },
+        "& svg": { color: { _light: "cornsilk", _dark: "coffee" } },
       },
     },
     {
       colorPalette: "orange",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "wood",
-          _dark: "champagne",
-        },
-        color: {
-          _light: "bisque",
-          _dark: "wood",
-        },
-        "& svg": {
-          color: {
-            _light: "bisque",
-            _dark: "wood",
-          },
-        },
+        backgroundColor: { _light: "wood", _dark: "champagne" },
+        color: { _light: "bisque", _dark: "wood" },
+        "& svg": { color: { _light: "bisque", _dark: "wood" } },
       },
     },
     {
       colorPalette: "red",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "burgundy",
-          _dark: "lightRed",
-        },
-        color: {
-          _light: "pink",
-          _dark: "maroon",
-        },
-        "& svg": {
-          color: {
-            _light: "pink",
-            _dark: "maroon",
-          },
-        },
+        backgroundColor: { _light: "burgundy", _dark: "lightRed" },
+        color: { _light: "pink", _dark: "maroon" },
+        "& svg": { color: { _light: "pink", _dark: "maroon" } },
       },
     },
     {
@@ -266,20 +163,9 @@ export const badgeRecipie = defineRecipe({
       colorPalette: "neutral",
       inverted: true,
       css: {
-        backgroundColor: {
-          _light: "ink",
-          _dark: "white",
-        },
-        color: {
-          _light: "white",
-          _dark: "darkGrey",
-        },
-        "& svg": {
-          color: {
-            _light: "white",
-            _dark: "darkGrey",
-          },
-        },
+        backgroundColor: { _light: "ink", _dark: "white" },
+        color: { _light: "white", _dark: "darkGrey" },
+        "& svg": { color: { _light: "white", _dark: "darkGrey" } },
       },
     },
   ],

package/src/theme/recipes/input.ts

@@ -13,10 +13,6 @@ export const inputRecipe = defineRecipe({
     transitionDuration: "fast",
     color: "text",
     position: "relative",
-    paddingX: 3,
-    paddingTop: 3,
-    height: 8,
-    fontSize: "mobile.md",
 
     _disabled: {
       backgroundColor: "surface.disabled",
@@ -83,8 +79,23 @@ export const inputRecipe = defineRecipe({
         },
       },
     },
+    size: {
+      sm: {
+        paddingTop: 2,
+        height: 7,
+        fontSize: "xs",
+        paddingX: 2,
+      },
+      md: {
+        paddingX: 3,
+        paddingTop: 3,
+        height: 8,
+        fontSize: "mobile.md",
+      },
+    },
   },
   defaultVariants: {
     variant: "core",
+    size: "md",
   },
 });

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

@@ -201,12 +201,10 @@ export const selectAnatomy = createAnatomy("select").parts(
   "root",
   "trigger",
   "indicatorGroup",
-  "indicator",
-  "selectContent",
+  "content",
   "item",
   "control",
   "itemText",
-  "itemDescription",
   "itemGroup",
   "itemGroupLabel",
   "label",

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

@@ -14,7 +14,6 @@ export const breadcrumbSlotRecipe = defineSlotRecipe({
     },
     link: {
       cursor: "pointer",
-      padding: 0.5,
       borderRadius: "xs",
     },
     currentLink: {

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

@@ -14,17 +14,15 @@ export const fieldSlotRecipe = defineSlotRecipe({
     },
     requiredIndicator: {
       marginStart: 1,
-      // eslint-disable-next-line spor/use-semantic-tokens
-      color: "brightRed",
+      color: "outline.error",
     },
     label: {
       display: "flex",
     },
     helperText: {
-      marginTop: 2,
       color: "text.subtle",
       lineHeight: "normal",
-      fontSize: "sm",
+      fontSize: ["mobile.sm", "desktop.sm"],
     },
     errorText: {
       borderRadius: "xs",
@@ -52,4 +50,40 @@ export const fieldSlotRecipe = defineSlotRecipe({
       },
     },
   },
+  variants: {
+    size: {
+      sm: {
+        label: {
+          fontSize: ["mobile.xs", "desktop.xs"],
+          paddingX: 2,
+
+          "&[data-float]": {
+            fontSize: ["mobile.2xs", "desktop.2xs"],
+            top: 0,
+          },
+          top: "0.5rem",
+        },
+        helperText: {
+          color: "text.subtle",
+          lineHeight: "normal",
+          fontSize: ["mobile.xs", "desktop.xs"],
+        },
+      },
+      md: {
+        label: {
+          paddingX: 3,
+          fontSize: ["mobile.sm", "desktop.sm"],
+          "&[data-float]": {
+            fontSize: ["mobile.2xs", "desktop.2xs"],
+            color: "text.subtle",
+            top: "0.3rem",
+          },
+          top: "0.9rem",
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
 });

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

@@ -55,5 +55,20 @@ export const nativeSelectSlotRecipe = defineSlotRecipe({
         },
       },
     },
+    size: {
+      sm: {
+        field: {
+          ...inputRecipe.variants?.size?.sm,
+        },
+      },
+      md: {
+        field: {
+          ...inputRecipe.variants?.size?.md,
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
   },
 });

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

@@ -16,15 +16,9 @@ export const selectSlotRecipe = defineSlotRecipe({
     label: {
       fontSize: ["mobile.sm", "desktop.sm"],
       top: 0,
-      left: 3,
       zIndex: 0,
       position: "absolute",
       color: "text",
-      marginY: 2,
-
-      _selected: {
-        transform: ["scale(0.825) translateY(-10px)"],
-      },
 
       transitionProperty: "transform",
       transitionDuration: "fast",
@@ -36,14 +30,10 @@ export const selectSlotRecipe = defineSlotRecipe({
       display: "flex",
       appearance: "none",
       width: "100%",
-      height: 8,
       color: "text",
-      paddingY: 1.5,
-      paddingX: 3,
 
       justifyContent: "space-between",
       alignItems: "center",
-      fontSize: "mobile.md",
       borderRadius: "sm",
       cursor: "pointer",
 
@@ -52,11 +42,14 @@ export const selectSlotRecipe = defineSlotRecipe({
           transform: "rotate(180deg)",
         },
       },
+      _active: {
+        backgroundColor: "surface",
+      },
     },
     indicatorGroup: {
       display: "flex",
       alignItems: "center",
-      gap: "1",
+      gap: "0.5",
       position: "absolute",
       right: "0",
       top: "0",
@@ -64,22 +57,22 @@ export const selectSlotRecipe = defineSlotRecipe({
       paddingX: 2,
 
       pointerEvents: "none",
-    },
-    indicator: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      color: {
-        base: "text",
-        _disabled: "text.disabled",
-        _invalid: "text.highlight",
-      },
-      _icon: {
-        width: 3,
-        height: 3,
+      "& [data-part='indicator']": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: {
+          base: "text",
+          _disabled: "text.disabled",
+          _invalid: "text.highlight",
+        },
+        _icon: {
+          width: 3,
+          height: 3,
+        },
       },
     },
-    selectContent: {
+    content: {
       backgroundColor: "surface",
       boxShadow: "sm",
       overflowY: "auto",
@@ -134,8 +127,6 @@ export const selectSlotRecipe = defineSlotRecipe({
       },
       _hover: {
         backgroundColor: "surface.accent.hover",
-        outline: "2px solid core.outline",
-        outlineOffset: "2px",
       },
       _selected: {
         backgroundColor: "surface.accent",
@@ -144,6 +135,10 @@ export const selectSlotRecipe = defineSlotRecipe({
         width: 3,
         height: 3,
       },
+      "& [data-part='item-description']": {
+        fontSize: ["mobile.xs", "desktop.xs"],
+        color: "text.ghost",
+      },
     },
     control: {
       position: "relative",
@@ -162,6 +157,7 @@ export const selectSlotRecipe = defineSlotRecipe({
     },
     itemText: {
       flex: "1",
+      alignItems: "center",
     },
     itemGroup: {
       _first: { mt: "0" },
@@ -170,14 +166,6 @@ export const selectSlotRecipe = defineSlotRecipe({
       py: "1",
       fontWeight: "medium",
     },
-    valueText: {},
-    itemDescription: {
-      fontSize: ["mobile.xs", "desktop.xs"],
-      color: "text.ghost",
-      "[aria-selected='true'] &": {
-        color: "text.ghost",
-      },
-    },
   },
   variants: {
     variant: {
@@ -198,6 +186,10 @@ export const selectSlotRecipe = defineSlotRecipe({
             backgroundColor: "surface.disabled",
           },
         },
+        content: {
+          outline: "2px solid",
+          outlineColor: "outline.core",
+        },
       },
       floating: {
         control: {
@@ -242,5 +234,66 @@ export const selectSlotRecipe = defineSlotRecipe({
         },
       },
     },
+    size: {
+      sm: {
+        trigger: {
+          height: 7,
+          paddingY: 1.5,
+          fontSize: "xs",
+          paddingX: 2,
+        },
+        label: {
+          fontSize: ["mobile.xs", "desktop.xs"],
+          left: 2,
+          marginY: 1.5,
+          _selected: {
+            transform: ["scale(0.85) translateY(-9px)"],
+            fontSize: "desktop.2xs",
+            color: "text.subtle",
+          },
+        },
+        item: {
+          paddingX: 2,
+          paddingY: 1,
+          fontSize: "xs",
+          "& [data-part='item-description']": {
+            fontSize: ["mobile.2xs", "desktop.2xs"],
+          },
+        },
+        itemGroupLabel: {
+          py: 0.5,
+          fontSize: "xs",
+        },
+        valueText: {
+          paddingTop: 0,
+          "&[data-with-placeholder]": {
+            paddingTop: "1.5",
+          },
+        },
+      },
+      md: {
+        trigger: {
+          height: 8,
+          paddingY: 1.5,
+          paddingX: 3,
+          fontSize: "sm",
+        },
+        label: {
+          left: 3,
+          marginY: 2,
+          _selected: {
+            transform: ["scale(0.825) translateY(-10px)"],
+          },
+        },
+        valueText: {
+          "&[data-with-placeholder]": {
+            paddingTop: "4",
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
   },
 });

package/src/typography/Badge.tsx

@@ -6,18 +6,14 @@ import {
 } from "@chakra-ui/react";
 import { IconComponent } from "@vygruppen/spor-icon-react";
 
-export type BadgeProps = ChakraBadgeProps & {
-  icon?: IconComponent;
-};
+export type BadgeProps = ChakraBadgeProps & { icon?: IconComponent };
 
 export const Badge = function Badge({
   ref,
   icon,
   children,
   ...props
-}: BadgeProps & {
-  ref?: React.Ref<HTMLSpanElement>;
-}) {
+}: BadgeProps & { ref?: React.Ref<HTMLSpanElement> }) {
   return (
     <ChakraBadge ref={ref} {...props}>
       {children}

package/tsconfig.json

@@ -6,9 +6,7 @@
     "lib": ["dom", "es2023"],
     "rootDir": ".",
 
-    "paths": {
-      "@/*": ["./src/*"]
-    },
+    "paths": { "@/*": ["./src/*"] },
     "resolveJsonModule": true
   }
 }

package/vitest.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    globals: true, // Allows using 'describe', 'test', and 'expect' without importing them
+    environment: "jsdom",
+    setupFiles: "./setupTests.ts", // Global test helpers or mocks
+    typecheck: {
+      enabled: true,
+    },
+  },
+});