@onlynative/components 0.0.0-alpha.0 → 0.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/appbar/index.js +27 -26
- package/dist/avatar/index.js +7 -6
- package/dist/button/index.js +34 -31
- package/dist/card/index.js +34 -18
- package/dist/checkbox/index.js +35 -30
- package/dist/chip/index.js +37 -32
- package/dist/icon-button/index.js +5 -4
- package/dist/index.js +185 -252
- package/dist/list/index.js +52 -30
- package/dist/radio/index.js +27 -28
- package/dist/switch/index.js +35 -30
- package/dist/text-field/index.js +19 -18
- package/llms.txt +2 -2
- package/package.json +3 -18
package/dist/index.js
CHANGED
|
@@ -339,9 +339,7 @@ function Grid({
|
|
|
339
339
|
|
|
340
340
|
// src/button/Button.tsx
|
|
341
341
|
var import_react7 = require("react");
|
|
342
|
-
var import_react_native8 = require("react-native");
|
|
343
342
|
var import_react_native9 = require("react-native");
|
|
344
|
-
var import_react_native10 = require("react-native");
|
|
345
343
|
var import_core5 = require("@onlynative/core");
|
|
346
344
|
|
|
347
345
|
// ../utils/dist/chunk-OQRDRRQA.mjs
|
|
@@ -355,6 +353,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
|
|
|
355
353
|
// ../utils/dist/index.mjs
|
|
356
354
|
var import_react_native5 = require("react-native");
|
|
357
355
|
var import_react_native6 = require("react-native");
|
|
356
|
+
var import_react_native7 = require("react-native");
|
|
358
357
|
function parseHexColor(color) {
|
|
359
358
|
const normalized = color.replace("#", "");
|
|
360
359
|
if (normalized.length !== 6 && normalized.length !== 8) {
|
|
@@ -437,15 +436,37 @@ function getMaterialCommunityIcons() {
|
|
|
437
436
|
}
|
|
438
437
|
return _MCIcons;
|
|
439
438
|
}
|
|
439
|
+
function resolvePressableStyle(base, hovered, pressed, disabled, isDisabled, style) {
|
|
440
|
+
if (typeof style === "function") {
|
|
441
|
+
return (state) => [
|
|
442
|
+
base,
|
|
443
|
+
state.hovered && !state.pressed && !isDisabled ? hovered : void 0,
|
|
444
|
+
state.pressed && !isDisabled ? pressed : void 0,
|
|
445
|
+
isDisabled ? disabled : void 0,
|
|
446
|
+
style(state)
|
|
447
|
+
];
|
|
448
|
+
}
|
|
449
|
+
return (state) => [
|
|
450
|
+
base,
|
|
451
|
+
state.hovered && !state.pressed && !isDisabled ? hovered : void 0,
|
|
452
|
+
state.pressed && !isDisabled ? pressed : void 0,
|
|
453
|
+
isDisabled ? disabled : void 0,
|
|
454
|
+
style
|
|
455
|
+
];
|
|
456
|
+
}
|
|
457
|
+
function resolveColorFromStyle(...styles3) {
|
|
458
|
+
const flattened = import_react_native6.StyleSheet.flatten(styles3);
|
|
459
|
+
return typeof (flattened == null ? void 0 : flattened.color) === "string" ? flattened.color : void 0;
|
|
460
|
+
}
|
|
440
461
|
function transformOrigin(vertical = "top") {
|
|
441
|
-
return
|
|
462
|
+
return import_react_native7.I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`;
|
|
442
463
|
}
|
|
443
464
|
function selectRTL(ltr, rtl) {
|
|
444
|
-
return
|
|
465
|
+
return import_react_native7.I18nManager.isRTL ? rtl : ltr;
|
|
445
466
|
}
|
|
446
467
|
|
|
447
468
|
// src/button/styles.ts
|
|
448
|
-
var
|
|
469
|
+
var import_react_native8 = require("react-native");
|
|
449
470
|
function getVariantColors(theme, variant) {
|
|
450
471
|
const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
|
|
451
472
|
const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
|
|
@@ -626,7 +647,7 @@ function createStyles(theme, variant, hasLeadingIcon, hasTrailingIcon, container
|
|
|
626
647
|
const elevationLevel1 = elevationStyle(theme.elevation.level1);
|
|
627
648
|
const elevationLevel2 = elevationStyle(theme.elevation.level2);
|
|
628
649
|
const baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
|
|
629
|
-
return
|
|
650
|
+
return import_react_native8.StyleSheet.create({
|
|
630
651
|
container: {
|
|
631
652
|
alignSelf: "flex-start",
|
|
632
653
|
alignItems: "center",
|
|
@@ -679,24 +700,6 @@ function createStyles(theme, variant, hasLeadingIcon, hasTrailingIcon, container
|
|
|
679
700
|
|
|
680
701
|
// src/button/Button.tsx
|
|
681
702
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
682
|
-
function resolveStyle(containerStyle, hoveredContainerStyle, pressedContainerStyle, disabledContainerStyle, disabled, style) {
|
|
683
|
-
if (typeof style === "function") {
|
|
684
|
-
return (state) => [
|
|
685
|
-
containerStyle,
|
|
686
|
-
state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
|
|
687
|
-
state.pressed && !disabled ? pressedContainerStyle : void 0,
|
|
688
|
-
disabled ? disabledContainerStyle : void 0,
|
|
689
|
-
style(state)
|
|
690
|
-
];
|
|
691
|
-
}
|
|
692
|
-
return (state) => [
|
|
693
|
-
containerStyle,
|
|
694
|
-
state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
|
|
695
|
-
state.pressed && !disabled ? pressedContainerStyle : void 0,
|
|
696
|
-
disabled ? disabledContainerStyle : void 0,
|
|
697
|
-
style
|
|
698
|
-
];
|
|
699
|
-
}
|
|
700
703
|
function Button({
|
|
701
704
|
children,
|
|
702
705
|
style,
|
|
@@ -726,13 +729,13 @@ function Button({
|
|
|
726
729
|
[theme, variant, hasLeading, hasTrailing, containerColor, contentColor]
|
|
727
730
|
);
|
|
728
731
|
const MaterialCommunityIcons = leadingIcon || trailingIcon ? getMaterialCommunityIcons() : null;
|
|
729
|
-
const resolvedIconColor = (0, import_react7.useMemo)(
|
|
730
|
-
|
|
732
|
+
const resolvedIconColor = (0, import_react7.useMemo)(
|
|
733
|
+
() => resolveColorFromStyle(
|
|
731
734
|
styles3.label,
|
|
732
735
|
isDisabled ? styles3.disabledLabel : void 0
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
+
),
|
|
737
|
+
[styles3.label, styles3.disabledLabel, isDisabled]
|
|
738
|
+
);
|
|
736
739
|
const computedLabelStyle = (0, import_react7.useMemo)(
|
|
737
740
|
() => [
|
|
738
741
|
styles3.label,
|
|
@@ -742,14 +745,14 @@ function Button({
|
|
|
742
745
|
[isDisabled, styles3.disabledLabel, styles3.label, labelStyleOverride]
|
|
743
746
|
);
|
|
744
747
|
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
745
|
-
|
|
748
|
+
import_react_native9.Pressable,
|
|
746
749
|
{
|
|
747
750
|
...props,
|
|
748
751
|
accessibilityRole: "button",
|
|
749
752
|
accessibilityState: { disabled: isDisabled },
|
|
750
|
-
hitSlop:
|
|
753
|
+
hitSlop: import_react_native9.Platform.OS === "web" ? void 0 : 4,
|
|
751
754
|
disabled: isDisabled,
|
|
752
|
-
style:
|
|
755
|
+
style: resolvePressableStyle(
|
|
753
756
|
styles3.container,
|
|
754
757
|
styles3.hoveredContainer,
|
|
755
758
|
styles3.pressedContainer,
|
|
@@ -767,7 +770,7 @@ function Button({
|
|
|
767
770
|
style: styles3.leadingIcon
|
|
768
771
|
}
|
|
769
772
|
) : null,
|
|
770
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
773
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.Text, { style: computedLabelStyle, children }),
|
|
771
774
|
trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
772
775
|
MaterialCommunityIcons,
|
|
773
776
|
{
|
|
@@ -784,16 +787,16 @@ function Button({
|
|
|
784
787
|
|
|
785
788
|
// src/icon-button/IconButton.tsx
|
|
786
789
|
var import_react8 = require("react");
|
|
787
|
-
var
|
|
790
|
+
var import_react_native11 = require("react-native");
|
|
788
791
|
var import_core6 = require("@onlynative/core");
|
|
789
792
|
|
|
790
793
|
// src/icon-button/styles.ts
|
|
791
|
-
var
|
|
794
|
+
var import_react_native10 = require("react-native");
|
|
792
795
|
function createStyles2(theme) {
|
|
793
796
|
const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
|
|
794
797
|
const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
|
|
795
798
|
const toggleUnselectedContainerColor = theme.colors.surfaceContainerHighest;
|
|
796
|
-
return
|
|
799
|
+
return import_react_native10.StyleSheet.create({
|
|
797
800
|
container: {
|
|
798
801
|
borderRadius: theme.shape.cornerFull,
|
|
799
802
|
alignItems: "center",
|
|
@@ -1231,7 +1234,7 @@ function IconButton({
|
|
|
1231
1234
|
};
|
|
1232
1235
|
}, [containerColor, resolvedIconColor, theme.stateLayer]);
|
|
1233
1236
|
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1234
|
-
|
|
1237
|
+
import_react_native11.Pressable,
|
|
1235
1238
|
{
|
|
1236
1239
|
...props,
|
|
1237
1240
|
accessibilityRole: "button",
|
|
@@ -1274,12 +1277,12 @@ function IconButton({
|
|
|
1274
1277
|
|
|
1275
1278
|
// src/appbar/AppBar.tsx
|
|
1276
1279
|
var import_react9 = require("react");
|
|
1277
|
-
var
|
|
1280
|
+
var import_react_native13 = require("react-native");
|
|
1278
1281
|
var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
|
|
1279
1282
|
var import_core8 = require("@onlynative/core");
|
|
1280
1283
|
|
|
1281
1284
|
// src/appbar/styles.ts
|
|
1282
|
-
var
|
|
1285
|
+
var import_react_native12 = require("react-native");
|
|
1283
1286
|
var import_core7 = require("@onlynative/core");
|
|
1284
1287
|
function getColorSchemeColors(theme, colorScheme) {
|
|
1285
1288
|
switch (colorScheme) {
|
|
@@ -1337,7 +1340,7 @@ function getColorSchemeColors(theme, colorScheme) {
|
|
|
1337
1340
|
function createStyles3(theme, schemeColors) {
|
|
1338
1341
|
var _a;
|
|
1339
1342
|
const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core7.defaultTopAppBarTokens;
|
|
1340
|
-
return
|
|
1343
|
+
return import_react_native12.StyleSheet.create({
|
|
1341
1344
|
root: {
|
|
1342
1345
|
backgroundColor: schemeColors.containerColor
|
|
1343
1346
|
},
|
|
@@ -1426,7 +1429,7 @@ function createStyles3(theme, schemeColors) {
|
|
|
1426
1429
|
// src/appbar/AppBar.tsx
|
|
1427
1430
|
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1428
1431
|
function getBackIcon() {
|
|
1429
|
-
if (
|
|
1432
|
+
if (import_react_native13.Platform.OS === "ios") {
|
|
1430
1433
|
return selectRTL("chevron-left", "chevron-right");
|
|
1431
1434
|
}
|
|
1432
1435
|
return selectRTL("arrow-left", "arrow-right");
|
|
@@ -1457,7 +1460,7 @@ function withTopInset(enabled, content, style) {
|
|
|
1457
1460
|
if (enabled) {
|
|
1458
1461
|
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_safe_area_context2.SafeAreaView, { edges: ["top"], style, children: content });
|
|
1459
1462
|
}
|
|
1460
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1463
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style, children: content });
|
|
1461
1464
|
}
|
|
1462
1465
|
function measureWidth(event) {
|
|
1463
1466
|
return Math.round(event.nativeEvent.layout.width);
|
|
@@ -1518,7 +1521,7 @@ function AppBar({
|
|
|
1518
1521
|
if (!canGoBack) {
|
|
1519
1522
|
return null;
|
|
1520
1523
|
}
|
|
1521
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1524
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: styles3.iconFrame, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1522
1525
|
IconButton,
|
|
1523
1526
|
{
|
|
1524
1527
|
icon: getBackIcon(),
|
|
@@ -1537,8 +1540,8 @@ function AppBar({
|
|
|
1537
1540
|
if (!actions || actions.length === 0) {
|
|
1538
1541
|
return null;
|
|
1539
1542
|
}
|
|
1540
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1541
|
-
|
|
1543
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: styles3.actionsRow, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1544
|
+
import_react_native13.View,
|
|
1542
1545
|
{
|
|
1543
1546
|
style: styles3.iconFrame,
|
|
1544
1547
|
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
@@ -1575,9 +1578,9 @@ function AppBar({
|
|
|
1575
1578
|
return nextWidth;
|
|
1576
1579
|
});
|
|
1577
1580
|
}, []);
|
|
1578
|
-
const topRow = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1581
|
+
const topRow = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native13.View, { style: styles3.topRow, children: [
|
|
1579
1582
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1580
|
-
|
|
1583
|
+
import_react_native13.View,
|
|
1581
1584
|
{
|
|
1582
1585
|
collapsable: false,
|
|
1583
1586
|
onLayout: onLeadingLayout,
|
|
@@ -1585,9 +1588,9 @@ function AppBar({
|
|
|
1585
1588
|
children: leadingContent
|
|
1586
1589
|
}
|
|
1587
1590
|
),
|
|
1588
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1591
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: styles3.topRowSpacer }),
|
|
1589
1592
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1590
|
-
|
|
1593
|
+
import_react_native13.View,
|
|
1591
1594
|
{
|
|
1592
1595
|
collapsable: false,
|
|
1593
1596
|
onLayout: onActionsLayout,
|
|
@@ -1609,10 +1612,10 @@ function AppBar({
|
|
|
1609
1612
|
containerOverride
|
|
1610
1613
|
];
|
|
1611
1614
|
if (isExpanded) {
|
|
1612
|
-
const content2 = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1615
|
+
const content2 = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native13.View, { style: [styles3.expandedContainer, getSizeStyle2(styles3, size)], children: [
|
|
1613
1616
|
topRow,
|
|
1614
1617
|
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1615
|
-
|
|
1618
|
+
import_react_native13.View,
|
|
1616
1619
|
{
|
|
1617
1620
|
style: [
|
|
1618
1621
|
styles3.expandedTitleContainer,
|
|
@@ -1636,11 +1639,11 @@ function AppBar({
|
|
|
1636
1639
|
}
|
|
1637
1640
|
)
|
|
1638
1641
|
] });
|
|
1639
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1642
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: rootStyle, children: withTopInset(insetTop, content2, safeAreaStyle) });
|
|
1640
1643
|
}
|
|
1641
|
-
const content = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1644
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native13.View, { style: styles3.smallContainer, children: [
|
|
1642
1645
|
topRow,
|
|
1643
|
-
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1646
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: [styles3.overlayTitleContainer, overlayTitleInsetStyle], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1644
1647
|
Typography,
|
|
1645
1648
|
{
|
|
1646
1649
|
...APP_BAR_TITLE_TEXT_PROPS,
|
|
@@ -1655,16 +1658,16 @@ function AppBar({
|
|
|
1655
1658
|
}
|
|
1656
1659
|
) })
|
|
1657
1660
|
] });
|
|
1658
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1661
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native13.View, { style: rootStyle, children: withTopInset(insetTop, content, safeAreaStyle) });
|
|
1659
1662
|
}
|
|
1660
1663
|
|
|
1661
1664
|
// src/card/Card.tsx
|
|
1662
1665
|
var import_react10 = require("react");
|
|
1663
|
-
var
|
|
1666
|
+
var import_react_native15 = require("react-native");
|
|
1664
1667
|
var import_core9 = require("@onlynative/core");
|
|
1665
1668
|
|
|
1666
1669
|
// src/card/styles.ts
|
|
1667
|
-
var
|
|
1670
|
+
var import_react_native14 = require("react-native");
|
|
1668
1671
|
function getVariantColors2(theme, variant) {
|
|
1669
1672
|
const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
|
|
1670
1673
|
const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
|
|
@@ -1748,7 +1751,7 @@ function createStyles4(theme, variant, containerColor) {
|
|
|
1748
1751
|
const elevationLevel1 = elevationStyle(theme.elevation.level1);
|
|
1749
1752
|
const elevationLevel2 = elevationStyle(theme.elevation.level2);
|
|
1750
1753
|
const baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
|
|
1751
|
-
return
|
|
1754
|
+
return import_react_native14.StyleSheet.create({
|
|
1752
1755
|
container: {
|
|
1753
1756
|
borderRadius: theme.shape.cornerMedium,
|
|
1754
1757
|
backgroundColor: colors.backgroundColor,
|
|
@@ -1798,38 +1801,37 @@ function Card({
|
|
|
1798
1801
|
[theme, variant, containerColor]
|
|
1799
1802
|
);
|
|
1800
1803
|
if (!isInteractive) {
|
|
1801
|
-
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1802
|
-
}
|
|
1803
|
-
const resolvedStyle = (state) => [
|
|
1804
|
-
styles3.container,
|
|
1805
|
-
styles3.interactiveContainer,
|
|
1806
|
-
state.hovered && !state.pressed && !isDisabled ? styles3.hoveredContainer : void 0,
|
|
1807
|
-
state.pressed && !isDisabled ? styles3.pressedContainer : void 0,
|
|
1808
|
-
isDisabled ? styles3.disabledContainer : void 0,
|
|
1809
|
-
typeof style === "function" ? style(state) : style
|
|
1810
|
-
];
|
|
1804
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native15.View, { ...props, style: [styles3.container, style], children });
|
|
1805
|
+
}
|
|
1811
1806
|
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1812
|
-
|
|
1807
|
+
import_react_native15.Pressable,
|
|
1813
1808
|
{
|
|
1814
1809
|
...props,
|
|
1815
1810
|
role: "button",
|
|
1816
1811
|
accessibilityState: { disabled: isDisabled },
|
|
1817
|
-
hitSlop:
|
|
1812
|
+
hitSlop: import_react_native15.Platform.OS === "web" ? void 0 : 4,
|
|
1818
1813
|
disabled: isDisabled,
|
|
1819
1814
|
onPress,
|
|
1820
|
-
style:
|
|
1821
|
-
|
|
1815
|
+
style: resolvePressableStyle(
|
|
1816
|
+
[styles3.container, styles3.interactiveContainer],
|
|
1817
|
+
styles3.hoveredContainer,
|
|
1818
|
+
styles3.pressedContainer,
|
|
1819
|
+
styles3.disabledContainer,
|
|
1820
|
+
isDisabled,
|
|
1821
|
+
style
|
|
1822
|
+
),
|
|
1823
|
+
children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native15.View, { style: styles3.disabledContent, children }) : children
|
|
1822
1824
|
}
|
|
1823
1825
|
);
|
|
1824
1826
|
}
|
|
1825
1827
|
|
|
1826
1828
|
// src/chip/Chip.tsx
|
|
1827
1829
|
var import_react11 = require("react");
|
|
1828
|
-
var
|
|
1830
|
+
var import_react_native17 = require("react-native");
|
|
1829
1831
|
var import_core10 = require("@onlynative/core");
|
|
1830
1832
|
|
|
1831
1833
|
// src/chip/styles.ts
|
|
1832
|
-
var
|
|
1834
|
+
var import_react_native16 = require("react-native");
|
|
1833
1835
|
function getVariantColors3(theme, variant, elevated, selected) {
|
|
1834
1836
|
const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
|
|
1835
1837
|
const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
|
|
@@ -1957,7 +1959,7 @@ function createStyles5(theme, variant, elevated, selected, hasLeadingContent, ha
|
|
|
1957
1959
|
const elevationLevel2 = elevationStyle(theme.elevation.level2);
|
|
1958
1960
|
const isElevated = elevated && variant !== "input";
|
|
1959
1961
|
const baseElevation = isElevated ? elevationLevel1 : elevationLevel0;
|
|
1960
|
-
return
|
|
1962
|
+
return import_react_native16.StyleSheet.create({
|
|
1961
1963
|
container: {
|
|
1962
1964
|
alignSelf: "flex-start",
|
|
1963
1965
|
alignItems: "center",
|
|
@@ -2014,24 +2016,6 @@ function createStyles5(theme, variant, elevated, selected, hasLeadingContent, ha
|
|
|
2014
2016
|
|
|
2015
2017
|
// src/chip/Chip.tsx
|
|
2016
2018
|
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
2017
|
-
function resolveStyle2(containerStyle, hoveredContainerStyle, pressedContainerStyle, disabledContainerStyle, disabled, style) {
|
|
2018
|
-
if (typeof style === "function") {
|
|
2019
|
-
return (state) => [
|
|
2020
|
-
containerStyle,
|
|
2021
|
-
state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
|
|
2022
|
-
state.pressed && !disabled ? pressedContainerStyle : void 0,
|
|
2023
|
-
disabled ? disabledContainerStyle : void 0,
|
|
2024
|
-
style(state)
|
|
2025
|
-
];
|
|
2026
|
-
}
|
|
2027
|
-
return (state) => [
|
|
2028
|
-
containerStyle,
|
|
2029
|
-
state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
|
|
2030
|
-
state.pressed && !disabled ? pressedContainerStyle : void 0,
|
|
2031
|
-
disabled ? disabledContainerStyle : void 0,
|
|
2032
|
-
style
|
|
2033
|
-
];
|
|
2034
|
-
}
|
|
2035
2019
|
function Chip({
|
|
2036
2020
|
children,
|
|
2037
2021
|
style,
|
|
@@ -2079,13 +2063,13 @@ function Chip({
|
|
|
2079
2063
|
contentColor
|
|
2080
2064
|
]
|
|
2081
2065
|
);
|
|
2082
|
-
const resolvedIconColor = (0, import_react11.useMemo)(
|
|
2083
|
-
|
|
2066
|
+
const resolvedIconColor = (0, import_react11.useMemo)(
|
|
2067
|
+
() => resolveColorFromStyle(
|
|
2084
2068
|
styles3.label,
|
|
2085
2069
|
isDisabled ? styles3.disabledLabel : void 0
|
|
2086
|
-
|
|
2087
|
-
|
|
2088
|
-
|
|
2070
|
+
),
|
|
2071
|
+
[styles3.label, styles3.disabledLabel, isDisabled]
|
|
2072
|
+
);
|
|
2089
2073
|
const computedLabelStyle = (0, import_react11.useMemo)(
|
|
2090
2074
|
() => [
|
|
2091
2075
|
styles3.label,
|
|
@@ -2096,7 +2080,7 @@ function Chip({
|
|
|
2096
2080
|
);
|
|
2097
2081
|
const renderLeadingContent = () => {
|
|
2098
2082
|
if (variant === "input" && avatar) {
|
|
2099
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2083
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native17.View, { style: styles3.avatar, children: avatar });
|
|
2100
2084
|
}
|
|
2101
2085
|
if (leadingIcon) {
|
|
2102
2086
|
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
@@ -2123,7 +2107,7 @@ function Chip({
|
|
|
2123
2107
|
return null;
|
|
2124
2108
|
};
|
|
2125
2109
|
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
2126
|
-
|
|
2110
|
+
import_react_native17.Pressable,
|
|
2127
2111
|
{
|
|
2128
2112
|
...props,
|
|
2129
2113
|
accessibilityRole: "button",
|
|
@@ -2131,9 +2115,9 @@ function Chip({
|
|
|
2131
2115
|
disabled: isDisabled,
|
|
2132
2116
|
...variant === "filter" ? { selected: isSelected } : void 0
|
|
2133
2117
|
},
|
|
2134
|
-
hitSlop:
|
|
2118
|
+
hitSlop: import_react_native17.Platform.OS === "web" ? void 0 : 4,
|
|
2135
2119
|
disabled: isDisabled,
|
|
2136
|
-
style:
|
|
2120
|
+
style: resolvePressableStyle(
|
|
2137
2121
|
styles3.container,
|
|
2138
2122
|
styles3.hoveredContainer,
|
|
2139
2123
|
styles3.pressedContainer,
|
|
@@ -2143,9 +2127,9 @@ function Chip({
|
|
|
2143
2127
|
),
|
|
2144
2128
|
children: [
|
|
2145
2129
|
renderLeadingContent(),
|
|
2146
|
-
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2130
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native17.Text, { style: computedLabelStyle, children }),
|
|
2147
2131
|
showCloseIcon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
2148
|
-
|
|
2132
|
+
import_react_native17.Pressable,
|
|
2149
2133
|
{
|
|
2150
2134
|
onPress: onClose,
|
|
2151
2135
|
accessibilityRole: "button",
|
|
@@ -2169,11 +2153,11 @@ function Chip({
|
|
|
2169
2153
|
|
|
2170
2154
|
// src/checkbox/Checkbox.tsx
|
|
2171
2155
|
var import_react12 = require("react");
|
|
2172
|
-
var
|
|
2156
|
+
var import_react_native19 = require("react-native");
|
|
2173
2157
|
var import_core11 = require("@onlynative/core");
|
|
2174
2158
|
|
|
2175
2159
|
// src/checkbox/styles.ts
|
|
2176
|
-
var
|
|
2160
|
+
var import_react_native18 = require("react-native");
|
|
2177
2161
|
function getColors(theme, checked) {
|
|
2178
2162
|
const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
|
|
2179
2163
|
if (checked) {
|
|
@@ -2249,7 +2233,7 @@ function createStyles6(theme, checked, containerColor, contentColor) {
|
|
|
2249
2233
|
);
|
|
2250
2234
|
const size = 18;
|
|
2251
2235
|
const touchTarget = 48;
|
|
2252
|
-
return
|
|
2236
|
+
return import_react_native18.StyleSheet.create({
|
|
2253
2237
|
container: {
|
|
2254
2238
|
width: touchTarget,
|
|
2255
2239
|
height: touchTarget,
|
|
@@ -2294,24 +2278,6 @@ function createStyles6(theme, checked, containerColor, contentColor) {
|
|
|
2294
2278
|
|
|
2295
2279
|
// src/checkbox/Checkbox.tsx
|
|
2296
2280
|
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
2297
|
-
function resolveStyle3(containerStyle, hoveredContainerStyle, pressedContainerStyle, disabledContainerStyle, disabled, style) {
|
|
2298
|
-
if (typeof style === "function") {
|
|
2299
|
-
return (state) => [
|
|
2300
|
-
containerStyle,
|
|
2301
|
-
state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
|
|
2302
|
-
state.pressed && !disabled ? pressedContainerStyle : void 0,
|
|
2303
|
-
disabled ? disabledContainerStyle : void 0,
|
|
2304
|
-
style(state)
|
|
2305
|
-
];
|
|
2306
|
-
}
|
|
2307
|
-
return (state) => [
|
|
2308
|
-
containerStyle,
|
|
2309
|
-
state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
|
|
2310
|
-
state.pressed && !disabled ? pressedContainerStyle : void 0,
|
|
2311
|
-
disabled ? disabledContainerStyle : void 0,
|
|
2312
|
-
style
|
|
2313
|
-
];
|
|
2314
|
-
}
|
|
2315
2281
|
function Checkbox({
|
|
2316
2282
|
style,
|
|
2317
2283
|
value = false,
|
|
@@ -2329,20 +2295,20 @@ function Checkbox({
|
|
|
2329
2295
|
() => createStyles6(theme, isChecked, containerColor, contentColor),
|
|
2330
2296
|
[theme, isChecked, containerColor, contentColor]
|
|
2331
2297
|
);
|
|
2332
|
-
const resolvedIconColor = (0, import_react12.useMemo)(
|
|
2333
|
-
|
|
2298
|
+
const resolvedIconColor = (0, import_react12.useMemo)(
|
|
2299
|
+
() => resolveColorFromStyle(
|
|
2334
2300
|
styles3.iconColor,
|
|
2335
2301
|
isDisabled ? styles3.disabledIconColor : void 0
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2302
|
+
),
|
|
2303
|
+
[styles3.iconColor, styles3.disabledIconColor, isDisabled]
|
|
2304
|
+
);
|
|
2339
2305
|
const handlePress = () => {
|
|
2340
2306
|
if (!isDisabled) {
|
|
2341
2307
|
onValueChange == null ? void 0 : onValueChange(!isChecked);
|
|
2342
2308
|
}
|
|
2343
2309
|
};
|
|
2344
2310
|
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2345
|
-
|
|
2311
|
+
import_react_native19.Pressable,
|
|
2346
2312
|
{
|
|
2347
2313
|
...props,
|
|
2348
2314
|
accessibilityRole: "checkbox",
|
|
@@ -2350,10 +2316,10 @@ function Checkbox({
|
|
|
2350
2316
|
disabled: isDisabled,
|
|
2351
2317
|
checked: isChecked
|
|
2352
2318
|
},
|
|
2353
|
-
hitSlop:
|
|
2319
|
+
hitSlop: import_react_native19.Platform.OS === "web" ? void 0 : 4,
|
|
2354
2320
|
disabled: isDisabled,
|
|
2355
2321
|
onPress: handlePress,
|
|
2356
|
-
style:
|
|
2322
|
+
style: resolvePressableStyle(
|
|
2357
2323
|
styles3.container,
|
|
2358
2324
|
styles3.hoveredContainer,
|
|
2359
2325
|
styles3.pressedContainer,
|
|
@@ -2361,7 +2327,7 @@ function Checkbox({
|
|
|
2361
2327
|
isDisabled,
|
|
2362
2328
|
style
|
|
2363
2329
|
),
|
|
2364
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2330
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native19.View, { style: [styles3.box, isDisabled ? styles3.disabledBox : void 0], children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
2365
2331
|
MaterialCommunityIcons,
|
|
2366
2332
|
{
|
|
2367
2333
|
name: "check",
|
|
@@ -2375,11 +2341,11 @@ function Checkbox({
|
|
|
2375
2341
|
|
|
2376
2342
|
// src/radio/Radio.tsx
|
|
2377
2343
|
var import_react13 = require("react");
|
|
2378
|
-
var
|
|
2344
|
+
var import_react_native21 = require("react-native");
|
|
2379
2345
|
var import_core12 = require("@onlynative/core");
|
|
2380
2346
|
|
|
2381
2347
|
// src/radio/styles.ts
|
|
2382
|
-
var
|
|
2348
|
+
var import_react_native20 = require("react-native");
|
|
2383
2349
|
function getColors2(theme, selected) {
|
|
2384
2350
|
const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
|
|
2385
2351
|
if (selected) {
|
|
@@ -2443,7 +2409,7 @@ function createStyles7(theme, selected, containerColor, contentColor) {
|
|
|
2443
2409
|
const outerSize = 20;
|
|
2444
2410
|
const innerSize = 10;
|
|
2445
2411
|
const touchTarget = 48;
|
|
2446
|
-
return
|
|
2412
|
+
return import_react_native20.StyleSheet.create({
|
|
2447
2413
|
container: {
|
|
2448
2414
|
width: touchTarget,
|
|
2449
2415
|
height: touchTarget,
|
|
@@ -2488,24 +2454,6 @@ function createStyles7(theme, selected, containerColor, contentColor) {
|
|
|
2488
2454
|
|
|
2489
2455
|
// src/radio/Radio.tsx
|
|
2490
2456
|
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
2491
|
-
function resolveStyle4(containerStyle, hoveredContainerStyle, pressedContainerStyle, disabledContainerStyle, disabled, style) {
|
|
2492
|
-
if (typeof style === "function") {
|
|
2493
|
-
return (state) => [
|
|
2494
|
-
containerStyle,
|
|
2495
|
-
state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
|
|
2496
|
-
state.pressed && !disabled ? pressedContainerStyle : void 0,
|
|
2497
|
-
disabled ? disabledContainerStyle : void 0,
|
|
2498
|
-
style(state)
|
|
2499
|
-
];
|
|
2500
|
-
}
|
|
2501
|
-
return (state) => [
|
|
2502
|
-
containerStyle,
|
|
2503
|
-
state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
|
|
2504
|
-
state.pressed && !disabled ? pressedContainerStyle : void 0,
|
|
2505
|
-
disabled ? disabledContainerStyle : void 0,
|
|
2506
|
-
style
|
|
2507
|
-
];
|
|
2508
|
-
}
|
|
2509
2457
|
function Radio({
|
|
2510
2458
|
style,
|
|
2511
2459
|
value = false,
|
|
@@ -2528,7 +2476,7 @@ function Radio({
|
|
|
2528
2476
|
}
|
|
2529
2477
|
};
|
|
2530
2478
|
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2531
|
-
|
|
2479
|
+
import_react_native21.Pressable,
|
|
2532
2480
|
{
|
|
2533
2481
|
...props,
|
|
2534
2482
|
accessibilityRole: "radio",
|
|
@@ -2536,10 +2484,10 @@ function Radio({
|
|
|
2536
2484
|
disabled: isDisabled,
|
|
2537
2485
|
checked: isSelected
|
|
2538
2486
|
},
|
|
2539
|
-
hitSlop:
|
|
2487
|
+
hitSlop: import_react_native21.Platform.OS === "web" ? void 0 : 4,
|
|
2540
2488
|
disabled: isDisabled,
|
|
2541
2489
|
onPress: handlePress,
|
|
2542
|
-
style:
|
|
2490
|
+
style: resolvePressableStyle(
|
|
2543
2491
|
styles3.container,
|
|
2544
2492
|
styles3.hoveredContainer,
|
|
2545
2493
|
styles3.pressedContainer,
|
|
@@ -2548,11 +2496,11 @@ function Radio({
|
|
|
2548
2496
|
style
|
|
2549
2497
|
),
|
|
2550
2498
|
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2551
|
-
|
|
2499
|
+
import_react_native21.View,
|
|
2552
2500
|
{
|
|
2553
2501
|
style: [styles3.outer, isDisabled ? styles3.disabledOuter : void 0],
|
|
2554
2502
|
children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
2555
|
-
|
|
2503
|
+
import_react_native21.View,
|
|
2556
2504
|
{
|
|
2557
2505
|
style: [
|
|
2558
2506
|
styles3.inner,
|
|
@@ -2568,11 +2516,11 @@ function Radio({
|
|
|
2568
2516
|
|
|
2569
2517
|
// src/switch/Switch.tsx
|
|
2570
2518
|
var import_react14 = require("react");
|
|
2571
|
-
var
|
|
2519
|
+
var import_react_native23 = require("react-native");
|
|
2572
2520
|
var import_core13 = require("@onlynative/core");
|
|
2573
2521
|
|
|
2574
2522
|
// src/switch/styles.ts
|
|
2575
|
-
var
|
|
2523
|
+
var import_react_native22 = require("react-native");
|
|
2576
2524
|
function getColors3(theme, selected) {
|
|
2577
2525
|
const disabledOnSurface12 = alphaColor(theme.colors.onSurface, 0.12);
|
|
2578
2526
|
const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
|
|
@@ -2660,7 +2608,7 @@ function createStyles8(theme, selected, hasIcon, containerColor, contentColor) {
|
|
|
2660
2608
|
const trackHeight = 32;
|
|
2661
2609
|
const trackPadding = 4;
|
|
2662
2610
|
const thumbOffset = selected ? trackWidth - trackPadding - thumbSize : trackPadding;
|
|
2663
|
-
return
|
|
2611
|
+
return import_react_native22.StyleSheet.create({
|
|
2664
2612
|
track: {
|
|
2665
2613
|
width: trackWidth,
|
|
2666
2614
|
height: trackHeight,
|
|
@@ -2706,24 +2654,6 @@ function createStyles8(theme, selected, hasIcon, containerColor, contentColor) {
|
|
|
2706
2654
|
|
|
2707
2655
|
// src/switch/Switch.tsx
|
|
2708
2656
|
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
2709
|
-
function resolveStyle5(trackStyle, hoveredTrackStyle, pressedTrackStyle, disabledTrackStyle, disabled, style) {
|
|
2710
|
-
if (typeof style === "function") {
|
|
2711
|
-
return (state) => [
|
|
2712
|
-
trackStyle,
|
|
2713
|
-
state.hovered && !state.pressed && !disabled ? hoveredTrackStyle : void 0,
|
|
2714
|
-
state.pressed && !disabled ? pressedTrackStyle : void 0,
|
|
2715
|
-
disabled ? disabledTrackStyle : void 0,
|
|
2716
|
-
style(state)
|
|
2717
|
-
];
|
|
2718
|
-
}
|
|
2719
|
-
return (state) => [
|
|
2720
|
-
trackStyle,
|
|
2721
|
-
state.hovered && !state.pressed && !disabled ? hoveredTrackStyle : void 0,
|
|
2722
|
-
state.pressed && !disabled ? pressedTrackStyle : void 0,
|
|
2723
|
-
disabled ? disabledTrackStyle : void 0,
|
|
2724
|
-
style
|
|
2725
|
-
];
|
|
2726
|
-
}
|
|
2727
2657
|
function Switch({
|
|
2728
2658
|
style,
|
|
2729
2659
|
value = false,
|
|
@@ -2743,13 +2673,13 @@ function Switch({
|
|
|
2743
2673
|
() => createStyles8(theme, isSelected, hasIcon, containerColor, contentColor),
|
|
2744
2674
|
[theme, isSelected, hasIcon, containerColor, contentColor]
|
|
2745
2675
|
);
|
|
2746
|
-
const resolvedIconColor = (0, import_react14.useMemo)(
|
|
2747
|
-
|
|
2676
|
+
const resolvedIconColor = (0, import_react14.useMemo)(
|
|
2677
|
+
() => resolveColorFromStyle(
|
|
2748
2678
|
styles3.iconColor,
|
|
2749
2679
|
isDisabled ? styles3.disabledIconColor : void 0
|
|
2750
|
-
|
|
2751
|
-
|
|
2752
|
-
|
|
2680
|
+
),
|
|
2681
|
+
[styles3.iconColor, styles3.disabledIconColor, isDisabled]
|
|
2682
|
+
);
|
|
2753
2683
|
const handlePress = () => {
|
|
2754
2684
|
if (!isDisabled) {
|
|
2755
2685
|
onValueChange == null ? void 0 : onValueChange(!isSelected);
|
|
@@ -2759,7 +2689,7 @@ function Switch({
|
|
|
2759
2689
|
const MaterialCommunityIcons = iconName ? getMaterialCommunityIcons() : null;
|
|
2760
2690
|
const iconSize = 16;
|
|
2761
2691
|
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2762
|
-
|
|
2692
|
+
import_react_native23.Pressable,
|
|
2763
2693
|
{
|
|
2764
2694
|
...props,
|
|
2765
2695
|
accessibilityRole: "switch",
|
|
@@ -2767,10 +2697,10 @@ function Switch({
|
|
|
2767
2697
|
disabled: isDisabled,
|
|
2768
2698
|
checked: isSelected
|
|
2769
2699
|
},
|
|
2770
|
-
hitSlop:
|
|
2700
|
+
hitSlop: import_react_native23.Platform.OS === "web" ? void 0 : 4,
|
|
2771
2701
|
disabled: isDisabled,
|
|
2772
2702
|
onPress: handlePress,
|
|
2773
|
-
style:
|
|
2703
|
+
style: resolvePressableStyle(
|
|
2774
2704
|
styles3.track,
|
|
2775
2705
|
styles3.hoveredTrack,
|
|
2776
2706
|
styles3.pressedTrack,
|
|
@@ -2779,7 +2709,7 @@ function Switch({
|
|
|
2779
2709
|
style
|
|
2780
2710
|
),
|
|
2781
2711
|
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
2782
|
-
|
|
2712
|
+
import_react_native23.View,
|
|
2783
2713
|
{
|
|
2784
2714
|
style: [styles3.thumb, isDisabled ? styles3.disabledThumb : void 0],
|
|
2785
2715
|
children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
@@ -2798,11 +2728,11 @@ function Switch({
|
|
|
2798
2728
|
|
|
2799
2729
|
// src/text-field/TextField.tsx
|
|
2800
2730
|
var import_react15 = require("react");
|
|
2801
|
-
var
|
|
2731
|
+
var import_react_native25 = require("react-native");
|
|
2802
2732
|
var import_core14 = require("@onlynative/core");
|
|
2803
2733
|
|
|
2804
2734
|
// src/text-field/styles.ts
|
|
2805
|
-
var
|
|
2735
|
+
var import_react_native24 = require("react-native");
|
|
2806
2736
|
var CONTAINER_HEIGHT = 56;
|
|
2807
2737
|
var ICON_SIZE = 24;
|
|
2808
2738
|
var LABEL_FLOATED_LINE_HEIGHT = 16;
|
|
@@ -2861,7 +2791,7 @@ function createStyles9(theme, variant) {
|
|
|
2861
2791
|
const isFilled = variant === "filled";
|
|
2862
2792
|
return {
|
|
2863
2793
|
colors,
|
|
2864
|
-
styles:
|
|
2794
|
+
styles: import_react_native24.StyleSheet.create({
|
|
2865
2795
|
root: {
|
|
2866
2796
|
alignSelf: "stretch"
|
|
2867
2797
|
},
|
|
@@ -3038,13 +2968,13 @@ function TextField({
|
|
|
3038
2968
|
const isControlled = value !== void 0;
|
|
3039
2969
|
const hasValue = isControlled ? value !== "" : internalHasText;
|
|
3040
2970
|
const isLabelFloated = isFocused || hasValue;
|
|
3041
|
-
const labelAnimRef = (0, import_react15.useRef)(new
|
|
2971
|
+
const labelAnimRef = (0, import_react15.useRef)(new import_react_native25.Animated.Value(isLabelFloated ? 1 : 0));
|
|
3042
2972
|
const labelAnim = labelAnimRef.current;
|
|
3043
2973
|
(0, import_react15.useEffect)(() => {
|
|
3044
|
-
|
|
2974
|
+
import_react_native25.Animated.timing(labelAnim, {
|
|
3045
2975
|
toValue: isLabelFloated ? 1 : 0,
|
|
3046
2976
|
duration: 150,
|
|
3047
|
-
useNativeDriver:
|
|
2977
|
+
useNativeDriver: import_react_native25.Platform.OS !== "web"
|
|
3048
2978
|
}).start();
|
|
3049
2979
|
}, [isLabelFloated, labelAnim]);
|
|
3050
2980
|
const labelScale = (0, import_react15.useMemo)(() => {
|
|
@@ -3122,9 +3052,9 @@ function TextField({
|
|
|
3122
3052
|
[styles3, isFocused, isError, isDisabled]
|
|
3123
3053
|
);
|
|
3124
3054
|
const displaySupportingText = isError ? errorText : supportingText;
|
|
3125
|
-
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
3126
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3127
|
-
leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3055
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native25.View, { style: [styles3.root, style], children: [
|
|
3056
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native25.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native25.View, { style: containerStyle, children: [
|
|
3057
|
+
leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native25.View, { style: styles3.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3128
3058
|
MaterialCommunityIcons,
|
|
3129
3059
|
{
|
|
3130
3060
|
name: leadingIcon,
|
|
@@ -3133,14 +3063,14 @@ function TextField({
|
|
|
3133
3063
|
}
|
|
3134
3064
|
) }) : null,
|
|
3135
3065
|
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3136
|
-
|
|
3066
|
+
import_react_native25.View,
|
|
3137
3067
|
{
|
|
3138
3068
|
style: [
|
|
3139
3069
|
styles3.inputWrapper,
|
|
3140
3070
|
label ? styles3.inputWrapperWithLabel : void 0
|
|
3141
3071
|
],
|
|
3142
3072
|
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3143
|
-
|
|
3073
|
+
import_react_native25.TextInput,
|
|
3144
3074
|
{
|
|
3145
3075
|
ref: inputRef,
|
|
3146
3076
|
...textInputProps,
|
|
@@ -3166,14 +3096,14 @@ function TextField({
|
|
|
3166
3096
|
}
|
|
3167
3097
|
),
|
|
3168
3098
|
trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3169
|
-
|
|
3099
|
+
import_react_native25.Pressable,
|
|
3170
3100
|
{
|
|
3171
3101
|
onPress: onTrailingIconPress,
|
|
3172
3102
|
disabled: isDisabled || !onTrailingIconPress,
|
|
3173
3103
|
accessibilityRole: "button",
|
|
3174
3104
|
hitSlop: 12,
|
|
3175
3105
|
style: styles3.trailingIconPressable,
|
|
3176
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3106
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native25.View, { style: styles3.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3177
3107
|
MaterialCommunityIcons,
|
|
3178
3108
|
{
|
|
3179
3109
|
name: trailingIcon,
|
|
@@ -3184,7 +3114,7 @@ function TextField({
|
|
|
3184
3114
|
}
|
|
3185
3115
|
) : null,
|
|
3186
3116
|
label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3187
|
-
|
|
3117
|
+
import_react_native25.Animated.Text,
|
|
3188
3118
|
{
|
|
3189
3119
|
numberOfLines: 1,
|
|
3190
3120
|
style: [
|
|
@@ -3204,10 +3134,10 @@ function TextField({
|
|
|
3204
3134
|
children: label
|
|
3205
3135
|
}
|
|
3206
3136
|
) : null,
|
|
3207
|
-
isFilled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3137
|
+
isFilled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native25.View, { style: indicatorStyle }) : null
|
|
3208
3138
|
] }) }),
|
|
3209
|
-
displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3210
|
-
|
|
3139
|
+
displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native25.View, { style: styles3.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
3140
|
+
import_react_native25.Text,
|
|
3211
3141
|
{
|
|
3212
3142
|
style: [
|
|
3213
3143
|
styles3.supportingText,
|
|
@@ -3221,11 +3151,11 @@ function TextField({
|
|
|
3221
3151
|
|
|
3222
3152
|
// src/list/List.tsx
|
|
3223
3153
|
var import_react16 = require("react");
|
|
3224
|
-
var
|
|
3154
|
+
var import_react_native27 = require("react-native");
|
|
3225
3155
|
var import_core15 = require("@onlynative/core");
|
|
3226
3156
|
|
|
3227
3157
|
// src/list/styles.ts
|
|
3228
|
-
var
|
|
3158
|
+
var import_react_native26 = require("react-native");
|
|
3229
3159
|
var ITEM_PADDING_VERTICAL = 12;
|
|
3230
3160
|
var INSET_START = 56;
|
|
3231
3161
|
var MIN_HEIGHT = {
|
|
@@ -3234,7 +3164,7 @@ var MIN_HEIGHT = {
|
|
|
3234
3164
|
3: 88
|
|
3235
3165
|
};
|
|
3236
3166
|
function createListStyles(theme) {
|
|
3237
|
-
return
|
|
3167
|
+
return import_react_native26.StyleSheet.create({
|
|
3238
3168
|
container: {
|
|
3239
3169
|
paddingVertical: theme.spacing.sm
|
|
3240
3170
|
}
|
|
@@ -3271,7 +3201,7 @@ function getItemColors(theme, containerColor) {
|
|
|
3271
3201
|
}
|
|
3272
3202
|
function createListItemStyles(theme, lines, containerColor) {
|
|
3273
3203
|
const colors = getItemColors(theme, containerColor);
|
|
3274
|
-
return
|
|
3204
|
+
return import_react_native26.StyleSheet.create({
|
|
3275
3205
|
container: {
|
|
3276
3206
|
flexDirection: "row",
|
|
3277
3207
|
alignItems: lines === 3 ? "flex-start" : "center",
|
|
@@ -3326,7 +3256,7 @@ function createListItemStyles(theme, lines, containerColor) {
|
|
|
3326
3256
|
});
|
|
3327
3257
|
}
|
|
3328
3258
|
function createDividerStyles(theme, inset) {
|
|
3329
|
-
return
|
|
3259
|
+
return import_react_native26.StyleSheet.create({
|
|
3330
3260
|
divider: {
|
|
3331
3261
|
height: 1,
|
|
3332
3262
|
backgroundColor: theme.colors.outlineVariant,
|
|
@@ -3340,12 +3270,12 @@ var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
|
3340
3270
|
function List({ children, style, ...props }) {
|
|
3341
3271
|
const theme = (0, import_core15.useTheme)();
|
|
3342
3272
|
const styles3 = (0, import_react16.useMemo)(() => createListStyles(theme), [theme]);
|
|
3343
|
-
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3273
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native27.View, { ...props, style: [styles3.container, style], children });
|
|
3344
3274
|
}
|
|
3345
3275
|
|
|
3346
3276
|
// src/list/ListItem.tsx
|
|
3347
3277
|
var import_react17 = require("react");
|
|
3348
|
-
var
|
|
3278
|
+
var import_react_native28 = require("react-native");
|
|
3349
3279
|
var import_core16 = require("@onlynative/core");
|
|
3350
3280
|
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
3351
3281
|
function getLines(supportingText, overlineText, supportingTextNumberOfLines) {
|
|
@@ -3372,18 +3302,22 @@ function ListItem({
|
|
|
3372
3302
|
const isDisabled = Boolean(disabled);
|
|
3373
3303
|
const isInteractive = onPress !== void 0;
|
|
3374
3304
|
const theme = (0, import_core16.useTheme)();
|
|
3375
|
-
const lines = getLines(
|
|
3305
|
+
const lines = getLines(
|
|
3306
|
+
supportingText,
|
|
3307
|
+
overlineText,
|
|
3308
|
+
supportingTextNumberOfLines
|
|
3309
|
+
);
|
|
3376
3310
|
const styles3 = (0, import_react17.useMemo)(
|
|
3377
3311
|
() => createListItemStyles(theme, lines, containerColor),
|
|
3378
3312
|
[theme, lines, containerColor]
|
|
3379
3313
|
);
|
|
3380
3314
|
const content = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
|
|
3381
|
-
leadingContent != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3382
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
3383
|
-
overlineText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3384
|
-
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3315
|
+
leadingContent != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.View, { style: styles3.leadingContent, children: leadingContent }),
|
|
3316
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native28.View, { style: styles3.textBlock, children: [
|
|
3317
|
+
overlineText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.Text, { style: styles3.overlineText, numberOfLines: 1, children: overlineText }),
|
|
3318
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.Text, { style: styles3.headlineText, numberOfLines: 1, children: headlineText }),
|
|
3385
3319
|
supportingText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3386
|
-
|
|
3320
|
+
import_react_native28.Text,
|
|
3387
3321
|
{
|
|
3388
3322
|
style: styles3.supportingText,
|
|
3389
3323
|
numberOfLines: supportingTextNumberOfLines,
|
|
@@ -3391,40 +3325,39 @@ function ListItem({
|
|
|
3391
3325
|
}
|
|
3392
3326
|
)
|
|
3393
3327
|
] }),
|
|
3394
|
-
(trailingContent != null || trailingSupportingText != null) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
|
|
3395
|
-
trailingSupportingText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3328
|
+
(trailingContent != null || trailingSupportingText != null) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native28.View, { style: styles3.trailingBlock, children: [
|
|
3329
|
+
trailingSupportingText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.Text, { style: styles3.trailingSupportingText, numberOfLines: 1, children: trailingSupportingText }),
|
|
3396
3330
|
trailingContent
|
|
3397
3331
|
] })
|
|
3398
3332
|
] });
|
|
3399
3333
|
if (!isInteractive) {
|
|
3400
|
-
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3401
|
-
}
|
|
3402
|
-
const resolvedStyle = (state) => [
|
|
3403
|
-
styles3.container,
|
|
3404
|
-
styles3.interactiveContainer,
|
|
3405
|
-
state.hovered && !state.pressed && !isDisabled ? styles3.hoveredContainer : void 0,
|
|
3406
|
-
state.pressed && !isDisabled ? styles3.pressedContainer : void 0,
|
|
3407
|
-
isDisabled ? styles3.disabledContainer : void 0,
|
|
3408
|
-
typeof style === "function" ? style(state) : style
|
|
3409
|
-
];
|
|
3334
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.View, { ...props, style: [styles3.container, style], children: content });
|
|
3335
|
+
}
|
|
3410
3336
|
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
3411
|
-
|
|
3337
|
+
import_react_native28.Pressable,
|
|
3412
3338
|
{
|
|
3413
3339
|
...props,
|
|
3414
3340
|
role: "button",
|
|
3415
3341
|
accessibilityState: { disabled: isDisabled },
|
|
3416
|
-
hitSlop:
|
|
3342
|
+
hitSlop: import_react_native28.Platform.OS === "web" ? void 0 : 4,
|
|
3417
3343
|
disabled: isDisabled,
|
|
3418
3344
|
onPress,
|
|
3419
|
-
style:
|
|
3420
|
-
|
|
3345
|
+
style: resolvePressableStyle(
|
|
3346
|
+
[styles3.container, styles3.interactiveContainer],
|
|
3347
|
+
styles3.hoveredContainer,
|
|
3348
|
+
styles3.pressedContainer,
|
|
3349
|
+
styles3.disabledContainer,
|
|
3350
|
+
isDisabled,
|
|
3351
|
+
style
|
|
3352
|
+
),
|
|
3353
|
+
children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native28.View, { style: styles3.disabledContentWrapper, children: content }) : content
|
|
3421
3354
|
}
|
|
3422
3355
|
);
|
|
3423
3356
|
}
|
|
3424
3357
|
|
|
3425
3358
|
// src/list/ListDivider.tsx
|
|
3426
3359
|
var import_react18 = require("react");
|
|
3427
|
-
var
|
|
3360
|
+
var import_react_native29 = require("react-native");
|
|
3428
3361
|
var import_core17 = require("@onlynative/core");
|
|
3429
3362
|
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
3430
3363
|
function ListDivider({
|
|
@@ -3437,16 +3370,16 @@ function ListDivider({
|
|
|
3437
3370
|
() => createDividerStyles(theme, inset),
|
|
3438
3371
|
[theme, inset]
|
|
3439
3372
|
);
|
|
3440
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
3373
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native29.View, { ...props, style: [styles3.divider, style] });
|
|
3441
3374
|
}
|
|
3442
3375
|
|
|
3443
3376
|
// src/keyboard-avoiding-wrapper/KeyboardAvoidingWrapper.tsx
|
|
3444
3377
|
var import_react19 = require("react");
|
|
3445
|
-
var
|
|
3378
|
+
var import_react_native31 = require("react-native");
|
|
3446
3379
|
|
|
3447
3380
|
// src/keyboard-avoiding-wrapper/styles.ts
|
|
3448
|
-
var
|
|
3449
|
-
var styles2 =
|
|
3381
|
+
var import_react_native30 = require("react-native");
|
|
3382
|
+
var styles2 = import_react_native30.StyleSheet.create({
|
|
3450
3383
|
root: {
|
|
3451
3384
|
flex: 1
|
|
3452
3385
|
},
|
|
@@ -3457,7 +3390,7 @@ var styles2 = import_react_native31.StyleSheet.create({
|
|
|
3457
3390
|
|
|
3458
3391
|
// src/keyboard-avoiding-wrapper/KeyboardAvoidingWrapper.tsx
|
|
3459
3392
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
3460
|
-
var isIOS =
|
|
3393
|
+
var isIOS = import_react_native31.Platform.OS === "ios";
|
|
3461
3394
|
function KeyboardAvoidingWrapper({
|
|
3462
3395
|
children,
|
|
3463
3396
|
behavior = "padding",
|
|
@@ -3474,13 +3407,13 @@ function KeyboardAvoidingWrapper({
|
|
|
3474
3407
|
if (onKeyboardShow) {
|
|
3475
3408
|
const showEvent = isIOS ? "keyboardWillShow" : "keyboardDidShow";
|
|
3476
3409
|
subscriptions.push(
|
|
3477
|
-
|
|
3410
|
+
import_react_native31.Keyboard.addListener(showEvent, onKeyboardShow)
|
|
3478
3411
|
);
|
|
3479
3412
|
}
|
|
3480
3413
|
if (onKeyboardHide) {
|
|
3481
3414
|
const hideEvent = isIOS ? "keyboardWillHide" : "keyboardDidHide";
|
|
3482
3415
|
subscriptions.push(
|
|
3483
|
-
|
|
3416
|
+
import_react_native31.Keyboard.addListener(hideEvent, onKeyboardHide)
|
|
3484
3417
|
);
|
|
3485
3418
|
}
|
|
3486
3419
|
return () => {
|
|
@@ -3488,14 +3421,14 @@ function KeyboardAvoidingWrapper({
|
|
|
3488
3421
|
};
|
|
3489
3422
|
}, [onKeyboardShow, onKeyboardHide]);
|
|
3490
3423
|
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3491
|
-
|
|
3424
|
+
import_react_native31.KeyboardAvoidingView,
|
|
3492
3425
|
{
|
|
3493
3426
|
style: [styles2.root, style],
|
|
3494
3427
|
behavior,
|
|
3495
3428
|
keyboardVerticalOffset,
|
|
3496
3429
|
enabled: !isIOS && enabled,
|
|
3497
3430
|
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
3498
|
-
|
|
3431
|
+
import_react_native31.ScrollView,
|
|
3499
3432
|
{
|
|
3500
3433
|
automaticallyAdjustKeyboardInsets: isIOS && enabled,
|
|
3501
3434
|
keyboardShouldPersistTaps: "handled",
|
|
@@ -3511,13 +3444,13 @@ function KeyboardAvoidingWrapper({
|
|
|
3511
3444
|
|
|
3512
3445
|
// src/avatar/Avatar.tsx
|
|
3513
3446
|
var import_react20 = require("react");
|
|
3514
|
-
var
|
|
3447
|
+
var import_react_native33 = require("react-native");
|
|
3515
3448
|
var import_core18 = require("@onlynative/core");
|
|
3516
3449
|
|
|
3517
3450
|
// src/avatar/styles.ts
|
|
3518
|
-
var
|
|
3451
|
+
var import_react_native32 = require("react-native");
|
|
3519
3452
|
function createStyles10(theme) {
|
|
3520
|
-
return
|
|
3453
|
+
return import_react_native32.StyleSheet.create({
|
|
3521
3454
|
container: {
|
|
3522
3455
|
borderRadius: theme.shape.cornerFull,
|
|
3523
3456
|
alignItems: "center",
|
|
@@ -3612,7 +3545,7 @@ function Avatar({
|
|
|
3612
3545
|
}),
|
|
3613
3546
|
[bgColor, fgColor, theme.stateLayer]
|
|
3614
3547
|
);
|
|
3615
|
-
const content = imageUri ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3548
|
+
const content = imageUri ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native33.Image, { source: { uri: imageUri }, style: styles3.image, accessible: false }) : label && !icon ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native33.Text, { style: initialsStyle, numberOfLines: 1, allowFontScaling: false, children: initials }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3616
3549
|
MaterialCommunityIcons,
|
|
3617
3550
|
{
|
|
3618
3551
|
name: icon != null ? icon : "account",
|
|
@@ -3622,7 +3555,7 @@ function Avatar({
|
|
|
3622
3555
|
);
|
|
3623
3556
|
if (!isInteractive) {
|
|
3624
3557
|
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3625
|
-
|
|
3558
|
+
import_react_native33.View,
|
|
3626
3559
|
{
|
|
3627
3560
|
...props,
|
|
3628
3561
|
accessibilityLabel,
|
|
@@ -3632,7 +3565,7 @@ function Avatar({
|
|
|
3632
3565
|
);
|
|
3633
3566
|
}
|
|
3634
3567
|
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
3635
|
-
|
|
3568
|
+
import_react_native33.Pressable,
|
|
3636
3569
|
{
|
|
3637
3570
|
...props,
|
|
3638
3571
|
accessibilityRole: "button",
|