@blinkdotnew/mobile-ui 2.0.0-alpha.16 → 2.0.0-alpha.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +132 -122
- package/dist/index.d.ts +132 -122
- package/dist/index.js +714 -706
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +711 -717
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -1
package/dist/index.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" }) });
|
|
1160
|
-
}
|
|
1161
|
-
function TestimonialCard({ testimonial }) {
|
|
1162
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.YStack, { flex: 1, minWidth: 220, backgroundColor: "$color2", borderRadius: "$6", padding: "$3", gap: "$2", children: [
|
|
1163
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.SizableText, { size: "$3", color: "$color11", children: [
|
|
1164
|
-
"\u201C",
|
|
1165
|
-
testimonial.quote,
|
|
1166
|
-
"\u201D"
|
|
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
|
|
1171
|
-
] })
|
|
1172
|
-
] });
|
|
1195
|
+
function normalizeFeature(f) {
|
|
1196
|
+
return typeof f === "string" ? { title: f } : f;
|
|
1173
1197
|
}
|
|
1174
|
-
function
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
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
|
|
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
|
|
1192
1205
|
] })
|
|
1193
1206
|
] });
|
|
1194
1207
|
}
|
|
1195
|
-
function
|
|
1196
|
-
|
|
1197
|
-
|
|
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,
|
|
1284
|
-
] }),
|
|
1285
|
-
countdownMinutes && !countdown.expired && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.XStack, { justifyContent: "center", padding: "$2", backgroundColor: "$red3", borderRadius: "$4", alignSelf: "center", paddingHorizontal: "$4", gap: "$2", alignItems: "center", children: [
|
|
1286
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$red9", fontWeight: "600", children: "Offer ends in" }),
|
|
1287
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$5", color: "$red9", fontWeight: "800", fontFamily: "$mono", children: countdown.display })
|
|
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 })
|
|
1288
1330
|
] }),
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
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,36 +1701,13 @@ 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
|
|
1669
|
-
function GoogleIcon({ size = 20 }) {
|
|
1670
|
-
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.XStack, { width: size, height: size, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { fontSize: size, lineHeight: size, fontWeight: "700", color: "#4285F4", children: "G" }) });
|
|
1671
|
-
}
|
|
1672
|
-
function AppleIcon({ size = 20 }) {
|
|
1673
|
-
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.XStack, { width: size, height: size, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { fontSize: size * 0.85, lineHeight: size, color: "$color1", children: "\uF8FF" }) });
|
|
1674
|
-
}
|
|
1675
|
-
function GitHubIcon({ size = 20 }) {
|
|
1676
|
-
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.Circle, { size, backgroundColor: "$color1", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { fontSize: size * 0.6, lineHeight: size, fontWeight: "900", color: "$color12", textAlign: "center", children: "GH" }) });
|
|
1677
|
-
}
|
|
1678
|
-
function MicrosoftIcon({ size = 20 }) {
|
|
1679
|
-
const half = Math.floor(size * 0.4);
|
|
1680
|
-
const gap = 2;
|
|
1681
|
-
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.YStack, { width: size, height: size, alignItems: "center", justifyContent: "center", children: [
|
|
1682
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.XStack, { gap, children: [
|
|
1683
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.YStack, { width: half, height: half, backgroundColor: "#F25022" }),
|
|
1684
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.YStack, { width: half, height: half, backgroundColor: "#7FBA00" })
|
|
1685
|
-
] }),
|
|
1686
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.XStack, { gap, children: [
|
|
1687
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.YStack, { width: half, height: half, backgroundColor: "#00A4EF" }),
|
|
1688
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.YStack, { width: half, height: half, backgroundColor: "#FFB900" })
|
|
1689
|
-
] })
|
|
1690
|
-
] });
|
|
1691
|
-
}
|
|
1704
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1692
1705
|
var BRAND_ICON_MAP = {
|
|
1693
|
-
google:
|
|
1694
|
-
apple:
|
|
1695
|
-
github:
|
|
1696
|
-
microsoft:
|
|
1697
|
-
custom: ({ size = 20 }) => /* @__PURE__ */ (0,
|
|
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" }) })
|
|
1698
1711
|
};
|
|
1699
1712
|
var BRAND_STYLES = {
|
|
1700
1713
|
google: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" },
|
|
@@ -1705,9 +1718,10 @@ var BRAND_STYLES = {
|
|
|
1705
1718
|
};
|
|
1706
1719
|
function ProviderBadge({ provider }) {
|
|
1707
1720
|
const brand = provider.brand ?? "custom";
|
|
1708
|
-
if (provider.icon) return /* @__PURE__ */ (0,
|
|
1709
|
-
const
|
|
1710
|
-
|
|
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 });
|
|
1711
1725
|
}
|
|
1712
1726
|
function LoginScreen({
|
|
1713
1727
|
variant = "default",
|
|
@@ -1732,9 +1746,9 @@ function LoginScreen({
|
|
|
1732
1746
|
const [password, setPassword] = (0, import_react9.useState)("");
|
|
1733
1747
|
const isEditorial = variant === "editorial";
|
|
1734
1748
|
const isCenteredCard = variant === "centered-card";
|
|
1735
|
-
return /* @__PURE__ */ (0,
|
|
1736
|
-
backgroundSlot ? /* @__PURE__ */ (0,
|
|
1737
|
-
/* @__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)(
|
|
1738
1752
|
import_tamagui36.YStack,
|
|
1739
1753
|
{
|
|
1740
1754
|
gap: "$5",
|
|
@@ -1744,13 +1758,13 @@ function LoginScreen({
|
|
|
1744
1758
|
borderWidth: isCenteredCard ? 1 : 0,
|
|
1745
1759
|
borderColor: isCenteredCard ? "$color4" : void 0,
|
|
1746
1760
|
children: [
|
|
1747
|
-
/* @__PURE__ */ (0,
|
|
1748
|
-
logo && /* @__PURE__ */ (0,
|
|
1749
|
-
hero ? /* @__PURE__ */ (0,
|
|
1750
|
-
/* @__PURE__ */ (0,
|
|
1751
|
-
/* @__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 })
|
|
1752
1766
|
] }),
|
|
1753
|
-
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)(
|
|
1754
1768
|
import_tamagui36.Button,
|
|
1755
1769
|
{
|
|
1756
1770
|
size: "$5",
|
|
@@ -1762,25 +1776,25 @@ function LoginScreen({
|
|
|
1762
1776
|
onPress: () => onProviderPress?.(p.id),
|
|
1763
1777
|
hoverStyle: { backgroundColor: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].backgroundColor : "$color2" },
|
|
1764
1778
|
pressStyle: { backgroundColor: "$color3" },
|
|
1765
|
-
children: /* @__PURE__ */ (0,
|
|
1766
|
-
/* @__PURE__ */ (0,
|
|
1767
|
-
/* @__PURE__ */ (0,
|
|
1768
|
-
/* @__PURE__ */ (0,
|
|
1769
|
-
/* @__PURE__ */ (0,
|
|
1770
|
-
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
|
|
1771
1785
|
] })
|
|
1772
1786
|
] }),
|
|
1773
|
-
/* @__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" })
|
|
1774
1788
|
] })
|
|
1775
1789
|
},
|
|
1776
1790
|
p.id
|
|
1777
1791
|
)) }),
|
|
1778
|
-
showEmailForm && providers.length > 0 && /* @__PURE__ */ (0,
|
|
1779
|
-
showEmailForm && /* @__PURE__ */ (0,
|
|
1780
|
-
/* @__PURE__ */ (0,
|
|
1781
|
-
/* @__PURE__ */ (0,
|
|
1782
|
-
onForgotPassword && /* @__PURE__ */ (0,
|
|
1783
|
-
/* @__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)(
|
|
1784
1798
|
import_tamagui36.Button,
|
|
1785
1799
|
{
|
|
1786
1800
|
size: "$5",
|
|
@@ -1791,18 +1805,18 @@ function LoginScreen({
|
|
|
1791
1805
|
onPress: () => onEmailSubmit?.(email, password),
|
|
1792
1806
|
hoverStyle: { backgroundColor: "$color10" },
|
|
1793
1807
|
pressStyle: { backgroundColor: "$color8" },
|
|
1794
|
-
icon: loading ? /* @__PURE__ */ (0,
|
|
1808
|
+
icon: loading ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.Spinner, { size: "small", color: "$color1" }) : void 0,
|
|
1795
1809
|
children: "Sign In"
|
|
1796
1810
|
}
|
|
1797
1811
|
),
|
|
1798
|
-
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" }) })
|
|
1799
1813
|
] }),
|
|
1800
|
-
(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: [
|
|
1801
1815
|
"By continuing you agree to our",
|
|
1802
1816
|
" ",
|
|
1803
|
-
onTerms && /* @__PURE__ */ (0,
|
|
1817
|
+
onTerms && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$2", color: "$color9", onPress: onTerms, children: "Terms of Service" }),
|
|
1804
1818
|
onTerms && onPrivacy && " & ",
|
|
1805
|
-
onPrivacy && /* @__PURE__ */ (0,
|
|
1819
|
+
onPrivacy && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$2", color: "$color9", onPress: onPrivacy, children: "Privacy Policy" })
|
|
1806
1820
|
] }) }),
|
|
1807
1821
|
footerSlot
|
|
1808
1822
|
]
|
|
@@ -1813,11 +1827,11 @@ function LoginScreen({
|
|
|
1813
1827
|
|
|
1814
1828
|
// src/patterns/TabBar.tsx
|
|
1815
1829
|
var import_tamagui37 = require("tamagui");
|
|
1816
|
-
var
|
|
1830
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1817
1831
|
function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
1818
|
-
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) => {
|
|
1819
1833
|
const active = tab.id === activeTab;
|
|
1820
|
-
return /* @__PURE__ */ (0,
|
|
1834
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
1821
1835
|
import_tamagui37.YStack,
|
|
1822
1836
|
{
|
|
1823
1837
|
flex: 1,
|
|
@@ -1827,8 +1841,8 @@ function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
|
1827
1841
|
pressStyle: { opacity: 0.6 },
|
|
1828
1842
|
onPress: () => onTabPress(tab.id),
|
|
1829
1843
|
children: [
|
|
1830
|
-
tab.icon && /* @__PURE__ */ (0,
|
|
1831
|
-
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 })
|
|
1832
1846
|
]
|
|
1833
1847
|
},
|
|
1834
1848
|
tab.id
|
|
@@ -1838,11 +1852,11 @@ function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
|
1838
1852
|
|
|
1839
1853
|
// src/patterns/SearchBar.tsx
|
|
1840
1854
|
var import_tamagui38 = require("tamagui");
|
|
1841
|
-
var
|
|
1855
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1842
1856
|
function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter, onCancel, autoFocus }) {
|
|
1843
|
-
return /* @__PURE__ */ (0,
|
|
1844
|
-
/* @__PURE__ */ (0,
|
|
1845
|
-
/* @__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)(
|
|
1846
1860
|
import_tamagui38.Input,
|
|
1847
1861
|
{
|
|
1848
1862
|
flex: 1,
|
|
@@ -1856,14 +1870,14 @@ function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter
|
|
|
1856
1870
|
autoFocus
|
|
1857
1871
|
}
|
|
1858
1872
|
),
|
|
1859
|
-
onFilter && /* @__PURE__ */ (0,
|
|
1860
|
-
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" })
|
|
1861
1875
|
] });
|
|
1862
1876
|
}
|
|
1863
1877
|
|
|
1864
1878
|
// src/patterns/FloatingActionButton.tsx
|
|
1865
1879
|
var import_tamagui39 = require("tamagui");
|
|
1866
|
-
var
|
|
1880
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1867
1881
|
var sizes = { sm: 44, md: 56, lg: 68 };
|
|
1868
1882
|
var positionStyles = {
|
|
1869
1883
|
"bottom-right": { right: 20 },
|
|
@@ -1872,7 +1886,7 @@ var positionStyles = {
|
|
|
1872
1886
|
};
|
|
1873
1887
|
function FloatingActionButton({ icon, label, onPress, position = "bottom-right", size = "md" }) {
|
|
1874
1888
|
const dim = sizes[size];
|
|
1875
|
-
return /* @__PURE__ */ (0,
|
|
1889
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
1876
1890
|
import_tamagui39.XStack,
|
|
1877
1891
|
{
|
|
1878
1892
|
position: "absolute",
|
|
@@ -1890,8 +1904,8 @@ function FloatingActionButton({ icon, label, onPress, position = "bottom-right",
|
|
|
1890
1904
|
pressStyle: { scale: 0.95, opacity: 0.9 },
|
|
1891
1905
|
onPress,
|
|
1892
1906
|
children: [
|
|
1893
|
-
icon && /* @__PURE__ */ (0,
|
|
1894
|
-
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 })
|
|
1895
1909
|
]
|
|
1896
1910
|
}
|
|
1897
1911
|
);
|
|
@@ -1899,9 +1913,9 @@ function FloatingActionButton({ icon, label, onPress, position = "bottom-right",
|
|
|
1899
1913
|
|
|
1900
1914
|
// src/patterns/ActionSheet.tsx
|
|
1901
1915
|
var import_tamagui40 = require("tamagui");
|
|
1902
|
-
var
|
|
1916
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1903
1917
|
function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel = "Cancel", zIndex = 1e5 }) {
|
|
1904
|
-
return /* @__PURE__ */ (0,
|
|
1918
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
1905
1919
|
import_tamagui40.Sheet,
|
|
1906
1920
|
{
|
|
1907
1921
|
modal: true,
|
|
@@ -1913,11 +1927,11 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1913
1927
|
zIndex,
|
|
1914
1928
|
animation: "medium",
|
|
1915
1929
|
children: [
|
|
1916
|
-
/* @__PURE__ */ (0,
|
|
1917
|
-
/* @__PURE__ */ (0,
|
|
1918
|
-
/* @__PURE__ */ (0,
|
|
1919
|
-
title && /* @__PURE__ */ (0,
|
|
1920
|
-
/* @__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)(
|
|
1921
1935
|
import_tamagui40.XStack,
|
|
1922
1936
|
{
|
|
1923
1937
|
height: 52,
|
|
@@ -1931,8 +1945,8 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1931
1945
|
onOpenChange(false);
|
|
1932
1946
|
},
|
|
1933
1947
|
children: [
|
|
1934
|
-
item.icon && /* @__PURE__ */ (0,
|
|
1935
|
-
/* @__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)(
|
|
1936
1950
|
import_tamagui40.SizableText,
|
|
1937
1951
|
{
|
|
1938
1952
|
size: "$5",
|
|
@@ -1946,7 +1960,7 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1946
1960
|
},
|
|
1947
1961
|
item.id
|
|
1948
1962
|
)) }),
|
|
1949
|
-
/* @__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)(
|
|
1950
1964
|
import_tamagui40.XStack,
|
|
1951
1965
|
{
|
|
1952
1966
|
height: 48,
|
|
@@ -1955,7 +1969,7 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1955
1969
|
borderRadius: "$4",
|
|
1956
1970
|
pressStyle: { backgroundColor: "$color3" },
|
|
1957
1971
|
onPress: () => onOpenChange(false),
|
|
1958
|
-
children: /* @__PURE__ */ (0,
|
|
1972
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.SizableText, { size: "$5", fontWeight: "600", color: "$color9", children: cancelLabel })
|
|
1959
1973
|
}
|
|
1960
1974
|
) })
|
|
1961
1975
|
] })
|
|
@@ -1966,18 +1980,18 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1966
1980
|
|
|
1967
1981
|
// src/patterns/Skeleton.tsx
|
|
1968
1982
|
var import_tamagui41 = require("tamagui");
|
|
1969
|
-
var
|
|
1983
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1970
1984
|
function Skeleton({ width, height, borderRadius, variant = "rectangular" }) {
|
|
1971
1985
|
const size = variant === "circular" ? height ?? 40 : height;
|
|
1972
1986
|
const w = variant === "text" ? width ?? "100%" : width;
|
|
1973
1987
|
const h = variant === "text" ? height ?? 16 : size;
|
|
1974
1988
|
const r = variant === "circular" ? 9999 : borderRadius ?? 8;
|
|
1975
|
-
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 } });
|
|
1976
1990
|
}
|
|
1977
1991
|
|
|
1978
1992
|
// src/patterns/NotificationBanner.tsx
|
|
1979
1993
|
var import_tamagui42 = require("tamagui");
|
|
1980
|
-
var
|
|
1994
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1981
1995
|
var variantColors = {
|
|
1982
1996
|
info: { bg: "$blue3", text: "$blue11" },
|
|
1983
1997
|
success: { bg: "$green3", text: "$green11" },
|
|
@@ -1986,7 +2000,7 @@ var variantColors = {
|
|
|
1986
2000
|
};
|
|
1987
2001
|
function NotificationBanner({ title, message, variant = "info", onPress, onDismiss, icon }) {
|
|
1988
2002
|
const colors = variantColors[variant];
|
|
1989
|
-
return /* @__PURE__ */ (0,
|
|
2003
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
1990
2004
|
import_tamagui42.XStack,
|
|
1991
2005
|
{
|
|
1992
2006
|
backgroundColor: colors.bg,
|
|
@@ -1997,12 +2011,12 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
|
|
|
1997
2011
|
onPress,
|
|
1998
2012
|
pressStyle: onPress ? { opacity: 0.8 } : void 0,
|
|
1999
2013
|
children: [
|
|
2000
|
-
icon && /* @__PURE__ */ (0,
|
|
2001
|
-
/* @__PURE__ */ (0,
|
|
2002
|
-
/* @__PURE__ */ (0,
|
|
2003
|
-
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 })
|
|
2004
2018
|
] }),
|
|
2005
|
-
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" })
|
|
2006
2020
|
]
|
|
2007
2021
|
}
|
|
2008
2022
|
);
|
|
@@ -2010,35 +2024,35 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
|
|
|
2010
2024
|
|
|
2011
2025
|
// src/patterns/ProgressSteps.tsx
|
|
2012
2026
|
var import_tamagui43 = require("tamagui");
|
|
2013
|
-
var
|
|
2027
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2014
2028
|
function ProgressSteps({ steps, currentStep, variant = "dots" }) {
|
|
2015
2029
|
if (variant === "bar") {
|
|
2016
2030
|
const progress = steps.length > 1 ? currentStep / (steps.length - 1) * 100 : 100;
|
|
2017
|
-
return /* @__PURE__ */ (0,
|
|
2018
|
-
/* @__PURE__ */ (0,
|
|
2019
|
-
/* @__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)) })
|
|
2020
2034
|
] });
|
|
2021
2035
|
}
|
|
2022
|
-
return /* @__PURE__ */ (0,
|
|
2023
|
-
/* @__PURE__ */ (0,
|
|
2024
|
-
/* @__PURE__ */ (0,
|
|
2025
|
-
/* @__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 })
|
|
2026
2040
|
] }),
|
|
2027
|
-
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" })
|
|
2028
2042
|
] }, i)) });
|
|
2029
2043
|
}
|
|
2030
2044
|
|
|
2031
2045
|
// src/patterns/SwipeableRow.tsx
|
|
2032
2046
|
var import_react10 = require("react");
|
|
2033
2047
|
var import_tamagui44 = require("tamagui");
|
|
2034
|
-
var
|
|
2048
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2035
2049
|
function SwipeableRow({ children, leftActions, rightActions }) {
|
|
2036
2050
|
const [showActions, setShowActions] = (0, import_react10.useState)(false);
|
|
2037
2051
|
const actions = [...leftActions ?? [], ...rightActions ?? []];
|
|
2038
|
-
if (actions.length === 0) return /* @__PURE__ */ (0,
|
|
2039
|
-
return /* @__PURE__ */ (0,
|
|
2040
|
-
/* @__PURE__ */ (0,
|
|
2041
|
-
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)(
|
|
2042
2056
|
import_tamagui44.Button,
|
|
2043
2057
|
{
|
|
2044
2058
|
flex: 1,
|
|
@@ -2049,7 +2063,7 @@ function SwipeableRow({ children, leftActions, rightActions }) {
|
|
|
2049
2063
|
action.onPress();
|
|
2050
2064
|
setShowActions(false);
|
|
2051
2065
|
},
|
|
2052
|
-
children: /* @__PURE__ */ (0,
|
|
2066
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_tamagui44.SizableText, { size: "$2", fontWeight: "600", color: "white", children: action.label })
|
|
2053
2067
|
},
|
|
2054
2068
|
action.id
|
|
2055
2069
|
)) })
|
|
@@ -2059,9 +2073,9 @@ function SwipeableRow({ children, leftActions, rightActions }) {
|
|
|
2059
2073
|
// src/patterns/MediaCard.tsx
|
|
2060
2074
|
var import_tamagui45 = require("tamagui");
|
|
2061
2075
|
var import_linear_gradient = require("tamagui/linear-gradient");
|
|
2062
|
-
var
|
|
2076
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2063
2077
|
function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio = 16 / 9, onPress, badge }) {
|
|
2064
|
-
return /* @__PURE__ */ (0,
|
|
2078
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2065
2079
|
import_tamagui45.YStack,
|
|
2066
2080
|
{
|
|
2067
2081
|
borderRadius: "$4",
|
|
@@ -2069,9 +2083,9 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
2069
2083
|
onPress,
|
|
2070
2084
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
2071
2085
|
animation: "quick",
|
|
2072
|
-
children: /* @__PURE__ */ (0,
|
|
2073
|
-
/* @__PURE__ */ (0,
|
|
2074
|
-
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)(
|
|
2075
2089
|
import_linear_gradient.LinearGradient,
|
|
2076
2090
|
{
|
|
2077
2091
|
colors: ["transparent", "rgba(0,0,0,0.7)"],
|
|
@@ -2084,8 +2098,8 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
2084
2098
|
height: "60%"
|
|
2085
2099
|
}
|
|
2086
2100
|
),
|
|
2087
|
-
overlay === "dark" && /* @__PURE__ */ (0,
|
|
2088
|
-
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)(
|
|
2089
2103
|
import_tamagui45.XStack,
|
|
2090
2104
|
{
|
|
2091
2105
|
position: "absolute",
|
|
@@ -2095,12 +2109,12 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
2095
2109
|
paddingHorizontal: "$2",
|
|
2096
2110
|
paddingVertical: "$1",
|
|
2097
2111
|
borderRadius: "$2",
|
|
2098
|
-
children: /* @__PURE__ */ (0,
|
|
2112
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.SizableText, { size: "$1", fontWeight: "600", color: "$color1", children: badge })
|
|
2099
2113
|
}
|
|
2100
2114
|
),
|
|
2101
|
-
/* @__PURE__ */ (0,
|
|
2102
|
-
/* @__PURE__ */ (0,
|
|
2103
|
-
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 })
|
|
2104
2118
|
] })
|
|
2105
2119
|
] })
|
|
2106
2120
|
}
|
|
@@ -2111,13 +2125,13 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
2111
2125
|
var import_react11 = require("react");
|
|
2112
2126
|
var import_tamagui46 = require("tamagui");
|
|
2113
2127
|
var import_react_native3 = require("react-native");
|
|
2114
|
-
var
|
|
2128
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2115
2129
|
function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false }) {
|
|
2116
2130
|
const [activeIndex, setActiveIndex] = (0, import_react11.useState)(0);
|
|
2117
2131
|
const count = import_react11.Children.count(children);
|
|
2118
2132
|
const gapPx = gap === "$2" ? 8 : gap === "$3" ? 12 : 16;
|
|
2119
|
-
return /* @__PURE__ */ (0,
|
|
2120
|
-
/* @__PURE__ */ (0,
|
|
2133
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_tamagui46.YStack, { gap: "$3", children: [
|
|
2134
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2121
2135
|
import_react_native3.ScrollView,
|
|
2122
2136
|
{
|
|
2123
2137
|
horizontal: true,
|
|
@@ -2131,50 +2145,50 @@ function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false
|
|
|
2131
2145
|
children
|
|
2132
2146
|
}
|
|
2133
2147
|
),
|
|
2134
|
-
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)) })
|
|
2135
2149
|
] });
|
|
2136
2150
|
}
|
|
2137
2151
|
|
|
2138
2152
|
// src/patterns/PullToRefresh.tsx
|
|
2139
2153
|
var import_tamagui47 = require("tamagui");
|
|
2140
2154
|
var import_react_native4 = require("react-native");
|
|
2141
|
-
var
|
|
2155
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2142
2156
|
function PullToRefresh({ children, onRefresh, refreshing = false }) {
|
|
2143
|
-
return /* @__PURE__ */ (0,
|
|
2157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
2144
2158
|
import_react_native4.ScrollView,
|
|
2145
2159
|
{
|
|
2146
2160
|
contentContainerStyle: { flexGrow: 1 },
|
|
2147
|
-
refreshControl: /* @__PURE__ */ (0,
|
|
2148
|
-
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 })
|
|
2149
2163
|
}
|
|
2150
2164
|
);
|
|
2151
2165
|
}
|
|
2152
2166
|
|
|
2153
2167
|
// src/patterns/ProductCard.tsx
|
|
2154
2168
|
var import_tamagui48 = require("tamagui");
|
|
2155
|
-
var
|
|
2169
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2156
2170
|
function Stars({ rating = 0 }) {
|
|
2157
|
-
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)) });
|
|
2158
2172
|
}
|
|
2159
2173
|
function CardContent2({ title, price, originalPrice, rating, reviewCount, onAddToCart }) {
|
|
2160
|
-
return /* @__PURE__ */ (0,
|
|
2161
|
-
/* @__PURE__ */ (0,
|
|
2162
|
-
/* @__PURE__ */ (0,
|
|
2163
|
-
rating !== void 0 && /* @__PURE__ */ (0,
|
|
2164
|
-
/* @__PURE__ */ (0,
|
|
2165
|
-
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: [
|
|
2166
2180
|
"(",
|
|
2167
2181
|
reviewCount,
|
|
2168
2182
|
")"
|
|
2169
2183
|
] })
|
|
2170
2184
|
] })
|
|
2171
2185
|
] }),
|
|
2172
|
-
/* @__PURE__ */ (0,
|
|
2173
|
-
/* @__PURE__ */ (0,
|
|
2174
|
-
/* @__PURE__ */ (0,
|
|
2175
|
-
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 })
|
|
2176
2190
|
] }),
|
|
2177
|
-
onAddToCart && /* @__PURE__ */ (0,
|
|
2191
|
+
onAddToCart && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2178
2192
|
import_tamagui48.Button,
|
|
2179
2193
|
{
|
|
2180
2194
|
size: "$3",
|
|
@@ -2196,7 +2210,7 @@ function CardContent2({ title, price, originalPrice, rating, reviewCount, onAddT
|
|
|
2196
2210
|
function ProductCard({ image, title, price, originalPrice, rating, reviewCount, badge, onPress, onAddToCart, variant = "vertical" }) {
|
|
2197
2211
|
const isHorizontal = variant === "horizontal";
|
|
2198
2212
|
const Wrapper = isHorizontal ? import_tamagui48.XStack : import_tamagui48.YStack;
|
|
2199
|
-
return /* @__PURE__ */ (0,
|
|
2213
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
2200
2214
|
Wrapper,
|
|
2201
2215
|
{
|
|
2202
2216
|
backgroundColor: "$color1",
|
|
@@ -2209,9 +2223,9 @@ function ProductCard({ image, title, price, originalPrice, rating, reviewCount,
|
|
|
2209
2223
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
2210
2224
|
...isHorizontal ? { height: 140 } : {},
|
|
2211
2225
|
children: [
|
|
2212
|
-
/* @__PURE__ */ (0,
|
|
2213
|
-
/* @__PURE__ */ (0,
|
|
2214
|
-
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)(
|
|
2215
2229
|
import_tamagui48.XStack,
|
|
2216
2230
|
{
|
|
2217
2231
|
position: "absolute",
|
|
@@ -2221,11 +2235,11 @@ function ProductCard({ image, title, price, originalPrice, rating, reviewCount,
|
|
|
2221
2235
|
paddingHorizontal: "$2",
|
|
2222
2236
|
paddingVertical: "$1",
|
|
2223
2237
|
borderRadius: "$10",
|
|
2224
|
-
children: /* @__PURE__ */ (0,
|
|
2238
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.SizableText, { size: "$1", fontWeight: "700", color: "white", children: badge })
|
|
2225
2239
|
}
|
|
2226
2240
|
)
|
|
2227
2241
|
] }),
|
|
2228
|
-
/* @__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 } }) })
|
|
2229
2243
|
]
|
|
2230
2244
|
}
|
|
2231
2245
|
);
|
|
@@ -2233,11 +2247,11 @@ function ProductCard({ image, title, price, originalPrice, rating, reviewCount,
|
|
|
2233
2247
|
|
|
2234
2248
|
// src/patterns/PricingTable.tsx
|
|
2235
2249
|
var import_tamagui49 = require("tamagui");
|
|
2236
|
-
var
|
|
2250
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2237
2251
|
function BillingToggle({ annual, onToggle }) {
|
|
2238
|
-
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) => {
|
|
2239
2253
|
const active = i === 1 ? annual : !annual;
|
|
2240
|
-
return /* @__PURE__ */ (0,
|
|
2254
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2241
2255
|
import_tamagui49.XStack,
|
|
2242
2256
|
{
|
|
2243
2257
|
paddingHorizontal: "$4",
|
|
@@ -2247,96 +2261,86 @@ function BillingToggle({ annual, onToggle }) {
|
|
|
2247
2261
|
onPress: () => onToggle(i === 1),
|
|
2248
2262
|
pressStyle: { opacity: 0.8 },
|
|
2249
2263
|
animation: "quick",
|
|
2250
|
-
children: /* @__PURE__ */ (0,
|
|
2264
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$3", fontWeight: "600", color: active ? "$color1" : "$color10", children: label })
|
|
2251
2265
|
},
|
|
2252
2266
|
label
|
|
2253
2267
|
);
|
|
2254
2268
|
}) });
|
|
2255
2269
|
}
|
|
2256
|
-
function
|
|
2257
|
-
return /* @__PURE__ */ (0,
|
|
2258
|
-
import_tamagui49.
|
|
2270
|
+
function PlanRow2({ plan, selected, onSelect }) {
|
|
2271
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
2272
|
+
import_tamagui49.XStack,
|
|
2259
2273
|
{
|
|
2260
|
-
flex: 1,
|
|
2261
|
-
minWidth: 260,
|
|
2262
2274
|
padding: "$4",
|
|
2263
|
-
borderRadius: "$
|
|
2264
|
-
gap: "$3",
|
|
2275
|
+
borderRadius: "$6",
|
|
2265
2276
|
borderWidth: 2,
|
|
2266
|
-
borderColor: selected ? "$color9" :
|
|
2267
|
-
backgroundColor:
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
animation: "quick",
|
|
2277
|
+
borderColor: selected ? "$color9" : "$color4",
|
|
2278
|
+
backgroundColor: selected ? "$color2" : "$color1",
|
|
2279
|
+
alignItems: "center",
|
|
2280
|
+
gap: "$3",
|
|
2271
2281
|
onPress: onSelect,
|
|
2282
|
+
pressStyle: { scale: 0.98, opacity: 0.9 },
|
|
2283
|
+
animation: "quick",
|
|
2284
|
+
cursor: "pointer",
|
|
2285
|
+
position: "relative",
|
|
2272
2286
|
children: [
|
|
2273
|
-
plan.popular && /* @__PURE__ */ (0,
|
|
2274
|
-
|
|
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,
|
|
2275
2290
|
{
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
backgroundColor: "$color9",
|
|
2280
|
-
|
|
2281
|
-
paddingVertical: "$1",
|
|
2282
|
-
borderRadius: "$10",
|
|
2283
|
-
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" })
|
|
2284
2296
|
}
|
|
2285
2297
|
),
|
|
2286
|
-
/* @__PURE__ */ (0,
|
|
2287
|
-
/* @__PURE__ */ (0,
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
"/",
|
|
2293
|
-
plan.period
|
|
2294
|
-
] })
|
|
2295
|
-
] })
|
|
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 })
|
|
2296
2304
|
] }),
|
|
2297
|
-
/* @__PURE__ */ (0,
|
|
2298
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui49.SizableText, { size: "$3", color: f.included ? "$green9" : "$color6", children: f.included ? "\u2713" : "\u2717" }),
|
|
2299
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui49.SizableText, { size: "$3", color: f.included ? "$color11" : "$color8", flex: 1, children: f.label })
|
|
2300
|
-
] }, i)) }),
|
|
2301
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2302
|
-
import_tamagui49.Button,
|
|
2303
|
-
{
|
|
2304
|
-
size: "$4",
|
|
2305
|
-
borderRadius: "$10",
|
|
2306
|
-
fontWeight: "700",
|
|
2307
|
-
animation: "quick",
|
|
2308
|
-
backgroundColor: selected || plan.popular ? "$color9" : "transparent",
|
|
2309
|
-
color: selected || plan.popular ? "$color1" : "$color11",
|
|
2310
|
-
borderWidth: selected || plan.popular ? 0 : 1,
|
|
2311
|
-
borderColor: "$color7",
|
|
2312
|
-
onPress: onSelect,
|
|
2313
|
-
pressStyle: { scale: 0.97, opacity: 0.9 },
|
|
2314
|
-
children: plan.cta ?? "Get Started"
|
|
2315
|
-
}
|
|
2316
|
-
)
|
|
2305
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$5", fontWeight: "800", children: plan.price })
|
|
2317
2306
|
]
|
|
2318
2307
|
}
|
|
2319
2308
|
);
|
|
2320
2309
|
}
|
|
2321
|
-
function
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
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,
|
|
2327
2324
|
{
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
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"
|
|
2340
2344
|
}
|
|
2341
2345
|
)
|
|
2342
2346
|
] });
|
|
@@ -2345,7 +2349,7 @@ function PricingTable({ plans, selectedPlan, onSelectPlan, annual = false, onTog
|
|
|
2345
2349
|
// src/patterns/CountdownBanner.tsx
|
|
2346
2350
|
var import_react12 = require("react");
|
|
2347
2351
|
var import_tamagui50 = require("tamagui");
|
|
2348
|
-
var
|
|
2352
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2349
2353
|
function useCountdown2(endTime, minutes, onExpire) {
|
|
2350
2354
|
const getRemaining = (0, import_react12.useCallback)(() => {
|
|
2351
2355
|
if (endTime) return Math.max(0, Math.floor((endTime.getTime() - Date.now()) / 1e3));
|
|
@@ -2379,74 +2383,74 @@ function useCountdown2(endTime, minutes, onExpire) {
|
|
|
2379
2383
|
return { display, expired: seconds <= 0 };
|
|
2380
2384
|
}
|
|
2381
2385
|
function TimeBox({ value }) {
|
|
2382
|
-
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 }) });
|
|
2383
2387
|
}
|
|
2384
2388
|
function CountdownBanner({ endTime, minutes, label = "Offer ends in", onExpire, variant = "banner" }) {
|
|
2385
2389
|
const { display, expired } = useCountdown2(endTime, minutes, onExpire);
|
|
2386
2390
|
if (expired) return null;
|
|
2387
2391
|
const parts = display.split(":");
|
|
2388
2392
|
if (variant === "badge") {
|
|
2389
|
-
return /* @__PURE__ */ (0,
|
|
2390
|
-
/* @__PURE__ */ (0,
|
|
2391
|
-
/* @__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 })
|
|
2392
2396
|
] });
|
|
2393
2397
|
}
|
|
2394
2398
|
if (variant === "compact") {
|
|
2395
|
-
return /* @__PURE__ */ (0,
|
|
2396
|
-
/* @__PURE__ */ (0,
|
|
2397
|
-
/* @__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 })
|
|
2398
2402
|
] });
|
|
2399
2403
|
}
|
|
2400
|
-
return /* @__PURE__ */ (0,
|
|
2401
|
-
/* @__PURE__ */ (0,
|
|
2402
|
-
/* @__PURE__ */ (0,
|
|
2403
|
-
i > 0 && /* @__PURE__ */ (0,
|
|
2404
|
-
/* @__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 })
|
|
2405
2409
|
] }, i)) })
|
|
2406
2410
|
] });
|
|
2407
2411
|
}
|
|
2408
2412
|
|
|
2409
2413
|
// src/patterns/TestimonialCard.tsx
|
|
2410
2414
|
var import_tamagui51 = require("tamagui");
|
|
2411
|
-
var
|
|
2415
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2412
2416
|
function Stars2({ count = 0 }) {
|
|
2413
2417
|
if (!count) return null;
|
|
2414
|
-
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)) });
|
|
2415
2419
|
}
|
|
2416
2420
|
function AuthorRow({ author, role, avatar }) {
|
|
2417
|
-
return /* @__PURE__ */ (0,
|
|
2418
|
-
avatar && /* @__PURE__ */ (0,
|
|
2419
|
-
/* @__PURE__ */ (0,
|
|
2420
|
-
/* @__PURE__ */ (0,
|
|
2421
|
-
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 })
|
|
2422
2426
|
] })
|
|
2423
2427
|
] });
|
|
2424
2428
|
}
|
|
2425
2429
|
function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card" }) {
|
|
2426
2430
|
if (variant === "minimal") {
|
|
2427
|
-
return /* @__PURE__ */ (0,
|
|
2428
|
-
/* @__PURE__ */ (0,
|
|
2429
|
-
/* @__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: [
|
|
2430
2434
|
'"',
|
|
2431
2435
|
quote,
|
|
2432
2436
|
'"'
|
|
2433
2437
|
] }),
|
|
2434
|
-
/* @__PURE__ */ (0,
|
|
2438
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AuthorRow, { author, role, avatar })
|
|
2435
2439
|
] });
|
|
2436
2440
|
}
|
|
2437
2441
|
if (variant === "featured") {
|
|
2438
|
-
return /* @__PURE__ */ (0,
|
|
2439
|
-
/* @__PURE__ */ (0,
|
|
2440
|
-
/* @__PURE__ */ (0,
|
|
2441
|
-
/* @__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: [
|
|
2442
2446
|
'"',
|
|
2443
2447
|
quote,
|
|
2444
2448
|
'"'
|
|
2445
2449
|
] }),
|
|
2446
|
-
/* @__PURE__ */ (0,
|
|
2450
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AuthorRow, { author, role, avatar })
|
|
2447
2451
|
] });
|
|
2448
2452
|
}
|
|
2449
|
-
return /* @__PURE__ */ (0,
|
|
2453
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
2450
2454
|
import_tamagui51.YStack,
|
|
2451
2455
|
{
|
|
2452
2456
|
backgroundColor: "$color1",
|
|
@@ -2456,13 +2460,13 @@ function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card
|
|
|
2456
2460
|
borderColor: "$color4",
|
|
2457
2461
|
gap: "$3",
|
|
2458
2462
|
children: [
|
|
2459
|
-
/* @__PURE__ */ (0,
|
|
2460
|
-
/* @__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: [
|
|
2461
2465
|
'"',
|
|
2462
2466
|
quote,
|
|
2463
2467
|
'"'
|
|
2464
2468
|
] }),
|
|
2465
|
-
/* @__PURE__ */ (0,
|
|
2469
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AuthorRow, { author, role, avatar })
|
|
2466
2470
|
]
|
|
2467
2471
|
}
|
|
2468
2472
|
);
|
|
@@ -2470,7 +2474,7 @@ function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card
|
|
|
2470
2474
|
|
|
2471
2475
|
// src/patterns/ConfirmDialog.tsx
|
|
2472
2476
|
var import_tamagui52 = require("tamagui");
|
|
2473
|
-
var
|
|
2477
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2474
2478
|
function ConfirmDialog({
|
|
2475
2479
|
open,
|
|
2476
2480
|
onOpenChange,
|
|
@@ -2491,8 +2495,8 @@ function ConfirmDialog({
|
|
|
2491
2495
|
onConfirm?.();
|
|
2492
2496
|
onOpenChange(false);
|
|
2493
2497
|
};
|
|
2494
|
-
return /* @__PURE__ */ (0,
|
|
2495
|
-
/* @__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)(
|
|
2496
2500
|
import_tamagui52.AlertDialog.Overlay,
|
|
2497
2501
|
{
|
|
2498
2502
|
opacity: 0.5,
|
|
@@ -2502,7 +2506,7 @@ function ConfirmDialog({
|
|
|
2502
2506
|
},
|
|
2503
2507
|
"overlay"
|
|
2504
2508
|
),
|
|
2505
|
-
/* @__PURE__ */ (0,
|
|
2509
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2506
2510
|
import_tamagui52.AlertDialog.Content,
|
|
2507
2511
|
{
|
|
2508
2512
|
bordered: true,
|
|
@@ -2516,11 +2520,11 @@ function ConfirmDialog({
|
|
|
2516
2520
|
scale: 1,
|
|
2517
2521
|
opacity: 1,
|
|
2518
2522
|
animation: "quick",
|
|
2519
|
-
children: /* @__PURE__ */ (0,
|
|
2520
|
-
icon && /* @__PURE__ */ (0,
|
|
2521
|
-
/* @__PURE__ */ (0,
|
|
2522
|
-
/* @__PURE__ */ (0,
|
|
2523
|
-
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)(
|
|
2524
2528
|
import_tamagui52.AlertDialog.Description,
|
|
2525
2529
|
{
|
|
2526
2530
|
size: "$3",
|
|
@@ -2530,8 +2534,8 @@ function ConfirmDialog({
|
|
|
2530
2534
|
}
|
|
2531
2535
|
)
|
|
2532
2536
|
] }),
|
|
2533
|
-
/* @__PURE__ */ (0,
|
|
2534
|
-
/* @__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)(
|
|
2535
2539
|
import_tamagui52.Button,
|
|
2536
2540
|
{
|
|
2537
2541
|
flex: 1,
|
|
@@ -2542,10 +2546,10 @@ function ConfirmDialog({
|
|
|
2542
2546
|
onPress: handleCancel,
|
|
2543
2547
|
pressStyle: { opacity: 0.7 },
|
|
2544
2548
|
animation: "quick",
|
|
2545
|
-
children: /* @__PURE__ */ (0,
|
|
2549
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.SizableText, { fontWeight: "600", children: cancelLabel })
|
|
2546
2550
|
}
|
|
2547
2551
|
),
|
|
2548
|
-
/* @__PURE__ */ (0,
|
|
2552
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2549
2553
|
import_tamagui52.Button,
|
|
2550
2554
|
{
|
|
2551
2555
|
flex: 1,
|
|
@@ -2555,7 +2559,7 @@ function ConfirmDialog({
|
|
|
2555
2559
|
onPress: handleConfirm,
|
|
2556
2560
|
pressStyle: { backgroundColor: destructive ? "$red8" : "$color8", scale: 0.97 },
|
|
2557
2561
|
animation: "quick",
|
|
2558
|
-
children: /* @__PURE__ */ (0,
|
|
2562
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.SizableText, { fontWeight: "600", color: "white", children: confirmLabel })
|
|
2559
2563
|
}
|
|
2560
2564
|
)
|
|
2561
2565
|
] })
|
|
@@ -2569,7 +2573,7 @@ function ConfirmDialog({
|
|
|
2569
2573
|
// src/patterns/Chip.tsx
|
|
2570
2574
|
var import_react13 = require("react");
|
|
2571
2575
|
var import_tamagui53 = require("tamagui");
|
|
2572
|
-
var
|
|
2576
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2573
2577
|
var sizes2 = { sm: { h: 28, px: "$2", text: "$2" }, md: { h: 34, px: "$3", text: "$3" }, lg: { h: 42, px: "$4", text: "$4" } };
|
|
2574
2578
|
function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "md", icon, color }) {
|
|
2575
2579
|
const s = sizes2[size];
|
|
@@ -2578,7 +2582,7 @@ function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "
|
|
|
2578
2582
|
const bg = active ? color ?? "$color9" : filled ? "$color3" : "transparent";
|
|
2579
2583
|
const border = active ? color ?? "$color9" : "$color6";
|
|
2580
2584
|
const fg = active ? "$color1" : "$color11";
|
|
2581
|
-
return /* @__PURE__ */ (0,
|
|
2585
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
2582
2586
|
import_tamagui53.XStack,
|
|
2583
2587
|
{
|
|
2584
2588
|
height: s.h,
|
|
@@ -2594,10 +2598,10 @@ function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "
|
|
|
2594
2598
|
onPress,
|
|
2595
2599
|
cursor: "pointer",
|
|
2596
2600
|
children: [
|
|
2597
|
-
active && /* @__PURE__ */ (0,
|
|
2598
|
-
icon && /* @__PURE__ */ (0,
|
|
2599
|
-
/* @__PURE__ */ (0,
|
|
2600
|
-
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)(
|
|
2601
2605
|
import_tamagui53.SizableText,
|
|
2602
2606
|
{
|
|
2603
2607
|
size: "$2",
|
|
@@ -2626,7 +2630,7 @@ function ChipGroup({ chips, selected = [], onSelectionChange, multiSelect = true
|
|
|
2626
2630
|
onSelectionChange(isSelected ? [] : [id]);
|
|
2627
2631
|
}
|
|
2628
2632
|
}, [selected, onSelectionChange, multiSelect]);
|
|
2629
|
-
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)(
|
|
2630
2634
|
Chip,
|
|
2631
2635
|
{
|
|
2632
2636
|
label: chip.label,
|
|
@@ -2644,7 +2648,7 @@ function ChipGroup({ chips, selected = [], onSelectionChange, multiSelect = true
|
|
|
2644
2648
|
var import_react14 = require("react");
|
|
2645
2649
|
var import_react_native5 = require("react-native");
|
|
2646
2650
|
var import_tamagui54 = require("tamagui");
|
|
2647
|
-
var
|
|
2651
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2648
2652
|
function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFocus, secureEntry }) {
|
|
2649
2653
|
const inputRef = (0, import_react14.useRef)(null);
|
|
2650
2654
|
const [focused, setFocused] = (0, import_react14.useState)(false);
|
|
@@ -2657,11 +2661,11 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2657
2661
|
const focusInput = (0, import_react14.useCallback)(() => {
|
|
2658
2662
|
inputRef.current?.focus();
|
|
2659
2663
|
}, []);
|
|
2660
|
-
return /* @__PURE__ */ (0,
|
|
2661
|
-
/* @__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) => {
|
|
2662
2666
|
const char = digits[i]?.trim();
|
|
2663
2667
|
const isCursor = focused && value.length === i;
|
|
2664
|
-
return /* @__PURE__ */ (0,
|
|
2668
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
2665
2669
|
import_tamagui54.YStack,
|
|
2666
2670
|
{
|
|
2667
2671
|
width: 48,
|
|
@@ -2675,8 +2679,8 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2675
2679
|
animation: "quick",
|
|
2676
2680
|
pointerEvents: "none",
|
|
2677
2681
|
children: [
|
|
2678
|
-
/* @__PURE__ */ (0,
|
|
2679
|
-
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)(
|
|
2680
2684
|
import_tamagui54.YStack,
|
|
2681
2685
|
{
|
|
2682
2686
|
position: "absolute",
|
|
@@ -2692,7 +2696,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2692
2696
|
i
|
|
2693
2697
|
);
|
|
2694
2698
|
}) }),
|
|
2695
|
-
import_react_native5.Platform.OS === "web" ? /* @__PURE__ */ (0,
|
|
2699
|
+
import_react_native5.Platform.OS === "web" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
2696
2700
|
"input",
|
|
2697
2701
|
{
|
|
2698
2702
|
ref: inputRef,
|
|
@@ -2720,7 +2724,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2720
2724
|
cursor: "pointer"
|
|
2721
2725
|
}
|
|
2722
2726
|
}
|
|
2723
|
-
) : /* @__PURE__ */ (0,
|
|
2727
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
2724
2728
|
import_tamagui54.Input,
|
|
2725
2729
|
{
|
|
2726
2730
|
ref: inputRef,
|
|
@@ -2746,7 +2750,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2746
2750
|
// src/patterns/PasswordInput.tsx
|
|
2747
2751
|
var import_react15 = require("react");
|
|
2748
2752
|
var import_tamagui55 = require("tamagui");
|
|
2749
|
-
var
|
|
2753
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
2750
2754
|
function getStrength(pw) {
|
|
2751
2755
|
if (!pw) return { label: "", color: "$color6", width: "0%" };
|
|
2752
2756
|
const score = [pw.length >= 8, /[A-Z]/.test(pw), /[0-9]/.test(pw), /[^A-Za-z0-9]/.test(pw)].filter(Boolean).length;
|
|
@@ -2758,9 +2762,9 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2758
2762
|
const [visible, setVisible] = (0, import_react15.useState)(false);
|
|
2759
2763
|
const toggle = (0, import_react15.useCallback)(() => setVisible((v) => !v), []);
|
|
2760
2764
|
const strength = getStrength(value);
|
|
2761
|
-
return /* @__PURE__ */ (0,
|
|
2762
|
-
label && /* @__PURE__ */ (0,
|
|
2763
|
-
/* @__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)(
|
|
2764
2768
|
import_tamagui55.XStack,
|
|
2765
2769
|
{
|
|
2766
2770
|
borderWidth: 1,
|
|
@@ -2771,7 +2775,7 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2771
2775
|
paddingRight: "$2",
|
|
2772
2776
|
focusStyle: { borderColor: "$color9" },
|
|
2773
2777
|
children: [
|
|
2774
|
-
/* @__PURE__ */ (0,
|
|
2778
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
2775
2779
|
import_tamagui55.Input,
|
|
2776
2780
|
{
|
|
2777
2781
|
flex: 1,
|
|
@@ -2785,7 +2789,7 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2785
2789
|
borderWidth: 0
|
|
2786
2790
|
}
|
|
2787
2791
|
),
|
|
2788
|
-
/* @__PURE__ */ (0,
|
|
2792
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
2789
2793
|
import_tamagui55.SizableText,
|
|
2790
2794
|
{
|
|
2791
2795
|
size: "$4",
|
|
@@ -2800,23 +2804,23 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2800
2804
|
]
|
|
2801
2805
|
}
|
|
2802
2806
|
),
|
|
2803
|
-
strengthIndicator && value.length > 0 && /* @__PURE__ */ (0,
|
|
2804
|
-
/* @__PURE__ */ (0,
|
|
2805
|
-
/* @__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 })
|
|
2806
2810
|
] }),
|
|
2807
|
-
error && /* @__PURE__ */ (0,
|
|
2811
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_tamagui55.SizableText, { size: "$2", color: "$red9", children: error })
|
|
2808
2812
|
] });
|
|
2809
2813
|
}
|
|
2810
2814
|
|
|
2811
2815
|
// src/patterns/AvatarGroup.tsx
|
|
2812
2816
|
var import_tamagui56 = require("tamagui");
|
|
2813
|
-
var
|
|
2817
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
2814
2818
|
function getInitials(name) {
|
|
2815
2819
|
if (!name) return "?";
|
|
2816
2820
|
return name.split(" ").map((p) => p[0]).join("").toUpperCase().slice(0, 2);
|
|
2817
2821
|
}
|
|
2818
2822
|
function AvatarItem({ uri, name, color, size }) {
|
|
2819
|
-
return /* @__PURE__ */ (0,
|
|
2823
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
2820
2824
|
import_tamagui56.Circle,
|
|
2821
2825
|
{
|
|
2822
2826
|
size,
|
|
@@ -2826,16 +2830,16 @@ function AvatarItem({ uri, name, color, size }) {
|
|
|
2826
2830
|
overflow: "hidden",
|
|
2827
2831
|
alignItems: "center",
|
|
2828
2832
|
justifyContent: "center",
|
|
2829
|
-
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) })
|
|
2830
2834
|
}
|
|
2831
2835
|
);
|
|
2832
2836
|
}
|
|
2833
2837
|
function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
2834
2838
|
const visible = avatars.slice(0, max);
|
|
2835
2839
|
const remaining = avatars.length - max;
|
|
2836
|
-
return /* @__PURE__ */ (0,
|
|
2837
|
-
visible.map((avatar, i) => /* @__PURE__ */ (0,
|
|
2838
|
-
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)(
|
|
2839
2843
|
import_tamagui56.Circle,
|
|
2840
2844
|
{
|
|
2841
2845
|
size,
|
|
@@ -2844,7 +2848,7 @@ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
|
2844
2848
|
borderColor: "$background",
|
|
2845
2849
|
alignItems: "center",
|
|
2846
2850
|
justifyContent: "center",
|
|
2847
|
-
children: /* @__PURE__ */ (0,
|
|
2851
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_tamagui56.SizableText, { size: "$2", fontWeight: "600", color: "$color11", children: [
|
|
2848
2852
|
"+",
|
|
2849
2853
|
remaining
|
|
2850
2854
|
] })
|
|
@@ -2856,7 +2860,7 @@ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
|
2856
2860
|
// src/patterns/SwipeCards.tsx
|
|
2857
2861
|
var import_react16 = require("react");
|
|
2858
2862
|
var import_tamagui57 = require("tamagui");
|
|
2859
|
-
var
|
|
2863
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
2860
2864
|
var STACK_SIZE = 3;
|
|
2861
2865
|
var CARD_OFFSETS = [
|
|
2862
2866
|
{ scale: 1, y: 0, opacity: 1 },
|
|
@@ -2893,16 +2897,16 @@ function SwipeCards({
|
|
|
2893
2897
|
return () => clearTimeout(timer);
|
|
2894
2898
|
}, [isEmpty, index, items, onEmpty, onSwipeLeft, onSwipeRight]);
|
|
2895
2899
|
if (isEmpty) {
|
|
2896
|
-
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 }) });
|
|
2897
2901
|
}
|
|
2898
|
-
return /* @__PURE__ */ (0,
|
|
2899
|
-
/* @__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) => {
|
|
2900
2904
|
const stackIdx = Math.min(remaining.length, STACK_SIZE) - 1 - reverseIdx;
|
|
2901
2905
|
const isTop = stackIdx === 0;
|
|
2902
2906
|
const offset = CARD_OFFSETS[stackIdx] ?? CARD_OFFSETS[2];
|
|
2903
2907
|
const exitX = exitDir === "left" ? -400 : exitDir === "right" ? 400 : 0;
|
|
2904
2908
|
const exitRotate = exitDir === "left" ? "-15deg" : exitDir === "right" ? "15deg" : "0deg";
|
|
2905
|
-
return /* @__PURE__ */ (0,
|
|
2909
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
|
|
2906
2910
|
import_tamagui57.YStack,
|
|
2907
2911
|
{
|
|
2908
2912
|
position: "absolute",
|
|
@@ -2914,7 +2918,7 @@ function SwipeCards({
|
|
|
2914
2918
|
borderRadius: "$5",
|
|
2915
2919
|
overflow: "hidden",
|
|
2916
2920
|
backgroundColor: "$background",
|
|
2917
|
-
|
|
2921
|
+
elevation: isTop ? 4 : 1,
|
|
2918
2922
|
shadowColor: "$shadowColor",
|
|
2919
2923
|
shadowRadius: isTop ? 16 : 4,
|
|
2920
2924
|
scale: isTop && exitDir ? 1 : offset.scale,
|
|
@@ -2924,7 +2928,7 @@ function SwipeCards({
|
|
|
2924
2928
|
rotate: isTop ? exitRotate : "0deg",
|
|
2925
2929
|
children: [
|
|
2926
2930
|
renderCard(item),
|
|
2927
|
-
isTop && exitDir === "left" && /* @__PURE__ */ (0,
|
|
2931
|
+
isTop && exitDir === "left" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
2928
2932
|
import_tamagui57.YStack,
|
|
2929
2933
|
{
|
|
2930
2934
|
position: "absolute",
|
|
@@ -2935,10 +2939,10 @@ function SwipeCards({
|
|
|
2935
2939
|
borderRadius: "$3",
|
|
2936
2940
|
padding: "$2",
|
|
2937
2941
|
rotate: "15deg",
|
|
2938
|
-
children: /* @__PURE__ */ (0,
|
|
2942
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$7", fontWeight: "800", color: "$red10", children: leftLabel.toUpperCase() })
|
|
2939
2943
|
}
|
|
2940
2944
|
),
|
|
2941
|
-
isTop && exitDir === "right" && /* @__PURE__ */ (0,
|
|
2945
|
+
isTop && exitDir === "right" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
2942
2946
|
import_tamagui57.YStack,
|
|
2943
2947
|
{
|
|
2944
2948
|
position: "absolute",
|
|
@@ -2949,7 +2953,7 @@ function SwipeCards({
|
|
|
2949
2953
|
borderRadius: "$3",
|
|
2950
2954
|
padding: "$2",
|
|
2951
2955
|
rotate: "-15deg",
|
|
2952
|
-
children: /* @__PURE__ */ (0,
|
|
2956
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$7", fontWeight: "800", color: "$green10", children: rightLabel.toUpperCase() })
|
|
2953
2957
|
}
|
|
2954
2958
|
)
|
|
2955
2959
|
]
|
|
@@ -2957,8 +2961,8 @@ function SwipeCards({
|
|
|
2957
2961
|
item.id
|
|
2958
2962
|
);
|
|
2959
2963
|
}) }) }),
|
|
2960
|
-
/* @__PURE__ */ (0,
|
|
2961
|
-
/* @__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)(
|
|
2962
2966
|
import_tamagui57.Circle,
|
|
2963
2967
|
{
|
|
2964
2968
|
size: 60,
|
|
@@ -2970,10 +2974,10 @@ function SwipeCards({
|
|
|
2970
2974
|
onPress: () => handleSwipe("left"),
|
|
2971
2975
|
alignItems: "center",
|
|
2972
2976
|
justifyContent: "center",
|
|
2973
|
-
children: /* @__PURE__ */ (0,
|
|
2977
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$6", color: "$red10", fontWeight: "700", children: "\u2715" })
|
|
2974
2978
|
}
|
|
2975
2979
|
),
|
|
2976
|
-
/* @__PURE__ */ (0,
|
|
2980
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
2977
2981
|
import_tamagui57.Circle,
|
|
2978
2982
|
{
|
|
2979
2983
|
size: 60,
|
|
@@ -2985,7 +2989,7 @@ function SwipeCards({
|
|
|
2985
2989
|
onPress: () => handleSwipe("right"),
|
|
2986
2990
|
alignItems: "center",
|
|
2987
2991
|
justifyContent: "center",
|
|
2988
|
-
children: /* @__PURE__ */ (0,
|
|
2992
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$6", color: "$green10", fontWeight: "700", children: "\u2665" })
|
|
2989
2993
|
}
|
|
2990
2994
|
)
|
|
2991
2995
|
] })
|
|
@@ -2994,7 +2998,7 @@ function SwipeCards({
|
|
|
2994
2998
|
|
|
2995
2999
|
// src/patterns/GlassCard.tsx
|
|
2996
3000
|
var import_tamagui58 = require("tamagui");
|
|
2997
|
-
var
|
|
3001
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
2998
3002
|
var BLUR = { light: 8, medium: 16, heavy: 24 };
|
|
2999
3003
|
var TINT_BG = {
|
|
3000
3004
|
light: "rgba(255,255,255,0.15)",
|
|
@@ -3014,13 +3018,13 @@ function GlassCard({
|
|
|
3014
3018
|
elevated = false
|
|
3015
3019
|
}) {
|
|
3016
3020
|
const blur = BLUR[intensity];
|
|
3017
|
-
return /* @__PURE__ */ (0,
|
|
3021
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
3018
3022
|
GlassFrame,
|
|
3019
3023
|
{
|
|
3020
3024
|
borderRadius,
|
|
3021
3025
|
padding,
|
|
3022
3026
|
backgroundColor: TINT_BG[tint],
|
|
3023
|
-
|
|
3027
|
+
elevation: elevated ? 4 : 0,
|
|
3024
3028
|
shadowColor: elevated ? "$shadowColor" : void 0,
|
|
3025
3029
|
shadowRadius: elevated ? 20 : void 0,
|
|
3026
3030
|
shadowOpacity: elevated ? 0.3 : void 0,
|
|
@@ -3033,13 +3037,13 @@ function GlassCard({
|
|
|
3033
3037
|
// src/patterns/DataTable.tsx
|
|
3034
3038
|
var import_react17 = require("react");
|
|
3035
3039
|
var import_tamagui59 = require("tamagui");
|
|
3036
|
-
var
|
|
3040
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
3037
3041
|
var TH = (0, import_tamagui59.styled)(import_tamagui59.View, { padding: "$3", justifyContent: "center" });
|
|
3038
3042
|
var TD = (0, import_tamagui59.styled)(import_tamagui59.View, { padding: "$3", justifyContent: "center" });
|
|
3039
3043
|
function StatusBadge({ status }) {
|
|
3040
3044
|
const isActive = status.toLowerCase() === "active";
|
|
3041
|
-
return /* @__PURE__ */ (0,
|
|
3042
|
-
/* @__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)(
|
|
3043
3047
|
import_tamagui59.View,
|
|
3044
3048
|
{
|
|
3045
3049
|
width: 8,
|
|
@@ -3048,13 +3052,13 @@ function StatusBadge({ status }) {
|
|
|
3048
3052
|
backgroundColor: isActive ? "$green9" : "$orange9"
|
|
3049
3053
|
}
|
|
3050
3054
|
),
|
|
3051
|
-
/* @__PURE__ */ (0,
|
|
3055
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.SizableText, { size: "$3", color: "$color11", children: status })
|
|
3052
3056
|
] });
|
|
3053
3057
|
}
|
|
3054
3058
|
function HeaderCell({ col, sort, onSort }) {
|
|
3055
3059
|
const active = sort?.key === col.key;
|
|
3056
3060
|
const indicator = active ? sort.dir === "asc" ? " \u25B2" : " \u25BC" : "";
|
|
3057
|
-
return /* @__PURE__ */ (0,
|
|
3061
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
3058
3062
|
TH,
|
|
3059
3063
|
{
|
|
3060
3064
|
width: col.width,
|
|
@@ -3063,7 +3067,7 @@ function HeaderCell({ col, sort, onSort }) {
|
|
|
3063
3067
|
cursor: col.sortable ? "pointer" : void 0,
|
|
3064
3068
|
onPress: col.sortable ? onSort : void 0,
|
|
3065
3069
|
pressStyle: col.sortable ? { opacity: 0.7 } : void 0,
|
|
3066
|
-
children: /* @__PURE__ */ (0,
|
|
3070
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
|
|
3067
3071
|
import_tamagui59.SizableText,
|
|
3068
3072
|
{
|
|
3069
3073
|
size: "$2",
|
|
@@ -3082,7 +3086,7 @@ function HeaderCell({ col, sort, onSort }) {
|
|
|
3082
3086
|
);
|
|
3083
3087
|
}
|
|
3084
3088
|
function TableRow({ row, columns, onPress, odd }) {
|
|
3085
|
-
return /* @__PURE__ */ (0,
|
|
3089
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
3086
3090
|
import_tamagui59.XStack,
|
|
3087
3091
|
{
|
|
3088
3092
|
backgroundColor: odd ? "$color2" : "transparent",
|
|
@@ -3093,12 +3097,12 @@ function TableRow({ row, columns, onPress, odd }) {
|
|
|
3093
3097
|
onPress: onPress ? () => onPress(row) : void 0,
|
|
3094
3098
|
pressStyle: onPress ? { opacity: 0.85 } : void 0,
|
|
3095
3099
|
animation: "quick",
|
|
3096
|
-
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))
|
|
3097
3101
|
}
|
|
3098
3102
|
);
|
|
3099
3103
|
}
|
|
3100
3104
|
function CardRow({ row, columns, onPress }) {
|
|
3101
|
-
return /* @__PURE__ */ (0,
|
|
3105
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
3102
3106
|
import_tamagui59.YStack,
|
|
3103
3107
|
{
|
|
3104
3108
|
backgroundColor: "$color1",
|
|
@@ -3110,11 +3114,11 @@ function CardRow({ row, columns, onPress }) {
|
|
|
3110
3114
|
onPress: onPress ? () => onPress(row) : void 0,
|
|
3111
3115
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
3112
3116
|
animation: "quick",
|
|
3113
|
-
children: columns.map((col, i) => /* @__PURE__ */ (0,
|
|
3114
|
-
i > 0 && /* @__PURE__ */ (0,
|
|
3115
|
-
/* @__PURE__ */ (0,
|
|
3116
|
-
/* @__PURE__ */ (0,
|
|
3117
|
-
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] ?? "") })
|
|
3118
3122
|
] })
|
|
3119
3123
|
] }, col.key))
|
|
3120
3124
|
}
|
|
@@ -3134,21 +3138,21 @@ function DataTable({ columns, data, onRowPress, emptyMessage = "No data" }) {
|
|
|
3134
3138
|
}, [data, sort]);
|
|
3135
3139
|
const toggleSort = (key) => setSort((s) => s?.key === key ? { key, dir: s.dir === "asc" ? "desc" : "asc" } : { key, dir: "asc" });
|
|
3136
3140
|
if (!data.length) {
|
|
3137
|
-
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 }) });
|
|
3138
3142
|
}
|
|
3139
3143
|
if (isSmall) {
|
|
3140
|
-
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)) });
|
|
3141
3145
|
}
|
|
3142
|
-
return /* @__PURE__ */ (0,
|
|
3143
|
-
/* @__PURE__ */ (0,
|
|
3144
|
-
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))
|
|
3145
3149
|
] });
|
|
3146
3150
|
}
|
|
3147
3151
|
|
|
3148
3152
|
// src/patterns/DatePicker.tsx
|
|
3149
3153
|
var import_react18 = require("react");
|
|
3150
3154
|
var import_tamagui60 = require("tamagui");
|
|
3151
|
-
var
|
|
3155
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
3152
3156
|
var MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
|
3153
3157
|
var DAY_LABELS_SUN = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
3154
3158
|
var DAY_LABELS_MON = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
|
|
@@ -3173,7 +3177,7 @@ function buildGrid(year, month, startDay) {
|
|
|
3173
3177
|
return cells;
|
|
3174
3178
|
}
|
|
3175
3179
|
function NavButton({ label, onPress }) {
|
|
3176
|
-
return /* @__PURE__ */ (0,
|
|
3180
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
3177
3181
|
import_tamagui60.XStack,
|
|
3178
3182
|
{
|
|
3179
3183
|
width: 36,
|
|
@@ -3186,7 +3190,7 @@ function NavButton({ label, onPress }) {
|
|
|
3186
3190
|
animation: "quick",
|
|
3187
3191
|
onPress,
|
|
3188
3192
|
cursor: "pointer",
|
|
3189
|
-
children: /* @__PURE__ */ (0,
|
|
3193
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_tamagui60.SizableText, { size: "$5", color: "$color11", fontWeight: "600", children: label })
|
|
3190
3194
|
}
|
|
3191
3195
|
);
|
|
3192
3196
|
}
|
|
@@ -3215,23 +3219,23 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3215
3219
|
if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
|
|
3216
3220
|
return false;
|
|
3217
3221
|
}, [minDate, maxDate]);
|
|
3218
|
-
return /* @__PURE__ */ (0,
|
|
3219
|
-
/* @__PURE__ */ (0,
|
|
3220
|
-
/* @__PURE__ */ (0,
|
|
3221
|
-
/* @__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: [
|
|
3222
3226
|
MONTH_NAMES[viewMonth],
|
|
3223
3227
|
" ",
|
|
3224
3228
|
viewYear
|
|
3225
3229
|
] }),
|
|
3226
|
-
/* @__PURE__ */ (0,
|
|
3230
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(NavButton, { label: "\u203A", onPress: () => navigate(1) })
|
|
3227
3231
|
] }),
|
|
3228
|
-
/* @__PURE__ */ (0,
|
|
3229
|
-
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) => {
|
|
3230
3234
|
const date = new Date(cell.year, cell.month, cell.day);
|
|
3231
3235
|
const selected = sameDay(value, date);
|
|
3232
3236
|
const isToday = sameDay(today, date);
|
|
3233
3237
|
const disabled = cell.outside || isDisabled(date);
|
|
3234
|
-
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)(
|
|
3235
3239
|
import_tamagui60.XStack,
|
|
3236
3240
|
{
|
|
3237
3241
|
width: 40,
|
|
@@ -3247,7 +3251,7 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3247
3251
|
opacity: disabled ? 0.35 : 1,
|
|
3248
3252
|
cursor: disabled ? "default" : "pointer",
|
|
3249
3253
|
onPress: disabled ? void 0 : () => onDateChange?.(date),
|
|
3250
|
-
children: /* @__PURE__ */ (0,
|
|
3254
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
3251
3255
|
import_tamagui60.SizableText,
|
|
3252
3256
|
{
|
|
3253
3257
|
size: "$3",
|
|
@@ -3264,7 +3268,7 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3264
3268
|
|
|
3265
3269
|
// src/patterns/EventCard.tsx
|
|
3266
3270
|
var import_tamagui61 = require("tamagui");
|
|
3267
|
-
var
|
|
3271
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
3268
3272
|
var THEME_MAP = {
|
|
3269
3273
|
purple: "purple",
|
|
3270
3274
|
green: "green",
|
|
@@ -3275,8 +3279,8 @@ var THEME_MAP = {
|
|
|
3275
3279
|
};
|
|
3276
3280
|
function ParticipantDots({ count, max }) {
|
|
3277
3281
|
const dots = Math.min(count, 5);
|
|
3278
|
-
return /* @__PURE__ */ (0,
|
|
3279
|
-
/* @__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)(
|
|
3280
3284
|
import_tamagui61.YStack,
|
|
3281
3285
|
{
|
|
3282
3286
|
width: 22,
|
|
@@ -3288,18 +3292,18 @@ function ParticipantDots({ count, max }) {
|
|
|
3288
3292
|
marginLeft: i > 0 ? -8 : 0,
|
|
3289
3293
|
alignItems: "center",
|
|
3290
3294
|
justifyContent: "center",
|
|
3291
|
-
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) })
|
|
3292
3296
|
},
|
|
3293
3297
|
i
|
|
3294
3298
|
)) }),
|
|
3295
|
-
/* @__PURE__ */ (0,
|
|
3299
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.SizableText, { size: "$2", color: "$color11", fontWeight: "500", children: [
|
|
3296
3300
|
count,
|
|
3297
3301
|
max ? `/${max}` : ""
|
|
3298
3302
|
] })
|
|
3299
3303
|
] });
|
|
3300
3304
|
}
|
|
3301
3305
|
function CardInner({ title, subtitle, time, location, label, participants, maxParticipants, onPress, actions }) {
|
|
3302
|
-
return /* @__PURE__ */ (0,
|
|
3306
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
|
|
3303
3307
|
import_tamagui61.YStack,
|
|
3304
3308
|
{
|
|
3305
3309
|
backgroundColor: "$color4",
|
|
@@ -3313,22 +3317,22 @@ function CardInner({ title, subtitle, time, location, label, participants, maxPa
|
|
|
3313
3317
|
pressStyle: onPress ? { scale: 0.97, opacity: 0.9 } : void 0,
|
|
3314
3318
|
cursor: onPress ? "pointer" : void 0,
|
|
3315
3319
|
children: [
|
|
3316
|
-
/* @__PURE__ */ (0,
|
|
3317
|
-
/* @__PURE__ */ (0,
|
|
3318
|
-
/* @__PURE__ */ (0,
|
|
3319
|
-
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 })
|
|
3320
3324
|
] }),
|
|
3321
|
-
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 }) })
|
|
3322
3326
|
] }),
|
|
3323
|
-
/* @__PURE__ */ (0,
|
|
3324
|
-
location && /* @__PURE__ */ (0,
|
|
3325
|
-
/* @__PURE__ */ (0,
|
|
3326
|
-
/* @__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 })
|
|
3327
3331
|
] }),
|
|
3328
|
-
participants !== void 0 && /* @__PURE__ */ (0,
|
|
3332
|
+
participants !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ParticipantDots, { count: participants, max: maxParticipants })
|
|
3329
3333
|
] }),
|
|
3330
|
-
(label || actions) && /* @__PURE__ */ (0,
|
|
3331
|
-
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, {}),
|
|
3332
3336
|
actions
|
|
3333
3337
|
] })
|
|
3334
3338
|
]
|
|
@@ -3336,27 +3340,27 @@ function CardInner({ title, subtitle, time, location, label, participants, maxPa
|
|
|
3336
3340
|
);
|
|
3337
3341
|
}
|
|
3338
3342
|
function EventCard({ theme = "purple", ...props }) {
|
|
3339
|
-
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 }) });
|
|
3340
3344
|
}
|
|
3341
3345
|
|
|
3342
3346
|
// src/patterns/UserPreferences.tsx
|
|
3343
3347
|
var import_tamagui62 = require("tamagui");
|
|
3344
|
-
var
|
|
3348
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
3345
3349
|
function ItemLabel({ title, description, color }) {
|
|
3346
|
-
return /* @__PURE__ */ (0,
|
|
3347
|
-
/* @__PURE__ */ (0,
|
|
3348
|
-
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 })
|
|
3349
3353
|
] });
|
|
3350
3354
|
}
|
|
3351
3355
|
function ToggleRow({ item }) {
|
|
3352
|
-
return /* @__PURE__ */ (0,
|
|
3353
|
-
/* @__PURE__ */ (0,
|
|
3354
|
-
/* @__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" }) })
|
|
3355
3359
|
] });
|
|
3356
3360
|
}
|
|
3357
3361
|
function SelectRow({ item }) {
|
|
3358
3362
|
const current = item.options.find((o) => o.value === item.value);
|
|
3359
|
-
return /* @__PURE__ */ (0,
|
|
3363
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
3360
3364
|
import_tamagui62.XStack,
|
|
3361
3365
|
{
|
|
3362
3366
|
alignItems: "center",
|
|
@@ -3372,9 +3376,9 @@ function SelectRow({ item }) {
|
|
|
3372
3376
|
if (next) item.onValueChange(next.value);
|
|
3373
3377
|
},
|
|
3374
3378
|
children: [
|
|
3375
|
-
/* @__PURE__ */ (0,
|
|
3376
|
-
/* @__PURE__ */ (0,
|
|
3377
|
-
/* @__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" })
|
|
3378
3382
|
]
|
|
3379
3383
|
}
|
|
3380
3384
|
);
|
|
@@ -3382,12 +3386,12 @@ function SelectRow({ item }) {
|
|
|
3382
3386
|
function SliderRow({ item }) {
|
|
3383
3387
|
const min = item.min ?? 0;
|
|
3384
3388
|
const max = item.max ?? 100;
|
|
3385
|
-
return /* @__PURE__ */ (0,
|
|
3386
|
-
/* @__PURE__ */ (0,
|
|
3387
|
-
/* @__PURE__ */ (0,
|
|
3388
|
-
/* @__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 })
|
|
3389
3393
|
] }),
|
|
3390
|
-
/* @__PURE__ */ (0,
|
|
3394
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
3391
3395
|
import_tamagui62.Slider,
|
|
3392
3396
|
{
|
|
3393
3397
|
value: [item.value],
|
|
@@ -3398,15 +3402,15 @@ function SliderRow({ item }) {
|
|
|
3398
3402
|
if (v !== void 0) item.onValueChange(v);
|
|
3399
3403
|
},
|
|
3400
3404
|
children: [
|
|
3401
|
-
/* @__PURE__ */ (0,
|
|
3402
|
-
/* @__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 })
|
|
3403
3407
|
]
|
|
3404
3408
|
}
|
|
3405
3409
|
)
|
|
3406
3410
|
] });
|
|
3407
3411
|
}
|
|
3408
3412
|
function ActionRow({ item }) {
|
|
3409
|
-
return /* @__PURE__ */ (0,
|
|
3413
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
3410
3414
|
import_tamagui62.XStack,
|
|
3411
3415
|
{
|
|
3412
3416
|
alignItems: "center",
|
|
@@ -3418,7 +3422,7 @@ function ActionRow({ item }) {
|
|
|
3418
3422
|
cursor: "pointer",
|
|
3419
3423
|
onPress: item.onPress,
|
|
3420
3424
|
children: [
|
|
3421
|
-
/* @__PURE__ */ (0,
|
|
3425
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
3422
3426
|
ItemLabel,
|
|
3423
3427
|
{
|
|
3424
3428
|
title: item.title,
|
|
@@ -3426,7 +3430,7 @@ function ActionRow({ item }) {
|
|
|
3426
3430
|
color: item.destructive ? "$red10" : void 0
|
|
3427
3431
|
}
|
|
3428
3432
|
),
|
|
3429
|
-
/* @__PURE__ */ (0,
|
|
3433
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$4", color: "$color8", children: "\u203A" })
|
|
3430
3434
|
]
|
|
3431
3435
|
}
|
|
3432
3436
|
);
|
|
@@ -3434,22 +3438,22 @@ function ActionRow({ item }) {
|
|
|
3434
3438
|
function PreferenceRow({ item }) {
|
|
3435
3439
|
switch (item.type) {
|
|
3436
3440
|
case "toggle":
|
|
3437
|
-
return /* @__PURE__ */ (0,
|
|
3441
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ToggleRow, { item });
|
|
3438
3442
|
case "select":
|
|
3439
|
-
return /* @__PURE__ */ (0,
|
|
3443
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectRow, { item });
|
|
3440
3444
|
case "slider":
|
|
3441
|
-
return /* @__PURE__ */ (0,
|
|
3445
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SliderRow, { item });
|
|
3442
3446
|
case "action":
|
|
3443
|
-
return /* @__PURE__ */ (0,
|
|
3447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ActionRow, { item });
|
|
3444
3448
|
}
|
|
3445
3449
|
}
|
|
3446
3450
|
function UserPreferences({ sections }) {
|
|
3447
|
-
return /* @__PURE__ */ (0,
|
|
3448
|
-
/* @__PURE__ */ (0,
|
|
3449
|
-
/* @__PURE__ */ (0,
|
|
3450
|
-
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 })
|
|
3451
3455
|
] }),
|
|
3452
|
-
/* @__PURE__ */ (0,
|
|
3456
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
3453
3457
|
import_tamagui62.YStack,
|
|
3454
3458
|
{
|
|
3455
3459
|
backgroundColor: "$color2",
|
|
@@ -3457,9 +3461,9 @@ function UserPreferences({ sections }) {
|
|
|
3457
3461
|
overflow: "hidden",
|
|
3458
3462
|
borderWidth: 1,
|
|
3459
3463
|
borderColor: "$color4",
|
|
3460
|
-
children: section.items.map((item, ii) => /* @__PURE__ */ (0,
|
|
3461
|
-
/* @__PURE__ */ (0,
|
|
3462
|
-
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" })
|
|
3463
3467
|
] }, item.id))
|
|
3464
3468
|
}
|
|
3465
3469
|
)
|
|
@@ -3468,7 +3472,7 @@ function UserPreferences({ sections }) {
|
|
|
3468
3472
|
|
|
3469
3473
|
// src/patterns/BlinkSelect.tsx
|
|
3470
3474
|
var import_tamagui63 = require("tamagui");
|
|
3471
|
-
var
|
|
3475
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
3472
3476
|
function BlinkSelect({
|
|
3473
3477
|
items,
|
|
3474
3478
|
value,
|
|
@@ -3479,9 +3483,9 @@ function BlinkSelect({
|
|
|
3479
3483
|
disabled,
|
|
3480
3484
|
width = "100%"
|
|
3481
3485
|
}) {
|
|
3482
|
-
return /* @__PURE__ */ (0,
|
|
3483
|
-
label ? /* @__PURE__ */ (0,
|
|
3484
|
-
/* @__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)(
|
|
3485
3489
|
import_tamagui63.Select,
|
|
3486
3490
|
{
|
|
3487
3491
|
value,
|
|
@@ -3489,18 +3493,18 @@ function BlinkSelect({
|
|
|
3489
3493
|
disablePreventBodyScroll: true,
|
|
3490
3494
|
...disabled ? { disabled: true } : {},
|
|
3491
3495
|
children: [
|
|
3492
|
-
/* @__PURE__ */ (0,
|
|
3493
|
-
/* @__PURE__ */ (0,
|
|
3494
|
-
/* @__PURE__ */ (0,
|
|
3495
|
-
/* @__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, {})
|
|
3496
3500
|
] }) }),
|
|
3497
|
-
/* @__PURE__ */ (0,
|
|
3498
|
-
/* @__PURE__ */ (0,
|
|
3499
|
-
/* @__PURE__ */ (0,
|
|
3500
|
-
/* @__PURE__ */ (0,
|
|
3501
|
-
/* @__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" }) })
|
|
3502
3506
|
] }, item.value)) }) }),
|
|
3503
|
-
/* @__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" }) })
|
|
3504
3508
|
] })
|
|
3505
3509
|
]
|
|
3506
3510
|
}
|
|
@@ -3510,7 +3514,7 @@ function BlinkSelect({
|
|
|
3510
3514
|
|
|
3511
3515
|
// src/patterns/BlinkDialog.tsx
|
|
3512
3516
|
var import_tamagui64 = require("tamagui");
|
|
3513
|
-
var
|
|
3517
|
+
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
3514
3518
|
function BlinkDialog({
|
|
3515
3519
|
open,
|
|
3516
3520
|
onOpenChange,
|
|
@@ -3524,14 +3528,14 @@ function BlinkDialog({
|
|
|
3524
3528
|
onCancel,
|
|
3525
3529
|
confirmTheme = "active"
|
|
3526
3530
|
}) {
|
|
3527
|
-
return /* @__PURE__ */ (0,
|
|
3528
|
-
trigger && /* @__PURE__ */ (0,
|
|
3529
|
-
/* @__PURE__ */ (0,
|
|
3530
|
-
/* @__PURE__ */ (0,
|
|
3531
|
-
/* @__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, {})
|
|
3532
3536
|
] }) }),
|
|
3533
|
-
/* @__PURE__ */ (0,
|
|
3534
|
-
/* @__PURE__ */ (0,
|
|
3537
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_tamagui64.Dialog.Portal, { children: [
|
|
3538
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
3535
3539
|
import_tamagui64.Dialog.Overlay,
|
|
3536
3540
|
{
|
|
3537
3541
|
animation: "quick",
|
|
@@ -3541,7 +3545,7 @@ function BlinkDialog({
|
|
|
3541
3545
|
},
|
|
3542
3546
|
"overlay"
|
|
3543
3547
|
),
|
|
3544
|
-
/* @__PURE__ */ (0,
|
|
3548
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
|
|
3545
3549
|
import_tamagui64.Dialog.Content,
|
|
3546
3550
|
{
|
|
3547
3551
|
bordered: true,
|
|
@@ -3552,12 +3556,12 @@ function BlinkDialog({
|
|
|
3552
3556
|
exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
|
|
3553
3557
|
gap: "$4",
|
|
3554
3558
|
children: [
|
|
3555
|
-
title && /* @__PURE__ */ (0,
|
|
3556
|
-
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 }),
|
|
3557
3561
|
children,
|
|
3558
|
-
(onConfirm || onCancel) && /* @__PURE__ */ (0,
|
|
3559
|
-
onCancel && /* @__PURE__ */ (0,
|
|
3560
|
-
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 }) })
|
|
3561
3565
|
] })
|
|
3562
3566
|
]
|
|
3563
3567
|
},
|
|
@@ -3569,7 +3573,7 @@ function BlinkDialog({
|
|
|
3569
3573
|
|
|
3570
3574
|
// src/patterns/BlinkPopover.tsx
|
|
3571
3575
|
var import_tamagui65 = require("tamagui");
|
|
3572
|
-
var
|
|
3576
|
+
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
3573
3577
|
function BlinkPopover({
|
|
3574
3578
|
trigger,
|
|
3575
3579
|
children,
|
|
@@ -3577,13 +3581,13 @@ function BlinkPopover({
|
|
|
3577
3581
|
allowFlip = true,
|
|
3578
3582
|
size = "$5"
|
|
3579
3583
|
}) {
|
|
3580
|
-
return /* @__PURE__ */ (0,
|
|
3581
|
-
/* @__PURE__ */ (0,
|
|
3582
|
-
/* @__PURE__ */ (0,
|
|
3583
|
-
/* @__PURE__ */ (0,
|
|
3584
|
-
/* @__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, {})
|
|
3585
3589
|
] }) }),
|
|
3586
|
-
/* @__PURE__ */ (0,
|
|
3590
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
3587
3591
|
import_tamagui65.Popover.Content,
|
|
3588
3592
|
{
|
|
3589
3593
|
borderWidth: 1,
|
|
@@ -3593,8 +3597,8 @@ function BlinkPopover({
|
|
|
3593
3597
|
elevate: true,
|
|
3594
3598
|
animation: ["quick", { opacity: { overshootClamping: true } }],
|
|
3595
3599
|
children: [
|
|
3596
|
-
/* @__PURE__ */ (0,
|
|
3597
|
-
/* @__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 })
|
|
3598
3602
|
]
|
|
3599
3603
|
}
|
|
3600
3604
|
)
|
|
@@ -3603,7 +3607,7 @@ function BlinkPopover({
|
|
|
3603
3607
|
|
|
3604
3608
|
// src/patterns/ImmersiveMediaScreen.tsx
|
|
3605
3609
|
var import_tamagui66 = require("tamagui");
|
|
3606
|
-
var
|
|
3610
|
+
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
3607
3611
|
function ImmersiveMediaScreen({
|
|
3608
3612
|
variant = "reel",
|
|
3609
3613
|
media,
|
|
@@ -3619,16 +3623,16 @@ function ImmersiveMediaScreen({
|
|
|
3619
3623
|
sheetContent
|
|
3620
3624
|
}) {
|
|
3621
3625
|
const showSheet = variant === "sheet";
|
|
3622
|
-
return /* @__PURE__ */ (0,
|
|
3623
|
-
/* @__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: [
|
|
3624
3628
|
media,
|
|
3625
|
-
/* @__PURE__ */ (0,
|
|
3626
|
-
/* @__PURE__ */ (0,
|
|
3627
|
-
/* @__PURE__ */ (0,
|
|
3628
|
-
/* @__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 })
|
|
3629
3633
|
] }),
|
|
3630
|
-
actions.length > 0 ? /* @__PURE__ */ (0,
|
|
3631
|
-
/* @__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)(
|
|
3632
3636
|
import_tamagui66.YStack,
|
|
3633
3637
|
{
|
|
3634
3638
|
width: 44,
|
|
@@ -3637,17 +3641,17 @@ function ImmersiveMediaScreen({
|
|
|
3637
3641
|
backgroundColor: "rgba(0,0,0,0.55)",
|
|
3638
3642
|
alignItems: "center",
|
|
3639
3643
|
justifyContent: "center",
|
|
3640
|
-
children: action.icon ?? /* @__PURE__ */ (0,
|
|
3644
|
+
children: action.icon ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$5", color: "white", children: "\u2022" })
|
|
3641
3645
|
}
|
|
3642
3646
|
),
|
|
3643
|
-
action.value ? /* @__PURE__ */ (0,
|
|
3644
|
-
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
|
|
3645
3649
|
] }, action.id)) }) : null,
|
|
3646
|
-
/* @__PURE__ */ (0,
|
|
3647
|
-
title ? /* @__PURE__ */ (0,
|
|
3648
|
-
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,
|
|
3649
3653
|
bottomMeta,
|
|
3650
|
-
variant === "story" && inputPlaceholder ? /* @__PURE__ */ (0,
|
|
3654
|
+
variant === "story" && inputPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
3651
3655
|
import_tamagui66.XStack,
|
|
3652
3656
|
{
|
|
3653
3657
|
onPress: onInputPress,
|
|
@@ -3658,22 +3662,22 @@ function ImmersiveMediaScreen({
|
|
|
3658
3662
|
backgroundColor: "rgba(255,255,255,0.14)",
|
|
3659
3663
|
borderWidth: 1,
|
|
3660
3664
|
borderColor: "rgba(255,255,255,0.25)",
|
|
3661
|
-
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 })
|
|
3662
3666
|
}
|
|
3663
3667
|
) : null
|
|
3664
3668
|
] })
|
|
3665
3669
|
] }),
|
|
3666
|
-
showSheet ? /* @__PURE__ */ (0,
|
|
3667
|
-
/* @__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" }),
|
|
3668
3672
|
sheetContent,
|
|
3669
|
-
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
|
|
3670
3674
|
] }) : null
|
|
3671
3675
|
] });
|
|
3672
3676
|
}
|
|
3673
3677
|
|
|
3674
3678
|
// src/patterns/FinanceDashboard.tsx
|
|
3675
3679
|
var import_tamagui67 = require("tamagui");
|
|
3676
|
-
var
|
|
3680
|
+
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
3677
3681
|
function FinanceDashboard({
|
|
3678
3682
|
title = "Overview",
|
|
3679
3683
|
balanceLabel = "Available balance",
|
|
@@ -3685,25 +3689,25 @@ function FinanceDashboard({
|
|
|
3685
3689
|
chartSlot,
|
|
3686
3690
|
topRight
|
|
3687
3691
|
}) {
|
|
3688
|
-
return /* @__PURE__ */ (0,
|
|
3689
|
-
/* @__PURE__ */ (0,
|
|
3690
|
-
/* @__PURE__ */ (0,
|
|
3691
|
-
/* @__PURE__ */ (0,
|
|
3692
|
-
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
|
|
3693
3697
|
] }),
|
|
3694
3698
|
topRight
|
|
3695
3699
|
] }),
|
|
3696
|
-
/* @__PURE__ */ (0,
|
|
3697
|
-
/* @__PURE__ */ (0,
|
|
3698
|
-
/* @__PURE__ */ (0,
|
|
3699
|
-
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
|
|
3700
3704
|
] }),
|
|
3701
|
-
metrics.length > 0 ? /* @__PURE__ */ (0,
|
|
3702
|
-
/* @__PURE__ */ (0,
|
|
3703
|
-
/* @__PURE__ */ (0,
|
|
3704
|
-
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
|
|
3705
3709
|
] }, metric.label)) }) : null,
|
|
3706
|
-
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)(
|
|
3707
3711
|
import_tamagui67.YStack,
|
|
3708
3712
|
{
|
|
3709
3713
|
flex: 1,
|
|
@@ -3718,15 +3722,15 @@ function FinanceDashboard({
|
|
|
3718
3722
|
borderColor: "$color4",
|
|
3719
3723
|
onPress: action.onPress,
|
|
3720
3724
|
children: [
|
|
3721
|
-
/* @__PURE__ */ (0,
|
|
3722
|
-
/* @__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 })
|
|
3723
3727
|
]
|
|
3724
3728
|
},
|
|
3725
3729
|
action.id
|
|
3726
3730
|
)) }) : null,
|
|
3727
|
-
/* @__PURE__ */ (0,
|
|
3728
|
-
/* @__PURE__ */ (0,
|
|
3729
|
-
/* @__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)(
|
|
3730
3734
|
import_tamagui67.XStack,
|
|
3731
3735
|
{
|
|
3732
3736
|
padding: "$3",
|
|
@@ -3735,12 +3739,12 @@ function FinanceDashboard({
|
|
|
3735
3739
|
borderTopWidth: index2 === 0 ? 0 : 1,
|
|
3736
3740
|
borderTopColor: "$color4",
|
|
3737
3741
|
children: [
|
|
3738
|
-
row.leading ? /* @__PURE__ */ (0,
|
|
3739
|
-
/* @__PURE__ */ (0,
|
|
3740
|
-
/* @__PURE__ */ (0,
|
|
3741
|
-
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
|
|
3742
3746
|
] }),
|
|
3743
|
-
row.value ? /* @__PURE__ */ (0,
|
|
3747
|
+
row.value ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$3", color: "$color11", children: row.value }) : null
|
|
3744
3748
|
]
|
|
3745
3749
|
},
|
|
3746
3750
|
row.id
|
|
@@ -3757,6 +3761,7 @@ function FinanceDashboard({
|
|
|
3757
3761
|
Anchor,
|
|
3758
3762
|
AnimatePresence,
|
|
3759
3763
|
AppHeader,
|
|
3764
|
+
AppleLogo,
|
|
3760
3765
|
Article,
|
|
3761
3766
|
Aside,
|
|
3762
3767
|
Avatar,
|
|
@@ -3803,7 +3808,9 @@ function FinanceDashboard({
|
|
|
3803
3808
|
Form,
|
|
3804
3809
|
FormField,
|
|
3805
3810
|
Frame,
|
|
3811
|
+
GitHubLogo,
|
|
3806
3812
|
GlassCard,
|
|
3813
|
+
GoogleLogo,
|
|
3807
3814
|
Grid,
|
|
3808
3815
|
Group,
|
|
3809
3816
|
H1,
|
|
@@ -3825,6 +3832,7 @@ function FinanceDashboard({
|
|
|
3825
3832
|
LoginScreen,
|
|
3826
3833
|
Main,
|
|
3827
3834
|
MediaCard,
|
|
3835
|
+
MicrosoftLogo,
|
|
3828
3836
|
Nav,
|
|
3829
3837
|
NotificationBanner,
|
|
3830
3838
|
OTPInput,
|