@vygruppen/spor-react 13.1.0 → 13.1.2

package/dist/index.d.cts

@@ -2,13 +2,13 @@ import * as React$1 from 'react';
 import React__default, { PropsWithChildren, ReactNode, ComponentProps, Ref } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { AccordionRootProps, RecipeVariantProps, Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, BreadcrumbRootProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, SystemStyleObject, RadioCard as RadioCard$1, SeparatorProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Box, ComboboxRootProps, Combobox as Combobox$1, ComboboxItemProps, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCardRootProps, Fieldset as Fieldset$1, Input as Input$1, TagRootProps, ListRootProps, MenuRootProps, MenuContentProps, MenuItemProps as MenuItemProps$1, MenuTriggerItemProps as MenuTriggerItemProps$1, MenuRadioItemGroupProps, MenuRadioItemProps, MenuItemGroupProps as MenuItemGroupProps$1, MenuCheckboxItemProps, MenuSeparatorProps, NativeSelectFieldProps, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, 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, TableColumnHeaderProps as TableColumnHeaderProps$1, TableBodyProps as TableBodyProps$1, Tooltip as Tooltip$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { AccordionRootProps, RecipeVariantProps, Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, BreadcrumbRootProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, SystemStyleObject, RadioCard as RadioCard$1, SeparatorProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Box, ComboboxRootProps, ComboboxItemProps, Combobox as Combobox$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCardRootProps, Fieldset as Fieldset$1, Input as Input$1, TagRootProps, ListRootProps, MenuRootProps, MenuCheckboxItemProps, MenuContentProps, MenuItemProps as MenuItemProps$1, MenuItemGroupProps as MenuItemGroupProps$1, MenuRadioItemProps, MenuRadioItemGroupProps, MenuSeparatorProps, MenuTriggerItemProps as MenuTriggerItemProps$1, NativeSelectFieldProps, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, SelectLabelProps, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, 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, TableBodyProps as TableBodyProps$1, TableColumnHeaderProps as TableColumnHeaderProps$1, Tooltip as Tooltip$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { AspectRatio, Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, ClientOnly, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Icon, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, SystemConfig, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnGroup, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, Wrap, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineSlotRecipe, defineStyle, mergeConfigs, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
 import { IconComponent } from '@vygruppen/spor-icon-react';
 import { CalendarDate, DateDuration, DateValue as DateValue$1 } from '@internationalized/date';
 export { Time } from '@internationalized/date';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { AriaButtonProps, AriaCalendarProps, DateValue, AriaRangeCalendarProps, AriaDatePickerProps, AriaDateRangePickerProps, RangeCalendarProps as RangeCalendarProps$1, AriaComboBoxProps, AriaListBoxProps } from 'react-aria';
+import { AriaCalendarProps, DateValue, AriaRangeCalendarProps, AriaButtonProps, AriaDatePickerProps, AriaDateRangePickerProps, RangeCalendarProps as RangeCalendarProps$1, AriaComboBoxProps, AriaListBoxProps } from 'react-aria';
 import { CalendarState as CalendarState$1, RangeCalendarState as RangeCalendarState$1, ListState, SelectState } from 'react-stately';
 export { Item, Section } from 'react-stately';
 import { ThemeProviderProps } from 'next-themes';
@@ -2028,10 +2028,11 @@ declare const MenuContent: ({ children, ref, ...props }: MenuContentProps & {
 }) => react_jsx_runtime.JSX.Element;
 type MenuTriggerProps = {
     icon?: ReactNode;
-} & Omit<ButtonProps, "variant" | "rightIcon" | "leftIcon"> & {
+    withChevron?: boolean;
+} & Omit<ButtonProps, "rightIcon" | "leftIcon"> & {
     ref?: Ref<HTMLButtonElement>;
 };
-declare const MenuTrigger: ({ icon, size, children, ref, ...props }: MenuTriggerProps) => react_jsx_runtime.JSX.Element;
+declare const MenuTrigger: ({ icon, size, children, ref, withChevron, ...props }: MenuTriggerProps) => react_jsx_runtime.JSX.Element;
 type MenuItemProps = {
     itemCommand?: string;
     leftIcon?: React.ReactNode;

package/dist/index.d.ts

@@ -2,13 +2,13 @@ import * as React$1 from 'react';
 import React__default, { PropsWithChildren, ReactNode, ComponentProps, Ref } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { AccordionRootProps, RecipeVariantProps, Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, BreadcrumbRootProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, SystemStyleObject, RadioCard as RadioCard$1, SeparatorProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Box, ComboboxRootProps, Combobox as Combobox$1, ComboboxItemProps, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCardRootProps, Fieldset as Fieldset$1, Input as Input$1, TagRootProps, ListRootProps, MenuRootProps, MenuContentProps, MenuItemProps as MenuItemProps$1, MenuTriggerItemProps as MenuTriggerItemProps$1, MenuRadioItemGroupProps, MenuRadioItemProps, MenuItemGroupProps as MenuItemGroupProps$1, MenuCheckboxItemProps, MenuSeparatorProps, NativeSelectFieldProps, RadioGroup as RadioGroup$1, SelectRootProps, SelectLabelProps, Select as Select$1, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, 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, TableColumnHeaderProps as TableColumnHeaderProps$1, TableBodyProps as TableBodyProps$1, Tooltip as Tooltip$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { AccordionRootProps, RecipeVariantProps, Accordion as Accordion$1, Alert as Alert$1, ConditionalValue, BreadcrumbRootProps, ButtonProps as ButtonProps$1, GroupProps, Clipboard as Clipboard$1, IconButtonProps as IconButtonProps$1, BoxProps, SystemStyleObject, RadioCard as RadioCard$1, SeparatorProps, Field as Field$1, PopoverRootProps, Dialog, Drawer as Drawer$1, Box, ComboboxRootProps, ComboboxItemProps, Combobox as Combobox$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, CheckboxCardRootProps, Fieldset as Fieldset$1, Input as Input$1, TagRootProps, ListRootProps, MenuRootProps, MenuCheckboxItemProps, MenuContentProps, MenuItemProps as MenuItemProps$1, MenuItemGroupProps as MenuItemGroupProps$1, MenuRadioItemProps, MenuRadioItemGroupProps, MenuSeparatorProps, MenuTriggerItemProps as MenuTriggerItemProps$1, NativeSelectFieldProps, RadioGroup as RadioGroup$1, SelectRootProps, Select as Select$1, SelectLabelProps, CollectionItem, Switch as Switch$1, TextareaProps as TextareaProps$1, 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, TableBodyProps as TableBodyProps$1, TableColumnHeaderProps as TableColumnHeaderProps$1, Tooltip as Tooltip$1, BadgeProps as BadgeProps$1, CodeProps, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { AspectRatio, Box, BoxProps, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, CenterProps, ClientOnly, Collapsible, CollapsibleRootProps, Container, ContainerProps, Em, Flex, FlexProps, For, FormatByte, FormatNumber, Grid, GridItem, GridItemProps, GridProps, HStack, Icon, Image, ImageProps, Kbd, LocaleProvider, Portal, PortalProps, Show, SimpleGrid, SimpleGridProps, Spacer, SpacerProps, Span, Stack, SystemConfig, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColumn, TableColumnGroup, TableColumnProps, TableFooter, TableFooterProps, TableHeader, TableHeaderProps, TableRoot, TableRootProps, TableRow, TableRowProps, UseDisclosureProps, VStack, VisuallyHidden, Wrap, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineSlotRecipe, defineStyle, mergeConfigs, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
 import { IconComponent } from '@vygruppen/spor-icon-react';
 import { CalendarDate, DateDuration, DateValue as DateValue$1 } from '@internationalized/date';
 export { Time } from '@internationalized/date';
 import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { AriaButtonProps, AriaCalendarProps, DateValue, AriaRangeCalendarProps, AriaDatePickerProps, AriaDateRangePickerProps, RangeCalendarProps as RangeCalendarProps$1, AriaComboBoxProps, AriaListBoxProps } from 'react-aria';
+import { AriaCalendarProps, DateValue, AriaRangeCalendarProps, AriaButtonProps, AriaDatePickerProps, AriaDateRangePickerProps, RangeCalendarProps as RangeCalendarProps$1, AriaComboBoxProps, AriaListBoxProps } from 'react-aria';
 import { CalendarState as CalendarState$1, RangeCalendarState as RangeCalendarState$1, ListState, SelectState } from 'react-stately';
 export { Item, Section } from 'react-stately';
 import { ThemeProviderProps } from 'next-themes';
@@ -2028,10 +2028,11 @@ declare const MenuContent: ({ children, ref, ...props }: MenuContentProps & {
 }) => react_jsx_runtime.JSX.Element;
 type MenuTriggerProps = {
     icon?: ReactNode;
-} & Omit<ButtonProps, "variant" | "rightIcon" | "leftIcon"> & {
+    withChevron?: boolean;
+} & Omit<ButtonProps, "rightIcon" | "leftIcon"> & {
     ref?: Ref<HTMLButtonElement>;
 };
-declare const MenuTrigger: ({ icon, size, children, ref, ...props }: MenuTriggerProps) => react_jsx_runtime.JSX.Element;
+declare const MenuTrigger: ({ icon, size, children, ref, withChevron, ...props }: MenuTriggerProps) => react_jsx_runtime.JSX.Element;
 type MenuItemProps = {
     itemCommand?: string;
     leftIcon?: React.ReactNode;

package/dist/index.mjs

@@ -4,7 +4,7 @@ import * as spor_icon_react_star from '@vygruppen/spor-icon-react';
 import { DropdownDownFill24Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, DropdownDownFill18Icon, ServiceFill24Icon, WarningFill24Icon, DropdownRightFill18Icon, CalendarOutline24Icon, DropdownLeftFill18Icon, ArrowLeftFill24Icon, ChangeDirectionOutline24Icon, CheckmarkFill18Icon, CloseOutline24Icon, SearchOutline24Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, ArrowUpFill18Icon, ArrowDownFill18Icon, ChangeDirectionFill18Icon, CopyOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill24Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, InformationFill24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, QuestionFill24Icon, ErrorOutline24Icon, SuccessFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon } from '@vygruppen/spor-icon-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React13 from 'react';
-import React13__default, { createContext, useContext, useId, cloneElement, isValidElement, useRef, useEffect, useImperativeHandle, useState, useLayoutEffect, useMemo } from 'react';
+import React13__default, { createContext, useContext, useId, isValidElement, cloneElement, useRef, useEffect, useImperativeHandle, useState, useLayoutEffect, useMemo } from 'react';
 import { spinnerColorData, inlineLoaderColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerLightData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData } from '@vygruppen/spor-loader';
 import { useLottie } from 'lottie-react';
 import { useInterval } from 'usehooks-ts';
@@ -692,7 +692,7 @@ var badgeRecipie = defineRecipe({
         }
       },
       green: {
-        backgroundColor: "surface.subtle",
+        backgroundColor: "surface.success",
         color: "text.success",
         "& svg": {
           color: "icon.success"
@@ -775,10 +775,19 @@ var badgeRecipie = defineRecipe({
       colorPalette: "blue",
       inverted: true,
       css: {
-        backgroundColor: "badge.blue.surface.inverted",
-        color: "badge.blue.text.inverted",
+        backgroundColor: {
+          _light: "darkBlue",
+          _dark: "lightBlue"
+        },
+        color: {
+          _light: "icyBlue",
+          _dark: "royal"
+        },
         "& svg": {
-          color: "badge.blue.icon.inverted"
+          color: {
+            _light: "royal",
+            _dark: "icyBlue"
+          }
         }
       }
     },
@@ -786,10 +795,19 @@ var badgeRecipie = defineRecipe({
       colorPalette: "green",
       inverted: true,
       css: {
-        backgroundColor: "badge.green.surface.inverted",
-        color: "badge.green.text.inverted",
+        backgroundColor: {
+          _light: "darkTeal",
+          _dark: "seaMist"
+        },
+        color: {
+          _light: "mint",
+          _dark: "jungle"
+        },
         "& svg": {
-          color: "badge.green.icon.inverted"
+          color: {
+            _light: "mint",
+            _dark: "jungle"
+          }
         }
       }
     },
@@ -797,10 +815,19 @@ var badgeRecipie = defineRecipe({
       colorPalette: "grey",
       inverted: true,
       css: {
-        backgroundColor: "badge.grey.surface.inverted",
-        color: "badge.grey.text.inverted",
+        backgroundColor: {
+          _light: "carbon",
+          _dark: "platinum"
+        },
+        color: {
+          _light: "white",
+          _dark: "darkGrey"
+        },
         "& svg": {
-          color: "badge.grey.icon.inverted"
+          color: {
+            _light: "white",
+            _dark: "darkGrey"
+          }
         }
       }
     },
@@ -809,10 +836,19 @@ var badgeRecipie = defineRecipe({
       colorPalette: "cream",
       inverted: true,
       css: {
-        backgroundColor: "badge.cream.surface.inverted",
-        color: "badge.cream.text.inverted",
+        backgroundColor: {
+          _light: "coffee",
+          _dark: "blonde"
+        },
+        color: {
+          _light: "cornsilk",
+          _dark: "coffee"
+        },
         "& svg": {
-          color: "badge.cream.icon.inverted"
+          color: {
+            _light: "cornsilk",
+            _dark: "coffee"
+          }
         }
       }
     },
@@ -820,10 +856,19 @@ var badgeRecipie = defineRecipe({
       colorPalette: "yellow",
       inverted: true,
       css: {
-        backgroundColor: "badge.yellow.surface.inverted",
-        color: "badge.yellow.text.inverted",
+        backgroundColor: {
+          _light: "bronze",
+          _dark: "banana"
+        },
+        color: {
+          _light: "cornsilk",
+          _dark: "coffee"
+        },
         "& svg": {
-          color: "badge.yellow.icon.inverted"
+          color: {
+            _light: "cornsilk",
+            _dark: "coffee"
+          }
         }
       }
     },
@@ -831,10 +876,19 @@ var badgeRecipie = defineRecipe({
       colorPalette: "orange",
       inverted: true,
       css: {
-        backgroundColor: "badge.orange.surface.inverted",
-        color: "badge.orange.text.inverted",
+        backgroundColor: {
+          _light: "wood",
+          _dark: "champagne"
+        },
+        color: {
+          _light: "bisque",
+          _dark: "wood"
+        },
         "& svg": {
-          color: "badge.orange.icon.inverted"
+          color: {
+            _light: "bisque",
+            _dark: "wood"
+          }
         }
       }
     },
@@ -842,10 +896,19 @@ var badgeRecipie = defineRecipe({
       colorPalette: "red",
       inverted: true,
       css: {
-        backgroundColor: "badge.red.surface.inverted",
-        color: "badge.red.text.inverted",
+        backgroundColor: {
+          _light: "burgundy",
+          _dark: "lightRed"
+        },
+        color: {
+          _light: "pink",
+          _dark: "maroon"
+        },
         "& svg": {
-          color: "badge.red.icon.inverted"
+          color: {
+            _light: "pink",
+            _dark: "maroon"
+          }
         }
       }
     },
@@ -854,10 +917,19 @@ var badgeRecipie = defineRecipe({
       colorPalette: "neutral",
       inverted: true,
       css: {
-        backgroundColor: "badge.surface.inverted",
-        color: "badge.text.inverted",
+        backgroundColor: {
+          _light: "ink",
+          _dark: "white"
+        },
+        color: {
+          _light: "white",
+          _dark: "darkGrey"
+        },
         "& svg": {
-          color: "badge.icon.inverted"
+          color: {
+            _light: "white",
+            _dark: "darkGrey"
+          }
         }
       }
     }
@@ -4105,6 +4177,7 @@ var MenuTrigger = ({
   size,
   children,
   ref,
+  withChevron = true,
   ...props
 }) => {
   const { variant } = useMenuContext();
@@ -4124,7 +4197,7 @@ var MenuTrigger = ({
       variant: getButtonVariant(),
       size,
       ...props,
-      rightIcon: /* @__PURE__ */ jsx(
+      rightIcon: withChevron && /* @__PURE__ */ jsx(
         ChevronIcon,
         {
           transform: open ? "rotate(180deg)" : void 0,
@@ -6466,10 +6539,20 @@ var createToast = ({
 var Toaster = () => {
   return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Toaster$1, { toaster, insetInline: { mdDown: "4" }, children: (toast) => {
     var _a6;
-    return /* @__PURE__ */ jsxs(Toast.Root, { width: { md: (_a6 = toast.meta) == null ? void 0 : _a6.width }, role: "alert", children: [
-      /* @__PURE__ */ jsx(AlertIcon, { variant: toast.type }),
-      /* @__PURE__ */ jsx(Stack, { gap: "1", flex: "1", maxWidth: "100%", children: /* @__PURE__ */ jsx(Toast.Description, { children: toast.description }) })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      Toast.Root,
+      {
+        width: { md: (_a6 = toast.meta) == null ? void 0 : _a6.width },
+        border: "sm",
+        borderColor: `outline.${toast.type}`,
+        boxShadow: "sm",
+        role: "alert",
+        children: [
+          /* @__PURE__ */ jsx(AlertIcon, { variant: toast.type }),
+          /* @__PURE__ */ jsx(Stack, { gap: "1", flex: "1", maxWidth: "100%", children: /* @__PURE__ */ jsx(Toast.Description, { children: toast.description }) })
+        ]
+      }
+    );
   } }) });
 };
 var SporProvider = ({