@raydenui/ui 0.7.0 → 0.9.1
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 +15 -373
- package/dist/icons.cjs +196 -196
- package/dist/icons.js +196 -196
- package/dist/index.cjs +2790 -345
- package/dist/index.d.cts +354 -11
- package/dist/index.d.ts +354 -11
- package/dist/index.js +2771 -346
- package/dist/preset.cjs +20 -2
- package/dist/preset.d.cts +26 -4
- package/dist/preset.d.ts +26 -4
- package/dist/preset.js +20 -3
- package/dist/styles.css +1 -1
- package/package.json +29 -20
package/dist/index.d.cts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { SVGAttributes,
|
|
2
|
+
import { SVGAttributes, HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
|
|
3
3
|
import { IconVariant, IconName, IconRecord } from './icons.cjs';
|
|
4
4
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
|
+
import { ChartData, ChartOptions } from 'chart.js';
|
|
5
6
|
import { ClassValue } from 'clsx';
|
|
6
7
|
import { FieldValues, FieldPath, UseFormReturn, UseFormRegisterReturn } from 'react-hook-form';
|
|
7
8
|
|
|
@@ -27,6 +28,44 @@ interface IconByDataProps extends BaseIconProps {
|
|
|
27
28
|
type IconProps = IconByNameProps | IconByDataProps;
|
|
28
29
|
declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
|
|
29
30
|
|
|
31
|
+
type AccordionType = "default" | "nested";
|
|
32
|
+
interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
|
|
33
|
+
/** Visual type: default (border-bottom) or nested (full border with rounded corners) */
|
|
34
|
+
type?: AccordionType;
|
|
35
|
+
/** Allow multiple items open simultaneously */
|
|
36
|
+
multiple?: boolean;
|
|
37
|
+
/** Controlled open item keys */
|
|
38
|
+
value?: string[];
|
|
39
|
+
/** Default open item keys (uncontrolled) */
|
|
40
|
+
defaultValue?: string[];
|
|
41
|
+
/** Callback when open items change */
|
|
42
|
+
onValueChange?: (value: string[]) => void;
|
|
43
|
+
}
|
|
44
|
+
interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
45
|
+
/** Unique key for this item */
|
|
46
|
+
value: string;
|
|
47
|
+
/** Whether this item is disabled */
|
|
48
|
+
disabled?: boolean;
|
|
49
|
+
}
|
|
50
|
+
interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {
|
|
51
|
+
/** Leading icon (left side) */
|
|
52
|
+
leadingIcon?: ReactNode | IconName;
|
|
53
|
+
/** Leading number badge */
|
|
54
|
+
leadingNumber?: string;
|
|
55
|
+
/** Leading logo element */
|
|
56
|
+
leadingLogo?: ReactNode;
|
|
57
|
+
/** Badge counter value */
|
|
58
|
+
badge?: number | string;
|
|
59
|
+
/** Hide the chevron indicator */
|
|
60
|
+
hideChevron?: boolean;
|
|
61
|
+
}
|
|
62
|
+
interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
63
|
+
}
|
|
64
|
+
declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
|
|
65
|
+
declare const AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
|
|
66
|
+
declare const AccordionTrigger: react.ForwardRefExoticComponent<AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
67
|
+
declare const AccordionContent: react.ForwardRefExoticComponent<AccordionContentProps & react.RefAttributes<HTMLDivElement>>;
|
|
68
|
+
|
|
30
69
|
type ButtonVariant = "primary" | "secondary" | "grey" | "destructive" | "text" | "success" | "warning" | "info";
|
|
31
70
|
type ButtonAppearance = "solid" | "outlined";
|
|
32
71
|
type ButtonSize = "sm" | "lg";
|
|
@@ -52,7 +91,7 @@ interface ButtonGroupItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
52
91
|
}
|
|
53
92
|
declare const ButtonGroupItem: react.ForwardRefExoticComponent<ButtonGroupItemProps & react.RefAttributes<HTMLButtonElement>>;
|
|
54
93
|
|
|
55
|
-
type InputSize = "sm" | "lg";
|
|
94
|
+
type InputSize = "xs" | "sm" | "md" | "lg";
|
|
56
95
|
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
57
96
|
/** Input size variant */
|
|
58
97
|
size?: InputSize;
|
|
@@ -70,21 +109,29 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">
|
|
|
70
109
|
trailingIcon?: ReactNode | IconName;
|
|
71
110
|
/** Text addon on the right side */
|
|
72
111
|
addonRight?: string;
|
|
112
|
+
/** Leading addon element (e.g. dropdown, button). Renders as a separated section before the input. */
|
|
113
|
+
leadingAddon?: ReactNode;
|
|
114
|
+
/** Trailing addon element (e.g. button). Renders as a separated section after the input. */
|
|
115
|
+
trailingAddon?: ReactNode;
|
|
73
116
|
/** Wrapper className */
|
|
74
117
|
wrapperClassName?: string;
|
|
75
118
|
}
|
|
76
119
|
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
|
|
77
120
|
|
|
78
|
-
type TabsVariant = "line" | "pill";
|
|
121
|
+
type TabsVariant = "line" | "pill" | "segmented";
|
|
122
|
+
type TabsSize = "sm" | "md" | "lg";
|
|
123
|
+
type TabsOrientation = "horizontal" | "vertical";
|
|
79
124
|
interface TabsProps {
|
|
80
125
|
variant?: TabsVariant;
|
|
126
|
+
size?: TabsSize;
|
|
127
|
+
orientation?: TabsOrientation;
|
|
81
128
|
value?: string;
|
|
82
129
|
defaultValue?: string;
|
|
83
130
|
onValueChange?: (value: string) => void;
|
|
84
131
|
children: ReactNode;
|
|
85
132
|
className?: string;
|
|
86
133
|
}
|
|
87
|
-
declare function Tabs({ variant, value, defaultValue, onValueChange, children, className, }: TabsProps): react_jsx_runtime.JSX.Element;
|
|
134
|
+
declare function Tabs({ variant, size, orientation, value, defaultValue, onValueChange, children, className, }: TabsProps): react_jsx_runtime.JSX.Element;
|
|
88
135
|
|
|
89
136
|
interface TabProps {
|
|
90
137
|
value: string;
|
|
@@ -96,6 +143,110 @@ interface TabProps {
|
|
|
96
143
|
}
|
|
97
144
|
declare function Tab({ value, icon, badge, disabled, children, className }: TabProps): react_jsx_runtime.JSX.Element;
|
|
98
145
|
|
|
146
|
+
/**
|
|
147
|
+
* Rayna UI chart theme — color palette and defaults for Chart.js components.
|
|
148
|
+
*/
|
|
149
|
+
declare const chartColors: {
|
|
150
|
+
readonly primary: readonly ["#F56630", "#FA9874", "#FCB59A", "#FCD2C2", "#FFECE5"];
|
|
151
|
+
readonly semantic: readonly ["#F56630", "#0F973D", "#1671D9", "#F3A218", "#D42620", "#0BA5EC"];
|
|
152
|
+
readonly extended: readonly ["#F56630", "#0F973D", "#1671D9", "#F3A218", "#D42620", "#0BA5EC", "#475CCC", "#8D8484", "#F77A4A", "#40B869"];
|
|
153
|
+
readonly grey: {
|
|
154
|
+
readonly 50: "#F9FAFB";
|
|
155
|
+
readonly 100: "#F0F2F5";
|
|
156
|
+
readonly 200: "#E4E7EC";
|
|
157
|
+
readonly 300: "#D0D5DD";
|
|
158
|
+
readonly 400: "#98A2B3";
|
|
159
|
+
readonly 500: "#667185";
|
|
160
|
+
readonly 700: "#344054";
|
|
161
|
+
readonly 900: "#101928";
|
|
162
|
+
};
|
|
163
|
+
};
|
|
164
|
+
/** Default font for Chart.js */
|
|
165
|
+
declare const chartFont: {
|
|
166
|
+
family: string;
|
|
167
|
+
size: number;
|
|
168
|
+
weight: "normal";
|
|
169
|
+
};
|
|
170
|
+
/** Create an rgba version of a hex color */
|
|
171
|
+
declare function hexToRgba(hex: string, alpha: number): string;
|
|
172
|
+
/** Generate a gradient fill for area charts */
|
|
173
|
+
declare function createGradientFill(ctx: CanvasRenderingContext2D, color: string, height: number): CanvasGradient;
|
|
174
|
+
|
|
175
|
+
type ChartType = "line" | "bar" | "pie" | "doughnut" | "radar" | "scatter" | "bubble" | "polar-area";
|
|
176
|
+
interface RaydenChartProps extends HTMLAttributes<HTMLDivElement> {
|
|
177
|
+
/** Chart type */
|
|
178
|
+
type: ChartType;
|
|
179
|
+
/** Chart.js data object */
|
|
180
|
+
data: ChartData<any>;
|
|
181
|
+
/** Chart.js options (merged with Rayna defaults) */
|
|
182
|
+
options?: ChartOptions<any>;
|
|
183
|
+
/** Chart height */
|
|
184
|
+
height?: number;
|
|
185
|
+
/** Chart width */
|
|
186
|
+
width?: number;
|
|
187
|
+
}
|
|
188
|
+
declare const RaydenChart: react.ForwardRefExoticComponent<RaydenChartProps & react.RefAttributes<HTMLDivElement>>;
|
|
189
|
+
|
|
190
|
+
type CounterSize = "sm" | "md" | "lg";
|
|
191
|
+
type CounterShape = "rounded" | "block" | "pill";
|
|
192
|
+
interface CounterProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
193
|
+
/** Current value */
|
|
194
|
+
value?: number;
|
|
195
|
+
/** Called when value changes */
|
|
196
|
+
onChange?: (value: number) => void;
|
|
197
|
+
/** Default value (uncontrolled) */
|
|
198
|
+
defaultValue?: number;
|
|
199
|
+
/** Size variant */
|
|
200
|
+
size?: CounterSize;
|
|
201
|
+
/** Shape of the container */
|
|
202
|
+
shape?: CounterShape;
|
|
203
|
+
/** Minimum allowed value */
|
|
204
|
+
min?: number;
|
|
205
|
+
/** Maximum allowed value */
|
|
206
|
+
max?: number;
|
|
207
|
+
/** Step increment */
|
|
208
|
+
step?: number;
|
|
209
|
+
/** Disabled state */
|
|
210
|
+
disabled?: boolean;
|
|
211
|
+
}
|
|
212
|
+
type NumberCounterSize = "sm" | "md" | "lg";
|
|
213
|
+
type NumberCounterColor = "orange" | "red" | "grey" | "white";
|
|
214
|
+
interface NumberCounterProps extends HTMLAttributes<HTMLDivElement> {
|
|
215
|
+
/** Display value */
|
|
216
|
+
value: number | string;
|
|
217
|
+
/** Size */
|
|
218
|
+
size?: NumberCounterSize;
|
|
219
|
+
/** Background color */
|
|
220
|
+
color?: NumberCounterColor;
|
|
221
|
+
}
|
|
222
|
+
declare const Counter: react.ForwardRefExoticComponent<CounterProps & react.RefAttributes<HTMLDivElement>>;
|
|
223
|
+
declare const NumberCounter: react.ForwardRefExoticComponent<NumberCounterProps & react.RefAttributes<HTMLDivElement>>;
|
|
224
|
+
|
|
225
|
+
type DatePickerMode = "single" | "range" | "year";
|
|
226
|
+
interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
227
|
+
/** Picker mode */
|
|
228
|
+
mode?: DatePickerMode;
|
|
229
|
+
/** Selected date (single/year mode) */
|
|
230
|
+
value?: Date | null;
|
|
231
|
+
/** Selected range (range mode) */
|
|
232
|
+
rangeValue?: [Date | null, Date | null];
|
|
233
|
+
/** Called when a single date is selected */
|
|
234
|
+
onChange?: (date: Date | null) => void;
|
|
235
|
+
/** Called when a date range is selected */
|
|
236
|
+
onRangeChange?: (range: [Date | null, Date | null]) => void;
|
|
237
|
+
/** Show footer with Clear/Done buttons */
|
|
238
|
+
showFooter?: boolean;
|
|
239
|
+
/** Called when Done is clicked */
|
|
240
|
+
onDone?: () => void;
|
|
241
|
+
/** Called when Clear is clicked */
|
|
242
|
+
onClear?: () => void;
|
|
243
|
+
/** Disable dates before this */
|
|
244
|
+
minDate?: Date;
|
|
245
|
+
/** Disable dates after this */
|
|
246
|
+
maxDate?: Date;
|
|
247
|
+
}
|
|
248
|
+
declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLDivElement>>;
|
|
249
|
+
|
|
99
250
|
interface ChipProps extends HTMLAttributes<HTMLDivElement> {
|
|
100
251
|
variant?: "input" | "filter";
|
|
101
252
|
icon?: ReactNode | IconName;
|
|
@@ -105,23 +256,66 @@ interface ChipProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
105
256
|
}
|
|
106
257
|
declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLDivElement>>;
|
|
107
258
|
|
|
108
|
-
type ProgressBarSize = "sm" | "lg";
|
|
259
|
+
type ProgressBarSize = "sm" | "md" | "lg";
|
|
260
|
+
type ProgressBarType = "basic" | "segmented";
|
|
109
261
|
interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
|
|
262
|
+
/** Progress value from 0 to 100 */
|
|
110
263
|
value?: number;
|
|
264
|
+
/** Bar height: sm (4px), md (8px), lg (12px) */
|
|
111
265
|
size?: ProgressBarSize;
|
|
266
|
+
/** Bar type: basic (continuous) or segmented (10 discrete bars) */
|
|
267
|
+
type?: ProgressBarType;
|
|
268
|
+
/** Label text above the bar */
|
|
112
269
|
label?: string;
|
|
113
|
-
|
|
270
|
+
/** Metadata text(s) below the bar. Pass an array for dot-separated items. */
|
|
271
|
+
metadata?: string | string[];
|
|
272
|
+
/** Show percentage text */
|
|
114
273
|
showPercentage?: boolean;
|
|
274
|
+
/** Position of the percentage text */
|
|
275
|
+
percentagePosition?: "top" | "bottom";
|
|
115
276
|
}
|
|
116
|
-
declare function ProgressBar({ value, size, label, metadata, showPercentage, className, ...rest }: ProgressBarProps): react_jsx_runtime.JSX.Element;
|
|
277
|
+
declare function ProgressBar({ value, size, type, label, metadata, showPercentage, percentagePosition, className, ...rest }: ProgressBarProps): react_jsx_runtime.JSX.Element;
|
|
117
278
|
|
|
118
279
|
type ProgressCircleSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
280
|
+
type ProgressCircleStyle = "default" | "segmented";
|
|
119
281
|
interface ProgressCircleProps extends HTMLAttributes<HTMLDivElement> {
|
|
282
|
+
/** Progress value from 0 to 100 */
|
|
120
283
|
value?: number;
|
|
284
|
+
/** Circle size */
|
|
121
285
|
size?: ProgressCircleSize;
|
|
286
|
+
/** Visual style: default (continuous) or segmented (dashed) */
|
|
287
|
+
variant?: ProgressCircleStyle;
|
|
288
|
+
/** Show percentage text in the center */
|
|
122
289
|
showText?: boolean;
|
|
123
290
|
}
|
|
124
|
-
declare function ProgressCircle({ value, size, showText, className, ...rest }: ProgressCircleProps): react_jsx_runtime.JSX.Element;
|
|
291
|
+
declare function ProgressCircle({ value, size, variant, showText, className, ...rest }: ProgressCircleProps): react_jsx_runtime.JSX.Element;
|
|
292
|
+
|
|
293
|
+
type BannerStatus = "information" | "success" | "error" | "warning" | "feature" | "opportunity";
|
|
294
|
+
type BannerEmphasis = "bold" | "subtle";
|
|
295
|
+
type BannerSize = "sm" | "lg";
|
|
296
|
+
interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
297
|
+
/** Status determines the color scheme */
|
|
298
|
+
status?: BannerStatus;
|
|
299
|
+
/** Bold uses a solid background with white text; subtle uses a light tinted background */
|
|
300
|
+
emphasis?: BannerEmphasis;
|
|
301
|
+
/** sm (40px) or lg (48px) */
|
|
302
|
+
size?: BannerSize;
|
|
303
|
+
/** Headline text */
|
|
304
|
+
title: string;
|
|
305
|
+
/** Optional description text */
|
|
306
|
+
description?: string;
|
|
307
|
+
/** Optional leading icon */
|
|
308
|
+
icon?: ReactNode | IconName;
|
|
309
|
+
/** Optional action button label */
|
|
310
|
+
buttonLabel?: string;
|
|
311
|
+
/** Called when the action button is clicked */
|
|
312
|
+
onButtonClick?: () => void;
|
|
313
|
+
/** Show the close button */
|
|
314
|
+
dismissible?: boolean;
|
|
315
|
+
/** Called when the close button is clicked */
|
|
316
|
+
onDismiss?: () => void;
|
|
317
|
+
}
|
|
318
|
+
declare const Banner: react.ForwardRefExoticComponent<BannerProps & react.RefAttributes<HTMLDivElement>>;
|
|
125
319
|
|
|
126
320
|
type BadgeColor = "orange" | "blue" | "success" | "warning" | "error" | "neutral" | "disabled";
|
|
127
321
|
type BadgeType = "filled" | "accent" | "outline";
|
|
@@ -212,7 +406,9 @@ interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"
|
|
|
212
406
|
}
|
|
213
407
|
declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
|
|
214
408
|
|
|
409
|
+
type BreadcrumbSeparator = "chevron" | "double-chevron" | "slash";
|
|
215
410
|
interface BreadcrumbItem {
|
|
411
|
+
/** Display label (use "..." for truncated items) */
|
|
216
412
|
label: string;
|
|
217
413
|
href?: string;
|
|
218
414
|
icon?: ReactNode | IconName;
|
|
@@ -221,9 +417,12 @@ interface BreadcrumbItem {
|
|
|
221
417
|
}
|
|
222
418
|
interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
|
|
223
419
|
items: BreadcrumbItem[];
|
|
224
|
-
|
|
420
|
+
/** Separator style between items */
|
|
421
|
+
separator?: BreadcrumbSeparator;
|
|
422
|
+
/** Show top and bottom borders */
|
|
423
|
+
hasBorders?: boolean;
|
|
225
424
|
}
|
|
226
|
-
declare function Breadcrumb({ items, separator, className, ...rest }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
|
|
425
|
+
declare function Breadcrumb({ items, separator, hasBorders, className, ...rest }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
|
|
227
426
|
|
|
228
427
|
type AvatarType = "image" | "icon" | "initials";
|
|
229
428
|
type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
|
|
@@ -254,6 +453,43 @@ interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
254
453
|
}
|
|
255
454
|
declare const AvatarGroup: react.ForwardRefExoticComponent<AvatarGroupProps & react.RefAttributes<HTMLDivElement>>;
|
|
256
455
|
|
|
456
|
+
type ModalSize = "sm" | "md" | "lg";
|
|
457
|
+
interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
|
|
458
|
+
/** Whether the modal is open */
|
|
459
|
+
open: boolean;
|
|
460
|
+
/** Called when the modal should close */
|
|
461
|
+
onClose: () => void;
|
|
462
|
+
/** Modal width: sm (400px), md (500px), lg (640px) */
|
|
463
|
+
size?: ModalSize;
|
|
464
|
+
/** Title text */
|
|
465
|
+
title?: string;
|
|
466
|
+
/** Description text below the title */
|
|
467
|
+
description?: string;
|
|
468
|
+
/** Leading icon element */
|
|
469
|
+
icon?: ReactNode;
|
|
470
|
+
/** Show close button in header */
|
|
471
|
+
showClose?: boolean;
|
|
472
|
+
/** Primary action button label */
|
|
473
|
+
primaryLabel?: string;
|
|
474
|
+
/** Called when primary button is clicked */
|
|
475
|
+
onPrimaryClick?: () => void;
|
|
476
|
+
/** Secondary action button label */
|
|
477
|
+
secondaryLabel?: string;
|
|
478
|
+
/** Called when secondary button is clicked */
|
|
479
|
+
onSecondaryClick?: () => void;
|
|
480
|
+
/** Footer button layout */
|
|
481
|
+
footerOrientation?: "horizontal" | "vertical";
|
|
482
|
+
/** Close on overlay click */
|
|
483
|
+
closeOnOverlay?: boolean;
|
|
484
|
+
/** Close on Escape key */
|
|
485
|
+
closeOnEscape?: boolean;
|
|
486
|
+
/** Show backdrop blur on overlay */
|
|
487
|
+
blur?: boolean;
|
|
488
|
+
/** Modal body content */
|
|
489
|
+
children?: ReactNode;
|
|
490
|
+
}
|
|
491
|
+
declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<HTMLDivElement>>;
|
|
492
|
+
|
|
257
493
|
type MetricsCardVariation = "1" | "2" | "3" | "4" | "5" | "6";
|
|
258
494
|
type MetricsCardTrend = "up" | "down";
|
|
259
495
|
interface MetricsCardTrendBadge {
|
|
@@ -518,6 +754,113 @@ interface DropdownMenuSeparatorProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
518
754
|
}
|
|
519
755
|
declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>>;
|
|
520
756
|
|
|
757
|
+
type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
|
|
758
|
+
type SpinnerType = "thin" | "bold" | "duo-tone" | "buffering-thin" | "buffering-bold" | "dot" | "juggling";
|
|
759
|
+
type SpinnerStyle = "brand" | "white";
|
|
760
|
+
type SpinnerLabelPosition = "after" | "before" | "above" | "below";
|
|
761
|
+
interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
|
|
762
|
+
/** Spinner animation type */
|
|
763
|
+
type?: SpinnerType;
|
|
764
|
+
/** Spinner size */
|
|
765
|
+
size?: SpinnerSize;
|
|
766
|
+
/** Color style */
|
|
767
|
+
colorStyle?: SpinnerStyle;
|
|
768
|
+
/** Loading text */
|
|
769
|
+
label?: string;
|
|
770
|
+
/** Label position relative to spinner */
|
|
771
|
+
labelPosition?: SpinnerLabelPosition;
|
|
772
|
+
}
|
|
773
|
+
declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLDivElement>>;
|
|
774
|
+
|
|
775
|
+
type StepperOrientation = "horizontal" | "vertical";
|
|
776
|
+
type StepStatus = "completed" | "active" | "incomplete" | "disabled";
|
|
777
|
+
type StepIndicator = "dot" | "number" | "icon";
|
|
778
|
+
interface StepItem {
|
|
779
|
+
/** Step title */
|
|
780
|
+
title: string;
|
|
781
|
+
/** Optional description */
|
|
782
|
+
description?: string;
|
|
783
|
+
/** Step status */
|
|
784
|
+
status?: StepStatus;
|
|
785
|
+
/** Custom icon for completed or active state */
|
|
786
|
+
icon?: ReactNode;
|
|
787
|
+
}
|
|
788
|
+
interface StepperProps extends HTMLAttributes<HTMLDivElement> {
|
|
789
|
+
/** Array of step items */
|
|
790
|
+
steps: StepItem[];
|
|
791
|
+
/** Current active step index (0-based). Overrides individual step statuses. */
|
|
792
|
+
activeStep?: number;
|
|
793
|
+
/** Layout direction */
|
|
794
|
+
orientation?: StepperOrientation;
|
|
795
|
+
/** Indicator style inside the step circle */
|
|
796
|
+
indicator?: StepIndicator;
|
|
797
|
+
}
|
|
798
|
+
interface LinearStepperProps extends HTMLAttributes<HTMLDivElement> {
|
|
799
|
+
/** Current step (1-based) */
|
|
800
|
+
currentStep: number;
|
|
801
|
+
/** Total number of steps */
|
|
802
|
+
totalSteps: number;
|
|
803
|
+
/** Show the step counter label */
|
|
804
|
+
showLabel?: boolean;
|
|
805
|
+
}
|
|
806
|
+
interface SegmentedStepperProps extends HTMLAttributes<HTMLDivElement> {
|
|
807
|
+
/** Current step (1-based) */
|
|
808
|
+
currentStep: number;
|
|
809
|
+
/** Total number of steps */
|
|
810
|
+
totalSteps: number;
|
|
811
|
+
/** Show the step counter label */
|
|
812
|
+
showLabel?: boolean;
|
|
813
|
+
}
|
|
814
|
+
declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLDivElement>>;
|
|
815
|
+
declare const LinearStepper: react.ForwardRefExoticComponent<LinearStepperProps & react.RefAttributes<HTMLDivElement>>;
|
|
816
|
+
declare const SegmentedStepper: react.ForwardRefExoticComponent<SegmentedStepperProps & react.RefAttributes<HTMLDivElement>>;
|
|
817
|
+
|
|
818
|
+
type SliderSize = "sm" | "md" | "lg";
|
|
819
|
+
interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
820
|
+
/** Current value (0–100) */
|
|
821
|
+
value?: number;
|
|
822
|
+
/** Called when value changes */
|
|
823
|
+
onChange?: (value: number) => void;
|
|
824
|
+
/** Track/handle size */
|
|
825
|
+
size?: SliderSize;
|
|
826
|
+
/** Label above the slider */
|
|
827
|
+
label?: string;
|
|
828
|
+
/** Metadata text(s) below the slider */
|
|
829
|
+
metadata?: string | string[];
|
|
830
|
+
/** Show percentage text */
|
|
831
|
+
showPercentage?: boolean;
|
|
832
|
+
/** Minimum value */
|
|
833
|
+
min?: number;
|
|
834
|
+
/** Maximum value */
|
|
835
|
+
max?: number;
|
|
836
|
+
/** Step increment */
|
|
837
|
+
step?: number;
|
|
838
|
+
/** Disabled state */
|
|
839
|
+
disabled?: boolean;
|
|
840
|
+
}
|
|
841
|
+
interface RangeSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
842
|
+
/** Current range [low, high] (0–100) */
|
|
843
|
+
value?: [number, number];
|
|
844
|
+
/** Called when range changes */
|
|
845
|
+
onChange?: (value: [number, number]) => void;
|
|
846
|
+
/** Track/handle size */
|
|
847
|
+
size?: SliderSize;
|
|
848
|
+
/** Label above the slider */
|
|
849
|
+
label?: string;
|
|
850
|
+
/** Show min/max labels below */
|
|
851
|
+
showLabels?: boolean;
|
|
852
|
+
/** Minimum value */
|
|
853
|
+
min?: number;
|
|
854
|
+
/** Maximum value */
|
|
855
|
+
max?: number;
|
|
856
|
+
/** Step increment */
|
|
857
|
+
step?: number;
|
|
858
|
+
/** Disabled state */
|
|
859
|
+
disabled?: boolean;
|
|
860
|
+
}
|
|
861
|
+
declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLDivElement>>;
|
|
862
|
+
declare const RangeSlider: react.ForwardRefExoticComponent<RangeSliderProps & react.RefAttributes<HTMLDivElement>>;
|
|
863
|
+
|
|
521
864
|
interface SelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
|
|
522
865
|
/** Controlled value */
|
|
523
866
|
value?: string;
|
|
@@ -809,4 +1152,4 @@ declare function useRaydenRadio<TFieldValues extends FieldValues = FieldValues,
|
|
|
809
1152
|
value: string;
|
|
810
1153
|
}): UseRaydenRadioReturn<TName>;
|
|
811
1154
|
|
|
812
|
-
export { ActivityContent, type ActivityContentAction, type ActivityContentAttachment, type ActivityContentProps, type ActivityContentStyle, type ActivityContentVariant, ActivityItem, type ActivityItemLink, type ActivityItemProps, Alert, type AlertAction, type AlertProps, type AlertState, type AlertVariant, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarGroupSize, type AvatarProps, type AvatarSize, type AvatarStatus, type AvatarType, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeType, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAppearance, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, Divider, type DividerProps, type DividerVariant, type DropZoneState, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyStateIllustration, type EmptyStateIllustrationProps, FileUpload, FileUploadDropZone, type FileUploadDropZoneProps, type FileUploadFileData, FileUploadItem, type FileUploadItemProps, type FileUploadItemStatus, type FileUploadProps, Icon, IconName, type IconProps, type IconSize, IconVariant, type IllustrationName, Input, type InputProps, type InputSize, MetricsCard, type MetricsCardCta, type MetricsCardProps, type MetricsCardStatusBadge, type MetricsCardTrend, type MetricsCardTrendBadge, type MetricsCardVariation, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, ProgressCircle, type ProgressCircleProps, type ProgressCircleSize, Radio, type RadioProps, type ResolvedTheme, Select, SelectOption, type SelectOptionProps, type SelectProps, SidebarMenu, type SidebarMenuContextValue, SidebarMenuItem, type SidebarMenuItemProps, type SidebarMenuProps, SidebarMenuSection, type SidebarMenuSectionProps, SidebarMenuSub, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarMenuTheme, type SortDirection, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, type Theme, ThemeProvider, type ThemeProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipAction, type TooltipPosition, type TooltipProps, type TooltipTheme, type UseRaydenCheckboxReturn, type UseRaydenFormControlOptions, type UseRaydenInputOptions, type UseRaydenInputReturn, type UseRaydenRadioReturn, type UseRaydenSelectOptions, type UseRaydenSelectReturn, cn, illustrationNames, useRaydenCheckbox, useRaydenInput, useRaydenRadio, useRaydenSelect, useRaydenToggle, useResolvedTheme, useTheme };
|
|
1155
|
+
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, ActivityContent, type ActivityContentAction, type ActivityContentAttachment, type ActivityContentProps, type ActivityContentStyle, type ActivityContentVariant, ActivityItem, type ActivityItemLink, type ActivityItemProps, Alert, type AlertAction, type AlertProps, type AlertState, type AlertVariant, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarGroupSize, type AvatarProps, type AvatarSize, type AvatarStatus, type AvatarType, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeType, Banner, type BannerEmphasis, type BannerProps, type BannerSize, type BannerStatus, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSeparator, Button, type ButtonAppearance, ButtonGroup, ButtonGroupItem, type ButtonGroupItemProps, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, type ChartType, Checkbox, type CheckboxProps, Chip, type ChipProps, Counter, type CounterProps, type CounterShape, type CounterSize, DatePicker, type DatePickerMode, type DatePickerProps, Divider, type DividerProps, type DividerVariant, type DropZoneState, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyStateIllustration, type EmptyStateIllustrationProps, FileUpload, FileUploadDropZone, type FileUploadDropZoneProps, type FileUploadFileData, FileUploadItem, type FileUploadItemProps, type FileUploadItemStatus, type FileUploadProps, Icon, IconName, type IconProps, type IconSize, IconVariant, type IllustrationName, Input, type InputProps, type InputSize, LinearStepper, type LinearStepperProps, MetricsCard, type MetricsCardCta, type MetricsCardProps, type MetricsCardStatusBadge, type MetricsCardTrend, type MetricsCardTrendBadge, type MetricsCardVariation, Modal, type ModalProps, type ModalSize, NumberCounter, type NumberCounterColor, type NumberCounterProps, type NumberCounterSize, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarType, ProgressCircle, type ProgressCircleProps, type ProgressCircleSize, type ProgressCircleStyle, Radio, type RadioProps, RangeSlider, type RangeSliderProps, RaydenChart, type RaydenChartProps, type ResolvedTheme, SegmentedStepper, type SegmentedStepperProps, Select, SelectOption, type SelectOptionProps, type SelectProps, SidebarMenu, type SidebarMenuContextValue, SidebarMenuItem, type SidebarMenuItemProps, type SidebarMenuProps, SidebarMenuSection, type SidebarMenuSectionProps, SidebarMenuSub, SidebarMenuSubItem, type SidebarMenuSubItemProps, type SidebarMenuSubProps, type SidebarMenuTheme, Slider, type SliderProps, type SliderSize, type SortDirection, Spinner, type SpinnerLabelPosition, type SpinnerProps, type SpinnerSize, type SpinnerStyle, type SpinnerType, type StepIndicator, type StepItem, type StepStatus, Stepper, type StepperOrientation, type StepperProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsOrientation, type TabsProps, type TabsSize, type TabsVariant, type Theme, ThemeProvider, type ThemeProviderProps, Toggle, type ToggleProps, Tooltip, type TooltipAction, type TooltipPosition, type TooltipProps, type TooltipTheme, type UseRaydenCheckboxReturn, type UseRaydenFormControlOptions, type UseRaydenInputOptions, type UseRaydenInputReturn, type UseRaydenRadioReturn, type UseRaydenSelectOptions, type UseRaydenSelectReturn, chartColors, chartFont, cn, createGradientFill, hexToRgba, illustrationNames, useRaydenCheckbox, useRaydenInput, useRaydenRadio, useRaydenSelect, useRaydenToggle, useResolvedTheme, useTheme };
|