@axzydev/axzy_ui_system 1.0.156
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 +50 -0
- package/dist/index.cjs +4682 -0
- package/dist/index.css +3295 -0
- package/dist/index.d.cts +769 -0
- package/dist/index.d.ts +769 -0
- package/dist/index.js +4647 -0
- package/package.json +65 -0
- package/src/theme/theme.ts +412 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,769 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React$1, { ReactNode } from 'react';
|
|
3
|
+
import * as Yup from 'yup';
|
|
4
|
+
|
|
5
|
+
declare const buttonVariants: Record<string, string>;
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* 2. Colores semánticos (qué representa cada color)
|
|
9
|
+
*/
|
|
10
|
+
declare const semanticColors: {
|
|
11
|
+
primary: {
|
|
12
|
+
50: string;
|
|
13
|
+
100: string;
|
|
14
|
+
200: string;
|
|
15
|
+
300: string;
|
|
16
|
+
400: string;
|
|
17
|
+
500: string;
|
|
18
|
+
600: string;
|
|
19
|
+
700: string;
|
|
20
|
+
800: string;
|
|
21
|
+
900: string;
|
|
22
|
+
950: string;
|
|
23
|
+
};
|
|
24
|
+
secondary: {
|
|
25
|
+
50: string;
|
|
26
|
+
100: string;
|
|
27
|
+
200: string;
|
|
28
|
+
300: string;
|
|
29
|
+
400: string;
|
|
30
|
+
500: string;
|
|
31
|
+
600: string;
|
|
32
|
+
700: string;
|
|
33
|
+
800: string;
|
|
34
|
+
900: string;
|
|
35
|
+
950: string;
|
|
36
|
+
};
|
|
37
|
+
success: {
|
|
38
|
+
'50': "#ecfdf5";
|
|
39
|
+
'100': "#d1fae5";
|
|
40
|
+
'200': "#a7f3d0";
|
|
41
|
+
'300': "#6ee7b7";
|
|
42
|
+
'400': "#34d399";
|
|
43
|
+
'500': "#10b981";
|
|
44
|
+
'600': "#059669";
|
|
45
|
+
'700': "#047857";
|
|
46
|
+
'800': "#065f46";
|
|
47
|
+
'900': "#064e3b";
|
|
48
|
+
'950': "#022c22";
|
|
49
|
+
};
|
|
50
|
+
danger: {
|
|
51
|
+
'50': "#fff1f2";
|
|
52
|
+
'100': "#ffe4e6";
|
|
53
|
+
'200': "#fecdd3";
|
|
54
|
+
'300': "#fda4af";
|
|
55
|
+
'400': "#fb7185";
|
|
56
|
+
'500': "#f43f5e";
|
|
57
|
+
'600': "#e11d48";
|
|
58
|
+
'700': "#be123c";
|
|
59
|
+
'800': "#9f1239";
|
|
60
|
+
'900': "#881337";
|
|
61
|
+
'950': "#4c0519";
|
|
62
|
+
};
|
|
63
|
+
warning: {
|
|
64
|
+
'50': "#fffbeb";
|
|
65
|
+
'100': "#fef3c7";
|
|
66
|
+
'200': "#fde68a";
|
|
67
|
+
'300': "#fcd34d";
|
|
68
|
+
'400': "#fbbf24";
|
|
69
|
+
'500': "#f59e0b";
|
|
70
|
+
'600': "#d97706";
|
|
71
|
+
'700': "#b45309";
|
|
72
|
+
'800': "#92400e";
|
|
73
|
+
'900': "#78350f";
|
|
74
|
+
'950': "#451a03";
|
|
75
|
+
};
|
|
76
|
+
info: {
|
|
77
|
+
50: string;
|
|
78
|
+
100: string;
|
|
79
|
+
200: string;
|
|
80
|
+
300: string;
|
|
81
|
+
400: string;
|
|
82
|
+
500: string;
|
|
83
|
+
600: string;
|
|
84
|
+
700: string;
|
|
85
|
+
800: string;
|
|
86
|
+
900: string;
|
|
87
|
+
950: string;
|
|
88
|
+
};
|
|
89
|
+
purple: {
|
|
90
|
+
'50': "#f5f3ff";
|
|
91
|
+
'100': "#ede9fe";
|
|
92
|
+
'200': "#ddd6fe";
|
|
93
|
+
'300': "#c4b5fd";
|
|
94
|
+
'400': "#a78bfa";
|
|
95
|
+
'500': "#8b5cf6";
|
|
96
|
+
'600': "#7c3aed";
|
|
97
|
+
'700': "#6d28d9";
|
|
98
|
+
'800': "#5b21b6";
|
|
99
|
+
'900': "#4c1d95";
|
|
100
|
+
'950': "#2e1065";
|
|
101
|
+
};
|
|
102
|
+
error: {
|
|
103
|
+
'50': "#fff1f2";
|
|
104
|
+
'100': "#ffe4e6";
|
|
105
|
+
'200': "#fecdd3";
|
|
106
|
+
'300': "#fda4af";
|
|
107
|
+
'400': "#fb7185";
|
|
108
|
+
'500': "#f43f5e";
|
|
109
|
+
'600': "#e11d48";
|
|
110
|
+
'700': "#be123c";
|
|
111
|
+
'800': "#9f1239";
|
|
112
|
+
'900': "#881337";
|
|
113
|
+
'950': "#4c0519";
|
|
114
|
+
};
|
|
115
|
+
gray: {
|
|
116
|
+
50: string;
|
|
117
|
+
100: string;
|
|
118
|
+
200: string;
|
|
119
|
+
300: string;
|
|
120
|
+
400: string;
|
|
121
|
+
500: string;
|
|
122
|
+
600: string;
|
|
123
|
+
700: string;
|
|
124
|
+
800: string;
|
|
125
|
+
900: string;
|
|
126
|
+
950: string;
|
|
127
|
+
};
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
type ColorsTypes = keyof typeof semanticColors;
|
|
131
|
+
|
|
132
|
+
type SizesTypes = "small" | "medium" | "large";
|
|
133
|
+
|
|
134
|
+
interface ITButtonProps {
|
|
135
|
+
label?: string;
|
|
136
|
+
children?: React.ReactNode;
|
|
137
|
+
onClick?: () => void;
|
|
138
|
+
color?: ColorsTypes;
|
|
139
|
+
size?: SizesTypes;
|
|
140
|
+
variant?: keyof typeof buttonVariants;
|
|
141
|
+
disabled?: boolean;
|
|
142
|
+
className?: string;
|
|
143
|
+
type?: "submit" | "reset" | "button" | undefined;
|
|
144
|
+
ariaLabel?: string;
|
|
145
|
+
title?: string;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
declare function ITButton({ children, label, onClick, type, color, size, disabled, className, variant, ariaLabel, title, }: ITButtonProps): react_jsx_runtime.JSX.Element;
|
|
149
|
+
|
|
150
|
+
interface CalendarEvent {
|
|
151
|
+
id: string;
|
|
152
|
+
title: string;
|
|
153
|
+
start: Date | string;
|
|
154
|
+
end: Date | string;
|
|
155
|
+
color?: string;
|
|
156
|
+
data?: any;
|
|
157
|
+
}
|
|
158
|
+
interface ITCalendarProps {
|
|
159
|
+
events?: CalendarEvent[];
|
|
160
|
+
mode?: 'week' | 'day' | 'month';
|
|
161
|
+
onEventClick?: (event: CalendarEvent) => void;
|
|
162
|
+
onSlotClick?: (date: Date) => void;
|
|
163
|
+
onSlotHover?: (date: Date) => void;
|
|
164
|
+
onSelectRange?: (start: Date, end: Date) => void;
|
|
165
|
+
value?: Date;
|
|
166
|
+
onChange?: (date: Date) => void;
|
|
167
|
+
minDate?: Date;
|
|
168
|
+
maxDate?: Date;
|
|
169
|
+
className?: string;
|
|
170
|
+
disabled?: boolean;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
declare const ITCalendar: React$1.FC<ITCalendarProps>;
|
|
174
|
+
|
|
175
|
+
interface ITCardProps {
|
|
176
|
+
onClick?: () => void;
|
|
177
|
+
title?: string;
|
|
178
|
+
image?: string;
|
|
179
|
+
alt?: string;
|
|
180
|
+
children?: React.ReactNode;
|
|
181
|
+
actions?: React.ReactNode;
|
|
182
|
+
className?: string;
|
|
183
|
+
imageClassName?: string;
|
|
184
|
+
titleClassName?: string;
|
|
185
|
+
contentClassName?: string;
|
|
186
|
+
actionClassName?: string;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/**
|
|
190
|
+
* Componente de tarjeta (Card) personalizable.
|
|
191
|
+
*/
|
|
192
|
+
declare function ITCard({ title, image, alt, children, actions, className, imageClassName, titleClassName, contentClassName, actionClassName, onClick, }: ITCardProps): react_jsx_runtime.JSX.Element;
|
|
193
|
+
|
|
194
|
+
interface ITDatePickerProps {
|
|
195
|
+
name: string;
|
|
196
|
+
value?: Date;
|
|
197
|
+
onChange: (event: React.ChangeEvent<HTMLInputElement> | {
|
|
198
|
+
target: {
|
|
199
|
+
name: string;
|
|
200
|
+
value: Date;
|
|
201
|
+
};
|
|
202
|
+
}) => void;
|
|
203
|
+
onBlur?: (event: React.FocusEvent<HTMLInputElement> | {
|
|
204
|
+
target: {
|
|
205
|
+
name: string;
|
|
206
|
+
value: Date;
|
|
207
|
+
};
|
|
208
|
+
}) => void;
|
|
209
|
+
variant?: ColorsTypes;
|
|
210
|
+
size?: SizesTypes;
|
|
211
|
+
className?: string;
|
|
212
|
+
calendarClassName?: string;
|
|
213
|
+
disabled?: boolean;
|
|
214
|
+
placeholder?: string;
|
|
215
|
+
label?: string;
|
|
216
|
+
required?: boolean;
|
|
217
|
+
touched?: boolean;
|
|
218
|
+
error?: string;
|
|
219
|
+
minDate?: Date;
|
|
220
|
+
maxDate?: Date;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
declare function ITDatePicker({ name, value, onChange, onBlur, variant, size, className, calendarClassName, disabled, label, touched, error, required, placeholder, minDate, maxDate, }: ITDatePickerProps): react_jsx_runtime.JSX.Element;
|
|
224
|
+
|
|
225
|
+
interface ITDialogProps {
|
|
226
|
+
isOpen: boolean;
|
|
227
|
+
onClose: () => void;
|
|
228
|
+
children: React.ReactNode;
|
|
229
|
+
className?: string;
|
|
230
|
+
title?: string;
|
|
231
|
+
useFormHeader?: boolean;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
declare function ITDialog({ isOpen, onClose, children, className, title, useFormHeader, }: ITDialogProps): react_jsx_runtime.JSX.Element;
|
|
235
|
+
|
|
236
|
+
interface FieldConfig {
|
|
237
|
+
name: string;
|
|
238
|
+
label: string;
|
|
239
|
+
type?: "text" | "select" | "date" | "password" | "number";
|
|
240
|
+
currencyFormat?: boolean;
|
|
241
|
+
placeholder?: string;
|
|
242
|
+
disabled?: boolean;
|
|
243
|
+
required?: boolean;
|
|
244
|
+
validation?: Yup.AnySchema;
|
|
245
|
+
column?: number | number[];
|
|
246
|
+
options?: {
|
|
247
|
+
value: string;
|
|
248
|
+
label: string;
|
|
249
|
+
}[];
|
|
250
|
+
rightIcon?: React$1.ReactNode;
|
|
251
|
+
leftIcon?: React$1.ReactNode;
|
|
252
|
+
valueField?: string;
|
|
253
|
+
showHintLength?: boolean;
|
|
254
|
+
labelField?: string;
|
|
255
|
+
maxLength?: number;
|
|
256
|
+
minLength?: number;
|
|
257
|
+
rows?: number;
|
|
258
|
+
formatNumber?: boolean;
|
|
259
|
+
onChangeAction?: (value: any, setFieldValue: any) => void;
|
|
260
|
+
}
|
|
261
|
+
type FieldTypeV2 = "text" | "number" | "password" | "email" | "select" | "date" | "time" | "checkbox" | "radio" | "array" | "section" | "custom";
|
|
262
|
+
interface FieldContextV2 {
|
|
263
|
+
values: Record<string, any>;
|
|
264
|
+
setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void;
|
|
265
|
+
setFieldError: (field: string, error: string) => void;
|
|
266
|
+
setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean) => void;
|
|
267
|
+
}
|
|
268
|
+
interface FieldConfigV2 {
|
|
269
|
+
name: string;
|
|
270
|
+
label?: string;
|
|
271
|
+
type: FieldTypeV2;
|
|
272
|
+
column?: number | {
|
|
273
|
+
sm?: number;
|
|
274
|
+
md?: number;
|
|
275
|
+
lg?: number;
|
|
276
|
+
xl?: number;
|
|
277
|
+
};
|
|
278
|
+
fields?: FieldConfigV2[];
|
|
279
|
+
collapsible?: boolean;
|
|
280
|
+
defaultCollapsed?: boolean;
|
|
281
|
+
dependsOn?: string[];
|
|
282
|
+
renderWhen?: (values: Record<string, any>) => boolean;
|
|
283
|
+
dynamicProps?: (values: Record<string, any>) => Partial<FieldConfigV2>;
|
|
284
|
+
validation?: Yup.AnySchema;
|
|
285
|
+
asyncValidation?: (value: any, values: Record<string, any>) => Promise<string | null | undefined>;
|
|
286
|
+
defaultValue?: any;
|
|
287
|
+
placeholder?: string;
|
|
288
|
+
disabled?: boolean | ((values: Record<string, any>) => boolean);
|
|
289
|
+
readOnly?: boolean;
|
|
290
|
+
required?: boolean | ((values: Record<string, any>) => boolean);
|
|
291
|
+
options?: {
|
|
292
|
+
value: string | number;
|
|
293
|
+
label: string;
|
|
294
|
+
}[] | (() => Promise<{
|
|
295
|
+
value: string | number;
|
|
296
|
+
label: string;
|
|
297
|
+
}[]>);
|
|
298
|
+
valueField?: string;
|
|
299
|
+
labelField?: string;
|
|
300
|
+
leftIcon?: React$1.ReactNode;
|
|
301
|
+
rightIcon?: React$1.ReactNode;
|
|
302
|
+
component?: React$1.ComponentType<any>;
|
|
303
|
+
className?: string;
|
|
304
|
+
currencyFormat?: boolean;
|
|
305
|
+
showHintLength?: boolean;
|
|
306
|
+
maxLength?: number;
|
|
307
|
+
minLength?: number;
|
|
308
|
+
rows?: number;
|
|
309
|
+
formatNumber?: boolean;
|
|
310
|
+
onChangeAction?: (val: any, context: FieldContextV2) => void | Promise<void>;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
interface ITFormBuilderProps {
|
|
314
|
+
fields?: FieldConfig[];
|
|
315
|
+
config?: FieldConfigV2[];
|
|
316
|
+
columns?: number;
|
|
317
|
+
values: any;
|
|
318
|
+
handleChange: (event: React.ChangeEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement> | React.ChangeEvent<HTMLSelectElement> | {
|
|
319
|
+
target: {
|
|
320
|
+
name: string;
|
|
321
|
+
value: any;
|
|
322
|
+
};
|
|
323
|
+
}) => void;
|
|
324
|
+
handleBlur: (event: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLSelectElement, Element> | React.FocusEvent<HTMLTextAreaElement, Element> | {
|
|
325
|
+
target: {
|
|
326
|
+
name: string;
|
|
327
|
+
value: any;
|
|
328
|
+
};
|
|
329
|
+
}) => void;
|
|
330
|
+
touched: any;
|
|
331
|
+
errors: any;
|
|
332
|
+
setFieldValue?: (field: string, value: any, shouldValidate?: boolean) => Promise<void | any>;
|
|
333
|
+
setFieldTouched?: (field: string, touched?: boolean, shouldValidate?: boolean) => Promise<void | any>;
|
|
334
|
+
setFieldError?: (field: string, message: string | undefined) => void;
|
|
335
|
+
isSubmitting?: boolean;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
declare function ITFormBuilder({ fields, config, columns, values, handleChange, handleBlur, touched, errors, setFieldValue, setFieldTouched, setFieldError, isSubmitting, }: ITFormBuilderProps): react_jsx_runtime.JSX.Element;
|
|
339
|
+
|
|
340
|
+
interface ITInputProps {
|
|
341
|
+
name: string;
|
|
342
|
+
type?: "text" | "password" | "number" | "email" | "checkbox" | "radio" | "textarea";
|
|
343
|
+
label?: string;
|
|
344
|
+
currencyFormat?: boolean;
|
|
345
|
+
placeholder?: string;
|
|
346
|
+
value?: any;
|
|
347
|
+
onChange: (event: any) => void;
|
|
348
|
+
onBlur: (event: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement, Element>) => void;
|
|
349
|
+
showHintLength?: boolean;
|
|
350
|
+
maxLength?: number;
|
|
351
|
+
minLength?: number;
|
|
352
|
+
variant?: ColorsTypes;
|
|
353
|
+
size?: SizesTypes;
|
|
354
|
+
disabled?: boolean;
|
|
355
|
+
containerClassName?: string;
|
|
356
|
+
labelClassName?: string;
|
|
357
|
+
className?: string;
|
|
358
|
+
touched?: boolean;
|
|
359
|
+
error?: string;
|
|
360
|
+
required?: boolean;
|
|
361
|
+
formatNumber?: boolean;
|
|
362
|
+
autoFocus?: boolean;
|
|
363
|
+
focusContent?: boolean;
|
|
364
|
+
onClick?: () => void;
|
|
365
|
+
iconLeft?: ReactNode;
|
|
366
|
+
iconRight?: ReactNode;
|
|
367
|
+
checked?: boolean;
|
|
368
|
+
rows?: number;
|
|
369
|
+
min?: number;
|
|
370
|
+
max?: number;
|
|
371
|
+
readOnly?: boolean;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
declare function ITInput({ name, type, label, placeholder, value, onChange, onBlur, disabled, className, containerClassName, labelClassName, touched, error, formatNumber, required, autoFocus, onClick, iconLeft, iconRight, maxLength, minLength, checked, showHintLength, currencyFormat, rows, min, max, readOnly, focusContent }: ITInputProps): react_jsx_runtime.JSX.Element;
|
|
375
|
+
|
|
376
|
+
interface OptionType {
|
|
377
|
+
[key: string]: string;
|
|
378
|
+
}
|
|
379
|
+
interface ITSelectProps {
|
|
380
|
+
name: string;
|
|
381
|
+
options: OptionType[];
|
|
382
|
+
valueField?: string;
|
|
383
|
+
labelField?: string;
|
|
384
|
+
label?: string;
|
|
385
|
+
placeholder?: string;
|
|
386
|
+
value?: string;
|
|
387
|
+
onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
|
|
388
|
+
onBlur?: (event: React.FocusEvent<HTMLSelectElement>) => void;
|
|
389
|
+
variant?: ColorsTypes;
|
|
390
|
+
size?: SizesTypes;
|
|
391
|
+
disabled?: boolean;
|
|
392
|
+
className?: string;
|
|
393
|
+
touched?: boolean;
|
|
394
|
+
error?: string;
|
|
395
|
+
required?: boolean;
|
|
396
|
+
autoFocus?: boolean;
|
|
397
|
+
readOnly?: boolean;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
/**
|
|
401
|
+
* Componente de selección (select) con soporte para opciones personalizadas, validación y personalización de estilo.
|
|
402
|
+
* Matches styles of ITInput.
|
|
403
|
+
*/
|
|
404
|
+
declare function ITSelect({ name, options, label, placeholder, valueField, labelField, value, onChange, onBlur, disabled, className, touched, required, error, readOnly, }: ITSelectProps): react_jsx_runtime.JSX.Element;
|
|
405
|
+
|
|
406
|
+
interface ITSlideToggleProps {
|
|
407
|
+
/**
|
|
408
|
+
* Callback executed when the switch is toggled. Receives the new state.
|
|
409
|
+
*/
|
|
410
|
+
onToggle?: (value: boolean) => void;
|
|
411
|
+
/**
|
|
412
|
+
* Controlled state. Use this to completely control the component externally.
|
|
413
|
+
*/
|
|
414
|
+
isOn?: boolean;
|
|
415
|
+
/**
|
|
416
|
+
* Initial state for uncontrolled usage.
|
|
417
|
+
* Default: false
|
|
418
|
+
*/
|
|
419
|
+
initialState?: boolean;
|
|
420
|
+
/**
|
|
421
|
+
* Semantic theme color when activated (e.g., 'primary', 'success').
|
|
422
|
+
* Default: 'success'
|
|
423
|
+
*/
|
|
424
|
+
activeColor?: string;
|
|
425
|
+
/**
|
|
426
|
+
* Semantic theme color or hex when deactivated.
|
|
427
|
+
* Default: '#9ca3af' (gray-400)
|
|
428
|
+
*/
|
|
429
|
+
inactiveColor?: string;
|
|
430
|
+
/**
|
|
431
|
+
* Whether the switch is disabled.
|
|
432
|
+
*/
|
|
433
|
+
disabled?: boolean;
|
|
434
|
+
/**
|
|
435
|
+
* Size of the switch: sm, md, lg.
|
|
436
|
+
* Default: md
|
|
437
|
+
*/
|
|
438
|
+
size?: "sm" | "md" | "lg";
|
|
439
|
+
/**
|
|
440
|
+
* Additional container classes.
|
|
441
|
+
*/
|
|
442
|
+
className?: string;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
/**
|
|
446
|
+
* Slide toggle switch component.
|
|
447
|
+
* Supports fully controlled (`isOn`) or uncontrolled (`initialState`) modes.
|
|
448
|
+
*/
|
|
449
|
+
declare function ITSlideToggle({ onToggle, isOn: controlledIsOn, initialState, activeColor, inactiveColor, // default gray-400
|
|
450
|
+
disabled, size, className, }: ITSlideToggleProps): react_jsx_runtime.JSX.Element;
|
|
451
|
+
|
|
452
|
+
type TableVariants = "default" | "striped" | "bordered";
|
|
453
|
+
type TableSize = "sm" | "md" | "lg";
|
|
454
|
+
|
|
455
|
+
type ColumnType = "string" | "date" | "number" | "boolean" | "actions" | "catalog";
|
|
456
|
+
interface CatalogOption {
|
|
457
|
+
id: string | number;
|
|
458
|
+
name: string;
|
|
459
|
+
}
|
|
460
|
+
interface Column<T = any> {
|
|
461
|
+
key: string;
|
|
462
|
+
label: string;
|
|
463
|
+
className?: string;
|
|
464
|
+
currencyMX?: boolean;
|
|
465
|
+
actions?: (row: T) => React.ReactNode;
|
|
466
|
+
filter?: boolean | "catalog";
|
|
467
|
+
type: ColumnType;
|
|
468
|
+
sortable?: boolean;
|
|
469
|
+
render?: (row: T) => React.ReactNode;
|
|
470
|
+
editComponent?: (props: {
|
|
471
|
+
value: any;
|
|
472
|
+
onChange: (value: any) => void;
|
|
473
|
+
rowData: T;
|
|
474
|
+
}) => React.ReactNode;
|
|
475
|
+
catalogOptions?: {
|
|
476
|
+
data: CatalogOption[];
|
|
477
|
+
loading?: boolean;
|
|
478
|
+
error?: boolean;
|
|
479
|
+
};
|
|
480
|
+
}
|
|
481
|
+
interface ITTableProps<T> {
|
|
482
|
+
columns: Column<T>[];
|
|
483
|
+
containerClassName?: string;
|
|
484
|
+
data: T[];
|
|
485
|
+
variant?: TableVariants;
|
|
486
|
+
className?: string;
|
|
487
|
+
size?: TableSize;
|
|
488
|
+
itemsPerPageOptions?: Array<number>;
|
|
489
|
+
defaultItemsPerPage?: number;
|
|
490
|
+
title?: string;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
declare function ITTable<T extends Record<string, unknown>>({ columns, data, containerClassName, className, variant, size, itemsPerPageOptions, defaultItemsPerPage, title, }: ITTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
494
|
+
|
|
495
|
+
interface ITToastProps {
|
|
496
|
+
message: string;
|
|
497
|
+
type?: "success" | "error" | "warning" | "info" | "primary" | "danger" | string;
|
|
498
|
+
duration?: number;
|
|
499
|
+
position?: "top-right" | "top-center" | "top-left" | "bottom-right" | "bottom-center" | "bottom-left";
|
|
500
|
+
onClose?: () => void;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
declare function ITToast({ message, type, duration, position, onClose, }: ITToastProps): react_jsx_runtime.JSX.Element;
|
|
504
|
+
|
|
505
|
+
interface ITNavigationItem$1 {
|
|
506
|
+
id: string;
|
|
507
|
+
label: string;
|
|
508
|
+
icon?: React.ReactNode;
|
|
509
|
+
action?: () => void;
|
|
510
|
+
isActive?: boolean;
|
|
511
|
+
subitems?: ITNavigationSubItem$1[];
|
|
512
|
+
}
|
|
513
|
+
interface ITNavigationSubItem$1 {
|
|
514
|
+
id: string;
|
|
515
|
+
label: string;
|
|
516
|
+
action: () => void;
|
|
517
|
+
isActive?: boolean;
|
|
518
|
+
}
|
|
519
|
+
interface ITNavbarProps {
|
|
520
|
+
logo?: React.ReactNode;
|
|
521
|
+
logoText?: string;
|
|
522
|
+
navigationItems?: ITNavigationItem$1[];
|
|
523
|
+
userMenu?: {
|
|
524
|
+
userImage?: string;
|
|
525
|
+
userName: string;
|
|
526
|
+
userEmail: string;
|
|
527
|
+
menuItems: Array<{
|
|
528
|
+
label: string;
|
|
529
|
+
onClick: () => void;
|
|
530
|
+
}>;
|
|
531
|
+
};
|
|
532
|
+
children?: React.ReactNode;
|
|
533
|
+
navItems?: React.ReactNode;
|
|
534
|
+
showSidebar?: boolean;
|
|
535
|
+
showSidebarOnMobile?: boolean;
|
|
536
|
+
sidebarItems?: React.ReactNode;
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
declare function ITNavbar({ logo, logoText, navigationItems, userMenu, children, navItems, showSidebar, showSidebarOnMobile, sidebarItems, }: ITNavbarProps): react_jsx_runtime.JSX.Element;
|
|
540
|
+
|
|
541
|
+
declare function ITText({ children, className }: {
|
|
542
|
+
children: any;
|
|
543
|
+
className?: string;
|
|
544
|
+
}): react_jsx_runtime.JSX.Element;
|
|
545
|
+
|
|
546
|
+
declare const ITImage: ({ src, alt, className, fallbackSrc, }: {
|
|
547
|
+
src: any;
|
|
548
|
+
alt: any;
|
|
549
|
+
className?: string;
|
|
550
|
+
fallbackSrc?: string;
|
|
551
|
+
}) => react_jsx_runtime.JSX.Element;
|
|
552
|
+
|
|
553
|
+
declare const badgeVariants: {
|
|
554
|
+
readonly filled: "filled";
|
|
555
|
+
readonly outlined: "outlined";
|
|
556
|
+
};
|
|
557
|
+
|
|
558
|
+
interface ITBadgetProps {
|
|
559
|
+
label?: string;
|
|
560
|
+
children?: React.ReactNode;
|
|
561
|
+
color?: ColorsTypes;
|
|
562
|
+
size?: SizesTypes;
|
|
563
|
+
variant?: keyof typeof badgeVariants;
|
|
564
|
+
className?: string;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
declare function ITBadget({ children, label, color, size, variant, className, }: ITBadgetProps): react_jsx_runtime.JSX.Element;
|
|
568
|
+
|
|
569
|
+
interface ITPaginationProps {
|
|
570
|
+
/**
|
|
571
|
+
* Current active page (1-indexed).
|
|
572
|
+
*/
|
|
573
|
+
currentPage: number;
|
|
574
|
+
/**
|
|
575
|
+
* Total number of pages available.
|
|
576
|
+
*/
|
|
577
|
+
totalPages: number;
|
|
578
|
+
/**
|
|
579
|
+
* Callback fired when a page is clicked or next/prev is activated.
|
|
580
|
+
*/
|
|
581
|
+
onPageChange: (page: number) => void;
|
|
582
|
+
/**
|
|
583
|
+
* Number of visible pages before and after the current page.
|
|
584
|
+
* Default: 1
|
|
585
|
+
*/
|
|
586
|
+
siblingCount?: number;
|
|
587
|
+
/**
|
|
588
|
+
* Semantic color from the theme (primary, secondary, success, danger, warning, info, purple).
|
|
589
|
+
* Default: primary
|
|
590
|
+
*/
|
|
591
|
+
color?: string;
|
|
592
|
+
/**
|
|
593
|
+
* Additional CSS classes for the container.
|
|
594
|
+
*/
|
|
595
|
+
className?: string;
|
|
596
|
+
/**
|
|
597
|
+
* Options for items per page selector.
|
|
598
|
+
*/
|
|
599
|
+
itemsPerPageOptions?: number[];
|
|
600
|
+
/**
|
|
601
|
+
* Current items per page value. Required if itemsPerPageOptions is provided.
|
|
602
|
+
*/
|
|
603
|
+
itemsPerPage?: number;
|
|
604
|
+
/**
|
|
605
|
+
* Callback fired when items per page is changed.
|
|
606
|
+
*/
|
|
607
|
+
onItemsPerPageChange?: (value: number) => void;
|
|
608
|
+
/**
|
|
609
|
+
* Total number of items across all pages. Used to render "1-10 of 50" text.
|
|
610
|
+
*/
|
|
611
|
+
totalItems?: number;
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
declare function ITPagination({ currentPage, totalPages, onPageChange, siblingCount, color, className, itemsPerPageOptions, itemsPerPage, onItemsPerPageChange, totalItems, }: ITPaginationProps): react_jsx_runtime.JSX.Element;
|
|
615
|
+
|
|
616
|
+
declare const createValidationSchema: (fields: FieldConfig[]) => Yup.ObjectSchema<{
|
|
617
|
+
[x: string]: never;
|
|
618
|
+
}, Yup.AnyObject, {
|
|
619
|
+
[x: string]: any;
|
|
620
|
+
}, "">;
|
|
621
|
+
|
|
622
|
+
type LoaderSize = "sm" | "md" | "lg" | "xl";
|
|
623
|
+
type LoaderVariant = "spinner" | "dots" | "bar" | "pulse";
|
|
624
|
+
|
|
625
|
+
interface LoaderProps {
|
|
626
|
+
size?: LoaderSize;
|
|
627
|
+
variant?: LoaderVariant;
|
|
628
|
+
color?: string;
|
|
629
|
+
className?: string;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
declare function ITLoader({ size, variant, color, // Default to semantic primary
|
|
633
|
+
className, }: LoaderProps): react_jsx_runtime.JSX.Element;
|
|
634
|
+
|
|
635
|
+
interface ITTopBarNavItem {
|
|
636
|
+
id: string;
|
|
637
|
+
label: string;
|
|
638
|
+
icon?: any;
|
|
639
|
+
action: () => void;
|
|
640
|
+
}
|
|
641
|
+
interface ITTopBarProps {
|
|
642
|
+
logo?: any;
|
|
643
|
+
logoText?: string;
|
|
644
|
+
userMenu?: {
|
|
645
|
+
userName: string;
|
|
646
|
+
userEmail: string;
|
|
647
|
+
userImage?: string;
|
|
648
|
+
menuItems: {
|
|
649
|
+
label: string;
|
|
650
|
+
onClick: () => void;
|
|
651
|
+
}[];
|
|
652
|
+
};
|
|
653
|
+
navItems?: ITTopBarNavItem[];
|
|
654
|
+
onNavItemClick?: (id: string) => void;
|
|
655
|
+
showMobileMenuButton?: boolean;
|
|
656
|
+
onToggleMobileMenu?: () => void;
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
interface ITNavigationSubItem {
|
|
660
|
+
id: string;
|
|
661
|
+
label: string;
|
|
662
|
+
action: () => void;
|
|
663
|
+
isActive?: boolean;
|
|
664
|
+
}
|
|
665
|
+
interface ITNavigationItem {
|
|
666
|
+
id: string;
|
|
667
|
+
label: string;
|
|
668
|
+
icon?: React.ReactNode;
|
|
669
|
+
action?: () => void;
|
|
670
|
+
isActive?: boolean;
|
|
671
|
+
subitems?: ITNavigationSubItem[];
|
|
672
|
+
badge?: string;
|
|
673
|
+
}
|
|
674
|
+
interface ITSidebarProps {
|
|
675
|
+
navigationItems: ITNavigationItem[];
|
|
676
|
+
isCollapsed?: boolean;
|
|
677
|
+
onToggleCollapse?: () => void;
|
|
678
|
+
visibleOnMobile?: boolean;
|
|
679
|
+
className?: string;
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
interface ITLayoutProps {
|
|
683
|
+
topBar: ITTopBarProps;
|
|
684
|
+
sidebar: ITSidebarProps;
|
|
685
|
+
children: React.ReactNode;
|
|
686
|
+
className?: string;
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
declare function ITLayout({ topBar, sidebar, children, className, }: ITLayoutProps): react_jsx_runtime.JSX.Element;
|
|
690
|
+
|
|
691
|
+
interface ITTimePickerProps {
|
|
692
|
+
name: string;
|
|
693
|
+
value?: string;
|
|
694
|
+
label?: string;
|
|
695
|
+
placeholder?: string;
|
|
696
|
+
onChange: (e: any) => void;
|
|
697
|
+
onBlur: (e: any) => void;
|
|
698
|
+
required?: boolean;
|
|
699
|
+
touched?: boolean;
|
|
700
|
+
error?: string | boolean;
|
|
701
|
+
disabled?: boolean;
|
|
702
|
+
className?: string;
|
|
703
|
+
size?: "small" | "medium" | "large";
|
|
704
|
+
variant?: "primary" | "secondary" | "danger" | "success" | "warning" | "info" | "purple";
|
|
705
|
+
color?: "primary" | "secondary" | "danger" | "success" | "warning" | "info" | "purple" | string;
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
declare function ITTimePicker({ name, value, label, placeholder, onChange, onBlur, required, touched, error, disabled, className, size, variant, color, }: ITTimePickerProps): react_jsx_runtime.JSX.Element;
|
|
709
|
+
|
|
710
|
+
/** Enum con tipos de archivo permitidos */
|
|
711
|
+
declare enum FileTypeEnum {
|
|
712
|
+
PDF = "application/pdf",
|
|
713
|
+
XLS = "application/vnd.ms-excel",
|
|
714
|
+
XLSX = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
|
715
|
+
CSV = "text/csv",
|
|
716
|
+
PNG = "image/png",
|
|
717
|
+
JPG = "image/jpg",
|
|
718
|
+
JPEG = "image/jpeg"
|
|
719
|
+
}
|
|
720
|
+
/** Enum para el estado de subida */
|
|
721
|
+
declare enum UploadStatus {
|
|
722
|
+
PENDING = "pendiente",
|
|
723
|
+
UPLOADING = "subiendo",
|
|
724
|
+
UPLOADED = "subido",
|
|
725
|
+
ERROR = "error"
|
|
726
|
+
}
|
|
727
|
+
/** Props del componente */
|
|
728
|
+
interface ITDropfileProps {
|
|
729
|
+
onFileSelect: (file: File | null) => void;
|
|
730
|
+
onCancel?: () => void;
|
|
731
|
+
onSubmit?: (file: File) => void;
|
|
732
|
+
acceptedFileTypes?: FileTypeEnum[];
|
|
733
|
+
contentClassName?: string;
|
|
734
|
+
containerClassName?: string;
|
|
735
|
+
showStatusBadge?: boolean;
|
|
736
|
+
uploadStatus?: UploadStatus;
|
|
737
|
+
onStatusChange?: (status: UploadStatus) => void;
|
|
738
|
+
initialPreviewUrl?: string | null;
|
|
739
|
+
}
|
|
740
|
+
declare const ITDropfile: React$1.FC<ITDropfileProps>;
|
|
741
|
+
|
|
742
|
+
type IconType = React$1.ReactNode;
|
|
743
|
+
interface Step {
|
|
744
|
+
label: string;
|
|
745
|
+
content: React$1.ReactNode;
|
|
746
|
+
icon?: IconType;
|
|
747
|
+
}
|
|
748
|
+
interface ITStepperProps {
|
|
749
|
+
steps: Step[];
|
|
750
|
+
currentStep: number;
|
|
751
|
+
onFinish?: () => void;
|
|
752
|
+
onStepChange?: (step: number) => void;
|
|
753
|
+
allowClickToJump?: boolean;
|
|
754
|
+
useIcons?: boolean;
|
|
755
|
+
disableNext?: boolean;
|
|
756
|
+
containerClassName?: string;
|
|
757
|
+
stepClassName?: string;
|
|
758
|
+
scrollableContent?: boolean;
|
|
759
|
+
maxContentHeight?: string;
|
|
760
|
+
/**
|
|
761
|
+
* Semantic theme color for active steps and buttons.
|
|
762
|
+
* Default: 'primary'
|
|
763
|
+
*/
|
|
764
|
+
color?: string;
|
|
765
|
+
}
|
|
766
|
+
|
|
767
|
+
declare function ITStepper({ steps, currentStep, onFinish, onStepChange, allowClickToJump, useIcons, disableNext, containerClassName, stepClassName, scrollableContent, maxContentHeight, color, }: ITStepperProps): react_jsx_runtime.JSX.Element;
|
|
768
|
+
|
|
769
|
+
export { type Column, type FieldConfig, type FieldConfigV2, ITBadget, type ITBadgetProps, ITButton, type ITButtonProps, ITCalendar, type ITCalendarProps, ITCard, type ITCardProps, ITDatePicker, type ITDatePickerProps, ITDialog, type ITDialogProps, ITDropfile, ITFormBuilder, type ITFormBuilderProps, ITImage, ITInput, type ITInputProps, ITLayout, type ITLayoutProps, ITLoader, ITNavbar, type ITNavbarProps, ITPagination, ITSelect, type ITSelectProps, ITSlideToggle, type ITSlideToggleProps, ITStepper, ITTable, type ITTableProps, ITText, ITTimePicker, type ITTimePickerProps, ITToast, type ITToastProps, createValidationSchema };
|