@vygruppen/spor-react 12.4.5 → 12.4.7

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.4.5 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.4.7 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -10,18 +10,18 @@ CLI Target: node16
 CJS Build start
 ESM Build start
 DTS Build start
-ESM dist/index.mjs           290.10 KB
+ESM dist/index.mjs           290.18 KB
 ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs.map       622.03 KB
+ESM dist/index.mjs.map       622.39 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM ⚡️ Build success in 2664ms
+ESM ⚡️ Build success in 2865ms
 CJS dist/icons/index.js     380.00 B
-CJS dist/index.js           310.44 KB
+CJS dist/index.js           310.62 KB
 CJS dist/icons/index.js.map 157.00 B
-CJS dist/index.js.map       622.03 KB
-CJS ⚡️ Build success in 2665ms
-DTS ⚡️ Build success in 29697ms
+CJS dist/index.js.map       622.39 KB
+CJS ⚡️ Build success in 2866ms
+DTS ⚡️ Build success in 28808ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        126.17 KB
+DTS dist/index.d.ts        126.45 KB
 DTS dist/icons/index.d.mts 44.00 B
-DTS dist/index.d.mts       126.17 KB
+DTS dist/index.d.mts       126.45 KB

package/.turbo/turbo-postinstall.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.4.5 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.4.7 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @vygruppen/spor-react
 
+## 12.4.7
+
+### Patch Changes
+
+- 5b6e4fa: Export ClientOnly and fix types for ProgressBar
+- 727a771: Fix variant type in timepicker
+
+## 12.4.6
+
+### Patch Changes
+
+- 15b6def: TravelTag, InfoTag, LineIcon: Size is no longer required and variants have been added to recipe
+- e249e04: Accordion: Fixed styling on different variants
+
 ## 12.4.5
 
 ### Patch Changes

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import React__default, { PropsWithChildren, ReactNode } from 'react';
 import * as _chakra_ui_react from '@chakra-ui/react';
 import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, CheckboxCardRootProps, CheckboxCard, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
-export { Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnHeader, TableColumnHeaderProps, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
+export { Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, ClientOnly, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnHeader, TableColumnHeaderProps, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconComponent } from '@vygruppen/spor-icon-react';
 import { ThemeProviderProps } from 'next-themes';
@@ -672,6 +672,11 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & FieldBasePr
     minuteInterval?: number;
     /** Whether or not the field is disabled */
     disabled?: boolean;
+    /**
+     * The variant of the time picker.
+     * Defaults to "core".
+     */
+    variant?: "core" | "floating" | "ghost";
 };
 /** A time picker component.
  *
@@ -1855,13 +1860,17 @@ declare const StaticCard: React$1.ForwardRefExoticComponent<{
 
 declare const infoTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" | "title" | "description" | "iconContainer" | "container" | "textContainer" | "walk", {
     variant: {
-        walk: {
-            iconContainer: {
-                icon: {
-                    color: string;
-                };
-            };
-        };
+        walk: {};
+        ferry: {};
+        subway: {};
+        tram: {};
+        "local-train": {};
+        "region-train": {};
+        "region-express-train": {};
+        "long-distance-train": {};
+        "airport-express-train": {};
+        "vy-bus": {};
+        "local-bus": {};
     };
     size: {
         sm: {
@@ -1906,7 +1915,7 @@ declare const infoTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" |
 type Variant$1 = "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "alt-transport" | "walk";
 type Size = "sm" | "md" | "lg";
 type TagProps = VariantProps$1 & {
-    size: Size;
+    size?: Size;
     title: string;
     description?: string;
 };
@@ -2078,7 +2087,7 @@ type DefaultVariantProps = {
 };
 type VariantProps = DefaultVariantProps | CustomVariantProps;
 type LineIconProps = Exclude<BoxProps, "variant"> & VariantProps & PropsWithChildren<LineIconVariantProps> & {
-    size: TagProps["size"];
+    size?: TagProps["size"];
     foregroundColor?: string;
     backgroundColor?: string;
     disabled?: boolean;
@@ -2478,7 +2487,7 @@ declare const progressBarRecipe: _chakra_ui_react.SlotRecipeDefinition<"descript
 
 type ProgressBarVariants = RecipeVariantProps<typeof progressBarRecipe>;
 type ProgressBarProps = BoxProps & UseProgressProps & PropsWithChildren<ProgressBarVariants> & {
-    children: React__default.ReactNode;
+    children?: React__default.ReactNode;
     /** The height of the progress bar.
      * Defaults to .5rem
      **/
@@ -2489,12 +2498,12 @@ type ProgressBarProps = BoxProps & UseProgressProps & PropsWithChildren<Progress
      **/
     width?: BoxProps["width"];
     /** Pass if no label is passed to the label */
