@obosbbl/grunnmuren-react 3.6.0 → 3.7.0

package/dist/index.d.mts

@@ -17,13 +17,13 @@ import { CheckboxProps as CheckboxProps$1 } from 'react-aria-components/Checkbox
 import { CheckboxGroupProps as CheckboxGroupProps$1 } from 'react-aria-components/CheckboxGroup';
 import { ComboBoxProps } from 'react-aria-components/ComboBox';
 import { DateFormatterOptions } from 'react-aria/useDateFormatter';
+import { ModalOverlayProps as ModalOverlayProps$1 } from 'react-aria-components/Modal';
 import { FileTriggerProps as FileTriggerProps$1 } from 'react-aria-components/FileTrigger';
 import { useFormValidationState } from 'react-stately/private/form/useFormValidationState';
 import { TextProps } from 'react-aria-components/Text';
 import { LabelProps } from 'react-aria-components/Label';
 export { LabelProps } from 'react-aria-components/Label';
 import { DialogProps as DialogProps$1, DialogTriggerProps as DialogTriggerProps$1 } from 'react-aria-components/Dialog';
-import { ModalOverlayProps as ModalOverlayProps$1 } from 'react-aria-components/Modal';
 import { NumberFieldProps as NumberFieldProps$1 } from 'react-aria-components/NumberField';
 import { RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1 } from 'react-aria-components/RadioGroup';
 import { SelectProps as SelectProps$1 } from 'react-aria-components/Select';
