@obosbbl/grunnmuren-react 2.0.0-canary.53 → 2.0.0-canary.55

package/dist/index.d.mts

@@ -1,11 +1,12 @@
-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 } from 'react-aria-components';
-export { ListBoxItemProps as ComboboxItemProps, Form, ListBoxItemProps as SelectItemProps, DisclosureGroup as UNSAFE_DisclosureGroup, DisclosureGroupProps as UNSAFE_DisclosureGroupProps } from 'react-aria-components';
+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';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLProps, ReactNode, RefAttributes, HTMLAttributes } from 'react';
+import { HTMLProps, ReactNode, RefAttributes, HTMLAttributes, RefObject, Dispatch, SetStateAction, ComponentProps } from 'react';
 import * as cva from 'cva';
 import { VariantProps } from 'cva';
 import { DateFormatterOptions } from 'react-aria';
+import { FormValidationProps } from '@react-stately/form';
 
 type Locale = 'nb' | 'sv' | 'en';
 /**
@@ -503,6 +504,8 @@ type HeadingProps = HTMLProps<HTMLHeadingElement> & {
     level: 1 | 2 | 3 | 4 | 5 | 6;
     /** @private Used internally for slotted components */
     _innerWrapper?: (children: React.ReactNode) => React.ReactNode;
+    /** @private Used internally for slotted components */
+    _outerWrapper?: (children: React.ReactNode) => React.ReactNode;
 };
 declare const HeadingContext: react.Context<ContextValue<Partial<HeadingProps>, HTMLHeadingElement>>;
 declare const ContentContext: react.Context<ContextValue<Partial<ContentProps>, HTMLDivElement>>;
@@ -654,4 +657,82 @@ type DisclosurePanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'role'> & {
 } & RefAttributes<HTMLDivElement>;
 declare const DisclosurePanel: ({ ref: _ref, ..._props }: DisclosurePanelProps) => react_jsx_runtime.JSX.Element;
 
