@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.
@@ -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 "@solidjs/web";
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$1(Stack, {
373
+ return label ? createComponent(Stack, {
344
374
  gap: "xs",
345
375
  get children() {
346
- return [createComponent$1(Typography.Label, { get children() {
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$17 = /* @__PURE__ */ __exportAll({ default: () => generative_default$17 });
384
+ var generative_exports$20 = /* @__PURE__ */ __exportAll({ default: () => generative_default$20 });
355
385
  /** A bordered notice; status picks the pigment. */
356
- var generative_default$17 = defineEntry({ Alert: {
386
+ var generative_default$20 = defineEntry({ Alert: {
357
387
  ...faces$1.Alert,
358
- component: ({ props }) => createComponent$1(Alert.Root, {
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$1(Alert.Icon, {}), createComponent$1(Alert.Body, { get children() {
364
- return [createComponent$1(Alert.Title, { get children() {
393
+ return [createComponent(Alert.Icon, {}), createComponent(Alert.Body, { get children() {
394
+ return [createComponent(Alert.Title, { get children() {
365
395
  return props.title;
366
- } }), createComponent$1(Show, {
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$1(Alert.Description, { get children() {
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$16 = /* @__PURE__ */ __exportAll({ default: () => generative_default$16 });
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$16 = defineEntry({ Avatar: {
415
+ var generative_default$19 = defineEntry({ Avatar: {
386
416
  ...faces$1.Avatar,
387
- component: ({ props }) => createComponent$1(Avatar.Root, {
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 children() {
392
- return [createComponent$1(Show, {
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$15 = /* @__PURE__ */ __exportAll({ default: () => generative_default$15 });
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$15 = defineEntry({ Badge: {
433
+ var generative_default$18 = defineEntry({ Badge: {
418
434
  ...faces$1.Badge,
419
- component: ({ props }) => createComponent$1(Badge, {
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$14 = /* @__PURE__ */ __exportAll({ default: () => generative_default$14 });
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$14 = defineEntry({ Button: {
491
+ var generative_default$15 = defineEntry({ Button: {
436
492
  ...faces$1.Button,
437
- component: ({ props, emit }) => createComponent$1(Button, {
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$13 = /* @__PURE__ */ __exportAll({ default: () => generative_default$13 });
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$13 = defineEntry({ Card: {
516
+ var generative_default$14 = defineEntry({ Card: {
461
517
  ...faces$1.Card,
462
- component: ({ props, children }) => createComponent$1(Card.Root, { get children() {
463
- return [createComponent$1(Show, {
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$1(Card.Header, { get children() {
470
- return [createComponent$1(Show, {
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$1(Card.Title, { get children() {
532
+ return createComponent(Card.Title, { get children() {
477
533
  return props.title;
478
534
  } });
479
535
  }
480
- }), createComponent$1(Show, {
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$1(Card.Description, { get children() {
542
+ return createComponent(Card.Description, { get children() {
487
543
  return props.description;
488
544
  } });
489
545
  }
490
546
  })];
491
547
  } });
492
548
  }
493
- }), createComponent$1(Card.Content, { get children() {
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$12 = /* @__PURE__ */ __exportAll({ default: () => generative_default$12 });
556
+ var generative_exports$13 = /* @__PURE__ */ __exportAll({ default: () => generative_default$13 });
501
557
  /** One independent box with its label. */
502
- var generative_default$12 = defineEntry({ Checkbox: {
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$1(Checkbox.Root, {
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$1(Checkbox.Control, { get children() {
516
- return createComponent$1(Checkbox.Indicator, { get children() {
571
+ createComponent(Checkbox.Control, { get children() {
572
+ return createComponent(Checkbox.Indicator, { get children() {
517
573
  return mark;
518
574
  } });
519
575
  } }),
520
- createComponent$1(Checkbox.Label, { get children() {
576
+ createComponent(Checkbox.Label, { get children() {
521
577
  return props.label;
522
578
  } }),
523
- createComponent$1(Checkbox.HiddenInput, {})
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$1(Input, {
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$1(Progress.Root, {
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 children() {
568
- return [createComponent$1(Show, {
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 boxes where exactly one may hold. */
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
- const list = createComponent$1(Stack, {
597
- gap: "sm",
598
- get children() {
599
- return createComponent(For, {
600
- get each() {
601
- return values();
602
- },
603
- children: (value) => createComponent$1(RadioGroup.Item, {
604
- get value() {
605
- return value;
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
- const collection = collectionFor(props.options);
639
- return labelled(props.label, createComponent$1(Select.Root, {
640
- collection,
641
- get disabled() {
642
- return props.disabled;
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 : typeof value === "string" ? [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: (details) => setValue(props.multiple ? details.value : details.value[0] ?? ""),
651
- get children() {
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$1(Separator, {
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 }) => labelled(props.label, createComponent$1(Slider.Root, {
736
+ component: ({ props }) => createComponent(Slider, {
737
+ get label() {
738
+ return props.label;
739
+ },
711
740
  get defaultValue() {
712
- return [props.value ?? 50];
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$1(Spinner, {
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$1(Stack, {
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$1(Stat.Root, { get children() {
802
+ component: ({ props }) => createComponent(Stat.Root, { get children() {
781
803
  return [
782
- createComponent$1(Stat.Label, { get children() {
804
+ createComponent(Stat.Label, { get children() {
783
805
  return props.label;
784
806
  } }),
785
- createComponent$1(Stat.Value, { get children() {
807
+ createComponent(Stat.Value, { get children() {
786
808
  return props.value;
787
809
  } }),
788
- createComponent$1(Show, {
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$1(Stat.Delta, {
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$1(Switch.Root, {
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: (details) => setChecked(details.checked),
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$1(Textarea, {
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$1(Typography.Heading, {
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$1(Voice, { get children() {
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$17,
896
- "../components/avatar/generative.tsx": generative_exports$16,
897
- "../components/badge/generative.tsx": generative_exports$15,
898
- "../components/button/generative.tsx": generative_exports$14,
899
- "../components/card/generative.tsx": generative_exports$13,
900
- "../components/checkbox/generative.tsx": generative_exports$12,
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,