@vygruppen/spor-react 8.3.0 → 9.0.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, 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, 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, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, 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-42ZK3WXN.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, 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, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, 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-BWLVKMWU.mjs';

package/package.json

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

package/src/breadcrumb/Breadcrumb.tsx

@@ -3,12 +3,14 @@ import {
   BreadcrumbItem as ChakraBreadcrumbItem,
   BreadcrumbLink as ChakraBreadcrumbLink,
   BreadcrumbProps as ChakraBreadcrumbProps,
+  useColorModeValue,
 } from "@chakra-ui/react";
 import { DropdownRightFill18Icon } from "@vygruppen/spor-icon-react";
 import React from "react";
-import { useColorModeValue } from "@chakra-ui/react";
 
-type BreadcrumbProps = ChakraBreadcrumbProps;
+type BreadcrumbProps = Omit<ChakraBreadcrumbProps, "variant"> & {
+  variant?: "base" | "ghost";
+};
 /**
  * A breadcrumb component.
  *

package/src/datepicker/DateRangePicker.tsx

@@ -121,6 +121,7 @@ export function DateRangePicker({
           isOpen={state.isOpen}
           onOpen={state.open}
           onClose={state.close}
+          flip={false}
         >
           <InputGroup {...groupProps} width="auto" display="inline-flex">
             <PopoverAnchor>

package/src/input/ChoiceChip.tsx

@@ -19,14 +19,14 @@ export type ChoiceChipProps = {
     default: React.ReactNode;
     checked: React.ReactNode;
   };
-  size?: "sm" | "md" | "lg" | "xl";
+  size?: "xs" | "sm" | "md" | "lg";
   chipType?: "icon" | "choice" | "filter";
   variant?: "base" | "accent" | "floating";
 };
 /**
  * Choice chips are checkboxes that look like selectable buttons.
  *
- * Choice chips are available in four different sizes - `sm`, `md`, `lg` and `xl`.
+ * Choice chips are available in four different sizes - `xs`, `sm`, `md` and `lg`.
  *
  * ```tsx
  * <Stack flexDirection="row">
@@ -59,7 +59,7 @@ export const ChoiceChip = forwardRef((props: ChoiceChipProps, ref) => {
     children,
     icon,
     isDisabled,
-    size = "md",
+    size = "sm",
     chipType = "choice",
     variant = "base",
   } = props;

package/src/input/NumericStepper.tsx

@@ -1,8 +1,8 @@
 import {
   chakra,
-  useColorModeValue,
   useControllableState,
   useFormControl,
+  useMultiStyleConfig,
 } from "@chakra-ui/react";
 import React from "react";
 import {
@@ -13,7 +13,6 @@ import {
   createTexts,
   useTranslation,
 } from "..";
-import { getBoxShadowString } from "../theme/utils/box-shadow-utils";
 
 type NumericStepperProps = {
   /** The name of the input field */
