@justanarthur/modo-ui 0.0.0-stage → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/LICENSE.beui +21 -0
- package/LICENSE.fluid-functionalism +21 -0
- package/LICENSE.motion-primitives +21 -0
- package/LICENSE.sileo +21 -0
- package/README.md +608 -2
- package/dist/base.css +994 -0
- package/dist/blocks/sidebar-app/index.d.ts +34 -0
- package/dist/blocks/sidebar-app/index.js +34 -0
- package/dist/components/badge/index.d.ts +59 -0
- package/dist/components/badge/index.js +18 -0
- package/dist/components/button/index.d.ts +59 -0
- package/dist/components/button/index.js +16 -0
- package/dist/components/card/index.d.ts +141 -0
- package/dist/components/card/index.js +44 -0
- package/dist/components/inputs/checkbox-group/index.d.ts +50 -0
- package/dist/components/inputs/checkbox-group/index.js +23 -0
- package/dist/components/inputs/color-picker/index.d.ts +137 -0
- package/dist/components/inputs/color-picker/index.js +37 -0
- package/dist/components/inputs/combobox/index.d.ts +161 -0
- package/dist/components/inputs/combobox/index.js +41 -0
- package/dist/components/inputs/date-time/calendar/index.d.ts +45 -0
- package/dist/components/inputs/date-time/calendar/index.js +20 -0
- package/dist/components/inputs/date-time/date-picker/index.d.ts +82 -0
- package/dist/components/inputs/date-time/date-picker/index.js +34 -0
- package/dist/components/inputs/date-time/date-range-picker/index.d.ts +64 -0
- package/dist/components/inputs/date-time/date-range-picker/index.js +33 -0
- package/dist/components/inputs/date-time/duration-picker/index.d.ts +57 -0
- package/dist/components/inputs/date-time/duration-picker/index.js +33 -0
- package/dist/components/inputs/date-time/month-picker/index.d.ts +57 -0
- package/dist/components/inputs/date-time/month-picker/index.js +32 -0
- package/dist/components/inputs/date-time/time-picker/index.d.ts +59 -0
- package/dist/components/inputs/date-time/time-picker/index.js +33 -0
- package/dist/components/inputs/input/index.d.ts +84 -0
- package/dist/components/inputs/input/index.js +20 -0
- package/dist/components/inputs/input-copy/index.d.ts +44 -0
- package/dist/components/inputs/input-copy/index.js +18 -0
- package/dist/components/inputs/input-message/index.d.ts +125 -0
- package/dist/components/inputs/input-message/index.js +27 -0
- package/dist/components/inputs/radio-group/index.d.ts +58 -0
- package/dist/components/inputs/radio-group/index.js +22 -0
- package/dist/components/inputs/search/index.d.ts +83 -0
- package/dist/components/inputs/search/index.js +28 -0
- package/dist/components/inputs/select/index.d.ts +105 -0
- package/dist/components/inputs/select/index.js +37 -0
- package/dist/components/inputs/slider/index.d.ts +108 -0
- package/dist/components/inputs/slider/index.js +16 -0
- package/dist/components/inputs/switch/index.d.ts +43 -0
- package/dist/components/inputs/switch/index.js +16 -0
- package/dist/components/navigation/accordion/index.d.ts +117 -0
- package/dist/components/navigation/accordion/index.js +30 -0
- package/dist/components/navigation/sidebar/index.d.ts +388 -0
- package/dist/components/navigation/sidebar/index.js +101 -0
- package/dist/components/navigation/tabs/index.d.ts +70 -0
- package/dist/components/navigation/tabs/index.js +25 -0
- package/dist/components/navigation/tabs-subtle/index.d.ts +73 -0
- package/dist/components/navigation/tabs-subtle/index.js +23 -0
- package/dist/components/overlays/alert-dialog/index.d.ts +67 -0
- package/dist/components/overlays/alert-dialog/index.js +24 -0
- package/dist/components/overlays/command/index.d.ts +121 -0
- package/dist/components/overlays/command/index.js +39 -0
- package/dist/components/overlays/context-menu/index.d.ts +97 -0
- package/dist/components/overlays/context-menu/index.js +32 -0
- package/dist/components/overlays/dialog/index.d.ts +130 -0
- package/dist/components/overlays/dialog/index.js +39 -0
- package/dist/components/overlays/dropdown/index.d.ts +222 -0
- package/dist/components/overlays/dropdown/index.js +47 -0
- package/dist/components/overlays/popover/index.d.ts +87 -0
- package/dist/components/overlays/popover/index.js +28 -0
- package/dist/components/overlays/preview-card/index.d.ts +75 -0
- package/dist/components/overlays/preview-card/index.js +21 -0
- package/dist/components/overlays/sheet/index.d.ts +67 -0
- package/dist/components/overlays/sheet/index.js +26 -0
- package/dist/components/overlays/toast/index.d.ts +107 -0
- package/dist/components/overlays/toast/index.js +23 -0
- package/dist/components/overlays/tooltip/index.d.ts +75 -0
- package/dist/components/overlays/tooltip/index.js +19 -0
- package/dist/components/table/index.d.ts +44 -0
- package/dist/components/table/index.js +28 -0
- package/dist/components/thinking-indicator/index.d.ts +32 -0
- package/dist/components/thinking-indicator/index.js +15 -0
- package/dist/index.d.ts +3926 -0
- package/dist/index.js +513 -0
- package/dist/preset.d.ts +104 -0
- package/dist/preset.js +124 -0
- package/dist/primitives/code/index.d.ts +23 -0
- package/dist/primitives/code/index.js +12 -0
- package/dist/primitives/craft/index.d.ts +31 -0
- package/dist/primitives/craft/index.js +13 -0
- package/dist/primitives/fluid-hover/index.d.ts +233 -0
- package/dist/primitives/fluid-hover/index.js +27 -0
- package/dist/primitives/morph/index.d.ts +127 -0
- package/dist/primitives/morph/index.js +21 -0
- package/dist/primitives/motion/index.d.ts +115 -0
- package/dist/primitives/motion/index.js +20 -0
- package/dist/primitives/scroll-area/index.d.ts +41 -0
- package/dist/primitives/scroll-area/index.js +13 -0
- package/dist/primitives/sizes/index.d.ts +128 -0
- package/dist/primitives/sizes/index.js +22 -0
- package/dist/primitives/surface/index.d.ts +69 -0
- package/dist/primitives/surface/index.js +18 -0
- package/dist/shared/components-0f0as45n.js +17 -0
- package/dist/shared/components-40j34hdb.js +986 -0
- package/dist/shared/components-4hh0gm0v.js +292 -0
- package/dist/shared/components-4xxddc44.js +15 -0
- package/dist/shared/components-4xxtggzp.js +110 -0
- package/dist/shared/components-54nf2x99.js +293 -0
- package/dist/shared/components-5pkcfprd.js +232 -0
- package/dist/shared/components-5vxtcp88.js +9 -0
- package/dist/shared/components-5zry9te1.js +152 -0
- package/dist/shared/components-61ckf42z.js +220 -0
- package/dist/shared/components-6hzwfmfd.js +58 -0
- package/dist/shared/components-6phwsry6.js +361 -0
- package/dist/shared/components-6t6nr33r.js +86 -0
- package/dist/shared/components-6y1th6k4.js +111 -0
- package/dist/shared/components-74c20v2f.js +32 -0
- package/dist/shared/components-7cqq1sqy.js +193 -0
- package/dist/shared/components-7gv95yfy.js +496 -0
- package/dist/shared/components-7nww01w4.js +375 -0
- package/dist/shared/components-7zp99w5d.js +62 -0
- package/dist/shared/components-8hk9ve3r.js +1200 -0
- package/dist/shared/components-8hzbsfbd.js +123 -0
- package/dist/shared/components-9p8s8n5q.js +171 -0
- package/dist/shared/components-aaq3yk4f.js +304 -0
- package/dist/shared/components-bf2d9k02.js +484 -0
- package/dist/shared/components-bkvb6nem.js +63 -0
- package/dist/shared/components-brnzrp2t.js +262 -0
- package/dist/shared/components-csxz9f52.js +42 -0
- package/dist/shared/components-de8xsm9y.js +22 -0
- package/dist/shared/components-dg0w8g5p.js +26 -0
- package/dist/shared/components-dphg9gjr.js +42 -0
- package/dist/shared/components-e46kf6cp.js +298 -0
- package/dist/shared/components-ed7cmssr.js +105 -0
- package/dist/shared/components-ess3ch6w.js +137 -0
- package/dist/shared/components-gjfrycb5.js +984 -0
- package/dist/shared/components-gndm6am4.js +128 -0
- package/dist/shared/components-hjkrv00c.js +191 -0
- package/dist/shared/components-hzfp4tjb.js +270 -0
- package/dist/shared/components-j65qt1mq.js +719 -0
- package/dist/shared/components-jw16snbn.js +19 -0
- package/dist/shared/components-jxgznftn.js +146 -0
- package/dist/shared/components-kf2ehztc.js +216 -0
- package/dist/shared/components-kpbcms10.js +9 -0
- package/dist/shared/components-m5br529r.js +141 -0
- package/dist/shared/components-nn6xezy2.js +1828 -0
- package/dist/shared/components-nnnd2xef.js +9 -0
- package/dist/shared/components-p2vmyfe1.js +345 -0
- package/dist/shared/components-peg09pzs.js +79 -0
- package/dist/shared/components-r22vtgqc.js +45 -0
- package/dist/shared/components-r2gke5p6.js +1759 -0
- package/dist/shared/components-r43mqnd6.js +160 -0
- package/dist/shared/components-r4jt6hgd.js +58 -0
- package/dist/shared/components-rc63qsy6.js +159 -0
- package/dist/shared/components-s3yfvfkr.js +149 -0
- package/dist/shared/components-s5pkbjx1.js +445 -0
- package/dist/shared/components-tad5h7ta.js +346 -0
- package/dist/shared/components-taxmgbnh.js +120 -0
- package/dist/shared/components-tm88ghva.js +215 -0
- package/dist/shared/components-v7es8aan.js +144 -0
- package/dist/shared/components-vb033rns.js +28 -0
- package/dist/shared/components-vc1k7yv2.js +30 -0
- package/dist/shared/components-vktws5r6.js +667 -0
- package/dist/shared/components-x2xyckd5.js +198 -0
- package/dist/shared/components-x3rz4cyn.js +61 -0
- package/dist/shared/components-xszag63d.js +141 -0
- package/dist/shared/components-y3cqdrgy.js +291 -0
- package/dist/shared/components-zvb11ker.js +288 -0
- package/dist/shared/components-zx2hr57f.js +124 -0
- package/dist/styles.css +1949 -0
- package/dist/tailwind.css +219 -0
- package/dist/tokens.css +345 -0
- package/package.json +102 -3
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,3926 @@
|
|
|
1
|
+
import { JSX as JSX_1kxb } from "react";
|
|
2
|
+
interface SidebarAppProps {
|
|
3
|
+
/** Start with the sidebar open; the preset starts it collapsed. Defaults to `false`. */
|
|
4
|
+
defaultOpen?: boolean;
|
|
5
|
+
/** The sidebar's layout (see Sidebar). Defaults to `'inset'`. */
|
|
6
|
+
variant?: "sidebar" | "floating" | "inset";
|
|
7
|
+
/** The edge it sits on. Defaults to `'left'`. */
|
|
8
|
+
side?: "left" | "right";
|
|
9
|
+
/** Open the collapsed sidebar while the pointer is at its edge or on the topbar's trigger (see Sidebar). Defaults to `false`. */
|
|
10
|
+
openOnHover?: boolean;
|
|
11
|
+
/** Fill the parent box instead of the viewport, as the examples do. Defaults to `false`. */
|
|
12
|
+
contained?: boolean;
|
|
13
|
+
}
|
|
14
|
+
type Element_12xgc = JSX_1kxb["Element"];
|
|
15
|
+
/**
|
|
16
|
+
* An app shell around the Sidebar, as Fluid Functionalism's playground preset
|
|
17
|
+
* `sa1FQfCxH6` builds it: the inset layout, starting collapsed.
|
|
18
|
+
*
|
|
19
|
+
* Press the trigger in the topbar (or `[`) to bring the sidebar in. The
|
|
20
|
+
* header holds a workspace switcher, a search field and a "New" row; two
|
|
21
|
+
* thread sections fold from their labels and carry an "Add item" action;
|
|
22
|
+
* every thread shows its status dot and, on hover, a "More options" menu;
|
|
23
|
+
* the footer anchors the user row and two buttons. Pick a thread and the
|
|
24
|
+
* active row melts over to it while the topbar follows.
|
|
25
|
+
*
|
|
26
|
+
* Every overlay grows out of what opened it: the switcher, the user menu
|
|
27
|
+
* and the row menus are Dropdowns, the labels on the buttons are Tooltips,
|
|
28
|
+
* a collapsed sidebar with `openOnHover` slides open from its edge, and below
|
|
29
|
+
* the `md` breakpoint the sidebar is a Sheet growing out of the left edge.
|
|
30
|
+
*
|
|
31
|
+
* @example {@include ./examples.mdx}
|
|
32
|
+
*/
|
|
33
|
+
declare function SidebarApp({ defaultOpen, variant, side, openOnHover, contained }: SidebarAppProps): Element_12xgc;
|
|
34
|
+
import { VariantProps } from "class-variance-authority";
|
|
35
|
+
import { HTMLAttributes } from "react";
|
|
36
|
+
import { ClassProp as ClassProp_wz9o0r } from "class-variance-authority/types";
|
|
37
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
|
|
38
|
+
import { RefAttributes as RefAttributes_miuf56 } from "react";
|
|
39
|
+
declare const badgeColors: {
|
|
40
|
+
readonly gray: "var(--badge-gray)";
|
|
41
|
+
readonly red: "var(--badge-red)";
|
|
42
|
+
readonly orange: "var(--badge-orange)";
|
|
43
|
+
readonly amber: "var(--badge-amber)";
|
|
44
|
+
readonly yellow: "var(--badge-yellow)";
|
|
45
|
+
readonly lime: "var(--badge-lime)";
|
|
46
|
+
readonly green: "var(--badge-green)";
|
|
47
|
+
readonly emerald: "var(--badge-emerald)";
|
|
48
|
+
readonly teal: "var(--badge-teal)";
|
|
49
|
+
readonly cyan: "var(--badge-cyan)";
|
|
50
|
+
readonly blue: "var(--badge-blue)";
|
|
51
|
+
readonly indigo: "var(--badge-indigo)";
|
|
52
|
+
readonly violet: "var(--badge-violet)";
|
|
53
|
+
readonly purple: "var(--badge-purple)";
|
|
54
|
+
readonly fuchsia: "var(--badge-fuchsia)";
|
|
55
|
+
readonly pink: "var(--badge-pink)";
|
|
56
|
+
readonly rose: "var(--badge-rose)";
|
|
57
|
+
};
|
|
58
|
+
type BadgeColor = keyof typeof badgeColors;
|
|
59
|
+
declare const badgeVariants: (props?: ({
|
|
60
|
+
variant?: "dot" | "solid" | null | undefined;
|
|
61
|
+
size?: "default" | "compact" | null | undefined;
|
|
62
|
+
} & ClassProp_wz9o0r) | undefined) => string;
|
|
63
|
+
type BadgeSizeCanonical = "default" | "compact";
|
|
64
|
+
/** Public size values: the canonical two-size scale plus the pre-sizes-system
|
|
65
|
+
* aliases, kept so existing call sites keep compiling. Aliases resolve onto
|
|
66
|
+
* the canonical ladder (sm → compact; md/lg → default). */
|
|
67
|
+
type BadgeSize = BadgeSizeCanonical | "sm" | "md" | "lg";
|
|
68
|
+
interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, Omit<VariantProps<typeof badgeVariants>, "size"> {
|
|
69
|
+
/** Visual style. Solid uses a tinted background; dot shows a colored indicator. Defaults to `"solid"`. */
|
|
70
|
+
variant?: "solid" | "dot";
|
|
71
|
+
/** Step on the size ladder (see Sizes). Legacy sm/md/lg values resolve as aliases (sm → compact; md/lg → default). Defaults to the surrounding SizeProvider, else `"default"`. */
|
|
72
|
+
size?: BadgeSize;
|
|
73
|
+
/** Color from the Tailwind palette: gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, blue, indigo, violet, purple, fuchsia, pink, rose. Defaults to `"gray"`. */
|
|
74
|
+
color?: BadgeColor;
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Compact label for status, category, or metadata. Supports solid and dot
|
|
78
|
+
* variants with Tailwind colors.
|
|
79
|
+
*
|
|
80
|
+
* Solid badges tint their background with the chosen color mixed into the
|
|
81
|
+
* page background (gray uses the accent token); dot badges keep a neutral
|
|
82
|
+
* border and show the color as a small indicator. The badge rides the size
|
|
83
|
+
* ladder — `size` pins it, otherwise it follows the surrounding SizeProvider
|
|
84
|
+
* — and takes its corner radius from the shape context. Changes animate: a
|
|
85
|
+
* new label or variant springs the width while the label crossfades, and a
|
|
86
|
+
* new color fades in. The palette is also exported as `badgeColors`, the class
|
|
87
|
+
* recipe as `badgeVariants`.
|
|
88
|
+
*
|
|
89
|
+
* @example {@include ./examples.mdx}
|
|
90
|
+
*/
|
|
91
|
+
declare const Badge: ForwardRefExoticComponent_tcubfn<BadgeProps & RefAttributes_miuf56<HTMLSpanElement>>;
|
|
92
|
+
import { VariantProps as VariantProps2 } from "class-variance-authority";
|
|
93
|
+
import { ButtonHTMLAttributes, ReactNode as ReactNode2 } from "react";
|
|
94
|
+
import { ComponentType, ReactNode } from "react";
|
|
95
|
+
import { JSX as JSX_1kxb2 } from "react";
|
|
96
|
+
interface IconComponentProps {
|
|
97
|
+
size?: number | string;
|
|
98
|
+
strokeWidth?: number | string;
|
|
99
|
+
className?: string;
|
|
100
|
+
}
|
|
101
|
+
type IconComponent = ComponentType<IconComponentProps>;
|
|
102
|
+
type IconName = "chevron-right" | "chevron-down" | "x" | "copy" | "menu" | "dot" | "monitor" | "sun" | "moon" | "rectangle-horizontal" | "circle" | "square-library" | "clock" | "star" | "settings" | "plus" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-down" | "search" | "loader" | "users" | "lock" | "mail" | "bell" | "shield" | "palette" | "lightbulb" | "rocket" | "heart" | "paintbrush" | "brain" | "globe" | "user" | "image" | "link" | "check" | "rotate-ccw" | "play" | "pause" | "pipette" | "home" | "message-circle" | "inbox" | "pencil" | "scaling" | "skip-forward" | "corner-down-right" | "corner-down-left" | "panel-left" | "panel-left-dashed" | "panel-right" | "panel-right-dashed" | "chevrons-up-down" | "more-horizontal" | "more-vertical" | "calendar" | "folder" | "sliders-horizontal";
|
|
103
|
+
type Element_12xgc2 = JSX_1kxb2["Element"];
|
|
104
|
+
/**
|
|
105
|
+
* Swap some or all icons for components from another library.
|
|
106
|
+
* Names left out of `icons` keep their default (Lucide) component.
|
|
107
|
+
*/
|
|
108
|
+
declare function IconProvider({ children, icons }: {
|
|
109
|
+
children: ReactNode;
|
|
110
|
+
icons?: Partial<Record<IconName, IconComponent>>;
|
|
111
|
+
}): Element_12xgc2;
|
|
112
|
+
import { ClassProp as ClassProp_wz9o0r2 } from "class-variance-authority/types";
|
|
113
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn2 } from "react";
|
|
114
|
+
import { RefAttributes as RefAttributes_miuf562 } from "react";
|
|
115
|
+
declare const buttonVariants: (props?: ({
|
|
116
|
+
variant?: "primary" | "secondary" | "tertiary" | "ghost" | null | undefined;
|
|
117
|
+
size?: "default" | "compact" | "icon" | "icon-compact" | null | undefined;
|
|
118
|
+
iconLeft?: boolean | null | undefined;
|
|
119
|
+
iconRight?: boolean | null | undefined;
|
|
120
|
+
} & ClassProp_wz9o0r2) | undefined) => string;
|
|
121
|
+
type ButtonSizeCanonical = "default" | "compact" | "icon" | "icon-compact";
|
|
122
|
+
/** Public size values: the canonical two-size scale plus the pre-sizes-system
|
|
123
|
+
* aliases, kept so existing call sites keep compiling. Aliases resolve onto
|
|
124
|
+
* the canonical ladder (sm → compact; md/lg → default). */
|
|
125
|
+
type ButtonSize = ButtonSizeCanonical | "sm" | "md" | "lg" | "icon-sm" | "icon-lg";
|
|
126
|
+
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Omit<VariantProps2<typeof buttonVariants>, "size"> {
|
|
127
|
+
/** Visual style of the button. Defaults to `"primary"`. */
|
|
128
|
+
variant?: "primary" | "secondary" | "tertiary" | "ghost";
|
|
129
|
+
/** Step on the size ladder (36px default, 28px compact — see Sizes): `"default"` | `"compact"` | `"icon"` | `"icon-compact"`. Omitted, the button follows the surrounding SizeProvider. Legacy sm/md/lg values resolve as aliases (sm → compact; md/lg → default; icon-sm → icon-compact; icon-lg → icon). */
|
|
130
|
+
size?: ButtonSize;
|
|
131
|
+
/** Merge props onto the child element instead of rendering a `<button>` — the single React-element child becomes the rendered element (slot-style). Defaults to `false`. */
|
|
132
|
+
asChild?: boolean;
|
|
133
|
+
/** Folds the button into a circle around a spinner and disables it; the button keeps its box, so nothing around it moves. Defaults to `false`. */
|
|
134
|
+
loading?: boolean;
|
|
135
|
+
/** Icon displayed before the label. */
|
|
136
|
+
leadingIcon?: IconComponent;
|
|
137
|
+
/** Icon displayed after the label. */
|
|
138
|
+
trailingIcon?: IconComponent;
|
|
139
|
+
/** Forces the pressed/held visual — e.g. while a dropdown or popover the button opened is showing. Defaults to `false`. */
|
|
140
|
+
active?: boolean;
|
|
141
|
+
/** Disables the button. Defaults to `false`. */
|
|
142
|
+
disabled?: boolean;
|
|
143
|
+
/** The label. With `size="icon"` / `"icon-compact"`, the icon itself (give the button an `aria-label`). */
|
|
144
|
+
children?: ReactNode2;
|
|
145
|
+
}
|
|
146
|
+
/**
|
|
147
|
+
* Versatile button with variants, sizes, loading state, and icon support.
|
|
148
|
+
*
|
|
149
|
+
* Four variants (primary, secondary, tertiary, ghost) on the two-step size
|
|
150
|
+
* ladder: 36px by default, 28px compact — an explicit `size` wins, otherwise
|
|
151
|
+
* the button follows the surrounding SizeProvider. The press effect shrinks
|
|
152
|
+
* the fill by exactly 1px per side at any width, icons thicken their stroke
|
|
153
|
+
* on hover, and `loading` folds the surface into a circle around a spinner
|
|
154
|
+
* (and back when it ends) while the button keeps its box, so nothing around
|
|
155
|
+
* it moves. Built on Base UI's Button; `asChild` renders your own
|
|
156
|
+
* element (e.g. a link) with the button's styling instead.
|
|
157
|
+
*
|
|
158
|
+
* @example {@include ./examples.mdx}
|
|
159
|
+
*/
|
|
160
|
+
declare const Button2: ForwardRefExoticComponent_tcubfn2<ButtonProps & RefAttributes_miuf562<HTMLButtonElement>>;
|
|
161
|
+
import { ForwardRefExoticComponent, HTMLAttributes as HTMLAttributes2, ReactNode as ReactNode3, RefAttributes } from "react";
|
|
162
|
+
type SizeVariant = "default" | "compact";
|
|
163
|
+
interface SizeClasses {
|
|
164
|
+
/** The variant these classes belong to — handy for conditionals. */
|
|
165
|
+
variant: SizeVariant;
|
|
166
|
+
/** Bounded control height — buttons, inputs, select triggers, subtle tabs —
|
|
167
|
+
* AND list/menu rows (select options, dropdown, checkbox and radio rows).
|
|
168
|
+
* One token by design: a popup row lines up with the trigger that opened
|
|
169
|
+
* it because they share this height. */
|
|
170
|
+
control: string;
|
|
171
|
+
/** `control` as a number, for consumers that need raw pixels. */
|
|
172
|
+
controlHeight: number;
|
|
173
|
+
/** Tab trigger height inside a padded segmented list. Sized so
|
|
174
|
+
* `segmentPad` + `segmentItem` adds back up to the control height —
|
|
175
|
+
* the segmented control's outer box stays on the same ladder. */
|
|
176
|
+
segmentItem: string;
|
|
177
|
+
/** Padding of the segmented list around its tabs. */
|
|
178
|
+
segmentPad: string;
|
|
179
|
+
/** Body text inside controls. */
|
|
180
|
+
text: string;
|
|
181
|
+
/** Horizontal padding of bounded controls (select trigger, inputs). */
|
|
182
|
+
px: string;
|
|
183
|
+
/** Horizontal padding of list/menu rows, which sit inside a padded popup
|
|
184
|
+
* or group and need less inset than a bounded control. */
|
|
185
|
+
itemPx: string;
|
|
186
|
+
/** Gap between an icon / control glyph and its label, and between
|
|
187
|
+
* neighbouring controls in a row (toolbars, filter bars, button
|
|
188
|
+
* clusters). Density is spacing as much as control height, so the
|
|
189
|
+
* compact step halves it. */
|
|
190
|
+
gap: string;
|
|
191
|
+
/** Glyph size in px: leading/trailing icons inside controls, and the
|
|
192
|
+
* checkbox square / radio circle. */
|
|
193
|
+
icon: number;
|
|
194
|
+
}
|
|
195
|
+
declare const sizeMap: Record<SizeVariant, SizeClasses>;
|
|
196
|
+
/** One role of the type scale: px per ladder step. */
|
|
197
|
+
interface TypeScaleStep {
|
|
198
|
+
default: number;
|
|
199
|
+
compact: number;
|
|
200
|
+
}
|
|
201
|
+
/**
|
|
202
|
+
* Role-based type scale, per ladder step (px values).
|
|
203
|
+
*
|
|
204
|
+
* The default column is the system as shipped; the compact column steps each
|
|
205
|
+
* role down one notch so dense regions read as a smaller sibling of the same
|
|
206
|
+
* hierarchy, not a squeezed copy. `body`, `caption`, and `subtitle` are what
|
|
207
|
+
* the sized components already render through `SizeClasses.text` and their
|
|
208
|
+
* compact conditionals; `display` and `title` are the page-level roles
|
|
209
|
+
* for consumers composing their own screens.
|
|
210
|
+
*/
|
|
211
|
+
declare const typeScale: {
|
|
212
|
+
/** Page titles. */
|
|
213
|
+
readonly display: {
|
|
214
|
+
readonly default: 28;
|
|
215
|
+
readonly compact: 24;
|
|
216
|
+
};
|
|
217
|
+
/** Section headings, dialog titles. */
|
|
218
|
+
readonly title: {
|
|
219
|
+
readonly default: 16;
|
|
220
|
+
readonly compact: 15;
|
|
221
|
+
};
|
|
222
|
+
/** Card titles, chat bubbles, emphasized rows. */
|
|
223
|
+
readonly subtitle: {
|
|
224
|
+
readonly default: 14;
|
|
225
|
+
readonly compact: 13;
|
|
226
|
+
};
|
|
227
|
+
/** Control labels and body copy — `SizeClasses.text`. */
|
|
228
|
+
readonly body: {
|
|
229
|
+
readonly default: 13;
|
|
230
|
+
readonly compact: 12;
|
|
231
|
+
};
|
|
232
|
+
/** Secondary text: descriptions, meta rows, errors, eyebrows and group
|
|
233
|
+
* labels (the former overline role — an uppercase or muted caption). */
|
|
234
|
+
readonly caption: {
|
|
235
|
+
readonly default: 12;
|
|
236
|
+
readonly compact: 11;
|
|
237
|
+
};
|
|
238
|
+
};
|
|
239
|
+
type TypeScaleRole = keyof typeof typeScale;
|
|
240
|
+
/** The type scale resolved for the active ladder step (px per role):
|
|
241
|
+
* explicit override > surrounding SizeProvider > "default". */
|
|
242
|
+
declare function useTypeScale(override?: SizeVariant | null): Record<TypeScaleRole, number>;
|
|
243
|
+
interface SizeContextValue {
|
|
244
|
+
size: SizeVariant;
|
|
245
|
+
setSize: (size: SizeVariant) => void;
|
|
246
|
+
classes: SizeClasses;
|
|
247
|
+
}
|
|
248
|
+
/** Resolve the active size variant: explicit prop > provider > "default". */
|
|
249
|
+
declare function useSizeVariant(override?: SizeVariant | null): SizeVariant;
|
|
250
|
+
/** Resolve size classes: explicit prop > provider > "default". */
|
|
251
|
+
declare function useSize(override?: SizeVariant | null): SizeClasses;
|
|
252
|
+
declare function useSizeContext(): SizeContextValue;
|
|
253
|
+
import { JSX as JSX_1kxb3 } from "react";
|
|
254
|
+
type CardOrientation = "card" | "inline";
|
|
255
|
+
type CardBorder = "none" | "outlined";
|
|
256
|
+
interface CardGroupProps extends Omit<HTMLAttributes2<HTMLDivElement>, "onDrag"> {
|
|
257
|
+
/** How each card lays its own content out.
|
|
258
|
+
* "card" — stacked vertically (media/header on top). "inline" — a
|
|
259
|
+
* horizontal row (leading media, trailing footer), like a Table row.
|
|
260
|
+
* @default "card" */
|
|
261
|
+
orientation?: CardOrientation;
|
|
262
|
+
/** Number of grid columns. >1 enables 2-D fluid hover across rows and columns.
|
|
263
|
+
* @default 1 */
|
|
264
|
+
columns?: number;
|
|
265
|
+
/** "none" — borderless (default), separated only by subtle dividers.
|
|
266
|
+
* "outlined" — draws a border: one shared frame when grouped, or one per
|
|
267
|
+
* card when `separated`. @default "none" */
|
|
268
|
+
border?: CardBorder;
|
|
269
|
+
/** Split the group into individually-shaped cards with a gap between them
|
|
270
|
+
* (a grid of tiles) instead of one continuous divided block. @default false */
|
|
271
|
+
separated?: boolean;
|
|
272
|
+
/** Enable the magnetic fluid-hover highlight. @default true */
|
|
273
|
+
fluidHover?: boolean;
|
|
274
|
+
}
|
|
275
|
+
declare const CardGroup: ForwardRefExoticComponent<CardGroupProps & RefAttributes<HTMLDivElement>>;
|
|
276
|
+
interface CardProps extends Omit<HTMLAttributes2<HTMLDivElement>, "onClick"> {
|
|
277
|
+
/** Compositional parts: Card.Image, Card.Media, Card.Header, Card.Content, Card.Footer. */
|
|
278
|
+
children?: ReactNode3;
|
|
279
|
+
/** Makes the whole card a clickable target (stretched button); fluid hover previews it. */
|
|
280
|
+
onClick?: () => void;
|
|
281
|
+
/** Makes the whole card a link (stretched anchor). */
|
|
282
|
+
href?: string;
|
|
283
|
+
/** Opens href in a new tab. Defaults to `false`. */
|
|
284
|
+
external?: boolean;
|
|
285
|
+
/** Accessible name for the stretched link/button when the whole card is clickable (the visible title isn't wired up automatically). */
|
|
286
|
+
label?: string;
|
|
287
|
+
/** Persistent selected fill + title emphasis, on top of fluid hover. The group drops the hairline dividers around the selected card so the fill reads clean. Defaults to `false`. */
|
|
288
|
+
selected?: boolean;
|
|
289
|
+
/** Dims and disables the card. Defaults to `false`. */
|
|
290
|
+
disabled?: boolean;
|
|
291
|
+
/** Shows a dismiss (✕) button, revealed on hover or focus by default. Defaults to `false`. */
|
|
292
|
+
dismissible?: boolean;
|
|
293
|
+
/** Keeps the dismiss control hidden until the card is hovered or holds focus. Pass false for an always-visible ✕. Defaults to `true`. */
|
|
294
|
+
dismissOnHover?: boolean;
|
|
295
|
+
/** Called when the dismiss button is pressed. */
|
|
296
|
+
onDismiss?: () => void;
|
|
297
|
+
/** Pins the card to one step of the size ladder — compact tightens type and padding. Omitted, it follows the surrounding SizeProvider. */
|
|
298
|
+
size?: SizeVariant;
|
|
299
|
+
/** Injected by Card.Group — do not set by hand. */
|
|
300
|
+
index?: number;
|
|
301
|
+
}
|
|
302
|
+
type CardComponent = ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> & {
|
|
303
|
+
Group: typeof CardGroup;
|
|
304
|
+
Header: typeof CardHeader;
|
|
305
|
+
Title: typeof CardTitle;
|
|
306
|
+
Description: typeof CardDescription;
|
|
307
|
+
Action: typeof CardAction;
|
|
308
|
+
Content: typeof CardContent;
|
|
309
|
+
Footer: typeof CardFooter;
|
|
310
|
+
Media: typeof CardMedia;
|
|
311
|
+
Image: typeof CardImage;
|
|
312
|
+
Eyebrow: typeof CardEyebrow;
|
|
313
|
+
Feature: typeof CardFeature;
|
|
314
|
+
Button: typeof CardButton;
|
|
315
|
+
};
|
|
316
|
+
/**
|
|
317
|
+
* shadcn's compositional card, dressed in Fluid Functionalism. Stacked,
|
|
318
|
+
* inline, or grid — borderless by default with fluid hover that previews
|
|
319
|
+
* where a click will land.
|
|
320
|
+
*
|
|
321
|
+
* The same parts and data-slot contract as shadcn's Card, on a transparent,
|
|
322
|
+
* borderless surface: a card inherits its parent's substrate and leans on
|
|
323
|
+
* hairline dividers rather than a drawn frame. Card.Group owns the layout (a
|
|
324
|
+
* stacked list, inline rows or a grid) and assigns every child its fluid
|
|
325
|
+
* hover index; only a clickable card (`onClick` or `href`) joins the magnetic
|
|
326
|
+
* highlight. A clickable card is one stretched button or link, while footer
|
|
327
|
+
* actions and Card.Action stay independently clickable above it.
|
|
328
|
+
*
|
|
329
|
+
* Statics: Card.Group (orientation "card" | "inline", columns, border "none"
|
|
330
|
+
* | "outlined", separated, fluidHover), Card.Header (title + description
|
|
331
|
+
* grid, pins Card.Action top-right), Card.Title (weight-animates when the card
|
|
332
|
+
* is selected), Card.Description, Card.Action, Card.Content, Card.Footer (the
|
|
333
|
+
* actions row), Card.Media (an icon tile, a logo or a [logoA, logoB] pair),
|
|
334
|
+
* Card.Image (full-bleed banner, or a leading image when inline),
|
|
335
|
+
* Card.Eyebrow (small uppercase label), Card.Feature (icon + title +
|
|
336
|
+
* description row) and Card.Button (primary | secondary | ghost | link
|
|
337
|
+
* action; an anchor when given `href`).
|
|
338
|
+
*
|
|
339
|
+
* @example {@include ./examples.mdx}
|
|
340
|
+
*/
|
|
341
|
+
declare const Card: CardComponent;
|
|
342
|
+
declare const CardHeader: ForwardRefExoticComponent<HTMLAttributes2<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
|
|
343
|
+
declare const CardTitle: ForwardRefExoticComponent<HTMLAttributes2<HTMLSpanElement> & RefAttributes<HTMLSpanElement>>;
|
|
344
|
+
declare const CardDescription: ForwardRefExoticComponent<HTMLAttributes2<HTMLParagraphElement> & RefAttributes<HTMLParagraphElement>>;
|
|
345
|
+
declare const CardAction: ForwardRefExoticComponent<HTMLAttributes2<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
|
|
346
|
+
declare const CardContent: ForwardRefExoticComponent<HTMLAttributes2<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
|
|
347
|
+
declare const CardFooter: ForwardRefExoticComponent<HTMLAttributes2<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
|
|
348
|
+
type CardLogo = string | [string, string];
|
|
349
|
+
interface CardMediaProps {
|
|
350
|
+
logo?: CardLogo;
|
|
351
|
+
logoAlt?: string;
|
|
352
|
+
icon?: IconComponent;
|
|
353
|
+
size?: number;
|
|
354
|
+
className?: string;
|
|
355
|
+
}
|
|
356
|
+
type Element_12xgc3 = JSX_1kxb3["Element"];
|
|
357
|
+
declare function CardMedia({ logo, logoAlt, icon: Icon, size, className }: CardMediaProps): Element_12xgc3 | null;
|
|
358
|
+
interface CardImageProps {
|
|
359
|
+
src: string;
|
|
360
|
+
alt?: string;
|
|
361
|
+
className?: string;
|
|
362
|
+
}
|
|
363
|
+
declare function CardImage({ src, alt, className }: CardImageProps): Element_12xgc3;
|
|
364
|
+
declare const CardEyebrow: ForwardRefExoticComponent<HTMLAttributes2<HTMLSpanElement> & RefAttributes<HTMLSpanElement>>;
|
|
365
|
+
interface CardFeatureProps {
|
|
366
|
+
icon?: IconComponent;
|
|
367
|
+
title: string;
|
|
368
|
+
description?: string;
|
|
369
|
+
}
|
|
370
|
+
declare function CardFeature({ icon: Icon, title, description }: CardFeatureProps): Element_12xgc3;
|
|
371
|
+
type CardButtonVariant = "primary" | "secondary" | "ghost" | "link";
|
|
372
|
+
interface CardButtonProps {
|
|
373
|
+
children: React.ReactNode3;
|
|
374
|
+
onClick?: () => void;
|
|
375
|
+
href?: string;
|
|
376
|
+
variant?: CardButtonVariant;
|
|
377
|
+
icon?: IconComponent;
|
|
378
|
+
iconPosition?: "start" | "end";
|
|
379
|
+
/** Opens the href in a new tab and appends an outward arrow glyph. */
|
|
380
|
+
external?: boolean;
|
|
381
|
+
disabled?: boolean;
|
|
382
|
+
}
|
|
383
|
+
declare function CardButton({ children, onClick, href, variant, icon: Icon, iconPosition, external, disabled }: CardButtonProps): Element_12xgc3;
|
|
384
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent2, HTMLAttributes as HTMLAttributes3, ReactNode as ReactNode4, RefAttributes as RefAttributes2 } from "react";
|
|
385
|
+
interface CheckboxGroupProps extends HTMLAttributes3<HTMLDivElement> {
|
|
386
|
+
/** CheckboxGroup.Item children. */
|
|
387
|
+
children: ReactNode4;
|
|
388
|
+
/** Set of checked item indices; drives the merged background across contiguous picks. Controlled — pair it with `onCheckedIndicesChange` (or per-item `onToggle`). */
|
|
389
|
+
checkedIndices?: Set<number>;
|
|
390
|
+
/** Checked indices on first render when uncontrolled (a Set or an array). Defaults to none. */
|
|
391
|
+
defaultCheckedIndices?: Set<number> | number[];
|
|
392
|
+
/** Called with the next checked set whenever an item is toggled. */
|
|
393
|
+
onCheckedIndicesChange?: (checkedIndices: Set<number>) => void;
|
|
394
|
+
/** Pins the group's rows to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
|
|
395
|
+
size?: SizeVariant;
|
|
396
|
+
}
|
|
397
|
+
type CheckboxGroupComponent = ForwardRefExoticComponent2<CheckboxGroupProps & RefAttributes2<HTMLDivElement>> & {
|
|
398
|
+
Item: typeof CheckboxItem;
|
|
399
|
+
};
|
|
400
|
+
/**
|
|
401
|
+
* Checkbox group with merged backgrounds for contiguous selections.
|
|
402
|
+
*
|
|
403
|
+
* Each row is a `CheckboxGroup.Item` with a stable `index`. Contiguous checked
|
|
404
|
+
* rows share one background: a checked row's background grows out of its
|
|
405
|
+
* center and melts into its neighbours, an unchecked one pinches off and
|
|
406
|
+
* shrinks away (the liquid indicators in Morph). A fluid hover highlight melts
|
|
407
|
+
* from row to row, and Arrow Up/Down,
|
|
408
|
+
* Home and End move focus while Space or Enter toggles. The checked label
|
|
409
|
+
* animates to semibold without shifting its width. The group is uncontrolled
|
|
410
|
+
* with `defaultCheckedIndices`, or controlled with `checkedIndices` plus
|
|
411
|
+
* `onCheckedIndicesChange` — FF's per-item `checked` / `onToggle` still work
|
|
412
|
+
* and override the group state for their row.
|
|
413
|
+
*
|
|
414
|
+
* Statics:
|
|
415
|
+
* - `CheckboxGroup.Item` — one checkbox row: `label`, `index`, and optional
|
|
416
|
+
* `checked` / `onToggle`.
|
|
417
|
+
*
|
|
418
|
+
* @example {@include ./examples.mdx}
|
|
419
|
+
*/
|
|
420
|
+
declare const CheckboxGroup: CheckboxGroupComponent;
|
|
421
|
+
interface CheckboxItemProps extends HTMLAttributes3<HTMLDivElement> {
|
|
422
|
+
/** Text label for the checkbox. */
|
|
423
|
+
label: string;
|
|
424
|
+
/** Position index within the group. */
|
|
425
|
+
index: number;
|
|
426
|
+
/** Whether this item is checked. Defaults to the group's checked set. */
|
|
427
|
+
checked?: boolean;
|
|
428
|
+
/** Called when this item is toggled (the group's `onCheckedIndicesChange` fires too). */
|
|
429
|
+
onToggle?: () => void;
|
|
430
|
+
}
|
|
431
|
+
declare const CheckboxItem: ForwardRefExoticComponent2<CheckboxItemProps & RefAttributes2<HTMLDivElement>>;
|
|
432
|
+
import { CSSProperties, ForwardRefExoticComponent as ForwardRefExoticComponent3, HTMLAttributes as HTMLAttributes4, ReactNode as ReactNode5, RefAttributes as RefAttributes3, RefObject as RefObject2 } from "react";
|
|
433
|
+
import { JSX as JSX_1kxb4 } from "react";
|
|
434
|
+
type ColorFormat = "hex" | "rgb" | "hsl" | "oklch";
|
|
435
|
+
type Element_12xgc4 = JSX_1kxb4["Element"];
|
|
436
|
+
declare function ColorPickerPortalContainer({ value, children }: {
|
|
437
|
+
value: HTMLElement | null;
|
|
438
|
+
children: ReactNode5;
|
|
439
|
+
}): Element_12xgc4;
|
|
440
|
+
interface ParsedColor {
|
|
441
|
+
h: number;
|
|
442
|
+
s: number;
|
|
443
|
+
v: number;
|
|
444
|
+
a: number;
|
|
445
|
+
r: number;
|
|
446
|
+
g: number;
|
|
447
|
+
b: number;
|
|
448
|
+
hex: string;
|
|
449
|
+
rgb: string;
|
|
450
|
+
hsl: string;
|
|
451
|
+
oklch: string;
|
|
452
|
+
}
|
|
453
|
+
interface ColorPickerProps extends Omit<HTMLAttributes4<HTMLDivElement>, "onChange" | "defaultValue"> {
|
|
454
|
+
/** Controlled color value, in any of the supported formats. Omit it to let the picker keep its own state, seeded from `defaultValue`. */
|
|
455
|
+
value?: string;
|
|
456
|
+
/** Initial color when uncontrolled — any CSS color string, named colors included. Defaults to `"#6B97FF"`. */
|
|
457
|
+
defaultValue?: string;
|
|
458
|
+
/** Fired on every change. Receives the formatted string and a parsed color object carrying every format. */
|
|
459
|
+
onValueChange?: (value: string, parsed: ParsedColor) => void;
|
|
460
|
+
/** Controlled format selection. */
|
|
461
|
+
format?: ColorFormat;
|
|
462
|
+
/** Initial format when uncontrolled. Defaults to `"hex"`. */
|
|
463
|
+
defaultFormat?: ColorFormat;
|
|
464
|
+
/** Fired when the user switches format. */
|
|
465
|
+
onFormatChange?: (format: ColorFormat) => void;
|
|
466
|
+
/** Optional preset swatches. When omitted, the strip is hidden. */
|
|
467
|
+
swatches?: string[];
|
|
468
|
+
/** Force-hide the eyedropper button — it is hidden automatically in browsers that do not support it. Defaults to `false`. */
|
|
469
|
+
hideEyedropper?: boolean;
|
|
470
|
+
/** Controls the format dropdown's open state. When provided, the dropdown is fully controlled and ignores user toggles. */
|
|
471
|
+
formatOpen?: boolean;
|
|
472
|
+
/** Initial open state for the format dropdown (uncontrolled). Defaults to `false`. */
|
|
473
|
+
defaultFormatOpen?: boolean;
|
|
474
|
+
/** Pins trigger and popover to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, they follow the surrounding SizeProvider. */
|
|
475
|
+
size?: SizeVariant;
|
|
476
|
+
/** Merged after the panel's surface, radius and padding classes. */
|
|
477
|
+
className?: string;
|
|
478
|
+
}
|
|
479
|
+
interface ColorPickerPopoverProps extends ColorPickerProps {
|
|
480
|
+
/** Optional label rendered alongside the color tile. */
|
|
481
|
+
triggerLabel?: string;
|
|
482
|
+
/** Position of the label relative to the color tile. Defaults to `"left"`. */
|
|
483
|
+
triggerLabelPosition?: "left" | "right";
|
|
484
|
+
/** Show the hex value (without alpha) next to the tile. Defaults to `true`. */
|
|
485
|
+
triggerShowValue?: boolean;
|
|
486
|
+
/** Render an X button on the trigger; pairs with `onTriggerRemove`. Defaults to `false`. */
|
|
487
|
+
triggerShowRemove?: boolean;
|
|
488
|
+
/** Fired when the X button is clicked. */
|
|
489
|
+
onTriggerRemove?: () => void;
|
|
490
|
+
/** Custom classes on the trigger button. */
|
|
491
|
+
triggerClassName?: string;
|
|
492
|
+
/** Controls the popover's open state. When provided, the popover is fully
|
|
493
|
+
* controlled and ignores trigger clicks. */
|
|
494
|
+
open?: boolean;
|
|
495
|
+
/** Initial open state for the popover (uncontrolled). Defaults to `false`. */
|
|
496
|
+
defaultOpen?: boolean;
|
|
497
|
+
/** Called when the open state would change (fires even when controlled). */
|
|
498
|
+
onOpenChange?: (open: boolean) => void;
|
|
499
|
+
/** Where the panel grows from (see Morph): the trigger, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
500
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject2<HTMLElement | null>;
|
|
501
|
+
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
502
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
503
|
+
/** Hide the trigger while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
504
|
+
hideSource?: boolean;
|
|
505
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
|
|
506
|
+
tier?: "moderate" | "slow";
|
|
507
|
+
}
|
|
508
|
+
interface ColorSwatchProps extends Omit<HTMLAttributes4<HTMLButtonElement>, "color"> {
|
|
509
|
+
/** The swatch color — any CSS color string. */
|
|
510
|
+
color: string;
|
|
511
|
+
/** Edge length in pixels. Defaults to `28`. */
|
|
512
|
+
size?: number;
|
|
513
|
+
/** Draws the selection ring. */
|
|
514
|
+
selected?: boolean;
|
|
515
|
+
}
|
|
516
|
+
declare function parseColor(input: string): {
|
|
517
|
+
r: number;
|
|
518
|
+
g: number;
|
|
519
|
+
b: number;
|
|
520
|
+
a: number;
|
|
521
|
+
} | null;
|
|
522
|
+
declare function buildParsed(h: number, s: number, v: number, a: number): ParsedColor;
|
|
523
|
+
interface ColorTileProps {
|
|
524
|
+
color: string;
|
|
525
|
+
size?: number;
|
|
526
|
+
className?: string;
|
|
527
|
+
style?: CSSProperties;
|
|
528
|
+
}
|
|
529
|
+
declare function ColorTile({ color, size, className, style }: ColorTileProps): Element_12xgc4;
|
|
530
|
+
declare const ColorSwatch: ForwardRefExoticComponent3<ColorSwatchProps & RefAttributes3<HTMLButtonElement>>;
|
|
531
|
+
type ColorPickerComponent = ForwardRefExoticComponent3<ColorPickerProps & RefAttributes3<HTMLDivElement>> & {
|
|
532
|
+
/** `ColorPickerPopover` — the same panel behind a trigger button. */
|
|
533
|
+
Popover: typeof ColorPickerPopover;
|
|
534
|
+
};
|
|
535
|
+
/**
|
|
536
|
+
* Color picker with HEX, RGB, HSL, and OKLCH formats, an alpha channel,
|
|
537
|
+
* optional swatches, and an eyedropper. Available as an inline panel or a
|
|
538
|
+
* popover.
|
|
539
|
+
*
|
|
540
|
+
* The value is kept internally as HSV, so hue survives a pass through pure
|
|
541
|
+
* black, pure white or full grey instead of collapsing to red. Every edit —
|
|
542
|
+
* the saturation square, the hue and alpha sliders, the per-channel inputs,
|
|
543
|
+
* a swatch, the eyedropper — writes to that one canonical color, which is
|
|
544
|
+
* re-emitted in the active format together with a parsed object carrying all
|
|
545
|
+
* four. Numeric channels scrub: drag sideways to sweep a value, click to type
|
|
546
|
+
* it. Alpha reads against a checkerboard, swatches accept any CSS color string
|
|
547
|
+
* (named colors included), and OKLCH edits keep the hue you typed across the
|
|
548
|
+
* lossy trip back through sRGB. The panel paints itself on the surface ladder
|
|
549
|
+
* and re-provides its level, so the format menu elevates above it however
|
|
550
|
+
* deeply the picker is nested.
|
|
551
|
+
*
|
|
552
|
+
* Statics:
|
|
553
|
+
* - `ColorPicker.Popover` — `ColorPickerPopover`: the same panel behind a
|
|
554
|
+
* trigger button showing a color tile, an optional label and the hex value.
|
|
555
|
+
* The panel oozes out of the trigger and back through the shared morph (see
|
|
556
|
+
* Morph), with the morph options `from`, `effect`, `hideSource`, `tier`.
|
|
557
|
+
*
|
|
558
|
+
* Also exported: `ColorSwatch` and `ColorTile` (the swatch button and the
|
|
559
|
+
* checkerboard tile), `ColorPickerPortalContainer` (portal the format menu
|
|
560
|
+
* into a given element — e.g. inside a CSS-scaled ancestor), and the
|
|
561
|
+
* `parseColor` / `buildParsed` color helpers.
|
|
562
|
+
*
|
|
563
|
+
* @example {@include ./examples.mdx}
|
|
564
|
+
*/
|
|
565
|
+
declare const ColorPicker: ColorPickerComponent;
|
|
566
|
+
declare const ColorPickerPopover: ForwardRefExoticComponent3<ColorPickerPopoverProps & RefAttributes3<HTMLDivElement>>;
|
|
567
|
+
import { VariantProps as VariantProps3 } from "class-variance-authority";
|
|
568
|
+
import { HTMLAttributes as HTMLAttributes5, InputHTMLAttributes as InputHTMLAttributes2, ReactNode as ReactNode6, RefObject as RefObject3 } from "react";
|
|
569
|
+
import { ClassProp as ClassProp_wz9o0r3 } from "class-variance-authority/types";
|
|
570
|
+
/**
|
|
571
|
+
* The ringed box of a text field. It steps from rest to a muted fill when lit
|
|
572
|
+
* (hovered, or `data-active` from a group's fluid hover) to the card fill
|
|
573
|
+
* when focused. `data-invalid` keeps a destructive ring in every state and
|
|
574
|
+
* tints the lit fill; `data-disabled` frames and dims it. Put it on the
|
|
575
|
+
* element around the control and stamp the data attributes; Base UI parts
|
|
576
|
+
* stamp `data-invalid` / `data-disabled` themselves.
|
|
577
|
+
*/
|
|
578
|
+
declare const fieldVariants: (props?: ({
|
|
579
|
+
variant?: "borderless" | "bordered" | null | undefined;
|
|
580
|
+
} & ClassProp_wz9o0r3) | undefined) => string;
|
|
581
|
+
import { JSX as JSX_1kxb5 } from "react";
|
|
582
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn3 } from "react";
|
|
583
|
+
import { RefAttributes as RefAttributes_miuf563 } from "react";
|
|
584
|
+
/** An object item: `value` and `label`, plus whatever the rows need. */
|
|
585
|
+
interface ComboboxItemObject {
|
|
586
|
+
value: string;
|
|
587
|
+
label: string;
|
|
588
|
+
[key: string]: unknown;
|
|
589
|
+
}
|
|
590
|
+
type ComboboxItemData = string | ComboboxItemObject;
|
|
591
|
+
type ComboboxValue<Multiple extends boolean> = Multiple extends true ? string[] : string;
|
|
592
|
+
interface ComboboxProps {
|
|
593
|
+
/** `Combobox.Input` or `Combobox.Chips`, plus `Combobox.Content`. */
|
|
594
|
+
children: ReactNode6;
|
|
595
|
+
/** The options. A string is its own value and label; an object carries `value`, `label`, and whatever your rows need. */
|
|
596
|
+
items: readonly ComboboxItemData[];
|
|
597
|
+
/** Any number of picks. Values become `string[]`; use `Combobox.Chips` for the field. Defaults to `false`. */
|
|
598
|
+
multiple?: boolean;
|
|
599
|
+
/** Selected value. `""` means none; an array when `multiple`. Controlled — pair it with `onValueChange`. */
|
|
600
|
+
value?: string | string[];
|
|
601
|
+
/** Selection on first render when uncontrolled. Defaults to none. */
|
|
602
|
+
defaultValue?: string | string[];
|
|
603
|
+
/** Called with the pick, `""` when cleared, or the array when `multiple`. */
|
|
604
|
+
onValueChange?: ((value: string) => void) | ((value: string[]) => void);
|
|
605
|
+
/** Match an item against the query. Defaults to a case-insensitive "contains" on the label. */
|
|
606
|
+
filter?: (item: ComboboxItemData, query: string) => boolean;
|
|
607
|
+
/** Adds a last row that creates the trimmed query whenever no label matches it exactly. Add the item to `items` and return it to select it. */
|
|
608
|
+
onCreate?: (query: string) => ComboboxItemData | void;
|
|
609
|
+
/** The create row's label. Defaults to ``(query) => `Create “${query}”` ``. */
|
|
610
|
+
createLabel?: (query: string) => ReactNode6;
|
|
611
|
+
/** Local addition: offer the create row with no callback — the component keeps the items it makes, so nothing outside has to hold the list. Defaults to `false`. */
|
|
612
|
+
creatable?: boolean;
|
|
613
|
+
/** Multiple only. Picked items leave the list, so it reads as what is left to add. Deselect from the chips. Defaults to `false`. */
|
|
614
|
+
hideSelected?: boolean;
|
|
615
|
+
/** Disables the field and the popup. Defaults to `false`. */
|
|
616
|
+
disabled?: boolean;
|
|
617
|
+
/** Form field name; a hidden input carries the value. */
|
|
618
|
+
name?: string;
|
|
619
|
+
/** Marks the hidden form input required. */
|
|
620
|
+
required?: boolean;
|
|
621
|
+
/** Pins field and popup to one step of the size ladder (default 36px, compact 28px — see the Sizes primitive). Omitted, both follow the surrounding SizeProvider. */
|
|
622
|
+
size?: SizeVariant;
|
|
623
|
+
}
|
|
624
|
+
type Element_12xgc5 = JSX_1kxb5["Element"];
|
|
625
|
+
/**
|
|
626
|
+
* Type to filter a list. 1 pick, or chips.
|
|
627
|
+
*
|
|
628
|
+
* Items are data on the root: strings, which are their own value and label,
|
|
629
|
+
* or `{ value, label, … }` objects. `Combobox.List` takes a function child and
|
|
630
|
+
* renders one `Combobox.Item` per match, so the filtering, the ARIA wiring
|
|
631
|
+
* (the input keeps focus while the arrows move a highlight through the rows),
|
|
632
|
+
* the positioning and the hidden form input stay with Base UI. On top of that
|
|
633
|
+
* sit the fluid-hover highlight, the merged selection background of
|
|
634
|
+
* `CheckboxGroup`, and a list that oozes out of the field and back through the
|
|
635
|
+
* shared morph (see Morph), goo by default. `multiple` turns the picks into a
|
|
636
|
+
* `string[]` and pairs with `Combobox.Chips`: one chip per pick, Backspace in
|
|
637
|
+
* an empty field drops the last one. Uncontrolled with `defaultValue`, or
|
|
638
|
+
* controlled with `value` plus `onValueChange`.
|
|
639
|
+
*
|
|
640
|
+
* Statics:
|
|
641
|
+
* - `Combobox.Input` — the single-pick field: icon, text input, clear ✕, chevron.
|
|
642
|
+
* - `Combobox.Chips` — the multiple field: one chip per pick ahead of the input.
|
|
643
|
+
* - `Combobox.Content` — the popup surface, holding `Combobox.Empty` and `Combobox.List`:
|
|
644
|
+
* `side`, `align`, `sideOffset` and the morph options `from`, `effect`, `hideSource`, `tier`.
|
|
645
|
+
* - `Combobox.List` — a row per match, from a `(item, index) => ReactNode` child.
|
|
646
|
+
* - `Combobox.Item` — one row: `value`, optional `icon` and `disabled`.
|
|
647
|
+
* - `Combobox.Empty` — what shows when nothing matches.
|
|
648
|
+
*
|
|
649
|
+
* @example {@include ./examples.mdx}
|
|
650
|
+
*/
|
|
651
|
+
declare function Combobox({ children, items, multiple, value, defaultValue, onValueChange, filter, onCreate, createLabel, creatable, hideSelected, disabled, name, required, size }: ComboboxProps): Element_12xgc5;
|
|
652
|
+
interface ComboboxFieldProps extends Omit<InputHTMLAttributes2<HTMLInputElement>, "size" | "value" | "defaultValue" | "onChange">, VariantProps3<typeof fieldVariants> {
|
|
653
|
+
/** Framed at rest, or invisible until hovered or focused. Defaults to `"bordered"`. */
|
|
654
|
+
variant?: "bordered" | "borderless" | null;
|
|
655
|
+
/** Leading icon inside the field. */
|
|
656
|
+
icon?: IconComponent;
|
|
657
|
+
/** Shown while nothing is typed or selected. Defaults to `"Search…"`. */
|
|
658
|
+
placeholder?: string;
|
|
659
|
+
/** Error message under the field; tints the ring and sets `aria-invalid`. */
|
|
660
|
+
error?: string;
|
|
661
|
+
/** Render a ✕ that clears the selection and query. Its slot is always
|
|
662
|
+
* reserved so the field never changes width. Defaults to `false`. */
|
|
663
|
+
clearable?: boolean;
|
|
664
|
+
/** Size override for the field alone. Prefer the `size` prop on <Combobox>
|
|
665
|
+
* (or a surrounding SizeProvider) so the popup matches. */
|
|
666
|
+
size?: SizeVariant;
|
|
667
|
+
}
|
|
668
|
+
type ComboboxInputProps = ComboboxFieldProps;
|
|
669
|
+
declare const ComboboxInput: ForwardRefExoticComponent_tcubfn3<ComboboxFieldProps & RefAttributes_miuf563<HTMLInputElement>>;
|
|
670
|
+
type ComboboxChipsProps = ComboboxFieldProps;
|
|
671
|
+
declare const ComboboxChips: ForwardRefExoticComponent_tcubfn3<ComboboxFieldProps & RefAttributes_miuf563<HTMLInputElement>>;
|
|
672
|
+
interface ComboboxContentProps {
|
|
673
|
+
/** Classes for the popup surface — merged after the radius and max-height. */
|
|
674
|
+
className?: string;
|
|
675
|
+
/** `Combobox.Empty` and `Combobox.List`. */
|
|
676
|
+
children: ReactNode6;
|
|
677
|
+
/** Side of the field the popup prefers. Defaults to `"bottom"`. */
|
|
678
|
+
side?: "top" | "bottom" | "left" | "right";
|
|
679
|
+
/** Alignment against the field. Defaults to `"start"`. */
|
|
680
|
+
align?: "start" | "center" | "end";
|
|
681
|
+
/** Gap to the field, in px. Ignored when the list opens in place over the field (`effect="morph"` with `hideSource`). Defaults to `6`. */
|
|
682
|
+
sideOffset?: number;
|
|
683
|
+
/** Where the list grows from (see Morph): the field, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'` (the field). */
|
|
684
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject3<HTMLElement | null>;
|
|
685
|
+
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
686
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
687
|
+
/** Hide the field while open, so it reads as turning into the list. Defaults to `false`. */
|
|
688
|
+
hideSource?: boolean;
|
|
689
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
|
|
690
|
+
tier?: "moderate" | "slow";
|
|
691
|
+
}
|
|
692
|
+
declare const ComboboxContent: ForwardRefExoticComponent_tcubfn3<ComboboxContentProps & RefAttributes_miuf563<HTMLDivElement>>;
|
|
693
|
+
interface ComboboxListProps {
|
|
694
|
+
/** Classes for the rows' container. */
|
|
695
|
+
className?: string;
|
|
696
|
+
/** Render one row per matching item: `(item, index) => <Combobox.Item …/>`. Rows get their index from the list. */
|
|
697
|
+
children: (item: ComboboxItemData, index: number) => ReactNode6;
|
|
698
|
+
}
|
|
699
|
+
declare const ComboboxList: ForwardRefExoticComponent_tcubfn3<ComboboxListProps & RefAttributes_miuf563<HTMLDivElement>>;
|
|
700
|
+
interface ComboboxItemProps extends HTMLAttributes5<HTMLDivElement> {
|
|
701
|
+
/** Leading icon in the row. */
|
|
702
|
+
icon?: IconComponent;
|
|
703
|
+
/** The item's value — a string item itself, or an object item's `value`. */
|
|
704
|
+
value: string;
|
|
705
|
+
/** Disables the row. Defaults to `false`. */
|
|
706
|
+
disabled?: boolean;
|
|
707
|
+
/** The row label. */
|
|
708
|
+
children?: ReactNode6;
|
|
709
|
+
}
|
|
710
|
+
declare const ComboboxItem: ForwardRefExoticComponent_tcubfn3<ComboboxItemProps & RefAttributes_miuf563<HTMLDivElement>>;
|
|
711
|
+
interface ComboboxEmptyProps extends HTMLAttributes5<HTMLDivElement> {
|
|
712
|
+
/** Shown instead of the children when `hideSelected` has emptied the
|
|
713
|
+
* list with nothing typed: every item is a chip already. */
|
|
714
|
+
allSelected?: ReactNode6;
|
|
715
|
+
/** Shown when nothing matches the query. */
|
|
716
|
+
children?: ReactNode6;
|
|
717
|
+
}
|
|
718
|
+
declare const ComboboxEmpty: ForwardRefExoticComponent_tcubfn3<ComboboxEmptyProps & RefAttributes_miuf563<HTMLDivElement>>;
|
|
719
|
+
import { Locale } from "date-fns";
|
|
720
|
+
import { ReactNode as ReactNode7 } from "react";
|
|
721
|
+
import { DayPickerProps } from "react-day-picker";
|
|
722
|
+
import { JSX as JSX_1kxb6 } from "react";
|
|
723
|
+
type Element_12xgc6 = JSX_1kxb6["Element"];
|
|
724
|
+
/**
|
|
725
|
+
* A calendar that scrolls through the months instead of paging, with month
|
|
726
|
+
* and year columns to jump by.
|
|
727
|
+
*
|
|
728
|
+
* Months run on in one list, each under its name, with the weekday row pinned
|
|
729
|
+
* above them; weekends step back to the muted text and today carries a dot. The month column
|
|
730
|
+
* marks the month being read and the year column its year, so either works
|
|
731
|
+
* as a scrollbar you can click: a month or a year scrolls the calendar there.
|
|
732
|
+
* The picked day, month and year show a filled pill or a dot. The columns
|
|
733
|
+
* stand after the days by default; `columnsSide="start"` puts them before
|
|
734
|
+
* (and `extraColumnsSide` places any extra ones). When the calendar is too
|
|
735
|
+
* narrow for them, they turn into strips above it. The list renders a window of months and moves it as you scroll, so the
|
|
736
|
+
* range is as long as `startMonth` / `endMonth` allow (100 years back and 50
|
|
737
|
+
* ahead by default).
|
|
738
|
+
*
|
|
739
|
+
* It is react-day-picker's DayPicker underneath: `mode` (`'single'`,
|
|
740
|
+
* `'range'`), `selected` / `onSelect`, `disabled` and `hidden` matchers,
|
|
741
|
+
* `modifiers`, `weekStartsOn`, `dir` and the other DayPicker props pass
|
|
742
|
+
* through. Its navigation props don't apply: the calendar scrolls.
|
|
743
|
+
* DatePicker and DateRangePicker put it in a field.
|
|
744
|
+
*
|
|
745
|
+
* @example {@include ./examples.mdx}
|
|
746
|
+
*/
|
|
747
|
+
declare function Calendar({ locale, size, columnsSide, extraColumns, extraColumnsSide, className,...props }: DayPickerProps & {
|
|
748
|
+
/** The locale: a react-day-picker / date-fns locale (`import { de } from 'react-day-picker/locale'`). Names months and weekdays, picks the first day of the week. Defaults to `enUS`. */
|
|
749
|
+
locale?: Locale;
|
|
750
|
+
/** Pins the calendar to one step of the size ladder (36px days, compact 28px). Defaults to the surrounding SizeProvider. */
|
|
751
|
+
size?: SizeVariant;
|
|
752
|
+
/** Which side of the days the month and year columns stand on; the month column keeps next to the days. Defaults to `'end'`. */
|
|
753
|
+
columnsSide?: "start" | "end";
|
|
754
|
+
/** More columns, given the layout's orientation — the date picker's hours and minutes. */
|
|
755
|
+
extraColumns?: (orientation: "vertical" | "horizontal") => ReactNode7;
|
|
756
|
+
/** Which side of the days the extra columns stand on, outside the month and year columns when they share it. Defaults to `'end'`. */
|
|
757
|
+
extraColumnsSide?: "start" | "end";
|
|
758
|
+
/** Classes for the calendar's box. */
|
|
759
|
+
className?: string;
|
|
760
|
+
}): Element_12xgc6;
|
|
761
|
+
type CalendarProps = Parameters<typeof Calendar>[0];
|
|
762
|
+
import { Locale as Locale3 } from "date-fns";
|
|
763
|
+
import { RefObject as RefObject4 } from "react";
|
|
764
|
+
import { Matcher } from "react-day-picker";
|
|
765
|
+
type HourCycle = "h11" | "h12" | "h23" | "h24";
|
|
766
|
+
import { JSX as JSX_1kxb7 } from "react";
|
|
767
|
+
interface DatePickerProps {
|
|
768
|
+
/** The picked date (and time, with `withTime`); `null` when empty. */
|
|
769
|
+
value?: Date | null;
|
|
770
|
+
/** Initial date, for an uncontrolled picker. Defaults to `null`. */
|
|
771
|
+
defaultValue?: Date | null;
|
|
772
|
+
/** Called with the new date, or `null` when the field is cleared. */
|
|
773
|
+
onValueChange?: (value: Date | null) => void;
|
|
774
|
+
/** Adds hour and minute columns, and the time to the field. Defaults to `false`. */
|
|
775
|
+
withTime?: boolean;
|
|
776
|
+
/** The clock for the time: on `'h12'` / `'h11'` the hours read with AM/PM. Defaults to the locale's. */
|
|
777
|
+
hourCycle?: HourCycle;
|
|
778
|
+
/** Steps between the minute column's options. Defaults to `1`. */
|
|
779
|
+
minuteStep?: number;
|
|
780
|
+
/** A react-day-picker / date-fns locale (`import { de } from 'react-day-picker/locale'`): names, formats, the week's first day and what typing reads. Defaults to `enUS`. */
|
|
781
|
+
locale?: Locale3;
|
|
782
|
+
/** Shown while empty. */
|
|
783
|
+
placeholder?: string;
|
|
784
|
+
/** `true` disables the field; any other react-day-picker matcher (a date, `{ before }`, `{ dayOfWeek }`, a function…) disables the days it matches. */
|
|
785
|
+
disabled?: Matcher | Matcher[];
|
|
786
|
+
/** The first month the calendar reaches. Defaults to 100 years back. */
|
|
787
|
+
startMonth?: Date;
|
|
788
|
+
/** The last month the calendar reaches. Defaults to 50 years ahead. */
|
|
789
|
+
endMonth?: Date;
|
|
790
|
+
/** Marks the field invalid. Defaults to `false`. */
|
|
791
|
+
invalid?: boolean;
|
|
792
|
+
/** Pins the field and its panel to one step of the size ladder. Defaults to the surrounding SizeProvider. */
|
|
793
|
+
size?: SizeVariant;
|
|
794
|
+
/** Controlled open state. */
|
|
795
|
+
open?: boolean;
|
|
796
|
+
/** Initial open state, for an uncontrolled panel. Defaults to `false`. */
|
|
797
|
+
defaultOpen?: boolean;
|
|
798
|
+
/** Called when the panel opens or closes. */
|
|
799
|
+
onOpenChange?: (open: boolean) => void;
|
|
800
|
+
/** Text direction of the panel; `'rtl'` mirrors it. */
|
|
801
|
+
dir?: "ltr" | "rtl";
|
|
802
|
+
/** Which side of the days the month and year columns stand on. Defaults to `'end'`. */
|
|
803
|
+
columnsSide?: "start" | "end";
|
|
804
|
+
/** Which side of the days the hour and minute columns stand on, outside the month and year columns when they share it. Defaults to `'end'`. */
|
|
805
|
+
timeColumnsSide?: "start" | "end";
|
|
806
|
+
/** Id of the field, for a `Label`'s `htmlFor`. */
|
|
807
|
+
id?: string;
|
|
808
|
+
/** Where the panel grows from (see Morph): the field, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'` (the field). */
|
|
809
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject4<HTMLElement | null>;
|
|
810
|
+
/** How the panel grows (see Morph), as Combobox's list does: with the liquid goo neck, a plain morph, a slide or a fade. `'morph'` with `hideSource` opens it in place over the field. Defaults to `'goo'`. */
|
|
811
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
812
|
+
/** Hide the field while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
813
|
+
hideSource?: boolean;
|
|
814
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
|
|
815
|
+
tier?: "moderate" | "slow";
|
|
816
|
+
/** Classes for the field. */
|
|
817
|
+
className?: string;
|
|
818
|
+
}
|
|
819
|
+
type Element_12xgc7 = JSX_1kxb7["Element"];
|
|
820
|
+
/**
|
|
821
|
+
* A date field that opens a scrolling calendar, with an optional time.
|
|
822
|
+
*
|
|
823
|
+
* Pressing the field opens its panel the way Combobox opens its list (goo out
|
|
824
|
+
* of the field; `effect="morph"` with `hideSource` turns the field into it in
|
|
825
|
+
* place): the date as text, selected and ready to type over, above a Calendar
|
|
826
|
+
* whose months scroll past with month and year columns beside them. Typing
|
|
827
|
+
* reads the date in the locale's own formats ("9.10.2026", "9 Oct 2026",
|
|
828
|
+
* "October 9, 2026") and scrolls the calendar to it; picking a day commits it
|
|
829
|
+
* and closes the panel. `withTime` adds the time beside the date and hour and
|
|
830
|
+
* minute columns (the hours read with AM/PM on a 12-hour clock), and keeps the
|
|
831
|
+
* panel open while you set both. `columnsSide` and `timeColumnsSide` stand
|
|
832
|
+
* either set of columns before or after the days. On a phone the panel is a
|
|
833
|
+
* bottom sheet, its columns turned into strips above the days.
|
|
834
|
+
*
|
|
835
|
+
* Localized through `locale`, a react-day-picker locale: month and weekday
|
|
836
|
+
* names, the formats shown and read, the week's first day and the clock all
|
|
837
|
+
* follow it, and `dir="rtl"` mirrors the panel.
|
|
838
|
+
*
|
|
839
|
+
* @example {@include ./examples.mdx}
|
|
840
|
+
*/
|
|
841
|
+
declare function DatePicker({ value: valueProp, defaultValue, onValueChange, withTime, hourCycle, minuteStep, locale, placeholder, disabled, startMonth, endMonth, invalid, size, open: openProp, defaultOpen, onOpenChange, dir, columnsSide, timeColumnsSide, id, from, effect, hideSource, tier, className }: DatePickerProps): Element_12xgc7;
|
|
842
|
+
import { Locale as Locale4 } from "date-fns";
|
|
843
|
+
import { RefObject as RefObject5 } from "react";
|
|
844
|
+
import { DateRange, Matcher as Matcher2 } from "react-day-picker";
|
|
845
|
+
import { JSX as JSX_1kxb8 } from "react";
|
|
846
|
+
interface DateRangePickerProps {
|
|
847
|
+
/** The picked range, react-day-picker's `{ from, to }`; `null` when empty. */
|
|
848
|
+
value?: DateRange | null;
|
|
849
|
+
/** Initial range, for an uncontrolled picker. Defaults to `null`. */
|
|
850
|
+
defaultValue?: DateRange | null;
|
|
851
|
+
/** Called with the new range: `{ from }` alone after the first click, `null` when cleared. */
|
|
852
|
+
onValueChange?: (value: DateRange | null) => void;
|
|
853
|
+
/** A react-day-picker / date-fns locale (`import { de } from 'react-day-picker/locale'`). Defaults to `enUS`. */
|
|
854
|
+
locale?: Locale4;
|
|
855
|
+
/** Shown while empty. */
|
|
856
|
+
placeholder?: string;
|
|
857
|
+
/** `true` disables the field; any other react-day-picker matcher disables the days it matches. */
|
|
858
|
+
disabled?: Matcher2 | Matcher2[];
|
|
859
|
+
/** The first month the calendar reaches. Defaults to 100 years back. */
|
|
860
|
+
startMonth?: Date;
|
|
861
|
+
/** The last month the calendar reaches. Defaults to 50 years ahead. */
|
|
862
|
+
endMonth?: Date;
|
|
863
|
+
/** Marks the field invalid. Defaults to `false`. */
|
|
864
|
+
invalid?: boolean;
|
|
865
|
+
/** Pins the field and its panel to one step of the size ladder. Defaults to the surrounding SizeProvider. */
|
|
866
|
+
size?: SizeVariant;
|
|
867
|
+
/** Controlled open state. */
|
|
868
|
+
open?: boolean;
|
|
869
|
+
/** Initial open state, for an uncontrolled panel. Defaults to `false`. */
|
|
870
|
+
defaultOpen?: boolean;
|
|
871
|
+
/** Called when the panel opens or closes. */
|
|
872
|
+
onOpenChange?: (open: boolean) => void;
|
|
873
|
+
/** Text direction of the panel; `'rtl'` mirrors it. */
|
|
874
|
+
dir?: "ltr" | "rtl";
|
|
875
|
+
/** Which side of the days the month and year columns stand on. Defaults to `'end'`. */
|
|
876
|
+
columnsSide?: "start" | "end";
|
|
877
|
+
/** Id of the field, for a `Label`'s `htmlFor`. */
|
|
878
|
+
id?: string;
|
|
879
|
+
/** Where the panel grows from (see Morph): the field, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'` (the field). */
|
|
880
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject5<HTMLElement | null>;
|
|
881
|
+
/** How the panel grows (see Morph), as Combobox's list does: with the liquid goo neck, a plain morph, a slide or a fade. `'morph'` with `hideSource` opens it in place over the field. Defaults to `'goo'`. */
|
|
882
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
883
|
+
/** Hide the field while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
884
|
+
hideSource?: boolean;
|
|
885
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
|
|
886
|
+
tier?: "moderate" | "slow";
|
|
887
|
+
/** Classes for the field. */
|
|
888
|
+
className?: string;
|
|
889
|
+
}
|
|
890
|
+
type Element_12xgc8 = JSX_1kxb8["Element"];
|
|
891
|
+
/**
|
|
892
|
+
* A field for a span of days, picked with two clicks on a scrolling calendar.
|
|
893
|
+
*
|
|
894
|
+
* The first click starts the range and the days under the pointer preview it;
|
|
895
|
+
* the second ends it (either way round) and closes the panel. The header
|
|
896
|
+
* holds both ends as text, each read in the locale's formats as you type, and
|
|
897
|
+
* the field shows the range the way the locale writes one ("9 – 15 Oct
|
|
898
|
+
* 2026"). Everything else — the month and year columns, the bottom sheet on a
|
|
899
|
+
* phone, the locale — works as in DatePicker.
|
|
900
|
+
*
|
|
901
|
+
* @example {@include ./examples.mdx}
|
|
902
|
+
*/
|
|
903
|
+
declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, locale, placeholder, disabled, startMonth, endMonth, invalid, size, open: openProp, defaultOpen, onOpenChange, dir, columnsSide, id, from: growFrom, effect, hideSource, tier, className }: DateRangePickerProps): Element_12xgc8;
|
|
904
|
+
import { Duration, Locale as Locale5 } from "date-fns";
|
|
905
|
+
import { RefObject as RefObject6 } from "react";
|
|
906
|
+
import { JSX as JSX_1kxb9 } from "react";
|
|
907
|
+
interface DurationPickerProps {
|
|
908
|
+
/** The picked duration, a date-fns `Duration` (`{ hours, minutes }`); `null` when empty. */
|
|
909
|
+
value?: Duration | null;
|
|
910
|
+
/** Initial duration, for an uncontrolled picker. Defaults to `null`. */
|
|
911
|
+
defaultValue?: Duration | null;
|
|
912
|
+
/** Called with the new duration, or `null` when the field is cleared. */
|
|
913
|
+
onValueChange?: (value: Duration | null) => void;
|
|
914
|
+
/** The longest duration's hours: the hour column runs from 0 to it. Defaults to `99`. */
|
|
915
|
+
maxHours?: number;
|
|
916
|
+
/** Steps between the minute column's options. Defaults to `1`. */
|
|
917
|
+
minuteStep?: number;
|
|
918
|
+
/** A react-day-picker / date-fns locale: the field spells the duration out in it ("1 Stunde 30 Minuten"). Defaults to `enUS`. */
|
|
919
|
+
locale?: Locale5;
|
|
920
|
+
/** Shown while empty. */
|
|
921
|
+
placeholder?: string;
|
|
922
|
+
/** Disables the field. Defaults to `false`. */
|
|
923
|
+
disabled?: boolean;
|
|
924
|
+
/** Marks the field invalid. Defaults to `false`. */
|
|
925
|
+
invalid?: boolean;
|
|
926
|
+
/** Pins the field and its panel to one step of the size ladder. Defaults to the surrounding SizeProvider. */
|
|
927
|
+
size?: SizeVariant;
|
|
928
|
+
/** Controlled open state. */
|
|
929
|
+
open?: boolean;
|
|
930
|
+
/** Initial open state, for an uncontrolled panel. Defaults to `false`. */
|
|
931
|
+
defaultOpen?: boolean;
|
|
932
|
+
/** Called when the panel opens or closes. */
|
|
933
|
+
onOpenChange?: (open: boolean) => void;
|
|
934
|
+
/** Id of the field, for a `Label`'s `htmlFor`. */
|
|
935
|
+
id?: string;
|
|
936
|
+
/** Where the panel grows from (see Morph): the field, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'` (the field). */
|
|
937
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject6<HTMLElement | null>;
|
|
938
|
+
/** How the panel grows (see Morph), as Combobox's list does: with the liquid goo neck, a plain morph, a slide or a fade. `'morph'` with `hideSource` opens it in place over the field. Defaults to `'goo'`. */
|
|
939
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
940
|
+
/** Hide the field while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
941
|
+
hideSource?: boolean;
|
|
942
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
|
|
943
|
+
tier?: "moderate" | "slow";
|
|
944
|
+
/** Classes for the field. */
|
|
945
|
+
className?: string;
|
|
946
|
+
}
|
|
947
|
+
type Element_12xgc9 = JSX_1kxb9["Element"];
|
|
948
|
+
/**
|
|
949
|
+
* A field for a length of time, in hours and minutes.
|
|
950
|
+
*
|
|
951
|
+
* The field spells the duration out in the locale ("1 hour 30 minutes"); its
|
|
952
|
+
* panel has it as `H:mm` to type over, above an hour column (0 to `maxHours`)
|
|
953
|
+
* and a minute column stepping by `minuteStep`. The value is a date-fns
|
|
954
|
+
* `Duration`, `{ hours, minutes }`, ready for `formatDuration` or date math.
|
|
955
|
+
*
|
|
956
|
+
* @example {@include ./examples.mdx}
|
|
957
|
+
*/
|
|
958
|
+
declare function DurationPicker({ value: valueProp, defaultValue, onValueChange, maxHours, minuteStep, locale, placeholder, disabled, invalid, size, open: openProp, defaultOpen, onOpenChange, id, from, effect, hideSource, tier, className }: DurationPickerProps): Element_12xgc9;
|
|
959
|
+
import { Locale as Locale6 } from "date-fns";
|
|
960
|
+
import { RefObject as RefObject7 } from "react";
|
|
961
|
+
import { JSX as JSX_1kxb10 } from "react";
|
|
962
|
+
interface MonthPickerProps {
|
|
963
|
+
/** The picked month as its first day; `null` when empty. */
|
|
964
|
+
value?: Date | null;
|
|
965
|
+
/** Initial month, for an uncontrolled picker. Defaults to `null`. */
|
|
966
|
+
defaultValue?: Date | null;
|
|
967
|
+
/** Called with the new month's first day, or `null` when the field is cleared. */
|
|
968
|
+
onValueChange?: (value: Date | null) => void;
|
|
969
|
+
/** A react-day-picker / date-fns locale: month names and what typing reads. Defaults to `enUS`. */
|
|
970
|
+
locale?: Locale6;
|
|
971
|
+
/** Shown while empty. */
|
|
972
|
+
placeholder?: string;
|
|
973
|
+
/** The first month that can be picked. Defaults to 100 years back. */
|
|
974
|
+
startMonth?: Date;
|
|
975
|
+
/** The last month that can be picked. Defaults to 50 years ahead. */
|
|
976
|
+
endMonth?: Date;
|
|
977
|
+
/** Disables the field. Defaults to `false`. */
|
|
978
|
+
disabled?: boolean;
|
|
979
|
+
/** Marks the field invalid. Defaults to `false`. */
|
|
980
|
+
invalid?: boolean;
|
|
981
|
+
/** Pins the field and its panel to one step of the size ladder. Defaults to the surrounding SizeProvider. */
|
|
982
|
+
size?: SizeVariant;
|
|
983
|
+
/** Controlled open state. */
|
|
984
|
+
open?: boolean;
|
|
985
|
+
/** Initial open state, for an uncontrolled panel. Defaults to `false`. */
|
|
986
|
+
defaultOpen?: boolean;
|
|
987
|
+
/** Called when the panel opens or closes. */
|
|
988
|
+
onOpenChange?: (open: boolean) => void;
|
|
989
|
+
/** Id of the field, for a `Label`'s `htmlFor`. */
|
|
990
|
+
id?: string;
|
|
991
|
+
/** Where the panel grows from (see Morph): the field, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'` (the field). */
|
|
992
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject7<HTMLElement | null>;
|
|
993
|
+
/** How the panel grows (see Morph), as Combobox's list does: with the liquid goo neck, a plain morph, a slide or a fade. `'morph'` with `hideSource` opens it in place over the field. Defaults to `'goo'`. */
|
|
994
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
995
|
+
/** Hide the field while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
996
|
+
hideSource?: boolean;
|
|
997
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
|
|
998
|
+
tier?: "moderate" | "slow";
|
|
999
|
+
/** Classes for the field. */
|
|
1000
|
+
className?: string;
|
|
1001
|
+
}
|
|
1002
|
+
type Element_12xgc10 = JSX_1kxb10["Element"];
|
|
1003
|
+
/**
|
|
1004
|
+
* A field for a month of a year: a billing period, a card's expiry.
|
|
1005
|
+
*
|
|
1006
|
+
* The panel has the month as text to type over ("October 2026", "10/2026"),
|
|
1007
|
+
* above a month column and a year column; the picked month and year carry a
|
|
1008
|
+
* dot. The value is the month's first day, the way react-day-picker names a
|
|
1009
|
+
* month.
|
|
1010
|
+
*
|
|
1011
|
+
* @example {@include ./examples.mdx}
|
|
1012
|
+
*/
|
|
1013
|
+
declare function MonthPicker({ value: valueProp, defaultValue, onValueChange, locale, placeholder, startMonth, endMonth, disabled, invalid, size, open: openProp, defaultOpen, onOpenChange, id, from, effect, hideSource, tier, className }: MonthPickerProps): Element_12xgc10;
|
|
1014
|
+
import { Locale as Locale7 } from "date-fns";
|
|
1015
|
+
import { RefObject as RefObject8 } from "react";
|
|
1016
|
+
import { JSX as JSX_1kxb11 } from "react";
|
|
1017
|
+
interface TimePickerProps {
|
|
1018
|
+
/** The picked time as `"HH:mm"` on a 24-hour clock (an `<input type="time">`'s value); `null` when empty. */
|
|
1019
|
+
value?: string | null;
|
|
1020
|
+
/** Initial time, for an uncontrolled picker. Defaults to `null`. */
|
|
1021
|
+
defaultValue?: string | null;
|
|
1022
|
+
/** Called with the new `"HH:mm"`, or `null` when the field is cleared. */
|
|
1023
|
+
onValueChange?: (value: string | null) => void;
|
|
1024
|
+
/** The clock shown: on `'h12'` / `'h11'` the hours read with AM/PM. Defaults to the locale's. */
|
|
1025
|
+
hourCycle?: HourCycle;
|
|
1026
|
+
/** Steps between the minute column's options. Defaults to `1`. */
|
|
1027
|
+
minuteStep?: number;
|
|
1028
|
+
/** A react-day-picker / date-fns locale: the time's format and the AM/PM names. Defaults to `enUS`. */
|
|
1029
|
+
locale?: Locale7;
|
|
1030
|
+
/** Shown while empty. */
|
|
1031
|
+
placeholder?: string;
|
|
1032
|
+
/** Disables the field. Defaults to `false`. */
|
|
1033
|
+
disabled?: boolean;
|
|
1034
|
+
/** Marks the field invalid. Defaults to `false`. */
|
|
1035
|
+
invalid?: boolean;
|
|
1036
|
+
/** Pins the field and its panel to one step of the size ladder. Defaults to the surrounding SizeProvider. */
|
|
1037
|
+
size?: SizeVariant;
|
|
1038
|
+
/** Controlled open state. */
|
|
1039
|
+
open?: boolean;
|
|
1040
|
+
/** Initial open state, for an uncontrolled panel. Defaults to `false`. */
|
|
1041
|
+
defaultOpen?: boolean;
|
|
1042
|
+
/** Called when the panel opens or closes. */
|
|
1043
|
+
onOpenChange?: (open: boolean) => void;
|
|
1044
|
+
/** Id of the field, for a `Label`'s `htmlFor`. */
|
|
1045
|
+
id?: string;
|
|
1046
|
+
/** Where the panel grows from (see Morph): the field, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'` (the field). */
|
|
1047
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject8<HTMLElement | null>;
|
|
1048
|
+
/** How the panel grows (see Morph), as Combobox's list does: with the liquid goo neck, a plain morph, a slide or a fade. `'morph'` with `hideSource` opens it in place over the field. Defaults to `'goo'`. */
|
|
1049
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
1050
|
+
/** Hide the field while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
1051
|
+
hideSource?: boolean;
|
|
1052
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
|
|
1053
|
+
tier?: "moderate" | "slow";
|
|
1054
|
+
/** Classes for the field. */
|
|
1055
|
+
className?: string;
|
|
1056
|
+
}
|
|
1057
|
+
type Element_12xgc11 = JSX_1kxb11["Element"];
|
|
1058
|
+
/**
|
|
1059
|
+
* A time-of-day field with scrolling hour and minute columns.
|
|
1060
|
+
*
|
|
1061
|
+
* The panel opens with the time as text, selected and ready to type over
|
|
1062
|
+
* ("15:33", "3:33 PM"), above an hour column and a minute column; on a
|
|
1063
|
+
* 12-hour clock the hours read with AM/PM. Each column keeps its pick in the middle and
|
|
1064
|
+
* marks it with a dot. The value is `"HH:mm"` on a 24-hour clock whatever the
|
|
1065
|
+
* locale shows, the same as a native time input's.
|
|
1066
|
+
*
|
|
1067
|
+
* @example {@include ./examples.mdx}
|
|
1068
|
+
*/
|
|
1069
|
+
declare function TimePicker({ value: valueProp, defaultValue, onValueChange, hourCycle, minuteStep, locale, placeholder, disabled, invalid, size, open: openProp, defaultOpen, onOpenChange, id, from, effect, hideSource, tier, className }: TimePickerProps): Element_12xgc11;
|
|
1070
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent4, HTMLAttributes as HTMLAttributes6, InputHTMLAttributes as InputHTMLAttributes3, LabelHTMLAttributes, ReactNode as ReactNode8, RefAttributes as RefAttributes4 } from "react";
|
|
1071
|
+
interface InputProps extends Omit<InputHTMLAttributes3<HTMLInputElement>, "onChange" | "value" | "defaultValue" | "size"> {
|
|
1072
|
+
/** Placeholder text. */
|
|
1073
|
+
placeholder?: string;
|
|
1074
|
+
/** Leading icon inside the input. */
|
|
1075
|
+
icon?: IconComponent;
|
|
1076
|
+
/** Controlled input value. */
|
|
1077
|
+
value?: string;
|
|
1078
|
+
/** Initial value when uncontrolled. Defaults to `''`. */
|
|
1079
|
+
defaultValue?: string;
|
|
1080
|
+
/** Called when the input value changes. */
|
|
1081
|
+
onChange?: (value: string) => void;
|
|
1082
|
+
/** Marks the value invalid: the field turns destructive and sets `aria-invalid`. Defaults to `false`. */
|
|
1083
|
+
invalid?: boolean;
|
|
1084
|
+
/** Disables the input. Defaults to `false`. */
|
|
1085
|
+
disabled?: boolean;
|
|
1086
|
+
/** Pins the input to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
|
|
1087
|
+
size?: SizeVariant;
|
|
1088
|
+
/** Classes for the ringed box around the input. */
|
|
1089
|
+
className?: string;
|
|
1090
|
+
}
|
|
1091
|
+
/**
|
|
1092
|
+
* Text input with a fluid hover ring.
|
|
1093
|
+
*
|
|
1094
|
+
* At rest the field is bare text on the page. Hover lifts it onto a muted
|
|
1095
|
+
* ground with a hairline ring, focus onto the card ground, and its leading
|
|
1096
|
+
* icon thickens. `invalid` turns it destructive. It is uncontrolled with
|
|
1097
|
+
* `defaultValue`, or controlled with `value` + `onChange`, and fills the width
|
|
1098
|
+
* of its container. Pair it with a `Label` through `htmlFor` / `id`.
|
|
1099
|
+
*
|
|
1100
|
+
* Also exported from this item:
|
|
1101
|
+
* - `Label` — the field label, weight-stable and inset to line up with the
|
|
1102
|
+
* input's text: `htmlFor`, `invalid`, `size`.
|
|
1103
|
+
* - `InputGroup` — stacks labelled fields and tracks the pointer across them,
|
|
1104
|
+
* so the hover glides from field to field: `size` pins every field to one
|
|
1105
|
+
* step of the ladder.
|
|
1106
|
+
* - `InputGroup.Field` — one labelled Input in a group, wired as a Base UI
|
|
1107
|
+
* `Field` (label, control and error message linked for assistive tech):
|
|
1108
|
+
* `index` (its position, for the fluid hover), `label`, `labelHidden`,
|
|
1109
|
+
* `error` (a message below the input; marks it invalid), plus Input's props.
|
|
1110
|
+
*
|
|
1111
|
+
* @example {@include ./examples.mdx}
|
|
1112
|
+
*/
|
|
1113
|
+
declare const Input2: ForwardRefExoticComponent4<InputProps & RefAttributes4<HTMLInputElement>>;
|
|
1114
|
+
interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
|
|
1115
|
+
/** Label text. */
|
|
1116
|
+
children: ReactNode8;
|
|
1117
|
+
/** Turns the label destructive, matching an invalid Input. Defaults to `false`. */
|
|
1118
|
+
invalid?: boolean;
|
|
1119
|
+
/** Pins the label to one step of the size ladder. Defaults to the surrounding SizeProvider. */
|
|
1120
|
+
size?: SizeVariant;
|
|
1121
|
+
}
|
|
1122
|
+
declare const Label2: ForwardRefExoticComponent4<LabelProps & RefAttributes4<HTMLLabelElement>>;
|
|
1123
|
+
interface InputGroupProps extends HTMLAttributes6<HTMLDivElement> {
|
|
1124
|
+
/** One or more InputGroup.Field children. */
|
|
1125
|
+
children: ReactNode8;
|
|
1126
|
+
/** Pins the group's fields to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
|
|
1127
|
+
size?: SizeVariant;
|
|
1128
|
+
}
|
|
1129
|
+
type InputGroupComponent = ForwardRefExoticComponent4<InputGroupProps & RefAttributes4<HTMLDivElement>> & {
|
|
1130
|
+
Field: typeof InputField;
|
|
1131
|
+
};
|
|
1132
|
+
declare const InputGroup: InputGroupComponent;
|
|
1133
|
+
interface InputFieldProps extends Omit<InputProps, "invalid" | "size" | "className"> {
|
|
1134
|
+
/** Label text above the input. */
|
|
1135
|
+
label: string;
|
|
1136
|
+
/** Keep the label for assistive tech but don't render it — for inline fields (a toolbar search) where the placeholder carries the meaning. Defaults to `false`. */
|
|
1137
|
+
labelHidden?: boolean;
|
|
1138
|
+
/** Position index within the group (required for fluid hover). */
|
|
1139
|
+
index: number;
|
|
1140
|
+
/** Error message shown below the input. */
|
|
1141
|
+
error?: string;
|
|
1142
|
+
className?: string;
|
|
1143
|
+
}
|
|
1144
|
+
declare const InputField: ForwardRefExoticComponent4<InputFieldProps & RefAttributes4<HTMLDivElement>>;
|
|
1145
|
+
import { HTMLAttributes as HTMLAttributes7 } from "react";
|
|
1146
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn4 } from "react";
|
|
1147
|
+
import { RefAttributes as RefAttributes_miuf564 } from "react";
|
|
1148
|
+
type InputCopyVariant = "icon" | "button";
|
|
1149
|
+
type InputCopyAlign = "right" | "left";
|
|
1150
|
+
interface InputCopyProps extends Omit<HTMLAttributes7<HTMLDivElement>, "children"> {
|
|
1151
|
+
/** The text value to display and copy to clipboard. */
|
|
1152
|
+
value: string;
|
|
1153
|
+
/** Optional label displayed above the input. */
|
|
1154
|
+
label?: string;
|
|
1155
|
+
/** Callback fired after the value is successfully copied. */
|
|
1156
|
+
onCopy?: () => void;
|
|
1157
|
+
/** Disables the input and copy button. Defaults to `false`. */
|
|
1158
|
+
disabled?: boolean;
|
|
1159
|
+
/** Icon-only with tooltip, or button with visible label. Defaults to `"icon"`. */
|
|
1160
|
+
variant?: InputCopyVariant;
|
|
1161
|
+
/** Position of the copy action relative to the value. Defaults to `"right"`. */
|
|
1162
|
+
align?: InputCopyAlign;
|
|
1163
|
+
/** Pins the field to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, it follows the surrounding SizeProvider. */
|
|
1164
|
+
size?: SizeVariant;
|
|
1165
|
+
/** Extra classes for the wrapper around the label and the field. */
|
|
1166
|
+
className?: string;
|
|
1167
|
+
}
|
|
1168
|
+
/**
|
|
1169
|
+
* Read-only input with a copy-to-clipboard button and animated check
|
|
1170
|
+
* feedback.
|
|
1171
|
+
*
|
|
1172
|
+
* The whole row is the button: click anywhere on it and the value goes to
|
|
1173
|
+
* the clipboard, the copy glyph's two sheets melt into a tinted disc (the
|
|
1174
|
+
* goo of Morph) behind a check that draws itself, and the tooltip flips to
|
|
1175
|
+
* "Copied" for 2 seconds; then the disc splits back into the glyph. The value is monospaced and
|
|
1176
|
+
* highlights on hover so it reads as one selectable token rather than a
|
|
1177
|
+
* text field, and the async Clipboard API falls back to an off-screen
|
|
1178
|
+
* textarea + `execCommand` where it is unavailable (insecure context,
|
|
1179
|
+
* permissions policy) — a failure animates a ✕ and says so. `variant`
|
|
1180
|
+
* switches between the icon-only affordance (with a tooltip) and a labelled
|
|
1181
|
+
* Copy button, `align` moves that action to the leading edge, and the field
|
|
1182
|
+
* follows the surrounding SizeProvider unless `size` pins it.
|
|
1183
|
+
*
|
|
1184
|
+
* @example {@include ./examples.mdx}
|
|
1185
|
+
*/
|
|
1186
|
+
declare const InputCopy: ForwardRefExoticComponent_tcubfn4<InputCopyProps & RefAttributes_miuf564<HTMLDivElement>>;
|
|
1187
|
+
import { HTMLAttributes as HTMLAttributes8, ReactNode as ReactNode9, TextareaHTMLAttributes } from "react";
|
|
1188
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn5 } from "react";
|
|
1189
|
+
import { RefAttributes as RefAttributes_miuf565 } from "react";
|
|
1190
|
+
import { JSX as JSX_1kxb12 } from "react";
|
|
1191
|
+
interface FileThumbnailProps {
|
|
1192
|
+
file: File;
|
|
1193
|
+
/** Side length of the square thumbnail in pixels. */
|
|
1194
|
+
size: number;
|
|
1195
|
+
className?: string;
|
|
1196
|
+
}
|
|
1197
|
+
type Element_12xgc12 = JSX_1kxb12["Element"];
|
|
1198
|
+
declare function FileThumbnail({ file, size, className }: FileThumbnailProps): Element_12xgc12;
|
|
1199
|
+
type InputMessageStatus = "idle" | "streaming";
|
|
1200
|
+
interface InputMessageSlotContext {
|
|
1201
|
+
/** Opens the native file picker via the hidden `<input type="file">`.
|
|
1202
|
+
* Pass `acceptOverride` (e.g. `"image/*"`) to scope the picker to a
|
|
1203
|
+
* subset of the component's accept types just for this invocation. */
|
|
1204
|
+
openFilePicker: (acceptOverride?: string) => void;
|
|
1205
|
+
/** Currently-attached files. */
|
|
1206
|
+
files: File[];
|
|
1207
|
+
}
|
|
1208
|
+
type InputMessageSlot = ReactNode9 | ((ctx: InputMessageSlotContext) => ReactNode9);
|
|
1209
|
+
/** A message held in the queue while the assistant is responding. Carries the
|
|
1210
|
+
* trimmed text plus a snapshot of the files attached when it was queued, so
|
|
1211
|
+
* double-click-to-edit can restore both. `id` is a stable key minted on enqueue. */
|
|
1212
|
+
interface QueuedMessage {
|
|
1213
|
+
id: string;
|
|
1214
|
+
text: string;
|
|
1215
|
+
files: File[];
|
|
1216
|
+
}
|
|
1217
|
+
interface InputMessageProps extends Omit<HTMLAttributes8<HTMLDivElement>, "onChange" | "defaultValue"> {
|
|
1218
|
+
/** Step on the size ladder (see Sizes). Wins over the surrounding SizeProvider and propagates to the composer's rows, buttons and queued messages. */
|
|
1219
|
+
size?: SizeVariant;
|
|
1220
|
+
/** Controlled textarea value. Pair with `onValueChange`; omit both for an uncontrolled composer. */
|
|
1221
|
+
value?: string;
|
|
1222
|
+
/** Initial textarea value for an uncontrolled composer. Defaults to `""`. */
|
|
1223
|
+
defaultValue?: string;
|
|
1224
|
+
/** Called with the new value on every textarea change. */
|
|
1225
|
+
onValueChange?: (value: string) => void;
|
|
1226
|
+
/** Fires on Enter (without Shift) or send-button click, and when a queued message auto-dispatches. Receives the trimmed value, the attached files, and — for auto-dispatched queue items — `meta.queuedId`. Skipped when the value is empty and no files are attached. */
|
|
1227
|
+
onSend?: (value: string, files: File[], meta?: {
|
|
1228
|
+
queuedId?: string;
|
|
1229
|
+
}) => void;
|
|
1230
|
+
/** Placeholder shown when the value is empty. While a file is dragged over the component (and attachments are enabled) it swaps to "Drop files here to add to chat". Defaults to `"Ask me anything…"`. */
|
|
1231
|
+
placeholder?: string;
|
|
1232
|
+
/** Content rendered in the bottom-left action area. May be a render-fn that receives `{ openFilePicker, files }` — `openFilePicker(acceptOverride?)` opens the native file picker. */
|
|
1233
|
+
leftSlot?: InputMessageSlot;
|
|
1234
|
+
/** Content rendered in the bottom-right action area, before the built-in send button. Same render-fn shape as `leftSlot`. */
|
|
1235
|
+
rightSlot?: InputMessageSlot;
|
|
1236
|
+
/** Disables the textarea, send button, and drag-and-drop. Defaults to `false`. */
|
|
1237
|
+
disabled?: boolean;
|
|
1238
|
+
/** Minimum visible rows before the textarea grows. Defaults to 1. */
|
|
1239
|
+
minRows?: number;
|
|
1240
|
+
/** Maximum visible rows before the textarea starts to scroll. Defaults to 8. */
|
|
1241
|
+
maxRows?: number;
|
|
1242
|
+
/** When true, clicking anywhere on the surrounding container (outside of buttons / links / inputs) focuses the textarea. Defaults to `true`. */
|
|
1243
|
+
clickToFocus?: boolean;
|
|
1244
|
+
/** Accessible label for the send button. Defaults to `"Send"`. */
|
|
1245
|
+
sendLabel?: string;
|
|
1246
|
+
/** Controlled list of attached files. Pair with `onFilesChange` to enable drag-and-drop and the file-picker slot helper. */
|
|
1247
|
+
files?: File[];
|
|
1248
|
+
/** Initial attachments for an uncontrolled composer. Providing it (even as `[]`) enables attachment behavior on its own. */
|
|
1249
|
+
defaultFiles?: File[];
|
|
1250
|
+
/** Called when files are added (drag-drop or picker) or removed via the preview tile's × button. Duplicate drops of the same file (same name + size + lastModified) are silently de-duplicated. */
|
|
1251
|
+
onFilesChange?: (files: File[]) => void;
|
|
1252
|
+
/** Accepted MIME types as a comma-separated string. Used by both the file picker and the drag-and-drop filter. Defaults to `"image/png,image/jpeg,application/pdf"`. */
|
|
1253
|
+
accept?: string;
|
|
1254
|
+
/** Maximum number of attached files. Extra files beyond this limit are dropped. */
|
|
1255
|
+
maxFiles?: number;
|
|
1256
|
+
/** Side length (in pixels) of each preview tile. Images use object-cover; PDFs render the first page via pdfjs; other types fall back to a centered icon. Defaults to 80. */
|
|
1257
|
+
filePreviewSize?: number;
|
|
1258
|
+
/** Extra props forwarded to the underlying textarea (value, onChange, onKeyDown, disabled and placeholder are controlled by the component). */
|
|
1259
|
+
textareaProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange" | "onKeyDown" | "disabled" | "placeholder">;
|
|
1260
|
+
/** Assistant response state. When `"streaming"`, the send button becomes a Stop control (empty draft) or a Queue action (non-empty draft). On the streaming→idle edge the next queued message auto-dispatches via `onSend`. Leave it and `defaultStatus` undefined for the send-immediately behavior. */
|
|
1261
|
+
status?: InputMessageStatus;
|
|
1262
|
+
/** Initial status for an uncontrolled composer — the component then owns the streaming flag, and Stop flips it to `"idle"` itself. */
|
|
1263
|
+
defaultStatus?: InputMessageStatus;
|
|
1264
|
+
/** Called whenever the status changes while it is uncontrolled (currently: the Stop control). */
|
|
1265
|
+
onStatusChange?: (status: InputMessageStatus) => void;
|
|
1266
|
+
/** Fires when the Stop control is pressed (streaming + empty draft). Halt the current response and set status to `"idle"` — that edge immediately dispatches the next queued message. */
|
|
1267
|
+
onStop?: () => void;
|
|
1268
|
+
/** Controlled queue of pending messages, rendered as reorderable rows above the textarea. Double-click (or Enter/F2) edits a row back into the composer; the × (or Delete) removes it; drag — or Alt+↑/↓ — reorders. Requires a status. */
|
|
1269
|
+
queue?: QueuedMessage[];
|
|
1270
|
+
/** Initial queue for an uncontrolled composer. Providing it (even as `[]`) enables the queue on its own, alongside `status` or `defaultStatus`. */
|
|
1271
|
+
defaultQueue?: QueuedMessage[];
|
|
1272
|
+
/** Called whenever the queue changes — enqueue, edit, delete, reorder, or auto-dispatch. Each QueuedMessage is `{ id, text, files }`. */
|
|
1273
|
+
onQueueChange?: (queue: QueuedMessage[]) => void;
|
|
1274
|
+
/** Render the built-in reorderable queue rows above the textarea. Set to false to suppress them and render the queue yourself — enqueue and auto-dispatch still run. Defaults to `true`. */
|
|
1275
|
+
showQueue?: boolean;
|
|
1276
|
+
/** Previously-sent messages, oldest first. With the textarea focused, ArrowUp (caret on the first line) recalls the previous message and walks backward; ArrowDown (caret on the last line) walks forward toward the in-progress draft. Editing or sending exits history mode. Defaults to `[]`. */
|
|
1277
|
+
history?: string[];
|
|
1278
|
+
/** Suggested prompt rendered as the placeholder (with a Tab keycap) while the draft is empty. Pressing Tab fills it into the composer — it doesn't send. Takes precedence over `placeholder`. */
|
|
1279
|
+
placeholderSuggestion?: string;
|
|
1280
|
+
/** Suggested prompts listed under the action bar while the draft is empty. ArrowDown moves a highlight into the list (focus stays in the textarea), ArrowUp walks back up and out, Enter or click fills the highlighted prompt. Escape drops the highlight; typing collapses the list. */
|
|
1281
|
+
suggestions?: string[];
|
|
1282
|
+
/** Extra classes for the composer surface. */
|
|
1283
|
+
className?: string;
|
|
1284
|
+
}
|
|
1285
|
+
/**
|
|
1286
|
+
* Chat-style message composer with an auto-resizing textarea, flexible
|
|
1287
|
+
* left/right action slots, and a built-in send button on a Surface-2
|
|
1288
|
+
* substrate.
|
|
1289
|
+
*
|
|
1290
|
+
* The textarea grows from `minRows` to `maxRows` and then scrolls, Enter
|
|
1291
|
+
* sends while Shift+Enter breaks the line, and the whole panel is one
|
|
1292
|
+
* hairline ring that recolours in place for hover, focus and drag instead of
|
|
1293
|
+
* layering a second border. Attachments drop anywhere on the composer (or
|
|
1294
|
+
* come from `openFilePicker` in a slot) and preview as tiles — images
|
|
1295
|
+
* object-cover, PDFs render their first page. `suggestions` open a listbox
|
|
1296
|
+
* under the action bar that ↓/↑ walk without moving focus, and
|
|
1297
|
+
* `placeholderSuggestion` writes a ghost prompt with a Tab keycap. With a
|
|
1298
|
+
* `status` the send button morphs into Stop (empty draft) or Queue (draft
|
|
1299
|
+
* typed while streaming); queued rows reorder by drag or Alt+↑/↓, edit back
|
|
1300
|
+
* into the composer on double-click, and the head auto-dispatches on the
|
|
1301
|
+
* streaming→idle edge.
|
|
1302
|
+
*
|
|
1303
|
+
* Every controlled prop has an uncontrolled twin — `defaultValue`,
|
|
1304
|
+
* `defaultFiles`, `defaultQueue`, `defaultStatus` — so a composer can hold
|
|
1305
|
+
* its own draft, attachments and queue with no state in the caller.
|
|
1306
|
+
*
|
|
1307
|
+
* @example {@include ./examples.mdx}
|
|
1308
|
+
*/
|
|
1309
|
+
declare const InputMessage: ForwardRefExoticComponent_tcubfn5<InputMessageProps & RefAttributes_miuf565<HTMLDivElement>>;
|
|
1310
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent5, HTMLAttributes as HTMLAttributes9, ReactNode as ReactNode10, RefAttributes as RefAttributes5 } from "react";
|
|
1311
|
+
interface RadioGroupProps extends Omit<HTMLAttributes9<HTMLDivElement>, "onSelect" | "defaultValue"> {
|
|
1312
|
+
/** RadioGroup.Item children. */
|
|
1313
|
+
children: ReactNode10;
|
|
1314
|
+
/** Index of the currently selected item. Controlled — pair it with `onSelectedIndexChange` (or per-item `onSelect`). */
|
|
1315
|
+
selectedIndex?: number;
|
|
1316
|
+
/** Selected index on first render when uncontrolled. Defaults to no selection. */
|
|
1317
|
+
defaultSelectedIndex?: number;
|
|
1318
|
+
/** Called with the new index whenever an item is selected. */
|
|
1319
|
+
onSelectedIndexChange?: (index: number) => void;
|
|
1320
|
+
/** Selected item `value` (value mode; items then need a `value`). Controlled; wraps the group in Base UI's RadioGroup for form integration. */
|
|
1321
|
+
value?: string;
|
|
1322
|
+
/** Selected item `value` on first render when uncontrolled (value mode). */
|
|
1323
|
+
defaultValue?: string;
|
|
1324
|
+
/** Called with the selected item's `value` when it changes (value mode). */
|
|
1325
|
+
onValueChange?: (value: string) => void;
|
|
1326
|
+
/** Pins the group's rows to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
|
|
1327
|
+
size?: SizeVariant;
|
|
1328
|
+
}
|
|
1329
|
+
type RadioGroupComponent = ForwardRefExoticComponent5<RadioGroupProps & RefAttributes5<HTMLDivElement>> & {
|
|
1330
|
+
Item: typeof RadioItem;
|
|
1331
|
+
};
|
|
1332
|
+
/**
|
|
1333
|
+
* Radio button group with fluid hover and animated selection.
|
|
1334
|
+
*
|
|
1335
|
+
* Each row is a `RadioGroup.Item` with a stable `index`. The selected
|
|
1336
|
+
* background melts to the chosen row, a fluid hover highlight melts between
|
|
1337
|
+
* rows (the liquid indicators in Morph), the dot scales in, and the label animates to semibold without shifting
|
|
1338
|
+
* its width. Arrow keys, Home and End move focus and select, with a roving
|
|
1339
|
+
* tabindex on the selected row. Select by index — uncontrolled with
|
|
1340
|
+
* `defaultSelectedIndex`, controlled with `selectedIndex` +
|
|
1341
|
+
* `onSelectedIndexChange` — or by item `value` (`defaultValue` / `value` +
|
|
1342
|
+
* `onValueChange`), which also renders Base UI radios for form integration.
|
|
1343
|
+
* FF's per-item `selected` / `onSelect` still work and override the group for
|
|
1344
|
+
* their row.
|
|
1345
|
+
*
|
|
1346
|
+
* Statics:
|
|
1347
|
+
* - `RadioGroup.Item` — one radio row: `label`, `index`, and optional `value`,
|
|
1348
|
+
* `selected`, `onSelect`.
|
|
1349
|
+
*
|
|
1350
|
+
* @example {@include ./examples.mdx}
|
|
1351
|
+
*/
|
|
1352
|
+
declare const RadioGroup: RadioGroupComponent;
|
|
1353
|
+
interface RadioItemProps extends HTMLAttributes9<HTMLDivElement> {
|
|
1354
|
+
/** Text label for the radio item. */
|
|
1355
|
+
label: string;
|
|
1356
|
+
/** Position index within the group. */
|
|
1357
|
+
index: number;
|
|
1358
|
+
/** Whether this item is selected. Defaults to the group's selection. */
|
|
1359
|
+
selected?: boolean;
|
|
1360
|
+
/** Called when this item is selected (the group's change callbacks fire too). */
|
|
1361
|
+
onSelect?: () => void;
|
|
1362
|
+
/** Optional value forwarded to the underlying Base UI primitive for form integration. */
|
|
1363
|
+
value?: string;
|
|
1364
|
+
}
|
|
1365
|
+
declare const RadioItem: ForwardRefExoticComponent5<RadioItemProps & RefAttributes5<HTMLDivElement>>;
|
|
1366
|
+
import { Autocomplete } from "@base-ui/react/autocomplete";
|
|
1367
|
+
import { HTMLAttributes as HTMLAttributes10, ReactNode as ReactNode12, RefObject as RefObject9 } from "react";
|
|
1368
|
+
import { ButtonHTMLAttributes as ButtonHTMLAttributes2, ReactElement as ReactElement2, ReactNode as ReactNode11 } from "react";
|
|
1369
|
+
interface SlotProps extends ButtonHTMLAttributes2<HTMLButtonElement> {
|
|
1370
|
+
/** The element that becomes the control, e.g. a Button. */
|
|
1371
|
+
render?: ReactElement2;
|
|
1372
|
+
/** Compose onto the single child instead. Both spellings work in both flavors. Defaults to `false`. */
|
|
1373
|
+
asChild?: boolean;
|
|
1374
|
+
/** Control content when there is no render element. */
|
|
1375
|
+
children?: ReactNode11;
|
|
1376
|
+
}
|
|
1377
|
+
import { JSX as JSX_1kxb13 } from "react";
|
|
1378
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn6 } from "react";
|
|
1379
|
+
import { RefAttributes as RefAttributes_miuf566 } from "react";
|
|
1380
|
+
/** One command: the label the query matches, plus what the row shows and does. */
|
|
1381
|
+
interface CommandItem {
|
|
1382
|
+
label: string;
|
|
1383
|
+
icon?: IconComponent;
|
|
1384
|
+
/** Shown at the end of the row; display only, nothing binds it. */
|
|
1385
|
+
shortcut?: string;
|
|
1386
|
+
/** More words the query matches. */
|
|
1387
|
+
keywords?: string[];
|
|
1388
|
+
disabled?: boolean;
|
|
1389
|
+
onSelect?: () => void;
|
|
1390
|
+
}
|
|
1391
|
+
interface CommandGroup {
|
|
1392
|
+
label: string;
|
|
1393
|
+
items: CommandItem[];
|
|
1394
|
+
}
|
|
1395
|
+
type CommandItems = CommandItem[] | CommandGroup[];
|
|
1396
|
+
type CommandListRootProps = Omit<Autocomplete.Root.Props<CommandItem>, "items" | "filter" | "itemToStringValue" | "onItemHighlighted"> & {
|
|
1397
|
+
items: CommandItems;
|
|
1398
|
+
};
|
|
1399
|
+
type Element_12xgc13 = JSX_1kxb13["Element"];
|
|
1400
|
+
/** Base UI's Autocomplete set up for command rows: it matches labels and keywords and hands its highlight to `CommandList`. */
|
|
1401
|
+
declare function CommandListRoot({ items,...props }: CommandListRootProps): Element_12xgc13;
|
|
1402
|
+
declare function CommandShortcut({ className,...props }: HTMLAttributes10<HTMLElement>): Element_12xgc13;
|
|
1403
|
+
interface CommandListProps {
|
|
1404
|
+
onPick: (item: CommandItem) => void;
|
|
1405
|
+
emptyMessage: ReactNode12;
|
|
1406
|
+
className?: string;
|
|
1407
|
+
}
|
|
1408
|
+
/** The filtered rows (grouped or flat) under one fluid highlight, inside a ScrollArea. Goes inside `CommandListRoot`. */
|
|
1409
|
+
declare function CommandList({ onPick, emptyMessage, className }: CommandListProps): Element_12xgc13;
|
|
1410
|
+
interface CommandPaletteProps {
|
|
1411
|
+
/** The commands, flat or in labelled groups. */
|
|
1412
|
+
items: CommandItems;
|
|
1413
|
+
/** The search field's placeholder. Defaults to `'Type a command or search…'`. */
|
|
1414
|
+
placeholder?: string;
|
|
1415
|
+
/** Shown when nothing matches the query. Defaults to `'No results found.'`. */
|
|
1416
|
+
emptyMessage?: ReactNode12;
|
|
1417
|
+
/** Classes for the palette's box. */
|
|
1418
|
+
className?: string;
|
|
1419
|
+
}
|
|
1420
|
+
declare function CommandPalette({ items, placeholder, emptyMessage, className }: CommandPaletteProps): Element_12xgc13;
|
|
1421
|
+
declare const CommandTrigger: ForwardRefExoticComponent_tcubfn6<SlotProps & RefAttributes_miuf566<HTMLButtonElement>>;
|
|
1422
|
+
interface CommandContentProps extends CommandPaletteProps {
|
|
1423
|
+
/** Accessible name of the panel. Defaults to `'Command menu'`. */
|
|
1424
|
+
label?: string;
|
|
1425
|
+
/** Where the panel grows from (see Morph): the pressed trigger (its center when none), the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
1426
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject9<HTMLElement | null>;
|
|
1427
|
+
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
1428
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
1429
|
+
/** Hide the trigger while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
1430
|
+
hideSource?: boolean;
|
|
1431
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
|
|
1432
|
+
tier?: "moderate" | "slow";
|
|
1433
|
+
}
|
|
1434
|
+
declare const CommandContent: ForwardRefExoticComponent_tcubfn6<CommandContentProps & RefAttributes_miuf566<HTMLDivElement>>;
|
|
1435
|
+
interface CommandProps {
|
|
1436
|
+
/** Controlled open state. */
|
|
1437
|
+
open?: boolean;
|
|
1438
|
+
/** Initial open state, for an uncontrolled palette. Defaults to `false`. */
|
|
1439
|
+
defaultOpen?: boolean;
|
|
1440
|
+
/** Called when the palette opens or closes. */
|
|
1441
|
+
onOpenChange?: (open: boolean) => void;
|
|
1442
|
+
/** The key that toggles the palette with ⌘ (Ctrl elsewhere); `false` leaves the keyboard alone. Defaults to `'k'`. */
|
|
1443
|
+
hotkey?: string | false;
|
|
1444
|
+
/** The trigger and the panel: `Command.Trigger` plus a `Command.Content`. */
|
|
1445
|
+
children?: ReactNode12;
|
|
1446
|
+
}
|
|
1447
|
+
/**
|
|
1448
|
+
* A ⌘K command menu: a search field over grouped commands, grown out of
|
|
1449
|
+
* whatever opened it.
|
|
1450
|
+
*
|
|
1451
|
+
* Type to filter by label and keywords; the arrows move one highlight
|
|
1452
|
+
* through the rows, springing between them like the fluid hover, and Enter
|
|
1453
|
+
* or a press runs the command and closes the panel. The first match is
|
|
1454
|
+
* always highlighted, so Enter has a target, and an empty result says so.
|
|
1455
|
+
* The panel is Dialog's: it grows out of its trigger with the goo neck
|
|
1456
|
+
* (see Morph) and sits near the top of the window, so it keeps its top edge
|
|
1457
|
+
* still as the list filters. ⌘K (Ctrl+K elsewhere) toggles it from anywhere
|
|
1458
|
+
* on the page and still grows it out of the trigger; with several palettes
|
|
1459
|
+
* on one page, one answers each press. Escape and a press outside close it.
|
|
1460
|
+
* Built on Base UI's Autocomplete, rendered inline: the input keeps focus
|
|
1461
|
+
* and screen readers follow the highlighted row.
|
|
1462
|
+
*
|
|
1463
|
+
* Commands are data: `{ label, icon, shortcut, keywords, disabled, onSelect }`,
|
|
1464
|
+
* flat or in `{ label, items }` groups. A `shortcut` is only shown.
|
|
1465
|
+
*
|
|
1466
|
+
* Statics:
|
|
1467
|
+
* - `Command.Trigger` — the control that opens it: `render={<Button/>}` or
|
|
1468
|
+
* `asChild`.
|
|
1469
|
+
* - `Command.Content` — the panel: `items`, `placeholder`, `emptyMessage`,
|
|
1470
|
+
* `label`, and the morph options `from`, `effect`, `hideSource`, `tier`.
|
|
1471
|
+
* - `Command.Palette` — the search field and list on their own, for a
|
|
1472
|
+
* palette that lives in the page: `items`, `placeholder`, `emptyMessage`.
|
|
1473
|
+
* - `Command.Shortcut` — a key hint, as the rows show it, e.g. in the
|
|
1474
|
+
* trigger.
|
|
1475
|
+
*
|
|
1476
|
+
* @example {@include ./examples.mdx}
|
|
1477
|
+
*/
|
|
1478
|
+
declare function Command({ open, defaultOpen, onOpenChange, hotkey, children }: CommandProps): Element_12xgc13;
|
|
1479
|
+
import { JSX as JSX_1kxb14 } from "react";
|
|
1480
|
+
interface SearchProps {
|
|
1481
|
+
/** How it rests: a pill showing the placeholder (and the shortcut), or a lone search icon. Defaults to `'pill'`. */
|
|
1482
|
+
variant?: "pill" | "icon";
|
|
1483
|
+
/** The field's placeholder, the pill's label and the accessible name of both. Defaults to `'Search'`. */
|
|
1484
|
+
placeholder?: string;
|
|
1485
|
+
/** Suggestions offered below the field and filtered as you type: strings, or Command items (`{ label, icon, keywords }`). Leave out for a plain search field. */
|
|
1486
|
+
items?: (string | CommandItem)[];
|
|
1487
|
+
/** Controlled query. */
|
|
1488
|
+
value?: string;
|
|
1489
|
+
/** Initial query, for an uncontrolled field. Defaults to `''`. */
|
|
1490
|
+
defaultValue?: string;
|
|
1491
|
+
/** Called on every change of the query. */
|
|
1492
|
+
onValueChange?: (value: string) => void;
|
|
1493
|
+
/** Called with the query on Enter, and with a suggestion's label when one is picked. */
|
|
1494
|
+
onSubmit?: (query: string) => void;
|
|
1495
|
+
/** Controlled expanded state. */
|
|
1496
|
+
expanded?: boolean;
|
|
1497
|
+
/** Initial expanded state, for an uncontrolled field. Defaults to `false`. */
|
|
1498
|
+
defaultExpanded?: boolean;
|
|
1499
|
+
/** Called when the field expands or collapses. */
|
|
1500
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
1501
|
+
/** Width of the expanded field, in px. Defaults to `288`. */
|
|
1502
|
+
width?: number;
|
|
1503
|
+
/** The edge that stays put: the field grows from it toward the other one, over its neighbors. Defaults to `'start'`. */
|
|
1504
|
+
align?: "start" | "end";
|
|
1505
|
+
/** A key that expands the field from anywhere on the page outside another field, shown on the pill. */
|
|
1506
|
+
shortcut?: string;
|
|
1507
|
+
/** Shown in the suggestions when none matches. Defaults to `'No results found.'`. */
|
|
1508
|
+
emptyMessage?: string;
|
|
1509
|
+
/** How the suggestions grow out of the field (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
1510
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
1511
|
+
/** Spring tier of the suggestions' plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
|
|
1512
|
+
tier?: "moderate" | "slow";
|
|
1513
|
+
/** Classes for the root, the box the resting button keeps in the layout. */
|
|
1514
|
+
className?: string;
|
|
1515
|
+
}
|
|
1516
|
+
type Element_12xgc14 = JSX_1kxb14["Element"];
|
|
1517
|
+
/**
|
|
1518
|
+
* A search button that grows into the field in place, with suggestions that
|
|
1519
|
+
* ooze out below it.
|
|
1520
|
+
*
|
|
1521
|
+
* At rest it is a pill showing the placeholder, or a lone search icon. A
|
|
1522
|
+
* press (or its `shortcut` key) springs it to `width` and focuses the
|
|
1523
|
+
* field. It grows over its neighbors rather than pushing them: the resting
|
|
1524
|
+
* box stays in the layout, so nothing around it moves, and `align="end"`
|
|
1525
|
+
* grows it leftward, for a toolbar's far end. The search icon never moves.
|
|
1526
|
+
* Typing opens the suggestions, which melt out of the field through the
|
|
1527
|
+
* goo neck (see Morph) once it has finished growing; the arrows move one
|
|
1528
|
+
* fluid highlight through them, and Enter or a press picks one. Escape
|
|
1529
|
+
* closes the suggestions, then clears the query, then collapses the field
|
|
1530
|
+
* and hands focus back to the button; leaving an empty field collapses it
|
|
1531
|
+
* too. The field lifts 2 surface levels while open, the same level as its
|
|
1532
|
+
* suggestions, so the two read as one liquid.
|
|
1533
|
+
*
|
|
1534
|
+
* With `items` the field is a combobox over a listbox of suggestions,
|
|
1535
|
+
* built on Base UI's Autocomplete (filtering by label and keywords, the
|
|
1536
|
+
* input keeps focus while the highlight moves); without, it is a plain
|
|
1537
|
+
* search box. Either way it sits in a `<search>` landmark around a form,
|
|
1538
|
+
* and Enter reports the query to `onSubmit`.
|
|
1539
|
+
*
|
|
1540
|
+
* @example {@include ./examples.mdx}
|
|
1541
|
+
*/
|
|
1542
|
+
declare function Search2({ variant, placeholder, items, value, defaultValue, onValueChange, onSubmit, expanded, defaultExpanded, onExpandedChange, width, align, shortcut, emptyMessage, effect, tier, className }: SearchProps): Element_12xgc14;
|
|
1543
|
+
import { VariantProps as VariantProps4 } from "class-variance-authority";
|
|
1544
|
+
import { HTMLAttributes as HTMLAttributes11, ReactNode as ReactNode13 } from "react";
|
|
1545
|
+
import { JSX as JSX_1kxb15 } from "react";
|
|
1546
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn7 } from "react";
|
|
1547
|
+
import { RefAttributes as RefAttributes_miuf567 } from "react";
|
|
1548
|
+
import { ClassProp as ClassProp_wz9o0r4 } from "class-variance-authority/types";
|
|
1549
|
+
interface SelectProps {
|
|
1550
|
+
/** `Select.Trigger` and `Select.Content`. */
|
|
1551
|
+
children: ReactNode13;
|
|
1552
|
+
/** Controlled selected value. Pair with `onValueChange`. */
|
|
1553
|
+
value?: string;
|
|
1554
|
+
/** Uncontrolled default value — the select then keeps the selection itself. */
|
|
1555
|
+
defaultValue?: string;
|
|
1556
|
+
/** Called when the selected value changes. */
|
|
1557
|
+
onValueChange?: (value: string) => void;
|
|
1558
|
+
/** Disables the entire select. Defaults to `false`. */
|
|
1559
|
+
disabled?: boolean;
|
|
1560
|
+
/** Name for form submission (renders a hidden native input). */
|
|
1561
|
+
name?: string;
|
|
1562
|
+
/** Marks the select as required in forms. Defaults to `false`. */
|
|
1563
|
+
required?: boolean;
|
|
1564
|
+
/** Pins trigger and popup to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, both follow the surrounding SizeProvider. */
|
|
1565
|
+
size?: SizeVariant;
|
|
1566
|
+
}
|
|
1567
|
+
type Element_12xgc15 = JSX_1kxb15["Element"];
|
|
1568
|
+
/**
|
|
1569
|
+
* An animated select menu: fluid hover on the rows, a popup that oozes out of
|
|
1570
|
+
* its trigger, and a checkmark that draws itself as the selection lands.
|
|
1571
|
+
*
|
|
1572
|
+
* Built on Base UI's Select — positioning and collision flipping, dismissal,
|
|
1573
|
+
* typeahead, combobox ARIA and the hidden form input all come from the
|
|
1574
|
+
* primitive. This layer adds the magnetic hover background, the selected
|
|
1575
|
+
* background that springs from the old row to the picked one, a keyboard
|
|
1576
|
+
* focus ring that only appears once you actually use the keyboard, and the
|
|
1577
|
+
* popup's open and close through the shared morph (see Morph), goo by
|
|
1578
|
+
* default. A pick holds the popup open for 300ms so that acknowledgment is
|
|
1579
|
+
* seen; Escape and outside presses close at once. Uncontrolled through
|
|
1580
|
+
* `defaultValue`, controlled through `value` + `onValueChange`.
|
|
1581
|
+
*
|
|
1582
|
+
* Statics: Select.Trigger (variant, icon, placeholder, error),
|
|
1583
|
+
* Select.Content (the popup: the morph options from, effect, hideSource,
|
|
1584
|
+
* tier), Select.Item (index, value, icon, disabled), Select.Group,
|
|
1585
|
+
* Select.Label and Select.Separator.
|
|
1586
|
+
*
|
|
1587
|
+
* @example {@include ./examples.mdx}
|
|
1588
|
+
*/
|
|
1589
|
+
declare function Select({ children, value, defaultValue, onValueChange, disabled, name, required, size }: SelectProps): Element_12xgc15;
|
|
1590
|
+
declare const triggerVariants: (props?: ({
|
|
1591
|
+
variant?: "borderless" | "bordered" | null | undefined;
|
|
1592
|
+
} & ClassProp_wz9o0r4) | undefined) => string;
|
|
1593
|
+
interface SelectTriggerProps extends Omit<HTMLAttributes11<HTMLButtonElement>, "children">, VariantProps4<typeof triggerVariants> {
|
|
1594
|
+
/** Visual style of the trigger. Defaults to `"bordered"`. */
|
|
1595
|
+
variant?: "bordered" | "borderless";
|
|
1596
|
+
/** Optional icon displayed before the value. */
|
|
1597
|
+
icon?: IconComponent;
|
|
1598
|
+
/** Text shown when no value is selected. Defaults to `"Select…"`. */
|
|
1599
|
+
placeholder?: string;
|
|
1600
|
+
/** Error message shown below the trigger; also tints the border and sets `aria-invalid`. */
|
|
1601
|
+
error?: string;
|
|
1602
|
+
/** Size override for the trigger alone. Prefer the `size` prop on `<Select>` (or a surrounding SizeProvider) so the popup matches. */
|
|
1603
|
+
size?: SizeVariant;
|
|
1604
|
+
/** Extra classes for the trigger button. */
|
|
1605
|
+
className?: string;
|
|
1606
|
+
}
|
|
1607
|
+
declare const SelectTrigger: ForwardRefExoticComponent_tcubfn7<SelectTriggerProps & RefAttributes_miuf567<HTMLButtonElement>>;
|
|
1608
|
+
interface SelectContentProps {
|
|
1609
|
+
/** Where the menu grows from (see Morph): the trigger, the pointer, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
1610
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | React.RefObject<HTMLElement | null>;
|
|
1611
|
+
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
1612
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
1613
|
+
/** Hide the trigger while open, so it reads as turning into the menu. Defaults to `false`. */
|
|
1614
|
+
hideSource?: boolean;
|
|
1615
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
|
|
1616
|
+
tier?: "moderate" | "slow";
|
|
1617
|
+
/** Additional classes for the menu container. */
|
|
1618
|
+
className?: string;
|
|
1619
|
+
/** `Select.Item`, `Select.Group`, `Select.Label`, `Select.Separator`. */
|
|
1620
|
+
children: ReactNode13;
|
|
1621
|
+
}
|
|
1622
|
+
declare const SelectContent: ForwardRefExoticComponent_tcubfn7<SelectContentProps & RefAttributes_miuf567<HTMLDivElement>>;
|
|
1623
|
+
interface SelectItemProps extends HTMLAttributes11<HTMLDivElement> {
|
|
1624
|
+
/** Optional icon displayed before the label. */
|
|
1625
|
+
icon?: IconComponent;
|
|
1626
|
+
/** Position index within the content — what fluid hover measures rows by. */
|
|
1627
|
+
index: number;
|
|
1628
|
+
/** Unique value for this option. */
|
|
1629
|
+
value: string;
|
|
1630
|
+
/** Disables this individual item. Defaults to `false`. */
|
|
1631
|
+
disabled?: boolean;
|
|
1632
|
+
/** The row label. A string label is also what the trigger shows for this value. */
|
|
1633
|
+
children?: ReactNode13;
|
|
1634
|
+
}
|
|
1635
|
+
declare const SelectItem: ForwardRefExoticComponent_tcubfn7<SelectItemProps & RefAttributes_miuf567<HTMLDivElement>>;
|
|
1636
|
+
declare function SelectGroup({ children, className,...props }: HTMLAttributes11<HTMLDivElement>): Element_12xgc15;
|
|
1637
|
+
declare const SelectLabel: ForwardRefExoticComponent_tcubfn7<HTMLAttributes11<HTMLDivElement> & RefAttributes_miuf567<HTMLDivElement>>;
|
|
1638
|
+
declare const SelectSeparator: ForwardRefExoticComponent_tcubfn7<HTMLAttributes11<HTMLDivElement> & RefAttributes_miuf567<HTMLDivElement>>;
|
|
1639
|
+
import { CSSProperties as CSSProperties2, HTMLAttributes as HTMLAttributes12 } from "react";
|
|
1640
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn8 } from "react";
|
|
1641
|
+
import { RefAttributes as RefAttributes_miuf568 } from "react";
|
|
1642
|
+
type SliderValue = number | [number, number];
|
|
1643
|
+
type ValuePosition = "left" | "right" | "top" | "bottom" | "tooltip";
|
|
1644
|
+
/** Props of the compact engine — the feature-rich design (ranges, discrete
|
|
1645
|
+
* step lists, value display) that renders the ladder's compact step. The
|
|
1646
|
+
* public <Slider> accepts these plus `variant` and `size`. */
|
|
1647
|
+
interface SliderEngineProps extends Omit<HTMLAttributes12<HTMLDivElement>, "onChange" | "defaultValue"> {
|
|
1648
|
+
value: SliderValue;
|
|
1649
|
+
onChange: (value: SliderValue) => void;
|
|
1650
|
+
min?: number;
|
|
1651
|
+
max?: number;
|
|
1652
|
+
step?: number;
|
|
1653
|
+
/**
|
|
1654
|
+
* Discrete list of allowed values, e.g. [0.1, 0.5, 0.7, 1.1, 1.3].
|
|
1655
|
+
*
|
|
1656
|
+
* When set, the thumb snaps only to these values (positioned proportionally
|
|
1657
|
+
* along the track) and arrow keys walk the list. `min`/`max` derive from the
|
|
1658
|
+
* list's extremes and `step` is ignored.
|
|
1659
|
+
*/
|
|
1660
|
+
steps?: number[];
|
|
1661
|
+
showSteps?: boolean;
|
|
1662
|
+
showValue?: boolean;
|
|
1663
|
+
valuePosition?: ValuePosition;
|
|
1664
|
+
formatValue?: (v: number) => string;
|
|
1665
|
+
label?: string;
|
|
1666
|
+
disabled?: boolean;
|
|
1667
|
+
trackClassName?: string;
|
|
1668
|
+
trackStyle?: CSSProperties2;
|
|
1669
|
+
fillClassName?: string;
|
|
1670
|
+
fillStyle?: CSSProperties2;
|
|
1671
|
+
hideFill?: boolean;
|
|
1672
|
+
thumbColor?: string;
|
|
1673
|
+
thumbBorderColor?: string;
|
|
1674
|
+
}
|
|
1675
|
+
interface SliderComfortableProps extends Omit<HTMLAttributes12<HTMLDivElement>, "onChange" | "defaultValue" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragOver" | "onAnimationStart"> {
|
|
1676
|
+
value: number;
|
|
1677
|
+
onChange: (value: number) => void;
|
|
1678
|
+
min?: number;
|
|
1679
|
+
max?: number;
|
|
1680
|
+
step?: number;
|
|
1681
|
+
variant?: "pips" | "scrubber";
|
|
1682
|
+
label?: string;
|
|
1683
|
+
formatValue?: (v: number) => string;
|
|
1684
|
+
disabled?: boolean;
|
|
1685
|
+
}
|
|
1686
|
+
interface SliderProps extends Omit<SliderEngineProps, "value" | "onChange"> {
|
|
1687
|
+
/** Step on the size ladder (see Sizes). Default renders the pip/scrubber design; compact renders the dense design. Defaults to the surrounding SizeProvider, else `"default"`. */
|
|
1688
|
+
size?: SizeVariant;
|
|
1689
|
+
/** Default-step layout. "pips" shows discrete dot indicators; "scrubber" drags anywhere in the row for a continuous value. Ignored when the compact design renders. Defaults to `"pips"`. */
|
|
1690
|
+
variant?: "pips" | "scrubber";
|
|
1691
|
+
/** Current value (controlled). Pass an array to enable range mode with two thumbs. Omit it to let the slider keep its own state, seeded from `defaultValue`. */
|
|
1692
|
+
value?: SliderValue;
|
|
1693
|
+
/** Initial value when uncontrolled. An array starts the slider in range mode. Defaults to the lowest of `steps`, else `min`, else `0`. */
|
|
1694
|
+
defaultValue?: SliderValue;
|
|
1695
|
+
/** Called when the value changes via drag, click, or keyboard. */
|
|
1696
|
+
onChange?: (value: SliderValue) => void;
|
|
1697
|
+
/** Minimum value. Defaults to `0`. */
|
|
1698
|
+
min?: number;
|
|
1699
|
+
/** Maximum value. Defaults to `100`. */
|
|
1700
|
+
max?: number;
|
|
1701
|
+
/** Step increment. Thumb snaps to the nearest step during drag. Defaults to `1`. */
|
|
1702
|
+
step?: number;
|
|
1703
|
+
/** Discrete list of allowed values, e.g. 0.1, 0.5, 0.7, 1.1, 1.3. The thumb snaps only to these values and arrow keys walk the list; min/max derive from the list's extremes and step is ignored. */
|
|
1704
|
+
steps?: number[];
|
|
1705
|
+
/** Render dot indicators at each step position on the track. Defaults to `false`. */
|
|
1706
|
+
showSteps?: boolean;
|
|
1707
|
+
/** Whether to display the current value label. Defaults to `true`. */
|
|
1708
|
+
showValue?: boolean;
|
|
1709
|
+
/** Position of the value label. "tooltip" shows above the thumb during interaction. Defaults to `"left"`. */
|
|
1710
|
+
valuePosition?: ValuePosition;
|
|
1711
|
+
/** Custom formatter for the value label. Defaults to `String`. */
|
|
1712
|
+
formatValue?: (v: number) => string;
|
|
1713
|
+
/** Accessible label for the slider, also shown as prefix in the value display. */
|
|
1714
|
+
label?: string;
|
|
1715
|
+
/** Disables all interaction. Defaults to `false`. */
|
|
1716
|
+
disabled?: boolean;
|
|
1717
|
+
}
|
|
1718
|
+
/**
|
|
1719
|
+
* One slider, two ladder steps: the default step's pip/scrubber design, and
|
|
1720
|
+
* the compact step's dense design with track fill, range mode, and value
|
|
1721
|
+
* display.
|
|
1722
|
+
*
|
|
1723
|
+
* One component: the default step renders the pip/scrubber design, the
|
|
1724
|
+
* compact step the dense one. Compact-only props (an array value, steps,
|
|
1725
|
+
* showSteps, showValue, valuePosition, track styling) always render the
|
|
1726
|
+
* compact design so no capability is lost. Either design snaps to the step
|
|
1727
|
+
* grid while dragging, previews the value you are about to pick as a filled
|
|
1728
|
+
* bar plus a tooltip, and carries an invisible Base UI slider underneath for
|
|
1729
|
+
* the ARIA roles and arrow-key navigation. In the dense design the value
|
|
1730
|
+
* label is click-to-edit.
|
|
1731
|
+
*
|
|
1732
|
+
* Works controlled (`value` + `onChange`, exactly as upstream) or
|
|
1733
|
+
* uncontrolled (`defaultValue`, with `onChange` reporting each change).
|
|
1734
|
+
* Track styling props are inherited from the compact engine:
|
|
1735
|
+
* `trackClassName`, `trackStyle`, `fillClassName`, `fillStyle`, `hideFill`,
|
|
1736
|
+
* `thumbColor` and `thumbBorderColor` — each one also forces the dense
|
|
1737
|
+
* design.
|
|
1738
|
+
*
|
|
1739
|
+
* @example {@include ./examples.mdx}
|
|
1740
|
+
*/
|
|
1741
|
+
declare const Slider: ForwardRefExoticComponent_tcubfn8<SliderProps & RefAttributes_miuf568<HTMLDivElement>>;
|
|
1742
|
+
/** @deprecated The comfortable design is now the ladder's default step —
|
|
1743
|
+
* render <Slider> (optionally with `variant`) instead. */
|
|
1744
|
+
declare const SliderComfortable: ForwardRefExoticComponent_tcubfn8<SliderComfortableProps & RefAttributes_miuf568<HTMLDivElement>>;
|
|
1745
|
+
import { Transition } from "motion/react";
|
|
1746
|
+
import { HTMLAttributes as HTMLAttributes13 } from "react";
|
|
1747
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn9 } from "react";
|
|
1748
|
+
import { RefAttributes as RefAttributes_miuf569 } from "react";
|
|
1749
|
+
interface SwitchProps extends HTMLAttributes13<HTMLDivElement> {
|
|
1750
|
+
/** Text label displayed next to the switch. */
|
|
1751
|
+
label: string;
|
|
1752
|
+
/** Whether the switch is on (controlled). Omit it to let the switch keep its own state, seeded from `defaultChecked`. */
|
|
1753
|
+
checked?: boolean;
|
|
1754
|
+
/** Whether the switch starts on when uncontrolled. Defaults to `false`. */
|
|
1755
|
+
defaultChecked?: boolean;
|
|
1756
|
+
/** Called when the switch is toggled. */
|
|
1757
|
+
onToggle?: () => void;
|
|
1758
|
+
/** Called with the new state whenever the switch is toggled, controlled or not. */
|
|
1759
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
1760
|
+
/** Disables the switch. Defaults to `false`. */
|
|
1761
|
+
disabled?: boolean;
|
|
1762
|
+
/** Transition for the thumb's slide and hover/press stretch. Defaults to the `spring.moderate` motion token. */
|
|
1763
|
+
thumbTransition?: Transition;
|
|
1764
|
+
/** Pins the switch to one step of the size ladder (see Sizes). Defaults to the surrounding SizeProvider, else `"default"`. */
|
|
1765
|
+
size?: SizeVariant;
|
|
1766
|
+
}
|
|
1767
|
+
/**
|
|
1768
|
+
* Toggle switch with animated thumb and label.
|
|
1769
|
+
*
|
|
1770
|
+
* The whole row — track and label — is the hit target: click anywhere to
|
|
1771
|
+
* toggle, or grab the thumb and drag it across the midpoint. The thumb
|
|
1772
|
+
* stretches into a pill on hover, squashes on press and melts across the
|
|
1773
|
+
* track like a drop when it toggles (see Morph), springing with the motion
|
|
1774
|
+
* tokens; a Base UI switch underneath carries the role, keyboard
|
|
1775
|
+
* toggling (Space/Enter) and focus ring. The label brightens when the switch
|
|
1776
|
+
* is on.
|
|
1777
|
+
*
|
|
1778
|
+
* Works controlled (`checked` + `onToggle`, exactly as upstream) or
|
|
1779
|
+
* uncontrolled (`defaultChecked`, with `onCheckedChange` reporting each
|
|
1780
|
+
* change). `size` pins it to one step of the size ladder; otherwise it
|
|
1781
|
+
* follows the surrounding SizeProvider.
|
|
1782
|
+
*
|
|
1783
|
+
* @example {@include ./examples.mdx}
|
|
1784
|
+
*/
|
|
1785
|
+
declare const Switch: ForwardRefExoticComponent_tcubfn9<SwitchProps & RefAttributes_miuf569<HTMLDivElement>>;
|
|
1786
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent6, HTMLAttributes as HTMLAttributes14, ReactNode as ReactNode14, RefAttributes as RefAttributes6 } from "react";
|
|
1787
|
+
type AccordionGroupSingleProps = {
|
|
1788
|
+
/** Whether one or multiple items can be expanded. Defaults to `"single"`. */
|
|
1789
|
+
type?: "single";
|
|
1790
|
+
/** Controlled expanded value. */
|
|
1791
|
+
value?: string;
|
|
1792
|
+
/** Initially expanded item value — uncontrolled. */
|
|
1793
|
+
defaultValue?: string;
|
|
1794
|
+
/** Callback when expanded state changes. */
|
|
1795
|
+
onValueChange?: (value: string) => void;
|
|
1796
|
+
/** Allow collapsing all items when type is single. Defaults to `true`. */
|
|
1797
|
+
collapsible?: boolean;
|
|
1798
|
+
};
|
|
1799
|
+
type AccordionGroupMultipleProps = {
|
|
1800
|
+
/** Whether one or multiple items can be expanded. */
|
|
1801
|
+
type: "multiple";
|
|
1802
|
+
/** Controlled expanded values. */
|
|
1803
|
+
value?: string[];
|
|
1804
|
+
/** Initially expanded item values — uncontrolled. */
|
|
1805
|
+
defaultValue?: string[];
|
|
1806
|
+
/** Callback when expanded state changes. */
|
|
1807
|
+
onValueChange?: (value: string[]) => void;
|
|
1808
|
+
};
|
|
1809
|
+
type AccordionGroupProps = HTMLAttributes14<HTMLDivElement> & {
|
|
1810
|
+
children: ReactNode14;
|
|
1811
|
+
/** Pins the group's rows to one step of the size ladder (default 36px,
|
|
1812
|
+
* compact 28px — see /docs/sizes). Omitted, they follow the surrounding
|
|
1813
|
+
* SizeProvider. */
|
|
1814
|
+
size?: SizeVariant;
|
|
1815
|
+
/** What an open item tints. "item" paints the row and its panel as one
|
|
1816
|
+
* block, and holds while it stays open. "trigger" scopes the fill to the
|
|
1817
|
+
* row and shows it on hover only, leaving the panel on the page's own
|
|
1818
|
+
* surface — the way a sidebar row highlights without colouring its
|
|
1819
|
+
* sub-tree. @default "item" */
|
|
1820
|
+
highlight?: "trigger" | "item";
|
|
1821
|
+
} & (AccordionGroupSingleProps | AccordionGroupMultipleProps);
|
|
1822
|
+
declare const AccordionGroup: ForwardRefExoticComponent6<AccordionGroupProps & RefAttributes6<HTMLDivElement>>;
|
|
1823
|
+
interface AccordionProps extends HTMLAttributes14<HTMLDivElement> {
|
|
1824
|
+
/** The accordion's items (`Accordion.Item`). */
|
|
1825
|
+
children: ReactNode14;
|
|
1826
|
+
/** Whether one or multiple items can be expanded. Defaults to `"single"`. */
|
|
1827
|
+
type?: "single" | "multiple";
|
|
1828
|
+
/** Allow collapsing all items when type is single. Defaults to `true` (Base UI's single mode is always collapsible). */
|
|
1829
|
+
collapsible?: boolean;
|
|
1830
|
+
/** Initially expanded item value(s) — uncontrolled. A string for `type="single"`, an array for `type="multiple"`. */
|
|
1831
|
+
defaultValue?: string | string[];
|
|
1832
|
+
/** Controlled expanded value(s). Pair with `onValueChange`. */
|
|
1833
|
+
value?: string | string[];
|
|
1834
|
+
/** Callback when expanded state changes. Receives a string in single mode, an array in multiple mode. */
|
|
1835
|
+
onValueChange?: ((value: string) => void) | ((value: string[]) => void);
|
|
1836
|
+
/** What an open item tints: `item` holds a block across the row and its panel, `trigger` scopes it to the row and shows it on hover. Same prop on `Accordion.Group` and on a standalone `Accordion.Item`. Defaults to `"item"`. */
|
|
1837
|
+
highlight?: "trigger" | "item";
|
|
1838
|
+
/** Pins the accordion's rows to one step of the size ladder (default 36px, compact 28px). Omitted, they follow the surrounding SizeProvider. */
|
|
1839
|
+
size?: SizeVariant;
|
|
1840
|
+
}
|
|
1841
|
+
type AccordionComponent = ForwardRefExoticComponent6<AccordionProps & RefAttributes6<HTMLDivElement>> & {
|
|
1842
|
+
Group: typeof AccordionGroup;
|
|
1843
|
+
Item: typeof AccordionItem;
|
|
1844
|
+
Trigger: typeof AccordionTrigger;
|
|
1845
|
+
Content: typeof AccordionContent;
|
|
1846
|
+
};
|
|
1847
|
+
/**
|
|
1848
|
+
* Collapsible sections with animated expand/collapse and fluid hover in
|
|
1849
|
+
* grouped mode.
|
|
1850
|
+
*
|
|
1851
|
+
* Accordion is the standalone form: every row carries its own hover fill.
|
|
1852
|
+
* Accordion.Group takes the same props and adds one magnetic highlight that
|
|
1853
|
+
* glides between rows, so give each item inside it an `index`. Built on Base
|
|
1854
|
+
* UI Accordion (WAI-ARIA wiring, keyboard navigation, focus management).
|
|
1855
|
+
* Uncontrolled through `defaultValue`, controlled through `value` +
|
|
1856
|
+
* `onValueChange`.
|
|
1857
|
+
*
|
|
1858
|
+
* The panel grows out of its row (see Morph): a shape drips from where the
|
|
1859
|
+
* row was pressed (its middle, from the keyboard), widens into the whole
|
|
1860
|
+
* item, and the content is revealed by a clip from the same shape. Under the
|
|
1861
|
+
* default `highlight="item"` that shape is the open tint, melted into the
|
|
1862
|
+
* row through a liquid goo neck; closing folds it back into the row. The
|
|
1863
|
+
* rows below ride the shape's bottom edge, so nothing jumps.
|
|
1864
|
+
*
|
|
1865
|
+
* Statics: Accordion.Group (the grouped root: type, collapsible,
|
|
1866
|
+
* defaultValue, value, onValueChange, highlight, size), Accordion.Item (value,
|
|
1867
|
+
* index, disabled), Accordion.Trigger (the row that toggles its item) and
|
|
1868
|
+
* Accordion.Content (the collapsible panel: `effect` — `'goo'` or a plain
|
|
1869
|
+
* `'morph'` — and the spring `tier`, `'slow'` or `'moderate'`).
|
|
1870
|
+
*
|
|
1871
|
+
* @example {@include ./examples.mdx}
|
|
1872
|
+
*/
|
|
1873
|
+
declare const Accordion: AccordionComponent;
|
|
1874
|
+
interface AccordionItemProps extends HTMLAttributes14<HTMLDivElement> {
|
|
1875
|
+
/** Unique identifier for this item. */
|
|
1876
|
+
value: string;
|
|
1877
|
+
/** Position index for fluid hover. Required inside `Accordion.Group`, omit for standalone. */
|
|
1878
|
+
index?: number;
|
|
1879
|
+
/** Whether this item is disabled. Defaults to `false`. */
|
|
1880
|
+
disabled?: boolean;
|
|
1881
|
+
/** Standalone equivalent of the group's prop: what an open item tints. Ignored inside a group, which decides for all its rows. Defaults to the standalone root's `highlight`, else `"item"`. */
|
|
1882
|
+
highlight?: "trigger" | "item";
|
|
1883
|
+
/** The item's `Accordion.Trigger` and `Accordion.Content`. */
|
|
1884
|
+
children: ReactNode14;
|
|
1885
|
+
}
|
|
1886
|
+
declare const AccordionItem: ForwardRefExoticComponent6<AccordionItemProps & RefAttributes6<HTMLDivElement>>;
|
|
1887
|
+
interface AccordionTriggerProps extends HTMLAttributes14<HTMLButtonElement> {
|
|
1888
|
+
/** Trigger label content. */
|
|
1889
|
+
children: ReactNode14;
|
|
1890
|
+
}
|
|
1891
|
+
declare const AccordionTrigger: ForwardRefExoticComponent6<AccordionTriggerProps & RefAttributes6<HTMLButtonElement>>;
|
|
1892
|
+
interface AccordionContentProps extends HTMLAttributes14<HTMLDivElement> {
|
|
1893
|
+
/** Collapsible content. */
|
|
1894
|
+
children: ReactNode14;
|
|
1895
|
+
/** How the panel grows out of its row (see Morph): `goo` melts the open tint out of the row through a liquid neck, `morph` grows it without one. Defaults to `'goo'`. */
|
|
1896
|
+
effect?: "goo" | "morph";
|
|
1897
|
+
/** Spring tier the panel opens on; it closes on the tier's faster exit tween. Defaults to `'slow'`. */
|
|
1898
|
+
tier?: "moderate" | "slow";
|
|
1899
|
+
}
|
|
1900
|
+
declare const AccordionContent: ForwardRefExoticComponent6<AccordionContentProps & RefAttributes6<HTMLDivElement>>;
|
|
1901
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent7, HTMLAttributes as HTMLAttributes17, ReactNode as ReactNode16, RefAttributes as RefAttributes7 } from "react";
|
|
1902
|
+
import { HTMLAttributes as HTMLAttributes15, MutableRefObject, ReactElement as ReactElement3 } from "react";
|
|
1903
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn10 } from "react";
|
|
1904
|
+
import { RefAttributes as RefAttributes_miuf5610 } from "react";
|
|
1905
|
+
declare const SIDEBAR_COOKIE_NAME = "sidebar_state";
|
|
1906
|
+
declare const SIDEBAR_COOKIE_MAX_AGE: number;
|
|
1907
|
+
declare const SIDEBAR_WIDTH = "16rem";
|
|
1908
|
+
declare const SIDEBAR_WIDTH_MOBILE = "18rem";
|
|
1909
|
+
/** Bare-key toggle defaults: "[" for a left sidebar, "]" for a right one.
|
|
1910
|
+
* Bare (no ⌘/Ctrl) so the browser's history shortcuts stay untouched. */
|
|
1911
|
+
declare const SIDEBAR_KEYBOARD_SHORTCUT = "[";
|
|
1912
|
+
declare const SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = "]";
|
|
1913
|
+
/** Drag-resize clamp for the built-in rail handle (px). */
|
|
1914
|
+
declare const SIDEBAR_MIN_WIDTH = 160;
|
|
1915
|
+
declare const SIDEBAR_MAX_WIDTH = 360;
|
|
1916
|
+
type SidebarSide = "left" | "right";
|
|
1917
|
+
type SidebarVariant = "sidebar" | "floating" | "inset";
|
|
1918
|
+
type SidebarCollapsible = "offcanvas" | "none";
|
|
1919
|
+
interface SidebarContextValue {
|
|
1920
|
+
/** What shows: expanded while kept open or open on hover. */
|
|
1921
|
+
state: "expanded" | "collapsed";
|
|
1922
|
+
/** Kept open. */
|
|
1923
|
+
open: boolean;
|
|
1924
|
+
setOpen: (open: boolean | ((prev: boolean) => boolean)) => void;
|
|
1925
|
+
openMobile: boolean;
|
|
1926
|
+
setOpenMobile: React.Dispatch<React.SetStateAction<boolean>>;
|
|
1927
|
+
isMobile: boolean;
|
|
1928
|
+
toggleSidebar: () => void;
|
|
1929
|
+
/** Live rail width — the rail's drag-resize updates it. */
|
|
1930
|
+
width: string;
|
|
1931
|
+
setWidth: (width: string) => void;
|
|
1932
|
+
widthMobile: string;
|
|
1933
|
+
mobileBreakpoint: number;
|
|
1934
|
+
/** Which edge the rendered Sidebar sits on (registered by <Sidebar/>). */
|
|
1935
|
+
side: SidebarSide;
|
|
1936
|
+
/** Internal: <Sidebar/> reports its side so the provider can resolve the
|
|
1937
|
+
* default shortcut and the rail can mirror. */
|
|
1938
|
+
registerSide: (side: SidebarSide) => void;
|
|
1939
|
+
/** The resolved toggle key ("[" / "]" / custom / null when disabled). */
|
|
1940
|
+
shortcut: string | null;
|
|
1941
|
+
/** The collapsed sidebar opens on hover (see the provider's prop). */
|
|
1942
|
+
openOnHover: boolean;
|
|
1943
|
+
/** True while the collapsed sidebar is open on hover. */
|
|
1944
|
+
hoverOpen: boolean;
|
|
1945
|
+
setHoverOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
1946
|
+
/** Internal: the shell and the triggers register their nodes; the hover
|
|
1947
|
+
* zone is measured off them. */
|
|
1948
|
+
shellRef: MutableRefObject<HTMLElement | null>;
|
|
1949
|
+
registerTrigger: (node: HTMLElement) => () => void;
|
|
1950
|
+
/** Internal: true while the rail is being drag-resized (disables the
|
|
1951
|
+
* width spring so the panel tracks the pointer 1:1). */
|
|
1952
|
+
isResizing: boolean;
|
|
1953
|
+
setIsResizing: React.Dispatch<React.SetStateAction<boolean>>;
|
|
1954
|
+
}
|
|
1955
|
+
declare function useSidebar(): SidebarContextValue;
|
|
1956
|
+
interface SidebarProviderProps extends HTMLAttributes15<HTMLDivElement> {
|
|
1957
|
+
defaultOpen?: boolean;
|
|
1958
|
+
open?: boolean;
|
|
1959
|
+
onOpenChange?: (open: boolean) => void;
|
|
1960
|
+
/** Persist the desktop open state to the `sidebar_state` cookie so a server
|
|
1961
|
+
* layout can read it back into `defaultOpen`. Mobile state never persists. */
|
|
1962
|
+
persist?: boolean;
|
|
1963
|
+
/** Bare-key toggle shortcut. Defaults to "[" for a left sidebar and "]"
|
|
1964
|
+
* for a right one; `null` disables it. */
|
|
1965
|
+
shortcut?: string | null;
|
|
1966
|
+
/** Viewport width (px) below which the sidebar renders as a drawer. */
|
|
1967
|
+
mobileBreakpoint?: number;
|
|
1968
|
+
/** While collapsed, open the sidebar when the pointer reaches its edge or
|
|
1969
|
+
* the trigger beside it, and close it a beat after the pointer leaves.
|
|
1970
|
+
* `open` then says whether it is kept open, and the trigger switches
|
|
1971
|
+
* between the two. Hovering never writes the cookie. @default false */
|
|
1972
|
+
openOnHover?: boolean;
|
|
1973
|
+
width?: string;
|
|
1974
|
+
widthMobile?: string;
|
|
1975
|
+
}
|
|
1976
|
+
declare const SidebarProvider: ForwardRefExoticComponent_tcubfn10<SidebarProviderProps & RefAttributes_miuf5610<HTMLDivElement>>;
|
|
1977
|
+
type SidebarTriggerProps = ButtonProps;
|
|
1978
|
+
/** Ghost icon button calling toggleSidebar(). The icon mirrors the
|
|
1979
|
+
* sidebar's side, and its tooltip names the action with the toggle
|
|
1980
|
+
* keystroke by default. With `openOnHover` it switches between open and on
|
|
1981
|
+
* hover (a dashed glyph), and the hover zone reaches its far side when it
|
|
1982
|
+
* sits beside the sidebar's edge. */
|
|
1983
|
+
declare const SidebarTrigger: ForwardRefExoticComponent_tcubfn10<ButtonProps & RefAttributes_miuf5610<HTMLButtonElement>>;
|
|
1984
|
+
interface SidebarRailProps extends HTMLAttributes15<HTMLButtonElement> {
|
|
1985
|
+
/** Pin the tooltip open/closed; `undefined` leaves it on hover. */
|
|
1986
|
+
tooltipOpen?: boolean;
|
|
1987
|
+
}
|
|
1988
|
+
/** The grab strip on the sidebar's inner edge, rendered by default inside
|
|
1989
|
+
* the desktop shell: drag it to resize (clamped), click it to collapse, and
|
|
1990
|
+
* its tooltip explains both with the toggle keystroke. Hovering it
|
|
1991
|
+
* brightens the edge border. */
|
|
1992
|
+
declare const SidebarRail: ForwardRefExoticComponent_tcubfn10<SidebarRailProps & RefAttributes_miuf5610<HTMLButtonElement>>;
|
|
1993
|
+
type SidebarInsetProps = HTMLAttributes15<HTMLElement>;
|
|
1994
|
+
declare const SidebarInset: ForwardRefExoticComponent_tcubfn10<SidebarInsetProps & RefAttributes_miuf5610<HTMLElement>>;
|
|
1995
|
+
type SidebarInputProps = React.InputHTMLAttributes<HTMLInputElement>;
|
|
1996
|
+
declare const SidebarInput: ForwardRefExoticComponent_tcubfn10<SidebarInputProps & RefAttributes_miuf5610<HTMLInputElement>>;
|
|
1997
|
+
type SidebarSectionProps = HTMLAttributes15<HTMLDivElement>;
|
|
1998
|
+
declare const SidebarHeader: ForwardRefExoticComponent_tcubfn10<SidebarSectionProps & RefAttributes_miuf5610<HTMLDivElement>>;
|
|
1999
|
+
declare const SidebarFooter: ForwardRefExoticComponent_tcubfn10<SidebarSectionProps & RefAttributes_miuf5610<HTMLDivElement>>;
|
|
2000
|
+
declare const SidebarSeparator: ForwardRefExoticComponent_tcubfn10<SidebarSectionProps & RefAttributes_miuf5610<HTMLDivElement>>;
|
|
2001
|
+
interface SidebarGroupProps extends SidebarSectionProps {
|
|
2002
|
+
/** Makes the group's SidebarGroupLabel a toggle that collapses everything
|
|
2003
|
+
* rendered after it — a group-level accordion. Uncontrolled by default;
|
|
2004
|
+
* pass `open`/`onOpenChange` to control it. */
|
|
2005
|
+
collapsible?: boolean;
|
|
2006
|
+
open?: boolean;
|
|
2007
|
+
defaultOpen?: boolean;
|
|
2008
|
+
onOpenChange?: (open: boolean) => void;
|
|
2009
|
+
}
|
|
2010
|
+
declare const SidebarGroup: ForwardRefExoticComponent_tcubfn10<SidebarGroupProps & RefAttributes_miuf5610<HTMLDivElement>>;
|
|
2011
|
+
interface SidebarGroupLabelProps extends HTMLAttributes15<HTMLDivElement> {
|
|
2012
|
+
render?: ReactElement3;
|
|
2013
|
+
asChild?: boolean;
|
|
2014
|
+
}
|
|
2015
|
+
declare const SidebarGroupLabel: ForwardRefExoticComponent_tcubfn10<SidebarGroupLabelProps & RefAttributes_miuf5610<HTMLDivElement>>;
|
|
2016
|
+
interface SidebarGroupActionProps extends HTMLAttributes15<HTMLButtonElement> {
|
|
2017
|
+
render?: ReactElement3;
|
|
2018
|
+
asChild?: boolean;
|
|
2019
|
+
}
|
|
2020
|
+
declare const SidebarGroupAction: ForwardRefExoticComponent_tcubfn10<SidebarGroupActionProps & RefAttributes_miuf5610<HTMLButtonElement>>;
|
|
2021
|
+
/** Header action cluster: 1–3 SidebarGroupActions laid out in a row over the
|
|
2022
|
+
* group label's right edge. Use instead of a lone SidebarGroupAction when a
|
|
2023
|
+
* section needs several controls. */
|
|
2024
|
+
type SidebarGroupActionsProps = HTMLAttributes15<HTMLDivElement>;
|
|
2025
|
+
declare const SidebarGroupActions: ForwardRefExoticComponent_tcubfn10<SidebarGroupActionsProps & RefAttributes_miuf5610<HTMLDivElement>>;
|
|
2026
|
+
declare const SidebarGroupContent: ForwardRefExoticComponent_tcubfn10<SidebarSectionProps & RefAttributes_miuf5610<HTMLDivElement>>;
|
|
2027
|
+
import { VariantProps as VariantProps5 } from "class-variance-authority";
|
|
2028
|
+
import { AnchorHTMLAttributes, ButtonHTMLAttributes as ButtonHTMLAttributes3, HTMLAttributes as HTMLAttributes16, LiHTMLAttributes, ReactElement as ReactElement4 } from "react";
|
|
2029
|
+
import { Context as Context_rri5bl2 } from "react";
|
|
2030
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn11 } from "react";
|
|
2031
|
+
import { RefAttributes as RefAttributes_miuf5611 } from "react";
|
|
2032
|
+
import { ClassProp as ClassProp_wz9o0r5 } from "class-variance-authority/types";
|
|
2033
|
+
/** The selection a `Sidebar` holds for buttons that carry a `value`. */
|
|
2034
|
+
interface SidebarSelectionValue {
|
|
2035
|
+
value: string | undefined;
|
|
2036
|
+
select: (value: string) => void;
|
|
2037
|
+
}
|
|
2038
|
+
declare const SidebarSelection: Context_rri5bl2<SidebarSelectionValue | null>;
|
|
2039
|
+
interface SidebarMenuProps extends HTMLAttributes16<HTMLUListElement> {
|
|
2040
|
+
/** Pins the menu's rows to one step of the size ladder. Omitted, they
|
|
2041
|
+
* follow the surrounding SizeProvider. */
|
|
2042
|
+
size?: SizeVariant;
|
|
2043
|
+
/** Draw the traveling keyboard focus ring. Off, keyboard focus moves the
|
|
2044
|
+
* hover background only. @default true */
|
|
2045
|
+
focusRing?: boolean;
|
|
2046
|
+
}
|
|
2047
|
+
declare const SidebarMenu: ForwardRefExoticComponent_tcubfn11<SidebarMenuProps & RefAttributes_miuf5611<HTMLUListElement>>;
|
|
2048
|
+
interface SidebarMenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
|
|
2049
|
+
/** The row folds a `SidebarMenuSub` under it: its button toggles the sub-menu and shows a chevron. */
|
|
2050
|
+
collapsible?: boolean;
|
|
2051
|
+
/** Controlled open state of a collapsible row's sub-menu. */
|
|
2052
|
+
open?: boolean;
|
|
2053
|
+
/** Initial open state of a collapsible row's sub-menu. */
|
|
2054
|
+
defaultOpen?: boolean;
|
|
2055
|
+
/** Called when a collapsible row opens or closes. */
|
|
2056
|
+
onOpenChange?: (open: boolean) => void;
|
|
2057
|
+
}
|
|
2058
|
+
declare const SidebarMenuItem: ForwardRefExoticComponent_tcubfn11<SidebarMenuItemProps & RefAttributes_miuf5611<HTMLLIElement>>;
|
|
2059
|
+
type SidebarMenuSubItemProps = LiHTMLAttributes<HTMLLIElement>;
|
|
2060
|
+
declare const SidebarMenuSubItem: ForwardRefExoticComponent_tcubfn11<SidebarMenuSubItemProps & RefAttributes_miuf5611<HTMLLIElement>>;
|
|
2061
|
+
declare const sidebarMenuButtonVariants: (props?: ({
|
|
2062
|
+
variant?: "default" | "outline" | null | undefined;
|
|
2063
|
+
} & ClassProp_wz9o0r5) | undefined) => string;
|
|
2064
|
+
interface SidebarMenuButtonProps extends ButtonHTMLAttributes3<HTMLButtonElement>, VariantProps5<typeof sidebarMenuButtonVariants> {
|
|
2065
|
+
isActive?: boolean;
|
|
2066
|
+
size?: "default" | "sm" | "lg";
|
|
2067
|
+
icon?: IconComponent;
|
|
2068
|
+
/** Semantic thread state for status-dot navigation. Drives the dot
|
|
2069
|
+
* visuals (`active`/`unread` → filled, `idle` → ring), stamps
|
|
2070
|
+
* `data-status` on the button, appends visually-hidden "unread" text for
|
|
2071
|
+
* screen readers, and `"active"` implies `isActive`. */
|
|
2072
|
+
status?: "active" | "unread" | "idle";
|
|
2073
|
+
/** Visual-only dot in the icon column — the escape hatch when the
|
|
2074
|
+
* semantic `status` vocabulary doesn't fit. Overrides the dot derived
|
|
2075
|
+
* from `status`. Ignored when `icon` is set. */
|
|
2076
|
+
dot?: "filled" | "ring";
|
|
2077
|
+
/** Selection key: the row is active while the surrounding `Sidebar`'s
|
|
2078
|
+
* `value` matches it, and pressing it selects it. With a `value`,
|
|
2079
|
+
* `status="active"` no longer implies the active row. */
|
|
2080
|
+
value?: string;
|
|
2081
|
+
render?: ReactElement4;
|
|
2082
|
+
asChild?: boolean;
|
|
2083
|
+
}
|
|
2084
|
+
declare const SidebarMenuButton: ForwardRefExoticComponent_tcubfn11<SidebarMenuButtonProps & RefAttributes_miuf5611<HTMLButtonElement>>;
|
|
2085
|
+
interface SidebarMenuActionProps extends ButtonHTMLAttributes3<HTMLButtonElement> {
|
|
2086
|
+
showOnHover?: boolean;
|
|
2087
|
+
render?: ReactElement4;
|
|
2088
|
+
asChild?: boolean;
|
|
2089
|
+
}
|
|
2090
|
+
declare const SidebarMenuAction: ForwardRefExoticComponent_tcubfn11<SidebarMenuActionProps & RefAttributes_miuf5611<HTMLButtonElement>>;
|
|
2091
|
+
interface SidebarMenuActionsProps extends HTMLAttributes16<HTMLDivElement> {
|
|
2092
|
+
/** Hide the cluster until the row is hovered or focused. */
|
|
2093
|
+
showOnHover?: boolean;
|
|
2094
|
+
}
|
|
2095
|
+
/** Row-level cluster for more than one SidebarMenuAction. It owns the
|
|
2096
|
+
* positioning and publishes the whole count to the row, so the button
|
|
2097
|
+
* reserves the exact gutter the cluster occupies. */
|
|
2098
|
+
declare const SidebarMenuActions: ForwardRefExoticComponent_tcubfn11<SidebarMenuActionsProps & RefAttributes_miuf5611<HTMLDivElement>>;
|
|
2099
|
+
type SidebarMenuBadgeProps = HTMLAttributes16<HTMLDivElement>;
|
|
2100
|
+
declare const SidebarMenuBadge: ForwardRefExoticComponent_tcubfn11<SidebarMenuBadgeProps & RefAttributes_miuf5611<HTMLDivElement>>;
|
|
2101
|
+
interface SidebarMenuSkeletonProps extends HTMLAttributes16<HTMLDivElement> {
|
|
2102
|
+
showIcon?: boolean;
|
|
2103
|
+
}
|
|
2104
|
+
declare const SidebarMenuSkeleton: ForwardRefExoticComponent_tcubfn11<SidebarMenuSkeletonProps & RefAttributes_miuf5611<HTMLDivElement>>;
|
|
2105
|
+
interface SidebarMenuSubProps extends HTMLAttributes16<HTMLUListElement> {
|
|
2106
|
+
/** Built-in measured-height collapse. Omitted, the sub-menu follows its
|
|
2107
|
+
* `collapsible` row's state, or stays visible without one. */
|
|
2108
|
+
open?: boolean;
|
|
2109
|
+
}
|
|
2110
|
+
declare const SidebarMenuSub: ForwardRefExoticComponent_tcubfn11<SidebarMenuSubProps & RefAttributes_miuf5611<HTMLUListElement>>;
|
|
2111
|
+
interface SidebarMenuSubButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
2112
|
+
isActive?: boolean;
|
|
2113
|
+
size?: "sm" | "md";
|
|
2114
|
+
icon?: IconComponent;
|
|
2115
|
+
/** Selection key, as on `SidebarMenuButton`. Without an `href` the row renders a button. */
|
|
2116
|
+
value?: string;
|
|
2117
|
+
render?: ReactElement4;
|
|
2118
|
+
asChild?: boolean;
|
|
2119
|
+
}
|
|
2120
|
+
declare const SidebarMenuSubButton: ForwardRefExoticComponent_tcubfn11<SidebarMenuSubButtonProps & RefAttributes_miuf5611<HTMLAnchorElement>>;
|
|
2121
|
+
interface SidebarProps extends Omit<HTMLAttributes17<HTMLDivElement>, "defaultValue" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration"> {
|
|
2122
|
+
/** The edge it sits on; the shortcut key and the rail mirror it. Defaults to `'left'`. */
|
|
2123
|
+
side?: "left" | "right";
|
|
2124
|
+
/** `'sidebar'` sits flush with an inner border, `'floating'` lifts it onto its own card one surface level up, `'inset'` makes the main region the card. Defaults to `'sidebar'`. */
|
|
2125
|
+
variant?: "sidebar" | "floating" | "inset";
|
|
2126
|
+
/** `'offcanvas'` collapses it away (rail, trigger, shortcut, open on hover, mobile drawer); `'none'` pins it open, with no rail or drawer — for a sidebar inside a dialog. Defaults to `'offcanvas'`. */
|
|
2127
|
+
collapsible?: "offcanvas" | "none";
|
|
2128
|
+
/** The `sidebar` variant's inner-edge border. Defaults to `true`. */
|
|
2129
|
+
bordered?: boolean;
|
|
2130
|
+
/** Render the built-in resize/collapse rail on the inner edge. Defaults to `true`. */
|
|
2131
|
+
rail?: boolean;
|
|
2132
|
+
/** Pin the rail's tooltip open (`true`) or closed (`false`); left out, it shows on hover. Dragging always hides it. */
|
|
2133
|
+
railTooltipOpen?: boolean;
|
|
2134
|
+
/** Controlled selection: the menu button or sub-button whose `value` matches is the active row. */
|
|
2135
|
+
value?: string;
|
|
2136
|
+
/** Initial selection, for an uncontrolled sidebar. */
|
|
2137
|
+
defaultValue?: string;
|
|
2138
|
+
/** Called with the `value` of the row that was pressed. */
|
|
2139
|
+
onValueChange?: (value: string) => void;
|
|
2140
|
+
/** Extra classes for the sidebar column (`h-full` pins it to a bounded frame). */
|
|
2141
|
+
className?: string;
|
|
2142
|
+
/** The sidebar's parts: `Sidebar.Header`, `Sidebar.Content`, `Sidebar.Footer`. */
|
|
2143
|
+
children?: ReactNode16;
|
|
2144
|
+
}
|
|
2145
|
+
type SidebarComponent = ForwardRefExoticComponent7<SidebarProps & RefAttributes7<HTMLDivElement>> & {
|
|
2146
|
+
Provider: typeof SidebarProvider;
|
|
2147
|
+
Trigger: typeof SidebarTrigger;
|
|
2148
|
+
Rail: typeof SidebarRail;
|
|
2149
|
+
Inset: typeof SidebarInset;
|
|
2150
|
+
Input: typeof SidebarInput;
|
|
2151
|
+
Header: typeof SidebarHeader;
|
|
2152
|
+
Content: typeof SidebarContent;
|
|
2153
|
+
Footer: typeof SidebarFooter;
|
|
2154
|
+
Separator: typeof SidebarSeparator;
|
|
2155
|
+
Group: typeof SidebarGroup;
|
|
2156
|
+
GroupLabel: typeof SidebarGroupLabel;
|
|
2157
|
+
GroupAction: typeof SidebarGroupAction;
|
|
2158
|
+
GroupActions: typeof SidebarGroupActions;
|
|
2159
|
+
GroupContent: typeof SidebarGroupContent;
|
|
2160
|
+
Menu: typeof SidebarMenu;
|
|
2161
|
+
MenuItem: typeof SidebarMenuItem;
|
|
2162
|
+
MenuButton: typeof SidebarMenuButton;
|
|
2163
|
+
MenuAction: typeof SidebarMenuAction;
|
|
2164
|
+
MenuActions: typeof SidebarMenuActions;
|
|
2165
|
+
MenuBadge: typeof SidebarMenuBadge;
|
|
2166
|
+
MenuSkeleton: typeof SidebarMenuSkeleton;
|
|
2167
|
+
MenuSub: typeof SidebarMenuSub;
|
|
2168
|
+
MenuSubItem: typeof SidebarMenuSubItem;
|
|
2169
|
+
MenuSubButton: typeof SidebarMenuSubButton;
|
|
2170
|
+
};
|
|
2171
|
+
/**
|
|
2172
|
+
* A sidebar built from composable parts. Drag its edge to resize, collapse it
|
|
2173
|
+
* away, and on mobile it becomes a drawer.
|
|
2174
|
+
*
|
|
2175
|
+
* Everything that moves here moves in the morph style (see Morph). The
|
|
2176
|
+
* active row and the hover highlight are liquid: a new selection melts
|
|
2177
|
+
* across from the old one, and the highlight drips from row to row, into a
|
|
2178
|
+
* row's sub-menu too. On mobile it is a `Sheet` growing out of its edge
|
|
2179
|
+
* that you swipe away. The menus in the header, the footer and on each row
|
|
2180
|
+
* are Dropdowns, and the tooltips are Tooltips, so they grow out of their
|
|
2181
|
+
* triggers too.
|
|
2182
|
+
*
|
|
2183
|
+
* Wrap the page in `Sidebar.Provider`, then put the `Sidebar` and a
|
|
2184
|
+
* `Sidebar.Inset` (the main region) inside it. The provider holds the open
|
|
2185
|
+
* state (`open` / `defaultOpen` / `onOpenChange`, kept in the `sidebar_state`
|
|
2186
|
+
* cookie unless `persist={false}`), the `width` and `widthMobile`, the
|
|
2187
|
+
* `mobileBreakpoint` under which it becomes a drawer, `openOnHover` (below)
|
|
2188
|
+
* and the bare `shortcut` key (`[` for a left sidebar,
|
|
2189
|
+
* `]` for a right one; `null` turns it off). It fills the viewport; pass
|
|
2190
|
+
* `className="h-full min-h-0"` to fill a bounded frame instead.
|
|
2191
|
+
*
|
|
2192
|
+
* Drag the rail on the inner edge to resize the sidebar (160–360px); throw
|
|
2193
|
+
* it at the edge to collapse, or click it. There is no icon-only rail on
|
|
2194
|
+
* purpose: a collapsed sidebar opens whole on hover instead.
|
|
2195
|
+
*
|
|
2196
|
+
* With `openOnHover`, collapsing leaves the sidebar on hover: it opens, in
|
|
2197
|
+
* flow, while the pointer is between its edge and the far side of a
|
|
2198
|
+
* `Sidebar.Trigger` beside it (or a thin strip at the edge), and closes a
|
|
2199
|
+
* beat after the pointer leaves. `open` is then whether it is kept open: the
|
|
2200
|
+
* trigger switches between the two and draws a dashed glyph while on hover,
|
|
2201
|
+
* and the rail collapses or resizes the hover without keeping it open.
|
|
2202
|
+
*
|
|
2203
|
+
* ## Rows
|
|
2204
|
+
*
|
|
2205
|
+
* - Two levels: `Sidebar.MenuButton` rows, each folding a
|
|
2206
|
+
* `Sidebar.MenuSub` of `Sidebar.MenuSubButton` rows. A
|
|
2207
|
+
* `Sidebar.MenuItem collapsible` toggles its sub-menu from its own button
|
|
2208
|
+
* and draws the chevron.
|
|
2209
|
+
* - Give a button a `value` and the sidebar's `value` / `defaultValue` picks
|
|
2210
|
+
* the active row; pressing a row selects it. `isActive` still forces a row
|
|
2211
|
+
* active.
|
|
2212
|
+
* - `icon` puts a glyph in the leading slot; `status` (`'active'`,
|
|
2213
|
+
* `'unread'`, `'idle'`) a thread's dot instead.
|
|
2214
|
+
* - `Sidebar.MenuBadge` keeps the rightmost slot; up to three
|
|
2215
|
+
* `Sidebar.MenuAction`s (in a `Sidebar.MenuActions` cluster) sit beside
|
|
2216
|
+
* it, `showOnHover` so the label keeps the room at rest.
|
|
2217
|
+
* - The rows share one fluid hover, one keyboard roving focus (arrows,
|
|
2218
|
+
* Home, End) and one focus ring across both levels.
|
|
2219
|
+
*
|
|
2220
|
+
* ## Sections
|
|
2221
|
+
*
|
|
2222
|
+
* `Sidebar.Group` with a `Sidebar.GroupLabel` is a section; `collapsible`
|
|
2223
|
+
* makes the label fold everything under it. `Sidebar.GroupActions` holds
|
|
2224
|
+
* its `Sidebar.GroupAction` buttons over the label's right edge.
|
|
2225
|
+
*
|
|
2226
|
+
* Statics:
|
|
2227
|
+
* - `Sidebar.Provider`, `Sidebar.Inset`, `Sidebar.Trigger` (the ghost icon
|
|
2228
|
+
* button with the shortcut in its tooltip), `Sidebar.Rail`.
|
|
2229
|
+
* - `Sidebar.Header`, `Sidebar.Content` (the scrolling region),
|
|
2230
|
+
* `Sidebar.Footer`, `Sidebar.Separator`, `Sidebar.Input`.
|
|
2231
|
+
* - `Sidebar.Group`, `Sidebar.GroupLabel`, `Sidebar.GroupAction`,
|
|
2232
|
+
* `Sidebar.GroupActions`, `Sidebar.GroupContent`.
|
|
2233
|
+
* - `Sidebar.Menu`, `Sidebar.MenuItem`, `Sidebar.MenuButton`,
|
|
2234
|
+
* `Sidebar.MenuAction`, `Sidebar.MenuActions`, `Sidebar.MenuBadge`,
|
|
2235
|
+
* `Sidebar.MenuSkeleton`, `Sidebar.MenuSub`, `Sidebar.MenuSubItem`,
|
|
2236
|
+
* `Sidebar.MenuSubButton`.
|
|
2237
|
+
* - `useSidebar()` (named export) reads the provider's state.
|
|
2238
|
+
*
|
|
2239
|
+
* @example {@include ./examples.mdx}
|
|
2240
|
+
*/
|
|
2241
|
+
declare const Sidebar: SidebarComponent;
|
|
2242
|
+
interface SidebarContentProps extends HTMLAttributes17<HTMLDivElement> {
|
|
2243
|
+
viewportClassName?: string;
|
|
2244
|
+
}
|
|
2245
|
+
declare const SidebarContent: ForwardRefExoticComponent7<SidebarContentProps & RefAttributes7<HTMLDivElement>>;
|
|
2246
|
+
import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
|
|
2247
|
+
import { ComponentPropsWithoutRef, ForwardRefExoticComponent as ForwardRefExoticComponent8, ReactNode as ReactNode17, RefAttributes as RefAttributes8 } from "react";
|
|
2248
|
+
import { TabsListProps as TabsListProps_6iqhkk } from "@base-ui/react";
|
|
2249
|
+
interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, "onValueChange" | "value" | "defaultValue" | "onSelect"> {
|
|
2250
|
+
/** Controlled active tab value. Takes precedence over selectedIndex. */
|
|
2251
|
+
value?: string;
|
|
2252
|
+
/** Called when the active tab changes. */
|
|
2253
|
+
onValueChange?: (value: string) => void;
|
|
2254
|
+
/** Index-based controlled alternative. */
|
|
2255
|
+
selectedIndex?: number;
|
|
2256
|
+
/** Called with the new index when the active tab changes. */
|
|
2257
|
+
onSelect?: (index: number) => void;
|
|
2258
|
+
/** Default active tab for uncontrolled usage. Defaults to the first tab. */
|
|
2259
|
+
defaultValue?: string;
|
|
2260
|
+
/** Index-based uncontrolled alternative: the tab active on first render. Ignored when `defaultValue` is set. */
|
|
2261
|
+
defaultSelectedIndex?: number;
|
|
2262
|
+
/** Pins the segmented control to one step of the size ladder (default 36px outer, compact 28px). Defaults to the surrounding SizeProvider. */
|
|
2263
|
+
size?: SizeVariant;
|
|
2264
|
+
/** Tabs.List and Tabs.Panel children. */
|
|
2265
|
+
children?: ReactNode17;
|
|
2266
|
+
}
|
|
2267
|
+
type TabsComponent = ForwardRefExoticComponent8<TabsProps & RefAttributes8<HTMLDivElement>> & {
|
|
2268
|
+
List: typeof TabsList;
|
|
2269
|
+
Item: typeof TabItem;
|
|
2270
|
+
Panel: typeof TabPanel;
|
|
2271
|
+
};
|
|
2272
|
+
/**
|
|
2273
|
+
* Segmented control tabs with sliding active indicator, fluid hover, and
|
|
2274
|
+
* spring animations.
|
|
2275
|
+
*
|
|
2276
|
+
* Built on Base UI Tabs: `Tabs` owns the selection, `Tabs.List` draws the
|
|
2277
|
+
* segmented track with an elevated indicator that melts toward the active tab
|
|
2278
|
+
* like a drop (lifted three surface levels above whatever it sits on; see the
|
|
2279
|
+
* liquid indicators in Morph) and a translucent hover pill that drips out of
|
|
2280
|
+
* it, and `Tabs.Panel` shows the content of the active tab. Arrow keys
|
|
2281
|
+
* move and activate. Select by value — `defaultValue` uncontrolled, `value` +
|
|
2282
|
+
* `onValueChange` controlled — or by index with `defaultSelectedIndex` /
|
|
2283
|
+
* `selectedIndex` + `onSelect`.
|
|
2284
|
+
*
|
|
2285
|
+
* Statics:
|
|
2286
|
+
* - `Tabs.List` — the segmented track holding the tabs.
|
|
2287
|
+
* - `Tabs.Item` — one tab: `value`, `label`, optional `icon`.
|
|
2288
|
+
* - `Tabs.Panel` — content shown while the tab with the same `value` is active.
|
|
2289
|
+
*
|
|
2290
|
+
* @example {@include ./examples.mdx}
|
|
2291
|
+
*/
|
|
2292
|
+
declare const Tabs: TabsComponent;
|
|
2293
|
+
type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
|
|
2294
|
+
declare const TabsList: ForwardRefExoticComponent8<Omit<Omit<TabsListProps_6iqhkk, "ref"> & RefAttributes8<HTMLDivElement>, "ref"> & RefAttributes8<HTMLDivElement>>;
|
|
2295
|
+
interface TabItemProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Tab> {
|
|
2296
|
+
value: string;
|
|
2297
|
+
icon?: IconComponent;
|
|
2298
|
+
label: string;
|
|
2299
|
+
/** @internal Auto-assigned by TabsList. */
|
|
2300
|
+
_index?: number;
|
|
2301
|
+
}
|
|
2302
|
+
declare const TabItem: ForwardRefExoticComponent8<TabItemProps & RefAttributes8<HTMLButtonElement>>;
|
|
2303
|
+
interface TabPanelProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Panel> {
|
|
2304
|
+
value: string;
|
|
2305
|
+
}
|
|
2306
|
+
declare const TabPanel: ForwardRefExoticComponent8<TabPanelProps & RefAttributes8<HTMLDivElement>>;
|
|
2307
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent9, HTMLAttributes as HTMLAttributes18, ReactNode as ReactNode18, RefAttributes as RefAttributes9 } from "react";
|
|
2308
|
+
interface TabsSubtleProps extends Omit<HTMLAttributes18<HTMLDivElement>, "onSelect"> {
|
|
2309
|
+
/** TabsSubtle.Item children, and optionally the TabsSubtle.Panel children they select. */
|
|
2310
|
+
children: ReactNode18;
|
|
2311
|
+
/** Index of the currently selected tab. Controlled — pair it with `onSelect`. */
|
|
2312
|
+
selectedIndex?: number;
|
|
2313
|
+
/** Selected tab on first render when uncontrolled. Defaults to `0`. */
|
|
2314
|
+
defaultSelectedIndex?: number;
|
|
2315
|
+
/** Called when a tab is selected. */
|
|
2316
|
+
onSelect?: (index: number) => void;
|
|
2317
|
+
/** Prefix for ARIA IDs linking tabs to panels. Defaults to a generated one when panels are nested inside. */
|
|
2318
|
+
idPrefix?: string;
|
|
2319
|
+
/** When true, only the selected tab shows its text label. Requires icons on tabs. Defaults to `false`. */
|
|
2320
|
+
activeLabel?: boolean;
|
|
2321
|
+
/** Pins the tabs to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
|
|
2322
|
+
size?: SizeVariant;
|
|
2323
|
+
}
|
|
2324
|
+
type TabsSubtleComponent = ForwardRefExoticComponent9<TabsSubtleProps & RefAttributes9<HTMLDivElement>> & {
|
|
2325
|
+
Item: typeof TabsSubtleItem;
|
|
2326
|
+
Panel: typeof TabsSubtlePanel;
|
|
2327
|
+
};
|
|
2328
|
+
/**
|
|
2329
|
+
* Tab navigation with smooth pill animations.
|
|
2330
|
+
*
|
|
2331
|
+
* A borderless tab strip: the selected pill melts from tab to tab like a drop
|
|
2332
|
+
* (the liquid indicators in Morph), a lighter hover pill previews the next one, and the active label animates to semibold
|
|
2333
|
+
* without shifting. With `activeLabel`, tabs collapse to their icon and the
|
|
2334
|
+
* selected one expands its label to a measured width. Base UI owns
|
|
2335
|
+
* `role="tablist"`, the roving tabindex and Arrow/Home/End navigation
|
|
2336
|
+
* (manual activation — arrows move, Enter or Space selects). Uncontrolled with
|
|
2337
|
+
* `defaultSelectedIndex`, or controlled with `selectedIndex` + `onSelect`.
|
|
2338
|
+
*
|
|
2339
|
+
* The root element is the tab list itself, so nested `TabsSubtle.Panel`
|
|
2340
|
+
* children are lifted out and rendered as its siblings, wired to the tabs
|
|
2341
|
+
* through a generated id prefix; panels rendered outside still take
|
|
2342
|
+
* `selectedIndex` and `idPrefix` as props.
|
|
2343
|
+
*
|
|
2344
|
+
* Statics:
|
|
2345
|
+
* - `TabsSubtle.Item` — one tab: `index`, `label`, optional `icon`.
|
|
2346
|
+
* - `TabsSubtle.Panel` — content for the tab with the same `index`.
|
|
2347
|
+
*
|
|
2348
|
+
* @example {@include ./examples.mdx}
|
|
2349
|
+
*/
|
|
2350
|
+
declare const TabsSubtle: TabsSubtleComponent;
|
|
2351
|
+
interface TabsSubtleItemProps extends HTMLAttributes18<HTMLButtonElement> {
|
|
2352
|
+
/** Icon displayed in the tab. */
|
|
2353
|
+
icon?: IconComponent;
|
|
2354
|
+
/** Text label for the tab. */
|
|
2355
|
+
label: string;
|
|
2356
|
+
/** Position index within the tab list. */
|
|
2357
|
+
index: number;
|
|
2358
|
+
}
|
|
2359
|
+
declare const TabsSubtleItem: ForwardRefExoticComponent9<TabsSubtleItemProps & RefAttributes9<HTMLButtonElement>>;
|
|
2360
|
+
interface TabsSubtlePanelProps extends HTMLAttributes18<HTMLDivElement> {
|
|
2361
|
+
/** Index of this panel; rendered only when it matches the selected tab. */
|
|
2362
|
+
index: number;
|
|
2363
|
+
/** Currently selected tab index. Defaults to the enclosing TabsSubtle's selection. */
|
|
2364
|
+
selectedIndex?: number;
|
|
2365
|
+
/** Must match the TabsSubtle idPrefix. Defaults to the enclosing TabsSubtle's prefix. */
|
|
2366
|
+
idPrefix?: string;
|
|
2367
|
+
/** Panel content, only rendered when selected. */
|
|
2368
|
+
children: ReactNode18;
|
|
2369
|
+
}
|
|
2370
|
+
declare const TabsSubtlePanel: ForwardRefExoticComponent9<TabsSubtlePanelProps & RefAttributes9<HTMLDivElement>>;
|
|
2371
|
+
import { HTMLAttributes as HTMLAttributes19, ReactNode as ReactNode19, RefObject as RefObject11 } from "react";
|
|
2372
|
+
/** What opened the overlay: the pressed trigger and the press point. */
|
|
2373
|
+
interface MorphOrigin {
|
|
2374
|
+
trigger?: HTMLElement;
|
|
2375
|
+
point?: {
|
|
2376
|
+
x: number;
|
|
2377
|
+
y: number;
|
|
2378
|
+
};
|
|
2379
|
+
}
|
|
2380
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn12 } from "react";
|
|
2381
|
+
import { RefAttributes as RefAttributes_miuf5612 } from "react";
|
|
2382
|
+
import { JSX as JSX_1kxb16 } from "react";
|
|
2383
|
+
type DialogSlotProps = SlotProps;
|
|
2384
|
+
/** The open state and origin `DialogState` provides, for content built on another Base UI popup (Sheet). */
|
|
2385
|
+
declare const useDialogState: () => {
|
|
2386
|
+
open: boolean;
|
|
2387
|
+
origin: RefObject11<MorphOrigin>;
|
|
2388
|
+
};
|
|
2389
|
+
declare const DialogTrigger: ForwardRefExoticComponent_tcubfn12<SlotProps & RefAttributes_miuf5612<HTMLButtonElement>>;
|
|
2390
|
+
declare const DialogClose: ForwardRefExoticComponent_tcubfn12<SlotProps & RefAttributes_miuf5612<HTMLButtonElement>>;
|
|
2391
|
+
interface DialogContentProps extends HTMLAttributes19<HTMLDivElement> {
|
|
2392
|
+
/** Width: 400, 540, or 880. Compact regions narrow each by 1 notch: 360,
|
|
2393
|
+
* 480, 800. `xl` is the canvas for composed layouts — a sidebar beside a
|
|
2394
|
+
* panel — which usually pair it with `className="p-0"` and a fixed
|
|
2395
|
+
* height. Defaults to `"sm"`. */
|
|
2396
|
+
size?: "sm" | "lg" | "xl";
|
|
2397
|
+
/** Portal target. When set, the overlay and panel render inside this element
|
|
2398
|
+
* (positioned `absolute`) instead of covering the viewport (`fixed`). Pair
|
|
2399
|
+
* with a `position: relative; overflow: hidden` container — and usually
|
|
2400
|
+
* `<Dialog modal={false}>` — to scope a dialog to a bounded region, e.g. a
|
|
2401
|
+
* docs preview. Defaults to the document body / full-viewport behaviour. */
|
|
2402
|
+
container?: HTMLElement | null;
|
|
2403
|
+
/** The ✕ in the top-right corner. Drop it when the content has its own
|
|
2404
|
+
* way out, e.g. a command menu that closes on Escape and on a pick.
|
|
2405
|
+
* Defaults to `true`. */
|
|
2406
|
+
showCloseButton?: boolean;
|
|
2407
|
+
/** Where the panel sits: centered, or anchored 12dvh from the top so a
|
|
2408
|
+
* panel whose height follows its content (a command menu) keeps its top
|
|
2409
|
+
* edge still. Defaults to `"center"`. */
|
|
2410
|
+
position?: "center" | "top";
|
|
2411
|
+
/** Where the panel grows from (see Morph): the pressed trigger (its center when none), the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
2412
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject11<HTMLElement | null>;
|
|
2413
|
+
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
2414
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
2415
|
+
/** Hide the trigger while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
2416
|
+
hideSource?: boolean;
|
|
2417
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
|
|
2418
|
+
tier?: "moderate" | "slow";
|
|
2419
|
+
/** Dialog content. Everything inside reads the dialog's surface level as its substrate. */
|
|
2420
|
+
children?: ReactNode19;
|
|
2421
|
+
}
|
|
2422
|
+
declare const DialogContent: ForwardRefExoticComponent_tcubfn12<DialogContentProps & RefAttributes_miuf5612<HTMLDivElement>>;
|
|
2423
|
+
type Element_12xgc16 = JSX_1kxb16["Element"];
|
|
2424
|
+
declare function DialogHeader({ className,...props }: HTMLAttributes19<HTMLDivElement>): Element_12xgc16;
|
|
2425
|
+
declare function DialogFooter({ className,...props }: HTMLAttributes19<HTMLDivElement>): Element_12xgc16;
|
|
2426
|
+
declare const DialogTitle: ForwardRefExoticComponent_tcubfn12<HTMLAttributes19<HTMLHeadingElement> & RefAttributes_miuf5612<HTMLHeadingElement>>;
|
|
2427
|
+
declare const DialogDescription: ForwardRefExoticComponent_tcubfn12<HTMLAttributes19<HTMLParagraphElement> & RefAttributes_miuf5612<HTMLParagraphElement>>;
|
|
2428
|
+
interface DialogStateProps {
|
|
2429
|
+
open?: boolean;
|
|
2430
|
+
defaultOpen?: boolean;
|
|
2431
|
+
onOpenChange?: (open: boolean) => void;
|
|
2432
|
+
children: (root: {
|
|
2433
|
+
open: boolean;
|
|
2434
|
+
onOpenChange: (next: boolean, details: {
|
|
2435
|
+
trigger?: Element;
|
|
2436
|
+
event?: Event;
|
|
2437
|
+
}) => void;
|
|
2438
|
+
}) => ReactNode19;
|
|
2439
|
+
}
|
|
2440
|
+
/**
|
|
2441
|
+
* A dialog's open state, held here (not in Base UI's Root) because the morph
|
|
2442
|
+
* reads it, and the open event tells it which trigger was pressed. Also
|
|
2443
|
+
* scopes `Morph.Part` pairs. AlertDialog shares it.
|
|
2444
|
+
*/
|
|
2445
|
+
declare function DialogState({ open, defaultOpen, onOpenChange, children }: DialogStateProps): Element_12xgc16;
|
|
2446
|
+
interface DialogProps {
|
|
2447
|
+
/** Controlled open state. */
|
|
2448
|
+
open?: boolean;
|
|
2449
|
+
/** Initial open state, for an uncontrolled dialog. Defaults to `false`. */
|
|
2450
|
+
defaultOpen?: boolean;
|
|
2451
|
+
/** Called when the dialog opens or closes. */
|
|
2452
|
+
onOpenChange?: (open: boolean) => void;
|
|
2453
|
+
/** Traps focus and locks page scroll while open. Defaults to `true`. */
|
|
2454
|
+
modal?: boolean;
|
|
2455
|
+
/** The trigger and the content — `Dialog.Trigger` plus a `Dialog.Content`. */
|
|
2456
|
+
children?: ReactNode19;
|
|
2457
|
+
}
|
|
2458
|
+
/**
|
|
2459
|
+
* 3 widths, grown out of whatever opened them.
|
|
2460
|
+
*
|
|
2461
|
+
* The panel lifts 4 surface levels off whatever substrate it opens on and
|
|
2462
|
+
* re-provides that level, so a dropdown or select inside it keeps climbing
|
|
2463
|
+
* the ladder instead of melting into the dialog. Width comes from
|
|
2464
|
+
* `Dialog.Content`'s `size` — 400, 540 or 880, each one notch narrower in
|
|
2465
|
+
* compact regions. The panel grows out of its trigger through the shared
|
|
2466
|
+
* morph (see Morph): goo by default on `spring.goo`, or from the press
|
|
2467
|
+
* point, its own center, a viewport edge or any element, and the backdrop
|
|
2468
|
+
* fades with it. `Morph.Part` pairs an element in the trigger with its twin
|
|
2469
|
+
* in the panel, so a card's image or title flies into the dialog.
|
|
2470
|
+
* `position="top"` anchors the panel 12dvh down so a content-sized panel (a
|
|
2471
|
+
* command menu) keeps its top edge still. Built on Base UI's Dialog: open
|
|
2472
|
+
* state is controlled with `open` / `onOpenChange` or left to `defaultOpen`.
|
|
2473
|
+
*
|
|
2474
|
+
* Statics:
|
|
2475
|
+
* - `Dialog.Trigger` — the control that opens it. `render={<Button/>}` or
|
|
2476
|
+
* Radix-style `asChild` with a single child both work.
|
|
2477
|
+
* - `Dialog.Content` — the panel: `size`, `position`, `showCloseButton`,
|
|
2478
|
+
* `container`, and the morph options `from`, `effect`, `hideSource`,
|
|
2479
|
+
* `tier`.
|
|
2480
|
+
* - `Dialog.Header` / `Dialog.Footer` — the stacked title block, and the
|
|
2481
|
+
* right-aligned action row.
|
|
2482
|
+
* - `Dialog.Title` / `Dialog.Description` — the labelled heading and its
|
|
2483
|
+
* supporting line, wired to the panel for screen readers.
|
|
2484
|
+
* - `Dialog.Close` — dismisses it; same `render` / `asChild` shape as the
|
|
2485
|
+
* trigger. `Dialog.Content` renders its own ✕ unless
|
|
2486
|
+
* `showCloseButton={false}`.
|
|
2487
|
+
*
|
|
2488
|
+
* @example {@include ./examples.mdx}
|
|
2489
|
+
*/
|
|
2490
|
+
declare function Dialog({ children, open, defaultOpen, onOpenChange, modal }: DialogProps): Element_12xgc16;
|
|
2491
|
+
import { ReactNode as ReactNode20 } from "react";
|
|
2492
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn13 } from "react";
|
|
2493
|
+
import { RefAttributes as RefAttributes_miuf5613 } from "react";
|
|
2494
|
+
import { JSX as JSX_1kxb17 } from "react";
|
|
2495
|
+
declare const AlertDialogContent: ForwardRefExoticComponent_tcubfn13<DialogContentProps & RefAttributes_miuf5613<HTMLDivElement>>;
|
|
2496
|
+
interface AlertDialogProps {
|
|
2497
|
+
/** Controlled open state. */
|
|
2498
|
+
open?: boolean;
|
|
2499
|
+
/** Initial open state, for an uncontrolled alert dialog. Defaults to `false`. */
|
|
2500
|
+
defaultOpen?: boolean;
|
|
2501
|
+
/** Called when the dialog opens or closes. */
|
|
2502
|
+
onOpenChange?: (open: boolean) => void;
|
|
2503
|
+
/** The trigger and the content — `AlertDialog.Trigger` plus an `AlertDialog.Content`. */
|
|
2504
|
+
children?: ReactNode20;
|
|
2505
|
+
}
|
|
2506
|
+
type Element_12xgc17 = JSX_1kxb17["Element"];
|
|
2507
|
+
/**
|
|
2508
|
+
* A dialog that asks before something happens and waits for an answer.
|
|
2509
|
+
*
|
|
2510
|
+
* It is always modal, and a press outside does not close it: only its own
|
|
2511
|
+
* actions (and Escape) do, so a destructive step is never confirmed or
|
|
2512
|
+
* skipped by accident. Screen readers announce it as an alert. Everything
|
|
2513
|
+
* else is Dialog's: the panel grows out of its trigger with the goo neck by
|
|
2514
|
+
* default (see Morph), takes the same `size`, `position` and morph options,
|
|
2515
|
+
* and lifts 4 surface levels. Unlike Dialog it has no ✕ unless
|
|
2516
|
+
* `showCloseButton` asks for one.
|
|
2517
|
+
*
|
|
2518
|
+
* Statics: the same parts as Dialog — `AlertDialog.Trigger`,
|
|
2519
|
+
* `AlertDialog.Content`, `AlertDialog.Header`, `AlertDialog.Footer`,
|
|
2520
|
+
* `AlertDialog.Title`, `AlertDialog.Description` and `AlertDialog.Close`.
|
|
2521
|
+
*
|
|
2522
|
+
* @example {@include ./examples.mdx}
|
|
2523
|
+
*/
|
|
2524
|
+
declare function AlertDialog({ children, open, defaultOpen, onOpenChange }: AlertDialogProps): Element_12xgc17;
|
|
2525
|
+
import { ReactNode as ReactNode22, RefObject as RefObject12 } from "react";
|
|
2526
|
+
import { HTMLAttributes as HTMLAttributes20, ReactElement as ReactElement5, ReactNode as ReactNode21 } from "react";
|
|
2527
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn14 } from "react";
|
|
2528
|
+
import { RefAttributes as RefAttributes_miuf5614 } from "react";
|
|
2529
|
+
/** What MenuItem hands to the popup's primitive wrapper. `element` is the
|
|
2530
|
+
* styled row div (visuals + fluid hover registration, no children); `children`
|
|
2531
|
+
* is the row content (icon, label, check). The dropdown wraps them in its
|
|
2532
|
+
* own Item / RadioItem primitive, so MenuItem itself stays primitive-free. */
|
|
2533
|
+
interface MenuItemRenderOptions {
|
|
2534
|
+
/** Radio-style option (boolean `checked` on MenuItem) vs plain action item. */
|
|
2535
|
+
radio: boolean;
|
|
2536
|
+
/** Checkbox-style option: a boolean `checked` inside a multiple-selection
|
|
2537
|
+
* dropdown (`checkedIndices`). Takes precedence over `radio`. */
|
|
2538
|
+
checkbox: boolean;
|
|
2539
|
+
/** The item's checked state (radio and checkbox items). */
|
|
2540
|
+
checked?: boolean;
|
|
2541
|
+
/** The item's index — doubles as the radio value. */
|
|
2542
|
+
value: number;
|
|
2543
|
+
disabled?: boolean;
|
|
2544
|
+
label: string;
|
|
2545
|
+
closeOnClick: boolean;
|
|
2546
|
+
/** The row's activation. It goes on the primitive, not on `element`: Base
|
|
2547
|
+
* UI's Enter/Space activation calls the primitive's own `onClick` prop and
|
|
2548
|
+
* never sees a handler on the render element. */
|
|
2549
|
+
onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
2550
|
+
element: ReactElement5;
|
|
2551
|
+
children: ReactNode21;
|
|
2552
|
+
}
|
|
2553
|
+
interface DropdownContextValue {
|
|
2554
|
+
registerItem: (index: number, element: HTMLElement | null) => void;
|
|
2555
|
+
activeIndex: number | null;
|
|
2556
|
+
checkedIndex?: number;
|
|
2557
|
+
/** Multiple selection (`checkedIndices` on the dropdown): rows are
|
|
2558
|
+
* checkbox items and activating one keeps the menu open by default. */
|
|
2559
|
+
multiple?: boolean;
|
|
2560
|
+
checkedIndices?: number[];
|
|
2561
|
+
/** True when items render inside a Menu popup (DropdownContent), where the
|
|
2562
|
+
* primitive's Item / RadioItem own roles, roving highlight, typeahead,
|
|
2563
|
+
* and activation. MenuItem switches its rendering accordingly. */
|
|
2564
|
+
inMenu?: boolean;
|
|
2565
|
+
/** Popup-only: wraps a MenuItem's styled div in the dropdown's menu-item
|
|
2566
|
+
* primitive. Absent in the inline Dropdown panel, where MenuItem renders
|
|
2567
|
+
* its own ARIA menuitem div. */
|
|
2568
|
+
renderMenuItem?: (opts: MenuItemRenderOptions) => ReactElement5;
|
|
2569
|
+
/** Local addition. The panel owns its selection (`defaultCheckedIndex` /
|
|
2570
|
+
* `defaultCheckedIndices`), so a row with no `checked` prop takes its
|
|
2571
|
+
* checked state from `checkedIndex` / `checkedIndices` and toggles the
|
|
2572
|
+
* panel on activation. */
|
|
2573
|
+
selfManaged?: boolean;
|
|
2574
|
+
/** Local addition. Toggles the row at an AUTHORED index (see
|
|
2575
|
+
* `sourceIndex`). Present with `selfManaged`. */
|
|
2576
|
+
toggleIndex?: (sourceIndex: number) => void;
|
|
2577
|
+
}
|
|
2578
|
+
declare function useDropdown(): DropdownContextValue;
|
|
2579
|
+
/** Null-safe context read for callers that render outside a provider. */
|
|
2580
|
+
declare function useDropdownMaybe(): DropdownContextValue | null;
|
|
2581
|
+
interface MenuItemProps extends HTMLAttributes20<HTMLDivElement> {
|
|
2582
|
+
/** Optional leading icon. When omitted, the row renders text-only with no
|
|
2583
|
+
* reserved icon column. */
|
|
2584
|
+
icon?: IconComponent;
|
|
2585
|
+
label: string;
|
|
2586
|
+
index: number;
|
|
2587
|
+
/** When a boolean, the item is a radio-style option (role="menuitemradio"
|
|
2588
|
+
* with aria-checked). When undefined, it is a plain action item
|
|
2589
|
+
* (role="menuitem"), unless the panel owns the selection — then the row
|
|
2590
|
+
* reads its checked state off the panel and toggles it on activation. */
|
|
2591
|
+
checked?: boolean;
|
|
2592
|
+
onSelect?: () => void;
|
|
2593
|
+
disabled?: boolean;
|
|
2594
|
+
/** Popup-only (inside DropdownContent): whether activating the item closes
|
|
2595
|
+
* the menu. Ignored in the inline Dropdown panel. @default true */
|
|
2596
|
+
closeOnClick?: boolean;
|
|
2597
|
+
/** Internal: the row's authored index, stamped by a filtering panel that
|
|
2598
|
+
* re-indexed the visible rows. Selection is keyed on it. */
|
|
2599
|
+
sourceIndex?: number;
|
|
2600
|
+
}
|
|
2601
|
+
declare const MenuItem2: ForwardRefExoticComponent_tcubfn14<MenuItemProps & RefAttributes_miuf5614<HTMLDivElement>>;
|
|
2602
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn15 } from "react";
|
|
2603
|
+
import { RefAttributes as RefAttributes_miuf5615 } from "react";
|
|
2604
|
+
import { JSX as JSX_1kxb18 } from "react";
|
|
2605
|
+
interface ContextMenuItemProps extends MenuItemProps {
|
|
2606
|
+
/** Keyboard shortcut shown at the row's end, e.g. `⌘C`. */
|
|
2607
|
+
shortcut?: string;
|
|
2608
|
+
}
|
|
2609
|
+
declare const ContextMenuItem: ForwardRefExoticComponent_tcubfn15<ContextMenuItemProps & RefAttributes_miuf5615<HTMLDivElement>>;
|
|
2610
|
+
interface ContextMenuContentProps {
|
|
2611
|
+
/** Where the menu grows from (see Morph): the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'pointer'`. */
|
|
2612
|
+
from?: "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject12<HTMLElement | null>;
|
|
2613
|
+
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
2614
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
2615
|
+
/** Hide the `from` element while open, so it reads as turning into the menu. Defaults to `false`. */
|
|
2616
|
+
hideSource?: boolean;
|
|
2617
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
|
|
2618
|
+
tier?: "moderate" | "slow";
|
|
2619
|
+
/** Portal target. Defaults to the document body. */
|
|
2620
|
+
container?: HTMLElement | null;
|
|
2621
|
+
/** Extra classes for the menu surface — it is 14rem wide by default. */
|
|
2622
|
+
className?: string;
|
|
2623
|
+
/** `ContextMenu.Item` rows, plus `ContextMenu.Label` and `ContextMenu.Separator`. */
|
|
2624
|
+
children?: ReactNode22;
|
|
2625
|
+
}
|
|
2626
|
+
declare const ContextMenuContent: ForwardRefExoticComponent_tcubfn15<ContextMenuContentProps & RefAttributes_miuf5615<HTMLDivElement>>;
|
|
2627
|
+
interface ContextMenuProps {
|
|
2628
|
+
/** Controlled open state. Pair with `onOpenChange`. */
|
|
2629
|
+
open?: boolean;
|
|
2630
|
+
/** Initial open state, for an uncontrolled menu. Defaults to `false`. */
|
|
2631
|
+
defaultOpen?: boolean;
|
|
2632
|
+
/** Called when the menu opens or closes. */
|
|
2633
|
+
onOpenChange?: (open: boolean) => void;
|
|
2634
|
+
/** Turns the trigger area back into a plain one: no menu on right click or long press. Defaults to `false`. */
|
|
2635
|
+
disabled?: boolean;
|
|
2636
|
+
/** Pins the rows to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, they follow the surrounding SizeProvider. */
|
|
2637
|
+
size?: SizeVariant;
|
|
2638
|
+
/** The area and the menu — `ContextMenu.Trigger` plus a `ContextMenu.Content`. */
|
|
2639
|
+
children?: ReactNode22;
|
|
2640
|
+
}
|
|
2641
|
+
type Element_12xgc18 = JSX_1kxb18["Element"];
|
|
2642
|
+
/**
|
|
2643
|
+
* A menu that grows out of the pointer on right click, or on a long press on
|
|
2644
|
+
* touch: the surface swells from the exact point you pressed into the menu.
|
|
2645
|
+
*
|
|
2646
|
+
* The morph comes from the shared engine (see Morph): from the press point
|
|
2647
|
+
* by default, or from its own center, a viewport edge or any element, with
|
|
2648
|
+
* the goo, a plain morph, a slide or a fade. The rows are Dropdown's — the
|
|
2649
|
+
* fluid hover background gliding between them, icons that firm up under it,
|
|
2650
|
+
* dimmed disabled rows the pointer skips — plus a keyboard shortcut at the
|
|
2651
|
+
* end of a row. The menu lifts 2 surface levels off its substrate. Built on
|
|
2652
|
+
* Base UI's ContextMenu: it opens at the pointer and flips or shifts to stay
|
|
2653
|
+
* on screen, arrow keys and typeahead move between rows, and picking a row,
|
|
2654
|
+
* Escape or an outside press closes it.
|
|
2655
|
+
*
|
|
2656
|
+
* Statics:
|
|
2657
|
+
* - `ContextMenu.Trigger` — the area that opens it (a `div`).
|
|
2658
|
+
* - `ContextMenu.Content` — the menu: the morph options `from`, `effect`,
|
|
2659
|
+
* `hideSource`, `tier`.
|
|
2660
|
+
* - `ContextMenu.Item` — a row: `index`, `label`, `icon`, `shortcut`,
|
|
2661
|
+
* `onSelect`, `disabled`.
|
|
2662
|
+
* - `ContextMenu.Label` / `ContextMenu.Separator` — a caption over a run of
|
|
2663
|
+
* rows and a rule between runs (Dropdown's).
|
|
2664
|
+
*
|
|
2665
|
+
* @example {@include ./examples.mdx}
|
|
2666
|
+
*/
|
|
2667
|
+
declare function ContextMenu({ open, defaultOpen, onOpenChange, disabled, size, children }: ContextMenuProps): Element_12xgc18;
|
|
2668
|
+
import { MenuTriggerProps } from "@base-ui/react/menu";
|
|
2669
|
+
import { Menu as Menu2 } from "@base-ui/react/menu";
|
|
2670
|
+
import { ComponentProps, ForwardRefExoticComponent as ForwardRefExoticComponent10, HTMLAttributes as HTMLAttributes22, ReactNode as ReactNode23, RefAttributes as RefAttributes10, RefObject as RefObject14 } from "react";
|
|
2671
|
+
import { HTMLAttributes as HTMLAttributes21, InputHTMLAttributes as InputHTMLAttributes4 } from "react";
|
|
2672
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn16 } from "react";
|
|
2673
|
+
import { RefAttributes as RefAttributes_miuf5616 } from "react";
|
|
2674
|
+
interface DropdownSearchProps extends Omit<InputHTMLAttributes4<HTMLInputElement>, "value" | "onChange" | "size" | "defaultValue"> {
|
|
2675
|
+
/** The query. Filter the MenuItems you render against it. Optional under `filter`, where the panel holds the query. */
|
|
2676
|
+
value?: string;
|
|
2677
|
+
/** Called on every keystroke, and with `""` on close (see `clearOnClose`). Optional under `filter`. */
|
|
2678
|
+
onValueChange?: (value: string) => void;
|
|
2679
|
+
/** Local addition. Let the surrounding panel hold the query and filter its own `Dropdown.Item` rows by `label`, re-indexing the survivors and showing `Dropdown.Empty` when none match. Defaults to `false`. */
|
|
2680
|
+
filter?: boolean;
|
|
2681
|
+
/** Placeholder text. Defaults to `"Search…"`. */
|
|
2682
|
+
placeholder?: string;
|
|
2683
|
+
/** Reset the query to "" when the popup closes (the field unmounts with
|
|
2684
|
+
* it), so the menu reopens unfiltered. @default true */
|
|
2685
|
+
clearOnClose?: boolean;
|
|
2686
|
+
/** Take focus when the popup opens. @default true */
|
|
2687
|
+
autoFocus?: boolean;
|
|
2688
|
+
}
|
|
2689
|
+
declare const DropdownSearch: ForwardRefExoticComponent_tcubfn16<DropdownSearchProps & RefAttributes_miuf5616<HTMLInputElement>>;
|
|
2690
|
+
declare const DropdownEmpty: ForwardRefExoticComponent_tcubfn16<HTMLAttributes21<HTMLDivElement> & RefAttributes_miuf5616<HTMLDivElement>>;
|
|
2691
|
+
import { JSX as JSX_1kxb19 } from "react";
|
|
2692
|
+
interface DropdownProps extends HTMLAttributes22<HTMLDivElement> {
|
|
2693
|
+
/** `Dropdown.Item` rows, plus `Dropdown.Label` and `Dropdown.Separator`. */
|
|
2694
|
+
children: ReactNode23;
|
|
2695
|
+
/** The checked row: drives the animated selected background and the rows' radio semantics. */
|
|
2696
|
+
checkedIndex?: number;
|
|
2697
|
+
/** Uncontrolled twin of `checkedIndex`: the panel owns the selection, so rows need no `checked` or `onSelect` of their own. */
|
|
2698
|
+
defaultCheckedIndex?: number;
|
|
2699
|
+
/** Called with the newly checked row, or `undefined` when nothing is checked. */
|
|
2700
|
+
onCheckedIndexChange?: (index: number | undefined) => void;
|
|
2701
|
+
/** Multiple selection: the checked rows. Rows become checkbox items and contiguous runs share one merged background (see CheckboxGroup). */
|
|
2702
|
+
checkedIndices?: number[];
|
|
2703
|
+
/** Uncontrolled twin of `checkedIndices`: the panel toggles rows itself. */
|
|
2704
|
+
defaultCheckedIndices?: number[];
|
|
2705
|
+
/** Called with every checked row after a toggle. */
|
|
2706
|
+
onCheckedIndicesChange?: (indices: number[]) => void;
|
|
2707
|
+
/** Pins the panel's rows to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, they follow the surrounding SizeProvider. */
|
|
2708
|
+
size?: SizeVariant;
|
|
2709
|
+
/** Extra classes for the panel surface — it is 18rem wide by default. */
|
|
2710
|
+
className?: string;
|
|
2711
|
+
}
|
|
2712
|
+
type DropdownComponent = ForwardRefExoticComponent10<DropdownProps & RefAttributes10<HTMLDivElement>> & {
|
|
2713
|
+
Menu2: typeof DropdownMenu;
|
|
2714
|
+
Trigger: typeof DropdownTrigger;
|
|
2715
|
+
Content: typeof DropdownContent;
|
|
2716
|
+
Item: typeof MenuItem2;
|
|
2717
|
+
Label: typeof DropdownLabel;
|
|
2718
|
+
Separator: typeof DropdownSeparator;
|
|
2719
|
+
Search: typeof DropdownSearch;
|
|
2720
|
+
Empty: typeof DropdownEmpty;
|
|
2721
|
+
};
|
|
2722
|
+
/**
|
|
2723
|
+
* A menu in two forms: an inline panel that sits in the page, or a popup on
|
|
2724
|
+
* any trigger you like.
|
|
2725
|
+
*
|
|
2726
|
+
* `Dropdown` is the inline panel — an elevated surface with the fluid hover
|
|
2727
|
+
* background gliding between rows, a selected background that springs to the
|
|
2728
|
+
* picked one, contiguous picks merging into a single block in multiple mode,
|
|
2729
|
+
* and an animated focus ring. `Dropdown.Menu` + `Dropdown.Trigger` +
|
|
2730
|
+
* `Dropdown.Content` is the same panel as a popup on Base UI's Menu, which
|
|
2731
|
+
* brings the positioning, dismissal, roving highlight, typeahead and
|
|
2732
|
+
* close-on-select; the popup oozes out of its trigger and back through the
|
|
2733
|
+
* shared morph (see Morph), goo by default. Both take `checkedIndex` / `checkedIndices` to be driven
|
|
2734
|
+
* from outside, or `defaultCheckedIndex` / `defaultCheckedIndices` to run
|
|
2735
|
+
* themselves — and a `Dropdown.Search` marked `filter` makes the panel own
|
|
2736
|
+
* the query too, keeping only the rows whose `label` matches and showing
|
|
2737
|
+
* `Dropdown.Empty` when none do.
|
|
2738
|
+
*
|
|
2739
|
+
* Statics: Dropdown.Menu (the popup root: open, defaultOpen, onOpenChange,
|
|
2740
|
+
* disabled), Dropdown.Trigger (render), Dropdown.Content (the popup panel:
|
|
2741
|
+
* side, align, sideOffset and the morph options from, effect, hideSource, tier),
|
|
2742
|
+
* Dropdown.Item (a row: index, label, icon, checked, onSelect, disabled),
|
|
2743
|
+
* Dropdown.Label, Dropdown.Separator, Dropdown.Search and Dropdown.Empty.
|
|
2744
|
+
*
|
|
2745
|
+
* @example {@include ./examples.mdx}
|
|
2746
|
+
*/
|
|
2747
|
+
declare const Dropdown: DropdownComponent;
|
|
2748
|
+
interface DropdownMenuProps {
|
|
2749
|
+
/** `Dropdown.Trigger` and `Dropdown.Content`. */
|
|
2750
|
+
children: ReactNode23;
|
|
2751
|
+
/** Controlled open state. Pair with `onOpenChange`. */
|
|
2752
|
+
open?: boolean;
|
|
2753
|
+
/** Initial open state — uncontrolled. Defaults to `false`. */
|
|
2754
|
+
defaultOpen?: boolean;
|
|
2755
|
+
/** Called when the menu opens or closes. */
|
|
2756
|
+
onOpenChange?: (open: boolean) => void;
|
|
2757
|
+
/** Disables the menu. Defaults to `false`. */
|
|
2758
|
+
disabled?: boolean;
|
|
2759
|
+
/** Pins trigger-side content and the portalled popup rows to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, they follow the surrounding SizeProvider. */
|
|
2760
|
+
size?: SizeVariant;
|
|
2761
|
+
}
|
|
2762
|
+
type Element_12xgc19 = JSX_1kxb19["Element"];
|
|
2763
|
+
declare function DropdownMenu({ children, open: openProp, defaultOpen, onOpenChange, disabled, size }: DropdownMenuProps): Element_12xgc19;
|
|
2764
|
+
type DropdownTriggerProps = MenuTriggerProps;
|
|
2765
|
+
declare const DropdownTrigger: Menu2.Trigger;
|
|
2766
|
+
type MenuPositionerProps = ComponentProps<typeof Menu2.Positioner>;
|
|
2767
|
+
interface DropdownContentProps {
|
|
2768
|
+
/** `Dropdown.Item` rows, plus `Dropdown.Label`, `Dropdown.Separator`, `Dropdown.Search`, `Dropdown.Empty`. */
|
|
2769
|
+
children: ReactNode23;
|
|
2770
|
+
/** Extra classes for the popup surface. */
|
|
2771
|
+
className?: string;
|
|
2772
|
+
/** Index of the checked item. Drives the animated selected background and
|
|
2773
|
+
* the radio-group value announced to assistive tech. */
|
|
2774
|
+
checkedIndex?: number;
|
|
2775
|
+
/** Uncontrolled twin of `checkedIndex`: the popup owns the selection, so rows need no `checked` or `onSelect` of their own. */
|
|
2776
|
+
defaultCheckedIndex?: number;
|
|
2777
|
+
/** Called with the newly checked row, or `undefined` when nothing is checked. */
|
|
2778
|
+
onCheckedIndexChange?: (index: number | undefined) => void;
|
|
2779
|
+
/** Multiple selection: the checked rows. Rows become checkbox items that
|
|
2780
|
+
* keep the menu open when toggled, and contiguous runs share one merged
|
|
2781
|
+
* background (see CheckboxGroup). */
|
|
2782
|
+
checkedIndices?: number[];
|
|
2783
|
+
/** Uncontrolled twin of `checkedIndices`: the popup toggles rows itself. */
|
|
2784
|
+
defaultCheckedIndices?: number[];
|
|
2785
|
+
/** Called with every checked row after a toggle. */
|
|
2786
|
+
onCheckedIndicesChange?: (indices: number[]) => void;
|
|
2787
|
+
/** Side of the trigger the popup prefers. Defaults to `"bottom"`. */
|
|
2788
|
+
side?: MenuPositionerProps["side"];
|
|
2789
|
+
/** Alignment against the trigger. Defaults to `"start"`. */
|
|
2790
|
+
align?: MenuPositionerProps["align"];
|
|
2791
|
+
/** Gap to the trigger, in px. Ignored when the menu opens in place over its trigger (`effect="morph"` with `hideSource`). Defaults to `6`. */
|
|
2792
|
+
sideOffset?: number;
|
|
2793
|
+
/** Where the menu grows from (see Morph): the trigger, the pointer, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
2794
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject14<HTMLElement | null>;
|
|
2795
|
+
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
2796
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
2797
|
+
/** Hide the trigger while open, so it reads as turning into the menu. Defaults to `false`. */
|
|
2798
|
+
hideSource?: boolean;
|
|
2799
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
|
|
2800
|
+
tier?: "moderate" | "slow";
|
|
2801
|
+
}
|
|
2802
|
+
declare const DropdownContent: ForwardRefExoticComponent10<DropdownContentProps & RefAttributes10<HTMLDivElement>>;
|
|
2803
|
+
declare const DropdownLabel: ForwardRefExoticComponent10<HTMLAttributes22<HTMLDivElement> & RefAttributes10<HTMLDivElement>>;
|
|
2804
|
+
declare const DropdownSeparator: ForwardRefExoticComponent10<HTMLAttributes22<HTMLDivElement> & RefAttributes10<HTMLDivElement>>;
|
|
2805
|
+
import { HTMLAttributes as HTMLAttributes23, ReactNode as ReactNode24, RefObject as RefObject15 } from "react";
|
|
2806
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn17 } from "react";
|
|
2807
|
+
import { RefAttributes as RefAttributes_miuf5617 } from "react";
|
|
2808
|
+
import { JSX as JSX_1kxb20 } from "react";
|
|
2809
|
+
interface PopoverTriggerProps extends SlotProps {
|
|
2810
|
+
/** Open on hover as well as on press (a tap still toggles it on touch). Defaults to `false`. */
|
|
2811
|
+
openOnHover?: boolean;
|
|
2812
|
+
/** Hover delay before opening, in ms. Needs `openOnHover`. Defaults to `300`. */
|
|
2813
|
+
delay?: number;
|
|
2814
|
+
/** Delay before closing once the pointer leaves, in ms. Needs `openOnHover`. Defaults to `0`. */
|
|
2815
|
+
closeDelay?: number;
|
|
2816
|
+
}
|
|
2817
|
+
declare const PopoverTrigger: ForwardRefExoticComponent_tcubfn17<PopoverTriggerProps & RefAttributes_miuf5617<HTMLButtonElement>>;
|
|
2818
|
+
declare const PopoverClose: ForwardRefExoticComponent_tcubfn17<SlotProps & RefAttributes_miuf5617<HTMLButtonElement>>;
|
|
2819
|
+
interface PopoverContentProps extends HTMLAttributes23<HTMLDivElement> {
|
|
2820
|
+
/** Side of the trigger the panel opens on; it flips when there is no room. Defaults to `'bottom'`. */
|
|
2821
|
+
side?: "top" | "right" | "bottom" | "left";
|
|
2822
|
+
/** Alignment along that side. Defaults to `'center'`, or `'start'` when the panel opens in place (`effect="morph"` with `hideSource`). */
|
|
2823
|
+
align?: "start" | "center" | "end";
|
|
2824
|
+
/** Gap between trigger and panel in px — the length of the goo neck. Ignored when the panel opens in place over its trigger (`effect="morph"` with `hideSource`). Defaults to `12`. */
|
|
2825
|
+
sideOffset?: number;
|
|
2826
|
+
/** Where the panel grows from (see Morph): the pressed trigger, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
2827
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject15<HTMLElement | null>;
|
|
2828
|
+
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
2829
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
2830
|
+
/** Hide the trigger while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
2831
|
+
hideSource?: boolean;
|
|
2832
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
|
|
2833
|
+
tier?: "moderate" | "slow";
|
|
2834
|
+
/** Portal target. Defaults to the document body. */
|
|
2835
|
+
container?: HTMLElement | null;
|
|
2836
|
+
/** Classes for the panel's content box: padding, width, layout. */
|
|
2837
|
+
className?: string;
|
|
2838
|
+
/** The panel's content. Everything inside reads the popover's surface level as its substrate. */
|
|
2839
|
+
children?: ReactNode24;
|
|
2840
|
+
}
|
|
2841
|
+
declare const PopoverContent: ForwardRefExoticComponent_tcubfn17<PopoverContentProps & RefAttributes_miuf5617<HTMLDivElement>>;
|
|
2842
|
+
declare const PopoverTitle: ForwardRefExoticComponent_tcubfn17<HTMLAttributes23<HTMLHeadingElement> & RefAttributes_miuf5617<HTMLHeadingElement>>;
|
|
2843
|
+
declare const PopoverDescription: ForwardRefExoticComponent_tcubfn17<HTMLAttributes23<HTMLParagraphElement> & RefAttributes_miuf5617<HTMLParagraphElement>>;
|
|
2844
|
+
interface PopoverProps {
|
|
2845
|
+
/** Controlled open state. Pair with `onOpenChange`. */
|
|
2846
|
+
open?: boolean;
|
|
2847
|
+
/** Initial open state, for an uncontrolled popover. Defaults to `false`. */
|
|
2848
|
+
defaultOpen?: boolean;
|
|
2849
|
+
/** Called when the popover opens or closes. */
|
|
2850
|
+
onOpenChange?: (open: boolean) => void;
|
|
2851
|
+
/** Trap focus and block page interaction while open. Defaults to `false`. */
|
|
2852
|
+
modal?: boolean;
|
|
2853
|
+
/** The trigger and the panel — `Popover.Trigger` plus a `Popover.Content`. */
|
|
2854
|
+
children?: ReactNode24;
|
|
2855
|
+
}
|
|
2856
|
+
type Element_12xgc20 = JSX_1kxb20["Element"];
|
|
2857
|
+
/**
|
|
2858
|
+
* A panel that oozes out of its trigger: the surface melts out of the button
|
|
2859
|
+
* through a liquid neck, then lets go and settles beside it.
|
|
2860
|
+
*
|
|
2861
|
+
* The morph comes from the shared engine (see Morph), so the panel can grow
|
|
2862
|
+
* from the trigger (the default), the press point, its own center, a viewport
|
|
2863
|
+
* edge or any element, with the goo neck, a plain morph, a slide or a fade.
|
|
2864
|
+
* It closes back into wherever it came from. The panel lifts 2 surface levels
|
|
2865
|
+
* off its substrate and re-provides that level. Built on Base UI's Popover:
|
|
2866
|
+
* it opens on press, or on hover too with `openOnHover`; it flips to the
|
|
2867
|
+
* other side when there is no room; Escape and an outside press close it.
|
|
2868
|
+
*
|
|
2869
|
+
* Statics:
|
|
2870
|
+
* - `Popover.Trigger` — the control that opens it: `render={<Button/>}` or
|
|
2871
|
+
* `asChild`; `openOnHover`, `delay`, `closeDelay`.
|
|
2872
|
+
* - `Popover.Content` — the panel: `side`, `align` (the trigger's `start`,
|
|
2873
|
+
* `center` or `end`), `sideOffset` and the morph options `from`,
|
|
2874
|
+
* `effect`, `hideSource`, `tier`.
|
|
2875
|
+
* - `Popover.Title` / `Popover.Description` — its labelled heading and
|
|
2876
|
+
* supporting line, wired for screen readers.
|
|
2877
|
+
* - `Popover.Close` — closes it; same `render` / `asChild` shape.
|
|
2878
|
+
*
|
|
2879
|
+
* @example {@include ./examples.mdx}
|
|
2880
|
+
*/
|
|
2881
|
+
declare function Popover2({ open, defaultOpen, onOpenChange, modal, children }: PopoverProps): Element_12xgc20;
|
|
2882
|
+
import { AnchorHTMLAttributes as AnchorHTMLAttributes2, HTMLAttributes as HTMLAttributes24, ReactElement as ReactElement6, ReactNode as ReactNode25, RefObject as RefObject16 } from "react";
|
|
2883
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn18 } from "react";
|
|
2884
|
+
import { RefAttributes as RefAttributes_miuf5618 } from "react";
|
|
2885
|
+
import { JSX as JSX_1kxb21 } from "react";
|
|
2886
|
+
interface PreviewCardTriggerProps extends AnchorHTMLAttributes2<HTMLAnchorElement> {
|
|
2887
|
+
/** Hover delay before the card opens, in ms. Defaults to `600`. */
|
|
2888
|
+
delay?: number;
|
|
2889
|
+
/** Delay before the card closes once the pointer leaves, in ms. Defaults to `300`. */
|
|
2890
|
+
closeDelay?: number;
|
|
2891
|
+
/** The element that becomes the trigger instead of the default link, e.g. an avatar; it brings its own styling. */
|
|
2892
|
+
render?: ReactElement6;
|
|
2893
|
+
/** Extra classes for the link. */
|
|
2894
|
+
className?: string;
|
|
2895
|
+
/** The link's content. */
|
|
2896
|
+
children?: ReactNode25;
|
|
2897
|
+
}
|
|
2898
|
+
declare const PreviewCardTrigger: ForwardRefExoticComponent_tcubfn18<PreviewCardTriggerProps & RefAttributes_miuf5618<HTMLAnchorElement>>;
|
|
2899
|
+
interface PreviewCardContentProps extends HTMLAttributes24<HTMLDivElement> {
|
|
2900
|
+
/** Side of the link the card opens on; it flips when there is no room. Defaults to `'bottom'`. */
|
|
2901
|
+
side?: "top" | "right" | "bottom" | "left";
|
|
2902
|
+
/** Alignment along that side. Defaults to `'center'`, or `'start'` when the card opens in place (`effect="morph"` with `hideSource`). */
|
|
2903
|
+
align?: "start" | "center" | "end";
|
|
2904
|
+
/** Gap between link and card in px — the length of the goo neck. Ignored when the card opens in place over its link (`effect="morph"` with `hideSource`). Defaults to `12`. */
|
|
2905
|
+
sideOffset?: number;
|
|
2906
|
+
/** Where the card grows from (see Morph): the hovered link, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
2907
|
+
from?: "trigger" | "center" | "top" | "right" | "bottom" | "left" | RefObject16<HTMLElement | null>;
|
|
2908
|
+
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
2909
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
2910
|
+
/** Hide the link while open, so it reads as turning into the card. Defaults to `false`. */
|
|
2911
|
+
hideSource?: boolean;
|
|
2912
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
|
|
2913
|
+
tier?: "moderate" | "slow";
|
|
2914
|
+
/** Portal target. Defaults to the document body. */
|
|
2915
|
+
container?: HTMLElement | null;
|
|
2916
|
+
/** Classes for the card's content box: padding, width, layout. */
|
|
2917
|
+
className?: string;
|
|
2918
|
+
/** The card's content. Everything inside reads the card's surface level as its substrate. */
|
|
2919
|
+
children?: ReactNode25;
|
|
2920
|
+
}
|
|
2921
|
+
declare const PreviewCardContent: ForwardRefExoticComponent_tcubfn18<PreviewCardContentProps & RefAttributes_miuf5618<HTMLDivElement>>;
|
|
2922
|
+
interface PreviewCardProps {
|
|
2923
|
+
/** Controlled open state. Pair with `onOpenChange`. */
|
|
2924
|
+
open?: boolean;
|
|
2925
|
+
/** Initial open state, for an uncontrolled card. Defaults to `false`. */
|
|
2926
|
+
defaultOpen?: boolean;
|
|
2927
|
+
/** Called when the card opens or closes. */
|
|
2928
|
+
onOpenChange?: (open: boolean) => void;
|
|
2929
|
+
/** The link and the card — `PreviewCard.Trigger` plus a `PreviewCard.Content`. */
|
|
2930
|
+
children?: ReactNode25;
|
|
2931
|
+
}
|
|
2932
|
+
type Element_12xgc21 = JSX_1kxb21["Element"];
|
|
2933
|
+
/**
|
|
2934
|
+
* A card that oozes out of a link on hover: a preview of what is behind it,
|
|
2935
|
+
* melting out of the link through a liquid neck.
|
|
2936
|
+
*
|
|
2937
|
+
* The morph comes from the shared engine (see Morph), so the card can grow
|
|
2938
|
+
* from the link (the default), its own center, a viewport edge or any
|
|
2939
|
+
* element, with the goo neck, a plain morph, a slide or a fade, and closes
|
|
2940
|
+
* back into wherever it came from. The card lifts 2 surface levels off its
|
|
2941
|
+
* substrate and re-provides that level. Built on Base UI's PreviewCard: it
|
|
2942
|
+
* opens after a hover or focus delay, stays open while the pointer travels
|
|
2943
|
+
* into it, flips to the other side when there is no room, and closes on
|
|
2944
|
+
* leave, Escape or an outside press. The card is a visual extra that touch
|
|
2945
|
+
* and screen-reader users never get, so the link must make sense on its own.
|
|
2946
|
+
*
|
|
2947
|
+
* Statics:
|
|
2948
|
+
* - `PreviewCard.Trigger` — the link: `href`, `delay`, `closeDelay`, or
|
|
2949
|
+
* `render` for another element.
|
|
2950
|
+
* - `PreviewCard.Content` — the card: `side`, `align`, `sideOffset` and the
|
|
2951
|
+
* morph options `from`, `effect`, `hideSource`, `tier`.
|
|
2952
|
+
*
|
|
2953
|
+
* @example {@include ./examples.mdx}
|
|
2954
|
+
*/
|
|
2955
|
+
declare function PreviewCard({ open, defaultOpen, onOpenChange, children }: PreviewCardProps): Element_12xgc21;
|
|
2956
|
+
import { HTMLAttributes as HTMLAttributes25, ReactNode as ReactNode26, RefObject as RefObject17 } from "react";
|
|
2957
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn19 } from "react";
|
|
2958
|
+
import { RefAttributes as RefAttributes_miuf5619 } from "react";
|
|
2959
|
+
import { JSX as JSX_1kxb22 } from "react";
|
|
2960
|
+
type SheetSide = "top" | "right" | "bottom" | "left";
|
|
2961
|
+
interface SheetContentProps extends HTMLAttributes25<HTMLDivElement> {
|
|
2962
|
+
/** Where the sheet grows from (see Morph): its own edge, the pressed trigger, the press point, its center, another edge, or a ref to any element. Defaults to the sheet's `side`. */
|
|
2963
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject17<HTMLElement | null>;
|
|
2964
|
+
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
2965
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
2966
|
+
/** Hide the trigger while open, so it reads as turning into the sheet. Defaults to `false`. */
|
|
2967
|
+
hideSource?: boolean;
|
|
2968
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
|
|
2969
|
+
tier?: "moderate" | "slow";
|
|
2970
|
+
/** Portal target. Defaults to the document body. */
|
|
2971
|
+
container?: HTMLElement | null;
|
|
2972
|
+
/** Classes for the sheet's content box: padding, layout. */
|
|
2973
|
+
className?: string;
|
|
2974
|
+
/** The sheet's content. Everything inside reads the sheet's surface level as its substrate. */
|
|
2975
|
+
children?: ReactNode26;
|
|
2976
|
+
}
|
|
2977
|
+
declare const SheetContent: ForwardRefExoticComponent_tcubfn19<SheetContentProps & RefAttributes_miuf5619<HTMLDivElement>>;
|
|
2978
|
+
declare const SheetIndent: ForwardRefExoticComponent_tcubfn19<HTMLAttributes25<HTMLDivElement> & RefAttributes_miuf5619<HTMLDivElement>>;
|
|
2979
|
+
interface SheetProps {
|
|
2980
|
+
/** Controlled open state. */
|
|
2981
|
+
open?: boolean;
|
|
2982
|
+
/** Initial open state, for an uncontrolled sheet. Defaults to `false`. */
|
|
2983
|
+
defaultOpen?: boolean;
|
|
2984
|
+
/** Called when the sheet opens or closes, including by a swipe. */
|
|
2985
|
+
onOpenChange?: (open: boolean) => void;
|
|
2986
|
+
/** The edge the sheet is attached to; a swipe back toward it dismisses it. Defaults to `'bottom'`. */
|
|
2987
|
+
side?: "top" | "right" | "bottom" | "left";
|
|
2988
|
+
/** Snap points for a top or bottom sheet: fractions of the viewport height (0–1), pixels, or `px` / `rem` strings. */
|
|
2989
|
+
snapPoints?: (number | string)[];
|
|
2990
|
+
/** The snap point an uncontrolled sheet opens at. Defaults to the first one. */
|
|
2991
|
+
defaultSnapPoint?: number | string;
|
|
2992
|
+
/** Traps focus and locks page scroll while open. Defaults to `true`. */
|
|
2993
|
+
modal?: boolean;
|
|
2994
|
+
/** The trigger and the content — `Sheet.Trigger` plus a `Sheet.Content`. */
|
|
2995
|
+
children?: ReactNode26;
|
|
2996
|
+
}
|
|
2997
|
+
type Element_12xgc22 = JSX_1kxb22["Element"];
|
|
2998
|
+
/**
|
|
2999
|
+
* A panel attached to an edge of the window, swiped away to dismiss.
|
|
3000
|
+
*
|
|
3001
|
+
* The sheet grows out of its own edge with the goo neck by default (see
|
|
3002
|
+
* Morph), or from its trigger, the press point or any element, and closes
|
|
3003
|
+
* back the same way. Base UI's Drawer does the rest: a swipe back toward the
|
|
3004
|
+
* edge dismisses it (it slides on off the edge from where the finger let
|
|
3005
|
+
* go), top and bottom sheets can rest at `snapPoints`, and
|
|
3006
|
+
* focus and scroll are held while it is open. It floats a spacing step off
|
|
3007
|
+
* its edge and lifts 4 surface levels off its substrate, like a dialog; top
|
|
3008
|
+
* and bottom sheets show a handle.
|
|
3009
|
+
*
|
|
3010
|
+
* Statics:
|
|
3011
|
+
* - `Sheet.Trigger`, `Sheet.Header`, `Sheet.Footer`, `Sheet.Title`,
|
|
3012
|
+
* `Sheet.Description`, `Sheet.Close` — Dialog's parts, which work the same
|
|
3013
|
+
* here.
|
|
3014
|
+
* - `Sheet.Content` — the panel, with the morph options `from`, `effect`,
|
|
3015
|
+
* `hideSource`, `tier`.
|
|
3016
|
+
* - `Sheet.Provider` / `Sheet.Indent` — wrap the page in an `Indent` under a
|
|
3017
|
+
* `Provider` and it eases back while any sheet inside is open.
|
|
3018
|
+
*
|
|
3019
|
+
* @example {@include ./examples.mdx}
|
|
3020
|
+
*/
|
|
3021
|
+
declare function Sheet({ children, open, defaultOpen, onOpenChange, side, snapPoints, defaultSnapPoint, modal }: SheetProps): Element_12xgc22;
|
|
3022
|
+
import { ReactNode as ReactNode27 } from "react";
|
|
3023
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn20 } from "react";
|
|
3024
|
+
import { RefAttributes as RefAttributes_miuf5620 } from "react";
|
|
3025
|
+
import { JSX as JSX_1kxb23 } from "react";
|
|
3026
|
+
type ToastType = "success" | "loading" | "error" | "warning" | "info" | "action";
|
|
3027
|
+
type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
3028
|
+
interface ToastOptions {
|
|
3029
|
+
title?: string;
|
|
3030
|
+
description?: string;
|
|
3031
|
+
type?: ToastType;
|
|
3032
|
+
/** Ms before it leaves; 0 keeps it until dismissed. */
|
|
3033
|
+
timeout?: number;
|
|
3034
|
+
action?: {
|
|
3035
|
+
label: string;
|
|
3036
|
+
onClick?: () => void;
|
|
3037
|
+
};
|
|
3038
|
+
}
|
|
3039
|
+
/** Shows toasts from inside a `Toast`: `show`, the per-state shortcuts, `promise` and `close`. */
|
|
3040
|
+
declare function useToast(): {
|
|
3041
|
+
show: (o: ToastOptions) => string;
|
|
3042
|
+
success: (o: ToastOptions) => string;
|
|
3043
|
+
error: (o: ToastOptions) => string;
|
|
3044
|
+
warning: (o: ToastOptions) => string;
|
|
3045
|
+
info: (o: ToastOptions) => string;
|
|
3046
|
+
promise: <T>(promise: Promise<T>, o: {
|
|
3047
|
+
loading: ToastOptions;
|
|
3048
|
+
success: ToastOptions;
|
|
3049
|
+
error: ToastOptions;
|
|
3050
|
+
}) => Promise<T>;
|
|
3051
|
+
close: (toastId?: string) => void;
|
|
3052
|
+
};
|
|
3053
|
+
interface ToastTriggerProps extends Omit<SlotProps, "type"> {
|
|
3054
|
+
/** The toast's title, in the pill. */
|
|
3055
|
+
title?: string;
|
|
3056
|
+
/** Text for the body the pill melts into. */
|
|
3057
|
+
description?: string;
|
|
3058
|
+
/** State: sets the icon and its color. Defaults to `'info'`. */
|
|
3059
|
+
type?: "success" | "loading" | "error" | "warning" | "info" | "action";
|
|
3060
|
+
/** Ms before it leaves; 0 keeps it until dismissed. Defaults to the `Toast`'s `timeout`. */
|
|
3061
|
+
timeout?: number;
|
|
3062
|
+
/** A button in the body. */
|
|
3063
|
+
action?: {
|
|
3064
|
+
label: string;
|
|
3065
|
+
onClick?: () => void;
|
|
3066
|
+
};
|
|
3067
|
+
/** Runs a task: the toast shows `title` while it is pending, then `success` or `error`. */
|
|
3068
|
+
promise?: () => Promise<unknown>;
|
|
3069
|
+
/** The toast once `promise` resolves. */
|
|
3070
|
+
success?: {
|
|
3071
|
+
title?: string;
|
|
3072
|
+
description?: string;
|
|
3073
|
+
};
|
|
3074
|
+
/** The toast if `promise` rejects. */
|
|
3075
|
+
error?: {
|
|
3076
|
+
title?: string;
|
|
3077
|
+
description?: string;
|
|
3078
|
+
};
|
|
3079
|
+
}
|
|
3080
|
+
declare const ToastTrigger: ForwardRefExoticComponent_tcubfn20<ToastTriggerProps & RefAttributes_miuf5620<HTMLButtonElement>>;
|
|
3081
|
+
interface ToastProps {
|
|
3082
|
+
/** Where toasts stack; the pill sits on that side and the body opens away from the edge. Defaults to `'top-right'`. */
|
|
3083
|
+
position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
3084
|
+
/** How many toasts show at once; older ones wait. Defaults to `3`. */
|
|
3085
|
+
limit?: number;
|
|
3086
|
+
/** Ms a toast stays; hovering pauses it. Defaults to `6000`. */
|
|
3087
|
+
timeout?: number;
|
|
3088
|
+
/** The part of the app that can show toasts, with `Toast.Trigger`s or `useToast()`. */
|
|
3089
|
+
children?: ReactNode27;
|
|
3090
|
+
}
|
|
3091
|
+
type Element_12xgc23 = JSX_1kxb23["Element"];
|
|
3092
|
+
/**
|
|
3093
|
+
* Gooey toasts: a pill with the state's icon and title that melts into a body
|
|
3094
|
+
* with the details.
|
|
3095
|
+
*
|
|
3096
|
+
* Each toast lands as a pill one control tall; when it has a description or
|
|
3097
|
+
* an action, the pill melts into a body a beat later through the shared goo
|
|
3098
|
+
* filter (see Morph), and folds back before it leaves, or stays open while
|
|
3099
|
+
* hovered. Six states (`success`, `loading`, `error`, `warning`, `info`,
|
|
3100
|
+
* `action`) set the icon and its status color; a promise toast spins as
|
|
3101
|
+
* `loading` and crossfades into its result. Built on Base UI's Toast:
|
|
3102
|
+
* timers pause on hover, a swipe toward the edge dismisses, and screen
|
|
3103
|
+
* readers hear every toast.
|
|
3104
|
+
*
|
|
3105
|
+
* `Toast` wraps the part of the app that shows toasts and renders them at
|
|
3106
|
+
* its `position`. Show one with `Toast.Trigger`, or call `useToast()`
|
|
3107
|
+
* inside it: `show`, `success`, `error`, `warning`, `info`, `promise` and
|
|
3108
|
+
* `close`.
|
|
3109
|
+
*
|
|
3110
|
+
* Statics:
|
|
3111
|
+
* - `Toast.Trigger` — a control that shows a toast when pressed:
|
|
3112
|
+
* `render={<Button/>}` or `asChild`, with the toast's `title`,
|
|
3113
|
+
* `description`, `type`, `timeout`, `action`, or a `promise` with its
|
|
3114
|
+
* `success` / `error` toasts.
|
|
3115
|
+
*
|
|
3116
|
+
* @example {@include ./examples.mdx}
|
|
3117
|
+
*/
|
|
3118
|
+
declare function Toast({ position, limit, timeout, children }: ToastProps): Element_12xgc23;
|
|
3119
|
+
import { ReactNode as ReactNode28, RefObject as RefObject18 } from "react";
|
|
3120
|
+
import { JSX as JSX_1kxb24 } from "react";
|
|
3121
|
+
type Element_12xgc24 = JSX_1kxb24["Element"];
|
|
3122
|
+
declare function TooltipPortalContainer({ value, children }: {
|
|
3123
|
+
value: HTMLElement | null;
|
|
3124
|
+
children: ReactNode28;
|
|
3125
|
+
}): Element_12xgc24;
|
|
3126
|
+
interface TooltipProviderProps {
|
|
3127
|
+
children: ReactNode28;
|
|
3128
|
+
/** Hover delay before tooltips open, in ms. Defaults to 200. */
|
|
3129
|
+
delayDuration?: number;
|
|
3130
|
+
/** After a tooltip closes, adjacent tooltips opened within this window
|
|
3131
|
+
* skip the hover delay, in ms. Defaults to 300. */
|
|
3132
|
+
skipDelayDuration?: number;
|
|
3133
|
+
}
|
|
3134
|
+
/** Groups descendant Tooltips so that once one opens, moving to an adjacent
|
|
3135
|
+
* trigger shows its tooltip instantly instead of re-waiting the full delay.
|
|
3136
|
+
* Wrap once at the app (or section) level; bare Tooltips still work without
|
|
3137
|
+
* it via a per-instance fallback. */
|
|
3138
|
+
declare function TooltipProvider({ children, delayDuration, skipDelayDuration }: TooltipProviderProps): Element_12xgc24;
|
|
3139
|
+
type TooltipSide = "top" | "right" | "bottom" | "left";
|
|
3140
|
+
interface TooltipProps {
|
|
3141
|
+
/** The content displayed inside the tooltip. */
|
|
3142
|
+
content: ReactNode28;
|
|
3143
|
+
/** The trigger element. Must accept a ref. */
|
|
3144
|
+
children: React.ReactElement;
|
|
3145
|
+
/** Preferred side of the trigger to render the tooltip on. Defaults to `"top"`. */
|
|
3146
|
+
side?: TooltipSide;
|
|
3147
|
+
/** Distance in pixels between the tooltip and the trigger. Defaults to 8. */
|
|
3148
|
+
sideOffset?: number;
|
|
3149
|
+
/** Hover delay before this tooltip opens, in ms. Defaults to 200, or to the
|
|
3150
|
+
* ambient TooltipProvider's delayDuration when one is present. */
|
|
3151
|
+
delayDuration?: number;
|
|
3152
|
+
/** Additional classes applied to the tooltip content container. */
|
|
3153
|
+
className?: string;
|
|
3154
|
+
/** Extra classes for the portalled positioner element — pass a z utility
|
|
3155
|
+
* here to lift the whole tooltip above other fixed layers (default z-50). */
|
|
3156
|
+
contentClassName?: string;
|
|
3157
|
+
/** When true, forces the tooltip open. When false, forces it closed. When undefined, uses default hover/focus behavior. */
|
|
3158
|
+
forceOpen?: boolean;
|
|
3159
|
+
/** Follow the cursor along one axis while hovering the trigger — for tall
|
|
3160
|
+
* or wide triggers (the Sidebar rail) where a centered tooltip sits far
|
|
3161
|
+
* from the pointer. The other axis stays anchored by `side`. */
|
|
3162
|
+
followCursor?: "x" | "y";
|
|
3163
|
+
/** Called when the tooltip's internal open state changes (before forceOpen is applied). */
|
|
3164
|
+
onOpenChange?: (open: boolean) => void;
|
|
3165
|
+
/** Where the label grows from (see Morph): the trigger, the pointer, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
3166
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject18<HTMLElement | null>;
|
|
3167
|
+
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. `followCursor` tooltips always fade. Defaults to `'goo'`. */
|
|
3168
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
3169
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
|
|
3170
|
+
tier?: "moderate" | "slow";
|
|
3171
|
+
}
|
|
3172
|
+
/**
|
|
3173
|
+
* Floating tooltip with spring-based animations, configurable placement, and
|
|
3174
|
+
* rich content support.
|
|
3175
|
+
*
|
|
3176
|
+
* The trigger is whatever element you pass as the single child — it only has
|
|
3177
|
+
* to accept a ref. The label is portalled and grows out of its trigger
|
|
3178
|
+
* through the shared morph (see Morph), with the goo neck by default on
|
|
3179
|
+
* `spring.goo`, and flips when it would collide with the viewport edge.
|
|
3180
|
+
* `followCursor` tracks the pointer along one axis for tall or wide triggers,
|
|
3181
|
+
* while the other stays anchored by `side`. Built on Base UI's Tooltip.
|
|
3182
|
+
*
|
|
3183
|
+
* Statics:
|
|
3184
|
+
* - `Tooltip.Provider` — `TooltipProvider`: groups tooltips so moving from
|
|
3185
|
+
* one trigger to an adjacent one skips the hover delay, and the morph: the
|
|
3186
|
+
* next label shows in place.
|
|
3187
|
+
* - `Tooltip.PortalContainer` — `TooltipPortalContainer`: portal every
|
|
3188
|
+
* descendant tooltip into a given element instead of the body.
|
|
3189
|
+
*
|
|
3190
|
+
* @example {@include ./examples.mdx}
|
|
3191
|
+
*/
|
|
3192
|
+
declare function Tooltip({ content, children, side, sideOffset, delayDuration, className, contentClassName, forceOpen, onOpenChange: onOpenChangeProp, followCursor, from, effect, tier }: TooltipProps): Element_12xgc24;
|
|
3193
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent11, HTMLAttributes as HTMLAttributes26, ReactNode as ReactNode29, RefAttributes as RefAttributes11, TdHTMLAttributes, ThHTMLAttributes } from "react";
|
|
3194
|
+
interface TableProps extends HTMLAttributes26<HTMLTableElement> {
|
|
3195
|
+
/** `Table.Header` and `Table.Body` children. */
|
|
3196
|
+
children: ReactNode29;
|
|
3197
|
+
/** Pins the table's rows to one step of the size ladder (default 36px, compact 28px — see Sizes). Defaults to the surrounding SizeProvider, else `"default"`. */
|
|
3198
|
+
size?: SizeVariant;
|
|
3199
|
+
}
|
|
3200
|
+
/** The root plus its compound parts, typed so `<Table.Row>` type-checks. */
|
|
3201
|
+
type TableComponent = ForwardRefExoticComponent11<TableProps & RefAttributes11<HTMLTableElement>> & {
|
|
3202
|
+
Header: typeof TableHeader;
|
|
3203
|
+
Body: typeof TableBody;
|
|
3204
|
+
Row: typeof TableRow;
|
|
3205
|
+
Head: typeof TableHead;
|
|
3206
|
+
Cell: typeof TableCell;
|
|
3207
|
+
};
|
|
3208
|
+
/**
|
|
3209
|
+
* Data table with row hover effects and semantic markup.
|
|
3210
|
+
*
|
|
3211
|
+
* A plain `<table>` whose body rows share one fluid hover highlight: the
|
|
3212
|
+
* background glides from row to row under the pointer, the row borders next
|
|
3213
|
+
* to the lit row fade out so it reads as one pill, and the lit row's cells
|
|
3214
|
+
* brighten from muted to foreground. Header cells render semibold, body
|
|
3215
|
+
* cells regular, with the weight change width-compensated. `size` pins every
|
|
3216
|
+
* row to one step of the size ladder; otherwise the table follows the
|
|
3217
|
+
* surrounding SizeProvider.
|
|
3218
|
+
*
|
|
3219
|
+
* Parts: `Table.Header` (`<thead>`), `Table.Body` (`<tbody>`), `Table.Row`
|
|
3220
|
+
* (`<tr>` — give body rows an `index`, starting at 0, so they join the hover
|
|
3221
|
+
* highlight; omit it on header rows), `Table.Head` (`<th>`) and `Table.Cell`
|
|
3222
|
+
* (`<td>`). Each forwards its ref and native attributes.
|
|
3223
|
+
*
|
|
3224
|
+
* @example {@include ./examples.mdx}
|
|
3225
|
+
*/
|
|
3226
|
+
declare const Table: TableComponent;
|
|
3227
|
+
declare const TableHeader: ForwardRefExoticComponent11<HTMLAttributes26<HTMLTableSectionElement> & RefAttributes11<HTMLTableSectionElement>>;
|
|
3228
|
+
declare const TableBody: ForwardRefExoticComponent11<HTMLAttributes26<HTMLTableSectionElement> & RefAttributes11<HTMLTableSectionElement>>;
|
|
3229
|
+
interface TableRowProps extends HTMLAttributes26<HTMLTableRowElement> {
|
|
3230
|
+
index?: number;
|
|
3231
|
+
}
|
|
3232
|
+
declare const TableRow: ForwardRefExoticComponent11<TableRowProps & RefAttributes11<HTMLTableRowElement>>;
|
|
3233
|
+
declare const TableHead: ForwardRefExoticComponent11<ThHTMLAttributes<HTMLTableCellElement> & RefAttributes11<HTMLTableCellElement>>;
|
|
3234
|
+
declare const TableCell: ForwardRefExoticComponent11<TdHTMLAttributes<HTMLTableCellElement> & RefAttributes11<HTMLTableCellElement>>;
|
|
3235
|
+
import { HTMLAttributes as HTMLAttributes27 } from "react";
|
|
3236
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn21 } from "react";
|
|
3237
|
+
import { RefAttributes as RefAttributes_miuf5621 } from "react";
|
|
3238
|
+
interface ThinkingIndicatorProps extends HTMLAttributes27<HTMLDivElement> {
|
|
3239
|
+
/** The look: `shimmer` morphs a circle⇄infinity glyph beside a shimmering label (Fluid Functionalism's), `goo` melts three dots into one blob and splits them again beside a plain label. Defaults to `"shimmer"`. */
|
|
3240
|
+
variant?: "shimmer" | "goo";
|
|
3241
|
+
/** Show the glyph (or, for `goo`, the dots) before the label. Set to `false` for a text-only indicator (e.g. inline before a streamed reply). Defaults to `true`. */
|
|
3242
|
+
showIcon?: boolean;
|
|
3243
|
+
/** Step on the size ladder. Wins over the surrounding SizeProvider. Defaults to the provider's step, else `"default"`. */
|
|
3244
|
+
size?: SizeVariant;
|
|
3245
|
+
}
|
|
3246
|
+
/**
|
|
3247
|
+
* Animated status indicator with morphing SVG and cycling text — the
|
|
3248
|
+
* assistant's working state.
|
|
3249
|
+
*
|
|
3250
|
+
* A glyph that morphs circle to infinity and back sits next to a shimmering
|
|
3251
|
+
* label that cycles Thinking, Moonwalking, Planning, Refining, each word
|
|
3252
|
+
* swapped on a spring. The row reserves the width of the longest word, so
|
|
3253
|
+
* nothing around it shifts while the words change. One static "Thinking…" is
|
|
3254
|
+
* announced to screen readers instead of a re-announcement every four
|
|
3255
|
+
* seconds, and reduced motion drops both the morph and the cycling for a
|
|
3256
|
+
* still glyph and label.
|
|
3257
|
+
*
|
|
3258
|
+
* `variant="goo"` swaps the glyph for three dots that melt into one blob and
|
|
3259
|
+
* split again through the goo filter (see Morph), beside a plain label;
|
|
3260
|
+
* reduced motion holds them split.
|
|
3261
|
+
*
|
|
3262
|
+
* @example {@include ./examples.mdx}
|
|
3263
|
+
*/
|
|
3264
|
+
declare const ThinkingIndicator: ForwardRefExoticComponent_tcubfn21<ThinkingIndicatorProps & RefAttributes_miuf5621<HTMLDivElement>>;
|
|
3265
|
+
import { JSX as JSX_1kxb25 } from "react";
|
|
3266
|
+
type Element_12xgc25 = JSX_1kxb25["Element"];
|
|
3267
|
+
/**
|
|
3268
|
+
* Source code in the theme's syntax colors, one surface step above whatever
|
|
3269
|
+
* it sits on.
|
|
3270
|
+
*
|
|
3271
|
+
* sugar-high tokenizes; each token type takes a `--syntax-*` token from
|
|
3272
|
+
* tokens/colors.css, so code follows light and dark like everything else.
|
|
3273
|
+
* Long lines scroll sideways under a fading edge instead of wrapping. It is
|
|
3274
|
+
* also the docs chrome's Code slot: every example's source and every fenced
|
|
3275
|
+
* block on these pages renders through it.
|
|
3276
|
+
*
|
|
3277
|
+
* @example {@include ./examples.mdx}
|
|
3278
|
+
*/
|
|
3279
|
+
declare function Code({ children, language, className }: {
|
|
3280
|
+
/** The source to show; surrounding blank lines are trimmed. */
|
|
3281
|
+
children: string;
|
|
3282
|
+
/** Fence name, alias or extension (`tsx`, `css`, `sh`, …). Unknown names render as plain text. Defaults to `'tsx'`. */
|
|
3283
|
+
language?: string;
|
|
3284
|
+
/** Extra classes for the frame. */
|
|
3285
|
+
className?: string;
|
|
3286
|
+
}): Element_12xgc25;
|
|
3287
|
+
import { ReactNode as ReactNode30 } from "react";
|
|
3288
|
+
interface CraftProps {
|
|
3289
|
+
/** The naive version: the same interface with the detail missing. */
|
|
3290
|
+
bad: ReactNode30;
|
|
3291
|
+
/** The system's version, with the detail in place. */
|
|
3292
|
+
good: ReactNode30;
|
|
3293
|
+
/** What goes wrong on the bad side, in one line. */
|
|
3294
|
+
badNote?: string;
|
|
3295
|
+
/** What the good side does instead, in one line. */
|
|
3296
|
+
goodNote?: string;
|
|
3297
|
+
/** Classes for the root grid. */
|
|
3298
|
+
className?: string;
|
|
3299
|
+
}
|
|
3300
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent12, HTMLAttributes as HTMLAttributes28, ReactNode as ReactNode31, RefAttributes as RefAttributes12 } from "react";
|
|
3301
|
+
import { Transition as Transition2 } from "motion/react";
|
|
3302
|
+
import { Dispatch as Dispatch2, MutableRefObject as MutableRefObject2, RefObject as RefObject19, SetStateAction as SetStateAction2 } from "react";
|
|
3303
|
+
interface ItemRect {
|
|
3304
|
+
top: number;
|
|
3305
|
+
height: number;
|
|
3306
|
+
left: number;
|
|
3307
|
+
width: number;
|
|
3308
|
+
}
|
|
3309
|
+
interface UseFluidHoverOptions {
|
|
3310
|
+
/**
|
|
3311
|
+
* Which direction to resolve the nearest item along.
|
|
3312
|
+
* "y" — vertical lists (default): closest by top/height
|
|
3313
|
+
* "x" — horizontal strips: closest by left/width
|
|
3314
|
+
* "xy" — 2-D grids: closest card across both rows AND columns,
|
|
3315
|
+
* measured by Euclidean distance to each item's center
|
|
3316
|
+
*/
|
|
3317
|
+
axis?: "x" | "y" | "xy";
|
|
3318
|
+
/**
|
|
3319
|
+
* Makes an item invisible to hit-testing without unregistering it — for
|
|
3320
|
+
* rows that stay mounted while clipped away (a collapsed sub-tree).
|
|
3321
|
+
* Unregistering would invalidate every measurement; a skipped item keeps
|
|
3322
|
+
* the set stable. Consulted per mouse move, so keep it cheap.
|
|
3323
|
+
*/
|
|
3324
|
+
isItemDisabled?: (element: HTMLElement) => boolean;
|
|
3325
|
+
/**
|
|
3326
|
+
* Whether a click that lands between items (a gap, the padding, past the
|
|
3327
|
+
* last row) is routed to the highlighted item, so what is lit is what a
|
|
3328
|
+
* click hits. On by default: in a menu or a list the highlight is a
|
|
3329
|
+
* promise about the click. Pass `false` where empty space should stay
|
|
3330
|
+
* inert (rows with destructive actions, generous whitespace), or
|
|
3331
|
+
* `{ maxDistance }` to route only clicks within that many pixels of the
|
|
3332
|
+
* highlighted item's edge.
|
|
3333
|
+
*/
|
|
3334
|
+
gapClick?: boolean | {
|
|
3335
|
+
maxDistance?: number;
|
|
3336
|
+
};
|
|
3337
|
+
}
|
|
3338
|
+
interface UseFluidHoverReturn {
|
|
3339
|
+
activeIndex: number | null;
|
|
3340
|
+
setActiveIndex: Dispatch2<SetStateAction2<number | null>>;
|
|
3341
|
+
itemRects: ItemRect[];
|
|
3342
|
+
/**
|
|
3343
|
+
* True once every registered item has been measured and no remeasure is
|
|
3344
|
+
* pending, i.e. `itemRects` describes the current item set. Gate absolutely
|
|
3345
|
+
* positioned overlays on it: an overlay that mounts against a rect a later
|
|
3346
|
+
* pass still corrects animates from the wrong place to the right one, which
|
|
3347
|
+
* reads as the highlight sliding in from another row.
|
|
3348
|
+
*/
|
|
3349
|
+
isMeasured: boolean;
|
|
3350
|
+
sessionRef: MutableRefObject2<number>;
|
|
3351
|
+
handlers: {
|
|
3352
|
+
onMouseMove: (e: React.MouseEvent) => void;
|
|
3353
|
+
onMouseEnter: () => void;
|
|
3354
|
+
onMouseLeave: () => void;
|
|
3355
|
+
/**
|
|
3356
|
+
* Routes a click that lands between items (a gap, the padding, past the
|
|
3357
|
+
* last row) to the highlighted item, so the highlight and the click agree:
|
|
3358
|
+
* what is lit is what a click hits. A click inside an item is left to the
|
|
3359
|
+
* item. Disabled items (`isItemDisabled`) are never activated.
|
|
3360
|
+
*/
|
|
3361
|
+
onClick: (e: React.MouseEvent) => void;
|
|
3362
|
+
};
|
|
3363
|
+
registerItem: (index: number, element: HTMLElement | null) => void;
|
|
3364
|
+
/**
|
|
3365
|
+
* Invalidates the published rects and runs the hook's coalesced measurement
|
|
3366
|
+
* pass again, holding `isMeasured` false until it settles. Reach for it when
|
|
3367
|
+
* the rects may be wrong and showing an overlay against them would misplace
|
|
3368
|
+
* it: a popup that stays mounted between opens keeps its items registered,
|
|
3369
|
+
* so nothing else would notice that its rects were taken while it was
|
|
3370
|
+
* hidden. Registration, item resize, and container resize already trigger
|
|
3371
|
+
* a pass; do not call this on `children` changes.
|
|
3372
|
+
*/
|
|
3373
|
+
remeasure: () => void;
|
|
3374
|
+
/**
|
|
3375
|
+
* Re-reads the rects synchronously, keeping `isMeasured` as it is. Only for
|
|
3376
|
+
* layout that moves the rows under a visible overlay frame by frame (the
|
|
3377
|
+
* accordion re-measures inside its height animation). Everything else
|
|
3378
|
+
* wants `remeasure`, or nothing.
|
|
3379
|
+
*/
|
|
3380
|
+
measureItems: () => void;
|
|
3381
|
+
}
|
|
3382
|
+
declare function useFluidHover<T extends HTMLElement>(containerRef: RefObject19<T | null>, options?: UseFluidHoverOptions): UseFluidHoverReturn;
|
|
3383
|
+
/**
|
|
3384
|
+
* Registers an item's element with its list for as long as it is mounted.
|
|
3385
|
+
* The one way rows join a list: pass the hook's `registerItem` (or the copy
|
|
3386
|
+
* a context hands down), the row's index, and its ref. Either may be
|
|
3387
|
+
* missing for a row rendered outside a list (a standalone card, an accordion
|
|
3388
|
+
* item that is not grouped); then nothing is registered.
|
|
3389
|
+
*/
|
|
3390
|
+
declare function useRegisterFluidHoverItem(registerItem: ((index: number, element: HTMLElement | null) => void) | undefined, index: number | undefined, ref: RefObject19<HTMLElement | null>): void;
|
|
3391
|
+
import { JSX as JSX_1kxb27 } from "react";
|
|
3392
|
+
/** What the highlight reads off the hook: the highlighted index, the
|
|
3393
|
+
* measured rects, whether they are current, and the pointer session. */
|
|
3394
|
+
type FluidHoverSource = Pick<UseFluidHoverReturn, "activeIndex" | "itemRects" | "isMeasured" | "sessionRef">;
|
|
3395
|
+
interface HighlightFromHook {
|
|
3396
|
+
/** The hook's return value. The highlight sits on
|
|
3397
|
+
* `itemRects[activeIndex]` once `isMeasured`, and re-keys on the session. */
|
|
3398
|
+
hover: FluidHoverSource;
|
|
3399
|
+
/** Keep the list's state but show nothing (a closed popup, hover switched
|
|
3400
|
+
* off). Runs the exit fade. */
|
|
3401
|
+
hidden?: boolean;
|
|
3402
|
+
rect?: never;
|
|
3403
|
+
session?: never;
|
|
3404
|
+
}
|
|
3405
|
+
interface HighlightFromRect {
|
|
3406
|
+
/** For lists that resolve their own rect (the sidebar's unified scope):
|
|
3407
|
+
* the rect to sit on, in the container's coordinate space. `null` hides
|
|
3408
|
+
* the highlight (it fades out on `spring.fast.exit`). */
|
|
3409
|
+
rect: ItemRect | null;
|
|
3410
|
+
/** `sessionRef.current` from `useFluidHover`. It increments when the
|
|
3411
|
+
* cursor enters the container, which re-keys the highlight so it fades in
|
|
3412
|
+
* at `from ?? rect` instead of sliding over from wherever it was last. */
|
|
3413
|
+
session: number;
|
|
3414
|
+
hover?: never;
|
|
3415
|
+
hidden?: never;
|
|
3416
|
+
}
|
|
3417
|
+
type FluidHoverHighlightProps = (HighlightFromHook | HighlightFromRect) & {
|
|
3418
|
+
/** Where a fresh session fades in from. A dropdown passes its checked row,
|
|
3419
|
+
* a nav menu its active route. Defaults to the rect itself. */
|
|
3420
|
+
from?: ItemRect | null;
|
|
3421
|
+
/** Radius, z-index, anything else. Merged onto
|
|
3422
|
+
* `absolute bg-hover pointer-events-none`. */
|
|
3423
|
+
className?: string;
|
|
3424
|
+
/** The positional spring. Defaults to `spring.fast`. Pass `false` to snap
|
|
3425
|
+
* to the new rect with no travel (a layout reflow that moved the rows
|
|
3426
|
+
* underneath, not a hover change). The opacity fade is always 0.08s. */
|
|
3427
|
+
transition?: Transition2 | false;
|
|
3428
|
+
};
|
|
3429
|
+
type Element_12xgc27 = JSX_1kxb27["Element"];
|
|
3430
|
+
declare function FluidHoverHighlight(props: FluidHoverHighlightProps): Element_12xgc27;
|
|
3431
|
+
type FluidHoverAxis = "x" | "y" | "xy";
|
|
3432
|
+
interface FluidHoverItemProps extends HTMLAttributes28<HTMLButtonElement> {
|
|
3433
|
+
/** Position in the list. Assigned automatically to direct children of `FluidHover`; pass it by hand for rows rendered inside a wrapper of your own. */
|
|
3434
|
+
index?: number;
|
|
3435
|
+
/** Skips the row: never lit, never the target of a gap click. It stays registered, so its neighbours keep their indices. Defaults to `false`. */
|
|
3436
|
+
disabled?: boolean;
|
|
3437
|
+
/** The row's content — a label, or an icon plus text, or (on `xy`) a title over a description. */
|
|
3438
|
+
children?: ReactNode31;
|
|
3439
|
+
/** Classes for the row, merged over the per-axis defaults. */
|
|
3440
|
+
className?: string;
|
|
3441
|
+
}
|
|
3442
|
+
/**
|
|
3443
|
+
* One row of a fluid hover list: a real button, focusable and activatable from
|
|
3444
|
+
* the keyboard, announced by its label. It registers itself with the
|
|
3445
|
+
* surrounding `FluidHover` for as long as it is mounted; outside one it is
|
|
3446
|
+
* just a button.
|
|
3447
|
+
*/
|
|
3448
|
+
declare const FluidHoverItem: ForwardRefExoticComponent12<FluidHoverItemProps & RefAttributes12<HTMLButtonElement>>;
|
|
3449
|
+
interface FluidHoverProps extends HTMLAttributes28<HTMLDivElement> {
|
|
3450
|
+
/** Which way the list runs: `'y'` for lists, `'x'` for strips, `'xy'` for grids. Defaults to `'y'`, or `'xy'` when `columns` is above 1. */
|
|
3451
|
+
axis?: FluidHoverAxis;
|
|
3452
|
+
/** Grid columns. Above 1 the container becomes a grid and resolves the nearest item across rows and columns. Defaults to `1`, or `2` when `axis` is `'xy'`. */
|
|
3453
|
+
columns?: number;
|
|
3454
|
+
/** Shorthand rows: one `FluidHover.Item` per string, indexed in order. Omit it and pass `FluidHover.Item` children instead. */
|
|
3455
|
+
items?: string[];
|
|
3456
|
+
/** Renders the content of a shorthand row. Defaults to the string itself. */
|
|
3457
|
+
renderItem?: (item: string, index: number) => ReactNode31;
|
|
3458
|
+
/** Rows to skip: never lit, never the target of a gap click. They stay registered, so their neighbours keep their indices. */
|
|
3459
|
+
disabledIndices?: number[];
|
|
3460
|
+
/** Whether a click that lands between rows goes to the lit one, so what is lit is what a click hits. `false` leaves empty space inert; `{ maxDistance }` routes only clicks within that many pixels of the lit row. Defaults to `true`. */
|
|
3461
|
+
gapClick?: boolean | {
|
|
3462
|
+
maxDistance?: number;
|
|
3463
|
+
};
|
|
3464
|
+
/** Classes for the highlight itself — radius and z-index. Merged over `absolute bg-hover` and the shape system's radius. */
|
|
3465
|
+
highlightClassName?: string;
|
|
3466
|
+
/** Classes for the list container. Padding here is part of the list: a click in it still lands on the lit row. */
|
|
3467
|
+
className?: string;
|
|
3468
|
+
/** `FluidHover.Item` rows, when `items` is not enough. Direct Item children are indexed in order. */
|
|
3469
|
+
children?: ReactNode31;
|
|
3470
|
+
}
|
|
3471
|
+
type FluidHoverComponent = ForwardRefExoticComponent12<FluidHoverProps & RefAttributes12<HTMLDivElement>> & {
|
|
3472
|
+
Item: typeof FluidHoverItem;
|
|
3473
|
+
};
|
|
3474
|
+
/**
|
|
3475
|
+
* Hover that never blinks and always follows your cursor to the nearest item.
|
|
3476
|
+
*
|
|
3477
|
+
* One rule, no dead zones: an item the pointer is inside wins, and otherwise
|
|
3478
|
+
* the item whose center is nearest does — so a cursor in a gap, in the
|
|
3479
|
+
* padding, or past the last row still lands on something, and a click there
|
|
3480
|
+
* lands on what is lit (`gapClick`). One list is one FluidHover: it owns the
|
|
3481
|
+
* container's mouse handlers, hands every row its index, and draws the single
|
|
3482
|
+
* highlight that melts between the measured rectangles, stretching toward the
|
|
3483
|
+
* next row and letting go (the liquid indicators in Morph).
|
|
3484
|
+
*
|
|
3485
|
+
* Three axes, one feel. `y` is for lists — menus, tables, radio rows — and
|
|
3486
|
+
* measures the vertical center; `x` is for strips — tabs, segmented controls —
|
|
3487
|
+
* and measures the horizontal one; `xy` is for card grids, where the nearest
|
|
3488
|
+
* card is the shortest straight line to a center across both rows and columns.
|
|
3489
|
+
* Pass `columns` and the container becomes that grid and picks `xy` on its own.
|
|
3490
|
+
*
|
|
3491
|
+
* Split a list at the divider. Rows that are alternatives to each other share
|
|
3492
|
+
* one list — children ride with their parent — and the highlight never crosses
|
|
3493
|
+
* into a different kind of thing: that is a second FluidHover. A disabled row
|
|
3494
|
+
* is skipped rather than unregistered (`disabledIndices`, or `disabled` on the
|
|
3495
|
+
* row), so the rows around it keep their indices and their measurements.
|
|
3496
|
+
*
|
|
3497
|
+
* It costs 1 transform and 1 loop per move: the pick is one pass
|
|
3498
|
+
* over cached rectangles per animation frame, with no DOM reads per row, and
|
|
3499
|
+
* the highlight travels on a transform. While it melts, a shrinking blob and
|
|
3500
|
+
* the goo filter join it, and both are gone once it settles, so a resting
|
|
3501
|
+
* highlight is filtered by nothing. Reduced motion is honoured on its own,
|
|
3502
|
+
* read straight off the OS media query with no MotionConfig wrapper needed:
|
|
3503
|
+
* the highlight still fades in on the nearest row, it just stops travelling
|
|
3504
|
+
* between rows.
|
|
3505
|
+
*
|
|
3506
|
+
* Use it when everything in the list can be clicked (a menu, a list, tabs, a
|
|
3507
|
+
* grid of links), when the items sit close together, and when they stay where
|
|
3508
|
+
* they are while you look at them. Skip it when a wrong click would hurt, when
|
|
3509
|
+
* only some of the cards can be clicked, when there is a lot of empty space
|
|
3510
|
+
* around the items, or when rows change place as you scroll.
|
|
3511
|
+
*
|
|
3512
|
+
* Statics: FluidHover.Item — one row, rendered as a real button (focusable,
|
|
3513
|
+
* activatable from the keyboard, announced by its label); the hook only lights
|
|
3514
|
+
* it, it never moves focus.
|
|
3515
|
+
*
|
|
3516
|
+
* For a list this container cannot express, the machinery is re-exported
|
|
3517
|
+
* unchanged. `useFluidHover(containerRef, { axis, isItemDisabled, gapClick })`
|
|
3518
|
+
* returns `{ handlers, registerItem, activeIndex, setActiveIndex, itemRects,
|
|
3519
|
+
* isMeasured, remeasure, sessionRef }`: spread `handlers` on the container,
|
|
3520
|
+
* give each row `useRegisterFluidHoverItem(registerItem, index, ref)`, light a
|
|
3521
|
+
* row yourself with `setActiveIndex` for keyboard focus, and call `remeasure`
|
|
3522
|
+
* when the rects may be stale (a popup opening on rows that never unmounted).
|
|
3523
|
+
* `FluidHoverHighlight` then draws the fill: `hover` is the hook's return
|
|
3524
|
+
* value, `hidden` keeps the state but shows nothing, `from` is where a fresh
|
|
3525
|
+
* entry fades in (a dropdown passes its checked row), `className` carries
|
|
3526
|
+
* radius and z-index, and `transition` is the travel — `false` snaps into
|
|
3527
|
+
* place after a reflow instead of sliding.
|
|
3528
|
+
*
|
|
3529
|
+
* @example {@include ./examples.mdx}
|
|
3530
|
+
*/
|
|
3531
|
+
declare const FluidHover: FluidHoverComponent;
|
|
3532
|
+
import { ReactNode as ReactNode33 } from "react";
|
|
3533
|
+
import { ReactNode as ReactNode32 } from "react";
|
|
3534
|
+
import { JSX as JSX_1kxb28 } from "react";
|
|
3535
|
+
interface MorphPartProps {
|
|
3536
|
+
/** Pairs the part in the trigger with its twin in the overlay; unique within one overlay. */
|
|
3537
|
+
id: string;
|
|
3538
|
+
/** Classes for the part's box. */
|
|
3539
|
+
className?: string;
|
|
3540
|
+
/** The part's content: an image, a title. */
|
|
3541
|
+
children?: ReactNode32;
|
|
3542
|
+
}
|
|
3543
|
+
type Element_12xgc28 = JSX_1kxb28["Element"];
|
|
3544
|
+
declare function MorphPart({ id, className, children }: MorphPartProps): Element_12xgc28;
|
|
3545
|
+
import { JSX as JSX_1kxb29 } from "react";
|
|
3546
|
+
interface MorphProps {
|
|
3547
|
+
/** Where the panel grows from: the pressed `'trigger'`, the press `'pointer'` (a circle; keyboard opens use the trigger's center), the panel's own `'center'`, or a viewport edge (`'top'`, `'right'`, `'bottom'`, `'left'`). Defaults to `'trigger'`. */
|
|
3548
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left";
|
|
3549
|
+
/** How it gets there: `'goo'` grows the surface with a liquid neck to its source, `'morph'` grows it without one, `'slide'` moves the finished panel in, `'fade'` only fades (what every effect becomes under reduced motion). Defaults to `'goo'`. */
|
|
3550
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
3551
|
+
/** Spring tier of a plain morph, slide or fade, which closes on the tier's faster exit tween; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
|
|
3552
|
+
tier?: "moderate" | "slow";
|
|
3553
|
+
/** Hide the trigger while the panel is open, so the trigger reads as becoming the panel. Defaults to `false`. */
|
|
3554
|
+
hideSource?: boolean;
|
|
3555
|
+
/** Controlled open state. Pair with `onOpenChange`. */
|
|
3556
|
+
open?: boolean;
|
|
3557
|
+
/** Uncontrolled initial open state, toggled by the built-in trigger. Defaults to `false`. */
|
|
3558
|
+
defaultOpen?: boolean;
|
|
3559
|
+
/** Called with the next open state when the trigger is pressed. */
|
|
3560
|
+
onOpenChange?: (open: boolean) => void;
|
|
3561
|
+
/** Label of the built-in trigger. Defaults to `'Open'`. */
|
|
3562
|
+
label?: string;
|
|
3563
|
+
/** Extra classes for the stage (trigger + panel). */
|
|
3564
|
+
className?: string;
|
|
3565
|
+
/** The panel's content. */
|
|
3566
|
+
children?: ReactNode33;
|
|
3567
|
+
}
|
|
3568
|
+
type Element_12xgc29 = JSX_1kxb29["Element"];
|
|
3569
|
+
/**
|
|
3570
|
+
* Overlays grow out of whatever opened them. One progress value on a spring
|
|
3571
|
+
* tier carries the surface from its source to its own box, and every
|
|
3572
|
+
* morphing overlay in this system runs on that one engine.
|
|
3573
|
+
*
|
|
3574
|
+
* The overlay's popup keeps its final size the whole time, so Base UI's
|
|
3575
|
+
* positioning, collision flipping and focus handling never see the animation.
|
|
3576
|
+
* Inside it, three layers move: the surface's background and its shadow (the
|
|
3577
|
+
* `Elevated` level, as `SURFACE_BG` / `SURFACE_SHADOW`), the goo layer that
|
|
3578
|
+
* melts the surface into its source, and the content, revealed by a clip
|
|
3579
|
+
* from the same rect. The surface moves its real box rather than being
|
|
3580
|
+
* clipped, so its shadow is never cut off and nothing scales.
|
|
3581
|
+
*
|
|
3582
|
+
* ## Options
|
|
3583
|
+
*
|
|
3584
|
+
* Every morphing overlay takes the same `from`, `effect` and `hideSource`
|
|
3585
|
+
* options, and a spring `tier` for the effects other than goo (see Motion).
|
|
3586
|
+
*
|
|
3587
|
+
* - `from` — where the surface grows from. `'trigger'` is the trigger that
|
|
3588
|
+
* was pressed; it is measured again on close, and when it has gone or
|
|
3589
|
+
* scrolled away the surface grows from its `'center'` instead.
|
|
3590
|
+
* `'pointer'` is the press point, `'center'` the panel's own center, and an
|
|
3591
|
+
* edge (`'top'`, `'right'`, `'bottom'`, `'left'`) the side of the viewport.
|
|
3592
|
+
* Components also take a ref to any element, such as a card that
|
|
3593
|
+
* expands.
|
|
3594
|
+
* - `effect` — `'goo'` (the default) grows the surface with a liquid neck to
|
|
3595
|
+
* its source, like two drops of water merging; `'morph'` grows it without
|
|
3596
|
+
* one; `'slide'` moves the finished panel in; `'fade'` only fades.
|
|
3597
|
+
* - `hideSource` — hides the source while open, so it reads as turning into
|
|
3598
|
+
* the overlay. Focus can still return to it. With `effect="morph"` an
|
|
3599
|
+
* anchored overlay also opens in place: the panel lays over its trigger,
|
|
3600
|
+
* corner to corner, instead of beside it, so the trigger's own box is where
|
|
3601
|
+
* it starts and where it shrinks back to.
|
|
3602
|
+
*
|
|
3603
|
+
* ## Motion
|
|
3604
|
+
*
|
|
3605
|
+
* Goo runs on its own tier, `spring.goo`: it lands in about 200ms with a
|
|
3606
|
+
* little bounce and springs back in about as long, slow enough for the neck
|
|
3607
|
+
* to stretch. Its blur eases away over the last stretch, so the neck pinches
|
|
3608
|
+
* off as the surface lands, and while it melts a hairline in the shadow's
|
|
3609
|
+
* color follows the liquid shape, so a surface the color of the page still
|
|
3610
|
+
* shows it; the surface's own shadow takes over as it lets go. The other
|
|
3611
|
+
* effects open on a spring tier (`slow` by default) and close on that tier's
|
|
3612
|
+
* faster exit tween, like every other animation here (see Motion).
|
|
3613
|
+
* Reduced motion, the OS setting or a `MotionConfig` asking for it, turns every
|
|
3614
|
+
* effect into a fade.
|
|
3615
|
+
*
|
|
3616
|
+
* ## Liquid indicators
|
|
3617
|
+
*
|
|
3618
|
+
* The same goo moves everything that travels between items: the active tab
|
|
3619
|
+
* of Tabs and TabsSubtle, the Switch thumb, RadioGroup's selection and the
|
|
3620
|
+
* fluid hover highlight of every list (Select, Dropdown, Combobox, Card,
|
|
3621
|
+
* Accordion, FluidHover). The indicator springs to its new item and leaves
|
|
3622
|
+
* a blob behind. The blob lingers for a third of the spring, then follows
|
|
3623
|
+
* to the back of the new item while it shrinks, so the two melt into one
|
|
3624
|
+
* stretched drop that lets go. A long move tears it into a drop and a
|
|
3625
|
+
* droplet that catches up and is absorbed.
|
|
3626
|
+
*
|
|
3627
|
+
* Merged selections (CheckboxGroup, a multiple Dropdown) melt the same way:
|
|
3628
|
+
* a checked row grows out of its center and flows into its checked
|
|
3629
|
+
* neighbours, and an unchecked one pinches off and shrinks away.
|
|
3630
|
+
*
|
|
3631
|
+
* - The goo filter runs only while a blob is alive; at rest an indicator is
|
|
3632
|
+
* one plain element.
|
|
3633
|
+
* - The melted shape is filled with the indicator's own token, so
|
|
3634
|
+
* translucent fills such as `bg-hover` and `bg-active` melt like opaque
|
|
3635
|
+
* surfaces. Shadows are drawn again beneath the goo while it moves.
|
|
3636
|
+
* - A short move or a resize in place springs without a blob, and a square
|
|
3637
|
+
* indicator, with no radius to melt, only slides.
|
|
3638
|
+
* - Reduced motion snaps the indicator into place.
|
|
3639
|
+
*
|
|
3640
|
+
* ## Shared parts
|
|
3641
|
+
*
|
|
3642
|
+
* `Morph.Part` pairs an element in the trigger with its twin in the overlay
|
|
3643
|
+
* (same `id`), so the part flies from one to the other while the surface
|
|
3644
|
+
* morphs, and back on close: a card's image or title moving into a Dialog.
|
|
3645
|
+
*
|
|
3646
|
+
* ## The `Morph` stage
|
|
3647
|
+
*
|
|
3648
|
+
* `Morph` itself is a docs stage, not a building block: a trigger and a small
|
|
3649
|
+
* panel below it that plays one `from` × `effect` pair.
|
|
3650
|
+
*
|
|
3651
|
+
* Statics:
|
|
3652
|
+
* - `Morph.Part` — a shared part (`id`, `className`), for overlays that scope
|
|
3653
|
+
* parts (Dialog).
|
|
3654
|
+
*
|
|
3655
|
+
* @example {@include ./examples.mdx}
|
|
3656
|
+
*/
|
|
3657
|
+
declare function Morph2({ from, effect, tier, hideSource, open, defaultOpen, onOpenChange, label, className, children }: MorphProps): Element_12xgc29;
|
|
3658
|
+
import { ReactNode as ReactNode34 } from "react";
|
|
3659
|
+
declare const spring: {
|
|
3660
|
+
readonly fast: {
|
|
3661
|
+
readonly type: "spring";
|
|
3662
|
+
readonly duration: 0.08;
|
|
3663
|
+
readonly bounce: 0;
|
|
3664
|
+
readonly exit: {
|
|
3665
|
+
readonly duration: 0.06;
|
|
3666
|
+
};
|
|
3667
|
+
};
|
|
3668
|
+
readonly moderate: {
|
|
3669
|
+
readonly type: "spring";
|
|
3670
|
+
readonly duration: 0.16;
|
|
3671
|
+
readonly bounce: 0;
|
|
3672
|
+
readonly exit: {
|
|
3673
|
+
readonly duration: 0.12;
|
|
3674
|
+
};
|
|
3675
|
+
};
|
|
3676
|
+
readonly slow: {
|
|
3677
|
+
readonly type: "spring";
|
|
3678
|
+
readonly duration: 0.24;
|
|
3679
|
+
readonly bounce: 0.12;
|
|
3680
|
+
readonly exit: {
|
|
3681
|
+
readonly duration: 0.16;
|
|
3682
|
+
};
|
|
3683
|
+
};
|
|
3684
|
+
readonly goo: {
|
|
3685
|
+
readonly type: "spring";
|
|
3686
|
+
readonly visualDuration: 0.25;
|
|
3687
|
+
readonly bounce: 0.15;
|
|
3688
|
+
readonly exit: {
|
|
3689
|
+
readonly type: "spring";
|
|
3690
|
+
readonly visualDuration: 0.2;
|
|
3691
|
+
readonly bounce: 0;
|
|
3692
|
+
};
|
|
3693
|
+
};
|
|
3694
|
+
};
|
|
3695
|
+
declare const exitFallbackMs: (tier: {
|
|
3696
|
+
exit: {
|
|
3697
|
+
duration: number;
|
|
3698
|
+
} | {
|
|
3699
|
+
visualDuration: number;
|
|
3700
|
+
};
|
|
3701
|
+
}) => number;
|
|
3702
|
+
import { JSX as JSX_1kxb30 } from "react";
|
|
3703
|
+
type SpringTier = keyof typeof spring;
|
|
3704
|
+
interface MotionProps {
|
|
3705
|
+
/** Spring tier the children enter on (`spring.<tier>`); they leave on its `.exit` tween. `fast` for hover, fades and small toggles, `moderate` for dropdowns and tabs, `slow` for dialogs and large surfaces. Defaults to `'moderate'`. */
|
|
3706
|
+
tier?: "fast" | "moderate" | "slow";
|
|
3707
|
+
/** Controlled visibility — `true` animates the children in, `false` animates them out. Pair with `onShowChange`. */
|
|
3708
|
+
show?: boolean;
|
|
3709
|
+
/** Uncontrolled initial visibility, toggled by the built-in trigger. Defaults to `true`. */
|
|
3710
|
+
defaultShow?: boolean;
|
|
3711
|
+
/** Called with the next visibility when the built-in trigger is pressed. */
|
|
3712
|
+
onShowChange?: (show: boolean) => void;
|
|
3713
|
+
/** Leave on the tier's enter spring instead of its faster `.exit` tween — the drag FF's motion rules avoid; only for side-by-side comparisons. Defaults to `false`. */
|
|
3714
|
+
sameExit?: boolean;
|
|
3715
|
+
/** Forwarded to motion's `<MotionConfig reducedMotion>`: `'user'` follows the OS setting, `'always'` previews it (transforms drop out, opacity fades stay), `'never'` ignores it. Defaults to `'user'`. */
|
|
3716
|
+
reducedMotion?: "user" | "always" | "never";
|
|
3717
|
+
/** Extra classes for the wrapper (stage + trigger column). */
|
|
3718
|
+
className?: string;
|
|
3719
|
+
/** The content that animates in and out. */
|
|
3720
|
+
children: ReactNode34;
|
|
3721
|
+
}
|
|
3722
|
+
type Element_12xgc30 = JSX_1kxb30["Element"];
|
|
3723
|
+
/**
|
|
3724
|
+
* Three spring speeds, exits a little faster than entrances, and one fluid
|
|
3725
|
+
* hover shared by every list. Pick a speed, wire it in — every component
|
|
3726
|
+
* follows the same pattern.
|
|
3727
|
+
*
|
|
3728
|
+
* All animation comes from one of three springs in `lib/springs`
|
|
3729
|
+
* (re-exported here as `spring`). Hover states and small toggles use `fast`,
|
|
3730
|
+
* dropdowns and tabs use `moderate`, dialogs and drawers use `slow`. No
|
|
3731
|
+
* component invents its own timing, so things you've never thought about
|
|
3732
|
+
* together move at the same pace.
|
|
3733
|
+
*
|
|
3734
|
+
* Each tier's value is the **enter** transition; its `.exit` is the matching
|
|
3735
|
+
* **exit** — a plain tween, no bounce, one tier quicker — so a dismissal reads
|
|
3736
|
+
* as crisp and final rather than replaying the entrance in reverse. The bigger
|
|
3737
|
+
* the thing that moves, the slower the tier. `moderate` is critically damped: it
|
|
3738
|
+
* lands exactly with no overshoot, so it also carries panels that must settle
|
|
3739
|
+
* precisely.
|
|
3740
|
+
*
|
|
3741
|
+
* A fourth tier, `goo`, belongs to the morph engine alone (see Morph): the goo
|
|
3742
|
+
* effect lands in about 200ms with a little bounce and springs back rather
|
|
3743
|
+
* than tweening, so its liquid neck has time to stretch and pinch off.
|
|
3744
|
+
*
|
|
3745
|
+
* ## Usage
|
|
3746
|
+
*
|
|
3747
|
+
* Enter with `transition={spring.fast}` and leave with `exit={{ opacity: 0,
|
|
3748
|
+
* transition: spring.fast.exit }}`. Never hand-write a duration: the values
|
|
3749
|
+
* belong in `springs`, not in component code.
|
|
3750
|
+
*
|
|
3751
|
+
* - `exitFallbackMs(tier)` (also exported) is the tier's exit in ms plus a 100ms
|
|
3752
|
+
* buffer, for deferred-unmount timers that guard an exit tween.
|
|
3753
|
+
* - CSS consumers get the same tiers from `tokens/motion.css`
|
|
3754
|
+
* (`--duration-<tier>` and `--duration-<tier>-exit`).
|
|
3755
|
+
*
|
|
3756
|
+
* ## Reduced motion
|
|
3757
|
+
*
|
|
3758
|
+
* Every spring respects the OS setting once the app tree is wrapped in
|
|
3759
|
+
* `<MotionConfig reducedMotion="user">`. With reduced motion on, position and
|
|
3760
|
+
* scale changes drop out and only the opacity fades remain.
|
|
3761
|
+
*
|
|
3762
|
+
* ## The `Motion` demo
|
|
3763
|
+
*
|
|
3764
|
+
* `Motion` itself is a docs demo, not a building block: it shows or hides its
|
|
3765
|
+
* children with one tier's enter spring and exit tween (fade + scale + a short
|
|
3766
|
+
* rise), with a built-in Show/Hide trigger and a readout of the token it plays.
|
|
3767
|
+
* Hidden children keep their space and leave the accessibility tree.
|
|
3768
|
+
*
|
|
3769
|
+
* @example {@include ./examples.mdx}
|
|
3770
|
+
*/
|
|
3771
|
+
declare function Motion({ tier, show, defaultShow, onShowChange, sameExit, reducedMotion, className, children }: MotionProps): Element_12xgc30;
|
|
3772
|
+
import { ComponentPropsWithoutRef as ComponentPropsWithoutRef2, ForwardRefExoticComponent as ForwardRefExoticComponent13, ReactNode as ReactNode35, RefAttributes as RefAttributes13 } from "react";
|
|
3773
|
+
import { ScrollAreaScrollbarProps as ScrollAreaScrollbarProps_g9nf4s } from "@base-ui/react";
|
|
3774
|
+
type Orientation = "vertical" | "horizontal" | "both";
|
|
3775
|
+
interface ScrollAreaProps extends ComponentPropsWithoutRef2<"div"> {
|
|
3776
|
+
/** Classes for the inner scrolling viewport — where the `scroll-fade` / `scroll-fade-x` utility goes. */
|
|
3777
|
+
viewportClassName?: string;
|
|
3778
|
+
/** Which axes get scrollbars. Defaults to `"vertical"`. */
|
|
3779
|
+
orientation?: Orientation;
|
|
3780
|
+
/** Classes for the outer container — set the height/width constraint here. */
|
|
3781
|
+
className?: string;
|
|
3782
|
+
/** The scrolling content. Give it an intrinsic size (`w-max`, `whitespace-nowrap`) to overflow horizontally. */
|
|
3783
|
+
children?: ReactNode35;
|
|
3784
|
+
}
|
|
3785
|
+
interface ScrollAreaStatics {
|
|
3786
|
+
/** `ScrollBar` — one scrollbar, for composing a Base UI scroll area by hand. */
|
|
3787
|
+
Bar: typeof ScrollBar;
|
|
3788
|
+
}
|
|
3789
|
+
/**
|
|
3790
|
+
* A scrollbar that stays out of the way but never disappears, over shadcn's
|
|
3791
|
+
* scroll-fade as the baseline edge treatment — restyled to the shape system,
|
|
3792
|
+
* with native scroll physics on touch.
|
|
3793
|
+
*
|
|
3794
|
+
* macOS hides the scrollbar until you start scrolling, so a clipped list
|
|
3795
|
+
* gives no sign it has more below. Here the thumb rests narrow and
|
|
3796
|
+
* low-contrast, then widens and darkens on hover, and its radius follows the
|
|
3797
|
+
* shape system. `className` constrains the outer box; `viewportClassName`
|
|
3798
|
+
* goes on the inner scrolling viewport, where the `scroll-fade` (or
|
|
3799
|
+
* `scroll-fade-x`) utility dissolves the edges that have more to scroll. On
|
|
3800
|
+
* touch-primary devices the whole thing steps aside for native overflow
|
|
3801
|
+
* scrolling. Built on Base UI's ScrollArea; scrollbar machinery adapted from
|
|
3802
|
+
* Lina (https://lina.sameer.sh).
|
|
3803
|
+
*
|
|
3804
|
+
* Statics:
|
|
3805
|
+
* - `ScrollArea.Bar` — the standalone `ScrollBar`, for hand-composed scroll
|
|
3806
|
+
* areas.
|
|
3807
|
+
*
|
|
3808
|
+
* @example {@include ./examples.mdx}
|
|
3809
|
+
*/
|
|
3810
|
+
declare const ScrollArea: ForwardRefExoticComponent13<ScrollAreaProps & RefAttributes13<HTMLDivElement>> & ScrollAreaStatics;
|
|
3811
|
+
declare const ScrollBar: ForwardRefExoticComponent13<Omit<Omit<ScrollAreaScrollbarProps_g9nf4s, "ref"> & RefAttributes13<HTMLDivElement>, "ref"> & RefAttributes13<HTMLDivElement>>;
|
|
3812
|
+
import { ReactNode as ReactNode36 } from "react";
|
|
3813
|
+
import { JSX as JSX_1kxb31 } from "react";
|
|
3814
|
+
type Element_12xgc31 = JSX_1kxb31["Element"];
|
|
3815
|
+
/**
|
|
3816
|
+
* Two component sizes: a 36px default and a 28px compact. An interface reads
|
|
3817
|
+
* as one product when its controls share a sizing rhythm — a button next to a
|
|
3818
|
+
* select next to a tab should land on the same height. Each size scales text,
|
|
3819
|
+
* icons, padding and gaps together, not just the box. Compact is for dense,
|
|
3820
|
+
* data-heavy tools (filter bars, toolbars, table headers, sidebars); default
|
|
3821
|
+
* is the right call for everything else.
|
|
3822
|
+
*
|
|
3823
|
+
* Density is a region decision, not a per-control one: wrap the region in a
|
|
3824
|
+
* `SizeProvider` and every sized component inside follows — menus included,
|
|
3825
|
+
* since React context crosses portals. Precedence is explicit `size` prop on
|
|
3826
|
+
* the component > nearest `SizeProvider` > `'default'`. Button, Badge,
|
|
3827
|
+
* Select, Tabs, TabsSubtle, Dropdown, CheckboxGroup, RadioGroup, Input,
|
|
3828
|
+
* InputGroup, InputCopy, InputMessage, Table, Switch, Slider, Accordion, Card,
|
|
3829
|
+
* ColorPicker, ThinkingIndicator, Calendar and the date and time pickers all
|
|
3830
|
+
* take that per-component `size`. Type follows the ladder too: compact drops
|
|
3831
|
+
* each type role one notch.
|
|
3832
|
+
*
|
|
3833
|
+
* Also exported from this item: `useSize(override?)`, `useSizeVariant(override?)`,
|
|
3834
|
+
* `useSizeContext()` (`{ size, setSize }` inside a provider), `useTypeScale(override?)`,
|
|
3835
|
+
* the `sizeMap` and `typeScale` tables, and the `SizeVariant`, `SizeClasses`,
|
|
3836
|
+
* `TypeScaleRole`, `TypeScaleStep` types.
|
|
3837
|
+
*
|
|
3838
|
+
* @example {@include ./examples.mdx}
|
|
3839
|
+
*/
|
|
3840
|
+
declare function SizeProvider({ children, size, defaultSize }: {
|
|
3841
|
+
/** The region whose controls follow the step — popups opened from inside it included. */
|
|
3842
|
+
children: ReactNode36;
|
|
3843
|
+
/** Controlled variant — pins every control in the subtree to one step, overriding internal state. `'default'` is 36px controls, `'compact'` is 28px. */
|
|
3844
|
+
size?: "default" | "compact";
|
|
3845
|
+
/** Uncontrolled initial variant, switchable via `useSizeContext().setSize`. Defaults to `'default'`. */
|
|
3846
|
+
defaultSize?: "default" | "compact";
|
|
3847
|
+
}): Element_12xgc31;
|
|
3848
|
+
import { ComponentPropsWithoutRef as ComponentPropsWithoutRef3, ForwardRefExoticComponent as ForwardRefExoticComponent14, ReactNode as ReactNode38, RefAttributes as RefAttributes14 } from "react";
|
|
3849
|
+
declare function surfaceClasses(bgLevel: number, shadowLevel?: number): string;
|
|
3850
|
+
import { ReactNode as ReactNode37 } from "react";
|
|
3851
|
+
import { JSX as JSX_1kxb32 } from "react";
|
|
3852
|
+
declare function useSurface(): number;
|
|
3853
|
+
type Element_12xgc32 = JSX_1kxb32["Element"];
|
|
3854
|
+
declare function SurfaceProvider({ value, children }: {
|
|
3855
|
+
value: number;
|
|
3856
|
+
children: ReactNode37;
|
|
3857
|
+
}): Element_12xgc32;
|
|
3858
|
+
interface ElevatedProps extends ComponentPropsWithoutRef3<"div"> {
|
|
3859
|
+
/**
|
|
3860
|
+
* Steps above the current substrate.
|
|
3861
|
+
*
|
|
3862
|
+
* The component's own surface level becomes `min(substrate + offset, 8)`
|
|
3863
|
+
* and is re-provided to descendants via SurfaceProvider, so further
|
|
3864
|
+
* nesting walks up the ladder automatically.
|
|
3865
|
+
*
|
|
3866
|
+
* Conventional offsets:
|
|
3867
|
+
* 2 — dropdown / popover / select menu
|
|
3868
|
+
* 4 — dialog / modal
|
|
3869
|
+
*/
|
|
3870
|
+
offset: number;
|
|
3871
|
+
/**
|
|
3872
|
+
* Override for the shadow level. Defaults to the computed surface level.
|
|
3873
|
+
*
|
|
3874
|
+
* Pass a fixed value when the component should keep a constant shadow
|
|
3875
|
+
* weight regardless of how deeply it's nested — e.g. a dropdown always
|
|
3876
|
+
* reads `shadow-surface-3` whether it opens on the page or inside a
|
|
3877
|
+
* dialog, even though its background tracks the substrate.
|
|
3878
|
+
*/
|
|
3879
|
+
shadowLevel?: number;
|
|
3880
|
+
/** Merged after the surface classes; radius and padding go here. */
|
|
3881
|
+
className?: string;
|
|
3882
|
+
/** Content of the surface. Everything inside reads this surface's level as its substrate. */
|
|
3883
|
+
children?: ReactNode38;
|
|
3884
|
+
}
|
|
3885
|
+
interface ElevatedStatics {
|
|
3886
|
+
/** `SurfaceProvider` — set the substrate for a subtree by hand. */
|
|
3887
|
+
Provider: typeof SurfaceProvider;
|
|
3888
|
+
}
|
|
3889
|
+
/**
|
|
3890
|
+
* Eight surface levels that nest. Components read their substrate from
|
|
3891
|
+
* context and lift relative to it, so popovers, dropdowns, and dialogs stay
|
|
3892
|
+
* visible at any depth — in both light and dark mode.
|
|
3893
|
+
*
|
|
3894
|
+
* Three pieces: tokens, substrate context, and the primitive. The tokens are
|
|
3895
|
+
* eight `bg-surface-N` / `shadow-surface-N` pairs. The substrate is a React
|
|
3896
|
+
* context holding the level of the container you are in (1, the page, when
|
|
3897
|
+
* nothing provides one). `Elevated` reads that substrate, settles at
|
|
3898
|
+
* `min(substrate + offset, 8)`, paints the matching background and shadow,
|
|
3899
|
+
* and re-provides its own level, so nested surfaces keep climbing the ladder
|
|
3900
|
+
* without anything passed between them. Conventional offsets: 2 for a
|
|
3901
|
+
* dropdown, popover or select menu; 4 for a dialog or modal. All other props
|
|
3902
|
+
* (ref included) go to the `div`.
|
|
3903
|
+
*
|
|
3904
|
+
* Statics:
|
|
3905
|
+
* - `Elevated.Provider` — `SurfaceProvider`: set the substrate for a subtree
|
|
3906
|
+
* by hand (1 page, 3 popover, 5 dialog).
|
|
3907
|
+
*
|
|
3908
|
+
* Also exported: `SurfaceProvider`, `useSurface()` (the current substrate
|
|
3909
|
+
* level, 1 when no provider is present) and `surfaceClasses(bgLevel,
|
|
3910
|
+
* shadowLevel = bgLevel)` for components that paint a level without
|
|
3911
|
+
* `Elevated`.
|
|
3912
|
+
*
|
|
3913
|
+
* @example {@include ./examples.mdx}
|
|
3914
|
+
*/
|
|
3915
|
+
declare const Elevated: ForwardRefExoticComponent14<ElevatedProps & RefAttributes14<HTMLDivElement>> & ElevatedStatics;
|
|
3916
|
+
import { ReactNode as ReactNode39 } from "react";
|
|
3917
|
+
import { JSX as JSX_1kxb33 } from "react";
|
|
3918
|
+
type ShapeVariant = "pill" | "rounded";
|
|
3919
|
+
type Element_12xgc33 = JSX_1kxb33["Element"];
|
|
3920
|
+
declare function ShapeProvider({ children, defaultShape }: {
|
|
3921
|
+
children: ReactNode39;
|
|
3922
|
+
defaultShape?: ShapeVariant;
|
|
3923
|
+
}): Element_12xgc33;
|
|
3924
|
+
import { CnFunction } from "cn";
|
|
3925
|
+
declare const cn: CnFunction;
|
|
3926
|
+
export { useTypeScale, useToast, useSurface, useSizeVariant, useSizeContext, useSize, useSidebar, useRegisterFluidHoverItem, useFluidHover, useDropdownMaybe, useDropdown, useDialogState, typeScale, triggerVariants, surfaceClasses, spring, sizeMap, sidebarMenuButtonVariants, parseColor, exitFallbackMs, fieldVariants as comboboxFieldVariants, cn, buttonVariants, buildParsed, badgeVariants, badgeColors, ValuePosition, UseFluidHoverReturn, UseFluidHoverOptions, TypeScaleStep, TypeScaleRole, TooltipSide, TooltipProviderProps, TooltipProvider, TooltipProps, TooltipPortalContainer, Tooltip, ToastType, ToastTriggerProps, ToastTrigger, ToastProps, ToastPosition, ToastOptions, Toast, TimePickerProps, TimePicker, ThinkingIndicatorProps, ThinkingIndicator, TabsSubtleProps, TabsSubtlePanelProps, TabsSubtlePanel, TabsSubtleItemProps, TabsSubtleItem, TabsSubtle, TabsProps, TabsListProps, TabsList, Tabs, TableRowProps, TableRow, TableProps, TableHeader, TableHead, TableCell, TableBody, Table, TabPanelProps, TabPanel, TabItemProps, TabItem, SwitchProps, Switch, SurfaceProvider, SpringTier, SliderValue, SliderProps, SliderComfortableProps, SliderComfortable, Slider, SizeVariant, SizeProvider, SizeClasses, SidebarVariant, SidebarTriggerProps, SidebarTrigger, SidebarSide, SidebarSeparator, SidebarSelectionValue, SidebarSelection, SidebarSectionProps, SidebarRailProps, SidebarRail, SidebarProviderProps, SidebarProvider, SidebarProps, SidebarMenuSubProps, SidebarMenuSubItemProps, SidebarMenuSubItem, SidebarMenuSubButtonProps, SidebarMenuSubButton, SidebarMenuSub, SidebarMenuSkeletonProps, SidebarMenuSkeleton, SidebarMenuProps, SidebarMenuItemProps, SidebarMenuItem, SidebarMenuButtonProps, SidebarMenuButton, SidebarMenuBadgeProps, SidebarMenuBadge, SidebarMenuActions, SidebarMenuActionProps, SidebarMenuAction, SidebarMenu, SidebarInsetProps, SidebarInset, SidebarInputProps, SidebarInput, SidebarHeader, SidebarGroupLabelProps, SidebarGroupLabel, SidebarGroupContent, SidebarGroupActions, SidebarGroupActionProps, SidebarGroupAction, SidebarGroup, SidebarFooter, SidebarContextValue, SidebarContentProps, SidebarContent, SidebarCollapsible, SidebarAppProps, SidebarApp, Sidebar, SheetSide, SheetProps, SheetIndent, SheetContentProps, SheetContent, Sheet, ShapeProvider, SelectTriggerProps, SelectTrigger, SelectSeparator, SelectProps, SelectLabel, SelectItemProps, SelectItem, SelectGroup, SelectContentProps, SelectContent, Select, SearchProps, Search2 as Search, ScrollBar, ScrollAreaProps, ScrollArea, SIDEBAR_WIDTH_MOBILE, SIDEBAR_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_MAX_WIDTH, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_COOKIE_NAME, SIDEBAR_COOKIE_MAX_AGE, RadioItemProps, RadioItem, RadioGroupProps, RadioGroup, QueuedMessage, PreviewCardTriggerProps, PreviewCardTrigger, PreviewCardProps, PreviewCardContentProps, PreviewCardContent, PreviewCard, PopoverTriggerProps, PopoverTrigger, PopoverTitle, PopoverProps, PopoverDescription, PopoverContentProps, PopoverContent, PopoverClose, Popover2 as Popover, ParsedColor, MotionProps, Motion, MorphProps, MorphPart, Morph2 as Morph, MonthPickerProps, MonthPicker, MenuItemRenderOptions, MenuItem2 as MenuItem, LabelProps, Label2 as Label, ItemRect, InputProps, InputMessageStatus, InputMessageSlotContext, InputMessageProps, InputMessage, InputGroupProps, InputGroup, InputFieldProps, InputCopyVariant, InputCopyProps, InputCopyAlign, InputCopy, Input2 as Input, IconProvider, FluidHoverProps, FluidHoverItemProps, FluidHoverItem, FluidHoverHighlightProps, FluidHoverHighlight, FluidHoverAxis, FluidHover, FileThumbnail, ElevatedProps, Elevated, DurationPickerProps, DurationPicker, DropdownTriggerProps, DropdownTrigger, DropdownSeparator, DropdownSearchProps, DropdownSearch, DropdownProps, DropdownMenuProps, DropdownMenu, DropdownLabel, DropdownEmpty, DropdownContextValue, DropdownContentProps, DropdownContent, Dropdown, DialogSlotProps as DialogTriggerProps, DialogTrigger, DialogTitle, DialogState, DialogProps, DialogHeader, DialogFooter, DialogDescription, DialogContentProps, DialogContent, DialogSlotProps as DialogCloseProps, DialogClose, Dialog, DateRangePickerProps, DateRangePicker, DatePickerProps, DatePicker, CraftProps, ContextMenuProps, ContextMenuItemProps, ContextMenuItem, ContextMenuContentProps, ContextMenuContent, ContextMenu, CommandTrigger, CommandShortcut, CommandProps, CommandPaletteProps, CommandPalette, CommandListRoot, CommandList, CommandItems, CommandItem, CommandGroup, CommandContentProps, CommandContent, Command, ComboboxValue, ComboboxProps, ComboboxListProps, ComboboxList, ComboboxItemProps, ComboboxItemObject, ComboboxItemData, ComboboxItem, ComboboxInputProps, ComboboxInput, ComboboxEmptyProps, ComboboxEmpty, ComboboxContentProps, ComboboxContent, ComboboxChipsProps, ComboboxChips, Combobox, ColorTile, ColorSwatchProps, ColorSwatch, ColorPickerProps, ColorPickerPortalContainer, ColorPickerPopoverProps, ColorPickerPopover, ColorPicker, ColorFormat, Code, CheckboxItemProps, CheckboxItem, CheckboxGroupProps, CheckboxGroup, CardTitle, CardProps, CardMedia, CardLogo, CardImage, CardHeader, CardGroupProps, CardGroup, CardFooter, CardFeature, CardEyebrow, CardDescription, CardContent, CardButtonVariant, CardButtonProps, CardButton, CardAction, Card, CalendarProps, Calendar, ButtonSize, ButtonProps, Button2 as Button, BadgeSize, BadgeProps, BadgeColor, Badge, AlertDialogProps, AlertDialogContent, AlertDialog, AccordionTrigger, AccordionItem, AccordionGroup, AccordionContent, Accordion };
|