@vygruppen/spor-react 12.14.1 → 12.15.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.14.1 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.15.0 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-CJS dist/index.cjs           320.36 KB
 CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       637.96 KB
+CJS dist/index.cjs           321.40 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2498ms
-ESM dist/index.mjs           298.78 KB
+CJS dist/index.cjs.map       639.88 KB
+CJS ⚡️ Build success in 2787ms
+ESM dist/index.mjs           299.67 KB
 ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs.map       637.96 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM ⚡️ Build success in 2498ms
-DTS ⚡️ Build success in 19261ms
+ESM dist/index.mjs.map       639.88 KB
+ESM ⚡️ Build success in 2787ms
+DTS ⚡️ Build success in 19000ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        157.08 KB
+DTS dist/index.d.ts        157.14 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       157.08 KB
+DTS dist/index.d.cts       157.14 KB

package/.turbo/turbo-postinstall.log

@@ -1,8 +1,8 @@
 
-> @vygruppen/spor-react@12.14.1 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.15.0 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
-[dotenv@17.2.2] injecting env (0) from .env -- tip: ⚙️  suppress all logs with { quiet: true }
+[dotenv@17.2.2] injecting env (0) from .env -- tip: ⚙️  enable debug logging with { debug: true }
 ┌  Chakra CLI ⚡️
 [?25l│
 ◒  Generating conditions types...

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @vygruppen/spor-react
 
+## 12.15.0
+
+### Minor Changes
+
+- a07b8f6: Prevent calendar cell button from performing form submittion by setting type to button.
+
+### Patch Changes
+
+- 181fdcd: Update design of Alerts to support darkmode.
+- b422895: Add props showText to DrawerCloseTrigger and hideHandle to DrawerContent
+
+## 12.14.2
+
+### Patch Changes
+
+- 02bdd99: Fix issue where switch without label has empty space on right
+- 2b611fa: Fix layout on full screen drawer header.
+
 ## 12.14.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -962,46 +962,56 @@ var useScrollDirection = () => {
   return scrollDirection;
 };
 var AlertIcon = React27.forwardRef(
-  ({ variant, customIcon }, ref) => {
+  ({ variant, customIcon: CustomAlertIcon }, ref) => {
     const { t } = useTranslation();
-    const Icon3 = customIcon ?? getIcon(variant);
     return /* @__PURE__ */ jsxRuntime.jsx(
       react.Box,
       {
-        as: Icon3,
+        asChild: true,
         ref,
         "aria-label": t(texts5[variant]),
-        color: customIcon ? `alert.${variant}.icon` : void 0
+        children: CustomAlertIcon ? /* @__PURE__ */ jsxRuntime.jsx(CustomAlertIcon, { color: `alert.${variant}.icon` }) : /* @__PURE__ */ jsxRuntime.jsx(BaseAlertIcon, { variant })
       }
     );
   }
 );
 AlertIcon.displayName = "AlertIcon";
-var getIcon = (variant) => {
+var BaseAlertIcon = ({ variant }) => {
+  const css = {
+    "& path:first-of-type": {
+      fill: `alert.${variant}.icon`
+    },
+    "& path:not(:first-of-type)": {
+      fill: `alert.${variant}.surface`
+    }
+  };
   switch (variant) {
     case "info": {
-      return sporIconReact.InformationFill24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.InformationFill24Icon, { css });
     }
     case "success": {
-      return sporIconReact.SuccessFill24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.SuccessFill24Icon, { css });
     }
     case "important": {
-      return sporIconReact.WarningFill24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.WarningFill24Icon, {});
     }
     case "alt": {
-      return sporIconReact.AltTransportFill24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.AltTransportFill24Icon, { css });
     }
     case "error": {
-      return sporIconReact.ErrorFill24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.ErrorFill24Icon, { css });
     }
     case "error-secondary": {
-      return sporIconReact.ErrorOutline24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.ErrorOutline24Icon, { css });
     }
     case "neutral": {
-      return sporIconReact.QuestionFill24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.QuestionFill24Icon, { css });
     }
     case "service": {
-      return sporIconReact.ServiceFill24Icon;
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.ServiceFill24Icon, {});
+    }
+    default: {
+      return /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.InformationFill24Icon, { css });
     }
   }
 };
