@obosbbl/grunnmuren-react 2.1.0 → 2.3.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { RouterProvider, ButtonProps as ButtonProps$1, LinkProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ListBoxItemProps, ListBoxSectionProps, HeadingProps as HeadingProps$1, ComboBoxProps, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, SelectProps as SelectProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1, ContextValue, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, DisclosureProps as DisclosureProps$1, FileTriggerProps as FileTriggerProps$1, TextProps, LabelProps, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, DialogProps as DialogProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1 } from 'react-aria-components';
-export { ListBoxItemProps as ComboboxItemProps, Form, LabelProps, ListBoxItemProps as SelectItemProps, DisclosureGroup as UNSAFE_DisclosureGroup, DisclosureGroupProps as UNSAFE_DisclosureGroupProps } from 'react-aria-components';
+import { RouterProvider, ButtonProps as ButtonProps$1, LinkProps, ContextValue, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ListBoxItemProps, ListBoxSectionProps, HeadingProps as HeadingProps$1, ComboBoxProps, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, SelectProps as SelectProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, DisclosureProps as DisclosureProps$1, FileTriggerProps as FileTriggerProps$1, TextProps, LabelProps, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, DialogProps as DialogProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1 } from 'react-aria-components';
+export { ListBoxItemProps as ComboboxItemProps, Form, Group, LabelProps, ListBoxItemProps as SelectItemProps, DisclosureGroup as UNSAFE_DisclosureGroup, DisclosureGroupProps as UNSAFE_DisclosureGroupProps } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { Ref, HTMLProps, ReactNode, RefAttributes, HTMLAttributes, RefObject, Dispatch, SetStateAction, ComponentProps } from 'react';
@@ -105,7 +105,8 @@ type ButtonOrLinkProps$1 = VariantProps<typeof buttonVariants> & {
     ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
 };
 type ButtonProps = (ButtonProps$1 | LinkProps) & ButtonOrLinkProps$1;
-declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
+declare const ButtonContext: react.Context<ContextValue<ButtonProps, HTMLButtonElement | HTMLAnchorElement>>;
+declare function Button({ ref, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 type CheckboxProps = {
     children: React.ReactNode;
@@ -359,9 +360,9 @@ type Props = VariantProps<typeof alertVariants> & {
 };
 declare const Alertbox: ({ children, role, className, icon, variant, isDismissable, isDismissed, onDismiss, isExpandable, }: Props) => react_jsx_runtime.JSX.Element | undefined;
 
-type HeadingProps = HTMLProps<HTMLHeadingElement> & {
+type HeadingProps = Omit<HTMLProps<HTMLHeadingElement>, 'size'> & VariantProps<typeof headingVariants> & {
     children?: React.ReactNode;
-    /** The level of the heading */
+    /** The semantic level of the heading */
     level: 1 | 2 | 3 | 4 | 5 | 6;
     /** @private Used internally for slotted components */
     _innerWrapper?: (children: React.ReactNode) => React.ReactNode;
@@ -371,6 +372,15 @@ type HeadingProps = HTMLProps<HTMLHeadingElement> & {
     ref?: Ref<HTMLHeadingElement>;
 };
 declare const HeadingContext: react.Context<ContextValue<Partial<HeadingProps>, HTMLHeadingElement>>;
+declare const headingVariants: (props?: ({
+    size?: "s" | "xl" | "l" | "m" | "xs" | undefined;
+} & ({
+    class?: cva.ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: cva.ClassValue;
+})) | undefined) => string;
 declare const Heading: ({ ref, ...props }: HeadingProps) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 declare const ContentContext: react.Context<ContextValue<Partial<ContentProps>, HTMLDivElement>>;
 type ContentProps = HTMLProps<HTMLDivElement> & {
@@ -381,10 +391,22 @@ type ContentProps = HTMLProps<HTMLDivElement> & {
     ref?: Ref<HTMLDivElement>;
 };
 declare const Content: ({ ref, ...props }: ContentProps) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
-type MediaProps = HTMLProps<HTMLDivElement> & {
+type MediaProps = HTMLProps<HTMLDivElement> & VariantProps<typeof mediaVariant> & {
     children: React.ReactNode;
+    /** Ref for the element. */
+    ref?: Ref<HTMLDivElement>;
 };
-declare const Media: (props: MediaProps) => react_jsx_runtime.JSX.Element;
+declare const mediaVariant: (props?: ({
+    fit?: "cover" | "contain" | undefined;
+} & ({
+    class?: cva.ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: cva.ClassValue;
+})) | undefined) => string;
+declare const MediaContext: react.Context<ContextValue<Partial<MediaProps>, HTMLDivElement>>;
+declare const Media: ({ ref, ...props }: MediaProps) => react_jsx_runtime.JSX.Element;
 type FooterProps = HTMLProps<HTMLDivElement> & {
     children: React.ReactNode;
 };
@@ -593,9 +615,38 @@ declare function TagList(props: TagListProps): react_jsx_runtime.JSX.Element;
  */
 declare function Tag(props: TagProps): react_jsx_runtime.JSX.Element;
 
-type HeroProps = HTMLProps<HTMLDivElement> & {
+type HeroProps = HTMLProps<HTMLDivElement> & VariantProps<typeof variants> & {
+    children: React.ReactNode;
+};
+declare const variants: (props?: ({
+    variant?: "standard" | "full-bleed" | "two-column" | undefined;
+} & ({
+    class?: cva.ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: cva.ClassValue;
+})) | undefined) => string;
+declare const Hero: ({ variant, className, children }: HeroProps) => react_jsx_runtime.JSX.Element;
+
+type CarouselProps = {
+    /** The <CarouselItem/> components to be displayed within the carousel. */
+    children: React.ReactNode;
+    /** Additional CSS className for the element. */
+    className?: string;
+};
+declare const Carousel: ({ className, children }: CarouselProps) => react_jsx_runtime.JSX.Element;
+type CarouselItemsProps = {
+    /** Additional CSS className for the element. */
+    children: React.ReactNode;
+    /** The <CarouselItem/> components to be displayed within the carousel. */
+    className?: string;
+};
+declare const CarouselItems: ({ className, children }: CarouselItemsProps) => react_jsx_runtime.JSX.Element;
+type CarouselItemProps = {
+    className?: string;
     children: React.ReactNode;
 };
-declare const Hero: ({ className, children }: HeroProps) => react_jsx_runtime.JSX.Element;
+declare const CarouselItem: ({ className, children }: CarouselItemProps) => react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, Avatar, type AvatarProps, Backlink, type BacklinkProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Caption, type CaptionProps, Card, CardLink, type CardLinkProps, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, type ComboboxProps, ListBoxSection as ComboboxSection, Content, ContentContext, type ContentProps, DateFormatter, type DateFormatterProps, Description, type DescriptionProps, DisclosureStateContext, ErrorMessage, type ErrorMessageProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, Heading, HeadingContext, type HeadingProps, Label, type Locale, Media, type MediaProps, NumberField, type NumberFieldProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, type SelectProps, ListBoxSection as SelectSection, type TagGroupProps, type TagListProps, type TagProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, Dialog as UNSAFE_Dialog, type DialogProps as UNSAFE_DialogProps, DialogTrigger as UNSAFE_DialogTrigger, type DialogTriggerProps as UNSAFE_DialogTriggerProps, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, type DisclosureButtonProps as UNSAFE_DisclosureButtonProps, DisclosurePanel as UNSAFE_DisclosurePanel, type DisclosurePanelProps as UNSAFE_DisclosurePanelProps, type DisclosureProps as UNSAFE_DisclosureProps, FileUpload as UNSAFE_FileUpload, type FileUploadProps as UNSAFE_FileUploadProps, Hero as UNSAFE_Hero, type HeroProps as UNSAFE_HeroProps, Modal as UNSAFE_Modal, type ModalProps as UNSAFE_ModalProps, Tag as UNSAFE_Tag, TagGroup as UNSAFE_TagGroup, TagList as UNSAFE_TagList, VideoLoop, _useLocale as useLocale };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, Avatar, type AvatarProps, Backlink, type BacklinkProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonContext, type ButtonProps, Caption, type CaptionProps, Card, CardLink, type CardLinkProps, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, type ComboboxProps, ListBoxSection as ComboboxSection, Content, ContentContext, type ContentProps, DateFormatter, type DateFormatterProps, Description, type DescriptionProps, DisclosureStateContext, ErrorMessage, type ErrorMessageProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, Heading, HeadingContext, type HeadingProps, Label, type Locale, Media, MediaContext, type MediaProps, NumberField, type NumberFieldProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, type SelectProps, ListBoxSection as SelectSection, type TagGroupProps, type TagListProps, type TagProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, Carousel as UNSAFE_Carousel, CarouselItem as UNSAFE_CarouselItem, type CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItems as UNSAFE_CarouselItems, type CarouselItemsProps as UNSAFE_CarouselItemsProps, type CarouselProps as UNSAFE_CarouselProps, Dialog as UNSAFE_Dialog, type DialogProps as UNSAFE_DialogProps, DialogTrigger as UNSAFE_DialogTrigger, type DialogTriggerProps as UNSAFE_DialogTriggerProps, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, type DisclosureButtonProps as UNSAFE_DisclosureButtonProps, DisclosurePanel as UNSAFE_DisclosurePanel, type DisclosurePanelProps as UNSAFE_DisclosurePanelProps, type DisclosureProps as UNSAFE_DisclosureProps, FileUpload as UNSAFE_FileUpload, type FileUploadProps as UNSAFE_FileUploadProps, Hero as UNSAFE_Hero, type HeroProps as UNSAFE_HeroProps, Modal as UNSAFE_Modal, type ModalProps as UNSAFE_ModalProps, Tag as UNSAFE_Tag, TagGroup as UNSAFE_TagGroup, TagList as UNSAFE_TagList, VideoLoop, _useLocale as useLocale };

package/dist/index.mjs

@@ -1,10 +1,10 @@
 'use client';
-import { I18nProvider, RouterProvider, useLocale, useContextProps, Provider, Link, Button as Button$1, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, Header, ListBox as ListBox$1, ComboBox, Group, Input, Popover, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1, NumberField as NumberField$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1, ButtonContext, DisclosureContext, DisclosureGroupStateContext, DEFAULT_SLOT, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, DialogTrigger as DialogTrigger$1, Modal as Modal$1, Dialog as Dialog$1, ModalOverlay as ModalOverlay$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1 } from 'react-aria-components';
-export { Form, DisclosureGroup as UNSAFE_DisclosureGroup } from 'react-aria-components';
+import { I18nProvider, RouterProvider, useLocale, useContextProps, Provider, Link, Button as Button$1, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, Header, ListBox as ListBox$1, ComboBox, Group, Input, Popover, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1, NumberField as NumberField$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1, ButtonContext as ButtonContext$1, DisclosureContext, DisclosureGroupStateContext, DEFAULT_SLOT, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, DialogTrigger as DialogTrigger$1, Modal as Modal$1, Dialog as Dialog$1, ModalOverlay as ModalOverlay$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1, GroupContext } from 'react-aria-components';
+export { Form, Group, DisclosureGroup as UNSAFE_DisclosureGroup } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, Error, ChevronRight, ChevronLeft, PlayerPause, PlayerPlay, Trash, User } from '@obosbbl/grunnmuren-icons-react';
 import { useLayoutEffect, filterDOMProps, mergeRefs, mergeProps, useObjectRef, useFormReset, useUpdateEffect } from '@react-aria/utils';
-import { cx, cva, compose } from 'cva';
+import { cva, cx, compose } from 'cva';
 import { createContext, Children, useId, useState, useRef, useEffect, useContext, useCallback } from 'react';
 import { useProgressBar, useDateFormatter, useFocusRing, useDisclosure, useField } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
@@ -12,6 +12,7 @@ import { useFormValidation } from '@react-aria/form';
 import { useFormValidationState } from '@react-stately/form';
 import { useControlledState } from '@react-stately/utils';
 import { PressResponder } from '@react-aria/interactions';
+import { useDebouncedCallback } from 'use-debounce';
 
 function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
     return /*#__PURE__*/ jsx(I18nProvider, {
@@ -33,13 +34,27 @@ function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
 }
 
 const HeadingContext = /*#__PURE__*/ createContext({});
+const headingVariants = cva({
+    variants: {
+        /** The visual text size of the heading */ size: {
+            xl: 'heading-xl',
+            l: 'heading-l',
+            m: 'heading-m',
+            s: 'heading-s',
+            xs: 'heading-xs'
+        }
+    }
+});
 const Heading = ({ ref = null, ...props })=>{
     [props, ref] = useContextProps(props, ref, HeadingContext);
-    const { children, level, className, _innerWrapper: innerWrapper, _outerWrapper: outerWrapper, ...restProps } = props;
+    const { children, level, size, className, _innerWrapper: innerWrapper, _outerWrapper: outerWrapper, ...restProps } = props;
+    const _className = headingVariants({
+        size
+    });
     const Element = `h${level}`;
     const content = /*#__PURE__*/ jsx(Element, {
         ...restProps,
-        className: className,
+        className: cx(className, _className),
         "data-slot": "heading",
         children: innerWrapper ? innerWrapper(children) : children
     });
@@ -55,10 +70,35 @@ const Content = ({ ref = null, ...props })=>{
     });
     return outerWrapper ? outerWrapper(content) : content;
 };
-const Media = (props)=>/*#__PURE__*/ jsx("div", {
-        ...props,
+const mediaVariant = cva({
+    variants: {
+        /**
+     * Control how the content should be placed with the object-fit property
+     * You might for example want to use `fit="contain"` portrait images that should not be cropped
+     * @default cover
+     * */ fit: {
+            cover: '*:object-cover',
+            contain: '*:object-contain'
+        }
+    }
+});
+const MediaContext = /*#__PURE__*/ createContext({});
+const Media = ({ ref = null, ...props })=>{
+    [props, ref] = useContextProps(props, ref, MediaContext);
+    const { className, fit, ...restProps } = props;
+    const _className = mediaVariant({
+        fit
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: cx(className, _className),
+        // This can be used (internally) in other components
+        // to apply custom styles to the media element depending on the fit
+        "data-fit": fit,
+        ...restProps,
         "data-slot": "media"
     });
+};
 const Caption = ({ className, ...restProps })=>/*#__PURE__*/ jsx("div", {
         ...restProps,
         className: cx('description', className),
@@ -225,6 +265,16 @@ const translations$1 = {
         nb: 'Vis mindre',
         sv: 'Dölj',
         en: 'Show less'
+    },
+    previous: {
+        nb: 'Forrige',
+        sv: 'Föregående',
+        en: 'Previous'
+    },
+    next: {
+        nb: 'Neste',
+        sv: 'Nästa',
+        en: 'Next'
     }
 };
 
@@ -321,11 +371,13 @@ const translations$1 = {
         isPending: false
     }
 });
+const ButtonContext = /*#__PURE__*/ createContext({});
 function isLinkProps$1(props) {
     return !!props.href;
 }
-function Button(props) {
-    const { children: _children, color, isIconOnly, isLoading, variant, isPending: _isPending, ref, ...restProps } = props;
+function Button({ ref = null, ...props }) {
+    [props, ref] = useContextProps(props, ref, ButtonContext);
+    const { children: _children, color, isIconOnly, isLoading, variant, isPending: _isPending, ...restProps } = props;
     const isPending = _isPending || isLoading;
     const className = buttonVariants({
         className: props.className,
@@ -1065,14 +1117,6 @@ const cardVariants = cva({
         'rounded-2xl border p-3',
         'flex gap-y-4',
         'relative',
-        // **** Heading ****
-        '[&_[data-slot="heading"]]:inline',
-        '[&_[data-slot="heading"]]:heading-s',
-        '[&_[data-slot="heading"]]:leading-6',
-        '[&_[data-slot="heading"]]:w-fit',
-        '[&_[data-slot="heading"]]:text-pretty',
-        '[&_[data-slot="heading"]]:hyphens-auto',
-        '[&_[data-slot="heading"]]:[word-break:break-word]',
         // **** Content ****
         '[&_[data-slot="content"]]:flex [&_[data-slot="content"]]:flex-col [&_[data-slot="content"]]:gap-y-4',
         // **** Media ****
@@ -1089,21 +1133,7 @@ const cardVariants = cva({
         // **** Hover ****
         // Enables the zoom hover effect on media (note that we can't use group-hover/card here, because there might be other clickable elements in the card aside from the heading)
         '[&:has([data-slot="card-link"]_a:hover)_[data-slot="media"]>img]:scale-110',
-        // **** Card link in Heading ****
         '[&:has([data-slot="heading"]_[data-slot="card-link"]:hover)_[data-slot="media"]>img]:scale-110',
-        // Border (bottom/top) is set to transparent to make sure the bottom underline is not visible when the card is hovered
-        // Border top is set to even out the border bottom used for the underline
-        '[&_[data-slot="heading"]_[data-slot="card-link"]]:no-underline',
-        '[&_[data-slot="heading"]_[data-slot="card-link"]]:border-y-2',
-        '[&_[data-slot="heading"]_[data-slot="card-link"]]:border-y-transparent',
-        '[&_[data-slot="heading"]_[data-slot="card-link"]]:transition-colors',
-        '[&_[data-slot="heading"]_[data-slot="card-link"]:hover]:border-b-current',
-        // Mimic heading styles for the card link if placed in the heading slot. This is necessary to make the custom underline align with the link text
-        '[&_[data-slot="heading"]_[data-slot="card-link"]]:heading-s',
-        '[&_[data-slot="heading"]_[data-slot="card-link"]]:leading-6',
-        '[&_[data-slot="heading"]_[data-slot="card-link"]]:text-pretty',
-        '[&_[data-slot="heading"]_[data-slot="card-link"]]:hyphens-auto',
-        '[&_[data-slot="heading"]_[data-slot="card-link"]]:[word-break:break-word]',
         // **** Fail-safe for interactive elements ****
         // Make interactive elements clickable by themselves, while the rest of the card is clickable as a whole
         // The card is made clickable by a pseudo-element on the heading that covers the entire card
@@ -1206,7 +1236,37 @@ const Card = ({ children, className: _className, variant, layout, ...restProps }
     return /*#__PURE__*/ jsx("div", {
         className: className,
         ...restProps,
-        children: children
+        children: /*#__PURE__*/ jsx(Provider, {
+            values: [
+                [
+                    HeadingContext,
+                    {
+                        size: 's',
+                        className: cx([
+                            'inline',
+                            'w-fit',
+                            'text-pretty',
+                            'hyphens-auto',
+                            '[word-break:break-word]',
+                            // **** Card link in Heading ****
+                            // Border (bottom/top) is set to transparent to make sure the bottom underline is not visible when the card is hovered
+                            // Border top is set to even out the border bottom used for the underline
+                            '*:data-[slot="card-link"]:no-underline',
+                            '*:data-[slot="card-link"]:border-y-2',
+                            '*:data-[slot="card-link"]:border-y-transparent',
+                            '*:data-[slot="card-link"]:transition-colors',
+                            '*:data-[slot="card-link"]:hover:border-b-current',
+                            // Mimic heading styles for the card link if placed in the heading slot. This is necessary to make the custom underline align with the link text
+                            '*:data-[slot="card-link"]:font-inherit',
+                            '*:data-[slot="card-link"]:text-pretty',
+                            '*:data-[slot="card-link"]:hyphens-auto',
+                            '*:data-[slot="card-link"]:[word-break:break-word]'
+                        ])
+                    }
+                ]
+            ],
+            children: children
+        })
     });
 };
 const cardLinkVariants = cva({
@@ -1321,7 +1381,7 @@ const VideoLoop = ({ src, format, alt, className })=>{
                 "aria-hidden": true,
                 ref: videoRef,
                 // cursor-pointer is not working on the button below, so we add it here for the same effect
-                className: "h-full max-h-[inherit] w-full cursor-pointer object-cover",
+                className: "h-full max-h-[inherit] w-full cursor-pointer rounded-[inherit] object-cover",
                 playsInline: true,
                 loop: userPrefersReducedMotion === false,
                 autoPlay: userPrefersReducedMotion === false,
@@ -1340,10 +1400,11 @@ const VideoLoop = ({ src, format, alt, className })=>{
                 })
             }),
             userPrefersReducedMotion !== null && /*#__PURE__*/ jsx("button", {
+                "data-slot": "video-loop-button",
                 "aria-hidden": true,
                 type: "button",
                 onClick: ()=>setShouldPlay((prevState)=>!prevState),
-                className: cx('absolute top-0 right-0 bottom-0 left-0 m-auto grid place-items-center', 'focus-visible:outline-focus focus-visible:outline-focus-offset', // Setting the opacity to 0 before applying the transition below will ensure the button only fades in after the video has started playing
+                className: cx('absolute top-0 right-0 bottom-0 left-0 m-auto grid place-items-center', 'focus-visible:outline-focus focus-visible:outline-focus-offset', 'rounded-[inherit]', // Setting the opacity to 0 before applying the transition below will ensure the button only fades in after the video has started playing
                 shouldPlay && 'opacity-0', isPlaying && [
                     'transition-opacity duration-200',
                     // Only show the pause button when the video is hovered or focused
@@ -1388,7 +1449,7 @@ const disclosureButtonVariants = cva({
     }
 });
 const DisclosureButton = ({ className, withChevron, isIconOnly, children, ref: _ref, ...restProps })=>{
-    const [props, ref] = useContextProps(restProps, _ref, ButtonContext);
+    const [props, ref] = useContextProps(restProps, _ref, ButtonContext$1);
     return /*#__PURE__*/ jsxs(Button$1, {
         ...props,
         ref: ref,
@@ -1443,7 +1504,7 @@ const Disclosure = ({ ref: _ref, children, ..._props })=>{
                 state
             ],
             [
-                ButtonContext,
+                ButtonContext$1,
                 {
                     slots: {
                         [DEFAULT_SLOT]: {},
@@ -1513,7 +1574,7 @@ const DisclosurePanel = ({ ref, children, ...props })=>{
                             null
                         ],
                         [
-                            ButtonContext,
+                            ButtonContext$1,
                             null
                         ]
                     ],
@@ -1705,7 +1766,7 @@ const FileUpload = ({ children, files: _files, onChange, validate, isInvalid: _i
                             }
                         ],
                         [
-                            ButtonContext,
+                            ButtonContext$1,
                             {
                                 // The button acts as the trigger for the file input, which is why we connect the label to the button id
                                 id,
@@ -1861,7 +1922,7 @@ const Dialog = ({ className, children, ...restProps })=>{
                             }
                         ],
                         [
-                            ButtonContext,
+                            ButtonContext$1,
                             {
                                 // This is necessary to support multiple close buttons
                                 slots: {
@@ -1944,19 +2005,262 @@ const tagVariants = cva({
     });
 }
 
-const Hero = ({ className, children })=>{
+const roundedMediaCorners = '*:data-[slot="media"]:*:rounded-3xl';
+// Common variant for "standard" and "full-bleed" Hero variants
+const oneColumnLayout = [
+    // Vertical spacing in the <Content>
+    'lg:*:data-[slot="content"]:gap-y-4',
+    // Main text content takes up 9 columns on medium screens and above
+    'lg:*:data-[slot="content"]:col-span-9',
+    // Make sure other elements than <Content> and <Media> (i.e CTA) does not span the full width on small screens
+    '*:not-data-[slot="content"]:not-data-[slot="media"]:w-fit',
+    // Other elements than <Content> and <Media> (e.g. CTA, SVG logo or Badge) take up 3 columns on medium screens and above, and are right aligned
+    'lg:*:not-data-[slot="content"]:not-data-[slot="media"]:not-data-[slot="carousel"]:col-span-3 lg:*:not-data-[slot="content"]:not-data-[slot="media"]:justify-self-end',
+    // <Media> and <Carousel> content takes up the full width on medium screens and above
+    'lg:*:data-[slot="media"]:col-span-full *:data-[slot="media"]:*:w-full',
+    'lg:*:data-[slot="carousel"]:col-span-full  *:data-[slot="carousel"]:*:w-full',
+    // Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
+    'lg:items-end'
+];
+const variants = cva({
+    base: [
+        'container px-0',
+        // Grid variant to position the Hero's content
+        'grid lg:grid-cols-12 lg:gap-x-12 xl:gap-x-16',
+        'gap-y-10 lg:gap-y-12',
+        // Enable vertical gap within <Content>
+        '*:data-[slot="content"]:grid',
+        // Vertical spacing in the <Content>
+        '*:data-[slot="content"]:gap-y-3',
+        // Make sure <Media> content fills any available vertical and horizontal space
+        '*:data-[slot="media"]:*:object-cover'
+    ],
+    variants: {
+        /**
+     * Defines the variant of the Hero
+     * @default standard
+     * */ variant: {
+            standard: [
+                roundedMediaCorners,
+                oneColumnLayout
+            ],
+            'full-bleed': [
+                oneColumnLayout,
+                // Match the heights of the <Media> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
+                // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
+                '*:data-[slot="media"]:*:h-70 sm:*:data-[slot="media"]:*:h-[25rem] md:*:data-[slot="media"]:*:h-[30rem] lg:*:data-[slot="media"]:*:h-[35rem] xl:*:data-[slot="media"]:*:h-[40rem] 2xl:*:data-[slot="media"]:*:h-[42rem] 3xl:*:data-[slot="media"]:*:h-[48rem] 4xl:*:data-[slot="media"]:*:h-[53rem]',
+                // Position the media and carousel content to fill the entire viewport width
+                '*:data-[slot="media"]:*:absolute *:data-[slot="media"]:*:left-0',
+                '*:data-[slot="carousel"]:*:absolute *:data-[slot="carousel"]:*:left-0',
+                '**:data-[slot="carousel-controls"]:container **:data-[slot="carousel-controls"]:right-0 **:data-[slot="carousel-controls"]:bottom-4 **:data-[slot="carousel-controls"]:left-0 **:data-[slot="carousel-controls"]:justify-end',
+                // Override rounded corners of Carousel slots
+                '*:data-[slot="carousel"]:*:rounded-none'
+            ],
+            'two-column': [
+                'lg:items-center lg:*:col-span-6',
+                // Vertical spacing in the <Content>
+                'lg:*:data-[slot="content"]:gap-y-7',
+                roundedMediaCorners,
+                // Set media aspect ratio to 1:1 (square)
+                'lg:*:data-[slot="media"]:*:aspect-[1/1]'
+            ]
+        }
+    },
+    defaultVariants: {
+        variant: 'standard'
+    }
+});
+const Hero = ({ variant, className, children })=>{
+    const variantsClassName = variants({
+        variant,
+        className
+    });
+    return /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                HeadingContext,
+                {
+                    // Sets the default heading size for the Hero based on the variant
+                    size: variant === 'two-column' ? 'xl' : 'l'
+                }
+            ],
+            [
+                GroupContext,
+                {
+                    // Prevents the group from being announced as a group by screen readers
+                    // The Group component is used to group the Hero's CTA buttons together visually, and has no semantic meaning
+                    role: 'presentation',
+                    className: 'flex flex-wrap gap-3 *:w-fit'
+                }
+            ]
+        ],
+        children: /*#__PURE__*/ jsx("div", {
+            className: cx(variantsClassName, className),
+            children: children
+        })
+    });
+};
+
+const Carousel = ({ className, children })=>{
+    const ref = useRef(null);
+    const locale = _useLocale();
+    const { previous, next } = translations$1;
+    const [scrollTargetIndex, setScrollTargetIndex] = useState(0);
+    const [hasReachedScrollStart, setHasReachedScrollStart] = useState(scrollTargetIndex === 0);
+    const [hasReachedScrollEnd, setHasReachedScrollEnd] = useState(!ref.current || ref.current.children.length - 1 === scrollTargetIndex);
+    useEffect(()=>{
+        setHasReachedScrollStart(scrollTargetIndex === 0);
+        setHasReachedScrollEnd(!ref.current || ref.current.children.length - 1 === scrollTargetIndex);
+    }, [
+        scrollTargetIndex
+    ]);
+    // Handle scrolling when user clicks the arrow icons
+    useUpdateEffect(()=>{
+        if (!ref.current) return;
+        ref.current.children[scrollTargetIndex]?.scrollIntoView({
+            behavior: 'smooth',
+            inline: 'start',
+            block: 'nearest'
+        });
+    }, [
+        scrollTargetIndex
+    ]);
+    const onScroll = useDebouncedCallback((event)=>{
+        const target = event.target;
+        // Calculate the index of the item that is currently in view
+        const newScrollTargetIndex = Array.from(target.children).findIndex((child)=>{
+            const rect = child.getBoundingClientRect();
+            return rect.left >= 0 && rect.right <= window.innerWidth && rect.top >= 0;
+        });
+        if (newScrollTargetIndex !== -1) {
+            setScrollTargetIndex(newScrollTargetIndex);
+        }
+    }, 100);
     return /*#__PURE__*/ jsx("div", {
-        className: cx(// Wrap text content in a container
-        '*:data-[slot="content"]:container', // Style the Hero heading
-        '**:data-[slot="heading"]:heading-l', // Spacing between the media and the text content above it
-        '*:data-[slot="media"]:mt-8 lg:*:data-[slot="media"]:mt-10', // Responsive heights for the <Media> wrapper component
-        // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
-        '*:data-[slot="media"]:h-70 sm:*:data-[slot="media"]:h-[25rem] md:*:data-[slot="media"]:h-[30rem] lg:*:data-[slot="media"]:h-[35rem] xl:*:data-[slot="media"]:h-[40rem] 2xl:*:data-[slot="media"]:h-[42rem] 3xl:*:data-[slot="media"]:h-[48rem] 4xl:*:data-[slot="media"]:h-[53rem]', // Match the heights of the <Media> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
-        // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
-        '*:data-[slot="media"]:*:h-70 sm:*:data-[slot="media"]:*:h-[25rem] md:*:data-[slot="media"]:*:h-[30rem] lg:*:data-[slot="media"]:*:h-[35rem] xl:*:data-[slot="media"]:*:h-[40rem] 2xl:*:data-[slot="media"]:*:h-[42rem] 3xl:*:data-[slot="media"]:*:h-[48rem] 4xl:*:data-[slot="media"]:*:h-[53rem]', // Position the media content to fill the entire viewport width
-        '*:data-[slot="media"]:*:absolute *:data-[slot="media"]:*:left-0 *:data-[slot="media"]:*:w-full *:data-[slot="media"]:*:object-cover', className),
+        "data-slot": "carousel",
+        children: /*#__PURE__*/ jsx(Provider, {
+            values: [
+                [
+                    CarouselItemsContext,
+                    {
+                        ref,
+                        onScroll
+                    }
+                ],
+                [
+                    ButtonContext,
+                    {
+                        slots: {
+                            prev: {
+                                'aria-label': previous[locale],
+                                onPress: ()=>{
+                                    if (scrollTargetIndex > 0) {
+                                        setScrollTargetIndex((prev)=>prev - 1);
+                                    }
+                                },
+                                isDisabled: hasReachedScrollStart
+                            },
+                            next: {
+                                isIconOnly: true,
+                                'aria-label': next[locale],
+                                onPress: ()=>{
+                                    if (!ref.current) return;
+                                    if (scrollTargetIndex < ref.current.children.length - 1) {
+                                        setScrollTargetIndex((prev)=>prev + 1);
+                                    }
+                                },
+                                isDisabled: hasReachedScrollEnd
+                            }
+                        }
+                    }
+                ]
+            ],
+            children: /*#__PURE__*/ jsxs("div", {
+                className: cx(className, 'relative rounded-3xl', // If any <CarouselItems/> (the scroll-snap container) or <VideoLoop/> component is focused, apply custom focus styles around the carousel, this makes ensures that the focus outline is visible around the carousel in all cases
+                '[&:has([data-slot="carousel-items"]:focus-visible,[data-slot="video-loop-button"]:focus-visible)]:outline-focus', '[&:has([data-slot="carousel-items"]:focus-visible,[data-slot="video-loop-button"]:focus-visible)]:outline-focus-offset', // Unset the default focus outline for potential video loop buttons, as it interferes with the custom focus styles for the carousel
+                '**:data-[slot="video-loop-button"]:focus-visible:outline-none'),
+                children: [
+                    children,
+                    /*#__PURE__*/ jsxs(_CarouselControls, {
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                isIconOnly: true,
+                                slot: "prev",
+                                variant: "primary",
+                                color: "white",
+                                className: cx('group/carousel-previous', hasReachedScrollStart && 'invisible'),
+                                children: /*#__PURE__*/ jsx(ChevronLeft, {
+                                    className: "group-hover/carousel-previous:motion-safe:-translate-x-1 transition-transform"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                isIconOnly: true,
+                                slot: "next",
+                                variant: "primary",
+                                color: "white",
+                                className: cx('group/carousel-next', hasReachedScrollEnd && 'invisible'),
+                                children: /*#__PURE__*/ jsx(ChevronRight, {
+                                    className: "transition-transform group-hover/carousel-next:motion-safe:translate-x-1"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+};
+/**
+ * This is internal for now, but we will expose it in the future when we support more flexible positioning of prev/next and other actions.
+ * It is used to render the prev/next buttons in the carousel for now.
+ */ const _CarouselControls = ({ children, className })=>/*#__PURE__*/ jsx("div", {
+        className: cx(className, 'absolute right-6 bottom-6 flex gap-x-2', // Make it easier to position in full-bleed hero variants (these style have no other side effects)
+        'items-end *:h-fit'),
+        "data-slot": "carousel-controls",
         children: children
     });
+const CarouselItemsContext = /*#__PURE__*/ createContext({
+    ref: null
+});
+const CarouselItems = ({ className, children })=>/*#__PURE__*/ jsx(CarouselItemsContext.Consumer, {
+        children: ({ ref, onScroll })=>/*#__PURE__*/ jsx("div", {
+                "data-slot": "carousel-items",
+                className: cx(className, [
+                    'scrollbar-hidden',
+                    'flex',
+                    'snap-x',
+                    'snap-mandatory',
+                    'overflow-x-auto',
+                    'outline-none',
+                    'rounded-[inherit]'
+                ]),
+                ref: ref,
+                // When the SnapEvent is supported: https://developer.mozilla.org/en-US/docs/Web/API/SnapEvent
+                // We can use the scrollsnapchange event to detect when the user has scrolled to a new item.
+                // We can then use Array.from(event.target.children).indexOf(event.snapTargetInline) to calculate the index of the item that is currently in view.
+                // Another option is to use the scrollEnd event, when Safiri supports it: https://developer.apple.com/documentation/webkitjs/snap_event/scrollend_event
+                onScroll: onScroll,
+                children: children
+            })
+    });
+const CarouselItem = ({ className, children })=>{
+    return /*#__PURE__*/ jsx("div", {
+        className: cx(className, 'shrink-0 basis-full snap-start'),
+        "data-slot": "carousel-item",
+        children: /*#__PURE__*/ jsx(Provider, {
+            values: [
+                [
+                    MediaContext,
+                    {
+                        fit: 'cover',
+                        className: cx('data-[fit="contain"]:bg-blue-dark', '*:w-full', // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
+                        '*:h-70 sm:*:h-[25rem] lg:*:h-[35rem] xl:*:h-[40rem] 2xl:*:h-[42rem] 3xl:*:h-[48rem] 4xl:*:h-[53rem]')
+                    }
+                ]
+            ],
+            children: children
+        })
+    });
 };
 
-export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, Media, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, TextArea, TextField, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, DisclosurePanel as UNSAFE_DisclosurePanel, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, Modal as UNSAFE_Modal, Tag as UNSAFE_Tag, TagGroup as UNSAFE_TagGroup, TagList as UNSAFE_TagList, VideoLoop, _useLocale as useLocale };
+export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, DisclosurePanel as UNSAFE_DisclosurePanel, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, Modal as UNSAFE_Modal, Tag as UNSAFE_Tag, TagGroup as UNSAFE_TagGroup, TagList as UNSAFE_TagList, VideoLoop, _useLocale as useLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -28,13 +28,14 @@
     "cva": "^1.0.0-0",
     "react-aria": "^3.38.1",
     "react-aria-components": "^1.7.1",
-    "react-stately": "^3.35.0"
+    "react-stately": "^3.35.0",
+    "use-debounce": "^10.0.4"
   },
   "peerDependencies": {
     "react": "^19"
   },
   "devDependencies": {
-    "tailwindcss": "4.0.17"
+    "tailwindcss": "4.1.7"
   },
   "scripts": {
     "build": "bunchee"