@umami/react-zen 0.64.0 → 0.66.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.css +202 -148
  2. package/dist/index.d.ts +124 -104
  3. package/dist/index.js +330 -245
  4. package/dist/index.mjs +279 -194
  5. package/package.json +4 -4
  6. package/styles.css +202 -148
package/dist/index.d.ts CHANGED
@@ -5,80 +5,82 @@
5
5
  // ../../react-hook-form
6
6
  // ../../@/lib/types
7
7
  // ../../@/components/toast/Toaster
8
- // ../../@/components/Block
8
+ // ../../@/components/Tooltip
9
+ // ../../@/components/Column
10
+ // ../../@/components/Row
9
11
 
10
12
  declare module '@umami/react-zen' {
11
- import { DialogTrigger, FileTrigger, MenuTrigger, SubmenuTrigger, TooltipTrigger, RouterProvider, Focusable, Pressable } from 'react-aria-components';
12
- import { Form } from '@umami/react-zen/forms/Form';
13
- import { FormButtons } from '@umami/react-zen/forms/FormButtons';
14
- import { FormField } from '@umami/react-zen/forms/FormField';
15
- import { FormResetButton } from '@umami/react-zen/forms/FormResetButton';
16
- import { FormSubmitButton } from '@umami/react-zen/forms/FormSubmitButton';
17
- import { Toast } from '@umami/react-zen/toast/Toast';
18
- import { Toaster } from '@umami/react-zen/toast/Toaster';
19
- import { ToastProvider } from '@umami/react-zen/toast/ToastProvider';
20
- import { useDebounce } from '@umami/react-zen/hooks/useDebounce';
21
- import { useTheme } from '@umami/react-zen/hooks/useTheme';
22
- import { useToast } from '@umami/react-zen/hooks/useToast';
23
- import { Accordion, AccordionItem } from '@umami/react-zen/Accordion';
24
- import { AlertBanner } from '@umami/react-zen/AlertBanner';
25
- import { AlertDialog } from '@umami/react-zen/AlertDialog';
26
- import { Block } from '@umami/react-zen/Block';
27
- import { Blockquote } from '@umami/react-zen/Blockquote';
28
- import { Box } from '@umami/react-zen/Box';
29
- import { Breadcrumbs, Breadcrumb } from '@umami/react-zen/Breadcrumbs';
30
- import { Button } from '@umami/react-zen/Button';
31
- import { Calendar } from '@umami/react-zen/Calendar';
32
- import { Checkbox } from '@umami/react-zen/Checkbox';
33
- import { Code } from '@umami/react-zen/Code';
34
- import { Column } from '@umami/react-zen/Column';
35
- import { Combobox } from '@umami/react-zen/Combobox';
36
- import { Container } from '@umami/react-zen/Container';
37
- import { ConfirmationDialog } from '@umami/react-zen/ConfirmationDialog';
38
- import { Dialog } from '@umami/react-zen/Dialog';
39
- import { DataTable, DataColumn } from '@umami/react-zen/DataTable';
40
- import { Dots } from '@umami/react-zen/Dots';
41
- import { Flexbox } from '@umami/react-zen/Flexbox';
42
- import { FloatingTooltip } from '@umami/react-zen/FloatingTooltip';
43
- import { Grid } from '@umami/react-zen/Grid';
44
- import { Heading } from '@umami/react-zen/Heading';
45
- import { HoverTrigger } from '@umami/react-zen/HoverTrigger';
46
- import { Icon } from '@umami/react-zen/Icon';
47
- import { Icons } from '@umami/react-zen/Icons';
48
- import { Image } from '@umami/react-zen/Image';
49
- import { InlineEditField } from '@umami/react-zen/InlineEditField';
50
- import { Label } from '@umami/react-zen/Label';
51
- import { List, ListItem, ListSeparator, ListSection } from '@umami/react-zen/List';
52
- import { Loading } from '@umami/react-zen/Loading';
53
- import { LoadingButton } from '@umami/react-zen/LoadingButton';
54
- import { Menu, MenuItem, MenuSection, MenuSeparator } from '@umami/react-zen/Menu';
55
- import { Modal } from '@umami/react-zen/Modal';
56
- import { NavBar, NavBarItem } from '@umami/react-zen/NavBar';
57
- import { PasswordField } from '@umami/react-zen/PasswordField';
58
- import { Popover } from '@umami/react-zen/Popover';
59
- import { ProgressBar } from '@umami/react-zen/ProgressBar';
60
- import { ProgressCircle } from '@umami/react-zen/ProgressCircle';
61
- import { Radio, RadioGroup } from '@umami/react-zen/RadioGroup';
62
- import { Row } from '@umami/react-zen/Row';
63
- import { SearchField } from '@umami/react-zen/SearchField';
64
- import { Select } from '@umami/react-zen/Select';
65
- import { SideNav, SideNavHeader, SideNavItem, SideNavSection } from '@umami/react-zen/SideNav';
66
- import { Slider } from '@umami/react-zen/Slider';
67
- import { Slot } from '@umami/react-zen/Slot';
68
- import { Spinner } from '@umami/react-zen/Spinner';
69
- import { StatusLight } from '@umami/react-zen/StatusLight';
70
- import { Switch } from '@umami/react-zen/Switch';
71
- import { Table, TableHeader, TableBody, TableRow, TableColumn, TableCell } from '@umami/react-zen/Table';
72
- import { Tabs, TabList, Tab, TabPanel } from '@umami/react-zen/Tabs';
73
- import { Text } from '@umami/react-zen/Text';
74
- import { TextField } from '@umami/react-zen/TextField';
75
- import { TextArea } from '@umami/react-zen/TextArea';
76
- import { ThemeButton } from '@umami/react-zen/ThemeButton';
77
- import { Toggle } from '@umami/react-zen/Toggle';
78
- import { ToggleGroup, ToggleGroupItem } from '@umami/react-zen/ToggleGroup';
79
- import { Tooltip, TooltipBubble } from '@umami/react-zen/Tooltip';
80
- import { ZenProvider } from '@umami/react-zen/ZenProvider';
81
- export { useDebounce, useTheme, useToast, Accordion, AccordionItem, AlertBanner, AlertDialog, Block, Blockquote, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Code, Column, Combobox, Container, ConfirmationDialog, DataTable, DataColumn, Dialog, DialogTrigger, Dots, FileTrigger, Flexbox, FloatingTooltip, Focusable, Form, FormButtons, FormField, FormResetButton, FormSubmitButton, Grid, NavBar, NavBarItem, Heading, HoverTrigger, Icon, Icons, Image, InlineEditField, Label, List, ListItem, ListSection, ListSeparator, Loading, LoadingButton, Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, Modal, PasswordField, Popover, Pressable, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, RouterProvider, SearchField, Select, SideNav, SideNavHeader, SideNavItem, SideNavSection, Slider, Slot, Spinner, StatusLight, SubmenuTrigger, Switch, Table, TableHeader, TableBody, TableRow, TableColumn, TableCell, Tab, Tabs, TabList, TabPanel, Text, TextField, TextArea, ThemeButton, Toast, Toaster, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipBubble, TooltipTrigger, ZenProvider, };
13
+ export { DialogTrigger, FileTrigger, MenuTrigger, SubmenuTrigger, TooltipTrigger, RouterProvider, Focusable, Pressable, } from 'react-aria-components';
14
+ export type { Selection } from 'react-aria-components';
15
+ export { Form } from '@umami/react-zen/forms/Form';
16
+ export { FormButtons } from '@umami/react-zen/forms/FormButtons';
17
+ export { FormField } from '@umami/react-zen/forms/FormField';
18
+ export { FormResetButton } from '@umami/react-zen/forms/FormResetButton';
19
+ export { FormSubmitButton } from '@umami/react-zen/forms/FormSubmitButton';
20
+ export { Toast } from '@umami/react-zen/toast/Toast';
21
+ export { Toaster } from '@umami/react-zen/toast/Toaster';
22
+ export { ToastProvider } from '@umami/react-zen/toast/ToastProvider';
23
+ export { useDebounce } from '@umami/react-zen/hooks/useDebounce';
24
+ export { useTheme } from '@umami/react-zen/hooks/useTheme';
25
+ export { useToast } from '@umami/react-zen/hooks/useToast';
26
+ export { Accordion, AccordionItem } from '@umami/react-zen/Accordion';
27
+ export { AlertBanner } from '@umami/react-zen/AlertBanner';
28
+ export { AlertDialog } from '@umami/react-zen/AlertDialog';
29
+ export { Block } from '@umami/react-zen/Block';
30
+ export { Blockquote } from '@umami/react-zen/Blockquote';
31
+ export { Box } from '@umami/react-zen/Box';
32
+ export { Breadcrumbs, Breadcrumb } from '@umami/react-zen/Breadcrumbs';
33
+ export { Button } from '@umami/react-zen/Button';
34
+ export { Calendar } from '@umami/react-zen/Calendar';
35
+ export { Checkbox } from '@umami/react-zen/Checkbox';
36
+ export { Code } from '@umami/react-zen/Code';
37
+ export { Column } from '@umami/react-zen/Column';
38
+ export { Combobox } from '@umami/react-zen/Combobox';
39
+ export { Container } from '@umami/react-zen/Container';
40
+ export { ConfirmationDialog } from '@umami/react-zen/ConfirmationDialog';
41
+ export { Dialog } from '@umami/react-zen/Dialog';
42
+ export { DataTable, DataColumn } from '@umami/react-zen/DataTable';
43
+ export { Dots } from '@umami/react-zen/Dots';
44
+ export { Flexbox } from '@umami/react-zen/Flexbox';
45
+ export { FloatingTooltip } from '@umami/react-zen/FloatingTooltip';
46
+ export { Grid } from '@umami/react-zen/Grid';
47
+ export { Heading } from '@umami/react-zen/Heading';
48
+ export { HoverTrigger } from '@umami/react-zen/HoverTrigger';
49
+ export { Icon } from '@umami/react-zen/Icon';
50
+ export { Icons } from '@umami/react-zen/Icons';
51
+ export { Image } from '@umami/react-zen/Image';
52
+ export { InlineEditField } from '@umami/react-zen/InlineEditField';
53
+ export { Label } from '@umami/react-zen/Label';
54
+ export { List, ListItem, ListSeparator, ListSection } from '@umami/react-zen/List';
55
+ export { Loading } from '@umami/react-zen/Loading';
56
+ export { LoadingButton } from '@umami/react-zen/LoadingButton';
57
+ export { Menu, MenuItem, MenuSection, MenuSeparator } from '@umami/react-zen/Menu';
58
+ export { Modal } from '@umami/react-zen/Modal';
59
+ export { NavBar, NavBarItem } from '@umami/react-zen/NavBar';
60
+ export { PasswordField } from '@umami/react-zen/PasswordField';
61
+ export { Popover } from '@umami/react-zen/Popover';
62
+ export { ProgressBar } from '@umami/react-zen/ProgressBar';
63
+ export { ProgressCircle } from '@umami/react-zen/ProgressCircle';
64
+ export { Radio, RadioGroup } from '@umami/react-zen/RadioGroup';
65
+ export { Row } from '@umami/react-zen/Row';
66
+ export { SearchField } from '@umami/react-zen/SearchField';
67
+ export { Select } from '@umami/react-zen/Select';
68
+ export { SideNav, SideNavHeader, SideNavItem, SideNavSection } from '@umami/react-zen/SideNav';
69
+ export { Slider } from '@umami/react-zen/Slider';
70
+ export { Slot } from '@umami/react-zen/Slot';
71
+ export { Spinner } from '@umami/react-zen/Spinner';
72
+ export { StatusLight } from '@umami/react-zen/StatusLight';
73
+ export { Switch } from '@umami/react-zen/Switch';
74
+ export { Table, TableHeader, TableBody, TableRow, TableColumn, TableCell } from '@umami/react-zen/Table';
75
+ export { Tabs, TabList, Tab, TabPanel } from '@umami/react-zen/Tabs';
76
+ export { Text } from '@umami/react-zen/Text';
77
+ export { TextField } from '@umami/react-zen/TextField';
78
+ export { TextArea } from '@umami/react-zen/TextArea';
79
+ export { ThemeButton } from '@umami/react-zen/ThemeButton';
80
+ export { Toggle } from '@umami/react-zen/Toggle';
81
+ export { ToggleGroup, ToggleGroupItem } from '@umami/react-zen/ToggleGroup';
82
+ export { Tooltip, TooltipBubble } from '@umami/react-zen/Tooltip';
83
+ export { ZenProvider } from '@umami/react-zen/ZenProvider';
82
84
  }