@@ -1406,6 +1416,20 @@ var FieldErrorText = React27__namespace.forwardRef((props, ref) => {
 });
 FieldErrorText.displayName = "FieldErrorText";
 var FieldLabel = react.Field.Label;
+
+// src/util/slugify.tsx
+function slugify(text, maxLength = 50) {
+  if (!text) {
+    return text;
+  }
+  if (Array.isArray(text)) {
+    text = text.join(" ");
+  }
+  if (maxLength < 1) {
+    throw new Error("The maxLength parameter must be a positive number");
+  }
+  return text.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[\u00C6\u00E6]/g, "ae").replaceAll(/[\u00D8\u00F8]/g, "oe").replaceAll(/[\u00C5\u00E5]/g, "aa").toLowerCase().replaceAll(/\s+/g, "-").replaceAll(/[^\w-]+/g, "").replaceAll(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").slice(0, Math.max(0, maxLength));
+}
 function CalendarCell({
   state,
   date: date$1,
@@ -1450,9 +1474,9 @@ function CalendarCell({
     );
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "td", ...cellProps, textAlign: "center", css: styles.cell, children: /* @__PURE__ */ jsxRuntime.jsx(
-    react.Box,
+    react.chakra.button,
     {
-      as: "button",
+      type: "button",
       ...buttonProps,
       ...stateProps,
       ref,
@@ -2159,20 +2183,6 @@ function DateRangePicker({
     ] })
   ] }) });
 }
-
-// src/util/slugify.tsx
-function slugify(text, maxLength = 50) {
-  if (!text) {
-    return text;
-  }
-  if (Array.isArray(text)) {
-    text = text.join(" ");
-  }
-  if (maxLength < 1) {
-    throw new Error("The maxLength parameter must be a positive number");
-  }
-  return text.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[\u00C6\u00E6]/g, "ae").replaceAll(/[\u00D8\u00F8]/g, "oe").replaceAll(/[\u00C5\u00E5]/g, "aa").toLowerCase().replaceAll(/\s+/g, "-").replaceAll(/[^\w-]+/g, "").replaceAll(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").slice(0, Math.max(0, maxLength));
-}
 var TimeField = ({ state, ...props }) => {
   const ref = React27.useRef(null);
   const { labelProps, fieldProps } = reactAria.useTimeField(props, state, ref);
@@ -2375,12 +2385,32 @@ var DialogTitle = react.Dialog.Title;
 var DialogDescription = react.Dialog.Description;
 var DialogTrigger = react.Dialog.Trigger;
 var DialogActionTrigger = react.Dialog.ActionTrigger;
+var ResponsiveButton = ({ label, icon, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { display: ["none", "flex"], leftIcon: icon, ...props, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      IconButton,
+      {
+        display: ["flex", "none"],
+        "aria-label": label,
+        icon,
+        ...props
+      }
+    )
+  ] });
+};
 var [RootDrawerProvider, useRootDrawerProps] = react.createContext({
   name: "RootDrawerProvider"
 });
 var DrawerContent = React27.forwardRef(
   (props, ref) => {
-    const { children, portalled = true, portalRef, ...rest } = props;
+    const {
+      children,
+      portalled = true,
+      portalRef,
+      hideHandle = false,
+      ...rest
+    } = props;
     const { size, placement } = useRootDrawerProps();
     const { setOpen } = react.useDialogContext();
     const handlers = reactSwipeable.useSwipeable({
@@ -2393,10 +2423,11 @@ var DrawerContent = React27.forwardRef(
       swipeDuration: 250
     });
     const sizeNotFull = size !== "full";
+    const showHandle = !hideHandle;
     return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsxRuntime.jsx(react.Drawer.Positioner, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { ...handlers, width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(react.Drawer.Content, { ref, ...rest, children: [
-      sizeNotFull && placement === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(CloseDrawerLine, {}),
+      showHandle && sizeNotFull && placement === "bottom" && /* @__PURE__ */ jsxRuntime.jsx(CloseDrawerLine, {}),
       children,
-      sizeNotFull && placement === "top" && /* @__PURE__ */ jsxRuntime.jsx(CloseDrawerLine, {})
+      showHandle && sizeNotFull && placement === "top" && /* @__PURE__ */ jsxRuntime.jsx(CloseDrawerLine, {})
     ] }) }) }) });
   }
 );
