design-zystem 1.0.257 → 1.0.259
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +219 -58
- package/dist/index.d.mts +56 -9
- package/dist/index.d.ts +56 -9
- package/dist/index.js +442 -212
- package/dist/index.mjs +436 -213
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1,118 +1,279 @@
|
|
|
1
1
|
/* src/Components/DatePicker/DatePicker.css */
|
|
2
2
|
.date-picker-container {
|
|
3
3
|
position: relative;
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
}
|
|
6
|
+
.date-picker-input-trigger {
|
|
7
|
+
display: inline-flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
gap: 8px;
|
|
10
|
+
padding: 8px;
|
|
11
|
+
height: 36px;
|
|
12
|
+
border: 1px solid #e2e8f0;
|
|
13
|
+
border-radius: 5px;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
background: #ffffff;
|
|
16
|
+
font-size: 12px;
|
|
17
|
+
font-family: "Open Sans", sans-serif;
|
|
18
|
+
font-weight: 400;
|
|
19
|
+
color: #1d1c1c;
|
|
20
|
+
white-space: nowrap;
|
|
21
|
+
transition: border-color 0.15s;
|
|
22
|
+
width: 100%;
|
|
23
|
+
}
|
|
24
|
+
.date-picker-input-trigger:hover {
|
|
25
|
+
border-color: #cbd5e1;
|
|
26
|
+
}
|
|
27
|
+
.date-picker-input-trigger:focus {
|
|
28
|
+
outline: none;
|
|
29
|
+
border: 1px solid #1c4ed8;
|
|
30
|
+
}
|
|
31
|
+
.date-picker-input-trigger:disabled {
|
|
32
|
+
opacity: 0.5;
|
|
33
|
+
cursor: not-allowed;
|
|
34
|
+
background: #f1f5f9;
|
|
35
|
+
}
|
|
36
|
+
.date-picker-input-trigger--filled {
|
|
37
|
+
background: #f8fafc;
|
|
38
|
+
}
|
|
39
|
+
.date-picker-input-placeholder {
|
|
40
|
+
color: #94a3b8;
|
|
41
|
+
flex: 1;
|
|
42
|
+
}
|
|
43
|
+
.date-picker-input-trigger span:not(.date-picker-input-placeholder):not(.date-picker-input-clear) {
|
|
44
|
+
flex: 1;
|
|
45
|
+
}
|
|
46
|
+
.date-picker-input-clear {
|
|
47
|
+
display: flex;
|
|
48
|
+
align-items: center;
|
|
49
|
+
margin-left: auto;
|
|
50
|
+
padding: 2px;
|
|
51
|
+
border-radius: 4px;
|
|
52
|
+
cursor: pointer;
|
|
53
|
+
}
|
|
54
|
+
.date-picker-input-clear:hover {
|
|
55
|
+
background: #f1f5f9;
|
|
4
56
|
}
|
|
5
57
|
.date-picker-popup {
|
|
6
58
|
position: absolute;
|
|
7
|
-
top:
|
|
8
|
-
|
|
9
|
-
z-index:
|
|
10
|
-
background
|
|
11
|
-
border: 1px solid #
|
|
12
|
-
border-radius:
|
|
13
|
-
box-shadow: 0
|
|
59
|
+
top: calc(100% + 8px);
|
|
60
|
+
left: 0;
|
|
61
|
+
z-index: 100;
|
|
62
|
+
background: #ffffff;
|
|
63
|
+
border: 1px solid #e2e8f0;
|
|
64
|
+
border-radius: 10px;
|
|
65
|
+
box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.06), 0 12px 28px -4px rgba(0, 0, 0, 0.1);
|
|
66
|
+
overflow: hidden;
|
|
14
67
|
min-width: max-content;
|
|
15
68
|
}
|
|
16
69
|
.date-picker-content {
|
|
17
70
|
display: flex;
|
|
18
71
|
}
|
|
72
|
+
.date-picker-presets {
|
|
73
|
+
display: flex;
|
|
74
|
+
flex-direction: column;
|
|
75
|
+
padding: 8px;
|
|
76
|
+
width: 152px;
|
|
77
|
+
background: #f8fafc;
|
|
78
|
+
border-right: 1px solid #e2e8f0;
|
|
79
|
+
gap: 1px;
|
|
80
|
+
}
|
|
81
|
+
.date-picker-preset-button {
|
|
82
|
+
text-align: left;
|
|
83
|
+
padding: 7px 10px;
|
|
84
|
+
font-size: 12.5px;
|
|
85
|
+
font-weight: 500;
|
|
86
|
+
color: #646b73;
|
|
87
|
+
background: none;
|
|
88
|
+
border: none;
|
|
89
|
+
border-radius: 6px;
|
|
90
|
+
cursor: pointer;
|
|
91
|
+
transition: background-color 0.1s, color 0.1s;
|
|
92
|
+
white-space: nowrap;
|
|
93
|
+
line-height: 1.4;
|
|
94
|
+
}
|
|
95
|
+
.date-picker-preset-button:hover {
|
|
96
|
+
background: #eef8f9;
|
|
97
|
+
color: #317176;
|
|
98
|
+
}
|
|
99
|
+
.date-picker-preset-button.active {
|
|
100
|
+
background: #dcf2f3;
|
|
101
|
+
color: #42979d;
|
|
102
|
+
font-weight: 600;
|
|
103
|
+
}
|
|
19
104
|
.calendar-container {
|
|
20
105
|
padding: 16px;
|
|
21
|
-
width:
|
|
106
|
+
width: 280px;
|
|
22
107
|
}
|
|
23
108
|
.calendar-header {
|
|
24
109
|
display: flex;
|
|
25
110
|
align-items: center;
|
|
26
111
|
justify-content: space-between;
|
|
27
|
-
margin-bottom:
|
|
112
|
+
margin-bottom: 14px;
|
|
28
113
|
}
|
|
29
114
|
.calendar-nav-button {
|
|
30
|
-
|
|
31
|
-
|
|
115
|
+
display: flex;
|
|
116
|
+
align-items: center;
|
|
117
|
+
justify-content: center;
|
|
118
|
+
width: 26px;
|
|
119
|
+
height: 26px;
|
|
120
|
+
padding: 0;
|
|
121
|
+
border-radius: 5px;
|
|
32
122
|
background: none;
|
|
33
123
|
border: none;
|
|
34
124
|
cursor: pointer;
|
|
125
|
+
color: #94a3b8;
|
|
126
|
+
transition: background-color 0.1s, color 0.1s;
|
|
35
127
|
}
|
|
36
128
|
.calendar-nav-button:hover {
|
|
37
|
-
background
|
|
129
|
+
background: #f1f5f9;
|
|
130
|
+
color: #1d1c1c;
|
|
38
131
|
}
|
|
39
132
|
.calendar-nav-icon {
|
|
40
|
-
width:
|
|
41
|
-
height:
|
|
133
|
+
width: 15px;
|
|
134
|
+
height: 15px;
|
|
42
135
|
}
|
|
43
136
|
.calendar-month-title {
|
|
44
|
-
font-size:
|
|
137
|
+
font-size: 13.5px;
|
|
45
138
|
font-weight: 600;
|
|
139
|
+
color: #1d1c1c;
|
|
140
|
+
letter-spacing: -0.01em;
|
|
46
141
|
}
|
|
47
142
|
.calendar-days-header {
|
|
48
143
|
display: grid;
|
|
49
144
|
grid-template-columns: repeat(7, 1fr);
|
|
50
|
-
|
|
51
|
-
margin-bottom: 8px;
|
|
145
|
+
margin-bottom: 2px;
|
|
52
146
|
}
|
|
53
147
|
.calendar-day-name {
|
|
54
|
-
font-size:
|
|
55
|
-
font-weight:
|
|
56
|
-
color: #
|
|
148
|
+
font-size: 10.5px;
|
|
149
|
+
font-weight: 600;
|
|
150
|
+
color: #cbd5e1;
|
|
57
151
|
text-align: center;
|
|
58
|
-
|
|
152
|
+
text-transform: uppercase;
|
|
153
|
+
letter-spacing: 0.05em;
|
|
154
|
+
padding: 3px 0 7px;
|
|
59
155
|
}
|
|
60
156
|
.calendar-days-grid {
|
|
61
157
|
display: grid;
|
|
62
158
|
grid-template-columns: repeat(7, 1fr);
|
|
63
|
-
gap: 4px;
|
|
64
159
|
}
|
|
65
160
|
.calendar-day-button {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
161
|
+
position: relative;
|
|
162
|
+
display: flex;
|
|
163
|
+
align-items: center;
|
|
164
|
+
justify-content: center;
|
|
165
|
+
height: 34px;
|
|
166
|
+
font-size: 13px;
|
|
167
|
+
font-weight: 400;
|
|
168
|
+
color: #1d1c1c;
|
|
70
169
|
background: none;
|
|
71
170
|
border: none;
|
|
72
171
|
cursor: pointer;
|
|
172
|
+
padding: 0;
|
|
173
|
+
z-index: 0;
|
|
174
|
+
transition: color 0.1s;
|
|
175
|
+
}
|
|
176
|
+
.calendar-day-button span {
|
|
177
|
+
position: relative;
|
|
178
|
+
z-index: 1;
|
|
179
|
+
}
|
|
180
|
+
.calendar-day-button::before {
|
|
181
|
+
content: "";
|
|
182
|
+
position: absolute;
|
|
183
|
+
top: 1px;
|
|
184
|
+
bottom: 1px;
|
|
185
|
+
left: 0;
|
|
186
|
+
right: 0;
|
|
187
|
+
z-index: -2;
|
|
188
|
+
}
|
|
189
|
+
.calendar-day-button::after {
|
|
190
|
+
content: "";
|
|
191
|
+
position: absolute;
|
|
192
|
+
width: 30px;
|
|
193
|
+
height: 30px;
|
|
194
|
+
border-radius: 50%;
|
|
195
|
+
z-index: -1;
|
|
196
|
+
transition: background-color 0.1s;
|
|
197
|
+
}
|
|
198
|
+
.calendar-day-button:not(.calendar-day-disabled):not(.calendar-day-selected):hover::after {
|
|
199
|
+
background: #eef8f9;
|
|
73
200
|
}
|
|
74
201
|
.calendar-day-disabled {
|
|
75
|
-
color: #
|
|
76
|
-
cursor:
|
|
202
|
+
color: #e2e8f0;
|
|
203
|
+
cursor: default;
|
|
204
|
+
pointer-events: none;
|
|
77
205
|
}
|
|
78
|
-
.calendar-day-
|
|
79
|
-
|
|
206
|
+
.calendar-day-today:not(.calendar-day-selected) {
|
|
207
|
+
font-weight: 700;
|
|
208
|
+
color: #52bdc4;
|
|
80
209
|
}
|
|
81
|
-
.calendar-day-
|
|
82
|
-
|
|
83
|
-
color: #1d4ed8;
|
|
210
|
+
.calendar-day-today:not(.calendar-day-selected)::after {
|
|
211
|
+
box-shadow: inset 0 0 0 1.5px #52bdc4;
|
|
84
212
|
}
|
|
85
|
-
.calendar-day-
|
|
86
|
-
background
|
|
87
|
-
|
|
213
|
+
.calendar-day-in-range::before {
|
|
214
|
+
background: #eef8f9;
|
|
215
|
+
}
|
|
216
|
+
.calendar-day-range-start::before {
|
|
217
|
+
left: 50%;
|
|
218
|
+
background: #eef8f9;
|
|
88
219
|
}
|
|
89
|
-
.calendar-day-
|
|
90
|
-
|
|
220
|
+
.calendar-day-range-end::before {
|
|
221
|
+
right: 50%;
|
|
222
|
+
background: #eef8f9;
|
|
91
223
|
}
|
|
92
|
-
.calendar-day-
|
|
93
|
-
|
|
224
|
+
.calendar-day-selected {
|
|
225
|
+
color: #ffffff;
|
|
94
226
|
font-weight: 600;
|
|
95
227
|
}
|
|
96
|
-
.
|
|
97
|
-
|
|
98
|
-
padding: 12px;
|
|
99
|
-
background-color: #f9fafb;
|
|
100
|
-
border-radius: 4px;
|
|
101
|
-
font-size: 14px;
|
|
228
|
+
.calendar-day-selected::after {
|
|
229
|
+
background: #52bdc4;
|
|
102
230
|
}
|
|
103
|
-
.
|
|
104
|
-
|
|
231
|
+
.calendar-day-selected:hover::after {
|
|
232
|
+
background: #42979d;
|
|
105
233
|
}
|
|
106
|
-
.
|
|
107
|
-
|
|
108
|
-
|
|
234
|
+
.calendar-footer {
|
|
235
|
+
display: flex;
|
|
236
|
+
align-items: center;
|
|
237
|
+
justify-content: space-between;
|
|
238
|
+
margin-top: 10px;
|
|
239
|
+
padding-top: 10px;
|
|
240
|
+
border-top: 1px solid #f1f5f9;
|
|
241
|
+
gap: 8px;
|
|
242
|
+
min-height: 34px;
|
|
109
243
|
}
|
|
110
|
-
.
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
244
|
+
.calendar-footer-dates {
|
|
245
|
+
font-size: 11.5px;
|
|
246
|
+
color: #94a3b8;
|
|
247
|
+
flex: 1;
|
|
248
|
+
min-width: 0;
|
|
249
|
+
line-height: 1.4;
|
|
250
|
+
}
|
|
251
|
+
.calendar-footer-dates strong {
|
|
252
|
+
color: #646b73;
|
|
253
|
+
font-weight: 600;
|
|
254
|
+
}
|
|
255
|
+
.calendar-footer-hint {
|
|
256
|
+
font-size: 11.5px;
|
|
257
|
+
color: #52bdc4;
|
|
258
|
+
}
|
|
259
|
+
.calendar-reset-button {
|
|
260
|
+
padding: 4px 10px;
|
|
261
|
+
font-size: 11.5px;
|
|
262
|
+
font-weight: 500;
|
|
263
|
+
color: #94a3b8;
|
|
264
|
+
background: #f8fafc;
|
|
265
|
+
border: 1px solid #e2e8f0;
|
|
266
|
+
border-radius: 5px;
|
|
117
267
|
cursor: pointer;
|
|
268
|
+
white-space: nowrap;
|
|
269
|
+
flex-shrink: 0;
|
|
270
|
+
transition:
|
|
271
|
+
background-color 0.1s,
|
|
272
|
+
color 0.1s,
|
|
273
|
+
border-color 0.1s;
|
|
274
|
+
}
|
|
275
|
+
.calendar-reset-button:hover {
|
|
276
|
+
background: #f1f5f9;
|
|
277
|
+
color: #646b73;
|
|
278
|
+
border-color: #cbd5e1;
|
|
118
279
|
}
|
package/dist/index.d.mts
CHANGED
|
@@ -168,6 +168,7 @@ interface NewModalProps {
|
|
|
168
168
|
isLoading?: boolean;
|
|
169
169
|
isOutline?: boolean;
|
|
170
170
|
variant?: string;
|
|
171
|
+
titleColor?: string;
|
|
171
172
|
showCloseButton?: boolean;
|
|
172
173
|
confirmDisabled?: boolean;
|
|
173
174
|
showHeaderIcon?: boolean;
|
|
@@ -175,7 +176,7 @@ interface NewModalProps {
|
|
|
175
176
|
isDraggable?: boolean;
|
|
176
177
|
style?: CSSProperties;
|
|
177
178
|
}
|
|
178
|
-
declare const NewModal: ({ showModal, closeModal, title, subTitle, icon, width, children, tag, leftButtonLabel, leftButtonAction, rightButtonLabel, rightButtonAction, isLoading, isOutline, variant, showCloseButton, confirmDisabled, showHeaderIcon, headerIConSize, isDraggable, }: NewModalProps) => react_jsx_runtime.JSX.Element | null;
|
|
179
|
+
declare const NewModal: ({ showModal, closeModal, title, subTitle, icon, width, children, tag, leftButtonLabel, leftButtonAction, rightButtonLabel, rightButtonAction, isLoading, isOutline, variant, titleColor, showCloseButton, confirmDisabled, showHeaderIcon, headerIConSize, isDraggable, }: NewModalProps) => react_jsx_runtime.JSX.Element | null;
|
|
179
180
|
|
|
180
181
|
interface DrawerProps {
|
|
181
182
|
showDrawer?: boolean;
|
|
@@ -315,8 +316,8 @@ declare const Avatar: ({ name, src, backgroundColor, textColor, size, shape, bad
|
|
|
315
316
|
interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
|
|
316
317
|
label?: string;
|
|
317
318
|
children?: ReactNode;
|
|
318
|
-
iconLeft?:
|
|
319
|
-
iconRight?:
|
|
319
|
+
iconLeft?: ReactNode;
|
|
320
|
+
iconRight?: ReactNode;
|
|
320
321
|
iconColor?: string;
|
|
321
322
|
variant?: string;
|
|
322
323
|
outline?: boolean;
|
|
@@ -796,11 +797,42 @@ interface MultiSelectProps {
|
|
|
796
797
|
}
|
|
797
798
|
declare const MultiSelect: ({ label, options, selectedValues, onChange, size, optional, disabled, width, align, }: MultiSelectProps) => react_jsx_runtime.JSX.Element;
|
|
798
799
|
|
|
799
|
-
interface
|
|
800
|
-
|
|
800
|
+
interface DatePreset {
|
|
801
|
+
label: string;
|
|
802
|
+
getValue: () => {
|
|
803
|
+
start: Date;
|
|
804
|
+
end: Date;
|
|
805
|
+
};
|
|
806
|
+
}
|
|
807
|
+
type DatePickerBaseProps = {
|
|
808
|
+
minDate?: Date;
|
|
809
|
+
maxDate?: Date;
|
|
810
|
+
disabledDates?: Date[];
|
|
801
811
|
size?: 'xs' | 's' | 'm' | 'l';
|
|
802
|
-
|
|
803
|
-
|
|
812
|
+
defaultOpen?: boolean;
|
|
813
|
+
locale?: string;
|
|
814
|
+
align?: 'left' | 'right';
|
|
815
|
+
variant?: 'button' | 'input';
|
|
816
|
+
width?: string;
|
|
817
|
+
disabled?: boolean;
|
|
818
|
+
};
|
|
819
|
+
type DatePickerSingleProps = DatePickerBaseProps & {
|
|
820
|
+
mode: 'single';
|
|
821
|
+
value?: Date | null;
|
|
822
|
+
onChange?: (date: Date | null) => void;
|
|
823
|
+
presets?: never;
|
|
824
|
+
};
|
|
825
|
+
type DatePickerRangeProps = DatePickerBaseProps & {
|
|
826
|
+
mode?: 'range';
|
|
827
|
+
value?: {
|
|
828
|
+
start: Date | null;
|
|
829
|
+
end: Date | null;
|
|
830
|
+
};
|
|
831
|
+
onChange?: (start: Date | null, end: Date | null) => void;
|
|
832
|
+
presets?: DatePreset[];
|
|
833
|
+
};
|
|
834
|
+
type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
|
|
835
|
+
declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Element;
|
|
804
836
|
|
|
805
837
|
interface IconTabItem {
|
|
806
838
|
icon?: string;
|
|
@@ -825,8 +857,9 @@ interface PopoverProps {
|
|
|
825
857
|
anchorRef?: RefObject<HTMLElement>;
|
|
826
858
|
offsetY?: number;
|
|
827
859
|
align?: 'left' | 'right';
|
|
860
|
+
fullWidth?: boolean;
|
|
828
861
|
}
|
|
829
|
-
declare const Popover: ({ items, children, anchorRef, offsetY, align, }: PopoverProps) => react_jsx_runtime.JSX.Element;
|
|
862
|
+
declare const Popover: ({ items, children, anchorRef, offsetY, align, fullWidth, }: PopoverProps) => react_jsx_runtime.JSX.Element;
|
|
830
863
|
|
|
831
864
|
interface MetricCardProps {
|
|
832
865
|
icon: string;
|
|
@@ -1045,6 +1078,12 @@ declare const isHoliday: (date: Date) => boolean;
|
|
|
1045
1078
|
|
|
1046
1079
|
declare const addBusinessDays: (originalDate: Date, numDaysToAdd: number) => Date;
|
|
1047
1080
|
|
|
1081
|
+
declare const formatDateWithTime: (date: string, time: string | null) => string;
|
|
1082
|
+
|
|
1083
|
+
declare const parseIsoDate: (value: string | null) => Date | null;
|
|
1084
|
+
|
|
1085
|
+
declare const isSameDay: (a: Date | string, b: Date | string) => boolean;
|
|
1086
|
+
|
|
1048
1087
|
declare const formatAddress: (address: string | null | undefined) => string | null;
|
|
1049
1088
|
|
|
1050
1089
|
declare const formatLocality: (locality: string | null | undefined) => string | null;
|
|
@@ -1057,6 +1096,8 @@ declare const formatPostalCodeFromFormattedAddress: (address: string | null | un
|
|
|
1057
1096
|
|
|
1058
1097
|
declare const isolateCity: (addr: string | null | undefined) => string;
|
|
1059
1098
|
|
|
1099
|
+
declare const formatCityWithPostalCode: (city: string | null, postalCode: string | null) => string;
|
|
1100
|
+
|
|
1060
1101
|
declare const formatPhoneNumber: (phone: string | null | undefined) => string | null;
|
|
1061
1102
|
|
|
1062
1103
|
declare const formatPlate: (plate: string | null | undefined) => string | null;
|
|
@@ -1082,6 +1123,8 @@ declare const getInitials: (author: AuthorLike | null | undefined) => string;
|
|
|
1082
1123
|
|
|
1083
1124
|
declare const getAvatarColor: (key: string) => string;
|
|
1084
1125
|
|
|
1126
|
+
declare const formatNameWithInitial: (firstname: string | null, lastname: string | null) => string | null;
|
|
1127
|
+
|
|
1085
1128
|
declare const getFileNameFromUrl: (url: string | null | undefined, fallback?: string) => string;
|
|
1086
1129
|
|
|
1087
1130
|
declare const getFileKind: (url: string | null | undefined) => "image" | "pdf" | "other";
|
|
@@ -1094,8 +1137,12 @@ declare const getMimeCategory: (mimeType: string | null | undefined) => string;
|
|
|
1094
1137
|
|
|
1095
1138
|
declare const getCleanFileName: (fileName: string | null | undefined) => string;
|
|
1096
1139
|
|
|
1140
|
+
declare const getFileIconByMimeType: (mimeType: string | null) => string;
|
|
1141
|
+
|
|
1097
1142
|
declare const formatVin: (vin: string | null | undefined) => string;
|
|
1098
1143
|
|
|
1099
1144
|
declare const formatKM: (value: string | number | null | undefined) => string;
|
|
1100
1145
|
|
|
1101
|
-
|
|
1146
|
+
declare const parseAmount: (value: string) => number | null;
|
|
1147
|
+
|
|
1148
|
+
export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, ProgressBar, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, truncateFileName, truncateText };
|
package/dist/index.d.ts
CHANGED
|
@@ -168,6 +168,7 @@ interface NewModalProps {
|
|
|
168
168
|
isLoading?: boolean;
|
|
169
169
|
isOutline?: boolean;
|
|
170
170
|
variant?: string;
|
|
171
|
+
titleColor?: string;
|
|
171
172
|
showCloseButton?: boolean;
|
|
172
173
|
confirmDisabled?: boolean;
|
|
173
174
|
showHeaderIcon?: boolean;
|
|
@@ -175,7 +176,7 @@ interface NewModalProps {
|
|
|
175
176
|
isDraggable?: boolean;
|
|
176
177
|
style?: CSSProperties;
|
|
177
178
|
}
|
|
178
|
-
declare const NewModal: ({ showModal, closeModal, title, subTitle, icon, width, children, tag, leftButtonLabel, leftButtonAction, rightButtonLabel, rightButtonAction, isLoading, isOutline, variant, showCloseButton, confirmDisabled, showHeaderIcon, headerIConSize, isDraggable, }: NewModalProps) => react_jsx_runtime.JSX.Element | null;
|
|
179
|
+
declare const NewModal: ({ showModal, closeModal, title, subTitle, icon, width, children, tag, leftButtonLabel, leftButtonAction, rightButtonLabel, rightButtonAction, isLoading, isOutline, variant, titleColor, showCloseButton, confirmDisabled, showHeaderIcon, headerIConSize, isDraggable, }: NewModalProps) => react_jsx_runtime.JSX.Element | null;
|
|
179
180
|
|
|
180
181
|
interface DrawerProps {
|
|
181
182
|
showDrawer?: boolean;
|
|
@@ -315,8 +316,8 @@ declare const Avatar: ({ name, src, backgroundColor, textColor, size, shape, bad
|
|
|
315
316
|
interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
|
|
316
317
|
label?: string;
|
|
317
318
|
children?: ReactNode;
|
|
318
|
-
iconLeft?:
|
|
319
|
-
iconRight?:
|
|
319
|
+
iconLeft?: ReactNode;
|
|
320
|
+
iconRight?: ReactNode;
|
|
320
321
|
iconColor?: string;
|
|
321
322
|
variant?: string;
|
|
322
323
|
outline?: boolean;
|
|
@@ -796,11 +797,42 @@ interface MultiSelectProps {
|
|
|
796
797
|
}
|
|
797
798
|
declare const MultiSelect: ({ label, options, selectedValues, onChange, size, optional, disabled, width, align, }: MultiSelectProps) => react_jsx_runtime.JSX.Element;
|
|
798
799
|
|
|
799
|
-
interface
|
|
800
|
-
|
|
800
|
+
interface DatePreset {
|
|
801
|
+
label: string;
|
|
802
|
+
getValue: () => {
|
|
803
|
+
start: Date;
|
|
804
|
+
end: Date;
|
|
805
|
+
};
|
|
806
|
+
}
|
|
807
|
+
type DatePickerBaseProps = {
|
|
808
|
+
minDate?: Date;
|
|
809
|
+
maxDate?: Date;
|
|
810
|
+
disabledDates?: Date[];
|
|
801
811
|
size?: 'xs' | 's' | 'm' | 'l';
|
|
802
|
-
|
|
803
|
-
|
|
812
|
+
defaultOpen?: boolean;
|
|
813
|
+
locale?: string;
|
|
814
|
+
align?: 'left' | 'right';
|
|
815
|
+
variant?: 'button' | 'input';
|
|
816
|
+
width?: string;
|
|
817
|
+
disabled?: boolean;
|
|
818
|
+
};
|
|
819
|
+
type DatePickerSingleProps = DatePickerBaseProps & {
|
|
820
|
+
mode: 'single';
|
|
821
|
+
value?: Date | null;
|
|
822
|
+
onChange?: (date: Date | null) => void;
|
|
823
|
+
presets?: never;
|
|
824
|
+
};
|
|
825
|
+
type DatePickerRangeProps = DatePickerBaseProps & {
|
|
826
|
+
mode?: 'range';
|
|
827
|
+
value?: {
|
|
828
|
+
start: Date | null;
|
|
829
|
+
end: Date | null;
|
|
830
|
+
};
|
|
831
|
+
onChange?: (start: Date | null, end: Date | null) => void;
|
|
832
|
+
presets?: DatePreset[];
|
|
833
|
+
};
|
|
834
|
+
type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
|
|
835
|
+
declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Element;
|
|
804
836
|
|
|
805
837
|
interface IconTabItem {
|
|
806
838
|
icon?: string;
|
|
@@ -825,8 +857,9 @@ interface PopoverProps {
|
|
|
825
857
|
anchorRef?: RefObject<HTMLElement>;
|
|
826
858
|
offsetY?: number;
|
|
827
859
|
align?: 'left' | 'right';
|
|
860
|
+
fullWidth?: boolean;
|
|
828
861
|
}
|
|
829
|
-
declare const Popover: ({ items, children, anchorRef, offsetY, align, }: PopoverProps) => react_jsx_runtime.JSX.Element;
|
|
862
|
+
declare const Popover: ({ items, children, anchorRef, offsetY, align, fullWidth, }: PopoverProps) => react_jsx_runtime.JSX.Element;
|
|
830
863
|
|
|
831
864
|
interface MetricCardProps {
|
|
832
865
|
icon: string;
|
|
@@ -1045,6 +1078,12 @@ declare const isHoliday: (date: Date) => boolean;
|
|
|
1045
1078
|
|
|
1046
1079
|
declare const addBusinessDays: (originalDate: Date, numDaysToAdd: number) => Date;
|
|
1047
1080
|
|
|
1081
|
+
declare const formatDateWithTime: (date: string, time: string | null) => string;
|
|
1082
|
+
|
|
1083
|
+
declare const parseIsoDate: (value: string | null) => Date | null;
|
|
1084
|
+
|
|
1085
|
+
declare const isSameDay: (a: Date | string, b: Date | string) => boolean;
|
|
1086
|
+
|
|
1048
1087
|
declare const formatAddress: (address: string | null | undefined) => string | null;
|
|
1049
1088
|
|
|
1050
1089
|
declare const formatLocality: (locality: string | null | undefined) => string | null;
|
|
@@ -1057,6 +1096,8 @@ declare const formatPostalCodeFromFormattedAddress: (address: string | null | un
|
|
|
1057
1096
|
|
|
1058
1097
|
declare const isolateCity: (addr: string | null | undefined) => string;
|
|
1059
1098
|
|
|
1099
|
+
declare const formatCityWithPostalCode: (city: string | null, postalCode: string | null) => string;
|
|
1100
|
+
|
|
1060
1101
|
declare const formatPhoneNumber: (phone: string | null | undefined) => string | null;
|
|
1061
1102
|
|
|
1062
1103
|
declare const formatPlate: (plate: string | null | undefined) => string | null;
|
|
@@ -1082,6 +1123,8 @@ declare const getInitials: (author: AuthorLike | null | undefined) => string;
|
|
|
1082
1123
|
|
|
1083
1124
|
declare const getAvatarColor: (key: string) => string;
|
|
1084
1125
|
|
|
1126
|
+
declare const formatNameWithInitial: (firstname: string | null, lastname: string | null) => string | null;
|
|
1127
|
+
|
|
1085
1128
|
declare const getFileNameFromUrl: (url: string | null | undefined, fallback?: string) => string;
|
|
1086
1129
|
|
|
1087
1130
|
declare const getFileKind: (url: string | null | undefined) => "image" | "pdf" | "other";
|
|
@@ -1094,8 +1137,12 @@ declare const getMimeCategory: (mimeType: string | null | undefined) => string;
|
|
|
1094
1137
|
|
|
1095
1138
|
declare const getCleanFileName: (fileName: string | null | undefined) => string;
|
|
1096
1139
|
|
|
1140
|
+
declare const getFileIconByMimeType: (mimeType: string | null) => string;
|
|
1141
|
+
|
|
1097
1142
|
declare const formatVin: (vin: string | null | undefined) => string;
|
|
1098
1143
|
|
|
1099
1144
|
declare const formatKM: (value: string | number | null | undefined) => string;
|
|
1100
1145
|
|
|
1101
|
-
|
|
1146
|
+
declare const parseAmount: (value: string) => number | null;
|
|
1147
|
+
|
|
1148
|
+
export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, type DatePickerProps, type DatePreset, Divider, Drawer, EmptyState, FileUploadZone, type FloatingAction, FloatingButton, type FloatingButtonProps, Grid, Icon, IconTabs, Image, Input, Link, List, ListItem, MetricCard, Modal, ModalConfirmation, MultiSelect, NewModal, Options, PageContainer, Pagination, Popover, ProgressBar, Radio, Row, Select, type SelectOption, type SelectProps, SkeletonRow, SliderInput, type SortOrder, Spinner, Stepper, Switch, Table, TableBody, TableCell, TableFooter, TableFooterCell, TableFooterRow, TableHeader, TableHeaderCell, type TableHeaderCellProps, TableHeaderRow, TableRow, Tabs, TagBubble, Text, Timeline, type TimelineItem, Tooltip, addBusinessDays, appendCacheBuster, appendQueryParam, capitalizeFirstLetter, colors, easterDate, formatAddress, formatCityFromFormattedAddress, formatCityWithPostalCode, formatDate, formatDateWithTime, formatDistance, formatDuration, formatEuro, formatKM, formatLocality, formatName, formatNameWithInitial, formatPhoneNumber, formatPlate, formatPlateWithoutDashes, formatPostalCodeFromFormattedAddress, formatRegionCode, formatTime, formatVin, generateHexColor, getAvatarColor, getCleanFileName, getFileIconByMimeType, getFileKind, getFileNameFromUrl, getInitials, getMimeCategory, getRelativeTime, isHoliday, isSameDay, isolateCity, optimizeImage, parseAmount, parseIsoDate, truncateFileName, truncateText };
|