-export { _Accordion as Accordion, _AccordionItem as AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, _Backlink as Backlink, type BacklinkProps, _Badge as Badge, type BadgeProps, _Breadcrumb as Breadcrumb, type BreadcrumbProps, _Breadcrumbs as Breadcrumbs, type BreadcrumbsProps, _Button as Button, type ButtonProps, Caption, type CaptionProps, Card, CardLink, type CardLinkProps, type CardProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, type ComboboxProps, ListBoxSection as ComboboxSection, _Content as Content, ContentContext, type ContentProps, DateFormatter, type DateFormatterProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, _Heading as Heading, HeadingContext, type HeadingProps, type Locale, Media, type MediaProps, _NumberField as NumberField, type NumberFieldProps, _Radio as Radio, _RadioGroup as RadioGroup, type RadioGroupProps, type RadioProps, _Select as Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, type SelectProps, ListBoxSection as SelectSection, _TextArea as TextArea, type TextAreaProps, _TextField as TextField, type TextFieldProps, 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, VideoLoop, _useLocale as useLocale };
+type FileTriggerProps = Partial<FormValidationProps<File>> & FileTriggerProps$1 & Omit<HTMLAttributes<HTMLInputElement>, 'onSelect' | 'onChange' | 'required' | 'className'> & {
+    ref?: RefObject<HTMLInputElement | null>;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+};
+
+type FileUploadProps = Omit<FileTriggerProps, 'onSelect'> & {
+    children: ReactNode;
+    files?: File[];
+    onChange?: Dispatch<SetStateAction<File[]>>;
+    validate?: (files: File) => true | string;
+    isRequired?: boolean;
+    isInvalid?: boolean;
+    errorMessage?: string;
+};
+declare const FileUpload: ({ children, files: _files, onChange, validate, isInvalid: _isInvalid, errorMessage, isRequired, allowsMultiple, ref, ...fileTriggerProps }: FileUploadProps) => react_jsx_runtime.JSX.Element;
+
+type DescriptionProps = TextProps;
+declare function Description(props: DescriptionProps): react_jsx_runtime.JSX.Element;
+
+type ErrorMessageProps = TextProps;
+declare function ErrorMessage(props: ErrorMessageProps): react_jsx_runtime.JSX.Element;
+
+declare function Label(props: LabelProps): react_jsx_runtime.JSX.Element;
+
+type AvatarProps = ComponentProps<'img'>;
+declare const Avatar: ({ src, alt, className, onError, loading, ...rest }: AvatarProps) => react_jsx_runtime.JSX.Element;
+
+type DialogTriggerProps = DialogTriggerProps$1;
+declare const DialogTrigger: (props: DialogTriggerProps) => react_jsx_runtime.JSX.Element;
+type ModalProps = Omit<ModalOverlayProps, 'isDismissable'>;
+declare const Modal: ({ className, ...restProps }: ModalProps) => react_jsx_runtime.JSX.Element;
+type DialogProps = DialogProps$1 & {
+    children: React.ReactNode;
+};
+declare const Dialog: ({ className, children, ...restProps }: DialogProps) => react_jsx_runtime.JSX.Element;
+
+type TagGroupProps = Omit<TagGroupProps$1, 'className'> & RefAttributes<HTMLDivElement> & {
+    /**
+     * CSS classes to apply to the tag group
+     */
+    className?: string;
+    /**
+     * The function to call when the tag is removed
+     */
+    onRemove?: (key: React.Key) => void;
+    /**
+     * The selection mode for the tag group
+     * @default "single"
+     */
+    selectionMode?: 'single' | 'multiple';
+};
+type TagListProps = Omit<TagListProps$1<object>, 'className'> & RefAttributes<HTMLDivElement> & {
+    /**
+     * CSS classes to apply to the tag list
+     */
+    className?: string;
+};
+type TagProps = Omit<TagProps$1, 'className'> & RefAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+    /**
+     * CSS classes to apply to the tag
+     */
+    className?: string;
+};
+/**
+ * A group component for Tag components that enables selection and organization of options.
+ */
+declare function TagGroup(props: TagGroupProps): react_jsx_runtime.JSX.Element;
+/**
+ * A container component for Tag components within a TagGroup.
+ */
+declare function TagList(props: TagListProps): react_jsx_runtime.JSX.Element;
+/**
+ * Interactive tag component for selections, filtering, and categorization.
+ */
+declare function Tag(props: TagProps): react_jsx_runtime.JSX.Element;
+
+export { _Accordion as Accordion, _AccordionItem as AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, _Backlink as Backlink, type BacklinkProps, _Badge as Badge, type BadgeProps, _Breadcrumb as Breadcrumb, type BreadcrumbProps, _Breadcrumbs as Breadcrumbs, type BreadcrumbsProps, _Button as Button, type ButtonProps, Caption, type CaptionProps, Card, CardLink, type CardLinkProps, type CardProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, type ComboboxProps, ListBoxSection as ComboboxSection, _Content as Content, ContentContext, type ContentProps, DateFormatter, type DateFormatterProps, Description, type DescriptionProps, ErrorMessage, type ErrorMessageProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, _Heading as Heading, HeadingContext, type HeadingProps, Label, type Locale, Media, type MediaProps, _NumberField as NumberField, type NumberFieldProps, _Radio as Radio, _RadioGroup as RadioGroup, type RadioGroupProps, type RadioProps, _Select as Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, type SelectProps, ListBoxSection as SelectSection, type TagGroupProps, type TagListProps, type TagProps, _TextArea as TextArea, type TextAreaProps, _TextField as TextField, type TextFieldProps, Avatar as UNSAFE_Avatar, type AvatarProps as UNSAFE_AvatarProps, 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, 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,13 +1,17 @@
 '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 } 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 } from 'react-aria-components';
 export { Form, 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 } from '@obosbbl/grunnmuren-icons-react';
-import { useLayoutEffect, filterDOMProps } from '@react-aria/utils';
+import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, Error, ChevronRight, ChevronLeft, PlayerPause, PlayerPlay, Trash, User } from '@obosbbl/grunnmuren-icons-react';
+import { useLayoutEffect, filterDOMProps, useObjectRef, useFormReset, useUpdateEffect } from '@react-aria/utils';
 import { cx, cva, compose } from 'cva';
