@vygruppen/spor-react 12.1.2 → 12.2.0

package/src/progress-indicator/ProgressDot.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { chakra, useSlotRecipe } from "@chakra-ui/react";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { ProgressIndicatorVariantProps } from "./ProgressIndicator";
 

package/src/progress-indicator/ProgressIndicator.tsx

@@ -35,7 +35,7 @@ export type ProgressIndicatorProps = BoxProps &
 export const ProgressIndicator = forwardRef<
   HTMLDivElement,
   ProgressIndicatorProps
->(({ numberOfSteps, activeStep, colorPalette = "brand" }) => {
+>(({ numberOfSteps, activeStep }) => {
   const { t } = useTranslation();
   const recipe = useSlotRecipe({
     key: "progressIndicator",
@@ -56,7 +56,7 @@ export const ProgressIndicator = forwardRef<
         {Array.from({ length: numberOfSteps }, (_, i) => (
           <ProgressDot
             key={i}
-            aria-value={i + 1}
+            aria-valuenow={i + 1}
             isActive={activeStep === i + 1}
           />
         ))}
@@ -64,6 +64,8 @@ export const ProgressIndicator = forwardRef<
     </Box>
   );
 });
+ProgressIndicator.displayName = "ProgressIndicator";
+
 const texts = createTexts({
   stepsOf: (activeStep, numberOfSteps) => ({
     nb: `Steg ${activeStep} av ${numberOfSteps}`,

package/src/provider/SporProvider.tsx

@@ -5,7 +5,6 @@ import {
   SystemContext,
 } from "@chakra-ui/react";
 import { Global } from "@emotion/react";
-import React from "react";
 
 import { Language, LanguageProvider, system } from "..";
 import { ColorModeProvider } from "../color-mode";

package/src/stepper/Stepper.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Flex, RecipeVariantProps, useSlotRecipe } from "@chakra-ui/react";
 import { ArrowLeftFill24Icon } from "@vygruppen/spor-icon-react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 
 import { Box, createTexts, IconButton, Text, useTranslation } from "..";
 import { stepperSlotRecipe } from "../theme/slot-recipes/stepper";

package/src/tab/Tabs.tsx

@@ -4,7 +4,6 @@ import {
   Tabs as ChakraTabs,
   TabsRootProps as ChakraTabsRootProps,
 } from "@chakra-ui/react";
-import * as React from "react";
 import { forwardRef, PropsWithChildren } from "react";
 
 import { tabsSlotRecipe } from "../theme/slot-recipes/tabs";
@@ -63,6 +62,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
   const { variant = "core", size = "sm" } = props;
   return <ChakraTabs.Root {...props} ref={ref} variant={variant} size={size} />;
 });
+Tabs.displayName = "Tabs";
 
 export const TabsList = ChakraTabs.List;
 export const TabsTrigger = ChakraTabs.Trigger;

package/src/table/Table.tsx

@@ -6,7 +6,7 @@ import {
   TableRootProps as ChakraTableProps,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 
 import { tableSlotRecipe } from "../theme/slot-recipes/table";
 
@@ -52,6 +52,7 @@ export const Table = forwardRef<HTMLTableElement, TableProps>((props, ref) => {
     </Box>
   );
 });
+Table.displayName = "Table";
 
 function getStyleProps(props: TableProps) {
   return props.variant === "core"

package/src/theme/slot-recipes/alert-expandable.ts

@@ -1,9 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 
-import tokens from "@vygruppen/spor-design-tokens";
-
-import { alertSlotRecipe } from "./alert";
-
 import { alertExpandableAnatomy } from "./anatomy";
 
 export const alertExpandableSlotRecipe = defineSlotRecipe({

package/src/theme/slot-recipes/info-tag.ts

@@ -1,6 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 
-import { coreBorder } from "../utils/core-utils";
 import { infoTagAnatomy } from "./anatomy";
 import { travelTagSlotRecipe } from "./travel-tag";
 

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

@@ -1,6 +1,5 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 
-import { surface } from "./../utils/surface-utils";
 import { popoverAnatomy } from "./anatomy";
 
 export const popoverSlotRecipe = defineSlotRecipe({

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

@@ -1,9 +1,6 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 import tokens from "@vygruppen/spor-design-tokens";
 
-import { coreBackground, coreBorder, coreText } from "../utils/core-utils";
-import { floatingBackground, floatingBorder } from "../utils/floating-utils";
-import { outlineBorder } from "../utils/outline-utils";
 import { radioCardAnatomy } from "./anatomy";
 
 export const radioCardSlotRecipe = defineSlotRecipe({

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

@@ -8,20 +8,24 @@ type AccentBackgroundState = Subset<
 
 export function accentBackground(state: AccentBackgroundState) {
   switch (state) {
-    case "selected":
+    case "selected": {
       return brandBackground("default");
-    case "active":
+    }
+    case "active": {
       return {
         backgroundColor: "accent.surface.active",
       };
-    case "hover":
+    }
+    case "hover": {
       return {
         backgroundColor: "accent.surface.hover",
       };
-    default:
+    }
+    default: {
       return {
         backgroundColor: "accent.surface",
       };
+    }
   }
 }
 
@@ -29,13 +33,15 @@ type AccentTextState = Subset<State, "default" | "selected">;
 
 export function accentText(state: AccentTextState) {
   switch (state) {
-    case "selected":
+    case "selected": {
       return {
         color: "brand.text",
       };
-    default:
+    }
+    default: {
       return {
         color: "accent.text",
       };
+    }
   }
 }

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

@@ -1,17 +1,20 @@
 type Bg = "default" | "secondary" | "tertiary";
 export const bg = (bg: Bg) => {
   switch (bg) {
-    case "default":
+    case "default": {
       return {
         backgroundColor: "bg",
       };
-    case "secondary":
+    }
+    case "secondary": {
       return {
         backgroundColor: "bg.secondary",
       };
-    case "tertiary":
+    }
+    case "tertiary": {
       return {
         backgroundColor: "bg.tertiary",
       };
+    }
   }
 };

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

@@ -4,25 +4,25 @@ type BrandBackgroundState = Subset<State, "default" | "hover" | "active">;
 
 export function brandBackground(state: BrandBackgroundState) {
   switch (state) {
-    case "active":
+    case "active": {
       return {
         backgroundColor: "brand.surface.active",
       };
-    case "hover":
+    }
+    case "hover": {
       return {
         backgroundColor: "brand.surface.hover",
       };
-    case "default":
-    default:
+    }
+    default: {
       return {
         backgroundColor: "brand.surface",
       };
+    }
   }
 }
 
-type BrandTextState = Subset<State, "hover" | "active" | "default">;
-
-export function brandText(state: BrandTextState) {
+export function brandText() {
   return {
     color: "brand.text",
   };

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

@@ -8,16 +8,20 @@ type coreBackgroundState = Subset<
 >;
 export function coreBackground(state: coreBackgroundState) {
   switch (state) {
-    case "active":
+    case "active": {
       return brandBackground("active");
-    case "selected":
+    }
+    case "selected": {
       return brandBackground("default");
+    }
 
-    case "disabled":
+    case "disabled": {
       return surface("disabled");
-    case "hover":
-    default:
+    }
+
+    default: {
       return { backgroundColor: "transparent" };
+    }
   }
 }
 
@@ -28,11 +32,12 @@ type BorderState = Subset<
 
 export function coreBorder(state: BorderState) {
   switch (state) {
-    case "hover":
+    case "hover": {
       return {
         outline: "2px solid",
         outlineColor: "core.outline",
       };
+    }
 
     case "disabled": {
       return {
@@ -52,12 +57,12 @@ export function coreBorder(state: BorderState) {
         outlineColor: "outline.error",
       };
     }
-    case "default":
-    default:
+    default: {
       return {
         outline: "1px solid",
         outlineColor: "core.outline",
       };
+    }
   }
 }
 
@@ -67,25 +72,30 @@ type coreTextState = Subset<
 >;
 export function coreText(state: coreTextState) {
   switch (state) {
-    case "selected":
+    case "selected": {
       return {
         color: "brand.text",
       };
-    case "active":
+    }
+    case "active": {
       return {
         color: "brand.text",
       };
-    case "highlight":
+    }
+    case "highlight": {
       return {
         color: "text.highlight",
       };
-    case "disabled":
+    }
+    case "disabled": {
       return {
         color: "text.disabled",
       };
-    default:
+    }
+    default: {
       return {
         color: "core.text",
       };
+    }
   }
 }

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/*"]