@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.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
5
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
8
|
var __export = (target, all) => {
|
|
7
9
|
for (var name in all)
|
|
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
15
17
|
}
|
|
16
18
|
return to;
|
|
17
19
|
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
18
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
29
|
|
|
20
30
|
// src/index.ts
|
|
@@ -27,6 +37,7 @@ __export(index_exports, {
|
|
|
27
37
|
Anchor: () => import_tamagui69.Anchor,
|
|
28
38
|
AnimatePresence: () => import_tamagui69.AnimatePresence,
|
|
29
39
|
AppHeader: () => AppHeader,
|
|
40
|
+
AppleLogo: () => AppleLogo,
|
|
30
41
|
Article: () => import_tamagui69.Article,
|
|
31
42
|
Aside: () => import_tamagui69.Aside,
|
|
32
43
|
Avatar: () => import_tamagui69.Avatar,
|
|
@@ -73,7 +84,9 @@ __export(index_exports, {
|
|
|
73
84
|
Form: () => import_tamagui69.Form,
|
|
74
85
|
FormField: () => FormField,
|
|
75
86
|
Frame: () => import_tamagui69.Frame,
|
|
87
|
+
GitHubLogo: () => GitHubLogo,
|
|
76
88
|
GlassCard: () => GlassCard,
|
|
89
|
+
GoogleLogo: () => GoogleLogo,
|
|
77
90
|
Grid: () => Grid,
|
|
78
91
|
Group: () => import_tamagui69.Group,
|
|
79
92
|
H1: () => import_tamagui69.H1,
|
|
@@ -95,6 +108,7 @@ __export(index_exports, {
|
|
|
95
108
|
LoginScreen: () => LoginScreen,
|
|
96
109
|
Main: () => import_tamagui69.Main,
|
|
97
110
|
MediaCard: () => MediaCard,
|
|
111
|
+
MicrosoftLogo: () => MicrosoftLogo,
|
|
98
112
|
Nav: () => import_tamagui69.Nav,
|
|
99
113
|
NotificationBanner: () => NotificationBanner,
|
|
100
114
|
OTPInput: () => OTPInput,
|
|
@@ -1004,17 +1018,43 @@ function BlinkTooltip({ content, children, side = "top" }) {
|
|
|
1004
1018
|
] });
|
|
1005
1019
|
}
|
|
1006
1020
|
|
|
1021
|
+
// src/interface/BrandIcons.tsx
|
|
1022
|
+
var import_react_native_svg = __toESM(require("react-native-svg"));
|
|
1023
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1024
|
+
function GoogleLogo({ size = 20 }) {
|
|
1025
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", children: [
|
|
1026
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.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" }),
|
|
1027
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.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" }),
|
|
1028
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.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" }),
|
|
1029
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.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" })
|
|
1030
|
+
] });
|
|
1031
|
+
}
|
|
1032
|
+
function AppleLogo({ size = 20, color = "#000" }) {
|
|
1033
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.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" }) });
|
|
1034
|
+
}
|
|
1035
|
+
function GitHubLogo({ size = 20, color = "#fff" }) {
|
|
1036
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 98 96", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.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" }) });
|
|
1037
|
+
}
|
|
1038
|
+
function MicrosoftLogo({ size = 20 }) {
|
|
1039
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 21 21", children: [
|
|
1040
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Rect, { width: "10", height: "10", fill: "#F25022" }),
|
|
1041
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Rect, { x: "11", width: "10", height: "10", fill: "#7FBA00" }),
|
|
1042
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Rect, { y: "11", width: "10", height: "10", fill: "#00A4EF" }),
|
|
1043
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Rect, { x: "11", y: "11", width: "10", height: "10", fill: "#FFB900" })
|
|
1044
|
+
] });
|
|
1045
|
+
}
|
|
1046
|
+
|
|
1007
1047
|
// src/layouts/StepPageLayout.tsx
|
|
1008
1048
|
var import_tamagui20 = require("tamagui");
|
|
1009
|
-
var
|
|
1049
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1010
1050
|
function StepPageLayout({ title, description, children, bottom }) {
|
|
1011
|
-
return /* @__PURE__ */ (0,
|
|
1012
|
-
/* @__PURE__ */ (0,
|
|
1013
|
-
/* @__PURE__ */ (0,
|
|
1014
|
-
description && /* @__PURE__ */ (0,
|
|
1051
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_tamagui20.YStack, { flex: 1, padding: "$4", maxWidth: 500, marginHorizontal: "auto", width: "100%", children: [
|
|
1052
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui20.YStack, { gap: "$5", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_tamagui20.YStack, { gap: "$2", children: [
|
|
1053
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui20.SizableText, { size: "$8", fontWeight: "700", children: title }),
|
|
1054
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui20.SizableText, { size: "$5", fontWeight: "400", color: "$color10", children: description })
|
|
1015
1055
|
] }) }),
|
|
1016
|
-
/* @__PURE__ */ (0,
|
|
1017
|
-
bottom && /* @__PURE__ */ (0,
|
|
1056
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui20.YStack, { paddingTop: "$5", gap: "$4", children }),
|
|
1057
|
+
bottom && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui20.YStack, { paddingTop: "$4", children: bottom })
|
|
1018
1058
|
] });
|
|
1019
1059
|
}
|
|
1020
1060
|
|
|
@@ -1039,12 +1079,12 @@ var ScreenLayout = (0, import_tamagui21.styled)(import_tamagui21.YStack, {
|
|
|
1039
1079
|
|
|
1040
1080
|
// src/layouts/Section.tsx
|
|
1041
1081
|
var import_tamagui22 = require("tamagui");
|
|
1042
|
-
var
|
|
1082
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1043
1083
|
function Section({ title, description, children, gap = "$3" }) {
|
|
1044
|
-
return /* @__PURE__ */ (0,
|
|
1045
|
-
title && /* @__PURE__ */ (0,
|
|
1046
|
-
/* @__PURE__ */ (0,
|
|
1047
|
-
description && /* @__PURE__ */ (0,
|
|
1084
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_tamagui22.YStack, { gap, children: [
|
|
1085
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_tamagui22.YStack, { gap: "$1", children: [
|
|
1086
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tamagui22.SizableText, { size: "$5", fontWeight: "600", color: "$color12", children: title }),
|
|
1087
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tamagui22.SizableText, { size: "$3", color: "$color9", children: description })
|
|
1048
1088
|
] }),
|
|
1049
1089
|
children
|
|
1050
1090
|
] });
|
|
@@ -1052,7 +1092,7 @@ function Section({ title, description, children, gap = "$3" }) {
|
|
|
1052
1092
|
|
|
1053
1093
|
// src/layouts/ListItem.tsx
|
|
1054
1094
|
var import_tamagui23 = require("tamagui");
|
|
1055
|
-
var
|
|
1095
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1056
1096
|
var ListItemFrame = (0, import_tamagui23.styled)(import_tamagui23.XStack, {
|
|
1057
1097
|
name: "BlinkListItem",
|
|
1058
1098
|
alignItems: "center",
|
|
@@ -1070,11 +1110,11 @@ var ListItemFrame = (0, import_tamagui23.styled)(import_tamagui23.XStack, {
|
|
|
1070
1110
|
}
|
|
1071
1111
|
});
|
|
1072
1112
|
function ListItem({ icon, title, subtitle, right, onPress }) {
|
|
1073
|
-
return /* @__PURE__ */ (0,
|
|
1074
|
-
icon && /* @__PURE__ */ (0,
|
|
1075
|
-
/* @__PURE__ */ (0,
|
|
1076
|
-
/* @__PURE__ */ (0,
|
|
1077
|
-
subtitle && /* @__PURE__ */ (0,
|
|
1113
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ListItemFrame, { pressable: !!onPress, onPress, children: [
|
|
1114
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tamagui23.View, { children: icon }),
|
|
1115
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_tamagui23.YStack, { flex: 1, gap: "$1", children: [
|
|
1116
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tamagui23.SizableText, { size: "$4", fontWeight: "500", color: "$color12", children: title }),
|
|
1117
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tamagui23.SizableText, { size: "$2", color: "$color9", children: subtitle })
|
|
1078
1118
|
] }),
|
|
1079
1119
|
right
|
|
1080
1120
|
] });
|
|
@@ -1082,28 +1122,28 @@ function ListItem({ icon, title, subtitle, right, onPress }) {
|
|
|
1082
1122
|
|
|
1083
1123
|
// src/layouts/Divider.tsx
|
|
1084
1124
|
var import_tamagui24 = require("tamagui");
|
|
1085
|
-
var
|
|
1125
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1086
1126
|
function Divider({ label }) {
|
|
1087
|
-
if (!label) return /* @__PURE__ */ (0,
|
|
1088
|
-
return /* @__PURE__ */ (0,
|
|
1089
|
-
/* @__PURE__ */ (0,
|
|
1090
|
-
/* @__PURE__ */ (0,
|
|
1091
|
-
/* @__PURE__ */ (0,
|
|
1127
|
+
if (!label) return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tamagui24.Separator, { borderColor: "$color4" });
|
|
1128
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_tamagui24.XStack, { alignItems: "center", gap: "$3", children: [
|
|
1129
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tamagui24.Separator, { flex: 1, borderColor: "$color4" }),
|
|
1130
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tamagui24.SizableText, { size: "$2", color: "$color9", children: label }),
|
|
1131
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tamagui24.Separator, { flex: 1, borderColor: "$color4" })
|
|
1092
1132
|
] });
|
|
1093
1133
|
}
|
|
1094
1134
|
|
|
1095
1135
|
// src/layouts/KeyboardStickyFooter.tsx
|
|
1096
1136
|
var import_tamagui25 = require("tamagui");
|
|
1097
|
-
var
|
|
1137
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1098
1138
|
function KeyboardStickyFooter({ children, offset }) {
|
|
1099
|
-
return /* @__PURE__ */ (0,
|
|
1139
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_tamagui25.YStack, { maxWidth: 500, alignSelf: "center", paddingTop: "$8", paddingBottom: "$4", style: { paddingBottom: offset }, children });
|
|
1100
1140
|
}
|
|
1101
1141
|
|
|
1102
1142
|
// src/layouts/SafeArea.tsx
|
|
1103
1143
|
var import_tamagui26 = require("tamagui");
|
|
1104
|
-
var
|
|
1144
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1105
1145
|
function SafeArea({ children, edges = ["top", "bottom"] }) {
|
|
1106
|
-
return /* @__PURE__ */ (0,
|
|
1146
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1107
1147
|
import_tamagui26.YStack,
|
|
1108
1148
|
{
|
|
1109
1149
|
flex: 1,
|
|
@@ -1120,26 +1160,26 @@ function SafeArea({ children, edges = ["top", "bottom"] }) {
|
|
|
1120
1160
|
// src/layouts/Grid.tsx
|
|
1121
1161
|
var import_react6 = require("react");
|
|
1122
1162
|
var import_tamagui27 = require("tamagui");
|
|
1123
|
-
var
|
|
1163
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1124
1164
|
function Grid({ children, columns = 2, gap = "$3" }) {
|
|
1125
1165
|
const items = import_react6.Children.toArray(children);
|
|
1126
1166
|
const rows = [];
|
|
1127
1167
|
for (let i = 0; i < items.length; i += columns) {
|
|
1128
1168
|
rows.push(items.slice(i, i + columns));
|
|
1129
1169
|
}
|
|
1130
|
-
return /* @__PURE__ */ (0,
|
|
1131
|
-
row.map((item, ci) => /* @__PURE__ */ (0,
|
|
1132
|
-
row.length < columns && Array.from({ length: columns - row.length }).map((_, i) => /* @__PURE__ */ (0,
|
|
1170
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui27.YStack, { gap, children: rows.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui27.XStack, { gap, children: [
|
|
1171
|
+
row.map((item, ci) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui27.YStack, { flex: 1, children: item }, ci)),
|
|
1172
|
+
row.length < columns && Array.from({ length: columns - row.length }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui27.YStack, { flex: 1 }, `pad-${i}`))
|
|
1133
1173
|
] }, ri)) });
|
|
1134
1174
|
}
|
|
1135
1175
|
function Container({ children, maxWidth = 500, centered = true, padding = "$4" }) {
|
|
1136
|
-
return /* @__PURE__ */ (0,
|
|
1176
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui27.YStack, { width: "100%", maxWidth, alignSelf: centered ? "center" : void 0, padding, children });
|
|
1137
1177
|
}
|
|
1138
1178
|
|
|
1139
1179
|
// src/patterns/PaywallScreen.tsx
|
|
1140
1180
|
var import_react7 = require("react");
|
|
1141
1181
|
var import_tamagui28 = require("tamagui");
|
|
1142
|
-
var
|
|
1182
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1143
1183
|
function useCountdown(minutes) {
|
|
1144
1184
|
const [seconds, setSeconds] = (0, import_react7.useState)((minutes ?? 0) * 60);
|
|
1145
1185
|
(0, import_react7.useEffect)(() => {
|
|
@@ -1152,90 +1192,96 @@ function useCountdown(minutes) {
|
|
|
1152
1192
|
const ss = String(seconds % 60).padStart(2, "0");
|
|
1153
1193
|
return { display: `${mm}:${ss}`, expired: seconds <= 0 };
|
|
1154
1194
|
}
|
|
1155
|
-
function normalizeFeature(
|
|
1156
|
-
return typeof
|
|
1157
|
-
}
|
|
1158
|
-
function ComparisonIcon({ enabled }) {
|
|
1159
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.Circle, { size: 22, backgroundColor: enabled ? "$green3" : "$color4", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$2", color: enabled ? "$green10" : "$color8", fontWeight: "700", children: enabled ? "\u2713" : "\u2014" }) });
|
|
1195
|
+
function normalizeFeature(f) {
|
|
1196
|
+
return typeof f === "string" ? { title: f } : f;
|
|
1160
1197
|
}
|
|
1161
|
-
function
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
"
|
|
1167
|
-
|
|
1168
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.YStack, { children: [
|
|
1169
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$2", fontWeight: "700", children: testimonial.author }),
|
|
1170
|
-
testimonial.meta ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color10", children: testimonial.meta }) : null
|
|
1198
|
+
function BenefitRow({ feature, tone, muted }) {
|
|
1199
|
+
const f = normalizeFeature(feature);
|
|
1200
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { gap: "$3", alignItems: "center", children: [
|
|
1201
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Circle, { size: 40, backgroundColor: "$color3", children: f.icon ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$5", color: "$color9", children: "\u2726" }) }),
|
|
1202
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { flex: 1, gap: "$0.5", children: [
|
|
1203
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$4", fontWeight: "700", color: tone, children: f.title }),
|
|
1204
|
+
f.description ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: muted, children: f.description }) : null
|
|
1171
1205
|
] })
|
|
1172
1206
|
] });
|
|
1173
1207
|
}
|
|
1174
|
-
function
|
|
1175
|
-
return /* @__PURE__ */ (0,
|
|
1176
|
-
|
|
1177
|
-
import_tamagui28.YStack,
|
|
1178
|
-
{
|
|
1179
|
-
width: 72,
|
|
1180
|
-
height: 72,
|
|
1181
|
-
borderRadius: "$10",
|
|
1182
|
-
overflow: "hidden",
|
|
1183
|
-
alignItems: "center",
|
|
1184
|
-
justifyContent: "center",
|
|
1185
|
-
backgroundColor: "$color3",
|
|
1186
|
-
children: creator.avatar
|
|
1187
|
-
}
|
|
1188
|
-
) : null,
|
|
1189
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.YStack, { alignItems: "center", gap: "$1", children: [
|
|
1190
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$6", fontWeight: "800", children: creator.name }),
|
|
1191
|
-
creator.meta ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$3", color: "$color10", children: creator.meta }) : null
|
|
1192
|
-
] })
|
|
1193
|
-
] });
|
|
1194
|
-
}
|
|
1195
|
-
function PlanCard({
|
|
1196
|
-
plan,
|
|
1197
|
-
selected,
|
|
1198
|
-
onPress,
|
|
1199
|
-
stacked,
|
|
1200
|
-
dark
|
|
1201
|
-
}) {
|
|
1202
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1203
|
-
import_tamagui28.YStack,
|
|
1208
|
+
function PlanRow({ plan, selected, onPress }) {
|
|
1209
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1210
|
+
import_tamagui28.XStack,
|
|
1204
1211
|
{
|
|
1205
|
-
|
|
1206
|
-
width: stacked ? "100%" : void 0,
|
|
1212
|
+
width: "100%",
|
|
1207
1213
|
padding: "$3",
|
|
1214
|
+
paddingHorizontal: "$3.5",
|
|
1208
1215
|
borderRadius: "$5",
|
|
1209
1216
|
borderWidth: 2,
|
|
1210
|
-
borderColor: selected ? "$color9" :
|
|
1211
|
-
backgroundColor: selected ? "$color3" :
|
|
1212
|
-
pressStyle: { scale: 0.
|
|
1217
|
+
borderColor: selected ? "$color9" : "$color5",
|
|
1218
|
+
backgroundColor: selected ? "$color3" : "$color1",
|
|
1219
|
+
pressStyle: { scale: 0.98, opacity: 0.9 },
|
|
1213
1220
|
animation: "quick",
|
|
1214
1221
|
onPress,
|
|
1215
1222
|
cursor: "pointer",
|
|
1223
|
+
alignItems: "center",
|
|
1224
|
+
gap: "$3",
|
|
1216
1225
|
position: "relative",
|
|
1217
|
-
gap: "$1.5",
|
|
1218
|
-
alignItems: stacked ? "flex-start" : "center",
|
|
1219
1226
|
children: [
|
|
1220
|
-
plan.popular && /* @__PURE__ */ (0,
|
|
1221
|
-
|
|
1222
|
-
/* @__PURE__ */ (0,
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
plan.
|
|
1227
|
+
plan.popular && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { position: "absolute", top: -10, right: 12, backgroundColor: "$color9", paddingHorizontal: "$2", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$1", color: "white", fontWeight: "700", children: "BEST VALUE" }) }),
|
|
1228
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Circle, { size: 22, borderWidth: 2, borderColor: selected ? "$color9" : "$color7", backgroundColor: selected ? "$color9" : "transparent", children: selected && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Circle, { size: 8, backgroundColor: "white" }) }),
|
|
1229
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { flex: 1, gap: "$0.5", children: [
|
|
1230
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { gap: "$2", alignItems: "center", children: [
|
|
1231
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$4", fontWeight: "700", children: plan.name }),
|
|
1232
|
+
plan.trial && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { backgroundColor: "$green3", paddingHorizontal: "$1.5", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$1", color: "$green9", fontWeight: "700", children: plan.trial }) })
|
|
1233
|
+
] }),
|
|
1234
|
+
plan.tagline ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color10", children: plan.tagline }) : null
|
|
1228
1235
|
] }),
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1236
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { alignItems: "flex-end", gap: "$0.5", children: [
|
|
1237
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { alignItems: "baseline", gap: "$1", children: [
|
|
1238
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$5", fontWeight: "800", children: plan.price }),
|
|
1239
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.SizableText, { size: "$2", color: "$color10", children: [
|
|
1240
|
+
"/",
|
|
1241
|
+
plan.period
|
|
1242
|
+
] })
|
|
1243
|
+
] }),
|
|
1244
|
+
plan.savings && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { backgroundColor: "$green3", paddingHorizontal: "$1.5", paddingVertical: 1, borderRadius: "$10", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$1", color: "$green9", fontWeight: "700", children: plan.savings }) }),
|
|
1245
|
+
plan.pricePerWeek && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$1", color: "$color10", children: plan.pricePerWeek })
|
|
1246
|
+
] })
|
|
1235
1247
|
]
|
|
1236
1248
|
}
|
|
1237
1249
|
);
|
|
1238
1250
|
}
|
|
1251
|
+
function ComparisonIcon({ enabled }) {
|
|
1252
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Circle, { size: 24, backgroundColor: enabled ? "$green3" : "$color4", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: enabled ? "$green10" : "$color8", fontWeight: "700", children: enabled ? "\u2713" : "\u2715" }) });
|
|
1253
|
+
}
|
|
1254
|
+
function TestimonialCard({ t }) {
|
|
1255
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { minWidth: 240, backgroundColor: "$color2", borderRadius: "$6", padding: "$3.5", gap: "$2.5", children: [
|
|
1256
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.SizableText, { size: "$3", color: "$color11", fontStyle: "italic", children: [
|
|
1257
|
+
"\u201C",
|
|
1258
|
+
t.quote,
|
|
1259
|
+
"\u201D"
|
|
1260
|
+
] }),
|
|
1261
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { gap: "$2", alignItems: "center", children: [
|
|
1262
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Circle, { size: 32, backgroundColor: "$color5", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", fontWeight: "700", children: t.author[0] }) }),
|
|
1263
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { children: [
|
|
1264
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", fontWeight: "700", children: t.author }),
|
|
1265
|
+
t.meta ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$1", color: "$color10", children: t.meta }) : null
|
|
1266
|
+
] })
|
|
1267
|
+
] })
|
|
1268
|
+
] });
|
|
1269
|
+
}
|
|
1270
|
+
function CreatorHeader({ c }) {
|
|
1271
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { alignItems: "center", justifyContent: "center", gap: "$3", children: [
|
|
1272
|
+
c.avatar && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Circle, { size: 72, overflow: "hidden", backgroundColor: "$color3", children: c.avatar }),
|
|
1273
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { alignItems: "center", gap: "$1", children: [
|
|
1274
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$6", fontWeight: "800", children: c.name }),
|
|
1275
|
+
c.meta ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$3", color: "$color10", children: c.meta }) : null
|
|
1276
|
+
] })
|
|
1277
|
+
] });
|
|
1278
|
+
}
|
|
1279
|
+
function TrustBadges({ badges }) {
|
|
1280
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.XStack, { justifyContent: "center", gap: "$4", paddingTop: "$1", children: badges.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { alignItems: "center", gap: "$1", children: [
|
|
1281
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Circle, { size: 28, backgroundColor: "$color3", children: b.icon ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color9", children: "\u2726" }) }),
|
|
1282
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$1", color: "$color10", textAlign: "center", children: b.label })
|
|
1283
|
+
] }, i)) });
|
|
1284
|
+
}
|
|
1239
1285
|
function PaywallScreen({
|
|
1240
1286
|
variant = "default",
|
|
1241
1287
|
eyebrow,
|
|
@@ -1260,68 +1306,57 @@ function PaywallScreen({
|
|
|
1260
1306
|
testimonials = [],
|
|
1261
1307
|
creator,
|
|
1262
1308
|
topSlot,
|
|
1263
|
-
footerSlot
|
|
1309
|
+
footerSlot,
|
|
1310
|
+
trustBadges
|
|
1264
1311
|
}) {
|
|
1265
1312
|
const selected = selectedPlan ?? plans.find((p) => p.popular)?.id ?? plans[0]?.id;
|
|
1266
1313
|
const countdown = useCountdown(countdownMinutes);
|
|
1267
1314
|
const dark = variant === "immersive-dark";
|
|
1268
|
-
const
|
|
1269
|
-
const
|
|
1270
|
-
const
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.ScrollView, { flex: 1, contentContainerStyle: { paddingBottom: 220 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.YStack, { padding: "$4", gap: "$4", paddingTop: "$8", children: [
|
|
1315
|
+
const bg = dark ? "$color1" : "$background";
|
|
1316
|
+
const tone = dark ? "$color12" : "$color11";
|
|
1317
|
+
const muted = "$color10";
|
|
1318
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { flex: 1, backgroundColor: bg, children: [
|
|
1319
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.XStack, { position: "absolute", top: "$4", right: "$4", zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Button, { size: "$3", circular: true, chromeless: true, onPress: onClose, pressStyle: { opacity: 0.6 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$5", color: muted, children: "\u2715" }) }) }),
|
|
1320
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.ScrollView, { flex: 1, contentContainerStyle: { paddingBottom: 240 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { paddingHorizontal: "$5", paddingTop: "$8", gap: "$5", children: [
|
|
1275
1321
|
topSlot,
|
|
1276
|
-
creator && variant === "creator-sheet" ? /* @__PURE__ */ (0,
|
|
1277
|
-
hero && /* @__PURE__ */ (0,
|
|
1278
|
-
badge && /* @__PURE__ */ (0,
|
|
1279
|
-
/* @__PURE__ */ (0,
|
|
1280
|
-
eyebrow ? /* @__PURE__ */ (0,
|
|
1281
|
-
/* @__PURE__ */ (0,
|
|
1282
|
-
subtitle && /* @__PURE__ */ (0,
|
|
1283
|
-
socialProof && /* @__PURE__ */ (0,
|
|
1322
|
+
creator && variant === "creator-sheet" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CreatorHeader, { c: creator }) : null,
|
|
1323
|
+
hero && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { alignItems: "center", paddingVertical: "$3", children: hero }),
|
|
1324
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.XStack, { justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { backgroundColor: "$color9", paddingHorizontal: "$3", paddingVertical: "$1", borderRadius: "$10", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "white", fontWeight: "700", children: badge }) }) }),
|
|
1325
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { gap: "$1.5", alignItems: "center", children: [
|
|
1326
|
+
eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", fontWeight: "700", color: "$color9", textTransform: "uppercase", children: eyebrow }) : null,
|
|
1327
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$9", fontWeight: "800", textAlign: "center", color: tone, children: title }),
|
|
1328
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$4", color: muted, textAlign: "center", children: subtitle }),
|
|
1329
|
+
socialProof && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$3", color: "$color9", fontWeight: "600", textAlign: "center", paddingTop: "$1", children: socialProof })
|
|
1284
1330
|
] }),
|
|
1285
|
-
countdownMinutes && !countdown.expired
|
|
1286
|
-
/* @__PURE__ */ (0,
|
|
1287
|
-
/* @__PURE__ */ (0,
|
|
1288
|
-
] }),
|
|
1289
|
-
features.length > 0 && /* @__PURE__ */ (0,
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
/* @__PURE__ */ (0,
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
] })
|
|
1297
|
-
] }, i);
|
|
1298
|
-
}) }),
|
|
1299
|
-
variant === "social-proof" && testimonials.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.XStack, { gap: "$3", children: testimonials.map((testimonial, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TestimonialCard, { testimonial }, `${testimonial.author}-${index}`)) }) }) : null,
|
|
1300
|
-
variant === "comparison" && comparisonRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.YStack, { backgroundColor: dark ? "$color2" : "$color1", borderRadius: "$6", padding: "$3", gap: "$2", borderWidth: 1, borderColor: "$color4", children: [
|
|
1301
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.XStack, { alignItems: "center", children: [
|
|
1302
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { flex: 1, size: "$2", fontWeight: "700", color: "$color10", children: "Feature" }),
|
|
1303
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { width: 64, size: "$2", fontWeight: "700", textAlign: "center", color: "$color10", children: "Free" }),
|
|
1304
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { width: 84, size: "$2", fontWeight: "700", textAlign: "center", color: "$color10", children: "Premium" })
|
|
1331
|
+
countdownMinutes && !countdown.expired ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { justifyContent: "center", padding: "$2", backgroundColor: "$red3", borderRadius: "$4", alignSelf: "center", paddingHorizontal: "$4", gap: "$2", alignItems: "center", children: [
|
|
1332
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$red9", fontWeight: "600", children: "Offer ends in" }),
|
|
1333
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$5", color: "$red9", fontWeight: "800", fontFamily: "$mono", children: countdown.display })
|
|
1334
|
+
] }) : null,
|
|
1335
|
+
features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { gap: "$3.5", children: features.map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BenefitRow, { feature, tone, muted }, i)) }),
|
|
1336
|
+
variant === "social-proof" && testimonials.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.XStack, { gap: "$3", paddingRight: "$4", children: testimonials.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TestimonialCard, { t }, `${t.author}-${i}`)) }) }) : null,
|
|
1337
|
+
variant === "comparison" && comparisonRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { backgroundColor: dark ? "$color2" : "$color1", borderRadius: "$6", padding: "$3.5", gap: "$2", borderWidth: 1, borderColor: "$color4", children: [
|
|
1338
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { alignItems: "center", children: [
|
|
1339
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { flex: 1, size: "$2", fontWeight: "700", color: muted, children: "Feature" }),
|
|
1340
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { width: 64, size: "$2", fontWeight: "700", textAlign: "center", color: muted, children: "Free" }),
|
|
1341
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { width: 84, size: "$2", fontWeight: "700", textAlign: "center", color: "$color9", children: "Premium" })
|
|
1305
1342
|
] }),
|
|
1306
|
-
comparisonRows.map((row) => /* @__PURE__ */ (0,
|
|
1307
|
-
/* @__PURE__ */ (0,
|
|
1308
|
-
/* @__PURE__ */ (0,
|
|
1309
|
-
/* @__PURE__ */ (0,
|
|
1343
|
+
comparisonRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { alignItems: "center", paddingVertical: "$1.5", children: [
|
|
1344
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { flex: 1, size: "$3", color: tone, children: row.label }),
|
|
1345
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.XStack, { width: 64, justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ComparisonIcon, { enabled: row.free }) }),
|
|
1346
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.XStack, { width: 84, justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ComparisonIcon, { enabled: row.premium }) })
|
|
1310
1347
|
] }, row.label))
|
|
1311
1348
|
] }) : null,
|
|
1312
|
-
/* @__PURE__ */ (0,
|
|
1313
|
-
|
|
1349
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { gap: "$3", children: plans.map((plan) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1350
|
+
PlanRow,
|
|
1314
1351
|
{
|
|
1315
1352
|
plan,
|
|
1316
1353
|
selected: selected === plan.id,
|
|
1317
|
-
onPress: () => onSelectPlan?.(plan.id)
|
|
1318
|
-
stacked: stackedPlans,
|
|
1319
|
-
dark
|
|
1354
|
+
onPress: () => onSelectPlan?.(plan.id)
|
|
1320
1355
|
},
|
|
1321
1356
|
plan.id
|
|
1322
1357
|
)) })
|
|
1323
1358
|
] }) }),
|
|
1324
|
-
/* @__PURE__ */ (0,
|
|
1359
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1325
1360
|
import_tamagui28.YStack,
|
|
1326
1361
|
{
|
|
1327
1362
|
position: "absolute",
|
|
@@ -1330,12 +1365,12 @@ function PaywallScreen({
|
|
|
1330
1365
|
right: 0,
|
|
1331
1366
|
padding: "$4",
|
|
1332
1367
|
paddingBottom: "$6",
|
|
1333
|
-
backgroundColor,
|
|
1368
|
+
backgroundColor: bg,
|
|
1334
1369
|
borderTopWidth: 1,
|
|
1335
1370
|
borderTopColor: "$color4",
|
|
1336
1371
|
gap: "$2.5",
|
|
1337
1372
|
children: [
|
|
1338
|
-
/* @__PURE__ */ (0,
|
|
1373
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1339
1374
|
import_tamagui28.Button,
|
|
1340
1375
|
{
|
|
1341
1376
|
size: "$5",
|
|
@@ -1349,12 +1384,13 @@ function PaywallScreen({
|
|
|
1349
1384
|
children: continueLabel
|
|
1350
1385
|
}
|
|
1351
1386
|
),
|
|
1352
|
-
reassurance && /* @__PURE__ */ (0,
|
|
1353
|
-
/* @__PURE__ */ (0,
|
|
1354
|
-
onRestore && /* @__PURE__ */ (0,
|
|
1355
|
-
onTerms && /* @__PURE__ */ (0,
|
|
1356
|
-
onPrivacy && /* @__PURE__ */ (0,
|
|
1387
|
+
reassurance && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color9", textAlign: "center", children: reassurance }),
|
|
1388
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { justifyContent: "center", gap: "$3", children: [
|
|
1389
|
+
onRestore && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color8", onPress: onRestore, pressStyle: { opacity: 0.6 }, children: "Restore" }),
|
|
1390
|
+
onTerms && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color8", onPress: onTerms, pressStyle: { opacity: 0.6 }, children: "Terms" }),
|
|
1391
|
+
onPrivacy && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color8", onPress: onPrivacy, pressStyle: { opacity: 0.6 }, children: "Privacy" })
|
|
1357
1392
|
] }),
|
|
1393
|
+
trustBadges && trustBadges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TrustBadges, { badges: trustBadges }),
|
|
1358
1394
|
footerSlot
|
|
1359
1395
|
]
|
|
1360
1396
|
}
|
|
@@ -1365,7 +1401,7 @@ function PaywallScreen({
|
|
|
1365
1401
|
// src/patterns/OnboardingCarousel.tsx
|
|
1366
1402
|
var import_react8 = require("react");
|
|
1367
1403
|
var import_tamagui29 = require("tamagui");
|
|
1368
|
-
var
|
|
1404
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1369
1405
|
function OnboardingCarousel({
|
|
1370
1406
|
steps,
|
|
1371
1407
|
variant = "default",
|
|
@@ -1380,7 +1416,7 @@ function OnboardingCarousel({
|
|
|
1380
1416
|
}) {
|
|
1381
1417
|
const [current, setCurrent] = (0, import_react8.useState)(0);
|
|
1382
1418
|
if (steps.length === 0) {
|
|
1383
|
-
return /* @__PURE__ */ (0,
|
|
1419
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.YStack, { flex: 1, backgroundColor: "$background", padding: "$4", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.SizableText, { size: "$5", color: "$color10", textAlign: "center", children: "Add at least one onboarding step." }) });
|
|
1384
1420
|
}
|
|
1385
1421
|
const isLast = current === steps.length - 1;
|
|
1386
1422
|
const step = steps[current];
|
|
@@ -1394,15 +1430,15 @@ function OnboardingCarousel({
|
|
|
1394
1430
|
const heroBackground = isPermission ? "$color3" : isSelection ? "$color1" : "$color2";
|
|
1395
1431
|
const heroRadius = variant === "card-tilt" || isSelection ? "$8" : "$10";
|
|
1396
1432
|
const buttonTone = variant === "editorial" ? "$color12" : "$color9";
|
|
1397
|
-
return /* @__PURE__ */ (0,
|
|
1398
|
-
step?.background ? /* @__PURE__ */ (0,
|
|
1399
|
-
/* @__PURE__ */ (0,
|
|
1400
|
-
/* @__PURE__ */ (0,
|
|
1401
|
-
brand ? /* @__PURE__ */ (0,
|
|
1402
|
-
!isLast && onSkip && /* @__PURE__ */ (0,
|
|
1433
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_tamagui29.YStack, { flex: 1, backgroundColor, padding: "$4", justifyContent: "space-between", children: [
|
|
1434
|
+
step?.background ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.YStack, { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, children: step.background }) : null,
|
|
1435
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_tamagui29.XStack, { justifyContent: "space-between", alignItems: "center", paddingTop: topPadding, children: [
|
|
1436
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.XStack, { minWidth: 40, children: topLeading }),
|
|
1437
|
+
brand ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.YStack, { alignItems: "center", flex: 1, children: brand }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.YStack, { flex: 1 }),
|
|
1438
|
+
!isLast && onSkip && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.Button, { chromeless: true, onPress: onSkip, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.SizableText, { size: "$4", color: "$color9", children: skipLabel }) })
|
|
1403
1439
|
] }),
|
|
1404
|
-
/* @__PURE__ */ (0,
|
|
1405
|
-
hero ? variant === "card-tilt" || isSelection ? /* @__PURE__ */ (0,
|
|
1440
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_tamagui29.YStack, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$5", paddingHorizontal: "$4", children: [
|
|
1441
|
+
hero ? variant === "card-tilt" || isSelection ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1406
1442
|
import_tamagui29.YStack,
|
|
1407
1443
|
{
|
|
1408
1444
|
width: "100%",
|
|
@@ -1422,15 +1458,15 @@ function OnboardingCarousel({
|
|
|
1422
1458
|
style: variant === "card-tilt" ? { transform: [{ rotate: "-5deg" }] } : void 0,
|
|
1423
1459
|
children: hero
|
|
1424
1460
|
}
|
|
1425
|
-
) : /* @__PURE__ */ (0,
|
|
1426
|
-
/* @__PURE__ */ (0,
|
|
1427
|
-
step?.eyebrow ? /* @__PURE__ */ (0,
|
|
1428
|
-
/* @__PURE__ */ (0,
|
|
1429
|
-
/* @__PURE__ */ (0,
|
|
1461
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.Circle, { size: isPermission ? 140 : 120, backgroundColor: heroBackground, alignItems: "center", justifyContent: "center", children: hero }) : null,
|
|
1462
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_tamagui29.YStack, { gap: "$3", alignItems: "center", children: [
|
|
1463
|
+
step?.eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.SizableText, { size: "$2", color: "$color9", fontWeight: "700", textTransform: "uppercase", children: step.eyebrow }) : null,
|
|
1464
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.SizableText, { size: titleSize, fontWeight: "700", textAlign: "center", children: step?.title }),
|
|
1465
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.SizableText, { size: "$4", color: "$color10", textAlign: "center", maxWidth: 300, children: step?.description })
|
|
1430
1466
|
] })
|
|
1431
1467
|
] }),
|
|
1432
|
-
/* @__PURE__ */ (0,
|
|
1433
|
-
/* @__PURE__ */ (0,
|
|
1468
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_tamagui29.YStack, { gap: "$3", paddingBottom: "$2", children: [
|
|
1469
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.XStack, { justifyContent: "center", gap: "$2", children: steps.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1434
1470
|
import_tamagui29.Circle,
|
|
1435
1471
|
{
|
|
1436
1472
|
size: variant === "card-tilt" ? 10 : 8,
|
|
@@ -1441,7 +1477,7 @@ function OnboardingCarousel({
|
|
|
1441
1477
|
},
|
|
1442
1478
|
i
|
|
1443
1479
|
)) }),
|
|
1444
|
-
/* @__PURE__ */ (0,
|
|
1480
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1445
1481
|
import_tamagui29.Button,
|
|
1446
1482
|
{
|
|
1447
1483
|
size: "$5",
|
|
@@ -1461,10 +1497,10 @@ function OnboardingCarousel({
|
|
|
1461
1497
|
|
|
1462
1498
|
// src/patterns/ChatBubble.tsx
|
|
1463
1499
|
var import_tamagui30 = require("tamagui");
|
|
1464
|
-
var
|
|
1500
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1465
1501
|
function ChatBubble({ message, showAvatar = true }) {
|
|
1466
1502
|
const isUser = message.sender === "user";
|
|
1467
|
-
return /* @__PURE__ */ (0,
|
|
1503
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1468
1504
|
import_tamagui30.XStack,
|
|
1469
1505
|
{
|
|
1470
1506
|
alignSelf: isUser ? "flex-end" : "flex-start",
|
|
@@ -1472,8 +1508,8 @@ function ChatBubble({ message, showAvatar = true }) {
|
|
|
1472
1508
|
gap: "$2",
|
|
1473
1509
|
flexDirection: isUser ? "row-reverse" : "row",
|
|
1474
1510
|
children: [
|
|
1475
|
-
showAvatar && !isUser && /* @__PURE__ */ (0,
|
|
1476
|
-
/* @__PURE__ */ (0,
|
|
1511
|
+
showAvatar && !isUser && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui30.Circle, { size: 32, backgroundColor: "$color4", overflow: "hidden", children: message.avatar ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui30.Image, { source: { uri: message.avatar }, width: 32, height: 32, objectFit: "cover" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui30.SizableText, { size: "$2", fontWeight: "600", color: "$color11", children: message.senderName?.[0]?.toUpperCase() ?? "?" }) }),
|
|
1512
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1477
1513
|
import_tamagui30.YStack,
|
|
1478
1514
|
{
|
|
1479
1515
|
backgroundColor: isUser ? "$color9" : "$color3",
|
|
@@ -1484,8 +1520,8 @@ function ChatBubble({ message, showAvatar = true }) {
|
|
|
1484
1520
|
borderBottomLeftRadius: isUser ? "$5" : "$2",
|
|
1485
1521
|
gap: "$1",
|
|
1486
1522
|
children: [
|
|
1487
|
-
/* @__PURE__ */ (0,
|
|
1488
|
-
message.timestamp && /* @__PURE__ */ (0,
|
|
1523
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui30.SizableText, { size: "$3", color: isUser ? "$color1" : "$color12", children: message.text }),
|
|
1524
|
+
message.timestamp && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui30.SizableText, { size: "$1", color: isUser ? "$color3" : "$color9", alignSelf: "flex-end", children: message.timestamp })
|
|
1489
1525
|
]
|
|
1490
1526
|
}
|
|
1491
1527
|
)
|
|
@@ -1496,9 +1532,9 @@ function ChatBubble({ message, showAvatar = true }) {
|
|
|
1496
1532
|
|
|
1497
1533
|
// src/patterns/SettingsScreen.tsx
|
|
1498
1534
|
var import_tamagui31 = require("tamagui");
|
|
1499
|
-
var
|
|
1535
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1500
1536
|
function SettingsItemRow({ item }) {
|
|
1501
|
-
return /* @__PURE__ */ (0,
|
|
1537
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1502
1538
|
import_tamagui31.XStack,
|
|
1503
1539
|
{
|
|
1504
1540
|
alignItems: "center",
|
|
@@ -1510,21 +1546,21 @@ function SettingsItemRow({ item }) {
|
|
|
1510
1546
|
onPress: item.onPress,
|
|
1511
1547
|
cursor: item.onPress ? "pointer" : void 0,
|
|
1512
1548
|
children: [
|
|
1513
|
-
item.icon && /* @__PURE__ */ (0,
|
|
1514
|
-
/* @__PURE__ */ (0,
|
|
1515
|
-
/* @__PURE__ */ (0,
|
|
1516
|
-
item.subtitle && /* @__PURE__ */ (0,
|
|
1549
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.YStack, { width: 24, alignItems: "center", children: item.icon }),
|
|
1550
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_tamagui31.YStack, { flex: 1, gap: "$1", children: [
|
|
1551
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.SizableText, { size: "$4", fontWeight: "500", children: item.title }),
|
|
1552
|
+
item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.SizableText, { size: "$2", color: "$color9", children: item.subtitle })
|
|
1517
1553
|
] }),
|
|
1518
|
-
item.type === "toggle" ? /* @__PURE__ */ (0,
|
|
1554
|
+
item.type === "toggle" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.Switch, { size: "$3", checked: item.value, onCheckedChange: item.onValueChange, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.Switch.Thumb, { animation: "quick" }) }) : item.right ? item.right : item.onPress && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.SizableText, { size: "$5", color: "$color8", children: "\u203A" })
|
|
1519
1555
|
]
|
|
1520
1556
|
}
|
|
1521
1557
|
);
|
|
1522
1558
|
}
|
|
1523
1559
|
function SettingsScreen({ sections, header }) {
|
|
1524
|
-
return /* @__PURE__ */ (0,
|
|
1560
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_tamagui31.YStack, { flex: 1, backgroundColor: "$background", children: [
|
|
1525
1561
|
header,
|
|
1526
|
-
/* @__PURE__ */ (0,
|
|
1527
|
-
section.title && /* @__PURE__ */ (0,
|
|
1562
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.YStack, { gap: "$4", paddingVertical: "$2", children: sections.map((section, si) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_tamagui31.YStack, { children: [
|
|
1563
|
+
section.title && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1528
1564
|
import_tamagui31.SizableText,
|
|
1529
1565
|
{
|
|
1530
1566
|
size: "$2",
|
|
@@ -1536,9 +1572,9 @@ function SettingsScreen({ sections, header }) {
|
|
|
1536
1572
|
children: section.title
|
|
1537
1573
|
}
|
|
1538
1574
|
),
|
|
1539
|
-
/* @__PURE__ */ (0,
|
|
1540
|
-
/* @__PURE__ */ (0,
|
|
1541
|
-
ii < section.items.length - 1 && /* @__PURE__ */ (0,
|
|
1575
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.YStack, { backgroundColor: "$color1", borderRadius: "$4", marginHorizontal: "$3", overflow: "hidden", children: section.items.map((item, ii) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_tamagui31.YStack, { children: [
|
|
1576
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SettingsItemRow, { item }),
|
|
1577
|
+
ii < section.items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.Separator, { borderColor: "$color3", marginLeft: "$12" })
|
|
1542
1578
|
] }, item.id)) })
|
|
1543
1579
|
] }, si)) })
|
|
1544
1580
|
] });
|
|
@@ -1546,15 +1582,15 @@ function SettingsScreen({ sections, header }) {
|
|
|
1546
1582
|
|
|
1547
1583
|
// src/patterns/EmptyState.tsx
|
|
1548
1584
|
var import_tamagui32 = require("tamagui");
|
|
1549
|
-
var
|
|
1585
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1550
1586
|
function EmptyState({ icon, title, description, actionLabel, onAction }) {
|
|
1551
|
-
return /* @__PURE__ */ (0,
|
|
1587
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_tamagui32.YStack, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$4", padding: "$6", children: [
|
|
1552
1588
|
icon,
|
|
1553
|
-
/* @__PURE__ */ (0,
|
|
1554
|
-
/* @__PURE__ */ (0,
|
|
1555
|
-
description && /* @__PURE__ */ (0,
|
|
1589
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_tamagui32.YStack, { gap: "$2", alignItems: "center", children: [
|
|
1590
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_tamagui32.SizableText, { size: "$6", fontWeight: "600", textAlign: "center", children: title }),
|
|
1591
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_tamagui32.SizableText, { size: "$4", color: "$color9", textAlign: "center", maxWidth: 280, children: description })
|
|
1556
1592
|
] }),
|
|
1557
|
-
actionLabel && onAction && /* @__PURE__ */ (0,
|
|
1593
|
+
actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1558
1594
|
import_tamagui32.Button,
|
|
1559
1595
|
{
|
|
1560
1596
|
size: "$4",
|
|
@@ -1572,17 +1608,17 @@ function EmptyState({ icon, title, description, actionLabel, onAction }) {
|
|
|
1572
1608
|
|
|
1573
1609
|
// src/patterns/ProfileHeader.tsx
|
|
1574
1610
|
var import_tamagui33 = require("tamagui");
|
|
1575
|
-
var
|
|
1611
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1576
1612
|
function ProfileHeader({ name, subtitle, avatar, stats, actions }) {
|
|
1577
|
-
return /* @__PURE__ */ (0,
|
|
1578
|
-
/* @__PURE__ */ (0,
|
|
1579
|
-
/* @__PURE__ */ (0,
|
|
1580
|
-
/* @__PURE__ */ (0,
|
|
1581
|
-
subtitle && /* @__PURE__ */ (0,
|
|
1613
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_tamagui33.YStack, { alignItems: "center", gap: "$4", paddingVertical: "$6", paddingHorizontal: "$4", children: [
|
|
1614
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.Circle, { size: 80, backgroundColor: "$color4", overflow: "hidden", children: avatar ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.Image, { source: { uri: avatar }, width: 80, height: 80, objectFit: "cover" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.SizableText, { size: "$9", fontWeight: "700", color: "$color11", children: name[0]?.toUpperCase() ?? "?" }) }),
|
|
1615
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_tamagui33.YStack, { alignItems: "center", gap: "$1", children: [
|
|
1616
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.SizableText, { size: "$7", fontWeight: "700", children: name }),
|
|
1617
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.SizableText, { size: "$4", color: "$color10", children: subtitle })
|
|
1582
1618
|
] }),
|
|
1583
|
-
stats && stats.length > 0 && /* @__PURE__ */ (0,
|
|
1584
|
-
/* @__PURE__ */ (0,
|
|
1585
|
-
/* @__PURE__ */ (0,
|
|
1619
|
+
stats && stats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.XStack, { gap: "$6", children: stats.map((stat, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_tamagui33.YStack, { alignItems: "center", gap: "$1", children: [
|
|
1620
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.SizableText, { size: "$6", fontWeight: "700", children: stat.value }),
|
|
1621
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.SizableText, { size: "$2", color: "$color9", children: stat.label })
|
|
1586
1622
|
] }, i)) }),
|
|
1587
1623
|
actions
|
|
1588
1624
|
] });
|
|
@@ -1590,27 +1626,27 @@ function ProfileHeader({ name, subtitle, avatar, stats, actions }) {
|
|
|
1590
1626
|
|
|
1591
1627
|
// src/patterns/AppHeader.tsx
|
|
1592
1628
|
var import_tamagui34 = require("tamagui");
|
|
1593
|
-
var
|
|
1629
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1594
1630
|
function AppHeader({ title, subtitle, variant = "simple", onBack, avatar, left, right, transparent, borderless }) {
|
|
1595
1631
|
const leftContent = (() => {
|
|
1596
|
-
if (variant === "back") return /* @__PURE__ */ (0,
|
|
1597
|
-
if (variant === "profile") return /* @__PURE__ */ (0,
|
|
1632
|
+
if (variant === "back") return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tamagui34.SizableText, { size: "$6", paddingRight: "$2", onPress: onBack, pressStyle: { opacity: 0.6 }, cursor: "pointer", children: "\u2039" });
|
|
1633
|
+
if (variant === "profile") return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Avatar, { uri: avatar, name: title, size: "sm" });
|
|
1598
1634
|
if (variant === "centered") return left ?? null;
|
|
1599
1635
|
return null;
|
|
1600
1636
|
})();
|
|
1601
1637
|
const rightContent = variant === "profile" || variant === "centered" ? right ?? null : null;
|
|
1602
|
-
return /* @__PURE__ */ (0,
|
|
1638
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1603
1639
|
import_tamagui34.YStack,
|
|
1604
1640
|
{
|
|
1605
1641
|
paddingTop: "$6",
|
|
1606
1642
|
backgroundColor: transparent ? "transparent" : "$background",
|
|
1607
1643
|
borderBottomWidth: borderless ? 0 : 1,
|
|
1608
1644
|
borderBottomColor: "$borderColor",
|
|
1609
|
-
children: /* @__PURE__ */ (0,
|
|
1645
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_tamagui34.XStack, { height: 56, alignItems: "center", paddingHorizontal: "$4", gap: "$3", children: [
|
|
1610
1646
|
leftContent,
|
|
1611
|
-
/* @__PURE__ */ (0,
|
|
1612
|
-
/* @__PURE__ */ (0,
|
|
1613
|
-
subtitle && /* @__PURE__ */ (0,
|
|
1647
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_tamagui34.YStack, { flex: 1, alignItems: variant === "centered" ? "center" : "flex-start", children: [
|
|
1648
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tamagui34.SizableText, { size: "$6", fontWeight: "700", numberOfLines: 1, children: title }),
|
|
1649
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tamagui34.SizableText, { size: "$2", color: "$color9", numberOfLines: 1, children: subtitle })
|
|
1614
1650
|
] }),
|
|
1615
1651
|
rightContent
|
|
1616
1652
|
] })
|
|
@@ -1621,9 +1657,9 @@ function AppHeader({ title, subtitle, variant = "simple", onBack, avatar, left,
|
|
|
1621
1657
|
// src/patterns/BottomSheet.tsx
|
|
1622
1658
|
var import_tamagui35 = require("tamagui");
|
|
1623
1659
|
var import_react_native2 = require("react-native");
|
|
1624
|
-
var
|
|
1660
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1625
1661
|
function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], dismissOnSnapToBottom = true, showHandle = true, showClose = false, zIndex = 1e5 }) {
|
|
1626
|
-
return /* @__PURE__ */ (0,
|
|
1662
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
1627
1663
|
import_tamagui35.Sheet,
|
|
1628
1664
|
{
|
|
1629
1665
|
modal: true,
|
|
@@ -1635,12 +1671,12 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
|
|
|
1635
1671
|
zIndex,
|
|
1636
1672
|
animation: "medium",
|
|
1637
1673
|
children: [
|
|
1638
|
-
/* @__PURE__ */ (0,
|
|
1639
|
-
showHandle && /* @__PURE__ */ (0,
|
|
1640
|
-
/* @__PURE__ */ (0,
|
|
1641
|
-
(title || showClose) && /* @__PURE__ */ (0,
|
|
1642
|
-
/* @__PURE__ */ (0,
|
|
1643
|
-
showClose && /* @__PURE__ */ (0,
|
|
1674
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui35.Sheet.Overlay, { animation: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }),
|
|
1675
|
+
showHandle && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui35.Sheet.Handle, {}),
|
|
1676
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui35.Sheet.Frame, { children: [
|
|
1677
|
+
(title || showClose) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui35.XStack, { paddingHorizontal: "$4", paddingTop: "$3", paddingBottom: "$2", alignItems: "center", justifyContent: "space-between", children: [
|
|
1678
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui35.SizableText, { size: "$6", fontWeight: "600", flexShrink: 1, children: title }),
|
|
1679
|
+
showClose && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1644
1680
|
import_tamagui35.XStack,
|
|
1645
1681
|
{
|
|
1646
1682
|
width: 28,
|
|
@@ -1651,11 +1687,11 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
|
|
|
1651
1687
|
justifyContent: "center",
|
|
1652
1688
|
pressStyle: { opacity: 0.7 },
|
|
1653
1689
|
onPress: () => onOpenChange(false),
|
|
1654
|
-
children: /* @__PURE__ */ (0,
|
|
1690
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui35.SizableText, { size: "$3", color: "$color10", fontWeight: "600", children: "\u2715" })
|
|
1655
1691
|
}
|
|
1656
1692
|
)
|
|
1657
1693
|
] }),
|
|
1658
|
-
/* @__PURE__ */ (0,
|
|
1694
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native2.ScrollView, { contentContainerStyle: { paddingBottom: 40 }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui35.YStack, { padding: "$4", children }) })
|
|
1659
1695
|
] })
|
|
1660
1696
|
]
|
|
1661
1697
|
}
|
|
@@ -1665,19 +1701,27 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
|
|
|
1665
1701
|
// src/patterns/LoginScreen.tsx
|
|
1666
1702
|
var import_react9 = require("react");
|
|
1667
1703
|
var import_tamagui36 = require("tamagui");
|
|
1668
|
-
var
|
|
1704
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1705
|
+
var BRAND_ICON_MAP = {
|
|
1706
|
+
google: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(GoogleLogo, { size }),
|
|
1707
|
+
apple: ({ size, color }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppleLogo, { size, color }),
|
|
1708
|
+
github: ({ size, color }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(GitHubLogo, { size, color }),
|
|
1709
|
+
microsoft: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MicrosoftLogo, { size }),
|
|
1710
|
+
custom: ({ size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.Circle, { size, backgroundColor: "$color4", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { fontSize: size * 0.6, color: "$color10", children: "\u2022" }) })
|
|
1711
|
+
};
|
|
1669
1712
|
var BRAND_STYLES = {
|
|
1670
|
-
google: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12"
|
|
1671
|
-
apple: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1"
|
|
1672
|
-
github: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1"
|
|
1673
|
-
microsoft: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12"
|
|
1674
|
-
custom: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12"
|
|
1713
|
+
google: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" },
|
|
1714
|
+
apple: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1" },
|
|
1715
|
+
github: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1" },
|
|
1716
|
+
microsoft: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" },
|
|
1717
|
+
custom: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" }
|
|
1675
1718
|
};
|
|
1676
|
-
function ProviderBadge({ provider
|
|
1719
|
+
function ProviderBadge({ provider }) {
|
|
1677
1720
|
const brand = provider.brand ?? "custom";
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1721
|
+
if (provider.icon) return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: provider.icon });
|
|
1722
|
+
const renderIcon = BRAND_ICON_MAP[brand];
|
|
1723
|
+
const iconColor = brand === "apple" || brand === "github" ? "#fff" : void 0;
|
|
1724
|
+
return renderIcon({ size: 20, color: iconColor });
|
|
1681
1725
|
}
|
|
1682
1726
|
function LoginScreen({
|
|
1683
1727
|
variant = "default",
|
|
@@ -1702,9 +1746,9 @@ function LoginScreen({
|
|
|
1702
1746
|
const [password, setPassword] = (0, import_react9.useState)("");
|
|
1703
1747
|
const isEditorial = variant === "editorial";
|
|
1704
1748
|
const isCenteredCard = variant === "centered-card";
|
|
1705
|
-
return /* @__PURE__ */ (0,
|
|
1706
|
-
backgroundSlot ? /* @__PURE__ */ (0,
|
|
1707
|
-
/* @__PURE__ */ (0,
|
|
1749
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.YStack, { flex: 1, padding: "$4", gap: "$5", backgroundColor: "$background", justifyContent: "center", children: [
|
|
1750
|
+
backgroundSlot ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.YStack, { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, children: backgroundSlot }) : null,
|
|
1751
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
1708
1752
|
import_tamagui36.YStack,
|
|
1709
1753
|
{
|
|
1710
1754
|
gap: "$5",
|
|
@@ -1714,13 +1758,13 @@ function LoginScreen({
|
|
|
1714
1758
|
borderWidth: isCenteredCard ? 1 : 0,
|
|
1715
1759
|
borderColor: isCenteredCard ? "$color4" : void 0,
|
|
1716
1760
|
children: [
|
|
1717
|
-
/* @__PURE__ */ (0,
|
|
1718
|
-
logo && /* @__PURE__ */ (0,
|
|
1719
|
-
hero ? /* @__PURE__ */ (0,
|
|
1720
|
-
/* @__PURE__ */ (0,
|
|
1721
|
-
/* @__PURE__ */ (0,
|
|
1761
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.YStack, { alignItems: "center", gap: "$2", children: [
|
|
1762
|
+
logo && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.YStack, { paddingBottom: "$3", children: logo }),
|
|
1763
|
+
hero ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.YStack, { paddingBottom: "$2", children: hero }) : null,
|
|
1764
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: isEditorial ? "$10" : "$9", fontWeight: "700", textAlign: "center", fontFamily: isEditorial ? "$heading" : void 0, children: title }),
|
|
1765
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$4", color: "$color10", textAlign: "center", children: subtitle })
|
|
1722
1766
|
] }),
|
|
1723
|
-
providers.length > 0 && /* @__PURE__ */ (0,
|
|
1767
|
+
providers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.YStack, { gap: "$2.5", children: providers.map((p) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1724
1768
|
import_tamagui36.Button,
|
|
1725
1769
|
{
|
|
1726
1770
|
size: "$5",
|
|
@@ -1732,25 +1776,25 @@ function LoginScreen({
|
|
|
1732
1776
|
onPress: () => onProviderPress?.(p.id),
|
|
1733
1777
|
hoverStyle: { backgroundColor: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].backgroundColor : "$color2" },
|
|
1734
1778
|
pressStyle: { backgroundColor: "$color3" },
|
|
1735
|
-
children: /* @__PURE__ */ (0,
|
|
1736
|
-
/* @__PURE__ */ (0,
|
|
1737
|
-
/* @__PURE__ */ (0,
|
|
1738
|
-
/* @__PURE__ */ (0,
|
|
1739
|
-
/* @__PURE__ */ (0,
|
|
1740
|
-
p.description ? /* @__PURE__ */ (0,
|
|
1779
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.XStack, { alignItems: "center", justifyContent: "space-between", width: "100%", gap: "$2", children: [
|
|
1780
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.XStack, { alignItems: "center", gap: "$2.5", children: [
|
|
1781
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ProviderBadge, { provider: p }),
|
|
1782
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.YStack, { alignItems: "flex-start", children: [
|
|
1783
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$4", fontWeight: "600", color: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].textColor : void 0, children: p.name }),
|
|
1784
|
+
p.description ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$2", color: "$color10", children: p.description }) : null
|
|
1741
1785
|
] })
|
|
1742
1786
|
] }),
|
|
1743
|
-
/* @__PURE__ */ (0,
|
|
1787
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$4", color: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].textColor : "$color9", children: "\u2192" })
|
|
1744
1788
|
] })
|
|
1745
1789
|
},
|
|
1746
1790
|
p.id
|
|
1747
1791
|
)) }),
|
|
1748
|
-
showEmailForm && providers.length > 0 && /* @__PURE__ */ (0,
|
|
1749
|
-
showEmailForm && /* @__PURE__ */ (0,
|
|
1750
|
-
/* @__PURE__ */ (0,
|
|
1751
|
-
/* @__PURE__ */ (0,
|
|
1752
|
-
onForgotPassword && /* @__PURE__ */ (0,
|
|
1753
|
-
/* @__PURE__ */ (0,
|
|
1792
|
+
showEmailForm && providers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Divider, { label: "or" }),
|
|
1793
|
+
showEmailForm && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.YStack, { gap: "$3", children: [
|
|
1794
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Input, { label: "Email", placeholder: "your@email.com", value: email, onChangeText: setEmail, keyboardType: "email-address", autoCapitalize: "none" }),
|
|
1795
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Input, { label: "Password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: password, onChangeText: setPassword, secureTextEntry: true }),
|
|
1796
|
+
onForgotPassword && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.XStack, { justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$3", color: "$color9", onPress: onForgotPassword, children: "Forgot password?" }) }),
|
|
1797
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1754
1798
|
import_tamagui36.Button,
|
|
1755
1799
|
{
|
|
1756
1800
|
size: "$5",
|
|
@@ -1761,18 +1805,18 @@ function LoginScreen({
|
|
|
1761
1805
|
onPress: () => onEmailSubmit?.(email, password),
|
|
1762
1806
|
hoverStyle: { backgroundColor: "$color10" },
|
|
1763
1807
|
pressStyle: { backgroundColor: "$color8" },
|
|
1764
|
-
icon: loading ? /* @__PURE__ */ (0,
|
|
1808
|
+
icon: loading ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.Spinner, { size: "small", color: "$color1" }) : void 0,
|
|
1765
1809
|
children: "Sign In"
|
|
1766
1810
|
}
|
|
1767
1811
|
),
|
|
1768
|
-
onCreateAccount && /* @__PURE__ */ (0,
|
|
1812
|
+
onCreateAccount && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.Button, { size: "$3", chromeless: true, onPress: onCreateAccount, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$3", color: "$color9", children: "Create Account" }) })
|
|
1769
1813
|
] }),
|
|
1770
|
-
(onTerms || onPrivacy) && /* @__PURE__ */ (0,
|
|
1814
|
+
(onTerms || onPrivacy) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.YStack, { paddingTop: "$2", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.SizableText, { size: "$2", color: "$color8", textAlign: "center", children: [
|
|
1771
1815
|
"By continuing you agree to our",
|
|
1772
1816
|
" ",
|
|
1773
|
-
onTerms && /* @__PURE__ */ (0,
|
|
1817
|
+
onTerms && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$2", color: "$color9", onPress: onTerms, children: "Terms of Service" }),
|
|
1774
1818
|
onTerms && onPrivacy && " & ",
|
|
1775
|
-
onPrivacy && /* @__PURE__ */ (0,
|
|
1819
|
+
onPrivacy && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$2", color: "$color9", onPress: onPrivacy, children: "Privacy Policy" })
|
|
1776
1820
|
] }) }),
|
|
1777
1821
|
footerSlot
|
|
1778
1822
|
]
|
|
@@ -1783,11 +1827,11 @@ function LoginScreen({
|
|
|
1783
1827
|
|
|
1784
1828
|
// src/patterns/TabBar.tsx
|
|
1785
1829
|
var import_tamagui37 = require("tamagui");
|
|
1786
|
-
var
|
|
1830
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1787
1831
|
function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
1788
|
-
return /* @__PURE__ */ (0,
|
|
1832
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_tamagui37.XStack, { height: 56, borderTopWidth: 1, borderTopColor: "$borderColor", backgroundColor: "$background", paddingBottom: "$2", children: tabs.map((tab) => {
|
|
1789
1833
|
const active = tab.id === activeTab;
|
|
1790
|
-
return /* @__PURE__ */ (0,
|
|
1834
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
1791
1835
|
import_tamagui37.YStack,
|
|
1792
1836
|
{
|
|
1793
1837
|
flex: 1,
|
|
@@ -1797,8 +1841,8 @@ function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
|
1797
1841
|
pressStyle: { opacity: 0.6 },
|
|
1798
1842
|
onPress: () => onTabPress(tab.id),
|
|
1799
1843
|
children: [
|
|
1800
|
-
tab.icon && /* @__PURE__ */ (0,
|
|
1801
|
-
showLabels && /* @__PURE__ */ (0,
|
|
1844
|
+
tab.icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_tamagui37.SizableText, { size: "$5", color: active ? "$color9" : "$color8", children: tab.icon }),
|
|
1845
|
+
showLabels && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_tamagui37.SizableText, { size: "$1", color: active ? "$color9" : "$color8", fontWeight: active ? "600" : "400", children: tab.label })
|
|
1802
1846
|
]
|
|
1803
1847
|
},
|
|
1804
1848
|
tab.id
|
|
@@ -1808,11 +1852,11 @@ function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
|
1808
1852
|
|
|
1809
1853
|
// src/patterns/SearchBar.tsx
|
|
1810
1854
|
var import_tamagui38 = require("tamagui");
|
|
1811
|
-
var
|
|
1855
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1812
1856
|
function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter, onCancel, autoFocus }) {
|
|
1813
|
-
return /* @__PURE__ */ (0,
|
|
1814
|
-
/* @__PURE__ */ (0,
|
|
1815
|
-
/* @__PURE__ */ (0,
|
|
1857
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_tamagui38.XStack, { height: 44, borderRadius: "$10", backgroundColor: "$color2", alignItems: "center", paddingHorizontal: "$3", gap: "$2", children: [
|
|
1858
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_tamagui38.SizableText, { size: "$4", color: "$color8", children: "\u2315" }),
|
|
1859
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1816
1860
|
import_tamagui38.Input,
|
|
1817
1861
|
{
|
|
1818
1862
|
flex: 1,
|
|
@@ -1826,14 +1870,14 @@ function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter
|
|
|
1826
1870
|
autoFocus
|
|
1827
1871
|
}
|
|
1828
1872
|
),
|
|
1829
|
-
onFilter && /* @__PURE__ */ (0,
|
|
1830
|
-
onCancel && /* @__PURE__ */ (0,
|
|
1873
|
+
onFilter && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_tamagui38.SizableText, { size: "$4", color: "$color9", pressStyle: { opacity: 0.6 }, onPress: onFilter, children: "\u2ACF" }),
|
|
1874
|
+
onCancel && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_tamagui38.SizableText, { size: "$3", color: "$color9", pressStyle: { opacity: 0.6 }, onPress: onCancel, children: "Cancel" })
|
|
1831
1875
|
] });
|
|
1832
1876
|
}
|
|
1833
1877
|
|
|
1834
1878
|
// src/patterns/FloatingActionButton.tsx
|
|
1835
1879
|
var import_tamagui39 = require("tamagui");
|
|
1836
|
-
var
|
|
1880
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1837
1881
|
var sizes = { sm: 44, md: 56, lg: 68 };
|
|
1838
1882
|
var positionStyles = {
|
|
1839
1883
|
"bottom-right": { right: 20 },
|
|
@@ -1842,7 +1886,7 @@ var positionStyles = {
|
|
|
1842
1886
|
};
|
|
1843
1887
|
function FloatingActionButton({ icon, label, onPress, position = "bottom-right", size = "md" }) {
|
|
1844
1888
|
const dim = sizes[size];
|
|
1845
|
-
return /* @__PURE__ */ (0,
|
|
1889
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
1846
1890
|
import_tamagui39.XStack,
|
|
1847
1891
|
{
|
|
1848
1892
|
position: "absolute",
|
|
@@ -1860,8 +1904,8 @@ function FloatingActionButton({ icon, label, onPress, position = "bottom-right",
|
|
|
1860
1904
|
pressStyle: { scale: 0.95, opacity: 0.9 },
|
|
1861
1905
|
onPress,
|
|
1862
1906
|
children: [
|
|
1863
|
-
icon && /* @__PURE__ */ (0,
|
|
1864
|
-
label && /* @__PURE__ */ (0,
|
|
1907
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_tamagui39.SizableText, { color: "$color1", children: icon }),
|
|
1908
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_tamagui39.SizableText, { color: "$color1", size: "$4", fontWeight: "600", children: label })
|
|
1865
1909
|
]
|
|
1866
1910
|
}
|
|
1867
1911
|
);
|
|
@@ -1869,9 +1913,9 @@ function FloatingActionButton({ icon, label, onPress, position = "bottom-right",
|
|
|
1869
1913
|
|
|
1870
1914
|
// src/patterns/ActionSheet.tsx
|
|
1871
1915
|
var import_tamagui40 = require("tamagui");
|
|
1872
|
-
var
|
|
1916
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1873
1917
|
function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel = "Cancel", zIndex = 1e5 }) {
|
|
1874
|
-
return /* @__PURE__ */ (0,
|
|
1918
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
1875
1919
|
import_tamagui40.Sheet,
|
|
1876
1920
|
{
|
|
1877
1921
|
modal: true,
|
|
@@ -1883,11 +1927,11 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1883
1927
|
zIndex,
|
|
1884
1928
|
animation: "medium",
|
|
1885
1929
|
children: [
|
|
1886
|
-
/* @__PURE__ */ (0,
|
|
1887
|
-
/* @__PURE__ */ (0,
|
|
1888
|
-
/* @__PURE__ */ (0,
|
|
1889
|
-
title && /* @__PURE__ */ (0,
|
|
1890
|
-
/* @__PURE__ */ (0,
|
|
1930
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.Sheet.Overlay, { animation: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }),
|
|
1931
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.Sheet.Handle, {}),
|
|
1932
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_tamagui40.Sheet.Frame, { children: [
|
|
1933
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.SizableText, { size: "$3", color: "$color8", textAlign: "center", paddingTop: "$3", paddingBottom: "$1", children: title }),
|
|
1934
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.YStack, { paddingHorizontal: "$3", paddingTop: "$2", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
1891
1935
|
import_tamagui40.XStack,
|
|
1892
1936
|
{
|
|
1893
1937
|
height: 52,
|
|
@@ -1901,8 +1945,8 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1901
1945
|
onOpenChange(false);
|
|
1902
1946
|
},
|
|
1903
1947
|
children: [
|
|
1904
|
-
item.icon && /* @__PURE__ */ (0,
|
|
1905
|
-
/* @__PURE__ */ (0,
|
|
1948
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.SizableText, { size: "$5", children: item.icon }),
|
|
1949
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1906
1950
|
import_tamagui40.SizableText,
|
|
1907
1951
|
{
|
|
1908
1952
|
size: "$5",
|
|
@@ -1916,7 +1960,7 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1916
1960
|
},
|
|
1917
1961
|
item.id
|
|
1918
1962
|
)) }),
|
|
1919
|
-
/* @__PURE__ */ (0,
|
|
1963
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.YStack, { paddingHorizontal: "$3", paddingVertical: "$3", borderTopWidth: 1, borderTopColor: "$borderColor", marginTop: "$2", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1920
1964
|
import_tamagui40.XStack,
|
|
1921
1965
|
{
|
|
1922
1966
|
height: 48,
|
|
@@ -1925,7 +1969,7 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1925
1969
|
borderRadius: "$4",
|
|
1926
1970
|
pressStyle: { backgroundColor: "$color3" },
|
|
1927
1971
|
onPress: () => onOpenChange(false),
|
|
1928
|
-
children: /* @__PURE__ */ (0,
|
|
1972
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.SizableText, { size: "$5", fontWeight: "600", color: "$color9", children: cancelLabel })
|
|
1929
1973
|
}
|
|
1930
1974
|
) })
|
|
1931
1975
|
] })
|
|
@@ -1936,18 +1980,18 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1936
1980
|
|
|
1937
1981
|
// src/patterns/Skeleton.tsx
|
|
1938
1982
|
var import_tamagui41 = require("tamagui");
|
|
1939
|
-
var
|
|
1983
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1940
1984
|
function Skeleton({ width, height, borderRadius, variant = "rectangular" }) {
|
|
1941
1985
|
const size = variant === "circular" ? height ?? 40 : height;
|
|
1942
1986
|
const w = variant === "text" ? width ?? "100%" : width;
|
|
1943
1987
|
const h = variant === "text" ? height ?? 16 : size;
|
|
1944
1988
|
const r = variant === "circular" ? 9999 : borderRadius ?? 8;
|
|
1945
|
-
return /* @__PURE__ */ (0,
|
|
1989
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_tamagui41.YStack, { width: w, height: h, borderRadius: r, backgroundColor: "$color3", opacity: 0.6, animation: "slow", enterStyle: { opacity: 0.3 }, exitStyle: { opacity: 0.3 } });
|
|
1946
1990
|
}
|
|
1947
1991
|
|
|
1948
1992
|
// src/patterns/NotificationBanner.tsx
|
|
1949
1993
|
var import_tamagui42 = require("tamagui");
|
|
1950
|
-
var
|
|
1994
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1951
1995
|
var variantColors = {
|
|
1952
1996
|
info: { bg: "$blue3", text: "$blue11" },
|
|
1953
1997
|
success: { bg: "$green3", text: "$green11" },
|
|
@@ -1956,7 +2000,7 @@ var variantColors = {
|
|
|
1956
2000
|
};
|
|
1957
2001
|
function NotificationBanner({ title, message, variant = "info", onPress, onDismiss, icon }) {
|
|
1958
2002
|
const colors = variantColors[variant];
|
|
1959
|
-
return /* @__PURE__ */ (0,
|
|
2003
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
1960
2004
|
import_tamagui42.XStack,
|
|
1961
2005
|
{
|
|
1962
2006
|
backgroundColor: colors.bg,
|
|
@@ -1967,12 +2011,12 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
|
|
|
1967
2011
|
onPress,
|
|
1968
2012
|
pressStyle: onPress ? { opacity: 0.8 } : void 0,
|
|
1969
2013
|
children: [
|
|
1970
|
-
icon && /* @__PURE__ */ (0,
|
|
1971
|
-
/* @__PURE__ */ (0,
|
|
1972
|
-
/* @__PURE__ */ (0,
|
|
1973
|
-
message && /* @__PURE__ */ (0,
|
|
2014
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui42.YStack, { paddingTop: "$0.5", children: icon }),
|
|
2015
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_tamagui42.YStack, { flex: 1, gap: "$1", children: [
|
|
2016
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui42.SizableText, { size: "$4", fontWeight: "600", color: colors.text, children: title }),
|
|
2017
|
+
message && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui42.SizableText, { size: "$3", color: colors.text, opacity: 0.8, children: message })
|
|
1974
2018
|
] }),
|
|
1975
|
-
onDismiss && /* @__PURE__ */ (0,
|
|
2019
|
+
onDismiss && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui42.SizableText, { size: "$3", color: colors.text, opacity: 0.6, onPress: onDismiss, padding: "$1", children: "\u2715" })
|
|
1976
2020
|
]
|
|
1977
2021
|
}
|
|
1978
2022
|
);
|
|
@@ -1980,35 +2024,35 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
|
|
|
1980
2024
|
|
|
1981
2025
|
// src/patterns/ProgressSteps.tsx
|
|
1982
2026
|
var import_tamagui43 = require("tamagui");
|
|
1983
|
-
var
|
|
2027
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1984
2028
|
function ProgressSteps({ steps, currentStep, variant = "dots" }) {
|
|
1985
2029
|
if (variant === "bar") {
|
|
1986
2030
|
const progress = steps.length > 1 ? currentStep / (steps.length - 1) * 100 : 100;
|
|
1987
|
-
return /* @__PURE__ */ (0,
|
|
1988
|
-
/* @__PURE__ */ (0,
|
|
1989
|
-
/* @__PURE__ */ (0,
|
|
2031
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_tamagui43.YStack, { gap: "$2", children: [
|
|
2032
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.YStack, { height: 4, backgroundColor: "$color4", borderRadius: 2, overflow: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.YStack, { height: 4, width: `${progress}%`, backgroundColor: "$color9", borderRadius: 2, animation: "quick" }) }),
|
|
2033
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.XStack, { justifyContent: "space-between", children: steps.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.SizableText, { size: "$2", color: i <= currentStep ? "$color9" : "$color8", children: label }, i)) })
|
|
1990
2034
|
] });
|
|
1991
2035
|
}
|
|
1992
|
-
return /* @__PURE__ */ (0,
|
|
1993
|
-
/* @__PURE__ */ (0,
|
|
1994
|
-
/* @__PURE__ */ (0,
|
|
1995
|
-
/* @__PURE__ */ (0,
|
|
2036
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.XStack, { alignItems: "center", justifyContent: "center", gap: "$0", children: steps.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_tamagui43.XStack, { alignItems: "center", gap: "$0", children: [
|
|
2037
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_tamagui43.YStack, { alignItems: "center", gap: "$1.5", children: [
|
|
2038
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.Circle, { size: variant === "numbered" ? 28 : 10, backgroundColor: i <= currentStep ? "$color9" : "$color4", animation: "quick", children: variant === "numbered" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.SizableText, { size: "$2", fontWeight: "600", color: i <= currentStep ? "$color1" : "$color8", children: i + 1 }) }),
|
|
2039
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.SizableText, { size: "$1", color: i <= currentStep ? "$color11" : "$color8", numberOfLines: 1, children: label })
|
|
1996
2040
|
] }),
|
|
1997
|
-
i < steps.length - 1 && /* @__PURE__ */ (0,
|
|
2041
|
+
i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.YStack, { height: 2, width: 32, backgroundColor: i < currentStep ? "$color9" : "$color4", marginBottom: "$4" })
|
|
1998
2042
|
] }, i)) });
|
|
1999
2043
|
}
|
|
2000
2044
|
|
|
2001
2045
|
// src/patterns/SwipeableRow.tsx
|
|
2002
2046
|
var import_react10 = require("react");
|
|
2003
2047
|
var import_tamagui44 = require("tamagui");
|
|
2004
|
-
var
|
|
2048
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2005
2049
|
function SwipeableRow({ children, leftActions, rightActions }) {
|
|
2006
2050
|
const [showActions, setShowActions] = (0, import_react10.useState)(false);
|
|
2007
2051
|
const actions = [...leftActions ?? [], ...rightActions ?? []];
|
|
2008
|
-
if (actions.length === 0) return /* @__PURE__ */ (0,
|
|
2009
|
-
return /* @__PURE__ */ (0,
|
|
2010
|
-
/* @__PURE__ */ (0,
|
|
2011
|
-
showActions && /* @__PURE__ */ (0,
|
|
2052
|
+
if (actions.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
|
|
2053
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_tamagui44.YStack, { children: [
|
|
2054
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_tamagui44.YStack, { onLongPress: () => setShowActions((v) => !v), pressStyle: { opacity: 0.9 }, children }),
|
|
2055
|
+
showActions && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_tamagui44.XStack, { gap: "$2", padding: "$2", animation: "quick", enterStyle: { opacity: 0, scale: 0.95 }, children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2012
2056
|
import_tamagui44.Button,
|
|
2013
2057
|
{
|
|
2014
2058
|
flex: 1,
|
|
@@ -2019,7 +2063,7 @@ function SwipeableRow({ children, leftActions, rightActions }) {
|
|
|
2019
2063
|
action.onPress();
|
|
2020
2064
|
setShowActions(false);
|
|
2021
2065
|
},
|
|
2022
|
-
children: /* @__PURE__ */ (0,
|
|
2066
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_tamagui44.SizableText, { size: "$2", fontWeight: "600", color: "white", children: action.label })
|
|
2023
2067
|
},
|
|
2024
2068
|
action.id
|
|
2025
2069
|
)) })
|
|
@@ -2029,9 +2073,9 @@ function SwipeableRow({ children, leftActions, rightActions }) {
|
|
|
2029
2073
|
// src/patterns/MediaCard.tsx
|
|
2030
2074
|
var import_tamagui45 = require("tamagui");
|
|
2031
2075
|
var import_linear_gradient = require("tamagui/linear-gradient");
|
|
2032
|
-
var
|
|
2076
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2033
2077
|
function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio = 16 / 9, onPress, badge }) {
|
|
2034
|
-
return /* @__PURE__ */ (0,
|
|
2078
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2035
2079
|
import_tamagui45.YStack,
|
|
2036
2080
|
{
|
|
2037
2081
|
borderRadius: "$4",
|
|
@@ -2039,9 +2083,9 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
2039
2083
|
onPress,
|
|
2040
2084
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
2041
2085
|
animation: "quick",
|
|
2042
|
-
children: /* @__PURE__ */ (0,
|
|
2043
|
-
/* @__PURE__ */ (0,
|
|
2044
|
-
overlay === "gradient" && /* @__PURE__ */ (0,
|
|
2086
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_tamagui45.YStack, { aspectRatio, children: [
|
|
2087
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.Image, { source: { uri: image }, width: "100%", height: "100%", objectFit: "cover" }),
|
|
2088
|
+
overlay === "gradient" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2045
2089
|
import_linear_gradient.LinearGradient,
|
|
2046
2090
|
{
|
|
2047
2091
|
colors: ["transparent", "rgba(0,0,0,0.7)"],
|
|
@@ -2054,8 +2098,8 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
2054
2098
|
height: "60%"
|
|
2055
2099
|
}
|
|
2056
2100
|
),
|
|
2057
|
-
overlay === "dark" && /* @__PURE__ */ (0,
|
|
2058
|
-
badge && /* @__PURE__ */ (0,
|
|
2101
|
+
overlay === "dark" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.YStack, { position: "absolute", fullscreen: true, backgroundColor: "rgba(0,0,0,0.4)" }),
|
|
2102
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2059
2103
|
import_tamagui45.XStack,
|
|
2060
2104
|
{
|
|
2061
2105
|
position: "absolute",
|
|
@@ -2065,12 +2109,12 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
2065
2109
|
paddingHorizontal: "$2",
|
|
2066
2110
|
paddingVertical: "$1",
|
|
2067
2111
|
borderRadius: "$2",
|
|
2068
|
-
children: /* @__PURE__ */ (0,
|
|
2112
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.SizableText, { size: "$1", fontWeight: "600", color: "$color1", children: badge })
|
|
2069
2113
|
}
|
|
2070
2114
|
),
|
|
2071
|
-
/* @__PURE__ */ (0,
|
|
2072
|
-
/* @__PURE__ */ (0,
|
|
2073
|
-
subtitle && /* @__PURE__ */ (0,
|
|
2115
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_tamagui45.YStack, { position: "absolute", bottom: 0, left: 0, right: 0, padding: "$3", gap: "$1", children: [
|
|
2116
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.SizableText, { size: "$5", fontWeight: "600", color: "white", children: title }),
|
|
2117
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.SizableText, { size: "$3", color: "rgba(255,255,255,0.8)", children: subtitle })
|
|
2074
2118
|
] })
|
|
2075
2119
|
] })
|
|
2076
2120
|
}
|
|
@@ -2081,13 +2125,13 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
2081
2125
|
var import_react11 = require("react");
|
|
2082
2126
|
var import_tamagui46 = require("tamagui");
|
|
2083
2127
|
var import_react_native3 = require("react-native");
|
|
2084
|
-
var
|
|
2128
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2085
2129
|
function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false }) {
|
|
2086
2130
|
const [activeIndex, setActiveIndex] = (0, import_react11.useState)(0);
|
|
2087
2131
|
const count = import_react11.Children.count(children);
|
|
2088
2132
|
const gapPx = gap === "$2" ? 8 : gap === "$3" ? 12 : 16;
|
|
2089
|
-
return /* @__PURE__ */ (0,
|
|
2090
|
-
/* @__PURE__ */ (0,
|
|
2133
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_tamagui46.YStack, { gap: "$3", children: [
|
|
2134
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2091
2135
|
import_react_native3.ScrollView,
|
|
2092
2136
|
{
|
|
2093
2137
|
horizontal: true,
|
|
@@ -2101,50 +2145,50 @@ function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false
|
|
|
2101
2145
|
children
|
|
2102
2146
|
}
|
|
2103
2147
|
),
|
|
2104
|
-
showIndicators && count > 1 && /* @__PURE__ */ (0,
|
|
2148
|
+
showIndicators && count > 1 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_tamagui46.XStack, { justifyContent: "center", gap: "$1.5", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_tamagui46.Circle, { size: 6, backgroundColor: i === activeIndex ? "$color9" : "$color4", animation: "quick" }, i)) })
|
|
2105
2149
|
] });
|
|
2106
2150
|
}
|
|
2107
2151
|
|
|
2108
2152
|
// src/patterns/PullToRefresh.tsx
|
|
2109
2153
|
var import_tamagui47 = require("tamagui");
|
|
2110
2154
|
var import_react_native4 = require("react-native");
|
|
2111
|
-
var
|
|
2155
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2112
2156
|
function PullToRefresh({ children, onRefresh, refreshing = false }) {
|
|
2113
|
-
return /* @__PURE__ */ (0,
|
|
2157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
2114
2158
|
import_react_native4.ScrollView,
|
|
2115
2159
|
{
|
|
2116
2160
|
contentContainerStyle: { flexGrow: 1 },
|
|
2117
|
-
refreshControl: /* @__PURE__ */ (0,
|
|
2118
|
-
children: /* @__PURE__ */ (0,
|
|
2161
|
+
refreshControl: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native4.RefreshControl, { refreshing, onRefresh }),
|
|
2162
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_tamagui47.YStack, { flex: 1, children })
|
|
2119
2163
|
}
|
|
2120
2164
|
);
|
|
2121
2165
|
}
|
|
2122
2166
|
|
|
2123
2167
|
// src/patterns/ProductCard.tsx
|
|
2124
2168
|
var import_tamagui48 = require("tamagui");
|
|
2125
|
-
var
|
|
2169
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2126
2170
|
function Stars({ rating = 0 }) {
|
|
2127
|
-
return /* @__PURE__ */ (0,
|
|
2171
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.XStack, { gap: "$0.5", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.SizableText, { size: "$2", color: i < Math.round(rating) ? "$yellow9" : "$color5", children: "\u2605" }, i)) });
|
|
2128
2172
|
}
|
|
2129
2173
|
function CardContent2({ title, price, originalPrice, rating, reviewCount, onAddToCart }) {
|
|
2130
|
-
return /* @__PURE__ */ (0,
|
|
2131
|
-
/* @__PURE__ */ (0,
|
|
2132
|
-
/* @__PURE__ */ (0,
|
|
2133
|
-
rating !== void 0 && /* @__PURE__ */ (0,
|
|
2134
|
-
/* @__PURE__ */ (0,
|
|
2135
|
-
reviewCount !== void 0 && /* @__PURE__ */ (0,
|
|
2174
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.YStack, { flex: 1, gap: "$1.5", justifyContent: "space-between", children: [
|
|
2175
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.YStack, { gap: "$1", children: [
|
|
2176
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.SizableText, { size: "$4", fontWeight: "600", numberOfLines: 2, children: title }),
|
|
2177
|
+
rating !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.XStack, { gap: "$1.5", alignItems: "center", children: [
|
|
2178
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Stars, { rating }),
|
|
2179
|
+
reviewCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.SizableText, { size: "$2", color: "$color9", children: [
|
|
2136
2180
|
"(",
|
|
2137
2181
|
reviewCount,
|
|
2138
2182
|
")"
|
|
2139
2183
|
] })
|
|
2140
2184
|
] })
|
|
2141
2185
|
] }),
|
|
2142
|
-
/* @__PURE__ */ (0,
|
|
2143
|
-
/* @__PURE__ */ (0,
|
|
2144
|
-
/* @__PURE__ */ (0,
|
|
2145
|
-
originalPrice && /* @__PURE__ */ (0,
|
|
2186
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.XStack, { alignItems: "center", justifyContent: "space-between", children: [
|
|
2187
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.XStack, { gap: "$2", alignItems: "baseline", children: [
|
|
2188
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.SizableText, { size: "$6", fontWeight: "700", children: price }),
|
|
2189
|
+
originalPrice && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.SizableText, { size: "$3", color: "$color8", textDecorationLine: "line-through", children: originalPrice })
|
|
2146
2190
|
] }),
|
|
2147
|
-
onAddToCart && /* @__PURE__ */ (0,
|
|
2191
|
+
onAddToCart && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2148
2192
|
import_tamagui48.Button,
|
|
2149
2193
|
{
|
|
2150
2194
|
size: "$3",
|
|
@@ -2166,7 +2210,7 @@ function CardContent2({ title, price, originalPrice, rating, reviewCount, onAddT
|
|
|
2166
2210
|
function ProductCard({ image, title, price, originalPrice, rating, reviewCount, badge, onPress, onAddToCart, variant = "vertical" }) {
|
|
2167
2211
|
const isHorizontal = variant === "horizontal";
|
|
2168
2212
|
const Wrapper = isHorizontal ? import_tamagui48.XStack : import_tamagui48.YStack;
|
|
2169
|
-
return /* @__PURE__ */ (0,
|
|
2213
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
2170
2214
|
Wrapper,
|
|
2171
2215
|
{
|
|
2172
2216
|
backgroundColor: "$color1",
|
|
@@ -2179,9 +2223,9 @@ function ProductCard({ image, title, price, originalPrice, rating, reviewCount,
|
|
|
2179
2223
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
2180
2224
|
...isHorizontal ? { height: 140 } : {},
|
|
2181
2225
|
children: [
|
|
2182
|
-
/* @__PURE__ */ (0,
|
|
2183
|
-
/* @__PURE__ */ (0,
|
|
2184
|
-
badge && /* @__PURE__ */ (0,
|
|
2226
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.YStack, { ...isHorizontal ? { width: 140 } : { aspectRatio: 4 / 3 }, position: "relative", children: [
|
|
2227
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.Image, { source: { uri: image }, width: "100%", height: "100%", objectFit: "cover" }),
|
|
2228
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2185
2229
|
import_tamagui48.XStack,
|
|
2186
2230
|
{
|
|
2187
2231
|
position: "absolute",
|
|
@@ -2191,11 +2235,11 @@ function ProductCard({ image, title, price, originalPrice, rating, reviewCount,
|
|
|
2191
2235
|
paddingHorizontal: "$2",
|
|
2192
2236
|
paddingVertical: "$1",
|
|
2193
2237
|
borderRadius: "$10",
|
|
2194
|
-
children: /* @__PURE__ */ (0,
|
|
2238
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.SizableText, { size: "$1", fontWeight: "700", color: "white", children: badge })
|
|
2195
2239
|
}
|
|
2196
2240
|
)
|
|
2197
2241
|
] }),
|
|
2198
|
-
/* @__PURE__ */ (0,
|
|
2242
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.YStack, { flex: 1, padding: "$3", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CardContent2, { ...{ title, price, originalPrice, rating, reviewCount, onAddToCart } }) })
|
|
2199
2243
|
]
|
|
2200
2244
|
}
|
|
2201
2245
|
);
|
|
@@ -2203,11 +2247,11 @@ function ProductCard({ image, title, price, originalPrice, rating, reviewCount,
|
|
|
2203
2247
|
|
|
2204
2248
|
// src/patterns/PricingTable.tsx
|
|
2205
2249
|
var import_tamagui49 = require("tamagui");
|
|
2206
|
-
var
|
|
2250
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2207
2251
|
function BillingToggle({ annual, onToggle }) {
|
|
2208
|
-
return /* @__PURE__ */ (0,
|
|
2252
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.XStack, { alignSelf: "center", backgroundColor: "$color3", borderRadius: "$10", padding: "$1", gap: "$0.5", children: ["Monthly", "Annual"].map((label, i) => {
|
|
2209
2253
|
const active = i === 1 ? annual : !annual;
|
|
2210
|
-
return /* @__PURE__ */ (0,
|
|
2254
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2211
2255
|
import_tamagui49.XStack,
|
|
2212
2256
|
{
|
|
2213
2257
|
paddingHorizontal: "$4",
|
|
@@ -2217,96 +2261,86 @@ function BillingToggle({ annual, onToggle }) {
|
|
|
2217
2261
|
onPress: () => onToggle(i === 1),
|
|
2218
2262
|
pressStyle: { opacity: 0.8 },
|
|
2219
2263
|
animation: "quick",
|
|
2220
|
-
children: /* @__PURE__ */ (0,
|
|
2264
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$3", fontWeight: "600", color: active ? "$color1" : "$color10", children: label })
|
|
2221
2265
|
},
|
|
2222
2266
|
label
|
|
2223
2267
|
);
|
|
2224
2268
|
}) });
|
|
2225
2269
|
}
|
|
2226
|
-
function
|
|
2227
|
-
return /* @__PURE__ */ (0,
|
|
2228
|
-
import_tamagui49.
|
|
2270
|
+
function PlanRow2({ plan, selected, onSelect }) {
|
|
2271
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
2272
|
+
import_tamagui49.XStack,
|
|
2229
2273
|
{
|
|
2230
|
-
flex: 1,
|
|
2231
|
-
minWidth: 260,
|
|
2232
2274
|
padding: "$4",
|
|
2233
|
-
borderRadius: "$
|
|
2234
|
-
gap: "$3",
|
|
2275
|
+
borderRadius: "$6",
|
|
2235
2276
|
borderWidth: 2,
|
|
2236
|
-
borderColor: selected ? "$color9" :
|
|
2237
|
-
backgroundColor:
|
|
2238
|
-
|
|
2239
|
-
|
|
2240
|
-
animation: "quick",
|
|
2277
|
+
borderColor: selected ? "$color9" : "$color4",
|
|
2278
|
+
backgroundColor: selected ? "$color2" : "$color1",
|
|
2279
|
+
alignItems: "center",
|
|
2280
|
+
gap: "$3",
|
|
2241
2281
|
onPress: onSelect,
|
|
2282
|
+
pressStyle: { scale: 0.98, opacity: 0.9 },
|
|
2283
|
+
animation: "quick",
|
|
2284
|
+
cursor: "pointer",
|
|
2285
|
+
position: "relative",
|
|
2242
2286
|
children: [
|
|
2243
|
-
plan.popular && /* @__PURE__ */ (0,
|
|
2244
|
-
|
|
2287
|
+
plan.popular && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.XStack, { position: "absolute", top: -10, right: 12, backgroundColor: "$color9", paddingHorizontal: "$2.5", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$1", fontWeight: "700", color: "$color1", children: "BEST VALUE" }) }),
|
|
2288
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2289
|
+
import_tamagui49.Circle,
|
|
2245
2290
|
{
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
backgroundColor: "$color9",
|
|
2250
|
-
|
|
2251
|
-
paddingVertical: "$1",
|
|
2252
|
-
borderRadius: "$10",
|
|
2253
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui49.SizableText, { size: "$1", fontWeight: "700", color: "$color1", children: "POPULAR" })
|
|
2291
|
+
size: 22,
|
|
2292
|
+
borderWidth: 2,
|
|
2293
|
+
borderColor: selected ? "$color9" : "$color6",
|
|
2294
|
+
backgroundColor: selected ? "$color9" : "transparent",
|
|
2295
|
+
children: selected && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.Circle, { size: 8, backgroundColor: "$color1" })
|
|
2254
2296
|
}
|
|
2255
2297
|
),
|
|
2256
|
-
/* @__PURE__ */ (0,
|
|
2257
|
-
/* @__PURE__ */ (0,
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
"/",
|
|
2263
|
-
plan.period
|
|
2264
|
-
] })
|
|
2265
|
-
] })
|
|
2298
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_tamagui49.YStack, { flex: 1, gap: "$0.5", children: [
|
|
2299
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_tamagui49.XStack, { alignItems: "center", gap: "$2", children: [
|
|
2300
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$5", fontWeight: "700", children: plan.name }),
|
|
2301
|
+
plan.trial && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.XStack, { backgroundColor: "$green3", paddingHorizontal: "$2", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$1", fontWeight: "700", color: "$green9", children: plan.trial }) })
|
|
2302
|
+
] }),
|
|
2303
|
+
plan.description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$2", color: "$color10", children: plan.description })
|
|
2266
2304
|
] }),
|
|
2267
|
-
/* @__PURE__ */ (0,
|
|
2268
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui49.SizableText, { size: "$3", color: f.included ? "$green9" : "$color6", children: f.included ? "\u2713" : "\u2717" }),
|
|
2269
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui49.SizableText, { size: "$3", color: f.included ? "$color11" : "$color8", flex: 1, children: f.label })
|
|
2270
|
-
] }, i)) }),
|
|
2271
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2272
|
-
import_tamagui49.Button,
|
|
2273
|
-
{
|
|
2274
|
-
size: "$4",
|
|
2275
|
-
borderRadius: "$10",
|
|
2276
|
-
fontWeight: "700",
|
|
2277
|
-
animation: "quick",
|
|
2278
|
-
backgroundColor: selected || plan.popular ? "$color9" : "transparent",
|
|
2279
|
-
color: selected || plan.popular ? "$color1" : "$color11",
|
|
2280
|
-
borderWidth: selected || plan.popular ? 0 : 1,
|
|
2281
|
-
borderColor: "$color7",
|
|
2282
|
-
onPress: onSelect,
|
|
2283
|
-
pressStyle: { scale: 0.97, opacity: 0.9 },
|
|
2284
|
-
children: plan.cta ?? "Get Started"
|
|
2285
|
-
}
|
|
2286
|
-
)
|
|
2305
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$5", fontWeight: "800", children: plan.price })
|
|
2287
2306
|
]
|
|
2288
2307
|
}
|
|
2289
2308
|
);
|
|
2290
2309
|
}
|
|
2291
|
-
function
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
2296
|
-
|
|
2310
|
+
function FeatureList({ features }) {
|
|
2311
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.YStack, { gap: "$2.5", paddingHorizontal: "$1", children: features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_tamagui49.XStack, { gap: "$2.5", alignItems: "center", children: [
|
|
2312
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.Circle, { size: 20, backgroundColor: f.included ? "$green3" : "$color3", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$1", fontWeight: "700", color: f.included ? "$green9" : "$color8", children: f.included ? "\u2713" : "\u2014" }) }),
|
|
2313
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$3", color: f.included ? "$color11" : "$color8", flex: 1, children: f.label })
|
|
2314
|
+
] }, i)) });
|
|
2315
|
+
}
|
|
2316
|
+
function PricingTable({ plans, selectedPlan, onSelectPlan, annual = false, onToggleBilling, onContinue, continueLabel, reassurance }) {
|
|
2317
|
+
const selected = selectedPlan ?? plans.find((p) => p.popular)?.id ?? plans[0]?.id;
|
|
2318
|
+
const activePlan = plans.find((p) => p.id === selected);
|
|
2319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_tamagui49.YStack, { gap: "$4", children: [
|
|
2320
|
+
onToggleBilling && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(BillingToggle, { annual, onToggle: onToggleBilling }),
|
|
2321
|
+
activePlan && activePlan.features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.YStack, { backgroundColor: "$color1", borderRadius: "$6", padding: "$4", gap: "$3", borderWidth: 1, borderColor: "$color4", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FeatureList, { features: activePlan.features }) }),
|
|
2322
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.YStack, { gap: "$3", children: plans.map((plan) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2323
|
+
PlanRow2,
|
|
2297
2324
|
{
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2325
|
+
plan,
|
|
2326
|
+
selected: selected === plan.id,
|
|
2327
|
+
onSelect: () => onSelectPlan?.(plan.id)
|
|
2328
|
+
},
|
|
2329
|
+
plan.id
|
|
2330
|
+
)) }),
|
|
2331
|
+
reassurance && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$2", color: "$color10", textAlign: "center", children: reassurance }),
|
|
2332
|
+
onContinue && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2333
|
+
import_tamagui49.Button,
|
|
2334
|
+
{
|
|
2335
|
+
size: "$5",
|
|
2336
|
+
backgroundColor: "$color9",
|
|
2337
|
+
color: "$color1",
|
|
2338
|
+
borderRadius: "$10",
|
|
2339
|
+
fontWeight: "700",
|
|
2340
|
+
onPress: onContinue,
|
|
2341
|
+
pressStyle: { scale: 0.97, backgroundColor: "$color8" },
|
|
2342
|
+
animation: "quick",
|
|
2343
|
+
children: continueLabel ?? activePlan?.cta ?? "Get Started"
|
|
2310
2344
|
}
|
|
2311
2345
|
)
|
|
2312
2346
|
] });
|
|
@@ -2315,7 +2349,7 @@ function PricingTable({ plans, selectedPlan, onSelectPlan, annual = false, onTog
|
|
|
2315
2349
|
// src/patterns/CountdownBanner.tsx
|
|
2316
2350
|
var import_react12 = require("react");
|
|
2317
2351
|
var import_tamagui50 = require("tamagui");
|
|
2318
|
-
var
|
|
2352
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2319
2353
|
function useCountdown2(endTime, minutes, onExpire) {
|
|
2320
2354
|
const getRemaining = (0, import_react12.useCallback)(() => {
|
|
2321
2355
|
if (endTime) return Math.max(0, Math.floor((endTime.getTime() - Date.now()) / 1e3));
|
|
@@ -2349,74 +2383,74 @@ function useCountdown2(endTime, minutes, onExpire) {
|
|
|
2349
2383
|
return { display, expired: seconds <= 0 };
|
|
2350
2384
|
}
|
|
2351
2385
|
function TimeBox({ value }) {
|
|
2352
|
-
return /* @__PURE__ */ (0,
|
|
2386
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.XStack, { backgroundColor: "rgba(0,0,0,0.15)", paddingHorizontal: "$2", paddingVertical: "$1", borderRadius: "$3", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$6", fontWeight: "800", color: "white", fontFamily: "$mono", children: value }) });
|
|
2353
2387
|
}
|
|
2354
2388
|
function CountdownBanner({ endTime, minutes, label = "Offer ends in", onExpire, variant = "banner" }) {
|
|
2355
2389
|
const { display, expired } = useCountdown2(endTime, minutes, onExpire);
|
|
2356
2390
|
if (expired) return null;
|
|
2357
2391
|
const parts = display.split(":");
|
|
2358
2392
|
if (variant === "badge") {
|
|
2359
|
-
return /* @__PURE__ */ (0,
|
|
2360
|
-
/* @__PURE__ */ (0,
|
|
2361
|
-
/* @__PURE__ */ (0,
|
|
2393
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_tamagui50.XStack, { backgroundColor: "$red9", paddingHorizontal: "$2.5", paddingVertical: "$1", borderRadius: "$10", gap: "$1.5", alignItems: "center", children: [
|
|
2394
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$1", fontWeight: "600", color: "white", children: label }),
|
|
2395
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$2", fontWeight: "800", color: "white", fontFamily: "$mono", children: display })
|
|
2362
2396
|
] });
|
|
2363
2397
|
}
|
|
2364
2398
|
if (variant === "compact") {
|
|
2365
|
-
return /* @__PURE__ */ (0,
|
|
2366
|
-
/* @__PURE__ */ (0,
|
|
2367
|
-
/* @__PURE__ */ (0,
|
|
2399
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_tamagui50.XStack, { backgroundColor: "$red3", paddingHorizontal: "$3", paddingVertical: "$2", borderRadius: "$4", gap: "$2", alignItems: "center", alignSelf: "center", children: [
|
|
2400
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$3", fontWeight: "600", color: "$red9", children: label }),
|
|
2401
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$5", fontWeight: "800", color: "$red9", fontFamily: "$mono", children: display })
|
|
2368
2402
|
] });
|
|
2369
2403
|
}
|
|
2370
|
-
return /* @__PURE__ */ (0,
|
|
2371
|
-
/* @__PURE__ */ (0,
|
|
2372
|
-
/* @__PURE__ */ (0,
|
|
2373
|
-
i > 0 && /* @__PURE__ */ (0,
|
|
2374
|
-
/* @__PURE__ */ (0,
|
|
2404
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_tamagui50.YStack, { backgroundColor: "$red9", paddingVertical: "$3", paddingHorizontal: "$4", gap: "$1.5", alignItems: "center", children: [
|
|
2405
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$3", fontWeight: "600", color: "white", opacity: 0.9, children: label }),
|
|
2406
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.XStack, { gap: "$1.5", alignItems: "center", children: parts.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_tamagui50.XStack, { gap: "$1.5", alignItems: "center", children: [
|
|
2407
|
+
i > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$6", fontWeight: "800", color: "white", children: ":" }),
|
|
2408
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TimeBox, { value: p })
|
|
2375
2409
|
] }, i)) })
|
|
2376
2410
|
] });
|
|
2377
2411
|
}
|
|
2378
2412
|
|
|
2379
2413
|
// src/patterns/TestimonialCard.tsx
|
|
2380
2414
|
var import_tamagui51 = require("tamagui");
|
|
2381
|
-
var
|
|
2415
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2382
2416
|
function Stars2({ count = 0 }) {
|
|
2383
2417
|
if (!count) return null;
|
|
2384
|
-
return /* @__PURE__ */ (0,
|
|
2418
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.XStack, { gap: "$0.5", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.SizableText, { size: "$3", color: i < Math.round(count) ? "$yellow9" : "$color5", children: "\u2605" }, i)) });
|
|
2385
2419
|
}
|
|
2386
2420
|
function AuthorRow({ author, role, avatar }) {
|
|
2387
|
-
return /* @__PURE__ */ (0,
|
|
2388
|
-
avatar && /* @__PURE__ */ (0,
|
|
2389
|
-
/* @__PURE__ */ (0,
|
|
2390
|
-
/* @__PURE__ */ (0,
|
|
2391
|
-
role && /* @__PURE__ */ (0,
|
|
2421
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.XStack, { gap: "$2.5", alignItems: "center", children: [
|
|
2422
|
+
avatar && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.Image, { source: { uri: avatar }, width: 36, height: 36, borderRadius: 18, objectFit: "cover" }),
|
|
2423
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.YStack, { children: [
|
|
2424
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.SizableText, { size: "$3", fontWeight: "600", children: author }),
|
|
2425
|
+
role && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.SizableText, { size: "$2", color: "$color9", children: role })
|
|
2392
2426
|
] })
|
|
2393
2427
|
] });
|
|
2394
2428
|
}
|
|
2395
2429
|
function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card" }) {
|
|
2396
2430
|
if (variant === "minimal") {
|
|
2397
|
-
return /* @__PURE__ */ (0,
|
|
2398
|
-
/* @__PURE__ */ (0,
|
|
2399
|
-
/* @__PURE__ */ (0,
|
|
2431
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.YStack, { gap: "$3", paddingVertical: "$2", children: [
|
|
2432
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Stars2, { count: rating }),
|
|
2433
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.SizableText, { size: "$4", color: "$color11", fontStyle: "italic", lineHeight: 24, children: [
|
|
2400
2434
|
'"',
|
|
2401
2435
|
quote,
|
|
2402
2436
|
'"'
|
|
2403
2437
|
] }),
|
|
2404
|
-
/* @__PURE__ */ (0,
|
|
2438
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AuthorRow, { author, role, avatar })
|
|
2405
2439
|
] });
|
|
2406
2440
|
}
|
|
2407
2441
|
if (variant === "featured") {
|
|
2408
|
-
return /* @__PURE__ */ (0,
|
|
2409
|
-
/* @__PURE__ */ (0,
|
|
2410
|
-
/* @__PURE__ */ (0,
|
|
2411
|
-
/* @__PURE__ */ (0,
|
|
2442
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.YStack, { backgroundColor: "$color3", padding: "$5", borderRadius: "$6", gap: "$4", alignItems: "center", children: [
|
|
2443
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.SizableText, { size: "$8", color: "$color9", opacity: 0.3, fontWeight: "800", children: '"' }),
|
|
2444
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Stars2, { count: rating }),
|
|
2445
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.SizableText, { size: "$5", color: "$color12", fontStyle: "italic", textAlign: "center", lineHeight: 28, children: [
|
|
2412
2446
|
'"',
|
|
2413
2447
|
quote,
|
|
2414
2448
|
'"'
|
|
2415
2449
|
] }),
|
|
2416
|
-
/* @__PURE__ */ (0,
|
|
2450
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AuthorRow, { author, role, avatar })
|
|
2417
2451
|
] });
|
|
2418
2452
|
}
|
|
2419
|
-
return /* @__PURE__ */ (0,
|
|
2453
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
2420
2454
|
import_tamagui51.YStack,
|
|
2421
2455
|
{
|
|
2422
2456
|
backgroundColor: "$color1",
|
|
@@ -2426,13 +2460,13 @@ function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card
|
|
|
2426
2460
|
borderColor: "$color4",
|
|
2427
2461
|
gap: "$3",
|
|
2428
2462
|
children: [
|
|
2429
|
-
/* @__PURE__ */ (0,
|
|
2430
|
-
/* @__PURE__ */ (0,
|
|
2463
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Stars2, { count: rating }),
|
|
2464
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.SizableText, { size: "$4", color: "$color11", fontStyle: "italic", lineHeight: 24, children: [
|
|
2431
2465
|
'"',
|
|
2432
2466
|
quote,
|
|
2433
2467
|
'"'
|
|
2434
2468
|
] }),
|
|
2435
|
-
/* @__PURE__ */ (0,
|
|
2469
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AuthorRow, { author, role, avatar })
|
|
2436
2470
|
]
|
|
2437
2471
|
}
|
|
2438
2472
|
);
|
|
@@ -2440,7 +2474,7 @@ function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card
|
|
|
2440
2474
|
|
|
2441
2475
|
// src/patterns/ConfirmDialog.tsx
|
|
2442
2476
|
var import_tamagui52 = require("tamagui");
|
|
2443
|
-
var
|
|
2477
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2444
2478
|
function ConfirmDialog({
|
|
2445
2479
|
open,
|
|
2446
2480
|
onOpenChange,
|
|
@@ -2461,8 +2495,8 @@ function ConfirmDialog({
|
|
|
2461
2495
|
onConfirm?.();
|
|
2462
2496
|
onOpenChange(false);
|
|
2463
2497
|
};
|
|
2464
|
-
return /* @__PURE__ */ (0,
|
|
2465
|
-
/* @__PURE__ */ (0,
|
|
2498
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_tamagui52.AlertDialog.Portal, { children: [
|
|
2499
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2466
2500
|
import_tamagui52.AlertDialog.Overlay,
|
|
2467
2501
|
{
|
|
2468
2502
|
opacity: 0.5,
|
|
@@ -2472,7 +2506,7 @@ function ConfirmDialog({
|
|
|
2472
2506
|
},
|
|
2473
2507
|
"overlay"
|
|
2474
2508
|
),
|
|
2475
|
-
/* @__PURE__ */ (0,
|
|
2509
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2476
2510
|
import_tamagui52.AlertDialog.Content,
|
|
2477
2511
|
{
|
|
2478
2512
|
bordered: true,
|
|
@@ -2486,11 +2520,11 @@ function ConfirmDialog({
|
|
|
2486
2520
|
scale: 1,
|
|
2487
2521
|
opacity: 1,
|
|
2488
2522
|
animation: "quick",
|
|
2489
|
-
children: /* @__PURE__ */ (0,
|
|
2490
|
-
icon && /* @__PURE__ */ (0,
|
|
2491
|
-
/* @__PURE__ */ (0,
|
|
2492
|
-
/* @__PURE__ */ (0,
|
|
2493
|
-
description && /* @__PURE__ */ (0,
|
|
2523
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_tamagui52.YStack, { gap: "$4", padding: "$4", children: [
|
|
2524
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.YStack, { alignItems: "center", children: icon }),
|
|
2525
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_tamagui52.YStack, { gap: "$2", alignItems: icon ? "center" : "flex-start", children: [
|
|
2526
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.AlertDialog.Title, { size: "$6", fontWeight: "700", children: title }),
|
|
2527
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2494
2528
|
import_tamagui52.AlertDialog.Description,
|
|
2495
2529
|
{
|
|
2496
2530
|
size: "$3",
|
|
@@ -2500,8 +2534,8 @@ function ConfirmDialog({
|
|
|
2500
2534
|
}
|
|
2501
2535
|
)
|
|
2502
2536
|
] }),
|
|
2503
|
-
/* @__PURE__ */ (0,
|
|
2504
|
-
/* @__PURE__ */ (0,
|
|
2537
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_tamagui52.XStack, { gap: "$3", justifyContent: "flex-end", children: [
|
|
2538
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2505
2539
|
import_tamagui52.Button,
|
|
2506
2540
|
{
|
|
2507
2541
|
flex: 1,
|
|
@@ -2512,10 +2546,10 @@ function ConfirmDialog({
|
|
|
2512
2546
|
onPress: handleCancel,
|
|
2513
2547
|
pressStyle: { opacity: 0.7 },
|
|
2514
2548
|
animation: "quick",
|
|
2515
|
-
children: /* @__PURE__ */ (0,
|
|
2549
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.SizableText, { fontWeight: "600", children: cancelLabel })
|
|
2516
2550
|
}
|
|
2517
2551
|
),
|
|
2518
|
-
/* @__PURE__ */ (0,
|
|
2552
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2519
2553
|
import_tamagui52.Button,
|
|
2520
2554
|
{
|
|
2521
2555
|
flex: 1,
|
|
@@ -2525,7 +2559,7 @@ function ConfirmDialog({
|
|
|
2525
2559
|
onPress: handleConfirm,
|
|
2526
2560
|
pressStyle: { backgroundColor: destructive ? "$red8" : "$color8", scale: 0.97 },
|
|
2527
2561
|
animation: "quick",
|
|
2528
|
-
children: /* @__PURE__ */ (0,
|
|
2562
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.SizableText, { fontWeight: "600", color: "white", children: confirmLabel })
|
|
2529
2563
|
}
|
|
2530
2564
|
)
|
|
2531
2565
|
] })
|
|
@@ -2539,7 +2573,7 @@ function ConfirmDialog({
|
|
|
2539
2573
|
// src/patterns/Chip.tsx
|
|
2540
2574
|
var import_react13 = require("react");
|
|
2541
2575
|
var import_tamagui53 = require("tamagui");
|
|
2542
|
-
var
|
|
2576
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2543
2577
|
var sizes2 = { sm: { h: 28, px: "$2", text: "$2" }, md: { h: 34, px: "$3", text: "$3" }, lg: { h: 42, px: "$4", text: "$4" } };
|
|
2544
2578
|
function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "md", icon, color }) {
|
|
2545
2579
|
const s = sizes2[size];
|
|
@@ -2548,7 +2582,7 @@ function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "
|
|
|
2548
2582
|
const bg = active ? color ?? "$color9" : filled ? "$color3" : "transparent";
|
|
2549
2583
|
const border = active ? color ?? "$color9" : "$color6";
|
|
2550
2584
|
const fg = active ? "$color1" : "$color11";
|
|
2551
|
-
return /* @__PURE__ */ (0,
|
|
2585
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
2552
2586
|
import_tamagui53.XStack,
|
|
2553
2587
|
{
|
|
2554
2588
|
height: s.h,
|
|
@@ -2564,10 +2598,10 @@ function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "
|
|
|
2564
2598
|
onPress,
|
|
2565
2599
|
cursor: "pointer",
|
|
2566
2600
|
children: [
|
|
2567
|
-
active && /* @__PURE__ */ (0,
|
|
2568
|
-
icon && /* @__PURE__ */ (0,
|
|
2569
|
-
/* @__PURE__ */ (0,
|
|
2570
|
-
onRemove && /* @__PURE__ */ (0,
|
|
2601
|
+
active && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_tamagui53.SizableText, { size: s.text, color: fg, children: "\u2713" }),
|
|
2602
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_tamagui53.SizableText, { color: fg, children: icon }),
|
|
2603
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_tamagui53.SizableText, { size: s.text, color: fg, fontWeight: "500", children: label }),
|
|
2604
|
+
onRemove && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
2571
2605
|
import_tamagui53.SizableText,
|
|
2572
2606
|
{
|
|
2573
2607
|
size: "$2",
|
|
@@ -2596,7 +2630,7 @@ function ChipGroup({ chips, selected = [], onSelectionChange, multiSelect = true
|
|
|
2596
2630
|
onSelectionChange(isSelected ? [] : [id]);
|
|
2597
2631
|
}
|
|
2598
2632
|
}, [selected, onSelectionChange, multiSelect]);
|
|
2599
|
-
return /* @__PURE__ */ (0,
|
|
2633
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_tamagui53.XStack, { flexWrap: "wrap", gap: "$2", children: chips.map((chip) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
2600
2634
|
Chip,
|
|
2601
2635
|
{
|
|
2602
2636
|
label: chip.label,
|
|
@@ -2614,7 +2648,7 @@ function ChipGroup({ chips, selected = [], onSelectionChange, multiSelect = true
|
|
|
2614
2648
|
var import_react14 = require("react");
|
|
2615
2649
|
var import_react_native5 = require("react-native");
|
|
2616
2650
|
var import_tamagui54 = require("tamagui");
|
|
2617
|
-
var
|
|
2651
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2618
2652
|
function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFocus, secureEntry }) {
|
|
2619
2653
|
const inputRef = (0, import_react14.useRef)(null);
|
|
2620
2654
|
const [focused, setFocused] = (0, import_react14.useState)(false);
|
|
@@ -2627,11 +2661,11 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2627
2661
|
const focusInput = (0, import_react14.useCallback)(() => {
|
|
2628
2662
|
inputRef.current?.focus();
|
|
2629
2663
|
}, []);
|
|
2630
|
-
return /* @__PURE__ */ (0,
|
|
2631
|
-
/* @__PURE__ */ (0,
|
|
2664
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_tamagui54.YStack, { position: "relative", children: [
|
|
2665
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_tamagui54.XStack, { gap: "$2", justifyContent: "center", children: Array.from({ length }, (_, i) => {
|
|
2632
2666
|
const char = digits[i]?.trim();
|
|
2633
2667
|
const isCursor = focused && value.length === i;
|
|
2634
|
-
return /* @__PURE__ */ (0,
|
|
2668
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
2635
2669
|
import_tamagui54.YStack,
|
|
2636
2670
|
{
|
|
2637
2671
|
width: 48,
|
|
@@ -2645,8 +2679,8 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2645
2679
|
animation: "quick",
|
|
2646
2680
|
pointerEvents: "none",
|
|
2647
2681
|
children: [
|
|
2648
|
-
/* @__PURE__ */ (0,
|
|
2649
|
-
isCursor && /* @__PURE__ */ (0,
|
|
2682
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_tamagui54.SizableText, { size: "$7", fontWeight: "600", color: "$color12", children: char ? secureEntry ? "\u25CF" : char : "" }),
|
|
2683
|
+
isCursor && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
2650
2684
|
import_tamagui54.YStack,
|
|
2651
2685
|
{
|
|
2652
2686
|
position: "absolute",
|
|
@@ -2662,7 +2696,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2662
2696
|
i
|
|
2663
2697
|
);
|
|
2664
2698
|
}) }),
|
|
2665
|
-
import_react_native5.Platform.OS === "web" ? /* @__PURE__ */ (0,
|
|
2699
|
+
import_react_native5.Platform.OS === "web" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
2666
2700
|
"input",
|
|
2667
2701
|
{
|
|
2668
2702
|
ref: inputRef,
|
|
@@ -2690,7 +2724,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2690
2724
|
cursor: "pointer"
|
|
2691
2725
|
}
|
|
2692
2726
|
}
|
|
2693
|
-
) : /* @__PURE__ */ (0,
|
|
2727
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
2694
2728
|
import_tamagui54.Input,
|
|
2695
2729
|
{
|
|
2696
2730
|
ref: inputRef,
|
|
@@ -2716,7 +2750,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2716
2750
|
// src/patterns/PasswordInput.tsx
|
|
2717
2751
|
var import_react15 = require("react");
|
|
2718
2752
|
var import_tamagui55 = require("tamagui");
|
|
2719
|
-
var
|
|
2753
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
2720
2754
|
function getStrength(pw) {
|
|
2721
2755
|
if (!pw) return { label: "", color: "$color6", width: "0%" };
|
|
2722
2756
|
const score = [pw.length >= 8, /[A-Z]/.test(pw), /[0-9]/.test(pw), /[^A-Za-z0-9]/.test(pw)].filter(Boolean).length;
|
|
@@ -2728,9 +2762,9 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2728
2762
|
const [visible, setVisible] = (0, import_react15.useState)(false);
|
|
2729
2763
|
const toggle = (0, import_react15.useCallback)(() => setVisible((v) => !v), []);
|
|
2730
2764
|
const strength = getStrength(value);
|
|
2731
|
-
return /* @__PURE__ */ (0,
|
|
2732
|
-
label && /* @__PURE__ */ (0,
|
|
2733
|
-
/* @__PURE__ */ (0,
|
|
2765
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_tamagui55.YStack, { gap: "$1.5", children: [
|
|
2766
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_tamagui55.SizableText, { size: "$3", color: "$color11", fontWeight: "500", children: label }),
|
|
2767
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
|
|
2734
2768
|
import_tamagui55.XStack,
|
|
2735
2769
|
{
|
|
2736
2770
|
borderWidth: 1,
|
|
@@ -2741,7 +2775,7 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2741
2775
|
paddingRight: "$2",
|
|
2742
2776
|
focusStyle: { borderColor: "$color9" },
|
|
2743
2777
|
children: [
|
|
2744
|
-
/* @__PURE__ */ (0,
|
|
2778
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
2745
2779
|
import_tamagui55.Input,
|
|
2746
2780
|
{
|
|
2747
2781
|
flex: 1,
|
|
@@ -2755,7 +2789,7 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2755
2789
|
borderWidth: 0
|
|
2756
2790
|
}
|
|
2757
2791
|
),
|
|
2758
|
-
/* @__PURE__ */ (0,
|
|
2792
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
2759
2793
|
import_tamagui55.SizableText,
|
|
2760
2794
|
{
|
|
2761
2795
|
size: "$4",
|
|
@@ -2770,23 +2804,23 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2770
2804
|
]
|
|
2771
2805
|
}
|
|
2772
2806
|
),
|
|
2773
|
-
strengthIndicator && value.length > 0 && /* @__PURE__ */ (0,
|
|
2774
|
-
/* @__PURE__ */ (0,
|
|
2775
|
-
/* @__PURE__ */ (0,
|
|
2807
|
+
strengthIndicator && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_tamagui55.YStack, { gap: "$1", children: [
|
|
2808
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_tamagui55.YStack, { height: 3, backgroundColor: "$color4", borderRadius: 2, overflow: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_tamagui55.YStack, { height: 3, width: strength.width, backgroundColor: strength.color, borderRadius: 2, animation: "quick" }) }),
|
|
2809
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_tamagui55.SizableText, { size: "$1", color: strength.color, children: strength.label })
|
|
2776
2810
|
] }),
|
|
2777
|
-
error && /* @__PURE__ */ (0,
|
|
2811
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_tamagui55.SizableText, { size: "$2", color: "$red9", children: error })
|
|
2778
2812
|
] });
|
|
2779
2813
|
}
|
|
2780
2814
|
|
|
2781
2815
|
// src/patterns/AvatarGroup.tsx
|
|
2782
2816
|
var import_tamagui56 = require("tamagui");
|
|
2783
|
-
var
|
|
2817
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
2784
2818
|
function getInitials(name) {
|
|
2785
2819
|
if (!name) return "?";
|
|
2786
2820
|
return name.split(" ").map((p) => p[0]).join("").toUpperCase().slice(0, 2);
|
|
2787
2821
|
}
|
|
2788
2822
|
function AvatarItem({ uri, name, color, size }) {
|
|
2789
|
-
return /* @__PURE__ */ (0,
|
|
2823
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
2790
2824
|
import_tamagui56.Circle,
|
|
2791
2825
|
{
|
|
2792
2826
|
size,
|
|
@@ -2796,16 +2830,16 @@ function AvatarItem({ uri, name, color, size }) {
|
|
|
2796
2830
|
overflow: "hidden",
|
|
2797
2831
|
alignItems: "center",
|
|
2798
2832
|
justifyContent: "center",
|
|
2799
|
-
children: uri ? /* @__PURE__ */ (0,
|
|
2833
|
+
children: uri ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tamagui56.Image, { source: { uri }, width: size, height: size, objectFit: "cover" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tamagui56.SizableText, { size: "$2", fontWeight: "600", color: color ? "$color1" : "$color11", children: getInitials(name) })
|
|
2800
2834
|
}
|
|
2801
2835
|
);
|
|
2802
2836
|
}
|
|
2803
2837
|
function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
2804
2838
|
const visible = avatars.slice(0, max);
|
|
2805
2839
|
const remaining = avatars.length - max;
|
|
2806
|
-
return /* @__PURE__ */ (0,
|
|
2807
|
-
visible.map((avatar, i) => /* @__PURE__ */ (0,
|
|
2808
|
-
remaining > 0 && /* @__PURE__ */ (0,
|
|
2840
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_tamagui56.XStack, { alignItems: "center", children: [
|
|
2841
|
+
visible.map((avatar, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tamagui56.XStack, { marginLeft: i === 0 ? 0 : -overlap, zIndex: visible.length - i, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AvatarItem, { ...avatar, size }) }, i)),
|
|
2842
|
+
remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tamagui56.XStack, { marginLeft: -overlap, zIndex: 0, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
2809
2843
|
import_tamagui56.Circle,
|
|
2810
2844
|
{
|
|
2811
2845
|
size,
|
|
@@ -2814,7 +2848,7 @@ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
|
2814
2848
|
borderColor: "$background",
|
|
2815
2849
|
alignItems: "center",
|
|
2816
2850
|
justifyContent: "center",
|
|
2817
|
-
children: /* @__PURE__ */ (0,
|
|
2851
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_tamagui56.SizableText, { size: "$2", fontWeight: "600", color: "$color11", children: [
|
|
2818
2852
|
"+",
|
|
2819
2853
|
remaining
|
|
2820
2854
|
] })
|
|
@@ -2826,7 +2860,7 @@ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
|
2826
2860
|
// src/patterns/SwipeCards.tsx
|
|
2827
2861
|
var import_react16 = require("react");
|
|
2828
2862
|
var import_tamagui57 = require("tamagui");
|
|
2829
|
-
var
|
|
2863
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
2830
2864
|
var STACK_SIZE = 3;
|
|
2831
2865
|
var CARD_OFFSETS = [
|
|
2832
2866
|
{ scale: 1, y: 0, opacity: 1 },
|
|
@@ -2863,16 +2897,16 @@ function SwipeCards({
|
|
|
2863
2897
|
return () => clearTimeout(timer);
|
|
2864
2898
|
}, [isEmpty, index, items, onEmpty, onSwipeLeft, onSwipeRight]);
|
|
2865
2899
|
if (isEmpty) {
|
|
2866
|
-
return /* @__PURE__ */ (0,
|
|
2900
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.YStack, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$3", padding: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$5", color: "$color8", children: emptyMessage }) });
|
|
2867
2901
|
}
|
|
2868
|
-
return /* @__PURE__ */ (0,
|
|
2869
|
-
/* @__PURE__ */ (0,
|
|
2902
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_tamagui57.YStack, { flex: 1, gap: "$4", children: [
|
|
2903
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.YStack, { flex: 1, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.YStack, { width: "100%", maxWidth: 340, aspectRatio: 3 / 4, position: "relative", children: remaining.slice(0, STACK_SIZE).reverse().map((item, reverseIdx) => {
|
|
2870
2904
|
const stackIdx = Math.min(remaining.length, STACK_SIZE) - 1 - reverseIdx;
|
|
2871
2905
|
const isTop = stackIdx === 0;
|
|
2872
2906
|
const offset = CARD_OFFSETS[stackIdx] ?? CARD_OFFSETS[2];
|
|
2873
2907
|
const exitX = exitDir === "left" ? -400 : exitDir === "right" ? 400 : 0;
|
|
2874
2908
|
const exitRotate = exitDir === "left" ? "-15deg" : exitDir === "right" ? "15deg" : "0deg";
|
|
2875
|
-
return /* @__PURE__ */ (0,
|
|
2909
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
|
|
2876
2910
|
import_tamagui57.YStack,
|
|
2877
2911
|
{
|
|
2878
2912
|
position: "absolute",
|
|
@@ -2884,7 +2918,7 @@ function SwipeCards({
|
|
|
2884
2918
|
borderRadius: "$5",
|
|
2885
2919
|
overflow: "hidden",
|
|
2886
2920
|
backgroundColor: "$background",
|
|
2887
|
-
|
|
2921
|
+
elevation: isTop ? 4 : 1,
|
|
2888
2922
|
shadowColor: "$shadowColor",
|
|
2889
2923
|
shadowRadius: isTop ? 16 : 4,
|
|
2890
2924
|
scale: isTop && exitDir ? 1 : offset.scale,
|
|
@@ -2894,7 +2928,7 @@ function SwipeCards({
|
|
|
2894
2928
|
rotate: isTop ? exitRotate : "0deg",
|
|
2895
2929
|
children: [
|
|
2896
2930
|
renderCard(item),
|
|
2897
|
-
isTop && exitDir === "left" && /* @__PURE__ */ (0,
|
|
2931
|
+
isTop && exitDir === "left" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
2898
2932
|
import_tamagui57.YStack,
|
|
2899
2933
|
{
|
|
2900
2934
|
position: "absolute",
|
|
@@ -2905,10 +2939,10 @@ function SwipeCards({
|
|
|
2905
2939
|
borderRadius: "$3",
|
|
2906
2940
|
padding: "$2",
|
|
2907
2941
|
rotate: "15deg",
|
|
2908
|
-
children: /* @__PURE__ */ (0,
|
|
2942
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$7", fontWeight: "800", color: "$red10", children: leftLabel.toUpperCase() })
|
|
2909
2943
|
}
|
|
2910
2944
|
),
|
|
2911
|
-
isTop && exitDir === "right" && /* @__PURE__ */ (0,
|
|
2945
|
+
isTop && exitDir === "right" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
2912
2946
|
import_tamagui57.YStack,
|
|
2913
2947
|
{
|
|
2914
2948
|
position: "absolute",
|
|
@@ -2919,7 +2953,7 @@ function SwipeCards({
|
|
|
2919
2953
|
borderRadius: "$3",
|
|
2920
2954
|
padding: "$2",
|
|
2921
2955
|
rotate: "-15deg",
|
|
2922
|
-
children: /* @__PURE__ */ (0,
|
|
2956
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$7", fontWeight: "800", color: "$green10", children: rightLabel.toUpperCase() })
|
|
2923
2957
|
}
|
|
2924
2958
|
)
|
|
2925
2959
|
]
|
|
@@ -2927,8 +2961,8 @@ function SwipeCards({
|
|
|
2927
2961
|
item.id
|
|
2928
2962
|
);
|
|
2929
2963
|
}) }) }),
|
|
2930
|
-
/* @__PURE__ */ (0,
|
|
2931
|
-
/* @__PURE__ */ (0,
|
|
2964
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_tamagui57.XStack, { justifyContent: "center", gap: "$6", paddingBottom: "$4", children: [
|
|
2965
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
2932
2966
|
import_tamagui57.Circle,
|
|
2933
2967
|
{
|
|
2934
2968
|
size: 60,
|
|
@@ -2940,10 +2974,10 @@ function SwipeCards({
|
|
|
2940
2974
|
onPress: () => handleSwipe("left"),
|
|
2941
2975
|
alignItems: "center",
|
|
2942
2976
|
justifyContent: "center",
|
|
2943
|
-
children: /* @__PURE__ */ (0,
|
|
2977
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$6", color: "$red10", fontWeight: "700", children: "\u2715" })
|
|
2944
2978
|
}
|
|
2945
2979
|
),
|
|
2946
|
-
/* @__PURE__ */ (0,
|
|
2980
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
2947
2981
|
import_tamagui57.Circle,
|
|
2948
2982
|
{
|
|
2949
2983
|
size: 60,
|
|
@@ -2955,7 +2989,7 @@ function SwipeCards({
|
|
|
2955
2989
|
onPress: () => handleSwipe("right"),
|
|
2956
2990
|
alignItems: "center",
|
|
2957
2991
|
justifyContent: "center",
|
|
2958
|
-
children: /* @__PURE__ */ (0,
|
|
2992
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$6", color: "$green10", fontWeight: "700", children: "\u2665" })
|
|
2959
2993
|
}
|
|
2960
2994
|
)
|
|
2961
2995
|
] })
|
|
@@ -2964,7 +2998,7 @@ function SwipeCards({
|
|
|
2964
2998
|
|
|
2965
2999
|
// src/patterns/GlassCard.tsx
|
|
2966
3000
|
var import_tamagui58 = require("tamagui");
|
|
2967
|
-
var
|
|
3001
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
2968
3002
|
var BLUR = { light: 8, medium: 16, heavy: 24 };
|
|
2969
3003
|
var TINT_BG = {
|
|
2970
3004
|
light: "rgba(255,255,255,0.15)",
|
|
@@ -2984,13 +3018,13 @@ function GlassCard({
|
|
|
2984
3018
|
elevated = false
|
|
2985
3019
|
}) {
|
|
2986
3020
|
const blur = BLUR[intensity];
|
|
2987
|
-
return /* @__PURE__ */ (0,
|
|
3021
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
2988
3022
|
GlassFrame,
|
|
2989
3023
|
{
|
|
2990
3024
|
borderRadius,
|
|
2991
3025
|
padding,
|
|
2992
3026
|
backgroundColor: TINT_BG[tint],
|
|
2993
|
-
|
|
3027
|
+
elevation: elevated ? 4 : 0,
|
|
2994
3028
|
shadowColor: elevated ? "$shadowColor" : void 0,
|
|
2995
3029
|
shadowRadius: elevated ? 20 : void 0,
|
|
2996
3030
|
shadowOpacity: elevated ? 0.3 : void 0,
|
|
@@ -3003,13 +3037,13 @@ function GlassCard({
|
|
|
3003
3037
|
// src/patterns/DataTable.tsx
|
|
3004
3038
|
var import_react17 = require("react");
|
|
3005
3039
|
var import_tamagui59 = require("tamagui");
|
|
3006
|
-
var
|
|
3040
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
3007
3041
|
var TH = (0, import_tamagui59.styled)(import_tamagui59.View, { padding: "$3", justifyContent: "center" });
|
|
3008
3042
|
var TD = (0, import_tamagui59.styled)(import_tamagui59.View, { padding: "$3", justifyContent: "center" });
|
|
3009
3043
|
function StatusBadge({ status }) {
|
|
3010
3044
|
const isActive = status.toLowerCase() === "active";
|
|
3011
|
-
return /* @__PURE__ */ (0,
|
|
3012
|
-
/* @__PURE__ */ (0,
|
|
3045
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_tamagui59.XStack, { gap: "$2", alignItems: "center", children: [
|
|
3046
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
3013
3047
|
import_tamagui59.View,
|
|
3014
3048
|
{
|
|
3015
3049
|
width: 8,
|
|
@@ -3018,13 +3052,13 @@ function StatusBadge({ status }) {
|
|
|
3018
3052
|
backgroundColor: isActive ? "$green9" : "$orange9"
|
|
3019
3053
|
}
|
|
3020
3054
|
),
|
|
3021
|
-
/* @__PURE__ */ (0,
|
|
3055
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.SizableText, { size: "$3", color: "$color11", children: status })
|
|
3022
3056
|
] });
|
|
3023
3057
|
}
|
|
3024
3058
|
function HeaderCell({ col, sort, onSort }) {
|
|
3025
3059
|
const active = sort?.key === col.key;
|
|
3026
3060
|
const indicator = active ? sort.dir === "asc" ? " \u25B2" : " \u25BC" : "";
|
|
3027
|
-
return /* @__PURE__ */ (0,
|
|
3061
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
3028
3062
|
TH,
|
|
3029
3063
|
{
|
|
3030
3064
|
width: col.width,
|
|
@@ -3033,7 +3067,7 @@ function HeaderCell({ col, sort, onSort }) {
|
|
|
3033
3067
|
cursor: col.sortable ? "pointer" : void 0,
|
|
3034
3068
|
onPress: col.sortable ? onSort : void 0,
|
|
3035
3069
|
pressStyle: col.sortable ? { opacity: 0.7 } : void 0,
|
|
3036
|
-
children: /* @__PURE__ */ (0,
|
|
3070
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
|
|
3037
3071
|
import_tamagui59.SizableText,
|
|
3038
3072
|
{
|
|
3039
3073
|
size: "$2",
|
|
@@ -3052,7 +3086,7 @@ function HeaderCell({ col, sort, onSort }) {
|
|
|
3052
3086
|
);
|
|
3053
3087
|
}
|
|
3054
3088
|
function TableRow({ row, columns, onPress, odd }) {
|
|
3055
|
-
return /* @__PURE__ */ (0,
|
|
3089
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
3056
3090
|
import_tamagui59.XStack,
|
|
3057
3091
|
{
|
|
3058
3092
|
backgroundColor: odd ? "$color2" : "transparent",
|
|
@@ -3063,12 +3097,12 @@ function TableRow({ row, columns, onPress, odd }) {
|
|
|
3063
3097
|
onPress: onPress ? () => onPress(row) : void 0,
|
|
3064
3098
|
pressStyle: onPress ? { opacity: 0.85 } : void 0,
|
|
3065
3099
|
animation: "quick",
|
|
3066
|
-
children: columns.map((col) => /* @__PURE__ */ (0,
|
|
3100
|
+
children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TD, { width: col.width, flex: col.width ? void 0 : 1, children: col.render ? col.render(row[col.key], row) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.SizableText, { size: "$3", color: "$color11", children: String(row[col.key] ?? "") }) }, col.key))
|
|
3067
3101
|
}
|
|
3068
3102
|
);
|
|
3069
3103
|
}
|
|
3070
3104
|
function CardRow({ row, columns, onPress }) {
|
|
3071
|
-
return /* @__PURE__ */ (0,
|
|
3105
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
3072
3106
|
import_tamagui59.YStack,
|
|
3073
3107
|
{
|
|
3074
3108
|
backgroundColor: "$color1",
|
|
@@ -3080,11 +3114,11 @@ function CardRow({ row, columns, onPress }) {
|
|
|
3080
3114
|
onPress: onPress ? () => onPress(row) : void 0,
|
|
3081
3115
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
3082
3116
|
animation: "quick",
|
|
3083
|
-
children: columns.map((col, i) => /* @__PURE__ */ (0,
|
|
3084
|
-
i > 0 && /* @__PURE__ */ (0,
|
|
3085
|
-
/* @__PURE__ */ (0,
|
|
3086
|
-
/* @__PURE__ */ (0,
|
|
3087
|
-
col.render ? col.render(row[col.key], row) : /* @__PURE__ */ (0,
|
|
3117
|
+
children: columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_tamagui59.YStack, { children: [
|
|
3118
|
+
i > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.Separator, { marginVertical: "$1.5", borderColor: "$color4" }),
|
|
3119
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_tamagui59.XStack, { justifyContent: "space-between", alignItems: "center", children: [
|
|
3120
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.SizableText, { size: "$2", color: "$color9", fontWeight: "600", children: col.header }),
|
|
3121
|
+
col.render ? col.render(row[col.key], row) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.SizableText, { size: "$3", color: "$color11", children: String(row[col.key] ?? "") })
|
|
3088
3122
|
] })
|
|
3089
3123
|
] }, col.key))
|
|
3090
3124
|
}
|
|
@@ -3104,21 +3138,21 @@ function DataTable({ columns, data, onRowPress, emptyMessage = "No data" }) {
|
|
|
3104
3138
|
}, [data, sort]);
|
|
3105
3139
|
const toggleSort = (key) => setSort((s) => s?.key === key ? { key, dir: s.dir === "asc" ? "desc" : "asc" } : { key, dir: "asc" });
|
|
3106
3140
|
if (!data.length) {
|
|
3107
|
-
return /* @__PURE__ */ (0,
|
|
3141
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.YStack, { padding: "$6", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.SizableText, { size: "$4", color: "$color9", children: emptyMessage }) });
|
|
3108
3142
|
}
|
|
3109
3143
|
if (isSmall) {
|
|
3110
|
-
return /* @__PURE__ */ (0,
|
|
3144
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.YStack, { gap: "$3", children: sorted.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(CardRow, { row, columns, onPress: onRowPress }, i)) });
|
|
3111
3145
|
}
|
|
3112
|
-
return /* @__PURE__ */ (0,
|
|
3113
|
-
/* @__PURE__ */ (0,
|
|
3114
|
-
sorted.map((row, i) => /* @__PURE__ */ (0,
|
|
3146
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_tamagui59.YStack, { borderWidth: 1, borderColor: "$color4", borderRadius: "$4", overflow: "hidden", children: [
|
|
3147
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.XStack, { backgroundColor: "$color1", borderBottomWidth: 1, borderColor: "$color4", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(HeaderCell, { col, sort, onSort: () => toggleSort(col.key) }, col.key)) }),
|
|
3148
|
+
sorted.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TableRow, { row, columns, onPress: onRowPress, odd: i % 2 === 1 }, i))
|
|
3115
3149
|
] });
|
|
3116
3150
|
}
|
|
3117
3151
|
|
|
3118
3152
|
// src/patterns/DatePicker.tsx
|
|
3119
3153
|
var import_react18 = require("react");
|
|
3120
3154
|
var import_tamagui60 = require("tamagui");
|
|
3121
|
-
var
|
|
3155
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
3122
3156
|
var MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
|
3123
3157
|
var DAY_LABELS_SUN = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
3124
3158
|
var DAY_LABELS_MON = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
|
|
@@ -3143,7 +3177,7 @@ function buildGrid(year, month, startDay) {
|
|
|
3143
3177
|
return cells;
|
|
3144
3178
|
}
|
|
3145
3179
|
function NavButton({ label, onPress }) {
|
|
3146
|
-
return /* @__PURE__ */ (0,
|
|
3180
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
3147
3181
|
import_tamagui60.XStack,
|
|
3148
3182
|
{
|
|
3149
3183
|
width: 36,
|
|
@@ -3156,7 +3190,7 @@ function NavButton({ label, onPress }) {
|
|
|
3156
3190
|
animation: "quick",
|
|
3157
3191
|
onPress,
|
|
3158
3192
|
cursor: "pointer",
|
|
3159
|
-
children: /* @__PURE__ */ (0,
|
|
3193
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_tamagui60.SizableText, { size: "$5", color: "$color11", fontWeight: "600", children: label })
|
|
3160
3194
|
}
|
|
3161
3195
|
);
|
|
3162
3196
|
}
|
|
@@ -3185,23 +3219,23 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3185
3219
|
if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
|
|
3186
3220
|
return false;
|
|
3187
3221
|
}, [minDate, maxDate]);
|
|
3188
|
-
return /* @__PURE__ */ (0,
|
|
3189
|
-
/* @__PURE__ */ (0,
|
|
3190
|
-
/* @__PURE__ */ (0,
|
|
3191
|
-
/* @__PURE__ */ (0,
|
|
3222
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_tamagui60.YStack, { backgroundColor: "$color2", borderRadius: "$4", padding: "$3", gap: "$2", animation: "quick", children: [
|
|
3223
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_tamagui60.XStack, { alignItems: "center", justifyContent: "space-between", children: [
|
|
3224
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(NavButton, { label: "\u2039", onPress: () => navigate(-1) }),
|
|
3225
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_tamagui60.SizableText, { size: "$4", fontWeight: "700", color: "$color12", children: [
|
|
3192
3226
|
MONTH_NAMES[viewMonth],
|
|
3193
3227
|
" ",
|
|
3194
3228
|
viewYear
|
|
3195
3229
|
] }),
|
|
3196
|
-
/* @__PURE__ */ (0,
|
|
3230
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(NavButton, { label: "\u203A", onPress: () => navigate(1) })
|
|
3197
3231
|
] }),
|
|
3198
|
-
/* @__PURE__ */ (0,
|
|
3199
|
-
Array.from({ length: Math.ceil(grid.length / 7) }, (_, row) => /* @__PURE__ */ (0,
|
|
3232
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_tamagui60.XStack, { children: headers.map((h) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_tamagui60.SizableText, { size: "$2", color: "$color8", fontWeight: "600", textAlign: "center", flex: 1, children: h }, h)) }),
|
|
3233
|
+
Array.from({ length: Math.ceil(grid.length / 7) }, (_, row) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_tamagui60.XStack, { children: grid.slice(row * 7, row * 7 + 7).map((cell, i) => {
|
|
3200
3234
|
const date = new Date(cell.year, cell.month, cell.day);
|
|
3201
3235
|
const selected = sameDay(value, date);
|
|
3202
3236
|
const isToday = sameDay(today, date);
|
|
3203
3237
|
const disabled = cell.outside || isDisabled(date);
|
|
3204
|
-
return /* @__PURE__ */ (0,
|
|
3238
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_tamagui60.YStack, { flex: 1, alignItems: "center", paddingVertical: "$0.5", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
3205
3239
|
import_tamagui60.XStack,
|
|
3206
3240
|
{
|
|
3207
3241
|
width: 40,
|
|
@@ -3217,7 +3251,7 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3217
3251
|
opacity: disabled ? 0.35 : 1,
|
|
3218
3252
|
cursor: disabled ? "default" : "pointer",
|
|
3219
3253
|
onPress: disabled ? void 0 : () => onDateChange?.(date),
|
|
3220
|
-
children: /* @__PURE__ */ (0,
|
|
3254
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
3221
3255
|
import_tamagui60.SizableText,
|
|
3222
3256
|
{
|
|
3223
3257
|
size: "$3",
|
|
@@ -3234,7 +3268,7 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3234
3268
|
|
|
3235
3269
|
// src/patterns/EventCard.tsx
|
|
3236
3270
|
var import_tamagui61 = require("tamagui");
|
|
3237
|
-
var
|
|
3271
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
3238
3272
|
var THEME_MAP = {
|
|
3239
3273
|
purple: "purple",
|
|
3240
3274
|
green: "green",
|
|
@@ -3245,8 +3279,8 @@ var THEME_MAP = {
|
|
|
3245
3279
|
};
|
|
3246
3280
|
function ParticipantDots({ count, max }) {
|
|
3247
3281
|
const dots = Math.min(count, 5);
|
|
3248
|
-
return /* @__PURE__ */ (0,
|
|
3249
|
-
/* @__PURE__ */ (0,
|
|
3282
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.XStack, { alignItems: "center", gap: "$1.5", children: [
|
|
3283
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.XStack, { children: Array.from({ length: dots }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
3250
3284
|
import_tamagui61.YStack,
|
|
3251
3285
|
{
|
|
3252
3286
|
width: 22,
|
|
@@ -3258,18 +3292,18 @@ function ParticipantDots({ count, max }) {
|
|
|
3258
3292
|
marginLeft: i > 0 ? -8 : 0,
|
|
3259
3293
|
alignItems: "center",
|
|
3260
3294
|
justifyContent: "center",
|
|
3261
|
-
children: /* @__PURE__ */ (0,
|
|
3295
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$1", color: "$color1", fontWeight: "700", children: String.fromCharCode(65 + i) })
|
|
3262
3296
|
},
|
|
3263
3297
|
i
|
|
3264
3298
|
)) }),
|
|
3265
|
-
/* @__PURE__ */ (0,
|
|
3299
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.SizableText, { size: "$2", color: "$color11", fontWeight: "500", children: [
|
|
3266
3300
|
count,
|
|
3267
3301
|
max ? `/${max}` : ""
|
|
3268
3302
|
] })
|
|
3269
3303
|
] });
|
|
3270
3304
|
}
|
|
3271
3305
|
function CardInner({ title, subtitle, time, location, label, participants, maxParticipants, onPress, actions }) {
|
|
3272
|
-
return /* @__PURE__ */ (0,
|
|
3306
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
|
|
3273
3307
|
import_tamagui61.YStack,
|
|
3274
3308
|
{
|
|
3275
3309
|
backgroundColor: "$color4",
|
|
@@ -3283,22 +3317,22 @@ function CardInner({ title, subtitle, time, location, label, participants, maxPa
|
|
|
3283
3317
|
pressStyle: onPress ? { scale: 0.97, opacity: 0.9 } : void 0,
|
|
3284
3318
|
cursor: onPress ? "pointer" : void 0,
|
|
3285
3319
|
children: [
|
|
3286
|
-
/* @__PURE__ */ (0,
|
|
3287
|
-
/* @__PURE__ */ (0,
|
|
3288
|
-
/* @__PURE__ */ (0,
|
|
3289
|
-
subtitle && /* @__PURE__ */ (0,
|
|
3320
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.XStack, { justifyContent: "space-between", alignItems: "flex-start", children: [
|
|
3321
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.YStack, { flex: 1, gap: "$1", children: [
|
|
3322
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$6", fontWeight: "700", color: "$color12", children: title }),
|
|
3323
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$3", color: "$color11", opacity: 0.8, children: subtitle })
|
|
3290
3324
|
] }),
|
|
3291
|
-
time && /* @__PURE__ */ (0,
|
|
3325
|
+
time && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.YStack, { backgroundColor: "$color6", paddingHorizontal: "$2.5", paddingVertical: "$1.5", borderRadius: "$3", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$2", fontWeight: "600", color: "$color12", children: time }) })
|
|
3292
3326
|
] }),
|
|
3293
|
-
/* @__PURE__ */ (0,
|
|
3294
|
-
location && /* @__PURE__ */ (0,
|
|
3295
|
-
/* @__PURE__ */ (0,
|
|
3296
|
-
/* @__PURE__ */ (0,
|
|
3327
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.XStack, { gap: "$4", alignItems: "center", flexWrap: "wrap", children: [
|
|
3328
|
+
location && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.XStack, { gap: "$1.5", alignItems: "center", children: [
|
|
3329
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$3", children: "\u{1F4CD}" }),
|
|
3330
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$3", color: "$color11", children: location })
|
|
3297
3331
|
] }),
|
|
3298
|
-
participants !== void 0 && /* @__PURE__ */ (0,
|
|
3332
|
+
participants !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ParticipantDots, { count: participants, max: maxParticipants })
|
|
3299
3333
|
] }),
|
|
3300
|
-
(label || actions) && /* @__PURE__ */ (0,
|
|
3301
|
-
label ? /* @__PURE__ */ (0,
|
|
3334
|
+
(label || actions) && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.XStack, { justifyContent: "space-between", alignItems: "center", children: [
|
|
3335
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.XStack, { backgroundColor: "$color6", paddingHorizontal: "$2.5", paddingVertical: "$1", borderRadius: "$10", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$2", fontWeight: "600", color: "$color11", children: label }) }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.YStack, {}),
|
|
3302
3336
|
actions
|
|
3303
3337
|
] })
|
|
3304
3338
|
]
|
|
@@ -3306,27 +3340,27 @@ function CardInner({ title, subtitle, time, location, label, participants, maxPa
|
|
|
3306
3340
|
);
|
|
3307
3341
|
}
|
|
3308
3342
|
function EventCard({ theme = "purple", ...props }) {
|
|
3309
|
-
return /* @__PURE__ */ (0,
|
|
3343
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.Theme, { name: THEME_MAP[theme], children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CardInner, { ...props }) });
|
|
3310
3344
|
}
|
|
3311
3345
|
|
|
3312
3346
|
// src/patterns/UserPreferences.tsx
|
|
3313
3347
|
var import_tamagui62 = require("tamagui");
|
|
3314
|
-
var
|
|
3348
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
3315
3349
|
function ItemLabel({ title, description, color }) {
|
|
3316
|
-
return /* @__PURE__ */ (0,
|
|
3317
|
-
/* @__PURE__ */ (0,
|
|
3318
|
-
description && /* @__PURE__ */ (0,
|
|
3350
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.YStack, { flex: 1, gap: "$1", children: [
|
|
3351
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$4", fontWeight: "500", color: color ?? "$color12", children: title }),
|
|
3352
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$2", color: "$color9", children: description })
|
|
3319
3353
|
] });
|
|
3320
3354
|
}
|
|
3321
3355
|
function ToggleRow({ item }) {
|
|
3322
|
-
return /* @__PURE__ */ (0,
|
|
3323
|
-
/* @__PURE__ */ (0,
|
|
3324
|
-
/* @__PURE__ */ (0,
|
|
3356
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.XStack, { alignItems: "center", gap: "$3", paddingVertical: "$3", paddingHorizontal: "$4", children: [
|
|
3357
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ItemLabel, { title: item.title, description: item.description }),
|
|
3358
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.Switch, { size: "$3", checked: item.value, onCheckedChange: item.onValueChange, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.Switch.Thumb, { animation: "quick" }) })
|
|
3325
3359
|
] });
|
|
3326
3360
|
}
|
|
3327
3361
|
function SelectRow({ item }) {
|
|
3328
3362
|
const current = item.options.find((o) => o.value === item.value);
|
|
3329
|
-
return /* @__PURE__ */ (0,
|
|
3363
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
3330
3364
|
import_tamagui62.XStack,
|
|
3331
3365
|
{
|
|
3332
3366
|
alignItems: "center",
|
|
@@ -3342,9 +3376,9 @@ function SelectRow({ item }) {
|
|
|
3342
3376
|
if (next) item.onValueChange(next.value);
|
|
3343
3377
|
},
|
|
3344
3378
|
children: [
|
|
3345
|
-
/* @__PURE__ */ (0,
|
|
3346
|
-
/* @__PURE__ */ (0,
|
|
3347
|
-
/* @__PURE__ */ (0,
|
|
3379
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ItemLabel, { title: item.title, description: item.description }),
|
|
3380
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$3", color: "$color9", fontWeight: "500", children: current?.label ?? item.value }),
|
|
3381
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$4", color: "$color8", children: "\u203A" })
|
|
3348
3382
|
]
|
|
3349
3383
|
}
|
|
3350
3384
|
);
|
|
@@ -3352,12 +3386,12 @@ function SelectRow({ item }) {
|
|
|
3352
3386
|
function SliderRow({ item }) {
|
|
3353
3387
|
const min = item.min ?? 0;
|
|
3354
3388
|
const max = item.max ?? 100;
|
|
3355
|
-
return /* @__PURE__ */ (0,
|
|
3356
|
-
/* @__PURE__ */ (0,
|
|
3357
|
-
/* @__PURE__ */ (0,
|
|
3358
|
-
/* @__PURE__ */ (0,
|
|
3389
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.YStack, { gap: "$2", paddingVertical: "$3", paddingHorizontal: "$4", children: [
|
|
3390
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.XStack, { justifyContent: "space-between", alignItems: "center", children: [
|
|
3391
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ItemLabel, { title: item.title, description: item.description }),
|
|
3392
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$3", fontWeight: "600", color: "$color11", children: item.value })
|
|
3359
3393
|
] }),
|
|
3360
|
-
/* @__PURE__ */ (0,
|
|
3394
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
3361
3395
|
import_tamagui62.Slider,
|
|
3362
3396
|
{
|
|
3363
3397
|
value: [item.value],
|
|
@@ -3368,15 +3402,15 @@ function SliderRow({ item }) {
|
|
|
3368
3402
|
if (v !== void 0) item.onValueChange(v);
|
|
3369
3403
|
},
|
|
3370
3404
|
children: [
|
|
3371
|
-
/* @__PURE__ */ (0,
|
|
3372
|
-
/* @__PURE__ */ (0,
|
|
3405
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.Slider.Track, { backgroundColor: "$color4", height: 4, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.Slider.TrackActive, { backgroundColor: "$color9" }) }),
|
|
3406
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.Slider.Thumb, { index: 0, size: "$1.5", backgroundColor: "$color9", borderWidth: 0, circular: true })
|
|
3373
3407
|
]
|
|
3374
3408
|
}
|
|
3375
3409
|
)
|
|
3376
3410
|
] });
|
|
3377
3411
|
}
|
|
3378
3412
|
function ActionRow({ item }) {
|
|
3379
|
-
return /* @__PURE__ */ (0,
|
|
3413
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
3380
3414
|
import_tamagui62.XStack,
|
|
3381
3415
|
{
|
|
3382
3416
|
alignItems: "center",
|
|
@@ -3388,7 +3422,7 @@ function ActionRow({ item }) {
|
|
|
3388
3422
|
cursor: "pointer",
|
|
3389
3423
|
onPress: item.onPress,
|
|
3390
3424
|
children: [
|
|
3391
|
-
/* @__PURE__ */ (0,
|
|
3425
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
3392
3426
|
ItemLabel,
|
|
3393
3427
|
{
|
|
3394
3428
|
title: item.title,
|
|
@@ -3396,7 +3430,7 @@ function ActionRow({ item }) {
|
|
|
3396
3430
|
color: item.destructive ? "$red10" : void 0
|
|
3397
3431
|
}
|
|
3398
3432
|
),
|
|
3399
|
-
/* @__PURE__ */ (0,
|
|
3433
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$4", color: "$color8", children: "\u203A" })
|
|
3400
3434
|
]
|
|
3401
3435
|
}
|
|
3402
3436
|
);
|
|
@@ -3404,22 +3438,22 @@ function ActionRow({ item }) {
|
|
|
3404
3438
|
function PreferenceRow({ item }) {
|
|
3405
3439
|
switch (item.type) {
|
|
3406
3440
|
case "toggle":
|
|
3407
|
-
return /* @__PURE__ */ (0,
|
|
3441
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ToggleRow, { item });
|
|
3408
3442
|
case "select":
|
|
3409
|
-
return /* @__PURE__ */ (0,
|
|
3443
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectRow, { item });
|
|
3410
3444
|
case "slider":
|
|
3411
|
-
return /* @__PURE__ */ (0,
|
|
3445
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SliderRow, { item });
|
|
3412
3446
|
case "action":
|
|
3413
|
-
return /* @__PURE__ */ (0,
|
|
3447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ActionRow, { item });
|
|
3414
3448
|
}
|
|
3415
3449
|
}
|
|
3416
3450
|
function UserPreferences({ sections }) {
|
|
3417
|
-
return /* @__PURE__ */ (0,
|
|
3418
|
-
/* @__PURE__ */ (0,
|
|
3419
|
-
/* @__PURE__ */ (0,
|
|
3420
|
-
section.description && /* @__PURE__ */ (0,
|
|
3451
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.YStack, { gap: "$5", children: sections.map((section, si) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.YStack, { gap: "$2", children: [
|
|
3452
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.YStack, { paddingHorizontal: "$1", gap: "$0.5", children: [
|
|
3453
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$2", fontWeight: "600", color: "$color9", textTransform: "uppercase", children: section.title }),
|
|
3454
|
+
section.description && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$2", color: "$color8", children: section.description })
|
|
3421
3455
|
] }),
|
|
3422
|
-
/* @__PURE__ */ (0,
|
|
3456
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
3423
3457
|
import_tamagui62.YStack,
|
|
3424
3458
|
{
|
|
3425
3459
|
backgroundColor: "$color2",
|
|
@@ -3427,9 +3461,9 @@ function UserPreferences({ sections }) {
|
|
|
3427
3461
|
overflow: "hidden",
|
|
3428
3462
|
borderWidth: 1,
|
|
3429
3463
|
borderColor: "$color4",
|
|
3430
|
-
children: section.items.map((item, ii) => /* @__PURE__ */ (0,
|
|
3431
|
-
/* @__PURE__ */ (0,
|
|
3432
|
-
ii < section.items.length - 1 && /* @__PURE__ */ (0,
|
|
3464
|
+
children: section.items.map((item, ii) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.YStack, { children: [
|
|
3465
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PreferenceRow, { item }),
|
|
3466
|
+
ii < section.items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.Separator, { borderColor: "$color4" })
|
|
3433
3467
|
] }, item.id))
|
|
3434
3468
|
}
|
|
3435
3469
|
)
|
|
@@ -3438,7 +3472,7 @@ function UserPreferences({ sections }) {
|
|
|
3438
3472
|
|
|
3439
3473
|
// src/patterns/BlinkSelect.tsx
|
|
3440
3474
|
var import_tamagui63 = require("tamagui");
|
|
3441
|
-
var
|
|
3475
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
3442
3476
|
function BlinkSelect({
|
|
3443
3477
|
items,
|
|
3444
3478
|
value,
|
|
@@ -3449,9 +3483,9 @@ function BlinkSelect({
|
|
|
3449
3483
|
disabled,
|
|
3450
3484
|
width = "100%"
|
|
3451
3485
|
}) {
|
|
3452
|
-
return /* @__PURE__ */ (0,
|
|
3453
|
-
label ? /* @__PURE__ */ (0,
|
|
3454
|
-
/* @__PURE__ */ (0,
|
|
3486
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_tamagui63.YStack, { gap: "$1.5", width, children: [
|
|
3487
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.SizableText, { size: "$3", fontWeight: "600", children: label }) : null,
|
|
3488
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
3455
3489
|
import_tamagui63.Select,
|
|
3456
3490
|
{
|
|
3457
3491
|
value,
|
|
@@ -3459,18 +3493,18 @@ function BlinkSelect({
|
|
|
3459
3493
|
disablePreventBodyScroll: true,
|
|
3460
3494
|
...disabled ? { disabled: true } : {},
|
|
3461
3495
|
children: [
|
|
3462
|
-
/* @__PURE__ */ (0,
|
|
3463
|
-
/* @__PURE__ */ (0,
|
|
3464
|
-
/* @__PURE__ */ (0,
|
|
3465
|
-
/* @__PURE__ */ (0,
|
|
3496
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.Trigger, { width: "100%", iconAfter: () => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.SizableText, { children: "\u25BC" }), size, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.Value, { placeholder }) }),
|
|
3497
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Adapt, { when: "maxMd", platform: "touch", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_tamagui63.Sheet, { modal: true, dismissOnSnapToBottom: true, snapPointsMode: "fit", children: [
|
|
3498
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Sheet.Frame, { padding: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Adapt.Contents, {}) }),
|
|
3499
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Sheet.Overlay, {})
|
|
3466
3500
|
] }) }),
|
|
3467
|
-
/* @__PURE__ */ (0,
|
|
3468
|
-
/* @__PURE__ */ (0,
|
|
3469
|
-
/* @__PURE__ */ (0,
|
|
3470
|
-
/* @__PURE__ */ (0,
|
|
3471
|
-
/* @__PURE__ */ (0,
|
|
3501
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_tamagui63.Select.Content, { zIndex: 2e5, children: [
|
|
3502
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.ScrollUpButton, { alignItems: "center", justifyContent: "center", height: "$3", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.SizableText, { children: "\u25B2" }) }),
|
|
3503
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.Group, { children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_tamagui63.Select.Item, { index: i, value: item.value, children: [
|
|
3504
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.ItemText, { children: item.label }),
|
|
3505
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.SizableText, { children: "\u2713" }) })
|
|
3472
3506
|
] }, item.value)) }) }),
|
|
3473
|
-
/* @__PURE__ */ (0,
|
|
3507
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.ScrollDownButton, { alignItems: "center", justifyContent: "center", height: "$3", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.SizableText, { children: "\u25BC" }) })
|
|
3474
3508
|
] })
|
|
3475
3509
|
]
|
|
3476
3510
|
}
|
|
@@ -3480,7 +3514,7 @@ function BlinkSelect({
|
|
|
3480
3514
|
|
|
3481
3515
|
// src/patterns/BlinkDialog.tsx
|
|
3482
3516
|
var import_tamagui64 = require("tamagui");
|
|
3483
|
-
var
|
|
3517
|
+
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
3484
3518
|
function BlinkDialog({
|
|
3485
3519
|
open,
|
|
3486
3520
|
onOpenChange,
|
|
@@ -3494,14 +3528,14 @@ function BlinkDialog({
|
|
|
3494
3528
|
onCancel,
|
|
3495
3529
|
confirmTheme = "active"
|
|
3496
3530
|
}) {
|
|
3497
|
-
return /* @__PURE__ */ (0,
|
|
3498
|
-
trigger && /* @__PURE__ */ (0,
|
|
3499
|
-
/* @__PURE__ */ (0,
|
|
3500
|
-
/* @__PURE__ */ (0,
|
|
3501
|
-
/* @__PURE__ */ (0,
|
|
3531
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_tamagui64.Dialog, { modal: true, open, onOpenChange, children: [
|
|
3532
|
+
trigger && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Dialog.Trigger, { asChild: true, children: trigger }),
|
|
3533
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Adapt, { when: "maxMd", platform: "touch", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_tamagui64.Sheet, { modal: true, dismissOnSnapToBottom: true, snapPointsMode: "fit", children: [
|
|
3534
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Sheet.Frame, { padding: "$4", gap: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Adapt.Contents, {}) }),
|
|
3535
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Sheet.Overlay, {})
|
|
3502
3536
|
] }) }),
|
|
3503
|
-
/* @__PURE__ */ (0,
|
|
3504
|
-
/* @__PURE__ */ (0,
|
|
3537
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_tamagui64.Dialog.Portal, { children: [
|
|
3538
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
3505
3539
|
import_tamagui64.Dialog.Overlay,
|
|
3506
3540
|
{
|
|
3507
3541
|
animation: "quick",
|
|
@@ -3511,7 +3545,7 @@ function BlinkDialog({
|
|
|
3511
3545
|
},
|
|
3512
3546
|
"overlay"
|
|
3513
3547
|
),
|
|
3514
|
-
/* @__PURE__ */ (0,
|
|
3548
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
|
|
3515
3549
|
import_tamagui64.Dialog.Content,
|
|
3516
3550
|
{
|
|
3517
3551
|
bordered: true,
|
|
@@ -3522,12 +3556,12 @@ function BlinkDialog({
|
|
|
3522
3556
|
exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
|
|
3523
3557
|
gap: "$4",
|
|
3524
3558
|
children: [
|
|
3525
|
-
title && /* @__PURE__ */ (0,
|
|
3526
|
-
description && /* @__PURE__ */ (0,
|
|
3559
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Dialog.Title, { children: title }),
|
|
3560
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Dialog.Description, { size: "$3", color: "$color10", children: description }),
|
|
3527
3561
|
children,
|
|
3528
|
-
(onConfirm || onCancel) && /* @__PURE__ */ (0,
|
|
3529
|
-
onCancel && /* @__PURE__ */ (0,
|
|
3530
|
-
onConfirm && /* @__PURE__ */ (0,
|
|
3562
|
+
(onConfirm || onCancel) && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_tamagui64.XStack, { justifyContent: "flex-end", gap: "$3", children: [
|
|
3563
|
+
onCancel && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Dialog.Close, { displayWhenAdapted: true, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Button, { variant: "outlined", onPress: onCancel, children: cancelLabel }) }),
|
|
3564
|
+
onConfirm && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Dialog.Close, { displayWhenAdapted: true, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Button, { theme: confirmTheme, onPress: onConfirm, children: confirmLabel }) })
|
|
3531
3565
|
] })
|
|
3532
3566
|
]
|
|
3533
3567
|
},
|
|
@@ -3539,7 +3573,7 @@ function BlinkDialog({
|
|
|
3539
3573
|
|
|
3540
3574
|
// src/patterns/BlinkPopover.tsx
|
|
3541
3575
|
var import_tamagui65 = require("tamagui");
|
|
3542
|
-
var
|
|
3576
|
+
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
3543
3577
|
function BlinkPopover({
|
|
3544
3578
|
trigger,
|
|
3545
3579
|
children,
|
|
@@ -3547,13 +3581,13 @@ function BlinkPopover({
|
|
|
3547
3581
|
allowFlip = true,
|
|
3548
3582
|
size = "$5"
|
|
3549
3583
|
}) {
|
|
3550
|
-
return /* @__PURE__ */ (0,
|
|
3551
|
-
/* @__PURE__ */ (0,
|
|
3552
|
-
/* @__PURE__ */ (0,
|
|
3553
|
-
/* @__PURE__ */ (0,
|
|
3554
|
-
/* @__PURE__ */ (0,
|
|
3584
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_tamagui65.Popover, { size, allowFlip, placement, children: [
|
|
3585
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Popover.Trigger, { asChild: true, children: trigger }),
|
|
3586
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Adapt, { when: "maxMd", platform: "touch", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_tamagui65.Popover.Sheet, { modal: true, dismissOnSnapToBottom: true, snapPointsMode: "fit", children: [
|
|
3587
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Popover.Sheet.Frame, { padding: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Adapt.Contents, {}) }),
|
|
3588
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Popover.Sheet.Overlay, {})
|
|
3555
3589
|
] }) }),
|
|
3556
|
-
/* @__PURE__ */ (0,
|
|
3590
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
3557
3591
|
import_tamagui65.Popover.Content,
|
|
3558
3592
|
{
|
|
3559
3593
|
borderWidth: 1,
|
|
@@ -3563,8 +3597,8 @@ function BlinkPopover({
|
|
|
3563
3597
|
elevate: true,
|
|
3564
3598
|
animation: ["quick", { opacity: { overshootClamping: true } }],
|
|
3565
3599
|
children: [
|
|
3566
|
-
/* @__PURE__ */ (0,
|
|
3567
|
-
/* @__PURE__ */ (0,
|
|
3600
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Popover.Arrow, { borderWidth: 1, borderColor: "$borderColor" }),
|
|
3601
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.YStack, { gap: "$3", padding: "$3", children })
|
|
3568
3602
|
]
|
|
3569
3603
|
}
|
|
3570
3604
|
)
|
|
@@ -3573,7 +3607,7 @@ function BlinkPopover({
|
|
|
3573
3607
|
|
|
3574
3608
|
// src/patterns/ImmersiveMediaScreen.tsx
|
|
3575
3609
|
var import_tamagui66 = require("tamagui");
|
|
3576
|
-
var
|
|
3610
|
+
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
3577
3611
|
function ImmersiveMediaScreen({
|
|
3578
3612
|
variant = "reel",
|
|
3579
3613
|
media,
|
|
@@ -3589,16 +3623,16 @@ function ImmersiveMediaScreen({
|
|
|
3589
3623
|
sheetContent
|
|
3590
3624
|
}) {
|
|
3591
3625
|
const showSheet = variant === "sheet";
|
|
3592
|
-
return /* @__PURE__ */ (0,
|
|
3593
|
-
/* @__PURE__ */ (0,
|
|
3626
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.YStack, { flex: 1, backgroundColor: "$color1", children: [
|
|
3627
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.YStack, { flex: 1, position: "relative", children: [
|
|
3594
3628
|
media,
|
|
3595
|
-
/* @__PURE__ */ (0,
|
|
3596
|
-
/* @__PURE__ */ (0,
|
|
3597
|
-
/* @__PURE__ */ (0,
|
|
3598
|
-
/* @__PURE__ */ (0,
|
|
3629
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.XStack, { position: "absolute", top: "$5", left: "$4", right: "$4", justifyContent: "space-between", alignItems: "center", children: [
|
|
3630
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.XStack, { minWidth: 56, children: topLeft }),
|
|
3631
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.YStack, { alignItems: "center", flex: 1, children: topCenter }),
|
|
3632
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.XStack, { minWidth: 56, justifyContent: "flex-end", children: topRight })
|
|
3599
3633
|
] }),
|
|
3600
|
-
actions.length > 0 ? /* @__PURE__ */ (0,
|
|
3601
|
-
/* @__PURE__ */ (0,
|
|
3634
|
+
actions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.YStack, { position: "absolute", right: "$3", bottom: showSheet ? "$20" : "$10", gap: "$3", alignItems: "center", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.YStack, { gap: "$1", alignItems: "center", onPress: action.onPress, children: [
|
|
3635
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
3602
3636
|
import_tamagui66.YStack,
|
|
3603
3637
|
{
|
|
3604
3638
|
width: 44,
|
|
@@ -3607,17 +3641,17 @@ function ImmersiveMediaScreen({
|
|
|
3607
3641
|
backgroundColor: "rgba(0,0,0,0.55)",
|
|
3608
3642
|
alignItems: "center",
|
|
3609
3643
|
justifyContent: "center",
|
|
3610
|
-
children: action.icon ?? /* @__PURE__ */ (0,
|
|
3644
|
+
children: action.icon ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$5", color: "white", children: "\u2022" })
|
|
3611
3645
|
}
|
|
3612
3646
|
),
|
|
3613
|
-
action.value ? /* @__PURE__ */ (0,
|
|
3614
|
-
action.label ? /* @__PURE__ */ (0,
|
|
3647
|
+
action.value ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$2", color: "white", children: action.value }) : null,
|
|
3648
|
+
action.label ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$1", color: "rgba(255,255,255,0.8)", children: action.label }) : null
|
|
3615
3649
|
] }, action.id)) }) : null,
|
|
3616
|
-
/* @__PURE__ */ (0,
|
|
3617
|
-
title ? /* @__PURE__ */ (0,
|
|
3618
|
-
subtitle ? /* @__PURE__ */ (0,
|
|
3650
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.YStack, { position: "absolute", left: "$4", right: "$4", bottom: showSheet ? "$20" : "$6", gap: "$2", children: [
|
|
3651
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$6", fontWeight: "800", color: "white", children: title }) : null,
|
|
3652
|
+
subtitle ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$3", color: "rgba(255,255,255,0.82)", children: subtitle }) : null,
|
|
3619
3653
|
bottomMeta,
|
|
3620
|
-
variant === "story" && inputPlaceholder ? /* @__PURE__ */ (0,
|
|
3654
|
+
variant === "story" && inputPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
3621
3655
|
import_tamagui66.XStack,
|
|
3622
3656
|
{
|
|
3623
3657
|
onPress: onInputPress,
|
|
@@ -3628,22 +3662,22 @@ function ImmersiveMediaScreen({
|
|
|
3628
3662
|
backgroundColor: "rgba(255,255,255,0.14)",
|
|
3629
3663
|
borderWidth: 1,
|
|
3630
3664
|
borderColor: "rgba(255,255,255,0.25)",
|
|
3631
|
-
children: /* @__PURE__ */ (0,
|
|
3665
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$3", color: "rgba(255,255,255,0.82)", children: inputPlaceholder })
|
|
3632
3666
|
}
|
|
3633
3667
|
) : null
|
|
3634
3668
|
] })
|
|
3635
3669
|
] }),
|
|
3636
|
-
showSheet ? /* @__PURE__ */ (0,
|
|
3637
|
-
/* @__PURE__ */ (0,
|
|
3670
|
+
showSheet ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.YStack, { padding: "$4", gap: "$3", backgroundColor: "$background", borderTopLeftRadius: "$8", borderTopRightRadius: "$8", marginTop: -18, children: [
|
|
3671
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.XStack, { alignSelf: "center", width: 48, height: 5, borderRadius: "$10", backgroundColor: "$color5" }),
|
|
3638
3672
|
sheetContent,
|
|
3639
|
-
inputPlaceholder ? /* @__PURE__ */ (0,
|
|
3673
|
+
inputPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.Button, { size: "$5", backgroundColor: "$color9", color: "$color1", onPress: onInputPress, children: inputPlaceholder }) : null
|
|
3640
3674
|
] }) : null
|
|
3641
3675
|
] });
|
|
3642
3676
|
}
|
|
3643
3677
|
|
|
3644
3678
|
// src/patterns/FinanceDashboard.tsx
|
|
3645
3679
|
var import_tamagui67 = require("tamagui");
|
|
3646
|
-
var
|
|
3680
|
+
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
3647
3681
|
function FinanceDashboard({
|
|
3648
3682
|
title = "Overview",
|
|
3649
3683
|
balanceLabel = "Available balance",
|
|
@@ -3655,25 +3689,25 @@ function FinanceDashboard({
|
|
|
3655
3689
|
chartSlot,
|
|
3656
3690
|
topRight
|
|
3657
3691
|
}) {
|
|
3658
|
-
return /* @__PURE__ */ (0,
|
|
3659
|
-
/* @__PURE__ */ (0,
|
|
3660
|
-
/* @__PURE__ */ (0,
|
|
3661
|
-
/* @__PURE__ */ (0,
|
|
3662
|
-
rangeLabel ? /* @__PURE__ */ (0,
|
|
3692
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { flex: 1, backgroundColor: "$background", padding: "$4", gap: "$4", children: [
|
|
3693
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.XStack, { justifyContent: "space-between", alignItems: "center", paddingTop: "$4", children: [
|
|
3694
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { gap: "$1", children: [
|
|
3695
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$6", fontWeight: "700", children: title }),
|
|
3696
|
+
rangeLabel ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$2", color: "$color9", children: rangeLabel }) : null
|
|
3663
3697
|
] }),
|
|
3664
3698
|
topRight
|
|
3665
3699
|
] }),
|
|
3666
|
-
/* @__PURE__ */ (0,
|
|
3667
|
-
/* @__PURE__ */ (0,
|
|
3668
|
-
/* @__PURE__ */ (0,
|
|
3669
|
-
chartSlot ? /* @__PURE__ */ (0,
|
|
3700
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { backgroundColor: "$color1", borderRadius: "$7", padding: "$4", gap: "$2", borderWidth: 1, borderColor: "$color4", children: [
|
|
3701
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$3", color: "$color10", children: balanceLabel }),
|
|
3702
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$11", fontWeight: "800", children: balance }),
|
|
3703
|
+
chartSlot ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.YStack, { marginTop: "$2", children: chartSlot }) : null
|
|
3670
3704
|
] }),
|
|
3671
|
-
metrics.length > 0 ? /* @__PURE__ */ (0,
|
|
3672
|
-
/* @__PURE__ */ (0,
|
|
3673
|
-
/* @__PURE__ */ (0,
|
|
3674
|
-
metric.change ? /* @__PURE__ */ (0,
|
|
3705
|
+
metrics.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.XStack, { gap: "$3", flexWrap: "wrap", children: metrics.map((metric) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { flex: 1, minWidth: 120, backgroundColor: "$color1", borderRadius: "$6", padding: "$3", gap: "$1", borderWidth: 1, borderColor: "$color4", children: [
|
|
3706
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$2", color: "$color10", children: metric.label }),
|
|
3707
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$7", fontWeight: "800", children: metric.value }),
|
|
3708
|
+
metric.change ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$2", color: "$color9", children: metric.change }) : null
|
|
3675
3709
|
] }, metric.label)) }) : null,
|
|
3676
|
-
quickActions.length > 0 ? /* @__PURE__ */ (0,
|
|
3710
|
+
quickActions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.XStack, { gap: "$3", flexWrap: "wrap", children: quickActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
|
|
3677
3711
|
import_tamagui67.YStack,
|
|
3678
3712
|
{
|
|
3679
3713
|
flex: 1,
|
|
@@ -3688,15 +3722,15 @@ function FinanceDashboard({
|
|
|
3688
3722
|
borderColor: "$color4",
|
|
3689
3723
|
onPress: action.onPress,
|
|
3690
3724
|
children: [
|
|
3691
|
-
/* @__PURE__ */ (0,
|
|
3692
|
-
/* @__PURE__ */ (0,
|
|
3725
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.YStack, { width: 36, height: 36, borderRadius: "$10", backgroundColor: "$color3", alignItems: "center", justifyContent: "center", children: action.icon ?? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$4", children: "\u2022" }) }),
|
|
3726
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$2", textAlign: "center", children: action.label })
|
|
3693
3727
|
]
|
|
3694
3728
|
},
|
|
3695
3729
|
action.id
|
|
3696
3730
|
)) }) : null,
|
|
3697
|
-
/* @__PURE__ */ (0,
|
|
3698
|
-
/* @__PURE__ */ (0,
|
|
3699
|
-
/* @__PURE__ */ (0,
|
|
3731
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.YStack, { gap: "$3", children: sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { backgroundColor: "$color1", borderRadius: "$6", borderWidth: 1, borderColor: "$color4", overflow: "hidden", children: [
|
|
3732
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.XStack, { padding: "$3", justifyContent: "space-between", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$4", fontWeight: "700", children: section.title }) }),
|
|
3733
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.YStack, { children: section.rows.map((row, index2) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
|
|
3700
3734
|
import_tamagui67.XStack,
|
|
3701
3735
|
{
|
|
3702
3736
|
padding: "$3",
|
|
@@ -3705,12 +3739,12 @@ function FinanceDashboard({
|
|
|
3705
3739
|
borderTopWidth: index2 === 0 ? 0 : 1,
|
|
3706
3740
|
borderTopColor: "$color4",
|
|
3707
3741
|
children: [
|
|
3708
|
-
row.leading ? /* @__PURE__ */ (0,
|
|
3709
|
-
/* @__PURE__ */ (0,
|
|
3710
|
-
/* @__PURE__ */ (0,
|
|
3711
|
-
row.subtitle ? /* @__PURE__ */ (0,
|
|
3742
|
+
row.leading ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.YStack, { width: 32, height: 32, borderRadius: "$8", backgroundColor: "$color3", alignItems: "center", justifyContent: "center", children: row.leading }) : null,
|
|
3743
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { flex: 1, children: [
|
|
3744
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$3", fontWeight: "600", children: row.title }),
|
|
3745
|
+
row.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$2", color: "$color10", children: row.subtitle }) : null
|
|
3712
3746
|
] }),
|
|
3713
|
-
row.value ? /* @__PURE__ */ (0,
|
|
3747
|
+
row.value ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$3", color: "$color11", children: row.value }) : null
|
|
3714
3748
|
]
|
|
3715
3749
|
},
|
|
3716
3750
|
row.id
|
|
@@ -3727,6 +3761,7 @@ function FinanceDashboard({
|
|
|
3727
3761
|
Anchor,
|
|
3728
3762
|
AnimatePresence,
|
|
3729
3763
|
AppHeader,
|
|
3764
|
+
AppleLogo,
|
|
3730
3765
|
Article,
|
|
3731
3766
|
Aside,
|
|
3732
3767
|
Avatar,
|
|
@@ -3773,7 +3808,9 @@ function FinanceDashboard({
|
|
|
3773
3808
|
Form,
|
|
3774
3809
|
FormField,
|
|
3775
3810
|
Frame,
|
|
3811
|
+
GitHubLogo,
|
|
3776
3812
|
GlassCard,
|
|
3813
|
+
GoogleLogo,
|
|
3777
3814
|
Grid,
|
|
3778
3815
|
Group,
|
|
3779
3816
|
H1,
|
|
@@ -3795,6 +3832,7 @@ function FinanceDashboard({
|
|
|
3795
3832
|
LoginScreen,
|
|
3796
3833
|
Main,
|
|
3797
3834
|
MediaCard,
|
|
3835
|
+
MicrosoftLogo,
|
|
3798
3836
|
Nav,
|
|
3799
3837
|
NotificationBanner,
|
|
3800
3838
|
OTPInput,
|