@agentero/design-system 0.15.1 → 0.16.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.
Files changed (9) hide show
  1. package/mcp/manifests/components.html +132 -42
  2. package/mcp/manifests/components.json +1 -1
  3. package/package.json +5 -1
  4. package/src/check-list/check-list.d.ts +65 -0
  5. package/src/check-list/check-list.js +31 -0
  6. package/src/check-list/icons.d.ts +2 -0
  7. package/src/check-list/icons.js +16 -0
  8. package/src/check-list/index.d.ts +1 -0
  9. package/src/check-list/index.js +2 -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">16 components ok</span><span class="filter-pill ok" aria-disabled="true">147 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">17 components ok</span><span class="filter-pill ok" aria-disabled="true">149 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.1s</strong>.
585
+ Using <code>react-docgen-typescript</code>. Generation took <strong>3.0s</strong>.
586
586
  </div>
587
587
  <h2 class="section-title">Components</h2>
588
588
  <div class="grid" role="list">
@@ -2078,6 +2078,96 @@ variant?: ButtonVariantType</code></pre>
2078
2078
 
2079
2079
  </div>
2080
2080
  </article>
2081
+ <article
2082
+ class="card
2083
+ no-error
2084
+ no-info
2085
+ no-story-error
2086
+ no-doc-error"
2087
+ role="listitem"
2088
+ aria-label="CheckList.Root">
2089
+ <div class="head">
2090
+ <div class="title">
2091
+ <h2><span class="status-dot dot-ok"></span> CheckList.Root</h2>
2092
+ <div class="badges">
2093
+
2094
+
2095
+ <label for="c-4-components-checklist-stories" class="badge ok as-toggle">2 stories</label>
2096
+
2097
+ </div>
2098
+ </div>
2099
+ <div class="meta" title="./src/check-list/check-list.stories.tsx">components-checklist · ./src/check-list/check-list.stories.tsx</div>
2100
+
2101
+ <div class="hint">CheckList renders a vertical list where every row is marked with a check icon. Purely presentational — for interactive selection use a checkbox group.</div>
2102
+
2103
+ </div>
2104
+
2105
+ <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2106
+
2107
+
2108
+ <input id="c-4-components-checklist-stories" class="tg tg-stories" type="checkbox" hidden />
2109
+
2110
+
2111
+
2112
+ <div class="panels">
2113
+
2114
+
2115
+
2116
+
2117
+ <div class="panel panel-stories">
2118
+
2119
+
2120
+
2121
+ <div class="note ok">
2122
+ <div class="row">
2123
+ <span class="ex-name">Imports</span>
2124
+ </div>
2125
+ <pre><code>import { CheckList } from "@agentero/design-system";</code></pre>
2126
+ </div>
2127
+
2128
+
2129
+ <div class="note ok">
2130
+ <div class="row">
2131
+ <span class="ex-name">Default</span>
2132
+ <span class="badge ok">story ok</span>
2133
+ </div>
2134
+
2135
+ <div class="hint">Plain text rows with a leading check.</div>
2136
+ <pre><code>const Default = () =&gt; (
2137
+ &lt;CheckList.Root&gt;
2138
+ &lt;CheckList.Item&gt;Instant appointment&lt;/CheckList.Item&gt;
2139
+ &lt;CheckList.Item&gt;Bind with Agentero&lt;/CheckList.Item&gt;
2140
+ &lt;CheckList.Item&gt;Available in the Agentero rater&lt;/CheckList.Item&gt;
2141
+ &lt;/CheckList.Root&gt;
2142
+ );</code></pre>
2143
+ </div>
2144
+ <div class="note ok">
2145
+ <div class="row">
2146
+ <span class="ex-name">Rich Content</span>
2147
+ <span class="badge ok">story ok</span>
2148
+ </div>
2149
+
2150
+ <div class="hint">Items accept rich content — links, wrapped text, custom markup.</div>
2151
+ <pre><code>const RichContent = () =&gt; (
2152
+ &lt;div className=&quot;w-72&quot;&gt;
2153
+ &lt;CheckList.Root&gt;
2154
+ &lt;CheckList.Item&gt;
2155
+ &lt;a href=&quot;#quoting&quot; className=&quot;underline&quot;&gt;
2156
+ Agentero rater
2157
+ &lt;/a&gt;
2158
+ &lt;/CheckList.Item&gt;
2159
+ &lt;CheckList.Item&gt;
2160
+ Longer descriptions wrap under their own text while the check stays aligned to the first
2161
+ line.
2162
+ &lt;/CheckList.Item&gt;
2163
+ &lt;/CheckList.Root&gt;
2164
+ &lt;/div&gt;
2165
+ );</code></pre>
2166
+ </div>
2167
+ </div>
2168
+
2169
+ </div>
2170
+ </article>
2081
2171
  <article
