@bysages/solid 0.4.3 → 0.4.4
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/components/avatar/index.d.mts +16 -4
- package/dist/components/avatar/index.mjs +60 -3
- package/dist/components/banner/index.d.mts +17 -1
- package/dist/components/banner/index.mjs +78 -2
- package/dist/components/breadcrumb/index.d.mts +14 -1
- package/dist/components/breadcrumb/index.mjs +51 -2
- package/dist/components/color-picker/index.d.mts +4 -0
- package/dist/components/color-picker/index.mjs +65 -31
- package/dist/components/float-button/index.d.mts +24 -1
- package/dist/components/float-button/index.mjs +73 -2
- package/dist/generative/index.mjs +218 -201
- package/dist/index.d.mts +5 -5
- package/package.json +2 -2
|
@@ -4,9 +4,12 @@ import { Alert } from "../components/alert/index.mjs";
|
|
|
4
4
|
import { Avatar } from "../components/avatar/index.mjs";
|
|
5
5
|
import { Badge } from "../components/badge/index.mjs";
|
|
6
6
|
import { Spinner } from "../components/spinner/index.mjs";
|
|
7
|
+
import { Banner } from "../components/banner/index.mjs";
|
|
8
|
+
import { Breadcrumb } from "../components/breadcrumb/index.mjs";
|
|
7
9
|
import { Card } from "../components/card/index.mjs";
|
|
8
10
|
import { t as Input } from "../input-BL3N3L8g.mjs";
|
|
9
11
|
import { Checkbox } from "../components/checkbox/index.mjs";
|
|
12
|
+
import { FloatButton } from "../components/float-button/index.mjs";
|
|
10
13
|
import { Progress } from "../components/progress/index.mjs";
|
|
11
14
|
import { RadioGroup } from "../components/radio-group/index.mjs";
|
|
12
15
|
import { t as Select } from "../select-DI7pFspF.mjs";
|
|
@@ -17,9 +20,7 @@ import { Stat } from "../components/stat/index.mjs";
|
|
|
17
20
|
import { Switch } from "../components/switch/index.mjs";
|
|
18
21
|
import { Textarea } from "../components/textarea/index.mjs";
|
|
19
22
|
import { Typography } from "../components/typography/index.mjs";
|
|
20
|
-
import { createComponent } from "
|
|
21
|
-
import { For, Show, createComponent as createComponent$1 } from "solid-js";
|
|
22
|
-
import { createListCollection } from "@ark-ui/solid/collection";
|
|
23
|
+
import { Show, createComponent } from "solid-js";
|
|
23
24
|
import { z } from "zod";
|
|
24
25
|
import { defineRegistry, useBoundProp } from "@json-render/solid";
|
|
25
26
|
import { defineCatalog } from "@json-render/core";
|
|
@@ -52,9 +53,6 @@ const headingClass = {
|
|
|
52
53
|
"5": "text-lg",
|
|
53
54
|
"6": "text-base"
|
|
54
55
|
};
|
|
55
|
-
function initials(name) {
|
|
56
|
-
return name.split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("");
|
|
57
|
-
}
|
|
58
56
|
function slug(value) {
|
|
59
57
|
return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "") || value;
|
|
60
58
|
}
|
|
@@ -88,6 +86,25 @@ const faces$1 = defineFace({
|
|
|
88
86
|
}),
|
|
89
87
|
description: "A person's seal: image when given, initials as the fallback."
|
|
90
88
|
},
|
|
89
|
+
Banner: {
|
|
90
|
+
props: z.object({
|
|
91
|
+
status: z.enum([
|
|
92
|
+
"ink",
|
|
93
|
+
"info",
|
|
94
|
+
"success",
|
|
95
|
+
"warning",
|
|
96
|
+
"danger"
|
|
97
|
+
]).optional(),
|
|
98
|
+
title: z.string().optional(),
|
|
99
|
+
message: z.string().optional(),
|
|
100
|
+
dismissible: z.boolean().optional()
|
|
101
|
+
}),
|
|
102
|
+
description: "A full-width notice that speaks once across the page."
|
|
103
|
+
},
|
|
104
|
+
Breadcrumb: {
|
|
105
|
+
props: z.object({ items: z.array(z.string()).optional() }),
|
|
106
|
+
description: "A trail of waymarks from home to the current page."
|
|
107
|
+
},
|
|
91
108
|
Badge: {
|
|
92
109
|
props: z.object({
|
|
93
110
|
text: z.string(),
|
|
@@ -152,6 +169,29 @@ const faces$1 = defineFace({
|
|
|
152
169
|
}),
|
|
153
170
|
description: "One independent box with its label."
|
|
154
171
|
},
|
|
172
|
+
FloatButton: {
|
|
173
|
+
props: z.object({
|
|
174
|
+
label: z.string().optional(),
|
|
175
|
+
actions: z.array(z.object({
|
|
176
|
+
label: z.string(),
|
|
177
|
+
icon: z.string().optional(),
|
|
178
|
+
disabled: z.boolean().optional()
|
|
179
|
+
})).optional(),
|
|
180
|
+
placement: z.enum([
|
|
181
|
+
"bottom-end",
|
|
182
|
+
"bottom-start",
|
|
183
|
+
"top-end",
|
|
184
|
+
"top-start"
|
|
185
|
+
]).optional(),
|
|
186
|
+
size: z.enum([
|
|
187
|
+
"sm",
|
|
188
|
+
"md",
|
|
189
|
+
"lg"
|
|
190
|
+
]).optional(),
|
|
191
|
+
defaultOpen: z.boolean().optional()
|
|
192
|
+
}),
|
|
193
|
+
description: "A floating action and its fanned alternatives; actions use curated icon names."
|
|
194
|
+
},
|
|
155
195
|
Heading: {
|
|
156
196
|
props: z.object({
|
|
157
197
|
text: z.string(),
|
|
@@ -328,22 +368,12 @@ const textVoices = {
|
|
|
328
368
|
function useBound(value, path) {
|
|
329
369
|
return useBoundProp(value, path);
|
|
330
370
|
}
|
|
331
|
-
const collectionCache = /* @__PURE__ */ new Map();
|
|
332
|
-
function collectionFor(options) {
|
|
333
|
-
const key = JSON.stringify(options);
|
|
334
|
-
let collection = collectionCache.get(key);
|
|
335
|
-
if (!collection) {
|
|
336
|
-
collection = createListCollection({ items: options });
|
|
337
|
-
collectionCache.set(key, collection);
|
|
338
|
-
}
|
|
339
|
-
return collection;
|
|
340
|
-
}
|
|
341
371
|
/** A labelled field: the label whispers above, the control answers. */
|
|
342
372
|
function labelled(label, control) {
|
|
343
|
-
return label ? createComponent
|
|
373
|
+
return label ? createComponent(Stack, {
|
|
344
374
|
gap: "xs",
|
|
345
375
|
get children() {
|
|
346
|
-
return [createComponent
|
|
376
|
+
return [createComponent(Typography.Label, { get children() {
|
|
347
377
|
return label;
|
|
348
378
|
} }), control];
|
|
349
379
|
}
|
|
@@ -351,25 +381,25 @@ function labelled(label, control) {
|
|
|
351
381
|
}
|
|
352
382
|
//#endregion
|
|
353
383
|
//#region src/components/alert/generative.tsx
|
|
354
|
-
var generative_exports$
|
|
384
|
+
var generative_exports$20 = /* @__PURE__ */ __exportAll({ default: () => generative_default$20 });
|
|
355
385
|
/** A bordered notice; status picks the pigment. */
|
|
356
|
-
var generative_default$
|
|
386
|
+
var generative_default$20 = defineEntry({ Alert: {
|
|
357
387
|
...faces$1.Alert,
|
|
358
|
-
component: ({ props }) => createComponent
|
|
388
|
+
component: ({ props }) => createComponent(Alert.Root, {
|
|
359
389
|
get status() {
|
|
360
390
|
return props.status ?? "ink";
|
|
361
391
|
},
|
|
362
392
|
get children() {
|
|
363
|
-
return [createComponent
|
|
364
|
-
return [createComponent
|
|
393
|
+
return [createComponent(Alert.Icon, {}), createComponent(Alert.Body, { get children() {
|
|
394
|
+
return [createComponent(Alert.Title, { get children() {
|
|
365
395
|
return props.title;
|
|
366
|
-
} }), createComponent
|
|
396
|
+
} }), createComponent(Show, {
|
|
367
397
|
keyed: true,
|
|
368
398
|
get when() {
|
|
369
399
|
return props.message != null;
|
|
370
400
|
},
|
|
371
401
|
get children() {
|
|
372
|
-
return createComponent
|
|
402
|
+
return createComponent(Alert.Description, { get children() {
|
|
373
403
|
return props.message;
|
|
374
404
|
} });
|
|
375
405
|
}
|
|
@@ -380,43 +410,29 @@ var generative_default$17 = defineEntry({ Alert: {
|
|
|
380
410
|
} });
|
|
381
411
|
//#endregion
|
|
382
412
|
//#region src/components/avatar/generative.tsx
|
|
383
|
-
var generative_exports$
|
|
413
|
+
var generative_exports$19 = /* @__PURE__ */ __exportAll({ default: () => generative_default$19 });
|
|
384
414
|
/** A person's seal: image when given, initials as the fallback. */
|
|
385
|
-
var generative_default$
|
|
415
|
+
var generative_default$19 = defineEntry({ Avatar: {
|
|
386
416
|
...faces$1.Avatar,
|
|
387
|
-
component: ({ props }) => createComponent
|
|
417
|
+
component: ({ props }) => createComponent(Avatar, {
|
|
418
|
+
get name() {
|
|
419
|
+
return props.name;
|
|
420
|
+
},
|
|
388
421
|
get size() {
|
|
389
422
|
return props.size;
|
|
390
423
|
},
|
|
391
|
-
get
|
|
392
|
-
return
|
|
393
|
-
keyed: true,
|
|
394
|
-
get when() {
|
|
395
|
-
return props.src != null;
|
|
396
|
-
},
|
|
397
|
-
get children() {
|
|
398
|
-
return createComponent$1(Avatar.Image, {
|
|
399
|
-
get src() {
|
|
400
|
-
return props.src;
|
|
401
|
-
},
|
|
402
|
-
get alt() {
|
|
403
|
-
return props.name;
|
|
404
|
-
}
|
|
405
|
-
});
|
|
406
|
-
}
|
|
407
|
-
}), createComponent$1(Avatar.Fallback, { get children() {
|
|
408
|
-
return initials(props.name);
|
|
409
|
-
} })];
|
|
424
|
+
get src() {
|
|
425
|
+
return props.src;
|
|
410
426
|
}
|
|
411
427
|
})
|
|
412
428
|
} });
|
|
413
429
|
//#endregion
|
|
414
430
|
//#region src/components/badge/generative.tsx
|
|
415
|
-
var generative_exports$
|
|
431
|
+
var generative_exports$18 = /* @__PURE__ */ __exportAll({ default: () => generative_default$18 });
|
|
416
432
|
/** A small status seal beside content; reads at a glance. */
|
|
417
|
-
var generative_default$
|
|
433
|
+
var generative_default$18 = defineEntry({ Badge: {
|
|
418
434
|
...faces$1.Badge,
|
|
419
|
-
component: ({ props }) => createComponent
|
|
435
|
+
component: ({ props }) => createComponent(Badge, {
|
|
420
436
|
get tone() {
|
|
421
437
|
return props.tone;
|
|
422
438
|
},
|
|
@@ -429,12 +445,52 @@ var generative_default$15 = defineEntry({ Badge: {
|
|
|
429
445
|
})
|
|
430
446
|
} });
|
|
431
447
|
//#endregion
|
|
448
|
+
//#region src/components/banner/generative.tsx
|
|
449
|
+
var generative_exports$17 = /* @__PURE__ */ __exportAll({ default: () => generative_default$17 });
|
|
450
|
+
/** A full-width notice that speaks once across the page. */
|
|
451
|
+
var generative_default$17 = defineEntry({ Banner: {
|
|
452
|
+
...faces$1.Banner,
|
|
453
|
+
component: ({ props }) => createComponent(Banner, {
|
|
454
|
+
get status() {
|
|
455
|
+
return props.status;
|
|
456
|
+
},
|
|
457
|
+
get title() {
|
|
458
|
+
return props.title;
|
|
459
|
+
},
|
|
460
|
+
get message() {
|
|
461
|
+
return props.message;
|
|
462
|
+
},
|
|
463
|
+
dismissible: true
|
|
464
|
+
})
|
|
465
|
+
} });
|
|
466
|
+
//#endregion
|
|
467
|
+
//#region src/components/breadcrumb/generative.tsx
|
|
468
|
+
var generative_exports$16 = /* @__PURE__ */ __exportAll({ default: () => generative_default$16 });
|
|
469
|
+
/** A trail of waymarks from home to the current page. */
|
|
470
|
+
var generative_default$16 = defineEntry({ Breadcrumb: {
|
|
471
|
+
...faces$1.Breadcrumb,
|
|
472
|
+
component: ({ props }) => {
|
|
473
|
+
const labels = props.items ?? [
|
|
474
|
+
"Home",
|
|
475
|
+
"Guides",
|
|
476
|
+
"Ink"
|
|
477
|
+
];
|
|
478
|
+
const items = labels.map((label, index) => index === labels.length - 1 ? { label } : {
|
|
479
|
+
label,
|
|
480
|
+
href: `#${slug(label)}`
|
|
481
|
+
});
|
|
482
|
+
return createComponent(Breadcrumb, { get items() {
|
|
483
|
+
return items;
|
|
484
|
+
} });
|
|
485
|
+
}
|
|
486
|
+
} });
|
|
487
|
+
//#endregion
|
|
432
488
|
//#region src/components/button/generative.tsx
|
|
433
|
-
var generative_exports$
|
|
489
|
+
var generative_exports$15 = /* @__PURE__ */ __exportAll({ default: () => generative_default$15 });
|
|
434
490
|
/** The primary action register: solid ink for the one main action, outline, ghost, or subtle for the rest. */
|
|
435
|
-
var generative_default$
|
|
491
|
+
var generative_default$15 = defineEntry({ Button: {
|
|
436
492
|
...faces$1.Button,
|
|
437
|
-
component: ({ props, emit }) => createComponent
|
|
493
|
+
component: ({ props, emit }) => createComponent(Button, {
|
|
438
494
|
get variant() {
|
|
439
495
|
return props.variant ?? "solid";
|
|
440
496
|
},
|
|
@@ -455,55 +511,55 @@ var generative_default$14 = defineEntry({ Button: {
|
|
|
455
511
|
} });
|
|
456
512
|
//#endregion
|
|
457
513
|
//#region src/components/card/generative.tsx
|
|
458
|
-
var generative_exports$
|
|
514
|
+
var generative_exports$14 = /* @__PURE__ */ __exportAll({ default: () => generative_default$14 });
|
|
459
515
|
/** Grouping vessel. Give title and description instead of hand-building a header; children render in the body. */
|
|
460
|
-
var generative_default$
|
|
516
|
+
var generative_default$14 = defineEntry({ Card: {
|
|
461
517
|
...faces$1.Card,
|
|
462
|
-
component: ({ props, children }) => createComponent
|
|
463
|
-
return [createComponent
|
|
518
|
+
component: ({ props, children }) => createComponent(Card.Root, { get children() {
|
|
519
|
+
return [createComponent(Show, {
|
|
464
520
|
keyed: true,
|
|
465
521
|
get when() {
|
|
466
522
|
return props.title != null || props.description != null;
|
|
467
523
|
},
|
|
468
524
|
get children() {
|
|
469
|
-
return createComponent
|
|
470
|
-
return [createComponent
|
|
525
|
+
return createComponent(Card.Header, { get children() {
|
|
526
|
+
return [createComponent(Show, {
|
|
471
527
|
keyed: true,
|
|
472
528
|
get when() {
|
|
473
529
|
return props.title != null;
|
|
474
530
|
},
|
|
475
531
|
get children() {
|
|
476
|
-
return createComponent
|
|
532
|
+
return createComponent(Card.Title, { get children() {
|
|
477
533
|
return props.title;
|
|
478
534
|
} });
|
|
479
535
|
}
|
|
480
|
-
}), createComponent
|
|
536
|
+
}), createComponent(Show, {
|
|
481
537
|
keyed: true,
|
|
482
538
|
get when() {
|
|
483
539
|
return props.description != null;
|
|
484
540
|
},
|
|
485
541
|
get children() {
|
|
486
|
-
return createComponent
|
|
542
|
+
return createComponent(Card.Description, { get children() {
|
|
487
543
|
return props.description;
|
|
488
544
|
} });
|
|
489
545
|
}
|
|
490
546
|
})];
|
|
491
547
|
} });
|
|
492
548
|
}
|
|
493
|
-
}), createComponent
|
|
549
|
+
}), createComponent(Card.Content, { get children() {
|
|
494
550
|
return children;
|
|
495
551
|
} })];
|
|
496
552
|
} })
|
|
497
553
|
} });
|
|
498
554
|
//#endregion
|
|
499
555
|
//#region src/components/checkbox/generative.tsx
|
|
500
|
-
var generative_exports$
|
|
556
|
+
var generative_exports$13 = /* @__PURE__ */ __exportAll({ default: () => generative_default$13 });
|
|
501
557
|
/** One independent box with its label. */
|
|
502
|
-
var generative_default$
|
|
558
|
+
var generative_default$13 = defineEntry({ Checkbox: {
|
|
503
559
|
...faces$1.Checkbox,
|
|
504
560
|
component: ({ props }) => {
|
|
505
561
|
const mark = iconNode("check");
|
|
506
|
-
return createComponent
|
|
562
|
+
return createComponent(Checkbox.Root, {
|
|
507
563
|
get defaultChecked() {
|
|
508
564
|
return props.checked ?? false;
|
|
509
565
|
},
|
|
@@ -512,21 +568,51 @@ var generative_default$12 = defineEntry({ Checkbox: {
|
|
|
512
568
|
},
|
|
513
569
|
get children() {
|
|
514
570
|
return [
|
|
515
|
-
createComponent
|
|
516
|
-
return createComponent
|
|
571
|
+
createComponent(Checkbox.Control, { get children() {
|
|
572
|
+
return createComponent(Checkbox.Indicator, { get children() {
|
|
517
573
|
return mark;
|
|
518
574
|
} });
|
|
519
575
|
} }),
|
|
520
|
-
createComponent
|
|
576
|
+
createComponent(Checkbox.Label, { get children() {
|
|
521
577
|
return props.label;
|
|
522
578
|
} }),
|
|
523
|
-
createComponent
|
|
579
|
+
createComponent(Checkbox.HiddenInput, {})
|
|
524
580
|
];
|
|
525
581
|
}
|
|
526
582
|
});
|
|
527
583
|
}
|
|
528
584
|
} });
|
|
529
585
|
//#endregion
|
|
586
|
+
//#region src/components/float-button/generative.tsx
|
|
587
|
+
var generative_exports$12 = /* @__PURE__ */ __exportAll({ default: () => generative_default$12 });
|
|
588
|
+
/** A floating action cluster; named actions fan out from one corner. */
|
|
589
|
+
var generative_default$12 = defineEntry({ FloatButton: {
|
|
590
|
+
...faces$1.FloatButton,
|
|
591
|
+
component: ({ props }) => {
|
|
592
|
+
const actions = Array.isArray(props.actions) ? props.actions : [{ label: "Edit" }];
|
|
593
|
+
return createComponent(FloatButton, {
|
|
594
|
+
get actions() {
|
|
595
|
+
return actions.map((action) => ({
|
|
596
|
+
...action,
|
|
597
|
+
icon: action.icon ?? "pencil"
|
|
598
|
+
}));
|
|
599
|
+
},
|
|
600
|
+
get defaultOpen() {
|
|
601
|
+
return true;
|
|
602
|
+
},
|
|
603
|
+
get label() {
|
|
604
|
+
return props.label;
|
|
605
|
+
},
|
|
606
|
+
get placement() {
|
|
607
|
+
return props.placement;
|
|
608
|
+
},
|
|
609
|
+
get size() {
|
|
610
|
+
return props.size;
|
|
611
|
+
}
|
|
612
|
+
});
|
|
613
|
+
}
|
|
614
|
+
} });
|
|
615
|
+
//#endregion
|
|
530
616
|
//#region src/components/input/generative.tsx
|
|
531
617
|
var generative_exports$11 = /* @__PURE__ */ __exportAll({ default: () => generative_default$11 });
|
|
532
618
|
/** A single-line field; rely on border, surface and the focus halo. */
|
|
@@ -534,7 +620,7 @@ var generative_default$11 = defineEntry({ Input: {
|
|
|
534
620
|
...faces$1.Input,
|
|
535
621
|
component: ({ props, bindings }) => {
|
|
536
622
|
const [value, setValue] = useBound(props.value, bindings?.value);
|
|
537
|
-
return labelled(props.label, createComponent
|
|
623
|
+
return labelled(props.label, createComponent(Input, {
|
|
538
624
|
get value() {
|
|
539
625
|
return value ?? "";
|
|
540
626
|
},
|
|
@@ -557,34 +643,22 @@ var generative_exports$10 = /* @__PURE__ */ __exportAll({ default: () => generat
|
|
|
557
643
|
/** A working track that fills toward done. */
|
|
558
644
|
var generative_default$10 = defineEntry({ Progress: {
|
|
559
645
|
...faces$1.Progress,
|
|
560
|
-
component: ({ props }) => createComponent
|
|
646
|
+
component: ({ props }) => createComponent(Progress, {
|
|
561
647
|
get value() {
|
|
562
648
|
return props.value;
|
|
563
649
|
},
|
|
564
650
|
get max() {
|
|
565
651
|
return props.max;
|
|
566
652
|
},
|
|
567
|
-
get
|
|
568
|
-
return
|
|
569
|
-
keyed: true,
|
|
570
|
-
get when() {
|
|
571
|
-
return props.label != null;
|
|
572
|
-
},
|
|
573
|
-
get children() {
|
|
574
|
-
return createComponent$1(Progress.Label, { get children() {
|
|
575
|
-
return props.label;
|
|
576
|
-
} });
|
|
577
|
-
}
|
|
578
|
-
}), createComponent$1(Progress.Track, { get children() {
|
|
579
|
-
return createComponent$1(Progress.Range, {});
|
|
580
|
-
} })];
|
|
653
|
+
get label() {
|
|
654
|
+
return props.label;
|
|
581
655
|
}
|
|
582
656
|
})
|
|
583
657
|
} });
|
|
584
658
|
//#endregion
|
|
585
659
|
//#region src/components/radio-group/generative.tsx
|
|
586
660
|
var generative_exports$9 = /* @__PURE__ */ __exportAll({ default: () => generative_default$9 });
|
|
587
|
-
/** Several
|
|
661
|
+
/** Several choices where exactly one may hold. */
|
|
588
662
|
var generative_default$9 = defineEntry({ RadioGroup: {
|
|
589
663
|
...faces$1.RadioGroup,
|
|
590
664
|
component: ({ props }) => {
|
|
@@ -593,38 +667,20 @@ var generative_default$9 = defineEntry({ RadioGroup: {
|
|
|
593
667
|
"Option B",
|
|
594
668
|
"Option C"
|
|
595
669
|
];
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
},
|
|
607
|
-
get children() {
|
|
608
|
-
return [
|
|
609
|
-
createComponent$1(RadioGroup.ItemControl, {}),
|
|
610
|
-
createComponent$1(RadioGroup.ItemText, { get children() {
|
|
611
|
-
return value;
|
|
612
|
-
} }),
|
|
613
|
-
createComponent$1(RadioGroup.ItemHiddenInput, {})
|
|
614
|
-
];
|
|
615
|
-
}
|
|
616
|
-
})
|
|
617
|
-
});
|
|
618
|
-
}
|
|
619
|
-
});
|
|
620
|
-
return labelled(props.label, createComponent$1(RadioGroup.Root, {
|
|
670
|
+
return createComponent(RadioGroup, {
|
|
671
|
+
get label() {
|
|
672
|
+
return props.label;
|
|
673
|
+
},
|
|
674
|
+
get items() {
|
|
675
|
+
return values().map((value) => ({
|
|
676
|
+
value,
|
|
677
|
+
label: value
|
|
678
|
+
}));
|
|
679
|
+
},
|
|
621
680
|
get defaultValue() {
|
|
622
681
|
return slug(values()[0] ?? "");
|
|
623
|
-
},
|
|
624
|
-
get children() {
|
|
625
|
-
return list;
|
|
626
682
|
}
|
|
627
|
-
})
|
|
683
|
+
});
|
|
628
684
|
}
|
|
629
685
|
} });
|
|
630
686
|
//#endregion
|
|
@@ -635,57 +691,27 @@ var generative_default$8 = defineEntry({ Select: {
|
|
|
635
691
|
...faces$1.Select,
|
|
636
692
|
component: ({ props, bindings }) => {
|
|
637
693
|
const [value, setValue] = useBound(props.value, bindings?.value);
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
694
|
+
return createComponent(Select, {
|
|
695
|
+
get label() {
|
|
696
|
+
return props.label;
|
|
697
|
+
},
|
|
698
|
+
get placeholder() {
|
|
699
|
+
return props.placeholder;
|
|
700
|
+
},
|
|
701
|
+
get options() {
|
|
702
|
+
return props.options;
|
|
643
703
|
},
|
|
644
704
|
get multiple() {
|
|
645
705
|
return props.multiple;
|
|
646
706
|
},
|
|
707
|
+
get disabled() {
|
|
708
|
+
return props.disabled;
|
|
709
|
+
},
|
|
647
710
|
get value() {
|
|
648
|
-
return props.multiple ? Array.isArray(value) ? value : value ? [value] : void 0 :
|
|
711
|
+
return props.multiple ? Array.isArray(value) ? value : value ? [value] : void 0 : Array.isArray(value) ? value.at(0) ?? "" : value;
|
|
649
712
|
},
|
|
650
|
-
onValueChange:
|
|
651
|
-
|
|
652
|
-
return [
|
|
653
|
-
createComponent$1(Select.Control, { get children() {
|
|
654
|
-
return [createComponent$1(Select.Trigger, { get children() {
|
|
655
|
-
return createComponent$1(Select.ValueText, { get placeholder() {
|
|
656
|
-
return props.placeholder;
|
|
657
|
-
} });
|
|
658
|
-
} }), createComponent$1(Select.Indicator, { get children() {
|
|
659
|
-
return iconNode("chevrons-up-down");
|
|
660
|
-
} })];
|
|
661
|
-
} }),
|
|
662
|
-
createComponent$1(Select.Positioner, { get children() {
|
|
663
|
-
return createComponent$1(Select.Content, { get children() {
|
|
664
|
-
return createComponent$1(Select.ItemGroup, { get children() {
|
|
665
|
-
return createComponent(For, {
|
|
666
|
-
get each() {
|
|
667
|
-
return props.options;
|
|
668
|
-
},
|
|
669
|
-
children: (option) => createComponent$1(Select.Item, {
|
|
670
|
-
get item() {
|
|
671
|
-
return option;
|
|
672
|
-
},
|
|
673
|
-
get children() {
|
|
674
|
-
return [createComponent$1(Select.ItemText, { get children() {
|
|
675
|
-
return option.label;
|
|
676
|
-
} }), createComponent$1(Select.ItemIndicator, { get children() {
|
|
677
|
-
return iconNode("check");
|
|
678
|
-
} })];
|
|
679
|
-
}
|
|
680
|
-
})
|
|
681
|
-
});
|
|
682
|
-
} });
|
|
683
|
-
} });
|
|
684
|
-
} }),
|
|
685
|
-
createComponent$1(Select.HiddenSelect, {})
|
|
686
|
-
];
|
|
687
|
-
}
|
|
688
|
-
}));
|
|
713
|
+
onValueChange: setValue
|
|
714
|
+
});
|
|
689
715
|
}
|
|
690
716
|
} });
|
|
691
717
|
//#endregion
|
|
@@ -694,7 +720,7 @@ var generative_exports$7 = /* @__PURE__ */ __exportAll({ default: () => generati
|
|
|
694
720
|
/** Hairline divider between sections. */
|
|
695
721
|
var generative_default$7 = defineEntry({ Separator: {
|
|
696
722
|
...faces$1.Separator,
|
|
697
|
-
component: ({ props }) => createComponent
|
|
723
|
+
component: ({ props }) => createComponent(Separator, {
|
|
698
724
|
get orientation() {
|
|
699
725
|
return props.orientation ?? "horizontal";
|
|
700
726
|
},
|
|
@@ -707,9 +733,12 @@ var generative_exports$6 = /* @__PURE__ */ __exportAll({ default: () => generati
|
|
|
707
733
|
/** A ruled track the hand slides between bounds. */
|
|
708
734
|
var generative_default$6 = defineEntry({ Slider: {
|
|
709
735
|
...faces$1.Slider,
|
|
710
|
-
component: ({ props }) =>
|
|
736
|
+
component: ({ props }) => createComponent(Slider, {
|
|
737
|
+
get label() {
|
|
738
|
+
return props.label;
|
|
739
|
+
},
|
|
711
740
|
get defaultValue() {
|
|
712
|
-
return
|
|
741
|
+
return props.value ?? 50;
|
|
713
742
|
},
|
|
714
743
|
get min() {
|
|
715
744
|
return props.min;
|
|
@@ -719,15 +748,8 @@ var generative_default$6 = defineEntry({ Slider: {
|
|
|
719
748
|
},
|
|
720
749
|
get step() {
|
|
721
750
|
return props.step;
|
|
722
|
-
},
|
|
723
|
-
get children() {
|
|
724
|
-
return [createComponent$1(Slider.Control, { get children() {
|
|
725
|
-
return [createComponent$1(Slider.Track, { get children() {
|
|
726
|
-
return createComponent$1(Slider.Range, {});
|
|
727
|
-
} }), createComponent$1(Slider.Thumb, { index: 0 })];
|
|
728
|
-
} })];
|
|
729
751
|
}
|
|
730
|
-
})
|
|
752
|
+
})
|
|
731
753
|
} });
|
|
732
754
|
//#endregion
|
|
733
755
|
//#region src/components/spinner/generative.tsx
|
|
@@ -735,7 +757,7 @@ var generative_exports$5 = /* @__PURE__ */ __exportAll({ default: () => generati
|
|
|
735
757
|
/** A quiet wheel for work still settling. */
|
|
736
758
|
var generative_default$5 = defineEntry({ Spinner: {
|
|
737
759
|
...faces$1.Spinner,
|
|
738
|
-
component: ({ props }) => createComponent
|
|
760
|
+
component: ({ props }) => createComponent(Spinner, {
|
|
739
761
|
get size() {
|
|
740
762
|
return props.size;
|
|
741
763
|
},
|
|
@@ -750,7 +772,7 @@ var generative_exports$4 = /* @__PURE__ */ __exportAll({ default: () => generati
|
|
|
750
772
|
/** Flex container for layout. direction column stacks vertically, row lays side by side. gap is a named spacing step. */
|
|
751
773
|
var generative_default$4 = defineEntry({ Stack: {
|
|
752
774
|
...faces$1.Stack,
|
|
753
|
-
component: ({ props, children }) => createComponent
|
|
775
|
+
component: ({ props, children }) => createComponent(Stack, {
|
|
754
776
|
get direction() {
|
|
755
777
|
return props.direction ?? "column";
|
|
756
778
|
},
|
|
@@ -777,21 +799,21 @@ var generative_exports$3 = /* @__PURE__ */ __exportAll({ default: () => generati
|
|
|
777
799
|
/** One loud figure with its quiet label and an optional delta. */
|
|
778
800
|
var generative_default$3 = defineEntry({ Stat: {
|
|
779
801
|
...faces$1.Stat,
|
|
780
|
-
component: ({ props }) => createComponent
|
|
802
|
+
component: ({ props }) => createComponent(Stat.Root, { get children() {
|
|
781
803
|
return [
|
|
782
|
-
createComponent
|
|
804
|
+
createComponent(Stat.Label, { get children() {
|
|
783
805
|
return props.label;
|
|
784
806
|
} }),
|
|
785
|
-
createComponent
|
|
807
|
+
createComponent(Stat.Value, { get children() {
|
|
786
808
|
return props.value;
|
|
787
809
|
} }),
|
|
788
|
-
createComponent
|
|
810
|
+
createComponent(Show, {
|
|
789
811
|
keyed: true,
|
|
790
812
|
get when() {
|
|
791
813
|
return props.change != null;
|
|
792
814
|
},
|
|
793
815
|
get children() {
|
|
794
|
-
return createComponent
|
|
816
|
+
return createComponent(Stat.Delta, {
|
|
795
817
|
get direction() {
|
|
796
818
|
return props.direction ?? "flat";
|
|
797
819
|
},
|
|
@@ -812,25 +834,17 @@ var generative_default$2 = defineEntry({ Switch: {
|
|
|
812
834
|
...faces$1.Switch,
|
|
813
835
|
component: ({ props, bindings }) => {
|
|
814
836
|
const [checked, setChecked] = useBound(props.checked, bindings?.checked);
|
|
815
|
-
return createComponent
|
|
837
|
+
return createComponent(Switch, {
|
|
816
838
|
get checked() {
|
|
817
839
|
return checked ?? false;
|
|
818
840
|
},
|
|
841
|
+
get label() {
|
|
842
|
+
return props.label;
|
|
843
|
+
},
|
|
819
844
|
get disabled() {
|
|
820
845
|
return props.disabled;
|
|
821
846
|
},
|
|
822
|
-
onCheckedChange: (
|
|
823
|
-
get children() {
|
|
824
|
-
return [
|
|
825
|
-
createComponent$1(Switch.Control, { get children() {
|
|
826
|
-
return createComponent$1(Switch.Thumb, {});
|
|
827
|
-
} }),
|
|
828
|
-
createComponent$1(Switch.Label, { get children() {
|
|
829
|
-
return props.label;
|
|
830
|
-
} }),
|
|
831
|
-
createComponent$1(Switch.HiddenInput, {})
|
|
832
|
-
];
|
|
833
|
-
}
|
|
847
|
+
onCheckedChange: (next) => setChecked(next)
|
|
834
848
|
});
|
|
835
849
|
}
|
|
836
850
|
} });
|
|
@@ -842,7 +856,7 @@ var generative_default$1 = defineEntry({ Textarea: {
|
|
|
842
856
|
...faces$1.Textarea,
|
|
843
857
|
component: ({ props, bindings }) => {
|
|
844
858
|
const [value, setValue] = useBound(props.value, bindings?.value);
|
|
845
|
-
return labelled(props.label, createComponent
|
|
859
|
+
return labelled(props.label, createComponent(Textarea, {
|
|
846
860
|
get value() {
|
|
847
861
|
return value ?? "";
|
|
848
862
|
},
|
|
@@ -866,7 +880,7 @@ var generative_exports = /* @__PURE__ */ __exportAll({ default: () => generative
|
|
|
866
880
|
var generative_default = defineEntry({
|
|
867
881
|
Heading: {
|
|
868
882
|
...faces$1.Heading,
|
|
869
|
-
component: ({ props }) => createComponent
|
|
883
|
+
component: ({ props }) => createComponent(Typography.Heading, {
|
|
870
884
|
get class() {
|
|
871
885
|
return headingClass[props.level ?? "2"];
|
|
872
886
|
},
|
|
@@ -879,7 +893,7 @@ var generative_default = defineEntry({
|
|
|
879
893
|
...faces$1.Text,
|
|
880
894
|
component: ({ props }) => {
|
|
881
895
|
const Voice = textVoices[props.variant ?? "body"];
|
|
882
|
-
return createComponent
|
|
896
|
+
return createComponent(Voice, { get children() {
|
|
883
897
|
return props.text;
|
|
884
898
|
} });
|
|
885
899
|
}
|
|
@@ -892,12 +906,15 @@ var generative_default = defineEntry({
|
|
|
892
906
|
* meet: one glob picks the faces up, so a family that lands in the
|
|
893
907
|
* package is in the vocabulary without anyone editing this file. */
|
|
894
908
|
const modules = /* #__PURE__ */ Object.assign({
|
|
895
|
-
"../components/alert/generative.tsx": generative_exports$
|
|
896
|
-
"../components/avatar/generative.tsx": generative_exports$
|
|
897
|
-
"../components/badge/generative.tsx": generative_exports$
|
|
898
|
-
"../components/
|
|
899
|
-
"../components/
|
|
900
|
-
"../components/
|
|
909
|
+
"../components/alert/generative.tsx": generative_exports$20,
|
|
910
|
+
"../components/avatar/generative.tsx": generative_exports$19,
|
|
911
|
+
"../components/badge/generative.tsx": generative_exports$18,
|
|
912
|
+
"../components/banner/generative.tsx": generative_exports$17,
|
|
913
|
+
"../components/breadcrumb/generative.tsx": generative_exports$16,
|
|
914
|
+
"../components/button/generative.tsx": generative_exports$15,
|
|
915
|
+
"../components/card/generative.tsx": generative_exports$14,
|
|
916
|
+
"../components/checkbox/generative.tsx": generative_exports$13,
|
|
917
|
+
"../components/float-button/generative.tsx": generative_exports$12,
|
|
901
918
|
"../components/input/generative.tsx": generative_exports$11,
|
|
902
919
|
"../components/progress/generative.tsx": generative_exports$10,
|
|
903
920
|
"../components/radio-group/generative.tsx": generative_exports$9,
|