@agentero/design-system 0.9.8 → 0.11.0
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/mcp/manifests/components.html +565 -36
- package/mcp/manifests/components.json +1 -1
- package/package.json +12 -3
- package/src/accordion/accordion.d.ts +46 -0
- package/src/accordion/accordion.js +54 -0
- package/src/accordion/icons.d.ts +10 -0
- package/src/accordion/icons.js +16 -0
- package/src/accordion/index.d.ts +2 -0
- package/src/accordion/index.js +2 -0
- package/src/alert/alert.js +30 -30
- package/src/avatar/avatar.js +24 -24
- package/src/button/button.js +11 -11
- package/src/data-table/data-table.js +40 -40
- package/src/data-table/table.js +33 -33
- package/src/tag/index.d.ts +2 -0
- package/src/tag/index.js +2 -0
- package/src/tag/tag.d.ts +160 -0
- package/src/tag/tag.js +129 -0
- package/theme/base.css +70 -0
|
@@ -576,17 +576,172 @@
|
|
|
576
576
|
<header>
|
|
577
577
|
<div class="wrap">
|
|
578
578
|
<h1>Manifest Debugger</h1>
|
|
579
|
-
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">
|
|
579
|
+
<div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">12 components ok</span><span class="filter-pill ok" aria-disabled="true">127 stories ok</span></div>
|
|
580
580
|
</div>
|
|
581
581
|
</header>
|
|
582
582
|
<main>
|
|
583
583
|
<div class="wrap">
|
|
584
584
|
<div class="note ok" style="margin-bottom: 16px;">
|
|
585
|
-
Using <code>react-docgen-typescript</code>. Generation took <strong>
|
|
585
|
+
Using <code>react-docgen-typescript</code>. Generation took <strong>3.0s</strong>.
|
|
586
586
|
</div>
|
|
587
587
|
<h2 class="section-title">Components</h2>
|
|
588
588
|
<div class="grid" role="list">
|
|
589
589
|
|
|
590
|
+
<article
|
|
591
|
+
class="card
|
|
592
|
+
no-error
|
|
593
|
+
no-info
|
|
594
|
+
no-story-error
|
|
595
|
+
no-doc-error"
|
|
596
|
+
role="listitem"
|
|
597
|
+
aria-label="Accordion.Root">
|
|
598
|
+
<div class="head">
|
|
599
|
+
<div class="title">
|
|
600
|
+
<h2><span class="status-dot dot-ok"></span> Accordion.Root</h2>
|
|
601
|
+
<div class="badges">
|
|
602
|
+
|
|
603
|
+
|
|
604
|
+
<label for="c-0-components-accordion-stories" class="badge ok as-toggle">7 stories</label>
|
|
605
|
+
|
|
606
|
+
</div>
|
|
607
|
+
</div>
|
|
608
|
+
<div class="meta" title="./src/accordion/accordion.stories.tsx">components-accordion · ./src/accordion/accordion.stories.tsx</div>
|
|
609
|
+
|
|
610
|
+
<div class="hint">Stacked, collapsible sections built on Radix UI's Accordion (keyboard nav and ARIA come for free). Compose `Root` with `Item`s, each holding a `Trigger` and `Content`. `type="single"` (optionally `collapsible`) opens one at a time; `type="multiple"` opens sections independently. `enclosed` renders the group as a bordered card.</div>
|
|
611
|
+
|
|
612
|
+
</div>
|
|
613
|
+
|
|
614
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
615
|
+
|
|
616
|
+
|
|
617
|
+
<input id="c-0-components-accordion-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
618
|
+
|
|
619
|
+
|
|
620
|
+
|
|
621
|
+
<div class="panels">
|
|
622
|
+
|
|
623
|
+
|
|
624
|
+
|
|
625
|
+
|
|
626
|
+
<div class="panel panel-stories">
|
|
627
|
+
|
|
628
|
+
|
|
629
|
+
|
|
630
|
+
<div class="note ok">
|
|
631
|
+
<div class="row">
|
|
632
|
+
<span class="ex-name">Imports</span>
|
|
633
|
+
</div>
|
|
634
|
+
<pre><code>import { Accordion, IconKeyboardArrowDown } from "@agentero/design-system";</code></pre>
|
|
635
|
+
</div>
|
|
636
|
+
|
|
637
|
+
|
|
638
|
+
<div class="note ok">
|
|
639
|
+
<div class="row">
|
|
640
|
+
<span class="ex-name">Default</span>
|
|
641
|
+
<span class="badge ok">story ok</span>
|
|
642
|
+
</div>
|
|
643
|
+
|
|
644
|
+
<div class="hint">Exclusive accordion: one item open at a time, `collapsible` lets it close.</div>
|
|
645
|
+
<pre><code>const Default = () => <Accordion.Root type="single" collapsible enclosed={false} disabled={false}>
|
|
646
|
+
<FaqItems />
|
|
647
|
+
</Accordion.Root>;</code></pre>
|
|
648
|
+
</div>
|
|
649
|
+
<div class="note ok">
|
|
650
|
+
<div class="row">
|
|
651
|
+
<span class="ex-name">Multiple</span>
|
|
652
|
+
<span class="badge ok">story ok</span>
|
|
653
|
+
</div>
|
|
654
|
+
|
|
655
|
+
<div class="hint">`type="multiple"` lets several sections stay open at once.</div>
|
|
656
|
+
<pre><code>const Multiple = () => (
|
|
657
|
+
<Accordion.Root type="multiple" defaultValue={['covered', 'payment']}>
|
|
658
|
+
<FaqItems />
|
|
659
|
+
</Accordion.Root>
|
|
660
|
+
);</code></pre>
|
|
661
|
+
</div>
|
|
662
|
+
<div class="note ok">
|
|
663
|
+
<div class="row">
|
|
664
|
+
<span class="ex-name">Enclosed</span>
|
|
665
|
+
<span class="badge ok">story ok</span>
|
|
666
|
+
</div>
|
|
667
|
+
|
|
668
|
+
<div class="hint">`enclosed` wraps the group in a bordered card (default borderless on top).</div>
|
|
669
|
+
<pre><code>const Enclosed = () => (
|
|
670
|
+
<div className="flex flex-col gap-8">
|
|
671
|
+
<Accordion.Root type="multiple" defaultValue={['covered']}>
|
|
672
|
+
<FaqItems />
|
|
673
|
+
</Accordion.Root>
|
|
674
|
+
<Accordion.Root type="multiple" enclosed defaultValue={['claim']}>
|
|
675
|
+
<FaqItems />
|
|
676
|
+
</Accordion.Root>
|
|
677
|
+
</div>
|
|
678
|
+
);</code></pre>
|
|
679
|
+
</div>
|
|
680
|
+
<div class="note ok">
|
|
681
|
+
<div class="row">
|
|
682
|
+
<span class="ex-name">Custom Trigger</span>
|
|
683
|
+
<span class="badge ok">story ok</span>
|
|
684
|
+
</div>
|
|
685
|
+
|
|
686
|
+
<div class="hint">`asChild` delegates the trigger to a custom element; the built-in chevron is omitted.</div>
|
|
687
|
+
<pre><code>const CustomTrigger = () => (
|
|
688
|
+
<Accordion.Root type="single" collapsible defaultValue="covered">
|
|
689
|
+
<Accordion.Item value="covered">
|
|
690
|
+
<Accordion.Trigger asChild>
|
|
691
|
+
<button className="group flex w-full items-center gap-2 py-4 text-left text-base font-semibold">
|
|
692
|
+
<IconKeyboardArrowDown className="size-5 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180" />
|
|
693
|
+
What is covered?
|
|
694
|
+
</button>
|
|
695
|
+
</Accordion.Trigger>
|
|
696
|
+
<Accordion.Content>{FAQS[0].answer}</Accordion.Content>
|
|
697
|
+
</Accordion.Item>
|
|
698
|
+
</Accordion.Root>
|
|
699
|
+
);</code></pre>
|
|
700
|
+
</div>
|
|
701
|
+
<div class="note ok">
|
|
702
|
+
<div class="row">
|
|
703
|
+
<span class="ex-name">Styled Titles</span>
|
|
704
|
+
<span class="badge ok">story ok</span>
|
|
705
|
+
</div>
|
|
706
|
+
|
|
707
|
+
<div class="hint">The consumer controls title weight/size via the children passed to `Trigger`.</div>
|
|
708
|
+
<pre><code>const StyledTitles = () => <Accordion.Root type="single" collapsible>
|
|
709
|
+
{FAQS.map(({ value, question, answer }) => (
|
|
710
|
+
<Accordion.Item key={value} value={value}>
|
|
711
|
+
<Accordion.Trigger>
|
|
712
|
+
<span className="text-lg font-bold">{question}</span>
|
|
713
|
+
</Accordion.Trigger>
|
|
714
|
+
<Accordion.Content>{answer}</Accordion.Content>
|
|
715
|
+
</Accordion.Item>
|
|
716
|
+
))}
|
|
717
|
+
</Accordion.Root>;</code></pre>
|
|
718
|
+
</div>
|
|
719
|
+
<div class="note ok">
|
|
720
|
+
<div class="row">
|
|
721
|
+
<span class="ex-name">Expand Collapse</span>
|
|
722
|
+
<span class="badge ok">story ok</span>
|
|
723
|
+
</div>
|
|
724
|
+
|
|
725
|
+
<div class="hint">`collapsible` lets clicking the open item close it (reach an all-closed state).</div>
|
|
726
|
+
<pre><code>const ExpandCollapse = () => <Accordion.Root type="single" collapsible>
|
|
727
|
+
<FaqItems />
|
|
728
|
+
</Accordion.Root>;</code></pre>
|
|
729
|
+
</div>
|
|
730
|
+
<div class="note ok">
|
|
731
|
+
<div class="row">
|
|
732
|
+
<span class="ex-name">Non Collapsible</span>
|
|
733
|
+
<span class="badge ok">story ok</span>
|
|
734
|
+
</div>
|
|
735
|
+
|
|
736
|
+
<div class="hint">Without `collapsible`, clicking the already-open item keeps it open.</div>
|
|
737
|
+
<pre><code>const NonCollapsible = () => <Accordion.Root type="single" collapsible={false} defaultValue="covered">
|
|
738
|
+
<FaqItems />
|
|
739
|
+
</Accordion.Root>;</code></pre>
|
|
740
|
+
</div>
|
|
741
|
+
</div>
|
|
742
|
+
|
|
743
|
+
</div>
|
|
744
|
+
</article>
|
|
590
745
|
<article
|
|
591
746
|
class="card
|
|
592
747
|
no-error
|
|
@@ -599,9 +754,9 @@
|
|
|
599
754
|
<div class="title">
|
|
600
755
|
<h2><span class="status-dot dot-ok"></span> Alert</h2>
|
|
601
756
|
<div class="badges">
|
|
602
|
-
<label for="c-
|
|
757
|
+
<label for="c-1-components-alert-props" class="badge ok as-toggle">6 prop types</label>
|
|
603
758
|
|
|
604
|
-
<label for="c-
|
|
759
|
+
<label for="c-1-components-alert-stories" class="badge ok as-toggle">23 stories</label>
|
|
605
760
|
|
|
606
761
|
</div>
|
|
607
762
|
</div>
|
|
@@ -614,9 +769,9 @@
|
|
|
614
769
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
615
770
|
|
|
616
771
|
|
|
617
|
-
<input id="c-
|
|
772
|
+
<input id="c-1-components-alert-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
618
773
|
|
|
619
|
-
<input id="c-
|
|
774
|
+
<input id="c-1-components-alert-props" class="tg tg-props" type="checkbox" hidden />
|
|
620
775
|
|
|
621
776
|
<div class="panels">
|
|
622
777
|
|
|
@@ -1153,9 +1308,9 @@ size?: AlertSizeType = sm</code></pre>
|
|
|
1153
1308
|
<div class="title">
|
|
1154
1309
|
<h2><span class="status-dot dot-ok"></span> Avatar</h2>
|
|
1155
1310
|
<div class="badges">
|
|
1156
|
-
<label for="c-
|
|
1311
|
+
<label for="c-2-components-avatar-props" class="badge ok as-toggle">8 prop types</label>
|
|
1157
1312
|
|
|
1158
|
-
<label for="c-
|
|
1313
|
+
<label for="c-2-components-avatar-stories" class="badge ok as-toggle">22 stories</label>
|
|
1159
1314
|
|
|
1160
1315
|
</div>
|
|
1161
1316
|
</div>
|
|
@@ -1168,9 +1323,9 @@ size?: AlertSizeType = sm</code></pre>
|
|
|
1168
1323
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
1169
1324
|
|
|
1170
1325
|
|
|
1171
|
-
<input id="c-
|
|
1326
|
+
<input id="c-2-components-avatar-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
1172
1327
|
|
|
1173
|
-
<input id="c-
|
|
1328
|
+
<input id="c-2-components-avatar-props" class="tg tg-props" type="checkbox" hidden />
|
|
1174
1329
|
|
|
1175
1330
|
<div class="panels">
|
|
1176
1331
|
|
|
@@ -1569,9 +1724,9 @@ variant?: "circle" | "square" | "pillow" | "p
|
|
|
1569
1724
|
<div class="title">
|
|
1570
1725
|
<h2><span class="status-dot dot-ok"></span> Button</h2>
|
|
1571
1726
|
<div class="badges">
|
|
1572
|
-
<label for="c-
|
|
1727
|
+
<label for="c-3-components-button-props" class="badge ok as-toggle">12 prop types</label>
|
|
1573
1728
|
|
|
1574
|
-
<label for="c-
|
|
1729
|
+
<label for="c-3-components-button-stories" class="badge ok as-toggle">10 stories</label>
|
|
1575
1730
|
|
|
1576
1731
|
</div>
|
|
1577
1732
|
</div>
|
|
@@ -1584,9 +1739,9 @@ variant?: "circle" | "square" | "pillow" | "p
|
|
|
1584
1739
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
1585
1740
|
|
|
1586
1741
|
|
|
1587
|
-
<input id="c-
|
|
1742
|
+
<input id="c-3-components-button-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
1588
1743
|
|
|
1589
|
-
<input id="c-
|
|
1744
|
+
<input id="c-3-components-button-props" class="tg tg-props" type="checkbox" hidden />
|
|
1590
1745
|
|
|
1591
1746
|
<div class="panels">
|
|
1592
1747
|
|
|
@@ -1937,7 +2092,7 @@ variant?: ButtonVariantType</code></pre>
|
|
|
1937
2092
|
<div class="badges">
|
|
1938
2093
|
|
|
1939
2094
|
|
|
1940
|
-
<label for="c-
|
|
2095
|
+
<label for="c-4-components-datatable-stories" class="badge ok as-toggle">4 stories</label>
|
|
1941
2096
|
|
|
1942
2097
|
</div>
|
|
1943
2098
|
</div>
|
|
@@ -1950,7 +2105,7 @@ variant?: ButtonVariantType</code></pre>
|
|
|
1950
2105
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
1951
2106
|
|
|
1952
2107
|
|
|
1953
|
-
<input id="c-
|
|
2108
|
+
<input id="c-4-components-datatable-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
1954
2109
|
|
|
1955
2110
|
|
|
1956
2111
|
|
|
@@ -2080,9 +2235,9 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2080
2235
|
<div class="title">
|
|
2081
2236
|
<h2><span class="status-dot dot-ok"></span> Divider</h2>
|
|
2082
2237
|
<div class="badges">
|
|
2083
|
-
<label for="c-
|
|
2238
|
+
<label for="c-5-components-divider-props" class="badge ok as-toggle">2 prop types</label>
|
|
2084
2239
|
|
|
2085
|
-
<label for="c-
|
|
2240
|
+
<label for="c-5-components-divider-stories" class="badge ok as-toggle">10 stories</label>
|
|
2086
2241
|
|
|
2087
2242
|
</div>
|
|
2088
2243
|
</div>
|
|
@@ -2095,9 +2250,9 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2095
2250
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2096
2251
|
|
|
2097
2252
|
|
|
2098
|
-
<input id="c-
|
|
2253
|
+
<input id="c-5-components-divider-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2099
2254
|
|
|
2100
|
-
<input id="c-
|
|
2255
|
+
<input id="c-5-components-divider-props" class="tg tg-props" type="checkbox" hidden />
|
|
2101
2256
|
|
|
2102
2257
|
<div class="panels">
|
|
2103
2258
|
|
|
@@ -2377,7 +2532,7 @@ label?: ReactNode</code></pre>
|
|
|
2377
2532
|
<div class="badges">
|
|
2378
2533
|
|
|
2379
2534
|
|
|
2380
|
-
<label for="c-
|
|
2535
|
+
<label for="c-6-components-dropdownmenu-stories" class="badge ok as-toggle">7 stories</label>
|
|
2381
2536
|
|
|
2382
2537
|
</div>
|
|
2383
2538
|
</div>
|
|
@@ -2390,7 +2545,7 @@ label?: ReactNode</code></pre>
|
|
|
2390
2545
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2391
2546
|
|
|
2392
2547
|
|
|
2393
|
-
<input id="c-
|
|
2548
|
+
<input id="c-6-components-dropdownmenu-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2394
2549
|
|
|
2395
2550
|
|
|
2396
2551
|
|
|
@@ -2759,9 +2914,9 @@ label?: ReactNode</code></pre>
|
|
|
2759
2914
|
<div class="title">
|
|
2760
2915
|
<h2><span class="status-dot dot-ok"></span> Loading</h2>
|
|
2761
2916
|
<div class="badges">
|
|
2762
|
-
<label for="c-
|
|
2917
|
+
<label for="c-7-components-loading-props" class="badge ok as-toggle">1 prop type</label>
|
|
2763
2918
|
|
|
2764
|
-
<label for="c-
|
|
2919
|
+
<label for="c-7-components-loading-stories" class="badge ok as-toggle">7 stories</label>
|
|
2765
2920
|
|
|
2766
2921
|
</div>
|
|
2767
2922
|
</div>
|
|
@@ -2774,9 +2929,9 @@ label?: ReactNode</code></pre>
|
|
|
2774
2929
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2775
2930
|
|
|
2776
2931
|
|
|
2777
|
-
<input id="c-
|
|
2932
|
+
<input id="c-7-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2778
2933
|
|
|
2779
|
-
<input id="c-
|
|
2934
|
+
<input id="c-7-components-loading-props" class="tg tg-props" type="checkbox" hidden />
|
|
2780
2935
|
|
|
2781
2936
|
<div class="panels">
|
|
2782
2937
|
|
|
@@ -2916,9 +3071,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
2916
3071
|
<div class="title">
|
|
2917
3072
|
<h2><span class="status-dot dot-ok"></span> Pagination</h2>
|
|
2918
3073
|
<div class="badges">
|
|
2919
|
-
<label for="c-
|
|
3074
|
+
<label for="c-8-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
|
|
2920
3075
|
|
|
2921
|
-
<label for="c-
|
|
3076
|
+
<label for="c-8-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
|
|
2922
3077
|
|
|
2923
3078
|
</div>
|
|
2924
3079
|
</div>
|
|
@@ -2931,9 +3086,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
2931
3086
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2932
3087
|
|
|
2933
3088
|
|
|
2934
|
-
<input id="c-
|
|
3089
|
+
<input id="c-8-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2935
3090
|
|
|
2936
|
-
<input id="c-
|
|
3091
|
+
<input id="c-8-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
|
|
2937
3092
|
|
|
2938
3093
|
<div class="panels">
|
|
2939
3094
|
|
|
@@ -3079,7 +3234,7 @@ totalCount: number</code></pre>
|
|
|
3079
3234
|
<div class="badges">
|
|
3080
3235
|
|
|
3081
3236
|
|
|
3082
|
-
<label for="c-
|
|
3237
|
+
<label for="c-9-components-table-stories" class="badge ok as-toggle">9 stories</label>
|
|
3083
3238
|
|
|
3084
3239
|
</div>
|
|
3085
3240
|
</div>
|
|
@@ -3092,7 +3247,7 @@ totalCount: number</code></pre>
|
|
|
3092
3247
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3093
3248
|
|
|
3094
3249
|
|
|
3095
|
-
<input id="c-
|
|
3250
|
+
<input id="c-9-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3096
3251
|
|
|
3097
3252
|
|
|
3098
3253
|
|
|
@@ -3254,6 +3409,380 @@ import { Fragment } from "react";</code></pre>
|
|
|
3254
3409
|
|
|
3255
3410
|
</div>
|
|
3256
3411
|
</article>
|
|
3412
|
+
<article
|
|
3413
|
+
class="card
|
|
3414
|
+
no-error
|
|
3415
|
+
no-info
|
|
3416
|
+
no-story-error
|
|
3417
|
+
no-doc-error"
|
|
3418
|
+
role="listitem"
|
|
3419
|
+
aria-label="Tag">
|
|
3420
|
+
<div class="head">
|
|
3421
|
+
<div class="title">
|
|
3422
|
+
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
3423
|
+
<div class="badges">
|
|
3424
|
+
<label for="c-10-components-tag-props" class="badge ok as-toggle">6 prop types</label>
|
|
3425
|
+
|
|
3426
|
+
<label for="c-10-components-tag-stories" class="badge ok as-toggle">10 stories</label>
|
|
3427
|
+
|
|
3428
|
+
</div>
|
|
3429
|
+
</div>
|
|
3430
|
+
<div class="meta" title="./src/tag/tag.stories.tsx">components-tag · ./src/tag/tag.stories.tsx</div>
|
|
3431
|
+
|
|
3432
|
+
<div class="hint">Tag is a compact semantic label for statuses, categories, counts, and attributes. Pick `color` for meaning, `variant` for fill emphasis, and `size` for prominence. A plain Tag is a static badge; pass `asChild` to make it an interactive link or button, which adds the pointer cursor and hover fill.</div>
|
|
3433
|
+
|
|
3434
|
+
</div>
|
|
3435
|
+
|
|
3436
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3437
|
+
|
|
3438
|
+
|
|
3439
|
+
<input id="c-10-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3440
|
+
|
|
3441
|
+
<input id="c-10-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
3442
|
+
|
|
3443
|
+
<div class="panels">
|
|
3444
|
+
|
|
3445
|
+
|
|
3446
|
+
|
|
3447
|
+
<div class="panel panel-props">
|
|
3448
|
+
<div class="note ok">
|
|
3449
|
+
<div class="row">
|
|
3450
|
+
<span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
|
|
3451
|
+
<span class="badge ok">6 prop types</span>
|
|
3452
|
+
</div>
|
|
3453
|
+
<pre><code>Component: src/tag/tag.tsx::Tag</code></pre>
|
|
3454
|
+
<pre><code>Props:</code></pre>
|
|
3455
|
+
<pre><code>/**
|
|
3456
|
+
* Render the single child element instead of a `<span>` (via Radix `Slot`),
|
|
3457
|
+
* keeping Tag framework-agnostic. Marks the Tag interactive: adds the pointer
|
|
3458
|
+
* cursor and the hover fill (a plain `<span>` Tag is a static badge).
|
|
3459
|
+
*/
|
|
3460
|
+
asChild?: boolean
|
|
3461
|
+
|
|
3462
|
+
color?: "neutral" | "danger" | "warning" | "creative" | "dynamic" | "playful" | "positive" | "informative"
|
|
3463
|
+
|
|
3464
|
+
pill?: boolean
|
|
3465
|
+
|
|
3466
|
+
size?: "sm" | "md" | "xs"
|
|
3467
|
+
|
|
3468
|
+
truncate?: boolean
|
|
3469
|
+
|
|
3470
|
+
variant?: "ghost" | "secondary" | "tertiary" | "invisible"</code></pre>
|
|
3471
|
+
</div>
|
|
3472
|
+
</div>
|
|
3473
|
+
|
|
3474
|
+
<div class="panel panel-stories">
|
|
3475
|
+
|
|
3476
|
+
|
|
3477
|
+
|
|
3478
|
+
<div class="note ok">
|
|
3479
|
+
<div class="row">
|
|
3480
|
+
<span class="ex-name">Imports</span>
|
|
3481
|
+
</div>
|
|
3482
|
+
<pre><code>import { Tag } from "@agentero/design-system";</code></pre>
|
|
3483
|
+
</div>
|
|
3484
|
+
|
|
3485
|
+
|
|
3486
|
+
<div class="note ok">
|
|
3487
|
+
<div class="row">
|
|
3488
|
+
<span class="ex-name">Default</span>
|
|
3489
|
+
<span class="badge ok">story ok</span>
|
|
3490
|
+
</div>
|
|
3491
|
+
<div>Default args playground for Tag</div>
|
|
3492
|
+
<div class="hint">Args-controlled playground. Toggle `color`, `variant`, `size`, `pill`, and `truncate` from the Controls panel to explore every visual combination.</div>
|
|
3493
|
+
<pre><code>const Default = () => <Tag color="neutral" variant="secondary" size="sm">Default</Tag>;</code></pre>
|
|
3494
|
+
</div>
|
|
3495
|
+
<div class="note ok">
|
|
3496
|
+
<div class="row">
|
|
3497
|
+
<span class="ex-name">Sizes</span>
|
|
3498
|
+
<span class="badge ok">story ok</span>
|
|
3499
|
+
</div>
|
|
3500
|
+
<div>All three sizes across icon-only, icon + text, and text-only</div>
|
|
3501
|
+
<div class="hint">The three sizes — `xs` (20px), `sm` (24px, default), and `md` (32px) — each shown icon-only, icon + text, and text-only so the type and icon scale are visible.</div>
|
|
3502
|
+
<pre><code>const Sizes = () => (
|
|
3503
|
+
<Stack>
|
|
3504
|
+
{(['xs', 'sm', 'md'] as const).map(size => (
|
|
3505
|
+
<Stack gap="0.5rem" key={size}>
|
|
3506
|
+
<strong>{size}:</strong>
|
|
3507
|
+
<Row>
|
|
3508
|
+
<Tag
|
|
3509
|
+
size={size}
|
|
3510
|
+
color="informative"
|
|
3511
|
+
variant="secondary"
|
|
3512
|
+
role="img"
|
|
3513
|
+
aria-label={`${size} icon only`}>
|
|
3514
|
+
<IconAdd />
|
|
3515
|
+
</Tag>
|
|
3516
|
+
<Tag size={size} color="informative" variant="secondary">
|
|
3517
|
+
<IconAdd />
|
|
3518
|
+
{size}
|
|
3519
|
+
</Tag>
|
|
3520
|
+
<Tag size={size} color="informative" variant="secondary">
|
|
3521
|
+
{size}
|
|
3522
|
+
</Tag>
|
|
3523
|
+
</Row>
|
|
3524
|
+
</Stack>
|
|
3525
|
+
))}
|
|
3526
|
+
</Stack>
|
|
3527
|
+
);</code></pre>
|
|
3528
|
+
</div>
|
|
3529
|
+
<div class="note ok">
|
|
3530
|
+
<div class="row">
|
|
3531
|
+
<span class="ex-name">Styles</span>
|
|
3532
|
+
<span class="badge ok">story ok</span>
|
|
3533
|
+
</div>
|
|
3534
|
+
<div>Rounded (default) vs pill</div>
|
|
3535
|
+
<div class="hint">The `Style` axis: the default rounded corners (top row) versus `pill` fully rounded (bottom row), shown across every fill variant.</div>
|
|
3536
|
+
<pre><code>const Styles = () => (
|
|
3537
|
+
<Stack gap="0.5rem">
|
|
3538
|
+
<Row>
|
|
3539
|
+
{VARIANTS.map(variant => (
|
|
3540
|
+
<Tag key={variant} color="informative" variant={variant}>
|
|
3541
|
+
{variant}
|
|
3542
|
+
</Tag>
|
|
3543
|
+
))}
|
|
3544
|
+
</Row>
|
|
3545
|
+
<Row>
|
|
3546
|
+
{VARIANTS.map(variant => (
|
|
3547
|
+
<Tag key={variant} color="informative" variant={variant} pill>
|
|
3548
|
+
{variant}
|
|
3549
|
+
</Tag>
|
|
3550
|
+
))}
|
|
3551
|
+
</Row>
|
|
3552
|
+
</Stack>
|
|
3553
|
+
);</code></pre>
|
|
3554
|
+
</div>
|
|
3555
|
+
<div class="note ok">
|
|
3556
|
+
<div class="row">
|
|
3557
|
+
<span class="ex-name">Interactive</span>
|
|
3558
|
+
<span class="badge ok">story ok</span>
|
|
3559
|
+
</div>
|
|
3560
|
+
<div>Static badge vs interactive (asChild) hover</div>
|
|
3561
|
+
<div class="hint">Static badge vs interactive Tag. A plain `<span>` badge has no hover; pass `asChild` with a `<button>` (or `<a>`) to make it interactive — that adds the pointer cursor and reveals the hover fill on `:hover`. Hover the middle and right Tags to see it.</div>
|
|
3562
|
+
<pre><code>const Interactive = () => (
|
|
3563
|
+
<Row>
|
|
3564
|
+
<Tag color="informative" variant="secondary">
|
|
3565
|
+
badge
|
|
3566
|
+
</Tag>
|
|
3567
|
+
<Tag color="informative" variant="secondary" asChild>
|
|
3568
|
+
<button type="button">interactive</button>
|
|
3569
|
+
</Tag>
|
|
3570
|
+
<Tag color="informative" variant="secondary" asChild aria-label="add">
|
|
3571
|
+
<button type="button">
|
|
3572
|
+
<IconAdd />
|
|
3573
|
+
</button>
|
|
3574
|
+
</Tag>
|
|
3575
|
+
</Row>
|
|
3576
|
+
);</code></pre>
|
|
3577
|
+
</div>
|
|
3578
|
+
<div class="note ok">
|
|
3579
|
+
<div class="row">
|
|
3580
|
+
<span class="ex-name">Secondary</span>
|
|
3581
|
+
<span class="badge ok">story ok</span>
|
|
3582
|
+
</div>
|
|
3583
|
+
<div>`secondary` variant across all colors</div>
|
|
3584
|
+
<div class="hint">`secondary` fills with a tinted background plus a matching border, shown across every color.</div>
|
|
3585
|
+
<pre><code>const Secondary = () => (
|
|
3586
|
+
<Row>
|
|
3587
|
+
{COLORS.map(color => (
|
|
3588
|
+
<Tag key={color} variant="secondary" color={color}>
|
|
3589
|
+
{color}
|
|
3590
|
+
</Tag>
|
|
3591
|
+
))}
|
|
3592
|
+
</Row>
|
|
3593
|
+
);</code></pre>
|
|
3594
|
+
</div>
|
|
3595
|
+
<div class="note ok">
|
|
3596
|
+
<div class="row">
|
|
3597
|
+
<span class="ex-name">Tertiary</span>
|
|
3598
|
+
<span class="badge ok">story ok</span>
|
|
3599
|
+
</div>
|
|
3600
|
+
<div>`tertiary` variant across all colors</div>
|
|
3601
|
+
<div class="hint">`tertiary` (default) fills with a tinted background and no border, shown across every color.</div>
|
|
3602
|
+
<pre><code>const Tertiary = () => (
|
|
3603
|
+
<Row>
|
|
3604
|
+
{COLORS.map(color => (
|
|
3605
|
+
<Tag key={color} variant="tertiary" color={color}>
|
|
3606
|
+
{color}
|
|
3607
|
+
</Tag>
|
|
3608
|
+
))}
|
|
3609
|
+
</Row>
|
|
3610
|
+
);</code></pre>
|
|
3611
|
+
</div>
|
|
3612
|
+
<div class="note ok">
|
|
3613
|
+
<div class="row">
|
|
3614
|
+
<span class="ex-name">Ghost</span>
|
|
3615
|
+
<span class="badge ok">story ok</span>
|
|
3616
|
+
</div>
|
|
3617
|
+
<div>`ghost` variant across all colors</div>
|
|
3618
|
+
<div class="hint">`ghost` shows colored text alone with no background or border, across every color.</div>
|
|
3619
|
+
<pre><code>const Ghost = () => (
|
|
3620
|
+
<Row>
|
|
3621
|
+
{COLORS.map(color => (
|
|
3622
|
+
<Tag key={color} variant="ghost" color={color}>
|
|
3623
|
+
{color}
|
|
3624
|
+
</Tag>
|
|
3625
|
+
))}
|
|
3626
|
+
</Row>
|
|
3627
|
+
);</code></pre>
|
|
3628
|
+
</div>
|
|
3629
|
+
<div class="note ok">
|
|
3630
|
+
<div class="row">
|
|
3631
|
+
<span class="ex-name">Invisible</span>
|
|
3632
|
+
<span class="badge ok">story ok</span>
|
|
3633
|
+
</div>
|
|
3634
|
+
<div>`invisible` variant as span and as interactive button</div>
|
|
3635
|
+
<div class="hint">`invisible` stays fully transparent until hovered, then reveals its fill. The top row renders plain `<span>` Tags; the bottom row renders interactive Tags via `asChild` with a `<button>` child.</div>
|
|
3636
|
+
<pre><code>const Invisible = () => (
|
|
3637
|
+
<Stack gap="0.5rem">
|
|
3638
|
+
<Row>
|
|
3639
|
+
{COLORS.map(color => (
|
|
3640
|
+
<Tag key={color} variant="invisible" color={color}>
|
|
3641
|
+
{color}
|
|
3642
|
+
</Tag>
|
|
3643
|
+
))}
|
|
3644
|
+
</Row>
|
|
3645
|
+
<Row>
|
|
3646
|
+
{COLORS.map(color => (
|
|
3647
|
+
<Tag key={color} variant="invisible" color={color} asChild>
|
|
3648
|
+
<button type="button">{color}</button>
|
|
3649
|
+
</Tag>
|
|
3650
|
+
))}
|
|
3651
|
+
</Row>
|
|
3652
|
+
</Stack>
|
|
3653
|
+
);</code></pre>
|
|
3654
|
+
</div>
|
|
3655
|
+
<div class="note ok">
|
|
3656
|
+
<div class="row">
|
|
3657
|
+
<span class="ex-name">With Icon</span>
|
|
3658
|
+
<span class="badge ok">story ok</span>
|
|
3659
|
+
</div>
|
|
3660
|
+
<div>Variant × color grid with icons</div>
|
|
3661
|
+
<div class="hint">Every variant for every color rendered with a leading and trailing icon. Icons are tinted with each color's `icon-tag-*` token.</div>
|
|
3662
|
+
<pre><code>const WithIcon = () => (
|
|
3663
|
+
<Stack>
|
|
3664
|
+
{COLORS.map(color => (
|
|
3665
|
+
<Row key={color}>
|
|
3666
|
+
{VARIANTS.map(variant => (
|
|
3667
|
+
<Tag key={variant} color={color} variant={variant}>
|
|
3668
|
+
<IconAdd />
|
|
3669
|
+
tag
|
|
3670
|
+
<IconAdd />
|
|
3671
|
+
</Tag>
|
|
3672
|
+
))}
|
|
3673
|
+
</Row>
|
|
3674
|
+
))}
|
|
3675
|
+
</Stack>
|
|
3676
|
+
);</code></pre>
|
|
3677
|
+
</div>
|
|
3678
|
+
<div class="note ok">
|
|
3679
|
+
<div class="row">
|
|
3680
|
+
<span class="ex-name">Colors</span>
|
|
3681
|
+
<span class="badge ok">story ok</span>
|
|
3682
|
+
</div>
|
|
3683
|
+
<div>Variant × color matrix — default, pill, button, and icon layouts</div>
|
|
3684
|
+
<div class="hint">Full matrix: every variant for every color, repeated as default, as `pill`, as an interactive `asChild` `<button>`, with a single leading icon, with leading + trailing icons, and icon-only.</div>
|
|
3685
|
+
<pre><code>const Colors = () => (
|
|
3686
|
+
<div style={{ display: 'flex', gap: '4rem', flexWrap: 'wrap' }}>
|
|
3687
|
+
<Stack>
|
|
3688
|
+
{COLORS.map(color => (
|
|
3689
|
+
<Stack gap="0.5rem" key={color}>
|
|
3690
|
+
<strong>{color}:</strong>
|
|
3691
|
+
<Row>
|
|
3692
|
+
{VARIANTS.map(variant => (
|
|
3693
|
+
<Tag key={variant} color={color} variant={variant}>
|
|
3694
|
+
{variant}
|
|
3695
|
+
</Tag>
|
|
3696
|
+
))}
|
|
3697
|
+
</Row>
|
|
3698
|
+
</Stack>
|
|
3699
|
+
))}
|
|
3700
|
+
</Stack>
|
|
3701
|
+
<Stack>
|
|
3702
|
+
{COLORS.map(color => (
|
|
3703
|
+
<Stack gap="0.5rem" key={color}>
|
|
3704
|
+
<strong>{color} with pill:</strong>
|
|
3705
|
+
<Row>
|
|
3706
|
+
{VARIANTS.map(variant => (
|
|
3707
|
+
<Tag key={variant} color={color} variant={variant} pill>
|
|
3708
|
+
{variant}
|
|
3709
|
+
</Tag>
|
|
3710
|
+
))}
|
|
3711
|
+
</Row>
|
|
3712
|
+
</Stack>
|
|
3713
|
+
))}
|
|
3714
|
+
</Stack>
|
|
3715
|
+
<Stack>
|
|
3716
|
+
{COLORS.map(color => (
|
|
3717
|
+
<Stack gap="0.5rem" key={color}>
|
|
3718
|
+
<strong>{color} as button:</strong>
|
|
3719
|
+
<Row>
|
|
3720
|
+
{VARIANTS.map(variant => (
|
|
3721
|
+
<Tag key={variant} color={color} variant={variant} asChild>
|
|
3722
|
+
<button type="button">{variant}</button>
|
|
3723
|
+
</Tag>
|
|
3724
|
+
))}
|
|
3725
|
+
</Row>
|
|
3726
|
+
</Stack>
|
|
3727
|
+
))}
|
|
3728
|
+
</Stack>
|
|
3729
|
+
<Stack>
|
|
3730
|
+
{COLORS.map(color => (
|
|
3731
|
+
<Stack gap="0.5rem" key={color}>
|
|
3732
|
+
<strong>{color} with icon:</strong>
|
|
3733
|
+
<Row>
|
|
3734
|
+
{VARIANTS.map(variant => (
|
|
3735
|
+
<Tag key={variant} color={color} variant={variant}>
|
|
3736
|
+
<IconAdd />
|
|
3737
|
+
{variant}
|
|
3738
|
+
</Tag>
|
|
3739
|
+
))}
|
|
3740
|
+
</Row>
|
|
3741
|
+
</Stack>
|
|
3742
|
+
))}
|
|
3743
|
+
</Stack>
|
|
3744
|
+
<Stack>
|
|
3745
|
+
{COLORS.map(color => (
|
|
3746
|
+
<Stack gap="0.5rem" key={color}>
|
|
3747
|
+
<strong>{color} with icons:</strong>
|
|
3748
|
+
<Row>
|
|
3749
|
+
{VARIANTS.map(variant => (
|
|
3750
|
+
<Tag key={variant} color={color} variant={variant}>
|
|
3751
|
+
<IconAdd />
|
|
3752
|
+
{variant}
|
|
3753
|
+
<IconAdd />
|
|
3754
|
+
</Tag>
|
|
3755
|
+
))}
|
|
3756
|
+
</Row>
|
|
3757
|
+
</Stack>
|
|
3758
|
+
))}
|
|
3759
|
+
</Stack>
|
|
3760
|
+
<Stack>
|
|
3761
|
+
{COLORS.map(color => (
|
|
3762
|
+
<Stack gap="0.5rem" key={color}>
|
|
3763
|
+
<strong>{color} icon only:</strong>
|
|
3764
|
+
<Row>
|
|
3765
|
+
{VARIANTS.map(variant => (
|
|
3766
|
+
<Tag
|
|
3767
|
+
key={variant}
|
|
3768
|
+
color={color}
|
|
3769
|
+
variant={variant}
|
|
3770
|
+
role="img"
|
|
3771
|
+
aria-label={`${color} ${variant}`}>
|
|
3772
|
+
<IconAdd />
|
|
3773
|
+
</Tag>
|
|
3774
|
+
))}
|
|
3775
|
+
</Row>
|
|
3776
|
+
</Stack>
|
|
3777
|
+
))}
|
|
3778
|
+
</Stack>
|
|
3779
|
+
</div>
|
|
3780
|
+
);</code></pre>
|
|
3781
|
+
</div>
|
|
3782
|
+
</div>
|
|
3783
|
+
|
|
3784
|
+
</div>
|
|
3785
|
+
</article>
|
|
3257
3786
|
<article
|
|
3258
3787
|
class="card
|
|
3259
3788
|
no-error
|
|
@@ -3266,9 +3795,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3266
3795
|
<div class="title">
|
|
3267
3796
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
3268
3797
|
<div class="badges">
|
|
3269
|
-
<label for="c-
|
|
3798
|
+
<label for="c-11-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
3270
3799
|
|
|
3271
|
-
<label for="c-
|
|
3800
|
+
<label for="c-11-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
3272
3801
|
|
|
3273
3802
|
</div>
|
|
3274
3803
|
</div>
|
|
@@ -3281,9 +3810,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3281
3810
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3282
3811
|
|
|
3283
3812
|
|
|
3284
|
-
<input id="c-
|
|
3813
|
+
<input id="c-11-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3285
3814
|
|
|
3286
|
-
<input id="c-
|
|
3815
|
+
<input id="c-11-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
3287
3816
|
|
|
3288
3817
|
<div class="panels">
|
|
3289
3818
|
|