@mmnl.crngl/astro-ui 0.3.2 → 0.3.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/package.json +1 -1
- package/src/components/controls/BaseSelect.astro +530 -0
- package/src/index.ts +1 -0
- package/src/pages/index.astro +10 -0
package/package.json
CHANGED
|
@@ -0,0 +1,530 @@
|
|
|
1
|
+
---
|
|
2
|
+
interface Option {
|
|
3
|
+
label: string
|
|
4
|
+
value: string
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
interface Props {
|
|
8
|
+
id: string
|
|
9
|
+
label: string
|
|
10
|
+
options: Option[]
|
|
11
|
+
name?: string
|
|
12
|
+
variant?: "default" | "error"
|
|
13
|
+
size?: "sm" | "md" | "lg"
|
|
14
|
+
class?: string
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const {
|
|
18
|
+
id,
|
|
19
|
+
label,
|
|
20
|
+
options,
|
|
21
|
+
name,
|
|
22
|
+
variant = "default",
|
|
23
|
+
size = "md",
|
|
24
|
+
class: className = "",
|
|
25
|
+
} = Astro.props
|
|
26
|
+
const classes = [
|
|
27
|
+
"ui-select",
|
|
28
|
+
`ui-select--${size}`,
|
|
29
|
+
variant === "error" && "ui-select--error",
|
|
30
|
+
className,
|
|
31
|
+
]
|
|
32
|
+
.filter(Boolean)
|
|
33
|
+
.join(" ")
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
<>
|
|
37
|
+
<label class="ui-field" for={id}>
|
|
38
|
+
<span class="ui-field__label">{label}</span>
|
|
39
|
+
<select id={id} name={name ?? id} class={classes}>
|
|
40
|
+
<button>
|
|
41
|
+
<div>
|
|
42
|
+
<selectedcontent> </selectedcontent>
|
|
43
|
+
<svg
|
|
44
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
45
|
+
width="16px"
|
|
46
|
+
height="16px"
|
|
47
|
+
viewBox="0 0 16 16"
|
|
48
|
+
fill="currentColor"
|
|
49
|
+
>
|
|
50
|
+
<path
|
|
51
|
+
fill-rule="evenodd"
|
|
52
|
+
clip-rule="evenodd"
|
|
53
|
+
d="M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z"
|
|
54
|
+
fill="#000000"></path>
|
|
55
|
+
</svg>
|
|
56
|
+
</div>
|
|
57
|
+
</button>
|
|
58
|
+
<div>
|
|
59
|
+
{
|
|
60
|
+
options.map((option) => (
|
|
61
|
+
<option value={option.value}>{option.label}</option>
|
|
62
|
+
))
|
|
63
|
+
}
|
|
64
|
+
</div>
|
|
65
|
+
</select>
|
|
66
|
+
</label>
|
|
67
|
+
<select>
|
|
68
|
+
<button>
|
|
69
|
+
<div>
|
|
70
|
+
<selectedcontent> </selectedcontent>
|
|
71
|
+
<svg
|
|
72
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
73
|
+
width="16px"
|
|
74
|
+
height="16px"
|
|
75
|
+
viewBox="0 0 16 16"
|
|
76
|
+
fill="currentColor"
|
|
77
|
+
>
|
|
78
|
+
<path
|
|
79
|
+
fill-rule="evenodd"
|
|
80
|
+
clip-rule="evenodd"
|
|
81
|
+
d="M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z"
|
|
82
|
+
fill="#000000"></path>
|
|
83
|
+
</svg>
|
|
84
|
+
</div>
|
|
85
|
+
</button>
|
|
86
|
+
<div>
|
|
87
|
+
<option value="on">
|
|
88
|
+
<!-- custom so it's fully consumed for selectedcontent -->
|
|
89
|
+
<div class="custom-option">
|
|
90
|
+
<span class="indicator success"></span>
|
|
91
|
+
<span class="option-text">On</span>
|
|
92
|
+
</div>
|
|
93
|
+
</option>
|
|
94
|
+
<option value="off">
|
|
95
|
+
<div class="custom-option">
|
|
96
|
+
<span class="indicator danger"></span>
|
|
97
|
+
<span class="option-text">Off</span>
|
|
98
|
+
</div>
|
|
99
|
+
</option>
|
|
100
|
+
<option value="disable">
|
|
101
|
+
<div class="custom-option">
|
|
102
|
+
<span class="indicator disable"></span>
|
|
103
|
+
<span class="option-text">Disable</span>
|
|
104
|
+
</div>
|
|
105
|
+
</option>
|
|
106
|
+
</div>
|
|
107
|
+
</select>
|
|
108
|
+
|
|
109
|
+
<select>
|
|
110
|
+
<button>
|
|
111
|
+
<div>
|
|
112
|
+
<selectedcontent></selectedcontent>
|
|
113
|
+
<svg width="24" height="24" viewBox="0 0 24 24">
|
|
114
|
+
<path fill="currentColor" d="m7 10l5 5l5-5z"></path>
|
|
115
|
+
</svg>
|
|
116
|
+
</div>
|
|
117
|
+
</button>
|
|
118
|
+
<div>
|
|
119
|
+
<option value="Una Kravets">
|
|
120
|
+
<div class="custom-option">
|
|
121
|
+
<span class="avatar">
|
|
122
|
+
<img
|
|
123
|
+
width="20"
|
|
124
|
+
height="20"
|
|
125
|
+
src="https://pbs.twimg.com/profile_images/1587634978308997121/u7009cGe_400x400.jpg"
|
|
126
|
+
alt=""
|
|
127
|
+
/>
|
|
128
|
+
</span>
|
|
129
|
+
<span class="option-text">Una Kravets</span>
|
|
130
|
+
</div>
|
|
131
|
+
</option>
|
|
132
|
+
<option value="Bramus Van Damme">
|
|
133
|
+
<div class="custom-option">
|
|
134
|
+
<span class="avatar">
|
|
135
|
+
<img
|
|
136
|
+
width="20"
|
|
137
|
+
height="20"
|
|
138
|
+
src="https://pbs.twimg.com/profile_images/1276240813333401600/brd0hSfW_400x400.jpg"
|
|
139
|
+
alt=""
|
|
140
|
+
/>
|
|
141
|
+
</span>
|
|
142
|
+
<span class="option-text">Bramus Van Damme</span>
|
|
143
|
+
</div>
|
|
144
|
+
</option>
|
|
145
|
+
<option value="Adam Argyle">
|
|
146
|
+
<div class="custom-option">
|
|
147
|
+
<span class="avatar">
|
|
148
|
+
<img
|
|
149
|
+
width="20"
|
|
150
|
+
height="20"
|
|
151
|
+
src="https://pbs.twimg.com/profile_images/1720589781476982784/P9Ld4vC5_400x400.jpg"
|
|
152
|
+
alt=""
|
|
153
|
+
/>
|
|
154
|
+
</span>
|
|
155
|
+
<span class="option-text">Adam Argyle</span>
|
|
156
|
+
</div>
|
|
157
|
+
</option>
|
|
158
|
+
</div>
|
|
159
|
+
</select>
|
|
160
|
+
|
|
161
|
+
<select id="colorspace">
|
|
162
|
+
<button>
|
|
163
|
+
<small>Color Space</small>
|
|
164
|
+
<div>
|
|
165
|
+
<selectedcontent style="view-transition-name: foo"
|
|
166
|
+
></selectedcontent>
|
|
167
|
+
<svg width="24" height="24" viewBox="0 0 24 24">
|
|
168
|
+
<path fill="currentColor" d="m7 10l5 5l5-5z"></path>
|
|
169
|
+
</svg>
|
|
170
|
+
</div>
|
|
171
|
+
</button>
|
|
172
|
+
<div class="scrollable">
|
|
173
|
+
<optgroup>
|
|
174
|
+
<legend>Standard</legend>
|
|
175
|
+
<option value="srgb">rgb</option>
|
|
176
|
+
<option value="srgb-linear">srgb-linear</option>
|
|
177
|
+
<option value="hsl">hsl</option>
|
|
178
|
+
<option value="hwb">hwb</option>
|
|
179
|
+
</optgroup>
|
|
180
|
+
<optgroup>
|
|
181
|
+
<legend>HD</legend>
|
|
182
|
+
<option value="display-p3">display-p3</option>
|
|
183
|
+
<option value="a98-rgb">a98-rgb</option>
|
|
184
|
+
</optgroup>
|
|
185
|
+
<optgroup>
|
|
186
|
+
<legend>Ultra HD</legend>
|
|
187
|
+
<option value="lab">lab</option>
|
|
188
|
+
<option value="lch">lch</option>
|
|
189
|
+
<option value="oklch" selected>oklch</option>
|
|
190
|
+
<option value="oklab">oklab</option>
|
|
191
|
+
<option value="rec2020">rec2020</option>
|
|
192
|
+
<option value="prophoto">prophoto</option>
|
|
193
|
+
<option value="xyz">xyz</option>
|
|
194
|
+
<option value="xyz-d50">xyz-d50</option>
|
|
195
|
+
<option value="xyz-d65">xyz-d65</option>
|
|
196
|
+
</optgroup>
|
|
197
|
+
</div>
|
|
198
|
+
</select>
|
|
199
|
+
|
|
200
|
+
<select class="primary">
|
|
201
|
+
<button>
|
|
202
|
+
<div>
|
|
203
|
+
<selectedcontent></selectedcontent>
|
|
204
|
+
<svg width="24" height="24" viewBox="0 0 24 24">
|
|
205
|
+
<path fill="currentColor" d="m7 10l5 5l5-5z"></path>
|
|
206
|
+
</svg>
|
|
207
|
+
</div>
|
|
208
|
+
</button>
|
|
209
|
+
<div>
|
|
210
|
+
<option value="Published">
|
|
211
|
+
<div class="custom-option">
|
|
212
|
+
<div>Published</div>
|
|
213
|
+
<div class="description">
|
|
214
|
+
Live on the web, available to anyone with the link.
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
</option>
|
|
218
|
+
<option value="Draft">
|
|
219
|
+
<div class="custom-option">
|
|
220
|
+
<div>Draft</div>
|
|
221
|
+
<div class="description">
|
|
222
|
+
Not available on the web, no public access.
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
</option>
|
|
226
|
+
</div>
|
|
227
|
+
</select>
|
|
228
|
+
|
|
229
|
+
<div id="support">
|
|
230
|
+
<p>
|
|
231
|
+
Your browser doesn't support <code>customizable select</code> elements
|
|
232
|
+
yet.
|
|
233
|
+
</p>
|
|
234
|
+
<p>But as you can below, they continue to work as always.</p>
|
|
235
|
+
</div>
|
|
236
|
+
</>
|
|
237
|
+
<style is:global>
|
|
238
|
+
@import "https://unpkg.com/open-props" layer(design.system);
|
|
239
|
+
@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);
|
|
240
|
+
@import "https://unpkg.com/open-props/buttons.min.css" layer(demo.support);
|
|
241
|
+
select {
|
|
242
|
+
/* opt into customizing select */
|
|
243
|
+
&,
|
|
244
|
+
&::picker(select) {
|
|
245
|
+
appearance: base-select;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
font-size: var(--font-size-1);
|
|
249
|
+
|
|
250
|
+
/* removing open props normalize styles */
|
|
251
|
+
background: none;
|
|
252
|
+
padding: 0;
|
|
253
|
+
|
|
254
|
+
/* enable transitions in the drop down */
|
|
255
|
+
&::picker(select) {
|
|
256
|
+
transition:
|
|
257
|
+
opacity 0.2s ease,
|
|
258
|
+
transform 0.2s var(--ease-out-3),
|
|
259
|
+
display 0.2s allow-discrete,
|
|
260
|
+
overlay 0.2s allow-discrete;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
&::picker-icon {
|
|
264
|
+
display: none;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
/* set the off stage styles */
|
|
268
|
+
&:not(:open)::picker(select) {
|
|
269
|
+
opacity: 0;
|
|
270
|
+
transform: scale(0.95);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
/* set the on stage styles */
|
|
274
|
+
&:open::picker(select) {
|
|
275
|
+
opacity: 1;
|
|
276
|
+
transform: scale(1);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
/* transition the selected option changing */
|
|
280
|
+
selectedcontent > * {
|
|
281
|
+
transition:
|
|
282
|
+
transform 1s var(--ease-spring-4),
|
|
283
|
+
display 1s allow-discrete,
|
|
284
|
+
opacity 1s;
|
|
285
|
+
|
|
286
|
+
@starting-style {
|
|
287
|
+
opacity: 0;
|
|
288
|
+
transform: translateY(10px);
|
|
289
|
+
}
|
|
290
|
+
opacity: 1;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
/* customize the invoking button */
|
|
294
|
+
> button {
|
|
295
|
+
--_text: var(--text-1);
|
|
296
|
+
|
|
297
|
+
&:focus-visible {
|
|
298
|
+
outline-offset: -3px;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
&:has(selectedcontent) {
|
|
302
|
+
align-items: start;
|
|
303
|
+
min-inline-size: 20ch;
|
|
304
|
+
flex-direction: column;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
&.primary {
|
|
308
|
+
--_bg: var(--link);
|
|
309
|
+
--_border: none;
|
|
310
|
+
--_text: var(--surface-1);
|
|
311
|
+
--_ink-shadow: none;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
> div {
|
|
315
|
+
inline-size: 100%;
|
|
316
|
+
display: flex;
|
|
317
|
+
justify-content: space-between;
|
|
318
|
+
gap: var(--size-3);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
& > small {
|
|
322
|
+
color: var(--text-2);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
& svg {
|
|
326
|
+
inline-size: 2ch;
|
|
327
|
+
transition: transform 0.3s var(--ease-elastic-out-2);
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
&:open > button svg {
|
|
332
|
+
transform: rotate(0.5turn);
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
/* reset some picker styles */
|
|
336
|
+
&::picker(select) {
|
|
337
|
+
background: light-dark(white, var(--surface-2));
|
|
338
|
+
border-radius: var(--radius-2);
|
|
339
|
+
padding: 0;
|
|
340
|
+
margin-block: 5px;
|
|
341
|
+
box-shadow: var(--shadow-5);
|
|
342
|
+
|
|
343
|
+
@media (forced-colors: none) {
|
|
344
|
+
border: none;
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
/* customize the picker contents */
|
|
349
|
+
> div {
|
|
350
|
+
min-inline-size: calc(anchor-size(self-inline) + 20px);
|
|
351
|
+
scroll-behavior: smooth;
|
|
352
|
+
|
|
353
|
+
&.scrollable {
|
|
354
|
+
max-block-size: 20lh;
|
|
355
|
+
scrollbar-width: thin;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
& hr {
|
|
359
|
+
margin-block: var(--size-2);
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
& label {
|
|
363
|
+
display: block;
|
|
364
|
+
position: sticky;
|
|
365
|
+
top: 0;
|
|
366
|
+
z-index: 1;
|
|
367
|
+
background: var(--surface-3);
|
|
368
|
+
font-size: var(--font-size-0);
|
|
369
|
+
color: var(--text-2);
|
|
370
|
+
font-weight: var(--font-weight-7);
|
|
371
|
+
padding-block: var(--size-1);
|
|
372
|
+
padding-inline: var(--size-3);
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
& option {
|
|
376
|
+
display: flex;
|
|
377
|
+
align-items: center;
|
|
378
|
+
gap: var(--size-3);
|
|
379
|
+
padding-block: var(--size-2);
|
|
380
|
+
padding-inline: var(--size-3);
|
|
381
|
+
font-size: var(--font-size-1);
|
|
382
|
+
|
|
383
|
+
cursor: pointer;
|
|
384
|
+
outline-offset: -1px;
|
|
385
|
+
|
|
386
|
+
&::checkmark {
|
|
387
|
+
font-weight: var(--font-weight-8);
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
&:focus-visible {
|
|
391
|
+
outline-offset: -1px;
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
&:is(:focus, :hover) {
|
|
395
|
+
background: oklch(from var(--link) l c h / 25%);
|
|
396
|
+
color: inherit;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
&:is(:checked) {
|
|
400
|
+
background: var(--link);
|
|
401
|
+
color: var(--surface-1);
|
|
402
|
+
font-weight: var(--font-weight-8);
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
</style>
|
|
408
|
+
<!-- <style is:global>
|
|
409
|
+
.ui-select {
|
|
410
|
+
width: 100%;
|
|
411
|
+
border: 1px solid var(--aui-color-border);
|
|
412
|
+
border-radius: var(--aui-radius-base);
|
|
413
|
+
background: var(--aui-color-bg);
|
|
414
|
+
color: var(--aui-color-text);
|
|
415
|
+
/* opt into customizing select */
|
|
416
|
+
&,
|
|
417
|
+
&::picker(select) {
|
|
418
|
+
appearance: base-select;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
font-size: var(--font-size-1);
|
|
422
|
+
|
|
423
|
+
/* removing open props normalize styles */
|
|
424
|
+
background: none;
|
|
425
|
+
padding: 0;
|
|
426
|
+
|
|
427
|
+
/* enable transitions in the drop down */
|
|
428
|
+
&::picker(select) {
|
|
429
|
+
transition:
|
|
430
|
+
opacity 0.2s ease,
|
|
431
|
+
transform 0.2s var(--ease-out-3),
|
|
432
|
+
display 0.2s allow-discrete,
|
|
433
|
+
overlay 0.2s allow-discrete;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
/* &::picker-icon {
|
|
437
|
+
display: none;
|
|
438
|
+
} */
|
|
439
|
+
|
|
440
|
+
/* set the off stage styles */
|
|
441
|
+
&:not(:open)::picker(select) {
|
|
442
|
+
opacity: 0;
|
|
443
|
+
transform: scale(0.95);
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
/* set the on stage styles */
|
|
447
|
+
&:open::picker(select) {
|
|
448
|
+
opacity: 1;
|
|
449
|
+
transform: scale(1);
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
/* transition the selected option changing */
|
|
453
|
+
selectedcontent > * {
|
|
454
|
+
transition:
|
|
455
|
+
transform 1s var(--ease-spring-4),
|
|
456
|
+
display 1s allow-discrete,
|
|
457
|
+
opacity 1s;
|
|
458
|
+
|
|
459
|
+
@starting-style {
|
|
460
|
+
opacity: 0;
|
|
461
|
+
transform: translateY(10px);
|
|
462
|
+
}
|
|
463
|
+
opacity: 1;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
/* customize the invoking button */
|
|
467
|
+
> button {
|
|
468
|
+
--_text: var(--text-1);
|
|
469
|
+
|
|
470
|
+
&:focus-visible {
|
|
471
|
+
outline-offset: -3px;
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
&:has(selectedcontent) {
|
|
475
|
+
align-items: start;
|
|
476
|
+
min-inline-size: 20ch;
|
|
477
|
+
flex-direction: column;
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
&.primary {
|
|
481
|
+
--_bg: var(--link);
|
|
482
|
+
--_border: none;
|
|
483
|
+
--_text: var(--surface-1);
|
|
484
|
+
--_ink-shadow: none;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
> div {
|
|
488
|
+
inline-size: 100%;
|
|
489
|
+
display: flex;
|
|
490
|
+
justify-content: space-between;
|
|
491
|
+
gap: var(--size-3);
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
& > small {
|
|
495
|
+
color: var(--text-2);
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
& svg {
|
|
499
|
+
inline-size: 2ch;
|
|
500
|
+
transition: transform 0.3s var(--ease-elastic-out-2);
|
|
501
|
+
}
|
|
502
|
+
}
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
.ui-select--sm {
|
|
506
|
+
padding: var(--input-padding-y-sm) var(--input-padding-x);
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
.ui-select--md {
|
|
510
|
+
padding: var(--input-padding-y-md) var(--input-padding-x);
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
.ui-select--lg {
|
|
514
|
+
padding: var(--input-padding-y-lg) var(--input-padding-x);
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
.ui-select--error {
|
|
518
|
+
border-color: var(--aui-color-danger-600);
|
|
519
|
+
}
|
|
520
|
+
</style> -->
|
|
521
|
+
<script>
|
|
522
|
+
document.body.classList.toggle(
|
|
523
|
+
'supports-custom-select',
|
|
524
|
+
CSS.supports("appearance: base-select")
|
|
525
|
+
)
|
|
526
|
+
|
|
527
|
+
// colorspace.oninput = e => {
|
|
528
|
+
// console.log(colorspace.value)
|
|
529
|
+
// }
|
|
530
|
+
</script>
|
package/src/index.ts
CHANGED
|
@@ -8,6 +8,7 @@ export { default as Button } from "./components/controls/Button.astro"
|
|
|
8
8
|
export { default as Input } from "./components/controls/Input.astro"
|
|
9
9
|
export { default as Textarea } from "./components/controls/Textarea.astro"
|
|
10
10
|
export { default as Select } from "./components/controls/Select.astro"
|
|
11
|
+
export { default as BaseSelect } from "./components/controls/BaseSelect.astro"
|
|
11
12
|
export { default as Checkbox } from "./components/controls/Checkbox.astro"
|
|
12
13
|
|
|
13
14
|
export { default as Alert } from "./components/feedback/Alert.astro"
|
package/src/pages/index.astro
CHANGED
|
@@ -17,6 +17,7 @@ import {
|
|
|
17
17
|
Tabs,
|
|
18
18
|
Textarea,
|
|
19
19
|
} from "../index"
|
|
20
|
+
import BaseSelect from "src/components/controls/BaseSelect.astro"
|
|
20
21
|
|
|
21
22
|
const tabItems = [
|
|
22
23
|
{ id: "tokens", label: "Tokens" },
|
|
@@ -68,6 +69,15 @@ const tabItems = [
|
|
|
68
69
|
{ label: "Engineer", value: "engineer" },
|
|
69
70
|
]}
|
|
70
71
|
/>
|
|
72
|
+
<strong>Base-Select</strong>
|
|
73
|
+
<BaseSelect
|
|
74
|
+
id="role"
|
|
75
|
+
label="Role"
|
|
76
|
+
options={[
|
|
77
|
+
{ label: "Designer", value: "designer" },
|
|
78
|
+
{ label: "Engineer", value: "engineer" },
|
|
79
|
+
]}
|
|
80
|
+
/>
|
|
71
81
|
<Textarea
|
|
72
82
|
id="notes"
|
|
73
83
|
label="Notes"
|