@vygruppen/spor-react 11.2.0 → 11.3.0

package/package.json

@@ -1,15 +1,11 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "11.2.0",
+  "version": "11.3.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "license": "MIT",
   "sideEffects": false,
-  "scripts": {
-    "build": "tsup src/index.tsx --dts --treeshake --format cjs,esm",
-    "dev": "tsup src/index.tsx --watch --format esm"
-  },
   "homepage": "https://github.com/nsbno/spor/tree/main/packages/spor-react",
   "repository": {
     "type": "git",
@@ -17,34 +13,51 @@
     "directory": "packages/spor-react"
   },
   "dependencies": {
+    "@chakra-ui/anatomy": "^2.3.4",
     "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/react-use-size": "^2.1.0",
+    "@chakra-ui/styled-system": "^2.12.0",
+    "@chakra-ui/system": "^2.6.2",
+    "@chakra-ui/theme": "^3.4.6",
     "@chakra-ui/theme-tools": "^2.0.12",
+    "@chakra-ui/utils": "^2.2.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@internationalized/date": "^3.5.4",
-    "@vygruppen/spor-design-tokens": "^3.9.0",
-    "@vygruppen/spor-icon-react": "^3.12.0",
-    "@vygruppen/spor-loader": "^0.4.0",
     "awesome-phonenumber": "^5.11.0",
     "deepmerge": "^4.3.1",
-    "framer-motion": "^9.1.7",
+    "framer-motion": "^8.5.5",
     "lottie-react": "^2.4.0",
     "react-aria": "^3.33.1",
     "react-stately": "^3.31.1",
-    "react-swipeable": "^7.0.1"
+    "react-swipeable": "^7.0.1",
+    "@vygruppen/spor-design-tokens": "3.10.0",
+    "@vygruppen/spor-icon-react": "3.13.0",
+    "@vygruppen/spor-loader": "0.5.0"
   },
   "devDependencies": {
+    "@react-types/datepicker": "^3.10.0",
+    "@react-types/shared": "^3.27.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^14.3.1",
+    "@types/node": "^22.13.4",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tsup": "^7.2.0",
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
-    "vitest-canvas-mock": "^0.2.2"
+    "vitest-canvas-mock": "^0.2.2",
+    "typescript": "^5.7.3",
+    "@vygruppen/tsconfig": "0.0.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
   }
-}
+}

package/src/button/IconButton.tsx

@@ -1,11 +1,11 @@
 import {
-  As,
   IconButton as ChakraIconButton,
   IconButtonProps as ChakraIconButtonProps,
   forwardRef,
 } from "@chakra-ui/react";
 import React from "react";
 import { ColorSpinner } from "..";
