@instruments/materia-ui 0.4.7 → 0.4.8
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/dist/components/country-combobox/country-combobox-root.d.ts +1 -1
- package/dist/components/input-group/input-group-button.d.ts +2 -2
- package/dist/components/select/select-trigger.d.ts +1 -1
- package/dist/components/swatch-group/swatch-group-item.d.ts +1 -1
- package/dist/components/swatch-selector/swatch-selector-item.d.ts +1 -1
- package/dist/compositions/mobile-navigation/mobile-navigation-header.d.ts +1 -1
- package/dist/compositions/quick-view/quick-view-body.d.ts +1 -1
- package/dist/compositions/sidebar/sidebar-group.d.ts +1 -1
- package/dist/compositions/sidebar/sidebar-menu-sub.d.ts +1 -1
- package/dist/compositions/sidebar/sidebar-trigger.d.ts +1 -1
- package/dist/data/docs-manifest.js +205 -206
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { ComboboxProps } from "../combobox.js";
|
|
2
|
-
type CountryComboboxProps = Omit<ComboboxProps, "items" | "value"> & {
|
|
2
|
+
type CountryComboboxProps = Omit<ComboboxProps, "items" | "onValueChange" | "value"> & {
|
|
3
3
|
/** Current country code (ISO 3166-1 alpha-2) or country name */
|
|
4
4
|
value?: string;
|
|
5
5
|
/** Value change handler - receives ISO country code */
|
|
@@ -2,8 +2,8 @@ import type { LucideIcon } from "lucide-react";
|
|
|
2
2
|
import type * as React from "react";
|
|
3
3
|
import type { ButtonEmphasis, ButtonProps, ButtonTone } from "../button.js";
|
|
4
4
|
import { Button } from "../button.js";
|
|
5
|
-
export type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, "size"> & {
|
|
6
|
-
/** Icon
|
|
5
|
+
export type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, "emphasis" | "icon" | "radius" | "size" | "square" | "tone"> & {
|
|
6
|
+
/** Icon shown in the button, passed as a component (such as a Lucide icon); with no children the button is icon-only. */
|
|
7
7
|
icon?: LucideIcon | React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
|
8
8
|
/** Semantic colour, as on Button. @default "neutral" */
|
|
9
9
|
tone?: ButtonTone;
|
|
@@ -7,7 +7,7 @@ import type { ButtonProps } from "../button.js";
|
|
|
7
7
|
* SelectValue placeholder), with a trailing chevron; forwards Button styling
|
|
8
8
|
* props - defaults to `size="xl"`, `emphasis="outline"`, `radius="rounded"`.
|
|
9
9
|
*/
|
|
10
|
-
declare const SelectTrigger: ({ className, children, testId, tone, size, emphasis, radius, pressed, ...props }: WithTestId<Omit<SelectPrimitive.Trigger.Props, "className" | "render"> &
|
|
10
|
+
declare const SelectTrigger: ({ className, children, testId, tone, size, emphasis, radius, pressed, ...props }: WithTestId<Omit<SelectPrimitive.Trigger.Props, "className" | "render"> & {
|
|
11
11
|
className?: string;
|
|
12
12
|
/** Semantic colour of the trigger, as on Button. @default "neutral" */
|
|
13
13
|
tone?: ButtonProps["tone"];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Radio as RadioPrimitive } from "@base-ui/react/radio";
|
|
2
2
|
import type React from "react";
|
|
3
3
|
import type { SwatchSize } from "../../tokens/swatch.js";
|
|
4
|
-
type SwatchGroupItemProps = Omit<RadioPrimitive.Root.Props<string>, "children"> & {
|
|
4
|
+
type SwatchGroupItemProps = Omit<RadioPrimitive.Root.Props<string>, "aria-label" | "children"> & {
|
|
5
5
|
/**
|
|
6
6
|
* CSS colour value (hex, rgb, hsl, etc.).
|
|
7
7
|
* If provided along with children, children render on top.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ComponentProps } from "react";
|
|
2
2
|
import type { SwatchSize } from "../../tokens/swatch.js";
|
|
3
|
-
type SwatchSelectorItemProps = Omit<ComponentProps<"button">, "children" | "defaultValue" | "value"> & {
|
|
3
|
+
type SwatchSelectorItemProps = Omit<ComponentProps<"button">, "aria-label" | "children" | "defaultValue" | "value"> & {
|
|
4
4
|
/** Unique value for this swatch */
|
|
5
5
|
value: string;
|
|
6
6
|
/**
|
|
@@ -38,7 +38,7 @@ export declare const MobileNavigationHeaderSearchSlot: ({ className, ...props }:
|
|
|
38
38
|
*
|
|
39
39
|
* @bestPractice Keep children to a few characters, such as a cart count, and give the action an `aria-label` that says what the number means.
|
|
40
40
|
*/
|
|
41
|
-
export declare const MobileNavigationHeaderAction: ({ children, className, emphasis, ...props }: React.ComponentProps<typeof Button> & {
|
|
41
|
+
export declare const MobileNavigationHeaderAction: ({ children, className, emphasis, ...props }: Omit<React.ComponentProps<typeof Button>, "emphasis"> & {
|
|
42
42
|
/** Visual weight, as on Button. @default "soft" */
|
|
43
43
|
emphasis?: React.ComponentProps<typeof Button>["emphasis"];
|
|
44
44
|
}) => React.JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ScrollArea } from "@instruments/materia-ui/components/scroll-area";
|
|
2
2
|
import type { ComponentProps } from "react";
|
|
3
|
-
export type QuickViewBodyProps = Omit<ComponentProps<typeof ScrollArea>, "as" | "orientation" | "render"> & {
|
|
3
|
+
export type QuickViewBodyProps = Omit<ComponentProps<typeof ScrollArea>, "aria-label" | "as" | "orientation" | "render"> & {
|
|
4
4
|
/** Names the scrolling region for assistive tech, e.g. "Product details". */
|
|
5
5
|
"aria-label": string;
|
|
6
6
|
};
|
|
@@ -6,7 +6,7 @@ export declare const SidebarGroup: ({ className, ...props }: React.ComponentProp
|
|
|
6
6
|
/** Heading for a {@link SidebarGroup}; fades out (keeping layout) when collapsed to an icon rail. Pass `render` to use a custom element. */
|
|
7
7
|
export declare const SidebarGroupLabel: ({ className, render, ...props }: useRender.ComponentProps<"div">) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
|
|
8
8
|
/** Icon button pinned to a group's top-right corner (defaults to a `+`); hidden when collapsed unless `showWhenCollapsed`. */
|
|
9
|
-
export declare const SidebarGroupAction: ({ className, icon, size, radius, emphasis, showWhenCollapsed, ...props }: React.ComponentProps<typeof Button> & {
|
|
9
|
+
export declare const SidebarGroupAction: ({ className, icon, size, radius, emphasis, showWhenCollapsed, ...props }: Omit<React.ComponentProps<typeof Button>, "emphasis" | "size"> & {
|
|
10
10
|
/** Size token, as on Button. @default "icon-sm" */
|
|
11
11
|
size?: React.ComponentProps<typeof Button>["size"];
|
|
12
12
|
/** Visual weight, as on Button. @default "ghost" */
|
|
@@ -19,7 +19,7 @@ export declare const SidebarMenuSubScrollArea: ({ children, className, fade, max
|
|
|
19
19
|
type SidebarMenuSubItemProps = React.ComponentProps<"li">;
|
|
20
20
|
/** The `<li>` wrapper for a single submenu row. */
|
|
21
21
|
export declare const SidebarMenuSubItem: ({ className, ...props }: SidebarMenuSubItemProps) => React.JSX.Element;
|
|
22
|
-
type SidebarMenuSubButtonProps = Omit<MenuItemProps, "icon" | "
|
|
22
|
+
type SidebarMenuSubButtonProps = Omit<MenuItemProps, "dot" | "icon" | "iconClassName" | "size" | "variant"> & {
|
|
23
23
|
/** Dot indicator in the left column (takes precedence over icon): `true` for a neutral dot, or a {@link Tone} to tint it. */
|
|
24
24
|
dot?: boolean | Tone;
|
|
25
25
|
/** Icon to display in the left icon column */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Button } from "@instruments/materia-ui/components/button";
|
|
2
2
|
import type React from "react";
|
|
3
3
|
import type { IconComponent } from "../../tokens/icon-component.js";
|
|
4
|
-
type SidebarTriggerProps = Omit<React.ComponentProps<typeof Button>, "icon"> & {
|
|
4
|
+
type SidebarTriggerProps = Omit<React.ComponentProps<typeof Button>, "emphasis" | "icon"> & {
|
|
5
5
|
/** Icon to display. Defaults to PanelLeftCloseIcon. */
|
|
6
6
|
icon?: IconComponent;
|
|
7
7
|
/** Visual weight, as on Button. @default "ghost" */
|
|
@@ -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
|
{
|
|
@@ -9977,37 +9976,37 @@ export const docsManifest = {
|
|
|
9977
9976
|
kind: "component",
|
|
9978
9977
|
props: [
|
|
9979
9978
|
{
|
|
9980
|
-
name: "
|
|
9981
|
-
type:
|
|
9979
|
+
name: "className",
|
|
9980
|
+
type: "string",
|
|
9982
9981
|
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
9982
|
},
|
|
9986
9983
|
{
|
|
9987
|
-
name: "
|
|
9988
|
-
type: '"
|
|
9984
|
+
name: "tone",
|
|
9985
|
+
type: '"neutral" | "brand" | "danger" | null | undefined',
|
|
9989
9986
|
required: false,
|
|
9990
|
-
defaultValue: '"
|
|
9991
|
-
description: "
|
|
9987
|
+
defaultValue: '"neutral"',
|
|
9988
|
+
description: "Semantic colour of the trigger, as on Button.",
|
|
9992
9989
|
},
|
|
9993
9990
|
{
|
|
9994
9991
|
name: "emphasis",
|
|
9995
9992
|
type: '"link" | "outline" | "solid" | "ghost" | "soft" | "transparent" | null | undefined',
|
|
9996
9993
|
required: false,
|
|
9997
|
-
defaultValue: '"
|
|
9998
|
-
description: "Visual weight,
|
|
9994
|
+
defaultValue: '"outline"',
|
|
9995
|
+
description: "Visual weight, as on Button; the outline reads as a form field.",
|
|
9999
9996
|
},
|
|
10000
9997
|
{
|
|
10001
|
-
name: "
|
|
10002
|
-
type: "
|
|
9998
|
+
name: "radius",
|
|
9999
|
+
type: '"rounded" | "square" | "full" | null | undefined',
|
|
10003
10000
|
required: false,
|
|
10004
|
-
defaultValue: "
|
|
10005
|
-
description: "
|
|
10001
|
+
defaultValue: '"rounded"',
|
|
10002
|
+
description: "Corner shape, as on Button.",
|
|
10006
10003
|
},
|
|
10007
10004
|
{
|
|
10008
|
-
name: "
|
|
10009
|
-
type: "
|
|
10005
|
+
name: "pressed",
|
|
10006
|
+
type: "boolean | null | undefined",
|
|
10010
10007
|
required: false,
|
|
10008
|
+
defaultValue: "false",
|
|
10009
|
+
description: "Shrink while held down, as on Button, but off by default here.",
|
|
10011
10010
|
},
|
|
10012
10011
|
{
|
|
10013
10012
|
name: "size",
|
|
@@ -11998,16 +11997,16 @@ export const docsManifest = {
|
|
|
11998
11997
|
kind: "component",
|
|
11999
11998
|
props: [
|
|
12000
11999
|
{
|
|
12001
|
-
name: "
|
|
12000
|
+
name: "color",
|
|
12002
12001
|
type: "string",
|
|
12003
12002
|
required: false,
|
|
12004
|
-
description: "
|
|
12003
|
+
description: "CSS colour value (hex, rgb, hsl, etc.).\nIf provided along with children, children render on top.",
|
|
12005
12004
|
},
|
|
12006
12005
|
{
|
|
12007
|
-
name: "
|
|
12006
|
+
name: "aria-label",
|
|
12008
12007
|
type: "string",
|
|
12009
12008
|
required: false,
|
|
12010
|
-
description: "
|
|
12009
|
+
description: "Accessible label for screen readers.",
|
|
12011
12010
|
},
|
|
12012
12011
|
{
|
|
12013
12012
|
name: "children",
|
|
@@ -12050,18 +12049,18 @@ export const docsManifest = {
|
|
|
12050
12049
|
required: false,
|
|
12051
12050
|
description: "CSS colour value (hex, rgb, hsl, etc.).\nIf provided along with children, children render on top.",
|
|
12052
12051
|
},
|
|
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
12052
|
{
|
|
12060
12053
|
name: "value",
|
|
12061
12054
|
type: "string",
|
|
12062
12055
|
required: true,
|
|
12063
12056
|
description: "Unique value for this swatch",
|
|
12064
12057
|
},
|
|
12058
|
+
{
|
|
12059
|
+
name: "aria-label",
|
|
12060
|
+
type: "string",
|
|
12061
|
+
required: false,
|
|
12062
|
+
description: "Accessible label for screen readers.",
|
|
12063
|
+
},
|
|
12065
12064
|
{
|
|
12066
12065
|
name: "children",
|
|
12067
12066
|
type: 'import("react").ReactNode',
|
|
@@ -12128,18 +12127,18 @@ export const docsManifest = {
|
|
|
12128
12127
|
required: false,
|
|
12129
12128
|
description: "CSS colour value (hex, rgb, hsl, etc.).\nIf provided along with children, children render on top.",
|
|
12130
12129
|
},
|
|
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
12130
|
{
|
|
12138
12131
|
name: "value",
|
|
12139
12132
|
type: "string",
|
|
12140
12133
|
required: true,
|
|
12141
12134
|
description: "Unique value for this swatch",
|
|
12142
12135
|
},
|
|
12136
|
+
{
|
|
12137
|
+
name: "aria-label",
|
|
12138
|
+
type: "string",
|
|
12139
|
+
required: false,
|
|
12140
|
+
description: "Accessible label for screen readers.",
|
|
12141
|
+
},
|
|
12143
12142
|
{
|
|
12144
12143
|
name: "children",
|
|
12145
12144
|
type: 'import("react").ReactNode',
|
|
@@ -17507,6 +17506,12 @@ export const docsManifest = {
|
|
|
17507
17506
|
name: "MobileNavigationHeaderAction",
|
|
17508
17507
|
kind: "component",
|
|
17509
17508
|
props: [
|
|
17509
|
+
{
|
|
17510
|
+
name: "render",
|
|
17511
|
+
type: "useRender.RenderProp<Record<string, unknown>> | undefined",
|
|
17512
|
+
required: false,
|
|
17513
|
+
description: 'Replace the rendered `<button>` with another element or component\n(e.g. `<Link href="…" />`); styling, decorations and props are applied to it.',
|
|
17514
|
+
},
|
|
17510
17515
|
{
|
|
17511
17516
|
name: "tone",
|
|
17512
17517
|
type: '"neutral" | "brand" | "danger" | null | undefined',
|
|
@@ -17521,6 +17526,26 @@ export const docsManifest = {
|
|
|
17521
17526
|
defaultValue: '"full"',
|
|
17522
17527
|
description: "Corner shape: `full` is a pill (or circle when square), `rounded` a soft corner, `square` sharp.",
|
|
17523
17528
|
},
|
|
17529
|
+
{
|
|
17530
|
+
name: "size",
|
|
17531
|
+
type: "ButtonSizeProp",
|
|
17532
|
+
required: false,
|
|
17533
|
+
defaultValue: '"base"',
|
|
17534
|
+
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" }`.',
|
|
17535
|
+
},
|
|
17536
|
+
{
|
|
17537
|
+
name: "dot",
|
|
17538
|
+
type: "string | undefined",
|
|
17539
|
+
required: false,
|
|
17540
|
+
description: "CSS colour for a status dot; empty/undefined renders no dot.",
|
|
17541
|
+
},
|
|
17542
|
+
{
|
|
17543
|
+
name: "loading",
|
|
17544
|
+
type: "boolean | undefined",
|
|
17545
|
+
required: false,
|
|
17546
|
+
defaultValue: "false",
|
|
17547
|
+
description: "Show a spinner and block presses. The button stays focusable (it is\n`aria-disabled`, not natively disabled) so keyboard focus is kept.",
|
|
17548
|
+
},
|
|
17524
17549
|
{
|
|
17525
17550
|
name: "square",
|
|
17526
17551
|
type: "boolean | null | undefined",
|
|
@@ -17529,11 +17554,10 @@ export const docsManifest = {
|
|
|
17529
17554
|
description: "Lock width to height so an `icon-*` size draws a square or circle; ignored with `expandable`.",
|
|
17530
17555
|
},
|
|
17531
17556
|
{
|
|
17532
|
-
name: "
|
|
17533
|
-
type:
|
|
17557
|
+
name: "icon",
|
|
17558
|
+
type: "IconComponent | undefined",
|
|
17534
17559
|
required: false,
|
|
17535
|
-
|
|
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.",
|
|
17560
|
+
description: "Leading icon (Lucide or SVG component); with no children it becomes an icon-only button.",
|
|
17537
17561
|
},
|
|
17538
17562
|
{
|
|
17539
17563
|
name: "asInput",
|
|
@@ -17557,48 +17581,47 @@ export const docsManifest = {
|
|
|
17557
17581
|
description: "Shrink slightly while held down (`:active`); `false` keeps the button still.",
|
|
17558
17582
|
},
|
|
17559
17583
|
{
|
|
17560
|
-
name: "
|
|
17561
|
-
type: "
|
|
17584
|
+
name: "testId",
|
|
17585
|
+
type: "string",
|
|
17562
17586
|
required: false,
|
|
17563
|
-
|
|
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" }`.',
|
|
17587
|
+
description: "Rendered as `data-testid`, for Playwright selectors.",
|
|
17565
17588
|
},
|
|
17566
17589
|
{
|
|
17567
|
-
name: "
|
|
17568
|
-
type: "
|
|
17590
|
+
name: "suffixIcon",
|
|
17591
|
+
type: "IconComponent | undefined",
|
|
17569
17592
|
required: false,
|
|
17570
|
-
description:
|
|
17593
|
+
description: "Trailing icon (Lucide or SVG component) rendered at the end.",
|
|
17571
17594
|
},
|
|
17572
17595
|
{
|
|
17573
|
-
name: "
|
|
17596
|
+
name: "expandable",
|
|
17574
17597
|
type: "boolean | undefined",
|
|
17575
17598
|
required: false,
|
|
17576
17599
|
defaultValue: "false",
|
|
17577
|
-
description: "
|
|
17600
|
+
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
17601
|
},
|
|
17579
17602
|
{
|
|
17580
|
-
name: "
|
|
17581
|
-
type: "
|
|
17603
|
+
name: "focused",
|
|
17604
|
+
type: "boolean | undefined",
|
|
17582
17605
|
required: false,
|
|
17583
|
-
description: "
|
|
17606
|
+
description: "Force the focus ring on - for documentation/testing only.",
|
|
17584
17607
|
},
|
|
17585
17608
|
{
|
|
17586
|
-
name: "
|
|
17587
|
-
type: "
|
|
17609
|
+
name: "hovered",
|
|
17610
|
+
type: "boolean | undefined",
|
|
17588
17611
|
required: false,
|
|
17589
|
-
description: "
|
|
17612
|
+
description: "Force the hover state on - for documentation/testing only.",
|
|
17590
17613
|
},
|
|
17591
17614
|
{
|
|
17592
|
-
name: "
|
|
17615
|
+
name: "loadingLabel",
|
|
17593
17616
|
type: "string | undefined",
|
|
17594
17617
|
required: false,
|
|
17595
|
-
description: "
|
|
17618
|
+
description: "Label shown in place of `children` while `loading`.",
|
|
17596
17619
|
},
|
|
17597
17620
|
{
|
|
17598
|
-
name: "
|
|
17599
|
-
type: "
|
|
17621
|
+
name: "iconClassName",
|
|
17622
|
+
type: "string | undefined",
|
|
17600
17623
|
required: false,
|
|
17601
|
-
description: "
|
|
17624
|
+
description: "Extra classes for the leading icon.",
|
|
17602
17625
|
},
|
|
17603
17626
|
{
|
|
17604
17627
|
name: "suffixIconClassName",
|
|
@@ -17606,12 +17629,6 @@ export const docsManifest = {
|
|
|
17606
17629
|
required: false,
|
|
17607
17630
|
description: "Extra classes for the trailing icon.",
|
|
17608
17631
|
},
|
|
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
17632
|
{
|
|
17616
17633
|
name: "dotPlacement",
|
|
17617
17634
|
type: '"end" | "start" | undefined',
|
|
@@ -17620,29 +17637,11 @@ export const docsManifest = {
|
|
|
17620
17637
|
description: "Dot position relative to content.",
|
|
17621
17638
|
},
|
|
17622
17639
|
{
|
|
17623
|
-
name: "
|
|
17624
|
-
type: "
|
|
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",
|
|
17638
|
-
required: false,
|
|
17639
|
-
description: "Force the hover state on - for documentation/testing only.",
|
|
17640
|
-
},
|
|
17641
|
-
{
|
|
17642
|
-
name: "testId",
|
|
17643
|
-
type: "string",
|
|
17640
|
+
name: "emphasis",
|
|
17641
|
+
type: '"link" | "outline" | "solid" | "ghost" | "soft" | "transparent" | null | undefined',
|
|
17644
17642
|
required: false,
|
|
17645
|
-
|
|
17643
|
+
defaultValue: '"soft"',
|
|
17644
|
+
description: "Visual weight, as on Button.",
|
|
17646
17645
|
},
|
|
17647
17646
|
],
|
|
17648
17647
|
},
|
|
@@ -20614,12 +20613,6 @@ export const docsManifest = {
|
|
|
20614
20613
|
type: "string",
|
|
20615
20614
|
required: false,
|
|
20616
20615
|
},
|
|
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
20616
|
{
|
|
20624
20617
|
name: "allowOverflow",
|
|
20625
20618
|
type: "boolean",
|
|
@@ -20638,6 +20631,12 @@ export const docsManifest = {
|
|
|
20638
20631
|
required: false,
|
|
20639
20632
|
description: "Additional classes for the viewport (scrolling container)",
|
|
20640
20633
|
},
|
|
20634
|
+
{
|
|
20635
|
+
name: "aria-label",
|
|
20636
|
+
type: "string",
|
|
20637
|
+
required: true,
|
|
20638
|
+
description: 'Names the scrolling region for assistive tech, e.g. "Product details".',
|
|
20639
|
+
},
|
|
20641
20640
|
],
|
|
20642
20641
|
},
|
|
20643
20642
|
{
|
|
@@ -21408,6 +21407,12 @@ export const docsManifest = {
|
|
|
21408
21407
|
name: "SidebarGroupAction",
|
|
21409
21408
|
kind: "component",
|
|
21410
21409
|
props: [
|
|
21410
|
+
{
|
|
21411
|
+
name: "render",
|
|
21412
|
+
type: "useRender.RenderProp<Record<string, unknown>> | undefined",
|
|
21413
|
+
required: false,
|
|
21414
|
+
description: 'Replace the rendered `<button>` with another element or component\n(e.g. `<Link href="…" />`); styling, decorations and props are applied to it.',
|
|
21415
|
+
},
|
|
21411
21416
|
{
|
|
21412
21417
|
name: "tone",
|
|
21413
21418
|
type: '"neutral" | "brand" | "danger" | null | undefined',
|
|
@@ -21422,6 +21427,19 @@ export const docsManifest = {
|
|
|
21422
21427
|
defaultValue: '"full"',
|
|
21423
21428
|
description: "Corner shape: `full` is a pill (or circle when square), `rounded` a soft corner, `square` sharp.",
|
|
21424
21429
|
},
|
|
21430
|
+
{
|
|
21431
|
+
name: "dot",
|
|
21432
|
+
type: "string | undefined",
|
|
21433
|
+
required: false,
|
|
21434
|
+
description: "CSS colour for a status dot; empty/undefined renders no dot.",
|
|
21435
|
+
},
|
|
21436
|
+
{
|
|
21437
|
+
name: "loading",
|
|
21438
|
+
type: "boolean | undefined",
|
|
21439
|
+
required: false,
|
|
21440
|
+
defaultValue: "false",
|
|
21441
|
+
description: "Show a spinner and block presses. The button stays focusable (it is\n`aria-disabled`, not natively disabled) so keyboard focus is kept.",
|
|
21442
|
+
},
|
|
21425
21443
|
{
|
|
21426
21444
|
name: "square",
|
|
21427
21445
|
type: "boolean | null | undefined",
|
|
@@ -21430,11 +21448,10 @@ export const docsManifest = {
|
|
|
21430
21448
|
description: "Lock width to height so an `icon-*` size draws a square or circle; ignored with `expandable`.",
|
|
21431
21449
|
},
|
|
21432
21450
|
{
|
|
21433
|
-
name: "
|
|
21434
|
-
type:
|
|
21451
|
+
name: "icon",
|
|
21452
|
+
type: "IconComponent | undefined",
|
|
21435
21453
|
required: false,
|
|
21436
|
-
|
|
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.",
|
|
21454
|
+
description: "Leading icon (Lucide or SVG component); with no children it becomes an icon-only button.",
|
|
21438
21455
|
},
|
|
21439
21456
|
{
|
|
21440
21457
|
name: "asInput",
|
|
@@ -21458,48 +21475,47 @@ export const docsManifest = {
|
|
|
21458
21475
|
description: "Shrink slightly while held down (`:active`); `false` keeps the button still.",
|
|
21459
21476
|
},
|
|
21460
21477
|
{
|
|
21461
|
-
name: "
|
|
21462
|
-
type: "
|
|
21478
|
+
name: "testId",
|
|
21479
|
+
type: "string",
|
|
21463
21480
|
required: false,
|
|
21464
|
-
|
|
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.',
|
|
21481
|
+
description: "Rendered as `data-testid`, for Playwright selectors.",
|
|
21466
21482
|
},
|
|
21467
21483
|
{
|
|
21468
|
-
name: "
|
|
21469
|
-
type: "
|
|
21484
|
+
name: "suffixIcon",
|
|
21485
|
+
type: "IconComponent | undefined",
|
|
21470
21486
|
required: false,
|
|
21471
|
-
description:
|
|
21487
|
+
description: "Trailing icon (Lucide or SVG component) rendered at the end.",
|
|
21472
21488
|
},
|
|
21473
21489
|
{
|
|
21474
|
-
name: "
|
|
21490
|
+
name: "expandable",
|
|
21475
21491
|
type: "boolean | undefined",
|
|
21476
21492
|
required: false,
|
|
21477
21493
|
defaultValue: "false",
|
|
21478
|
-
description: "
|
|
21494
|
+
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
21495
|
},
|
|
21480
21496
|
{
|
|
21481
|
-
name: "
|
|
21482
|
-
type: "
|
|
21497
|
+
name: "focused",
|
|
21498
|
+
type: "boolean | undefined",
|
|
21483
21499
|
required: false,
|
|
21484
|
-
description: "
|
|
21500
|
+
description: "Force the focus ring on - for documentation/testing only.",
|
|
21485
21501
|
},
|
|
21486
21502
|
{
|
|
21487
|
-
name: "
|
|
21488
|
-
type: "
|
|
21503
|
+
name: "hovered",
|
|
21504
|
+
type: "boolean | undefined",
|
|
21489
21505
|
required: false,
|
|
21490
|
-
description: "
|
|
21506
|
+
description: "Force the hover state on - for documentation/testing only.",
|
|
21491
21507
|
},
|
|
21492
21508
|
{
|
|
21493
|
-
name: "
|
|
21509
|
+
name: "loadingLabel",
|
|
21494
21510
|
type: "string | undefined",
|
|
21495
21511
|
required: false,
|
|
21496
|
-
description: "
|
|
21512
|
+
description: "Label shown in place of `children` while `loading`.",
|
|
21497
21513
|
},
|
|
21498
21514
|
{
|
|
21499
|
-
name: "
|
|
21500
|
-
type: "
|
|
21515
|
+
name: "iconClassName",
|
|
21516
|
+
type: "string | undefined",
|
|
21501
21517
|
required: false,
|
|
21502
|
-
description: "
|
|
21518
|
+
description: "Extra classes for the leading icon.",
|
|
21503
21519
|
},
|
|
21504
21520
|
{
|
|
21505
21521
|
name: "suffixIconClassName",
|
|
@@ -21507,12 +21523,6 @@ export const docsManifest = {
|
|
|
21507
21523
|
required: false,
|
|
21508
21524
|
description: "Extra classes for the trailing icon.",
|
|
21509
21525
|
},
|
|
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
21526
|
{
|
|
21517
21527
|
name: "dotPlacement",
|
|
21518
21528
|
type: '"end" | "start" | undefined',
|
|
@@ -21521,29 +21531,18 @@ export const docsManifest = {
|
|
|
21521
21531
|
description: "Dot position relative to content.",
|
|
21522
21532
|
},
|
|
21523
21533
|
{
|
|
21524
|
-
name: "
|
|
21525
|
-
type: "
|
|
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",
|
|
21533
|
-
required: false,
|
|
21534
|
-
description: "Force the focus ring on - for documentation/testing only.",
|
|
21535
|
-
},
|
|
21536
|
-
{
|
|
21537
|
-
name: "hovered",
|
|
21538
|
-
type: "boolean | undefined",
|
|
21534
|
+
name: "size",
|
|
21535
|
+
type: 'import("../../components/button/button-types").ButtonSizeProp | undefined',
|
|
21539
21536
|
required: false,
|
|
21540
|
-
|
|
21537
|
+
defaultValue: '"icon-sm"',
|
|
21538
|
+
description: "Size token, as on Button.",
|
|
21541
21539
|
},
|
|
21542
21540
|
{
|
|
21543
|
-
name: "
|
|
21544
|
-
type: "
|
|
21541
|
+
name: "emphasis",
|
|
21542
|
+
type: '"link" | "outline" | "solid" | "ghost" | "soft" | "transparent" | null | undefined',
|
|
21545
21543
|
required: false,
|
|
21546
|
-
|
|
21544
|
+
defaultValue: '"ghost"',
|
|
21545
|
+
description: "Visual weight, as on Button.",
|
|
21547
21546
|
},
|
|
21548
21547
|
{
|
|
21549
21548
|
name: "showWhenCollapsed",
|
|
@@ -21829,13 +21828,6 @@ export const docsManifest = {
|
|
|
21829
21828
|
required: false,
|
|
21830
21829
|
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
21830
|
},
|
|
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
21831
|
{
|
|
21840
21832
|
name: "indicator",
|
|
21841
21833
|
type: "React.ReactNode",
|
|
@@ -21863,13 +21855,6 @@ export const docsManifest = {
|
|
|
21863
21855
|
defaultValue: '"full"',
|
|
21864
21856
|
description: "Corner shape: `full` is a pill, `rounded` a soft rectangle, `square` has sharp corners.",
|
|
21865
21857
|
},
|
|
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
21858
|
{
|
|
21874
21859
|
name: "loading",
|
|
21875
21860
|
type: "boolean | undefined",
|
|
@@ -21900,12 +21885,6 @@ export const docsManifest = {
|
|
|
21900
21885
|
required: false,
|
|
21901
21886
|
description: 'Selection visual: "checkbox" renders Checkbox, "radio" renders radio circle. Defaults to "checkbox" when `checked` is set.',
|
|
21902
21887
|
},
|
|
21903
|
-
{
|
|
21904
|
-
name: "iconClassName",
|
|
21905
|
-
type: "string",
|
|
21906
|
-
required: false,
|
|
21907
|
-
description: "Additional className for the icon",
|
|
21908
|
-
},
|
|
21909
21888
|
{
|
|
21910
21889
|
name: "avatar",
|
|
21911
21890
|
type: "React.ReactNode",
|
|
@@ -21948,6 +21927,26 @@ export const docsManifest = {
|
|
|
21948
21927
|
required: false,
|
|
21949
21928
|
description: "Icon to display in the left icon column",
|
|
21950
21929
|
},
|
|
21930
|
+
{
|
|
21931
|
+
name: "iconClassName",
|
|
21932
|
+
type: "string",
|
|
21933
|
+
required: false,
|
|
21934
|
+
description: "Additional className for the icon",
|
|
21935
|
+
},
|
|
21936
|
+
{
|
|
21937
|
+
name: "size",
|
|
21938
|
+
type: '"base" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl" | null | undefined',
|
|
21939
|
+
required: false,
|
|
21940
|
+
defaultValue: '"xl"',
|
|
21941
|
+
description: "Row size, as on MenuItem.",
|
|
21942
|
+
},
|
|
21943
|
+
{
|
|
21944
|
+
name: "variant",
|
|
21945
|
+
type: '"input" | "default" | "outline" | null | undefined',
|
|
21946
|
+
required: false,
|
|
21947
|
+
defaultValue: '"input"',
|
|
21948
|
+
description: "Row style, as on MenuItem.",
|
|
21949
|
+
},
|
|
21951
21950
|
],
|
|
21952
21951
|
},
|
|
21953
21952
|
{
|
|
@@ -22161,13 +22160,6 @@ export const docsManifest = {
|
|
|
22161
22160
|
defaultValue: "false",
|
|
22162
22161
|
description: "Lock width to height so an `icon-*` size draws a square or circle; ignored with `expandable`.",
|
|
22163
22162
|
},
|
|
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
22163
|
{
|
|
22172
22164
|
name: "asInput",
|
|
22173
22165
|
type: "boolean | null | undefined",
|
|
@@ -22251,6 +22243,13 @@ export const docsManifest = {
|
|
|
22251
22243
|
required: false,
|
|
22252
22244
|
description: "Icon to display. Defaults to PanelLeftCloseIcon.",
|
|
22253
22245
|
},
|
|
22246
|
+
{
|
|
22247
|
+
name: "emphasis",
|
|
22248
|
+
type: '"link" | "outline" | "solid" | "ghost" | "soft" | "transparent" | null | undefined',
|
|
22249
|
+
required: false,
|
|
22250
|
+
defaultValue: '"ghost"',
|
|
22251
|
+
description: "Visual weight, as on Button.",
|
|
22252
|
+
},
|
|
22254
22253
|
],
|
|
22255
22254
|
},
|
|
22256
22255
|
{
|