@vygruppen/spor-react 9.9.0 → 9.10.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@9.9.0 build
+> @vygruppen/spor-react@9.10.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js 511.25 KB
-CJS ⚡️ Build success in 2246ms
+CJS dist/index.js 512.93 KB
+CJS ⚡️ Build success in 2113ms
+ESM dist/CountryCodeSelect-FVCL47RT.mjs 1.19 KB
 ESM dist/index.mjs                      2.11 KB
-ESM dist/CountryCodeSelect-U25NF65N.mjs 1.19 KB
-ESM dist/chunk-TEDOVPXZ.mjs             400.45 KB
-ESM ⚡️ Build success in 2246ms
-DTS ⚡️ Build success in 11587ms
-DTS dist/index.d.ts  338.81 KB
-DTS dist/index.d.mts 338.81 KB
+ESM dist/chunk-WZYWSOJB.mjs             401.87 KB
+ESM ⚡️ Build success in 2114ms
+DTS ⚡️ Build success in 12728ms
+DTS dist/index.d.ts  342.51 KB
+DTS dist/index.d.mts 342.51 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 9.10.0
+
+### Minor Changes
+
+- c29f006: Fixed crusial error with RadioCard and updated styling.
+- c29f006: Fix values on PressableCard
+
+### Patch Changes
+
+- Updated dependencies [c29f006]
+  - @vygruppen/spor-design-tokens@3.6.1
+
 ## 9.9.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-U25NF65N.mjs → CountryCodeSelect-FVCL47RT.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-TEDOVPXZ.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-WZYWSOJB.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-TEDOVPXZ.mjs → chunk-WZYWSOJB.mjs}

@@ -1,7 +1,7 @@
 import tokens11__default from '@vygruppen/spor-design-tokens';
 import * as tokens11 from '@vygruppen/spor-design-tokens';
 export { tokens11 as tokens };
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, useRadio, useStyleConfig, chakra, Box, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, useRadioGroup, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Divider as Divider$1, Stack as Stack$1, useMultiStyleConfig, Box, chakra, useStyleConfig, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, useRadioGroup, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React73 from 'react';
 import React73__default, { useId, createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, Suspense, useContext, useCallback, useMemo, useLayoutEffect } from 'react';
@@ -778,39 +778,34 @@ var Stack = forwardRef(
     return /* @__PURE__ */ React73__default.createElement(Stack$1, { ...props, direction: flexDirection, ref });
   }
 );
