design-zystem 1.0.256 → 1.0.258

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.
Files changed (6) hide show
  1. package/dist/index.css +219 -58
  2. package/dist/index.d.mts +117 -7
  3. package/dist/index.d.ts +117 -7
  4. package/dist/index.js +799 -196
  5. package/dist/index.mjs +767 -197
  6. 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: 0;
8
- right: 56px;
9
- z-index: 50;
10
- background-color: white;
11
- border: 1px solid #e5e7eb;
12
- border-radius: 8px;
13
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
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: 320px;
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: 16px;
112
+ margin-bottom: 14px;
28
113
  }
29
114
  .calendar-nav-button {
30
- padding: 4px;
31
- border-radius: 4px;
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-color: #f3f4f6;
129
+ background: #f1f5f9;
130
+ color: #1d1c1c;
38
131
  }
39
132
  .calendar-nav-icon {
40
- width: 20px;
41
- height: 20px;
133
+ width: 15px;
134
+ height: 15px;
42
135
  }
43
136
  .calendar-month-title {
44
- font-size: 18px;
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
- gap: 4px;
51
- margin-bottom: 8px;
145
+ margin-bottom: 2px;
52
146
  }
53
147
  .calendar-day-name {
54
- font-size: 12px;
55
- font-weight: 500;
56
- color: #6b7280;
148
+ font-size: 10.5px;
149
+ font-weight: 600;
150
+ color: #cbd5e1;
57
151
  text-align: center;
58
- padding: 8px 0;
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
- padding: 8px;
67
- font-size: 14px;
68
- border-radius: 4px;
69
- transition: all 0.15s;
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: #d1d5db;
76
- cursor: not-allowed;
202
+ color: #e2e8f0;
203
+ cursor: default;
204
+ pointer-events: none;
77
205
  }
