barua-ui 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.
- package/README.md +107 -0
- package/css/barua.css +28 -0
- package/css/base.css +242 -0
- package/css/components/actions.css +371 -0
- package/css/components/auth.css +237 -0
- package/css/components/charts.css +370 -0
- package/css/components/content.css +802 -0
- package/css/components/control-center.css +370 -0
- package/css/components/feedback.css +364 -0
- package/css/components/forms.css +511 -0
- package/css/components/marketing.css +280 -0
- package/css/components/media.css +321 -0
- package/css/components/mobile.css +177 -0
- package/css/components/nav.css +682 -0
- package/css/components/overlays.css +574 -0
- package/css/components/productivity.css +525 -0
- package/css/components/specialized.css +367 -0
- package/css/liquid.css +213 -0
- package/css/tokens.css +365 -0
- package/css/utilities.css +507 -0
- package/dist/index.cjs +2750 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1106 -0
- package/dist/index.d.ts +1106 -0
- package/dist/index.js +2462 -0
- package/dist/index.js.map +1 -0
- package/package.json +66 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,1106 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes, DialogHTMLAttributes, SVGProps, ElementType, TableHTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
type BaruaTheme = "auto" | "light" | "dark";
|
|
5
|
+
type BaruaAccent = "blue" | "indigo" | "purple" | "pink" | "teal" | "green";
|
|
6
|
+
interface BaruaProviderProps {
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
/** Explicit theme; "auto" follows the system. */
|
|
9
|
+
theme?: BaruaTheme;
|
|
10
|
+
/** Re-tint the whole system from one attribute. */
|
|
11
|
+
accent?: BaruaAccent;
|
|
12
|
+
/** Liquid Glass mode — re-skins every component. */
|
|
13
|
+
glass?: boolean;
|
|
14
|
+
/** Tier-2 refraction (SVG displacement in backdrop-filter, Blink only). */
|
|
15
|
+
refraction?: boolean;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Mount once at the app root. Applies theme/accent/glass attributes to
|
|
19
|
+
* <html>, enables refraction where supported, and provides the toast region.
|
|
20
|
+
*
|
|
21
|
+
* import "barua-ui/css";
|
|
22
|
+
* <BaruaProvider theme="auto" glass><App /></BaruaProvider>
|
|
23
|
+
*/
|
|
24
|
+
declare function BaruaProvider({ children, theme, accent, glass, refraction, }: BaruaProviderProps): react.JSX.Element;
|
|
25
|
+
declare function useBaruaTheme(): {
|
|
26
|
+
theme: BaruaTheme;
|
|
27
|
+
};
|
|
28
|
+
/**
|
|
29
|
+
* Inline no-flash script for SSR frameworks — render inside <head> so the
|
|
30
|
+
* stored theme applies before first paint.
|
|
31
|
+
*/
|
|
32
|
+
declare function ThemeScript(): react.JSX.Element;
|
|
33
|
+
|
|
34
|
+
type ToastVariant = "info" | "success" | "warning" | "danger";
|
|
35
|
+
interface ToastOptions {
|
|
36
|
+
title?: string;
|
|
37
|
+
description?: string;
|
|
38
|
+
variant?: ToastVariant;
|
|
39
|
+
/** ms before auto-dismiss; 0 disables */
|
|
40
|
+
duration?: number;
|
|
41
|
+
action?: {
|
|
42
|
+
label: string;
|
|
43
|
+
onClick: () => void;
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
/** Imperative toast API. Must be used inside <BaruaProvider> (or <ToastProvider>). */
|
|
47
|
+
declare function useToast(): (opts: ToastOptions) => void;
|
|
48
|
+
declare function ToastProvider({ children }: {
|
|
49
|
+
children: ReactNode;
|
|
50
|
+
}): react.JSX.Element;
|
|
51
|
+
|
|
52
|
+
type ButtonVariant = "default" | "primary" | "tinted" | "outline" | "ghost" | "glass" | "danger" | "danger-tinted" | "success" | "provider" | "liquid";
|
|
53
|
+
type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
54
|
+
interface ButtonOwnProps {
|
|
55
|
+
variant?: ButtonVariant;
|
|
56
|
+
size?: ButtonSize;
|
|
57
|
+
pill?: boolean;
|
|
58
|
+
block?: boolean;
|
|
59
|
+
loading?: boolean;
|
|
60
|
+
/** Square icon-only button (pair with aria-label). */
|
|
61
|
+
icon?: boolean;
|
|
62
|
+
active?: boolean;
|
|
63
|
+
}
|
|
64
|
+
type ButtonProps = ButtonOwnProps & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
65
|
+
declare function buttonClasses(p: ButtonOwnProps, extra?: string): string;
|
|
66
|
+
declare const Button: react.ForwardRefExoticComponent<ButtonOwnProps & ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
|
|
67
|
+
type ButtonLinkProps = ButtonOwnProps & AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
68
|
+
/** Anchor styled as a button. */
|
|
69
|
+
declare const ButtonLink: react.ForwardRefExoticComponent<ButtonOwnProps & AnchorHTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
|
|
70
|
+
interface FabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
71
|
+
extended?: boolean;
|
|
72
|
+
/** Render inline instead of fixed to the corner. */
|
|
73
|
+
inline?: boolean;
|
|
74
|
+
children: ReactNode;
|
|
75
|
+
}
|
|
76
|
+
declare const Fab: react.ForwardRefExoticComponent<FabProps & react.RefAttributes<HTMLButtonElement>>;
|
|
77
|
+
declare function Toolbar({ glass, className, children, ...rest }: {
|
|
78
|
+
glass?: boolean;
|
|
79
|
+
children: ReactNode;
|
|
80
|
+
} & React.HTMLAttributes<HTMLDivElement>): react.JSX.Element;
|
|
81
|
+
|
|
82
|
+
interface FieldProps {
|
|
83
|
+
label?: ReactNode;
|
|
84
|
+
help?: ReactNode;
|
|
85
|
+
error?: ReactNode;
|
|
86
|
+
required?: boolean;
|
|
87
|
+
/** id passed to the control; generated when omitted. */
|
|
88
|
+
htmlFor?: string;
|
|
89
|
+
className?: string;
|
|
90
|
+
children: ReactNode;
|
|
91
|
+
}
|
|
92
|
+
declare function Field({ label, help, error, required, htmlFor, className, children }: FieldProps): react.JSX.Element;
|
|
93
|
+
type Density = "sm" | "md" | "lg";
|
|
94
|
+
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
95
|
+
filled?: boolean;
|
|
96
|
+
density?: Density;
|
|
97
|
+
}
|
|
98
|
+
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
|
|
99
|
+
declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & react.RefAttributes<HTMLTextAreaElement>>;
|
|
100
|
+
declare const Select: react.ForwardRefExoticComponent<SelectHTMLAttributes<HTMLSelectElement> & react.RefAttributes<HTMLSelectElement>>;
|
|
101
|
+
interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "label"> {
|
|
102
|
+
label?: ReactNode;
|
|
103
|
+
}
|
|
104
|
+
declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
|
|
105
|
+
declare const Radio: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
|
|
106
|
+
interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "label"> {
|
|
107
|
+
label?: ReactNode;
|
|
108
|
+
small?: boolean;
|
|
109
|
+
}
|
|
110
|
+
declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
|
|
111
|
+
/** Range input with the accent fill synced to its value. */
|
|
112
|
+
declare const Slider: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
|
|
113
|
+
interface OtpInputProps {
|
|
114
|
+
length?: number;
|
|
115
|
+
value?: string;
|
|
116
|
+
onChange?: (code: string) => void;
|
|
117
|
+
invalid?: boolean;
|
|
118
|
+
"aria-label"?: string;
|
|
119
|
+
className?: string;
|
|
120
|
+
}
|
|
121
|
+
declare function OtpInput({ length, value, onChange, invalid, className, "aria-label": ariaLabel, }: OtpInputProps): react.JSX.Element;
|
|
122
|
+
|
|
123
|
+
type DivProps$1 = HTMLAttributes<HTMLDivElement>;
|
|
124
|
+
interface CardProps extends DivProps$1 {
|
|
125
|
+
variant?: "default" | "glass" | "elevated" | "flat" | "accent";
|
|
126
|
+
interactive?: boolean;
|
|
127
|
+
/** iOS Settings group: zero body padding for flush lists. */
|
|
128
|
+
flush?: boolean;
|
|
129
|
+
}
|
|
130
|
+
declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
|
|
131
|
+
declare const CardHeader: (p: DivProps$1) => react.JSX.Element;
|
|
132
|
+
declare const CardBody: (p: DivProps$1) => react.JSX.Element;
|
|
133
|
+
declare const CardFooter: (p: DivProps$1) => react.JSX.Element;
|
|
134
|
+
declare const CardTitle: (p: DivProps$1) => react.JSX.Element;
|
|
135
|
+
declare const CardSubtitle: (p: DivProps$1) => react.JSX.Element;
|
|
136
|
+
declare const CardEyebrow: (p: DivProps$1) => react.JSX.Element;
|
|
137
|
+
/** App-Store "Today" story card. Provide media via style backgroundImage or children. */
|
|
138
|
+
declare function StoryCard({ media, eyebrow, title, subtitle, className, ...rest }: {
|
|
139
|
+
media?: ReactNode;
|
|
140
|
+
eyebrow?: ReactNode;
|
|
141
|
+
title: ReactNode;
|
|
142
|
+
subtitle?: ReactNode;
|
|
143
|
+
} & DivProps$1): react.JSX.Element;
|
|
144
|
+
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
145
|
+
variant?: "default" | "accent" | "success" | "warning" | "danger" | "solid" | "count";
|
|
146
|
+
dot?: boolean;
|
|
147
|
+
}
|
|
148
|
+
declare function Badge({ variant, dot, className, ...rest }: BadgeProps): react.JSX.Element;
|
|
149
|
+
declare function Tag(p: HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
|
|
150
|
+
interface ChipProps extends HTMLAttributes<HTMLButtonElement> {
|
|
151
|
+
selected?: boolean;
|
|
152
|
+
onRemove?: () => void;
|
|
153
|
+
}
|
|
154
|
+
declare function Chip({ selected, onRemove, className, children, ...rest }: ChipProps): react.JSX.Element;
|
|
155
|
+
interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
|
|
156
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl";
|
|
157
|
+
src?: string;
|
|
158
|
+
alt?: string;
|
|
159
|
+
online?: boolean;
|
|
160
|
+
square?: boolean;
|
|
161
|
+
children?: ReactNode;
|
|
162
|
+
}
|
|
163
|
+
declare function Avatar({ size, src, alt, online, square, className, children, ...rest }: AvatarProps): react.JSX.Element;
|
|
164
|
+
declare function AvatarGroup(p: HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
|
|
165
|
+
interface IconTileProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color"> {
|
|
166
|
+
color?: "accent" | "solid" | "green" | "orange" | "red" | "purple" | "teal" | "indigo" | "gray";
|
|
167
|
+
small?: boolean;
|
|
168
|
+
}
|
|
169
|
+
declare function IconTile({ color, small, className, ...rest }: IconTileProps): react.JSX.Element;
|
|
170
|
+
interface ListProps extends HTMLAttributes<HTMLUListElement> {
|
|
171
|
+
plain?: boolean;
|
|
172
|
+
insetDividers?: boolean;
|
|
173
|
+
}
|
|
174
|
+
declare function List({ plain, insetDividers, className, ...rest }: ListProps): react.JSX.Element;
|
|
175
|
+
interface ListItemProps extends Omit<HTMLAttributes<HTMLLIElement>, "title"> {
|
|
176
|
+
leading?: ReactNode;
|
|
177
|
+
title?: ReactNode;
|
|
178
|
+
subtitle?: ReactNode;
|
|
179
|
+
trailing?: ReactNode;
|
|
180
|
+
chevron?: boolean;
|
|
181
|
+
interactive?: boolean;
|
|
182
|
+
selected?: boolean;
|
|
183
|
+
}
|
|
184
|
+
declare function ListItem({ leading, title, subtitle, trailing, chevron, interactive, selected, className, children, ...rest }: ListItemProps): react.JSX.Element;
|
|
185
|
+
declare function Stat({ label, value, delta, direction, className, ...rest }: {
|
|
186
|
+
label: ReactNode;
|
|
187
|
+
value: ReactNode;
|
|
188
|
+
delta?: ReactNode;
|
|
189
|
+
direction?: "up" | "down";
|
|
190
|
+
} & DivProps$1): react.JSX.Element;
|
|
191
|
+
declare function EmptyState({ icon, title, description, action, className, ...rest }: {
|
|
192
|
+
icon?: ReactNode;
|
|
193
|
+
title: ReactNode;
|
|
194
|
+
description?: ReactNode;
|
|
195
|
+
action?: ReactNode;
|
|
196
|
+
} & DivProps$1): react.JSX.Element;
|
|
197
|
+
declare function GroupBox({ label, icon, className, children, ...rest }: {
|
|
198
|
+
label?: ReactNode;
|
|
199
|
+
icon?: ReactNode;
|
|
200
|
+
} & DivProps$1): react.JSX.Element;
|
|
201
|
+
declare function Labeled({ label, sublabel, className, children, ...rest }: {
|
|
202
|
+
label: ReactNode;
|
|
203
|
+
sublabel?: ReactNode;
|
|
204
|
+
} & DivProps$1): react.JSX.Element;
|
|
205
|
+
declare const ListHeader: (p: DivProps$1) => react.JSX.Element;
|
|
206
|
+
declare const ListFooter: (p: DivProps$1) => react.JSX.Element;
|
|
207
|
+
|
|
208
|
+
type DivProps = HTMLAttributes<HTMLDivElement>;
|
|
209
|
+
interface AlertProps extends Omit<DivProps, "title"> {
|
|
210
|
+
variant?: "info" | "success" | "warning" | "danger";
|
|
211
|
+
title?: ReactNode;
|
|
212
|
+
icon?: ReactNode;
|
|
213
|
+
onClose?: () => void;
|
|
214
|
+
}
|
|
215
|
+
declare function Alert({ variant, title, icon, onClose, className, children, ...rest }: AlertProps): react.JSX.Element;
|
|
216
|
+
interface ProgressProps extends DivProps {
|
|
217
|
+
/** 0–100. Omit for indeterminate. */
|
|
218
|
+
value?: number;
|
|
219
|
+
size?: "sm" | "md" | "lg";
|
|
220
|
+
variant?: "accent" | "success" | "warning" | "danger";
|
|
221
|
+
label?: string;
|
|
222
|
+
}
|
|
223
|
+
declare function Progress({ value, size, variant, label, className, ...rest }: ProgressProps): react.JSX.Element;
|
|
224
|
+
declare function Spinner({ size, className, ...rest }: {
|
|
225
|
+
size?: "sm" | "md" | "lg";
|
|
226
|
+
} & DivProps): react.JSX.Element;
|
|
227
|
+
declare function Skeleton({ kind, className, ...rest }: {
|
|
228
|
+
kind?: "text" | "title" | "circle" | "card";
|
|
229
|
+
} & DivProps): react.JSX.Element;
|
|
230
|
+
declare function StatusDot({ state, pulse, className, children, ...rest }: {
|
|
231
|
+
state?: "neutral" | "online" | "busy" | "away";
|
|
232
|
+
pulse?: boolean;
|
|
233
|
+
} & HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
|
|
234
|
+
declare function Tip({ icon, title, description, actions, onClose, className, ...rest }: {
|
|
235
|
+
icon?: ReactNode;
|
|
236
|
+
title: ReactNode;
|
|
237
|
+
description?: ReactNode;
|
|
238
|
+
actions?: ReactNode;
|
|
239
|
+
onClose?: () => void;
|
|
240
|
+
} & Omit<DivProps, "title">): react.JSX.Element;
|
|
241
|
+
declare function LinearGauge({ value, minLabel, maxLabel, plain, label, className, ...rest }: {
|
|
242
|
+
/** 0–100 position of the marker. */
|
|
243
|
+
value: number;
|
|
244
|
+
minLabel?: ReactNode;
|
|
245
|
+
maxLabel?: ReactNode;
|
|
246
|
+
plain?: boolean;
|
|
247
|
+
label?: string;
|
|
248
|
+
} & DivProps): react.JSX.Element;
|
|
249
|
+
|
|
250
|
+
interface DialogBaseProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title"> {
|
|
251
|
+
open: boolean;
|
|
252
|
+
onClose?: () => void;
|
|
253
|
+
/** Close when the backdrop is clicked (default true). */
|
|
254
|
+
dismissable?: boolean;
|
|
255
|
+
}
|
|
256
|
+
interface ModalProps extends DialogBaseProps {
|
|
257
|
+
title?: ReactNode;
|
|
258
|
+
footer?: ReactNode;
|
|
259
|
+
size?: "sm" | "md" | "lg" | "xl";
|
|
260
|
+
glass?: boolean;
|
|
261
|
+
children: ReactNode;
|
|
262
|
+
}
|
|
263
|
+
declare function Modal({ open, onClose, dismissable, title, footer, size, glass, className, children, ...rest }: ModalProps): react.JSX.Element;
|
|
264
|
+
interface AlertDialogAction {
|
|
265
|
+
label: ReactNode;
|
|
266
|
+
onClick: () => void;
|
|
267
|
+
destructive?: boolean;
|
|
268
|
+
primary?: boolean;
|
|
269
|
+
}
|
|
270
|
+
declare function AlertDialog({ open, onClose, title, description, actions, row, className, ...rest }: DialogBaseProps & {
|
|
271
|
+
title: ReactNode;
|
|
272
|
+
description?: ReactNode;
|
|
273
|
+
actions: AlertDialogAction[];
|
|
274
|
+
/** Lay actions side by side (two-action Apple style). */
|
|
275
|
+
row?: boolean;
|
|
276
|
+
}): react.JSX.Element;
|
|
277
|
+
declare function Sheet({ open, onClose, dismissable, title, className, children, ...rest }: DialogBaseProps & {
|
|
278
|
+
title?: ReactNode;
|
|
279
|
+
children: ReactNode;
|
|
280
|
+
}): react.JSX.Element;
|
|
281
|
+
declare function BottomSheet({ open, onClose, dismissable, detent, className, children, ...rest }: DialogBaseProps & {
|
|
282
|
+
detent?: "medium" | "large";
|
|
283
|
+
children: ReactNode;
|
|
284
|
+
}): react.JSX.Element;
|
|
285
|
+
interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
286
|
+
title?: ReactNode;
|
|
287
|
+
/** Apple-style caret pointing at the anchor. */
|
|
288
|
+
arrow?: "top" | "bottom" | "start" | "end";
|
|
289
|
+
/** Structured header/body/footer card. */
|
|
290
|
+
card?: boolean;
|
|
291
|
+
anchored?: boolean;
|
|
292
|
+
children: ReactNode;
|
|
293
|
+
}
|
|
294
|
+
/** Presentation-only popover panel — pair with the native Popover API or
|
|
295
|
+
* render inside a relatively positioned wrapper. */
|
|
296
|
+
declare function Popover({ title, arrow, card, anchored, className, children, ...rest }: PopoverProps): react.JSX.Element;
|
|
297
|
+
declare function Tooltip({ label, below, className, children, ...rest }: {
|
|
298
|
+
label: string;
|
|
299
|
+
below?: boolean;
|
|
300
|
+
} & HTMLAttributes<HTMLSpanElement>): react.JSX.Element;
|
|
301
|
+
interface ActionSheetAction {
|
|
302
|
+
label: ReactNode;
|
|
303
|
+
onClick: () => void;
|
|
304
|
+
destructive?: boolean;
|
|
305
|
+
}
|
|
306
|
+
declare function ActionSheet({ open, onClose, title, actions, cancelLabel, className, ...rest }: DialogBaseProps & {
|
|
307
|
+
title?: ReactNode;
|
|
308
|
+
actions: ActionSheetAction[];
|
|
309
|
+
cancelLabel?: ReactNode;
|
|
310
|
+
}): react.JSX.Element;
|
|
311
|
+
|
|
312
|
+
interface SegmentedOption<T extends string> {
|
|
313
|
+
label: ReactNode;
|
|
314
|
+
value: T;
|
|
315
|
+
}
|
|
316
|
+
declare function Segmented<T extends string>({ options, value, onChange, block, label, className, ...rest }: {
|
|
317
|
+
options: SegmentedOption<T>[];
|
|
318
|
+
value: T;
|
|
319
|
+
onChange: (value: T) => void;
|
|
320
|
+
block?: boolean;
|
|
321
|
+
label?: string;
|
|
322
|
+
} & Omit<HTMLAttributes<HTMLDivElement>, "onChange">): react.JSX.Element;
|
|
323
|
+
interface TabItem<T extends string> {
|
|
324
|
+
id: T;
|
|
325
|
+
label: ReactNode;
|
|
326
|
+
}
|
|
327
|
+
declare function Tabs<T extends string>({ items, value, onChange, className, ...rest }: {
|
|
328
|
+
items: TabItem<T>[];
|
|
329
|
+
value: T;
|
|
330
|
+
onChange: (id: T) => void;
|
|
331
|
+
} & Omit<HTMLAttributes<HTMLDivElement>, "onChange">): react.JSX.Element;
|
|
332
|
+
declare function TabPanel({ active, className, ...rest }: {
|
|
333
|
+
active: boolean;
|
|
334
|
+
} & HTMLAttributes<HTMLDivElement>): react.JSX.Element;
|
|
335
|
+
interface Crumb {
|
|
336
|
+
label: ReactNode;
|
|
337
|
+
href?: string;
|
|
338
|
+
}
|
|
339
|
+
declare function Breadcrumbs({ items, className, ...rest }: {
|
|
340
|
+
items: Crumb[];
|
|
341
|
+
} & HTMLAttributes<HTMLElement>): react.JSX.Element;
|
|
342
|
+
|
|
343
|
+
declare const iconNames: readonly ["arrow-up-right", "backward", "bell", "bolt", "bookmark", "calendar", "camera", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "clock", "close", "doc", "download", "drop", "filter", "flame", "folder", "forward", "garage", "gear", "grid", "heart", "house", "info", "lightbulb", "link", "lock", "mail", "message", "mic", "moon-stars", "music-note", "newspaper", "pause", "pencil", "people", "person", "photo", "pin", "play", "plus", "refresh", "repeat", "search", "send", "share", "shield", "sliders", "sparkles", "speaker", "star", "sun", "trash", "warning", "waveform", "wifi"];
|
|
344
|
+
type IconName = (typeof iconNames)[number];
|
|
345
|
+
interface IconProps extends Omit<SVGProps<SVGSVGElement>, "name"> {
|
|
346
|
+
name: IconName;
|
|
347
|
+
/** Matches the .b-icon size scale. */
|
|
348
|
+
size?: "sm" | "md" | "lg" | "xl";
|
|
349
|
+
/** Give the icon a label when it carries meaning on its own. */
|
|
350
|
+
title?: string;
|
|
351
|
+
}
|
|
352
|
+
/**
|
|
353
|
+
* A glyph from the Barua icon library: 20x20, 1.5px stroke, currentColor.
|
|
354
|
+
* Decorative by default — pass `title` when the icon is the only label.
|
|
355
|
+
*/
|
|
356
|
+
declare const Icon: react.ForwardRefExoticComponent<Omit<IconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
|
|
357
|
+
|
|
358
|
+
interface BlockProps extends HTMLAttributes<HTMLElement> {
|
|
359
|
+
/** Render a different element without losing the class. */
|
|
360
|
+
as?: ElementType;
|
|
361
|
+
children?: ReactNode;
|
|
362
|
+
}
|
|
363
|
+
/**
|
|
364
|
+
* Most of this system is a class on an element. `block` binds one of those to a
|
|
365
|
+
* component so the class name never has to be typed by hand — and so the wrong
|
|
366
|
+
* one cannot be typed at all.
|
|
367
|
+
*/
|
|
368
|
+
declare function block(defaultTag: ElementType, base: string, displayName: string): react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
369
|
+
|
|
370
|
+
type Align = "start" | "center" | "end" | "between" | "stretch";
|
|
371
|
+
interface StackProps extends HTMLAttributes<HTMLElement> {
|
|
372
|
+
as?: ElementType;
|
|
373
|
+
/** Token gap: 0–4, 6 or 8. Anything else is a margin, and margins are not the system. */
|
|
374
|
+
gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8;
|
|
375
|
+
align?: Align;
|
|
376
|
+
wrap?: boolean;
|
|
377
|
+
children?: ReactNode;
|
|
378
|
+
}
|
|
379
|
+
/** Vertical flow — the default building block for any view. */
|
|
380
|
+
declare const Stack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLElement>>;
|
|
381
|
+
declare const VStack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLElement>>;
|
|
382
|
+
/** Horizontal flow. Same gap scale, same alignment vocabulary. */
|
|
383
|
+
declare const HStack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLElement>>;
|
|
384
|
+
interface GridProps extends HTMLAttributes<HTMLElement> {
|
|
385
|
+
as?: ElementType;
|
|
386
|
+
/** Fixed track count, or "auto" to fit as many as the width allows. */
|
|
387
|
+
cols?: 2 | 3 | 4 | 6 | "auto";
|
|
388
|
+
gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8;
|
|
389
|
+
children?: ReactNode;
|
|
390
|
+
}
|
|
391
|
+
declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLElement>>;
|
|
392
|
+
interface ContainerProps extends BlockProps {
|
|
393
|
+
size?: "sm" | "md" | "xl" | "fluid";
|
|
394
|
+
}
|
|
395
|
+
/** Centred measure with the page gutters already applied. */
|
|
396
|
+
declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLElement>>;
|
|
397
|
+
interface ScrollAreaProps extends BlockProps {
|
|
398
|
+
axis?: "x" | "y";
|
|
399
|
+
/** Fade the clipped edge, so cut-off content looks deliberate. */
|
|
400
|
+
fade?: boolean;
|
|
401
|
+
}
|
|
402
|
+
/**
|
|
403
|
+
* The only element allowed to scroll. Everything outside one of these is a
|
|
404
|
+
* screen: it fits, or it is redesigned until it does.
|
|
405
|
+
*/
|
|
406
|
+
declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & react.RefAttributes<HTMLElement>>;
|
|
407
|
+
interface DividerProps extends BlockProps {
|
|
408
|
+
vertical?: boolean;
|
|
409
|
+
inset?: boolean;
|
|
410
|
+
/** Centres a caption in the rule — pass the text as children. */
|
|
411
|
+
label?: boolean;
|
|
412
|
+
}
|
|
413
|
+
declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLElement>>;
|
|
414
|
+
/** Holds the viewport still: the app is a screen, not a document. */
|
|
415
|
+
declare const Stage: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
416
|
+
/** Pushes siblings apart in a flex row. */
|
|
417
|
+
declare const Spacer: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
418
|
+
/** Takes the leftover space in a flex row. */
|
|
419
|
+
declare const Grow: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
420
|
+
declare const Split: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
421
|
+
declare const Section: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
422
|
+
declare const SafeArea: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
423
|
+
declare const CardGrid: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
424
|
+
declare const Bento: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
425
|
+
/** 12-column dashboard grid; children claim width with span={n}. */
|
|
426
|
+
declare const Dashboard: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
427
|
+
/** App frame: chrome that stays put, with one scrolling main. */
|
|
428
|
+
declare const Workspace: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
429
|
+
declare const WorkspaceMain: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
430
|
+
declare const Inspector: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
431
|
+
declare const SkipLink: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
432
|
+
interface SpanProps extends BlockProps {
|
|
433
|
+
/** Columns to claim inside a Dashboard — 2 through 12. */
|
|
434
|
+
span: 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
435
|
+
}
|
|
436
|
+
/** Width claim for a dashboard child. Spans in one row should total twelve. */
|
|
437
|
+
declare const Span: react.ForwardRefExoticComponent<SpanProps & react.RefAttributes<HTMLElement>>;
|
|
438
|
+
interface SidebarProps extends BlockProps {
|
|
439
|
+
material?: "glass" | "surface";
|
|
440
|
+
}
|
|
441
|
+
declare const Sidebar: react.ForwardRefExoticComponent<SidebarProps & react.RefAttributes<HTMLElement>>;
|
|
442
|
+
declare const SidebarHeading: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
443
|
+
declare const SidebarGroup: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
444
|
+
interface SidebarItemProps extends HTMLAttributes<HTMLElement> {
|
|
445
|
+
as?: ElementType;
|
|
446
|
+
active?: boolean;
|
|
447
|
+
href?: string;
|
|
448
|
+
children?: ReactNode;
|
|
449
|
+
}
|
|
450
|
+
declare const SidebarItem: react.ForwardRefExoticComponent<SidebarItemProps & react.RefAttributes<HTMLElement>>;
|
|
451
|
+
|
|
452
|
+
type TextRole = "large-title" | "title1" | "title2" | "title3" | "headline" | "subheadline" | "body" | "callout" | "caption" | "caption2" | "overline";
|
|
453
|
+
interface TextProps extends HTMLAttributes<HTMLElement> {
|
|
454
|
+
role?: TextRole;
|
|
455
|
+
as?: ElementType;
|
|
456
|
+
tone?: "secondary" | "tertiary" | "quaternary" | "accent" | "danger" | "success" | "warning";
|
|
457
|
+
align?: "start" | "center" | "end";
|
|
458
|
+
truncate?: boolean;
|
|
459
|
+
/** Clamp to a fixed number of lines. */
|
|
460
|
+
clamp?: 2 | 3;
|
|
461
|
+
/** Line up digits in columns — use for money and any table of numbers. */
|
|
462
|
+
tabularNums?: boolean;
|
|
463
|
+
children?: ReactNode;
|
|
464
|
+
}
|
|
465
|
+
/**
|
|
466
|
+
* Type is a role, not a size. Pick the role that describes the job and the
|
|
467
|
+
* metrics follow — never restate a font-size in a product.
|
|
468
|
+
*/
|
|
469
|
+
declare const Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<HTMLElement>>;
|
|
470
|
+
declare const Link: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
471
|
+
declare const LinkGroup: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
472
|
+
declare const Kbd: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
473
|
+
declare const Overline: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
474
|
+
declare const Footnote: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
475
|
+
declare const Footnotes: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
476
|
+
interface QuoteProps extends HTMLAttributes<HTMLElement> {
|
|
477
|
+
/** Attribution — rendered as the <cite>. */
|
|
478
|
+
cite?: ReactNode;
|
|
479
|
+
children?: ReactNode;
|
|
480
|
+
}
|
|
481
|
+
declare const Quote: react.ForwardRefExoticComponent<QuoteProps & react.RefAttributes<HTMLQuoteElement>>;
|
|
482
|
+
interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
483
|
+
/** Caption in the header strip. */
|
|
484
|
+
title?: ReactNode;
|
|
485
|
+
/** Renders a copy button that lifts the code out of the block. */
|
|
486
|
+
copy?: boolean;
|
|
487
|
+
copyLabel?: string;
|
|
488
|
+
children?: ReactNode;
|
|
489
|
+
}
|
|
490
|
+
declare const CodeBlock: react.ForwardRefExoticComponent<CodeBlockProps & react.RefAttributes<HTMLDivElement>>;
|
|
491
|
+
interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
|
|
492
|
+
/** Label above value instead of beside it — better in narrow columns. */
|
|
493
|
+
stacked?: boolean;
|
|
494
|
+
items?: Array<{
|
|
495
|
+
term: ReactNode;
|
|
496
|
+
description: ReactNode;
|
|
497
|
+
}>;
|
|
498
|
+
children?: ReactNode;
|
|
499
|
+
}
|
|
500
|
+
/** Term-and-value pairs: the shape of every detail panel and receipt. */
|
|
501
|
+
declare const DescriptionList: react.ForwardRefExoticComponent<DescriptionListProps & react.RefAttributes<HTMLDListElement>>;
|
|
502
|
+
|
|
503
|
+
interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
|
|
504
|
+
striped?: boolean;
|
|
505
|
+
hover?: boolean;
|
|
506
|
+
compact?: boolean;
|
|
507
|
+
/** Wrap in the scroll container that keeps a wide table from breaking the page. */
|
|
508
|
+
wrap?: boolean;
|
|
509
|
+
children?: ReactNode;
|
|
510
|
+
}
|
|
511
|
+
/**
|
|
512
|
+
* Tables are the one place horizontal scrolling is allowed, and only inside
|
|
513
|
+
* the wrapper — never the page itself.
|
|
514
|
+
*/
|
|
515
|
+
declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
|
|
516
|
+
declare const TableWrap: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
517
|
+
/** Right-aligned, tabular figures. Every number column wants this. */
|
|
518
|
+
declare const TableNum: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
519
|
+
interface SortHeaderProps extends HTMLAttributes<HTMLTableCellElement> {
|
|
520
|
+
direction?: "asc" | "desc" | null;
|
|
521
|
+
children?: ReactNode;
|
|
522
|
+
}
|
|
523
|
+
declare const TableSortHeader: react.ForwardRefExoticComponent<SortHeaderProps & react.RefAttributes<HTMLTableCellElement>>;
|
|
524
|
+
interface GaugeProps extends Omit<HTMLAttributes<HTMLDivElement>, "label" | "value"> {
|
|
525
|
+
/** 0–100. */
|
|
526
|
+
value: number;
|
|
527
|
+
label?: ReactNode;
|
|
528
|
+
/** Text in the middle; defaults to the value as a percentage. */
|
|
529
|
+
display?: ReactNode;
|
|
530
|
+
}
|
|
531
|
+
declare const Gauge: react.ForwardRefExoticComponent<GaugeProps & react.RefAttributes<HTMLDivElement>>;
|
|
532
|
+
interface DonutSlice {
|
|
533
|
+
/** Chart token index 1–8, or any CSS colour. */
|
|
534
|
+
color: string;
|
|
535
|
+
/** Share of the whole, 0–100. */
|
|
536
|
+
value: number;
|
|
537
|
+
label?: string;
|
|
538
|
+
}
|
|
539
|
+
interface DonutProps extends Omit<HTMLAttributes<HTMLDivElement>, "label" | "value"> {
|
|
540
|
+
slices: DonutSlice[];
|
|
541
|
+
/** Big figure in the hole. */
|
|
542
|
+
value?: ReactNode;
|
|
543
|
+
label?: ReactNode;
|
|
544
|
+
/** States the takeaway for assistive tech. */
|
|
545
|
+
description?: string;
|
|
546
|
+
}
|
|
547
|
+
/** Composition over parts: a donut is a pie with a labelled hole. */
|
|
548
|
+
declare const Donut: react.ForwardRefExoticComponent<DonutProps & react.RefAttributes<HTMLDivElement>>;
|
|
549
|
+
interface SparklineProps extends HTMLAttributes<SVGSVGElement> {
|
|
550
|
+
/** Raw numbers — scaled to the box for you. */
|
|
551
|
+
points: number[];
|
|
552
|
+
}
|
|
553
|
+
/** A word-sized trend, for stat cards and table rows. */
|
|
554
|
+
declare const Sparkline: react.ForwardRefExoticComponent<SparklineProps & react.RefAttributes<SVGSVGElement>>;
|
|
555
|
+
interface LegendItem {
|
|
556
|
+
label: ReactNode;
|
|
557
|
+
/** Chart token index 1–8, or any CSS colour. */
|
|
558
|
+
color?: string;
|
|
559
|
+
}
|
|
560
|
+
interface LegendProps extends HTMLAttributes<HTMLUListElement> {
|
|
561
|
+
items: LegendItem[];
|
|
562
|
+
}
|
|
563
|
+
declare const Legend: react.ForwardRefExoticComponent<LegendProps & react.RefAttributes<HTMLUListElement>>;
|
|
564
|
+
interface ColumnsProps extends HTMLAttributes<HTMLDivElement> {
|
|
565
|
+
data: Array<{
|
|
566
|
+
label: string;
|
|
567
|
+
value: number;
|
|
568
|
+
}>;
|
|
569
|
+
/** Top of the scale; defaults to the largest value. */
|
|
570
|
+
max?: number;
|
|
571
|
+
rounded?: boolean;
|
|
572
|
+
/** Height ceiling, so a tall column never drags the card with it. */
|
|
573
|
+
height?: string;
|
|
574
|
+
description?: string;
|
|
575
|
+
}
|
|
576
|
+
/** CSS column chart — no runtime, no canvas, and it prints correctly. */
|
|
577
|
+
declare const Columns: react.ForwardRefExoticComponent<ColumnsProps & react.RefAttributes<HTMLDivElement>>;
|
|
578
|
+
interface BarsProps extends HTMLAttributes<HTMLDivElement> {
|
|
579
|
+
data: Array<{
|
|
580
|
+
label: ReactNode;
|
|
581
|
+
value: number;
|
|
582
|
+
display?: ReactNode;
|
|
583
|
+
}>;
|
|
584
|
+
max?: number;
|
|
585
|
+
description?: string;
|
|
586
|
+
}
|
|
587
|
+
/** Horizontal bars — the right shape when the labels are words, not dates. */
|
|
588
|
+
declare const Bars: react.ForwardRefExoticComponent<BarsProps & react.RefAttributes<HTMLDivElement>>;
|
|
589
|
+
declare const Chart: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
590
|
+
declare const ChartTip: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
591
|
+
declare const Heatmap: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
592
|
+
|
|
593
|
+
declare const TopNav: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
594
|
+
declare const TopNavBrand: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
595
|
+
declare const TopNavLinks: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
596
|
+
interface NavLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
597
|
+
as?: ElementType;
|
|
598
|
+
active?: boolean;
|
|
599
|
+
children?: ReactNode;
|
|
600
|
+
}
|
|
601
|
+
declare const TopNavLink: react.ForwardRefExoticComponent<NavLinkProps & react.RefAttributes<HTMLAnchorElement>>;
|
|
602
|
+
declare const BottomNavItem: react.ForwardRefExoticComponent<NavLinkProps & react.RefAttributes<HTMLAnchorElement>>;
|
|
603
|
+
declare const DockItem: react.ForwardRefExoticComponent<NavLinkProps & react.RefAttributes<HTMLAnchorElement>>;
|
|
604
|
+
declare const BottomNav: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
605
|
+
declare const Dock: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
606
|
+
declare const DockTray: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
607
|
+
declare const PillNav: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
608
|
+
declare const BackButton: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
609
|
+
declare const MarketingNav: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
610
|
+
declare const MarketingNavBrand: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
611
|
+
declare const MarketingNavLinks: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
612
|
+
interface Step {
|
|
613
|
+
label: ReactNode;
|
|
614
|
+
state?: "complete" | "active" | "upcoming";
|
|
615
|
+
}
|
|
616
|
+
interface StepsProps extends HTMLAttributes<HTMLOListElement> {
|
|
617
|
+
steps: Step[];
|
|
618
|
+
/** Zero-based index of the current step; sets the states for you. */
|
|
619
|
+
current?: number;
|
|
620
|
+
}
|
|
621
|
+
declare const Steps: react.ForwardRefExoticComponent<StepsProps & react.RefAttributes<HTMLOListElement>>;
|
|
622
|
+
interface DrawerProps extends HTMLAttributes<HTMLElement> {
|
|
623
|
+
/** Anchor to the trailing edge instead of the leading one. */
|
|
624
|
+
end?: boolean;
|
|
625
|
+
children?: ReactNode;
|
|
626
|
+
}
|
|
627
|
+
/**
|
|
628
|
+
* Uses the platform popover, so light-dismiss and the top layer are the
|
|
629
|
+
* browser's job rather than a scroll-lock hack.
|
|
630
|
+
*/
|
|
631
|
+
declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLElement>>;
|
|
632
|
+
declare const DrawerHeader: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
633
|
+
declare const DrawerBody: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
634
|
+
declare const StatusBar: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
635
|
+
declare const StatusBarItem: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
636
|
+
interface MenuProps extends HTMLAttributes<HTMLUListElement> {
|
|
637
|
+
children?: ReactNode;
|
|
638
|
+
}
|
|
639
|
+
/** Alignment lives on the Dropdown, not here — pass end to that. */
|
|
640
|
+
declare const Menu: react.ForwardRefExoticComponent<MenuProps & react.RefAttributes<HTMLUListElement>>;
|
|
641
|
+
interface MenuItemProps extends HTMLAttributes<HTMLButtonElement> {
|
|
642
|
+
/** Keyboard hint, right-aligned. Not a place for secondary text. */
|
|
643
|
+
shortcut?: ReactNode;
|
|
644
|
+
danger?: boolean;
|
|
645
|
+
/** Leading glyph. */
|
|
646
|
+
icon?: ReactNode;
|
|
647
|
+
children?: ReactNode;
|
|
648
|
+
}
|
|
649
|
+
declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLButtonElement>>;
|
|
650
|
+
declare const MenuLabel: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
651
|
+
declare const MenuSeparator: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
652
|
+
interface DropdownProps extends Omit<HTMLAttributes<HTMLDetailsElement>, "children" | "label"> {
|
|
653
|
+
/** What the trigger reads — the current value for a select, the action for a menu. */
|
|
654
|
+
label: ReactNode;
|
|
655
|
+
/**
|
|
656
|
+
* "select" when the trigger holds a chosen value: it is painted by the same
|
|
657
|
+
* rule as Input, so it matches the fields beside it. "button" is for a menu
|
|
658
|
+
* of actions. Getting this backwards puts a borderless grey pill in a column
|
|
659
|
+
* of bordered fields, which is the single most common way this component is
|
|
660
|
+
* misused.
|
|
661
|
+
*/
|
|
662
|
+
variant?: "button" | "select";
|
|
663
|
+
/** Align the panel to the trailing edge, for triggers near the window edge. */
|
|
664
|
+
end?: boolean;
|
|
665
|
+
triggerProps?: HTMLAttributes<HTMLElement>;
|
|
666
|
+
children?: ReactNode;
|
|
667
|
+
}
|
|
668
|
+
/**
|
|
669
|
+
* A menu that needs no JavaScript to open: <details> does it, and the system's
|
|
670
|
+
* script handles edge-flipping and outside-click.
|
|
671
|
+
*/
|
|
672
|
+
declare const Dropdown: react.ForwardRefExoticComponent<DropdownProps & react.RefAttributes<HTMLDetailsElement>>;
|
|
673
|
+
|
|
674
|
+
declare const Form: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
675
|
+
/** Two fields side by side above 768px, stacked below. */
|
|
676
|
+
declare const FormRow: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
677
|
+
declare const FormActions: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
678
|
+
declare const Fieldset: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
679
|
+
declare const Help: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
680
|
+
declare const ErrorText: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
681
|
+
declare const Optional: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
682
|
+
interface FormSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
683
|
+
title?: ReactNode;
|
|
684
|
+
description?: ReactNode;
|
|
685
|
+
children?: ReactNode;
|
|
686
|
+
}
|
|
687
|
+
/** A titled group of fields — the unit long forms are built from. */
|
|
688
|
+
declare const FormSection: react.ForwardRefExoticComponent<FormSectionProps & react.RefAttributes<HTMLDivElement>>;
|
|
689
|
+
interface LabelProps extends HTMLAttributes<HTMLLabelElement> {
|
|
690
|
+
required?: boolean;
|
|
691
|
+
htmlFor?: string;
|
|
692
|
+
children?: ReactNode;
|
|
693
|
+
}
|
|
694
|
+
declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
|
|
695
|
+
interface InputGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "prefix" | "suffix"> {
|
|
696
|
+
/** Glyph or text before the field — a currency, a search icon. */
|
|
697
|
+
prefix?: ReactNode;
|
|
698
|
+
/** After the field — a unit, a clear button. */
|
|
699
|
+
suffix?: ReactNode;
|
|
700
|
+
children?: ReactNode;
|
|
701
|
+
}
|
|
702
|
+
/** Affixes sit inside the field's border, so the group reads as one control. */
|
|
703
|
+
declare const InputGroup: react.ForwardRefExoticComponent<InputGroupProps & react.RefAttributes<HTMLDivElement>>;
|
|
704
|
+
interface StepperInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
705
|
+
decrementLabel?: string;
|
|
706
|
+
incrementLabel?: string;
|
|
707
|
+
onStep?: (delta: number) => void;
|
|
708
|
+
}
|
|
709
|
+
/** For small counts, where typing a number is slower than pressing a button. */
|
|
710
|
+
declare const StepperInput: react.ForwardRefExoticComponent<StepperInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
711
|
+
interface RangeProps extends Omit<HTMLAttributes<HTMLDivElement>, "label" | "value"> {
|
|
712
|
+
min?: number;
|
|
713
|
+
max?: number;
|
|
714
|
+
step?: number;
|
|
715
|
+
/** [low, high] — a two-thumb range. */
|
|
716
|
+
value: [number, number];
|
|
717
|
+
onRangeChange?: (value: [number, number]) => void;
|
|
718
|
+
label?: string;
|
|
719
|
+
}
|
|
720
|
+
/** Two thumbs on one track, with the selected span filled in. */
|
|
721
|
+
declare const Range: react.ForwardRefExoticComponent<RangeProps & react.RefAttributes<HTMLDivElement>>;
|
|
722
|
+
interface DropzoneProps extends HTMLAttributes<HTMLDivElement> {
|
|
723
|
+
/** Highlights the target while a file is over it. */
|
|
724
|
+
active?: boolean;
|
|
725
|
+
children?: ReactNode;
|
|
726
|
+
}
|
|
727
|
+
declare const Dropzone: react.ForwardRefExoticComponent<DropzoneProps & react.RefAttributes<HTMLDivElement>>;
|
|
728
|
+
interface UploadItemProps extends HTMLAttributes<HTMLLIElement> {
|
|
729
|
+
name: ReactNode;
|
|
730
|
+
size?: ReactNode;
|
|
731
|
+
thumb?: ReactNode;
|
|
732
|
+
children?: ReactNode;
|
|
733
|
+
}
|
|
734
|
+
declare const UploadItem: react.ForwardRefExoticComponent<UploadItemProps & react.RefAttributes<HTMLLIElement>>;
|
|
735
|
+
declare const Upload: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
736
|
+
declare const FilterBar: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
737
|
+
declare const Swatches: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
738
|
+
declare const Swatch: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
739
|
+
declare const SearchField: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
740
|
+
interface FilterChipProps extends Omit<HTMLAttributes<HTMLButtonElement>, "value"> {
|
|
741
|
+
/** The chosen value, shown after the label. */
|
|
742
|
+
value?: ReactNode;
|
|
743
|
+
children?: ReactNode;
|
|
744
|
+
}
|
|
745
|
+
declare const FilterChip: react.ForwardRefExoticComponent<FilterChipProps & react.RefAttributes<HTMLButtonElement>>;
|
|
746
|
+
|
|
747
|
+
declare const Kanban: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
748
|
+
declare const KanbanList: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
749
|
+
declare const TaskList: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
750
|
+
declare const TaskRow: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
751
|
+
declare const DataGrid: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
752
|
+
declare const Tree: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
753
|
+
declare const Feed: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
754
|
+
declare const Log: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
755
|
+
declare const BulkActions: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
756
|
+
declare const SelectionCount: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
757
|
+
declare const Resizable: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
758
|
+
declare const ResizeHandle: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
759
|
+
declare const DragHandle: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
760
|
+
interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
|
|
761
|
+
title: ReactNode;
|
|
762
|
+
count?: ReactNode;
|
|
763
|
+
children?: ReactNode;
|
|
764
|
+
}
|
|
765
|
+
declare const KanbanColumn: react.ForwardRefExoticComponent<KanbanColumnProps & react.RefAttributes<HTMLElement>>;
|
|
766
|
+
interface TaskProps extends Omit<HTMLAttributes<HTMLLIElement>, "title"> {
|
|
767
|
+
title: ReactNode;
|
|
768
|
+
meta?: ReactNode;
|
|
769
|
+
children?: ReactNode;
|
|
770
|
+
}
|
|
771
|
+
declare const Task: react.ForwardRefExoticComponent<TaskProps & react.RefAttributes<HTMLLIElement>>;
|
|
772
|
+
interface TreeItemProps extends Omit<HTMLAttributes<HTMLDetailsElement>, "label"> {
|
|
773
|
+
label: ReactNode;
|
|
774
|
+
/** Leading glyph — a folder, a file kind. */
|
|
775
|
+
icon?: ReactNode;
|
|
776
|
+
defaultOpen?: boolean;
|
|
777
|
+
children?: ReactNode;
|
|
778
|
+
}
|
|
779
|
+
declare const TreeItem: react.ForwardRefExoticComponent<TreeItemProps & react.RefAttributes<HTMLDetailsElement>>;
|
|
780
|
+
interface TimelineEntry {
|
|
781
|
+
time?: ReactNode;
|
|
782
|
+
title: ReactNode;
|
|
783
|
+
body?: ReactNode;
|
|
784
|
+
state?: "complete" | "active";
|
|
785
|
+
}
|
|
786
|
+
interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
|
|
787
|
+
entries: TimelineEntry[];
|
|
788
|
+
}
|
|
789
|
+
/** Events in order, with the current one marked. */
|
|
790
|
+
declare const Timeline: react.ForwardRefExoticComponent<TimelineProps & react.RefAttributes<HTMLOListElement>>;
|
|
791
|
+
interface FileTileProps extends HTMLAttributes<HTMLButtonElement> {
|
|
792
|
+
name: ReactNode;
|
|
793
|
+
/** File-kind glyph — keep the colour, it is how the kind is read at a glance. */
|
|
794
|
+
icon?: ReactNode;
|
|
795
|
+
selected?: boolean;
|
|
796
|
+
}
|
|
797
|
+
declare const FileTile: react.ForwardRefExoticComponent<FileTileProps & react.RefAttributes<HTMLButtonElement>>;
|
|
798
|
+
declare const FileGrid: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
799
|
+
declare const FileBrowser: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
800
|
+
|
|
801
|
+
/** The page frame for a marketing surface — sets the rhythm every chapter follows. */
|
|
802
|
+
declare const Landing: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
803
|
+
declare const SpecStrip: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
804
|
+
declare const CardRail: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
805
|
+
declare const SiteFooter: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
806
|
+
declare const SiteFooterGroups: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
807
|
+
declare const SiteFooterGroup: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
808
|
+
declare const SiteFooterHeading: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
809
|
+
declare const SiteFooterLegal: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
810
|
+
interface ChapterProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
|
|
811
|
+
eyebrow?: ReactNode;
|
|
812
|
+
title?: ReactNode;
|
|
813
|
+
/** One sentence under the title. Resist writing two. */
|
|
814
|
+
lede?: ReactNode;
|
|
815
|
+
actions?: ReactNode;
|
|
816
|
+
/** Less vertical air, for chapters that run in a series. */
|
|
817
|
+
tight?: boolean;
|
|
818
|
+
/** Left-aligned instead of centred. */
|
|
819
|
+
start?: boolean;
|
|
820
|
+
/** Inverted band, for a break in the page's rhythm. */
|
|
821
|
+
dark?: boolean;
|
|
822
|
+
children?: ReactNode;
|
|
823
|
+
}
|
|
824
|
+
/**
|
|
825
|
+
* A page is chapters. Each states one idea, in the same order every time:
|
|
826
|
+
* eyebrow, title, lede, then the thing itself.
|
|
827
|
+
*/
|
|
828
|
+
declare const Chapter: react.ForwardRefExoticComponent<ChapterProps & react.RefAttributes<HTMLElement>>;
|
|
829
|
+
interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
|
|
830
|
+
title?: ReactNode;
|
|
831
|
+
/** Image or video that fills the frame. */
|
|
832
|
+
media?: ReactNode;
|
|
833
|
+
children?: ReactNode;
|
|
834
|
+
}
|
|
835
|
+
declare const Hero: react.ForwardRefExoticComponent<HeroProps & react.RefAttributes<HTMLElement>>;
|
|
836
|
+
interface FigureProps extends HTMLAttributes<HTMLElement> {
|
|
837
|
+
caption?: ReactNode;
|
|
838
|
+
/** Break the measure and run to the page edges. */
|
|
839
|
+
bleed?: boolean;
|
|
840
|
+
children?: ReactNode;
|
|
841
|
+
}
|
|
842
|
+
/** Media in a frame that holds its aspect, so a row of them lines up. */
|
|
843
|
+
declare const Figure: react.ForwardRefExoticComponent<FigureProps & react.RefAttributes<HTMLElement>>;
|
|
844
|
+
interface FeatureRowProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
|
|
845
|
+
title?: ReactNode;
|
|
846
|
+
body?: ReactNode;
|
|
847
|
+
media?: ReactNode;
|
|
848
|
+
/** Put the media on the other side — alternate down the page. */
|
|
849
|
+
flip?: boolean;
|
|
850
|
+
children?: ReactNode;
|
|
851
|
+
}
|
|
852
|
+
declare const FeatureRow: react.ForwardRefExoticComponent<FeatureRowProps & react.RefAttributes<HTMLElement>>;
|
|
853
|
+
interface PromoBandProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
|
|
854
|
+
title?: ReactNode;
|
|
855
|
+
body?: ReactNode;
|
|
856
|
+
children?: ReactNode;
|
|
857
|
+
}
|
|
858
|
+
declare const PromoBand: react.ForwardRefExoticComponent<PromoBandProps & react.RefAttributes<HTMLElement>>;
|
|
859
|
+
|
|
860
|
+
declare const Auth: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
861
|
+
declare const Onboarding: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
862
|
+
declare const OnboardingHero: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
863
|
+
declare const AppGrid: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
864
|
+
declare const AppTile: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
865
|
+
declare const Callout: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
866
|
+
declare const Notification: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
867
|
+
declare const Wall: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
868
|
+
declare const GlassContainer: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
869
|
+
interface AuthCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
870
|
+
logo?: ReactNode;
|
|
871
|
+
title?: ReactNode;
|
|
872
|
+
subtitle?: ReactNode;
|
|
873
|
+
footer?: ReactNode;
|
|
874
|
+
children?: ReactNode;
|
|
875
|
+
}
|
|
876
|
+
/** The sign-in surface: one card, one job, nothing else on the screen. */
|
|
877
|
+
declare const AuthCard: react.ForwardRefExoticComponent<AuthCardProps & react.RefAttributes<HTMLDivElement>>;
|
|
878
|
+
interface ResultProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
879
|
+
tone?: "success" | "warning" | "error" | "confirm";
|
|
880
|
+
icon?: ReactNode;
|
|
881
|
+
title?: ReactNode;
|
|
882
|
+
description?: ReactNode;
|
|
883
|
+
actions?: ReactNode;
|
|
884
|
+
children?: ReactNode;
|
|
885
|
+
}
|
|
886
|
+
/** The end of a flow — what happened, and the one thing to do next. */
|
|
887
|
+
declare const Result: react.ForwardRefExoticComponent<ResultProps & react.RefAttributes<HTMLDivElement>>;
|
|
888
|
+
interface SysPageProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
889
|
+
/** The status — 404, 500, offline. */
|
|
890
|
+
code?: ReactNode;
|
|
891
|
+
title?: ReactNode;
|
|
892
|
+
description?: ReactNode;
|
|
893
|
+
actions?: ReactNode;
|
|
894
|
+
children?: ReactNode;
|
|
895
|
+
}
|
|
896
|
+
declare const SysPage: react.ForwardRefExoticComponent<SysPageProps & react.RefAttributes<HTMLDivElement>>;
|
|
897
|
+
interface BannerProps extends HTMLAttributes<HTMLDivElement> {
|
|
898
|
+
/** Quieter treatment for anything that is not news. */
|
|
899
|
+
neutral?: boolean;
|
|
900
|
+
onDismiss?: () => void;
|
|
901
|
+
dismissLabel?: string;
|
|
902
|
+
children?: ReactNode;
|
|
903
|
+
}
|
|
904
|
+
/** Page-width announcement. One at a time, and always dismissible. */
|
|
905
|
+
declare const Banner: react.ForwardRefExoticComponent<BannerProps & react.RefAttributes<HTMLDivElement>>;
|
|
906
|
+
|
|
907
|
+
declare const CommandList: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
908
|
+
declare const CommandGroupLabel: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
909
|
+
declare const CommandFooter: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
910
|
+
declare const HoverCard: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
911
|
+
interface CommandPaletteProps extends DialogHTMLAttributes<HTMLDialogElement> {
|
|
912
|
+
children?: ReactNode;
|
|
913
|
+
}
|
|
914
|
+
/**
|
|
915
|
+
* ⌘K, on the platform dialog: the browser handles the top layer, the backdrop
|
|
916
|
+
* and Escape, so none of that has to be re-implemented.
|
|
917
|
+
*/
|
|
918
|
+
declare const CommandPalette: react.ForwardRefExoticComponent<CommandPaletteProps & react.RefAttributes<HTMLDialogElement>>;
|
|
919
|
+
declare const CommandInput: react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
|
|
920
|
+
interface CommandItemProps extends HTMLAttributes<HTMLButtonElement> {
|
|
921
|
+
/** Keyboard-highlighted row. Follows the arrow keys, not the mouse. */
|
|
922
|
+
active?: boolean;
|
|
923
|
+
icon?: ReactNode;
|
|
924
|
+
children?: ReactNode;
|
|
925
|
+
}
|
|
926
|
+
declare const CommandItem: react.ForwardRefExoticComponent<CommandItemProps & react.RefAttributes<HTMLButtonElement>>;
|
|
927
|
+
|
|
928
|
+
interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
929
|
+
/** Fuse the buttons into one control with shared borders. */
|
|
930
|
+
attached?: boolean;
|
|
931
|
+
children?: ReactNode;
|
|
932
|
+
}
|
|
933
|
+
declare const ButtonGroup: react.ForwardRefExoticComponent<ButtonGroupProps & react.RefAttributes<HTMLDivElement>>;
|
|
934
|
+
interface SplitButtonProps extends HTMLAttributes<HTMLSpanElement> {
|
|
935
|
+
/** The default action — the one most people want. */
|
|
936
|
+
children?: ReactNode;
|
|
937
|
+
/** The menu of the rest. */
|
|
938
|
+
menu?: ReactNode;
|
|
939
|
+
menuLabel?: string;
|
|
940
|
+
}
|
|
941
|
+
/** One obvious action, with its variations tucked behind the chevron. */
|
|
942
|
+
declare const SplitButton: react.ForwardRefExoticComponent<SplitButtonProps & react.RefAttributes<HTMLSpanElement>>;
|
|
943
|
+
interface ToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
944
|
+
pressed?: boolean;
|
|
945
|
+
children?: ReactNode;
|
|
946
|
+
}
|
|
947
|
+
/** A button that stays down. The pressed state is announced, not just drawn. */
|
|
948
|
+
declare const ToggleButton: react.ForwardRefExoticComponent<ToggleButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
949
|
+
declare const SortControl: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
950
|
+
declare const Share: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
951
|
+
declare const Accordion: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
952
|
+
interface DisclosureProps extends Omit<HTMLAttributes<HTMLDetailsElement>, "title"> {
|
|
953
|
+
/** The always-visible summary line. */
|
|
954
|
+
title: ReactNode;
|
|
955
|
+
/** Drop the surface, for a disclosure inside something already carrying one. */
|
|
956
|
+
plain?: boolean;
|
|
957
|
+
defaultOpen?: boolean;
|
|
958
|
+
children?: ReactNode;
|
|
959
|
+
}
|
|
960
|
+
/** Progressive disclosure on <details> — open state survives without JS. */
|
|
961
|
+
declare const Disclosure: react.ForwardRefExoticComponent<DisclosureProps & react.RefAttributes<HTMLDetailsElement>>;
|
|
962
|
+
declare const Calendar: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
963
|
+
declare const CalendarGrid: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
964
|
+
declare const CalendarMonth: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
965
|
+
declare const CalendarWeekday: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
966
|
+
declare const CalendarHeader: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
967
|
+
declare const DatePicker: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
968
|
+
declare const CalendarView: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
969
|
+
declare const CalendarViewHead: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
970
|
+
declare const CalendarViewCell: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
971
|
+
interface CalendarDayProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
972
|
+
/** Outside the shown month — present for the grid, quiet to the eye. */
|
|
973
|
+
muted?: boolean;
|
|
974
|
+
today?: boolean;
|
|
975
|
+
selected?: boolean;
|
|
976
|
+
children?: ReactNode;
|
|
977
|
+
}
|
|
978
|
+
declare const CalendarDay: react.ForwardRefExoticComponent<CalendarDayProps & react.RefAttributes<HTMLButtonElement>>;
|
|
979
|
+
interface EventProps extends HTMLAttributes<HTMLDivElement> {
|
|
980
|
+
/** Calendar colour — how one stream is told from another at a glance. */
|
|
981
|
+
tone?: "green" | "orange" | "purple";
|
|
982
|
+
children?: ReactNode;
|
|
983
|
+
}
|
|
984
|
+
declare const Event: react.ForwardRefExoticComponent<EventProps & react.RefAttributes<HTMLDivElement>>;
|
|
985
|
+
declare const Combobox: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
986
|
+
declare const ComboboxList: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
987
|
+
declare const ComboboxEmpty: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
988
|
+
declare const SearchResults: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
989
|
+
interface ComboboxOptionProps extends HTMLAttributes<HTMLLIElement> {
|
|
990
|
+
selected?: boolean;
|
|
991
|
+
children?: ReactNode;
|
|
992
|
+
}
|
|
993
|
+
declare const ComboboxOption: react.ForwardRefExoticComponent<ComboboxOptionProps & react.RefAttributes<HTMLLIElement>>;
|
|
994
|
+
interface SearchResultProps extends Omit<HTMLAttributes<HTMLAnchorElement>, "title"> {
|
|
995
|
+
title: ReactNode;
|
|
996
|
+
/** Matched text — wrap the hit in <mark>. */
|
|
997
|
+
snippet?: ReactNode;
|
|
998
|
+
/** Where it lives, so the same title in two places is still distinguishable. */
|
|
999
|
+
path?: ReactNode;
|
|
1000
|
+
href?: string;
|
|
1001
|
+
}
|
|
1002
|
+
declare const SearchResult: react.ForwardRefExoticComponent<SearchResultProps & react.RefAttributes<HTMLAnchorElement>>;
|
|
1003
|
+
declare const Carousel: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1004
|
+
declare const CarouselTrack: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1005
|
+
declare const CarouselSlide: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1006
|
+
declare const CarouselDots: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1007
|
+
declare const Gallery: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1008
|
+
declare const ImageViewer: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1009
|
+
declare const ImageViewerBar: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1010
|
+
declare const UploadPreviews: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1011
|
+
declare const UploadPreview: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1012
|
+
interface LightboxProps extends HTMLAttributes<HTMLDialogElement> {
|
|
1013
|
+
caption?: ReactNode;
|
|
1014
|
+
actions?: ReactNode;
|
|
1015
|
+
children?: ReactNode;
|
|
1016
|
+
}
|
|
1017
|
+
declare const Lightbox: react.ForwardRefExoticComponent<LightboxProps & react.RefAttributes<HTMLDialogElement>>;
|
|
1018
|
+
declare const AccountSwitcher: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1019
|
+
declare const CommandCenter: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1020
|
+
declare const Gantt: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1021
|
+
declare const GanttRow: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1022
|
+
declare const GanttBar: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1023
|
+
declare const HoverCardHost: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1024
|
+
declare const GlassInteractive: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1025
|
+
interface RailProps extends HTMLAttributes<HTMLElement> {
|
|
1026
|
+
material?: "glass";
|
|
1027
|
+
children?: ReactNode;
|
|
1028
|
+
}
|
|
1029
|
+
/** Icon-width navigation for when a sidebar costs too much room. */
|
|
1030
|
+
declare const Rail: react.ForwardRefExoticComponent<RailProps & react.RefAttributes<HTMLElement>>;
|
|
1031
|
+
declare const RailItem: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1032
|
+
interface AccountProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
1033
|
+
name: ReactNode;
|
|
1034
|
+
email?: ReactNode;
|
|
1035
|
+
/** Marks the account in use. */
|
|
1036
|
+
current?: boolean;
|
|
1037
|
+
children?: ReactNode;
|
|
1038
|
+
}
|
|
1039
|
+
declare const Account: react.ForwardRefExoticComponent<AccountProps & react.RefAttributes<HTMLDivElement>>;
|
|
1040
|
+
interface OnboardingFeatureProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
1041
|
+
title: ReactNode;
|
|
1042
|
+
description?: ReactNode;
|
|
1043
|
+
icon?: ReactNode;
|
|
1044
|
+
}
|
|
1045
|
+
declare const OnboardingFeature: react.ForwardRefExoticComponent<OnboardingFeatureProps & react.RefAttributes<HTMLDivElement>>;
|
|
1046
|
+
|
|
1047
|
+
declare const MediaPlaceholder: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1048
|
+
declare const AsyncImage: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1049
|
+
declare const Web: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1050
|
+
declare const Video: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1051
|
+
declare const Audio: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1052
|
+
declare const Waveform: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1053
|
+
interface ThumbProps extends HTMLAttributes<HTMLDivElement> {
|
|
1054
|
+
/** Runtime badge — marks it as a video without a second glance. */
|
|
1055
|
+
duration?: ReactNode;
|
|
1056
|
+
children?: ReactNode;
|
|
1057
|
+
}
|
|
1058
|
+
declare const Thumb: react.ForwardRefExoticComponent<ThumbProps & react.RefAttributes<HTMLDivElement>>;
|
|
1059
|
+
interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {
|
|
1060
|
+
/** 0–100, or omit for an indeterminate ring. */
|
|
1061
|
+
value?: number;
|
|
1062
|
+
label?: ReactNode;
|
|
1063
|
+
/** States what is progressing, for assistive tech. */
|
|
1064
|
+
description?: string;
|
|
1065
|
+
}
|
|
1066
|
+
declare const CircularProgress: react.ForwardRefExoticComponent<CircularProgressProps & react.RefAttributes<HTMLDivElement>>;
|
|
1067
|
+
interface AxisProps extends HTMLAttributes<HTMLDivElement> {
|
|
1068
|
+
/** Value axis rather than the category one. */
|
|
1069
|
+
y?: boolean;
|
|
1070
|
+
/** Tick labels, in order. */
|
|
1071
|
+
ticks?: ReactNode[];
|
|
1072
|
+
children?: ReactNode;
|
|
1073
|
+
}
|
|
1074
|
+
declare const Axis: react.ForwardRefExoticComponent<AxisProps & react.RefAttributes<HTMLDivElement>>;
|
|
1075
|
+
declare const RadarChart: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1076
|
+
declare const LineChart: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1077
|
+
declare const AreaChart: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1078
|
+
declare const ScatterChart: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1079
|
+
declare const GridLines: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1080
|
+
declare const MenuBar: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1081
|
+
declare const MenuBarItem: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1082
|
+
declare const PaginationEllipsis: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1083
|
+
interface PaginationProps extends HTMLAttributes<HTMLElement> {
|
|
1084
|
+
label?: string;
|
|
1085
|
+
children?: ReactNode;
|
|
1086
|
+
}
|
|
1087
|
+
declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
|
|
1088
|
+
interface PaginationItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
1089
|
+
current?: boolean;
|
|
1090
|
+
children?: ReactNode;
|
|
1091
|
+
}
|
|
1092
|
+
declare const PaginationItem: react.ForwardRefExoticComponent<PaginationItemProps & react.RefAttributes<HTMLAnchorElement>>;
|
|
1093
|
+
interface LiquidToggleProps extends HTMLAttributes<HTMLButtonElement> {
|
|
1094
|
+
pressed?: boolean;
|
|
1095
|
+
children?: ReactNode;
|
|
1096
|
+
}
|
|
1097
|
+
declare const LiquidToggle: react.ForwardRefExoticComponent<LiquidToggleProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1098
|
+
declare const CommandCenterTile: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1099
|
+
declare const CommandCenterLabel: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1100
|
+
declare const CommandCenterStatus: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1101
|
+
declare const ImageLens: react.ForwardRefExoticComponent<BlockProps & react.RefAttributes<HTMLElement>>;
|
|
1102
|
+
|
|
1103
|
+
/** Join class names, skipping falsy values. */
|
|
1104
|
+
declare function cn(...parts: Array<string | false | null | undefined>): string;
|
|
1105
|
+
|
|
1106
|
+
export { Accordion, Account, type AccountProps, AccountSwitcher, ActionSheet, type ActionSheetAction, Alert, AlertDialog, type AlertDialogAction, type AlertProps, AppGrid, AppTile, AreaChart, AsyncImage, Audio, Auth, AuthCard, type AuthCardProps, Avatar, AvatarGroup, type AvatarProps, Axis, type AxisProps, BackButton, Badge, type BadgeProps, Banner, type BannerProps, Bars, type BarsProps, type BaruaAccent, BaruaProvider, type BaruaProviderProps, type BaruaTheme, Bento, type BlockProps, BottomNav, BottomNavItem, BottomSheet, Breadcrumbs, BulkActions, Button, ButtonGroup, type ButtonGroupProps, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarDay, type CalendarDayProps, CalendarGrid, CalendarHeader, CalendarMonth, CalendarView, CalendarViewCell, CalendarViewHead, CalendarWeekday, Callout, Card, CardBody, CardEyebrow, CardFooter, CardGrid, CardHeader, type CardProps, CardRail, CardSubtitle, CardTitle, Carousel, CarouselDots, CarouselSlide, CarouselTrack, Chapter, type ChapterProps, Chart, ChartTip, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, type CircularProgressProps, CodeBlock, type CodeBlockProps, Columns, type ColumnsProps, Combobox, ComboboxEmpty, ComboboxList, ComboboxOption, type ComboboxOptionProps, CommandCenter, CommandCenterLabel, CommandCenterStatus, CommandCenterTile, CommandFooter, CommandGroupLabel, CommandInput, CommandItem, type CommandItemProps, CommandList, CommandPalette, type CommandPaletteProps, Container, type ContainerProps, type Crumb, Dashboard, DataGrid, DatePicker, DescriptionList, type DescriptionListProps, Disclosure, type DisclosureProps, Divider, type DividerProps, Dock, DockItem, DockTray, Donut, type DonutProps, type DonutSlice, DragHandle, Drawer, DrawerBody, DrawerHeader, type DrawerProps, Dropdown, type DropdownProps, Dropzone, type DropzoneProps, EmptyState, ErrorText, Event, type EventProps, Fab, type FabProps, FeatureRow, type FeatureRowProps, Feed, Field, type FieldProps, Fieldset, Figure, type FigureProps, FileBrowser, FileGrid, FileTile, type FileTileProps, FilterBar, FilterChip, type FilterChipProps, Footnote, Footnotes, Form, FormActions, FormRow, FormSection, type FormSectionProps, Gallery, Gantt, GanttBar, GanttRow, Gauge, type GaugeProps, GlassContainer, GlassInteractive, Grid, GridLines, type GridProps, GroupBox, Grow, HStack, Heatmap, Help, Hero, type HeroProps, HoverCard, HoverCardHost, Icon, type IconName, type IconProps, IconTile, type IconTileProps, ImageLens, ImageViewer, ImageViewerBar, Input, InputGroup, type InputGroupProps, type InputProps, Inspector, Kanban, KanbanColumn, type KanbanColumnProps, KanbanList, Kbd, Label, type LabelProps, Labeled, Landing, Legend, type LegendItem, type LegendProps, Lightbox, type LightboxProps, LineChart, LinearGauge, Link, LinkGroup, LiquidToggle, type LiquidToggleProps, List, ListFooter, ListHeader, ListItem, type ListItemProps, type ListProps, Log, MarketingNav, MarketingNavBrand, MarketingNavLinks, MediaPlaceholder, Menu, MenuBar, MenuBarItem, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, MenuSeparator, Modal, type ModalProps, type NavLinkProps, Notification, Onboarding, OnboardingFeature, type OnboardingFeatureProps, OnboardingHero, Optional, OtpInput, type OtpInputProps, Overline, Pagination, PaginationEllipsis, PaginationItem, type PaginationItemProps, type PaginationProps, PillNav, Popover, type PopoverProps, Progress, type ProgressProps, PromoBand, type PromoBandProps, Quote, type QuoteProps, RadarChart, Radio, Rail, RailItem, type RailProps, Range, type RangeProps, Resizable, ResizeHandle, Result, type ResultProps, SafeArea, ScatterChart, ScrollArea, type ScrollAreaProps, SearchField, SearchResult, type SearchResultProps, SearchResults, Section, Segmented, type SegmentedOption, Select, SelectionCount, Share, Sheet, Sidebar, SidebarGroup, SidebarHeading, SidebarItem, type SidebarItemProps, type SidebarProps, SiteFooter, SiteFooterGroup, SiteFooterGroups, SiteFooterHeading, SiteFooterLegal, Skeleton, SkipLink, Slider, SortControl, Spacer, Span, type SpanProps, Sparkline, type SparklineProps, SpecStrip, Spinner, Split, SplitButton, type SplitButtonProps, Stack, type StackProps, Stage, Stat, StatusBar, StatusBarItem, StatusDot, type Step, StepperInput, type StepperInputProps, Steps, type StepsProps, StoryCard, Swatch, Swatches, Switch, type SwitchProps, SysPage, type SysPageProps, type TabItem, TabPanel, Table, TableNum, type TableProps, TableSortHeader, TableWrap, Tabs, Tag, Task, TaskList, type TaskProps, TaskRow, Text, type TextProps, type TextRole, Textarea, ThemeScript, Thumb, type ThumbProps, Timeline, type TimelineEntry, type TimelineProps, Tip, type ToastOptions, ToastProvider, type ToastVariant, ToggleButton, type ToggleButtonProps, Toolbar, Tooltip, TopNav, TopNavBrand, TopNavLink, TopNavLinks, Tree, TreeItem, type TreeItemProps, Upload, UploadItem, type UploadItemProps, UploadPreview, UploadPreviews, VStack, Video, Wall, Waveform, Web, Workspace, WorkspaceMain, block, buttonClasses, cn, iconNames, useBaruaTheme, useToast };
|