@@ -439,7 +439,7 @@ type HeadingProps = Omit<HTMLProps<HTMLHeadingElement>, 'size'> & VariantProps<t
 };
 declare const HeadingContext: react.Context<ContextValue<Partial<HeadingProps>, HTMLHeadingElement>>;
 declare const headingVariants: (props?: ({
-    size?: "s" | "xl" | "l" | "m" | "xs" | undefined;
+    size?: "xl" | "l" | "m" | "s" | "xs" | undefined;
 } & ({
     class?: cva.ClassValue;
     className?: never;
@@ -495,6 +495,27 @@ type DateFormatterProps = {
  */
 declare const DateFormatter: ({ options: _options, value, children: render }: DateFormatterProps) => ReactNode;
 
+declare const drawerVariants: (props?: ({
+    placement?: "right" | "left" | "top" | "bottom" | undefined;
+    isEntering?: boolean | undefined;
+    isExiting?: boolean | undefined;
+} & ({
+    class?: cva.ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: cva.ClassValue;
+})) | undefined) => string;
+type DrawerProps = Omit<ModalOverlayProps$1, 'isDismissable' | 'style'> & Pick<VariantProps<typeof drawerVariants>, 'placement'> & {
+    /** Additional style properties for the element. */
+    style?: React.CSSProperties;
+    /** @default 10 Controls the z-index of the drawer overlay */
+    zIndex?: number;
+    /** @default true Makes the drawer dismissable */
+    isDismissable?: boolean;
+};
+declare const Drawer: ({ isDismissable, isOpen, onOpenChange, defaultOpen, className, zIndex, placement, style, ...restProps }: DrawerProps) => react_jsx_runtime.JSX.Element;
+
 type FormValidationProps<T> = Parameters<typeof useFormValidationState<T>>[0];
 type FileTriggerProps = Partial<Omit<FormValidationProps<File>, 'value'>> & FileTriggerProps$1 & Omit<HTMLAttributes<HTMLInputElement>, 'onSelect' | 'onChange' | 'required' | 'className'> & {
     ref?: RefObject<HTMLInputElement | null>;
@@ -922,5 +943,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, Disclosure, DisclosureButton, DisclosurePanel, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, Link, LinkList, LinkListContainer, LinkListContext, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tab, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, CarouselItemsContainer as UNSAFE_CarouselItemsContainerProps, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, HeroContext as UNSAFE_HeroContext, Modal as UNSAFE_Modal, ResizableTableContainer as UNSAFE_ResizableTableContainer, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, 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, DisclosureButtonProps, DisclosurePanelProps, DisclosureProps, ErrorMessageProps, FooterProps, GrunnmurenProviderProps, HeadingProps, LinkListContainerProps, LinkListContextValue, LinkListItemProps, LinkListProps, LinkProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagListProps, TagProps, TextAreaProps, TextFieldProps, CarouselButtonProps as UNSAFE_CarouselButtonProps, CarouselContextValue as UNSAFE_CarouselContextValue, CarouselControlsProps as UNSAFE_CarouselControlsProps, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, CarouselElement as UNSAFE_CarouselRef, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, FileUploadProps as UNSAFE_FileUploadProps, HeroContextValue as UNSAFE_HeroContextValue, HeroProps as UNSAFE_HeroProps, ModalProps as UNSAFE_ModalProps, ResizableTableContainerProps as UNSAFE_ResizableTableContainerProps, StepProps as UNSAFE_StepProps, StepperProps as UNSAFE_StepperProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableColumnResizerProps as UNSAFE_TableColumnResizerProps, UNSAFE_TableContainerProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps };
+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, Link, LinkList, LinkListContainer, LinkListContext, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tab, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, CarouselItemsContainer as UNSAFE_CarouselItemsContainerProps, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Drawer as UNSAFE_Drawer, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, HeroContext as UNSAFE_HeroContext, Modal as UNSAFE_Modal, ResizableTableContainer as UNSAFE_ResizableTableContainer, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, 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, DisclosureButtonProps, DisclosurePanelProps, DisclosureProps, ErrorMessageProps, FooterProps, GrunnmurenProviderProps, HeadingProps, LinkListContainerProps, LinkListContextValue, LinkListItemProps, LinkListProps, LinkProps, Locale, MediaProps, NumberFieldProps, RadioGroupProps, RadioProps, SelectProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagListProps, TagProps, TextAreaProps, TextFieldProps, CarouselButtonProps as UNSAFE_CarouselButtonProps, CarouselContextValue as UNSAFE_CarouselContextValue, CarouselControlsProps as UNSAFE_CarouselControlsProps, CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItemsProps as UNSAFE_CarouselItemsProps, CarouselProps as UNSAFE_CarouselProps, CarouselElement as UNSAFE_CarouselRef, DialogProps as UNSAFE_DialogProps, DialogTriggerProps as UNSAFE_DialogTriggerProps, DrawerProps as UNSAFE_DrawerProps, FileUploadProps as UNSAFE_FileUploadProps, HeroContextValue as UNSAFE_HeroContextValue, HeroProps as UNSAFE_HeroProps, ModalProps as UNSAFE_ModalProps, ResizableTableContainerProps as UNSAFE_ResizableTableContainerProps, StepProps as UNSAFE_StepProps, StepperProps as UNSAFE_StepperProps, TableBodyProps as UNSAFE_TableBodyProps, TableCellProps as UNSAFE_TableCellProps, TableColumnProps as UNSAFE_TableColumnProps, TableColumnResizerProps as UNSAFE_TableColumnResizerProps, UNSAFE_TableContainerProps, TableHeaderProps as UNSAFE_TableHeaderProps, TableProps as UNSAFE_TableProps, TableRowProps as UNSAFE_TableRowProps };

package/dist/index.mjs

@@ -1349,6 +1349,7 @@ const Modal = ({ isDismissable = true, isOpen, onOpenChange, defaultOpen, classN
             onOpenChange: onOpenChange,
             defaultOpen: defaultOpen,
             isDismissable: isDismissable,
+            isKeyboardDismissDisabled: !isDismissable,
             zIndex: zIndex,
             fullscreen: fullscreen,
             children: /*#__PURE__*/ jsx(Modal$1, {
@@ -2051,6 +2052,123 @@ function Combobox(props) {
     return render ? render(formatted) : formatted;
 };
 
+const drawerVariants = cva({
+    base: [
+        'fixed overflow-auto bg-white text-left shadow-xl',
+        'motion-reduce:animate-none'
+    ],
+    variants: {
+        placement: {
+            right: 'top-0 right-0 h-dvh w-full max-w-md rounded-l-2xl p-4',
+            left: 'top-0 left-0 h-dvh w-full max-w-md rounded-r-2xl p-4',
+            top: 'inset-x-0 top-0 max-h-[80dvh] w-full rounded-b-2xl p-4',
+            bottom: 'inset-x-0 bottom-0 max-h-[80dvh] w-full rounded-t-2xl p-4'
+        },
+        isEntering: {
+            true: 'animate-in duration-300 ease-out'
+        },
+        isExiting: {
+            true: 'animate-out duration-200 ease-in'
+        }
+    },
+    compoundVariants: [
+        {
+            placement: 'right',
+            isEntering: true,
+            className: 'slide-in-from-right'
+        },
+        {
+            placement: 'right',
+            isExiting: true,
+            className: 'slide-out-to-right'
+        },
+        {
+            placement: 'left',
+            isEntering: true,
+            className: 'slide-in-from-left'
+        },
+        {
+            placement: 'left',
+            isExiting: true,
+            className: 'slide-out-to-left'
+        },
+        {
+            placement: 'top',
+            isEntering: true,
+            className: 'slide-in-from-top'
+        },
+        {
+            placement: 'top',
+            isExiting: true,
+            className: 'slide-out-to-top'
+        },
+        {
+            placement: 'bottom',
+            isEntering: true,
+            className: 'slide-in-from-bottom'
+        },
+        {
+            placement: 'bottom',
+            isExiting: true,
+            className: 'slide-out-to-bottom'
+        }
+    ]
+});
+const Drawer = ({ isDismissable = true, isOpen, onOpenChange, defaultOpen, className, zIndex = 10, placement = 'right', style = {}, ...restProps })=>{
+    const locale = _useLocale();
+    return /*#__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,
+                                        isDismissable && /*#__PURE__*/ jsx(Button, {
+                                            slot: "close",
+                                            variant: "tertiary",
+                                            className: "data-focus-visible:outline-focus-inset px-2.5!",
+                                            "aria-label": translations$1.close[locale],
+                                            onPress: ()=>onOpenChange?.(false),
+                                            children: /*#__PURE__*/ jsx(Close, {})
+                                        })
+                                    ]
+                                })
+                        }
+                    }
+                }
+            ]
+        ],
+        children: /*#__PURE__*/ jsx(ModalOverlay, {
+            isOpen: isOpen,
+            onOpenChange: onOpenChange,
+            defaultOpen: defaultOpen,
+            isDismissable: isDismissable,
+            isKeyboardDismissDisabled: !isDismissable,
+            style: {
+                zIndex,
+                ...style
+            },
+            className: ({ isEntering, isExiting })=>cx('fixed inset-0 bg-black/25 backdrop-blur-sm', 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'),
+            children: /*#__PURE__*/ jsx(Modal$1, {
+                ...restProps,
+                className: ({ isEntering, isExiting })=>drawerVariants({
+                        placement,
+                        isEntering,
+                        isExiting,
+                        className
+                    })
+            })
+        })
+    });
+};
+
 /**
  * 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)=>{
@@ -3358,4 +3476,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, Link, LinkList, LinkListContainer, LinkListContext, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tab, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, HeroContext as UNSAFE_HeroContext, Modal as UNSAFE_Modal, ResizableTableContainer as UNSAFE_ResizableTableContainer, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, 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, Link, LinkList, LinkListContainer, LinkListContext, LinkListItem, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, Tab, TabList, TabPanel, Tabs, Tag, TagGroup, TagList, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselButton as UNSAFE_CarouselButton, CarouselContext as UNSAFE_CarouselContext, CarouselControls as UNSAFE_CarouselControls, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, CarouselItemsContainer as UNSAFE_CarouselItemsContainer, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Drawer as UNSAFE_Drawer, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, HeroContext as UNSAFE_HeroContext, Modal as UNSAFE_Modal, ResizableTableContainer as UNSAFE_ResizableTableContainer, Step as UNSAFE_Step, Stepper as UNSAFE_Stepper, Table as UNSAFE_Table, TableBody as UNSAFE_TableBody, TableCell as UNSAFE_TableCell, TableColumn as UNSAFE_TableColumn, TableColumnResizer as UNSAFE_TableColumnResizer, UNSAFE_TableContainer, TableHeader as UNSAFE_TableHeader, TableRow as UNSAFE_TableRow, VideoLoop, _useLocale as useLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "description": "Grunnmuren components in React",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "react-aria-components": "^1.17.0",
     "react-stately": "^3.46.0",
     "use-debounce": "^10.0.4",
-    "@obosbbl/grunnmuren-icons-react": "^2.2.0"
+    "@obosbbl/grunnmuren-icons-react": "^2.2.1"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",