-    "aria-label": string;
+    "aria-label"?: string;
     /** Optional text shown below the loader.
      *
      * If you pass an array of strings, the text will rotate every 5 seconds. If you want to change the delay, pass the delay in milliseconds to the `labelRotationDelay` prop.
      */
-    label: string | string[];
+    label?: string | string[];
     /** The number of milliseconds a label is shown, if an array of strings is passed to the `label` prop.
      *
      * Defaults to 5000 (5 seconds).
@@ -2535,7 +2544,7 @@ type ProgressBarProps = BoxProps & UseProgressProps & PropsWithChildren<Progress
 declare const ProgressBar: React__default.ForwardRefExoticComponent<BoxProps & UseProgressProps & {
     children?: React__default.ReactNode | undefined;
 } & {
-    children: React__default.ReactNode;
+    children?: React__default.ReactNode;
     /** The height of the progress bar.
      * Defaults to .5rem
      **/
@@ -2546,12 +2555,12 @@ declare const ProgressBar: React__default.ForwardRefExoticComponent<BoxProps & U
      **/
     width?: BoxProps["width"];
     /** Pass if no label is passed to the label */
-    "aria-label": string;
+    "aria-label"?: string;
     /** Optional text shown below the loader.
      *
      * If you pass an array of strings, the text will rotate every 5 seconds. If you want to change the delay, pass the delay in milliseconds to the `labelRotationDelay` prop.
      */
-    label: string | string[];
+    label?: string | string[];
     /** The number of milliseconds a label is shown, if an array of strings is passed to the `label` prop.
      *
      * Defaults to 5000 (5 seconds).

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import React__default, { PropsWithChildren, ReactNode } from 'react';
 import * as _chakra_ui_react from '@chakra-ui/react';
 import { Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, Breadcrumb as Breadcrumb$1, RecipeVariantProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Checkbox as Checkbox$1, CheckboxGroupProps as CheckboxGroupProps$1, CheckboxCardRootProps, CheckboxCard, Fieldset as Fieldset$1, InputProps as InputProps$1, ListRootProps, NativeSelectFieldProps, NativeSelect as NativeSelect$1, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, RadioCard as RadioCard$1, SeparatorProps, LinkProps as LinkProps$1, List as List$1, UseProgressProps, SkeletonProps as SkeletonProps$1, CircleProps, Popover as Popover$1, Pagination as Pagination$1, ChakraProviderProps, SystemContext, TabsRootProps, Tabs as Tabs$1, TableRootProps, Table as Table$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
-export { Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnHeader, TableColumnHeaderProps, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
+export { Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, ClientOnly, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnHeader, TableColumnHeaderProps, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconComponent } from '@vygruppen/spor-icon-react';
 import { ThemeProviderProps } from 'next-themes';
@@ -672,6 +672,11 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & FieldBasePr
     minuteInterval?: number;
     /** Whether or not the field is disabled */
     disabled?: boolean;
+    /**
+     * The variant of the time picker.
+     * Defaults to "core".
+     */
+    variant?: "core" | "floating" | "ghost";
 };
 /** A time picker component.
  *
@@ -1855,13 +1860,17 @@ declare const StaticCard: React$1.ForwardRefExoticComponent<{
 
 declare const infoTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" | "title" | "description" | "iconContainer" | "container" | "textContainer" | "walk", {
     variant: {
-        walk: {
-            iconContainer: {
-                icon: {
-                    color: string;
-                };
-            };
-        };
+        walk: {};
+        ferry: {};
+        subway: {};
+        tram: {};
+        "local-train": {};
+        "region-train": {};
+        "region-express-train": {};
+        "long-distance-train": {};
+        "airport-express-train": {};
+        "vy-bus": {};
+        "local-bus": {};
     };
     size: {
         sm: {
@@ -1906,7 +1915,7 @@ declare const infoTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" |
 type Variant$1 = "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "alt-transport" | "walk";
 type Size = "sm" | "md" | "lg";
 type TagProps = VariantProps$1 & {
-    size: Size;
+    size?: Size;
     title: string;
     description?: string;
 };
@@ -2078,7 +2087,7 @@ type DefaultVariantProps = {
 };
 type VariantProps = DefaultVariantProps | CustomVariantProps;
 type LineIconProps = Exclude<BoxProps, "variant"> & VariantProps & PropsWithChildren<LineIconVariantProps> & {
-    size: TagProps["size"];
+    size?: TagProps["size"];
     foregroundColor?: string;
     backgroundColor?: string;
     disabled?: boolean;
@@ -2478,7 +2487,7 @@ declare const progressBarRecipe: _chakra_ui_react.SlotRecipeDefinition<"descript
 
 type ProgressBarVariants = RecipeVariantProps<typeof progressBarRecipe>;
 type ProgressBarProps = BoxProps & UseProgressProps & PropsWithChildren<ProgressBarVariants> & {
-    children: React__default.ReactNode;
+    children?: React__default.ReactNode;
     /** The height of the progress bar.
      * Defaults to .5rem
      **/
