@obosbbl/grunnmuren-react 2.3.2 → 2.3.4

package/dist/index.d.mts

@@ -634,8 +634,16 @@ type CarouselProps = {
     children: React.ReactNode;
     /** Additional CSS className for the element. */
     className?: string;
+    /**
+     * Callback that is triggered when a user navigates to new item in the Carousel.
+     * The argument to the callback is an object containing `index` of the new item scrolled into view and the `id` of that item (if set on the `<CarouselItem>`)
+     * It also provides `prevIndex` which is the index of the previous item that was in view
+     * And `prevId`, which is the id of the previous item that was in view (if set on the `<CarouselItem>`)
+     * @param item { index: number; id?: string; prevIndex: number; prevId?: string }
+     */
+    onChange?: (item: CarouselItem) => void;
 };
-declare const Carousel: ({ className, children }: CarouselProps) => react_jsx_runtime.JSX.Element;
+declare const Carousel: ({ className, children, onChange }: CarouselProps) => react_jsx_runtime.JSX.Element;
 type CarouselItemsProps = {
     /** The <CarouselItem/> components to be displayed within the carousel. */
     children: React.ReactNode;
@@ -648,7 +656,16 @@ type CarouselItemProps = {
     children: React.ReactNode;
     /** Additional CSS className for the element. */
     className?: string;
+    id?: string;
+};
+type CarouselItem = Pick<CarouselItemProps, 'id'> & {
+    /** The index of the item that is currently in view */
+    index: number;
+    /** The index of the previous item that was in view */
+    prevIndex: number;
+    /** The id of the previous item that was in view */
+    prevId?: CarouselItemProps['id'];
 };
-declare const CarouselItem: ({ className, children }: CarouselItemProps) => react_jsx_runtime.JSX.Element;
+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 };

package/dist/index.mjs

