@agentero/design-system 0.17.0 → 0.18.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 +172 -32
- 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/theme/base.css +47 -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">19 components ok</span><span class="filter-pill ok" aria-disabled="true">159 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">
|
|
@@ -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">6 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
|
|
|
@@ -4089,9 +4229,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
4089
4229
|
<div class="title">
|
|
4090
4230
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
4091
4231
|
<div class="badges">
|
|
4092
|
-
<label for="c-
|
|
4232
|
+
<label for="c-16-components-tag-props" class="badge ok as-toggle">6 prop types</label>
|
|
4093
4233
|
|
|
4094
|
-
<label for="c-
|
|
4234
|
+
<label for="c-16-components-tag-stories" class="badge ok as-toggle">10 stories</label>
|
|
4095
4235
|
|
|
4096
4236
|
</div>
|
|
4097
4237
|
</div>
|
|
@@ -4104,9 +4244,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
4104
4244
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4105
4245
|
|
|
4106
4246
|
|
|
4107
|
-
<input id="c-
|
|
4247
|
+
<input id="c-16-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4108
4248
|
|
|
4109
|
-
<input id="c-
|
|
4249
|
+
<input id="c-16-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
4110
4250
|
|
|
4111
4251
|
<div class="panels">
|
|
4112
4252
|
|
|
@@ -4463,9 +4603,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4463
4603
|
<div class="title">
|
|
4464
4604
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
4465
4605
|
<div class="badges">
|
|
4466
|
-
<label for="c-
|
|
4606
|
+
<label for="c-17-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
4467
4607
|
|
|
4468
|
-
<label for="c-
|
|
4608
|
+
<label for="c-17-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
4469
4609
|
|
|
4470
4610
|
</div>
|
|
4471
4611
|
</div>
|
|
@@ -4478,9 +4618,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4478
4618
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4479
4619
|
|
|
4480
4620
|
|
|
4481
|
-
<input id="c-
|
|
4621
|
+
<input id="c-17-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4482
4622
|
|
|
4483
|
-
<input id="c-
|
|
4623
|
+
<input id="c-17-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
4484
4624
|
|
|
4485
4625
|
<div class="panels">
|
|
4486
4626
|
|
|
@@ -4889,9 +5029,9 @@ visibleToasts?: number</code></pre>
|
|
|
4889
5029
|
<div class="title">
|
|
4890
5030
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
4891
5031
|
<div class="badges">
|
|
4892
|
-
<label for="c-
|
|
5032
|
+
<label for="c-18-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
|
|
4893
5033
|
|
|
4894
|
-
<label for="c-
|
|
5034
|
+
<label for="c-18-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
4895
5035
|
|
|
4896
5036
|
</div>
|
|
4897
5037
|
</div>
|
|
@@ -4904,9 +5044,9 @@ visibleToasts?: number</code></pre>
|
|
|
4904
5044
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4905
5045
|
|
|
4906
5046
|
|
|
4907
|
-
<input id="c-
|
|
5047
|
+
<input id="c-18-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4908
5048
|
|
|
4909
|
-
<input id="c-
|
|
5049
|
+
<input id="c-18-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
4910
5050
|
|
|
4911
5051
|
<div class="panels">
|
|
4912
5052
|
|