@umami/react-zen 0.39.0 → 0.41.0

package/dist/index.css

@@ -2572,7 +2572,7 @@ body a.Button_button__N2NhN {
 }
 
 /* virtual-css:css:e93e399a7d084c43e7eb6d4a64b3f486 */
-.Dialog_dialog__YjBmO {
+.Dialog_dialog__OTEwM {
   position: relative;
   padding: var(--spacing-6);
   box-shadow: var(--box-shadow-4);
@@ -2581,11 +2581,18 @@ body a.Button_button__N2NhN {
   border-radius: var(--border-radius);
   outline: none;
 }
-.Dialog_title__MmNiZ {
+.Dialog_title__MTE4N {
   font-size: var(--font-size-4);
   font-weight: 700;
   margin-bottom: var(--spacing-3);
 }
+.Dialog_sheet__MWQ0Z {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  box-shadow: none;
+  z-index: 9999;
+}
 
 /* virtual-css:css:e1347b3b22ddaaeb1276bb5bb9f2f2b8 */
 .AlertDialog_dialog__NDdlY {
@@ -3223,7 +3230,7 @@ body a.Button_button__N2NhN {
 }
 
 /* virtual-css:css:2e838e52dc8fe0aeb7a209b02dafe189 */
-.Modal_overlay__NDQ5M {
+.Modal_overlay__MzYwN {
   position: fixed;
   top: 0;
   left: 0;
@@ -3233,20 +3240,85 @@ body a.Button_button__N2NhN {
   display: flex;
   align-items: center;
   justify-content: center;
+  --modal-offset: 50%;
 }
-.Modal_overlay__NDQ5M[data-entering] {
-  animation: Modal_modal-fade__ZWUyZ 200ms;
+.Modal_overlay__MzYwN[data-entering] {
+  animation: Modal_modal-fade-in__MDBkZ 200ms;
 }
-.Modal_overlay__NDQ5M[data-exiting] {
-  animation: Modal_modal-fade__ZWUyZ 150ms reverse ease-in;
+.Modal_overlay__MzYwN[data-exiting] {
+  animation: Modal_modal-fade-in__MDBkZ 200ms reverse ease-in;
 }
-.Modal_modal__ZmIxM {
+.Modal_modal__ZTRjZ {
   position: relative;
+  z-index: 9999;
+}
+.Modal_modal__ZTRjZ.Modal_left__NWIxM {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  margin: auto;
+  width: calc(100dvw - var(--modal-offset, 0));
+}
+.Modal_modal__ZTRjZ.Modal_right__MGNkY {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: calc(100dvw - var(--modal-offset, 0));
+}
+.Modal_modal__ZTRjZ.Modal_top__ZmViY {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  height: calc(100dvh - var(--modal-offset, 0));
+}
+.Modal_modal__ZTRjZ.Modal_bottom__Zjg4M {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  height: calc(100dvh - var(--modal-offset, 0));
+}
+.Modal_modal__ZTRjZ.Modal_fullscreen__NmZiM {
+  width: 100dvw;
+  height: 100dvh;
+}
+.Modal_modal__ZTRjZ.Modal_center__ZWFmO[data-entering] {
+  animation: Modal_modal-zoom__MmU0M 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
-.Modal_modal__ZmIxM[data-entering] {
-  animation: Modal_modal-zoom__MDZmY 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+.Modal_modal__ZTRjZ.Modal_left__NWIxM[data-entering] {
+  animation: Modal_modal-left__MWY5M 200ms ease-out;
 }
-@keyframes Modal_modal-fade__ZWUyZ {
+.Modal_modal__ZTRjZ.Modal_left__NWIxM[data-exiting] {
+  animation: Modal_modal-left__MWY5M 200ms reverse ease-out;
+}
+.Modal_modal__ZTRjZ.Modal_right__MGNkY[data-entering] {
+  animation: Modal_modal-right__OWVlM 200ms ease-out;
+}
+.Modal_modal__ZTRjZ.Modal_right__MGNkY[data-exiting] {
+  animation: Modal_modal-right__OWVlM 200ms reverse ease-in;
+}
+.Modal_modal__ZTRjZ.Modal_top__ZmViY[data-entering] {
+  animation: Modal_modal-top__NDc4M 200ms ease-out;
+}
+.Modal_modal__ZTRjZ.Modal_top__ZmViY[data-exiting] {
+  animation: Modal_modal-top__NDc4M 200ms reverse ease-in;
+}
+.Modal_modal__ZTRjZ.Modal_bottom__Zjg4M[data-entering] {
+  animation: Modal_modal-bottom__YTE1Z 200ms ease-out;
+}
+.Modal_modal__ZTRjZ.Modal_bottom__Zjg4M[data-exiting] {
+  animation: Modal_modal-bottom__YTE1Z 200ms reverse ease-in;
+}
+.Modal_modal__ZTRjZ.Modal_fullscreen__NmZiM[data-entering] {
+  animation: Modal_modal-fade-in__MDBkZ 200ms ease-out;
+}
+@keyframes Modal_modal-fade-in__MDBkZ {
   from {
     opacity: 0;
   }
@@ -3254,7 +3326,7 @@ body a.Button_button__N2NhN {
     opacity: 1;
   }
 }
-@keyframes Modal_modal-zoom__MDZmY {
+@keyframes Modal_modal-zoom__MmU0M {
   from {
     transform: scale(0.8);
   }
@@ -3262,21 +3334,37 @@ body a.Button_button__N2NhN {
     transform: scale(1);
   }
 }
-
-/* virtual-css:css:3bfbb09f24953e4c776b7494b4f2e619 */
-.MobileMenuButton_modal__YjAxN,
-.MobileMenuButton_dialog__Mzc5Y {
-  width: 100dvw !important;
-  height: 100dvh !important;
-  overflow: hidden;
+@keyframes Modal_modal-left__MWY5M {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
-.MobileMenuButton_dialog__Mzc5Y {
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
+@keyframes Modal_modal-right__OWVlM {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
-.MobileMenuButton_content__MjQ3N {
-  overflow: auto;
+@keyframes Modal_modal-top__NDc4M {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes Modal_modal-bottom__YTE1Z {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 /* virtual-css:css:f06faaaaad4324b9459c87ab9d58d827 */

package/dist/index.d.ts

@@ -48,7 +48,6 @@ declare module '@umami/react-zen' {
     import { LoadingButton } from '@umami/react-zen/LoadingButton';
     import { Menu } from '@umami/react-zen/Menu';
     import { MenuItem } from '@umami/react-zen/MenuItem';
-    import { MobileMenuButton } from '@umami/react-zen/MobileMenuButton';
     import { Modal } from '@umami/react-zen/Modal';
     import { NavigationMenu, NavigationMenuItem } from '@umami/react-zen/NavigationMenu';
     import { PasswordField } from '@umami/react-zen/PasswordField';
@@ -74,7 +73,7 @@ declare module '@umami/react-zen' {
     import { ToggleGroup, ToggleGroupItem } from '@umami/react-zen/ToggleGroup';
     import { Tooltip } from '@umami/react-zen/Tooltip';
     import { ZenProvider } from '@umami/react-zen/ZenProvider';
-    export { Form, FormField, FormResetButton, FormSubmitButton, Toast, Toaster, ToastProvider, useDebounce, useTheme, useToast, Accordion, AccordionItem, AlertBanner, AlertDialog, Blockquote, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Code, Column, Combobox, Container, ConfirmationDialog, DataTable, DataColumn, Dialog, DialogTrigger, Dots, FileTrigger, Flexbox, Grid, Heading, HoverTrigger, Icon, Icons, InlineEditField, Label, List, ListItem, ListSection, Loading, LoadingButton, Menu, MenuItem, MenuTrigger, MobileMenuButton, Modal, NavigationMenu, NavigationMenuItem, PasswordField, Popover, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, SearchField, Select, ListSeparator, Slider, Slot, Spinner, StatusLight, SubmenuTrigger, Switch, Table, TableHeader, TableBody, TableRow, TableColumn, TableCell, Tab, Tabs, TabList, TabPanel, Text, TextField, TextArea, ThemeButton, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipTrigger, ZenProvider, };
+    export { Form, FormField, FormResetButton, FormSubmitButton, Toast, Toaster, ToastProvider, useDebounce, useTheme, useToast, Accordion, AccordionItem, AlertBanner, AlertDialog, Blockquote, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Code, Column, Combobox, Container, ConfirmationDialog, DataTable, DataColumn, Dialog, DialogTrigger, Dots, FileTrigger, Flexbox, Grid, Heading, HoverTrigger, Icon, Icons, InlineEditField, Label, List, ListItem, ListSection, Loading, LoadingButton, Menu, MenuItem, MenuTrigger, Modal, NavigationMenu, NavigationMenuItem, PasswordField, Popover, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, SearchField, Select, ListSeparator, Slider, Slot, Spinner, StatusLight, SubmenuTrigger, Switch, Table, TableHeader, TableBody, TableRow, TableColumn, TableCell, Tab, Tabs, TabList, TabPanel, Text, TextField, TextArea, ThemeButton, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipTrigger, ZenProvider, };
 }
 
 declare module '@umami/react-zen/forms/Form' {
@@ -309,7 +308,7 @@ declare module '@umami/react-zen/Box' {
         as?: string;
         asChild?: boolean;
     }
-    function Box({ display, color, backgroundColor, borderSize, borderRadius, shadow, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, width, minWidth, maxWidth, height, minHeight, maxHeight, position, align, top, right, bottom, left, flexBasis, flexGrow, flexShrink, gridArea, gridRow, gridColumn, order, as, asChild, className, style, children, ...props }: BoxProps): import("react").JSX.Element;
+    function Box({ display, color, backgroundColor, borderSize, borderRadius, shadow, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, margin, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, overflow, overflowX, overflowY, width, minWidth, maxWidth, height, minHeight, maxHeight, position, align, top, right, bottom, left, flexBasis, flexGrow, flexShrink, gridArea, gridRow, gridColumn, order, as, asChild, className, style, children, ...props }: BoxProps): import("react").JSX.Element;
     export { Box };
     export type { BoxProps };
 }
@@ -412,8 +411,9 @@ declare module '@umami/react-zen/Dialog' {
     import { DialogProps as AriaDialogProps } from 'react-aria-components';
     interface DialogProps extends AriaDialogProps {
         title?: ReactNode;
+        variant?: 'sheet';
     }
-    function Dialog({ title, children, className, ...props }: DialogProps): import("react").JSX.Element;
+    function Dialog({ title, variant, children, className, ...props }: DialogProps): import("react").JSX.Element;
     export { Dialog };
     export type { DialogProps };
 }
@@ -625,24 +625,17 @@ declare module '@umami/react-zen/MenuItem' {
     export default MenuItem;
 }
 
-declare module '@umami/react-zen/MobileMenuButton' {
-    import { ButtonProps } from '@umami/react-zen/Button';
-    export interface MobileMenuButtonProps extends ButtonProps {
-        title?: string;
-    }
-    export function MobileMenuButton({ title, children, ...props }: MobileMenuButtonProps): import("react").JSX.Element;
-}
-
 declare module '@umami/react-zen/Modal' {
     import { ReactNode } from 'react';
-    import { ModalRenderProps } from 'react-aria-components';
-    interface ModalProps {
-        className?: string;
+    import { ModalOverlayProps as AriaModalOverlayProps, ModalRenderProps } from 'react-aria-components';
+    interface ModalProps extends AriaModalOverlayProps {
+        position?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'fullscreen';
+        offset?: string;
         children?: ReactNode | ((values: ModalRenderProps & {
             defaultChildren: ReactNode;
         }) => ReactNode);
     }
-    function Modal({ children, className, ...props }: ModalProps): import("react").JSX.Element;
+    function Modal({ position, offset, children, className, style, ...props }: ModalProps): import("react").JSX.Element;
     export { Modal };
     export type { ModalProps };
 }