@agentero/design-system 0.16.0 → 0.18.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 +318 -30
- package/mcp/manifests/components.json +1 -1
- package/package.json +11 -1
- package/src/modal/icons.d.ts +1 -0
- package/src/modal/icons.js +10 -0
- package/src/modal/index.d.ts +1 -0
- package/src/modal/index.js +2 -0
- package/src/modal/modal.d.ts +126 -0
- package/src/modal/modal.js +102 -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
- package/theme/base.css +47 -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">19 components ok</span><span class="filter-pill ok" aria-disabled="true">159 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.1s</strong>.
|
|
586
586
|
</div>
|
|
587
587
|
<h2 class="section-title">Components</h2>
|
|
588
588
|
<div class="grid" role="list">
|
|
@@ -3149,6 +3149,146 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3149
3149
|
|
|
3150
3150
|
</div>
|
|
3151
3151
|
</article>
|
|
3152
|
+
<article
|
|
3153
|
+
class="card
|
|
3154
|
+
no-error
|
|
3155
|
+
no-info
|
|
3156
|
+
no-story-error
|
|
3157
|
+
no-doc-error"
|
|
3158
|
+
role="listitem"
|
|
3159
|
+
aria-label="Modal.Root">
|
|
3160
|
+
<div class="head">
|
|
3161
|
+
<div class="title">
|
|
3162
|
+
<h2><span class="status-dot dot-ok"></span> Modal.Root</h2>
|
|
3163
|
+
<div class="badges">
|
|
3164
|
+
|
|
3165
|
+
|
|
3166
|
+
<label for="c-9-components-modal-stories" class="badge ok as-toggle">4 stories</label>
|
|
3167
|
+
|
|
3168
|
+
</div>
|
|
3169
|
+
</div>
|
|
3170
|
+
<div class="meta" title="./src/modal/modal.stories.tsx">components-modal · ./src/modal/modal.stories.tsx</div>
|
|
3171
|
+
|
|
3172
|
+
<div class="hint">Modal is a compound dialog built on Radix UI: `Root` owns the open state, `Content` is the centered surface (`size` md/lg), and `Title`/`Body`/`Footer` structure it. Close it with `Escape`, the overlay, the X button, or a `Modal.Close asChild` around your own button.</div>
|
|
3173
|
+
|
|
3174
|
+
</div>
|
|
3175
|
+
|
|
3176
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3177
|
+
|
|
3178
|
+
|
|
3179
|
+
<input id="c-9-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3180
|
+
|
|
3181
|
+
|
|
3182
|
+
|
|
3183
|
+
<div class="panels">
|
|
3184
|
+
|
|
3185
|
+
|
|
3186
|
+
|
|
3187
|
+
|
|
3188
|
+
<div class="panel panel-stories">
|
|
3189
|
+
|
|
3190
|
+
|
|
3191
|
+
|
|
3192
|
+
<div class="note ok">
|
|
3193
|
+
<div class="row">
|
|
3194
|
+
<span class="ex-name">Imports</span>
|
|
3195
|
+
</div>
|
|
3196
|
+
<pre><code>import { Button, Modal } from "@agentero/design-system";</code></pre>
|
|
3197
|
+
</div>
|
|
3198
|
+
|
|
3199
|
+
|
|
3200
|
+
<div class="note ok">
|
|
3201
|
+
<div class="row">
|
|
3202
|
+
<span class="ex-name">Default</span>
|
|
3203
|
+
<span class="badge ok">story ok</span>
|
|
3204
|
+
</div>
|
|
3205
|
+
|
|
3206
|
+
<div class="hint">Trigger-driven modal: open it, then dismiss with the footer's Cancel.</div>
|
|
3207
|
+
<pre><code>const Default = () => (
|
|
3208
|
+
<Modal.Root>
|
|
3209
|
+
<Modal.Trigger asChild>
|
|
3210
|
+
<Button variant="secondary">Delete carrier</Button>
|
|
3211
|
+
</Modal.Trigger>
|
|
3212
|
+
<Modal.Content>
|
|
3213
|
+
<Modal.Title>Delete carrier</Modal.Title>
|
|
3214
|
+
<Modal.Body>
|
|
3215
|
+
<p>This will remove the carrier from your agency. This action cannot be undone.</p>
|
|
3216
|
+
</Modal.Body>
|
|
3217
|
+
<Modal.Footer>
|
|
3218
|
+
<Modal.Close asChild>
|
|
3219
|
+
<Button variant="ghost">Cancel</Button>
|
|
3220
|
+
</Modal.Close>
|
|
3221
|
+
<Button variant="primary">Delete</Button>
|
|
3222
|
+
</Modal.Footer>
|
|
3223
|
+
</Modal.Content>
|
|
3224
|
+
</Modal.Root>
|
|
3225
|
+
);</code></pre>
|
|
3226
|
+
</div>
|
|
3227
|
+
<div class="note ok">
|
|
3228
|
+
<div class="row">
|
|
3229
|
+
<span class="ex-name">Controlled</span>
|
|
3230
|
+
<span class="badge ok">story ok</span>
|
|
3231
|
+
</div>
|
|
3232
|
+
|
|
3233
|
+
<div class="hint">Controlled with `open`/`onOpenChange` — the dominant pattern in both apps. Also closes on `Escape`.</div>
|
|
3234
|
+
<pre><code>const Controlled = () => <ControlledExample />;</code></pre>
|
|
3235
|
+
</div>
|
|
3236
|
+
<div class="note ok">
|
|
3237
|
+
<div class="row">
|
|
3238
|
+
<span class="ex-name">Large</span>
|
|
3239
|
+
<span class="badge ok">story ok</span>
|
|
3240
|
+
</div>
|
|
3241
|
+
|
|
3242
|
+
<div class="hint">`size="lg"` widens the surface to 720px; `md` (default) is 540px.</div>
|
|
3243
|
+
<pre><code>const Large = () => (
|
|
3244
|
+
<Modal.Root>
|
|
3245
|
+
<Modal.Trigger asChild>
|
|
3246
|
+
<Button variant="secondary">Open large</Button>
|
|
3247
|
+
</Modal.Trigger>
|
|
3248
|
+
<Modal.Content size="lg">
|
|
3249
|
+
<Modal.Title>Large modal</Modal.Title>
|
|
3250
|
+
<Modal.Body>
|
|
3251
|
+
<p>Use `lg` for wide content like tables or side-by-side forms.</p>
|
|
3252
|
+
</Modal.Body>
|
|
3253
|
+
</Modal.Content>
|
|
3254
|
+
</Modal.Root>
|
|
3255
|
+
);</code></pre>
|
|
3256
|
+
</div>
|
|
3257
|
+
<div class="note ok">
|
|
3258
|
+
<div class="row">
|
|
3259
|
+
<span class="ex-name">Scrollable Body</span>
|
|
3260
|
+
<span class="badge ok">story ok</span>
|
|
3261
|
+
</div>
|
|
3262
|
+
|
|
3263
|
+
<div class="hint">Long content scrolls inside `Body` while title and footer stay pinned.</div>
|
|
3264
|
+
<pre><code>const ScrollableBody = () => (
|
|
3265
|
+
<Modal.Root>
|
|
3266
|
+
<Modal.Trigger asChild>
|
|
3267
|
+
<Button variant="secondary">Open scrollable</Button>
|
|
3268
|
+
</Modal.Trigger>
|
|
3269
|
+
<Modal.Content>
|
|
3270
|
+
<Modal.Title>Terms and conditions</Modal.Title>
|
|
3271
|
+
<Modal.Body>
|
|
3272
|
+
{Array.from({ length: 24 }, (_, i) => (
|
|
3273
|
+
<p key={i} className="mb-4">
|
|
3274
|
+
Section {i + 1}: agents shall maintain active licensure in every state where they
|
|
3275
|
+
transact business, and notify the marketplace of any change in appointment status.
|
|
3276
|
+
</p>
|
|
3277
|
+
))}
|
|
3278
|
+
</Modal.Body>
|
|
3279
|
+
<Modal.Footer>
|
|
3280
|
+
<Modal.Close asChild>
|
|
3281
|
+
<Button variant="primary">Accept</Button>
|
|
3282
|
+
</Modal.Close>
|
|
3283
|
+
</Modal.Footer>
|
|
3284
|
+
</Modal.Content>
|
|
3285
|
+
</Modal.Root>
|
|
3286
|
+
);</code></pre>
|
|
3287
|
+
</div>
|
|
3288
|
+
</div>
|
|
3289
|
+
|
|
3290
|
+
</div>
|
|
3291
|
+
</article>
|
|
3152
3292
|
<article
|
|
3153
3293
|
class="card
|
|
3154
3294
|
no-error
|
|
@@ -3161,9 +3301,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3161
3301
|
<div class="title">
|
|
3162
3302
|
<h2><span class="status-dot dot-ok"></span> Pagination</h2>
|
|
3163
3303
|
<div class="badges">
|
|
3164
|
-
<label for="c-
|
|
3304
|
+
<label for="c-10-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
|
|
3165
3305
|
|
|
3166
|
-
<label for="c-
|
|
3306
|
+
<label for="c-10-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
|
|
3167
3307
|
|
|
3168
3308
|
</div>
|
|
3169
3309
|
</div>
|
|
@@ -3176,9 +3316,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3176
3316
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3177
3317
|
|
|
3178
3318
|
|
|
3179
|
-
<input id="c-
|
|
3319
|
+
<input id="c-10-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3180
3320
|
|
|
3181
|
-
<input id="c-
|
|
3321
|
+
<input id="c-10-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
|
|
3182
3322
|
|
|
3183
3323
|
<div class="panels">
|
|
3184
3324
|
|
|
@@ -3322,9 +3462,9 @@ totalCount: number</code></pre>
|
|
|
3322
3462
|
<div class="title">
|
|
3323
3463
|
<h2><span class="status-dot dot-ok"></span> Progress</h2>
|
|
3324
3464
|
<div class="badges">
|
|
3325
|
-
<label for="c-
|
|
3465
|
+
<label for="c-11-components-progress-props" class="badge ok as-toggle">4 prop types</label>
|
|
3326
3466
|
|
|
3327
|
-
<label for="c-
|
|
3467
|
+
<label for="c-11-components-progress-stories" class="badge ok as-toggle">4 stories</label>
|
|
3328
3468
|
|
|
3329
3469
|
</div>
|
|
3330
3470
|
</div>
|
|
@@ -3337,9 +3477,9 @@ totalCount: number</code></pre>
|
|
|
3337
3477
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3338
3478
|
|
|
3339
3479
|
|
|
3340
|
-
<input id="c-
|
|
3480
|
+
<input id="c-11-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3341
3481
|
|
|
3342
|
-
<input id="c-
|
|
3482
|
+
<input id="c-11-components-progress-props" class="tg tg-props" type="checkbox" hidden />
|
|
3343
3483
|
|
|
3344
3484
|
<div class="panels">
|
|
3345
3485
|
|
|
@@ -3457,7 +3597,7 @@ percentage: number</code></pre>
|
|
|
3457
3597
|
<div class="badges">
|
|
3458
3598
|
|
|
3459
3599
|
|
|
3460
|
-
<label for="c-
|
|
3600
|
+
<label for="c-12-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
3461
3601
|
|
|
3462
3602
|
</div>
|
|
3463
3603
|
</div>
|
|
@@ -3470,7 +3610,7 @@ percentage: number</code></pre>
|
|
|
3470
3610
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3471
3611
|
|
|
3472
3612
|
|
|
3473
|
-
<input id="c-
|
|
3613
|
+
<input id="c-12-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3474
3614
|
|
|
3475
3615
|
|
|
3476
3616
|
|
|
@@ -3564,9 +3704,9 @@ percentage: number</code></pre>
|
|
|
3564
3704
|
<div class="title">
|
|
3565
3705
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
3566
3706
|
<div class="badges">
|
|
3567
|
-
<label for="c-
|
|
3707
|
+
<label for="c-13-components-switch-props" class="badge ok as-toggle">4 prop types</label>
|
|
3568
3708
|
|
|
3569
|
-
<label for="c-
|
|
3709
|
+
<label for="c-13-components-switch-stories" class="badge ok as-toggle">7 stories</label>
|
|
3570
3710
|
|
|
3571
3711
|
</div>
|
|
3572
3712
|
</div>
|
|
@@ -3579,9 +3719,9 @@ percentage: number</code></pre>
|
|
|
3579
3719
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3580
3720
|
|
|
3581
3721
|
|
|
3582
|
-
<input id="c-
|
|
3722
|
+
<input id="c-13-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3583
3723
|
|
|
3584
|
-
<input id="c-
|
|
3724
|
+
<input id="c-13-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
3585
3725
|
|
|
3586
3726
|
<div class="panels">
|
|
3587
3727
|
|
|
@@ -3754,7 +3894,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
3754
3894
|
<div class="badges">
|
|
3755
3895
|
|
|
3756
3896
|
|
|
3757
|
-
<label for="c-
|
|
3897
|
+
<label for="c-14-components-table-stories" class="badge ok as-toggle">9 stories</label>
|
|
3758
3898
|
|
|
3759
3899
|
</div>
|
|
3760
3900
|
</div>
|
|
@@ -3767,7 +3907,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
3767
3907
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3768
3908
|
|
|
3769
3909
|
|
|
3770
|
-
<input id="c-
|
|
3910
|
+
<input id="c-14-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3771
3911
|
|
|
3772
3912
|
|
|
3773
3913
|
|
|
@@ -3929,6 +4069,154 @@ import { Fragment } from "react";</code></pre>
|
|
|
3929
4069
|
|
|
3930
4070
|
</div>
|
|
3931
4071
|
</article>
|
|
4072
|
+
<article
|
|
4073
|
+
class="card
|
|
4074
|
+
no-error
|
|
4075
|
+
no-info
|
|
4076
|
+
no-story-error
|
|
4077
|
+
no-doc-error"
|
|
4078
|
+
role="listitem"
|
|
4079
|
+
aria-label="Tabs.Root">
|
|
4080
|
+
<div class="head">
|
|
4081
|
+
<div class="title">
|
|
4082
|
+
<h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
|
|
4083
|
+
<div class="badges">
|
|
4084
|
+
|
|
4085
|
+
|
|
4086
|
+
<label for="c-15-components-tabs-stories" class="badge ok as-toggle">6 stories</label>
|
|
4087
|
+
|
|
4088
|
+
</div>
|
|
4089
|
+
</div>
|
|
4090
|
+
<div class="meta" title="./src/tabs/tabs.stories.tsx">components-tabs · ./src/tabs/tabs.stories.tsx</div>
|
|
4091
|
+
|
|
4092
|
+
<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>
|
|
4093
|
+
|
|
4094
|
+
</div>
|
|
4095
|
+
|
|
4096
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4097
|
+
|
|
4098
|
+
|
|
4099
|
+
<input id="c-15-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4100
|
+
|
|
4101
|
+
|
|
4102
|
+
|
|
4103
|
+
<div class="panels">
|
|
4104
|
+
|
|
4105
|
+
|
|
4106
|
+
|
|
4107
|
+
|
|
4108
|
+
<div class="panel panel-stories">
|
|
4109
|
+
|
|
4110
|
+
|
|
4111
|
+
|
|
4112
|
+
<div class="note ok">
|
|
4113
|
+
<div class="row">
|
|
4114
|
+
<span class="ex-name">Imports</span>
|
|
4115
|
+
</div>
|
|
4116
|
+
<pre><code>import { Tabs } from "@agentero/design-system";</code></pre>
|
|
4117
|
+
</div>
|
|
4118
|
+
|
|
4119
|
+
|
|
4120
|
+
<div class="note ok">
|
|
4121
|
+
<div class="row">
|
|
4122
|
+
<span class="ex-name">Default</span>
|
|
4123
|
+
<span class="badge ok">story ok</span>
|
|
4124
|
+
</div>
|
|
4125
|
+
|
|
4126
|
+
<div class="hint">`line` (default): the active tab is marked with an animated underline.</div>
|
|
4127
|
+
<pre><code>const Default = () => <Tabs.Root variant="line" defaultValue="overview">
|
|
4128
|
+
<Tabs.List>
|
|
4129
|
+
<TabItems />
|
|
4130
|
+
</Tabs.List>
|
|
4131
|
+
<TabPanels />
|
|
4132
|
+
</Tabs.Root>;</code></pre>
|
|
4133
|
+
</div>
|
|
4134
|
+
<div class="note ok">
|
|
4135
|
+
<div class="row">
|
|
4136
|
+
<span class="ex-name">Enclosed</span>
|
|
4137
|
+
<span class="badge ok">story ok</span>
|
|
4138
|
+
</div>
|
|
4139
|
+
|
|
4140
|
+
<div class="hint">`enclosed` renders segmented pills; the active tab sits on a raised surface.</div>
|
|
4141
|
+
<pre><code>const Enclosed = () => (
|
|
4142
|
+
<Tabs.Root variant="enclosed" defaultValue="overview">
|
|
4143
|
+
<Tabs.List>
|
|
4144
|
+
<TabItems />
|
|
4145
|
+
</Tabs.List>
|
|
4146
|
+
<TabPanels />
|
|
4147
|
+
</Tabs.Root>
|
|
4148
|
+
);</code></pre>
|
|
4149
|
+
</div>
|
|
4150
|
+
<div class="note ok">
|
|
4151
|
+
<div class="row">
|
|
4152
|
+
<span class="ex-name">Buttons</span>
|
|
4153
|
+
<span class="badge ok">story ok</span>
|
|
4154
|
+
</div>
|
|
4155
|
+
|
|
4156
|
+
<div class="hint">`button` renders button-like tabs, with room for a leading icon per trigger.</div>
|
|
4157
|
+
<pre><code>const Buttons = () => (
|
|
4158
|
+
<Tabs.Root variant="button" defaultValue="overview">
|
|
4159
|
+
<Tabs.List>
|
|
4160
|
+
<TabItems />
|
|
4161
|
+
</Tabs.List>
|
|
4162
|
+
<TabPanels />
|
|
4163
|
+
</Tabs.Root>
|
|
4164
|
+
);</code></pre>
|
|
4165
|
+
</div>
|
|
4166
|
+
<div class="note ok">
|
|
4167
|
+
<div class="row">
|
|
4168
|
+
<span class="ex-name">Positions</span>
|
|
4169
|
+
<span class="badge ok">story ok</span>
|
|
4170
|
+
</div>
|
|
4171
|
+
|
|
4172
|
+
<div class="hint">`position` aligns the tab list within the row (`start` is the default).</div>
|
|
4173
|
+
<pre><code>const Positions = () => (
|
|
4174
|
+
<div className="flex flex-col gap-8">
|
|
4175
|
+
{(['start', 'center', 'end'] as const).map(position => (
|
|
4176
|
+
<Tabs.Root key={position} variant="enclosed" position={position} defaultValue="overview">
|
|
4177
|
+
<Tabs.List>
|
|
4178
|
+
<TabItems />
|
|
4179
|
+
</Tabs.List>
|
|
4180
|
+
<TabPanels />
|
|
4181
|
+
</Tabs.Root>
|
|
4182
|
+
))}
|
|
4183
|
+
</div>
|
|
4184
|
+
);</code></pre>
|
|
4185
|
+
</div>
|
|
4186
|
+
<div class="note ok">
|
|
4187
|
+
<div class="row">
|
|
4188
|
+
<span class="ex-name">Full Width</span>
|
|
4189
|
+
<span class="badge ok">story ok</span>
|
|
4190
|
+
</div>
|
|
4191
|
+
|
|
4192
|
+
<div class="hint">`position="full"` stretches the tab list to fill the available width.</div>
|
|
4193
|
+
<pre><code>const FullWidth = () => (
|
|
4194
|
+
<Tabs.Root variant="enclosed" position="full" defaultValue="overview">
|
|
4195
|
+
<Tabs.List>
|
|
4196
|
+
<TabItems />
|
|
4197
|
+
</Tabs.List>
|
|
4198
|
+
<TabPanels />
|
|
4199
|
+
</Tabs.Root>
|
|
4200
|
+
);</code></pre>
|
|
4201
|
+
</div>
|
|
4202
|
+
<div class="note ok">
|
|
4203
|
+
<div class="row">
|
|
4204
|
+
<span class="ex-name">Switch Tabs</span>
|
|
4205
|
+
<span class="badge ok">story ok</span>
|
|
4206
|
+
</div>
|
|
4207
|
+
|
|
4208
|
+
<div class="hint">Selecting a tab reveals its panel and hides the others.</div>
|
|
4209
|
+
<pre><code>const SwitchTabs = () => <Tabs.Root variant="line" defaultValue="overview">
|
|
4210
|
+
<Tabs.List>
|
|
4211
|
+
<TabItems />
|
|
4212
|
+
</Tabs.List>
|
|
4213
|
+
<TabPanels />
|
|
4214
|
+
</Tabs.Root>;</code></pre>
|
|
4215
|
+
</div>
|
|
4216
|
+
</div>
|
|
4217
|
+
|
|
4218
|
+
</div>
|
|
4219
|
+
</article>
|
|
3932
4220
|
<article
|
|
3933
4221
|
class="card
|
|
3934
4222
|
no-error
|
|
@@ -3941,9 +4229,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3941
4229
|
<div class="title">
|
|
3942
4230
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
3943
4231
|
<div class="badges">
|
|
3944
|
-
<label for="c-
|
|
4232
|
+
<label for="c-16-components-tag-props" class="badge ok as-toggle">6 prop types</label>
|
|
3945
4233
|
|
|
3946
|
-
<label for="c-
|
|
4234
|
+
<label for="c-16-components-tag-stories" class="badge ok as-toggle">10 stories</label>
|
|
3947
4235
|
|
|
3948
4236
|
</div>
|
|
3949
4237
|
</div>
|
|
@@ -3956,9 +4244,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3956
4244
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3957
4245
|
|
|
3958
4246
|
|
|
3959
|
-
<input id="c-
|
|
4247
|
+
<input id="c-16-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3960
4248
|
|
|
3961
|
-
<input id="c-
|
|
4249
|
+
<input id="c-16-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
3962
4250
|
|
|
3963
4251
|
<div class="panels">
|
|
3964
4252
|
|
|
@@ -4315,9 +4603,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4315
4603
|
<div class="title">
|
|
4316
4604
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
4317
4605
|
<div class="badges">
|
|
4318
|
-
<label for="c-
|
|
4606
|
+
<label for="c-17-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
4319
4607
|
|
|
4320
|
-
<label for="c-
|
|
4608
|
+
<label for="c-17-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
4321
4609
|
|
|
4322
4610
|
</div>
|
|
4323
4611
|
</div>
|
|
@@ -4330,9 +4618,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4330
4618
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4331
4619
|
|
|
4332
4620
|
|
|
4333
|
-
<input id="c-
|
|
4621
|
+
<input id="c-17-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4334
4622
|
|
|
4335
|
-
<input id="c-
|
|
4623
|
+
<input id="c-17-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
4336
4624
|
|
|
4337
4625
|
<div class="panels">
|
|
4338
4626
|
|
|
@@ -4741,9 +5029,9 @@ visibleToasts?: number</code></pre>
|
|
|
4741
5029
|
<div class="title">
|
|
4742
5030
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
4743
5031
|
<div class="badges">
|
|
4744
|
-
<label for="c-
|
|
5032
|
+
<label for="c-18-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
|
|
4745
5033
|
|
|
4746
|
-
<label for="c-
|
|
5034
|
+
<label for="c-18-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
4747
5035
|
|
|
4748
5036
|
</div>
|
|
4749
5037
|
</div>
|
|
@@ -4756,9 +5044,9 @@ visibleToasts?: number</code></pre>
|
|
|
4756
5044
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4757
5045
|
|
|
4758
5046
|
|
|
4759
|
-
<input id="c-
|
|
5047
|
+
<input id="c-18-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4760
5048
|
|
|
4761
|
-
<input id="c-
|
|
5049
|
+
<input id="c-18-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
4762
5050
|
|
|
4763
5051
|
<div class="panels">
|
|
4764
5052
|
|