@agentero/design-system 0.17.0 → 0.18.1
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 +191 -31
- package/mcp/manifests/components.json +1 -1
- package/package.json +6 -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/tabs.js +1 -1
- package/theme/base.css +47 -0
|
@@ -576,7 +576,7 @@
|
|
|
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">160 stories ok</span></div>
|
|
580
580
|
</div>
|
|
581
581
|
</header>
|
|
582
582
|
<main>
|
|
@@ -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
|
|
|
@@ -3943,7 +4083,7 @@ import { Fragment } from "react";</code></pre>
|
|
|
3943
4083
|
<div class="badges">
|
|
3944
4084
|
|
|
3945
4085
|
|
|
3946
|
-
<label for="c-
|
|
4086
|
+
<label for="c-15-components-tabs-stories" class="badge ok as-toggle">7 stories</label>
|
|
3947
4087
|
|
|
3948
4088
|
</div>
|
|
3949
4089
|
</div>
|
|
@@ -3956,7 +4096,7 @@ import { Fragment } from "react";</code></pre>
|
|
|
3956
4096
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3957
4097
|
|
|
3958
4098
|
|
|
3959
|
-
<input id="c-
|
|
4099
|
+
<input id="c-15-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3960
4100
|
|
|
3961
4101
|
|
|
3962
4102
|
|
|
@@ -4057,6 +4197,26 @@ import { Fragment } from "react";</code></pre>
|
|
|
4057
4197
|
</Tabs.List>
|
|
4058
4198
|
<TabPanels />
|
|
4059
4199
|
</Tabs.Root>
|
|
4200
|
+
);</code></pre>
|
|
4201
|
+
</div>
|
|
4202
|
+
<div class="note ok">
|
|
4203
|
+
<div class="row">
|
|
4204
|
+
<span class="ex-name">As Child Links</span>
|
|
4205
|
+
<span class="badge ok">story ok</span>
|
|
4206
|
+
</div>
|
|
4207
|
+
|
|
4208
|
+
<div class="hint">Triggers accept `asChild` to render as another element — e.g. a router link. The trigger resets the anchor's default underline, so link-based tabs match the button-based ones.</div>
|
|
4209
|
+
<pre><code>const AsChildLinks = () => (
|
|
4210
|
+
<Tabs.Root variant="line" defaultValue="overview">
|
|
4211
|
+
<Tabs.List>
|
|
4212
|
+
{TABS.map(({ value, label }) => (
|
|
4213
|
+
<Tabs.Trigger key={value} value={value} asChild>
|
|
4214
|
+
<a href={`#${value}`}>{label}</a>
|
|
4215
|
+
</Tabs.Trigger>
|
|
4216
|
+
))}
|
|
4217
|
+
</Tabs.List>
|
|
4218
|
+
<TabPanels />
|
|
4219
|
+
</Tabs.Root>
|
|
4060
4220
|
);</code></pre>
|
|
4061
4221
|
</div>
|
|
4062
4222
|
<div class="note ok">
|
|
@@ -4089,9 +4249,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
4089
4249
|
<div class="title">
|
|
4090
4250
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
4091
4251
|
<div class="badges">
|
|
4092
|
-
<label for="c-
|
|
4252
|
+
<label for="c-16-components-tag-props" class="badge ok as-toggle">6 prop types</label>
|
|
4093
4253
|
|
|
4094
|
-
<label for="c-
|
|
4254
|
+
<label for="c-16-components-tag-stories" class="badge ok as-toggle">10 stories</label>
|
|
4095
4255
|
|
|
4096
4256
|
</div>
|
|
4097
4257
|
</div>
|
|
@@ -4104,9 +4264,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
4104
4264
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4105
4265
|
|
|
4106
4266
|
|
|
4107
|
-
<input id="c-
|
|
4267
|
+
<input id="c-16-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4108
4268
|
|
|
4109
|
-
<input id="c-
|
|
4269
|
+
<input id="c-16-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
4110
4270
|
|
|
4111
4271
|
<div class="panels">
|
|
4112
4272
|
|
|
@@ -4463,9 +4623,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4463
4623
|
<div class="title">
|
|
4464
4624
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
4465
4625
|
<div class="badges">
|
|
4466
|
-
<label for="c-
|
|
4626
|
+
<label for="c-17-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
4467
4627
|
|
|
4468
|
-
<label for="c-
|
|
4628
|
+
<label for="c-17-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
4469
4629
|
|
|
4470
4630
|
</div>
|
|
4471
4631
|
</div>
|
|
@@ -4478,9 +4638,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4478
4638
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4479
4639
|
|
|
4480
4640
|
|
|
4481
|
-
<input id="c-
|
|
4641
|
+
<input id="c-17-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4482
4642
|
|
|
4483
|
-
<input id="c-
|
|
4643
|
+
<input id="c-17-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
4484
4644
|
|
|
4485
4645
|
<div class="panels">
|
|
4486
4646
|
|
|
@@ -4889,9 +5049,9 @@ visibleToasts?: number</code></pre>
|
|
|
4889
5049
|
<div class="title">
|
|
4890
5050
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
4891
5051
|
<div class="badges">
|
|
4892
|
-
<label for="c-
|
|
5052
|
+
<label for="c-18-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
|
|
4893
5053
|
|
|
4894
|
-
<label for="c-
|
|
5054
|
+
<label for="c-18-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
4895
5055
|
|
|
4896
5056
|
</div>
|
|
4897
5057
|
</div>
|
|
@@ -4904,9 +5064,9 @@ visibleToasts?: number</code></pre>
|
|
|
4904
5064
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4905
5065
|
|
|
4906
5066
|
|
|
4907
|
-
<input id="c-
|
|
5067
|
+
<input id="c-18-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4908
5068
|
|
|
4909
|
-
<input id="c-
|
|
5069
|
+
<input id="c-18-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
4910
5070
|
|
|
4911
5071
|
<div class="panels">
|
|
4912
5072
|
|