@agentero/design-system 0.20.2 → 0.21.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.
|
@@ -576,13 +576,13 @@
|
|
|
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">22 components ok</span><span class="filter-pill ok" aria-disabled="true">174 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>3.
|
|
585
|
+
Using <code>react-docgen-typescript</code>. Generation took <strong>3.6s</strong>.
|
|
586
586
|
</div>
|
|
587
587
|
<h2 class="section-title">Components</h2>
|
|
588
588
|
<div class="grid" role="list">
|
|
@@ -1712,6 +1712,134 @@ variant?: "circle" | "square" | "pillow" | "p
|
|
|
1712
1712
|
|
|
1713
1713
|
</div>
|
|
1714
1714
|
</article>
|
|
1715
|
+
<article
|
|
1716
|
+
class="card
|
|
1717
|
+
no-error
|
|
1718
|
+
no-info
|
|
1719
|
+
no-story-error
|
|
1720
|
+
no-doc-error"
|
|
1721
|
+
role="listitem"
|
|
1722
|
+
aria-label="AvatarGroup">
|
|
1723
|
+
<div class="head">
|
|
1724
|
+
<div class="title">
|
|
1725
|
+
<h2><span class="status-dot dot-ok"></span> AvatarGroup</h2>
|
|
1726
|
+
<div class="badges">
|
|
1727
|
+
<label for="c-3-components-avatargroup-props" class="badge ok as-toggle">3 prop types</label>
|
|
1728
|
+
|
|
1729
|
+
<label for="c-3-components-avatargroup-stories" class="badge ok as-toggle">4 stories</label>
|
|
1730
|
+
|
|
1731
|
+
</div>
|
|
1732
|
+
</div>
|
|
1733
|
+
<div class="meta" title="./src/avatar-group/avatar-group.stories.tsx">components-avatargroup · ./src/avatar-group/avatar-group.stories.tsx</div>
|
|
1734
|
+
|
|
1735
|
+
<div class="hint">AvatarGroup stacks `<Avatar>` children into an overlapping row and collapses everything past `max` into a trailing `+N` bubble. The group owns the layout: it forces a uniform `size` (and `variant`, when set) and rings each avatar in the surface color so they read as separate.</div>
|
|
1736
|
+
|
|
1737
|
+
</div>
|
|
1738
|
+
|
|
1739
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
1740
|
+
|
|
1741
|
+
|
|
1742
|
+
<input id="c-3-components-avatargroup-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
1743
|
+
|
|
1744
|
+
<input id="c-3-components-avatargroup-props" class="tg tg-props" type="checkbox" hidden />
|
|
1745
|
+
|
|
1746
|
+
<div class="panels">
|
|
1747
|
+
|
|
1748
|
+
|
|
1749
|
+
|
|
1750
|
+
<div class="panel panel-props">
|
|
1751
|
+
<div class="note ok">
|
|
1752
|
+
<div class="row">
|
|
1753
|
+
<span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
|
|
1754
|
+
<span class="badge ok">3 prop types</span>
|
|
1755
|
+
</div>
|
|
1756
|
+
<pre><code>Component: src/avatar-group/avatar-group.tsx::AvatarGroup</code></pre>
|
|
1757
|
+
<pre><code>Props:</code></pre>
|
|
1758
|
+
<pre><code>max?: number = 3
|
|
1759
|
+
|
|
1760
|
+
size?: "sm" | "md" | "xs" | "lg" | "xl" | "2xl" | "3xl" | "4xl" = md
|
|
1761
|
+
|
|
1762
|
+
/**
|
|
1763
|
+
* Shape applied uniformly to every avatar and the `+N` bubble. Defaults to `circle`.
|
|
1764
|
+
*/
|
|
1765
|
+
variant?: "circle" | "square" | "pillow" | "pentagon"</code></pre>
|
|
1766
|
+
</div>
|
|
1767
|
+
</div>
|
|
1768
|
+
|
|
1769
|
+
<div class="panel panel-stories">
|
|
1770
|
+
|
|
1771
|
+
|
|
1772
|
+
|
|
1773
|
+
<div class="note ok">
|
|
1774
|
+
<div class="row">
|
|
1775
|
+
<span class="ex-name">Imports</span>
|
|
1776
|
+
</div>
|
|
1777
|
+
<pre><code>import { Avatar, AvatarGroup } from "@agentero/design-system";</code></pre>
|
|
1778
|
+
</div>
|
|
1779
|
+
|
|
1780
|
+
|
|
1781
|
+
<div class="note ok">
|
|
1782
|
+
<div class="row">
|
|
1783
|
+
<span class="ex-name">Default</span>
|
|
1784
|
+
<span class="badge ok">story ok</span>
|
|
1785
|
+
</div>
|
|
1786
|
+
|
|
1787
|
+
<div class="hint">Five people, `max={3}`: three avatars overlap and the rest collapse into `+2`.</div>
|
|
1788
|
+
<pre><code>const Default = () => <AvatarGroup max={3} size="md">
|
|
1789
|
+
{PEOPLE.map(person => (
|
|
1790
|
+
<Avatar key={person.colorize} fallback={person.fallback} colorize={person.colorize} />
|
|
1791
|
+
))}
|
|
1792
|
+
</AvatarGroup>;</code></pre>
|
|
1793
|
+
</div>
|
|
1794
|
+
<div class="note ok">
|
|
1795
|
+
<div class="row">
|
|
1796
|
+
<span class="ex-name">Within Max</span>
|
|
1797
|
+
<span class="badge ok">story ok</span>
|
|
1798
|
+
</div>
|
|
1799
|
+
|
|
1800
|
+
<div class="hint">When the count is within `max`, every avatar shows and no `+N` bubble renders.</div>
|
|
1801
|
+
<pre><code>const WithinMax = () => <AvatarGroup max={5} size="md">
|
|
1802
|
+
{PEOPLE.map(person => (
|
|
1803
|
+
<Avatar key={person.colorize} fallback={person.fallback} colorize={person.colorize} />
|
|
1804
|
+
))}
|
|
1805
|
+
</AvatarGroup>;</code></pre>
|
|
1806
|
+
</div>
|
|
1807
|
+
<div class="note ok">
|
|
1808
|
+
<div class="row">
|
|
1809
|
+
<span class="ex-name">Sizes</span>
|
|
1810
|
+
<span class="badge ok">story ok</span>
|
|
1811
|
+
</div>
|
|
1812
|
+
|
|
1813
|
+
<div class="hint">The group forces its `size` onto every child, so the stack stays uniform.</div>
|
|
1814
|
+
<pre><code>const Sizes = () => (
|
|
1815
|
+
<div className="flex flex-col gap-4">
|
|
1816
|
+
{(['xs', 'sm', 'md', 'lg', 'xl'] as const).map(size => (
|
|
1817
|
+
<AvatarGroup key={size} size={size} max={3}>
|
|
1818
|
+
{PEOPLE.map(person => (
|
|
1819
|
+
<Avatar key={person.colorize} fallback={person.fallback} colorize={person.colorize} />
|
|
1820
|
+
))}
|
|
1821
|
+
</AvatarGroup>
|
|
1822
|
+
))}
|
|
1823
|
+
</div>
|
|
1824
|
+
);</code></pre>
|
|
1825
|
+
</div>
|
|
1826
|
+
<div class="note ok">
|
|
1827
|
+
<div class="row">
|
|
1828
|
+
<span class="ex-name">Square</span>
|
|
1829
|
+
<span class="badge ok">story ok</span>
|
|
1830
|
+
</div>
|
|
1831
|
+
|
|
1832
|
+
<div class="hint">`variant` reshapes every avatar and the overflow bubble together.</div>
|
|
1833
|
+
<pre><code>const Square = () => <AvatarGroup max={3} size="md" variant="square">
|
|
1834
|
+
{PEOPLE.map(person => (
|
|
1835
|
+
<Avatar key={person.colorize} fallback={person.fallback} colorize={person.colorize} />
|
|
1836
|
+
))}
|
|
1837
|
+
</AvatarGroup>;</code></pre>
|
|
1838
|
+
</div>
|
|
1839
|
+
</div>
|
|
1840
|
+
|
|
1841
|
+
</div>
|
|
1842
|
+
</article>
|
|
1715
1843
|
<article
|
|
1716
1844
|
class="card
|
|
1717
1845
|
no-error
|
|
@@ -1724,9 +1852,9 @@ variant?: "circle" | "square" | "pillow" | "p
|
|
|
1724
1852
|
<div class="title">
|
|
1725
1853
|
<h2><span class="status-dot dot-ok"></span> Button</h2>
|
|
1726
1854
|
<div class="badges">
|
|
1727
|
-
<label for="c-
|
|
1855
|
+
<label for="c-4-components-button-props" class="badge ok as-toggle">12 prop types</label>
|
|
1728
1856
|
|
|
1729
|
-
<label for="c-
|
|
1857
|
+
<label for="c-4-components-button-stories" class="badge ok as-toggle">10 stories</label>
|
|
1730
1858
|
|
|
1731
1859
|
</div>
|
|
1732
1860
|
</div>
|
|
@@ -1739,9 +1867,9 @@ variant?: "circle" | "square" | "pillow" | "p
|
|
|
1739
1867
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
1740
1868
|
|
|
1741
1869
|
|
|
1742
|
-
<input id="c-
|
|
1870
|
+
<input id="c-4-components-button-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
1743
1871
|
|
|
1744
|
-
<input id="c-
|
|
1872
|
+
<input id="c-4-components-button-props" class="tg tg-props" type="checkbox" hidden />
|
|
1745
1873
|
|
|
1746
1874
|
<div class="panels">
|
|
1747
1875
|
|
|
@@ -2092,7 +2220,7 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2092
2220
|
<div class="badges">
|
|
2093
2221
|
|
|
2094
2222
|
|
|
2095
|
-
<label for="c-
|
|
2223
|
+
<label for="c-5-components-checklist-stories" class="badge ok as-toggle">2 stories</label>
|
|
2096
2224
|
|
|
2097
2225
|
</div>
|
|
2098
2226
|
</div>
|
|
@@ -2105,7 +2233,7 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2105
2233
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2106
2234
|
|
|
2107
2235
|
|
|
2108
|
-
<input id="c-
|
|
2236
|
+
<input id="c-5-components-checklist-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2109
2237
|
|
|
2110
2238
|
|
|
2111
2239
|
|
|
@@ -2182,7 +2310,7 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2182
2310
|
<div class="badges">
|
|
2183
2311
|
|
|
2184
2312
|
|
|
2185
|
-
<label for="c-
|
|
2313
|
+
<label for="c-6-components-datatable-stories" class="badge ok as-toggle">4 stories</label>
|
|
2186
2314
|
|
|
2187
2315
|
</div>
|
|
2188
2316
|
</div>
|
|
@@ -2195,7 +2323,7 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2195
2323
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2196
2324
|
|
|
2197
2325
|
|
|
2198
|
-
<input id="c-
|
|
2326
|
+
<input id="c-6-components-datatable-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2199
2327
|
|
|
2200
2328
|
|
|
2201
2329
|
|
|
@@ -2325,9 +2453,9 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2325
2453
|
<div class="title">
|
|
2326
2454
|
<h2><span class="status-dot dot-ok"></span> Divider</h2>
|
|
2327
2455
|
<div class="badges">
|
|
2328
|
-
<label for="c-
|
|
2456
|
+
<label for="c-7-components-divider-props" class="badge ok as-toggle">2 prop types</label>
|
|
2329
2457
|
|
|
2330
|
-
<label for="c-
|
|
2458
|
+
<label for="c-7-components-divider-stories" class="badge ok as-toggle">10 stories</label>
|
|
2331
2459
|
|
|
2332
2460
|
</div>
|
|
2333
2461
|
</div>
|
|
@@ -2340,9 +2468,9 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2340
2468
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2341
2469
|
|
|
2342
2470
|
|
|
2343
|
-
<input id="c-
|
|
2471
|
+
<input id="c-7-components-divider-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2344
2472
|
|
|
2345
|
-
<input id="c-
|
|
2473
|
+
<input id="c-7-components-divider-props" class="tg tg-props" type="checkbox" hidden />
|
|
2346
2474
|
|
|
2347
2475
|
<div class="panels">
|
|
2348
2476
|
|
|
@@ -2622,7 +2750,7 @@ label?: ReactNode</code></pre>
|
|
|
2622
2750
|
<div class="badges">
|
|
2623
2751
|
|
|
2624
2752
|
|
|
2625
|
-
<label for="c-
|
|
2753
|
+
<label for="c-8-components-dropdownmenu-stories" class="badge ok as-toggle">7 stories</label>
|
|
2626
2754
|
|
|
2627
2755
|
</div>
|
|
2628
2756
|
</div>
|
|
@@ -2635,7 +2763,7 @@ label?: ReactNode</code></pre>
|
|
|
2635
2763
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2636
2764
|
|
|
2637
2765
|
|
|
2638
|
-
<input id="c-
|
|
2766
|
+
<input id="c-8-components-dropdownmenu-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2639
2767
|
|
|
2640
2768
|
|
|
2641
2769
|
|
|
@@ -3006,7 +3134,7 @@ label?: ReactNode</code></pre>
|
|
|
3006
3134
|
<div class="badges">
|
|
3007
3135
|
|
|
3008
3136
|
|
|
3009
|
-
<label for="c-
|
|
3137
|
+
<label for="c-9-components-hovercard-stories" class="badge ok as-toggle">6 stories</label>
|
|
3010
3138
|
|
|
3011
3139
|
</div>
|
|
3012
3140
|
</div>
|
|
@@ -3019,7 +3147,7 @@ label?: ReactNode</code></pre>
|
|
|
3019
3147
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3020
3148
|
|
|
3021
3149
|
|
|
3022
|
-
<input id="c-
|
|
3150
|
+
<input id="c-9-components-hovercard-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3023
3151
|
|
|
3024
3152
|
|
|
3025
3153
|
|
|
@@ -3224,9 +3352,9 @@ label?: ReactNode</code></pre>
|
|
|
3224
3352
|
<div class="title">
|
|
3225
3353
|
<h2><span class="status-dot dot-ok"></span> Loading</h2>
|
|
3226
3354
|
<div class="badges">
|
|
3227
|
-
<label for="c-
|
|
3355
|
+
<label for="c-10-components-loading-props" class="badge ok as-toggle">1 prop type</label>
|
|
3228
3356
|
|
|
3229
|
-
<label for="c-
|
|
3357
|
+
<label for="c-10-components-loading-stories" class="badge ok as-toggle">7 stories</label>
|
|
3230
3358
|
|
|
3231
3359
|
</div>
|
|
3232
3360
|
</div>
|
|
@@ -3239,9 +3367,9 @@ label?: ReactNode</code></pre>
|
|
|
3239
3367
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3240
3368
|
|
|
3241
3369
|
|
|
3242
|
-
<input id="c-
|
|
3370
|
+
<input id="c-10-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3243
3371
|
|
|
3244
|
-
<input id="c-
|
|
3372
|
+
<input id="c-10-components-loading-props" class="tg tg-props" type="checkbox" hidden />
|
|
3245
3373
|
|
|
3246
3374
|
<div class="panels">
|
|
3247
3375
|
|
|
@@ -3383,7 +3511,7 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3383
3511
|
<div class="badges">
|
|
3384
3512
|
|
|
3385
3513
|
|
|
3386
|
-
<label for="c-
|
|
3514
|
+
<label for="c-11-components-modal-stories" class="badge ok as-toggle">4 stories</label>
|
|
3387
3515
|
|
|
3388
3516
|
</div>
|
|
3389
3517
|
</div>
|
|
@@ -3396,7 +3524,7 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3396
3524
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3397
3525
|
|
|
3398
3526
|
|
|
3399
|
-
<input id="c-
|
|
3527
|
+
<input id="c-11-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3400
3528
|
|
|
3401
3529
|
|
|
3402
3530
|
|
|
@@ -3521,9 +3649,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3521
3649
|
<div class="title">
|
|
3522
3650
|
<h2><span class="status-dot dot-ok"></span> Pagination</h2>
|
|
3523
3651
|
<div class="badges">
|
|
3524
|
-
<label for="c-
|
|
3652
|
+
<label for="c-12-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
|
|
3525
3653
|
|
|
3526
|
-
<label for="c-
|
|
3654
|
+
<label for="c-12-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
|
|
3527
3655
|
|
|
3528
3656
|
</div>
|
|
3529
3657
|
</div>
|
|
@@ -3536,9 +3664,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3536
3664
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3537
3665
|
|
|
3538
3666
|
|
|
3539
|
-
<input id="c-
|
|
3667
|
+
<input id="c-12-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3540
3668
|
|
|
3541
|
-
<input id="c-
|
|
3669
|
+
<input id="c-12-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
|
|
3542
3670
|
|
|
3543
3671
|
<div class="panels">
|
|
3544
3672
|
|
|
@@ -3684,7 +3812,7 @@ totalCount: number</code></pre>
|
|
|
3684
3812
|
<div class="badges">
|
|
3685
3813
|
|
|
3686
3814
|
|
|
3687
|
-
<label for="c-
|
|
3815
|
+
<label for="c-13-components-popover-stories" class="badge ok as-toggle">4 stories</label>
|
|
3688
3816
|
|
|
3689
3817
|
</div>
|
|
3690
3818
|
</div>
|
|
@@ -3697,7 +3825,7 @@ totalCount: number</code></pre>
|
|
|
3697
3825
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3698
3826
|
|
|
3699
3827
|
|
|
3700
|
-
<input id="c-
|
|
3828
|
+
<input id="c-13-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3701
3829
|
|
|
3702
3830
|
|
|
3703
3831
|
|
|
@@ -3831,9 +3959,9 @@ totalCount: number</code></pre>
|
|
|
3831
3959
|
<div class="title">
|
|
3832
3960
|
<h2><span class="status-dot dot-ok"></span> Progress</h2>
|
|
3833
3961
|
<div class="badges">
|
|
3834
|
-
<label for="c-
|
|
3962
|
+
<label for="c-14-components-progress-props" class="badge ok as-toggle">4 prop types</label>
|
|
3835
3963
|
|
|
3836
|
-
<label for="c-
|
|
3964
|
+
<label for="c-14-components-progress-stories" class="badge ok as-toggle">4 stories</label>
|
|
3837
3965
|
|
|
3838
3966
|
</div>
|
|
3839
3967
|
</div>
|
|
@@ -3846,9 +3974,9 @@ totalCount: number</code></pre>
|
|
|
3846
3974
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3847
3975
|
|
|
3848
3976
|
|
|
3849
|
-
<input id="c-
|
|
3977
|
+
<input id="c-14-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3850
3978
|
|
|
3851
|
-
<input id="c-
|
|
3979
|
+
<input id="c-14-components-progress-props" class="tg tg-props" type="checkbox" hidden />
|
|
3852
3980
|
|
|
3853
3981
|
<div class="panels">
|
|
3854
3982
|
|
|
@@ -3966,7 +4094,7 @@ percentage: number</code></pre>
|
|
|
3966
4094
|
<div class="badges">
|
|
3967
4095
|
|
|
3968
4096
|
|
|
3969
|
-
<label for="c-
|
|
4097
|
+
<label for="c-15-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
3970
4098
|
|
|
3971
4099
|
</div>
|
|
3972
4100
|
</div>
|
|
@@ -3979,7 +4107,7 @@ percentage: number</code></pre>
|
|
|
3979
4107
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3980
4108
|
|
|
3981
4109
|
|
|
3982
|
-
<input id="c-
|
|
4110
|
+
<input id="c-15-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3983
4111
|
|
|
3984
4112
|
|
|
3985
4113
|
|
|
@@ -4073,9 +4201,9 @@ percentage: number</code></pre>
|
|
|
4073
4201
|
<div class="title">
|
|
4074
4202
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
4075
4203
|
<div class="badges">
|
|
4076
|
-
<label for="c-
|
|
4204
|
+
<label for="c-16-components-switch-props" class="badge ok as-toggle">4 prop types</label>
|
|
4077
4205
|
|
|
4078
|
-
<label for="c-
|
|
4206
|
+
<label for="c-16-components-switch-stories" class="badge ok as-toggle">7 stories</label>
|
|
4079
4207
|
|
|
4080
4208
|
</div>
|
|
4081
4209
|
</div>
|
|
@@ -4088,9 +4216,9 @@ percentage: number</code></pre>
|
|
|
4088
4216
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4089
4217
|
|
|
4090
4218
|
|
|
4091
|
-
<input id="c-
|
|
4219
|
+
<input id="c-16-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4092
4220
|
|
|
4093
|
-
<input id="c-
|
|
4221
|
+
<input id="c-16-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
4094
4222
|
|
|
4095
4223
|
<div class="panels">
|
|
4096
4224
|
|
|
@@ -4263,7 +4391,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
4263
4391
|
<div class="badges">
|
|
4264
4392
|
|
|
4265
4393
|
|
|
4266
|
-
<label for="c-
|
|
4394
|
+
<label for="c-17-components-table-stories" class="badge ok as-toggle">9 stories</label>
|
|
4267
4395
|
|
|
4268
4396
|
</div>
|
|
4269
4397
|
</div>
|
|
@@ -4276,7 +4404,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
4276
4404
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4277
4405
|
|
|
4278
4406
|
|
|
4279
|
-
<input id="c-
|
|
4407
|
+
<input id="c-17-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4280
4408
|
|
|
4281
4409
|
|
|
4282
4410
|
|
|
@@ -4452,7 +4580,7 @@ import { Fragment } from "react";</code></pre>
|
|
|
4452
4580
|
<div class="badges">
|
|
4453
4581
|
|
|
4454
4582
|
|
|
4455
|
-
<label for="c-
|
|
4583
|
+
<label for="c-18-components-tabs-stories" class="badge ok as-toggle">7 stories</label>
|
|
4456
4584
|
|
|
4457
4585
|
</div>
|
|
4458
4586
|
</div>
|
|
@@ -4465,7 +4593,7 @@ import { Fragment } from "react";</code></pre>
|
|
|
4465
4593
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4466
4594
|
|
|
4467
4595
|
|
|
4468
|
-
<input id="c-
|
|
4596
|
+
<input id="c-18-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4469
4597
|
|
|
4470
4598
|
|
|
4471
4599
|
|
|
@@ -4618,9 +4746,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
4618
4746
|
<div class="title">
|
|
4619
4747
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
4620
4748
|
<div class="badges">
|
|
4621
|
-
<label for="c-
|
|
4749
|
+
<label for="c-19-components-tag-props" class="badge ok as-toggle">6 prop types</label>
|
|
4622
4750
|
|
|
4623
|
-
<label for="c-
|
|
4751
|
+
<label for="c-19-components-tag-stories" class="badge ok as-toggle">10 stories</label>
|
|
4624
4752
|
|
|
4625
4753
|
</div>
|
|
4626
4754
|
</div>
|
|
@@ -4633,9 +4761,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
4633
4761
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4634
4762
|
|
|
4635
4763
|
|
|
4636
|
-
<input id="c-
|
|
4764
|
+
<input id="c-19-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4637
4765
|
|
|
4638
|
-
<input id="c-
|
|
4766
|
+
<input id="c-19-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
4639
4767
|
|
|
4640
4768
|
<div class="panels">
|
|
4641
4769
|
|
|
@@ -4992,9 +5120,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4992
5120
|
<div class="title">
|
|
4993
5121
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
4994
5122
|
<div class="badges">
|
|
4995
|
-
<label for="c-
|
|
5123
|
+
<label for="c-20-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
4996
5124
|
|
|
4997
|
-
<label for="c-
|
|
5125
|
+
<label for="c-20-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
4998
5126
|
|
|
4999
5127
|
</div>
|
|
5000
5128
|
</div>
|
|
@@ -5007,9 +5135,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
5007
5135
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5008
5136
|
|
|
5009
5137
|
|
|
5010
|
-
<input id="c-
|
|
5138
|
+
<input id="c-20-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5011
5139
|
|
|
5012
|
-
<input id="c-
|
|
5140
|
+
<input id="c-20-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
5013
5141
|
|
|
5014
5142
|
<div class="panels">
|
|
5015
5143
|
|
|
@@ -5418,9 +5546,9 @@ visibleToasts?: number</code></pre>
|
|
|
5418
5546
|
<div class="title">
|
|
5419
5547
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
5420
5548
|
<div class="badges">
|
|
5421
|
-
<label for="c-
|
|
5549
|
+
<label for="c-21-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
|
|
5422
5550
|
|
|
5423
|
-
<label for="c-
|
|
5551
|
+
<label for="c-21-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
5424
5552
|
|
|
5425
5553
|
</div>
|
|
5426
5554
|
</div>
|
|
@@ -5433,9 +5561,9 @@ visibleToasts?: number</code></pre>
|
|
|
5433
5561
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5434
5562
|
|
|
5435
5563
|
|
|
5436
|
-
<input id="c-
|
|
5564
|
+
<input id="c-21-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5437
5565
|
|
|
5438
|
-
<input id="c-
|
|
5566
|
+
<input id="c-21-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
5439
5567
|
|
|
5440
5568
|
<div class="panels">
|
|
5441
5569
|
|