@vygruppen/spor-react 13.3.1 → 13.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.3.1",
+  "version": "13.4.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,23 +46,29 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "5.0.3",
+    "@vygruppen/spor-design-tokens": "5.0.4",
     "@vygruppen/spor-icon-react": "5.0.0",
     "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",
     "@react-types/shared": "^3.27.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.13.4",
     "@types/react": "19.2.3",
     "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
     "clsx": "^2.1.1",
     "concurrently": "^9.1.2",
     "eslint": "^9.39.1",
+    "jsdom": "^29.1.1",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "tsup": "^7.2.0",
     "typescript": "^5.7.3",
+    "vitest": "^4.1.8",
     "@vygruppen/eslint-config": "2.2.0",
     "@vygruppen/tsconfig": "0.1.1"
   },
@@ -77,6 +83,7 @@
     "typegen": "npx @chakra-ui/cli typegen src/theme/index.ts",
     "typegen:watch": "npx @chakra-ui/cli typegen src/theme/index.ts --watch",
     "typegen:strict": "npx @chakra-ui/cli typegen /src/theme/index.ts --strict",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "vitest run"
   }
 }

package/setupTests.ts

@@ -0,0 +1,84 @@
+import "@testing-library/jest-dom";
+
+// jsdom doesn't implement window.matchMedia, which is required by next-themes.
+Object.defineProperty(globalThis, "matchMedia", {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }),
+});
+
+// jsdom doesn't implement HTMLCanvasElement.getContext(), which causes lottie-web to crash.
+// Return a no-op mock context so canvas-based animations are silently skipped in tests.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(HTMLCanvasElement.prototype as any).getContext = () =>
+  ({
+    fillStyle: "",
+    strokeStyle: "",
+    lineWidth: 0,
+    lineCap: "",
+    lineJoin: "",
+    globalAlpha: 1,
+    globalCompositeOperation: "",
+    shadowBlur: 0,
+    shadowColor: "",
+    shadowOffsetX: 0,
+    shadowOffsetY: 0,
+    font: "",
+    textAlign: "",
+    textBaseline: "",
+    canvas: document.createElement("canvas"),
+    save: () => {},
+    restore: () => {},
+    scale: () => {},
+    rotate: () => {},
+    translate: () => {},
+    transform: () => {},
+    setTransform: () => {},
+    resetTransform: () => {},
+    clearRect: () => {},
+    fillRect: () => {},
+    strokeRect: () => {},
+    beginPath: () => {},
+    closePath: () => {},
+    moveTo: () => {},
+    lineTo: () => {},
+    bezierCurveTo: () => {},
+    quadraticCurveTo: () => {},
+    arc: () => {},
+    arcTo: () => {},
+    ellipse: () => {},
+    rect: () => {},
+    fill: () => {},
+    stroke: () => {},
+    clip: () => {},
+    drawImage: () => {},
+    createLinearGradient: () => ({ addColorStop: () => {} }),
+    createRadialGradient: () => ({ addColorStop: () => {} }),
+    createPattern: () => null,
+    measureText: () => ({ width: 0 }),
+    fillText: () => {},
+    strokeText: () => {},
+    getImageData: () => ({
+      data: new Uint8ClampedArray(0),
+      width: 0,
+      height: 0,
+    }),
+    putImageData: () => {},
+    createImageData: () => ({
+      data: new Uint8ClampedArray(0),
+      width: 0,
+      height: 0,
+    }),
+    setLineDash: () => {},
+    getLineDash: () => [],
+    isPointInPath: () => false,
+    isPointInStroke: () => false,
+  }) as unknown as CanvasRenderingContext2D;

package/src/accordion/types.ts

@@ -1,5 +1,6 @@
 import {
   Accordion as ChakraAccordion,
+  AccordionItemProps,
   AccordionRootProps as ChakraAccordionProps,
   RecipeVariantProps,
 } from "@chakra-ui/react";
@@ -59,9 +60,10 @@ export type ExpandableProps = Omit<
     title: ReactNode;
   };
 