83
85
 
84
86
  declare module '@umami/react-zen/forms/Form' {
@@ -281,11 +283,13 @@ declare module '@umami/react-zen/Blockquote' {
281
283
 
282
284
  declare module '@umami/react-zen/Box' {
283
285
  import { HTMLAttributes } from 'react';
284
- import { BackgroundColor, BorderSize, BorderRadius, BoxShadow, Spacing, Responsive, Position, Display, TextAlign, FlexGrow, FlexShrink, Top, Right, Bottom, Left, Overflow, AlignSelf, JustifySelf, FontColor } from '@/lib/types';
286
+ import { BackgroundColor, BorderSize, BorderRadius, BoxShadow, Spacing, Responsive, Position, Display, TextAlign, FlexGrow, FlexShrink, Top, Right, Bottom, Left, Overflow, AlignSelf, JustifySelf, FontColor, FontSize, FontWeight } from '@/lib/types';
285
287
  interface BoxProps extends HTMLAttributes<HTMLElement> {
286
288
  display?: Responsive<Display>;
287
289
  color?: FontColor;
288
290
  backgroundColor?: BackgroundColor;
291
+ fontSize?: Responsive<FontSize>;
292
+ fontWeight?: Responsive<FontWeight>;
289
293
  borderSize?: Responsive<BorderSize>;
290
294
  borderRadius?: Responsive<BorderRadius>;
291
295
  shadow?: Responsive<BoxShadow>;
@@ -330,7 +334,7 @@ declare module '@umami/react-zen/Box' {
330
334
  as?: string;
331
335
  asChild?: boolean;
332
336
  }
333
- 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;
337
+ function Box({ display, color, backgroundColor, fontSize, fontWeight, 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;
334
338
  export { Box };
335
339
  export type { BoxProps };
336
340
  }
@@ -487,10 +491,10 @@ declare module '@umami/react-zen/Flexbox' {
487
491
  }
488
492
 
489
493
  declare module '@umami/react-zen/FloatingTooltip' {
490
- import { ReactNode } from 'react';
491
- export function FloatingTooltip({ children }: {
492
- children: ReactNode;
493
- }): import("react").JSX.Element;
494
+ import { TooltipBubbleProps } from '@/components/Tooltip';
495
+ export interface FloatingTooltipProps extends TooltipBubbleProps {
496
+ }
497
+ export function FloatingTooltip({ className, style, children, ...props }: FloatingTooltipProps): import("react").JSX.Element;
494
498
  }
495
499
 
496
500
  declare module '@umami/react-zen/Grid' {
@@ -619,14 +623,14 @@ declare module '@umami/react-zen/Label' {
619
623
  }
620
624
 
621
625
  declare module '@umami/react-zen/List' {
622
- import { ReactNode } from 'react';
623
626
  import { ListBoxProps, SeparatorProps, ListBoxSectionProps, ListBoxItemProps } from 'react-aria-components';
624
627
  export interface ListProps extends ListBoxProps<any> {
625
628
  items?: any[];
626
- className?: string;
627
- children?: ReactNode;
629
+ idProperty?: string;
630
+ labelProperty?: string;
631
+ separatorProperty?: string;
628
632
  }
629
- export function List({ items, className, children, ...props }: ListProps): import("react").JSX.Element;
633
+ export function List({ items, idProperty, labelProperty, separatorProperty, className, children, ...props }: ListProps): import("react").JSX.Element;
630
634
  export function ListItem({ children, className, ...props }: ListBoxItemProps<any>): import("react").JSX.Element;
631
635
  export function ListSeparator({ className, ...props }: SeparatorProps): import("react").JSX.Element;
632
636
  export function ListSection({ title, className, children, ...props }: ListBoxSectionProps<any> & {
@@ -647,10 +651,11 @@ declare module '@umami/react-zen/Loading' {
647
651
  declare module '@umami/react-zen/LoadingButton' {
648
652
  import { ButtonProps } from '@umami/react-zen/Button';
649
653
  interface LoadingButtonProps extends ButtonProps {
650
- disabled?: boolean;
654
+ isDisabled?: boolean;
651
655
  isLoading?: boolean;
656
+ showText?: boolean;
652
657
  }
653
- function LoadingButton({ isLoading, children, ...props }: LoadingButtonProps): import("react").JSX.Element;
658
+ function LoadingButton({ isLoading, isDisabled, showText, children, ...props }: LoadingButtonProps): import("react").JSX.Element;
654
659
  export { LoadingButton };
655
660
  export type { LoadingButtonProps };
656
661
  }
@@ -659,7 +664,6 @@ declare module '@umami/react-zen/Menu' {
659
664
  import { ReactNode } from 'react';
660
665
  import { MenuSectionProps, MenuItemProps, MenuProps as AriaMenuProps, SeparatorProps } from 'react-aria-components';
661
666
  interface MenuProps extends AriaMenuProps<any> {
662
- items?: any[];
663
667
  className?: string;
664
668
  children?: ReactNode;
665
669
  }
@@ -777,12 +781,19 @@ declare module '@umami/react-zen/SearchField' {
777
781
  }
778
782
 
779
783
  declare module '@umami/react-zen/Select' {
780
- import { SelectProps as AriaSelectProps } from 'react-aria-components';
784
+ import { PopoverProps, SelectProps as AriaSelectProps } from 'react-aria-components';
785
+ import { ListProps } from '@umami/react-zen/List';
781
786
  interface SelectProps extends AriaSelectProps<HTMLSelectElement> {
782
787
  items?: any[];
783
788
  value?: string;
784
789
  label?: string;
790
+ isLoading?: boolean;
791
+ allowSearch?: boolean;
792
+ searchDelay?: number;
793
+ onSearch?: (value: string) => void;
785
794
  onChange?: (e: any) => void;
795
+ listProps?: ListProps;
796
+ popoverProps?: PopoverProps;
786
797
  }
787
798
  const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<any>>;
788
799
  export { Select };
@@ -791,25 +802,32 @@ declare module '@umami/react-zen/Select' {
791
802
 
792
803
  declare module '@umami/react-zen/SideNav' {
793
804
  import { ReactNode } from 'react';
794
- import { BlockProps } from '@/components/Block';
795
- export interface SideNavProps {
805
+ import { ColumnProps } from '@/components/Column';
806
+ import { RowProps } from '@/components/Row';
807
+ export interface SideNavProps extends ColumnProps {
808
+ variant?: '1' | '2' | '3' | 'quiet';
796
809
  isCollapsed?: boolean;
797
- children: ReactNode;
798
- }
799
- export function SideNav({ isCollapsed, children }: SideNavProps): import("react").JSX.Element;
800
- export function SideNavHeader({ name, icon, children, }: {
801
- name: string;
802
- icon?: ReactNode;
810
+ muteItems?: boolean;
811
+ showBorder?: boolean;
803
812
  children?: ReactNode;
804
- }): import("react").JSX.Element;
805
- export function SideNavSection({ title, children }: {
813
+ }
814
+ export function SideNav({ variant, isCollapsed, muteItems, showBorder, className, children, ...props }: SideNavProps): import("react").JSX.Element;
815
+ export function SideNavSection({ title, children, }: {
806
816
  title?: string;
807
817
  children: ReactNode;
808
- }): import("react").JSX.Element;
809
- export function SideNavItem({ label, icon, className, ...props }: {
818
+ } & ColumnProps): import("react").JSX.Element;
819
+ export function SideNavHeader({ label, icon, className, children, ...props }: {
820
+ label: string;
821
+ icon?: ReactNode;
822
+ children?: ReactNode;
823
+ } & RowProps): import("react").JSX.Element;
824
+ export interface SideNavItemProps extends RowProps {
825
+ isSelected?: boolean;
826
+ }
827
+ export function SideNavItem({ label, icon, isSelected, className, children, ...props }: {
810
828
  label?: string;
811
829
  icon?: ReactNode;
812
- } & BlockProps): import("react").JSX.Element;
830
+ } & SideNavItemProps): import("react").JSX.Element;
813
831
  }
814
832
 
815
833
  declare module '@umami/react-zen/Slider' {
@@ -837,6 +855,7 @@ declare module '@umami/react-zen/Spinner' {
837
855
  size?: 'sm' | 'md' | 'lg' | 'xl';
838
856
  quiet?: boolean;
839
857
  className?: string;
858
+ isDisabled?: boolean;
840
859
  }
841
860
  export function Spinner(props: SpinnerProps): import("react").JSX.Element;
842
861
  }
@@ -968,17 +987,18 @@ declare module '@umami/react-zen/ToggleGroup' {
968
987
  }
969
988
 
970
989
  declare module '@umami/react-zen/Tooltip' {
971
- import { ReactNode } from 'react';
990
+ import { HTMLAttributes } from 'react';
972
991
  import { TooltipProps as AriaTooltipProps } from 'react-aria-components';
973
992
  interface TooltipProps extends AriaTooltipProps {
974
993
  showArrow?: boolean;
975
994
  }
976
995
  function Tooltip({ children, className, showArrow, ...props }: TooltipProps): import("react").JSX.Element;
977
- function TooltipBubble({ children }: {
978
- children?: ReactNode;
979
- }): import("react").JSX.Element;
996
+ interface TooltipBubbleProps extends HTMLAttributes<HTMLDivElement> {
997
+ showArrow?: boolean;
998
+ }
999
+ function TooltipBubble({ showArrow, children, ...props }: TooltipBubbleProps): import("react").JSX.Element;
980
1000
  export { Tooltip, TooltipBubble };
981
- export type { TooltipProps };
1001
+ export type { TooltipProps, TooltipBubbleProps };
982
1002
  }
983
1003
 
984
1004
  declare module '@umami/react-zen/ZenProvider' {