@instruments/materia-ui 0.4.1 → 0.4.3
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/README.md +2 -4
- package/agent-docs.md +9 -9
- package/dist/components/accordion/accordion-root.d.ts +1 -0
- package/dist/components/accordion/accordion-root.js +1 -0
- package/dist/components/alert/alert-root.d.ts +1 -0
- package/dist/components/alert/alert-root.js +1 -0
- package/dist/components/alert-dialog/alert-dialog-root.d.ts +1 -0
- package/dist/components/alert-dialog/alert-dialog-root.js +1 -0
- package/dist/components/avatar/avatar-root.d.ts +1 -0
- package/dist/components/avatar/avatar-root.js +1 -0
- package/dist/components/badge/badge-root.d.ts +1 -0
- package/dist/components/badge/badge-root.js +1 -0
- package/dist/components/calendar/calendar-root.js +1 -0
- package/dist/components/carousel/carousel-root.d.ts +1 -0
- package/dist/components/carousel/carousel-root.js +1 -0
- package/dist/components/chart/chart-root.d.ts +1 -0
- package/dist/components/chart/chart-root.js +1 -0
- package/dist/components/collapsible/collapsible-root.d.ts +1 -0
- package/dist/components/collapsible/collapsible-root.js +1 -0
- package/dist/components/combobox/combobox-root.d.ts +1 -0
- package/dist/components/combobox/combobox-root.js +1 -0
- package/dist/components/command/command-root.d.ts +1 -0
- package/dist/components/command/command-root.js +1 -0
- package/dist/components/dialog/dialog-content.d.ts +2 -0
- package/dist/components/dialog/dialog-content.js +3 -2
- package/dist/components/dialog/dialog-footer.d.ts +2 -0
- package/dist/components/dialog/dialog-footer.js +8 -8
- package/dist/components/dialog/dialog-root.d.ts +1 -0
- package/dist/components/dialog/dialog-root.js +1 -0
- package/dist/components/dialog/dialog-title.d.ts +2 -0
- package/dist/components/dialog/dialog-title.js +3 -1
- package/dist/components/drawer/drawer-root.d.ts +1 -0
- package/dist/components/drawer/drawer-root.js +1 -0
- package/dist/components/heading/heading-root.d.ts +1 -0
- package/dist/components/heading/heading-root.js +1 -0
- package/dist/components/input/input-root.d.ts +1 -0
- package/dist/components/input/input-root.js +1 -0
- package/dist/components/kbd/kbd-root.d.ts +1 -0
- package/dist/components/kbd/kbd-root.js +1 -0
- package/dist/components/logo/logo-mark.d.ts +1 -1
- package/dist/components/logo/logo-mark.js +1 -1
- package/dist/components/logotype/logotype-paths.d.ts +1 -1
- package/dist/components/logotype/logotype-paths.js +1 -1
- package/dist/components/month-year-picker/month-year-picker-root.d.ts +1 -0
- package/dist/components/month-year-picker/month-year-picker-root.js +1 -0
- package/dist/components/native-select/native-select-root.d.ts +1 -0
- package/dist/components/native-select/native-select-root.js +1 -0
- package/dist/components/pill/pill-root.d.ts +1 -0
- package/dist/components/pill/pill-root.js +1 -0
- package/dist/components/popover/popover-root.d.ts +1 -0
- package/dist/components/popover/popover-root.js +1 -0
- package/dist/components/quantity-control/quantity-control-root.d.ts +1 -0
- package/dist/components/quantity-control/quantity-control-root.js +1 -0
- package/dist/components/select/select-root.d.ts +1 -0
- package/dist/components/select/select-root.js +1 -0
- package/dist/components/separator/separator-root.d.ts +1 -0
- package/dist/components/separator/separator-root.js +1 -0
- package/dist/components/sheet/sheet-root.d.ts +1 -0
- package/dist/components/sheet/sheet-root.js +1 -0
- package/dist/components/spinner/spinner-root.d.ts +1 -0
- package/dist/components/spinner/spinner-root.js +1 -0
- package/dist/components/stepper/stepper-root.d.ts +1 -0
- package/dist/components/stepper/stepper-root.js +1 -0
- package/dist/components/success-tick-ripple/success-tick-ripple-root.d.ts +1 -0
- package/dist/components/success-tick-ripple/success-tick-ripple-root.js +1 -0
- package/dist/components/switch/switch-root.d.ts +1 -0
- package/dist/components/switch/switch-root.js +1 -0
- package/dist/components/tag/tag-root.d.ts +1 -0
- package/dist/components/tag/tag-root.js +1 -0
- package/dist/components/textarea/textarea-root.d.ts +1 -0
- package/dist/components/textarea/textarea-root.js +1 -0
- package/dist/components/time-slot-picker/time-slot-picker-root.d.ts +1 -0
- package/dist/components/time-slot-picker/time-slot-picker-root.js +1 -0
- package/dist/components/toast/toast-root.d.ts +1 -0
- package/dist/components/toast/toast-root.js +1 -0
- package/dist/components/tooltip/tooltip-root.d.ts +1 -0
- package/dist/components/tooltip/tooltip-root.js +1 -0
- package/dist/compositions/empty-state/empty-state-root.d.ts +1 -0
- package/dist/compositions/empty-state/empty-state-root.js +1 -0
- package/dist/compositions/file-upload/file-upload-dropzone.d.ts +1 -0
- package/dist/compositions/file-upload/file-upload-dropzone.js +1 -0
- package/dist/compositions/product-card/product-card-caption.js +4 -2
- package/dist/compositions/product-card/product-card-content-types.d.ts +8 -0
- package/dist/compositions/product-card/product-card-meta.js +2 -2
- package/dist/compositions/product-card/product-card-provider-types.d.ts +3 -0
- package/dist/compositions/product-card/product-card-provider.js +4 -1
- package/dist/compositions/product-card/product-card-root.d.ts +1 -1
- package/dist/compositions/product-card/product-card-root.js +2 -1
- package/dist/compositions/product-card/product-card-skeleton.d.ts +14 -5
- package/dist/compositions/product-card/product-card-skeleton.js +6 -5
- package/dist/data/decision-trees.d.ts +1 -1
- package/dist/data/decision-trees.js +1 -1
- package/dist/data/docs-manifest.d.ts +2 -0
- package/dist/data/docs-manifest.js +257 -67
- package/dist/styles/index.css +0 -1
- package/dist/utils/cn-theme.js +1 -1
- package/lint/README.md +6 -2
- package/lint/doctrine-rules.mjs +4 -4
- package/lint/oxlint/index.d.mts +13 -5
- package/lint/oxlint/index.mjs +26 -0
- package/lint/oxlint/no-naked-element.mjs +123 -65
- package/lint/oxlint/no-render-layout-as.mjs +61 -56
- package/lint/scan-classes.d.mts +58 -5
- package/lint/scan-classes.mjs +274 -38
- package/lint/tokens.d.mts +16 -8
- package/lint/tokens.mjs +13 -3
- package/lint/type-case.d.mts +16 -8
- package/lint/type-case.mjs +17 -0
- package/package.json +27 -14
- package/lint/oxlint/fixtures/allowed.tsx +0 -12
- package/lint/oxlint/fixtures/fixture.config.mjs +0 -29
- package/lint/oxlint/fixtures/invalid.tsx +0 -24
- package/lint/oxlint/fixtures/layout-only.tsx +0 -26
- package/lint/oxlint/fixtures/render-as-invalid.tsx +0 -11
- package/lint/oxlint/fixtures/render-as-valid.tsx +0 -14
- package/lint/oxlint/fixtures/valid.tsx +0 -18
- package/lint/oxlint/no-naked-element.test.ts +0 -155
- package/lint/oxlint/no-render-layout-as.test.ts +0 -81
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* oxlint-disable max-lines -- generated data module: one entry per design-system unit. */
|
|
2
|
-
// GENERATED by scripts/generate-docs-manifest.
|
|
2
|
+
// GENERATED by scripts/generate-docs-manifest.ts - do not edit.
|
|
3
3
|
// Regenerate with `pnpm generate:docs-manifest`; the lint chain runs
|
|
4
4
|
// `pnpm test` and fails when this file is stale.
|
|
5
5
|
export const docsManifest = {
|
|
@@ -84,6 +84,7 @@ export const docsManifest = {
|
|
|
84
84
|
"Reach for `Collapsible` instead when there is a single expandable region - `Accordion` is for a set of grouped items keyed by `value`.",
|
|
85
85
|
"Children must be `AccordionItem`s (each with `AccordionTrigger`/`AccordionContent`); the item's `value` is what `value`/`defaultValue` match against.",
|
|
86
86
|
],
|
|
87
|
+
keywords: ["disclosure", "faq", "expander"],
|
|
87
88
|
uses: ["icon"],
|
|
88
89
|
usedBy: [],
|
|
89
90
|
anatomy: {
|
|
@@ -150,6 +151,7 @@ export const docsManifest = {
|
|
|
150
151
|
'Compose `AlertTitle` / `AlertDescription` as children and render a direct-child `<svg>` for the auto-detected icon column; `tone="danger"` recolours for errors.',
|
|
151
152
|
'It renders `role="alert"`, so AT announces it on mount - keep it a notice, not a container for heavy interactive UI.',
|
|
152
153
|
],
|
|
154
|
+
keywords: ["callout", "notice", "banner", "message"],
|
|
153
155
|
uses: ["grid"],
|
|
154
156
|
usedBy: [],
|
|
155
157
|
anatomy: {
|
|
@@ -286,6 +288,7 @@ export const docsManifest = {
|
|
|
286
288
|
"Route every destructive confirmation here, never a plain `Dialog` - unlike `Dialog` it won't dismiss on outside-click / Esc, so the choice stays deliberate.",
|
|
287
289
|
'Give the destructive `AlertDialogAction` `tone="danger"` and keep the safe escape as `AlertDialogCancel`.',
|
|
288
290
|
],
|
|
291
|
+
keywords: ["confirm", "confirmation", "modal"],
|
|
289
292
|
uses: ["button", "flex"],
|
|
290
293
|
usedBy: [],
|
|
291
294
|
},
|
|
@@ -337,6 +340,7 @@ export const docsManifest = {
|
|
|
337
340
|
'Use `variant="muted"` inside dense copy so the underline stays quiet; the default variant stands out from the surrounding text.',
|
|
338
341
|
'Use `variant="plain"` where the link is already set apart by its position, such as a caption under a tile or a row in an index; keep an underline on links inside running text.',
|
|
339
342
|
],
|
|
343
|
+
keywords: [],
|
|
340
344
|
uses: ["icon"],
|
|
341
345
|
usedBy: ["mega-menu", "site-footer"],
|
|
342
346
|
},
|
|
@@ -429,6 +433,7 @@ export const docsManifest = {
|
|
|
429
433
|
"Use `prefix`/`suffix` for units and currency (`$`, `/10`), not sibling text nodes - they're layout-animated with the digits and folded into the one screen-reader announcement.",
|
|
430
434
|
"Reach for the `duration`/`easing` tokens over a raw `transition` - token timing keeps it in step with the rest of the motion system; drop to `transition` only for bespoke springs.",
|
|
431
435
|
],
|
|
436
|
+
keywords: [],
|
|
432
437
|
uses: ["visually-hidden"],
|
|
433
438
|
usedBy: ["thinking-loader"],
|
|
434
439
|
},
|
|
@@ -447,7 +452,7 @@ export const docsManifest = {
|
|
|
447
452
|
name: "as",
|
|
448
453
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
449
454
|
required: false,
|
|
450
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
455
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Ref\nand event-handler types remain the default element\'s.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
451
456
|
},
|
|
452
457
|
{
|
|
453
458
|
name: "ratio",
|
|
@@ -468,6 +473,7 @@ export const docsManifest = {
|
|
|
468
473
|
"Give it exactly one child and let it fill - set the media to `size-full object-cover`; `AspectRatio` sizes to the available width and derives height from `ratio`.",
|
|
469
474
|
"Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
|
|
470
475
|
],
|
|
476
|
+
keywords: [],
|
|
471
477
|
uses: [],
|
|
472
478
|
usedBy: [],
|
|
473
479
|
anatomy: {
|
|
@@ -546,7 +552,7 @@ export const docsManifest = {
|
|
|
546
552
|
type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info"',
|
|
547
553
|
required: false,
|
|
548
554
|
defaultValue: "false",
|
|
549
|
-
description: "Render a plain dot instead of a number. `true` tints it with the badge's\nown `tone`; a
|
|
555
|
+
description: "Render a plain dot instead of a number. `true` tints it with the badge's\nown `tone`; a `Tone` value overrides that with the shared dot tint.",
|
|
550
556
|
},
|
|
551
557
|
{
|
|
552
558
|
name: "max",
|
|
@@ -748,6 +754,7 @@ export const docsManifest = {
|
|
|
748
754
|
"Give `AvatarImage` a meaningful `alt`; the visual is decorative only when the fallback initials already convey the identity.",
|
|
749
755
|
'Keep the default `radius="full"` for people; use a squared `radius` for brand/entity logos so they read as objects, not users.',
|
|
750
756
|
],
|
|
757
|
+
keywords: ["profile picture", "user", "initials"],
|
|
751
758
|
uses: ["center", "dot", "flex", "visually-hidden"],
|
|
752
759
|
usedBy: ["mobile-navigation"],
|
|
753
760
|
},
|
|
@@ -944,6 +951,7 @@ export const docsManifest = {
|
|
|
944
951
|
'A standalone count needs an `accessibleLabel` ("3 unread"); inside an icon-only trigger, mark the badge `aria-hidden` and fold the count into the trigger\'s `aria-label`.',
|
|
945
952
|
"A badge overlapping a corner of another surface takes `ring` so a 2px `background`-coloured ring separates it from what's beneath; set it only where the badge truly overlaps, and the page surface should be `background`.",
|
|
946
953
|
],
|
|
954
|
+
keywords: ["chip", "status", "label"],
|
|
947
955
|
uses: ["icon", "pill", "spinner", "visually-hidden"],
|
|
948
956
|
usedBy: ["data-grid-column-filter", "product-card"],
|
|
949
957
|
},
|
|
@@ -1025,6 +1033,7 @@ export const docsManifest = {
|
|
|
1025
1033
|
"Requires `ReducedMotionProvider`; under reduced motion it renders nothing (a static ring would read louder than the sweep it replaces), so don't add your own fallback border.",
|
|
1026
1034
|
'Use it as an attention / "try me" cue on an idle surface, not a loading state - content placeholders want `Skeleton`, and a periodic liveness flick wants `Shine`.',
|
|
1027
1035
|
],
|
|
1036
|
+
keywords: [],
|
|
1028
1037
|
uses: ["fade-overlay"],
|
|
1029
1038
|
usedBy: [],
|
|
1030
1039
|
},
|
|
@@ -1033,7 +1042,7 @@ export const docsManifest = {
|
|
|
1033
1042
|
module: "components/box",
|
|
1034
1043
|
title: "Box",
|
|
1035
1044
|
category: "layout",
|
|
1036
|
-
description: "The escape hatch: a raw host element with a `className`, still checked for\ntokens-only classes. Box renders the chosen
|
|
1045
|
+
description: "The escape hatch: a raw host element with a `className`, still checked for\ntokens-only classes. Box renders the chosen `LayoutElement` with no\nlayout opinions of its own (no margin, width, or padding, unlike Container),\nso it suits decorative wrappers that a styled primitive would visually break. Reach for it only when no styled primitive fits; the\n`className` you pass is governed by the same tokens-only scan as everything\nelse. RSC-safe.",
|
|
1037
1046
|
exports: [
|
|
1038
1047
|
{
|
|
1039
1048
|
name: "Box",
|
|
@@ -1043,7 +1052,7 @@ export const docsManifest = {
|
|
|
1043
1052
|
name: "as",
|
|
1044
1053
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
1045
1054
|
required: false,
|
|
1046
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
1055
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
1047
1056
|
},
|
|
1048
1057
|
{
|
|
1049
1058
|
name: "ref",
|
|
@@ -1065,6 +1074,7 @@ export const docsManifest = {
|
|
|
1065
1074
|
"`as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary.",
|
|
1066
1075
|
"Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
|
|
1067
1076
|
],
|
|
1077
|
+
keywords: [],
|
|
1068
1078
|
uses: [],
|
|
1069
1079
|
usedBy: [
|
|
1070
1080
|
"mega-menu",
|
|
@@ -1133,6 +1143,7 @@ export const docsManifest = {
|
|
|
1133
1143
|
'Render router links via `<BreadcrumbLink render={<Link href="…" />}>` with a framework `<Link>` - the bare default is an `<a>`.',
|
|
1134
1144
|
"Collapse overflow with `BreadcrumbEllipsis` hosting a menu of the hidden crumbs, rather than dropping items silently.",
|
|
1135
1145
|
],
|
|
1146
|
+
keywords: [],
|
|
1136
1147
|
uses: ["center", "flex", "icon", "visually-hidden"],
|
|
1137
1148
|
usedBy: [],
|
|
1138
1149
|
anatomy: {
|
|
@@ -1355,6 +1366,7 @@ export const docsManifest = {
|
|
|
1355
1366
|
"`loading` keeps the button focusable while it blocks presses, so focus stays put across a submit; a plain `disabled` button leaves the tab order.",
|
|
1356
1367
|
'Reach for `emphasis="ghost"`/`"link"` in toolbars/headers - they carry `data-edge-comp` so containers can pull them flush to the edge.',
|
|
1357
1368
|
],
|
|
1369
|
+
keywords: [],
|
|
1358
1370
|
uses: ["center", "dot", "icon", "spinner"],
|
|
1359
1371
|
usedBy: [
|
|
1360
1372
|
"alert-dialog",
|
|
@@ -1452,6 +1464,7 @@ export const docsManifest = {
|
|
|
1452
1464
|
"Use `ButtonGroup` to visually join related `Button`s (plus `Input`/`Select`/`DropdownMenu`); for one/many *selection* state reach for `ToggleGroup`.",
|
|
1453
1465
|
"The `segmented` variant owns the border/background/shadow and defaults `dividers` on, while `joined` (default) lets each child draw its own - don't mix the two.",
|
|
1454
1466
|
],
|
|
1467
|
+
keywords: [],
|
|
1455
1468
|
uses: ["separator"],
|
|
1456
1469
|
usedBy: ["quantity-control"],
|
|
1457
1470
|
},
|
|
@@ -1478,6 +1491,7 @@ export const docsManifest = {
|
|
|
1478
1491
|
"Restrict selectable dates with react-day-picker matchers (`disabled`/`hidden`/`startMonth`/`endMonth`), not by filtering after the user clicks.",
|
|
1479
1492
|
"Use `Calendar` for an inline date grid; for a compact click-to-open date field, wrap it in a `Popover` behind a `Button`/`Input` trigger.",
|
|
1480
1493
|
],
|
|
1494
|
+
keywords: ["date picker", "datepicker", "date"],
|
|
1481
1495
|
uses: ["button", "icon"],
|
|
1482
1496
|
usedBy: [],
|
|
1483
1497
|
},
|
|
@@ -1578,6 +1592,7 @@ export const docsManifest = {
|
|
|
1578
1592
|
"Pass `shadow={false}` when stacking cards on a `muted`/shaded canvas - colour contrast separates them and per-card shadows read as noise.",
|
|
1579
1593
|
"For a full-bleed media/CTA panel use an editorial composite (`EditorialCard`), not `Card` - `Card` is a neutral padded container, not a marketing surface.",
|
|
1580
1594
|
],
|
|
1595
|
+
keywords: [],
|
|
1581
1596
|
uses: ["flex"],
|
|
1582
1597
|
usedBy: ["attribute-card", "empty", "settings-card"],
|
|
1583
1598
|
anatomy: {
|
|
@@ -1766,6 +1781,7 @@ export const docsManifest = {
|
|
|
1766
1781
|
"Tune scroll behaviour via `opts` (Embla options like `loop`/`align`) and enable `wheelScroll`/`freeScroll` deliberately - free-scroll drops snap points, so pass `slideCount` if the dots miscount.",
|
|
1767
1782
|
'Give a descriptive `aria-label` when the region isn\'t self-evidently "Carousel" (e.g. `"Product images"`).',
|
|
1768
1783
|
],
|
|
1784
|
+
keywords: ["slideshow", "gallery", "swiper"],
|
|
1769
1785
|
uses: ["button", "flex"],
|
|
1770
1786
|
usedBy: [],
|
|
1771
1787
|
},
|
|
@@ -1784,7 +1800,7 @@ export const docsManifest = {
|
|
|
1784
1800
|
name: "as",
|
|
1785
1801
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
1786
1802
|
required: false,
|
|
1787
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
1803
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
1788
1804
|
},
|
|
1789
1805
|
{
|
|
1790
1806
|
name: "inline",
|
|
@@ -1811,6 +1827,7 @@ export const docsManifest = {
|
|
|
1811
1827
|
"`as`/`render` are mutually exclusive (`render` wins, dev-warned); use `inline` to center inline-level content without breaking the text flow.",
|
|
1812
1828
|
"Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
|
|
1813
1829
|
],
|
|
1830
|
+
keywords: [],
|
|
1814
1831
|
uses: [],
|
|
1815
1832
|
usedBy: [
|
|
1816
1833
|
"avatar",
|
|
@@ -1964,6 +1981,7 @@ export const docsManifest = {
|
|
|
1964
1981
|
"Colour every series through `config` (`{ desktop: { label, color } }`) and reference `var(--color-<key>)` on the marks - never hardcode a hex on a `Bar` / `Line`; that keeps light/dark theming and the legend/tooltip swatches in sync.",
|
|
1965
1982
|
"Reach for `Chart` only to render a recharts data visualization; for a static value + delta use `Stat`, and for a progress bar use `Progress`.",
|
|
1966
1983
|
],
|
|
1984
|
+
keywords: ["graph", "plot", "visualisation", "visualization"],
|
|
1967
1985
|
uses: ["center", "flex", "grid"],
|
|
1968
1986
|
usedBy: [],
|
|
1969
1987
|
anatomy: {
|
|
@@ -2028,6 +2046,7 @@ export const docsManifest = {
|
|
|
2028
2046
|
"Controlled use needs `checked` + `onCheckedChange` together; passing only `checked` freezes the box - use `defaultChecked` for uncontrolled.",
|
|
2029
2047
|
"For a selectable card or a label+description row, reach for `CheckboxCardGroup`/`CheckboxField` instead of hand-laying-out around `Checkbox`.",
|
|
2030
2048
|
],
|
|
2049
|
+
keywords: [],
|
|
2031
2050
|
uses: ["icon"],
|
|
2032
2051
|
usedBy: ["checkbox-field", "data-grid", "document-list"],
|
|
2033
2052
|
},
|
|
@@ -2202,6 +2221,7 @@ export const docsManifest = {
|
|
|
2202
2221
|
"To control the set, give each card a `value`, drive `checkedValues` (a `string[]`) and toggle inside `onCheckedChange(value, checked)`; without `checkedValues` each card keeps its own `checked`/`defaultChecked`.",
|
|
2203
2222
|
"Each card is one tab stop and toggles with Space; checkboxes don't rove, so Tab (not the arrow keys) moves between cards.",
|
|
2204
2223
|
],
|
|
2224
|
+
keywords: [],
|
|
2205
2225
|
uses: ["center", "flex", "input-card"],
|
|
2206
2226
|
usedBy: [],
|
|
2207
2227
|
anatomy: {
|
|
@@ -2298,6 +2318,7 @@ export const docsManifest = {
|
|
|
2298
2318
|
"Put helper text in `description` (linked via `aria-describedby`), not a separate sibling element the screen reader won't announce with the control.",
|
|
2299
2319
|
'`size` accepts only `"xs"`/`"sm"`; for a full selectable card use `CheckboxCardGroup`, and render one `CheckboxField` per option for a set.',
|
|
2300
2320
|
],
|
|
2321
|
+
keywords: [],
|
|
2301
2322
|
uses: ["checkbox", "grid", "label", "text"],
|
|
2302
2323
|
usedBy: [],
|
|
2303
2324
|
},
|
|
@@ -2331,6 +2352,7 @@ export const docsManifest = {
|
|
|
2331
2352
|
"Use inline `Code` for identifiers/values in a sentence and `block` for multi-line snippets - `Kbd` is for keyboard keys, not code.",
|
|
2332
2353
|
"`block` renders `<pre><code>` that scrolls horizontally; add `whitespace-pre-wrap` via `className` only when wrapping beats scrolling (long prose-like messages).",
|
|
2333
2354
|
],
|
|
2355
|
+
keywords: [],
|
|
2334
2356
|
uses: [],
|
|
2335
2357
|
usedBy: [],
|
|
2336
2358
|
},
|
|
@@ -2373,6 +2395,7 @@ export const docsManifest = {
|
|
|
2373
2395
|
"Compose `CollapsibleTrigger` + `CollapsibleContent` inside it - a bare child won't expand.",
|
|
2374
2396
|
"Drive it uncontrolled with `defaultOpen`; only lift to `open`/`onOpenChange` when external state must sync (e.g. persisting the open panel).",
|
|
2375
2397
|
],
|
|
2398
|
+
keywords: ["disclosure", "show more", "expander"],
|
|
2376
2399
|
uses: [],
|
|
2377
2400
|
usedBy: [],
|
|
2378
2401
|
anatomy: {
|
|
@@ -2444,6 +2467,7 @@ export const docsManifest = {
|
|
|
2444
2467
|
"Values are HSL (`h` 0–360, `s`/`l` 0–100), not hex - convert at your storage boundary; a hex string won't position the handles.",
|
|
2445
2468
|
"`onChange` fires on every pointer drag and arrow-key step - throttle persistence/network writes downstream rather than reacting to each intermediate value.",
|
|
2446
2469
|
],
|
|
2470
|
+
keywords: [],
|
|
2447
2471
|
uses: [],
|
|
2448
2472
|
usedBy: [],
|
|
2449
2473
|
},
|
|
@@ -2544,6 +2568,7 @@ export const docsManifest = {
|
|
|
2544
2568
|
"For lists in the hundreds+, pass `virtualization={{ enabled: true }}` so only visible rows mount instead of every option.",
|
|
2545
2569
|
"Provide `items` as `{ label, value }[]` - the visible text comes from `label` while selection is tracked by `value`.",
|
|
2546
2570
|
],
|
|
2571
|
+
keywords: ["autocomplete", "typeahead", "searchable select"],
|
|
2547
2572
|
uses: ["button", "flex", "icon"],
|
|
2548
2573
|
usedBy: ["country-combobox"],
|
|
2549
2574
|
},
|
|
@@ -2754,6 +2779,7 @@ export const docsManifest = {
|
|
|
2754
2779
|
"Act on a choice with `CommandItem`'s `onClick`, which fires for a pointer click and for `Enter` on the highlighted item.",
|
|
2755
2780
|
"A plain click-triggered action menu is `DropdownMenu`; a remembered selection is `Combobox`.",
|
|
2756
2781
|
],
|
|
2782
|
+
keywords: ["command palette", "spotlight", "cmd+k", "quick search"],
|
|
2757
2783
|
uses: ["dialog", "flex", "icon"],
|
|
2758
2784
|
usedBy: [],
|
|
2759
2785
|
anatomy: {
|
|
@@ -2823,7 +2849,7 @@ export const docsManifest = {
|
|
|
2823
2849
|
name: "as",
|
|
2824
2850
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
2825
2851
|
required: false,
|
|
2826
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
2852
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
2827
2853
|
},
|
|
2828
2854
|
{
|
|
2829
2855
|
name: "fluid",
|
|
@@ -2873,6 +2899,7 @@ export const docsManifest = {
|
|
|
2873
2899
|
"`Container` constrains width and applies the page gutter; `Section` is the full-bleed vertical-rhythm band - nest a `Container` inside a `Section` when content must be both padded and centred.",
|
|
2874
2900
|
"Fold a single band into one node with `space` (its `py`) instead of nesting a `Section`; pass `fluid` to drop the max-width.",
|
|
2875
2901
|
],
|
|
2902
|
+
keywords: [],
|
|
2876
2903
|
uses: [],
|
|
2877
2904
|
usedBy: [],
|
|
2878
2905
|
},
|
|
@@ -2989,7 +3016,7 @@ export const docsManifest = {
|
|
|
2989
3016
|
name: "dot",
|
|
2990
3017
|
type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info"',
|
|
2991
3018
|
required: false,
|
|
2992
|
-
description: "Dot indicator at the start (takes precedence over icon): `true` for a neutral dot, or a
|
|
3019
|
+
description: "Dot indicator at the start (takes precedence over icon): `true` for a neutral dot, or a `Tone` to tint it.",
|
|
2993
3020
|
},
|
|
2994
3021
|
{
|
|
2995
3022
|
name: "icon",
|
|
@@ -3171,6 +3198,7 @@ export const docsManifest = {
|
|
|
3171
3198
|
"Use `ContextMenu` for a right-click / long-press menu on a surface; a menu opened by clicking a button or trigger is a `DropdownMenu`.",
|
|
3172
3199
|
"Wrap the target region in `ContextMenuTrigger` so the whole surface is right-clickable; use `ContextMenuCheckboxItem` / `ContextMenuRadioGroup` for stateful rows.",
|
|
3173
3200
|
],
|
|
3201
|
+
keywords: [],
|
|
3174
3202
|
uses: ["icon", "menu-item"],
|
|
3175
3203
|
usedBy: [],
|
|
3176
3204
|
anatomy: {
|
|
@@ -3319,6 +3347,7 @@ export const docsManifest = {
|
|
|
3319
3347
|
'Feed `value` an ISO alpha-2 code (`"US"`) or a full country name (`"United States"`) - both resolve - but `onValueChange` always returns the code.',
|
|
3320
3348
|
"Don't pass `items`; `CountryCombobox` supplies the full country list itself. For a non-country searchable list, use the base `Combobox`.",
|
|
3321
3349
|
],
|
|
3350
|
+
keywords: [],
|
|
3322
3351
|
uses: ["combobox"],
|
|
3323
3352
|
usedBy: [],
|
|
3324
3353
|
},
|
|
@@ -3393,6 +3422,7 @@ export const docsManifest = {
|
|
|
3393
3422
|
"It is controlled-only - pass `value` (ISO 3166-1 alpha-2) and an `onChange`; there is no uncontrolled/`defaultValue` mode.",
|
|
3394
3423
|
'Give each option an alpha-2 `value` (e.g. `"US"`) so the overlaid flag resolves; a globe placeholder shows when the code is empty/unknown.',
|
|
3395
3424
|
],
|
|
3425
|
+
keywords: [],
|
|
3396
3426
|
uses: ["center", "icon", "input-group"],
|
|
3397
3427
|
usedBy: ["phone-input"],
|
|
3398
3428
|
},
|
|
@@ -3450,6 +3480,7 @@ export const docsManifest = {
|
|
|
3450
3480
|
"Use this for read-only key/value metadata about one entity; for tabular rows of many records reach for `Table` or `DataGrid` instead.",
|
|
3451
3481
|
"Turn on `showSeparators` when items are visually dense; leave it off inside a bordered `Card` where the container already frames them.",
|
|
3452
3482
|
],
|
|
3483
|
+
keywords: [],
|
|
3453
3484
|
uses: ["grid"],
|
|
3454
3485
|
usedBy: [],
|
|
3455
3486
|
},
|
|
@@ -3502,7 +3533,7 @@ export const docsManifest = {
|
|
|
3502
3533
|
type: "DialogContentSize",
|
|
3503
3534
|
required: false,
|
|
3504
3535
|
defaultValue: '"default"',
|
|
3505
|
-
description: "Panel geometry; see
|
|
3536
|
+
description: "Panel geometry; see `DialogContentSize`.",
|
|
3506
3537
|
},
|
|
3507
3538
|
],
|
|
3508
3539
|
},
|
|
@@ -3578,6 +3609,7 @@ export const docsManifest = {
|
|
|
3578
3609
|
"A panel that slides in from a screen edge is a `Sheet` (or `Drawer` for a drag-to-dismiss bottom sheet), not a `Dialog`.",
|
|
3579
3610
|
"Always render a `DialogTitle` (wrap in `sr-only` if visually hidden) so the modal is announced; `DialogContent` uses the 36px `--radius-modal` corner.",
|
|
3580
3611
|
],
|
|
3612
|
+
keywords: ["modal", "popup", "lightbox"],
|
|
3581
3613
|
uses: ["button", "flex"],
|
|
3582
3614
|
usedBy: ["command", "quick-view"],
|
|
3583
3615
|
anatomy: {
|
|
@@ -3674,6 +3706,7 @@ export const docsManifest = {
|
|
|
3674
3706
|
"Prefer the semantic `tone` (`success`/`warning`/`danger`/…) over a raw `color` so the dot tracks theme tokens; reserve `color` for swatches outside the palette.",
|
|
3675
3707
|
"The dot is decorative - pair it with visible text or an `aria-label`; colour alone doesn't convey status to assistive tech.",
|
|
3676
3708
|
],
|
|
3709
|
+
keywords: [],
|
|
3677
3710
|
uses: [],
|
|
3678
3711
|
usedBy: [
|
|
3679
3712
|
"avatar",
|
|
@@ -3747,6 +3780,7 @@ export const docsManifest = {
|
|
|
3747
3780
|
"Pick a glyph by intent from `DOT_MATRIX_LOADERS` - don't invent ad-hoc names. Map product actions → names in one place.",
|
|
3748
3781
|
"Pass `settled` when the op finished but narration is still on screen, so the slot stays in character without spinning forever.",
|
|
3749
3782
|
],
|
|
3783
|
+
keywords: [],
|
|
3750
3784
|
uses: [],
|
|
3751
3785
|
usedBy: [],
|
|
3752
3786
|
},
|
|
@@ -3856,6 +3890,7 @@ export const docsManifest = {
|
|
|
3856
3890
|
"Always render a `DrawerTitle` inside `DrawerContent` (sr-only if visually hidden) - the underlying primitive uses it for `aria-labelledby`.",
|
|
3857
3891
|
"Pass `container` to scope the drawer and its scrim to a bounded element instead of the viewport (the mobile-nav overlay pattern).",
|
|
3858
3892
|
],
|
|
3893
|
+
keywords: ["bottom sheet"],
|
|
3859
3894
|
uses: ["flex"],
|
|
3860
3895
|
usedBy: ["mobile-navigation"],
|
|
3861
3896
|
},
|
|
@@ -3972,7 +4007,7 @@ export const docsManifest = {
|
|
|
3972
4007
|
name: "dot",
|
|
3973
4008
|
type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info"',
|
|
3974
4009
|
required: false,
|
|
3975
|
-
description: "Dot indicator at the start (takes precedence over icon): `true` for a neutral dot, or a
|
|
4010
|
+
description: "Dot indicator at the start (takes precedence over icon): `true` for a neutral dot, or a `Tone` to tint it.",
|
|
3976
4011
|
},
|
|
3977
4012
|
{
|
|
3978
4013
|
name: "icon",
|
|
@@ -4155,6 +4190,7 @@ export const docsManifest = {
|
|
|
4155
4190
|
"It's an actions / options menu, not a form control - to choose a value use `Select` (styled) or `Combobox` (searchable), not menu rows.",
|
|
4156
4191
|
"Reach for `DropdownMenuCheckboxItem` / `DropdownMenuRadioItem` for stateful rows; `DropdownMenuContent` portals to the body.",
|
|
4157
4192
|
],
|
|
4193
|
+
keywords: [],
|
|
4158
4194
|
uses: ["icon", "menu-item"],
|
|
4159
4195
|
usedBy: [
|
|
4160
4196
|
"data-grid-column-header",
|
|
@@ -4282,6 +4318,7 @@ export const docsManifest = {
|
|
|
4282
4318
|
"Colour the curve with a `text-*` class (it strokes `currentColor`) and size it purely via `className` - the same primitive scales from a tiny preview to a full row.",
|
|
4283
4319
|
"Always pass a meaningful `title` - it becomes the SVG `<title>`, the curve's only accessible name.",
|
|
4284
4320
|
],
|
|
4321
|
+
keywords: [],
|
|
4285
4322
|
uses: [],
|
|
4286
4323
|
usedBy: [],
|
|
4287
4324
|
},
|
|
@@ -4386,6 +4423,7 @@ export const docsManifest = {
|
|
|
4386
4423
|
'Use `Empty` for "no data / nothing here"; a failure the user can retry is an `ErrorState` (which composes `Empty`), so don\'t hand-roll a retry empty.',
|
|
4387
4424
|
"Compose `EmptyHeader` › `EmptyMedia` + `EmptyTitle` + `EmptyDescription`, and put the call-to-action in `EmptyActions`.",
|
|
4388
4425
|
],
|
|
4426
|
+
keywords: [],
|
|
4389
4427
|
uses: ["card", "flex", "heading", "icon", "icon-box", "stack", "text"],
|
|
4390
4428
|
usedBy: ["empty-state", "error-state"],
|
|
4391
4429
|
},
|
|
@@ -4440,6 +4478,7 @@ export const docsManifest = {
|
|
|
4440
4478
|
"`ErrorBoundary` catches render crashes in a subtree - pair it with an `ErrorState` in `fallback` to show the failure; it renders nothing by default.",
|
|
4441
4479
|
"It logs nothing itself - wire telemetry through `onError`, and offer recovery via the render-prop `fallback`'s `reset` callback.",
|
|
4442
4480
|
],
|
|
4481
|
+
keywords: [],
|
|
4443
4482
|
uses: [],
|
|
4444
4483
|
usedBy: [],
|
|
4445
4484
|
},
|
|
@@ -4524,6 +4563,7 @@ export const docsManifest = {
|
|
|
4524
4563
|
'Always pass an `aria-label` (e.g. "Expand row") - it\'s icon-only, so without one screen readers announce an unlabelled button.',
|
|
4525
4564
|
"Drive the icon and `aria-expanded` with the `expanded` prop; set `expandedIcon`/`collapsedIcon` only to override the default Minus/Plus pair.",
|
|
4526
4565
|
],
|
|
4566
|
+
keywords: [],
|
|
4527
4567
|
uses: [],
|
|
4528
4568
|
usedBy: ["data-grid"],
|
|
4529
4569
|
},
|
|
@@ -4565,6 +4605,7 @@ export const docsManifest = {
|
|
|
4565
4605
|
"Set `collapsedHeight` in rem to a whole number of lines at the text's line height, so the cut lands between lines.",
|
|
4566
4606
|
"Reach for `Collapsible` when the hidden part is separate content behind a labelled trigger rather than the rest of one passage.",
|
|
4567
4607
|
],
|
|
4608
|
+
keywords: [],
|
|
4568
4609
|
uses: [],
|
|
4569
4610
|
usedBy: [],
|
|
4570
4611
|
},
|
|
@@ -4622,6 +4663,7 @@ export const docsManifest = {
|
|
|
4622
4663
|
"It's the shared engine behind `BorderBeam` and `Shine` - prefer those named components for their specific looks; drop to `FadeOverlay` directly only for a new overlay effect.",
|
|
4623
4664
|
"Needs `ReducedMotionProvider`; under reduced motion it renders only `children` (a static band would read louder than the animation), so the overlay doesn't appear.",
|
|
4624
4665
|
],
|
|
4666
|
+
keywords: [],
|
|
4625
4667
|
uses: [],
|
|
4626
4668
|
usedBy: ["border-beam", "shine"],
|
|
4627
4669
|
},
|
|
@@ -4707,6 +4749,7 @@ export const docsManifest = {
|
|
|
4707
4749
|
"Compose the documented parts (`FieldLabel`, `FieldContent`, `FieldError`, `FieldDescription`) around one control - the label's `htmlFor` and the control's `aria-describedby` are wired for you, so there are no ids to pass.",
|
|
4708
4750
|
'Use `orientation="responsive"` for a label-beside-control that collapses to stacked on mobile, rather than duplicating the field per breakpoint.',
|
|
4709
4751
|
],
|
|
4752
|
+
keywords: [],
|
|
4710
4753
|
uses: ["flex", "label"],
|
|
4711
4754
|
usedBy: ["input", "input-group", "settings-card", "textarea"],
|
|
4712
4755
|
anatomy: {
|
|
@@ -4761,7 +4804,7 @@ export const docsManifest = {
|
|
|
4761
4804
|
name: "as",
|
|
4762
4805
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
4763
4806
|
required: false,
|
|
4764
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
4807
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
4765
4808
|
},
|
|
4766
4809
|
{
|
|
4767
4810
|
name: "direction",
|
|
@@ -4831,6 +4874,7 @@ export const docsManifest = {
|
|
|
4831
4874
|
'`as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary, so `as="button"` is a type error (use `Button`).',
|
|
4832
4875
|
"Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
|
|
4833
4876
|
],
|
|
4877
|
+
keywords: [],
|
|
4834
4878
|
uses: [],
|
|
4835
4879
|
usedBy: [
|
|
4836
4880
|
"alert-dialog",
|
|
@@ -4969,6 +5013,7 @@ export const docsManifest = {
|
|
|
4969
5013
|
"Drive variant switches by changing `src` - that triggers the built-in crossfade + shimmer; don't unmount/remount `GalleryImage` per variant or you lose the transition.",
|
|
4970
5014
|
"Position `GalleryImage` inside a `relative` container with fixed dimensions - the surfaces are `absolute inset-0`, so an unsized parent collapses to zero height.",
|
|
4971
5015
|
],
|
|
5016
|
+
keywords: [],
|
|
4972
5017
|
uses: [],
|
|
4973
5018
|
usedBy: [],
|
|
4974
5019
|
},
|
|
@@ -4993,7 +5038,7 @@ export const docsManifest = {
|
|
|
4993
5038
|
name: "as",
|
|
4994
5039
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
4995
5040
|
required: false,
|
|
4996
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
5041
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
4997
5042
|
},
|
|
4998
5043
|
{
|
|
4999
5044
|
name: "columns",
|
|
@@ -5060,7 +5105,7 @@ export const docsManifest = {
|
|
|
5060
5105
|
name: "as",
|
|
5061
5106
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
5062
5107
|
required: false,
|
|
5063
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
5108
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Ref\nand event-handler types remain the default element\'s (HTMLDivElement).\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
5064
5109
|
},
|
|
5065
5110
|
{
|
|
5066
5111
|
name: "order",
|
|
@@ -5106,6 +5151,7 @@ export const docsManifest = {
|
|
|
5106
5151
|
'`as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary, so `as="button"` is a type error (use `Button`).',
|
|
5107
5152
|
"Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
|
|
5108
5153
|
],
|
|
5154
|
+
keywords: [],
|
|
5109
5155
|
uses: [],
|
|
5110
5156
|
usedBy: [
|
|
5111
5157
|
"alert",
|
|
@@ -5147,7 +5193,7 @@ export const docsManifest = {
|
|
|
5147
5193
|
name: "as",
|
|
5148
5194
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
5149
5195
|
required: false,
|
|
5150
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
5196
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
5151
5197
|
},
|
|
5152
5198
|
{
|
|
5153
5199
|
name: "gap",
|
|
@@ -5193,6 +5239,7 @@ export const docsManifest = {
|
|
|
5193
5239
|
'`as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary, so `as="button"` is a type error (use `Button`).',
|
|
5194
5240
|
"Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
|
|
5195
5241
|
],
|
|
5242
|
+
keywords: [],
|
|
5196
5243
|
uses: [],
|
|
5197
5244
|
usedBy: [],
|
|
5198
5245
|
},
|
|
@@ -5243,6 +5290,7 @@ export const docsManifest = {
|
|
|
5243
5290
|
"Set `level` (`h1`–`h6`) for the document outline and `size` for visual scale independently - don't pick a tag just to get a size; a small-looking heading can still be an `h2`.",
|
|
5244
5291
|
"Keep one `h1` per page and don't skip levels for styling; use `size` (responsive-capable) to make a lower-level heading look larger.",
|
|
5245
5292
|
],
|
|
5293
|
+
keywords: ["title", "headline"],
|
|
5246
5294
|
uses: [],
|
|
5247
5295
|
usedBy: [
|
|
5248
5296
|
"cookie-banner",
|
|
@@ -5355,6 +5403,7 @@ export const docsManifest = {
|
|
|
5355
5403
|
"State is parent-controlled: pass `hovered`/`active` (plus `onMouseEnter`/`onClick`) - the dot grows and the ring pulses only in response; it tracks nothing itself.",
|
|
5356
5404
|
"Always pass `label` - it's the button's `aria-label` and the hotspot's only accessible name; also mount `ReducedMotionProvider` so the pulse honours the OS motion setting.",
|
|
5357
5405
|
],
|
|
5406
|
+
keywords: [],
|
|
5358
5407
|
uses: ["spinner"],
|
|
5359
5408
|
usedBy: [],
|
|
5360
5409
|
},
|
|
@@ -5392,6 +5441,7 @@ export const docsManifest = {
|
|
|
5392
5441
|
"It opens on hover / focus only - never hide essential actions or content a touch / keyboard-only user can't otherwise reach behind it.",
|
|
5393
5442
|
"Tune the trigger's `delay`/`closeDelay` (ms) instead of adding your own timers; `HoverCardContent` portals to the body.",
|
|
5394
5443
|
],
|
|
5444
|
+
keywords: [],
|
|
5395
5445
|
uses: [],
|
|
5396
5446
|
usedBy: [],
|
|
5397
5447
|
},
|
|
@@ -5441,6 +5491,7 @@ export const docsManifest = {
|
|
|
5441
5491
|
"`Icon` is always `aria-hidden` + non-focusable - pair it with visible text or give the interactive parent an `aria-label`; never rely on it to name a control.",
|
|
5442
5492
|
'Size with the `size` token (`"sm"`,`"lg"`…), not `className="size-6"` - the scale maps to the shared `ComponentSize` steps other components align to.',
|
|
5443
5493
|
],
|
|
5494
|
+
keywords: [],
|
|
5444
5495
|
uses: [],
|
|
5445
5496
|
usedBy: [
|
|
5446
5497
|
"accordion",
|
|
@@ -5559,6 +5610,7 @@ export const docsManifest = {
|
|
|
5559
5610
|
"Set colour via `tone`, not a hex/`bg-*` className - `tone` carries the paired surface+foreground tokens, including the dark-mode variants.",
|
|
5560
5611
|
"Let `iconSize` default from the box `size`; override only when the glyph must break the built-in `BOX_TO_ICON_SIZE` ratio.",
|
|
5561
5612
|
],
|
|
5613
|
+
keywords: [],
|
|
5562
5614
|
uses: ["icon"],
|
|
5563
5615
|
usedBy: ["empty", "item"],
|
|
5564
5616
|
},
|
|
@@ -5609,6 +5661,7 @@ export const docsManifest = {
|
|
|
5609
5661
|
"Pass a Lucide component to `icon` (e.g. `HomeIcon`), not a rendered element `<HomeIcon />` - it is handed to the internal `Icon` for consistent sizing/stroke.",
|
|
5610
5662
|
"Use `IconCard` for compact icon-over-label option pickers (property type, category); for a content container with header/body reach for `Card`, and for a settings row use `SettingsCard`.",
|
|
5611
5663
|
],
|
|
5664
|
+
keywords: [],
|
|
5612
5665
|
uses: ["center", "icon"],
|
|
5613
5666
|
usedBy: [],
|
|
5614
5667
|
},
|
|
@@ -5678,6 +5731,7 @@ export const docsManifest = {
|
|
|
5678
5731
|
"Use it as the animated drop-in for `Icon`; for a plain static glyph stay on `Icon` and skip the extra `AnimatePresence`/motion cost.",
|
|
5679
5732
|
"Needs `ReducedMotionProvider` for the blur-crossfade to run and honour reduced motion; like `Icon` it renders `aria-hidden`, so name the control elsewhere.",
|
|
5680
5733
|
],
|
|
5734
|
+
keywords: [],
|
|
5681
5735
|
uses: ["icon"],
|
|
5682
5736
|
usedBy: ["thinking-loader"],
|
|
5683
5737
|
},
|
|
@@ -5752,6 +5806,7 @@ export const docsManifest = {
|
|
|
5752
5806
|
"Position this over the exact identified bounds inside a relative container; inflate the bounds outside this component when the source geometry is smaller than a comfortable pointer target.",
|
|
5753
5807
|
"Pair it with a real button or link. This component is deliberately pointer-transparent and carries no interaction semantics of its own.",
|
|
5754
5808
|
],
|
|
5809
|
+
keywords: [],
|
|
5755
5810
|
uses: [],
|
|
5756
5811
|
usedBy: [],
|
|
5757
5812
|
},
|
|
@@ -5819,6 +5874,7 @@ export const docsManifest = {
|
|
|
5819
5874
|
"Give every `Input` an associated label - inside a `Field` a `FieldLabel` targets it with no ids to wire; standalone, point a `Label`'s `htmlFor` at its `id`. A placeholder is not an accessible name.",
|
|
5820
5875
|
'`size` defaults to `"xl"` (48px); pass a responsive object like `{ base: "sm", md: "xl" }` rather than swapping components per breakpoint.',
|
|
5821
5876
|
],
|
|
5877
|
+
keywords: ["text field", "textbox", "text input"],
|
|
5822
5878
|
uses: ["field"],
|
|
5823
5879
|
usedBy: ["sidebar", "tag-selector"],
|
|
5824
5880
|
},
|
|
@@ -5915,6 +5971,7 @@ export const docsManifest = {
|
|
|
5915
5971
|
"Drive the selected look via the `selected` prop (it sets `data-selected` + the primary tint), not by appending your own active classes.",
|
|
5916
5972
|
"Use `render` to project the card styling onto a real interactive element (e.g. a `<label>` wrapping an input) when you need native selection behaviour.",
|
|
5917
5973
|
],
|
|
5974
|
+
keywords: [],
|
|
5918
5975
|
uses: ["icon"],
|
|
5919
5976
|
usedBy: ["checkbox-card", "radio-card"],
|
|
5920
5977
|
},
|
|
@@ -6199,6 +6256,7 @@ export const docsManifest = {
|
|
|
6199
6256
|
"Set `size`/`radius`/`disabled` once on `InputGroup`; children inherit them via context, so don't re-set them per child.",
|
|
6200
6257
|
"Inside a `Field` the group inherits invalid state and its `InputGroupInput`/`InputGroupTextarea` becomes the field's control (labelled, described, `aria-invalid`) - pass `hasError` only to force error styling and `aria-invalid` independently.",
|
|
6201
6258
|
],
|
|
6259
|
+
keywords: [],
|
|
6202
6260
|
uses: ["button", "field", "flex", "icon", "textarea"],
|
|
6203
6261
|
usedBy: ["country-select", "search-input"],
|
|
6204
6262
|
anatomy: {
|
|
@@ -6263,6 +6321,7 @@ export const docsManifest = {
|
|
|
6263
6321
|
'Characters are filtered by `validationType` (`"numeric"` by default; `"alpha"`, `"alphanumeric"` and `"none"` are also available) - pass `"alphanumeric"` for codes that contain letters.',
|
|
6264
6322
|
"Split slots into `InputOTPGroup`s with an `InputOTPSeparator` between them for visual grouping only - it does not change the underlying value.",
|
|
6265
6323
|
],
|
|
6324
|
+
keywords: [],
|
|
6266
6325
|
uses: ["flex", "icon"],
|
|
6267
6326
|
usedBy: [],
|
|
6268
6327
|
},
|
|
@@ -6431,6 +6490,7 @@ export const docsManifest = {
|
|
|
6431
6490
|
"Use `render` to make the whole item a link/button (e.g. `render={<Link href=\"…\" />}`); the item's children become the link's content.",
|
|
6432
6491
|
"Reach for `Item` for generic single rows; for files/documents use `DocumentList`, and for term/value metadata use `DescriptionList`.",
|
|
6433
6492
|
],
|
|
6493
|
+
keywords: [],
|
|
6434
6494
|
uses: ["flex", "icon-box", "separator", "stack"],
|
|
6435
6495
|
usedBy: [],
|
|
6436
6496
|
anatomy: {
|
|
@@ -6545,6 +6605,7 @@ export const docsManifest = {
|
|
|
6545
6605
|
"Wrap multi-key chords in `KbdGroup` and set `size` on the group - children inherit it via context, so you size the combo once.",
|
|
6546
6606
|
"It renders a semantic `<kbd>`; reserve it for keyboard keys/shortcuts, not as a generic small-label chip (that's `Badge`).",
|
|
6547
6607
|
],
|
|
6608
|
+
keywords: ["keyboard shortcut", "hotkey"],
|
|
6548
6609
|
uses: [],
|
|
6549
6610
|
usedBy: ["menu-item", "prompt-panel", "search-input", "sidebar"],
|
|
6550
6611
|
},
|
|
@@ -6565,6 +6626,7 @@ export const docsManifest = {
|
|
|
6565
6626
|
"Point `htmlFor` at the control's `id` so clicking the label focuses/toggles it; a `Label` with no association is just styled text.",
|
|
6566
6627
|
"For checkbox/radio rows and fields, prefer `CheckboxField`/`FieldLabel`/`RadioGroupItem`, which generate the `id`/`htmlFor` pairing for you.",
|
|
6567
6628
|
],
|
|
6629
|
+
keywords: [],
|
|
6568
6630
|
uses: [],
|
|
6569
6631
|
usedBy: [
|
|
6570
6632
|
"checkbox-field",
|
|
@@ -6689,6 +6751,7 @@ export const docsManifest = {
|
|
|
6689
6751
|
"`search` may reject; the dropdown then shows no suggestions. Return `null` from `resolve` to ignore a selection.",
|
|
6690
6752
|
'Pick `mode="city"` vs `"address"` to scope the geocoding; drive it controlled via the `Location` `value` + `onChange` (which also fires on clear).',
|
|
6691
6753
|
],
|
|
6754
|
+
keywords: [],
|
|
6692
6755
|
uses: ["button", "icon", "menu-item"],
|
|
6693
6756
|
usedBy: [],
|
|
6694
6757
|
},
|
|
@@ -6732,6 +6795,7 @@ export const docsManifest = {
|
|
|
6732
6795
|
'Don\'t add your own `aria-label`/`role` - `Logo` already ships `role="img"` + "Material Bank" (change the name with `label`); wrap it in a link only when you need a click target.',
|
|
6733
6796
|
"To use your own brand, pass `mark` as SVG shapes in a 48x48 viewBox filled with `currentColor`, and a matching `label` - don't wrap or overlay the default mark.",
|
|
6734
6797
|
],
|
|
6798
|
+
keywords: [],
|
|
6735
6799
|
uses: [],
|
|
6736
6800
|
usedBy: ["logotype", "mobile-navigation"],
|
|
6737
6801
|
},
|
|
@@ -6768,6 +6832,7 @@ export const docsManifest = {
|
|
|
6768
6832
|
'Don\'t add your own `aria-label`/`role` - `Logotype` already ships `role="img"` + "Material Bank"; wrap it in a link only when you need a click target, and set `label=""` when the name is already visible beside it.',
|
|
6769
6833
|
"Use `Logo` where only the mark fits, such as an app icon or a collapsed sidebar; use `Logotype` where the name should be read.",
|
|
6770
6834
|
],
|
|
6835
|
+
keywords: [],
|
|
6771
6836
|
uses: ["logo"],
|
|
6772
6837
|
usedBy: [],
|
|
6773
6838
|
},
|
|
@@ -6819,6 +6884,7 @@ export const docsManifest = {
|
|
|
6819
6884
|
"It only scrolls when the text overflows; short text that fits\nstays a static clipped label with no duplicate copy and no animation.",
|
|
6820
6885
|
"Honours `prefers-reduced-motion` automatically via the shared\n`.animate-marquee` utility, which disables the animation.",
|
|
6821
6886
|
],
|
|
6887
|
+
keywords: [],
|
|
6822
6888
|
uses: ["flex"],
|
|
6823
6889
|
usedBy: ["product-card"],
|
|
6824
6890
|
},
|
|
@@ -6837,7 +6903,7 @@ export const docsManifest = {
|
|
|
6837
6903
|
name: "as",
|
|
6838
6904
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
6839
6905
|
required: false,
|
|
6840
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
6906
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Ref\nand event-handler types remain the default element\'s.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
6841
6907
|
},
|
|
6842
6908
|
{
|
|
6843
6909
|
name: "edge",
|
|
@@ -6892,6 +6958,7 @@ export const docsManifest = {
|
|
|
6892
6958
|
"Set `edge` to frame photography with an inset hairline that stays above the media; do not fake it with a border or an inset shadow on the frame, which the media hides.",
|
|
6893
6959
|
"Reach for `raised` only when the frame sits on the same fill as its surface; in a dense row the edge already separates it.",
|
|
6894
6960
|
],
|
|
6961
|
+
keywords: [],
|
|
6895
6962
|
uses: [],
|
|
6896
6963
|
usedBy: ["editorial-card", "product-card"],
|
|
6897
6964
|
},
|
|
@@ -7013,7 +7080,7 @@ export const docsManifest = {
|
|
|
7013
7080
|
name: "dot",
|
|
7014
7081
|
type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info" | undefined',
|
|
7015
7082
|
required: false,
|
|
7016
|
-
description: "Dot indicator at the start, centred in the icon space (takes precedence over icon): `true` for a neutral dot, or a
|
|
7083
|
+
description: "Dot indicator at the start, centred in the icon space (takes precedence over icon): `true` for a neutral dot, or a `Tone` to tint it.",
|
|
7017
7084
|
},
|
|
7018
7085
|
{
|
|
7019
7086
|
name: "icon",
|
|
@@ -7080,6 +7147,7 @@ export const docsManifest = {
|
|
|
7080
7147
|
"`MenuItem` is the standalone base for custom menus (popovers, sheets); inside a `DropdownMenu` / `ContextMenu` use that family's `*Item` for built-in roving focus.",
|
|
7081
7148
|
"Pass glyphs via the `icon` / `dot` / `avatar` / `kbd` / `suffixIcon` props, not as children - with `render` they render around `children`, which is the label only.",
|
|
7082
7149
|
],
|
|
7150
|
+
keywords: [],
|
|
7083
7151
|
uses: ["center", "dot", "icon", "kbd", "radio", "spinner"],
|
|
7084
7152
|
usedBy: [
|
|
7085
7153
|
"context-menu",
|
|
@@ -7211,7 +7279,7 @@ export const docsManifest = {
|
|
|
7211
7279
|
name: "dot",
|
|
7212
7280
|
type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info"',
|
|
7213
7281
|
required: false,
|
|
7214
|
-
description: "Dot indicator at the start (takes precedence over icon): `true` for a neutral dot, or a
|
|
7282
|
+
description: "Dot indicator at the start (takes precedence over icon): `true` for a neutral dot, or a `Tone` to tint it.",
|
|
7215
7283
|
},
|
|
7216
7284
|
{
|
|
7217
7285
|
name: "icon",
|
|
@@ -7404,6 +7472,7 @@ export const docsManifest = {
|
|
|
7404
7472
|
"Reserve `Menubar` for a persistent desktop app menu bar; a single click menu is `DropdownMenu`, a right-click menu is `ContextMenu`.",
|
|
7405
7473
|
"Give each top-level label its own `MenubarMenu`, and control a menu's open state on that `MenubarMenu` (`open`/`onOpenChange`) rather than on the bar.",
|
|
7406
7474
|
],
|
|
7475
|
+
keywords: [],
|
|
7407
7476
|
uses: ["icon", "menu-item"],
|
|
7408
7477
|
usedBy: [],
|
|
7409
7478
|
anatomy: {
|
|
@@ -7579,6 +7648,7 @@ export const docsManifest = {
|
|
|
7579
7648
|
'Enable the "I\'m not sure" escape hatch with `showUnsure` (off by default); `"unsure"`/`"beyond"` only ever arrive when their toggles are shown.',
|
|
7580
7649
|
'Bound the range with `yearsAhead` (from the current year); it auto-advances and commits once both month and year are chosen, so don\'t add your own "next" control.',
|
|
7581
7650
|
],
|
|
7651
|
+
keywords: ["date picker", "date", "month", "year"],
|
|
7582
7652
|
uses: ["flex", "grid", "text", "toggle"],
|
|
7583
7653
|
usedBy: [],
|
|
7584
7654
|
},
|
|
@@ -7717,6 +7787,7 @@ export const docsManifest = {
|
|
|
7717
7787
|
"Pass the trigger's `borderRadius` / `boxShadow` via `style` (not `className`) on `MorphDialogTrigger` so Motion can correct their distortion during the morph.",
|
|
7718
7788
|
"Render a `MorphDialogTitle` (use `visuallyHidden` if needed) for the accessible name; mount `ReducedMotionProvider` at the app root since it animates via `m.*`.",
|
|
7719
7789
|
],
|
|
7790
|
+
keywords: [],
|
|
7720
7791
|
uses: [],
|
|
7721
7792
|
usedBy: [],
|
|
7722
7793
|
},
|
|
@@ -7744,6 +7815,7 @@ export const docsManifest = {
|
|
|
7744
7815
|
"It's required app-side, not inside",
|
|
7745
7816
|
'Rely on it (not per-component code) for reduced motion: its `MotionConfig reducedMotion="user"` honours the OS setting for all descendants.',
|
|
7746
7817
|
],
|
|
7818
|
+
keywords: [],
|
|
7747
7819
|
uses: [],
|
|
7748
7820
|
usedBy: [],
|
|
7749
7821
|
},
|
|
@@ -7775,6 +7847,7 @@ export const docsManifest = {
|
|
|
7775
7847
|
"Reach for `NativeSelect` when the native mobile picker and zero-JS behaviour matter; use `Select` when you need custom-rendered option content or styling.",
|
|
7776
7848
|
"It has no built-in label - associate a `Label` via `htmlFor`/`id` for an accessible name.",
|
|
7777
7849
|
],
|
|
7850
|
+
keywords: ["dropdown", "picker"],
|
|
7778
7851
|
uses: ["icon"],
|
|
7779
7852
|
usedBy: [],
|
|
7780
7853
|
},
|
|
@@ -7912,6 +7985,7 @@ export const docsManifest = {
|
|
|
7912
7985
|
"Reserve `NavigationMenu` for site/section navigation with panels; a click actions menu is `DropdownMenu`, a desktop app menu bar is `Menubar`, and simple in-page routed tabs are `TabNavigation`.",
|
|
7913
7986
|
"Keep it uncontrolled unless you must drive it; leave `viewport` on unless you render your own `NavigationMenuViewport` (e.g. to place a `NavigationMenuIndicator` in it).",
|
|
7914
7987
|
],
|
|
7988
|
+
keywords: [],
|
|
7915
7989
|
uses: ["icon"],
|
|
7916
7990
|
usedBy: [],
|
|
7917
7991
|
anatomy: {
|
|
@@ -8035,6 +8109,7 @@ export const docsManifest = {
|
|
|
8035
8109
|
"It is data-source agnostic (not coupled to react-table); for grid paging use the DataGrid's own pagination parts instead.",
|
|
8036
8110
|
"Signal an in-flight jump with `loadingPage={n}` so only that button spins; leave a11y labels to the component (each control is pre-labelled).",
|
|
8037
8111
|
],
|
|
8112
|
+
keywords: [],
|
|
8038
8113
|
uses: ["button", "center", "flex"],
|
|
8039
8114
|
usedBy: [],
|
|
8040
8115
|
},
|
|
@@ -8124,6 +8199,7 @@ export const docsManifest = {
|
|
|
8124
8199
|
'Set `defaultCountry` (ISO alpha-2, default `"US"`) for the initial calling code; the integrated country selector then lets users switch.',
|
|
8125
8200
|
"Validate the emitted E.164 value (e.g. via react-phone-number-input's `isValidPhoneNumber`) rather than regex-matching the display text.",
|
|
8126
8201
|
],
|
|
8202
|
+
keywords: [],
|
|
8127
8203
|
uses: ["country-select"],
|
|
8128
8204
|
usedBy: [],
|
|
8129
8205
|
},
|
|
@@ -8242,6 +8318,7 @@ export const docsManifest = {
|
|
|
8242
8318
|
"Don't reach for `Pill` in app code - it's the shared styling base; use `Badge` for display-only labels/counts and `Tag` for interactive (clickable/dismissible) chips.",
|
|
8243
8319
|
"`Pill` is presentation-only and has no button semantics or dismiss/click handling - those live on `Tag`; adding `onClick` here yields a non-accessible pseudo-button.",
|
|
8244
8320
|
],
|
|
8321
|
+
keywords: ["chip"],
|
|
8245
8322
|
uses: [],
|
|
8246
8323
|
usedBy: ["badge", "tag", "tag-selector"],
|
|
8247
8324
|
},
|
|
@@ -8295,6 +8372,7 @@ export const docsManifest = {
|
|
|
8295
8372
|
bestPractices: [
|
|
8296
8373
|
"Use for inline chat / agent waits. Prefer ThinkingLoader when you have narrated steps; ThinkingOrb for avatar-scale state; DotMatrixLoader for prompt-bar intent glyphs.",
|
|
8297
8374
|
],
|
|
8375
|
+
keywords: [],
|
|
8298
8376
|
uses: ["grid", "text"],
|
|
8299
8377
|
usedBy: [],
|
|
8300
8378
|
},
|
|
@@ -8374,6 +8452,7 @@ export const docsManifest = {
|
|
|
8374
8452
|
"It's non-modal by default (`modal={false}`) so the page stays interactive - pass `modal` only when you must trap focus and block the background.",
|
|
8375
8453
|
"`PopoverContent` portals to the body; anchor to a non-trigger element with its `anchor` prop.",
|
|
8376
8454
|
],
|
|
8455
|
+
keywords: ["popup", "flyout", "popout"],
|
|
8377
8456
|
uses: [],
|
|
8378
8457
|
usedBy: ["color-palette", "mega-menu", "product-card", "tag-selector"],
|
|
8379
8458
|
anatomy: {
|
|
@@ -8479,6 +8558,7 @@ export const docsManifest = {
|
|
|
8479
8558
|
"For a ring instead of a bar use `ProgressCircle` - it needs an explicit `label` for its native `<progress>` accessible name.",
|
|
8480
8559
|
"Mount `ReducedMotionProvider` at the app root - the indeterminate bar slides via `m.*` (LazyMotion).",
|
|
8481
8560
|
],
|
|
8561
|
+
keywords: [],
|
|
8482
8562
|
uses: ["center"],
|
|
8483
8563
|
usedBy: ["file-upload"],
|
|
8484
8564
|
},
|
|
@@ -8531,6 +8611,7 @@ export const docsManifest = {
|
|
|
8531
8611
|
"Pass `onDotClick` only when steps are navigable - it turns each dot into a focusable button; `labels` surface as hover tooltips.",
|
|
8532
8612
|
"Mount `ReducedMotionProvider` at the app root - the dots animate via `m.*` (LazyMotion).",
|
|
8533
8613
|
],
|
|
8614
|
+
keywords: [],
|
|
8534
8615
|
uses: ["flex", "tooltip"],
|
|
8535
8616
|
usedBy: [],
|
|
8536
8617
|
},
|
|
@@ -8614,6 +8695,7 @@ export const docsManifest = {
|
|
|
8614
8695
|
"It's controlled - pass the current `value` and update it in `onIncrement`/`onDecrement`, which fire once per step for clicks, arrow keys and each repeat of a held button. Typing a number is not supported.",
|
|
8615
8696
|
"Tab focuses the quantity itself (the stepper buttons are skipped, as in any number field), announced by its `label`. In a list of lines, pass a `label` naming the item so each field is told apart.",
|
|
8616
8697
|
],
|
|
8698
|
+
keywords: ["counter", "number input", "increment", "spinbutton"],
|
|
8617
8699
|
uses: ["button", "button-group"],
|
|
8618
8700
|
usedBy: [],
|
|
8619
8701
|
},
|
|
@@ -8653,6 +8735,7 @@ export const docsManifest = {
|
|
|
8653
8735
|
"Give every `Radio` a unique `value` and pair it with a `Label` - or use `RadioGroupItem`, which bundles the radio and its wired label.",
|
|
8654
8736
|
"For selectable-card options rather than plain dots, use `RadioCardGroup`.",
|
|
8655
8737
|
],
|
|
8738
|
+
keywords: [],
|
|
8656
8739
|
uses: [],
|
|
8657
8740
|
usedBy: ["menu-item", "radio-card", "radio-group"],
|
|
8658
8741
|
},
|
|
@@ -8794,6 +8877,7 @@ export const docsManifest = {
|
|
|
8794
8877
|
'Drive selection with `value`/`onValueChange` (controlled) or `defaultValue` (uncontrolled); use `layout="inline"` for a wrapping row instead of the stacked grid.',
|
|
8795
8878
|
"Label the group (e.g. `aria-label` or a `Field` with a `FieldLabel`) - Tab lands on the selected card and the arrow keys move between cards.",
|
|
8796
8879
|
],
|
|
8880
|
+
keywords: [],
|
|
8797
8881
|
uses: ["center", "flex", "input-card", "radio"],
|
|
8798
8882
|
usedBy: ["product-specifications-selector"],
|
|
8799
8883
|
},
|
|
@@ -8845,6 +8929,7 @@ export const docsManifest = {
|
|
|
8845
8929
|
"Drive selection with `value` + `onValueChange` (controlled) or `defaultValue` (uncontrolled) - don't set both on the same group.",
|
|
8846
8930
|
"Prefer `RadioGroupItem` (radio + wired `Label`) over hand-pairing `Radio` and `Label`; it auto-generates the `id`/`htmlFor` link.",
|
|
8847
8931
|
],
|
|
8932
|
+
keywords: [],
|
|
8848
8933
|
uses: ["flex", "grid", "label", "radio", "text"],
|
|
8849
8934
|
usedBy: [],
|
|
8850
8935
|
},
|
|
@@ -8891,6 +8976,7 @@ export const docsManifest = {
|
|
|
8891
8976
|
"Render several in a vertical list and give it an accessible grouping (e.g. `aria-live` region) so screen readers announce requirements flipping to met.",
|
|
8892
8977
|
"Reach for `RequirementItem` for pass/fail checklist rows; for a generic list row use `Item`, and for form field errors use the field's own error message.",
|
|
8893
8978
|
],
|
|
8979
|
+
keywords: [],
|
|
8894
8980
|
uses: ["flex", "icon"],
|
|
8895
8981
|
usedBy: [],
|
|
8896
8982
|
},
|
|
@@ -8957,6 +9043,7 @@ export const docsManifest = {
|
|
|
8957
9043
|
"Compose `ResizablePanel` children separated by `ResizableHandle` - a handle between panels is what makes them draggable.",
|
|
8958
9044
|
"Set the axis with `direction` (`horizontal`/`vertical`); it maps to the library's `orientation`, which is intentionally not exposed.",
|
|
8959
9045
|
],
|
|
9046
|
+
keywords: [],
|
|
8960
9047
|
uses: ["center", "icon"],
|
|
8961
9048
|
usedBy: [],
|
|
8962
9049
|
anatomy: {
|
|
@@ -9027,6 +9114,7 @@ export const docsManifest = {
|
|
|
9027
9114
|
"`Scrim` is a decorative gradient for text-over-image legibility, not a modal backdrop - dialog / sheet dimming is built into those components.",
|
|
9028
9115
|
"Place it inside a `position: relative` ancestor; it renders `aria-hidden` and ignores pointer events, so it never blocks the content beneath.",
|
|
9029
9116
|
],
|
|
9117
|
+
keywords: [],
|
|
9030
9118
|
uses: [],
|
|
9031
9119
|
usedBy: [],
|
|
9032
9120
|
},
|
|
@@ -9050,7 +9138,7 @@ export const docsManifest = {
|
|
|
9050
9138
|
name: "as",
|
|
9051
9139
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
9052
9140
|
required: false,
|
|
9053
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
9141
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Ref\nand event-handler types remain the default element\'s.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
9054
9142
|
},
|
|
9055
9143
|
{
|
|
9056
9144
|
name: "allowOverflow",
|
|
@@ -9095,6 +9183,7 @@ export const docsManifest = {
|
|
|
9095
9183
|
"`ScrollArea` renders its own `ScrollBar`; reach for `ScrollBar` directly only when hand-composing a Base UI scroll area.",
|
|
9096
9184
|
"Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
|
|
9097
9185
|
],
|
|
9186
|
+
keywords: [],
|
|
9098
9187
|
uses: [],
|
|
9099
9188
|
usedBy: [
|
|
9100
9189
|
"data-grid",
|
|
@@ -9154,6 +9243,7 @@ export const docsManifest = {
|
|
|
9154
9243
|
"Match `theme` to the container's actual background (`card`/`popover`/…) - the scrim fades to that colour, so a mismatch leaves a visible seam.",
|
|
9155
9244
|
'Set `position` (`start`/`end`) and `orientation` to the edge with hidden content - `end`+`vertical` is the common "more below" bottom fade.',
|
|
9156
9245
|
],
|
|
9246
|
+
keywords: [],
|
|
9157
9247
|
uses: [],
|
|
9158
9248
|
usedBy: ["scroll-frame", "segmented-control", "tag-selector"],
|
|
9159
9249
|
},
|
|
@@ -9268,6 +9358,7 @@ export const docsManifest = {
|
|
|
9268
9358
|
'Match `fadeTheme` to the surface behind the frame (`card` inside a Card). Over an image or a blur, use `fadeMode="mask"` instead.',
|
|
9269
9359
|
"For a horizontal strip used with a mouse, add `dragScroll` and `controls`; both stand aside on touch screens, and each control hides at the end it points to.",
|
|
9270
9360
|
],
|
|
9361
|
+
keywords: [],
|
|
9271
9362
|
uses: ["button", "scroll-area", "scroll-fade"],
|
|
9272
9363
|
usedBy: ["page-toolbar"],
|
|
9273
9364
|
},
|
|
@@ -9371,6 +9462,7 @@ export const docsManifest = {
|
|
|
9371
9462
|
"Pass cycling placeholder ideas via `suggestions` (which suppresses the static `placeholder`); `shortcutHint` shows only while empty and is swapped for the clear button once the field has a value.",
|
|
9372
9463
|
'Pill (`radius="full"`) at the 48px `xl` default is the search signature - so leave both defaults alone in standard search/filter placements; pass `size` explicitly for compact embedded contexts (popovers, table headers).',
|
|
9373
9464
|
],
|
|
9465
|
+
keywords: [],
|
|
9374
9466
|
uses: ["flex", "grid", "input-group", "kbd"],
|
|
9375
9467
|
usedBy: [],
|
|
9376
9468
|
},
|
|
@@ -9389,7 +9481,7 @@ export const docsManifest = {
|
|
|
9389
9481
|
name: "as",
|
|
9390
9482
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
9391
9483
|
required: false,
|
|
9392
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
9484
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
9393
9485
|
},
|
|
9394
9486
|
{
|
|
9395
9487
|
name: "inset",
|
|
@@ -9427,6 +9519,7 @@ export const docsManifest = {
|
|
|
9427
9519
|
"`Section` is full-width (padding only, no max-width) - nest a `Container` inside when content should also be centred; use `Container` alone when you just need the width cap.",
|
|
9428
9520
|
"Tune vertical rhythm with `space` (its `py`, default `base`); `as`/`render` are mutually exclusive with `render` winning (dev-warned).",
|
|
9429
9521
|
],
|
|
9522
|
+
keywords: [],
|
|
9430
9523
|
uses: [],
|
|
9431
9524
|
usedBy: [],
|
|
9432
9525
|
},
|
|
@@ -9435,7 +9528,7 @@ export const docsManifest = {
|
|
|
9435
9528
|
module: "components/segmented-control",
|
|
9436
9529
|
title: "SegmentedControl",
|
|
9437
9530
|
category: "forms",
|
|
9438
|
-
description: "A single-select, always-one-selected control that switches between a small\nset of visible options - a view or mode switcher rendered as a pill of\nsegments. Built on Base UI ToggleGroup (single-select) but kept permanently\nselected: re-clicking the active segment never clears it.\n\nCompose it from
|
|
9531
|
+
description: "A single-select, always-one-selected control that switches between a small\nset of visible options - a view or mode switcher rendered as a pill of\nsegments. Built on Base UI ToggleGroup (single-select) but kept permanently\nselected: re-clicking the active segment never clears it.\n\nCompose it from `SegmentedControlItem`s; shared `size` / `fullWidth` /\nactive state flow to them through context. Controlled via `value`, or\nuncontrolled via `defaultValue`. Items scroll horizontally with a trailing\nfade hint when they overflow.",
|
|
9439
9532
|
exports: [
|
|
9440
9533
|
{
|
|
9441
9534
|
name: "SegmentedControl",
|
|
@@ -9534,6 +9627,7 @@ export const docsManifest = {
|
|
|
9534
9627
|
"Switching visible content panels is Tabs; navigating URLs is TabNavigation - SegmentedControl is an input that selects a value or mode.",
|
|
9535
9628
|
"Icon-only items must carry an `aria-label`.",
|
|
9536
9629
|
],
|
|
9630
|
+
keywords: [],
|
|
9537
9631
|
uses: ["dot", "flex", "icon", "scroll-area", "scroll-fade"],
|
|
9538
9632
|
usedBy: ["color-palette"],
|
|
9539
9633
|
anatomy: {
|
|
@@ -9720,6 +9814,7 @@ export const docsManifest = {
|
|
|
9720
9814
|
"Drive it with `value` + `onValueChange` (controlled) or `defaultValue` (uncontrolled), and give it an accessible name via the trigger (`Field`/`Label`).",
|
|
9721
9815
|
"Pass `items` (a value-to-label map or `{ value, label }[]`) so the trigger shows the selected label even before the popup has mounted.",
|
|
9722
9816
|
],
|
|
9817
|
+
keywords: ["dropdown", "picker"],
|
|
9723
9818
|
uses: ["button", "center", "icon", "menu-item"],
|
|
9724
9819
|
usedBy: ["data-grid-pagination"],
|
|
9725
9820
|
anatomy: {
|
|
@@ -9797,6 +9892,7 @@ export const docsManifest = {
|
|
|
9797
9892
|
"It is announced as a separator by default - pass `aria-hidden` when the rule is purely decorative.",
|
|
9798
9893
|
'For an inline rule set `orientation="vertical"` and give it an explicit height (e.g. `className="h-6"`) - a vertical separator has no intrinsic length.',
|
|
9799
9894
|
],
|
|
9895
|
+
keywords: ["divider", "rule", "hr"],
|
|
9800
9896
|
uses: [],
|
|
9801
9897
|
usedBy: [
|
|
9802
9898
|
"button-group",
|
|
@@ -9906,6 +10002,7 @@ export const docsManifest = {
|
|
|
9906
10002
|
"Use `Sheet` for a simple edge panel holding a focused form / settings; a drag-to-dismiss bottom sheet is a `Drawer`, and nested panels are a `Sidepanel`.",
|
|
9907
10003
|
"Set the entry edge via `SheetContent` `side`; always render a `SheetTitle` (wrap in `sr-only` if hidden) so the panel is announced.",
|
|
9908
10004
|
],
|
|
10005
|
+
keywords: ["drawer", "side sheet", "slide-over"],
|
|
9909
10006
|
uses: ["button", "flex"],
|
|
9910
10007
|
usedBy: ["sidebar"],
|
|
9911
10008
|
anatomy: {
|
|
@@ -10038,6 +10135,7 @@ export const docsManifest = {
|
|
|
10038
10135
|
'`variant="metallic"` is built for dark surfaces only - on a light background the chrome ramp loses contrast. Its own `duration` and `repeatDelay` defaults apply only when you pass neither.',
|
|
10039
10136
|
"To sweep several lines in step, pass them one shared `progress` motion value (0-100) and drive it yourself; a Shimmer given `progress` never animates on its own.",
|
|
10040
10137
|
],
|
|
10138
|
+
keywords: [],
|
|
10041
10139
|
uses: [],
|
|
10042
10140
|
usedBy: ["thinking-loader"],
|
|
10043
10141
|
},
|
|
@@ -10108,6 +10206,7 @@ export const docsManifest = {
|
|
|
10108
10206
|
"Either pass `children` (Shine wraps them in a relative box) or render it bare inside an existing `position: relative` parent - otherwise the sweep has nothing to overlay.",
|
|
10109
10207
|
"Needs `ReducedMotionProvider`; under reduced motion it renders nothing (a static band would look like a permanent artefact), so don't rely on it as persistent decoration.",
|
|
10110
10208
|
],
|
|
10209
|
+
keywords: [],
|
|
10111
10210
|
uses: ["fade-overlay"],
|
|
10112
10211
|
usedBy: [],
|
|
10113
10212
|
},
|
|
@@ -10416,6 +10515,7 @@ export const docsManifest = {
|
|
|
10416
10515
|
"Reach for `Sidepanel` when you need nested sub-panels or a non-modal panel (`modal={false}`) that leaves the page interactive; a single focused edge panel is a `Sheet`.",
|
|
10417
10516
|
"Compose nested panels with `SidepanelNestedRoot`, and always render a `SidepanelTitle` for the accessible name.",
|
|
10418
10517
|
],
|
|
10518
|
+
keywords: [],
|
|
10419
10519
|
uses: ["button", "flex", "stack"],
|
|
10420
10520
|
usedBy: [],
|
|
10421
10521
|
anatomy: {
|
|
@@ -10490,7 +10590,7 @@ export const docsManifest = {
|
|
|
10490
10590
|
name: "as",
|
|
10491
10591
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
10492
10592
|
required: false,
|
|
10493
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
10593
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
10494
10594
|
},
|
|
10495
10595
|
{
|
|
10496
10596
|
name: "cols",
|
|
@@ -10545,6 +10645,7 @@ export const docsManifest = {
|
|
|
10545
10645
|
'`as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary, so `as="button"` is a type error (use `Button`).',
|
|
10546
10646
|
"Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
|
|
10547
10647
|
],
|
|
10648
|
+
keywords: [],
|
|
10548
10649
|
uses: [],
|
|
10549
10650
|
usedBy: [],
|
|
10550
10651
|
},
|
|
@@ -10608,6 +10709,7 @@ export const docsManifest = {
|
|
|
10608
10709
|
"Prefer `Skeleton` over a spinner for content areas - a layout-stable placeholder that mirrors the final shape avoids reflow when data lands.",
|
|
10609
10710
|
'Size it with `className` (`h-*` / `w-*`); use `variant="light"` on white / `bg-background` surfaces where the default grey is too dark.',
|
|
10610
10711
|
],
|
|
10712
|
+
keywords: [],
|
|
10611
10713
|
uses: ["stack"],
|
|
10612
10714
|
usedBy: ["data-grid-pagination", "product-card", "sidebar"],
|
|
10613
10715
|
},
|
|
@@ -10638,7 +10740,7 @@ export const docsManifest = {
|
|
|
10638
10740
|
name: "onDraggingChange",
|
|
10639
10741
|
type: "(dragging: boolean) => void",
|
|
10640
10742
|
required: false,
|
|
10641
|
-
description: "Told when a drag starts and ends.\n\nA consumer usually has something else that should behave differently\nunder the finger - a preview that should stop animating each step, a\nreadout that should stop settling - and the state is already tracked here\nfor
|
|
10743
|
+
description: "Told when a drag starts and ends.\n\nA consumer usually has something else that should behave differently\nunder the finger - a preview that should stop animating each step, a\nreadout that should stop settling - and the state is already tracked here\nfor `travelToValue`.",
|
|
10642
10744
|
},
|
|
10643
10745
|
{
|
|
10644
10746
|
name: "variant",
|
|
@@ -10688,6 +10790,7 @@ export const docsManifest = {
|
|
|
10688
10790
|
'On `variant="channel"`, give the channel its colour with `trackBackground` and keep the thumb legible against it with `getThumbColor`; the app owns the colour maths, the slider only paints the result.',
|
|
10689
10791
|
"Use `labelStart`/`labelEnd` for visible end captions and `getValueText` for what a screen reader hears; the captions are hidden from assistive technology.\n\nChannel affordances adapted from",
|
|
10690
10792
|
],
|
|
10793
|
+
keywords: [],
|
|
10691
10794
|
uses: ["flex", "text"],
|
|
10692
10795
|
usedBy: [],
|
|
10693
10796
|
},
|
|
@@ -10744,6 +10847,7 @@ export const docsManifest = {
|
|
|
10744
10847
|
'The mark paints with `currentColor`, so colour it with a text-colour class on the icon or a parent (`className="text-muted-foreground"`), not a brand fill.',
|
|
10745
10848
|
'Size with the `size` token (`"sm"`, `"lg"`…), not `className="size-6"`; it shares the `Icon` scale so a mark lines up with the icons around it.',
|
|
10746
10849
|
],
|
|
10850
|
+
keywords: [],
|
|
10747
10851
|
uses: ["icon"],
|
|
10748
10852
|
usedBy: ["site-footer"],
|
|
10749
10853
|
},
|
|
@@ -10787,6 +10891,7 @@ export const docsManifest = {
|
|
|
10787
10891
|
bestPractices: [
|
|
10788
10892
|
"Reach for `Space` only for a fixed one-off gap between siblings; consistent spacing across many children belongs on a `Stack`/`Flex`/`Group` `gap` instead.",
|
|
10789
10893
|
],
|
|
10894
|
+
keywords: [],
|
|
10790
10895
|
uses: [],
|
|
10791
10896
|
usedBy: [],
|
|
10792
10897
|
},
|
|
@@ -10812,6 +10917,7 @@ export const docsManifest = {
|
|
|
10812
10917
|
"Use `Spinner` for small inline / action loading (inside a `Button`, next to text); a blocking full region is `LoadingState`, a layout placeholder is `Skeleton`.",
|
|
10813
10918
|
"A bare `Spinner` carries no accessible name - wrap it in a labelled live region (e.g. `LoadingState`) when it's the sole loading signal.",
|
|
10814
10919
|
],
|
|
10920
|
+
keywords: ["loader", "loading", "activity indicator"],
|
|
10815
10921
|
uses: [],
|
|
10816
10922
|
usedBy: [
|
|
10817
10923
|
"badge",
|
|
@@ -10851,7 +10957,7 @@ export const docsManifest = {
|
|
|
10851
10957
|
name: "as",
|
|
10852
10958
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
10853
10959
|
required: false,
|
|
10854
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
10960
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
10855
10961
|
},
|
|
10856
10962
|
{
|
|
10857
10963
|
name: "align",
|
|
@@ -10898,7 +11004,7 @@ export const docsManifest = {
|
|
|
10898
11004
|
name: "as",
|
|
10899
11005
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
10900
11006
|
required: false,
|
|
10901
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
11007
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
10902
11008
|
},
|
|
10903
11009
|
{
|
|
10904
11010
|
name: "direction",
|
|
@@ -10969,7 +11075,7 @@ export const docsManifest = {
|
|
|
10969
11075
|
name: "as",
|
|
10970
11076
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
10971
11077
|
required: false,
|
|
10972
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
11078
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
10973
11079
|
},
|
|
10974
11080
|
{
|
|
10975
11081
|
name: "align",
|
|
@@ -11007,6 +11113,7 @@ export const docsManifest = {
|
|
|
11007
11113
|
'`as` and `render` are mutually exclusive (`render` wins, dev-warned); `as` draws from the closed layout vocabulary, so `as="button"` is a type error (use `Button`).',
|
|
11008
11114
|
"Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
|
|
11009
11115
|
],
|
|
11116
|
+
keywords: [],
|
|
11010
11117
|
uses: [],
|
|
11011
11118
|
usedBy: [
|
|
11012
11119
|
"empty",
|
|
@@ -11079,6 +11186,7 @@ export const docsManifest = {
|
|
|
11079
11186
|
"Tune rhythm with `stagger` (gap between items) and `delay` (lead-in) on the parent, rather than hand-setting per-child transition delays.",
|
|
11080
11187
|
"Needs `ReducedMotionProvider` in the tree so the orchestrated entrance both runs and honours the reduced-motion setting.",
|
|
11081
11188
|
],
|
|
11189
|
+
keywords: [],
|
|
11082
11190
|
uses: [],
|
|
11083
11191
|
usedBy: [],
|
|
11084
11192
|
},
|
|
@@ -11189,6 +11297,7 @@ export const docsManifest = {
|
|
|
11189
11297
|
"Give each step a `StepperItem` child in order - progress is derived from child index, so conditionally rendering steps shifts the fill.",
|
|
11190
11298
|
"Control completion via `value`/`onValueChange` (or uncontrolled `defaultValue`); the fill reaches only the last *completed* step, not the current one.",
|
|
11191
11299
|
],
|
|
11300
|
+
keywords: ["wizard", "steps", "multi-step"],
|
|
11192
11301
|
uses: ["icon"],
|
|
11193
11302
|
usedBy: [],
|
|
11194
11303
|
},
|
|
@@ -11283,6 +11392,7 @@ export const docsManifest = {
|
|
|
11283
11392
|
bestPractices: [
|
|
11284
11393
|
"Drive `tokens` from real stream deltas - don't fake a word clock in product code. Showcase demos may animate.",
|
|
11285
11394
|
],
|
|
11395
|
+
keywords: [],
|
|
11286
11396
|
uses: ["flex", "grid", "text"],
|
|
11287
11397
|
usedBy: [],
|
|
11288
11398
|
},
|
|
@@ -11291,7 +11401,7 @@ export const docsManifest = {
|
|
|
11291
11401
|
module: "components/sub-navigation",
|
|
11292
11402
|
title: "SubNavigation",
|
|
11293
11403
|
category: "navigation",
|
|
11294
|
-
description: "Vertical secondary navigation for page subsections and settings-like layouts;\nthe `<nav>` landmark wrapping a
|
|
11404
|
+
description: "Vertical secondary navigation for page subsections and settings-like layouts;\nthe `<nav>` landmark wrapping a `SubNavigationList` of links.",
|
|
11295
11405
|
exports: [
|
|
11296
11406
|
{
|
|
11297
11407
|
name: "SubNavigation",
|
|
@@ -11359,6 +11469,7 @@ export const docsManifest = {
|
|
|
11359
11469
|
"Reach for `SubNavigation` for a vertical in-page section/settings menu; horizontal router tabs are `TabNavigation`, the app-chrome shell is `Sidebar`.",
|
|
11360
11470
|
"Fill it with a `SubNavigationList` of links - it already renders the `<nav>` landmark, so don't nest it inside another `<nav>`.",
|
|
11361
11471
|
],
|
|
11472
|
+
keywords: [],
|
|
11362
11473
|
uses: ["flex", "menu-item"],
|
|
11363
11474
|
usedBy: [],
|
|
11364
11475
|
},
|
|
@@ -11403,6 +11514,7 @@ export const docsManifest = {
|
|
|
11403
11514
|
"Wrap `SuccessTickRipple` in a `position: relative; overflow: hidden` parent - the ripple field is absolutely positioned and bleeds past an unbounded container.",
|
|
11404
11515
|
"It's decorative (`aria-hidden`) unless you pass `aria-label`, which exposes it as an `img`; animations are CSS-only and already collapse under `prefers-reduced-motion`.",
|
|
11405
11516
|
],
|
|
11517
|
+
keywords: ["celebrate", "success", "confirmation"],
|
|
11406
11518
|
uses: [],
|
|
11407
11519
|
usedBy: [],
|
|
11408
11520
|
},
|
|
@@ -11593,6 +11705,7 @@ export const docsManifest = {
|
|
|
11593
11705
|
"Reach for `Swatch` for a selectable colour/gradient/material chip or tile; a tiny non-interactive status marker is `Dot`, and a display-only status/category label is `Badge`.",
|
|
11594
11706
|
"For a gradient or image chip fill pass `light` - auto contrast detection (`isLightColor`) only reads solid colours, so overlaid icons/labels lose legibility without it.",
|
|
11595
11707
|
],
|
|
11708
|
+
keywords: [],
|
|
11596
11709
|
uses: ["center", "flex", "icon"],
|
|
11597
11710
|
usedBy: [
|
|
11598
11711
|
"swatch-fan",
|
|
@@ -11663,6 +11776,7 @@ export const docsManifest = {
|
|
|
11663
11776
|
"Choose `SwatchGroup` when you want radio semantics + keyboard a11y; reach for `SwatchSelector` only for a lighter controlled row without the RadioGroup roles.",
|
|
11664
11777
|
"Set `icon` (e.g. `Check`) on the group to swap the selection ring for a glyph on the chosen swatch, rather than styling items individually.",
|
|
11665
11778
|
],
|
|
11779
|
+
keywords: [],
|
|
11666
11780
|
uses: ["swatch"],
|
|
11667
11781
|
usedBy: [],
|
|
11668
11782
|
},
|
|
@@ -11671,7 +11785,7 @@ export const docsManifest = {
|
|
|
11671
11785
|
module: "components/swatch-selector",
|
|
11672
11786
|
title: "SwatchSelector",
|
|
11673
11787
|
category: "color",
|
|
11674
|
-
description: "Row of selectable color/image swatches with controlled single selection,\nbuilt on Base UI ToggleGroup: the row is one tab stop and the arrow keys move\nbetween swatches.\n\nShares the selected `value`, `onValueChange`, and `size` with its\n
|
|
11788
|
+
description: "Row of selectable color/image swatches with controlled single selection,\nbuilt on Base UI ToggleGroup: the row is one tab stop and the arrow keys move\nbetween swatches.\n\nShares the selected `value`, `onValueChange`, and `size` with its\n`SwatchSelectorItem` children through context.",
|
|
11675
11789
|
exports: [
|
|
11676
11790
|
{
|
|
11677
11791
|
name: "Swatch",
|
|
@@ -11800,6 +11914,7 @@ export const docsManifest = {
|
|
|
11800
11914
|
"Pressing the selected swatch again keeps it selected and does not call `onValueChange`.",
|
|
11801
11915
|
"Selection is controlled - pass `value` and update it from `onValueChange`; there is no internal fallback state to fall back on.",
|
|
11802
11916
|
],
|
|
11917
|
+
keywords: [],
|
|
11803
11918
|
uses: ["swatch", "tooltip"],
|
|
11804
11919
|
usedBy: ["product-card"],
|
|
11805
11920
|
},
|
|
@@ -11829,6 +11944,7 @@ export const docsManifest = {
|
|
|
11829
11944
|
"Controlled use needs `checked` + `onCheckedChange`; with only `checked` the switch won't move - use `defaultChecked` for uncontrolled.",
|
|
11830
11945
|
"`Switch` has no built-in label - associate a `Label` via `htmlFor`/`id` so the toggle has an accessible name.",
|
|
11831
11946
|
],
|
|
11947
|
+
keywords: ["toggle", "on off"],
|
|
11832
11948
|
uses: [],
|
|
11833
11949
|
usedBy: [],
|
|
11834
11950
|
},
|
|
@@ -11933,6 +12049,7 @@ export const docsManifest = {
|
|
|
11933
12049
|
"Use `TabNavigation` when each tab is a route/URL (it renders a `<nav>` of links); for in-page panels that swap without navigating, use `Tabs`.",
|
|
11934
12050
|
'It shares the Tabs look via context but defaults to `variant="line"`; mark the active link yourself (e.g. router `aria-current`) - there\'s no Base UI value tracking here.',
|
|
11935
12051
|
],
|
|
12052
|
+
keywords: [],
|
|
11936
12053
|
uses: ["flex", "icon", "tabs"],
|
|
11937
12054
|
usedBy: [],
|
|
11938
12055
|
anatomy: {
|
|
@@ -12008,6 +12125,7 @@ export const docsManifest = {
|
|
|
12008
12125
|
"Include a `TableCaption` describing the table's contents - it is the accessible name screen readers announce for the `<table>`.",
|
|
12009
12126
|
"Compose real `TableHeader`/`TableBody`/`TableRow`/`TableHead`/`TableCell` parts (semantic `thead`/`tbody`/`th`/`td`); don't fake rows with styled divs or you lose the table semantics.",
|
|
12010
12127
|
],
|
|
12128
|
+
keywords: [],
|
|
12011
12129
|
uses: [],
|
|
12012
12130
|
usedBy: [],
|
|
12013
12131
|
},
|
|
@@ -12175,6 +12293,7 @@ export const docsManifest = {
|
|
|
12175
12293
|
"Reach for `Tabs` to swap in-page panels via `TabsContent`; when each tab is a route, use `TabNavigation` instead (renders links, no panels).",
|
|
12176
12294
|
"Compose `TabsList`/`TabsTrigger`/`TabsContent` - shared `variant`/`size`/`fullWidth` flow through context, so set them on `Tabs`, not each trigger.",
|
|
12177
12295
|
],
|
|
12296
|
+
keywords: [],
|
|
12178
12297
|
uses: ["dot", "flex", "icon", "scroll-area"],
|
|
12179
12298
|
usedBy: ["tab-navigation"],
|
|
12180
12299
|
anatomy: {
|
|
@@ -12241,7 +12360,7 @@ export const docsManifest = {
|
|
|
12241
12360
|
name: "dot",
|
|
12242
12361
|
type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info"',
|
|
12243
12362
|
required: false,
|
|
12244
|
-
description: "Leading status dot: `true` for a neutral dot, or a
|
|
12363
|
+
description: "Leading status dot: `true` for a neutral dot, or a `Tone` to tint it.",
|
|
12245
12364
|
},
|
|
12246
12365
|
{
|
|
12247
12366
|
name: "hideDismiss",
|
|
@@ -12340,6 +12459,7 @@ export const docsManifest = {
|
|
|
12340
12459
|
'Set at most one leading visual - `loading` > `imageUrl` > `dot` > `icon` (in that precedence); pass a Lucide component to `icon` (not `<Icon/>`), and `imageUrl` renders a circular `<img alt="">`, so keep it decorative.',
|
|
12341
12460
|
"When `onDismiss` is set, Backspace/Delete also removes the tag while it's focused - don't bind your own conflicting key handler.",
|
|
12342
12461
|
],
|
|
12462
|
+
keywords: ["chip", "token"],
|
|
12343
12463
|
uses: ["dot", "icon", "pill", "spinner"],
|
|
12344
12464
|
usedBy: ["data-grid", "tag-selector"],
|
|
12345
12465
|
},
|
|
@@ -12358,7 +12478,7 @@ export const docsManifest = {
|
|
|
12358
12478
|
name: "as",
|
|
12359
12479
|
type: '"dd" | "dt" | "figcaption" | "legend" | "li" | "p" | "span"',
|
|
12360
12480
|
required: false,
|
|
12361
|
-
description: 'Render as a different host element from the closed text vocabulary\n(
|
|
12481
|
+
description: 'Render as a different host element from the closed text vocabulary\n(`TextElement`). The set is deliberately closed and text-only:\n`as="div"` and `as="label"` are type errors (use Box for decorative\nwrappers, Label for form labels). Ref and event-handler types remain the\ndefault element\'s (HTMLParagraphElement).\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
12362
12482
|
},
|
|
12363
12483
|
{
|
|
12364
12484
|
name: "size",
|
|
@@ -12401,6 +12521,7 @@ export const docsManifest = {
|
|
|
12401
12521
|
'`as` is a closed text-only vocabulary - use `as="span"` for inline copy; `as="div"`/`as="label"` are type errors (use `Box` for wrappers, `Label` for form labels).',
|
|
12402
12522
|
"`as` and `render` are mutually exclusive (`render` wins, dev-warned); Text ships without a line-length cap - add `max-w-prose` at the call site for long-form prose.",
|
|
12403
12523
|
],
|
|
12524
|
+
keywords: [],
|
|
12404
12525
|
uses: [],
|
|
12405
12526
|
usedBy: [
|
|
12406
12527
|
"checkbox-field",
|
|
@@ -12451,6 +12572,7 @@ export const docsManifest = {
|
|
|
12451
12572
|
"It auto-grows with content (`field-sizing-content`); set `rows` for a minimum height in lines rather than pinning height via CSS.",
|
|
12452
12573
|
"Give it a label - inside a `Field` a `FieldLabel` targets it with no ids to wire; standalone, point a `Label`'s `htmlFor` at its `id`. A placeholder is not an accessible name.",
|
|
12453
12574
|
],
|
|
12575
|
+
keywords: ["multiline", "text area"],
|
|
12454
12576
|
uses: ["field"],
|
|
12455
12577
|
usedBy: ["input-group"],
|
|
12456
12578
|
},
|
|
@@ -12503,7 +12625,7 @@ export const docsManifest = {
|
|
|
12503
12625
|
name: "orb",
|
|
12504
12626
|
type: "ThinkingLoaderOrb",
|
|
12505
12627
|
required: false,
|
|
12506
|
-
description: "Inline
|
|
12628
|
+
description: "Inline `ThinkingOrb` in the loader slot. Ignored when `loader` is\nprovided. Defaults to size `20` for text-adjacent rows.",
|
|
12507
12629
|
},
|
|
12508
12630
|
{
|
|
12509
12631
|
name: "morphIcons",
|
|
@@ -12644,6 +12766,7 @@ export const docsManifest = {
|
|
|
12644
12766
|
"Drive `ThinkingLoader` with `currentStep` (controlled) to reflect real progress, or omit it to auto-cycle `steps` on `interval` for a labor-illusion loader.",
|
|
12645
12767
|
'It already renders an `aria-live="polite"` region announcing each step - don\'t wrap it in another status role. Mount `ReducedMotionProvider` since it animates via `m.*`.',
|
|
12646
12768
|
],
|
|
12769
|
+
keywords: [],
|
|
12647
12770
|
uses: [
|
|
12648
12771
|
"animated-number",
|
|
12649
12772
|
"flex",
|
|
@@ -12756,6 +12879,7 @@ export const docsManifest = {
|
|
|
12756
12879
|
'Prefer `theme="auto"` so the orb follows `data-theme` / system preference; pin `dark` or `light` only when the surrounding surface is fixed.',
|
|
12757
12880
|
"Pass a specific `aria-label` when the state text is not otherwise announced (e.g. next to a ThinkingLoader that already speaks).",
|
|
12758
12881
|
],
|
|
12882
|
+
keywords: [],
|
|
12759
12883
|
uses: [],
|
|
12760
12884
|
usedBy: ["thinking-loader"],
|
|
12761
12885
|
},
|
|
@@ -12830,6 +12954,7 @@ export const docsManifest = {
|
|
|
12830
12954
|
"Name the group with `aria-label` or `aria-labelledby`; screen readers announce it before the first slot.",
|
|
12831
12955
|
'Use `TimeSlotPicker` for a fixed set of offered times; for any time the user types, use `Input type="time"`.',
|
|
12832
12956
|
],
|
|
12957
|
+
keywords: ["date", "appointment", "booking", "schedule"],
|
|
12833
12958
|
uses: [],
|
|
12834
12959
|
usedBy: [],
|
|
12835
12960
|
},
|
|
@@ -12909,6 +13034,7 @@ export const docsManifest = {
|
|
|
12909
13034
|
"Mount `<Toaster />` exactly once near the app root, then fire toasts with `toast()` from `@instruments/materia-ui/components/toast` - don't render a `Toaster` per view.",
|
|
12910
13035
|
"Press F6 to move focus into the toasts; hovering or focusing the stack pauses dismissal and fans it open.",
|
|
12911
13036
|
],
|
|
13037
|
+
keywords: ["notification", "snackbar", "flash message"],
|
|
12912
13038
|
uses: ["button", "flex", "icon"],
|
|
12913
13039
|
usedBy: [],
|
|
12914
13040
|
},
|
|
@@ -12975,6 +13101,7 @@ export const docsManifest = {
|
|
|
12975
13101
|
"One independent on/off is a `Toggle`; a mutually-exclusive or multi-select set is `ToggleGroup` with `Toggle`s inside it; an instantly-applied setting is `Switch`.",
|
|
12976
13102
|
"Pass `icon` with no children for a square icon-only toggle (auto-sized); with a label, order it via `iconPlacement`.",
|
|
12977
13103
|
],
|
|
13104
|
+
keywords: [],
|
|
12978
13105
|
uses: ["icon"],
|
|
12979
13106
|
usedBy: [
|
|
12980
13107
|
"data-grid",
|
|
@@ -12988,7 +13115,7 @@ export const docsManifest = {
|
|
|
12988
13115
|
module: "components/toggle-group",
|
|
12989
13116
|
title: "ToggleGroup",
|
|
12990
13117
|
category: "actions",
|
|
12991
|
-
description: "A literal group of
|
|
13118
|
+
description: "A literal group of `Toggle`s: several two-state pressable buttons that\nshare one selection, laid out `joined` (a seamless segmented row),\n`separated`, or `wrap`ped. Built on Base UI ToggleGroup - by default one\nitem is pressed at a time (radio-like), `multiple` makes it checkbox-like;\n`value` is always an array. The `Toggle`s inside take\n`size` / `radius` / `variant` from the group through context.",
|
|
12992
13119
|
exports: [
|
|
12993
13120
|
{
|
|
12994
13121
|
name: "ToggleGroup",
|
|
@@ -13038,6 +13165,7 @@ export const docsManifest = {
|
|
|
13038
13165
|
"Put plain `Toggle`s inside, each with a `value`, as Base UI does.",
|
|
13039
13166
|
"Icon-only toggles need an `aria-label` (a dev warning fires otherwise).",
|
|
13040
13167
|
],
|
|
13168
|
+
keywords: [],
|
|
13041
13169
|
uses: ["toggle"],
|
|
13042
13170
|
usedBy: ["data-grid"],
|
|
13043
13171
|
},
|
|
@@ -13087,6 +13215,7 @@ export const docsManifest = {
|
|
|
13087
13215
|
"The trigger must be focusable (a button / link, or `render` onto one) or keyboard and AT users never see the tip.",
|
|
13088
13216
|
"Share one `TooltipProvider` to tune `delay` / skip-delay for a group; `Tooltip` wraps its own provider, so you only need it for grouping.",
|
|
13089
13217
|
],
|
|
13218
|
+
keywords: ["hint", "title"],
|
|
13090
13219
|
uses: [],
|
|
13091
13220
|
usedBy: ["product-card", "progress-dots", "sidebar", "swatch-selector"],
|
|
13092
13221
|
},
|
|
@@ -13110,7 +13239,7 @@ export const docsManifest = {
|
|
|
13110
13239
|
name: "as",
|
|
13111
13240
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
13112
13241
|
required: false,
|
|
13113
|
-
description: "Render as a different host element from the closed layout vocabulary\n(
|
|
13242
|
+
description: "Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). A row inside a real list must be an `li`.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).",
|
|
13114
13243
|
},
|
|
13115
13244
|
],
|
|
13116
13245
|
},
|
|
@@ -13127,7 +13256,7 @@ export const docsManifest = {
|
|
|
13127
13256
|
name: "as",
|
|
13128
13257
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
13129
13258
|
required: false,
|
|
13130
|
-
description: "Render as a different host element from the closed layout vocabulary\n(
|
|
13259
|
+
description: "Render as a different host element from the closed layout vocabulary\n(`LayoutElement`).\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).",
|
|
13131
13260
|
},
|
|
13132
13261
|
{
|
|
13133
13262
|
name: "slots",
|
|
@@ -13163,6 +13292,7 @@ export const docsManifest = {
|
|
|
13163
13292
|
"Use `slots` only to align controls into a column across rows with different counts; otherwise let the children size the slot.",
|
|
13164
13293
|
"Do not use `visible` to say a row matters more; a control drawn on every row at rest is furniture.",
|
|
13165
13294
|
],
|
|
13295
|
+
keywords: [],
|
|
13166
13296
|
uses: [],
|
|
13167
13297
|
usedBy: [],
|
|
13168
13298
|
anatomy: {
|
|
@@ -13200,6 +13330,7 @@ export const docsManifest = {
|
|
|
13200
13330
|
"Use for screen-reader-only text (e.g. a link's full context) - for icon-only `Button`s prefer the `aria-label` prop the component already requires.",
|
|
13201
13331
|
"Never hide interactive or focusable content inside it - sighted keyboard users would tab into something they cannot see.",
|
|
13202
13332
|
],
|
|
13333
|
+
keywords: [],
|
|
13203
13334
|
uses: [],
|
|
13204
13335
|
usedBy: ["animated-number", "avatar", "badge", "breadcrumb"],
|
|
13205
13336
|
},
|
|
@@ -13371,6 +13502,7 @@ export const docsManifest = {
|
|
|
13371
13502
|
'Pass `label` per state (the parent decides the copy, e.g. "Voice input" vs "Stop dictation") so screen readers announce the current action; never hardcode it here.',
|
|
13372
13503
|
"Feed `level` from a real RMS meter while `listening` - a dead-flat waveform reads as a crashed mic; the atom floors and undulates the bars, but only live level makes it look alive.",
|
|
13373
13504
|
],
|
|
13505
|
+
keywords: [],
|
|
13374
13506
|
uses: ["button", "flex", "icon"],
|
|
13375
13507
|
usedBy: [],
|
|
13376
13508
|
},
|
|
@@ -13429,6 +13561,7 @@ export const docsManifest = {
|
|
|
13429
13561
|
"Pass a Lucide component to `icon` (e.g. `RulerIcon`), not a rendered `<Icon/>` - it is handed to the internal `Icon` at a fixed `sm` size.",
|
|
13430
13562
|
"This is a preset composition of `Card`; restyle via the surrounding layout rather than reaching inside - for a bespoke layout compose `Card`/`CardContent` directly.",
|
|
13431
13563
|
],
|
|
13564
|
+
keywords: [],
|
|
13432
13565
|
uses: ["card", "flex", "icon"],
|
|
13433
13566
|
usedBy: [],
|
|
13434
13567
|
},
|
|
@@ -13592,6 +13725,7 @@ export const docsManifest = {
|
|
|
13592
13725
|
"Chunk items with `chunkIntoRows` (using `calculateColumns`) before passing `rows`; provide a stable `getItemKey` (and `getRowKey` where rows reorder) so React reconciliation stays correct.",
|
|
13593
13726
|
"Render one `CardGridSkeletonItem` per expected card while data loads, inside the same `CardGrid` - this keeps list semantics and column widths stable across the loading→loaded transition.",
|
|
13594
13727
|
],
|
|
13728
|
+
keywords: [],
|
|
13595
13729
|
uses: ["product-card"],
|
|
13596
13730
|
usedBy: [],
|
|
13597
13731
|
},
|
|
@@ -13759,6 +13893,7 @@ export const docsManifest = {
|
|
|
13759
13893
|
"Give every `image` card a `searchHex`, otherwise it can't be searched or selected - flat colours and gradients derive theirs automatically.",
|
|
13760
13894
|
"Pass `renderLink` (e.g. wrapping `next/link`) for client-side nav - the built-in links are plain `<a>`; the callback must return a single anchor element.",
|
|
13761
13895
|
],
|
|
13896
|
+
keywords: [],
|
|
13762
13897
|
uses: [
|
|
13763
13898
|
"button",
|
|
13764
13899
|
"center",
|
|
@@ -13846,6 +13981,7 @@ export const docsManifest = {
|
|
|
13846
13981
|
"Only wire the actions you support: Reject and Cookie settings render only when `onReject` / `onSettings` are passed.",
|
|
13847
13982
|
"It records nothing. Store the visitor's choice in the handlers and stop rendering the banner once they have made it.",
|
|
13848
13983
|
],
|
|
13984
|
+
keywords: [],
|
|
13849
13985
|
uses: ["button", "flex", "heading", "text"],
|
|
13850
13986
|
usedBy: [],
|
|
13851
13987
|
},
|
|
@@ -14274,6 +14410,7 @@ export const docsManifest = {
|
|
|
14274
14410
|
"Render the satellite parts (`DataGridTable`, `DataGridPagination`, `DataGridColumnHeader/Filter/Visibility`) inside `DataGrid` - they read the table + layout from its context and break outside it.",
|
|
14275
14411
|
"Enable features through `tableLayout` (`columnsPinnable`, `columnsResizable`, `columnsVisibility`, …) rather than styling rows manually; set `initialColumnPinning` to pin on mount.",
|
|
14276
14412
|
],
|
|
14413
|
+
keywords: [],
|
|
14277
14414
|
uses: [
|
|
14278
14415
|
"button",
|
|
14279
14416
|
"checkbox",
|
|
@@ -14368,6 +14505,7 @@ export const docsManifest = {
|
|
|
14368
14505
|
"Use this for a discrete multi-select facet; it stores an array filter value, so pair it with a column filter fn that matches array membership.",
|
|
14369
14506
|
"The typed search survives each pick, so several matches can be ticked from one query; it resets when the popup closes.",
|
|
14370
14507
|
],
|
|
14508
|
+
keywords: [],
|
|
14371
14509
|
uses: ["badge", "button", "center", "flex", "icon", "separator"],
|
|
14372
14510
|
usedBy: [],
|
|
14373
14511
|
},
|
|
@@ -14430,6 +14568,7 @@ export const docsManifest = {
|
|
|
14430
14568
|
"The pin/move/visibility controls only appear when the matching `tableLayout` flags (`columnsPinnable`/`columnsMovable`/`columnsVisibility`) are enabled on `DataGrid` - a missing menu item usually means the flag is off, not a bug.",
|
|
14431
14569
|
"Pass a human `title` (and optional `icon`); it is the accessible label for the sort/menu trigger and the moved-column announcement.",
|
|
14432
14570
|
],
|
|
14571
|
+
keywords: [],
|
|
14433
14572
|
uses: ["button", "data-grid", "dropdown-menu", "flex", "icon"],
|
|
14434
14573
|
usedBy: [],
|
|
14435
14574
|
},
|
|
@@ -14464,6 +14603,7 @@ export const docsManifest = {
|
|
|
14464
14603
|
"Only accessor columns reporting `getCanHide()` appear; set `enableHiding: false` on a column def to keep it always-visible and out of this menu.",
|
|
14465
14604
|
"Label each column via `columnDef.meta.headerTitle` - the menu falls back to the raw column `id` when it's missing.",
|
|
14466
14605
|
],
|
|
14606
|
+
keywords: [],
|
|
14467
14607
|
uses: ["dropdown-menu"],
|
|
14468
14608
|
usedBy: [],
|
|
14469
14609
|
},
|
|
@@ -14564,6 +14704,7 @@ export const docsManifest = {
|
|
|
14564
14704
|
"For server-side paging, drive the table with `manualPagination` + `pageCount` and a controlled `pagination` state; the range summary uses `recordCount`, so pass the true total, not the page length.",
|
|
14565
14705
|
"Configure page-size choices via `sizes` (not by restyling the select), and localise the range text through the `info` template.",
|
|
14566
14706
|
],
|
|
14707
|
+
keywords: [],
|
|
14567
14708
|
uses: ["button", "data-grid", "flex", "select", "skeleton"],
|
|
14568
14709
|
usedBy: [],
|
|
14569
14710
|
},
|
|
@@ -14809,6 +14950,7 @@ export const docsManifest = {
|
|
|
14809
14950
|
"Rows are virtualised, so give each a stable `rowHeight` via `tableLayout` (expanded rows use `expandedRowHeight`) - variable, unmeasured heights make the window jump.",
|
|
14810
14951
|
"Use `DataGridTable` for a data-driven grid; for a small static table with hand-authored `<TableRow>`s reach for `Table` instead - no virtualisation or TanStack instance needed.",
|
|
14811
14952
|
],
|
|
14953
|
+
keywords: [],
|
|
14812
14954
|
uses: ["center", "data-grid", "flex", "spinner"],
|
|
14813
14955
|
usedBy: [],
|
|
14814
14956
|
},
|
|
@@ -14888,6 +15030,7 @@ export const docsManifest = {
|
|
|
14888
15030
|
"Give it `onLocationClick` when the address can be changed, so the location becomes a button rather than inert text.",
|
|
14889
15031
|
"Place it full width directly under the header; it switches to its compact layout from its own width, not the viewport's.",
|
|
14890
15032
|
],
|
|
15033
|
+
keywords: [],
|
|
14891
15034
|
uses: ["button", "flex", "grid", "icon", "separator"],
|
|
14892
15035
|
usedBy: [],
|
|
14893
15036
|
},
|
|
@@ -15057,6 +15200,7 @@ export const docsManifest = {
|
|
|
15057
15200
|
"Set `selectable` to reveal per-item checkboxes and drive selection via `value`/`onValueChange` (a `string[]`) - don't add your own checkboxes.",
|
|
15058
15201
|
"Use this for files/documents with icon + metadata + actions; for a generic single-line row reach for `Item`/`ItemGroup`, and for tabular columns use `Table`.",
|
|
15059
15202
|
],
|
|
15203
|
+
keywords: [],
|
|
15060
15204
|
uses: ["center", "checkbox", "flex", "icon"],
|
|
15061
15205
|
usedBy: [],
|
|
15062
15206
|
},
|
|
@@ -15291,6 +15435,7 @@ export const docsManifest = {
|
|
|
15291
15435
|
"Pass `renderImage` (wrapping `next/image`) in Next.js - the default is a plain `<img>` and skips Next optimisation; give `media` images a meaningful `alt`.",
|
|
15292
15436
|
"Set `href` to make the whole card a single link (it wraps in an `<a>`); don't nest additional links/buttons inside - use `EditorialCard` for promo tiles, plain `Card` for neutral content.",
|
|
15293
15437
|
],
|
|
15438
|
+
keywords: [],
|
|
15294
15439
|
uses: ["center", "flex", "media-frame", "swatch-fan"],
|
|
15295
15440
|
usedBy: [],
|
|
15296
15441
|
},
|
|
@@ -15385,6 +15530,7 @@ export const docsManifest = {
|
|
|
15385
15530
|
'Use `EmptyState` for "no data / nothing here"; a failure the user can retry is an `ErrorState` (which also composes `Empty`), so don\'t hand-roll a retry empty.',
|
|
15386
15531
|
'Set `level` to keep the document outline gapless where you place it - a full-page empty near an `h2` wants `level="3"`, but a nested one may need `"4"`.',
|
|
15387
15532
|
],
|
|
15533
|
+
keywords: ["no results", "zero state", "blank slate"],
|
|
15388
15534
|
uses: ["empty"],
|
|
15389
15535
|
usedBy: [],
|
|
15390
15536
|
},
|
|
@@ -15483,6 +15629,7 @@ export const docsManifest = {
|
|
|
15483
15629
|
"`ErrorState` renders a failure UI (icon / title / message / retry) but does not catch errors - wrap the throwing subtree in an `ErrorBoundary` and render this in its `fallback`.",
|
|
15484
15630
|
"Pass `retry` to show the retry button (omit it to hide); it's built on `Empty`, so `layout` / `minHeight` props pass straight through.",
|
|
15485
15631
|
],
|
|
15632
|
+
keywords: [],
|
|
15486
15633
|
uses: ["button", "empty"],
|
|
15487
15634
|
usedBy: [],
|
|
15488
15635
|
},
|
|
@@ -15893,6 +16040,7 @@ export const docsManifest = {
|
|
|
15893
16040
|
"Forward the hook's `handleDragEnter/Leave/Over/Drop` and drag state into `dragging` so the drag styling matches the real drop-target state.",
|
|
15894
16041
|
"Keep `title`/`description` (accepted types, size limit) accurate - they are the zone's only affordance copy; override the whole body via `children` when needed.",
|
|
15895
16042
|
],
|
|
16043
|
+
keywords: ["dropzone", "attachment", "file input"],
|
|
15896
16044
|
uses: ["button", "center", "icon", "progress", "stack", "text"],
|
|
15897
16045
|
usedBy: [],
|
|
15898
16046
|
},
|
|
@@ -16022,6 +16170,7 @@ export const docsManifest = {
|
|
|
16022
16170
|
"Drive drag-and-drop drop-target styling with `open` (forces the open look without revealing the action); use `selected`+`showSelectedState` for selection, not manual classes.",
|
|
16023
16171
|
"`FolderTile` is itself the button - pass `name`/`onClick` and button props directly; don't wrap it in another `<button>`/`<a>`.",
|
|
16024
16172
|
],
|
|
16173
|
+
keywords: [],
|
|
16025
16174
|
uses: ["center", "flex", "swatch-fan"],
|
|
16026
16175
|
usedBy: [],
|
|
16027
16176
|
},
|
|
@@ -16065,6 +16214,7 @@ export const docsManifest = {
|
|
|
16065
16214
|
"Reserve `LoadingState` for a whole region / page with nothing to show yet; for in-place loading over existing layout prefer `Skeleton`, and a small inline spinner is `Spinner`.",
|
|
16066
16215
|
'Pass `label` to name the live region for AT; it already renders `aria-live="polite"` with a default "Loading" name, so don\'t add your own status role.',
|
|
16067
16216
|
],
|
|
16217
|
+
keywords: [],
|
|
16068
16218
|
uses: ["center", "spinner", "text"],
|
|
16069
16219
|
usedBy: [],
|
|
16070
16220
|
},
|
|
@@ -16223,6 +16373,7 @@ export const docsManifest = {
|
|
|
16223
16373
|
"Use it in a shell whose chrome is lifted (`Sidebar header`, the fixed `SidebarLayoutHeader`): the panel fills the window from the top, beneath the chrome, so the brand row, search and actions stay on top of it.",
|
|
16224
16374
|
"Keep it to navigation. Every entry is a `MegaMenuLink`, which closes the menu as it navigates; actions belong in a `DropdownMenu`.",
|
|
16225
16375
|
],
|
|
16376
|
+
keywords: [],
|
|
16226
16377
|
uses: ["anchor", "box", "grid", "heading", "popover", "stack"],
|
|
16227
16378
|
usedBy: [],
|
|
16228
16379
|
},
|
|
@@ -16278,7 +16429,7 @@ export const docsManifest = {
|
|
|
16278
16429
|
name: "as",
|
|
16279
16430
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
16280
16431
|
required: false,
|
|
16281
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
16432
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
16282
16433
|
},
|
|
16283
16434
|
{
|
|
16284
16435
|
name: "direction",
|
|
@@ -16479,7 +16630,7 @@ export const docsManifest = {
|
|
|
16479
16630
|
name: "as",
|
|
16480
16631
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
16481
16632
|
required: false,
|
|
16482
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
16633
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
16483
16634
|
},
|
|
16484
16635
|
{
|
|
16485
16636
|
name: "align",
|
|
@@ -16519,7 +16670,7 @@ export const docsManifest = {
|
|
|
16519
16670
|
name: "as",
|
|
16520
16671
|
type: '"dd" | "dt" | "figcaption" | "legend" | "li" | "p" | "span"',
|
|
16521
16672
|
required: false,
|
|
16522
|
-
description: 'Render as a different host element from the closed text vocabulary\n(
|
|
16673
|
+
description: 'Render as a different host element from the closed text vocabulary\n(`TextElement`). The set is deliberately closed and text-only:\n`as="div"` and `as="label"` are type errors (use Box for decorative\nwrappers, Label for form labels). Ref and event-handler types remain the\ndefault element\'s (HTMLParagraphElement).\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
16523
16674
|
},
|
|
16524
16675
|
{
|
|
16525
16676
|
name: "size",
|
|
@@ -16621,7 +16772,7 @@ export const docsManifest = {
|
|
|
16621
16772
|
name: "as",
|
|
16622
16773
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
16623
16774
|
required: false,
|
|
16624
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
16775
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
16625
16776
|
},
|
|
16626
16777
|
{
|
|
16627
16778
|
name: "align",
|
|
@@ -16674,7 +16825,7 @@ export const docsManifest = {
|
|
|
16674
16825
|
name: "as",
|
|
16675
16826
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
16676
16827
|
required: false,
|
|
16677
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
16828
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
16678
16829
|
},
|
|
16679
16830
|
{
|
|
16680
16831
|
name: "align",
|
|
@@ -16727,7 +16878,7 @@ export const docsManifest = {
|
|
|
16727
16878
|
name: "as",
|
|
16728
16879
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
16729
16880
|
required: false,
|
|
16730
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
16881
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
16731
16882
|
},
|
|
16732
16883
|
{
|
|
16733
16884
|
name: "align",
|
|
@@ -16921,7 +17072,7 @@ export const docsManifest = {
|
|
|
16921
17072
|
name: "as",
|
|
16922
17073
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
16923
17074
|
required: false,
|
|
16924
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
17075
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
16925
17076
|
},
|
|
16926
17077
|
{
|
|
16927
17078
|
name: "align",
|
|
@@ -17118,7 +17269,7 @@ export const docsManifest = {
|
|
|
17118
17269
|
name: "dot",
|
|
17119
17270
|
type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info"',
|
|
17120
17271
|
required: false,
|
|
17121
|
-
description: "Show a status dot in place of the leading icon. `true` uses the default\naffirmative tint; a
|
|
17272
|
+
description: "Show a status dot in place of the leading icon. `true` uses the default\naffirmative tint; a `Tone` value tints it from the shared dot palette.",
|
|
17122
17273
|
},
|
|
17123
17274
|
{
|
|
17124
17275
|
name: "icon",
|
|
@@ -17270,7 +17421,7 @@ export const docsManifest = {
|
|
|
17270
17421
|
name: "as",
|
|
17271
17422
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
17272
17423
|
required: false,
|
|
17273
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
17424
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
17274
17425
|
},
|
|
17275
17426
|
{
|
|
17276
17427
|
name: "align",
|
|
@@ -17544,6 +17695,7 @@ export const docsManifest = {
|
|
|
17544
17695
|
'It\'s `role="dialog"`+`aria-modal` and hidden from `lg` up, so pair it with a desktop nav rather than showing both at once.',
|
|
17545
17696
|
'Override the default "Navigation menu" accessible name via `aria-label` when the drawer\'s purpose is more specific.',
|
|
17546
17697
|
],
|
|
17698
|
+
keywords: [],
|
|
17547
17699
|
uses: [
|
|
17548
17700
|
"avatar",
|
|
17549
17701
|
"button",
|
|
@@ -17762,6 +17914,7 @@ export const docsManifest = {
|
|
|
17762
17914
|
'Set `layout="stacked"` and wrap each row in `PageHeaderRow` for multi-row headers; the default `"single"` wraps only when a narrow viewport needs to protect the title or actions.',
|
|
17763
17915
|
"`PageHeader` is the sub-header below the app `HeaderBar`, not the app chrome itself - use `SidebarProvider` with `SidebarInset` or `HeaderBar` for the top-level frame; its `sticky` offset assumes that header is present.",
|
|
17764
17916
|
],
|
|
17917
|
+
keywords: [],
|
|
17765
17918
|
uses: ["flex", "heading", "text"],
|
|
17766
17919
|
usedBy: [],
|
|
17767
17920
|
},
|
|
@@ -17800,7 +17953,7 @@ export const docsManifest = {
|
|
|
17800
17953
|
name: "as",
|
|
17801
17954
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
17802
17955
|
required: false,
|
|
17803
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
17956
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
17804
17957
|
},
|
|
17805
17958
|
{
|
|
17806
17959
|
name: "direction",
|
|
@@ -17873,7 +18026,7 @@ export const docsManifest = {
|
|
|
17873
18026
|
name: "as",
|
|
17874
18027
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
17875
18028
|
required: false,
|
|
17876
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
18029
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
17877
18030
|
},
|
|
17878
18031
|
{
|
|
17879
18032
|
name: "direction",
|
|
@@ -17976,7 +18129,7 @@ export const docsManifest = {
|
|
|
17976
18129
|
name: "as",
|
|
17977
18130
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
17978
18131
|
required: false,
|
|
17979
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
18132
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
17980
18133
|
},
|
|
17981
18134
|
{
|
|
17982
18135
|
name: "direction",
|
|
@@ -18095,7 +18248,7 @@ export const docsManifest = {
|
|
|
18095
18248
|
name: "as",
|
|
18096
18249
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
18097
18250
|
required: false,
|
|
18098
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
18251
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
18099
18252
|
},
|
|
18100
18253
|
{
|
|
18101
18254
|
name: "direction",
|
|
@@ -18396,6 +18549,7 @@ export const docsManifest = {
|
|
|
18396
18549
|
"Each facet appears once. A `SegmentedControl` when the facet splits the set and one part is viewed at a time (its counts sum to the total); `PageToolbarFilter` chips when several combine. Never both for the same facet.",
|
|
18397
18550
|
"Keep the actions to `PageToolbarSort`, which names the current order, and a view toggle. Page actions such as export belong in the `PageHeader`.",
|
|
18398
18551
|
],
|
|
18552
|
+
keywords: [],
|
|
18399
18553
|
uses: [
|
|
18400
18554
|
"box",
|
|
18401
18555
|
"button",
|
|
@@ -18453,7 +18607,7 @@ export const docsManifest = {
|
|
|
18453
18607
|
name: "dragging",
|
|
18454
18608
|
type: "boolean | undefined",
|
|
18455
18609
|
required: false,
|
|
18456
|
-
description: "Swatch mode: set while the host is dragging the tile. Hides Quick view, the\ncaption and the add control and keeps the elevated shell. Distinct from\n
|
|
18610
|
+
description: "Swatch mode: set while the host is dragging the tile. Hides Quick view, the\ncaption and the add control and keeps the elevated shell. Distinct from\n`dragAdapter`, which wires a drag handle around the image.",
|
|
18457
18611
|
},
|
|
18458
18612
|
{
|
|
18459
18613
|
name: "onAdd",
|
|
@@ -18479,7 +18633,7 @@ export const docsManifest = {
|
|
|
18479
18633
|
type: "ProductCardAvailability | undefined",
|
|
18480
18634
|
required: false,
|
|
18481
18635
|
defaultValue: '"available"',
|
|
18482
|
-
description: "Whether the product can be acted on - see
|
|
18636
|
+
description: "Whether the product can be acted on - see `ProductCardAvailability`.",
|
|
18483
18637
|
},
|
|
18484
18638
|
{
|
|
18485
18639
|
name: "dragAdapter",
|
|
@@ -18540,13 +18694,13 @@ export const docsManifest = {
|
|
|
18540
18694
|
name: "price",
|
|
18541
18695
|
type: "ReactNode",
|
|
18542
18696
|
required: false,
|
|
18543
|
-
description: "Price, supplied by the application as already-formatted content. Replaces\n`costIndicator` on the meta line. The card does no currency or tax logic.\nShipping and delivery flags go through
|
|
18697
|
+
description: "Price, supplied by the application as already-formatted content. Replaces\n`costIndicator` on the meta line. The card does no currency or tax logic.\nShipping and delivery flags go through `action`, whose `label` is\nalso a ReactNode.",
|
|
18544
18698
|
},
|
|
18545
18699
|
{
|
|
18546
18700
|
name: "primaryAction",
|
|
18547
18701
|
type: "ProductCardPrimaryAction | undefined",
|
|
18548
18702
|
required: false,
|
|
18549
|
-
description: "What this card's one labelled control offers - see\n
|
|
18703
|
+
description: "What this card's one labelled control offers - see\n`ProductCardPrimaryAction`.\n\nOmit entirely for a card with no control at all, which is the correct\nrendering for a product that can do nothing rather than a disabled button.\nOmitting also preserves the pre-existing cart-only behaviour for callers\nthat pass `renderAddToCart` and nothing else.",
|
|
18550
18704
|
},
|
|
18551
18705
|
{
|
|
18552
18706
|
name: "processing",
|
|
@@ -18607,6 +18761,12 @@ export const docsManifest = {
|
|
|
18607
18761
|
required: false,
|
|
18608
18762
|
description: 'Prioritise loading images (sets loading="eager" and adds preload link)',
|
|
18609
18763
|
},
|
|
18764
|
+
{
|
|
18765
|
+
name: "productBrandLines",
|
|
18766
|
+
type: "1 | 2 | undefined",
|
|
18767
|
+
required: false,
|
|
18768
|
+
description: "How many lines the brand may take before it clamps; see `ProductCardDisplayOptions.brandLines`.",
|
|
18769
|
+
},
|
|
18610
18770
|
{
|
|
18611
18771
|
name: "productNameLines",
|
|
18612
18772
|
type: "1 | 2 | undefined",
|
|
@@ -18801,7 +18961,7 @@ export const docsManifest = {
|
|
|
18801
18961
|
name: "primaryAction",
|
|
18802
18962
|
type: "ProductCardPrimaryAction | undefined",
|
|
18803
18963
|
required: false,
|
|
18804
|
-
description: "What this card's one labelled control offers - see\n
|
|
18964
|
+
description: "What this card's one labelled control offers - see\n`ProductCardPrimaryAction`.\n\nOmit entirely for a card with no control at all, which is the correct\nrendering for a product that can do nothing rather than a disabled button.\nOmitting also preserves the pre-existing cart-only behaviour for callers\nthat pass `renderAddToCart` and nothing else.",
|
|
18805
18965
|
},
|
|
18806
18966
|
{
|
|
18807
18967
|
name: "showActivePointer",
|
|
@@ -18827,6 +18987,12 @@ export const docsManifest = {
|
|
|
18827
18987
|
required: false,
|
|
18828
18988
|
description: 'Prioritise loading images (sets loading="eager" and adds preload link)',
|
|
18829
18989
|
},
|
|
18990
|
+
{
|
|
18991
|
+
name: "productBrandLines",
|
|
18992
|
+
type: "1 | 2 | undefined",
|
|
18993
|
+
required: false,
|
|
18994
|
+
description: "How many lines the brand may take before it clamps; see `ProductCardDisplayOptions.brandLines`.",
|
|
18995
|
+
},
|
|
18830
18996
|
{
|
|
18831
18997
|
name: "productNameLines",
|
|
18832
18998
|
type: "1 | 2 | undefined",
|
|
@@ -19078,14 +19244,14 @@ export const docsManifest = {
|
|
|
19078
19244
|
name: "dragging",
|
|
19079
19245
|
type: "boolean | undefined",
|
|
19080
19246
|
required: false,
|
|
19081
|
-
description: "Swatch mode: set while the host is dragging the tile. Hides Quick view, the\ncaption and the add control and keeps the elevated shell. Distinct from\n
|
|
19247
|
+
description: "Swatch mode: set while the host is dragging the tile. Hides Quick view, the\ncaption and the add control and keeps the elevated shell. Distinct from\n`dragAdapter`, which wires a drag handle around the image.",
|
|
19082
19248
|
},
|
|
19083
19249
|
{
|
|
19084
19250
|
name: "availability",
|
|
19085
19251
|
type: "ProductCardAvailability | undefined",
|
|
19086
19252
|
required: false,
|
|
19087
19253
|
defaultValue: '"available"',
|
|
19088
|
-
description: "Whether the product can be acted on - see
|
|
19254
|
+
description: "Whether the product can be acted on - see `ProductCardAvailability`.",
|
|
19089
19255
|
},
|
|
19090
19256
|
{
|
|
19091
19257
|
name: "labels",
|
|
@@ -19147,7 +19313,7 @@ export const docsManifest = {
|
|
|
19147
19313
|
name: "price",
|
|
19148
19314
|
type: "ReactNode",
|
|
19149
19315
|
required: false,
|
|
19150
|
-
description: "Price, supplied by the application as already-formatted content. Replaces\n`costIndicator` on the meta line. The card does no currency or tax logic.\nShipping and delivery flags go through
|
|
19316
|
+
description: "Price, supplied by the application as already-formatted content. Replaces\n`costIndicator` on the meta line. The card does no currency or tax logic.\nShipping and delivery flags go through `action`, whose `label` is\nalso a ReactNode.",
|
|
19151
19317
|
},
|
|
19152
19318
|
{
|
|
19153
19319
|
name: "processing",
|
|
@@ -19177,7 +19343,7 @@ export const docsManifest = {
|
|
|
19177
19343
|
name: "primaryAction",
|
|
19178
19344
|
type: "ProductCardPrimaryAction | undefined",
|
|
19179
19345
|
required: false,
|
|
19180
|
-
description: "What this card's one labelled control offers - see\n
|
|
19346
|
+
description: "What this card's one labelled control offers - see\n`ProductCardPrimaryAction`.\n\nOmit entirely for a card with no control at all, which is the correct\nrendering for a product that can do nothing rather than a disabled button.\nOmitting also preserves the pre-existing cart-only behaviour for callers\nthat pass `renderAddToCart` and nothing else.",
|
|
19181
19347
|
},
|
|
19182
19348
|
{
|
|
19183
19349
|
name: "product",
|
|
@@ -19316,6 +19482,18 @@ export const docsManifest = {
|
|
|
19316
19482
|
type: "CSSProperties",
|
|
19317
19483
|
required: false,
|
|
19318
19484
|
},
|
|
19485
|
+
{
|
|
19486
|
+
name: "showAddToCart",
|
|
19487
|
+
type: "boolean",
|
|
19488
|
+
required: false,
|
|
19489
|
+
description: "Draw the add-to-cart control. True by default; pass the same value as the\ncard's `showAddToCart` so a grid without a cart keeps its height when the\nproducts arrive.",
|
|
19490
|
+
},
|
|
19491
|
+
{
|
|
19492
|
+
name: "showSwatches",
|
|
19493
|
+
type: "boolean",
|
|
19494
|
+
required: false,
|
|
19495
|
+
description: "Draw the row of colourway dots. True by default; pass the card's `showSwatches`.",
|
|
19496
|
+
},
|
|
19319
19497
|
],
|
|
19320
19498
|
},
|
|
19321
19499
|
{
|
|
@@ -19396,7 +19574,7 @@ export const docsManifest = {
|
|
|
19396
19574
|
name: "labels",
|
|
19397
19575
|
type: 'Pick<ProductCardLabels, "add" | "closeSuggestions" | "suggest"> | undefined',
|
|
19398
19576
|
required: false,
|
|
19399
|
-
description: "Strings, overridable; see
|
|
19577
|
+
description: "Strings, overridable; see `ProductCardLabels`.",
|
|
19400
19578
|
},
|
|
19401
19579
|
{
|
|
19402
19580
|
name: "menuOpen",
|
|
@@ -19482,6 +19660,7 @@ export const docsManifest = {
|
|
|
19482
19660
|
"Pass `renderImage` wrapping `next/image` in Next.js apps -\nthe default renderer is a plain `<img>` and skips Next's optimisation.",
|
|
19483
19661
|
"Keep `dragAdapter` referentially stable (a module-level\nconstant) - an inline factory remounts the image subtree and drops the\ndrag ref mid-drag.",
|
|
19484
19662
|
],
|
|
19663
|
+
keywords: [],
|
|
19485
19664
|
uses: [
|
|
19486
19665
|
"badge",
|
|
19487
19666
|
"box",
|
|
@@ -19573,6 +19752,7 @@ export const docsManifest = {
|
|
|
19573
19752
|
"It renders nothing when there are no `variantOptions` dimensions and no `siblings` with images - supply `siblings`/`siblingsWithAttributes` so single-colourway products still show a fallback thumbnail.",
|
|
19574
19753
|
"Pass `renderImage` (wrapping `next/image`) in Next.js; the default is a plain `<img>`. The component ships bare - wrap it in a `Card` with your own heading when a panel is wanted.",
|
|
19575
19754
|
],
|
|
19755
|
+
keywords: [],
|
|
19576
19756
|
uses: ["label", "radio-card", "stack", "variant-selector"],
|
|
19577
19757
|
usedBy: [],
|
|
19578
19758
|
},
|
|
@@ -19875,6 +20055,7 @@ export const docsManifest = {
|
|
|
19875
20055
|
'Pass `title` (or an explicit `aria-label`) - the panel is a `role="dialog"` surface floating over other content, so it needs an accessible name of its own.',
|
|
19876
20056
|
"Wrap step transitions in `PromptPanelStage`, not a hand-rolled page swap - it owns the page-slide choreography and the reduced-motion fallback.",
|
|
19877
20057
|
],
|
|
20058
|
+
keywords: [],
|
|
19878
20059
|
uses: ["button", "flex", "grid", "icon", "kbd", "stack"],
|
|
19879
20060
|
usedBy: [],
|
|
19880
20061
|
anatomy: {
|
|
@@ -20305,6 +20486,7 @@ export const docsManifest = {
|
|
|
20305
20486
|
"Offer a way to the full page in the header's `actions` - a quick view previews, it does not replace the detail page.",
|
|
20306
20487
|
"A panel that docks beside the page (a cart) is a `Sidepanel`, not a quick view.",
|
|
20307
20488
|
],
|
|
20489
|
+
keywords: [],
|
|
20308
20490
|
uses: ["box", "button", "dialog", "flex", "grid", "scroll-area", "stack"],
|
|
20309
20491
|
usedBy: [],
|
|
20310
20492
|
},
|
|
@@ -20323,7 +20505,7 @@ export const docsManifest = {
|
|
|
20323
20505
|
name: "as",
|
|
20324
20506
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
20325
20507
|
required: false,
|
|
20326
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
20508
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Ref\nand event-handler types remain the default element\'s.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
20327
20509
|
},
|
|
20328
20510
|
{
|
|
20329
20511
|
name: "actions",
|
|
@@ -20383,6 +20565,7 @@ export const docsManifest = {
|
|
|
20383
20565
|
"Set `level` for the document outline and `size` for visual scale independently - a visually small header can still be an `h2`. Use `reserveEyebrowSpace` to keep an eyebrow-less header aligned beside sibling headers that have an eyebrow.",
|
|
20384
20566
|
"Use `as` to change the element (a tag); use `render` only to swap in a component (e.g. a router Link). Never `render={<Box as=…/>}` - pass `as` directly.",
|
|
20385
20567
|
],
|
|
20568
|
+
keywords: [],
|
|
20386
20569
|
uses: ["flex", "heading", "text"],
|
|
20387
20570
|
usedBy: [],
|
|
20388
20571
|
},
|
|
@@ -20539,6 +20722,7 @@ export const docsManifest = {
|
|
|
20539
20722
|
"The footer only renders when `onSave` is passed, and the Save button is gated on `dirty` (and disabled while `loading`) - wire form dirty state through, or the button stays disabled.",
|
|
20540
20723
|
"Give each card one cohesive group of settings with its own save; don't nest multiple `SettingsCard`s or share one across unrelated sections.",
|
|
20541
20724
|
],
|
|
20725
|
+
keywords: [],
|
|
20542
20726
|
uses: ["button", "card", "field", "flex"],
|
|
20543
20727
|
usedBy: [],
|
|
20544
20728
|
anatomy: {
|
|
@@ -20576,7 +20760,7 @@ export const docsManifest = {
|
|
|
20576
20760
|
module: "compositions/sidebar",
|
|
20577
20761
|
title: "Sidebar",
|
|
20578
20762
|
category: "navigation",
|
|
20579
|
-
description: 'The sidebar shell. Reads open/collapsed state from
|
|
20763
|
+
description: 'The sidebar shell. Reads open/collapsed state from `useSidebar`, so it\nmust render inside a `SidebarProvider`.\n\nAdapts by viewport and `collapsible`: an animated docked shell on desktop, a\nslide-in `Sheet` on mobile, or a static column when `collapsible="none"`.',
|
|
20580
20764
|
exports: [
|
|
20581
20765
|
{
|
|
20582
20766
|
name: "CONTENT_COLUMN_CLASS",
|
|
@@ -21224,7 +21408,7 @@ export const docsManifest = {
|
|
|
21224
21408
|
name: "dot",
|
|
21225
21409
|
type: 'boolean | "neutral" | "brand" | "danger" | "warning" | "success" | "info"',
|
|
21226
21410
|
required: false,
|
|
21227
|
-
description: "Dot indicator in the left column (takes precedence over icon): `true` for a neutral dot, or a
|
|
21411
|
+
description: "Dot indicator in the left column (takes precedence over icon): `true` for a neutral dot, or a `Tone` to tint it.",
|
|
21228
21412
|
},
|
|
21229
21413
|
{
|
|
21230
21414
|
name: "icon",
|
|
@@ -21537,6 +21721,7 @@ export const docsManifest = {
|
|
|
21537
21721
|
"Render `Sidebar` inside a `SidebarProvider` - it reads open/collapsed state from `useSidebar` and cannot work outside one.",
|
|
21538
21722
|
"Choose `collapsible` deliberately: `offcanvas` slides fully away, `icon` shrinks to a rail, `none` is a static column that never adapts to the mobile `Sheet`.",
|
|
21539
21723
|
],
|
|
21724
|
+
keywords: [],
|
|
21540
21725
|
uses: [
|
|
21541
21726
|
"button",
|
|
21542
21727
|
"center",
|
|
@@ -21650,7 +21835,7 @@ export const docsManifest = {
|
|
|
21650
21835
|
name: "as",
|
|
21651
21836
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
21652
21837
|
required: false,
|
|
21653
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
21838
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
21654
21839
|
},
|
|
21655
21840
|
{
|
|
21656
21841
|
name: "direction",
|
|
@@ -21836,7 +22021,7 @@ export const docsManifest = {
|
|
|
21836
22021
|
name: "as",
|
|
21837
22022
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
21838
22023
|
required: false,
|
|
21839
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
22024
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
21840
22025
|
},
|
|
21841
22026
|
{
|
|
21842
22027
|
name: "align",
|
|
@@ -21881,7 +22066,7 @@ export const docsManifest = {
|
|
|
21881
22066
|
name: "as",
|
|
21882
22067
|
type: '"dd" | "dt" | "figcaption" | "legend" | "li" | "p" | "span"',
|
|
21883
22068
|
required: false,
|
|
21884
|
-
description: 'Render as a different host element from the closed text vocabulary\n(
|
|
22069
|
+
description: 'Render as a different host element from the closed text vocabulary\n(`TextElement`). The set is deliberately closed and text-only:\n`as="div"` and `as="label"` are type errors (use Box for decorative\nwrappers, Label for form labels). Ref and event-handler types remain the\ndefault element\'s (HTMLParagraphElement).\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
21885
22070
|
},
|
|
21886
22071
|
{
|
|
21887
22072
|
name: "size",
|
|
@@ -21947,7 +22132,7 @@ export const docsManifest = {
|
|
|
21947
22132
|
name: "as",
|
|
21948
22133
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
21949
22134
|
required: false,
|
|
21950
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
22135
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
21951
22136
|
},
|
|
21952
22137
|
{
|
|
21953
22138
|
name: "ref",
|
|
@@ -21975,7 +22160,7 @@ export const docsManifest = {
|
|
|
21975
22160
|
name: "as",
|
|
21976
22161
|
type: '"div" | "article" | "aside" | "figcaption" | "figure" | "footer" | "header" | "li" | "main" | "nav" | "ol" | "section" | "span" | "ul"',
|
|
21977
22162
|
required: false,
|
|
21978
|
-
description: 'Render as a different host element from the closed layout vocabulary\n(
|
|
22163
|
+
description: 'Render as a different host element from the closed layout vocabulary\n(`LayoutElement`). The set is deliberately closed: `as="button"` is a\ntype error, because the design-system answer is the Button component. Event handlers\nand the ref accept any host element.\n\n`as` and `render` are mutually exclusive; if both are passed, `render`\nwins (a dev-only warning fires).',
|
|
21979
22164
|
},
|
|
21980
22165
|
{
|
|
21981
22166
|
name: "ref",
|
|
@@ -22018,6 +22203,7 @@ export const docsManifest = {
|
|
|
22018
22203
|
"Render it after the page's `<main>`, not inside it, so it stays the page's own footer landmark.",
|
|
22019
22204
|
"Keep it to a lead, one nav and one bar. Four columns of a few links each is the shape it is set for.",
|
|
22020
22205
|
],
|
|
22206
|
+
keywords: [],
|
|
22021
22207
|
uses: [
|
|
22022
22208
|
"anchor",
|
|
22023
22209
|
"box",
|
|
@@ -22035,7 +22221,7 @@ export const docsManifest = {
|
|
|
22035
22221
|
module: "compositions/swatch-fan",
|
|
22036
22222
|
title: "SwatchFan",
|
|
22037
22223
|
category: "catalogue",
|
|
22038
|
-
description: 'A fanned stack of
|
|
22224
|
+
description: 'A fanned stack of `Swatch` tiles: a fixed three-card editorial fan or\nan interactive N-tile splay.\n\nPass 3 `items` with `interaction="breathe"` for the editorial fan (Figma\ngeometry, `variant` spread/stack, white 3px mount via `bordered`); pass N\n`items` with `interaction="hover-fan"` for the interactive splay-on-hover with\npointer tilt. `bordered={false}` swaps the white mount for the 1px hairline\ntile.',
|
|
22039
22225
|
exports: [
|
|
22040
22226
|
{
|
|
22041
22227
|
name: "SwatchFan",
|
|
@@ -22225,6 +22411,7 @@ export const docsManifest = {
|
|
|
22225
22411
|
"Needs `ReducedMotionProvider`; it already collapses the mount fan-out, hover nudge, and splay under reduced motion (snapping to the settled frame), so don't gate the interaction yourself.",
|
|
22226
22412
|
"`bordered` is the mount-as-a-prop: `true` = white 3px card mount, `false` = 1px hairline - don't hand-roll either border in a wrapper.",
|
|
22227
22413
|
],
|
|
22414
|
+
keywords: [],
|
|
22228
22415
|
uses: ["center", "flex", "swatch"],
|
|
22229
22416
|
usedBy: ["editorial-card", "folder-tile"],
|
|
22230
22417
|
},
|
|
@@ -22530,6 +22717,7 @@ export const docsManifest = {
|
|
|
22530
22717
|
"A custom `trigger` render-prop is passed to `PopoverTrigger` as `render`, so return a single element that forwards its ref/props (e.g. a `Button`).",
|
|
22531
22718
|
"Use `singleSelect` when only one tag may be chosen; for a fixed, non-editable list prefer `Combobox`/multi-`Select` and reserve `TagSelector` for managing the tag set itself.",
|
|
22532
22719
|
],
|
|
22720
|
+
keywords: [],
|
|
22533
22721
|
uses: [
|
|
22534
22722
|
"button",
|
|
22535
22723
|
"dot",
|
|
@@ -22618,6 +22806,7 @@ export const docsManifest = {
|
|
|
22618
22806
|
bestPractices: [
|
|
22619
22807
|
"Pair above streaming answers in chat. Use ThinkingLoader when you only need a one-line narrated header without an expandable timeline.",
|
|
22620
22808
|
],
|
|
22809
|
+
keywords: [],
|
|
22621
22810
|
uses: ["center", "flex", "grid", "icon", "text"],
|
|
22622
22811
|
usedBy: [],
|
|
22623
22812
|
},
|
|
@@ -22742,6 +22931,7 @@ export const docsManifest = {
|
|
|
22742
22931
|
"`defaultValue` is uncontrolled: the selector tracks later picks itself. Pass `value` with `onValueChange` to control it.",
|
|
22743
22932
|
"Use `VariantSelector` for image/colour swatch pickers; for a labelled icon-over-text option grid use `IconCard`, and for plain radio/checkbox lists use `RadioGroup`/`Checkbox`.",
|
|
22744
22933
|
],
|
|
22934
|
+
keywords: [],
|
|
22745
22935
|
uses: ["flex", "swatch"],
|
|
22746
22936
|
usedBy: ["product-specifications-selector"],
|
|
22747
22937
|
},
|
|
@@ -22822,7 +23012,7 @@ export const docsManifest = {
|
|
|
22822
23012
|
statement: "The six src layers form a strict one-directional dependency matrix (data ← tokens ← utils ← hooks ← components ← compositions); tokens additionally take no external packages.",
|
|
22823
23013
|
gates: [
|
|
22824
23014
|
{
|
|
22825
|
-
path: "packages/ui/scripts/layer-matrix.
|
|
23015
|
+
path: "packages/ui/scripts/layer-matrix.ts",
|
|
22826
23016
|
doctrine: "Each src layer may import only from the layers at or below it (data ← tokens ← utils ← hooks ← components ← compositions); tokens additionally stay free of external packages, except statement-level type-only imports which erase at build time.",
|
|
22827
23017
|
},
|
|
22828
23018
|
],
|
|
@@ -22867,7 +23057,7 @@ export const docsManifest = {
|
|
|
22867
23057
|
statement: "The full public export surface is captured as resolved-type hashes in api-report.md; any change to a public signature flips a hash and fails the gate until the report is regenerated and reviewed.",
|
|
22868
23058
|
gates: [
|
|
22869
23059
|
{
|
|
22870
|
-
path: "packages/ui/scripts/generate-api-report.
|
|
23060
|
+
path: "packages/ui/scripts/generate-api-report.ts",
|
|
22871
23061
|
doctrine: null,
|
|
22872
23062
|
},
|
|
22873
23063
|
],
|