@vygruppen/spor-react 9.9.0 → 9.10.0

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-TEDOVPXZ.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-WZYWSOJB.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "9.9.0",
+  "version": "9.10.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,7 +22,7 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@internationalized/date": "^3.0.1",
-    "@vygruppen/spor-design-tokens": ">3.4.0",
+    "@vygruppen/spor-design-tokens": ">3.6.0",
     "@vygruppen/spor-icon-react": ">3.6.0",
     "@vygruppen/spor-loader": ">0.3.1",
     "awesome-phonenumber": "^5.10.0",

package/src/layout/RadioCard.tsx

@@ -1,23 +1,15 @@
 import {
+  Box,
   BoxProps,
   UseRadioProps,
   chakra,
   forwardRef,
-  useRadio,
-  useStyleConfig,
+  useMultiStyleConfig,
 } from "@chakra-ui/react";
-import { dataAttr } from "@chakra-ui/utils";
 import React, { useId } from "react";
 
-export type RadioCardProps = UseRadioProps &
-  BoxProps & {
-    children: React.ReactNode;
-    /** Defaults to "base" */
-    variant: "floating" | "base";
-  };
-
 /**
- * Renders a radio card.
+ * Radio cards are used to present a set of options where only one option can be selected.
  *
  * The most basic version looks like this:
  *
@@ -27,6 +19,14 @@ export type RadioCardProps = UseRadioProps &
  * </RadioCard>
  * ```
  *
+ * In order to use RadioCard outside a RadioCardGroup, you need to pass the `isChecked` and `onChange` props.
+ *
+ * ```tsx
+ * <RadioCard isChecked={true} onChange={(e) => console.log(e.target.value)}>
+ *  Content
+ * </RadioCard>
+ * ```
+ *
  * In order to use RadioCard, you typically want to place these components in a group with several other RadioCards.
  *
  * ```tsx
@@ -59,38 +59,47 @@ export type RadioCardProps = UseRadioProps &
  * ```
  */
 
