@agentero/design-system 0.22.3 → 0.23.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.
Files changed (7) hide show
  1. package/mcp/manifests/components.html +156 -44
  2. package/mcp/manifests/components.json +1 -1
  3. package/package.json +6 -1
  4. package/src/label/index.d.ts +2 -0
  5. package/src/label/index.js +2 -0
  6. package/src/label/label.d.ts +61 -0
  7. package/src/label/label.js +33 -0
package/mcp/manifests/components.html CHANGED
@@ -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">23 components ok</span><span class="filter-pill ok" aria-disabled="true">179 stories ok</span></div>
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">24 components ok</span><span class="filter-pill ok" aria-disabled="true">183 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>2.0s</strong>.
585
+ Using <code>react-docgen-typescript</code>. Generation took <strong>3.5s</strong>.
586
586
  </div>
587
587
  <h2 class="section-title">Components</h2>
588
588
  <div class="grid" role="list">
@@ -3348,6 +3348,118 @@ label?: ReactNode</code></pre>
3348
3348
 
3349
3349
  </div>
3350
3350
  </article>
3351
+ <article
3352
+ class="card
3353
+ no-error
3354
+ no-info
3355
+ no-story-error
3356
+ no-doc-error"
3357
+ role="listitem"
3358
+ aria-label="Label">
3359
+ <div class="head">
3360
+ <div class="title">
3361
+ <h2><span class="status-dot dot-ok"></span> Label</h2>
3362
+ <div class="badges">
3363
+ <label for="c-10-components-label-props" class="badge ok as-toggle">3 prop types</label>
3364
+
3365
+ <label for="c-10-components-label-stories" class="badge ok as-toggle">4 stories</label>
3366
+
3367
+ </div>
3368
+ </div>
3369
+ <div class="meta" title="./src/label/label.stories.tsx">components-label · ./src/label/label.stories.tsx</div>
3370
+
3371
+ <div class="hint">Label is the accessible caption for a form control, built on Radix&#39;s Label primitive: it associates with the control through `htmlFor` and does not select text on double-click. `optional` and `required` are display-only affordances — the control itself still has to carry `required` / `aria-required`.</div>
3372
+
3373
+ </div>
3374
+
3375
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3376
+
3377
+
3378
+ <input id="c-10-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
3379
+
3380
+ <input id="c-10-components-label-props" class="tg tg-props" type="checkbox" hidden />
3381
+
3382
+ <div class="panels">
3383
+
3384
+
3385
+
3386
+ <div class="panel panel-props">
3387
+ <div class="note ok">
3388
+ <div class="row">
3389
+ <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
3390
+ <span class="badge ok">3 prop types</span>
3391
+ </div>
3392
+ <pre><code>Component: src/label/label.tsx::Label</code></pre>
3393
+ <pre><code>Props:</code></pre>
3394
+ <pre><code>asChild?: boolean
3395
+
3396
+ /**
3397
+ * Appends a muted &quot; (optional)&quot; suffix. Ignored when `required` is set.
3398
+ */
3399
+ optional?: boolean = false
3400
+
3401
+ /**
3402
+ * Appends a decorative asterisk. Mark the control itself `required` too — the asterisk is `aria-hidden`.
3403
+ */
3404
+ required?: boolean = false</code></pre>
3405
+ </div>
3406
+ </div>
3407
+
3408
+ <div class="panel panel-stories">
3409
+
3410
+
3411
+
3412
+ <div class="note ok">
3413
+ <div class="row">
3414
+ <span class="ex-name">Imports</span>
3415
+ </div>
3416
+ <pre><code>import { Label } from "@agentero/design-system";</code></pre>
3417
+ </div>
3418
+
3419
+
3420
+ <div class="note ok">
3421
+ <div class="row">
3422
+ <span class="ex-name">Default</span>
3423
+ <span class="badge ok">story ok</span>
3424
+ </div>
3425
+ <div>Default label associated with a control</div>
3426
+ <div class="hint">A plain caption, associated with its control through `htmlFor`.</div>
3427
+ <pre><code>const Default = () =&gt; &lt;&gt;
3428
+ &lt;Label htmlFor=&quot;email&quot;&gt;Email&lt;/Label&gt;
3429
+ &lt;input id=&quot;email&quot; placeholder=&quot;you@example.com&quot; /&gt;
3430
+ &lt;/&gt;;</code></pre>
3431
+ </div>
3432
+ <div class="note ok">
3433
+ <div class="row">
3434
+ <span class="ex-name">Optional</span>
3435
+ <span class="badge ok">story ok</span>
3436
+ </div>
3437
+ <div>Optional field with a muted suffix</div>
3438
+ <div class="hint">Appends a muted &quot; (optional)&quot; suffix for fields that can be left blank.</div>
3439
+ <pre><code>const Optional = () =&gt; &lt;Label optional&gt;Phone number&lt;/Label&gt;;</code></pre>
3440
+ </div>
3441
+ <div class="note ok">
3442
+ <div class="row">
3443
+ <span class="ex-name">Required</span>
3444
+ <span class="badge ok">story ok</span>
3445
+ </div>
3446
+ <div>Required field with a decorative asterisk</div>
3447
+ <div class="hint">Appends an asterisk. It is `aria-hidden`, so the control still needs its own `required` attribute for assistive technology.</div>
3448
+ <pre><code>const Required = () =&gt; &lt;Label required&gt;Full name&lt;/Label&gt;;</code></pre>
3449
+ </div>
3450
+ <div class="note ok">
3451
+ <div class="row">
3452
+ <span class="ex-name">Required Wins Over Optional</span>
3453
+ <span class="badge ok">story ok</span>
3454
+ </div>
3455
+ <div>required takes precedence over optional</div>
3456
+ <div class="hint">Contradictory props do not throw — `required` wins and the optional suffix is dropped, so a mistake never takes the page down.</div>
3457
+ <pre><code>const RequiredWinsOverOptional = () =&gt; &lt;Label optional required&gt;Agency name&lt;/Label&gt;;</code></pre>
3458
+ </div>
3459
+ </div>
3460
+
3461
+ </div>
3462
+ </article>
3351
3463
  <article
