@vygruppen/spor-react 12.1.0 → 12.1.2

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress, defineRecipe, chakra, Text, useRecipe, Circle, Skeleton as Skeleton$1, Span, Button as Button$1, Flex, Center, Group as Group$1, Badge as Badge$1, Code as Code$1, Clipboard as Clipboard$1, IconButton as IconButton$1, useDisclosure, Alert as Alert$1, Breadcrumb as Breadcrumb$1, ClientOnly as ClientOnly$1, Field as Field$1, defineSlotRecipe, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, Fieldset as Fieldset$1, InputElement, Input as Input$1, List as List$1, ListItem, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, Switch as Switch$1, Textarea as Textarea$1, FieldLabel as FieldLabel$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, BreadcrumbCurrentLink as BreadcrumbCurrentLink$1, BreadcrumbEllipsis as BreadcrumbEllipsis$1, BreadcrumbLink as BreadcrumbLink$1, useCheckbox, 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 as Group$1, 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 as Field$1, defineSlotRecipe, PopoverAnchor, useFieldContext, Popover as Popover$1, Portal, Dialog, createContext as createContext$1, Drawer as Drawer$1, Grid, GridItem, usePopoverContext, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, Fieldset as Fieldset$1, InputElement, Input as Input$1, List as List$1, ListItem, NativeSelect as NativeSelect$1, useControllableState, createListCollection, RadioGroup as RadioGroup$1, Select as Select$1, Switch as Switch$1, Textarea as Textarea$1, FieldLabel as FieldLabel$1, RadioCard as RadioCard$1, Separator as Separator$1, Link, Center, Pagination as Pagination$1, usePaginationContext, createToaster, Tabs as Tabs$1, Table as Table$1, defineSemanticTokens, defineTokens, defineAnimationStyles, defineGlobalStyles, defineTextStyles, createSystem, defaultBaseConfig, VisuallyHidden, defineConfig, BreadcrumbCurrentLink as BreadcrumbCurrentLink$1, BreadcrumbEllipsis as BreadcrumbEllipsis$1, BreadcrumbLink as BreadcrumbLink$1, useCheckbox, ChakraProvider, Toaster as Toaster$1, Toast, Icon } from '@chakra-ui/react';
 export { Box, Center, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableBody, TableCaption, TableCell, TableColumn, TableColumnHeader, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useToken } from '@chakra-ui/react';
-import { DropdownDownFill24Icon, CheckmarkFill18Icon, CopyOutline18Icon, CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, DropdownDownFill18Icon, ServiceFill24Icon, WarningFill24Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, LinkOutOutline24Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill24Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, QuestionFill24Icon, ErrorOutline24Icon, SuccessFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon, SuccessFill18Icon } from '@vygruppen/spor-icon-react';
+import { DropdownDownFill24Icon, CheckmarkFill18Icon, CopyOutline18Icon, CloseFill30Icon, CloseFill24Icon, CloseFill18Icon, DropdownDownFill18Icon, ServiceFill24Icon, WarningFill24Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill24Icon, ErrorFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill24Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, LinkOutOutline24Icon, QuestionFill24Icon, ErrorOutline24Icon, SuccessFill24Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon, SuccessFill18Icon } from '@vygruppen/spor-icon-react';
 import * as React67 from 'react';
-import React67__default, { forwardRef, createContext, useId, useEffect, useRef, useState, useMemo, useLayoutEffect, useContext } from 'react';
-import { inlineLoaderColorData, spinnerColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerLightData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData } from '@vygruppen/spor-loader';
+import React67__default, { forwardRef, createContext, useId, cloneElement, useEffect, useRef, useState, isValidElement, useMemo, useLayoutEffect, useContext } from 'react';
+import { spinnerColorData, inlineLoaderColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerLightData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData } from '@vygruppen/spor-loader';
 import ReactLottie from 'lottie-react';
 import { useInterval } from 'usehooks-ts';
 export { useIsClient, useMap, useOnClickOutside } from 'usehooks-ts';
@@ -548,22 +548,36 @@ var Skeleton = forwardRef(
 );
 
 // src/button/Button.tsx