-export const RadioCard = forwardRef<RadioCardProps, "div">(
-  ({ children, variant = "base", ...props }, ref) => {
-    const { getInputProps, getRadioProps, getRootProps, state } =
-      useRadio(props);
-
-    const styles = useStyleConfig("RadioCard", { variant });
+export type RadioCardProps = UseRadioProps &
+  BoxProps & {
+    children: React.ReactNode;
+    /** Defaults to "base" */
+    variant?: "floating" | "base";
+    /** Needs to be defined if RadioCard is used outside RadioCardGroup */
+    isChecked?: boolean;
+    /** Needs to be defined if RadioCard is used outside RadioCardGroup */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  };
 
-    const input = getInputProps({}, ref);
-    const radio = getRadioProps();
+export const RadioCard = forwardRef<RadioCardProps, "div">(
+  ({ children, variant = "base", isChecked, onChange, ...props }, ref) => {
+    const styles = useMultiStyleConfig("RadioCard", { variant });
 
     const id = `radio-card-${useId()}`;
 
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      onChange && onChange(event);
+    };
+
     return (
-      <chakra.label
-        htmlFor={id}
-        {...getRootProps()}
-        aria-label={String(children)}
-      >
-        <chakra.input {...input} id={id} disabled={state.isDisabled} />
-        <chakra.div
-          __css={styles}
-          {...radio}
-          data-checked={dataAttr(state.isChecked)}
-          data-hover={dataAttr(state.isHovered)}
-          data-focus={dataAttr(state.isFocused)}
-          data-active={dataAttr(state.isActive)}
-          data-disabled={dataAttr(state.isDisabled)}
+      <Box as="label" htmlFor={id} aria-label={String(children)} ref={ref}>
+        <chakra.input
+          type="radio"
+          id={id}
+          checked={isChecked}
+          onChange={handleChange}
+          {...props}
+          sx={styles.radioInput}
+        />
+        <Box
           {...props}
+          __css={{
+            ...styles.container,
+            ...(isChecked && styles.checked),
+          }}
         >
           {children}
-        </chakra.div>
-      </chakra.label>
+        </Box>
+      </Box>
     );
   },
 );

package/src/layout/RadioCardGroup.tsx

@@ -4,7 +4,7 @@ import {
   StackDirection,
   Stack,
 } from "@chakra-ui/react";
-import React, { Children } from "react";
+import React from "react";
 import { RadioCard, RadioCardProps } from "./RadioCard";
 
 type RadioCardGroupProps = RadioGroupProps & {
@@ -75,17 +75,21 @@ export const RadioCardGroup = ({
     ...props,
   });
 
-  const group = getRootProps();
+  const rootProps = getRootProps();
 
   return (
-    <Stack direction={direction} {...group}>
+    <Stack direction={direction} {...rootProps}>
       {recursiveMap(children, (child: React.ReactElement) => {
         if (child.type === RadioCard) {
-          const radio = getRadioProps({ value: child.props.value });
+          const radioProps = getRadioProps({ value: child.props.value });
           const variantValue = variant as "base" | "floating" | undefined;
           return React.cloneElement(
             child as React.ReactElement<RadioCardProps>,
-            { ...radio, variant: variantValue, ...props },
+            {
+              ...radioProps,
+              variant: variantValue,
+              ...props,
+            },
           );
         }
         return child;

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

@@ -28,6 +28,7 @@ const config = defineStyleConfig({
   }),
   variants: {
     base: (props) => ({
+      cursor: "pointer",
       ...baseBorder("default", props),
       _hover: {
         ...baseBorder("hover", props),
@@ -42,7 +43,7 @@ const config = defineStyleConfig({
       boxShadow: "sm",
       _hover: {
         ...accentBackground("hover", props),
-        boxShadow: "sm",
+        boxShadow: "md",
       },
       _active: {
         ...accentBackground("active", props),
@@ -51,6 +52,7 @@ const config = defineStyleConfig({
     }),
     floating: (props) => ({
       ...floatingBackground("default", props),
+      ...floatingBorder("default", props),
       boxShadow: "sm",
       _hover: {
         ...floatingBackground("hover", props),
@@ -58,6 +60,7 @@ const config = defineStyleConfig({
         boxShadow: "md",
       },
       _active: {
+        ...floatingBorder("default", props),
         ...floatingBackground("active", props),
         boxShadow: "none",
       },

package/src/theme/components/radio-card.ts

@@ -1,60 +1,99 @@
-import { defineStyleConfig } from "@chakra-ui/react";
+import {
+  createMultiStyleConfigHelpers,
+  defineStyleConfig,
+} from "@chakra-ui/react";
 import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
 import { floatingBackground, floatingBorder } from "../utils/floating-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
+import { anatomy } from "@chakra-ui/theme-tools";
+import { outlineBorder } from "../utils/outline-utils";
 
-const config = defineStyleConfig({
+const parts = anatomy("radio-card").parts("container", "checked", "radioInput");
+const helpers = createMultiStyleConfigHelpers(parts.keys);
+
+const config = helpers.defineMultiStyleConfig({
   baseStyle: (props: any) => ({
-    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),
         },
       },
     }),

package/src/theme/utils/base-utils.ts

@@ -60,8 +60,11 @@ export function baseBorder(state: BorderState, props: StyleFunctionProps) {
     }
     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": {

package/src/theme/utils/outline-utils.ts

@@ -0,0 +1,26 @@
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { State, Subset } from "./types";
+
+type OutlineBorderState = Subset<State, "default" | "error" | "focus">;
+export function outlineBorder(
+  state: OutlineBorderState,
+  props: StyleFunctionProps,
+) {
+  switch (state) {
+    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),
+      };
+  }
+}

package/src/theme/utils/types.ts

@@ -5,7 +5,9 @@ export type State =
   | "focus"
   | "selected"
   | "invalid"
-  | "disabled";
+  | "disabled"
+  | "error"
+  | "focus";
 
 // Helper type to extract subset of union types
 export type Subset<T, U extends T> = T extends U ? T : never;