@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 +108 -104
- package/dist/index.d.mts +14 -48
- package/dist/index.d.ts +14 -48
- package/dist/index.js +704 -734
- package/dist/index.mjs +713 -743
- package/package.json +1 -1
- package/styles.css +108 -104
package/dist/index.css
CHANGED
|
@@ -3015,15 +3015,17 @@
|
|
|
3015
3015
|
}
|
|
3016
3016
|
|
|
3017
3017
|
/* virtual-css:css:c1c264103e87c7a7d9c345a7e75f073b */
|
|
3018
|
-
.
|
|
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
|
-
.
|
|
3024
|
+
.Form_text__MjgxN {
|
|
3023
3025
|
text-align: center;
|
|
3024
3026
|
margin: auto;
|
|
3025
3027
|
}
|
|
3026
|
-
.
|
|
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:
|
|
3651
|
-
.
|
|
3652
|
-
|
|
3653
|
-
|
|
3654
|
-
|
|
3655
|
-
|
|
3656
|
-
|
|
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
|
-
|
|
3672
|
-
|
|
3673
|
-
|
|
3674
|
-
|
|
3675
|
-
|
|
3676
|
-
|
|
3677
|
-
|
|
3678
|
-
|
|
3679
|
-
|
|
3680
|
-
|
|
3681
|
-
|
|
3682
|
-
|
|
3683
|
-
|
|
3684
|
-
|
|
3685
|
-
|
|
3686
|
-
|
|
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
|
-
|
|
3697
|
-
|
|
3698
|
-
|
|
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
|
-
.
|
|
3701
|
-
|
|
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
|
-
.
|
|
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
|
-
.
|
|
4039
|
+
.Menu_separator__ZTgwZ {
|
|
4044
4040
|
border-bottom: var(--border);
|
|
4045
4041
|
margin: var(--spacing-2) calc(-1 * var(--spacing-3));
|
|
4046
4042
|
}
|
|
4047
|
-
.
|
|
4043
|
+
.Menu_section__ZDVhM:not(:last-child) {
|
|
4048
4044
|
margin-bottom: var(--spacing-4);
|
|
4049
4045
|
}
|
|
4050
|
-
.
|
|
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
|
-
.
|
|
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
|
-
.
|
|
4064
|
+
.Menu_item__MTU4N[data-disabled] {
|
|
4069
4065
|
color: var(--font-color-disabled);
|
|
4070
4066
|
}
|
|
4071
|
-
.
|
|
4072
|
-
.
|
|
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
|
-
.
|
|
4072
|
+
.Menu_item__MTU4N:hover {
|
|
4077
4073
|
background: var(--highlight-color);
|
|
4078
4074
|
}
|
|
4079
|
-
.
|
|
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
|
-
.
|
|
4083
|
-
display:
|
|
4084
|
-
justify-content: flex-end;
|
|
4085
|
-
flex: 1;
|
|
4082
|
+
.Menu_checkmark__MTk4O {
|
|
4083
|
+
display: none;
|
|
4086
4084
|
}
|
|
4087
|
-
.
|
|
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
|
-
|
|
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
|
-
|
|
643
|
+
asTextArea?: boolean;
|
|
670
644
|
onChange?: (e: any) => void;
|
|
671
645
|
}
|
|
672
|
-
declare function TextField({ value, defaultValue, label, placeholder, allowCopy,
|
|
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,
|
|
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
|
-
|
|
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
|
-
|
|
643
|
+
asTextArea?: boolean;
|
|
670
644
|
onChange?: (e: any) => void;
|
|
671
645
|
}
|
|
672
|
-
declare function TextField({ value, defaultValue, label, placeholder, allowCopy,
|
|
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,
|
|
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 };
|