@vygruppen/spor-react 12.10.0 → 12.10.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.10.0",
+  "version": "12.10.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -25,8 +25,8 @@
   "dependencies": {
     "@ark-ui/react": "^4.9.2",
     "@chakra-ui/anatomy": "^2.3.4",
-    "@chakra-ui/react": "^3.24.0",
     "@chakra-ui/cli": "^3.8.0",
+    "@chakra-ui/react": "^3.24.0",
     "@chakra-ui/react-use-size": "^2.1.0",
     "@chakra-ui/styled-system": "^2.12.0",
     "@chakra-ui/system": "^2.6.2",
@@ -58,6 +58,7 @@
     "@types/node": "^22.13.4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "clsx": "^2.1.1",
     "concurrently": "^9.1.2",
     "eslint": "^9.25.1",
     "react": "^18.3.1",
@@ -67,8 +68,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/tsconfig": "0.1.1",
-    "@vygruppen/eslint-config": "1.1.1"
+    "@vygruppen/eslint-config": "1.2.3",
+    "@vygruppen/tsconfig": "0.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/alert/ServiceAlert.tsx

@@ -128,10 +128,10 @@ export const ServiceAlert = forwardRef<HTMLDivElement, ServiceAlertProps>(
           </Accordion.ItemTrigger>
 
           <Accordion.ItemContent asChild>
-            <Stack flexDirection="row" justifyContent="center" width="100%">
+            <Stack flexDirection="row" width="100%">
               <Accordion.ItemBody
                 as={Stack}
-                maxWidth={contentWidth}
+                width={contentWidth}
                 css={styles.itemBody}
               >
                 {children}

package/src/datepicker/DateField.tsx

@@ -1,11 +1,13 @@
 "use client";
-import { Box, Flex, useSlotRecipe } from "@chakra-ui/react";
+import { Box, Field, Flex, useSlotRecipe } from "@chakra-ui/react";
 import { DateValue, GregorianCalendar } from "@internationalized/date";
 import { DOMAttributes, FocusableElement } from "@react-types/shared";
 import React, { forwardRef, PropsWithChildren, RefObject, useRef } from "react";
 import { AriaDateFieldProps, useDateField } from "react-aria";
 import { DateSegment, useDateFieldState } from "react-stately";
 
+import { Label } from "@/input/Label";
+
 import { createTexts, useTranslation } from "../i18n";
 import { DatePickerVariantProps } from "./DatePicker";
 import { DateTimeSegment } from "./DateTimeSegment";
@@ -61,7 +63,9 @@ export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
             position="absolute"
             paddingTop="2px"
           >
-            <label {...props.labelProps}>{props.label}</label>
+            <Label padding="0" fontSize="2xs" {...props.labelProps}>
+              {props.label} <Field.RequiredIndicator />
+            </Label>
           </Box>
         )}
         <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">

package/src/datepicker/TimeField.tsx

