@keenmate/web-daterangepicker 1.0.0-rc01 → 1.0.0-rc03

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.
@@ -0,0 +1,349 @@
1
+ // ==============================================================================
2
+ // DATE RANGE PICKER - SCSS VARIABLES
3
+ // ==============================================================================
4
+ // This file contains all SCSS variables for the date range picker component.
5
+ // All variables use the `$drp-` prefix (date range picker).
6
+ // Variables use the `!default` flag to allow customization.
7
+
8
+ // ==============================================================================
9
+ // BASE PRIMITIVES
10
+ // ==============================================================================
11
+ // These are foundational values that can be used across the component
12
+
13
+ $padding-xs: 0.25rem !default;
14
+ $padding-sm: 0.5rem !default;
15
+ $padding-base: 0.75rem !default;
16
+ $padding-md: 1rem !default;
17
+ $padding-lg: 1.5rem !default;
18
+
19
+ $border-radius-sm: 0.25rem !default;
20
+ $border-radius-base: 0.375rem !default;
21
+ $border-radius-md: 0.5rem !default;
22
+ $border-radius-full: 9999px !default;
23
+
24
+ $font-size-2xs: 0.625rem !default;
25
+ $font-size-xs: 0.75rem !default;
26
+ $font-size-sm: 0.875rem !default;
27
+ $font-size-base: 1rem !default;
28
+ $font-size-lg: 1.125rem !default;
29
+ $font-size-xl: 1.25rem !default;
30
+ $font-size-2xl: 1.5rem !default;
31
+
32
+ $border-width-base: 1px !default;
33
+
34
+ // ==============================================================================
35
+ // SPACING SCALE
36
+ // ==============================================================================
37
+
38
+ $drp-spacing-xs: 0.25rem !default;
39
+ $drp-spacing-sm: 0.5rem !default;
40
+ $drp-spacing-md: 1rem !default;
41
+ $drp-spacing-lg: 1.5rem !default;
42
+ $drp-spacing-xl: 2rem !default;
43
+
44
+ // ==============================================================================
45
+ // COLOR PALETTE
46
+ // ==============================================================================
47
+
48
+ // Neutral Colors
49
+ $drp-color-white: #ffffff !default;
50
+ $drp-color-neutral-lighter: #f3f4f6 !default;
51
+ $drp-color-neutral-light: #e5e7eb !default;
52
+ $drp-color-neutral-dark: #6b7280 !default;
53
+ $drp-color-neutral-darkest: #111827 !default;
54
+
55
+ // Accent Colors (Blue)
56
+ $drp-color-accent: #3b82f6 !default;
57
+ $drp-color-accent-dark: #2563eb !default;
58
+
59
+ // Error/Danger Colors (Red)
60
+ $drp-color-error: #ef4444 !default;
61
+
62
+ // Success Colors (Green)
63
+ $drp-color-success: #10b981 !default;
64
+
65
+ // ==============================================================================
66
+ // TYPOGRAPHY SCALE
67
+ // ==============================================================================
68
+
69
+ $drp-font-size-2xs: $font-size-2xs !default;
70
+ $drp-font-size-xs: $font-size-xs !default;
71
+ $drp-font-size-sm: $font-size-sm !default;
72
+ $drp-font-size-base: $font-size-base !default;
73
+ $drp-font-size-lg: $font-size-lg !default;
74
+ $drp-font-size-xl: $font-size-xl !default;
75
+ $drp-font-size-2xl: $font-size-2xl !default;
76
+
77
+ $drp-font-weight-medium: 500 !default;
78
+ $drp-font-weight-semibold: 600 !default;
79
+
80
+ // ==============================================================================
81
+ // BORDERS & SHADOWS
82
+ // ==============================================================================
83
+
84
+ $drp-border-width-base: $border-width-base !default;
85
+ $drp-border-width-thick: 2px !default;
86
+
87
+ $drp-border-radius: $border-radius-base !default;
88
+ $drp-border-radius-sm: $border-radius-sm !default;
89
+ $drp-border-radius-md: $border-radius-md !default;
90
+ $drp-border-radius-full: $border-radius-full !default;
91
+
92
+ $drp-border-color: $drp-color-neutral-light !default;
93
+ $drp-border-color-hover: $drp-color-accent !default;
94
+ $drp-border-color-focus: $drp-color-accent !default;
95
+
96
+ $drp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !default;
97
+
98
+ // ==============================================================================
99
+ // TRANSITIONS & ANIMATIONS
100
+ // ==============================================================================
101
+
102
+ $drp-transition-fast: 150ms !default;
103
+ $drp-easing-snappy: cubic-bezier(0.4, 0.0, 0.2, 1) !default;
104
+
105
+ // ==============================================================================
106
+ // Z-INDEX LAYERS
107
+ // ==============================================================================
108
+
109
+ $drp-z-index-dropdown: 9500 !default;
110
+ $drp-z-index-tooltip: 9999 !default;
111
+
112
+ // ==============================================================================
113
+ // LAYOUT & DIMENSIONS
114
+ // ==============================================================================
115
+
116
+ $drp-month-min-width: 280px !default;
117
+ $drp-month-min-width-inline: 250px !default;
118
+ $drp-calendar-max-width: calc(100vw - 2rem) !default;
119
+
120
+ // ==============================================================================
121
+ // OPACITY VALUES
122
+ // ==============================================================================
123
+
124
+ $drp-opacity-disabled: 0.6 !default;
125
+ $drp-opacity-other-month: 0.5 !default;
126
+ $drp-opacity-hover: 0.8 !default;
127
+ $drp-opacity-dragging: 0.7 !default;
128
+
129
+ // ==============================================================================
130
+ // COMPONENT SEMANTIC VARIABLES
131
+ // ==============================================================================
132
+ // These variables map to specific component parts and use the base primitives
133
+
134
+ // --------------------------------------
135
+ // Calendar Container
136
+ // --------------------------------------
137
+ $drp-calendar-bg: $drp-color-white !default;
138
+ $drp-calendar-padding: $drp-spacing-md !default;
139
+ $drp-calendar-border-color: $drp-border-color !default;
140
+ $drp-calendar-border-width: $drp-border-width-base !default;
141
+ $drp-calendar-border-radius: $drp-border-radius !default;
142
+ $drp-calendar-shadow: $drp-shadow-xl !default;
143
+
144
+ // --------------------------------------
145
+ // Input Field
146
+ // --------------------------------------
147
+ $drp-input-padding-h: $padding-base !default;
148
+ $drp-input-icon-opacity: 0.6 !default;
149
+
150
+ // --------------------------------------
151
+ // Header (Month/Year Navigation)
152
+ // --------------------------------------
153
+ $drp-header-margin-bottom: $drp-spacing-md !default;
154
+ $drp-header-gap: $drp-spacing-sm !default;
155
+
156
+ $drp-month-year-font-size: $drp-font-size-base !default;
157
+ $drp-month-year-font-weight: $drp-font-weight-semibold !default;
158
+ $drp-month-year-padding-v: $drp-spacing-sm !default;
159
+ $drp-month-year-padding-h: $drp-spacing-md !default;
160
+ $drp-month-year-bg-hover: $drp-color-neutral-lighter !default;
161
+ $drp-month-year-bg-active: $drp-color-neutral-light !default;
162
+ $drp-month-year-border-radius: $drp-border-radius !default;
163
+
164
+ // --------------------------------------
165
+ // Navigation Buttons
166
+ // --------------------------------------
167
+ $drp-nav-size: 2rem !default;
168
+ $drp-nav-font-size: $drp-font-size-lg !default;
169
+ $drp-nav-border-color: $drp-border-color !default;
170
+ $drp-nav-border-width: $drp-border-width-base !default;
171
+ $drp-nav-border-radius: $drp-border-radius !default;
172
+ $drp-nav-bg-hover: $drp-color-neutral-lighter !default;
173
+ $drp-nav-bg-active: $drp-color-neutral-light !default;
174
+ $drp-nav-border-color-hover: $drp-color-accent !default;
175
+ $drp-nav-opacity-disabled: $drp-opacity-disabled !default;
176
+
177
+ // --------------------------------------
178
+ // Rolling Selector (Month/Year Picker)
179
+ // --------------------------------------
180
+ $drp-rolling-gap: $drp-spacing-md !default;
181
+ $drp-rolling-margin-bottom: $drp-spacing-md !default;
182
+ $drp-rolling-border-color: $drp-border-color !default;
183
+ $drp-rolling-border-width: $drp-border-width-base !default;
184
+ $drp-rolling-border-radius: $drp-border-radius !default;
185
+ $drp-rolling-scrollbar-width: 6px !default;
186
+ $drp-rolling-scrollbar-bg: $drp-color-neutral-lighter !default;
187
+ $drp-rolling-scrollbar-thumb: $drp-border-color !default;
188
+ $drp-rolling-scrollbar-thumb-hover: $drp-color-accent !default;
189
+
190
+ $drp-rolling-item-padding-v: $drp-spacing-sm !default;
191
+ $drp-rolling-item-padding-h: $drp-spacing-md !default;
192
+ $drp-rolling-item-font-size: $drp-font-size-sm !default;
193
+ $drp-rolling-item-bg-hover: $drp-color-neutral-lighter !default;
194
+ $drp-rolling-item-bg-selected: $drp-color-accent !default;
195
+ $drp-rolling-item-color-selected: $drp-color-white !default;
196
+ $drp-rolling-item-font-weight-selected: $drp-font-weight-semibold !default;
197
+
198
+ // --------------------------------------
199
+ // Weekday Labels
200
+ // --------------------------------------
201
+ $drp-weekday-font-size: $drp-font-size-xs !default;
202
+ $drp-weekday-font-weight: $drp-font-weight-semibold !default;
203
+ $drp-weekday-color: $drp-color-neutral-dark !default;
204
+ $drp-weekday-padding: $drp-spacing-xs !default;
205
+ $drp-weekday-margin-bottom: $drp-spacing-sm !default;
206
+
207
+ // --------------------------------------
208
+ // Day Cells
209
+ // --------------------------------------
210
+ $drp-day-font-size: $drp-font-size-sm !default;
211
+ $drp-day-border-radius: $drp-border-radius !default;
212
+ $drp-day-border-width: 2px !default;
213
+ $drp-day-border-color: transparent !default;
214
+ $drp-day-bg-hover: $drp-color-neutral-lighter !default;
215
+ $drp-day-border-color-hover: $drp-color-accent !default;
216
+
217
+ // Day - Today
218
+ $drp-day-today-border-color: $drp-color-accent !default;
219
+ $drp-day-today-font-weight: $drp-font-weight-semibold !default;
220
+
221
+ // Day - Selected
222
+ $drp-day-selected-bg: $drp-color-accent !default;
223
+ $drp-day-selected-color: $drp-color-white !default;
224
+ $drp-day-selected-font-weight: $drp-font-weight-semibold !default;
225
+ $drp-day-selected-bg-hover: $drp-color-accent-dark !default;
226
+
227
+ // Day - Focused (keyboard)
228
+ $drp-day-focused-outline-color: $drp-color-accent !default;
229
+ $drp-day-focused-outline-width: 2px !default;
230
+ $drp-day-focused-outline-offset: 2px !default;
231
+
232
+ // Day - Disabled
233
+ $drp-day-disabled-color: $drp-color-neutral-dark !default;
234
+ $drp-day-disabled-opacity: $drp-opacity-disabled !default;
235
+ $drp-day-disabled-pattern-opacity: 0.1 !default;
236
+
237
+ // Day - Other Month
238
+ $drp-day-other-month-color: $drp-color-neutral-dark !default;
239
+ $drp-day-other-month-opacity: $drp-opacity-other-month !default;
240
+
241
+ // Day - Range Selection
242
+ $drp-day-range-start-bg: $drp-color-accent !default;
243
+ $drp-day-range-start-color: $drp-color-white !default;
244
+ $drp-day-range-end-bg: $drp-color-accent !default;
245
+ $drp-day-range-end-color: $drp-color-white !default;
246
+ $drp-day-in-range-bg-opacity: 0.15 !default;
247
+ $drp-day-in-range-hover-bg-opacity: 0.25 !default;
248
+
249
+ // Day - Dragging
250
+ $drp-day-dragging-opacity: $drp-opacity-dragging !default;
251
+ $drp-day-dragging-scale: 1.1 !default;
252
+ $drp-day-drag-preview-bg-opacity: 0.30 !default;
253
+ $drp-day-drag-preview-border-style: dashed !default;
254
+ $drp-day-drag-preview-edge-bg-opacity: 0.60 !default;
255
+ $drp-day-drag-invalid-bg: $drp-color-error !default;
256
+ $drp-day-drag-invalid-bg-opacity: 0.20 !default;
257
+
258
+ // --------------------------------------
259
+ // Badge System
260
+ // --------------------------------------
261
+ $drp-badge-font-size: $drp-font-size-2xs !default;
262
+ $drp-badge-padding-v: 1px !default;
263
+ $drp-badge-padding-h: 2px !default;
264
+ $drp-badge-border-radius: 2px !default;
265
+ $drp-badge-max-height: $drp-font-size-base !default;
266
+
267
+ // Badge Type Colors
268
+ $drp-badge-number-bg: $drp-color-success !default;
269
+ $drp-badge-number-color: $drp-color-white !default;
270
+ $drp-badge-count-bg: $drp-color-error !default;
271
+ $drp-badge-count-color: $drp-color-white !default;
272
+ $drp-badge-text-bg: $drp-color-neutral-dark !default;
273
+ $drp-badge-text-color: $drp-color-white !default;
274
+
275
+ // Special Date Highlighting (for calendar day background tinting)
276
+ $drp-holiday-bg-opacity: 0.10 !default;
277
+ $drp-holiday-hover-bg-opacity: 0.20 !default;
278
+ $drp-event-bg-opacity: 0.10 !default;
279
+ $drp-event-hover-bg-opacity: 0.20 !default;
280
+
281
+ // --------------------------------------
282
+ // Selection Summary
283
+ // --------------------------------------
284
+ $drp-summary-padding: $drp-spacing-md !default;
285
+ $drp-summary-border-color: $drp-border-color !default;
286
+ $drp-summary-border-width: $drp-border-width-base !default;
287
+ $drp-summary-font-size: $drp-font-size-sm !default;
288
+ $drp-summary-color: $drp-color-neutral-dark !default;
289
+ $drp-summary-count-font-weight: $drp-font-weight-semibold !default;
290
+ $drp-summary-count-color: $drp-color-accent !default;
291
+ $drp-summary-count-font-size: $drp-font-size-base !default;
292
+
293
+ // --------------------------------------
294
+ // Tooltip
295
+ // --------------------------------------
296
+ $drp-tooltip-bg: $drp-color-neutral-darkest !default;
297
+ $drp-tooltip-color: $drp-color-white !default;
298
+ $drp-tooltip-padding-v: $drp-spacing-xs !default;
299
+ $drp-tooltip-padding-h: $drp-spacing-sm !default;
300
+ $drp-tooltip-border-radius: $drp-border-radius !default;
301
+ $drp-tooltip-font-size: $drp-font-size-xs !default;
302
+ $drp-tooltip-line-height: 1.4 !default;
303
+ $drp-tooltip-max-width: 200px !default;
304
+ $drp-tooltip-arrow-size: 8px !default;
305
+
306
+ // --------------------------------------
307
+ // Action Buttons
308
+ // --------------------------------------
309
+ $drp-actions-gap: $drp-spacing-sm !default;
310
+ $drp-actions-padding-top: $drp-spacing-sm !default;
311
+ $drp-actions-border-color: $drp-border-color !default;
312
+ $drp-actions-border-width: $drp-border-width-base !default;
313
+
314
+ $drp-button-padding-v: $drp-spacing-sm !default;
315
+ $drp-button-padding-h: $drp-spacing-md !default;
316
+ $drp-button-font-size: $drp-font-size-sm !default;
317
+ $drp-button-font-weight: $drp-font-weight-medium !default;
318
+ $drp-button-border-width: $drp-border-width-base !default;
319
+ $drp-button-border-color: $drp-border-color !default;
320
+ $drp-button-border-radius: $drp-border-radius !default;
321
+ $drp-button-bg-hover: $drp-color-neutral-lighter !default;
322
+ $drp-button-border-color-hover: $drp-color-accent !default;
323
+
324
+ $drp-button-today-color: $drp-color-accent !default;
325
+ $drp-button-clear-color: $drp-color-neutral-dark !default;
326
+ $drp-button-cancel-color: $drp-color-neutral-dark !default;
327
+
328
+ $drp-button-apply-bg: $drp-color-accent !default;
329
+ $drp-button-apply-color: $drp-color-white !default;
330
+ $drp-button-apply-border-color: $drp-color-accent !default;
331
+ $drp-button-apply-bg-hover: $drp-color-accent-dark !default;
332
+
333
+ // --------------------------------------
334
+ // Multi-Month Layout
335
+ // --------------------------------------
336
+ $drp-months-gap: $drp-spacing-lg !default;
337
+ $drp-grid-columns: 3 !default;
338
+ $drp-grid-rows: 2 !default;
339
+
340
+ // ==============================================================================
341
+ // SIZE VARIANT MULTIPLIERS
342
+ // ==============================================================================
343
+ // Used by modifiers partial for size variants
344
+
345
+ $drp-size-xs-multiplier: 0.7 !default;
346
+ $drp-size-sm-multiplier: 0.85 !default;
347
+ $drp-size-md-multiplier: 1 !default;
348
+ $drp-size-lg-multiplier: 1.2 !default;
349
+ $drp-size-xl-multiplier: 1.4 !default;
@@ -0,0 +1,30 @@
1
+ // ==============================================================================
2
+ // DATE RANGE PICKER COMPONENT - MAIN ENTRY POINT
3
+ // ==============================================================================
4
+ //
5
+ // File structure:
6
+ // ├── _variables.scss - All SCSS variables with $drp- prefix
7
+ // ├── _base.scss - Base container, FOUC prevention, CSS custom properties
8
+ // ├── _header-navigation.scss - Header, month/year display, nav buttons, rolling selector
9
+ // ├── _calendar-grid.scss - Weekdays, day cells, all day states
10
+ // ├── _badges.scss - Badge system for events/markers
11
+ // ├── _summary-actions.scss - Selection summary and action buttons
12
+ // ├── _tooltips.scss - Floating UI tooltips
13
+ // ├── _loading.scss - Loading overlay and spinner for async validation
14
+ // ├── _modifiers.scss - Size variants, font/spacing scaling, responsive
15
+ // └── main.scss - This file (imports all partials)
16
+ //
17
+ // Import order matters - variables must be first, modifiers should be last
18
+ //
19
+ // ==============================================================================
20
+
21
+ // Import all partials in dependency order
22
+ @use 'variables';
23
+ @use 'base';
24
+ @use 'header-navigation';
25
+ @use 'calendar-grid';
26
+ @use 'badges';
27
+ @use 'summary-actions';
28
+ @use 'tooltips';
29
+ @use 'loading';
30
+ @use 'modifiers';