@vygruppen/spor-react 7.1.1 → 7.2.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@7.1.1 build
+> @vygruppen/spor-react@7.2.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -8,15 +8,15 @@
 CLI Target: node16
 CJS Build start
 ESM Build start
-"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-RPCU5IOH.mjs".
+"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-D64WYI7V.mjs".
 DTS Build start
 "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/index.js".
 ESM dist/index.mjs                      2.16 KB
-ESM dist/CountryCodeSelect-HHSDOINA.mjs 1.19 KB
-ESM dist/chunk-RPCU5IOH.mjs             386.90 KB
-ESM ⚡️ Build success in 2245ms
-CJS dist/index.js 494.17 KB
-CJS ⚡️ Build success in 2253ms
-DTS ⚡️ Build success in 10730ms
-DTS dist/index.d.ts  264.83 KB
-DTS dist/index.d.mts 264.83 KB
+ESM dist/CountryCodeSelect-QICAOALV.mjs 1.19 KB
+ESM dist/chunk-D64WYI7V.mjs             387.61 KB
+ESM ⚡️ Build success in 2217ms
+CJS dist/index.js 495.01 KB
+CJS ⚡️ Build success in 2217ms
+DTS ⚡️ Build success in 11050ms
+DTS dist/index.d.ts  265.56 KB
+DTS dist/index.d.mts 265.56 KB

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @vygruppen/spor-react
 
+## 7.2.0
+
+### Minor Changes
+
+- 672d254: Heading: New prop "autoId" lets you autogenerate an ID based on the content
+  slugify: New export that lets you slugify a string
+
 ## 7.1.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-HHSDOINA.mjs → CountryCodeSelect-QICAOALV.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-RPCU5IOH.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-D64WYI7V.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-RPCU5IOH.mjs → chunk-D64WYI7V.mjs}

@@ -1585,9 +1585,12 @@ var Code = forwardRef((props, ref) => /* @__PURE__ */ React69__default.createEle
 var Heading = ({
   as,
   variant = "xl-display",
+  autoId = false,
+  id: externalId,
   ...props
 }) => {
-  return /* @__PURE__ */ React69__default.createElement(Text, { as, textStyle: variant, ...props });
+  const id = externalId ?? (autoId && typeof props.children === "string") ? slugify(props.children) : void 0;
+  return /* @__PURE__ */ React69__default.createElement(Text, { as, textStyle: variant, id, ...props });
 };
 var Text4 = forwardRef(
   ({ variant = "sm", ...props }, ref) => {
@@ -3417,7 +3420,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-HHSDOINA.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-QICAOALV.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -13660,4 +13663,18 @@ function useSize(subject) {
   return size2;
 }
 
-export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, SearchInput, SimpleDrawer, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, WizardPopover, brandTheme, createTexts, fontFaces, theme, useSize, useToast, useTranslation };
+// 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").replace(/[\u0300-\u036f]/g, "").replace(/[\u00C6\u00E6]/g, "ae").replace(/[\u00D8\u00F8]/g, "oe").replace(/[\u00C5\u00E5]/g, "aa").toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]+/g, "").replace(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").substring(0, maxLength);
+}
+
+export { Accordion, AttachedInputs, Badge, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerContent, Expandable, ExpandableAlert, ExpandableItem, FloatingActionButton, FormControl, FormErrorMessage, FormLabel3 as FormLabel, Heading, IconButton, InfoSelect, InfoTag, Input, InputLeftElement2 as InputLeftElement, InputRightElement2 as InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightSpinner, LineIcon, ListBox, ModalHeader, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, SearchInput, SimpleDrawer, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Table, Tabs, Text4 as Text, TextLink, Textarea, TimePicker, TravelTag, VyLogo, WizardPopover, brandTheme, createTexts, fontFaces, slugify, theme, useSize, useToast, useTranslation };

package/dist/index.d.mts

@@ -7487,6 +7487,8 @@ type HeadingProps = Omit<HeadingProps$1, "textStyle" | "as"> & {
     as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     /** The size and style of the heading. Defaults to xl-display */
     variant?: keyof typeof textStyles;
+    /** If true, generate an ID based on the children */
+    autoId?: boolean;
 };
 /**
  * Create your own fancy headings with this component.
@@ -7503,8 +7505,15 @@ type HeadingProps = Omit<HeadingProps$1, "textStyle" | "as"> & {
  * ```tsx
  * <Heading as="h1" variant="2xl">Look at me!</Heading>
  * ```
+ *
+ * If you want to generate an ID based on the children, you can use the `autoId` prop.
+ * Please note that this only works with string children (not JSX, nor arrays of strings).
+ *
+ * ```tsx
+ * <Heading as="h1" autoId>Page heading</Heading> // Will set id="page-heading"
+ * ```
  */
-declare const Heading: ({ as, variant, ...props }: HeadingProps) => React__default.JSX.Element;
+declare const Heading: ({ as, variant, autoId, id: externalId, ...props }: HeadingProps) => React__default.JSX.Element;
 
 type TextProps = Omit<TextProps$1, "textStyle"> & {
     /** The size and style of the text.
@@ -7521,4 +7530,15 @@ type TextProps = Omit<TextProps$1, "textStyle"> & {
  */
 declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", TextProps>;
 
-export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, PopoverWizardProps, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, SimplePopover, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardPopover, WizardPopoverProps, brandTheme, createTexts, fontFaces, theme, useToast, useTranslation };
+/**
+ * Makes a slug-version of any string.
+ *
+ * By default, the maximum length of the slug is 50 characters. You can override this with the `maxLength` parameter.
+ *
+ * ```tsx
+ * slugify("Hello, world!"); // hello-world
+ * slugify("Hello, world!", 6); // hello-
+ **/
+declare function slugify(text: string | string[], maxLength?: number): string;
+
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, PopoverWizardProps, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, SimplePopover, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardPopover, WizardPopoverProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };

