@agentero/design-system 0.6.0 → 0.7.1
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 +396 -12
- package/mcp/manifests/components.json +1 -1
- package/package.json +6 -1
- package/src/dropdown-menu/dropdown-menu.d.ts +276 -0
- package/src/dropdown-menu/dropdown-menu.js +111 -0
- package/src/dropdown-menu/icons.d.ts +9 -0
- package/src/dropdown-menu/icons.js +13 -0
- package/src/dropdown-menu/index.d.ts +1 -0
- package/src/dropdown-menu/index.js +2 -0
- package/theme/base.css +98 -13
|
@@ -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">8 components ok</span><span class="filter-pill ok" aria-disabled="true">97 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>2.
|
|
585
|
+
Using <code>react-docgen-typescript</code>. Generation took <strong>2.2s</strong>.
|
|
586
586
|
</div>
|
|
587
587
|
<h2 class="section-title">Components</h2>
|
|
588
588
|
<div class="grid" role="list">
|
|
@@ -2122,6 +2122,390 @@ label?: ReactNode</code></pre>
|
|
|
2122
2122
|
|
|
2123
2123
|
</div>
|
|
2124
2124
|
</article>
|
|
2125
|
+
<article
|
|
2126
|
+
class="card
|
|
2127
|
+
no-error
|
|
2128
|
+
no-info
|
|
2129
|
+
no-story-error
|
|
2130
|
+
no-doc-error"
|
|
2131
|
+
role="listitem"
|
|
2132
|
+
aria-label="DropdownMenu.Root">
|
|
2133
|
+
<div class="head">
|
|
2134
|
+
<div class="title">
|
|
2135
|
+
<h2><span class="status-dot dot-ok"></span> DropdownMenu.Root</h2>
|
|
2136
|
+
<div class="badges">
|
|
2137
|
+
|
|
2138
|
+
|
|
2139
|
+
<label for="c-4-components-dropdownmenu-stories" class="badge ok as-toggle">7 stories</label>
|
|
2140
|
+
|
|
2141
|
+
</div>
|
|
2142
|
+
</div>
|
|
2143
|
+
<div class="meta" title="./src/dropdown-menu/dropdown-menu.stories.tsx">components-dropdownmenu · ./src/dropdown-menu/dropdown-menu.stories.tsx</div>
|
|
2144
|
+
|
|
2145
|
+
<div class="hint">DropdownMenu is a compound overlay for secondary actions, bulk operations, or navigation shortcuts triggered off a button or icon. Compose it from `Root` / `Trigger` / `Portal` / `Content` and fill the menu with `Item`, `Separator`, `Label`, and — for nested flows — `Sub` / `SubTrigger` / `SubContent`. Built on Radix UI's DropdownMenu primitive, so keyboard navigation, focus trapping, typeahead, and collision detection come for free.</div>
|
|
2146
|
+
|
|
2147
|
+
</div>
|
|
2148
|
+
|
|
2149
|
+
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2150
|
+
|
|
2151
|
+
|
|
2152
|
+
<input id="c-4-components-dropdownmenu-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2153
|
+
|
|
2154
|
+
|
|
2155
|
+
|
|
2156
|
+
<div class="panels">
|
|
2157
|
+
|
|
2158
|
+
|
|
2159
|
+
|
|
2160
|
+
|
|
2161
|
+
<div class="panel panel-stories">
|
|
2162
|
+
|
|
2163
|
+
|
|
2164
|
+
|
|
2165
|
+
<div class="note ok">
|
|
2166
|
+
<div class="row">
|
|
2167
|
+
<span class="ex-name">Imports</span>
|
|
2168
|
+
</div>
|
|
2169
|
+
<pre><code>import { Button, DropdownMenu } from "@agentero/design-system";</code></pre>
|
|
2170
|
+
</div>
|
|
2171
|
+
|
|
2172
|
+
|
|
2173
|
+
<div class="note ok">
|
|
2174
|
+
<div class="row">
|
|
2175
|
+
<span class="ex-name">Default</span>
|
|
2176
|
+
<span class="badge ok">story ok</span>
|
|
2177
|
+
</div>
|
|
2178
|
+
<div>Basic menu with item rows and a separated destructive action</div>
|
|
2179
|
+
<div class="hint">A minimal DropdownMenu with four `Item`s — edit/duplicate/archive plus a separator before a destructive delete. Use this as the starting point for most overflow menus.</div>
|
|
2180
|
+
<pre><code>const Default = () => (
|
|
2181
|
+
<DropdownMenu.Root>
|
|
2182
|
+
<DropdownMenu.Trigger asChild>
|
|
2183
|
+
<Button size="md" variant="secondary">
|
|
2184
|
+
Click me
|
|
2185
|
+
<IconKeyboardArrowDown />
|
|
2186
|
+
</Button>
|
|
2187
|
+
</DropdownMenu.Trigger>
|
|
2188
|
+
<DropdownMenu.Portal>
|
|
2189
|
+
<DropdownMenu.Content>
|
|
2190
|
+
<DropdownMenu.Item onSelect={() => console.log('Edit clicked')}>Edit</DropdownMenu.Item>
|
|
2191
|
+
<DropdownMenu.Item onSelect={() => console.log('Duplicate clicked')}>
|
|
2192
|
+
Duplicate
|
|
2193
|
+
</DropdownMenu.Item>
|
|
2194
|
+
<DropdownMenu.Item onSelect={() => console.log('Archive clicked')}>
|
|
2195
|
+
Archive
|
|
2196
|
+
</DropdownMenu.Item>
|
|
2197
|
+
<DropdownMenu.Separator />
|
|
2198
|
+
<DropdownMenu.Item onSelect={() => console.log('Delete clicked')}>
|
|
2199
|
+
<span className="text-red-500">Delete</span>
|
|
2200
|
+
</DropdownMenu.Item>
|
|
2201
|
+
</DropdownMenu.Content>
|
|
2202
|
+
</DropdownMenu.Portal>
|
|
2203
|
+
</DropdownMenu.Root>
|
|
2204
|
+
);</code></pre>
|
|
2205
|
+
</div>
|
|
2206
|
+
<div class="note ok">
|
|
2207
|
+
<div class="row">
|
|
2208
|
+
<span class="ex-name">With Groups And Dividers</span>
|
|
2209
|
+
<span class="badge ok">story ok</span>
|
|
2210
|
+
</div>
|
|
2211
|
+
<div>Menu with multiple `Separator`-split groups and a disabled item</div>
|
|
2212
|
+
<div class="hint">Multiple clusters of `Item`s split by `Separator` rules — mirrors an "edit history / clipboard / export" overflow menu. Demonstrates the `disabled` state on a menu row.</div>
|
|
2213
|
+
<pre><code>const WithGroupsAndDividers = () => (
|
|
2214
|
+
<DropdownMenu.Root>
|
|
2215
|
+
<DropdownMenu.Trigger asChild>
|
|
2216
|
+
<Button size="md" variant="secondary">
|
|
2217
|
+
More Options
|
|
2218
|
+
<IconKeyboardArrowDown />
|
|
2219
|
+
</Button>
|
|
2220
|
+
</DropdownMenu.Trigger>
|
|
2221
|
+
<DropdownMenu.Portal>
|
|
2222
|
+
<DropdownMenu.Content>
|
|
2223
|
+
<DropdownMenu.Item onSelect={() => console.log('Undo')}>Undo</DropdownMenu.Item>
|
|
2224
|
+
<DropdownMenu.Item onSelect={() => console.log('Redo')}>Redo</DropdownMenu.Item>
|
|
2225
|
+
<DropdownMenu.Separator />
|
|
2226
|
+
<DropdownMenu.Item onSelect={() => console.log('Copy')}>Copy</DropdownMenu.Item>
|
|
2227
|
+
<DropdownMenu.Item onSelect={() => console.log('Cut')}>Cut</DropdownMenu.Item>
|
|
2228
|
+
<DropdownMenu.Item onSelect={() => console.log('Paste')}>Paste</DropdownMenu.Item>
|
|
2229
|
+
<DropdownMenu.Separator />
|
|
2230
|
+
<DropdownMenu.Item disabled>Print (disabled)</DropdownMenu.Item>
|
|
2231
|
+
<DropdownMenu.Item onSelect={() => console.log('Export')}>Export</DropdownMenu.Item>
|
|
2232
|
+
</DropdownMenu.Content>
|
|
2233
|
+
</DropdownMenu.Portal>
|
|
2234
|
+
</DropdownMenu.Root>
|
|
2235
|
+
);</code></pre>
|
|
2236
|
+
</div>
|
|
2237
|
+
<div class="note ok">
|
|
2238
|
+
<div class="row">
|
|
2239
|
+
<span class="ex-name">With Icons</span>
|
|
2240
|
+
<span class="badge ok">story ok</span>
|
|
2241
|
+
</div>
|
|
2242
|
+
<div>Icon-leading items with a destructive delete row</div>
|
|
2243
|
+
<div class="hint">Menu items with leading icons and a destructive row using the `data-[highlighted]:bg-red-100` + `text-red-500` escape hatch. Use this pattern when a row should read as destructive.</div>
|
|
2244
|
+
<pre><code>const WithIcons = () => (
|
|
2245
|
+
<DropdownMenu.Root>
|
|
2246
|
+
<DropdownMenu.Trigger asChild>
|
|
2247
|
+
<Button size="md" variant="secondary">
|
|
2248
|
+
Actions
|
|
2249
|
+
<IconKeyboardArrowDown />
|
|
2250
|
+
</Button>
|
|
2251
|
+
</DropdownMenu.Trigger>
|
|
2252
|
+
<DropdownMenu.Portal>
|
|
2253
|
+
<DropdownMenu.Content>
|
|
2254
|
+
<DropdownMenu.Item onSelect={() => console.log('Copy')}>
|
|
2255
|
+
<IconContentCopy />
|
|
2256
|
+
Copy
|
|
2257
|
+
</DropdownMenu.Item>
|
|
2258
|
+
<DropdownMenu.Separator />
|
|
2259
|
+
<DropdownMenu.Item
|
|
2260
|
+
onSelect={() => console.log('Delete')}
|
|
2261
|
+
className="data-[highlighted]:bg-red-100">
|
|
2262
|
+
<IconDelete className="[&>path]:fill-red-500" />
|
|
2263
|
+
<span className="text-red-500">Delete</span>
|
|
2264
|
+
</DropdownMenu.Item>
|
|
2265
|
+
</DropdownMenu.Content>
|
|
2266
|
+
</DropdownMenu.Portal>
|
|
2267
|
+
</DropdownMenu.Root>
|
|
2268
|
+
);</code></pre>
|
|
2269
|
+
</div>
|
|
2270
|
+
<div class="note ok">
|
|
2271
|
+
<div class="row">
|
|
2272
|
+
<span class="ex-name">With Group Titles</span>
|
|
2273
|
+
<span class="badge ok">story ok</span>
|
|
2274
|
+
</div>
|
|
2275
|
+
<div>Menu with `Label`-titled sections and a destructive logout row</div>
|
|
2276
|
+
<div class="hint">`Label`-segmented Profile / Settings / Account sections with a destructive Logout row. Use `Label` to name groups that would otherwise be ambiguous from the item text alone.</div>
|
|
2277
|
+
<pre><code>const WithGroupTitles = () => (
|
|
2278
|
+
<DropdownMenu.Root>
|
|
2279
|
+
<DropdownMenu.Trigger asChild>
|
|
2280
|
+
<Button size="md" variant="secondary">
|
|
2281
|
+
Account Menu
|
|
2282
|
+
<IconKeyboardArrowDown />
|
|
2283
|
+
</Button>
|
|
2284
|
+
</DropdownMenu.Trigger>
|
|
2285
|
+
<DropdownMenu.Portal>
|
|
2286
|
+
<DropdownMenu.Content>
|
|
2287
|
+
<DropdownMenu.Label>Profile</DropdownMenu.Label>
|
|
2288
|
+
<DropdownMenu.Item onSelect={() => console.log('View Profile')}>
|
|
2289
|
+
View Profile
|
|
2290
|
+
</DropdownMenu.Item>
|
|
2291
|
+
<DropdownMenu.Item onSelect={() => console.log('Edit Profile')}>
|
|
2292
|
+
Edit Profile
|
|
2293
|
+
</DropdownMenu.Item>
|
|
2294
|
+
<DropdownMenu.Separator />
|
|
2295
|
+
<DropdownMenu.Label>Settings</DropdownMenu.Label>
|
|
2296
|
+
<DropdownMenu.Item onSelect={() => console.log('Preferences')}>
|
|
2297
|
+
Preferences
|
|
2298
|
+
</DropdownMenu.Item>
|
|
2299
|
+
<DropdownMenu.Item onSelect={() => console.log('Privacy')}>Privacy</DropdownMenu.Item>
|
|
2300
|
+
<DropdownMenu.Item onSelect={() => console.log('Notifications')}>
|
|
2301
|
+
Notifications
|
|
2302
|
+
</DropdownMenu.Item>
|
|
2303
|
+
<DropdownMenu.Separator />
|
|
2304
|
+
<DropdownMenu.Label>Account</DropdownMenu.Label>
|
|
2305
|
+
<DropdownMenu.Item onSelect={() => console.log('Billing')}>Billing</DropdownMenu.Item>
|
|
2306
|
+
<DropdownMenu.Item
|
|
2307
|
+
onSelect={() => console.log('Logout')}
|
|
2308
|
+
className="data-[highlighted]:bg-red-100">
|
|
2309
|
+
<span className="text-red-500">Logout</span>
|
|
2310
|
+
</DropdownMenu.Item>
|
|
2311
|
+
</DropdownMenu.Content>
|
|
2312
|
+
</DropdownMenu.Portal>
|
|
2313
|
+
</DropdownMenu.Root>
|
|
2314
|
+
);</code></pre>
|
|
2315
|
+
</div>
|
|
2316
|
+
<div class="note ok">
|
|
2317
|
+
<div class="row">
|
|
2318
|
+
<span class="ex-name">With Submenu</span>
|
|
2319
|
+
<span class="badge ok">story ok</span>
|
|
2320
|
+
</div>
|
|
2321
|
+
<div>Single-level submenus for Share and Move-to flows</div>
|
|
2322
|
+
<div class="hint">One level of nesting: Share and Move-to submenus wired via `Sub` / `SubTrigger` / `SubContent`. Each submenu is portaled independently so it escapes the parent's stacking context.</div>
|
|
2323
|
+
<pre><code>const WithSubmenu = () => (
|
|
2324
|
+
<DropdownMenu.Root>
|
|
2325
|
+
<DropdownMenu.Trigger asChild>
|
|
2326
|
+
<Button size="md" variant="secondary">
|
|
2327
|
+
File Options
|
|
2328
|
+
<IconKeyboardArrowDown />
|
|
2329
|
+
</Button>
|
|
2330
|
+
</DropdownMenu.Trigger>
|
|
2331
|
+
<DropdownMenu.Portal>
|
|
2332
|
+
<DropdownMenu.Content>
|
|
2333
|
+
<DropdownMenu.Item onSelect={() => console.log('New File')}>New File</DropdownMenu.Item>
|
|
2334
|
+
<DropdownMenu.Item onSelect={() => console.log('Open')}>Open</DropdownMenu.Item>
|
|
2335
|
+
<DropdownMenu.Separator />
|
|
2336
|
+
<DropdownMenu.Sub>
|
|
2337
|
+
<DropdownMenu.SubTrigger>
|
|
2338
|
+
<IconIosShare />
|
|
2339
|
+
Share
|
|
2340
|
+
</DropdownMenu.SubTrigger>
|
|
2341
|
+
<DropdownMenu.Portal>
|
|
2342
|
+
<DropdownMenu.SubContent>
|
|
2343
|
+
<DropdownMenu.Item onSelect={() => console.log('Email')}>Email</DropdownMenu.Item>
|
|
2344
|
+
<DropdownMenu.Item onSelect={() => console.log('Slack')}>Slack</DropdownMenu.Item>
|
|
2345
|
+
<DropdownMenu.Item onSelect={() => console.log('Copy Link')}>
|
|
2346
|
+
Copy Link
|
|
2347
|
+
</DropdownMenu.Item>
|
|
2348
|
+
</DropdownMenu.SubContent>
|
|
2349
|
+
</DropdownMenu.Portal>
|
|
2350
|
+
</DropdownMenu.Sub>
|
|
2351
|
+
<DropdownMenu.Sub>
|
|
2352
|
+
<DropdownMenu.SubTrigger>
|
|
2353
|
+
<IconDriveFileMove />
|
|
2354
|
+
Move to
|
|
2355
|
+
</DropdownMenu.SubTrigger>
|
|
2356
|
+
<DropdownMenu.Portal>
|
|
2357
|
+
<DropdownMenu.SubContent>
|
|
2358
|
+
<DropdownMenu.Item onSelect={() => console.log('Archive')}>
|
|
2359
|
+
Archive
|
|
2360
|
+
</DropdownMenu.Item>
|
|
2361
|
+
<DropdownMenu.Item onSelect={() => console.log('Projects')}>
|
|
2362
|
+
Projects
|
|
2363
|
+
</DropdownMenu.Item>
|
|
2364
|
+
<DropdownMenu.Item onSelect={() => console.log('Drafts')}>Drafts</DropdownMenu.Item>
|
|
2365
|
+
</DropdownMenu.SubContent>
|
|
2366
|
+
</DropdownMenu.Portal>
|
|
2367
|
+
</DropdownMenu.Sub>
|
|
2368
|
+
<DropdownMenu.Separator />
|
|
2369
|
+
<DropdownMenu.Item
|
|
2370
|
+
onSelect={() => console.log('Delete')}
|
|
2371
|
+
className="data-[highlighted]:bg-red-100">
|
|
2372
|
+
<IconDelete className="[&>path]:fill-red-500" />
|
|
2373
|
+
<span className="text-red-500">Delete</span>
|
|
2374
|
+
</DropdownMenu.Item>
|
|
2375
|
+
</DropdownMenu.Content>
|
|
2376
|
+
</DropdownMenu.Portal>
|
|
2377
|
+
</DropdownMenu.Root>
|
|
2378
|
+
);</code></pre>
|
|
2379
|
+
</div>
|
|
2380
|
+
<div class="note ok">
|
|
2381
|
+
<div class="row">
|
|
2382
|
+
<span class="ex-name">Nested Submenus</span>
|
|
2383
|
+
<span class="badge ok">story ok</span>
|
|
2384
|
+
</div>
|
|
2385
|
+
<div>Two-level nested submenus inside a parent menu</div>
|
|
2386
|
+
<div class="hint">Two levels of nesting: Organization → Teams → (Engineering, Design). Deeper nesting is rarely a good UX — prefer splitting into separate screens once the tree grows past two levels.</div>
|
|
2387
|
+
<pre><code>const NestedSubmenus = () => (
|
|
2388
|
+
<DropdownMenu.Root>
|
|
2389
|
+
<DropdownMenu.Trigger asChild>
|
|
2390
|
+
<Button size="md" variant="secondary">
|
|
2391
|
+
Organization Menu
|
|
2392
|
+
<IconKeyboardArrowDown />
|
|
2393
|
+
</Button>
|
|
2394
|
+
</DropdownMenu.Trigger>
|
|
2395
|
+
<DropdownMenu.Portal>
|
|
2396
|
+
<DropdownMenu.Content>
|
|
2397
|
+
<DropdownMenu.Label>Organization</DropdownMenu.Label>
|
|
2398
|
+
<DropdownMenu.Item onSelect={() => console.log('Dashboard')}>Dashboard</DropdownMenu.Item>
|
|
2399
|
+
<DropdownMenu.Sub>
|
|
2400
|
+
<DropdownMenu.SubTrigger>
|
|
2401
|
+
<IconPeople />
|
|
2402
|
+
Teams
|
|
2403
|
+
</DropdownMenu.SubTrigger>
|
|
2404
|
+
<DropdownMenu.Portal>
|
|
2405
|
+
<DropdownMenu.SubContent>
|
|
2406
|
+
<DropdownMenu.Item onSelect={() => console.log('View All Teams')}>
|
|
2407
|
+
View All Teams
|
|
2408
|
+
</DropdownMenu.Item>
|
|
2409
|
+
<DropdownMenu.Separator />
|
|
2410
|
+
<DropdownMenu.Sub>
|
|
2411
|
+
<DropdownMenu.SubTrigger>Engineering</DropdownMenu.SubTrigger>
|
|
2412
|
+
<DropdownMenu.Portal>
|
|
2413
|
+
<DropdownMenu.SubContent>
|
|
2414
|
+
<DropdownMenu.Item onSelect={() => console.log('Frontend')}>
|
|
2415
|
+
Frontend
|
|
2416
|
+
</DropdownMenu.Item>
|
|
2417
|
+
<DropdownMenu.Item onSelect={() => console.log('Backend')}>
|
|
2418
|
+
Backend
|
|
2419
|
+
</DropdownMenu.Item>
|
|
2420
|
+
<DropdownMenu.Item onSelect={() => console.log('DevOps')}>
|
|
2421
|
+
DevOps
|
|
2422
|
+
</DropdownMenu.Item>
|
|
2423
|
+
</DropdownMenu.SubContent>
|
|
2424
|
+
</DropdownMenu.Portal>
|
|
2425
|
+
</DropdownMenu.Sub>
|
|
2426
|
+
<DropdownMenu.Sub>
|
|
2427
|
+
<DropdownMenu.SubTrigger>Design</DropdownMenu.SubTrigger>
|
|
2428
|
+
<DropdownMenu.Portal>
|
|
2429
|
+
<DropdownMenu.SubContent>
|
|
2430
|
+
<DropdownMenu.Item onSelect={() => console.log('Product Design')}>
|
|
2431
|
+
Product Design
|
|
2432
|
+
</DropdownMenu.Item>
|
|
2433
|
+
<DropdownMenu.Item onSelect={() => console.log('Brand')}>
|
|
2434
|
+
Brand
|
|
2435
|
+
</DropdownMenu.Item>
|
|
2436
|
+
</DropdownMenu.SubContent>
|
|
2437
|
+
</DropdownMenu.Portal>
|
|
2438
|
+
</DropdownMenu.Sub>
|
|
2439
|
+
<DropdownMenu.Item onSelect={() => console.log('Marketing')}>
|
|
2440
|
+
Marketing
|
|
2441
|
+
</DropdownMenu.Item>
|
|
2442
|
+
</DropdownMenu.SubContent>
|
|
2443
|
+
</DropdownMenu.Portal>
|
|
2444
|
+
</DropdownMenu.Sub>
|
|
2445
|
+
<DropdownMenu.Separator />
|
|
2446
|
+
<DropdownMenu.Item onSelect={() => console.log('Settings')}>Settings</DropdownMenu.Item>
|
|
2447
|
+
</DropdownMenu.Content>
|
|
2448
|
+
</DropdownMenu.Portal>
|
|
2449
|
+
</DropdownMenu.Root>
|
|
2450
|
+
);</code></pre>
|
|
2451
|
+
</div>
|
|
2452
|
+
<div class="note ok">
|
|
2453
|
+
<div class="row">
|
|
2454
|
+
<span class="ex-name">Submenu With Disabled Items</span>
|
|
2455
|
+
<span class="badge ok">story ok</span>
|
|
2456
|
+
</div>
|
|
2457
|
+
<div>Submenu with `disabled` items and a disabled `SubTrigger`</div>
|
|
2458
|
+
<div class="hint">Submenu that contains `disabled` `Item`s alongside a fully-disabled `SubTrigger`. Use `disabled` sparingly — prefer hiding unavailable actions outright unless the user needs to see them and understand why.</div>
|
|
2459
|
+
<pre><code>const SubmenuWithDisabledItems = () => (
|
|
2460
|
+
<DropdownMenu.Root>
|
|
2461
|
+
<DropdownMenu.Trigger asChild>
|
|
2462
|
+
<Button size="md" variant="secondary">
|
|
2463
|
+
Document Actions
|
|
2464
|
+
<IconKeyboardArrowDown />
|
|
2465
|
+
</Button>
|
|
2466
|
+
</DropdownMenu.Trigger>
|
|
2467
|
+
<DropdownMenu.Portal>
|
|
2468
|
+
<DropdownMenu.Content>
|
|
2469
|
+
<DropdownMenu.Item onSelect={() => console.log('View')}>View</DropdownMenu.Item>
|
|
2470
|
+
<DropdownMenu.Item onSelect={() => console.log('Edit')}>Edit</DropdownMenu.Item>
|
|
2471
|
+
<DropdownMenu.Separator />
|
|
2472
|
+
<DropdownMenu.Sub>
|
|
2473
|
+
<DropdownMenu.SubTrigger>
|
|
2474
|
+
<IconContentCopy />
|
|
2475
|
+
Export as
|
|
2476
|
+
</DropdownMenu.SubTrigger>
|
|
2477
|
+
<DropdownMenu.Portal>
|
|
2478
|
+
<DropdownMenu.SubContent>
|
|
2479
|
+
<DropdownMenu.Item onSelect={() => console.log('PDF')}>PDF</DropdownMenu.Item>
|
|
2480
|
+
<DropdownMenu.Item onSelect={() => console.log('Word')}>
|
|
2481
|
+
Word Document
|
|
2482
|
+
</DropdownMenu.Item>
|
|
2483
|
+
<DropdownMenu.Item disabled>Excel (Premium only)</DropdownMenu.Item>
|
|
2484
|
+
<DropdownMenu.Item disabled>PowerPoint (Premium only)</DropdownMenu.Item>
|
|
2485
|
+
</DropdownMenu.SubContent>
|
|
2486
|
+
</DropdownMenu.Portal>
|
|
2487
|
+
</DropdownMenu.Sub>
|
|
2488
|
+
<DropdownMenu.Sub>
|
|
2489
|
+
<DropdownMenu.SubTrigger disabled>
|
|
2490
|
+
<IconIosShare />
|
|
2491
|
+
Share (Sign in required)
|
|
2492
|
+
</DropdownMenu.SubTrigger>
|
|
2493
|
+
<DropdownMenu.Portal>
|
|
2494
|
+
<DropdownMenu.SubContent>
|
|
2495
|
+
<DropdownMenu.Item>Email</DropdownMenu.Item>
|
|
2496
|
+
<DropdownMenu.Item>Link</DropdownMenu.Item>
|
|
2497
|
+
</DropdownMenu.SubContent>
|
|
2498
|
+
</DropdownMenu.Portal>
|
|
2499
|
+
</DropdownMenu.Sub>
|
|
2500
|
+
</DropdownMenu.Content>
|
|
2501
|
+
</DropdownMenu.Portal>
|
|
2502
|
+
</DropdownMenu.Root>
|
|
2503
|
+
);</code></pre>
|
|
2504
|
+
</div>
|
|
2505
|
+
</div>
|
|
2506
|
+
|
|
2507
|
+
</div>
|
|
2508
|
+
</article>
|
|
2125
2509
|
<article
|
|
2126
2510
|
class="card
|
|
2127
2511
|
no-error
|
|
@@ -2134,9 +2518,9 @@ label?: ReactNode</code></pre>
|
|
|
2134
2518
|
<div class="title">
|
|
2135
2519
|
<h2><span class="status-dot dot-ok"></span> Loading</h2>
|
|
2136
2520
|
<div class="badges">
|
|
2137
|
-
<label for="c-
|
|
2521
|
+
<label for="c-5-components-loading-props" class="badge ok as-toggle">1 prop type</label>
|
|
2138
2522
|
|
|
2139
|
-
<label for="c-
|
|
2523
|
+
<label for="c-5-components-loading-stories" class="badge ok as-toggle">7 stories</label>
|
|
2140
2524
|
|
|
2141
2525
|
</div>
|
|
2142
2526
|
</div>
|
|
@@ -2149,9 +2533,9 @@ label?: ReactNode</code></pre>
|
|
|
2149
2533
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2150
2534
|
|
|
2151
2535
|
|
|
2152
|
-
<input id="c-
|
|
2536
|
+
<input id="c-5-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2153
2537
|
|
|
2154
|
-
<input id="c-
|
|
2538
|
+
<input id="c-5-components-loading-props" class="tg tg-props" type="checkbox" hidden />
|
|
2155
2539
|
|
|
2156
2540
|
<div class="panels">
|
|
2157
2541
|
|
|
@@ -2293,7 +2677,7 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
2293
2677
|
<div class="badges">
|
|
2294
2678
|
|
|
2295
2679
|
|
|
2296
|
-
<label for="c-
|
|
2680
|
+
<label for="c-6-design-system-feedback-statusball-stories" class="badge ok as-toggle">12 stories</label>
|
|
2297
2681
|
|
|
2298
2682
|
</div>
|
|
2299
2683
|
</div>
|
|
@@ -2306,7 +2690,7 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
2306
2690
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2307
2691
|
|
|
2308
2692
|
|
|
2309
|
-
<input id="c-
|
|
2693
|
+
<input id="c-6-design-system-feedback-statusball-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2310
2694
|
|
|
2311
2695
|
|
|
2312
2696
|
|
|
@@ -2511,9 +2895,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
2511
2895
|
<div class="title">
|
|
2512
2896
|
<h2><span class="status-dot dot-ok"></span> Toast</h2>
|
|
2513
2897
|
<div class="badges">
|
|
2514
|
-
<label for="c-
|
|
2898
|
+
<label for="c-7-components-toast-props" class="badge ok as-toggle">11 prop types</label>
|
|
2515
2899
|
|
|
2516
|
-
<label for="c-
|
|
2900
|
+
<label for="c-7-components-toast-stories" class="badge ok as-toggle">11 stories</label>
|
|
2517
2901
|
|
|
2518
2902
|
</div>
|
|
2519
2903
|
</div>
|
|
@@ -2526,9 +2910,9 @@ size?: "sm" | "md" | "lg"</code></pre>
|
|
|
2526
2910
|
<!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
|
|
2527
2911
|
|
|
2528
2912
|
|
|
2529
|
-
<input id="c-
|
|
2913
|
+
<input id="c-7-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
|
|
2530
2914
|
|
|
2531
|
-
<input id="c-
|
|
2915
|
+
<input id="c-7-components-toast-props" class="tg tg-props" type="checkbox" hidden />
|
|
2532
2916
|
|
|
2533
2917
|
<div class="panels">
|
|
2534
2918
|
|