@obosbbl/grunnmuren-react 3.0.13 → 3.0.15

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-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';
+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, TableProps as TableProps$1, TableHeaderProps as TableHeaderProps$1, ColumnProps, TableBodyProps as TableBodyProps$1, RowProps, CellProps } 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';
@@ -701,6 +701,44 @@ declare function Tab(props: TabProps): react_jsx_runtime.JSX.Element;
  */
 declare function TabPanel(props: TabPanelProps): react_jsx_runtime.JSX.Element;
 
+type TableProps = Omit<TableProps$1, 'aria-label' | 'aria-labelledby'> & RefAttributes<HTMLTableElement> & {
+    /**
+     * Visual variant of the table
+     * @default 'default'
+     */
+    variant?: 'default' | 'zebra-striped';
+} & ({
+    'aria-label': string;
+    'aria-labelledby'?: never;
+} | {
+    'aria-label'?: never;
+    'aria-labelledby': string;
+});
+type TableHeaderProps = TableHeaderProps$1<object> & RefAttributes<HTMLTableSectionElement>;
+type TableColumnProps = ColumnProps & RefAttributes<HTMLTableCellElement> & {
+    children: React.ReactNode;
+};
+type TableBodyProps = TableBodyProps$1<object> & RefAttributes<HTMLTableSectionElement>;
+type TableRowProps = RowProps<object> & RefAttributes<HTMLTableRowElement>;
+type TableCellProps = CellProps & RefAttributes<HTMLTableCellElement> & {
+    children: React.ReactNode;
+};
+/**
+ * A container component for displaying tabular data with horizontal scrolling support.
+ */
+declare function Table(props: TableProps): react_jsx_runtime.JSX.Element;
+/**
+ * Container for table column headers.
+ */
+declare function TableHeader({ className, children, ...restProps }: TableHeaderProps): react_jsx_runtime.JSX.Element;
+declare function TableColumn(props: TableColumnProps): react_jsx_runtime.JSX.Element;
+/**
+ * Container for table rows.
+ */
+declare function TableBody({ className, children, ...restProps }: TableBodyProps): react_jsx_runtime.JSX.Element;
+declare function TableRow(props: TableRowProps): react_jsx_runtime.JSX.Element;
+declare function TableCell(props: TableCellProps): react_jsx_runtime.JSX.Element;
+
 type CustomLinkProps = LinkProps & {
     children: ReactNode;
 };
@@ -720,4 +758,4 @@ type LinkListItemProps = LinkProps & {
 };
 declare const LinkListItem: ({ children, isExternal, className, ...restProps }: LinkListItemProps) => 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, CustomLink as UNSAFE_Link, LinkList as UNSAFE_LinkList, LinkListItem as UNSAFE_LinkListItem, type LinkListItemProps as UNSAFE_LinkListItemProps, type LinkListProps as UNSAFE_LinkListProps, type CustomLinkProps as UNSAFE_LinkProps, 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 };
+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, CustomLink as UNSAFE_Link, LinkList as UNSAFE_LinkList, LinkListItem as UNSAFE_LinkListItem, type LinkListItemProps as UNSAFE_LinkListItemProps, type LinkListProps as UNSAFE_LinkListProps, type CustomLinkProps as UNSAFE_LinkProps, 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, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, type TableBodyProps as UNSAFE_TableBodyProps, TableCell as UNSAFE_TableCell, type TableCellProps as UNSAFE_TableCellProps, TableColumn as UNSAFE_TableColumn, type TableColumnProps as UNSAFE_TableColumnProps, TableHeader as UNSAFE_TableHeader, type TableHeaderProps as UNSAFE_TableHeaderProps, type TableProps as UNSAFE_TableProps, TableRow as UNSAFE_TableRow, type TableRowProps as UNSAFE_TableRowProps, 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, Tabs as Tabs$1, TabListStateContext, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1 } 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, Table as Table$1, TableHeader as TableHeader$1, Column, TableBody as TableBody$1, Row, Cell } 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, ArrowRight, Download, LinkExternal } from '@obosbbl/grunnmuren-icons-react';
@@ -2310,6 +2310,71 @@ const CarouselItem = ({ className, children, id })=>{
     });
 };
 