package/dist/index.d.ts

@@ -7487,6 +7487,8 @@ type HeadingProps = Omit<HeadingProps$1, "textStyle" | "as"> & {
     as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     /** The size and style of the heading. Defaults to xl-display */
     variant?: keyof typeof textStyles;
+    /** If true, generate an ID based on the children */
+    autoId?: boolean;
 };
 /**
  * Create your own fancy headings with this component.
@@ -7503,8 +7505,15 @@ type HeadingProps = Omit<HeadingProps$1, "textStyle" | "as"> & {
  * ```tsx
  * <Heading as="h1" variant="2xl">Look at me!</Heading>
  * ```
+ *
+ * If you want to generate an ID based on the children, you can use the `autoId` prop.
+ * Please note that this only works with string children (not JSX, nor arrays of strings).
+ *
+ * ```tsx
+ * <Heading as="h1" autoId>Page heading</Heading> // Will set id="page-heading"
+ * ```
  */
-declare const Heading: ({ as, variant, ...props }: HeadingProps) => React__default.JSX.Element;
+declare const Heading: ({ as, variant, autoId, id: externalId, ...props }: HeadingProps) => React__default.JSX.Element;
 
 type TextProps = Omit<TextProps$1, "textStyle"> & {
     /** The size and style of the text.
@@ -7521,4 +7530,15 @@ type TextProps = Omit<TextProps$1, "textStyle"> & {
  */
 declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", TextProps>;
 
-export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, PopoverWizardProps, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, SimplePopover, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardPopover, WizardPopoverProps, brandTheme, createTexts, fontFaces, theme, useToast, useTranslation };
+/**
+ * Makes a slug-version of any string.
+ *
+ * By default, the maximum length of the slug is 50 characters. You can override this with the `maxLength` parameter.
+ *
+ * ```tsx
+ * slugify("Hello, world!"); // hello-world
+ * slugify("Hello, world!", 6); // hello-
+ **/
+declare function slugify(text: string | string[], maxLength?: number): string;
+
+export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, NumericStepper, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PopoverWizardBody, PopoverWizardProps, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, SimplePopover, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardPopover, WizardPopoverProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };

package/dist/index.js