3352
3464
  class="card
3353
3465
  no-error
@@ -3360,9 +3472,9 @@ label?: ReactNode</code></pre>
3360
3472
  <div class="title">
3361
3473
  <h2><span class="status-dot dot-ok"></span> Loading</h2>
3362
3474
  <div class="badges">
3363
- <label for="c-10-components-loading-props" class="badge ok as-toggle">1 prop type</label>
3475
+ <label for="c-11-components-loading-props" class="badge ok as-toggle">1 prop type</label>
3364
3476
 
3365
- <label for="c-10-components-loading-stories" class="badge ok as-toggle">7 stories</label>
3477
+ <label for="c-11-components-loading-stories" class="badge ok as-toggle">7 stories</label>
3366
3478
 
3367
3479
  </div>
3368
3480
  </div>
@@ -3375,9 +3487,9 @@ label?: ReactNode</code></pre>
3375
3487
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3376
3488
 
3377
3489
 
3378
- <input id="c-10-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
3490
+ <input id="c-11-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
3379
3491
 
3380
- <input id="c-10-components-loading-props" class="tg tg-props" type="checkbox" hidden />
3492
+ <input id="c-11-components-loading-props" class="tg tg-props" type="checkbox" hidden />
3381
3493
 
3382
3494
  <div class="panels">
3383
3495
 
@@ -3519,7 +3631,7 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
3519
3631
  <div class="badges">
3520
3632
 
3521
3633
 
3522
- <label for="c-11-components-modal-stories" class="badge ok as-toggle">4 stories</label>
3634
+ <label for="c-12-components-modal-stories" class="badge ok as-toggle">4 stories</label>
3523
3635
 
3524
3636
  </div>
3525
3637
  </div>
@@ -3532,7 +3644,7 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
3532
3644
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3533
3645
 
3534
3646
 
3535
- <input id="c-11-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
3647
+ <input id="c-12-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
3536
3648
 
3537
3649
 
3538
3650
 
@@ -3657,9 +3769,9 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
3657
3769
  <div class="title">
3658
3770
  <h2><span class="status-dot dot-ok"></span> Pagination</h2>
3659
3771
  <div class="badges">
3660
- <label for="c-12-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
3772
+ <label for="c-13-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
3661
3773
 
3662
- <label for="c-12-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
3774
+ <label for="c-13-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
3663
3775
 
3664
3776
  </div>
3665
3777
  </div>
@@ -3672,9 +3784,9 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
3672
3784
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3673
3785
 
3674
3786
 
3675
- <input id="c-12-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
3787
+ <input id="c-13-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
3676
3788
 
3677
- <input id="c-12-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
3789
+ <input id="c-13-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
3678
3790
 
3679
3791
  <div class="panels">
3680
3792
 
@@ -3820,7 +3932,7 @@ totalCount: number</code></pre>
3820
3932
  <div class="badges">
3821
3933
 
3822
3934
 
