@instruments/materia-ui 0.4.7 → 0.4.9

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.
Files changed (33) hide show
  1. package/agent-docs.md +4 -2
  2. package/dist/components/code/code-root.d.ts +1 -1
  3. package/dist/components/code/code-root.js +4 -1
  4. package/dist/components/combobox/combobox-root.js +3 -3
  5. package/dist/components/command/command-list.d.ts +1 -1
  6. package/dist/components/command/command-list.js +3 -2
  7. package/dist/components/country-combobox/country-combobox-root.d.ts +1 -1
  8. package/dist/components/input-group/input-group-button.d.ts +2 -2
  9. package/dist/components/location-input/location-input-root.js +9 -4
  10. package/dist/components/scroll-frame/scroll-frame-root.d.ts +18 -5
  11. package/dist/components/scroll-frame/scroll-frame-root.js +49 -17
  12. package/dist/components/scroll-frame.d.ts +1 -1
  13. package/dist/components/select/select-trigger.d.ts +1 -1
  14. package/dist/components/sidepanel/sidepanel-body.d.ts +4 -3
  15. package/dist/components/sidepanel/sidepanel-body.js +6 -4
  16. package/dist/components/swatch-group/swatch-group-item.d.ts +1 -1
  17. package/dist/components/swatch-selector/swatch-selector-item.d.ts +1 -1
  18. package/dist/components/table/table-root.d.ts +1 -1
  19. package/dist/components/table/table-root.js +3 -2
  20. package/dist/compositions/data-grid-column-filter/data-grid-column-filter-root.js +2 -1
  21. package/dist/compositions/data-grid-table/data-grid-table-root.js +2 -1
  22. package/dist/compositions/mega-menu/mega-menu-content.js +3 -2
  23. package/dist/compositions/mobile-navigation/mobile-navigation-header.d.ts +1 -1
  24. package/dist/compositions/quick-view/quick-view-body.d.ts +1 -1
  25. package/dist/compositions/sidebar/sidebar-content.d.ts +1 -1
  26. package/dist/compositions/sidebar/sidebar-content.js +3 -2
  27. package/dist/compositions/sidebar/sidebar-group.d.ts +1 -1
  28. package/dist/compositions/sidebar/sidebar-menu-sub.d.ts +2 -2
  29. package/dist/compositions/sidebar/sidebar-menu-sub.js +2 -1
  30. package/dist/compositions/sidebar/sidebar-trigger.d.ts +1 -1
  31. package/dist/compositions/tag-selector/tag-selector-list.js +4 -3
  32. package/dist/data/docs-manifest.js +270 -221
  33. package/package.json +1 -1
package/dist/data/docs-manifest.js CHANGED
@@ -2403,7 +2403,7 @@ export const docsManifest = {
2403
2403
  type: "boolean",
2404
2404
  required: false,
2405
2405
  defaultValue: "false",
2406
- description: "Render a multi-line block (`<pre><code>`) instead of inline `<code>`. The\nblock scrolls horizontally rather than wrapping.",
2406
+ description: "Render a multi-line block (`<pre><code>`) instead of inline `<code>`. The\nblock scrolls horizontally, in a `ScrollFrame`, rather than wrapping.",
2407
2407
  },
2408
2408
  ],
2409
2409
  },
@@ -2418,7 +2418,7 @@ export const docsManifest = {
2418
2418
  "`block` renders `<pre><code>` that scrolls horizontally; add `whitespace-pre-wrap` via `className` only when wrapping beats scrolling (long prose-like messages).",
2419
2419
  ],
2420
2420
  keywords: [],
2421
- uses: [],
2421
+ uses: ["scroll-frame"],
2422
2422
  usedBy: [],
2423
2423
  },
2424
2424
  {
@@ -2634,7 +2634,7 @@ export const docsManifest = {
2634
2634
  "Provide `items` as `{ label, value }[]` - the visible text comes from `label` while selection is tracked by `value`.",
2635
2635
  ],
2636
2636
  keywords: ["autocomplete", "typeahead", "searchable select"],
2637
- uses: ["button", "flex", "icon"],
2637
+ uses: ["button", "flex", "icon", "scroll-frame"],
2638
2638
  usedBy: ["country-combobox"],
2639
2639
  },
