@vygruppen/spor-react 12.8.10 → 12.10.0

package/dist/index.d.cts

@@ -2995,8 +2995,18 @@ declare const ProgressIndicator: React__default.ForwardRefExoticComponent<BoxPro
 } & React__default.RefAttributes<HTMLDivElement>>;
 
 type SporProviderProps = Omit<ChakraProviderProps, "value"> & {
+    /**
+     * The current language of your application. Used for built-in microcopy and labels. Default is Norwegian (bokmål).
+     */
     language?: Language;
+    /**
+     * The theme to use for colors and design tokens. If not provided, the default Spor theme is used.
+     */
     theme?: SystemContext;
+    /**
+     * If true, enables system color mode. If false, the default theme is light.
+     */
+    enableSystemColorMode?: boolean;
 };
 /**
  * This component is used to provide the specified theme of colors and other
@@ -3035,7 +3045,7 @@ import { theme } from '../../../../apps/docs/app/features/portable-text/code-blo
  * );
  * ```
  */
-declare const SporProvider: ({ language, theme, children, }: SporProviderProps) => react_jsx_runtime.JSX.Element;
+declare const SporProvider: ({ language, theme, enableSystemColorMode, children, }: SporProviderProps) => react_jsx_runtime.JSX.Element;
 
 declare const stepperSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "title" | "closeButton" | "container" | "innerContainer" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle" | "backButton", {
     variant: {

package/dist/index.d.ts

@@ -2995,8 +2995,18 @@ declare const ProgressIndicator: React__default.ForwardRefExoticComponent<BoxPro
 } & React__default.RefAttributes<HTMLDivElement>>;
 
 type SporProviderProps = Omit<ChakraProviderProps, "value"> & {
+    /**
+     * The current language of your application. Used for built-in microcopy and labels. Default is Norwegian (bokmål).
+     */
     language?: Language;
+    /**
+     * The theme to use for colors and design tokens. If not provided, the default Spor theme is used.
+     */
     theme?: SystemContext;
+    /**
+     * If true, enables system color mode. If false, the default theme is light.
+     */
+    enableSystemColorMode?: boolean;
 };
 /**
  * This component is used to provide the specified theme of colors and other
@@ -3035,7 +3045,7 @@ import { theme } from '../../../../apps/docs/app/features/portable-text/code-blo
  * );
  * ```
  */
