@vygruppen/spor-react 12.14.2 → 12.15.0

package/dist/index.d.cts

@@ -916,9 +916,12 @@ declare const DrawerContent: React$1.ForwardRefExoticComponent<Drawer$1.ContentP
     children: React.ReactNode;
     portalled?: boolean;
     portalRef?: React.RefObject<HTMLElement>;
+    hideHandle?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const CloseDrawerLine: React$1.ForwardRefExoticComponent<React$1.RefAttributes<HTMLButtonElement>>;
-declare const DrawerCloseTrigger: React$1.ForwardRefExoticComponent<Drawer$1.CloseTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DrawerCloseTrigger: React$1.ForwardRefExoticComponent<Drawer$1.CloseTriggerProps & {
+    showText?: boolean;
+} & React$1.RefAttributes<HTMLButtonElement>>;
 declare const DrawerBackTrigger: React$1.ForwardRefExoticComponent<Drawer$1.CloseTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const DrawerFullScreenHeader: React$1.ForwardRefExoticComponent<Omit<Drawer$1.HeaderProps, "title"> & {
     backTrigger?: boolean;

package/dist/index.d.ts

@@ -916,9 +916,12 @@ declare const DrawerContent: React$1.ForwardRefExoticComponent<Drawer$1.ContentP
     children: React.ReactNode;
     portalled?: boolean;
     portalRef?: React.RefObject<HTMLElement>;
+    hideHandle?: boolean;
 } & React$1.RefAttributes<HTMLDivElement>>;
 declare const CloseDrawerLine: React$1.ForwardRefExoticComponent<React$1.RefAttributes<HTMLButtonElement>>;
-declare const DrawerCloseTrigger: React$1.ForwardRefExoticComponent<Drawer$1.CloseTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DrawerCloseTrigger: React$1.ForwardRefExoticComponent<Drawer$1.CloseTriggerProps & {
+    showText?: boolean;
+} & React$1.RefAttributes<HTMLButtonElement>>;
 declare const DrawerBackTrigger: React$1.ForwardRefExoticComponent<Drawer$1.CloseTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 declare const DrawerFullScreenHeader: React$1.ForwardRefExoticComponent<Omit<Drawer$1.HeaderProps, "title"> & {
     backTrigger?: boolean;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 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, 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 { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, InformationFill24Icon, ServiceFill24Icon, QuestionFill24Icon, ErrorOutline24Icon, ErrorFill24Icon, AltTransportFill24Icon, WarningFill24Icon, SuccessFill24Icon, 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';
 import React27__default, { forwardRef, createContext, useId, cloneElement, useEffect, useRef, useState, isValidElement, useMemo, useLayoutEffect, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -942,46 +942,56 @@ var useScrollDirection = () => {
   return scrollDirection;
 };
 var AlertIcon = forwardRef(
-  ({ variant, customIcon }, ref) => {
+  ({ variant, customIcon: CustomAlertIcon }, ref) => {
     const { t } = useTranslation();
-    const Icon3 = customIcon ?? getIcon(variant);
     return /* @__PURE__ */ jsx(
       Box,
       {
-        as: Icon3,
+        asChild: true,
         ref,
         "aria-label": t(texts5[variant]),
-        color: customIcon ? `alert.${variant}.icon` : void 0
+        children: CustomAlertIcon ? /* @__PURE__ */ jsx(CustomAlertIcon, { color: `alert.${variant}.icon` }) : /* @__PURE__ */ 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 InformationFill24Icon;
+      return /* @__PURE__ */ jsx(InformationFill24Icon, { css });
     }
     case "success": {
-      return SuccessFill24Icon;
+      return /* @__PURE__ */ jsx(SuccessFill24Icon, { css });
     }
     case "important": {
-      return WarningFill24Icon;
+      return /* @__PURE__ */ jsx(WarningFill24Icon, {});
     }
     case "alt": {
-      return AltTransportFill24Icon;
+      return /* @__PURE__ */ jsx(AltTransportFill24Icon, { css });
     }
     case "error": {
-      return ErrorFill24Icon;
+      return /* @__PURE__ */ jsx(ErrorFill24Icon, { css });
     }
     case "error-secondary": {
-      return ErrorOutline24Icon;
+      return /* @__PURE__ */ jsx(ErrorOutline24Icon, { css });
     }
     case "neutral": {
-      return QuestionFill24Icon;
+      return /* @__PURE__ */ jsx(QuestionFill24Icon, { css });
     }
     case "service": {
-      return ServiceFill24Icon;
+      return /* @__PURE__ */ jsx(ServiceFill24Icon, {});
+    }
+    default: {
+      return /* @__PURE__ */ jsx(InformationFill24Icon, { css });
     }
   }
 };
@@ -1386,6 +1396,20 @@ var FieldErrorText = React27.forwardRef((props, ref) => {
 });
 FieldErrorText.displayName = "FieldErrorText";
 var FieldLabel = 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,
@@ -1430,9 +1454,9 @@ function CalendarCell({
     );
   }, []);
   return /* @__PURE__ */ jsx(Box, { as: "td", ...cellProps, textAlign: "center", css: styles.cell, children: /* @__PURE__ */ jsx(
-    Box,
+    chakra.button,
     {
-      as: "button",
+      type: "button",
       ...buttonProps,
       ...stateProps,
       ref,
@@ -2139,20 +2163,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 = useRef(null);
   const { labelProps, fieldProps } = useTimeField(props, state, ref);
@@ -2374,7 +2384,13 @@ var [RootDrawerProvider, useRootDrawerProps] = createContext$1({
 });
 var DrawerContent = 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 } = useDialogContext();
     const handlers = useSwipeable({
@@ -2387,10 +2403,11 @@ var DrawerContent = forwardRef(
       swipeDuration: 250
     });
     const sizeNotFull = size !== "full";
+    const showHandle = !hideHandle;
     return /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(Drawer$1.Positioner, { asChild: true, children: /* @__PURE__ */ jsx(Box, { ...handlers, width: "100%", children: /* @__PURE__ */ jsxs(Drawer$1.Content, { ref, ...rest, children: [
-      sizeNotFull && placement === "bottom" && /* @__PURE__ */ jsx(CloseDrawerLine, {}),
+      showHandle && sizeNotFull && placement === "bottom" && /* @__PURE__ */ jsx(CloseDrawerLine, {}),
       children,
-      sizeNotFull && placement === "top" && /* @__PURE__ */ jsx(CloseDrawerLine, {})
+      showHandle && sizeNotFull && placement === "top" && /* @__PURE__ */ jsx(CloseDrawerLine, {})
     ] }) }) }) });
   }
 );
@@ -2413,9 +2430,10 @@ var CloseDrawerLine = forwardRef((props, ref) => {
 });
 CloseDrawerLine.displayName = "CloseDrawerLine";
 var DrawerCloseTrigger = forwardRef(function DrawerCloseTrigger2(props, ref) {
+  const { showText = false, ...rest } = props;
   const { size } = useRootDrawerProps();
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsx(Drawer$1.CloseTrigger, { ref, ...props, asChild: true, children: size === "full" ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Drawer$1.CloseTrigger, { ref, ...rest, asChild: true, children: showText || size === "full" ? /* @__PURE__ */ jsx(
     ResponsiveButton,
     {
       variant: "ghost",