@vygruppen/spor-react 4.0.2 → 4.0.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@4.0.2 build
+> @vygruppen/spor-react@4.0.3 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,15 +8,15 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-XT6QVKN5.mjs".
 "toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
 DTS Build start
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-MGJQOEU2.mjs".
-CJS dist/index.js 552.34 KB
-CJS ⚡️ Build success in 2656ms
 ESM dist/index.mjs                      2.10 KB
-ESM dist/CountryCodeSelect-WSPQNU6B.mjs 1.19 KB
-ESM dist/chunk-MGJQOEU2.mjs             441.05 KB
-ESM ⚡️ Build success in 2657ms
-DTS ⚡️ Build success in 13491ms
-DTS dist/index.d.ts  265.34 KB
-DTS dist/index.d.mts 265.34 KB
+ESM dist/CountryCodeSelect-RUH47EQH.mjs 1.19 KB
+ESM dist/chunk-XT6QVKN5.mjs             441.18 KB
+ESM ⚡️ Build success in 3115ms
+CJS dist/index.js 552.47 KB
+CJS ⚡️ Build success in 3116ms
+DTS ⚡️ Build success in 14728ms
+DTS dist/index.d.ts  265.43 KB
+DTS dist/index.d.mts 265.43 KB

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @vygruppen/spor-react
 
+## 4.0.3
+
+### Patch Changes
+
+- 1cd9939e: TimePicker: Make defaultValue=null a valid value
+- 8b4ab3ac: spinner: added darkmode for Darkspinner
+
 ## 4.0.2
 
 ### Patch Changes

package/dist/{CountryCodeSelect-WSPQNU6B.mjs → CountryCodeSelect-RUH47EQH.mjs}

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

package/dist/{chunk-MGJQOEU2.mjs → chunk-XT6QVKN5.mjs}

@@ -1,4 +1,4 @@
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, Flex, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, 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, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Divider as Divider$1, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, Flex, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, 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, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverCloseButton, ChakraProvider, HStack, 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, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
@@ -6,7 +6,7 @@ export { tokens10 as tokens };
 import * as React69 from 'react';
 import React69__default, { createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, useId, Suspense, useMemo, useContext, useCallback } from 'react';
 import { CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, CalendarOutline24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill24Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, DropdownRightFill18Icon, DropdownLeftFill18Icon, DropdownDownFill18Icon, DropdownDownFill24Icon, DropdownUpFill24Icon, ArrowRightFill18Icon, DropdownLeftFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, ErrorOutline24Icon, AltTransportOutline24Icon, WarningOutline24Icon, SuccessOutline24Icon, InformationOutline24Icon, TrainFill18Icon, TrainFill24Icon, TrainFill30Icon, ExpressBusFill18Icon, ExpressBusFill24Icon, ExpressBusFill30Icon, BusFill18Icon, BusFill24Icon, BusFill30Icon, FerryFill18Icon, FerryFill24Icon, FerryFill30Icon, SubwayFill18Icon, SubwayFill24Icon, SubwayFill30Icon, TramFill18Icon, TramFill24Icon, TramFill30Icon, AltTransportFill18Icon, AltTransportFill24Icon, AltTransportFill30Icon, WalkFill18Icon, WalkFill24Icon, WalkFill30Icon } from '@vygruppen/spor-icon-react';
-import { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData } from '@vygruppen/spor-loader';
+import { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, fullScreenLoaderBlackData, inlineLoaderLightData, spinnerLightData, spinnerDarkData } from '@vygruppen/spor-loader';
 import { useLottie } from 'lottie-react';
 import { useDateSegment, useDateField, useDatePicker, I18nProvider, usePopover, DismissButton, Overlay, useOverlayTrigger, useButton, useProgressBar, useCalendar, useDateRangePicker, useDialog, useFilter, useComboBox, useListBox, useOption, useListBoxSection, useSelect, HiddenSelect, useCalendarGrid, useRangeCalendar, useTimeField, useCalendarCell } from 'react-aria';
 import { motion } from 'framer-motion';
@@ -961,7 +961,9 @@ var DarkSpinner = ({
   maxWidth,
   ...props
 }) => {
-  return /* @__PURE__ */ React69__default.createElement(Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React69__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React69__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React69__default.createElement(Lottie, { animationData: spinnerDarkData }))), children && /* @__PURE__ */ React69__default.createElement(Box, { marginTop: 3, fontWeight: "bold" }, children));
+  const { colorMode } = useColorMode();
+  const spinnerData = colorMode === "dark" ? spinnerLightData : spinnerDarkData;
+  return /* @__PURE__ */ React69__default.createElement(Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React69__default.createElement(Box, { width, maxWidth }, /* @__PURE__ */ React69__default.createElement(ClientOnly, null, () => /* @__PURE__ */ React69__default.createElement(Lottie, { animationData: spinnerData }))), children && /* @__PURE__ */ React69__default.createElement(Box, { marginTop: 3, fontWeight: "bold" }, children));
 };
 var LightFullScreenLoader = ({
   width,
@@ -5111,7 +5113,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-WSPQNU6B.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-RUH47EQH.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });

