solid-uix 0.4.0 → 0.5.1
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 +16 -2
- package/dist/main.css +269 -1
- package/dist/main.d.ts +77 -9
- package/dist/main.js +362 -565
- package/dist/main.jsx +386 -0
- package/package.json +11 -9
- package/dist/button/button.d.ts +0 -2
- package/dist/button/button.types.d.ts +0 -4
- package/dist/checkbox/checkbox.d.ts +0 -2
- package/dist/checkbox/checkbox.stories.d.ts +0 -29
- package/dist/checkbox/checkbox.types.d.ts +0 -5
- package/dist/dialog/dialog.d.ts +0 -11
- package/dist/dialog/dialog.types.d.ts +0 -17
- package/dist/dialog/provider/context.d.ts +0 -3
- package/dist/dialog/provider/context.types.d.ts +0 -14
- package/dist/dialog/provider/provider.d.ts +0 -2
- package/dist/dialog/provider/provider.types.d.ts +0 -7
- package/dist/field/field.context.d.ts +0 -3
- package/dist/field/field.d.ts +0 -6
- package/dist/field/field.types.d.ts +0 -19
- package/dist/list/list.d.ts +0 -5
- package/dist/list/list.types.d.ts +0 -3
- package/dist/main.umd.cjs +0 -1
- package/dist/select/select.d.ts +0 -5
- package/dist/select/select.types.d.ts +0 -5
- package/dist/text_input/text_input.d.ts +0 -2
- package/dist/text_input/text_input.types.d.ts +0 -4
- package/dist/utils/cls.d.ts +0 -3
- package/dist/utils/message.d.ts +0 -7
- package/dist/utils/noop.d.ts +0 -4
- package/dist/utils/string.d.ts +0 -1
package/README.md
CHANGED
|
@@ -18,9 +18,9 @@ Solid UIX uses the Inter font by default. See [Setup — Fonts](/docs/setup_font
|
|
|
18
18
|
|
|
19
19
|
Import components and styles.
|
|
20
20
|
|
|
21
|
-
```
|
|
21
|
+
```jsx
|
|
22
22
|
import { Button, TextInput, Checkbox, Field } from "solid-uix";
|
|
23
|
-
import "solid-uix/
|
|
23
|
+
import "solid-uix/css";
|
|
24
24
|
|
|
25
25
|
const Example = () => {
|
|
26
26
|
return (
|
|
@@ -36,3 +36,17 @@ const Example = () => {
|
|
|
36
36
|
);
|
|
37
37
|
};
|
|
38
38
|
```
|
|
39
|
+
|
|
40
|
+
### Server Side Rendering
|
|
41
|
+
|
|
42
|
+
Resolve styles as URL and append metadata element to document head.
|
|
43
|
+
Stylesheet will be preloaded.
|
|
44
|
+
See @solidjs/meta [Link](https://docs.solidjs.com/solid-meta/reference/meta/link)
|
|
45
|
+
|
|
46
|
+
```jsx
|
|
47
|
+
import styles from "solid-uix/css?url";
|
|
48
|
+
|
|
49
|
+
<head>
|
|
50
|
+
<link rel="stylesheet" href={style} />
|
|
51
|
+
</head>;
|
|
52
|
+
```
|
package/dist/main.css
CHANGED
|
@@ -1 +1,269 @@
|
|
|
1
|
-
|
|
1
|
+
/* src/main.css */
|
|
2
|
+
:root {
|
|
3
|
+
--colors-black-100: #efeff4;
|
|
4
|
+
--colors-black-150: #d9d9df;
|
|
5
|
+
--colors-black-200: #c1c2cb;
|
|
6
|
+
--colors-black-300: #acadb6;
|
|
7
|
+
--colors-black-400: #9495a0;
|
|
8
|
+
--colors-black-500: #777987;
|
|
9
|
+
--colors-black-600: #61636d;
|
|
10
|
+
--colors-black-700: #494a56;
|
|
11
|
+
--colors-black-800: #22232a;
|
|
12
|
+
--colors-black-850: #17181e;
|
|
13
|
+
--colors-black-900: #0a0b11;
|
|
14
|
+
--colors-white-50-transparent: #ffffff0d;
|
|
15
|
+
--colors-background: #191d3a;
|
|
16
|
+
--colors-backdrop: #00000080;
|
|
17
|
+
--colors-accent-400: #f7689d;
|
|
18
|
+
--colors-accent-500: #ec5990;
|
|
19
|
+
--colors-accent-600: #d8497d;
|
|
20
|
+
--colors-error-400: #ff6645;
|
|
21
|
+
--colors-error-500: #ec441f;
|
|
22
|
+
color-scheme: light dark;
|
|
23
|
+
color: var(--colors-black-100);
|
|
24
|
+
background: var(--colors-background);
|
|
25
|
+
font-synthesis: none;
|
|
26
|
+
text-rendering: optimizeLegibility;
|
|
27
|
+
-webkit-font-smoothing: antialiased;
|
|
28
|
+
-moz-osx-font-smoothing: grayscale;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* src/button/button.module.css */
|
|
32
|
+
.button_button {
|
|
33
|
+
height: 48px;
|
|
34
|
+
box-sizing: border-box;
|
|
35
|
+
border: none;
|
|
36
|
+
width: 100%;
|
|
37
|
+
min-width: 164px;
|
|
38
|
+
border-radius: 6px;
|
|
39
|
+
padding: 0 10px;
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
font-family: Inter;
|
|
42
|
+
font-weight: 500;
|
|
43
|
+
font-size: 16px;
|
|
44
|
+
line-height: 22px;
|
|
45
|
+
letter-spacing: 0;
|
|
46
|
+
text-align: center;
|
|
47
|
+
}
|
|
48
|
+
.button_button:disabled {
|
|
49
|
+
cursor: not-allowed;
|
|
50
|
+
}
|
|
51
|
+
.button_button:focus-visible {
|
|
52
|
+
outline: solid 2px var(--colors-accent-500);
|
|
53
|
+
outline-offset: 2px;
|
|
54
|
+
}
|
|
55
|
+
.button_solid {
|
|
56
|
+
background: var(--colors-accent-500);
|
|
57
|
+
color: var(--colors-black-900);
|
|
58
|
+
}
|
|
59
|
+
.button_solid:hover {
|
|
60
|
+
background: var(--colors-accent-400);
|
|
61
|
+
}
|
|
62
|
+
.button_solid:disabled {
|
|
63
|
+
background: var(--colors-black-700);
|
|
64
|
+
color: var(--colors-black-400);
|
|
65
|
+
}
|
|
66
|
+
.button_outlined {
|
|
67
|
+
background: none;
|
|
68
|
+
border: 1.5px var(--colors-black-100) solid;
|
|
69
|
+
color: var(--colors-black-100);
|
|
70
|
+
}
|
|
71
|
+
.button_outlined:hover {
|
|
72
|
+
border-color: var(--colors-black-300);
|
|
73
|
+
color: var(--colors-black-300);
|
|
74
|
+
}
|
|
75
|
+
.button_outlined:disabled {
|
|
76
|
+
border-color: var(--colors-black-500);
|
|
77
|
+
color: var(--colors-black-500);
|
|
78
|
+
}
|
|
79
|
+
.button_link {
|
|
80
|
+
display: inline-flex;
|
|
81
|
+
align-items: center;
|
|
82
|
+
justify-content: center;
|
|
83
|
+
text-decoration: none;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* src/link/link.module.css */
|
|
87
|
+
.link_link {
|
|
88
|
+
color: var(--colors-accent-500);
|
|
89
|
+
text-decoration: none;
|
|
90
|
+
cursor: pointer;
|
|
91
|
+
font-family: Inter;
|
|
92
|
+
text-align: center;
|
|
93
|
+
}
|
|
94
|
+
.link_link:hover {
|
|
95
|
+
text-decoration-line: underline;
|
|
96
|
+
}
|
|
97
|
+
.link_underline {
|
|
98
|
+
text-decoration-line: underline;
|
|
99
|
+
}
|
|
100
|
+
.link_secondary {
|
|
101
|
+
color: var(--colors-black-100);
|
|
102
|
+
}
|
|
103
|
+
.link_disabled {
|
|
104
|
+
color: var(--colors-black-400);
|
|
105
|
+
cursor: not-allowed;
|
|
106
|
+
}
|
|
107
|
+
.link_disabled:hover {
|
|
108
|
+
text-decoration-line: none;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* src/checkbox/checkbox.module.css */
|
|
112
|
+
.checkbox_checkbox {
|
|
113
|
+
position: relative;
|
|
114
|
+
display: inline-flex;
|
|
115
|
+
align-items: center;
|
|
116
|
+
gap: 6px;
|
|
117
|
+
}
|
|
118
|
+
.checkbox_input {
|
|
119
|
+
position: absolute;
|
|
120
|
+
margin: 0;
|
|
121
|
+
opacity: 0;
|
|
122
|
+
height: 100%;
|
|
123
|
+
width: 100%;
|
|
124
|
+
cursor: pointer;
|
|
125
|
+
outline: none;
|
|
126
|
+
}
|
|
127
|
+
.checkbox_indicator {
|
|
128
|
+
display: block;
|
|
129
|
+
width: 20px;
|
|
130
|
+
height: 20px;
|
|
131
|
+
border: 1.5px solid var(--colors-black-400);
|
|
132
|
+
border-radius: 50%;
|
|
133
|
+
}
|
|
134
|
+
.checkbox_input:checked + .checkbox_indicator {
|
|
135
|
+
content: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">%0A<path d="M15.7958 7.18239L8.41335 14.5648C8.34906 14.6293 8.27265 14.6805 8.18853 14.7155C8.1044 14.7504 8.01421 14.7684 7.92311 14.7684C7.83202 14.7684 7.74183 14.7504 7.6577 14.7155C7.57358 14.6805 7.49717 14.6293 7.43288 14.5648L4.20306 11.335C4.13868 11.2706 4.08762 11.1942 4.05277 11.1101C4.01793 11.026 4 10.9358 4 10.8448C4 10.7537 4.01793 10.6636 4.05277 10.5794C4.08762 10.4953 4.13868 10.4189 4.20306 10.3545C4.26744 10.2901 4.34387 10.2391 4.42799 10.2042C4.5121 10.1694 4.60226 10.1515 4.6933 10.1515C4.78435 10.1515 4.8745 10.1694 4.95862 10.2042C5.04273 10.2391 5.11916 10.2901 5.18354 10.3545L7.92369 13.0947L14.8165 6.20306C14.9465 6.07304 15.1228 6 15.3067 6C15.4906 6 15.6669 6.07304 15.7969 6.20306C15.927 6.33308 16 6.50943 16 6.6933C16 6.87718 15.927 7.05352 15.7969 7.18354L15.7958 7.18239Z" />%0A</svg>%0A');
|
|
136
|
+
background: var(--colors-accent-500);
|
|
137
|
+
border-color: var(--colors-accent-500);
|
|
138
|
+
}
|
|
139
|
+
.checkbox_input:focus-visible + .checkbox_indicator {
|
|
140
|
+
outline: solid 2px var(--colors-accent-500);
|
|
141
|
+
outline-offset: 2px;
|
|
142
|
+
}
|
|
143
|
+
.checkbox_label {
|
|
144
|
+
font-family: Inter;
|
|
145
|
+
font-weight: 400;
|
|
146
|
+
font-size: 14px;
|
|
147
|
+
line-height: 18px;
|
|
148
|
+
letter-spacing: 0;
|
|
149
|
+
color: var(--colors-black-100);
|
|
150
|
+
}
|
|
151
|
+
.checkbox_checkbox.checkbox_disabled {
|
|
152
|
+
opacity: 0.5;
|
|
153
|
+
}
|
|
154
|
+
.checkbox_input:disabled {
|
|
155
|
+
cursor: not-allowed;
|
|
156
|
+
}
|
|
157
|
+
.checkbox_input[aria-invalid=true] + .checkbox_indicator {
|
|
158
|
+
border-color: var(--colors-error-500);
|
|
159
|
+
}
|
|
160
|
+
.checkbox_input[aria-invalid=true]:checked + .checkbox_indicator {
|
|
161
|
+
background: var(--colors-error-500);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/* src/text_input/text_input.module.css */
|
|
165
|
+
.text_input_input {
|
|
166
|
+
appearance: none;
|
|
167
|
+
height: 48px;
|
|
168
|
+
width: 100%;
|
|
169
|
+
padding: 12px;
|
|
170
|
+
box-sizing: border-box;
|
|
171
|
+
border: 1px solid var(--colors-black-500);
|
|
172
|
+
border-radius: 6px;
|
|
173
|
+
outline: none;
|
|
174
|
+
background-color: var(--colors-black-900);
|
|
175
|
+
font-family: Inter;
|
|
176
|
+
font-weight: 400;
|
|
177
|
+
font-size: 16px;
|
|
178
|
+
line-height: 22px;
|
|
179
|
+
letter-spacing: 0;
|
|
180
|
+
color: var(--colors-black-100);
|
|
181
|
+
}
|
|
182
|
+
.text_input_input:focus {
|
|
183
|
+
border-color: var(--colors-black-200);
|
|
184
|
+
}
|
|
185
|
+
.text_input_input:disabled {
|
|
186
|
+
border-color: var(--colors-black-700);
|
|
187
|
+
color: var(--colors-black-600);
|
|
188
|
+
cursor: not-allowed;
|
|
189
|
+
}
|
|
190
|
+
.text_input_input[aria-invalid=true] {
|
|
191
|
+
border-color: var(--colors-error-500);
|
|
192
|
+
}
|
|
193
|
+
.text_input_input[aria-invalid=true]:focus {
|
|
194
|
+
border-color: var(--colors-error-400);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* src/dialog/dialog.module.css */
|
|
198
|
+
.dialog_dialog[open] {
|
|
199
|
+
background: var(--colors-black-800);
|
|
200
|
+
border-radius: 20px;
|
|
201
|
+
border: none;
|
|
202
|
+
padding: 32px 24px;
|
|
203
|
+
display: flex;
|
|
204
|
+
flex-direction: column;
|
|
205
|
+
box-shadow: 0px 6px 10px 0px #00000033;
|
|
206
|
+
}
|
|
207
|
+
.dialog_dialog::backdrop {
|
|
208
|
+
background: var(--colors-backdrop);
|
|
209
|
+
backdrop-filter: blur(10px);
|
|
210
|
+
}
|
|
211
|
+
.dialog_title {
|
|
212
|
+
margin: 0;
|
|
213
|
+
margin-bottom: 24px;
|
|
214
|
+
font-family: Inter;
|
|
215
|
+
font-weight: 500;
|
|
216
|
+
font-size: 24px;
|
|
217
|
+
text-align: center;
|
|
218
|
+
}
|
|
219
|
+
.dialog_description {
|
|
220
|
+
margin: 0;
|
|
221
|
+
font-family: Inter;
|
|
222
|
+
font-weight: 400;
|
|
223
|
+
font-style: Regular;
|
|
224
|
+
font-size: 16px;
|
|
225
|
+
text-align: center;
|
|
226
|
+
color: #ffffffb2;
|
|
227
|
+
}
|
|
228
|
+
.dialog_actions {
|
|
229
|
+
margin-top: 32px;
|
|
230
|
+
display: flex;
|
|
231
|
+
flex-direction: column;
|
|
232
|
+
gap: 16px;
|
|
233
|
+
}
|
|
234
|
+
@media (min-width: 768px) {
|
|
235
|
+
.dialog_actions {
|
|
236
|
+
flex-direction: row-reverse;
|
|
237
|
+
gap: 24px;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/* src/field/field.module.css */
|
|
242
|
+
.field_field {
|
|
243
|
+
display: flex;
|
|
244
|
+
flex-direction: column;
|
|
245
|
+
width: 100%;
|
|
246
|
+
}
|
|
247
|
+
.field_label {
|
|
248
|
+
width: fit-content;
|
|
249
|
+
margin-bottom: 6px;
|
|
250
|
+
font-family: Inter;
|
|
251
|
+
font-weight: 400;
|
|
252
|
+
font-size: 14px;
|
|
253
|
+
line-height: 18px;
|
|
254
|
+
letter-spacing: 0;
|
|
255
|
+
color: var(--colors-black-300);
|
|
256
|
+
}
|
|
257
|
+
.field_message {
|
|
258
|
+
margin: 0;
|
|
259
|
+
margin-top: 6px;
|
|
260
|
+
font-family: Inter;
|
|
261
|
+
font-weight: 400;
|
|
262
|
+
font-size: 12px;
|
|
263
|
+
line-height: 16px;
|
|
264
|
+
letter-spacing: 0%;
|
|
265
|
+
color: var(--colors-black-400);
|
|
266
|
+
}
|
|
267
|
+
.field_message.field_error {
|
|
268
|
+
color: var(--colors-error-400);
|
|
269
|
+
}
|
package/dist/main.d.ts
CHANGED
|
@@ -1,11 +1,79 @@
|
|
|
1
|
+
import * as solid_js from 'solid-js';
|
|
2
|
+
import { JSX, ParentProps } from 'solid-js';
|
|
3
|
+
export { default as buttonSx } from './button/button.module.css';
|
|
4
|
+
|
|
5
|
+
type ClassName = string | undefined | boolean;
|
|
6
|
+
declare const cls: (...classes: ClassName[]) => string;
|
|
7
|
+
|
|
8
|
+
type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
9
|
+
variant?: "solid" | "outlined";
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
declare const Button: (props: ButtonProps) => solid_js.JSX.Element;
|
|
13
|
+
|
|
14
|
+
type LinkProps = JSX.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
color?: "accent" | "secondary";
|
|
17
|
+
underline?: "hover" | "always";
|
|
18
|
+
reset?: boolean;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
declare const Link: (props: LinkProps) => solid_js.JSX.Element;
|
|
22
|
+
|
|
23
|
+
type CheckboxProps = JSX.InputHTMLAttributes<HTMLInputElement> & {
|
|
24
|
+
label?: string;
|
|
25
|
+
error?: boolean;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
declare const Checkbox: (props: CheckboxProps) => solid_js.JSX.Element;
|
|
29
|
+
|
|
30
|
+
type TextInputProps = JSX.InputHTMLAttributes<HTMLInputElement> & {
|
|
31
|
+
error?: boolean;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
declare const TextInput: (props: TextInputProps) => solid_js.JSX.Element;
|
|
35
|
+
|
|
36
|
+
type OnOpenChange = (isOpen: boolean) => void;
|
|
1
37
|
/**
|
|
2
|
-
*
|
|
38
|
+
* Use event.preventDefault() to prevent dialog close
|
|
39
|
+
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event
|
|
3
40
|
*/
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
41
|
+
type OnBeforeClose = (event: Event) => void;
|
|
42
|
+
type DialogProps = ParentProps & {
|
|
43
|
+
isOpen?: boolean;
|
|
44
|
+
onOpenChange?: OnOpenChange;
|
|
45
|
+
onBeforeClose?: OnBeforeClose;
|
|
46
|
+
};
|
|
47
|
+
type DialogContentProps = JSX.DialogHtmlAttributes<HTMLDialogElement>;
|
|
48
|
+
type DialogTitleProps = JSX.HTMLAttributes<HTMLHeadingElement>;
|
|
49
|
+
type DialogDescriptionProps = JSX.HTMLAttributes<HTMLParagraphElement>;
|
|
50
|
+
type DialogCloseProps = ParentProps;
|
|
51
|
+
type DialogActionsProps = JSX.HTMLAttributes<HTMLDivElement>;
|
|
52
|
+
|
|
53
|
+
declare const Dialog: {
|
|
54
|
+
(props: DialogProps): solid_js.JSX.Element;
|
|
55
|
+
Trigger: (props: ParentProps) => solid_js.JSX.Element;
|
|
56
|
+
Content: (props: DialogContentProps) => solid_js.JSX.Element;
|
|
57
|
+
Title: (props: DialogTitleProps) => solid_js.JSX.Element;
|
|
58
|
+
Description: (props: DialogDescriptionProps) => solid_js.JSX.Element;
|
|
59
|
+
Close: (props: DialogCloseProps) => solid_js.JSX.Element;
|
|
60
|
+
Actions: (props: DialogActionsProps) => solid_js.JSX.Element;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
type MessageLevel = "info" | "warning" | "error";
|
|
64
|
+
|
|
65
|
+
type FieldProps = JSX.HTMLAttributes<HTMLDivElement> & {
|
|
66
|
+
error?: string | boolean;
|
|
67
|
+
};
|
|
68
|
+
type FieldLabelProps = JSX.LabelHTMLAttributes<HTMLLabelElement>;
|
|
69
|
+
type FieldMessageProps = JSX.HTMLAttributes<HTMLParagraphElement> & {
|
|
70
|
+
level?: MessageLevel;
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
declare const Field: {
|
|
74
|
+
(props: FieldProps): solid_js.JSX.Element;
|
|
75
|
+
Label: (props: FieldLabelProps) => solid_js.JSX.Element;
|
|
76
|
+
Message: (props: FieldMessageProps) => solid_js.JSX.Element;
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
export { Button, Checkbox, Dialog, Field, Link, TextInput, cls };
|