@umami/react-zen 0.199.0 → 0.201.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.
- package/dist/index.css +47 -25
- package/dist/index.d.mts +16 -8
- package/dist/index.d.ts +16 -8
- package/dist/index.js +29 -13
- package/dist/index.mjs +29 -13
- package/package.json +1 -1
- package/styles.css +47 -25
package/dist/index.css
CHANGED
|
@@ -3538,7 +3538,7 @@ body a.Button_button__NGQyO {
|
|
|
3538
3538
|
}
|
|
3539
3539
|
|
|
3540
3540
|
/* virtual-css:css:190b71b0b870ea6c0882d0c839c39b19 */
|
|
3541
|
-
.
|
|
3541
|
+
.Dialog_dialog__NjJlM {
|
|
3542
3542
|
padding: var(--spacing-6);
|
|
3543
3543
|
box-shadow: var(--box-shadow-4);
|
|
3544
3544
|
background: var(--background-color);
|
|
@@ -3548,15 +3548,17 @@ body a.Button_button__NGQyO {
|
|
|
3548
3548
|
outline: none;
|
|
3549
3549
|
overflow: auto;
|
|
3550
3550
|
}
|
|
3551
|
-
.
|
|
3551
|
+
.Dialog_title__YjdmY {
|
|
3552
3552
|
font-size: var(--font-size-5);
|
|
3553
3553
|
font-weight: 700;
|
|
3554
3554
|
margin-bottom: var(--spacing-3);
|
|
3555
3555
|
}
|
|
3556
|
-
.
|
|
3556
|
+
.Dialog_dialog__NjJlM.Dialog_sheet__ZjQ1M {
|
|
3557
3557
|
background: var(--background-color);
|
|
3558
3558
|
width: 100%;
|
|
3559
3559
|
height: 100%;
|
|
3560
|
+
padding: 0;
|
|
3561
|
+
border: 0;
|
|
3560
3562
|
border-radius: 0;
|
|
3561
3563
|
box-shadow: none;
|
|
3562
3564
|
z-index: 9999;
|
|
@@ -3718,24 +3720,24 @@ body a.Button_button__NGQyO {
|
|
|
3718
3720
|
}
|
|
3719
3721
|
|
|
3720
3722
|
/* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
|
|
3721
|
-
.
|
|
3723
|
+
.List_list__Yzk2Y {
|
|
3722
3724
|
display: grid;
|
|
3723
3725
|
outline: none;
|
|
3724
3726
|
overflow: auto;
|
|
3725
3727
|
gap: var(--spacing-1);
|
|
3726
3728
|
}
|
|
3727
|
-
.
|
|
3729
|
+
.List_separator__ODZiZ {
|
|
3728
3730
|
border-bottom: var(--border);
|
|
3729
3731
|
}
|
|
3730
|
-
.
|
|
3732
|
+
.List_section__NTI0O:not(:last-child) {
|
|
3731
3733
|
margin-bottom: var(--spacing-4);
|
|
3732
3734
|
}
|
|
3733
|
-
.
|
|
3735
|
+
.List_header__MjE1Y {
|
|
3734
3736
|
font-size: var(--font-size-3);
|
|
3735
3737
|
font-weight: var(--font-weight-bold);
|
|
3736
3738
|
padding: var(--padding);
|
|
3737
3739
|
}
|
|
3738
|
-
.
|
|
3740
|
+
.List_item__MzU5Y {
|
|
3739
3741
|
display: flex;
|
|
3740
3742
|
align-items: center;
|
|
3741
3743
|
justify-content: space-between;
|
|
@@ -3748,29 +3750,40 @@ body a.Button_button__NGQyO {
|
|
|
3748
3750
|
outline: none;
|
|
3749
3751
|
border-radius: var(--border-radius);
|
|
3750
3752
|
}
|
|
3751
|
-
.
|
|
3753
|
+
.List_item__MzU5Y[data-disabled] {
|
|
3752
3754
|
color: var(--font-color-disabled);
|
|
3753
3755
|
}
|
|
3754
|
-
.
|
|
3755
|
-
.
|
|
3756
|
+
.List_item__MzU5Y[data-focus],
|
|
3757
|
+
.List_item__MzU5Y[data-focus-visible] {
|
|
3756
3758
|
background: var(--highlight-color);
|
|
3757
3759
|
}
|
|
3758
|
-
.
|
|
3760
|
+
.List_item__MzU5Y:hover {
|
|
3759
3761
|
background: var(--highlight-color);
|
|
3760
3762
|
}
|
|
3761
|
-
.
|
|
3763
|
+
.List_item__MzU5Y[data-selected] {
|
|
3762
3764
|
font-weight: bold;
|
|
3763
|
-
& .
|
|
3765
|
+
& .List_checkmark__YzRiZ {
|
|
3764
3766
|
display: flex;
|
|
3765
3767
|
justify-content: flex-end;
|
|
3766
3768
|
}
|
|
3767
3769
|
}
|
|
3768
|
-
.
|
|
3770
|
+
.List_checkmark__YzRiZ {
|
|
3769
3771
|
display: none;
|
|
3770
3772
|
}
|
|
3771
|
-
.
|
|
3773
|
+
.List_hideCheckmark__NDlhN .List_checkmark__YzRiZ {
|
|
3772
3774
|
display: none;
|
|
3773
3775
|
}
|
|
3776
|
+
.List_fullscreen__NWMyY {
|
|
3777
|
+
display: block;
|
|
3778
|
+
padding: var(--spacing-3);
|
|
3779
|
+
border: 0;
|
|
3780
|
+
border-radius: 0;
|
|
3781
|
+
position: fixed;
|
|
3782
|
+
inset: 0;
|
|
3783
|
+
overflow: auto;
|
|
3784
|
+
z-index: 9999;
|
|
3785
|
+
background: var(--background-color);
|
|
3786
|
+
}
|
|
3774
3787
|
|
|
3775
3788
|
/* virtual-css:css:8ac5a8adaf8e8de9ae56ee4600f2cfaa */
|
|
3776
3789
|
.ComboBox_combobox__ZDYxZ {
|
|
@@ -4514,25 +4527,25 @@ body a.Button_button__NGQyO {
|
|
|
4514
4527
|
}
|
|
4515
4528
|
|
|
4516
4529
|
/* virtual-css:css:f94974973c639ccc39a8a6465cbebeb2 */
|
|
4517
|
-
.
|
|
4530
|
+
.Popover_popover__ZDgwN[data-placement=top] {
|
|
4518
4531
|
--origin: translateY(8px);
|
|
4519
4532
|
}
|
|
4520
|
-
.
|
|
4533
|
+
.Popover_popover__ZDgwN[data-placement=bottom] {
|
|
4521
4534
|
--origin: translateY(-8px);
|
|
4522
4535
|
}
|
|
4523
|
-
.
|
|
4536
|
+
.Popover_popover__ZDgwN[data-placement=right] {
|
|
4524
4537
|
--origin: translateX(-8px);
|
|
4525
4538
|
}
|
|
4526
|
-
.
|
|
4539
|
+
.Popover_popover__ZDgwN[data-placement=left] {
|
|
4527
4540
|
--origin: translateX(8px);
|
|
4528
4541
|
}
|
|
4529
|
-
.
|
|
4530
|
-
animation: Popover_popover-
|
|
4542
|
+
.Popover_popover__ZDgwN[data-entering] {
|
|
4543
|
+
animation: Popover_popover-slide__NGU0N 200ms;
|
|
4531
4544
|
}
|
|
4532
|
-
.
|
|
4533
|
-
animation: Popover_popover-
|
|
4545
|
+
.Popover_popover__ZDgwN[data-exiting] {
|
|
4546
|
+
animation: Popover_popover-slide__NGU0N 200ms reverse ease-in;
|
|
4534
4547
|
}
|
|
4535
|
-
@keyframes Popover_popover-
|
|
4548
|
+
@keyframes Popover_popover-slide__NGU0N {
|
|
4536
4549
|
from {
|
|
4537
4550
|
transform: var(--origin);
|
|
4538
4551
|
opacity: 0;
|
|
@@ -4542,6 +4555,15 @@ body a.Button_button__NGQyO {
|
|
|
4542
4555
|
opacity: 1;
|
|
4543
4556
|
}
|
|
4544
4557
|
}
|
|
4558
|
+
.Popover_fullscreen__MTcxY {
|
|
4559
|
+
display: block;
|
|
4560
|
+
border: 0;
|
|
4561
|
+
border-radius: 0;
|
|
4562
|
+
position: fixed;
|
|
4563
|
+
inset: 0;
|
|
4564
|
+
overflow: auto;
|
|
4565
|
+
z-index: 9999;
|
|
4566
|
+
}
|
|
4545
4567
|
|
|
4546
4568
|
/* virtual-css:css:0e892dc2f62a700ee33f11aa6f8910ef */
|
|
4547
4569
|
.ProgressBar_progressbar__YzdlO {
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ButtonProps as ButtonProps$1, DisclosureGroupProps, DisclosureProps, DialogProps as DialogProps$1,
|
|
2
|
-
export { BreadcrumbProps, BreadcrumbsProps, DialogTrigger, FileTrigger, Focusable, MenuTrigger,
|
|
1
|
+
import { ButtonProps as ButtonProps$1, DisclosureGroupProps, DisclosureProps, DialogProps as DialogProps$1, BreadcrumbProps, BreadcrumbsProps, CalendarProps as CalendarProps$1, CheckboxProps as CheckboxProps$1, ListBoxProps, ListBoxItemProps, SeparatorProps, ListBoxSectionProps, ComboBoxProps as ComboBoxProps$1, ListBoxRenderProps, PopoverProps as PopoverProps$1, TableProps, TooltipProps as TooltipProps$1, LabelProps as LabelProps$1, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, MenuSectionProps as MenuSectionProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, ModalOverlayProps, ModalRenderProps, TextFieldProps as TextFieldProps$1, ProgressBarProps as ProgressBarProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SelectValueRenderProps, SliderProps as SliderProps$1, SwitchProps as SwitchProps$1, TableHeaderProps, TableBodyProps, RowProps as RowProps$1, ColumnProps as ColumnProps$1, CellProps, TabsProps, TabListProps, TabProps, TabPanelProps, ToggleButtonProps, TagGroupProps, TagProps } from 'react-aria-components';
|
|
2
|
+
export { BreadcrumbProps, BreadcrumbsProps, DialogTrigger, FileTrigger, Focusable, MenuTrigger, Pressable, RadioProps, RouterProvider, Selection, SubmenuTrigger, TabListProps, TabPanelProps, TabProps, TableBodyProps, TabsProps, TooltipTrigger } from 'react-aria-components';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { HTMLAttributes, ReactNode, ReactElement, Dispatch, SetStateAction } from 'react';
|
|
5
5
|
import { UseFormProps, SubmitHandler, UseFormReturn, ControllerProps, ControllerRenderProps, FieldValues, ControllerFieldState, UseFormStateReturn, RegisterOptions } from 'react-hook-form';
|
|
@@ -219,6 +219,7 @@ declare function Toaster({ duration, position }: ToasterProps): react.JSX.Elemen
|
|
|
219
219
|
interface ToastProviderProps extends ToasterProps {
|
|
220
220
|
children: ReactNode;
|
|
221
221
|
}
|
|
222
|
+
declare const ToastContext: react.Context<{}>;
|
|
222
223
|
declare function ToastProvider({ children, ...props }: ToastProviderProps): react.JSX.Element;
|
|
223
224
|
|
|
224
225
|
declare function useDebounce(value: string, delay: number): string;
|
|
@@ -230,6 +231,7 @@ interface ThemeState {
|
|
|
230
231
|
initTheme: (preferred?: Theme, colorScheme?: 'light' | 'dark' | 'system') => void;
|
|
231
232
|
}
|
|
232
233
|
declare const useTheme: zustand.UseBoundStore<zustand.StoreApi<ThemeState>>;
|
|
234
|
+
declare function useInitTheme(preferred?: Theme, colorScheme?: 'light' | 'dark' | 'system'): void;
|
|
233
235
|
|
|
234
236
|
type ToastVariant = 'success' | 'error';
|
|
235
237
|
interface ToastOptions {
|
|
@@ -245,6 +247,7 @@ interface ToastState extends ToastOptions {
|
|
|
245
247
|
message: string;
|
|
246
248
|
timestamp: number;
|
|
247
249
|
}
|
|
250
|
+
declare function removeToast(id: string): void;
|
|
248
251
|
declare function useToast(): {
|
|
249
252
|
toast: (message: string, options?: ToastOptions) => void;
|
|
250
253
|
toasts: ToastState[];
|
|
@@ -332,11 +335,12 @@ interface ListProps extends ListBoxProps<any> {
|
|
|
332
335
|
separatorProperty?: string;
|
|
333
336
|
highlightColor?: string;
|
|
334
337
|
showCheckmark?: boolean;
|
|
338
|
+
isFullscreen?: boolean;
|
|
335
339
|
label?: string;
|
|
336
340
|
value?: string[];
|
|
337
341
|
onChange?: (value: string[]) => void;
|
|
338
342
|
}
|
|
339
|
-
declare function List({ id, items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
|
|
343
|
+
declare function List({ id, items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, isFullscreen, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
|
|
340
344
|
interface ListItemProps extends ListBoxItemProps<any> {
|
|
341
345
|
showCheckmark?: boolean;
|
|
342
346
|
}
|
|
@@ -351,7 +355,7 @@ interface ComboBoxProps extends ComboBoxProps$1<any> {
|
|
|
351
355
|
items?: any[];
|
|
352
356
|
renderEmptyState?: (props: ListBoxRenderProps) => ReactNode;
|
|
353
357
|
listProps?: ListProps;
|
|
354
|
-
popoverProps?: PopoverProps;
|
|
358
|
+
popoverProps?: PopoverProps$1;
|
|
355
359
|
}
|
|
356
360
|
declare function ComboBox({ items, className, renderEmptyState, listProps, popoverProps, children, ...props }: ComboBoxProps): react.JSX.Element;
|
|
357
361
|
|
|
@@ -602,7 +606,10 @@ interface PasswordFieldProps extends TextFieldProps$1 {
|
|
|
602
606
|
}
|
|
603
607
|
declare function PasswordField({ label, className, ...props }: PasswordFieldProps): react.JSX.Element;
|
|
604
608
|
|
|
605
|
-
|
|
609
|
+
interface PopoverProps extends PopoverProps$1 {
|
|
610
|
+
isFullscreen?: boolean;
|
|
611
|
+
}
|
|
612
|
+
declare function Popover({ children, isFullscreen, className, ...props }: PopoverProps): react.JSX.Element;
|
|
606
613
|
|
|
607
614
|
interface ProgressBarProps extends ProgressBarProps$1 {
|
|
608
615
|
showPercentage?: boolean;
|
|
@@ -642,16 +649,17 @@ interface SelectProps extends SelectProps$1<HTMLSelectElement> {
|
|
|
642
649
|
allowSearch?: boolean;
|
|
643
650
|
searchValue?: string;
|
|
644
651
|
searchDelay?: number;
|
|
652
|
+
isFullscreen?: boolean;
|
|
645
653
|
onSearch?: (value: string) => void;
|
|
646
654
|
onChange?: (e: any) => void;
|
|
647
655
|
buttonProps?: ButtonProps;
|
|
648
656
|
listProps?: ListProps;
|
|
649
|
-
popoverProps?: PopoverProps;
|
|
657
|
+
popoverProps?: PopoverProps$1;
|
|
650
658
|
renderValue?: ReactNode | ((values: SelectValueRenderProps<object> & {
|
|
651
659
|
defaultChildren: ReactNode;
|
|
652
660
|
}) => ReactNode);
|
|
653
661
|
}
|
|
654
|
-
declare function Select({ items, value, defaultValue, label, isLoading, allowSearch, searchValue, searchDelay,
|
|
662
|
+
declare function Select({ items, value, defaultValue, label, isLoading, allowSearch, searchValue, searchDelay, isFullscreen, onSearch, onChange, buttonProps, listProps, popoverProps, renderValue, className, children, ...props }: SelectProps): react.JSX.Element;
|
|
655
663
|
|
|
656
664
|
interface SidebarProps extends ColumnProps {
|
|
657
665
|
itemBackgroundColor?: string;
|
|
@@ -764,4 +772,4 @@ interface ZenProviderProps {
|
|
|
764
772
|
}
|
|
765
773
|
declare function ZenProvider({ children, theme, colorScheme, toast, }: ZenProviderProps): react.JSX.Element;
|
|
766
774
|
|
|
767
|
-
export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreakpointKey, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, CopyButton, DataCard, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormController, type FormControllerProps, FormField, FormFieldArray, type FormFieldArrayProps, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, IconLabel, type IconLabelProps, type IconProps, Image, type ImageProps, InlineEditField, type InlineEditFieldProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuGroup, type NavMenuGroupProps, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PasswordField, type PasswordFieldProps, Popover, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, SubMenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, ThemeButton, Toast, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, useBreakpoint, useDebounce, useNavigationContext, useTheme, useToast };
|
|
775
|
+
export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreakpointKey, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, CopyButton, type CopyButtonProps, DataCard, type DataCardProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormController, type FormControllerProps, FormField, FormFieldArray, type FormFieldArrayProps, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, IconLabel, type IconLabelProps, type IconProps, Image, type ImageProps, InlineEditField, type InlineEditFieldProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuGroup, type NavMenuGroupProps, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PasswordField, type PasswordFieldProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, SubMenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, type Theme, ThemeButton, Toast, ToastContext, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, removeToast, useBreakpoint, useDebounce, useInitTheme, useNavigationContext, useTheme, useToast };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ButtonProps as ButtonProps$1, DisclosureGroupProps, DisclosureProps, DialogProps as DialogProps$1,
|
|
2
|
-
export { BreadcrumbProps, BreadcrumbsProps, DialogTrigger, FileTrigger, Focusable, MenuTrigger,
|
|
1
|
+
import { ButtonProps as ButtonProps$1, DisclosureGroupProps, DisclosureProps, DialogProps as DialogProps$1, BreadcrumbProps, BreadcrumbsProps, CalendarProps as CalendarProps$1, CheckboxProps as CheckboxProps$1, ListBoxProps, ListBoxItemProps, SeparatorProps, ListBoxSectionProps, ComboBoxProps as ComboBoxProps$1, ListBoxRenderProps, PopoverProps as PopoverProps$1, TableProps, TooltipProps as TooltipProps$1, LabelProps as LabelProps$1, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, MenuSectionProps as MenuSectionProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, ModalOverlayProps, ModalRenderProps, TextFieldProps as TextFieldProps$1, ProgressBarProps as ProgressBarProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SelectValueRenderProps, SliderProps as SliderProps$1, SwitchProps as SwitchProps$1, TableHeaderProps, TableBodyProps, RowProps as RowProps$1, ColumnProps as ColumnProps$1, CellProps, TabsProps, TabListProps, TabProps, TabPanelProps, ToggleButtonProps, TagGroupProps, TagProps } from 'react-aria-components';
|
|
2
|
+
export { BreadcrumbProps, BreadcrumbsProps, DialogTrigger, FileTrigger, Focusable, MenuTrigger, Pressable, RadioProps, RouterProvider, Selection, SubmenuTrigger, TabListProps, TabPanelProps, TabProps, TableBodyProps, TabsProps, TooltipTrigger } from 'react-aria-components';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { HTMLAttributes, ReactNode, ReactElement, Dispatch, SetStateAction } from 'react';
|
|
5
5
|
import { UseFormProps, SubmitHandler, UseFormReturn, ControllerProps, ControllerRenderProps, FieldValues, ControllerFieldState, UseFormStateReturn, RegisterOptions } from 'react-hook-form';
|
|
@@ -219,6 +219,7 @@ declare function Toaster({ duration, position }: ToasterProps): react.JSX.Elemen
|
|
|
219
219
|
interface ToastProviderProps extends ToasterProps {
|
|
220
220
|
children: ReactNode;
|
|
221
221
|
}
|
|
222
|
+
declare const ToastContext: react.Context<{}>;
|
|
222
223
|
declare function ToastProvider({ children, ...props }: ToastProviderProps): react.JSX.Element;
|
|
223
224
|
|
|
224
225
|
declare function useDebounce(value: string, delay: number): string;
|
|
@@ -230,6 +231,7 @@ interface ThemeState {
|
|
|
230
231
|
initTheme: (preferred?: Theme, colorScheme?: 'light' | 'dark' | 'system') => void;
|
|
231
232
|
}
|
|
232
233
|
declare const useTheme: zustand.UseBoundStore<zustand.StoreApi<ThemeState>>;
|
|
234
|
+
declare function useInitTheme(preferred?: Theme, colorScheme?: 'light' | 'dark' | 'system'): void;
|
|
233
235
|
|
|
234
236
|
type ToastVariant = 'success' | 'error';
|
|
235
237
|
interface ToastOptions {
|
|
@@ -245,6 +247,7 @@ interface ToastState extends ToastOptions {
|
|
|
245
247
|
message: string;
|
|
246
248
|
timestamp: number;
|
|
247
249
|
}
|
|
250
|
+
declare function removeToast(id: string): void;
|
|
248
251
|
declare function useToast(): {
|
|
249
252
|
toast: (message: string, options?: ToastOptions) => void;
|
|
250
253
|
toasts: ToastState[];
|
|
@@ -332,11 +335,12 @@ interface ListProps extends ListBoxProps<any> {
|
|
|
332
335
|
separatorProperty?: string;
|
|
333
336
|
highlightColor?: string;
|
|
334
337
|
showCheckmark?: boolean;
|
|
338
|
+
isFullscreen?: boolean;
|
|
335
339
|
label?: string;
|
|
336
340
|
value?: string[];
|
|
337
341
|
onChange?: (value: string[]) => void;
|
|
338
342
|
}
|
|
339
|
-
declare function List({ id, items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
|
|
343
|
+
declare function List({ id, items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, isFullscreen, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
|
|
340
344
|
interface ListItemProps extends ListBoxItemProps<any> {
|
|
341
345
|
showCheckmark?: boolean;
|
|
342
346
|
}
|
|
@@ -351,7 +355,7 @@ interface ComboBoxProps extends ComboBoxProps$1<any> {
|
|
|
351
355
|
items?: any[];
|
|
352
356
|
renderEmptyState?: (props: ListBoxRenderProps) => ReactNode;
|
|
353
357
|
listProps?: ListProps;
|
|
354
|
-
popoverProps?: PopoverProps;
|
|
358
|
+
popoverProps?: PopoverProps$1;
|
|
355
359
|
}
|
|
356
360
|
declare function ComboBox({ items, className, renderEmptyState, listProps, popoverProps, children, ...props }: ComboBoxProps): react.JSX.Element;
|
|
357
361
|
|
|
@@ -602,7 +606,10 @@ interface PasswordFieldProps extends TextFieldProps$1 {
|
|
|
602
606
|
}
|
|
603
607
|
declare function PasswordField({ label, className, ...props }: PasswordFieldProps): react.JSX.Element;
|
|
604
608
|
|
|
605
|
-
|
|
609
|
+
interface PopoverProps extends PopoverProps$1 {
|
|
610
|
+
isFullscreen?: boolean;
|
|
611
|
+
}
|
|
612
|
+
declare function Popover({ children, isFullscreen, className, ...props }: PopoverProps): react.JSX.Element;
|
|
606
613
|
|
|
607
614
|
interface ProgressBarProps extends ProgressBarProps$1 {
|
|
608
615
|
showPercentage?: boolean;
|
|
@@ -642,16 +649,17 @@ interface SelectProps extends SelectProps$1<HTMLSelectElement> {
|
|
|
642
649
|
allowSearch?: boolean;
|
|
643
650
|
searchValue?: string;
|
|
644
651
|
searchDelay?: number;
|
|
652
|
+
isFullscreen?: boolean;
|
|
645
653
|
onSearch?: (value: string) => void;
|
|
646
654
|
onChange?: (e: any) => void;
|
|
647
655
|
buttonProps?: ButtonProps;
|
|
648
656
|
listProps?: ListProps;
|
|
649
|
-
popoverProps?: PopoverProps;
|
|
657
|
+
popoverProps?: PopoverProps$1;
|
|
650
658
|
renderValue?: ReactNode | ((values: SelectValueRenderProps<object> & {
|
|
651
659
|
defaultChildren: ReactNode;
|
|
652
660
|
}) => ReactNode);
|
|
653
661
|
}
|
|
654
|
-
declare function Select({ items, value, defaultValue, label, isLoading, allowSearch, searchValue, searchDelay,
|
|
662
|
+
declare function Select({ items, value, defaultValue, label, isLoading, allowSearch, searchValue, searchDelay, isFullscreen, onSearch, onChange, buttonProps, listProps, popoverProps, renderValue, className, children, ...props }: SelectProps): react.JSX.Element;
|
|
655
663
|
|
|
656
664
|
interface SidebarProps extends ColumnProps {
|
|
657
665
|
itemBackgroundColor?: string;
|
|
@@ -764,4 +772,4 @@ interface ZenProviderProps {
|
|
|
764
772
|
}
|
|
765
773
|
declare function ZenProvider({ children, theme, colorScheme, toast, }: ZenProviderProps): react.JSX.Element;
|
|
766
774
|
|
|
767
|
-
export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreakpointKey, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, CopyButton, DataCard, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormController, type FormControllerProps, FormField, FormFieldArray, type FormFieldArrayProps, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, IconLabel, type IconLabelProps, type IconProps, Image, type ImageProps, InlineEditField, type InlineEditFieldProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuGroup, type NavMenuGroupProps, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PasswordField, type PasswordFieldProps, Popover, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, SubMenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, ThemeButton, Toast, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, useBreakpoint, useDebounce, useNavigationContext, useTheme, useToast };
|
|
775
|
+
export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreakpointKey, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ComboBox, type ComboBoxProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, CopyButton, type CopyButtonProps, DataCard, type DataCardProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormController, type FormControllerProps, FormField, FormFieldArray, type FormFieldArrayProps, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, IconLabel, type IconLabelProps, type IconProps, Image, type ImageProps, InlineEditField, type InlineEditFieldProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuGroup, type NavMenuGroupProps, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PasswordField, type PasswordFieldProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, SubMenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, type Theme, ThemeButton, Toast, ToastContext, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, removeToast, useBreakpoint, useDebounce, useInitTheme, useNavigationContext, useTheme, useToast };
|
package/dist/index.js
CHANGED
|
@@ -320,6 +320,7 @@ __export(index_exports, {
|
|
|
320
320
|
TextField: () => TextField2,
|
|
321
321
|
ThemeButton: () => ThemeButton,
|
|
322
322
|
Toast: () => Toast,
|
|
323
|
+
ToastContext: () => ToastContext,
|
|
323
324
|
ToastProvider: () => ToastProvider,
|
|
324
325
|
Toaster: () => Toaster,
|
|
325
326
|
Toggle: () => Toggle,
|
|
@@ -329,8 +330,10 @@ __export(index_exports, {
|
|
|
329
330
|
TooltipBubble: () => TooltipBubble,
|
|
330
331
|
TooltipTrigger: () => $4e3b923658d69c60$export$8c610744efcf8a1d,
|
|
331
332
|
ZenProvider: () => ZenProvider,
|
|
333
|
+
removeToast: () => removeToast,
|
|
332
334
|
useBreakpoint: () => useBreakpoint,
|
|
333
335
|
useDebounce: () => useDebounce,
|
|
336
|
+
useInitTheme: () => useInitTheme,
|
|
334
337
|
useNavigationContext: () => useNavigationContext,
|
|
335
338
|
useTheme: () => useTheme,
|
|
336
339
|
useToast: () => useToast
|
|
@@ -33124,7 +33127,7 @@ function Column({ reverse, children, ...props }) {
|
|
|
33124
33127
|
}
|
|
33125
33128
|
|
|
33126
33129
|
// css-modules:E:\dev\umami-react-zen\src\components\Dialog.module.css
|
|
33127
|
-
var Dialog_default = { "dialog": "
|
|
33130
|
+
var Dialog_default = { "dialog": "Dialog_dialog__NjJlM", "title": "Dialog_title__YjdmY", "sheet": "Dialog_sheet__ZjQ1M" };
|
|
33128
33131
|
|
|
33129
33132
|
// src/components/Dialog.tsx
|
|
33130
33133
|
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
@@ -33346,7 +33349,7 @@ function getHighlightColor(color) {
|
|
|
33346
33349
|
}
|
|
33347
33350
|
|
|
33348
33351
|
// css-modules:E:\dev\umami-react-zen\src\components\List.module.css
|
|
33349
|
-
var List_default = { "list": "
|
|
33352
|
+
var List_default = { "list": "List_list__Yzk2Y", "separator": "List_separator__ODZiZ", "section": "List_section__NTI0O", "header": "List_header__MjE1Y", "item": "List_item__MzU5Y", "checkmark": "List_checkmark__YzRiZ", "hideCheckmark": "List_hideCheckmark__NDlhN", "fullscreen": "List_fullscreen__NWMyY" };
|
|
33350
33353
|
|
|
33351
33354
|
// src/components/List.tsx
|
|
33352
33355
|
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
@@ -33355,9 +33358,10 @@ function List({
|
|
|
33355
33358
|
items = [],
|
|
33356
33359
|
idProperty = "id",
|
|
33357
33360
|
labelProperty = "label",
|
|
33358
|
-
separatorProperty = "
|
|
33361
|
+
separatorProperty = "separator",
|
|
33359
33362
|
highlightColor,
|
|
33360
33363
|
showCheckmark = true,
|
|
33364
|
+
isFullscreen,
|
|
33361
33365
|
label,
|
|
33362
33366
|
value,
|
|
33363
33367
|
onChange,
|
|
@@ -33387,7 +33391,12 @@ function List({
|
|
|
33387
33391
|
selectedKeys: value || selectedKeys,
|
|
33388
33392
|
defaultSelectedKeys: value || defaultSelectedKeys,
|
|
33389
33393
|
items,
|
|
33390
|
-
className: (0, import_classnames21.default)(
|
|
33394
|
+
className: (0, import_classnames21.default)(
|
|
33395
|
+
List_default.list,
|
|
33396
|
+
className,
|
|
33397
|
+
!showCheckmark && List_default.hideCheckmark,
|
|
33398
|
+
isFullscreen && List_default.fullscreen
|
|
33399
|
+
),
|
|
33391
33400
|
onSelectionChange: handleSelectionChange,
|
|
33392
33401
|
style: { ...style, ...getHighlightColor(highlightColor) },
|
|
33393
33402
|
children: children || items?.map((item) => {
|
|
@@ -34305,12 +34314,19 @@ function PasswordField({ label, className, ...props }) {
|
|
|
34305
34314
|
var import_classnames41 = __toESM(require_classnames());
|
|
34306
34315
|
|
|
34307
34316
|
// css-modules:E:\dev\umami-react-zen\src\components\Popover.module.css
|
|
34308
|
-
var Popover_default = { "popover": "
|
|
34317
|
+
var Popover_default = { "popover": "Popover_popover__ZDgwN", "popover-slide": "Popover_popover-slide__NGU0N", "fullscreen": "Popover_fullscreen__MTcxY" };
|
|
34309
34318
|
|
|
34310
34319
|
// src/components/Popover.tsx
|
|
34311
34320
|
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
34312
|
-
function Popover2({ children, className, ...props }) {
|
|
34313
|
-
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
34321
|
+
function Popover2({ children, isFullscreen, className, ...props }) {
|
|
34322
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
34323
|
+
$07b14b47974efb58$export$5b6b19405a83ff9d,
|
|
34324
|
+
{
|
|
34325
|
+
...props,
|
|
34326
|
+
className: (0, import_classnames41.default)(Popover_default.popover, isFullscreen && Popover_default.fullscreen, className),
|
|
34327
|
+
children
|
|
34328
|
+
}
|
|
34329
|
+
);
|
|
34314
34330
|
}
|
|
34315
34331
|
|
|
34316
34332
|
// src/components/ProgressBar.tsx
|
|
@@ -34466,8 +34482,8 @@ function Select2({
|
|
|
34466
34482
|
allowSearch,
|
|
34467
34483
|
searchValue,
|
|
34468
34484
|
searchDelay,
|
|
34485
|
+
isFullscreen,
|
|
34469
34486
|
onSearch,
|
|
34470
|
-
onSelectionChange,
|
|
34471
34487
|
onChange,
|
|
34472
34488
|
buttonProps,
|
|
34473
34489
|
listProps,
|
|
@@ -34479,7 +34495,6 @@ function Select2({
|
|
|
34479
34495
|
}) {
|
|
34480
34496
|
const [search, setSearch] = (0, import_react201.useState)("");
|
|
34481
34497
|
const handleChange = (e) => {
|
|
34482
|
-
onSelectionChange?.(e);
|
|
34483
34498
|
onChange?.(e);
|
|
34484
34499
|
};
|
|
34485
34500
|
const handleSearch = (value2) => {
|
|
@@ -34496,9 +34511,9 @@ function Select2({
|
|
|
34496
34511
|
"aria-label": "Select",
|
|
34497
34512
|
...props,
|
|
34498
34513
|
className: (0, import_classnames46.default)(Select_default.select, className),
|
|
34499
|
-
|
|
34500
|
-
|
|
34501
|
-
|
|
34514
|
+
value,
|
|
34515
|
+
defaultValue,
|
|
34516
|
+
onChange: handleChange,
|
|
34502
34517
|
children: [
|
|
34503
34518
|
label && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Label2, { children: label }),
|
|
34504
34519
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
@@ -34513,7 +34528,7 @@ function Select2({
|
|
|
34513
34528
|
] })
|
|
34514
34529
|
}
|
|
34515
34530
|
),
|
|
34516
|
-
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Popover2, { ...popoverProps, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: Select_default.list, children: [
|
|
34531
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Popover2, { ...popoverProps, onOpenChange: handleOpenChange, isFullscreen, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: Select_default.list, children: [
|
|
34517
34532
|
allowSearch && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
34518
34533
|
SearchField2,
|
|
34519
34534
|
{
|
|
@@ -34531,6 +34546,7 @@ function Select2({
|
|
|
34531
34546
|
{
|
|
34532
34547
|
...listProps,
|
|
34533
34548
|
items,
|
|
34549
|
+
isFullscreen,
|
|
34534
34550
|
style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
|
|
34535
34551
|
children
|
|
34536
34552
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -33002,7 +33002,7 @@ function Column({ reverse, children, ...props }) {
|
|
|
33002
33002
|
}
|
|
33003
33003
|
|
|
33004
33004
|
// css-modules:E:\dev\umami-react-zen\src\components\Dialog.module.css
|
|
33005
|
-
var Dialog_default = { "dialog": "
|
|
33005
|
+
var Dialog_default = { "dialog": "Dialog_dialog__NjJlM", "title": "Dialog_title__YjdmY", "sheet": "Dialog_sheet__ZjQ1M" };
|
|
33006
33006
|
|
|
33007
33007
|
// src/components/Dialog.tsx
|
|
33008
33008
|
import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
@@ -33224,7 +33224,7 @@ function getHighlightColor(color) {
|
|
|
33224
33224
|
}
|
|
33225
33225
|
|
|
33226
33226
|
// css-modules:E:\dev\umami-react-zen\src\components\List.module.css
|
|
33227
|
-
var List_default = { "list": "
|
|
33227
|
+
var List_default = { "list": "List_list__Yzk2Y", "separator": "List_separator__ODZiZ", "section": "List_section__NTI0O", "header": "List_header__MjE1Y", "item": "List_item__MzU5Y", "checkmark": "List_checkmark__YzRiZ", "hideCheckmark": "List_hideCheckmark__NDlhN", "fullscreen": "List_fullscreen__NWMyY" };
|
|
33228
33228
|
|
|
33229
33229
|
// src/components/List.tsx
|
|
33230
33230
|
import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
@@ -33233,9 +33233,10 @@ function List({
|
|
|
33233
33233
|
items = [],
|
|
33234
33234
|
idProperty = "id",
|
|
33235
33235
|
labelProperty = "label",
|
|
33236
|
-
separatorProperty = "
|
|
33236
|
+
separatorProperty = "separator",
|
|
33237
33237
|
highlightColor,
|
|
33238
33238
|
showCheckmark = true,
|
|
33239
|
+
isFullscreen,
|
|
33239
33240
|
label,
|
|
33240
33241
|
value,
|
|
33241
33242
|
onChange,
|
|
@@ -33265,7 +33266,12 @@ function List({
|
|
|
33265
33266
|
selectedKeys: value || selectedKeys,
|
|
33266
33267
|
defaultSelectedKeys: value || defaultSelectedKeys,
|
|
33267
33268
|
items,
|
|
33268
|
-
className: (0, import_classnames21.default)(
|
|
33269
|
+
className: (0, import_classnames21.default)(
|
|
33270
|
+
List_default.list,
|
|
33271
|
+
className,
|
|
33272
|
+
!showCheckmark && List_default.hideCheckmark,
|
|
33273
|
+
isFullscreen && List_default.fullscreen
|
|
33274
|
+
),
|
|
33269
33275
|
onSelectionChange: handleSelectionChange,
|
|
33270
33276
|
style: { ...style, ...getHighlightColor(highlightColor) },
|
|
33271
33277
|
children: children || items?.map((item) => {
|
|
@@ -34187,12 +34193,19 @@ function PasswordField({ label, className, ...props }) {
|
|
|
34187
34193
|
var import_classnames41 = __toESM(require_classnames());
|
|
34188
34194
|
|
|
34189
34195
|
// css-modules:E:\dev\umami-react-zen\src\components\Popover.module.css
|
|
34190
|
-
var Popover_default = { "popover": "
|
|
34196
|
+
var Popover_default = { "popover": "Popover_popover__ZDgwN", "popover-slide": "Popover_popover-slide__NGU0N", "fullscreen": "Popover_fullscreen__MTcxY" };
|
|
34191
34197
|
|
|
34192
34198
|
// src/components/Popover.tsx
|
|
34193
34199
|
import { jsx as jsx58 } from "react/jsx-runtime";
|
|
34194
|
-
function Popover2({ children, className, ...props }) {
|
|
34195
|
-
return /* @__PURE__ */ jsx58(
|
|
34200
|
+
function Popover2({ children, isFullscreen, className, ...props }) {
|
|
34201
|
+
return /* @__PURE__ */ jsx58(
|
|
34202
|
+
$07b14b47974efb58$export$5b6b19405a83ff9d,
|
|
34203
|
+
{
|
|
34204
|
+
...props,
|
|
34205
|
+
className: (0, import_classnames41.default)(Popover_default.popover, isFullscreen && Popover_default.fullscreen, className),
|
|
34206
|
+
children
|
|
34207
|
+
}
|
|
34208
|
+
);
|
|
34196
34209
|
}
|
|
34197
34210
|
|
|
34198
34211
|
// src/components/ProgressBar.tsx
|
|
@@ -34348,8 +34361,8 @@ function Select2({
|
|
|
34348
34361
|
allowSearch,
|
|
34349
34362
|
searchValue,
|
|
34350
34363
|
searchDelay,
|
|
34364
|
+
isFullscreen,
|
|
34351
34365
|
onSearch,
|
|
34352
|
-
onSelectionChange,
|
|
34353
34366
|
onChange,
|
|
34354
34367
|
buttonProps,
|
|
34355
34368
|
listProps,
|
|
@@ -34361,7 +34374,6 @@ function Select2({
|
|
|
34361
34374
|
}) {
|
|
34362
34375
|
const [search, setSearch] = useState19("");
|
|
34363
34376
|
const handleChange = (e) => {
|
|
34364
|
-
onSelectionChange?.(e);
|
|
34365
34377
|
onChange?.(e);
|
|
34366
34378
|
};
|
|
34367
34379
|
const handleSearch = (value2) => {
|
|
@@ -34378,9 +34390,9 @@ function Select2({
|
|
|
34378
34390
|
"aria-label": "Select",
|
|
34379
34391
|
...props,
|
|
34380
34392
|
className: (0, import_classnames46.default)(Select_default.select, className),
|
|
34381
|
-
|
|
34382
|
-
|
|
34383
|
-
|
|
34393
|
+
value,
|
|
34394
|
+
defaultValue,
|
|
34395
|
+
onChange: handleChange,
|
|
34384
34396
|
children: [
|
|
34385
34397
|
label && /* @__PURE__ */ jsx63(Label2, { children: label }),
|
|
34386
34398
|
/* @__PURE__ */ jsx63(
|
|
@@ -34395,7 +34407,7 @@ function Select2({
|
|
|
34395
34407
|
] })
|
|
34396
34408
|
}
|
|
34397
34409
|
),
|
|
34398
|
-
/* @__PURE__ */ jsx63(Popover2, { ...popoverProps, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs38("div", { className: Select_default.list, children: [
|
|
34410
|
+
/* @__PURE__ */ jsx63(Popover2, { ...popoverProps, onOpenChange: handleOpenChange, isFullscreen, children: /* @__PURE__ */ jsxs38("div", { className: Select_default.list, children: [
|
|
34399
34411
|
allowSearch && /* @__PURE__ */ jsx63(
|
|
34400
34412
|
SearchField2,
|
|
34401
34413
|
{
|
|
@@ -34413,6 +34425,7 @@ function Select2({
|
|
|
34413
34425
|
{
|
|
34414
34426
|
...listProps,
|
|
34415
34427
|
items,
|
|
34428
|
+
isFullscreen,
|
|
34416
34429
|
style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
|
|
34417
34430
|
children
|
|
34418
34431
|
}
|
|
@@ -34823,6 +34836,7 @@ export {
|
|
|
34823
34836
|
TextField2 as TextField,
|
|
34824
34837
|
ThemeButton,
|
|
34825
34838
|
Toast,
|
|
34839
|
+
ToastContext,
|
|
34826
34840
|
ToastProvider,
|
|
34827
34841
|
Toaster,
|
|
34828
34842
|
Toggle,
|
|
@@ -34832,8 +34846,10 @@ export {
|
|
|
34832
34846
|
TooltipBubble,
|
|
34833
34847
|
$4e3b923658d69c60$export$8c610744efcf8a1d as TooltipTrigger,
|
|
34834
34848
|
ZenProvider,
|
|
34849
|
+
removeToast,
|
|
34835
34850
|
useBreakpoint,
|
|
34836
34851
|
useDebounce,
|
|
34852
|
+
useInitTheme,
|
|
34837
34853
|
useNavigationContext,
|
|
34838
34854
|
useTheme,
|
|
34839
34855
|
useToast
|
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -3856,7 +3856,7 @@ body a.Button_button__NGQyO {
|
|
|
3856
3856
|
}
|
|
3857
3857
|
|
|
3858
3858
|
/* virtual-css:css:190b71b0b870ea6c0882d0c839c39b19 */
|
|
3859
|
-
.
|
|
3859
|
+
.Dialog_dialog__NjJlM {
|
|
3860
3860
|
padding: var(--spacing-6);
|
|
3861
3861
|
box-shadow: var(--box-shadow-4);
|
|
3862
3862
|
background: var(--background-color);
|
|
@@ -3866,15 +3866,17 @@ body a.Button_button__NGQyO {
|
|
|
3866
3866
|
outline: none;
|
|
3867
3867
|
overflow: auto;
|
|
3868
3868
|
}
|
|
3869
|
-
.
|
|
3869
|
+
.Dialog_title__YjdmY {
|
|
3870
3870
|
font-size: var(--font-size-5);
|
|
3871
3871
|
font-weight: 700;
|
|
3872
3872
|
margin-bottom: var(--spacing-3);
|
|
3873
3873
|
}
|
|
3874
|
-
.
|
|
3874
|
+
.Dialog_dialog__NjJlM.Dialog_sheet__ZjQ1M {
|
|
3875
3875
|
background: var(--background-color);
|
|
3876
3876
|
width: 100%;
|
|
3877
3877
|
height: 100%;
|
|
3878
|
+
padding: 0;
|
|
3879
|
+
border: 0;
|
|
3878
3880
|
border-radius: 0;
|
|
3879
3881
|
box-shadow: none;
|
|
3880
3882
|
z-index: 9999;
|
|
@@ -4036,24 +4038,24 @@ body a.Button_button__NGQyO {
|
|
|
4036
4038
|
}
|
|
4037
4039
|
|
|
4038
4040
|
/* virtual-css:css:0fb02723d81c5960ed149d3d9f58f1ba */
|
|
4039
|
-
.
|
|
4041
|
+
.List_list__Yzk2Y {
|
|
4040
4042
|
display: grid;
|
|
4041
4043
|
outline: none;
|
|
4042
4044
|
overflow: auto;
|
|
4043
4045
|
gap: var(--spacing-1);
|
|
4044
4046
|
}
|
|
4045
|
-
.
|
|
4047
|
+
.List_separator__ODZiZ {
|
|
4046
4048
|
border-bottom: var(--border);
|
|
4047
4049
|
}
|
|
4048
|
-
.
|
|
4050
|
+
.List_section__NTI0O:not(:last-child) {
|
|
4049
4051
|
margin-bottom: var(--spacing-4);
|
|
4050
4052
|
}
|
|
4051
|
-
.
|
|
4053
|
+
.List_header__MjE1Y {
|
|
4052
4054
|
font-size: var(--font-size-3);
|
|
4053
4055
|
font-weight: var(--font-weight-bold);
|
|
4054
4056
|
padding: var(--padding);
|
|
4055
4057
|
}
|
|
4056
|
-
.
|
|
4058
|
+
.List_item__MzU5Y {
|
|
4057
4059
|
display: flex;
|
|
4058
4060
|
align-items: center;
|
|
4059
4061
|
justify-content: space-between;
|
|
@@ -4066,29 +4068,40 @@ body a.Button_button__NGQyO {
|
|
|
4066
4068
|
outline: none;
|
|
4067
4069
|
border-radius: var(--border-radius);
|
|
4068
4070
|
}
|
|
4069
|
-
.
|
|
4071
|
+
.List_item__MzU5Y[data-disabled] {
|
|
4070
4072
|
color: var(--font-color-disabled);
|
|
4071
4073
|
}
|
|
4072
|
-
.
|
|
4073
|
-
.
|
|
4074
|
+
.List_item__MzU5Y[data-focus],
|
|
4075
|
+
.List_item__MzU5Y[data-focus-visible] {
|
|
4074
4076
|
background: var(--highlight-color);
|
|
4075
4077
|
}
|
|
4076
|
-
.
|
|
4078
|
+
.List_item__MzU5Y:hover {
|
|
4077
4079
|
background: var(--highlight-color);
|
|
4078
4080
|
}
|
|
4079
|
-
.
|
|
4081
|
+
.List_item__MzU5Y[data-selected] {
|
|
4080
4082
|
font-weight: bold;
|
|
4081
|
-
& .
|
|
4083
|
+
& .List_checkmark__YzRiZ {
|
|
4082
4084
|
display: flex;
|
|
4083
4085
|
justify-content: flex-end;
|
|
4084
4086
|
}
|
|
4085
4087
|
}
|
|
4086
|
-
.
|
|
4088
|
+
.List_checkmark__YzRiZ {
|
|
4087
4089
|
display: none;
|
|
4088
4090
|
}
|
|
4089
|
-
.
|
|
4091
|
+
.List_hideCheckmark__NDlhN .List_checkmark__YzRiZ {
|
|
4090
4092
|
display: none;
|
|
4091
4093
|
}
|
|
4094
|
+
.List_fullscreen__NWMyY {
|
|
4095
|
+
display: block;
|
|
4096
|
+
padding: var(--spacing-3);
|
|
4097
|
+
border: 0;
|
|
4098
|
+
border-radius: 0;
|
|
4099
|
+
position: fixed;
|
|
4100
|
+
inset: 0;
|
|
4101
|
+
overflow: auto;
|
|
4102
|
+
z-index: 9999;
|
|
4103
|
+
background: var(--background-color);
|
|
4104
|
+
}
|
|
4092
4105
|
|
|
4093
4106
|
/* virtual-css:css:8ac5a8adaf8e8de9ae56ee4600f2cfaa */
|
|
4094
4107
|
.ComboBox_combobox__ZDYxZ {
|
|
@@ -4832,25 +4845,25 @@ body a.Button_button__NGQyO {
|
|
|
4832
4845
|
}
|
|
4833
4846
|
|
|
4834
4847
|
/* virtual-css:css:f94974973c639ccc39a8a6465cbebeb2 */
|
|
4835
|
-
.
|
|
4848
|
+
.Popover_popover__ZDgwN[data-placement=top] {
|
|
4836
4849
|
--origin: translateY(8px);
|
|
4837
4850
|
}
|
|
4838
|
-
.
|
|
4851
|
+
.Popover_popover__ZDgwN[data-placement=bottom] {
|
|
4839
4852
|
--origin: translateY(-8px);
|
|
4840
4853
|
}
|
|
4841
|
-
.
|
|
4854
|
+
.Popover_popover__ZDgwN[data-placement=right] {
|
|
4842
4855
|
--origin: translateX(-8px);
|
|
4843
4856
|
}
|
|
4844
|
-
.
|
|
4857
|
+
.Popover_popover__ZDgwN[data-placement=left] {
|
|
4845
4858
|
--origin: translateX(8px);
|
|
4846
4859
|
}
|
|
4847
|
-
.
|
|
4848
|
-
animation: Popover_popover-
|
|
4860
|
+
.Popover_popover__ZDgwN[data-entering] {
|
|
4861
|
+
animation: Popover_popover-slide__NGU0N 200ms;
|
|
4849
4862
|
}
|
|
4850
|
-
.
|
|
4851
|
-
animation: Popover_popover-
|
|
4863
|
+
.Popover_popover__ZDgwN[data-exiting] {
|
|
4864
|
+
animation: Popover_popover-slide__NGU0N 200ms reverse ease-in;
|
|
4852
4865
|
}
|
|
4853
|
-
@keyframes Popover_popover-
|
|
4866
|
+
@keyframes Popover_popover-slide__NGU0N {
|
|
4854
4867
|
from {
|
|
4855
4868
|
transform: var(--origin);
|
|
4856
4869
|
opacity: 0;
|
|
@@ -4860,6 +4873,15 @@ body a.Button_button__NGQyO {
|
|
|
4860
4873
|
opacity: 1;
|
|
4861
4874
|
}
|
|
4862
4875
|
}
|
|
4876
|
+
.Popover_fullscreen__MTcxY {
|
|
4877
|
+
display: block;
|
|
4878
|
+
border: 0;
|
|
4879
|
+
border-radius: 0;
|
|
4880
|
+
position: fixed;
|
|
4881
|
+
inset: 0;
|
|
4882
|
+
overflow: auto;
|
|
4883
|
+
z-index: 9999;
|
|
4884
|
+
}
|
|
4863
4885
|
|
|
4864
4886
|
/* virtual-css:css:0e892dc2f62a700ee33f11aa6f8910ef */
|
|
4865
4887
|
.ProgressBar_progressbar__YzdlO {
|