@ecohouse/ui 0.1.18 → 0.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +931 -173
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +51 -2
- package/dist/index.d.ts +51 -2
- package/dist/index.js +931 -175
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Range/Range.stories.tsx +128 -0
- package/src/components/Range/Range.test.ts +78 -0
- package/src/components/Range/Range.tsx +755 -0
- package/src/components/Range/Range.types.ts +35 -0
- package/src/components/Range/Range.utils.ts +56 -0
- package/src/components/Range/index.ts +2 -0
- package/src/components/index.ts +3 -0
- package/src/icons/CottageCard/CottageCardIcons.tsx +8 -1
- package/src/icons/CottageCard/CottageCardIcons.web.tsx +8 -1
- package/src/index.ts +10 -1
- package/src/primitives/FavoritesButton/FavoritesButton.stories.tsx +60 -0
- package/src/primitives/FavoritesButton/FavoritesButton.tsx +120 -0
- package/src/primitives/FavoritesButton/index.ts +2 -0
- package/src/primitives/index.ts +2 -0
package/dist/index.cjs
CHANGED
|
@@ -482,11 +482,18 @@ var CARD_LOCATION_DOT_PATH = "M6.49967 5.95833C7.24755 5.95833 7.85384 5.35205 7
|
|
|
482
482
|
var GUESTS_PATH = "M8.20008 8.14683C8.5558 7.83892 8.84111 7.45809 9.03666 7.03018C9.23221 6.60227 9.33342 6.1373 9.33342 5.66683C9.33342 4.78277 8.98223 3.93493 8.3571 3.30981C7.73198 2.68469 6.88414 2.3335 6.00008 2.3335C5.11603 2.3335 4.26818 2.68469 3.64306 3.30981C3.01794 3.93493 2.66675 4.78277 2.66675 5.66683C2.66674 6.1373 2.76795 6.60227 2.9635 7.03018C3.15905 7.45809 3.44436 7.83892 3.80008 8.14683C2.86684 8.56942 2.07506 9.25185 1.5194 10.1125C0.963745 10.9732 0.667729 11.9757 0.666748 13.0002C0.666748 13.177 0.736986 13.3465 0.86201 13.4716C0.987034 13.5966 1.1566 13.6668 1.33341 13.6668C1.51023 13.6668 1.6798 13.5966 1.80482 13.4716C1.92984 13.3465 2.00008 13.177 2.00008 13.0002C2.00008 11.9393 2.42151 10.9219 3.17165 10.1717C3.9218 9.42159 4.93922 9.00016 6.00008 9.00016C7.06095 9.00016 8.07836 9.42159 8.82851 10.1717C9.57865 10.9219 10.0001 11.9393 10.0001 13.0002C10.0001 13.177 10.0703 13.3465 10.1953 13.4716C10.3204 13.5966 10.4899 13.6668 10.6667 13.6668C10.8436 13.6668 11.0131 13.5966 11.1382 13.4716C11.2632 13.3465 11.3334 13.177 11.3334 13.0002C11.3324 11.9757 11.0364 10.9732 10.4808 10.1125C9.92511 9.25185 9.13332 8.56942 8.20008 8.14683ZM6.00008 7.66683C5.60452 7.66683 5.21784 7.54953 4.88894 7.32977C4.56004 7.11001 4.3037 6.79765 4.15232 6.4322C4.00095 6.06674 3.96134 5.66461 4.03851 5.27665C4.11568 4.88869 4.30616 4.53232 4.58587 4.25262C4.86557 3.97291 5.22194 3.78243 5.6099 3.70526C5.99786 3.62809 6.4 3.6677 6.76545 3.81907C7.1309 3.97045 7.44326 4.22679 7.66302 4.55569C7.88278 4.88459 8.00008 5.27127 8.00008 5.66683C8.00008 6.19726 7.78937 6.70597 7.4143 7.08104C7.03922 7.45612 6.53051 7.66683 6.00008 7.66683ZM12.4934 7.88016C12.9201 7.39972 13.1988 6.8062 13.2959 6.17106C13.3931 5.53591 13.3047 4.88621 13.0413 4.30016C12.7778 3.71411 12.3506 3.21669 11.8111 2.86778C11.2715 2.51886 10.6426 2.33332 10.0001 2.3335C9.82327 2.3335 9.6537 2.40373 9.52868 2.52876C9.40365 2.65378 9.33342 2.82335 9.33342 3.00016C9.33342 3.17697 9.40365 3.34654 9.52868 3.47157C9.6537 3.59659 9.82327 3.66683 10.0001 3.66683C10.5305 3.66683 11.0392 3.87754 11.4143 4.25262C11.7894 4.62769 12.0001 5.1364 12.0001 5.66683C11.9991 6.01699 11.9063 6.36076 11.7308 6.66378C11.5553 6.96679 11.3033 7.21842 11.0001 7.3935C10.9012 7.45051 10.8187 7.53194 10.7603 7.62999C10.702 7.72804 10.6697 7.83943 10.6667 7.9535C10.664 8.06667 10.69 8.17869 10.7425 8.279C10.795 8.37931 10.8722 8.4646 10.9667 8.52683L11.2267 8.70016L11.3134 8.74683C12.117 9.12797 12.795 9.73082 13.2674 10.4844C13.7398 11.2379 13.9871 12.1108 13.9801 13.0002C13.9801 13.177 14.0503 13.3465 14.1753 13.4716C14.3004 13.5966 14.4699 13.6668 14.6467 13.6668C14.8236 13.6668 14.9931 13.5966 15.1182 13.4716C15.2432 13.3465 15.3134 13.177 15.3134 13.0002C15.3189 11.9771 15.0626 10.9697 14.5691 10.0735C14.0755 9.17741 13.361 8.42237 12.4934 7.88016Z";
|
|
483
483
|
var BEDROOMS_PATH = "M4.66675 8.33333C5.06231 8.33333 5.44899 8.21604 5.77789 7.99627C6.10679 7.77651 6.36313 7.46415 6.51451 7.0987C6.66588 6.73325 6.70549 6.33111 6.62832 5.94315C6.55115 5.55519 6.36067 5.19882 6.08096 4.91912C5.80126 4.63941 5.44489 4.44893 5.05693 4.37176C4.66897 4.29459 4.26683 4.3342 3.90138 4.48557C3.53593 4.63695 3.22357 4.89329 3.00381 5.22219C2.78405 5.55109 2.66675 5.93777 2.66675 6.33333C2.66675 6.86377 2.87746 7.37247 3.25253 7.74755C3.62761 8.12262 4.13632 8.33333 4.66675 8.33333ZM4.66675 5.66667C4.7986 5.66667 4.9275 5.70577 5.03713 5.77902C5.14676 5.85227 5.23221 5.95639 5.28267 6.07821C5.33313 6.20003 5.34633 6.33407 5.32061 6.46339C5.29488 6.59271 5.23139 6.7115 5.13815 6.80474C5.04492 6.89797 4.92613 6.96147 4.79681 6.98719C4.66749 7.01291 4.53344 6.99971 4.41163 6.94925C4.28981 6.89879 4.18569 6.81335 4.11244 6.70371C4.03918 6.59408 4.00008 6.46519 4.00008 6.33333C4.00008 6.15652 4.07032 5.98695 4.19534 5.86193C4.32037 5.7369 4.48994 5.66667 4.66675 5.66667ZM13.3334 4.33333H8.00008C7.82327 4.33333 7.6537 4.40357 7.52868 4.5286C7.40365 4.65362 7.33342 4.82319 7.33342 5V9H2.00008V3.66667C2.00008 3.48986 1.92984 3.32029 1.80482 3.19526C1.6798 3.07024 1.51023 3 1.33341 3C1.1566 3 0.987034 3.07024 0.86201 3.19526C0.736986 3.32029 0.666748 3.48986 0.666748 3.66667V12.3333C0.666748 12.5101 0.736986 12.6797 0.86201 12.8047C0.987034 12.9298 1.1566 13 1.33341 13C1.51023 13 1.6798 12.9298 1.80482 12.8047C1.92984 12.6797 2.00008 12.5101 2.00008 12.3333V10.3333H14.0001V12.3333C14.0001 12.5101 14.0703 12.6797 14.1953 12.8047C14.3204 12.9298 14.4899 13 14.6667 13C14.8436 13 15.0131 12.9298 15.1382 12.8047C15.2632 12.6797 15.3334 12.5101 15.3334 12.3333V6.33333C15.3334 5.8029 15.1227 5.29419 14.7476 4.91912C14.3726 4.54405 13.8638 4.33333 13.3334 4.33333ZM14.0001 9H8.66675V5.66667H13.3334C13.5102 5.66667 13.6798 5.7369 13.8048 5.86193C13.9298 5.98695 14.0001 6.15652 14.0001 6.33333V9Z";
|
|
484
484
|
var BATHROOMS_PATH = "M14.6667 7.99999H3.33341V4.27343C3.33108 4.03335 3.39444 3.7972 3.51664 3.59053C3.63885 3.38386 3.81525 3.21454 4.02675 3.10091C4.26062 2.97416 4.52713 2.92047 4.79184 2.94677C4.65711 3.35481 4.63797 3.79218 4.73654 4.21043C4.83511 4.62868 5.04755 5.01147 5.35031 5.3164L6.05737 6.02343C6.11926 6.08535 6.19274 6.13447 6.27362 6.16798C6.3545 6.20149 6.44118 6.21874 6.52873 6.21874C6.61627 6.21874 6.70296 6.20149 6.78384 6.16798C6.86471 6.13447 6.93819 6.08535 7.00008 6.02343L9.35686 3.66666C9.41877 3.60477 9.46789 3.53129 9.5014 3.45041C9.53492 3.36954 9.55217 3.28285 9.55217 3.19531C9.55217 3.10776 9.53492 3.02108 9.5014 2.9402C9.46789 2.85932 9.41877 2.78584 9.35686 2.72395L8.64982 2.01692C8.2563 1.62517 7.73578 1.38688 7.18209 1.34501C6.6284 1.30314 6.07796 1.46045 5.63001 1.78857C5.22612 1.63083 4.78981 1.57415 4.35902 1.62346C3.92824 1.67277 3.51602 1.82658 3.15823 2.07151C2.80043 2.31644 2.50789 2.64507 2.30605 3.02883C2.1042 3.41258 1.99917 3.83984 2.00008 4.27343V7.99999H1.33341C1.1566 7.99999 0.987034 8.07023 0.86201 8.19526C0.736986 8.32028 0.666748 8.48985 0.666748 8.66666C0.666748 8.84347 0.736986 9.01304 0.86201 9.13806C0.987034 9.26309 1.1566 9.33333 1.33341 9.33333H2.00008V11.3333C2.00135 11.7456 2.1302 12.1473 2.36893 12.4834C2.60766 12.8195 2.94458 13.0735 3.33341 13.2104V14C3.33341 14.1768 3.40365 14.3464 3.52868 14.4714C3.6537 14.5964 3.82327 14.6667 4.00008 14.6667C4.17689 14.6667 4.34646 14.5964 4.47149 14.4714C4.59651 14.3464 4.66675 14.1768 4.66675 14V13.3333H11.3334V14C11.3334 14.1768 11.4037 14.3464 11.5287 14.4714C11.6537 14.5964 11.8233 14.6667 12.0001 14.6667C12.1769 14.6667 12.3465 14.5964 12.4715 14.4714C12.5965 14.3464 12.6667 14.1768 12.6667 14V13.2105C13.0556 13.0735 13.3925 12.8195 13.6312 12.4834C13.87 12.1473 13.9988 11.7456 14.0001 11.3333V9.33333H14.6667C14.8436 9.33333 15.0131 9.26309 15.1382 9.13806C15.2632 9.01304 15.3334 8.84347 15.3334 8.66666C15.3334 8.48985 15.2632 8.32028 15.1382 8.19526C15.0131 8.07023 14.8436 7.99999 14.6667 7.99999ZM6.29305 2.95963C6.48074 2.77244 6.735 2.66731 7.00008 2.66731C7.26516 2.66731 7.51943 2.77244 7.70711 2.95963L7.94279 3.19531L6.52875 4.60937L6.29307 4.37369C6.10577 4.18606 6.00058 3.93178 6.00058 3.66666C6.00057 3.40155 6.10576 3.14727 6.29305 2.95963ZM12.6667 11.3333C12.6666 11.5101 12.5964 11.6796 12.4714 11.8046C12.3464 11.9296 12.1769 11.9999 12.0001 12H4.00008C3.82331 11.9999 3.65381 11.9296 3.52881 11.8046C3.40381 11.6796 3.33353 11.5101 3.33341 11.3333V9.33333H12.6667V11.3333Z";
|
|
485
|
-
function SaveHeartIcon({
|
|
485
|
+
function SaveHeartIcon({
|
|
486
|
+
size = 16,
|
|
487
|
+
color = colors.white,
|
|
488
|
+
strokeWidth = 2,
|
|
489
|
+
fillOpacity = 0
|
|
490
|
+
}) {
|
|
486
491
|
return /* @__PURE__ */ jsxRuntime.jsx(Svg14__default.default, { width: size, height: size, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
487
492
|
Svg14.Path,
|
|
488
493
|
{
|
|
489
494
|
d: SAVE_HEART_PATH,
|
|
495
|
+
fill: color,
|
|
496
|
+
fillOpacity,
|
|
490
497
|
stroke: color,
|
|
491
498
|
strokeWidth,
|
|
492
499
|
strokeLinecap: "round",
|
|
@@ -1392,6 +1399,85 @@ var styles = reactNative.StyleSheet.create({
|
|
|
1392
1399
|
flex: 1
|
|
1393
1400
|
}
|
|
1394
1401
|
});
|
|
1402
|
+
var ICON_SIZE2 = 16;
|
|
1403
|
+
var BACKGROUND_COLOR = "#09090966";
|
|
1404
|
+
var webBlurStyle = reactNative.Platform.OS === "web" ? {
|
|
1405
|
+
backdropFilter: "blur(10px)",
|
|
1406
|
+
WebkitBackdropFilter: "blur(10px)"
|
|
1407
|
+
} : {};
|
|
1408
|
+
var FavoritesButton = react.forwardRef(
|
|
1409
|
+
function FavoritesButton2({
|
|
1410
|
+
value,
|
|
1411
|
+
defaultValue = false,
|
|
1412
|
+
onValueChange,
|
|
1413
|
+
disabled = false,
|
|
1414
|
+
style,
|
|
1415
|
+
className,
|
|
1416
|
+
accessibilityLabel,
|
|
1417
|
+
hitSlop = 8,
|
|
1418
|
+
...rest
|
|
1419
|
+
}, forwardedRef) {
|
|
1420
|
+
const buttonRef = react.useRef(null);
|
|
1421
|
+
const isControlled = typeof value === "boolean";
|
|
1422
|
+
const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
|
|
1423
|
+
const isActive = isControlled ? value : uncontrolledValue;
|
|
1424
|
+
const setButtonRef = react.useMemo(() => mergeRefs(buttonRef, forwardedRef), [forwardedRef]);
|
|
1425
|
+
useApplyWebClassName(buttonRef, className?.trim() || void 0);
|
|
1426
|
+
const handlePress = () => {
|
|
1427
|
+
const nextValue = !isActive;
|
|
1428
|
+
if (!isControlled) setUncontrolledValue(nextValue);
|
|
1429
|
+
onValueChange?.(nextValue);
|
|
1430
|
+
};
|
|
1431
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1432
|
+
reactNative.Pressable,
|
|
1433
|
+
{
|
|
1434
|
+
...rest,
|
|
1435
|
+
ref: setButtonRef,
|
|
1436
|
+
accessibilityLabel: accessibilityLabel ?? (isActive ? "Remove from favorites" : "Add to favorites"),
|
|
1437
|
+
accessibilityRole: "togglebutton",
|
|
1438
|
+
accessibilityState: { checked: isActive, disabled },
|
|
1439
|
+
disabled,
|
|
1440
|
+
hitSlop,
|
|
1441
|
+
onPress: handlePress,
|
|
1442
|
+
style: ({ pressed }) => [
|
|
1443
|
+
styles2.button,
|
|
1444
|
+
webBlurStyle,
|
|
1445
|
+
pressed && styles2.pressed,
|
|
1446
|
+
disabled && styles2.disabled,
|
|
1447
|
+
style
|
|
1448
|
+
],
|
|
1449
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1450
|
+
SaveHeartIcon,
|
|
1451
|
+
{
|
|
1452
|
+
color: isActive ? colors.red : colors.white,
|
|
1453
|
+
fillOpacity: isActive ? 1 : 0,
|
|
1454
|
+
size: ICON_SIZE2,
|
|
1455
|
+
strokeWidth: 2
|
|
1456
|
+
}
|
|
1457
|
+
)
|
|
1458
|
+
}
|
|
1459
|
+
);
|
|
1460
|
+
}
|
|
1461
|
+
);
|
|
1462
|
+
var styles2 = reactNative.StyleSheet.create({
|
|
1463
|
+
button: {
|
|
1464
|
+
padding: 12,
|
|
1465
|
+
gap: 10,
|
|
1466
|
+
alignItems: "center",
|
|
1467
|
+
justifyContent: "center",
|
|
1468
|
+
alignSelf: "flex-start",
|
|
1469
|
+
borderRadius: 39,
|
|
1470
|
+
borderWidth: 1,
|
|
1471
|
+
borderColor: colors.whiteAlpha10,
|
|
1472
|
+
backgroundColor: BACKGROUND_COLOR
|
|
1473
|
+
},
|
|
1474
|
+
pressed: {
|
|
1475
|
+
opacity: 0.8
|
|
1476
|
+
},
|
|
1477
|
+
disabled: {
|
|
1478
|
+
opacity: 0.5
|
|
1479
|
+
}
|
|
1480
|
+
});
|
|
1395
1481
|
|
|
1396
1482
|
// src/primitives/BrandLogo/brandLogoPaths.ts
|
|
1397
1483
|
var BRAND_LOGO_PATHS = [
|
|
@@ -1551,7 +1637,7 @@ var Avatar = react.forwardRef(function Avatar2({
|
|
|
1551
1637
|
}, [isOpen, closeAndFocusTrigger]);
|
|
1552
1638
|
const hasImage = Boolean(imageUrl) && !imageFailed;
|
|
1553
1639
|
const resolvedAccessibilityLabel = accessibilityLabel ?? [name, email].filter(Boolean).join(", ");
|
|
1554
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [
|
|
1640
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles3.wrapper, isOpen && styles3.wrapperOpen], children: [
|
|
1555
1641
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1556
1642
|
reactNative.Pressable,
|
|
1557
1643
|
{
|
|
@@ -1563,25 +1649,25 @@ var Avatar = react.forwardRef(function Avatar2({
|
|
|
1563
1649
|
accessibilityRole: isInteractive ? "button" : void 0,
|
|
1564
1650
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
1565
1651
|
accessibilityState: isInteractive ? { disabled, expanded: hasMenu ? isOpen : void 0 } : void 0,
|
|
1566
|
-
style: [
|
|
1652
|
+
style: [styles3.root, disabled && styles3.disabled, style],
|
|
1567
1653
|
children: [
|
|
1568
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
1654
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.imageWrap, children: hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1569
1655
|
reactNative.Image,
|
|
1570
1656
|
{
|
|
1571
1657
|
source: { uri: imageUrl ?? void 0 },
|
|
1572
|
-
style:
|
|
1658
|
+
style: styles3.image,
|
|
1573
1659
|
onError: () => setImageFailed(true)
|
|
1574
1660
|
}
|
|
1575
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
1576
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
1577
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
1578
|
-
email ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
1661
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.imageFallback, children: /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { size: FALLBACK_ICON_SIZE, color: colors.primary }) }) }),
|
|
1662
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.textColumn, children: [
|
|
1663
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.name, numberOfLines: 1, children: name }),
|
|
1664
|
+
email ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.email, numberOfLines: 1, children: email }) : null
|
|
1579
1665
|
] }),
|
|
1580
|
-
showChevron ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
1666
|
+
showChevron ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.chevronSlot, isOpen && styles3.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: isOpen ? colors.primary : colors.grey100 }) }) : null
|
|
1581
1667
|
]
|
|
1582
1668
|
}
|
|
1583
1669
|
),
|
|
1584
|
-
hasMenu && isOpen ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
1670
|
+
hasMenu && isOpen ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles3.menu, menuWidth != null && { right: void 0, width: menuWidth }], children: resolvedMenuItems.map((item) => {
|
|
1585
1671
|
const itemKey = item.key ?? item.label;
|
|
1586
1672
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1587
1673
|
MenuItem,
|
|
@@ -1598,7 +1684,7 @@ var Avatar = react.forwardRef(function Avatar2({
|
|
|
1598
1684
|
}) }) : null
|
|
1599
1685
|
] });
|
|
1600
1686
|
});
|
|
1601
|
-
var
|
|
1687
|
+
var styles3 = reactNative.StyleSheet.create({
|
|
1602
1688
|
wrapper: {
|
|
1603
1689
|
position: "relative",
|
|
1604
1690
|
alignSelf: "flex-start"
|
|
@@ -1683,8 +1769,8 @@ var styles2 = reactNative.StyleSheet.create({
|
|
|
1683
1769
|
})
|
|
1684
1770
|
}
|
|
1685
1771
|
});
|
|
1686
|
-
var
|
|
1687
|
-
var
|
|
1772
|
+
var ICON_SIZE3 = 20;
|
|
1773
|
+
var webBlurStyle2 = reactNative.Platform.OS === "web" ? {
|
|
1688
1774
|
backdropFilter: "blur(10.3px)",
|
|
1689
1775
|
WebkitBackdropFilter: "blur(10.3px)"
|
|
1690
1776
|
} : {};
|
|
@@ -1714,22 +1800,22 @@ var Badge = react.forwardRef(function Badge2({ label, variant = "default", icon:
|
|
|
1714
1800
|
...rest,
|
|
1715
1801
|
ref: setContainerRef,
|
|
1716
1802
|
style: [
|
|
1717
|
-
|
|
1803
|
+
styles4.base,
|
|
1718
1804
|
{ backgroundColor: preset.backgroundColor },
|
|
1719
|
-
preset.border ?
|
|
1720
|
-
preset.blur ?
|
|
1805
|
+
preset.border ? styles4.transparentBorder : null,
|
|
1806
|
+
preset.blur ? webBlurStyle2 : null,
|
|
1721
1807
|
style
|
|
1722
1808
|
],
|
|
1723
1809
|
accessibilityRole: "text",
|
|
1724
1810
|
accessibilityLabel: accessibilityLabel ?? label,
|
|
1725
1811
|
children: [
|
|
1726
|
-
Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
1727
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
1812
|
+
Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles4.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE3, color: preset.iconColor }) }) : null,
|
|
1813
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles4.label, reactNative.Platform.OS === "android" ? styles4.labelAndroid : null], children: label })
|
|
1728
1814
|
]
|
|
1729
1815
|
}
|
|
1730
1816
|
);
|
|
1731
1817
|
});
|
|
1732
|
-
var
|
|
1818
|
+
var styles4 = reactNative.StyleSheet.create({
|
|
1733
1819
|
base: {
|
|
1734
1820
|
flexDirection: "row",
|
|
1735
1821
|
alignItems: "center",
|
|
@@ -1750,8 +1836,8 @@ var styles3 = reactNative.StyleSheet.create({
|
|
|
1750
1836
|
borderStyle: "solid"
|
|
1751
1837
|
},
|
|
1752
1838
|
iconSlot: {
|
|
1753
|
-
width:
|
|
1754
|
-
height:
|
|
1839
|
+
width: ICON_SIZE3,
|
|
1840
|
+
height: ICON_SIZE3,
|
|
1755
1841
|
alignItems: "center",
|
|
1756
1842
|
justifyContent: "center",
|
|
1757
1843
|
flexShrink: 0
|
|
@@ -1765,7 +1851,7 @@ var styles3 = reactNative.StyleSheet.create({
|
|
|
1765
1851
|
}
|
|
1766
1852
|
});
|
|
1767
1853
|
var BUTTON_SIZE = 32;
|
|
1768
|
-
var
|
|
1854
|
+
var webBlurStyle3 = reactNative.Platform.OS === "web" ? {
|
|
1769
1855
|
backdropFilter: "blur(20px)",
|
|
1770
1856
|
WebkitBackdropFilter: "blur(20px)"
|
|
1771
1857
|
} : {};
|
|
@@ -1802,7 +1888,7 @@ var Counter = react.forwardRef(function Counter2({
|
|
|
1802
1888
|
if (!isControlled) setUncontrolledValue(next);
|
|
1803
1889
|
onValueChange?.(next);
|
|
1804
1890
|
};
|
|
1805
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [
|
|
1891
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [styles5.base, style], children: [
|
|
1806
1892
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1807
1893
|
reactNative.Pressable,
|
|
1808
1894
|
{
|
|
@@ -1812,11 +1898,11 @@ var Counter = react.forwardRef(function Counter2({
|
|
|
1812
1898
|
accessibilityRole: "button",
|
|
1813
1899
|
accessibilityLabel: "Decrease value",
|
|
1814
1900
|
accessibilityState: { disabled: decrementDisabled },
|
|
1815
|
-
style: [
|
|
1901
|
+
style: [styles5.button, webBlurStyle3, decrementDisabled && styles5.buttonDisabled],
|
|
1816
1902
|
children: /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, {})
|
|
1817
1903
|
}
|
|
1818
1904
|
),
|
|
1819
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
1905
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.value, children: resolvedValue }),
|
|
1820
1906
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1821
1907
|
reactNative.Pressable,
|
|
1822
1908
|
{
|
|
@@ -1826,13 +1912,13 @@ var Counter = react.forwardRef(function Counter2({
|
|
|
1826
1912
|
accessibilityRole: "button",
|
|
1827
1913
|
accessibilityLabel: "Increase value",
|
|
1828
1914
|
accessibilityState: { disabled: incrementDisabled },
|
|
1829
|
-
style: [
|
|
1915
|
+
style: [styles5.button, webBlurStyle3, incrementDisabled && styles5.buttonDisabled],
|
|
1830
1916
|
children: /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, {})
|
|
1831
1917
|
}
|
|
1832
1918
|
)
|
|
1833
1919
|
] });
|
|
1834
1920
|
});
|
|
1835
|
-
var
|
|
1921
|
+
var styles5 = reactNative.StyleSheet.create({
|
|
1836
1922
|
base: {
|
|
1837
1923
|
flexDirection: "row",
|
|
1838
1924
|
alignItems: "center",
|
|
@@ -1856,7 +1942,7 @@ var styles4 = reactNative.StyleSheet.create({
|
|
|
1856
1942
|
color: colors.white
|
|
1857
1943
|
}
|
|
1858
1944
|
});
|
|
1859
|
-
var
|
|
1945
|
+
var ICON_SIZE4 = 20;
|
|
1860
1946
|
var ANIMATION_DURATION = 200;
|
|
1861
1947
|
var OPTION_HORIZONTAL_PADDING = 16;
|
|
1862
1948
|
var SegmentedToggle = react.forwardRef(
|
|
@@ -1923,9 +2009,9 @@ var SegmentedToggle = react.forwardRef(
|
|
|
1923
2009
|
onLayout?.(event);
|
|
1924
2010
|
},
|
|
1925
2011
|
style: [
|
|
1926
|
-
|
|
1927
|
-
fullWidth ?
|
|
1928
|
-
disabled &&
|
|
2012
|
+
styles6.base,
|
|
2013
|
+
fullWidth ? styles6.fullWidth : styles6.contentWidth,
|
|
2014
|
+
disabled && styles6.disabled,
|
|
1929
2015
|
style
|
|
1930
2016
|
],
|
|
1931
2017
|
accessibilityRole: "radiogroup",
|
|
@@ -1935,7 +2021,7 @@ var SegmentedToggle = react.forwardRef(
|
|
|
1935
2021
|
{
|
|
1936
2022
|
pointerEvents: "none",
|
|
1937
2023
|
style: [
|
|
1938
|
-
|
|
2024
|
+
styles6.activeIndicator,
|
|
1939
2025
|
{ width: optionWidth, transform: [{ translateX: indicatorTranslateX }] }
|
|
1940
2026
|
]
|
|
1941
2027
|
}
|
|
@@ -1954,8 +2040,8 @@ var SegmentedToggle = react.forwardRef(
|
|
|
1954
2040
|
accessibilityLabel: label,
|
|
1955
2041
|
accessibilityState: { selected, disabled },
|
|
1956
2042
|
style: [
|
|
1957
|
-
|
|
1958
|
-
fullWidth ?
|
|
2043
|
+
styles6.option,
|
|
2044
|
+
fullWidth ? styles6.optionFullWidth : optionWidth > 0 && { minWidth: optionWidth }
|
|
1959
2045
|
],
|
|
1960
2046
|
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1961
2047
|
reactNative.View,
|
|
@@ -1969,10 +2055,10 @@ var SegmentedToggle = react.forwardRef(
|
|
|
1969
2055
|
return nextWidths;
|
|
1970
2056
|
});
|
|
1971
2057
|
},
|
|
1972
|
-
style:
|
|
2058
|
+
style: styles6.optionContent,
|
|
1973
2059
|
children: [
|
|
1974
|
-
Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size:
|
|
1975
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [
|
|
2060
|
+
Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE4, color: iconColor }) : null,
|
|
2061
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [styles6.label, { color: labelColor }], children: label })
|
|
1976
2062
|
]
|
|
1977
2063
|
}
|
|
1978
2064
|
)
|
|
@@ -1985,7 +2071,7 @@ var SegmentedToggle = react.forwardRef(
|
|
|
1985
2071
|
);
|
|
1986
2072
|
}
|
|
1987
2073
|
);
|
|
1988
|
-
var
|
|
2074
|
+
var styles6 = reactNative.StyleSheet.create({
|
|
1989
2075
|
base: {
|
|
1990
2076
|
height: 44,
|
|
1991
2077
|
flexDirection: "row",
|
|
@@ -2043,7 +2129,7 @@ var defaultLanguageOptions = [
|
|
|
2043
2129
|
];
|
|
2044
2130
|
var CONTROL_WIDTH = 90;
|
|
2045
2131
|
var CONTROL_HEIGHT = 35;
|
|
2046
|
-
var
|
|
2132
|
+
var ICON_SIZE5 = 16;
|
|
2047
2133
|
var LanguageSwitcher = react.forwardRef(
|
|
2048
2134
|
function LanguageSwitcher2({
|
|
2049
2135
|
options = defaultLanguageOptions,
|
|
@@ -2123,7 +2209,7 @@ var LanguageSwitcher = react.forwardRef(
|
|
|
2123
2209
|
{
|
|
2124
2210
|
...rest,
|
|
2125
2211
|
ref: setWrapperRef,
|
|
2126
|
-
style: [
|
|
2212
|
+
style: [styles7.wrapper, isOpen && styles7.wrapperOpen, disabled && styles7.disabled, style],
|
|
2127
2213
|
children: [
|
|
2128
2214
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2129
2215
|
reactNative.Pressable,
|
|
@@ -2138,17 +2224,17 @@ var LanguageSwitcher = react.forwardRef(
|
|
|
2138
2224
|
onHoverIn: () => setTriggerHovered(true),
|
|
2139
2225
|
onHoverOut: () => setTriggerHovered(false),
|
|
2140
2226
|
style: ({ pressed }) => [
|
|
2141
|
-
|
|
2142
|
-
(triggerHovered || pressed || isOpen) &&
|
|
2227
|
+
styles7.trigger,
|
|
2228
|
+
(triggerHovered || pressed || isOpen) && styles7.triggerActive
|
|
2143
2229
|
],
|
|
2144
2230
|
children: [
|
|
2145
|
-
/* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, { size:
|
|
2146
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
2147
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
2231
|
+
/* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, { size: ICON_SIZE5, color: colors.white, strokeWidth: 2 }),
|
|
2232
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.triggerLabel, numberOfLines: 1, children: selectedOption?.label ?? "" }),
|
|
2233
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles7.chevron, isOpen && styles7.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE5, color: colors.white, strokeWidth: 2 }) })
|
|
2148
2234
|
]
|
|
2149
2235
|
}
|
|
2150
2236
|
),
|
|
2151
|
-
isOpen && options.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
2237
|
+
isOpen && options.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.menu, accessibilityRole: "menu", children: options.map((option) => {
|
|
2152
2238
|
const selected = option.value === selectedValue;
|
|
2153
2239
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2154
2240
|
reactNative.Pressable,
|
|
@@ -2160,10 +2246,10 @@ var LanguageSwitcher = react.forwardRef(
|
|
|
2160
2246
|
onHoverIn: () => setHoveredValue(option.value),
|
|
2161
2247
|
onHoverOut: () => setHoveredValue(null),
|
|
2162
2248
|
style: ({ pressed }) => [
|
|
2163
|
-
|
|
2164
|
-
selected ?
|
|
2249
|
+
styles7.item,
|
|
2250
|
+
selected ? styles7.itemSelected : (hoveredValue === option.value || pressed) && styles7.itemHovered
|
|
2165
2251
|
],
|
|
2166
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2252
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles7.itemLabel, selected && styles7.itemLabelSelected], children: option.label })
|
|
2167
2253
|
},
|
|
2168
2254
|
option.value
|
|
2169
2255
|
);
|
|
@@ -2173,7 +2259,7 @@ var LanguageSwitcher = react.forwardRef(
|
|
|
2173
2259
|
);
|
|
2174
2260
|
}
|
|
2175
2261
|
);
|
|
2176
|
-
var
|
|
2262
|
+
var styles7 = reactNative.StyleSheet.create({
|
|
2177
2263
|
wrapper: {
|
|
2178
2264
|
position: "relative",
|
|
2179
2265
|
width: CONTROL_WIDTH,
|
|
@@ -2206,8 +2292,8 @@ var styles6 = reactNative.StyleSheet.create({
|
|
|
2206
2292
|
color: colors.white
|
|
2207
2293
|
},
|
|
2208
2294
|
chevron: {
|
|
2209
|
-
width:
|
|
2210
|
-
height:
|
|
2295
|
+
width: ICON_SIZE5,
|
|
2296
|
+
height: ICON_SIZE5,
|
|
2211
2297
|
flexShrink: 0,
|
|
2212
2298
|
alignItems: "center",
|
|
2213
2299
|
justifyContent: "center"
|
|
@@ -2249,12 +2335,12 @@ var styles6 = reactNative.StyleSheet.create({
|
|
|
2249
2335
|
color: colors.primary
|
|
2250
2336
|
}
|
|
2251
2337
|
});
|
|
2252
|
-
var
|
|
2338
|
+
var ICON_SIZE6 = 28;
|
|
2253
2339
|
var StatCard = react.forwardRef(function StatCard2({
|
|
2254
2340
|
label,
|
|
2255
2341
|
icon: Icon2,
|
|
2256
2342
|
iconProps,
|
|
2257
|
-
iconSize =
|
|
2343
|
+
iconSize = ICON_SIZE6,
|
|
2258
2344
|
style,
|
|
2259
2345
|
className,
|
|
2260
2346
|
accessibilityLabel,
|
|
@@ -2269,17 +2355,17 @@ var StatCard = react.forwardRef(function StatCard2({
|
|
|
2269
2355
|
{
|
|
2270
2356
|
...rest,
|
|
2271
2357
|
ref: setContainerRef,
|
|
2272
|
-
style: [
|
|
2358
|
+
style: [styles8.base, style],
|
|
2273
2359
|
accessibilityRole: "text",
|
|
2274
2360
|
accessibilityLabel: accessibilityLabel ?? label,
|
|
2275
2361
|
children: [
|
|
2276
2362
|
/* @__PURE__ */ jsxRuntime.jsx(Icon2, { ...iconProps, size: iconSize, color: iconProps?.color ?? colors.white }),
|
|
2277
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
2363
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles8.label, children: label })
|
|
2278
2364
|
]
|
|
2279
2365
|
}
|
|
2280
2366
|
);
|
|
2281
2367
|
});
|
|
2282
|
-
var
|
|
2368
|
+
var styles8 = reactNative.StyleSheet.create({
|
|
2283
2369
|
base: {
|
|
2284
2370
|
width: 204.5,
|
|
2285
2371
|
minHeight: 114,
|
|
@@ -2365,7 +2451,7 @@ var Button = react.forwardRef(
|
|
|
2365
2451
|
useApplyWebClassName(textRef, textClassName);
|
|
2366
2452
|
const iconNode = customIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
|
|
2367
2453
|
const containerStyle = [
|
|
2368
|
-
|
|
2454
|
+
styles9.base,
|
|
2369
2455
|
{
|
|
2370
2456
|
minHeight: metrics.minHeight,
|
|
2371
2457
|
borderRadius: metrics.borderRadius,
|
|
@@ -2376,16 +2462,16 @@ var Button = react.forwardRef(
|
|
|
2376
2462
|
paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
|
|
2377
2463
|
gap: hasIcon ? metrics.gap : 0
|
|
2378
2464
|
},
|
|
2379
|
-
hasIcon ?
|
|
2380
|
-
disabled &&
|
|
2465
|
+
hasIcon ? styles9.contentWithIcon : styles9.contentWithoutIcon,
|
|
2466
|
+
disabled && styles9.disabled,
|
|
2381
2467
|
style
|
|
2382
2468
|
];
|
|
2383
2469
|
const labelStyle = [
|
|
2384
|
-
|
|
2470
|
+
styles9.label,
|
|
2385
2471
|
metrics.text,
|
|
2386
2472
|
{ color: preset.textColor },
|
|
2387
|
-
reactNative.Platform.OS === "android" ?
|
|
2388
|
-
!hasIcon &&
|
|
2473
|
+
reactNative.Platform.OS === "android" ? styles9.labelAndroid : null,
|
|
2474
|
+
!hasIcon && styles9.labelCentered,
|
|
2389
2475
|
textStyle
|
|
2390
2476
|
];
|
|
2391
2477
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -2406,7 +2492,7 @@ var Button = react.forwardRef(
|
|
|
2406
2492
|
reactNative.View,
|
|
2407
2493
|
{
|
|
2408
2494
|
style: [
|
|
2409
|
-
|
|
2495
|
+
styles9.iconContainer,
|
|
2410
2496
|
{
|
|
2411
2497
|
width: metrics.iconContainerSize,
|
|
2412
2498
|
height: metrics.iconContainerSize,
|
|
@@ -2422,7 +2508,7 @@ var Button = react.forwardRef(
|
|
|
2422
2508
|
);
|
|
2423
2509
|
}
|
|
2424
2510
|
);
|
|
2425
|
-
var
|
|
2511
|
+
var styles9 = reactNative.StyleSheet.create({
|
|
2426
2512
|
base: {
|
|
2427
2513
|
flexDirection: "row",
|
|
2428
2514
|
alignItems: "center",
|
|
@@ -2506,13 +2592,13 @@ var Checkbox = react.forwardRef(function Checkbox2({
|
|
|
2506
2592
|
accessibilityRole: "checkbox",
|
|
2507
2593
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
2508
2594
|
accessibilityState: { checked: isActive, disabled },
|
|
2509
|
-
style: [
|
|
2595
|
+
style: [styles10.root, disabled && styles10.disabled, style],
|
|
2510
2596
|
children: [
|
|
2511
2597
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2512
2598
|
reactNative.View,
|
|
2513
2599
|
{
|
|
2514
2600
|
style: [
|
|
2515
|
-
|
|
2601
|
+
styles10.box,
|
|
2516
2602
|
{
|
|
2517
2603
|
backgroundColor: chrome.backgroundColor,
|
|
2518
2604
|
borderColor: chrome.borderColor
|
|
@@ -2521,12 +2607,12 @@ var Checkbox = react.forwardRef(function Checkbox2({
|
|
|
2521
2607
|
children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: CHECK_SIZE, color: colors.primary, strokeWidth: CHECK_STROKE }) : null
|
|
2522
2608
|
}
|
|
2523
2609
|
),
|
|
2524
|
-
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2610
|
+
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.label, labelStyle], children: labelContent }) : labelContent : null
|
|
2525
2611
|
]
|
|
2526
2612
|
}
|
|
2527
2613
|
);
|
|
2528
2614
|
});
|
|
2529
|
-
var
|
|
2615
|
+
var styles10 = reactNative.StyleSheet.create({
|
|
2530
2616
|
root: {
|
|
2531
2617
|
flexDirection: "row",
|
|
2532
2618
|
alignItems: "center",
|
|
@@ -2624,7 +2710,7 @@ var DEFAULT_WIDTH = 380;
|
|
|
2624
2710
|
var TRIGGER_HEIGHT = 44;
|
|
2625
2711
|
var TRIGGER_RADIUS = 60;
|
|
2626
2712
|
var MENU_RADIUS2 = 20;
|
|
2627
|
-
var
|
|
2713
|
+
var ICON_SIZE7 = 20;
|
|
2628
2714
|
var NAV_ICON_SIZE = 20;
|
|
2629
2715
|
var DAY_CELL_HEIGHT = 44;
|
|
2630
2716
|
var DAY_CIRCLE_SIZE = 44;
|
|
@@ -2777,9 +2863,9 @@ var DatePicker = react.forwardRef(
|
|
|
2777
2863
|
{
|
|
2778
2864
|
...rest,
|
|
2779
2865
|
ref: setRootRef,
|
|
2780
|
-
style: [
|
|
2866
|
+
style: [styles11.root, isOpen && styles11.rootOpen, disabled && styles11.disabled, style],
|
|
2781
2867
|
accessibilityState: { disabled, expanded: isOpen },
|
|
2782
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [
|
|
2868
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles11.triggerWrap, isOpen && styles11.triggerWrapOpen], children: [
|
|
2783
2869
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2784
2870
|
reactNative.Pressable,
|
|
2785
2871
|
{
|
|
@@ -2790,17 +2876,17 @@ var DatePicker = react.forwardRef(
|
|
|
2790
2876
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
2791
2877
|
accessibilityState: { disabled, expanded: isOpen },
|
|
2792
2878
|
style: [
|
|
2793
|
-
|
|
2879
|
+
styles11.trigger,
|
|
2794
2880
|
{ borderColor: triggerBorderColor, backgroundColor: colors.grey700 }
|
|
2795
2881
|
],
|
|
2796
2882
|
children: [
|
|
2797
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2798
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
2883
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles11.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
|
|
2884
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarOutlineIcon, { size: ICON_SIZE7, color: colors.grey100 }) })
|
|
2799
2885
|
]
|
|
2800
2886
|
}
|
|
2801
2887
|
),
|
|
2802
|
-
isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [
|
|
2803
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
2888
|
+
isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles11.menu, calendarStyle], children: [
|
|
2889
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles11.calendarHeader, children: [
|
|
2804
2890
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2805
2891
|
reactNative.Pressable,
|
|
2806
2892
|
{
|
|
@@ -2808,11 +2894,11 @@ var DatePicker = react.forwardRef(
|
|
|
2808
2894
|
hitSlop: 8,
|
|
2809
2895
|
accessibilityRole: "button",
|
|
2810
2896
|
accessibilityLabel: "Previous month",
|
|
2811
|
-
style:
|
|
2897
|
+
style: styles11.navButton,
|
|
2812
2898
|
children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white })
|
|
2813
2899
|
}
|
|
2814
2900
|
),
|
|
2815
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style:
|
|
2901
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: styles11.monthHeading, children: [
|
|
2816
2902
|
monthNames[visibleMonth.getMonth()],
|
|
2817
2903
|
" ",
|
|
2818
2904
|
visibleMonth.getFullYear()
|
|
@@ -2824,13 +2910,13 @@ var DatePicker = react.forwardRef(
|
|
|
2824
2910
|
hitSlop: 8,
|
|
2825
2911
|
accessibilityRole: "button",
|
|
2826
2912
|
accessibilityLabel: "Next month",
|
|
2827
|
-
style:
|
|
2828
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
2913
|
+
style: styles11.navButton,
|
|
2914
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.navIconMirror, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
|
|
2829
2915
|
}
|
|
2830
2916
|
)
|
|
2831
2917
|
] }),
|
|
2832
2918
|
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
|
|
2833
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
2919
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.dayCellWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles11.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
|
|
2834
2920
|
weeks.map((week, weekIndex) => {
|
|
2835
2921
|
let rangeHighlightStyle = null;
|
|
2836
2922
|
if (isRange && rangeValue.start && rangeValue.end) {
|
|
@@ -2867,13 +2953,13 @@ var DatePicker = react.forwardRef(
|
|
|
2867
2953
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2868
2954
|
reactNative.View,
|
|
2869
2955
|
{
|
|
2870
|
-
style: [
|
|
2956
|
+
style: [styles11.weekRow, weekIndex > 0 && styles11.weekRowSpaced],
|
|
2871
2957
|
children: [
|
|
2872
2958
|
rangeHighlightStyle ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
2873
2959
|
reactNative.View,
|
|
2874
2960
|
{
|
|
2875
2961
|
pointerEvents: "none",
|
|
2876
|
-
style: [
|
|
2962
|
+
style: [styles11.rangeHighlight, rangeHighlightStyle]
|
|
2877
2963
|
}
|
|
2878
2964
|
) : null,
|
|
2879
2965
|
week.map((day, dayIndex) => {
|
|
@@ -2896,7 +2982,7 @@ var DatePicker = react.forwardRef(
|
|
|
2896
2982
|
onHoverOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
|
|
2897
2983
|
onPressIn: () => setHoveredDayKey(dayKey),
|
|
2898
2984
|
onPressOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
|
|
2899
|
-
style:
|
|
2985
|
+
style: styles11.dayCellWrap,
|
|
2900
2986
|
accessibilityRole: "button",
|
|
2901
2987
|
accessibilityLabel: formatValue(day),
|
|
2902
2988
|
accessibilityState: {
|
|
@@ -2908,14 +2994,14 @@ var DatePicker = react.forwardRef(
|
|
|
2908
2994
|
reactNative.View,
|
|
2909
2995
|
{
|
|
2910
2996
|
style: [
|
|
2911
|
-
|
|
2912
|
-
isSelectedEndpoint &&
|
|
2913
|
-
isHovered &&
|
|
2997
|
+
styles11.dayCircle,
|
|
2998
|
+
isSelectedEndpoint && styles11.dayCircleSelected,
|
|
2999
|
+
isHovered && styles11.dayCircleHovered
|
|
2914
3000
|
],
|
|
2915
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3001
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles11.dayText, { color: dayTextColor }], children: day.getDate() })
|
|
2916
3002
|
}
|
|
2917
3003
|
),
|
|
2918
|
-
isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
3004
|
+
isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.todayDot }) : null
|
|
2919
3005
|
]
|
|
2920
3006
|
},
|
|
2921
3007
|
dayIndex
|
|
@@ -2933,7 +3019,7 @@ var DatePicker = react.forwardRef(
|
|
|
2933
3019
|
);
|
|
2934
3020
|
}
|
|
2935
3021
|
);
|
|
2936
|
-
var
|
|
3022
|
+
var styles11 = reactNative.StyleSheet.create({
|
|
2937
3023
|
root: {
|
|
2938
3024
|
width: DEFAULT_WIDTH,
|
|
2939
3025
|
gap: 8,
|
|
@@ -2969,8 +3055,8 @@ var styles10 = reactNative.StyleSheet.create({
|
|
|
2969
3055
|
minWidth: 0
|
|
2970
3056
|
},
|
|
2971
3057
|
iconSlot: {
|
|
2972
|
-
width:
|
|
2973
|
-
height:
|
|
3058
|
+
width: ICON_SIZE7,
|
|
3059
|
+
height: ICON_SIZE7,
|
|
2974
3060
|
alignItems: "center",
|
|
2975
3061
|
justifyContent: "center",
|
|
2976
3062
|
flexShrink: 0
|
|
@@ -3212,13 +3298,13 @@ var Input = react.forwardRef(function Input2({
|
|
|
3212
3298
|
});
|
|
3213
3299
|
useApplyWebClassName(rootRef, className);
|
|
3214
3300
|
useApplyWebClassName(inputRef, inputClassName);
|
|
3215
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [
|
|
3216
|
-
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3301
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles12.root, disabled && styles12.disabled, style], children: [
|
|
3302
|
+
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.label, { color: chrome.labelColor }], children: label }) : null,
|
|
3217
3303
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3218
3304
|
reactNative.View,
|
|
3219
3305
|
{
|
|
3220
3306
|
style: [
|
|
3221
|
-
|
|
3307
|
+
styles12.field,
|
|
3222
3308
|
{
|
|
3223
3309
|
height: metrics.height,
|
|
3224
3310
|
borderRadius: metrics.borderRadius,
|
|
@@ -3233,7 +3319,7 @@ var Input = react.forwardRef(function Input2({
|
|
|
3233
3319
|
fieldStyle
|
|
3234
3320
|
],
|
|
3235
3321
|
children: [
|
|
3236
|
-
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
3322
|
+
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles12.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
|
|
3237
3323
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3238
3324
|
reactNative.TextInput,
|
|
3239
3325
|
{
|
|
@@ -3257,11 +3343,11 @@ var Input = react.forwardRef(function Input2({
|
|
|
3257
3343
|
onBlur?.(event);
|
|
3258
3344
|
},
|
|
3259
3345
|
style: [
|
|
3260
|
-
|
|
3346
|
+
styles12.input,
|
|
3261
3347
|
metrics.text,
|
|
3262
3348
|
{ color: chrome.textColor },
|
|
3263
|
-
reactNative.Platform.OS === "web" ?
|
|
3264
|
-
reactNative.Platform.OS === "android" ?
|
|
3349
|
+
reactNative.Platform.OS === "web" ? styles12.inputWeb : null,
|
|
3350
|
+
reactNative.Platform.OS === "android" ? styles12.inputAndroid : null,
|
|
3265
3351
|
inputStyle
|
|
3266
3352
|
],
|
|
3267
3353
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
@@ -3273,20 +3359,20 @@ var Input = react.forwardRef(function Input2({
|
|
|
3273
3359
|
{
|
|
3274
3360
|
onPress: onRightIconPress,
|
|
3275
3361
|
disabled,
|
|
3276
|
-
style: [
|
|
3362
|
+
style: [styles12.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
|
|
3277
3363
|
accessibilityRole: "button",
|
|
3278
3364
|
accessibilityLabel: rightIconAccessibilityLabel,
|
|
3279
3365
|
hitSlop: 8,
|
|
3280
3366
|
children: rightIconNode
|
|
3281
3367
|
}
|
|
3282
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
3368
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles12.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
|
|
3283
3369
|
]
|
|
3284
3370
|
}
|
|
3285
3371
|
),
|
|
3286
|
-
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3372
|
+
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.hint, { color: chrome.hintColor }], children: hint }) : null
|
|
3287
3373
|
] });
|
|
3288
3374
|
});
|
|
3289
|
-
var
|
|
3375
|
+
var styles12 = reactNative.StyleSheet.create({
|
|
3290
3376
|
root: {
|
|
3291
3377
|
width: DEFAULT_WIDTH2,
|
|
3292
3378
|
gap: 8,
|
|
@@ -3329,7 +3415,7 @@ var TRIGGER_RADIUS2 = 60;
|
|
|
3329
3415
|
var MENU_RADIUS3 = 24;
|
|
3330
3416
|
var MENU_MAX_LIST_HEIGHT = 248;
|
|
3331
3417
|
var ITEM_RADIUS2 = 12;
|
|
3332
|
-
var
|
|
3418
|
+
var ICON_SIZE8 = 20;
|
|
3333
3419
|
var CHIP_GAP = 6;
|
|
3334
3420
|
var FALLBACK_ELLIPSIS_WIDTH = 20;
|
|
3335
3421
|
function itemBackground(state) {
|
|
@@ -3402,25 +3488,25 @@ function MultiValueChips({ options, disabled, onRemove }) {
|
|
|
3402
3488
|
const next = Math.ceil(event.nativeEvent.layout.width);
|
|
3403
3489
|
setEllipsisWidth((current) => current === next ? current : next);
|
|
3404
3490
|
};
|
|
3405
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
3406
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style:
|
|
3491
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles13.multiValueRoot, children: [
|
|
3492
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style: styles13.measureRow, children: [
|
|
3407
3493
|
options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3408
3494
|
reactNative.View,
|
|
3409
3495
|
{
|
|
3410
|
-
style:
|
|
3496
|
+
style: styles13.chip,
|
|
3411
3497
|
onLayout: (event) => handleChipLayout(option.value, event),
|
|
3412
3498
|
children: [
|
|
3413
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
3414
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
3499
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles13.chipLabel, numberOfLines: 1, children: option.label }),
|
|
3500
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles13.chipRemove, children: "\xD7" })
|
|
3415
3501
|
]
|
|
3416
3502
|
},
|
|
3417
3503
|
`measure-${option.value}`
|
|
3418
3504
|
)),
|
|
3419
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
3505
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles13.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles13.ellipsisText, children: "..." }) })
|
|
3420
3506
|
] }),
|
|
3421
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
3422
|
-
visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
3423
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
3507
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles13.chipsRow, onLayout: handleContainerLayout, children: [
|
|
3508
|
+
visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles13.chip, children: [
|
|
3509
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles13.chipLabel, numberOfLines: 1, children: option.label }),
|
|
3424
3510
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3425
3511
|
reactNative.Pressable,
|
|
3426
3512
|
{
|
|
@@ -3432,11 +3518,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
|
|
|
3432
3518
|
hitSlop: 6,
|
|
3433
3519
|
accessibilityRole: "button",
|
|
3434
3520
|
accessibilityLabel: `Remove ${option.label}`,
|
|
3435
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
3521
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles13.chipRemove, children: "\xD7" })
|
|
3436
3522
|
}
|
|
3437
3523
|
)
|
|
3438
3524
|
] }, option.value)),
|
|
3439
|
-
hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
3525
|
+
hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles13.ellipsis, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles13.ellipsisText, children: "..." }) }) : null
|
|
3440
3526
|
] })
|
|
3441
3527
|
] });
|
|
3442
3528
|
}
|
|
@@ -3645,7 +3731,7 @@ var Select = react.forwardRef(
|
|
|
3645
3731
|
setOpen
|
|
3646
3732
|
]);
|
|
3647
3733
|
const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
|
|
3648
|
-
size:
|
|
3734
|
+
size: ICON_SIZE8,
|
|
3649
3735
|
color: error ? colors.red : isOpen ? colors.primary : colors.grey100
|
|
3650
3736
|
});
|
|
3651
3737
|
const hasLeftIcon = showLeftIcon || leftIcon != null;
|
|
@@ -3660,11 +3746,11 @@ var Select = react.forwardRef(
|
|
|
3660
3746
|
{
|
|
3661
3747
|
...rest,
|
|
3662
3748
|
ref: setRootRef,
|
|
3663
|
-
style: [
|
|
3749
|
+
style: [styles13.root, isOpen && styles13.rootOpen, disabled && styles13.disabled, style],
|
|
3664
3750
|
accessibilityState: { disabled, expanded: isOpen },
|
|
3665
3751
|
children: [
|
|
3666
|
-
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3667
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [
|
|
3752
|
+
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles13.label, { color: labelColor }], children: label }) : null,
|
|
3753
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles13.triggerWrap, isOpen && styles13.triggerWrapOpen], children: [
|
|
3668
3754
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3669
3755
|
reactNative.Pressable,
|
|
3670
3756
|
{
|
|
@@ -3675,29 +3761,29 @@ var Select = react.forwardRef(
|
|
|
3675
3761
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
3676
3762
|
accessibilityState: { disabled, expanded: isOpen },
|
|
3677
3763
|
style: [
|
|
3678
|
-
|
|
3764
|
+
styles13.trigger,
|
|
3679
3765
|
{
|
|
3680
3766
|
borderColor: triggerBorderColor,
|
|
3681
3767
|
backgroundColor: colors.grey700
|
|
3682
3768
|
}
|
|
3683
3769
|
],
|
|
3684
3770
|
children: [
|
|
3685
|
-
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
3686
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
3771
|
+
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles13.iconSlot, children: leftIconNode }) : null,
|
|
3772
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles13.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
3687
3773
|
MultiValueChips,
|
|
3688
3774
|
{
|
|
3689
3775
|
options: selectedOptions,
|
|
3690
3776
|
disabled,
|
|
3691
3777
|
onRemove: handleRemoveChip
|
|
3692
3778
|
}
|
|
3693
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3694
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
3779
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles13.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
|
|
3780
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles13.iconSlot, isOpen && styles13.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE8, color: isOpen ? colors.primary : colors.grey100 }) })
|
|
3695
3781
|
]
|
|
3696
3782
|
}
|
|
3697
3783
|
),
|
|
3698
|
-
isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
3699
|
-
showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
3700
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
3784
|
+
isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles13.menu, children: [
|
|
3785
|
+
showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles13.searchField, children: [
|
|
3786
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles13.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE8, color: colors.grey100 }) }),
|
|
3701
3787
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3702
3788
|
reactNative.TextInput,
|
|
3703
3789
|
{
|
|
@@ -3708,9 +3794,9 @@ var Select = react.forwardRef(
|
|
|
3708
3794
|
placeholder: searchPlaceholder,
|
|
3709
3795
|
placeholderTextColor: colors.grey100,
|
|
3710
3796
|
style: [
|
|
3711
|
-
|
|
3712
|
-
reactNative.Platform.OS === "web" ?
|
|
3713
|
-
reactNative.Platform.OS === "android" ?
|
|
3797
|
+
styles13.searchInput,
|
|
3798
|
+
reactNative.Platform.OS === "web" ? styles13.searchInputWeb : null,
|
|
3799
|
+
reactNative.Platform.OS === "android" ? styles13.searchInputAndroid : null
|
|
3714
3800
|
],
|
|
3715
3801
|
accessibilityLabel: searchPlaceholder
|
|
3716
3802
|
}
|
|
@@ -3719,12 +3805,12 @@ var Select = react.forwardRef(
|
|
|
3719
3805
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3720
3806
|
reactNative.ScrollView,
|
|
3721
3807
|
{
|
|
3722
|
-
style:
|
|
3723
|
-
contentContainerStyle:
|
|
3808
|
+
style: styles13.optionList,
|
|
3809
|
+
contentContainerStyle: styles13.optionListContent,
|
|
3724
3810
|
keyboardShouldPersistTaps: "handled",
|
|
3725
3811
|
showsVerticalScrollIndicator: false,
|
|
3726
3812
|
children: [
|
|
3727
|
-
loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
3813
|
+
loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles13.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles13.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles13.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles13.statusText, children: emptyText }) }) : null,
|
|
3728
3814
|
!loading && filteredOptions.map((option) => {
|
|
3729
3815
|
const isSelected = selectedValues.includes(option.value);
|
|
3730
3816
|
const isHovered = hoveredValue === option.value;
|
|
@@ -3741,14 +3827,14 @@ var Select = react.forwardRef(
|
|
|
3741
3827
|
accessibilityRole: multiple ? "checkbox" : "button",
|
|
3742
3828
|
accessibilityState: { selected: isSelected, checked: isSelected, disabled },
|
|
3743
3829
|
style: [
|
|
3744
|
-
|
|
3830
|
+
styles13.item,
|
|
3745
3831
|
{
|
|
3746
3832
|
backgroundColor: itemBackground(visualState)
|
|
3747
3833
|
}
|
|
3748
3834
|
],
|
|
3749
3835
|
children: [
|
|
3750
|
-
multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style:
|
|
3751
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
3836
|
+
multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles13.itemCheckbox, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
|
|
3837
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles13.itemLabel, numberOfLines: 1, children: option.label })
|
|
3752
3838
|
]
|
|
3753
3839
|
},
|
|
3754
3840
|
option.value
|
|
@@ -3759,13 +3845,13 @@ var Select = react.forwardRef(
|
|
|
3759
3845
|
)
|
|
3760
3846
|
] }) : null
|
|
3761
3847
|
] }),
|
|
3762
|
-
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3848
|
+
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles13.hint, { color: hintColor }], children: hint }) : null
|
|
3763
3849
|
]
|
|
3764
3850
|
}
|
|
3765
3851
|
);
|
|
3766
3852
|
}
|
|
3767
3853
|
);
|
|
3768
|
-
var
|
|
3854
|
+
var styles13 = reactNative.StyleSheet.create({
|
|
3769
3855
|
root: {
|
|
3770
3856
|
width: DEFAULT_WIDTH3,
|
|
3771
3857
|
gap: 8,
|
|
@@ -3855,8 +3941,8 @@ var styles12 = reactNative.StyleSheet.create({
|
|
|
3855
3941
|
lineHeight: 16
|
|
3856
3942
|
},
|
|
3857
3943
|
iconSlot: {
|
|
3858
|
-
width:
|
|
3859
|
-
height:
|
|
3944
|
+
width: ICON_SIZE8,
|
|
3945
|
+
height: ICON_SIZE8,
|
|
3860
3946
|
alignItems: "center",
|
|
3861
3947
|
justifyContent: "center",
|
|
3862
3948
|
flexShrink: 0
|
|
@@ -4027,13 +4113,13 @@ var Textarea = react.forwardRef(function Textarea2({
|
|
|
4027
4113
|
const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
|
|
4028
4114
|
useApplyWebClassName(rootRef, className);
|
|
4029
4115
|
useApplyWebClassName(inputRef, inputClassName);
|
|
4030
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [
|
|
4031
|
-
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
4116
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles14.root, disabled && styles14.disabled, style], children: [
|
|
4117
|
+
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles14.label, { color: chrome.labelColor }], children: label }) : null,
|
|
4032
4118
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4033
4119
|
reactNative.View,
|
|
4034
4120
|
{
|
|
4035
4121
|
style: [
|
|
4036
|
-
|
|
4122
|
+
styles14.field,
|
|
4037
4123
|
{
|
|
4038
4124
|
borderColor: chrome.borderColor,
|
|
4039
4125
|
backgroundColor: chrome.backgroundColor
|
|
@@ -4065,11 +4151,11 @@ var Textarea = react.forwardRef(function Textarea2({
|
|
|
4065
4151
|
onBlur?.(event);
|
|
4066
4152
|
},
|
|
4067
4153
|
style: [
|
|
4068
|
-
|
|
4154
|
+
styles14.input,
|
|
4069
4155
|
textareaTypography.field,
|
|
4070
4156
|
{ color: chrome.textColor },
|
|
4071
|
-
reactNative.Platform.OS === "web" ?
|
|
4072
|
-
reactNative.Platform.OS === "android" ?
|
|
4157
|
+
reactNative.Platform.OS === "web" ? styles14.inputWeb : null,
|
|
4158
|
+
reactNative.Platform.OS === "android" ? styles14.inputAndroid : null,
|
|
4073
4159
|
inputStyle
|
|
4074
4160
|
],
|
|
4075
4161
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
@@ -4078,10 +4164,10 @@ var Textarea = react.forwardRef(function Textarea2({
|
|
|
4078
4164
|
)
|
|
4079
4165
|
}
|
|
4080
4166
|
),
|
|
4081
|
-
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
4167
|
+
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles14.hint, { color: chrome.hintColor }], children: hint }) : null
|
|
4082
4168
|
] });
|
|
4083
4169
|
});
|
|
4084
|
-
var
|
|
4170
|
+
var styles14 = reactNative.StyleSheet.create({
|
|
4085
4171
|
root: {
|
|
4086
4172
|
width: DEFAULT_WIDTH4,
|
|
4087
4173
|
gap: 8,
|
|
@@ -4181,13 +4267,13 @@ var Toggle = react.forwardRef(function Toggle2({
|
|
|
4181
4267
|
accessibilityRole: "switch",
|
|
4182
4268
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
4183
4269
|
accessibilityState: { checked: isActive, disabled },
|
|
4184
|
-
style: [
|
|
4270
|
+
style: [styles15.pressable, disabled && styles15.disabled, style],
|
|
4185
4271
|
children: [
|
|
4186
4272
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4187
4273
|
reactNative.Animated.View,
|
|
4188
4274
|
{
|
|
4189
4275
|
style: [
|
|
4190
|
-
|
|
4276
|
+
styles15.track,
|
|
4191
4277
|
{
|
|
4192
4278
|
backgroundColor: trackBackgroundColor
|
|
4193
4279
|
}
|
|
@@ -4196,7 +4282,7 @@ var Toggle = react.forwardRef(function Toggle2({
|
|
|
4196
4282
|
reactNative.Animated.View,
|
|
4197
4283
|
{
|
|
4198
4284
|
style: [
|
|
4199
|
-
|
|
4285
|
+
styles15.thumb,
|
|
4200
4286
|
{
|
|
4201
4287
|
transform: [{ translateX: thumbTranslateX }]
|
|
4202
4288
|
}
|
|
@@ -4205,12 +4291,12 @@ var Toggle = react.forwardRef(function Toggle2({
|
|
|
4205
4291
|
)
|
|
4206
4292
|
}
|
|
4207
4293
|
),
|
|
4208
|
-
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
4294
|
+
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles15.label, labelStyle], children: labelContent }) : labelContent : null
|
|
4209
4295
|
]
|
|
4210
4296
|
}
|
|
4211
4297
|
);
|
|
4212
4298
|
});
|
|
4213
|
-
var
|
|
4299
|
+
var styles15 = reactNative.StyleSheet.create({
|
|
4214
4300
|
pressable: {
|
|
4215
4301
|
flexDirection: "row",
|
|
4216
4302
|
alignItems: "center",
|
|
@@ -4285,21 +4371,21 @@ var RatingInput = react.forwardRef(
|
|
|
4285
4371
|
{
|
|
4286
4372
|
...rest,
|
|
4287
4373
|
ref: setContainerRef,
|
|
4288
|
-
style: [
|
|
4374
|
+
style: [styles16.root, disabled && styles16.disabled, style],
|
|
4289
4375
|
children: [
|
|
4290
|
-
showValue ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [
|
|
4376
|
+
showValue ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [styles16.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
|
|
4291
4377
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4292
4378
|
reactNative.View,
|
|
4293
4379
|
{
|
|
4294
4380
|
accessibilityRole: readOnly ? "image" : "radiogroup",
|
|
4295
4381
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
4296
4382
|
accessibilityState: { disabled },
|
|
4297
|
-
style: [
|
|
4383
|
+
style: [styles16.stars, { gap: resolvedStarGap }],
|
|
4298
4384
|
children: Array.from({ length: STAR_COUNT }, (_, index) => {
|
|
4299
4385
|
const starValue = index + 1;
|
|
4300
4386
|
const isSelected = starValue <= selectedStarCount;
|
|
4301
4387
|
const icon = isSelected ? /* @__PURE__ */ jsxRuntime.jsx(StarFilledIcon, { size: iconWidth, height: iconHeight }) : /* @__PURE__ */ jsxRuntime.jsx(StarIcon, { size: iconWidth, height: iconHeight });
|
|
4302
|
-
const itemStyle = [
|
|
4388
|
+
const itemStyle = [styles16.starItem, { width: size, height: size }];
|
|
4303
4389
|
if (readOnly) {
|
|
4304
4390
|
return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: itemStyle, children: icon }, starValue);
|
|
4305
4391
|
}
|
|
@@ -4325,7 +4411,7 @@ var RatingInput = react.forwardRef(
|
|
|
4325
4411
|
);
|
|
4326
4412
|
}
|
|
4327
4413
|
);
|
|
4328
|
-
var
|
|
4414
|
+
var styles16 = reactNative.StyleSheet.create({
|
|
4329
4415
|
root: {
|
|
4330
4416
|
flexDirection: "row",
|
|
4331
4417
|
alignItems: "center",
|
|
@@ -4389,19 +4475,19 @@ var CommentCard = react.forwardRef(
|
|
|
4389
4475
|
setExpanded(next);
|
|
4390
4476
|
onExpandedChange?.(next);
|
|
4391
4477
|
};
|
|
4392
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [
|
|
4393
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
4394
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
4478
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [styles17.root, style], children: [
|
|
4479
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles17.header, children: [
|
|
4480
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles17.avatar, children: hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
4395
4481
|
reactNative.Image,
|
|
4396
4482
|
{
|
|
4397
4483
|
source: { uri: imageUrl ?? void 0 },
|
|
4398
|
-
style:
|
|
4484
|
+
style: styles17.avatarImage,
|
|
4399
4485
|
onError: () => setImageFailed(true)
|
|
4400
4486
|
}
|
|
4401
4487
|
) : /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { size: 20, color: colors.primary }) }),
|
|
4402
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
4403
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style:
|
|
4404
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style:
|
|
4488
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles17.identity, children: [
|
|
4489
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles17.name, children: userName }),
|
|
4490
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles17.date, children: date })
|
|
4405
4491
|
] }),
|
|
4406
4492
|
/* @__PURE__ */ jsxRuntime.jsx(RatingInput, { value: rating, readOnly: true, showValue: false, size: 16 })
|
|
4407
4493
|
] }),
|
|
@@ -4409,7 +4495,7 @@ var CommentCard = react.forwardRef(
|
|
|
4409
4495
|
reactNative.Text,
|
|
4410
4496
|
{
|
|
4411
4497
|
numberOfLines: expanded ? void 0 : maxCommentLines,
|
|
4412
|
-
style: [
|
|
4498
|
+
style: [styles17.comment, commentStyle],
|
|
4413
4499
|
children: commentText
|
|
4414
4500
|
}
|
|
4415
4501
|
),
|
|
@@ -4422,14 +4508,14 @@ var CommentCard = react.forwardRef(
|
|
|
4422
4508
|
hitSlop: 6,
|
|
4423
4509
|
onHoverIn: () => setActionHovered(true),
|
|
4424
4510
|
onHoverOut: () => setActionHovered(false),
|
|
4425
|
-
style:
|
|
4511
|
+
style: styles17.action,
|
|
4426
4512
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4427
4513
|
reactNative.Text,
|
|
4428
4514
|
{
|
|
4429
4515
|
style: [
|
|
4430
|
-
|
|
4431
|
-
expanded &&
|
|
4432
|
-
actionHovered && (expanded ?
|
|
4516
|
+
styles17.actionText,
|
|
4517
|
+
expanded && styles17.closeActionText,
|
|
4518
|
+
actionHovered && (expanded ? styles17.closeActionTextHovered : styles17.openActionTextHovered)
|
|
4433
4519
|
],
|
|
4434
4520
|
children: expanded ? readLessLabel : readMoreLabel
|
|
4435
4521
|
}
|
|
@@ -4439,7 +4525,7 @@ var CommentCard = react.forwardRef(
|
|
|
4439
4525
|
] });
|
|
4440
4526
|
}
|
|
4441
4527
|
);
|
|
4442
|
-
var
|
|
4528
|
+
var styles17 = reactNative.StyleSheet.create({
|
|
4443
4529
|
root: {
|
|
4444
4530
|
width: CARD_WIDTH,
|
|
4445
4531
|
minHeight: CARD_MIN_HEIGHT,
|
|
@@ -4505,6 +4591,676 @@ var styles16 = reactNative.StyleSheet.create({
|
|
|
4505
4591
|
}
|
|
4506
4592
|
});
|
|
4507
4593
|
|
|
4594
|
+
// src/components/Range/Range.utils.ts
|
|
4595
|
+
function decimals(value) {
|
|
4596
|
+
const [coefficient, exponentText = "0"] = Math.abs(value).toString().toLowerCase().split("e");
|
|
4597
|
+
const [, fraction = ""] = coefficient.split(".");
|
|
4598
|
+
return Math.max(0, fraction.length - Number(exponentText));
|
|
4599
|
+
}
|
|
4600
|
+
function clampAndSnap(value, min, max, step) {
|
|
4601
|
+
const clamped = Math.min(max, Math.max(min, value));
|
|
4602
|
+
const snapped = min + Math.round((clamped - min) / step) * step;
|
|
4603
|
+
const precision = Math.min(15, Math.max(decimals(min), decimals(step)));
|
|
4604
|
+
return Number(Math.min(max, Math.max(min, snapped)).toFixed(precision));
|
|
4605
|
+
}
|
|
4606
|
+
function clampRangeValue(value, min, max) {
|
|
4607
|
+
return Math.min(max, Math.max(min, value));
|
|
4608
|
+
}
|
|
4609
|
+
function snapRangeDelta(start, delta, step) {
|
|
4610
|
+
const steps = Math.round(Math.abs(delta) / step) * Math.sign(delta);
|
|
4611
|
+
const precision = Math.min(15, Math.max(decimals(start), decimals(step)));
|
|
4612
|
+
return Number((start + steps * step).toFixed(precision));
|
|
4613
|
+
}
|
|
4614
|
+
function parseRangeDraft(draft, parseValue) {
|
|
4615
|
+
if (!draft.trim()) return { kind: "empty" };
|
|
4616
|
+
const parsed = parseValue(draft);
|
|
4617
|
+
if (parsed === void 0 || !Number.isFinite(parsed)) return { kind: "invalid" };
|
|
4618
|
+
return { kind: "value", value: parsed };
|
|
4619
|
+
}
|
|
4620
|
+
function normalizeRangeValue(value, min, max) {
|
|
4621
|
+
const from = typeof value.from === "number" && Number.isFinite(value.from) ? clampRangeValue(value.from, min, max) : void 0;
|
|
4622
|
+
const to = typeof value.to === "number" && Number.isFinite(value.to) ? clampRangeValue(value.to, min, max) : void 0;
|
|
4623
|
+
if (from !== void 0 && to !== void 0 && from > to) {
|
|
4624
|
+
return { from: to, to: from };
|
|
4625
|
+
}
|
|
4626
|
+
return { from, to };
|
|
4627
|
+
}
|
|
4628
|
+
var DEFAULT_WIDTH5 = 347;
|
|
4629
|
+
var TRACK_HEIGHT2 = 4;
|
|
4630
|
+
var TRACK_HORIZONTAL_INSET = 20;
|
|
4631
|
+
var THUMB_SIZE2 = 20;
|
|
4632
|
+
var INPUT_WIDTH = 120;
|
|
4633
|
+
function defaultParseValue(value) {
|
|
4634
|
+
const normalized = value.replace(/[\s,]/g, "");
|
|
4635
|
+
if (!normalized) return void 0;
|
|
4636
|
+
const parsed = Number(normalized);
|
|
4637
|
+
return Number.isFinite(parsed) ? parsed : void 0;
|
|
4638
|
+
}
|
|
4639
|
+
function valuesEqual(a, b) {
|
|
4640
|
+
return a.from === b.from && a.to === b.to;
|
|
4641
|
+
}
|
|
4642
|
+
var Range = react.forwardRef(function Range2({
|
|
4643
|
+
min = 0,
|
|
4644
|
+
max = 100,
|
|
4645
|
+
step = 1,
|
|
4646
|
+
value,
|
|
4647
|
+
defaultValue = {},
|
|
4648
|
+
onValueChange,
|
|
4649
|
+
fromPlaceholder = "\u054D\u056F\u057D\u0561\u056E",
|
|
4650
|
+
toPlaceholder = "\u0544\u056B\u0576\u0579\u0587",
|
|
4651
|
+
currency = "\u058F",
|
|
4652
|
+
fromAccessibilityLabel = fromPlaceholder,
|
|
4653
|
+
toAccessibilityLabel = toPlaceholder,
|
|
4654
|
+
disabled = false,
|
|
4655
|
+
formatValue = String,
|
|
4656
|
+
parseValue = defaultParseValue,
|
|
4657
|
+
style,
|
|
4658
|
+
className,
|
|
4659
|
+
onLayout,
|
|
4660
|
+
...rest
|
|
4661
|
+
}, forwardedRef) {
|
|
4662
|
+
const rootRef = react.useRef(null);
|
|
4663
|
+
const fromThumbRef = react.useRef(null);
|
|
4664
|
+
const toThumbRef = react.useRef(null);
|
|
4665
|
+
const setRootRef = react.useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
|
|
4666
|
+
const lowerBound = Math.min(min, max);
|
|
4667
|
+
const upperBound = Math.max(min, max);
|
|
4668
|
+
const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
|
|
4669
|
+
const isControlled = value !== void 0;
|
|
4670
|
+
const [uncontrolledValue, setUncontrolledValue] = react.useState(
|
|
4671
|
+
() => normalizeRangeValue(defaultValue, lowerBound, upperBound)
|
|
4672
|
+
);
|
|
4673
|
+
const resolvedValue = normalizeRangeValue(
|
|
4674
|
+
isControlled ? value : uncontrolledValue,
|
|
4675
|
+
lowerBound,
|
|
4676
|
+
upperBound
|
|
4677
|
+
);
|
|
4678
|
+
const latestValueRef = react.useRef(resolvedValue);
|
|
4679
|
+
const [trackWidth, setTrackWidth] = react.useState(DEFAULT_WIDTH5);
|
|
4680
|
+
const [fromDraft, setFromDraft] = react.useState(
|
|
4681
|
+
resolvedValue.from === void 0 ? "" : formatValue(resolvedValue.from)
|
|
4682
|
+
);
|
|
4683
|
+
const [toDraft, setToDraft] = react.useState(
|
|
4684
|
+
resolvedValue.to === void 0 ? "" : formatValue(resolvedValue.to)
|
|
4685
|
+
);
|
|
4686
|
+
const [editingField, setEditingField] = react.useState(null);
|
|
4687
|
+
const [focusedThumb, setFocusedThumb] = react.useState(null);
|
|
4688
|
+
const dragStartRef = react.useRef({ from: lowerBound, to: upperBound });
|
|
4689
|
+
const nativeDragTargetRef = react.useRef(null);
|
|
4690
|
+
const pointerDragRef = react.useRef(null);
|
|
4691
|
+
useApplyWebClassName(rootRef, className?.trim() || void 0);
|
|
4692
|
+
react.useEffect(() => {
|
|
4693
|
+
if (editingField !== "from") {
|
|
4694
|
+
setFromDraft(resolvedValue.from === void 0 ? "" : formatValue(resolvedValue.from));
|
|
4695
|
+
}
|
|
4696
|
+
}, [editingField, formatValue, resolvedValue.from]);
|
|
4697
|
+
react.useEffect(() => {
|
|
4698
|
+
if (editingField !== "to") {
|
|
4699
|
+
setToDraft(resolvedValue.to === void 0 ? "" : formatValue(resolvedValue.to));
|
|
4700
|
+
}
|
|
4701
|
+
}, [editingField, formatValue, resolvedValue.to]);
|
|
4702
|
+
react.useEffect(() => {
|
|
4703
|
+
const nextValue = { from: resolvedValue.from, to: resolvedValue.to };
|
|
4704
|
+
const changedOutsideInteraction = !valuesEqual(nextValue, latestValueRef.current);
|
|
4705
|
+
latestValueRef.current = nextValue;
|
|
4706
|
+
if (!changedOutsideInteraction) return;
|
|
4707
|
+
if (editingField === "from") {
|
|
4708
|
+
setFromDraft(nextValue.from === void 0 ? "" : formatValue(nextValue.from));
|
|
4709
|
+
}
|
|
4710
|
+
if (editingField === "to") {
|
|
4711
|
+
setToDraft(nextValue.to === void 0 ? "" : formatValue(nextValue.to));
|
|
4712
|
+
}
|
|
4713
|
+
}, [editingField, formatValue, resolvedValue.from, resolvedValue.to]);
|
|
4714
|
+
react.useEffect(() => {
|
|
4715
|
+
if (isControlled) return;
|
|
4716
|
+
setUncontrolledValue((current) => {
|
|
4717
|
+
const normalized = normalizeRangeValue(current, lowerBound, upperBound);
|
|
4718
|
+
return valuesEqual(current, normalized) ? current : normalized;
|
|
4719
|
+
});
|
|
4720
|
+
}, [isControlled, lowerBound, upperBound]);
|
|
4721
|
+
const emitValue = react.useCallback(
|
|
4722
|
+
(nextValue) => {
|
|
4723
|
+
const normalized = normalizeRangeValue(nextValue, lowerBound, upperBound);
|
|
4724
|
+
if (valuesEqual(normalized, latestValueRef.current)) return;
|
|
4725
|
+
latestValueRef.current = normalized;
|
|
4726
|
+
if (!isControlled) setUncontrolledValue(normalized);
|
|
4727
|
+
onValueChange?.(normalized);
|
|
4728
|
+
},
|
|
4729
|
+
[isControlled, lowerBound, onValueChange, upperBound]
|
|
4730
|
+
);
|
|
4731
|
+
const updateFrom = react.useCallback(
|
|
4732
|
+
(next) => {
|
|
4733
|
+
const current = latestValueRef.current;
|
|
4734
|
+
const maximum = current.to ?? upperBound;
|
|
4735
|
+
const snapped = next === void 0 ? void 0 : clampAndSnap(next, lowerBound, upperBound, safeStep);
|
|
4736
|
+
emitValue({
|
|
4737
|
+
...current,
|
|
4738
|
+
from: snapped === void 0 ? void 0 : clampRangeValue(snapped, lowerBound, maximum)
|
|
4739
|
+
});
|
|
4740
|
+
},
|
|
4741
|
+
[emitValue, lowerBound, safeStep, upperBound]
|
|
4742
|
+
);
|
|
4743
|
+
const updateTo = react.useCallback(
|
|
4744
|
+
(next) => {
|
|
4745
|
+
const current = latestValueRef.current;
|
|
4746
|
+
const minimum = current.from ?? lowerBound;
|
|
4747
|
+
const snapped = next === void 0 ? void 0 : clampAndSnap(next, lowerBound, upperBound, safeStep);
|
|
4748
|
+
emitValue({
|
|
4749
|
+
...current,
|
|
4750
|
+
to: snapped === void 0 ? void 0 : clampRangeValue(snapped, minimum, upperBound)
|
|
4751
|
+
});
|
|
4752
|
+
},
|
|
4753
|
+
[emitValue, lowerBound, safeStep, upperBound]
|
|
4754
|
+
);
|
|
4755
|
+
const updateFromInput = react.useCallback(
|
|
4756
|
+
(next) => {
|
|
4757
|
+
const current = latestValueRef.current;
|
|
4758
|
+
const maximum = current.to ?? upperBound;
|
|
4759
|
+
emitValue({
|
|
4760
|
+
...current,
|
|
4761
|
+
from: next === void 0 ? void 0 : clampRangeValue(next, lowerBound, maximum)
|
|
4762
|
+
});
|
|
4763
|
+
},
|
|
4764
|
+
[emitValue, lowerBound, upperBound]
|
|
4765
|
+
);
|
|
4766
|
+
const updateToInput = react.useCallback(
|
|
4767
|
+
(next) => {
|
|
4768
|
+
const current = latestValueRef.current;
|
|
4769
|
+
const minimum = current.from ?? lowerBound;
|
|
4770
|
+
emitValue({
|
|
4771
|
+
...current,
|
|
4772
|
+
to: next === void 0 ? void 0 : clampRangeValue(next, minimum, upperBound)
|
|
4773
|
+
});
|
|
4774
|
+
},
|
|
4775
|
+
[emitValue, lowerBound, upperBound]
|
|
4776
|
+
);
|
|
4777
|
+
const span = upperBound - lowerBound;
|
|
4778
|
+
const thumbTravel = Math.max(0, trackWidth - TRACK_HORIZONTAL_INSET * 2 - THUMB_SIZE2);
|
|
4779
|
+
const effectiveFrom = resolvedValue.from ?? lowerBound;
|
|
4780
|
+
const effectiveTo = resolvedValue.to ?? upperBound;
|
|
4781
|
+
const valueToOffset = react.useCallback(
|
|
4782
|
+
(next) => span === 0 ? 0 : (next - lowerBound) / span * thumbTravel,
|
|
4783
|
+
[lowerBound, span, thumbTravel]
|
|
4784
|
+
);
|
|
4785
|
+
const deltaToValue = react.useCallback(
|
|
4786
|
+
(delta) => thumbTravel === 0 || span === 0 ? 0 : delta / thumbTravel * span,
|
|
4787
|
+
[span, thumbTravel]
|
|
4788
|
+
);
|
|
4789
|
+
const fromOffset = valueToOffset(effectiveFrom);
|
|
4790
|
+
const toOffset = valueToOffset(effectiveTo);
|
|
4791
|
+
const fromPanResponder = react.useMemo(
|
|
4792
|
+
() => reactNative.PanResponder.create({
|
|
4793
|
+
onStartShouldSetPanResponder: () => !disabled,
|
|
4794
|
+
onMoveShouldSetPanResponder: () => !disabled,
|
|
4795
|
+
onPanResponderGrant: () => {
|
|
4796
|
+
dragStartRef.current = { from: effectiveFrom, to: effectiveTo };
|
|
4797
|
+
nativeDragTargetRef.current = effectiveFrom === effectiveTo ? null : "from";
|
|
4798
|
+
},
|
|
4799
|
+
onPanResponderMove: (_, gesture) => {
|
|
4800
|
+
if (!nativeDragTargetRef.current && gesture.dx !== 0) {
|
|
4801
|
+
nativeDragTargetRef.current = gesture.dx < 0 ? "from" : "to";
|
|
4802
|
+
}
|
|
4803
|
+
const delta = deltaToValue(gesture.dx);
|
|
4804
|
+
if (nativeDragTargetRef.current === "to") {
|
|
4805
|
+
updateToInput(snapRangeDelta(dragStartRef.current.to, delta, safeStep));
|
|
4806
|
+
} else if (nativeDragTargetRef.current === "from") {
|
|
4807
|
+
updateFromInput(snapRangeDelta(dragStartRef.current.from, delta, safeStep));
|
|
4808
|
+
}
|
|
4809
|
+
},
|
|
4810
|
+
onPanResponderRelease: () => {
|
|
4811
|
+
nativeDragTargetRef.current = null;
|
|
4812
|
+
},
|
|
4813
|
+
onPanResponderTerminate: () => {
|
|
4814
|
+
nativeDragTargetRef.current = null;
|
|
4815
|
+
}
|
|
4816
|
+
}),
|
|
4817
|
+
[deltaToValue, disabled, effectiveFrom, effectiveTo, safeStep, updateFromInput, updateToInput]
|
|
4818
|
+
);
|
|
4819
|
+
const toPanResponder = react.useMemo(
|
|
4820
|
+
() => reactNative.PanResponder.create({
|
|
4821
|
+
onStartShouldSetPanResponder: () => !disabled,
|
|
4822
|
+
onMoveShouldSetPanResponder: () => !disabled,
|
|
4823
|
+
onPanResponderGrant: () => {
|
|
4824
|
+
dragStartRef.current = { from: effectiveFrom, to: effectiveTo };
|
|
4825
|
+
nativeDragTargetRef.current = effectiveFrom === effectiveTo ? null : "to";
|
|
4826
|
+
},
|
|
4827
|
+
onPanResponderMove: (_, gesture) => {
|
|
4828
|
+
if (!nativeDragTargetRef.current && gesture.dx !== 0) {
|
|
4829
|
+
nativeDragTargetRef.current = gesture.dx < 0 ? "from" : "to";
|
|
4830
|
+
}
|
|
4831
|
+
const delta = deltaToValue(gesture.dx);
|
|
4832
|
+
if (nativeDragTargetRef.current === "from") {
|
|
4833
|
+
updateFromInput(snapRangeDelta(dragStartRef.current.from, delta, safeStep));
|
|
4834
|
+
} else if (nativeDragTargetRef.current === "to") {
|
|
4835
|
+
updateToInput(snapRangeDelta(dragStartRef.current.to, delta, safeStep));
|
|
4836
|
+
}
|
|
4837
|
+
},
|
|
4838
|
+
onPanResponderRelease: () => {
|
|
4839
|
+
nativeDragTargetRef.current = null;
|
|
4840
|
+
},
|
|
4841
|
+
onPanResponderTerminate: () => {
|
|
4842
|
+
nativeDragTargetRef.current = null;
|
|
4843
|
+
}
|
|
4844
|
+
}),
|
|
4845
|
+
[deltaToValue, disabled, effectiveFrom, effectiveTo, safeStep, updateFromInput, updateToInput]
|
|
4846
|
+
);
|
|
4847
|
+
const beginPointerDrag = (target, currentValue, event) => {
|
|
4848
|
+
if (disabled) return;
|
|
4849
|
+
event.stopPropagation();
|
|
4850
|
+
const pointerId = event.nativeEvent.pointerId;
|
|
4851
|
+
const node = event.currentTarget;
|
|
4852
|
+
node.focus?.();
|
|
4853
|
+
node.setPointerCapture?.(pointerId);
|
|
4854
|
+
pointerDragRef.current = {
|
|
4855
|
+
target,
|
|
4856
|
+
pointerId,
|
|
4857
|
+
startPageX: event.nativeEvent.pageX,
|
|
4858
|
+
startValue: currentValue,
|
|
4859
|
+
coincident: effectiveFrom === effectiveTo
|
|
4860
|
+
};
|
|
4861
|
+
};
|
|
4862
|
+
const movePointerDrag = (event) => {
|
|
4863
|
+
const drag = pointerDragRef.current;
|
|
4864
|
+
if (!drag || drag.pointerId !== event.nativeEvent.pointerId) return;
|
|
4865
|
+
const deltaX = event.nativeEvent.pageX - drag.startPageX;
|
|
4866
|
+
const nextValue = snapRangeDelta(drag.startValue, deltaToValue(deltaX), safeStep);
|
|
4867
|
+
if (drag.coincident && deltaX !== 0) {
|
|
4868
|
+
drag.target = deltaX < 0 ? "from" : "to";
|
|
4869
|
+
drag.coincident = false;
|
|
4870
|
+
}
|
|
4871
|
+
const target = drag.target;
|
|
4872
|
+
if (target === "from") updateFromInput(nextValue);
|
|
4873
|
+
else updateToInput(nextValue);
|
|
4874
|
+
};
|
|
4875
|
+
const endPointerDrag = (event) => {
|
|
4876
|
+
const drag = pointerDragRef.current;
|
|
4877
|
+
if (!drag || drag.pointerId !== event.nativeEvent.pointerId) return;
|
|
4878
|
+
const node = event.currentTarget;
|
|
4879
|
+
if (node.hasPointerCapture?.(drag.pointerId)) node.releasePointerCapture?.(drag.pointerId);
|
|
4880
|
+
pointerDragRef.current = null;
|
|
4881
|
+
};
|
|
4882
|
+
const handleAccessibilityAction = (event, current, update) => {
|
|
4883
|
+
if (disabled) return;
|
|
4884
|
+
if (event.nativeEvent.actionName === "increment") update(current + safeStep);
|
|
4885
|
+
if (event.nativeEvent.actionName === "decrement") update(current - safeStep);
|
|
4886
|
+
};
|
|
4887
|
+
const handleWebKeyDown = (event, current, minimum, maximum, update) => {
|
|
4888
|
+
if (disabled) return;
|
|
4889
|
+
const key = event.nativeEvent?.key ?? event.key;
|
|
4890
|
+
let nextValue;
|
|
4891
|
+
if (key === "ArrowRight" || key === "ArrowUp") nextValue = current + safeStep;
|
|
4892
|
+
if (key === "ArrowLeft" || key === "ArrowDown") nextValue = current - safeStep;
|
|
4893
|
+
if (key === "Home") nextValue = minimum;
|
|
4894
|
+
if (key === "End") nextValue = maximum;
|
|
4895
|
+
if (nextValue === void 0) return;
|
|
4896
|
+
event.preventDefault();
|
|
4897
|
+
event.stopPropagation();
|
|
4898
|
+
update(nextValue);
|
|
4899
|
+
};
|
|
4900
|
+
const commitDraft = (draft, update) => {
|
|
4901
|
+
const result = parseRangeDraft(draft, parseValue);
|
|
4902
|
+
if (result.kind === "empty") update(void 0);
|
|
4903
|
+
if (result.kind === "value") update(result.value);
|
|
4904
|
+
};
|
|
4905
|
+
const changeFromDraft = (draft) => {
|
|
4906
|
+
setFromDraft(draft);
|
|
4907
|
+
const result = parseRangeDraft(draft, parseValue);
|
|
4908
|
+
if (result.kind === "empty") updateFromInput(void 0);
|
|
4909
|
+
if (result.kind === "value") updateFromInput(result.value);
|
|
4910
|
+
};
|
|
4911
|
+
const changeToDraft = (draft) => {
|
|
4912
|
+
setToDraft(draft);
|
|
4913
|
+
const result = parseRangeDraft(draft, parseValue);
|
|
4914
|
+
if (result.kind === "empty") updateToInput(void 0);
|
|
4915
|
+
if (result.kind === "value") updateToInput(result.value);
|
|
4916
|
+
};
|
|
4917
|
+
const focusWebThumb = (target) => {
|
|
4918
|
+
if (reactNative.Platform.OS !== "web") return;
|
|
4919
|
+
const node = target === "from" ? fromThumbRef.current : toThumbRef.current;
|
|
4920
|
+
node?.focus?.();
|
|
4921
|
+
};
|
|
4922
|
+
const updateNearestFromTrack = (locationX) => {
|
|
4923
|
+
if (disabled || thumbTravel === 0 || span === 0) return;
|
|
4924
|
+
const offset = Math.min(
|
|
4925
|
+
thumbTravel,
|
|
4926
|
+
Math.max(0, locationX - TRACK_HORIZONTAL_INSET - THUMB_SIZE2 / 2)
|
|
4927
|
+
);
|
|
4928
|
+
const nextValue = clampAndSnap(
|
|
4929
|
+
lowerBound + offset / thumbTravel * span,
|
|
4930
|
+
lowerBound,
|
|
4931
|
+
upperBound,
|
|
4932
|
+
safeStep
|
|
4933
|
+
);
|
|
4934
|
+
const fromDistance = Math.abs(nextValue - effectiveFrom);
|
|
4935
|
+
const toDistance = Math.abs(nextValue - effectiveTo);
|
|
4936
|
+
if (effectiveFrom === effectiveTo && fromDistance === toDistance) {
|
|
4937
|
+
if (nextValue < effectiveFrom) {
|
|
4938
|
+
focusWebThumb("from");
|
|
4939
|
+
updateFrom(nextValue);
|
|
4940
|
+
}
|
|
4941
|
+
if (nextValue > effectiveTo) {
|
|
4942
|
+
focusWebThumb("to");
|
|
4943
|
+
updateTo(nextValue);
|
|
4944
|
+
}
|
|
4945
|
+
} else if (fromDistance <= toDistance) {
|
|
4946
|
+
focusWebThumb("from");
|
|
4947
|
+
updateFrom(nextValue);
|
|
4948
|
+
} else {
|
|
4949
|
+
focusWebThumb("to");
|
|
4950
|
+
updateTo(nextValue);
|
|
4951
|
+
}
|
|
4952
|
+
};
|
|
4953
|
+
const handleTrackPress = (event) => {
|
|
4954
|
+
updateNearestFromTrack(event.nativeEvent.locationX);
|
|
4955
|
+
};
|
|
4956
|
+
const handleTrackLayout = (event) => {
|
|
4957
|
+
setTrackWidth(event.nativeEvent.layout.width);
|
|
4958
|
+
};
|
|
4959
|
+
const fromValueText = `${formatValue(effectiveFrom)}${currency ? ` ${currency}` : ""}`;
|
|
4960
|
+
const toValueText = `${formatValue(effectiveTo)}${currency ? ` ${currency}` : ""}`;
|
|
4961
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4962
|
+
reactNative.View,
|
|
4963
|
+
{
|
|
4964
|
+
...rest,
|
|
4965
|
+
ref: setRootRef,
|
|
4966
|
+
onLayout,
|
|
4967
|
+
style: [styles18.root, disabled && styles18.disabled, style],
|
|
4968
|
+
children: [
|
|
4969
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
4970
|
+
reactNative.Pressable,
|
|
4971
|
+
{
|
|
4972
|
+
accessible: false,
|
|
4973
|
+
disabled,
|
|
4974
|
+
focusable: false,
|
|
4975
|
+
onLayout: handleTrackLayout,
|
|
4976
|
+
onPointerDown: reactNative.Platform.OS === "web" ? (event) => {
|
|
4977
|
+
event.preventDefault();
|
|
4978
|
+
updateNearestFromTrack(event.nativeEvent.offsetX);
|
|
4979
|
+
} : void 0,
|
|
4980
|
+
onPress: reactNative.Platform.OS === "web" ? void 0 : handleTrackPress,
|
|
4981
|
+
style: styles18.sliderPlane,
|
|
4982
|
+
tabIndex: -1,
|
|
4983
|
+
children: [
|
|
4984
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles18.track }),
|
|
4985
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4986
|
+
reactNative.View,
|
|
4987
|
+
{
|
|
4988
|
+
pointerEvents: "none",
|
|
4989
|
+
style: [
|
|
4990
|
+
styles18.activeTrack,
|
|
4991
|
+
{
|
|
4992
|
+
left: TRACK_HORIZONTAL_INSET + fromOffset,
|
|
4993
|
+
width: toOffset - fromOffset + THUMB_SIZE2
|
|
4994
|
+
}
|
|
4995
|
+
]
|
|
4996
|
+
}
|
|
4997
|
+
),
|
|
4998
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4999
|
+
reactNative.View,
|
|
5000
|
+
{
|
|
5001
|
+
ref: fromThumbRef,
|
|
5002
|
+
...reactNative.Platform.OS === "web" ? {
|
|
5003
|
+
onPointerCancel: endPointerDrag,
|
|
5004
|
+
onPointerDown: (event) => beginPointerDrag("from", effectiveFrom, event),
|
|
5005
|
+
onLostPointerCapture: endPointerDrag,
|
|
5006
|
+
onPointerMove: movePointerDrag,
|
|
5007
|
+
onPointerUp: endPointerDrag,
|
|
5008
|
+
onBlur: () => setFocusedThumb(null),
|
|
5009
|
+
onFocus: () => setFocusedThumb("from"),
|
|
5010
|
+
onKeyDown: (event) => handleWebKeyDown(event, effectiveFrom, lowerBound, effectiveTo, updateFromInput)
|
|
5011
|
+
} : fromPanResponder.panHandlers,
|
|
5012
|
+
"aria-disabled": disabled,
|
|
5013
|
+
"aria-valuemax": effectiveTo,
|
|
5014
|
+
"aria-valuemin": lowerBound,
|
|
5015
|
+
"aria-valuenow": effectiveFrom,
|
|
5016
|
+
"aria-valuetext": fromValueText,
|
|
5017
|
+
accessible: true,
|
|
5018
|
+
accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
|
|
5019
|
+
accessibilityLabel: fromAccessibilityLabel,
|
|
5020
|
+
accessibilityRole: "adjustable",
|
|
5021
|
+
accessibilityState: { disabled },
|
|
5022
|
+
accessibilityValue: {
|
|
5023
|
+
min: lowerBound,
|
|
5024
|
+
max: effectiveTo,
|
|
5025
|
+
now: effectiveFrom,
|
|
5026
|
+
text: fromValueText
|
|
5027
|
+
},
|
|
5028
|
+
focusable: !disabled,
|
|
5029
|
+
onAccessibilityAction: (event) => handleAccessibilityAction(event, effectiveFrom, updateFromInput),
|
|
5030
|
+
pointerEvents: disabled ? "none" : "auto",
|
|
5031
|
+
style: [
|
|
5032
|
+
styles18.thumb,
|
|
5033
|
+
reactNative.Platform.OS === "web" && styles18.thumbWeb,
|
|
5034
|
+
focusedThumb === "from" && reactNative.Platform.OS === "web" && styles18.thumbFocusedWeb,
|
|
5035
|
+
{ left: TRACK_HORIZONTAL_INSET + fromOffset }
|
|
5036
|
+
],
|
|
5037
|
+
tabIndex: disabled ? -1 : 0
|
|
5038
|
+
}
|
|
5039
|
+
),
|
|
5040
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5041
|
+
reactNative.View,
|
|
5042
|
+
{
|
|
5043
|
+
ref: toThumbRef,
|
|
5044
|
+
...reactNative.Platform.OS === "web" ? {
|
|
5045
|
+
onPointerCancel: endPointerDrag,
|
|
5046
|
+
onPointerDown: (event) => beginPointerDrag("to", effectiveTo, event),
|
|
5047
|
+
onLostPointerCapture: endPointerDrag,
|
|
5048
|
+
onPointerMove: movePointerDrag,
|
|
5049
|
+
onPointerUp: endPointerDrag,
|
|
5050
|
+
onBlur: () => setFocusedThumb(null),
|
|
5051
|
+
onFocus: () => setFocusedThumb("to"),
|
|
5052
|
+
onKeyDown: (event) => handleWebKeyDown(event, effectiveTo, effectiveFrom, upperBound, updateToInput)
|
|
5053
|
+
} : toPanResponder.panHandlers,
|
|
5054
|
+
"aria-disabled": disabled,
|
|
5055
|
+
"aria-valuemax": upperBound,
|
|
5056
|
+
"aria-valuemin": effectiveFrom,
|
|
5057
|
+
"aria-valuenow": effectiveTo,
|
|
5058
|
+
"aria-valuetext": toValueText,
|
|
5059
|
+
accessible: true,
|
|
5060
|
+
accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
|
|
5061
|
+
accessibilityLabel: toAccessibilityLabel,
|
|
5062
|
+
accessibilityRole: "adjustable",
|
|
5063
|
+
accessibilityState: { disabled },
|
|
5064
|
+
accessibilityValue: {
|
|
5065
|
+
min: effectiveFrom,
|
|
5066
|
+
max: upperBound,
|
|
5067
|
+
now: effectiveTo,
|
|
5068
|
+
text: toValueText
|
|
5069
|
+
},
|
|
5070
|
+
focusable: !disabled,
|
|
5071
|
+
onAccessibilityAction: (event) => handleAccessibilityAction(event, effectiveTo, updateToInput),
|
|
5072
|
+
pointerEvents: disabled ? "none" : "auto",
|
|
5073
|
+
style: [
|
|
5074
|
+
styles18.thumb,
|
|
5075
|
+
reactNative.Platform.OS === "web" && styles18.thumbWeb,
|
|
5076
|
+
focusedThumb === "to" && reactNative.Platform.OS === "web" && styles18.thumbFocusedWeb,
|
|
5077
|
+
{ left: TRACK_HORIZONTAL_INSET + toOffset }
|
|
5078
|
+
],
|
|
5079
|
+
tabIndex: disabled ? -1 : 0
|
|
5080
|
+
}
|
|
5081
|
+
)
|
|
5082
|
+
]
|
|
5083
|
+
}
|
|
5084
|
+
),
|
|
5085
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles18.inputs, children: [
|
|
5086
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5087
|
+
RangeInput,
|
|
5088
|
+
{
|
|
5089
|
+
accessibilityLabel: fromAccessibilityLabel,
|
|
5090
|
+
currency,
|
|
5091
|
+
disabled,
|
|
5092
|
+
focused: editingField === "from",
|
|
5093
|
+
onChangeText: changeFromDraft,
|
|
5094
|
+
onCommit: () => {
|
|
5095
|
+
setEditingField(null);
|
|
5096
|
+
commitDraft(fromDraft, updateFromInput);
|
|
5097
|
+
},
|
|
5098
|
+
onFocus: () => setEditingField("from"),
|
|
5099
|
+
placeholder: fromPlaceholder,
|
|
5100
|
+
value: fromDraft
|
|
5101
|
+
}
|
|
5102
|
+
),
|
|
5103
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5104
|
+
RangeInput,
|
|
5105
|
+
{
|
|
5106
|
+
accessibilityLabel: toAccessibilityLabel,
|
|
5107
|
+
currency,
|
|
5108
|
+
disabled,
|
|
5109
|
+
focused: editingField === "to",
|
|
5110
|
+
onChangeText: changeToDraft,
|
|
5111
|
+
onCommit: () => {
|
|
5112
|
+
setEditingField(null);
|
|
5113
|
+
commitDraft(toDraft, updateToInput);
|
|
5114
|
+
},
|
|
5115
|
+
onFocus: () => setEditingField("to"),
|
|
5116
|
+
placeholder: toPlaceholder,
|
|
5117
|
+
value: toDraft
|
|
5118
|
+
}
|
|
5119
|
+
)
|
|
5120
|
+
] })
|
|
5121
|
+
]
|
|
5122
|
+
}
|
|
5123
|
+
);
|
|
5124
|
+
});
|
|
5125
|
+
function RangeInput({
|
|
5126
|
+
accessibilityLabel,
|
|
5127
|
+
currency,
|
|
5128
|
+
disabled,
|
|
5129
|
+
focused,
|
|
5130
|
+
onChangeText,
|
|
5131
|
+
onCommit,
|
|
5132
|
+
onFocus,
|
|
5133
|
+
placeholder,
|
|
5134
|
+
value
|
|
5135
|
+
}) {
|
|
5136
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles18.inputField, focused && styles18.inputFieldFocused], children: [
|
|
5137
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5138
|
+
reactNative.TextInput,
|
|
5139
|
+
{
|
|
5140
|
+
"aria-disabled": disabled,
|
|
5141
|
+
accessibilityLabel,
|
|
5142
|
+
accessibilityState: { disabled },
|
|
5143
|
+
editable: !disabled,
|
|
5144
|
+
inputMode: "decimal",
|
|
5145
|
+
onBlur: onCommit,
|
|
5146
|
+
onChangeText,
|
|
5147
|
+
onFocus,
|
|
5148
|
+
onSubmitEditing: onCommit,
|
|
5149
|
+
placeholder,
|
|
5150
|
+
placeholderTextColor: colors.grey150,
|
|
5151
|
+
returnKeyType: "done",
|
|
5152
|
+
style: [styles18.input, reactNative.Platform.OS === "web" && styles18.inputWeb],
|
|
5153
|
+
tabIndex: disabled ? -1 : void 0,
|
|
5154
|
+
value
|
|
5155
|
+
}
|
|
5156
|
+
),
|
|
5157
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles18.currencySlot, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles18.currency, children: currency }) })
|
|
5158
|
+
] });
|
|
5159
|
+
}
|
|
5160
|
+
var styles18 = reactNative.StyleSheet.create({
|
|
5161
|
+
root: {
|
|
5162
|
+
width: DEFAULT_WIDTH5,
|
|
5163
|
+
gap: 15,
|
|
5164
|
+
alignSelf: "flex-start"
|
|
5165
|
+
},
|
|
5166
|
+
disabled: {
|
|
5167
|
+
opacity: 0.6
|
|
5168
|
+
},
|
|
5169
|
+
sliderPlane: {
|
|
5170
|
+
width: "100%",
|
|
5171
|
+
height: THUMB_SIZE2,
|
|
5172
|
+
position: "relative"
|
|
5173
|
+
},
|
|
5174
|
+
track: {
|
|
5175
|
+
position: "absolute",
|
|
5176
|
+
top: 8,
|
|
5177
|
+
left: 0,
|
|
5178
|
+
width: "100%",
|
|
5179
|
+
height: TRACK_HEIGHT2,
|
|
5180
|
+
borderRadius: 16,
|
|
5181
|
+
backgroundColor: colors.grey600
|
|
5182
|
+
},
|
|
5183
|
+
activeTrack: {
|
|
5184
|
+
position: "absolute",
|
|
5185
|
+
top: 8,
|
|
5186
|
+
height: TRACK_HEIGHT2,
|
|
5187
|
+
borderRadius: 16,
|
|
5188
|
+
backgroundColor: colors.primary
|
|
5189
|
+
},
|
|
5190
|
+
thumb: {
|
|
5191
|
+
position: "absolute",
|
|
5192
|
+
top: 0,
|
|
5193
|
+
width: THUMB_SIZE2,
|
|
5194
|
+
height: THUMB_SIZE2,
|
|
5195
|
+
borderRadius: 32,
|
|
5196
|
+
borderWidth: 2,
|
|
5197
|
+
borderColor: colors.primary,
|
|
5198
|
+
backgroundColor: colors.white
|
|
5199
|
+
},
|
|
5200
|
+
thumbWeb: {
|
|
5201
|
+
cursor: "grab",
|
|
5202
|
+
touchAction: "none"
|
|
5203
|
+
},
|
|
5204
|
+
thumbFocusedWeb: {
|
|
5205
|
+
outlineColor: colors.white,
|
|
5206
|
+
outlineOffset: 2,
|
|
5207
|
+
outlineStyle: "solid",
|
|
5208
|
+
outlineWidth: 2
|
|
5209
|
+
},
|
|
5210
|
+
inputs: {
|
|
5211
|
+
width: "100%",
|
|
5212
|
+
height: 44,
|
|
5213
|
+
flexDirection: "row",
|
|
5214
|
+
alignItems: "center",
|
|
5215
|
+
justifyContent: "space-between"
|
|
5216
|
+
},
|
|
5217
|
+
inputField: {
|
|
5218
|
+
width: INPUT_WIDTH,
|
|
5219
|
+
height: 44,
|
|
5220
|
+
paddingVertical: 12,
|
|
5221
|
+
paddingHorizontal: 16,
|
|
5222
|
+
flexDirection: "row",
|
|
5223
|
+
alignItems: "center",
|
|
5224
|
+
gap: 10,
|
|
5225
|
+
borderWidth: 1,
|
|
5226
|
+
borderColor: colors.grey700,
|
|
5227
|
+
borderRadius: 60,
|
|
5228
|
+
backgroundColor: colors.grey700
|
|
5229
|
+
},
|
|
5230
|
+
inputFieldFocused: {
|
|
5231
|
+
borderColor: colors.primary
|
|
5232
|
+
},
|
|
5233
|
+
input: {
|
|
5234
|
+
minWidth: 0,
|
|
5235
|
+
flex: 1,
|
|
5236
|
+
margin: 0,
|
|
5237
|
+
padding: 0,
|
|
5238
|
+
fontFamily: fonts.sans,
|
|
5239
|
+
fontSize: 12,
|
|
5240
|
+
fontWeight: "400",
|
|
5241
|
+
lineHeight: 16,
|
|
5242
|
+
letterSpacing: 0.36,
|
|
5243
|
+
color: colors.white
|
|
5244
|
+
},
|
|
5245
|
+
inputWeb: {
|
|
5246
|
+
outlineStyle: "none"
|
|
5247
|
+
},
|
|
5248
|
+
currencySlot: {
|
|
5249
|
+
width: 20,
|
|
5250
|
+
height: 20,
|
|
5251
|
+
alignItems: "center",
|
|
5252
|
+
justifyContent: "center",
|
|
5253
|
+
flexShrink: 0
|
|
5254
|
+
},
|
|
5255
|
+
currency: {
|
|
5256
|
+
fontFamily: fonts.sans,
|
|
5257
|
+
fontSize: 16,
|
|
5258
|
+
fontWeight: "600",
|
|
5259
|
+
lineHeight: 22,
|
|
5260
|
+
color: colors.white
|
|
5261
|
+
}
|
|
5262
|
+
});
|
|
5263
|
+
|
|
4508
5264
|
exports.AreaExpandIcon = AreaExpandIcon;
|
|
4509
5265
|
exports.ArrowRightIcon = ArrowRightIcon;
|
|
4510
5266
|
exports.Avatar = Avatar;
|
|
@@ -4536,6 +5292,7 @@ exports.CopyIcon = CopyIcon;
|
|
|
4536
5292
|
exports.Counter = Counter;
|
|
4537
5293
|
exports.DatePicker = DatePicker;
|
|
4538
5294
|
exports.FacebookIcon = FacebookIcon;
|
|
5295
|
+
exports.FavoritesButton = FavoritesButton;
|
|
4539
5296
|
exports.FiltersIcon = FiltersIcon;
|
|
4540
5297
|
exports.GlobeIcon = GlobeIcon;
|
|
4541
5298
|
exports.GuestsIcon = GuestsIcon;
|
|
@@ -4561,6 +5318,7 @@ exports.NavigateIcon = NavigateIcon;
|
|
|
4561
5318
|
exports.PhoneIcon = PhoneIcon;
|
|
4562
5319
|
exports.PlusIcon = PlusIcon;
|
|
4563
5320
|
exports.QrCodeIcon = QrCodeIcon;
|
|
5321
|
+
exports.Range = Range;
|
|
4564
5322
|
exports.RatingInput = RatingInput;
|
|
4565
5323
|
exports.RatingStarIcon = RatingStarIcon;
|
|
4566
5324
|
exports.SaveHeartIcon = SaveHeartIcon;
|