@umami/react-zen 0.120.0 → 0.121.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 CHANGED
@@ -3015,15 +3015,17 @@
3015
3015
  }
3016
3016
 
3017
3017
  /* virtual-css:css:c1c264103e87c7a7d9c345a7e75f073b */
3018
- .Form_form__ZjMwZ {
3018
+ .Form_form__NmE1N {
3019
+ display: grid;
3019
3020
  position: relative;
3020
3021
  font-size: var(--font-size);
3022
+ gap: var(--gap);
3021
3023
  }
3022
- .Form_text__NDc1Y {
3024
+ .Form_text__MjgxN {
3023
3025
  text-align: center;
3024
3026
  margin: auto;
3025
3027
  }
3026
- .Form_icon__ZGE1Z {
3028
+ .Form_icon__MTI0N {
3027
3029
  align-self: flex-start;
3028
3030
  }
3029
3031
 
@@ -3647,61 +3649,55 @@ body a.Button_button__NDYwM {
3647
3649
  }
3648
3650
  }
3649
3651
 
3650
- /* virtual-css:css:ac55918cdbb6b3a9ac9deedf05ce3806 */
3651
- .input_field__ZmMwY {
3652
- position: relative;
3653
- }
3654
- .input_field__ZmMwY,
3655
- .input_row__NTc1Z {
3656
- position: relative;
3657
- }
3658
- .input_field__ZmMwY[data-readonly] .input_input__MzU4N,
3659
- .input_field__ZmMwY[data-disabled] .input_input__MzU4N {
3660
- background: var(--base-color-2);
3661
- }
3662
- .input_input__MzU4N {
3652
+ /* virtual-css:css:f85c857d13f820fa4badfb09996080b9 */
3653
+ .TextField_field__YWExY {
3654
+ display: flex;
3655
+ align-items: center;
3656
+ padding: 0 var(--padding-x);
3657
+ gap: var(--gap);
3658
+ font-family: inherit;
3663
3659
  font-size: var(--font-size);
3664
3660
  color: var(--font-color);
3665
3661
  border: var(--border);
3666
3662
  border-radius: var(--border-radius);
3667
3663
  background: var(--background-color);
3668
3664
  box-shadow: var(--box-shadow);
3669
- padding: var(--padding);
3670
3665
  line-height: 1.5rem;
3671
- width: 100%;
3672
- }
3673
- .input_input__MzU4N:focus {
3674
- border-color: transparent;
3675
- outline: var(--outline);
3676
- outline-offset: -1px;
3677
- }
3678
- .input_input__MzU4N::placeholder {
3679
- color: var(--font-color-muted);
3680
- }
3681
- .input_input__MzU4N:disabled {
3682
- color: var(--font-color-muted);
3683
- }
3684
- .input_input__MzU4N::-webkit-search-cancel-button,
3685
- .input_input__MzU4N::-webkit-search-decoration {
3686
- -webkit-appearance: none;
3687
- }
3688
- .input_icon__YzA4Z {
3689
- color: var(--font-color-muted);
3690
- }
3691
- .input_icon__YzA4Z:hover {
3692
- color: var(--font-color);
3693
- cursor: pointer;
3666
+ position: relative;
3667
+ &[data-readonly] {
3668
+ background: var(--base-color-2);
3669
+ }
3670
+ &[data-disabled] {
3671
+ color: var(--font-color-muted);
3672
+ background: var(--base-color-2);
3673
+ }
3674
+ &:focus-within {
3675
+ border-color: transparent;
3676
+ outline: var(--outline);
3677
+ outline-offset: -1px;
3678
+ &[data-readonly] {
3679
+ border-color: var(--border-color);
3680
+ outline: none;
3681
+ }
3682
+ }
3694
3683
  }
3695
-
3696
- /* virtual-css:css:f85c857d13f820fa4badfb09996080b9 */
3697
- .TextField_allowCopy__Y2RhY {
3698
- padding-right: 32px;
3684
+ .TextField_field__YWExY input,
3685
+ .TextField_field__YWExY textarea {
3686
+ border: none;
3687
+ outline: none;
3688
+ padding: var(--padding-y) 0;
3689
+ background: transparent;
3690
+ flex: 1;
3691
+ &::placeholder {
3692
+ color: var(--font-color-muted);
3693
+ }
3694
+ &::-webkit-search-cancel-button,
3695
+ &::-webkit-search-decoration {
3696
+ -webkit-appearance: none;
3697
+ }
3699
3698
  }
3700
- .TextField_icon__MWVlN {
3701
- position: absolute;
3702
- top: calc(var(--padding-y) + 4px);
3703
- right: var(--padding-x);
3704
- background: none;
3699
+ .TextField_textarea__ODY3N {
3700
+ padding-right: 0;
3705
3701
  }
3706
3702
 
3707
3703
  /* virtual-css:css:603e8ab63f869366a7b9c81da6a1d757 */
@@ -4031,7 +4027,7 @@ body a.Button_button__NDYwM {
4031
4027
  }
4032
4028
 
4033
4029
  /* virtual-css:css:3130df15a3cfaee8cb812b182afb7ee1 */
4034
- .Menu_menu__ZGIxY {
4030
+ .Menu_menu__OTZkN {
4035
4031
  min-width: 200px;
4036
4032
  border: var(--border);
4037
4033
  border-radius: var(--border-radius);
@@ -4040,19 +4036,19 @@ body a.Button_button__NDYwM {
4040
4036
  background: var(--background-color);
4041
4037
  overflow: hidden;
4042
4038
  }
4043
- .Menu_separator__YjgwM {
4039
+ .Menu_separator__ZTgwZ {
4044
4040
  border-bottom: var(--border);
4045
4041
  margin: var(--spacing-2) calc(-1 * var(--spacing-3));
4046
4042
  }
4047
- .Menu_section__MmNkY:not(:last-child) {
4043
+ .Menu_section__ZDVhM:not(:last-child) {
4048
4044
  margin-bottom: var(--spacing-4);
4049
4045
  }
4050
- .Menu_header__YmQ0M {
4046
+ .Menu_header__YWE2Z {
4051
4047
  font-size: var(--font-size-2);
4052
4048
  font-weight: var(--font-weight-bold);
4053
4049
  padding: var(--padding);
4054
4050
  }
4055
- .Menu_item__NzJlM {
4051
+ .Menu_item__MTU4N {
4056
4052
  display: flex;
4057
4053
  align-items: center;
4058
4054
  gap: var(--gap);
@@ -4065,26 +4061,28 @@ body a.Button_button__NDYwM {
4065
4061
  outline: none;
4066
4062
  width: 100%;
4067
4063
  }
4068
- .Menu_item__NzJlM[data-disabled] {
4064
+ .Menu_item__MTU4N[data-disabled] {
4069
4065
  color: var(--font-color-disabled);
4070
4066
  }
4071
- .Menu_item__NzJlM[data-focus],
4072
- .Menu_item__NzJlM[data-focus-visible] {
4067
+ .Menu_item__MTU4N[data-focus],
4068
+ .Menu_item__MTU4N[data-focus-visible] {
4073
4069
  outline: var(--outline);
4074
4070
  background: var(--highlight-color);
4075
4071
  }
4076
- .Menu_item__NzJlM:hover {
4072
+ .Menu_item__MTU4N:hover {
4077
4073
  background: var(--highlight-color);
4078
4074
  }
4079
- .Menu_item__NzJlM[data-selected] {
4075
+ .Menu_item__MTU4N[data-selected] {
4080
4076
  font-weight: bold;
4077
+ & .Menu_checkmark__MTk4O {
4078
+ display: flex;
4079
+ justify-content: flex-end;
4080
+ }
4081
4081
  }
4082
- .Menu_item__NzJlM[data-selected] .Menu_check__ZDc1Z {
4083
- display: flex;
4084
- justify-content: flex-end;
4085
- flex: 1;
4082
+ .Menu_checkmark__MTk4O {
4083
+ display: none;
4086
4084
  }
4087
- .Menu_check__ZDc1Z {
4085
+ .Menu_hideCheckmark__MjEyZ .Menu_checkmark__MTk4O {
4088
4086
  display: none;
4089
4087
  }
4090
4088
 
@@ -4285,6 +4283,52 @@ body a.Button_button__NDYwM {
4285
4283
  }
4286
4284
  }
4287
4285
 
4286
+ /* virtual-css:css:ac55918cdbb6b3a9ac9deedf05ce3806 */
4287
+ .input_field__ZmMwY {
4288
+ position: relative;
4289
+ }
4290
+ .input_field__ZmMwY,
4291
+ .input_row__NTc1Z {
4292
+ position: relative;
4293
+ }
4294
+ .input_field__ZmMwY[data-readonly] .input_input__MzU4N,
4295
+ .input_field__ZmMwY[data-disabled] .input_input__MzU4N {
4296
+ background: var(--base-color-2);
4297
+ }
4298
+ .input_input__MzU4N {
4299
+ font-size: var(--font-size);
4300
+ color: var(--font-color);
4301
+ border: var(--border);
4302
+ border-radius: var(--border-radius);
4303
+ background: var(--background-color);
4304
+ box-shadow: var(--box-shadow);
4305
+ padding: var(--padding);
4306
+ line-height: 1.5rem;
4307
+ width: 100%;
4308
+ }
4309
+ .input_input__MzU4N:focus {
4310
+ border-color: transparent;
4311
+ outline: var(--outline);
4312
+ outline-offset: -1px;
4313
+ }
4314
+ .input_input__MzU4N::placeholder {
4315
+ color: var(--font-color-muted);
4316
+ }
4317
+ .input_input__MzU4N:disabled {
4318
+ color: var(--font-color-muted);
4319
+ }
4320
+ .input_input__MzU4N::-webkit-search-cancel-button,
4321
+ .input_input__MzU4N::-webkit-search-decoration {
4322
+ -webkit-appearance: none;
4323
+ }
4324
+ .input_icon__YzA4Z {
4325
+ color: var(--font-color-muted);
4326
+ }
4327
+ .input_icon__YzA4Z:hover {
4328
+ color: var(--font-color);
4329
+ cursor: pointer;
4330
+ }
4331
+
4288
4332
  /* virtual-css:css:3547a441584a5024882cb71ab3ccf244 */
4289
4333
  .PasswordField_icon__NTRlM {
4290
4334
  position: absolute;
@@ -4428,32 +4472,6 @@ body a.Button_button__NDYwM {
4428
4472
  background-color: var(--base-color-4);
4429
4473
  }
4430
4474
 
4431
- /* virtual-css:css:3ce2e85ef9035a94276951bdf0511402 */
4432
- .SearchField_search__MzkwY {
4433
- position: absolute;
4434
- top: 0;
4435
- left: var(--spacing-3);
4436
- bottom: 0;
4437
- height: 100%;
4438
- background: none;
4439
- }
4440
- .SearchField_input__OGFiY {
4441
- padding-left: var(--spacing-7);
4442
- padding-right: var(--spacing-7);
4443
- }
4444
- .SearchField_close__NmJkM {
4445
- display: flex;
4446
- align-items: center;
4447
- justify-content: center;
4448
- position: absolute;
4449
- top: 0;
4450
- right: var(--spacing-3);
4451
- bottom: 0;
4452
- height: 100%;
4453
- border: 0;
4454
- background: none;
4455
- }
4456
-
4457
4475
  /* virtual-css:css:844962527a8f0e375161b58db0fc39ed */
4458
4476
  .Sidebar_sidenav__ODc2Z {
4459
4477
  height: 100%;
@@ -4780,20 +4798,6 @@ body a.Button_button__NDYwM {
4780
4798
  cursor: default;
4781
4799
  }
4782
4800
 
4783
- /* virtual-css:css:884bc0b1f4a7097bca42714da27c0d2b */
4784
- .TextArea_textarea__MTk5Y {
4785
- font-family: inherit;
4786
- }
4787
- .TextArea_resize-none__OTJhY textarea {
4788
- resize: none;
4789
- }
4790
- .TextArea_resize-horizontal__YWIyZ textarea {
4791
- resize: horizontal;
4792
- }
4793
- .TextArea_resize-vertical__NTM3O textarea {
4794
- resize: vertical;
4795
- }
4796
-
4797
4801
  /* virtual-css:css:c0d584d0daeaec1be71f8a50d43bf66c */
4798
4802
  .ThemeButton_button__Zjc5N {
4799
4803
  width: 50px;
package/dist/index.d.mts CHANGED
@@ -3,7 +3,15 @@ export { BreadcrumbProps, BreadcrumbsProps, DialogTrigger, FileTrigger, Focusabl
3
3
  import * as react from 'react';
4
4
  import { HTMLAttributes, ReactNode, ReactElement, Dispatch, SetStateAction } from 'react';
5
5
  import { UseFormProps, SubmitHandler, UseFormReturn, RegisterOptions, FieldValues } from 'react-hook-form';
6
- import * as react_icons_lib from 'react-icons/lib';
6
+
7
+ interface FormProps extends UseFormProps, Omit<HTMLAttributes<HTMLFormElement>, 'children'> {
8
+ autoComplete?: string;
9
+ onSubmit?: SubmitHandler<any>;
10
+ error?: ReactNode | Error;
11
+ preventSubmit?: boolean;
12
+ children?: ReactNode | ((e: UseFormReturn) => ReactNode);
13
+ }
14
+ declare function Form({ autoComplete, onSubmit, error, preventSubmit, mode, disabled, reValidateMode, defaultValues, values, errors, resetOptions, resolver, context, shouldFocusError, shouldUnregister, shouldUseNativeValidation, progressive, criteriaMode, delayError, className, children, ...props }: FormProps): react.JSX.Element;
7
15
 
8
16
  declare const Breakpoints: readonly ["", "xs", "sm", "md", "lg", "xl"];
9
17
  type Breakpoint = (typeof Breakpoints)[number];
@@ -51,16 +59,6 @@ type AlignItems = 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self
51
59
  type AlignSelf = 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
52
60
  type ObjectFit = 'fill' | 'contain' | 'cover' | 'scale-down' | 'none';
53
61
 
54
- interface FormProps extends UseFormProps, Omit<HTMLAttributes<HTMLFormElement>, 'children'> {
55
- gap?: Responsive<Spacing>;
56
- autoComplete?: string;
57
- onSubmit?: SubmitHandler<any>;
58
- error?: ReactNode | Error;
59
- preventSubmit?: boolean;
60
- children?: ReactNode | ((e: UseFormReturn) => ReactNode);
61
- }
62
- declare 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): react.JSX.Element;
63
-
64
62
  interface BoxProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
65
63
  display?: Responsive<Display>;
66
64
  color?: FontColor;
@@ -391,31 +389,6 @@ interface IconProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
391
389
  }
392
390
  declare function Icon({ color, size, variant, rotate, strokeWidth, strokeColor, fillColor, style, className, children, ...props }: IconProps & HTMLAttributes<HTMLElement>): react.JSX.Element;
393
391
 
394
- declare const Icons: {
395
- Moon: react_icons_lib.IconType;
396
- Sun: react_icons_lib.IconType;
397
- Alert: react_icons_lib.IconType;
398
- Arrow: react_icons_lib.IconType;
399
- Check: react_icons_lib.IconType;
400
- Chevron: react_icons_lib.IconType;
401
- Close: react_icons_lib.IconType;
402
- Copy: react_icons_lib.IconType;
403
- Edit: react_icons_lib.IconType;
404
- ExternalLink: react_icons_lib.IconType;
405
- Eye: react_icons_lib.IconType;
406
- EyeSlash: react_icons_lib.IconType;
407
- Info: react_icons_lib.IconType;
408
- Logout: react_icons_lib.IconType;
409
- MagnifyingGlass: react_icons_lib.IconType;
410
- Menu: react_icons_lib.IconType;
411
- Minus: react_icons_lib.IconType;
412
- More: react_icons_lib.IconType;
413
- PanelLeft: react_icons_lib.IconType;
414
- Plus: react_icons_lib.IconType;
415
- Refresh: react_icons_lib.IconType;
416
- Trash: react_icons_lib.IconType;
417
- };
418
-
419
392
  interface ImageProps extends HTMLAttributes<HTMLImageElement> {
420
393
  src: string;
421
394
  alt?: string;
@@ -545,10 +518,11 @@ interface SearchFieldProps extends SearchFieldProps$1 {
545
518
  label?: string;
546
519
  placeholder?: string;
547
520
  value?: string;
521
+ defaultValue?: string;
548
522
  delay?: number;
549
523
  onSearch?: (value: string) => void;
550
524
  }
551
- declare function SearchField({ label, placeholder, value, delay, onSearch, className, ...props }: SearchFieldProps): react.JSX.Element;
525
+ declare function SearchField({ label, placeholder, value, defaultValue, delay, onSearch, className, ...props }: SearchFieldProps): react.JSX.Element;
552
526
 
553
527
  interface SelectProps extends SelectProps$1<HTMLSelectElement> {
554
528
  items?: any[];
@@ -666,18 +640,10 @@ interface TextFieldProps extends TextFieldProps$1 {
666
640
  label?: string;
667
641
  placeholder?: string;
668
642
  allowCopy?: boolean;
669
- asChild?: boolean;
643
+ asTextArea?: boolean;
670
644
  onChange?: (e: any) => void;
671
645
  }
672
- declare function TextField({ value, defaultValue, label, placeholder, allowCopy, asChild, className, onChange, children, ...props }: TextFieldProps): react.JSX.Element;
673
-
674
- interface TextAreaProps extends TextFieldProps {
675
- rows?: number;
676
- cols?: number;
677
- resize?: 'none' | 'vertical' | 'horizontal';
678
- children?: React.ReactNode;
679
- }
680
- declare function TextArea({ rows, cols, resize, className, style, children, ...props }: TextAreaProps): react.JSX.Element;
646
+ declare function TextField({ value, defaultValue, label, placeholder, allowCopy, asTextArea, onChange, isReadOnly, isDisabled, className, children, ...props }: TextFieldProps): react.JSX.Element;
681
647
 
682
648
  interface ThemeButtonProps extends ButtonProps {
683
649
  defaultTheme?: string;
@@ -709,4 +675,4 @@ interface ZenProviderProps {
709
675
  }
710
676
  declare function ZenProvider({ children, ...props }: ZenProviderProps): react.JSX.Element;
711
677
 
712
- export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormField, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, type IconProps, Icons, 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, 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, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, ThemeButton, type ThemeButtonProps, Toast, type ToastProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, useDebounce, useNavigationContext, useTheme, useToast };
678
+ export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormField, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, 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, 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, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, ThemeButton, type ThemeButtonProps, Toast, type ToastProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, useDebounce, useNavigationContext, useTheme, useToast };
package/dist/index.d.ts CHANGED
@@ -3,7 +3,15 @@ export { BreadcrumbProps, BreadcrumbsProps, DialogTrigger, FileTrigger, Focusabl
3
3
  import * as react from 'react';
4
4
  import { HTMLAttributes, ReactNode, ReactElement, Dispatch, SetStateAction } from 'react';
5
5
  import { UseFormProps, SubmitHandler, UseFormReturn, RegisterOptions, FieldValues } from 'react-hook-form';
6
- import * as react_icons_lib from 'react-icons/lib';
6
+
7
+ interface FormProps extends UseFormProps, Omit<HTMLAttributes<HTMLFormElement>, 'children'> {
8
+ autoComplete?: string;
9
+ onSubmit?: SubmitHandler<any>;
10
+ error?: ReactNode | Error;
11
+ preventSubmit?: boolean;
12
+ children?: ReactNode | ((e: UseFormReturn) => ReactNode);
13
+ }
14
+ declare function Form({ autoComplete, onSubmit, error, preventSubmit, mode, disabled, reValidateMode, defaultValues, values, errors, resetOptions, resolver, context, shouldFocusError, shouldUnregister, shouldUseNativeValidation, progressive, criteriaMode, delayError, className, children, ...props }: FormProps): react.JSX.Element;
7
15
 
8
16
  declare const Breakpoints: readonly ["", "xs", "sm", "md", "lg", "xl"];
9
17
  type Breakpoint = (typeof Breakpoints)[number];
@@ -51,16 +59,6 @@ type AlignItems = 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self
51
59
  type AlignSelf = 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
52
60
  type ObjectFit = 'fill' | 'contain' | 'cover' | 'scale-down' | 'none';
53
61
 
54
- interface FormProps extends UseFormProps, Omit<HTMLAttributes<HTMLFormElement>, 'children'> {
55
- gap?: Responsive<Spacing>;
56
- autoComplete?: string;
57
- onSubmit?: SubmitHandler<any>;
58
- error?: ReactNode | Error;
59
- preventSubmit?: boolean;
60
- children?: ReactNode | ((e: UseFormReturn) => ReactNode);
61
- }
62
- declare 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): react.JSX.Element;
63
-
64
62
  interface BoxProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
65
63
  display?: Responsive<Display>;
66
64
  color?: FontColor;
@@ -391,31 +389,6 @@ interface IconProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
391
389
  }
392
390
  declare function Icon({ color, size, variant, rotate, strokeWidth, strokeColor, fillColor, style, className, children, ...props }: IconProps & HTMLAttributes<HTMLElement>): react.JSX.Element;
393
391
 
394
- declare const Icons: {
395
- Moon: react_icons_lib.IconType;
396
- Sun: react_icons_lib.IconType;
397
- Alert: react_icons_lib.IconType;
398
- Arrow: react_icons_lib.IconType;
399
- Check: react_icons_lib.IconType;
400
- Chevron: react_icons_lib.IconType;
401
- Close: react_icons_lib.IconType;
402
- Copy: react_icons_lib.IconType;
403
- Edit: react_icons_lib.IconType;
404
- ExternalLink: react_icons_lib.IconType;
405
- Eye: react_icons_lib.IconType;
406
- EyeSlash: react_icons_lib.IconType;
407
- Info: react_icons_lib.IconType;
408
- Logout: react_icons_lib.IconType;
409
- MagnifyingGlass: react_icons_lib.IconType;
410
- Menu: react_icons_lib.IconType;
411
- Minus: react_icons_lib.IconType;
412
- More: react_icons_lib.IconType;
413
- PanelLeft: react_icons_lib.IconType;
414
- Plus: react_icons_lib.IconType;
415
- Refresh: react_icons_lib.IconType;
416
- Trash: react_icons_lib.IconType;
417
- };
418
-
419
392
  interface ImageProps extends HTMLAttributes<HTMLImageElement> {
420
393
  src: string;
421
394
  alt?: string;
@@ -545,10 +518,11 @@ interface SearchFieldProps extends SearchFieldProps$1 {
545
518
  label?: string;
546
519
  placeholder?: string;
547
520
  value?: string;
521
+ defaultValue?: string;
548
522
  delay?: number;
549
523
  onSearch?: (value: string) => void;
550
524
  }
551
- declare function SearchField({ label, placeholder, value, delay, onSearch, className, ...props }: SearchFieldProps): react.JSX.Element;
525
+ declare function SearchField({ label, placeholder, value, defaultValue, delay, onSearch, className, ...props }: SearchFieldProps): react.JSX.Element;
552
526
 
553
527
  interface SelectProps extends SelectProps$1<HTMLSelectElement> {
554
528
  items?: any[];
@@ -666,18 +640,10 @@ interface TextFieldProps extends TextFieldProps$1 {
666
640
  label?: string;
667
641
  placeholder?: string;
668
642
  allowCopy?: boolean;
669
- asChild?: boolean;
643
+ asTextArea?: boolean;
670
644
  onChange?: (e: any) => void;
671
645
  }
672
- declare function TextField({ value, defaultValue, label, placeholder, allowCopy, asChild, className, onChange, children, ...props }: TextFieldProps): react.JSX.Element;
673
-
674
- interface TextAreaProps extends TextFieldProps {
675
- rows?: number;
676
- cols?: number;
677
- resize?: 'none' | 'vertical' | 'horizontal';
678
- children?: React.ReactNode;
679
- }
680
- declare function TextArea({ rows, cols, resize, className, style, children, ...props }: TextAreaProps): react.JSX.Element;
646
+ declare function TextField({ value, defaultValue, label, placeholder, allowCopy, asTextArea, onChange, isReadOnly, isDisabled, className, children, ...props }: TextFieldProps): react.JSX.Element;
681
647
 
682
648
  interface ThemeButtonProps extends ButtonProps {
683
649
  defaultTheme?: string;
@@ -709,4 +675,4 @@ interface ZenProviderProps {
709
675
  }
710
676
  declare function ZenProvider({ children, ...props }: ZenProviderProps): react.JSX.Element;
711
677
 
712
- export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormField, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, type IconProps, Icons, 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, 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, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextArea, type TextAreaProps, TextField, type TextFieldProps, type TextProps, ThemeButton, type ThemeButtonProps, Toast, type ToastProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, useDebounce, useNavigationContext, useTheme, useToast };
678
+ export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormField, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, 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, 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, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, ThemeButton, type ThemeButtonProps, Toast, type ToastProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, useDebounce, useNavigationContext, useTheme, useToast };