@alsha-research/picaso-ui 0.0.0-stage → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +463 -2
- package/dist/index.cjs +8373 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +5555 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.cts +1348 -0
- package/dist/index.d.ts +1348 -0
- package/dist/index.js +8359 -0
- package/dist/index.js.map +1 -0
- package/package.json +85 -4
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,1348 @@
|
|
|
1
|
+
import React, { ButtonHTMLAttributes, ReactNode, HTMLAttributes, FC, Dispatch, SetStateAction, InputHTMLAttributes, LabelHTMLAttributes, TableHTMLAttributes, ThHTMLAttributes, TdHTMLAttributes, TextareaHTMLAttributes, ElementType } from 'react';
|
|
2
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
|
|
5
|
+
type AccordionProps = {
|
|
6
|
+
type?: "single" | "multiple";
|
|
7
|
+
collapsible?: boolean;
|
|
8
|
+
className?: string;
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
expanded?: boolean;
|
|
11
|
+
};
|
|
12
|
+
declare function Accordion({ type, collapsible, className, children, expanded, }: AccordionProps): React.JSX.Element;
|
|
13
|
+
type AccordionItemProps = {
|
|
14
|
+
value: string;
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
openItems?: string[];
|
|
17
|
+
handleToggle?: (value: string) => void;
|
|
18
|
+
children: React.ReactNode;
|
|
19
|
+
className?: string;
|
|
20
|
+
};
|
|
21
|
+
declare function AccordionItem({ value, disabled, openItems, handleToggle, children, className, }: AccordionItemProps): React.JSX.Element;
|
|
22
|
+
type AccordionTriggerProps = {
|
|
23
|
+
isOpen?: boolean;
|
|
24
|
+
children: React.ReactNode;
|
|
25
|
+
defaultOpen?: boolean;
|
|
26
|
+
className?: string;
|
|
27
|
+
triggerIcon?: React.ReactNode;
|
|
28
|
+
};
|
|
29
|
+
declare function AccordionTrigger({ isOpen, children, className, triggerIcon, }: AccordionTriggerProps): React.JSX.Element;
|
|
30
|
+
type AccordionContentProps = {
|
|
31
|
+
children: React.ReactNode;
|
|
32
|
+
};
|
|
33
|
+
declare function AccordionContent({ children }: AccordionContentProps): React.JSX.Element;
|
|
34
|
+
|
|
35
|
+
interface BaseProps {
|
|
36
|
+
type: "image" | "icon" | "text";
|
|
37
|
+
size?: "sm" | "md" | "lg";
|
|
38
|
+
className?: string;
|
|
39
|
+
onClick?: () => void;
|
|
40
|
+
rounded?: boolean;
|
|
41
|
+
border?: boolean;
|
|
42
|
+
borderColor?: string;
|
|
43
|
+
borderWidth?: string;
|
|
44
|
+
radius?: string;
|
|
45
|
+
disabled?: boolean;
|
|
46
|
+
statusIcon?: JSX.Element;
|
|
47
|
+
statusPosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
48
|
+
}
|
|
49
|
+
interface ImageProps extends BaseProps {
|
|
50
|
+
type: "image";
|
|
51
|
+
src: string;
|
|
52
|
+
alt?: string;
|
|
53
|
+
}
|
|
54
|
+
interface IconProps extends BaseProps {
|
|
55
|
+
type: "icon";
|
|
56
|
+
icon: JSX.Element;
|
|
57
|
+
}
|
|
58
|
+
interface TextProps extends BaseProps {
|
|
59
|
+
type: "text";
|
|
60
|
+
text: string;
|
|
61
|
+
}
|
|
62
|
+
type AvatarProps = ImageProps | IconProps | TextProps;
|
|
63
|
+
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
|
|
64
|
+
|
|
65
|
+
type AvatarItemProps = Omit<ImageProps, "size"> | Omit<IconProps, "size"> | Omit<TextProps, "size">;
|
|
66
|
+
interface AvatarGroupProps {
|
|
67
|
+
avatars: AvatarItemProps[];
|
|
68
|
+
size?: "sm" | "md" | "lg";
|
|
69
|
+
max?: number;
|
|
70
|
+
className?: string;
|
|
71
|
+
}
|
|
72
|
+
declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
73
|
+
|
|
74
|
+
type BreadcrumbsProps = {
|
|
75
|
+
children: React.ReactNode;
|
|
76
|
+
separator?: React.ReactNode;
|
|
77
|
+
"aria-label": string;
|
|
78
|
+
containerClasses?: string;
|
|
79
|
+
};
|
|
80
|
+
declare const Breadcrumbs: ({ children, separator, "aria-label": ariaLabel, containerClasses, }: BreadcrumbsProps) => React.JSX.Element;
|
|
81
|
+
|
|
82
|
+
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
83
|
+
children?: ReactNode;
|
|
84
|
+
startIcon?: JSX.Element;
|
|
85
|
+
endIcon?: JSX.Element;
|
|
86
|
+
disabled?: boolean;
|
|
87
|
+
fullWidth?: boolean;
|
|
88
|
+
type?: "submit" | "reset" | "button";
|
|
89
|
+
/**
|
|
90
|
+
* Optional. Shows a spinner and blocks clicks / form submission while true.
|
|
91
|
+
* Defaults to false, so existing usages are unaffected.
|
|
92
|
+
*/
|
|
93
|
+
loading?: boolean;
|
|
94
|
+
/**
|
|
95
|
+
* Optional. Where the spinner appears while `loading` is true.
|
|
96
|
+
* "start" / "end" replace the matching icon (or add the spinner if there is
|
|
97
|
+
* no icon). "center" overlays the spinner and keeps the button width stable.
|
|
98
|
+
* Defaults to "start".
|
|
99
|
+
*/
|
|
100
|
+
loadingPosition?: "start" | "center" | "end";
|
|
101
|
+
/** Optional. Custom indicator shown instead of the default spinner. */
|
|
102
|
+
loadingIndicator?: ReactNode;
|
|
103
|
+
}
|
|
104
|
+
declare const buttonVariants: (props?: ({
|
|
105
|
+
variant?: "link" | "filled" | "outlined" | "soft" | "ghost" | null | undefined;
|
|
106
|
+
intent?: "blue" | "indigo" | "orange" | "pink" | "purple" | "violet" | "primary" | "success" | "error" | "warning" | "default" | "bluegray" | "bluelight" | "rose" | "primary-outlined" | "success-outlined" | "error-outlined" | "warning-outlined" | "default-outlined" | "blue-outlined" | "bluegray-outlined" | "bluelight-outlined" | "indigo-outlined" | "purple-outlined" | "violet-outlined" | "pink-outlined" | "rose-outlined" | "orange-outlined" | null | undefined;
|
|
107
|
+
size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
|
|
108
|
+
iconOnly?: boolean | null | undefined;
|
|
109
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
110
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
111
|
+
|
|
112
|
+
interface CalendarRange {
|
|
113
|
+
start: Date | null;
|
|
114
|
+
end: Date | null;
|
|
115
|
+
}
|
|
116
|
+
interface CalendarBaseProps {
|
|
117
|
+
/** Optional. Visible month (controlled). Any day inside the month works. */
|
|
118
|
+
month?: Date;
|
|
119
|
+
/** Optional. Initial visible month (uncontrolled). Defaults to the selected date or today. */
|
|
120
|
+
defaultMonth?: Date;
|
|
121
|
+
/** Optional. Called when the user navigates to another month. */
|
|
122
|
+
onMonthChange?: (month: Date) => void;
|
|
123
|
+
/** Optional. Earliest selectable date (inclusive). */
|
|
124
|
+
min?: Date;
|
|
125
|
+
/** Optional. Latest selectable date (inclusive). */
|
|
126
|
+
max?: Date;
|
|
127
|
+
/** Optional. Return true to make a date unselectable. */
|
|
128
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
129
|
+
/** Optional. Days that get a small dot under the number (events, deadlines…). */
|
|
130
|
+
markedDates?: Date[];
|
|
131
|
+
/** Optional. Show 1 or 2 months side by side. Defaults to 1. */
|
|
132
|
+
numberOfMonths?: 1 | 2;
|
|
133
|
+
/** Optional. Show days of neighbouring months (single-month view only). Defaults to true. */
|
|
134
|
+
showOutsideDays?: boolean;
|
|
135
|
+
/** Optional. First day of the week: 0 = Sunday, 1 = Monday. Defaults to 0. */
|
|
136
|
+
weekStartsOn?: 0 | 1;
|
|
137
|
+
/** Optional. BCP 47 locale for month and weekday names. Defaults to "en-US". */
|
|
138
|
+
locale?: string;
|
|
139
|
+
className?: string;
|
|
140
|
+
"aria-label"?: string;
|
|
141
|
+
}
|
|
142
|
+
interface CalendarSingleProps extends CalendarBaseProps {
|
|
143
|
+
mode?: "single";
|
|
144
|
+
value?: Date | null;
|
|
145
|
+
defaultValue?: Date | null;
|
|
146
|
+
onChange?: (date: Date | null) => void;
|
|
147
|
+
}
|
|
148
|
+
interface CalendarMultipleProps extends CalendarBaseProps {
|
|
149
|
+
mode: "multiple";
|
|
150
|
+
value?: Date[];
|
|
151
|
+
defaultValue?: Date[];
|
|
152
|
+
onChange?: (dates: Date[]) => void;
|
|
153
|
+
}
|
|
154
|
+
interface CalendarRangeProps extends CalendarBaseProps {
|
|
155
|
+
mode: "range";
|
|
156
|
+
value?: CalendarRange;
|
|
157
|
+
defaultValue?: CalendarRange;
|
|
158
|
+
onChange?: (range: CalendarRange) => void;
|
|
159
|
+
}
|
|
160
|
+
type CalendarProps = CalendarSingleProps | CalendarMultipleProps | CalendarRangeProps;
|
|
161
|
+
declare const Calendar: {
|
|
162
|
+
(props: CalendarProps): React.JSX.Element;
|
|
163
|
+
displayName: string;
|
|
164
|
+
};
|
|
165
|
+
|
|
166
|
+
declare const calloutVariants: (props?: ({
|
|
167
|
+
variant?: "filled" | "outlined" | null | undefined;
|
|
168
|
+
intent?: "primary" | "success" | "error" | "warning" | "default" | null | undefined;
|
|
169
|
+
size?: "sm" | "md" | "lg" | "xs" | null | undefined;
|
|
170
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
171
|
+
interface CalloutProps extends VariantProps<typeof calloutVariants> {
|
|
172
|
+
children: ReactNode;
|
|
173
|
+
startIcon?: JSX.Element;
|
|
174
|
+
endIcon?: JSX.Element;
|
|
175
|
+
className?: string;
|
|
176
|
+
}
|
|
177
|
+
declare const Callout: React.FC<CalloutProps>;
|
|
178
|
+
|
|
179
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
180
|
+
children: React.ReactNode;
|
|
181
|
+
className?: string;
|
|
182
|
+
}
|
|
183
|
+
interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
184
|
+
children: React.ReactNode;
|
|
185
|
+
className?: string;
|
|
186
|
+
}
|
|
187
|
+
interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
|
188
|
+
children: React.ReactNode;
|
|
189
|
+
className?: string;
|
|
190
|
+
}
|
|
191
|
+
interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
192
|
+
children: React.ReactNode;
|
|
193
|
+
className?: string;
|
|
194
|
+
}
|
|
195
|
+
interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
196
|
+
children: React.ReactNode;
|
|
197
|
+
className?: string;
|
|
198
|
+
}
|
|
199
|
+
interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
200
|
+
children: React.ReactNode;
|
|
201
|
+
className?: string;
|
|
202
|
+
}
|
|
203
|
+
interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
204
|
+
children: React.ReactNode;
|
|
205
|
+
className?: string;
|
|
206
|
+
}
|
|
207
|
+
declare function Card({ children, className, ...props }: CardProps): React.JSX.Element;
|
|
208
|
+
declare const CardHeader: React.FC<CardHeaderProps>;
|
|
209
|
+
declare const CardTitle: React.FC<CardTitleProps>;
|
|
210
|
+
declare const CardDescription: React.FC<CardDescriptionProps>;
|
|
211
|
+
declare const CardAction: React.FC<CardActionProps>;
|
|
212
|
+
declare const CardContent: React.FC<CardContentProps>;
|
|
213
|
+
declare const CardFooter: React.FC<CardFooterProps>;
|
|
214
|
+
|
|
215
|
+
declare const checkboxVariant: (props?: ({
|
|
216
|
+
size?: "sm" | "lg" | "xl" | null | undefined;
|
|
217
|
+
intent?: "blue" | "indigo" | "orange" | "pink" | "purple" | "violet" | "primary" | "success" | "error" | "warning" | "default" | "bluegray" | "bluelight" | "rose" | null | undefined;
|
|
218
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
219
|
+
interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof checkboxVariant> {
|
|
220
|
+
size?: "sm" | "lg" | "xl";
|
|
221
|
+
}
|
|
222
|
+
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
223
|
+
|
|
224
|
+
interface ChipProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof chipVariants> {
|
|
225
|
+
children: ReactNode;
|
|
226
|
+
dot?: boolean;
|
|
227
|
+
dotColor?: string;
|
|
228
|
+
startIcon?: JSX.Element;
|
|
229
|
+
endIcon?: JSX.Element;
|
|
230
|
+
}
|
|
231
|
+
declare const chipVariants: (props?: ({
|
|
232
|
+
variant?: "outlined" | "soft" | "solid" | null | undefined;
|
|
233
|
+
intent?: "blue" | "indigo" | "orange" | "pink" | "purple" | "violet" | "primary" | "success" | "error" | "warning" | "default" | "bluegray" | "bluelight" | "rose" | null | undefined;
|
|
234
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
235
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
236
|
+
declare const Chip: ({ children, className, size, variant, intent, dot, dotColor, startIcon, endIcon, ...rest }: ChipProps) => React.JSX.Element;
|
|
237
|
+
|
|
238
|
+
interface CircularProgressBarProps {
|
|
239
|
+
strokeWidth?: number;
|
|
240
|
+
size?: number;
|
|
241
|
+
percentage: number;
|
|
242
|
+
text?: string;
|
|
243
|
+
textClassName?: string;
|
|
244
|
+
}
|
|
245
|
+
declare const CircularProgressBar: ({ percentage, size, strokeWidth, text, textClassName, }: CircularProgressBarProps) => React.JSX.Element;
|
|
246
|
+
|
|
247
|
+
declare const SHADES: readonly [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
|
248
|
+
declare const PALETTE: {
|
|
249
|
+
readonly primary: {
|
|
250
|
+
readonly label: "Primary";
|
|
251
|
+
readonly themed: true;
|
|
252
|
+
readonly colors: readonly ["#f5faff", "#eff8ff", "#d1e9ff", "#b2ddff", "#84caff", "#53b1fd", "#2e90fa", "#1570ef", "#175cd3", "#1849a9", "#194185"];
|
|
253
|
+
};
|
|
254
|
+
readonly gray: {
|
|
255
|
+
readonly label: "Gray";
|
|
256
|
+
readonly themed: true;
|
|
257
|
+
readonly colors: readonly ["#ffffff", "#f9fafb", "#f2f4f7", "#eaecf0", "#d0d5dd", "#98a2b3", "#667085", "#475467", "#344054", "#1d2939", "#101828"];
|
|
258
|
+
};
|
|
259
|
+
readonly error: {
|
|
260
|
+
readonly label: "Error";
|
|
261
|
+
readonly themed: true;
|
|
262
|
+
readonly colors: readonly ["#fffbfa", "#fef3f2", "#fee4e2", "#fecdca", "#fda29b", "#f97066", "#f04438", "#d92d20", "#b42318", "#912018", "#7a271a"];
|
|
263
|
+
};
|
|
264
|
+
readonly warning: {
|
|
265
|
+
readonly label: "Warning";
|
|
266
|
+
readonly themed: true;
|
|
267
|
+
readonly colors: readonly ["#fffdf5", "#fffaeb", "#fef0c7", "#fedf89", "#fec84b", "#fdb022", "#f79009", "#dc6803", "#b54708", "#93370d", "#7a2e0e"];
|
|
268
|
+
};
|
|
269
|
+
readonly success: {
|
|
270
|
+
readonly label: "Success";
|
|
271
|
+
readonly themed: true;
|
|
272
|
+
readonly colors: readonly ["#f6fef9", "#ecfdf3", "#d1fadf", "#a6f4c5", "#6ce9a6", "#32d583", "#12b76a", "#039855", "#027a48", "#05603a", "#054f31"];
|
|
273
|
+
};
|
|
274
|
+
readonly blue: {
|
|
275
|
+
readonly label: "Blue";
|
|
276
|
+
readonly themed: false;
|
|
277
|
+
readonly colors: readonly ["#f5faff", "#eff8ff", "#d1e9ff", "#b2ddff", "#84caff", "#53b1fd", "#2e90fa", "#1570ef", "#175cd3", "#1849a9", "#194185"];
|
|
278
|
+
};
|
|
279
|
+
readonly bluegray: {
|
|
280
|
+
readonly label: "Blue gray";
|
|
281
|
+
readonly themed: false;
|
|
282
|
+
readonly colors: readonly ["#fcfcfd", "#f8f9fc", "#eaecf5", "#d5d9eb", "#afb5d9", "#717bbc", "#4e5ba6", "#3e4784", "#363f72", "#293056", "#101323"];
|
|
283
|
+
};
|
|
284
|
+
readonly bluelight: {
|
|
285
|
+
readonly label: "Blue light";
|
|
286
|
+
readonly themed: false;
|
|
287
|
+
readonly colors: readonly ["#f5fbff", "#f0f9ff", "#e0f2fe", "#b9e6fe", "#7cd4fd", "#36bffa", "#0ba5ec", "#0086c9", "#026aa2", "#065986", "#0b4a6f"];
|
|
288
|
+
};
|
|
289
|
+
readonly indigo: {
|
|
290
|
+
readonly label: "Indigo";
|
|
291
|
+
readonly themed: false;
|
|
292
|
+
readonly colors: readonly ["#f5f8ff", "#eef4ff", "#e0eaff", "#c7d7fe", "#a4bcfd", "#8098f9", "#6172f3", "#444ce7", "#3538cd", "#2d31a6", "#2d3282"];
|
|
293
|
+
};
|
|
294
|
+
readonly purple: {
|
|
295
|
+
readonly label: "Purple";
|
|
296
|
+
readonly themed: false;
|
|
297
|
+
readonly colors: readonly ["#fafaff", "#f4f3ff", "#ebe9fe", "#d9d6fe", "#bdb4fe", "#9b8afb", "#7a5af8", "#6938ef", "#5925dc", "#4a1fb8", "#3e1c96"];
|
|
298
|
+
};
|
|
299
|
+
readonly violet: {
|
|
300
|
+
readonly label: "Violet";
|
|
301
|
+
readonly themed: false;
|
|
302
|
+
readonly colors: readonly ["#fcfaff", "#f9f5ff", "#f4ebff", "#e9d7fe", "#d6bbfb", "#b692f6", "#9e77ed", "#7f56d9", "#6941c6", "#53389e", "#42307d"];
|
|
303
|
+
};
|
|
304
|
+
readonly pink: {
|
|
305
|
+
readonly label: "Pink";
|
|
306
|
+
readonly themed: false;
|
|
307
|
+
readonly colors: readonly ["#fef6fb", "#fdf2fa", "#fce7f6", "#fcceee", "#faa7e0", "#f670c7", "#ee46bc", "#dd2590", "#c11574", "#9e165f", "#851651"];
|
|
308
|
+
};
|
|
309
|
+
readonly rose: {
|
|
310
|
+
readonly label: "Rose";
|
|
311
|
+
readonly themed: false;
|
|
312
|
+
readonly colors: readonly ["#fff5f6", "#fff1f3", "#ffe4e8", "#fecdd6", "#fea3b4", "#fd6f8e", "#f63d68", "#e31b54", "#c01048", "#a11043", "#89123e"];
|
|
313
|
+
};
|
|
314
|
+
readonly orange: {
|
|
315
|
+
readonly label: "Orange";
|
|
316
|
+
readonly themed: false;
|
|
317
|
+
readonly colors: readonly ["#fffaf5", "#fff6ed", "#ffead5", "#fddcab", "#feb273", "#fd853a", "#fb6514", "#ec4a0a", "#c4320a", "#9c2a10", "#7e2410"];
|
|
318
|
+
};
|
|
319
|
+
};
|
|
320
|
+
type ColorFamily = keyof typeof PALETTE;
|
|
321
|
+
type ColorShade = (typeof SHADES)[number];
|
|
322
|
+
interface ColorPickerToken {
|
|
323
|
+
family: ColorFamily;
|
|
324
|
+
shade: ColorShade;
|
|
325
|
+
}
|
|
326
|
+
interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "placeholder"> {
|
|
327
|
+
/** Selected colour as a hex string (`#rgb` or `#rrggbb`). Makes the component controlled. */
|
|
328
|
+
value?: string;
|
|
329
|
+
/** Initial colour when uncontrolled. */
|
|
330
|
+
defaultValue?: string;
|
|
331
|
+
/**
|
|
332
|
+
* Called with the new colour as a lowercase `#rrggbb` string. When the colour
|
|
333
|
+
* is one of the theme swatches, the second argument names it
|
|
334
|
+
* (e.g. `{ family: "primary", shade: 600 }`).
|
|
335
|
+
*/
|
|
336
|
+
onChange?: (value: string, token?: ColorPickerToken) => void;
|
|
337
|
+
/** Limit which colour families are offered. Defaults to all theme families. */
|
|
338
|
+
families?: ColorFamily[];
|
|
339
|
+
/** Show the hex field and native colour input for colours outside the palette. Defaults to true. */
|
|
340
|
+
showCustomColor?: boolean;
|
|
341
|
+
/** Text shown in the trigger while no colour is selected. */
|
|
342
|
+
placeholder?: string;
|
|
343
|
+
/** Which side of the trigger the panel opens on. Defaults to "bottom". */
|
|
344
|
+
placement?: "bottom" | "top";
|
|
345
|
+
disabled?: boolean;
|
|
346
|
+
error?: boolean;
|
|
347
|
+
/** When set, a hidden input carries the hex value so the picker works inside native forms. */
|
|
348
|
+
name?: string;
|
|
349
|
+
}
|
|
350
|
+
declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
351
|
+
|
|
352
|
+
interface DateRange {
|
|
353
|
+
start: Date | null;
|
|
354
|
+
end: Date | null;
|
|
355
|
+
}
|
|
356
|
+
interface DatePickerBaseProps {
|
|
357
|
+
/** Optional. Earliest selectable date (inclusive). */
|
|
358
|
+
min?: Date;
|
|
359
|
+
/** Optional. Latest selectable date (inclusive). */
|
|
360
|
+
max?: Date;
|
|
361
|
+
/** Optional. Return true to make a specific date unselectable (e.g. weekends, holidays). */
|
|
362
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
363
|
+
/** Optional. Text shown when nothing is selected. */
|
|
364
|
+
placeholder?: string;
|
|
365
|
+
disabled?: boolean;
|
|
366
|
+
error?: boolean;
|
|
367
|
+
/** Optional. "sm" = 320px, "lg" = 313px, default = full width (same as Input). */
|
|
368
|
+
size?: "sm" | "lg";
|
|
369
|
+
/** Optional. Open the calendar above or below the field. Defaults to "bottom". */
|
|
370
|
+
placement?: "bottom" | "top";
|
|
371
|
+
/** Optional. Show a clear button when a value is selected. Defaults to true. */
|
|
372
|
+
clearable?: boolean;
|
|
373
|
+
/** Optional. Show a "Today" shortcut in the footer. Defaults to true. */
|
|
374
|
+
showToday?: boolean;
|
|
375
|
+
/** Optional. First day of the week: 0 = Sunday, 1 = Monday. Defaults to 0. */
|
|
376
|
+
weekStartsOn?: 0 | 1;
|
|
377
|
+
/** Optional. BCP 47 locale used for month and weekday names. Defaults to "en-US". */
|
|
378
|
+
locale?: string;
|
|
379
|
+
/** Optional. Intl.DateTimeFormat options for the text shown in the field. */
|
|
380
|
+
formatOptions?: Intl.DateTimeFormatOptions;
|
|
381
|
+
id?: string;
|
|
382
|
+
/** Optional. Adds a hidden input (ISO date, or "start/end" for ranges) for native forms. */
|
|
383
|
+
name?: string;
|
|
384
|
+
className?: string;
|
|
385
|
+
"aria-label"?: string;
|
|
386
|
+
"aria-describedby"?: string;
|
|
387
|
+
}
|
|
388
|
+
interface DatePickerSingleProps extends DatePickerBaseProps {
|
|
389
|
+
mode?: "single";
|
|
390
|
+
/** Controlled value. */
|
|
391
|
+
value?: Date | null;
|
|
392
|
+
/** Uncontrolled initial value. */
|
|
393
|
+
defaultValue?: Date | null;
|
|
394
|
+
onChange?: (date: Date | null) => void;
|
|
395
|
+
}
|
|
396
|
+
interface DateRangePreset {
|
|
397
|
+
label: string;
|
|
398
|
+
range: DateRange;
|
|
399
|
+
}
|
|
400
|
+
interface DatePickerRangeProps extends DatePickerBaseProps {
|
|
401
|
+
mode: "range";
|
|
402
|
+
/** Optional. Shortcut buttons (e.g. "Last 7 days") shown above the footer. */
|
|
403
|
+
presets?: DateRangePreset[];
|
|
404
|
+
/** Controlled value. */
|
|
405
|
+
value?: DateRange;
|
|
406
|
+
/** Uncontrolled initial value. */
|
|
407
|
+
defaultValue?: DateRange;
|
|
408
|
+
onChange?: (range: DateRange) => void;
|
|
409
|
+
}
|
|
410
|
+
type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
|
|
411
|
+
declare const DatePicker: {
|
|
412
|
+
(props: DatePickerProps): React.JSX.Element;
|
|
413
|
+
displayName: string;
|
|
414
|
+
};
|
|
415
|
+
|
|
416
|
+
interface DateTimePickerProps {
|
|
417
|
+
/** Controlled value: a Date carrying both day and time, or null. */
|
|
418
|
+
value?: Date | null;
|
|
419
|
+
/** Uncontrolled initial value. */
|
|
420
|
+
defaultValue?: Date | null;
|
|
421
|
+
/** Called with a Date (local time) or null when cleared. */
|
|
422
|
+
onChange?: (value: Date | null) => void;
|
|
423
|
+
/** Optional. Earliest selectable moment (date and time). */
|
|
424
|
+
min?: Date;
|
|
425
|
+
/** Optional. Latest selectable moment (date and time). */
|
|
426
|
+
max?: Date;
|
|
427
|
+
/** Optional. Return true to block a specific day. */
|
|
428
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
429
|
+
/** Optional. Time used when a date is picked before any time. Defaults to "00:00". */
|
|
430
|
+
defaultTime?: string;
|
|
431
|
+
/** Optional. Time display format. Defaults to "12h". */
|
|
432
|
+
format?: "12h" | "24h";
|
|
433
|
+
/** Optional. Minutes between time options. Defaults to 5. */
|
|
434
|
+
minuteStep?: number;
|
|
435
|
+
datePlaceholder?: string;
|
|
436
|
+
timePlaceholder?: string;
|
|
437
|
+
disabled?: boolean;
|
|
438
|
+
error?: boolean;
|
|
439
|
+
/** Optional. Open the popovers above or below. Defaults to "bottom". */
|
|
440
|
+
placement?: "bottom" | "top";
|
|
441
|
+
/** Optional. First day of week: 0 = Sunday, 1 = Monday. Defaults to 0. */
|
|
442
|
+
weekStartsOn?: 0 | 1;
|
|
443
|
+
/** Optional. BCP 47 locale for month and weekday names. Defaults to "en-US". */
|
|
444
|
+
locale?: string;
|
|
445
|
+
/** Optional. Intl options for the date text. */
|
|
446
|
+
formatOptions?: Intl.DateTimeFormatOptions;
|
|
447
|
+
/** Optional. Adds a hidden input with a local ISO value ("YYYY-MM-DDTHH:mm"). */
|
|
448
|
+
name?: string;
|
|
449
|
+
id?: string;
|
|
450
|
+
className?: string;
|
|
451
|
+
"aria-label"?: string;
|
|
452
|
+
}
|
|
453
|
+
/** Date + time in one control. Composes DatePicker and TimePicker around a single Date value. */
|
|
454
|
+
declare const DateTimePicker: {
|
|
455
|
+
({ value, defaultValue, onChange, min, max, isDateDisabled, defaultTime, format, minuteStep, datePlaceholder, timePlaceholder, disabled, error, placement, weekStartsOn, locale, formatOptions, name, id, className, "aria-label": ariaLabel, }: DateTimePickerProps): React.JSX.Element;
|
|
456
|
+
displayName: string;
|
|
457
|
+
};
|
|
458
|
+
|
|
459
|
+
type SharedProps = Omit<React.ComponentProps<typeof DatePicker>, "mode" | "value" | "defaultValue" | "onChange">;
|
|
460
|
+
interface DateRangePickerProps extends SharedProps {
|
|
461
|
+
/** Controlled value. */
|
|
462
|
+
value?: DateRange;
|
|
463
|
+
/** Uncontrolled initial value. */
|
|
464
|
+
defaultValue?: DateRange;
|
|
465
|
+
onChange?: (range: DateRange) => void;
|
|
466
|
+
/** Optional. Shortcut buttons such as "Last 7 days". See getDefaultRangePresets(). */
|
|
467
|
+
presets?: DateRangePreset[];
|
|
468
|
+
}
|
|
469
|
+
/** Common presets: Last 7 / 30 days and This month. */
|
|
470
|
+
declare const getDefaultRangePresets: (now?: Date) => DateRangePreset[];
|
|
471
|
+
/** DatePicker locked to range mode. */
|
|
472
|
+
declare const DateRangePicker: {
|
|
473
|
+
(props: DateRangePickerProps): React.JSX.Element;
|
|
474
|
+
displayName: string;
|
|
475
|
+
};
|
|
476
|
+
|
|
477
|
+
interface DividerProps {
|
|
478
|
+
width?: string;
|
|
479
|
+
height?: string;
|
|
480
|
+
position?: "horizontal" | "vertical";
|
|
481
|
+
className?: string;
|
|
482
|
+
}
|
|
483
|
+
declare const Divider: ({ width, height, position, className, }: DividerProps) => React.JSX.Element;
|
|
484
|
+
|
|
485
|
+
interface DrawerProps {
|
|
486
|
+
isOpen: boolean;
|
|
487
|
+
setIsOpen: Dispatch<SetStateAction<boolean>>;
|
|
488
|
+
children: ReactNode;
|
|
489
|
+
position?: "left" | "right" | "top" | "bottom";
|
|
490
|
+
width?: string;
|
|
491
|
+
height?: string;
|
|
492
|
+
className?: string;
|
|
493
|
+
showCloseButton?: boolean;
|
|
494
|
+
closeOnOutsideClick?: boolean;
|
|
495
|
+
/** Optional. Close when Escape is pressed. Defaults to true. */
|
|
496
|
+
closeOnEscape?: boolean;
|
|
497
|
+
/** Optional. Accessible name for the drawer. Prefer aria-labelledby if you have a visible title. */
|
|
498
|
+
"aria-label"?: string;
|
|
499
|
+
/** Optional. id of the element that titles the drawer. */
|
|
500
|
+
"aria-labelledby"?: string;
|
|
501
|
+
/** Optional. id of the element that describes the drawer. */
|
|
502
|
+
"aria-describedby"?: string;
|
|
503
|
+
}
|
|
504
|
+
declare const Drawer: FC<DrawerProps>;
|
|
505
|
+
|
|
506
|
+
type Option$1 = {
|
|
507
|
+
label: string | number;
|
|
508
|
+
value: string | number;
|
|
509
|
+
info?: string;
|
|
510
|
+
addInfo?: string;
|
|
511
|
+
tooltipContent?: string;
|
|
512
|
+
disabledOption?: boolean;
|
|
513
|
+
labelTextColor?: string;
|
|
514
|
+
};
|
|
515
|
+
interface DropdownProps$2 {
|
|
516
|
+
id?: string;
|
|
517
|
+
icon?: JSX.Element;
|
|
518
|
+
options: Option$1[];
|
|
519
|
+
selected?: Option$1[];
|
|
520
|
+
setSelected?: React.Dispatch<React.SetStateAction<Option$1[]>>;
|
|
521
|
+
onApply?: () => void;
|
|
522
|
+
onReset?: () => void;
|
|
523
|
+
dropdownText?: string;
|
|
524
|
+
search?: boolean;
|
|
525
|
+
multiple?: boolean;
|
|
526
|
+
renderItem?: (option: Option$1) => React.ReactNode;
|
|
527
|
+
children?: React.ReactNode;
|
|
528
|
+
position?: "top" | "bottom";
|
|
529
|
+
info?: string | number;
|
|
530
|
+
addInfo?: string | number;
|
|
531
|
+
tooltipContent?: string;
|
|
532
|
+
width?: string;
|
|
533
|
+
dropdownFooter?: boolean | undefined;
|
|
534
|
+
disabled?: boolean;
|
|
535
|
+
labelTextColor?: string;
|
|
536
|
+
footerAction?: React.ReactNode;
|
|
537
|
+
height?: string;
|
|
538
|
+
}
|
|
539
|
+
declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps$2 & React.RefAttributes<HTMLDivElement>>;
|
|
540
|
+
|
|
541
|
+
type DropdownAlignment = "left" | "right" | "top" | "bottom" | "center" | "start" | "end";
|
|
542
|
+
interface DropdownProps$1 {
|
|
543
|
+
isOpen: boolean;
|
|
544
|
+
setIsOpen: (open: boolean) => void;
|
|
545
|
+
triggerRef: React.RefObject<HTMLDivElement>;
|
|
546
|
+
contentRef: React.RefObject<HTMLDivElement>;
|
|
547
|
+
registerItem: () => number;
|
|
548
|
+
menuItemsRef: React.MutableRefObject<(HTMLDivElement | null)[]>;
|
|
549
|
+
closeMenu: () => void;
|
|
550
|
+
}
|
|
551
|
+
interface SubmenuProps {
|
|
552
|
+
isSubOpen: boolean;
|
|
553
|
+
setIsSubOpen: (open: boolean) => void;
|
|
554
|
+
}
|
|
555
|
+
declare function DropdownMenu({ children, }: {
|
|
556
|
+
children: React.ReactNode;
|
|
557
|
+
}): React.JSX.Element;
|
|
558
|
+
declare namespace DropdownMenu {
|
|
559
|
+
var displayName: string;
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
declare function DropdownMenuTrigger({ children, dropdownProps, }: {
|
|
563
|
+
children: React.ReactNode;
|
|
564
|
+
dropdownProps?: DropdownProps$1;
|
|
565
|
+
}): React.JSX.Element;
|
|
566
|
+
declare namespace DropdownMenuTrigger {
|
|
567
|
+
var displayName: string;
|
|
568
|
+
}
|
|
569
|
+
declare function DropdownMenuContent({ children, align, className, dropdownProps, }: {
|
|
570
|
+
children: React.ReactNode;
|
|
571
|
+
align?: DropdownAlignment;
|
|
572
|
+
className?: string;
|
|
573
|
+
dropdownProps?: DropdownProps$1;
|
|
574
|
+
}): React.JSX.Element | null;
|
|
575
|
+
declare namespace DropdownMenuContent {
|
|
576
|
+
var displayName: string;
|
|
577
|
+
}
|
|
578
|
+
declare function DropdownMenuLabel({ children, className, }: {
|
|
579
|
+
children: React.ReactNode;
|
|
580
|
+
className?: string;
|
|
581
|
+
}): React.JSX.Element;
|
|
582
|
+
declare namespace DropdownMenuLabel {
|
|
583
|
+
var displayName: string;
|
|
584
|
+
}
|
|
585
|
+
declare function DropdownMenuSeparator(): React.JSX.Element;
|
|
586
|
+
declare namespace DropdownMenuSeparator {
|
|
587
|
+
var displayName: string;
|
|
588
|
+
}
|
|
589
|
+
declare function DropdownMenuItem({ children, onClick, disabled, dropdownProps, className, }: {
|
|
590
|
+
children: React.ReactNode;
|
|
591
|
+
onClick?: () => void;
|
|
592
|
+
disabled?: boolean;
|
|
593
|
+
className?: string;
|
|
594
|
+
dropdownProps?: DropdownProps$1;
|
|
595
|
+
}): React.JSX.Element;
|
|
596
|
+
declare namespace DropdownMenuItem {
|
|
597
|
+
var displayName: string;
|
|
598
|
+
}
|
|
599
|
+
declare function DropdownMenuSub({ children, dropdownProps, }: {
|
|
600
|
+
children: React.ReactNode;
|
|
601
|
+
dropdownProps?: DropdownProps$1;
|
|
602
|
+
}): React.JSX.Element;
|
|
603
|
+
declare namespace DropdownMenuSub {
|
|
604
|
+
var displayName: string;
|
|
605
|
+
}
|
|
606
|
+
declare function DropdownMenuSubTrigger({ children, submenuProps, dropdownProps, className, }: {
|
|
607
|
+
children: React.ReactNode;
|
|
608
|
+
submenuProps?: SubmenuProps;
|
|
609
|
+
dropdownProps?: DropdownProps$1;
|
|
610
|
+
className?: string;
|
|
611
|
+
}): React.JSX.Element;
|
|
612
|
+
declare namespace DropdownMenuSubTrigger {
|
|
613
|
+
var displayName: string;
|
|
614
|
+
}
|
|
615
|
+
declare function DropdownMenuSubContent({ children, submenuProps, dropdownProps, }: {
|
|
616
|
+
children: React.ReactNode;
|
|
617
|
+
submenuProps?: SubmenuProps;
|
|
618
|
+
dropdownProps?: DropdownProps$1;
|
|
619
|
+
}): React.JSX.Element;
|
|
620
|
+
declare namespace DropdownMenuSubContent {
|
|
621
|
+
var displayName: string;
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
type Option = {
|
|
625
|
+
label: string | number;
|
|
626
|
+
value: string | number;
|
|
627
|
+
info?: string;
|
|
628
|
+
addInfo?: string;
|
|
629
|
+
tooltipContent?: string;
|
|
630
|
+
disabledOption?: boolean;
|
|
631
|
+
labelTextColor?: string;
|
|
632
|
+
};
|
|
633
|
+
interface DropdownProps {
|
|
634
|
+
id?: string;
|
|
635
|
+
options: Option[];
|
|
636
|
+
selected?: Option[];
|
|
637
|
+
setSelected?: React.Dispatch<React.SetStateAction<Option[]>>;
|
|
638
|
+
onApply?: () => void;
|
|
639
|
+
onReset?: () => void;
|
|
640
|
+
dropdownText?: string;
|
|
641
|
+
search?: boolean;
|
|
642
|
+
multiple?: boolean;
|
|
643
|
+
renderItem?: (option: Option) => React.ReactNode;
|
|
644
|
+
children?: React.ReactNode;
|
|
645
|
+
trigger?: React.ReactNode;
|
|
646
|
+
dropdownMenu?: boolean;
|
|
647
|
+
position?: "top" | "bottom" | "left" | "right";
|
|
648
|
+
setDropdownMenu?: (value: boolean) => void;
|
|
649
|
+
info?: string | number;
|
|
650
|
+
addInfo?: string | number;
|
|
651
|
+
tooltipContent?: string;
|
|
652
|
+
width?: string;
|
|
653
|
+
dropdownFooter?: boolean;
|
|
654
|
+
disabled?: boolean;
|
|
655
|
+
labelTextColor?: string;
|
|
656
|
+
footerAction?: React.ReactNode;
|
|
657
|
+
height?: string;
|
|
658
|
+
}
|
|
659
|
+
declare const DropdownWithIcon: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
|
|
660
|
+
|
|
661
|
+
interface FileSelectorProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
662
|
+
component: JSX.Element;
|
|
663
|
+
}
|
|
664
|
+
declare const FileSelector: React.ForwardRefExoticComponent<FileSelectorProps & React.RefAttributes<HTMLInputElement>>;
|
|
665
|
+
|
|
666
|
+
interface FileUploadProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
667
|
+
id: string;
|
|
668
|
+
selectedFile?: File[];
|
|
669
|
+
setSelectedFile?: (files: File[]) => void;
|
|
670
|
+
children?: ReactNode;
|
|
671
|
+
onDelete?: (index: number) => void;
|
|
672
|
+
title?: string;
|
|
673
|
+
disabled?: boolean;
|
|
674
|
+
filePreviewClassName?: string;
|
|
675
|
+
}
|
|
676
|
+
declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLInputElement>>;
|
|
677
|
+
|
|
678
|
+
interface FileUploadPreviewProps {
|
|
679
|
+
index: number;
|
|
680
|
+
file: File;
|
|
681
|
+
children?: ReactNode;
|
|
682
|
+
onDelete?: (index: number) => void;
|
|
683
|
+
}
|
|
684
|
+
declare const FileUploadPreview: ({ index, file, children, onDelete, }: FileUploadPreviewProps) => React.JSX.Element;
|
|
685
|
+
|
|
686
|
+
interface GlobalNavigationProps {
|
|
687
|
+
isOpen: boolean;
|
|
688
|
+
setIsOpen: (isOpen: boolean) => void;
|
|
689
|
+
className?: string;
|
|
690
|
+
children: React.ReactNode;
|
|
691
|
+
trigger: JSX.Element;
|
|
692
|
+
postion?: "bottom-left" | "bottom-right" | "top-left" | "top-right";
|
|
693
|
+
}
|
|
694
|
+
declare const GlobalNavigation: React.ForwardRefExoticComponent<GlobalNavigationProps & React.RefAttributes<HTMLDivElement>>;
|
|
695
|
+
|
|
696
|
+
interface HelperTextProps extends HTMLAttributes<HTMLSpanElement> {
|
|
697
|
+
children: ReactNode;
|
|
698
|
+
size?: "sm" | "lg";
|
|
699
|
+
error?: boolean;
|
|
700
|
+
}
|
|
701
|
+
declare const HelperText: ({ children, className, size, error }: HelperTextProps) => React.JSX.Element;
|
|
702
|
+
|
|
703
|
+
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
704
|
+
size?: "sm" | "lg";
|
|
705
|
+
startIcon?: JSX.Element;
|
|
706
|
+
endIcon?: JSX.Element;
|
|
707
|
+
disabled?: boolean;
|
|
708
|
+
error?: boolean;
|
|
709
|
+
type: "text" | "url" | "email" | "password" | "number" | "tel" | "search" | "time";
|
|
710
|
+
}
|
|
711
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
712
|
+
|
|
713
|
+
interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement>, VariantProps<typeof labelVariants> {
|
|
714
|
+
htmlFor?: string;
|
|
715
|
+
children: ReactNode;
|
|
716
|
+
required?: boolean;
|
|
717
|
+
disabled?: boolean;
|
|
718
|
+
}
|
|
719
|
+
declare const labelVariants: (props?: ({
|
|
720
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
721
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
722
|
+
declare const Label: ({ children, htmlFor, size, required, disabled, className, ...props }: LabelProps) => React.JSX.Element;
|
|
723
|
+
|
|
724
|
+
interface ListPaginationProps {
|
|
725
|
+
count: number;
|
|
726
|
+
page: number;
|
|
727
|
+
rowsPerPage: number;
|
|
728
|
+
onPageChange: (newPage: number) => void;
|
|
729
|
+
className?: string;
|
|
730
|
+
}
|
|
731
|
+
declare const ListPagination: React.FC<ListPaginationProps>;
|
|
732
|
+
|
|
733
|
+
interface LoadingProps {
|
|
734
|
+
width?: string;
|
|
735
|
+
height?: string;
|
|
736
|
+
loaderColor?: string;
|
|
737
|
+
variant?: "light" | "heavy";
|
|
738
|
+
}
|
|
739
|
+
declare const Loading: ({ width, height, loaderColor, variant }: LoadingProps) => React.JSX.Element;
|
|
740
|
+
|
|
741
|
+
interface ModalProps {
|
|
742
|
+
children?: ReactNode;
|
|
743
|
+
showModal?: boolean;
|
|
744
|
+
closeModal?: boolean;
|
|
745
|
+
setShowModal: (value: boolean) => void;
|
|
746
|
+
closeOnOutsideClick?: boolean;
|
|
747
|
+
className?: string;
|
|
748
|
+
width?: string;
|
|
749
|
+
/** Optional. Close when Escape is pressed. Defaults to true. */
|
|
750
|
+
closeOnEscape?: boolean;
|
|
751
|
+
/** Optional. Accessible name for the dialog. Prefer aria-labelledby if you have a visible title. */
|
|
752
|
+
"aria-label"?: string;
|
|
753
|
+
/** Optional. id of the element that titles the dialog. */
|
|
754
|
+
"aria-labelledby"?: string;
|
|
755
|
+
/** Optional. id of the element that describes the dialog. */
|
|
756
|
+
"aria-describedby"?: string;
|
|
757
|
+
}
|
|
758
|
+
declare function Modal({ children, showModal, setShowModal, closeModal, closeOnOutsideClick, className, width, closeOnEscape, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: ModalProps): React.JSX.Element;
|
|
759
|
+
|
|
760
|
+
interface NoticeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof noticeVariants> {
|
|
761
|
+
children?: ReactNode;
|
|
762
|
+
noticeTitle?: string;
|
|
763
|
+
variant: "success" | "warning" | "info" | "error" | "default";
|
|
764
|
+
position?: "top" | "bottom" | "center";
|
|
765
|
+
showIcon?: boolean;
|
|
766
|
+
open: boolean;
|
|
767
|
+
setOpen: (value: boolean) => void;
|
|
768
|
+
}
|
|
769
|
+
declare const noticeVariants: (props?: ({
|
|
770
|
+
variant?: "success" | "error" | "warning" | "default" | "info" | null | undefined;
|
|
771
|
+
position?: "center" | "bottom" | "top" | null | undefined;
|
|
772
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
773
|
+
declare const Notice: ({ children, variant, position, noticeTitle, open, setOpen, showIcon, }: NoticeProps) => React.JSX.Element;
|
|
774
|
+
|
|
775
|
+
interface OTPInputProps {
|
|
776
|
+
length: number;
|
|
777
|
+
onChange: (otp: string) => void;
|
|
778
|
+
type?: "text" | "password" | "number";
|
|
779
|
+
}
|
|
780
|
+
declare const OTPInput: React.FC<OTPInputProps>;
|
|
781
|
+
|
|
782
|
+
type TablePaginationProps = {
|
|
783
|
+
count: number;
|
|
784
|
+
countVariable?: string;
|
|
785
|
+
page: number;
|
|
786
|
+
rowsPerPage: number;
|
|
787
|
+
rowsPerPageOptions: (number | {
|
|
788
|
+
label: string;
|
|
789
|
+
value: number;
|
|
790
|
+
})[];
|
|
791
|
+
onPageChange: (newPage: number) => void;
|
|
792
|
+
onRowsPerPageChange: (newRowsPerPage: number) => void;
|
|
793
|
+
className?: string;
|
|
794
|
+
variant?: "primary" | "secondary";
|
|
795
|
+
itemsPerPage?: boolean;
|
|
796
|
+
};
|
|
797
|
+
declare const Pagination: React.FC<TablePaginationProps>;
|
|
798
|
+
|
|
799
|
+
type ProgressBarProps = {
|
|
800
|
+
progress: number;
|
|
801
|
+
progressText?: string;
|
|
802
|
+
progressColor: string;
|
|
803
|
+
progressTextPosition?: "top" | "bottom" | "left" | "right";
|
|
804
|
+
};
|
|
805
|
+
declare const ProgressBar: ({ progress, progressText, progressColor, progressTextPosition, }: ProgressBarProps) => React.JSX.Element;
|
|
806
|
+
|
|
807
|
+
interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof radioVariants> {
|
|
808
|
+
size?: "sm" | "lg";
|
|
809
|
+
disabled?: boolean;
|
|
810
|
+
checked?: boolean;
|
|
811
|
+
children?: never;
|
|
812
|
+
}
|
|
813
|
+
declare const radioVariants: (props?: ({
|
|
814
|
+
size?: "sm" | "lg" | null | undefined;
|
|
815
|
+
intent?: "blue" | "indigo" | "orange" | "pink" | "purple" | "violet" | "primary" | "success" | "error" | "warning" | "default" | "bluegray" | "bluelight" | "rose" | null | undefined;
|
|
816
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
817
|
+
declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
|
|
818
|
+
|
|
819
|
+
type UploadStatus = "idle" | "uploading" | "success" | "error";
|
|
820
|
+
interface UploadItem {
|
|
821
|
+
id: string;
|
|
822
|
+
file?: File;
|
|
823
|
+
name?: string;
|
|
824
|
+
size?: number;
|
|
825
|
+
progress?: number;
|
|
826
|
+
status?: UploadStatus;
|
|
827
|
+
previewUrl?: string;
|
|
828
|
+
}
|
|
829
|
+
interface FileUploadControlProps {
|
|
830
|
+
items: UploadItem[];
|
|
831
|
+
onAddFiles: (files: File[]) => void;
|
|
832
|
+
onUpdateItem?: (id: string, updates: Partial<UploadItem>) => void;
|
|
833
|
+
onRejectFiles?: (rejected: {
|
|
834
|
+
file: File;
|
|
835
|
+
reason: string;
|
|
836
|
+
}[]) => void;
|
|
837
|
+
onDelete?: (id: string) => void;
|
|
838
|
+
onRetry?: (id: string) => void;
|
|
839
|
+
onPreview?: (id: string) => void;
|
|
840
|
+
onUpload?: (file: File, onProgress: (progress: number) => void) => Promise<string>;
|
|
841
|
+
multiple?: boolean;
|
|
842
|
+
accept?: string;
|
|
843
|
+
maxSizeMB?: number;
|
|
844
|
+
className?: string;
|
|
845
|
+
hintText?: React.ReactNode;
|
|
846
|
+
showSizeText?: boolean;
|
|
847
|
+
getFileIcon?: (fileName: string, fileType: string) => React.ReactNode;
|
|
848
|
+
autoUpload?: boolean;
|
|
849
|
+
disabled?: boolean;
|
|
850
|
+
}
|
|
851
|
+
declare const defaultGetFileIcon: (fileName: string, fileType: string) => React.JSX.Element;
|
|
852
|
+
declare function FileUploadControl({ items, onAddFiles, onUpdateItem, onRejectFiles, onDelete, onRetry, onPreview, onUpload, multiple, accept, maxSizeMB, className, hintText, showSizeText, getFileIcon, autoUpload, disabled, }: FileUploadControlProps): React.JSX.Element;
|
|
853
|
+
|
|
854
|
+
interface SelectOption {
|
|
855
|
+
label: string;
|
|
856
|
+
value: string | number;
|
|
857
|
+
/** Optional. Unselectable and skipped by the keyboard. */
|
|
858
|
+
disabled?: boolean;
|
|
859
|
+
/** Optional. Secondary line under the label. */
|
|
860
|
+
description?: string;
|
|
861
|
+
/** Optional. Icon shown before the label. */
|
|
862
|
+
icon?: JSX.Element;
|
|
863
|
+
}
|
|
864
|
+
interface SelectGroup {
|
|
865
|
+
label: string;
|
|
866
|
+
options: SelectOption[];
|
|
867
|
+
}
|
|
868
|
+
interface SelectProps {
|
|
869
|
+
/** Flat options, or groups of options. */
|
|
870
|
+
options: (SelectOption | SelectGroup)[];
|
|
871
|
+
/** Controlled value. Use null for "nothing selected". */
|
|
872
|
+
value?: string | number | null;
|
|
873
|
+
/** Uncontrolled initial value. */
|
|
874
|
+
defaultValue?: string | number | null;
|
|
875
|
+
/** Called with the new value (null when cleared) and its option. */
|
|
876
|
+
onChange?: (value: string | number | null, option: SelectOption | null) => void;
|
|
877
|
+
placeholder?: string;
|
|
878
|
+
disabled?: boolean;
|
|
879
|
+
error?: boolean;
|
|
880
|
+
/** Optional. "sm" = 320px, "lg" = 313px, default = full width (same as Input). */
|
|
881
|
+
size?: "sm" | "lg";
|
|
882
|
+
/** Optional. Open the list above or below. Defaults to "bottom". */
|
|
883
|
+
placement?: "bottom" | "top";
|
|
884
|
+
/** Optional. Show a clear button when a value is selected. Defaults to false. */
|
|
885
|
+
clearable?: boolean;
|
|
886
|
+
/** Optional. Max height of the list in px. Defaults to 264. */
|
|
887
|
+
maxHeight?: number;
|
|
888
|
+
/** Optional. Text shown when options is empty. */
|
|
889
|
+
emptyText?: string;
|
|
890
|
+
id?: string;
|
|
891
|
+
/** Optional. Adds a hidden input for native forms. */
|
|
892
|
+
name?: string;
|
|
893
|
+
className?: string;
|
|
894
|
+
"aria-label"?: string;
|
|
895
|
+
"aria-describedby"?: string;
|
|
896
|
+
}
|
|
897
|
+
declare const Select: {
|
|
898
|
+
({ options, value, defaultValue, onChange, placeholder, disabled, error, size, placement, clearable, maxHeight, emptyText, id, name, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, }: SelectProps): React.JSX.Element;
|
|
899
|
+
displayName: string;
|
|
900
|
+
};
|
|
901
|
+
|
|
902
|
+
interface NavItem {
|
|
903
|
+
label: string;
|
|
904
|
+
href?: string;
|
|
905
|
+
icon?: React.ReactElement;
|
|
906
|
+
subItems?: NavItem[];
|
|
907
|
+
}
|
|
908
|
+
interface SidebarProps {
|
|
909
|
+
children: React.ReactNode;
|
|
910
|
+
collapsed: boolean;
|
|
911
|
+
setCollapsed: (collapsed: boolean) => void;
|
|
912
|
+
scroll?: boolean;
|
|
913
|
+
dense?: boolean;
|
|
914
|
+
navItems?: {
|
|
915
|
+
label: string;
|
|
916
|
+
items: NavItem[];
|
|
917
|
+
}[];
|
|
918
|
+
}
|
|
919
|
+
interface SidebarHeaderProps {
|
|
920
|
+
children: ReactNode;
|
|
921
|
+
dense?: boolean;
|
|
922
|
+
}
|
|
923
|
+
interface SidebarMenuProps {
|
|
924
|
+
collapsed: boolean;
|
|
925
|
+
navItems?: {
|
|
926
|
+
label: string;
|
|
927
|
+
items: NavItem[];
|
|
928
|
+
}[];
|
|
929
|
+
scroll?: boolean;
|
|
930
|
+
dense?: boolean;
|
|
931
|
+
}
|
|
932
|
+
interface FooterProps {
|
|
933
|
+
children: React.ReactNode;
|
|
934
|
+
collapsed: boolean;
|
|
935
|
+
setCollapsed: (collapsed: boolean) => void;
|
|
936
|
+
navItems?: {
|
|
937
|
+
label: string;
|
|
938
|
+
items: NavItem[];
|
|
939
|
+
}[];
|
|
940
|
+
dense?: boolean;
|
|
941
|
+
}
|
|
942
|
+
declare const Sidebar: React.FC<SidebarProps> & {
|
|
943
|
+
Header: React.FC<SidebarHeaderProps>;
|
|
944
|
+
Menu: React.FC<SidebarMenuProps>;
|
|
945
|
+
Footer: React.FC<FooterProps>;
|
|
946
|
+
};
|
|
947
|
+
|
|
948
|
+
interface SkeletonProps {
|
|
949
|
+
width?: string | number;
|
|
950
|
+
height?: string | number;
|
|
951
|
+
circle?: boolean;
|
|
952
|
+
animation?: "wave" | "pulse" | "shimmer";
|
|
953
|
+
}
|
|
954
|
+
declare const Skeleton: React.FC<SkeletonProps>;
|
|
955
|
+
|
|
956
|
+
interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
957
|
+
value: number;
|
|
958
|
+
min?: number;
|
|
959
|
+
max?: number;
|
|
960
|
+
size?: "sm" | "lg";
|
|
961
|
+
}
|
|
962
|
+
declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;
|
|
963
|
+
|
|
964
|
+
interface SpinnerProps {
|
|
965
|
+
size?: "xs" | "sm" | "md" | "lg";
|
|
966
|
+
color?: "primary" | "black" | "gray" | string;
|
|
967
|
+
}
|
|
968
|
+
declare const Spinner: ({ size, color }: SpinnerProps) => React.JSX.Element;
|
|
969
|
+
|
|
970
|
+
interface SplitButtonProps {
|
|
971
|
+
children: React.ReactNode;
|
|
972
|
+
className?: string;
|
|
973
|
+
size?: 'sm' | 'md' | 'lg';
|
|
974
|
+
appearance?: 'primary' | 'secondary' | 'warning' | 'danger';
|
|
975
|
+
compact?: boolean;
|
|
976
|
+
}
|
|
977
|
+
declare const SplitButton: React.ForwardRefExoticComponent<SplitButtonProps & React.RefAttributes<HTMLDivElement>>;
|
|
978
|
+
|
|
979
|
+
interface StepConfig {
|
|
980
|
+
name: string;
|
|
981
|
+
helperName?: string;
|
|
982
|
+
Component: React.ComponentType<any>;
|
|
983
|
+
}
|
|
984
|
+
interface CheckoutStepperProps {
|
|
985
|
+
stepsConfig: StepConfig[];
|
|
986
|
+
currentStep: number;
|
|
987
|
+
setCurrentStep: (step: number) => void;
|
|
988
|
+
isComplete: boolean;
|
|
989
|
+
setIsComplete: (complete: boolean) => void;
|
|
990
|
+
position?: string;
|
|
991
|
+
}
|
|
992
|
+
declare const Stepper: ({ stepsConfig, currentStep, setCurrentStep, isComplete, setIsComplete, position, }: CheckoutStepperProps) => React.JSX.Element | null;
|
|
993
|
+
|
|
994
|
+
interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
|
|
995
|
+
children?: ReactNode;
|
|
996
|
+
dense?: boolean;
|
|
997
|
+
}
|
|
998
|
+
interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
|
|
999
|
+
children?: ReactNode;
|
|
1000
|
+
}
|
|
1001
|
+
interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
|
|
1002
|
+
children?: ReactNode;
|
|
1003
|
+
indent?: boolean;
|
|
1004
|
+
}
|
|
1005
|
+
interface TableHeadCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
|
|
1006
|
+
children?: ReactNode;
|
|
1007
|
+
icon?: JSX.Element;
|
|
1008
|
+
sticky?: boolean;
|
|
1009
|
+
left?: string;
|
|
1010
|
+
right?: string;
|
|
1011
|
+
stickyIcon?: JSX.Element;
|
|
1012
|
+
shadow?: boolean;
|
|
1013
|
+
shadowRight?: boolean;
|
|
1014
|
+
}
|
|
1015
|
+
interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
|
|
1016
|
+
children?: ReactNode;
|
|
1017
|
+
icon?: JSX.Element;
|
|
1018
|
+
sticky?: boolean;
|
|
1019
|
+
left?: string;
|
|
1020
|
+
right?: string;
|
|
1021
|
+
shadow?: boolean;
|
|
1022
|
+
shadowRight?: boolean;
|
|
1023
|
+
}
|
|
1024
|
+
declare const Table: ({ children, className, dense, ...props }: TableProps) => React.JSX.Element;
|
|
1025
|
+
declare const TableHead: ({ children, className, ...props }: TableHeadProps) => React.JSX.Element;
|
|
1026
|
+
declare const TableBody: ({ children, className, ...props }: TableHeadProps) => React.JSX.Element;
|
|
1027
|
+
declare const TableRow: ({ children, className, indent, ...props }: TableRowProps) => React.JSX.Element;
|
|
1028
|
+
declare const TableHeadCell: ({ children, className, icon, sticky, shadow, left, shadowRight, right, ...props }: TableHeadCellProps) => React.JSX.Element;
|
|
1029
|
+
declare const TableDataCell: ({ children, className, icon, sticky, shadow, shadowRight, left, right, ...props }: TableCellProps) => React.JSX.Element;
|
|
1030
|
+
|
|
1031
|
+
interface TabItem {
|
|
1032
|
+
label: string;
|
|
1033
|
+
value: string;
|
|
1034
|
+
}
|
|
1035
|
+
interface TabsContainerProps {
|
|
1036
|
+
value: string;
|
|
1037
|
+
children: React.ReactNode;
|
|
1038
|
+
className?: string;
|
|
1039
|
+
position?: "horizontal" | "vertical";
|
|
1040
|
+
}
|
|
1041
|
+
interface TabListProps extends Partial<TabItem> {
|
|
1042
|
+
onChange: (value: string) => void;
|
|
1043
|
+
ariaLabel?: string;
|
|
1044
|
+
children: React.ReactNode;
|
|
1045
|
+
box?: boolean;
|
|
1046
|
+
pill?: boolean;
|
|
1047
|
+
className?: string;
|
|
1048
|
+
position?: "horizontal" | "vertical";
|
|
1049
|
+
persist?: "url" | "localStorage";
|
|
1050
|
+
persistKey?: string;
|
|
1051
|
+
}
|
|
1052
|
+
interface TabProps extends TabItem {
|
|
1053
|
+
onChange: (value: string) => void;
|
|
1054
|
+
box?: boolean;
|
|
1055
|
+
pill?: boolean;
|
|
1056
|
+
content?: React.ReactNode;
|
|
1057
|
+
selectedTabValue: string;
|
|
1058
|
+
icon?: JSX.Element;
|
|
1059
|
+
className?: string;
|
|
1060
|
+
tabIndex?: number;
|
|
1061
|
+
onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
1062
|
+
position?: "horizontal" | "vertical";
|
|
1063
|
+
ref?: React.Ref<HTMLButtonElement>;
|
|
1064
|
+
}
|
|
1065
|
+
interface TabPanelProps {
|
|
1066
|
+
value: string;
|
|
1067
|
+
currentValue: string;
|
|
1068
|
+
children: React.ReactNode;
|
|
1069
|
+
className?: string;
|
|
1070
|
+
}
|
|
1071
|
+
declare const TabsContainer: React.FC<TabsContainerProps>;
|
|
1072
|
+
declare const TabList: React.FC<TabListProps>;
|
|
1073
|
+
declare const Tab: React.ForwardRefExoticComponent<Omit<TabProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
1074
|
+
declare const TabPanel: React.FC<TabPanelProps>;
|
|
1075
|
+
|
|
1076
|
+
interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
|
|
1077
|
+
size?: "sm" | "lg";
|
|
1078
|
+
disabled?: boolean;
|
|
1079
|
+
rows?: number;
|
|
1080
|
+
cols?: number;
|
|
1081
|
+
error?: boolean;
|
|
1082
|
+
children?: ReactNode;
|
|
1083
|
+
}
|
|
1084
|
+
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
1085
|
+
|
|
1086
|
+
interface TextInputWithLabelProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
1087
|
+
intent?: "error" | "default" | "success" | "warning" | "blue" | "primary" | "bluegray" | "bluelight" | "violet" | "indigo" | "purple" | "pink" | "rose" | "orange";
|
|
1088
|
+
placeholder?: string;
|
|
1089
|
+
size?: "sm" | "lg";
|
|
1090
|
+
type?: "number" | "search" | "text" | "url" | "email" | "password" | "tel" | "time";
|
|
1091
|
+
tags: string[];
|
|
1092
|
+
setTags: (tags: string[]) => void;
|
|
1093
|
+
}
|
|
1094
|
+
declare const TextInputWithLabel: React.FC<TextInputWithLabelProps>;
|
|
1095
|
+
|
|
1096
|
+
/** Time is stored as a 24-hour "HH:mm" string, e.g. "09:30" or "17:05". */
|
|
1097
|
+
interface TimePickerProps {
|
|
1098
|
+
/** Controlled value ("HH:mm", 24-hour) or null for empty. */
|
|
1099
|
+
value?: string | null;
|
|
1100
|
+
/** Uncontrolled initial value ("HH:mm"). */
|
|
1101
|
+
defaultValue?: string | null;
|
|
1102
|
+
/** Called with "HH:mm" (24-hour) or null when cleared. */
|
|
1103
|
+
onChange?: (time: string | null) => void;
|
|
1104
|
+
/** Optional. Display and picker format. Defaults to "12h". */
|
|
1105
|
+
format?: "12h" | "24h";
|
|
1106
|
+
/** Optional. Minutes between options (1, 5, 10, 15, 30 …). Defaults to 5. */
|
|
1107
|
+
minuteStep?: number;
|
|
1108
|
+
/** Optional. Earliest selectable time ("HH:mm"). */
|
|
1109
|
+
min?: string;
|
|
1110
|
+
/** Optional. Latest selectable time ("HH:mm"). */
|
|
1111
|
+
max?: string;
|
|
1112
|
+
placeholder?: string;
|
|
1113
|
+
disabled?: boolean;
|
|
1114
|
+
error?: boolean;
|
|
1115
|
+
/** Optional. "sm" = 320px, "lg" = 313px, default = full width (same as Input). */
|
|
1116
|
+
size?: "sm" | "lg";
|
|
1117
|
+
/** Optional. Open the picker above or below the field. Defaults to "bottom". */
|
|
1118
|
+
placement?: "bottom" | "top";
|
|
1119
|
+
/** Optional. Show a clear button when a value is set. Defaults to true. */
|
|
1120
|
+
clearable?: boolean;
|
|
1121
|
+
/** Optional. Show a "Now" shortcut. Defaults to true. */
|
|
1122
|
+
showNow?: boolean;
|
|
1123
|
+
id?: string;
|
|
1124
|
+
/** Optional. Adds a hidden input ("HH:mm") for native forms. */
|
|
1125
|
+
name?: string;
|
|
1126
|
+
className?: string;
|
|
1127
|
+
"aria-label"?: string;
|
|
1128
|
+
"aria-describedby"?: string;
|
|
1129
|
+
}
|
|
1130
|
+
declare const TimePicker: {
|
|
1131
|
+
({ value, defaultValue, onChange, format, minuteStep, min, max, placeholder, disabled, error, size, placement, clearable, showNow, id, name, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, }: TimePickerProps): React.JSX.Element;
|
|
1132
|
+
displayName: string;
|
|
1133
|
+
};
|
|
1134
|
+
|
|
1135
|
+
interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof toggleVariants> {
|
|
1136
|
+
size?: "sm" | "md" | "lg";
|
|
1137
|
+
disabled?: boolean;
|
|
1138
|
+
children?: never;
|
|
1139
|
+
}
|
|
1140
|
+
declare const toggleVariants: (props?: ({
|
|
1141
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
1142
|
+
intent?: "blue" | "indigo" | "orange" | "pink" | "purple" | "violet" | "primary" | "success" | "error" | "warning" | "default" | "bluegray" | "bluelight" | "rose" | null | undefined;
|
|
1143
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1144
|
+
declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
|
|
1145
|
+
|
|
1146
|
+
declare const tooltipVariants: (props?: ({
|
|
1147
|
+
position?: "bottom" | "top" | "left" | "right" | null | undefined;
|
|
1148
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1149
|
+
interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, "content">, VariantProps<typeof tooltipVariants> {
|
|
1150
|
+
children: ReactNode;
|
|
1151
|
+
position: "top" | "right" | "bottom" | "left";
|
|
1152
|
+
content: JSX.Element | string;
|
|
1153
|
+
}
|
|
1154
|
+
declare const Tooltip: React.FC<TooltipProps>;
|
|
1155
|
+
|
|
1156
|
+
interface TreeViewProps {
|
|
1157
|
+
children: React.ReactNode;
|
|
1158
|
+
"aria-label": string;
|
|
1159
|
+
flat?: boolean;
|
|
1160
|
+
className?: string;
|
|
1161
|
+
/** Optional array of IDs to expand initially */
|
|
1162
|
+
defaultExpandedIds?: string[];
|
|
1163
|
+
/** Controlled expansion (useful if parent manages state externally) */
|
|
1164
|
+
expandedIds?: string[];
|
|
1165
|
+
/** Callback for when expanded nodes change */
|
|
1166
|
+
onExpandedChange?: (expanded: string[]) => void;
|
|
1167
|
+
/** Allow multiple nodes to be expanded simultaneously */
|
|
1168
|
+
allowMultiple?: boolean;
|
|
1169
|
+
/** Automatically expand all top-level items by default */
|
|
1170
|
+
expandTopLevelByDefault?: boolean;
|
|
1171
|
+
}
|
|
1172
|
+
interface TreeViewItemProps {
|
|
1173
|
+
id: string;
|
|
1174
|
+
children: React.ReactNode;
|
|
1175
|
+
current?: boolean;
|
|
1176
|
+
className?: string;
|
|
1177
|
+
onSelect?: (id: string) => void;
|
|
1178
|
+
level?: number;
|
|
1179
|
+
expanded?: boolean;
|
|
1180
|
+
onToggle?: (id: string) => void;
|
|
1181
|
+
selected?: boolean;
|
|
1182
|
+
flat?: boolean;
|
|
1183
|
+
}
|
|
1184
|
+
interface TreeViewSubTreeProps {
|
|
1185
|
+
children: React.ReactNode;
|
|
1186
|
+
state?: "loading";
|
|
1187
|
+
count?: number;
|
|
1188
|
+
className?: string;
|
|
1189
|
+
expanded?: boolean;
|
|
1190
|
+
flat?: boolean;
|
|
1191
|
+
}
|
|
1192
|
+
declare const TreeView: React.FC<TreeViewProps> & {
|
|
1193
|
+
Item: React.FC<TreeViewItemProps>;
|
|
1194
|
+
SubTree: typeof TreeViewSubTree;
|
|
1195
|
+
LeadingVisual: typeof TreeViewLeadingVisual;
|
|
1196
|
+
TrailingVisual: typeof TreeViewTrailingVisual;
|
|
1197
|
+
};
|
|
1198
|
+
declare const TreeViewSubTree: React.FC<TreeViewSubTreeProps>;
|
|
1199
|
+
declare const TreeViewLeadingVisual: React.FC<{
|
|
1200
|
+
children: React.ReactNode;
|
|
1201
|
+
className?: string;
|
|
1202
|
+
}>;
|
|
1203
|
+
declare const TreeViewTrailingVisual: React.FC<{
|
|
1204
|
+
children: React.ReactNode;
|
|
1205
|
+
label?: string;
|
|
1206
|
+
className?: string;
|
|
1207
|
+
}>;
|
|
1208
|
+
|
|
1209
|
+
interface TypographyProps extends HTMLAttributes<HTMLHeadingElement | HTMLParagraphElement>, VariantProps<typeof typographyVariant> {
|
|
1210
|
+
as?: ElementType;
|
|
1211
|
+
children: ReactNode;
|
|
1212
|
+
intent?: "primary" | "success" | "error" | "warning" | "default";
|
|
1213
|
+
}
|
|
1214
|
+
declare const typographyVariant: (props?: ({
|
|
1215
|
+
variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "b1" | "b2" | "b3" | "b4" | "b5" | null | undefined;
|
|
1216
|
+
intent?: "primary" | "success" | "error" | "warning" | "default" | null | undefined;
|
|
1217
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1218
|
+
declare const Typography: ({ as, variant, intent, children, className, ...props }: TypographyProps) => React.JSX.Element;
|
|
1219
|
+
|
|
1220
|
+
/**
|
|
1221
|
+
* Theme helpers for re-colouring the `primary` scale at runtime.
|
|
1222
|
+
*
|
|
1223
|
+
* Pure functions only: no `window` / `document` access, so this file is safe to
|
|
1224
|
+
* import from server components, client components and during SSR.
|
|
1225
|
+
*/
|
|
1226
|
+
declare const THEME_SHADES: readonly [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
|
1227
|
+
type ThemeShade = (typeof THEME_SHADES)[number];
|
|
1228
|
+
type ThemeScale = Record<ThemeShade, string>;
|
|
1229
|
+
/** "system" is the "Default" option: it follows the device's light/dark setting. */
|
|
1230
|
+
type ThemeMode = "light" | "dark" | "system";
|
|
1231
|
+
|
|
1232
|
+
interface ThemeContextValue {
|
|
1233
|
+
/** The brand colour currently applied, or null while the stylesheet defaults are in use. */
|
|
1234
|
+
color: string | null;
|
|
1235
|
+
/** The full 25 to 900 scale currently applied, or null while the defaults are in use. */
|
|
1236
|
+
scale: ThemeScale | null;
|
|
1237
|
+
/**
|
|
1238
|
+
* Applies `hex` as the new primary colour everywhere. Pass `options.scale`
|
|
1239
|
+
* to use an exact, pre-designed scale instead of deriving one from `hex`.
|
|
1240
|
+
* Invalid hex values are ignored.
|
|
1241
|
+
*/
|
|
1242
|
+
setThemeColor: (hex: string, options?: {
|
|
1243
|
+
scale?: ThemeScale;
|
|
1244
|
+
}) => void;
|
|
1245
|
+
/** Goes back to `defaultColor` (or the stylesheet defaults) and clears the saved choice. */
|
|
1246
|
+
resetTheme: () => void;
|
|
1247
|
+
/** The user's choice: "light", "dark" or "system" (the "Default" option). */
|
|
1248
|
+
mode: ThemeMode;
|
|
1249
|
+
/** What is actually shown. Differs from `mode` only when `mode` is "system". */
|
|
1250
|
+
resolvedMode: "light" | "dark";
|
|
1251
|
+
/** Changes the mode and remembers it. */
|
|
1252
|
+
setMode: (mode: ThemeMode) => void;
|
|
1253
|
+
}
|
|
1254
|
+
interface ThemeProviderProps {
|
|
1255
|
+
children: ReactNode;
|
|
1256
|
+
/**
|
|
1257
|
+
* Optional starting brand colour (hex). It is rendered on the server, so
|
|
1258
|
+
* there is no flash. Leave it out to keep the colours from globals.css.
|
|
1259
|
+
*/
|
|
1260
|
+
defaultColor?: string;
|
|
1261
|
+
/**
|
|
1262
|
+
* localStorage key used to remember the user's choice. Pass `null` to turn
|
|
1263
|
+
* persistence off. Defaults to "picaso-ui-theme".
|
|
1264
|
+
*/
|
|
1265
|
+
storageKey?: string | null;
|
|
1266
|
+
/** CSP nonce for the injected <style> element. */
|
|
1267
|
+
nonce?: string;
|
|
1268
|
+
/**
|
|
1269
|
+
* Starting mode before the user chooses one. Defaults to "system", which
|
|
1270
|
+
* follows the device setting.
|
|
1271
|
+
*/
|
|
1272
|
+
defaultMode?: ThemeMode;
|
|
1273
|
+
}
|
|
1274
|
+
/**
|
|
1275
|
+
* Re-colours every component that uses the `primary` scale.
|
|
1276
|
+
*
|
|
1277
|
+
* Renders no wrapper element, so it does not change the DOM your app already
|
|
1278
|
+
* has. Place it around the existing `theme-primary` container:
|
|
1279
|
+
*
|
|
1280
|
+
* ```tsx
|
|
1281
|
+
* <ThemeProvider>
|
|
1282
|
+
* <div className="theme-primary">{children}</div>
|
|
1283
|
+
* </ThemeProvider>
|
|
1284
|
+
* ```
|
|
1285
|
+
*/
|
|
1286
|
+
declare const ThemeProvider: {
|
|
1287
|
+
({ children, defaultColor, storageKey, nonce, defaultMode, }: ThemeProviderProps): React.JSX.Element;
|
|
1288
|
+
displayName: string;
|
|
1289
|
+
};
|
|
1290
|
+
declare const useTheme: () => ThemeContextValue;
|
|
1291
|
+
|
|
1292
|
+
interface ThemeColorPickerProps extends Omit<ColorPickerProps, "value" | "defaultValue" | "onChange" | "name"> {
|
|
1293
|
+
/** Called after the theme has been updated, with the same arguments as ColorPicker. */
|
|
1294
|
+
onChange?: (value: string, token?: ColorPickerToken) => void;
|
|
1295
|
+
/** Show a "Reset to default" button once the theme has been changed. Defaults to true. */
|
|
1296
|
+
showReset?: boolean;
|
|
1297
|
+
}
|
|
1298
|
+
/**
|
|
1299
|
+
* A ColorPicker that re-colours the whole library. Everything that uses the
|
|
1300
|
+
* `primary` scale (buttons, inputs, focus rings, tabs, toggles, ...) updates
|
|
1301
|
+
* as soon as a colour is chosen.
|
|
1302
|
+
*
|
|
1303
|
+
* - Choosing a swatch at shade 600 from a family (e.g. Purple 600) applies that
|
|
1304
|
+
* family's complete, hand-tuned scale.
|
|
1305
|
+
* - Choosing any other swatch, or typing / picking a custom hex, makes that
|
|
1306
|
+
* colour the main brand colour (`primary-600`) and derives the other shades.
|
|
1307
|
+
*
|
|
1308
|
+
* Must be rendered inside `<ThemeProvider>`.
|
|
1309
|
+
*/
|
|
1310
|
+
declare const ThemeColorPicker: {
|
|
1311
|
+
({ onChange, showReset, className, placeholder, ...props }: ThemeColorPickerProps): React.JSX.Element;
|
|
1312
|
+
displayName: string;
|
|
1313
|
+
};
|
|
1314
|
+
|
|
1315
|
+
interface ThemeModeSwitchProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "children"> {
|
|
1316
|
+
/** Called after the mode has been changed. */
|
|
1317
|
+
onChange?: (mode: ThemeMode) => void;
|
|
1318
|
+
/** Show the text next to each icon. Set to false for a compact, icon-only switch. Defaults to true. */
|
|
1319
|
+
showLabels?: boolean;
|
|
1320
|
+
}
|
|
1321
|
+
/**
|
|
1322
|
+
* Light / Dark / Default switch. "Default" follows the device setting and
|
|
1323
|
+
* updates live if the device changes. Must be rendered inside `<ThemeProvider>`.
|
|
1324
|
+
*/
|
|
1325
|
+
declare const ThemeModeSwitch: {
|
|
1326
|
+
({ onChange, showLabels, className, "aria-label": ariaLabel, ...props }: ThemeModeSwitchProps): React.JSX.Element;
|
|
1327
|
+
displayName: string;
|
|
1328
|
+
};
|
|
1329
|
+
|
|
1330
|
+
interface ThemeScriptProps {
|
|
1331
|
+
/** Must match `ThemeProvider`'s `defaultMode`. Defaults to "system". */
|
|
1332
|
+
defaultMode?: ThemeMode;
|
|
1333
|
+
/** Must match `ThemeProvider`'s `storageKey`. Defaults to "picaso-ui-theme". Pass `null` if persistence is off. */
|
|
1334
|
+
storageKey?: string | null;
|
|
1335
|
+
/** CSP nonce for the inline script. */
|
|
1336
|
+
nonce?: string;
|
|
1337
|
+
}
|
|
1338
|
+
/**
|
|
1339
|
+
* Optional. Put it in <head> to apply the saved light/dark mode before the
|
|
1340
|
+
* page paints, so a dark-mode user never sees a white flash on reload.
|
|
1341
|
+
* It is a server component (no hooks, no browser APIs at render time).
|
|
1342
|
+
*
|
|
1343
|
+
* The script changes an attribute on <html> before React hydrates, so add
|
|
1344
|
+
* `suppressHydrationWarning` to your <html> tag.
|
|
1345
|
+
*/
|
|
1346
|
+
declare const ThemeScript: ({ defaultMode, storageKey, nonce, }: ThemeScriptProps) => React.JSX.Element;
|
|
1347
|
+
|
|
1348
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarGroup, Breadcrumbs as BreadCrumb, Button, Calendar, type CalendarProps, type CalendarRange, Callout, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, CircularProgressBar as CircularProgress, type ColorFamily, ColorPicker, type ColorPickerProps, type ColorPickerToken, type ColorShade, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, DateTimePicker, type DateTimePickerProps, Divider, Drawer, Dropdown, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownWithIcon, FileSelector, FileUpload, FileUploadControl, FileUploadPreview, GlobalNavigation, HelperText, Input, Label, ListPagination, Loading, Modal, Notice, OTPInput, Pagination, ProgressBar, Radio, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, Skeleton, Slider, Spinner, SplitButton, Stepper, Tab, TabList, TabPanel, Table, TableBody, TableDataCell, TableHead, TableHeadCell, TableRow, TabsContainer, TextInputWithLabel, Textarea, ThemeColorPicker, type ThemeColorPickerProps, type ThemeContextValue, type ThemeMode, ThemeModeSwitch, type ThemeModeSwitchProps, ThemeProvider, type ThemeProviderProps, type ThemeScale, ThemeScript, type ThemeScriptProps, type ThemeShade, TimePicker, type TimePickerProps, Toggle, Tooltip, TreeView, Typography, defaultGetFileIcon, getDefaultRangePresets, useTheme };
|