@blinkdotnew/mobile-ui 2.0.0-alpha.15 → 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 +722 -684
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +719 -695
- 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" }) });
|
|
1058
|
-
}
|
|
1059
|
-
function TestimonialCard({ testimonial }) {
|
|
1060
|
-
return /* @__PURE__ */ jsxs13(YStack14, { flex: 1, minWidth: 220, backgroundColor: "$color2", borderRadius: "$6", padding: "$3", gap: "$2", children: [
|
|
1061
|
-
/* @__PURE__ */ jsxs13(SizableText17, { size: "$3", color: "$color11", children: [
|
|
1062
|
-
"\u201C",
|
|
1063
|
-
testimonial.quote,
|
|
1064
|
-
"\u201D"
|
|
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
|
-
] });
|
|
1079
|
+
function normalizeFeature(f) {
|
|
1080
|
+
return typeof f === "string" ? { title: f } : f;
|
|
1071
1081
|
}
|
|
1072
|
-
function
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
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__ */
|
|
1182
|
-
] }),
|
|
1183
|
-
countdownMinutes && !countdown.expired && /* @__PURE__ */ jsxs13(XStack10, { justifyContent: "center", padding: "$2", backgroundColor: "$red3", borderRadius: "$4", alignSelf: "center", paddingHorizontal: "$4", gap: "$2", alignItems: "center", children: [
|
|
1184
|
-
/* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: "$red9", fontWeight: "600", children: "Offer ends in" }),
|
|
1185
|
-
/* @__PURE__ */ jsx20(SizableText17, { size: "$5", color: "$red9", fontWeight: "800", fontFamily: "$mono", children: countdown.display })
|
|
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 })
|
|
1186
1214
|
] }),
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
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,19 +1585,27 @@ 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
|
|
1588
|
+
import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1589
|
+
var BRAND_ICON_MAP = {
|
|
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" }) })
|
|
1595
|
+
};
|
|
1567
1596
|
var BRAND_STYLES = {
|
|
1568
|
-
google: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12"
|
|
1569
|
-
apple: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1"
|
|
1570
|
-
github: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1"
|
|
1571
|
-
microsoft: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12"
|
|
1572
|
-
custom: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12"
|
|
1597
|
+
google: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" },
|
|
1598
|
+
apple: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1" },
|
|
1599
|
+
github: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1" },
|
|
1600
|
+
microsoft: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" },
|
|
1601
|
+
custom: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" }
|
|
1573
1602
|
};
|
|
1574
|
-
function ProviderBadge({ provider
|
|
1603
|
+
function ProviderBadge({ provider }) {
|
|
1575
1604
|
const brand = provider.brand ?? "custom";
|
|
1576
|
-
|
|
1577
|
-
|
|
1578
|
-
|
|
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 });
|
|
1579
1609
|
}
|
|
1580
1610
|
function LoginScreen({
|
|
1581
1611
|
variant = "default",
|
|
@@ -1600,9 +1630,9 @@ function LoginScreen({
|
|
|
1600
1630
|
const [password, setPassword] = useState7("");
|
|
1601
1631
|
const isEditorial = variant === "editorial";
|
|
1602
1632
|
const isCenteredCard = variant === "centered-card";
|
|
1603
|
-
return /* @__PURE__ */
|
|
1604
|
-
backgroundSlot ? /* @__PURE__ */
|
|
1605
|
-
/* @__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(
|
|
1606
1636
|
YStack22,
|
|
1607
1637
|
{
|
|
1608
1638
|
gap: "$5",
|
|
@@ -1612,13 +1642,13 @@ function LoginScreen({
|
|
|
1612
1642
|
borderWidth: isCenteredCard ? 1 : 0,
|
|
1613
1643
|
borderColor: isCenteredCard ? "$color4" : void 0,
|
|
1614
1644
|
children: [
|
|
1615
|
-
/* @__PURE__ */
|
|
1616
|
-
logo && /* @__PURE__ */
|
|
1617
|
-
hero ? /* @__PURE__ */
|
|
1618
|
-
/* @__PURE__ */
|
|
1619
|
-
/* @__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 })
|
|
1620
1650
|
] }),
|
|
1621
|
-
providers.length > 0 && /* @__PURE__ */
|
|
1651
|
+
providers.length > 0 && /* @__PURE__ */ jsx29(YStack22, { gap: "$2.5", children: providers.map((p) => /* @__PURE__ */ jsx29(
|
|
1622
1652
|
Button6,
|
|
1623
1653
|
{
|
|
1624
1654
|
size: "$5",
|
|
@@ -1630,25 +1660,25 @@ function LoginScreen({
|
|
|
1630
1660
|
onPress: () => onProviderPress?.(p.id),
|
|
1631
1661
|
hoverStyle: { backgroundColor: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].backgroundColor : "$color2" },
|
|
1632
1662
|
pressStyle: { backgroundColor: "$color3" },
|
|
1633
|
-
children: /* @__PURE__ */
|
|
1634
|
-
/* @__PURE__ */
|
|
1635
|
-
/* @__PURE__ */
|
|
1636
|
-
/* @__PURE__ */
|
|
1637
|
-
/* @__PURE__ */
|
|
1638
|
-
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
|
|
1639
1669
|
] })
|
|
1640
1670
|
] }),
|
|
1641
|
-
/* @__PURE__ */
|
|
1671
|
+
/* @__PURE__ */ jsx29(SizableText25, { size: "$4", color: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].textColor : "$color9", children: "\u2192" })
|
|
1642
1672
|
] })
|
|
1643
1673
|
},
|
|
1644
1674
|
p.id
|
|
1645
1675
|
)) }),
|
|
1646
|
-
showEmailForm && providers.length > 0 && /* @__PURE__ */
|
|
1647
|
-
showEmailForm && /* @__PURE__ */
|
|
1648
|
-
/* @__PURE__ */
|
|
1649
|
-
/* @__PURE__ */
|
|
1650
|
-
onForgotPassword && /* @__PURE__ */
|
|
1651
|
-
/* @__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(
|
|
1652
1682
|
Button6,
|
|
1653
1683
|
{
|
|
1654
1684
|
size: "$5",
|
|
@@ -1659,18 +1689,18 @@ function LoginScreen({
|
|
|
1659
1689
|
onPress: () => onEmailSubmit?.(email, password),
|
|
1660
1690
|
hoverStyle: { backgroundColor: "$color10" },
|
|
1661
1691
|
pressStyle: { backgroundColor: "$color8" },
|
|
1662
|
-
icon: loading ? /* @__PURE__ */
|
|
1692
|
+
icon: loading ? /* @__PURE__ */ jsx29(Spinner, { size: "small", color: "$color1" }) : void 0,
|
|
1663
1693
|
children: "Sign In"
|
|
1664
1694
|
}
|
|
1665
1695
|
),
|
|
1666
|
-
onCreateAccount && /* @__PURE__ */
|
|
1696
|
+
onCreateAccount && /* @__PURE__ */ jsx29(Button6, { size: "$3", chromeless: true, onPress: onCreateAccount, children: /* @__PURE__ */ jsx29(SizableText25, { size: "$3", color: "$color9", children: "Create Account" }) })
|
|
1667
1697
|
] }),
|
|
1668
|
-
(onTerms || onPrivacy) && /* @__PURE__ */
|
|
1698
|
+
(onTerms || onPrivacy) && /* @__PURE__ */ jsx29(YStack22, { paddingTop: "$2", alignItems: "center", children: /* @__PURE__ */ jsxs22(SizableText25, { size: "$2", color: "$color8", textAlign: "center", children: [
|
|
1669
1699
|
"By continuing you agree to our",
|
|
1670
1700
|
" ",
|
|
1671
|
-
onTerms && /* @__PURE__ */
|
|
1701
|
+
onTerms && /* @__PURE__ */ jsx29(SizableText25, { size: "$2", color: "$color9", onPress: onTerms, children: "Terms of Service" }),
|
|
1672
1702
|
onTerms && onPrivacy && " & ",
|
|
1673
|
-
onPrivacy && /* @__PURE__ */
|
|
1703
|
+
onPrivacy && /* @__PURE__ */ jsx29(SizableText25, { size: "$2", color: "$color9", onPress: onPrivacy, children: "Privacy Policy" })
|
|
1674
1704
|
] }) }),
|
|
1675
1705
|
footerSlot
|
|
1676
1706
|
]
|
|
@@ -1681,11 +1711,11 @@ function LoginScreen({
|
|
|
1681
1711
|
|
|
1682
1712
|
// src/patterns/TabBar.tsx
|
|
1683
1713
|
import { SizableText as SizableText26, XStack as XStack18, YStack as YStack23 } from "tamagui";
|
|
1684
|
-
import { jsx as
|
|
1714
|
+
import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1685
1715
|
function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
1686
|
-
return /* @__PURE__ */
|
|
1716
|
+
return /* @__PURE__ */ jsx30(XStack18, { height: 56, borderTopWidth: 1, borderTopColor: "$borderColor", backgroundColor: "$background", paddingBottom: "$2", children: tabs.map((tab) => {
|
|
1687
1717
|
const active = tab.id === activeTab;
|
|
1688
|
-
return /* @__PURE__ */
|
|
1718
|
+
return /* @__PURE__ */ jsxs23(
|
|
1689
1719
|
YStack23,
|
|
1690
1720
|
{
|
|
1691
1721
|
flex: 1,
|
|
@@ -1695,8 +1725,8 @@ function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
|
1695
1725
|
pressStyle: { opacity: 0.6 },
|
|
1696
1726
|
onPress: () => onTabPress(tab.id),
|
|
1697
1727
|
children: [
|
|
1698
|
-
tab.icon && /* @__PURE__ */
|
|
1699
|
-
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 })
|
|
1700
1730
|
]
|
|
1701
1731
|
},
|
|
1702
1732
|
tab.id
|
|
@@ -1706,11 +1736,11 @@ function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
|
1706
1736
|
|
|
1707
1737
|
// src/patterns/SearchBar.tsx
|
|
1708
1738
|
import { Input as Input2, SizableText as SizableText27, XStack as XStack19 } from "tamagui";
|
|
1709
|
-
import { jsx as
|
|
1739
|
+
import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
1710
1740
|
function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter, onCancel, autoFocus }) {
|
|
1711
|
-
return /* @__PURE__ */
|
|
1712
|
-
/* @__PURE__ */
|
|
1713
|
-
/* @__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(
|
|
1714
1744
|
Input2,
|
|
1715
1745
|
{
|
|
1716
1746
|
flex: 1,
|
|
@@ -1724,14 +1754,14 @@ function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter
|
|
|
1724
1754
|
autoFocus
|
|
1725
1755
|
}
|
|
1726
1756
|
),
|
|
1727
|
-
onFilter && /* @__PURE__ */
|
|
1728
|
-
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" })
|
|
1729
1759
|
] });
|
|
1730
1760
|
}
|
|
1731
1761
|
|
|
1732
1762
|
// src/patterns/FloatingActionButton.tsx
|
|
1733
1763
|
import { SizableText as SizableText28, XStack as XStack20 } from "tamagui";
|
|
1734
|
-
import { jsx as
|
|
1764
|
+
import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
1735
1765
|
var sizes = { sm: 44, md: 56, lg: 68 };
|
|
1736
1766
|
var positionStyles = {
|
|
1737
1767
|
"bottom-right": { right: 20 },
|
|
@@ -1740,7 +1770,7 @@ var positionStyles = {
|
|
|
1740
1770
|
};
|
|
1741
1771
|
function FloatingActionButton({ icon, label, onPress, position = "bottom-right", size = "md" }) {
|
|
1742
1772
|
const dim = sizes[size];
|
|
1743
|
-
return /* @__PURE__ */
|
|
1773
|
+
return /* @__PURE__ */ jsxs25(
|
|
1744
1774
|
XStack20,
|
|
1745
1775
|
{
|
|
1746
1776
|
position: "absolute",
|
|
@@ -1758,8 +1788,8 @@ function FloatingActionButton({ icon, label, onPress, position = "bottom-right",
|
|
|
1758
1788
|
pressStyle: { scale: 0.95, opacity: 0.9 },
|
|
1759
1789
|
onPress,
|
|
1760
1790
|
children: [
|
|
1761
|
-
icon && /* @__PURE__ */
|
|
1762
|
-
label && /* @__PURE__ */
|
|
1791
|
+
icon && /* @__PURE__ */ jsx32(SizableText28, { color: "$color1", children: icon }),
|
|
1792
|
+
label && /* @__PURE__ */ jsx32(SizableText28, { color: "$color1", size: "$4", fontWeight: "600", children: label })
|
|
1763
1793
|
]
|
|
1764
1794
|
}
|
|
1765
1795
|
);
|
|
@@ -1767,9 +1797,9 @@ function FloatingActionButton({ icon, label, onPress, position = "bottom-right",
|
|
|
1767
1797
|
|
|
1768
1798
|
// src/patterns/ActionSheet.tsx
|
|
1769
1799
|
import { Sheet as Sheet2, SizableText as SizableText29, XStack as XStack21, YStack as YStack24 } from "tamagui";
|
|
1770
|
-
import { jsx as
|
|
1800
|
+
import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
1771
1801
|
function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel = "Cancel", zIndex = 1e5 }) {
|
|
1772
|
-
return /* @__PURE__ */
|
|
1802
|
+
return /* @__PURE__ */ jsxs26(
|
|
1773
1803
|
Sheet2,
|
|
1774
1804
|
{
|
|
1775
1805
|
modal: true,
|
|
@@ -1781,11 +1811,11 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1781
1811
|
zIndex,
|
|
1782
1812
|
animation: "medium",
|
|
1783
1813
|
children: [
|
|
1784
|
-
/* @__PURE__ */
|
|
1785
|
-
/* @__PURE__ */
|
|
1786
|
-
/* @__PURE__ */
|
|
1787
|
-
title && /* @__PURE__ */
|
|
1788
|
-
/* @__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(
|
|
1789
1819
|
XStack21,
|
|
1790
1820
|
{
|
|
1791
1821
|
height: 52,
|
|
@@ -1799,8 +1829,8 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1799
1829
|
onOpenChange(false);
|
|
1800
1830
|
},
|
|
1801
1831
|
children: [
|
|
1802
|
-
item.icon && /* @__PURE__ */
|
|
1803
|
-
/* @__PURE__ */
|
|
1832
|
+
item.icon && /* @__PURE__ */ jsx33(SizableText29, { size: "$5", children: item.icon }),
|
|
1833
|
+
/* @__PURE__ */ jsx33(
|
|
1804
1834
|
SizableText29,
|
|
1805
1835
|
{
|
|
1806
1836
|
size: "$5",
|
|
@@ -1814,7 +1844,7 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1814
1844
|
},
|
|
1815
1845
|
item.id
|
|
1816
1846
|
)) }),
|
|
1817
|
-
/* @__PURE__ */
|
|
1847
|
+
/* @__PURE__ */ jsx33(YStack24, { paddingHorizontal: "$3", paddingVertical: "$3", borderTopWidth: 1, borderTopColor: "$borderColor", marginTop: "$2", children: /* @__PURE__ */ jsx33(
|
|
1818
1848
|
XStack21,
|
|
1819
1849
|
{
|
|
1820
1850
|
height: 48,
|
|
@@ -1823,7 +1853,7 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1823
1853
|
borderRadius: "$4",
|
|
1824
1854
|
pressStyle: { backgroundColor: "$color3" },
|
|
1825
1855
|
onPress: () => onOpenChange(false),
|
|
1826
|
-
children: /* @__PURE__ */
|
|
1856
|
+
children: /* @__PURE__ */ jsx33(SizableText29, { size: "$5", fontWeight: "600", color: "$color9", children: cancelLabel })
|
|
1827
1857
|
}
|
|
1828
1858
|
) })
|
|
1829
1859
|
] })
|
|
@@ -1834,18 +1864,18 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1834
1864
|
|
|
1835
1865
|
// src/patterns/Skeleton.tsx
|
|
1836
1866
|
import { YStack as YStack25 } from "tamagui";
|
|
1837
|
-
import { jsx as
|
|
1867
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
1838
1868
|
function Skeleton({ width, height, borderRadius, variant = "rectangular" }) {
|
|
1839
1869
|
const size = variant === "circular" ? height ?? 40 : height;
|
|
1840
1870
|
const w = variant === "text" ? width ?? "100%" : width;
|
|
1841
1871
|
const h = variant === "text" ? height ?? 16 : size;
|
|
1842
1872
|
const r = variant === "circular" ? 9999 : borderRadius ?? 8;
|
|
1843
|
-
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 } });
|
|
1844
1874
|
}
|
|
1845
1875
|
|
|
1846
1876
|
// src/patterns/NotificationBanner.tsx
|
|
1847
1877
|
import { SizableText as SizableText30, XStack as XStack22, YStack as YStack26 } from "tamagui";
|
|
1848
|
-
import { jsx as
|
|
1878
|
+
import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
1849
1879
|
var variantColors = {
|
|
1850
1880
|
info: { bg: "$blue3", text: "$blue11" },
|
|
1851
1881
|
success: { bg: "$green3", text: "$green11" },
|
|
@@ -1854,7 +1884,7 @@ var variantColors = {
|
|
|
1854
1884
|
};
|
|
1855
1885
|
function NotificationBanner({ title, message, variant = "info", onPress, onDismiss, icon }) {
|
|
1856
1886
|
const colors = variantColors[variant];
|
|
1857
|
-
return /* @__PURE__ */
|
|
1887
|
+
return /* @__PURE__ */ jsxs27(
|
|
1858
1888
|
XStack22,
|
|
1859
1889
|
{
|
|
1860
1890
|
backgroundColor: colors.bg,
|
|
@@ -1865,12 +1895,12 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
|
|
|
1865
1895
|
onPress,
|
|
1866
1896
|
pressStyle: onPress ? { opacity: 0.8 } : void 0,
|
|
1867
1897
|
children: [
|
|
1868
|
-
icon && /* @__PURE__ */
|
|
1869
|
-
/* @__PURE__ */
|
|
1870
|
-
/* @__PURE__ */
|
|
1871
|
-
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 })
|
|
1872
1902
|
] }),
|
|
1873
|
-
onDismiss && /* @__PURE__ */
|
|
1903
|
+
onDismiss && /* @__PURE__ */ jsx35(SizableText30, { size: "$3", color: colors.text, opacity: 0.6, onPress: onDismiss, padding: "$1", children: "\u2715" })
|
|
1874
1904
|
]
|
|
1875
1905
|
}
|
|
1876
1906
|
);
|
|
@@ -1878,35 +1908,35 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
|
|
|
1878
1908
|
|
|
1879
1909
|
// src/patterns/ProgressSteps.tsx
|
|
1880
1910
|
import { Circle as Circle7, SizableText as SizableText31, XStack as XStack23, YStack as YStack27 } from "tamagui";
|
|
1881
|
-
import { jsx as
|
|
1911
|
+
import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
1882
1912
|
function ProgressSteps({ steps, currentStep, variant = "dots" }) {
|
|
1883
1913
|
if (variant === "bar") {
|
|
1884
1914
|
const progress = steps.length > 1 ? currentStep / (steps.length - 1) * 100 : 100;
|
|
1885
|
-
return /* @__PURE__ */
|
|
1886
|
-
/* @__PURE__ */
|
|
1887
|
-
/* @__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)) })
|
|
1888
1918
|
] });
|
|
1889
1919
|
}
|
|
1890
|
-
return /* @__PURE__ */
|
|
1891
|
-
/* @__PURE__ */
|
|
1892
|
-
/* @__PURE__ */
|
|
1893
|
-
/* @__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 })
|
|
1894
1924
|
] }),
|
|
1895
|
-
i < steps.length - 1 && /* @__PURE__ */
|
|
1925
|
+
i < steps.length - 1 && /* @__PURE__ */ jsx36(YStack27, { height: 2, width: 32, backgroundColor: i < currentStep ? "$color9" : "$color4", marginBottom: "$4" })
|
|
1896
1926
|
] }, i)) });
|
|
1897
1927
|
}
|
|
1898
1928
|
|
|
1899
1929
|
// src/patterns/SwipeableRow.tsx
|
|
1900
1930
|
import { useState as useState8 } from "react";
|
|
1901
1931
|
import { Button as Button7, SizableText as SizableText32, XStack as XStack24, YStack as YStack28 } from "tamagui";
|
|
1902
|
-
import { Fragment as Fragment3, jsx as
|
|
1932
|
+
import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
1903
1933
|
function SwipeableRow({ children, leftActions, rightActions }) {
|
|
1904
1934
|
const [showActions, setShowActions] = useState8(false);
|
|
1905
1935
|
const actions = [...leftActions ?? [], ...rightActions ?? []];
|
|
1906
|
-
if (actions.length === 0) return /* @__PURE__ */
|
|
1907
|
-
return /* @__PURE__ */
|
|
1908
|
-
/* @__PURE__ */
|
|
1909
|
-
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(
|
|
1910
1940
|
Button7,
|
|
1911
1941
|
{
|
|
1912
1942
|
flex: 1,
|
|
@@ -1917,7 +1947,7 @@ function SwipeableRow({ children, leftActions, rightActions }) {
|
|
|
1917
1947
|
action.onPress();
|
|
1918
1948
|
setShowActions(false);
|
|
1919
1949
|
},
|
|
1920
|
-
children: /* @__PURE__ */
|
|
1950
|
+
children: /* @__PURE__ */ jsx37(SizableText32, { size: "$2", fontWeight: "600", color: "white", children: action.label })
|
|
1921
1951
|
},
|
|
1922
1952
|
action.id
|
|
1923
1953
|
)) })
|
|
@@ -1927,9 +1957,9 @@ function SwipeableRow({ children, leftActions, rightActions }) {
|
|
|
1927
1957
|
// src/patterns/MediaCard.tsx
|
|
1928
1958
|
import { Image as Image5, SizableText as SizableText33, XStack as XStack25, YStack as YStack29 } from "tamagui";
|
|
1929
1959
|
import { LinearGradient } from "tamagui/linear-gradient";
|
|
1930
|
-
import { jsx as
|
|
1960
|
+
import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
1931
1961
|
function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio = 16 / 9, onPress, badge }) {
|
|
1932
|
-
return /* @__PURE__ */
|
|
1962
|
+
return /* @__PURE__ */ jsx38(
|
|
1933
1963
|
YStack29,
|
|
1934
1964
|
{
|
|
1935
1965
|
borderRadius: "$4",
|
|
@@ -1937,9 +1967,9 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
1937
1967
|
onPress,
|
|
1938
1968
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
1939
1969
|
animation: "quick",
|
|
1940
|
-
children: /* @__PURE__ */
|
|
1941
|
-
/* @__PURE__ */
|
|
1942
|
-
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(
|
|
1943
1973
|
LinearGradient,
|
|
1944
1974
|
{
|
|
1945
1975
|
colors: ["transparent", "rgba(0,0,0,0.7)"],
|
|
@@ -1952,8 +1982,8 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
1952
1982
|
height: "60%"
|
|
1953
1983
|
}
|
|
1954
1984
|
),
|
|
1955
|
-
overlay === "dark" && /* @__PURE__ */
|
|
1956
|
-
badge && /* @__PURE__ */
|
|
1985
|
+
overlay === "dark" && /* @__PURE__ */ jsx38(YStack29, { position: "absolute", fullscreen: true, backgroundColor: "rgba(0,0,0,0.4)" }),
|
|
1986
|
+
badge && /* @__PURE__ */ jsx38(
|
|
1957
1987
|
XStack25,
|
|
1958
1988
|
{
|
|
1959
1989
|
position: "absolute",
|
|
@@ -1963,12 +1993,12 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
1963
1993
|
paddingHorizontal: "$2",
|
|
1964
1994
|
paddingVertical: "$1",
|
|
1965
1995
|
borderRadius: "$2",
|
|
1966
|
-
children: /* @__PURE__ */
|
|
1996
|
+
children: /* @__PURE__ */ jsx38(SizableText33, { size: "$1", fontWeight: "600", color: "$color1", children: badge })
|
|
1967
1997
|
}
|
|
1968
1998
|
),
|
|
1969
|
-
/* @__PURE__ */
|
|
1970
|
-
/* @__PURE__ */
|
|
1971
|
-
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 })
|
|
1972
2002
|
] })
|
|
1973
2003
|
] })
|
|
1974
2004
|
}
|
|
@@ -1979,13 +2009,13 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
1979
2009
|
import { Children as Children2, useState as useState9 } from "react";
|
|
1980
2010
|
import { Circle as Circle8, XStack as XStack26, YStack as YStack30 } from "tamagui";
|
|
1981
2011
|
import { ScrollView as ScrollView4 } from "react-native";
|
|
1982
|
-
import { jsx as
|
|
2012
|
+
import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
1983
2013
|
function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false }) {
|
|
1984
2014
|
const [activeIndex, setActiveIndex] = useState9(0);
|
|
1985
2015
|
const count = Children2.count(children);
|
|
1986
2016
|
const gapPx = gap === "$2" ? 8 : gap === "$3" ? 12 : 16;
|
|
1987
|
-
return /* @__PURE__ */
|
|
1988
|
-
/* @__PURE__ */
|
|
2017
|
+
return /* @__PURE__ */ jsxs31(YStack30, { gap: "$3", children: [
|
|
2018
|
+
/* @__PURE__ */ jsx39(
|
|
1989
2019
|
ScrollView4,
|
|
1990
2020
|
{
|
|
1991
2021
|
horizontal: true,
|
|
@@ -1999,50 +2029,50 @@ function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false
|
|
|
1999
2029
|
children
|
|
2000
2030
|
}
|
|
2001
2031
|
),
|
|
2002
|
-
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)) })
|
|
2003
2033
|
] });
|
|
2004
2034
|
}
|
|
2005
2035
|
|
|
2006
2036
|
// src/patterns/PullToRefresh.tsx
|
|
2007
2037
|
import { YStack as YStack31 } from "tamagui";
|
|
2008
2038
|
import { RefreshControl, ScrollView as ScrollView5 } from "react-native";
|
|
2009
|
-
import { jsx as
|
|
2039
|
+
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
2010
2040
|
function PullToRefresh({ children, onRefresh, refreshing = false }) {
|
|
2011
|
-
return /* @__PURE__ */
|
|
2041
|
+
return /* @__PURE__ */ jsx40(
|
|
2012
2042
|
ScrollView5,
|
|
2013
2043
|
{
|
|
2014
2044
|
contentContainerStyle: { flexGrow: 1 },
|
|
2015
|
-
refreshControl: /* @__PURE__ */
|
|
2016
|
-
children: /* @__PURE__ */
|
|
2045
|
+
refreshControl: /* @__PURE__ */ jsx40(RefreshControl, { refreshing, onRefresh }),
|
|
2046
|
+
children: /* @__PURE__ */ jsx40(YStack31, { flex: 1, children })
|
|
2017
2047
|
}
|
|
2018
2048
|
);
|
|
2019
2049
|
}
|
|
2020
2050
|
|
|
2021
2051
|
// src/patterns/ProductCard.tsx
|
|
2022
2052
|
import { Button as Button8, Image as Image6, SizableText as SizableText34, XStack as XStack27, YStack as YStack32 } from "tamagui";
|
|
2023
|
-
import { jsx as
|
|
2053
|
+
import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
2024
2054
|
function Stars({ rating = 0 }) {
|
|
2025
|
-
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)) });
|
|
2026
2056
|
}
|
|
2027
2057
|
function CardContent2({ title, price, originalPrice, rating, reviewCount, onAddToCart }) {
|
|
2028
|
-
return /* @__PURE__ */
|
|
2029
|
-
/* @__PURE__ */
|
|
2030
|
-
/* @__PURE__ */
|
|
2031
|
-
rating !== void 0 && /* @__PURE__ */
|
|
2032
|
-
/* @__PURE__ */
|
|
2033
|
-
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: [
|
|
2034
2064
|
"(",
|
|
2035
2065
|
reviewCount,
|
|
2036
2066
|
")"
|
|
2037
2067
|
] })
|
|
2038
2068
|
] })
|
|
2039
2069
|
] }),
|
|
2040
|
-
/* @__PURE__ */
|
|
2041
|
-
/* @__PURE__ */
|
|
2042
|
-
/* @__PURE__ */
|
|
2043
|
-
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 })
|
|
2044
2074
|
] }),
|
|
2045
|
-
onAddToCart && /* @__PURE__ */
|
|
2075
|
+
onAddToCart && /* @__PURE__ */ jsx41(
|
|
2046
2076
|
Button8,
|
|
2047
2077
|
{
|
|
2048
2078
|
size: "$3",
|
|
@@ -2064,7 +2094,7 @@ function CardContent2({ title, price, originalPrice, rating, reviewCount, onAddT
|
|
|
2064
2094
|
function ProductCard({ image, title, price, originalPrice, rating, reviewCount, badge, onPress, onAddToCart, variant = "vertical" }) {
|
|
2065
2095
|
const isHorizontal = variant === "horizontal";
|
|
2066
2096
|
const Wrapper = isHorizontal ? XStack27 : YStack32;
|
|
2067
|
-
return /* @__PURE__ */
|
|
2097
|
+
return /* @__PURE__ */ jsxs32(
|
|
2068
2098
|
Wrapper,
|
|
2069
2099
|
{
|
|
2070
2100
|
backgroundColor: "$color1",
|
|
@@ -2077,9 +2107,9 @@ function ProductCard({ image, title, price, originalPrice, rating, reviewCount,
|
|
|
2077
2107
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
2078
2108
|
...isHorizontal ? { height: 140 } : {},
|
|
2079
2109
|
children: [
|
|
2080
|
-
/* @__PURE__ */
|
|
2081
|
-
/* @__PURE__ */
|
|
2082
|
-
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(
|
|
2083
2113
|
XStack27,
|
|
2084
2114
|
{
|
|
2085
2115
|
position: "absolute",
|
|
@@ -2089,23 +2119,23 @@ function ProductCard({ image, title, price, originalPrice, rating, reviewCount,
|
|
|
2089
2119
|
paddingHorizontal: "$2",
|
|
2090
2120
|
paddingVertical: "$1",
|
|
2091
2121
|
borderRadius: "$10",
|
|
2092
|
-
children: /* @__PURE__ */
|
|
2122
|
+
children: /* @__PURE__ */ jsx41(SizableText34, { size: "$1", fontWeight: "700", color: "white", children: badge })
|
|
2093
2123
|
}
|
|
2094
2124
|
)
|
|
2095
2125
|
] }),
|
|
2096
|
-
/* @__PURE__ */
|
|
2126
|
+
/* @__PURE__ */ jsx41(YStack32, { flex: 1, padding: "$3", children: /* @__PURE__ */ jsx41(CardContent2, { ...{ title, price, originalPrice, rating, reviewCount, onAddToCart } }) })
|
|
2097
2127
|
]
|
|
2098
2128
|
}
|
|
2099
2129
|
);
|
|
2100
2130
|
}
|
|
2101
2131
|
|
|
2102
2132
|
// src/patterns/PricingTable.tsx
|
|
2103
|
-
import { Button as Button9,
|
|
2104
|
-
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";
|
|
2105
2135
|
function BillingToggle({ annual, onToggle }) {
|
|
2106
|
-
return /* @__PURE__ */
|
|
2136
|
+
return /* @__PURE__ */ jsx42(XStack28, { alignSelf: "center", backgroundColor: "$color3", borderRadius: "$10", padding: "$1", gap: "$0.5", children: ["Monthly", "Annual"].map((label, i) => {
|
|
2107
2137
|
const active = i === 1 ? annual : !annual;
|
|
2108
|
-
return /* @__PURE__ */
|
|
2138
|
+
return /* @__PURE__ */ jsx42(
|
|
2109
2139
|
XStack28,
|
|
2110
2140
|
{
|
|
2111
2141
|
paddingHorizontal: "$4",
|
|
@@ -2115,96 +2145,86 @@ function BillingToggle({ annual, onToggle }) {
|
|
|
2115
2145
|
onPress: () => onToggle(i === 1),
|
|
2116
2146
|
pressStyle: { opacity: 0.8 },
|
|
2117
2147
|
animation: "quick",
|
|
2118
|
-
children: /* @__PURE__ */
|
|
2148
|
+
children: /* @__PURE__ */ jsx42(SizableText35, { size: "$3", fontWeight: "600", color: active ? "$color1" : "$color10", children: label })
|
|
2119
2149
|
},
|
|
2120
2150
|
label
|
|
2121
2151
|
);
|
|
2122
2152
|
}) });
|
|
2123
2153
|
}
|
|
2124
|
-
function
|
|
2125
|
-
return /* @__PURE__ */
|
|
2126
|
-
|
|
2154
|
+
function PlanRow2({ plan, selected, onSelect }) {
|
|
2155
|
+
return /* @__PURE__ */ jsxs33(
|
|
2156
|
+
XStack28,
|
|
2127
2157
|
{
|
|
2128
|
-
flex: 1,
|
|
2129
|
-
minWidth: 260,
|
|
2130
2158
|
padding: "$4",
|
|
2131
|
-
borderRadius: "$
|
|
2132
|
-
gap: "$3",
|
|
2159
|
+
borderRadius: "$6",
|
|
2133
2160
|
borderWidth: 2,
|
|
2134
|
-
borderColor: selected ? "$color9" :
|
|
2135
|
-
backgroundColor:
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
animation: "quick",
|
|
2161
|
+
borderColor: selected ? "$color9" : "$color4",
|
|
2162
|
+
backgroundColor: selected ? "$color2" : "$color1",
|
|
2163
|
+
alignItems: "center",
|
|
2164
|
+
gap: "$3",
|
|
2139
2165
|
onPress: onSelect,
|
|
2166
|
+
pressStyle: { scale: 0.98, opacity: 0.9 },
|
|
2167
|
+
animation: "quick",
|
|
2168
|
+
cursor: "pointer",
|
|
2169
|
+
position: "relative",
|
|
2140
2170
|
children: [
|
|
2141
|
-
plan.popular && /* @__PURE__ */
|
|
2142
|
-
|
|
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,
|
|
2143
2174
|
{
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
backgroundColor: "$color9",
|
|
2148
|
-
|
|
2149
|
-
paddingVertical: "$1",
|
|
2150
|
-
borderRadius: "$10",
|
|
2151
|
-
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" })
|
|
2152
2180
|
}
|
|
2153
2181
|
),
|
|
2154
|
-
/* @__PURE__ */
|
|
2155
|
-
/* @__PURE__ */
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
"/",
|
|
2161
|
-
plan.period
|
|
2162
|
-
] })
|
|
2163
|
-
] })
|
|
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 })
|
|
2164
2188
|
] }),
|
|
2165
|
-
/* @__PURE__ */
|
|
2166
|
-
/* @__PURE__ */ jsx41(SizableText35, { size: "$3", color: f.included ? "$green9" : "$color6", children: f.included ? "\u2713" : "\u2717" }),
|
|
2167
|
-
/* @__PURE__ */ jsx41(SizableText35, { size: "$3", color: f.included ? "$color11" : "$color8", flex: 1, children: f.label })
|
|
2168
|
-
] }, i)) }),
|
|
2169
|
-
/* @__PURE__ */ jsx41(
|
|
2170
|
-
Button9,
|
|
2171
|
-
{
|
|
2172
|
-
size: "$4",
|
|
2173
|
-
borderRadius: "$10",
|
|
2174
|
-
fontWeight: "700",
|
|
2175
|
-
animation: "quick",
|
|
2176
|
-
backgroundColor: selected || plan.popular ? "$color9" : "transparent",
|
|
2177
|
-
color: selected || plan.popular ? "$color1" : "$color11",
|
|
2178
|
-
borderWidth: selected || plan.popular ? 0 : 1,
|
|
2179
|
-
borderColor: "$color7",
|
|
2180
|
-
onPress: onSelect,
|
|
2181
|
-
pressStyle: { scale: 0.97, opacity: 0.9 },
|
|
2182
|
-
children: plan.cta ?? "Get Started"
|
|
2183
|
-
}
|
|
2184
|
-
)
|
|
2189
|
+
/* @__PURE__ */ jsx42(SizableText35, { size: "$5", fontWeight: "800", children: plan.price })
|
|
2185
2190
|
]
|
|
2186
2191
|
}
|
|
2187
2192
|
);
|
|
2188
2193
|
}
|
|
2189
|
-
function
|
|
2190
|
-
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2194
|
-
|
|
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,
|
|
2195
2208
|
{
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
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"
|
|
2208
2228
|
}
|
|
2209
2229
|
)
|
|
2210
2230
|
] });
|
|
@@ -2213,7 +2233,7 @@ function PricingTable({ plans, selectedPlan, onSelectPlan, annual = false, onTog
|
|
|
2213
2233
|
// src/patterns/CountdownBanner.tsx
|
|
2214
2234
|
import { useState as useState10, useEffect as useEffect4, useRef, useCallback as useCallback2 } from "react";
|
|
2215
2235
|
import { SizableText as SizableText36, XStack as XStack29, YStack as YStack34 } from "tamagui";
|
|
2216
|
-
import { jsx as
|
|
2236
|
+
import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
2217
2237
|
function useCountdown2(endTime, minutes, onExpire) {
|
|
2218
2238
|
const getRemaining = useCallback2(() => {
|
|
2219
2239
|
if (endTime) return Math.max(0, Math.floor((endTime.getTime() - Date.now()) / 1e3));
|
|
@@ -2247,74 +2267,74 @@ function useCountdown2(endTime, minutes, onExpire) {
|
|
|
2247
2267
|
return { display, expired: seconds <= 0 };
|
|
2248
2268
|
}
|
|
2249
2269
|
function TimeBox({ value }) {
|
|
2250
|
-
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 }) });
|
|
2251
2271
|
}
|
|
2252
2272
|
function CountdownBanner({ endTime, minutes, label = "Offer ends in", onExpire, variant = "banner" }) {
|
|
2253
2273
|
const { display, expired } = useCountdown2(endTime, minutes, onExpire);
|
|
2254
2274
|
if (expired) return null;
|
|
2255
2275
|
const parts = display.split(":");
|
|
2256
2276
|
if (variant === "badge") {
|
|
2257
|
-
return /* @__PURE__ */
|
|
2258
|
-
/* @__PURE__ */
|
|
2259
|
-
/* @__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 })
|
|
2260
2280
|
] });
|
|
2261
2281
|
}
|
|
2262
2282
|
if (variant === "compact") {
|
|
2263
|
-
return /* @__PURE__ */
|
|
2264
|
-
/* @__PURE__ */
|
|
2265
|
-
/* @__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 })
|
|
2266
2286
|
] });
|
|
2267
2287
|
}
|
|
2268
|
-
return /* @__PURE__ */
|
|
2269
|
-
/* @__PURE__ */
|
|
2270
|
-
/* @__PURE__ */
|
|
2271
|
-
i > 0 && /* @__PURE__ */
|
|
2272
|
-
/* @__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 })
|
|
2273
2293
|
] }, i)) })
|
|
2274
2294
|
] });
|
|
2275
2295
|
}
|
|
2276
2296
|
|
|
2277
2297
|
// src/patterns/TestimonialCard.tsx
|
|
2278
2298
|
import { Image as Image7, SizableText as SizableText37, XStack as XStack30, YStack as YStack35 } from "tamagui";
|
|
2279
|
-
import { jsx as
|
|
2299
|
+
import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
2280
2300
|
function Stars2({ count = 0 }) {
|
|
2281
2301
|
if (!count) return null;
|
|
2282
|
-
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)) });
|
|
2283
2303
|
}
|
|
2284
2304
|
function AuthorRow({ author, role, avatar }) {
|
|
2285
|
-
return /* @__PURE__ */
|
|
2286
|
-
avatar && /* @__PURE__ */
|
|
2287
|
-
/* @__PURE__ */
|
|
2288
|
-
/* @__PURE__ */
|
|
2289
|
-
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 })
|
|
2290
2310
|
] })
|
|
2291
2311
|
] });
|
|
2292
2312
|
}
|
|
2293
2313
|
function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card" }) {
|
|
2294
2314
|
if (variant === "minimal") {
|
|
2295
|
-
return /* @__PURE__ */
|
|
2296
|
-
/* @__PURE__ */
|
|
2297
|
-
/* @__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: [
|
|
2298
2318
|
'"',
|
|
2299
2319
|
quote,
|
|
2300
2320
|
'"'
|
|
2301
2321
|
] }),
|
|
2302
|
-
/* @__PURE__ */
|
|
2322
|
+
/* @__PURE__ */ jsx44(AuthorRow, { author, role, avatar })
|
|
2303
2323
|
] });
|
|
2304
2324
|
}
|
|
2305
2325
|
if (variant === "featured") {
|
|
2306
|
-
return /* @__PURE__ */
|
|
2307
|
-
/* @__PURE__ */
|
|
2308
|
-
/* @__PURE__ */
|
|
2309
|
-
/* @__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: [
|
|
2310
2330
|
'"',
|
|
2311
2331
|
quote,
|
|
2312
2332
|
'"'
|
|
2313
2333
|
] }),
|
|
2314
|
-
/* @__PURE__ */
|
|
2334
|
+
/* @__PURE__ */ jsx44(AuthorRow, { author, role, avatar })
|
|
2315
2335
|
] });
|
|
2316
2336
|
}
|
|
2317
|
-
return /* @__PURE__ */
|
|
2337
|
+
return /* @__PURE__ */ jsxs35(
|
|
2318
2338
|
YStack35,
|
|
2319
2339
|
{
|
|
2320
2340
|
backgroundColor: "$color1",
|
|
@@ -2324,13 +2344,13 @@ function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card
|
|
|
2324
2344
|
borderColor: "$color4",
|
|
2325
2345
|
gap: "$3",
|
|
2326
2346
|
children: [
|
|
2327
|
-
/* @__PURE__ */
|
|
2328
|
-
/* @__PURE__ */
|
|
2347
|
+
/* @__PURE__ */ jsx44(Stars2, { count: rating }),
|
|
2348
|
+
/* @__PURE__ */ jsxs35(SizableText37, { size: "$4", color: "$color11", fontStyle: "italic", lineHeight: 24, children: [
|
|
2329
2349
|
'"',
|
|
2330
2350
|
quote,
|
|
2331
2351
|
'"'
|
|
2332
2352
|
] }),
|
|
2333
|
-
/* @__PURE__ */
|
|
2353
|
+
/* @__PURE__ */ jsx44(AuthorRow, { author, role, avatar })
|
|
2334
2354
|
]
|
|
2335
2355
|
}
|
|
2336
2356
|
);
|
|
@@ -2338,7 +2358,7 @@ function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card
|
|
|
2338
2358
|
|
|
2339
2359
|
// src/patterns/ConfirmDialog.tsx
|
|
2340
2360
|
import { AlertDialog as AlertDialog2, Button as Button10, SizableText as SizableText38, XStack as XStack31, YStack as YStack36 } from "tamagui";
|
|
2341
|
-
import { jsx as
|
|
2361
|
+
import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
2342
2362
|
function ConfirmDialog({
|
|
2343
2363
|
open,
|
|
2344
2364
|
onOpenChange,
|
|
@@ -2359,8 +2379,8 @@ function ConfirmDialog({
|
|
|
2359
2379
|
onConfirm?.();
|
|
2360
2380
|
onOpenChange(false);
|
|
2361
2381
|
};
|
|
2362
|
-
return /* @__PURE__ */
|
|
2363
|
-
/* @__PURE__ */
|
|
2382
|
+
return /* @__PURE__ */ jsx45(AlertDialog2, { open, onOpenChange, children: /* @__PURE__ */ jsxs36(AlertDialog2.Portal, { children: [
|
|
2383
|
+
/* @__PURE__ */ jsx45(
|
|
2364
2384
|
AlertDialog2.Overlay,
|
|
2365
2385
|
{
|
|
2366
2386
|
opacity: 0.5,
|
|
@@ -2370,7 +2390,7 @@ function ConfirmDialog({
|
|
|
2370
2390
|
},
|
|
2371
2391
|
"overlay"
|
|
2372
2392
|
),
|
|
2373
|
-
/* @__PURE__ */
|
|
2393
|
+
/* @__PURE__ */ jsx45(
|
|
2374
2394
|
AlertDialog2.Content,
|
|
2375
2395
|
{
|
|
2376
2396
|
bordered: true,
|
|
@@ -2384,11 +2404,11 @@ function ConfirmDialog({
|
|
|
2384
2404
|
scale: 1,
|
|
2385
2405
|
opacity: 1,
|
|
2386
2406
|
animation: "quick",
|
|
2387
|
-
children: /* @__PURE__ */
|
|
2388
|
-
icon && /* @__PURE__ */
|
|
2389
|
-
/* @__PURE__ */
|
|
2390
|
-
/* @__PURE__ */
|
|
2391
|
-
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(
|
|
2392
2412
|
AlertDialog2.Description,
|
|
2393
2413
|
{
|
|
2394
2414
|
size: "$3",
|
|
@@ -2398,8 +2418,8 @@ function ConfirmDialog({
|
|
|
2398
2418
|
}
|
|
2399
2419
|
)
|
|
2400
2420
|
] }),
|
|
2401
|
-
/* @__PURE__ */
|
|
2402
|
-
/* @__PURE__ */
|
|
2421
|
+
/* @__PURE__ */ jsxs36(XStack31, { gap: "$3", justifyContent: "flex-end", children: [
|
|
2422
|
+
/* @__PURE__ */ jsx45(
|
|
2403
2423
|
Button10,
|
|
2404
2424
|
{
|
|
2405
2425
|
flex: 1,
|
|
@@ -2410,10 +2430,10 @@ function ConfirmDialog({
|
|
|
2410
2430
|
onPress: handleCancel,
|
|
2411
2431
|
pressStyle: { opacity: 0.7 },
|
|
2412
2432
|
animation: "quick",
|
|
2413
|
-
children: /* @__PURE__ */
|
|
2433
|
+
children: /* @__PURE__ */ jsx45(SizableText38, { fontWeight: "600", children: cancelLabel })
|
|
2414
2434
|
}
|
|
2415
2435
|
),
|
|
2416
|
-
/* @__PURE__ */
|
|
2436
|
+
/* @__PURE__ */ jsx45(
|
|
2417
2437
|
Button10,
|
|
2418
2438
|
{
|
|
2419
2439
|
flex: 1,
|
|
@@ -2423,7 +2443,7 @@ function ConfirmDialog({
|
|
|
2423
2443
|
onPress: handleConfirm,
|
|
2424
2444
|
pressStyle: { backgroundColor: destructive ? "$red8" : "$color8", scale: 0.97 },
|
|
2425
2445
|
animation: "quick",
|
|
2426
|
-
children: /* @__PURE__ */
|
|
2446
|
+
children: /* @__PURE__ */ jsx45(SizableText38, { fontWeight: "600", color: "white", children: confirmLabel })
|
|
2427
2447
|
}
|
|
2428
2448
|
)
|
|
2429
2449
|
] })
|
|
@@ -2437,7 +2457,7 @@ function ConfirmDialog({
|
|
|
2437
2457
|
// src/patterns/Chip.tsx
|
|
2438
2458
|
import { useCallback as useCallback3 } from "react";
|
|
2439
2459
|
import { SizableText as SizableText39, XStack as XStack32 } from "tamagui";
|
|
2440
|
-
import { jsx as
|
|
2460
|
+
import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
2441
2461
|
var sizes2 = { sm: { h: 28, px: "$2", text: "$2" }, md: { h: 34, px: "$3", text: "$3" }, lg: { h: 42, px: "$4", text: "$4" } };
|
|
2442
2462
|
function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "md", icon, color }) {
|
|
2443
2463
|
const s = sizes2[size];
|
|
@@ -2446,7 +2466,7 @@ function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "
|
|
|
2446
2466
|
const bg = active ? color ?? "$color9" : filled ? "$color3" : "transparent";
|
|
2447
2467
|
const border = active ? color ?? "$color9" : "$color6";
|
|
2448
2468
|
const fg = active ? "$color1" : "$color11";
|
|
2449
|
-
return /* @__PURE__ */
|
|
2469
|
+
return /* @__PURE__ */ jsxs37(
|
|
2450
2470
|
XStack32,
|
|
2451
2471
|
{
|
|
2452
2472
|
height: s.h,
|
|
@@ -2462,10 +2482,10 @@ function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "
|
|
|
2462
2482
|
onPress,
|
|
2463
2483
|
cursor: "pointer",
|
|
2464
2484
|
children: [
|
|
2465
|
-
active && /* @__PURE__ */
|
|
2466
|
-
icon && /* @__PURE__ */
|
|
2467
|
-
/* @__PURE__ */
|
|
2468
|
-
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(
|
|
2469
2489
|
SizableText39,
|
|
2470
2490
|
{
|
|
2471
2491
|
size: "$2",
|
|
@@ -2494,7 +2514,7 @@ function ChipGroup({ chips, selected = [], onSelectionChange, multiSelect = true
|
|
|
2494
2514
|
onSelectionChange(isSelected ? [] : [id]);
|
|
2495
2515
|
}
|
|
2496
2516
|
}, [selected, onSelectionChange, multiSelect]);
|
|
2497
|
-
return /* @__PURE__ */
|
|
2517
|
+
return /* @__PURE__ */ jsx46(XStack32, { flexWrap: "wrap", gap: "$2", children: chips.map((chip) => /* @__PURE__ */ jsx46(
|
|
2498
2518
|
Chip,
|
|
2499
2519
|
{
|
|
2500
2520
|
label: chip.label,
|
|
@@ -2512,7 +2532,7 @@ function ChipGroup({ chips, selected = [], onSelectionChange, multiSelect = true
|
|
|
2512
2532
|
import { useCallback as useCallback4, useRef as useRef2, useState as useState11 } from "react";
|
|
2513
2533
|
import { Platform } from "react-native";
|
|
2514
2534
|
import { Input as Input3, SizableText as SizableText40, XStack as XStack33, YStack as YStack37 } from "tamagui";
|
|
2515
|
-
import { jsx as
|
|
2535
|
+
import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
2516
2536
|
function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFocus, secureEntry }) {
|
|
2517
2537
|
const inputRef = useRef2(null);
|
|
2518
2538
|
const [focused, setFocused] = useState11(false);
|
|
@@ -2525,11 +2545,11 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2525
2545
|
const focusInput = useCallback4(() => {
|
|
2526
2546
|
inputRef.current?.focus();
|
|
2527
2547
|
}, []);
|
|
2528
|
-
return /* @__PURE__ */
|
|
2529
|
-
/* @__PURE__ */
|
|
2548
|
+
return /* @__PURE__ */ jsxs38(YStack37, { position: "relative", children: [
|
|
2549
|
+
/* @__PURE__ */ jsx47(XStack33, { gap: "$2", justifyContent: "center", children: Array.from({ length }, (_, i) => {
|
|
2530
2550
|
const char = digits[i]?.trim();
|
|
2531
2551
|
const isCursor = focused && value.length === i;
|
|
2532
|
-
return /* @__PURE__ */
|
|
2552
|
+
return /* @__PURE__ */ jsxs38(
|
|
2533
2553
|
YStack37,
|
|
2534
2554
|
{
|
|
2535
2555
|
width: 48,
|
|
@@ -2543,8 +2563,8 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2543
2563
|
animation: "quick",
|
|
2544
2564
|
pointerEvents: "none",
|
|
2545
2565
|
children: [
|
|
2546
|
-
/* @__PURE__ */
|
|
2547
|
-
isCursor && /* @__PURE__ */
|
|
2566
|
+
/* @__PURE__ */ jsx47(SizableText40, { size: "$7", fontWeight: "600", color: "$color12", children: char ? secureEntry ? "\u25CF" : char : "" }),
|
|
2567
|
+
isCursor && /* @__PURE__ */ jsx47(
|
|
2548
2568
|
YStack37,
|
|
2549
2569
|
{
|
|
2550
2570
|
position: "absolute",
|
|
@@ -2560,7 +2580,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2560
2580
|
i
|
|
2561
2581
|
);
|
|
2562
2582
|
}) }),
|
|
2563
|
-
Platform.OS === "web" ? /* @__PURE__ */
|
|
2583
|
+
Platform.OS === "web" ? /* @__PURE__ */ jsx47(
|
|
2564
2584
|
"input",
|
|
2565
2585
|
{
|
|
2566
2586
|
ref: inputRef,
|
|
@@ -2588,7 +2608,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2588
2608
|
cursor: "pointer"
|
|
2589
2609
|
}
|
|
2590
2610
|
}
|
|
2591
|
-
) : /* @__PURE__ */
|
|
2611
|
+
) : /* @__PURE__ */ jsx47(
|
|
2592
2612
|
Input3,
|
|
2593
2613
|
{
|
|
2594
2614
|
ref: inputRef,
|
|
@@ -2614,7 +2634,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2614
2634
|
// src/patterns/PasswordInput.tsx
|
|
2615
2635
|
import { useState as useState12, useCallback as useCallback5 } from "react";
|
|
2616
2636
|
import { Input as Input4, SizableText as SizableText41, XStack as XStack34, YStack as YStack38 } from "tamagui";
|
|
2617
|
-
import { jsx as
|
|
2637
|
+
import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
2618
2638
|
function getStrength(pw) {
|
|
2619
2639
|
if (!pw) return { label: "", color: "$color6", width: "0%" };
|
|
2620
2640
|
const score = [pw.length >= 8, /[A-Z]/.test(pw), /[0-9]/.test(pw), /[^A-Za-z0-9]/.test(pw)].filter(Boolean).length;
|
|
@@ -2626,9 +2646,9 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2626
2646
|
const [visible, setVisible] = useState12(false);
|
|
2627
2647
|
const toggle = useCallback5(() => setVisible((v) => !v), []);
|
|
2628
2648
|
const strength = getStrength(value);
|
|
2629
|
-
return /* @__PURE__ */
|
|
2630
|
-
label && /* @__PURE__ */
|
|
2631
|
-
/* @__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(
|
|
2632
2652
|
XStack34,
|
|
2633
2653
|
{
|
|
2634
2654
|
borderWidth: 1,
|
|
@@ -2639,7 +2659,7 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2639
2659
|
paddingRight: "$2",
|
|
2640
2660
|
focusStyle: { borderColor: "$color9" },
|
|
2641
2661
|
children: [
|
|
2642
|
-
/* @__PURE__ */
|
|
2662
|
+
/* @__PURE__ */ jsx48(
|
|
2643
2663
|
Input4,
|
|
2644
2664
|
{
|
|
2645
2665
|
flex: 1,
|
|
@@ -2653,7 +2673,7 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2653
2673
|
borderWidth: 0
|
|
2654
2674
|
}
|
|
2655
2675
|
),
|
|
2656
|
-
/* @__PURE__ */
|
|
2676
|
+
/* @__PURE__ */ jsx48(
|
|
2657
2677
|
SizableText41,
|
|
2658
2678
|
{
|
|
2659
2679
|
size: "$4",
|
|
@@ -2668,24 +2688,24 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2668
2688
|
]
|
|
2669
2689
|
}
|
|
2670
2690
|
),
|
|
2671
|
-
strengthIndicator && value.length > 0 && /* @__PURE__ */
|
|
2672
|
-
/* @__PURE__ */
|
|
2673
|
-
/* @__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 })
|
|
2674
2694
|
] }),
|
|
2675
|
-
error && /* @__PURE__ */
|
|
2695
|
+
error && /* @__PURE__ */ jsx48(SizableText41, { size: "$2", color: "$red9", children: error })
|
|
2676
2696
|
] });
|
|
2677
2697
|
}
|
|
2678
2698
|
|
|
2679
2699
|
// src/patterns/AvatarGroup.tsx
|
|
2680
|
-
import { Circle as
|
|
2681
|
-
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";
|
|
2682
2702
|
function getInitials(name) {
|
|
2683
2703
|
if (!name) return "?";
|
|
2684
2704
|
return name.split(" ").map((p) => p[0]).join("").toUpperCase().slice(0, 2);
|
|
2685
2705
|
}
|
|
2686
2706
|
function AvatarItem({ uri, name, color, size }) {
|
|
2687
|
-
return /* @__PURE__ */
|
|
2688
|
-
|
|
2707
|
+
return /* @__PURE__ */ jsx49(
|
|
2708
|
+
Circle10,
|
|
2689
2709
|
{
|
|
2690
2710
|
size,
|
|
2691
2711
|
backgroundColor: color ?? "$color4",
|
|
@@ -2694,17 +2714,17 @@ function AvatarItem({ uri, name, color, size }) {
|
|
|
2694
2714
|
overflow: "hidden",
|
|
2695
2715
|
alignItems: "center",
|
|
2696
2716
|
justifyContent: "center",
|
|
2697
|
-
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) })
|
|
2698
2718
|
}
|
|
2699
2719
|
);
|
|
2700
2720
|
}
|
|
2701
2721
|
function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
2702
2722
|
const visible = avatars.slice(0, max);
|
|
2703
2723
|
const remaining = avatars.length - max;
|
|
2704
|
-
return /* @__PURE__ */
|
|
2705
|
-
visible.map((avatar, i) => /* @__PURE__ */
|
|
2706
|
-
remaining > 0 && /* @__PURE__ */
|
|
2707
|
-
|
|
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,
|
|
2708
2728
|
{
|
|
2709
2729
|
size,
|
|
2710
2730
|
backgroundColor: "$color6",
|
|
@@ -2712,7 +2732,7 @@ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
|
2712
2732
|
borderColor: "$background",
|
|
2713
2733
|
alignItems: "center",
|
|
2714
2734
|
justifyContent: "center",
|
|
2715
|
-
children: /* @__PURE__ */
|
|
2735
|
+
children: /* @__PURE__ */ jsxs40(SizableText42, { size: "$2", fontWeight: "600", color: "$color11", children: [
|
|
2716
2736
|
"+",
|
|
2717
2737
|
remaining
|
|
2718
2738
|
] })
|
|
@@ -2723,8 +2743,8 @@ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
|
2723
2743
|
|
|
2724
2744
|
// src/patterns/SwipeCards.tsx
|
|
2725
2745
|
import { useState as useState13, useCallback as useCallback6 } from "react";
|
|
2726
|
-
import { Circle as
|
|
2727
|
-
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";
|
|
2728
2748
|
var STACK_SIZE = 3;
|
|
2729
2749
|
var CARD_OFFSETS = [
|
|
2730
2750
|
{ scale: 1, y: 0, opacity: 1 },
|
|
@@ -2761,16 +2781,16 @@ function SwipeCards({
|
|
|
2761
2781
|
return () => clearTimeout(timer);
|
|
2762
2782
|
}, [isEmpty, index, items, onEmpty, onSwipeLeft, onSwipeRight]);
|
|
2763
2783
|
if (isEmpty) {
|
|
2764
|
-
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 }) });
|
|
2765
2785
|
}
|
|
2766
|
-
return /* @__PURE__ */
|
|
2767
|
-
/* @__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) => {
|
|
2768
2788
|
const stackIdx = Math.min(remaining.length, STACK_SIZE) - 1 - reverseIdx;
|
|
2769
2789
|
const isTop = stackIdx === 0;
|
|
2770
2790
|
const offset = CARD_OFFSETS[stackIdx] ?? CARD_OFFSETS[2];
|
|
2771
2791
|
const exitX = exitDir === "left" ? -400 : exitDir === "right" ? 400 : 0;
|
|
2772
2792
|
const exitRotate = exitDir === "left" ? "-15deg" : exitDir === "right" ? "15deg" : "0deg";
|
|
2773
|
-
return /* @__PURE__ */
|
|
2793
|
+
return /* @__PURE__ */ jsxs41(
|
|
2774
2794
|
YStack39,
|
|
2775
2795
|
{
|
|
2776
2796
|
position: "absolute",
|
|
@@ -2782,7 +2802,7 @@ function SwipeCards({
|
|
|
2782
2802
|
borderRadius: "$5",
|
|
2783
2803
|
overflow: "hidden",
|
|
2784
2804
|
backgroundColor: "$background",
|
|
2785
|
-
|
|
2805
|
+
elevation: isTop ? 4 : 1,
|
|
2786
2806
|
shadowColor: "$shadowColor",
|
|
2787
2807
|
shadowRadius: isTop ? 16 : 4,
|
|
2788
2808
|
scale: isTop && exitDir ? 1 : offset.scale,
|
|
@@ -2792,7 +2812,7 @@ function SwipeCards({
|
|
|
2792
2812
|
rotate: isTop ? exitRotate : "0deg",
|
|
2793
2813
|
children: [
|
|
2794
2814
|
renderCard(item),
|
|
2795
|
-
isTop && exitDir === "left" && /* @__PURE__ */
|
|
2815
|
+
isTop && exitDir === "left" && /* @__PURE__ */ jsx50(
|
|
2796
2816
|
YStack39,
|
|
2797
2817
|
{
|
|
2798
2818
|
position: "absolute",
|
|
@@ -2803,10 +2823,10 @@ function SwipeCards({
|
|
|
2803
2823
|
borderRadius: "$3",
|
|
2804
2824
|
padding: "$2",
|
|
2805
2825
|
rotate: "15deg",
|
|
2806
|
-
children: /* @__PURE__ */
|
|
2826
|
+
children: /* @__PURE__ */ jsx50(SizableText43, { size: "$7", fontWeight: "800", color: "$red10", children: leftLabel.toUpperCase() })
|
|
2807
2827
|
}
|
|
2808
2828
|
),
|
|
2809
|
-
isTop && exitDir === "right" && /* @__PURE__ */
|
|
2829
|
+
isTop && exitDir === "right" && /* @__PURE__ */ jsx50(
|
|
2810
2830
|
YStack39,
|
|
2811
2831
|
{
|
|
2812
2832
|
position: "absolute",
|
|
@@ -2817,7 +2837,7 @@ function SwipeCards({
|
|
|
2817
2837
|
borderRadius: "$3",
|
|
2818
2838
|
padding: "$2",
|
|
2819
2839
|
rotate: "-15deg",
|
|
2820
|
-
children: /* @__PURE__ */
|
|
2840
|
+
children: /* @__PURE__ */ jsx50(SizableText43, { size: "$7", fontWeight: "800", color: "$green10", children: rightLabel.toUpperCase() })
|
|
2821
2841
|
}
|
|
2822
2842
|
)
|
|
2823
2843
|
]
|
|
@@ -2825,9 +2845,9 @@ function SwipeCards({
|
|
|
2825
2845
|
item.id
|
|
2826
2846
|
);
|
|
2827
2847
|
}) }) }),
|
|
2828
|
-
/* @__PURE__ */
|
|
2829
|
-
/* @__PURE__ */
|
|
2830
|
-
|
|
2848
|
+
/* @__PURE__ */ jsxs41(XStack36, { justifyContent: "center", gap: "$6", paddingBottom: "$4", children: [
|
|
2849
|
+
/* @__PURE__ */ jsx50(
|
|
2850
|
+
Circle11,
|
|
2831
2851
|
{
|
|
2832
2852
|
size: 60,
|
|
2833
2853
|
backgroundColor: "$red3",
|
|
@@ -2838,11 +2858,11 @@ function SwipeCards({
|
|
|
2838
2858
|
onPress: () => handleSwipe("left"),
|
|
2839
2859
|
alignItems: "center",
|
|
2840
2860
|
justifyContent: "center",
|
|
2841
|
-
children: /* @__PURE__ */
|
|
2861
|
+
children: /* @__PURE__ */ jsx50(SizableText43, { size: "$6", color: "$red10", fontWeight: "700", children: "\u2715" })
|
|
2842
2862
|
}
|
|
2843
2863
|
),
|
|
2844
|
-
/* @__PURE__ */
|
|
2845
|
-
|
|
2864
|
+
/* @__PURE__ */ jsx50(
|
|
2865
|
+
Circle11,
|
|
2846
2866
|
{
|
|
2847
2867
|
size: 60,
|
|
2848
2868
|
backgroundColor: "$green3",
|
|
@@ -2853,7 +2873,7 @@ function SwipeCards({
|
|
|
2853
2873
|
onPress: () => handleSwipe("right"),
|
|
2854
2874
|
alignItems: "center",
|
|
2855
2875
|
justifyContent: "center",
|
|
2856
|
-
children: /* @__PURE__ */
|
|
2876
|
+
children: /* @__PURE__ */ jsx50(SizableText43, { size: "$6", color: "$green10", fontWeight: "700", children: "\u2665" })
|
|
2857
2877
|
}
|
|
2858
2878
|
)
|
|
2859
2879
|
] })
|
|
@@ -2862,7 +2882,7 @@ function SwipeCards({
|
|
|
2862
2882
|
|
|
2863
2883
|
// src/patterns/GlassCard.tsx
|
|
2864
2884
|
import { styled as styled12, YStack as YStack40 } from "tamagui";
|
|
2865
|
-
import { jsx as
|
|
2885
|
+
import { jsx as jsx51 } from "react/jsx-runtime";
|
|
2866
2886
|
var BLUR = { light: 8, medium: 16, heavy: 24 };
|
|
2867
2887
|
var TINT_BG = {
|
|
2868
2888
|
light: "rgba(255,255,255,0.15)",
|
|
@@ -2882,13 +2902,13 @@ function GlassCard({
|
|
|
2882
2902
|
elevated = false
|
|
2883
2903
|
}) {
|
|
2884
2904
|
const blur = BLUR[intensity];
|
|
2885
|
-
return /* @__PURE__ */
|
|
2905
|
+
return /* @__PURE__ */ jsx51(
|
|
2886
2906
|
GlassFrame,
|
|
2887
2907
|
{
|
|
2888
2908
|
borderRadius,
|
|
2889
2909
|
padding,
|
|
2890
2910
|
backgroundColor: TINT_BG[tint],
|
|
2891
|
-
|
|
2911
|
+
elevation: elevated ? 4 : 0,
|
|
2892
2912
|
shadowColor: elevated ? "$shadowColor" : void 0,
|
|
2893
2913
|
shadowRadius: elevated ? 20 : void 0,
|
|
2894
2914
|
shadowOpacity: elevated ? 0.3 : void 0,
|
|
@@ -2901,13 +2921,13 @@ function GlassCard({
|
|
|
2901
2921
|
// src/patterns/DataTable.tsx
|
|
2902
2922
|
import { useMemo, useState as useState14 } from "react";
|
|
2903
2923
|
import { SizableText as SizableText44, Separator as Separator5, XStack as XStack37, YStack as YStack41, useMedia, styled as styled13, View as View6 } from "tamagui";
|
|
2904
|
-
import { jsx as
|
|
2924
|
+
import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
2905
2925
|
var TH = styled13(View6, { padding: "$3", justifyContent: "center" });
|
|
2906
2926
|
var TD = styled13(View6, { padding: "$3", justifyContent: "center" });
|
|
2907
2927
|
function StatusBadge({ status }) {
|
|
2908
2928
|
const isActive = status.toLowerCase() === "active";
|
|
2909
|
-
return /* @__PURE__ */
|
|
2910
|
-
/* @__PURE__ */
|
|
2929
|
+
return /* @__PURE__ */ jsxs42(XStack37, { gap: "$2", alignItems: "center", children: [
|
|
2930
|
+
/* @__PURE__ */ jsx52(
|
|
2911
2931
|
View6,
|
|
2912
2932
|
{
|
|
2913
2933
|
width: 8,
|
|
@@ -2916,13 +2936,13 @@ function StatusBadge({ status }) {
|
|
|
2916
2936
|
backgroundColor: isActive ? "$green9" : "$orange9"
|
|
2917
2937
|
}
|
|
2918
2938
|
),
|
|
2919
|
-
/* @__PURE__ */
|
|
2939
|
+
/* @__PURE__ */ jsx52(SizableText44, { size: "$3", color: "$color11", children: status })
|
|
2920
2940
|
] });
|
|
2921
2941
|
}
|
|
2922
2942
|
function HeaderCell({ col, sort, onSort }) {
|
|
2923
2943
|
const active = sort?.key === col.key;
|
|
2924
2944
|
const indicator = active ? sort.dir === "asc" ? " \u25B2" : " \u25BC" : "";
|
|
2925
|
-
return /* @__PURE__ */
|
|
2945
|
+
return /* @__PURE__ */ jsx52(
|
|
2926
2946
|
TH,
|
|
2927
2947
|
{
|
|
2928
2948
|
width: col.width,
|
|
@@ -2931,7 +2951,7 @@ function HeaderCell({ col, sort, onSort }) {
|
|
|
2931
2951
|
cursor: col.sortable ? "pointer" : void 0,
|
|
2932
2952
|
onPress: col.sortable ? onSort : void 0,
|
|
2933
2953
|
pressStyle: col.sortable ? { opacity: 0.7 } : void 0,
|
|
2934
|
-
children: /* @__PURE__ */
|
|
2954
|
+
children: /* @__PURE__ */ jsxs42(
|
|
2935
2955
|
SizableText44,
|
|
2936
2956
|
{
|
|
2937
2957
|
size: "$2",
|
|
@@ -2950,7 +2970,7 @@ function HeaderCell({ col, sort, onSort }) {
|
|
|
2950
2970
|
);
|
|
2951
2971
|
}
|
|
2952
2972
|
function TableRow({ row, columns, onPress, odd }) {
|
|
2953
|
-
return /* @__PURE__ */
|
|
2973
|
+
return /* @__PURE__ */ jsx52(
|
|
2954
2974
|
XStack37,
|
|
2955
2975
|
{
|
|
2956
2976
|
backgroundColor: odd ? "$color2" : "transparent",
|
|
@@ -2961,12 +2981,12 @@ function TableRow({ row, columns, onPress, odd }) {
|
|
|
2961
2981
|
onPress: onPress ? () => onPress(row) : void 0,
|
|
2962
2982
|
pressStyle: onPress ? { opacity: 0.85 } : void 0,
|
|
2963
2983
|
animation: "quick",
|
|
2964
|
-
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))
|
|
2965
2985
|
}
|
|
2966
2986
|
);
|
|
2967
2987
|
}
|
|
2968
2988
|
function CardRow({ row, columns, onPress }) {
|
|
2969
|
-
return /* @__PURE__ */
|
|
2989
|
+
return /* @__PURE__ */ jsx52(
|
|
2970
2990
|
YStack41,
|
|
2971
2991
|
{
|
|
2972
2992
|
backgroundColor: "$color1",
|
|
@@ -2978,11 +2998,11 @@ function CardRow({ row, columns, onPress }) {
|
|
|
2978
2998
|
onPress: onPress ? () => onPress(row) : void 0,
|
|
2979
2999
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
2980
3000
|
animation: "quick",
|
|
2981
|
-
children: columns.map((col, i) => /* @__PURE__ */
|
|
2982
|
-
i > 0 && /* @__PURE__ */
|
|
2983
|
-
/* @__PURE__ */
|
|
2984
|
-
/* @__PURE__ */
|
|
2985
|
-
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] ?? "") })
|
|
2986
3006
|
] })
|
|
2987
3007
|
] }, col.key))
|
|
2988
3008
|
}
|
|
@@ -3002,21 +3022,21 @@ function DataTable({ columns, data, onRowPress, emptyMessage = "No data" }) {
|
|
|
3002
3022
|
}, [data, sort]);
|
|
3003
3023
|
const toggleSort = (key) => setSort((s) => s?.key === key ? { key, dir: s.dir === "asc" ? "desc" : "asc" } : { key, dir: "asc" });
|
|
3004
3024
|
if (!data.length) {
|
|
3005
|
-
return /* @__PURE__ */
|
|
3025
|
+
return /* @__PURE__ */ jsx52(YStack41, { padding: "$6", alignItems: "center", children: /* @__PURE__ */ jsx52(SizableText44, { size: "$4", color: "$color9", children: emptyMessage }) });
|
|
3006
3026
|
}
|
|
3007
3027
|
if (isSmall) {
|
|
3008
|
-
return /* @__PURE__ */
|
|
3028
|
+
return /* @__PURE__ */ jsx52(YStack41, { gap: "$3", children: sorted.map((row, i) => /* @__PURE__ */ jsx52(CardRow, { row, columns, onPress: onRowPress }, i)) });
|
|
3009
3029
|
}
|
|
3010
|
-
return /* @__PURE__ */
|
|
3011
|
-
/* @__PURE__ */
|
|
3012
|
-
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))
|
|
3013
3033
|
] });
|
|
3014
3034
|
}
|
|
3015
3035
|
|
|
3016
3036
|
// src/patterns/DatePicker.tsx
|
|
3017
3037
|
import { useCallback as useCallback7, useMemo as useMemo2, useState as useState15 } from "react";
|
|
3018
3038
|
import { SizableText as SizableText45, XStack as XStack38, YStack as YStack42 } from "tamagui";
|
|
3019
|
-
import { jsx as
|
|
3039
|
+
import { jsx as jsx53, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
3020
3040
|
var MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
|
3021
3041
|
var DAY_LABELS_SUN = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
3022
3042
|
var DAY_LABELS_MON = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
|
|
@@ -3041,7 +3061,7 @@ function buildGrid(year, month, startDay) {
|
|
|
3041
3061
|
return cells;
|
|
3042
3062
|
}
|
|
3043
3063
|
function NavButton({ label, onPress }) {
|
|
3044
|
-
return /* @__PURE__ */
|
|
3064
|
+
return /* @__PURE__ */ jsx53(
|
|
3045
3065
|
XStack38,
|
|
3046
3066
|
{
|
|
3047
3067
|
width: 36,
|
|
@@ -3054,7 +3074,7 @@ function NavButton({ label, onPress }) {
|
|
|
3054
3074
|
animation: "quick",
|
|
3055
3075
|
onPress,
|
|
3056
3076
|
cursor: "pointer",
|
|
3057
|
-
children: /* @__PURE__ */
|
|
3077
|
+
children: /* @__PURE__ */ jsx53(SizableText45, { size: "$5", color: "$color11", fontWeight: "600", children: label })
|
|
3058
3078
|
}
|
|
3059
3079
|
);
|
|
3060
3080
|
}
|
|
@@ -3083,23 +3103,23 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3083
3103
|
if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
|
|
3084
3104
|
return false;
|
|
3085
3105
|
}, [minDate, maxDate]);
|
|
3086
|
-
return /* @__PURE__ */
|
|
3087
|
-
/* @__PURE__ */
|
|
3088
|
-
/* @__PURE__ */
|
|
3089
|
-
/* @__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: [
|
|
3090
3110
|
MONTH_NAMES[viewMonth],
|
|
3091
3111
|
" ",
|
|
3092
3112
|
viewYear
|
|
3093
3113
|
] }),
|
|
3094
|
-
/* @__PURE__ */
|
|
3114
|
+
/* @__PURE__ */ jsx53(NavButton, { label: "\u203A", onPress: () => navigate(1) })
|
|
3095
3115
|
] }),
|
|
3096
|
-
/* @__PURE__ */
|
|
3097
|
-
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) => {
|
|
3098
3118
|
const date = new Date(cell.year, cell.month, cell.day);
|
|
3099
3119
|
const selected = sameDay(value, date);
|
|
3100
3120
|
const isToday = sameDay(today, date);
|
|
3101
3121
|
const disabled = cell.outside || isDisabled(date);
|
|
3102
|
-
return /* @__PURE__ */
|
|
3122
|
+
return /* @__PURE__ */ jsx53(YStack42, { flex: 1, alignItems: "center", paddingVertical: "$0.5", children: /* @__PURE__ */ jsx53(
|
|
3103
3123
|
XStack38,
|
|
3104
3124
|
{
|
|
3105
3125
|
width: 40,
|
|
@@ -3115,7 +3135,7 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3115
3135
|
opacity: disabled ? 0.35 : 1,
|
|
3116
3136
|
cursor: disabled ? "default" : "pointer",
|
|
3117
3137
|
onPress: disabled ? void 0 : () => onDateChange?.(date),
|
|
3118
|
-
children: /* @__PURE__ */
|
|
3138
|
+
children: /* @__PURE__ */ jsx53(
|
|
3119
3139
|
SizableText45,
|
|
3120
3140
|
{
|
|
3121
3141
|
size: "$3",
|
|
@@ -3132,7 +3152,7 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3132
3152
|
|
|
3133
3153
|
// src/patterns/EventCard.tsx
|
|
3134
3154
|
import { SizableText as SizableText46, Theme, XStack as XStack39, YStack as YStack43 } from "tamagui";
|
|
3135
|
-
import { jsx as
|
|
3155
|
+
import { jsx as jsx54, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
3136
3156
|
var THEME_MAP = {
|
|
3137
3157
|
purple: "purple",
|
|
3138
3158
|
green: "green",
|
|
@@ -3143,8 +3163,8 @@ var THEME_MAP = {
|
|
|
3143
3163
|
};
|
|
3144
3164
|
function ParticipantDots({ count, max }) {
|
|
3145
3165
|
const dots = Math.min(count, 5);
|
|
3146
|
-
return /* @__PURE__ */
|
|
3147
|
-
/* @__PURE__ */
|
|
3166
|
+
return /* @__PURE__ */ jsxs44(XStack39, { alignItems: "center", gap: "$1.5", children: [
|
|
3167
|
+
/* @__PURE__ */ jsx54(XStack39, { children: Array.from({ length: dots }, (_, i) => /* @__PURE__ */ jsx54(
|
|
3148
3168
|
YStack43,
|
|
3149
3169
|
{
|
|
3150
3170
|
width: 22,
|
|
@@ -3156,18 +3176,18 @@ function ParticipantDots({ count, max }) {
|
|
|
3156
3176
|
marginLeft: i > 0 ? -8 : 0,
|
|
3157
3177
|
alignItems: "center",
|
|
3158
3178
|
justifyContent: "center",
|
|
3159
|
-
children: /* @__PURE__ */
|
|
3179
|
+
children: /* @__PURE__ */ jsx54(SizableText46, { size: "$1", color: "$color1", fontWeight: "700", children: String.fromCharCode(65 + i) })
|
|
3160
3180
|
},
|
|
3161
3181
|
i
|
|
3162
3182
|
)) }),
|
|
3163
|
-
/* @__PURE__ */
|
|
3183
|
+
/* @__PURE__ */ jsxs44(SizableText46, { size: "$2", color: "$color11", fontWeight: "500", children: [
|
|
3164
3184
|
count,
|
|
3165
3185
|
max ? `/${max}` : ""
|
|
3166
3186
|
] })
|
|
3167
3187
|
] });
|
|
3168
3188
|
}
|
|
3169
3189
|
function CardInner({ title, subtitle, time, location, label, participants, maxParticipants, onPress, actions }) {
|
|
3170
|
-
return /* @__PURE__ */
|
|
3190
|
+
return /* @__PURE__ */ jsxs44(
|
|
3171
3191
|
YStack43,
|
|
3172
3192
|
{
|
|
3173
3193
|
backgroundColor: "$color4",
|
|
@@ -3181,22 +3201,22 @@ function CardInner({ title, subtitle, time, location, label, participants, maxPa
|
|
|
3181
3201
|
pressStyle: onPress ? { scale: 0.97, opacity: 0.9 } : void 0,
|
|
3182
3202
|
cursor: onPress ? "pointer" : void 0,
|
|
3183
3203
|
children: [
|
|
3184
|
-
/* @__PURE__ */
|
|
3185
|
-
/* @__PURE__ */
|
|
3186
|
-
/* @__PURE__ */
|
|
3187
|
-
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 })
|
|
3188
3208
|
] }),
|
|
3189
|
-
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 }) })
|
|
3190
3210
|
] }),
|
|
3191
|
-
/* @__PURE__ */
|
|
3192
|
-
location && /* @__PURE__ */
|
|
3193
|
-
/* @__PURE__ */
|
|
3194
|
-
/* @__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 })
|
|
3195
3215
|
] }),
|
|
3196
|
-
participants !== void 0 && /* @__PURE__ */
|
|
3216
|
+
participants !== void 0 && /* @__PURE__ */ jsx54(ParticipantDots, { count: participants, max: maxParticipants })
|
|
3197
3217
|
] }),
|
|
3198
|
-
(label || actions) && /* @__PURE__ */
|
|
3199
|
-
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, {}),
|
|
3200
3220
|
actions
|
|
3201
3221
|
] })
|
|
3202
3222
|
]
|
|
@@ -3204,27 +3224,27 @@ function CardInner({ title, subtitle, time, location, label, participants, maxPa
|
|
|
3204
3224
|
);
|
|
3205
3225
|
}
|
|
3206
3226
|
function EventCard({ theme = "purple", ...props }) {
|
|
3207
|
-
return /* @__PURE__ */
|
|
3227
|
+
return /* @__PURE__ */ jsx54(Theme, { name: THEME_MAP[theme], children: /* @__PURE__ */ jsx54(CardInner, { ...props }) });
|
|
3208
3228
|
}
|
|
3209
3229
|
|
|
3210
3230
|
// src/patterns/UserPreferences.tsx
|
|
3211
3231
|
import { Separator as Separator6, SizableText as SizableText47, Slider, Switch as Switch2, XStack as XStack40, YStack as YStack44 } from "tamagui";
|
|
3212
|
-
import { jsx as
|
|
3232
|
+
import { jsx as jsx55, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
3213
3233
|
function ItemLabel({ title, description, color }) {
|
|
3214
|
-
return /* @__PURE__ */
|
|
3215
|
-
/* @__PURE__ */
|
|
3216
|
-
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 })
|
|
3217
3237
|
] });
|
|
3218
3238
|
}
|
|
3219
3239
|
function ToggleRow({ item }) {
|
|
3220
|
-
return /* @__PURE__ */
|
|
3221
|
-
/* @__PURE__ */
|
|
3222
|
-
/* @__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" }) })
|
|
3223
3243
|
] });
|
|
3224
3244
|
}
|
|
3225
3245
|
function SelectRow({ item }) {
|
|
3226
3246
|
const current = item.options.find((o) => o.value === item.value);
|
|
3227
|
-
return /* @__PURE__ */
|
|
3247
|
+
return /* @__PURE__ */ jsxs45(
|
|
3228
3248
|
XStack40,
|
|
3229
3249
|
{
|
|
3230
3250
|
alignItems: "center",
|
|
@@ -3240,9 +3260,9 @@ function SelectRow({ item }) {
|
|
|
3240
3260
|
if (next) item.onValueChange(next.value);
|
|
3241
3261
|
},
|
|
3242
3262
|
children: [
|
|
3243
|
-
/* @__PURE__ */
|
|
3244
|
-
/* @__PURE__ */
|
|
3245
|
-
/* @__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" })
|
|
3246
3266
|
]
|
|
3247
3267
|
}
|
|
3248
3268
|
);
|
|
@@ -3250,12 +3270,12 @@ function SelectRow({ item }) {
|
|
|
3250
3270
|
function SliderRow({ item }) {
|
|
3251
3271
|
const min = item.min ?? 0;
|
|
3252
3272
|
const max = item.max ?? 100;
|
|
3253
|
-
return /* @__PURE__ */
|
|
3254
|
-
/* @__PURE__ */
|
|
3255
|
-
/* @__PURE__ */
|
|
3256
|
-
/* @__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 })
|
|
3257
3277
|
] }),
|
|
3258
|
-
/* @__PURE__ */
|
|
3278
|
+
/* @__PURE__ */ jsxs45(
|
|
3259
3279
|
Slider,
|
|
3260
3280
|
{
|
|
3261
3281
|
value: [item.value],
|
|
@@ -3266,15 +3286,15 @@ function SliderRow({ item }) {
|
|
|
3266
3286
|
if (v !== void 0) item.onValueChange(v);
|
|
3267
3287
|
},
|
|
3268
3288
|
children: [
|
|
3269
|
-
/* @__PURE__ */
|
|
3270
|
-
/* @__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 })
|
|
3271
3291
|
]
|
|
3272
3292
|
}
|
|
3273
3293
|
)
|
|
3274
3294
|
] });
|
|
3275
3295
|
}
|
|
3276
3296
|
function ActionRow({ item }) {
|
|
3277
|
-
return /* @__PURE__ */
|
|
3297
|
+
return /* @__PURE__ */ jsxs45(
|
|
3278
3298
|
XStack40,
|
|
3279
3299
|
{
|
|
3280
3300
|
alignItems: "center",
|
|
@@ -3286,7 +3306,7 @@ function ActionRow({ item }) {
|
|
|
3286
3306
|
cursor: "pointer",
|
|
3287
3307
|
onPress: item.onPress,
|
|
3288
3308
|
children: [
|
|
3289
|
-
/* @__PURE__ */
|
|
3309
|
+
/* @__PURE__ */ jsx55(
|
|
3290
3310
|
ItemLabel,
|
|
3291
3311
|
{
|
|
3292
3312
|
title: item.title,
|
|
@@ -3294,7 +3314,7 @@ function ActionRow({ item }) {
|
|
|
3294
3314
|
color: item.destructive ? "$red10" : void 0
|
|
3295
3315
|
}
|
|
3296
3316
|
),
|
|
3297
|
-
/* @__PURE__ */
|
|
3317
|
+
/* @__PURE__ */ jsx55(SizableText47, { size: "$4", color: "$color8", children: "\u203A" })
|
|
3298
3318
|
]
|
|
3299
3319
|
}
|
|
3300
3320
|
);
|
|
@@ -3302,22 +3322,22 @@ function ActionRow({ item }) {
|
|
|
3302
3322
|
function PreferenceRow({ item }) {
|
|
3303
3323
|
switch (item.type) {
|
|
3304
3324
|
case "toggle":
|
|
3305
|
-
return /* @__PURE__ */
|
|
3325
|
+
return /* @__PURE__ */ jsx55(ToggleRow, { item });
|
|
3306
3326
|
case "select":
|
|
3307
|
-
return /* @__PURE__ */
|
|
3327
|
+
return /* @__PURE__ */ jsx55(SelectRow, { item });
|
|
3308
3328
|
case "slider":
|
|
3309
|
-
return /* @__PURE__ */
|
|
3329
|
+
return /* @__PURE__ */ jsx55(SliderRow, { item });
|
|
3310
3330
|
case "action":
|
|
3311
|
-
return /* @__PURE__ */
|
|
3331
|
+
return /* @__PURE__ */ jsx55(ActionRow, { item });
|
|
3312
3332
|
}
|
|
3313
3333
|
}
|
|
3314
3334
|
function UserPreferences({ sections }) {
|
|
3315
|
-
return /* @__PURE__ */
|
|
3316
|
-
/* @__PURE__ */
|
|
3317
|
-
/* @__PURE__ */
|
|
3318
|
-
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 })
|
|
3319
3339
|
] }),
|
|
3320
|
-
/* @__PURE__ */
|
|
3340
|
+
/* @__PURE__ */ jsx55(
|
|
3321
3341
|
YStack44,
|
|
3322
3342
|
{
|
|
3323
3343
|
backgroundColor: "$color2",
|
|
@@ -3325,9 +3345,9 @@ function UserPreferences({ sections }) {
|
|
|
3325
3345
|
overflow: "hidden",
|
|
3326
3346
|
borderWidth: 1,
|
|
3327
3347
|
borderColor: "$color4",
|
|
3328
|
-
children: section.items.map((item, ii) => /* @__PURE__ */
|
|
3329
|
-
/* @__PURE__ */
|
|
3330
|
-
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" })
|
|
3331
3351
|
] }, item.id))
|
|
3332
3352
|
}
|
|
3333
3353
|
)
|
|
@@ -3336,7 +3356,7 @@ function UserPreferences({ sections }) {
|
|
|
3336
3356
|
|
|
3337
3357
|
// src/patterns/BlinkSelect.tsx
|
|
3338
3358
|
import { Select, Adapt, Sheet as Sheet3, YStack as YStack45, SizableText as SizableText48 } from "tamagui";
|
|
3339
|
-
import { jsx as
|
|
3359
|
+
import { jsx as jsx56, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
3340
3360
|
function BlinkSelect({
|
|
3341
3361
|
items,
|
|
3342
3362
|
value,
|
|
@@ -3347,9 +3367,9 @@ function BlinkSelect({
|
|
|
3347
3367
|
disabled,
|
|
3348
3368
|
width = "100%"
|
|
3349
3369
|
}) {
|
|
3350
|
-
return /* @__PURE__ */
|
|
3351
|
-
label ? /* @__PURE__ */
|
|
3352
|
-
/* @__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(
|
|
3353
3373
|
Select,
|
|
3354
3374
|
{
|
|
3355
3375
|
value,
|
|
@@ -3357,18 +3377,18 @@ function BlinkSelect({
|
|
|
3357
3377
|
disablePreventBodyScroll: true,
|
|
3358
3378
|
...disabled ? { disabled: true } : {},
|
|
3359
3379
|
children: [
|
|
3360
|
-
/* @__PURE__ */
|
|
3361
|
-
/* @__PURE__ */
|
|
3362
|
-
/* @__PURE__ */
|
|
3363
|
-
/* @__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, {})
|
|
3364
3384
|
] }) }),
|
|
3365
|
-
/* @__PURE__ */
|
|
3366
|
-
/* @__PURE__ */
|
|
3367
|
-
/* @__PURE__ */
|
|
3368
|
-
/* @__PURE__ */
|
|
3369
|
-
/* @__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" }) })
|
|
3370
3390
|
] }, item.value)) }) }),
|
|
3371
|
-
/* @__PURE__ */
|
|
3391
|
+
/* @__PURE__ */ jsx56(Select.ScrollDownButton, { alignItems: "center", justifyContent: "center", height: "$3", children: /* @__PURE__ */ jsx56(SizableText48, { children: "\u25BC" }) })
|
|
3372
3392
|
] })
|
|
3373
3393
|
]
|
|
3374
3394
|
}
|
|
@@ -3378,7 +3398,7 @@ function BlinkSelect({
|
|
|
3378
3398
|
|
|
3379
3399
|
// src/patterns/BlinkDialog.tsx
|
|
3380
3400
|
import { Dialog, Adapt as Adapt2, Sheet as Sheet4, Button as Button11, XStack as XStack41 } from "tamagui";
|
|
3381
|
-
import { jsx as
|
|
3401
|
+
import { jsx as jsx57, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
3382
3402
|
function BlinkDialog({
|
|
3383
3403
|
open,
|
|
3384
3404
|
onOpenChange,
|
|
@@ -3392,14 +3412,14 @@ function BlinkDialog({
|
|
|
3392
3412
|
onCancel,
|
|
3393
3413
|
confirmTheme = "active"
|
|
3394
3414
|
}) {
|
|
3395
|
-
return /* @__PURE__ */
|
|
3396
|
-
trigger && /* @__PURE__ */
|
|
3397
|
-
/* @__PURE__ */
|
|
3398
|
-
/* @__PURE__ */
|
|
3399
|
-
/* @__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, {})
|
|
3400
3420
|
] }) }),
|
|
3401
|
-
/* @__PURE__ */
|
|
3402
|
-
/* @__PURE__ */
|
|
3421
|
+
/* @__PURE__ */ jsxs47(Dialog.Portal, { children: [
|
|
3422
|
+
/* @__PURE__ */ jsx57(
|
|
3403
3423
|
Dialog.Overlay,
|
|
3404
3424
|
{
|
|
3405
3425
|
animation: "quick",
|
|
@@ -3409,7 +3429,7 @@ function BlinkDialog({
|
|
|
3409
3429
|
},
|
|
3410
3430
|
"overlay"
|
|
3411
3431
|
),
|
|
3412
|
-
/* @__PURE__ */
|
|
3432
|
+
/* @__PURE__ */ jsxs47(
|
|
3413
3433
|
Dialog.Content,
|
|
3414
3434
|
{
|
|
3415
3435
|
bordered: true,
|
|
@@ -3420,12 +3440,12 @@ function BlinkDialog({
|
|
|
3420
3440
|
exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
|
|
3421
3441
|
gap: "$4",
|
|
3422
3442
|
children: [
|
|
3423
|
-
title && /* @__PURE__ */
|
|
3424
|
-
description && /* @__PURE__ */
|
|
3443
|
+
title && /* @__PURE__ */ jsx57(Dialog.Title, { children: title }),
|
|
3444
|
+
description && /* @__PURE__ */ jsx57(Dialog.Description, { size: "$3", color: "$color10", children: description }),
|
|
3425
3445
|
children,
|
|
3426
|
-
(onConfirm || onCancel) && /* @__PURE__ */
|
|
3427
|
-
onCancel && /* @__PURE__ */
|
|
3428
|
-
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 }) })
|
|
3429
3449
|
] })
|
|
3430
3450
|
]
|
|
3431
3451
|
},
|
|
@@ -3437,7 +3457,7 @@ function BlinkDialog({
|
|
|
3437
3457
|
|
|
3438
3458
|
// src/patterns/BlinkPopover.tsx
|
|
3439
3459
|
import { Popover as Popover2, Adapt as Adapt3, YStack as YStack46 } from "tamagui";
|
|
3440
|
-
import { jsx as
|
|
3460
|
+
import { jsx as jsx58, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
3441
3461
|
function BlinkPopover({
|
|
3442
3462
|
trigger,
|
|
3443
3463
|
children,
|
|
@@ -3445,13 +3465,13 @@ function BlinkPopover({
|
|
|
3445
3465
|
allowFlip = true,
|
|
3446
3466
|
size = "$5"
|
|
3447
3467
|
}) {
|
|
3448
|
-
return /* @__PURE__ */
|
|
3449
|
-
/* @__PURE__ */
|
|
3450
|
-
/* @__PURE__ */
|
|
3451
|
-
/* @__PURE__ */
|
|
3452
|
-
/* @__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, {})
|
|
3453
3473
|
] }) }),
|
|
3454
|
-
/* @__PURE__ */
|
|
3474
|
+
/* @__PURE__ */ jsxs48(
|
|
3455
3475
|
Popover2.Content,
|
|
3456
3476
|
{
|
|
3457
3477
|
borderWidth: 1,
|
|
@@ -3461,8 +3481,8 @@ function BlinkPopover({
|
|
|
3461
3481
|
elevate: true,
|
|
3462
3482
|
animation: ["quick", { opacity: { overshootClamping: true } }],
|
|
3463
3483
|
children: [
|
|
3464
|
-
/* @__PURE__ */
|
|
3465
|
-
/* @__PURE__ */
|
|
3484
|
+
/* @__PURE__ */ jsx58(Popover2.Arrow, { borderWidth: 1, borderColor: "$borderColor" }),
|
|
3485
|
+
/* @__PURE__ */ jsx58(YStack46, { gap: "$3", padding: "$3", children })
|
|
3466
3486
|
]
|
|
3467
3487
|
}
|
|
3468
3488
|
)
|
|
@@ -3471,7 +3491,7 @@ function BlinkPopover({
|
|
|
3471
3491
|
|
|
3472
3492
|
// src/patterns/ImmersiveMediaScreen.tsx
|
|
3473
3493
|
import { Button as Button12, SizableText as SizableText49, XStack as XStack42, YStack as YStack47 } from "tamagui";
|
|
3474
|
-
import { jsx as
|
|
3494
|
+
import { jsx as jsx59, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
3475
3495
|
function ImmersiveMediaScreen({
|
|
3476
3496
|
variant = "reel",
|
|
3477
3497
|
media,
|
|
@@ -3487,16 +3507,16 @@ function ImmersiveMediaScreen({
|
|
|
3487
3507
|
sheetContent
|
|
3488
3508
|
}) {
|
|
3489
3509
|
const showSheet = variant === "sheet";
|
|
3490
|
-
return /* @__PURE__ */
|
|
3491
|
-
/* @__PURE__ */
|
|
3510
|
+
return /* @__PURE__ */ jsxs49(YStack47, { flex: 1, backgroundColor: "$color1", children: [
|
|
3511
|
+
/* @__PURE__ */ jsxs49(YStack47, { flex: 1, position: "relative", children: [
|
|
3492
3512
|
media,
|
|
3493
|
-
/* @__PURE__ */
|
|
3494
|
-
/* @__PURE__ */
|
|
3495
|
-
/* @__PURE__ */
|
|
3496
|
-
/* @__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 })
|
|
3497
3517
|
] }),
|
|
3498
|
-
actions.length > 0 ? /* @__PURE__ */
|
|
3499
|
-
/* @__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(
|
|
3500
3520
|
YStack47,
|
|
3501
3521
|
{
|
|
3502
3522
|
width: 44,
|
|
@@ -3505,17 +3525,17 @@ function ImmersiveMediaScreen({
|
|
|
3505
3525
|
backgroundColor: "rgba(0,0,0,0.55)",
|
|
3506
3526
|
alignItems: "center",
|
|
3507
3527
|
justifyContent: "center",
|
|
3508
|
-
children: action.icon ?? /* @__PURE__ */
|
|
3528
|
+
children: action.icon ?? /* @__PURE__ */ jsx59(SizableText49, { size: "$5", color: "white", children: "\u2022" })
|
|
3509
3529
|
}
|
|
3510
3530
|
),
|
|
3511
|
-
action.value ? /* @__PURE__ */
|
|
3512
|
-
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
|
|
3513
3533
|
] }, action.id)) }) : null,
|
|
3514
|
-
/* @__PURE__ */
|
|
3515
|
-
title ? /* @__PURE__ */
|
|
3516
|
-
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,
|
|
3517
3537
|
bottomMeta,
|
|
3518
|
-
variant === "story" && inputPlaceholder ? /* @__PURE__ */
|
|
3538
|
+
variant === "story" && inputPlaceholder ? /* @__PURE__ */ jsx59(
|
|
3519
3539
|
XStack42,
|
|
3520
3540
|
{
|
|
3521
3541
|
onPress: onInputPress,
|
|
@@ -3526,22 +3546,22 @@ function ImmersiveMediaScreen({
|
|
|
3526
3546
|
backgroundColor: "rgba(255,255,255,0.14)",
|
|
3527
3547
|
borderWidth: 1,
|
|
3528
3548
|
borderColor: "rgba(255,255,255,0.25)",
|
|
3529
|
-
children: /* @__PURE__ */
|
|
3549
|
+
children: /* @__PURE__ */ jsx59(SizableText49, { size: "$3", color: "rgba(255,255,255,0.82)", children: inputPlaceholder })
|
|
3530
3550
|
}
|
|
3531
3551
|
) : null
|
|
3532
3552
|
] })
|
|
3533
3553
|
] }),
|
|
3534
|
-
showSheet ? /* @__PURE__ */
|
|
3535
|
-
/* @__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" }),
|
|
3536
3556
|
sheetContent,
|
|
3537
|
-
inputPlaceholder ? /* @__PURE__ */
|
|
3557
|
+
inputPlaceholder ? /* @__PURE__ */ jsx59(Button12, { size: "$5", backgroundColor: "$color9", color: "$color1", onPress: onInputPress, children: inputPlaceholder }) : null
|
|
3538
3558
|
] }) : null
|
|
3539
3559
|
] });
|
|
3540
3560
|
}
|
|
3541
3561
|
|
|
3542
3562
|
// src/patterns/FinanceDashboard.tsx
|
|
3543
3563
|
import { SizableText as SizableText50, XStack as XStack43, YStack as YStack48 } from "tamagui";
|
|
3544
|
-
import { jsx as
|
|
3564
|
+
import { jsx as jsx60, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
3545
3565
|
function FinanceDashboard({
|
|
3546
3566
|
title = "Overview",
|
|
3547
3567
|
balanceLabel = "Available balance",
|
|
@@ -3553,25 +3573,25 @@ function FinanceDashboard({
|
|
|
3553
3573
|
chartSlot,
|
|
3554
3574
|
topRight
|
|
3555
3575
|
}) {
|
|
3556
|
-
return /* @__PURE__ */
|
|
3557
|
-
/* @__PURE__ */
|
|
3558
|
-
/* @__PURE__ */
|
|
3559
|
-
/* @__PURE__ */
|
|
3560
|
-
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
|
|
3561
3581
|
] }),
|
|
3562
3582
|
topRight
|
|
3563
3583
|
] }),
|
|
3564
|
-
/* @__PURE__ */
|
|
3565
|
-
/* @__PURE__ */
|
|
3566
|
-
/* @__PURE__ */
|
|
3567
|
-
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
|
|
3568
3588
|
] }),
|
|
3569
|
-
metrics.length > 0 ? /* @__PURE__ */
|
|
3570
|
-
/* @__PURE__ */
|
|
3571
|
-
/* @__PURE__ */
|
|
3572
|
-
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
|
|
3573
3593
|
] }, metric.label)) }) : null,
|
|
3574
|
-
quickActions.length > 0 ? /* @__PURE__ */
|
|
3594
|
+
quickActions.length > 0 ? /* @__PURE__ */ jsx60(XStack43, { gap: "$3", flexWrap: "wrap", children: quickActions.map((action) => /* @__PURE__ */ jsxs50(
|
|
3575
3595
|
YStack48,
|
|
3576
3596
|
{
|
|
3577
3597
|
flex: 1,
|
|
@@ -3586,15 +3606,15 @@ function FinanceDashboard({
|
|
|
3586
3606
|
borderColor: "$color4",
|
|
3587
3607
|
onPress: action.onPress,
|
|
3588
3608
|
children: [
|
|
3589
|
-
/* @__PURE__ */
|
|
3590
|
-
/* @__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 })
|
|
3591
3611
|
]
|
|
3592
3612
|
},
|
|
3593
3613
|
action.id
|
|
3594
3614
|
)) }) : null,
|
|
3595
|
-
/* @__PURE__ */
|
|
3596
|
-
/* @__PURE__ */
|
|
3597
|
-
/* @__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(
|
|
3598
3618
|
XStack43,
|
|
3599
3619
|
{
|
|
3600
3620
|
padding: "$3",
|
|
@@ -3603,12 +3623,12 @@ function FinanceDashboard({
|
|
|
3603
3623
|
borderTopWidth: index2 === 0 ? 0 : 1,
|
|
3604
3624
|
borderTopColor: "$color4",
|
|
3605
3625
|
children: [
|
|
3606
|
-
row.leading ? /* @__PURE__ */
|
|
3607
|
-
/* @__PURE__ */
|
|
3608
|
-
/* @__PURE__ */
|
|
3609
|
-
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
|
|
3610
3630
|
] }),
|
|
3611
|
-
row.value ? /* @__PURE__ */
|
|
3631
|
+
row.value ? /* @__PURE__ */ jsx60(SizableText50, { size: "$3", color: "$color11", children: row.value }) : null
|
|
3612
3632
|
]
|
|
3613
3633
|
},
|
|
3614
3634
|
row.id
|
|
@@ -3624,6 +3644,7 @@ export {
|
|
|
3624
3644
|
Anchor,
|
|
3625
3645
|
AnimatePresence,
|
|
3626
3646
|
AppHeader,
|
|
3647
|
+
AppleLogo,
|
|
3627
3648
|
Article,
|
|
3628
3649
|
Aside,
|
|
3629
3650
|
Avatar2 as Avatar,
|
|
@@ -3651,7 +3672,7 @@ export {
|
|
|
3651
3672
|
Checkbox,
|
|
3652
3673
|
Chip,
|
|
3653
3674
|
ChipGroup,
|
|
3654
|
-
|
|
3675
|
+
Circle12 as Circle,
|
|
3655
3676
|
ConfirmDialog,
|
|
3656
3677
|
Container,
|
|
3657
3678
|
CountdownBanner,
|
|
@@ -3670,7 +3691,9 @@ export {
|
|
|
3670
3691
|
Form,
|
|
3671
3692
|
FormField,
|
|
3672
3693
|
Frame,
|
|
3694
|
+
GitHubLogo,
|
|
3673
3695
|
GlassCard,
|
|
3696
|
+
GoogleLogo,
|
|
3674
3697
|
Grid,
|
|
3675
3698
|
Group,
|
|
3676
3699
|
H12 as H1,
|
|
@@ -3692,6 +3715,7 @@ export {
|
|
|
3692
3715
|
LoginScreen,
|
|
3693
3716
|
Main,
|
|
3694
3717
|
MediaCard,
|
|
3718
|
+
MicrosoftLogo,
|
|
3695
3719
|
Nav,
|
|
3696
3720
|
NotificationBanner,
|
|
3697
3721
|
OTPInput,
|
|
@@ -3716,7 +3740,7 @@ export {
|
|
|
3716
3740
|
RadioGroup,
|
|
3717
3741
|
SafeArea,
|
|
3718
3742
|
ScreenLayout,
|
|
3719
|
-
|
|
3743
|
+
ScrollView6 as ScrollView,
|
|
3720
3744
|
SearchBar,
|
|
3721
3745
|
Section,
|
|
3722
3746
|
Select2 as Select,
|