@obosbbl/grunnmuren-react 2.2.0 → 2.3.0

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-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';
+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';
@@ -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;
@@ -390,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;
 };
@@ -616,4 +629,24 @@ declare const variants: (props?: ({
 })) | undefined) => string;
 declare const Hero: ({ variant, className, children }: HeroProps) => 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 };
+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 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, 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,5 +1,5 @@
 '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, GroupContext } 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';
@@ -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, {
@@ -69,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),
@@ -239,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'
     }
 };
 
@@ -335,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,
@@ -1079,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 ****
@@ -1103,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
@@ -1220,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({
@@ -1354,6 +1400,7 @@ 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),
@@ -1402,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,
@@ -1457,7 +1504,7 @@ const Disclosure = ({ ref: _ref, children, ..._props })=>{
                 state
             ],
             [
-                ButtonContext,
+                ButtonContext$1,
                 {
                     slots: {
                         [DEFAULT_SLOT]: {},
@@ -1527,7 +1574,7 @@ const DisclosurePanel = ({ ref, children, ...props })=>{
                             null
                         ],
                         [
-                            ButtonContext,
+                            ButtonContext$1,
                             null
                         ]
                     ],
@@ -1719,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,
@@ -1875,7 +1922,7 @@ const Dialog = ({ className, children, ...restProps })=>{
                             }
                         ],
                         [
-                            ButtonContext,
+                            ButtonContext$1,
                             {
                                 // This is necessary to support multiple close buttons
                                 slots: {
@@ -1968,15 +2015,16 @@ const oneColumnLayout = [
     // 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"]:col-span-3 lg:*:not-data-[slot="content"]:not-data-[slot="media"]:justify-self-end',
-    // <Media> content takes up the full width on medium screens and above
+    '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',
+        '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',
@@ -1998,13 +2046,15 @@ const variants = cva({
             ],
             'full-bleed': [
                 oneColumnLayout,
-                // 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] lg:*: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] lg:*: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"]:*: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',
@@ -2051,4 +2101,166 @@ const Hero = ({ variant, className, 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 };
+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", {
+        "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, 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.2.0",
+  "version": "2.3.0",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -28,7 +28,8 @@
     "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"