-
-// ../../node_modules/@chakra-ui/utils/dist/chunk-O3SWHQEE.mjs
-var dataAttr = (condition) => condition ? "" : void 0;
 var RadioCard = forwardRef(
-  ({ children, variant = "base", ...props }, ref) => {
-    const { getInputProps, getRadioProps, getRootProps, state: state2 } = useRadio(props);
-    const styles3 = useStyleConfig("RadioCard", { variant });
-    const input = getInputProps({}, ref);
-    const radio = getRadioProps();
+  ({ children, variant = "base", isChecked, onChange, ...props }, ref) => {
+    const styles3 = useMultiStyleConfig("RadioCard", { variant });
     const id = `radio-card-${useId()}`;
-    return /* @__PURE__ */ React73__default.createElement(
-      chakra.label,
+    const handleChange = (event) => {
+      onChange && onChange(event);
+    };
+    return /* @__PURE__ */ React73__default.createElement(Box, { as: "label", htmlFor: id, "aria-label": String(children), ref }, /* @__PURE__ */ React73__default.createElement(
+      chakra.input,
       {
-        htmlFor: id,
-        ...getRootProps(),
-        "aria-label": String(children)
+        type: "radio",
+        id,
+        checked: isChecked,
+        onChange: handleChange,
+        ...props,
+        sx: styles3.radioInput
+      }
+    ), /* @__PURE__ */ React73__default.createElement(
+      Box,
+      {
+        ...props,
+        __css: {
+          ...styles3.container,
+          ...isChecked && styles3.checked
+        }
       },
-      /* @__PURE__ */ React73__default.createElement(chakra.input, { ...input, id, disabled: state2.isDisabled }),
-      /* @__PURE__ */ React73__default.createElement(
-        chakra.div,
-        {
-          __css: styles3,
-          ...radio,
-          "data-checked": dataAttr(state2.isChecked),
-          "data-hover": dataAttr(state2.isHovered),
-          "data-focus": dataAttr(state2.isFocused),
-          "data-active": dataAttr(state2.isActive),
-          "data-disabled": dataAttr(state2.isDisabled),
-          ...props
-        },
-        children
-      )
-    );
+      children
+    ));
   }
 );
 var RadioCardGroup = ({
@@ -828,14 +823,18 @@ var RadioCardGroup = ({
     onChange,
     ...props
   });
-  const group = getRootProps();
-  return /* @__PURE__ */ React73__default.createElement(Stack$1, { direction: direction2, ...group }, recursiveMap(children, (child) => {
+  const rootProps = getRootProps();
+  return /* @__PURE__ */ React73__default.createElement(Stack$1, { direction: direction2, ...rootProps }, recursiveMap(children, (child) => {
     if (child.type === RadioCard) {
-      const radio = getRadioProps({ value: child.props.value });
+      const radioProps = getRadioProps({ value: child.props.value });
       const variantValue = variant;
       return React73__default.cloneElement(
         child,
-        { ...radio, variant: variantValue, ...props }
+        {
+          ...radioProps,
+          variant: variantValue,
+          ...props
+        }
       );
     }
     return child;
@@ -2691,6 +2690,9 @@ var CheckboxGroup = ({
 }) => {
   return /* @__PURE__ */ React73__default.createElement(CheckboxGroup$1, { ...props }, /* @__PURE__ */ React73__default.createElement(Stack$1, { direction: direction2 }, children));
 };
+
+// ../../node_modules/@chakra-ui/utils/dist/chunk-O3SWHQEE.mjs
+var dataAttr = (condition) => condition ? "" : void 0;
 var ChoiceChip = forwardRef((props, ref) => {
   const {
     children,
@@ -3473,7 +3475,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-U25NF65N.mjs'));
+var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-FVCL47RT.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React73__default.createElement(Radio$1, { ...props, ref });
 });
@@ -6514,13 +6516,13 @@ function defineStyle(styles3) {
 function defineStyleConfig(config45) {
   return config45;
 }
-function createMultiStyleConfigHelpers(parts19) {
+function createMultiStyleConfigHelpers(parts20) {
   return {
     definePartsStyle(config45) {
       return config45;
     },
     defineMultiStyleConfig(config45) {
-      return { parts: parts19, ...config45 };
+      return { parts: parts20, ...config45 };
     }
   };
 }
@@ -6683,7 +6685,7 @@ function anatomy(name, map = {}) {
       "[anatomy] .part(...) should only be called once. Did you mean to use .extend(...) ?"
     );
   }
-  function parts19(...values) {
+  function parts20(...values) {
     assert();
     for (const part of values) {
       map[part] = toPart(part);
@@ -6723,7 +6725,7 @@ function anatomy(name, map = {}) {
   }
   const __type = {};
   return {
-    parts: parts19,
+    parts: parts20,
     toPart,
     extend,
     selectors,
@@ -9936,8 +9938,11 @@ function baseBorder(state2, props) {
     }
     case "active": {
       return {
-        outline: "2px solid",
-        outlineColor: mode("base.outline.light", "base.outline.dark")(props)
+        outline: "1px solid",
+        outlineColor: mode(
+          "base.outline.default.light",
+          "base.outline.default.dark"
+        )(props)
       };
     }
     case "invalid": {
@@ -13022,66 +13027,119 @@ var config32 = helpers23.defineMultiStyleConfig({
   }
 });
 var progress_indicator_default = config32;
-var config33 = defineStyleConfig$1({
+function outlineBorder(state2, props) {
+  switch (state2) {
+    case "error":
+      return {
+        outlineColor: mode("outline.error.light", "outline.error.dark")(props)
+      };
+    case "focus":
+      return {
+        outlineColor: mode("outline.focus.light", "outline.focus.dark")(props)
+      };
+    default:
+      return {
+        outlineColor: mode(
+          "outline.default.light",
+          "outline.default.dark"
+        )(props)
+      };
+  }
+}
+
+// src/theme/components/radio-card.ts
+var parts17 = anatomy$1("radio-card").parts("container", "checked", "radioInput");
+var helpers24 = createMultiStyleConfigHelpers$1(parts17.keys);
+var config33 = helpers24.defineMultiStyleConfig({
   baseStyle: (props) => ({
-    appearance: "none",
-    border: "none",
-    overflow: "hidden",
-    fontSize: "inherit",
-    display: "block",
-    borderRadius: "sm",
-    ...focusVisibleStyles(props),
-    _checked: {
-      outline: "1px solid",
-      outlineColor: "greenHaze",
-      ...floatingBackground("active", props),
-      _hover: {
-        ...floatingBackground("active", props)
+    container: {
+      appearance: "none",
+      border: "none",
+      overflow: "hidden",
+      fontSize: "inherit",
+      display: "block",
+      cursor: "pointer",
+      borderRadius: "sm",
+      ...focusVisibleStyles(props),
+      transitionProperty: "common",
+      transitionDuration: "fast",
+      _disabled: {
+        pointerEvents: "none",
+        ...baseBackground("disabled", props),
+        ...baseBorder("disabled", props),
+        ...baseText("disabled", props)
       }
     },
-    _disabled: {
-      pointerEvents: "none",
-      ...baseBackground("disabled", props),
-      ...baseBorder("disabled", props),
-      ...baseText("disabled", props)
+    checked: {
+      outline: "2px solid",
+      ...outlineBorder("focus", props),
+      ...floatingBackground("active", props)
+    },
+    radioInput: {
+      appearance: "none",
+      position: "absolute",
+      opacity: 0,
+      zIndex: -1
     }
   }),
   variants: {
     base: (props) => ({
-      ...baseBackground("default", props),
-      ...baseBorder("default", props),
-      _hover: {
-        ...baseBackground("hover", props),
-        ...baseBorder("hover", props)
+      container: {
+        ...baseText("default", props),
+        ...baseBackground("default", props),
+        ...baseBorder("default", props),
+        _hover: {
+          ...baseBackground("hover", props),
+          ...baseBorder("hover", props)
+        },
+        _active: {
+          ...baseBackground("active", props),
+          ...baseBorder("active", props)
+        }
       },
-      _active: {
-        ...baseBackground("active", props)
+      checked: {
+        _hover: {
+          ...baseBorder("hover", props)
+        },
+        _active: {
+          ...baseBackground("active", props),
+          ...baseBorder("active", props)
+        }
       }
     }),
     floating: (props) => ({
-      ...floatingBackground("default", props),
-      boxShadow: "sm",
-      _hover: {
-        ...floatingBackground("hover", props),
-        ...floatingBorder("hover", props),
-        boxShadow: "md"
-      },
-      _active: {
-        ...floatingBackground("active", props),
-        ...floatingBorder("active", props)
+      container: {
+        ...baseText("default", props),
+        ...baseBackground("default", props),
+        ...floatingBackground("default", props),
+        ...floatingBorder("default", props),
+        boxShadow: "sm",
+        _hover: {
+          ...floatingBackground("hover", props),
+          ...floatingBorder("hover", props),
+          boxShadow: "md"
+        },
+        _active: {
+          ...floatingBackground("active", props),
+          ...floatingBorder("active", props)
+        }
       },
-      _checked: {
+      checked: {
+        cursor: "normal",
         _hover: {
-          outline: "1px solid",
-          outlineColor: "silver"
+          ...floatingBorder("hover", props)
+        },
+        _active: {
+          ...floatingBackground("active", props),
+          ...floatingBorder("active", props)
         }
       }
     })
   }
 });
 var radio_card_default = config33;
-var helpers24 = createMultiStyleConfigHelpers$1(radioAnatomy.keys);
-var config34 = helpers24.defineMultiStyleConfig({
+var helpers25 = createMultiStyleConfigHelpers$1(radioAnatomy.keys);
+var config34 = helpers25.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       _hover: {
@@ -13135,9 +13193,9 @@ var config34 = helpers24.defineMultiStyleConfig({
   })
 });
 var radio_default = config34;
-var parts17 = selectAnatomy.extend("root");
-var helpers25 = createMultiStyleConfigHelpers$1(parts17.keys);
-var config35 = helpers25.defineMultiStyleConfig({
+var parts18 = selectAnatomy.extend("root");
+var helpers26 = createMultiStyleConfigHelpers$1(parts18.keys);
+var config35 = helpers26.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
       width: "100%",
@@ -13208,7 +13266,7 @@ var config36 = defineStyleConfig$1({
   }
 });
 var skeleton_default = config36;
-var parts18 = anatomy$1("stepper").parts(
+var parts19 = anatomy$1("stepper").parts(
   "root",
   "container",
   "innerContainer",
@@ -13220,8 +13278,8 @@ var parts18 = anatomy$1("stepper").parts(
   "stepTitle",
   "closeButton"
 );
-var helpers26 = createMultiStyleConfigHelpers$1(parts18.keys);
-var config37 = helpers26.defineMultiStyleConfig({
+var helpers27 = createMultiStyleConfigHelpers$1(parts19.keys);
+var config37 = helpers27.defineMultiStyleConfig({
   baseStyle: {
     root: {
       display: "flex",
@@ -13296,8 +13354,8 @@ var $height3 = cssVar$1("switch-track-height");
 var $diff2 = cssVar$1("switch-track-diff");
 var diffValue2 = calc$1.subtract($width2, $height3);
 var $translateX2 = cssVar$1("switch-thumb-x");
-var helpers27 = createMultiStyleConfigHelpers$1(switchAnatomy.keys);
-var config38 = helpers27.defineMultiStyleConfig({
+var helpers28 = createMultiStyleConfigHelpers$1(switchAnatomy.keys);
+var config38 = helpers28.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
       [$diff2.variable]: diffValue2,
@@ -13391,13 +13449,13 @@ var config38 = helpers27.defineMultiStyleConfig({
   }
 });
 var switch_default = config38;
-var helpers28 = createMultiStyleConfigHelpers$1(tableAnatomy.keys);
+var helpers29 = createMultiStyleConfigHelpers$1(tableAnatomy.keys);
 var numericStyles2 = {
   "&[data-is-numeric=true]": {
     textAlign: "end"
   }
 };
-var config39 = helpers28.defineMultiStyleConfig({
+var config39 = helpers29.defineMultiStyleConfig({
   baseStyle: (props) => ({
     table: {
       borderCollapse: "collapse",
@@ -13544,8 +13602,8 @@ var config39 = helpers28.defineMultiStyleConfig({
   }
 });
 var table_default = config39;
-var helpers29 = createMultiStyleConfigHelpers$1(tabsAnatomy.keys);
-var config40 = helpers29.defineMultiStyleConfig({
+var helpers30 = createMultiStyleConfigHelpers$1(tabsAnatomy.keys);
+var config40 = helpers30.defineMultiStyleConfig({
   baseStyle: (props) => ({
     root: {
       display: "flex",
@@ -13795,6 +13853,7 @@ var config44 = defineStyleConfig$1({
   }),
   variants: {
     base: (props) => ({
+      cursor: "pointer",
       ...baseBorder("default", props),
       _hover: {
         ...baseBorder("hover", props)
@@ -13809,7 +13868,7 @@ var config44 = defineStyleConfig$1({
       boxShadow: "sm",
       _hover: {
         ...accentBackground("hover", props),
-        boxShadow: "sm"
+        boxShadow: "md"
       },
       _active: {
         ...accentBackground("active", props),
@@ -13818,6 +13877,7 @@ var config44 = defineStyleConfig$1({
     }),
     floating: (props) => ({
       ...floatingBackground("default", props),
+      ...floatingBorder("default", props),
       boxShadow: "sm",
       _hover: {
         ...floatingBackground("hover", props),
@@ -13825,6 +13885,7 @@ var config44 = defineStyleConfig$1({
         boxShadow: "md"
       },
       _active: {
+        ...floatingBorder("default", props),
         ...floatingBackground("active", props),
         boxShadow: "none"
       }