@obosbbl/grunnmuren-react 2.1.0 → 2.2.0

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { RouterProvider, ButtonProps as ButtonProps$1, LinkProps, 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, ContextValue, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, DisclosureProps as DisclosureProps$1, FileTriggerProps as FileTriggerProps$1, TextProps, LabelProps, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, DialogProps as DialogProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TagProps as TagProps$1 } from 'react-aria-components';
-export { ListBoxItemProps as ComboboxItemProps, Form, LabelProps, ListBoxItemProps as SelectItemProps, DisclosureGroup as UNSAFE_DisclosureGroup, DisclosureGroupProps as UNSAFE_DisclosureGroupProps } from 'react-aria-components';
+export { ListBoxItemProps as ComboboxItemProps, Form, Group, LabelProps, ListBoxItemProps as SelectItemProps, DisclosureGroup as UNSAFE_DisclosureGroup, DisclosureGroupProps as UNSAFE_DisclosureGroupProps } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { Ref, HTMLProps, ReactNode, RefAttributes, HTMLAttributes, RefObject, Dispatch, SetStateAction, ComponentProps } from 'react';
@@ -359,9 +359,9 @@ type Props = VariantProps<typeof alertVariants> & {
 };
 declare const Alertbox: ({ children, role, className, icon, variant, isDismissable, isDismissed, onDismiss, isExpandable, }: Props) => react_jsx_runtime.JSX.Element | undefined;
 