@@ -168,7 +168,7 @@ function AccordionItem(props) {
                     HeadingContext,
                     {
                         // Negative margin to strech the button to the entire with of the accordion (to support containers with a background color)
-                        className: 'font-semibold leading-7 -mx-2 text-base',
+                        className: 'font-medium leading-7 -mx-2 text-base',
                         // Supply a default level here to make this typecheck ok. Will be overwritten with the consumers set heading level anyways
                         level: 3,
                         _innerWrapper: (children)=>/*#__PURE__*/ jsxs("button", {
@@ -2025,6 +2025,7 @@ const oneColumnLayout = [
     // Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
     'lg:items-end'
 ];
+const nonFullBleedAspectRatiosForSmallScreens = '*:data-[slot="media"]:*:aspect-[1/1] sm:*:data-[slot="media"]:*:aspect-4/3 md:*:data-[slot="media"]:*:aspect-3/2';
 const variants = cva({
     base: [
         'container px-0',
@@ -2045,19 +2046,26 @@ const variants = cva({
      * */ variant: {
             standard: [
                 roundedMediaCorners,
-                oneColumnLayout
+                oneColumnLayout,
+                nonFullBleedAspectRatiosForSmallScreens,
+                'lg:*:data-[slot="media"]:*:aspect-2/1'
             ],
             'full-bleed': [
                 oneColumnLayout,
                 // Position the media and carousel content to fill the entire viewport width
                 '*:data-[slot="media"]:*:absolute *:data-[slot="media"]:*:left-0',
-                '*:data-[slot="carousel"]:*:absolute *:data-[slot="carousel"]:*:left-0',
+                // Special case for Carousel, where the Media is nested inside a CarouselItem
+                '*:data-[slot="carousel"]:**:data-[slot="media"]:w-full *:data-[slot="carousel"]:*:absolute *:data-[slot="carousel"]:*:left-0',
                 // Match the heights of the <Media> or <Carousel> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
                 // This is necessary due to the absolute positioning of the media and carousel containers in this variant
                 // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
-                '*:data-[slot="media"]:*:h-70 sm:*:data-[slot="media"]:*:h-[25rem] md:*:data-[slot="media"]:*:h-[30rem] lg:*:data-[slot="media"]:*:h-[35rem] xl:*:data-[slot="media"]:*:h-[40rem] 2xl:*:data-[slot="media"]:*:h-[42rem] 3xl:*:data-[slot="media"]:*:h-[48rem] 4xl:*:data-[slot="media"]:*:h-[53rem]',
+                '**:data-[slot="media"]:h-70 sm:**:data-[slot="media"]:h-[25rem] md:**:data-[slot="media"]:h-[30rem] lg:**:data-[slot="media"]:h-[35rem] xl:**:data-[slot="media"]:h-[40rem] 2xl:**:data-[slot="media"]:h-[42rem] 3xl:**:data-[slot="media"]:h-[48rem] 4xl:**:data-[slot="media"]:h-[53rem]',
+                // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
+                '**:data-[slot="media"]:*:h-70 sm:**:data-[slot="media"]:*:h-[25rem] md:**:data-[slot="media"]:*:h-[30rem] lg:**:data-[slot="media"]:*:h-[35rem] xl:**:data-[slot="media"]:*:h-[40rem] 2xl:**:data-[slot="media"]:*:h-[42rem] 3xl:**:data-[slot="media"]:*:h-[48rem] 4xl:**:data-[slot="media"]:*:h-[53rem]',
                 // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
                 '*:data-[slot="carousel"]:h-70 sm:*:data-[slot="carousel"]:h-[25rem] md:*:data-[slot="carousel"]:h-[30rem] lg:*:data-[slot="carousel"]:h-[35rem] xl:*:data-[slot="carousel"]:h-[40rem] 2xl:*:data-[slot="carousel"]:h-[42rem] 3xl:*:data-[slot="carousel"]:h-[48rem] 4xl:*:data-[slot="carousel"]:h-[53rem]',
+                // Override aspect ratio of the media and carousel-item slots (since we can not use aspect for full-bleed layout)
+                '**:data-[slot="carousel-item"]:data-[slot="media"]:*:aspect-none',
                 '**:data-[slot="carousel-controls"]:container **:data-[slot="carousel-controls"]:right-0 **:data-[slot="carousel-controls"]:bottom-4 **:data-[slot="carousel-controls"]:left-0 **:data-[slot="carousel-controls"]:justify-end',
                 // Override rounded corners of Carousel slots
                 '*:data-[slot="carousel"]:*:rounded-none'
@@ -2067,6 +2075,7 @@ const variants = cva({
                 // Vertical spacing in the <Content>
                 'lg:*:data-[slot="content"]:gap-y-7',
                 roundedMediaCorners,
+                nonFullBleedAspectRatiosForSmallScreens,
                 // Set media aspect ratio to 1:1 (square)
                 'lg:*:data-[slot="media"]:*:aspect-[1/1]'
             ]
@@ -2087,7 +2096,9 @@ const Hero = ({ variant, className, children })=>{
                 HeadingContext,
                 {
                     // Sets the default heading size for the Hero based on the variant
-                    size: variant === 'two-column' ? 'xl' : 'l'
+                    size: variant === 'two-column' ? 'xl' : 'l',
+                    className: // word-break:break-word to allow long words to break (this is necessary to make hyphens work in grid containers in Safari)
+                    'hyphens-auto text-pretty [word-break:break-word]'
                 }
             ],
             [
@@ -2107,7 +2118,7 @@ const Hero = ({ variant, className, children })=>{
     });
 };
 
-const Carousel = ({ className, children })=>{
+const Carousel = ({ className, children, onChange })=>{
     const ref = useRef(null);
     const locale = _useLocale();
     const { previous, next } = translations$1;
@@ -2120,6 +2131,9 @@ const Carousel = ({ className, children })=>{
     }, [
         scrollTargetIndex
     ]);
+    // Keep track of the previous index to determine if the user is scrolling forward or backward
+    // This is used to determine which callback to call (onPrev or onNext)
+    const prevIndex = useRef(0);
     // Handle scrolling when user clicks the arrow icons
     useUpdateEffect(()=>{
         if (!ref.current) return;
@@ -2128,6 +2142,15 @@ const Carousel = ({ className, children })=>{
             inline: 'start',
             block: 'nearest'
         });
+        if (prevIndex.current !== scrollTargetIndex && onChange) {
+            onChange({
+                index: scrollTargetIndex,
+                id: ref.current.children[scrollTargetIndex]?.id,
+                prevIndex: prevIndex.current,
+                prevId: ref.current.children[prevIndex.current]?.id
+            });
+        }
+        prevIndex.current = scrollTargetIndex;
     }, [
         scrollTargetIndex
     ]);
@@ -2249,18 +2272,18 @@ const CarouselItems = ({ className, children })=>/*#__PURE__*/ jsx(CarouselItems
                 children: children
             })
     });
-const CarouselItem = ({ className, children })=>{
+const CarouselItem = ({ className, children, id })=>{
     return /*#__PURE__*/ jsx("div", {
         className: cx(className, 'shrink-0 basis-full snap-start'),
         "data-slot": "carousel-item",
+        id: id,
         children: /*#__PURE__*/ jsx(Provider, {
             values: [
                 [
                     MediaContext,
                     {
                         fit: 'cover',
-                        className: cx('data-[fit="contain"]:bg-blue-dark', '*:w-full', // biome-ignore lint/nursery/useSortedClasses: biome is unable to sort the custom classes for 3xl and 4xl breakpoints
-                        '*:h-70 sm:*:h-[25rem] lg:*:h-[35rem] xl:*:h-[40rem] 2xl:*:h-[42rem] 3xl:*:h-[48rem] 4xl:*:h-[53rem]')
+                        className: cx('data-[fit="contain"]:bg-blue-dark', '*:h-full *:w-full', 'aspect-1/1 max-sm:data-[fit="contain"]:*:object-cover sm:aspect-4/3 md:aspect-3/2 lg:aspect-2/1')
                     }
                 ]
             ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.3.2",
+  "version": "2.3.4",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -35,7 +35,7 @@
     "react": "^19"
   },
   "devDependencies": {
-    "tailwindcss": "4.1.7"
+    "tailwindcss": "4.1.10"
   },
   "scripts": {
     "build": "bunchee"