@vygruppen/spor-react 12.1.2 → 12.2.1

package/src/theme/utils/floating-utils.ts

@@ -8,26 +8,30 @@ type FloatingBackgroundState = Subset<
 
 export function floatingBackground(state: FloatingBackgroundState) {
   switch (state) {
-    case "focus":
+    case "focus": {
       return brandBackground("default");
-    case "active":
+    }
+    case "active": {
       return {
         backgroundColor: "floating.surface.active",
       };
-    case "hover":
+    }
+    case "hover": {
       return {
         backgroundColor: {
           _light: "floating.surface.hover",
           _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
         },
       };
-    case "default":
+    }
+    case "default": {
       return {
         backgroundColor: {
           _light: "bg",
           _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
         },
       };
+    }
   }
 }
 
@@ -37,25 +41,29 @@ type FloatingBorderState = Subset<
 >;
 export function floatingBorder(state: FloatingBorderState) {
   switch (state) {
-    case "hover":
+    case "hover": {
       return {
         outline: "1px solid",
         outlineColor: "floating.outline.hover",
       };
-    case "focus":
+    }
+    case "focus": {
       return {
         outline: "1px solid",
         outlineColor: "outline.focus",
       };
-    case "active":
+    }
+    case "active": {
       return {
         outline: "1px solid",
         outlineColor: "floating.outline.active",
       };
-    default:
+    }
+    default: {
       return {
         outline: "1px solid",
         outlineColor: "floating.outline",
       };
+    }
   }
 }

package/src/theme/utils/ghost-utils.ts

@@ -13,19 +13,21 @@ export function ghostBackground(state: GhostBackgroundState) {
         backgroundColor: "ghost.surface.hover",
       };
     }
-    case "active":
+    case "active": {
       return {
         backgroundColor: "ghost.surface.active",
       };
+    }
     case "selected": {
       return {
         backgroundColor: "ghost.surface.selected",
       };
     }
-    case "default":
+    case "default": {
       return {
         backgroundColor: "transparent",
       };
+    }
   }
 }
 
@@ -33,13 +35,15 @@ type GhostTextState = Subset<State, "default" | "selected">;
 
 export function ghostText(state: GhostTextState) {
   switch (state) {
-    case "selected":
+    case "selected": {
       return {
         color: "ghost.text",
       };
-    default:
+    }
+    default: {
       return {
         color: "ghost.text",
       };
+    }
   }
 }

package/src/theme/utils/input-utils.ts

@@ -5,7 +5,7 @@ import { InputState } from "./types";
 
 export function inputVariant(state: InputState) {
   switch (state) {
-    case "base":
+    case "base": {
       return {
         ...coreBackground("default"),
         ...coreBorder("default"),
@@ -21,7 +21,8 @@ export function inputVariant(state: InputState) {
           ...coreBorder("selected"),
         },
       };
-    case "floating":
+    }
+    case "floating": {
       return {
         boxShadow: "sm",
         ...floatingBackground("default"),
@@ -40,8 +41,9 @@ export function inputVariant(state: InputState) {
           borderColor: "floating.border.selected",
         },
       };
-    case "default":
-    default:
+    }
+
+    default: {
       return {
         ...coreBackground("default"),
         ...coreBorder("default"),
@@ -57,6 +59,7 @@ export function inputVariant(state: InputState) {
           ...coreBorder("selected"),
         },
       };
+    }
   }
 }
 

package/src/theme/utils/outline-utils.ts

@@ -3,17 +3,20 @@ import { State, Subset } from "./types";
 type OutlineBorderState = Subset<State, "default" | "error" | "focus">;
 export function outlineBorder(state: OutlineBorderState) {
   switch (state) {
-    case "error":
+    case "error": {
       return {
         outlineColor: "outline.error",
       };
-    case "focus":
+    }
+    case "focus": {
       return {
         outlineColor: "outline.focus",
       };
-    default:
+    }
+    default: {
       return {
         outlineColor: "outline",
       };
+    }
   }
 }

package/src/theme/utils/surface-utils.ts

@@ -1,21 +1,25 @@
 type Surface = "default" | "secondary" | "tertiary" | "disabled";
 export const surface = (surface: Surface) => {
   switch (surface) {
-    case "default":
+    case "default": {
       return {
         backgroundColor: "surface",
       };
-    case "secondary":
+    }
+    case "secondary": {
       return {
         backgroundColor: "surface.secondary",
       };
-    case "tertiary":
+    }
+    case "tertiary": {
       return {
         backgroundColor: "surface.tertiary",
       };
-    case "disabled":
+    }
+    case "disabled": {
       return {
         backgroundColor: "surface.disabled",
       };
+    }
   }
 };

package/src/toast/toast.tsx

@@ -13,7 +13,6 @@ import {
   InformationFill18Icon,
   SuccessFill18Icon,
 } from "@vygruppen/spor-icon-react";
-import React from "react";
 
 import { createTexts, useTranslation } from "@/i18n";
 

package/src/typography/Badge.tsx

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

package/src/typography/Heading.tsx

@@ -4,7 +4,7 @@ import {
   HeadingProps as ChakraHeadingProps,
   Text,
 } from "@chakra-ui/react";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 import { slugify } from "..";
 

package/src/typography/Text.tsx

