@obosbbl/grunnmuren-react 3.1.1 → 3.1.2

package/dist/__stories__/form-validation.stories.cjs

@@ -196,7 +196,7 @@ const inputGroup = cva.cx([
 ({
     popover: cva.cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
     // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
-    listbox: cva.cx('max-h-[25rem] overflow-x-hidden text-sm outline-hidden'),
+    listbox: cva.cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
     chevronIcon: cva.cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
 });
 

package/dist/__stories__/form-validation.stories.js

@@ -194,7 +194,7 @@ const inputGroup = cx([
 ({
     popover: cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
     // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
-    listbox: cx('max-h-[25rem] overflow-x-hidden text-sm outline-hidden'),
+    listbox: cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
     chevronIcon: cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
 });
 

package/dist/index.d.mts

@@ -1,8 +1,8 @@
-import { DisclosureProps as DisclosureProps$1, ButtonProps as ButtonProps$1, LinkProps, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, ContextValue, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, HeadingProps as HeadingProps$1, ListBoxItemProps, ListBoxSectionProps, ComboBoxProps, FileTriggerProps as FileTriggerProps$1, RouterProvider, TextProps, LabelProps, DialogProps as DialogProps$1, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, NumberFieldProps as NumberFieldProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SelectProps as SelectProps$1, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, CellProps, ColumnProps, TableHeaderProps as TableHeaderProps$1, RowProps, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1 } from 'react-aria-components';
+import { DisclosureProps as DisclosureProps$1, ButtonProps as ButtonProps$1, LinkProps as LinkProps$1, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, ContextValue, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, HeadingProps as HeadingProps$1, ListBoxItemProps, ListBoxSectionProps, ComboBoxProps, FileTriggerProps as FileTriggerProps$1, RouterProvider, TextProps, LabelProps, DialogProps as DialogProps$1, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, NumberFieldProps as NumberFieldProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SelectProps as SelectProps$1, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, CellProps, ColumnProps, TableHeaderProps as TableHeaderProps$1, RowProps, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1, TextFieldProps as TextFieldProps$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 { RefAttributes, HTMLAttributes, HTMLProps, ComponentProps, Ref, JSX, ReactNode, RefObject, Dispatch, SetStateAction } from 'react';
+import { RefAttributes, HTMLAttributes, HTMLProps, ComponentProps, ReactNode, Ref, JSX, RefObject, Dispatch, SetStateAction } from 'react';
 import * as cva from 'cva';
 import { VariantProps } from 'cva';
 import { DisclosureState } from 'react-stately';
@@ -95,6 +95,15 @@ declare const Alertbox: ({ children, role, className, icon, variant, isDismissab
 type AvatarProps = ComponentProps<'img'>;
 declare const Avatar: ({ src, alt, className, onError, loading, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
 
+type LinkProps = LinkProps$1 & React.RefAttributes<HTMLAnchorElement> & {
+    children: ReactNode;
+};
+/**
+ * A basic link component that extends react-aria-components Link with consistent styling.
+ * Provides accessible focus styles and maintains design system consistency.
+ */
+declare const Link: ({ children, className, ...restProps }: LinkProps) => react_jsx_runtime.JSX.Element;
+
 type ButtonOrLinkProps$1 = {
     children?: React.ReactNode;
     /** Additional CSS className for the element. */
@@ -158,7 +167,7 @@ declare function Breadcrumbs(props: BreadcrumbsProps): react_jsx_runtime.JSX.Ele
  */
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | undefined;
-    color?: "blue" | "mint" | "white" | undefined;
+    color?: "mint" | "white" | "blue" | undefined;
     isIconOnly?: boolean | undefined;
     isPending?: boolean | undefined;
 } & ({
@@ -170,13 +179,13 @@ declare const buttonVariants: (props?: ({
 })) | undefined) => string;
 type ButtonOrLinkProps = VariantProps<typeof buttonVariants> & {
     children?: React.ReactNode;
-    href?: LinkProps['href'];
+    href?: LinkProps$1['href'];
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
     /** Ref to the element. */
     ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
 };
-type ButtonProps = (ButtonProps$1 | LinkProps) & ButtonOrLinkProps;
+type ButtonProps = (ButtonProps$1 | LinkProps$1) & ButtonOrLinkProps;
 declare const ButtonContext: react.Context<ContextValue<ButtonProps, HTMLButtonElement | HTMLAnchorElement>>;
 declare function Button({ ref, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
@@ -185,7 +194,7 @@ type CardProps = VariantProps<typeof cardVariants> & HTMLAttributes<HTMLDivEleme
 };
 declare const cardVariants: (props?: ({
     variant?: "subtle" | "outlined" | undefined;
-    layout?: "vertical" | "horizontal" | undefined;
+    layout?: "horizontal" | "vertical" | undefined;
 } & ({
     class?: cva.ClassValue;
     className?: never;
@@ -198,9 +207,9 @@ type CardLinkWrapperProps = {
     children?: React.ReactNode;
     className?: string;
 } & {
-    [K in keyof Omit<LinkProps, 'className' | 'children'>]?: never;
+    [K in keyof Omit<LinkProps$1, 'className' | 'children'>]?: never;
 };
-type CardLinkProps = (Omit<LinkProps, 'href'> & Required<Pick<LinkProps, 'href'>>) | CardLinkWrapperProps;
+type CardLinkProps = (Omit<LinkProps$1, 'href'> & Required<Pick<LinkProps$1, 'href'>>) | CardLinkWrapperProps;
 /**
  * A component that creates a clickable area on a card.
  * It can be used either as a wrapper around a link or as a standalone link.
@@ -237,7 +246,7 @@ type CarouselItem = Pick<CarouselItemProps, 'id'> & {
     /** The id of the previous item that was in view */
     prevId?: CarouselItemProps['id'];
 };
-declare const CarouselItem: ({ className, children, id }: CarouselItemProps) => react_jsx_runtime.JSX.Element;
+declare const CarouselItem: ({ className, children, ...rest }: CarouselItemProps) => react_jsx_runtime.JSX.Element;
 
 type CheckboxProps = {
     children: React.ReactNode;
@@ -342,7 +351,7 @@ type MediaProps = HTMLProps<HTMLDivElement> & VariantProps<typeof mediaVariant>
     ref?: Ref<HTMLDivElement>;
 };
 declare const mediaVariant: (props?: ({
-    fit?: "cover" | "contain" | undefined;
+    fit?: "contain" | "cover" | undefined;
 } & ({
     class?: cva.ClassValue;
     className?: never;
@@ -434,15 +443,6 @@ declare function ErrorMessage(props: ErrorMessageProps): react_jsx_runtime.JSX.E
 
 declare function Label(props: LabelProps): react_jsx_runtime.JSX.Element;
 
-type CustomLinkProps = LinkProps & {
-    children: ReactNode;
-};
-/**
- * A basic link component that extends react-aria-components Link with consistent styling.
- * Provides accessible focus styles and maintains design system consistency.
- */
-declare const CustomLink: ({ children, className, ...restProps }: CustomLinkProps) => react_jsx_runtime.JSX.Element;
-
 type LinkListProps = React.HTMLProps<HTMLDivElement> & {
     children: JSX.Element | JSX.Element[];
 };
@@ -740,5 +740,5 @@ type VideoLoopProps = {
 };
 declare const VideoLoop: ({ src, format, alt, className }: VideoLoopProps) => react_jsx_runtime.JSX.Element;
 
-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, Tag, TagGroup, TagList, 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, VideoLoop, _useLocale as useLocale };
-export type { AccordionItemProps, AccordionProps, Props as AlertboxProps, AvatarProps, BacklinkProps, BadgeProps, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CaptionProps, CardLinkProps, CardProps, CheckboxGroupProps, CheckboxProps, ComboboxProps, ContentProps, DateFormatterProps, DescriptionProps, ErrorMessageProps, FooterProps, GrunnmurenProviderProps, HeadingProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, TagGroupProps, TagListProps, TagProps, TextAreaProps, TextFieldProps, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, DisclosureButtonProps as UNSAFE_DisclosureButtonProps, DisclosurePanelProps as UNSAFE_DisclosurePanelProps, DisclosureProps as UNSAFE_DisclosureProps, FileUploadProps as UNSAFE_FileUploadProps, HeroProps as UNSAFE_HeroProps, LinkListItemProps as UNSAFE_LinkListItemProps, LinkListProps as UNSAFE_LinkListProps, CustomLinkProps as UNSAFE_LinkProps, ModalProps as UNSAFE_ModalProps, TabListProps as UNSAFE_TabListProps, TabPanelProps as UNSAFE_TabPanelProps, TabProps as UNSAFE_TabProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps, TabsProps as UNSAFE_TabsProps };
+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, Tag, TagGroup, TagList, 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, Link 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, VideoLoop, _useLocale as useLocale };
+export type { AccordionItemProps, AccordionProps, Props as AlertboxProps, AvatarProps, BacklinkProps, BadgeProps, BreadcrumbProps, BreadcrumbsProps, ButtonProps, CaptionProps, CardLinkProps, CardProps, CheckboxGroupProps, CheckboxProps, ComboboxProps, ContentProps, DateFormatterProps, DescriptionProps, ErrorMessageProps, FooterProps, GrunnmurenProviderProps, HeadingProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, TagGroupProps, TagListProps, TagProps, TextAreaProps, TextFieldProps, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, DisclosureButtonProps as UNSAFE_DisclosureButtonProps, DisclosurePanelProps as UNSAFE_DisclosurePanelProps, DisclosureProps as UNSAFE_DisclosureProps, FileUploadProps as UNSAFE_FileUploadProps, HeroProps as UNSAFE_HeroProps, LinkListItemProps as UNSAFE_LinkListItemProps, LinkListProps as UNSAFE_LinkListProps, LinkProps as UNSAFE_LinkProps, ModalProps as UNSAFE_ModalProps, TabListProps as UNSAFE_TabListProps, TabPanelProps as UNSAFE_TabPanelProps, TabProps as UNSAFE_TabProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps, TabsProps as UNSAFE_TabsProps };

package/dist/index.mjs

@@ -1,9 +1,9 @@
 'use client';
-import { useContextProps, DisclosureContext, DisclosureGroupStateContext, Provider, ButtonContext as ButtonContext$1, DEFAULT_SLOT, Button as Button$1, useLocale, Link, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, Header, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, ListBox as ListBox$1, ComboBox, Group, Input, Popover, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, I18nProvider, RouterProvider, GroupContext, Dialog as Dialog$1, DialogTrigger as DialogTrigger$1, Modal as Modal$1, ModalOverlay as ModalOverlay$1, NumberField as NumberField$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, Table as Table$1, TableBody as TableBody$1, Cell, Column, TableHeader as TableHeader$1, Row, Tab as Tab$1, TabListStateContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1, TextField as TextField$1, TextArea as TextArea$1 } from 'react-aria-components';
+import { useContextProps, DisclosureContext, DisclosureGroupStateContext, Provider, ButtonContext as ButtonContext$1, DEFAULT_SLOT, Button as Button$1, useLocale, Link as Link$1, Breadcrumb as Breadcrumb$1, Breadcrumbs as Breadcrumbs$1, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, Header, ListBoxItem as ListBoxItem$1, ListBoxSection as ListBoxSection$1, ListBox as ListBox$1, ComboBox, Group, Input, Popover, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, I18nProvider, RouterProvider, GroupContext, Dialog as Dialog$1, DialogTrigger as DialogTrigger$1, Modal as Modal$1, ModalOverlay as ModalOverlay$1, NumberField as NumberField$1, Radio as Radio$1, RadioGroup as RadioGroup$1, Select as Select$1, SelectValue, Table as Table$1, TableBody as TableBody$1, Cell, Column, TableHeader as TableHeader$1, Row, Tab as Tab$1, TabListStateContext, TabList as TabList$1, TabPanel as TabPanel$1, Tabs as Tabs$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1, TextField as TextField$1, TextArea as TextArea$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 { cva, cx, compose } from 'cva';
-import { createContext, useContext, useId, useRef, Children, useState, useEffect, useCallback } from 'react';
+import { createContext, useContext, useId, useRef, Children, useState, useEffect, isValidElement, cloneElement, useCallback } from 'react';
 import { ChevronDown, Error, Warning, CheckCircle, InfoCircle, Close, User, ChevronLeft, ChevronRight, LoadingSpinner, Check, Trash, ArrowRight, Download, LinkExternal, PlayerPause, PlayerPlay } from '@obosbbl/grunnmuren-icons-react';
 import { filterDOMProps, mergeProps, mergeRefs, useUpdateEffect, useObjectRef, useFormReset } from '@react-aria/utils';
 import { useFocusRing, useDisclosure, useProgressBar, useDateFormatter, useField } from 'react-aria';
@@ -476,20 +476,31 @@ const Avatar = ({ src, alt = '', className, onError, loading = 'lazy', ...rest }
     });
 };
 
+/**
+ * A basic link component that extends react-aria-components Link with consistent styling.
+ * Provides accessible focus styles and maintains design system consistency.
+ */ const Link = ({ children, className, ...restProps })=>{
+    return /*#__PURE__*/ jsx(Link$1, {
+        ...restProps,
+        className: cx(className, 'inline-flex cursor-pointer items-center gap-1 font-medium hover:no-underline focus-visible:outline-current focus-visible:outline-focus-offset [&>svg]:shrink-0'),
+        children: children
+    });
+};
+
 function isLinkProps$1(props) {
     return !!props.href;
 }
 function Backlink(props) {
     const { className, style, children, withUnderline, ref, ...restProps } = props;
-    const _className = cx(className, 'group flex max-w-fit cursor-pointer items-center gap-3 rounded-md p-2.5 no-underline focus-visible:outline-focus');
+    const _className = cx(className, 'group flex! max-w-fit cursor-pointer items-center gap-3 rounded-md p-2.5 font-normal no-underline focus-visible:outline-focus');
     const content = /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(ChevronLeft, {
-                className: cx('-ml-[0.5em] group-hover:-translate-x-1 shrink-0 transition-transform duration-300')
+                className: cx('-ml-[0.5em] group-hover:-translate-x-1 duration-300')
             }),
             /*#__PURE__*/ jsx("span", {
                 children: /*#__PURE__*/ jsx("span", {
-                    className: cx('border-transparent border-t-[1px] border-b-[1px] transition-colors duration-300', withUnderline ? 'border-b-black' : 'group-hover:border-b-black'),
+                    className: cx('border-transparent border-y transition-colors duration-300', withUnderline ? 'border-b-black' : 'group-hover:border-b-black'),
                     children: children
                 })
             })
@@ -559,7 +570,7 @@ function Breadcrumb(props) {
             href ? /*#__PURE__*/ jsx(Link, {
                 href: href,
                 // use outline instead of ring-3 for focus marker that can be offset without creating a white background between the focus marker and the element content
-                className: "rounded-xs focus-visible:outline-focus group-last:no-underline",
+                className: "rounded-xs font-normal hover:underline focus-visible:outline-focus group-last:no-underline",
                 children: children
             }) : children,
             /*#__PURE__*/ jsx(ChevronRight, {
@@ -699,7 +710,7 @@ function Button({ ref = null, ...props }) {
             })
         ]
     }) : _children;
-    return isLinkProps(restProps) ? /*#__PURE__*/ jsx(Link, {
+    return isLinkProps(restProps) ? /*#__PURE__*/ jsx(Link$1, {
         ...restProps,
         className: className,
         ref: ref,
@@ -923,7 +934,7 @@ const cardLinkVariants = cva({
         className: _className,
         withHref: !!href
     });
-    return href ? /*#__PURE__*/ jsx(Link, {
+    return href ? /*#__PURE__*/ jsx(Link$1, {
         "data-slot": "card-link",
         ...restProps,
         href: href,
@@ -939,7 +950,8 @@ const cardLinkVariants = cva({
 };
 
 const Carousel = ({ className, children, onChange, ...rest })=>{
-    const ref = useRef(null);
+    const carouselRef = useRef(null);
+    const carouselItemsRef = useRef(null);
     const locale = _useLocale();
     const { previous, next } = translations$1;
     const [scrollTargetIndex, setScrollTargetIndex] = useState(0);
@@ -947,10 +959,10 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
     const scrollTimeoutRef = useRef(null);
     const scrollQueue = useRef([]);
     const [hasReachedScrollStart, setHasReachedScrollStart] = useState(scrollTargetIndex === 0);
-    const [hasReachedScrollEnd, setHasReachedScrollEnd] = useState(!ref.current || ref.current.children.length - 1 === scrollTargetIndex);
+    const [hasReachedScrollEnd, setHasReachedScrollEnd] = useState(!carouselItemsRef.current || carouselItemsRef.current.children.length - 1 === scrollTargetIndex);
     useEffect(()=>{
         setHasReachedScrollStart(scrollTargetIndex === 0);
-        setHasReachedScrollEnd(!ref.current || ref.current.children.length - 1 === scrollTargetIndex);
+        setHasReachedScrollEnd(!carouselItemsRef.current || carouselItemsRef.current.children.length - 1 === scrollTargetIndex);
     }, [
         scrollTargetIndex
     ]);
@@ -971,14 +983,15 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
     };
     // Handle scrolling when user clicks the arrow icons
     useUpdateEffect(()=>{
-        if (!ref.current) {
+        if (!carouselItemsRef.current) {
             return;
         }
         if (scrollTimeoutRef.current) {
             clearTimeout(scrollTimeoutRef.current);
         }
         isScrollingProgrammatically.current = true;
-        ref.current.children[scrollTargetIndex]?.scrollIntoView({
+        const elementWithFocusVisible = carouselRef.current?.querySelector(':focus-visible');
+        carouselItemsRef.current.children[scrollTargetIndex]?.scrollIntoView({
             behavior: 'smooth',
             inline: 'start',
             block: 'nearest'
@@ -986,15 +999,43 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
         if (prevIndex.current !== scrollTargetIndex && onChange) {
             onChange({
                 index: scrollTargetIndex,
-                id: ref.current.children[scrollTargetIndex]?.id,
+                id: carouselItemsRef.current.children[scrollTargetIndex]?.id,
                 prevIndex: prevIndex.current,
-                prevId: ref.current.children[prevIndex.current]?.id
+                prevId: carouselItemsRef.current.children[prevIndex.current]?.id
             });
         }
         prevIndex.current = scrollTargetIndex;
         scrollTimeoutRef.current = setTimeout(()=>{
             isScrollingProgrammatically.current = false;
             scrollTimeoutRef.current = null;
+            if (elementWithFocusVisible && !carouselRef.current?.contains(document.activeElement)) {
+                // Restore focus to the appropriate element after scrolling
+                // First check if the prev or next buttons just got hidden due to reaching the start/end of the carousel
+                // If so, move focus to the other button. This is to avoid a scroll jank that occurs if instead focus is restored to the carousel container
+                // This jank happens because of the delays used for scrolling with these buttons (debounce, queuing etc.).
+                switch(elementWithFocusVisible.slot){
+                    case 'prev':
+                        {
+                            // Focus was lost when the prev button turned invisible, set it to the next button
+                            const nextButton = carouselRef.current?.querySelector('[slot="next"]');
+                            nextButton?.focus();
+                            break;
+                        }
+                    case 'next':
+                        {
+                            // Focus was lost when the next button turned invisible, set it to the prev button
+                            const prevButton = carouselRef.current?.querySelector('[slot="prev"]');
+                            prevButton?.focus();
+                            break;
+                        }
+                    default:
+                        {
+                            // Focus was lost during while scrolling with left/right arrows, restore it to the carousel container
+                            carouselItemsRef.current?.focus();
+                            break;
+                        }
+                }
+            }
             processQueue(); // Process any queued scrolls
         }, 500);
     }, [
@@ -1039,7 +1080,9 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
     }, 150);
     const handlePrevious = ()=>{
         const targetIndex = scrollTargetIndex - 1;
-        if (targetIndex < 0) return;
+        if (targetIndex < 0) {
+            return;
+        }
         if (isScrollingProgrammatically.current) {
             // If we're already scrolling, queue this action
             scrollQueue.current = [
@@ -1050,9 +1093,11 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
         }
     };
     const handleNext = ()=>{
-        if (!ref.current) return;
+        if (!carouselItemsRef.current) return;
         const targetIndex = scrollTargetIndex + 1;
-        if (targetIndex >= ref.current.children.length) return;
+        if (targetIndex >= carouselItemsRef.current.children.length) {
+            return;
+        }
         if (isScrollingProgrammatically.current) {
             // If we're already scrolling, queue this action
             scrollQueue.current = [
@@ -1064,13 +1109,15 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
     };
     return /*#__PURE__*/ jsx("div", {
         "data-slot": "carousel",
+        ref: carouselRef,
         children: /*#__PURE__*/ jsx(Provider, {
             values: [
                 [
                     CarouselItemsContext,
                     {
-                        ref,
-                        onScroll
+                        carouselItemsRef,
+                        onScroll,
+                        activeIndex: scrollTargetIndex
                     }
                 ],
                 [
@@ -1137,7 +1184,8 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
         children: children
     });
 const CarouselItemsContext = /*#__PURE__*/ createContext({
-    ref: null
+    carouselItemsRef: null,
+    activeIndex: 0
 });
 const CarouselItems = ({ className, children })=>{
     const handleKeyDown = (event)=>{
@@ -1147,31 +1195,36 @@ const CarouselItems = ({ className, children })=>{
             event.preventDefault();
         }
     };
-    return /*#__PURE__*/ jsx(CarouselItemsContext.Consumer, {
-        children: ({ ref, onScroll })=>// biome-ignore lint/a11y/noStaticElementInteractions: The keydown handler is only to prevent undesired scrolling behavior when using the arrow keys
-            /*#__PURE__*/ jsx("div", {
-                "data-slot": "carousel-items",
-                className: cx(className, [
-                    'scrollbar-hidden',
-                    'flex',
-                    'snap-x',
-                    'snap-mandatory',
-                    'overflow-x-auto',
-                    'outline-none',
-                    'rounded-[inherit]'
-                ]),
-                ref: ref,
-                onScroll: onScroll,
-                onKeyDown: handleKeyDown,
-                children: children
-            })
-    });
+    const { carouselItemsRef, onScroll, activeIndex } = useContext(CarouselItemsContext);
+    return(// biome-ignore lint/a11y/noStaticElementInteractions: The keydown handler is only to prevent undesired scrolling behavior when using the arrow keys
+    /*#__PURE__*/ jsx("div", {
+        "data-slot": "carousel-items",
+        className: cx(className, [
+            'scrollbar-hidden',
+            'flex',
+            'snap-x',
+            'snap-mandatory',
+            'overflow-x-auto',
+            'outline-none',
+            'rounded-[inherit]'
+        ]),
+        ref: carouselItemsRef,
+        onScroll: onScroll,
+        onKeyDown: handleKeyDown,
+        children: Children.map(children, (child, index)=>{
+            if (/*#__PURE__*/ isValidElement(child)) {
+                return /*#__PURE__*/ cloneElement(child, {
+                    inert: activeIndex === index ? undefined : true
+                });
+            }
+        })
+    }));
 };
-const CarouselItem = ({ className, children, id })=>{
+const CarouselItem = ({ className, children, ...rest })=>{
     return /*#__PURE__*/ jsx("div", {
         className: cx(className, 'shrink-0 basis-full snap-start'),
         "data-slot": "carousel-item",
-        id: id,
+        ...rest,
         children: /*#__PURE__*/ jsx(Provider, {
             values: [
                 [
@@ -1226,7 +1279,7 @@ const inputGroup = cx([
 const dropdown = {
     popover: cx('data-entering:fade-in data-exiting:fade-out min-w-(--trigger-width) overflow-y-auto rounded-md border border-black bg-white shadow-sm data-entering:animate-in data-exiting:animate-out'),
     // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
-    listbox: cx('max-h-[25rem] overflow-x-hidden text-sm outline-hidden'),
+    listbox: cx('max-h-100 overflow-x-hidden text-sm outline-hidden'),
     chevronIcon: cx('text-base transition-transform duration-150 group-data-open:rotate-180 motion-reduce:transition-none')
 };
 
@@ -1869,17 +1922,6 @@ const Hero = ({ variant, className, children, ...rest })=>{
     });
 };
 
-/**
- * A basic link component that extends react-aria-components Link with consistent styling.
- * Provides accessible focus styles and maintains design system consistency.
- */ const CustomLink = ({ children, className, ...restProps })=>{
-    return /*#__PURE__*/ jsx(Link, {
-        ...restProps,
-        className: cx(className, 'inline-flex cursor-pointer items-center gap-1 font-medium hover:no-underline focus-visible:outline-current focus-visible:outline-focus-offset [&>svg]:shrink-0'),
-        children: children
-    });
-};
-
 const LinkList = ({ className, children, ...restProps })=>{
     const numberofLinks = Children.count(children);
     return /*#__PURE__*/ jsx("div", {
@@ -1888,7 +1930,7 @@ const LinkList = ({ className, children, ...restProps })=>{
         children: /*#__PURE__*/ jsx("ul", {
             className: cx('min-w-fit', // Hide dividers at the top of the list (overflow-y) and prevents arrow icon from overflowing container when animated to the right (overflow-x)
             'overflow-hidden', // Add a small gap between items that fits the divider lines (this way the divider line don't take up any space in each item)
-            'grid auto-rows-max gap-y-0.25', // Gaps for when the list is displayed in multiple columns
+            'grid auto-rows-max gap-y-px', // Gaps for when the list is displayed in multiple columns
             '@lg:gap-x-12 @md:gap-x-9 @sm:gap-x-4 @xl:gap-x-16', numberofLinks > 5 && [
                 '@xl:grid-cols-2',
                 (numberofLinks === 9 || numberofLinks > 10) && '@4xl:grid-cols-3'
@@ -1899,26 +1941,26 @@ const LinkList = ({ className, children, ...restProps })=>{
 };
 const LinkListItem = ({ children, isExternal, className, ...restProps })=>{
     let Icon = ArrowRight;
-    let iconTransition = 'group-hover:motion-safe:translate-x-1';
+    let iconTransition = cx('group-hover:motion-safe:translate-x-1');
     if (restProps.download) {
         Icon = Download;
-        iconTransition = 'group-hover:motion-safe:translate-y-1';
+        iconTransition = cx('group-hover:motion-safe:translate-y-1');
     } else if (isExternal) {
-        iconTransition = 'group-hover:motion-safe:-translate-y-0.5 group-hover:motion-safe:translate-x-0.5';
+        iconTransition = cx('group-hover:motion-safe:-translate-y-0.5 group-hover:motion-safe:translate-x-0.5');
         Icon = LinkExternal;
     }
     return /*#__PURE__*/ jsx("li", {
         // Creates divider lines that works in any grid layout and with the focus ring
-        className: "after:-top-0.25 relative p-0.75 after:absolute after:right-0 after:left-0 after:h-0.25 after:w-full after:bg-gray-light",
+        className: "after:-top-px relative p-0.75 after:absolute after:right-0 after:left-0 after:h-px after:w-full after:bg-gray-light",
         children: /*#__PURE__*/ jsxs(Link, {
             ...restProps,
-            className: cx(className, 'group paragraph flex cursor-pointer justify-between gap-x-2 py-3.5 font-medium no-underline focus-visible:outline-focus'),
+            className: cx(className, 'group paragraph flex w-full cursor-pointer justify-between gap-x-2 py-3.5 font-medium no-underline focus-visible:outline-focus'),
             children: [
                 /*#__PURE__*/ jsx("span", {
                     children: children
                 }),
                 /*#__PURE__*/ jsx(Icon, {
-                    className: cx('shrink-0 motion-safe:transition-transform', iconTransition)
+                    className: iconTransition
                 })
             ]
         })
@@ -2750,4 +2792,4 @@ const VideoLoop = ({ src, format, alt, className })=>{
     });
 };
 
-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, Tag, TagGroup, TagList, 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, 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, Tag, TagGroup, TagList, 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, Link 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, VideoLoop, _useLocale as useLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"