+function ScrollButton({ direction, onClick, isVisible, hasScrollingOccurred, className, iconClassName }) {
+    const Icon = direction === 'left' ? ChevronLeft : ChevronRight;
+    return(// biome-ignore lint/a11y/useKeyWithClickEvents: This button is only for mouse interaction to help users scroll. Keyboard and screen reader users can navigate the content directly without needing these scroll helpers.
+    /*#__PURE__*/ jsx("div", {
+        onClick: onClick,
+        className: cx(// Base scroll button styling
+        'flex cursor-pointer items-center justify-center', 'text-black hover:bg-white', direction === 'left' ? 'bg-[linear-gradient(90deg,white,white_calc(100%-10px),transparent)]' : 'bg-[linear-gradient(90deg,transparent,white_calc(10px),white)]', // Animation
+        hasScrollingOccurred && 'duration-100 ease-in motion-safe:transition-transform', // Hide/show animation
+        direction === 'left' ? !isVisible && '-translate-x-full pointer-events-none' : !isVisible && 'pointer-events-none translate-x-full', direction === 'left' ? '-left-3' : '-right-3', className),
+        children: /*#__PURE__*/ jsx(Icon, {
+            className: iconClassName
+        })
+    }));
+}
+/**
+ * Simple hook for detecting horizontal scroll capabilities
+ * Returns scroll state and a ref to attach to your scrollable container
+ */ function useHorizontalScroll() {
+    const scrollContainerRef = useRef(null);
+    const [scrollState, setScrollState] = useState({
+        canScrollLeft: false,
+        canScrollRight: false,
+        hasScrollingOccurred: false
+    });
+    const updateScrollState = useCallback(()=>{
+        const container = scrollContainerRef.current;
+        if (!container) {
+            return;
+        }
+        const { scrollLeft, scrollWidth, clientWidth } = container;
+        const isAtStart = scrollLeft <= 0;
+        const isAtEnd = scrollLeft >= scrollWidth - clientWidth;
+        setScrollState((prev)=>({
+                canScrollLeft: !isAtStart,
+                canScrollRight: !isAtEnd,
+                hasScrollingOccurred: prev.hasScrollingOccurred || scrollLeft > 0
+            }));
+    }, []);
+    const debouncedUpdateScrollState = useDebouncedCallback(updateScrollState, 100);
+    useEffect(()=>{
+        const container = scrollContainerRef.current;
+        if (!container) {
+            return;
+        }
+        // Initial check
+        updateScrollState();
+        // Listen for scroll events
+        container.addEventListener('scroll', debouncedUpdateScrollState);
+        // Listen for resize events (content or container size changes)
+        const resizeObserver = new ResizeObserver(updateScrollState);
+        resizeObserver.observe(container);
+        return ()=>{
+            container.removeEventListener('scroll', debouncedUpdateScrollState);
+            resizeObserver.disconnect();
+        };
+    }, [
+        updateScrollState,
+        debouncedUpdateScrollState
+    ]);
+    return {
+        scrollContainerRef,
+        ...scrollState
+    };
+}
+
 const tabsVariants = cva({
     base: [
         'grid gap-4'
@@ -2339,17 +2404,9 @@ const tabsVariants = cva({
 /**
  * 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 { scrollContainerRef, canScrollLeft, canScrollRight, hasScrollingOccurred } = useHorizontalScroll();
+    // Tab-specific navigation logic
     const prevKey = state?.selectedKey && state?.collection.getKeyBefore(state.selectedKey);
     const onPrev = prevKey ? ()=>state?.setSelectedKey(prevKey) : ()=>{
         if (canScrollLeft && state?.selectedKey === state?.collection.firstKey) {
@@ -2370,30 +2427,6 @@ const tabsVariants = cva({
             });
         }
     };
-    // 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.
@@ -2410,7 +2443,7 @@ const tabsVariants = cva({
         // 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) {
+        if (hasScrollingOccurred) {
             // 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(()=>{
@@ -2427,7 +2460,9 @@ const tabsVariants = cva({
             });
         }
     }, [
-        state?.selectedItem
+        state?.selectedItem,
+        hasScrollingOccurred,
+        scrollContainerRef
     ]);
     return /*#__PURE__*/ jsxs("div", {
         className: "relative overflow-hidden",
@@ -2447,33 +2482,21 @@ const tabsVariants = cva({
                 },
                 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", {
+            /*#__PURE__*/ jsx(ScrollButton, {
+                direction: "left",
                 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"
-                })
+                isVisible: canScrollLeft,
+                hasScrollingOccurred: hasScrollingOccurred,
+                className: "absolute bottom-0.25 size-11",
+                iconClassName: "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", {
+            /*#__PURE__*/ jsx(ScrollButton, {
+                direction: "right",
                 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 "
-                })
+                isVisible: canScrollRight,
+                hasScrollingOccurred: hasScrollingOccurred,
+                className: "absolute bottom-0.25 size-11",
+                iconClassName: "mt-0.25 h-6 w-full text-black"
             })
         ]
     });
@@ -2500,7 +2523,128 @@ const tabsVariants = cva({
     const { className, children, ...restProps } = props;
     return /*#__PURE__*/ jsx(TabPanel$1, {
         ...restProps,
-        className: cx(className, 'flex-1 data-focus-visible:outline-focus-offset'),
+        shouldForceMount: true,
+        className: cx(className, 'flex-1 data-inert:hidden data-focus-visible:outline-focus-offset'),
+        children: children
+    });
+}
+
+const tableVariants = cva({
+    base: [
+        'relative'
+    ],
+    variants: {
+        variant: {
+            default: '',
+            'zebra-striped': ''
+        }
+    }
+});
+const tableRowVariants = cva({
+    base: [
+        'data-focus-visible:outline-focus-inset',
+        'group-data-[variant=zebra-striped]:odd:bg-white',
+        'group-data-[variant=zebra-striped]:even:bg-sky-lightest'
+    ]
+});
+/**
+ * A container component for displaying tabular data with horizontal scrolling support.
+ */ function Table(props) {
+    const { className, children, variant = 'default', ...restProps } = props;
+    const { scrollContainerRef, canScrollLeft, canScrollRight, hasScrollingOccurred } = useHorizontalScroll();
+    const handleScroll = useCallback((direction)=>{
+        const container = scrollContainerRef.current;
+        if (!container) return;
+        const scrollAmount = container.clientWidth * 0.8;
+        container.scrollBy({
+            left: direction === 'left' ? -scrollAmount : scrollAmount,
+            behavior: 'smooth'
+        });
+    }, [
+        scrollContainerRef
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: tableVariants({
+            className,
+            variant
+        }),
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "relative overflow-hidden",
+            children: [
+                /*#__PURE__*/ jsx(ScrollButton, {
+                    direction: "left",
+                    onClick: ()=>handleScroll('left'),
+                    isVisible: canScrollLeft,
+                    hasScrollingOccurred: hasScrollingOccurred,
+                    className: "-translate-y-1/2 absolute top-5 z-10 h-11 w-11",
+                    iconClassName: "h-5 w-5"
+                }),
+                /*#__PURE__*/ jsx(ScrollButton, {
+                    direction: "right",
+                    onClick: ()=>handleScroll('right'),
+                    isVisible: canScrollRight,
+                    hasScrollingOccurred: hasScrollingOccurred,
+                    className: "-translate-y-1/2 absolute top-5 z-10 h-11 w-11",
+                    iconClassName: "h-5 w-5"
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    ref: scrollContainerRef,
+                    className: "scrollbar-hidden overflow-x-auto",
+                    style: {
+                        WebkitOverflowScrolling: 'touch'
+                    },
+                    children: /*#__PURE__*/ jsx(Table$1, {
+                        ...restProps,
+                        className: "group w-full min-w-fit",
+                        "data-variant": variant,
+                        children: children
+                    })
+                })
+            ]
+        })
+    });
+}
+/**
+ * Container for table column headers.
+ */ function TableHeader({ className, children, ...restProps }) {
+    return /*#__PURE__*/ jsx(TableHeader$1, {
+        ...restProps,
+        className: cx(className, 'border-black border-b'),
+        children: children
+    });
+}
+function TableColumn(props) {
+    const { className, children, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Column, {
+        ...restProps,
+        className: cx(className, 'px-4 py-3 text-left font-medium text-black text-sm', 'data-focus-visible:outline-focus-inset', 'min-w-fit whitespace-nowrap'),
+        children: children
+    });
+}
+/**
+ * Container for table rows.
+ */ function TableBody({ className, children, ...restProps }) {
+    return /*#__PURE__*/ jsx(TableBody$1, {
+        ...restProps,
+        className: className,
+        children: children
+    });
+}
+function TableRow(props) {
+    const { className, children, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Row, {
+        ...restProps,
+        className: tableRowVariants({
+            className
+        }),
+        children: children
+    });
+}
+function TableCell(props) {
+    const { className, children, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Cell, {
+        ...restProps,
+        className: cx(className, 'px-4 py-3 text-black text-sm leading-relaxed', 'min-w-fit whitespace-nowrap', 'align-top', 'data-focus-visible:outline-focus-inset'),
         children: children
     });
 }
@@ -2561,4 +2705,4 @@ const LinkListItem = ({ children, isExternal, className, ...restProps })=>{
     });
 };
 
-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, CustomLink as UNSAFE_Link, LinkList as UNSAFE_LinkList, LinkListItem as UNSAFE_LinkListItem, 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 };
+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, CustomLink as UNSAFE_Link, LinkList as UNSAFE_LinkList, LinkListItem as UNSAFE_LinkListItem, Modal as UNSAFE_Modal, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, 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.13",
+  "version": "3.0.15",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"