-import { createContext, forwardRef, Children, useId, useState, useRef, useEffect, useContext } from 'react';
-import { useProgressBar, useDateFormatter, useDisclosure } from 'react-aria';
+import { createContext, forwardRef, Children, useId, useState, useRef, useEffect, useContext, useCallback } from 'react';
+import { useProgressBar, useDateFormatter, useDisclosure, useField } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
+import { useFormValidation } from '@react-aria/form';
+import { useFormValidationState } from '@react-stately/form';
+import { useControlledState } from '@react-stately/utils';
+import { PressResponder } from '@react-aria/interactions';
 
 function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
     return /*#__PURE__*/ jsx(I18nProvider, {
@@ -32,14 +36,15 @@ const HeadingContext = /*#__PURE__*/ createContext({});
 const Heading = (props, ref)=>{
     // biome-ignore lint/style/noParameterAssign: fix when removing refs for React 19
     [props, ref] = useContextProps(props, ref, HeadingContext);
-    const { children, level, className, _innerWrapper: innerWrapper, ...restProps } = props;
+    const { children, level, className, _innerWrapper: innerWrapper, _outerWrapper: outerWrapper, ...restProps } = props;
     const Element = `h${level}`;
-    return /*#__PURE__*/ jsx(Element, {
+    const content = /*#__PURE__*/ jsx(Element, {
         ...restProps,
         className: className,
         "data-slot": "heading",
         children: innerWrapper ? innerWrapper(children) : children
     });
+    return outerWrapper ? outerWrapper(content) : content;
 };
 const ContentContext = /*#__PURE__*/ createContext({});
 const Content = (props, ref)=>{
@@ -211,6 +216,29 @@ function Badge(props, ref) {
 }
 const _Badge = /*#__PURE__*/ forwardRef(Badge);
 
+const translations$1 = {
+    close: {
+        nb: 'Lukk',
+        sv: 'Stäng',
+        en: 'Close'
+    },
+    pending: {
+        nb: 'venter',
+        sv: 'väntar',
+        en: 'pending'
+    },
+    showMore: {
+        nb: 'Les mer',
+        sv: 'Läs mer',
+        en: 'Read more'
+    },
+    showLess: {
+        nb: 'Vis mindre',
+        sv: 'Dölj',
+        en: 'Show less'
+    }
+};
+
 /**
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
  */ const buttonVariants = cva({
@@ -307,13 +335,6 @@ const _Badge = /*#__PURE__*/ forwardRef(Badge);
 function isLinkProps$1(props) {
     return !!props.href;
 }
-const translations$1 = {
-    pending: {
-        nb: 'venter',
-        sv: 'väntar',
-        en: 'pending'
-    }
-};
 function Button(props, ref) {
     const { children: _children, color, isIconOnly, isLoading, variant, isPending: _isPending, ...restProps } = props;
     const isPending = _isPending || isLoading;
@@ -354,7 +375,7 @@ function Button(props, ref) {
 const _Button = /*#__PURE__*/ forwardRef(Button);
 
 const formField = cx('group flex flex-col gap-2');
-const formFieldError = cx('w-fit rounded-sm bg-red-light px-2 py-1 text-red text-sm leading-6');
+const formFieldError = cx('w-fit bg-red-light px-2 py-1 text-red text-sm leading-6', 'group-data-[slot=file-upload]:rounded-lg');
 const input = cva({
     base: [
         // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
@@ -933,23 +954,6 @@ const alertVariants = cva({
         variant: 'info'
     }
 });
-const translations = {
-    close: {
-        nb: 'Lukk',
-        sv: 'Stäng',
-        en: 'Close'
-    },
-    showMore: {
-        nb: 'Les mer',
-        sv: 'Läs mer',
-        en: 'Read more'
-    },
-    showLess: {
-        nb: 'Vis mindre',
-        sv: 'Dölj',
-        en: 'Show less'
-    }
-};
 const Alertbox = ({ children, role, className, icon, variant = 'info', isDismissable = false, isDismissed, onDismiss, isExpandable })=>{
     const Icon = icon ?? iconMap[variant];
     const locale = _useLocale();
@@ -986,7 +990,7 @@ const Alertbox = ({ children, role, className, icon, variant = 'info', isDismiss
             isDismissable && /*#__PURE__*/ jsx("button", {
                 className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus-visible:-outline-offset-8 focus-visible:outline-focus'),
                 onClick: close,
-                "aria-label": translations.close[locale],
+                "aria-label": translations$1.close[locale],
                 type: "button",
                 children: /*#__PURE__*/ jsx(Close, {})
             }),
@@ -998,7 +1002,7 @@ const Alertbox = ({ children, role, className, icon, variant = 'info', isDismiss
                 "aria-controls": id,
                 type: "button",
                 children: [
-                    isExpanded ? translations.showLess[locale] : translations.showMore[locale],
+                    isExpanded ? translations$1.showLess[locale] : translations$1.showMore[locale],
                     /*#__PURE__*/ jsx(ChevronDown, {
                         className: cx('transition-transform duration-150 motion-reduce:transition-none', isExpanded && 'rotate-180')
                     })
@@ -1088,6 +1092,7 @@ const cardVariants = cva({
         // **** Content ****
         '[&_[data-slot="content"]]:flex [&_[data-slot="content"]]:flex-col [&_[data-slot="content"]]:gap-y-4',
         // **** Media ****
+        '[&_[data-slot="media"]_*]:pointer-events-none',
         '[&_[data-slot="media"]]:overflow-hidden',
         '[&_[data-slot="media"]]:relative',
         // Position media at the edges of the card (because of these negative margins the media-element must be a wrapper around the actual image or other media content)
@@ -1099,9 +1104,9 @@ const cardVariants = cva({
         // **** Card link ****
         // **** Hover ****
         // Enables the zoom hover effect on media (note that we can't use group-hover/card here, because there might be other clickable elements in the card aside from the heading)
-        '[&:has([data-slot="card-link"]_a:hover)_[data-slot="media"]>*:not([data-slot="badge"])]:scale-110',
+        '[&:has([data-slot="card-link"]_a:hover)_[data-slot="media"]>img]:scale-110',
         // **** Card link in Heading ****
-        '[&:has([data-slot="heading"]_[data-slot="card-link"]:hover)_[data-slot="media"]>*:not([data-slot="badge"])]:scale-110',
+        '[&:has([data-slot="heading"]_[data-slot="card-link"]:hover)_[data-slot="media"]>img]:scale-110',
         // Border (bottom/top) is set to transparent to make sure the bottom underline is not visible when the card is hovered
         // Border top is set to even out the border bottom used for the underline
         '[&_[data-slot="heading"]_[data-slot="card-link"]]:no-underline',
@@ -1499,4 +1504,421 @@ const DisclosurePanel = ({ ref: _ref, ..._props })=>{
     });
 };
 
-export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Badge as Badge, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, Caption, Card, CardLink, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, _Content as Content, ContentContext, DateFormatter, Footer, GrunnmurenProvider, _Heading as Heading, HeadingContext, Media, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, _TextArea as TextArea, _TextField as TextField, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, DisclosurePanel as UNSAFE_DisclosurePanel, VideoLoop, _useLocale as useLocale };
+/**
+ * A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.
+ */ const FileTrigger = (props)=>{
+    const { onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, acceptDirectory, ref, isInvalid, isRequired, name, value, ...rest } = props;
+    const inputRef = useObjectRef(ref);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(PressResponder, {
+                onPress: ()=>{
+                    if (inputRef.current?.value) {
+                        inputRef.current.value = '';
+                    }
+                    inputRef.current?.click();
+                },
+                children: children
+            }),
+            /*#__PURE__*/ jsx(Input, {
+                ...rest,
+                required: isRequired,
+                "aria-invalid": isInvalid,
+                "data-invalid": isInvalid,
+                "data-rac": true,
+                name: Array.isArray(name) ? name.join(' ') : name,
+                type: "file",
+                ref: inputRef,
+                accept: acceptedFileTypes?.toString(),
+                onChange: (e)=>onSelect?.(e.target.files),
+                capture: defaultCamera,
+                multiple: allowsMultiple,
+                // @ts-expect-error
+                webkitdirectory: acceptDirectory ? '' : undefined,
+                // This is a work around to prevent error in the console when attempting to submit a form with a required and empty file input
+                // RAC uses display: none, which prevents the file input from being focused.
+                // What we do instead is to hide it visually using custom CSS, so that the native HTML validation messages are still hidden. Which is why
+                // we don't use the sr-only class.
+                className: "absolute left-[-1000vw] opacity-0",
+                // Finally, we add aria-hidden to prevent the file input from being read by screen readers
+                "aria-hidden": true,
+                // Prevent focus trap when tabbing (since focus is delegated to the button)
+                tabIndex: -1
+            })
+        ]
+    });
+};
+
+const translations = {
+    remove: {
+        nb: 'Fjern',
+        sv: 'Ta bort',
+        en: 'Remove'
+    }
+};
+/**
+ * Converts an array of files to a DataTransfer object which can be used as a FileList.
+ * This is necessary for setting the files on a native file input.
+ * @param files An array of files
+ * @returns The files as a DataTransfer object which can be used as a FileList
+ */ function filesToDataTransfer(files) {
+    const dataTransfer = new DataTransfer();
+    for (const file of files){
+        dataTransfer.items.add(file);
+    }
+    return dataTransfer.files;
+}
+/**
+ * Generates unique file names for files with the same original name.
+ * Any duplicate files will have a number in parentheses appended to their name.
+ * @param files An array of files
+ * @returns An array of files with unique names
+ */ function uniqueFileNames(files) {
+    const fileNameCounts = {};
+    return files.map((file)=>{
+        const fileName = file.name;
+        // Filter out the extension and any trailing numbers in parentheses
+        const baseName = fileName.replace(/\s*\(\d+\)|(\.[^.]+)$/g, '');
+        // Extract the file extension
+        const extension = fileName.match(/(\.[^.]+)$/)?.[0] || '';
+        if (!fileNameCounts[baseName]) {
+            // Extract any number from the file name (if any, otherwise default to 0)
+            const baseNameCount = Number.parseInt(fileName.match(/\((\d+)\)/)?.[1] ?? '0');
+            fileNameCounts[baseName] = baseNameCount;
+        }
+        fileNameCounts[baseName]++;
+        if (fileNameCounts[baseName] > 1) {
+            return new File([
+                file
+            ], // Follow the pattern of adding a number in parentheses to the base name (e.g. "file (1).txt")
+            `${baseName} (${fileNameCounts[baseName] - 1})${extension}`);
+        }
+        return file;
+    });
+}
+const FileUpload = ({ children, files: _files, onChange, validate, isInvalid: _isInvalid, errorMessage, isRequired, allowsMultiple, ref, ...fileTriggerProps })=>{
+    const [files, setFiles] = useState(_files ?? []);
+    const isInvalid = !!errorMessage || _isInvalid;
+    const id = useId();
+    const locale = _useLocale();
+    const _inputRef = useRef(null);
+    const inputRef = ref ?? _inputRef;
+    const slottedContext = useSlottedContext(FormContext) || {};
+    const validationBehavior = fileTriggerProps.validationBehavior ?? slottedContext.validationBehavior ?? 'native';
+    const validateFiles = useCallback((files)=>{
+        if (validate === undefined) return true;
+        const errors = [];
+        for (const file of files){
+            if (!validate) continue;
+            const validation = validate(file);
+            if (typeof validation === 'string') errors.push(validation);
+        }
+        if (errors.length === 0) return true;
+        return errors;
+    }, [
+        validate
+    ]);
+    const validationState = useFormValidationState({
+        ...fileTriggerProps,
+        validationBehavior,
+        validate: validateFiles,
+        isRequired,
+        isInvalid,
+        value: _files ?? files ?? null
+    });
+    const controlledOrUncontrolledFiles = // Use controlled files if they are provided, otherwise use internal files - but map them to File objects (remove validation prop)
+    _files ?? files;
+    useEffect(()=>{
+        // Keep the native file input in sync with the internal file state
+        if (inputRef.current) {
+            inputRef.current.files = filesToDataTransfer(controlledOrUncontrolledFiles);
+        }
+    }, [
+        controlledOrUncontrolledFiles,
+        inputRef
+    ]);
+    const { fieldProps } = useField({
+        ...fileTriggerProps,
+        validate: validateFiles,
+        validationBehavior,
+        isInvalid,
+        errorMessage
+    });
+    const [value, setValue] = useControlledState(_files, [], onChange);
+    useFormReset(inputRef, value, setValue);
+    useFormValidation({
+        ...fileTriggerProps,
+        validationBehavior,
+        validate: validateFiles,
+        isRequired,
+        isInvalid
+    }, validationState, inputRef);
+    const buttonRef = useRef(null);
+    const { displayValidation } = validationState;
+    useUpdateEffect(()=>{
+        // Fixes a bug where validation state is not reset after being set to customError
+        // This happens if the file upload ends up in an invalid state and then is emptied: the old valdiations is still lingering
+        if (controlledOrUncontrolledFiles.length === 0 && validationState.displayValidation.validationDetails.customError) {
+            validationState.commitValidation();
+        }
+    }, [
+        controlledOrUncontrolledFiles
+    ]);
+    return /*#__PURE__*/ jsx(Provider, {
+        values: [
+            [
+                FieldErrorContext,
+                displayValidation
+            ]
+        ],
+        children: /*#__PURE__*/ jsxs("div", {
+            "data-slot": "file-upload",
+            className: "group grid w-72 max-w-full gap-2",
+            "data-required": isRequired,
+            children: [
+                /*#__PURE__*/ jsx(Provider, {
+                    values: [
+                        [
+                            LabelContext,
+                            {
+                                htmlFor: id
+                            }
+                        ],
+                        [
+                            ButtonContext,
+                            {
+                                // The button acts as the trigger for the file input, which is why we connect the label to the button id
+                                id,
+                                // Needed for RAC auto-focusing behavior to work
+                                ref: buttonRef,
+                                className: 'w-fit'
+                            }
+                        ],
+                        [
+                            InputContext,
+                            fieldProps
+                        ]
+                    ],
+                    children: /*#__PURE__*/ jsx(FileTrigger, {
+                        ...fileTriggerProps,
+                        isRequired: isRequired,
+                        allowsMultiple: allowsMultiple,
+                        onSelect: (selectedFiles)=>{
+                            if (selectedFiles === null) return;
+                            const newFiles = Array.from(selectedFiles);
+                            // For controlled component
+                            onChange?.((prevFiles)=>allowsMultiple ? uniqueFileNames(prevFiles.concat(newFiles)) : newFiles);
+                            // For internal file state
+                            setFiles((prevFiles)=>allowsMultiple ? uniqueFileNames(prevFiles.concat(newFiles)) : newFiles);
+                        },
+                        isInvalid: isInvalid || validationState.displayValidation.isInvalid,
+                        ref: inputRef,
+                        // Delegate focus to the button when the hidden file input is focused (for RAC auto-focusing behavior)
+                        onFocus: ()=>buttonRef.current?.focus(),
+                        children: children
+                    })
+                }),
+                /*#__PURE__*/ jsx("ul", {
+                    className: "mt-4 grid gap-y-2",
+                    children: controlledOrUncontrolledFiles.map((file, fileIndex)=>{
+                        let fileName = file.name;
+                        if (fileTriggerProps.acceptDirectory && file.webkitRelativePath !== '') {
+                            fileName = file.webkitRelativePath;
+                        }
+                        const validation = validate?.(file) ?? true;
+                        const hasError = validation !== true;
+                        return /*#__PURE__*/ jsxs("li", {
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: cx('flex items-center justify-between gap-2 rounded-lg border-2 px-4 py-2', hasError ? 'border-red bg-red-light' : 'border-gray bg-gray-lightest'),
+                                    children: [
+                                        fileName,
+                                        ' ',
+                                        /*#__PURE__*/ jsx("button", {
+                                            className: cx('-m-2 grid h-11 w-11 shrink-0 place-items-center rounded-xl', // Focus styles
+                                            'focus-visible:-outline-offset-8 focus-visible:outline-focus'),
+                                            onClick: ()=>{
+                                                // For controlled component
+                                                onChange?.((prevFiles)=>prevFiles.filter((_, index)=>index !== fileIndex));
+                                                // For internal file state
+                                                setFiles((prevFiles)=>prevFiles.filter((_, index)=>index !== fileIndex));
+                                            },
+                                            "aria-label": translations.remove[locale],
+                                            type: "button",
+                                            children: /*#__PURE__*/ jsx(Trash, {})
+                                        })
+                                    ]
+                                }),
+                                hasError && /*#__PURE__*/ jsx(ErrorMessage, {
+                                    className: "mt-1 block w-full",
+                                    children: validation
+                                })
+                            ]
+                        }, fileName);
+                    })
+                }),
+                !!errorMessage || controlledOrUncontrolledFiles.length === 0 && /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                    errorMessage: errorMessage
+                })
+            ]
+        })
+    });
+};
+
+const baseClassName = 'h-20 w-20 flex-shrink-0 rounded-full';
+const Avatar = ({ src, alt = '', className, onError, loading = 'lazy', ...rest })=>{
+    const [hasError, setHasError] = useState(false);
+    const hasValidImage = !hasError && src;
+    return hasValidImage ? /*#__PURE__*/ jsx("img", {
+        ...rest,
+        src: src,
+        alt: alt,
+        loading: loading,
+        className: cx(className, baseClassName, 'object-cover'),
+        onError: (event)=>{
+            onError?.(event);
+            setHasError(true);
+        }
+    }) : /*#__PURE__*/ jsx("div", {
+        className: cx(className, baseClassName, 'grid place-items-center bg-gray-light text-gray-dark'),
+        children: /*#__PURE__*/ jsx(User, {
+            className: "scale-[2.25]"
+        })
+    });
+};
+
+const DialogTrigger = (props)=>/*#__PURE__*/ jsx(DialogTrigger$1, {
+        ...props
+    });
+const ModalOverlay = (props)=>/*#__PURE__*/ jsx(ModalOverlay$1, {
+        ...props,
+        isDismissable: true,
+        className: ({ isEntering, isExiting })=>cx('fixed inset-0 z-10 flex min-h-full items-center justify-center overflow-y-auto bg-black/25 p-4 text-center backdrop-blur', isEntering && 'fade-in animate-in duration-300 ease-out', isExiting && 'fade-out animate-out duration-200 ease-in', // Using the motion-safe class does not work, so we use motion-reduce to overwrite instead
+            'motion-reduce:animate-none')
+    });
+const Modal = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ModalOverlay, {
+        children: /*#__PURE__*/ jsx(Modal$1, {
+            ...restProps,
+            className: ({ isEntering, isExiting })=>cx(className, 'w-full max-w-md overflow-hidden rounded-2xl bg-white p-4 text-left align-middle shadow-xl', isEntering && 'zoom-in-95 animate-in duration-300 ease-out', isExiting && 'zoom-out-95 animate-out duration-200 ease-in', // Using the motion-safe class does not work, so we use motion-reduce to overwrite instead
+                'motion-reduce:animate-none')
+        })
+    });
+const Dialog = ({ className, children, ...restProps })=>{
+    const locale = _useLocale();
+    return /*#__PURE__*/ jsx(Dialog$1, {
+        ...restProps,
+        className: cx('relative grid gap-y-5 outline-none', // Footer
+        '[&_[data-slot="footer"]]:flex [&_[data-slot="footer"]]:gap-x-2'),
+        children: ({ close })=>/*#__PURE__*/ jsx(Fragment, {
+                children: /*#__PURE__*/ jsx(Provider, {
+                    values: [
+                        [
+                            HeadingContext,
+                            {
+                                slots: {
+                                    [DEFAULT_SLOT]: {},
+                                    title: {
+                                        className: 'heading-s',
+                                        _outerWrapper: (children)=>/*#__PURE__*/ jsxs("div", {
+                                                className: "flex items-center justify-between gap-x-2",
+                                                children: [
+                                                    children,
+                                                    /*#__PURE__*/ jsx(_Button, {
+                                                        slot: "close" // RAC Dialog suppors one close button out of the box, so we utilize that here. For other close buttons we use ButtonContext
+                                                        ,
+                                                        variant: "tertiary",
+                                                        className: "!px-2.5 data-[focus-visible]:outline-focus-inset",
+                                                        "aria-label": translations$1.close[locale],
+                                                        children: /*#__PURE__*/ jsx(Close, {})
+                                                    })
+                                                ]
+                                            })
+                                    }
+                                }
+                            }
+                        ],
+                        [
+                            ButtonContext,
+                            {
+                                // This is necessary to support multiple close buttons
+                                slots: {
+                                    // We need to define default slot in order to also support non-slotted buttons (i.e. buttons without slot prop)
+                                    [DEFAULT_SLOT]: {
+                                        className: 'w-fit'
+                                    },
+                                    close: {
+                                        onPress: close,
+                                        className: 'w-fit'
+                                    }
+                                }
+                            }
+                        ]
+                    ],
+                    children: children
+                })
+            })
+    });
+};
+
+const tagVariants = cva({
+    base: [
+        'relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 font-medium text-sm transition-colors duration-200',
+        //Focus
+        'focus-visible:outline-focus-offset [&:not([data-focus-visible])]:outline-none',
+        //Border
+        'border border-2 border-blue-dark',
+        //Backgrounds
+        'data-[hovered]:!bg-sky bg-white text-black aria-selected:bg-sky-light data-[allows-removing]:bg-sky-light',
+        //Icons
+        '[&_svg]:h-4 [&_svg]:w-4'
+    ]
+});
+/**
+ * A group component for Tag components that enables selection and organization of options.
+ */ function TagGroup(props) {
+    const { onRemove, selectionMode = 'single', className, children, ...restProps } = props;
+    return /*#__PURE__*/ jsx(TagGroup$1, {
+        ...restProps,
+        className: className,
+        selectionMode: onRemove ? 'none' : selectionMode,
+        onRemove: onRemove,
+        children: children
+    });
+}
+/**
+ * A container component for Tag components within a TagGroup.
+ */ function TagList(props) {
+    const { className, children, ...restProps } = props;
+    return /*#__PURE__*/ jsx(TagList$1, {
+        ...restProps,
+        className: cx('flex flex-wrap gap-2', className),
+        children: children
+    });
+}
+/**
+ * Interactive tag component for selections, filtering, and categorization.
+ */ function Tag(props) {
+    const { className, children, ...restProps } = props;
+    const textValue = typeof children === 'string' ? children : undefined;
+    return /*#__PURE__*/ jsx(Tag$1, {
+        className: tagVariants({
+            className
+        }),
+        textValue: textValue,
+        ...restProps,
+        children: ({ allowsRemoving })=>allowsRemoving ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    children,
+                    /*#__PURE__*/ jsx(Button$1, {
+                        className: "outline-none after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0",
+                        slot: "remove",
+                        children: /*#__PURE__*/ jsx(Close, {
+                            className: "ml-1"
+                        })
+                    })
+                ]
+            }) : children
+    });
+}
+
+export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Badge as Badge, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, Caption, Card, CardLink, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, _Content as Content, ContentContext, DateFormatter, Description, ErrorMessage, Footer, GrunnmurenProvider, _Heading as Heading, HeadingContext, Label, Media, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, _TextArea as TextArea, _TextField as TextField, Avatar as UNSAFE_Avatar, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, DisclosurePanel as UNSAFE_DisclosurePanel, FileUpload as UNSAFE_FileUpload, Modal as UNSAFE_Modal, 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": "2.0.0-canary.53",
+  "version": "2.0.0-canary.55",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -19,11 +19,15 @@
   ],
   "dependencies": {
     "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.7",
-    "@react-aria/utils": "^3.25.1",
+    "@react-aria/form": "^3.0.14",
+    "@react-aria/interactions": "^3.24.1",
+    "@react-aria/utils": "^3.28.1",
+    "@react-stately/form": "^3.1.2",
+    "@react-stately/utils": "^3.10.5",
     "@types/node": "^22.0.0",
     "cva": "^1.0.0-0",
-    "react-aria": "^3.35.1",
-    "react-aria-components": "^1.3.1",
+    "react-aria": "^3.38.1",
+    "react-aria-components": "^1.7.1",
     "react-stately": "^3.35.0"
   },
   "peerDependencies": {