@@ -38,12 +38,8 @@ export const TimeField = ({ state, ...props }: TimeFieldProps) => {
         {props.label}
       </label>
       <Flex {...fieldProps} ref={ref} paddingTop="3" paddingBottom="0.5">
-        {state.segments.map((segment: DateSegment) => (
-          <DateTimeSegment
-            key={JSON.stringify(segment)}
-            segment={segment}
-            state={state}
-          />
+        {state.segments.map((segment: DateSegment, index) => (
+          <DateTimeSegment key={index} segment={segment} state={state} />
         ))}
       </Flex>
       <input

package/src/dialog/Drawer.tsx

@@ -14,6 +14,7 @@ import {
   CloseFill24Icon,
 } from "@vygruppen/spor-icon-react";
 import { forwardRef } from "react";
+import { useSwipeable } from "react-swipeable";
 
 import { Button, CloseButton } from "../button";
 import { createTexts, useTranslation } from "../i18n";
@@ -22,7 +23,6 @@ import {
   DrawerFullScreenHeaderProps,
   DrawerProps,
 } from "./types";
-import { useSwipeable } from "react-swipeable";
 
 /**
  * A drawer is a panel that slides in from the side of the screen. It is used to display additional content without taking up too much space.
@@ -98,7 +98,7 @@ export const CloseDrawerLine = forwardRef<HTMLButtonElement>((props, ref) => {
       top={0}
       marginY={2}
       marginX="auto"
-      backgroundColor="silver"
+      backgroundColor="floating.outline.active"
       borderRadius="xs"
       {...props}
       ref={ref}

package/src/input/ListBox.tsx

@@ -90,6 +90,7 @@ export const ListBox = (props: ListBoxProps<object>) => {
       css={styles.root}
       aria-busy={loading}
       maxWidth={maxWidth}
+      padding="1"
     >
       {state.collection.size === 0 && props.emptyContent}
       {[...state.collection].map((item) =>
@@ -181,7 +182,14 @@ function Option({ item, state }: OptionProps) {
   }, []);
   return (
     <OptionContext.Provider value={{ labelProps, descriptionProps }}>
-      <ListItem {...optionProps} {...dataFields} ref={ref} css={styles.item}>
+      <ListItem
+        {...optionProps}
+        {...dataFields}
+        ref={ref}
+        css={styles.item}
+        padding="1"
+        marginX="0"
+      >
         {item.rendered}
       </ListItem>
     </OptionContext.Provider>
@@ -217,14 +225,19 @@ function ListBoxSection({ section, state }: ListBoxSectionProps) {
 
   return (
     <List>
-      <ListItem {...itemProps} listStyleType={"none"}>
+      <ListItem
+        {...itemProps}
+        listStyleType={"none"}
+        marginLeft="0"
+        paddingX="1"
+      >
         {section.rendered && (
           <Box
             fontSize="mobile.xs"
             color={titleColor}
-            paddingX={3}
             paddingTop={1}
             marginTop={isFirstSection ? 0 : 2}
+            marginLeft="1"
             textTransform="uppercase"
             fontWeight="bold"
             {...headingProps}

package/src/input/PhoneNumberInput.tsx

@@ -80,46 +80,37 @@ export const PhoneNumberInput = forwardRef<
   };
 
   return (
-    <AttachedInputs
-      border={invalid ? "1px solid" : "none"}
-      borderColor={invalid ? "outline.error" : "none"}
-      outline={invalid ? "1px solid" : "none"}
-      outlineColor={invalid ? "outline.error" : "none"}
-      borderRadius={invalid ? "sm" : "none"}
-      display="grid"
-      gridTemplateColumns="1fr 10fr"
-    >
-      <>
-        <CountryCodeSelect
-          value={[value.countryCode]}
-          onValueChange={handleCountryCodeChange}
-          height="100%"
-          width="6.25rem"
-          variant={variant}
-          allowedCountryCodes={allowedCountryCodes}
-          data-state="on"
-        />
-        <Input
-          ref={ref}
-          type="tel"
-          {...props}
-          value={value.nationalNumber}
-          invalid={invalid}
-          errorText={errorText}
-          onChange={(e) => {
-            const target = e.target as HTMLInputElement;
-            // Removes everything but numbers, spaces and dashes
-            const strippedValue = target.value.replaceAll(/[^\d\s-]/g, "");
-            onChange({
-              countryCode: value.countryCode,
-              nationalNumber: strippedValue,
-            });
-          }}
-          variant={variant}
-          data-state="on"
-          label={label}
-        />
-      </>
+    <AttachedInputs display="grid" gridTemplateColumns="1fr 10fr">
+      <CountryCodeSelect
+        value={[value.countryCode]}
+        onValueChange={handleCountryCodeChange}
+        height="100%"
+        width="6.25rem"
+        variant={variant}
+        allowedCountryCodes={allowedCountryCodes}
+        data-state="on"
+        invalid={invalid}
+      />
+      <Input
+        ref={ref}
+        type="tel"
+        {...props}
+        value={value.nationalNumber}
+        invalid={invalid}
+        errorText={errorText}
+        onChange={(e) => {
+          const target = e.target as HTMLInputElement;
+          // Removes everything but numbers, spaces and dashes
+          const strippedValue = target.value.replaceAll(/[^\d\s-]/g, "");
+          onChange({
+            countryCode: value.countryCode,
+            nationalNumber: strippedValue,
+          });
+        }}
+        variant={variant}
+        data-state="on"
+        label={label}
+      />
     </AttachedInputs>
   );
 });

package/src/input/Switch.tsx

@@ -74,11 +74,11 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           checked={props.checked}
           css={styles.root}
         >
-          <ChakraSwitch.Label>{label}</ChakraSwitch.Label>
           <ChakraSwitch.HiddenInput ref={ref} />
           <ChakraSwitch.Control css={styles.control}>
             <ChakraSwitch.Thumb />
           </ChakraSwitch.Control>
+          <ChakraSwitch.Label>{label}</ChakraSwitch.Label>
         </ChakraSwitch.Root>
       </Field>
     );

package/src/linjetag/LineIcon.tsx

@@ -5,6 +5,7 @@ import {
   RecipeVariantProps,
   useSlotRecipe,
 } from "@chakra-ui/react";
+import clsx from "clsx";
 import React, { forwardRef, PropsWithChildren } from "react";
 
 import { lineIconSlotRecipe } from "../theme/slot-recipes/line-icon";
@@ -90,10 +91,10 @@ export const LineIcon = forwardRef<HTMLDivElement, LineIconProps>(
 
     const Icon: React.ElementType = getCorrectIcon({
       variant:
+        // eslint-disable-next-line no-nested-ternary
         variant === "custom" && "customIconVariant" in rest
           ? rest.customIconVariant
-          : // eslint-disable-next-line unicorn/no-nested-ternary
-            variant === "custom" //eslint rules and prettier conflict
+          : variant === "custom"
             ? "local-train"
             : variant,
       size,
@@ -116,6 +117,7 @@ export const LineIcon = forwardRef<HTMLDivElement, LineIconProps>(
         borderColor={variant === "walk" ? "core.outline" : "transparent"}
         aria-label={label}
         ref={ref}
+        className={clsx("light", rest.className)}
       >
         <Icon css={styles.icon} />
       </Box>

package/src/linjetag/TravelTag.tsx

@@ -13,6 +13,7 @@ import {
   WarningFill18Icon,
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
+import clsx from "clsx";
 import { forwardRef, PropsWithChildren } from "react";
 
 import { travelTagSlotRecipe } from "../theme/slot-recipes/travel-tag";
@@ -122,8 +123,8 @@ export const TravelTag = forwardRef<HTMLDivElement, TravelTagProps>(
         css={styles.container}
         aria-disabled={disabled}
         ref={ref}
+        className={clsx("light", rest.className)}
         {...rest}
-        backgroundColor={disabled ? "surface.disabled" : backgroundColor}
       >
         <LineIcon
           variant={variant}

package/src/loader/DarkFullScreenLoader.tsx

@@ -15,7 +15,8 @@ export const DarkFullScreenLoader = ({
   return (
     <Center
       height="100%"
-      background="darkTeal"
+      background="bg"
+      className="dark"
       role="status"
       aria-live="polite"
       {...props}

package/src/loader/LightFullScreenLoader.tsx

@@ -13,13 +13,7 @@ export const LightFullScreenLoader = ({
   ...props
 }: LightFullScreenLoaderProps) => {
   return (
-    <Center
-      height="100%"
-      background="white"
-      role="status"
-      aria-live="polite"
-      {...props}
-    >
+    <Center height="100%" role="status" aria-live="polite" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
           <Lottie animationData={fullScreenLoaderBlackData} />

package/src/loader/LightInlineLoader.tsx

@@ -15,13 +15,7 @@ export const LightInlineLoader = ({
   ...props
 }: LightInlineLoaderProps) => {
   return (
-    <Center
-      height="100%"
-      background="white"
-      role="status"
-      aria-live="polite"
-      {...props}
-    >
+    <Center height="100%" role="status" aria-live="polite" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
           <Lottie animationData={inlineLoaderLightData} />

package/src/theme/recipes/badge.ts

@@ -56,7 +56,7 @@ export const badgeRecipie = defineRecipe({
         backgroundColor: "surface.color.orange",
         color: "alert.error.text.secondary",
         "& svg": {
-          color: "alert.error.icon.secondary",
+          color: "alert.error-secondary.icon",
         },
       },
       red: {

package/src/theme/recipes/close-button.ts

@@ -6,12 +6,12 @@ export const closeButtonRecipe = defineRecipe({
     transitionDuration: "normal",
     borderRadius: "md",
     backgroundColor: "transparent",
-    color: "darkGrey",
+    color: "text",
     fontWeight: "normal",
     _hover: {
       background: "ghost.surface.hover",
       _disabled: {
-        color: "dimGrey",
+        color: "icon.disabled",
       },
       _active: {
         background: "ghost.surface.active",

package/src/theme/recipes/link.ts

@@ -34,17 +34,17 @@ export const linkRecipe = defineRecipe({
       primary: {
         color: "core.text",
         _hover: {
-          color: "text.default",
+          color: "text",
           _active: {
             color: "text.disabled",
           },
         },
       },
       secondary: {
-        color: "text.hightlight",
+        color: "text.highlight",
         padding: "2px",
         _hover: {
-          color: "text.hightlight",
+          color: "text.highlight",
           _active: {
             color: "text.disabled",
           },

package/src/theme/recipes/pressable-card.ts

@@ -50,7 +50,6 @@ export const pressableCardRecipe = defineRecipe({
         outlineColor: "core.outline",
         outlineWidth: tokens.size.stroke.sm,
         outlineStyle: "solid",
-        backgroundColor: "core.surface",
 
         _hover: {
           outlineColor: "core.outline.hover",

package/src/theme/recipes/skeleton.ts

@@ -50,7 +50,7 @@ export const skeletonRecipe = defineRecipe({
       },
       none: {
         animation: "none",
-        background: "steel",
+        background: "surface.color.grey",
       },
     },
   },

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

@@ -35,7 +35,7 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
       },
 
       _icon: {
-        color: "darkGrey",
+        color: "text",
       },
     },
     itemTriggerTitle: {
@@ -47,13 +47,13 @@ export const alertServiceSlotRecipe = defineSlotRecipe({
       textWrap: "nowrap",
     },
     itemBody: {
-      paddingInline: 2,
+      marginX: "auto",
+      padding: "0 !important",
       paddingBottom: ["0.5", null, null, "1"],
       color: "text.inverted",
       "& > p": {
         gap: 2,
         width: "full",
-        justifyContent: "center",
         borderBottom: "1px dashed",
         borderColor: "outline.inverted",
         paddingBottom: "3",

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

@@ -25,7 +25,6 @@ export const checkboxSlotRecipe = defineSlotRecipe({
     indicator: {
       width: "100%",
       height: "100%",
-      borderColor: "white",
       marginTop: -1,
       transform: "scale(1)",
       opacity: 0,
@@ -59,8 +58,8 @@ export const checkboxSlotRecipe = defineSlotRecipe({
         },
 
         _invalid: {
-          backgroundColor: "brightRed",
-          borderColor: "brightRed",
+          backgroundColor: "outline.error",
+          borderColor: "outline.error",
         },
       },
       _disabled: {

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

@@ -19,7 +19,7 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
       paddingInlineEnd: "2",
 
       outline: "1px solid",
-      outlineColor: "base.outline",
+      outlineColor: "core.outline",
       _checked: {
         backgroundColor: "brand.surface",
         borderRadius: "sm",
@@ -47,19 +47,19 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
         outline: "none",
 
         _hover: {
-          backgroundColor: "core.surface.disabled",
+          backgroundColor: "surface.disabled",
           boxShadow: "none",
-          color: "core.text.disabled",
+          color: "text.disabled",
         },
         _checked: {
           cursor: "not-allowed",
           boxShadow: "none",
-          color: "core.text.disabled",
-          backgroundColor: "core.surface.disabled",
+          color: "text.disabled",
+          backgroundColor: "surface.disabled",
           _hover: {
-            backgroundColor: "core.surface.disabled",
+            backgroundColor: "surface.disabled",
             boxShadow: "none",
-            color: "core.text.disabled",
+            color: "text.disabled",
           },
         },
       },

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

@@ -37,7 +37,7 @@ export const datePickerSlotRecipe = defineSlotRecipe({
     dateTimeSegment: {
       _focus: {
         backgroundColor: "ghost.surface.active",
-        color: "text.default",
+        color: "text",
       },
     },
     box: {
@@ -147,7 +147,6 @@ export const datePickerSlotRecipe = defineSlotRecipe({
         wrapper: {
           outline: "1px solid",
           outlineColor: "core.outline",
-          backgroundColor: "core.surface",
 
           _hover: {
             outline: "2px solid",

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

@@ -7,6 +7,7 @@ export const dialogSlotRecipe = defineSlotRecipe({
   className: "spor-dialog",
   base: {
     backdrop: {
+      // eslint-disable-next-line spor/use-semantic-tokens
       background: "blackAlpha.500",
       position: "fixed",
       left: 0,

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

@@ -7,6 +7,7 @@ export const drawerSlotRecipe = defineSlotRecipe({
   className: "spor-drawer",
   base: {
     backdrop: {
+      // eslint-disable-next-line spor/use-semantic-tokens
       bg: "blackAlpha.500",
       position: "fixed",
       insetInlineStart: 0,

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

@@ -14,6 +14,7 @@ export const fieldSlotRecipe = defineSlotRecipe({
     },
     requiredIndicator: {
       marginStart: 1,
+      // eslint-disable-next-line spor/use-semantic-tokens
       color: "brightRed",
     },
     label: {
@@ -27,8 +28,8 @@ export const fieldSlotRecipe = defineSlotRecipe({
     },
     errorText: {
       borderRadius: "xs",
-      backgroundColor: "lightRed",
-      color: "darkGrey",
+      backgroundColor: "alert.error.surface",
+      color: "text",
       paddingX: 1.5,
       paddingY: 1,
       textStyle: "xs",
@@ -45,7 +46,7 @@ export const fieldSlotRecipe = defineSlotRecipe({
         left: "1em",
         width: "0.5rem",
         height: "0.5rem",
-        backgroundColor: "lightRed",
+        backgroundColor: "alert.error.surface",
         transform: "translateY(-50%) rotate(45deg)",
         pointerEvents: "none",
       },

package/src/theme/slot-recipes/floating-action-button.ts

@@ -76,7 +76,7 @@ export const floatingActionButtonSlotRecipe = defineSlotRecipe({
           _hover: {
             backgroundColor: "transparent",
             outline: "2px solid",
-            outlineColor: "core.outline.light",
+            outlineColor: "core.outline",
             _active: {
               outline: "1px solid",
               outlineColor: "core.outline",

package/src/theme/slot-recipes/line-icon.ts

@@ -10,21 +10,12 @@ export const lineIconSlotRecipe = defineSlotRecipe({
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
-      "[aria-disabled=true] &": {
-        backgroundColor: "surface.disabled",
-      },
     },
     icon: {
-      color: "white",
-      "[aria-disabled=true] &": {
-        color: "icon.disabled",
-      },
+      color: "bg",
     },
     title: {
-      color: "darkGrey",
-      "[aria-disabled=true] &": {
-        color: "text.disabled",
-      },
+      color: "text",
     },
   },
   variants: {
@@ -83,38 +74,14 @@ export const lineIconSlotRecipe = defineSlotRecipe({
         iconContainer: {
           backgroundColor: "linjetag.altTransport",
         },
-        icon: {
-          color: "darkGrey",
-          "[aria-disabled=true] &": {
-            color: "white",
-          },
-        },
       },
       walk: {
         title: {
           color: "text",
         },
-        icon: {
-          color: "linjetag.walkLight",
-          "[aria-disabled=true] &": {
-            color: "icon.disabled",
-          },
-        },
-        _disabled: {
-          icon: {
-            color: "text.disabled",
-          },
-          title: {
-            color: "text.disabled",
-          },
-        },
       },
       custom: {
-        iconContainer: {
-          _disabled: {
-            backgroundColor: "surface.disabled",
-          },
-        },
+        iconContainer: {},
       },
     },
     size: {

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

@@ -45,7 +45,6 @@ export const radioCardSlotRecipe = defineSlotRecipe({
           outlineColor: "core.outline",
           outlineWidth: tokens.size.stroke.sm,
           outlineStyle: "solid",
-          backgroundColor: "core.surface",
 
           _hover: {
             outlineColor: "core.outline.hover",