@agentero/design-system 0.9.8 → 0.10.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 +191 -36
- package/mcp/manifests/components.json +1 -1
- package/package.json +8 -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/theme/base.css +18 -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">11 components ok</span><span class="filter-pill ok" aria-disabled="true">117 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>2.
|
|
585
|
+
Using <code>react-docgen-typescript</code>. Generation took <strong>2.6s</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
|
|
|
@@ -3266,9 +3421,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3266
3421
|
<div class="title">
|
|
3267
3422
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
3268
3423
|
<div class="badges">
|
|
3269
|
-
<label for="c-
|
|
3424
|
+
<label for="c-10-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
3270
3425
|
|
|
3271
|
-
<label for="c-
|
|
3426
|
+
<label for="c-10-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
3272
3427
|
|
|
3273
3428
|
</div>
|
|
3274
3429
|
</div>
|
|
@@ -3281,9 +3436,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3281
3436
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3282
3437
|
|
|
3283
3438
|
|
|
3284
|
-
<input id="c-
|
|
3439
|
+
<input id="c-10-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3285
3440
|
|
|
3286
|
-
<input id="c-
|
|
3441
|
+
<input id="c-10-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
3287
3442
|
|
|
3288
3443
|
<div class="panels">
|
|
3289
3444
|
|