@agentero/design-system 0.18.2 → 0.19.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">20 components ok</span><span class="filter-pill ok" aria-disabled="true">166 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.2s</strong>.
|
|
586
586
|
</div>
|
|
587
587
|
<h2 class="section-title">Components</h2>
|
|
588
588
|
<div class="grid" role="list">
|
|
@@ -2992,6 +2992,226 @@ label?: ReactNode</code></pre>
|
|
|
2992
2992
|
|
|
2993
2993
|
</div>
|
|
2994
2994
|
</article>
|
|
2995
|
+
<article
|
|
2996
|
+
class="card
|
|
2997
|
+
no-error
|
|
2998
|
+
no-info
|
|
2999
|
+
no-story-error
|
|
3000
|
+
no-doc-error"
|
|
3001
|
+
role="listitem"
|
|
3002
|
+
aria-label="HoverCard.Root">
|
|
3003
|
+
<div class="head">
|
|
3004
|
+
<div class="title">
|
|
3005
|
+
<h2><span class="status-dot dot-ok"></span> HoverCard.Root</h2>
|
|
3006
|
+
<div class="badges">
|
|
3007
|
+
|
|
3008
|
+
|
|
3009
|
+
<label for="c-8-components-hovercard-stories" class="badge ok as-toggle">6 stories</label>
|
|
3010
|
+
|
|
3011
|
+
</div>
|
|
3012
|
+
</div>
|
|
3013
|
+
<div class="meta" title="./src/hover-card/hover-card.stories.tsx">components-hovercard · ./src/hover-card/hover-card.stories.tsx</div>
|
|
3014
|
+
|
|
3015
|
+
<div class="hint">HoverCard reveals rich, sighted-user preview content anchored to a trigger on pointer hover or keyboard focus. Compose it from `Root` / `Trigger` / `Portal` / `Content`.</div>
|
|
3016
|
+
|
|
3017
|
+
</div>
|
|
3018
|
+
|
|
3019
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3020
|
+
|
|
3021
|
+
|
|
3022
|
+
<input id="c-8-components-hovercard-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3023
|
+
|
|
3024
|
+
|
|
3025
|
+
|
|
3026
|
+
<div class="panels">
|
|
3027
|
+
|
|
3028
|
+
|
|
3029
|
+
|
|
3030
|
+
|
|
3031
|
+
<div class="panel panel-stories">
|
|
3032
|
+
|
|
3033
|
+
|
|
3034
|
+
|
|
3035
|
+
<div class="note ok">
|
|
3036
|
+
<div class="row">
|
|
3037
|
+
<span class="ex-name">Imports</span>
|
|
3038
|
+
</div>
|
|
3039
|
+
<pre><code>import { Avatar, HoverCard } from "@agentero/design-system";</code></pre>
|
|
3040
|
+
</div>
|
|
3041
|
+
|
|
3042
|
+
|
|
3043
|
+
<div class="note ok">
|
|
3044
|
+
<div class="row">
|
|
3045
|
+
<span class="ex-name">Default</span>
|
|
3046
|
+
<span class="badge ok">story ok</span>
|
|
3047
|
+
</div>
|
|
3048
|
+
|
|
3049
|
+
<div class="hint">Default preview revealed on hover; hides again on unhover.</div>
|
|
3050
|
+
<pre><code>const Default = () => <HoverCard.Root openDelay={0} closeDelay={0}>
|
|
3051
|
+
<HoverCard.Trigger asChild>
|
|
3052
|
+
<a
|
|
3053
|
+
href="https://agentero.com"
|
|
3054
|
+
className="text-text-default-base-primary underline">@agentero
|
|
3055
|
+
</a>
|
|
3056
|
+
</HoverCard.Trigger>
|
|
3057
|
+
<HoverCard.Portal>
|
|
3058
|
+
<HoverCard.Content>
|
|
3059
|
+
<PreviewCard />
|
|
3060
|
+
</HoverCard.Content>
|
|
3061
|
+
</HoverCard.Portal>
|
|
3062
|
+
</HoverCard.Root>;</code></pre>
|
|
3063
|
+
</div>
|
|
3064
|
+
<div class="note ok">
|
|
3065
|
+
<div class="row">
|
|
3066
|
+
<span class="ex-name">Opens On Focus</span>
|
|
3067
|
+
<span class="badge ok">story ok</span>
|
|
3068
|
+
</div>
|
|
3069
|
+
|
|
3070
|
+
<div class="hint">Opens on focus as a supplementary affordance. Note this is not the same as being keyboard-accessible: focus does not move into the card and it closes on blur, so any interactive content inside stays unreachable by keyboard — never put essential actions there.</div>
|
|
3071
|
+
<pre><code>const OpensOnFocus = () => <HoverCard.Root openDelay={0} closeDelay={0}>
|
|
3072
|
+
<HoverCard.Trigger asChild>
|
|
3073
|
+
<a
|
|
3074
|
+
href="https://agentero.com"
|
|
3075
|
+
className="text-text-default-base-primary underline">@agentero
|
|
3076
|
+
</a>
|
|
3077
|
+
</HoverCard.Trigger>
|
|
3078
|
+
<HoverCard.Portal>
|
|
3079
|
+
<HoverCard.Content>
|
|
3080
|
+
<PreviewCard />
|
|
3081
|
+
</HoverCard.Content>
|
|
3082
|
+
</HoverCard.Portal>
|
|
3083
|
+
</HoverCard.Root>;</code></pre>
|
|
3084
|
+
</div>
|
|
3085
|
+
<div class="note ok">
|
|
3086
|
+
<div class="row">
|
|
3087
|
+
<span class="ex-name">Sides</span>
|
|
3088
|
+
<span class="badge ok">story ok</span>
|
|
3089
|
+
</div>
|
|
3090
|
+
|
|
3091
|
+
<div class="hint">`side` sets the preferred placement; it flips on viewport collision.</div>
|
|
3092
|
+
<pre><code>const Sides = args => (
|
|
3093
|
+
<div className="grid grid-cols-2 gap-10">
|
|
3094
|
+
{(['top', 'right', 'bottom', 'left'] as const).map(side => (
|
|
3095
|
+
<HoverCard.Root key={side} {...args}>
|
|
3096
|
+
<HoverCard.Trigger asChild>
|
|
3097
|
+
<a href="https://agentero.com" className="text-text-default-base-primary underline">
|
|
3098
|
+
{side}
|
|
3099
|
+
</a>
|
|
3100
|
+
</HoverCard.Trigger>
|
|
3101
|
+
<HoverCard.Portal>
|
|
3102
|
+
<HoverCard.Content side={side}>
|
|
3103
|
+
<PreviewCard />
|
|
3104
|
+
</HoverCard.Content>
|
|
3105
|
+
</HoverCard.Portal>
|
|
3106
|
+
</HoverCard.Root>
|
|
3107
|
+
))}
|
|
3108
|
+
</div>
|
|
3109
|
+
);</code></pre>
|
|
3110
|
+
</div>
|
|
3111
|
+
<div class="note ok">
|
|
3112
|
+
<div class="row">
|
|
3113
|
+
<span class="ex-name">Rich Content</span>
|
|
3114
|
+
<span class="badge ok">story ok</span>
|
|
3115
|
+
</div>
|
|
3116
|
+
|
|
3117
|
+
<div class="hint">The whole point of a HoverCard over a Tooltip: freely laid-out content that may include its own links and actions. Still supplementary — never the only path to an action.</div>
|
|
3118
|
+
<pre><code>const RichContent = () => <HoverCard.Root openDelay={0} closeDelay={0}>
|
|
3119
|
+
<HoverCard.Trigger asChild>
|
|
3120
|
+
<a
|
|
3121
|
+
href="https://agentero.com"
|
|
3122
|
+
className="text-text-default-base-primary underline">@agentero
|
|
3123
|
+
</a>
|
|
3124
|
+
</HoverCard.Trigger>
|
|
3125
|
+
<HoverCard.Portal>
|
|
3126
|
+
<HoverCard.Content className="w-80">
|
|
3127
|
+
<div className="flex flex-col gap-3">
|
|
3128
|
+
<div className="flex gap-3">
|
|
3129
|
+
<Avatar fallback="AG" colorize="Agentero" type="initials" size="lg" />
|
|
3130
|
+
<div className="flex flex-col gap-1">
|
|
3131
|
+
<p className="font-medium text-text-default-base-primary">Agentero</p>
|
|
3132
|
+
<p className="text-text-default-base-tertiary">Insurance marketplace for independent agents.
|
|
3133
|
+
</p>
|
|
3134
|
+
</div>
|
|
3135
|
+
</div>
|
|
3136
|
+
<div className="flex gap-4 text-text-default-base-secondary">
|
|
3137
|
+
<span>
|
|
3138
|
+
<span className="font-medium text-text-default-base-primary">128</span>carriers
|
|
3139
|
+
</span>
|
|
3140
|
+
<span>
|
|
3141
|
+
<span className="font-medium text-text-default-base-primary">50</span>states
|
|
3142
|
+
</span>
|
|
3143
|
+
</div>
|
|
3144
|
+
<a
|
|
3145
|
+
href="https://agentero.com"
|
|
3146
|
+
className="text-text-default-base-primary underline">View profile
|
|
3147
|
+
</a>
|
|
3148
|
+
</div>
|
|
3149
|
+
</HoverCard.Content>
|
|
3150
|
+
</HoverCard.Portal>
|
|
3151
|
+
</HoverCard.Root>;</code></pre>
|
|
3152
|
+
</div>
|
|
3153
|
+
<div class="note ok">
|
|
3154
|
+
<div class="row">
|
|
3155
|
+
<span class="ex-name">With Arrow</span>
|
|
3156
|
+
<span class="badge ok">story ok</span>
|
|
3157
|
+
</div>
|
|
3158
|
+
|
|
3159
|
+
<div class="hint">An optional `Arrow` points back at the trigger; render it inside `Content`. The arrow is filled with the card background (white), so it only reads against a surface that contrasts with the card — shown here on a muted backdrop.</div>
|
|
3160
|
+
<pre><code>const WithArrow = () => <HoverCard.Root openDelay={0} closeDelay={0}>
|
|
3161
|
+
<HoverCard.Trigger asChild>
|
|
3162
|
+
<a
|
|
3163
|
+
href="https://agentero.com"
|
|
3164
|
+
className="text-text-default-base-primary underline">@agentero
|
|
3165
|
+
</a>
|
|
3166
|
+
</HoverCard.Trigger>
|
|
3167
|
+
<HoverCard.Portal>
|
|
3168
|
+
<HoverCard.Content>
|
|
3169
|
+
<PreviewCard />
|
|
3170
|
+
<HoverCard.Arrow />
|
|
3171
|
+
</HoverCard.Content>
|
|
3172
|
+
</HoverCard.Portal>
|
|
3173
|
+
</HoverCard.Root>;</code></pre>
|
|
3174
|
+
</div>
|
|
3175
|
+
<div class="note ok">
|
|
3176
|
+
<div class="row">
|
|
3177
|
+
<span class="ex-name">Delays</span>
|
|
3178
|
+
<span class="badge ok">story ok</span>
|
|
3179
|
+
</div>
|
|
3180
|
+
|
|
3181
|
+
<div class="hint">`openDelay` / `closeDelay` tune the hover latency. Default is a deliberate `700ms` open so cards don't flash on incidental passes; drop it to `0` for trigger-dense UIs where an instant preview reads as more responsive.</div>
|
|
3182
|
+
<pre><code>const Delays = () => (
|
|
3183
|
+
<div className="flex gap-10">
|
|
3184
|
+
<HoverCard.Root openDelay={700} closeDelay={300}>
|
|
3185
|
+
<HoverCard.Trigger asChild>
|
|
3186
|
+
<a href="https://agentero.com" className="text-text-default-base-primary underline">
|
|
3187
|
+
Default (700ms)
|
|
3188
|
+
</a>
|
|
3189
|
+
</HoverCard.Trigger>
|
|
3190
|
+
<HoverCard.Portal>
|
|
3191
|
+
<HoverCard.Content>
|
|
3192
|
+
<PreviewCard />
|
|
3193
|
+
</HoverCard.Content>
|
|
3194
|
+
</HoverCard.Portal>
|
|
3195
|
+
</HoverCard.Root>
|
|
3196
|
+
<HoverCard.Root openDelay={0} closeDelay={0}>
|
|
3197
|
+
<HoverCard.Trigger asChild>
|
|
3198
|
+
<a href="https://agentero.com" className="text-text-default-base-primary underline">
|
|
3199
|
+
Instant (0ms)
|
|
3200
|
+
</a>
|
|
3201
|
+
</HoverCard.Trigger>
|
|
3202
|
+
<HoverCard.Portal>
|
|
3203
|
+
<HoverCard.Content>
|
|
3204
|
+
<PreviewCard />
|
|
3205
|
+
</HoverCard.Content>
|
|
3206
|
+
</HoverCard.Portal>
|
|
3207
|
+
</HoverCard.Root>
|
|
3208
|
+
</div>
|
|
3209
|
+
);</code></pre>
|
|
3210
|
+
</div>
|
|
3211
|
+
</div>
|
|
3212
|
+
|
|
3213
|
+
</div>
|
|
3214
|
+
</article>
|
|
2995
3215
|
<article
|
|
2996
3216
|
class="card
|
|
2997
3217
|
no-error
|
|
@@ -3004,9 +3224,9 @@ label?: ReactNode</code></pre>
|
|
|
3004
3224
|
<div class="title">
|
|
3005
3225
|
<h2><span class="status-dot dot-ok"></span> Loading</h2>
|
|
3006
3226
|
<div class="badges">
|
|
3007
|
-
<label for="c-
|
|
3227
|
+
<label for="c-9-components-loading-props" class="badge ok as-toggle">1 prop type</label>
|
|
3008
3228
|
|
|
3009
|
-
<label for="c-
|
|
3229
|
+
<label for="c-9-components-loading-stories" class="badge ok as-toggle">7 stories</label>
|
|
3010
3230
|
|
|
3011
3231
|
</div>
|
|
3012
3232
|
</div>
|
|
@@ -3019,9 +3239,9 @@ label?: ReactNode</code></pre>
|
|
|
3019
3239
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3020
3240
|
|
|
3021
3241
|
|
|
3022
|
-
<input id="c-
|
|
3242
|
+
<input id="c-9-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3023
3243
|
|
|
3024
|
-
<input id="c-
|
|
3244
|
+
<input id="c-9-components-loading-props" class="tg tg-props" type="checkbox" hidden />
|
|
3025
3245
|
|
|
3026
3246
|
<div class="panels">
|
|
3027
3247
|
|
|
@@ -3163,7 +3383,7 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3163
3383
|
<div class="badges">
|
|
3164
3384
|
|
|
3165
3385
|
|
|
3166
|
-
<label for="c-
|
|
3386
|
+
<label for="c-10-components-modal-stories" class="badge ok as-toggle">4 stories</label>
|
|
3167
3387
|
|
|
3168
3388
|
</div>
|
|
3169
3389
|
</div>
|
|
@@ -3176,7 +3396,7 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3176
3396
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3177
3397
|
|
|
3178
3398
|
|
|
3179
|
-
<input id="c-
|
|
3399
|
+
<input id="c-10-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3180
3400
|
|
|
3181
3401
|
|
|
3182
3402
|
|
|
@@ -3301,9 +3521,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3301
3521
|
<div class="title">
|
|
3302
3522
|
<h2><span class="status-dot dot-ok"></span> Pagination</h2>
|
|
3303
3523
|
<div class="badges">
|
|
3304
|
-
<label for="c-
|
|
3524
|
+
<label for="c-11-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
|
|
3305
3525
|
|
|
3306
|
-
<label for="c-
|
|
3526
|
+
<label for="c-11-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
|
|
3307
3527
|
|
|
3308
3528
|
</div>
|
|
3309
3529
|
</div>
|
|
@@ -3316,9 +3536,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
3316
3536
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3317
3537
|
|
|
3318
3538
|
|
|
3319
|
-
<input id="c-
|
|
3539
|
+
<input id="c-11-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3320
3540
|
|
|
3321
|
-
<input id="c-
|
|
3541
|
+
<input id="c-11-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
|
|
3322
3542
|
|
|
3323
3543
|
<div class="panels">
|
|
3324
3544
|
|
|
@@ -3462,9 +3682,9 @@ totalCount: number</code></pre>
|
|
|
3462
3682
|
<div class="title">
|
|
3463
3683
|
<h2><span class="status-dot dot-ok"></span> Progress</h2>
|
|
3464
3684
|
<div class="badges">
|
|
3465
|
-
<label for="c-
|
|
3685
|
+
<label for="c-12-components-progress-props" class="badge ok as-toggle">4 prop types</label>
|
|
3466
3686
|
|
|
3467
|
-
<label for="c-
|
|
3687
|
+
<label for="c-12-components-progress-stories" class="badge ok as-toggle">4 stories</label>
|
|
3468
3688
|
|
|
3469
3689
|
</div>
|
|
3470
3690
|
</div>
|
|
@@ -3477,9 +3697,9 @@ totalCount: number</code></pre>
|
|
|
3477
3697
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3478
3698
|
|
|
3479
3699
|
|
|
3480
|
-
<input id="c-
|
|
3700
|
+
<input id="c-12-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3481
3701
|
|
|
3482
|
-
<input id="c-
|
|
3702
|
+
<input id="c-12-components-progress-props" class="tg tg-props" type="checkbox" hidden />
|
|
3483
3703
|
|
|
3484
3704
|
<div class="panels">
|
|
3485
3705
|
|
|
@@ -3597,7 +3817,7 @@ percentage: number</code></pre>
|
|
|
3597
3817
|
<div class="badges">
|
|
3598
3818
|
|
|
3599
3819
|
|
|
3600
|
-
<label for="c-
|
|
3820
|
+
<label for="c-13-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
3601
3821
|
|
|
3602
3822
|
</div>
|
|
3603
3823
|
</div>
|
|
@@ -3610,7 +3830,7 @@ percentage: number</code></pre>
|
|
|
3610
3830
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3611
3831
|
|
|
3612
3832
|
|
|
3613
|
-
<input id="c-
|
|
3833
|
+
<input id="c-13-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3614
3834
|
|
|
3615
3835
|
|
|
3616
3836
|
|
|
@@ -3704,9 +3924,9 @@ percentage: number</code></pre>
|
|
|
3704
3924
|
<div class="title">
|
|
3705
3925
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
3706
3926
|
<div class="badges">
|
|
3707
|
-
<label for="c-
|
|
3927
|
+
<label for="c-14-components-switch-props" class="badge ok as-toggle">4 prop types</label>
|
|
3708
3928
|
|
|
3709
|
-
<label for="c-
|
|
3929
|
+
<label for="c-14-components-switch-stories" class="badge ok as-toggle">7 stories</label>
|
|
3710
3930
|
|
|
3711
3931
|
</div>
|
|
3712
3932
|
</div>
|
|
@@ -3719,9 +3939,9 @@ percentage: number</code></pre>
|
|
|
3719
3939
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3720
3940
|
|
|
3721
3941
|
|
|
3722
|
-
<input id="c-
|
|
3942
|
+
<input id="c-14-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3723
3943
|
|
|
3724
|
-
<input id="c-
|
|
3944
|
+
<input id="c-14-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
3725
3945
|
|
|
3726
3946
|
<div class="panels">
|
|
3727
3947
|
|
|
@@ -3894,7 +4114,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
3894
4114
|
<div class="badges">
|
|
3895
4115
|
|
|
3896
4116
|
|
|
3897
|
-
<label for="c-
|
|
4117
|
+
<label for="c-15-components-table-stories" class="badge ok as-toggle">9 stories</label>
|
|
3898
4118
|
|
|
3899
4119
|
</div>
|
|
3900
4120
|
</div>
|
|
@@ -3907,7 +4127,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
3907
4127
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3908
4128
|
|
|
3909
4129
|
|
|
3910
|
-
<input id="c-
|
|
4130
|
+
<input id="c-15-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3911
4131
|
|
|
3912
4132
|
|
|
3913
4133
|
|
|
@@ -4083,7 +4303,7 @@ import { Fragment } from "react";</code></pre>
|
|
|
4083
4303
|
<div class="badges">
|
|
4084
4304
|
|
|
4085
4305
|
|
|
4086
|
-
<label for="c-
|
|
4306
|
+
<label for="c-16-components-tabs-stories" class="badge ok as-toggle">7 stories</label>
|
|
4087
4307
|
|
|
4088
4308
|
</div>
|
|
4089
4309
|
</div>
|
|
@@ -4096,7 +4316,7 @@ import { Fragment } from "react";</code></pre>
|
|
|
4096
4316
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4097
4317
|
|
|
4098
4318
|
|
|
4099
|
-
<input id="c-
|
|
4319
|
+
<input id="c-16-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4100
4320
|
|
|
4101
4321
|
|
|
4102
4322
|
|
|
@@ -4249,9 +4469,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
4249
4469
|
<div class="title">
|
|
4250
4470
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
4251
4471
|
<div class="badges">
|
|
4252
|
-
<label for="c-
|
|
4472
|
+
<label for="c-17-components-tag-props" class="badge ok as-toggle">6 prop types</label>
|
|
4253
4473
|
|
|
4254
|
-
<label for="c-
|
|
4474
|
+
<label for="c-17-components-tag-stories" class="badge ok as-toggle">10 stories</label>
|
|
4255
4475
|
|
|
4256
4476
|
</div>
|
|
4257
4477
|
</div>
|
|
@@ -4264,9 +4484,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
4264
4484
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4265
4485
|
|
|
4266
4486
|
|
|
4267
|
-
<input id="c-
|
|
4487
|
+
<input id="c-17-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4268
4488
|
|
|
4269
|
-
<input id="c-
|
|
4489
|
+
<input id="c-17-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
4270
4490
|
|
|
4271
4491
|
<div class="panels">
|
|
4272
4492
|
|
|
@@ -4623,9 +4843,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4623
4843
|
<div class="title">
|
|
4624
4844
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
4625
4845
|
<div class="badges">
|
|
4626
|
-
<label for="c-
|
|
4846
|
+
<label for="c-18-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
4627
4847
|
|
|
4628
|
-
<label for="c-
|
|
4848
|
+
<label for="c-18-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
4629
4849
|
|
|
4630
4850
|
</div>
|
|
4631
4851
|
</div>
|
|
@@ -4638,9 +4858,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4638
4858
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4639
4859
|
|
|
4640
4860
|
|
|
4641
|
-
<input id="c-
|
|
4861
|
+
<input id="c-18-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4642
4862
|
|
|
4643
|
-
<input id="c-
|
|
4863
|
+
<input id="c-18-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
4644
4864
|
|
|
4645
4865
|
<div class="panels">
|
|
4646
4866
|
|
|
@@ -5049,9 +5269,9 @@ visibleToasts?: number</code></pre>
|
|
|
5049
5269
|
<div class="title">
|
|
5050
5270
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
5051
5271
|
<div class="badges">
|
|
5052
|
-
<label for="c-
|
|
5272
|
+
<label for="c-19-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
|
|
5053
5273
|
|
|
5054
|
-
<label for="c-
|
|
5274
|
+
<label for="c-19-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
5055
5275
|
|
|
5056
5276
|
</div>
|
|
5057
5277
|
</div>
|
|
@@ -5064,9 +5284,9 @@ visibleToasts?: number</code></pre>
|
|
|
5064
5284
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5065
5285
|
|
|
5066
5286
|
|
|
5067
|
-
<input id="c-
|
|
5287
|
+
<input id="c-19-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5068
5288
|
|
|
5069
|
-
<input id="c-
|
|
5289
|
+
<input id="c-19-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
5070
5290
|
|
|
5071
5291
|
<div class="panels">
|
|
5072
5292
|
|