2082
2172
  class="card
2083
2173
  no-error
@@ -2092,7 +2182,7 @@ variant?: ButtonVariantType</code></pre>
2092
2182
  <div class="badges">
2093
2183
 
2094
2184
 
2095
- <label for="c-4-components-datatable-stories" class="badge ok as-toggle">4 stories</label>
2185
+ <label for="c-5-components-datatable-stories" class="badge ok as-toggle">4 stories</label>
2096
2186
 
2097
2187
  </div>
2098
2188
  </div>
@@ -2105,7 +2195,7 @@ variant?: ButtonVariantType</code></pre>
2105
2195
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2106
2196
 
2107
2197
 
2108
- <input id="c-4-components-datatable-stories" class="tg tg-stories" type="checkbox" hidden />
2198
+ <input id="c-5-components-datatable-stories" class="tg tg-stories" type="checkbox" hidden />
2109
2199
 
2110
2200
 
2111
2201
 
@@ -2235,9 +2325,9 @@ variant?: ButtonVariantType</code></pre>
2235
2325
  <div class="title">
2236
2326
  <h2><span class="status-dot dot-ok"></span> Divider</h2>
2237
2327
  <div class="badges">
2238
- <label for="c-5-components-divider-props" class="badge ok as-toggle">2 prop types</label>
2328
+ <label for="c-6-components-divider-props" class="badge ok as-toggle">2 prop types</label>
2239
2329
 
2240
- <label for="c-5-components-divider-stories" class="badge ok as-toggle">10 stories</label>
2330
+ <label for="c-6-components-divider-stories" class="badge ok as-toggle">10 stories</label>
2241
2331
 
2242
2332
  </div>
2243
2333
  </div>
@@ -2250,9 +2340,9 @@ variant?: ButtonVariantType</code></pre>
2250
2340
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2251
2341
 
2252
2342
 
2253
- <input id="c-5-components-divider-stories" class="tg tg-stories" type="checkbox" hidden />
2343
+ <input id="c-6-components-divider-stories" class="tg tg-stories" type="checkbox" hidden />
2254
2344
 
2255
- <input id="c-5-components-divider-props" class="tg tg-props" type="checkbox" hidden />
2345
+ <input id="c-6-components-divider-props" class="tg tg-props" type="checkbox" hidden />
2256
2346
 
2257
2347
  <div class="panels">
2258
2348
 
@@ -2532,7 +2622,7 @@ label?: ReactNode</code></pre>
2532
2622
  <div class="badges">
2533
2623
 
2534
2624
 
2535
- <label for="c-6-components-dropdownmenu-stories" class="badge ok as-toggle">7 stories</label>
2625
+ <label for="c-7-components-dropdownmenu-stories" class="badge ok as-toggle">7 stories</label>
2536
2626
 
2537
2627
  </div>
2538
2628
  </div>
@@ -2545,7 +2635,7 @@ label?: ReactNode</code></pre>
2545
2635
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2546
2636
 
2547
2637
 
2548
- <input id="c-6-components-dropdownmenu-stories" class="tg tg-stories" type="checkbox" hidden />
2638
+ <input id="c-7-components-dropdownmenu-stories" class="tg tg-stories" type="checkbox" hidden />
2549
2639
 
2550
2640
 
2551
2641
 
@@ -2914,9 +3004,9 @@ label?: ReactNode</code></pre>
2914
3004
  <div class="title">
2915
3005
  <h2><span class="status-dot dot-ok"></span> Loading</h2>
2916
3006
  <div class="badges">
2917
- <label for="c-7-components-loading-props" class="badge ok as-toggle">1 prop type</label>
3007
+ <label for="c-8-components-loading-props" class="badge ok as-toggle">1 prop type</label>
2918
3008
 
