@techsio/ui-kit 0.44.0 → 0.44.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/internal/date-picker-coordinator.js +166 -0
  2. package/dist/molecules/date-picker.js +1374 -0
  3. package/dist/src/internal/date-picker-coordinator.d.ts +42 -0
  4. package/dist/src/internal/date-picker-coordinator.d.ts.map +1 -0
  5. package/dist/src/molecules/date-picker.d.ts +159 -0
  6. package/dist/src/molecules/date-picker.d.ts.map +1 -0
  7. package/dist/stories/changelog/changelog.stories.d.ts.map +1 -1
  8. package/dist/stories/molecules/date-picker.stories.d.ts +141 -0
  9. package/dist/stories/molecules/date-picker.stories.d.ts.map +1 -0
  10. package/dist/test/date-picker.behavior.spec.d.ts +2 -0
  11. package/dist/test/date-picker.behavior.spec.d.ts.map +1 -0
  12. package/package.json +10 -3
  13. package/src/tokens/components/components.css +1 -0
  14. package/src/tokens/components/molecules/_date-picker.css +225 -0
package/src/tokens/components/molecules/_date-picker.css ADDED
@@ -0,0 +1,225 @@
1
+ /*
2
+ * DatePicker — compact segmented field and calendar surface.
3
+ *
4
+ * The reference layer binds the component to shared form-control and semantic
5
+ * foundations. The derived layer is the only DatePicker palette consumed by
6
+ * the component source.
7
+ */
8
+ @theme static {
9
+ /* Reference layer */
10
+ --color-date-picker-surface: var(--color-fill-overlay);
11
+ --color-date-picker-fill: var(--color-form-control-bg);
12
+ --color-date-picker-fill-hover: var(--color-form-control-bg-hover);
13
+ --color-date-picker-fill-active: var(--color-form-control-bg-focus);
14
+ --color-date-picker-accent: var(--color-bg-primary-base);
15
+ --color-date-picker-accent-hover: var(--color-bg-primary-hover);
16
+ --color-date-picker-accent-foreground: var(--color-fg-light);
17
+ --color-date-picker-text: var(--color-fg-primary);
18
+ --color-date-picker-text-muted: var(--color-fg-secondary);
19
+ --color-date-picker-placeholder: var(--color-form-control-fg-placeholder);
20
+ --color-date-picker-disabled: var(--color-form-control-fg-disabled);
21
+ --color-date-picker-border: var(--color-form-control-border);
22
+ --color-date-picker-border-hover: var(--color-form-control-border-hover);
23
+ --color-date-picker-focus: var(--color-form-control-border-focus);
24
+ --color-date-picker-ring: var(--color-form-control-ring);
25
+ --color-date-picker-error: var(--color-danger);
26
+ --color-date-picker-error-hover: var(--color-border-danger-hover);
27
+ --color-date-picker-error-focus: var(--color-border-danger-focus);
28
+ --color-date-picker-range: color-mix(
29
+ in oklab,
30
+ var(--color-date-picker-accent) 20%,
31
+ transparent
32
+ );
33
+ --color-date-picker-transparent: var(--color-bg-transparent);
34
+
35
+ /* Derived color layer */
36
+ --color-date-picker-label-fg: var(--color-date-picker-text);
37
+ --color-date-picker-control-bg: var(--color-date-picker-fill);
38
+ --color-date-picker-control-bg-hover: var(--color-date-picker-fill-hover);
39
+ --color-date-picker-control-bg-focus: var(--color-date-picker-fill-active);
40
+ --color-date-picker-control-bg-readonly: var(--color-date-picker-fill);
41
+ --color-date-picker-control-bg-disabled: var(
42
+ --color-form-control-bg-disabled
43
+ );
44
+ --color-date-picker-control-fg: var(--color-date-picker-text);
45
+ --color-date-picker-control-fg-disabled: var(--color-date-picker-disabled);
46
+ --color-date-picker-control-border: var(--color-date-picker-border);
47
+ --color-date-picker-control-border-hover: var(
48
+ --color-date-picker-border-hover
49
+ );
50
+ --color-date-picker-control-border-focus: var(--color-date-picker-focus);
51
+ --color-date-picker-control-border-error: var(--color-date-picker-error);
52
+ --color-date-picker-control-border-error-hover: var(
53
+ --color-date-picker-error-hover
54
+ );
55
+ --color-date-picker-control-border-error-focus: var(
56
+ --color-date-picker-error-focus
57
+ );
58
+ --color-date-picker-control-border-disabled: var(
59
+ --color-form-control-border-disabled
60
+ );
61
+ --color-date-picker-control-ring: var(--color-date-picker-ring);
62
+ --color-date-picker-segment-bg-focus: var(--color-date-picker-fill-hover);
63
+ --color-date-picker-segment-fg-placeholder: var(
64
+ --color-date-picker-placeholder
65
+ );
66
+ --color-date-picker-range-separator-fg: var(--color-date-picker-text-muted);
67
+ --color-date-picker-trigger-bg: var(--color-date-picker-fill);
68
+ --color-date-picker-trigger-bg-hover: var(--color-date-picker-fill-hover);
69
+ --color-date-picker-trigger-bg-active: var(--color-date-picker-fill-active);
70
+ --color-date-picker-trigger-fg: var(--color-date-picker-text);
71
+ --color-date-picker-trigger-fg-disabled: var(--color-date-picker-disabled);
72
+ --color-date-picker-trigger-ring: var(--color-date-picker-ring);
73
+ --color-date-picker-content-bg: var(--color-date-picker-surface);
74
+ --color-date-picker-content-fg: var(--color-date-picker-text);
75
+ --color-date-picker-content-border: var(--color-date-picker-border);
76
+ --color-date-picker-navigation-bg-hover: var(--color-date-picker-fill-hover);
77
+ --color-date-picker-navigation-fg: var(--color-date-picker-text);
78
+ --color-date-picker-navigation-fg-disabled: var(--color-date-picker-disabled);
79
+ --color-date-picker-navigation-ring: var(--color-date-picker-ring);
80
+ --color-date-picker-weekday-fg: var(--color-date-picker-text);
81
+ --color-date-picker-day-bg: var(--color-date-picker-transparent);
82
+ --color-date-picker-day-bg-hover: var(--color-date-picker-fill-hover);
83
+ --color-date-picker-day-bg-range: var(--color-date-picker-range);
84
+ --color-date-picker-day-bg-range-hover: color-mix(
85
+ in oklab,
86
+ var(--color-date-picker-accent) 28%,
87
+ transparent
88
+ );
89
+ --color-date-picker-day-bg-selected: var(--color-date-picker-accent);
90
+ --color-date-picker-day-bg-selected-hover: var(
91
+ --color-date-picker-accent-hover
92
+ );
93
+ --color-date-picker-day-fg: var(--color-date-picker-text);
94
+ --color-date-picker-day-fg-selected: var(
95
+ --color-date-picker-accent-foreground
96
+ );
97
+ --color-date-picker-day-fg-unavailable: var(--color-date-picker-disabled);
98
+ --color-date-picker-day-border: var(--color-date-picker-transparent);
99
+ --color-date-picker-day-today-border: var(--color-date-picker-accent);
100
+ --color-date-picker-day-ring: var(--color-date-picker-ring);
101
+ --color-date-picker-time-bg: var(--color-date-picker-fill);
102
+ --color-date-picker-time-fg: var(--color-date-picker-text);
103
+ --color-date-picker-time-label-fg: var(--color-date-picker-text);
104
+ --color-date-picker-time-border: var(--color-date-picker-border);
105
+ --color-date-picker-time-ring: var(--color-date-picker-ring);
106
+ --color-date-picker-footer-border: var(--color-date-picker-border);
107
+ --color-date-picker-month-divider-border: var(--color-date-picker-border);
108
+
109
+ /* Geometry and density */
110
+ --border-width-date-picker-control: var(--border-width-form-control);
111
+ --border-width-date-picker-content: var(--border-sm);
112
+ --border-width-date-picker-day: var(--border-sm);
113
+ --border-width-date-picker-time: var(--border-width-form-control);
114
+ --radius-date-picker-control-sm: var(--radius-form-control-sm);
115
+ --radius-date-picker-control-md: var(--radius-form-control-md);
116
+ --radius-date-picker-control-lg: var(--radius-form-control-lg);
117
+ --radius-date-picker-content: var(--radius-popover);
118
+ --radius-date-picker-day: var(--radius-button-sm);
119
+ --radius-date-picker-time: var(--radius-form-control-sm);
120
+ --shadow-date-picker-content: var(--shadow-popover);
121
+
122
+ --gap-date-picker-root: var(--spacing-form-field-gap);
123
+ --gap-date-picker-control: var(--spacing-100);
124
+ --gap-date-picker-indicator: var(--spacing-50);
125
+ --gap-date-picker-calendar: var(--spacing-100);
126
+ --gap-date-picker-time: var(--spacing-100);
127
+ --gap-date-picker-footer: var(--spacing-100);
128
+ --spacing-date-picker-enter-offset: var(--spacing-50);
129
+ --padding-date-picker-segments-sm: var(--spacing-100);
130
+ --padding-date-picker-segments-md: var(--spacing-150);
131
+ --padding-date-picker-segments-lg: var(--spacing-200);
132
+ --padding-date-picker-segment: var(--spacing-50);
133
+ --padding-date-picker-range-separator: var(--spacing-100);
134
+ --padding-date-picker-content: var(--dimension-16);
135
+ --padding-date-picker-content-timed: var(--dimension-10);
136
+ --padding-date-picker-calendar-cell: var(--spacing-100);
137
+ --padding-date-picker-time-input: var(--spacing-50);
138
+ --padding-date-picker-time: var(--dimension-10);
139
+ --padding-date-picker-footer: var(--dimension-10);
140
+
141
+ --height-date-picker-control-sm: var(--height-form-control-sm);
142
+ --height-date-picker-control-md: var(--height-form-control-md);
143
+ --height-date-picker-control-lg: var(--height-form-control-lg);
144
+ --size-date-picker-navigation: var(--size-icon-control-md);
145
+ --size-date-picker-day-sm: var(--dimension-28);
146
+ --size-date-picker-day-md: var(--dimension-32);
147
+ --size-date-picker-day-lg: var(--dimension-36);
148
+ --size-date-picker-day-timed: var(--dimension-28);
149
+ --height-date-picker-day-sm: var(--size-date-picker-day-sm);
150
+ --height-date-picker-day-md: var(--size-date-picker-day-md);
151
+ --height-date-picker-day-lg: var(--size-date-picker-day-lg);
152
+ --height-date-picker-day-timed: var(--size-date-picker-day-timed);
153
+ --width-date-picker-content: calc(var(--dimension-40) * 7);
154
+ --width-date-picker-content-range: calc(
155
+ var(--width-date-picker-content) *
156
+ 2 +
157
+ var(--gap-date-picker-calendar) +
158
+ var(--padding-date-picker-content) *
159
+ 2
160
+ );
161
+ --container-date-picker-viewport: calc(100vw - var(--spacing-250) * 2);
162
+ --size-date-picker-segment: var(--dimension-24);
163
+ --height-date-picker-time-field: var(--height-form-control-sm);
164
+ --width-date-picker-time-field: var(--dimension-40);
165
+
166
+ --text-date-picker-sm: var(--text-sm);
167
+ --text-date-picker-md: var(--text-md);
168
+ --text-date-picker-lg: var(--text-lg);
169
+ --text-date-picker-content-sm: var(--text-xs);
170
+ --text-date-picker-content-md: var(--text-sm);
171
+ --text-date-picker-content-lg: var(--text-sm);
172
+ --text-date-picker-weekday: var(--text-xs);
173
+ --text-date-picker-time-label: var(--text-xs);
174
+ --font-weight-date-picker-view: var(--font-weight-medium);
175
+ --font-weight-date-picker-weekday: var(--font-weight-medium);
176
+ --opacity-date-picker-outside: var(--opacity-disabled);
177
+ --opacity-date-picker-disabled: var(--opacity-disabled);
178
+ }
179
+
180
+ @utility date-picker-scrollbar-hidden {
181
+ scrollbar-width: none;
182
+
183
+ &::-webkit-scrollbar {
184
+ display: none;
185
+ }
186
+ }
187
+
188
+ @utility date-picker-segment-size {
189
+ min-width: var(--size-date-picker-segment);
190
+ min-height: var(--size-date-picker-segment);
191
+ }
192
+
193
+ @utility token-icon-date-picker-calendar {
194
+ @apply icon-[mdi--calendar-blank-outline];
195
+ }
196
+
197
+ @utility token-icon-date-picker-clear {
198
+ @apply token-icon-close;
199
+ }
200
+
201
+ @utility token-icon-date-picker-previous {
202
+ @apply token-icon-chevron-left;
203
+ }
204
+
205
+ @utility token-icon-date-picker-next {
206
+ @apply token-icon-chevron-right;
207
+ }
208
+
209
+ @utility token-icon-date-picker-previous-year {
210
+ @apply icon-[mdi--chevron-double-left];
211
+ }
212
+
213
+ @utility token-icon-date-picker-next-year {
214
+ @apply icon-[mdi--chevron-double-right];
215
+ }
216
+
217
+ @utility token-date-picker-time-input {
218
+ appearance: textfield;
219
+
220
+ &::-webkit-inner-spin-button,
221
+ &::-webkit-outer-spin-button {
222
+ margin: 0;
223
+ appearance: none;
224
+ }
225
+ }