@@ -3,7 +3,7 @@ import {
   Text as ChakraText,
   TextProps as ChakraTextProps,
 } from "@chakra-ui/react";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 export type TextProps = Omit<ChakraTextProps, "textStyle"> & {
   /** The size and style of the text.

package/src/util/slugify.tsx

@@ -20,17 +20,17 @@ export function slugify(text: string | string[], maxLength = 50): string {
   return (
     text
       .normalize("NFD") // Normalize to NFD Unicode form
-      .replace(/[\u0300-\u036f]/g, "") // Remove diacritics
-      .replace(/[\u00C6\u00E6]/g, "ae") // Replace Æ, æ
-      .replace(/[\u00D8\u00F8]/g, "oe") // Replace Ø, ø
-      .replace(/[\u00C5\u00E5]/g, "aa") // Replace Å, å
+      .replaceAll(/[\u0300-\u036F]/g, "") // Remove diacritics
+      .replaceAll(/[\u00C6\u00E6]/g, "ae") // Replace Æ, æ
+      .replaceAll(/[\u00D8\u00F8]/g, "oe") // Replace Ø, ø
+      .replaceAll(/[\u00C5\u00E5]/g, "aa") // Replace Å, å
       // Extend the replacement rules as needed
       .toLowerCase()
-      .replace(/\s+/g, "-") // Replace spaces with -
-      .replace(/[^\w-]+/g, "") // Remove all non-word chars
-      .replace(/--+/g, "-") // Replace multiple - with single -
+      .replaceAll(/\s+/g, "-") // Replace spaces with -
+      .replaceAll(/[^\w-]+/g, "") // Remove all non-word chars
+      .replaceAll(/--+/g, "-") // Replace multiple - with single -
       .replace(/^-+/, "") // Trim - from start of text
       .replace(/-+$/, "")
-      .substring(0, maxLength)
+      .slice(0, Math.max(0, maxLength))
   );
 }

package/tsconfig.json

@@ -3,6 +3,7 @@
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"],
   "compilerOptions": {
+    "lib": ["dom", "es2021"],
     "rootDir": ".",
     "paths": {
       "@/*": ["./src/*"]

package/src/theme/recipes/choice-chip.ts

@@ -1,144 +0,0 @@
-import { defineRecipe } from "@chakra-ui/react";
-
-export const choiceChipRecipe = defineRecipe({
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    boxAlign: "center",
-    fontSize: "xs",
-    cursor: "pointer",
-    transitionProperty: "all",
-    borderRadius: "xl",
-    transitionDuration: "fast",
-    height: 6,
-    paddingInlineStart: "2",
-    paddingInlineEnd: "2",
-
-    outline: "1px solid",
-    outlineColor: "base.outline",
-    _checked: {
-      backgroundColor: "brand.surface",
-      borderRadius: "sm",
-      outline: "none",
-      color: "brand.text",
-      _hover: {
-        backgroundColor: "brand.surface.hover",
-        _active: {
-          backgroundColor: "brand.surface.active",
-        },
-      },
-    },
-
-    _focusVisible: {
-      outline: "2px solid",
-      outlineColor: "outline.focus",
-      outlineOffset: "1px",
-    },
-
-    _disabled: {
-      pointerEvents: "none",
-      boxShadow: "none",
-      backgroundColor: "surface.disabled",
-      color: "text.disabled",
-      outline: "none",
-
-      _hover: {
-        backgroundColor: "core.surface.disabled",
-        boxShadow: "none",
-        color: "core.text.disabled",
-      },
-      _checked: {
-        cursor: "not-allowed",
-        boxShadow: "none",
-        color: "core.text.disabled",
-        backgroundColor: "core.surface.disabled",
-        _hover: {
-          backgroundColor: "core.surface.disabled",
-          boxShadow: "none",
-          color: "core.text.disabled",
-        },
-      },
-    },
-  },
-  variants: {
-    variant: {
-      core: {
-        color: "core.text",
-        outlineColor: "core.outline",
-
-        _hover: {
-          outline: "2px solid",
-          outlineColor: "core.outline.hover",
-
-          _active: {
-            outline: "1px solid",
-            outlineColor: "core.outline",
-            backgroundColor: "core.surface.active",
-          },
-        },
-      },
-      accent: {
-        backgroundColor: "accent.surface",
-        color: "accent.text",
-        outline: "none",
-
-        _hover: {
-          backgroundColor: "accent.surface.hover",
-
-          _active: {
-            backgroundColor: "accent.surface.active",
-          },
-        },
-      },
-      floating: {
-        backgroundColor: "floating.surface",
-        outline: "1px solid",
-        outlineColor: "floating.outline",
-        color: "floating.text",
-
-        boxShadow: "sm",
-        _hover: {
-          backgroundColor: "floating.surface.hover",
-          outline: "1px solid",
-          outlineColor: "floating.outline.hover",
-
-          _active: {
-            backgroundColor: "floating.surface.active",
-            outline: "1px solid",
-            outlineColor: "floating.outline",
-          },
-        },
-      },
-    },
-    size: {
-      xs: {
-        _checked: {
-          borderRadius: "0.563rem",
-        },
-        height: 5,
-        paddingX: 1.5,
-      },
-      sm: {
-        _checked: {
-          borderRadius: "sm",
-        },
-        height: 6,
-        paddingX: 2,
-      },
-      md: {
-        _checked: {
-          borderRadius: "sm",
-        },
-        height: 7,
-        paddingX: 2,
-      },
-      lg: {
-        _checked: {
-          borderRadius: "md",
-        },
-        height: 8,
-        paddingX: 3,
-      },
-    },
-  },
-});