2919
- <label for="c-7-components-loading-stories" class="badge ok as-toggle">7 stories</label>
3009
+ <label for="c-8-components-loading-stories" class="badge ok as-toggle">7 stories</label>
2920
3010
 
2921
3011
  </div>
2922
3012
  </div>
@@ -2929,9 +3019,9 @@ label?: ReactNode</code></pre>
2929
3019
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
2930
3020
 
2931
3021
 
2932
- <input id="c-7-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
3022
+ <input id="c-8-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
2933
3023
 
2934
- <input id="c-7-components-loading-props" class="tg tg-props" type="checkbox" hidden />
3024
+ <input id="c-8-components-loading-props" class="tg tg-props" type="checkbox" hidden />
2935
3025
 
2936
3026
  <div class="panels">
2937
3027
 
@@ -3071,9 +3161,9 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
3071
3161
  <div class="title">
3072
3162
  <h2><span class="status-dot dot-ok"></span> Pagination</h2>
3073
3163
  <div class="badges">
3074
- <label for="c-8-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
3164
+ <label for="c-9-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
3075
3165
 
3076
- <label for="c-8-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
3166
+ <label for="c-9-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
3077
3167
 
3078
3168
  </div>
3079
3169
  </div>
@@ -3086,9 +3176,9 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
3086
3176
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3087
3177
 
3088
3178
 
3089
- <input id="c-8-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
3179
+ <input id="c-9-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
3090
3180
 
3091
- <input id="c-8-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
3181
+ <input id="c-9-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
3092
3182
 
3093
3183
  <div class="panels">
3094
3184
 
@@ -3232,9 +3322,9 @@ totalCount: number</code></pre>
3232
3322
  <div class="title">
3233
3323
  <h2><span class="status-dot dot-ok"></span> Progress</h2>
3234
3324
  <div class="badges">
3235
- <label for="c-9-components-progress-props" class="badge ok as-toggle">4 prop types</label>
3325
+ <label for="c-10-components-progress-props" class="badge ok as-toggle">4 prop types</label>
3236
3326
 
3237
- <label for="c-9-components-progress-stories" class="badge ok as-toggle">4 stories</label>
3327
+ <label for="c-10-components-progress-stories" class="badge ok as-toggle">4 stories</label>
3238
3328
 
3239
3329
  </div>
3240
3330
  </div>
@@ -3247,9 +3337,9 @@ totalCount: number</code></pre>
3247
3337
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3248
3338
 
3249
3339
 
3250
- <input id="c-9-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
3340
+ <input id="c-10-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
3251
3341
 
3252
- <input id="c-9-components-progress-props" class="tg tg-props" type="checkbox" hidden />
3342
+ <input id="c-10-components-progress-props" class="tg tg-props" type="checkbox" hidden />
3253
3343
 
3254
3344
  <div class="panels">
3255
3345
 
@@ -3367,7 +3457,7 @@ percentage: number</code></pre>
3367
3457
  <div class="badges">
3368
3458
 
3369
3459
 
3370
- <label for="c-10-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
3460
+ <label for="c-11-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
3371
3461
 
3372
3462
  </div>
3373
3463
  </div>
@@ -3380,7 +3470,7 @@ percentage: number</code></pre>
3380
3470
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3381
3471
 
3382
3472
 
3383
- <input id="c-10-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
3473
+ <input id="c-11-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
3384
3474
 
3385
3475
 
3386
3476
 
@@ -3474,9 +3564,9 @@ percentage: number</code></pre>
3474
3564
  <div class="title">
3475
3565
  <h2><span class="status-dot dot-ok"></span> Switch</h2>
3476
3566
  <div class="badges">
3477
- <label for="c-11-components-switch-props" class="badge ok as-toggle">4 prop types</label>
3567
+ <label for="c-12-components-switch-props" class="badge ok as-toggle">4 prop types</label>
3478
3568
 
3479
- <label for="c-11-components-switch-stories" class="badge ok as-toggle">7 stories</label>
3569
+ <label for="c-12-components-switch-stories" class="badge ok as-toggle">7 stories</label>
3480
3570
 
3481
3571
  </div>
3482
3572
  </div>
@@ -3489,9 +3579,9 @@ percentage: number</code></pre>
3489
3579
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3490
3580
 
3491
3581
 
3492
- <input id="c-11-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
3582
+ <input id="c-12-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
3493
3583
 