+var ButtonContent = ({
+  leftIcon,
+  children,
+  rightIcon
+}) => /* @__PURE__ */ React67__default.createElement(React67__default.Fragment, null, leftIcon, children, rightIcon && /* @__PURE__ */ React67__default.createElement(Span, { marginLeft: "auto" }, rightIcon));
+var LoadingContent = ({
+  children,
+  loadingText
+}) => /* @__PURE__ */ React67__default.createElement(React67__default.Fragment, null, /* @__PURE__ */ React67__default.createElement(Flex, { gap: "1", visibility: "hidden" }, children), /* @__PURE__ */ React67__default.createElement(Center, { position: "absolute", inset: "1px 0" }, /* @__PURE__ */ React67__default.createElement(ColorInlineLoader, { width: "80%", marginX: 2, marginY: 2 }), loadingText && /* @__PURE__ */ React67__default.createElement(Box, null, loadingText)));
 var Button = forwardRef(
-  (props, ref) => {
-    const {
-      loading,
-      disabled,
-      loadingText,
-      variant = "primary",
-      size = "md",
-      leftIcon,
-      rightIcon,
-      type = "button",
-      children,
-      ...rest
-    } = props;
-    const ariaLabel = useCorrectAriaLabel(props);
-    const buttonContent = /* @__PURE__ */ React67__default.createElement(React67__default.Fragment, null, leftIcon, children, rightIcon && /* @__PURE__ */ React67__default.createElement(Span, { marginLeft: "auto" }, rightIcon));
+  ({
+    loading,
+    disabled,
+    loadingText,
+    variant = "primary",
+    size = "md",
+    leftIcon,
+    rightIcon,
+    type = "button",
+    children,
+    ...rest
+  }, ref) => {
+    const { t } = useTranslation();
+    const ariaLabel = loading ? String(loadingText ?? t(texts2.loadingText)) : rest["aria-label"];
+    const renderContent = () => {
+      const content = rest.asChild ? children.props.children : children;
+      if (loading)
+        return /* @__PURE__ */ React67__default.createElement(LoadingContent, { size, loadingText }, /* @__PURE__ */ React67__default.createElement(ButtonContent, { leftIcon, rightIcon }, content));
+      return /* @__PURE__ */ React67__default.createElement(ButtonContent, { leftIcon, rightIcon }, content);
+    };
     return /* @__PURE__ */ React67__default.createElement(
       Button$1,
       {
@@ -577,38 +591,12 @@ var Button = forwardRef(
         size,
         ...rest
       },
-      loading ? /* @__PURE__ */ React67__default.createElement(React67__default.Fragment, null, /* @__PURE__ */ React67__default.createElement(Flex, { gap: "1", visibility: "hidden" }, buttonContent), /* @__PURE__ */ React67__default.createElement(Center, { position: "absolute", right: 0, left: 0, top: 1, bottom: 0 }, /* @__PURE__ */ React67__default.createElement(
-        ColorInlineLoader,
-        {
-          maxWidth: getLoaderWidth(size),
-          width: "80%",
-          marginX: 2,
-          marginY: 2
-        }
-      ), loadingText && /* @__PURE__ */ React67__default.createElement(Box, null, loadingText))) : buttonContent
+      rest.asChild ? cloneElement(children, {
+        children: renderContent()
+      }) : renderContent()
     );
   }
 );
-function getLoaderWidth(size) {
-  switch (size) {
-    case "xs":
-      return "4rem";
-    case "sm":
-      return "4rem";
-    case "md":
-      return "5rem";
-    case "lg":
-    default:
-      return "6rem";
-  }
-}
-function useCorrectAriaLabel(props) {
-  const { t } = useTranslation();
-  if (props.loading) {
-    return String(props.loadingText) ?? t(texts2.loadingText);
-  }
-  return props["aria-label"];
-}
 var texts2 = createTexts({
   loadingText: {
     nb: "Laster\u2026",
@@ -4738,14 +4726,29 @@ var getDeviationLevelIcon = ({
       return null;
   }
 };
+var ExternalIcon = ({ label }) => /* @__PURE__ */ React67__default.createElement(React67__default.Fragment, null, /* @__PURE__ */ React67__default.createElement(LinkOutOutline24Icon, { "aria-hidden": true }), /* @__PURE__ */ React67__default.createElement(VisuallyHidden, null, label));
 var TextLink = forwardRef(
-  ({ children, ...props }, ref) => {
-    var _a5;
+  ({ children, external, href, ...props }, ref) => {
     const { t } = useTranslation();
-    const external = props.external !== void 0 ? props.external : Boolean((_a5 = props.href) == null ? void 0 : _a5.match(/^https?:\/\//));
-    return /* @__PURE__ */ React67__default.createElement(Link, { ...props, ref }, children, external && /* @__PURE__ */ React67__default.createElement(LinkOutOutline24Icon, { "aria-hidden": true }));
+    const isExternal = external ?? Boolean((href == null ? void 0 : href.startsWith("http://")) || (href == null ? void 0 : href.startsWith("https://")));
+    const externalLabel = t ? t(texts18.externalLink) : texts18.externalLink.en;
+    if (props.asChild && isValidElement(children)) {
+      return /* @__PURE__ */ React67__default.createElement(Link, { href, ...props, ref }, cloneElement(children, {
+        ...children.props,
+        children: /* @__PURE__ */ React67__default.createElement(React67__default.Fragment, null, children.props.children, isExternal && /* @__PURE__ */ React67__default.createElement(ExternalIcon, { label: externalLabel }))
+      }));
+    }
+    return /* @__PURE__ */ React67__default.createElement(Link, { href, ...props, ref }, children, isExternal && /* @__PURE__ */ React67__default.createElement(ExternalIcon, { label: externalLabel }));
   }
 );
+var texts18 = createTexts({
+  externalLink: {
+    nb: "Ekstern lenke",
+    nn: "Ekstern lenke",
+    sv: "Extern l\xE4nk",
+    en: "External link"
+  }
+});
 var List = List$1.Root;
 var ListItem2 = List$1.Item;
 var ListIndicator = List$1.Indicator;
@@ -6197,6 +6200,7 @@ var buttonRecipe = defineRecipe({
     transitionDuration: "normal",
     cursor: "pointer",
     textWrap: "wrap",
+    width: "fit-content",
     paddingX: 3,
     paddingY: 1,
     _disabled: {
@@ -6301,6 +6305,10 @@ var buttonRecipe = defineRecipe({
         fontWeight: "bold"
       }
     }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
   }
 });