@agentero/design-system 0.10.0 → 0.11.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 +380 -6
- package/mcp/manifests/components.json +1 -1
- package/package.json +5 -1
- package/src/tag/index.d.ts +2 -0
- package/src/tag/index.js +2 -0
- package/src/tag/tag.d.ts +160 -0
- package/src/tag/tag.js +129 -0
- package/theme/base.css +52 -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">12 components ok</span><span class="filter-pill ok" aria-disabled="true">127 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.0s</strong>.
|
|
586
586
|
</div>
|
|
587
587
|
<h2 class="section-title">Components</h2>
|
|
588
588
|
<div class="grid" role="list">
|
|
@@ -3409,6 +3409,380 @@ import { Fragment } from "react";</code></pre>
|
|
|
3409
3409
|
|
|
3410
3410
|
</div>
|
|
3411
3411
|
</article>
|
|
3412
|
+
<article
|
|
3413
|
+
class="card
|
|
3414
|
+
no-error
|
|
3415
|
+
no-info
|
|
3416
|
+
no-story-error
|
|
3417
|
+
no-doc-error"
|
|
3418
|
+
role="listitem"
|
|
3419
|
+
aria-label="Tag">
|
|
3420
|
+
<div class="head">
|
|
3421
|
+
<div class="title">
|
|
3422
|
+
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
3423
|
+
<div class="badges">
|
|
3424
|
+
<label for="c-10-components-tag-props" class="badge ok as-toggle">6 prop types</label>
|
|
3425
|
+
|
|
3426
|
+
<label for="c-10-components-tag-stories" class="badge ok as-toggle">10 stories</label>
|
|
3427
|
+
|
|
3428
|
+
</div>
|
|
3429
|
+
</div>
|
|
3430
|
+
<div class="meta" title="./src/tag/tag.stories.tsx">components-tag · ./src/tag/tag.stories.tsx</div>
|
|
3431
|
+
|
|
3432
|
+
<div class="hint">Tag is a compact semantic label for statuses, categories, counts, and attributes. Pick `color` for meaning, `variant` for fill emphasis, and `size` for prominence. A plain Tag is a static badge; pass `asChild` to make it an interactive link or button, which adds the pointer cursor and hover fill.</div>
|
|
3433
|
+
|
|
3434
|
+
</div>
|
|
3435
|
+
|
|
3436
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3437
|
+
|
|
3438
|
+
|
|
3439
|
+
<input id="c-10-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3440
|
+
|
|
3441
|
+
<input id="c-10-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
3442
|
+
|
|
3443
|
+
<div class="panels">
|
|
3444
|
+
|
|
3445
|
+
|
|
3446
|
+
|
|
3447
|
+
<div class="panel panel-props">
|
|
3448
|
+
<div class="note ok">
|
|
3449
|
+
<div class="row">
|
|
3450
|
+
<span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
|
|
3451
|
+
<span class="badge ok">6 prop types</span>
|
|
3452
|
+
</div>
|
|
3453
|
+
<pre><code>Component: src/tag/tag.tsx::Tag</code></pre>
|
|
3454
|
+
<pre><code>Props:</code></pre>
|
|
3455
|
+
<pre><code>/**
|
|
3456
|
+
* Render the single child element instead of a `<span>` (via Radix `Slot`),
|
|
3457
|
+
* keeping Tag framework-agnostic. Marks the Tag interactive: adds the pointer
|
|
3458
|
+
* cursor and the hover fill (a plain `<span>` Tag is a static badge).
|
|
3459
|
+
*/
|
|
3460
|
+
asChild?: boolean
|
|
3461
|
+
|
|
3462
|
+
color?: "neutral" | "danger" | "warning" | "creative" | "dynamic" | "playful" | "positive" | "informative"
|
|
3463
|
+
|
|
3464
|
+
pill?: boolean
|
|
3465
|
+
|
|
3466
|
+
size?: "sm" | "md" | "xs"
|
|
3467
|
+
|
|
3468
|
+
truncate?: boolean
|
|
3469
|
+
|
|
3470
|
+
variant?: "ghost" | "secondary" | "tertiary" | "invisible"</code></pre>
|
|
3471
|
+
</div>
|
|
3472
|
+
</div>
|
|
3473
|
+
|
|
3474
|
+
<div class="panel panel-stories">
|
|
3475
|
+
|
|
3476
|
+
|
|
3477
|
+
|
|
3478
|
+
<div class="note ok">
|
|
3479
|
+
<div class="row">
|
|
3480
|
+
<span class="ex-name">Imports</span>
|
|
3481
|
+
</div>
|
|
3482
|
+
<pre><code>import { Tag } from "@agentero/design-system";</code></pre>
|
|
3483
|
+
</div>
|
|
3484
|
+
|
|
3485
|
+
|
|
3486
|
+
<div class="note ok">
|
|
3487
|
+
<div class="row">
|
|
3488
|
+
<span class="ex-name">Default</span>
|
|
3489
|
+
<span class="badge ok">story ok</span>
|
|
3490
|
+
</div>
|
|
3491
|
+
<div>Default args playground for Tag</div>
|
|
3492
|
+
<div class="hint">Args-controlled playground. Toggle `color`, `variant`, `size`, `pill`, and `truncate` from the Controls panel to explore every visual combination.</div>
|
|
3493
|
+
<pre><code>const Default = () => <Tag color="neutral" variant="secondary" size="sm">Default</Tag>;</code></pre>
|
|
3494
|
+
</div>
|
|
3495
|
+
<div class="note ok">
|
|
3496
|
+
<div class="row">
|
|
3497
|
+
<span class="ex-name">Sizes</span>
|
|
3498
|
+
<span class="badge ok">story ok</span>
|
|
3499
|
+
</div>
|
|
3500
|
+
<div>All three sizes across icon-only, icon + text, and text-only</div>
|
|
3501
|
+
<div class="hint">The three sizes — `xs` (20px), `sm` (24px, default), and `md` (32px) — each shown icon-only, icon + text, and text-only so the type and icon scale are visible.</div>
|
|
3502
|
+
<pre><code>const Sizes = () => (
|
|
3503
|
+
<Stack>
|
|
3504
|
+
{(['xs', 'sm', 'md'] as const).map(size => (
|
|
3505
|
+
<Stack gap="0.5rem" key={size}>
|
|
3506
|
+
<strong>{size}:</strong>
|
|
3507
|
+
<Row>
|
|
3508
|
+
<Tag
|
|
3509
|
+
size={size}
|
|
3510
|
+
color="informative"
|
|
3511
|
+
variant="secondary"
|
|
3512
|
+
role="img"
|
|
3513
|
+
aria-label={`${size} icon only`}>
|
|
3514
|
+
<IconAdd />
|
|
3515
|
+
</Tag>
|
|
3516
|
+
<Tag size={size} color="informative" variant="secondary">
|
|
3517
|
+
<IconAdd />
|
|
3518
|
+
{size}
|
|
3519
|
+
</Tag>
|
|
3520
|
+
<Tag size={size} color="informative" variant="secondary">
|
|
3521
|
+
{size}
|
|
3522
|
+
</Tag>
|
|
3523
|
+
</Row>
|
|
3524
|
+
</Stack>
|
|
3525
|
+
))}
|
|
3526
|
+
</Stack>
|
|
3527
|
+
);</code></pre>
|
|
3528
|
+
</div>
|
|
3529
|
+
<div class="note ok">
|
|
3530
|
+
<div class="row">
|
|
3531
|
+
<span class="ex-name">Styles</span>
|
|
3532
|
+
<span class="badge ok">story ok</span>
|
|
3533
|
+
</div>
|
|
3534
|
+
<div>Rounded (default) vs pill</div>
|
|
3535
|
+
<div class="hint">The `Style` axis: the default rounded corners (top row) versus `pill` fully rounded (bottom row), shown across every fill variant.</div>
|
|
3536
|
+
<pre><code>const Styles = () => (
|
|
3537
|
+
<Stack gap="0.5rem">
|
|
3538
|
+
<Row>
|
|
3539
|
+
{VARIANTS.map(variant => (
|
|
3540
|
+
<Tag key={variant} color="informative" variant={variant}>
|
|
3541
|
+
{variant}
|
|
3542
|
+
</Tag>
|
|
3543
|
+
))}
|
|
3544
|
+
</Row>
|
|
3545
|
+
<Row>
|
|
3546
|
+
{VARIANTS.map(variant => (
|
|
3547
|
+
<Tag key={variant} color="informative" variant={variant} pill>
|
|
3548
|
+
{variant}
|
|
3549
|
+
</Tag>
|
|
3550
|
+
))}
|
|
3551
|
+
</Row>
|
|
3552
|
+
</Stack>
|
|
3553
|
+
);</code></pre>
|
|
3554
|
+
</div>
|
|
3555
|
+
<div class="note ok">
|
|
3556
|
+
<div class="row">
|
|
3557
|
+
<span class="ex-name">Interactive</span>
|
|
3558
|
+
<span class="badge ok">story ok</span>
|
|
3559
|
+
</div>
|
|
3560
|
+
<div>Static badge vs interactive (asChild) hover</div>
|
|
3561
|
+
<div class="hint">Static badge vs interactive Tag. A plain `<span>` badge has no hover; pass `asChild` with a `<button>` (or `<a>`) to make it interactive — that adds the pointer cursor and reveals the hover fill on `:hover`. Hover the middle and right Tags to see it.</div>
|
|
3562
|
+
<pre><code>const Interactive = () => (
|
|
3563
|
+
<Row>
|
|
3564
|
+
<Tag color="informative" variant="secondary">
|
|
3565
|
+
badge
|
|
3566
|
+
</Tag>
|
|
3567
|
+
<Tag color="informative" variant="secondary" asChild>
|
|
3568
|
+
<button type="button">interactive</button>
|
|
3569
|
+
</Tag>
|
|
3570
|
+
<Tag color="informative" variant="secondary" asChild aria-label="add">
|
|
3571
|
+
<button type="button">
|
|
3572
|
+
<IconAdd />
|
|
3573
|
+
</button>
|
|
3574
|
+
</Tag>
|
|
3575
|
+
</Row>
|
|
3576
|
+
);</code></pre>
|
|
3577
|
+
</div>
|
|
3578
|
+
<div class="note ok">
|
|
3579
|
+
<div class="row">
|
|
3580
|
+
<span class="ex-name">Secondary</span>
|
|
3581
|
+
<span class="badge ok">story ok</span>
|
|
3582
|
+
</div>
|
|
3583
|
+
<div>`secondary` variant across all colors</div>
|
|
3584
|
+
<div class="hint">`secondary` fills with a tinted background plus a matching border, shown across every color.</div>
|
|
3585
|
+
<pre><code>const Secondary = () => (
|
|
3586
|
+
<Row>
|
|
3587
|
+
{COLORS.map(color => (
|
|
3588
|
+
<Tag key={color} variant="secondary" color={color}>
|
|
3589
|
+
{color}
|
|
3590
|
+
</Tag>
|
|
3591
|
+
))}
|
|
3592
|
+
</Row>
|
|
3593
|
+
);</code></pre>
|
|
3594
|
+
</div>
|
|
3595
|
+
<div class="note ok">
|
|
3596
|
+
<div class="row">
|
|
3597
|
+
<span class="ex-name">Tertiary</span>
|
|
3598
|
+
<span class="badge ok">story ok</span>
|
|
3599
|
+
</div>
|
|
3600
|
+
<div>`tertiary` variant across all colors</div>
|
|
3601
|
+
<div class="hint">`tertiary` (default) fills with a tinted background and no border, shown across every color.</div>
|
|
3602
|
+
<pre><code>const Tertiary = () => (
|
|
3603
|
+
<Row>
|
|
3604
|
+
{COLORS.map(color => (
|
|
3605
|
+
<Tag key={color} variant="tertiary" color={color}>
|
|
3606
|
+
{color}
|
|
3607
|
+
</Tag>
|
|
3608
|
+
))}
|
|
3609
|
+
</Row>
|
|
3610
|
+
);</code></pre>
|
|
3611
|
+
</div>
|
|
3612
|
+
<div class="note ok">
|
|
3613
|
+
<div class="row">
|
|
3614
|
+
<span class="ex-name">Ghost</span>
|
|
3615
|
+
<span class="badge ok">story ok</span>
|
|
3616
|
+
</div>
|
|
3617
|
+
<div>`ghost` variant across all colors</div>
|
|
3618
|
+
<div class="hint">`ghost` shows colored text alone with no background or border, across every color.</div>
|
|
3619
|
+
<pre><code>const Ghost = () => (
|
|
3620
|
+
<Row>
|
|
3621
|
+
{COLORS.map(color => (
|
|
3622
|
+
<Tag key={color} variant="ghost" color={color}>
|
|
3623
|
+
{color}
|
|
3624
|
+
</Tag>
|
|
3625
|
+
))}
|
|
3626
|
+
</Row>
|
|
3627
|
+
);</code></pre>
|
|
3628
|
+
</div>
|
|
3629
|
+
<div class="note ok">
|
|
3630
|
+
<div class="row">
|
|
3631
|
+
<span class="ex-name">Invisible</span>
|
|
3632
|
+
<span class="badge ok">story ok</span>
|
|
3633
|
+
</div>
|
|
3634
|
+
<div>`invisible` variant as span and as interactive button</div>
|
|
3635
|
+
<div class="hint">`invisible` stays fully transparent until hovered, then reveals its fill. The top row renders plain `<span>` Tags; the bottom row renders interactive Tags via `asChild` with a `<button>` child.</div>
|
|
3636
|
+
<pre><code>const Invisible = () => (
|
|
3637
|
+
<Stack gap="0.5rem">
|
|
3638
|
+
<Row>
|
|
3639
|
+
{COLORS.map(color => (
|
|
3640
|
+
<Tag key={color} variant="invisible" color={color}>
|
|
3641
|
+
{color}
|
|
3642
|
+
</Tag>
|
|
3643
|
+
))}
|
|
3644
|
+
</Row>
|
|
3645
|
+
<Row>
|
|
3646
|
+
{COLORS.map(color => (
|
|
3647
|
+
<Tag key={color} variant="invisible" color={color} asChild>
|
|
3648
|
+
<button type="button">{color}</button>
|
|
3649
|
+
</Tag>
|
|
3650
|
+
))}
|
|
3651
|
+
</Row>
|
|
3652
|
+
</Stack>
|
|
3653
|
+
);</code></pre>
|
|
3654
|
+
</div>
|
|
3655
|
+
<div class="note ok">
|
|
3656
|
+
<div class="row">
|
|
3657
|
+
<span class="ex-name">With Icon</span>
|
|
3658
|
+
<span class="badge ok">story ok</span>
|
|
3659
|
+
</div>
|
|
3660
|
+
<div>Variant × color grid with icons</div>
|
|
3661
|
+
<div class="hint">Every variant for every color rendered with a leading and trailing icon. Icons are tinted with each color's `icon-tag-*` token.</div>
|
|
3662
|
+
<pre><code>const WithIcon = () => (
|
|
3663
|
+
<Stack>
|
|
3664
|
+
{COLORS.map(color => (
|
|
3665
|
+
<Row key={color}>
|
|
3666
|
+
{VARIANTS.map(variant => (
|
|
3667
|
+
<Tag key={variant} color={color} variant={variant}>
|
|
3668
|
+
<IconAdd />
|
|
3669
|
+
tag
|
|
3670
|
+
<IconAdd />
|
|
3671
|
+
</Tag>
|
|
3672
|
+
))}
|
|
3673
|
+
</Row>
|
|
3674
|
+
))}
|
|
3675
|
+
</Stack>
|
|
3676
|
+
);</code></pre>
|
|
3677
|
+
</div>
|
|
3678
|
+
<div class="note ok">
|
|
3679
|
+
<div class="row">
|
|
3680
|
+
<span class="ex-name">Colors</span>
|
|
3681
|
+
<span class="badge ok">story ok</span>
|
|
3682
|
+
</div>
|
|
3683
|
+
<div>Variant × color matrix — default, pill, button, and icon layouts</div>
|
|
3684
|
+
<div class="hint">Full matrix: every variant for every color, repeated as default, as `pill`, as an interactive `asChild` `<button>`, with a single leading icon, with leading + trailing icons, and icon-only.</div>
|
|
3685
|
+
<pre><code>const Colors = () => (
|
|
3686
|
+
<div style={{ display: 'flex', gap: '4rem', flexWrap: 'wrap' }}>
|
|
3687
|
+
<Stack>
|
|
3688
|
+
{COLORS.map(color => (
|
|
3689
|
+
<Stack gap="0.5rem" key={color}>
|
|
3690
|
+
<strong>{color}:</strong>
|
|
3691
|
+
<Row>
|
|
3692
|
+
{VARIANTS.map(variant => (
|
|
3693
|
+
<Tag key={variant} color={color} variant={variant}>
|
|
3694
|
+
{variant}
|
|
3695
|
+
</Tag>
|
|
3696
|
+
))}
|
|
3697
|
+
</Row>
|
|
3698
|
+
</Stack>
|
|
3699
|
+
))}
|
|
3700
|
+
</Stack>
|
|
3701
|
+
<Stack>
|
|
3702
|
+
{COLORS.map(color => (
|
|
3703
|
+
<Stack gap="0.5rem" key={color}>
|
|
3704
|
+
<strong>{color} with pill:</strong>
|
|
3705
|
+
<Row>
|
|
3706
|
+
{VARIANTS.map(variant => (
|
|
3707
|
+
<Tag key={variant} color={color} variant={variant} pill>
|
|
3708
|
+
{variant}
|
|
3709
|
+
</Tag>
|
|
3710
|
+
))}
|
|
3711
|
+
</Row>
|
|
3712
|
+
</Stack>
|
|
3713
|
+
))}
|
|
3714
|
+
</Stack>
|
|
3715
|
+
<Stack>
|
|
3716
|
+
{COLORS.map(color => (
|
|
3717
|
+
<Stack gap="0.5rem" key={color}>
|
|
3718
|
+
<strong>{color} as button:</strong>
|
|
3719
|
+
<Row>
|
|
3720
|
+
{VARIANTS.map(variant => (
|
|
3721
|
+
<Tag key={variant} color={color} variant={variant} asChild>
|
|
3722
|
+
<button type="button">{variant}</button>
|
|
3723
|
+
</Tag>
|
|
3724
|
+
))}
|
|
3725
|
+
</Row>
|
|
3726
|
+
</Stack>
|
|
3727
|
+
))}
|
|
3728
|
+
</Stack>
|
|
3729
|
+
<Stack>
|
|
3730
|
+
{COLORS.map(color => (
|
|
3731
|
+
<Stack gap="0.5rem" key={color}>
|
|
3732
|
+
<strong>{color} with icon:</strong>
|
|
3733
|
+
<Row>
|
|
3734
|
+
{VARIANTS.map(variant => (
|
|
3735
|
+
<Tag key={variant} color={color} variant={variant}>
|
|
3736
|
+
<IconAdd />
|
|
3737
|
+
{variant}
|
|
3738
|
+
</Tag>
|
|
3739
|
+
))}
|
|
3740
|
+
</Row>
|
|
3741
|
+
</Stack>
|
|
3742
|
+
))}
|
|
3743
|
+
</Stack>
|
|
3744
|
+
<Stack>
|
|
3745
|
+
{COLORS.map(color => (
|
|
3746
|
+
<Stack gap="0.5rem" key={color}>
|
|
3747
|
+
<strong>{color} with icons:</strong>
|
|
3748
|
+
<Row>
|
|
3749
|
+
{VARIANTS.map(variant => (
|
|
3750
|
+
<Tag key={variant} color={color} variant={variant}>
|
|
3751
|
+
<IconAdd />
|
|
3752
|
+
{variant}
|
|
3753
|
+
<IconAdd />
|
|
3754
|
+
</Tag>
|
|
3755
|
+
))}
|
|
3756
|
+
</Row>
|
|
3757
|
+
</Stack>
|
|
3758
|
+
))}
|
|
3759
|
+
</Stack>
|
|
3760
|
+
<Stack>
|
|
3761
|
+
{COLORS.map(color => (
|
|
3762
|
+
<Stack gap="0.5rem" key={color}>
|
|
3763
|
+
<strong>{color} icon only:</strong>
|
|
3764
|
+
<Row>
|
|
3765
|
+
{VARIANTS.map(variant => (
|
|
3766
|
+
<Tag
|
|
3767
|
+
key={variant}
|
|
3768
|
+
color={color}
|
|
3769
|
+
variant={variant}
|
|
3770
|
+
role="img"
|
|
3771
|
+
aria-label={`${color} ${variant}`}>
|
|
3772
|
+
<IconAdd />
|
|
3773
|
+
</Tag>
|
|
3774
|
+
))}
|
|
3775
|
+
</Row>
|
|
3776
|
+
</Stack>
|
|
3777
|
+
))}
|
|
3778
|
+
</Stack>
|
|
3779
|
+
</div>
|
|
3780
|
+
);</code></pre>
|
|
3781
|
+
</div>
|
|
3782
|
+
</div>
|
|
3783
|
+
|
|
3784
|
+
</div>
|
|
3785
|
+
</article>
|
|
3412
3786
|
<article
|
|
3413
3787
|
class="card
|
|
3414
3788
|
no-error
|
|
@@ -3421,9 +3795,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3421
3795
|
<div class="title">
|
|
3422
3796
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
3423
3797
|
<div class="badges">
|
|
3424
|
-
<label for="c-
|
|
3798
|
+
<label for="c-11-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
3425
3799
|
|
|
3426
|
-
<label for="c-
|
|
3800
|
+
<label for="c-11-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
3427
3801
|
|
|
3428
3802
|
</div>
|
|
3429
3803
|
</div>
|
|
@@ -3436,9 +3810,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3436
3810
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3437
3811
|
|
|
3438
3812
|
|
|
3439
|
-
<input id="c-
|
|
3813
|
+
<input id="c-11-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3440
3814
|
|
|
3441
|
-
<input id="c-
|
|
3815
|
+
<input id="c-11-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
3442
3816
|
|
|
3443
3817
|
<div class="panels">
|
|
3444
3818
|
|