@obosbbl/grunnmuren-react 3.2.0 → 3.3.0

package/dist/index.mjs

@@ -350,6 +350,11 @@ const translations$1 = {
         nb: 'Neste',
         sv: 'Nästa',
         en: 'Next'
+    },
+    externalLink: {
+        nb: '(ekstern lenke)',
+        sv: '(extern länk)',
+        en: '(external link)'
     }
 };
 
@@ -477,12 +482,29 @@ 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 })=>{
+const _LinkContext = /*#__PURE__*/ createContext({});
+const Link = ({ ref: _ref, ..._props })=>{
+    const [props, ref] = useContextProps(_props, _ref, _LinkContext);
+    const { className, _innerWrapper, children: _children, ...restProps } = props;
+    const locale = _useLocale();
+    const externalLinkSR = props.rel?.includes('external') ? /*#__PURE__*/ jsx("span", {
+        className: "sr-only",
+        children: translations$1.externalLink[locale]
+    }) : null;
+    const reactNodeChildren = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            _children,
+            externalLinkSR
+        ]
+    });
+    const children = _innerWrapper ? _innerWrapper({
+        ...restProps,
+        children: typeof _children === 'function' ? (values)=>_children(values) : reactNodeChildren
+    }) : reactNodeChildren;
     return /*#__PURE__*/ jsx(Link$1, {
         ...restProps,
+        ref: ref,
+        "data-slot": "link",
         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 [&>svg]:transition-transform'),
         children: children
     });
@@ -992,8 +1014,9 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
         }
         isScrollingProgrammatically.current = true;
         const elementWithFocusVisible = carouselRef.current?.querySelector(':focus-visible');
+        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
         carouselItemsRef.current.children[scrollTargetIndex]?.scrollIntoView({
-            behavior: 'smooth',
+            behavior: prefersReducedMotion ? 'instant' : 'smooth',
             inline: 'start',
             block: 'nearest'
         });
@@ -1121,7 +1144,9 @@ const Carousel = ({ className, children, onChange, ...rest })=>{
                     {
                         carouselItemsRef,
                         onScroll,
-                        activeIndex: scrollTargetIndex
+                        activeIndex: scrollTargetIndex,
+                        handlePrevious,
+                        handleNext
                     }
                 ],
                 [
@@ -1192,14 +1217,35 @@ const CarouselItemsContext = /*#__PURE__*/ createContext({
     activeIndex: 0
 });
 const CarouselItems = ({ className, children })=>{
+    const { carouselItemsRef, onScroll, activeIndex, handlePrevious, handleNext } = useContext(CarouselItemsContext);
+    const prefersReducedMotion = useRef(window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+    // Update the ref when the media query changes
+    useEffect(()=>{
+        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const handleChange = (e)=>{
+            prefersReducedMotion.current = e.matches;
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return ()=>mediaQuery.removeEventListener('change', handleChange);
+    }, []);
     const handleKeyDown = (event)=>{
         // Prevent default behavior when holding down arrow keys (when repeat is true)
         // The default behavior in scroll snapping causes a staggering scroll effect that feels janky
         if (event.repeat && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
             event.preventDefault();
+            return;
+        }
+        // For users with prefers-reduced-motion, trigger button click behavior instead of native scroll
+        if (prefersReducedMotion.current) {
+            if (event.key === 'ArrowLeft' && handlePrevious) {
+                event.preventDefault();
+                handlePrevious();
+            } else if (event.key === 'ArrowRight' && handleNext) {
+                event.preventDefault();
+                handleNext();
+            }
         }
     };
-    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",
@@ -1926,50 +1972,61 @@ const Hero = ({ variant, className, children, ...rest })=>{
     });
 };
 
-const LinkList = ({ className, children, ...restProps })=>{
-    const numberofLinks = Children.count(children);
-    return /*#__PURE__*/ jsx("div", {
-        className: cx(className, '@container'),
-        ...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-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'
-            ]),
-            children: children
-        })
+// Sets the correct icons for each link in the link list
+const _LinkProvider = ({ children })=>/*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                _LinkContext,
+                {
+                    _innerWrapper: ({ children, download, rel })=>(values)=>{
+                            let Icon = ArrowRight;
+                            if (download) {
+                                Icon = Download;
+                            } else if (rel?.includes('external')) {
+                                Icon = LinkExternal;
+                            }
+                            return /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    typeof children === 'function' ? children({
+                                        ...values,
+                                        defaultChildren: null
+                                    }) : children,
+                                    /*#__PURE__*/ jsx(Icon, {})
+                                ]
+                            });
+                        }
+                }
+            ]
+        ],
+        children: children
     });
-};
-const LinkListItem = ({ children, isExternal, className, ...restProps })=>{
-    let Icon = ArrowRight;
-    let iconTransition = cx('group-hover:motion-safe:translate-x-1');
-    if (restProps.download) {
-        Icon = Download;
-        iconTransition = cx('group-hover:motion-safe:translate-y-1');
-    } else if (isExternal) {
-        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-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 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: iconTransition
-                })
+const LinkListContainer = ({ className, ...restProps })=>// Dual providers makes for easier typing and more readable code
+    /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                HeadingContext,
+                {
+                    size: 'm'
+                }
             ]
+        ],
+        children: /*#__PURE__*/ jsx(_LinkProvider, {
+            children: /*#__PURE__*/ jsx("div", {
+                className: cx(className, 'link-list-container'),
+                ...restProps
+            })
         })
     });
-};
+const LinkList = (props)=>/*#__PURE__*/ jsx(_LinkProvider, {
+        children: /*#__PURE__*/ jsx("ul", {
+            ...props,
+            "data-slot": "link-list"
+        })
+    });
+const LinkListItem = (props)=>/*#__PURE__*/ jsx("li", {
+        ...props,
+        "data-slot": "link-list-item"
+    });
 
 const DialogTrigger = (props)=>/*#__PURE__*/ jsx(DialogTrigger$1, {
         ...props
@@ -2831,4 +2888,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, Disclosure, DisclosureButton, DisclosurePanel, 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, 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, TableColumnResizer as UNSAFE_TableColumnResizer, TableContainer as UNSAFE_TableContainer, 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, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, LinkList, LinkListContainer, LinkListItem, 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, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, Link as UNSAFE_Link, 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, TableColumnResizer as UNSAFE_TableColumnResizer, TableContainer as UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, Tabs as UNSAFE_Tabs, VideoLoop, _LinkContext, _useLocale as useLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -24,7 +24,6 @@
     "@react-aria/utils": "^3.29.1",
     "@react-stately/form": "^3.1.5",
     "@react-stately/utils": "^3.10.7",
-    "@types/node": "^24.0.0",
     "cva": "^1.0.0-0",
     "react-aria": "^3.41.1",
     "react-aria-components": "^1.10.1",
@@ -35,7 +34,8 @@
     "react": "^19"
   },
   "devDependencies": {
-    "tailwindcss": "4.1.16"
+    "@types/node": "^24.0.0",
+    "tailwindcss": "4.1.17"
   },
   "scripts": {
     "build": "bunchee"