@@ -2419,22 +2450,40 @@ var CloseDrawerLine = React27.forwardRef((props, ref) => {
 });
 CloseDrawerLine.displayName = "CloseDrawerLine";
 var DrawerCloseTrigger = React27.forwardRef(function DrawerCloseTrigger2(props, ref) {
+  const { showText = false, ...rest } = props;
   const { size } = useRootDrawerProps();
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Drawer.CloseTrigger, { ref, ...props, asChild: true, children: size === "full" ? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", leftIcon: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.CloseFill24Icon, {}), children: t(texts12.close) }) : /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "md" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Drawer.CloseTrigger, { ref, ...rest, asChild: true, children: showText || size === "full" ? /* @__PURE__ */ jsxRuntime.jsx(
+    ResponsiveButton,
+    {
+      variant: "ghost",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.CloseFill24Icon, {}),
+      label: t(texts12.close)
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "md" }) });
 });
 var DrawerBackTrigger = React27.forwardRef((props, ref) => {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Drawer.CloseTrigger, { asChild: true, ...props, ref, top: "0", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", leftIcon: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.ArrowLeftFill24Icon, {}), children: t(texts12.back) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Drawer.CloseTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ResponsiveButton,
+    {
+      variant: "ghost",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.ArrowLeftFill24Icon, {}),
+      label: t(texts12.back)
+    }
+  ) });
 });
 DrawerBackTrigger.displayName = "DrawerBackTrigger";
 var DrawerFullScreenHeader = React27.forwardRef((props, ref) => {
   const { backTrigger = true, closeTrigger = true, children } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Drawer.Header, { ...props, ref, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(react.Grid, { templateColumns: "1fr auto 1fr", height: "auto", paddingX: "8", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.GridItem, { width: "full", alignSelf: "center", children: backTrigger && /* @__PURE__ */ jsxRuntime.jsx(DrawerBackTrigger, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.GridItem, { width: "full", alignSelf: "end", asChild: true, children: children && /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { children }) }),
-    closeTrigger && /* @__PURE__ */ jsxRuntime.jsx(react.GridItem, { width: "full", alignSelf: "end", children: /* @__PURE__ */ jsxRuntime.jsx(DrawerCloseTrigger, { justifySelf: "end", top: "0" }) })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Drawer.Header, { ...props, ref, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Box, { children: backTrigger && /* @__PURE__ */ jsxRuntime.jsx(DrawerBackTrigger, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DrawerTitle, { children }),
+    /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { children: [
+      " ",
+      closeTrigger && /* @__PURE__ */ jsxRuntime.jsx(DrawerCloseTrigger, {})
+    ] })
+  ] });
 });
 DrawerFullScreenHeader.displayName = "DrawerFullScreenHeader";
 var Drawer = (props) => {
@@ -3691,7 +3740,7 @@ var Switch = React27.forwardRef(
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(react.Switch.HiddenInput, { ref }),
               /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Control, { css: styles.control, children: /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Thumb, {}) }),
-              /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Label, { children: label })
+              label && /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Label, { children: label })
             ]
           }
         )
@@ -7681,7 +7730,8 @@ var drawerSlotRecipe = react.defineSlotRecipe({
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      paddingX: ["3", null, null, "5"],
+      paddingX: ["2", null, null, "5"],
+      gap: "1",
       paddingBottom: "1"
     },
     body: {