3823
- <label for="c-13-components-popover-stories" class="badge ok as-toggle">4 stories</label>
3935
+ <label for="c-14-components-popover-stories" class="badge ok as-toggle">4 stories</label>
3824
3936
 
3825
3937
  </div>
3826
3938
  </div>
@@ -3833,7 +3945,7 @@ totalCount: number</code></pre>
3833
3945
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3834
3946
 
3835
3947
 
3836
- <input id="c-13-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
3948
+ <input id="c-14-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
3837
3949
 
3838
3950
 
3839
3951
 
@@ -3967,9 +4079,9 @@ totalCount: number</code></pre>
3967
4079
  <div class="title">
3968
4080
  <h2><span class="status-dot dot-ok"></span> Progress</h2>
3969
4081
  <div class="badges">
3970
- <label for="c-14-components-progress-props" class="badge ok as-toggle">4 prop types</label>
4082
+ <label for="c-15-components-progress-props" class="badge ok as-toggle">4 prop types</label>
3971
4083
 
3972
- <label for="c-14-components-progress-stories" class="badge ok as-toggle">4 stories</label>
4084
+ <label for="c-15-components-progress-stories" class="badge ok as-toggle">4 stories</label>
3973
4085
 
3974
4086
  </div>
3975
4087
  </div>
@@ -3982,9 +4094,9 @@ totalCount: number</code></pre>
3982
4094
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3983
4095
 
3984
4096
 
3985
- <input id="c-14-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
4097
+ <input id="c-15-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
3986
4098
 
3987
- <input id="c-14-components-progress-props" class="tg tg-props" type="checkbox" hidden />
4099
+ <input id="c-15-components-progress-props" class="tg tg-props" type="checkbox" hidden />
3988
4100
 
3989
4101
  <div class="panels">
3990
4102
 
@@ -4102,7 +4214,7 @@ percentage: number</code></pre>
4102
4214
  <div class="badges">
4103
4215
 
4104
4216
 
4105
- <label for="c-15-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
4217
+ <label for="c-16-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
4106
4218
 
4107
4219
  </div>
4108
4220
  </div>
@@ -4115,7 +4227,7 @@ percentage: number</code></pre>
4115
4227
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
4116
4228
 
4117
4229
 
4118
- <input id="c-15-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
4230
+ <input id="c-16-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
4119
4231
 
4120
4232
 
4121
4233
 
@@ -4209,9 +4321,9 @@ percentage: number</code></pre>
4209
4321
  <div class="title">
4210
4322
  <h2><span class="status-dot dot-ok"></span> Switch</h2>
4211
4323
  <div class="badges">
4212
- <label for="c-16-components-switch-props" class="badge ok as-toggle">4 prop types</label>
4324
+ <label for="c-17-components-switch-props" class="badge ok as-toggle">4 prop types</label>
4213
4325
 
4214
- <label for="c-16-components-switch-stories" class="badge ok as-toggle">7 stories</label>
4326
+ <label for="c-17-components-switch-stories" class="badge ok as-toggle">7 stories</label>
4215
4327
 
4216
4328
  </div>
4217
4329
  </div>
@@ -4224,9 +4336,9 @@ percentage: number</code></pre>
4224
4336
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
4225
4337
 
4226
4338
 
4227
- <input id="c-16-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
4339
+ <input id="c-17-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
4228
4340
 
4229
- <input id="c-16-components-switch-props" class="tg tg-props" type="checkbox" hidden />
4341
+ <input id="c-17-components-switch-props" class="tg tg-props" type="checkbox" hidden />
4230
4342
 
4231
4343
  <div class="panels">
4232
4344
 
@@ -4399,7 +4511,7 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
4399
4511
  <div class="badges">
4400
4512
 
4401
4513
 
4402
- <label for="c-17-components-table-stories" class="badge ok as-toggle">9 stories</label>
4514
+ <label for="c-18-components-table-stories" class="badge ok as-toggle">9 stories</label>
4403
4515
 
4404
4516
  </div>
4405
4517
  </div>
@@ -4412,7 +4524,7 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
4412
4524
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
4413
4525
 
4414
4526
 
4415
- <input id="c-17-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
4527
+ <input id="c-18-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
4416
4528
 
4417
4529
 
4418
4530
 
@@ -4588,7 +4700,7 @@ import { Fragment } from "react";</code></pre>
4588
4700
  <div class="badges">
4589
4701
 
4590
4702
 
4591
- <label for="c-18-components-tabs-stories" class="badge ok as-toggle">7 stories</label>
4703
+ <label for="c-19-components-tabs-stories" class="badge ok as-toggle">7 stories</label>
4592
4704
 
