@justanarthur/modo-ui 0.0.0-stage → 0.2.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.
Files changed (171) hide show
  1. package/LICENSE +21 -0
  2. package/LICENSE.beui +21 -0
  3. package/LICENSE.fluid-functionalism +21 -0
  4. package/LICENSE.motion-primitives +21 -0
  5. package/LICENSE.sileo +21 -0
  6. package/README.md +608 -2
  7. package/dist/base.css +994 -0
  8. package/dist/blocks/sidebar-app/index.d.ts +34 -0
  9. package/dist/blocks/sidebar-app/index.js +31 -0
  10. package/dist/components/badge/index.d.ts +59 -0
  11. package/dist/components/badge/index.js +16 -0
  12. package/dist/components/button/index.d.ts +59 -0
  13. package/dist/components/button/index.js +14 -0
  14. package/dist/components/card/index.d.ts +141 -0
  15. package/dist/components/card/index.js +42 -0
  16. package/dist/components/inputs/checkbox-group/index.d.ts +50 -0
  17. package/dist/components/inputs/checkbox-group/index.js +21 -0
  18. package/dist/components/inputs/color-picker/index.d.ts +137 -0
  19. package/dist/components/inputs/color-picker/index.js +35 -0
  20. package/dist/components/inputs/combobox/index.d.ts +161 -0
  21. package/dist/components/inputs/combobox/index.js +38 -0
  22. package/dist/components/inputs/date-time/calendar/index.d.ts +45 -0
  23. package/dist/components/inputs/date-time/calendar/index.js +18 -0
  24. package/dist/components/inputs/date-time/date-picker/index.d.ts +82 -0
  25. package/dist/components/inputs/date-time/date-picker/index.js +32 -0
  26. package/dist/components/inputs/date-time/date-range-picker/index.d.ts +64 -0
  27. package/dist/components/inputs/date-time/date-range-picker/index.js +31 -0
  28. package/dist/components/inputs/date-time/duration-picker/index.d.ts +57 -0
  29. package/dist/components/inputs/date-time/duration-picker/index.js +31 -0
  30. package/dist/components/inputs/date-time/month-picker/index.d.ts +57 -0
  31. package/dist/components/inputs/date-time/month-picker/index.js +30 -0
  32. package/dist/components/inputs/date-time/time-picker/index.d.ts +59 -0
  33. package/dist/components/inputs/date-time/time-picker/index.js +31 -0
  34. package/dist/components/inputs/input/index.d.ts +84 -0
  35. package/dist/components/inputs/input/index.js +19 -0
  36. package/dist/components/inputs/input-copy/index.d.ts +44 -0
  37. package/dist/components/inputs/input-copy/index.js +16 -0
  38. package/dist/components/inputs/input-message/index.d.ts +125 -0
  39. package/dist/components/inputs/input-message/index.js +25 -0
  40. package/dist/components/inputs/radio-group/index.d.ts +58 -0
  41. package/dist/components/inputs/radio-group/index.js +20 -0
  42. package/dist/components/inputs/search/index.d.ts +83 -0
  43. package/dist/components/inputs/search/index.js +25 -0
  44. package/dist/components/inputs/select/index.d.ts +105 -0
  45. package/dist/components/inputs/select/index.js +34 -0
  46. package/dist/components/inputs/slider/index.d.ts +108 -0
  47. package/dist/components/inputs/slider/index.js +14 -0
  48. package/dist/components/inputs/switch/index.d.ts +43 -0
  49. package/dist/components/inputs/switch/index.js +14 -0
  50. package/dist/components/navigation/accordion/index.d.ts +117 -0
  51. package/dist/components/navigation/accordion/index.js +28 -0
  52. package/dist/components/navigation/sidebar/index.d.ts +388 -0
  53. package/dist/components/navigation/sidebar/index.js +99 -0
  54. package/dist/components/navigation/tabs/index.d.ts +70 -0
  55. package/dist/components/navigation/tabs/index.js +23 -0
  56. package/dist/components/navigation/tabs-subtle/index.d.ts +73 -0
  57. package/dist/components/navigation/tabs-subtle/index.js +21 -0
  58. package/dist/components/overlays/alert-dialog/index.d.ts +67 -0
  59. package/dist/components/overlays/alert-dialog/index.js +22 -0
  60. package/dist/components/overlays/command/index.d.ts +121 -0
  61. package/dist/components/overlays/command/index.js +36 -0
  62. package/dist/components/overlays/context-menu/index.d.ts +97 -0
  63. package/dist/components/overlays/context-menu/index.js +29 -0
  64. package/dist/components/overlays/dialog/index.d.ts +130 -0
  65. package/dist/components/overlays/dialog/index.js +37 -0
  66. package/dist/components/overlays/dropdown/index.d.ts +222 -0
  67. package/dist/components/overlays/dropdown/index.js +44 -0
  68. package/dist/components/overlays/popover/index.d.ts +87 -0
  69. package/dist/components/overlays/popover/index.js +26 -0
  70. package/dist/components/overlays/preview-card/index.d.ts +75 -0
  71. package/dist/components/overlays/preview-card/index.js +19 -0
  72. package/dist/components/overlays/sheet/index.d.ts +67 -0
  73. package/dist/components/overlays/sheet/index.js +24 -0
  74. package/dist/components/overlays/toast/index.d.ts +107 -0
  75. package/dist/components/overlays/toast/index.js +21 -0
  76. package/dist/components/overlays/tooltip/index.d.ts +75 -0
  77. package/dist/components/overlays/tooltip/index.js +17 -0
  78. package/dist/components/table/index.d.ts +44 -0
  79. package/dist/components/table/index.js +26 -0
  80. package/dist/components/thinking-indicator/index.d.ts +32 -0
  81. package/dist/components/thinking-indicator/index.js +13 -0
  82. package/dist/index.d.ts +3926 -0
  83. package/dist/index.js +511 -0
  84. package/dist/preset.d.ts +104 -0
  85. package/dist/preset.js +124 -0
  86. package/dist/primitives/code/index.d.ts +23 -0
  87. package/dist/primitives/code/index.js +11 -0
  88. package/dist/primitives/craft/index.d.ts +31 -0
  89. package/dist/primitives/craft/index.js +11 -0
  90. package/dist/primitives/fluid-hover/index.d.ts +233 -0
  91. package/dist/primitives/fluid-hover/index.js +25 -0
  92. package/dist/primitives/morph/index.d.ts +127 -0
  93. package/dist/primitives/morph/index.js +19 -0
  94. package/dist/primitives/motion/index.d.ts +115 -0
  95. package/dist/primitives/motion/index.js +19 -0
  96. package/dist/primitives/scroll-area/index.d.ts +41 -0
  97. package/dist/primitives/scroll-area/index.js +12 -0
  98. package/dist/primitives/sizes/index.d.ts +128 -0
  99. package/dist/primitives/sizes/index.js +21 -0
  100. package/dist/primitives/surface/index.d.ts +69 -0
  101. package/dist/primitives/surface/index.js +17 -0
  102. package/dist/shared/components-0ke6xada.js +123 -0
  103. package/dist/shared/components-0q0sqfh4.js +146 -0
  104. package/dist/shared/components-0sn7ypjw.js +61 -0
  105. package/dist/shared/components-1j9791sn.js +345 -0
  106. package/dist/shared/components-1rfwbyyc.js +361 -0
  107. package/dist/shared/components-1v7rxytx.js +30 -0
  108. package/dist/shared/components-1xekx2hx.js +215 -0
  109. package/dist/shared/components-39jq9va1.js +86 -0
  110. package/dist/shared/components-3gae8nta.js +719 -0
  111. package/dist/shared/components-3k8xpnpq.js +1759 -0
  112. package/dist/shared/components-3ky44908.js +9 -0
  113. package/dist/shared/components-3mkepka5.js +111 -0
  114. package/dist/shared/components-3wk0w46f.js +667 -0
  115. package/dist/shared/components-4cnjmgex.js +124 -0
  116. package/dist/shared/components-59efxjd9.js +298 -0
  117. package/dist/shared/components-5xc2j8jz.js +159 -0
  118. package/dist/shared/components-62ybc7t2.js +496 -0
  119. package/dist/shared/components-66mv71kx.js +262 -0
  120. package/dist/shared/components-7ans7ce5.js +120 -0
  121. package/dist/shared/components-7btqt08d.js +270 -0
  122. package/dist/shared/components-7r3etddy.js +171 -0
  123. package/dist/shared/components-7x9kawxv.js +152 -0
  124. package/dist/shared/components-8fpr3s4p.js +292 -0
  125. package/dist/shared/components-9jvzzvt1.js +198 -0
  126. package/dist/shared/components-apdwtweq.js +484 -0
  127. package/dist/shared/components-asr5pg50.js +191 -0
  128. package/dist/shared/components-b2wyq2cq.js +232 -0
  129. package/dist/shared/components-c6s6b43g.js +15 -0
  130. package/dist/shared/components-ca2c898n.js +1828 -0
  131. package/dist/shared/components-cbxjn9p8.js +141 -0
  132. package/dist/shared/components-chacnk61.js +216 -0
  133. package/dist/shared/components-cv16mryv.js +62 -0
  134. package/dist/shared/components-ez65vtbq.js +110 -0
  135. package/dist/shared/components-ezxhrmer.js +17 -0
  136. package/dist/shared/components-gc5vtq2f.js +149 -0
  137. package/dist/shared/components-gf5s6ap9.js +42 -0
  138. package/dist/shared/components-gvr9w41t.js +193 -0
  139. package/dist/shared/components-h2dpcwgc.js +137 -0
  140. package/dist/shared/components-hawvy2qz.js +105 -0
  141. package/dist/shared/components-hqeq3w9q.js +375 -0
  142. package/dist/shared/components-jjw69c4c.js +28 -0
  143. package/dist/shared/components-jwst3vtj.js +346 -0
  144. package/dist/shared/components-kvr7f9hy.js +45 -0
  145. package/dist/shared/components-men63rwj.js +9 -0
  146. package/dist/shared/components-mhd39z7x.js +22 -0
  147. package/dist/shared/components-n7mjr357.js +26 -0
  148. package/dist/shared/components-ng72k97e.js +128 -0
  149. package/dist/shared/components-nh8tma1n.js +986 -0
  150. package/dist/shared/components-njzgqdwy.js +445 -0
  151. package/dist/shared/components-ny774h8p.js +293 -0
  152. package/dist/shared/components-q4daerx0.js +58 -0
  153. package/dist/shared/components-q5xj5c16.js +79 -0
  154. package/dist/shared/components-rr7a6ja9.js +160 -0
  155. package/dist/shared/components-s2bz1xpk.js +63 -0
  156. package/dist/shared/components-tqvarbfv.js +288 -0
  157. package/dist/shared/components-v6xp325t.js +304 -0
  158. package/dist/shared/components-v7wtz8hk.js +144 -0
  159. package/dist/shared/components-vc7vq5nz.js +32 -0
  160. package/dist/shared/components-vfbhxf5r.js +58 -0
  161. package/dist/shared/components-vynjtrk6.js +19 -0
  162. package/dist/shared/components-wvp1m52g.js +1200 -0
  163. package/dist/shared/components-yh3kwdhr.js +981 -0
  164. package/dist/shared/components-ytb2tefr.js +291 -0
  165. package/dist/shared/components-zfnmn5d4.js +220 -0
  166. package/dist/shared/components-zrkzcayz.js +141 -0
  167. package/dist/shared/components-zx6b6yby.js +42 -0
  168. package/dist/styles.css +1949 -0
  169. package/dist/tailwind.css +219 -0
  170. package/dist/tokens.css +345 -0
  171. package/package.json +103 -4