+import { As } from "@chakra-ui/system";
 
 export type IconButtonProps = Omit<ChakraIconButtonProps, "variant"> & {
   /** The button variant.

package/src/datepicker/CalendarTriggerButton.tsx

@@ -3,13 +3,13 @@ import {
   PopoverAnchor,
   useMultiStyleConfig,
   forwardRef,
-  As,
   ResponsiveValue,
 } from "@chakra-ui/react";
 import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
 import React, { KeyboardEventHandler } from "react";
 import { AriaButtonProps } from "react-aria";
 import { IconButton, createTexts, useTranslation } from "..";
+import { As } from "@chakra-ui/system";
 
 type CalendarTriggerButtonProps = AriaButtonProps<"button"> & {
   variant: ResponsiveValue<"base" | "floating" | "ghost">;

package/src/datepicker/StyledField.tsx

@@ -1,5 +1,4 @@
 import {
-  As,
   Box,
   BoxProps,
   ResponsiveValue,
@@ -7,6 +6,7 @@ import {
   useFormControlContext,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
+import { As } from "@chakra-ui/system";
 import React from "react";
 
 type StyledFieldProps = BoxProps & {

package/src/datepicker/TimePicker.tsx

@@ -95,11 +95,12 @@ export const TimePicker = ({
     const minutesToSubtract =
       dateTime.minute % minuteInterval || minuteInterval;
     state.setValue(
-      state.value.subtract({
+      dateTime.subtract({
         minutes: minutesToSubtract,
       }),
     );
   };
+
   const handleForwardClick = () => {
     if (!dateTime) {
       return;
@@ -107,7 +108,7 @@ export const TimePicker = ({
     const minutesToAdd =
       minuteInterval - (dateTime.minute % minuteInterval) || minuteInterval;
     state.setValue(
-      state.value.add({
+      dateTime.add({
         minutes: minutesToAdd,
       }),
     );

package/src/input/ChoiceChip.tsx

@@ -86,8 +86,8 @@ export const ChoiceChip = forwardRef(
 
     return (
       <chakra.label
-        htmlFor={id}
         {...getRootProps()}
+        htmlFor={id}
         aria-label={String(children)}
       >
         <chakra.input

package/src/input/InfoSelect.tsx

@@ -232,8 +232,8 @@ export function InfoSelect<T extends object>({
             transitionDuration={"var(--spor-transition-duration-normal)"}
           >
             {state.selectedItem
-              ? state.selectedItem.textValue ?? state.selectedItem.rendered
-              : placeholder ?? t(texts.selectAnOption)}
+              ? (state.selectedItem.textValue ?? state.selectedItem.rendered)
+              : (placeholder ?? t(texts.selectAnOption))}
           </Box>
         </chakra.div>
         <Box sx={styles.arrowIcon}>

package/src/input/InputElement.tsx

@@ -1,5 +1,4 @@
 import {
-  As,
   forwardRef,
   InputElementProps as ChakraInputElementProps,
   InputLeftElement as ChakraInputLeftElement,

package/src/input/PhoneNumberInput.tsx

@@ -1,13 +1,9 @@
-import {
-  As,
-  BoxProps,
-  forwardRef,
-  useControllableState,
-} from "@chakra-ui/react";
+import { BoxProps, forwardRef, useControllableState } from "@chakra-ui/react";
 import React from "react";
 import { Input, createTexts, useTranslation } from "..";
 import { AttachedInputs } from "./AttachedInputs";
 import { CountryCodeSelect } from "./CountryCodeSelect";
+import { As } from "@chakra-ui/system";
 
 type CountryCodeAndPhoneNumber = {
   countryCode: string;

package/src/input/Switch.tsx

@@ -1,14 +1,13 @@
 import {
-  As,
   Switch as ChakraSwitch,
   SwitchProps as ChakraSwitchProps,
   forwardRef,
 } from "@chakra-ui/react";
+import { As } from "@chakra-ui/system";
 import React from "react";
 
 export type SwitchProps = Omit<ChakraSwitchProps, "colorScheme" | "variant"> & {
   size?: "sm" | "md" | "lg";
-  as?: As;
 };
 
 /**
@@ -33,7 +32,7 @@ export type SwitchProps = Omit<ChakraSwitchProps, "colorScheme" | "variant"> & {
  * ```
  */
 export const Switch = forwardRef<SwitchProps, "input">(
-  ({ size = "md", as = "div", ...props }: SwitchProps, ref) => {
+  ({ size = "md", as, ...props }, ref) => {
     return <ChakraSwitch as={as} size={size} {...props} ref={ref} />;
   },
 );

package/src/layout/Divider.tsx

@@ -1,10 +1,10 @@
 import {
-  As,
   BoxProps,
   Divider as ChakraDivider,
   DividerProps as ChakraDividerProps,
   forwardRef,
 } from "@chakra-ui/react";
+import { As } from "@chakra-ui/system";
 import React from "react";
 
 export type DividerProps = ChakraDividerProps & {

package/src/layout/PressableCard.tsx

@@ -1,11 +1,6 @@
 import React from "react";
-import {
-  As,
-  Box,
-  BoxProps,
-  forwardRef,
-  useStyleConfig,
-} from "@chakra-ui/react";
+import { Box, BoxProps, forwardRef, useStyleConfig } from "@chakra-ui/react";
+import { As } from "@chakra-ui/system";
 
 type PressableCardProps = BoxProps & {
   /** Defaults to "base"  */

package/src/layout/StaticCard.tsx

@@ -1,11 +1,6 @@
 import React from "react";
-import {
-  As,
-  Box,
-  BoxProps,
-  useStyleConfig,
-  forwardRef,
-} from "@chakra-ui/react";
+import { Box, BoxProps, useStyleConfig, forwardRef } from "@chakra-ui/react";
+import { As } from "@chakra-ui/system";
 
 export type StaticCardProps = BoxProps & {
   children: React.ReactNode;

package/src/linjetag/TravelTag.tsx

@@ -1,5 +1,4 @@
 import {
-  As,
   Box,
   BoxProps,
   forwardRef,
@@ -16,6 +15,7 @@ import {
 import React from "react";
 import { LineIcon } from "./LineIcon";
 import type { TagProps } from "./types";
+import { As } from "@chakra-ui/system";
 
 export type TravelTagProps = TagProps &
   BoxProps & {

package/src/toast/useToast.tsx

@@ -51,49 +51,71 @@ export type ToastOptions = BaseToastOptions &
  */
 export const useToast = () => {
   const toast = useChakraToast();
-  const wrappedToast = useCallback((opts: ToastOptions) => {
-    const Toast = getToastComponent(opts);
-    toast({
-      ...opts,
-      render: Toast,
-    });
-  }, []);
+  const wrappedToast = useCallback(
+    (opts: ToastOptions) => {
+      const Toast = getToastComponent(opts);
+      toast({
+        ...opts,
+        render: Toast,
+      });
+    },
+    [toast],
+  );
   return wrappedToast;
 };
 
-type RenderArgs = { onClose: () => void; id: string };
+type RenderArgs = { onClose: () => void; id?: string | number };
+
 const getToastComponent = (opts: ToastOptions) => {
   if ("isClosable" in opts && opts.isClosable) {
-    return ({ onClose, id }: RenderArgs) => (
-      <ClosableToast
-        id={id}
-        variant={opts.variant}
-        onClose={() => {
-          if (opts.onClose) {
-            opts.onClose();
-          }
-          onClose();
-        }}
-      >
-        {opts.text}
-      </ClosableToast>
-    );
+    return ({ onClose, id }: RenderArgs) => {
+      if (id === undefined) {
+        return null; // Handle the case where id is undefined
+      }
+
+      return (
+        <ClosableToast
+          id={id.toString()}
+          variant={opts.variant}
+          onClose={() => {
+            if (opts.onClose) {
+              opts.onClose();
+            }
+            onClose();
+          }}
+        >
+          {opts.text}
+        </ClosableToast>
+      );
+    };
   }
   if ("buttonText" in opts) {
-    return ({ id }: RenderArgs) => (
-      <ActionToast
-        id={id}
-        variant={opts.variant}
-        buttonText={opts.buttonText}
-        onClick={opts.onClick}
-      >
+    return ({ id }: RenderArgs) => {
+      if (id === undefined) {
+        return null; // Handle the case where id is undefined
+      }
+
+      return (
+        <ActionToast
+          id={id.toString()}
+          variant={opts.variant}
+          buttonText={opts.buttonText}
+          onClick={opts.onClick}
+        >
+          {opts.text}
+        </ActionToast>
+      );
+    };
+  }
+  return ({ id }: RenderArgs) => {
+    if (id === undefined) {
+      return null; // Handle the case where id is undefined
+    }
+
+    return (
+      <BaseToast id={id.toString()} variant={opts.variant}>
         {opts.text}
-      </ActionToast>
+      </BaseToast>
     );
-  }
-  return ({ id }: RenderArgs) => (
-    <BaseToast id={id} variant={opts.variant}>
-      {opts.text}
-    </BaseToast>
-  );
+  };
 };

package/src/typography/Badge.tsx

@@ -1,9 +1,9 @@
 import {
-  As,
   Badge as ChakraBadge,
   BadgeProps as ChakraBadgeProps,
   forwardRef,
 } from "@chakra-ui/react";
+import { As } from "@chakra-ui/system";
 import React from "react";
 
 export type BadgeProps = Omit<

package/src/typography/Code.tsx

@@ -1,9 +1,9 @@
 import {
-  As,
   Code as ChakraCode,
   CodeProps as ChakraCodeProps,
   forwardRef,
 } from "@chakra-ui/react";
+import { As } from "@chakra-ui/system";
 import React from "react";
 
 export type CodeProps = ChakraCodeProps & {

package/src/typography/Heading.tsx

@@ -46,7 +46,7 @@ export const Heading = ({
   ...props
 }: HeadingProps) => {
   const id =
-    externalId ?? (autoId && typeof props.children === "string")
+    (externalId ?? (autoId && typeof props.children === "string"))
       ? slugify(props.children as string)
       : undefined;
   const color = useColorModeValue("text.primary.light", "text.primary.dark");

package/tsup.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.tsx"],
+  format: ["cjs", "esm"],
+  dts: true,
+  treeshake: true,
+  sourcemap: true,
+});