2640
2640
  {
@@ -2845,7 +2845,7 @@ export const docsManifest = {
2845
2845
  "A plain click-triggered action menu is `DropdownMenu`; a remembered selection is `Combobox`.",
2846
2846
  ],
2847
2847
  keywords: ["command palette", "spotlight", "cmd+k", "quick search"],
2848
- uses: ["dialog", "flex", "icon"],
2848
+ uses: ["dialog", "flex", "icon", "scroll-frame"],
2849
2849
  usedBy: [],
2850
2850
  anatomy: {
2851
2851
  children: [
@@ -3371,12 +3371,6 @@ export const docsManifest = {
3371
3371
  required: false,
3372
3372
  description: "Whether disabled",
3373
3373
  },
3374
- {
3375
- name: "onValueChange",
3376
- type: "((value: string) => void) & ((countryCode: string) => void)",
3377
- required: false,
3378
- description: 'Called with the selected value, or `""` when the selection is toggled off.\nValue change handler - receives ISO country code',
3379
- },
3380
3374
  {
3381
3375
  name: "size",
3382
3376
  type: "ResponsiveSize",
@@ -3421,6 +3415,12 @@ export const docsManifest = {
3421
3415
  required: false,
3422
3416
  description: "Current country code (ISO 3166-1 alpha-2) or country name",
3423
3417
  },
3418
+ {
3419
+ name: "onValueChange",
3420
+ type: "(countryCode: string) => void",
3421
+ required: false,
3422
+ description: "Value change handler - receives ISO country code",
3423
+ },
3424
3424
  ],
3425
3425
  },
3426
3426
  ],
@@ -6190,20 +6190,6 @@ export const docsManifest = {
6190
6190
  required: false,
6191
6191
  description: 'Replace the rendered `<button>` with another element or component\n(e.g. `<Link href="…" />`); styling, decorations and props are applied to it.',
6192
6192
  },
6193
- {
6194
- name: "tone",
6195
- type: '"neutral" | "brand" | "danger"',
6196
- required: false,
6197
- defaultValue: '"neutral"',
6198
- description: "Semantic colour: `brand` for the primary action, `danger` for a destructive one.\nSemantic colour, as on Button.",
6199
- },
6200
- {
6201
- name: "radius",
6202
- type: '"rounded" | "square" | "full" | null | undefined',
6203
- required: false,
6204
- defaultValue: '"full"',
6205
- description: "Corner shape: `full` is a pill (or circle when square), `rounded` a soft corner, `square` sharp.\nCorner shape; leave unset - the corners follow the InputGroup's `radius`, tighter inside the field.",
6206
- },
6207
6193
  {
6208
6194
  name: "dot",
6209
6195
  type: "string | undefined",
@@ -6217,26 +6203,6 @@ export const docsManifest = {
6217
6203
  defaultValue: "false",
6218
6204
  description: "Show a spinner and block presses. The button stays focusable (it is\n`aria-disabled`, not natively disabled) so keyboard focus is kept.",
6219
6205
  },
6220
- {
6221
- name: "square",
6222
- type: "boolean | null | undefined",
6223
- required: false,
6224
- defaultValue: "false",
6225
- description: "Lock width to height so an `icon-*` size draws a square or circle; ignored with `expandable`.\nSquare by default, as an icon button sized from the InputGroup.",
6226
- },
6227
- {
6228
- name: "icon",
6229
- type: 'import("../../tokens/icon-component").IconComponent & (LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>)',
6230
- required: false,
6231
- description: "Leading icon (Lucide or SVG component); with no children it becomes an icon-only button.\nIcon to display.",
6232
- },
6233
- {
6234
- name: "emphasis",
6235
- type: '"link" | "outline" | "solid" | "ghost" | "soft" | "transparent"',
6236
- required: false,
6237
- defaultValue: '"solid"',
6238
- description: "Visual weight, paired with `tone`: `solid` and `soft` are filled, `outline` and `ghost` lighter, `transparent` a blurred translucent fill, `link` plain text.\nVisual weight, as on Button; ghost keeps the button quiet inside the field.",
6239
- },
6240
6206
  {
6241
6207
  name: "asInput",
6242
6208
  type: "boolean | null | undefined",
@@ -6314,6 +6280,39 @@ export const docsManifest = {
6314
6280
  defaultValue: '"start"',
6315
6281
  description: "Dot position relative to content.",
6316
6282
  },
6283
+ {
6284
+ name: "icon",
6285
+ type: "LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>",
6286
+ required: false,
6287
+ description: "Icon shown in the button, passed as a component (such as a Lucide icon); with no children the button is icon-only.",
6288
+ },
6289
+ {
6290
+ name: "tone",
6291
+ type: "ButtonTone",
6292
+ required: false,
6293
+ defaultValue: '"neutral"',
6294
+ description: "Semantic colour, as on Button.",
6295
+ },
6296
+ {
6297
+ name: "emphasis",
6298
+ type: "ButtonEmphasis",
6299
+ required: false,
6300
+ defaultValue: '"ghost"',
6301
+ description: "Visual weight, as on Button; ghost keeps the button quiet inside the field.",
6302
+ },
6303
+ {
6304
+ name: "radius",
6305
+ type: '"rounded" | "square" | "full" | null | undefined',
6306
+ required: false,
6307
+ description: "Corner shape; leave unset - the corners follow the InputGroup's `radius`, tighter inside the field.",
6308
+ },
6309
+ {
6310
+ name: "square",
6311
+ type: "boolean | null | undefined",
6312
+ required: false,
6313
+ defaultValue: "true",
6314
+ description: "Square by default, as an icon button sized from the InputGroup.",
6315
+ },
6317
6316
  ],
6318
6317
  },
6319
6318
  {
@@ -6915,7 +6914,7 @@ export const docsManifest = {
6915
6914
  'Pick `mode="city"` vs `"address"` to scope the geocoding; drive it controlled via the `Location` `value` + `onChange` (which also fires on clear).',
6916
6915
  ],
6917
6916
  keywords: [],
6918
- uses: ["button", "icon", "menu-item"],
6917
+ uses: ["button", "icon", "menu-item", "scroll-frame"],
6919
6918
  usedBy: [],
6920
6919
  },
6921
6920
  {
@@ -9481,6 +9480,12 @@ export const docsManifest = {
9481
9480
  type: "string | undefined",
9482
9481
  required: false,
9483
9482
  },
9483
+ {
9484
+ name: "contentClassName",
9485
+ type: "string | undefined",
9486
+ required: false,
9487
+ description: "Classes for the element holding the children, inside the scrolling one.\nA vertical frame's content is already as wide as the frame, so text wraps\nand `w-full` children fill it; a horizontal or two-way frame's content is\nas wide as its widest child.",
9488
+ },
9484
9489
  {
9485
9490
  name: "controls",
9486
9491
  type: "boolean | undefined",
@@ -9532,10 +9537,10 @@ export const docsManifest = {
9532
9537
  },
9533
9538
  {
9534
9539
  name: "orientation",
9535
- type: "Orientation | undefined",
9540
+ type: "ScrollFrameOrientation | undefined",
9536
9541
  required: false,
9537
9542
  defaultValue: '"vertical"',
9538
- description: "Scroll axis: `vertical` scrolls up and down, `horizontal` left and right, as for a row of chips.",
9543
+ description: "Scroll axis: `vertical` scrolls up and down, `horizontal` left and right, as for a row of chips, and `both` either way, as for a wide table. Controls and drag follow the vertical axis when both scroll.",
9539
9544
  },
9540
9545
  {
9541
9546
  name: "viewportClassName",
@@ -9543,6 +9548,12 @@ export const docsManifest = {
9543
9548
  required: false,
9544
9549
  description: "Classes for the scrolling element.",
9545
9550
  },
9551
+ {
9552
+ name: "viewportRef",
9553
+ type: "Ref<HTMLDivElement | null> | undefined",
9554
+ required: false,
9555
+ description: "The scrolling element, for a virtualiser or anything else that reads or sets its scroll position.",
9556
+ },
9546
9557
  ],
9547
9558
  },
9548
9559
  {
@@ -9555,6 +9566,11 @@ export const docsManifest = {
9555
9566
  kind: "type",
9556
9567
  props: [],
9557
9568
  },
9569
+ {
9570
+ name: "ScrollFrameOrientation",
9571
+ kind: "type",
9572
+ props: [],
9573
+ },
9558
9574
  {
9559
9575
  name: "ScrollFrameProps",
9560
9576
  kind: "interface",
@@ -9566,10 +9582,25 @@ export const docsManifest = {
9566
9582
  'Give a vertical frame a bounded height (`className="h-80"`); a horizontal one needs only a bounded width, which a flex child with `min-w-0` already has.',
9567
9583
  'Match `fadeTheme` to the surface behind the frame (`card` inside a Card). Over an image or a blur, use `fadeMode="mask"` instead.',
9568
9584
  "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.",
9585
+ 'Every scrolling region in an app is a `ScrollFrame`, not a hand-rolled `overflow-y-auto` div: a pane, a list in a popover, a wide table (`orientation="both"`). A frame capped by `max-h-*` alone scrolls once its content passes the cap.',
9586
+ "Hand a virtualiser the scrolling element through `viewportRef`.",
9569
9587
  ],
9570
9588
  keywords: [],
9571
9589
  uses: ["button", "scroll-area", "scroll-fade"],
9572
- usedBy: ["page-toolbar"],
9590
+ usedBy: [
9591
+ "code",
9592
+ "combobox",
9593
+ "command",
9594
+ "data-grid-column-filter",
9595
+ "data-grid-table",
9596
+ "location-input",
9597
+ "mega-menu",
9598
+ "page-toolbar",
9599
+ "sidebar",
9600
+ "sidepanel",
9601
+ "table",
9602
+ "tag-selector",
9603
+ ],
9573
9604
  },
9574
9605
  {
9575
9606
  slug: "search-input",
@@ -9977,37 +10008,37 @@ export const docsManifest = {
9977
10008
  kind: "component",
9978
10009
  props: [
9979
10010
  {
9980
- name: "tone",
9981
- type: '"neutral" | "brand" | "danger" | null | undefined',
10011
+ name: "className",
10012
+ type: "string",
9982
10013
  required: false,
9983
- defaultValue: '"neutral"',
9984
- description: "Semantic colour: `brand` for the primary action, `danger` for a destructive one.\nSemantic colour of the trigger, as on Button.",
9985
10014
  },
9986
10015
  {
9987
- name: "radius",
9988
- type: '"rounded" | "square" | "full" | null | undefined',
10016
+ name: "tone",
10017
+ type: '"neutral" | "brand" | "danger" | null | undefined',
9989
10018
  required: false,
9990
- defaultValue: '"full"',
9991
- description: "Corner shape: `full` is a pill (or circle when square), `rounded` a soft corner, `square` sharp.\nCorner shape, as on Button.",
10019
+ defaultValue: '"neutral"',
10020
+ description: "Semantic colour of the trigger, as on Button.",
9992
10021
  },
9993
10022
  {
9994
10023
  name: "emphasis",
9995
10024
  type: '"link" | "outline" | "solid" | "ghost" | "soft" | "transparent" | null | undefined',
9996
10025
  required: false,
9997
- defaultValue: '"solid"',
9998
- description: "Visual weight, paired with `tone`: `solid` and `soft` are filled, `outline` and `ghost` lighter, `transparent` a blurred translucent fill, `link` plain text.\nVisual weight, as on Button; the outline reads as a form field.",
10026
+ defaultValue: '"outline"',
10027
+ description: "Visual weight, as on Button; the outline reads as a form field.",
9999
10028
  },
10000
10029
  {
10001
- name: "pressed",
10002
- type: "boolean | null | undefined",
10030
+ name: "radius",
10031
+ type: '"rounded" | "square" | "full" | null | undefined',
10003
10032
  required: false,
10004
- defaultValue: "true",
10005
- description: "Shrink slightly while held down (`:active`); `false` keeps the button still.\nShrink while held down, as on Button, but off by default here.",
10033
+ defaultValue: '"rounded"',
10034
+ description: "Corner shape, as on Button.",
10006
10035
  },
10007
10036
  {
10008
- name: "className",
10009
- type: "string",
10037
+ name: "pressed",
10038
+ type: "boolean | null | undefined",
10010
10039
  required: false,
10040
+ defaultValue: "false",
10041
+ description: "Shrink while held down, as on Button, but off by default here.",
10011
10042
  },
10012
10043
  {
10013
10044
  name: "size",
@@ -10760,7 +10791,7 @@ export const docsManifest = {
10760
10791
  "Compose nested panels with `SidepanelNestedRoot`, and always render a `SidepanelTitle` for the accessible name.",
10761
10792
  ],
10762
10793
  keywords: [],
10763
- uses: ["button", "flex", "stack"],
10794
+ uses: ["button", "flex", "scroll-frame", "stack"],
10764
10795
  usedBy: [],
10765
10796
  anatomy: {
10766
10797
  children: [
@@ -11998,16 +12029,16 @@ export const docsManifest = {
11998
12029
  kind: "component",
11999
12030
  props: [
12000
12031
  {
12001
- name: "aria-label",
12032
+ name: "color",
12002
12033
  type: "string",
12003
12034
  required: false,
12004
- description: "Defines a string value that labels the current element.\nAccessible label for screen readers.",
12035
+ description: "CSS colour value (hex, rgb, hsl, etc.).\nIf provided along with children, children render on top.",
12005
12036
  },
12006
12037
  {
12007
- name: "color",
12038
+ name: "aria-label",
12008
12039
  type: "string",
12009
12040
  required: false,
12010
- description: "CSS colour value (hex, rgb, hsl, etc.).\nIf provided along with children, children render on top.",
12041
+ description: "Accessible label for screen readers.",
12011
12042
  },
12012
12043
  {
12013
12044
  name: "children",
@@ -12050,18 +12081,18 @@ export const docsManifest = {
12050
12081
  required: false,
12051
12082
  description: "CSS colour value (hex, rgb, hsl, etc.).\nIf provided along with children, children render on top.",
12052
12083
  },
12053
- {
12054
- name: "aria-label",
12055
- type: "string",
12056
- required: false,
12057
- description: "Defines a string value that labels the current element.\nAccessible label for screen readers.",
12058
- },
12059
12084
  {
12060
12085
  name: "value",
12061
12086
  type: "string",
12062
12087
  required: true,
12063
12088
  description: "Unique value for this swatch",
12064
12089
  },
12090
+ {
12091
+ name: "aria-label",
12092
+ type: "string",
12093
+ required: false,
12094
+ description: "Accessible label for screen readers.",
12095
+ },
12065
12096
  {
12066
12097
  name: "children",
12067
12098
  type: 'import("react").ReactNode',
@@ -12128,18 +12159,18 @@ export const docsManifest = {
12128
12159
  required: false,
12129
12160
  description: "CSS colour value (hex, rgb, hsl, etc.).\nIf provided along with children, children render on top.",
12130
12161
  },
12131
- {
12132
- name: "aria-label",
12133
- type: "string",
12134
- required: false,
12135
- description: "Defines a string value that labels the current element.\nAccessible label for screen readers.",
12136
- },
12137
12162
  {
12138
12163
  name: "value",
12139
12164
  type: "string",
12140
12165
  required: true,
12141
12166
  description: "Unique value for this swatch",
12142
12167
  },
12168
+ {
12169
+ name: "aria-label",
12170
+ type: "string",
12171
+ required: false,
12172
+ description: "Accessible label for screen readers.",
12173
+ },
12143
12174
  {
12144
12175
  name: "children",
12145
12176
  type: 'import("react").ReactNode',
@@ -12335,7 +12366,7 @@ export const docsManifest = {
12335
12366
  module: "components/table",
12336
12367
  title: "Table",
12337
12368
  category: "data",
12338
- description: "Semantic `<table>` primitive, wrapped in a horizontally scrollable container\nso wide tables overflow rather than break layout. Compose with the exported\n`TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`,\n`TableFooter`, and `TableCaption` parts.",
12369
+ description: "Semantic `<table>` primitive, wrapped in a horizontal `ScrollFrame`\nso wide tables overflow rather than break layout. Compose with the exported\n`TableHeader`, `TableBody`, `TableRow`, `TableHead`, `TableCell`,\n`TableFooter`, and `TableCaption` parts.",
12339
12370
  exports: [
12340
12371
  {
12341
12372
  name: "Table",
@@ -12384,7 +12415,7 @@ export const docsManifest = {
12384
12415
  "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.",
12385
12416
  ],
12386
12417
  keywords: [],
12387
- uses: [],
12418
+ uses: ["scroll-frame"],
12388
12419
  usedBy: [],
12389
12420
  },
12390
12421
  {
@@ -14812,7 +14843,15 @@ export const docsManifest = {
14812
14843
  "The typed search survives each pick, so several matches can be ticked from one query; it resets when the popup closes.",
14813
14844
  ],
14814
14845
  keywords: [],
14815
- uses: ["badge", "button", "center", "flex", "icon", "separator"],
14846
+ uses: [
14847
+ "badge",
14848
+ "button",
14849
+ "center",
14850
+ "flex",
14851
+ "icon",
14852
+ "scroll-frame",
14853
+ "separator",
14854
+ ],
14816
14855
  usedBy: [],
14817
14856
  },
14818
14857
  {
@@ -15276,7 +15315,7 @@ export const docsManifest = {
15276
15315
  "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.",
15277
15316
  ],
15278
15317
  keywords: [],
15279
- uses: ["center", "data-grid", "flex", "spinner"],
15318
+ uses: ["center", "data-grid", "flex", "scroll-frame", "spinner"],
15280
15319
  usedBy: [],
15281
15320
  },
15282
15321
  {
@@ -16729,7 +16768,15 @@ export const docsManifest = {
16729
16768
  "Keep it to navigation. Every entry is a `MegaMenuLink`, which closes the menu as it navigates; actions belong in a `DropdownMenu`.",
16730
16769
  ],
16731
16770
  keywords: [],
16732
- uses: ["anchor", "box", "grid", "heading", "popover", "stack"],
16771
+ uses: [
16772
+ "anchor",
16773
+ "box",
16774
+ "grid",
16775
+ "heading",
16776
+ "popover",
16777
+ "scroll-frame",
16778
+ "stack",
16779
+ ],
16733
16780
  usedBy: [],
16734
16781
  },
16735
16782
  {
@@ -17507,6 +17554,12 @@ export const docsManifest = {
17507
17554
  name: "MobileNavigationHeaderAction",
17508
17555
  kind: "component",
17509
17556
  props: [
17557
+ {
17558
+ name: "render",
17559
+ type: "useRender.RenderProp<Record<string, unknown>> | undefined",
17560
+ required: false,
17561
+ description: 'Replace the rendered `<button>` with another element or component\n(e.g. `<Link href="…" />`); styling, decorations and props are applied to it.',
17562
+ },
17510
17563
  {
17511
17564
  name: "tone",
17512
17565
  type: '"neutral" | "brand" | "danger" | null | undefined',
@@ -17521,6 +17574,26 @@ export const docsManifest = {
17521
17574
  defaultValue: '"full"',
17522
17575
  description: "Corner shape: `full` is a pill (or circle when square), `rounded` a soft corner, `square` sharp.",
17523
17576
  },
17577
+ {
17578
+ name: "size",
17579
+ type: "ButtonSizeProp",
17580
+ required: false,
17581
+ defaultValue: '"base"',
17582
+ description: 'Size token; `icon-*` variants produce a square icon-only button. Also\naccepts a responsive object keyed by viewport breakpoints and/or `@`-prefixed\ncontainer queries - e.g. `{ base: "sm", md: "base", "@sm": "lg" }`.',
17583
+ },
17584
+ {
17585
+ name: "dot",
17586
+ type: "string | undefined",
17587
+ required: false,
17588
+ description: "CSS colour for a status dot; empty/undefined renders no dot.",
17589
+ },
17590
+ {
17591
+ name: "loading",
17592
+ type: "boolean | undefined",
17593
+ required: false,
17594
+ defaultValue: "false",
17595
+ description: "Show a spinner and block presses. The button stays focusable (it is\n`aria-disabled`, not natively disabled) so keyboard focus is kept.",
17596
+ },
17524
17597
  {
17525
17598
  name: "square",
17526
17599
  type: "boolean | null | undefined",
@@ -17529,11 +17602,10 @@ export const docsManifest = {
17529
17602
  description: "Lock width to height so an `icon-*` size draws a square or circle; ignored with `expandable`.",
17530
17603
  },
17531
17604
  {
17532
- name: "emphasis",
17533
- type: '"link" | "outline" | "solid" | "ghost" | "soft" | "transparent" | null | undefined',
17605
+ name: "icon",
17606
+ type: "IconComponent | undefined",
17534
17607
  required: false,
17535
- defaultValue: '"solid"',
17536
- description: "Visual weight, paired with `tone`: `solid` and `soft` are filled, `outline` and `ghost` lighter, `transparent` a blurred translucent fill, `link` plain text.\nVisual weight, as on Button.",
17608
+ description: "Leading icon (Lucide or SVG component); with no children it becomes an icon-only button.",
17537
17609
  },
17538
17610
  {
17539
17611
  name: "asInput",
@@ -17557,48 +17629,47 @@ export const docsManifest = {
17557
17629
  description: "Shrink slightly while held down (`:active`); `false` keeps the button still.",
17558
17630
  },
17559
17631
  {
17560
- name: "size",
17561
- type: "ButtonSizeProp",
17632
+ name: "testId",
17633
+ type: "string",
17562
17634
  required: false,
17563
- defaultValue: '"base"',
17564
- description: 'Size token; `icon-*` variants produce a square icon-only button. Also\naccepts a responsive object keyed by viewport breakpoints and/or `@`-prefixed\ncontainer queries - e.g. `{ base: "sm", md: "base", "@sm": "lg" }`.',
17635
+ description: "Rendered as `data-testid`, for Playwright selectors.",
17565
17636
  },
17566
17637
  {
17567
- name: "render",
17568
- type: "useRender.RenderProp<Record<string, unknown>> | undefined",
17638
+ name: "suffixIcon",
17639
+ type: "IconComponent | undefined",
17569
17640
  required: false,
17570
- description: 'Replace the rendered `<button>` with another element or component\n(e.g. `<Link href="…" />`); styling, decorations and props are applied to it.',
17641
+ description: "Trailing icon (Lucide or SVG component) rendered at the end.",
17571
17642
  },
17572
17643
  {
17573
- name: "loading",
17644
+ name: "expandable",
17574
17645
  type: "boolean | undefined",
17575
17646
  required: false,
17576
17647
  defaultValue: "false",
17577
- description: "Show a spinner and block presses. The button stays focusable (it is\n`aria-disabled`, not natively disabled) so keyboard focus is kept.",
17648
+ description: "Icon-only at rest; expands on hover/focus-visible to reveal the label\nto the right of the icon. Collapsed geometry equals the matching icon-*\nsize, expanded equals the text button of that size - so pass a text\nsize (`sm`/`base`/`lg`) OR its icon twin (`icon-sm` …); both resolve\nidentically. Requires both `icon` and children; ignored with `square`. The label stays in the DOM in both states (stable\naccessible name).",
17578
17649
  },
17579
17650
  {
17580
- name: "loadingLabel",
17581
- type: "string | undefined",
17651
+ name: "focused",
17652
+ type: "boolean | undefined",
17582
17653
  required: false,
17583
- description: "Label shown in place of `children` while `loading`.",
17654
+ description: "Force the focus ring on - for documentation/testing only.",
17584
17655
  },
17585
17656
  {
17586
- name: "icon",
17587
- type: "IconComponent | undefined",
17657
+ name: "hovered",
17658
+ type: "boolean | undefined",
17588
17659
  required: false,
17589
- description: "Leading icon (Lucide or SVG component); with no children it becomes an icon-only button.",
17660
+ description: "Force the hover state on - for documentation/testing only.",
17590
17661
  },
17591
17662
  {
17592
- name: "iconClassName",
17663
+ name: "loadingLabel",
17593
17664
  type: "string | undefined",
17594
17665
  required: false,
17595
- description: "Extra classes for the leading icon.",
17666
+ description: "Label shown in place of `children` while `loading`.",
17596
17667
  },
17597
17668
  {
17598
- name: "suffixIcon",
17599
- type: "IconComponent | undefined",
17669
+ name: "iconClassName",
17670
+ type: "string | undefined",
17600
17671
  required: false,
17601
- description: "Trailing icon (Lucide or SVG component) rendered at the end.",
17672
+ description: "Extra classes for the leading icon.",
17602
17673
  },
17603
17674
  {
17604
17675
  name: "suffixIconClassName",
@@ -17606,12 +17677,6 @@ export const docsManifest = {
17606
17677
  required: false,
17607
17678
  description: "Extra classes for the trailing icon.",
17608
17679
  },
17609
- {
17610
- name: "dot",
17611
- type: "string | undefined",
17612
- required: false,
17613
- description: "CSS colour for a status dot; empty/undefined renders no dot.",
17614
- },
17615
17680
  {
17616
17681
  name: "dotPlacement",
17617
17682
  type: '"end" | "start" | undefined',
@@ -17620,29 +17685,11 @@ export const docsManifest = {
17620
17685
  description: "Dot position relative to content.",
17621
17686
  },
17622
17687
  {
17623
- name: "expandable",
17624
- type: "boolean | undefined",
17625
- required: false,
17626
- defaultValue: "false",
17627
- description: "Icon-only at rest; expands on hover/focus-visible to reveal the label\nto the right of the icon. Collapsed geometry equals the matching icon-*\nsize, expanded equals the text button of that size - so pass a text\nsize (`sm`/`base`/`lg`) OR its icon twin (`icon-sm` …); both resolve\nidentically. Requires both `icon` and children; ignored with `square`. The label stays in the DOM in both states (stable\naccessible name).",
17628
- },
17629
- {
17630
- name: "focused",
17631
- type: "boolean | undefined",
17632
- required: false,
17633
- description: "Force the focus ring on - for documentation/testing only.",
17634
- },
17635
- {
17636
- name: "hovered",
17637
- type: "boolean | undefined",
17688
+ name: "emphasis",
17689
+ type: '"link" | "outline" | "solid" | "ghost" | "soft" | "transparent" | null | undefined',
17638
17690
  required: false,
17639
- description: "Force the hover state on - for documentation/testing only.",
17640
- },
17641
- {
17642
- name: "testId",
17643
- type: "string",
17644
- required: false,
17645
- description: "Rendered as `data-testid`, for Playwright selectors.",
17691
+ defaultValue: '"soft"',
17692
+ description: "Visual weight, as on Button.",
17646
17693
  },
17647
17694
  ],
17648
17695
  },
@@ -20614,12 +20661,6 @@ export const docsManifest = {
20614
20661
  type: "string",
20615
20662
  required: false,
20616
20663
  },
20617
- {
20618
- name: "aria-label",
20619
- type: "string",
20620
- required: true,
20621
- description: 'Defines a string value that labels the current element.\nNames the scrolling region for assistive tech, e.g. "Product details".',
20622
- },
20623
20664
  {
20624
20665
  name: "allowOverflow",
20625
20666
  type: "boolean",
@@ -20638,6 +20679,12 @@ export const docsManifest = {
20638
20679
  required: false,
20639
20680
  description: "Additional classes for the viewport (scrolling container)",
20640
20681
  },
20682
+ {
20683
+ name: "aria-label",
20684
+ type: "string",
20685
+ required: true,
20686
+ description: 'Names the scrolling region for assistive tech, e.g. "Product details".',
20687
+ },
20641
20688
  ],
20642
20689
  },
20643
20690
  {
@@ -21408,6 +21455,12 @@ export const docsManifest = {
21408
21455
  name: "SidebarGroupAction",
21409
21456
  kind: "component",
21410
21457
  props: [
21458
+ {
21459
+ name: "render",
21460
+ type: "useRender.RenderProp<Record<string, unknown>> | undefined",
21461
+ required: false,
21462
+ description: 'Replace the rendered `<button>` with another element or component\n(e.g. `<Link href="…" />`); styling, decorations and props are applied to it.',
21463
+ },
21411
21464
  {
21412
21465
  name: "tone",
21413
21466
  type: '"neutral" | "brand" | "danger" | null | undefined',
@@ -21422,6 +21475,19 @@ export const docsManifest = {
21422
21475
  defaultValue: '"full"',
21423
21476
  description: "Corner shape: `full` is a pill (or circle when square), `rounded` a soft corner, `square` sharp.",
21424
21477
  },
21478
+ {
21479
+ name: "dot",
21480
+ type: "string | undefined",
21481
+ required: false,
21482
+ description: "CSS colour for a status dot; empty/undefined renders no dot.",
21483
+ },
21484
+ {
21485
+ name: "loading",
21486
+ type: "boolean | undefined",
21487
+ required: false,
21488
+ defaultValue: "false",
21489
+ description: "Show a spinner and block presses. The button stays focusable (it is\n`aria-disabled`, not natively disabled) so keyboard focus is kept.",
21490
+ },
21425
21491
  {
21426
21492
  name: "square",
21427
21493
  type: "boolean | null | undefined",
@@ -21430,11 +21496,10 @@ export const docsManifest = {
21430
21496
  description: "Lock width to height so an `icon-*` size draws a square or circle; ignored with `expandable`.",
21431
21497
  },
21432
21498
  {
21433
- name: "emphasis",
21434
- type: '"link" | "outline" | "solid" | "ghost" | "soft" | "transparent" | null | undefined',
21499
+ name: "icon",
21500
+ type: "IconComponent | undefined",
21435
21501
  required: false,
21436
- defaultValue: '"solid"',
21437
- description: "Visual weight, paired with `tone`: `solid` and `soft` are filled, `outline` and `ghost` lighter, `transparent` a blurred translucent fill, `link` plain text.\nVisual weight, as on Button.",
21502
+ description: "Leading icon (Lucide or SVG component); with no children it becomes an icon-only button.",
21438
21503
  },
21439
21504
  {
21440
21505
  name: "asInput",
@@ -21458,48 +21523,47 @@ export const docsManifest = {
21458
21523
  description: "Shrink slightly while held down (`:active`); `false` keeps the button still.",
21459
21524
  },
21460
21525
  {
21461
- name: "size",
21462
- type: "ButtonSizeProp",
21526
+ name: "testId",
21527
+ type: "string",
21463
21528
  required: false,
21464
- defaultValue: '"base"',
21465
- description: 'Size token; `icon-*` variants produce a square icon-only button. Also\naccepts a responsive object keyed by viewport breakpoints and/or `@`-prefixed\ncontainer queries - e.g. `{ base: "sm", md: "base", "@sm": "lg" }`.\nSize token, as on Button.',
21529
+ description: "Rendered as `data-testid`, for Playwright selectors.",
21466
21530
  },
21467
21531
  {
21468
- name: "render",
21469
- type: "useRender.RenderProp<Record<string, unknown>> | undefined",
21532
+ name: "suffixIcon",
21533
+ type: "IconComponent | undefined",
21470
21534
  required: false,
21471
- description: 'Replace the rendered `<button>` with another element or component\n(e.g. `<Link href="…" />`); styling, decorations and props are applied to it.',
21535
+ description: "Trailing icon (Lucide or SVG component) rendered at the end.",
21472
21536
  },
21473
21537
  {
21474
- name: "loading",
21538
+ name: "expandable",
21475
21539
  type: "boolean | undefined",
21476
21540
  required: false,
21477
21541
  defaultValue: "false",
21478
- description: "Show a spinner and block presses. The button stays focusable (it is\n`aria-disabled`, not natively disabled) so keyboard focus is kept.",
21542
+ description: "Icon-only at rest; expands on hover/focus-visible to reveal the label\nto the right of the icon. Collapsed geometry equals the matching icon-*\nsize, expanded equals the text button of that size - so pass a text\nsize (`sm`/`base`/`lg`) OR its icon twin (`icon-sm` …); both resolve\nidentically. Requires both `icon` and children; ignored with `square`. The label stays in the DOM in both states (stable\naccessible name).",
21479
21543
  },
21480
21544
  {
21481
- name: "loadingLabel",
21482
- type: "string | undefined",
21545
+ name: "focused",
21546
+ type: "boolean | undefined",
21483
21547
  required: false,
21484
- description: "Label shown in place of `children` while `loading`.",
21548
+ description: "Force the focus ring on - for documentation/testing only.",
21485
21549
  },
21486
21550
  {
21487
- name: "icon",
21488
- type: "IconComponent | undefined",
21551
+ name: "hovered",
21552
+ type: "boolean | undefined",
21489
21553
  required: false,
21490
- description: "Leading icon (Lucide or SVG component); with no children it becomes an icon-only button.",
21554
+ description: "Force the hover state on - for documentation/testing only.",
21491
21555
  },
21492
21556
  {
21493
- name: "iconClassName",
21557
+ name: "loadingLabel",
21494
21558
  type: "string | undefined",
21495
21559
  required: false,
21496
- description: "Extra classes for the leading icon.",
21560
+ description: "Label shown in place of `children` while `loading`.",
21497
21561
  },
21498
21562
  {
21499
- name: "suffixIcon",
21500
- type: "IconComponent | undefined",
21563
+ name: "iconClassName",
21564
+ type: "string | undefined",
21501
21565
  required: false,
21502
- description: "Trailing icon (Lucide or SVG component) rendered at the end.",
21566
+ description: "Extra classes for the leading icon.",
21503
21567
  },
21504
21568
  {
21505
21569
  name: "suffixIconClassName",
@@ -21507,12 +21571,6 @@ export const docsManifest = {
21507
21571
  required: false,
21508
21572
  description: "Extra classes for the trailing icon.",
21509
21573
  },
21510
- {
21511
- name: "dot",
21512
- type: "string | undefined",
21513
- required: false,
21514
- description: "CSS colour for a status dot; empty/undefined renders no dot.",
21515
- },
21516
21574
  {
21517
21575
  name: "dotPlacement",
21518
21576
  type: '"end" | "start" | undefined',
@@ -21521,29 +21579,18 @@ export const docsManifest = {
21521
21579
  description: "Dot position relative to content.",
21522
21580
  },
21523
21581
  {
21524
- name: "expandable",
21525
- type: "boolean | undefined",
21526
- required: false,
21527
- defaultValue: "false",
21528
- description: "Icon-only at rest; expands on hover/focus-visible to reveal the label\nto the right of the icon. Collapsed geometry equals the matching icon-*\nsize, expanded equals the text button of that size - so pass a text\nsize (`sm`/`base`/`lg`) OR its icon twin (`icon-sm` …); both resolve\nidentically. Requires both `icon` and children; ignored with `square`. The label stays in the DOM in both states (stable\naccessible name).",
21529
- },
21530
- {
21531
- name: "focused",
21532
- type: "boolean | undefined",
21582
+ name: "size",
21583
+ type: 'import("../../components/button/button-types").ButtonSizeProp | undefined',
21533
21584
  required: false,
21534
- description: "Force the focus ring on - for documentation/testing only.",
21585
+ defaultValue: '"icon-sm"',
21586
+ description: "Size token, as on Button.",
21535
21587
  },
21536
21588
  {
21537
- name: "hovered",
21538
- type: "boolean | undefined",
21589
+ name: "emphasis",
21590
+ type: '"link" | "outline" | "solid" | "ghost" | "soft" | "transparent" | null | undefined',
21539
21591
  required: false,
21540
- description: "Force the hover state on - for documentation/testing only.",
21541
- },
21542
- {
21543
- name: "testId",
21544
- type: "string",
21545
- required: false,
21546
- description: "Rendered as `data-testid`, for Playwright selectors.",
21592
+ defaultValue: '"ghost"',
21593
+ description: "Visual weight, as on Button.",
21547
21594
  },
21548
21595
  {
21549
21596
  name: "showWhenCollapsed",
@@ -21829,13 +21876,6 @@ export const docsManifest = {
21829
21876
  required: false,
21830
21877
  description: "Replace the default `<button>` with another element or component. Glyph props render inside it, around `children`; the element should carry no children of its own.",
21831
21878
  },
21832
- {
21833
- name: "variant",
21834
- type: '"input" | "default" | "outline" | null | undefined',
21835
- required: false,
21836
- defaultValue: '"default"',
21837
- description: "Surface treatment: `default` tints on hover, `input` uses the input fill, `outline` adds a ring.\nRow style, as on MenuItem.",
21838
- },
21839
21879
  {
21840
21880
  name: "indicator",
21841
21881
  type: "React.ReactNode",
@@ -21863,13 +21903,6 @@ export const docsManifest = {
21863
21903
  defaultValue: '"full"',
21864
21904
  description: "Corner shape: `full` is a pill, `rounded` a soft rectangle, `square` has sharp corners.",
21865
21905
  },
21866
- {
21867
- name: "size",
21868
- type: '"base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | null | undefined',
21869
- required: false,
21870
- defaultValue: '"sm"',
21871
- description: "Row height, padding and text size, on the shared component scale. Match the surrounding menu's `size`.\nRow size, as on MenuItem.",
21872
- },
21873
21906
  {
21874
21907
  name: "loading",
21875
21908
  type: "boolean | undefined",
@@ -21900,12 +21933,6 @@ export const docsManifest = {
21900
21933
  required: false,
21901
21934
  description: 'Selection visual: "checkbox" renders Checkbox, "radio" renders radio circle. Defaults to "checkbox" when `checked` is set.',
21902
21935
  },
21903
- {
21904
- name: "iconClassName",
21905
- type: "string",
21906
- required: false,
21907
- description: "Additional className for the icon",
21908
- },
21909
21936
  {
21910
21937
  name: "avatar",
21911
21938
  type: "React.ReactNode",
@@ -21948,6 +21975,26 @@ export const docsManifest = {
21948
21975
  required: false,
21949
21976
  description: "Icon to display in the left icon column",
21950
21977
  },
21978
+ {
21979
+ name: "iconClassName",
21980
+ type: "string",
21981
+ required: false,
21982
+ description: "Additional className for the icon",
21983
+ },
21984
+ {
21985
+ name: "size",
21986
+ type: '"base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | null | undefined',
21987
+ required: false,
21988
+ defaultValue: '"xl"',
21989
+ description: "Row size, as on MenuItem.",
21990
+ },
21991
+ {
21992
+ name: "variant",
21993
+ type: '"input" | "default" | "outline" | null | undefined',
21994
+ required: false,
21995
+ defaultValue: '"input"',
21996
+ description: "Row style, as on MenuItem.",
21997
+ },
21951
21998
  ],
21952
21999
  },
21953
22000
  {
@@ -21964,7 +22011,7 @@ export const docsManifest = {
21964
22011
  type: "boolean",
21965
22012
  required: false,
21966
22013
  defaultValue: "false",
21967
- description: "Add a bottom gradient fade hinting at scrollable overflow.",
22014
+ description: "Fade the bottom edge while more of the list is below.",
21968
22015
  },
21969
22016
  {
21970
22017
  name: "maxHeight",
@@ -22161,13 +22208,6 @@ export const docsManifest = {
22161
22208
  defaultValue: "false",
22162
22209
  description: "Lock width to height so an `icon-*` size draws a square or circle; ignored with `expandable`.",
22163
22210
  },
22164
- {
22165
- name: "emphasis",
22166
- type: '"link" | "outline" | "solid" | "ghost" | "soft" | "transparent" | null | undefined',
22167
- required: false,
22168
- defaultValue: '"solid"',
22169
- description: "Visual weight, paired with `tone`: `solid` and `soft` are filled, `outline` and `ghost` lighter, `transparent` a blurred translucent fill, `link` plain text.\nVisual weight, as on Button.",
22170
- },
22171
22211
  {
22172
22212
  name: "asInput",
22173
22213
  type: "boolean | null | undefined",
@@ -22251,6 +22291,13 @@ export const docsManifest = {
22251
22291
  required: false,
22252
22292
  description: "Icon to display. Defaults to PanelLeftCloseIcon.",
22253
22293
  },
22294
+ {
22295
+ name: "emphasis",
22296
+ type: '"link" | "outline" | "solid" | "ghost" | "soft" | "transparent" | null | undefined',
22297
+ required: false,
22298
+ defaultValue: '"ghost"',
22299
+ description: "Visual weight, as on Button.",
22300
+ },
22254
22301
  ],
22255
22302
  },
22256
22303
  {
@@ -22278,6 +22325,7 @@ export const docsManifest = {
22278
22325
  "input",
22279
22326
  "kbd",
22280
22327
  "menu-item",
22328
+ "scroll-frame",
22281
22329
  "separator",
22282
22330
  "sheet",
22283
22331
  "skeleton",
@@ -23276,6 +23324,7 @@ export const docsManifest = {
23276
23324
  "popover",
23277
23325
  "scroll-area",
23278
23326
  "scroll-fade",
23327
+ "scroll-frame",
23279
23328
  "tag",
23280
23329
  ],
23281
23330
  usedBy: [],