@obosbbl/grunnmuren-react 2.3.4 → 3.0.1

package/dist/index.d.mts

@@ -1,8 +1,8 @@
-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';
+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, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$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';
+import { Ref, HTMLProps, ReactNode, RefAttributes, HTMLAttributes, RefObject, Dispatch, SetStateAction, ComponentProps, JSX } from 'react';
 import * as cva from 'cva';
 import { VariantProps } from 'cva';
 import { DateFormatterOptions } from 'react-aria';
@@ -80,7 +80,7 @@ declare function Badge(props: BadgeProps): react_jsx_runtime.JSX.Element;
  */
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | undefined;
-    color?: "mint" | "white" | "green" | undefined;
+    color?: "mint" | "white" | "blue" | undefined;
     isIconOnly?: boolean | undefined;
     isPending?: boolean | undefined;
 } & ({
@@ -93,12 +93,6 @@ declare const buttonVariants: (props?: ({
 type ButtonOrLinkProps$1 = VariantProps<typeof buttonVariants> & {
     children?: React.ReactNode;
     href?: LinkProps['href'];
-    /**
-     * Display the button in a loading state
-     * @deprecated Use isPending instead.
-     * @default false
-     */
-    isLoading?: boolean;
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
     /** Ref to the element. */
@@ -158,11 +152,6 @@ type ComboboxProps<T extends object> = {
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
     errorMessage?: React.ReactNode;
-    /**
-     * Display the dropdown button trigger in a pending state
-     * @deprecated Use isPending instead.
-     */
-    isLoading?: boolean;
     /**
      * Display the dropdown button trigger in a pending state
      * @default false
@@ -653,7 +642,7 @@ type CarouselItemsProps = {
 declare const CarouselItems: ({ className, children }: CarouselItemsProps) => react_jsx_runtime.JSX.Element;
 type CarouselItemProps = {
     /** The component/components to display as the <CarouselItem/>. */
-    children: React.ReactNode;
+    children: JSX.Element | JSX.Element[];
     /** Additional CSS className for the element. */
     className?: string;
     id?: string;
@@ -668,4 +657,49 @@ type CarouselItem = Pick<CarouselItemProps, 'id'> & {
 };
 declare const CarouselItem: ({ className, children, id }: 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 };
+type TabsProps = Omit<TabsProps$1, 'className'> & RefAttributes<HTMLDivElement> & {
+    /**
+     * CSS classes to apply to the tabs container
+     */
+    className?: string;
+    orientation?: 'horizontal' | 'vertical';
+};
+type TabListProps = Omit<TabListProps$1<object>, 'className'> & RefAttributes<HTMLDivElement> & {
+    /**
+     * CSS classes to apply to the tab list
+     */
+    className?: string;
+};
+type TabProps = Omit<TabProps$1, 'className'> & RefAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+    /**
+     * CSS classes to apply to the tab
+     */
+    className?: string;
+};
+type TabPanelProps = Omit<TabPanelProps$1, 'className'> & RefAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+    /**
+     * CSS classes to apply to the tab panel
+     */
+    className?: string;
+};
+/**
+ * A container component that organizes content into multiple sections
+ * and allows users to navigate between them.
+ */
+declare function Tabs(props: TabsProps): react_jsx_runtime.JSX.Element;
+/**
+ * A container component for Tab components within Tabs.
+ */
+declare function TabList({ className, children, ...restProps }: TabListProps): react_jsx_runtime.JSX.Element;
+/**
+ * An individual tab that can be selected to display its associated content.
+ */
+declare function Tab(props: TabProps): react_jsx_runtime.JSX.Element;
+/**
+ * The content area that displays the selected tab's content.
+ */
+declare function TabPanel(props: TabPanelProps): 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, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, type TabListProps as UNSAFE_TabListProps, TabPanel as UNSAFE_TabPanel, type TabPanelProps as UNSAFE_TabPanelProps, type TabProps as UNSAFE_TabProps, Tabs as UNSAFE_Tabs, type TabsProps as UNSAFE_TabsProps, 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 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';
+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, Tabs as Tabs$1, TabListStateContext, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1 } 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';
@@ -291,14 +291,14 @@ const translations$1 = {
      */ variant: {
             primary: 'no-underline',
             // by using an inset box-shadow to emulate a border instead of an actual border, the button size will be equal regardless of the variant
-            secondary: 'no-underline shadow-[inset_0_0_0_2px]',
+            secondary: 'border-2 border-current no-underline hover:border-transparent',
             tertiary: 'underline hover:no-underline'
         },
         /**
      * Adjusts the color of the button for usage on different backgrounds.
-     * @default green
+     * @default blue
      */ color: {
-            green: 'focus-visible:outline-focus',
+            blue: 'focus-visible:outline-focus',
             mint: 'focus-visible:outline-focus focus-visible:outline-mint',
             white: 'focus-visible:outline-focus focus-visible:outline-white'
         },
@@ -317,18 +317,18 @@ const translations$1 = {
     },
     compoundVariants: [
         {
-            color: 'green',
+            color: 'blue',
             variant: 'primary',
             // Darken bg by 20% on hover. The color is manually crafted
-            className: 'bg-green text-white hover:bg-green-dark active:bg-[#007352] [&_[role="progressbar"]]:text-white'
+            className: 'bg-blue-dark text-white hover:bg-blue active:bg-[#0536A0] active:text-white [&_[role="progressbar"]]:text-white'
         },
         {
-            color: 'green',
+            color: 'blue',
             variant: 'secondary',
-            className: 'text-black shadow-green hover:bg-green hover:text-white active:bg-green [&:hover_[role="progressbar"]]:text-white [&_[role="progressbar"]]:text-black'
+            className: 'text-blue-dark hover:border-transparent hover:bg-blue hover:text-blue-dark hover:text-white active:bg-[#0536A0] [&:hover_[role="progressbar"]]:text-white [&_[role="progressbar"]]:text-blue-dark'
         },
         {
-            color: 'green',
+            color: 'blue',
             variant: 'tertiary',
             className: '[&_[role="progressbar"]]:text-black'
         },
@@ -341,7 +341,7 @@ const translations$1 = {
         {
             color: 'mint',
             variant: 'secondary',
-            className: 'text-mint shadow-mint hover:bg-mint hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-mint'
+            className: 'text-mint hover:bg-mint hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-mint'
         },
         {
             color: 'mint',
@@ -356,7 +356,7 @@ const translations$1 = {
         {
             color: 'white',
             variant: 'secondary',
-            className: 'text-white shadow-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-white'
+            className: 'text-white hover:bg-white hover:text-black [&:hover_[role="progressbar"]]:text-black [&_[role="progressbar"]]:text-white'
         },
         {
             color: 'white',
@@ -366,7 +366,7 @@ const translations$1 = {
     ],
     defaultVariants: {
         variant: 'primary',
-        color: 'green',
+        color: 'blue',
         isIconOnly: false,
         isPending: false
     }
@@ -377,8 +377,7 @@ function isLinkProps$1(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 { children: _children, color, isIconOnly, variant, isPending, ...restProps } = props;
     const className = buttonVariants({
         className: props.className,
         color,
@@ -402,7 +401,6 @@ function Button({ ref = null, ...props }) {
     }) : _children;
     return isLinkProps$1(restProps) ? /*#__PURE__*/ jsx(Link, {
         ...restProps,
-        routerOptions: restProps.routerOptions,
         className: className,
         ref: ref,
         children: children
@@ -638,8 +636,7 @@ function InputAddonDivider() {
 }
 
 function Combobox(props) {
-    const { className, children, description, errorMessage, isLoading, isPending: _isPending, label, isInvalid: _isInvalid, ref, ...restProps } = props;
-    const isPending = _isPending || isLoading;
+    const { className, children, description, errorMessage, isPending, label, isInvalid: _isInvalid, ref, ...restProps } = props;
     // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
     // which will override any built in validation
     const isInvalid = !!errorMessage || _isInvalid;
@@ -1802,7 +1799,7 @@ const FileUpload = ({ children, files: _files, onChange, validate, isInvalid: _i
                         children: children
                     })
                 }),
-                /*#__PURE__*/ jsx("ul", {
+                controlledOrUncontrolledFiles.length > 0 && /*#__PURE__*/ jsx("ul", {
                     className: "mt-4 grid gap-y-2",
                     children: controlledOrUncontrolledFiles.map((file, fileIndex)=>{
                         let fileName = file.name;
@@ -2292,4 +2289,199 @@ const CarouselItem = ({ className, children, id })=>{
     });
 };
 
-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 };
+const tabsVariants = cva({
+    base: [
+        'grid gap-4'
+    ],
+    variants: {
+        orientation: {
+            horizontal: '',
+            vertical: 'grid-cols-[auto_1fr]'
+        }
+    }
+});
+/**
+ * A container component that organizes content into multiple sections
+ * and allows users to navigate between them.
+ */ function Tabs(props) {
+    const { className, children, orientation = 'horizontal', ...restProps } = props;
+    return /*#__PURE__*/ jsx(Tabs$1, {
+        ...restProps,
+        orientation: orientation,
+        className: tabsVariants({
+            className,
+            orientation
+        }),
+        children: children
+    });
+}
+/**
+ * A container component for Tab components within Tabs.
+ */ function TabList({ className, children, ...restProps }) {
+    const scrollContainerRef = useRef(null);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    const checkScrollOverflow = useCallback(()=>{
+        const container = scrollContainerRef.current;
+        if (!container) return;
+        const { scrollLeft, scrollWidth, clientWidth } = container;
+        setCanScrollLeft(scrollLeft > 0);
+        setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 1);
+    }, []);
+    const state = useContext(TabListStateContext);
+    const prevKey = state?.selectedKey && state?.collection.getKeyBefore(state.selectedKey);
+    const onPrev = prevKey ? ()=>state?.setSelectedKey(prevKey) : ()=>{
+        if (canScrollLeft && state?.selectedKey === state?.collection.firstKey) {
+            // Scroll to the start of the tab list if we are at the first tab but it is scrolled out of view
+            scrollContainerRef.current?.scrollTo({
+                left: 0,
+                behavior: 'smooth'
+            });
+        }
+    };
+    const nextKey = state?.selectedKey && state?.collection.getKeyAfter(state.selectedKey);
+    const onNext = nextKey ? ()=>state?.setSelectedKey(nextKey) : ()=>{
+        if (canScrollRight && state?.selectedKey === state?.collection.lastKey) {
+            // Scroll to the end of the tab list if we are at the last tab but it is scrolled out of view
+            scrollContainerRef.current?.scrollTo({
+                left: scrollContainerRef.current.scrollWidth,
+                behavior: 'smooth'
+            });
+        }
+    };
+    // To controll if the animation for the scroll buttons and the scrolling behavior
+    // This is used to prevent animations from running when the component mounts
+    // We use a ref here to prevent redundant render cycles and potentially uninteded scrolling.
+    const hasScrollingOccurredRef = useRef(false);
+    // Debounce the scroll handler to avoid performance issues with frequent scroll events
+    const scrollHandler = useDebouncedCallback(()=>{
+        checkScrollOverflow();
+        hasScrollingOccurredRef.current = true;
+    }, 100);
+    useEffect(()=>{
+        const container = scrollContainerRef.current;
+        if (!container) return;
+        checkScrollOverflow();
+        container.addEventListener('scroll', scrollHandler);
+        const resizeObserver = new ResizeObserver(checkScrollOverflow);
+        resizeObserver.observe(container);
+        return ()=>{
+            container.removeEventListener('scroll', scrollHandler);
+            resizeObserver.disconnect();
+        };
+    }, [
+        checkScrollOverflow,
+        scrollHandler
+    ]);
+    // Scroll to the selected tab when the selected key changes
+    // We use the state.selectedItem here instead of just the state.selectedKey, since state.selectedItem is set when the tab list is mounted
+    // This way we can make sure the default selected tab is scrolled into view.
+    useEffect(()=>{
+        const container = scrollContainerRef.current;
+        if (!container) return;
+        const selectedKey = state?.selectedItem?.key;
+        if (!selectedKey) return;
+        // Scroll to the selected tab when it changes
+        const selectedTab = container.querySelector(`[data-key="${selectedKey}"]`);
+        if (!selectedTab) return;
+        const offsetLeft = selectedTab.offsetLeft;
+        const containerWidth = container.clientWidth;
+        // Set the scroll position to try and ish center the selected tab
+        const scrollLeft = offsetLeft - (containerWidth - selectedTab.clientWidth) / 2;
+        // When the scroll is initiated by the user we want a smooth scroll
+        if (hasScrollingOccurredRef.current) {
+            // The RAC TabList component prevents us from using scroll snapping, so by using requestAnimationFrame, we can ensure the scroll position is set correctly.
+            // We want the active tab to be centered in the view when navigating with the scroll buttons, selecting a tab with the keyboard, or clicking on a tab.
+            requestAnimationFrame(()=>{
+                container.scrollTo({
+                    left: scrollLeft,
+                    behavior: 'smooth'
+                });
+            });
+        } else {
+            // When the scroll is done to ensure the default selected tab is in view, we want instant scrolling
+            container.scrollTo({
+                left: scrollLeft,
+                behavior: 'instant'
+            });
+        }
+    }, [
+        state?.selectedItem
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "relative overflow-hidden",
+        children: [
+            /*#__PURE__*/ jsx(TabList$1, {
+                ...restProps,
+                ref: scrollContainerRef,
+                "data-scroll-animation": false,
+                className: cx(className, 'group/tablist', // Ensure the tab list is scrollable
+                'scrollbar-hidden overflow-x-auto', 'flex w-fit max-w-full', // Ensure tabs don't shrink and maintain min-width
+                '[&>*]:min-w-fit [&>*]:flex-shrink-0', // Divider line
+                'border-gray-light', 'data-[orientation=horizontal]:border-b', 'data-[orientation=vertical]:border-r', // Selection highlight based on orientation
+                'data-[orientation=horizontal]:*:border-y-2', 'data-[orientation=horizontal]:*:data-selected:border-b-blue-dark', 'data-[orientation=vertical]:*:border-r-2', 'data-[orientation=vertical]:*:data-selected:border-r-blue-dark', // Flex direction based on orientation
+                'data-[orientation=vertical]:flex-col'),
+                style: {
+                    WebkitOverflowScrolling: 'touch'
+                },
+                children: children
+            }),
+            // biome-ignore lint/a11y/useKeyWithClickEvents: These are just for scrolling, and not necessary for keyboard or screen reader users. They can use the tablist's keyboard navigation pattern to navigate the entire list the same way.
+            /*#__PURE__*/ jsx("div", {
+                onClick: onPrev,
+                className: cx('cursor-pointer', 'flex items-center', // Ensure click are of 44px by 44px.
+                'size-11', // Position the button at the left of the tab list, with a small (left) offset to avoid overlap with the tabs.
+                // The bottom offset is to avoid overlap with the tab lists bottom border.
+                '-left-3 absolute bottom-0.25', // Creates a gradient background that fades to transparent on the right side, which creates a smooth overlay effect over the tabs that are scrolled out of view.
+                'bg-[linear-gradient(90deg,white,white_calc(100%-10px),transparent)]', // Slide in and out based on scroll position, match duration with the debounce delay of the scrollHandler function
+                // Wait until user started scrolling until animation is applied, to prevent the animation from running on mount
+                hasScrollingOccurredRef.current && 'duration-100 ease-in motion-safe:transition-transform', !canScrollLeft && '-translate-x-full pointer-events-none'),
+                children: /*#__PURE__*/ jsx(ChevronLeft, {
+                    className: "mt-0.25 h-6 w-full text-black"
+                })
+            }),
+            // biome-ignore lint/a11y/useKeyWithClickEvents: These are just for scrolling, and not necessary for keyboard or screen reader users. They can use the tablist's keyboard navigation pattern to navigate the entire list the same way.
+            /*#__PURE__*/ jsx("div", {
+                onClick: onNext,
+                className: cx('cursor-pointer', 'flex items-center', // Ensure click are of 44px by 44px.
+                'size-11', // Position the button at the right of the tab list, with a small (right) offset to avoid overlap with the tabs.
+                // The bottom offset is to avoid overlap with the tab lists bottom border.
+                '-right-3 absolute bottom-0.25', // Creates a gradient background that fades to transparent on the left side, which creates a smooth overlay effect over the tabs that are scrolled out of view.
+                'bg-[linear-gradient(90deg,transparent,white_calc(10px),white)]', // Slide in and out based on scroll position, match duration with the debounce delay of the scrollHandler function
+                // Wait until user started scrolling until animation is applied, to prevent the animation from running on mount
+                hasScrollingOccurredRef.current && 'duration-100 ease-in motion-safe:transition-transform', !canScrollRight && 'pointer-events-none translate-x-full'),
+                children: /*#__PURE__*/ jsx(ChevronRight, {
+                    className: "mt-0.25 h-6 w-full text-black "
+                })
+            })
+        ]
+    });
+}
+/**
+ * An individual tab that can be selected to display its associated content.
+ */ function Tab(props) {
+    const { className, children, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Tab$1, {
+        ...restProps,
+        className: cx(className, 'data-focus-visible:-outline-offset-10 data-focus-visible:outline-2 data-focus-visible:outline-black', 'cursor-pointer border-transparent px-4 py-2 font-light text-sm', // Transition
+        'transition-colors duration-150 ease-out', // TODO: Should disabled tabs just be hidden?
+        'data-disabled:cursor-not-allowed data-disabled:opacity-50', // Selection
+        'data-selected:font-medium data-selected:text-blue-dark', // Hover with layout shift prevention using pseudo-element
+        'after:invisible after:block after:h-0 after:overflow-hidden after:font-medium after:content-[attr(data-text)]', 'data-hovered:font-medium', // Pressed
+        'data-pressed:font-medium data-pressed:text-blue-dark'),
+        "data-text": typeof children === 'string' ? children : '',
+        children: children
+    });
+}
+/**
+ * The content area that displays the selected tab's content.
+ */ function TabPanel(props) {
+    const { className, children, ...restProps } = props;
+    return /*#__PURE__*/ jsx(TabPanel$1, {
+        ...restProps,
+        className: cx(className, 'flex-1 data-focus-visible:outline-focus-offset'),
+        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, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Tabs as UNSAFE_Tabs, 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.3.4",
+  "version": "3.0.1",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"