@@ -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 { ReactNode as ReactNode20 } from "react";
2372
+ import { HTMLAttributes as HTMLAttributes19, ReactNode as ReactNode19, RefObject as RefObject11 } from "react";
2373
+ /** What opened the overlay: the pressed trigger and the press point. */
2374
+ interface MorphOrigin {
2375
+ trigger?: HTMLElement;
2376
+ point?: {
2377
+ x: number;
2378
+ y: number;
2379
+ };
2380
+ }
2381
+ import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn12 } from "react";
2382
+ import { RefAttributes as RefAttributes_miuf5612 } from "react";
2383
+ import { JSX as JSX_1kxb16 } from "react";
2384
+ type DialogSlotProps = SlotProps;
2385
+ /** The open state and origin `DialogState` provides, for content built on another Base UI popup (Sheet). */
2386
+ declare const useDialogState: () => {
2387
+ open: boolean;
2388
+ origin: RefObject11<MorphOrigin>;
2389
+ };
2390
+ declare const DialogTrigger: ForwardRefExoticComponent_tcubfn12<SlotProps & RefAttributes_miuf5612<HTMLButtonElement>>;
2391
+ declare const DialogClose: ForwardRefExoticComponent_tcubfn12<SlotProps & RefAttributes_miuf5612<HTMLButtonElement>>;
2392
+ interface DialogContentProps extends HTMLAttributes19<HTMLDivElement> {
2393
+ /** Width: 400, 540, or 880. Compact regions narrow each by 1 notch: 360,
2394
+ * 480, 800. `xl` is the canvas for composed layouts — a sidebar beside a
2395
+ * panel — which usually pair it with `className="p-0"` and a fixed
2396
+ * height. Defaults to `"sm"`. */
2397
+ size?: "sm" | "lg" | "xl";
2398
+ /** Portal target. When set, the overlay and panel render inside this element
2399
+ * (positioned `absolute`) instead of covering the viewport (`fixed`). Pair
2400
+ * with a `position: relative; overflow: hidden` container — and usually
2401
+ * `<Dialog modal={false}>` — to scope a dialog to a bounded region, e.g. a
2402
+ * docs preview. Defaults to the document body / full-viewport behaviour. */
2403
+ container?: HTMLElement | null;
2404
+ /** The ✕ in the top-right corner. Drop it when the content has its own
2405
+ * way out, e.g. a command menu that closes on Escape and on a pick.
2406
+ * Defaults to `true`. */
2407
+ showCloseButton?: boolean;
2408
+ /** Where the panel sits: centered, or anchored 12dvh from the top so a
2409
+ * panel whose height follows its content (a command menu) keeps its top
2410
+ * edge still. Defaults to `"center"`. */
2411
+ position?: "center" | "top";
2412
+ /** 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'`. */
2413
+ from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject11<HTMLElement | null>;
2414
+ /** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
2415
+ effect?: "goo" | "morph" | "slide" | "fade";
2416
+ /** Hide the trigger while open, so it reads as turning into the panel. Defaults to `false`. */
2417
+ hideSource?: boolean;
2418
+ /** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
2419
+ tier?: "moderate" | "slow";
2420
+ /** Dialog content. Everything inside reads the dialog's surface level as its substrate. */
2421
+ children?: ReactNode19;
2422
+ }
2423
+ declare const DialogContent: ForwardRefExoticComponent_tcubfn12<DialogContentProps & RefAttributes_miuf5612<HTMLDivElement>>;
2424
+ type Element_12xgc16 = JSX_1kxb16["Element"];
2425
+ declare function DialogHeader({ className,...props }: HTMLAttributes19<HTMLDivElement>): Element_12xgc16;
2426
+ declare function DialogFooter({ className,...props }: HTMLAttributes19<HTMLDivElement>): Element_12xgc16;
2427
+ declare const DialogTitle: ForwardRefExoticComponent_tcubfn12<HTMLAttributes19<HTMLHeadingElement> & RefAttributes_miuf5612<HTMLHeadingElement>>;
2428
+ declare const DialogDescription: ForwardRefExoticComponent_tcubfn12<HTMLAttributes19<HTMLParagraphElement> & RefAttributes_miuf5612<HTMLParagraphElement>>;
2429
+ interface DialogStateProps {
2430
+ open?: boolean;
2431
+ defaultOpen?: boolean;
2432
+ onOpenChange?: (open: boolean) => void;
2433
+ children: (root: {
2434
+ open: boolean;
2435
+ onOpenChange: (next: boolean, details: {
2436
+ trigger?: Element;
2437
+ event?: Event;
2438
+ }) => void;
2439
+ }) => ReactNode19;
2440
+ }
2441
+ /**
2442
+ * A dialog's open state, held here (not in Base UI's Root) because the morph
2443
+ * reads it, and the open event tells it which trigger was pressed. Also
2444
+ * scopes `Morph.Part` pairs. AlertDialog shares it.
2445
+ */
2446
+ declare function DialogState({ open, defaultOpen, onOpenChange, children }: DialogStateProps): Element_12xgc16;
2447
+ interface DialogProps {
2448
+ /** Controlled open state. */
2449
+ open?: boolean;
2450
+ /** Initial open state, for an uncontrolled dialog. Defaults to `false`. */
2451
+ defaultOpen?: boolean;
2452
+ /** Called when the dialog opens or closes. */
2453
+ onOpenChange?: (open: boolean) => void;
2454
+ /** Traps focus and locks page scroll while open. Defaults to `true`. */
2455
+ modal?: boolean;
2456
+ /** The trigger and the content — `Dialog.Trigger` plus a `Dialog.Content`. */
2457
+ children?: ReactNode19;
2458
+ }
2459
+ /**
2460
+ * 3 widths, grown out of whatever opened them.
2461
+ *
2462
+ * The panel lifts 4 surface levels off whatever substrate it opens on and
2463
+ * re-provides that level, so a dropdown or select inside it keeps climbing
2464
+ * the ladder instead of melting into the dialog. Width comes from
2465
+ * `Dialog.Content`'s `size` — 400, 540 or 880, each one notch narrower in
2466
+ * compact regions. The panel grows out of its trigger through the shared
2467
+ * morph (see Morph): goo by default on `spring.goo`, or from the press
2468
+ * point, its own center, a viewport edge or any element, and the backdrop
2469
+ * fades with it. `Morph.Part` pairs an element in the trigger with its twin
2470
+ * in the panel, so a card's image or title flies into the dialog.
2471
+ * `position="top"` anchors the panel 12dvh down so a content-sized panel (a
2472
+ * command menu) keeps its top edge still. Built on Base UI's Dialog: open
2473
+ * state is controlled with `open` / `onOpenChange` or left to `defaultOpen`.
2474
+ *
2475
+ * Statics:
2476
+ * - `Dialog.Trigger` — the control that opens it. `render={<Button/>}` or
2477
+ * Radix-style `asChild` with a single child both work.
2478
+ * - `Dialog.Content` — the panel: `size`, `position`, `showCloseButton`,
2479
+ * `container`, and the morph options `from`, `effect`, `hideSource`,
2480
+ * `tier`.
2481
+ * - `Dialog.Header` / `Dialog.Footer` — the stacked title block, and the
2482
+ * right-aligned action row.
2483
+ * - `Dialog.Title` / `Dialog.Description` — the labelled heading and its
2484
+ * supporting line, wired to the panel for screen readers.
2485
+ * - `Dialog.Close` — dismisses it; same `render` / `asChild` shape as the
2486
+ * trigger. `Dialog.Content` renders its own ✕ unless
2487
+ * `showCloseButton={false}`.
2488
+ *
2489
+ * @example {@include ./examples.mdx}
2490
+ */
2491
+ declare function Dialog({ children, open, defaultOpen, onOpenChange, modal }: DialogProps): Element_12xgc16;
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 { ReactNode as ReactNode30 } from "react";
3266
+ import { JSX as JSX_1kxb25 } from "react";
3267
+ type ShapeVariant = "pill" | "rounded";
3268
+ type Element_12xgc25 = JSX_1kxb25["Element"];
3269
+ declare function ShapeProvider({ children, defaultShape }: {
3270
+ children: ReactNode30;
3271
+ defaultShape?: ShapeVariant;
3272
+ }): Element_12xgc25;
3273
+ import { CnFunction } from "cn";
3274
+ declare const cn: CnFunction;
3275
+ import { JSX as JSX_1kxb26 } from "react";
3276
+ type Element_12xgc26 = JSX_1kxb26["Element"];
3277
+ /**
3278
+ * Source code in the theme's syntax colors, one surface step above whatever
3279
+ * it sits on.
3280
+ *
3281
+ * sugar-high tokenizes; each token type takes a `--syntax-*` token from
3282
+ * tokens/colors.css, so code follows light and dark like everything else.
3283
+ * Long lines scroll sideways under a fading edge instead of wrapping. It is
3284
+ * also the docs chrome's Code slot: every example's source and every fenced
3285
+ * block on these pages renders through it.
3286
+ *
3287
+ * @example {@include ./examples.mdx}
3288
+ */
3289
+ declare function Code({ children, language, className }: {
3290
+ /** The source to show; surrounding blank lines are trimmed. */
3291
+ children: string;
3292
+ /** Fence name, alias or extension (`tsx`, `css`, `sh`, …). Unknown names render as plain text. Defaults to `'tsx'`. */
3293
+ language?: string;
3294
+ /** Extra classes for the frame. */
3295
+ className?: string;
3296
+ }): Element_12xgc26;
3297
+ import { ReactNode as ReactNode31 } from "react";
3298
+ interface CraftProps {
3299
+ /** The naive version: the same interface with the detail missing. */
3300
+ bad: ReactNode31;
3301
+ /** The system's version, with the detail in place. */
3302
+ good: ReactNode31;
3303
+ /** What goes wrong on the bad side, in one line. */
3304
+ badNote?: string;
3305
+ /** What the good side does instead, in one line. */
3306
+ goodNote?: string;
3307
+ /** Classes for the root grid. */
3308
+ className?: string;
3309
+ }
3310
+ import { ForwardRefExoticComponent as ForwardRefExoticComponent12, HTMLAttributes as HTMLAttributes28, ReactNode as ReactNode32, RefAttributes as RefAttributes12 } from "react";
3311
+ import { Transition as Transition2 } from "motion/react";
3312
+ import { Dispatch as Dispatch2, MutableRefObject as MutableRefObject2, RefObject as RefObject19, SetStateAction as SetStateAction2 } from "react";
3313
+ interface ItemRect {
3314
+ top: number;
3315
+ height: number;
3316
+ left: number;
3317
+ width: number;
3318
+ }
3319
+ interface UseFluidHoverOptions {
3320
+ /**
3321
+ * Which direction to resolve the nearest item along.
3322
+ * "y" — vertical lists (default): closest by top/height
3323
+ * "x" — horizontal strips: closest by left/width
3324
+ * "xy" — 2-D grids: closest card across both rows AND columns,
3325
+ * measured by Euclidean distance to each item's center
3326
+ */
3327
+ axis?: "x" | "y" | "xy";
3328
+ /**
3329
+ * Makes an item invisible to hit-testing without unregistering it — for
3330
+ * rows that stay mounted while clipped away (a collapsed sub-tree).
3331
+ * Unregistering would invalidate every measurement; a skipped item keeps
3332
+ * the set stable. Consulted per mouse move, so keep it cheap.
3333
+ */
3334
+ isItemDisabled?: (element: HTMLElement) => boolean;
3335
+ /**
3336
+ * Whether a click that lands between items (a gap, the padding, past the
3337
+ * last row) is routed to the highlighted item, so what is lit is what a
3338
+ * click hits. On by default: in a menu or a list the highlight is a
3339
+ * promise about the click. Pass `false` where empty space should stay
3340
+ * inert (rows with destructive actions, generous whitespace), or
3341
+ * `{ maxDistance }` to route only clicks within that many pixels of the
3342
+ * highlighted item's edge.
3343
+ */
3344
+ gapClick?: boolean | {
3345
+ maxDistance?: number;
3346
+ };
3347
+ }
3348
+ interface UseFluidHoverReturn {
3349
+ activeIndex: number | null;
3350
+ setActiveIndex: Dispatch2<SetStateAction2<number | null>>;
3351
+ itemRects: ItemRect[];
3352
+ /**
3353
+ * True once every registered item has been measured and no remeasure is
3354
+ * pending, i.e. `itemRects` describes the current item set. Gate absolutely
3355
+ * positioned overlays on it: an overlay that mounts against a rect a later
3356
+ * pass still corrects animates from the wrong place to the right one, which
3357
+ * reads as the highlight sliding in from another row.
3358
+ */
3359
+ isMeasured: boolean;
3360
+ sessionRef: MutableRefObject2<number>;
3361
+ handlers: {
3362
+ onMouseMove: (e: React.MouseEvent) => void;
3363
+ onMouseEnter: () => void;
3364
+ onMouseLeave: () => void;
3365
+ /**
3366
+ * Routes a click that lands between items (a gap, the padding, past the
3367
+ * last row) to the highlighted item, so the highlight and the click agree:
3368
+ * what is lit is what a click hits. A click inside an item is left to the
3369
+ * item. Disabled items (`isItemDisabled`) are never activated.
3370
+ */
3371
+ onClick: (e: React.MouseEvent) => void;
3372
+ };
3373
+ registerItem: (index: number, element: HTMLElement | null) => void;
3374
+ /**
3375
+ * Invalidates the published rects and runs the hook's coalesced measurement
3376
+ * pass again, holding `isMeasured` false until it settles. Reach for it when
3377
+ * the rects may be wrong and showing an overlay against them would misplace
3378
+ * it: a popup that stays mounted between opens keeps its items registered,
3379
+ * so nothing else would notice that its rects were taken while it was
3380
+ * hidden. Registration, item resize, and container resize already trigger
3381
+ * a pass; do not call this on `children` changes.
3382
+ */
3383
+ remeasure: () => void;
3384
+ /**
3385
+ * Re-reads the rects synchronously, keeping `isMeasured` as it is. Only for
3386
+ * layout that moves the rows under a visible overlay frame by frame (the
3387
+ * accordion re-measures inside its height animation). Everything else
3388
+ * wants `remeasure`, or nothing.
3389
+ */
3390
+ measureItems: () => void;
3391
+ }
3392
+ declare function useFluidHover<T extends HTMLElement>(containerRef: RefObject19<T | null>, options?: UseFluidHoverOptions): UseFluidHoverReturn;
3393
+ /**
3394
+ * Registers an item's element with its list for as long as it is mounted.
3395
+ * The one way rows join a list: pass the hook's `registerItem` (or the copy
3396
+ * a context hands down), the row's index, and its ref. Either may be
3397
+ * missing for a row rendered outside a list (a standalone card, an accordion
3398
+ * item that is not grouped); then nothing is registered.
3399
+ */
3400
+ declare function useRegisterFluidHoverItem(registerItem: ((index: number, element: HTMLElement | null) => void) | undefined, index: number | undefined, ref: RefObject19<HTMLElement | null>): void;
3401
+ import { JSX as JSX_1kxb28 } from "react";
3402
+ /** What the highlight reads off the hook: the highlighted index, the
3403
+ * measured rects, whether they are current, and the pointer session. */
3404
+ type FluidHoverSource = Pick<UseFluidHoverReturn, "activeIndex" | "itemRects" | "isMeasured" | "sessionRef">;
3405
+ interface HighlightFromHook {
3406
+ /** The hook's return value. The highlight sits on
3407
+ * `itemRects[activeIndex]` once `isMeasured`, and re-keys on the session. */
3408
+ hover: FluidHoverSource;
3409
+ /** Keep the list's state but show nothing (a closed popup, hover switched
3410
+ * off). Runs the exit fade. */
3411
+ hidden?: boolean;
3412
+ rect?: never;
3413
+ session?: never;
3414
+ }
3415
+ interface HighlightFromRect {
3416
+ /** For lists that resolve their own rect (the sidebar's unified scope):
3417
+ * the rect to sit on, in the container's coordinate space. `null` hides
3418
+ * the highlight (it fades out on `spring.fast.exit`). */
3419
+ rect: ItemRect | null;
3420
+ /** `sessionRef.current` from `useFluidHover`. It increments when the
3421
+ * cursor enters the container, which re-keys the highlight so it fades in
3422
+ * at `from ?? rect` instead of sliding over from wherever it was last. */
3423
+ session: number;
3424
+ hover?: never;
3425
+ hidden?: never;
3426
+ }
3427
+ type FluidHoverHighlightProps = (HighlightFromHook | HighlightFromRect) & {
3428
+ /** Where a fresh session fades in from. A dropdown passes its checked row,
3429
+ * a nav menu its active route. Defaults to the rect itself. */
3430
+ from?: ItemRect | null;
3431
+ /** Radius, z-index, anything else. Merged onto
3432
+ * `absolute bg-hover pointer-events-none`. */
3433
+ className?: string;
3434
+ /** The positional spring. Defaults to `spring.fast`. Pass `false` to snap
3435
+ * to the new rect with no travel (a layout reflow that moved the rows
3436
+ * underneath, not a hover change). The opacity fade is always 0.08s. */
3437
+ transition?: Transition2 | false;
3438
+ };
3439
+ type Element_12xgc28 = JSX_1kxb28["Element"];
3440
+ declare function FluidHoverHighlight(props: FluidHoverHighlightProps): Element_12xgc28;
3441
+ type FluidHoverAxis = "x" | "y" | "xy";
3442
+ interface FluidHoverItemProps extends HTMLAttributes28<HTMLButtonElement> {
3443
+ /** Position in the list. Assigned automatically to direct children of `FluidHover`; pass it by hand for rows rendered inside a wrapper of your own. */
3444
+ index?: number;
3445
+ /** Skips the row: never lit, never the target of a gap click. It stays registered, so its neighbours keep their indices. Defaults to `false`. */
3446
+ disabled?: boolean;
3447
+ /** The row's content — a label, or an icon plus text, or (on `xy`) a title over a description. */
3448
+ children?: ReactNode32;
3449
+ /** Classes for the row, merged over the per-axis defaults. */
3450
+ className?: string;
3451
+ }
3452
+ /**
3453
+ * One row of a fluid hover list: a real button, focusable and activatable from
3454
+ * the keyboard, announced by its label. It registers itself with the
3455
+ * surrounding `FluidHover` for as long as it is mounted; outside one it is
3456
+ * just a button.
3457
+ */
3458
+ declare const FluidHoverItem: ForwardRefExoticComponent12<FluidHoverItemProps & RefAttributes12<HTMLButtonElement>>;
3459
+ interface FluidHoverProps extends HTMLAttributes28<HTMLDivElement> {
3460
+ /** Which way the list runs: `'y'` for lists, `'x'` for strips, `'xy'` for grids. Defaults to `'y'`, or `'xy'` when `columns` is above 1. */
3461
+ axis?: FluidHoverAxis;
3462
+ /** 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'`. */
3463
+ columns?: number;
3464
+ /** Shorthand rows: one `FluidHover.Item` per string, indexed in order. Omit it and pass `FluidHover.Item` children instead. */
3465
+ items?: string[];
3466
+ /** Renders the content of a shorthand row. Defaults to the string itself. */
3467
+ renderItem?: (item: string, index: number) => ReactNode32;
3468
+ /** Rows to skip: never lit, never the target of a gap click. They stay registered, so their neighbours keep their indices. */
3469
+ disabledIndices?: number[];
3470
+ /** 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`. */
3471
+ gapClick?: boolean | {
3472
+ maxDistance?: number;
3473
+ };
3474
+ /** Classes for the highlight itself — radius and z-index. Merged over `absolute bg-hover` and the shape system's radius. */
3475
+ highlightClassName?: string;
3476
+ /** Classes for the list container. Padding here is part of the list: a click in it still lands on the lit row. */
3477
+ className?: string;
3478
+ /** `FluidHover.Item` rows, when `items` is not enough. Direct Item children are indexed in order. */
3479
+ children?: ReactNode32;
3480
+ }
3481
+ type FluidHoverComponent = ForwardRefExoticComponent12<FluidHoverProps & RefAttributes12<HTMLDivElement>> & {
3482
+ Item: typeof FluidHoverItem;
3483
+ };
3484
+ /**
3485
+ * Hover that never blinks and always follows your cursor to the nearest item.
3486
+ *
3487
+ * One rule, no dead zones: an item the pointer is inside wins, and otherwise
3488
+ * the item whose center is nearest does — so a cursor in a gap, in the
3489
+ * padding, or past the last row still lands on something, and a click there
3490
+ * lands on what is lit (`gapClick`). One list is one FluidHover: it owns the
3491
+ * container's mouse handlers, hands every row its index, and draws the single
3492
+ * highlight that melts between the measured rectangles, stretching toward the
3493
+ * next row and letting go (the liquid indicators in Morph).
3494
+ *
3495
+ * Three axes, one feel. `y` is for lists — menus, tables, radio rows — and
3496
+ * measures the vertical center; `x` is for strips — tabs, segmented controls —
3497
+ * and measures the horizontal one; `xy` is for card grids, where the nearest
3498
+ * card is the shortest straight line to a center across both rows and columns.
3499
+ * Pass `columns` and the container becomes that grid and picks `xy` on its own.
3500
+ *
3501
+ * Split a list at the divider. Rows that are alternatives to each other share
3502
+ * one list — children ride with their parent — and the highlight never crosses
3503
+ * into a different kind of thing: that is a second FluidHover. A disabled row
3504
+ * is skipped rather than unregistered (`disabledIndices`, or `disabled` on the
3505
+ * row), so the rows around it keep their indices and their measurements.
3506
+ *
3507
+ * It costs 1 transform and 1 loop per move: the pick is one pass
3508
+ * over cached rectangles per animation frame, with no DOM reads per row, and
3509
+ * the highlight travels on a transform. While it melts, a shrinking blob and
3510
+ * the goo filter join it, and both are gone once it settles, so a resting
3511
+ * highlight is filtered by nothing. Reduced motion is honoured on its own,
3512
+ * read straight off the OS media query with no MotionConfig wrapper needed:
3513
+ * the highlight still fades in on the nearest row, it just stops travelling
3514
+ * between rows.
3515
+ *
3516
+ * Use it when everything in the list can be clicked (a menu, a list, tabs, a
3517
+ * grid of links), when the items sit close together, and when they stay where
3518
+ * they are while you look at them. Skip it when a wrong click would hurt, when
3519
+ * only some of the cards can be clicked, when there is a lot of empty space
3520
+ * around the items, or when rows change place as you scroll.
3521
+ *
3522
+ * Statics: FluidHover.Item — one row, rendered as a real button (focusable,
3523
+ * activatable from the keyboard, announced by its label); the hook only lights
3524
+ * it, it never moves focus.
3525
+ *
3526
+ * For a list this container cannot express, the machinery is re-exported
3527
+ * unchanged. `useFluidHover(containerRef, { axis, isItemDisabled, gapClick })`
3528
+ * returns `{ handlers, registerItem, activeIndex, setActiveIndex, itemRects,
3529
+ * isMeasured, remeasure, sessionRef }`: spread `handlers` on the container,
3530
+ * give each row `useRegisterFluidHoverItem(registerItem, index, ref)`, light a
3531
+ * row yourself with `setActiveIndex` for keyboard focus, and call `remeasure`
3532
+ * when the rects may be stale (a popup opening on rows that never unmounted).
3533
+ * `FluidHoverHighlight` then draws the fill: `hover` is the hook's return
3534
+ * value, `hidden` keeps the state but shows nothing, `from` is where a fresh
3535
+ * entry fades in (a dropdown passes its checked row), `className` carries
3536
+ * radius and z-index, and `transition` is the travel — `false` snaps into
3537
+ * place after a reflow instead of sliding.
3538
+ *
3539
+ * @example {@include ./examples.mdx}
3540
+ */
3541
+ declare const FluidHover: FluidHoverComponent;
3542
+ import { ReactNode as ReactNode34 } from "react";
3543
+ import { ReactNode as ReactNode33 } from "react";
3544
+ import { JSX as JSX_1kxb29 } from "react";
3545
+ interface MorphPartProps {
3546
+ /** Pairs the part in the trigger with its twin in the overlay; unique within one overlay. */
3547
+ id: string;
3548
+ /** Classes for the part's box. */
3549
+ className?: string;
3550
+ /** The part's content: an image, a title. */
3551
+ children?: ReactNode33;
3552
+ }
3553
+ type Element_12xgc29 = JSX_1kxb29["Element"];
3554
+ declare function MorphPart({ id, className, children }: MorphPartProps): Element_12xgc29;
3555
+ import { JSX as JSX_1kxb30 } from "react";
3556
+ interface MorphProps {
3557
+ /** 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'`. */
3558
+ from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left";
3559
+ /** 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'`. */
3560
+ effect?: "goo" | "morph" | "slide" | "fade";
3561
+ /** 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'`. */
3562
+ tier?: "moderate" | "slow";
3563
+ /** Hide the trigger while the panel is open, so the trigger reads as becoming the panel. Defaults to `false`. */
3564
+ hideSource?: boolean;
3565
+ /** Controlled open state. Pair with `onOpenChange`. */
3566
+ open?: boolean;
3567
+ /** Uncontrolled initial open state, toggled by the built-in trigger. Defaults to `false`. */
3568
+ defaultOpen?: boolean;
3569
+ /** Called with the next open state when the trigger is pressed. */
3570
+ onOpenChange?: (open: boolean) => void;
3571
+ /** Label of the built-in trigger. Defaults to `'Open'`. */
3572
+ label?: string;
3573
+ /** Extra classes for the stage (trigger + panel). */
3574
+ className?: string;
3575
+ /** The panel's content. */
3576
+ children?: ReactNode34;
3577
+ }
3578
+ type Element_12xgc30 = JSX_1kxb30["Element"];
3579
+ /**
3580
+ * Overlays grow out of whatever opened them. One progress value on a spring
3581
+ * tier carries the surface from its source to its own box, and every
3582
+ * morphing overlay in this system runs on that one engine.
3583
+ *
3584
+ * The overlay's popup keeps its final size the whole time, so Base UI's
3585
+ * positioning, collision flipping and focus handling never see the animation.
3586
+ * Inside it, three layers move: the surface's background and its shadow (the
3587
+ * `Elevated` level, as `SURFACE_BG` / `SURFACE_SHADOW`), the goo layer that
3588
+ * melts the surface into its source, and the content, revealed by a clip
3589
+ * from the same rect. The surface moves its real box rather than being
3590
+ * clipped, so its shadow is never cut off and nothing scales.
3591
+ *
3592
+ * ## Options
3593
+ *
3594
+ * Every morphing overlay takes the same `from`, `effect` and `hideSource`
3595
+ * options, and a spring `tier` for the effects other than goo (see Motion).
3596
+ *
3597
+ * - `from` — where the surface grows from. `'trigger'` is the trigger that
3598
+ * was pressed; it is measured again on close, and when it has gone or
3599
+ * scrolled away the surface grows from its `'center'` instead.
3600
+ * `'pointer'` is the press point, `'center'` the panel's own center, and an
3601
+ * edge (`'top'`, `'right'`, `'bottom'`, `'left'`) the side of the viewport.
3602
+ * Components also take a ref to any element, such as a card that
3603
+ * expands.
3604
+ * - `effect` — `'goo'` (the default) grows the surface with a liquid neck to
3605
+ * its source, like two drops of water merging; `'morph'` grows it without
3606
+ * one; `'slide'` moves the finished panel in; `'fade'` only fades.
3607
+ * - `hideSource` — hides the source while open, so it reads as turning into
3608
+ * the overlay. Focus can still return to it. With `effect="morph"` an
3609
+ * anchored overlay also opens in place: the panel lays over its trigger,
3610
+ * corner to corner, instead of beside it, so the trigger's own box is where
3611
+ * it starts and where it shrinks back to.
3612
+ *
3613
+ * ## Motion
3614
+ *
3615
+ * Goo runs on its own tier, `spring.goo`: it lands in about 200ms with a
3616
+ * little bounce and springs back in about as long, slow enough for the neck
3617
+ * to stretch. Its blur eases away over the last stretch, so the neck pinches
3618
+ * off as the surface lands, and while it melts a hairline in the shadow's
3619
+ * color follows the liquid shape, so a surface the color of the page still
3620
+ * shows it; the surface's own shadow takes over as it lets go. The other
3621
+ * effects open on a spring tier (`slow` by default) and close on that tier's
3622
+ * faster exit tween, like every other animation here (see Motion).
3623
+ * Reduced motion, the OS setting or a `MotionConfig` asking for it, turns every
3624
+ * effect into a fade.
3625
+ *
3626
+ * ## Liquid indicators
3627
+ *
3628
+ * The same goo moves everything that travels between items: the active tab
3629
+ * of Tabs and TabsSubtle, the Switch thumb, RadioGroup's selection and the
3630
+ * fluid hover highlight of every list (Select, Dropdown, Combobox, Card,
3631
+ * Accordion, FluidHover). The indicator springs to its new item and leaves
3632
+ * a blob behind. The blob lingers for a third of the spring, then follows
3633
+ * to the back of the new item while it shrinks, so the two melt into one
3634
+ * stretched drop that lets go. A long move tears it into a drop and a
3635
+ * droplet that catches up and is absorbed.
3636
+ *
3637
+ * Merged selections (CheckboxGroup, a multiple Dropdown) melt the same way:
3638
+ * a checked row grows out of its center and flows into its checked
3639
+ * neighbours, and an unchecked one pinches off and shrinks away.
3640
+ *
3641
+ * - The goo filter runs only while a blob is alive; at rest an indicator is
3642
+ * one plain element.
3643
+ * - The melted shape is filled with the indicator's own token, so
3644
+ * translucent fills such as `bg-hover` and `bg-active` melt like opaque
3645
+ * surfaces. Shadows are drawn again beneath the goo while it moves.
3646
+ * - A short move or a resize in place springs without a blob, and a square
3647
+ * indicator, with no radius to melt, only slides.
3648
+ * - Reduced motion snaps the indicator into place.
3649
+ *
3650
+ * ## Shared parts
3651
+ *
3652
+ * `Morph.Part` pairs an element in the trigger with its twin in the overlay
3653
+ * (same `id`), so the part flies from one to the other while the surface
3654
+ * morphs, and back on close: a card's image or title moving into a Dialog.
3655
+ *
3656
+ * ## The `Morph` stage
3657
+ *
3658
+ * `Morph` itself is a docs stage, not a building block: a trigger and a small
3659
+ * panel below it that plays one `from` × `effect` pair.
3660
+ *
3661
+ * Statics:
3662
+ * - `Morph.Part` — a shared part (`id`, `className`), for overlays that scope
3663
+ * parts (Dialog).
3664
+ *
3665
+ * @example {@include ./examples.mdx}
3666
+ */
3667
+ declare function Morph2({ from, effect, tier, hideSource, open, defaultOpen, onOpenChange, label, className, children }: MorphProps): Element_12xgc30;
3668
+ import { ReactNode as ReactNode35 } from "react";
3669
+ declare const spring: {
3670
+ readonly fast: {
3671
+ readonly type: "spring";
3672
+ readonly duration: 0.08;
3673
+ readonly bounce: 0;
3674
+ readonly exit: {
3675
+ readonly duration: 0.06;
3676
+ };
3677
+ };
3678
+ readonly moderate: {
3679
+ readonly type: "spring";
3680
+ readonly duration: 0.16;
3681
+ readonly bounce: 0;
3682
+ readonly exit: {
3683
+ readonly duration: 0.12;
3684
+ };
3685
+ };
3686
+ readonly slow: {
3687
+ readonly type: "spring";
3688
+ readonly duration: 0.24;
3689
+ readonly bounce: 0.12;
3690
+ readonly exit: {
3691
+ readonly duration: 0.16;
3692
+ };
3693
+ };
3694
+ readonly goo: {
3695
+ readonly type: "spring";
3696
+ readonly visualDuration: 0.25;
3697
+ readonly bounce: 0.15;
3698
+ readonly exit: {
3699
+ readonly type: "spring";
3700
+ readonly visualDuration: 0.2;
3701
+ readonly bounce: 0;
3702
+ };
3703
+ };
3704
+ };
3705
+ declare const exitFallbackMs: (tier: {
3706
+ exit: {
3707
+ duration: number;
3708
+ } | {
3709
+ visualDuration: number;
3710
+ };
3711
+ }) => number;
3712
+ import { JSX as JSX_1kxb31 } from "react";
3713
+ type SpringTier = keyof typeof spring;
3714
+ interface MotionProps {
3715
+ /** 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'`. */
3716
+ tier?: "fast" | "moderate" | "slow";
3717
+ /** Controlled visibility — `true` animates the children in, `false` animates them out. Pair with `onShowChange`. */
3718
+ show?: boolean;
3719
+ /** Uncontrolled initial visibility, toggled by the built-in trigger. Defaults to `true`. */
3720
+ defaultShow?: boolean;
3721
+ /** Called with the next visibility when the built-in trigger is pressed. */
3722
+ onShowChange?: (show: boolean) => void;
3723
+ /** 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`. */
3724
+ sameExit?: boolean;
3725
+ /** 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'`. */
3726
+ reducedMotion?: "user" | "always" | "never";
3727
+ /** Extra classes for the wrapper (stage + trigger column). */
3728
+ className?: string;
3729
+ /** The content that animates in and out. */
3730
+ children: ReactNode35;
3731
+ }
3732
+ type Element_12xgc31 = JSX_1kxb31["Element"];
3733
+ /**
3734
+ * Three spring speeds, exits a little faster than entrances, and one fluid
3735
+ * hover shared by every list. Pick a speed, wire it in — every component
3736
+ * follows the same pattern.
3737
+ *
3738
+ * All animation comes from one of three springs in `lib/springs`
3739
+ * (re-exported here as `spring`). Hover states and small toggles use `fast`,
3740
+ * dropdowns and tabs use `moderate`, dialogs and drawers use `slow`. No
3741
+ * component invents its own timing, so things you've never thought about
3742
+ * together move at the same pace.
3743
+ *
3744
+ * Each tier's value is the **enter** transition; its `.exit` is the matching
3745
+ * **exit** — a plain tween, no bounce, one tier quicker — so a dismissal reads
3746
+ * as crisp and final rather than replaying the entrance in reverse. The bigger
3747
+ * the thing that moves, the slower the tier. `moderate` is critically damped: it
3748
+ * lands exactly with no overshoot, so it also carries panels that must settle
3749
+ * precisely.
3750
+ *
3751
+ * A fourth tier, `goo`, belongs to the morph engine alone (see Morph): the goo
3752
+ * effect lands in about 200ms with a little bounce and springs back rather
3753
+ * than tweening, so its liquid neck has time to stretch and pinch off.
3754
+ *
3755
+ * ## Usage
3756
+ *
3757
+ * Enter with `transition={spring.fast}` and leave with `exit={{ opacity: 0,
3758
+ * transition: spring.fast.exit }}`. Never hand-write a duration: the values
3759
+ * belong in `springs`, not in component code.
3760
+ *
3761
+ * - `exitFallbackMs(tier)` (also exported) is the tier's exit in ms plus a 100ms
3762
+ * buffer, for deferred-unmount timers that guard an exit tween.
3763
+ * - CSS consumers get the same tiers from `tokens/motion.css`
3764
+ * (`--duration-<tier>` and `--duration-<tier>-exit`).
3765
+ *
3766
+ * ## Reduced motion
3767
+ *
3768
+ * Every spring respects the OS setting once the app tree is wrapped in
3769
+ * `<MotionConfig reducedMotion="user">`. With reduced motion on, position and
3770
+ * scale changes drop out and only the opacity fades remain.
3771
+ *
3772
+ * ## The `Motion` demo
3773
+ *
3774
+ * `Motion` itself is a docs demo, not a building block: it shows or hides its
3775
+ * children with one tier's enter spring and exit tween (fade + scale + a short
3776
+ * rise), with a built-in Show/Hide trigger and a readout of the token it plays.
3777
+ * Hidden children keep their space and leave the accessibility tree.
3778
+ *
3779
+ * @example {@include ./examples.mdx}
3780
+ */
3781
+ declare function Motion({ tier, show, defaultShow, onShowChange, sameExit, reducedMotion, className, children }: MotionProps): Element_12xgc31;
3782
+ import { ComponentPropsWithoutRef as ComponentPropsWithoutRef2, ForwardRefExoticComponent as ForwardRefExoticComponent13, ReactNode as ReactNode36, RefAttributes as RefAttributes13 } from "react";
3783
+ import { ScrollAreaScrollbarProps as ScrollAreaScrollbarProps_g9nf4s } from "@base-ui/react";
3784
+ type Orientation = "vertical" | "horizontal" | "both";
3785
+ interface ScrollAreaProps extends ComponentPropsWithoutRef2<"div"> {
3786
+ /** Classes for the inner scrolling viewport — where the `scroll-fade` / `scroll-fade-x` utility goes. */
3787
+ viewportClassName?: string;
3788
+ /** Which axes get scrollbars. Defaults to `"vertical"`. */
3789
+ orientation?: Orientation;
3790
+ /** Classes for the outer container — set the height/width constraint here. */
3791
+ className?: string;
3792
+ /** The scrolling content. Give it an intrinsic size (`w-max`, `whitespace-nowrap`) to overflow horizontally. */
3793
+ children?: ReactNode36;
3794
+ }
3795
+ interface ScrollAreaStatics {
3796
+ /** `ScrollBar` — one scrollbar, for composing a Base UI scroll area by hand. */
3797
+ Bar: typeof ScrollBar;
3798
+ }
3799
+ /**
3800
+ * A scrollbar that stays out of the way but never disappears, over shadcn's
3801
+ * scroll-fade as the baseline edge treatment — restyled to the shape system,
3802
+ * with native scroll physics on touch.
3803
+ *
3804
+ * macOS hides the scrollbar until you start scrolling, so a clipped list
3805
+ * gives no sign it has more below. Here the thumb rests narrow and
3806
+ * low-contrast, then widens and darkens on hover, and its radius follows the
3807
+ * shape system. `className` constrains the outer box; `viewportClassName`
3808
+ * goes on the inner scrolling viewport, where the `scroll-fade` (or
3809
+ * `scroll-fade-x`) utility dissolves the edges that have more to scroll. On
3810
+ * touch-primary devices the whole thing steps aside for native overflow
3811
+ * scrolling. Built on Base UI's ScrollArea; scrollbar machinery adapted from
3812
+ * Lina (https://lina.sameer.sh).
3813
+ *
3814
+ * Statics:
3815
+ * - `ScrollArea.Bar` — the standalone `ScrollBar`, for hand-composed scroll
3816
+ * areas.
3817
+ *
3818
+ * @example {@include ./examples.mdx}
3819
+ */
3820
+ declare const ScrollArea: ForwardRefExoticComponent13<ScrollAreaProps & RefAttributes13<HTMLDivElement>> & ScrollAreaStatics;
3821
+ declare const ScrollBar: ForwardRefExoticComponent13<Omit<Omit<ScrollAreaScrollbarProps_g9nf4s, "ref"> & RefAttributes13<HTMLDivElement>, "ref"> & RefAttributes13<HTMLDivElement>>;
3822
+ import { ReactNode as ReactNode37 } from "react";
3823
+ import { JSX as JSX_1kxb32 } from "react";
3824
+ type Element_12xgc32 = JSX_1kxb32["Element"];
3825
+ /**
3826
+ * Two component sizes: a 36px default and a 28px compact. An interface reads
3827
+ * as one product when its controls share a sizing rhythm — a button next to a
3828
+ * select next to a tab should land on the same height. Each size scales text,
3829
+ * icons, padding and gaps together, not just the box. Compact is for dense,
3830
+ * data-heavy tools (filter bars, toolbars, table headers, sidebars); default
3831
+ * is the right call for everything else.
3832
+ *
3833
+ * Density is a region decision, not a per-control one: wrap the region in a
3834
+ * `SizeProvider` and every sized component inside follows — menus included,
3835
+ * since React context crosses portals. Precedence is explicit `size` prop on
3836
+ * the component > nearest `SizeProvider` > `'default'`. Button, Badge,
3837
+ * Select, Tabs, TabsSubtle, Dropdown, CheckboxGroup, RadioGroup, Input,
3838
+ * InputGroup, InputCopy, InputMessage, Table, Switch, Slider, Accordion, Card,
3839
+ * ColorPicker, ThinkingIndicator, Calendar and the date and time pickers all
3840
+ * take that per-component `size`. Type follows the ladder too: compact drops
3841
+ * each type role one notch.
3842
+ *
3843
+ * Also exported from this item: `useSize(override?)`, `useSizeVariant(override?)`,
3844
+ * `useSizeContext()` (`{ size, setSize }` inside a provider), `useTypeScale(override?)`,
3845
+ * the `sizeMap` and `typeScale` tables, and the `SizeVariant`, `SizeClasses`,
3846
+ * `TypeScaleRole`, `TypeScaleStep` types.
3847
+ *
3848
+ * @example {@include ./examples.mdx}
3849
+ */
3850
+ declare function SizeProvider({ children, size, defaultSize }: {
3851
+ /** The region whose controls follow the step — popups opened from inside it included. */
3852
+ children: ReactNode37;
3853
+ /** Controlled variant — pins every control in the subtree to one step, overriding internal state. `'default'` is 36px controls, `'compact'` is 28px. */
3854
+ size?: "default" | "compact";
3855
+ /** Uncontrolled initial variant, switchable via `useSizeContext().setSize`. Defaults to `'default'`. */
3856
+ defaultSize?: "default" | "compact";
3857
+ }): Element_12xgc32;
3858
+ import { ComponentPropsWithoutRef as ComponentPropsWithoutRef3, ForwardRefExoticComponent as ForwardRefExoticComponent14, ReactNode as ReactNode39, RefAttributes as RefAttributes14 } from "react";
3859
+ declare function surfaceClasses(bgLevel: number, shadowLevel?: number): string;
3860
+ import { ReactNode as ReactNode38 } from "react";
3861
+ import { JSX as JSX_1kxb33 } from "react";
3862
+ declare function useSurface(): number;
3863
+ type Element_12xgc33 = JSX_1kxb33["Element"];
3864
+ declare function SurfaceProvider({ value, children }: {
3865
+ value: number;
3866
+ children: ReactNode38;
3867
+ }): Element_12xgc33;
3868
+ interface ElevatedProps extends ComponentPropsWithoutRef3<"div"> {
3869
+ /**
3870
+ * Steps above the current substrate.
3871
+ *
3872
+ * The component's own surface level becomes `min(substrate + offset, 8)`
3873
+ * and is re-provided to descendants via SurfaceProvider, so further
3874
+ * nesting walks up the ladder automatically.
3875
+ *
3876
+ * Conventional offsets:
3877
+ * 2 — dropdown / popover / select menu
3878
+ * 4 — dialog / modal
3879
+ */
3880
+ offset: number;
3881
+ /**
3882
+ * Override for the shadow level. Defaults to the computed surface level.
3883
+ *
3884
+ * Pass a fixed value when the component should keep a constant shadow
3885
+ * weight regardless of how deeply it's nested — e.g. a dropdown always
3886
+ * reads `shadow-surface-3` whether it opens on the page or inside a
3887
+ * dialog, even though its background tracks the substrate.
3888
+ */
3889
+ shadowLevel?: number;
3890
+ /** Merged after the surface classes; radius and padding go here. */
3891
+ className?: string;
3892
+ /** Content of the surface. Everything inside reads this surface's level as its substrate. */
3893
+ children?: ReactNode39;
3894
+ }
3895
+ interface ElevatedStatics {
3896
+ /** `SurfaceProvider` — set the substrate for a subtree by hand. */
3897
+ Provider: typeof SurfaceProvider;
3898
+ }
3899
+ /**
3900
+ * Eight surface levels that nest. Components read their substrate from
3901
+ * context and lift relative to it, so popovers, dropdowns, and dialogs stay
3902
+ * visible at any depth — in both light and dark mode.
3903
+ *
3904
+ * Three pieces: tokens, substrate context, and the primitive. The tokens are
3905
+ * eight `bg-surface-N` / `shadow-surface-N` pairs. The substrate is a React
3906
+ * context holding the level of the container you are in (1, the page, when
3907
+ * nothing provides one). `Elevated` reads that substrate, settles at
3908
+ * `min(substrate + offset, 8)`, paints the matching background and shadow,
3909
+ * and re-provides its own level, so nested surfaces keep climbing the ladder
3910
+ * without anything passed between them. Conventional offsets: 2 for a
3911
+ * dropdown, popover or select menu; 4 for a dialog or modal. All other props
3912
+ * (ref included) go to the `div`.
3913
+ *
3914
+ * Statics:
3915
+ * - `Elevated.Provider` — `SurfaceProvider`: set the substrate for a subtree
3916
+ * by hand (1 page, 3 popover, 5 dialog).
3917
+ *
3918
+ * Also exported: `SurfaceProvider`, `useSurface()` (the current substrate
3919
+ * level, 1 when no provider is present) and `surfaceClasses(bgLevel,
3920
+ * shadowLevel = bgLevel)` for components that paint a level without
3921
+ * `Elevated`.
3922
+ *
3923
+ * @example {@include ./examples.mdx}
3924
+ */
3925
+ declare const Elevated: ForwardRefExoticComponent14<ElevatedProps & RefAttributes14<HTMLDivElement>> & ElevatedStatics;
3926
+ export { Accordion, AccordionContent, AccordionGroup, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogContent, AlertDialogProps, Badge, BadgeColor, BadgeProps, BadgeSize, Button2 as Button, ButtonProps, ButtonSize, Calendar, CalendarProps, Card, CardAction, CardButton, CardButtonProps, CardButtonVariant, CardContent, CardDescription, CardEyebrow, CardFeature, CardFooter, CardGroup, CardGroupProps, CardHeader, CardImage, CardLogo, CardMedia, CardProps, CardTitle, CheckboxGroup, CheckboxGroupProps, CheckboxItem, CheckboxItemProps, Code, ColorFormat, ColorPicker, ColorPickerPopover, ColorPickerPopoverProps, ColorPickerPortalContainer, ColorPickerProps, ColorSwatch, ColorSwatchProps, ColorTile, Combobox, ComboboxChips, ComboboxChipsProps, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxEmptyProps, ComboboxInput, ComboboxInputProps, ComboboxItem, ComboboxItemData, ComboboxItemObject, ComboboxItemProps, ComboboxList, ComboboxListProps, ComboboxProps, ComboboxValue, Command, CommandContent, CommandContentProps, CommandGroup, CommandItem, CommandItems, CommandList, CommandListRoot, CommandPalette, CommandPaletteProps, CommandProps, CommandShortcut, CommandTrigger, ContextMenu, ContextMenuContent, ContextMenuContentProps, ContextMenuItem, ContextMenuItemProps, ContextMenuProps, CraftProps, DatePicker, DatePickerProps, DateRangePicker, DateRangePickerProps, Dialog, DialogClose, DialogSlotProps as DialogCloseProps, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProps, DialogState, DialogTitle, DialogTrigger, DialogSlotProps as DialogTriggerProps, Dropdown, DropdownContent, DropdownContentProps, DropdownContextValue, DropdownEmpty, DropdownLabel, DropdownMenu, DropdownMenuProps, DropdownProps, DropdownSearch, DropdownSearchProps, DropdownSeparator, DropdownTrigger, DropdownTriggerProps, DurationPicker, DurationPickerProps, Elevated, ElevatedProps, FileThumbnail, FluidHover, FluidHoverAxis, FluidHoverHighlight, FluidHoverHighlightProps, FluidHoverItem, FluidHoverItemProps, FluidHoverProps, IconProvider, Input2 as Input, InputCopy, InputCopyAlign, InputCopyProps, InputCopyVariant, InputFieldProps, InputGroup, InputGroupProps, InputMessage, InputMessageProps, InputMessageSlotContext, InputMessageStatus, InputProps, ItemRect, Label2 as Label, LabelProps, MenuItem2 as MenuItem, MenuItemRenderOptions, MonthPicker, MonthPickerProps, Morph2 as Morph, MorphPart, MorphProps, Motion, MotionProps, ParsedColor, Popover2 as Popover, PopoverClose, PopoverContent, PopoverContentProps, PopoverDescription, PopoverProps, PopoverTitle, PopoverTrigger, PopoverTriggerProps, PreviewCard, PreviewCardContent, PreviewCardContentProps, PreviewCardProps, PreviewCardTrigger, PreviewCardTriggerProps, QueuedMessage, RadioGroup, RadioGroupProps, RadioItem, RadioItemProps, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_WIDTH, SIDEBAR_WIDTH_MOBILE, ScrollArea, ScrollAreaProps, ScrollBar, Search2 as Search, SearchProps, Select, SelectContent, SelectContentProps, SelectGroup, SelectItem, SelectItemProps, SelectLabel, SelectProps, SelectSeparator, SelectTrigger, SelectTriggerProps, ShapeProvider, Sheet, SheetContent, SheetContentProps, SheetIndent, SheetProps, SheetSide, Sidebar, SidebarApp, SidebarAppProps, SidebarCollapsible, SidebarContent, SidebarContentProps, SidebarContextValue, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupActionProps, SidebarGroupActions, SidebarGroupContent, SidebarGroupLabel, SidebarGroupLabelProps, SidebarHeader, SidebarInput, SidebarInputProps, SidebarInset, SidebarInsetProps, SidebarMenu, SidebarMenuAction, SidebarMenuActionProps, SidebarMenuActions, SidebarMenuBadge, SidebarMenuBadgeProps, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuItemProps, SidebarMenuProps, SidebarMenuSkeleton, SidebarMenuSkeletonProps, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubButtonProps, SidebarMenuSubItem, SidebarMenuSubItemProps, SidebarMenuSubProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailProps, SidebarSectionProps, SidebarSelection, SidebarSelectionValue, SidebarSeparator, SidebarSide, SidebarTrigger, SidebarTriggerProps, SidebarVariant, SizeClasses, SizeProvider, SizeVariant, Slider, SliderComfortable, SliderComfortableProps, SliderProps, SliderValue, SpringTier, SurfaceProvider, Switch, SwitchProps, TabItem, TabItemProps, TabPanel, TabPanelProps, Table, TableBody, TableCell, TableHead, TableHeader, TableProps, TableRow, TableRowProps, Tabs, TabsList, TabsListProps, TabsProps, TabsSubtle, TabsSubtleItem, TabsSubtleItemProps, TabsSubtlePanel, TabsSubtlePanelProps, TabsSubtleProps, ThinkingIndicator, ThinkingIndicatorProps, TimePicker, TimePickerProps, Toast, ToastOptions, ToastPosition, ToastProps, ToastTrigger, ToastTriggerProps, ToastType, Tooltip, TooltipPortalContainer, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipSide, TypeScaleRole, TypeScaleStep, UseFluidHoverOptions, UseFluidHoverReturn, ValuePosition, badgeColors, badgeVariants, buildParsed, buttonVariants, cn, fieldVariants as comboboxFieldVariants, exitFallbackMs, parseColor, sidebarMenuButtonVariants, sizeMap, spring, surfaceClasses, triggerVariants, typeScale, useDialogState, useDropdown, useDropdownMaybe, useFluidHover, useRegisterFluidHoverItem, useSidebar, useSize, useSizeContext, useSizeVariant, useSurface, useToast, useTypeScale };