@blinkdotnew/mobile-ui 2.0.0-alpha.16 → 2.0.0-alpha.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +132 -122
- package/dist/index.d.ts +132 -122
- package/dist/index.js +714 -706
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +711 -717
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -1
package/dist/index.mjs
CHANGED
|
@@ -16,8 +16,8 @@ import {
|
|
|
16
16
|
XStack as XStack44,
|
|
17
17
|
YStack as YStack49,
|
|
18
18
|
ZStack,
|
|
19
|
-
ScrollView as
|
|
20
|
-
Circle as
|
|
19
|
+
ScrollView as ScrollView6,
|
|
20
|
+
Circle as Circle12,
|
|
21
21
|
Square,
|
|
22
22
|
Spacer,
|
|
23
23
|
EnsureFlexed,
|
|
@@ -902,17 +902,43 @@ function BlinkTooltip({ content, children, side = "top" }) {
|
|
|
902
902
|
] });
|
|
903
903
|
}
|
|
904
904
|
|
|
905
|
+
// src/interface/BrandIcons.tsx
|
|
906
|
+
import Svg, { Path, Rect } from "react-native-svg";
|
|
907
|
+
import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
908
|
+
function GoogleLogo({ size = 20 }) {
|
|
909
|
+
return /* @__PURE__ */ jsxs8(Svg, { width: size, height: size, viewBox: "0 0 24 24", children: [
|
|
910
|
+
/* @__PURE__ */ jsx13(Path, { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }),
|
|
911
|
+
/* @__PURE__ */ jsx13(Path, { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }),
|
|
912
|
+
/* @__PURE__ */ jsx13(Path, { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" }),
|
|
913
|
+
/* @__PURE__ */ jsx13(Path, { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })
|
|
914
|
+
] });
|
|
915
|
+
}
|
|
916
|
+
function AppleLogo({ size = 20, color = "#000" }) {
|
|
917
|
+
return /* @__PURE__ */ jsx13(Svg, { width: size, height: size, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13(Path, { fill: color, d: "M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) });
|
|
918
|
+
}
|
|
919
|
+
function GitHubLogo({ size = 20, color = "#fff" }) {
|
|
920
|
+
return /* @__PURE__ */ jsx13(Svg, { width: size, height: size, viewBox: "0 0 98 96", children: /* @__PURE__ */ jsx13(Path, { fillRule: "evenodd", clipRule: "evenodd", fill: color, d: "M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" }) });
|
|
921
|
+
}
|
|
922
|
+
function MicrosoftLogo({ size = 20 }) {
|
|
923
|
+
return /* @__PURE__ */ jsxs8(Svg, { width: size, height: size, viewBox: "0 0 21 21", children: [
|
|
924
|
+
/* @__PURE__ */ jsx13(Rect, { width: "10", height: "10", fill: "#F25022" }),
|
|
925
|
+
/* @__PURE__ */ jsx13(Rect, { x: "11", width: "10", height: "10", fill: "#7FBA00" }),
|
|
926
|
+
/* @__PURE__ */ jsx13(Rect, { y: "11", width: "10", height: "10", fill: "#00A4EF" }),
|
|
927
|
+
/* @__PURE__ */ jsx13(Rect, { x: "11", y: "11", width: "10", height: "10", fill: "#FFB900" })
|
|
928
|
+
] });
|
|
929
|
+
}
|
|
930
|
+
|
|
905
931
|
// src/layouts/StepPageLayout.tsx
|
|
906
932
|
import { SizableText as SizableText13, YStack as YStack7 } from "tamagui";
|
|
907
|
-
import { jsx as
|
|
933
|
+
import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
908
934
|
function StepPageLayout({ title, description, children, bottom }) {
|
|
909
|
-
return /* @__PURE__ */
|
|
910
|
-
/* @__PURE__ */
|
|
911
|
-
/* @__PURE__ */
|
|
912
|
-
description && /* @__PURE__ */
|
|
935
|
+
return /* @__PURE__ */ jsxs9(YStack7, { flex: 1, padding: "$4", maxWidth: 500, marginHorizontal: "auto", width: "100%", children: [
|
|
936
|
+
/* @__PURE__ */ jsx14(YStack7, { gap: "$5", children: /* @__PURE__ */ jsxs9(YStack7, { gap: "$2", children: [
|
|
937
|
+
/* @__PURE__ */ jsx14(SizableText13, { size: "$8", fontWeight: "700", children: title }),
|
|
938
|
+
description && /* @__PURE__ */ jsx14(SizableText13, { size: "$5", fontWeight: "400", color: "$color10", children: description })
|
|
913
939
|
] }) }),
|
|
914
|
-
/* @__PURE__ */
|
|
915
|
-
bottom && /* @__PURE__ */
|
|
940
|
+
/* @__PURE__ */ jsx14(YStack7, { paddingTop: "$5", gap: "$4", children }),
|
|
941
|
+
bottom && /* @__PURE__ */ jsx14(YStack7, { paddingTop: "$4", children: bottom })
|
|
916
942
|
] });
|
|
917
943
|
}
|
|
918
944
|
|
|
@@ -937,12 +963,12 @@ var ScreenLayout = styled10(YStack8, {
|
|
|
937
963
|
|
|
938
964
|
// src/layouts/Section.tsx
|
|
939
965
|
import { SizableText as SizableText14, YStack as YStack9 } from "tamagui";
|
|
940
|
-
import { jsx as
|
|
966
|
+
import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
941
967
|
function Section({ title, description, children, gap = "$3" }) {
|
|
942
|
-
return /* @__PURE__ */
|
|
943
|
-
title && /* @__PURE__ */
|
|
944
|
-
/* @__PURE__ */
|
|
945
|
-
description && /* @__PURE__ */
|
|
968
|
+
return /* @__PURE__ */ jsxs10(YStack9, { gap, children: [
|
|
969
|
+
title && /* @__PURE__ */ jsxs10(YStack9, { gap: "$1", children: [
|
|
970
|
+
/* @__PURE__ */ jsx15(SizableText14, { size: "$5", fontWeight: "600", color: "$color12", children: title }),
|
|
971
|
+
description && /* @__PURE__ */ jsx15(SizableText14, { size: "$3", color: "$color9", children: description })
|
|
946
972
|
] }),
|
|
947
973
|
children
|
|
948
974
|
] });
|
|
@@ -950,7 +976,7 @@ function Section({ title, description, children, gap = "$3" }) {
|
|
|
950
976
|
|
|
951
977
|
// src/layouts/ListItem.tsx
|
|
952
978
|
import { styled as styled11, SizableText as SizableText15, XStack as XStack7, YStack as YStack10, View as View5 } from "tamagui";
|
|
953
|
-
import { jsx as
|
|
979
|
+
import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
954
980
|
var ListItemFrame = styled11(XStack7, {
|
|
955
981
|
name: "BlinkListItem",
|
|
956
982
|
alignItems: "center",
|
|
@@ -968,11 +994,11 @@ var ListItemFrame = styled11(XStack7, {
|
|
|
968
994
|
}
|
|
969
995
|
});
|
|
970
996
|
function ListItem({ icon, title, subtitle, right, onPress }) {
|
|
971
|
-
return /* @__PURE__ */
|
|
972
|
-
icon && /* @__PURE__ */
|
|
973
|
-
/* @__PURE__ */
|
|
974
|
-
/* @__PURE__ */
|
|
975
|
-
subtitle && /* @__PURE__ */
|
|
997
|
+
return /* @__PURE__ */ jsxs11(ListItemFrame, { pressable: !!onPress, onPress, children: [
|
|
998
|
+
icon && /* @__PURE__ */ jsx16(View5, { children: icon }),
|
|
999
|
+
/* @__PURE__ */ jsxs11(YStack10, { flex: 1, gap: "$1", children: [
|
|
1000
|
+
/* @__PURE__ */ jsx16(SizableText15, { size: "$4", fontWeight: "500", color: "$color12", children: title }),
|
|
1001
|
+
subtitle && /* @__PURE__ */ jsx16(SizableText15, { size: "$2", color: "$color9", children: subtitle })
|
|
976
1002
|
] }),
|
|
977
1003
|
right
|
|
978
1004
|
] });
|
|
@@ -980,28 +1006,28 @@ function ListItem({ icon, title, subtitle, right, onPress }) {
|
|
|
980
1006
|
|
|
981
1007
|
// src/layouts/Divider.tsx
|
|
982
1008
|
import { Separator as Separator3, SizableText as SizableText16, XStack as XStack8 } from "tamagui";
|
|
983
|
-
import { jsx as
|
|
1009
|
+
import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
984
1010
|
function Divider({ label }) {
|
|
985
|
-
if (!label) return /* @__PURE__ */
|
|
986
|
-
return /* @__PURE__ */
|
|
987
|
-
/* @__PURE__ */
|
|
988
|
-
/* @__PURE__ */
|
|
989
|
-
/* @__PURE__ */
|
|
1011
|
+
if (!label) return /* @__PURE__ */ jsx17(Separator3, { borderColor: "$color4" });
|
|
1012
|
+
return /* @__PURE__ */ jsxs12(XStack8, { alignItems: "center", gap: "$3", children: [
|
|
1013
|
+
/* @__PURE__ */ jsx17(Separator3, { flex: 1, borderColor: "$color4" }),
|
|
1014
|
+
/* @__PURE__ */ jsx17(SizableText16, { size: "$2", color: "$color9", children: label }),
|
|
1015
|
+
/* @__PURE__ */ jsx17(Separator3, { flex: 1, borderColor: "$color4" })
|
|
990
1016
|
] });
|
|
991
1017
|
}
|
|
992
1018
|
|
|
993
1019
|
// src/layouts/KeyboardStickyFooter.tsx
|
|
994
1020
|
import { YStack as YStack11 } from "tamagui";
|
|
995
|
-
import { jsx as
|
|
1021
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
996
1022
|
function KeyboardStickyFooter({ children, offset }) {
|
|
997
|
-
return /* @__PURE__ */
|
|
1023
|
+
return /* @__PURE__ */ jsx18(YStack11, { maxWidth: 500, alignSelf: "center", paddingTop: "$8", paddingBottom: "$4", style: { paddingBottom: offset }, children });
|
|
998
1024
|
}
|
|
999
1025
|
|
|
1000
1026
|
// src/layouts/SafeArea.tsx
|
|
1001
1027
|
import { YStack as YStack12 } from "tamagui";
|
|
1002
|
-
import { jsx as
|
|
1028
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
1003
1029
|
function SafeArea({ children, edges = ["top", "bottom"] }) {
|
|
1004
|
-
return /* @__PURE__ */
|
|
1030
|
+
return /* @__PURE__ */ jsx19(
|
|
1005
1031
|
YStack12,
|
|
1006
1032
|
{
|
|
1007
1033
|
flex: 1,
|
|
@@ -1018,26 +1044,26 @@ function SafeArea({ children, edges = ["top", "bottom"] }) {
|
|
|
1018
1044
|
// src/layouts/Grid.tsx
|
|
1019
1045
|
import { Children } from "react";
|
|
1020
1046
|
import { XStack as XStack9, YStack as YStack13 } from "tamagui";
|
|
1021
|
-
import { jsx as
|
|
1047
|
+
import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1022
1048
|
function Grid({ children, columns = 2, gap = "$3" }) {
|
|
1023
1049
|
const items = Children.toArray(children);
|
|
1024
1050
|
const rows = [];
|
|
1025
1051
|
for (let i = 0; i < items.length; i += columns) {
|
|
1026
1052
|
rows.push(items.slice(i, i + columns));
|
|
1027
1053
|
}
|
|
1028
|
-
return /* @__PURE__ */
|
|
1029
|
-
row.map((item, ci) => /* @__PURE__ */
|
|
1030
|
-
row.length < columns && Array.from({ length: columns - row.length }).map((_, i) => /* @__PURE__ */
|
|
1054
|
+
return /* @__PURE__ */ jsx20(YStack13, { gap, children: rows.map((row, ri) => /* @__PURE__ */ jsxs13(XStack9, { gap, children: [
|
|
1055
|
+
row.map((item, ci) => /* @__PURE__ */ jsx20(YStack13, { flex: 1, children: item }, ci)),
|
|
1056
|
+
row.length < columns && Array.from({ length: columns - row.length }).map((_, i) => /* @__PURE__ */ jsx20(YStack13, { flex: 1 }, `pad-${i}`))
|
|
1031
1057
|
] }, ri)) });
|
|
1032
1058
|
}
|
|
1033
1059
|
function Container({ children, maxWidth = 500, centered = true, padding = "$4" }) {
|
|
1034
|
-
return /* @__PURE__ */
|
|
1060
|
+
return /* @__PURE__ */ jsx20(YStack13, { width: "100%", maxWidth, alignSelf: centered ? "center" : void 0, padding, children });
|
|
1035
1061
|
}
|
|
1036
1062
|
|
|
1037
1063
|
// src/patterns/PaywallScreen.tsx
|
|
1038
1064
|
import { useState as useState5, useEffect as useEffect3 } from "react";
|
|
1039
1065
|
import { Button as Button3, Circle as Circle2, SizableText as SizableText17, XStack as XStack10, YStack as YStack14, ScrollView as ScrollView2 } from "tamagui";
|
|
1040
|
-
import { jsx as
|
|
1066
|
+
import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1041
1067
|
function useCountdown(minutes) {
|
|
1042
1068
|
const [seconds, setSeconds] = useState5((minutes ?? 0) * 60);
|
|
1043
1069
|
useEffect3(() => {
|
|
@@ -1050,90 +1076,96 @@ function useCountdown(minutes) {
|
|
|
1050
1076
|
const ss = String(seconds % 60).padStart(2, "0");
|
|
1051
1077
|
return { display: `${mm}:${ss}`, expired: seconds <= 0 };
|
|
1052
1078
|
}
|
|
1053
|
-
function normalizeFeature(
|
|
1054
|
-
return typeof
|
|
1055
|
-
}
|
|
1056
|
-
function ComparisonIcon({ enabled }) {
|
|
1057
|
-
return /* @__PURE__ */ jsx20(Circle2, { size: 22, backgroundColor: enabled ? "$green3" : "$color4", children: /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: enabled ? "$green10" : "$color8", fontWeight: "700", children: enabled ? "\u2713" : "\u2014" }) });
|
|
1079
|
+
function normalizeFeature(f) {
|
|
1080
|
+
return typeof f === "string" ? { title: f } : f;
|
|
1058
1081
|
}
|
|
1059
|
-
function
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
"
|
|
1065
|
-
|
|
1066
|
-
/* @__PURE__ */ jsxs13(YStack14, { children: [
|
|
1067
|
-
/* @__PURE__ */ jsx20(SizableText17, { size: "$2", fontWeight: "700", children: testimonial.author }),
|
|
1068
|
-
testimonial.meta ? /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: "$color10", children: testimonial.meta }) : null
|
|
1069
|
-
] })
|
|
1070
|
-
] });
|
|
1071
|
-
}
|
|
1072
|
-
function CreatorHeader({ creator }) {
|
|
1073
|
-
return /* @__PURE__ */ jsxs13(XStack10, { alignItems: "center", justifyContent: "center", gap: "$3", children: [
|
|
1074
|
-
creator.avatar ? /* @__PURE__ */ jsx20(
|
|
1075
|
-
YStack14,
|
|
1076
|
-
{
|
|
1077
|
-
width: 72,
|
|
1078
|
-
height: 72,
|
|
1079
|
-
borderRadius: "$10",
|
|
1080
|
-
overflow: "hidden",
|
|
1081
|
-
alignItems: "center",
|
|
1082
|
-
justifyContent: "center",
|
|
1083
|
-
backgroundColor: "$color3",
|
|
1084
|
-
children: creator.avatar
|
|
1085
|
-
}
|
|
1086
|
-
) : null,
|
|
1087
|
-
/* @__PURE__ */ jsxs13(YStack14, { alignItems: "center", gap: "$1", children: [
|
|
1088
|
-
/* @__PURE__ */ jsx20(SizableText17, { size: "$6", fontWeight: "800", children: creator.name }),
|
|
1089
|
-
creator.meta ? /* @__PURE__ */ jsx20(SizableText17, { size: "$3", color: "$color10", children: creator.meta }) : null
|
|
1082
|
+
function BenefitRow({ feature, tone, muted }) {
|
|
1083
|
+
const f = normalizeFeature(feature);
|
|
1084
|
+
return /* @__PURE__ */ jsxs14(XStack10, { gap: "$3", alignItems: "center", children: [
|
|
1085
|
+
/* @__PURE__ */ jsx21(Circle2, { size: 40, backgroundColor: "$color3", children: f.icon ?? /* @__PURE__ */ jsx21(SizableText17, { size: "$5", color: "$color9", children: "\u2726" }) }),
|
|
1086
|
+
/* @__PURE__ */ jsxs14(YStack14, { flex: 1, gap: "$0.5", children: [
|
|
1087
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$4", fontWeight: "700", color: tone, children: f.title }),
|
|
1088
|
+
f.description ? /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: muted, children: f.description }) : null
|
|
1090
1089
|
] })
|
|
1091
1090
|
] });
|
|
1092
1091
|
}
|
|
1093
|
-
function
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
onPress,
|
|
1097
|
-
stacked,
|
|
1098
|
-
dark
|
|
1099
|
-
}) {
|
|
1100
|
-
return /* @__PURE__ */ jsxs13(
|
|
1101
|
-
YStack14,
|
|
1092
|
+
function PlanRow({ plan, selected, onPress }) {
|
|
1093
|
+
return /* @__PURE__ */ jsxs14(
|
|
1094
|
+
XStack10,
|
|
1102
1095
|
{
|
|
1103
|
-
|
|
1104
|
-
width: stacked ? "100%" : void 0,
|
|
1096
|
+
width: "100%",
|
|
1105
1097
|
padding: "$3",
|
|
1098
|
+
paddingHorizontal: "$3.5",
|
|
1106
1099
|
borderRadius: "$5",
|
|
1107
1100
|
borderWidth: 2,
|
|
1108
|
-
borderColor: selected ? "$color9" :
|
|
1109
|
-
backgroundColor: selected ? "$color3" :
|
|
1110
|
-
pressStyle: { scale: 0.
|
|
1101
|
+
borderColor: selected ? "$color9" : "$color5",
|
|
1102
|
+
backgroundColor: selected ? "$color3" : "$color1",
|
|
1103
|
+
pressStyle: { scale: 0.98, opacity: 0.9 },
|
|
1111
1104
|
animation: "quick",
|
|
1112
1105
|
onPress,
|
|
1113
1106
|
cursor: "pointer",
|
|
1107
|
+
alignItems: "center",
|
|
1108
|
+
gap: "$3",
|
|
1114
1109
|
position: "relative",
|
|
1115
|
-
gap: "$1.5",
|
|
1116
|
-
alignItems: stacked ? "flex-start" : "center",
|
|
1117
1110
|
children: [
|
|
1118
|
-
plan.popular && /* @__PURE__ */
|
|
1119
|
-
|
|
1120
|
-
/* @__PURE__ */
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
plan.
|
|
1111
|
+
plan.popular && /* @__PURE__ */ jsx21(YStack14, { position: "absolute", top: -10, right: 12, backgroundColor: "$color9", paddingHorizontal: "$2", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ jsx21(SizableText17, { size: "$1", color: "white", fontWeight: "700", children: "BEST VALUE" }) }),
|
|
1112
|
+
/* @__PURE__ */ jsx21(Circle2, { size: 22, borderWidth: 2, borderColor: selected ? "$color9" : "$color7", backgroundColor: selected ? "$color9" : "transparent", children: selected && /* @__PURE__ */ jsx21(Circle2, { size: 8, backgroundColor: "white" }) }),
|
|
1113
|
+
/* @__PURE__ */ jsxs14(YStack14, { flex: 1, gap: "$0.5", children: [
|
|
1114
|
+
/* @__PURE__ */ jsxs14(XStack10, { gap: "$2", alignItems: "center", children: [
|
|
1115
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$4", fontWeight: "700", children: plan.name }),
|
|
1116
|
+
plan.trial && /* @__PURE__ */ jsx21(YStack14, { backgroundColor: "$green3", paddingHorizontal: "$1.5", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ jsx21(SizableText17, { size: "$1", color: "$green9", fontWeight: "700", children: plan.trial }) })
|
|
1117
|
+
] }),
|
|
1118
|
+
plan.tagline ? /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "$color10", children: plan.tagline }) : null
|
|
1126
1119
|
] }),
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1120
|
+
/* @__PURE__ */ jsxs14(YStack14, { alignItems: "flex-end", gap: "$0.5", children: [
|
|
1121
|
+
/* @__PURE__ */ jsxs14(XStack10, { alignItems: "baseline", gap: "$1", children: [
|
|
1122
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$5", fontWeight: "800", children: plan.price }),
|
|
1123
|
+
/* @__PURE__ */ jsxs14(SizableText17, { size: "$2", color: "$color10", children: [
|
|
1124
|
+
"/",
|
|
1125
|
+
plan.period
|
|
1126
|
+
] })
|
|
1127
|
+
] }),
|
|
1128
|
+
plan.savings && /* @__PURE__ */ jsx21(YStack14, { backgroundColor: "$green3", paddingHorizontal: "$1.5", paddingVertical: 1, borderRadius: "$10", children: /* @__PURE__ */ jsx21(SizableText17, { size: "$1", color: "$green9", fontWeight: "700", children: plan.savings }) }),
|
|
1129
|
+
plan.pricePerWeek && /* @__PURE__ */ jsx21(SizableText17, { size: "$1", color: "$color10", children: plan.pricePerWeek })
|
|
1130
|
+
] })
|
|
1133
1131
|
]
|
|
1134
1132
|
}
|
|
1135
1133
|
);
|
|
1136
1134
|
}
|
|
1135
|
+
function ComparisonIcon({ enabled }) {
|
|
1136
|
+
return /* @__PURE__ */ jsx21(Circle2, { size: 24, backgroundColor: enabled ? "$green3" : "$color4", children: /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: enabled ? "$green10" : "$color8", fontWeight: "700", children: enabled ? "\u2713" : "\u2715" }) });
|
|
1137
|
+
}
|
|
1138
|
+
function TestimonialCard({ t }) {
|
|
1139
|
+
return /* @__PURE__ */ jsxs14(YStack14, { minWidth: 240, backgroundColor: "$color2", borderRadius: "$6", padding: "$3.5", gap: "$2.5", children: [
|
|
1140
|
+
/* @__PURE__ */ jsxs14(SizableText17, { size: "$3", color: "$color11", fontStyle: "italic", children: [
|
|
1141
|
+
"\u201C",
|
|
1142
|
+
t.quote,
|
|
1143
|
+
"\u201D"
|
|
1144
|
+
] }),
|
|
1145
|
+
/* @__PURE__ */ jsxs14(XStack10, { gap: "$2", alignItems: "center", children: [
|
|
1146
|
+
/* @__PURE__ */ jsx21(Circle2, { size: 32, backgroundColor: "$color5", children: /* @__PURE__ */ jsx21(SizableText17, { size: "$2", fontWeight: "700", children: t.author[0] }) }),
|
|
1147
|
+
/* @__PURE__ */ jsxs14(YStack14, { children: [
|
|
1148
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$2", fontWeight: "700", children: t.author }),
|
|
1149
|
+
t.meta ? /* @__PURE__ */ jsx21(SizableText17, { size: "$1", color: "$color10", children: t.meta }) : null
|
|
1150
|
+
] })
|
|
1151
|
+
] })
|
|
1152
|
+
] });
|
|
1153
|
+
}
|
|
1154
|
+
function CreatorHeader({ c }) {
|
|
1155
|
+
return /* @__PURE__ */ jsxs14(XStack10, { alignItems: "center", justifyContent: "center", gap: "$3", children: [
|
|
1156
|
+
c.avatar && /* @__PURE__ */ jsx21(Circle2, { size: 72, overflow: "hidden", backgroundColor: "$color3", children: c.avatar }),
|
|
1157
|
+
/* @__PURE__ */ jsxs14(YStack14, { alignItems: "center", gap: "$1", children: [
|
|
1158
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$6", fontWeight: "800", children: c.name }),
|
|
1159
|
+
c.meta ? /* @__PURE__ */ jsx21(SizableText17, { size: "$3", color: "$color10", children: c.meta }) : null
|
|
1160
|
+
] })
|
|
1161
|
+
] });
|
|
1162
|
+
}
|
|
1163
|
+
function TrustBadges({ badges }) {
|
|
1164
|
+
return /* @__PURE__ */ jsx21(XStack10, { justifyContent: "center", gap: "$4", paddingTop: "$1", children: badges.map((b, i) => /* @__PURE__ */ jsxs14(YStack14, { alignItems: "center", gap: "$1", children: [
|
|
1165
|
+
/* @__PURE__ */ jsx21(Circle2, { size: 28, backgroundColor: "$color3", children: b.icon ?? /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "$color9", children: "\u2726" }) }),
|
|
1166
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$1", color: "$color10", textAlign: "center", children: b.label })
|
|
1167
|
+
] }, i)) });
|
|
1168
|
+
}
|
|
1137
1169
|
function PaywallScreen({
|
|
1138
1170
|
variant = "default",
|
|
1139
1171
|
eyebrow,
|
|
@@ -1158,68 +1190,57 @@ function PaywallScreen({
|
|
|
1158
1190
|
testimonials = [],
|
|
1159
1191
|
creator,
|
|
1160
1192
|
topSlot,
|
|
1161
|
-
footerSlot
|
|
1193
|
+
footerSlot,
|
|
1194
|
+
trustBadges
|
|
1162
1195
|
}) {
|
|
1163
1196
|
const selected = selectedPlan ?? plans.find((p) => p.popular)?.id ?? plans[0]?.id;
|
|
1164
1197
|
const countdown = useCountdown(countdownMinutes);
|
|
1165
1198
|
const dark = variant === "immersive-dark";
|
|
1166
|
-
const
|
|
1167
|
-
const
|
|
1168
|
-
const
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
/* @__PURE__ */ jsx20(ScrollView2, { flex: 1, contentContainerStyle: { paddingBottom: 220 }, children: /* @__PURE__ */ jsxs13(YStack14, { padding: "$4", gap: "$4", paddingTop: "$8", children: [
|
|
1199
|
+
const bg = dark ? "$color1" : "$background";
|
|
1200
|
+
const tone = dark ? "$color12" : "$color11";
|
|
1201
|
+
const muted = "$color10";
|
|
1202
|
+
return /* @__PURE__ */ jsxs14(YStack14, { flex: 1, backgroundColor: bg, children: [
|
|
1203
|
+
onClose && /* @__PURE__ */ jsx21(XStack10, { position: "absolute", top: "$4", right: "$4", zIndex: 10, children: /* @__PURE__ */ jsx21(Button3, { size: "$3", circular: true, chromeless: true, onPress: onClose, pressStyle: { opacity: 0.6 }, children: /* @__PURE__ */ jsx21(SizableText17, { size: "$5", color: muted, children: "\u2715" }) }) }),
|
|
1204
|
+
/* @__PURE__ */ jsx21(ScrollView2, { flex: 1, contentContainerStyle: { paddingBottom: 240 }, children: /* @__PURE__ */ jsxs14(YStack14, { paddingHorizontal: "$5", paddingTop: "$8", gap: "$5", children: [
|
|
1173
1205
|
topSlot,
|
|
1174
|
-
creator && variant === "creator-sheet" ? /* @__PURE__ */
|
|
1175
|
-
hero && /* @__PURE__ */
|
|
1176
|
-
badge && /* @__PURE__ */
|
|
1177
|
-
/* @__PURE__ */
|
|
1178
|
-
eyebrow ? /* @__PURE__ */
|
|
1179
|
-
/* @__PURE__ */
|
|
1180
|
-
subtitle && /* @__PURE__ */
|
|
1181
|
-
socialProof && /* @__PURE__ */
|
|
1206
|
+
creator && variant === "creator-sheet" ? /* @__PURE__ */ jsx21(CreatorHeader, { c: creator }) : null,
|
|
1207
|
+
hero && /* @__PURE__ */ jsx21(YStack14, { alignItems: "center", paddingVertical: "$3", children: hero }),
|
|
1208
|
+
badge && /* @__PURE__ */ jsx21(XStack10, { justifyContent: "center", children: /* @__PURE__ */ jsx21(YStack14, { backgroundColor: "$color9", paddingHorizontal: "$3", paddingVertical: "$1", borderRadius: "$10", children: /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "white", fontWeight: "700", children: badge }) }) }),
|
|
1209
|
+
/* @__PURE__ */ jsxs14(YStack14, { gap: "$1.5", alignItems: "center", children: [
|
|
1210
|
+
eyebrow ? /* @__PURE__ */ jsx21(SizableText17, { size: "$2", fontWeight: "700", color: "$color9", textTransform: "uppercase", children: eyebrow }) : null,
|
|
1211
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$9", fontWeight: "800", textAlign: "center", color: tone, children: title }),
|
|
1212
|
+
subtitle && /* @__PURE__ */ jsx21(SizableText17, { size: "$4", color: muted, textAlign: "center", children: subtitle }),
|
|
1213
|
+
socialProof && /* @__PURE__ */ jsx21(SizableText17, { size: "$3", color: "$color9", fontWeight: "600", textAlign: "center", paddingTop: "$1", children: socialProof })
|
|
1182
1214
|
] }),
|
|
1183
|
-
countdownMinutes && !countdown.expired
|
|
1184
|
-
/* @__PURE__ */
|
|
1185
|
-
/* @__PURE__ */
|
|
1186
|
-
] }),
|
|
1187
|
-
features.length > 0 && /* @__PURE__ */
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
/* @__PURE__ */
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
] })
|
|
1195
|
-
] }, i);
|
|
1196
|
-
}) }),
|
|
1197
|
-
variant === "social-proof" && testimonials.length > 0 ? /* @__PURE__ */ jsx20(ScrollView2, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsx20(XStack10, { gap: "$3", children: testimonials.map((testimonial, index) => /* @__PURE__ */ jsx20(TestimonialCard, { testimonial }, `${testimonial.author}-${index}`)) }) }) : null,
|
|
1198
|
-
variant === "comparison" && comparisonRows.length > 0 ? /* @__PURE__ */ jsxs13(YStack14, { backgroundColor: dark ? "$color2" : "$color1", borderRadius: "$6", padding: "$3", gap: "$2", borderWidth: 1, borderColor: "$color4", children: [
|
|
1199
|
-
/* @__PURE__ */ jsxs13(XStack10, { alignItems: "center", children: [
|
|
1200
|
-
/* @__PURE__ */ jsx20(SizableText17, { flex: 1, size: "$2", fontWeight: "700", color: "$color10", children: "Feature" }),
|
|
1201
|
-
/* @__PURE__ */ jsx20(SizableText17, { width: 64, size: "$2", fontWeight: "700", textAlign: "center", color: "$color10", children: "Free" }),
|
|
1202
|
-
/* @__PURE__ */ jsx20(SizableText17, { width: 84, size: "$2", fontWeight: "700", textAlign: "center", color: "$color10", children: "Premium" })
|
|
1215
|
+
countdownMinutes && !countdown.expired ? /* @__PURE__ */ jsxs14(XStack10, { justifyContent: "center", padding: "$2", backgroundColor: "$red3", borderRadius: "$4", alignSelf: "center", paddingHorizontal: "$4", gap: "$2", alignItems: "center", children: [
|
|
1216
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "$red9", fontWeight: "600", children: "Offer ends in" }),
|
|
1217
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$5", color: "$red9", fontWeight: "800", fontFamily: "$mono", children: countdown.display })
|
|
1218
|
+
] }) : null,
|
|
1219
|
+
features.length > 0 && /* @__PURE__ */ jsx21(YStack14, { gap: "$3.5", children: features.map((feature, i) => /* @__PURE__ */ jsx21(BenefitRow, { feature, tone, muted }, i)) }),
|
|
1220
|
+
variant === "social-proof" && testimonials.length > 0 ? /* @__PURE__ */ jsx21(ScrollView2, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsx21(XStack10, { gap: "$3", paddingRight: "$4", children: testimonials.map((t, i) => /* @__PURE__ */ jsx21(TestimonialCard, { t }, `${t.author}-${i}`)) }) }) : null,
|
|
1221
|
+
variant === "comparison" && comparisonRows.length > 0 ? /* @__PURE__ */ jsxs14(YStack14, { backgroundColor: dark ? "$color2" : "$color1", borderRadius: "$6", padding: "$3.5", gap: "$2", borderWidth: 1, borderColor: "$color4", children: [
|
|
1222
|
+
/* @__PURE__ */ jsxs14(XStack10, { alignItems: "center", children: [
|
|
1223
|
+
/* @__PURE__ */ jsx21(SizableText17, { flex: 1, size: "$2", fontWeight: "700", color: muted, children: "Feature" }),
|
|
1224
|
+
/* @__PURE__ */ jsx21(SizableText17, { width: 64, size: "$2", fontWeight: "700", textAlign: "center", color: muted, children: "Free" }),
|
|
1225
|
+
/* @__PURE__ */ jsx21(SizableText17, { width: 84, size: "$2", fontWeight: "700", textAlign: "center", color: "$color9", children: "Premium" })
|
|
1203
1226
|
] }),
|
|
1204
|
-
comparisonRows.map((row) => /* @__PURE__ */
|
|
1205
|
-
/* @__PURE__ */
|
|
1206
|
-
/* @__PURE__ */
|
|
1207
|
-
/* @__PURE__ */
|
|
1227
|
+
comparisonRows.map((row) => /* @__PURE__ */ jsxs14(XStack10, { alignItems: "center", paddingVertical: "$1.5", children: [
|
|
1228
|
+
/* @__PURE__ */ jsx21(SizableText17, { flex: 1, size: "$3", color: tone, children: row.label }),
|
|
1229
|
+
/* @__PURE__ */ jsx21(XStack10, { width: 64, justifyContent: "center", children: /* @__PURE__ */ jsx21(ComparisonIcon, { enabled: row.free }) }),
|
|
1230
|
+
/* @__PURE__ */ jsx21(XStack10, { width: 84, justifyContent: "center", children: /* @__PURE__ */ jsx21(ComparisonIcon, { enabled: row.premium }) })
|
|
1208
1231
|
] }, row.label))
|
|
1209
1232
|
] }) : null,
|
|
1210
|
-
/* @__PURE__ */
|
|
1211
|
-
|
|
1233
|
+
/* @__PURE__ */ jsx21(YStack14, { gap: "$3", children: plans.map((plan) => /* @__PURE__ */ jsx21(
|
|
1234
|
+
PlanRow,
|
|
1212
1235
|
{
|
|
1213
1236
|
plan,
|
|
1214
1237
|
selected: selected === plan.id,
|
|
1215
|
-
onPress: () => onSelectPlan?.(plan.id)
|
|
1216
|
-
stacked: stackedPlans,
|
|
1217
|
-
dark
|
|
1238
|
+
onPress: () => onSelectPlan?.(plan.id)
|
|
1218
1239
|
},
|
|
1219
1240
|
plan.id
|
|
1220
1241
|
)) })
|
|
1221
1242
|
] }) }),
|
|
1222
|
-
/* @__PURE__ */
|
|
1243
|
+
/* @__PURE__ */ jsxs14(
|
|
1223
1244
|
YStack14,
|
|
1224
1245
|
{
|
|
1225
1246
|
position: "absolute",
|
|
@@ -1228,12 +1249,12 @@ function PaywallScreen({
|
|
|
1228
1249
|
right: 0,
|
|
1229
1250
|
padding: "$4",
|
|
1230
1251
|
paddingBottom: "$6",
|
|
1231
|
-
backgroundColor,
|
|
1252
|
+
backgroundColor: bg,
|
|
1232
1253
|
borderTopWidth: 1,
|
|
1233
1254
|
borderTopColor: "$color4",
|
|
1234
1255
|
gap: "$2.5",
|
|
1235
1256
|
children: [
|
|
1236
|
-
/* @__PURE__ */
|
|
1257
|
+
/* @__PURE__ */ jsx21(
|
|
1237
1258
|
Button3,
|
|
1238
1259
|
{
|
|
1239
1260
|
size: "$5",
|
|
@@ -1247,12 +1268,13 @@ function PaywallScreen({
|
|
|
1247
1268
|
children: continueLabel
|
|
1248
1269
|
}
|
|
1249
1270
|
),
|
|
1250
|
-
reassurance && /* @__PURE__ */
|
|
1251
|
-
/* @__PURE__ */
|
|
1252
|
-
onRestore && /* @__PURE__ */
|
|
1253
|
-
onTerms && /* @__PURE__ */
|
|
1254
|
-
onPrivacy && /* @__PURE__ */
|
|
1271
|
+
reassurance && /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "$color9", textAlign: "center", children: reassurance }),
|
|
1272
|
+
/* @__PURE__ */ jsxs14(XStack10, { justifyContent: "center", gap: "$3", children: [
|
|
1273
|
+
onRestore && /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "$color8", onPress: onRestore, pressStyle: { opacity: 0.6 }, children: "Restore" }),
|
|
1274
|
+
onTerms && /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "$color8", onPress: onTerms, pressStyle: { opacity: 0.6 }, children: "Terms" }),
|
|
1275
|
+
onPrivacy && /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "$color8", onPress: onPrivacy, pressStyle: { opacity: 0.6 }, children: "Privacy" })
|
|
1255
1276
|
] }),
|
|
1277
|
+
trustBadges && trustBadges.length > 0 && /* @__PURE__ */ jsx21(TrustBadges, { badges: trustBadges }),
|
|
1256
1278
|
footerSlot
|
|
1257
1279
|
]
|
|
1258
1280
|
}
|
|
@@ -1263,7 +1285,7 @@ function PaywallScreen({
|
|
|
1263
1285
|
// src/patterns/OnboardingCarousel.tsx
|
|
1264
1286
|
import { useState as useState6 } from "react";
|
|
1265
1287
|
import { Button as Button4, SizableText as SizableText18, XStack as XStack11, YStack as YStack15, Circle as Circle3 } from "tamagui";
|
|
1266
|
-
import { jsx as
|
|
1288
|
+
import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1267
1289
|
function OnboardingCarousel({
|
|
1268
1290
|
steps,
|
|
1269
1291
|
variant = "default",
|
|
@@ -1278,7 +1300,7 @@ function OnboardingCarousel({
|
|
|
1278
1300
|
}) {
|
|
1279
1301
|
const [current, setCurrent] = useState6(0);
|
|
1280
1302
|
if (steps.length === 0) {
|
|
1281
|
-
return /* @__PURE__ */
|
|
1303
|
+
return /* @__PURE__ */ jsx22(YStack15, { flex: 1, backgroundColor: "$background", padding: "$4", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx22(SizableText18, { size: "$5", color: "$color10", textAlign: "center", children: "Add at least one onboarding step." }) });
|
|
1282
1304
|
}
|
|
1283
1305
|
const isLast = current === steps.length - 1;
|
|
1284
1306
|
const step = steps[current];
|
|
@@ -1292,15 +1314,15 @@ function OnboardingCarousel({
|
|
|
1292
1314
|
const heroBackground = isPermission ? "$color3" : isSelection ? "$color1" : "$color2";
|
|
1293
1315
|
const heroRadius = variant === "card-tilt" || isSelection ? "$8" : "$10";
|
|
1294
1316
|
const buttonTone = variant === "editorial" ? "$color12" : "$color9";
|
|
1295
|
-
return /* @__PURE__ */
|
|
1296
|
-
step?.background ? /* @__PURE__ */
|
|
1297
|
-
/* @__PURE__ */
|
|
1298
|
-
/* @__PURE__ */
|
|
1299
|
-
brand ? /* @__PURE__ */
|
|
1300
|
-
!isLast && onSkip && /* @__PURE__ */
|
|
1317
|
+
return /* @__PURE__ */ jsxs15(YStack15, { flex: 1, backgroundColor, padding: "$4", justifyContent: "space-between", children: [
|
|
1318
|
+
step?.background ? /* @__PURE__ */ jsx22(YStack15, { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, children: step.background }) : null,
|
|
1319
|
+
/* @__PURE__ */ jsxs15(XStack11, { justifyContent: "space-between", alignItems: "center", paddingTop: topPadding, children: [
|
|
1320
|
+
/* @__PURE__ */ jsx22(XStack11, { minWidth: 40, children: topLeading }),
|
|
1321
|
+
brand ? /* @__PURE__ */ jsx22(YStack15, { alignItems: "center", flex: 1, children: brand }) : /* @__PURE__ */ jsx22(YStack15, { flex: 1 }),
|
|
1322
|
+
!isLast && onSkip && /* @__PURE__ */ jsx22(Button4, { chromeless: true, onPress: onSkip, children: /* @__PURE__ */ jsx22(SizableText18, { size: "$4", color: "$color9", children: skipLabel }) })
|
|
1301
1323
|
] }),
|
|
1302
|
-
/* @__PURE__ */
|
|
1303
|
-
hero ? variant === "card-tilt" || isSelection ? /* @__PURE__ */
|
|
1324
|
+
/* @__PURE__ */ jsxs15(YStack15, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$5", paddingHorizontal: "$4", children: [
|
|
1325
|
+
hero ? variant === "card-tilt" || isSelection ? /* @__PURE__ */ jsx22(
|
|
1304
1326
|
YStack15,
|
|
1305
1327
|
{
|
|
1306
1328
|
width: "100%",
|
|
@@ -1320,15 +1342,15 @@ function OnboardingCarousel({
|
|
|
1320
1342
|
style: variant === "card-tilt" ? { transform: [{ rotate: "-5deg" }] } : void 0,
|
|
1321
1343
|
children: hero
|
|
1322
1344
|
}
|
|
1323
|
-
) : /* @__PURE__ */
|
|
1324
|
-
/* @__PURE__ */
|
|
1325
|
-
step?.eyebrow ? /* @__PURE__ */
|
|
1326
|
-
/* @__PURE__ */
|
|
1327
|
-
/* @__PURE__ */
|
|
1345
|
+
) : /* @__PURE__ */ jsx22(Circle3, { size: isPermission ? 140 : 120, backgroundColor: heroBackground, alignItems: "center", justifyContent: "center", children: hero }) : null,
|
|
1346
|
+
/* @__PURE__ */ jsxs15(YStack15, { gap: "$3", alignItems: "center", children: [
|
|
1347
|
+
step?.eyebrow ? /* @__PURE__ */ jsx22(SizableText18, { size: "$2", color: "$color9", fontWeight: "700", textTransform: "uppercase", children: step.eyebrow }) : null,
|
|
1348
|
+
/* @__PURE__ */ jsx22(SizableText18, { size: titleSize, fontWeight: "700", textAlign: "center", children: step?.title }),
|
|
1349
|
+
/* @__PURE__ */ jsx22(SizableText18, { size: "$4", color: "$color10", textAlign: "center", maxWidth: 300, children: step?.description })
|
|
1328
1350
|
] })
|
|
1329
1351
|
] }),
|
|
1330
|
-
/* @__PURE__ */
|
|
1331
|
-
/* @__PURE__ */
|
|
1352
|
+
/* @__PURE__ */ jsxs15(YStack15, { gap: "$3", paddingBottom: "$2", children: [
|
|
1353
|
+
/* @__PURE__ */ jsx22(XStack11, { justifyContent: "center", gap: "$2", children: steps.map((_, i) => /* @__PURE__ */ jsx22(
|
|
1332
1354
|
Circle3,
|
|
1333
1355
|
{
|
|
1334
1356
|
size: variant === "card-tilt" ? 10 : 8,
|
|
@@ -1339,7 +1361,7 @@ function OnboardingCarousel({
|
|
|
1339
1361
|
},
|
|
1340
1362
|
i
|
|
1341
1363
|
)) }),
|
|
1342
|
-
/* @__PURE__ */
|
|
1364
|
+
/* @__PURE__ */ jsx22(
|
|
1343
1365
|
Button4,
|
|
1344
1366
|
{
|
|
1345
1367
|
size: "$5",
|
|
@@ -1359,10 +1381,10 @@ function OnboardingCarousel({
|
|
|
1359
1381
|
|
|
1360
1382
|
// src/patterns/ChatBubble.tsx
|
|
1361
1383
|
import { SizableText as SizableText19, XStack as XStack12, YStack as YStack16, Circle as Circle4, Image as Image3 } from "tamagui";
|
|
1362
|
-
import { jsx as
|
|
1384
|
+
import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1363
1385
|
function ChatBubble({ message, showAvatar = true }) {
|
|
1364
1386
|
const isUser = message.sender === "user";
|
|
1365
|
-
return /* @__PURE__ */
|
|
1387
|
+
return /* @__PURE__ */ jsxs16(
|
|
1366
1388
|
XStack12,
|
|
1367
1389
|
{
|
|
1368
1390
|
alignSelf: isUser ? "flex-end" : "flex-start",
|
|
@@ -1370,8 +1392,8 @@ function ChatBubble({ message, showAvatar = true }) {
|
|
|
1370
1392
|
gap: "$2",
|
|
1371
1393
|
flexDirection: isUser ? "row-reverse" : "row",
|
|
1372
1394
|
children: [
|
|
1373
|
-
showAvatar && !isUser && /* @__PURE__ */
|
|
1374
|
-
/* @__PURE__ */
|
|
1395
|
+
showAvatar && !isUser && /* @__PURE__ */ jsx23(Circle4, { size: 32, backgroundColor: "$color4", overflow: "hidden", children: message.avatar ? /* @__PURE__ */ jsx23(Image3, { source: { uri: message.avatar }, width: 32, height: 32, objectFit: "cover" }) : /* @__PURE__ */ jsx23(SizableText19, { size: "$2", fontWeight: "600", color: "$color11", children: message.senderName?.[0]?.toUpperCase() ?? "?" }) }),
|
|
1396
|
+
/* @__PURE__ */ jsxs16(
|
|
1375
1397
|
YStack16,
|
|
1376
1398
|
{
|
|
1377
1399
|
backgroundColor: isUser ? "$color9" : "$color3",
|
|
@@ -1382,8 +1404,8 @@ function ChatBubble({ message, showAvatar = true }) {
|
|
|
1382
1404
|
borderBottomLeftRadius: isUser ? "$5" : "$2",
|
|
1383
1405
|
gap: "$1",
|
|
1384
1406
|
children: [
|
|
1385
|
-
/* @__PURE__ */
|
|
1386
|
-
message.timestamp && /* @__PURE__ */
|
|
1407
|
+
/* @__PURE__ */ jsx23(SizableText19, { size: "$3", color: isUser ? "$color1" : "$color12", children: message.text }),
|
|
1408
|
+
message.timestamp && /* @__PURE__ */ jsx23(SizableText19, { size: "$1", color: isUser ? "$color3" : "$color9", alignSelf: "flex-end", children: message.timestamp })
|
|
1387
1409
|
]
|
|
1388
1410
|
}
|
|
1389
1411
|
)
|
|
@@ -1394,9 +1416,9 @@ function ChatBubble({ message, showAvatar = true }) {
|
|
|
1394
1416
|
|
|
1395
1417
|
// src/patterns/SettingsScreen.tsx
|
|
1396
1418
|
import { Separator as Separator4, SizableText as SizableText20, Switch, XStack as XStack13, YStack as YStack17 } from "tamagui";
|
|
1397
|
-
import { jsx as
|
|
1419
|
+
import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1398
1420
|
function SettingsItemRow({ item }) {
|
|
1399
|
-
return /* @__PURE__ */
|
|
1421
|
+
return /* @__PURE__ */ jsxs17(
|
|
1400
1422
|
XStack13,
|
|
1401
1423
|
{
|
|
1402
1424
|
alignItems: "center",
|
|
@@ -1408,21 +1430,21 @@ function SettingsItemRow({ item }) {
|
|
|
1408
1430
|
onPress: item.onPress,
|
|
1409
1431
|
cursor: item.onPress ? "pointer" : void 0,
|
|
1410
1432
|
children: [
|
|
1411
|
-
item.icon && /* @__PURE__ */
|
|
1412
|
-
/* @__PURE__ */
|
|
1413
|
-
/* @__PURE__ */
|
|
1414
|
-
item.subtitle && /* @__PURE__ */
|
|
1433
|
+
item.icon && /* @__PURE__ */ jsx24(YStack17, { width: 24, alignItems: "center", children: item.icon }),
|
|
1434
|
+
/* @__PURE__ */ jsxs17(YStack17, { flex: 1, gap: "$1", children: [
|
|
1435
|
+
/* @__PURE__ */ jsx24(SizableText20, { size: "$4", fontWeight: "500", children: item.title }),
|
|
1436
|
+
item.subtitle && /* @__PURE__ */ jsx24(SizableText20, { size: "$2", color: "$color9", children: item.subtitle })
|
|
1415
1437
|
] }),
|
|
1416
|
-
item.type === "toggle" ? /* @__PURE__ */
|
|
1438
|
+
item.type === "toggle" ? /* @__PURE__ */ jsx24(Switch, { size: "$3", checked: item.value, onCheckedChange: item.onValueChange, children: /* @__PURE__ */ jsx24(Switch.Thumb, { animation: "quick" }) }) : item.right ? item.right : item.onPress && /* @__PURE__ */ jsx24(SizableText20, { size: "$5", color: "$color8", children: "\u203A" })
|
|
1417
1439
|
]
|
|
1418
1440
|
}
|
|
1419
1441
|
);
|
|
1420
1442
|
}
|
|
1421
1443
|
function SettingsScreen({ sections, header }) {
|
|
1422
|
-
return /* @__PURE__ */
|
|
1444
|
+
return /* @__PURE__ */ jsxs17(YStack17, { flex: 1, backgroundColor: "$background", children: [
|
|
1423
1445
|
header,
|
|
1424
|
-
/* @__PURE__ */
|
|
1425
|
-
section.title && /* @__PURE__ */
|
|
1446
|
+
/* @__PURE__ */ jsx24(YStack17, { gap: "$4", paddingVertical: "$2", children: sections.map((section, si) => /* @__PURE__ */ jsxs17(YStack17, { children: [
|
|
1447
|
+
section.title && /* @__PURE__ */ jsx24(
|
|
1426
1448
|
SizableText20,
|
|
1427
1449
|
{
|
|
1428
1450
|
size: "$2",
|
|
@@ -1434,9 +1456,9 @@ function SettingsScreen({ sections, header }) {
|
|
|
1434
1456
|
children: section.title
|
|
1435
1457
|
}
|
|
1436
1458
|
),
|
|
1437
|
-
/* @__PURE__ */
|
|
1438
|
-
/* @__PURE__ */
|
|
1439
|
-
ii < section.items.length - 1 && /* @__PURE__ */
|
|
1459
|
+
/* @__PURE__ */ jsx24(YStack17, { backgroundColor: "$color1", borderRadius: "$4", marginHorizontal: "$3", overflow: "hidden", children: section.items.map((item, ii) => /* @__PURE__ */ jsxs17(YStack17, { children: [
|
|
1460
|
+
/* @__PURE__ */ jsx24(SettingsItemRow, { item }),
|
|
1461
|
+
ii < section.items.length - 1 && /* @__PURE__ */ jsx24(Separator4, { borderColor: "$color3", marginLeft: "$12" })
|
|
1440
1462
|
] }, item.id)) })
|
|
1441
1463
|
] }, si)) })
|
|
1442
1464
|
] });
|
|
@@ -1444,15 +1466,15 @@ function SettingsScreen({ sections, header }) {
|
|
|
1444
1466
|
|
|
1445
1467
|
// src/patterns/EmptyState.tsx
|
|
1446
1468
|
import { Button as Button5, SizableText as SizableText21, YStack as YStack18 } from "tamagui";
|
|
1447
|
-
import { jsx as
|
|
1469
|
+
import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1448
1470
|
function EmptyState({ icon, title, description, actionLabel, onAction }) {
|
|
1449
|
-
return /* @__PURE__ */
|
|
1471
|
+
return /* @__PURE__ */ jsxs18(YStack18, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$4", padding: "$6", children: [
|
|
1450
1472
|
icon,
|
|
1451
|
-
/* @__PURE__ */
|
|
1452
|
-
/* @__PURE__ */
|
|
1453
|
-
description && /* @__PURE__ */
|
|
1473
|
+
/* @__PURE__ */ jsxs18(YStack18, { gap: "$2", alignItems: "center", children: [
|
|
1474
|
+
/* @__PURE__ */ jsx25(SizableText21, { size: "$6", fontWeight: "600", textAlign: "center", children: title }),
|
|
1475
|
+
description && /* @__PURE__ */ jsx25(SizableText21, { size: "$4", color: "$color9", textAlign: "center", maxWidth: 280, children: description })
|
|
1454
1476
|
] }),
|
|
1455
|
-
actionLabel && onAction && /* @__PURE__ */
|
|
1477
|
+
actionLabel && onAction && /* @__PURE__ */ jsx25(
|
|
1456
1478
|
Button5,
|
|
1457
1479
|
{
|
|
1458
1480
|
size: "$4",
|
|
@@ -1470,17 +1492,17 @@ function EmptyState({ icon, title, description, actionLabel, onAction }) {
|
|
|
1470
1492
|
|
|
1471
1493
|
// src/patterns/ProfileHeader.tsx
|
|
1472
1494
|
import { Circle as Circle5, Image as Image4, SizableText as SizableText22, XStack as XStack14, YStack as YStack19 } from "tamagui";
|
|
1473
|
-
import { jsx as
|
|
1495
|
+
import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1474
1496
|
function ProfileHeader({ name, subtitle, avatar, stats, actions }) {
|
|
1475
|
-
return /* @__PURE__ */
|
|
1476
|
-
/* @__PURE__ */
|
|
1477
|
-
/* @__PURE__ */
|
|
1478
|
-
/* @__PURE__ */
|
|
1479
|
-
subtitle && /* @__PURE__ */
|
|
1497
|
+
return /* @__PURE__ */ jsxs19(YStack19, { alignItems: "center", gap: "$4", paddingVertical: "$6", paddingHorizontal: "$4", children: [
|
|
1498
|
+
/* @__PURE__ */ jsx26(Circle5, { size: 80, backgroundColor: "$color4", overflow: "hidden", children: avatar ? /* @__PURE__ */ jsx26(Image4, { source: { uri: avatar }, width: 80, height: 80, objectFit: "cover" }) : /* @__PURE__ */ jsx26(SizableText22, { size: "$9", fontWeight: "700", color: "$color11", children: name[0]?.toUpperCase() ?? "?" }) }),
|
|
1499
|
+
/* @__PURE__ */ jsxs19(YStack19, { alignItems: "center", gap: "$1", children: [
|
|
1500
|
+
/* @__PURE__ */ jsx26(SizableText22, { size: "$7", fontWeight: "700", children: name }),
|
|
1501
|
+
subtitle && /* @__PURE__ */ jsx26(SizableText22, { size: "$4", color: "$color10", children: subtitle })
|
|
1480
1502
|
] }),
|
|
1481
|
-
stats && stats.length > 0 && /* @__PURE__ */
|
|
1482
|
-
/* @__PURE__ */
|
|
1483
|
-
/* @__PURE__ */
|
|
1503
|
+
stats && stats.length > 0 && /* @__PURE__ */ jsx26(XStack14, { gap: "$6", children: stats.map((stat, i) => /* @__PURE__ */ jsxs19(YStack19, { alignItems: "center", gap: "$1", children: [
|
|
1504
|
+
/* @__PURE__ */ jsx26(SizableText22, { size: "$6", fontWeight: "700", children: stat.value }),
|
|
1505
|
+
/* @__PURE__ */ jsx26(SizableText22, { size: "$2", color: "$color9", children: stat.label })
|
|
1484
1506
|
] }, i)) }),
|
|
1485
1507
|
actions
|
|
1486
1508
|
] });
|
|
@@ -1488,27 +1510,27 @@ function ProfileHeader({ name, subtitle, avatar, stats, actions }) {
|
|
|
1488
1510
|
|
|
1489
1511
|
// src/patterns/AppHeader.tsx
|
|
1490
1512
|
import { SizableText as SizableText23, XStack as XStack15, YStack as YStack20 } from "tamagui";
|
|
1491
|
-
import { jsx as
|
|
1513
|
+
import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1492
1514
|
function AppHeader({ title, subtitle, variant = "simple", onBack, avatar, left, right, transparent, borderless }) {
|
|
1493
1515
|
const leftContent = (() => {
|
|
1494
|
-
if (variant === "back") return /* @__PURE__ */
|
|
1495
|
-
if (variant === "profile") return /* @__PURE__ */
|
|
1516
|
+
if (variant === "back") return /* @__PURE__ */ jsx27(SizableText23, { size: "$6", paddingRight: "$2", onPress: onBack, pressStyle: { opacity: 0.6 }, cursor: "pointer", children: "\u2039" });
|
|
1517
|
+
if (variant === "profile") return /* @__PURE__ */ jsx27(Avatar, { uri: avatar, name: title, size: "sm" });
|
|
1496
1518
|
if (variant === "centered") return left ?? null;
|
|
1497
1519
|
return null;
|
|
1498
1520
|
})();
|
|
1499
1521
|
const rightContent = variant === "profile" || variant === "centered" ? right ?? null : null;
|
|
1500
|
-
return /* @__PURE__ */
|
|
1522
|
+
return /* @__PURE__ */ jsx27(
|
|
1501
1523
|
YStack20,
|
|
1502
1524
|
{
|
|
1503
1525
|
paddingTop: "$6",
|
|
1504
1526
|
backgroundColor: transparent ? "transparent" : "$background",
|
|
1505
1527
|
borderBottomWidth: borderless ? 0 : 1,
|
|
1506
1528
|
borderBottomColor: "$borderColor",
|
|
1507
|
-
children: /* @__PURE__ */
|
|
1529
|
+
children: /* @__PURE__ */ jsxs20(XStack15, { height: 56, alignItems: "center", paddingHorizontal: "$4", gap: "$3", children: [
|
|
1508
1530
|
leftContent,
|
|
1509
|
-
/* @__PURE__ */
|
|
1510
|
-
/* @__PURE__ */
|
|
1511
|
-
subtitle && /* @__PURE__ */
|
|
1531
|
+
/* @__PURE__ */ jsxs20(YStack20, { flex: 1, alignItems: variant === "centered" ? "center" : "flex-start", children: [
|
|
1532
|
+
/* @__PURE__ */ jsx27(SizableText23, { size: "$6", fontWeight: "700", numberOfLines: 1, children: title }),
|
|
1533
|
+
subtitle && /* @__PURE__ */ jsx27(SizableText23, { size: "$2", color: "$color9", numberOfLines: 1, children: subtitle })
|
|
1512
1534
|
] }),
|
|
1513
1535
|
rightContent
|
|
1514
1536
|
] })
|
|
@@ -1519,9 +1541,9 @@ function AppHeader({ title, subtitle, variant = "simple", onBack, avatar, left,
|
|
|
1519
1541
|
// src/patterns/BottomSheet.tsx
|
|
1520
1542
|
import { Sheet, SizableText as SizableText24, XStack as XStack16, YStack as YStack21 } from "tamagui";
|
|
1521
1543
|
import { ScrollView as ScrollView3 } from "react-native";
|
|
1522
|
-
import { jsx as
|
|
1544
|
+
import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1523
1545
|
function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], dismissOnSnapToBottom = true, showHandle = true, showClose = false, zIndex = 1e5 }) {
|
|
1524
|
-
return /* @__PURE__ */
|
|
1546
|
+
return /* @__PURE__ */ jsxs21(
|
|
1525
1547
|
Sheet,
|
|
1526
1548
|
{
|
|
1527
1549
|
modal: true,
|
|
@@ -1533,12 +1555,12 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
|
|
|
1533
1555
|
zIndex,
|
|
1534
1556
|
animation: "medium",
|
|
1535
1557
|
children: [
|
|
1536
|
-
/* @__PURE__ */
|
|
1537
|
-
showHandle && /* @__PURE__ */
|
|
1538
|
-
/* @__PURE__ */
|
|
1539
|
-
(title || showClose) && /* @__PURE__ */
|
|
1540
|
-
/* @__PURE__ */
|
|
1541
|
-
showClose && /* @__PURE__ */
|
|
1558
|
+
/* @__PURE__ */ jsx28(Sheet.Overlay, { animation: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }),
|
|
1559
|
+
showHandle && /* @__PURE__ */ jsx28(Sheet.Handle, {}),
|
|
1560
|
+
/* @__PURE__ */ jsxs21(Sheet.Frame, { children: [
|
|
1561
|
+
(title || showClose) && /* @__PURE__ */ jsxs21(XStack16, { paddingHorizontal: "$4", paddingTop: "$3", paddingBottom: "$2", alignItems: "center", justifyContent: "space-between", children: [
|
|
1562
|
+
/* @__PURE__ */ jsx28(SizableText24, { size: "$6", fontWeight: "600", flexShrink: 1, children: title }),
|
|
1563
|
+
showClose && /* @__PURE__ */ jsx28(
|
|
1542
1564
|
XStack16,
|
|
1543
1565
|
{
|
|
1544
1566
|
width: 28,
|
|
@@ -1549,11 +1571,11 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
|
|
|
1549
1571
|
justifyContent: "center",
|
|
1550
1572
|
pressStyle: { opacity: 0.7 },
|
|
1551
1573
|
onPress: () => onOpenChange(false),
|
|
1552
|
-
children: /* @__PURE__ */
|
|
1574
|
+
children: /* @__PURE__ */ jsx28(SizableText24, { size: "$3", color: "$color10", fontWeight: "600", children: "\u2715" })
|
|
1553
1575
|
}
|
|
1554
1576
|
)
|
|
1555
1577
|
] }),
|
|
1556
|
-
/* @__PURE__ */
|
|
1578
|
+
/* @__PURE__ */ jsx28(ScrollView3, { contentContainerStyle: { paddingBottom: 40 }, children: /* @__PURE__ */ jsx28(YStack21, { padding: "$4", children }) })
|
|
1557
1579
|
] })
|
|
1558
1580
|
]
|
|
1559
1581
|
}
|
|
@@ -1563,36 +1585,13 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
|
|
|
1563
1585
|
// src/patterns/LoginScreen.tsx
|
|
1564
1586
|
import { useState as useState7 } from "react";
|
|
1565
1587
|
import { Button as Button6, Circle as Circle6, SizableText as SizableText25, Spinner, XStack as XStack17, YStack as YStack22 } from "tamagui";
|
|
1566
|
-
import { Fragment as Fragment2, jsx as
|
|
1567
|
-
function GoogleIcon({ size = 20 }) {
|
|
1568
|
-
return /* @__PURE__ */ jsx28(XStack17, { width: size, height: size, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx28(SizableText25, { fontSize: size, lineHeight: size, fontWeight: "700", color: "#4285F4", children: "G" }) });
|
|
1569
|
-
}
|
|
1570
|
-
function AppleIcon({ size = 20 }) {
|
|
1571
|
-
return /* @__PURE__ */ jsx28(XStack17, { width: size, height: size, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx28(SizableText25, { fontSize: size * 0.85, lineHeight: size, color: "$color1", children: "\uF8FF" }) });
|
|
1572
|
-
}
|
|
1573
|
-
function GitHubIcon({ size = 20 }) {
|
|
1574
|
-
return /* @__PURE__ */ jsx28(Circle6, { size, backgroundColor: "$color1", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx28(SizableText25, { fontSize: size * 0.6, lineHeight: size, fontWeight: "900", color: "$color12", textAlign: "center", children: "GH" }) });
|
|
1575
|
-
}
|
|
1576
|
-
function MicrosoftIcon({ size = 20 }) {
|
|
1577
|
-
const half = Math.floor(size * 0.4);
|
|
1578
|
-
const gap = 2;
|
|
1579
|
-
return /* @__PURE__ */ jsxs21(YStack22, { width: size, height: size, alignItems: "center", justifyContent: "center", children: [
|
|
1580
|
-
/* @__PURE__ */ jsxs21(XStack17, { gap, children: [
|
|
1581
|
-
/* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#F25022" }),
|
|
1582
|
-
/* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#7FBA00" })
|
|
1583
|
-
] }),
|
|
1584
|
-
/* @__PURE__ */ jsxs21(XStack17, { gap, children: [
|
|
1585
|
-
/* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#00A4EF" }),
|
|
1586
|
-
/* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#FFB900" })
|
|
1587
|
-
] })
|
|
1588
|
-
] });
|
|
1589
|
-
}
|
|
1588
|
+
import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1590
1589
|
var BRAND_ICON_MAP = {
|
|
1591
|
-
google:
|
|
1592
|
-
apple:
|
|
1593
|
-
github:
|
|
1594
|
-
microsoft:
|
|
1595
|
-
custom: ({ size = 20 }) => /* @__PURE__ */
|
|
1590
|
+
google: ({ size }) => /* @__PURE__ */ jsx29(GoogleLogo, { size }),
|
|
1591
|
+
apple: ({ size, color }) => /* @__PURE__ */ jsx29(AppleLogo, { size, color }),
|
|
1592
|
+
github: ({ size, color }) => /* @__PURE__ */ jsx29(GitHubLogo, { size, color }),
|
|
1593
|
+
microsoft: ({ size }) => /* @__PURE__ */ jsx29(MicrosoftLogo, { size }),
|
|
1594
|
+
custom: ({ size = 20 }) => /* @__PURE__ */ jsx29(Circle6, { size, backgroundColor: "$color4", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx29(SizableText25, { fontSize: size * 0.6, color: "$color10", children: "\u2022" }) })
|
|
1596
1595
|
};
|
|
1597
1596
|
var BRAND_STYLES = {
|
|
1598
1597
|
google: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" },
|
|
@@ -1603,9 +1602,10 @@ var BRAND_STYLES = {
|
|
|
1603
1602
|
};
|
|
1604
1603
|
function ProviderBadge({ provider }) {
|
|
1605
1604
|
const brand = provider.brand ?? "custom";
|
|
1606
|
-
if (provider.icon) return /* @__PURE__ */
|
|
1607
|
-
const
|
|
1608
|
-
|
|
1605
|
+
if (provider.icon) return /* @__PURE__ */ jsx29(Fragment2, { children: provider.icon });
|
|
1606
|
+
const renderIcon = BRAND_ICON_MAP[brand];
|
|
1607
|
+
const iconColor = brand === "apple" || brand === "github" ? "#fff" : void 0;
|
|
1608
|
+
return renderIcon({ size: 20, color: iconColor });
|
|
1609
1609
|
}
|
|
1610
1610
|
function LoginScreen({
|
|
1611
1611
|
variant = "default",
|
|
@@ -1630,9 +1630,9 @@ function LoginScreen({
|
|
|
1630
1630
|
const [password, setPassword] = useState7("");
|
|
1631
1631
|
const isEditorial = variant === "editorial";
|
|
1632
1632
|
const isCenteredCard = variant === "centered-card";
|
|
1633
|
-
return /* @__PURE__ */
|
|
1634
|
-
backgroundSlot ? /* @__PURE__ */
|
|
1635
|
-
/* @__PURE__ */
|
|
1633
|
+
return /* @__PURE__ */ jsxs22(YStack22, { flex: 1, padding: "$4", gap: "$5", backgroundColor: "$background", justifyContent: "center", children: [
|
|
1634
|
+
backgroundSlot ? /* @__PURE__ */ jsx29(YStack22, { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, children: backgroundSlot }) : null,
|
|
1635
|
+
/* @__PURE__ */ jsxs22(
|
|
1636
1636
|
YStack22,
|
|
1637
1637
|
{
|
|
1638
1638
|
gap: "$5",
|
|
@@ -1642,13 +1642,13 @@ function LoginScreen({
|
|
|
1642
1642
|
borderWidth: isCenteredCard ? 1 : 0,
|
|
1643
1643
|
borderColor: isCenteredCard ? "$color4" : void 0,
|
|
1644
1644
|
children: [
|
|
1645
|
-
/* @__PURE__ */
|
|
1646
|
-
logo && /* @__PURE__ */
|
|
1647
|
-
hero ? /* @__PURE__ */
|
|
1648
|
-
/* @__PURE__ */
|
|
1649
|
-
/* @__PURE__ */
|
|
1645
|
+
/* @__PURE__ */ jsxs22(YStack22, { alignItems: "center", gap: "$2", children: [
|
|
1646
|
+
logo && /* @__PURE__ */ jsx29(YStack22, { paddingBottom: "$3", children: logo }),
|
|
1647
|
+
hero ? /* @__PURE__ */ jsx29(YStack22, { paddingBottom: "$2", children: hero }) : null,
|
|
1648
|
+
/* @__PURE__ */ jsx29(SizableText25, { size: isEditorial ? "$10" : "$9", fontWeight: "700", textAlign: "center", fontFamily: isEditorial ? "$heading" : void 0, children: title }),
|
|
1649
|
+
/* @__PURE__ */ jsx29(SizableText25, { size: "$4", color: "$color10", textAlign: "center", children: subtitle })
|
|
1650
1650
|
] }),
|
|
1651
|
-
providers.length > 0 && /* @__PURE__ */
|
|
1651
|
+
providers.length > 0 && /* @__PURE__ */ jsx29(YStack22, { gap: "$2.5", children: providers.map((p) => /* @__PURE__ */ jsx29(
|
|
1652
1652
|
Button6,
|
|
1653
1653
|
{
|
|
1654
1654
|
size: "$5",
|
|
@@ -1660,25 +1660,25 @@ function LoginScreen({
|
|
|
1660
1660
|
onPress: () => onProviderPress?.(p.id),
|
|
1661
1661
|
hoverStyle: { backgroundColor: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].backgroundColor : "$color2" },
|
|
1662
1662
|
pressStyle: { backgroundColor: "$color3" },
|
|
1663
|
-
children: /* @__PURE__ */
|
|
1664
|
-
/* @__PURE__ */
|
|
1665
|
-
/* @__PURE__ */
|
|
1666
|
-
/* @__PURE__ */
|
|
1667
|
-
/* @__PURE__ */
|
|
1668
|
-
p.description ? /* @__PURE__ */
|
|
1663
|
+
children: /* @__PURE__ */ jsxs22(XStack17, { alignItems: "center", justifyContent: "space-between", width: "100%", gap: "$2", children: [
|
|
1664
|
+
/* @__PURE__ */ jsxs22(XStack17, { alignItems: "center", gap: "$2.5", children: [
|
|
1665
|
+
/* @__PURE__ */ jsx29(ProviderBadge, { provider: p }),
|
|
1666
|
+
/* @__PURE__ */ jsxs22(YStack22, { alignItems: "flex-start", children: [
|
|
1667
|
+
/* @__PURE__ */ jsx29(SizableText25, { size: "$4", fontWeight: "600", color: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].textColor : void 0, children: p.name }),
|
|
1668
|
+
p.description ? /* @__PURE__ */ jsx29(SizableText25, { size: "$2", color: "$color10", children: p.description }) : null
|
|
1669
1669
|
] })
|
|
1670
1670
|
] }),
|
|
1671
|
-
/* @__PURE__ */
|
|
1671
|
+
/* @__PURE__ */ jsx29(SizableText25, { size: "$4", color: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].textColor : "$color9", children: "\u2192" })
|
|
1672
1672
|
] })
|
|
1673
1673
|
},
|
|
1674
1674
|
p.id
|
|
1675
1675
|
)) }),
|
|
1676
|
-
showEmailForm && providers.length > 0 && /* @__PURE__ */
|
|
1677
|
-
showEmailForm && /* @__PURE__ */
|
|
1678
|
-
/* @__PURE__ */
|
|
1679
|
-
/* @__PURE__ */
|
|
1680
|
-
onForgotPassword && /* @__PURE__ */
|
|
1681
|
-
/* @__PURE__ */
|
|
1676
|
+
showEmailForm && providers.length > 0 && /* @__PURE__ */ jsx29(Divider, { label: "or" }),
|
|
1677
|
+
showEmailForm && /* @__PURE__ */ jsxs22(YStack22, { gap: "$3", children: [
|
|
1678
|
+
/* @__PURE__ */ jsx29(Input, { label: "Email", placeholder: "your@email.com", value: email, onChangeText: setEmail, keyboardType: "email-address", autoCapitalize: "none" }),
|
|
1679
|
+
/* @__PURE__ */ jsx29(Input, { label: "Password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: password, onChangeText: setPassword, secureTextEntry: true }),
|
|
1680
|
+
onForgotPassword && /* @__PURE__ */ jsx29(XStack17, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx29(SizableText25, { size: "$3", color: "$color9", onPress: onForgotPassword, children: "Forgot password?" }) }),
|
|
1681
|
+
/* @__PURE__ */ jsx29(
|
|
1682
1682
|
Button6,
|
|
1683
1683
|
{
|
|
1684
1684
|
size: "$5",
|
|
@@ -1689,18 +1689,18 @@ function LoginScreen({
|
|
|
1689
1689
|
onPress: () => onEmailSubmit?.(email, password),
|
|
1690
1690
|
hoverStyle: { backgroundColor: "$color10" },
|
|
1691
1691
|
pressStyle: { backgroundColor: "$color8" },
|
|
1692
|
-
icon: loading ? /* @__PURE__ */
|
|
1692
|
+
icon: loading ? /* @__PURE__ */ jsx29(Spinner, { size: "small", color: "$color1" }) : void 0,
|
|
1693
1693
|
children: "Sign In"
|
|
1694
1694
|
}
|
|
1695
1695
|
),
|
|
1696
|
-
onCreateAccount && /* @__PURE__ */
|
|
1696
|
+
onCreateAccount && /* @__PURE__ */ jsx29(Button6, { size: "$3", chromeless: true, onPress: onCreateAccount, children: /* @__PURE__ */ jsx29(SizableText25, { size: "$3", color: "$color9", children: "Create Account" }) })
|
|
1697
1697
|
] }),
|
|
1698
|
-
(onTerms || onPrivacy) && /* @__PURE__ */
|
|
1698
|
+
(onTerms || onPrivacy) && /* @__PURE__ */ jsx29(YStack22, { paddingTop: "$2", alignItems: "center", children: /* @__PURE__ */ jsxs22(SizableText25, { size: "$2", color: "$color8", textAlign: "center", children: [
|
|
1699
1699
|
"By continuing you agree to our",
|
|
1700
1700
|
" ",
|
|
1701
|
-
onTerms && /* @__PURE__ */
|
|
1701
|
+
onTerms && /* @__PURE__ */ jsx29(SizableText25, { size: "$2", color: "$color9", onPress: onTerms, children: "Terms of Service" }),
|
|
1702
1702
|
onTerms && onPrivacy && " & ",
|
|
1703
|
-
onPrivacy && /* @__PURE__ */
|
|
1703
|
+
onPrivacy && /* @__PURE__ */ jsx29(SizableText25, { size: "$2", color: "$color9", onPress: onPrivacy, children: "Privacy Policy" })
|
|
1704
1704
|
] }) }),
|
|
1705
1705
|
footerSlot
|
|
1706
1706
|
]
|
|
@@ -1711,11 +1711,11 @@ function LoginScreen({
|
|
|
1711
1711
|
|
|
1712
1712
|
// src/patterns/TabBar.tsx
|
|
1713
1713
|
import { SizableText as SizableText26, XStack as XStack18, YStack as YStack23 } from "tamagui";
|
|
1714
|
-
import { jsx as
|
|
1714
|
+
import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1715
1715
|
function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
1716
|
-
return /* @__PURE__ */
|
|
1716
|
+
return /* @__PURE__ */ jsx30(XStack18, { height: 56, borderTopWidth: 1, borderTopColor: "$borderColor", backgroundColor: "$background", paddingBottom: "$2", children: tabs.map((tab) => {
|
|
1717
1717
|
const active = tab.id === activeTab;
|
|
1718
|
-
return /* @__PURE__ */
|
|
1718
|
+
return /* @__PURE__ */ jsxs23(
|
|
1719
1719
|
YStack23,
|
|
1720
1720
|
{
|
|
1721
1721
|
flex: 1,
|
|
@@ -1725,8 +1725,8 @@ function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
|
1725
1725
|
pressStyle: { opacity: 0.6 },
|
|
1726
1726
|
onPress: () => onTabPress(tab.id),
|
|
1727
1727
|
children: [
|
|
1728
|
-
tab.icon && /* @__PURE__ */
|
|
1729
|
-
showLabels && /* @__PURE__ */
|
|
1728
|
+
tab.icon && /* @__PURE__ */ jsx30(SizableText26, { size: "$5", color: active ? "$color9" : "$color8", children: tab.icon }),
|
|
1729
|
+
showLabels && /* @__PURE__ */ jsx30(SizableText26, { size: "$1", color: active ? "$color9" : "$color8", fontWeight: active ? "600" : "400", children: tab.label })
|
|
1730
1730
|
]
|
|
1731
1731
|
},
|
|
1732
1732
|
tab.id
|
|
@@ -1736,11 +1736,11 @@ function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
|
1736
1736
|
|
|
1737
1737
|
// src/patterns/SearchBar.tsx
|
|
1738
1738
|
import { Input as Input2, SizableText as SizableText27, XStack as XStack19 } from "tamagui";
|
|
1739
|
-
import { jsx as
|
|
1739
|
+
import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
1740
1740
|
function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter, onCancel, autoFocus }) {
|
|
1741
|
-
return /* @__PURE__ */
|
|
1742
|
-
/* @__PURE__ */
|
|
1743
|
-
/* @__PURE__ */
|
|
1741
|
+
return /* @__PURE__ */ jsxs24(XStack19, { height: 44, borderRadius: "$10", backgroundColor: "$color2", alignItems: "center", paddingHorizontal: "$3", gap: "$2", children: [
|
|
1742
|
+
/* @__PURE__ */ jsx31(SizableText27, { size: "$4", color: "$color8", children: "\u2315" }),
|
|
1743
|
+
/* @__PURE__ */ jsx31(
|
|
1744
1744
|
Input2,
|
|
1745
1745
|
{
|
|
1746
1746
|
flex: 1,
|
|
@@ -1754,14 +1754,14 @@ function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter
|
|
|
1754
1754
|
autoFocus
|
|
1755
1755
|
}
|
|
1756
1756
|
),
|
|
1757
|
-
onFilter && /* @__PURE__ */
|
|
1758
|
-
onCancel && /* @__PURE__ */
|
|
1757
|
+
onFilter && /* @__PURE__ */ jsx31(SizableText27, { size: "$4", color: "$color9", pressStyle: { opacity: 0.6 }, onPress: onFilter, children: "\u2ACF" }),
|
|
1758
|
+
onCancel && /* @__PURE__ */ jsx31(SizableText27, { size: "$3", color: "$color9", pressStyle: { opacity: 0.6 }, onPress: onCancel, children: "Cancel" })
|
|
1759
1759
|
] });
|
|
1760
1760
|
}
|
|
1761
1761
|
|
|
1762
1762
|
// src/patterns/FloatingActionButton.tsx
|
|
1763
1763
|
import { SizableText as SizableText28, XStack as XStack20 } from "tamagui";
|
|
1764
|
-
import { jsx as
|
|
1764
|
+
import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
1765
1765
|
var sizes = { sm: 44, md: 56, lg: 68 };
|
|
1766
1766
|
var positionStyles = {
|
|
1767
1767
|
"bottom-right": { right: 20 },
|
|
@@ -1770,7 +1770,7 @@ var positionStyles = {
|
|
|
1770
1770
|
};
|
|
1771
1771
|
function FloatingActionButton({ icon, label, onPress, position = "bottom-right", size = "md" }) {
|
|
1772
1772
|
const dim = sizes[size];
|
|
1773
|
-
return /* @__PURE__ */
|
|
1773
|
+
return /* @__PURE__ */ jsxs25(
|
|
1774
1774
|
XStack20,
|
|
1775
1775
|
{
|
|
1776
1776
|
position: "absolute",
|
|
@@ -1788,8 +1788,8 @@ function FloatingActionButton({ icon, label, onPress, position = "bottom-right",
|
|
|
1788
1788
|
pressStyle: { scale: 0.95, opacity: 0.9 },
|
|
1789
1789
|
onPress,
|
|
1790
1790
|
children: [
|
|
1791
|
-
icon && /* @__PURE__ */
|
|
1792
|
-
label && /* @__PURE__ */
|
|
1791
|
+
icon && /* @__PURE__ */ jsx32(SizableText28, { color: "$color1", children: icon }),
|
|
1792
|
+
label && /* @__PURE__ */ jsx32(SizableText28, { color: "$color1", size: "$4", fontWeight: "600", children: label })
|
|
1793
1793
|
]
|
|
1794
1794
|
}
|
|
1795
1795
|
);
|
|
@@ -1797,9 +1797,9 @@ function FloatingActionButton({ icon, label, onPress, position = "bottom-right",
|
|
|
1797
1797
|
|
|
1798
1798
|
// src/patterns/ActionSheet.tsx
|
|
1799
1799
|
import { Sheet as Sheet2, SizableText as SizableText29, XStack as XStack21, YStack as YStack24 } from "tamagui";
|
|
1800
|
-
import { jsx as
|
|
1800
|
+
import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
1801
1801
|
function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel = "Cancel", zIndex = 1e5 }) {
|
|
1802
|
-
return /* @__PURE__ */
|
|
1802
|
+
return /* @__PURE__ */ jsxs26(
|
|
1803
1803
|
Sheet2,
|
|
1804
1804
|
{
|
|
1805
1805
|
modal: true,
|
|
@@ -1811,11 +1811,11 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1811
1811
|
zIndex,
|
|
1812
1812
|
animation: "medium",
|
|
1813
1813
|
children: [
|
|
1814
|
-
/* @__PURE__ */
|
|
1815
|
-
/* @__PURE__ */
|
|
1816
|
-
/* @__PURE__ */
|
|
1817
|
-
title && /* @__PURE__ */
|
|
1818
|
-
/* @__PURE__ */
|
|
1814
|
+
/* @__PURE__ */ jsx33(Sheet2.Overlay, { animation: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }),
|
|
1815
|
+
/* @__PURE__ */ jsx33(Sheet2.Handle, {}),
|
|
1816
|
+
/* @__PURE__ */ jsxs26(Sheet2.Frame, { children: [
|
|
1817
|
+
title && /* @__PURE__ */ jsx33(SizableText29, { size: "$3", color: "$color8", textAlign: "center", paddingTop: "$3", paddingBottom: "$1", children: title }),
|
|
1818
|
+
/* @__PURE__ */ jsx33(YStack24, { paddingHorizontal: "$3", paddingTop: "$2", children: items.map((item) => /* @__PURE__ */ jsxs26(
|
|
1819
1819
|
XStack21,
|
|
1820
1820
|
{
|
|
1821
1821
|
height: 52,
|
|
@@ -1829,8 +1829,8 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1829
1829
|
onOpenChange(false);
|
|
1830
1830
|
},
|
|
1831
1831
|
children: [
|
|
1832
|
-
item.icon && /* @__PURE__ */
|
|
1833
|
-
/* @__PURE__ */
|
|
1832
|
+
item.icon && /* @__PURE__ */ jsx33(SizableText29, { size: "$5", children: item.icon }),
|
|
1833
|
+
/* @__PURE__ */ jsx33(
|
|
1834
1834
|
SizableText29,
|
|
1835
1835
|
{
|
|
1836
1836
|
size: "$5",
|
|
@@ -1844,7 +1844,7 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1844
1844
|
},
|
|
1845
1845
|
item.id
|
|
1846
1846
|
)) }),
|
|
1847
|
-
/* @__PURE__ */
|
|
1847
|
+
/* @__PURE__ */ jsx33(YStack24, { paddingHorizontal: "$3", paddingVertical: "$3", borderTopWidth: 1, borderTopColor: "$borderColor", marginTop: "$2", children: /* @__PURE__ */ jsx33(
|
|
1848
1848
|
XStack21,
|
|
1849
1849
|
{
|
|
1850
1850
|
height: 48,
|
|
@@ -1853,7 +1853,7 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1853
1853
|
borderRadius: "$4",
|
|
1854
1854
|
pressStyle: { backgroundColor: "$color3" },
|
|
1855
1855
|
onPress: () => onOpenChange(false),
|
|
1856
|
-
children: /* @__PURE__ */
|
|
1856
|
+
children: /* @__PURE__ */ jsx33(SizableText29, { size: "$5", fontWeight: "600", color: "$color9", children: cancelLabel })
|
|
1857
1857
|
}
|
|
1858
1858
|
) })
|
|
1859
1859
|
] })
|
|
@@ -1864,18 +1864,18 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1864
1864
|
|
|
1865
1865
|
// src/patterns/Skeleton.tsx
|
|
1866
1866
|
import { YStack as YStack25 } from "tamagui";
|
|
1867
|
-
import { jsx as
|
|
1867
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
1868
1868
|
function Skeleton({ width, height, borderRadius, variant = "rectangular" }) {
|
|
1869
1869
|
const size = variant === "circular" ? height ?? 40 : height;
|
|
1870
1870
|
const w = variant === "text" ? width ?? "100%" : width;
|
|
1871
1871
|
const h = variant === "text" ? height ?? 16 : size;
|
|
1872
1872
|
const r = variant === "circular" ? 9999 : borderRadius ?? 8;
|
|
1873
|
-
return /* @__PURE__ */
|
|
1873
|
+
return /* @__PURE__ */ jsx34(YStack25, { width: w, height: h, borderRadius: r, backgroundColor: "$color3", opacity: 0.6, animation: "slow", enterStyle: { opacity: 0.3 }, exitStyle: { opacity: 0.3 } });
|
|
1874
1874
|
}
|
|
1875
1875
|
|
|
1876
1876
|
// src/patterns/NotificationBanner.tsx
|
|
1877
1877
|
import { SizableText as SizableText30, XStack as XStack22, YStack as YStack26 } from "tamagui";
|
|
1878
|
-
import { jsx as
|
|
1878
|
+
import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
1879
1879
|
var variantColors = {
|
|
1880
1880
|
info: { bg: "$blue3", text: "$blue11" },
|
|
1881
1881
|
success: { bg: "$green3", text: "$green11" },
|
|
@@ -1884,7 +1884,7 @@ var variantColors = {
|
|
|
1884
1884
|
};
|
|
1885
1885
|
function NotificationBanner({ title, message, variant = "info", onPress, onDismiss, icon }) {
|
|
1886
1886
|
const colors = variantColors[variant];
|
|
1887
|
-
return /* @__PURE__ */
|
|
1887
|
+
return /* @__PURE__ */ jsxs27(
|
|
1888
1888
|
XStack22,
|
|
1889
1889
|
{
|
|
1890
1890
|
backgroundColor: colors.bg,
|
|
@@ -1895,12 +1895,12 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
|
|
|
1895
1895
|
onPress,
|
|
1896
1896
|
pressStyle: onPress ? { opacity: 0.8 } : void 0,
|
|
1897
1897
|
children: [
|
|
1898
|
-
icon && /* @__PURE__ */
|
|
1899
|
-
/* @__PURE__ */
|
|
1900
|
-
/* @__PURE__ */
|
|
1901
|
-
message && /* @__PURE__ */
|
|
1898
|
+
icon && /* @__PURE__ */ jsx35(YStack26, { paddingTop: "$0.5", children: icon }),
|
|
1899
|
+
/* @__PURE__ */ jsxs27(YStack26, { flex: 1, gap: "$1", children: [
|
|
1900
|
+
/* @__PURE__ */ jsx35(SizableText30, { size: "$4", fontWeight: "600", color: colors.text, children: title }),
|
|
1901
|
+
message && /* @__PURE__ */ jsx35(SizableText30, { size: "$3", color: colors.text, opacity: 0.8, children: message })
|
|
1902
1902
|
] }),
|
|
1903
|
-
onDismiss && /* @__PURE__ */
|
|
1903
|
+
onDismiss && /* @__PURE__ */ jsx35(SizableText30, { size: "$3", color: colors.text, opacity: 0.6, onPress: onDismiss, padding: "$1", children: "\u2715" })
|
|
1904
1904
|
]
|
|
1905
1905
|
}
|
|
1906
1906
|
);
|
|
@@ -1908,35 +1908,35 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
|
|
|
1908
1908
|
|
|
1909
1909
|
// src/patterns/ProgressSteps.tsx
|
|
1910
1910
|
import { Circle as Circle7, SizableText as SizableText31, XStack as XStack23, YStack as YStack27 } from "tamagui";
|
|
1911
|
-
import { jsx as
|
|
1911
|
+
import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
1912
1912
|
function ProgressSteps({ steps, currentStep, variant = "dots" }) {
|
|
1913
1913
|
if (variant === "bar") {
|
|
1914
1914
|
const progress = steps.length > 1 ? currentStep / (steps.length - 1) * 100 : 100;
|
|
1915
|
-
return /* @__PURE__ */
|
|
1916
|
-
/* @__PURE__ */
|
|
1917
|
-
/* @__PURE__ */
|
|
1915
|
+
return /* @__PURE__ */ jsxs28(YStack27, { gap: "$2", children: [
|
|
1916
|
+
/* @__PURE__ */ jsx36(YStack27, { height: 4, backgroundColor: "$color4", borderRadius: 2, overflow: "hidden", children: /* @__PURE__ */ jsx36(YStack27, { height: 4, width: `${progress}%`, backgroundColor: "$color9", borderRadius: 2, animation: "quick" }) }),
|
|
1917
|
+
/* @__PURE__ */ jsx36(XStack23, { justifyContent: "space-between", children: steps.map((label, i) => /* @__PURE__ */ jsx36(SizableText31, { size: "$2", color: i <= currentStep ? "$color9" : "$color8", children: label }, i)) })
|
|
1918
1918
|
] });
|
|
1919
1919
|
}
|
|
1920
|
-
return /* @__PURE__ */
|
|
1921
|
-
/* @__PURE__ */
|
|
1922
|
-
/* @__PURE__ */
|
|
1923
|
-
/* @__PURE__ */
|
|
1920
|
+
return /* @__PURE__ */ jsx36(XStack23, { alignItems: "center", justifyContent: "center", gap: "$0", children: steps.map((label, i) => /* @__PURE__ */ jsxs28(XStack23, { alignItems: "center", gap: "$0", children: [
|
|
1921
|
+
/* @__PURE__ */ jsxs28(YStack27, { alignItems: "center", gap: "$1.5", children: [
|
|
1922
|
+
/* @__PURE__ */ jsx36(Circle7, { size: variant === "numbered" ? 28 : 10, backgroundColor: i <= currentStep ? "$color9" : "$color4", animation: "quick", children: variant === "numbered" && /* @__PURE__ */ jsx36(SizableText31, { size: "$2", fontWeight: "600", color: i <= currentStep ? "$color1" : "$color8", children: i + 1 }) }),
|
|
1923
|
+
/* @__PURE__ */ jsx36(SizableText31, { size: "$1", color: i <= currentStep ? "$color11" : "$color8", numberOfLines: 1, children: label })
|
|
1924
1924
|
] }),
|
|
1925
|
-
i < steps.length - 1 && /* @__PURE__ */
|
|
1925
|
+
i < steps.length - 1 && /* @__PURE__ */ jsx36(YStack27, { height: 2, width: 32, backgroundColor: i < currentStep ? "$color9" : "$color4", marginBottom: "$4" })
|
|
1926
1926
|
] }, i)) });
|
|
1927
1927
|
}
|
|
1928
1928
|
|
|
1929
1929
|
// src/patterns/SwipeableRow.tsx
|
|
1930
1930
|
import { useState as useState8 } from "react";
|
|
1931
1931
|
import { Button as Button7, SizableText as SizableText32, XStack as XStack24, YStack as YStack28 } from "tamagui";
|
|
1932
|
-
import { Fragment as Fragment3, jsx as
|
|
1932
|
+
import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
1933
1933
|
function SwipeableRow({ children, leftActions, rightActions }) {
|
|
1934
1934
|
const [showActions, setShowActions] = useState8(false);
|
|
1935
1935
|
const actions = [...leftActions ?? [], ...rightActions ?? []];
|
|
1936
|
-
if (actions.length === 0) return /* @__PURE__ */
|
|
1937
|
-
return /* @__PURE__ */
|
|
1938
|
-
/* @__PURE__ */
|
|
1939
|
-
showActions && /* @__PURE__ */
|
|
1936
|
+
if (actions.length === 0) return /* @__PURE__ */ jsx37(Fragment3, { children });
|
|
1937
|
+
return /* @__PURE__ */ jsxs29(YStack28, { children: [
|
|
1938
|
+
/* @__PURE__ */ jsx37(YStack28, { onLongPress: () => setShowActions((v) => !v), pressStyle: { opacity: 0.9 }, children }),
|
|
1939
|
+
showActions && /* @__PURE__ */ jsx37(XStack24, { gap: "$2", padding: "$2", animation: "quick", enterStyle: { opacity: 0, scale: 0.95 }, children: actions.map((action) => /* @__PURE__ */ jsx37(
|
|
1940
1940
|
Button7,
|
|
1941
1941
|
{
|
|
1942
1942
|
flex: 1,
|
|
@@ -1947,7 +1947,7 @@ function SwipeableRow({ children, leftActions, rightActions }) {
|
|
|
1947
1947
|
action.onPress();
|
|
1948
1948
|
setShowActions(false);
|
|
1949
1949
|
},
|
|
1950
|
-
children: /* @__PURE__ */
|
|
1950
|
+
children: /* @__PURE__ */ jsx37(SizableText32, { size: "$2", fontWeight: "600", color: "white", children: action.label })
|
|
1951
1951
|
},
|
|
1952
1952
|
action.id
|
|
1953
1953
|
)) })
|
|
@@ -1957,9 +1957,9 @@ function SwipeableRow({ children, leftActions, rightActions }) {
|
|
|
1957
1957
|
// src/patterns/MediaCard.tsx
|
|
1958
1958
|
import { Image as Image5, SizableText as SizableText33, XStack as XStack25, YStack as YStack29 } from "tamagui";
|
|
1959
1959
|
import { LinearGradient } from "tamagui/linear-gradient";
|
|
1960
|
-
import { jsx as
|
|
1960
|
+
import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
1961
1961
|
function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio = 16 / 9, onPress, badge }) {
|
|
1962
|
-
return /* @__PURE__ */
|
|
1962
|
+
return /* @__PURE__ */ jsx38(
|
|
1963
1963
|
YStack29,
|
|
1964
1964
|
{
|
|
1965
1965
|
borderRadius: "$4",
|
|
@@ -1967,9 +1967,9 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
1967
1967
|
onPress,
|
|
1968
1968
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
1969
1969
|
animation: "quick",
|
|
1970
|
-
children: /* @__PURE__ */
|
|
1971
|
-
/* @__PURE__ */
|
|
1972
|
-
overlay === "gradient" && /* @__PURE__ */
|
|
1970
|
+
children: /* @__PURE__ */ jsxs30(YStack29, { aspectRatio, children: [
|
|
1971
|
+
/* @__PURE__ */ jsx38(Image5, { source: { uri: image }, width: "100%", height: "100%", objectFit: "cover" }),
|
|
1972
|
+
overlay === "gradient" && /* @__PURE__ */ jsx38(
|
|
1973
1973
|
LinearGradient,
|
|
1974
1974
|
{
|
|
1975
1975
|
colors: ["transparent", "rgba(0,0,0,0.7)"],
|
|
@@ -1982,8 +1982,8 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
1982
1982
|
height: "60%"
|
|
1983
1983
|
}
|
|
1984
1984
|
),
|
|
1985
|
-
overlay === "dark" && /* @__PURE__ */
|
|
1986
|
-
badge && /* @__PURE__ */
|
|
1985
|
+
overlay === "dark" && /* @__PURE__ */ jsx38(YStack29, { position: "absolute", fullscreen: true, backgroundColor: "rgba(0,0,0,0.4)" }),
|
|
1986
|
+
badge && /* @__PURE__ */ jsx38(
|
|
1987
1987
|
XStack25,
|
|
1988
1988
|
{
|
|
1989
1989
|
position: "absolute",
|
|
@@ -1993,12 +1993,12 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
1993
1993
|
paddingHorizontal: "$2",
|
|
1994
1994
|
paddingVertical: "$1",
|
|
1995
1995
|
borderRadius: "$2",
|
|
1996
|
-
children: /* @__PURE__ */
|
|
1996
|
+
children: /* @__PURE__ */ jsx38(SizableText33, { size: "$1", fontWeight: "600", color: "$color1", children: badge })
|
|
1997
1997
|
}
|
|
1998
1998
|
),
|
|
1999
|
-
/* @__PURE__ */
|
|
2000
|
-
/* @__PURE__ */
|
|
2001
|
-
subtitle && /* @__PURE__ */
|
|
1999
|
+
/* @__PURE__ */ jsxs30(YStack29, { position: "absolute", bottom: 0, left: 0, right: 0, padding: "$3", gap: "$1", children: [
|
|
2000
|
+
/* @__PURE__ */ jsx38(SizableText33, { size: "$5", fontWeight: "600", color: "white", children: title }),
|
|
2001
|
+
subtitle && /* @__PURE__ */ jsx38(SizableText33, { size: "$3", color: "rgba(255,255,255,0.8)", children: subtitle })
|
|
2002
2002
|
] })
|
|
2003
2003
|
] })
|
|
2004
2004
|
}
|
|
@@ -2009,13 +2009,13 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
2009
2009
|
import { Children as Children2, useState as useState9 } from "react";
|
|
2010
2010
|
import { Circle as Circle8, XStack as XStack26, YStack as YStack30 } from "tamagui";
|
|
2011
2011
|
import { ScrollView as ScrollView4 } from "react-native";
|
|
2012
|
-
import { jsx as
|
|
2012
|
+
import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
2013
2013
|
function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false }) {
|
|
2014
2014
|
const [activeIndex, setActiveIndex] = useState9(0);
|
|
2015
2015
|
const count = Children2.count(children);
|
|
2016
2016
|
const gapPx = gap === "$2" ? 8 : gap === "$3" ? 12 : 16;
|
|
2017
|
-
return /* @__PURE__ */
|
|
2018
|
-
/* @__PURE__ */
|
|
2017
|
+
return /* @__PURE__ */ jsxs31(YStack30, { gap: "$3", children: [
|
|
2018
|
+
/* @__PURE__ */ jsx39(
|
|
2019
2019
|
ScrollView4,
|
|
2020
2020
|
{
|
|
2021
2021
|
horizontal: true,
|
|
@@ -2029,50 +2029,50 @@ function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false
|
|
|
2029
2029
|
children
|
|
2030
2030
|
}
|
|
2031
2031
|
),
|
|
2032
|
-
showIndicators && count > 1 && /* @__PURE__ */
|
|
2032
|
+
showIndicators && count > 1 && /* @__PURE__ */ jsx39(XStack26, { justifyContent: "center", gap: "$1.5", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx39(Circle8, { size: 6, backgroundColor: i === activeIndex ? "$color9" : "$color4", animation: "quick" }, i)) })
|
|
2033
2033
|
] });
|
|
2034
2034
|
}
|
|
2035
2035
|
|
|
2036
2036
|
// src/patterns/PullToRefresh.tsx
|
|
2037
2037
|
import { YStack as YStack31 } from "tamagui";
|
|
2038
2038
|
import { RefreshControl, ScrollView as ScrollView5 } from "react-native";
|
|
2039
|
-
import { jsx as
|
|
2039
|
+
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
2040
2040
|
function PullToRefresh({ children, onRefresh, refreshing = false }) {
|
|
2041
|
-
return /* @__PURE__ */
|
|
2041
|
+
return /* @__PURE__ */ jsx40(
|
|
2042
2042
|
ScrollView5,
|
|
2043
2043
|
{
|
|
2044
2044
|
contentContainerStyle: { flexGrow: 1 },
|
|
2045
|
-
refreshControl: /* @__PURE__ */
|
|
2046
|
-
children: /* @__PURE__ */
|
|
2045
|
+
refreshControl: /* @__PURE__ */ jsx40(RefreshControl, { refreshing, onRefresh }),
|
|
2046
|
+
children: /* @__PURE__ */ jsx40(YStack31, { flex: 1, children })
|
|
2047
2047
|
}
|
|
2048
2048
|
);
|
|
2049
2049
|
}
|
|
2050
2050
|
|
|
2051
2051
|
// src/patterns/ProductCard.tsx
|
|
2052
2052
|
import { Button as Button8, Image as Image6, SizableText as SizableText34, XStack as XStack27, YStack as YStack32 } from "tamagui";
|
|
2053
|
-
import { jsx as
|
|
2053
|
+
import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
2054
2054
|
function Stars({ rating = 0 }) {
|
|
2055
|
-
return /* @__PURE__ */
|
|
2055
|
+
return /* @__PURE__ */ jsx41(XStack27, { gap: "$0.5", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx41(SizableText34, { size: "$2", color: i < Math.round(rating) ? "$yellow9" : "$color5", children: "\u2605" }, i)) });
|
|
2056
2056
|
}
|
|
2057
2057
|
function CardContent2({ title, price, originalPrice, rating, reviewCount, onAddToCart }) {
|
|
2058
|
-
return /* @__PURE__ */
|
|
2059
|
-
/* @__PURE__ */
|
|
2060
|
-
/* @__PURE__ */
|
|
2061
|
-
rating !== void 0 && /* @__PURE__ */
|
|
2062
|
-
/* @__PURE__ */
|
|
2063
|
-
reviewCount !== void 0 && /* @__PURE__ */
|
|
2058
|
+
return /* @__PURE__ */ jsxs32(YStack32, { flex: 1, gap: "$1.5", justifyContent: "space-between", children: [
|
|
2059
|
+
/* @__PURE__ */ jsxs32(YStack32, { gap: "$1", children: [
|
|
2060
|
+
/* @__PURE__ */ jsx41(SizableText34, { size: "$4", fontWeight: "600", numberOfLines: 2, children: title }),
|
|
2061
|
+
rating !== void 0 && /* @__PURE__ */ jsxs32(XStack27, { gap: "$1.5", alignItems: "center", children: [
|
|
2062
|
+
/* @__PURE__ */ jsx41(Stars, { rating }),
|
|
2063
|
+
reviewCount !== void 0 && /* @__PURE__ */ jsxs32(SizableText34, { size: "$2", color: "$color9", children: [
|
|
2064
2064
|
"(",
|
|
2065
2065
|
reviewCount,
|
|
2066
2066
|
")"
|
|
2067
2067
|
] })
|
|
2068
2068
|
] })
|
|
2069
2069
|
] }),
|
|
2070
|
-
/* @__PURE__ */
|
|
2071
|
-
/* @__PURE__ */
|
|
2072
|
-
/* @__PURE__ */
|
|
2073
|
-
originalPrice && /* @__PURE__ */
|
|
2070
|
+
/* @__PURE__ */ jsxs32(XStack27, { alignItems: "center", justifyContent: "space-between", children: [
|
|
2071
|
+
/* @__PURE__ */ jsxs32(XStack27, { gap: "$2", alignItems: "baseline", children: [
|
|
2072
|
+
/* @__PURE__ */ jsx41(SizableText34, { size: "$6", fontWeight: "700", children: price }),
|
|
2073
|
+
originalPrice && /* @__PURE__ */ jsx41(SizableText34, { size: "$3", color: "$color8", textDecorationLine: "line-through", children: originalPrice })
|
|
2074
2074
|
] }),
|
|
2075
|
-
onAddToCart && /* @__PURE__ */
|
|
2075
|
+
onAddToCart && /* @__PURE__ */ jsx41(
|
|
2076
2076
|
Button8,
|
|
2077
2077
|
{
|
|
2078
2078
|
size: "$3",
|
|
@@ -2094,7 +2094,7 @@ function CardContent2({ title, price, originalPrice, rating, reviewCount, onAddT
|
|
|
2094
2094
|
function ProductCard({ image, title, price, originalPrice, rating, reviewCount, badge, onPress, onAddToCart, variant = "vertical" }) {
|
|
2095
2095
|
const isHorizontal = variant === "horizontal";
|
|
2096
2096
|
const Wrapper = isHorizontal ? XStack27 : YStack32;
|
|
2097
|
-
return /* @__PURE__ */
|
|
2097
|
+
return /* @__PURE__ */ jsxs32(
|
|
2098
2098
|
Wrapper,
|
|
2099
2099
|
{
|
|
2100
2100
|
backgroundColor: "$color1",
|
|
@@ -2107,9 +2107,9 @@ function ProductCard({ image, title, price, originalPrice, rating, reviewCount,
|
|
|
2107
2107
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
2108
2108
|
...isHorizontal ? { height: 140 } : {},
|
|
2109
2109
|
children: [
|
|
2110
|
-
/* @__PURE__ */
|
|
2111
|
-
/* @__PURE__ */
|
|
2112
|
-
badge && /* @__PURE__ */
|
|
2110
|
+
/* @__PURE__ */ jsxs32(YStack32, { ...isHorizontal ? { width: 140 } : { aspectRatio: 4 / 3 }, position: "relative", children: [
|
|
2111
|
+
/* @__PURE__ */ jsx41(Image6, { source: { uri: image }, width: "100%", height: "100%", objectFit: "cover" }),
|
|
2112
|
+
badge && /* @__PURE__ */ jsx41(
|
|
2113
2113
|
XStack27,
|
|
2114
2114
|
{
|
|
2115
2115
|
position: "absolute",
|
|
@@ -2119,23 +2119,23 @@ function ProductCard({ image, title, price, originalPrice, rating, reviewCount,
|
|
|
2119
2119
|
paddingHorizontal: "$2",
|
|
2120
2120
|
paddingVertical: "$1",
|
|
2121
2121
|
borderRadius: "$10",
|
|
2122
|
-
children: /* @__PURE__ */
|
|
2122
|
+
children: /* @__PURE__ */ jsx41(SizableText34, { size: "$1", fontWeight: "700", color: "white", children: badge })
|
|
2123
2123
|
}
|
|
2124
2124
|
)
|
|
2125
2125
|
] }),
|
|
2126
|
-
/* @__PURE__ */
|
|
2126
|
+
/* @__PURE__ */ jsx41(YStack32, { flex: 1, padding: "$3", children: /* @__PURE__ */ jsx41(CardContent2, { ...{ title, price, originalPrice, rating, reviewCount, onAddToCart } }) })
|
|
2127
2127
|
]
|
|
2128
2128
|
}
|
|
2129
2129
|
);
|
|
2130
2130
|
}
|
|
2131
2131
|
|
|
2132
2132
|
// src/patterns/PricingTable.tsx
|
|
2133
|
-
import { Button as Button9,
|
|
2134
|
-
import { jsx as
|
|
2133
|
+
import { Button as Button9, Circle as Circle9, SizableText as SizableText35, XStack as XStack28, YStack as YStack33 } from "tamagui";
|
|
2134
|
+
import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
2135
2135
|
function BillingToggle({ annual, onToggle }) {
|
|
2136
|
-
return /* @__PURE__ */
|
|
2136
|
+
return /* @__PURE__ */ jsx42(XStack28, { alignSelf: "center", backgroundColor: "$color3", borderRadius: "$10", padding: "$1", gap: "$0.5", children: ["Monthly", "Annual"].map((label, i) => {
|
|
2137
2137
|
const active = i === 1 ? annual : !annual;
|
|
2138
|
-
return /* @__PURE__ */
|
|
2138
|
+
return /* @__PURE__ */ jsx42(
|
|
2139
2139
|
XStack28,
|
|
2140
2140
|
{
|
|
2141
2141
|
paddingHorizontal: "$4",
|
|
@@ -2145,96 +2145,86 @@ function BillingToggle({ annual, onToggle }) {
|
|
|
2145
2145
|
onPress: () => onToggle(i === 1),
|
|
2146
2146
|
pressStyle: { opacity: 0.8 },
|
|
2147
2147
|
animation: "quick",
|
|
2148
|
-
children: /* @__PURE__ */
|
|
2148
|
+
children: /* @__PURE__ */ jsx42(SizableText35, { size: "$3", fontWeight: "600", color: active ? "$color1" : "$color10", children: label })
|
|
2149
2149
|
},
|
|
2150
2150
|
label
|
|
2151
2151
|
);
|
|
2152
2152
|
}) });
|
|
2153
2153
|
}
|
|
2154
|
-
function
|
|
2155
|
-
return /* @__PURE__ */
|
|
2156
|
-
|
|
2154
|
+
function PlanRow2({ plan, selected, onSelect }) {
|
|
2155
|
+
return /* @__PURE__ */ jsxs33(
|
|
2156
|
+
XStack28,
|
|
2157
2157
|
{
|
|
2158
|
-
flex: 1,
|
|
2159
|
-
minWidth: 260,
|
|
2160
2158
|
padding: "$4",
|
|
2161
|
-
borderRadius: "$
|
|
2162
|
-
gap: "$3",
|
|
2159
|
+
borderRadius: "$6",
|
|
2163
2160
|
borderWidth: 2,
|
|
2164
|
-
borderColor: selected ? "$color9" :
|
|
2165
|
-
backgroundColor:
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
animation: "quick",
|
|
2161
|
+
borderColor: selected ? "$color9" : "$color4",
|
|
2162
|
+
backgroundColor: selected ? "$color2" : "$color1",
|
|
2163
|
+
alignItems: "center",
|
|
2164
|
+
gap: "$3",
|
|
2169
2165
|
onPress: onSelect,
|
|
2166
|
+
pressStyle: { scale: 0.98, opacity: 0.9 },
|
|
2167
|
+
animation: "quick",
|
|
2168
|
+
cursor: "pointer",
|
|
2169
|
+
position: "relative",
|
|
2170
2170
|
children: [
|
|
2171
|
-
plan.popular && /* @__PURE__ */
|
|
2172
|
-
|
|
2171
|
+
plan.popular && /* @__PURE__ */ jsx42(XStack28, { position: "absolute", top: -10, right: 12, backgroundColor: "$color9", paddingHorizontal: "$2.5", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ jsx42(SizableText35, { size: "$1", fontWeight: "700", color: "$color1", children: "BEST VALUE" }) }),
|
|
2172
|
+
/* @__PURE__ */ jsx42(
|
|
2173
|
+
Circle9,
|
|
2173
2174
|
{
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
backgroundColor: "$color9",
|
|
2178
|
-
|
|
2179
|
-
paddingVertical: "$1",
|
|
2180
|
-
borderRadius: "$10",
|
|
2181
|
-
children: /* @__PURE__ */ jsx41(SizableText35, { size: "$1", fontWeight: "700", color: "$color1", children: "POPULAR" })
|
|
2175
|
+
size: 22,
|
|
2176
|
+
borderWidth: 2,
|
|
2177
|
+
borderColor: selected ? "$color9" : "$color6",
|
|
2178
|
+
backgroundColor: selected ? "$color9" : "transparent",
|
|
2179
|
+
children: selected && /* @__PURE__ */ jsx42(Circle9, { size: 8, backgroundColor: "$color1" })
|
|
2182
2180
|
}
|
|
2183
2181
|
),
|
|
2184
|
-
/* @__PURE__ */
|
|
2185
|
-
/* @__PURE__ */
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
"/",
|
|
2191
|
-
plan.period
|
|
2192
|
-
] })
|
|
2193
|
-
] })
|
|
2182
|
+
/* @__PURE__ */ jsxs33(YStack33, { flex: 1, gap: "$0.5", children: [
|
|
2183
|
+
/* @__PURE__ */ jsxs33(XStack28, { alignItems: "center", gap: "$2", children: [
|
|
2184
|
+
/* @__PURE__ */ jsx42(SizableText35, { size: "$5", fontWeight: "700", children: plan.name }),
|
|
2185
|
+
plan.trial && /* @__PURE__ */ jsx42(XStack28, { backgroundColor: "$green3", paddingHorizontal: "$2", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ jsx42(SizableText35, { size: "$1", fontWeight: "700", color: "$green9", children: plan.trial }) })
|
|
2186
|
+
] }),
|
|
2187
|
+
plan.description && /* @__PURE__ */ jsx42(SizableText35, { size: "$2", color: "$color10", children: plan.description })
|
|
2194
2188
|
] }),
|
|
2195
|
-
/* @__PURE__ */
|
|
2196
|
-
/* @__PURE__ */ jsx41(SizableText35, { size: "$3", color: f.included ? "$green9" : "$color6", children: f.included ? "\u2713" : "\u2717" }),
|
|
2197
|
-
/* @__PURE__ */ jsx41(SizableText35, { size: "$3", color: f.included ? "$color11" : "$color8", flex: 1, children: f.label })
|
|
2198
|
-
] }, i)) }),
|
|
2199
|
-
/* @__PURE__ */ jsx41(
|
|
2200
|
-
Button9,
|
|
2201
|
-
{
|
|
2202
|
-
size: "$4",
|
|
2203
|
-
borderRadius: "$10",
|
|
2204
|
-
fontWeight: "700",
|
|
2205
|
-
animation: "quick",
|
|
2206
|
-
backgroundColor: selected || plan.popular ? "$color9" : "transparent",
|
|
2207
|
-
color: selected || plan.popular ? "$color1" : "$color11",
|
|
2208
|
-
borderWidth: selected || plan.popular ? 0 : 1,
|
|
2209
|
-
borderColor: "$color7",
|
|
2210
|
-
onPress: onSelect,
|
|
2211
|
-
pressStyle: { scale: 0.97, opacity: 0.9 },
|
|
2212
|
-
children: plan.cta ?? "Get Started"
|
|
2213
|
-
}
|
|
2214
|
-
)
|
|
2189
|
+
/* @__PURE__ */ jsx42(SizableText35, { size: "$5", fontWeight: "800", children: plan.price })
|
|
2215
2190
|
]
|
|
2216
2191
|
}
|
|
2217
2192
|
);
|
|
2218
2193
|
}
|
|
2219
|
-
function
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2194
|
+
function FeatureList({ features }) {
|
|
2195
|
+
return /* @__PURE__ */ jsx42(YStack33, { gap: "$2.5", paddingHorizontal: "$1", children: features.map((f, i) => /* @__PURE__ */ jsxs33(XStack28, { gap: "$2.5", alignItems: "center", children: [
|
|
2196
|
+
/* @__PURE__ */ jsx42(Circle9, { size: 20, backgroundColor: f.included ? "$green3" : "$color3", children: /* @__PURE__ */ jsx42(SizableText35, { size: "$1", fontWeight: "700", color: f.included ? "$green9" : "$color8", children: f.included ? "\u2713" : "\u2014" }) }),
|
|
2197
|
+
/* @__PURE__ */ jsx42(SizableText35, { size: "$3", color: f.included ? "$color11" : "$color8", flex: 1, children: f.label })
|
|
2198
|
+
] }, i)) });
|
|
2199
|
+
}
|
|
2200
|
+
function PricingTable({ plans, selectedPlan, onSelectPlan, annual = false, onToggleBilling, onContinue, continueLabel, reassurance }) {
|
|
2201
|
+
const selected = selectedPlan ?? plans.find((p) => p.popular)?.id ?? plans[0]?.id;
|
|
2202
|
+
const activePlan = plans.find((p) => p.id === selected);
|
|
2203
|
+
return /* @__PURE__ */ jsxs33(YStack33, { gap: "$4", children: [
|
|
2204
|
+
onToggleBilling && /* @__PURE__ */ jsx42(BillingToggle, { annual, onToggle: onToggleBilling }),
|
|
2205
|
+
activePlan && activePlan.features.length > 0 && /* @__PURE__ */ jsx42(YStack33, { backgroundColor: "$color1", borderRadius: "$6", padding: "$4", gap: "$3", borderWidth: 1, borderColor: "$color4", children: /* @__PURE__ */ jsx42(FeatureList, { features: activePlan.features }) }),
|
|
2206
|
+
/* @__PURE__ */ jsx42(YStack33, { gap: "$3", children: plans.map((plan) => /* @__PURE__ */ jsx42(
|
|
2207
|
+
PlanRow2,
|
|
2225
2208
|
{
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2209
|
+
plan,
|
|
2210
|
+
selected: selected === plan.id,
|
|
2211
|
+
onSelect: () => onSelectPlan?.(plan.id)
|
|
2212
|
+
},
|
|
2213
|
+
plan.id
|
|
2214
|
+
)) }),
|
|
2215
|
+
reassurance && /* @__PURE__ */ jsx42(SizableText35, { size: "$2", color: "$color10", textAlign: "center", children: reassurance }),
|
|
2216
|
+
onContinue && /* @__PURE__ */ jsx42(
|
|
2217
|
+
Button9,
|
|
2218
|
+
{
|
|
2219
|
+
size: "$5",
|
|
2220
|
+
backgroundColor: "$color9",
|
|
2221
|
+
color: "$color1",
|
|
2222
|
+
borderRadius: "$10",
|
|
2223
|
+
fontWeight: "700",
|
|
2224
|
+
onPress: onContinue,
|
|
2225
|
+
pressStyle: { scale: 0.97, backgroundColor: "$color8" },
|
|
2226
|
+
animation: "quick",
|
|
2227
|
+
children: continueLabel ?? activePlan?.cta ?? "Get Started"
|
|
2238
2228
|
}
|
|
2239
2229
|
)
|
|
2240
2230
|
] });
|
|
@@ -2243,7 +2233,7 @@ function PricingTable({ plans, selectedPlan, onSelectPlan, annual = false, onTog
|
|
|
2243
2233
|
// src/patterns/CountdownBanner.tsx
|
|
2244
2234
|
import { useState as useState10, useEffect as useEffect4, useRef, useCallback as useCallback2 } from "react";
|
|
2245
2235
|
import { SizableText as SizableText36, XStack as XStack29, YStack as YStack34 } from "tamagui";
|
|
2246
|
-
import { jsx as
|
|
2236
|
+
import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
2247
2237
|
function useCountdown2(endTime, minutes, onExpire) {
|
|
2248
2238
|
const getRemaining = useCallback2(() => {
|
|
2249
2239
|
if (endTime) return Math.max(0, Math.floor((endTime.getTime() - Date.now()) / 1e3));
|
|
@@ -2277,74 +2267,74 @@ function useCountdown2(endTime, minutes, onExpire) {
|
|
|
2277
2267
|
return { display, expired: seconds <= 0 };
|
|
2278
2268
|
}
|
|
2279
2269
|
function TimeBox({ value }) {
|
|
2280
|
-
return /* @__PURE__ */
|
|
2270
|
+
return /* @__PURE__ */ jsx43(XStack29, { backgroundColor: "rgba(0,0,0,0.15)", paddingHorizontal: "$2", paddingVertical: "$1", borderRadius: "$3", children: /* @__PURE__ */ jsx43(SizableText36, { size: "$6", fontWeight: "800", color: "white", fontFamily: "$mono", children: value }) });
|
|
2281
2271
|
}
|
|
2282
2272
|
function CountdownBanner({ endTime, minutes, label = "Offer ends in", onExpire, variant = "banner" }) {
|
|
2283
2273
|
const { display, expired } = useCountdown2(endTime, minutes, onExpire);
|
|
2284
2274
|
if (expired) return null;
|
|
2285
2275
|
const parts = display.split(":");
|
|
2286
2276
|
if (variant === "badge") {
|
|
2287
|
-
return /* @__PURE__ */
|
|
2288
|
-
/* @__PURE__ */
|
|
2289
|
-
/* @__PURE__ */
|
|
2277
|
+
return /* @__PURE__ */ jsxs34(XStack29, { backgroundColor: "$red9", paddingHorizontal: "$2.5", paddingVertical: "$1", borderRadius: "$10", gap: "$1.5", alignItems: "center", children: [
|
|
2278
|
+
/* @__PURE__ */ jsx43(SizableText36, { size: "$1", fontWeight: "600", color: "white", children: label }),
|
|
2279
|
+
/* @__PURE__ */ jsx43(SizableText36, { size: "$2", fontWeight: "800", color: "white", fontFamily: "$mono", children: display })
|
|
2290
2280
|
] });
|
|
2291
2281
|
}
|
|
2292
2282
|
if (variant === "compact") {
|
|
2293
|
-
return /* @__PURE__ */
|
|
2294
|
-
/* @__PURE__ */
|
|
2295
|
-
/* @__PURE__ */
|
|
2283
|
+
return /* @__PURE__ */ jsxs34(XStack29, { backgroundColor: "$red3", paddingHorizontal: "$3", paddingVertical: "$2", borderRadius: "$4", gap: "$2", alignItems: "center", alignSelf: "center", children: [
|
|
2284
|
+
/* @__PURE__ */ jsx43(SizableText36, { size: "$3", fontWeight: "600", color: "$red9", children: label }),
|
|
2285
|
+
/* @__PURE__ */ jsx43(SizableText36, { size: "$5", fontWeight: "800", color: "$red9", fontFamily: "$mono", children: display })
|
|
2296
2286
|
] });
|
|
2297
2287
|
}
|
|
2298
|
-
return /* @__PURE__ */
|
|
2299
|
-
/* @__PURE__ */
|
|
2300
|
-
/* @__PURE__ */
|
|
2301
|
-
i > 0 && /* @__PURE__ */
|
|
2302
|
-
/* @__PURE__ */
|
|
2288
|
+
return /* @__PURE__ */ jsxs34(YStack34, { backgroundColor: "$red9", paddingVertical: "$3", paddingHorizontal: "$4", gap: "$1.5", alignItems: "center", children: [
|
|
2289
|
+
/* @__PURE__ */ jsx43(SizableText36, { size: "$3", fontWeight: "600", color: "white", opacity: 0.9, children: label }),
|
|
2290
|
+
/* @__PURE__ */ jsx43(XStack29, { gap: "$1.5", alignItems: "center", children: parts.map((p, i) => /* @__PURE__ */ jsxs34(XStack29, { gap: "$1.5", alignItems: "center", children: [
|
|
2291
|
+
i > 0 && /* @__PURE__ */ jsx43(SizableText36, { size: "$6", fontWeight: "800", color: "white", children: ":" }),
|
|
2292
|
+
/* @__PURE__ */ jsx43(TimeBox, { value: p })
|
|
2303
2293
|
] }, i)) })
|
|
2304
2294
|
] });
|
|
2305
2295
|
}
|
|
2306
2296
|
|
|
2307
2297
|
// src/patterns/TestimonialCard.tsx
|
|
2308
2298
|
import { Image as Image7, SizableText as SizableText37, XStack as XStack30, YStack as YStack35 } from "tamagui";
|
|
2309
|
-
import { jsx as
|
|
2299
|
+
import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
2310
2300
|
function Stars2({ count = 0 }) {
|
|
2311
2301
|
if (!count) return null;
|
|
2312
|
-
return /* @__PURE__ */
|
|
2302
|
+
return /* @__PURE__ */ jsx44(XStack30, { gap: "$0.5", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx44(SizableText37, { size: "$3", color: i < Math.round(count) ? "$yellow9" : "$color5", children: "\u2605" }, i)) });
|
|
2313
2303
|
}
|
|
2314
2304
|
function AuthorRow({ author, role, avatar }) {
|
|
2315
|
-
return /* @__PURE__ */
|
|
2316
|
-
avatar && /* @__PURE__ */
|
|
2317
|
-
/* @__PURE__ */
|
|
2318
|
-
/* @__PURE__ */
|
|
2319
|
-
role && /* @__PURE__ */
|
|
2305
|
+
return /* @__PURE__ */ jsxs35(XStack30, { gap: "$2.5", alignItems: "center", children: [
|
|
2306
|
+
avatar && /* @__PURE__ */ jsx44(Image7, { source: { uri: avatar }, width: 36, height: 36, borderRadius: 18, objectFit: "cover" }),
|
|
2307
|
+
/* @__PURE__ */ jsxs35(YStack35, { children: [
|
|
2308
|
+
/* @__PURE__ */ jsx44(SizableText37, { size: "$3", fontWeight: "600", children: author }),
|
|
2309
|
+
role && /* @__PURE__ */ jsx44(SizableText37, { size: "$2", color: "$color9", children: role })
|
|
2320
2310
|
] })
|
|
2321
2311
|
] });
|
|
2322
2312
|
}
|
|
2323
2313
|
function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card" }) {
|
|
2324
2314
|
if (variant === "minimal") {
|
|
2325
|
-
return /* @__PURE__ */
|
|
2326
|
-
/* @__PURE__ */
|
|
2327
|
-
/* @__PURE__ */
|
|
2315
|
+
return /* @__PURE__ */ jsxs35(YStack35, { gap: "$3", paddingVertical: "$2", children: [
|
|
2316
|
+
/* @__PURE__ */ jsx44(Stars2, { count: rating }),
|
|
2317
|
+
/* @__PURE__ */ jsxs35(SizableText37, { size: "$4", color: "$color11", fontStyle: "italic", lineHeight: 24, children: [
|
|
2328
2318
|
'"',
|
|
2329
2319
|
quote,
|
|
2330
2320
|
'"'
|
|
2331
2321
|
] }),
|
|
2332
|
-
/* @__PURE__ */
|
|
2322
|
+
/* @__PURE__ */ jsx44(AuthorRow, { author, role, avatar })
|
|
2333
2323
|
] });
|
|
2334
2324
|
}
|
|
2335
2325
|
if (variant === "featured") {
|
|
2336
|
-
return /* @__PURE__ */
|
|
2337
|
-
/* @__PURE__ */
|
|
2338
|
-
/* @__PURE__ */
|
|
2339
|
-
/* @__PURE__ */
|
|
2326
|
+
return /* @__PURE__ */ jsxs35(YStack35, { backgroundColor: "$color3", padding: "$5", borderRadius: "$6", gap: "$4", alignItems: "center", children: [
|
|
2327
|
+
/* @__PURE__ */ jsx44(SizableText37, { size: "$8", color: "$color9", opacity: 0.3, fontWeight: "800", children: '"' }),
|
|
2328
|
+
/* @__PURE__ */ jsx44(Stars2, { count: rating }),
|
|
2329
|
+
/* @__PURE__ */ jsxs35(SizableText37, { size: "$5", color: "$color12", fontStyle: "italic", textAlign: "center", lineHeight: 28, children: [
|
|
2340
2330
|
'"',
|
|
2341
2331
|
quote,
|
|
2342
2332
|
'"'
|
|
2343
2333
|
] }),
|
|
2344
|
-
/* @__PURE__ */
|
|
2334
|
+
/* @__PURE__ */ jsx44(AuthorRow, { author, role, avatar })
|
|
2345
2335
|
] });
|
|
2346
2336
|
}
|
|
2347
|
-
return /* @__PURE__ */
|
|
2337
|
+
return /* @__PURE__ */ jsxs35(
|
|
2348
2338
|
YStack35,
|
|
2349
2339
|
{
|
|
2350
2340
|
backgroundColor: "$color1",
|
|
@@ -2354,13 +2344,13 @@ function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card
|
|
|
2354
2344
|
borderColor: "$color4",
|
|
2355
2345
|
gap: "$3",
|
|
2356
2346
|
children: [
|
|
2357
|
-
/* @__PURE__ */
|
|
2358
|
-
/* @__PURE__ */
|
|
2347
|
+
/* @__PURE__ */ jsx44(Stars2, { count: rating }),
|
|
2348
|
+
/* @__PURE__ */ jsxs35(SizableText37, { size: "$4", color: "$color11", fontStyle: "italic", lineHeight: 24, children: [
|
|
2359
2349
|
'"',
|
|
2360
2350
|
quote,
|
|
2361
2351
|
'"'
|
|
2362
2352
|
] }),
|
|
2363
|
-
/* @__PURE__ */
|
|
2353
|
+
/* @__PURE__ */ jsx44(AuthorRow, { author, role, avatar })
|
|
2364
2354
|
]
|
|
2365
2355
|
}
|
|
2366
2356
|
);
|
|
@@ -2368,7 +2358,7 @@ function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card
|
|
|
2368
2358
|
|
|
2369
2359
|
// src/patterns/ConfirmDialog.tsx
|
|
2370
2360
|
import { AlertDialog as AlertDialog2, Button as Button10, SizableText as SizableText38, XStack as XStack31, YStack as YStack36 } from "tamagui";
|
|
2371
|
-
import { jsx as
|
|
2361
|
+
import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
2372
2362
|
function ConfirmDialog({
|
|
2373
2363
|
open,
|
|
2374
2364
|
onOpenChange,
|
|
@@ -2389,8 +2379,8 @@ function ConfirmDialog({
|
|
|
2389
2379
|
onConfirm?.();
|
|
2390
2380
|
onOpenChange(false);
|
|
2391
2381
|
};
|
|
2392
|
-
return /* @__PURE__ */
|
|
2393
|
-
/* @__PURE__ */
|
|
2382
|
+
return /* @__PURE__ */ jsx45(AlertDialog2, { open, onOpenChange, children: /* @__PURE__ */ jsxs36(AlertDialog2.Portal, { children: [
|
|
2383
|
+
/* @__PURE__ */ jsx45(
|
|
2394
2384
|
AlertDialog2.Overlay,
|
|
2395
2385
|
{
|
|
2396
2386
|
opacity: 0.5,
|
|
@@ -2400,7 +2390,7 @@ function ConfirmDialog({
|
|
|
2400
2390
|
},
|
|
2401
2391
|
"overlay"
|
|
2402
2392
|
),
|
|
2403
|
-
/* @__PURE__ */
|
|
2393
|
+
/* @__PURE__ */ jsx45(
|
|
2404
2394
|
AlertDialog2.Content,
|
|
2405
2395
|
{
|
|
2406
2396
|
bordered: true,
|
|
@@ -2414,11 +2404,11 @@ function ConfirmDialog({
|
|
|
2414
2404
|
scale: 1,
|
|
2415
2405
|
opacity: 1,
|
|
2416
2406
|
animation: "quick",
|
|
2417
|
-
children: /* @__PURE__ */
|
|
2418
|
-
icon && /* @__PURE__ */
|
|
2419
|
-
/* @__PURE__ */
|
|
2420
|
-
/* @__PURE__ */
|
|
2421
|
-
description && /* @__PURE__ */
|
|
2407
|
+
children: /* @__PURE__ */ jsxs36(YStack36, { gap: "$4", padding: "$4", children: [
|
|
2408
|
+
icon && /* @__PURE__ */ jsx45(YStack36, { alignItems: "center", children: icon }),
|
|
2409
|
+
/* @__PURE__ */ jsxs36(YStack36, { gap: "$2", alignItems: icon ? "center" : "flex-start", children: [
|
|
2410
|
+
/* @__PURE__ */ jsx45(AlertDialog2.Title, { size: "$6", fontWeight: "700", children: title }),
|
|
2411
|
+
description && /* @__PURE__ */ jsx45(
|
|
2422
2412
|
AlertDialog2.Description,
|
|
2423
2413
|
{
|
|
2424
2414
|
size: "$3",
|
|
@@ -2428,8 +2418,8 @@ function ConfirmDialog({
|
|
|
2428
2418
|
}
|
|
2429
2419
|
)
|
|
2430
2420
|
] }),
|
|
2431
|
-
/* @__PURE__ */
|
|
2432
|
-
/* @__PURE__ */
|
|
2421
|
+
/* @__PURE__ */ jsxs36(XStack31, { gap: "$3", justifyContent: "flex-end", children: [
|
|
2422
|
+
/* @__PURE__ */ jsx45(
|
|
2433
2423
|
Button10,
|
|
2434
2424
|
{
|
|
2435
2425
|
flex: 1,
|
|
@@ -2440,10 +2430,10 @@ function ConfirmDialog({
|
|
|
2440
2430
|
onPress: handleCancel,
|
|
2441
2431
|
pressStyle: { opacity: 0.7 },
|
|
2442
2432
|
animation: "quick",
|
|
2443
|
-
children: /* @__PURE__ */
|
|
2433
|
+
children: /* @__PURE__ */ jsx45(SizableText38, { fontWeight: "600", children: cancelLabel })
|
|
2444
2434
|
}
|
|
2445
2435
|
),
|
|
2446
|
-
/* @__PURE__ */
|
|
2436
|
+
/* @__PURE__ */ jsx45(
|
|
2447
2437
|
Button10,
|
|
2448
2438
|
{
|
|
2449
2439
|
flex: 1,
|
|
@@ -2453,7 +2443,7 @@ function ConfirmDialog({
|
|
|
2453
2443
|
onPress: handleConfirm,
|
|
2454
2444
|
pressStyle: { backgroundColor: destructive ? "$red8" : "$color8", scale: 0.97 },
|
|
2455
2445
|
animation: "quick",
|
|
2456
|
-
children: /* @__PURE__ */
|
|
2446
|
+
children: /* @__PURE__ */ jsx45(SizableText38, { fontWeight: "600", color: "white", children: confirmLabel })
|
|
2457
2447
|
}
|
|
2458
2448
|
)
|
|
2459
2449
|
] })
|
|
@@ -2467,7 +2457,7 @@ function ConfirmDialog({
|
|
|
2467
2457
|
// src/patterns/Chip.tsx
|
|
2468
2458
|
import { useCallback as useCallback3 } from "react";
|
|
2469
2459
|
import { SizableText as SizableText39, XStack as XStack32 } from "tamagui";
|
|
2470
|
-
import { jsx as
|
|
2460
|
+
import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
2471
2461
|
var sizes2 = { sm: { h: 28, px: "$2", text: "$2" }, md: { h: 34, px: "$3", text: "$3" }, lg: { h: 42, px: "$4", text: "$4" } };
|
|
2472
2462
|
function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "md", icon, color }) {
|
|
2473
2463
|
const s = sizes2[size];
|
|
@@ -2476,7 +2466,7 @@ function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "
|
|
|
2476
2466
|
const bg = active ? color ?? "$color9" : filled ? "$color3" : "transparent";
|
|
2477
2467
|
const border = active ? color ?? "$color9" : "$color6";
|
|
2478
2468
|
const fg = active ? "$color1" : "$color11";
|
|
2479
|
-
return /* @__PURE__ */
|
|
2469
|
+
return /* @__PURE__ */ jsxs37(
|
|
2480
2470
|
XStack32,
|
|
2481
2471
|
{
|
|
2482
2472
|
height: s.h,
|
|
@@ -2492,10 +2482,10 @@ function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "
|
|
|
2492
2482
|
onPress,
|
|
2493
2483
|
cursor: "pointer",
|
|
2494
2484
|
children: [
|
|
2495
|
-
active && /* @__PURE__ */
|
|
2496
|
-
icon && /* @__PURE__ */
|
|
2497
|
-
/* @__PURE__ */
|
|
2498
|
-
onRemove && /* @__PURE__ */
|
|
2485
|
+
active && /* @__PURE__ */ jsx46(SizableText39, { size: s.text, color: fg, children: "\u2713" }),
|
|
2486
|
+
icon && /* @__PURE__ */ jsx46(SizableText39, { color: fg, children: icon }),
|
|
2487
|
+
/* @__PURE__ */ jsx46(SizableText39, { size: s.text, color: fg, fontWeight: "500", children: label }),
|
|
2488
|
+
onRemove && /* @__PURE__ */ jsx46(
|
|
2499
2489
|
SizableText39,
|
|
2500
2490
|
{
|
|
2501
2491
|
size: "$2",
|
|
@@ -2524,7 +2514,7 @@ function ChipGroup({ chips, selected = [], onSelectionChange, multiSelect = true
|
|
|
2524
2514
|
onSelectionChange(isSelected ? [] : [id]);
|
|
2525
2515
|
}
|
|
2526
2516
|
}, [selected, onSelectionChange, multiSelect]);
|
|
2527
|
-
return /* @__PURE__ */
|
|
2517
|
+
return /* @__PURE__ */ jsx46(XStack32, { flexWrap: "wrap", gap: "$2", children: chips.map((chip) => /* @__PURE__ */ jsx46(
|
|
2528
2518
|
Chip,
|
|
2529
2519
|
{
|
|
2530
2520
|
label: chip.label,
|
|
@@ -2542,7 +2532,7 @@ function ChipGroup({ chips, selected = [], onSelectionChange, multiSelect = true
|
|
|
2542
2532
|
import { useCallback as useCallback4, useRef as useRef2, useState as useState11 } from "react";
|
|
2543
2533
|
import { Platform } from "react-native";
|
|
2544
2534
|
import { Input as Input3, SizableText as SizableText40, XStack as XStack33, YStack as YStack37 } from "tamagui";
|
|
2545
|
-
import { jsx as
|
|
2535
|
+
import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
2546
2536
|
function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFocus, secureEntry }) {
|
|
2547
2537
|
const inputRef = useRef2(null);
|
|
2548
2538
|
const [focused, setFocused] = useState11(false);
|
|
@@ -2555,11 +2545,11 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2555
2545
|
const focusInput = useCallback4(() => {
|
|
2556
2546
|
inputRef.current?.focus();
|
|
2557
2547
|
}, []);
|
|
2558
|
-
return /* @__PURE__ */
|
|
2559
|
-
/* @__PURE__ */
|
|
2548
|
+
return /* @__PURE__ */ jsxs38(YStack37, { position: "relative", children: [
|
|
2549
|
+
/* @__PURE__ */ jsx47(XStack33, { gap: "$2", justifyContent: "center", children: Array.from({ length }, (_, i) => {
|
|
2560
2550
|
const char = digits[i]?.trim();
|
|
2561
2551
|
const isCursor = focused && value.length === i;
|
|
2562
|
-
return /* @__PURE__ */
|
|
2552
|
+
return /* @__PURE__ */ jsxs38(
|
|
2563
2553
|
YStack37,
|
|
2564
2554
|
{
|
|
2565
2555
|
width: 48,
|
|
@@ -2573,8 +2563,8 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2573
2563
|
animation: "quick",
|
|
2574
2564
|
pointerEvents: "none",
|
|
2575
2565
|
children: [
|
|
2576
|
-
/* @__PURE__ */
|
|
2577
|
-
isCursor && /* @__PURE__ */
|
|
2566
|
+
/* @__PURE__ */ jsx47(SizableText40, { size: "$7", fontWeight: "600", color: "$color12", children: char ? secureEntry ? "\u25CF" : char : "" }),
|
|
2567
|
+
isCursor && /* @__PURE__ */ jsx47(
|
|
2578
2568
|
YStack37,
|
|
2579
2569
|
{
|
|
2580
2570
|
position: "absolute",
|
|
@@ -2590,7 +2580,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2590
2580
|
i
|
|
2591
2581
|
);
|
|
2592
2582
|
}) }),
|
|
2593
|
-
Platform.OS === "web" ? /* @__PURE__ */
|
|
2583
|
+
Platform.OS === "web" ? /* @__PURE__ */ jsx47(
|
|
2594
2584
|
"input",
|
|
2595
2585
|
{
|
|
2596
2586
|
ref: inputRef,
|
|
@@ -2618,7 +2608,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2618
2608
|
cursor: "pointer"
|
|
2619
2609
|
}
|
|
2620
2610
|
}
|
|
2621
|
-
) : /* @__PURE__ */
|
|
2611
|
+
) : /* @__PURE__ */ jsx47(
|
|
2622
2612
|
Input3,
|
|
2623
2613
|
{
|
|
2624
2614
|
ref: inputRef,
|
|
@@ -2644,7 +2634,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2644
2634
|
// src/patterns/PasswordInput.tsx
|
|
2645
2635
|
import { useState as useState12, useCallback as useCallback5 } from "react";
|
|
2646
2636
|
import { Input as Input4, SizableText as SizableText41, XStack as XStack34, YStack as YStack38 } from "tamagui";
|
|
2647
|
-
import { jsx as
|
|
2637
|
+
import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
2648
2638
|
function getStrength(pw) {
|
|
2649
2639
|
if (!pw) return { label: "", color: "$color6", width: "0%" };
|
|
2650
2640
|
const score = [pw.length >= 8, /[A-Z]/.test(pw), /[0-9]/.test(pw), /[^A-Za-z0-9]/.test(pw)].filter(Boolean).length;
|
|
@@ -2656,9 +2646,9 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2656
2646
|
const [visible, setVisible] = useState12(false);
|
|
2657
2647
|
const toggle = useCallback5(() => setVisible((v) => !v), []);
|
|
2658
2648
|
const strength = getStrength(value);
|
|
2659
|
-
return /* @__PURE__ */
|
|
2660
|
-
label && /* @__PURE__ */
|
|
2661
|
-
/* @__PURE__ */
|
|
2649
|
+
return /* @__PURE__ */ jsxs39(YStack38, { gap: "$1.5", children: [
|
|
2650
|
+
label && /* @__PURE__ */ jsx48(SizableText41, { size: "$3", color: "$color11", fontWeight: "500", children: label }),
|
|
2651
|
+
/* @__PURE__ */ jsxs39(
|
|
2662
2652
|
XStack34,
|
|
2663
2653
|
{
|
|
2664
2654
|
borderWidth: 1,
|
|
@@ -2669,7 +2659,7 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2669
2659
|
paddingRight: "$2",
|
|
2670
2660
|
focusStyle: { borderColor: "$color9" },
|
|
2671
2661
|
children: [
|
|
2672
|
-
/* @__PURE__ */
|
|
2662
|
+
/* @__PURE__ */ jsx48(
|
|
2673
2663
|
Input4,
|
|
2674
2664
|
{
|
|
2675
2665
|
flex: 1,
|
|
@@ -2683,7 +2673,7 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2683
2673
|
borderWidth: 0
|
|
2684
2674
|
}
|
|
2685
2675
|
),
|
|
2686
|
-
/* @__PURE__ */
|
|
2676
|
+
/* @__PURE__ */ jsx48(
|
|
2687
2677
|
SizableText41,
|
|
2688
2678
|
{
|
|
2689
2679
|
size: "$4",
|
|
@@ -2698,24 +2688,24 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2698
2688
|
]
|
|
2699
2689
|
}
|
|
2700
2690
|
),
|
|
2701
|
-
strengthIndicator && value.length > 0 && /* @__PURE__ */
|
|
2702
|
-
/* @__PURE__ */
|
|
2703
|
-
/* @__PURE__ */
|
|
2691
|
+
strengthIndicator && value.length > 0 && /* @__PURE__ */ jsxs39(YStack38, { gap: "$1", children: [
|
|
2692
|
+
/* @__PURE__ */ jsx48(YStack38, { height: 3, backgroundColor: "$color4", borderRadius: 2, overflow: "hidden", children: /* @__PURE__ */ jsx48(YStack38, { height: 3, width: strength.width, backgroundColor: strength.color, borderRadius: 2, animation: "quick" }) }),
|
|
2693
|
+
/* @__PURE__ */ jsx48(SizableText41, { size: "$1", color: strength.color, children: strength.label })
|
|
2704
2694
|
] }),
|
|
2705
|
-
error && /* @__PURE__ */
|
|
2695
|
+
error && /* @__PURE__ */ jsx48(SizableText41, { size: "$2", color: "$red9", children: error })
|
|
2706
2696
|
] });
|
|
2707
2697
|
}
|
|
2708
2698
|
|
|
2709
2699
|
// src/patterns/AvatarGroup.tsx
|
|
2710
|
-
import { Circle as
|
|
2711
|
-
import { jsx as
|
|
2700
|
+
import { Circle as Circle10, Image as Image8, SizableText as SizableText42, XStack as XStack35 } from "tamagui";
|
|
2701
|
+
import { jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
2712
2702
|
function getInitials(name) {
|
|
2713
2703
|
if (!name) return "?";
|
|
2714
2704
|
return name.split(" ").map((p) => p[0]).join("").toUpperCase().slice(0, 2);
|
|
2715
2705
|
}
|
|
2716
2706
|
function AvatarItem({ uri, name, color, size }) {
|
|
2717
|
-
return /* @__PURE__ */
|
|
2718
|
-
|
|
2707
|
+
return /* @__PURE__ */ jsx49(
|
|
2708
|
+
Circle10,
|
|
2719
2709
|
{
|
|
2720
2710
|
size,
|
|
2721
2711
|
backgroundColor: color ?? "$color4",
|
|
@@ -2724,17 +2714,17 @@ function AvatarItem({ uri, name, color, size }) {
|
|
|
2724
2714
|
overflow: "hidden",
|
|
2725
2715
|
alignItems: "center",
|
|
2726
2716
|
justifyContent: "center",
|
|
2727
|
-
children: uri ? /* @__PURE__ */
|
|
2717
|
+
children: uri ? /* @__PURE__ */ jsx49(Image8, { source: { uri }, width: size, height: size, objectFit: "cover" }) : /* @__PURE__ */ jsx49(SizableText42, { size: "$2", fontWeight: "600", color: color ? "$color1" : "$color11", children: getInitials(name) })
|
|
2728
2718
|
}
|
|
2729
2719
|
);
|
|
2730
2720
|
}
|
|
2731
2721
|
function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
2732
2722
|
const visible = avatars.slice(0, max);
|
|
2733
2723
|
const remaining = avatars.length - max;
|
|
2734
|
-
return /* @__PURE__ */
|
|
2735
|
-
visible.map((avatar, i) => /* @__PURE__ */
|
|
2736
|
-
remaining > 0 && /* @__PURE__ */
|
|
2737
|
-
|
|
2724
|
+
return /* @__PURE__ */ jsxs40(XStack35, { alignItems: "center", children: [
|
|
2725
|
+
visible.map((avatar, i) => /* @__PURE__ */ jsx49(XStack35, { marginLeft: i === 0 ? 0 : -overlap, zIndex: visible.length - i, children: /* @__PURE__ */ jsx49(AvatarItem, { ...avatar, size }) }, i)),
|
|
2726
|
+
remaining > 0 && /* @__PURE__ */ jsx49(XStack35, { marginLeft: -overlap, zIndex: 0, children: /* @__PURE__ */ jsx49(
|
|
2727
|
+
Circle10,
|
|
2738
2728
|
{
|
|
2739
2729
|
size,
|
|
2740
2730
|
backgroundColor: "$color6",
|
|
@@ -2742,7 +2732,7 @@ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
|
2742
2732
|
borderColor: "$background",
|
|
2743
2733
|
alignItems: "center",
|
|
2744
2734
|
justifyContent: "center",
|
|
2745
|
-
children: /* @__PURE__ */
|
|
2735
|
+
children: /* @__PURE__ */ jsxs40(SizableText42, { size: "$2", fontWeight: "600", color: "$color11", children: [
|
|
2746
2736
|
"+",
|
|
2747
2737
|
remaining
|
|
2748
2738
|
] })
|
|
@@ -2753,8 +2743,8 @@ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
|
2753
2743
|
|
|
2754
2744
|
// src/patterns/SwipeCards.tsx
|
|
2755
2745
|
import { useState as useState13, useCallback as useCallback6 } from "react";
|
|
2756
|
-
import { Circle as
|
|
2757
|
-
import { jsx as
|
|
2746
|
+
import { Circle as Circle11, SizableText as SizableText43, XStack as XStack36, YStack as YStack39 } from "tamagui";
|
|
2747
|
+
import { jsx as jsx50, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
2758
2748
|
var STACK_SIZE = 3;
|
|
2759
2749
|
var CARD_OFFSETS = [
|
|
2760
2750
|
{ scale: 1, y: 0, opacity: 1 },
|
|
@@ -2791,16 +2781,16 @@ function SwipeCards({
|
|
|
2791
2781
|
return () => clearTimeout(timer);
|
|
2792
2782
|
}, [isEmpty, index, items, onEmpty, onSwipeLeft, onSwipeRight]);
|
|
2793
2783
|
if (isEmpty) {
|
|
2794
|
-
return /* @__PURE__ */
|
|
2784
|
+
return /* @__PURE__ */ jsx50(YStack39, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$3", padding: "$4", children: /* @__PURE__ */ jsx50(SizableText43, { size: "$5", color: "$color8", children: emptyMessage }) });
|
|
2795
2785
|
}
|
|
2796
|
-
return /* @__PURE__ */
|
|
2797
|
-
/* @__PURE__ */
|
|
2786
|
+
return /* @__PURE__ */ jsxs41(YStack39, { flex: 1, gap: "$4", children: [
|
|
2787
|
+
/* @__PURE__ */ jsx50(YStack39, { flex: 1, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx50(YStack39, { width: "100%", maxWidth: 340, aspectRatio: 3 / 4, position: "relative", children: remaining.slice(0, STACK_SIZE).reverse().map((item, reverseIdx) => {
|
|
2798
2788
|
const stackIdx = Math.min(remaining.length, STACK_SIZE) - 1 - reverseIdx;
|
|
2799
2789
|
const isTop = stackIdx === 0;
|
|
2800
2790
|
const offset = CARD_OFFSETS[stackIdx] ?? CARD_OFFSETS[2];
|
|
2801
2791
|
const exitX = exitDir === "left" ? -400 : exitDir === "right" ? 400 : 0;
|
|
2802
2792
|
const exitRotate = exitDir === "left" ? "-15deg" : exitDir === "right" ? "15deg" : "0deg";
|
|
2803
|
-
return /* @__PURE__ */
|
|
2793
|
+
return /* @__PURE__ */ jsxs41(
|
|
2804
2794
|
YStack39,
|
|
2805
2795
|
{
|
|
2806
2796
|
position: "absolute",
|
|
@@ -2812,7 +2802,7 @@ function SwipeCards({
|
|
|
2812
2802
|
borderRadius: "$5",
|
|
2813
2803
|
overflow: "hidden",
|
|
2814
2804
|
backgroundColor: "$background",
|
|
2815
|
-
|
|
2805
|
+
elevation: isTop ? 4 : 1,
|
|
2816
2806
|
shadowColor: "$shadowColor",
|
|
2817
2807
|
shadowRadius: isTop ? 16 : 4,
|
|
2818
2808
|
scale: isTop && exitDir ? 1 : offset.scale,
|
|
@@ -2822,7 +2812,7 @@ function SwipeCards({
|
|
|
2822
2812
|
rotate: isTop ? exitRotate : "0deg",
|
|
2823
2813
|
children: [
|
|
2824
2814
|
renderCard(item),
|
|
2825
|
-
isTop && exitDir === "left" && /* @__PURE__ */
|
|
2815
|
+
isTop && exitDir === "left" && /* @__PURE__ */ jsx50(
|
|
2826
2816
|
YStack39,
|
|
2827
2817
|
{
|
|
2828
2818
|
position: "absolute",
|
|
@@ -2833,10 +2823,10 @@ function SwipeCards({
|
|
|
2833
2823
|
borderRadius: "$3",
|
|
2834
2824
|
padding: "$2",
|
|
2835
2825
|
rotate: "15deg",
|
|
2836
|
-
children: /* @__PURE__ */
|
|
2826
|
+
children: /* @__PURE__ */ jsx50(SizableText43, { size: "$7", fontWeight: "800", color: "$red10", children: leftLabel.toUpperCase() })
|
|
2837
2827
|
}
|
|
2838
2828
|
),
|
|
2839
|
-
isTop && exitDir === "right" && /* @__PURE__ */
|
|
2829
|
+
isTop && exitDir === "right" && /* @__PURE__ */ jsx50(
|
|
2840
2830
|
YStack39,
|
|
2841
2831
|
{
|
|
2842
2832
|
position: "absolute",
|
|
@@ -2847,7 +2837,7 @@ function SwipeCards({
|
|
|
2847
2837
|
borderRadius: "$3",
|
|
2848
2838
|
padding: "$2",
|
|
2849
2839
|
rotate: "-15deg",
|
|
2850
|
-
children: /* @__PURE__ */
|
|
2840
|
+
children: /* @__PURE__ */ jsx50(SizableText43, { size: "$7", fontWeight: "800", color: "$green10", children: rightLabel.toUpperCase() })
|
|
2851
2841
|
}
|
|
2852
2842
|
)
|
|
2853
2843
|
]
|
|
@@ -2855,9 +2845,9 @@ function SwipeCards({
|
|
|
2855
2845
|
item.id
|
|
2856
2846
|
);
|
|
2857
2847
|
}) }) }),
|
|
2858
|
-
/* @__PURE__ */
|
|
2859
|
-
/* @__PURE__ */
|
|
2860
|
-
|
|
2848
|
+
/* @__PURE__ */ jsxs41(XStack36, { justifyContent: "center", gap: "$6", paddingBottom: "$4", children: [
|
|
2849
|
+
/* @__PURE__ */ jsx50(
|
|
2850
|
+
Circle11,
|
|
2861
2851
|
{
|
|
2862
2852
|
size: 60,
|
|
2863
2853
|
backgroundColor: "$red3",
|
|
@@ -2868,11 +2858,11 @@ function SwipeCards({
|
|
|
2868
2858
|
onPress: () => handleSwipe("left"),
|
|
2869
2859
|
alignItems: "center",
|
|
2870
2860
|
justifyContent: "center",
|
|
2871
|
-
children: /* @__PURE__ */
|
|
2861
|
+
children: /* @__PURE__ */ jsx50(SizableText43, { size: "$6", color: "$red10", fontWeight: "700", children: "\u2715" })
|
|
2872
2862
|
}
|
|
2873
2863
|
),
|
|
2874
|
-
/* @__PURE__ */
|
|
2875
|
-
|
|
2864
|
+
/* @__PURE__ */ jsx50(
|
|
2865
|
+
Circle11,
|
|
2876
2866
|
{
|
|
2877
2867
|
size: 60,
|
|
2878
2868
|
backgroundColor: "$green3",
|
|
@@ -2883,7 +2873,7 @@ function SwipeCards({
|
|
|
2883
2873
|
onPress: () => handleSwipe("right"),
|
|
2884
2874
|
alignItems: "center",
|
|
2885
2875
|
justifyContent: "center",
|
|
2886
|
-
children: /* @__PURE__ */
|
|
2876
|
+
children: /* @__PURE__ */ jsx50(SizableText43, { size: "$6", color: "$green10", fontWeight: "700", children: "\u2665" })
|
|
2887
2877
|
}
|
|
2888
2878
|
)
|
|
2889
2879
|
] })
|
|
@@ -2892,7 +2882,7 @@ function SwipeCards({
|
|
|
2892
2882
|
|
|
2893
2883
|
// src/patterns/GlassCard.tsx
|
|
2894
2884
|
import { styled as styled12, YStack as YStack40 } from "tamagui";
|
|
2895
|
-
import { jsx as
|
|
2885
|
+
import { jsx as jsx51 } from "react/jsx-runtime";
|
|
2896
2886
|
var BLUR = { light: 8, medium: 16, heavy: 24 };
|
|
2897
2887
|
var TINT_BG = {
|
|
2898
2888
|
light: "rgba(255,255,255,0.15)",
|
|
@@ -2912,13 +2902,13 @@ function GlassCard({
|
|
|
2912
2902
|
elevated = false
|
|
2913
2903
|
}) {
|
|
2914
2904
|
const blur = BLUR[intensity];
|
|
2915
|
-
return /* @__PURE__ */
|
|
2905
|
+
return /* @__PURE__ */ jsx51(
|
|
2916
2906
|
GlassFrame,
|
|
2917
2907
|
{
|
|
2918
2908
|
borderRadius,
|
|
2919
2909
|
padding,
|
|
2920
2910
|
backgroundColor: TINT_BG[tint],
|
|
2921
|
-
|
|
2911
|
+
elevation: elevated ? 4 : 0,
|
|
2922
2912
|
shadowColor: elevated ? "$shadowColor" : void 0,
|
|
2923
2913
|
shadowRadius: elevated ? 20 : void 0,
|
|
2924
2914
|
shadowOpacity: elevated ? 0.3 : void 0,
|
|
@@ -2931,13 +2921,13 @@ function GlassCard({
|
|
|
2931
2921
|
// src/patterns/DataTable.tsx
|
|
2932
2922
|
import { useMemo, useState as useState14 } from "react";
|
|
2933
2923
|
import { SizableText as SizableText44, Separator as Separator5, XStack as XStack37, YStack as YStack41, useMedia, styled as styled13, View as View6 } from "tamagui";
|
|
2934
|
-
import { jsx as
|
|
2924
|
+
import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
2935
2925
|
var TH = styled13(View6, { padding: "$3", justifyContent: "center" });
|
|
2936
2926
|
var TD = styled13(View6, { padding: "$3", justifyContent: "center" });
|
|
2937
2927
|
function StatusBadge({ status }) {
|
|
2938
2928
|
const isActive = status.toLowerCase() === "active";
|
|
2939
|
-
return /* @__PURE__ */
|
|
2940
|
-
/* @__PURE__ */
|
|
2929
|
+
return /* @__PURE__ */ jsxs42(XStack37, { gap: "$2", alignItems: "center", children: [
|
|
2930
|
+
/* @__PURE__ */ jsx52(
|
|
2941
2931
|
View6,
|
|
2942
2932
|
{
|
|
2943
2933
|
width: 8,
|
|
@@ -2946,13 +2936,13 @@ function StatusBadge({ status }) {
|
|
|
2946
2936
|
backgroundColor: isActive ? "$green9" : "$orange9"
|
|
2947
2937
|
}
|
|
2948
2938
|
),
|
|
2949
|
-
/* @__PURE__ */
|
|
2939
|
+
/* @__PURE__ */ jsx52(SizableText44, { size: "$3", color: "$color11", children: status })
|
|
2950
2940
|
] });
|
|
2951
2941
|
}
|
|
2952
2942
|
function HeaderCell({ col, sort, onSort }) {
|
|
2953
2943
|
const active = sort?.key === col.key;
|
|
2954
2944
|
const indicator = active ? sort.dir === "asc" ? " \u25B2" : " \u25BC" : "";
|
|
2955
|
-
return /* @__PURE__ */
|
|
2945
|
+
return /* @__PURE__ */ jsx52(
|
|
2956
2946
|
TH,
|
|
2957
2947
|
{
|
|
2958
2948
|
width: col.width,
|
|
@@ -2961,7 +2951,7 @@ function HeaderCell({ col, sort, onSort }) {
|
|
|
2961
2951
|
cursor: col.sortable ? "pointer" : void 0,
|
|
2962
2952
|
onPress: col.sortable ? onSort : void 0,
|
|
2963
2953
|
pressStyle: col.sortable ? { opacity: 0.7 } : void 0,
|
|
2964
|
-
children: /* @__PURE__ */
|
|
2954
|
+
children: /* @__PURE__ */ jsxs42(
|
|
2965
2955
|
SizableText44,
|
|
2966
2956
|
{
|
|
2967
2957
|
size: "$2",
|
|
@@ -2980,7 +2970,7 @@ function HeaderCell({ col, sort, onSort }) {
|
|
|
2980
2970
|
);
|
|
2981
2971
|
}
|
|
2982
2972
|
function TableRow({ row, columns, onPress, odd }) {
|
|
2983
|
-
return /* @__PURE__ */
|
|
2973
|
+
return /* @__PURE__ */ jsx52(
|
|
2984
2974
|
XStack37,
|
|
2985
2975
|
{
|
|
2986
2976
|
backgroundColor: odd ? "$color2" : "transparent",
|
|
@@ -2991,12 +2981,12 @@ function TableRow({ row, columns, onPress, odd }) {
|
|
|
2991
2981
|
onPress: onPress ? () => onPress(row) : void 0,
|
|
2992
2982
|
pressStyle: onPress ? { opacity: 0.85 } : void 0,
|
|
2993
2983
|
animation: "quick",
|
|
2994
|
-
children: columns.map((col) => /* @__PURE__ */
|
|
2984
|
+
children: columns.map((col) => /* @__PURE__ */ jsx52(TD, { width: col.width, flex: col.width ? void 0 : 1, children: col.render ? col.render(row[col.key], row) : /* @__PURE__ */ jsx52(SizableText44, { size: "$3", color: "$color11", children: String(row[col.key] ?? "") }) }, col.key))
|
|
2995
2985
|
}
|
|
2996
2986
|
);
|
|
2997
2987
|
}
|
|
2998
2988
|
function CardRow({ row, columns, onPress }) {
|
|
2999
|
-
return /* @__PURE__ */
|
|
2989
|
+
return /* @__PURE__ */ jsx52(
|
|
3000
2990
|
YStack41,
|
|
3001
2991
|
{
|
|
3002
2992
|
backgroundColor: "$color1",
|
|
@@ -3008,11 +2998,11 @@ function CardRow({ row, columns, onPress }) {
|
|
|
3008
2998
|
onPress: onPress ? () => onPress(row) : void 0,
|
|
3009
2999
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
3010
3000
|
animation: "quick",
|
|
3011
|
-
children: columns.map((col, i) => /* @__PURE__ */
|
|
3012
|
-
i > 0 && /* @__PURE__ */
|
|
3013
|
-
/* @__PURE__ */
|
|
3014
|
-
/* @__PURE__ */
|
|
3015
|
-
col.render ? col.render(row[col.key], row) : /* @__PURE__ */
|
|
3001
|
+
children: columns.map((col, i) => /* @__PURE__ */ jsxs42(YStack41, { children: [
|
|
3002
|
+
i > 0 && /* @__PURE__ */ jsx52(Separator5, { marginVertical: "$1.5", borderColor: "$color4" }),
|
|
3003
|
+
/* @__PURE__ */ jsxs42(XStack37, { justifyContent: "space-between", alignItems: "center", children: [
|
|
3004
|
+
/* @__PURE__ */ jsx52(SizableText44, { size: "$2", color: "$color9", fontWeight: "600", children: col.header }),
|
|
3005
|
+
col.render ? col.render(row[col.key], row) : /* @__PURE__ */ jsx52(SizableText44, { size: "$3", color: "$color11", children: String(row[col.key] ?? "") })
|
|
3016
3006
|
] })
|
|
3017
3007
|
] }, col.key))
|
|
3018
3008
|
}
|
|
@@ -3032,21 +3022,21 @@ function DataTable({ columns, data, onRowPress, emptyMessage = "No data" }) {
|
|
|
3032
3022
|
}, [data, sort]);
|
|
3033
3023
|
const toggleSort = (key) => setSort((s) => s?.key === key ? { key, dir: s.dir === "asc" ? "desc" : "asc" } : { key, dir: "asc" });
|
|
3034
3024
|
if (!data.length) {
|
|
3035
|
-
return /* @__PURE__ */
|
|
3025
|
+
return /* @__PURE__ */ jsx52(YStack41, { padding: "$6", alignItems: "center", children: /* @__PURE__ */ jsx52(SizableText44, { size: "$4", color: "$color9", children: emptyMessage }) });
|
|
3036
3026
|
}
|
|
3037
3027
|
if (isSmall) {
|
|
3038
|
-
return /* @__PURE__ */
|
|
3028
|
+
return /* @__PURE__ */ jsx52(YStack41, { gap: "$3", children: sorted.map((row, i) => /* @__PURE__ */ jsx52(CardRow, { row, columns, onPress: onRowPress }, i)) });
|
|
3039
3029
|
}
|
|
3040
|
-
return /* @__PURE__ */
|
|
3041
|
-
/* @__PURE__ */
|
|
3042
|
-
sorted.map((row, i) => /* @__PURE__ */
|
|
3030
|
+
return /* @__PURE__ */ jsxs42(YStack41, { borderWidth: 1, borderColor: "$color4", borderRadius: "$4", overflow: "hidden", children: [
|
|
3031
|
+
/* @__PURE__ */ jsx52(XStack37, { backgroundColor: "$color1", borderBottomWidth: 1, borderColor: "$color4", children: columns.map((col) => /* @__PURE__ */ jsx52(HeaderCell, { col, sort, onSort: () => toggleSort(col.key) }, col.key)) }),
|
|
3032
|
+
sorted.map((row, i) => /* @__PURE__ */ jsx52(TableRow, { row, columns, onPress: onRowPress, odd: i % 2 === 1 }, i))
|
|
3043
3033
|
] });
|
|
3044
3034
|
}
|
|
3045
3035
|
|
|
3046
3036
|
// src/patterns/DatePicker.tsx
|
|
3047
3037
|
import { useCallback as useCallback7, useMemo as useMemo2, useState as useState15 } from "react";
|
|
3048
3038
|
import { SizableText as SizableText45, XStack as XStack38, YStack as YStack42 } from "tamagui";
|
|
3049
|
-
import { jsx as
|
|
3039
|
+
import { jsx as jsx53, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
3050
3040
|
var MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
|
3051
3041
|
var DAY_LABELS_SUN = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
3052
3042
|
var DAY_LABELS_MON = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
|
|
@@ -3071,7 +3061,7 @@ function buildGrid(year, month, startDay) {
|
|
|
3071
3061
|
return cells;
|
|
3072
3062
|
}
|
|
3073
3063
|
function NavButton({ label, onPress }) {
|
|
3074
|
-
return /* @__PURE__ */
|
|
3064
|
+
return /* @__PURE__ */ jsx53(
|
|
3075
3065
|
XStack38,
|
|
3076
3066
|
{
|
|
3077
3067
|
width: 36,
|
|
@@ -3084,7 +3074,7 @@ function NavButton({ label, onPress }) {
|
|
|
3084
3074
|
animation: "quick",
|
|
3085
3075
|
onPress,
|
|
3086
3076
|
cursor: "pointer",
|
|
3087
|
-
children: /* @__PURE__ */
|
|
3077
|
+
children: /* @__PURE__ */ jsx53(SizableText45, { size: "$5", color: "$color11", fontWeight: "600", children: label })
|
|
3088
3078
|
}
|
|
3089
3079
|
);
|
|
3090
3080
|
}
|
|
@@ -3113,23 +3103,23 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3113
3103
|
if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
|
|
3114
3104
|
return false;
|
|
3115
3105
|
}, [minDate, maxDate]);
|
|
3116
|
-
return /* @__PURE__ */
|
|
3117
|
-
/* @__PURE__ */
|
|
3118
|
-
/* @__PURE__ */
|
|
3119
|
-
/* @__PURE__ */
|
|
3106
|
+
return /* @__PURE__ */ jsxs43(YStack42, { backgroundColor: "$color2", borderRadius: "$4", padding: "$3", gap: "$2", animation: "quick", children: [
|
|
3107
|
+
/* @__PURE__ */ jsxs43(XStack38, { alignItems: "center", justifyContent: "space-between", children: [
|
|
3108
|
+
/* @__PURE__ */ jsx53(NavButton, { label: "\u2039", onPress: () => navigate(-1) }),
|
|
3109
|
+
/* @__PURE__ */ jsxs43(SizableText45, { size: "$4", fontWeight: "700", color: "$color12", children: [
|
|
3120
3110
|
MONTH_NAMES[viewMonth],
|
|
3121
3111
|
" ",
|
|
3122
3112
|
viewYear
|
|
3123
3113
|
] }),
|
|
3124
|
-
/* @__PURE__ */
|
|
3114
|
+
/* @__PURE__ */ jsx53(NavButton, { label: "\u203A", onPress: () => navigate(1) })
|
|
3125
3115
|
] }),
|
|
3126
|
-
/* @__PURE__ */
|
|
3127
|
-
Array.from({ length: Math.ceil(grid.length / 7) }, (_, row) => /* @__PURE__ */
|
|
3116
|
+
/* @__PURE__ */ jsx53(XStack38, { children: headers.map((h) => /* @__PURE__ */ jsx53(SizableText45, { size: "$2", color: "$color8", fontWeight: "600", textAlign: "center", flex: 1, children: h }, h)) }),
|
|
3117
|
+
Array.from({ length: Math.ceil(grid.length / 7) }, (_, row) => /* @__PURE__ */ jsx53(XStack38, { children: grid.slice(row * 7, row * 7 + 7).map((cell, i) => {
|
|
3128
3118
|
const date = new Date(cell.year, cell.month, cell.day);
|
|
3129
3119
|
const selected = sameDay(value, date);
|
|
3130
3120
|
const isToday = sameDay(today, date);
|
|
3131
3121
|
const disabled = cell.outside || isDisabled(date);
|
|
3132
|
-
return /* @__PURE__ */
|
|
3122
|
+
return /* @__PURE__ */ jsx53(YStack42, { flex: 1, alignItems: "center", paddingVertical: "$0.5", children: /* @__PURE__ */ jsx53(
|
|
3133
3123
|
XStack38,
|
|
3134
3124
|
{
|
|
3135
3125
|
width: 40,
|
|
@@ -3145,7 +3135,7 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3145
3135
|
opacity: disabled ? 0.35 : 1,
|
|
3146
3136
|
cursor: disabled ? "default" : "pointer",
|
|
3147
3137
|
onPress: disabled ? void 0 : () => onDateChange?.(date),
|
|
3148
|
-
children: /* @__PURE__ */
|
|
3138
|
+
children: /* @__PURE__ */ jsx53(
|
|
3149
3139
|
SizableText45,
|
|
3150
3140
|
{
|
|
3151
3141
|
size: "$3",
|
|
@@ -3162,7 +3152,7 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3162
3152
|
|
|
3163
3153
|
// src/patterns/EventCard.tsx
|
|
3164
3154
|
import { SizableText as SizableText46, Theme, XStack as XStack39, YStack as YStack43 } from "tamagui";
|
|
3165
|
-
import { jsx as
|
|
3155
|
+
import { jsx as jsx54, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
3166
3156
|
var THEME_MAP = {
|
|
3167
3157
|
purple: "purple",
|
|
3168
3158
|
green: "green",
|
|
@@ -3173,8 +3163,8 @@ var THEME_MAP = {
|
|
|
3173
3163
|
};
|
|
3174
3164
|
function ParticipantDots({ count, max }) {
|
|
3175
3165
|
const dots = Math.min(count, 5);
|
|
3176
|
-
return /* @__PURE__ */
|
|
3177
|
-
/* @__PURE__ */
|
|
3166
|
+
return /* @__PURE__ */ jsxs44(XStack39, { alignItems: "center", gap: "$1.5", children: [
|
|
3167
|
+
/* @__PURE__ */ jsx54(XStack39, { children: Array.from({ length: dots }, (_, i) => /* @__PURE__ */ jsx54(
|
|
3178
3168
|
YStack43,
|
|
3179
3169
|
{
|
|
3180
3170
|
width: 22,
|
|
@@ -3186,18 +3176,18 @@ function ParticipantDots({ count, max }) {
|
|
|
3186
3176
|
marginLeft: i > 0 ? -8 : 0,
|
|
3187
3177
|
alignItems: "center",
|
|
3188
3178
|
justifyContent: "center",
|
|
3189
|
-
children: /* @__PURE__ */
|
|
3179
|
+
children: /* @__PURE__ */ jsx54(SizableText46, { size: "$1", color: "$color1", fontWeight: "700", children: String.fromCharCode(65 + i) })
|
|
3190
3180
|
},
|
|
3191
3181
|
i
|
|
3192
3182
|
)) }),
|
|
3193
|
-
/* @__PURE__ */
|
|
3183
|
+
/* @__PURE__ */ jsxs44(SizableText46, { size: "$2", color: "$color11", fontWeight: "500", children: [
|
|
3194
3184
|
count,
|
|
3195
3185
|
max ? `/${max}` : ""
|
|
3196
3186
|
] })
|
|
3197
3187
|
] });
|
|
3198
3188
|
}
|
|
3199
3189
|
function CardInner({ title, subtitle, time, location, label, participants, maxParticipants, onPress, actions }) {
|
|
3200
|
-
return /* @__PURE__ */
|
|
3190
|
+
return /* @__PURE__ */ jsxs44(
|
|
3201
3191
|
YStack43,
|
|
3202
3192
|
{
|
|
3203
3193
|
backgroundColor: "$color4",
|
|
@@ -3211,22 +3201,22 @@ function CardInner({ title, subtitle, time, location, label, participants, maxPa
|
|
|
3211
3201
|
pressStyle: onPress ? { scale: 0.97, opacity: 0.9 } : void 0,
|
|
3212
3202
|
cursor: onPress ? "pointer" : void 0,
|
|
3213
3203
|
children: [
|
|
3214
|
-
/* @__PURE__ */
|
|
3215
|
-
/* @__PURE__ */
|
|
3216
|
-
/* @__PURE__ */
|
|
3217
|
-
subtitle && /* @__PURE__ */
|
|
3204
|
+
/* @__PURE__ */ jsxs44(XStack39, { justifyContent: "space-between", alignItems: "flex-start", children: [
|
|
3205
|
+
/* @__PURE__ */ jsxs44(YStack43, { flex: 1, gap: "$1", children: [
|
|
3206
|
+
/* @__PURE__ */ jsx54(SizableText46, { size: "$6", fontWeight: "700", color: "$color12", children: title }),
|
|
3207
|
+
subtitle && /* @__PURE__ */ jsx54(SizableText46, { size: "$3", color: "$color11", opacity: 0.8, children: subtitle })
|
|
3218
3208
|
] }),
|
|
3219
|
-
time && /* @__PURE__ */
|
|
3209
|
+
time && /* @__PURE__ */ jsx54(YStack43, { backgroundColor: "$color6", paddingHorizontal: "$2.5", paddingVertical: "$1.5", borderRadius: "$3", children: /* @__PURE__ */ jsx54(SizableText46, { size: "$2", fontWeight: "600", color: "$color12", children: time }) })
|
|
3220
3210
|
] }),
|
|
3221
|
-
/* @__PURE__ */
|
|
3222
|
-
location && /* @__PURE__ */
|
|
3223
|
-
/* @__PURE__ */
|
|
3224
|
-
/* @__PURE__ */
|
|
3211
|
+
/* @__PURE__ */ jsxs44(XStack39, { gap: "$4", alignItems: "center", flexWrap: "wrap", children: [
|
|
3212
|
+
location && /* @__PURE__ */ jsxs44(XStack39, { gap: "$1.5", alignItems: "center", children: [
|
|
3213
|
+
/* @__PURE__ */ jsx54(SizableText46, { size: "$3", children: "\u{1F4CD}" }),
|
|
3214
|
+
/* @__PURE__ */ jsx54(SizableText46, { size: "$3", color: "$color11", children: location })
|
|
3225
3215
|
] }),
|
|
3226
|
-
participants !== void 0 && /* @__PURE__ */
|
|
3216
|
+
participants !== void 0 && /* @__PURE__ */ jsx54(ParticipantDots, { count: participants, max: maxParticipants })
|
|
3227
3217
|
] }),
|
|
3228
|
-
(label || actions) && /* @__PURE__ */
|
|
3229
|
-
label ? /* @__PURE__ */
|
|
3218
|
+
(label || actions) && /* @__PURE__ */ jsxs44(XStack39, { justifyContent: "space-between", alignItems: "center", children: [
|
|
3219
|
+
label ? /* @__PURE__ */ jsx54(XStack39, { backgroundColor: "$color6", paddingHorizontal: "$2.5", paddingVertical: "$1", borderRadius: "$10", children: /* @__PURE__ */ jsx54(SizableText46, { size: "$2", fontWeight: "600", color: "$color11", children: label }) }) : /* @__PURE__ */ jsx54(YStack43, {}),
|
|
3230
3220
|
actions
|
|
3231
3221
|
] })
|
|
3232
3222
|
]
|
|
@@ -3234,27 +3224,27 @@ function CardInner({ title, subtitle, time, location, label, participants, maxPa
|
|
|
3234
3224
|
);
|
|
3235
3225
|
}
|
|
3236
3226
|
function EventCard({ theme = "purple", ...props }) {
|
|
3237
|
-
return /* @__PURE__ */
|
|
3227
|
+
return /* @__PURE__ */ jsx54(Theme, { name: THEME_MAP[theme], children: /* @__PURE__ */ jsx54(CardInner, { ...props }) });
|
|
3238
3228
|
}
|
|
3239
3229
|
|
|
3240
3230
|
// src/patterns/UserPreferences.tsx
|
|
3241
3231
|
import { Separator as Separator6, SizableText as SizableText47, Slider, Switch as Switch2, XStack as XStack40, YStack as YStack44 } from "tamagui";
|
|
3242
|
-
import { jsx as
|
|
3232
|
+
import { jsx as jsx55, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
3243
3233
|
function ItemLabel({ title, description, color }) {
|
|
3244
|
-
return /* @__PURE__ */
|
|
3245
|
-
/* @__PURE__ */
|
|
3246
|
-
description && /* @__PURE__ */
|
|
3234
|
+
return /* @__PURE__ */ jsxs45(YStack44, { flex: 1, gap: "$1", children: [
|
|
3235
|
+
/* @__PURE__ */ jsx55(SizableText47, { size: "$4", fontWeight: "500", color: color ?? "$color12", children: title }),
|
|
3236
|
+
description && /* @__PURE__ */ jsx55(SizableText47, { size: "$2", color: "$color9", children: description })
|
|
3247
3237
|
] });
|
|
3248
3238
|
}
|
|
3249
3239
|
function ToggleRow({ item }) {
|
|
3250
|
-
return /* @__PURE__ */
|
|
3251
|
-
/* @__PURE__ */
|
|
3252
|
-
/* @__PURE__ */
|
|
3240
|
+
return /* @__PURE__ */ jsxs45(XStack40, { alignItems: "center", gap: "$3", paddingVertical: "$3", paddingHorizontal: "$4", children: [
|
|
3241
|
+
/* @__PURE__ */ jsx55(ItemLabel, { title: item.title, description: item.description }),
|
|
3242
|
+
/* @__PURE__ */ jsx55(Switch2, { size: "$3", checked: item.value, onCheckedChange: item.onValueChange, children: /* @__PURE__ */ jsx55(Switch2.Thumb, { animation: "quick" }) })
|
|
3253
3243
|
] });
|
|
3254
3244
|
}
|
|
3255
3245
|
function SelectRow({ item }) {
|
|
3256
3246
|
const current = item.options.find((o) => o.value === item.value);
|
|
3257
|
-
return /* @__PURE__ */
|
|
3247
|
+
return /* @__PURE__ */ jsxs45(
|
|
3258
3248
|
XStack40,
|
|
3259
3249
|
{
|
|
3260
3250
|
alignItems: "center",
|
|
@@ -3270,9 +3260,9 @@ function SelectRow({ item }) {
|
|
|
3270
3260
|
if (next) item.onValueChange(next.value);
|
|
3271
3261
|
},
|
|
3272
3262
|
children: [
|
|
3273
|
-
/* @__PURE__ */
|
|
3274
|
-
/* @__PURE__ */
|
|
3275
|
-
/* @__PURE__ */
|
|
3263
|
+
/* @__PURE__ */ jsx55(ItemLabel, { title: item.title, description: item.description }),
|
|
3264
|
+
/* @__PURE__ */ jsx55(SizableText47, { size: "$3", color: "$color9", fontWeight: "500", children: current?.label ?? item.value }),
|
|
3265
|
+
/* @__PURE__ */ jsx55(SizableText47, { size: "$4", color: "$color8", children: "\u203A" })
|
|
3276
3266
|
]
|
|
3277
3267
|
}
|
|
3278
3268
|
);
|
|
@@ -3280,12 +3270,12 @@ function SelectRow({ item }) {
|
|
|
3280
3270
|
function SliderRow({ item }) {
|
|
3281
3271
|
const min = item.min ?? 0;
|
|
3282
3272
|
const max = item.max ?? 100;
|
|
3283
|
-
return /* @__PURE__ */
|
|
3284
|
-
/* @__PURE__ */
|
|
3285
|
-
/* @__PURE__ */
|
|
3286
|
-
/* @__PURE__ */
|
|
3273
|
+
return /* @__PURE__ */ jsxs45(YStack44, { gap: "$2", paddingVertical: "$3", paddingHorizontal: "$4", children: [
|
|
3274
|
+
/* @__PURE__ */ jsxs45(XStack40, { justifyContent: "space-between", alignItems: "center", children: [
|
|
3275
|
+
/* @__PURE__ */ jsx55(ItemLabel, { title: item.title, description: item.description }),
|
|
3276
|
+
/* @__PURE__ */ jsx55(SizableText47, { size: "$3", fontWeight: "600", color: "$color11", children: item.value })
|
|
3287
3277
|
] }),
|
|
3288
|
-
/* @__PURE__ */
|
|
3278
|
+
/* @__PURE__ */ jsxs45(
|
|
3289
3279
|
Slider,
|
|
3290
3280
|
{
|
|
3291
3281
|
value: [item.value],
|
|
@@ -3296,15 +3286,15 @@ function SliderRow({ item }) {
|
|
|
3296
3286
|
if (v !== void 0) item.onValueChange(v);
|
|
3297
3287
|
},
|
|
3298
3288
|
children: [
|
|
3299
|
-
/* @__PURE__ */
|
|
3300
|
-
/* @__PURE__ */
|
|
3289
|
+
/* @__PURE__ */ jsx55(Slider.Track, { backgroundColor: "$color4", height: 4, children: /* @__PURE__ */ jsx55(Slider.TrackActive, { backgroundColor: "$color9" }) }),
|
|
3290
|
+
/* @__PURE__ */ jsx55(Slider.Thumb, { index: 0, size: "$1.5", backgroundColor: "$color9", borderWidth: 0, circular: true })
|
|
3301
3291
|
]
|
|
3302
3292
|
}
|
|
3303
3293
|
)
|
|
3304
3294
|
] });
|
|
3305
3295
|
}
|
|
3306
3296
|
function ActionRow({ item }) {
|
|
3307
|
-
return /* @__PURE__ */
|
|
3297
|
+
return /* @__PURE__ */ jsxs45(
|
|
3308
3298
|
XStack40,
|
|
3309
3299
|
{
|
|
3310
3300
|
alignItems: "center",
|
|
@@ -3316,7 +3306,7 @@ function ActionRow({ item }) {
|
|
|
3316
3306
|
cursor: "pointer",
|
|
3317
3307
|
onPress: item.onPress,
|
|
3318
3308
|
children: [
|
|
3319
|
-
/* @__PURE__ */
|
|
3309
|
+
/* @__PURE__ */ jsx55(
|
|
3320
3310
|
ItemLabel,
|
|
3321
3311
|
{
|
|
3322
3312
|
title: item.title,
|
|
@@ -3324,7 +3314,7 @@ function ActionRow({ item }) {
|
|
|
3324
3314
|
color: item.destructive ? "$red10" : void 0
|
|
3325
3315
|
}
|
|
3326
3316
|
),
|
|
3327
|
-
/* @__PURE__ */
|
|
3317
|
+
/* @__PURE__ */ jsx55(SizableText47, { size: "$4", color: "$color8", children: "\u203A" })
|
|
3328
3318
|
]
|
|
3329
3319
|
}
|
|
3330
3320
|
);
|
|
@@ -3332,22 +3322,22 @@ function ActionRow({ item }) {
|
|
|
3332
3322
|
function PreferenceRow({ item }) {
|
|
3333
3323
|
switch (item.type) {
|
|
3334
3324
|
case "toggle":
|
|
3335
|
-
return /* @__PURE__ */
|
|
3325
|
+
return /* @__PURE__ */ jsx55(ToggleRow, { item });
|
|
3336
3326
|
case "select":
|
|
3337
|
-
return /* @__PURE__ */
|
|
3327
|
+
return /* @__PURE__ */ jsx55(SelectRow, { item });
|
|
3338
3328
|
case "slider":
|
|
3339
|
-
return /* @__PURE__ */
|
|
3329
|
+
return /* @__PURE__ */ jsx55(SliderRow, { item });
|
|
3340
3330
|
case "action":
|
|
3341
|
-
return /* @__PURE__ */
|
|
3331
|
+
return /* @__PURE__ */ jsx55(ActionRow, { item });
|
|
3342
3332
|
}
|
|
3343
3333
|
}
|
|
3344
3334
|
function UserPreferences({ sections }) {
|
|
3345
|
-
return /* @__PURE__ */
|
|
3346
|
-
/* @__PURE__ */
|
|
3347
|
-
/* @__PURE__ */
|
|
3348
|
-
section.description && /* @__PURE__ */
|
|
3335
|
+
return /* @__PURE__ */ jsx55(YStack44, { gap: "$5", children: sections.map((section, si) => /* @__PURE__ */ jsxs45(YStack44, { gap: "$2", children: [
|
|
3336
|
+
/* @__PURE__ */ jsxs45(YStack44, { paddingHorizontal: "$1", gap: "$0.5", children: [
|
|
3337
|
+
/* @__PURE__ */ jsx55(SizableText47, { size: "$2", fontWeight: "600", color: "$color9", textTransform: "uppercase", children: section.title }),
|
|
3338
|
+
section.description && /* @__PURE__ */ jsx55(SizableText47, { size: "$2", color: "$color8", children: section.description })
|
|
3349
3339
|
] }),
|
|
3350
|
-
/* @__PURE__ */
|
|
3340
|
+
/* @__PURE__ */ jsx55(
|
|
3351
3341
|
YStack44,
|
|
3352
3342
|
{
|
|
3353
3343
|
backgroundColor: "$color2",
|
|
@@ -3355,9 +3345,9 @@ function UserPreferences({ sections }) {
|
|
|
3355
3345
|
overflow: "hidden",
|
|
3356
3346
|
borderWidth: 1,
|
|
3357
3347
|
borderColor: "$color4",
|
|
3358
|
-
children: section.items.map((item, ii) => /* @__PURE__ */
|
|
3359
|
-
/* @__PURE__ */
|
|
3360
|
-
ii < section.items.length - 1 && /* @__PURE__ */
|
|
3348
|
+
children: section.items.map((item, ii) => /* @__PURE__ */ jsxs45(YStack44, { children: [
|
|
3349
|
+
/* @__PURE__ */ jsx55(PreferenceRow, { item }),
|
|
3350
|
+
ii < section.items.length - 1 && /* @__PURE__ */ jsx55(Separator6, { borderColor: "$color4" })
|
|
3361
3351
|
] }, item.id))
|
|
3362
3352
|
}
|
|
3363
3353
|
)
|
|
@@ -3366,7 +3356,7 @@ function UserPreferences({ sections }) {
|
|
|
3366
3356
|
|
|
3367
3357
|
// src/patterns/BlinkSelect.tsx
|
|
3368
3358
|
import { Select, Adapt, Sheet as Sheet3, YStack as YStack45, SizableText as SizableText48 } from "tamagui";
|
|
3369
|
-
import { jsx as
|
|
3359
|
+
import { jsx as jsx56, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
3370
3360
|
function BlinkSelect({
|
|
3371
3361
|
items,
|
|
3372
3362
|
value,
|
|
@@ -3377,9 +3367,9 @@ function BlinkSelect({
|
|
|
3377
3367
|
disabled,
|
|
3378
3368
|
width = "100%"
|
|
3379
3369
|
}) {
|
|
3380
|
-
return /* @__PURE__ */
|
|
3381
|
-
label ? /* @__PURE__ */
|
|
3382
|
-
/* @__PURE__ */
|
|
3370
|
+
return /* @__PURE__ */ jsxs46(YStack45, { gap: "$1.5", width, children: [
|
|
3371
|
+
label ? /* @__PURE__ */ jsx56(SizableText48, { size: "$3", fontWeight: "600", children: label }) : null,
|
|
3372
|
+
/* @__PURE__ */ jsxs46(
|
|
3383
3373
|
Select,
|
|
3384
3374
|
{
|
|
3385
3375
|
value,
|
|
@@ -3387,18 +3377,18 @@ function BlinkSelect({
|
|
|
3387
3377
|
disablePreventBodyScroll: true,
|
|
3388
3378
|
...disabled ? { disabled: true } : {},
|
|
3389
3379
|
children: [
|
|
3390
|
-
/* @__PURE__ */
|
|
3391
|
-
/* @__PURE__ */
|
|
3392
|
-
/* @__PURE__ */
|
|
3393
|
-
/* @__PURE__ */
|
|
3380
|
+
/* @__PURE__ */ jsx56(Select.Trigger, { width: "100%", iconAfter: () => /* @__PURE__ */ jsx56(SizableText48, { children: "\u25BC" }), size, children: /* @__PURE__ */ jsx56(Select.Value, { placeholder }) }),
|
|
3381
|
+
/* @__PURE__ */ jsx56(Adapt, { when: "maxMd", platform: "touch", children: /* @__PURE__ */ jsxs46(Sheet3, { modal: true, dismissOnSnapToBottom: true, snapPointsMode: "fit", children: [
|
|
3382
|
+
/* @__PURE__ */ jsx56(Sheet3.Frame, { padding: "$4", children: /* @__PURE__ */ jsx56(Adapt.Contents, {}) }),
|
|
3383
|
+
/* @__PURE__ */ jsx56(Sheet3.Overlay, {})
|
|
3394
3384
|
] }) }),
|
|
3395
|
-
/* @__PURE__ */
|
|
3396
|
-
/* @__PURE__ */
|
|
3397
|
-
/* @__PURE__ */
|
|
3398
|
-
/* @__PURE__ */
|
|
3399
|
-
/* @__PURE__ */
|
|
3385
|
+
/* @__PURE__ */ jsxs46(Select.Content, { zIndex: 2e5, children: [
|
|
3386
|
+
/* @__PURE__ */ jsx56(Select.ScrollUpButton, { alignItems: "center", justifyContent: "center", height: "$3", children: /* @__PURE__ */ jsx56(SizableText48, { children: "\u25B2" }) }),
|
|
3387
|
+
/* @__PURE__ */ jsx56(Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ jsx56(Select.Group, { children: items.map((item, i) => /* @__PURE__ */ jsxs46(Select.Item, { index: i, value: item.value, children: [
|
|
3388
|
+
/* @__PURE__ */ jsx56(Select.ItemText, { children: item.label }),
|
|
3389
|
+
/* @__PURE__ */ jsx56(Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ jsx56(SizableText48, { children: "\u2713" }) })
|
|
3400
3390
|
] }, item.value)) }) }),
|
|
3401
|
-
/* @__PURE__ */
|
|
3391
|
+
/* @__PURE__ */ jsx56(Select.ScrollDownButton, { alignItems: "center", justifyContent: "center", height: "$3", children: /* @__PURE__ */ jsx56(SizableText48, { children: "\u25BC" }) })
|
|
3402
3392
|
] })
|
|
3403
3393
|
]
|
|
3404
3394
|
}
|
|
@@ -3408,7 +3398,7 @@ function BlinkSelect({
|
|
|
3408
3398
|
|
|
3409
3399
|
// src/patterns/BlinkDialog.tsx
|
|
3410
3400
|
import { Dialog, Adapt as Adapt2, Sheet as Sheet4, Button as Button11, XStack as XStack41 } from "tamagui";
|
|
3411
|
-
import { jsx as
|
|
3401
|
+
import { jsx as jsx57, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
3412
3402
|
function BlinkDialog({
|
|
3413
3403
|
open,
|
|
3414
3404
|
onOpenChange,
|
|
@@ -3422,14 +3412,14 @@ function BlinkDialog({
|
|
|
3422
3412
|
onCancel,
|
|
3423
3413
|
confirmTheme = "active"
|
|
3424
3414
|
}) {
|
|
3425
|
-
return /* @__PURE__ */
|
|
3426
|
-
trigger && /* @__PURE__ */
|
|
3427
|
-
/* @__PURE__ */
|
|
3428
|
-
/* @__PURE__ */
|
|
3429
|
-
/* @__PURE__ */
|
|
3415
|
+
return /* @__PURE__ */ jsxs47(Dialog, { modal: true, open, onOpenChange, children: [
|
|
3416
|
+
trigger && /* @__PURE__ */ jsx57(Dialog.Trigger, { asChild: true, children: trigger }),
|
|
3417
|
+
/* @__PURE__ */ jsx57(Adapt2, { when: "maxMd", platform: "touch", children: /* @__PURE__ */ jsxs47(Sheet4, { modal: true, dismissOnSnapToBottom: true, snapPointsMode: "fit", children: [
|
|
3418
|
+
/* @__PURE__ */ jsx57(Sheet4.Frame, { padding: "$4", gap: "$4", children: /* @__PURE__ */ jsx57(Adapt2.Contents, {}) }),
|
|
3419
|
+
/* @__PURE__ */ jsx57(Sheet4.Overlay, {})
|
|
3430
3420
|
] }) }),
|
|
3431
|
-
/* @__PURE__ */
|
|
3432
|
-
/* @__PURE__ */
|
|
3421
|
+
/* @__PURE__ */ jsxs47(Dialog.Portal, { children: [
|
|
3422
|
+
/* @__PURE__ */ jsx57(
|
|
3433
3423
|
Dialog.Overlay,
|
|
3434
3424
|
{
|
|
3435
3425
|
animation: "quick",
|
|
@@ -3439,7 +3429,7 @@ function BlinkDialog({
|
|
|
3439
3429
|
},
|
|
3440
3430
|
"overlay"
|
|
3441
3431
|
),
|
|
3442
|
-
/* @__PURE__ */
|
|
3432
|
+
/* @__PURE__ */ jsxs47(
|
|
3443
3433
|
Dialog.Content,
|
|
3444
3434
|
{
|
|
3445
3435
|
bordered: true,
|
|
@@ -3450,12 +3440,12 @@ function BlinkDialog({
|
|
|
3450
3440
|
exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
|
|
3451
3441
|
gap: "$4",
|
|
3452
3442
|
children: [
|
|
3453
|
-
title && /* @__PURE__ */
|
|
3454
|
-
description && /* @__PURE__ */
|
|
3443
|
+
title && /* @__PURE__ */ jsx57(Dialog.Title, { children: title }),
|
|
3444
|
+
description && /* @__PURE__ */ jsx57(Dialog.Description, { size: "$3", color: "$color10", children: description }),
|
|
3455
3445
|
children,
|
|
3456
|
-
(onConfirm || onCancel) && /* @__PURE__ */
|
|
3457
|
-
onCancel && /* @__PURE__ */
|
|
3458
|
-
onConfirm && /* @__PURE__ */
|
|
3446
|
+
(onConfirm || onCancel) && /* @__PURE__ */ jsxs47(XStack41, { justifyContent: "flex-end", gap: "$3", children: [
|
|
3447
|
+
onCancel && /* @__PURE__ */ jsx57(Dialog.Close, { displayWhenAdapted: true, asChild: true, children: /* @__PURE__ */ jsx57(Button11, { variant: "outlined", onPress: onCancel, children: cancelLabel }) }),
|
|
3448
|
+
onConfirm && /* @__PURE__ */ jsx57(Dialog.Close, { displayWhenAdapted: true, asChild: true, children: /* @__PURE__ */ jsx57(Button11, { theme: confirmTheme, onPress: onConfirm, children: confirmLabel }) })
|
|
3459
3449
|
] })
|
|
3460
3450
|
]
|
|
3461
3451
|
},
|
|
@@ -3467,7 +3457,7 @@ function BlinkDialog({
|
|
|
3467
3457
|
|
|
3468
3458
|
// src/patterns/BlinkPopover.tsx
|
|
3469
3459
|
import { Popover as Popover2, Adapt as Adapt3, YStack as YStack46 } from "tamagui";
|
|
3470
|
-
import { jsx as
|
|
3460
|
+
import { jsx as jsx58, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
3471
3461
|
function BlinkPopover({
|
|
3472
3462
|
trigger,
|
|
3473
3463
|
children,
|
|
@@ -3475,13 +3465,13 @@ function BlinkPopover({
|
|
|
3475
3465
|
allowFlip = true,
|
|
3476
3466
|
size = "$5"
|
|
3477
3467
|
}) {
|
|
3478
|
-
return /* @__PURE__ */
|
|
3479
|
-
/* @__PURE__ */
|
|
3480
|
-
/* @__PURE__ */
|
|
3481
|
-
/* @__PURE__ */
|
|
3482
|
-
/* @__PURE__ */
|
|
3468
|
+
return /* @__PURE__ */ jsxs48(Popover2, { size, allowFlip, placement, children: [
|
|
3469
|
+
/* @__PURE__ */ jsx58(Popover2.Trigger, { asChild: true, children: trigger }),
|
|
3470
|
+
/* @__PURE__ */ jsx58(Adapt3, { when: "maxMd", platform: "touch", children: /* @__PURE__ */ jsxs48(Popover2.Sheet, { modal: true, dismissOnSnapToBottom: true, snapPointsMode: "fit", children: [
|
|
3471
|
+
/* @__PURE__ */ jsx58(Popover2.Sheet.Frame, { padding: "$4", children: /* @__PURE__ */ jsx58(Adapt3.Contents, {}) }),
|
|
3472
|
+
/* @__PURE__ */ jsx58(Popover2.Sheet.Overlay, {})
|
|
3483
3473
|
] }) }),
|
|
3484
|
-
/* @__PURE__ */
|
|
3474
|
+
/* @__PURE__ */ jsxs48(
|
|
3485
3475
|
Popover2.Content,
|
|
3486
3476
|
{
|
|
3487
3477
|
borderWidth: 1,
|
|
@@ -3491,8 +3481,8 @@ function BlinkPopover({
|
|
|
3491
3481
|
elevate: true,
|
|
3492
3482
|
animation: ["quick", { opacity: { overshootClamping: true } }],
|
|
3493
3483
|
children: [
|
|
3494
|
-
/* @__PURE__ */
|
|
3495
|
-
/* @__PURE__ */
|
|
3484
|
+
/* @__PURE__ */ jsx58(Popover2.Arrow, { borderWidth: 1, borderColor: "$borderColor" }),
|
|
3485
|
+
/* @__PURE__ */ jsx58(YStack46, { gap: "$3", padding: "$3", children })
|
|
3496
3486
|
]
|
|
3497
3487
|
}
|
|
3498
3488
|
)
|
|
@@ -3501,7 +3491,7 @@ function BlinkPopover({
|
|
|
3501
3491
|
|
|
3502
3492
|
// src/patterns/ImmersiveMediaScreen.tsx
|
|
3503
3493
|
import { Button as Button12, SizableText as SizableText49, XStack as XStack42, YStack as YStack47 } from "tamagui";
|
|
3504
|
-
import { jsx as
|
|
3494
|
+
import { jsx as jsx59, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
3505
3495
|
function ImmersiveMediaScreen({
|
|
3506
3496
|
variant = "reel",
|
|
3507
3497
|
media,
|
|
@@ -3517,16 +3507,16 @@ function ImmersiveMediaScreen({
|
|
|
3517
3507
|
sheetContent
|
|
3518
3508
|
}) {
|
|
3519
3509
|
const showSheet = variant === "sheet";
|
|
3520
|
-
return /* @__PURE__ */
|
|
3521
|
-
/* @__PURE__ */
|
|
3510
|
+
return /* @__PURE__ */ jsxs49(YStack47, { flex: 1, backgroundColor: "$color1", children: [
|
|
3511
|
+
/* @__PURE__ */ jsxs49(YStack47, { flex: 1, position: "relative", children: [
|
|
3522
3512
|
media,
|
|
3523
|
-
/* @__PURE__ */
|
|
3524
|
-
/* @__PURE__ */
|
|
3525
|
-
/* @__PURE__ */
|
|
3526
|
-
/* @__PURE__ */
|
|
3513
|
+
/* @__PURE__ */ jsxs49(XStack42, { position: "absolute", top: "$5", left: "$4", right: "$4", justifyContent: "space-between", alignItems: "center", children: [
|
|
3514
|
+
/* @__PURE__ */ jsx59(XStack42, { minWidth: 56, children: topLeft }),
|
|
3515
|
+
/* @__PURE__ */ jsx59(YStack47, { alignItems: "center", flex: 1, children: topCenter }),
|
|
3516
|
+
/* @__PURE__ */ jsx59(XStack42, { minWidth: 56, justifyContent: "flex-end", children: topRight })
|
|
3527
3517
|
] }),
|
|
3528
|
-
actions.length > 0 ? /* @__PURE__ */
|
|
3529
|
-
/* @__PURE__ */
|
|
3518
|
+
actions.length > 0 ? /* @__PURE__ */ jsx59(YStack47, { position: "absolute", right: "$3", bottom: showSheet ? "$20" : "$10", gap: "$3", alignItems: "center", children: actions.map((action) => /* @__PURE__ */ jsxs49(YStack47, { gap: "$1", alignItems: "center", onPress: action.onPress, children: [
|
|
3519
|
+
/* @__PURE__ */ jsx59(
|
|
3530
3520
|
YStack47,
|
|
3531
3521
|
{
|
|
3532
3522
|
width: 44,
|
|
@@ -3535,17 +3525,17 @@ function ImmersiveMediaScreen({
|
|
|
3535
3525
|
backgroundColor: "rgba(0,0,0,0.55)",
|
|
3536
3526
|
alignItems: "center",
|
|
3537
3527
|
justifyContent: "center",
|
|
3538
|
-
children: action.icon ?? /* @__PURE__ */
|
|
3528
|
+
children: action.icon ?? /* @__PURE__ */ jsx59(SizableText49, { size: "$5", color: "white", children: "\u2022" })
|
|
3539
3529
|
}
|
|
3540
3530
|
),
|
|
3541
|
-
action.value ? /* @__PURE__ */
|
|
3542
|
-
action.label ? /* @__PURE__ */
|
|
3531
|
+
action.value ? /* @__PURE__ */ jsx59(SizableText49, { size: "$2", color: "white", children: action.value }) : null,
|
|
3532
|
+
action.label ? /* @__PURE__ */ jsx59(SizableText49, { size: "$1", color: "rgba(255,255,255,0.8)", children: action.label }) : null
|
|
3543
3533
|
] }, action.id)) }) : null,
|
|
3544
|
-
/* @__PURE__ */
|
|
3545
|
-
title ? /* @__PURE__ */
|
|
3546
|
-
subtitle ? /* @__PURE__ */
|
|
3534
|
+
/* @__PURE__ */ jsxs49(YStack47, { position: "absolute", left: "$4", right: "$4", bottom: showSheet ? "$20" : "$6", gap: "$2", children: [
|
|
3535
|
+
title ? /* @__PURE__ */ jsx59(SizableText49, { size: "$6", fontWeight: "800", color: "white", children: title }) : null,
|
|
3536
|
+
subtitle ? /* @__PURE__ */ jsx59(SizableText49, { size: "$3", color: "rgba(255,255,255,0.82)", children: subtitle }) : null,
|
|
3547
3537
|
bottomMeta,
|
|
3548
|
-
variant === "story" && inputPlaceholder ? /* @__PURE__ */
|
|
3538
|
+
variant === "story" && inputPlaceholder ? /* @__PURE__ */ jsx59(
|
|
3549
3539
|
XStack42,
|
|
3550
3540
|
{
|
|
3551
3541
|
onPress: onInputPress,
|
|
@@ -3556,22 +3546,22 @@ function ImmersiveMediaScreen({
|
|
|
3556
3546
|
backgroundColor: "rgba(255,255,255,0.14)",
|
|
3557
3547
|
borderWidth: 1,
|
|
3558
3548
|
borderColor: "rgba(255,255,255,0.25)",
|
|
3559
|
-
children: /* @__PURE__ */
|
|
3549
|
+
children: /* @__PURE__ */ jsx59(SizableText49, { size: "$3", color: "rgba(255,255,255,0.82)", children: inputPlaceholder })
|
|
3560
3550
|
}
|
|
3561
3551
|
) : null
|
|
3562
3552
|
] })
|
|
3563
3553
|
] }),
|
|
3564
|
-
showSheet ? /* @__PURE__ */
|
|
3565
|
-
/* @__PURE__ */
|
|
3554
|
+
showSheet ? /* @__PURE__ */ jsxs49(YStack47, { padding: "$4", gap: "$3", backgroundColor: "$background", borderTopLeftRadius: "$8", borderTopRightRadius: "$8", marginTop: -18, children: [
|
|
3555
|
+
/* @__PURE__ */ jsx59(XStack42, { alignSelf: "center", width: 48, height: 5, borderRadius: "$10", backgroundColor: "$color5" }),
|
|
3566
3556
|
sheetContent,
|
|
3567
|
-
inputPlaceholder ? /* @__PURE__ */
|
|
3557
|
+
inputPlaceholder ? /* @__PURE__ */ jsx59(Button12, { size: "$5", backgroundColor: "$color9", color: "$color1", onPress: onInputPress, children: inputPlaceholder }) : null
|
|
3568
3558
|
] }) : null
|
|
3569
3559
|
] });
|
|
3570
3560
|
}
|
|
3571
3561
|
|
|
3572
3562
|
// src/patterns/FinanceDashboard.tsx
|
|
3573
3563
|
import { SizableText as SizableText50, XStack as XStack43, YStack as YStack48 } from "tamagui";
|
|
3574
|
-
import { jsx as
|
|
3564
|
+
import { jsx as jsx60, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
3575
3565
|
function FinanceDashboard({
|
|
3576
3566
|
title = "Overview",
|
|
3577
3567
|
balanceLabel = "Available balance",
|
|
@@ -3583,25 +3573,25 @@ function FinanceDashboard({
|
|
|
3583
3573
|
chartSlot,
|
|
3584
3574
|
topRight
|
|
3585
3575
|
}) {
|
|
3586
|
-
return /* @__PURE__ */
|
|
3587
|
-
/* @__PURE__ */
|
|
3588
|
-
/* @__PURE__ */
|
|
3589
|
-
/* @__PURE__ */
|
|
3590
|
-
rangeLabel ? /* @__PURE__ */
|
|
3576
|
+
return /* @__PURE__ */ jsxs50(YStack48, { flex: 1, backgroundColor: "$background", padding: "$4", gap: "$4", children: [
|
|
3577
|
+
/* @__PURE__ */ jsxs50(XStack43, { justifyContent: "space-between", alignItems: "center", paddingTop: "$4", children: [
|
|
3578
|
+
/* @__PURE__ */ jsxs50(YStack48, { gap: "$1", children: [
|
|
3579
|
+
/* @__PURE__ */ jsx60(SizableText50, { size: "$6", fontWeight: "700", children: title }),
|
|
3580
|
+
rangeLabel ? /* @__PURE__ */ jsx60(SizableText50, { size: "$2", color: "$color9", children: rangeLabel }) : null
|
|
3591
3581
|
] }),
|
|
3592
3582
|
topRight
|
|
3593
3583
|
] }),
|
|
3594
|
-
/* @__PURE__ */
|
|
3595
|
-
/* @__PURE__ */
|
|
3596
|
-
/* @__PURE__ */
|
|
3597
|
-
chartSlot ? /* @__PURE__ */
|
|
3584
|
+
/* @__PURE__ */ jsxs50(YStack48, { backgroundColor: "$color1", borderRadius: "$7", padding: "$4", gap: "$2", borderWidth: 1, borderColor: "$color4", children: [
|
|
3585
|
+
/* @__PURE__ */ jsx60(SizableText50, { size: "$3", color: "$color10", children: balanceLabel }),
|
|
3586
|
+
/* @__PURE__ */ jsx60(SizableText50, { size: "$11", fontWeight: "800", children: balance }),
|
|
3587
|
+
chartSlot ? /* @__PURE__ */ jsx60(YStack48, { marginTop: "$2", children: chartSlot }) : null
|
|
3598
3588
|
] }),
|
|
3599
|
-
metrics.length > 0 ? /* @__PURE__ */
|
|
3600
|
-
/* @__PURE__ */
|
|
3601
|
-
/* @__PURE__ */
|
|
3602
|
-
metric.change ? /* @__PURE__ */
|
|
3589
|
+
metrics.length > 0 ? /* @__PURE__ */ jsx60(XStack43, { gap: "$3", flexWrap: "wrap", children: metrics.map((metric) => /* @__PURE__ */ jsxs50(YStack48, { flex: 1, minWidth: 120, backgroundColor: "$color1", borderRadius: "$6", padding: "$3", gap: "$1", borderWidth: 1, borderColor: "$color4", children: [
|
|
3590
|
+
/* @__PURE__ */ jsx60(SizableText50, { size: "$2", color: "$color10", children: metric.label }),
|
|
3591
|
+
/* @__PURE__ */ jsx60(SizableText50, { size: "$7", fontWeight: "800", children: metric.value }),
|
|
3592
|
+
metric.change ? /* @__PURE__ */ jsx60(SizableText50, { size: "$2", color: "$color9", children: metric.change }) : null
|
|
3603
3593
|
] }, metric.label)) }) : null,
|
|
3604
|
-
quickActions.length > 0 ? /* @__PURE__ */
|
|
3594
|
+
quickActions.length > 0 ? /* @__PURE__ */ jsx60(XStack43, { gap: "$3", flexWrap: "wrap", children: quickActions.map((action) => /* @__PURE__ */ jsxs50(
|
|
3605
3595
|
YStack48,
|
|
3606
3596
|
{
|
|
3607
3597
|
flex: 1,
|
|
@@ -3616,15 +3606,15 @@ function FinanceDashboard({
|
|
|
3616
3606
|
borderColor: "$color4",
|
|
3617
3607
|
onPress: action.onPress,
|
|
3618
3608
|
children: [
|
|
3619
|
-
/* @__PURE__ */
|
|
3620
|
-
/* @__PURE__ */
|
|
3609
|
+
/* @__PURE__ */ jsx60(YStack48, { width: 36, height: 36, borderRadius: "$10", backgroundColor: "$color3", alignItems: "center", justifyContent: "center", children: action.icon ?? /* @__PURE__ */ jsx60(SizableText50, { size: "$4", children: "\u2022" }) }),
|
|
3610
|
+
/* @__PURE__ */ jsx60(SizableText50, { size: "$2", textAlign: "center", children: action.label })
|
|
3621
3611
|
]
|
|
3622
3612
|
},
|
|
3623
3613
|
action.id
|
|
3624
3614
|
)) }) : null,
|
|
3625
|
-
/* @__PURE__ */
|
|
3626
|
-
/* @__PURE__ */
|
|
3627
|
-
/* @__PURE__ */
|
|
3615
|
+
/* @__PURE__ */ jsx60(YStack48, { gap: "$3", children: sections.map((section, index) => /* @__PURE__ */ jsxs50(YStack48, { backgroundColor: "$color1", borderRadius: "$6", borderWidth: 1, borderColor: "$color4", overflow: "hidden", children: [
|
|
3616
|
+
/* @__PURE__ */ jsx60(XStack43, { padding: "$3", justifyContent: "space-between", alignItems: "center", children: /* @__PURE__ */ jsx60(SizableText50, { size: "$4", fontWeight: "700", children: section.title }) }),
|
|
3617
|
+
/* @__PURE__ */ jsx60(YStack48, { children: section.rows.map((row, index2) => /* @__PURE__ */ jsxs50(
|
|
3628
3618
|
XStack43,
|
|
3629
3619
|
{
|
|
3630
3620
|
padding: "$3",
|
|
@@ -3633,12 +3623,12 @@ function FinanceDashboard({
|
|
|
3633
3623
|
borderTopWidth: index2 === 0 ? 0 : 1,
|
|
3634
3624
|
borderTopColor: "$color4",
|
|
3635
3625
|
children: [
|
|
3636
|
-
row.leading ? /* @__PURE__ */
|
|
3637
|
-
/* @__PURE__ */
|
|
3638
|
-
/* @__PURE__ */
|
|
3639
|
-
row.subtitle ? /* @__PURE__ */
|
|
3626
|
+
row.leading ? /* @__PURE__ */ jsx60(YStack48, { width: 32, height: 32, borderRadius: "$8", backgroundColor: "$color3", alignItems: "center", justifyContent: "center", children: row.leading }) : null,
|
|
3627
|
+
/* @__PURE__ */ jsxs50(YStack48, { flex: 1, children: [
|
|
3628
|
+
/* @__PURE__ */ jsx60(SizableText50, { size: "$3", fontWeight: "600", children: row.title }),
|
|
3629
|
+
row.subtitle ? /* @__PURE__ */ jsx60(SizableText50, { size: "$2", color: "$color10", children: row.subtitle }) : null
|
|
3640
3630
|
] }),
|
|
3641
|
-
row.value ? /* @__PURE__ */
|
|
3631
|
+
row.value ? /* @__PURE__ */ jsx60(SizableText50, { size: "$3", color: "$color11", children: row.value }) : null
|
|
3642
3632
|
]
|
|
3643
3633
|
},
|
|
3644
3634
|
row.id
|
|
@@ -3654,6 +3644,7 @@ export {
|
|
|
3654
3644
|
Anchor,
|
|
3655
3645
|
AnimatePresence,
|
|
3656
3646
|
AppHeader,
|
|
3647
|
+
AppleLogo,
|
|
3657
3648
|
Article,
|
|
3658
3649
|
Aside,
|
|
3659
3650
|
Avatar2 as Avatar,
|
|
@@ -3681,7 +3672,7 @@ export {
|
|
|
3681
3672
|
Checkbox,
|
|
3682
3673
|
Chip,
|
|
3683
3674
|
ChipGroup,
|
|
3684
|
-
|
|
3675
|
+
Circle12 as Circle,
|
|
3685
3676
|
ConfirmDialog,
|
|
3686
3677
|
Container,
|
|
3687
3678
|
CountdownBanner,
|
|
@@ -3700,7 +3691,9 @@ export {
|
|
|
3700
3691
|
Form,
|
|
3701
3692
|
FormField,
|
|
3702
3693
|
Frame,
|
|
3694
|
+
GitHubLogo,
|
|
3703
3695
|
GlassCard,
|
|
3696
|
+
GoogleLogo,
|
|
3704
3697
|
Grid,
|
|
3705
3698
|
Group,
|
|
3706
3699
|
H12 as H1,
|
|
@@ -3722,6 +3715,7 @@ export {
|
|
|
3722
3715
|
LoginScreen,
|
|
3723
3716
|
Main,
|
|
3724
3717
|
MediaCard,
|
|
3718
|
+
MicrosoftLogo,
|
|
3725
3719
|
Nav,
|
|
3726
3720
|
NotificationBanner,
|
|
3727
3721
|
OTPInput,
|
|
@@ -3746,7 +3740,7 @@ export {
|
|
|
3746
3740
|
RadioGroup,
|
|
3747
3741
|
SafeArea,
|
|
3748
3742
|
ScreenLayout,
|
|
3749
|
-
|
|
3743
|
+
ScrollView6 as ScrollView,
|
|
3750
3744
|
SearchBar,
|
|
3751
3745
|
Section,
|
|
3752
3746
|
Select2 as Select,
|