@vygruppen/spor-react 12.8.10 → 12.10.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.8.10",
+  "version": "12.10.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,7 +46,7 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "4.0.7",
+    "@vygruppen/spor-design-tokens": "4.0.8",
     "@vygruppen/spor-icon-react": "4.2.1",
     "@vygruppen/spor-loader": "0.7.0"
   },
@@ -67,8 +67,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/eslint-config": "1.1.1",
-    "@vygruppen/tsconfig": "0.1.1"
+    "@vygruppen/tsconfig": "0.1.1",
+    "@vygruppen/eslint-config": "1.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/dialog/Drawer.tsx

@@ -7,6 +7,7 @@ import {
   Grid,
   GridItem,
   Portal,
+  useDialogContext,
 } from "@chakra-ui/react";
 import {
   ArrowLeftFill24Icon,
@@ -21,6 +22,7 @@ import {
   DrawerFullScreenHeaderProps,
   DrawerProps,
 } from "./types";
+import { useSwipeable } from "react-swipeable";
 
 /**
  * A drawer is a panel that slides in from the side of the screen. It is used to display additional content without taking up too much space.
@@ -56,15 +58,31 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
   (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 (
       <Portal disabled={!portalled} container={portalRef}>
         <ChakraDrawer.Positioner>
-          <ChakraDrawer.Content ref={ref} {...rest}>
-            {sizeNotFull && placement === "bottom" && <CloseDrawerLine />}
-            {children}
-            {sizeNotFull && placement === "top" && <CloseDrawerLine />}
-          </ChakraDrawer.Content>
+          <Box {...handlers} width="100%">
+            <ChakraDrawer.Content ref={ref} {...rest}>
+              {sizeNotFull && placement === "bottom" && <CloseDrawerLine />}
+              {children}
+              {sizeNotFull && placement === "top" && <CloseDrawerLine />}
+            </ChakraDrawer.Content>
+          </Box>
         </ChakraDrawer.Positioner>
       </Portal>
     );
@@ -73,26 +91,18 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
 DrawerContent.displayName = "DrawerContent";
 
 export const CloseDrawerLine = forwardRef<HTMLButtonElement>((props, ref) => {
-  const { t } = useTranslation();
   return (
-    <ChakraDrawer.CloseTrigger
+    <Box
+      width={7}
+      minHeight={1}
+      top={0}
+      marginY={2}
+      marginX="auto"
+      backgroundColor="silver"
+      borderRadius="xs"
       {...props}
       ref={ref}
-      position="relative"
-      insetEnd="unset"
-      aria-label={t(texts.close)}
-      cursor="pointer"
-      top={0}
-      paddingY={2}
-    >
-      <Box
-        width={7}
-        height={1}
-        backgroundColor="silver"
-        borderRadius="xs"
-        marginX="auto"
-      />
-    </ChakraDrawer.CloseTrigger>
+    />
   );
 });
 CloseDrawerLine.displayName = "CloseDrawerLine";

package/src/provider/SporProvider.tsx

@@ -12,8 +12,18 @@ import { fontFaces } from "../theme/brand";
 import { Toaster } from "../toast/toast";
 
 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;
 };
 
 /**
@@ -56,12 +66,13 @@ import { theme } from '../../../../apps/docs/app/features/portable-text/code-blo
 export const SporProvider = ({
   language = Language.NorwegianBokmal,
   theme = system,
+  enableSystemColorMode = true,
   children,
 }: SporProviderProps) => {
   return (
     <LanguageProvider language={language}>
       <ChakraProvider value={theme}>
-        <ColorModeProvider>
+        <ColorModeProvider enableSystem={enableSystemColorMode}>
           <Toaster />
           <Global styles={fontFaces} />
 

package/src/theme/slot-recipes/choice-chip.ts

@@ -68,7 +68,7 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
     label: {
       display: "flex",
       alignItems: "center",
-
+      gap: "1",
       fontSize: "xs",
     },
   },