@agentero/design-system 0.23.5 → 0.24.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 +209 -58
- package/mcp/manifests/components.json +1 -1
- package/package.json +6 -1
- package/src/command/command.d.ts +170 -0
- package/src/command/command.js +71 -0
- package/src/command/icons.d.ts +9 -0
- package/src/command/icons.js +13 -0
- package/src/command/index.d.ts +1 -0
- package/src/command/index.js +2 -0
- package/src/modal/modal.js +3 -3
|
@@ -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">25 components ok</span><span class="filter-pill ok" aria-disabled="true">190 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.6s</strong>.
|
|
586
586
|
</div>
|
|
587
587
|
<h2 class="section-title">Components</h2>
|
|
588
588
|
<div class="grid" role="list">
|
|
@@ -2324,6 +2324,157 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2324
2324
|
|
|
2325
2325
|
</div>
|
|
2326
2326
|
</article>
|
|
2327
|
+
<article
|
|
2328
|
+
class="card
|
|
2329
|
+
no-error
|
|
2330
|
+
no-info
|
|
2331
|
+
no-story-error
|
|
2332
|
+
no-doc-error"
|
|
2333
|
+
role="listitem"
|
|
2334
|
+
aria-label="Command.Root">
|
|
2335
|
+
<div class="head">
|
|
2336
|
+
<div class="title">
|
|
2337
|
+
<h2><span class="status-dot dot-ok"></span> Command.Root</h2>
|
|
2338
|
+
<div class="badges">
|
|
2339
|
+
|
|
2340
|
+
|
|
2341
|
+
<label for="c-6-components-command-stories" class="badge ok as-toggle">5 stories</label>
|
|
2342
|
+
|
|
2343
|
+
</div>
|
|
2344
|
+
</div>
|
|
2345
|
+
<div class="meta" title="./src/command/command.stories.tsx">components-command · ./src/command/command.stories.tsx</div>
|
|
2346
|
+
|
|
2347
|
+
<div class="hint">Command is a filterable list built on `cmdk`. Type to narrow the options, navigate with the arrow keys, select with Enter. It carries its own panel chrome, so dropping it inside a `Popover.Content` yields a combobox.</div>
|
|
2348
|
+
|
|
2349
|
+
</div>
|
|
2350
|
+
|
|
2351
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2352
|
+
|
|
2353
|
+
|
|
2354
|
+
<input id="c-6-components-command-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2355
|
+
|
|
2356
|
+
|
|
2357
|
+
|
|
2358
|
+
<div class="panels">
|
|
2359
|
+
|
|
2360
|
+
|
|
2361
|
+
|
|
2362
|
+
|
|
2363
|
+
<div class="panel panel-stories">
|
|
2364
|
+
|
|
2365
|
+
|
|
2366
|
+
|
|
2367
|
+
<div class="note ok">
|
|
2368
|
+
<div class="row">
|
|
2369
|
+
<span class="ex-name">Imports</span>
|
|
2370
|
+
</div>
|
|
2371
|
+
<pre><code>import { Command } from "@agentero/design-system";</code></pre>
|
|
2372
|
+
</div>
|
|
2373
|
+
|
|
2374
|
+
|
|
2375
|
+
<div class="note ok">
|
|
2376
|
+
<div class="row">
|
|
2377
|
+
<span class="ex-name">Default</span>
|
|
2378
|
+
<span class="badge ok">story ok</span>
|
|
2379
|
+
</div>
|
|
2380
|
+
|
|
2381
|
+
<div class="hint">Search field over a flat list. Typing filters the rows through cmdk's default scorer.</div>
|
|
2382
|
+
<pre><code>const Default = () => (
|
|
2383
|
+
<Command.Root label="Search commands">
|
|
2384
|
+
<Command.Input placeholder="Type a command or search..." />
|
|
2385
|
+
<Command.List>
|
|
2386
|
+
{OPTIONS.map(option => (
|
|
2387
|
+
<Command.Item key={option}>{option}</Command.Item>
|
|
2388
|
+
))}
|
|
2389
|
+
</Command.List>
|
|
2390
|
+
<Command.Empty>No results found.</Command.Empty>
|
|
2391
|
+
</Command.Root>
|
|
2392
|
+
);</code></pre>
|
|
2393
|
+
</div>
|
|
2394
|
+
<div class="note ok">
|
|
2395
|
+
<div class="row">
|
|
2396
|
+
<span class="ex-name">Empty State</span>
|
|
2397
|
+
<span class="badge ok">story ok</span>
|
|
2398
|
+
</div>
|
|
2399
|
+
|
|
2400
|
+
<div class="hint">`Empty` renders only while nothing matches, so it can live permanently in the list.</div>
|
|
2401
|
+
<pre><code>const EmptyState = () => (
|
|
2402
|
+
<Command.Root label="Search commands">
|
|
2403
|
+
<Command.Input placeholder="Search..." />
|
|
2404
|
+
<Command.List>
|
|
2405
|
+
{OPTIONS.map(option => (
|
|
2406
|
+
<Command.Item key={option}>{option}</Command.Item>
|
|
2407
|
+
))}
|
|
2408
|
+
</Command.List>
|
|
2409
|
+
<Command.Empty>No results found for your search.</Command.Empty>
|
|
2410
|
+
</Command.Root>
|
|
2411
|
+
);</code></pre>
|
|
2412
|
+
</div>
|
|
2413
|
+
<div class="note ok">
|
|
2414
|
+
<div class="row">
|
|
2415
|
+
<span class="ex-name">Grouped</span>
|
|
2416
|
+
<span class="badge ok">story ok</span>
|
|
2417
|
+
</div>
|
|
2418
|
+
|
|
2419
|
+
<div class="hint">`Group` sections related options. It ships unstyled, so the heading is styled per usage through the `[cmdk-group-heading]` hook.</div>
|
|
2420
|
+
<pre><code>const Grouped = () => (
|
|
2421
|
+
<Command.Root label="Search commands">
|
|
2422
|
+
<Command.Input placeholder="Search..." />
|
|
2423
|
+
<Command.List>
|
|
2424
|
+
<Command.Group heading="Account" className={GROUP_HEADING}>
|
|
2425
|
+
<Command.Item>Profile</Command.Item>
|
|
2426
|
+
<Command.Item>Billing</Command.Item>
|
|
2427
|
+
</Command.Group>
|
|
2428
|
+
<Command.Group heading="Workspace" className={GROUP_HEADING}>
|
|
2429
|
+
<Command.Item>Projects</Command.Item>
|
|
2430
|
+
<Command.Item>Members</Command.Item>
|
|
2431
|
+
</Command.Group>
|
|
2432
|
+
</Command.List>
|
|
2433
|
+
<Command.Empty>No results found.</Command.Empty>
|
|
2434
|
+
</Command.Root>
|
|
2435
|
+
);</code></pre>
|
|
2436
|
+
</div>
|
|
2437
|
+
<div class="note ok">
|
|
2438
|
+
<div class="row">
|
|
2439
|
+
<span class="ex-name">Scrolling List</span>
|
|
2440
|
+
<span class="badge ok">story ok</span>
|
|
2441
|
+
</div>
|
|
2442
|
+
|
|
2443
|
+
<div class="hint">With more rows than the list cap fits, the list scrolls — by wheel, or by keyboard: cmdk scrolls the active row into view as the arrow keys move it, and `scroll-py-2` keeps that row off the container edges.</div>
|
|
2444
|
+
<pre><code>const ScrollingList = () => (
|
|
2445
|
+
<Command.Root label="Search states">
|
|
2446
|
+
<Command.Input placeholder="Search states..." />
|
|
2447
|
+
<Command.List>
|
|
2448
|
+
{US_STATES.map(state => (
|
|
2449
|
+
<Command.Item key={state}>{state}</Command.Item>
|
|
2450
|
+
))}
|
|
2451
|
+
</Command.List>
|
|
2452
|
+
<Command.Empty>No states found.</Command.Empty>
|
|
2453
|
+
</Command.Root>
|
|
2454
|
+
);</code></pre>
|
|
2455
|
+
</div>
|
|
2456
|
+
<div class="note ok">
|
|
2457
|
+
<div class="row">
|
|
2458
|
+
<span class="ex-name">Keyboard Navigation</span>
|
|
2459
|
+
<span class="badge ok">story ok</span>
|
|
2460
|
+
</div>
|
|
2461
|
+
|
|
2462
|
+
|
|
2463
|
+
<pre><code>const KeyboardNavigation = () => <Command.Root label="Search commands">
|
|
2464
|
+
<Command.Input placeholder="Search..." />
|
|
2465
|
+
<Command.List>
|
|
2466
|
+
<Command.Item value="home" keywords={['Homeowners']} onSelect={handleSelect}>Homeowners
|
|
2467
|
+
</Command.Item>
|
|
2468
|
+
<Command.Item value="auto" keywords={['Auto']} onSelect={handleSelect}>Auto
|
|
2469
|
+
</Command.Item>
|
|
2470
|
+
</Command.List>
|
|
2471
|
+
<Command.Empty>No results found.</Command.Empty>
|
|
2472
|
+
</Command.Root>;</code></pre>
|
|
2473
|
+
</div>
|
|
2474
|
+
</div>
|
|
2475
|
+
|
|
2476
|
+
</div>
|
|
2477
|
+
</article>
|
|
2327
2478
|
<article
|
|
2328
2479
|
class="card
|
|
2329
2480
|
no-error
|
|
@@ -2338,7 +2489,7 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2338
2489
|
<div class="badges">
|
|
2339
2490
|
|
|
2340
2491
|
|
|
2341
|
-
<label for="c-
|
|
2492
|
+
<label for="c-7-components-datatable-stories" class="badge ok as-toggle">4 stories</label>
|
|
2342
2493
|
|
|
2343
2494
|
</div>
|
|
2344
2495
|
</div>
|
|
@@ -2351,7 +2502,7 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2351
2502
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2352
2503
|
|
|
2353
2504
|
|
|
2354
|
-
<input id="c-
|
|
2505
|
+
<input id="c-7-components-datatable-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2355
2506
|
|
|
2356
2507
|
|
|
2357
2508
|
|
|
@@ -2481,9 +2632,9 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2481
2632
|
<div class="title">
|
|
2482
2633
|
<h2><span class="status-dot dot-ok"></span> Divider</h2>
|
|
2483
2634
|
<div class="badges">
|
|
2484
|
-
<label for="c-
|
|
2635
|
+
<label for="c-8-components-divider-props" class="badge ok as-toggle">2 prop types</label>
|
|
2485
2636
|
|
|
2486
|
-
<label for="c-
|
|
2637
|
+
<label for="c-8-components-divider-stories" class="badge ok as-toggle">10 stories</label>
|
|
2487
2638
|
|
|
2488
2639
|
</div>
|
|
2489
2640
|
</div>
|
|
@@ -2496,9 +2647,9 @@ variant?: ButtonVariantType</code></pre>
|
|
|
2496
2647
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2497
2648
|
|
|
2498
2649
|
|
|
2499
|
-
<input id="c-
|
|
2650
|
+
<input id="c-8-components-divider-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2500
2651
|
|
|
2501
|
-
<input id="c-
|
|
2652
|
+
<input id="c-8-components-divider-props" class="tg tg-props" type="checkbox" hidden />
|
|
2502
2653
|
|
|
2503
2654
|
<div class="panels">
|
|
2504
2655
|
|
|
@@ -2778,7 +2929,7 @@ label?: ReactNode</code></pre>
|
|
|
2778
2929
|
<div class="badges">
|
|
2779
2930
|
|
|
2780
2931
|
|
|
2781
|
-
<label for="c-
|
|
2932
|
+
<label for="c-9-components-dropdownmenu-stories" class="badge ok as-toggle">7 stories</label>
|
|
2782
2933
|
|
|
2783
2934
|
</div>
|
|
2784
2935
|
</div>
|
|
@@ -2791,7 +2942,7 @@ label?: ReactNode</code></pre>
|
|
|
2791
2942
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2792
2943
|
|
|
2793
2944
|
|
|
2794
|
-
<input id="c-
|
|
2945
|
+
<input id="c-9-components-dropdownmenu-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2795
2946
|
|
|
2796
2947
|
|
|
2797
2948
|
|
|
@@ -3162,7 +3313,7 @@ label?: ReactNode</code></pre>
|
|
|
3162
3313
|
<div class="badges">
|
|
3163
3314
|
|
|
3164
3315
|
|
|
3165
|
-
<label for="c-
|
|
3316
|
+
<label for="c-10-components-hovercard-stories" class="badge ok as-toggle">7 stories</label>
|
|
3166
3317
|
|
|
3167
3318
|
</div>
|
|
3168
3319
|
</div>
|
|
@@ -3175,7 +3326,7 @@ label?: ReactNode</code></pre>
|
|
|
3175
3326
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3176
3327
|
|
|
3177
3328
|
|
|
3178
|
-
<input id="c-
|
|
3329
|
+
<input id="c-10-components-hovercard-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3179
3330
|
|
|
3180
3331
|
|
|
3181
3332
|
|
|
@@ -3388,9 +3539,9 @@ label?: ReactNode</code></pre>
|
|
|
3388
3539
|
<div class="title">
|
|
3389
3540
|
<h2><span class="status-dot dot-ok"></span> Label</h2>
|
|
3390
3541
|
<div class="badges">
|
|
3391
|
-
<label for="c-
|
|
3542
|
+
<label for="c-11-components-label-props" class="badge ok as-toggle">3 prop types</label>
|
|
3392
3543
|
|
|
3393
|
-
<label for="c-
|
|
3544
|
+
<label for="c-11-components-label-stories" class="badge ok as-toggle">4 stories</label>
|
|
3394
3545
|
|
|
3395
3546
|
</div>
|
|
3396
3547
|
</div>
|
|
@@ -3403,9 +3554,9 @@ label?: ReactNode</code></pre>
|
|
|
3403
3554
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3404
3555
|
|
|
3405
3556
|
|
|
3406
|
-
<input id="c-
|
|
3557
|
+
<input id="c-11-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3407
3558
|
|
|
3408
|
-
<input id="c-
|
|
3559
|
+
<input id="c-11-components-label-props" class="tg tg-props" type="checkbox" hidden />
|
|
3409
3560
|
|
|
3410
3561
|
<div class="panels">
|
|
3411
3562
|
|
|
@@ -3500,9 +3651,9 @@ required?: boolean = false</code></pre>
|
|
|
3500
3651
|
<div class="title">
|
|
3501
3652
|
<h2><span class="status-dot dot-ok"></span> Loading</h2>
|
|
3502
3653
|
<div class="badges">
|
|
3503
|
-
<label for="c-
|
|
3654
|
+
<label for="c-12-components-loading-props" class="badge ok as-toggle">1 prop type</label>
|
|
3504
3655
|
|
|
3505
|
-
<label for="c-
|
|
3656
|
+
<label for="c-12-components-loading-stories" class="badge ok as-toggle">7 stories</label>
|
|
3506
3657
|
|
|
3507
3658
|
</div>
|
|
3508
3659
|
</div>
|
|
@@ -3515,9 +3666,9 @@ required?: boolean = false</code></pre>
|
|
|
3515
3666
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3516
3667
|
|
|
3517
3668
|
|
|
3518
|
-
<input id="c-
|
|
3669
|
+
<input id="c-12-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3519
3670
|
|
|
3520
|
-
<input id="c-
|
|
3671
|
+
<input id="c-12-components-loading-props" class="tg tg-props" type="checkbox" hidden />
|
|
3521
3672
|
|
|
3522
3673
|
<div class="panels">
|
|
3523
3674
|
|
|
@@ -3659,7 +3810,7 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3659
3810
|
<div class="badges">
|
|
3660
3811
|
|
|
3661
3812
|
|
|
3662
|
-
<label for="c-
|
|
3813
|
+
<label for="c-13-components-modal-stories" class="badge ok as-toggle">5 stories</label>
|
|
3663
3814
|
|
|
3664
3815
|
</div>
|
|
3665
3816
|
</div>
|
|
@@ -3672,7 +3823,7 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3672
3823
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3673
3824
|
|
|
3674
3825
|
|
|
3675
|
-
<input id="c-
|
|
3826
|
+
<input id="c-13-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3676
3827
|
|
|
3677
3828
|
|
|
3678
3829
|
|
|
@@ -3824,9 +3975,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3824
3975
|
<div class="title">
|
|
3825
3976
|
<h2><span class="status-dot dot-ok"></span> Pagination</h2>
|
|
3826
3977
|
<div class="badges">
|
|
3827
|
-
<label for="c-
|
|
3978
|
+
<label for="c-14-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
|
|
3828
3979
|
|
|
3829
|
-
<label for="c-
|
|
3980
|
+
<label for="c-14-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
|
|
3830
3981
|
|
|
3831
3982
|
</div>
|
|
3832
3983
|
</div>
|
|
@@ -3839,9 +3990,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3839
3990
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3840
3991
|
|
|
3841
3992
|
|
|
3842
|
-
<input id="c-
|
|
3993
|
+
<input id="c-14-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3843
3994
|
|
|
3844
|
-
<input id="c-
|
|
3995
|
+
<input id="c-14-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
|
|
3845
3996
|
|
|
3846
3997
|
<div class="panels">
|
|
3847
3998
|
|
|
@@ -3987,7 +4138,7 @@ totalCount: number</code></pre>
|
|
|
3987
4138
|
<div class="badges">
|
|
3988
4139
|
|
|
3989
4140
|
|
|
3990
|
-
<label for="c-
|
|
4141
|
+
<label for="c-15-components-popover-stories" class="badge ok as-toggle">4 stories</label>
|
|
3991
4142
|
|
|
3992
4143
|
</div>
|
|
3993
4144
|
</div>
|
|
@@ -4000,7 +4151,7 @@ totalCount: number</code></pre>
|
|
|
4000
4151
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4001
4152
|
|
|
4002
4153
|
|
|
4003
|
-
<input id="c-
|
|
4154
|
+
<input id="c-15-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4004
4155
|
|
|
4005
4156
|
|
|
4006
4157
|
|
|
@@ -4134,9 +4285,9 @@ totalCount: number</code></pre>
|
|
|
4134
4285
|
<div class="title">
|
|
4135
4286
|
<h2><span class="status-dot dot-ok"></span> Progress</h2>
|
|
4136
4287
|
<div class="badges">
|
|
4137
|
-
<label for="c-
|
|
4288
|
+
<label for="c-16-components-progress-props" class="badge ok as-toggle">4 prop types</label>
|
|
4138
4289
|
|
|
4139
|
-
<label for="c-
|
|
4290
|
+
<label for="c-16-components-progress-stories" class="badge ok as-toggle">4 stories</label>
|
|
4140
4291
|
|
|
4141
4292
|
</div>
|
|
4142
4293
|
</div>
|
|
@@ -4149,9 +4300,9 @@ totalCount: number</code></pre>
|
|
|
4149
4300
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4150
4301
|
|
|
4151
4302
|
|
|
4152
|
-
<input id="c-
|
|
4303
|
+
<input id="c-16-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4153
4304
|
|
|
4154
|
-
<input id="c-
|
|
4305
|
+
<input id="c-16-components-progress-props" class="tg tg-props" type="checkbox" hidden />
|
|
4155
4306
|
|
|
4156
4307
|
<div class="panels">
|
|
4157
4308
|
|
|
@@ -4269,7 +4420,7 @@ percentage: number</code></pre>
|
|
|
4269
4420
|
<div class="badges">
|
|
4270
4421
|
|
|
4271
4422
|
|
|
4272
|
-
<label for="c-
|
|
4423
|
+
<label for="c-17-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
4273
4424
|
|
|
4274
4425
|
</div>
|
|
4275
4426
|
</div>
|
|
@@ -4282,7 +4433,7 @@ percentage: number</code></pre>
|
|
|
4282
4433
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4283
4434
|
|
|
4284
4435
|
|
|
4285
|
-
<input id="c-
|
|
4436
|
+
<input id="c-17-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4286
4437
|
|
|
4287
4438
|
|
|
4288
4439
|
|
|
@@ -4376,9 +4527,9 @@ percentage: number</code></pre>
|
|
|
4376
4527
|
<div class="title">
|
|
4377
4528
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
4378
4529
|
<div class="badges">
|
|
4379
|
-
<label for="c-
|
|
4530
|
+
<label for="c-18-components-switch-props" class="badge ok as-toggle">4 prop types</label>
|
|
4380
4531
|
|
|
4381
|
-
<label for="c-
|
|
4532
|
+
<label for="c-18-components-switch-stories" class="badge ok as-toggle">7 stories</label>
|
|
4382
4533
|
|
|
4383
4534
|
</div>
|
|
4384
4535
|
</div>
|
|
@@ -4391,9 +4542,9 @@ percentage: number</code></pre>
|
|
|
4391
4542
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4392
4543
|
|
|
4393
4544
|
|
|
4394
|
-
<input id="c-
|
|
4545
|
+
<input id="c-18-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4395
4546
|
|
|
4396
|
-
<input id="c-
|
|
4547
|
+
<input id="c-18-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
4397
4548
|
|
|
4398
4549
|
<div class="panels">
|
|
4399
4550
|
|
|
@@ -4566,7 +4717,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
4566
4717
|
<div class="badges">
|
|
4567
4718
|
|
|
4568
4719
|
|
|
4569
|
-
<label for="c-
|
|
4720
|
+
<label for="c-19-components-table-stories" class="badge ok as-toggle">9 stories</label>
|
|
4570
4721
|
|
|
4571
4722
|
</div>
|
|
4572
4723
|
</div>
|
|
@@ -4579,7 +4730,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
4579
4730
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4580
4731
|
|
|
4581
4732
|
|
|
4582
|
-
<input id="c-
|
|
4733
|
+
<input id="c-19-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4583
4734
|
|
|
4584
4735
|
|
|
4585
4736
|
|
|
@@ -4755,7 +4906,7 @@ import { Fragment } from "react";</code></pre>
|
|
|
4755
4906
|
<div class="badges">
|
|
4756
4907
|
|
|
4757
4908
|
|
|
4758
|
-
<label for="c-
|
|
4909
|
+
<label for="c-20-components-tabs-stories" class="badge ok as-toggle">7 stories</label>
|
|
4759
4910
|
|
|
4760
4911
|
</div>
|
|
4761
4912
|
</div>
|
|
@@ -4768,7 +4919,7 @@ import { Fragment } from "react";</code></pre>
|
|
|
4768
4919
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4769
4920
|
|
|
4770
4921
|
|
|
4771
|
-
<input id="c-
|
|
4922
|
+
<input id="c-20-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4772
4923
|
|
|
4773
4924
|
|
|
4774
4925
|
|
|
@@ -4921,9 +5072,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
4921
5072
|
<div class="title">
|
|
4922
5073
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
4923
5074
|
<div class="badges">
|
|
4924
|
-
<label for="c-
|
|
5075
|
+
<label for="c-21-components-tag-props" class="badge ok as-toggle">6 prop types</label>
|
|
4925
5076
|
|
|
4926
|
-
<label for="c-
|
|
5077
|
+
<label for="c-21-components-tag-stories" class="badge ok as-toggle">10 stories</label>
|
|
4927
5078
|
|
|
4928
5079
|
</div>
|
|
4929
5080
|
</div>
|
|
@@ -4936,9 +5087,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
4936
5087
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4937
5088
|
|
|
4938
5089
|
|
|
4939
|
-
<input id="c-
|
|
5090
|
+
<input id="c-21-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4940
5091
|
|
|
4941
|
-
<input id="c-
|
|
5092
|
+
<input id="c-21-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
4942
5093
|
|
|
4943
5094
|
<div class="panels">
|
|
4944
5095
|
|
|
@@ -5295,9 +5446,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
5295
5446
|
<div class="title">
|
|
5296
5447
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
5297
5448
|
<div class="badges">
|
|
5298
|
-
<label for="c-
|
|
5449
|
+
<label for="c-22-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
5299
5450
|
|
|
5300
|
-
<label for="c-
|
|
5451
|
+
<label for="c-22-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
5301
5452
|
|
|
5302
5453
|
</div>
|
|
5303
5454
|
</div>
|
|
@@ -5310,9 +5461,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
5310
5461
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5311
5462
|
|
|
5312
5463
|
|
|
5313
|
-
<input id="c-
|
|
5464
|
+
<input id="c-22-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5314
5465
|
|
|
5315
|
-
<input id="c-
|
|
5466
|
+
<input id="c-22-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
5316
5467
|
|
|
5317
5468
|
<div class="panels">
|
|
5318
5469
|
|
|
@@ -5721,9 +5872,9 @@ visibleToasts?: number</code></pre>
|
|
|
5721
5872
|
<div class="title">
|
|
5722
5873
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
5723
5874
|
<div class="badges">
|
|
5724
|
-
<label for="c-
|
|
5875
|
+
<label for="c-23-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
|
|
5725
5876
|
|
|
5726
|
-
<label for="c-
|
|
5877
|
+
<label for="c-23-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
5727
5878
|
|
|
5728
5879
|
</div>
|
|
5729
5880
|
</div>
|
|
@@ -5736,9 +5887,9 @@ visibleToasts?: number</code></pre>
|
|
|
5736
5887
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5737
5888
|
|
|
5738
5889
|
|
|
5739
|
-
<input id="c-
|
|
5890
|
+
<input id="c-23-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5740
5891
|
|
|
5741
|
-
<input id="c-
|
|
5892
|
+
<input id="c-23-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
5742
5893
|
|
|
5743
5894
|
<div class="panels">
|
|
5744
5895
|
|
|
@@ -5903,9 +6054,9 @@ sideOffset?: number = 4</code></pre>
|
|
|
5903
6054
|
<div class="title">
|
|
5904
6055
|
<h2><span class="status-dot dot-ok"></span> ValidationList</h2>
|
|
5905
6056
|
<div class="badges">
|
|
5906
|
-
<label for="c-
|
|
6057
|
+
<label for="c-24-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
|
|
5907
6058
|
|
|
5908
|
-
<label for="c-
|
|
6059
|
+
<label for="c-24-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
|
|
5909
6060
|
|
|
5910
6061
|
</div>
|
|
5911
6062
|
</div>
|
|
@@ -5918,9 +6069,9 @@ sideOffset?: number = 4</code></pre>
|
|
|
5918
6069
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5919
6070
|
|
|
5920
6071
|
|
|
5921
|
-
<input id="c-
|
|
6072
|
+
<input id="c-24-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5922
6073
|
|
|
5923
|
-
<input id="c-
|
|
6074
|
+
<input id="c-24-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
|
|
5924
6075
|
|
|
5925
6076
|
<div class="panels">
|
|
5926
6077
|
|