@agentero/design-system 0.18.2 → 0.20.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.
- package/mcp/manifests/components.html +407 -38
- package/mcp/manifests/components.json +1 -1
- package/package.json +11 -1
- package/src/hover-card/hover-card.d.ts +39 -0
- package/src/hover-card/hover-card.js +52 -0
- package/src/hover-card/index.d.ts +1 -0
- package/src/hover-card/index.js +2 -0
- package/src/popover/index.d.ts +1 -0
- package/src/popover/index.js +2 -0
- package/src/popover/popover.d.ts +53 -0
- package/src/popover/popover.js +53 -0
|
@@ -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">21 components ok</span><span class="filter-pill ok" aria-disabled="true">170 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.1s</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
|
|
|
@@ -3450,6 +3670,155 @@ totalCount: number</code></pre>
|
|
|
3450
3670
|
|
|
3451
3671
|
</div>
|
|
3452
3672
|
</article>
|
|
3673
|
+
<article
|
|
3674
|
+
class="card
|
|
3675
|
+
no-error
|
|
3676
|
+
no-info
|
|
3677
|
+
no-story-error
|
|
3678
|
+
no-doc-error"
|
|
3679
|
+
role="listitem"
|
|
3680
|
+
aria-label="Popover.Root">
|
|
3681
|
+
<div class="head">
|
|
3682
|
+
<div class="title">
|
|
3683
|
+
<h2><span class="status-dot dot-ok"></span> Popover.Root</h2>
|
|
3684
|
+
<div class="badges">
|
|
3685
|
+
|
|
3686
|
+
|
|
3687
|
+
<label for="c-12-components-popover-stories" class="badge ok as-toggle">4 stories</label>
|
|
3688
|
+
|
|
3689
|
+
</div>
|
|
3690
|
+
</div>
|
|
3691
|
+
<div class="meta" title="./src/popover/popover.stories.tsx">components-popover · ./src/popover/popover.stories.tsx</div>
|
|
3692
|
+
|
|
3693
|
+
<div class="hint">Popover is a non-modal floating surface anchored to a trigger, used for rich interactive overlays such as forms, filters, and pickers. Compose it from `Root` / `Trigger` / `Content`, plus optional `Anchor` and `Close`. Built on Radix UI's Popover primitive, so focus management, dismissal, and collision detection come for free.</div>
|
|
3694
|
+
|
|
3695
|
+
</div>
|
|
3696
|
+
|
|
3697
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3698
|
+
|
|
3699
|
+
|
|
3700
|
+
<input id="c-12-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3701
|
+
|
|
3702
|
+
|
|
3703
|
+
|
|
3704
|
+
<div class="panels">
|
|
3705
|
+
|
|
3706
|
+
|
|
3707
|
+
|
|
3708
|
+
|
|
3709
|
+
<div class="panel panel-stories">
|
|
3710
|
+
|
|
3711
|
+
|
|
3712
|
+
|
|
3713
|
+
<div class="note ok">
|
|
3714
|
+
<div class="row">
|
|
3715
|
+
<span class="ex-name">Imports</span>
|
|
3716
|
+
</div>
|
|
3717
|
+
<pre><code>import { Button, Popover } from "@agentero/design-system";</code></pre>
|
|
3718
|
+
</div>
|
|
3719
|
+
|
|
3720
|
+
|
|
3721
|
+
<div class="note ok">
|
|
3722
|
+
<div class="row">
|
|
3723
|
+
<span class="ex-name">Default</span>
|
|
3724
|
+
<span class="badge ok">story ok</span>
|
|
3725
|
+
</div>
|
|
3726
|
+
<div>Basic click-to-open popover surface</div>
|
|
3727
|
+
<div class="hint">A minimal Popover: a trigger button that reveals a short text surface on click and dismisses on outside click or Escape.</div>
|
|
3728
|
+
<pre><code>const Default = () => (
|
|
3729
|
+
<Popover.Root>
|
|
3730
|
+
<Popover.Trigger asChild>
|
|
3731
|
+
<Button variant="secondary">Open popover</Button>
|
|
3732
|
+
</Popover.Trigger>
|
|
3733
|
+
<Popover.Content>
|
|
3734
|
+
<p className="text-sm text-text-default-base-primary">
|
|
3735
|
+
This carrier is appointed for 3 lines of business.
|
|
3736
|
+
</p>
|
|
3737
|
+
</Popover.Content>
|
|
3738
|
+
</Popover.Root>
|
|
3739
|
+
);</code></pre>
|
|
3740
|
+
</div>
|
|
3741
|
+
<div class="note ok">
|
|
3742
|
+
<div class="row">
|
|
3743
|
+
<span class="ex-name">Sides</span>
|
|
3744
|
+
<span class="badge ok">story ok</span>
|
|
3745
|
+
</div>
|
|
3746
|
+
<div>Popover placement on each of the four sides</div>
|
|
3747
|
+
<div class="hint">`side` sets the preferred placement; Radix flips it on viewport collision.</div>
|
|
3748
|
+
<pre><code>const Sides = () => (
|
|
3749
|
+
<div className="grid grid-cols-2 gap-6">
|
|
3750
|
+
{(['top', 'right', 'bottom', 'left'] as const).map(side => (
|
|
3751
|
+
<Popover.Root key={side}>
|
|
3752
|
+
<Popover.Trigger asChild>
|
|
3753
|
+
<Button variant="secondary">{side}</Button>
|
|
3754
|
+
</Popover.Trigger>
|
|
3755
|
+
<Popover.Content side={side}>
|
|
3756
|
+
<p className="text-sm text-text-default-base-primary">Opens on {side}</p>
|
|
3757
|
+
</Popover.Content>
|
|
3758
|
+
</Popover.Root>
|
|
3759
|
+
))}
|
|
3760
|
+
</div>
|
|
3761
|
+
);</code></pre>
|
|
3762
|
+
</div>
|
|
3763
|
+
<div class="note ok">
|
|
3764
|
+
<div class="row">
|
|
3765
|
+
<span class="ex-name">With Form</span>
|
|
3766
|
+
<span class="badge ok">story ok</span>
|
|
3767
|
+
</div>
|
|
3768
|
+
<div>Popover holding an interactive form with a `Close` action</div>
|
|
3769
|
+
<div class="hint">Rich interactive content — the primary reason to reach for a Popover over a Tooltip. A `Close` inside the surface dismisses it after submitting.</div>
|
|
3770
|
+
<pre><code>const WithForm = () => (
|
|
3771
|
+
<Popover.Root>
|
|
3772
|
+
<Popover.Trigger asChild>
|
|
3773
|
+
<Button variant="secondary">Rename</Button>
|
|
3774
|
+
</Popover.Trigger>
|
|
3775
|
+
<Popover.Content align="start">
|
|
3776
|
+
<div className="flex flex-col gap-3">
|
|
3777
|
+
<label className="flex flex-col gap-1 text-sm text-text-default-base-primary">
|
|
3778
|
+
New name
|
|
3779
|
+
<input
|
|
3780
|
+
type="text"
|
|
3781
|
+
defaultValue="Untitled"
|
|
3782
|
+
className="rounded-md border border-border-default-base-primary px-2 py-1 text-sm"
|
|
3783
|
+
/>
|
|
3784
|
+
</label>
|
|
3785
|
+
<Popover.Close asChild>
|
|
3786
|
+
<Button variant="primary" size="sm">
|
|
3787
|
+
Save
|
|
3788
|
+
</Button>
|
|
3789
|
+
</Popover.Close>
|
|
3790
|
+
</div>
|
|
3791
|
+
</Popover.Content>
|
|
3792
|
+
</Popover.Root>
|
|
3793
|
+
);</code></pre>
|
|
3794
|
+
</div>
|
|
3795
|
+
<div class="note ok">
|
|
3796
|
+
<div class="row">
|
|
3797
|
+
<span class="ex-name">With Anchor</span>
|
|
3798
|
+
<span class="badge ok">story ok</span>
|
|
3799
|
+
</div>
|
|
3800
|
+
<div>Popover positioned against a separate `Anchor` element</div>
|
|
3801
|
+
<div class="hint">`Anchor` positions the Content against an element other than the Trigger — useful when the visual anchor differs from the toggle button.</div>
|
|
3802
|
+
<pre><code>const WithAnchor = () => (
|
|
3803
|
+
<Popover.Root>
|
|
3804
|
+
<div className="flex flex-col items-center gap-4">
|
|
3805
|
+
<Popover.Anchor className="rounded-md border border-border-default-base-primary px-4 py-2 text-sm text-text-default-base-secondary">
|
|
3806
|
+
Anchored here
|
|
3807
|
+
</Popover.Anchor>
|
|
3808
|
+
<Popover.Trigger asChild>
|
|
3809
|
+
<Button variant="secondary">Toggle from below</Button>
|
|
3810
|
+
</Popover.Trigger>
|
|
3811
|
+
</div>
|
|
3812
|
+
<Popover.Content side="top">
|
|
3813
|
+
<p className="text-sm text-text-default-base-primary">Positioned against the anchor</p>
|
|
3814
|
+
</Popover.Content>
|
|
3815
|
+
</Popover.Root>
|
|
3816
|
+
);</code></pre>
|
|
3817
|
+
</div>
|
|
3818
|
+
</div>
|
|
3819
|
+
|
|
3820
|
+
</div>
|
|
3821
|
+
</article>
|
|
3453
3822
|
<article
|
|
3454
3823
|
class="card
|
|
3455
3824
|
no-error
|
|
@@ -3462,9 +3831,9 @@ totalCount: number</code></pre>
|
|
|
3462
3831
|
<div class="title">
|
|
3463
3832
|
<h2><span class="status-dot dot-ok"></span> Progress</h2>
|
|
3464
3833
|
<div class="badges">
|
|
3465
|
-
<label for="c-
|
|
3834
|
+
<label for="c-13-components-progress-props" class="badge ok as-toggle">4 prop types</label>
|
|
3466
3835
|
|
|
3467
|
-
<label for="c-
|
|
3836
|
+
<label for="c-13-components-progress-stories" class="badge ok as-toggle">4 stories</label>
|
|
3468
3837
|
|
|
3469
3838
|
</div>
|
|
3470
3839
|
</div>
|
|
@@ -3477,9 +3846,9 @@ totalCount: number</code></pre>
|
|
|
3477
3846
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3478
3847
|
|
|
3479
3848
|
|
|
3480
|
-
<input id="c-
|
|
3849
|
+
<input id="c-13-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3481
3850
|
|
|
3482
|
-
<input id="c-
|
|
3851
|
+
<input id="c-13-components-progress-props" class="tg tg-props" type="checkbox" hidden />
|
|
3483
3852
|
|
|
3484
3853
|
<div class="panels">
|
|
3485
3854
|
|
|
@@ -3597,7 +3966,7 @@ percentage: number</code></pre>
|
|
|
3597
3966
|
<div class="badges">
|
|
3598
3967
|
|
|
3599
3968
|
|
|
3600
|
-
<label for="c-
|
|
3969
|
+
<label for="c-14-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
|
|
3601
3970
|
|
|
3602
3971
|
</div>
|
|
3603
3972
|
</div>
|
|
@@ -3610,7 +3979,7 @@ percentage: number</code></pre>
|
|
|
3610
3979
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3611
3980
|
|
|
3612
3981
|
|
|
3613
|
-
<input id="c-
|
|
3982
|
+
<input id="c-14-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3614
3983
|
|
|
3615
3984
|
|
|
3616
3985
|
|
|
@@ -3704,9 +4073,9 @@ percentage: number</code></pre>
|
|
|
3704
4073
|
<div class="title">
|
|
3705
4074
|
<h2><span class="status-dot dot-ok"></span> Switch</h2>
|
|
3706
4075
|
<div class="badges">
|
|
3707
|
-
<label for="c-
|
|
4076
|
+
<label for="c-15-components-switch-props" class="badge ok as-toggle">4 prop types</label>
|
|
3708
4077
|
|
|
3709
|
-
<label for="c-
|
|
4078
|
+
<label for="c-15-components-switch-stories" class="badge ok as-toggle">7 stories</label>
|
|
3710
4079
|
|
|
3711
4080
|
</div>
|
|
3712
4081
|
</div>
|
|
@@ -3719,9 +4088,9 @@ percentage: number</code></pre>
|
|
|
3719
4088
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3720
4089
|
|
|
3721
4090
|
|
|
3722
|
-
<input id="c-
|
|
4091
|
+
<input id="c-15-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3723
4092
|
|
|
3724
|
-
<input id="c-
|
|
4093
|
+
<input id="c-15-components-switch-props" class="tg tg-props" type="checkbox" hidden />
|
|
3725
4094
|
|
|
3726
4095
|
<div class="panels">
|
|
3727
4096
|
|
|
@@ -3894,7 +4263,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
3894
4263
|
<div class="badges">
|
|
3895
4264
|
|
|
3896
4265
|
|
|
3897
|
-
<label for="c-
|
|
4266
|
+
<label for="c-16-components-table-stories" class="badge ok as-toggle">9 stories</label>
|
|
3898
4267
|
|
|
3899
4268
|
</div>
|
|
3900
4269
|
</div>
|
|
@@ -3907,7 +4276,7 @@ size?: "sm" | "md"</code></pre>
|
|
|
3907
4276
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
3908
4277
|
|
|
3909
4278
|
|
|
3910
|
-
<input id="c-
|
|
4279
|
+
<input id="c-16-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
3911
4280
|
|
|
3912
4281
|
|
|
3913
4282
|
|
|
@@ -4083,7 +4452,7 @@ import { Fragment } from "react";</code></pre>
|
|
|
4083
4452
|
<div class="badges">
|
|
4084
4453
|
|
|
4085
4454
|
|
|
4086
|
-
<label for="c-
|
|
4455
|
+
<label for="c-17-components-tabs-stories" class="badge ok as-toggle">7 stories</label>
|
|
4087
4456
|
|
|
4088
4457
|
</div>
|
|
4089
4458
|
</div>
|
|
@@ -4096,7 +4465,7 @@ import { Fragment } from "react";</code></pre>
|
|
|
4096
4465
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4097
4466
|
|
|
4098
4467
|
|
|
4099
|
-
<input id="c-
|
|
4468
|
+
<input id="c-17-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4100
4469
|
|
|
4101
4470
|
|
|
4102
4471
|
|
|
@@ -4249,9 +4618,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
4249
4618
|
<div class="title">
|
|
4250
4619
|
<h2><span class="status-dot dot-ok"></span> Tag</h2>
|
|
4251
4620
|
<div class="badges">
|
|
4252
|
-
<label for="c-
|
|
4621
|
+
<label for="c-18-components-tag-props" class="badge ok as-toggle">6 prop types</label>
|
|
4253
4622
|
|
|
4254
|
-
<label for="c-
|
|
4623
|
+
<label for="c-18-components-tag-stories" class="badge ok as-toggle">10 stories</label>
|
|
4255
4624
|
|
|
4256
4625
|
</div>
|
|
4257
4626
|
</div>
|
|
@@ -4264,9 +4633,9 @@ import { Fragment } from "react";</code></pre>
|
|
|
4264
4633
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4265
4634
|
|
|
4266
4635
|
|
|
4267
|
-
<input id="c-
|
|
4636
|
+
<input id="c-18-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4268
4637
|
|
|
4269
|
-
<input id="c-
|
|
4638
|
+
<input id="c-18-components-tag-props" class="tg tg-props" type="checkbox" hidden />
|
|
4270
4639
|
|
|
4271
4640
|
<div class="panels">
|
|
4272
4641
|
|
|
@@ -4623,9 +4992,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4623
4992
|
<div class="title">
|
|
4624
4993
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
4625
4994
|
<div class="badges">
|
|
4626
|
-
<label for="c-
|
|
4995
|
+
<label for="c-19-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
4627
4996
|
|
|
4628
|
-
<label for="c-
|
|
4997
|
+
<label for="c-19-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
4629
4998
|
|
|
4630
4999
|
</div>
|
|
4631
5000
|
</div>
|
|
@@ -4638,9 +5007,9 @@ variant?: "ghost" | "secondary" | "tertiary" | &qu
|
|
|
4638
5007
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
4639
5008
|
|
|
4640
5009
|
|
|
4641
|
-
<input id="c-
|
|
5010
|
+
<input id="c-19-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
4642
5011
|
|
|
4643
|
-
<input id="c-
|
|
5012
|
+
<input id="c-19-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
4644
5013
|
|
|
4645
5014
|
<div class="panels">
|
|
4646
5015
|
|
|
@@ -5049,9 +5418,9 @@ visibleToasts?: number</code></pre>
|
|
|
5049
5418
|
<div class="title">
|
|
5050
5419
|
<h2><span class="status-dot dot-ok"></span> Tooltip</h2>
|
|
5051
5420
|
<div class="badges">
|
|
5052
|
-
<label for="c-
|
|
5421
|
+
<label for="c-20-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
|
|
5053
5422
|
|
|
5054
|
-
<label for="c-
|
|
5423
|
+
<label for="c-20-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
|
|
5055
5424
|
|
|
5056
5425
|
</div>
|
|
5057
5426
|
</div>
|
|
@@ -5064,9 +5433,9 @@ visibleToasts?: number</code></pre>
|
|
|
5064
5433
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
5065
5434
|
|
|
5066
5435
|
|
|
5067
|
-
<input id="c-
|
|
5436
|
+
<input id="c-20-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
5068
5437
|
|
|
5069
|
-
<input id="c-
|
|
5438
|
+
<input id="c-20-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
|
|
5070
5439
|
|
|
5071
5440
|
<div class="panels">
|
|
5072
5441
|
|