@vygruppen/spor-react 9.6.4 → 9.7.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, 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-V5JHGMIB.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-QGMF2EAE.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "9.6.4",
+  "version": "9.7.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/layout/RadioCard.tsx

@@ -0,0 +1,95 @@
+import {
+  BoxProps,
+  UseRadioProps,
+  chakra,
+  forwardRef,
+  useRadio,
+  useStyleConfig,
+} from "@chakra-ui/react";
+import { dataAttr } from "@chakra-ui/utils";
+import React, { useId } from "react";
+
+type RadioCardProps = UseRadioProps &
+  BoxProps & {
+    children: React.ReactNode;
+    variant: "floating" | "base";
+  };
+
+/**
+ * Renders a radio card.
+ *
+ * The most basic version looks like this:
+ *
+ * ```tsx
+ * <RadioCard>
+ *   Content
+ * </RadioCard>
+ * ```
+ *
+ * In order to use RadioCard, you typically want to place these components in a group with several other RadioCards.
+ *
+ * ```tsx
+ * <RadioCardGroup name="ticket">
+ *   <RadioCard value="economy">Economy</RadioCard>
+ *   <RadioCard value="business">Business</RadioCard>
+ *   <RadioCard value="first-class">First Class</RadioCard>
+ * </RadioCardGroup>
+ * ```
+ *
+ * You can add styling to each card seperately, or you can add a common style to the group.
+ * Group styling overrides single styling if both are present.
+ *
+ * This example shows how to style all cards in a group:
+ *
+ * ```tsx
+ * <RadioCardGroup name="ticket" variant="floating" padding={3}>
+ *  <RadioCard value="economy">Economy</RadioCard>
+ *  <RadioCard value="business">Business</RadioCard>
+ *  <RadioCard value="first-class">First Class</RadioCard>
+ * </RadioCardGroup>
+ * ```
+ *
+ * This example shows how to style a single card:
+ *
+ * ```tsx
+ * <RadioCard variant="floating" padding={3}>
+ *  Economy
+ * </RadioCard>
+ * ```
+ */
+
+export const RadioCard = forwardRef<RadioCardProps, "div">(
+  ({ children, variant = "base", ...props }, ref) => {
+    const { getInputProps, getRadioProps, getRootProps, state } =
+      useRadio(props);
+
+    const styles = useStyleConfig("RadioCard", { variant });
+
+    const input = getInputProps({}, ref);
+    const radio = getRadioProps();
+
+    const id = `radio-card-${useId()}`;
+
+    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)}
+          {...props}
+        >
+          {children}
+        </chakra.div>
+      </chakra.label>
+    );
+  },
+);

package/src/layout/RadioCardGroup.tsx

@@ -0,0 +1,81 @@
+import {
+  useRadioGroup,
+  RadioGroupProps,
+  StackDirection,
+  Stack,
+} from "@chakra-ui/react";
+import React, { Children } from "react";
+
+type RadioCardGroupProps = RadioGroupProps & {
+  children: React.ReactNode;
+  props?: RadioGroupProps;
+  direction?: StackDirection;
+};
+
+/**
+ * Radio card groups are used to group several radio cards together.
+ *
+ * You can and should pass the common `name` prop to the `RadioGroup`, instead of to each `Radio` component.
+ *
+ * ```tsx
+ * <RadioCardGroup name="ticket">
+ *   <RadioCard>Economy</RadioCard>
+ *   <RadioCard>Business</RadioCard>
+ *   <RadioCard>First Class</RadioCard>
+ * </RadioCardGroup>
+ * ```
+ *
+ * By default, radio cards show up horizontally. If you want them to show up vertically, please specify the `direction="column"` prop.
+ *
+ * ```tsx
+ * <RadioCardGroup name="ticket" direction="column">
+ *   <RadioCard>Economy</RadioCard>
+ *   <RadioCard>Business</RadioCard>
+ *   <RadioCard>First Class</RadioCard>
+ * </RadioCardGroup>
+ * ```
+ *
+ * You can also specify the `defaultValue` prop to set the default value of the radio group.
+ *
+ * ```tsx
+ * <RadioCardGroup name="ticket" defaultValue="Economy">
+ *    <RadioCard>Economy</RadioCard>
+ *    <RadioCard>Business</RadioCard>
+ *    <RadioCard>First Class</RadioCard>
+ * </RadioCardGroup>
+ * ```
+ *
+ * Check out RadioCard for more information on how to style the radio cards.
+ * @see RadioCard
+ */
+
+export const RadioCardGroup = ({
+  children,
+  name,
+  direction = "row",
+  onChange,
+  defaultValue,
+  variant = "base",
+  ...props
+}: RadioCardGroupProps) => {
+  const { getRootProps, getRadioProps } = useRadioGroup({
+    defaultValue: defaultValue,
+    name: name,
+    onChange: onChange,
+    ...props,
+  });
+
+  const group = getRootProps();
+
+  return (
+    <Stack direction={direction} {...group}>
+      {Children.map(
+        children as React.ReactElement[],
+        (child: React.ReactElement) => {
+          const radio = getRadioProps({ value: child.props.value });
+          return React.cloneElement(child, { ...radio, variant, ...props });
+        },
+      )}
+    </Stack>
+  );
+};