@@ -76,19 +75,17 @@ export function NumericStepper({
   ...boxProps
 }: NumericStepperProps) {
   const { t } = useTranslation();
+  const styles = useMultiStyleConfig("NumericStepper", {});
   const [value, onChange] = useControllableState<number>({
     value: valueProp,
     onChange: onChangeProp,
     defaultValue,
   });
   const formControlProps = useFormControl({ id: idProp, isDisabled });
-  const textColor = useColorModeValue("darkGrey", "white");
-  const backgroundColor = useColorModeValue("white", "darkGrey");
-  const focusColor = useColorModeValue("greenHaze", "azure");
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
 
   return (
-    <Flex alignItems="center" {...boxProps}>
+    <Flex __css={styles.container} {...boxProps}>
       <VerySmallButton
         icon={<SubtractIcon stepLabel={clampedStepSize} />}
         aria-label={t(texts.decrementButtonAriaLabel(clampedStepSize))}
@@ -106,38 +103,11 @@ export function NumericStepper({
           value={value}
           {...formControlProps}
           id={!showZero && value === 0 ? undefined : formControlProps.id}
-          fontSize="sm"
-          fontWeight="bold"
+          sx={styles.input}
           width={`${Math.max(value.toString().length + 1, 3)}ch`}
-          marginX={1}
-          paddingX={1}
-          borderRadius="xs"
-          textAlign="center"
-          backgroundColor={backgroundColor}
-          color={textColor}
-          transition="box-shadow .1s ease-out"
           visibility={!showZero && value === 0 ? "hidden" : "visible"}
           aria-live="assertive"
           aria-label={value.toString()}
-          _hover={{
-            boxShadow: getBoxShadowString({
-              borderColor: "currentColor",
-              borderWidth: 1,
-            }),
-            _disabled: {
-              boxShadow: "none",
-            },
-          }}
-          _disabled={{
-            opacity: 0.5,
-          }}
-          _focus={{
-            outline: "none",
-            boxShadow: getBoxShadowString({
-              borderColor: focusColor,
-              borderWidth: 1,
-            }),
-          }}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             const numericInput = Number(e.target.value);
             if (Number.isNaN(numericInput)) {
@@ -148,14 +118,7 @@ export function NumericStepper({
         />
       ) : (
         <chakra.text
-          fontSize="sm"
-          fontWeight="bold"
-          width="4ch"
-          marginX={1}
-          paddingX={1}
-          textAlign="center"
-          color={textColor}
-          transition="box-shadow .1s ease-out"
+          sx={styles.text}
           visibility={!showZero && value === 0 ? "hidden" : "visible"}
           aria-label={value.toString()}
         >
@@ -190,14 +153,9 @@ type VerySmallButtonProps = {
 };
 /** Internal override for extra small icon buttons */
 const VerySmallButton = (props: VerySmallButtonProps) => {
+  const styles = useMultiStyleConfig("NumericStepper", {});
   return (
-    <IconButton
-      variant="primary"
-      size="xs"
-      minWidth="24px"
-      minHeight="24px"
-      {...props}
-    />
+    <IconButton variant="primary" size="xs" sx={styles.button} {...props} />
   );
 };
 

package/src/input/PasswordInput.tsx

@@ -43,6 +43,8 @@ export const PasswordInput = forwardRef<PasswordInputProps, "input">(
           <Button
             variant="ghost"
             type="button"
+            fontWeight="normal"
+            size="sm"
             onClick={onToggle}
             borderRadius="sm"
             marginRight={1}

package/src/input/PhoneNumberInput.tsx

@@ -106,7 +106,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
             });
           }}
           position="relative"
-          left="-1px" // Makes the borders overlap
+          left="1px" // Makes the borders overlap
         />
       </AttachedInputs>
     );

package/src/input/Switch.tsx

@@ -5,10 +5,7 @@ import {
 } from "@chakra-ui/react";
 import React from "react";
 
-export type SwitchProps = Exclude<
-  ChakraSwitchProps,
-  "colorScheme" | "variant"
-> & {
+export type SwitchProps = Omit<ChakraSwitchProps, "colorScheme" | "variant"> & {
   size?: "sm" | "md" | "lg";
 };
 
@@ -24,17 +21,17 @@ export type SwitchProps = Exclude<
  * </FormControl>
  * ```
  *
- * Switches are available in three different sizes - `sm`, `md` and `lg`. There are also two variants - `solid` and `outline`.
+ * Switches are available in three different sizes - `sm`, `md` and `lg`.
  *
  * ```tsx
  * <FormControl>
  *   <FormLabel>Enable alerts?</FormLabel>
- *   <Switch variant="outline" size="lg" />
+ *   <Switch size="sm" />
  * </FormControl>
  * ```
  */
 export const Switch = forwardRef<SwitchProps, "input">(
   ({ size = "md", ...props }: SwitchProps, ref) => {
-    return <ChakraSwitch variant="solid" size={size} {...props} ref={ref} />;
+    return <ChakraSwitch size={size} {...props} ref={ref} />;
   },
 );

package/src/loader/ProgressBar.tsx

@@ -1,4 +1,4 @@
-import { Box, BoxProps, Flex, Text } from "@chakra-ui/react";
+import { Box, BoxProps, Text, useMultiStyleConfig } from "@chakra-ui/react";
 import React from "react";
 import { useProgressBar } from "react-aria";
 import { createTexts, useTranslation } from "..";
@@ -79,37 +79,20 @@ export const ProgressBar = ({
     value,
     "aria-label": ariaLabel || t(texts.label(value)),
   });
+  const styles = useMultiStyleConfig("ProgressBar", {});
   return (
     <>
       <Box
         {...progressBarProps}
         title={t(texts.label(value))}
-        minWidth="100px"
+        __css={styles.container}
         {...rest}
       >
-        <Flex
-          backgroundColor="coralGreen"
-          borderRadius="sm"
-          width={width}
-          justifyContent="flex-start"
-          marginX="auto"
-        >
-          <Box
-            backgroundColor="greenHaze"
-            borderRadius="sm"
-            height={height}
-            width={`${value}%`}
-            maxWidth="100%"
-            transition="width .2s ease-out"
-          />
-        </Flex>
+        <Box width={width} __css={styles.background}>
+          <Box __css={styles.progress} height={height} width={`${value}%`} />
+        </Box>
         {currentLoadingText && (
-          <Text
-            textAlign="center"
-            marginTop={2}
-            fontWeight="bold"
-            {...labelProps}
-          >
+          <Text sx={styles.description} {...labelProps}>
             {currentLoadingText}
           </Text>
         )}

package/src/tab/Tabs.tsx

@@ -9,11 +9,10 @@ export type TabsProps = Exclude<
   ChakraTabsProps,
   "colorScheme" | "variant" | "orientation" | "size"
 > & {
-  colorScheme: "base" | "accent";
-  /** Defaults to `md` */
-  size?: "sm" | "md" | "lg" | "xl";
-  /** Defaults to `round` */
-  variant?: "square" | "round";
+  /** Defaults to `base` */
+  variant: "base" | "accent";
+  /** Defaults to `sm` */
+  size?: "xs" | "sm" | "md" | "lg";
 };
 export const Tabs = forwardRef<TabsProps, "div">((props, ref) => {
   return <ChakraTabs {...props} ref={ref} />;

package/src/theme/components/accordion.ts

@@ -1,38 +1,32 @@
 import { accordionAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-import {
-  baseBackground,
-  floatingBackground,
-  ghostBackground,
-} from "../utils/background-utils";
-import { baseBorder, floatingBorder } from "../utils/border-utils";
-import { focusVisibleStyles } from "../utils/focus-util";
-import { baseText } from "../utils/text-utils";
+import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
+import { floatingBackground, floatingBorder } from "../utils/floating-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
+import { ghostBackground } from "../utils/ghost-utils";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 const config = helpers.defineMultiStyleConfig({
   baseStyle: (props) => ({
     container: {
-      border: "none",
       borderRadius: "sm",
     },
     button: {
       transitionProperty:
         "background-color, color, border-radius, box-shadow, opacity",
-      transitionDuration: "normal",
-      border: "none",
+      transitionDuration: "fast",
       borderRadius: "sm",
-      borderColor: "osloGrey",
       display: "flex",
       justifyContent: "space-between",
       ...baseText("default", props),
       textAlign: "left",
       fontFamily: "body",
       fontWeight: "bold",
+      outlineOffset: "-2px",
       ...focusVisibleStyles(props),
       _disabled: {
+        pointerEvents: "none",
         opacity: 0.4,
-        cursor: "not-allowed",
       },
     },
     panel: {
@@ -46,7 +40,6 @@ const config = helpers.defineMultiStyleConfig({
   variants: {
     ghost: (props) => ({
       button: {
-        boxShadow: "none",
         _hover: {
           ...ghostBackground("hover", props),
         },
@@ -65,6 +58,7 @@ const config = helpers.defineMultiStyleConfig({
         },
         _hover: {
           ...baseBorder("hover", props),
+          outlineOffset: 0,
         },
         _active: {
           ...baseBackground("active", props),
@@ -76,14 +70,16 @@ const config = helpers.defineMultiStyleConfig({
       container: {
         ...floatingBackground("default", props),
         ...floatingBorder("default", props),
+        boxShadow: "sm",
       },
       button: {
         _expanded: {
           borderBottomRadius: "none",
         },
         _hover: {
-          ...ghostBackground("hover", props),
-          ...floatingBorder("default", props),
+          ...floatingBackground("hover", props),
+          ...floatingBorder("hover", props),
+          outlineOffset: 1,
         },
         _active: {
           ...ghostBackground("active", props),

package/src/theme/components/alert-expandable.ts

@@ -1,6 +1,5 @@
 import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
-import { getBoxShadowString } from "../utils/box-shadow-utils";
 
 const parts = anatomy("alertExpandable").parts("container");
 const helpers = createMultiStyleConfigHelpers(parts.keys);
@@ -11,19 +10,21 @@ const config = helpers.defineMultiStyleConfig({
       paddingX: 3,
       paddingY: 2,
       fontSize: "inherit",
+      transitionProperty: "outline, border-radius",
+      transitionDuration: "fast",
       _expanded: {
         borderBottomRadius: "none",
       },
+      _hover: {
+        outline: "2px solid",
+      },
     },
   },
   variants: {
     info: {
       container: {
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "sky",
-            borderWidth: 2,
-          }),
+          outlineColor: "sky",
         },
         _active: {
           backgroundColor: "icyBlue",
@@ -33,10 +34,7 @@ const config = helpers.defineMultiStyleConfig({
     success: {
       container: {
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "blueGreen",
-            borderWidth: 2,
-          }),
+          outlineColor: "blueGreen",
         },
         _active: {
           backgroundColor: "mint",
@@ -46,10 +44,7 @@ const config = helpers.defineMultiStyleConfig({
     warning: {
       container: {
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "sunshine",
-            borderWidth: 2,
-          }),
+          outlineColor: "sunshine",
         },
         _active: {
           backgroundColor: "cornSilk",
@@ -59,10 +54,7 @@ const config = helpers.defineMultiStyleConfig({
     "alt-transport": {
       container: {
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "golden",
-            borderWidth: 2,
-          }),
+          outlineColor: "golden",
         },
         _active: {
           backgroundColor: "sunshine",
@@ -72,10 +64,7 @@ const config = helpers.defineMultiStyleConfig({
     error: {
       container: {
         _hover: {
-          boxShadow: getBoxShadowString({
-            borderColor: "apricot",
-            borderWidth: 2,
-          }),
+          outlineColor: "apricot",
         },
         _active: {
           backgroundColor: "pink",

package/src/theme/components/breadcrumb.ts

@@ -4,7 +4,8 @@ import {
   defineStyle,
 } from "@chakra-ui/styled-system";
 import { mode } from "@chakra-ui/theme-tools";
-import { focusVisibleStyles } from "../utils/focus-util";
+import { baseBackground, baseBorder } from "../utils/base-utils";
+import { focusVisibleStyles } from "../utils/focus-utils";
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
@@ -21,12 +22,12 @@ const baseStyleLink = defineStyle((props) => ({
   "&:not([aria-current=page])": {
     cursor: "pointer",
     _hover: {
-      backgroundColor: mode("seaMist", "pine")(props),
+      ...baseBackground("hover", props),
     },
-    ...focusVisibleStyles(props),
     _active: {
-      backgroundColor: mode("mint", "whiteAlpha.200")(props),
+      ...baseBackground("active", props),
     },
+    ...focusVisibleStyles(props),
   },
 }));
 
@@ -39,5 +40,59 @@ const baseStyle = definePartsStyle((props) => ({
 }));
 
 export default defineMultiStyleConfig({
-  baseStyle,
+  baseStyle: definePartsStyle((props) => ({
+    link: {
+      transitionProperty: "common",
+      transitionDuration: "fast",
+      transitionTimingFunction: "ease-out",
+      color: "inherit",
+      textDecoration: "none",
+      textStyle: "xs",
+      paddingX: 0.5,
+      borderRadius: "xs",
+      "&:not([aria-current=page])": {
+        cursor: "pointer",
+        ...focusVisibleStyles(props),
+      },
+    },
+    list: {
+      flexWrap: "wrap",
+      alignItems: "flex-start",
+    },
+  })),
+  variants: {
+    base: (props) => ({
+      link: {
+        "&:not([aria-current=page])": {
+          _hover: {
+            ...baseBorder("default", props),
+          },
+          _active: {
+            ...baseBackground("active", props),
+          },
+        },
+      },
+    }),
+    ghost: (props) => ({
+      link: {
+        "&:not([aria-current=page])": {
+          _hover: {
+            backgroundColor: mode(
+              "ghost.surface.hover.light",
+              "ghost.surface.hover.dark",
+            )(props),
+          },
+          _active: {
+            backgroundColor: mode(
+              "ghost.surface.active.light",
+              "ghost.surface.active.dark",
+            )(props),
+          },
+        },
+      },
+    }),
+  },
+  defaultProps: {
+    variant: "base",
+  },
 });