@ecohouse/ui 0.1.7 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -12
- package/dist/index.cjs +363 -120
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +45 -2
- package/dist/index.d.ts +45 -2
- package/dist/index.js +360 -121
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/LanguageSwitcher/LanguageSwitcher.stories.tsx +52 -0
- package/src/components/LanguageSwitcher/LanguageSwitcher.tsx +287 -0
- package/src/components/LanguageSwitcher/index.ts +2 -0
- package/src/components/index.ts +3 -0
- package/src/icons/Globe/GlobeIcon.tsx +20 -0
- package/src/icons/Globe/GlobeIcon.web.tsx +26 -0
- package/src/icons/Globe/globePath.ts +3 -0
- package/src/icons/Globe/index.ts +2 -0
- package/src/icons/index.ts +1 -0
- package/src/icons/registry.ts +3 -1
- package/src/index.ts +6 -0
- package/src/theme/index.ts +1 -0
- package/src/theme/typography.ts +9 -0
package/dist/index.cjs
CHANGED
|
@@ -107,6 +107,13 @@ var segmentedToggleTypography = {
|
|
|
107
107
|
lineHeight: 14,
|
|
108
108
|
letterSpacing: 0
|
|
109
109
|
};
|
|
110
|
+
var languageSwitcherTypography = {
|
|
111
|
+
fontFamily: fonts.sans,
|
|
112
|
+
fontSize: 14,
|
|
113
|
+
fontWeight: "600",
|
|
114
|
+
lineHeight: 19,
|
|
115
|
+
letterSpacing: 0
|
|
116
|
+
};
|
|
110
117
|
var counterTypography = {
|
|
111
118
|
fontFamily: fonts.sans,
|
|
112
119
|
fontSize: 14,
|
|
@@ -488,6 +495,21 @@ function HeartIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }) {
|
|
|
488
495
|
) });
|
|
489
496
|
}
|
|
490
497
|
|
|
498
|
+
// src/icons/Globe/globePath.ts
|
|
499
|
+
var GLOBE_PATH = "M18.3333 10C18.3333 14.6024 14.6024 18.3333 10 18.3333M18.3333 10C18.3333 5.39763 14.6024 1.66667 10 1.66667M18.3333 10H1.66667M10 18.3333C5.39763 18.3333 1.66667 14.6024 1.66667 10M10 18.3333C12.0833 16.0511 13.2675 13.0836 13.3333 10C13.2675 6.91643 12.0833 3.94892 10 1.66667M10 18.3333C7.91667 16.0511 6.73248 13.0836 6.66667 10C6.73248 6.91643 7.91667 3.94892 10 1.66667M1.66667 10C1.66667 5.39763 5.39763 1.66667 10 1.66667";
|
|
500
|
+
function GlobeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
|
|
501
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
502
|
+
Svg.Path,
|
|
503
|
+
{
|
|
504
|
+
d: GLOBE_PATH,
|
|
505
|
+
stroke: color,
|
|
506
|
+
strokeWidth,
|
|
507
|
+
strokeLinecap: "round",
|
|
508
|
+
strokeLinejoin: "round"
|
|
509
|
+
}
|
|
510
|
+
) });
|
|
511
|
+
}
|
|
512
|
+
|
|
491
513
|
// src/icons/HelpCircle/helpCirclePath.ts
|
|
492
514
|
var HELP_CIRCLE_PATH = "M6.99971 6.00149C7.11717 5.66757 7.34902 5.386 7.6542 5.20665C7.95937 5.0273 8.31817 4.96174 8.66705 5.02158C9.01593 5.08142 9.33238 5.2628 9.56034 5.5336C9.7883 5.8044 9.91306 6.14714 9.91254 6.50112C9.91254 7.50037 8.41365 8 8.41365 8M8.43298 10H8.43964M8.33304 13.3333C11.4627 13.3333 13.9997 10.7963 13.9997 7.66667C13.9997 4.53705 11.4627 2 8.33304 2C5.20343 2 2.66638 4.53705 2.66638 7.66667C2.66638 8.3 2.77027 8.90906 2.96196 9.47774C3.03409 9.69175 3.07016 9.79875 3.07666 9.88095C3.08309 9.96213 3.07823 10.019 3.05814 10.098C3.03781 10.1779 2.99291 10.261 2.9031 10.4272L1.81267 12.4456C1.65713 12.7335 1.57936 12.8774 1.59676 12.9885C1.61192 13.0853 1.66887 13.1705 1.75249 13.2215C1.84849 13.2801 2.01124 13.2632 2.33674 13.2296L5.75075 12.8767C5.85414 12.866 5.90583 12.8606 5.95295 12.8624C5.99929 12.8642 6.03201 12.8686 6.0772 12.879C6.12315 12.8896 6.18092 12.9118 6.29648 12.9564C6.92851 13.1999 7.61519 13.3333 8.33304 13.3333Z";
|
|
493
515
|
function HelpCircleIcon({
|
|
@@ -845,6 +867,7 @@ var icons = {
|
|
|
845
867
|
clock: ClockIcon,
|
|
846
868
|
facebook: FacebookIcon,
|
|
847
869
|
heart: HeartIcon,
|
|
870
|
+
globe: GlobeIcon,
|
|
848
871
|
helpCircle: HelpCircleIcon,
|
|
849
872
|
home: HomeIcon,
|
|
850
873
|
instagram: InstagramIcon,
|
|
@@ -889,7 +912,7 @@ var iconGroups = {
|
|
|
889
912
|
objects: ["bag", "building", "clock", "user", "usersAlt", "video"],
|
|
890
913
|
communication: ["mail", "phone"],
|
|
891
914
|
social: ["facebook", "instagram", "linkedin"],
|
|
892
|
-
interface: ["layoutGrid", "sidebar", "settings", "helpCircle", "logOut"]
|
|
915
|
+
interface: ["globe", "layoutGrid", "sidebar", "settings", "helpCircle", "logOut"]
|
|
893
916
|
};
|
|
894
917
|
var iconGroupNames = Object.keys(iconGroups);
|
|
895
918
|
function getIconsByGroup(group) {
|
|
@@ -1618,7 +1641,223 @@ var styles5 = reactNative.StyleSheet.create({
|
|
|
1618
1641
|
flexShrink: 1
|
|
1619
1642
|
}
|
|
1620
1643
|
});
|
|
1621
|
-
var
|
|
1644
|
+
var defaultLanguageOptions = [
|
|
1645
|
+
{ value: "hy", label: "\u0540\u0561\u0575" },
|
|
1646
|
+
{ value: "en", label: "Eng" },
|
|
1647
|
+
{ value: "ru", label: "\u0420\u0443\u0441" }
|
|
1648
|
+
];
|
|
1649
|
+
var CONTROL_WIDTH = 90;
|
|
1650
|
+
var CONTROL_HEIGHT = 35;
|
|
1651
|
+
var ICON_SIZE4 = 16;
|
|
1652
|
+
var LanguageSwitcher = react.forwardRef(
|
|
1653
|
+
function LanguageSwitcher2({
|
|
1654
|
+
options = defaultLanguageOptions,
|
|
1655
|
+
value,
|
|
1656
|
+
defaultValue,
|
|
1657
|
+
onValueChange,
|
|
1658
|
+
open: openProp,
|
|
1659
|
+
defaultOpen = false,
|
|
1660
|
+
onOpenChange,
|
|
1661
|
+
disabled = false,
|
|
1662
|
+
accessibilityLabel = "Language",
|
|
1663
|
+
style,
|
|
1664
|
+
className,
|
|
1665
|
+
hitSlop = 8,
|
|
1666
|
+
...rest
|
|
1667
|
+
}, forwardedRef) {
|
|
1668
|
+
const wrapperRef = react.useRef(null);
|
|
1669
|
+
const triggerRef = react.useRef(null);
|
|
1670
|
+
const setWrapperRef = react.useMemo(() => mergeRefs(wrapperRef, forwardedRef), [forwardedRef]);
|
|
1671
|
+
const firstValue = options[0]?.value ?? "";
|
|
1672
|
+
const isValueControlled = value !== void 0;
|
|
1673
|
+
const isOpenControlled = openProp !== void 0;
|
|
1674
|
+
const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue ?? firstValue);
|
|
1675
|
+
const [uncontrolledOpen, setUncontrolledOpen] = react.useState(defaultOpen);
|
|
1676
|
+
const [triggerHovered, setTriggerHovered] = react.useState(false);
|
|
1677
|
+
const [hoveredValue, setHoveredValue] = react.useState(null);
|
|
1678
|
+
const selectedValue = isValueControlled ? value : uncontrolledValue;
|
|
1679
|
+
const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
|
|
1680
|
+
const selectedOption = options.find((option) => option.value === selectedValue) ?? options[0] ?? null;
|
|
1681
|
+
useApplyWebClassName(wrapperRef, className?.trim() || void 0);
|
|
1682
|
+
const setOpen = react.useCallback(
|
|
1683
|
+
(next) => {
|
|
1684
|
+
if (disabled || next === isOpen) return;
|
|
1685
|
+
if (!isOpenControlled) setUncontrolledOpen(next);
|
|
1686
|
+
onOpenChange?.(next);
|
|
1687
|
+
},
|
|
1688
|
+
[disabled, isOpen, isOpenControlled, onOpenChange]
|
|
1689
|
+
);
|
|
1690
|
+
const closeAndFocusTrigger = react.useCallback(() => {
|
|
1691
|
+
setOpen(false);
|
|
1692
|
+
const node = triggerRef.current;
|
|
1693
|
+
node?.focus?.();
|
|
1694
|
+
}, [setOpen]);
|
|
1695
|
+
react.useEffect(() => {
|
|
1696
|
+
if (reactNative.Platform.OS !== "web" || !isOpen) return;
|
|
1697
|
+
const handlePointerDown = (event) => {
|
|
1698
|
+
const wrapper = wrapperRef.current;
|
|
1699
|
+
const target = event.target;
|
|
1700
|
+
if (wrapper?.contains && target instanceof Node && !wrapper.contains(target)) {
|
|
1701
|
+
setOpen(false);
|
|
1702
|
+
}
|
|
1703
|
+
};
|
|
1704
|
+
const handleKeyDown = (event) => {
|
|
1705
|
+
if (event.key === "Escape") {
|
|
1706
|
+
event.preventDefault();
|
|
1707
|
+
closeAndFocusTrigger();
|
|
1708
|
+
}
|
|
1709
|
+
};
|
|
1710
|
+
document.addEventListener("mousedown", handlePointerDown);
|
|
1711
|
+
document.addEventListener("touchstart", handlePointerDown);
|
|
1712
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
1713
|
+
return () => {
|
|
1714
|
+
document.removeEventListener("mousedown", handlePointerDown);
|
|
1715
|
+
document.removeEventListener("touchstart", handlePointerDown);
|
|
1716
|
+
document.removeEventListener("keydown", handleKeyDown);
|
|
1717
|
+
};
|
|
1718
|
+
}, [closeAndFocusTrigger, isOpen, setOpen]);
|
|
1719
|
+
const selectLanguage = (nextValue) => {
|
|
1720
|
+
if (nextValue !== selectedValue) {
|
|
1721
|
+
if (!isValueControlled) setUncontrolledValue(nextValue);
|
|
1722
|
+
onValueChange?.(nextValue);
|
|
1723
|
+
}
|
|
1724
|
+
closeAndFocusTrigger();
|
|
1725
|
+
};
|
|
1726
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1727
|
+
reactNative.View,
|
|
1728
|
+
{
|
|
1729
|
+
...rest,
|
|
1730
|
+
ref: setWrapperRef,
|
|
1731
|
+
style: [styles6.wrapper, isOpen && styles6.wrapperOpen, disabled && styles6.disabled, style],
|
|
1732
|
+
children: [
|
|
1733
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1734
|
+
reactNative.Pressable,
|
|
1735
|
+
{
|
|
1736
|
+
ref: triggerRef,
|
|
1737
|
+
onPress: () => setOpen(!isOpen),
|
|
1738
|
+
disabled: disabled || options.length === 0,
|
|
1739
|
+
hitSlop,
|
|
1740
|
+
accessibilityRole: "button",
|
|
1741
|
+
accessibilityLabel,
|
|
1742
|
+
accessibilityState: { disabled, expanded: isOpen },
|
|
1743
|
+
onHoverIn: () => setTriggerHovered(true),
|
|
1744
|
+
onHoverOut: () => setTriggerHovered(false),
|
|
1745
|
+
style: ({ pressed }) => [
|
|
1746
|
+
styles6.trigger,
|
|
1747
|
+
(triggerHovered || pressed || isOpen) && styles6.triggerActive
|
|
1748
|
+
],
|
|
1749
|
+
children: [
|
|
1750
|
+
/* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, { size: ICON_SIZE4, color: colors.white, strokeWidth: 2 }),
|
|
1751
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles6.triggerLabel, numberOfLines: 1, children: selectedOption?.label ?? "" }),
|
|
1752
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles6.chevron, isOpen && styles6.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE4, color: colors.white, strokeWidth: 2 }) })
|
|
1753
|
+
]
|
|
1754
|
+
}
|
|
1755
|
+
),
|
|
1756
|
+
isOpen && options.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles6.menu, accessibilityRole: "menu", children: options.map((option) => {
|
|
1757
|
+
const selected = option.value === selectedValue;
|
|
1758
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1759
|
+
reactNative.Pressable,
|
|
1760
|
+
{
|
|
1761
|
+
onPress: () => selectLanguage(option.value),
|
|
1762
|
+
accessibilityRole: "menuitem",
|
|
1763
|
+
accessibilityLabel: option.label,
|
|
1764
|
+
accessibilityState: { selected },
|
|
1765
|
+
onHoverIn: () => setHoveredValue(option.value),
|
|
1766
|
+
onHoverOut: () => setHoveredValue(null),
|
|
1767
|
+
style: ({ pressed }) => [
|
|
1768
|
+
styles6.item,
|
|
1769
|
+
selected ? styles6.itemSelected : (hoveredValue === option.value || pressed) && styles6.itemHovered
|
|
1770
|
+
],
|
|
1771
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.itemLabel, selected && styles6.itemLabelSelected], children: option.label })
|
|
1772
|
+
},
|
|
1773
|
+
option.value
|
|
1774
|
+
);
|
|
1775
|
+
}) }) : null
|
|
1776
|
+
]
|
|
1777
|
+
}
|
|
1778
|
+
);
|
|
1779
|
+
}
|
|
1780
|
+
);
|
|
1781
|
+
var styles6 = reactNative.StyleSheet.create({
|
|
1782
|
+
wrapper: {
|
|
1783
|
+
position: "relative",
|
|
1784
|
+
width: CONTROL_WIDTH,
|
|
1785
|
+
alignSelf: "flex-start"
|
|
1786
|
+
},
|
|
1787
|
+
wrapperOpen: {
|
|
1788
|
+
zIndex: 20
|
|
1789
|
+
},
|
|
1790
|
+
disabled: {
|
|
1791
|
+
opacity: 0.6
|
|
1792
|
+
},
|
|
1793
|
+
trigger: {
|
|
1794
|
+
width: CONTROL_WIDTH,
|
|
1795
|
+
height: CONTROL_HEIGHT,
|
|
1796
|
+
flexDirection: "row",
|
|
1797
|
+
alignItems: "center",
|
|
1798
|
+
gap: 8,
|
|
1799
|
+
padding: 8,
|
|
1800
|
+
borderRadius: 12,
|
|
1801
|
+
backgroundColor: "transparent"
|
|
1802
|
+
},
|
|
1803
|
+
triggerActive: {
|
|
1804
|
+
backgroundColor: colors.grey700
|
|
1805
|
+
},
|
|
1806
|
+
triggerLabel: {
|
|
1807
|
+
...languageSwitcherTypography,
|
|
1808
|
+
...reactNative.Platform.select({ web: { fontFamily: `${fonts.sans}, sans-serif` } }),
|
|
1809
|
+
minWidth: 0,
|
|
1810
|
+
flex: 1,
|
|
1811
|
+
color: colors.white
|
|
1812
|
+
},
|
|
1813
|
+
chevron: {
|
|
1814
|
+
width: ICON_SIZE4,
|
|
1815
|
+
height: ICON_SIZE4,
|
|
1816
|
+
flexShrink: 0,
|
|
1817
|
+
alignItems: "center",
|
|
1818
|
+
justifyContent: "center"
|
|
1819
|
+
},
|
|
1820
|
+
chevronOpen: {
|
|
1821
|
+
transform: [{ rotate: "180deg" }]
|
|
1822
|
+
},
|
|
1823
|
+
menu: {
|
|
1824
|
+
position: "absolute",
|
|
1825
|
+
top: CONTROL_HEIGHT + 8,
|
|
1826
|
+
left: 0,
|
|
1827
|
+
width: CONTROL_WIDTH,
|
|
1828
|
+
padding: 8,
|
|
1829
|
+
gap: 8,
|
|
1830
|
+
borderRadius: 12,
|
|
1831
|
+
backgroundColor: colors.grey700,
|
|
1832
|
+
...reactNative.Platform.select({
|
|
1833
|
+
web: { boxShadow: `0 8px 24px ${colors.black}73` },
|
|
1834
|
+
default: { elevation: 8 }
|
|
1835
|
+
})
|
|
1836
|
+
},
|
|
1837
|
+
item: {
|
|
1838
|
+
height: CONTROL_HEIGHT,
|
|
1839
|
+
alignItems: "center",
|
|
1840
|
+
justifyContent: "center",
|
|
1841
|
+
paddingVertical: 8,
|
|
1842
|
+
paddingHorizontal: 12,
|
|
1843
|
+
borderRadius: 8
|
|
1844
|
+
},
|
|
1845
|
+
itemHovered: {
|
|
1846
|
+
backgroundColor: colors.whiteAlpha5
|
|
1847
|
+
},
|
|
1848
|
+
itemSelected: {
|
|
1849
|
+
backgroundColor: colors.primaryMuted
|
|
1850
|
+
},
|
|
1851
|
+
itemLabel: {
|
|
1852
|
+
...languageSwitcherTypography,
|
|
1853
|
+
...reactNative.Platform.select({ web: { fontFamily: `${fonts.sans}, sans-serif` } }),
|
|
1854
|
+
color: colors.white
|
|
1855
|
+
},
|
|
1856
|
+
itemLabelSelected: {
|
|
1857
|
+
color: colors.primary
|
|
1858
|
+
}
|
|
1859
|
+
});
|
|
1860
|
+
var ICON_SIZE5 = 28;
|
|
1622
1861
|
var StatCard = react.forwardRef(function StatCard2({ label, icon: Icon2, style, className, accessibilityLabel, ...rest }, forwardedRef) {
|
|
1623
1862
|
const containerRef = react.useRef(null);
|
|
1624
1863
|
const resolvedClassName = className?.trim() || void 0;
|
|
@@ -1629,17 +1868,17 @@ var StatCard = react.forwardRef(function StatCard2({ label, icon: Icon2, style,
|
|
|
1629
1868
|
{
|
|
1630
1869
|
...rest,
|
|
1631
1870
|
ref: setContainerRef,
|
|
1632
|
-
style: [
|
|
1871
|
+
style: [styles7.base, style],
|
|
1633
1872
|
accessibilityRole: "text",
|
|
1634
1873
|
accessibilityLabel: accessibilityLabel ?? label,
|
|
1635
1874
|
children: [
|
|
1636
|
-
/* @__PURE__ */ jsxRuntime.jsx(Icon2, { size:
|
|
1637
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
1875
|
+
/* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE5, color: colors.white }),
|
|
1876
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles7.label, children: label })
|
|
1638
1877
|
]
|
|
1639
1878
|
}
|
|
1640
1879
|
);
|
|
1641
1880
|
});
|
|
1642
|
-
var
|
|
1881
|
+
var styles7 = reactNative.StyleSheet.create({
|
|
1643
1882
|
base: {
|
|
1644
1883
|
width: 204.5,
|
|
1645
1884
|
minHeight: 114,
|
|
@@ -1725,7 +1964,7 @@ var Button = react.forwardRef(
|
|
|
1725
1964
|
useApplyWebClassName(textRef, textClassName);
|
|
1726
1965
|
const iconNode = customIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
|
|
1727
1966
|
const containerStyle = [
|
|
1728
|
-
|
|
1967
|
+
styles8.base,
|
|
1729
1968
|
{
|
|
1730
1969
|
minHeight: metrics.minHeight,
|
|
1731
1970
|
borderRadius: metrics.borderRadius,
|
|
@@ -1736,15 +1975,15 @@ var Button = react.forwardRef(
|
|
|
1736
1975
|
paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
|
|
1737
1976
|
gap: hasIcon ? metrics.gap : 0
|
|
1738
1977
|
},
|
|
1739
|
-
disabled &&
|
|
1978
|
+
disabled && styles8.disabled,
|
|
1740
1979
|
style
|
|
1741
1980
|
];
|
|
1742
1981
|
const labelStyle = [
|
|
1743
|
-
|
|
1982
|
+
styles8.label,
|
|
1744
1983
|
metrics.text,
|
|
1745
1984
|
{ color: preset.textColor },
|
|
1746
|
-
reactNative.Platform.OS === "android" ?
|
|
1747
|
-
!hasIcon &&
|
|
1985
|
+
reactNative.Platform.OS === "android" ? styles8.labelAndroid : null,
|
|
1986
|
+
!hasIcon && styles8.labelCentered,
|
|
1748
1987
|
textStyle
|
|
1749
1988
|
];
|
|
1750
1989
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -1765,7 +2004,7 @@ var Button = react.forwardRef(
|
|
|
1765
2004
|
reactNative.View,
|
|
1766
2005
|
{
|
|
1767
2006
|
style: [
|
|
1768
|
-
|
|
2007
|
+
styles8.iconContainer,
|
|
1769
2008
|
{
|
|
1770
2009
|
width: metrics.iconContainerSize,
|
|
1771
2010
|
height: metrics.iconContainerSize,
|
|
@@ -1781,7 +2020,7 @@ var Button = react.forwardRef(
|
|
|
1781
2020
|
);
|
|
1782
2021
|
}
|
|
1783
2022
|
);
|
|
1784
|
-
var
|
|
2023
|
+
var styles8 = reactNative.StyleSheet.create({
|
|
1785
2024
|
base: {
|
|
1786
2025
|
flexDirection: "row",
|
|
1787
2026
|
alignItems: "center",
|
|
@@ -1859,13 +2098,13 @@ var Checkbox = react.forwardRef(function Checkbox2({
|
|
|
1859
2098
|
accessibilityRole: "checkbox",
|
|
1860
2099
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
1861
2100
|
accessibilityState: { checked: isActive, disabled },
|
|
1862
|
-
style: [
|
|
2101
|
+
style: [styles9.root, disabled && styles9.disabled, style],
|
|
1863
2102
|
children: [
|
|
1864
2103
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1865
2104
|
reactNative.View,
|
|
1866
2105
|
{
|
|
1867
2106
|
style: [
|
|
1868
|
-
|
|
2107
|
+
styles9.box,
|
|
1869
2108
|
{
|
|
1870
2109
|
backgroundColor: chrome.backgroundColor,
|
|
1871
2110
|
borderColor: chrome.borderColor
|
|
@@ -1874,12 +2113,12 @@ var Checkbox = react.forwardRef(function Checkbox2({
|
|
|
1874
2113
|
children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: CHECK_SIZE, color: colors.primary, strokeWidth: CHECK_STROKE }) : null
|
|
1875
2114
|
}
|
|
1876
2115
|
),
|
|
1877
|
-
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2116
|
+
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles9.label, labelStyle], children: labelContent }) : labelContent : null
|
|
1878
2117
|
]
|
|
1879
2118
|
}
|
|
1880
2119
|
);
|
|
1881
2120
|
});
|
|
1882
|
-
var
|
|
2121
|
+
var styles9 = reactNative.StyleSheet.create({
|
|
1883
2122
|
root: {
|
|
1884
2123
|
flexDirection: "row",
|
|
1885
2124
|
alignItems: "center",
|
|
@@ -1977,7 +2216,7 @@ var DEFAULT_WIDTH = 380;
|
|
|
1977
2216
|
var TRIGGER_HEIGHT = 44;
|
|
1978
2217
|
var TRIGGER_RADIUS = 60;
|
|
1979
2218
|
var MENU_RADIUS2 = 20;
|
|
1980
|
-
var
|
|
2219
|
+
var ICON_SIZE6 = 20;
|
|
1981
2220
|
var NAV_ICON_SIZE = 20;
|
|
1982
2221
|
var DAY_CELL_HEIGHT = 44;
|
|
1983
2222
|
var DAY_CIRCLE_SIZE = 44;
|
|
@@ -2129,9 +2368,9 @@ var DatePicker = react.forwardRef(
|
|
|
2129
2368
|
{
|
|
2130
2369
|
...rest,
|
|
2131
2370
|
ref: setRootRef,
|
|
2132
|
-
style: [
|
|
2371
|
+
style: [styles10.root, isOpen && styles10.rootOpen, disabled && styles10.disabled, style],
|
|
2133
2372
|
accessibilityState: { disabled, expanded: isOpen },
|
|
2134
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [
|
|
2373
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles10.triggerWrap, isOpen && styles10.triggerWrapOpen], children: [
|
|
2135
2374
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2136
2375
|
reactNative.Pressable,
|
|
2137
2376
|
{
|
|
@@ -2142,17 +2381,17 @@ var DatePicker = react.forwardRef(
|
|
|
2142
2381
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
2143
2382
|
accessibilityState: { disabled, expanded: isOpen },
|
|
2144
2383
|
style: [
|
|
2145
|
-
|
|
2384
|
+
styles10.trigger,
|
|
2146
2385
|
{ borderColor: triggerBorderColor, backgroundColor: colors.grey700 }
|
|
2147
2386
|
],
|
|
2148
2387
|
children: [
|
|
2149
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2150
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
2388
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
|
|
2389
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles10.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarOutlineIcon, { size: ICON_SIZE6, color: colors.grey100 }) })
|
|
2151
2390
|
]
|
|
2152
2391
|
}
|
|
2153
2392
|
),
|
|
2154
|
-
isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
2155
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
2393
|
+
isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles10.menu, children: [
|
|
2394
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles10.calendarHeader, children: [
|
|
2156
2395
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2157
2396
|
reactNative.Pressable,
|
|
2158
2397
|
{
|
|
@@ -2160,11 +2399,11 @@ var DatePicker = react.forwardRef(
|
|
|
2160
2399
|
hitSlop: 8,
|
|
2161
2400
|
accessibilityRole: "button",
|
|
2162
2401
|
accessibilityLabel: "Previous month",
|
|
2163
|
-
style:
|
|
2402
|
+
style: styles10.navButton,
|
|
2164
2403
|
children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white })
|
|
2165
2404
|
}
|
|
2166
2405
|
),
|
|
2167
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style:
|
|
2406
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: styles10.monthHeading, children: [
|
|
2168
2407
|
monthNames[visibleMonth.getMonth()],
|
|
2169
2408
|
" ",
|
|
2170
2409
|
visibleMonth.getFullYear()
|
|
@@ -2176,13 +2415,13 @@ var DatePicker = react.forwardRef(
|
|
|
2176
2415
|
hitSlop: 8,
|
|
2177
2416
|
accessibilityRole: "button",
|
|
2178
2417
|
accessibilityLabel: "Next month",
|
|
2179
|
-
style:
|
|
2180
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
2418
|
+
style: styles10.navButton,
|
|
2419
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles10.navIconMirror, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
|
|
2181
2420
|
}
|
|
2182
2421
|
)
|
|
2183
2422
|
] }),
|
|
2184
2423
|
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
|
|
2185
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
2424
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles10.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles10.dayCellWrap, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles10.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
|
|
2186
2425
|
weeks.map((week, weekIndex) => {
|
|
2187
2426
|
let rangeHighlightStyle = null;
|
|
2188
2427
|
if (isRange && rangeValue.start && rangeValue.end) {
|
|
@@ -2219,13 +2458,13 @@ var DatePicker = react.forwardRef(
|
|
|
2219
2458
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2220
2459
|
reactNative.View,
|
|
2221
2460
|
{
|
|
2222
|
-
style: [
|
|
2461
|
+
style: [styles10.weekRow, weekIndex > 0 && styles10.weekRowSpaced],
|
|
2223
2462
|
children: [
|
|
2224
2463
|
rangeHighlightStyle ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
2225
2464
|
reactNative.View,
|
|
2226
2465
|
{
|
|
2227
2466
|
pointerEvents: "none",
|
|
2228
|
-
style: [
|
|
2467
|
+
style: [styles10.rangeHighlight, rangeHighlightStyle]
|
|
2229
2468
|
}
|
|
2230
2469
|
) : null,
|
|
2231
2470
|
week.map((day, dayIndex) => {
|
|
@@ -2248,7 +2487,7 @@ var DatePicker = react.forwardRef(
|
|
|
2248
2487
|
onHoverOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
|
|
2249
2488
|
onPressIn: () => setHoveredDayKey(dayKey),
|
|
2250
2489
|
onPressOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
|
|
2251
|
-
style:
|
|
2490
|
+
style: styles10.dayCellWrap,
|
|
2252
2491
|
accessibilityRole: "button",
|
|
2253
2492
|
accessibilityLabel: formatValue(day),
|
|
2254
2493
|
accessibilityState: {
|
|
@@ -2260,14 +2499,14 @@ var DatePicker = react.forwardRef(
|
|
|
2260
2499
|
reactNative.View,
|
|
2261
2500
|
{
|
|
2262
2501
|
style: [
|
|
2263
|
-
|
|
2264
|
-
isSelectedEndpoint &&
|
|
2265
|
-
isHovered &&
|
|
2502
|
+
styles10.dayCircle,
|
|
2503
|
+
isSelectedEndpoint && styles10.dayCircleSelected,
|
|
2504
|
+
isHovered && styles10.dayCircleHovered
|
|
2266
2505
|
],
|
|
2267
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2506
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles10.dayText, { color: dayTextColor }], children: day.getDate() })
|
|
2268
2507
|
}
|
|
2269
2508
|
),
|
|
2270
|
-
isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
2509
|
+
isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles10.todayDot }) : null
|
|
2271
2510
|
]
|
|
2272
2511
|
},
|
|
2273
2512
|
dayIndex
|
|
@@ -2285,7 +2524,7 @@ var DatePicker = react.forwardRef(
|
|
|
2285
2524
|
);
|
|
2286
2525
|
}
|
|
2287
2526
|
);
|
|
2288
|
-
var
|
|
2527
|
+
var styles10 = reactNative.StyleSheet.create({
|
|
2289
2528
|
root: {
|
|
2290
2529
|
width: DEFAULT_WIDTH,
|
|
2291
2530
|
gap: 8,
|
|
@@ -2321,8 +2560,8 @@ var styles9 = reactNative.StyleSheet.create({
|
|
|
2321
2560
|
minWidth: 0
|
|
2322
2561
|
},
|
|
2323
2562
|
iconSlot: {
|
|
2324
|
-
width:
|
|
2325
|
-
height:
|
|
2563
|
+
width: ICON_SIZE6,
|
|
2564
|
+
height: ICON_SIZE6,
|
|
2326
2565
|
alignItems: "center",
|
|
2327
2566
|
justifyContent: "center",
|
|
2328
2567
|
flexShrink: 0
|
|
@@ -2545,13 +2784,13 @@ var Input = react.forwardRef(function Input2({
|
|
|
2545
2784
|
const rightIconNode = rightIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ShowIcon, { size: metrics.iconSize, color: chrome.rightIconColor });
|
|
2546
2785
|
useApplyWebClassName(rootRef, className);
|
|
2547
2786
|
useApplyWebClassName(inputRef, inputClassName);
|
|
2548
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [
|
|
2549
|
-
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2787
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles11.root, disabled && styles11.disabled, style], children: [
|
|
2788
|
+
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles11.label, { color: chrome.labelColor }], children: label }) : null,
|
|
2550
2789
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2551
2790
|
reactNative.View,
|
|
2552
2791
|
{
|
|
2553
2792
|
style: [
|
|
2554
|
-
|
|
2793
|
+
styles11.field,
|
|
2555
2794
|
{
|
|
2556
2795
|
height: metrics.height,
|
|
2557
2796
|
borderRadius: metrics.borderRadius,
|
|
@@ -2566,7 +2805,7 @@ var Input = react.forwardRef(function Input2({
|
|
|
2566
2805
|
fieldStyle
|
|
2567
2806
|
],
|
|
2568
2807
|
children: [
|
|
2569
|
-
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
2808
|
+
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles11.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
|
|
2570
2809
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2571
2810
|
reactNative.TextInput,
|
|
2572
2811
|
{
|
|
@@ -2590,11 +2829,11 @@ var Input = react.forwardRef(function Input2({
|
|
|
2590
2829
|
onBlur?.(event);
|
|
2591
2830
|
},
|
|
2592
2831
|
style: [
|
|
2593
|
-
|
|
2832
|
+
styles11.input,
|
|
2594
2833
|
metrics.text,
|
|
2595
2834
|
{ color: chrome.textColor },
|
|
2596
|
-
reactNative.Platform.OS === "web" ?
|
|
2597
|
-
reactNative.Platform.OS === "android" ?
|
|
2835
|
+
reactNative.Platform.OS === "web" ? styles11.inputWeb : null,
|
|
2836
|
+
reactNative.Platform.OS === "android" ? styles11.inputAndroid : null,
|
|
2598
2837
|
inputStyle
|
|
2599
2838
|
],
|
|
2600
2839
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
@@ -2606,20 +2845,20 @@ var Input = react.forwardRef(function Input2({
|
|
|
2606
2845
|
{
|
|
2607
2846
|
onPress: onRightIconPress,
|
|
2608
2847
|
disabled,
|
|
2609
|
-
style: [
|
|
2848
|
+
style: [styles11.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
|
|
2610
2849
|
accessibilityRole: "button",
|
|
2611
2850
|
accessibilityLabel: rightIconAccessibilityLabel,
|
|
2612
2851
|
hitSlop: 8,
|
|
2613
2852
|
children: rightIconNode
|
|
2614
2853
|
}
|
|
2615
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
2854
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles11.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
|
|
2616
2855
|
]
|
|
2617
2856
|
}
|
|
2618
2857
|
),
|
|
2619
|
-
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
2858
|
+
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles11.hint, { color: chrome.hintColor }], children: hint }) : null
|
|
2620
2859
|
] });
|
|
2621
2860
|
});
|
|
2622
|
-
var
|
|
2861
|
+
var styles11 = reactNative.StyleSheet.create({
|
|
2623
2862
|
root: {
|
|
2624
2863
|
width: DEFAULT_WIDTH2,
|
|
2625
2864
|
gap: 8,
|
|
@@ -2662,7 +2901,7 @@ var TRIGGER_RADIUS2 = 60;
|
|
|
2662
2901
|
var MENU_RADIUS3 = 24;
|
|
2663
2902
|
var MENU_MAX_LIST_HEIGHT = 248;
|
|
2664
2903
|
var ITEM_RADIUS2 = 12;
|
|
2665
|
-
var
|
|
2904
|
+
var ICON_SIZE7 = 20;
|
|
2666
2905
|
var CHIP_GAP = 6;
|
|
2667
2906
|
var FALLBACK_ELLIPSIS_WIDTH = 20;
|
|
2668
2907
|
function itemBackground(state) {
|
|
@@ -2735,25 +2974,25 @@ function MultiValueChips({ options, disabled, onRemove }) {
|
|
|
2735
2974
|
const next = Math.ceil(event.nativeEvent.layout.width);
|
|
2736
2975
|
setEllipsisWidth((current) => current === next ? current : next);
|
|
2737
2976
|
};
|
|
2738
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
2739
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style:
|
|
2977
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.multiValueRoot, children: [
|
|
2978
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { pointerEvents: "none", style: styles12.measureRow, children: [
|
|
2740
2979
|
options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2741
2980
|
reactNative.View,
|
|
2742
2981
|
{
|
|
2743
|
-
style:
|
|
2982
|
+
style: styles12.chip,
|
|
2744
2983
|
onLayout: (event) => handleChipLayout(option.value, event),
|
|
2745
2984
|
children: [
|
|
2746
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
2747
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
2985
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.chipLabel, numberOfLines: 1, children: option.label }),
|
|
2986
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.chipRemove, children: "\xD7" })
|
|
2748
2987
|
]
|
|
2749
2988
|
},
|
|
2750
2989
|
`measure-${option.value}`
|
|
2751
2990
|
)),
|
|
2752
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
2991
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.ellipsisText, children: "..." }) })
|
|
2753
2992
|
] }),
|
|
2754
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
2755
|
-
visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
2756
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
2993
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.chipsRow, onLayout: handleContainerLayout, children: [
|
|
2994
|
+
visible.map((option) => /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.chip, children: [
|
|
2995
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.chipLabel, numberOfLines: 1, children: option.label }),
|
|
2757
2996
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2758
2997
|
reactNative.Pressable,
|
|
2759
2998
|
{
|
|
@@ -2765,11 +3004,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
|
|
|
2765
3004
|
hitSlop: 6,
|
|
2766
3005
|
accessibilityRole: "button",
|
|
2767
3006
|
accessibilityLabel: `Remove ${option.label}`,
|
|
2768
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
3007
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.chipRemove, children: "\xD7" })
|
|
2769
3008
|
}
|
|
2770
3009
|
)
|
|
2771
3010
|
] }, option.value)),
|
|
2772
|
-
hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
3011
|
+
hasOverflow ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.ellipsis, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.ellipsisText, children: "..." }) }) : null
|
|
2773
3012
|
] })
|
|
2774
3013
|
] });
|
|
2775
3014
|
}
|
|
@@ -2980,7 +3219,7 @@ var Select = react.forwardRef(
|
|
|
2980
3219
|
const leftIconNode = leftIcon ?? /* @__PURE__ */ jsxRuntime.jsx(
|
|
2981
3220
|
UserIcon,
|
|
2982
3221
|
{
|
|
2983
|
-
size:
|
|
3222
|
+
size: ICON_SIZE7,
|
|
2984
3223
|
color: error ? colors.red : isOpen ? colors.primary : colors.grey100
|
|
2985
3224
|
}
|
|
2986
3225
|
);
|
|
@@ -2996,11 +3235,11 @@ var Select = react.forwardRef(
|
|
|
2996
3235
|
{
|
|
2997
3236
|
...rest,
|
|
2998
3237
|
ref: setRootRef,
|
|
2999
|
-
style: [
|
|
3238
|
+
style: [styles12.root, isOpen && styles12.rootOpen, disabled && styles12.disabled, style],
|
|
3000
3239
|
accessibilityState: { disabled, expanded: isOpen },
|
|
3001
3240
|
children: [
|
|
3002
|
-
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3003
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [
|
|
3241
|
+
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.label, { color: labelColor }], children: label }) : null,
|
|
3242
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles12.triggerWrap, isOpen && styles12.triggerWrapOpen], children: [
|
|
3004
3243
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3005
3244
|
reactNative.Pressable,
|
|
3006
3245
|
{
|
|
@@ -3011,29 +3250,29 @@ var Select = react.forwardRef(
|
|
|
3011
3250
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
3012
3251
|
accessibilityState: { disabled, expanded: isOpen },
|
|
3013
3252
|
style: [
|
|
3014
|
-
|
|
3253
|
+
styles12.trigger,
|
|
3015
3254
|
{
|
|
3016
3255
|
borderColor: triggerBorderColor,
|
|
3017
3256
|
backgroundColor: colors.grey700
|
|
3018
3257
|
}
|
|
3019
3258
|
],
|
|
3020
3259
|
children: [
|
|
3021
|
-
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
3022
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
3260
|
+
hasLeftIcon ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.iconSlot, children: leftIconNode }) : null,
|
|
3261
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
3023
3262
|
MultiValueChips,
|
|
3024
3263
|
{
|
|
3025
3264
|
options: selectedOptions,
|
|
3026
3265
|
disabled,
|
|
3027
3266
|
onRemove: handleRemoveChip
|
|
3028
3267
|
}
|
|
3029
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3030
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [
|
|
3268
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
|
|
3269
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles12.iconSlot, isOpen && styles12.chevronOpen], children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: ICON_SIZE7, color: isOpen ? colors.primary : colors.grey100 }) })
|
|
3031
3270
|
]
|
|
3032
3271
|
}
|
|
3033
3272
|
),
|
|
3034
|
-
isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
3035
|
-
showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
3036
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
3273
|
+
isOpen ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.menu, children: [
|
|
3274
|
+
showSearch ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles12.searchField, children: [
|
|
3275
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { size: ICON_SIZE7, color: colors.grey100 }) }),
|
|
3037
3276
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3038
3277
|
reactNative.TextInput,
|
|
3039
3278
|
{
|
|
@@ -3044,9 +3283,9 @@ var Select = react.forwardRef(
|
|
|
3044
3283
|
placeholder: searchPlaceholder,
|
|
3045
3284
|
placeholderTextColor: colors.grey100,
|
|
3046
3285
|
style: [
|
|
3047
|
-
|
|
3048
|
-
reactNative.Platform.OS === "web" ?
|
|
3049
|
-
reactNative.Platform.OS === "android" ?
|
|
3286
|
+
styles12.searchInput,
|
|
3287
|
+
reactNative.Platform.OS === "web" ? styles12.searchInputWeb : null,
|
|
3288
|
+
reactNative.Platform.OS === "android" ? styles12.searchInputAndroid : null
|
|
3050
3289
|
],
|
|
3051
3290
|
accessibilityLabel: searchPlaceholder
|
|
3052
3291
|
}
|
|
@@ -3055,12 +3294,12 @@ var Select = react.forwardRef(
|
|
|
3055
3294
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3056
3295
|
reactNative.ScrollView,
|
|
3057
3296
|
{
|
|
3058
|
-
style:
|
|
3059
|
-
contentContainerStyle:
|
|
3297
|
+
style: styles12.optionList,
|
|
3298
|
+
contentContainerStyle: styles12.optionListContent,
|
|
3060
3299
|
keyboardShouldPersistTaps: "handled",
|
|
3061
3300
|
showsVerticalScrollIndicator: false,
|
|
3062
3301
|
children: [
|
|
3063
|
-
loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
3302
|
+
loading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles12.statusRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.statusText, children: emptyText }) }) : null,
|
|
3064
3303
|
!loading && filteredOptions.map((option) => {
|
|
3065
3304
|
const isSelected = selectedValues.includes(option.value);
|
|
3066
3305
|
const isHovered = hoveredValue === option.value;
|
|
@@ -3077,14 +3316,14 @@ var Select = react.forwardRef(
|
|
|
3077
3316
|
accessibilityRole: multiple ? "checkbox" : "button",
|
|
3078
3317
|
accessibilityState: { selected: isSelected, checked: isSelected, disabled },
|
|
3079
3318
|
style: [
|
|
3080
|
-
|
|
3319
|
+
styles12.item,
|
|
3081
3320
|
{
|
|
3082
3321
|
backgroundColor: itemBackground(visualState)
|
|
3083
3322
|
}
|
|
3084
3323
|
],
|
|
3085
3324
|
children: [
|
|
3086
|
-
multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style:
|
|
3087
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style:
|
|
3325
|
+
multiple ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "none", style: styles12.itemCheckbox, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
|
|
3326
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles12.itemLabel, numberOfLines: 1, children: option.label })
|
|
3088
3327
|
]
|
|
3089
3328
|
},
|
|
3090
3329
|
option.value
|
|
@@ -3095,13 +3334,13 @@ var Select = react.forwardRef(
|
|
|
3095
3334
|
)
|
|
3096
3335
|
] }) : null
|
|
3097
3336
|
] }),
|
|
3098
|
-
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3337
|
+
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles12.hint, { color: hintColor }], children: hint }) : null
|
|
3099
3338
|
]
|
|
3100
3339
|
}
|
|
3101
3340
|
);
|
|
3102
3341
|
}
|
|
3103
3342
|
);
|
|
3104
|
-
var
|
|
3343
|
+
var styles12 = reactNative.StyleSheet.create({
|
|
3105
3344
|
root: {
|
|
3106
3345
|
width: DEFAULT_WIDTH3,
|
|
3107
3346
|
gap: 8,
|
|
@@ -3191,8 +3430,8 @@ var styles11 = reactNative.StyleSheet.create({
|
|
|
3191
3430
|
lineHeight: 16
|
|
3192
3431
|
},
|
|
3193
3432
|
iconSlot: {
|
|
3194
|
-
width:
|
|
3195
|
-
height:
|
|
3433
|
+
width: ICON_SIZE7,
|
|
3434
|
+
height: ICON_SIZE7,
|
|
3196
3435
|
alignItems: "center",
|
|
3197
3436
|
justifyContent: "center",
|
|
3198
3437
|
flexShrink: 0
|
|
@@ -3363,13 +3602,13 @@ var Textarea = react.forwardRef(function Textarea2({
|
|
|
3363
3602
|
const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
|
|
3364
3603
|
useApplyWebClassName(rootRef, className);
|
|
3365
3604
|
useApplyWebClassName(inputRef, inputClassName);
|
|
3366
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [
|
|
3367
|
-
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3605
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: rootRef, style: [styles13.root, disabled && styles13.disabled, style], children: [
|
|
3606
|
+
showLabel && label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles13.label, { color: chrome.labelColor }], children: label }) : null,
|
|
3368
3607
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3369
3608
|
reactNative.View,
|
|
3370
3609
|
{
|
|
3371
3610
|
style: [
|
|
3372
|
-
|
|
3611
|
+
styles13.field,
|
|
3373
3612
|
{
|
|
3374
3613
|
borderColor: chrome.borderColor,
|
|
3375
3614
|
backgroundColor: chrome.backgroundColor
|
|
@@ -3401,11 +3640,11 @@ var Textarea = react.forwardRef(function Textarea2({
|
|
|
3401
3640
|
onBlur?.(event);
|
|
3402
3641
|
},
|
|
3403
3642
|
style: [
|
|
3404
|
-
|
|
3643
|
+
styles13.input,
|
|
3405
3644
|
textareaTypography.field,
|
|
3406
3645
|
{ color: chrome.textColor },
|
|
3407
|
-
reactNative.Platform.OS === "web" ?
|
|
3408
|
-
reactNative.Platform.OS === "android" ?
|
|
3646
|
+
reactNative.Platform.OS === "web" ? styles13.inputWeb : null,
|
|
3647
|
+
reactNative.Platform.OS === "android" ? styles13.inputAndroid : null,
|
|
3409
3648
|
inputStyle
|
|
3410
3649
|
],
|
|
3411
3650
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
@@ -3414,10 +3653,10 @@ var Textarea = react.forwardRef(function Textarea2({
|
|
|
3414
3653
|
)
|
|
3415
3654
|
}
|
|
3416
3655
|
),
|
|
3417
|
-
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3656
|
+
showHint && hint ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles13.hint, { color: chrome.hintColor }], children: hint }) : null
|
|
3418
3657
|
] });
|
|
3419
3658
|
});
|
|
3420
|
-
var
|
|
3659
|
+
var styles13 = reactNative.StyleSheet.create({
|
|
3421
3660
|
root: {
|
|
3422
3661
|
width: DEFAULT_WIDTH4,
|
|
3423
3662
|
gap: 8,
|
|
@@ -3517,13 +3756,13 @@ var Toggle = react.forwardRef(function Toggle2({
|
|
|
3517
3756
|
accessibilityRole: "switch",
|
|
3518
3757
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
3519
3758
|
accessibilityState: { checked: isActive, disabled },
|
|
3520
|
-
style: [
|
|
3759
|
+
style: [styles14.pressable, disabled && styles14.disabled, style],
|
|
3521
3760
|
children: [
|
|
3522
3761
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3523
3762
|
reactNative.Animated.View,
|
|
3524
3763
|
{
|
|
3525
3764
|
style: [
|
|
3526
|
-
|
|
3765
|
+
styles14.track,
|
|
3527
3766
|
{
|
|
3528
3767
|
backgroundColor: trackBackgroundColor
|
|
3529
3768
|
}
|
|
@@ -3532,7 +3771,7 @@ var Toggle = react.forwardRef(function Toggle2({
|
|
|
3532
3771
|
reactNative.Animated.View,
|
|
3533
3772
|
{
|
|
3534
3773
|
style: [
|
|
3535
|
-
|
|
3774
|
+
styles14.thumb,
|
|
3536
3775
|
{
|
|
3537
3776
|
transform: [{ translateX: thumbTranslateX }]
|
|
3538
3777
|
}
|
|
@@ -3541,12 +3780,12 @@ var Toggle = react.forwardRef(function Toggle2({
|
|
|
3541
3780
|
)
|
|
3542
3781
|
}
|
|
3543
3782
|
),
|
|
3544
|
-
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [
|
|
3783
|
+
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles14.label, labelStyle], children: labelContent }) : labelContent : null
|
|
3545
3784
|
]
|
|
3546
3785
|
}
|
|
3547
3786
|
);
|
|
3548
3787
|
});
|
|
3549
|
-
var
|
|
3788
|
+
var styles14 = reactNative.StyleSheet.create({
|
|
3550
3789
|
pressable: {
|
|
3551
3790
|
flexDirection: "row",
|
|
3552
3791
|
alignItems: "center",
|
|
@@ -3621,21 +3860,21 @@ var RatingInput = react.forwardRef(
|
|
|
3621
3860
|
{
|
|
3622
3861
|
...rest,
|
|
3623
3862
|
ref: setContainerRef,
|
|
3624
|
-
style: [
|
|
3863
|
+
style: [styles15.root, disabled && styles15.disabled, style],
|
|
3625
3864
|
children: [
|
|
3626
|
-
showValue ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [
|
|
3865
|
+
showValue ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [styles15.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
|
|
3627
3866
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3628
3867
|
reactNative.View,
|
|
3629
3868
|
{
|
|
3630
3869
|
accessibilityRole: readOnly ? "image" : "radiogroup",
|
|
3631
3870
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
3632
3871
|
accessibilityState: { disabled },
|
|
3633
|
-
style: [
|
|
3872
|
+
style: [styles15.stars, { gap: resolvedStarGap }],
|
|
3634
3873
|
children: Array.from({ length: STAR_COUNT }, (_, index) => {
|
|
3635
3874
|
const starValue = index + 1;
|
|
3636
3875
|
const isSelected = starValue <= selectedStarCount;
|
|
3637
3876
|
const icon = isSelected ? /* @__PURE__ */ jsxRuntime.jsx(StarFilledIcon, { size: iconWidth, height: iconHeight }) : /* @__PURE__ */ jsxRuntime.jsx(StarIcon, { size: iconWidth, height: iconHeight });
|
|
3638
|
-
const itemStyle = [
|
|
3877
|
+
const itemStyle = [styles15.starItem, { width: size, height: size }];
|
|
3639
3878
|
if (readOnly) {
|
|
3640
3879
|
return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: itemStyle, children: icon }, starValue);
|
|
3641
3880
|
}
|
|
@@ -3661,7 +3900,7 @@ var RatingInput = react.forwardRef(
|
|
|
3661
3900
|
);
|
|
3662
3901
|
}
|
|
3663
3902
|
);
|
|
3664
|
-
var
|
|
3903
|
+
var styles15 = reactNative.StyleSheet.create({
|
|
3665
3904
|
root: {
|
|
3666
3905
|
flexDirection: "row",
|
|
3667
3906
|
alignItems: "center",
|
|
@@ -3725,19 +3964,19 @@ var CommentCard = react.forwardRef(
|
|
|
3725
3964
|
setExpanded(next);
|
|
3726
3965
|
onExpandedChange?.(next);
|
|
3727
3966
|
};
|
|
3728
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [
|
|
3729
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
3730
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style:
|
|
3967
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [styles16.root, style], children: [
|
|
3968
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles16.header, children: [
|
|
3969
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles16.avatar, children: hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
3731
3970
|
reactNative.Image,
|
|
3732
3971
|
{
|
|
3733
3972
|
source: { uri: imageUrl ?? void 0 },
|
|
3734
|
-
style:
|
|
3973
|
+
style: styles16.avatarImage,
|
|
3735
3974
|
onError: () => setImageFailed(true)
|
|
3736
3975
|
}
|
|
3737
3976
|
) : /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { size: 20, color: colors.primary }) }),
|
|
3738
|
-
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style:
|
|
3739
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style:
|
|
3740
|
-
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style:
|
|
3977
|
+
/* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles16.identity, children: [
|
|
3978
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles16.name, children: userName }),
|
|
3979
|
+
/* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles16.date, children: date })
|
|
3741
3980
|
] }),
|
|
3742
3981
|
/* @__PURE__ */ jsxRuntime.jsx(RatingInput, { value: rating, readOnly: true, showValue: false, size: 16 })
|
|
3743
3982
|
] }),
|
|
@@ -3745,7 +3984,7 @@ var CommentCard = react.forwardRef(
|
|
|
3745
3984
|
reactNative.Text,
|
|
3746
3985
|
{
|
|
3747
3986
|
numberOfLines: expanded ? void 0 : maxCommentLines,
|
|
3748
|
-
style: [
|
|
3987
|
+
style: [styles16.comment, commentStyle],
|
|
3749
3988
|
children: commentText
|
|
3750
3989
|
}
|
|
3751
3990
|
),
|
|
@@ -3758,14 +3997,14 @@ var CommentCard = react.forwardRef(
|
|
|
3758
3997
|
hitSlop: 6,
|
|
3759
3998
|
onHoverIn: () => setActionHovered(true),
|
|
3760
3999
|
onHoverOut: () => setActionHovered(false),
|
|
3761
|
-
style:
|
|
4000
|
+
style: styles16.action,
|
|
3762
4001
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3763
4002
|
reactNative.Text,
|
|
3764
4003
|
{
|
|
3765
4004
|
style: [
|
|
3766
|
-
|
|
3767
|
-
expanded &&
|
|
3768
|
-
actionHovered && (expanded ?
|
|
4005
|
+
styles16.actionText,
|
|
4006
|
+
expanded && styles16.closeActionText,
|
|
4007
|
+
actionHovered && (expanded ? styles16.closeActionTextHovered : styles16.openActionTextHovered)
|
|
3769
4008
|
],
|
|
3770
4009
|
children: expanded ? readLessLabel : readMoreLabel
|
|
3771
4010
|
}
|
|
@@ -3775,7 +4014,7 @@ var CommentCard = react.forwardRef(
|
|
|
3775
4014
|
] });
|
|
3776
4015
|
}
|
|
3777
4016
|
);
|
|
3778
|
-
var
|
|
4017
|
+
var styles16 = reactNative.StyleSheet.create({
|
|
3779
4018
|
root: {
|
|
3780
4019
|
width: CARD_WIDTH,
|
|
3781
4020
|
minHeight: CARD_MIN_HEIGHT,
|
|
@@ -3861,6 +4100,7 @@ exports.CommentCard = CommentCard;
|
|
|
3861
4100
|
exports.Counter = Counter;
|
|
3862
4101
|
exports.DatePicker = DatePicker;
|
|
3863
4102
|
exports.FacebookIcon = FacebookIcon;
|
|
4103
|
+
exports.GlobeIcon = GlobeIcon;
|
|
3864
4104
|
exports.HeartIcon = HeartIcon;
|
|
3865
4105
|
exports.HelpCircleIcon = HelpCircleIcon;
|
|
3866
4106
|
exports.HomeIcon = HomeIcon;
|
|
@@ -3868,6 +4108,7 @@ exports.Icon = Icon;
|
|
|
3868
4108
|
exports.Input = Input;
|
|
3869
4109
|
exports.InstagramIcon = InstagramIcon;
|
|
3870
4110
|
exports.KeyIcon = KeyIcon;
|
|
4111
|
+
exports.LanguageSwitcher = LanguageSwitcher;
|
|
3871
4112
|
exports.LayoutGridIcon = LayoutGridIcon;
|
|
3872
4113
|
exports.LinkedInIcon = LinkedInIcon;
|
|
3873
4114
|
exports.LogOutIcon = LogOutIcon;
|
|
@@ -3899,6 +4140,7 @@ exports.colors = colors;
|
|
|
3899
4140
|
exports.commentCardTypography = commentCardTypography;
|
|
3900
4141
|
exports.counterTypography = counterTypography;
|
|
3901
4142
|
exports.datePickerTypography = datePickerTypography;
|
|
4143
|
+
exports.defaultLanguageOptions = defaultLanguageOptions;
|
|
3902
4144
|
exports.fonts = fonts;
|
|
3903
4145
|
exports.getIconsByGroup = getIconsByGroup;
|
|
3904
4146
|
exports.grey = grey;
|
|
@@ -3907,6 +4149,7 @@ exports.iconGroups = iconGroups;
|
|
|
3907
4149
|
exports.iconNames = iconNames;
|
|
3908
4150
|
exports.icons = icons;
|
|
3909
4151
|
exports.inputTypography = inputTypography;
|
|
4152
|
+
exports.languageSwitcherTypography = languageSwitcherTypography;
|
|
3910
4153
|
exports.ratingTypography = ratingTypography;
|
|
3911
4154
|
exports.segmentedToggleTypography = segmentedToggleTypography;
|
|
3912
4155
|
exports.selectTypography = selectTypography;
|