package/src/layout/index.tsx

@@ -26,3 +26,5 @@ export type {
 } from "@chakra-ui/react";
 export * from "./Divider";
 export * from "./Stack";
+export * from "./RadioCard";
+export * from "./RadioCardGroup";

package/src/theme/components/index.ts

@@ -30,6 +30,7 @@ export { default as Pagination } from "./pagination";
 export { default as Popover } from "./popover";
 export { default as ProgressBar } from "./progress-bar";
 export { default as ProgressIndicator } from "./progress-indicator";
+export { default as RadioCard } from "./radio-card";
 export { default as Radio } from "./radio";
 export { default as Select } from "./select";
 export { default as Skeleton } from "./skeleton";

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

@@ -0,0 +1,64 @@
+import { 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";
+
+const config = defineStyleConfig({
+  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),
+      },
+    },
+    _disabled: {
+      pointerEvents: "none",
+      ...baseBackground("disabled", props),
+      ...baseBorder("disabled", props),
+      ...baseText("disabled", props),
+    },
+  }),
+  variants: {
+    base: (props) => ({
+      ...baseBackground("default", props),
+      ...baseBorder("default", props),
+      _hover: {
+        ...baseBackground("hover", props),
+        ...baseBorder("hover", props),
+      },
+      _active: {
+        ...baseBackground("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),
+      },
+      _checked: {
+        _hover: {
+          outline: "1px solid",
+          outlineColor: "silver",
+        },
+      },
+    }),
+  },
+});
+
+export default config;

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

@@ -2,6 +2,7 @@ import { defineStyleConfig } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
 import { colors } from "../foundations";
 import { baseBorder, baseText } from "../utils/base-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
 
 const config = defineStyleConfig({
   baseStyle: (props: any) => ({
@@ -13,6 +14,7 @@ const config = defineStyleConfig({
     borderRadius: "md",
     // Except for white cards, all cards are light mode always
     color: "text.default.light",
+    ...focusVisibleStyles(props),
     ...getColorSchemeBaseProps(props),
   }),
 });
@@ -23,12 +25,14 @@ type CardThemeProps = {
   colorScheme:
     | "white"
     | "grey"
-    | "blue"
     | "green"
-    | "teal"
-    | "yellow"
     | "orange"
-    | "red";
+    | "red"
+    | "yellow"
+    | "blue"
+    | "darkBlue"
+    | "darkGreen"
+    | "darkYellow";
   theme: any;
   colorMode: "light" | "dark";
 };
@@ -58,6 +62,23 @@ const getColorSchemeBaseProps = (props: CardThemeProps) => {
         backgroundColor: "pink",
       };
     }
+    case "darkBlue": {
+      return {
+        backgroundColor: "darkBlue",
+        color: "white",
+      };
+    }
+    case "darkGreen": {
+      return {
+        backgroundColor: "pine",
+        color: "white",
+      };
+    }
+    case "darkYellow": {
+      return {
+        backgroundColor: "banana",
+      };
+    }
     default:
       return {
         backgroundColor: colors[props.colorScheme]?.[100] ?? "default",

package/src/theme/components/table.ts

@@ -22,12 +22,10 @@ const config = helpers.defineMultiStyleConfig({
     th: {
       fontWeight: "bold",
       textAlign: "start",
-      verticalAlign: "top",
       minWidth: "68px",
     },
     td: {
       textAlign: "start",
-      verticalAlign: "top",
     },
     tfoot: {
       tr: {

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

@@ -38,7 +38,10 @@ export function floatingBackground(
   }
 }
 
-type FloatingBorderState = Subset<State, "default" | "hover" | "active">;
+type FloatingBorderState = Subset<
+  State,
+  "default" | "hover" | "active" | "selected"
+>;
 export function floatingBorder(
   state: FloatingBorderState,
   props: StyleFunctionProps,
@@ -52,6 +55,19 @@ export function floatingBorder(
           "floating.outline.hover.dark",
         )(props),
       };
+    case "selected":
+      return {
+        outline: "1px solid",
+        outlineColor: mode("outline.focus.light", "outline.focus.dark")(props),
+      };
+    case "active":
+      return {
+        outline: "1px solid",
+        outlineColor: mode(
+          "floating.outline.active.light",
+          "floating.outline.active.dark",
+        )(props),
+      };
     default:
       return {
         outline: "1px solid",