@obosbbl/grunnmuren-react 3.0.0 → 3.0.2

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';
@@ -642,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;
@@ -657,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';
@@ -174,7 +174,7 @@ function AccordionItem(props) {
                         _innerWrapper: (children)=>/*#__PURE__*/ jsxs("button", {
                                 "aria-controls": contentId,
                                 "aria-expanded": isOpen,
-                                // Use outline with offset as focus indicator, this does not cover the left mint border on the expanded content and works with or without a background color on the accordion container
+                                // Use outline with offset as focus indicator, this does not cover the left sky border on the expanded content and works with or without a background color on the accordion container
                                 className: "flex min-h-[44px] w-full cursor-pointer items-center justify-between gap-1.5 rounded-lg px-2 py-3.5 text-left focus-visible:outline-focus focus-visible:outline-focus-inset",
                                 id: buttonId,
                                 onClick: handleOpenChange,
@@ -192,7 +192,7 @@ function AccordionItem(props) {
                     ContentContext,
                     {
                         className: // Uses pseudo element for vertical padding, since that doesn't affect the height when the accordion is closed
-                        'text-sm font-light leading-6 px-3.5 relative overflow-hidden border-mint border-l-[3px] before:relative before:block before:h-1.5 after:relative after:block after:h-1.5',
+                        'text-sm font-light leading-6 px-3.5 relative overflow-hidden border-sky border-l-[3px] before:relative before:block before:h-1.5 after:relative after:block after:h-1.5',
                         role: 'region',
                         inert: !isOpen,
                         'aria-labelledby': buttonId,
@@ -401,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
@@ -482,17 +481,22 @@ function CheckmarkBox() {
             // TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
             'mt-[calc((1em_*_1.75_-_24px)_/_2)] h-[24px] w-[24px]',
             // selected
-            'group-data-selected:!border-green group-data-selected:!bg-green',
+            'group-data-selected:group-not-data-hovered:group-not-data-invalid:border-blue group-data-selected:group-not-data-hovered:group-not-data-invalid:bg-blue',
+            'group-data-selected:group-not-data-hovered:group-data-invalid:border-red group-data-selected:group-not-data-hovered:group-data-invalid:bg-red',
             // focus
             'group-data-focus-visible:outline-focus-offset',
             // hovered
-            'group-data-hovered:group-data-invalid:border-red group-data-hovered:group-data-invalid:bg-red-light group-data-hovered:border-green group-data-hovered:bg-green-lightest',
+            'group-data-hovered:group-data-invalid:bg-red-light',
+            'group-data-hovered:border-blue',
+            'group-data-hovered:bg-sky',
+            'group-data-hovered:group-data-selected:group-not-data-invalid:border-blue-dark',
+            'group-data-hovered:group-data-selected:group-not-data-invalid:bg-blue-dark',
             // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
             // so we use an inner shadow of 1 px instead to pad the actual border
-            'group-data-invalid:group-data-selected:shadow-none group-data-invalid:border-red group-data-invalid:shadow-[inset_0_0_0_1px] group-data-invalid:shadow-red'
+            'group-data-invalid:border-red group-data-invalid:shadow-[inset_0_0_0_1px] group-data-invalid:shadow-red'
         ]),
         children: /*#__PURE__*/ jsx(Check, {
-            className: "h-full w-full opacity-0 group-data-selected:opacity-100"
+            className: "h-full w-full opacity-0 group-data-invalid:group-data-hovered:group-data-selected:text-red group-data-selected:opacity-100"
         })
     });
 }
@@ -726,9 +730,9 @@ const defaultClasses = cx([
     // TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
     'before:mt-[calc((1em_*_1.75_-_24px)_/_2)] before:h-[24px] before:w-[24px]',
     // selected
-    'data-selected:before:border-black data-selected:before:bg-green data-selected:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]',
+    'data-selected:before:border-black data-selected:before:bg-blue data-selected:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]',
     // hover
-    'data-hovered:data-invalid:before:bg-red-light data-hovered:before:border-green data-hovered:before:bg-green-lightest',
+    'data-hovered:data-selected:before:border-blue-dark data-hovered:data-invalid:before:bg-red-light data-hovered:data-selected:before:bg-blue-dark data-hovered:before:border-blue data-hovered:before:bg-sky',
     // focus
     'data-focus-visible:before:ring-focus-offset',
     // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
@@ -1948,12 +1952,23 @@ const Dialog = ({ className, children, ...restProps })=>{
 const tagVariants = cva({
     base: [
         'relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 font-medium text-sm transition-colors duration-200',
+        // Resting
+        'border-2 border-black bg-white text-black',
         //Focus
         'focus-visible:outline-focus-offset',
-        //Border
-        'border-2 border-blue-dark',
-        //Backgrounds
-        'data-hovered:!bg-sky bg-white text-black aria-selected:bg-sky-light data-allows-removing:bg-sky-light',
+        // Hover
+        ' data-hovered:bg-sky',
+        // Selected
+        // Allows removing
+        'data-allows-removing:border-transparent',
+        'data-allows-removing:bg-blue',
+        'data-allows-removing:data-hovered:bg-blue-dark',
+        'data-allows-removing:text-white',
+        // Selected
+        'aria-selected:border-transparent',
+        'aria-selected:bg-blue',
+        'aria-selected:data-hovered:bg-blue-dark',
+        'aria-selected:text-white',
         //Icons
         '[&_svg]:h-4 [&_svg]:w-4'
     ]
@@ -2290,4 +2305,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": "3.0.0",
+  "version": "3.0.2",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"