@vygruppen/spor-react 12.10.1 → 12.10.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.10.1",
+  "version": "12.10.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -68,7 +68,7 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/eslint-config": "1.2.1",
+    "@vygruppen/eslint-config": "1.2.3",
     "@vygruppen/tsconfig": "0.1.1"
   },
   "peerDependencies": {

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/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/theme/slot-recipes/alert-service.ts

@@ -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/select.ts

@@ -201,29 +201,20 @@ export const selectSlotRecipe = defineSlotRecipe({
       },
       floating: {
         control: {
-          backgroundColor: {
-            _light: "bg",
-            _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
-          },
           outline: "1px solid",
           outlineColor: "floating.outline",
           _hover: {
-            outline: "1px solid",
-            outlineColor: "floating.outline.hover",
-            backgroundColor: {
-              _light: "floating.surface.hover",
-              _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`,
-            },
+            outline: "2px solid",
+            outlineColor: "floating.outline",
           },
           _active: {
-            outline: "1px solid",
-            outlineColor: "floating.outline.active",
-            backgroundColor: "floating.surface.active",
+            backgroundColor: "brand.surface.active",
+          },
+          _disabled: {
+            pointerEvents: "none",
+            color: "text.disabled",
+            backgroundColor: "surface.disabled",
           },
-        },
-        selectContent: {
-          outline: "1px solid",
-          outlineColor: "floating.outline",
         },
       },
     },

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

@@ -9,7 +9,7 @@ export const switchSlotRecipe = defineSlotRecipe({
   base: {
     root: {
       display: "inline-flex",
-      gap: "2.5",
+      gap: "2",
       alignItems: "center",
       position: "relative",
       verticalAlign: "middle",