78
- .calendar-day-button:not(.calendar-day-disabled):hover {
79
- background-color: #eff6ff;
206
+ .calendar-day-today:not(.calendar-day-selected) {
207
+ font-weight: 700;
208
+ color: #52bdc4;
80
209
  }
81
- .calendar-day-in-range {
82
- background-color: #dbeafe;
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-selected {
86
- background-color: #3b82f6;
87
- color: white;
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-selected:hover {
90
- background-color: #2563eb;
220
+ .calendar-day-range-end::before {
221
+ right: 50%;
222
+ background: #eef8f9;
91
223
  }
92
- .calendar-day-today {
93
- background-color: #f3f4f6;
224
+ .calendar-day-selected {
225
+ color: #ffffff;
94
226
  font-weight: 600;
95
227
  }
96
- .selected-dates-display {
97
- margin-top: 16px;
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
- .selected-dates-text {
104
- color: #4b5563;
231
+ .calendar-day-selected:hover::after {
232
+ background: #42979d;
105
233
  }
106
- .select-end-date-hint {
107
- color: #2563eb;
108
- margin-left: 8px;
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
- .reset-button {
111
- padding: 8px 16px;
112
- background-color: #9ca3af;
113
- color: white;
114
- border-radius: 4px;
115
- font-size: 14px;
116
- border: none;
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;
@@ -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 DatePickerProps {
800
- onChange?: (startDate: Date | null, endDate: Date | null) => void;
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
- declare const DatePicker: ({ onChange, size }: DatePickerProps) => react_jsx_runtime.JSX.Element;
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;
@@ -1035,4 +1068,81 @@ interface OptimizeImageOptions {
1035
1068
  }
1036
1069
  declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
1037
1070
 
1038
- export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, 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, colors, formatDate, formatDistance, formatDuration, formatEuro, formatName, optimizeImage, truncateFileName, truncateText };
1071
+ declare const getRelativeTime: (date: Date | string) => string;
1072
+
1073
+ declare const formatTime: (time: string | null | undefined) => string;
1074
+
1075
+ declare const easterDate: (year: number) => Date;
1076
+
1077
+ declare const isHoliday: (date: Date) => boolean;
1078
+
1079
+ declare const addBusinessDays: (originalDate: Date, numDaysToAdd: number) => Date;
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
+
1087
+ declare const formatAddress: (address: string | null | undefined) => string | null;
1088
+
1089
+ declare const formatLocality: (locality: string | null | undefined) => string | null;
1090
+
1091
+ declare const formatRegionCode: (postalCode: string | null | undefined) => string;
1092
+
1093
+ declare const formatCityFromFormattedAddress: (address: string | null | undefined) => string;
1094
+
1095
+ declare const formatPostalCodeFromFormattedAddress: (address: string | null | undefined) => string;
1096
+
1097
+ declare const isolateCity: (addr: string | null | undefined) => string;
1098
+
1099
+ declare const formatCityWithPostalCode: (city: string | null, postalCode: string | null) => string;
1100
+
1101
+ declare const formatPhoneNumber: (phone: string | null | undefined) => string | null;
1102
+
1103
+ declare const formatPlate: (plate: string | null | undefined) => string | null;
1104
+
1105
+ declare const formatPlateWithoutDashes: (plate: string | null | undefined) => string | null;
1106
+
1107
+ declare const capitalizeFirstLetter: (str: string | null | undefined) => string | null;
1108
+
1109
+ declare const generateHexColor: (firstName?: string, lastName?: string) => string;
1110
+
1111
+ interface AuthorLike {
1112
+ first_name?: string | null;
1113
+ firstname?: string | null;
1114
+ firstName?: string | null;
1115
+ last_name?: string | null;
1116
+ lastname?: string | null;
1117
+ lastName?: string | null;
1118
+ name?: string | null;
1119
+ display_name?: string | null;
1120
+ email?: string | null;
1121
+ }
1122
+ declare const getInitials: (author: AuthorLike | null | undefined) => string;
1123
+
1124
+ declare const getAvatarColor: (key: string) => string;
1125
+
1126
+ declare const formatNameWithInitial: (firstname: string | null, lastname: string | null) => string | null;
1127
+
1128
+ declare const getFileNameFromUrl: (url: string | null | undefined, fallback?: string) => string;
1129
+
1130
+ declare const getFileKind: (url: string | null | undefined) => "image" | "pdf" | "other";
1131
+
1132
+ declare const appendQueryParam: (url: string, key: string, value: string) => string;
1133
+
1134
+ declare const appendCacheBuster: (url: string) => string;
1135
+
1136
+ declare const getMimeCategory: (mimeType: string | null | undefined) => string;
1137
+
1138
+ declare const getCleanFileName: (fileName: string | null | undefined) => string;
1139
+
1140
+ declare const getFileIconByMimeType: (mimeType: string | null) => string;
1141
+
1142
+ declare const formatVin: (vin: string | null | undefined) => string;
1143
+
1144
+ declare const formatKM: (value: string | number | null | undefined) => string;
1145
+
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;
@@ -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 DatePickerProps {
800
- onChange?: (startDate: Date | null, endDate: Date | null) => void;
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
- declare const DatePicker: ({ onChange, size }: DatePickerProps) => react_jsx_runtime.JSX.Element;
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;
@@ -1035,4 +1068,81 @@ interface OptimizeImageOptions {
1035
1068
  }
1036
1069
  declare const optimizeImage: (file: File | null | undefined, desiredBaseName: string, opts?: OptimizeImageOptions) => Promise<OptimizeImageResult>;
1037
1070
 
1038
- export { Accordion, type AccordionItem, Avatar, Box, Bubble, Bulk, Button, CardSkeleton, Checkbox, Col, Collapse, ColorPicker, DatePicker, 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, colors, formatDate, formatDistance, formatDuration, formatEuro, formatName, optimizeImage, truncateFileName, truncateText };
1071
+ declare const getRelativeTime: (date: Date | string) => string;
1072
+
1073
+ declare const formatTime: (time: string | null | undefined) => string;
1074
+
1075
+ declare const easterDate: (year: number) => Date;
1076
+
1077
+ declare const isHoliday: (date: Date) => boolean;
1078
+
1079
+ declare const addBusinessDays: (originalDate: Date, numDaysToAdd: number) => Date;
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
+
1087
+ declare const formatAddress: (address: string | null | undefined) => string | null;
1088
+
1089
+ declare const formatLocality: (locality: string | null | undefined) => string | null;
1090
+
1091
+ declare const formatRegionCode: (postalCode: string | null | undefined) => string;
1092
+
1093
+ declare const formatCityFromFormattedAddress: (address: string | null | undefined) => string;
1094
+
1095
+ declare const formatPostalCodeFromFormattedAddress: (address: string | null | undefined) => string;
1096
+
1097
+ declare const isolateCity: (addr: string | null | undefined) => string;
1098
+
1099
+ declare const formatCityWithPostalCode: (city: string | null, postalCode: string | null) => string;
1100
+
1101
+ declare const formatPhoneNumber: (phone: string | null | undefined) => string | null;
1102
+
1103
+ declare const formatPlate: (plate: string | null | undefined) => string | null;
1104
+
1105
+ declare const formatPlateWithoutDashes: (plate: string | null | undefined) => string | null;
1106
+
1107
+ declare const capitalizeFirstLetter: (str: string | null | undefined) => string | null;
1108
+
1109
+ declare const generateHexColor: (firstName?: string, lastName?: string) => string;
1110
+
1111
+ interface AuthorLike {
1112
+ first_name?: string | null;
1113
+ firstname?: string | null;
1114
+ firstName?: string | null;
1115
+ last_name?: string | null;
1116
+ lastname?: string | null;
1117
+ lastName?: string | null;
1118
+ name?: string | null;
1119
+ display_name?: string | null;
1120
+ email?: string | null;
1121
+ }
1122
+ declare const getInitials: (author: AuthorLike | null | undefined) => string;
1123
+
1124
+ declare const getAvatarColor: (key: string) => string;
1125
+
1126
+ declare const formatNameWithInitial: (firstname: string | null, lastname: string | null) => string | null;
1127
+
1128
+ declare const getFileNameFromUrl: (url: string | null | undefined, fallback?: string) => string;
1129
+
1130
+ declare const getFileKind: (url: string | null | undefined) => "image" | "pdf" | "other";
1131
+
1132
+ declare const appendQueryParam: (url: string, key: string, value: string) => string;
1133
+
1134
+ declare const appendCacheBuster: (url: string) => string;
1135
+
1136
+ declare const getMimeCategory: (mimeType: string | null | undefined) => string;
1137
+
1138
+ declare const getCleanFileName: (fileName: string | null | undefined) => string;
1139
+
1140
+ declare const getFileIconByMimeType: (mimeType: string | null) => string;
1141
+
1142
+ declare const formatVin: (vin: string | null | undefined) => string;
1143
+
1144
+ declare const formatKM: (value: string | number | null | undefined) => string;
1145
+
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 };