-declare const SporProvider: ({ language, theme, children, }: SporProviderProps) => react_jsx_runtime.JSX.Element;
+declare const SporProvider: ({ language, theme, enableSystemColorMode, children, }: SporProviderProps) => react_jsx_runtime.JSX.Element;
 
 declare const stepperSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "title" | "closeButton" | "container" | "innerContainer" | "stepCounter" | "stepContainer" | "stepButton" | "stepNumber" | "stepTitle" | "backButton", {
     variant: {

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, ClientOnly as ClientOnly$1, Field, defineStyle, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxCard, Fieldset as Fieldset$1, InputElement, Input as Input$1, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, List as List$1, Center, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, Tooltip as Tooltip$1, VisuallyHidden, defineConfig, CheckboxGroup as CheckboxGroup$1, ListItem, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
+import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Button as Button$1, Group, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Span, Flex, Breadcrumb as Breadcrumb$1, ClientOnly as ClientOnly$1, Field, defineStyle, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, useDialogContext, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxCard, Fieldset as Fieldset$1, InputElement, Input as Input$1, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, useSelectContext, Switch as Switch$1, Textarea as Textarea$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, List as List$1, Center, PopoverCloseTrigger, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineSlotRecipe, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, Tooltip as Tooltip$1, VisuallyHidden, defineConfig, CheckboxGroup as CheckboxGroup$1, ListItem, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
 export { AspectRatio, Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, ClientOnly, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Icon, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableColumnHeader, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
 import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, ServiceFill24Icon, QuestionFill24Icon, ErrorOutline24Icon, ErrorFill24Icon, AltTransportFill24Icon, WarningFill24Icon, SuccessFill24Icon, InformationFill24Icon, DropdownDownFill18Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon, SuccessFill18Icon } from '@vygruppen/spor-icon-react';
 import * as React27 from 'react';
@@ -15,6 +15,7 @@ import { useDateFieldState, useDatePickerState, useCalendarState, useRangeCalend
 export { Item, Section } from 'react-stately';
 import { GregorianCalendar, createCalendar, getLocalTimeZone, endOfMonth, getWeeksInMonth, isSameMonth, isToday, parseTime } from '@internationalized/date';
 export { Time } from '@internationalized/date';
+import { useSwipeable } from 'react-swipeable';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 import { Global } from '@emotion/react';
 import tokens23__default from '@vygruppen/spor-design-tokens';
@@ -2356,38 +2357,38 @@ var DrawerContent = forwardRef(
   (props, ref) => {
     const { children, portalled = true, portalRef, ...rest } = props;
     const { size, placement } = useRootDrawerProps();
+    const { setOpen } = useDialogContext();
+    const handlers = useSwipeable({
+      onSwiped: (e) => {
+        const shouldClose = placement === "bottom" && e.dir === "Down" || placement === "top" && e.dir === "Up" || placement === "end" && e.dir === "Right" || placement === "start" && e.dir === "Left";
+        if (shouldClose) {
+          setOpen(false);
+        }
+      },
+      swipeDuration: 250
+    });
     const sizeNotFull = size !== "full";
-    return /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(Drawer$1.Positioner, { children: /* @__PURE__ */ jsxs(Drawer$1.Content, { ref, ...rest, children: [
+    return /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(Drawer$1.Positioner, { children: /* @__PURE__ */ jsx(Box, { ...handlers, width: "100%", children: /* @__PURE__ */ jsxs(Drawer$1.Content, { ref, ...rest, children: [
       sizeNotFull && placement === "bottom" && /* @__PURE__ */ jsx(CloseDrawerLine, {}),
       children,
       sizeNotFull && placement === "top" && /* @__PURE__ */ jsx(CloseDrawerLine, {})
-    ] }) }) });
+    ] }) }) }) });
   }
 );
 DrawerContent.displayName = "DrawerContent";
 var CloseDrawerLine = forwardRef((props, ref) => {
-  const { t } = useTranslation();
   return /* @__PURE__ */ jsx(
-    Drawer$1.CloseTrigger,
+    Box,
     {
-      ...props,
-      ref,
-      position: "relative",
-      insetEnd: "unset",
-      "aria-label": t(texts12.close),
-      cursor: "pointer",
+      width: 7,
+      minHeight: 1,
       top: 0,
-      paddingY: 2,
-      children: /* @__PURE__ */ jsx(
-        Box,
-        {
-          width: 7,
-          height: 1,
-          backgroundColor: "silver",
-          borderRadius: "xs",
-          marginX: "auto"
-        }
-      )
+      marginY: 2,
+      marginX: "auto",
+      backgroundColor: "silver",
+      borderRadius: "xs",
+      ...props,
+      ref
     }
   );
 });
@@ -5113,9 +5114,10 @@ var texts25 = createTexts({
 var SporProvider = ({
   language = "nb" /* NorwegianBokmal */,
   theme = system,
+  enableSystemColorMode = true,
   children
 }) => {
-  return /* @__PURE__ */ jsx(LanguageProvider, { language, children: /* @__PURE__ */ jsx(ChakraProvider, { value: theme, children: /* @__PURE__ */ jsxs(ColorModeProvider, { children: [
+  return /* @__PURE__ */ jsx(LanguageProvider, { language, children: /* @__PURE__ */ jsx(ChakraProvider, { value: theme, children: /* @__PURE__ */ jsxs(ColorModeProvider, { enableSystem: enableSystemColorMode, children: [
     /* @__PURE__ */ jsx(Toaster, {}),
     /* @__PURE__ */ jsx(Global, { styles: fontFaces }),
     children
@@ -6884,6 +6886,7 @@ var choiceChipSlotRecipe = defineSlotRecipe({
     label: {
       display: "flex",
       alignItems: "center",
+      gap: "1",
       fontSize: "xs"
     }
   },