@umami/react-zen 0.25.0 → 0.26.0

package/README.md

@@ -2,7 +2,7 @@
 
 **zen** is a modern, minimalist React component library.
 
-- Built on top of [React Aria](https://react-spectrum.adobe.com/react-aria/) and [Radix](https://www.radix-ui.com/primitives) primitives.
+- Built on top of [React Aria](https://react-spectrum.adobe.com/react-aria/) primitives.
 - No Tailwind, pure CSS.
 - Out-of-the-box accessibility.
 

package/dist/index.css

@@ -2388,6 +2388,117 @@ body a.Button_button__YmM3M {
   }
 }
 
+/* virtual-css:css:d2946ea0055c0d1ebfac02670168114b */
+.Toast_toast__YjU0N {
+  display: grid;
+  grid-template-areas: "icon title action" "icon description action";
+  grid-template-columns: auto 1fr auto;
+  grid-auto-columns: auto;
+  align-items: center;
+  background-color: var(--background-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow-3);
+  padding: var(--spacing-4) var(--spacing-5);
+  border: var(--border);
+  position: relative;
+}
+.Toast_toast__YjU0N:has(.Toast_icon__YmFhZ) {
+  grid-template-columns: auto 1fr auto;
+  column-gap: var(--gap);
+}
+.Toast_icon__YmFhZ {
+  grid-area: icon;
+}
+.Toast_icon__YmFhZ:empty {
+  display: none;
+}
+.Toast_title__OGRhM {
+  grid-area: title;
+  color: var(--font-color);
+  font-weight: 700;
+}
+.Toast_description__MDBkN {
+  grid-area: description;
+}
+.Toast_action__MjUxO {
+  grid-area: action;
+  border: 0;
+  background: transparent;
+}
+.Toast_close__ZDVjN {
+  display: none;
+  color: currentColor;
+  position: absolute;
+  right: var(--spacing-3);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.Toast_toast__YjU0N:hover .Toast_close__ZDVjN {
+  display: block;
+  cursor: pointer;
+}
+.Toast_toast__YjU0N.Toast_info__ZDRhY {
+  color: var(--primary-font-color);
+  background: var(--primary-color);
+  border: 0;
+}
+.Toast_toast__YjU0N.Toast_error__NmEwO {
+  color: var(--danger-font-color);
+  background: var(--danger-color);
+  border: 0;
+}
+
+/* virtual-css:css:11394aec644bbe21859c5e1cb74970ec */
+.Toaster_toaster__OGJjM {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-6);
+  gap: var(--spacing-5);
+  width: 460px;
+  max-width: 100vw;
+  margin: 0;
+  list-style: none;
+  z-index: 2147483647;
+  outline: none;
+}
+.Toaster_position-top__Y2YyM {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.Toaster_position-top-right__Y2I1Y {
+  top: 0;
+  right: 0;
+}
+.Toaster_position-top-left__ZGZlM {
+  top: 0;
+  left: 0;
+}
+.Toaster_position-bottom__NjJmM {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.Toaster_position-bottom-right__MGVjY {
+  bottom: 0;
+  right: 0;
+}
+.Toaster_position-bottom-left__ODBhZ {
+  bottom: 0;
+  left: 0;
+}
+.Toaster_position-left__MWMzM {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.Toaster_position-right__YWYzZ {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
 /* virtual-css:css:fa53717340120f23a623f1ff98237d94 */
 .Accordion_accordion__ODg3O {
   display: flex;
@@ -2609,6 +2720,54 @@ body a.Button_button__YmM3M {
   padding: var(--spacing-1);
 }
 
+/* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
+.List_list__NmQyZ {
+  min-width: 100px;
+  outline: none;
+}
+.List_separator__NTYwN {
+  border-bottom: var(--border);
+}
+.List_section__MzJkM {
+  margin-bottom: var(--spacing-4);
+}
+.List_header__MjllY {
+  font-size: var(--font-size-2);
+  font-weight: var(--font-weight-bold);
+  padding: var(--padding);
+}
+.List_item__MWE2M {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: var(--font-size);
+  color: var(--font-color);
+  background: var(--background-color);
+  padding: var(--padding);
+  gap: var(--gap);
+  min-width: 120px;
+  cursor: pointer;
+  outline: none;
+  border-radius: var(--border-radius);
+}
+.List_item__MWE2M[data-focus],
+.List_item__MWE2M[data-focus-visible] {
+  outline: var(--outline);
+  background: var(--highlight-color);
+}
+.List_item__MWE2M:hover {
+  background: var(--highlight-color);
+}
+.List_item__MWE2M[data-selected] {
+  font-weight: bold;
+}
+.List_item__MWE2M[data-selected] .List_check__NTFkY {
+  display: block;
+}
+.List_check__NTFkY {
+  display: none;
+}
+
 /* virtual-css:css:22e6c8058c0151ab54d204a5cd8c6d11 */
 .ListItem_item__MzQ0Z {
   display: flex;
@@ -2640,27 +2799,6 @@ body a.Button_button__YmM3M {
   display: none;
 }
 
-/* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
-.List_list__OGNmY {
-  overflow: hidden;
-  min-width: 100px;
-  outline: none;
-}
-.List_item__ZTAwN {
-  border: var(--border-radius);
-}
-.List_separator__ZDRjM {
-  border-bottom: var(--border);
-}
-.List_section__MjY4N {
-  margin-bottom: var(--spacing-3);
-}
-.List_header__ZjI0N {
-  font-size: var(--font-size-2);
-  font-weight: var(--font-weight-bold);
-  padding: var(--padding-y) var(--padding-x);
-}
-
 /* virtual-css:css:f94974973c639ccc39a8a6465cbebeb2 */
 .Popover_popover__YmFhM[data-placement=top] {
   --origin: translateY(8px);
@@ -3523,125 +3661,6 @@ body a.Button_button__YmM3M {
   resize: vertical;
 }
 
-/* virtual-css:css:2660738c02b9f8e6e348a808b81b16d8 */
-.Toast_viewport__NzVhM {
-  --viewport-padding: 25px;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  padding: var(--viewport-padding);
-  gap: 10px;
-  width: 460px;
-  max-width: 100vw;
-  margin: 0;
-  list-style: none;
-  z-index: 2147483647;
-  outline: none;
-}
-.Toast_toast__YWM3Z {
-  display: grid;
-  grid-template-areas: "icon title action" "icon description action";
-  grid-template-columns: auto 1fr auto;
-  grid-auto-columns: auto;
-  align-items: center;
-  background-color: var(--background-color);
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow-3);
-  padding: 1.25rem 1.5rem;
-  border: var(--border);
-  position: relative;
-}
-.Toast_toast__YWM3Z[data-state=open] {
-  animation: Toast_slide-in__ZDZhN 150ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-.Toast_toast__YWM3Z[data-state=closed] {
-  animation: Toast_hide__NjM0N 100ms ease-in;
-}
-.Toast_toast__YWM3Z[data-swipe=move] {
-  transform: translateX(0);
-}
-.Toast_toast__YWM3Z[data-swipe=cancel] {
-  transform: translateX(0);
-  transition: transform 200ms ease-out;
-}
-.Toast_toast__YWM3Z[data-swipe=end] {
-  animation: Toast_swipe-out__NzI3N 100ms ease-out;
-}
-.Toast_toast__YWM3Z:has(.Toast_icon__MmY1Y) {
-  grid-template-columns: auto 1fr auto;
-  column-gap: var(--gap);
-}
-.Toast_icon__MmY1Y {
-  grid-area: icon;
-}
-.Toast_icon__MmY1Y:empty {
-  display: none;
-}
-.Toast_title__OTU5Z {
-  grid-area: title;
-  color: var(--font-color);
-  font-weight: 700;
-}
-.Toast_description__OWJkZ {
-  grid-area: description;
-}
-.Toast_action__NjZiZ {
-  grid-area: action;
-  border: 0;
-  background: transparent;
-}
-.Toast_close__MjU1N {
-  color: currentColor;
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  display: none;
-  border: 0;
-  background: transparent;
-}
-.Toast_toast__YWM3Z:hover .Toast_close__MjU1N {
-  display: block;
-  cursor: pointer;
-}
-.Toast_toast__YWM3Z.Toast_info__MTZkO {
-  color: var(--primary-font-color);
-  background: var(--primary-color);
-  border: 0;
-}
-.Toast_toast__YWM3Z.Toast_error__NTA3M {
-  color: var(--danger-font-color);
-  background: var(--danger-color);
-  border: 0;
-}
-@keyframes Toast_hide__NjM0N {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(50px);
-  }
-}
-@keyframes Toast_slide-in__ZDZhN {
-  from {
-    transform: translateX(calc(100% + var(--viewport-padding)));
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-@keyframes Toast_swipe-out__NzI3N {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(calc(100% + var(--viewport-padding)));
-  }
-}
-
 /* virtual-css:css:9e5c8c52b82d4f77f80ba529f88ddc39 */
 .Toggle_toggle__OWVjZ {
   font-size: var(--font-size);

package/dist/index.d.ts

@@ -1,21 +1,20 @@
 // Generated by dts-bundle v0.7.3
 // Dependencies for this module:
 //   ../../react-aria-components
-//   ../../@/components/forms/Form
-//   ../../@/components/forms/FormField
-//   ../../@/components/forms/FormResetButton
-//   ../../@/components/forms/FormSubmitButton
 //   ../../react
+//   ../../react-hook-form
 //   ../../@/lib/types
-//   ../../@radix-ui/react-slot
-//   ../../@radix-ui/react-toast
+//   ../../@/components/toast/Toaster
 
 declare module '@umami/react-zen' {
     import { DialogTrigger, FileTrigger, MenuTrigger, SubmenuTrigger, TooltipTrigger } from 'react-aria-components';
-    import { Form } from '@/components/forms/Form';
-    import { FormField } from '@/components/forms/FormField';
-    import { FormResetButton } from '@/components/forms/FormResetButton';
-    import { FormSubmitButton } from '@/components/forms/FormSubmitButton';
+    import { Form } from '@umami/react-zen/forms/Form';
+    import { FormField } from '@umami/react-zen/forms/FormField';
+    import { FormResetButton } from '@umami/react-zen/forms/FormResetButton';
+    import { FormSubmitButton } from '@umami/react-zen/forms/FormSubmitButton';
+    import { Toast } from '@umami/react-zen/toast/Toast';
+    import { Toaster } from '@umami/react-zen/toast/Toaster';
+    import { ToastProvider } from '@umami/react-zen/toast/ToastProvider';
     import { useDebounce } from '@umami/react-zen/hooks/useDebounce';
     import { useTheme } from '@umami/react-zen/hooks/useTheme';
     import { useToast } from '@umami/react-zen/hooks/useToast';
@@ -44,8 +43,7 @@ declare module '@umami/react-zen' {
     import { Icons } from '@umami/react-zen/Icons';
     import { InlineEditField } from '@umami/react-zen/InlineEditField';
     import { Label } from '@umami/react-zen/Label';
-    import { List, ListSeparator, ListSection } from '@umami/react-zen/List';
-    import { ListItem } from '@umami/react-zen/ListItem';
+    import { List, ListItem, ListSeparator, ListSection } from '@umami/react-zen/List';
     import { Loading } from '@umami/react-zen/Loading';
     import { LoadingButton } from '@umami/react-zen/LoadingButton';
     import { Menu } from '@umami/react-zen/Menu';
@@ -71,12 +69,97 @@ declare module '@umami/react-zen' {
     import { TextOverflow } from '@umami/react-zen/TextOverflow';
     import { TextField } from '@umami/react-zen/TextField';
     import { TextArea } from '@umami/react-zen/TextArea';
-    import { Toast, ToastProvider, Toaster } from '@umami/react-zen/Toast';
     import { Toggle } from '@umami/react-zen/Toggle';
     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, 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, TextOverflow, TextField, TextArea, Toast, ToastProvider, Toaster, 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, TextOverflow, TextField, TextArea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipTrigger, ZenProvider, };
+}
+
+declare module '@umami/react-zen/forms/Form' {
+    import { HTMLAttributes, ReactNode } from 'react';
+    import { UseFormProps, SubmitHandler, UseFormReturn } from 'react-hook-form';
+    import { Responsive, Spacing } from '@/lib/types';
+    interface FormProps extends UseFormProps, Omit<HTMLAttributes<HTMLFormElement>, 'children'> {
+        gap?: Responsive<Spacing>;
+        autoComplete?: string;
+        onSubmit?: SubmitHandler<any>;
+        error?: ReactNode;
+        preventSubmit?: boolean;
+        children?: ReactNode | ((e: UseFormReturn) => ReactNode);
+    }
+    function Form({ gap, autoComplete, onSubmit, error, preventSubmit, mode, disabled, reValidateMode, defaultValues, values, errors, resetOptions, resolver, context, shouldFocusError, shouldUnregister, shouldUseNativeValidation, progressive, criteriaMode, delayError, className, children, ...props }: FormProps): import("react").JSX.Element;
+    export { Form };
+    export type { FormProps };
+}
+
+declare module '@umami/react-zen/forms/FormField' {
+    import { HTMLAttributes } from 'react';
+    import { RegisterOptions, UseFormReturn, FieldValues } from 'react-hook-form';
+    interface FormFieldProps extends HTMLAttributes<HTMLDivElement>, Partial<UseFormReturn> {
+        name: string;
+        description?: string;
+        label?: string;
+        rules?: RegisterOptions<FieldValues, string>;
+        children: any;
+    }
+    const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<any>>;
+    export { FormField };
+    export type { FormFieldProps };
+}
+
+declare module '@umami/react-zen/forms/FormResetButton' {
+    import { FieldValues } from 'react-hook-form';
+    import { ButtonProps } from '@umami/react-zen/Button';
+    interface FormResetButtonProps extends ButtonProps {
+        values?: FieldValues | {
+            [p: string]: any;
+        };
+    }
+    function FormResetButton({ values, children, onPress, ...props }: FormResetButtonProps): import("react").JSX.Element;
+    export { FormResetButton };
+    export type { FormResetButtonProps };
+}
+
+declare module '@umami/react-zen/forms/FormSubmitButton' {
+    import { LoadingButtonProps } from '@umami/react-zen/LoadingButton';
+    function FormSubmitButton({ children, disabled, isLoading, ...props }: LoadingButtonProps): import("react").JSX.Element;
+    export { FormSubmitButton };
+}
+
+declare module '@umami/react-zen/toast/Toast' {
+    import { HTMLAttributes } from 'react';
+    interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+        id: string;
+        message: string;
+        title?: string;
+        actions?: string[];
+        allowClose?: boolean;
+        variant?: 'info' | 'error';
+        onClose?: (action?: string) => void;
+    }
+    function Toast({ id, message, title, actions, allowClose, variant, className, children, onClose, ...props }: ToastProps): import("react").JSX.Element;
+    export { Toast };
+    export type { ToastProps };
+}
+
+declare module '@umami/react-zen/toast/Toaster' {
+    export type ToastPosition = 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'left' | 'right';
+    export interface ToasterProps {
+        duration?: number;
+        position?: ToastPosition;
+    }
+    export function Toaster({ duration, position }: ToasterProps): import("react").JSX.Element;
+}
+
+declare module '@umami/react-zen/toast/ToastProvider' {
+    import { ReactNode } from 'react';
+    import { ToasterProps } from '@/components/toast/Toaster';
+    export interface ToastProviderProps extends ToasterProps {
+        children: ReactNode;
+    }
+    export const ToastContext: import("react").Context<{}>;
+    export function ToastProvider({ children, ...config }: ToastProviderProps): import("react").JSX.Element;
 }
 
 declare module '@umami/react-zen/hooks/useDebounce' {
@@ -96,18 +179,24 @@ declare module '@umami/react-zen/hooks/useTheme' {
 }
 
 declare module '@umami/react-zen/hooks/useToast' {
-    import { ToastProps } from '@umami/react-zen/Toast';
-    interface ToastState {
-        id: number;
+    export interface ToastOptions {
+        duration?: number;
+        title?: string;
+        actions?: string[];
+        allowClose?: boolean;
+        variant?: 'info' | 'error';
+        onClose?: (action?: string) => void;
+    }
+    export interface ToastState extends ToastOptions {
+        id: string;
         message: string;
-        props: ToastProps;
+        timestamp: number;
     }
-    function toast(message: string, props?: ToastProps): void;
-    function useToast(): {
-        toast: typeof toast;
+    export function removeToast(id: string): void;
+    export function useToast(): {
+        toast: (message: string, options?: ToastOptions) => void;
         toasts: ToastState[];
     };
-    export { useToast, toast };
 }
 
 declare module '@umami/react-zen/Accordion' {
@@ -479,26 +568,20 @@ declare module '@umami/react-zen/Label' {
 
 declare module '@umami/react-zen/List' {
     import { ReactNode } from 'react';
-    import { ListBoxProps, SeparatorProps, ListBoxSectionProps } from 'react-aria-components';
+    import { ListBoxProps, SeparatorProps, ListBoxSectionProps, ListBoxItemProps } from 'react-aria-components';
     export interface ListProps extends ListBoxProps<any> {
         items?: any[];
         className?: string;
         children?: ReactNode;
     }
     export function List({ items, className, children, ...props }: ListProps): import("react").JSX.Element;
+    export function ListItem({ children, className, ...props }: ListBoxItemProps<any>): import("react").JSX.Element;
     export function ListSeparator({ className, ...props }: SeparatorProps): import("react").JSX.Element;
     export function ListSection({ title, className, children, ...props }: ListBoxSectionProps<any> & {
         title?: string;
     }): ReactNode;
 }
 
-declare module '@umami/react-zen/ListItem' {
-    import { ListBoxItemProps } from 'react-aria-components';
-    function ListItem({ children, className, ...props }: ListBoxItemProps<any>): import("react").JSX.Element;
-    export { ListItem };
-    export type { ListBoxItemProps as ListItemProps };
-}
-
 declare module '@umami/react-zen/Loading' {
     export interface LoadingProps {
         size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -662,7 +745,11 @@ declare module '@umami/react-zen/Slider' {
 }
 
 declare module '@umami/react-zen/Slot' {
-    export { Slot } from '@radix-ui/react-slot';
+    import { ReactElement, ReactNode } from 'react';
+    export function Slot({ children, ...props }: {
+        children: ReactElement | ReactNode;
+        [key: string]: any;
+    }): ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
 }
 
 declare module '@umami/react-zen/Spinner' {
@@ -777,21 +864,6 @@ declare module '@umami/react-zen/TextArea' {
     export type { TextAreaProps };
 }
 
-declare module '@umami/react-zen/Toast' {
-    import { ToastProvider, ToastProviderProps, ToastProps, ToastViewportProps } from '@radix-ui/react-toast';
-    interface _ToastProps extends ToastProps {
-        title?: string;
-        description?: string;
-        actionText?: string;
-        allowClose?: boolean;
-        variant?: 'info' | 'error';
-    }
-    function Toast({ title, description, actionText, allowClose, variant, className, children, ...props }: _ToastProps): import("react").JSX.Element;
-    function Toaster(props: ToastViewportProps): import("react").JSX.Element;
-    export { Toast, ToastProvider, Toaster };
-    export type { _ToastProps as ToastProps, ToastProviderProps, ToastViewportProps as ToasterProps };
-}
-
 declare module '@umami/react-zen/Toggle' {
     import { ToggleButtonProps } from 'react-aria-components';
     interface ToggleProps extends ToggleButtonProps {
@@ -824,16 +896,14 @@ declare module '@umami/react-zen/Tooltip' {
 
 declare module '@umami/react-zen/ZenProvider' {
     import { ReactNode } from 'react';
-    import { ToastProviderProps } from '@umami/react-zen/Toast';
+    import { ToasterProps } from '@/components/toast/Toaster';
     interface ZenProviderProps {
-        config?: {
-            theme?: string;
-            colorScheme?: 'light' | 'dark' | 'system';
-            toast?: ToastProviderProps;
-        };
+        theme?: string;
+        colorScheme?: 'light' | 'dark' | 'system';
+        toast?: ToasterProps;
         children: ReactNode;
     }
-    function ZenProvider({ config, children }: ZenProviderProps): import("react").JSX.Element;
+    function ZenProvider({ children, ...props }: ZenProviderProps): import("react").JSX.Element;
     export { ZenProvider };
     export type { ZenProviderProps };
 }