@@ -2489,12 +2498,12 @@ type ProgressBarProps = BoxProps & UseProgressProps & PropsWithChildren<Progress
      **/
     width?: BoxProps["width"];
     /** Pass if no label is passed to the label */
-    "aria-label": string;
+    "aria-label"?: string;
     /** Optional text shown below the loader.
      *
      * If you pass an array of strings, the text will rotate every 5 seconds. If you want to change the delay, pass the delay in milliseconds to the `labelRotationDelay` prop.
      */
-    label: string | string[];
+    label?: string | string[];
     /** The number of milliseconds a label is shown, if an array of strings is passed to the `label` prop.
      *
      * Defaults to 5000 (5 seconds).
@@ -2535,7 +2544,7 @@ type ProgressBarProps = BoxProps & UseProgressProps & PropsWithChildren<Progress
 declare const ProgressBar: React__default.ForwardRefExoticComponent<BoxProps & UseProgressProps & {
     children?: React__default.ReactNode | undefined;
 } & {
-    children: React__default.ReactNode;
+    children?: React__default.ReactNode;
     /** The height of the progress bar.
      * Defaults to .5rem
      **/
@@ -2546,12 +2555,12 @@ declare const ProgressBar: React__default.ForwardRefExoticComponent<BoxProps & U
      **/
     width?: BoxProps["width"];
     /** Pass if no label is passed to the label */
-    "aria-label": string;
+    "aria-label"?: string;
     /** Optional text shown below the loader.
      *
      * If you pass an array of strings, the text will rotate every 5 seconds. If you want to change the delay, pass the delay in milliseconds to the `labelRotationDelay` prop.
      */
-    label: string | string[];
+    label?: string | string[];
     /** The number of milliseconds a label is shown, if an array of strings is passed to the `label` prop.
      *
      * Defaults to 5000 (5 seconds).

package/dist/index.js

@@ -4784,7 +4784,6 @@ var InfoTag = ({
 }) => {
   const recipe = react.useSlotRecipe({ key: "infoTag" });
   const styles = recipe({
-    variant,
     size,
     ...customProps
   });
@@ -6845,23 +6844,23 @@ var accordionSlotRecipe = react.defineSlotRecipe({
           },
           "&:hover": {
             outlineWidth: tokens23__namespace.default.size.stroke.md,
-            outlineColor: "core.outline.hover",
-            outline: "solid",
+            outlineColor: "core.outline",
+            outline: "2px solid",
             outlineOffset: 0
           },
           "&:active": {
             backgroundColor: "core.surface.active",
             outlineWidth: tokens23__namespace.default.size.stroke.sm,
-            outlineColor: "core.outline.active",
-            outline: "solid"
+            outline: "none"
           }
         }
       },
       floating: {
         item: {
-          outline: "solid",
+          outline: "1px solid",
           outlineWidth: tokens23__namespace.default.size.stroke.sm,
-          outlineColor: "core.outline"
+          boxShadow: "sm",
+          outlineColor: "floating.outline"
         },
         itemTrigger: {
           _expanded: {
@@ -6869,15 +6868,14 @@ var accordionSlotRecipe = react.defineSlotRecipe({
           },
           "&:hover": {
             outlineWidth: tokens23__namespace.default.size.stroke.md,
+            outline: "1px solid",
             outlineColor: "floating.outline.hover",
-            outline: "solid",
-            outlineOffset: 0
+            outlineOffset: 1
           },
           "&:active": {
             backgroundColor: "floating.surface.active",
             outlineWidth: tokens23__namespace.default.size.stroke.sm,
-            outlineColor: "floating.outline.active",
-            outline: "solid"
+            outline: "none"
           }
         }
       }
@@ -8249,13 +8247,17 @@ var infoTagSlotRecipe = react.defineSlotRecipe({
   },
   variants: {
     variant: {
-      walk: {
-        iconContainer: {
-          icon: {
-            color: "text"
-          }
-        }
-      }
+      walk: {},
+      ferry: {},
+      subway: {},
+      tram: {},
+      "local-train": {},
+      "region-train": {},
+      "region-express-train": {},
+      "long-distance-train": {},
+      "airport-express-train": {},
+      "vy-bus": {},
+      "local-bus": {}
     },
     size: {
       ...(_a4 = travelTagSlotRecipe.variants) == null ? void 0 : _a4.size,
@@ -10544,6 +10546,10 @@ Object.defineProperty(exports, "Center", {
   enumerable: true,
   get: function () { return react.Center; }
 });
+Object.defineProperty(exports, "ClientOnly", {
+  enumerable: true,
+  get: function () { return react.ClientOnly; }
+});
 Object.defineProperty(exports, "Collapsible", {
   enumerable: true,
   get: function () { return react.Collapsible; }