@ecohouse/ui 0.1.3 → 0.1.5
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 +33 -13
- package/dist/index.cjs +1182 -104
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +206 -5
- package/dist/index.d.ts +206 -5
- package/dist/index.js +1171 -107
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Avatar/Avatar.stories.tsx +133 -0
- package/src/components/Avatar/Avatar.tsx +337 -0
- package/src/components/Avatar/index.ts +2 -0
- package/src/components/DatePicker/DatePicker.stories.tsx +172 -0
- package/src/components/DatePicker/DatePicker.tsx +628 -0
- package/src/components/DatePicker/index.ts +7 -0
- package/src/components/Select/Select.tsx +1 -1
- package/src/components/index.ts +11 -0
- package/src/icons/Calendar/CalendarIcon.tsx +21 -0
- package/src/icons/Calendar/CalendarIcon.web.tsx +27 -0
- package/src/icons/Calendar/calendarPath.ts +3 -0
- package/src/icons/Calendar/index.ts +1 -0
- package/src/icons/CalendarOutline/CalendarOutlineIcon.tsx +25 -0
- package/src/icons/CalendarOutline/CalendarOutlineIcon.web.tsx +31 -0
- package/src/icons/CalendarOutline/calendarOutlinePath.ts +3 -0
- package/src/icons/CalendarOutline/index.ts +1 -0
- package/src/icons/ChevronLeft/ChevronLeftIcon.tsx +21 -0
- package/src/icons/ChevronLeft/ChevronLeftIcon.web.tsx +27 -0
- package/src/icons/ChevronLeft/chevronLeftPath.ts +2 -0
- package/src/icons/ChevronLeft/index.ts +1 -0
- package/src/icons/Heart/HeartIcon.tsx +23 -0
- package/src/icons/Heart/HeartIcon.web.tsx +29 -0
- package/src/icons/Heart/heartPath.ts +3 -0
- package/src/icons/Heart/index.ts +1 -0
- package/src/icons/HelpCircle/HelpCircleIcon.tsx +25 -0
- package/src/icons/HelpCircle/HelpCircleIcon.web.tsx +31 -0
- package/src/icons/HelpCircle/helpCirclePath.ts +3 -0
- package/src/icons/HelpCircle/index.ts +1 -0
- package/src/icons/LayoutGrid/LayoutGridIcon.tsx +25 -0
- package/src/icons/LayoutGrid/LayoutGridIcon.web.tsx +31 -0
- package/src/icons/LayoutGrid/index.ts +1 -0
- package/src/icons/LayoutGrid/layoutGridPath.ts +3 -0
- package/src/icons/LogOut/LogOutIcon.tsx +21 -0
- package/src/icons/LogOut/LogOutIcon.web.tsx +27 -0
- package/src/icons/LogOut/index.ts +1 -0
- package/src/icons/LogOut/logOutPath.ts +3 -0
- package/src/icons/Settings/SettingsIcon.tsx +21 -0
- package/src/icons/Settings/SettingsIcon.web.tsx +27 -0
- package/src/icons/Settings/index.ts +1 -0
- package/src/icons/Settings/settingsPath.ts +3 -0
- package/src/icons/Video/VideoIcon.tsx +24 -0
- package/src/icons/Video/VideoIcon.web.tsx +30 -0
- package/src/icons/Video/index.ts +1 -0
- package/src/icons/Video/videoPath.ts +5 -0
- package/src/icons/index.ts +9 -0
- package/src/icons/registry.ts +33 -3
- package/src/index.ts +30 -1
- package/src/primitives/MenuItem/MenuItem.stories.tsx +98 -0
- package/src/primitives/MenuItem/MenuItem.tsx +138 -0
- package/src/primitives/MenuItem/index.ts +2 -0
- package/src/primitives/index.ts +2 -0
- package/src/theme/colors.ts +2 -0
- package/src/theme/index.ts +2 -0
- package/src/theme/typography.ts +65 -0
- package/src/utils/dateUtils.ts +86 -0
package/dist/index.cjs
CHANGED
|
@@ -9,7 +9,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
9
9
|
|
|
10
10
|
var Svg__default = /*#__PURE__*/_interopDefault(Svg);
|
|
11
11
|
|
|
12
|
-
// src/components/
|
|
12
|
+
// src/components/Avatar/Avatar.tsx
|
|
13
13
|
|
|
14
14
|
// src/icons/ArrowRight/arrowRightPath.ts
|
|
15
15
|
var ARROW_RIGHT_PATH = "M4.16667 10H15.8333M15.8333 10L10 4.16667M15.8333 10L10 15.8333";
|
|
@@ -40,7 +40,9 @@ var colors = {
|
|
|
40
40
|
red: "#A63E3E",
|
|
41
41
|
lightGrey: "#B7B7B7",
|
|
42
42
|
primaryMuted: "#B464360F",
|
|
43
|
+
primaryHover: "#B4643633",
|
|
43
44
|
redMuted: "#A63E3E0F",
|
|
45
|
+
redHover: "#A63E3E33",
|
|
44
46
|
grey0: grey["0"],
|
|
45
47
|
grey50: grey["0.5"],
|
|
46
48
|
grey100: grey["1"],
|
|
@@ -124,6 +126,61 @@ var selectTypography = {
|
|
|
124
126
|
letterSpacing: 0.36
|
|
125
127
|
}
|
|
126
128
|
};
|
|
129
|
+
var avatarTypography = {
|
|
130
|
+
name: {
|
|
131
|
+
fontFamily: fonts.sans,
|
|
132
|
+
fontSize: 14,
|
|
133
|
+
fontWeight: "600",
|
|
134
|
+
lineHeight: 14,
|
|
135
|
+
letterSpacing: 0
|
|
136
|
+
},
|
|
137
|
+
email: {
|
|
138
|
+
fontFamily: fonts.sans,
|
|
139
|
+
fontSize: 12,
|
|
140
|
+
fontWeight: "400",
|
|
141
|
+
lineHeight: 12,
|
|
142
|
+
letterSpacing: 0
|
|
143
|
+
},
|
|
144
|
+
menuItem: {
|
|
145
|
+
fontFamily: fonts.sans,
|
|
146
|
+
fontSize: 12,
|
|
147
|
+
fontWeight: "600",
|
|
148
|
+
lineHeight: 12,
|
|
149
|
+
letterSpacing: 0
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
var datePickerTypography = {
|
|
153
|
+
field: {
|
|
154
|
+
fontFamily: fonts.sans,
|
|
155
|
+
fontSize: 12,
|
|
156
|
+
fontWeight: "400",
|
|
157
|
+
lineHeight: 12,
|
|
158
|
+
letterSpacing: 0.36
|
|
159
|
+
},
|
|
160
|
+
/** Calendar month/year heading — Bold, centered, White. */
|
|
161
|
+
monthHeading: {
|
|
162
|
+
fontFamily: fonts.sans,
|
|
163
|
+
fontSize: 14,
|
|
164
|
+
fontWeight: "700",
|
|
165
|
+
lineHeight: 14,
|
|
166
|
+
letterSpacing: 0
|
|
167
|
+
},
|
|
168
|
+
/** Weekday header (ԵՐ, ԵՔ, ...) — Regular, uppercase, centered, Grey/300. */
|
|
169
|
+
weekday: {
|
|
170
|
+
fontFamily: fonts.sans,
|
|
171
|
+
fontSize: 12,
|
|
172
|
+
fontWeight: "400",
|
|
173
|
+
lineHeight: 12,
|
|
174
|
+
letterSpacing: 0
|
|
175
|
+
},
|
|
176
|
+
day: {
|
|
177
|
+
fontFamily: fonts.sans,
|
|
178
|
+
fontSize: 14,
|
|
179
|
+
fontWeight: "400",
|
|
180
|
+
lineHeight: 14,
|
|
181
|
+
letterSpacing: 0
|
|
182
|
+
}
|
|
183
|
+
};
|
|
127
184
|
var textareaTypography = {
|
|
128
185
|
label: {
|
|
129
186
|
fontFamily: fonts.sans,
|
|
@@ -209,6 +266,40 @@ function BuildingIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
|
|
|
209
266
|
) });
|
|
210
267
|
}
|
|
211
268
|
|
|
269
|
+
// src/icons/Calendar/calendarPath.ts
|
|
270
|
+
var CALENDAR_PATH = "M14 6.66668H2M14 8.33334V5.86668C14 4.74657 14 4.18652 13.782 3.7587C13.5903 3.38237 13.2843 3.07641 12.908 2.88466C12.4802 2.66668 11.9201 2.66668 10.8 2.66668H5.2C4.0799 2.66668 3.51984 2.66668 3.09202 2.88466C2.71569 3.07641 2.40973 3.38237 2.21799 3.7587C2 4.18652 2 4.74657 2 5.86668V11.4667C2 12.5868 2 13.1468 2.21799 13.5747C2.40973 13.951 2.71569 14.2569 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667H8M10.6667 1.33334V4.00001M5.33333 1.33334V4.00001M9.66667 12.6667L11 14L14 11";
|
|
271
|
+
function CalendarIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }) {
|
|
272
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
273
|
+
Svg.Path,
|
|
274
|
+
{
|
|
275
|
+
d: CALENDAR_PATH,
|
|
276
|
+
stroke: color,
|
|
277
|
+
strokeWidth,
|
|
278
|
+
strokeLinecap: "round",
|
|
279
|
+
strokeLinejoin: "round"
|
|
280
|
+
}
|
|
281
|
+
) });
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
// src/icons/CalendarOutline/calendarOutlinePath.ts
|
|
285
|
+
var CALENDAR_OUTLINE_PATH = "M10.6667 1.33334V4.00001M5.33333 1.33334V4.00001M2 6.66668H14M5.2 2.66668H10.8C11.9201 2.66668 12.4802 2.66668 12.908 2.88466C13.2843 3.07641 13.5903 3.38237 13.782 3.7587C14 4.18652 14 4.74657 14 5.86668V11.4667C14 12.5868 14 13.1468 13.782 13.5747C13.5903 13.951 13.2843 14.2569 12.908 14.4487C12.4802 14.6667 11.9201 14.6667 10.8 14.6667H5.2C4.0799 14.6667 3.51984 14.6667 3.09202 14.4487C2.71569 14.2569 2.40973 13.951 2.21799 13.5747C2 13.1468 2 12.5868 2 11.4667V5.86668C2 4.74657 2 4.18652 2.21799 3.7587C2.40973 3.38237 2.71569 3.07641 3.09202 2.88466C3.51984 2.66668 4.0799 2.66668 5.2 2.66668Z";
|
|
286
|
+
function CalendarOutlineIcon({
|
|
287
|
+
size = 20,
|
|
288
|
+
color = colors.primary,
|
|
289
|
+
strokeWidth = 1.5
|
|
290
|
+
}) {
|
|
291
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
292
|
+
Svg.Path,
|
|
293
|
+
{
|
|
294
|
+
d: CALENDAR_OUTLINE_PATH,
|
|
295
|
+
stroke: color,
|
|
296
|
+
strokeWidth,
|
|
297
|
+
strokeLinecap: "round",
|
|
298
|
+
strokeLinejoin: "round"
|
|
299
|
+
}
|
|
300
|
+
) });
|
|
301
|
+
}
|
|
302
|
+
|
|
212
303
|
// src/icons/Camera/cameraPath.ts
|
|
213
304
|
var CAMERA_PATH = "M9.48898 7H6.2002C5.08009 7 4.51962 7 4.0918 7.21799C3.71547 7.40973 3.40973 7.71547 3.21799 8.0918C3 8.51962 3 9.08009 3 10.2002V15.8002C3 16.9203 3 17.4796 3.21799 17.9074C3.40973 18.2837 3.71547 18.5905 4.0918 18.7822C4.5192 19 5.07899 19 6.19691 19H17.8031C18.921 19 19.48 19 19.9074 18.7822C20.2837 18.5905 20.5905 18.2837 20.7822 17.9074C21 17.48 21 16.921 21 15.8031V10.1969C21 9.07899 21 8.5192 20.7822 8.0918C20.5905 7.71547 20.2837 7.40973 19.9074 7.21799C19.4796 7 18.9203 7 17.8002 7H14.5108M9.48898 7H9.55078M9.48898 7C9.50151 7.00001 9.51468 7 9.52857 7L9.55078 7M9.48898 7C9.38286 6.99995 9.32339 6.99941 9.27637 6.99414C8.68878 6.92835 8.28578 6.36908 8.40918 5.79084C8.42066 5.73703 8.44336 5.66894 8.4883 5.53412L8.49023 5.52841C8.54156 5.37443 8.56723 5.29743 8.59558 5.22949C8.88586 4.53389 9.54322 4.06083 10.2949 4.00541C10.3683 4 10.449 4 10.6113 4H13.3886C13.5509 4 13.6322 4 13.7057 4.00541C14.4574 4.06083 15.114 4.53389 15.4043 5.22949C15.4326 5.29743 15.4584 5.37434 15.5098 5.52832C15.556 5.66699 15.5791 5.73636 15.5908 5.79093C15.7142 6.36917 15.3118 6.92835 14.7242 6.99414C14.6772 6.99941 14.6171 6.99995 14.5108 7M9.55078 7H14.449M14.449 7H14.5108M14.449 7L14.4712 7C14.4851 7 14.4983 7.00001 14.5108 7M12 16C10.3431 16 9 14.6569 9 13C9 11.3431 10.3431 10 12 10C13.6569 10 15 11.3431 15 13C15 14.6569 13.6569 16 12 16Z";
|
|
214
305
|
function CameraIcon({ size = 24, color = colors.primary, strokeWidth = 2 }) {
|
|
@@ -273,6 +364,21 @@ function ChevronDownIcon({
|
|
|
273
364
|
) });
|
|
274
365
|
}
|
|
275
366
|
|
|
367
|
+
// src/icons/ChevronLeft/chevronLeftPath.ts
|
|
368
|
+
var CHEVRON_LEFT_PATH = "M12.5 15L7.5 10L12.5 5";
|
|
369
|
+
function ChevronLeftIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
|
|
370
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
371
|
+
Svg.Path,
|
|
372
|
+
{
|
|
373
|
+
d: CHEVRON_LEFT_PATH,
|
|
374
|
+
stroke: color,
|
|
375
|
+
strokeWidth,
|
|
376
|
+
strokeLinecap: "round",
|
|
377
|
+
strokeLinejoin: "round"
|
|
378
|
+
}
|
|
379
|
+
) });
|
|
380
|
+
}
|
|
381
|
+
|
|
276
382
|
// src/icons/Clock/clockPath.ts
|
|
277
383
|
var CLOCK_PATH = "M12 7V12H17M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21Z";
|
|
278
384
|
function ClockIcon({ size = 24, color = colors.primary, strokeWidth = 2 }) {
|
|
@@ -294,6 +400,42 @@ function FacebookIcon({ size = 20, color = colors.white }) {
|
|
|
294
400
|
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(Svg.Path, { d: FACEBOOK_PATH, fill: color }) });
|
|
295
401
|
}
|
|
296
402
|
|
|
403
|
+
// src/icons/Heart/heartPath.ts
|
|
404
|
+
var HEART_PATH = "M7.99547 3.42388C6.66257 1.8656 4.43987 1.44643 2.76984 2.87334C1.0998 4.30026 0.864686 6.68598 2.17617 8.3736C3.26659 9.77674 6.56656 12.7361 7.64811 13.6939C7.76911 13.801 7.82961 13.8546 7.90018 13.8757C7.96178 13.8941 8.02917 13.8941 8.09077 13.8757C8.16134 13.8546 8.22184 13.801 8.34284 13.6939C9.42439 12.7361 12.7244 9.77674 13.8148 8.3736C15.1263 6.68598 14.9199 4.28525 13.2211 2.87334C11.5224 1.46144 9.32838 1.8656 7.99547 3.42388Z";
|
|
405
|
+
function HeartIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }) {
|
|
406
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
407
|
+
Svg.Path,
|
|
408
|
+
{
|
|
409
|
+
d: HEART_PATH,
|
|
410
|
+
stroke: color,
|
|
411
|
+
strokeWidth,
|
|
412
|
+
strokeLinecap: "round",
|
|
413
|
+
strokeLinejoin: "round",
|
|
414
|
+
fillRule: "evenodd",
|
|
415
|
+
clipRule: "evenodd"
|
|
416
|
+
}
|
|
417
|
+
) });
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
// src/icons/HelpCircle/helpCirclePath.ts
|
|
421
|
+
var HELP_CIRCLE_PATH = "M6.99971 6.00149C7.11717 5.66757 7.34902 5.386 7.6542 5.20665C7.95937 5.0273 8.31817 4.96174 8.66705 5.02158C9.01593 5.08142 9.33238 5.2628 9.56034 5.5336C9.7883 5.8044 9.91306 6.14714 9.91254 6.50112C9.91254 7.50037 8.41365 8 8.41365 8M8.43298 10H8.43964M8.33304 13.3333C11.4627 13.3333 13.9997 10.7963 13.9997 7.66667C13.9997 4.53705 11.4627 2 8.33304 2C5.20343 2 2.66638 4.53705 2.66638 7.66667C2.66638 8.3 2.77027 8.90906 2.96196 9.47774C3.03409 9.69175 3.07016 9.79875 3.07666 9.88095C3.08309 9.96213 3.07823 10.019 3.05814 10.098C3.03781 10.1779 2.99291 10.261 2.9031 10.4272L1.81267 12.4456C1.65713 12.7335 1.57936 12.8774 1.59676 12.9885C1.61192 13.0853 1.66887 13.1705 1.75249 13.2215C1.84849 13.2801 2.01124 13.2632 2.33674 13.2296L5.75075 12.8767C5.85414 12.866 5.90583 12.8606 5.95295 12.8624C5.99929 12.8642 6.03201 12.8686 6.0772 12.879C6.12315 12.8896 6.18092 12.9118 6.29648 12.9564C6.92851 13.1999 7.61519 13.3333 8.33304 13.3333Z";
|
|
422
|
+
function HelpCircleIcon({
|
|
423
|
+
size = 20,
|
|
424
|
+
color = colors.primary,
|
|
425
|
+
strokeWidth = 1.5
|
|
426
|
+
}) {
|
|
427
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
428
|
+
Svg.Path,
|
|
429
|
+
{
|
|
430
|
+
d: HELP_CIRCLE_PATH,
|
|
431
|
+
stroke: color,
|
|
432
|
+
strokeWidth,
|
|
433
|
+
strokeLinecap: "round",
|
|
434
|
+
strokeLinejoin: "round"
|
|
435
|
+
}
|
|
436
|
+
) });
|
|
437
|
+
}
|
|
438
|
+
|
|
297
439
|
// src/icons/Home/homePath.ts
|
|
298
440
|
var HOME_PATH = "M1.66675 16.6667H3.33341M3.33341 16.6667H8.33341M3.33341 16.6667V9.54352C3.33341 9.09823 3.33341 8.87548 3.38756 8.66828C3.43554 8.48466 3.51491 8.31089 3.6215 8.15387C3.74178 7.97668 3.90895 7.82974 4.24406 7.53652L8.24538 4.03537C8.86662 3.49178 9.17726 3.21997 9.5271 3.11652C9.83559 3.02529 10.1644 3.02529 10.4729 3.11652C10.823 3.22005 11.1341 3.49212 11.7563 4.03652L15.7563 7.53652C16.0914 7.82974 16.2586 7.97668 16.3789 8.15387C16.4855 8.31089 16.5642 8.48466 16.6122 8.66828C16.6664 8.87548 16.6667 9.09824 16.6667 9.54352V16.6667M8.33341 16.6667H11.6667M8.33341 16.6667V13.3334C8.33341 12.4129 9.07961 11.6667 10.0001 11.6667C10.9206 11.6667 11.6667 12.4129 11.6667 13.3334V16.6667M11.6667 16.6667H16.6667M16.6667 16.6667H18.3334";
|
|
299
441
|
function HomeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
|
|
@@ -330,12 +472,46 @@ function KeyIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
|
|
|
330
472
|
) });
|
|
331
473
|
}
|
|
332
474
|
|
|
475
|
+
// src/icons/LayoutGrid/layoutGridPath.ts
|
|
476
|
+
var LAYOUT_GRID_PATH = "M4.33333 4.33333H4.34M11.6667 4.33333H11.6733M4.33333 11.6667H4.34M8.66667 8.66667H8.67333M11.6667 11.6667H11.6733M11.3333 14H14V11.3333M9.33333 11V14M14 9.33333H11M10.4 6.66667H12.9333C13.3067 6.66667 13.4934 6.66667 13.636 6.594C13.7614 6.53009 13.8634 6.4281 13.9273 6.30266C14 6.16005 14 5.97337 14 5.6V3.06667C14 2.6933 14 2.50661 13.9273 2.36401C13.8634 2.23856 13.7614 2.13658 13.636 2.07266C13.4934 2 13.3067 2 12.9333 2H10.4C10.0266 2 9.83995 2 9.69734 2.07266C9.5719 2.13658 9.46991 2.23856 9.406 2.36401C9.33333 2.50661 9.33333 2.6933 9.33333 3.06667V5.6C9.33333 5.97337 9.33333 6.16005 9.406 6.30266C9.46991 6.4281 9.5719 6.53009 9.69734 6.594C9.83995 6.66667 10.0266 6.66667 10.4 6.66667ZM3.06667 6.66667H5.6C5.97337 6.66667 6.16005 6.66667 6.30266 6.594C6.4281 6.53009 6.53009 6.4281 6.594 6.30266C6.66667 6.16005 6.66667 5.97337 6.66667 5.6V3.06667C6.66667 2.6933 6.66667 2.50661 6.594 2.36401C6.53009 2.23856 6.4281 2.13658 6.30266 2.07266C6.16005 2 5.97337 2 5.6 2H3.06667C2.6933 2 2.50661 2 2.36401 2.07266C2.23856 2.13658 2.13658 2.23856 2.07266 2.36401C2 2.50661 2 2.6933 2 3.06667V5.6C2 5.97337 2 6.16005 2.07266 6.30266C2.13658 6.4281 2.23856 6.53009 2.36401 6.594C2.50661 6.66667 2.6933 6.66667 3.06667 6.66667ZM3.06667 14H5.6C5.97337 14 6.16005 14 6.30266 13.9273C6.4281 13.8634 6.53009 13.7614 6.594 13.636C6.66667 13.4934 6.66667 13.3067 6.66667 12.9333V10.4C6.66667 10.0266 6.66667 9.83995 6.594 9.69734C6.53009 9.5719 6.4281 9.46991 6.30266 9.406C6.16005 9.33333 5.97337 9.33333 5.6 9.33333H3.06667C2.6933 9.33333 2.50661 9.33333 2.36401 9.406C2.23856 9.46991 2.13658 9.5719 2.07266 9.69734C2 9.83995 2 10.0266 2 10.4V12.9333C2 13.3067 2 13.4934 2.07266 13.636C2.13658 13.7614 2.23856 13.8634 2.36401 13.9273C2.50661 14 2.6933 14 3.06667 14Z";
|
|
477
|
+
function LayoutGridIcon({
|
|
478
|
+
size = 20,
|
|
479
|
+
color = colors.primary,
|
|
480
|
+
strokeWidth = 1.5
|
|
481
|
+
}) {
|
|
482
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
483
|
+
Svg.Path,
|
|
484
|
+
{
|
|
485
|
+
d: LAYOUT_GRID_PATH,
|
|
486
|
+
stroke: color,
|
|
487
|
+
strokeWidth,
|
|
488
|
+
strokeLinecap: "round",
|
|
489
|
+
strokeLinejoin: "round"
|
|
490
|
+
}
|
|
491
|
+
) });
|
|
492
|
+
}
|
|
493
|
+
|
|
333
494
|
// src/icons/LinkedIn/linkedinPath.ts
|
|
334
495
|
var LINKEDIN_PATH = "M15.8333 2.50098C16.2754 2.50098 16.6993 2.67657 17.0118 2.98913C17.3244 3.30169 17.5 3.72562 17.5 4.16764V15.8343C17.5 16.2763 17.3244 16.7003 17.0118 17.0128C16.6993 17.3254 16.2754 17.501 15.8333 17.501H4.16667C3.72464 17.501 3.30072 17.3254 2.98816 17.0128C2.67559 16.7003 2.5 16.2763 2.5 15.8343V4.16764C2.5 3.72562 2.67559 3.30169 2.98816 2.98913C3.30072 2.67657 3.72464 2.50098 4.16667 2.50098H15.8333ZM15.4167 15.4176V11.001C15.4167 10.2805 15.1304 9.58948 14.621 9.08C14.1115 8.57053 13.4205 8.28431 12.7 8.28431C11.9917 8.28431 11.1667 8.71764 10.7667 9.36764V8.44264H8.44167V15.4176H10.7667V11.3093C10.7667 10.6676 11.2833 10.1426 11.925 10.1426C12.2344 10.1426 12.5312 10.2656 12.75 10.4844C12.9687 10.7031 13.0917 10.9999 13.0917 11.3093V15.4176H15.4167ZM5.73333 7.13431C6.10464 7.13431 6.46073 6.98681 6.72328 6.72426C6.98583 6.46171 7.13333 6.10561 7.13333 5.73431C7.13333 4.95931 6.50833 4.32598 5.73333 4.32598C5.35982 4.32598 5.0016 4.47435 4.73749 4.73847C4.47338 5.00258 4.325 5.3608 4.325 5.73431C4.325 6.50931 4.95833 7.13431 5.73333 7.13431ZM6.89167 15.4176V8.44264H4.58333V15.4176H6.89167Z";
|
|
335
496
|
function LinkedInIcon({ size = 20, color = colors.white }) {
|
|
336
497
|
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(Svg.Path, { d: LINKEDIN_PATH, fill: color }) });
|
|
337
498
|
}
|
|
338
499
|
|
|
500
|
+
// src/icons/LogOut/logOutPath.ts
|
|
501
|
+
var LOG_OUT_PATH = "M10.6667 4.66667L14 8L10.6667 11.3333M14 8H6M8 11.3333C8 11.5304 8 11.6289 7.99268 11.7143C7.91655 12.6013 7.26324 13.3312 6.39002 13.5049C6.30602 13.5216 6.20801 13.5324 6.01223 13.5542L5.3313 13.6299C4.30832 13.7435 3.7968 13.8004 3.39044 13.6703C2.84862 13.4969 2.40628 13.101 2.17412 12.5817C2 12.1921 2 11.6775 2 10.6482V5.3518C2 4.32251 2 3.80787 2.17412 3.41835C2.40628 2.89899 2.84862 2.50307 3.39044 2.32969C3.79681 2.19965 4.3083 2.25648 5.33129 2.37015L6.01223 2.44581C6.20808 2.46757 6.306 2.47845 6.39002 2.49515C7.26324 2.66877 7.91655 3.39869 7.99268 4.28574C8 4.37109 8 4.46962 8 4.66667";
|
|
502
|
+
function LogOutIcon({ size = 20, color = colors.red, strokeWidth = 1.5 }) {
|
|
503
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
504
|
+
Svg.Path,
|
|
505
|
+
{
|
|
506
|
+
d: LOG_OUT_PATH,
|
|
507
|
+
stroke: color,
|
|
508
|
+
strokeWidth,
|
|
509
|
+
strokeLinecap: "round",
|
|
510
|
+
strokeLinejoin: "round"
|
|
511
|
+
}
|
|
512
|
+
) });
|
|
513
|
+
}
|
|
514
|
+
|
|
339
515
|
// src/icons/Mail/mailPath.ts
|
|
340
516
|
var MAIL_PATH = "M3.33333 4.99984L8.42303 8.84339L8.42473 8.8448C8.98987 9.25924 9.27261 9.46658 9.5823 9.54668C9.85602 9.61748 10.1438 9.61748 10.4175 9.54668C10.7274 9.46651 11.011 9.25856 11.5771 8.84339C11.5771 8.84339 14.8417 6.33812 16.6667 4.99984M2.5 13.1667V6.83333C2.5 5.89991 2.5 5.43285 2.68166 5.07633C2.84144 4.76273 3.09623 4.50795 3.40983 4.34816C3.76635 4.1665 4.23341 4.1665 5.16683 4.1665H14.8335C15.7669 4.1665 16.233 4.1665 16.5895 4.34816C16.9031 4.50795 17.1587 4.76273 17.3185 5.07633C17.5 5.43251 17.5 5.899 17.5 6.8306V13.1695C17.5 14.1011 17.5 14.5669 17.3185 14.9231C17.1587 15.2367 16.9031 15.4919 16.5895 15.6517C16.2333 15.8332 15.7675 15.8332 14.8359 15.8332H5.16409C4.23249 15.8332 3.766 15.8332 3.40983 15.6517C3.09623 15.4919 2.84144 15.2367 2.68166 14.9231C2.5 14.5666 2.5 14.1001 2.5 13.1667Z";
|
|
341
517
|
function MailIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
|
|
@@ -413,6 +589,21 @@ function SearchIcon({
|
|
|
413
589
|
] });
|
|
414
590
|
}
|
|
415
591
|
|
|
592
|
+
// src/icons/Settings/settingsPath.ts
|
|
593
|
+
var SETTINGS_PATH = "M8.00004 10C9.10461 10 10 9.10457 10 8C10 6.89543 9.10461 6 8.00004 6C6.89547 6 6.00004 6.89543 6.00004 8C6.00004 9.10457 6.89547 10 8.00004 10Z M12.4849 9.81818C12.4042 10.001 12.3801 10.2038 12.4158 10.4004C12.4514 10.597 12.5452 10.7784 12.6849 10.9212L12.7213 10.9576C12.834 11.0702 12.9234 11.2038 12.9844 11.351C13.0454 11.4981 13.0768 11.6559 13.0768 11.8152C13.0768 11.9744 13.0454 12.1322 12.9844 12.2793C12.9234 12.4265 12.834 12.5602 12.7213 12.6727C12.6087 12.7854 12.475 12.8748 12.3278 12.9358C12.1807 12.9968 12.023 13.0282 11.8637 13.0282C11.7044 13.0282 11.5467 12.9968 11.3995 12.9358C11.2524 12.8748 11.1187 12.7854 11.0061 12.6727L10.9697 12.6364C10.8269 12.4966 10.6455 12.4029 10.4489 12.3673C10.2523 12.3316 10.0495 12.3557 9.86671 12.4364C9.68745 12.5132 9.53458 12.6408 9.42689 12.8034C9.31921 12.966 9.26142 13.1565 9.26065 13.3515V13.4545C9.26065 13.776 9.13294 14.0843 8.90562 14.3116C8.67831 14.539 8.37 14.6667 8.04853 14.6667C7.72705 14.6667 7.41874 14.539 7.19143 14.3116C6.96411 14.0843 6.8364 13.776 6.8364 13.4545V13.4C6.83171 13.1994 6.76678 13.0048 6.65005 12.8416C6.53331 12.6784 6.37018 12.5541 6.18186 12.4848C5.99906 12.4042 5.79629 12.3801 5.59968 12.4158C5.40308 12.4514 5.22166 12.5451 5.07883 12.6849L5.04246 12.7212C4.92989 12.8339 4.79621 12.9233 4.64906 12.9843C4.50191 13.0453 4.34418 13.0767 4.18489 13.0767C4.0256 13.0767 3.86787 13.0453 3.72072 12.9843C3.57357 12.9233 3.43989 12.8339 3.32731 12.7212C3.21461 12.6086 3.12521 12.475 3.06421 12.3278C3.00321 12.1807 2.97181 12.0229 2.97181 11.8636C2.97181 11.7043 3.00321 11.5466 3.06421 11.3995C3.12521 11.2523 3.21461 11.1186 3.32731 11.0061L3.36368 10.9697C3.5034 10.8269 3.59712 10.6454 3.63277 10.4488C3.66842 10.2522 3.64435 10.0495 3.56368 9.86667C3.48685 9.68741 3.35929 9.53454 3.19669 9.42686C3.03409 9.31917 2.84355 9.26139 2.64853 9.26061H2.5455C2.22402 9.26061 1.91571 9.1329 1.6884 8.90559C1.46108 8.67827 1.33337 8.36996 1.33337 8.04849C1.33337 7.72701 1.46108 7.4187 1.6884 7.19139C1.91571 6.96407 2.22402 6.83637 2.5455 6.83637H2.60004C2.80064 6.83167 2.9952 6.76674 3.1584 6.65001C3.32161 6.53328 3.44593 6.37014 3.51519 6.18182C3.59587 5.99902 3.61993 5.79625 3.58429 5.59965C3.54864 5.40304 3.45491 5.22163 3.31519 5.07879L3.27883 5.04243C3.16613 4.92985 3.07672 4.79617 3.01573 4.64902C2.95473 4.50187 2.92333 4.34414 2.92333 4.18485C2.92333 4.02556 2.95473 3.86783 3.01573 3.72068C3.07672 3.57353 3.16613 3.43985 3.27883 3.32728C3.3914 3.21458 3.52509 3.12517 3.67223 3.06417C3.81938 3.00317 3.97711 2.97178 4.1364 2.97178C4.2957 2.97178 4.45343 3.00317 4.60057 3.06417C4.74772 3.12517 4.88141 3.21458 4.99398 3.32728L5.03034 3.36364C5.17318 3.50336 5.3546 3.59708 5.5512 3.63273C5.7478 3.66838 5.95058 3.64431 6.13337 3.56364H6.18186C6.36111 3.48681 6.51399 3.35925 6.62167 3.19665C6.72935 3.03405 6.78714 2.84351 6.78792 2.64849V2.54546C6.78792 2.22398 6.91562 1.91567 7.14294 1.68836C7.37026 1.46104 7.67857 1.33334 8.00004 1.33334C8.32151 1.33334 8.62982 1.46104 8.85714 1.68836C9.08446 1.91567 9.21216 2.22398 9.21216 2.54546V2.6C9.21294 2.79502 9.27073 2.98556 9.37841 3.14816C9.48609 3.31076 9.63897 3.43833 9.81822 3.51515C10.001 3.59583 10.2038 3.6199 10.4004 3.58425C10.597 3.5486 10.7784 3.45487 10.9213 3.31515L10.9576 3.27879C11.0702 3.16609 11.2039 3.07669 11.351 3.01569C11.4982 2.95469 11.6559 2.92329 11.8152 2.92329C11.9745 2.92329 12.1322 2.95469 12.2794 3.01569C12.4265 3.07669 12.5602 3.16609 12.6728 3.27879C12.7855 3.39136 12.8749 3.52505 12.9359 3.6722C12.9969 3.81935 13.0283 3.97707 13.0283 4.13637C13.0283 4.29566 12.9969 4.45339 12.9359 4.60054C12.8749 4.74769 12.7855 4.88137 12.6728 4.99394L12.6364 5.03031C12.4967 5.17314 12.403 5.35456 12.3673 5.55116C12.3317 5.74776 12.3557 5.95054 12.4364 6.13334V6.18182C12.5132 6.36107 12.6408 6.51395 12.8034 6.62163C12.966 6.72932 13.1565 6.7871 13.3516 6.78788H13.4546C13.7761 6.78788 14.0844 6.91559 14.3117 7.1429C14.539 7.37022 14.6667 7.67853 14.6667 8C14.6667 8.32148 14.539 8.62978 14.3117 8.8571C14.0844 9.08442 13.7761 9.21212 13.4546 9.21212H13.4C13.205 9.2129 13.0145 9.27069 12.8519 9.37837C12.6893 9.48605 12.5617 9.63893 12.4849 9.81818Z";
|
|
594
|
+
function SettingsIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }) {
|
|
595
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
596
|
+
Svg.Path,
|
|
597
|
+
{
|
|
598
|
+
d: SETTINGS_PATH,
|
|
599
|
+
stroke: color,
|
|
600
|
+
strokeWidth,
|
|
601
|
+
strokeLinecap: "round",
|
|
602
|
+
strokeLinejoin: "round"
|
|
603
|
+
}
|
|
604
|
+
) });
|
|
605
|
+
}
|
|
606
|
+
|
|
416
607
|
// src/icons/Show/showPath.ts
|
|
417
608
|
var SHOW_PATH = "M1.66669 10C1.66669 10 4.16669 4.16667 10 4.16667C15.8334 4.16667 18.3334 10 18.3334 10C18.3334 10 15.8334 15.8333 10 15.8333C4.16669 15.8333 1.66669 10 1.66669 10Z";
|
|
418
609
|
var SHOW_PUPIL_PATH = "M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z";
|
|
@@ -456,36 +647,76 @@ function UserIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
|
|
|
456
647
|
) });
|
|
457
648
|
}
|
|
458
649
|
|
|
650
|
+
// src/icons/Video/videoPath.ts
|
|
651
|
+
var VIDEO_PATHS = [
|
|
652
|
+
"M14.6667 5.95424C14.6667 5.55036 14.6667 5.34843 14.5868 5.25492C14.5175 5.17378 14.4136 5.13072 14.3072 5.13909C14.1846 5.14874 14.0418 5.29153 13.7563 5.57712L11.3334 7.99999L13.7563 10.4229C14.0418 10.7085 14.1846 10.8512 14.3072 10.8609C14.4136 10.8693 14.5175 10.8262 14.5868 10.7451C14.6667 10.6516 14.6667 10.4496 14.6667 10.0457V5.95424Z",
|
|
653
|
+
"M1.33337 6.53333C1.33337 5.41322 1.33337 4.85317 1.55136 4.42535C1.74311 4.04902 2.04907 3.74306 2.42539 3.55132C2.85322 3.33333 3.41327 3.33333 4.53337 3.33333H8.13337C9.25348 3.33333 9.81353 3.33333 10.2414 3.55132C10.6177 3.74306 10.9236 4.04902 11.1154 4.42535C11.3334 4.85317 11.3334 5.41322 11.3334 6.53333V9.46666C11.3334 10.5868 11.3334 11.1468 11.1154 11.5746C10.9236 11.951 10.6177 12.2569 10.2414 12.4487C9.81353 12.6667 9.25348 12.6667 8.13337 12.6667H4.53337C3.41327 12.6667 2.85322 12.6667 2.42539 12.4487C2.04907 12.2569 1.74311 11.951 1.55136 11.5746C1.33337 11.1468 1.33337 10.5868 1.33337 9.46666V6.53333Z"
|
|
654
|
+
];
|
|
655
|
+
function VideoIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }) {
|
|
656
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: VIDEO_PATHS.map((path) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
657
|
+
Svg.Path,
|
|
658
|
+
{
|
|
659
|
+
d: path,
|
|
660
|
+
stroke: color,
|
|
661
|
+
strokeWidth,
|
|
662
|
+
strokeLinecap: "round",
|
|
663
|
+
strokeLinejoin: "round"
|
|
664
|
+
},
|
|
665
|
+
path
|
|
666
|
+
)) });
|
|
667
|
+
}
|
|
668
|
+
|
|
459
669
|
// src/icons/registry.ts
|
|
460
670
|
var icons = {
|
|
461
671
|
arrowRight: ArrowRightIcon,
|
|
462
672
|
bag: BagIcon,
|
|
463
673
|
bell: BellIcon,
|
|
464
674
|
building: BuildingIcon,
|
|
675
|
+
calendar: CalendarIcon,
|
|
676
|
+
calendarOutline: CalendarOutlineIcon,
|
|
465
677
|
camera: CameraIcon,
|
|
466
678
|
check: CheckIcon,
|
|
467
679
|
checkBadge: CheckBadgeIcon,
|
|
468
680
|
chevronDown: ChevronDownIcon,
|
|
681
|
+
chevronLeft: ChevronLeftIcon,
|
|
469
682
|
clock: ClockIcon,
|
|
470
683
|
facebook: FacebookIcon,
|
|
684
|
+
heart: HeartIcon,
|
|
685
|
+
helpCircle: HelpCircleIcon,
|
|
471
686
|
home: HomeIcon,
|
|
472
687
|
instagram: InstagramIcon,
|
|
473
688
|
key: KeyIcon,
|
|
689
|
+
layoutGrid: LayoutGridIcon,
|
|
474
690
|
linkedin: LinkedInIcon,
|
|
691
|
+
logOut: LogOutIcon,
|
|
475
692
|
mail: MailIcon,
|
|
476
693
|
navigate: NavigateIcon,
|
|
477
694
|
phone: PhoneIcon,
|
|
478
695
|
search: SearchIcon,
|
|
696
|
+
settings: SettingsIcon,
|
|
479
697
|
show: ShowIcon,
|
|
480
|
-
user: UserIcon
|
|
698
|
+
user: UserIcon,
|
|
699
|
+
video: VideoIcon
|
|
481
700
|
};
|
|
482
701
|
var iconNames = Object.keys(icons);
|
|
483
702
|
var iconGroups = {
|
|
484
|
-
navigation: ["arrowRight", "chevronDown", "home", "navigate"],
|
|
485
|
-
actions: [
|
|
486
|
-
|
|
703
|
+
navigation: ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"],
|
|
704
|
+
actions: [
|
|
705
|
+
"show",
|
|
706
|
+
"bell",
|
|
707
|
+
"camera",
|
|
708
|
+
"key",
|
|
709
|
+
"check",
|
|
710
|
+
"checkBadge",
|
|
711
|
+
"search",
|
|
712
|
+
"calendar",
|
|
713
|
+
"calendarOutline",
|
|
714
|
+
"heart"
|
|
715
|
+
],
|
|
716
|
+
objects: ["bag", "building", "clock", "user", "video"],
|
|
487
717
|
communication: ["mail", "phone"],
|
|
488
|
-
social: ["facebook", "instagram", "linkedin"]
|
|
718
|
+
social: ["facebook", "instagram", "linkedin"],
|
|
719
|
+
interface: ["layoutGrid", "settings", "helpCircle", "logOut"]
|
|
489
720
|
};
|
|
490
721
|
var iconGroupNames = Object.keys(iconGroups);
|
|
491
722
|
function getIconsByGroup(group) {
|
|
@@ -536,17 +767,332 @@ function useApplyWebClassName(ref, className, enabled = true) {
|
|
|
536
767
|
rafId = requestAnimationFrame(apply);
|
|
537
768
|
return;
|
|
538
769
|
}
|
|
539
|
-
appliedElement = element;
|
|
540
|
-
element.classList.add(...classes);
|
|
541
|
-
};
|
|
542
|
-
apply();
|
|
543
|
-
return () => {
|
|
544
|
-
cancelled = true;
|
|
545
|
-
if (rafId) cancelAnimationFrame(rafId);
|
|
546
|
-
appliedElement?.classList.remove(...classes);
|
|
547
|
-
};
|
|
548
|
-
}, [ref, className, enabled]);
|
|
549
|
-
}
|
|
770
|
+
appliedElement = element;
|
|
771
|
+
element.classList.add(...classes);
|
|
772
|
+
};
|
|
773
|
+
apply();
|
|
774
|
+
return () => {
|
|
775
|
+
cancelled = true;
|
|
776
|
+
if (rafId) cancelAnimationFrame(rafId);
|
|
777
|
+
appliedElement?.classList.remove(...classes);
|
|
778
|
+
};
|
|
779
|
+
}, [ref, className, enabled]);
|
|
780
|
+
}
|
|
781
|
+
var ITEM_RADIUS = 12;
|
|
782
|
+
var ICON_SIZE = 16;
|
|
783
|
+
var MenuItem = react.forwardRef(function MenuItem2({
|
|
784
|
+
icon,
|
|
785
|
+
label,
|
|
786
|
+
onPress,
|
|
787
|
+
disabled = false,
|
|
788
|
+
backgroundColor,
|
|
789
|
+
hoverColor,
|
|
790
|
+
style,
|
|
791
|
+
labelStyle,
|
|
792
|
+
className,
|
|
793
|
+
accessibilityLabel,
|
|
794
|
+
hitSlop = 4,
|
|
795
|
+
onHoverIn,
|
|
796
|
+
onHoverOut,
|
|
797
|
+
onPressIn,
|
|
798
|
+
onPressOut,
|
|
799
|
+
...rest
|
|
800
|
+
}, forwardedRef) {
|
|
801
|
+
const containerRef = react.useRef(null);
|
|
802
|
+
const setContainerRef = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
|
|
803
|
+
const [hovered, setHovered] = react.useState(false);
|
|
804
|
+
useApplyWebClassName(containerRef, className);
|
|
805
|
+
const resolvedBackground = hovered ? hoverColor ?? colors.grey600 : backgroundColor ?? "transparent";
|
|
806
|
+
const resolvedAccessibilityLabel = accessibilityLabel ?? label;
|
|
807
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
808
|
+
reactNative.Pressable,
|
|
809
|
+
{
|
|
810
|
+
...rest,
|
|
811
|
+
ref: setContainerRef,
|
|
812
|
+
onPress,
|
|
813
|
+
disabled,
|
|
814
|
+
hitSlop,
|
|
815
|
+
onHoverIn: (event) => {
|
|
816
|
+
setHovered(true);
|
|
817
|
+
onHoverIn?.(event);
|
|
818
|
+
},
|
|
819
|
+
onHoverOut: (event) => {
|
|
820
|
+
setHovered(false);
|
|
821
|
+
onHoverOut?.(event);
|
|
822
|
+
},
|
|
823
|
+
onPressIn: (event) => {
|
|
824
|
+
setHovered(true);
|
|
825
|
+
onPressIn?.(event);
|
|
826
|
+
},
|
|
827
|
+
onPressOut: (event) => {
|
|
828
|
+
setHovered(false);
|
|
829
|
+
onPressOut?.(event);
|
|
830
|
+
},
|
|
831
|
+
accessibilityRole: "menuitem",
|
|
832
|
+
accessibilityLabel: resolvedAccessibilityLabel,
|
|
833
|
+
accessibilityState: { disabled },
|
|
834
|
+
style: [
|
|
835
|
+
styles.root,
|
|
836
|
+
{ backgroundColor: resolvedBackground },
|
|
837
|
+
disabled && styles.disabled,
|
|
838
|
+
style
|
|
839
|
+
],
|
|
840
|
+
children: [
|
|
841
|
+
icon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.iconSlot, children: icon }) : null,
|
|
842
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles.label, labelStyle], numberOfLines: 1, children: label })
|
|
843
|
+
]
|
|
844
|
+
}
|
|
845
|
+
);
|
|
846
|
+
});
|
|
847
|
+
var styles = reactNative.StyleSheet.create({
|
|
848
|
+
root: {
|
|
849
|
+
minHeight: 40,
|
|
850
|
+
borderRadius: ITEM_RADIUS,
|
|
851
|
+
paddingVertical: 12,
|
|
852
|
+
paddingHorizontal: 12,
|
|
853
|
+
flexDirection: "row",
|
|
854
|
+
alignItems: "center",
|
|
855
|
+
gap: 8,
|
|
856
|
+
alignSelf: "stretch"
|
|
857
|
+
},
|
|
858
|
+
disabled: {
|
|
859
|
+
opacity: 0.5
|
|
860
|
+
},
|
|
861
|
+
iconSlot: {
|
|
862
|
+
width: ICON_SIZE,
|
|
863
|
+
height: ICON_SIZE,
|
|
864
|
+
alignItems: "center",
|
|
865
|
+
justifyContent: "center",
|
|
866
|
+
flexShrink: 0
|
|
867
|
+
},
|
|
868
|
+
label: {
|
|
869
|
+
...avatarTypography.menuItem,
|
|
870
|
+
color: colors.white,
|
|
871
|
+
flex: 1
|
|
872
|
+
}
|
|
873
|
+
});
|
|
874
|
+
var IMAGE_SIZE = 48;
|
|
875
|
+
var CONTAINER_RADIUS = 71;
|
|
876
|
+
var CHEVRON_SIZE = 20;
|
|
877
|
+
var FALLBACK_ICON_SIZE = 20;
|
|
878
|
+
var MENU_RADIUS = 16;
|
|
879
|
+
var Avatar = react.forwardRef(function Avatar2({
|
|
880
|
+
name,
|
|
881
|
+
email,
|
|
882
|
+
imageUrl,
|
|
883
|
+
onPress,
|
|
884
|
+
disabled = false,
|
|
885
|
+
showChevron = true,
|
|
886
|
+
menuItems,
|
|
887
|
+
open: openProp,
|
|
888
|
+
defaultOpen = false,
|
|
889
|
+
onOpenChange,
|
|
890
|
+
menuWidth,
|
|
891
|
+
style,
|
|
892
|
+
className,
|
|
893
|
+
accessibilityLabel,
|
|
894
|
+
hitSlop = 8,
|
|
895
|
+
...rest
|
|
896
|
+
}, forwardedRef) {
|
|
897
|
+
const wrapperRef = react.useRef(null);
|
|
898
|
+
const containerRef = react.useRef(null);
|
|
899
|
+
const setContainerRef = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
|
|
900
|
+
const [imageFailed, setImageFailed] = react.useState(false);
|
|
901
|
+
const resolvedMenuItems = menuItems ?? [];
|
|
902
|
+
const hasMenu = resolvedMenuItems.length > 0;
|
|
903
|
+
const isInteractive = onPress != null || hasMenu;
|
|
904
|
+
const isOpenControlled = typeof openProp === "boolean";
|
|
905
|
+
const [uncontrolledOpen, setUncontrolledOpen] = react.useState(defaultOpen);
|
|
906
|
+
const isOpen = hasMenu && (isOpenControlled ? openProp : uncontrolledOpen);
|
|
907
|
+
useApplyWebClassName(containerRef, className);
|
|
908
|
+
const setOpen = react.useCallback(
|
|
909
|
+
(next) => {
|
|
910
|
+
if (!isOpenControlled) setUncontrolledOpen(next);
|
|
911
|
+
onOpenChange?.(next);
|
|
912
|
+
},
|
|
913
|
+
[isOpenControlled, onOpenChange]
|
|
914
|
+
);
|
|
915
|
+
const focusTrigger = react.useCallback(() => {
|
|
916
|
+
const node = containerRef.current;
|
|
917
|
+
node?.focus?.();
|
|
918
|
+
}, []);
|
|
919
|
+
const closeAndFocusTrigger = react.useCallback(() => {
|
|
920
|
+
setOpen(false);
|
|
921
|
+
focusTrigger();
|
|
922
|
+
}, [focusTrigger, setOpen]);
|
|
923
|
+
const handlePress = (event) => {
|
|
924
|
+
onPress?.(event);
|
|
925
|
+
if (hasMenu) setOpen(!isOpen);
|
|
926
|
+
};
|
|
927
|
+
const handleItemPress = react.useCallback(
|
|
928
|
+
(item) => {
|
|
929
|
+
if (item.disabled) return;
|
|
930
|
+
item.onPress();
|
|
931
|
+
closeAndFocusTrigger();
|
|
932
|
+
},
|
|
933
|
+
[closeAndFocusTrigger]
|
|
934
|
+
);
|
|
935
|
+
react.useEffect(() => {
|
|
936
|
+
if (reactNative.Platform.OS !== "web" || !isOpen) return;
|
|
937
|
+
const handlePointerDown = (event) => {
|
|
938
|
+
const wrapper = wrapperRef.current;
|
|
939
|
+
const target = event.target;
|
|
940
|
+
if (wrapper?.contains && target instanceof Node && !wrapper.contains(target)) {
|
|
941
|
+
setOpen(false);
|
|
942
|
+
}
|
|
943
|
+
};
|
|
944
|
+
document.addEventListener("mousedown", handlePointerDown);
|
|
945
|
+
document.addEventListener("touchstart", handlePointerDown);
|
|
946
|
+
return () => {
|
|
947
|
+
document.removeEventListener("mousedown", handlePointerDown);
|
|
948
|
+
document.removeEventListener("touchstart", handlePointerDown);
|
|
949
|
+
};
|
|
950
|
+
}, [isOpen, setOpen]);
|
|
951
|
+
react.useEffect(() => {
|
|
952
|
+
if (reactNative.Platform.OS !== "web" || !isOpen) return;
|
|
953
|
+
const handleKeyDown = (event) => {
|
|
954
|
+
if (event.key === "Escape") {
|
|
955
|
+
event.preventDefault();
|
|
956
|
+
closeAndFocusTrigger();
|
|
957
|
+
}
|
|
958
|
+
};
|
|
959
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
960
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
961
|
+
}, [isOpen, closeAndFocusTrigger]);
|
|
962
|
+
const hasImage = Boolean(imageUrl) && !imageFailed;
|
|
963
|
+
const resolvedAccessibilityLabel = accessibilityLabel ?? [name, email].filter(Boolean).join(", ");
|
|
964
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles2.wrapper, isOpen && styles2.wrapperOpen], children: [
|
|
965
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
966
|
+
reactNative.Pressable,
|
|
967
|
+
{
|
|
968
|
+
...rest,
|
|
969
|
+
ref: setContainerRef,
|
|
970
|
+
onPress: handlePress,
|
|
971
|
+
disabled: disabled || !isInteractive,
|
|
972
|
+
hitSlop: isInteractive ? hitSlop : void 0,
|
|
973
|
+
accessibilityRole: isInteractive ? "button" : void 0,
|
|
974
|
+
accessibilityLabel: resolvedAccessibilityLabel,
|
|
975
|
+
accessibilityState: isInteractive ? { disabled, expanded: hasMenu ? isOpen : void 0 } : void 0,
|
|
976
|
+
style: [styles2.root, disabled && styles2.disabled, style],
|
|
977
|
+
children: [
|
|
978
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.imageWrap, children: hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
979
|
+
reactNative.Image,
|
|
980
|
+
{
|
|
981
|
+
source: { uri: imageUrl ?? void 0 },
|
|
982
|
+
style: styles2.image,
|
|
983
|
+
onError: () => setImageFailed(true)
|
|
984
|
+
}
|
|
985
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles2.imageFallback, children: /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { size: FALLBACK_ICON_SIZE, color: colors.primary }) }) }),
|
|
986
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles2.textColumn, children: [
|
|
987
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.name, numberOfLines: 1, children: name }),
|
|
988
|
+
email ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles2.email, numberOfLines: 1, children: email }) : null
|
|
989
|
+
] }),
|
|
990
|
+
showChevron ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.chevronSlot, isOpen && styles2.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
|
|
991
|
+
]
|
|
992
|
+
}
|
|
993
|
+
),
|
|
994
|
+
hasMenu && isOpen ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles2.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: resolvedMenuItems.map((item) => {
|
|
995
|
+
const itemKey = item.key ?? item.label;
|
|
996
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
997
|
+
MenuItem,
|
|
998
|
+
{
|
|
999
|
+
icon: item.icon,
|
|
1000
|
+
label: item.label,
|
|
1001
|
+
disabled: item.disabled,
|
|
1002
|
+
backgroundColor: item.backgroundColor,
|
|
1003
|
+
hoverColor: item.hoverColor,
|
|
1004
|
+
onPress: () => handleItemPress(item)
|
|
1005
|
+
},
|
|
1006
|
+
itemKey
|
|
1007
|
+
);
|
|
1008
|
+
}) }) : null
|
|
1009
|
+
] });
|
|
1010
|
+
});
|
|
1011
|
+
var styles2 = reactNative.StyleSheet.create({
|
|
1012
|
+
wrapper: {
|
|
1013
|
+
position: "relative",
|
|
1014
|
+
alignSelf: "flex-start"
|
|
1015
|
+
},
|
|
1016
|
+
wrapperOpen: {
|
|
1017
|
+
zIndex: 20
|
|
1018
|
+
},
|
|
1019
|
+
root: {
|
|
1020
|
+
flexDirection: "row",
|
|
1021
|
+
alignItems: "center",
|
|
1022
|
+
alignSelf: "flex-start",
|
|
1023
|
+
gap: 12,
|
|
1024
|
+
paddingTop: 4,
|
|
1025
|
+
paddingBottom: 4,
|
|
1026
|
+
paddingLeft: 4,
|
|
1027
|
+
paddingRight: 12,
|
|
1028
|
+
borderRadius: CONTAINER_RADIUS,
|
|
1029
|
+
backgroundColor: colors.grey700
|
|
1030
|
+
},
|
|
1031
|
+
disabled: {
|
|
1032
|
+
opacity: 0.6
|
|
1033
|
+
},
|
|
1034
|
+
imageWrap: {
|
|
1035
|
+
width: IMAGE_SIZE,
|
|
1036
|
+
height: IMAGE_SIZE,
|
|
1037
|
+
borderRadius: IMAGE_SIZE / 2,
|
|
1038
|
+
overflow: "hidden",
|
|
1039
|
+
flexShrink: 0
|
|
1040
|
+
},
|
|
1041
|
+
image: {
|
|
1042
|
+
width: IMAGE_SIZE,
|
|
1043
|
+
height: IMAGE_SIZE
|
|
1044
|
+
},
|
|
1045
|
+
imageFallback: {
|
|
1046
|
+
width: IMAGE_SIZE,
|
|
1047
|
+
height: IMAGE_SIZE,
|
|
1048
|
+
alignItems: "center",
|
|
1049
|
+
justifyContent: "center",
|
|
1050
|
+
backgroundColor: colors.grey600
|
|
1051
|
+
},
|
|
1052
|
+
textColumn: {
|
|
1053
|
+
minWidth: 0,
|
|
1054
|
+
flexShrink: 1,
|
|
1055
|
+
gap: 3
|
|
1056
|
+
},
|
|
1057
|
+
name: {
|
|
1058
|
+
...avatarTypography.name,
|
|
1059
|
+
color: colors.white
|
|
1060
|
+
},
|
|
1061
|
+
email: {
|
|
1062
|
+
...avatarTypography.email,
|
|
1063
|
+
color: colors.grey0
|
|
1064
|
+
},
|
|
1065
|
+
chevronSlot: {
|
|
1066
|
+
width: CHEVRON_SIZE,
|
|
1067
|
+
height: CHEVRON_SIZE,
|
|
1068
|
+
alignItems: "center",
|
|
1069
|
+
justifyContent: "center",
|
|
1070
|
+
flexShrink: 0
|
|
1071
|
+
},
|
|
1072
|
+
chevronOpen: {
|
|
1073
|
+
transform: [{ rotate: "180deg" }]
|
|
1074
|
+
},
|
|
1075
|
+
menu: {
|
|
1076
|
+
position: "absolute",
|
|
1077
|
+
top: "100%",
|
|
1078
|
+
left: 0,
|
|
1079
|
+
right: 0,
|
|
1080
|
+
marginTop: 8,
|
|
1081
|
+
zIndex: 10,
|
|
1082
|
+
borderRadius: MENU_RADIUS,
|
|
1083
|
+
padding: 8,
|
|
1084
|
+
gap: 8,
|
|
1085
|
+
backgroundColor: colors.grey700,
|
|
1086
|
+
...reactNative.Platform.select({
|
|
1087
|
+
web: {
|
|
1088
|
+
boxShadow: `0 8px 24px ${colors.black}73`
|
|
1089
|
+
},
|
|
1090
|
+
default: {
|
|
1091
|
+
elevation: 8
|
|
1092
|
+
}
|
|
1093
|
+
})
|
|
1094
|
+
}
|
|
1095
|
+
});
|
|
550
1096
|
var variantConfig = {
|
|
551
1097
|
primary: {
|
|
552
1098
|
backgroundColor: colors.primary,
|
|
@@ -619,7 +1165,7 @@ var Button = react.forwardRef(
|
|
|
619
1165
|
useApplyWebClassName(textRef, textClassName);
|
|
620
1166
|
const iconNode = customIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
|
|
621
1167
|
const containerStyle = [
|
|
622
|
-
|
|
1168
|
+
styles3.base,
|
|
623
1169
|
{
|
|
624
1170
|
minHeight: metrics.minHeight,
|
|
625
1171
|
borderRadius: metrics.borderRadius,
|
|
@@ -630,15 +1176,15 @@ var Button = react.forwardRef(
|
|
|
630
1176
|
paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
|
|
631
1177
|
gap: hasIcon ? metrics.gap : 0
|
|
632
1178
|
},
|
|
633
|
-
disabled &&
|
|
1179
|
+
disabled && styles3.disabled,
|
|
634
1180
|
style
|
|
635
1181
|
];
|
|
636
1182
|
const labelStyle = [
|
|
637
|
-
|
|
1183
|
+
styles3.label,
|
|
638
1184
|
metrics.text,
|
|
639
1185
|
{ color: preset.textColor },
|
|
640
|
-
reactNative.Platform.OS === "android" ?
|
|
641
|
-
!hasIcon &&
|
|
1186
|
+
reactNative.Platform.OS === "android" ? styles3.labelAndroid : null,
|
|
1187
|
+
!hasIcon && styles3.labelCentered,
|
|
642
1188
|
textStyle
|
|
643
1189
|
];
|
|
644
1190
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -659,7 +1205,7 @@ var Button = react.forwardRef(
|
|
|
659
1205
|
reactNative.View,
|
|
660
1206
|
{
|
|
661
1207
|
style: [
|
|
662
|
-
|
|
1208
|
+
styles3.iconContainer,
|
|
663
1209
|
{
|
|
664
1210
|
width: metrics.iconContainerSize,
|
|
665
1211
|
height: metrics.iconContainerSize,
|
|
@@ -675,7 +1221,7 @@ var Button = react.forwardRef(
|
|
|
675
1221
|
);
|
|
676
1222
|
}
|
|
677
1223
|
);
|
|
678
|
-
var
|
|
1224
|
+
var styles3 = reactNative.StyleSheet.create({
|
|
679
1225
|
base: {
|
|
680
1226
|
flexDirection: "row",
|
|
681
1227
|
alignItems: "center",
|
|
@@ -753,13 +1299,13 @@ var Checkbox = react.forwardRef(function Checkbox2({
|
|
|
753
1299
|
accessibilityRole: "checkbox",
|
|
754
1300
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
755
1301
|
accessibilityState: { checked: isActive, disabled },
|
|
756
|
-
style: [
|
|
1302
|
+
style: [styles4.root, disabled && styles4.disabled, style],
|
|
757
1303
|
children: [
|
|
758
1304
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
759
1305
|
reactNative.View,
|
|
760
1306
|
{
|
|
761
1307
|
style: [
|
|
762
|
-
|
|
1308
|
+
styles4.box,
|
|
763
1309
|
{
|
|
764
1310
|
backgroundColor: chrome.backgroundColor,
|
|
765
1311
|
borderColor: chrome.borderColor
|
|
@@ -768,12 +1314,12 @@ var Checkbox = react.forwardRef(function Checkbox2({
|
|
|
768
1314
|
children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: CHECK_SIZE, color: colors.primary, strokeWidth: CHECK_STROKE }) : null
|
|
769
1315
|
}
|
|
770
1316
|
),
|
|
771
|
-
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
1317
|
+
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.label, labelStyle], children: labelContent }) : labelContent : null
|
|
772
1318
|
]
|
|
773
1319
|
}
|
|
774
1320
|
);
|
|
775
1321
|
});
|
|
776
|
-
var
|
|
1322
|
+
var styles4 = reactNative.StyleSheet.create({
|
|
777
1323
|
root: {
|
|
778
1324
|
flexDirection: "row",
|
|
779
1325
|
alignItems: "center",
|
|
@@ -797,7 +1343,525 @@ var styles2 = reactNative.StyleSheet.create({
|
|
|
797
1343
|
color: colors.white
|
|
798
1344
|
}
|
|
799
1345
|
});
|
|
800
|
-
|
|
1346
|
+
|
|
1347
|
+
// src/utils/dateUtils.ts
|
|
1348
|
+
function startOfDay(date) {
|
|
1349
|
+
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
1350
|
+
}
|
|
1351
|
+
function isSameDay(a, b) {
|
|
1352
|
+
if (a == null || b == null) return false;
|
|
1353
|
+
return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
1354
|
+
}
|
|
1355
|
+
function isSameMonth(a, b) {
|
|
1356
|
+
return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
|
|
1357
|
+
}
|
|
1358
|
+
function addMonths(date, amount) {
|
|
1359
|
+
return new Date(date.getFullYear(), date.getMonth() + amount, 1);
|
|
1360
|
+
}
|
|
1361
|
+
function isBefore(a, b) {
|
|
1362
|
+
return startOfDay(a).getTime() < startOfDay(b).getTime();
|
|
1363
|
+
}
|
|
1364
|
+
function isAfter(a, b) {
|
|
1365
|
+
return startOfDay(a).getTime() > startOfDay(b).getTime();
|
|
1366
|
+
}
|
|
1367
|
+
function isWithinRange(date, start, end) {
|
|
1368
|
+
const time = startOfDay(date).getTime();
|
|
1369
|
+
return time >= startOfDay(start).getTime() && time <= startOfDay(end).getTime();
|
|
1370
|
+
}
|
|
1371
|
+
function isDateDisabled(date, min, max) {
|
|
1372
|
+
if (min && isBefore(date, min)) return true;
|
|
1373
|
+
if (max && isAfter(date, max)) return true;
|
|
1374
|
+
return false;
|
|
1375
|
+
}
|
|
1376
|
+
function formatDate(date) {
|
|
1377
|
+
const day = String(date.getDate()).padStart(2, "0");
|
|
1378
|
+
const month = String(date.getMonth() + 1).padStart(2, "0");
|
|
1379
|
+
return `${day}.${month}.${date.getFullYear()}`;
|
|
1380
|
+
}
|
|
1381
|
+
function getMonthMatrix(monthDate, weekStartsOn = 1) {
|
|
1382
|
+
const year = monthDate.getFullYear();
|
|
1383
|
+
const month = monthDate.getMonth();
|
|
1384
|
+
const firstOfMonth = new Date(year, month, 1);
|
|
1385
|
+
const firstWeekday = firstOfMonth.getDay();
|
|
1386
|
+
const leadingDays = (firstWeekday - weekStartsOn + 7) % 7;
|
|
1387
|
+
const gridStart = new Date(year, month, 1 - leadingDays);
|
|
1388
|
+
const weeks = [];
|
|
1389
|
+
let cursor = gridStart;
|
|
1390
|
+
for (let week = 0; week < 6; week += 1) {
|
|
1391
|
+
const days = [];
|
|
1392
|
+
for (let day = 0; day < 7; day += 1) {
|
|
1393
|
+
days.push(cursor);
|
|
1394
|
+
cursor = new Date(cursor.getFullYear(), cursor.getMonth(), cursor.getDate() + 1);
|
|
1395
|
+
}
|
|
1396
|
+
weeks.push(days);
|
|
1397
|
+
}
|
|
1398
|
+
return weeks;
|
|
1399
|
+
}
|
|
1400
|
+
var DEFAULT_MONTH_NAMES = [
|
|
1401
|
+
"\u0540\u0578\u0582\u0576\u057E\u0561\u0580",
|
|
1402
|
+
"\u0553\u0565\u057F\u0580\u057E\u0561\u0580",
|
|
1403
|
+
"\u0544\u0561\u0580\u057F",
|
|
1404
|
+
"\u0531\u057A\u0580\u056B\u056C",
|
|
1405
|
+
"\u0544\u0561\u0575\u056B\u057D",
|
|
1406
|
+
"\u0540\u0578\u0582\u0576\u056B\u057D",
|
|
1407
|
+
"\u0540\u0578\u0582\u056C\u056B\u057D",
|
|
1408
|
+
"\u0555\u0563\u0578\u057D\u057F\u0578\u057D",
|
|
1409
|
+
"\u054D\u0565\u057A\u057F\u0565\u0574\u0562\u0565\u0580",
|
|
1410
|
+
"\u0540\u0578\u056F\u057F\u0565\u0574\u0562\u0565\u0580",
|
|
1411
|
+
"\u0546\u0578\u0575\u0565\u0574\u0562\u0565\u0580",
|
|
1412
|
+
"\u0534\u0565\u056F\u057F\u0565\u0574\u0562\u0565\u0580"
|
|
1413
|
+
];
|
|
1414
|
+
var DEFAULT_WEEKDAY_LABELS = ["\u0535\u0550", "\u0535\u0554", "\u0549\u0550", "\u0540\u0546", "\u0548\u0552\u0550", "\u0547\u0532", "\u053F\u0550"];
|
|
1415
|
+
var EMPTY_RANGE = { start: null, end: null };
|
|
1416
|
+
var DEFAULT_WIDTH = 380;
|
|
1417
|
+
var TRIGGER_HEIGHT = 44;
|
|
1418
|
+
var TRIGGER_RADIUS = 60;
|
|
1419
|
+
var MENU_RADIUS2 = 20;
|
|
1420
|
+
var ICON_SIZE2 = 20;
|
|
1421
|
+
var NAV_ICON_SIZE = 20;
|
|
1422
|
+
var DAY_CELL_HEIGHT = 44;
|
|
1423
|
+
var DAY_CIRCLE_SIZE = 44;
|
|
1424
|
+
var DatePicker = react.forwardRef(
|
|
1425
|
+
function DatePicker2(props, forwardedRef) {
|
|
1426
|
+
const {
|
|
1427
|
+
placeholder = "Select date",
|
|
1428
|
+
open: openProp,
|
|
1429
|
+
defaultOpen = false,
|
|
1430
|
+
onOpenChange,
|
|
1431
|
+
disabled = false,
|
|
1432
|
+
closeOnSelect = true,
|
|
1433
|
+
minDate,
|
|
1434
|
+
maxDate,
|
|
1435
|
+
defaultVisibleMonth,
|
|
1436
|
+
monthNames = DEFAULT_MONTH_NAMES,
|
|
1437
|
+
weekdayLabels = DEFAULT_WEEKDAY_LABELS,
|
|
1438
|
+
formatValue = formatDate,
|
|
1439
|
+
weekStartsOn = 1,
|
|
1440
|
+
style,
|
|
1441
|
+
className,
|
|
1442
|
+
accessibilityLabel,
|
|
1443
|
+
// Pulled out only to keep them off `rest` (which is spread onto the root View);
|
|
1444
|
+
// the real values are read from `props` directly below to preserve discriminated typing.
|
|
1445
|
+
range: _range,
|
|
1446
|
+
value: _value,
|
|
1447
|
+
defaultValue: _defaultValue,
|
|
1448
|
+
onValueChange: _onValueChange,
|
|
1449
|
+
...rest
|
|
1450
|
+
} = props;
|
|
1451
|
+
const isRange = props.range === true;
|
|
1452
|
+
const valueProp = props.value;
|
|
1453
|
+
const rootRef = react.useRef(null);
|
|
1454
|
+
const triggerRef = react.useRef(null);
|
|
1455
|
+
const setRootRef = react.useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
|
|
1456
|
+
const isOpenControlled = typeof openProp === "boolean";
|
|
1457
|
+
const isValueControlled = valueProp !== void 0;
|
|
1458
|
+
const [uncontrolledSingle, setUncontrolledSingle] = react.useState(
|
|
1459
|
+
!isRange ? props.defaultValue ?? null : null
|
|
1460
|
+
);
|
|
1461
|
+
const [uncontrolledRange, setUncontrolledRange] = react.useState(
|
|
1462
|
+
isRange ? props.defaultValue ?? EMPTY_RANGE : EMPTY_RANGE
|
|
1463
|
+
);
|
|
1464
|
+
const [uncontrolledOpen, setUncontrolledOpen] = react.useState(defaultOpen);
|
|
1465
|
+
const [hoveredDayKey, setHoveredDayKey] = react.useState(null);
|
|
1466
|
+
const rangeValue = isRange ? isValueControlled ? valueProp ?? EMPTY_RANGE : uncontrolledRange : EMPTY_RANGE;
|
|
1467
|
+
const singleValue = !isRange ? isValueControlled ? valueProp ?? null : uncontrolledSingle : null;
|
|
1468
|
+
const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
|
|
1469
|
+
const [visibleMonth, setVisibleMonth] = react.useState(() => {
|
|
1470
|
+
const anchor = defaultVisibleMonth ?? (isRange ? rangeValue.start : singleValue) ?? /* @__PURE__ */ new Date();
|
|
1471
|
+
return new Date(anchor.getFullYear(), anchor.getMonth(), 1);
|
|
1472
|
+
});
|
|
1473
|
+
useApplyWebClassName(rootRef, className);
|
|
1474
|
+
const setOpen = react.useCallback(
|
|
1475
|
+
(next) => {
|
|
1476
|
+
if (!isOpenControlled) setUncontrolledOpen(next);
|
|
1477
|
+
onOpenChange?.(next);
|
|
1478
|
+
if (next) {
|
|
1479
|
+
const anchor = (isRange ? rangeValue.start : singleValue) ?? /* @__PURE__ */ new Date();
|
|
1480
|
+
setVisibleMonth(new Date(anchor.getFullYear(), anchor.getMonth(), 1));
|
|
1481
|
+
} else {
|
|
1482
|
+
setHoveredDayKey(null);
|
|
1483
|
+
}
|
|
1484
|
+
},
|
|
1485
|
+
[isOpenControlled, isRange, onOpenChange, rangeValue.start, singleValue]
|
|
1486
|
+
);
|
|
1487
|
+
react.useEffect(() => {
|
|
1488
|
+
if (reactNative.Platform.OS !== "web" || !isOpen) return;
|
|
1489
|
+
const handlePointerDown = (event) => {
|
|
1490
|
+
const root = rootRef.current;
|
|
1491
|
+
const target = event.target;
|
|
1492
|
+
if (root?.contains && target instanceof Node && !root.contains(target)) {
|
|
1493
|
+
setOpen(false);
|
|
1494
|
+
}
|
|
1495
|
+
};
|
|
1496
|
+
document.addEventListener("mousedown", handlePointerDown);
|
|
1497
|
+
document.addEventListener("touchstart", handlePointerDown);
|
|
1498
|
+
return () => {
|
|
1499
|
+
document.removeEventListener("mousedown", handlePointerDown);
|
|
1500
|
+
document.removeEventListener("touchstart", handlePointerDown);
|
|
1501
|
+
};
|
|
1502
|
+
}, [isOpen, setOpen]);
|
|
1503
|
+
const focusTrigger = react.useCallback(() => {
|
|
1504
|
+
const node = triggerRef.current;
|
|
1505
|
+
node?.focus?.();
|
|
1506
|
+
}, []);
|
|
1507
|
+
const closeAndFocusTrigger = react.useCallback(() => {
|
|
1508
|
+
setOpen(false);
|
|
1509
|
+
focusTrigger();
|
|
1510
|
+
}, [focusTrigger, setOpen]);
|
|
1511
|
+
react.useEffect(() => {
|
|
1512
|
+
if (reactNative.Platform.OS !== "web" || !isOpen) return;
|
|
1513
|
+
const handleKeyDown = (event) => {
|
|
1514
|
+
if (event.key === "Escape") {
|
|
1515
|
+
event.preventDefault();
|
|
1516
|
+
closeAndFocusTrigger();
|
|
1517
|
+
}
|
|
1518
|
+
};
|
|
1519
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
1520
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
1521
|
+
}, [isOpen, closeAndFocusTrigger]);
|
|
1522
|
+
const handleTriggerPress = () => {
|
|
1523
|
+
if (disabled) return;
|
|
1524
|
+
setOpen(!isOpen);
|
|
1525
|
+
};
|
|
1526
|
+
const handleDayPress = react.useCallback(
|
|
1527
|
+
(day) => {
|
|
1528
|
+
if (disabled || isDateDisabled(day, minDate, maxDate)) return;
|
|
1529
|
+
const picked = startOfDay(day);
|
|
1530
|
+
if (!isRange) {
|
|
1531
|
+
if (!isValueControlled) setUncontrolledSingle(picked);
|
|
1532
|
+
props.onValueChange?.(picked);
|
|
1533
|
+
if (closeOnSelect) setOpen(false);
|
|
1534
|
+
return;
|
|
1535
|
+
}
|
|
1536
|
+
const { start, end } = rangeValue;
|
|
1537
|
+
const startingNewRange = !start || start && end;
|
|
1538
|
+
const nextRange = startingNewRange ? { start: picked, end: null } : isBefore(picked, start) ? { start: picked, end: null } : { start, end: picked };
|
|
1539
|
+
if (!isValueControlled) setUncontrolledRange(nextRange);
|
|
1540
|
+
props.onValueChange?.(nextRange);
|
|
1541
|
+
if (closeOnSelect && nextRange.start && nextRange.end) setOpen(false);
|
|
1542
|
+
},
|
|
1543
|
+
[
|
|
1544
|
+
closeOnSelect,
|
|
1545
|
+
disabled,
|
|
1546
|
+
isRange,
|
|
1547
|
+
isValueControlled,
|
|
1548
|
+
maxDate,
|
|
1549
|
+
minDate,
|
|
1550
|
+
props,
|
|
1551
|
+
rangeValue,
|
|
1552
|
+
setOpen
|
|
1553
|
+
]
|
|
1554
|
+
);
|
|
1555
|
+
const handlePrevMonth = () => setVisibleMonth((current) => addMonths(current, -1));
|
|
1556
|
+
const handleNextMonth = () => setVisibleMonth((current) => addMonths(current, 1));
|
|
1557
|
+
const weeks = react.useMemo(
|
|
1558
|
+
() => getMonthMatrix(visibleMonth, weekStartsOn),
|
|
1559
|
+
[visibleMonth, weekStartsOn]
|
|
1560
|
+
);
|
|
1561
|
+
const today = react.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
|
|
1562
|
+
const hasValue = isRange ? rangeValue.start != null : singleValue != null;
|
|
1563
|
+
const triggerLabel = isRange ? rangeValue.start && rangeValue.end ? `${formatValue(rangeValue.start)} - ${formatValue(rangeValue.end)}` : rangeValue.start ? `${formatValue(rangeValue.start)} - ...` : placeholder : singleValue ? formatValue(singleValue) : placeholder;
|
|
1564
|
+
const triggerBorderColor = isOpen ? colors.primaryMuted : colors.grey700;
|
|
1565
|
+
const triggerTextColor = hasValue ? colors.white : colors.grey100;
|
|
1566
|
+
const resolvedAccessibilityLabel = accessibilityLabel ?? placeholder;
|
|
1567
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1568
|
+
reactNative.View,
|
|
1569
|
+
{
|
|
1570
|
+
...rest,
|
|
1571
|
+
ref: setRootRef,
|
|
1572
|
+
style: [styles5.root, isOpen && styles5.rootOpen, disabled && styles5.disabled, style],
|
|
1573
|
+
accessibilityState: { disabled, expanded: isOpen },
|
|
1574
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles5.triggerWrap, isOpen && styles5.triggerWrapOpen], children: [
|
|
1575
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1576
|
+
reactNative.Pressable,
|
|
1577
|
+
{
|
|
1578
|
+
ref: triggerRef,
|
|
1579
|
+
onPress: handleTriggerPress,
|
|
1580
|
+
disabled,
|
|
1581
|
+
accessibilityRole: "button",
|
|
1582
|
+
accessibilityLabel: resolvedAccessibilityLabel,
|
|
1583
|
+
accessibilityState: { disabled, expanded: isOpen },
|
|
1584
|
+
style: [
|
|
1585
|
+
styles5.trigger,
|
|
1586
|
+
{ borderColor: triggerBorderColor, backgroundColor: colors.grey700 }
|
|
1587
|
+
],
|
|
1588
|
+
children: [
|
|
1589
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
|
|
1590
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarOutlineIcon, { size: ICON_SIZE2, color: colors.grey100 }) })
|
|
1591
|
+
]
|
|
1592
|
+
}
|
|
1593
|
+
),
|
|
1594
|
+
isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.menu, children: [
|
|
1595
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.calendarHeader, children: [
|
|
1596
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1597
|
+
reactNative.Pressable,
|
|
1598
|
+
{
|
|
1599
|
+
onPress: handlePrevMonth,
|
|
1600
|
+
hitSlop: 8,
|
|
1601
|
+
accessibilityRole: "button",
|
|
1602
|
+
accessibilityLabel: "Previous month",
|
|
1603
|
+
style: styles5.navButton,
|
|
1604
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white })
|
|
1605
|
+
}
|
|
1606
|
+
),
|
|
1607
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: styles5.monthHeading, children: [
|
|
1608
|
+
monthNames[visibleMonth.getMonth()],
|
|
1609
|
+
" ",
|
|
1610
|
+
visibleMonth.getFullYear()
|
|
1611
|
+
] }),
|
|
1612
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1613
|
+
reactNative.Pressable,
|
|
1614
|
+
{
|
|
1615
|
+
onPress: handleNextMonth,
|
|
1616
|
+
hitSlop: 8,
|
|
1617
|
+
accessibilityRole: "button",
|
|
1618
|
+
accessibilityLabel: "Next month",
|
|
1619
|
+
style: styles5.navButton,
|
|
1620
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.navIconMirror, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
|
|
1621
|
+
}
|
|
1622
|
+
)
|
|
1623
|
+
] }),
|
|
1624
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
|
|
1625
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.dayCellWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
|
|
1626
|
+
weeks.map((week, weekIndex) => {
|
|
1627
|
+
let rangeHighlightStyle = null;
|
|
1628
|
+
if (isRange && rangeValue.start && rangeValue.end) {
|
|
1629
|
+
const rangeIndices = week.reduce((acc, day, index) => {
|
|
1630
|
+
if (isWithinRange(day, rangeValue.start, rangeValue.end)) {
|
|
1631
|
+
acc.push(index);
|
|
1632
|
+
}
|
|
1633
|
+
return acc;
|
|
1634
|
+
}, []);
|
|
1635
|
+
if (rangeIndices.length > 0) {
|
|
1636
|
+
const first = rangeIndices[0];
|
|
1637
|
+
const last = rangeIndices[rangeIndices.length - 1];
|
|
1638
|
+
const startsHere = isSameDay(week[first], rangeValue.start);
|
|
1639
|
+
const endsHere = isSameDay(week[last], rangeValue.end);
|
|
1640
|
+
const cellPct = 100 / 7;
|
|
1641
|
+
const halfCellPct = cellPct / 2;
|
|
1642
|
+
let leftPct = first * cellPct;
|
|
1643
|
+
let widthPct = (last - first + 1) * cellPct;
|
|
1644
|
+
if (startsHere) {
|
|
1645
|
+
leftPct += halfCellPct;
|
|
1646
|
+
widthPct -= halfCellPct;
|
|
1647
|
+
}
|
|
1648
|
+
if (endsHere) {
|
|
1649
|
+
widthPct -= halfCellPct;
|
|
1650
|
+
}
|
|
1651
|
+
if (widthPct > 0) {
|
|
1652
|
+
rangeHighlightStyle = {
|
|
1653
|
+
left: `${leftPct}%`,
|
|
1654
|
+
width: `${widthPct}%`
|
|
1655
|
+
};
|
|
1656
|
+
}
|
|
1657
|
+
}
|
|
1658
|
+
}
|
|
1659
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1660
|
+
reactNative.View,
|
|
1661
|
+
{
|
|
1662
|
+
style: [styles5.weekRow, weekIndex > 0 && styles5.weekRowSpaced],
|
|
1663
|
+
children: [
|
|
1664
|
+
rangeHighlightStyle ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1665
|
+
reactNative.View,
|
|
1666
|
+
{
|
|
1667
|
+
pointerEvents: "none",
|
|
1668
|
+
style: [styles5.rangeHighlight, rangeHighlightStyle]
|
|
1669
|
+
}
|
|
1670
|
+
) : null,
|
|
1671
|
+
week.map((day, dayIndex) => {
|
|
1672
|
+
const inCurrentMonth = isSameMonth(day, visibleMonth);
|
|
1673
|
+
const isToday = isSameDay(day, today);
|
|
1674
|
+
const isSelectedSingle = !isRange && isSameDay(day, singleValue);
|
|
1675
|
+
const isRangeStart = isRange && isSameDay(day, rangeValue.start);
|
|
1676
|
+
const isRangeEnd = isRange && isSameDay(day, rangeValue.end);
|
|
1677
|
+
const isSelectedEndpoint = isSelectedSingle || isRangeStart || isRangeEnd;
|
|
1678
|
+
const dayDisabled = disabled || isDateDisabled(day, minDate, maxDate);
|
|
1679
|
+
const dayKey = startOfDay(day).getTime();
|
|
1680
|
+
const isHovered = !dayDisabled && !isSelectedEndpoint && hoveredDayKey === dayKey;
|
|
1681
|
+
const dayTextColor = isSelectedEndpoint ? colors.white : dayDisabled ? colors.grey400 : isToday ? colors.primary : !inCurrentMonth ? colors.grey300 : colors.white;
|
|
1682
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1683
|
+
reactNative.Pressable,
|
|
1684
|
+
{
|
|
1685
|
+
onPress: () => handleDayPress(day),
|
|
1686
|
+
disabled: dayDisabled,
|
|
1687
|
+
onHoverIn: () => setHoveredDayKey(dayKey),
|
|
1688
|
+
onHoverOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
|
|
1689
|
+
onPressIn: () => setHoveredDayKey(dayKey),
|
|
1690
|
+
onPressOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
|
|
1691
|
+
style: styles5.dayCellWrap,
|
|
1692
|
+
accessibilityRole: "button",
|
|
1693
|
+
accessibilityLabel: formatValue(day),
|
|
1694
|
+
accessibilityState: {
|
|
1695
|
+
disabled: dayDisabled,
|
|
1696
|
+
selected: isSelectedEndpoint
|
|
1697
|
+
},
|
|
1698
|
+
children: [
|
|
1699
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1700
|
+
reactNative.View,
|
|
1701
|
+
{
|
|
1702
|
+
style: [
|
|
1703
|
+
styles5.dayCircle,
|
|
1704
|
+
isSelectedEndpoint && styles5.dayCircleSelected,
|
|
1705
|
+
isHovered && styles5.dayCircleHovered
|
|
1706
|
+
],
|
|
1707
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.dayText, { color: dayTextColor }], children: day.getDate() })
|
|
1708
|
+
}
|
|
1709
|
+
),
|
|
1710
|
+
isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.todayDot }) : null
|
|
1711
|
+
]
|
|
1712
|
+
},
|
|
1713
|
+
dayIndex
|
|
1714
|
+
);
|
|
1715
|
+
})
|
|
1716
|
+
]
|
|
1717
|
+
},
|
|
1718
|
+
weekIndex
|
|
1719
|
+
);
|
|
1720
|
+
})
|
|
1721
|
+
] })
|
|
1722
|
+
] }) : null
|
|
1723
|
+
] })
|
|
1724
|
+
}
|
|
1725
|
+
);
|
|
1726
|
+
}
|
|
1727
|
+
);
|
|
1728
|
+
var styles5 = reactNative.StyleSheet.create({
|
|
1729
|
+
root: {
|
|
1730
|
+
width: DEFAULT_WIDTH,
|
|
1731
|
+
gap: 8,
|
|
1732
|
+
alignSelf: "flex-start"
|
|
1733
|
+
},
|
|
1734
|
+
rootOpen: {
|
|
1735
|
+
zIndex: 30
|
|
1736
|
+
},
|
|
1737
|
+
disabled: {
|
|
1738
|
+
opacity: 0.6
|
|
1739
|
+
},
|
|
1740
|
+
triggerWrap: {
|
|
1741
|
+
position: "relative",
|
|
1742
|
+
zIndex: 1
|
|
1743
|
+
},
|
|
1744
|
+
triggerWrapOpen: {
|
|
1745
|
+
zIndex: 20
|
|
1746
|
+
},
|
|
1747
|
+
trigger: {
|
|
1748
|
+
height: TRIGGER_HEIGHT,
|
|
1749
|
+
borderRadius: TRIGGER_RADIUS,
|
|
1750
|
+
borderWidth: 1,
|
|
1751
|
+
paddingVertical: 10,
|
|
1752
|
+
paddingHorizontal: 16,
|
|
1753
|
+
flexDirection: "row",
|
|
1754
|
+
alignItems: "center",
|
|
1755
|
+
gap: 10,
|
|
1756
|
+
overflow: "hidden"
|
|
1757
|
+
},
|
|
1758
|
+
triggerText: {
|
|
1759
|
+
...datePickerTypography.field,
|
|
1760
|
+
flex: 1,
|
|
1761
|
+
minWidth: 0
|
|
1762
|
+
},
|
|
1763
|
+
iconSlot: {
|
|
1764
|
+
width: ICON_SIZE2,
|
|
1765
|
+
height: ICON_SIZE2,
|
|
1766
|
+
alignItems: "center",
|
|
1767
|
+
justifyContent: "center",
|
|
1768
|
+
flexShrink: 0
|
|
1769
|
+
},
|
|
1770
|
+
menu: {
|
|
1771
|
+
position: "absolute",
|
|
1772
|
+
top: "100%",
|
|
1773
|
+
left: 0,
|
|
1774
|
+
right: 0,
|
|
1775
|
+
marginTop: 8,
|
|
1776
|
+
zIndex: 10,
|
|
1777
|
+
borderRadius: MENU_RADIUS2,
|
|
1778
|
+
padding: 12,
|
|
1779
|
+
gap: 0,
|
|
1780
|
+
backgroundColor: colors.grey700,
|
|
1781
|
+
...reactNative.Platform.select({
|
|
1782
|
+
web: {
|
|
1783
|
+
boxShadow: `0 8px 24px ${colors.black}73`
|
|
1784
|
+
},
|
|
1785
|
+
default: {
|
|
1786
|
+
elevation: 8
|
|
1787
|
+
}
|
|
1788
|
+
})
|
|
1789
|
+
},
|
|
1790
|
+
calendarHeader: {
|
|
1791
|
+
height: 36,
|
|
1792
|
+
flexDirection: "row",
|
|
1793
|
+
alignItems: "center",
|
|
1794
|
+
justifyContent: "space-between"
|
|
1795
|
+
},
|
|
1796
|
+
navButton: {
|
|
1797
|
+
width: 36,
|
|
1798
|
+
height: 36,
|
|
1799
|
+
alignItems: "center",
|
|
1800
|
+
justifyContent: "center"
|
|
1801
|
+
},
|
|
1802
|
+
navIconMirror: {
|
|
1803
|
+
transform: [{ scaleX: -1 }]
|
|
1804
|
+
},
|
|
1805
|
+
monthHeading: {
|
|
1806
|
+
...datePickerTypography.monthHeading,
|
|
1807
|
+
color: colors.white,
|
|
1808
|
+
textAlign: "center"
|
|
1809
|
+
},
|
|
1810
|
+
weekdayRow: {
|
|
1811
|
+
flexDirection: "row"
|
|
1812
|
+
},
|
|
1813
|
+
weekdayText: {
|
|
1814
|
+
...datePickerTypography.weekday,
|
|
1815
|
+
color: colors.grey300,
|
|
1816
|
+
textAlign: "center",
|
|
1817
|
+
textTransform: "uppercase"
|
|
1818
|
+
},
|
|
1819
|
+
weekRow: {
|
|
1820
|
+
flexDirection: "row",
|
|
1821
|
+
position: "relative"
|
|
1822
|
+
},
|
|
1823
|
+
weekRowSpaced: {
|
|
1824
|
+
marginTop: 8
|
|
1825
|
+
},
|
|
1826
|
+
rangeHighlight: {
|
|
1827
|
+
position: "absolute",
|
|
1828
|
+
top: (DAY_CELL_HEIGHT - DAY_CIRCLE_SIZE) / 2,
|
|
1829
|
+
bottom: (DAY_CELL_HEIGHT - DAY_CIRCLE_SIZE) / 2,
|
|
1830
|
+
borderRadius: DAY_CIRCLE_SIZE / 2,
|
|
1831
|
+
backgroundColor: colors.primaryHover
|
|
1832
|
+
},
|
|
1833
|
+
dayCellWrap: {
|
|
1834
|
+
flex: 1,
|
|
1835
|
+
height: DAY_CELL_HEIGHT,
|
|
1836
|
+
alignItems: "center",
|
|
1837
|
+
justifyContent: "center"
|
|
1838
|
+
},
|
|
1839
|
+
dayCircle: {
|
|
1840
|
+
width: DAY_CIRCLE_SIZE,
|
|
1841
|
+
height: DAY_CIRCLE_SIZE,
|
|
1842
|
+
borderRadius: DAY_CIRCLE_SIZE / 2,
|
|
1843
|
+
alignItems: "center",
|
|
1844
|
+
justifyContent: "center"
|
|
1845
|
+
},
|
|
1846
|
+
dayCircleSelected: {
|
|
1847
|
+
backgroundColor: colors.primary
|
|
1848
|
+
},
|
|
1849
|
+
dayCircleHovered: {
|
|
1850
|
+
backgroundColor: colors.grey600
|
|
1851
|
+
},
|
|
1852
|
+
dayText: {
|
|
1853
|
+
...datePickerTypography.day
|
|
1854
|
+
},
|
|
1855
|
+
todayDot: {
|
|
1856
|
+
position: "absolute",
|
|
1857
|
+
bottom: 2,
|
|
1858
|
+
width: 4,
|
|
1859
|
+
height: 4,
|
|
1860
|
+
borderRadius: 2,
|
|
1861
|
+
backgroundColor: colors.primary
|
|
1862
|
+
}
|
|
1863
|
+
});
|
|
1864
|
+
var DEFAULT_WIDTH2 = 308;
|
|
801
1865
|
var sizeConfig2 = {
|
|
802
1866
|
lg: {
|
|
803
1867
|
height: 44,
|
|
@@ -921,13 +1985,13 @@ var Input = react.forwardRef(function Input2({
|
|
|
921
1985
|
const rightIconNode = rightIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ShowIcon, { size: metrics.iconSize, color: chrome.rightIconColor });
|
|
922
1986
|
useApplyWebClassName(rootRef, className);
|
|
923
1987
|
useApplyWebClassName(inputRef, inputClassName);
|
|
924
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [
|
|
925
|
-
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
1988
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles6.root, disabled && styles6.disabled, style], children: [
|
|
1989
|
+
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.label, { color: chrome.labelColor }], children: label }) : null,
|
|
926
1990
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
927
1991
|
reactNative.View,
|
|
928
1992
|
{
|
|
929
1993
|
style: [
|
|
930
|
-
|
|
1994
|
+
styles6.field,
|
|
931
1995
|
{
|
|
932
1996
|
height: metrics.height,
|
|
933
1997
|
borderRadius: metrics.borderRadius,
|
|
@@ -942,7 +2006,7 @@ var Input = react.forwardRef(function Input2({
|
|
|
942
2006
|
fieldStyle
|
|
943
2007
|
],
|
|
944
2008
|
children: [
|
|
945
|
-
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
2009
|
+
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
|
|
946
2010
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
947
2011
|
reactNative.TextInput,
|
|
948
2012
|
{
|
|
@@ -966,11 +2030,11 @@ var Input = react.forwardRef(function Input2({
|
|
|
966
2030
|
onBlur?.(event);
|
|
967
2031
|
},
|
|
968
2032
|
style: [
|
|
969
|
-
|
|
2033
|
+
styles6.input,
|
|
970
2034
|
metrics.text,
|
|
971
2035
|
{ color: chrome.textColor },
|
|
972
|
-
reactNative.Platform.OS === "web" ?
|
|
973
|
-
reactNative.Platform.OS === "android" ?
|
|
2036
|
+
reactNative.Platform.OS === "web" ? styles6.inputWeb : null,
|
|
2037
|
+
reactNative.Platform.OS === "android" ? styles6.inputAndroid : null,
|
|
974
2038
|
inputStyle
|
|
975
2039
|
],
|
|
976
2040
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
@@ -982,22 +2046,22 @@ var Input = react.forwardRef(function Input2({
|
|
|
982
2046
|
{
|
|
983
2047
|
onPress: onRightIconPress,
|
|
984
2048
|
disabled,
|
|
985
|
-
style: [
|
|
2049
|
+
style: [styles6.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
|
|
986
2050
|
accessibilityRole: "button",
|
|
987
2051
|
accessibilityLabel: rightIconAccessibilityLabel,
|
|
988
2052
|
hitSlop: 8,
|
|
989
2053
|
children: rightIconNode
|
|
990
2054
|
}
|
|
991
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
2055
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
|
|
992
2056
|
]
|
|
993
2057
|
}
|
|
994
2058
|
),
|
|
995
|
-
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2059
|
+
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.hint, { color: chrome.hintColor }], children: hint }) : null
|
|
996
2060
|
] });
|
|
997
2061
|
});
|
|
998
|
-
var
|
|
2062
|
+
var styles6 = reactNative.StyleSheet.create({
|
|
999
2063
|
root: {
|
|
1000
|
-
width:
|
|
2064
|
+
width: DEFAULT_WIDTH2,
|
|
1001
2065
|
gap: 8,
|
|
1002
2066
|
alignSelf: "flex-start"
|
|
1003
2067
|
},
|
|
@@ -1032,13 +2096,13 @@ var styles3 = reactNative.StyleSheet.create({
|
|
|
1032
2096
|
...inputTypography.hint
|
|
1033
2097
|
}
|
|
1034
2098
|
});
|
|
1035
|
-
var
|
|
1036
|
-
var
|
|
1037
|
-
var
|
|
1038
|
-
var
|
|
2099
|
+
var DEFAULT_WIDTH3 = 308;
|
|
2100
|
+
var TRIGGER_HEIGHT2 = 44;
|
|
2101
|
+
var TRIGGER_RADIUS2 = 60;
|
|
2102
|
+
var MENU_RADIUS3 = 24;
|
|
1039
2103
|
var MENU_MAX_LIST_HEIGHT = 248;
|
|
1040
|
-
var
|
|
1041
|
-
var
|
|
2104
|
+
var ITEM_RADIUS2 = 12;
|
|
2105
|
+
var ICON_SIZE3 = 20;
|
|
1042
2106
|
var CHIP_GAP = 6;
|
|
1043
2107
|
var FALLBACK_ELLIPSIS_WIDTH = 20;
|
|
1044
2108
|
function itemBackground(state) {
|
|
@@ -1111,25 +2175,25 @@ function MultiValueChips({ options, disabled, onRemove }) {
|
|
|
1111
2175
|
const next = Math.ceil(event.nativeEvent.layout.width);
|
|
1112
2176
|
setEllipsisWidth((current) => current === next ? current : next);
|
|
1113
2177
|
};
|
|
1114
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
1115
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style:
|
|
2178
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.multiValueRoot, children: [
|
|
2179
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style: styles7.measureRow, children: [
|
|
1116
2180
|
options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1117
2181
|
reactNative.View,
|
|
1118
2182
|
{
|
|
1119
|
-
style:
|
|
2183
|
+
style: styles7.chip,
|
|
1120
2184
|
onLayout: (event) => handleChipLayout(option.value, event),
|
|
1121
2185
|
children: [
|
|
1122
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
1123
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
2186
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.chipLabel, numberOfLines: 1, children: option.label }),
|
|
2187
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.chipRemove, children: "\xD7" })
|
|
1124
2188
|
]
|
|
1125
2189
|
},
|
|
1126
2190
|
`measure-${option.value}`
|
|
1127
2191
|
)),
|
|
1128
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
2192
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.ellipsisText, children: "..." }) })
|
|
1129
2193
|
] }),
|
|
1130
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
1131
|
-
visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
1132
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
2194
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.chipsRow, onLayout: handleContainerLayout, children: [
|
|
2195
|
+
visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.chip, children: [
|
|
2196
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.chipLabel, numberOfLines: 1, children: option.label }),
|
|
1133
2197
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1134
2198
|
reactNative.Pressable,
|
|
1135
2199
|
{
|
|
@@ -1141,11 +2205,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
|
|
|
1141
2205
|
hitSlop: 6,
|
|
1142
2206
|
accessibilityRole: "button",
|
|
1143
2207
|
accessibilityLabel: `Remove ${option.label}`,
|
|
1144
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
2208
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.chipRemove, children: "\xD7" })
|
|
1145
2209
|
}
|
|
1146
2210
|
)
|
|
1147
2211
|
] }, option.value)),
|
|
1148
|
-
hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
2212
|
+
hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.ellipsis, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.ellipsisText, children: "..." }) }) : null
|
|
1149
2213
|
] })
|
|
1150
2214
|
] });
|
|
1151
2215
|
}
|
|
@@ -1356,7 +2420,7 @@ var Select = react.forwardRef(
|
|
|
1356
2420
|
const leftIconNode = leftIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1357
2421
|
UserIcon,
|
|
1358
2422
|
{
|
|
1359
|
-
size:
|
|
2423
|
+
size: ICON_SIZE3,
|
|
1360
2424
|
color: error ? colors.red : isOpen ? colors.primary : colors.grey100
|
|
1361
2425
|
}
|
|
1362
2426
|
);
|
|
@@ -1372,11 +2436,11 @@ var Select = react.forwardRef(
|
|
|
1372
2436
|
{
|
|
1373
2437
|
...rest,
|
|
1374
2438
|
ref: setRootRef,
|
|
1375
|
-
style: [
|
|
2439
|
+
style: [styles7.root, isOpen && styles7.rootOpen, disabled && styles7.disabled, style],
|
|
1376
2440
|
accessibilityState: { disabled, expanded: isOpen },
|
|
1377
2441
|
children: [
|
|
1378
|
-
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
1379
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [
|
|
2442
|
+
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.label, { color: labelColor }], children: label }) : null,
|
|
2443
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles7.triggerWrap, isOpen && styles7.triggerWrapOpen], children: [
|
|
1380
2444
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1381
2445
|
reactNative.Pressable,
|
|
1382
2446
|
{
|
|
@@ -1387,29 +2451,29 @@ var Select = react.forwardRef(
|
|
|
1387
2451
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
1388
2452
|
accessibilityState: { disabled, expanded: isOpen },
|
|
1389
2453
|
style: [
|
|
1390
|
-
|
|
2454
|
+
styles7.trigger,
|
|
1391
2455
|
{
|
|
1392
2456
|
borderColor: triggerBorderColor,
|
|
1393
2457
|
backgroundColor: colors.grey700
|
|
1394
2458
|
}
|
|
1395
2459
|
],
|
|
1396
2460
|
children: [
|
|
1397
|
-
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
1398
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
2461
|
+
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.iconSlot, children: leftIconNode }) : null,
|
|
2462
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1399
2463
|
MultiValueChips,
|
|
1400
2464
|
{
|
|
1401
2465
|
options: selectedOptions,
|
|
1402
2466
|
disabled,
|
|
1403
2467
|
onRemove: handleRemoveChip
|
|
1404
2468
|
}
|
|
1405
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
1406
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
2469
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
|
|
2470
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles7.iconSlot, isOpen && styles7.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE3, color: isOpen ? colors.primary : colors.grey100 }) })
|
|
1407
2471
|
]
|
|
1408
2472
|
}
|
|
1409
2473
|
),
|
|
1410
|
-
isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
1411
|
-
showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
1412
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
2474
|
+
isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.menu, children: [
|
|
2475
|
+
showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.searchField, children: [
|
|
2476
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE3, color: colors.grey100 }) }),
|
|
1413
2477
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1414
2478
|
reactNative.TextInput,
|
|
1415
2479
|
{
|
|
@@ -1420,9 +2484,9 @@ var Select = react.forwardRef(
|
|
|
1420
2484
|
placeholder: searchPlaceholder,
|
|
1421
2485
|
placeholderTextColor: colors.grey100,
|
|
1422
2486
|
style: [
|
|
1423
|
-
|
|
1424
|
-
reactNative.Platform.OS === "web" ?
|
|
1425
|
-
reactNative.Platform.OS === "android" ?
|
|
2487
|
+
styles7.searchInput,
|
|
2488
|
+
reactNative.Platform.OS === "web" ? styles7.searchInputWeb : null,
|
|
2489
|
+
reactNative.Platform.OS === "android" ? styles7.searchInputAndroid : null
|
|
1426
2490
|
],
|
|
1427
2491
|
accessibilityLabel: searchPlaceholder
|
|
1428
2492
|
}
|
|
@@ -1431,12 +2495,12 @@ var Select = react.forwardRef(
|
|
|
1431
2495
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1432
2496
|
reactNative.ScrollView,
|
|
1433
2497
|
{
|
|
1434
|
-
style:
|
|
1435
|
-
contentContainerStyle:
|
|
2498
|
+
style: styles7.optionList,
|
|
2499
|
+
contentContainerStyle: styles7.optionListContent,
|
|
1436
2500
|
keyboardShouldPersistTaps: "handled",
|
|
1437
2501
|
showsVerticalScrollIndicator: false,
|
|
1438
2502
|
children: [
|
|
1439
|
-
loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
2503
|
+
loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.statusText, children: emptyText }) }) : null,
|
|
1440
2504
|
!loading && filteredOptions.map((option) => {
|
|
1441
2505
|
const isSelected = selectedValues.includes(option.value);
|
|
1442
2506
|
const isHovered = hoveredValue === option.value;
|
|
@@ -1453,14 +2517,14 @@ var Select = react.forwardRef(
|
|
|
1453
2517
|
accessibilityRole: multiple ? "checkbox" : "button",
|
|
1454
2518
|
accessibilityState: { selected: isSelected, checked: isSelected, disabled },
|
|
1455
2519
|
style: [
|
|
1456
|
-
|
|
2520
|
+
styles7.item,
|
|
1457
2521
|
{
|
|
1458
2522
|
backgroundColor: itemBackground(visualState)
|
|
1459
2523
|
}
|
|
1460
2524
|
],
|
|
1461
2525
|
children: [
|
|
1462
|
-
multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style:
|
|
1463
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
2526
|
+
multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles7.itemCheckbox, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
|
|
2527
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.itemLabel, numberOfLines: 1, children: option.label })
|
|
1464
2528
|
]
|
|
1465
2529
|
},
|
|
1466
2530
|
option.value
|
|
@@ -1471,15 +2535,15 @@ var Select = react.forwardRef(
|
|
|
1471
2535
|
)
|
|
1472
2536
|
] }) : null
|
|
1473
2537
|
] }),
|
|
1474
|
-
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2538
|
+
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.hint, { color: hintColor }], children: hint }) : null
|
|
1475
2539
|
]
|
|
1476
2540
|
}
|
|
1477
2541
|
);
|
|
1478
2542
|
}
|
|
1479
2543
|
);
|
|
1480
|
-
var
|
|
2544
|
+
var styles7 = reactNative.StyleSheet.create({
|
|
1481
2545
|
root: {
|
|
1482
|
-
width:
|
|
2546
|
+
width: DEFAULT_WIDTH3,
|
|
1483
2547
|
gap: 8,
|
|
1484
2548
|
alignSelf: "flex-start"
|
|
1485
2549
|
},
|
|
@@ -1500,8 +2564,8 @@ var styles4 = reactNative.StyleSheet.create({
|
|
|
1500
2564
|
zIndex: 20
|
|
1501
2565
|
},
|
|
1502
2566
|
trigger: {
|
|
1503
|
-
height:
|
|
1504
|
-
borderRadius:
|
|
2567
|
+
height: TRIGGER_HEIGHT2,
|
|
2568
|
+
borderRadius: TRIGGER_RADIUS2,
|
|
1505
2569
|
borderWidth: 1,
|
|
1506
2570
|
paddingVertical: 12,
|
|
1507
2571
|
paddingHorizontal: 16,
|
|
@@ -1567,8 +2631,8 @@ var styles4 = reactNative.StyleSheet.create({
|
|
|
1567
2631
|
lineHeight: 16
|
|
1568
2632
|
},
|
|
1569
2633
|
iconSlot: {
|
|
1570
|
-
width:
|
|
1571
|
-
height:
|
|
2634
|
+
width: ICON_SIZE3,
|
|
2635
|
+
height: ICON_SIZE3,
|
|
1572
2636
|
alignItems: "center",
|
|
1573
2637
|
justifyContent: "center",
|
|
1574
2638
|
flexShrink: 0
|
|
@@ -1583,7 +2647,7 @@ var styles4 = reactNative.StyleSheet.create({
|
|
|
1583
2647
|
right: 0,
|
|
1584
2648
|
marginTop: 8,
|
|
1585
2649
|
zIndex: 10,
|
|
1586
|
-
borderRadius:
|
|
2650
|
+
borderRadius: MENU_RADIUS3,
|
|
1587
2651
|
padding: 12,
|
|
1588
2652
|
gap: 8,
|
|
1589
2653
|
backgroundColor: colors.grey700,
|
|
@@ -1613,7 +2677,7 @@ var styles4 = reactNative.StyleSheet.create({
|
|
|
1613
2677
|
},
|
|
1614
2678
|
searchField: {
|
|
1615
2679
|
height: 40,
|
|
1616
|
-
borderRadius:
|
|
2680
|
+
borderRadius: ITEM_RADIUS2,
|
|
1617
2681
|
paddingHorizontal: 12,
|
|
1618
2682
|
flexDirection: "row",
|
|
1619
2683
|
alignItems: "center",
|
|
@@ -1635,7 +2699,7 @@ var styles4 = reactNative.StyleSheet.create({
|
|
|
1635
2699
|
},
|
|
1636
2700
|
item: {
|
|
1637
2701
|
minHeight: 43,
|
|
1638
|
-
borderRadius:
|
|
2702
|
+
borderRadius: ITEM_RADIUS2,
|
|
1639
2703
|
padding: 12,
|
|
1640
2704
|
flexDirection: "row",
|
|
1641
2705
|
alignItems: "center",
|
|
@@ -1653,7 +2717,7 @@ var styles4 = reactNative.StyleSheet.create({
|
|
|
1653
2717
|
...selectTypography.hint
|
|
1654
2718
|
}
|
|
1655
2719
|
});
|
|
1656
|
-
var
|
|
2720
|
+
var DEFAULT_WIDTH4 = 308;
|
|
1657
2721
|
var FIELD_HEIGHT = 100;
|
|
1658
2722
|
var FIELD_RADIUS = 16;
|
|
1659
2723
|
var FIELD_PADDING_VERTICAL = 12;
|
|
@@ -1739,13 +2803,13 @@ var Textarea = react.forwardRef(function Textarea2({
|
|
|
1739
2803
|
const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
|
|
1740
2804
|
useApplyWebClassName(rootRef, className);
|
|
1741
2805
|
useApplyWebClassName(inputRef, inputClassName);
|
|
1742
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [
|
|
1743
|
-
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2806
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles8.root, disabled && styles8.disabled, style], children: [
|
|
2807
|
+
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.label, { color: chrome.labelColor }], children: label }) : null,
|
|
1744
2808
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1745
2809
|
reactNative.View,
|
|
1746
2810
|
{
|
|
1747
2811
|
style: [
|
|
1748
|
-
|
|
2812
|
+
styles8.field,
|
|
1749
2813
|
{
|
|
1750
2814
|
borderColor: chrome.borderColor,
|
|
1751
2815
|
backgroundColor: chrome.backgroundColor
|
|
@@ -1777,11 +2841,11 @@ var Textarea = react.forwardRef(function Textarea2({
|
|
|
1777
2841
|
onBlur?.(event);
|
|
1778
2842
|
},
|
|
1779
2843
|
style: [
|
|
1780
|
-
|
|
2844
|
+
styles8.input,
|
|
1781
2845
|
textareaTypography.field,
|
|
1782
2846
|
{ color: chrome.textColor },
|
|
1783
|
-
reactNative.Platform.OS === "web" ?
|
|
1784
|
-
reactNative.Platform.OS === "android" ?
|
|
2847
|
+
reactNative.Platform.OS === "web" ? styles8.inputWeb : null,
|
|
2848
|
+
reactNative.Platform.OS === "android" ? styles8.inputAndroid : null,
|
|
1785
2849
|
inputStyle
|
|
1786
2850
|
],
|
|
1787
2851
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
@@ -1790,12 +2854,12 @@ var Textarea = react.forwardRef(function Textarea2({
|
|
|
1790
2854
|
)
|
|
1791
2855
|
}
|
|
1792
2856
|
),
|
|
1793
|
-
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2857
|
+
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles8.hint, { color: chrome.hintColor }], children: hint }) : null
|
|
1794
2858
|
] });
|
|
1795
2859
|
});
|
|
1796
|
-
var
|
|
2860
|
+
var styles8 = reactNative.StyleSheet.create({
|
|
1797
2861
|
root: {
|
|
1798
|
-
width:
|
|
2862
|
+
width: DEFAULT_WIDTH4,
|
|
1799
2863
|
gap: 8,
|
|
1800
2864
|
alignSelf: "flex-start"
|
|
1801
2865
|
},
|
|
@@ -1893,13 +2957,13 @@ var Toggle = react.forwardRef(function Toggle2({
|
|
|
1893
2957
|
accessibilityRole: "switch",
|
|
1894
2958
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
1895
2959
|
accessibilityState: { checked: isActive, disabled },
|
|
1896
|
-
style: [
|
|
2960
|
+
style: [styles9.pressable, disabled && styles9.disabled, style],
|
|
1897
2961
|
children: [
|
|
1898
2962
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1899
2963
|
reactNative.Animated.View,
|
|
1900
2964
|
{
|
|
1901
2965
|
style: [
|
|
1902
|
-
|
|
2966
|
+
styles9.track,
|
|
1903
2967
|
{
|
|
1904
2968
|
backgroundColor: trackBackgroundColor
|
|
1905
2969
|
}
|
|
@@ -1908,7 +2972,7 @@ var Toggle = react.forwardRef(function Toggle2({
|
|
|
1908
2972
|
reactNative.Animated.View,
|
|
1909
2973
|
{
|
|
1910
2974
|
style: [
|
|
1911
|
-
|
|
2975
|
+
styles9.thumb,
|
|
1912
2976
|
{
|
|
1913
2977
|
transform: [{ translateX: thumbTranslateX }]
|
|
1914
2978
|
}
|
|
@@ -1917,12 +2981,12 @@ var Toggle = react.forwardRef(function Toggle2({
|
|
|
1917
2981
|
)
|
|
1918
2982
|
}
|
|
1919
2983
|
),
|
|
1920
|
-
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2984
|
+
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.label, labelStyle], children: labelContent }) : labelContent : null
|
|
1921
2985
|
]
|
|
1922
2986
|
}
|
|
1923
2987
|
);
|
|
1924
2988
|
});
|
|
1925
|
-
var
|
|
2989
|
+
var styles9 = reactNative.StyleSheet.create({
|
|
1926
2990
|
pressable: {
|
|
1927
2991
|
flexDirection: "row",
|
|
1928
2992
|
alignItems: "center",
|
|
@@ -1952,34 +3016,48 @@ var styles6 = reactNative.StyleSheet.create({
|
|
|
1952
3016
|
});
|
|
1953
3017
|
|
|
1954
3018
|
exports.ArrowRightIcon = ArrowRightIcon;
|
|
3019
|
+
exports.Avatar = Avatar;
|
|
1955
3020
|
exports.BagIcon = BagIcon;
|
|
1956
3021
|
exports.BellIcon = BellIcon;
|
|
1957
3022
|
exports.BuildingIcon = BuildingIcon;
|
|
1958
3023
|
exports.Button = Button;
|
|
3024
|
+
exports.CalendarIcon = CalendarIcon;
|
|
3025
|
+
exports.CalendarOutlineIcon = CalendarOutlineIcon;
|
|
1959
3026
|
exports.CameraIcon = CameraIcon;
|
|
1960
3027
|
exports.CheckBadgeIcon = CheckBadgeIcon;
|
|
1961
3028
|
exports.CheckIcon = CheckIcon;
|
|
1962
3029
|
exports.Checkbox = Checkbox;
|
|
1963
3030
|
exports.ChevronDownIcon = ChevronDownIcon;
|
|
3031
|
+
exports.ChevronLeftIcon = ChevronLeftIcon;
|
|
1964
3032
|
exports.ClockIcon = ClockIcon;
|
|
3033
|
+
exports.DatePicker = DatePicker;
|
|
1965
3034
|
exports.FacebookIcon = FacebookIcon;
|
|
3035
|
+
exports.HeartIcon = HeartIcon;
|
|
3036
|
+
exports.HelpCircleIcon = HelpCircleIcon;
|
|
1966
3037
|
exports.HomeIcon = HomeIcon;
|
|
1967
3038
|
exports.Icon = Icon;
|
|
1968
3039
|
exports.Input = Input;
|
|
1969
3040
|
exports.InstagramIcon = InstagramIcon;
|
|
1970
3041
|
exports.KeyIcon = KeyIcon;
|
|
3042
|
+
exports.LayoutGridIcon = LayoutGridIcon;
|
|
1971
3043
|
exports.LinkedInIcon = LinkedInIcon;
|
|
3044
|
+
exports.LogOutIcon = LogOutIcon;
|
|
1972
3045
|
exports.MailIcon = MailIcon;
|
|
3046
|
+
exports.MenuItem = MenuItem;
|
|
1973
3047
|
exports.NavigateIcon = NavigateIcon;
|
|
1974
3048
|
exports.PhoneIcon = PhoneIcon;
|
|
1975
3049
|
exports.SearchIcon = SearchIcon;
|
|
1976
3050
|
exports.Select = Select;
|
|
3051
|
+
exports.SettingsIcon = SettingsIcon;
|
|
1977
3052
|
exports.ShowIcon = ShowIcon;
|
|
1978
3053
|
exports.Textarea = Textarea;
|
|
1979
3054
|
exports.Toggle = Toggle;
|
|
1980
3055
|
exports.UserIcon = UserIcon;
|
|
3056
|
+
exports.VideoIcon = VideoIcon;
|
|
3057
|
+
exports.avatarTypography = avatarTypography;
|
|
1981
3058
|
exports.buttonTypography = buttonTypography;
|
|
1982
3059
|
exports.colors = colors;
|
|
3060
|
+
exports.datePickerTypography = datePickerTypography;
|
|
1983
3061
|
exports.fonts = fonts;
|
|
1984
3062
|
exports.getIconsByGroup = getIconsByGroup;
|
|
1985
3063
|
exports.grey = grey;
|