@ecohouse/ui 0.1.17 → 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 +941 -174
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +53 -2
- package/dist/index.d.ts +53 -2
- package/dist/index.js +941 -176
- 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/StatCard/StatCard.tsx +14 -3
- 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,8 +2335,17 @@ var styles6 = reactNative.StyleSheet.create({
|
|
|
2249
2335
|
color: colors.primary
|
|
2250
2336
|
}
|
|
2251
2337
|
});
|
|
2252
|
-
var
|
|
2253
|
-
var StatCard = react.forwardRef(function StatCard2({
|
|
2338
|
+
var ICON_SIZE6 = 28;
|
|
2339
|
+
var StatCard = react.forwardRef(function StatCard2({
|
|
2340
|
+
label,
|
|
2341
|
+
icon: Icon2,
|
|
2342
|
+
iconProps,
|
|
2343
|
+
iconSize = ICON_SIZE6,
|
|
2344
|
+
style,
|
|
2345
|
+
className,
|
|
2346
|
+
accessibilityLabel,
|
|
2347
|
+
...rest
|
|
2348
|
+
}, forwardedRef) {
|
|
2254
2349
|
const containerRef = react.useRef(null);
|
|
2255
2350
|
const resolvedClassName = className?.trim() || void 0;
|
|
2256
2351
|
const setContainerRef = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
|
|
@@ -2260,17 +2355,17 @@ var StatCard = react.forwardRef(function StatCard2({ label, icon: Icon2, style,
|
|
|
2260
2355
|
{
|
|
2261
2356
|
...rest,
|
|
2262
2357
|
ref: setContainerRef,
|
|
2263
|
-
style: [
|
|
2358
|
+
style: [styles8.base, style],
|
|
2264
2359
|
accessibilityRole: "text",
|
|
2265
2360
|
accessibilityLabel: accessibilityLabel ?? label,
|
|
2266
2361
|
children: [
|
|
2267
|
-
/* @__PURE__ */ jsxRuntime.jsx(Icon2, { size:
|
|
2268
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
2362
|
+
/* @__PURE__ */ jsxRuntime.jsx(Icon2, { ...iconProps, size: iconSize, color: iconProps?.color ?? colors.white }),
|
|
2363
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles8.label, children: label })
|
|
2269
2364
|
]
|
|
2270
2365
|
}
|
|
2271
2366
|
);
|
|
2272
2367
|
});
|
|
2273
|
-
var
|
|
2368
|
+
var styles8 = reactNative.StyleSheet.create({
|
|
2274
2369
|
base: {
|
|
2275
2370
|
width: 204.5,
|
|
2276
2371
|
minHeight: 114,
|
|
@@ -2356,7 +2451,7 @@ var Button = react.forwardRef(
|
|
|
2356
2451
|
useApplyWebClassName(textRef, textClassName);
|
|
2357
2452
|
const iconNode = customIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
|
|
2358
2453
|
const containerStyle = [
|
|
2359
|
-
|
|
2454
|
+
styles9.base,
|
|
2360
2455
|
{
|
|
2361
2456
|
minHeight: metrics.minHeight,
|
|
2362
2457
|
borderRadius: metrics.borderRadius,
|
|
@@ -2367,16 +2462,16 @@ var Button = react.forwardRef(
|
|
|
2367
2462
|
paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
|
|
2368
2463
|
gap: hasIcon ? metrics.gap : 0
|
|
2369
2464
|
},
|
|
2370
|
-
hasIcon ?
|
|
2371
|
-
disabled &&
|
|
2465
|
+
hasIcon ? styles9.contentWithIcon : styles9.contentWithoutIcon,
|
|
2466
|
+
disabled && styles9.disabled,
|
|
2372
2467
|
style
|
|
2373
2468
|
];
|
|
2374
2469
|
const labelStyle = [
|
|
2375
|
-
|
|
2470
|
+
styles9.label,
|
|
2376
2471
|
metrics.text,
|
|
2377
2472
|
{ color: preset.textColor },
|
|
2378
|
-
reactNative.Platform.OS === "android" ?
|
|
2379
|
-
!hasIcon &&
|
|
2473
|
+
reactNative.Platform.OS === "android" ? styles9.labelAndroid : null,
|
|
2474
|
+
!hasIcon && styles9.labelCentered,
|
|
2380
2475
|
textStyle
|
|
2381
2476
|
];
|
|
2382
2477
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -2397,7 +2492,7 @@ var Button = react.forwardRef(
|
|
|
2397
2492
|
reactNative.View,
|
|
2398
2493
|
{
|
|
2399
2494
|
style: [
|
|
2400
|
-
|
|
2495
|
+
styles9.iconContainer,
|
|
2401
2496
|
{
|
|
2402
2497
|
width: metrics.iconContainerSize,
|
|
2403
2498
|
height: metrics.iconContainerSize,
|
|
@@ -2413,7 +2508,7 @@ var Button = react.forwardRef(
|
|
|
2413
2508
|
);
|
|
2414
2509
|
}
|
|
2415
2510
|
);
|
|
2416
|
-
var
|
|
2511
|
+
var styles9 = reactNative.StyleSheet.create({
|
|
2417
2512
|
base: {
|
|
2418
2513
|
flexDirection: "row",
|
|
2419
2514
|
alignItems: "center",
|
|
@@ -2497,13 +2592,13 @@ var Checkbox = react.forwardRef(function Checkbox2({
|
|
|
2497
2592
|
accessibilityRole: "checkbox",
|
|
2498
2593
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
2499
2594
|
accessibilityState: { checked: isActive, disabled },
|
|
2500
|
-
style: [
|
|
2595
|
+
style: [styles10.root, disabled && styles10.disabled, style],
|
|
2501
2596
|
children: [
|
|
2502
2597
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2503
2598
|
reactNative.View,
|
|
2504
2599
|
{
|
|
2505
2600
|
style: [
|
|
2506
|
-
|
|
2601
|
+
styles10.box,
|
|
2507
2602
|
{
|
|
2508
2603
|
backgroundColor: chrome.backgroundColor,
|
|
2509
2604
|
borderColor: chrome.borderColor
|
|
@@ -2512,12 +2607,12 @@ var Checkbox = react.forwardRef(function Checkbox2({
|
|
|
2512
2607
|
children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: CHECK_SIZE, color: colors.primary, strokeWidth: CHECK_STROKE }) : null
|
|
2513
2608
|
}
|
|
2514
2609
|
),
|
|
2515
|
-
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
|
|
2516
2611
|
]
|
|
2517
2612
|
}
|
|
2518
2613
|
);
|
|
2519
2614
|
});
|
|
2520
|
-
var
|
|
2615
|
+
var styles10 = reactNative.StyleSheet.create({
|
|
2521
2616
|
root: {
|
|
2522
2617
|
flexDirection: "row",
|
|
2523
2618
|
alignItems: "center",
|
|
@@ -2615,7 +2710,7 @@ var DEFAULT_WIDTH = 380;
|
|
|
2615
2710
|
var TRIGGER_HEIGHT = 44;
|
|
2616
2711
|
var TRIGGER_RADIUS = 60;
|
|
2617
2712
|
var MENU_RADIUS2 = 20;
|
|
2618
|
-
var
|
|
2713
|
+
var ICON_SIZE7 = 20;
|
|
2619
2714
|
var NAV_ICON_SIZE = 20;
|
|
2620
2715
|
var DAY_CELL_HEIGHT = 44;
|
|
2621
2716
|
var DAY_CIRCLE_SIZE = 44;
|
|
@@ -2768,9 +2863,9 @@ var DatePicker = react.forwardRef(
|
|
|
2768
2863
|
{
|
|
2769
2864
|
...rest,
|
|
2770
2865
|
ref: setRootRef,
|
|
2771
|
-
style: [
|
|
2866
|
+
style: [styles11.root, isOpen && styles11.rootOpen, disabled && styles11.disabled, style],
|
|
2772
2867
|
accessibilityState: { disabled, expanded: isOpen },
|
|
2773
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [
|
|
2868
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles11.triggerWrap, isOpen && styles11.triggerWrapOpen], children: [
|
|
2774
2869
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2775
2870
|
reactNative.Pressable,
|
|
2776
2871
|
{
|
|
@@ -2781,17 +2876,17 @@ var DatePicker = react.forwardRef(
|
|
|
2781
2876
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
2782
2877
|
accessibilityState: { disabled, expanded: isOpen },
|
|
2783
2878
|
style: [
|
|
2784
|
-
|
|
2879
|
+
styles11.trigger,
|
|
2785
2880
|
{ borderColor: triggerBorderColor, backgroundColor: colors.grey700 }
|
|
2786
2881
|
],
|
|
2787
2882
|
children: [
|
|
2788
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2789
|
-
/* @__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 }) })
|
|
2790
2885
|
]
|
|
2791
2886
|
}
|
|
2792
2887
|
),
|
|
2793
|
-
isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [
|
|
2794
|
-
/* @__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: [
|
|
2795
2890
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2796
2891
|
reactNative.Pressable,
|
|
2797
2892
|
{
|
|
@@ -2799,11 +2894,11 @@ var DatePicker = react.forwardRef(
|
|
|
2799
2894
|
hitSlop: 8,
|
|
2800
2895
|
accessibilityRole: "button",
|
|
2801
2896
|
accessibilityLabel: "Previous month",
|
|
2802
|
-
style:
|
|
2897
|
+
style: styles11.navButton,
|
|
2803
2898
|
children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white })
|
|
2804
2899
|
}
|
|
2805
2900
|
),
|
|
2806
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style:
|
|
2901
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: styles11.monthHeading, children: [
|
|
2807
2902
|
monthNames[visibleMonth.getMonth()],
|
|
2808
2903
|
" ",
|
|
2809
2904
|
visibleMonth.getFullYear()
|
|
@@ -2815,13 +2910,13 @@ var DatePicker = react.forwardRef(
|
|
|
2815
2910
|
hitSlop: 8,
|
|
2816
2911
|
accessibilityRole: "button",
|
|
2817
2912
|
accessibilityLabel: "Next month",
|
|
2818
|
-
style:
|
|
2819
|
-
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 }) })
|
|
2820
2915
|
}
|
|
2821
2916
|
)
|
|
2822
2917
|
] }),
|
|
2823
2918
|
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
|
|
2824
|
-
/* @__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}`)) }),
|
|
2825
2920
|
weeks.map((week, weekIndex) => {
|
|
2826
2921
|
let rangeHighlightStyle = null;
|
|
2827
2922
|
if (isRange && rangeValue.start && rangeValue.end) {
|
|
@@ -2858,13 +2953,13 @@ var DatePicker = react.forwardRef(
|
|
|
2858
2953
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2859
2954
|
reactNative.View,
|
|
2860
2955
|
{
|
|
2861
|
-
style: [
|
|
2956
|
+
style: [styles11.weekRow, weekIndex > 0 && styles11.weekRowSpaced],
|
|
2862
2957
|
children: [
|
|
2863
2958
|
rangeHighlightStyle ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
2864
2959
|
reactNative.View,
|
|
2865
2960
|
{
|
|
2866
2961
|
pointerEvents: "none",
|
|
2867
|
-
style: [
|
|
2962
|
+
style: [styles11.rangeHighlight, rangeHighlightStyle]
|
|
2868
2963
|
}
|
|
2869
2964
|
) : null,
|
|
2870
2965
|
week.map((day, dayIndex) => {
|
|
@@ -2887,7 +2982,7 @@ var DatePicker = react.forwardRef(
|
|
|
2887
2982
|
onHoverOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
|
|
2888
2983
|
onPressIn: () => setHoveredDayKey(dayKey),
|
|
2889
2984
|
onPressOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
|
|
2890
|
-
style:
|
|
2985
|
+
style: styles11.dayCellWrap,
|
|
2891
2986
|
accessibilityRole: "button",
|
|
2892
2987
|
accessibilityLabel: formatValue(day),
|
|
2893
2988
|
accessibilityState: {
|
|
@@ -2899,14 +2994,14 @@ var DatePicker = react.forwardRef(
|
|
|
2899
2994
|
reactNative.View,
|
|
2900
2995
|
{
|
|
2901
2996
|
style: [
|
|
2902
|
-
|
|
2903
|
-
isSelectedEndpoint &&
|
|
2904
|
-
isHovered &&
|
|
2997
|
+
styles11.dayCircle,
|
|
2998
|
+
isSelectedEndpoint && styles11.dayCircleSelected,
|
|
2999
|
+
isHovered && styles11.dayCircleHovered
|
|
2905
3000
|
],
|
|
2906
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3001
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles11.dayText, { color: dayTextColor }], children: day.getDate() })
|
|
2907
3002
|
}
|
|
2908
3003
|
),
|
|
2909
|
-
isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
3004
|
+
isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.todayDot }) : null
|
|
2910
3005
|
]
|
|
2911
3006
|
},
|
|
2912
3007
|
dayIndex
|
|
@@ -2924,7 +3019,7 @@ var DatePicker = react.forwardRef(
|
|
|
2924
3019
|
);
|
|
2925
3020
|
}
|
|
2926
3021
|
);
|
|
2927
|
-
var
|
|
3022
|
+
var styles11 = reactNative.StyleSheet.create({
|
|
2928
3023
|
root: {
|
|
2929
3024
|
width: DEFAULT_WIDTH,
|
|
2930
3025
|
gap: 8,
|
|
@@ -2960,8 +3055,8 @@ var styles10 = reactNative.StyleSheet.create({
|
|
|
2960
3055
|
minWidth: 0
|
|
2961
3056
|
},
|
|
2962
3057
|
iconSlot: {
|
|
2963
|
-
width:
|
|
2964
|
-
height:
|
|
3058
|
+
width: ICON_SIZE7,
|
|
3059
|
+
height: ICON_SIZE7,
|
|
2965
3060
|
alignItems: "center",
|
|
2966
3061
|
justifyContent: "center",
|
|
2967
3062
|
flexShrink: 0
|
|
@@ -3203,13 +3298,13 @@ var Input = react.forwardRef(function Input2({
|
|
|
3203
3298
|
});
|
|
3204
3299
|
useApplyWebClassName(rootRef, className);
|
|
3205
3300
|
useApplyWebClassName(inputRef, inputClassName);
|
|
3206
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [
|
|
3207
|
-
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,
|
|
3208
3303
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3209
3304
|
reactNative.View,
|
|
3210
3305
|
{
|
|
3211
3306
|
style: [
|
|
3212
|
-
|
|
3307
|
+
styles12.field,
|
|
3213
3308
|
{
|
|
3214
3309
|
height: metrics.height,
|
|
3215
3310
|
borderRadius: metrics.borderRadius,
|
|
@@ -3224,7 +3319,7 @@ var Input = react.forwardRef(function Input2({
|
|
|
3224
3319
|
fieldStyle
|
|
3225
3320
|
],
|
|
3226
3321
|
children: [
|
|
3227
|
-
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,
|
|
3228
3323
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3229
3324
|
reactNative.TextInput,
|
|
3230
3325
|
{
|
|
@@ -3248,11 +3343,11 @@ var Input = react.forwardRef(function Input2({
|
|
|
3248
3343
|
onBlur?.(event);
|
|
3249
3344
|
},
|
|
3250
3345
|
style: [
|
|
3251
|
-
|
|
3346
|
+
styles12.input,
|
|
3252
3347
|
metrics.text,
|
|
3253
3348
|
{ color: chrome.textColor },
|
|
3254
|
-
reactNative.Platform.OS === "web" ?
|
|
3255
|
-
reactNative.Platform.OS === "android" ?
|
|
3349
|
+
reactNative.Platform.OS === "web" ? styles12.inputWeb : null,
|
|
3350
|
+
reactNative.Platform.OS === "android" ? styles12.inputAndroid : null,
|
|
3256
3351
|
inputStyle
|
|
3257
3352
|
],
|
|
3258
3353
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
@@ -3264,20 +3359,20 @@ var Input = react.forwardRef(function Input2({
|
|
|
3264
3359
|
{
|
|
3265
3360
|
onPress: onRightIconPress,
|
|
3266
3361
|
disabled,
|
|
3267
|
-
style: [
|
|
3362
|
+
style: [styles12.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
|
|
3268
3363
|
accessibilityRole: "button",
|
|
3269
3364
|
accessibilityLabel: rightIconAccessibilityLabel,
|
|
3270
3365
|
hitSlop: 8,
|
|
3271
3366
|
children: rightIconNode
|
|
3272
3367
|
}
|
|
3273
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
3368
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles12.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
|
|
3274
3369
|
]
|
|
3275
3370
|
}
|
|
3276
3371
|
),
|
|
3277
|
-
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
|
|
3278
3373
|
] });
|
|
3279
3374
|
});
|
|
3280
|
-
var
|
|
3375
|
+
var styles12 = reactNative.StyleSheet.create({
|
|
3281
3376
|
root: {
|
|
3282
3377
|
width: DEFAULT_WIDTH2,
|
|
3283
3378
|
gap: 8,
|
|
@@ -3320,7 +3415,7 @@ var TRIGGER_RADIUS2 = 60;
|
|
|
3320
3415
|
var MENU_RADIUS3 = 24;
|
|
3321
3416
|
var MENU_MAX_LIST_HEIGHT = 248;
|
|
3322
3417
|
var ITEM_RADIUS2 = 12;
|
|
3323
|
-
var
|
|
3418
|
+
var ICON_SIZE8 = 20;
|
|
3324
3419
|
var CHIP_GAP = 6;
|
|
3325
3420
|
var FALLBACK_ELLIPSIS_WIDTH = 20;
|
|
3326
3421
|
function itemBackground(state) {
|
|
@@ -3393,25 +3488,25 @@ function MultiValueChips({ options, disabled, onRemove }) {
|
|
|
3393
3488
|
const next = Math.ceil(event.nativeEvent.layout.width);
|
|
3394
3489
|
setEllipsisWidth((current) => current === next ? current : next);
|
|
3395
3490
|
};
|
|
3396
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
3397
|
-
/* @__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: [
|
|
3398
3493
|
options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3399
3494
|
reactNative.View,
|
|
3400
3495
|
{
|
|
3401
|
-
style:
|
|
3496
|
+
style: styles13.chip,
|
|
3402
3497
|
onLayout: (event) => handleChipLayout(option.value, event),
|
|
3403
3498
|
children: [
|
|
3404
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
3405
|
-
/* @__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" })
|
|
3406
3501
|
]
|
|
3407
3502
|
},
|
|
3408
3503
|
`measure-${option.value}`
|
|
3409
3504
|
)),
|
|
3410
|
-
/* @__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: "..." }) })
|
|
3411
3506
|
] }),
|
|
3412
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
3413
|
-
visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
3414
|
-
/* @__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 }),
|
|
3415
3510
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3416
3511
|
reactNative.Pressable,
|
|
3417
3512
|
{
|
|
@@ -3423,11 +3518,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
|
|
|
3423
3518
|
hitSlop: 6,
|
|
3424
3519
|
accessibilityRole: "button",
|
|
3425
3520
|
accessibilityLabel: `Remove ${option.label}`,
|
|
3426
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
3521
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles13.chipRemove, children: "\xD7" })
|
|
3427
3522
|
}
|
|
3428
3523
|
)
|
|
3429
3524
|
] }, option.value)),
|
|
3430
|
-
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
|
|
3431
3526
|
] })
|
|
3432
3527
|
] });
|
|
3433
3528
|
}
|
|
@@ -3636,7 +3731,7 @@ var Select = react.forwardRef(
|
|
|
3636
3731
|
setOpen
|
|
3637
3732
|
]);
|
|
3638
3733
|
const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
|
|
3639
|
-
size:
|
|
3734
|
+
size: ICON_SIZE8,
|
|
3640
3735
|
color: error ? colors.red : isOpen ? colors.primary : colors.grey100
|
|
3641
3736
|
});
|
|
3642
3737
|
const hasLeftIcon = showLeftIcon || leftIcon != null;
|
|
@@ -3651,11 +3746,11 @@ var Select = react.forwardRef(
|
|
|
3651
3746
|
{
|
|
3652
3747
|
...rest,
|
|
3653
3748
|
ref: setRootRef,
|
|
3654
|
-
style: [
|
|
3749
|
+
style: [styles13.root, isOpen && styles13.rootOpen, disabled && styles13.disabled, style],
|
|
3655
3750
|
accessibilityState: { disabled, expanded: isOpen },
|
|
3656
3751
|
children: [
|
|
3657
|
-
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3658
|
-
/* @__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: [
|
|
3659
3754
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3660
3755
|
reactNative.Pressable,
|
|
3661
3756
|
{
|
|
@@ -3666,29 +3761,29 @@ var Select = react.forwardRef(
|
|
|
3666
3761
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
3667
3762
|
accessibilityState: { disabled, expanded: isOpen },
|
|
3668
3763
|
style: [
|
|
3669
|
-
|
|
3764
|
+
styles13.trigger,
|
|
3670
3765
|
{
|
|
3671
3766
|
borderColor: triggerBorderColor,
|
|
3672
3767
|
backgroundColor: colors.grey700
|
|
3673
3768
|
}
|
|
3674
3769
|
],
|
|
3675
3770
|
children: [
|
|
3676
|
-
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
3677
|
-
/* @__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(
|
|
3678
3773
|
MultiValueChips,
|
|
3679
3774
|
{
|
|
3680
3775
|
options: selectedOptions,
|
|
3681
3776
|
disabled,
|
|
3682
3777
|
onRemove: handleRemoveChip
|
|
3683
3778
|
}
|
|
3684
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3685
|
-
/* @__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 }) })
|
|
3686
3781
|
]
|
|
3687
3782
|
}
|
|
3688
3783
|
),
|
|
3689
|
-
isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
3690
|
-
showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
3691
|
-
/* @__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 }) }),
|
|
3692
3787
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3693
3788
|
reactNative.TextInput,
|
|
3694
3789
|
{
|
|
@@ -3699,9 +3794,9 @@ var Select = react.forwardRef(
|
|
|
3699
3794
|
placeholder: searchPlaceholder,
|
|
3700
3795
|
placeholderTextColor: colors.grey100,
|
|
3701
3796
|
style: [
|
|
3702
|
-
|
|
3703
|
-
reactNative.Platform.OS === "web" ?
|
|
3704
|
-
reactNative.Platform.OS === "android" ?
|
|
3797
|
+
styles13.searchInput,
|
|
3798
|
+
reactNative.Platform.OS === "web" ? styles13.searchInputWeb : null,
|
|
3799
|
+
reactNative.Platform.OS === "android" ? styles13.searchInputAndroid : null
|
|
3705
3800
|
],
|
|
3706
3801
|
accessibilityLabel: searchPlaceholder
|
|
3707
3802
|
}
|
|
@@ -3710,12 +3805,12 @@ var Select = react.forwardRef(
|
|
|
3710
3805
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3711
3806
|
reactNative.ScrollView,
|
|
3712
3807
|
{
|
|
3713
|
-
style:
|
|
3714
|
-
contentContainerStyle:
|
|
3808
|
+
style: styles13.optionList,
|
|
3809
|
+
contentContainerStyle: styles13.optionListContent,
|
|
3715
3810
|
keyboardShouldPersistTaps: "handled",
|
|
3716
3811
|
showsVerticalScrollIndicator: false,
|
|
3717
3812
|
children: [
|
|
3718
|
-
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,
|
|
3719
3814
|
!loading && filteredOptions.map((option) => {
|
|
3720
3815
|
const isSelected = selectedValues.includes(option.value);
|
|
3721
3816
|
const isHovered = hoveredValue === option.value;
|
|
@@ -3732,14 +3827,14 @@ var Select = react.forwardRef(
|
|
|
3732
3827
|
accessibilityRole: multiple ? "checkbox" : "button",
|
|
3733
3828
|
accessibilityState: { selected: isSelected, checked: isSelected, disabled },
|
|
3734
3829
|
style: [
|
|
3735
|
-
|
|
3830
|
+
styles13.item,
|
|
3736
3831
|
{
|
|
3737
3832
|
backgroundColor: itemBackground(visualState)
|
|
3738
3833
|
}
|
|
3739
3834
|
],
|
|
3740
3835
|
children: [
|
|
3741
|
-
multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style:
|
|
3742
|
-
/* @__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 })
|
|
3743
3838
|
]
|
|
3744
3839
|
},
|
|
3745
3840
|
option.value
|
|
@@ -3750,13 +3845,13 @@ var Select = react.forwardRef(
|
|
|
3750
3845
|
)
|
|
3751
3846
|
] }) : null
|
|
3752
3847
|
] }),
|
|
3753
|
-
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3848
|
+
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles13.hint, { color: hintColor }], children: hint }) : null
|
|
3754
3849
|
]
|
|
3755
3850
|
}
|
|
3756
3851
|
);
|
|
3757
3852
|
}
|
|
3758
3853
|
);
|
|
3759
|
-
var
|
|
3854
|
+
var styles13 = reactNative.StyleSheet.create({
|
|
3760
3855
|
root: {
|
|
3761
3856
|
width: DEFAULT_WIDTH3,
|
|
3762
3857
|
gap: 8,
|
|
@@ -3846,8 +3941,8 @@ var styles12 = reactNative.StyleSheet.create({
|
|
|
3846
3941
|
lineHeight: 16
|
|
3847
3942
|
},
|
|
3848
3943
|
iconSlot: {
|
|
3849
|
-
width:
|
|
3850
|
-
height:
|
|
3944
|
+
width: ICON_SIZE8,
|
|
3945
|
+
height: ICON_SIZE8,
|
|
3851
3946
|
alignItems: "center",
|
|
3852
3947
|
justifyContent: "center",
|
|
3853
3948
|
flexShrink: 0
|
|
@@ -4018,13 +4113,13 @@ var Textarea = react.forwardRef(function Textarea2({
|
|
|
4018
4113
|
const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
|
|
4019
4114
|
useApplyWebClassName(rootRef, className);
|
|
4020
4115
|
useApplyWebClassName(inputRef, inputClassName);
|
|
4021
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [
|
|
4022
|
-
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,
|
|
4023
4118
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4024
4119
|
reactNative.View,
|
|
4025
4120
|
{
|
|
4026
4121
|
style: [
|
|
4027
|
-
|
|
4122
|
+
styles14.field,
|
|
4028
4123
|
{
|
|
4029
4124
|
borderColor: chrome.borderColor,
|
|
4030
4125
|
backgroundColor: chrome.backgroundColor
|
|
@@ -4056,11 +4151,11 @@ var Textarea = react.forwardRef(function Textarea2({
|
|
|
4056
4151
|
onBlur?.(event);
|
|
4057
4152
|
},
|
|
4058
4153
|
style: [
|
|
4059
|
-
|
|
4154
|
+
styles14.input,
|
|
4060
4155
|
textareaTypography.field,
|
|
4061
4156
|
{ color: chrome.textColor },
|
|
4062
|
-
reactNative.Platform.OS === "web" ?
|
|
4063
|
-
reactNative.Platform.OS === "android" ?
|
|
4157
|
+
reactNative.Platform.OS === "web" ? styles14.inputWeb : null,
|
|
4158
|
+
reactNative.Platform.OS === "android" ? styles14.inputAndroid : null,
|
|
4064
4159
|
inputStyle
|
|
4065
4160
|
],
|
|
4066
4161
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
@@ -4069,10 +4164,10 @@ var Textarea = react.forwardRef(function Textarea2({
|
|
|
4069
4164
|
)
|
|
4070
4165
|
}
|
|
4071
4166
|
),
|
|
4072
|
-
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
|
|
4073
4168
|
] });
|
|
4074
4169
|
});
|
|
4075
|
-
var
|
|
4170
|
+
var styles14 = reactNative.StyleSheet.create({
|
|
4076
4171
|
root: {
|
|
4077
4172
|
width: DEFAULT_WIDTH4,
|
|
4078
4173
|
gap: 8,
|
|
@@ -4172,13 +4267,13 @@ var Toggle = react.forwardRef(function Toggle2({
|
|
|
4172
4267
|
accessibilityRole: "switch",
|
|
4173
4268
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
4174
4269
|
accessibilityState: { checked: isActive, disabled },
|
|
4175
|
-
style: [
|
|
4270
|
+
style: [styles15.pressable, disabled && styles15.disabled, style],
|
|
4176
4271
|
children: [
|
|
4177
4272
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4178
4273
|
reactNative.Animated.View,
|
|
4179
4274
|
{
|
|
4180
4275
|
style: [
|
|
4181
|
-
|
|
4276
|
+
styles15.track,
|
|
4182
4277
|
{
|
|
4183
4278
|
backgroundColor: trackBackgroundColor
|
|
4184
4279
|
}
|
|
@@ -4187,7 +4282,7 @@ var Toggle = react.forwardRef(function Toggle2({
|
|
|
4187
4282
|
reactNative.Animated.View,
|
|
4188
4283
|
{
|
|
4189
4284
|
style: [
|
|
4190
|
-
|
|
4285
|
+
styles15.thumb,
|
|
4191
4286
|
{
|
|
4192
4287
|
transform: [{ translateX: thumbTranslateX }]
|
|
4193
4288
|
}
|
|
@@ -4196,12 +4291,12 @@ var Toggle = react.forwardRef(function Toggle2({
|
|
|
4196
4291
|
)
|
|
4197
4292
|
}
|
|
4198
4293
|
),
|
|
4199
|
-
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
|
|
4200
4295
|
]
|
|
4201
4296
|
}
|
|
4202
4297
|
);
|
|
4203
4298
|
});
|
|
4204
|
-
var
|
|
4299
|
+
var styles15 = reactNative.StyleSheet.create({
|
|
4205
4300
|
pressable: {
|
|
4206
4301
|
flexDirection: "row",
|
|
4207
4302
|
alignItems: "center",
|
|
@@ -4276,21 +4371,21 @@ var RatingInput = react.forwardRef(
|
|
|
4276
4371
|
{
|
|
4277
4372
|
...rest,
|
|
4278
4373
|
ref: setContainerRef,
|
|
4279
|
-
style: [
|
|
4374
|
+
style: [styles16.root, disabled && styles16.disabled, style],
|
|
4280
4375
|
children: [
|
|
4281
|
-
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,
|
|
4282
4377
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4283
4378
|
reactNative.View,
|
|
4284
4379
|
{
|
|
4285
4380
|
accessibilityRole: readOnly ? "image" : "radiogroup",
|
|
4286
4381
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
4287
4382
|
accessibilityState: { disabled },
|
|
4288
|
-
style: [
|
|
4383
|
+
style: [styles16.stars, { gap: resolvedStarGap }],
|
|
4289
4384
|
children: Array.from({ length: STAR_COUNT }, (_, index) => {
|
|
4290
4385
|
const starValue = index + 1;
|
|
4291
4386
|
const isSelected = starValue <= selectedStarCount;
|
|
4292
4387
|
const icon = isSelected ? /* @__PURE__ */ jsxRuntime.jsx(StarFilledIcon, { size: iconWidth, height: iconHeight }) : /* @__PURE__ */ jsxRuntime.jsx(StarIcon, { size: iconWidth, height: iconHeight });
|
|
4293
|
-
const itemStyle = [
|
|
4388
|
+
const itemStyle = [styles16.starItem, { width: size, height: size }];
|
|
4294
4389
|
if (readOnly) {
|
|
4295
4390
|
return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: itemStyle, children: icon }, starValue);
|
|
4296
4391
|
}
|
|
@@ -4316,7 +4411,7 @@ var RatingInput = react.forwardRef(
|
|
|
4316
4411
|
);
|
|
4317
4412
|
}
|
|
4318
4413
|
);
|
|
4319
|
-
var
|
|
4414
|
+
var styles16 = reactNative.StyleSheet.create({
|
|
4320
4415
|
root: {
|
|
4321
4416
|
flexDirection: "row",
|
|
4322
4417
|
alignItems: "center",
|
|
@@ -4380,19 +4475,19 @@ var CommentCard = react.forwardRef(
|
|
|
4380
4475
|
setExpanded(next);
|
|
4381
4476
|
onExpandedChange?.(next);
|
|
4382
4477
|
};
|
|
4383
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [
|
|
4384
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
4385
|
-
/* @__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(
|
|
4386
4481
|
reactNative.Image,
|
|
4387
4482
|
{
|
|
4388
4483
|
source: { uri: imageUrl ?? void 0 },
|
|
4389
|
-
style:
|
|
4484
|
+
style: styles17.avatarImage,
|
|
4390
4485
|
onError: () => setImageFailed(true)
|
|
4391
4486
|
}
|
|
4392
4487
|
) : /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { size: 20, color: colors.primary }) }),
|
|
4393
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
4394
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style:
|
|
4395
|
-
/* @__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 })
|
|
4396
4491
|
] }),
|
|
4397
4492
|
/* @__PURE__ */ jsxRuntime.jsx(RatingInput, { value: rating, readOnly: true, showValue: false, size: 16 })
|
|
4398
4493
|
] }),
|
|
@@ -4400,7 +4495,7 @@ var CommentCard = react.forwardRef(
|
|
|
4400
4495
|
reactNative.Text,
|
|
4401
4496
|
{
|
|
4402
4497
|
numberOfLines: expanded ? void 0 : maxCommentLines,
|
|
4403
|
-
style: [
|
|
4498
|
+
style: [styles17.comment, commentStyle],
|
|
4404
4499
|
children: commentText
|
|
4405
4500
|
}
|
|
4406
4501
|
),
|
|
@@ -4413,14 +4508,14 @@ var CommentCard = react.forwardRef(
|
|
|
4413
4508
|
hitSlop: 6,
|
|
4414
4509
|
onHoverIn: () => setActionHovered(true),
|
|
4415
4510
|
onHoverOut: () => setActionHovered(false),
|
|
4416
|
-
style:
|
|
4511
|
+
style: styles17.action,
|
|
4417
4512
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4418
4513
|
reactNative.Text,
|
|
4419
4514
|
{
|
|
4420
4515
|
style: [
|
|
4421
|
-
|
|
4422
|
-
expanded &&
|
|
4423
|
-
actionHovered && (expanded ?
|
|
4516
|
+
styles17.actionText,
|
|
4517
|
+
expanded && styles17.closeActionText,
|
|
4518
|
+
actionHovered && (expanded ? styles17.closeActionTextHovered : styles17.openActionTextHovered)
|
|
4424
4519
|
],
|
|
4425
4520
|
children: expanded ? readLessLabel : readMoreLabel
|
|
4426
4521
|
}
|
|
@@ -4430,7 +4525,7 @@ var CommentCard = react.forwardRef(
|
|
|
4430
4525
|
] });
|
|
4431
4526
|
}
|
|
4432
4527
|
);
|
|
4433
|
-
var
|
|
4528
|
+
var styles17 = reactNative.StyleSheet.create({
|
|
4434
4529
|
root: {
|
|
4435
4530
|
width: CARD_WIDTH,
|
|
4436
4531
|
minHeight: CARD_MIN_HEIGHT,
|
|
@@ -4496,6 +4591,676 @@ var styles16 = reactNative.StyleSheet.create({
|
|
|
4496
4591
|
}
|
|
4497
4592
|
});
|
|
4498
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
|
+
|
|
4499
5264
|
exports.AreaExpandIcon = AreaExpandIcon;
|
|
4500
5265
|
exports.ArrowRightIcon = ArrowRightIcon;
|
|
4501
5266
|
exports.Avatar = Avatar;
|
|
@@ -4527,6 +5292,7 @@ exports.CopyIcon = CopyIcon;
|
|
|
4527
5292
|
exports.Counter = Counter;
|
|
4528
5293
|
exports.DatePicker = DatePicker;
|
|
4529
5294
|
exports.FacebookIcon = FacebookIcon;
|
|
5295
|
+
exports.FavoritesButton = FavoritesButton;
|
|
4530
5296
|
exports.FiltersIcon = FiltersIcon;
|
|
4531
5297
|
exports.GlobeIcon = GlobeIcon;
|
|
4532
5298
|
exports.GuestsIcon = GuestsIcon;
|
|
@@ -4552,6 +5318,7 @@ exports.NavigateIcon = NavigateIcon;
|
|
|
4552
5318
|
exports.PhoneIcon = PhoneIcon;
|
|
4553
5319
|
exports.PlusIcon = PlusIcon;
|
|
4554
5320
|
exports.QrCodeIcon = QrCodeIcon;
|
|
5321
|
+
exports.Range = Range;
|
|
4555
5322
|
exports.RatingInput = RatingInput;
|
|
4556
5323
|
exports.RatingStarIcon = RatingStarIcon;
|
|
4557
5324
|
exports.SaveHeartIcon = SaveHeartIcon;
|