-type HeadingProps = HTMLProps<HTMLHeadingElement> & {
+type HeadingProps = Omit<HTMLProps<HTMLHeadingElement>, 'size'> & VariantProps<typeof headingVariants> & {
     children?: React.ReactNode;
-    /** The level of the heading */
+    /** The semantic level of the heading */
     level: 1 | 2 | 3 | 4 | 5 | 6;
     /** @private Used internally for slotted components */
     _innerWrapper?: (children: React.ReactNode) => React.ReactNode;
@@ -371,6 +371,15 @@ type HeadingProps = HTMLProps<HTMLHeadingElement> & {
     ref?: Ref<HTMLHeadingElement>;
 };
 declare const HeadingContext: react.Context<ContextValue<Partial<HeadingProps>, HTMLHeadingElement>>;
+declare const headingVariants: (props?: ({
+    size?: "s" | "xl" | "l" | "m" | "xs" | undefined;
+} & ({
+    class?: cva.ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: cva.ClassValue;
+})) | undefined) => string;
 declare const Heading: ({ ref, ...props }: HeadingProps) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
 declare const ContentContext: react.Context<ContextValue<Partial<ContentProps>, HTMLDivElement>>;
 type ContentProps = HTMLProps<HTMLDivElement> & {
@@ -593,9 +602,18 @@ declare function TagList(props: TagListProps): react_jsx_runtime.JSX.Element;
  */
 declare function Tag(props: TagProps): react_jsx_runtime.JSX.Element;
 
-type HeroProps = HTMLProps<HTMLDivElement> & {
+type HeroProps = HTMLProps<HTMLDivElement> & VariantProps<typeof variants> & {
     children: React.ReactNode;
 };
-declare const Hero: ({ className, children }: HeroProps) => react_jsx_runtime.JSX.Element;
+declare const variants: (props?: ({
+    variant?: "standard" | "full-bleed" | "two-column" | undefined;
+} & ({
+    class?: cva.ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: cva.ClassValue;
+})) | undefined) => string;
+declare const Hero: ({ variant, className, children }: HeroProps) => 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, 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, 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, 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

@@ -1,10 +1,10 @@
 '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, 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 } from 'react-aria-components';
-export { Form, DisclosureGroup as UNSAFE_DisclosureGroup } 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, DisclosureContext, DisclosureGroupStateContext, DEFAULT_SLOT, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, DialogTrigger as DialogTrigger$1, Modal as Modal$1, Dialog as Dialog$1, ModalOverlay as ModalOverlay$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1, GroupContext } from 'react-aria-components';
+export { Form, Group, DisclosureGroup as UNSAFE_DisclosureGroup } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, Error, ChevronRight, ChevronLeft, PlayerPause, PlayerPlay, Trash, User } from '@obosbbl/grunnmuren-icons-react';
 import { useLayoutEffect, filterDOMProps, mergeRefs, mergeProps, useObjectRef, useFormReset, useUpdateEffect } from '@react-aria/utils';
-import { cx, cva, compose } from 'cva';
+import { cva, cx, compose } from 'cva';
 import { createContext, Children, useId, useState, useRef, useEffect, useContext, useCallback } from 'react';
 import { useProgressBar, useDateFormatter, useFocusRing, useDisclosure, useField } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
@@ -33,13 +33,27 @@ function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
 }
 
 const HeadingContext = /*#__PURE__*/ createContext({});
+const headingVariants = cva({
+    variants: {
+        /** The visual text size of the heading */ size: {
+            xl: 'heading-xl',
+            l: 'heading-l',
+            m: 'heading-m',
+            s: 'heading-s',
+            xs: 'heading-xs'
+        }
+    }
+});
 const Heading = ({ ref = null, ...props })=>{
     [props, ref] = useContextProps(props, ref, HeadingContext);
-    const { children, level, className, _innerWrapper: innerWrapper, _outerWrapper: outerWrapper, ...restProps } = props;
+    const { children, level, size, className, _innerWrapper: innerWrapper, _outerWrapper: outerWrapper, ...restProps } = props;
+    const _className = headingVariants({
+        size
+    });
     const Element = `h${level}`;
     const content = /*#__PURE__*/ jsx(Element, {
         ...restProps,
-        className: className,
+        className: cx(className, _className),
         "data-slot": "heading",
         children: innerWrapper ? innerWrapper(children) : children
     });
@@ -1321,7 +1335,7 @@ const VideoLoop = ({ src, format, alt, className })=>{
                 "aria-hidden": true,
                 ref: videoRef,
                 // cursor-pointer is not working on the button below, so we add it here for the same effect
-                className: "h-full max-h-[inherit] w-full cursor-pointer object-cover",
+                className: "h-full max-h-[inherit] w-full cursor-pointer rounded-[inherit] object-cover",
                 playsInline: true,
                 loop: userPrefersReducedMotion === false,
                 autoPlay: userPrefersReducedMotion === false,
@@ -1343,7 +1357,7 @@ const VideoLoop = ({ src, format, alt, className })=>{
                 "aria-hidden": true,
                 type: "button",
                 onClick: ()=>setShouldPlay((prevState)=>!prevState),
-                className: cx('absolute top-0 right-0 bottom-0 left-0 m-auto grid place-items-center', 'focus-visible:outline-focus focus-visible:outline-focus-offset', // Setting the opacity to 0 before applying the transition below will ensure the button only fades in after the video has started playing
+                className: cx('absolute top-0 right-0 bottom-0 left-0 m-auto grid place-items-center', 'focus-visible:outline-focus focus-visible:outline-focus-offset', 'rounded-[inherit]', // Setting the opacity to 0 before applying the transition below will ensure the button only fades in after the video has started playing
                 shouldPlay && 'opacity-0', isPlaying && [
                     'transition-opacity duration-200',
                     // Only show the pause button when the video is hovered or focused
@@ -1944,18 +1958,96 @@ const tagVariants = cva({
     });
 }
 
-const Hero = ({ className, children })=>{
-    return /*#__PURE__*/ jsx("div", {
-        className: cx(// Wrap text content in a container
-        '*:data-[slot="content"]:container', // Style the Hero heading
-        '**:data-[slot="heading"]:heading-l', // Spacing between the media and the text content above it
-        '*:data-[slot="media"]:mt-8 lg:*:data-[slot="media"]:mt-10', // Responsive heights for the <Media> wrapper component
-        // 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]', // Match the heights of the <Media> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
-        // 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]', // Position the media content to fill the entire viewport width
-        '*:data-[slot="media"]:*:absolute *:data-[slot="media"]:*:left-0 *:data-[slot="media"]:*:w-full *:data-[slot="media"]:*:object-cover', className),
-        children: children
+const roundedMediaCorners = '*:data-[slot="media"]:*:rounded-3xl';
+// Common variant for "standard" and "full-bleed" Hero variants
+const oneColumnLayout = [
+    // Vertical spacing in the <Content>
+    'lg:*:data-[slot="content"]:gap-y-4',
+    // Main text content takes up 9 columns on medium screens and above
+    'lg:*:data-[slot="content"]:col-span-9',
+    // Make sure other elements than <Content> and <Media> (i.e CTA) does not span the full width on small screens
+    '*:not-data-[slot="content"]:not-data-[slot="media"]:w-fit',
+    // Other elements than <Content> and <Media> (e.g. CTA, SVG logo or Badge) take up 3 columns on medium screens and above, and are right aligned
+    'lg:*:not-data-[slot="content"]:not-data-[slot="media"]:col-span-3 lg:*:not-data-[slot="content"]:not-data-[slot="media"]:justify-self-end',
+    // <Media> content takes up the full width on medium screens and above
+    'lg:*:data-[slot="media"]:col-span-full *:data-[slot="media"]:*:w-full',
+    // Aligns <Content> and any element beside it (e.g. <Media>, <Badge>, <CTA> etc.) to the bottom of the <Content> container
+    'lg:items-end'
+];
+const variants = cva({
+    base: [
+        'container',
+        // Grid variant to position the Hero's content
+        'grid lg:grid-cols-12 lg:gap-x-12 xl:gap-x-16',
+        'gap-y-10 lg:gap-y-12',
+        // Enable vertical gap within <Content>
+        '*:data-[slot="content"]:grid',
+        // Vertical spacing in the <Content>
+        '*:data-[slot="content"]:gap-y-3',
+        // Make sure <Media> content fills any available vertical and horizontal space
+        '*:data-[slot="media"]:*:object-cover'
+    ],
+    variants: {
+        /**
+     * Defines the variant of the Hero
+     * @default standard
+     * */ variant: {
+            standard: [
+                roundedMediaCorners,
+                oneColumnLayout
+            ],
+            'full-bleed': [
+                oneColumnLayout,
+                // 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] lg:*: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]',
+                // Match the heights of the <Media> wrapper for the Media content (e.g. image, VideoLoop, video etc.)
+                // 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] lg:*: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]',
+                // Position the media content to fill the entire viewport width
+                '*:data-[slot="media"]:*:absolute *:data-[slot="media"]:*:left-0'
+            ],
+            'two-column': [
+                'lg:items-center lg:*:col-span-6',
+                // Vertical spacing in the <Content>
+                'lg:*:data-[slot="content"]:gap-y-7',
+                roundedMediaCorners,
+                // Set media aspect ratio to 1:1 (square)
+                'lg:*:data-[slot="media"]:*:aspect-[1/1]'
+            ]
+        }
+    },
+    defaultVariants: {
+        variant: 'standard'
+    }
+});
+const Hero = ({ variant, className, children })=>{
+    const variantsClassName = variants({
+        variant,
+        className
+    });
+    return /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                HeadingContext,
+                {
+                    // Sets the default heading size for the Hero based on the variant
+                    size: variant === 'two-column' ? 'xl' : 'l'
+                }
+            ],
+            [
+                GroupContext,
+                {
+                    // Prevents the group from being announced as a group by screen readers
+                    // The Group component is used to group the Hero's CTA buttons together visually, and has no semantic meaning
+                    role: 'presentation',
+                    className: 'flex flex-wrap gap-3 *:w-fit'
+                }
+            ]
+        ],
+        children: /*#__PURE__*/ jsx("div", {
+            className: cx(variantsClassName, className),
+            children: children
+        })
     });
 };
 

package/package.json

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