@agentero/design-system 0.15.1 → 0.17.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 +280 -42
- package/mcp/manifests/components.json +1 -1
- package/package.json +10 -1
- package/src/check-list/check-list.d.ts +65 -0
- package/src/check-list/check-list.js +31 -0
- package/src/check-list/icons.d.ts +2 -0
- package/src/check-list/icons.js +16 -0
- package/src/check-list/index.d.ts +1 -0
- package/src/check-list/index.js +2 -0
- package/src/tabs/index.d.ts +2 -0
- package/src/tabs/index.js +2 -0
- package/src/tabs/tabs.d.ts +135 -0
- package/src/tabs/tabs.js +113 -0
|
@@ -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">18 components ok</span><span class="filter-pill ok" aria-disabled="true">155 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.2s</strong>.
|
|
586
586
|
</div>
|
|
587
587
|
<h2 class="section-title">Components</h2>
|
|
588
588
|
<div class="grid" role="list">
|
|
@@ -2078,6 +2078,96 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2078
2078
|
|
|
2079
2079
|
</div>
|
|
2080
2080
|
</article>
|
|
2081
|
+
<article
|
|
2082
|
+
class="card
|
|
2083
|
+
no-error
|
|
2084
|
+
no-info
|
|
2085
|
+
no-story-error
|
|
2086
|
+
no-doc-error"
|
|
2087
|
+
role="listitem"
|
|
2088
|
+
aria-label="CheckList.Root">
|
|
2089
|
+
<div class="head">
|
|
2090
|
+
<div class="title">
|
|
2091
|
+
<h2><span class="status-dot dot-ok"></span> CheckList.Root</h2>
|
|
2092
|
+
<div class="badges">
|
|
2093
|
+
|
|
2094
|
+
|
|
2095
|
+
<label for="c-4-components-checklist-stories" class="badge ok as-toggle">2 stories</label>
|
|
2096
|
+
|
|
2097
|
+
</div>
|
|
2098
|
+
</div>
|
|
2099
|
+
<div class="meta" title="./src/check-list/check-list.stories.tsx">components-checklist · ./src/check-list/check-list.stories.tsx</div>
|
|
2100
|
+
|
|
2101
|
+
<div class="hint">CheckList renders a vertical list where every row is marked with a check icon. Purely presentational — for interactive selection use a checkbox group.</div>
|
|
2102
|
+
|
|
2103
|
+
</div>
|
|
2104
|
+
|
|
2105
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2106
|
+
|
|
2107
|
+
|
|
2108
|
+
<input id="c-4-components-checklist-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2109
|
+
|
|
2110
|
+
|
|
2111
|
+
|
|
2112
|
+
<div class="panels">
|
|
2113
|
+
|
|
2114
|
+
|
|
2115
|
+
|
|
2116
|
+
|
|
2117
|
+
<div class="panel panel-stories">
|
|
2118
|
+
|
|
2119
|
+
|
|
2120
|
+
|
|
2121
|
+
<div class="note ok">
|
|
2122
|
+
<div class="row">
|
|
2123
|
+
<span class="ex-name">Imports</span>
|
|
2124
|
+
</div>
|
|
2125
|
+
<pre><code>import { CheckList } from "@agentero/design-system";</code></pre>
|
|
2126
|
+
</div>
|
|
2127
|
+
|
|
2128
|
+
|
|
2129
|
+
<div class="note ok">
|
|
2130
|
+
<div class="row">
|
|
2131
|
+
<span class="ex-name">Default</span>
|
|
2132
|
+
<span class="badge ok">story ok</span>
|
|
2133
|
+
</div>
|
|
2134
|
+
|
|
2135
|
+
<div class="hint">Plain text rows with a leading check.</div>
|
|
2136
|
+
<pre><code>const Default = () => (
|
|
2137
|
+
<CheckList.Root>
|
|
2138
|
+
<CheckList.Item>Instant appointment</CheckList.Item>
|
|
2139
|
+
<CheckList.Item>Bind with Agentero</CheckList.Item>
|
|
2140
|
+
<CheckList.Item>Available in the Agentero rater</CheckList.Item>
|
|
2141
|
+
</CheckList.Root>
|
|
2142
|
+
);</code></pre>
|
|
2143
|
+
</div>
|
|
2144
|
+
<div class="note ok">
|
|
2145
|
+
<div class="row">
|
|
2146
|
+
<span class="ex-name">Rich Content</span>
|
|
2147
|
+
<span class="badge ok">story ok</span>
|
|
2148
|
+
</div>
|
|
2149
|
+
|
|
2150
|
+
<div class="hint">Items accept rich content — links, wrapped text, custom markup.</div>
|
|
2151
|
+
<pre><code>const RichContent = () => (
|
|
2152
|
+
<div className="w-72">
|
|
2153
|
+
<CheckList.Root>
|
|
2154
|
+
<CheckList.Item>
|
|
2155
|
+
<a href="#quoting" className="underline">
|
|
2156
|
+
Agentero rater
|
|
2157
|
+
</a>
|
|
2158
|
+
</CheckList.Item>
|
|
2159
|
+
<CheckList.Item>
|
|
2160
|
+
Longer descriptions wrap under their own text while the check stays aligned to the first
|
|
2161
|
+
line.
|
|
2162
|
+
</CheckList.Item>
|
|
2163
|
+
</CheckList.Root>
|
|
2164
|
+
</div>
|
|
2165
|
+
);</code></pre>
|
|
2166
|
+
</div>
|
|
2167
|
+
</div>
|
|
2168
|
+
|
|
2169
|
+
</div>
|
|
2170
|
+
</article>
|
|
2081
2171
|
<article
|
|
2082
2172
|
class="card
|
|
2083
2173
|
no-error
|
|
@@ -2092,7 +2182,7 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2092
2182
|
<div class="badges">
|
|
2093
2183
|
|
|
2094
2184
|
|
|
2095
|
-
<label for="c-
|
|
2185
|
+
<label for="c-5-components-datatable-stories" class="badge ok as-toggle">4 stories</label>
|
|
2096
2186
|
|
|
2097
2187
|
</div>
|
|
2098
2188
|
</div>
|
|
@@ -2105,7 +2195,7 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2105
2195
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2106
2196
|
|
|
2107
2197
|
|
|
2108
|
-
<input id="c-
|
|
2198
|
+
<input id="c-5-components-datatable-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2109
2199
|
|
|
2110
2200
|
|
|
2111
2201
|
|
|
@@ -2235,9 +2325,9 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2235
2325
|
<div class="title">
|
|
2236
2326
|
<h2><span class="status-dot dot-ok"></span> Divider</h2>
|
|
2237
2327
|
<div class="badges">
|
|
2238
|
-
<label for="c-
|
|
2328
|
+
<label for="c-6-components-divider-props" class="badge ok as-toggle">2 prop types</label>
|
|
2239
2329
|
|
|
2240
|
-
<label for="c-
|
|
2330
|
+
<label for="c-6-components-divider-stories" class="badge ok as-toggle">10 stories</label>
|
|
2241
2331
|
|
|
2242
2332
|
</div>
|
|
2243
2333
|
</div>
|
|
@@ -2250,9 +2340,9 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2250
2340
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2251
2341
|
|
|
2252
2342
|
|
|
2253
|
-
<input id="c-
|
|
2343
|
+
<input id="c-6-components-divider-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2254
2344
|
|
|
2255
|
-
<input id="c-
|
|
2345
|
+
<input id="c-6-components-divider-props" class="tg tg-props" type="checkbox" hidden />
|
|
2256
2346
|
|
|
2257
2347
|
<div class="panels">
|
|
2258
2348
|
|
|
@@ -2532,7 +2622,7 @@ label?: ReactNode</code></pre>
|
|
|
2532
2622
|
<div class="badges">
|
|
2533
2623
|
|
|
2534
2624
|
|
|
2535
|
-
<label for="c-
|
|
2625
|
+
<label for="c-7-components-dropdownmenu-stories" class="badge ok as-toggle">7 stories</label>
|
|
2536
2626
|
|
|
2537
2627
|
</div>
|
|
2538
2628
|
</div>
|
|
@@ -2545,7 +2635,7 @@ label?: ReactNode</code></pre>
|
|
|
2545
2635
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2546
2636
|
|
|
2547
2637
|
|
|
2548
|
-
<input id="c-
|
|
2638
|
+
<input id="c-7-components-dropdownmenu-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2549
2639
|
|
|
2550
2640
|
|
|
2551
2641
|
|
|
@@ -2914,9 +3004,9 @@ label?: ReactNode</code></pre>
|
|
|
2914
3004
|
<div class="title">
|
|
2915
3005
|
<h2><span class="status-dot dot-ok"></span> Loading</h2>
|
|
2916
3006
|
<div class="badges">
|
|
2917
|
-
<label for="c-
|
|
3007
|
+
<label for="c-8-components-loading-props" class="badge ok as-toggle">1 prop type</label>
|
|
2918
3008
|
|
|
2919
|
-
<label for="c-
|
|
3009
|
+
<label for="c-8-components-loading-stories" class="badge ok as-toggle">7 stories</label>
|
|
2920
3010
|
|
|
2921
3011
|
</div>
|
|
2922
3012
|
</div>
|
|
@@ -2929,9 +3019,9 @@ label?: ReactNode</code></pre>
|
|
|
2929
3019
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2930
3020
|
|
|
2931
3021
|
|
|
2932
|
-
<input id="c-
|
|
3022
|
+
<input id="c-8-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2933
3023
|
|
|
2934
|
-
<input id="c-
|
|
3024
|
+
<input id="c-8-components-loading-props" class="tg tg-props" type="checkbox" hidden />
|
|
2935
3025
|
|
|
2936
3026
|
<div class="panels">
|
|
2937
3027
|
|
|
@@ -3071,9 +3161,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3071
3161
|
<div class="title">
|
|
3072
3162
|
<h2><span class="status-dot dot-ok"></span> Pagination</h2>
|
|
3073
3163
|
<div class="badges">
|
|
3074
|
-
<label for="c-
|
|
3164
|
+
<label for="c-9-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
|
|
3075
3165
|
|
|
3076
|
-
<label for="c-
|
|
3166
|
+
<label for="c-9-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
|
|
3077
3167
|
|
|
3078
3168
|
</div>
|
|
3079
3169
|
</div>
|
|
@@ -3086,9 +3176,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3086
3176
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3087
3177
|
|
|
3088
3178
|
|
|
3089
|
-
<input id="c-
|
|
3179
|
+
<input id="c-9-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3090
3180
|
|
|
3091
|
-
<input id="c-
|
|
3181
|
+
<input id="c-9-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
|
|
3092
3182
|
|
|
3093
3183
|
<div class="panels">
|
|
3094
3184
|
|
|
@@ -3232,9 +3322,9 @@ totalCount: number</code></pre>
|
|
|
3232
3322
|
<div class="title">
|
|
3233
3323
|
<h2><span class="status-dot dot-ok"></span> Progress</h2>
|
|
3234
3324
|
<div class="badges">
|
|
3235
|
-
<label for="c-
|
|
3325
|
+
<label for="c-10-components-progress-props" class="badge ok as-toggle">4 prop types</label>
|
|
3236
3326
|
|
|
3237
|
-
<label for="c-
|
|
3327
|
+
<label for="c-10-components-progress-stories" class="badge ok as-toggle">4 stories</label>
|
|
3238
3328
|
|
|
3239
3329
|
</div>
|
|
3240
3330
|
</div>
|
|
@@ -3247,9 +3337,9 @@ totalCount: number</code></pre>
|
|
|
3247
3337
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3248
3338
|
|
|
3249
3339
|
|
|
3250
|
-
<input id="c-
|
|
3340
|
+
<input id="c-10-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3251
3341
|
|
|
3252
|
-
<input id="c-
|
|
3342
|
+
<input id="c-10-components-progress-props" class="tg tg-props" type="checkbox" hidden />
|
|
3253
3343
|
|
|
3254
3344
|
<div class="panels">
|
|
3255
3345
|
|
|
@@ -3367,7 +3457,7 @@ percentage: number</code></pre>
|
|
|
3367
3457
|
<div class="badges">
|
|
3368
3458
|
|
|
3369
3459
|
|
|
3370
|
-
<label for="c-
|
|
3460
|
+
<label for="c-11-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
3371
3461
|
|
|
3372
3462
|
</div>
|
|
3373
3463
|
</div>
|
|
@@ -3380,7 +3470,7 @@ percentage: number</code></pre>
|
|
|
3380
3470
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3381
3471
|
|
|
3382
3472
|
|
|
3383
|
-
<input id="c-
|
|
3473
|
+
<input id="c-11-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3384
3474
|
|
|
3385
3475
|
|
|
3386
3476
|
|
|
@@ -3474,9 +3564,9 @@ percentage: number</code></pre>
|
|
|
3474
3564
|
<div class="title">
|
|
3475
3565
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
3476
3566
|
<div class="badges">
|
|
3477
|
-
<label for="c-
|
|
3567
|
+
<label for="c-12-components-switch-props" class="badge ok as-toggle">4 prop types</label>
|
|
3478
3568
|
|
|
3479
|
-
<label for="c-
|
|
3569
|
+
<label for="c-12-components-switch-stories" class="badge ok as-toggle">7 stories</label>
|
|
3480
3570
|
|
|
3481
3571
|
</div>
|
|
3482
3572
|
</div>
|
|
@@ -3489,9 +3579,9 @@ percentage: number</code></pre>
|
|
|
3489
3579
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3490
3580
|
|
|
3491
3581
|
|
|
3492
|
-
<input id="c-
|
|
3582
|
+
<input id="c-12-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3493
3583
|
|
|
3494
|
-
<input id="c-
|
|
3584
|
+
<input id="c-12-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
3495
3585
|
|
|
3496
3586
|
<div class="panels">
|
|
3497
3587
|
|
|
@@ -3664,7 +3754,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
3664
3754
|
<div class="badges">
|
|
3665
3755
|
|
|
3666
3756
|
|
|
3667
|
-
<label for="c-
|
|
3757
|
+
<label for="c-13-components-table-stories" class="badge ok as-toggle">9 stories</label>
|
|
3668
3758
|
|
|
3669
3759
|
</div>
|
|
3670
3760
|
</div>
|
|
@@ -3677,7 +3767,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
3677
3767
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3678
3768
|
|
|
3679
3769
|
|
|
3680
|
-
<input id="c-
|
|
3770
|
+
<input id="c-13-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3681
3771
|
|
|
3682
3772
|
|
|
3683
3773
|
|
|
@@ -3839,6 +3929,154 @@ import { Fragment } from "react";</code></pre>
|
|
|
3839
3929
|
|
|
3840
3930
|
</div>
|
|
3841
3931
|
</article>
|
|
3932
|
+
<article
|
|
3933
|
+
class="card
|
|
3934
|
+
no-error
|
|
3935
|
+
no-info
|
|
3936
|
+
no-story-error
|
|
3937
|
+
no-doc-error"
|
|
3938
|
+
role="listitem"
|
|
3939
|
+
aria-label="Tabs.Root">
|
|
3940
|
+
<div class="head">
|
|
3941
|
+
<div class="title">
|
|
3942
|
+
<h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
|
|
3943
|
+
<div class="badges">
|
|
3944
|
+
|
|
3945
|
+
|
|
3946
|
+
<label for="c-14-components-tabs-stories" class="badge ok as-toggle">6 stories</label>
|
|
3947
|
+
|
|
3948
|
+
</div>
|
|
3949
|
+
</div>
|
|
3950
|
+
<div class="meta" title="./src/tabs/tabs.stories.tsx">components-tabs · ./src/tabs/tabs.stories.tsx</div>
|
|
3951
|
+
|
|
3952
|
+
<div class="hint">Tabs built on Radix UI's Tabs (keyboard nav, roving focus and ARIA come for free). Compose `Root` with a `List` of `Trigger`s and matching `Content`s, pairing each `Trigger`/`Content` by `value`.</div>
|
|
3953
|
+
|
|
3954
|
+
</div>
|
|
3955
|
+
|
|
3956
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3957
|
+
|
|
3958
|
+
|
|
3959
|
+
<input id="c-14-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3960
|
+
|
|
3961
|
+
|
|
3962
|
+
|
|
3963
|
+
<div class="panels">
|
|
3964
|
+
|
|
3965
|
+
|
|
3966
|
+
|
|
3967
|
+
|
|
3968
|
+
<div class="panel panel-stories">
|
|
3969
|
+
|
|
3970
|
+
|
|
3971
|
+
|
|
3972
|
+
<div class="note ok">
|
|
3973
|
+
<div class="row">
|
|
3974
|
+
<span class="ex-name">Imports</span>
|
|
3975
|
+
</div>
|
|
3976
|
+
<pre><code>import { Tabs } from "@agentero/design-system";</code></pre>
|
|
3977
|
+
</div>
|
|
3978
|
+
|
|
3979
|
+
|
|
3980
|
+
<div class="note ok">
|
|
3981
|
+
<div class="row">
|
|
3982
|
+
<span class="ex-name">Default</span>
|
|
3983
|
+
<span class="badge ok">story ok</span>
|
|
3984
|
+
</div>
|
|
3985
|
+
|
|
3986
|
+
<div class="hint">`line` (default): the active tab is marked with an animated underline.</div>
|
|
3987
|
+
<pre><code>const Default = () => <Tabs.Root variant="line" defaultValue="overview">
|
|
3988
|
+
<Tabs.List>
|
|
3989
|
+
<TabItems />
|
|
3990
|
+
</Tabs.List>
|
|
3991
|
+
<TabPanels />
|
|
3992
|
+
</Tabs.Root>;</code></pre>
|
|
3993
|
+
</div>
|
|
3994
|
+
<div class="note ok">
|
|
3995
|
+
<div class="row">
|
|
3996
|
+
<span class="ex-name">Enclosed</span>
|
|
3997
|
+
<span class="badge ok">story ok</span>
|
|
3998
|
+
</div>
|
|
3999
|
+
|
|
4000
|
+
<div class="hint">`enclosed` renders segmented pills; the active tab sits on a raised surface.</div>
|
|
4001
|
+
<pre><code>const Enclosed = () => (
|
|
4002
|
+
<Tabs.Root variant="enclosed" defaultValue="overview">
|
|
4003
|
+
<Tabs.List>
|
|
4004
|
+
<TabItems />
|
|
4005
|
+
</Tabs.List>
|
|
4006
|
+
<TabPanels />
|
|
4007
|
+
</Tabs.Root>
|
|
4008
|
+
);</code></pre>
|
|
4009
|
+
</div>
|
|
4010
|
+
<div class="note ok">
|
|
4011
|
+
<div class="row">
|
|
4012
|
+
<span class="ex-name">Buttons</span>
|
|
4013
|
+
<span class="badge ok">story ok</span>
|
|
4014
|
+
</div>
|
|
4015
|
+
|
|
4016
|
+
<div class="hint">`button` renders button-like tabs, with room for a leading icon per trigger.</div>
|
|
4017
|
+
<pre><code>const Buttons = () => (
|
|
4018
|
+
<Tabs.Root variant="button" defaultValue="overview">
|
|
4019
|
+
<Tabs.List>
|
|
4020
|
+
<TabItems />
|
|
4021
|
+
</Tabs.List>
|
|
4022
|
+
<TabPanels />
|
|
4023
|
+
</Tabs.Root>
|
|
4024
|
+
);</code></pre>
|
|
4025
|
+
</div>
|
|
4026
|
+
<div class="note ok">
|
|
4027
|
+
<div class="row">
|
|
4028
|
+
<span class="ex-name">Positions</span>
|
|
4029
|
+
<span class="badge ok">story ok</span>
|
|
4030
|
+
</div>
|
|
4031
|
+
|
|
4032
|
+
<div class="hint">`position` aligns the tab list within the row (`start` is the default).</div>
|
|
4033
|
+
<pre><code>const Positions = () => (
|
|
4034
|
+
<div className="flex flex-col gap-8">
|
|
4035
|
+
{(['start', 'center', 'end'] as const).map(position => (
|
|
4036
|
+
<Tabs.Root key={position} variant="enclosed" position={position} defaultValue="overview">
|
|
4037
|
+
<Tabs.List>
|
|
4038
|
+
<TabItems />
|
|
4039
|
+
</Tabs.List>
|
|
4040
|
+
<TabPanels />
|
|
4041
|
+
</Tabs.Root>
|
|
4042
|
+
))}
|
|
4043
|
+
</div>
|
|
4044
|
+
);</code></pre>
|
|
4045
|
+
</div>
|
|
4046
|
+
<div class="note ok">
|
|
4047
|
+
<div class="row">
|
|
4048
|
+
<span class="ex-name">Full Width</span>
|
|
4049
|
+
<span class="badge ok">story ok</span>
|
|
4050
|
+
</div>
|
|
4051
|
+
|
|
4052
|
+
<div class="hint">`position="full"` stretches the tab list to fill the available width.</div>
|
|
4053
|
+
<pre><code>const FullWidth = () => (
|
|
4054
|
+
<Tabs.Root variant="enclosed" position="full" defaultValue="overview">
|
|
4055
|
+
<Tabs.List>
|
|
4056
|
+
<TabItems />
|
|
4057
|
+
</Tabs.List>
|
|
4058
|
+
<TabPanels />
|
|
4059
|
+
</Tabs.Root>
|
|
4060
|
+
);</code></pre>
|
|
4061
|
+
</div>
|
|
4062
|
+
<div class="note ok">
|
|
4063
|
+
<div class="row">
|
|
4064
|
+
<span class="ex-name">Switch Tabs</span>
|
|
4065
|
+
<span class="badge ok">story ok</span>
|
|
4066
|
+
</div>
|
|
4067
|
+
|
|
4068
|
+
<div class="hint">Selecting a tab reveals its panel and hides the others.</div>
|
|
4069
|
+
<pre><code>const SwitchTabs = () => <Tabs.Root variant="line" defaultValue="overview">
|
|
4070
|
+
<Tabs.List>
|
|
4071
|
+
<TabItems />
|
|
4072
|
+
</Tabs.List>
|
|
4073
|
+
<TabPanels />
|
|
4074
|
+
</Tabs.Root>;</code></pre>
|
|
4075
|
+
</div>
|
|
4076
|
+
</div>
|
|
4077
|
+
|
|
4078
|
+
</div>
|
|
4079
|
+
</article>
|
|
3842
4080
|
<article
|
|
3843
4081
|
class="card
|
|
3844
4082
|
no-error
|
|
@@ -3851,9 +4089,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3851
4089
|
<div class="title">
|
|
3852
4090
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
3853
4091
|
<div class="badges">
|
|
3854
|
-
<label for="c-
|
|
4092
|
+
<label for="c-15-components-tag-props" class="badge ok as-toggle">6 prop types</label>
|
|
3855
4093
|
|
|
3856
|
-
<label for="c-
|
|
4094
|
+
<label for="c-15-components-tag-stories" class="badge ok as-toggle">10 stories</label>
|
|
3857
4095
|
|
|
3858
4096
|
</div>
|
|
3859
4097
|
</div>
|
|
@@ -3866,9 +4104,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3866
4104
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3867
4105
|
|
|
3868
4106
|
|
|
3869
|
-
<input id="c-
|
|
4107
|
+
<input id="c-15-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3870
4108
|
|
|
3871
|
-
<input id="c-
|
|
4109
|
+
<input id="c-15-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
3872
4110
|
|
|
3873
4111
|
<div class="panels">
|
|
3874
4112
|
|
|
@@ -4225,9 +4463,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4225
4463
|
<div class="title">
|
|
4226
4464
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
4227
4465
|
<div class="badges">
|
|
4228
|
-
<label for="c-
|
|
4466
|
+
<label for="c-16-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
4229
4467
|
|
|
4230
|
-
<label for="c-
|
|
4468
|
+
<label for="c-16-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
4231
4469
|
|
|
4232
4470
|
</div>
|
|
4233
4471
|
</div>
|
|
@@ -4240,9 +4478,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4240
4478
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4241
4479
|
|
|
4242
4480
|
|
|
4243
|
-
<input id="c-
|
|
4481
|
+
<input id="c-16-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4244
4482
|
|
|
4245
|
-
<input id="c-
|
|
4483
|
+
<input id="c-16-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
4246
4484
|
|
|
4247
4485
|
<div class="panels">
|
|
4248
4486
|
|
|
@@ -4651,9 +4889,9 @@ visibleToasts?: number</code></pre>
|
|
|
4651
4889
|
<div class="title">
|
|
4652
4890
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
4653
4891
|
<div class="badges">
|
|
4654
|
-
<label for="c-
|
|
4892
|
+
<label for="c-17-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
|
|
4655
4893
|
|
|
4656
|
-
<label for="c-
|
|
4894
|
+
<label for="c-17-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
4657
4895
|
|
|
4658
4896
|
</div>
|
|
4659
4897
|
</div>
|
|
@@ -4666,9 +4904,9 @@ visibleToasts?: number</code></pre>
|
|
|
4666
4904
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4667
4905
|
|
|
4668
4906
|
|
|
4669
|
-
<input id="c-
|
|
4907
|
+
<input id="c-17-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4670
4908
|
|
|
4671
|
-
<input id="c-
|
|
4909
|
+
<input id="c-17-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
4672
4910
|
|
|
4673
4911
|
<div class="panels">
|
|
4674
4912
|
|