react-ui-suite 1.1.2 → 1.1.3
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/FilePicker-N72M7PZO.css +155 -0
- package/dist/index.d.ts +19 -1
- package/dist/index.js +465 -280
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
.rui-file-picker {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 0.375rem;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.rui-file-picker__label {
|
|
8
|
+
margin: 0;
|
|
9
|
+
font-size: 0.75rem;
|
|
10
|
+
line-height: 1rem;
|
|
11
|
+
font-weight: 600;
|
|
12
|
+
text-transform: uppercase;
|
|
13
|
+
letter-spacing: 0.2em;
|
|
14
|
+
color: var(--rui-color-text-muted);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.rui-file-picker__dropzone {
|
|
18
|
+
position: relative;
|
|
19
|
+
border-radius: 1rem;
|
|
20
|
+
border: 1px dashed var(--rui-color-border);
|
|
21
|
+
background-color: var(--rui-color-surface);
|
|
22
|
+
padding: 1rem;
|
|
23
|
+
transition:
|
|
24
|
+
border-color 150ms ease,
|
|
25
|
+
background-color 150ms ease,
|
|
26
|
+
box-shadow 150ms ease;
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.rui-file-picker__dropzone:hover {
|
|
31
|
+
border-color: var(--rui-color-border-strong);
|
|
32
|
+
background-color: var(--rui-color-surface-hover);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.rui-file-picker__dropzone:focus-visible {
|
|
36
|
+
outline: none;
|
|
37
|
+
border-color: var(--rui-color-border-strong);
|
|
38
|
+
box-shadow: 0 0 0 2px rgb(148 163 184 / 0.35);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.rui-file-picker__dropzone--active {
|
|
42
|
+
border-color: rgb(14 165 233 / 0.85);
|
|
43
|
+
background-color: rgb(224 242 254 / 0.7);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.rui-file-picker__dropzone--error {
|
|
47
|
+
border-color: rgb(244 63 94 / 0.6);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.rui-file-picker__dropzone--error.rui-file-picker__dropzone--active {
|
|
51
|
+
border-color: rgb(244 63 94);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.rui-file-picker__dropzone--disabled {
|
|
55
|
+
cursor: not-allowed;
|
|
56
|
+
opacity: 0.7;
|
|
57
|
+
background-color: var(--rui-color-surface-muted);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.rui-file-picker__input {
|
|
61
|
+
position: absolute;
|
|
62
|
+
width: 1px;
|
|
63
|
+
height: 1px;
|
|
64
|
+
margin: -1px;
|
|
65
|
+
padding: 0;
|
|
66
|
+
overflow: hidden;
|
|
67
|
+
clip: rect(0, 0, 0, 0);
|
|
68
|
+
border: 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.rui-file-picker__prompt,
|
|
72
|
+
.rui-file-picker__hint {
|
|
73
|
+
margin: 0;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.rui-file-picker__prompt {
|
|
77
|
+
font-size: 0.875rem;
|
|
78
|
+
line-height: 1.25rem;
|
|
79
|
+
font-weight: 600;
|
|
80
|
+
color: var(--rui-color-text-strong);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.rui-file-picker__hint {
|
|
84
|
+
margin-top: 0.25rem;
|
|
85
|
+
font-size: 0.75rem;
|
|
86
|
+
line-height: 1rem;
|
|
87
|
+
color: var(--rui-color-text-muted);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.rui-file-picker__list {
|
|
91
|
+
margin: 0.75rem 0 0;
|
|
92
|
+
padding: 0;
|
|
93
|
+
list-style: none;
|
|
94
|
+
display: flex;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
gap: 0.375rem;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.rui-file-picker__item {
|
|
100
|
+
display: flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
justify-content: space-between;
|
|
103
|
+
gap: 0.5rem;
|
|
104
|
+
border-radius: 0.625rem;
|
|
105
|
+
background: rgb(241 245 249 / 0.8);
|
|
106
|
+
padding: 0.375rem 0.5rem;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.rui-file-picker__file-name {
|
|
110
|
+
font-size: 0.75rem;
|
|
111
|
+
line-height: 1rem;
|
|
112
|
+
color: var(--rui-color-text-strong);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.rui-file-picker__file-meta {
|
|
116
|
+
flex-shrink: 0;
|
|
117
|
+
font-size: 0.6875rem;
|
|
118
|
+
line-height: 1rem;
|
|
119
|
+
font-weight: 600;
|
|
120
|
+
color: var(--rui-color-text-muted);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.rui-file-picker__description,
|
|
124
|
+
.rui-file-picker__warning,
|
|
125
|
+
.rui-file-picker__error {
|
|
126
|
+
margin: 0;
|
|
127
|
+
font-size: 0.75rem;
|
|
128
|
+
line-height: 1rem;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.rui-file-picker__description {
|
|
132
|
+
color: var(--rui-color-text-muted);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.rui-file-picker__warning {
|
|
136
|
+
color: rgb(180 83 9);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.rui-file-picker__error {
|
|
140
|
+
font-weight: 500;
|
|
141
|
+
color: rgb(244 63 94);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
[data-theme="dark"] .rui-file-picker__dropzone--active {
|
|
145
|
+
background-color: rgb(12 74 110 / 0.35);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
[data-theme="dark"] .rui-file-picker__item {
|
|
149
|
+
background: rgb(39 39 42 / 0.8);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
[data-theme="dark"] .rui-file-picker__warning {
|
|
153
|
+
color: rgb(251 191 36);
|
|
154
|
+
}
|
|
155
|
+
|
package/dist/index.d.ts
CHANGED
|
@@ -196,6 +196,24 @@ type DropdownProps = {
|
|
|
196
196
|
};
|
|
197
197
|
declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
|
|
198
198
|
|
|
199
|
+
type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type">;
|
|
200
|
+
type FilePickerProps = NativeInputProps & {
|
|
201
|
+
label?: string;
|
|
202
|
+
description?: string;
|
|
203
|
+
error?: string;
|
|
204
|
+
dropzoneLabel?: string;
|
|
205
|
+
maxFiles?: number;
|
|
206
|
+
onFilesChange?: (files: File[]) => void;
|
|
207
|
+
};
|
|
208
|
+
declare const FilePicker: React.ForwardRefExoticComponent<NativeInputProps & {
|
|
209
|
+
label?: string;
|
|
210
|
+
description?: string;
|
|
211
|
+
error?: string;
|
|
212
|
+
dropzoneLabel?: string;
|
|
213
|
+
maxFiles?: number;
|
|
214
|
+
onFilesChange?: (files: File[]) => void;
|
|
215
|
+
} & React.RefAttributes<HTMLInputElement>>;
|
|
216
|
+
|
|
199
217
|
type InputFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
|
200
218
|
label?: string;
|
|
201
219
|
description?: string;
|
|
@@ -512,4 +530,4 @@ declare const Toggle: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttri
|
|
|
512
530
|
onChange?: (checked: boolean) => void;
|
|
513
531
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
514
532
|
|
|
515
|
-
export { Alert, type AlertProps, type AlertVariant, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, Combobox, type ComboboxOption, type ComboboxProps, type ComboboxRenderState, DatalistInput, type DatalistInputProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, Disclosure, type DisclosureProps, Dropdown, type DropdownProps, InputField, type InputFieldProps, Meter, type MeterProps, NumberInput, type NumberInputProps, OutputChip, type OutputChipProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioColor, type RadioProps, ResizableContainer, type ResizableContainerProps, Select, type SelectOption, type SelectProps, Slider, type SliderProps, StackedList, type StackedListItem, type StackedListProps, TabGroup, TabGroupAlign, TabGroupFill, TabGroupPosition, type TabGroupProps, TabGroupRotation, type TabGroupTab, Table, type TableColumn, type TableProps, Textarea, type TextareaProps, Toggle, type ToggleProps };
|
|
533
|
+
export { Alert, type AlertProps, type AlertVariant, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, Combobox, type ComboboxOption, type ComboboxProps, type ComboboxRenderState, DatalistInput, type DatalistInputProps, DatePicker, type DatePickerProps, Dialog, type DialogProps, Disclosure, type DisclosureProps, Dropdown, type DropdownProps, FilePicker, type FilePickerProps, InputField, type InputFieldProps, Meter, type MeterProps, NumberInput, type NumberInputProps, OutputChip, type OutputChipProps, Popover, type PopoverProps, Progress, type ProgressProps, Radio, type RadioColor, type RadioProps, ResizableContainer, type ResizableContainerProps, Select, type SelectOption, type SelectProps, Slider, type SliderProps, StackedList, type StackedListItem, type StackedListProps, TabGroup, TabGroupAlign, TabGroupFill, TabGroupPosition, type TabGroupProps, TabGroupRotation, type TabGroupTab, Table, type TableColumn, type TableProps, Textarea, type TextareaProps, Toggle, type ToggleProps };
|