@agentero/design-system 0.13.0 → 0.14.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,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">15 components ok</span><span class="filter-pill ok" aria-disabled="true">142 stories ok</span></div>
|
|
580
580
|
</div>
|
|
581
581
|
</header>
|
|
582
582
|
<main>
|
|
@@ -3220,6 +3220,115 @@ 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="Skeleton">
|
|
3231
|
+
<div class="head">
|
|
3232
|
+
<div class="title">
|
|
3233
|
+
<h2><span class="status-dot dot-ok"></span> Skeleton</h2>
|
|
3234
|
+
<div class="badges">
|
|
3235
|
+
|
|
3236
|
+
|
|
3237
|
+
<label for="c-9-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
3238
|
+
|
|
3239
|
+
</div>
|
|
3240
|
+
</div>
|
|
3241
|
+
<div class="meta" title="./src/skeleton/skeleton.stories.tsx">components-skeleton · ./src/skeleton/skeleton.stories.tsx</div>
|
|
3242
|
+
|
|
3243
|
+
<div class="hint">Skeleton renders a pulsing placeholder box while content loads. Size and shape it with Tailwind classes to mirror the content it stands in for.</div>
|
|
3244
|
+
|
|
3245
|
+
</div>
|
|
3246
|
+
|
|
3247
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3248
|
+
|
|
3249
|
+
|
|
3250
|
+
<input id="c-9-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3251
|
+
|
|
3252
|
+
|
|
3253
|
+
|
|
3254
|
+
<div class="panels">
|
|
3255
|
+
|
|
3256
|
+
|
|
3257
|
+
|
|
3258
|
+
|
|
3259
|
+
<div class="panel panel-stories">
|
|
3260
|
+
|
|
3261
|
+
|
|
3262
|
+
|
|
3263
|
+
<div class="note ok">
|
|
3264
|
+
<div class="row">
|
|
3265
|
+
<span class="ex-name">Imports</span>
|
|
3266
|
+
</div>
|
|
3267
|
+
<pre><code>import { Skeleton } from "@agentero/design-system";</code></pre>
|
|
3268
|
+
</div>
|
|
3269
|
+
|
|
3270
|
+
|
|
3271
|
+
<div class="note ok">
|
|
3272
|
+
<div class="row">
|
|
3273
|
+
<span class="ex-name">Default</span>
|
|
3274
|
+
<span class="badge ok">story ok</span>
|
|
3275
|
+
</div>
|
|
3276
|
+
|
|
3277
|
+
<div class="hint">Default placeholder box, sized via `className`; hidden from assistive technologies.</div>
|
|
3278
|
+
<pre><code>const Default = () => <Skeleton className="h-4 w-40" />;</code></pre>
|
|
3279
|
+
</div>
|
|
3280
|
+
<div class="note ok">
|
|
3281
|
+
<div class="row">
|
|
3282
|
+
<span class="ex-name">Text Block</span>
|
|
3283
|
+
<span class="badge ok">story ok</span>
|
|
3284
|
+
</div>
|
|
3285
|
+
|
|
3286
|
+
<div class="hint">Compose plain skeletons to sketch the loading shape of real content.</div>
|
|
3287
|
+
<pre><code>const TextBlock = () => (
|
|
3288
|
+
<div className="flex w-80 flex-col gap-2">
|
|
3289
|
+
<Skeleton className="h-4 w-full" />
|
|
3290
|
+
<Skeleton className="h-4 w-full" />
|
|
3291
|
+
<Skeleton className="h-4 w-2/3" />
|
|
3292
|
+
</div>
|
|
3293
|
+
);</code></pre>
|
|
3294
|
+
</div>
|
|
3295
|
+
<div class="note ok">
|
|
3296
|
+
<div class="row">
|
|
3297
|
+
<span class="ex-name">List Item</span>
|
|
3298
|
+
<span class="badge ok">story ok</span>
|
|
3299
|
+
</div>
|
|
3300
|
+
|
|
3301
|
+
<div class="hint">`rounded-full` for avatars; pair with text lines for a list-item placeholder.</div>
|
|
3302
|
+
<pre><code>const ListItem = () => (
|
|
3303
|
+
<div className="flex w-80 items-center gap-3">
|
|
3304
|
+
<Skeleton className="size-10 shrink-0 rounded-full" />
|
|
3305
|
+
<div className="flex w-full flex-col gap-2">
|
|
3306
|
+
<Skeleton className="h-4 w-1/2" />
|
|
3307
|
+
<Skeleton className="h-3 w-3/4" />
|
|
3308
|
+
</div>
|
|
3309
|
+
</div>
|
|
3310
|
+
);</code></pre>
|
|
3311
|
+
</div>
|
|
3312
|
+
<div class="note ok">
|
|
3313
|
+
<div class="row">
|
|
3314
|
+
<span class="ex-name">Card</span>
|
|
3315
|
+
<span class="badge ok">story ok</span>
|
|
3316
|
+
</div>
|
|
3317
|
+
|
|
3318
|
+
<div class="hint">A card-shaped placeholder: media area, title, and body lines.</div>
|
|
3319
|
+
<pre><code>const Card = () => (
|
|
3320
|
+
<div className="flex w-80 flex-col gap-3 rounded-lg border border-border-default-base-primary p-4">
|
|
3321
|
+
<Skeleton className="h-32 w-full rounded-md" />
|
|
3322
|
+
<Skeleton className="h-5 w-1/2" />
|
|
3323
|
+
<Skeleton className="h-4 w-full" />
|
|
3324
|
+
<Skeleton className="h-4 w-2/3" />
|
|
3325
|
+
</div>
|
|
3326
|
+
);</code></pre>
|
|
3327
|
+
</div>
|
|
3328
|
+
</div>
|
|
3329
|
+
|
|
3330
|
+
</div>
|
|
3331
|
+
</article>
|
|
3223
3332
|
<article
|
|
3224
3333
|
class="card
|
|
3225
3334
|
no-error
|
|
@@ -3232,9 +3341,9 @@ totalCount: number</code></pre>
|
|
|
3232
3341
|
<div class="title">
|
|
3233
3342
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
3234
3343
|
<div class="badges">
|
|
3235
|
-
<label for="c-
|
|
3344
|
+
<label for="c-10-components-switch-props" class="badge ok as-toggle">2 prop types</label>
|
|
3236
3345
|
|
|
3237
|
-
<label for="c-
|
|
3346
|
+
<label for="c-10-components-switch-stories" class="badge ok as-toggle">6 stories</label>
|
|
3238
3347
|
|
|
3239
3348
|
</div>
|
|
3240
3349
|
</div>
|
|
@@ -3247,9 +3356,9 @@ totalCount: number</code></pre>
|
|
|
3247
3356
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3248
3357
|
|
|
3249
3358
|
|
|
3250
|
-
<input id="c-
|
|
3359
|
+
<input id="c-10-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3251
3360
|
|
|
3252
|
-
<input id="c-
|
|
3361
|
+
<input id="c-10-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
3253
3362
|
|
|
3254
3363
|
<div class="panels">
|
|
3255
3364
|
|
|
@@ -3399,7 +3508,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
3399
3508
|
<div class="badges">
|
|
3400
3509
|
|
|
3401
3510
|
|
|
3402
|
-
<label for="c-
|
|
3511
|
+
<label for="c-11-components-table-stories" class="badge ok as-toggle">9 stories</label>
|
|
3403
3512
|
|
|
3404
3513
|
</div>
|
|
3405
3514
|
</div>
|
|
@@ -3412,7 +3521,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
3412
3521
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3413
3522
|
|
|
3414
3523
|
|
|
3415
|
-
<input id="c-
|
|
3524
|
+
<input id="c-11-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3416
3525
|
|
|
3417
3526
|
|
|
3418
3527
|
|
|
@@ -3586,9 +3695,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3586
3695
|
<div class="title">
|
|
3587
3696
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
3588
3697
|
<div class="badges">
|
|
3589
|
-
<label for="c-
|
|
3698
|
+
<label for="c-12-components-tag-props" class="badge ok as-toggle">6 prop types</label>
|
|
3590
3699
|
|
|
3591
|
-
<label for="c-
|
|
3700
|
+
<label for="c-12-components-tag-stories" class="badge ok as-toggle">10 stories</label>
|
|
3592
3701
|
|
|
3593
3702
|
</div>
|
|
3594
3703
|
</div>
|
|
@@ -3601,9 +3710,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
3601
3710
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3602
3711
|
|
|
3603
3712
|
|
|
3604
|
-
<input id="c-
|
|
3713
|
+
<input id="c-12-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3605
3714
|
|
|
3606
|
-
<input id="c-
|
|
3715
|
+
<input id="c-12-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
3607
3716
|
|
|
3608
3717
|
<div class="panels">
|
|
3609
3718
|
|
|
@@ -3960,9 +4069,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
3960
4069
|
<div class="title">
|
|
3961
4070
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
3962
4071
|
<div class="badges">
|
|
3963
|
-
<label for="c-
|
|
4072
|
+
<label for="c-13-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
3964
4073
|
|
|
3965
|
-
<label for="c-
|
|
4074
|
+
<label for="c-13-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
3966
4075
|
|
|
3967
4076
|
</div>
|
|
3968
4077
|
</div>
|
|
@@ -3975,9 +4084,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
3975
4084
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3976
4085
|
|
|
3977
4086
|
|
|
3978
|
-
<input id="c-
|
|
4087
|
+
<input id="c-13-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3979
4088
|
|
|
3980
|
-
<input id="c-
|
|
4089
|
+
<input id="c-13-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
3981
4090
|
|
|
3982
4091
|
<div class="panels">
|
|
3983
4092
|
|
|
@@ -4386,9 +4495,9 @@ visibleToasts?: number</code></pre>
|
|
|
4386
4495
|
<div class="title">
|
|
4387
4496
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
4388
4497
|
<div class="badges">
|
|
4389
|
-
<label for="c-
|
|
4498
|
+
<label for="c-14-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
|
|
4390
4499
|
|
|
4391
|
-
<label for="c-
|
|
4500
|
+
<label for="c-14-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
4392
4501
|
|
|
4393
4502
|
</div>
|
|
4394
4503
|
</div>
|
|
@@ -4401,9 +4510,9 @@ visibleToasts?: number</code></pre>
|
|
|
4401
4510
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4402
4511
|
|
|
4403
4512
|
|
|
4404
|
-
<input id="c-
|
|
4513
|
+
<input id="c-14-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4405
4514
|
|
|
4406
|
-
<input id="c-
|
|
4515
|
+
<input id="c-14-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
4407
4516
|
|
|
4408
4517
|
<div class="panels">
|
|
4409
4518
|
|