3494
- <input id="c-11-components-switch-props" class="tg tg-props" type="checkbox" hidden />
3584
+ <input id="c-12-components-switch-props" class="tg tg-props" type="checkbox" hidden />
3495
3585
 
3496
3586
  <div class="panels">
3497
3587
 
@@ -3664,7 +3754,7 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
3664
3754
  <div class="badges">
3665
3755
 
3666
3756
 
3667
- <label for="c-12-components-table-stories" class="badge ok as-toggle">9 stories</label>
3757
+ <label for="c-13-components-table-stories" class="badge ok as-toggle">9 stories</label>
3668
3758
 
3669
3759
  </div>
3670
3760
  </div>
@@ -3677,7 +3767,7 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
3677
3767
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3678
3768
 
3679
3769
 
3680
- <input id="c-12-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
3770
+ <input id="c-13-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
3681
3771
 
3682
3772
 
3683
3773
 
@@ -3851,9 +3941,9 @@ import { Fragment } from "react";</code></pre>
3851
3941
  <div class="title">
3852
3942
  <h2><span class="status-dot dot-ok"></span> Tag</h2>
3853
3943
  <div class="badges">
3854
- <label for="c-13-components-tag-props" class="badge ok as-toggle">6 prop types</label>
3944
+ <label for="c-14-components-tag-props" class="badge ok as-toggle">6 prop types</label>
3855
3945
 
3856
- <label for="c-13-components-tag-stories" class="badge ok as-toggle">10 stories</label>
3946
+ <label for="c-14-components-tag-stories" class="badge ok as-toggle">10 stories</label>
3857
3947
 
3858
3948
  </div>
3859
3949
  </div>
@@ -3866,9 +3956,9 @@ import { Fragment } from "react";</code></pre>
3866
3956
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
3867
3957
 
3868
3958
 
3869
- <input id="c-13-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
3959
+ <input id="c-14-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
3870
3960
 
3871
- <input id="c-13-components-tag-props" class="tg tg-props" type="checkbox" hidden />
3961
+ <input id="c-14-components-tag-props" class="tg tg-props" type="checkbox" hidden />
3872
3962
 
3873
3963
  <div class="panels">
3874
3964
 
@@ -4225,9 +4315,9 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
4225
4315
  <div class="title">
4226
4316
  <h2><span class="status-dot dot-ok"></span> Toast</h2>
4227
4317
  <div class="badges">
4228
- <label for="c-14-components-toast-props" class="badge ok as-toggle">11 prop types</label>
4318
+ <label for="c-15-components-toast-props" class="badge ok as-toggle">11 prop types</label>
4229
4319
 
4230
- <label for="c-14-components-toast-stories" class="badge ok as-toggle">11 stories</label>
4320
+ <label for="c-15-components-toast-stories" class="badge ok as-toggle">11 stories</label>
4231
4321
 
4232
4322
  </div>
4233
4323
  </div>
@@ -4240,9 +4330,9 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
4240
4330
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
4241
4331
 
4242
4332
 
4243
- <input id="c-14-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
4333
+ <input id="c-15-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
4244
4334
 
4245
- <input id="c-14-components-toast-props" class="tg tg-props" type="checkbox" hidden />
4335
+ <input id="c-15-components-toast-props" class="tg tg-props" type="checkbox" hidden />
4246
4336
 
4247
4337
  <div class="panels">
4248
4338
 
@@ -4651,9 +4741,9 @@ visibleToasts?: number</code></pre>
4651
4741
  <div class="title">
4652
4742
  <h2><span class="status-dot dot-ok"></span> Tooltip</h2>
4653
4743
  <div class="badges">
4654
- <label for="c-15-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
4744
+ <label for="c-16-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
4655
4745
 
4656
- <label for="c-15-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
4746
+ <label for="c-16-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
4657
4747
 
4658
4748
  </div>
4659
4749
  </div>
@@ -4666,9 +4756,9 @@ visibleToasts?: number</code></pre>
4666
4756
  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
4667
4757
 
4668
4758
 
4669
- <input id="c-15-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
4759
+ <input id="c-16-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
4670
4760
 
4671
- <input id="c-15-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
4761
+ <input id="c-16-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
4672
4762
 
4673
4763
  <div class="panels">
4674
4764