@agentero/design-system 0.14.0 → 0.15.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.
|
@@ -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">16 components ok</span><span class="filter-pill ok" aria-disabled="true">146 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>
|
|
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">
|
|
@@ -3220,6 +3220,139 @@ totalCount: number</code></pre>
|
|
|
3220
3220
|
|
|
3221
3221
|
</div>
|
|
3222
3222
|
</article>
|
|
3223
|
+
<article
|
|
3224
|
+
class="card
|
|
3225
|
+
no-error
|
|
3226
|
+
no-info
|
|
3227
|
+
no-story-error
|
|
3228
|
+
no-doc-error"
|
|
3229
|
+
role="listitem"
|
|
3230
|
+
aria-label="Progress">
|
|
3231
|
+
<div class="head">
|
|
3232
|
+
<div class="title">
|
|
3233
|
+
<h2><span class="status-dot dot-ok"></span> Progress</h2>
|
|
3234
|
+
<div class="badges">
|
|
3235
|
+
<label for="c-9-components-progress-props" class="badge ok as-toggle">4 prop types</label>
|
|
3236
|
+
|
|
3237
|
+
<label for="c-9-components-progress-stories" class="badge ok as-toggle">4 stories</label>
|
|
3238
|
+
|
|
3239
|
+
</div>
|
|
3240
|
+
</div>
|
|
3241
|
+
<div class="meta" title="./src/progress/progress.stories.tsx">components-progress · ./src/progress/progress.stories.tsx</div>
|
|
3242
|
+
|
|
3243
|
+
<div class="hint">Progress shows how far a bounded task has advanced. Pass `percentage` (0–100) and optionally a `label` rendered above the bar. The fill paints with `currentColor`, so recolor it with a plain text class — e.g. `className="text-brand-400"`.</div>
|
|
3244
|
+
|
|
3245
|
+
</div>
|
|
3246
|
+
|
|
3247
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3248
|
+
|
|
3249
|
+
|
|
3250
|
+
<input id="c-9-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3251
|
+
|
|
3252
|
+
<input id="c-9-components-progress-props" class="tg tg-props" type="checkbox" hidden />
|
|
3253
|
+
|
|
3254
|
+
<div class="panels">
|
|
3255
|
+
|
|
3256
|
+
|
|
3257
|
+
|
|
3258
|
+
<div class="panel panel-props">
|
|
3259
|
+
<div class="note ok">
|
|
3260
|
+
<div class="row">
|
|
3261
|
+
<span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
|
|
3262
|
+
<span class="badge ok">4 prop types</span>
|
|
3263
|
+
</div>
|
|
3264
|
+
<pre><code>Component: src/progress/progress.tsx::Progress</code></pre>
|
|
3265
|
+
<pre><code>Props:</code></pre>
|
|
3266
|
+
<pre><code>/**
|
|
3267
|
+
* Accessible name when no visible `label` is provided. Defaults to `'Progress'`.
|
|
3268
|
+
*/
|
|
3269
|
+
aria-label?: string
|
|
3270
|
+
|
|
3271
|
+
/**
|
|
3272
|
+
* Extra classes for the bar, merged last. The fill paints with `currentColor`,
|
|
3273
|
+
* so a text color recolors it (e.g. `text-brand-400`); sizing classes resize
|
|
3274
|
+
* the track (e.g. `h-3`).
|
|
3275
|
+
*/
|
|
3276
|
+
className?: string
|
|
3277
|
+
|
|
3278
|
+
/**
|
|
3279
|
+
* Optional label rendered above the bar, with the percentage value on the right.
|
|
3280
|
+
*/
|
|
3281
|
+
label?: string
|
|
3282
|
+
|
|
3283
|
+
/**
|
|
3284
|
+
* Completion percentage, 0–100. Values outside the range are clamped.
|
|
3285
|
+
*/
|
|
3286
|
+
percentage: number</code></pre>
|
|
3287
|
+
</div>
|
|
3288
|
+
</div>
|
|
3289
|
+
|
|
3290
|
+
<div class="panel panel-stories">
|
|
3291
|
+
|
|
3292
|
+
|
|
3293
|
+
|
|
3294
|
+
<div class="note ok">
|
|
3295
|
+
<div class="row">
|
|
3296
|
+
<span class="ex-name">Imports</span>
|
|
3297
|
+
</div>
|
|
3298
|
+
<pre><code>import { Progress } from "@agentero/design-system";</code></pre>
|
|
3299
|
+
</div>
|
|
3300
|
+
|
|
3301
|
+
|
|
3302
|
+
<div class="note ok">
|
|
3303
|
+
<div class="row">
|
|
3304
|
+
<span class="ex-name">Default</span>
|
|
3305
|
+
<span class="badge ok">story ok</span>
|
|
3306
|
+
</div>
|
|
3307
|
+
|
|
3308
|
+
<div class="hint">Default near-black bar; exposes `role="progressbar"` with the current value.</div>
|
|
3309
|
+
<pre><code>const Default = () => <Progress percentage={62} />;</code></pre>
|
|
3310
|
+
</div>
|
|
3311
|
+
<div class="note ok">
|
|
3312
|
+
<div class="row">
|
|
3313
|
+
<span class="ex-name">With Label</span>
|
|
3314
|
+
<span class="badge ok">story ok</span>
|
|
3315
|
+
</div>
|
|
3316
|
+
|
|
3317
|
+
<div class="hint">`label` renders above the bar with the percentage value on the right.</div>
|
|
3318
|
+
<pre><code>const WithLabel = () => <Progress percentage={62} label="Profile completion" className="text-brand-400" />;</code></pre>
|
|
3319
|
+
</div>
|
|
3320
|
+
<div class="note ok">
|
|
3321
|
+
<div class="row">
|
|
3322
|
+
<span class="ex-name">Custom Colors</span>
|
|
3323
|
+
<span class="badge ok">story ok</span>
|
|
3324
|
+
</div>
|
|
3325
|
+
|
|
3326
|
+
<div class="hint">The fill follows `currentColor`: recolor it with any `text-*` class via `className`.</div>
|
|
3327
|
+
<pre><code>const CustomColors = args => (
|
|
3328
|
+
<div className="flex flex-col gap-4">
|
|
3329
|
+
{[
|
|
3330
|
+
['default', undefined],
|
|
3331
|
+
['text-brand-400', 'text-brand-400'],
|
|
3332
|
+
['text-brand-600', 'text-brand-600'],
|
|
3333
|
+
['text-purple-400', 'text-purple-400'],
|
|
3334
|
+
['text-orange-400', 'text-orange-400'],
|
|
3335
|
+
['text-pink-400', 'text-pink-400'],
|
|
3336
|
+
['text-blue-400', 'text-blue-400']
|
|
3337
|
+
].map(([name, className]) => (
|
|
3338
|
+
<Progress key={name} {...args} className={className} label={name} />
|
|
3339
|
+
))}
|
|
3340
|
+
</div>
|
|
3341
|
+
);</code></pre>
|
|
3342
|
+
</div>
|
|
3343
|
+
<div class="note ok">
|
|
3344
|
+
<div class="row">
|
|
3345
|
+
<span class="ex-name">Clamped</span>
|
|
3346
|
+
<span class="badge ok">story ok</span>
|
|
3347
|
+
</div>
|
|
3348
|
+
|
|
3349
|
+
<div class="hint">Out-of-range values are clamped to 0–100.</div>
|
|
3350
|
+
<pre><code>const Clamped = () => <Progress percentage={150} />;</code></pre>
|
|
3351
|
+
</div>
|
|
3352
|
+
</div>
|
|
3353
|
+
|
|
3354
|
+
</div>
|
|
3355
|
+
</article>
|
|
3223
3356
|
<article
|
|
3224
3357
|
class="card
|
|
3225
3358
|
no-error
|
|
@@ -3234,7 +3367,7 @@ totalCount: number</code></pre>
|
|
|
3234
3367
|
<div class="badges">
|
|
3235
3368
|
|
|
3236
3369
|
|
|
3237
|
-
<label for="c-
|
|
3370
|
+
<label for="c-10-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
3238
3371
|
|
|
3239
3372
|
</div>
|
|
3240
3373
|
</div>
|
|
@@ -3247,7 +3380,7 @@ totalCount: number</code></pre>
|
|
|
3247
3380
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3248
3381
|
|
|
3249
3382
|
|
|
3250
|
-
<input id="c-
|
|
3383
|
+
<input id="c-10-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3251
3384
|
|
|
3252
3385
|
|
|
3253
3386
|
|
|
@@ -3341,9 +3474,9 @@ totalCount: number</code></pre>
|
|
|
3341
3474
|
<div class="title">
|
|
3342
3475
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
3343
3476
|
<div class="badges">
|
|
3344
|
-
<label for="c-
|
|
3477
|
+
<label for="c-11-components-switch-props" class="badge ok as-toggle">2 prop types</label>
|
|
3345
3478
|
|
|
3346
|
-
<label for="c-
|
|
3479
|
+
<label for="c-11-components-switch-stories" class="badge ok as-toggle">6 stories</label>
|
|
3347
3480
|
|
|
3348
3481
|
</div>
|
|
3349
3482
|
</div>
|
|
@@ -3356,9 +3489,9 @@ totalCount: number</code></pre>
|
|
|
3356
3489
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3357
3490
|
|
|
3358
3491
|
|
|
3359
|
-
<input id="c-
|
|
3492
|
+
<input id="c-11-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3360
3493
|
|
|
3361
|
-
<input id="c-
|
|
3494
|
+
<input id="c-11-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
3362
3495
|
|
|
3363
3496
|
<div class="panels">
|
|
3364
3497
|
|
|
@@ -3508,7 +3641,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
3508
3641
|
<div class="badges">
|
|
3509
3642
|
|
|
3510
3643
|
|
|
3511
|
-
<label for="c-
|
|
3644
|
+
<label for="c-12-components-table-stories" class="badge ok as-toggle">9 stories</label>
|
|
3512
3645
|
|
|
3513
3646
|
</div>
|
|
3514
3647
|
</div>
|
|
@@ -3521,7 +3654,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
3521
3654
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3522
3655
|
|
|
3523
3656
|
|
|
3524
|
-
<input id="c-
|
|
3657
|
+
<input id="c-12-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3525
3658
|
|
|
3526
3659
|
|
|
3527
3660
|
|
|
@@ -3695,9 +3828,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3695
3828
|
<div class="title">
|
|
3696
3829
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
3697
3830
|
<div class="badges">
|
|
3698
|
-
<label for="c-
|
|
3831
|
+
<label for="c-13-components-tag-props" class="badge ok as-toggle">6 prop types</label>
|
|
3699
3832
|
|
|
3700
|
-
<label for="c-
|
|
3833
|
+
<label for="c-13-components-tag-stories" class="badge ok as-toggle">10 stories</label>
|
|
3701
3834
|
|
|
3702
3835
|
</div>
|
|
3703
3836
|
</div>
|
|
@@ -3710,9 +3843,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3710
3843
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3711
3844
|
|
|
3712
3845
|
|
|
3713
|
-
<input id="c-
|
|
3846
|
+
<input id="c-13-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3714
3847
|
|
|
3715
|
-
<input id="c-
|
|
3848
|
+
<input id="c-13-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
3716
3849
|
|
|
3717
3850
|
<div class="panels">
|
|
3718
3851
|
|
|
@@ -4069,9 +4202,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4069
4202
|
<div class="title">
|
|
4070
4203
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
4071
4204
|
<div class="badges">
|
|
4072
|
-
<label for="c-
|
|
4205
|
+
<label for="c-14-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
4073
4206
|
|
|
4074
|
-
<label for="c-
|
|
4207
|
+
<label for="c-14-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
4075
4208
|
|
|
4076
4209
|
</div>
|
|
4077
4210
|
</div>
|
|
@@ -4084,9 +4217,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4084
4217
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4085
4218
|
|
|
4086
4219
|
|
|
4087
|
-
<input id="c-
|
|
4220
|
+
<input id="c-14-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4088
4221
|
|
|
4089
|
-
<input id="c-
|
|
4222
|
+
<input id="c-14-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
4090
4223
|
|
|
4091
4224
|
<div class="panels">
|
|
4092
4225
|
|
|
@@ -4495,9 +4628,9 @@ visibleToasts?: number</code></pre>
|
|
|
4495
4628
|
<div class="title">
|
|
4496
4629
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
4497
4630
|
<div class="badges">
|
|
4498
|
-
<label for="c-
|
|
4631
|
+
<label for="c-15-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
|
|
4499
4632
|
|
|
4500
|
-
<label for="c-
|
|
4633
|
+
<label for="c-15-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
4501
4634
|
|
|
4502
4635
|
</div>
|
|
4503
4636
|
</div>
|
|
@@ -4510,9 +4643,9 @@ visibleToasts?: number</code></pre>
|
|
|
4510
4643
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4511
4644
|
|
|
4512
4645
|
|
|
4513
|
-
<input id="c-
|
|
4646
|
+
<input id="c-15-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4514
4647
|
|
|
4515
|
-
<input id="c-
|
|
4648
|
+
<input id="c-15-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
4516
4649
|
|
|
4517
4650
|
<div class="panels">
|
|
4518
4651
|
|