@tac-ui/web 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/icons.d.mts +1 -0
- package/dist/icons.d.ts +1 -0
- package/dist/icons.js +12 -0
- package/dist/icons.mjs +1 -0
- package/dist/index.d.mts +1503 -0
- package/dist/index.d.ts +1503 -0
- package/dist/index.js +5934 -0
- package/dist/index.mjs +5783 -0
- package/dist/tailwind/preset.d.mts +603 -0
- package/dist/tailwind/preset.d.ts +603 -0
- package/dist/tailwind/preset.js +396 -0
- package/dist/tailwind/preset.mjs +393 -0
- package/package.json +67 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,1503 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
import React__default from 'react';
|
|
4
|
+
import { ThemeMode, UseTacThemeReturn } from '@tac-ui/shared';
|
|
5
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
6
|
+
import { VariantProps } from 'class-variance-authority';
|
|
7
|
+
import { ClassValue } from 'clsx';
|
|
8
|
+
|
|
9
|
+
interface TacProviderProps {
|
|
10
|
+
children: React__default.ReactNode;
|
|
11
|
+
defaultTheme?: ThemeMode;
|
|
12
|
+
storageKey?: string;
|
|
13
|
+
}
|
|
14
|
+
declare function TacProvider({ children, defaultTheme, storageKey }: TacProviderProps): react_jsx_runtime.JSX.Element;
|
|
15
|
+
declare function useTacTheme(): UseTacThemeReturn;
|
|
16
|
+
|
|
17
|
+
declare const buttonVariants: (props?: ({
|
|
18
|
+
variant?: "primary" | "secondary" | "outline" | "ghost" | "point" | "destructive" | null | undefined;
|
|
19
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
20
|
+
iconOnly?: boolean | null | undefined;
|
|
21
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
22
|
+
/** Visual style variant of the button. */
|
|
23
|
+
type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'point' | 'destructive';
|
|
24
|
+
/** Size variant of the button. */
|
|
25
|
+
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
26
|
+
/**
|
|
27
|
+
* Props for the Button component.
|
|
28
|
+
* Extends native button attributes and CVA variant props.
|
|
29
|
+
*/
|
|
30
|
+
interface ButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
31
|
+
/** Icon rendered to the left of the button label. */
|
|
32
|
+
leftIcon?: React__default.ReactNode;
|
|
33
|
+
/** Icon rendered to the right of the button label. */
|
|
34
|
+
rightIcon?: React__default.ReactNode;
|
|
35
|
+
}
|
|
36
|
+
declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
37
|
+
|
|
38
|
+
/** Props for the Input component, a styled text input with optional label, icons, and error state. */
|
|
39
|
+
interface InputProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
|
|
40
|
+
/** Label text displayed above the input. */
|
|
41
|
+
label?: string;
|
|
42
|
+
/** Helper text displayed below the input when there is no error. */
|
|
43
|
+
helperText?: string;
|
|
44
|
+
/** When true, applies error styling to the input. */
|
|
45
|
+
error?: boolean;
|
|
46
|
+
/** Error message displayed below the input when `error` is true. */
|
|
47
|
+
errorMessage?: string;
|
|
48
|
+
/** Icon rendered inside the left side of the input. */
|
|
49
|
+
leftIcon?: React__default.ReactNode;
|
|
50
|
+
/** Icon rendered inside the right side of the input. */
|
|
51
|
+
rightIcon?: React__default.ReactNode;
|
|
52
|
+
/** Button element rendered flush to the right side of the input. */
|
|
53
|
+
rightButton?: React__default.ReactNode;
|
|
54
|
+
}
|
|
55
|
+
declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
56
|
+
|
|
57
|
+
/** Props for the Textarea component, a styled multi-line text input with optional label and error state. */
|
|
58
|
+
interface TextareaProps extends React__default.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
59
|
+
/** Label text displayed above the textarea. */
|
|
60
|
+
label?: string;
|
|
61
|
+
/** Helper text displayed below the textarea when there is no error. */
|
|
62
|
+
helperText?: string;
|
|
63
|
+
/** When true, applies error styling to the textarea. */
|
|
64
|
+
error?: boolean;
|
|
65
|
+
/** Error message displayed below the textarea when `error` is true. */
|
|
66
|
+
errorMessage?: string;
|
|
67
|
+
}
|
|
68
|
+
declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps & React__default.RefAttributes<HTMLTextAreaElement>>;
|
|
69
|
+
|
|
70
|
+
/** Size variant of the Select component. */
|
|
71
|
+
type SelectSize = 'sm' | 'md' | 'lg';
|
|
72
|
+
/** Represents a single option in the Select dropdown. */
|
|
73
|
+
interface SelectOption {
|
|
74
|
+
/** The value submitted when this option is selected. */
|
|
75
|
+
value: string;
|
|
76
|
+
/** The human-readable label displayed for this option. */
|
|
77
|
+
label: string;
|
|
78
|
+
/** When true, this option cannot be selected. */
|
|
79
|
+
disabled?: boolean;
|
|
80
|
+
}
|
|
81
|
+
/** Props for the Select component, a styled native select with optional label and error state. */
|
|
82
|
+
interface SelectProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
83
|
+
/** Label text displayed above the select. */
|
|
84
|
+
label?: string;
|
|
85
|
+
/** Helper text displayed below the select when there is no error. */
|
|
86
|
+
helperText?: string;
|
|
87
|
+
/** When true, applies error styling to the select. */
|
|
88
|
+
error?: boolean;
|
|
89
|
+
/** Error message displayed below the select when `error` is true. */
|
|
90
|
+
errorMessage?: string;
|
|
91
|
+
/** Array of options to render in the dropdown. */
|
|
92
|
+
options: SelectOption[];
|
|
93
|
+
/** Placeholder option shown when no value is selected. */
|
|
94
|
+
placeholder?: string;
|
|
95
|
+
/** Controls the height and font size of the select element. */
|
|
96
|
+
selectSize?: SelectSize;
|
|
97
|
+
/** Currently selected value. */
|
|
98
|
+
value?: string;
|
|
99
|
+
/** Called when an option is selected. */
|
|
100
|
+
onChange?: (value: string) => void;
|
|
101
|
+
/** When true, the select is disabled. */
|
|
102
|
+
disabled?: boolean;
|
|
103
|
+
/** ID attribute for the trigger button. */
|
|
104
|
+
id?: string;
|
|
105
|
+
}
|
|
106
|
+
declare const Select: React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
107
|
+
|
|
108
|
+
/** A single selectable option in the Combobox dropdown. */
|
|
109
|
+
interface ComboboxOption {
|
|
110
|
+
/** The value submitted when this option is selected. */
|
|
111
|
+
value: string;
|
|
112
|
+
/** The human-readable label displayed for this option. */
|
|
113
|
+
label: string;
|
|
114
|
+
/** When true, this option cannot be selected. */
|
|
115
|
+
disabled?: boolean;
|
|
116
|
+
}
|
|
117
|
+
/** Props for the Combobox component, a searchable select input with a filterable dropdown. */
|
|
118
|
+
interface ComboboxProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
|
|
119
|
+
/** Available options to filter and select from. */
|
|
120
|
+
options: ComboboxOption[];
|
|
121
|
+
/** Currently selected value. */
|
|
122
|
+
value?: string;
|
|
123
|
+
/** Called when an option is selected. */
|
|
124
|
+
onChange?: (value: string) => void;
|
|
125
|
+
/** Placeholder text for the search input. */
|
|
126
|
+
placeholder?: string;
|
|
127
|
+
/** Text shown when no options match the filter. @default 'No results found' */
|
|
128
|
+
emptyText?: string;
|
|
129
|
+
}
|
|
130
|
+
/**
|
|
131
|
+
* Combobox is a searchable select input that filters a list of options as the user types.
|
|
132
|
+
* Supports keyboard navigation (Arrow keys, Enter, Escape) and outside-click to close.
|
|
133
|
+
*
|
|
134
|
+
* @example
|
|
135
|
+
* <Combobox
|
|
136
|
+
* options={[{ value: 'a', label: 'Apple' }, { value: 'b', label: 'Banana' }]}
|
|
137
|
+
* value={selected}
|
|
138
|
+
* onChange={setSelected}
|
|
139
|
+
* placeholder="Search fruit..."
|
|
140
|
+
* />
|
|
141
|
+
*/
|
|
142
|
+
declare const Combobox: React__default.ForwardRefExoticComponent<ComboboxProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
143
|
+
|
|
144
|
+
declare const cardVariants: (props?: ({
|
|
145
|
+
variant?: "flat" | "default" | "accent" | "glass" | null | undefined;
|
|
146
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
147
|
+
/** Visual style of the Card. */
|
|
148
|
+
type CardVariant = 'default' | 'accent' | 'glass' | 'flat';
|
|
149
|
+
/** Props for the Card container component, which groups related content with a bordered surface. */
|
|
150
|
+
interface CardProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
|
|
151
|
+
/** Visual style of the card. @default 'default' */
|
|
152
|
+
variant?: CardVariant;
|
|
153
|
+
/** When true, enables hover/active/focus spring interactions. @default false */
|
|
154
|
+
interactive?: boolean;
|
|
155
|
+
}
|
|
156
|
+
declare const Card: React__default.ForwardRefExoticComponent<CardProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
157
|
+
declare const CardHeader: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
158
|
+
declare const CardTitle: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLHeadingElement> & React__default.RefAttributes<HTMLHeadingElement>>;
|
|
159
|
+
declare const CardDescription: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLParagraphElement> & React__default.RefAttributes<HTMLParagraphElement>>;
|
|
160
|
+
declare const CardContent: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
161
|
+
declare const CardFooter: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
162
|
+
|
|
163
|
+
/** Props for the MorphingCard component, which smoothly morphs between a compact preview and an expanded detail view. */
|
|
164
|
+
interface MorphingCardProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
165
|
+
/** Unique ID for layout morphing synchronization. */
|
|
166
|
+
layoutId: string;
|
|
167
|
+
/** Whether the card is in expanded state. */
|
|
168
|
+
expanded?: boolean;
|
|
169
|
+
/** Callback when expansion state changes. */
|
|
170
|
+
onExpandedChange?: (expanded: boolean) => void;
|
|
171
|
+
/** Content shown in compact (collapsed) state. */
|
|
172
|
+
preview?: React__default.ReactNode;
|
|
173
|
+
/** Content shown in expanded state. */
|
|
174
|
+
detail?: React__default.ReactNode;
|
|
175
|
+
}
|
|
176
|
+
declare const MorphingCard: React__default.ForwardRefExoticComponent<MorphingCardProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
177
|
+
|
|
178
|
+
declare const badgeVariants: (props?: ({
|
|
179
|
+
variant?: "secondary" | "outline" | "destructive" | "default" | "error" | "glass" | "success" | "warning" | "info" | null | undefined;
|
|
180
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
181
|
+
/** Visual style of the Badge. */
|
|
182
|
+
type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'error' | 'warning' | 'info' | 'glass';
|
|
183
|
+
/** Props for the Badge component, which displays a short status label or count. */
|
|
184
|
+
interface BadgeProps extends React__default.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
|
|
185
|
+
/** Visual style of the badge. @example variant="success" */
|
|
186
|
+
variant?: BadgeVariant;
|
|
187
|
+
/** When true, applies subtle spring hover/tap interactions. Automatically enabled when onClick is provided. @default false */
|
|
188
|
+
interactive?: boolean;
|
|
189
|
+
/** Numeric count value. When provided, changes animate with an exit transition. */
|
|
190
|
+
count?: number;
|
|
191
|
+
}
|
|
192
|
+
declare const Badge: React__default.ForwardRefExoticComponent<BadgeProps & React__default.RefAttributes<HTMLSpanElement>>;
|
|
193
|
+
|
|
194
|
+
/** Props for the Checkbox component, a styled checkbox input with optional label and indeterminate state. */
|
|
195
|
+
interface CheckboxProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
196
|
+
/** Label text displayed next to the checkbox. */
|
|
197
|
+
label?: string;
|
|
198
|
+
/** When true, renders the checkbox in an indeterminate (partially checked) state. */
|
|
199
|
+
indeterminate?: boolean;
|
|
200
|
+
/** When false, removes the background tint from the label container. @default true */
|
|
201
|
+
filled?: boolean;
|
|
202
|
+
}
|
|
203
|
+
declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
204
|
+
|
|
205
|
+
/** Props for the RadioGroup component, a container that manages selection state for Radio children. */
|
|
206
|
+
interface RadioGroupProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
207
|
+
/** The controlled selected value. */
|
|
208
|
+
value?: string;
|
|
209
|
+
/** The initially selected value for uncontrolled usage. */
|
|
210
|
+
defaultValue?: string;
|
|
211
|
+
/** Callback fired when the selected radio changes. */
|
|
212
|
+
onValueChange?: (value: string) => void;
|
|
213
|
+
}
|
|
214
|
+
declare const RadioGroup: React__default.ForwardRefExoticComponent<RadioGroupProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
215
|
+
/** Props for the Radio component, a single radio button that works within a RadioGroup. */
|
|
216
|
+
interface RadioProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> {
|
|
217
|
+
/** Label text displayed next to the radio button. */
|
|
218
|
+
label?: string;
|
|
219
|
+
/** The value this radio represents; compared against the RadioGroup's selected value. */
|
|
220
|
+
radioValue: string;
|
|
221
|
+
}
|
|
222
|
+
declare const Radio: React__default.ForwardRefExoticComponent<RadioProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
223
|
+
|
|
224
|
+
/** Props for the Switch component, a toggle control that supports controlled and uncontrolled usage. */
|
|
225
|
+
interface SwitchProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
|
|
226
|
+
/** The controlled checked state. */
|
|
227
|
+
checked?: boolean;
|
|
228
|
+
/** The initial checked state for uncontrolled usage. */
|
|
229
|
+
defaultChecked?: boolean;
|
|
230
|
+
/** Callback fired when the switch is toggled, receives the new checked value. */
|
|
231
|
+
onChange?: (checked: boolean) => void;
|
|
232
|
+
/** Label text displayed next to the switch. */
|
|
233
|
+
label?: string;
|
|
234
|
+
}
|
|
235
|
+
declare const Switch: React__default.ForwardRefExoticComponent<SwitchProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
236
|
+
|
|
237
|
+
/** Props for the AnimatedToggle component, a button that swaps icons with a rotation animation on toggle. */
|
|
238
|
+
interface AnimatedToggleProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
|
|
239
|
+
/** The controlled checked state. */
|
|
240
|
+
checked?: boolean;
|
|
241
|
+
/** Callback fired when the toggle is clicked, receives the new checked value. */
|
|
242
|
+
onChange?: (checked: boolean) => void;
|
|
243
|
+
/** Icon rendered when `checked` is true. */
|
|
244
|
+
iconOn?: React__default.ReactNode;
|
|
245
|
+
/** Icon rendered when `checked` is false. */
|
|
246
|
+
iconOff?: React__default.ReactNode;
|
|
247
|
+
}
|
|
248
|
+
declare const AnimatedToggle: React__default.ForwardRefExoticComponent<AnimatedToggleProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
249
|
+
|
|
250
|
+
/** Visual style variant for the Tabs component. */
|
|
251
|
+
type TabVariant = 'underline' | 'pill' | 'outline' | 'icon';
|
|
252
|
+
/**
|
|
253
|
+
* Root tabs container that manages active tab state.
|
|
254
|
+
* @example <Tabs defaultValue="tab1" variant="underline">...</Tabs>
|
|
255
|
+
*/
|
|
256
|
+
interface TabsProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
257
|
+
/** The controlled active tab value. */
|
|
258
|
+
value?: string;
|
|
259
|
+
/** The tab value open by default in uncontrolled mode. */
|
|
260
|
+
defaultValue?: string;
|
|
261
|
+
/** Called when the active tab changes. */
|
|
262
|
+
onValueChange?: (value: string) => void;
|
|
263
|
+
/** Visual style of the tab list. @default 'underline' */
|
|
264
|
+
variant?: TabVariant;
|
|
265
|
+
}
|
|
266
|
+
declare const Tabs: React__default.ForwardRefExoticComponent<TabsProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
267
|
+
declare const TabsList: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
268
|
+
/** Props for an individual tab trigger button. */
|
|
269
|
+
interface TabTriggerProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
270
|
+
/** The value this trigger activates; must match a TabContent value. */
|
|
271
|
+
value: string;
|
|
272
|
+
/** Icon element to display (only used with icon variant). */
|
|
273
|
+
icon?: React__default.ReactNode;
|
|
274
|
+
}
|
|
275
|
+
declare const TabTrigger: React__default.ForwardRefExoticComponent<TabTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
276
|
+
/** Props for a tab panel that renders when its value is active. */
|
|
277
|
+
interface TabContentProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
278
|
+
/** The value that activates this content panel; must match a TabTrigger value. */
|
|
279
|
+
value: string;
|
|
280
|
+
}
|
|
281
|
+
declare const TabContent: React__default.ForwardRefExoticComponent<TabContentProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
282
|
+
|
|
283
|
+
/** HTML event handlers that conflict with Framer Motion's prop types. */
|
|
284
|
+
type MotionConflictingHandlers = 'onDrag' | 'onDragEnd' | 'onDragStart' | 'onDragOver' | 'onDragEnter' | 'onDragLeave' | 'onAnimationStart' | 'onAnimationEnd';
|
|
285
|
+
|
|
286
|
+
/**
|
|
287
|
+
* Modal dialog with a fixed-width layout, backdrop, and keyboard (Escape) dismissal.
|
|
288
|
+
* Traps focus within the dialog while open and restores focus on close.
|
|
289
|
+
* @example <Dialog open={open} onClose={() => setOpen(false)}>...</Dialog>
|
|
290
|
+
*/
|
|
291
|
+
interface DialogProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, MotionConflictingHandlers> {
|
|
292
|
+
/** Whether the dialog is visible. */
|
|
293
|
+
open: boolean;
|
|
294
|
+
/** Callback fired when the dialog should close (backdrop click or Escape key). */
|
|
295
|
+
onClose: () => void;
|
|
296
|
+
/** Optional layoutId for shared layout morphing via Framer Motion. */
|
|
297
|
+
layoutId?: string;
|
|
298
|
+
/** When false, the dark backdrop overlay is hidden. @default true */
|
|
299
|
+
backdrop?: boolean;
|
|
300
|
+
}
|
|
301
|
+
declare const Dialog: React__default.ForwardRefExoticComponent<DialogProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
302
|
+
declare const DialogTitle: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLHeadingElement> & React__default.RefAttributes<HTMLHeadingElement>>;
|
|
303
|
+
declare const DialogDescription: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLParagraphElement> & React__default.RefAttributes<HTMLParagraphElement>>;
|
|
304
|
+
declare const DialogHeader: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
305
|
+
declare const DialogFooter: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
306
|
+
|
|
307
|
+
/** Controls the maximum width of the Modal panel. */
|
|
308
|
+
type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
309
|
+
/**
|
|
310
|
+
* Responsive modal dialog with configurable size, backdrop, and keyboard (Escape) dismissal.
|
|
311
|
+
* Traps focus within the modal while open and restores focus on close.
|
|
312
|
+
* @example <Modal open={open} onClose={() => setOpen(false)} size="lg">...</Modal>
|
|
313
|
+
*/
|
|
314
|
+
interface ModalProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, MotionConflictingHandlers> {
|
|
315
|
+
/** Whether the modal is visible. */
|
|
316
|
+
open: boolean;
|
|
317
|
+
/** Callback fired when the modal should close (backdrop click or Escape key). */
|
|
318
|
+
onClose: () => void;
|
|
319
|
+
/** Maximum width preset of the modal panel. @default 'md' */
|
|
320
|
+
size?: ModalSize;
|
|
321
|
+
/** Optional layoutId for shared layout morphing via Framer Motion. */
|
|
322
|
+
layoutId?: string;
|
|
323
|
+
/** When false, the dark backdrop overlay is hidden. @default true */
|
|
324
|
+
backdrop?: boolean;
|
|
325
|
+
}
|
|
326
|
+
declare const Modal: React__default.ForwardRefExoticComponent<ModalProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
327
|
+
declare const ModalHeader: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
328
|
+
declare const ModalIcon: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
329
|
+
declare const ModalTitle: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLHeadingElement> & React__default.RefAttributes<HTMLHeadingElement>>;
|
|
330
|
+
declare const ModalDescription: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLParagraphElement> & React__default.RefAttributes<HTMLParagraphElement>>;
|
|
331
|
+
declare const ModalFooter: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
332
|
+
|
|
333
|
+
declare const alertVariants: (props?: ({
|
|
334
|
+
variant?: "default" | "error" | "glass" | "success" | "warning" | "info" | null | undefined;
|
|
335
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
336
|
+
/** Color and semantic variant for the Alert component. */
|
|
337
|
+
type AlertVariant = 'default' | 'success' | 'error' | 'warning' | 'info' | 'glass';
|
|
338
|
+
/**
|
|
339
|
+
* Inline alert banner for displaying status messages with optional icon and dismiss button.
|
|
340
|
+
* Features a left accent stripe for visual emphasis.
|
|
341
|
+
* @example <Alert variant="success" icon={<CheckIcon />}>Saved successfully.</Alert>
|
|
342
|
+
*/
|
|
343
|
+
interface AlertProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
|
|
344
|
+
/** Optional icon displayed to the left of the alert content. */
|
|
345
|
+
icon?: React__default.ReactNode;
|
|
346
|
+
/** When true, shows a close button to dismiss the alert. */
|
|
347
|
+
dismissible?: boolean;
|
|
348
|
+
/** Called when the dismiss button is clicked. */
|
|
349
|
+
onDismiss?: () => void;
|
|
350
|
+
}
|
|
351
|
+
declare const Alert: React__default.ForwardRefExoticComponent<AlertProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
352
|
+
declare const AlertTitle: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLHeadingElement> & React__default.RefAttributes<HTMLHeadingElement>>;
|
|
353
|
+
declare const AlertDescription: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLParagraphElement> & React__default.RefAttributes<HTMLParagraphElement>>;
|
|
354
|
+
|
|
355
|
+
/** Controls whether one or multiple accordion items can be open simultaneously. */
|
|
356
|
+
type AccordionType = 'single' | 'multiple';
|
|
357
|
+
/**
|
|
358
|
+
* Collapsible accordion container that manages open/close state for its items.
|
|
359
|
+
* @example <Accordion type="single" defaultValue="item-1">...</Accordion>
|
|
360
|
+
*/
|
|
361
|
+
interface AccordionProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
362
|
+
/** Whether only one item can be open at a time or multiple. */
|
|
363
|
+
type?: AccordionType;
|
|
364
|
+
/** The value(s) of the item(s) open by default. */
|
|
365
|
+
defaultValue?: string | string[];
|
|
366
|
+
/** Applies glassmorphism styling to each accordion item. */
|
|
367
|
+
glass?: boolean;
|
|
368
|
+
/** When true, shows borders around each accordion item. @default true */
|
|
369
|
+
outline?: boolean;
|
|
370
|
+
}
|
|
371
|
+
declare const Accordion: React__default.ForwardRefExoticComponent<AccordionProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
372
|
+
/** Props for a single accordion section wrapper. */
|
|
373
|
+
interface AccordionItemProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
374
|
+
/** Unique identifier for this accordion item; used to control open state. */
|
|
375
|
+
value: string;
|
|
376
|
+
}
|
|
377
|
+
declare const AccordionItem: React__default.ForwardRefExoticComponent<AccordionItemProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
378
|
+
/** Props for the button that toggles an accordion item open or closed. */
|
|
379
|
+
interface AccordionTriggerProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
380
|
+
/** The accordion item value this trigger controls. */
|
|
381
|
+
value: string;
|
|
382
|
+
}
|
|
383
|
+
declare const AccordionTrigger: React__default.ForwardRefExoticComponent<AccordionTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
384
|
+
/** Props for the collapsible content panel of an accordion item. */
|
|
385
|
+
interface AccordionContentProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
386
|
+
/** The accordion item value that controls visibility of this content. */
|
|
387
|
+
value: string;
|
|
388
|
+
}
|
|
389
|
+
declare const AccordionContent: React__default.ForwardRefExoticComponent<AccordionContentProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
390
|
+
|
|
391
|
+
/** Props for the Breadcrumb root nav element. */
|
|
392
|
+
type BreadcrumbProps = React__default.HTMLAttributes<HTMLElement>;
|
|
393
|
+
declare const Breadcrumb: React__default.ForwardRefExoticComponent<BreadcrumbProps & React__default.RefAttributes<HTMLElement>>;
|
|
394
|
+
declare const BreadcrumbList: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLOListElement> & React__default.RefAttributes<HTMLOListElement>>;
|
|
395
|
+
/** Props for an individual breadcrumb list item. */
|
|
396
|
+
interface BreadcrumbItemProps extends React__default.LiHTMLAttributes<HTMLLIElement> {
|
|
397
|
+
/** Marks this item as the current page, applying active styles and aria-current="page". */
|
|
398
|
+
current?: boolean;
|
|
399
|
+
}
|
|
400
|
+
declare const BreadcrumbItem: React__default.ForwardRefExoticComponent<BreadcrumbItemProps & React__default.RefAttributes<HTMLLIElement>>;
|
|
401
|
+
/** Props for a breadcrumb anchor link. */
|
|
402
|
+
type BreadcrumbLinkProps = React__default.AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
403
|
+
declare const BreadcrumbLink: React__default.ForwardRefExoticComponent<BreadcrumbLinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
|
|
404
|
+
declare const BreadcrumbSeparator: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLSpanElement> & React__default.RefAttributes<HTMLSpanElement>>;
|
|
405
|
+
declare const BreadcrumbEllipsis: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLSpanElement> & React__default.RefAttributes<HTMLSpanElement>>;
|
|
406
|
+
|
|
407
|
+
/** Horizontal alignment of the dropdown menu relative to its trigger. */
|
|
408
|
+
type DropdownAlign = 'start' | 'center' | 'end';
|
|
409
|
+
/**
|
|
410
|
+
* Dropdown menu that displays a floating list of actions on trigger click.
|
|
411
|
+
* Supports keyboard navigation (Arrow keys, Home, End, Enter, Escape).
|
|
412
|
+
* @example <Dropdown trigger={<Button>Open</Button>} align="end">...</Dropdown>
|
|
413
|
+
*/
|
|
414
|
+
interface DropdownProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
415
|
+
/** The element that toggles the dropdown open/closed when clicked. */
|
|
416
|
+
trigger: React__default.ReactNode;
|
|
417
|
+
/** Controlled open state; omit to use uncontrolled mode. */
|
|
418
|
+
open?: boolean;
|
|
419
|
+
/** Called when the open state changes. */
|
|
420
|
+
onOpenChange?: (open: boolean) => void;
|
|
421
|
+
/** Horizontal alignment of the menu relative to the trigger. @default 'start' */
|
|
422
|
+
align?: DropdownAlign;
|
|
423
|
+
}
|
|
424
|
+
declare const Dropdown: React__default.ForwardRefExoticComponent<DropdownProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
425
|
+
declare const DropdownTitle: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
426
|
+
declare const DropdownDivider: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
427
|
+
/** Props for a single clickable item inside a Dropdown menu. */
|
|
428
|
+
interface DropdownItemProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
429
|
+
/** Renders the item in destructive (error) colors to signal a dangerous action. */
|
|
430
|
+
destructive?: boolean;
|
|
431
|
+
}
|
|
432
|
+
declare const DropdownItem: React__default.ForwardRefExoticComponent<DropdownItemProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
433
|
+
/** Props for a search input rendered at the top of a Dropdown menu. */
|
|
434
|
+
type DropdownSearchProps = React__default.InputHTMLAttributes<HTMLInputElement>;
|
|
435
|
+
declare const DropdownSearch: React__default.ForwardRefExoticComponent<DropdownSearchProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
436
|
+
|
|
437
|
+
/** Props for the Pagination root nav element. */
|
|
438
|
+
interface PaginationProps extends React__default.HTMLAttributes<HTMLElement> {
|
|
439
|
+
/** Accessible label for the pagination nav element. @default 'Pagination' */
|
|
440
|
+
label?: string;
|
|
441
|
+
}
|
|
442
|
+
declare const Pagination: React__default.ForwardRefExoticComponent<PaginationProps & React__default.RefAttributes<HTMLElement>>;
|
|
443
|
+
/** Props for the Pagination content list. */
|
|
444
|
+
interface PaginationContentProps extends React__default.HTMLAttributes<HTMLUListElement> {
|
|
445
|
+
/** Applies glassmorphism styling to the pagination container. */
|
|
446
|
+
glass?: boolean;
|
|
447
|
+
}
|
|
448
|
+
declare const PaginationContent: React__default.ForwardRefExoticComponent<PaginationContentProps & React__default.RefAttributes<HTMLUListElement>>;
|
|
449
|
+
/** Props for an individual page number button in the pagination list. */
|
|
450
|
+
interface PaginationItemProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
451
|
+
/** Highlights this item as the currently active page. */
|
|
452
|
+
active?: boolean;
|
|
453
|
+
}
|
|
454
|
+
declare const PaginationItem: React__default.ForwardRefExoticComponent<PaginationItemProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
455
|
+
declare const PaginationEllipsis: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLSpanElement> & React__default.RefAttributes<HTMLSpanElement>>;
|
|
456
|
+
/** Props for the Previous and Next navigation buttons in a pagination component. */
|
|
457
|
+
type PaginationPrevNextProps = React__default.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
458
|
+
declare const PaginationPrevious: React__default.ForwardRefExoticComponent<PaginationPrevNextProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
459
|
+
declare const PaginationNext: React__default.ForwardRefExoticComponent<PaginationPrevNextProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
460
|
+
|
|
461
|
+
/** Responsive table wrapper with horizontal scroll overflow. */
|
|
462
|
+
declare const Table: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLTableElement> & React__default.RefAttributes<HTMLTableElement>>;
|
|
463
|
+
/** Renders the `<thead>` section with subtle glass background and bottom border on rows. */
|
|
464
|
+
declare const TableHeader: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLTableSectionElement> & React__default.RefAttributes<HTMLTableSectionElement>>;
|
|
465
|
+
/** Renders the `<tbody>` section, removing the border from the last row. */
|
|
466
|
+
declare const TableBody: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLTableSectionElement> & React__default.RefAttributes<HTMLTableSectionElement>>;
|
|
467
|
+
/** Renders the `<tfoot>` section with a top border and secondary background. */
|
|
468
|
+
declare const TableFooter: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLTableSectionElement> & React__default.RefAttributes<HTMLTableSectionElement>>;
|
|
469
|
+
/** Renders a `<tr>` with glass hover highlight and selected state styling. */
|
|
470
|
+
declare const TableRow: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLTableRowElement> & React__default.RefAttributes<HTMLTableRowElement>>;
|
|
471
|
+
/** Renders a `<th>` header cell with muted foreground text and medium font weight. */
|
|
472
|
+
declare const TableHead: React__default.ForwardRefExoticComponent<React__default.ThHTMLAttributes<HTMLTableCellElement> & React__default.RefAttributes<HTMLTableCellElement>>;
|
|
473
|
+
/** Renders a `<td>` data cell with standard padding and middle alignment. */
|
|
474
|
+
declare const TableCell: React__default.ForwardRefExoticComponent<React__default.TdHTMLAttributes<HTMLTableCellElement> & React__default.RefAttributes<HTMLTableCellElement>>;
|
|
475
|
+
/** Renders a `<caption>` with muted foreground text positioned below the table. */
|
|
476
|
+
declare const TableCaption: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLTableCaptionElement> & React__default.RefAttributes<HTMLTableCaptionElement>>;
|
|
477
|
+
|
|
478
|
+
declare const snackbarVariants: (props?: ({
|
|
479
|
+
variant?: "default" | "error" | "success" | "warning" | "info" | null | undefined;
|
|
480
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
481
|
+
/** Color and semantic variant for the Snackbar component. */
|
|
482
|
+
type SnackbarVariant = 'default' | 'success' | 'error' | 'warning' | 'info';
|
|
483
|
+
/**
|
|
484
|
+
* Fixed-position toast notification that auto-dismisses after a configurable duration.
|
|
485
|
+
* @example <Snackbar open={open} onClose={handleClose} variant="success">Item saved.</Snackbar>
|
|
486
|
+
*/
|
|
487
|
+
interface SnackbarProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, MotionConflictingHandlers>, VariantProps<typeof snackbarVariants> {
|
|
488
|
+
/** Whether the snackbar is visible. */
|
|
489
|
+
open: boolean;
|
|
490
|
+
/** Callback fired when the snackbar closes (auto-hide or close button). */
|
|
491
|
+
onClose?: () => void;
|
|
492
|
+
/** Milliseconds before the snackbar auto-closes; set to 0 to disable. @default 5000 */
|
|
493
|
+
autoHideDuration?: number;
|
|
494
|
+
/** Optional icon shown on the left (only visible in the default variant). */
|
|
495
|
+
icon?: React__default.ReactNode;
|
|
496
|
+
/** Optional action button rendered to the right of the message. */
|
|
497
|
+
action?: React__default.ReactNode;
|
|
498
|
+
/** Accessible label for the close button. @default 'Close' */
|
|
499
|
+
closeLabel?: string;
|
|
500
|
+
/** Callback fired when the action button is clicked. */
|
|
501
|
+
onAction?: () => void;
|
|
502
|
+
}
|
|
503
|
+
declare const Snackbar: React__default.ForwardRefExoticComponent<SnackbarProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
504
|
+
|
|
505
|
+
declare const avatarVariants: (props?: ({
|
|
506
|
+
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
507
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
508
|
+
/** Size of the Avatar. */
|
|
509
|
+
type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
510
|
+
/** Props for the Avatar component, which displays a user image, initials, or icon in a circular frame. */
|
|
511
|
+
interface AvatarProps extends React__default.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof avatarVariants> {
|
|
512
|
+
/** Size of the avatar. @example size="lg" */
|
|
513
|
+
size?: AvatarSize;
|
|
514
|
+
/** URL of the image to display. Falls back to `initials` or `icon` on error. */
|
|
515
|
+
src?: string;
|
|
516
|
+
/** Accessible alt text for the image. */
|
|
517
|
+
alt?: string;
|
|
518
|
+
/** Text initials shown when no image is available. @example initials="JD" */
|
|
519
|
+
initials?: string;
|
|
520
|
+
/** Icon node shown when no image or initials are available. */
|
|
521
|
+
icon?: React__default.ReactNode;
|
|
522
|
+
/** When true, renders a green online status dot in the bottom-right corner. */
|
|
523
|
+
showStatus?: boolean;
|
|
524
|
+
/** Custom content inside status badge (icon or image). */
|
|
525
|
+
statusContent?: React__default.ReactNode;
|
|
526
|
+
/** Custom background color for status badge. @default 'var(--success)' */
|
|
527
|
+
statusColor?: string;
|
|
528
|
+
/** When true, enables hover animation. @default true */
|
|
529
|
+
animated?: boolean;
|
|
530
|
+
}
|
|
531
|
+
declare const Avatar: React__default.ForwardRefExoticComponent<AvatarProps & React__default.RefAttributes<HTMLSpanElement>>;
|
|
532
|
+
|
|
533
|
+
declare const chipVariants: (props?: ({
|
|
534
|
+
variant?: "filter" | "input" | "glass" | "assist" | "suggestion" | null | undefined;
|
|
535
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
536
|
+
/** Visual/behavioral style of the Chip. */
|
|
537
|
+
type ChipVariant = 'filter' | 'assist' | 'suggestion' | 'input' | 'glass';
|
|
538
|
+
/** Props for the Chip component, which represents a compact interactive element such as a filter tag or suggestion. */
|
|
539
|
+
interface ChipProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof chipVariants> {
|
|
540
|
+
/** Visual style of the chip. @example variant="filter" */
|
|
541
|
+
variant?: ChipVariant;
|
|
542
|
+
/** Icon rendered to the left of the chip label. */
|
|
543
|
+
leftIcon?: React__default.ReactNode;
|
|
544
|
+
/** Callback fired when the delete (×) button is clicked. Renders the delete button when provided. */
|
|
545
|
+
onDelete?: () => void;
|
|
546
|
+
}
|
|
547
|
+
declare const Chip: React__default.ForwardRefExoticComponent<ChipProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
548
|
+
|
|
549
|
+
/** Props for the Slider component, a styled range input with optional label and current value display. */
|
|
550
|
+
interface SliderProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
551
|
+
/** Label text displayed above the slider. */
|
|
552
|
+
label?: string;
|
|
553
|
+
/** When true, displays the current value next to the label. */
|
|
554
|
+
showValue?: boolean;
|
|
555
|
+
/** When true, the track is filled up to the current value. @default true */
|
|
556
|
+
filled?: boolean;
|
|
557
|
+
}
|
|
558
|
+
declare const Slider: React__default.ForwardRefExoticComponent<SliderProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
559
|
+
|
|
560
|
+
/** Display style of the Progress indicator. */
|
|
561
|
+
type ProgressVariant = 'linear' | 'circular';
|
|
562
|
+
/** Size of the linear progress bar. */
|
|
563
|
+
type ProgressBarSize = 'sm' | 'md' | 'lg';
|
|
564
|
+
/** Props for the Progress component, which visualizes a determinate completion value. */
|
|
565
|
+
interface ProgressProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
566
|
+
/** Current progress value. Defaults to 0. @example value={42} */
|
|
567
|
+
value?: number;
|
|
568
|
+
/** Maximum value used to calculate the percentage. Defaults to 100. */
|
|
569
|
+
max?: number;
|
|
570
|
+
/** Display style — horizontal bar or circular ring. @example variant="circular" */
|
|
571
|
+
variant?: ProgressVariant;
|
|
572
|
+
/** Diameter in pixels for the circular variant. Defaults to 64. */
|
|
573
|
+
size?: number;
|
|
574
|
+
/** Size of the linear progress bar. Defaults to 'md'. @example barSize="lg" */
|
|
575
|
+
barSize?: ProgressBarSize;
|
|
576
|
+
/** When true, renders a percentage label alongside the progress indicator. */
|
|
577
|
+
showLabel?: boolean;
|
|
578
|
+
}
|
|
579
|
+
declare const Progress: React__default.ForwardRefExoticComponent<ProgressProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
580
|
+
|
|
581
|
+
/** Position of the tooltip relative to its trigger element. */
|
|
582
|
+
type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
|
|
583
|
+
/**
|
|
584
|
+
* Floating tooltip that appears on hover or focus after an optional delay.
|
|
585
|
+
* @example <Tooltip content="Save file" placement="bottom"><Button>Save</Button></Tooltip>
|
|
586
|
+
*/
|
|
587
|
+
interface TooltipProps {
|
|
588
|
+
/** The trigger element that the tooltip is anchored to. */
|
|
589
|
+
children: React__default.ReactElement;
|
|
590
|
+
/** Primary tooltip text or node content. */
|
|
591
|
+
content: React__default.ReactNode;
|
|
592
|
+
/** Optional secondary description shown below the title in rich tooltip mode. */
|
|
593
|
+
description?: string;
|
|
594
|
+
/** Position of the tooltip relative to the trigger. @default 'top' */
|
|
595
|
+
placement?: TooltipPlacement;
|
|
596
|
+
/** Delay in milliseconds before the tooltip appears. @default 200 */
|
|
597
|
+
delay?: number;
|
|
598
|
+
}
|
|
599
|
+
declare const Tooltip: React__default.ForwardRefExoticComponent<TooltipProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
600
|
+
|
|
601
|
+
declare const dividerVariants: (props?: ({
|
|
602
|
+
variant?: "inset" | "thick" | "full" | "withLabel" | null | undefined;
|
|
603
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
604
|
+
/** Visual style of the divider. */
|
|
605
|
+
type DividerVariant = 'full' | 'inset' | 'thick' | 'withLabel';
|
|
606
|
+
/**
|
|
607
|
+
* Horizontal rule component that separates content sections.
|
|
608
|
+
* Supports full-width, inset, thick, labeled, and gradient variants.
|
|
609
|
+
*/
|
|
610
|
+
interface DividerProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dividerVariants> {
|
|
611
|
+
/** Visual style variant of the divider. @example variant="gradient" */
|
|
612
|
+
variant?: DividerVariant;
|
|
613
|
+
/** Text label rendered in the center of the divider (implies withLabel style). @example label="OR" */
|
|
614
|
+
label?: string;
|
|
615
|
+
}
|
|
616
|
+
declare const Divider: React__default.ForwardRefExoticComponent<DividerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
617
|
+
|
|
618
|
+
/**
|
|
619
|
+
* Displays a syntax-highlighted code block with a copy-to-clipboard button.
|
|
620
|
+
*/
|
|
621
|
+
interface CodeBlockProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
622
|
+
/** The source code string to display. @example code="const x = 1;" */
|
|
623
|
+
code: string;
|
|
624
|
+
/** Language label shown in the header bar. @example language="typescript" */
|
|
625
|
+
language?: string;
|
|
626
|
+
/** When true, applies glassmorphism styling with backdrop blur. @default false */
|
|
627
|
+
glass?: boolean;
|
|
628
|
+
}
|
|
629
|
+
declare const CodeBlock: React__default.ForwardRefExoticComponent<CodeBlockProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
630
|
+
|
|
631
|
+
/** Shape style of the Skeleton placeholder. */
|
|
632
|
+
type SkeletonVariant = 'rectangular' | 'circular' | 'text';
|
|
633
|
+
/** Animation style of the Skeleton placeholder. */
|
|
634
|
+
type SkeletonAnimation = 'shimmer' | 'pulse';
|
|
635
|
+
/** Props for the Skeleton component, which shows a loading placeholder in place of content. */
|
|
636
|
+
interface SkeletonProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
637
|
+
/** Width of the skeleton. Accepts CSS string or pixel number. @example width="80%" */
|
|
638
|
+
width?: string | number;
|
|
639
|
+
/** Height of the skeleton. Accepts CSS string or pixel number. @example height={20} */
|
|
640
|
+
height?: string | number;
|
|
641
|
+
/** Shape of the skeleton. `'text'` renders multiple stacked lines. @example variant="circular" */
|
|
642
|
+
variant?: SkeletonVariant;
|
|
643
|
+
/** Animation style. `'shimmer'` sweeps a highlight across, `'pulse'` fades opacity. @default 'shimmer' */
|
|
644
|
+
animation?: SkeletonAnimation;
|
|
645
|
+
/** Number of lines rendered when `variant` is `'text'`. Defaults to 3. */
|
|
646
|
+
lines?: number;
|
|
647
|
+
}
|
|
648
|
+
declare const Skeleton: React__default.ForwardRefExoticComponent<SkeletonProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
649
|
+
|
|
650
|
+
/** Display style of the Indicator. */
|
|
651
|
+
type IndicatorVariant = 'linear' | 'circular';
|
|
652
|
+
/** Props for the Indicator component, which shows an indeterminate loading animation. */
|
|
653
|
+
interface IndicatorProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
654
|
+
/** Display style — horizontal bar or spinning circle. @example variant="circular" */
|
|
655
|
+
variant?: IndicatorVariant;
|
|
656
|
+
/** Diameter in pixels used for the circular variant. Defaults to 32. */
|
|
657
|
+
size?: number;
|
|
658
|
+
/** CSS color value for the animated portion. Defaults to `var(--primary)`. */
|
|
659
|
+
color?: string;
|
|
660
|
+
}
|
|
661
|
+
declare const Indicator: React__default.ForwardRefExoticComponent<IndicatorProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
662
|
+
|
|
663
|
+
/** Gap size between stack children. */
|
|
664
|
+
type Spacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
665
|
+
/** Cross-axis alignment of stack children. */
|
|
666
|
+
type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
|
|
667
|
+
/** Main-axis justification of stack children. */
|
|
668
|
+
type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
|
|
669
|
+
/**
|
|
670
|
+
* Shared props for VStack and HStack flex container components.
|
|
671
|
+
*/
|
|
672
|
+
interface StackProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
673
|
+
/** Gap between children using the design-token spacing scale. @example gap="md" */
|
|
674
|
+
gap?: Spacing;
|
|
675
|
+
/** Cross-axis alignment of children. @example align="center" */
|
|
676
|
+
align?: StackAlign;
|
|
677
|
+
/** Main-axis justification of children. @example justify="between" */
|
|
678
|
+
justify?: StackJustify;
|
|
679
|
+
/** Whether children should wrap onto multiple lines. @example wrap */
|
|
680
|
+
wrap?: boolean;
|
|
681
|
+
}
|
|
682
|
+
declare const VStack: React__default.ForwardRefExoticComponent<StackProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
683
|
+
declare const HStack: React__default.ForwardRefExoticComponent<StackProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
684
|
+
|
|
685
|
+
/** Returns the current sidebar collapsed state. Use inside Sidebar children. */
|
|
686
|
+
declare const useSidebarContext: () => {
|
|
687
|
+
collapsed: boolean;
|
|
688
|
+
};
|
|
689
|
+
declare const containerVariants: (props?: ({
|
|
690
|
+
size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
|
|
691
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
692
|
+
declare const mainVariants: (props?: ({
|
|
693
|
+
maxWidth?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
|
|
694
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
695
|
+
declare const headerVariants: (props?: ({
|
|
696
|
+
sticky?: boolean | null | undefined;
|
|
697
|
+
bordered?: boolean | null | undefined;
|
|
698
|
+
blur?: boolean | null | undefined;
|
|
699
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
700
|
+
declare const sidebarVariants: (props?: ({
|
|
701
|
+
position?: "left" | "right" | null | undefined;
|
|
702
|
+
fillHeight?: boolean | null | undefined;
|
|
703
|
+
rounded?: boolean | null | undefined;
|
|
704
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
705
|
+
declare const footerVariants: (props?: ({
|
|
706
|
+
bordered?: boolean | null | undefined;
|
|
707
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
708
|
+
/**
|
|
709
|
+
* Centered content wrapper with responsive horizontal padding and configurable max-width.
|
|
710
|
+
* @prop size - Maximum width of the container. @example size="lg"
|
|
711
|
+
*/
|
|
712
|
+
interface ContainerProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {
|
|
713
|
+
}
|
|
714
|
+
declare const Container: React__default.ForwardRefExoticComponent<ContainerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
715
|
+
/**
|
|
716
|
+
* Top-level page header bar with optional sticky positioning, bottom border, backdrop blur, and auto-hide on scroll.
|
|
717
|
+
* @prop sticky - Whether the header sticks to the top of the viewport on scroll.
|
|
718
|
+
* @prop bordered - Whether to render a bottom border.
|
|
719
|
+
* @prop blur - Whether to apply a backdrop blur effect with semi-transparent background.
|
|
720
|
+
* @prop autoHide - Whether the header hides when scrolling down and reappears when scrolling up. Works best with sticky.
|
|
721
|
+
*/
|
|
722
|
+
interface HeaderProps extends React__default.HTMLAttributes<HTMLElement>, VariantProps<typeof headerVariants> {
|
|
723
|
+
/** Whether the header auto-hides on scroll down and reappears on scroll up. Works best with sticky. @default false */
|
|
724
|
+
autoHide?: boolean;
|
|
725
|
+
}
|
|
726
|
+
declare const Header: React__default.ForwardRefExoticComponent<HeaderProps & React__default.RefAttributes<HTMLElement>>;
|
|
727
|
+
/**
|
|
728
|
+
* Collapsible side panel that can be positioned on the left or right of the layout.
|
|
729
|
+
*/
|
|
730
|
+
interface SidebarProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
731
|
+
/** Width of the sidebar in pixels when expanded. @example width={280} */
|
|
732
|
+
width?: number;
|
|
733
|
+
/** Label displayed in the sidebar header. @example label="Navigation" */
|
|
734
|
+
label?: React__default.ReactNode;
|
|
735
|
+
/** Icon displayed before the label in the sidebar header. @example icon={<Menu size={18} />} */
|
|
736
|
+
icon?: React__default.ReactNode;
|
|
737
|
+
/** Whether a toggle button is rendered to collapse/expand the sidebar. @example collapsible */
|
|
738
|
+
collapsible?: boolean;
|
|
739
|
+
/** Controlled collapsed state of the sidebar. @example collapsed={true} */
|
|
740
|
+
collapsed?: boolean;
|
|
741
|
+
/** Callback fired when the collapse toggle is clicked. @example onCollapse={(v) => setCollapsed(v)} */
|
|
742
|
+
onCollapse?: (collapsed: boolean) => void;
|
|
743
|
+
/** Which side of the layout the sidebar appears on. @example position="right" */
|
|
744
|
+
position?: 'left' | 'right';
|
|
745
|
+
/** Whether the sidebar fills the remaining vertical space. @default true */
|
|
746
|
+
fillHeight?: boolean;
|
|
747
|
+
/** Whether the sidebar has rounded corners with a floating card style. @default false */
|
|
748
|
+
rounded?: boolean;
|
|
749
|
+
/** When true, the icon is hidden when expanded and the label is hidden when collapsed, swapping between them. @default false */
|
|
750
|
+
swapOnCollapse?: boolean;
|
|
751
|
+
/** Content rendered in a fixed footer area at the bottom of the sidebar. */
|
|
752
|
+
footer?: React__default.ReactNode;
|
|
753
|
+
}
|
|
754
|
+
declare const Sidebar: React__default.ForwardRefExoticComponent<SidebarProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
755
|
+
/**
|
|
756
|
+
* Sidebar group with an optional label. Label is hidden when the sidebar is collapsed.
|
|
757
|
+
*/
|
|
758
|
+
interface SidebarGroupProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
759
|
+
/** Group label displayed above items. Hidden when collapsed. */
|
|
760
|
+
label?: string;
|
|
761
|
+
/** Icon displayed before the label. Shown alone when collapsed. */
|
|
762
|
+
icon?: React__default.ReactNode;
|
|
763
|
+
/** Whether a child item in this group is currently active/selected. */
|
|
764
|
+
active?: boolean;
|
|
765
|
+
/** What to show when the sidebar is collapsed. "group" shows the group icon only, "children" shows child items only. @default "children" */
|
|
766
|
+
collapseDisplay?: 'group' | 'children';
|
|
767
|
+
/** Whether the group can be expanded/collapsed by clicking the header. @default false */
|
|
768
|
+
collapsible?: boolean;
|
|
769
|
+
/** Whether the group is open by default when collapsible. @default true */
|
|
770
|
+
defaultOpen?: boolean;
|
|
771
|
+
}
|
|
772
|
+
declare const SidebarGroup: React__default.ForwardRefExoticComponent<SidebarGroupProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
773
|
+
/**
|
|
774
|
+
* Sidebar navigation item with an optional icon.
|
|
775
|
+
* When collapsed, only the icon is shown. If no icon, the item is hidden.
|
|
776
|
+
*/
|
|
777
|
+
/** Active style variant for sidebar items. */
|
|
778
|
+
type SidebarItemVariant = 'filled' | 'foreground';
|
|
779
|
+
interface SidebarItemProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
780
|
+
/** Icon rendered before the label. Shown alone when sidebar is collapsed. */
|
|
781
|
+
icon?: React__default.ReactNode;
|
|
782
|
+
/** Whether this item is currently active/selected. */
|
|
783
|
+
active?: boolean;
|
|
784
|
+
/** Active style variant. @default "filled" */
|
|
785
|
+
variant?: SidebarItemVariant;
|
|
786
|
+
}
|
|
787
|
+
declare const SidebarItem: React__default.ForwardRefExoticComponent<SidebarItemProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
788
|
+
/**
|
|
789
|
+
* Arbitrary sidebar content. Fully hidden when the sidebar is collapsed.
|
|
790
|
+
*/
|
|
791
|
+
declare const SidebarContent: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
792
|
+
/**
|
|
793
|
+
* Footer area pinned to the bottom of the sidebar. Content is hidden when collapsed.
|
|
794
|
+
*/
|
|
795
|
+
declare const SidebarFooter: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
796
|
+
/**
|
|
797
|
+
* Primary content area that grows to fill available space with optional max-width constraint.
|
|
798
|
+
* @prop maxWidth - Maximum width of the main content area. @example maxWidth="xl"
|
|
799
|
+
*/
|
|
800
|
+
interface MainProps extends React__default.HTMLAttributes<HTMLElement>, VariantProps<typeof mainVariants> {
|
|
801
|
+
}
|
|
802
|
+
declare const Main: React__default.ForwardRefExoticComponent<MainProps & React__default.RefAttributes<HTMLElement>>;
|
|
803
|
+
/**
|
|
804
|
+
* Page footer bar with optional top border.
|
|
805
|
+
* @prop bordered - Whether to render a top border separating the footer from the content.
|
|
806
|
+
*/
|
|
807
|
+
interface FooterProps extends React__default.HTMLAttributes<HTMLElement>, VariantProps<typeof footerVariants> {
|
|
808
|
+
}
|
|
809
|
+
declare const Footer: React__default.ForwardRefExoticComponent<FooterProps & React__default.RefAttributes<HTMLElement>>;
|
|
810
|
+
/** Position of the floating menu bar on screen (3x3 grid). */
|
|
811
|
+
type FloatingMenuBarPosition = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
812
|
+
/**
|
|
813
|
+
* A floating navigation bar that hovers over page content with a pill-shaped appearance.
|
|
814
|
+
* Commonly used as a bottom tab bar in mobile/app-like layouts.
|
|
815
|
+
* @prop position - Where the bar is anchored (9 positions). @default 'bottom-center'
|
|
816
|
+
* @prop bordered - Whether to render a border. @default true
|
|
817
|
+
* @prop blur - Whether to apply a backdrop blur effect. @default true
|
|
818
|
+
*/
|
|
819
|
+
interface FloatingMenuBarProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
820
|
+
/** Where the bar is anchored on the screen (3x3 grid). @default 'bottom-center' */
|
|
821
|
+
position?: FloatingMenuBarPosition;
|
|
822
|
+
/** Whether to render a border. @default true */
|
|
823
|
+
bordered?: boolean;
|
|
824
|
+
/** Whether to apply a backdrop blur effect. @default true */
|
|
825
|
+
blur?: boolean;
|
|
826
|
+
}
|
|
827
|
+
declare const FloatingMenuBar: React__default.ForwardRefExoticComponent<FloatingMenuBarProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
828
|
+
/**
|
|
829
|
+
* An individual item inside a FloatingMenuBar.
|
|
830
|
+
* Renders an icon with an optional label underneath.
|
|
831
|
+
* @prop icon - The icon to display.
|
|
832
|
+
* @prop label - Optional text label below the icon.
|
|
833
|
+
* @prop active - Whether this item is the currently active route.
|
|
834
|
+
*/
|
|
835
|
+
interface FloatingMenuItemProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
836
|
+
/** The icon to display. */
|
|
837
|
+
icon: React__default.ReactNode;
|
|
838
|
+
/** Optional text label below the icon. */
|
|
839
|
+
label?: string;
|
|
840
|
+
/** Whether this item is the currently active route. @default false */
|
|
841
|
+
active?: boolean;
|
|
842
|
+
}
|
|
843
|
+
declare const FloatingMenuItem: React__default.ForwardRefExoticComponent<FloatingMenuItemProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
844
|
+
/**
|
|
845
|
+
* Full-page layout shell combining a header, optional sidebar, main content area, and footer.
|
|
846
|
+
*/
|
|
847
|
+
interface PageLayoutProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
848
|
+
/** Whether to render a sidebar alongside the main content. @example sidebar */
|
|
849
|
+
sidebar?: boolean;
|
|
850
|
+
/** Which side the sidebar appears on. @example sidebarPosition="right" */
|
|
851
|
+
sidebarPosition?: 'left' | 'right';
|
|
852
|
+
/** Content rendered in the sticky header slot. @example header={<Header />} */
|
|
853
|
+
header?: React__default.ReactNode;
|
|
854
|
+
/** Content rendered in the footer slot. @example footer={<Footer />} */
|
|
855
|
+
footer?: React__default.ReactNode;
|
|
856
|
+
}
|
|
857
|
+
declare const PageLayout: React__default.ForwardRefExoticComponent<PageLayoutProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
858
|
+
|
|
859
|
+
/** Maximum content width for single-column layouts. */
|
|
860
|
+
type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
861
|
+
/** Side the sidebar is placed on. */
|
|
862
|
+
type SidebarPosition = 'left' | 'right';
|
|
863
|
+
/** Number of grid columns for GridPage. */
|
|
864
|
+
type GridColumns = 2 | 3 | 4;
|
|
865
|
+
/** Width ratio between the primary and secondary panes in AsymmetricPage. */
|
|
866
|
+
type AsymmetricRatio = '2:1' | '3:1' | '1:2' | '1:3';
|
|
867
|
+
interface BaseLayoutProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
868
|
+
/** Content rendered in the top header slot. */
|
|
869
|
+
header?: React__default.ReactNode;
|
|
870
|
+
/** Content rendered in the bottom footer slot. */
|
|
871
|
+
footer?: React__default.ReactNode;
|
|
872
|
+
}
|
|
873
|
+
/**
|
|
874
|
+
* Single centered content column with configurable max-width and optional header/footer.
|
|
875
|
+
*/
|
|
876
|
+
interface SingleColumnPageProps extends BaseLayoutProps {
|
|
877
|
+
/** Maximum width of the content column. @example maxWidth="lg" */
|
|
878
|
+
maxWidth?: MaxWidth;
|
|
879
|
+
}
|
|
880
|
+
declare const SingleColumnPage: React__default.ForwardRefExoticComponent<SingleColumnPageProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
881
|
+
/**
|
|
882
|
+
* Page layout with a fixed-width sidebar and a scrollable main content area.
|
|
883
|
+
*/
|
|
884
|
+
interface SidebarPageProps extends BaseLayoutProps {
|
|
885
|
+
/** Content rendered inside the sidebar panel. */
|
|
886
|
+
sidebar: React__default.ReactNode;
|
|
887
|
+
/** Width of the sidebar in pixels. @example sidebarWidth={280} */
|
|
888
|
+
sidebarWidth?: number;
|
|
889
|
+
/** Side the sidebar is placed on. @example sidebarPosition="right" */
|
|
890
|
+
sidebarPosition?: SidebarPosition;
|
|
891
|
+
/** Whether the sidebar can be collapsed. */
|
|
892
|
+
collapsible?: boolean;
|
|
893
|
+
/** Initial collapsed state when uncontrolled. */
|
|
894
|
+
defaultCollapsed?: boolean;
|
|
895
|
+
/** Label displayed in the sidebar header. */
|
|
896
|
+
sidebarLabel?: React__default.ReactNode;
|
|
897
|
+
/** Icon displayed before the label in the sidebar header. */
|
|
898
|
+
sidebarIcon?: React__default.ReactNode;
|
|
899
|
+
/** Whether the sidebar fills the remaining vertical space. @default true */
|
|
900
|
+
sidebarFillHeight?: boolean;
|
|
901
|
+
/** Whether the sidebar has rounded corners with a floating card style. @default false */
|
|
902
|
+
sidebarRounded?: boolean;
|
|
903
|
+
}
|
|
904
|
+
declare const SidebarPage: React__default.ForwardRefExoticComponent<SidebarPageProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
905
|
+
/**
|
|
906
|
+
* Page layout that arranges children in a responsive CSS grid with a configurable column count.
|
|
907
|
+
*/
|
|
908
|
+
interface GridPageProps extends BaseLayoutProps {
|
|
909
|
+
/** Number of grid columns at the widest breakpoint. @example columns={4} */
|
|
910
|
+
columns?: GridColumns;
|
|
911
|
+
}
|
|
912
|
+
declare const GridPage: React__default.ForwardRefExoticComponent<GridPageProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
913
|
+
/**
|
|
914
|
+
* Dashboard layout with a left-anchored navigation sidebar and a main content area.
|
|
915
|
+
*/
|
|
916
|
+
interface DashboardPageProps extends BaseLayoutProps {
|
|
917
|
+
/** Content rendered inside the left sidebar panel. */
|
|
918
|
+
sidebar: React__default.ReactNode;
|
|
919
|
+
/** Width of the sidebar in pixels. @example sidebarWidth={260} */
|
|
920
|
+
sidebarWidth?: number;
|
|
921
|
+
/** Whether the sidebar can be collapsed. */
|
|
922
|
+
collapsible?: boolean;
|
|
923
|
+
/** Initial collapsed state when uncontrolled. */
|
|
924
|
+
defaultCollapsed?: boolean;
|
|
925
|
+
/** Label displayed in the sidebar header. */
|
|
926
|
+
sidebarLabel?: React__default.ReactNode;
|
|
927
|
+
/** Icon displayed before the label in the sidebar header. */
|
|
928
|
+
sidebarIcon?: React__default.ReactNode;
|
|
929
|
+
/** Whether the sidebar fills the remaining vertical space. @default true */
|
|
930
|
+
sidebarFillHeight?: boolean;
|
|
931
|
+
/** Whether the sidebar has rounded corners with a floating card style. @default false */
|
|
932
|
+
sidebarRounded?: boolean;
|
|
933
|
+
}
|
|
934
|
+
declare const DashboardPage: React__default.ForwardRefExoticComponent<DashboardPageProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
935
|
+
/**
|
|
936
|
+
* Two-pane layout with equal-width left and right panels separated by a border.
|
|
937
|
+
*/
|
|
938
|
+
interface SplitPageProps extends BaseLayoutProps {
|
|
939
|
+
/** Content rendered in the left panel. */
|
|
940
|
+
left: React__default.ReactNode;
|
|
941
|
+
/** Content rendered in the right panel. */
|
|
942
|
+
right: React__default.ReactNode;
|
|
943
|
+
}
|
|
944
|
+
declare const SplitPage: React__default.ForwardRefExoticComponent<SplitPageProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
945
|
+
/**
|
|
946
|
+
* Vertically stacked page layout where children fill the main column in document order.
|
|
947
|
+
*/
|
|
948
|
+
type StackedPageProps = BaseLayoutProps;
|
|
949
|
+
declare const StackedPage: React__default.ForwardRefExoticComponent<BaseLayoutProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
950
|
+
/**
|
|
951
|
+
* Three-column layout with independent left and right sidebars flanking the main content.
|
|
952
|
+
*/
|
|
953
|
+
interface DualSidebarPageProps extends BaseLayoutProps {
|
|
954
|
+
/** Content rendered in the left sidebar panel. */
|
|
955
|
+
leftSidebar: React__default.ReactNode;
|
|
956
|
+
/** Content rendered in the right sidebar panel. */
|
|
957
|
+
rightSidebar: React__default.ReactNode;
|
|
958
|
+
/** Width of the left sidebar in pixels. @example leftWidth={240} */
|
|
959
|
+
leftWidth?: number;
|
|
960
|
+
/** Width of the right sidebar in pixels. @example rightWidth={240} */
|
|
961
|
+
rightWidth?: number;
|
|
962
|
+
/** Whether the left sidebar can be collapsed. */
|
|
963
|
+
leftCollapsible?: boolean;
|
|
964
|
+
/** Whether the right sidebar can be collapsed. */
|
|
965
|
+
rightCollapsible?: boolean;
|
|
966
|
+
/** Initial collapsed state for the left sidebar. */
|
|
967
|
+
defaultLeftCollapsed?: boolean;
|
|
968
|
+
/** Initial collapsed state for the right sidebar. */
|
|
969
|
+
defaultRightCollapsed?: boolean;
|
|
970
|
+
/** Label displayed in the left sidebar header. */
|
|
971
|
+
leftLabel?: React__default.ReactNode;
|
|
972
|
+
/** Icon displayed before the label in the left sidebar header. */
|
|
973
|
+
leftIcon?: React__default.ReactNode;
|
|
974
|
+
/** Label displayed in the right sidebar header. */
|
|
975
|
+
rightLabel?: React__default.ReactNode;
|
|
976
|
+
/** Icon displayed before the label in the right sidebar header. */
|
|
977
|
+
rightIcon?: React__default.ReactNode;
|
|
978
|
+
/** Whether the left sidebar fills the remaining vertical space. @default true */
|
|
979
|
+
leftFillHeight?: boolean;
|
|
980
|
+
/** Whether the right sidebar fills the remaining vertical space. @default true */
|
|
981
|
+
rightFillHeight?: boolean;
|
|
982
|
+
/** Whether the left sidebar has rounded corners with a floating card style. @default false */
|
|
983
|
+
leftRounded?: boolean;
|
|
984
|
+
/** Whether the right sidebar has rounded corners with a floating card style. @default false */
|
|
985
|
+
rightRounded?: boolean;
|
|
986
|
+
}
|
|
987
|
+
declare const DualSidebarPage: React__default.ForwardRefExoticComponent<DualSidebarPageProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
988
|
+
/**
|
|
989
|
+
* Classic holy-grail layout: full-width header/footer with a three-column body (nav, main, aside).
|
|
990
|
+
*/
|
|
991
|
+
interface HolyGrailPageProps extends BaseLayoutProps {
|
|
992
|
+
/** Content rendered in the left navigation sidebar. */
|
|
993
|
+
leftSidebar: React__default.ReactNode;
|
|
994
|
+
/** Content rendered in the right aside sidebar. */
|
|
995
|
+
rightSidebar: React__default.ReactNode;
|
|
996
|
+
/** Width of the left sidebar in pixels. @example leftWidth={220} */
|
|
997
|
+
leftWidth?: number;
|
|
998
|
+
/** Width of the right sidebar in pixels. @example rightWidth={220} */
|
|
999
|
+
rightWidth?: number;
|
|
1000
|
+
/** Whether the left sidebar can be collapsed. */
|
|
1001
|
+
leftCollapsible?: boolean;
|
|
1002
|
+
/** Whether the right sidebar can be collapsed. */
|
|
1003
|
+
rightCollapsible?: boolean;
|
|
1004
|
+
/** Initial collapsed state for the left sidebar. */
|
|
1005
|
+
defaultLeftCollapsed?: boolean;
|
|
1006
|
+
/** Initial collapsed state for the right sidebar. */
|
|
1007
|
+
defaultRightCollapsed?: boolean;
|
|
1008
|
+
/** Label displayed in the left sidebar header. */
|
|
1009
|
+
leftLabel?: React__default.ReactNode;
|
|
1010
|
+
/** Icon displayed before the label in the left sidebar header. */
|
|
1011
|
+
leftIcon?: React__default.ReactNode;
|
|
1012
|
+
/** Label displayed in the right sidebar header. */
|
|
1013
|
+
rightLabel?: React__default.ReactNode;
|
|
1014
|
+
/** Icon displayed before the label in the right sidebar header. */
|
|
1015
|
+
rightIcon?: React__default.ReactNode;
|
|
1016
|
+
/** Whether the left sidebar fills the remaining vertical space. @default true */
|
|
1017
|
+
leftFillHeight?: boolean;
|
|
1018
|
+
/** Whether the right sidebar fills the remaining vertical space. @default true */
|
|
1019
|
+
rightFillHeight?: boolean;
|
|
1020
|
+
/** Whether the left sidebar has rounded corners with a floating card style. @default false */
|
|
1021
|
+
leftRounded?: boolean;
|
|
1022
|
+
/** Whether the right sidebar has rounded corners with a floating card style. @default false */
|
|
1023
|
+
rightRounded?: boolean;
|
|
1024
|
+
}
|
|
1025
|
+
declare const HolyGrailPage: React__default.ForwardRefExoticComponent<HolyGrailPageProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1026
|
+
/**
|
|
1027
|
+
* Two-pane layout with a configurable flex ratio between the primary and secondary panels.
|
|
1028
|
+
*/
|
|
1029
|
+
interface AsymmetricPageProps extends BaseLayoutProps {
|
|
1030
|
+
/** Content rendered in the primary (wider by default) panel. */
|
|
1031
|
+
primary: React__default.ReactNode;
|
|
1032
|
+
/** Content rendered in the secondary panel. */
|
|
1033
|
+
secondary: React__default.ReactNode;
|
|
1034
|
+
/** Flex width ratio between primary and secondary panels. @example ratio="3:1" */
|
|
1035
|
+
ratio?: AsymmetricRatio;
|
|
1036
|
+
}
|
|
1037
|
+
declare const AsymmetricPage: React__default.ForwardRefExoticComponent<AsymmetricPageProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1038
|
+
/** Maximum content width for mobile/app-like layouts. */
|
|
1039
|
+
type AppPageWidth = 'xs' | 'sm' | 'md' | 'lg';
|
|
1040
|
+
/**
|
|
1041
|
+
* Mobile and webview-optimized page layout with a narrow, fixed-width content area.
|
|
1042
|
+
* Full-width on small screens, centered with an optional card-like appearance on larger screens.
|
|
1043
|
+
* Supports safe-area insets for native webview embedding.
|
|
1044
|
+
*/
|
|
1045
|
+
interface AppPageProps extends BaseLayoutProps {
|
|
1046
|
+
/** Maximum width of the content area.
|
|
1047
|
+
* - `'xs'`: 360px (small phones)
|
|
1048
|
+
* - `'sm'`: 390px (standard phones)
|
|
1049
|
+
* - `'md'`: 430px (large phones)
|
|
1050
|
+
* - `'lg'`: 520px (phablets / small tablets)
|
|
1051
|
+
* @default 'sm'
|
|
1052
|
+
*/
|
|
1053
|
+
maxWidth?: AppPageWidth;
|
|
1054
|
+
/** Whether to apply safe-area inset padding for mobile webview environments. @default true */
|
|
1055
|
+
safeArea?: boolean;
|
|
1056
|
+
/** Whether the content area appears as an elevated card on wider screens. @default false */
|
|
1057
|
+
elevated?: boolean;
|
|
1058
|
+
/** Whether the header is sticky. @default true */
|
|
1059
|
+
stickyHeader?: boolean;
|
|
1060
|
+
/** Whether the footer is sticky. @default false */
|
|
1061
|
+
stickyFooter?: boolean;
|
|
1062
|
+
}
|
|
1063
|
+
declare const AppPage: React__default.ForwardRefExoticComponent<AppPageProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1064
|
+
|
|
1065
|
+
/** Color and semantic variant for the Toast component. */
|
|
1066
|
+
type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info';
|
|
1067
|
+
/** Screen position where the toast stack is anchored. */
|
|
1068
|
+
type ToastPosition = 'top-right' | 'top-center' | 'bottom-right' | 'bottom-center';
|
|
1069
|
+
/** Options passed to the toast() trigger function. */
|
|
1070
|
+
interface ToastOptions {
|
|
1071
|
+
/** Visual variant. @default 'default' */
|
|
1072
|
+
variant?: ToastVariant;
|
|
1073
|
+
/** Auto-dismiss delay in milliseconds; 0 disables auto-dismiss. @default 5000 */
|
|
1074
|
+
duration?: number;
|
|
1075
|
+
/** Optional action element rendered to the right of the message. */
|
|
1076
|
+
action?: React__default.ReactNode;
|
|
1077
|
+
/** Optional icon rendered on the left (visible in default variant). */
|
|
1078
|
+
icon?: React__default.ReactNode;
|
|
1079
|
+
/** Callback fired when the action button is clicked. */
|
|
1080
|
+
onAction?: () => void;
|
|
1081
|
+
}
|
|
1082
|
+
/** Internal toast entry stored in context state. */
|
|
1083
|
+
interface ToastEntry extends Required<Omit<ToastOptions, 'action' | 'icon' | 'onAction'>> {
|
|
1084
|
+
id: string;
|
|
1085
|
+
message: string;
|
|
1086
|
+
action?: React__default.ReactNode;
|
|
1087
|
+
icon?: React__default.ReactNode;
|
|
1088
|
+
onAction?: () => void;
|
|
1089
|
+
}
|
|
1090
|
+
/** Props for the ToastProvider. */
|
|
1091
|
+
interface ToastProviderProps {
|
|
1092
|
+
children: React__default.ReactNode;
|
|
1093
|
+
/** Where toasts are anchored on screen. @default 'bottom-right' */
|
|
1094
|
+
position?: ToastPosition;
|
|
1095
|
+
/** Maximum number of toasts visible at once. @default 5 */
|
|
1096
|
+
maxToasts?: number;
|
|
1097
|
+
}
|
|
1098
|
+
|
|
1099
|
+
declare const toastVariants: (props?: ({
|
|
1100
|
+
variant?: "default" | "error" | "success" | "warning" | "info" | null | undefined;
|
|
1101
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1102
|
+
/**
|
|
1103
|
+
* Wraps the application and provides the toast notification system.
|
|
1104
|
+
* Must be rendered once near the root of the component tree.
|
|
1105
|
+
* @example
|
|
1106
|
+
* <ToastProvider position="bottom-right">
|
|
1107
|
+
* <App />
|
|
1108
|
+
* </ToastProvider>
|
|
1109
|
+
*/
|
|
1110
|
+
declare function ToastProvider({ children, position, maxToasts }: ToastProviderProps): react_jsx_runtime.JSX.Element;
|
|
1111
|
+
/**
|
|
1112
|
+
* Returns toast control functions. Must be used within a ToastProvider.
|
|
1113
|
+
* @example
|
|
1114
|
+
* const { toast, dismiss, dismissAll } = useToast();
|
|
1115
|
+
* toast('Saved!', { variant: 'success' });
|
|
1116
|
+
*/
|
|
1117
|
+
declare function useToast(): {
|
|
1118
|
+
toast: (message: string, options?: ToastOptions) => string;
|
|
1119
|
+
dismiss: (id: string) => void;
|
|
1120
|
+
dismissAll: () => void;
|
|
1121
|
+
};
|
|
1122
|
+
/** Props for a single rendered toast item. */
|
|
1123
|
+
interface ToastItemProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, MotionConflictingHandlers>, VariantProps<typeof toastVariants> {
|
|
1124
|
+
/** Toast entry data. */
|
|
1125
|
+
entry: ToastEntry;
|
|
1126
|
+
/** Callback to dismiss this toast. */
|
|
1127
|
+
onDismiss: (id: string) => void;
|
|
1128
|
+
}
|
|
1129
|
+
/**
|
|
1130
|
+
* Renders a single toast notification card.
|
|
1131
|
+
* Auto-dismisses after entry.duration ms when duration > 0.
|
|
1132
|
+
*/
|
|
1133
|
+
declare const ToastItem: React__default.ForwardRefExoticComponent<ToastItemProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1134
|
+
/**
|
|
1135
|
+
* Renders the stacked list of active toasts. Automatically included inside
|
|
1136
|
+
* ToastProvider; you do not need to render this yourself.
|
|
1137
|
+
*/
|
|
1138
|
+
declare const ToastContainer: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
1139
|
+
|
|
1140
|
+
/** Controls which edge the Drawer slides in from. */
|
|
1141
|
+
type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
|
|
1142
|
+
/**
|
|
1143
|
+
* Side-panel overlay (Sheet/Drawer) that slides in from a specified edge.
|
|
1144
|
+
* Traps focus within the panel while open and restores focus on close.
|
|
1145
|
+
* Closes on Escape key press or backdrop click.
|
|
1146
|
+
* @example <Drawer open={open} onClose={() => setOpen(false)} side="right">...</Drawer>
|
|
1147
|
+
*/
|
|
1148
|
+
interface DrawerProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, MotionConflictingHandlers> {
|
|
1149
|
+
/** Whether the drawer is visible. */
|
|
1150
|
+
open: boolean;
|
|
1151
|
+
/** Callback fired when the drawer should close (backdrop click or Escape key). */
|
|
1152
|
+
onClose: () => void;
|
|
1153
|
+
/** Which edge the drawer slides in from. @default 'right' */
|
|
1154
|
+
side?: DrawerSide;
|
|
1155
|
+
/** When false, the dark backdrop overlay is hidden. @default true */
|
|
1156
|
+
backdrop?: boolean;
|
|
1157
|
+
}
|
|
1158
|
+
/**
|
|
1159
|
+
* Side-panel overlay (Sheet/Drawer) component.
|
|
1160
|
+
* Renders a sliding panel from the specified edge with a translucent backdrop.
|
|
1161
|
+
*/
|
|
1162
|
+
declare const Drawer: React__default.ForwardRefExoticComponent<DrawerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1163
|
+
/**
|
|
1164
|
+
* Header area of a Drawer, providing vertical spacing for title and description.
|
|
1165
|
+
*/
|
|
1166
|
+
declare const DrawerHeader: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
1167
|
+
/**
|
|
1168
|
+
* Title text within a DrawerHeader.
|
|
1169
|
+
*/
|
|
1170
|
+
declare const DrawerTitle: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLHeadingElement> & React__default.RefAttributes<HTMLHeadingElement>>;
|
|
1171
|
+
/**
|
|
1172
|
+
* Descriptive text within a DrawerHeader, rendered in muted color.
|
|
1173
|
+
*/
|
|
1174
|
+
declare const DrawerDescription: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLParagraphElement> & React__default.RefAttributes<HTMLParagraphElement>>;
|
|
1175
|
+
/**
|
|
1176
|
+
* Footer area of a Drawer with a top border, used for action buttons.
|
|
1177
|
+
*/
|
|
1178
|
+
declare const DrawerFooter: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
1179
|
+
/**
|
|
1180
|
+
* Scrollable body area of a Drawer, grows to fill available space.
|
|
1181
|
+
*/
|
|
1182
|
+
declare const DrawerBody: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
1183
|
+
|
|
1184
|
+
/** Horizontal or vertical alignment of the popover panel relative to its trigger. */
|
|
1185
|
+
type PopoverAlign = 'start' | 'center' | 'end';
|
|
1186
|
+
/** Side on which the popover panel appears relative to its trigger. */
|
|
1187
|
+
type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
|
|
1188
|
+
/**
|
|
1189
|
+
* Generic popover primitive for richer floating content than Tooltip but lighter than Modal.
|
|
1190
|
+
* Supports controlled and uncontrolled open state, positioning via `side` and `align` props,
|
|
1191
|
+
* outside-click dismissal, and Escape key dismissal.
|
|
1192
|
+
* @example
|
|
1193
|
+
* <Popover trigger={<Button>Open</Button>} side="bottom" align="start">
|
|
1194
|
+
* <PopoverHeader>Title</PopoverHeader>
|
|
1195
|
+
* <PopoverBody>Content here</PopoverBody>
|
|
1196
|
+
* <PopoverFooter><Button>Close</Button></PopoverFooter>
|
|
1197
|
+
* </Popover>
|
|
1198
|
+
*/
|
|
1199
|
+
interface PopoverProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
1200
|
+
/** The element that toggles the popover open/closed when clicked. */
|
|
1201
|
+
trigger: React__default.ReactNode;
|
|
1202
|
+
/** Controlled open state; omit to use uncontrolled mode. */
|
|
1203
|
+
open?: boolean;
|
|
1204
|
+
/** Called when the open state changes. */
|
|
1205
|
+
onOpenChange?: (open: boolean) => void;
|
|
1206
|
+
/** Side on which the panel appears relative to the trigger. @default 'bottom' */
|
|
1207
|
+
side?: PopoverSide;
|
|
1208
|
+
/** Alignment of the panel along the perpendicular axis. @default 'center' */
|
|
1209
|
+
align?: PopoverAlign;
|
|
1210
|
+
}
|
|
1211
|
+
/**
|
|
1212
|
+
* Popover component. Click the trigger to open/close a floating panel.
|
|
1213
|
+
* Closes on outside click or Escape key.
|
|
1214
|
+
*/
|
|
1215
|
+
declare const Popover: React__default.ForwardRefExoticComponent<PopoverProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1216
|
+
/**
|
|
1217
|
+
* Header section of a Popover panel with bottom border.
|
|
1218
|
+
* Intended for titles or primary action labels.
|
|
1219
|
+
*/
|
|
1220
|
+
declare const PopoverHeader: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
1221
|
+
/**
|
|
1222
|
+
* Body section of a Popover panel.
|
|
1223
|
+
* Intended for the main content of the popover.
|
|
1224
|
+
*/
|
|
1225
|
+
declare const PopoverBody: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
1226
|
+
/**
|
|
1227
|
+
* Footer section of a Popover panel with top border.
|
|
1228
|
+
* Intended for actions such as confirm or cancel buttons.
|
|
1229
|
+
*/
|
|
1230
|
+
declare const PopoverFooter: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
1231
|
+
|
|
1232
|
+
/** Props for the EmptyState component, a standardized "no data" screen. */
|
|
1233
|
+
interface EmptyStateProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
1234
|
+
/** Optional icon or illustration displayed above the title. */
|
|
1235
|
+
icon?: React__default.ReactNode;
|
|
1236
|
+
/** Primary heading text. */
|
|
1237
|
+
title: string;
|
|
1238
|
+
/** Optional descriptive text below the title. */
|
|
1239
|
+
description?: string;
|
|
1240
|
+
/** Optional action button(s) rendered below the description. */
|
|
1241
|
+
action?: React__default.ReactNode;
|
|
1242
|
+
/** When false, the component animates out using fadeVariants. @default true */
|
|
1243
|
+
visible?: boolean;
|
|
1244
|
+
}
|
|
1245
|
+
/** A centered "no data" placeholder with an optional icon, title, description, and action. */
|
|
1246
|
+
declare const EmptyState: React__default.ForwardRefExoticComponent<EmptyStateProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1247
|
+
|
|
1248
|
+
/** Orientation of the Stepper layout. */
|
|
1249
|
+
type StepperOrientation = 'horizontal' | 'vertical';
|
|
1250
|
+
/** Label alignment strategy for horizontal stepper. */
|
|
1251
|
+
type StepperAlignLabels = 'edge' | 'center';
|
|
1252
|
+
/**
|
|
1253
|
+
* Multi-step wizard/workflow indicator container.
|
|
1254
|
+
* Manages active step state and passes it to child Step components.
|
|
1255
|
+
* @example
|
|
1256
|
+
* <Stepper activeStep={1}>
|
|
1257
|
+
* <Step title="Account" />
|
|
1258
|
+
* <Step title="Profile" />
|
|
1259
|
+
* <Step title="Review" />
|
|
1260
|
+
* </Stepper>
|
|
1261
|
+
*/
|
|
1262
|
+
interface StepperProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
1263
|
+
/** Zero-based index of the currently active step. */
|
|
1264
|
+
activeStep: number;
|
|
1265
|
+
/** Layout orientation. @default 'horizontal' */
|
|
1266
|
+
orientation?: StepperOrientation;
|
|
1267
|
+
/** Label alignment for horizontal layout. 'edge' aligns first left, last right; 'center' centers all. @default 'edge' */
|
|
1268
|
+
alignLabels?: StepperAlignLabels;
|
|
1269
|
+
}
|
|
1270
|
+
declare const Stepper: React__default.ForwardRefExoticComponent<StepperProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1271
|
+
/**
|
|
1272
|
+
* Individual step within a Stepper. Auto-detects its index and state from context.
|
|
1273
|
+
* @example
|
|
1274
|
+
* <Step title="Account" description="Set up your account" />
|
|
1275
|
+
*/
|
|
1276
|
+
interface StepProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
1277
|
+
/** Step title text. */
|
|
1278
|
+
title: string;
|
|
1279
|
+
/** Optional description below the title. */
|
|
1280
|
+
description?: string;
|
|
1281
|
+
/** Override the step's visual state. */
|
|
1282
|
+
status?: 'completed' | 'active' | 'pending';
|
|
1283
|
+
/** Icon to display instead of step number. */
|
|
1284
|
+
icon?: React__default.ReactNode;
|
|
1285
|
+
}
|
|
1286
|
+
declare const Step: React__default.ForwardRefExoticComponent<StepProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1287
|
+
|
|
1288
|
+
type PieChartVariant = 'pie' | 'donut';
|
|
1289
|
+
interface ChartDataPoint {
|
|
1290
|
+
label: string;
|
|
1291
|
+
value: number;
|
|
1292
|
+
}
|
|
1293
|
+
interface PieChartDataPoint {
|
|
1294
|
+
label: string;
|
|
1295
|
+
value: number;
|
|
1296
|
+
color?: string;
|
|
1297
|
+
}
|
|
1298
|
+
interface BarChartProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
1299
|
+
data: ChartDataPoint[];
|
|
1300
|
+
height?: number;
|
|
1301
|
+
showGrid?: boolean;
|
|
1302
|
+
showLabels?: boolean;
|
|
1303
|
+
showValues?: boolean;
|
|
1304
|
+
color?: string;
|
|
1305
|
+
colors?: string[];
|
|
1306
|
+
}
|
|
1307
|
+
declare const BarChart: React__default.ForwardRefExoticComponent<BarChartProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1308
|
+
interface LineChartProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
1309
|
+
data: ChartDataPoint[];
|
|
1310
|
+
height?: number;
|
|
1311
|
+
showGrid?: boolean;
|
|
1312
|
+
showLabels?: boolean;
|
|
1313
|
+
showDots?: boolean;
|
|
1314
|
+
showArea?: boolean;
|
|
1315
|
+
color?: string;
|
|
1316
|
+
strokeWidth?: number;
|
|
1317
|
+
}
|
|
1318
|
+
declare const LineChart: React__default.ForwardRefExoticComponent<LineChartProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1319
|
+
interface PieChartProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
1320
|
+
data: PieChartDataPoint[];
|
|
1321
|
+
size?: number;
|
|
1322
|
+
variant?: PieChartVariant;
|
|
1323
|
+
strokeWidth?: number;
|
|
1324
|
+
showLabels?: boolean;
|
|
1325
|
+
showValues?: boolean;
|
|
1326
|
+
}
|
|
1327
|
+
declare const PieChart: React__default.ForwardRefExoticComponent<PieChartProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1328
|
+
declare const DonutChart: React__default.ForwardRefExoticComponent<PieChartProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1329
|
+
|
|
1330
|
+
/** Size variant of the SegmentController. */
|
|
1331
|
+
type SegmentControllerSize = 'sm' | 'md' | 'lg';
|
|
1332
|
+
/** Selection mode of the SegmentController. */
|
|
1333
|
+
type SegmentControllerMode = 'single' | 'multi';
|
|
1334
|
+
/** A single segment option. */
|
|
1335
|
+
interface SegmentOption {
|
|
1336
|
+
/** Unique value for this segment. */
|
|
1337
|
+
value: string;
|
|
1338
|
+
/** Display label for this segment. */
|
|
1339
|
+
label: string;
|
|
1340
|
+
/** Icon rendered before the label. */
|
|
1341
|
+
icon?: React__default.ReactNode;
|
|
1342
|
+
/** When true, this segment cannot be selected. */
|
|
1343
|
+
disabled?: boolean;
|
|
1344
|
+
}
|
|
1345
|
+
/** Shared props for both modes. */
|
|
1346
|
+
interface SegmentControllerBaseProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
1347
|
+
/** Array of segment options to render. */
|
|
1348
|
+
options: SegmentOption[];
|
|
1349
|
+
/** Size variant affecting height and font size. @default 'md' */
|
|
1350
|
+
size?: SegmentControllerSize;
|
|
1351
|
+
/** When true, segments expand to fill available width. @default false */
|
|
1352
|
+
fullWidth?: boolean;
|
|
1353
|
+
/** When true, the entire control is disabled. */
|
|
1354
|
+
disabled?: boolean;
|
|
1355
|
+
/** When true, only the selected option is visible; expands on hover to reveal all options. @default false */
|
|
1356
|
+
collapsible?: boolean;
|
|
1357
|
+
}
|
|
1358
|
+
/** Props for single-select mode (default). */
|
|
1359
|
+
interface SegmentControllerSingleProps extends SegmentControllerBaseProps {
|
|
1360
|
+
/** Selection mode. @default 'single' */
|
|
1361
|
+
mode?: 'single';
|
|
1362
|
+
/** The controlled selected value. */
|
|
1363
|
+
value?: string;
|
|
1364
|
+
/** The initial value for uncontrolled usage. */
|
|
1365
|
+
defaultValue?: string;
|
|
1366
|
+
/** Called when the selected segment changes. */
|
|
1367
|
+
onChange?: (value: string) => void;
|
|
1368
|
+
}
|
|
1369
|
+
/** Props for multi-select mode. */
|
|
1370
|
+
interface SegmentControllerMultiProps extends SegmentControllerBaseProps {
|
|
1371
|
+
/** Selection mode. */
|
|
1372
|
+
mode: 'multi';
|
|
1373
|
+
/** The controlled selected values. */
|
|
1374
|
+
value?: string[];
|
|
1375
|
+
/** The initial values for uncontrolled usage. */
|
|
1376
|
+
defaultValue?: string[];
|
|
1377
|
+
/** Called when the selected segments change. */
|
|
1378
|
+
onChange?: (value: string[]) => void;
|
|
1379
|
+
}
|
|
1380
|
+
/** Props for the SegmentController component, a pill-shaped segmented control with animated indicator. */
|
|
1381
|
+
type SegmentControllerProps = SegmentControllerSingleProps | SegmentControllerMultiProps;
|
|
1382
|
+
declare const SegmentController: React__default.ForwardRefExoticComponent<SegmentControllerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1383
|
+
/** @deprecated Use `SegmentOption` instead. */
|
|
1384
|
+
type SlidingSelectOption = SegmentOption;
|
|
1385
|
+
/** @deprecated Use `SegmentControllerSize` instead. */
|
|
1386
|
+
type SlidingSelectSize = SegmentControllerSize;
|
|
1387
|
+
/** @deprecated Use `SegmentControllerProps` instead. */
|
|
1388
|
+
type SlidingSelectProps = SegmentControllerSingleProps;
|
|
1389
|
+
/** @deprecated Use `SegmentController` instead. */
|
|
1390
|
+
declare const SlidingSelect: React__default.ForwardRefExoticComponent<SegmentControllerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1391
|
+
|
|
1392
|
+
/** Picker mode: date-only, date+time, or month-only. */
|
|
1393
|
+
type DatePickerMode = 'date' | 'datetime' | 'month';
|
|
1394
|
+
/** Props for the DatePicker component, a calendar-based date selector with dropdown panel. */
|
|
1395
|
+
interface DatePickerProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
1396
|
+
/** The controlled selected date. */
|
|
1397
|
+
value?: Date | null;
|
|
1398
|
+
/** Called when a date is selected. */
|
|
1399
|
+
onChange?: (date: Date | null) => void;
|
|
1400
|
+
/** Label text displayed above the input. */
|
|
1401
|
+
label?: string;
|
|
1402
|
+
/** Helper text displayed below the input. */
|
|
1403
|
+
helperText?: string;
|
|
1404
|
+
/** Placeholder text when no date is selected. @default 'Select date' */
|
|
1405
|
+
placeholder?: string;
|
|
1406
|
+
/** When true, applies error styling. */
|
|
1407
|
+
error?: boolean;
|
|
1408
|
+
/** Error message displayed below the input when `error` is true. */
|
|
1409
|
+
errorMessage?: string;
|
|
1410
|
+
/** Earliest selectable date. */
|
|
1411
|
+
minDate?: Date;
|
|
1412
|
+
/** Latest selectable date. */
|
|
1413
|
+
maxDate?: Date;
|
|
1414
|
+
/** When true, the date picker is disabled. */
|
|
1415
|
+
disabled?: boolean;
|
|
1416
|
+
/** Date format display function. Defaults to mode-aware format string. */
|
|
1417
|
+
formatDate?: (date: Date) => string;
|
|
1418
|
+
/** ID attribute for the trigger button. */
|
|
1419
|
+
id?: string;
|
|
1420
|
+
/** Picker mode. @default 'date' */
|
|
1421
|
+
mode?: DatePickerMode;
|
|
1422
|
+
/** When true, uses 24-hour format for time. @default true */
|
|
1423
|
+
use24Hour?: boolean;
|
|
1424
|
+
/** Minute step interval for time picker. @default 1 */
|
|
1425
|
+
minuteStep?: number;
|
|
1426
|
+
}
|
|
1427
|
+
declare const DatePicker: React__default.ForwardRefExoticComponent<DatePickerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1428
|
+
|
|
1429
|
+
declare global {
|
|
1430
|
+
interface EyeDropper {
|
|
1431
|
+
open(options?: {
|
|
1432
|
+
signal?: AbortSignal;
|
|
1433
|
+
}): Promise<{
|
|
1434
|
+
sRGBHex: string;
|
|
1435
|
+
}>;
|
|
1436
|
+
}
|
|
1437
|
+
var EyeDropper: {
|
|
1438
|
+
new (): EyeDropper;
|
|
1439
|
+
} | undefined;
|
|
1440
|
+
}
|
|
1441
|
+
/** Props for the ColorPicker component, a color selector with spectrum picker, swatch grid, and channel inputs. */
|
|
1442
|
+
interface ColorPickerProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
1443
|
+
/** The controlled selected color as a hex string (e.g. '#FF0000'). */
|
|
1444
|
+
value?: string;
|
|
1445
|
+
/** Called when a color is selected (after confirming). */
|
|
1446
|
+
onChange?: (color: string) => void;
|
|
1447
|
+
/** Label text displayed above the picker trigger. */
|
|
1448
|
+
label?: string;
|
|
1449
|
+
/** Helper text displayed below the trigger. */
|
|
1450
|
+
helperText?: string;
|
|
1451
|
+
/** When true, applies error styling. */
|
|
1452
|
+
error?: boolean;
|
|
1453
|
+
/** Error message displayed below the trigger when `error` is true. */
|
|
1454
|
+
errorMessage?: string;
|
|
1455
|
+
/** Custom array of hex color strings for the swatch grid. */
|
|
1456
|
+
colors?: string[];
|
|
1457
|
+
/** When true, the picker is disabled. */
|
|
1458
|
+
disabled?: boolean;
|
|
1459
|
+
/** Placeholder text when no color is selected. @default 'Select color' */
|
|
1460
|
+
placeholder?: string;
|
|
1461
|
+
/** ID attribute for the trigger button. */
|
|
1462
|
+
id?: string;
|
|
1463
|
+
/** When true, shows a text input for manual hex entry. @default true */
|
|
1464
|
+
showInput?: boolean;
|
|
1465
|
+
/** When true, shows the spectrum gradient picker for detailed color selection. @default true */
|
|
1466
|
+
showSpectrum?: boolean;
|
|
1467
|
+
/** When true, shows the eyedropper button (only works in supported browsers). @default true */
|
|
1468
|
+
showEyeDropper?: boolean;
|
|
1469
|
+
/** When true, shows RGB/HSB channel inputs for precise values. @default true */
|
|
1470
|
+
showChannels?: boolean;
|
|
1471
|
+
}
|
|
1472
|
+
declare const ColorPicker: React__default.ForwardRefExoticComponent<ColorPickerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1473
|
+
|
|
1474
|
+
/**
|
|
1475
|
+
* Traps keyboard focus within a container element while active.
|
|
1476
|
+
* Tab and Shift+Tab cycle through focusable elements without escaping.
|
|
1477
|
+
*/
|
|
1478
|
+
declare function useFocusTrap(containerRef: React.RefObject<HTMLElement | null>, active: boolean): void;
|
|
1479
|
+
/**
|
|
1480
|
+
* Saves the previously focused element on open and restores focus on close.
|
|
1481
|
+
*/
|
|
1482
|
+
declare function useFocusRestore(active: boolean): void;
|
|
1483
|
+
/**
|
|
1484
|
+
* Provides arrow-key navigation for a list of items within a container.
|
|
1485
|
+
* Returns a callback ref to attach to the container element.
|
|
1486
|
+
*/
|
|
1487
|
+
declare function useRovingIndex(containerRef: React.RefObject<HTMLElement | null>, active: boolean, opts?: {
|
|
1488
|
+
onSelect?: (index: number) => void;
|
|
1489
|
+
itemSelector?: string;
|
|
1490
|
+
}): void;
|
|
1491
|
+
|
|
1492
|
+
declare function useSpotlight(): {
|
|
1493
|
+
ref: React$1.RefObject<HTMLDivElement | null>;
|
|
1494
|
+
spotlightStyle: React$1.CSSProperties;
|
|
1495
|
+
onMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
1496
|
+
onMouseEnter: () => void;
|
|
1497
|
+
onMouseLeave: () => void;
|
|
1498
|
+
isHovered: boolean;
|
|
1499
|
+
};
|
|
1500
|
+
|
|
1501
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
1502
|
+
|
|
1503
|
+
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, Alert, AlertDescription, type AlertProps, AlertTitle, type AlertVariant, AnimatedToggle, type AnimatedToggleProps, AppPage, type AppPageProps, type AppPageWidth, AsymmetricPage, type AsymmetricPageProps, type AsymmetricRatio, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, BarChart, type BarChartProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbProps, BreadcrumbSeparator, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, type CardVariant, type ChartDataPoint, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipVariant, CodeBlock, type CodeBlockProps, ColorPicker, type ColorPickerProps, Combobox, type ComboboxOption, type ComboboxProps, Container, type ContainerProps, DashboardPage, type DashboardPageProps, DatePicker, type DatePickerMode, type DatePickerProps, Dialog, DialogDescription, DialogFooter, DialogHeader, type DialogProps, DialogTitle, Divider, type DividerProps, type DividerVariant, DonutChart, Drawer, DrawerBody, DrawerDescription, DrawerFooter, DrawerHeader, type DrawerProps, type DrawerSide, DrawerTitle, Dropdown, type DropdownAlign, DropdownDivider, DropdownItem, type DropdownItemProps, type DropdownProps, DropdownSearch, type DropdownSearchProps, DropdownTitle, DualSidebarPage, type DualSidebarPageProps, EmptyState, type EmptyStateProps, FloatingMenuBar, type FloatingMenuBarPosition, type FloatingMenuBarProps, FloatingMenuItem, type FloatingMenuItemProps, Footer, type FooterProps, type GridColumns, GridPage, type GridPageProps, HStack, Header, type HeaderProps, HolyGrailPage, type HolyGrailPageProps, Indicator, type IndicatorProps, type IndicatorVariant, Input, type InputProps, LineChart, type LineChartProps, Main, type MainProps, type MaxWidth, Modal, ModalDescription, ModalFooter, ModalHeader, ModalIcon, type ModalProps, type ModalSize, ModalTitle, MorphingCard, type MorphingCardProps, PageLayout, type PageLayoutProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, type PaginationItemProps, PaginationNext, type PaginationPrevNextProps, PaginationPrevious, type PaginationProps, PieChart, type PieChartDataPoint, type PieChartProps, type PieChartVariant, Popover, type PopoverAlign, PopoverBody, PopoverFooter, PopoverHeader, type PopoverProps, type PopoverSide, Progress, type ProgressBarSize, type ProgressProps, type ProgressVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, SegmentController, type SegmentControllerMode, type SegmentControllerProps, type SegmentControllerSize, type SegmentOption, Select, type SelectOption, type SelectProps, type SelectSize, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, type SidebarGroupProps, SidebarItem, type SidebarItemProps, type SidebarItemVariant, SidebarPage, type SidebarPageProps, type SidebarPosition, type SidebarProps, SingleColumnPage, type SingleColumnPageProps, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonVariant, Slider, type SliderProps, SlidingSelect, type SlidingSelectOption, type SlidingSelectProps, type SlidingSelectSize, Snackbar, type SnackbarProps, type SnackbarVariant, type Spacing, SplitPage, type SplitPageProps, type StackAlign, type StackJustify, type StackProps, StackedPage, type StackedPageProps, Step, type StepProps, Stepper, type StepperAlignLabels, type StepperOrientation, type StepperProps, Switch, type SwitchProps, TabContent, type TabContentProps, TabTrigger, type TabTriggerProps, type TabVariant, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsList, type TabsProps, TacProvider, type TacProviderProps, Textarea, type TextareaProps, ToastContainer, ToastItem, type ToastItemProps, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, VStack, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, chipVariants, cn, containerVariants, dividerVariants, footerVariants, headerVariants, mainVariants, sidebarVariants, snackbarVariants, toastVariants, useFocusRestore, useFocusTrap, useRovingIndex, useSidebarContext, useSpotlight, useTacTheme, useToast };
|