@vygruppen/spor-react 3.7.6 → 3.8.0

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, 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, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-LQEO65MM.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, 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, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-HL3ESNVB.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "3.7.6",
+  "version": "3.8.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -26,7 +26,7 @@
     "@vygruppen/spor-icon-react": "*",
     "@vygruppen/spor-loader": "*",
     "awesome-phonenumber": "^5.10.0",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^9.1.7",
     "lottie-react": "^2.3.1",
     "react-aria": "^3.27.0",
     "react-stately": "^3.25.0",

package/src/button/Button.tsx

@@ -126,7 +126,13 @@ export const Button = forwardRef<ButtonProps, "button">((props, ref) => {
           />
         </Center>
       )}
-      <Box visibility={isLoading ? "hidden" : "visible"}>{children}</Box>
+      <Box
+        visibility={isLoading ? "hidden" : "visible"}
+        whiteSpace="normal"
+        textAlign="left"
+      >
+        {children}
+      </Box>
     </ChakraButton>
   );
 });

package/src/button/FloatingActionButton.tsx

@@ -11,7 +11,16 @@ import React, { useEffect } from "react";
 const MotionBox = motion(Box);
 
 type FloatingActionButtonProps = BoxProps & {
-  variant?: "green" | "light" | "dark";
+  variant?:
+   /** @deprecated dark is deprecated please use accent*/ 
+    "green" 
+   /** @deprecated dark is deprecated please use accent*/
+  | "light"
+   /** @deprecated dark is deprecated please use accent*/ 
+  | "dark"
+  | "accent"
+  | "base"
+  | "brand"
   placement?: "bottom right" | "bottom left" | "top right" | "top left";
   icon: React.ReactNode;
   children: React.ReactNode;

package/src/datepicker/Calendar.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@chakra-ui/react";
+import { Box, ResponsiveValue } from "@chakra-ui/react";
 import { createCalendar, DateValue } from "@internationalized/date";
 import { useCalendarState } from "@react-stately/calendar";
 import React from "react";
@@ -13,8 +13,13 @@ import { createTexts, useTranslation } from "../i18n";
 
 type CalendarProps = ReactAriaCalendarProps<DateValue> & {
   showYearNavigation?: boolean;
+  variant: ResponsiveValue<
+   "base"
+  | "floating"
+  | "ghost"
+  >;
 };
-export function Calendar({ showYearNavigation, ...props }: CalendarProps) {
+export function Calendar({ showYearNavigation, variant, ...props }: CalendarProps) {
   const { t } = useTranslation();
   const locale = useCurrentLocale();
   const state = useCalendarState({
@@ -32,7 +37,7 @@ export function Calendar({ showYearNavigation, ...props }: CalendarProps) {
   return (
     <Box {...calendarProps} aria-label={ariaLabel}>
       <CalendarHeader state={state} showYearNavigation={showYearNavigation} />
-      <CalendarGrid state={state} />
+      <CalendarGrid variant={variant} state={state} />
     </Box>
   );
 }

package/src/datepicker/CalendarCell.tsx

@@ -1,4 +1,4 @@
-import { Box, useMultiStyleConfig } from "@chakra-ui/react";
+import { Box, ResponsiveValue, useMultiStyleConfig } from "@chakra-ui/react";
 import {
   CalendarDate,
   DateValue,
@@ -10,11 +10,16 @@ import { useCalendarCell } from "react-aria";
 import { CalendarState, RangeCalendarState } from "react-stately";
 
 type CalendarCellProps = {
+  variant: ResponsiveValue<
+    "base" 
+  | "floating"
+  | "ghost"
+  >;
   state: CalendarState | RangeCalendarState;
   date: CalendarDate;
   currentMonth: DateValue;
 };
-export function CalendarCell({ state, date, currentMonth }: CalendarCellProps) {
+export function CalendarCell({ state, date, currentMonth, variant }: CalendarCellProps) {
   const ref = useRef(null);
   const {
     cellProps,
@@ -26,7 +31,7 @@ export function CalendarCell({ state, date, currentMonth }: CalendarCellProps) {
   } = useCalendarCell({ date }, state, ref);
 
   const isOutsideMonth = !isSameMonth(currentMonth, date);
-  const styles = useMultiStyleConfig("Datepicker", {});
+  const styles = useMultiStyleConfig("Datepicker", {variant});
 
   const stateProps: Record<string, any> = {};
   if (isSelected) {

package/src/datepicker/CalendarGrid.tsx

@@ -6,7 +6,7 @@ import { Language, useTranslation } from "../i18n";
 import { Text } from "../typography";
 import { CalendarCell } from "./CalendarCell";
 import { useCurrentLocale } from "./utils";
-import { useMultiStyleConfig } from "@chakra-ui/react";
+import { ResponsiveValue, useMultiStyleConfig } from "@chakra-ui/react";
 
 const weekDays: Record<Language, string[]> = {
   nb: ["Ma", "Ti", "On", "To", "Fr", "Lø", "Sø"],
@@ -16,10 +16,15 @@ const weekDays: Record<Language, string[]> = {
 };
 
 type CalendarGridProps = AriaCalendarGridProps & {
+  variant: ResponsiveValue<
+   "base" 
+  | "floating"
+  | "ghost"
+  >;
   state: CalendarState | RangeCalendarState;
   offset?: { months?: number };
 };
-export function CalendarGrid({ state, offset = {} }: CalendarGridProps) {
+export function CalendarGrid({ state, variant ,offset = {} }: CalendarGridProps) {
   const { language } = useTranslation();
   const locale = useCurrentLocale();
   const startDate = state.visibleRange.start.add(offset);
@@ -35,7 +40,7 @@ export function CalendarGrid({ state, offset = {} }: CalendarGridProps) {
   // Get the number of weeks in the month so we can render the proper number of rows.
   const weeksInMonth = getWeeksInMonth(state.visibleRange.start, locale);
   const weeksInMonthRange = new Array(weeksInMonth).fill(0).map((_, i) => i);
-  const styles = useMultiStyleConfig("Datepicker", {});
+  const styles = useMultiStyleConfig("Datepicker", {variant});
 
   return (
     <table {...gridProps}>
@@ -63,6 +68,7 @@ export function CalendarGrid({ state, offset = {} }: CalendarGridProps) {
               .map((date, dayIndex) =>
                 date ? (
                   <CalendarCell
+                    variant={variant}
                     key={dayIndex}
                     state={state}
                     date={date}

package/src/datepicker/CalendarTriggerButton.tsx

@@ -4,17 +4,24 @@ import {
   useMultiStyleConfig,
   forwardRef,
   As,
+  ResponsiveValue,
 } from "@chakra-ui/react";
 import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
 import React, { useEffect } from "react";
 import { AriaButtonProps } from "react-aria";
 import { createTexts, useTranslation } from "..";
 
-type CalendarTriggerButtonProps = AriaButtonProps<"button">;
+type CalendarTriggerButtonProps = AriaButtonProps<"button"> & {
+  variant: ResponsiveValue<
+     "base" 
+    | "floating" 
+    | "ghost"
+  >;
+};
 export const CalendarTriggerButton = forwardRef<CalendarTriggerButtonProps, As>(
-  ({ ...buttonProps }, ref) => {
+  ({ variant, ...buttonProps }, ref) => {
     const { t } = useTranslation();
-    const styles = useMultiStyleConfig("Datepicker", {});
+    const styles = useMultiStyleConfig("Datepicker", {variant});
 
     const { onPress, ...filteredButtonProps } = buttonProps;
 

package/src/datepicker/DatePicker.tsx

@@ -17,7 +17,6 @@ import {
 } from "@chakra-ui/react";
 import { DateValue } from "@internationalized/date";
 import { useDatePickerState } from "@react-stately/datepicker";
-import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
 import React, { forwardRef, useRef } from "react";
 import {
   AriaDatePickerProps,
@@ -33,20 +32,22 @@ import { useCurrentLocale } from "./utils";
 
 type DatePickerProps = AriaDatePickerProps<DateValue> &
   Pick<BoxProps, "minHeight" | "width"> & {
-    variant: ResponsiveValue<"simple" | "with-trigger">;
+    variant: ResponsiveValue<"base" | "floating" | "ghost">;
     name?: string;
     showYearNavigation?: boolean;
     withPortal?: boolean;
   };
+
 /**
  * A date picker component.
  *
- * There are two versions of this component – a simple one, and one with a trigger button for showing the calendar. Use whatever fits your design.
+ * There are two versions of this component – a simple one, and one with a trigger button for showing the calendar. Use whatever fits your design.
  *
  * ```tsx
  * <DatePicker label="Dato" variant="simple" />
  * ```
  */
+
 export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
   (
     {
@@ -84,18 +85,11 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
       ref as React.MutableRefObject<HTMLDivElement>
     );
 
-    const styles = useMultiStyleConfig("Datepicker", {});
+    const styles = useMultiStyleConfig("Datepicker", { variant });
     const locale = useCurrentLocale();
 
-    const responsiveVariant =
-      useBreakpointValue(typeof variant === "string" ? [variant] : variant) ??
-      "simple";
-    const hasTrigger = responsiveVariant === "with-trigger";
-
     const onFieldClick = () => {
-      if (!hasTrigger) {
-        state.setOpen(true);
-      }
+      state.setOpen(true);
     };
 
     const popoverContent = (
@@ -105,6 +99,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           <FocusLock>
             <Calendar
               {...calendarProps}
+              variant={variant}
               showYearNavigation={showYearNavigation}
             />
           </FocusLock>
@@ -114,50 +109,35 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
 
     return (
       <I18nProvider locale={locale}>
-        <Box
-          position="relative"
-          display="inline-flex"
-          flexDirection="column"
-          width={width}
-        >
+        <Box position="relative" display="inline-flex" flexDirection="column" width={width}>
           <Popover
             {...dialogProps}
             isOpen={state.isOpen}
             onOpen={state.open}
             onClose={state.close}
           >
-            <InputGroup {...groupProps} display="inline-flex">
+            <InputGroup {...groupProps} display="inline-flex">             
               <PopoverAnchor>
                 <StyledField
-                  variant={responsiveVariant}
+                  variant={variant}
                   onClick={onFieldClick}
                   paddingX={3}
                   minHeight={minHeight}
                 >
-                  {!hasTrigger && (
-                    <CalendarOutline24Icon marginRight={2} alignSelf="center" />
-                  )}
+                  <PopoverTrigger>
+                    <CalendarTriggerButton variant={variant} ref={ref} {...buttonProps} />
+                  </PopoverTrigger>
                   <DateField
                     label={props.label}
                     labelProps={labelProps}
                     name={props.name}
-                    ref={hasTrigger ? undefined : ref}
                     {...fieldProps}
                   />
                 </StyledField>
               </PopoverAnchor>
-              {hasTrigger && (
-                <PopoverTrigger>
-                  <CalendarTriggerButton ref={ref} {...buttonProps} />
-                </PopoverTrigger>
-              )}
             </InputGroup>
-            <FormErrorMessage {...errorMessageProps}>
-              {errorMessage}
-            </FormErrorMessage>
-            {state.isOpen && !props.isDisabled && withPortal && (
-              <Portal>{popoverContent}</Portal>
-            )}
+            <FormErrorMessage {...errorMessageProps}>{errorMessage}</FormErrorMessage>
+            {state.isOpen && !props.isDisabled && withPortal && <Portal>{popoverContent}</Portal>}
             {state.isOpen && !props.isDisabled && !withPortal && popoverContent}
           </Popover>
         </Box>

package/src/datepicker/DateRangePicker.tsx

@@ -18,7 +18,6 @@ import {
 } from "@chakra-ui/react";
 import { DateValue } from "@internationalized/date";
 import { useDateRangePickerState } from "@react-stately/datepicker";
-import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
 import React, { useRef } from "react";
 import {
   AriaDateRangePickerProps,
@@ -37,7 +36,11 @@ type DateRangePickerProps = AriaDateRangePickerProps<DateValue> &
     startName?: string;
     endLabel?: string;
     endName?: string;
-    variant: ResponsiveValue<"simple" | "with-trigger">;
+    variant: ResponsiveValue<
+     "base" 
+    | "floating"
+    | "ghost"
+    >;
     withPortal?: boolean;
   };
 /**
@@ -75,17 +78,11 @@ export function DateRangePicker({
     calendarProps,
   } = useDateRangePicker(props, state, ref);
 
-  const responsiveVariant =
-    useBreakpointValue(typeof variant === "string" ? [variant] : variant) ??
-    "simple";
-
-  const styles = useMultiStyleConfig("Datepicker", {
-    variant: responsiveVariant,
-  });
+  const styles = useMultiStyleConfig("Datepicker", {variant});
   const locale = useCurrentLocale();
 
   const handleEnterClick = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !state.isOpen && responsiveVariant === "simple") {
+    if (e.key === "Enter" && !state.isOpen && variant === "base") {
       // Don't submit the form
       e.stopPropagation();
       state.setOpen(true);
@@ -93,19 +90,15 @@ export function DateRangePicker({
   };
 
   const onFieldClick = () => {
-    if (!hasTrigger) {
       state.setOpen(true);
-    }
   };
 
-  const hasTrigger = responsiveVariant === "with-trigger";
-
   const popoverContent = (
     <PopoverContent sx={styles.calendar} boxShadow="md" maxWidth="none">
       <PopoverArrow sx={styles.arrow} />
       <PopoverBody>
         <FocusLock>
-          <RangeCalendar {...calendarProps} />
+          <RangeCalendar variant={"base"} {...calendarProps} />
         </FocusLock>
       </PopoverBody>
     </PopoverContent>
@@ -130,22 +123,23 @@ export function DateRangePicker({
               <StyledField
                 alignItems="center"
                 paddingX={3}
-                variant={responsiveVariant}
+                variant={variant}
                 onClick={onFieldClick}
                 onKeyPress={handleEnterClick}
                 minHeight={minHeight}
               >
-                {!hasTrigger && (
-                  <CalendarOutline24Icon marginRight={2} alignSelf="center" />
+                {variant && (
+                  <PopoverTrigger>
+                    <CalendarTriggerButton paddingLeft={1} paddingRight={1} variant={variant} ref={ref} {...buttonProps} />
+                  </PopoverTrigger>
                 )}
                 <DateField
                   {...startFieldProps}
                   name={startName}
                   label={props.startLabel}
-                  ref={hasTrigger ? undefined : ref}
                   labelProps={labelProps}
                 />
-                <Box as="span" aria-hidden="true" paddingX="2">
+                 <Box as="span" aria-hidden="true" paddingRight="2">
                   –
                 </Box>
                 <DateField
@@ -156,11 +150,6 @@ export function DateRangePicker({
                 />
               </StyledField>
             </PopoverAnchor>
-            {hasTrigger && (
-              <PopoverTrigger>
-                <CalendarTriggerButton ref={ref} {...buttonProps} />
-              </PopoverTrigger>
-            )}
           </InputGroup>
           {state.isOpen && withPortal && <Portal>{popoverContent}</Portal>}
           {state.isOpen && !withPortal && popoverContent}

package/src/datepicker/DateTimeSegment.tsx

@@ -37,12 +37,10 @@ export const DateTimeSegment = forwardRef<HTMLDivElement, DateTimeSegmentProps>(
           ...segmentProps.style,
           boxSizing: "content-box",
         }}
-        paddingX="1px"
         textAlign="center"
         outline="none"
         borderRadius="xs"
         fontSize={["mobile.sm", "desktop.sm"]}
-        minWidth={isPaddable(segment.type) ? "1.3em" : "auto"}
         sx={styles.dateTimeSegment}
         _focus={{
           backgroundColor: "darkTeal",

package/src/datepicker/RangeCalendar.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@chakra-ui/react";
+import { Box, ResponsiveValue, useMultiStyleConfig } from "@chakra-ui/react";
 import { createCalendar, DateValue } from "@internationalized/date";
 import { useRangeCalendarState } from "@react-stately/calendar";
 import React, { useRef } from "react";
@@ -10,7 +10,10 @@ import { CalendarGrid } from "./CalendarGrid";
 import { CalendarHeader } from "./CalendarHeader";
 import { useCurrentLocale } from "./utils";
 
-type RangeCalendarProps = ReactAriaRangeCalendarProps<DateValue>;
+type RangeCalendarProps = ReactAriaRangeCalendarProps<DateValue> & {
+  variant: ResponsiveValue<"base" | "floating" | "ghost">;
+};
+
 export function RangeCalendar(props: RangeCalendarProps) {
   const locale = useCurrentLocale();
   const state = useRangeCalendarState({
@@ -23,12 +26,13 @@ export function RangeCalendar(props: RangeCalendarProps) {
   const ref = useRef(null);
   const { calendarProps, title } = useRangeCalendar(props, state, ref);
 
+
   return (
     <Box {...calendarProps} ref={ref}>
       <CalendarHeader state={state} title={title} />
       <Box display="flex" gap="8">
-        <CalendarGrid state={state} />
-        <CalendarGrid state={state} offset={{ months: 1 }} />
+        <CalendarGrid variant={props.variant} state={state} />
+        <CalendarGrid variant={props.variant} state={state} offset={{ months: 1 }} />
       </Box>
     </Box>
   );

package/src/datepicker/StyledField.tsx

@@ -2,6 +2,7 @@ import {
   As,
   Box,
   BoxProps,
+  ResponsiveValue,
   forwardRef,
   useFormControlContext,
   useMultiStyleConfig,
@@ -9,7 +10,11 @@ import {
 import React from "react";
 
 type StyledFieldProps = BoxProps & {
-  variant: "simple" | "with-trigger";
+  variant: ResponsiveValue< 
+  "base" 
+  | "floating" 
+  | "ghost" 
+>;
 };
 export const StyledField = forwardRef<StyledFieldProps, As>(
   ({ children, variant, ...otherProps }, ref) => {

package/src/datepicker/TimePicker.tsx

@@ -121,7 +121,7 @@ export const TimePicker = ({
   )}`;
   return (
     <StyledField
-      variant="simple"
+      variant="base"
       width="fit-content"
       paddingX={2}
       alignItems="center"