package/dist/index.d.mts

@@ -493,9 +493,11 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
     value?: TimeValue;
     /** A default value, if any.
      *
-     * A `new Time(hours, minutes)` should be passed. Defaults to the current time if not provided.
+     * A `new Time(hours, minutes)` should be passed.
+     * Defaults to the current time if not provided.
+     * Can be set to null if you don't want a time to be selected by default.
      **/
-    defaultValue?: TimeValue;
+    defaultValue?: TimeValue | null;
     /** Callback for when the time changes */
     onChange?: (value: TimeValue) => void;
     /** The maxiumum number of minutes to move when the step buttons are used.
@@ -3445,7 +3447,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "base" | "green" | "light" | "accent" | "brand" | "dark" | undefined;
+                variant?: "base" | "green" | "light" | "dark" | "accent" | "brand" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("text" | "container" | "icon")[];

package/dist/index.d.ts

@@ -493,9 +493,11 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
     value?: TimeValue;
     /** A default value, if any.
      *
-     * A `new Time(hours, minutes)` should be passed. Defaults to the current time if not provided.
+     * A `new Time(hours, minutes)` should be passed.
+     * Defaults to the current time if not provided.
+     * Can be set to null if you don't want a time to be selected by default.
      **/
-    defaultValue?: TimeValue;
+    defaultValue?: TimeValue | null;
     /** Callback for when the time changes */
     onChange?: (value: TimeValue) => void;
     /** The maxiumum number of minutes to move when the step buttons are used.
@@ -3445,7 +3447,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: string | number | undefined;
-                variant?: "base" | "green" | "light" | "accent" | "brand" | "dark" | undefined;
+                variant?: "base" | "green" | "light" | "dark" | "accent" | "brand" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("text" | "container" | "icon")[];

package/dist/index.js

@@ -360,7 +360,9 @@ var init_DarkSpinner = __esm({
       maxWidth,
       ...props
     }) => {
-      return /* @__PURE__ */ React69__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React69__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React69__namespace.default.createElement(Lottie, { animationData: sporLoader.spinnerDarkData }))), children && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginTop: 3, fontWeight: "bold" }, children));
+      const { colorMode } = react.useColorMode();
+      const spinnerData = colorMode === "dark" ? sporLoader.spinnerLightData : sporLoader.spinnerDarkData;
+      return /* @__PURE__ */ React69__namespace.default.createElement(react.Center, { flexDirection: "column", ...props }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { width, maxWidth }, /* @__PURE__ */ React69__namespace.default.createElement(ClientOnly, null, () => /* @__PURE__ */ React69__namespace.default.createElement(Lottie, { animationData: spinnerData }))), children && /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginTop: 3, fontWeight: "bold" }, children));
     };
   }
 });

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, Portal, 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-MGJQOEU2.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, Portal, 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-XT6QVKN5.mjs';

package/package.json

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

package/src/datepicker/TimePicker.tsx

@@ -24,9 +24,11 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
   value?: TimeValue;
   /** A default value, if any.
    *
-   * A `new Time(hours, minutes)` should be passed. Defaults to the current time if not provided.
+   * A `new Time(hours, minutes)` should be passed.
+   * Defaults to the current time if not provided.
+   * Can be set to null if you don't want a time to be selected by default.
    **/
-  defaultValue?: TimeValue;
+  defaultValue?: TimeValue | null;
   /** Callback for when the time changes */
   onChange?: (value: TimeValue) => void;
   /** The maxiumum number of minutes to move when the step buttons are used.

package/src/loader/DarkSpinner.tsx

@@ -1,6 +1,6 @@
-import { spinnerDarkData } from "@vygruppen/spor-loader";
+import { spinnerDarkData, spinnerLightData } from "@vygruppen/spor-loader";
 import React from "react";
-import { Box, BoxProps, Center } from "..";
+import { Box, BoxProps, Center, useColorMode } from "..";
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
 
@@ -26,11 +26,13 @@ export const DarkSpinner = ({
   maxWidth,
   ...props
 }: DarkSpinnerProps) => {
+  const { colorMode } = useColorMode();
+  const spinnerData = colorMode === "dark" ? spinnerLightData : spinnerDarkData
   return (
     <Center flexDirection="column" {...props}>
       <Box width={width} maxWidth={maxWidth}>
         <ClientOnly>
-          {() => <Lottie animationData={spinnerDarkData} />}
+          {() => <Lottie animationData={spinnerData} />}
         </ClientOnly>
       </Box>
       {children && (