-export type ExpandableItemProps = HeadingLevel & {
-  value: string;
-  title: ReactNode;
-  children?: React.ReactNode;
-  startElement?: React.ReactNode;
-};
+export type ExpandableItemProps = HeadingLevel &
+  Omit<AccordionItemProps, "title"> & {
+    value: string;
+    title: ReactNode;
+    children?: React.ReactNode;
+    startElement?: React.ReactNode;
+  };

package/src/input/Combobox.tsx

@@ -207,6 +207,7 @@ export const Combobox = (props: ComboboxProps<object>) => {
         }
         placeholder=""
         data-attachable
+        size="md"
       />
       <span aria-hidden="true" data-trigger="multiselect"></span>
       {state.isOpen && !loading && (

package/src/input/CountryCodeSelect.tsx

@@ -64,6 +64,7 @@ export const CountryCodeSelect = ({
       lazyMount
       aria-label={t(texts.countryCode)}
       sideRadiusVariant="rightSideSquare"
+      size={props.size}
       role="combobox"
     >
       {filteredCallingCodes.items.map((code) => (

package/src/input/Field.tsx

@@ -4,12 +4,11 @@ import {
   Field as ChakraField,
   RecipeVariantProps,
   Stack,
+  Text as ChakraText,
   useSlotRecipe,
 } from "@chakra-ui/react";
 import * as React from "react";
 
-import { Text } from "@/typography";
-
 import { fieldSlotRecipe } from "../theme/slot-recipes/field";
 import { FloatingLabel } from "./FloatingLabel";
 import { Label } from "./Label";
@@ -55,6 +54,7 @@ export type FieldBaseProps = {
   shouldFloat?: boolean;
   labelAsChild?: boolean;
   gap?: string | number;
+  size?: "sm" | "md";
 };
 
 export type FieldProps = Omit<
@@ -102,10 +102,11 @@ export const Field = ({
     shouldFloat,
     labelAsChild,
     gap,
+    size = "md",
     ...rest
   } = props;
   const recipe = useSlotRecipe({ key: "field" });
-  const styles = recipe();
+  const styles = recipe({ size });
 
   return (
     <Stack ref={ref} width="100%" {...rest}>
@@ -120,7 +121,7 @@ export const Field = ({
         gap={gap}
       >
         {label && !floatingLabel && (
-          <Label asChild={labelAsChild} aria-hidden>
+          <Label asChild={labelAsChild} aria-hidden css={styles.label}>
             {renderLabelWithIndicator(label, labelAsChild)}
           </Label>
         )}
@@ -132,6 +133,7 @@ export const Field = ({
             data-float={shouldFloat ? true : undefined}
             asChild={labelAsChild}
             aria-hidden
+            css={styles.label}
           >
             {renderLabelWithIndicator(label, labelAsChild)}
           </FloatingLabel>
@@ -143,9 +145,9 @@ export const Field = ({
         )}
       </ChakraField.Root>
       {helperText && (
-        <Text variant="sm" color="text.subtle">
+        <ChakraText data-part="helperText" css={styles.helperText}>
           {helperText}
-        </Text>
+        </ChakraText>
       )}
     </Stack>
   );

package/src/input/FloatingLabel.tsx

@@ -2,30 +2,19 @@ import { defineStyle, Field, FieldLabelProps } from "@chakra-ui/react";
 
 export const FloatingLabel = ({
   ref,
+  css,
   ...props
 }: FieldLabelProps & {
   ref?: React.Ref<HTMLLabelElement | null>;
-}) => <Field.Label ref={ref} {...props} css={floatingLabelStyles} />;
+}) => <Field.Label ref={ref} {...props} css={[floatingLabelStyles, css]} />;
 
 const floatingLabelStyles = defineStyle({
-  paddingX: 3,
   fontWeight: "normal",
   pointerEvents: "none",
   zIndex: "docked",
   _disabled: {
     opacity: 0.4,
   },
-
   pos: "absolute",
   transition: "top 160ms ease, font-size 160ms ease",
-
-  top: "0.9rem",
-  color: "text",
-  fontSize: ["mobile.sm", "desktop.sm"],
-
-  "&[data-float]": {
-    fontSize: ["mobile.2xs", "desktop.2xs"],
-    color: "text",
-    top: "0.3rem",
-  },
 });

package/src/input/Input.tsx

@@ -21,17 +21,17 @@ import { Field, FieldProps } from "./Field";
 import { useFloatingInputState } from "./useFLoatingInputState";
 
 export type InputProps = FieldProps &
-  Exclude<
-    ChakraInputProps,
-    "size" | "label" | "colorPalette" | "placeholder"
-  > & {
+  Exclude<ChakraInputProps, "label" | "colorPalette" | "placeholder"> & {
     /** The input's label */
     label?: ReactNode;
     /** Element that shows up to the left */
     startElement?: React.ReactNode;
     /** Element that shows up to the right */
     endElement?: React.ReactNode;
+    /** Override the font size of the start and end elements */
     fontSize?: string;
+
+    //size?: "sm" | "md";
   };
 /**
  * Inputs let you enter text or other data.
@@ -75,12 +75,13 @@ export const Input = ({
   hidden,
   fontSize,
   labelAsChild,
+  size = "md",
   ...props
 }: InputProps & {
   ref?: React.Ref<HTMLInputElement | null>;
 }) => {
   const recipe = useRecipe({ key: "input" });
-  const [recipeProps, restProps] = recipe.splitVariantProps(props);
+  const [recipeProps, restProps] = recipe.splitVariantProps({ size, ...props });
   const styles = recipe(recipeProps);
 
   const labelId = useId();
@@ -98,6 +99,19 @@ export const Input = ({
       inputRef: inputRef as React.RefObject<HTMLInputElement>,
     });
 
+  const fontSizeBySize: Record<string, string> = {
+    sm: "xs",
+    md: "mobile.md",
+  };
+
+  const elementPaddingBySize: Record<string, string> = {
+    sm: "2.3rem",
+    md: "2.6rem",
+  };
+  const elementPadding = elementPaddingBySize[size as string] ?? "2.6rem";
+  const paddingLeft = elementPadding;
+  const paddingRight = elementPadding;
+
   return (
     <Field
       invalid={invalid}
@@ -108,21 +122,24 @@ export const Input = ({
       id={props.id}
       labelAsChild={labelAsChild}
       label={
-        <Flex id={labelId}>
+        <Flex
+          id={labelId}
+          paddingX={startElement && size === "sm" ? 1 : undefined}
+        >
           <Box visibility="hidden">{startElement}</Box>
           {label}
         </Flex>
       }
       floatingLabel={true}
       shouldFloat={shouldFloat}
+      size={size}
     >
       {startElement && (
         <InputElement
-          pointerEvents="none"
-          paddingX={2}
           aria-hidden="true"
-          fontSize={fontSize ?? "mobile.md"}
           aria-labelledby={labelId}
+          paddingX={2}
+          fontSize={fontSize ?? fontSizeBySize[size as string]}
         >
           {startElement}
         </InputElement>
@@ -132,23 +149,23 @@ export const Input = ({
         ref={inputRef}
         focusVisibleRing="outside"
         overflow="hidden"
-        paddingLeft={startElement ? "2.6rem" : undefined}
-        paddingRight={endElement ? "2.6rem" : undefined}
         {...restProps}
+        css={styles}
+        paddingLeft={startElement ? paddingLeft : undefined}
+        paddingRight={endElement ? paddingRight : undefined}
         className={`peer ${props.className || ""}`}
         value={isControlled ? props.value : undefined}
         onFocus={handleFocus}
         onBlur={handleBlur}
         onChange={handleChange}
         placeholder=""
-        css={styles}
-        fontSize={fontSize ?? "mobile.md"}
+        fontSize={fontSize}
       />
       {endElement && (
         <InputElement
-          placement="end"
           paddingX={2}
-          fontSize={fontSize ?? "mobile.md"}
+          placement="end"
+          fontSize={fontSize ?? fontSizeBySize[size as string]}
         >
           {endElement}
         </InputElement>

package/src/input/Label.tsx

@@ -1,14 +1,13 @@
 import { defineStyle, Field, FieldLabelProps } from "@chakra-ui/react";
 
-export const Label = (props: FieldLabelProps) => (
-  <Field.Label {...props} css={labelStyles} />
+export const Label = ({ css, ...props }: FieldLabelProps) => (
+  <Field.Label {...props} css={[labelStyles, css]} />
 );
 
 const labelStyles = defineStyle({
   fontWeight: "normal",
   paddingBottom: 1,
   paddingX: 1,
-  fontSize: ["mobile.xs", "desktop.xs"],
   color: "text",
   pointerEvents: "none",
   zIndex: "docked",

package/src/input/PasswordInput.tsx

@@ -55,6 +55,7 @@ export const PasswordInput = ({
     onVisibleChange,
     label,
     startElement,
+    size = "md",
     ...rest
   } = props;
 
@@ -82,10 +83,12 @@ export const PasswordInput = ({
             event.preventDefault();
             setVisible(!visible);
           }}
+          size={size}
         >
           {visible ? t(texts.hidePassword) : t(texts.showPassword)}
         </VisibilityTrigger>
       }
+      size={size}
       {...rest}
     />
   );
@@ -102,7 +105,6 @@ const VisibilityTrigger = ({
       ref={ref}
       type="button"
       fontWeight="normal"
-      size="sm"
       borderRadius="sm"
       marginRight={1}
       {...props}

package/src/input/PhoneNumberInput.tsx

@@ -56,6 +56,7 @@ export const PhoneNumberInput = ({
     allowedCountryCodes,
     invalid,
     errorText,
+    size = "md",
   } = props;
 
   const { t } = useTranslation();
@@ -91,11 +92,12 @@ export const PhoneNumberInput = ({
         variant={variant}
         allowedCountryCodes={allowedCountryCodes}
         data-state="on"
-        invalid={invalid}
+        size={size}
       />
       <Input
         ref={ref}
         type="tel"
+        size={size}
         {...props}
         value={value.nationalNumber}
         invalid={invalid}

package/src/input/SearchInput.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import {
+  CloseOutline18Icon,
   CloseOutline24Icon,
+  SearchOutline18Icon,
   SearchOutline24Icon,
 } from "@vygruppen/spor-icon-react";
 
@@ -25,7 +27,7 @@ export const SearchInput = ({
   ref?: React.Ref<HTMLInputElement>;
 }) => {
   const { t } = useTranslation();
-  const { variant = "core", onReset, label, value } = props;
+  const { variant = "core", onReset, label, value, size = "md" } = props;
   const clearButton = onReset && value;
 
   return (
@@ -33,8 +35,15 @@ export const SearchInput = ({
       ref={ref}
       type="search"
       variant={variant}
+      size={size}
       {...props}
-      startElement={<SearchOutline24Icon color="icon" />}
+      startElement={
+        size == "md" ? (
+          <SearchOutline24Icon color="icon" />
+        ) : (
+          <SearchOutline18Icon color="icon" />
+        )
+      }
       endElement={
         clearButton && (
           <IconButton
@@ -42,7 +51,9 @@ export const SearchInput = ({
             type="button"
             size="sm"
             aria-label={t(texts.reset)}
-            icon={<CloseOutline24Icon />}
+            icon={
+              size == "md" ? <CloseOutline24Icon /> : <CloseOutline18Icon />
+            }
             onClick={onReset}
           />
         )

package/src/input/Select.tsx

@@ -3,7 +3,7 @@
 import type {
   CollectionItem,
   SelectLabelProps,
-  SelectRootProps as ChakraSelectRootProps,
+  SelectRootProps,
   SystemStyleObject,
 } from "@chakra-ui/react";
 import {
@@ -13,10 +13,10 @@ import {
   Portal,
   Select as ChakraSelect,
   useSelectContext,
-  useSlotRecipe,
 } from "@chakra-ui/react";
 import {
   CheckmarkFill18Icon,
+  DropdownDownFill18Icon,
   DropdownDownFill24Icon,
 } from "@vygruppen/spor-icon-react";
 import * as React from "react";
@@ -26,7 +26,7 @@ import { CloseButton } from "@/button";
 import { Badge } from "..";
 import { Field, FieldProps } from "./Field";
 
-export type SelectProps = ChakraSelectRootProps &
+export type SelectProps = SelectRootProps &
   FieldProps & {
     label?: string;
   };
@@ -68,6 +68,7 @@ export const Select = ({
 }) => {
   const {
     variant = "core",
+    size = "md",
     children,
     positioning,
     label,
@@ -77,8 +78,6 @@ export const Select = ({
     css,
     ...rest
   } = props;
-  const recipe = useSlotRecipe({ key: "select" });
-  const styles = recipe({ variant });
 
   return (
     <Field
@@ -94,16 +93,14 @@ export const Select = ({
         ref={ref}
         positioning={{ sameWidth: true, ...positioning }}
         variant={variant}
-        css={styles.root}
+        size={size}
         position="relative"
       >
-        <SelectTrigger data-attachable>
+        <SelectTrigger data-attachable size={size}>
           <SelectValueText withPlaceholder={!!label} />
         </SelectTrigger>
-        {label && <SelectLabel css={styles.label}>{label}</SelectLabel>}
-        <SelectContent css={styles.selectContent} baseStyle={css}>
-          {children}
-        </SelectContent>
+        {label && <SelectLabel>{label}</SelectLabel>}
+        <SelectContent baseStyle={css}>{children}</SelectContent>
       </ChakraSelect.Root>
     </Field>
   );
@@ -132,14 +129,12 @@ export const SelectItem = ({
   ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { item, children, description, ...rest } = props;
-  const recipe = useSlotRecipe({ key: "select" });
-  const styles = recipe();
   const selectContext = useSelectContext();
   const multiple = selectContext.multiple;
   const isSelected = selectContext.value.includes(item.value);
 
   return (
-    <ChakraSelect.Item item={item} {...rest} ref={ref} css={styles.item}>
+    <ChakraSelect.Item item={item} {...rest} ref={ref}>
       {multiple && (
         <ChakraCheckbox.Root checked={isSelected} pointerEvents="none">
           <ChakraCheckbox.Control>
@@ -149,11 +144,7 @@ export const SelectItem = ({
       )}
       <Box width="100%">
         <ChakraSelect.ItemText display="flex">{children}</ChakraSelect.ItemText>
-        {description && (
-          <Box data-part="item-description" css={styles.itemDescription}>
-            {description}
-          </Box>
-        )}
+        {description && <Box data-part="item-description">{description}</Box>}
       </Box>
 
       {!multiple && (
@@ -189,29 +180,28 @@ export const SelectItemGroup = function SelectItemGroup({
 type SelectTriggerProps = ChakraSelect.ControlProps & {
   clearable?: boolean;
   children?: React.ReactNode;
+  size: "sm" | "md";
 };
 
 export const SelectTrigger = function SelectTrigger({
   ref,
+  size = "md",
   ...props
 }: SelectTriggerProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }) {
   const { children, clearable, ...rest } = props;
-  const recipe = useSlotRecipe({ key: "select" });
-  const styles = recipe();
   return (
-    <ChakraSelect.Control {...rest} css={styles.control}>
-      <ChakraSelect.Trigger ref={ref} css={styles.trigger}>
-        {children}
-      </ChakraSelect.Trigger>
-      <ChakraSelect.IndicatorGroup
-        css={styles.indicatorGroup}
-        data-part="indicator-group"
-      >
+    <ChakraSelect.Control {...rest}>
+      <ChakraSelect.Trigger ref={ref}>{children}</ChakraSelect.Trigger>
+      <ChakraSelect.IndicatorGroup data-part="indicator-group">
         {clearable && <SelectClearTrigger />}
-        <Box css={styles.indicator} data-part="indicator">
-          <DropdownDownFill24Icon />
+        <Box data-part="indicator">
+          {size == "md" ? (
+            <DropdownDownFill24Icon />
+          ) : (
+            <DropdownDownFill18Icon />
+          )}
         </Box>
       </ChakraSelect.IndicatorGroup>
     </ChakraSelect.Control>
@@ -285,7 +275,7 @@ export const SelectValueText = function SelectValueText({
       {...rest}
       ref={ref}
       placeholder={placeholder}
-      paddingTop={withPlaceholder ? "4" : "0"}
+      data-with-placeholder={withPlaceholder || undefined}
     >
       <ChakraSelect.Context>
         {(select: {
@@ -301,7 +291,7 @@ export const SelectValueText = function SelectValueText({
           if (children) return children(items);
           if (multiple) {
             return (
-              <Flex gap={0.5} marginBottom={1}>
+              <Flex gap={0.5}>
                 {items.map((item) => (
                   <Badge
                     key={select.collection.stringifyItem(item)}