@agentero/design-system 0.19.0 → 0.20.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">21 components ok</span><span class="filter-pill ok" aria-disabled="true">170 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">
|
|
@@ -3670,6 +3670,155 @@ totalCount: number</code></pre>
|
|
|
3670
3670
|
|
|
3671
3671
|
</div>
|
|
3672
3672
|
</article>
|
|
3673
|
+
<article
|
|
3674
|
+
class="card
|
|
3675
|
+
no-error
|
|
3676
|
+
no-info
|
|
3677
|
+
no-story-error
|
|
3678
|
+
no-doc-error"
|
|
3679
|
+
role="listitem"
|
|
3680
|
+
aria-label="Popover.Root">
|
|
3681
|
+
<div class="head">
|
|
3682
|
+
<div class="title">
|
|
3683
|
+
<h2><span class="status-dot dot-ok"></span> Popover.Root</h2>
|
|
3684
|
+
<div class="badges">
|
|
3685
|
+
|
|
3686
|
+
|
|
3687
|
+
<label for="c-12-components-popover-stories" class="badge ok as-toggle">4 stories</label>
|
|
3688
|
+
|
|
3689
|
+
</div>
|
|
3690
|
+
</div>
|
|
3691
|
+
<div class="meta" title="./src/popover/popover.stories.tsx">components-popover · ./src/popover/popover.stories.tsx</div>
|
|
3692
|
+
|
|
3693
|
+
<div class="hint">Popover is a non-modal floating surface anchored to a trigger, used for rich interactive overlays such as forms, filters, and pickers. Compose it from `Root` / `Trigger` / `Content`, plus optional `Anchor` and `Close`. Built on Radix UI's Popover primitive, so focus management, dismissal, and collision detection come for free.</div>
|
|
3694
|
+
|
|
3695
|
+
</div>
|
|
3696
|
+
|
|
3697
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3698
|
+
|
|
3699
|
+
|
|
3700
|
+
<input id="c-12-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3701
|
+
|
|
3702
|
+
|
|
3703
|
+
|
|
3704
|
+
<div class="panels">
|
|
3705
|
+
|
|
3706
|
+
|
|
3707
|
+
|
|
3708
|
+
|
|
3709
|
+
<div class="panel panel-stories">
|
|
3710
|
+
|
|
3711
|
+
|
|
3712
|
+
|
|
3713
|
+
<div class="note ok">
|
|
3714
|
+
<div class="row">
|
|
3715
|
+
<span class="ex-name">Imports</span>
|
|
3716
|
+
</div>
|
|
3717
|
+
<pre><code>import { Button, Popover } from "@agentero/design-system";</code></pre>
|
|
3718
|
+
</div>
|
|
3719
|
+
|
|
3720
|
+
|
|
3721
|
+
<div class="note ok">
|
|
3722
|
+
<div class="row">
|
|
3723
|
+
<span class="ex-name">Default</span>
|
|
3724
|
+
<span class="badge ok">story ok</span>
|
|
3725
|
+
</div>
|
|
3726
|
+
<div>Basic click-to-open popover surface</div>
|
|
3727
|
+
<div class="hint">A minimal Popover: a trigger button that reveals a short text surface on click and dismisses on outside click or Escape.</div>
|
|
3728
|
+
<pre><code>const Default = () => (
|
|
3729
|
+
<Popover.Root>
|
|
3730
|
+
<Popover.Trigger asChild>
|
|
3731
|
+
<Button variant="secondary">Open popover</Button>
|
|
3732
|
+
</Popover.Trigger>
|
|
3733
|
+
<Popover.Content>
|
|
3734
|
+
<p className="text-sm text-text-default-base-primary">
|
|
3735
|
+
This carrier is appointed for 3 lines of business.
|
|
3736
|
+
</p>
|
|
3737
|
+
</Popover.Content>
|
|
3738
|
+
</Popover.Root>
|
|
3739
|
+
);</code></pre>
|
|
3740
|
+
</div>
|
|
3741
|
+
<div class="note ok">
|
|
3742
|
+
<div class="row">
|
|
3743
|
+
<span class="ex-name">Sides</span>
|
|
3744
|
+
<span class="badge ok">story ok</span>
|
|
3745
|
+
</div>
|
|
3746
|
+
<div>Popover placement on each of the four sides</div>
|
|
3747
|
+
<div class="hint">`side` sets the preferred placement; Radix flips it on viewport collision.</div>
|
|
3748
|
+
<pre><code>const Sides = () => (
|
|
3749
|
+
<div className="grid grid-cols-2 gap-6">
|
|
3750
|
+
{(['top', 'right', 'bottom', 'left'] as const).map(side => (
|
|
3751
|
+
<Popover.Root key={side}>
|
|
3752
|
+
<Popover.Trigger asChild>
|
|
3753
|
+
<Button variant="secondary">{side}</Button>
|
|
3754
|
+
</Popover.Trigger>
|
|
3755
|
+
<Popover.Content side={side}>
|
|
3756
|
+
<p className="text-sm text-text-default-base-primary">Opens on {side}</p>
|
|
3757
|
+
</Popover.Content>
|
|
3758
|
+
</Popover.Root>
|
|
3759
|
+
))}
|
|
3760
|
+
</div>
|
|
3761
|
+
);</code></pre>
|
|
3762
|
+
</div>
|
|
3763
|
+
<div class="note ok">
|
|
3764
|
+
<div class="row">
|
|
3765
|
+
<span class="ex-name">With Form</span>
|
|
3766
|
+
<span class="badge ok">story ok</span>
|
|
3767
|
+
</div>
|
|
3768
|
+
<div>Popover holding an interactive form with a `Close` action</div>
|
|
3769
|
+
<div class="hint">Rich interactive content — the primary reason to reach for a Popover over a Tooltip. A `Close` inside the surface dismisses it after submitting.</div>
|
|
3770
|
+
<pre><code>const WithForm = () => (
|
|
3771
|
+
<Popover.Root>
|
|
3772
|
+
<Popover.Trigger asChild>
|
|
3773
|
+
<Button variant="secondary">Rename</Button>
|
|
3774
|
+
</Popover.Trigger>
|
|
3775
|
+
<Popover.Content align="start">
|
|
3776
|
+
<div className="flex flex-col gap-3">
|
|
3777
|
+
<label className="flex flex-col gap-1 text-sm text-text-default-base-primary">
|
|
3778
|
+
New name
|
|
3779
|
+
<input
|
|
3780
|
+
type="text"
|
|
3781
|
+
defaultValue="Untitled"
|
|
3782
|
+
className="rounded-md border border-border-default-base-primary px-2 py-1 text-sm"
|
|
3783
|
+
/>
|
|
3784
|
+
</label>
|
|
3785
|
+
<Popover.Close asChild>
|
|
3786
|
+
<Button variant="primary" size="sm">
|
|
3787
|
+
Save
|
|
3788
|
+
</Button>
|
|
3789
|
+
</Popover.Close>
|
|
3790
|
+
</div>
|
|
3791
|
+
</Popover.Content>
|
|
3792
|
+
</Popover.Root>
|
|
3793
|
+
);</code></pre>
|
|
3794
|
+
</div>
|
|
3795
|
+
<div class="note ok">
|
|
3796
|
+
<div class="row">
|
|
3797
|
+
<span class="ex-name">With Anchor</span>
|
|
3798
|
+
<span class="badge ok">story ok</span>
|
|
3799
|
+
</div>
|
|
3800
|
+
<div>Popover positioned against a separate `Anchor` element</div>
|
|
3801
|
+
<div class="hint">`Anchor` positions the Content against an element other than the Trigger — useful when the visual anchor differs from the toggle button.</div>
|
|
3802
|
+
<pre><code>const WithAnchor = () => (
|
|
3803
|
+
<Popover.Root>
|
|
3804
|
+
<div className="flex flex-col items-center gap-4">
|
|
3805
|
+
<Popover.Anchor className="rounded-md border border-border-default-base-primary px-4 py-2 text-sm text-text-default-base-secondary">
|
|
3806
|
+
Anchored here
|
|
3807
|
+
</Popover.Anchor>
|
|
3808
|
+
<Popover.Trigger asChild>
|
|
3809
|
+
<Button variant="secondary">Toggle from below</Button>
|
|
3810
|
+
</Popover.Trigger>
|
|
3811
|
+
</div>
|
|
3812
|
+
<Popover.Content side="top">
|
|
3813
|
+
<p className="text-sm text-text-default-base-primary">Positioned against the anchor</p>
|
|
3814
|
+
</Popover.Content>
|
|
3815
|
+
</Popover.Root>
|
|
3816
|
+
);</code></pre>
|
|
3817
|
+
</div>
|
|
3818
|
+
</div>
|
|
3819
|
+
|
|
3820
|
+
</div>
|
|
3821
|
+
</article>
|
|
3673
3822
|
<article
|
|
3674
3823
|
class="card
|
|
3675
3824
|
no-error
|
|
@@ -3682,9 +3831,9 @@ totalCount: number</code></pre>
|
|
|
3682
3831
|
<div class="title">
|
|
3683
3832
|
<h2><span class="status-dot dot-ok"></span> Progress</h2>
|
|
3684
3833
|
<div class="badges">
|
|
3685
|
-
<label for="c-
|
|
3834
|
+
<label for="c-13-components-progress-props" class="badge ok as-toggle">4 prop types</label>
|
|
3686
3835
|
|
|
3687
|
-
<label for="c-
|
|
3836
|
+
<label for="c-13-components-progress-stories" class="badge ok as-toggle">4 stories</label>
|
|
3688
3837
|
|
|
3689
3838
|
</div>
|
|
3690
3839
|
</div>
|
|
@@ -3697,9 +3846,9 @@ totalCount: number</code></pre>
|
|
|
3697
3846
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3698
3847
|
|
|
3699
3848
|
|
|
3700
|
-
<input id="c-
|
|
3849
|
+
<input id="c-13-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3701
3850
|
|
|
3702
|
-
<input id="c-
|
|
3851
|
+
<input id="c-13-components-progress-props" class="tg tg-props" type="checkbox" hidden />
|
|
3703
3852
|
|
|
3704
3853
|
<div class="panels">
|
|
3705
3854
|
|
|
@@ -3817,7 +3966,7 @@ percentage: number</code></pre>
|
|
|
3817
3966
|
<div class="badges">
|
|
3818
3967
|
|
|
3819
3968
|
|
|
3820
|
-
<label for="c-
|
|
3969
|
+
<label for="c-14-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
3821
3970
|
|
|
3822
3971
|
</div>
|
|
3823
3972
|
</div>
|
|
@@ -3830,7 +3979,7 @@ percentage: number</code></pre>
|
|
|
3830
3979
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3831
3980
|
|
|
3832
3981
|
|
|
3833
|
-
<input id="c-
|
|
3982
|
+
<input id="c-14-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3834
3983
|
|
|
3835
3984
|
|
|
3836
3985
|
|
|
@@ -3924,9 +4073,9 @@ percentage: number</code></pre>
|
|
|
3924
4073
|
<div class="title">
|
|
3925
4074
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
3926
4075
|
<div class="badges">
|
|
3927
|
-
<label for="c-
|
|
4076
|
+
<label for="c-15-components-switch-props" class="badge ok as-toggle">4 prop types</label>
|
|
3928
4077
|
|
|
3929
|
-
<label for="c-
|
|
4078
|
+
<label for="c-15-components-switch-stories" class="badge ok as-toggle">7 stories</label>
|
|
3930
4079
|
|
|
3931
4080
|
</div>
|
|
3932
4081
|
</div>
|
|
@@ -3939,9 +4088,9 @@ percentage: number</code></pre>
|
|
|
3939
4088
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3940
4089
|
|
|
3941
4090
|
|
|
3942
|
-
<input id="c-
|
|
4091
|
+
<input id="c-15-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3943
4092
|
|
|
3944
|
-
<input id="c-
|
|
4093
|
+
<input id="c-15-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
3945
4094
|
|
|
3946
4095
|
<div class="panels">
|
|
3947
4096
|
|
|
@@ -4114,7 +4263,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
4114
4263
|
<div class="badges">
|
|
4115
4264
|
|
|
4116
4265
|
|
|
4117
|
-
<label for="c-
|
|
4266
|
+
<label for="c-16-components-table-stories" class="badge ok as-toggle">9 stories</label>
|
|
4118
4267
|
|
|
4119
4268
|
</div>
|
|
4120
4269
|
</div>
|
|
@@ -4127,7 +4276,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
4127
4276
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4128
4277
|
|
|
4129
4278
|
|
|
4130
|
-
<input id="c-
|
|
4279
|
+
<input id="c-16-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4131
4280
|
|
|
4132
4281
|
|
|
4133
4282
|
|
|
@@ -4303,7 +4452,7 @@ import { Fragment } from "react";</code></pre>
|
|
|
4303
4452
|
<div class="badges">
|
|
4304
4453
|
|
|
4305
4454
|
|
|
4306
|
-
<label for="c-
|
|
4455
|
+
<label for="c-17-components-tabs-stories" class="badge ok as-toggle">7 stories</label>
|
|
4307
4456
|
|
|
4308
4457
|
</div>
|
|
4309
4458
|
</div>
|
|
@@ -4316,7 +4465,7 @@ import { Fragment } from "react";</code></pre>
|
|
|
4316
4465
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4317
4466
|
|
|
4318
4467
|
|
|
4319
|
-
<input id="c-
|
|
4468
|
+
<input id="c-17-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4320
4469
|
|
|
4321
4470
|
|
|
4322
4471
|
|
|
@@ -4469,9 +4618,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
4469
4618
|
<div class="title">
|
|
4470
4619
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
4471
4620
|
<div class="badges">
|
|
4472
|
-
<label for="c-
|
|
4621
|
+
<label for="c-18-components-tag-props" class="badge ok as-toggle">6 prop types</label>
|
|
4473
4622
|
|
|
4474
|
-
<label for="c-
|
|
4623
|
+
<label for="c-18-components-tag-stories" class="badge ok as-toggle">10 stories</label>
|
|
4475
4624
|
|
|
4476
4625
|
</div>
|
|
4477
4626
|
</div>
|
|
@@ -4484,9 +4633,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
4484
4633
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4485
4634
|
|
|
4486
4635
|
|
|
4487
|
-
<input id="c-
|
|
4636
|
+
<input id="c-18-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4488
4637
|
|
|
4489
|
-
<input id="c-
|
|
4638
|
+
<input id="c-18-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
4490
4639
|
|
|
4491
4640
|
<div class="panels">
|
|
4492
4641
|
|
|
@@ -4843,9 +4992,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4843
4992
|
<div class="title">
|
|
4844
4993
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
4845
4994
|
<div class="badges">
|
|
4846
|
-
<label for="c-
|
|
4995
|
+
<label for="c-19-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
4847
4996
|
|
|
4848
|
-
<label for="c-
|
|
4997
|
+
<label for="c-19-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
4849
4998
|
|
|
4850
4999
|
</div>
|
|
4851
5000
|
</div>
|
|
@@ -4858,9 +5007,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4858
5007
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4859
5008
|
|
|
4860
5009
|
|
|
4861
|
-
<input id="c-
|
|
5010
|
+
<input id="c-19-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4862
5011
|
|
|
4863
|
-
<input id="c-
|
|
5012
|
+
<input id="c-19-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
4864
5013
|
|
|
4865
5014
|
<div class="panels">
|
|
4866
5015
|
|
|
@@ -5269,9 +5418,9 @@ visibleToasts?: number</code></pre>
|
|
|
5269
5418
|
<div class="title">
|
|
5270
5419
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
5271
5420
|
<div class="badges">
|
|
5272
|
-
<label for="c-
|
|
5421
|
+
<label for="c-20-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
|
|
5273
5422
|
|
|
5274
|
-
<label for="c-
|
|
5423
|
+
<label for="c-20-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
5275
5424
|
|
|
5276
5425
|
</div>
|
|
5277
5426
|
</div>
|
|
@@ -5284,9 +5433,9 @@ visibleToasts?: number</code></pre>
|
|
|
5284
5433
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5285
5434
|
|
|
5286
5435
|
|
|
5287
|
-
<input id="c-
|
|
5436
|
+
<input id="c-20-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5288
5437
|
|
|
5289
|
-
<input id="c-
|
|
5438
|
+
<input id="c-20-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
5290
5439
|
|
|
5291
5440
|
<div class="panels">
|
|
5292
5441
|
|