react-ui-suite 1.1.1 → 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/README.md +5 -4
- 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
package/README.md
CHANGED
|
@@ -24,7 +24,7 @@ This repository is a small monorepo that contains:
|
|
|
24
24
|
|
|
25
25
|
## Installation (for consumers)
|
|
26
26
|
|
|
27
|
-
Install from npm into any React
|
|
27
|
+
Install from npm into any React 19 project:
|
|
28
28
|
|
|
29
29
|
```bash
|
|
30
30
|
npm install react-ui-suite
|
|
@@ -36,8 +36,8 @@ yarn add react-ui-suite
|
|
|
36
36
|
|
|
37
37
|
Peer dependencies (required in the consuming app):
|
|
38
38
|
|
|
39
|
-
- `react` ^
|
|
40
|
-
- `react-dom` ^
|
|
39
|
+
- `react` ^19.2.4
|
|
40
|
+
- `react-dom` ^19.2.4
|
|
41
41
|
|
|
42
42
|
The library marks `react` and `react-dom` as externals; they must come from the host application.
|
|
43
43
|
|
|
@@ -57,7 +57,7 @@ Because the package is ESM-only, make sure your toolchain supports `import` / `e
|
|
|
57
57
|
|
|
58
58
|
## Development (this repo)
|
|
59
59
|
|
|
60
|
-
Clone and install from the root:
|
|
60
|
+
Clone and install from the root (Node 18+ required):
|
|
61
61
|
|
|
62
62
|
```bash
|
|
63
63
|
git clone https://github.com/nruimveld7/react-ui-suite.git
|
|
@@ -76,6 +76,7 @@ npm run lint # lints the library source via ESLint
|
|
|
76
76
|
npm run format # formats the entire repo with Prettier
|
|
77
77
|
npm run format:check # checks formatting without writing changes
|
|
78
78
|
npm run dev # starts the Vite demo gallery (demo/) at http://localhost:5173
|
|
79
|
+
npm run test:visual # runs Playwright visual tests for the demo gallery
|
|
79
80
|
npm run publish # publishes the react-ui-suite workspace to npm (see “Publishing” below)
|
|
80
81
|
```
|
|
81
82
|
|
|
@@ -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 };
|