@agentero/design-system 0.16.0 → 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 +162 -14
- package/mcp/manifests/components.json +1 -1
- package/package.json +6 -1
- 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">
|
|
@@ -3929,6 +3929,154 @@ import { Fragment } from "react";</code></pre>
|
|
|
3929
3929
|
|
|
3930
3930
|
</div>
|
|
3931
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>
|
|
3932
4080
|
<article
|
|
3933
4081
|
class="card
|
|
3934
4082
|
no-error
|
|
@@ -3941,9 +4089,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3941
4089
|
<div class="title">
|
|
3942
4090
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
3943
4091
|
<div class="badges">
|
|
3944
|
-
<label for="c-
|
|
4092
|
+
<label for="c-15-components-tag-props" class="badge ok as-toggle">6 prop types</label>
|
|
3945
4093
|
|
|
3946
|
-
<label for="c-
|
|
4094
|
+
<label for="c-15-components-tag-stories" class="badge ok as-toggle">10 stories</label>
|
|
3947
4095
|
|
|
3948
4096
|
</div>
|
|
3949
4097
|
</div>
|
|
@@ -3956,9 +4104,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3956
4104
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3957
4105
|
|
|
3958
4106
|
|
|
3959
|
-
<input id="c-
|
|
4107
|
+
<input id="c-15-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3960
4108
|
|
|
3961
|
-
<input id="c-
|
|
4109
|
+
<input id="c-15-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
3962
4110
|
|
|
3963
4111
|
<div class="panels">
|
|
3964
4112
|
|
|
@@ -4315,9 +4463,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4315
4463
|
<div class="title">
|
|
4316
4464
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
4317
4465
|
<div class="badges">
|
|
4318
|
-
<label for="c-
|
|
4466
|
+
<label for="c-16-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
4319
4467
|
|
|
4320
|
-
<label for="c-
|
|
4468
|
+
<label for="c-16-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
4321
4469
|
|
|
4322
4470
|
</div>
|
|
4323
4471
|
</div>
|
|
@@ -4330,9 +4478,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4330
4478
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4331
4479
|
|
|
4332
4480
|
|
|
4333
|
-
<input id="c-
|
|
4481
|
+
<input id="c-16-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4334
4482
|
|
|
4335
|
-
<input id="c-
|
|
4483
|
+
<input id="c-16-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
4336
4484
|
|
|
4337
4485
|
<div class="panels">
|
|
4338
4486
|
|
|
@@ -4741,9 +4889,9 @@ visibleToasts?: number</code></pre>
|
|
|
4741
4889
|
<div class="title">
|
|
4742
4890
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
4743
4891
|
<div class="badges">
|
|
4744
|
-
<label for="c-
|
|
4892
|
+
<label for="c-17-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
|
|
4745
4893
|
|
|
4746
|
-
<label for="c-
|
|
4894
|
+
<label for="c-17-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
4747
4895
|
|
|
4748
4896
|
</div>
|
|
4749
4897
|
</div>
|
|
@@ -4756,9 +4904,9 @@ visibleToasts?: number</code></pre>
|
|
|
4756
4904
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4757
4905
|
|
|
4758
4906
|
|
|
4759
|
-
<input id="c-
|
|
4907
|
+
<input id="c-17-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4760
4908
|
|
|
4761
|
-
<input id="c-
|
|
4909
|
+
<input id="c-17-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
4762
4910
|
|
|
4763
4911
|
<div class="panels">
|
|
4764
4912
|
|