4593
4705
  </div>
4594
4706
  </div>
@@ -4601,7 +4713,7 @@ import { Fragment } from "react";</code></pre>
4601
4713
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
4602
4714
 
4603
4715
 
4604
- <input id="c-18-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
4716
+ <input id="c-19-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
4605
4717
 
4606
4718
 
4607
4719
 
@@ -4754,9 +4866,9 @@ import { Fragment } from "react";</code></pre>
4754
4866
  <div class="title">
4755
4867
  <h2><span class="status-dot dot-ok"></span> Tag</h2>
4756
4868
  <div class="badges">
4757
- <label for="c-19-components-tag-props" class="badge ok as-toggle">6 prop types</label>
4869
+ <label for="c-20-components-tag-props" class="badge ok as-toggle">6 prop types</label>
4758
4870
 
4759
- <label for="c-19-components-tag-stories" class="badge ok as-toggle">10 stories</label>
4871
+ <label for="c-20-components-tag-stories" class="badge ok as-toggle">10 stories</label>
4760
4872
 
4761
4873
  </div>
4762
4874
  </div>
@@ -4769,9 +4881,9 @@ import { Fragment } from "react";</code></pre>
4769
4881
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
4770
4882
 
4771
4883
 
4772
- <input id="c-19-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
4884
+ <input id="c-20-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
4773
4885
 
4774
- <input id="c-19-components-tag-props" class="tg tg-props" type="checkbox" hidden />
4886
+ <input id="c-20-components-tag-props" class="tg tg-props" type="checkbox" hidden />
4775
4887
 
4776
4888
  <div class="panels">
4777
4889
 
@@ -5128,9 +5240,9 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
5128
5240
  <div class="title">
5129
5241
  <h2><span class="status-dot dot-ok"></span> Toast</h2>
5130
5242
  <div class="badges">
5131
- <label for="c-20-components-toast-props" class="badge ok as-toggle">11 prop types</label>
5243
+ <label for="c-21-components-toast-props" class="badge ok as-toggle">11 prop types</label>
5132
5244
 
5133
- <label for="c-20-components-toast-stories" class="badge ok as-toggle">11 stories</label>
5245
+ <label for="c-21-components-toast-stories" class="badge ok as-toggle">11 stories</label>
5134
5246
 
5135
5247
  </div>
5136
5248
  </div>
@@ -5143,9 +5255,9 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
5143
5255
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
5144
5256
 
5145
5257
 
5146
- <input id="c-20-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
5258
+ <input id="c-21-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
5147
5259
 
5148
- <input id="c-20-components-toast-props" class="tg tg-props" type="checkbox" hidden />
5260
+ <input id="c-21-components-toast-props" class="tg tg-props" type="checkbox" hidden />
5149
5261
 
5150
5262
  <div class="panels">
5151
5263
 
@@ -5554,9 +5666,9 @@ visibleToasts?: number</code></pre>
5554
5666
  <div class="title">
5555
5667
  <h2><span class="status-dot dot-ok"></span> Tooltip</h2>
5556
5668
  <div class="badges">
5557
- <label for="c-21-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
5669
+ <label for="c-22-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
5558
5670
 
5559
- <label for="c-21-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
5671
+ <label for="c-22-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
5560
5672
 
5561
5673
  </div>
5562
5674
  </div>
@@ -5569,9 +5681,9 @@ visibleToasts?: number</code></pre>
5569
5681
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
5570
5682
 
5571
5683
 
5572
- <input id="c-21-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
5684
+ <input id="c-22-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
5573
5685
 
5574
- <input id="c-21-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
5686
+ <input id="c-22-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
5575
5687
 
5576
5688
  <div class="panels">
5577
5689
 
@@ -5736,9 +5848,9 @@ sideOffset?: number = 4</code></pre>
5736
5848
  <div class="title">
5737
5849
  <h2><span class="status-dot dot-ok"></span> ValidationList</h2>
5738
5850
  <div class="badges">
5739
- <label for="c-22-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
5851
+ <label for="c-23-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
5740
5852
 
5741
- <label for="c-22-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
5853
+ <label for="c-23-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
5742
5854
 
5743
5855
  </div>
5744
5856
  </div>
@@ -5751,9 +5863,9 @@ sideOffset?: number = 4</code></pre>
5751
5863
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
5752
5864
 
5753
5865
 
5754
- <input id="c-22-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
5866
+ <input id="c-23-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
5755
5867
 
5756
- <input id="c-22-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
5868
+ <input id="c-23-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
5757
5869
 
5758
5870
  <div class="panels">
5759
5871