@@ -1175,12 +1175,16 @@ var init_Code = __esm({
 exports.Heading = void 0;
 var init_Heading = __esm({
   "src/typography/Heading.tsx"() {
+    init_src();
     exports.Heading = ({
       as,
       variant = "xl-display",
+      autoId = false,
+      id: externalId,
       ...props
     }) => {
-      return /* @__PURE__ */ React69__namespace.default.createElement(react.Text, { as, textStyle: variant, ...props });
+      const id = externalId ?? (autoId && typeof props.children === "string") ? slugify(props.children) : void 0;
+      return /* @__PURE__ */ React69__namespace.default.createElement(react.Text, { as, textStyle: variant, id, ...props });
     };
   }
 });
@@ -15504,10 +15508,29 @@ var init_externals = __esm({
   }
 });
 
+// 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").replace(/[\u0300-\u036f]/g, "").replace(/[\u00C6\u00E6]/g, "ae").replace(/[\u00D8\u00F8]/g, "oe").replace(/[\u00C5\u00E5]/g, "aa").toLowerCase().replace(/\s+/g, "-").replace(/[^\w-]+/g, "").replace(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").substring(0, maxLength);
+}
+var init_slugify = __esm({
+  "src/util/slugify.tsx"() {
+  }
+});
+
 // src/util/index.tsx
 var init_util = __esm({
   "src/util/index.tsx"() {
     init_externals();
+    init_slugify();
   }
 });
 var init_src = __esm({
@@ -15867,5 +15890,6 @@ exports.LanguageProvider = LanguageProvider;
 exports.ListBox = ListBox;
 exports.NumericStepper = NumericStepper;
 exports.createTexts = createTexts;
+exports.slugify = slugify;
 exports.useSize = useSize;
 exports.useTranslation = useTranslation;

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-RPCU5IOH.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-D64WYI7V.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "7.1.1",
+  "version": "7.2.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/typography/Heading.tsx

@@ -1,5 +1,6 @@
 import { HeadingProps as ChakraHeadingProps, Text } from "@chakra-ui/react";
 import React from "react";
+import { slugify } from "..";
 import type { textStyles } from "../theme/foundations";
 
 export type HeadingProps = Omit<ChakraHeadingProps, "textStyle" | "as"> & {
@@ -7,6 +8,8 @@ export type HeadingProps = Omit<ChakraHeadingProps, "textStyle" | "as"> & {
   as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
   /** The size and style of the heading. Defaults to xl-display */
   variant?: keyof typeof textStyles;
+  /** If true, generate an ID based on the children */
+  autoId?: boolean;
 };
 /**
  * Create your own fancy headings with this component.
@@ -23,11 +26,24 @@ export type HeadingProps = Omit<ChakraHeadingProps, "textStyle" | "as"> & {
  * ```tsx
  * <Heading as="h1" variant="2xl">Look at me!</Heading>
  * ```
+ *
+ * If you want to generate an ID based on the children, you can use the `autoId` prop.
+ * Please note that this only works with string children (not JSX, nor arrays of strings).
+ *
+ * ```tsx
+ * <Heading as="h1" autoId>Page heading</Heading> // Will set id="page-heading"
+ * ```
  */
 export const Heading = ({
   as,
   variant = "xl-display",
+  autoId = false,
+  id: externalId,
   ...props
 }: HeadingProps) => {
-  return <Text as={as} textStyle={variant} {...props} />;
+  const id =
+    externalId ?? (autoId && typeof props.children === "string")
+      ? slugify(props.children as string)
+      : undefined;
+  return <Text as={as} textStyle={variant} id={id} {...props} />;
 };

package/src/util/index.tsx

@@ -1 +1,2 @@
 export * from "./externals";
+export * from "./slugify";

package/src/util/slugify.tsx

@@ -0,0 +1,36 @@
+/**
+ * Makes a slug-version of any string.
+ *
+ * By default, the maximum length of the slug is 50 characters. You can override this with the `maxLength` parameter.
+ *
+ * ```tsx
+ * slugify("Hello, world!"); // hello-world
+ * slugify("Hello, world!", 6); // hello-
+ **/
+export function slugify(text: string | string[], maxLength = 50): string {
+  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") // Normalize to NFD Unicode form
+      .replace(/[\u0300-\u036f]/g, "") // Remove diacritics
+      .replace(/[\u00C6\u00E6]/g, "ae") // Replace Æ, æ
+      .replace(/[\u00D8\u00F8]/g, "oe") // Replace Ø, ø
+      .replace(/[\u00C5\u00E5]/g, "aa") // Replace Å, å
+      // Extend the replacement rules as needed
+      .toLowerCase()
+      .replace(/\s+/g, "-") // Replace spaces with -
+      .replace(/[^\w-]+/g, "") // Remove all non-word chars
+      .replace(/--+/g, "-") // Replace multiple - with single -
+      .replace(/^-+/, "") // Trim - from start of text
+      .replace(/-+$/, "")
+      .substring(0, maxLength)
+  );
+}