@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.js
CHANGED
|
@@ -101,6 +101,13 @@ var segmentedToggleTypography = {
|
|
|
101
101
|
lineHeight: 14,
|
|
102
102
|
letterSpacing: 0
|
|
103
103
|
};
|
|
104
|
+
var languageSwitcherTypography = {
|
|
105
|
+
fontFamily: fonts.sans,
|
|
106
|
+
fontSize: 14,
|
|
107
|
+
fontWeight: "600",
|
|
108
|
+
lineHeight: 19,
|
|
109
|
+
letterSpacing: 0
|
|
110
|
+
};
|
|
104
111
|
var counterTypography = {
|
|
105
112
|
fontFamily: fonts.sans,
|
|
106
113
|
fontSize: 14,
|
|
@@ -482,6 +489,21 @@ function HeartIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }) {
|
|
|
482
489
|
) });
|
|
483
490
|
}
|
|
484
491
|
|
|
492
|
+
// src/icons/Globe/globePath.ts
|
|
493
|
+
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";
|
|
494
|
+
function GlobeIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
|
|
495
|
+
return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
|
|
496
|
+
Path,
|
|
497
|
+
{
|
|
498
|
+
d: GLOBE_PATH,
|
|
499
|
+
stroke: color,
|
|
500
|
+
strokeWidth,
|
|
501
|
+
strokeLinecap: "round",
|
|
502
|
+
strokeLinejoin: "round"
|
|
503
|
+
}
|
|
504
|
+
) });
|
|
505
|
+
}
|
|
506
|
+
|
|
485
507
|
// src/icons/HelpCircle/helpCirclePath.ts
|
|
486
508
|
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";
|
|
487
509
|
function HelpCircleIcon({
|
|
@@ -839,6 +861,7 @@ var icons = {
|
|
|
839
861
|
clock: ClockIcon,
|
|
840
862
|
facebook: FacebookIcon,
|
|
841
863
|
heart: HeartIcon,
|
|
864
|
+
globe: GlobeIcon,
|
|
842
865
|
helpCircle: HelpCircleIcon,
|
|
843
866
|
home: HomeIcon,
|
|
844
867
|
instagram: InstagramIcon,
|
|
@@ -883,7 +906,7 @@ var iconGroups = {
|
|
|
883
906
|
objects: ["bag", "building", "clock", "user", "usersAlt", "video"],
|
|
884
907
|
communication: ["mail", "phone"],
|
|
885
908
|
social: ["facebook", "instagram", "linkedin"],
|
|
886
|
-
interface: ["layoutGrid", "sidebar", "settings", "helpCircle", "logOut"]
|
|
909
|
+
interface: ["globe", "layoutGrid", "sidebar", "settings", "helpCircle", "logOut"]
|
|
887
910
|
};
|
|
888
911
|
var iconGroupNames = Object.keys(iconGroups);
|
|
889
912
|
function getIconsByGroup(group) {
|
|
@@ -1612,7 +1635,223 @@ var styles5 = StyleSheet.create({
|
|
|
1612
1635
|
flexShrink: 1
|
|
1613
1636
|
}
|
|
1614
1637
|
});
|
|
1615
|
-
var
|
|
1638
|
+
var defaultLanguageOptions = [
|
|
1639
|
+
{ value: "hy", label: "\u0540\u0561\u0575" },
|
|
1640
|
+
{ value: "en", label: "Eng" },
|
|
1641
|
+
{ value: "ru", label: "\u0420\u0443\u0441" }
|
|
1642
|
+
];
|
|
1643
|
+
var CONTROL_WIDTH = 90;
|
|
1644
|
+
var CONTROL_HEIGHT = 35;
|
|
1645
|
+
var ICON_SIZE4 = 16;
|
|
1646
|
+
var LanguageSwitcher = forwardRef(
|
|
1647
|
+
function LanguageSwitcher2({
|
|
1648
|
+
options = defaultLanguageOptions,
|
|
1649
|
+
value,
|
|
1650
|
+
defaultValue,
|
|
1651
|
+
onValueChange,
|
|
1652
|
+
open: openProp,
|
|
1653
|
+
defaultOpen = false,
|
|
1654
|
+
onOpenChange,
|
|
1655
|
+
disabled = false,
|
|
1656
|
+
accessibilityLabel = "Language",
|
|
1657
|
+
style,
|
|
1658
|
+
className,
|
|
1659
|
+
hitSlop = 8,
|
|
1660
|
+
...rest
|
|
1661
|
+
}, forwardedRef) {
|
|
1662
|
+
const wrapperRef = useRef(null);
|
|
1663
|
+
const triggerRef = useRef(null);
|
|
1664
|
+
const setWrapperRef = useMemo(() => mergeRefs(wrapperRef, forwardedRef), [forwardedRef]);
|
|
1665
|
+
const firstValue = options[0]?.value ?? "";
|
|
1666
|
+
const isValueControlled = value !== void 0;
|
|
1667
|
+
const isOpenControlled = openProp !== void 0;
|
|
1668
|
+
const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? firstValue);
|
|
1669
|
+
const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
|
|
1670
|
+
const [triggerHovered, setTriggerHovered] = useState(false);
|
|
1671
|
+
const [hoveredValue, setHoveredValue] = useState(null);
|
|
1672
|
+
const selectedValue = isValueControlled ? value : uncontrolledValue;
|
|
1673
|
+
const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
|
|
1674
|
+
const selectedOption = options.find((option) => option.value === selectedValue) ?? options[0] ?? null;
|
|
1675
|
+
useApplyWebClassName(wrapperRef, className?.trim() || void 0);
|
|
1676
|
+
const setOpen = useCallback(
|
|
1677
|
+
(next) => {
|
|
1678
|
+
if (disabled || next === isOpen) return;
|
|
1679
|
+
if (!isOpenControlled) setUncontrolledOpen(next);
|
|
1680
|
+
onOpenChange?.(next);
|
|
1681
|
+
},
|
|
1682
|
+
[disabled, isOpen, isOpenControlled, onOpenChange]
|
|
1683
|
+
);
|
|
1684
|
+
const closeAndFocusTrigger = useCallback(() => {
|
|
1685
|
+
setOpen(false);
|
|
1686
|
+
const node = triggerRef.current;
|
|
1687
|
+
node?.focus?.();
|
|
1688
|
+
}, [setOpen]);
|
|
1689
|
+
useEffect(() => {
|
|
1690
|
+
if (Platform.OS !== "web" || !isOpen) return;
|
|
1691
|
+
const handlePointerDown = (event) => {
|
|
1692
|
+
const wrapper = wrapperRef.current;
|
|
1693
|
+
const target = event.target;
|
|
1694
|
+
if (wrapper?.contains && target instanceof Node && !wrapper.contains(target)) {
|
|
1695
|
+
setOpen(false);
|
|
1696
|
+
}
|
|
1697
|
+
};
|
|
1698
|
+
const handleKeyDown = (event) => {
|
|
1699
|
+
if (event.key === "Escape") {
|
|
1700
|
+
event.preventDefault();
|
|
1701
|
+
closeAndFocusTrigger();
|
|
1702
|
+
}
|
|
1703
|
+
};
|
|
1704
|
+
document.addEventListener("mousedown", handlePointerDown);
|
|
1705
|
+
document.addEventListener("touchstart", handlePointerDown);
|
|
1706
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
1707
|
+
return () => {
|
|
1708
|
+
document.removeEventListener("mousedown", handlePointerDown);
|
|
1709
|
+
document.removeEventListener("touchstart", handlePointerDown);
|
|
1710
|
+
document.removeEventListener("keydown", handleKeyDown);
|
|
1711
|
+
};
|
|
1712
|
+
}, [closeAndFocusTrigger, isOpen, setOpen]);
|
|
1713
|
+
const selectLanguage = (nextValue) => {
|
|
1714
|
+
if (nextValue !== selectedValue) {
|
|
1715
|
+
if (!isValueControlled) setUncontrolledValue(nextValue);
|
|
1716
|
+
onValueChange?.(nextValue);
|
|
1717
|
+
}
|
|
1718
|
+
closeAndFocusTrigger();
|
|
1719
|
+
};
|
|
1720
|
+
return /* @__PURE__ */ jsxs(
|
|
1721
|
+
View,
|
|
1722
|
+
{
|
|
1723
|
+
...rest,
|
|
1724
|
+
ref: setWrapperRef,
|
|
1725
|
+
style: [styles6.wrapper, isOpen && styles6.wrapperOpen, disabled && styles6.disabled, style],
|
|
1726
|
+
children: [
|
|
1727
|
+
/* @__PURE__ */ jsxs(
|
|
1728
|
+
Pressable,
|
|
1729
|
+
{
|
|
1730
|
+
ref: triggerRef,
|
|
1731
|
+
onPress: () => setOpen(!isOpen),
|
|
1732
|
+
disabled: disabled || options.length === 0,
|
|
1733
|
+
hitSlop,
|
|
1734
|
+
accessibilityRole: "button",
|
|
1735
|
+
accessibilityLabel,
|
|
1736
|
+
accessibilityState: { disabled, expanded: isOpen },
|
|
1737
|
+
onHoverIn: () => setTriggerHovered(true),
|
|
1738
|
+
onHoverOut: () => setTriggerHovered(false),
|
|
1739
|
+
style: ({ pressed }) => [
|
|
1740
|
+
styles6.trigger,
|
|
1741
|
+
(triggerHovered || pressed || isOpen) && styles6.triggerActive
|
|
1742
|
+
],
|
|
1743
|
+
children: [
|
|
1744
|
+
/* @__PURE__ */ jsx(GlobeIcon, { size: ICON_SIZE4, color: colors.white, strokeWidth: 2 }),
|
|
1745
|
+
/* @__PURE__ */ jsx(Text, { style: styles6.triggerLabel, numberOfLines: 1, children: selectedOption?.label ?? "" }),
|
|
1746
|
+
/* @__PURE__ */ jsx(View, { style: [styles6.chevron, isOpen && styles6.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE4, color: colors.white, strokeWidth: 2 }) })
|
|
1747
|
+
]
|
|
1748
|
+
}
|
|
1749
|
+
),
|
|
1750
|
+
isOpen && options.length > 0 ? /* @__PURE__ */ jsx(View, { style: styles6.menu, accessibilityRole: "menu", children: options.map((option) => {
|
|
1751
|
+
const selected = option.value === selectedValue;
|
|
1752
|
+
return /* @__PURE__ */ jsx(
|
|
1753
|
+
Pressable,
|
|
1754
|
+
{
|
|
1755
|
+
onPress: () => selectLanguage(option.value),
|
|
1756
|
+
accessibilityRole: "menuitem",
|
|
1757
|
+
accessibilityLabel: option.label,
|
|
1758
|
+
accessibilityState: { selected },
|
|
1759
|
+
onHoverIn: () => setHoveredValue(option.value),
|
|
1760
|
+
onHoverOut: () => setHoveredValue(null),
|
|
1761
|
+
style: ({ pressed }) => [
|
|
1762
|
+
styles6.item,
|
|
1763
|
+
selected ? styles6.itemSelected : (hoveredValue === option.value || pressed) && styles6.itemHovered
|
|
1764
|
+
],
|
|
1765
|
+
children: /* @__PURE__ */ jsx(Text, { style: [styles6.itemLabel, selected && styles6.itemLabelSelected], children: option.label })
|
|
1766
|
+
},
|
|
1767
|
+
option.value
|
|
1768
|
+
);
|
|
1769
|
+
}) }) : null
|
|
1770
|
+
]
|
|
1771
|
+
}
|
|
1772
|
+
);
|
|
1773
|
+
}
|
|
1774
|
+
);
|
|
1775
|
+
var styles6 = StyleSheet.create({
|
|
1776
|
+
wrapper: {
|
|
1777
|
+
position: "relative",
|
|
1778
|
+
width: CONTROL_WIDTH,
|
|
1779
|
+
alignSelf: "flex-start"
|
|
1780
|
+
},
|
|
1781
|
+
wrapperOpen: {
|
|
1782
|
+
zIndex: 20
|
|
1783
|
+
},
|
|
1784
|
+
disabled: {
|
|
1785
|
+
opacity: 0.6
|
|
1786
|
+
},
|
|
1787
|
+
trigger: {
|
|
1788
|
+
width: CONTROL_WIDTH,
|
|
1789
|
+
height: CONTROL_HEIGHT,
|
|
1790
|
+
flexDirection: "row",
|
|
1791
|
+
alignItems: "center",
|
|
1792
|
+
gap: 8,
|
|
1793
|
+
padding: 8,
|
|
1794
|
+
borderRadius: 12,
|
|
1795
|
+
backgroundColor: "transparent"
|
|
1796
|
+
},
|
|
1797
|
+
triggerActive: {
|
|
1798
|
+
backgroundColor: colors.grey700
|
|
1799
|
+
},
|
|
1800
|
+
triggerLabel: {
|
|
1801
|
+
...languageSwitcherTypography,
|
|
1802
|
+
...Platform.select({ web: { fontFamily: `${fonts.sans}, sans-serif` } }),
|
|
1803
|
+
minWidth: 0,
|
|
1804
|
+
flex: 1,
|
|
1805
|
+
color: colors.white
|
|
1806
|
+
},
|
|
1807
|
+
chevron: {
|
|
1808
|
+
width: ICON_SIZE4,
|
|
1809
|
+
height: ICON_SIZE4,
|
|
1810
|
+
flexShrink: 0,
|
|
1811
|
+
alignItems: "center",
|
|
1812
|
+
justifyContent: "center"
|
|
1813
|
+
},
|
|
1814
|
+
chevronOpen: {
|
|
1815
|
+
transform: [{ rotate: "180deg" }]
|
|
1816
|
+
},
|
|
1817
|
+
menu: {
|
|
1818
|
+
position: "absolute",
|
|
1819
|
+
top: CONTROL_HEIGHT + 8,
|
|
1820
|
+
left: 0,
|
|
1821
|
+
width: CONTROL_WIDTH,
|
|
1822
|
+
padding: 8,
|
|
1823
|
+
gap: 8,
|
|
1824
|
+
borderRadius: 12,
|
|
1825
|
+
backgroundColor: colors.grey700,
|
|
1826
|
+
...Platform.select({
|
|
1827
|
+
web: { boxShadow: `0 8px 24px ${colors.black}73` },
|
|
1828
|
+
default: { elevation: 8 }
|
|
1829
|
+
})
|
|
1830
|
+
},
|
|
1831
|
+
item: {
|
|
1832
|
+
height: CONTROL_HEIGHT,
|
|
1833
|
+
alignItems: "center",
|
|
1834
|
+
justifyContent: "center",
|
|
1835
|
+
paddingVertical: 8,
|
|
1836
|
+
paddingHorizontal: 12,
|
|
1837
|
+
borderRadius: 8
|
|
1838
|
+
},
|
|
1839
|
+
itemHovered: {
|
|
1840
|
+
backgroundColor: colors.whiteAlpha5
|
|
1841
|
+
},
|
|
1842
|
+
itemSelected: {
|
|
1843
|
+
backgroundColor: colors.primaryMuted
|
|
1844
|
+
},
|
|
1845
|
+
itemLabel: {
|
|
1846
|
+
...languageSwitcherTypography,
|
|
1847
|
+
...Platform.select({ web: { fontFamily: `${fonts.sans}, sans-serif` } }),
|
|
1848
|
+
color: colors.white
|
|
1849
|
+
},
|
|
1850
|
+
itemLabelSelected: {
|
|
1851
|
+
color: colors.primary
|
|
1852
|
+
}
|
|
1853
|
+
});
|
|
1854
|
+
var ICON_SIZE5 = 28;
|
|
1616
1855
|
var StatCard = forwardRef(function StatCard2({ label, icon: Icon2, style, className, accessibilityLabel, ...rest }, forwardedRef) {
|
|
1617
1856
|
const containerRef = useRef(null);
|
|
1618
1857
|
const resolvedClassName = className?.trim() || void 0;
|
|
@@ -1623,17 +1862,17 @@ var StatCard = forwardRef(function StatCard2({ label, icon: Icon2, style, classN
|
|
|
1623
1862
|
{
|
|
1624
1863
|
...rest,
|
|
1625
1864
|
ref: setContainerRef,
|
|
1626
|
-
style: [
|
|
1865
|
+
style: [styles7.base, style],
|
|
1627
1866
|
accessibilityRole: "text",
|
|
1628
1867
|
accessibilityLabel: accessibilityLabel ?? label,
|
|
1629
1868
|
children: [
|
|
1630
|
-
/* @__PURE__ */ jsx(Icon2, { size:
|
|
1631
|
-
/* @__PURE__ */ jsx(Text, { style:
|
|
1869
|
+
/* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE5, color: colors.white }),
|
|
1870
|
+
/* @__PURE__ */ jsx(Text, { style: styles7.label, children: label })
|
|
1632
1871
|
]
|
|
1633
1872
|
}
|
|
1634
1873
|
);
|
|
1635
1874
|
});
|
|
1636
|
-
var
|
|
1875
|
+
var styles7 = StyleSheet.create({
|
|
1637
1876
|
base: {
|
|
1638
1877
|
width: 204.5,
|
|
1639
1878
|
minHeight: 114,
|
|
@@ -1719,7 +1958,7 @@ var Button = forwardRef(
|
|
|
1719
1958
|
useApplyWebClassName(textRef, textClassName);
|
|
1720
1959
|
const iconNode = customIcon ?? /* @__PURE__ */ jsx(ArrowRightIcon, { size: metrics.iconSize, color: preset.iconColor });
|
|
1721
1960
|
const containerStyle = [
|
|
1722
|
-
|
|
1961
|
+
styles8.base,
|
|
1723
1962
|
{
|
|
1724
1963
|
minHeight: metrics.minHeight,
|
|
1725
1964
|
borderRadius: metrics.borderRadius,
|
|
@@ -1730,15 +1969,15 @@ var Button = forwardRef(
|
|
|
1730
1969
|
paddingRight: hasIcon ? metrics.paddingRightWithIcon : metrics.paddingRight,
|
|
1731
1970
|
gap: hasIcon ? metrics.gap : 0
|
|
1732
1971
|
},
|
|
1733
|
-
disabled &&
|
|
1972
|
+
disabled && styles8.disabled,
|
|
1734
1973
|
style
|
|
1735
1974
|
];
|
|
1736
1975
|
const labelStyle = [
|
|
1737
|
-
|
|
1976
|
+
styles8.label,
|
|
1738
1977
|
metrics.text,
|
|
1739
1978
|
{ color: preset.textColor },
|
|
1740
|
-
Platform.OS === "android" ?
|
|
1741
|
-
!hasIcon &&
|
|
1979
|
+
Platform.OS === "android" ? styles8.labelAndroid : null,
|
|
1980
|
+
!hasIcon && styles8.labelCentered,
|
|
1742
1981
|
textStyle
|
|
1743
1982
|
];
|
|
1744
1983
|
return /* @__PURE__ */ jsxs(
|
|
@@ -1759,7 +1998,7 @@ var Button = forwardRef(
|
|
|
1759
1998
|
View,
|
|
1760
1999
|
{
|
|
1761
2000
|
style: [
|
|
1762
|
-
|
|
2001
|
+
styles8.iconContainer,
|
|
1763
2002
|
{
|
|
1764
2003
|
width: metrics.iconContainerSize,
|
|
1765
2004
|
height: metrics.iconContainerSize,
|
|
@@ -1775,7 +2014,7 @@ var Button = forwardRef(
|
|
|
1775
2014
|
);
|
|
1776
2015
|
}
|
|
1777
2016
|
);
|
|
1778
|
-
var
|
|
2017
|
+
var styles8 = StyleSheet.create({
|
|
1779
2018
|
base: {
|
|
1780
2019
|
flexDirection: "row",
|
|
1781
2020
|
alignItems: "center",
|
|
@@ -1853,13 +2092,13 @@ var Checkbox = forwardRef(function Checkbox2({
|
|
|
1853
2092
|
accessibilityRole: "checkbox",
|
|
1854
2093
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
1855
2094
|
accessibilityState: { checked: isActive, disabled },
|
|
1856
|
-
style: [
|
|
2095
|
+
style: [styles9.root, disabled && styles9.disabled, style],
|
|
1857
2096
|
children: [
|
|
1858
2097
|
/* @__PURE__ */ jsx(
|
|
1859
2098
|
View,
|
|
1860
2099
|
{
|
|
1861
2100
|
style: [
|
|
1862
|
-
|
|
2101
|
+
styles9.box,
|
|
1863
2102
|
{
|
|
1864
2103
|
backgroundColor: chrome.backgroundColor,
|
|
1865
2104
|
borderColor: chrome.borderColor
|
|
@@ -1868,12 +2107,12 @@ var Checkbox = forwardRef(function Checkbox2({
|
|
|
1868
2107
|
children: isActive ? /* @__PURE__ */ jsx(CheckIcon, { size: CHECK_SIZE, color: colors.primary, strokeWidth: CHECK_STROKE }) : null
|
|
1869
2108
|
}
|
|
1870
2109
|
),
|
|
1871
|
-
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [
|
|
2110
|
+
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles9.label, labelStyle], children: labelContent }) : labelContent : null
|
|
1872
2111
|
]
|
|
1873
2112
|
}
|
|
1874
2113
|
);
|
|
1875
2114
|
});
|
|
1876
|
-
var
|
|
2115
|
+
var styles9 = StyleSheet.create({
|
|
1877
2116
|
root: {
|
|
1878
2117
|
flexDirection: "row",
|
|
1879
2118
|
alignItems: "center",
|
|
@@ -1971,7 +2210,7 @@ var DEFAULT_WIDTH = 380;
|
|
|
1971
2210
|
var TRIGGER_HEIGHT = 44;
|
|
1972
2211
|
var TRIGGER_RADIUS = 60;
|
|
1973
2212
|
var MENU_RADIUS2 = 20;
|
|
1974
|
-
var
|
|
2213
|
+
var ICON_SIZE6 = 20;
|
|
1975
2214
|
var NAV_ICON_SIZE = 20;
|
|
1976
2215
|
var DAY_CELL_HEIGHT = 44;
|
|
1977
2216
|
var DAY_CIRCLE_SIZE = 44;
|
|
@@ -2123,9 +2362,9 @@ var DatePicker = forwardRef(
|
|
|
2123
2362
|
{
|
|
2124
2363
|
...rest,
|
|
2125
2364
|
ref: setRootRef,
|
|
2126
|
-
style: [
|
|
2365
|
+
style: [styles10.root, isOpen && styles10.rootOpen, disabled && styles10.disabled, style],
|
|
2127
2366
|
accessibilityState: { disabled, expanded: isOpen },
|
|
2128
|
-
children: /* @__PURE__ */ jsxs(View, { style: [
|
|
2367
|
+
children: /* @__PURE__ */ jsxs(View, { style: [styles10.triggerWrap, isOpen && styles10.triggerWrapOpen], children: [
|
|
2129
2368
|
/* @__PURE__ */ jsxs(
|
|
2130
2369
|
Pressable,
|
|
2131
2370
|
{
|
|
@@ -2136,17 +2375,17 @@ var DatePicker = forwardRef(
|
|
|
2136
2375
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
2137
2376
|
accessibilityState: { disabled, expanded: isOpen },
|
|
2138
2377
|
style: [
|
|
2139
|
-
|
|
2378
|
+
styles10.trigger,
|
|
2140
2379
|
{ borderColor: triggerBorderColor, backgroundColor: colors.grey700 }
|
|
2141
2380
|
],
|
|
2142
2381
|
children: [
|
|
2143
|
-
/* @__PURE__ */ jsx(Text, { style: [
|
|
2144
|
-
/* @__PURE__ */ jsx(View, { style:
|
|
2382
|
+
/* @__PURE__ */ jsx(Text, { style: [styles10.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: triggerLabel }),
|
|
2383
|
+
/* @__PURE__ */ jsx(View, { style: styles10.iconSlot, children: /* @__PURE__ */ jsx(CalendarOutlineIcon, { size: ICON_SIZE6, color: colors.grey100 }) })
|
|
2145
2384
|
]
|
|
2146
2385
|
}
|
|
2147
2386
|
),
|
|
2148
|
-
isOpen ? /* @__PURE__ */ jsxs(View, { style:
|
|
2149
|
-
/* @__PURE__ */ jsxs(View, { style:
|
|
2387
|
+
isOpen ? /* @__PURE__ */ jsxs(View, { style: styles10.menu, children: [
|
|
2388
|
+
/* @__PURE__ */ jsxs(View, { style: styles10.calendarHeader, children: [
|
|
2150
2389
|
/* @__PURE__ */ jsx(
|
|
2151
2390
|
Pressable,
|
|
2152
2391
|
{
|
|
@@ -2154,11 +2393,11 @@ var DatePicker = forwardRef(
|
|
|
2154
2393
|
hitSlop: 8,
|
|
2155
2394
|
accessibilityRole: "button",
|
|
2156
2395
|
accessibilityLabel: "Previous month",
|
|
2157
|
-
style:
|
|
2396
|
+
style: styles10.navButton,
|
|
2158
2397
|
children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white })
|
|
2159
2398
|
}
|
|
2160
2399
|
),
|
|
2161
|
-
/* @__PURE__ */ jsxs(Text, { style:
|
|
2400
|
+
/* @__PURE__ */ jsxs(Text, { style: styles10.monthHeading, children: [
|
|
2162
2401
|
monthNames[visibleMonth.getMonth()],
|
|
2163
2402
|
" ",
|
|
2164
2403
|
visibleMonth.getFullYear()
|
|
@@ -2170,13 +2409,13 @@ var DatePicker = forwardRef(
|
|
|
2170
2409
|
hitSlop: 8,
|
|
2171
2410
|
accessibilityRole: "button",
|
|
2172
2411
|
accessibilityLabel: "Next month",
|
|
2173
|
-
style:
|
|
2174
|
-
children: /* @__PURE__ */ jsx(View, { style:
|
|
2412
|
+
style: styles10.navButton,
|
|
2413
|
+
children: /* @__PURE__ */ jsx(View, { style: styles10.navIconMirror, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: NAV_ICON_SIZE, color: colors.white }) })
|
|
2175
2414
|
}
|
|
2176
2415
|
)
|
|
2177
2416
|
] }),
|
|
2178
2417
|
/* @__PURE__ */ jsxs(View, { children: [
|
|
2179
|
-
/* @__PURE__ */ jsx(View, { style:
|
|
2418
|
+
/* @__PURE__ */ jsx(View, { style: styles10.weekdayRow, children: weekdayLabels.map((weekdayLabel, index) => /* @__PURE__ */ jsx(View, { style: styles10.dayCellWrap, children: /* @__PURE__ */ jsx(Text, { style: styles10.weekdayText, children: weekdayLabel }) }, `${weekdayLabel}-${index}`)) }),
|
|
2180
2419
|
weeks.map((week, weekIndex) => {
|
|
2181
2420
|
let rangeHighlightStyle = null;
|
|
2182
2421
|
if (isRange && rangeValue.start && rangeValue.end) {
|
|
@@ -2213,13 +2452,13 @@ var DatePicker = forwardRef(
|
|
|
2213
2452
|
return /* @__PURE__ */ jsxs(
|
|
2214
2453
|
View,
|
|
2215
2454
|
{
|
|
2216
|
-
style: [
|
|
2455
|
+
style: [styles10.weekRow, weekIndex > 0 && styles10.weekRowSpaced],
|
|
2217
2456
|
children: [
|
|
2218
2457
|
rangeHighlightStyle ? /* @__PURE__ */ jsx(
|
|
2219
2458
|
View,
|
|
2220
2459
|
{
|
|
2221
2460
|
pointerEvents: "none",
|
|
2222
|
-
style: [
|
|
2461
|
+
style: [styles10.rangeHighlight, rangeHighlightStyle]
|
|
2223
2462
|
}
|
|
2224
2463
|
) : null,
|
|
2225
2464
|
week.map((day, dayIndex) => {
|
|
@@ -2242,7 +2481,7 @@ var DatePicker = forwardRef(
|
|
|
2242
2481
|
onHoverOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
|
|
2243
2482
|
onPressIn: () => setHoveredDayKey(dayKey),
|
|
2244
2483
|
onPressOut: () => setHoveredDayKey((current) => current === dayKey ? null : current),
|
|
2245
|
-
style:
|
|
2484
|
+
style: styles10.dayCellWrap,
|
|
2246
2485
|
accessibilityRole: "button",
|
|
2247
2486
|
accessibilityLabel: formatValue(day),
|
|
2248
2487
|
accessibilityState: {
|
|
@@ -2254,14 +2493,14 @@ var DatePicker = forwardRef(
|
|
|
2254
2493
|
View,
|
|
2255
2494
|
{
|
|
2256
2495
|
style: [
|
|
2257
|
-
|
|
2258
|
-
isSelectedEndpoint &&
|
|
2259
|
-
isHovered &&
|
|
2496
|
+
styles10.dayCircle,
|
|
2497
|
+
isSelectedEndpoint && styles10.dayCircleSelected,
|
|
2498
|
+
isHovered && styles10.dayCircleHovered
|
|
2260
2499
|
],
|
|
2261
|
-
children: /* @__PURE__ */ jsx(Text, { style: [
|
|
2500
|
+
children: /* @__PURE__ */ jsx(Text, { style: [styles10.dayText, { color: dayTextColor }], children: day.getDate() })
|
|
2262
2501
|
}
|
|
2263
2502
|
),
|
|
2264
|
-
isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsx(View, { style:
|
|
2503
|
+
isToday && !isSelectedEndpoint ? /* @__PURE__ */ jsx(View, { style: styles10.todayDot }) : null
|
|
2265
2504
|
]
|
|
2266
2505
|
},
|
|
2267
2506
|
dayIndex
|
|
@@ -2279,7 +2518,7 @@ var DatePicker = forwardRef(
|
|
|
2279
2518
|
);
|
|
2280
2519
|
}
|
|
2281
2520
|
);
|
|
2282
|
-
var
|
|
2521
|
+
var styles10 = StyleSheet.create({
|
|
2283
2522
|
root: {
|
|
2284
2523
|
width: DEFAULT_WIDTH,
|
|
2285
2524
|
gap: 8,
|
|
@@ -2315,8 +2554,8 @@ var styles9 = StyleSheet.create({
|
|
|
2315
2554
|
minWidth: 0
|
|
2316
2555
|
},
|
|
2317
2556
|
iconSlot: {
|
|
2318
|
-
width:
|
|
2319
|
-
height:
|
|
2557
|
+
width: ICON_SIZE6,
|
|
2558
|
+
height: ICON_SIZE6,
|
|
2320
2559
|
alignItems: "center",
|
|
2321
2560
|
justifyContent: "center",
|
|
2322
2561
|
flexShrink: 0
|
|
@@ -2539,13 +2778,13 @@ var Input = forwardRef(function Input2({
|
|
|
2539
2778
|
const rightIconNode = rightIcon ?? /* @__PURE__ */ jsx(ShowIcon, { size: metrics.iconSize, color: chrome.rightIconColor });
|
|
2540
2779
|
useApplyWebClassName(rootRef, className);
|
|
2541
2780
|
useApplyWebClassName(inputRef, inputClassName);
|
|
2542
|
-
return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [
|
|
2543
|
-
showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [
|
|
2781
|
+
return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles11.root, disabled && styles11.disabled, style], children: [
|
|
2782
|
+
showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles11.label, { color: chrome.labelColor }], children: label }) : null,
|
|
2544
2783
|
/* @__PURE__ */ jsxs(
|
|
2545
2784
|
View,
|
|
2546
2785
|
{
|
|
2547
2786
|
style: [
|
|
2548
|
-
|
|
2787
|
+
styles11.field,
|
|
2549
2788
|
{
|
|
2550
2789
|
height: metrics.height,
|
|
2551
2790
|
borderRadius: metrics.borderRadius,
|
|
@@ -2560,7 +2799,7 @@ var Input = forwardRef(function Input2({
|
|
|
2560
2799
|
fieldStyle
|
|
2561
2800
|
],
|
|
2562
2801
|
children: [
|
|
2563
|
-
hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: [
|
|
2802
|
+
hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: [styles11.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: leftIconNode }) : null,
|
|
2564
2803
|
/* @__PURE__ */ jsx(
|
|
2565
2804
|
TextInput,
|
|
2566
2805
|
{
|
|
@@ -2584,11 +2823,11 @@ var Input = forwardRef(function Input2({
|
|
|
2584
2823
|
onBlur?.(event);
|
|
2585
2824
|
},
|
|
2586
2825
|
style: [
|
|
2587
|
-
|
|
2826
|
+
styles11.input,
|
|
2588
2827
|
metrics.text,
|
|
2589
2828
|
{ color: chrome.textColor },
|
|
2590
|
-
Platform.OS === "web" ?
|
|
2591
|
-
Platform.OS === "android" ?
|
|
2829
|
+
Platform.OS === "web" ? styles11.inputWeb : null,
|
|
2830
|
+
Platform.OS === "android" ? styles11.inputAndroid : null,
|
|
2592
2831
|
inputStyle
|
|
2593
2832
|
],
|
|
2594
2833
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
@@ -2600,20 +2839,20 @@ var Input = forwardRef(function Input2({
|
|
|
2600
2839
|
{
|
|
2601
2840
|
onPress: onRightIconPress,
|
|
2602
2841
|
disabled,
|
|
2603
|
-
style: [
|
|
2842
|
+
style: [styles11.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }],
|
|
2604
2843
|
accessibilityRole: "button",
|
|
2605
2844
|
accessibilityLabel: rightIconAccessibilityLabel,
|
|
2606
2845
|
hitSlop: 8,
|
|
2607
2846
|
children: rightIconNode
|
|
2608
2847
|
}
|
|
2609
|
-
) : /* @__PURE__ */ jsx(View, { style: [
|
|
2848
|
+
) : /* @__PURE__ */ jsx(View, { style: [styles11.iconSlot, { width: metrics.iconSize, height: metrics.iconSize }], children: rightIconNode }) : null
|
|
2610
2849
|
]
|
|
2611
2850
|
}
|
|
2612
2851
|
),
|
|
2613
|
-
showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [
|
|
2852
|
+
showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles11.hint, { color: chrome.hintColor }], children: hint }) : null
|
|
2614
2853
|
] });
|
|
2615
2854
|
});
|
|
2616
|
-
var
|
|
2855
|
+
var styles11 = StyleSheet.create({
|
|
2617
2856
|
root: {
|
|
2618
2857
|
width: DEFAULT_WIDTH2,
|
|
2619
2858
|
gap: 8,
|
|
@@ -2656,7 +2895,7 @@ var TRIGGER_RADIUS2 = 60;
|
|
|
2656
2895
|
var MENU_RADIUS3 = 24;
|
|
2657
2896
|
var MENU_MAX_LIST_HEIGHT = 248;
|
|
2658
2897
|
var ITEM_RADIUS2 = 12;
|
|
2659
|
-
var
|
|
2898
|
+
var ICON_SIZE7 = 20;
|
|
2660
2899
|
var CHIP_GAP = 6;
|
|
2661
2900
|
var FALLBACK_ELLIPSIS_WIDTH = 20;
|
|
2662
2901
|
function itemBackground(state) {
|
|
@@ -2729,25 +2968,25 @@ function MultiValueChips({ options, disabled, onRemove }) {
|
|
|
2729
2968
|
const next = Math.ceil(event.nativeEvent.layout.width);
|
|
2730
2969
|
setEllipsisWidth((current) => current === next ? current : next);
|
|
2731
2970
|
};
|
|
2732
|
-
return /* @__PURE__ */ jsxs(View, { style:
|
|
2733
|
-
/* @__PURE__ */ jsxs(View, { pointerEvents: "none", style:
|
|
2971
|
+
return /* @__PURE__ */ jsxs(View, { style: styles12.multiValueRoot, children: [
|
|
2972
|
+
/* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: styles12.measureRow, children: [
|
|
2734
2973
|
options.map((option) => /* @__PURE__ */ jsxs(
|
|
2735
2974
|
View,
|
|
2736
2975
|
{
|
|
2737
|
-
style:
|
|
2976
|
+
style: styles12.chip,
|
|
2738
2977
|
onLayout: (event) => handleChipLayout(option.value, event),
|
|
2739
2978
|
children: [
|
|
2740
|
-
/* @__PURE__ */ jsx(Text, { style:
|
|
2741
|
-
/* @__PURE__ */ jsx(Text, { style:
|
|
2979
|
+
/* @__PURE__ */ jsx(Text, { style: styles12.chipLabel, numberOfLines: 1, children: option.label }),
|
|
2980
|
+
/* @__PURE__ */ jsx(Text, { style: styles12.chipRemove, children: "\xD7" })
|
|
2742
2981
|
]
|
|
2743
2982
|
},
|
|
2744
2983
|
`measure-${option.value}`
|
|
2745
2984
|
)),
|
|
2746
|
-
/* @__PURE__ */ jsx(View, { style:
|
|
2985
|
+
/* @__PURE__ */ jsx(View, { style: styles12.ellipsis, onLayout: handleEllipsisLayout, children: /* @__PURE__ */ jsx(Text, { style: styles12.ellipsisText, children: "..." }) })
|
|
2747
2986
|
] }),
|
|
2748
|
-
/* @__PURE__ */ jsxs(View, { style:
|
|
2749
|
-
visible.map((option) => /* @__PURE__ */ jsxs(View, { style:
|
|
2750
|
-
/* @__PURE__ */ jsx(Text, { style:
|
|
2987
|
+
/* @__PURE__ */ jsxs(View, { style: styles12.chipsRow, onLayout: handleContainerLayout, children: [
|
|
2988
|
+
visible.map((option) => /* @__PURE__ */ jsxs(View, { style: styles12.chip, children: [
|
|
2989
|
+
/* @__PURE__ */ jsx(Text, { style: styles12.chipLabel, numberOfLines: 1, children: option.label }),
|
|
2751
2990
|
/* @__PURE__ */ jsx(
|
|
2752
2991
|
Pressable,
|
|
2753
2992
|
{
|
|
@@ -2759,11 +2998,11 @@ function MultiValueChips({ options, disabled, onRemove }) {
|
|
|
2759
2998
|
hitSlop: 6,
|
|
2760
2999
|
accessibilityRole: "button",
|
|
2761
3000
|
accessibilityLabel: `Remove ${option.label}`,
|
|
2762
|
-
children: /* @__PURE__ */ jsx(Text, { style:
|
|
3001
|
+
children: /* @__PURE__ */ jsx(Text, { style: styles12.chipRemove, children: "\xD7" })
|
|
2763
3002
|
}
|
|
2764
3003
|
)
|
|
2765
3004
|
] }, option.value)),
|
|
2766
|
-
hasOverflow ? /* @__PURE__ */ jsx(View, { style:
|
|
3005
|
+
hasOverflow ? /* @__PURE__ */ jsx(View, { style: styles12.ellipsis, children: /* @__PURE__ */ jsx(Text, { style: styles12.ellipsisText, children: "..." }) }) : null
|
|
2767
3006
|
] })
|
|
2768
3007
|
] });
|
|
2769
3008
|
}
|
|
@@ -2974,7 +3213,7 @@ var Select = forwardRef(
|
|
|
2974
3213
|
const leftIconNode = leftIcon ?? /* @__PURE__ */ jsx(
|
|
2975
3214
|
UserIcon,
|
|
2976
3215
|
{
|
|
2977
|
-
size:
|
|
3216
|
+
size: ICON_SIZE7,
|
|
2978
3217
|
color: error ? colors.red : isOpen ? colors.primary : colors.grey100
|
|
2979
3218
|
}
|
|
2980
3219
|
);
|
|
@@ -2990,11 +3229,11 @@ var Select = forwardRef(
|
|
|
2990
3229
|
{
|
|
2991
3230
|
...rest,
|
|
2992
3231
|
ref: setRootRef,
|
|
2993
|
-
style: [
|
|
3232
|
+
style: [styles12.root, isOpen && styles12.rootOpen, disabled && styles12.disabled, style],
|
|
2994
3233
|
accessibilityState: { disabled, expanded: isOpen },
|
|
2995
3234
|
children: [
|
|
2996
|
-
showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [
|
|
2997
|
-
/* @__PURE__ */ jsxs(View, { style: [
|
|
3235
|
+
showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles12.label, { color: labelColor }], children: label }) : null,
|
|
3236
|
+
/* @__PURE__ */ jsxs(View, { style: [styles12.triggerWrap, isOpen && styles12.triggerWrapOpen], children: [
|
|
2998
3237
|
/* @__PURE__ */ jsxs(
|
|
2999
3238
|
Pressable,
|
|
3000
3239
|
{
|
|
@@ -3005,29 +3244,29 @@ var Select = forwardRef(
|
|
|
3005
3244
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
3006
3245
|
accessibilityState: { disabled, expanded: isOpen },
|
|
3007
3246
|
style: [
|
|
3008
|
-
|
|
3247
|
+
styles12.trigger,
|
|
3009
3248
|
{
|
|
3010
3249
|
borderColor: triggerBorderColor,
|
|
3011
3250
|
backgroundColor: colors.grey700
|
|
3012
3251
|
}
|
|
3013
3252
|
],
|
|
3014
3253
|
children: [
|
|
3015
|
-
hasLeftIcon ? /* @__PURE__ */ jsx(View, { style:
|
|
3016
|
-
/* @__PURE__ */ jsx(View, { style:
|
|
3254
|
+
hasLeftIcon ? /* @__PURE__ */ jsx(View, { style: styles12.iconSlot, children: leftIconNode }) : null,
|
|
3255
|
+
/* @__PURE__ */ jsx(View, { style: styles12.triggerContent, children: multiple && hasValue ? /* @__PURE__ */ jsx(
|
|
3017
3256
|
MultiValueChips,
|
|
3018
3257
|
{
|
|
3019
3258
|
options: selectedOptions,
|
|
3020
3259
|
disabled,
|
|
3021
3260
|
onRemove: handleRemoveChip
|
|
3022
3261
|
}
|
|
3023
|
-
) : /* @__PURE__ */ jsx(Text, { style: [
|
|
3024
|
-
/* @__PURE__ */ jsx(View, { style: [
|
|
3262
|
+
) : /* @__PURE__ */ jsx(Text, { style: [styles12.triggerText, { color: triggerTextColor }], numberOfLines: 1, children: multiple ? placeholder : singleLabel }) }),
|
|
3263
|
+
/* @__PURE__ */ jsx(View, { style: [styles12.iconSlot, isOpen && styles12.chevronOpen], children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: ICON_SIZE7, color: isOpen ? colors.primary : colors.grey100 }) })
|
|
3025
3264
|
]
|
|
3026
3265
|
}
|
|
3027
3266
|
),
|
|
3028
|
-
isOpen ? /* @__PURE__ */ jsxs(View, { style:
|
|
3029
|
-
showSearch ? /* @__PURE__ */ jsxs(View, { style:
|
|
3030
|
-
/* @__PURE__ */ jsx(View, { style:
|
|
3267
|
+
isOpen ? /* @__PURE__ */ jsxs(View, { style: styles12.menu, children: [
|
|
3268
|
+
showSearch ? /* @__PURE__ */ jsxs(View, { style: styles12.searchField, children: [
|
|
3269
|
+
/* @__PURE__ */ jsx(View, { style: styles12.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE7, color: colors.grey100 }) }),
|
|
3031
3270
|
/* @__PURE__ */ jsx(
|
|
3032
3271
|
TextInput,
|
|
3033
3272
|
{
|
|
@@ -3038,9 +3277,9 @@ var Select = forwardRef(
|
|
|
3038
3277
|
placeholder: searchPlaceholder,
|
|
3039
3278
|
placeholderTextColor: colors.grey100,
|
|
3040
3279
|
style: [
|
|
3041
|
-
|
|
3042
|
-
Platform.OS === "web" ?
|
|
3043
|
-
Platform.OS === "android" ?
|
|
3280
|
+
styles12.searchInput,
|
|
3281
|
+
Platform.OS === "web" ? styles12.searchInputWeb : null,
|
|
3282
|
+
Platform.OS === "android" ? styles12.searchInputAndroid : null
|
|
3044
3283
|
],
|
|
3045
3284
|
accessibilityLabel: searchPlaceholder
|
|
3046
3285
|
}
|
|
@@ -3049,12 +3288,12 @@ var Select = forwardRef(
|
|
|
3049
3288
|
/* @__PURE__ */ jsxs(
|
|
3050
3289
|
ScrollView,
|
|
3051
3290
|
{
|
|
3052
|
-
style:
|
|
3053
|
-
contentContainerStyle:
|
|
3291
|
+
style: styles12.optionList,
|
|
3292
|
+
contentContainerStyle: styles12.optionListContent,
|
|
3054
3293
|
keyboardShouldPersistTaps: "handled",
|
|
3055
3294
|
showsVerticalScrollIndicator: false,
|
|
3056
3295
|
children: [
|
|
3057
|
-
loading ? /* @__PURE__ */ jsx(View, { style:
|
|
3296
|
+
loading ? /* @__PURE__ */ jsx(View, { style: styles12.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles12.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles12.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles12.statusText, children: emptyText }) }) : null,
|
|
3058
3297
|
!loading && filteredOptions.map((option) => {
|
|
3059
3298
|
const isSelected = selectedValues.includes(option.value);
|
|
3060
3299
|
const isHovered = hoveredValue === option.value;
|
|
@@ -3071,14 +3310,14 @@ var Select = forwardRef(
|
|
|
3071
3310
|
accessibilityRole: multiple ? "checkbox" : "button",
|
|
3072
3311
|
accessibilityState: { selected: isSelected, checked: isSelected, disabled },
|
|
3073
3312
|
style: [
|
|
3074
|
-
|
|
3313
|
+
styles12.item,
|
|
3075
3314
|
{
|
|
3076
3315
|
backgroundColor: itemBackground(visualState)
|
|
3077
3316
|
}
|
|
3078
3317
|
],
|
|
3079
3318
|
children: [
|
|
3080
|
-
multiple ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style:
|
|
3081
|
-
/* @__PURE__ */ jsx(Text, { style:
|
|
3319
|
+
multiple ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles12.itemCheckbox, children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
|
|
3320
|
+
/* @__PURE__ */ jsx(Text, { style: styles12.itemLabel, numberOfLines: 1, children: option.label })
|
|
3082
3321
|
]
|
|
3083
3322
|
},
|
|
3084
3323
|
option.value
|
|
@@ -3089,13 +3328,13 @@ var Select = forwardRef(
|
|
|
3089
3328
|
)
|
|
3090
3329
|
] }) : null
|
|
3091
3330
|
] }),
|
|
3092
|
-
showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [
|
|
3331
|
+
showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles12.hint, { color: hintColor }], children: hint }) : null
|
|
3093
3332
|
]
|
|
3094
3333
|
}
|
|
3095
3334
|
);
|
|
3096
3335
|
}
|
|
3097
3336
|
);
|
|
3098
|
-
var
|
|
3337
|
+
var styles12 = StyleSheet.create({
|
|
3099
3338
|
root: {
|
|
3100
3339
|
width: DEFAULT_WIDTH3,
|
|
3101
3340
|
gap: 8,
|
|
@@ -3185,8 +3424,8 @@ var styles11 = StyleSheet.create({
|
|
|
3185
3424
|
lineHeight: 16
|
|
3186
3425
|
},
|
|
3187
3426
|
iconSlot: {
|
|
3188
|
-
width:
|
|
3189
|
-
height:
|
|
3427
|
+
width: ICON_SIZE7,
|
|
3428
|
+
height: ICON_SIZE7,
|
|
3190
3429
|
alignItems: "center",
|
|
3191
3430
|
justifyContent: "center",
|
|
3192
3431
|
flexShrink: 0
|
|
@@ -3357,13 +3596,13 @@ var Textarea = forwardRef(function Textarea2({
|
|
|
3357
3596
|
const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? void 0 : label);
|
|
3358
3597
|
useApplyWebClassName(rootRef, className);
|
|
3359
3598
|
useApplyWebClassName(inputRef, inputClassName);
|
|
3360
|
-
return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [
|
|
3361
|
-
showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [
|
|
3599
|
+
return /* @__PURE__ */ jsxs(View, { ref: rootRef, style: [styles13.root, disabled && styles13.disabled, style], children: [
|
|
3600
|
+
showLabel && label ? /* @__PURE__ */ jsx(Text, { style: [styles13.label, { color: chrome.labelColor }], children: label }) : null,
|
|
3362
3601
|
/* @__PURE__ */ jsx(
|
|
3363
3602
|
View,
|
|
3364
3603
|
{
|
|
3365
3604
|
style: [
|
|
3366
|
-
|
|
3605
|
+
styles13.field,
|
|
3367
3606
|
{
|
|
3368
3607
|
borderColor: chrome.borderColor,
|
|
3369
3608
|
backgroundColor: chrome.backgroundColor
|
|
@@ -3395,11 +3634,11 @@ var Textarea = forwardRef(function Textarea2({
|
|
|
3395
3634
|
onBlur?.(event);
|
|
3396
3635
|
},
|
|
3397
3636
|
style: [
|
|
3398
|
-
|
|
3637
|
+
styles13.input,
|
|
3399
3638
|
textareaTypography.field,
|
|
3400
3639
|
{ color: chrome.textColor },
|
|
3401
|
-
Platform.OS === "web" ?
|
|
3402
|
-
Platform.OS === "android" ?
|
|
3640
|
+
Platform.OS === "web" ? styles13.inputWeb : null,
|
|
3641
|
+
Platform.OS === "android" ? styles13.inputAndroid : null,
|
|
3403
3642
|
inputStyle
|
|
3404
3643
|
],
|
|
3405
3644
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
@@ -3408,10 +3647,10 @@ var Textarea = forwardRef(function Textarea2({
|
|
|
3408
3647
|
)
|
|
3409
3648
|
}
|
|
3410
3649
|
),
|
|
3411
|
-
showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [
|
|
3650
|
+
showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles13.hint, { color: chrome.hintColor }], children: hint }) : null
|
|
3412
3651
|
] });
|
|
3413
3652
|
});
|
|
3414
|
-
var
|
|
3653
|
+
var styles13 = StyleSheet.create({
|
|
3415
3654
|
root: {
|
|
3416
3655
|
width: DEFAULT_WIDTH4,
|
|
3417
3656
|
gap: 8,
|
|
@@ -3511,13 +3750,13 @@ var Toggle = forwardRef(function Toggle2({
|
|
|
3511
3750
|
accessibilityRole: "switch",
|
|
3512
3751
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
3513
3752
|
accessibilityState: { checked: isActive, disabled },
|
|
3514
|
-
style: [
|
|
3753
|
+
style: [styles14.pressable, disabled && styles14.disabled, style],
|
|
3515
3754
|
children: [
|
|
3516
3755
|
/* @__PURE__ */ jsx(
|
|
3517
3756
|
Animated.View,
|
|
3518
3757
|
{
|
|
3519
3758
|
style: [
|
|
3520
|
-
|
|
3759
|
+
styles14.track,
|
|
3521
3760
|
{
|
|
3522
3761
|
backgroundColor: trackBackgroundColor
|
|
3523
3762
|
}
|
|
@@ -3526,7 +3765,7 @@ var Toggle = forwardRef(function Toggle2({
|
|
|
3526
3765
|
Animated.View,
|
|
3527
3766
|
{
|
|
3528
3767
|
style: [
|
|
3529
|
-
|
|
3768
|
+
styles14.thumb,
|
|
3530
3769
|
{
|
|
3531
3770
|
transform: [{ translateX: thumbTranslateX }]
|
|
3532
3771
|
}
|
|
@@ -3535,12 +3774,12 @@ var Toggle = forwardRef(function Toggle2({
|
|
|
3535
3774
|
)
|
|
3536
3775
|
}
|
|
3537
3776
|
),
|
|
3538
|
-
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [
|
|
3777
|
+
labelContent != null && labelContent !== false ? typeof labelContent === "string" || typeof labelContent === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles14.label, labelStyle], children: labelContent }) : labelContent : null
|
|
3539
3778
|
]
|
|
3540
3779
|
}
|
|
3541
3780
|
);
|
|
3542
3781
|
});
|
|
3543
|
-
var
|
|
3782
|
+
var styles14 = StyleSheet.create({
|
|
3544
3783
|
pressable: {
|
|
3545
3784
|
flexDirection: "row",
|
|
3546
3785
|
alignItems: "center",
|
|
@@ -3615,21 +3854,21 @@ var RatingInput = forwardRef(
|
|
|
3615
3854
|
{
|
|
3616
3855
|
...rest,
|
|
3617
3856
|
ref: setContainerRef,
|
|
3618
|
-
style: [
|
|
3857
|
+
style: [styles15.root, disabled && styles15.disabled, style],
|
|
3619
3858
|
children: [
|
|
3620
|
-
showValue ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [
|
|
3859
|
+
showValue ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles15.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
|
|
3621
3860
|
/* @__PURE__ */ jsx(
|
|
3622
3861
|
View,
|
|
3623
3862
|
{
|
|
3624
3863
|
accessibilityRole: readOnly ? "image" : "radiogroup",
|
|
3625
3864
|
accessibilityLabel: resolvedAccessibilityLabel,
|
|
3626
3865
|
accessibilityState: { disabled },
|
|
3627
|
-
style: [
|
|
3866
|
+
style: [styles15.stars, { gap: resolvedStarGap }],
|
|
3628
3867
|
children: Array.from({ length: STAR_COUNT }, (_, index) => {
|
|
3629
3868
|
const starValue = index + 1;
|
|
3630
3869
|
const isSelected = starValue <= selectedStarCount;
|
|
3631
3870
|
const icon = isSelected ? /* @__PURE__ */ jsx(StarFilledIcon, { size: iconWidth, height: iconHeight }) : /* @__PURE__ */ jsx(StarIcon, { size: iconWidth, height: iconHeight });
|
|
3632
|
-
const itemStyle = [
|
|
3871
|
+
const itemStyle = [styles15.starItem, { width: size, height: size }];
|
|
3633
3872
|
if (readOnly) {
|
|
3634
3873
|
return /* @__PURE__ */ jsx(View, { style: itemStyle, children: icon }, starValue);
|
|
3635
3874
|
}
|
|
@@ -3655,7 +3894,7 @@ var RatingInput = forwardRef(
|
|
|
3655
3894
|
);
|
|
3656
3895
|
}
|
|
3657
3896
|
);
|
|
3658
|
-
var
|
|
3897
|
+
var styles15 = StyleSheet.create({
|
|
3659
3898
|
root: {
|
|
3660
3899
|
flexDirection: "row",
|
|
3661
3900
|
alignItems: "center",
|
|
@@ -3719,19 +3958,19 @@ var CommentCard = forwardRef(
|
|
|
3719
3958
|
setExpanded(next);
|
|
3720
3959
|
onExpandedChange?.(next);
|
|
3721
3960
|
};
|
|
3722
|
-
return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [
|
|
3723
|
-
/* @__PURE__ */ jsxs(View, { style:
|
|
3724
|
-
/* @__PURE__ */ jsx(View, { style:
|
|
3961
|
+
return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles16.root, style], children: [
|
|
3962
|
+
/* @__PURE__ */ jsxs(View, { style: styles16.header, children: [
|
|
3963
|
+
/* @__PURE__ */ jsx(View, { style: styles16.avatar, children: hasImage ? /* @__PURE__ */ jsx(
|
|
3725
3964
|
Image,
|
|
3726
3965
|
{
|
|
3727
3966
|
source: { uri: imageUrl ?? void 0 },
|
|
3728
|
-
style:
|
|
3967
|
+
style: styles16.avatarImage,
|
|
3729
3968
|
onError: () => setImageFailed(true)
|
|
3730
3969
|
}
|
|
3731
3970
|
) : /* @__PURE__ */ jsx(UserIcon, { size: 20, color: colors.primary }) }),
|
|
3732
|
-
/* @__PURE__ */ jsxs(View, { style:
|
|
3733
|
-
/* @__PURE__ */ jsx(Text, { numberOfLines: 1, style:
|
|
3734
|
-
/* @__PURE__ */ jsx(Text, { numberOfLines: 1, style:
|
|
3971
|
+
/* @__PURE__ */ jsxs(View, { style: styles16.identity, children: [
|
|
3972
|
+
/* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles16.name, children: userName }),
|
|
3973
|
+
/* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles16.date, children: date })
|
|
3735
3974
|
] }),
|
|
3736
3975
|
/* @__PURE__ */ jsx(RatingInput, { value: rating, readOnly: true, showValue: false, size: 16 })
|
|
3737
3976
|
] }),
|
|
@@ -3739,7 +3978,7 @@ var CommentCard = forwardRef(
|
|
|
3739
3978
|
Text,
|
|
3740
3979
|
{
|
|
3741
3980
|
numberOfLines: expanded ? void 0 : maxCommentLines,
|
|
3742
|
-
style: [
|
|
3981
|
+
style: [styles16.comment, commentStyle],
|
|
3743
3982
|
children: commentText
|
|
3744
3983
|
}
|
|
3745
3984
|
),
|
|
@@ -3752,14 +3991,14 @@ var CommentCard = forwardRef(
|
|
|
3752
3991
|
hitSlop: 6,
|
|
3753
3992
|
onHoverIn: () => setActionHovered(true),
|
|
3754
3993
|
onHoverOut: () => setActionHovered(false),
|
|
3755
|
-
style:
|
|
3994
|
+
style: styles16.action,
|
|
3756
3995
|
children: /* @__PURE__ */ jsx(
|
|
3757
3996
|
Text,
|
|
3758
3997
|
{
|
|
3759
3998
|
style: [
|
|
3760
|
-
|
|
3761
|
-
expanded &&
|
|
3762
|
-
actionHovered && (expanded ?
|
|
3999
|
+
styles16.actionText,
|
|
4000
|
+
expanded && styles16.closeActionText,
|
|
4001
|
+
actionHovered && (expanded ? styles16.closeActionTextHovered : styles16.openActionTextHovered)
|
|
3763
4002
|
],
|
|
3764
4003
|
children: expanded ? readLessLabel : readMoreLabel
|
|
3765
4004
|
}
|
|
@@ -3769,7 +4008,7 @@ var CommentCard = forwardRef(
|
|
|
3769
4008
|
] });
|
|
3770
4009
|
}
|
|
3771
4010
|
);
|
|
3772
|
-
var
|
|
4011
|
+
var styles16 = StyleSheet.create({
|
|
3773
4012
|
root: {
|
|
3774
4013
|
width: CARD_WIDTH,
|
|
3775
4014
|
minHeight: CARD_MIN_HEIGHT,
|
|
@@ -3835,6 +4074,6 @@ var styles15 = StyleSheet.create({
|
|
|
3835
4074
|
}
|
|
3836
4075
|
});
|
|
3837
4076
|
|
|
3838
|
-
export { ArrowRightIcon, Avatar, Badge, BagIcon, BellIcon, BuildingIcon, Button, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, Counter, DatePicker, FacebookIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, StatCard, Textarea, Toggle, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
|
|
4077
|
+
export { ArrowRightIcon, Avatar, Badge, BagIcon, BellIcon, BuildingIcon, Button, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, Counter, DatePicker, FacebookIcon, GlobeIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LanguageSwitcher, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, StatCard, Textarea, Toggle, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, defaultLanguageOptions, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, languageSwitcherTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
|
|
3839
4078
|
//# sourceMappingURL=index.js.map
|
|
3840
4079
|
//# sourceMappingURL=index.js.map
|