@blinkdotnew/mobile-ui 2.0.0-alpha.16 → 2.0.0-alpha.18
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 +192 -122
- package/dist/index.d.ts +192 -122
- package/dist/index.js +893 -706
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +886 -717
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -1
package/dist/index.mjs
CHANGED
|
@@ -7,6 +7,177 @@ var blinkConfig = createTamagui({
|
|
|
7
7
|
|
|
8
8
|
// src/index.ts
|
|
9
9
|
import { defaultConfig as defaultConfig2 } from "@tamagui/config/v5";
|
|
10
|
+
|
|
11
|
+
// src/config/design-themes.ts
|
|
12
|
+
var BLINK_DESIGN_THEMES = {
|
|
13
|
+
"mono": {
|
|
14
|
+
id: "mono",
|
|
15
|
+
name: "Mono",
|
|
16
|
+
description: "Black/white neutral",
|
|
17
|
+
palette: { primary: "#18181B", primary_foreground: "#FAFAFA", secondary: "#F4F4F5", secondary_foreground: "#27272A", accent: "#3F3F46", background: "#FFFFFF", dark_mode: "#09090B" }
|
|
18
|
+
},
|
|
19
|
+
"ocean-teal": {
|
|
20
|
+
id: "ocean-teal",
|
|
21
|
+
name: "Ocean Teal",
|
|
22
|
+
description: "SaaS, fintech, healthcare",
|
|
23
|
+
palette: { primary: "#0D9488", primary_foreground: "#FFFFFF", secondary: "#F0FDFA", secondary_foreground: "#134E4A", accent: "#2DD4BF", background: "#FFFFFF", dark_mode: "#042F2E" }
|
|
24
|
+
},
|
|
25
|
+
"warm-amber": {
|
|
26
|
+
id: "warm-amber",
|
|
27
|
+
name: "Warm Amber",
|
|
28
|
+
description: "E-commerce, food, hospitality",
|
|
29
|
+
palette: { primary: "#D97706", primary_foreground: "#FFFFFF", secondary: "#FFFBEB", secondary_foreground: "#78350F", accent: "#FBBF24", background: "#FFFEF7", dark_mode: "#451A03" }
|
|
30
|
+
},
|
|
31
|
+
"rose-coral": {
|
|
32
|
+
id: "rose-coral",
|
|
33
|
+
name: "Rose Coral",
|
|
34
|
+
description: "Lifestyle, beauty, fashion",
|
|
35
|
+
palette: { primary: "#E11D48", primary_foreground: "#FFFFFF", secondary: "#FFF1F2", secondary_foreground: "#881337", accent: "#FB7185", background: "#FFFAFA", dark_mode: "#4C0519" }
|
|
36
|
+
},
|
|
37
|
+
"lavender": {
|
|
38
|
+
id: "lavender",
|
|
39
|
+
name: "Lavender",
|
|
40
|
+
description: "Creative, wellness, meditation",
|
|
41
|
+
palette: { primary: "#7C3AED", primary_foreground: "#FFFFFF", secondary: "#F5F3FF", secondary_foreground: "#4C1D95", accent: "#A78BFA", background: "#FEFEFF", dark_mode: "#2E1065" }
|
|
42
|
+
},
|
|
43
|
+
"glacier": {
|
|
44
|
+
id: "glacier",
|
|
45
|
+
name: "Glacier",
|
|
46
|
+
description: "Professional, corporate, analytics",
|
|
47
|
+
palette: { primary: "#0EA5E9", primary_foreground: "#FFFFFF", secondary: "#F0F9FF", secondary_foreground: "#0C4A6E", accent: "#38BDF8", background: "#FFFFFF", dark_mode: "#082F49" }
|
|
48
|
+
},
|
|
49
|
+
"forest": {
|
|
50
|
+
id: "forest",
|
|
51
|
+
name: "Forest",
|
|
52
|
+
description: "Sustainability, nature, outdoor",
|
|
53
|
+
palette: { primary: "#16A34A", primary_foreground: "#FFFFFF", secondary: "#F0FDF4", secondary_foreground: "#14532D", accent: "#4ADE80", background: "#FEFFFE", dark_mode: "#052E16" }
|
|
54
|
+
},
|
|
55
|
+
"obsidian": {
|
|
56
|
+
id: "obsidian",
|
|
57
|
+
name: "Obsidian",
|
|
58
|
+
description: "Developer tools, gaming, tech",
|
|
59
|
+
palette: { primary: "#475569", primary_foreground: "#FFFFFF", secondary: "#F1F5F9", secondary_foreground: "#1E293B", accent: "#64748B", background: "#FFFFFF", dark_mode: "#0F172A" }
|
|
60
|
+
},
|
|
61
|
+
"solar": {
|
|
62
|
+
id: "solar",
|
|
63
|
+
name: "Solar",
|
|
64
|
+
description: "Energy, optimistic, kid-friendly",
|
|
65
|
+
palette: { primary: "#CA8A04", primary_foreground: "#FFFFFF", secondary: "#FEFCE8", secondary_foreground: "#713F12", accent: "#FACC15", background: "#FFFEF5", dark_mode: "#422006" }
|
|
66
|
+
},
|
|
67
|
+
"orchid": {
|
|
68
|
+
id: "orchid",
|
|
69
|
+
name: "Orchid",
|
|
70
|
+
description: "Beauty, fashion, luxury",
|
|
71
|
+
palette: { primary: "#C026D3", primary_foreground: "#FFFFFF", secondary: "#FDF4FF", secondary_foreground: "#701A75", accent: "#E879F9", background: "#FFFEFF", dark_mode: "#4A044E" }
|
|
72
|
+
},
|
|
73
|
+
"indigo": {
|
|
74
|
+
id: "indigo",
|
|
75
|
+
name: "Indigo",
|
|
76
|
+
description: "Enterprise, fintech, trust",
|
|
77
|
+
palette: { primary: "#4F46E5", primary_foreground: "#FFFFFF", secondary: "#EEF2FF", secondary_foreground: "#312E81", accent: "#818CF8", background: "#FEFEFF", dark_mode: "#1E1B4B" }
|
|
78
|
+
},
|
|
79
|
+
"cosmic-night": {
|
|
80
|
+
id: "cosmic-night",
|
|
81
|
+
name: "Cosmic Night",
|
|
82
|
+
description: "Dark mode, futuristic, gaming",
|
|
83
|
+
palette: { primary: "#6366F1", primary_foreground: "#FFFFFF", secondary: "#1E1B4B", secondary_foreground: "#E0E7FF", accent: "#A855F7", background: "#0F0D1A", dark_mode: "#030014" }
|
|
84
|
+
},
|
|
85
|
+
"soft-pop": {
|
|
86
|
+
id: "soft-pop",
|
|
87
|
+
name: "Soft Pop",
|
|
88
|
+
description: "Playful, modern, creative",
|
|
89
|
+
palette: { primary: "#14B8A6", primary_foreground: "#FFFFFF", secondary: "#FDF2F8", secondary_foreground: "#134E4A", accent: "#F472B6", background: "#FFFBFE", dark_mode: "#0D1117" }
|
|
90
|
+
},
|
|
91
|
+
"neo-brutalism": {
|
|
92
|
+
id: "neo-brutalism",
|
|
93
|
+
name: "Neo Brutalism",
|
|
94
|
+
description: "Bold, striking, artistic",
|
|
95
|
+
palette: { primary: "#FF6B35", primary_foreground: "#000000", secondary: "#FFE66D", secondary_foreground: "#1A1A1A", accent: "#FF3366", background: "#FFFEF0", dark_mode: "#1A1A1A" }
|
|
96
|
+
},
|
|
97
|
+
"vintage-paper": {
|
|
98
|
+
id: "vintage-paper",
|
|
99
|
+
name: "Vintage Paper",
|
|
100
|
+
description: "Classic, warm, nostalgic",
|
|
101
|
+
palette: { primary: "#B45309", primary_foreground: "#FFFFFF", secondary: "#FEF3C7", secondary_foreground: "#78350F", accent: "#92400E", background: "#FFFDF7", dark_mode: "#292524" }
|
|
102
|
+
},
|
|
103
|
+
"modern-minimal": {
|
|
104
|
+
id: "modern-minimal",
|
|
105
|
+
name: "Modern Minimal",
|
|
106
|
+
description: "Clean, professional, corporate",
|
|
107
|
+
palette: { primary: "#2563EB", primary_foreground: "#FFFFFF", secondary: "#F8FAFC", secondary_foreground: "#1E40AF", accent: "#3B82F6", background: "#FFFFFF", dark_mode: "#0F172A" }
|
|
108
|
+
},
|
|
109
|
+
"bubblegum": {
|
|
110
|
+
id: "bubblegum",
|
|
111
|
+
name: "Bubblegum",
|
|
112
|
+
description: "Fun, feminine, youthful",
|
|
113
|
+
palette: { primary: "#EC4899", primary_foreground: "#FFFFFF", secondary: "#FDF4FF", secondary_foreground: "#9D174D", accent: "#F472B6", background: "#FFFBFF", dark_mode: "#500724" }
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
function hexToRgb(hex) {
|
|
117
|
+
const h = hex.replace("#", "");
|
|
118
|
+
return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
|
|
119
|
+
}
|
|
120
|
+
function rgbToHex(r, g, b) {
|
|
121
|
+
return "#" + [r, g, b].map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0")).join("");
|
|
122
|
+
}
|
|
123
|
+
function mixColors(c1, c2, t) {
|
|
124
|
+
const [r1, g1, b1] = hexToRgb(c1);
|
|
125
|
+
const [r2, g2, b2] = hexToRgb(c2);
|
|
126
|
+
return rgbToHex(r1 + (r2 - r1) * t, g1 + (g2 - g1) * t, b1 + (b2 - b1) * t);
|
|
127
|
+
}
|
|
128
|
+
function generateLightPalette(p) {
|
|
129
|
+
return [
|
|
130
|
+
p.background,
|
|
131
|
+
p.secondary,
|
|
132
|
+
mixColors(p.secondary, p.accent, 0.15),
|
|
133
|
+
mixColors(p.secondary, p.accent, 0.3),
|
|
134
|
+
mixColors(p.accent, p.primary, 0.1),
|
|
135
|
+
mixColors(p.accent, p.primary, 0.3),
|
|
136
|
+
mixColors(p.accent, p.primary, 0.5),
|
|
137
|
+
mixColors(p.accent, p.primary, 0.7),
|
|
138
|
+
p.primary,
|
|
139
|
+
mixColors(p.primary, p.secondary_foreground, 0.3),
|
|
140
|
+
p.secondary_foreground,
|
|
141
|
+
p.dark_mode
|
|
142
|
+
];
|
|
143
|
+
}
|
|
144
|
+
function generateDarkPalette(p) {
|
|
145
|
+
return [
|
|
146
|
+
p.dark_mode,
|
|
147
|
+
mixColors(p.dark_mode, p.secondary_foreground, 0.15),
|
|
148
|
+
mixColors(p.dark_mode, p.secondary_foreground, 0.25),
|
|
149
|
+
mixColors(p.dark_mode, p.secondary_foreground, 0.35),
|
|
150
|
+
mixColors(p.secondary_foreground, p.accent, 0.2),
|
|
151
|
+
mixColors(p.secondary_foreground, p.accent, 0.4),
|
|
152
|
+
mixColors(p.secondary_foreground, p.accent, 0.6),
|
|
153
|
+
mixColors(p.accent, p.primary, 0.5),
|
|
154
|
+
p.primary,
|
|
155
|
+
p.accent,
|
|
156
|
+
mixColors(p.accent, p.primary_foreground, 0.5),
|
|
157
|
+
p.primary_foreground
|
|
158
|
+
];
|
|
159
|
+
}
|
|
160
|
+
function getBlinkThemePalettes(themeId) {
|
|
161
|
+
const theme = BLINK_DESIGN_THEMES[themeId];
|
|
162
|
+
if (!theme) throw new Error(`Unknown theme: ${themeId}`);
|
|
163
|
+
const p = theme.palette;
|
|
164
|
+
return {
|
|
165
|
+
base: {
|
|
166
|
+
light: generateLightPalette(p),
|
|
167
|
+
dark: generateDarkPalette(p)
|
|
168
|
+
},
|
|
169
|
+
accent: {
|
|
170
|
+
light: generateDarkPalette(p),
|
|
171
|
+
dark: generateLightPalette(p)
|
|
172
|
+
}
|
|
173
|
+
};
|
|
174
|
+
}
|
|
175
|
+
var BLINK_DESIGN_THEME_IDS = Object.keys(BLINK_DESIGN_THEMES);
|
|
176
|
+
function getBlinkDesignTheme(themeId) {
|
|
177
|
+
return BLINK_DESIGN_THEMES[themeId];
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
// src/index.ts
|
|
10
181
|
import {
|
|
11
182
|
View as View7,
|
|
12
183
|
Stack,
|
|
@@ -16,8 +187,8 @@ import {
|
|
|
16
187
|
XStack as XStack44,
|
|
17
188
|
YStack as YStack49,
|
|
18
189
|
ZStack,
|
|
19
|
-
ScrollView as
|
|
20
|
-
Circle as
|
|
190
|
+
ScrollView as ScrollView6,
|
|
191
|
+
Circle as Circle12,
|
|
21
192
|
Square,
|
|
22
193
|
Spacer,
|
|
23
194
|
EnsureFlexed,
|
|
@@ -902,17 +1073,43 @@ function BlinkTooltip({ content, children, side = "top" }) {
|
|
|
902
1073
|
] });
|
|
903
1074
|
}
|
|
904
1075
|
|
|
1076
|
+
// src/interface/BrandIcons.tsx
|
|
1077
|
+
import Svg, { Path, Rect } from "react-native-svg";
|
|
1078
|
+
import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1079
|
+
function GoogleLogo({ size = 20 }) {
|
|
1080
|
+
return /* @__PURE__ */ jsxs8(Svg, { width: size, height: size, viewBox: "0 0 24 24", children: [
|
|
1081
|
+
/* @__PURE__ */ jsx13(Path, { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }),
|
|
1082
|
+
/* @__PURE__ */ jsx13(Path, { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }),
|
|
1083
|
+
/* @__PURE__ */ jsx13(Path, { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" }),
|
|
1084
|
+
/* @__PURE__ */ jsx13(Path, { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })
|
|
1085
|
+
] });
|
|
1086
|
+
}
|
|
1087
|
+
function AppleLogo({ size = 20, color = "#000" }) {
|
|
1088
|
+
return /* @__PURE__ */ jsx13(Svg, { width: size, height: size, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13(Path, { fill: color, d: "M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) });
|
|
1089
|
+
}
|
|
1090
|
+
function GitHubLogo({ size = 20, color = "#fff" }) {
|
|
1091
|
+
return /* @__PURE__ */ jsx13(Svg, { width: size, height: size, viewBox: "0 0 98 96", children: /* @__PURE__ */ jsx13(Path, { fillRule: "evenodd", clipRule: "evenodd", fill: color, d: "M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" }) });
|
|
1092
|
+
}
|
|
1093
|
+
function MicrosoftLogo({ size = 20 }) {
|
|
1094
|
+
return /* @__PURE__ */ jsxs8(Svg, { width: size, height: size, viewBox: "0 0 21 21", children: [
|
|
1095
|
+
/* @__PURE__ */ jsx13(Rect, { width: "10", height: "10", fill: "#F25022" }),
|
|
1096
|
+
/* @__PURE__ */ jsx13(Rect, { x: "11", width: "10", height: "10", fill: "#7FBA00" }),
|
|
1097
|
+
/* @__PURE__ */ jsx13(Rect, { y: "11", width: "10", height: "10", fill: "#00A4EF" }),
|
|
1098
|
+
/* @__PURE__ */ jsx13(Rect, { x: "11", y: "11", width: "10", height: "10", fill: "#FFB900" })
|
|
1099
|
+
] });
|
|
1100
|
+
}
|
|
1101
|
+
|
|
905
1102
|
// src/layouts/StepPageLayout.tsx
|
|
906
1103
|
import { SizableText as SizableText13, YStack as YStack7 } from "tamagui";
|
|
907
|
-
import { jsx as
|
|
1104
|
+
import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
908
1105
|
function StepPageLayout({ title, description, children, bottom }) {
|
|
909
|
-
return /* @__PURE__ */
|
|
910
|
-
/* @__PURE__ */
|
|
911
|
-
/* @__PURE__ */
|
|
912
|
-
description && /* @__PURE__ */
|
|
1106
|
+
return /* @__PURE__ */ jsxs9(YStack7, { flex: 1, padding: "$4", maxWidth: 500, marginHorizontal: "auto", width: "100%", children: [
|
|
1107
|
+
/* @__PURE__ */ jsx14(YStack7, { gap: "$5", children: /* @__PURE__ */ jsxs9(YStack7, { gap: "$2", children: [
|
|
1108
|
+
/* @__PURE__ */ jsx14(SizableText13, { size: "$8", fontWeight: "700", children: title }),
|
|
1109
|
+
description && /* @__PURE__ */ jsx14(SizableText13, { size: "$5", fontWeight: "400", color: "$color10", children: description })
|
|
913
1110
|
] }) }),
|
|
914
|
-
/* @__PURE__ */
|
|
915
|
-
bottom && /* @__PURE__ */
|
|
1111
|
+
/* @__PURE__ */ jsx14(YStack7, { paddingTop: "$5", gap: "$4", children }),
|
|
1112
|
+
bottom && /* @__PURE__ */ jsx14(YStack7, { paddingTop: "$4", children: bottom })
|
|
916
1113
|
] });
|
|
917
1114
|
}
|
|
918
1115
|
|
|
@@ -937,12 +1134,12 @@ var ScreenLayout = styled10(YStack8, {
|
|
|
937
1134
|
|
|
938
1135
|
// src/layouts/Section.tsx
|
|
939
1136
|
import { SizableText as SizableText14, YStack as YStack9 } from "tamagui";
|
|
940
|
-
import { jsx as
|
|
1137
|
+
import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
941
1138
|
function Section({ title, description, children, gap = "$3" }) {
|
|
942
|
-
return /* @__PURE__ */
|
|
943
|
-
title && /* @__PURE__ */
|
|
944
|
-
/* @__PURE__ */
|
|
945
|
-
description && /* @__PURE__ */
|
|
1139
|
+
return /* @__PURE__ */ jsxs10(YStack9, { gap, children: [
|
|
1140
|
+
title && /* @__PURE__ */ jsxs10(YStack9, { gap: "$1", children: [
|
|
1141
|
+
/* @__PURE__ */ jsx15(SizableText14, { size: "$5", fontWeight: "600", color: "$color12", children: title }),
|
|
1142
|
+
description && /* @__PURE__ */ jsx15(SizableText14, { size: "$3", color: "$color9", children: description })
|
|
946
1143
|
] }),
|
|
947
1144
|
children
|
|
948
1145
|
] });
|
|
@@ -950,7 +1147,7 @@ function Section({ title, description, children, gap = "$3" }) {
|
|
|
950
1147
|
|
|
951
1148
|
// src/layouts/ListItem.tsx
|
|
952
1149
|
import { styled as styled11, SizableText as SizableText15, XStack as XStack7, YStack as YStack10, View as View5 } from "tamagui";
|
|
953
|
-
import { jsx as
|
|
1150
|
+
import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
954
1151
|
var ListItemFrame = styled11(XStack7, {
|
|
955
1152
|
name: "BlinkListItem",
|
|
956
1153
|
alignItems: "center",
|
|
@@ -968,11 +1165,11 @@ var ListItemFrame = styled11(XStack7, {
|
|
|
968
1165
|
}
|
|
969
1166
|
});
|
|
970
1167
|
function ListItem({ icon, title, subtitle, right, onPress }) {
|
|
971
|
-
return /* @__PURE__ */
|
|
972
|
-
icon && /* @__PURE__ */
|
|
973
|
-
/* @__PURE__ */
|
|
974
|
-
/* @__PURE__ */
|
|
975
|
-
subtitle && /* @__PURE__ */
|
|
1168
|
+
return /* @__PURE__ */ jsxs11(ListItemFrame, { pressable: !!onPress, onPress, children: [
|
|
1169
|
+
icon && /* @__PURE__ */ jsx16(View5, { children: icon }),
|
|
1170
|
+
/* @__PURE__ */ jsxs11(YStack10, { flex: 1, gap: "$1", children: [
|
|
1171
|
+
/* @__PURE__ */ jsx16(SizableText15, { size: "$4", fontWeight: "500", color: "$color12", children: title }),
|
|
1172
|
+
subtitle && /* @__PURE__ */ jsx16(SizableText15, { size: "$2", color: "$color9", children: subtitle })
|
|
976
1173
|
] }),
|
|
977
1174
|
right
|
|
978
1175
|
] });
|
|
@@ -980,28 +1177,28 @@ function ListItem({ icon, title, subtitle, right, onPress }) {
|
|
|
980
1177
|
|
|
981
1178
|
// src/layouts/Divider.tsx
|
|
982
1179
|
import { Separator as Separator3, SizableText as SizableText16, XStack as XStack8 } from "tamagui";
|
|
983
|
-
import { jsx as
|
|
1180
|
+
import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
984
1181
|
function Divider({ label }) {
|
|
985
|
-
if (!label) return /* @__PURE__ */
|
|
986
|
-
return /* @__PURE__ */
|
|
987
|
-
/* @__PURE__ */
|
|
988
|
-
/* @__PURE__ */
|
|
989
|
-
/* @__PURE__ */
|
|
1182
|
+
if (!label) return /* @__PURE__ */ jsx17(Separator3, { borderColor: "$color4" });
|
|
1183
|
+
return /* @__PURE__ */ jsxs12(XStack8, { alignItems: "center", gap: "$3", children: [
|
|
1184
|
+
/* @__PURE__ */ jsx17(Separator3, { flex: 1, borderColor: "$color4" }),
|
|
1185
|
+
/* @__PURE__ */ jsx17(SizableText16, { size: "$2", color: "$color9", children: label }),
|
|
1186
|
+
/* @__PURE__ */ jsx17(Separator3, { flex: 1, borderColor: "$color4" })
|
|
990
1187
|
] });
|
|
991
1188
|
}
|
|
992
1189
|
|
|
993
1190
|
// src/layouts/KeyboardStickyFooter.tsx
|
|
994
1191
|
import { YStack as YStack11 } from "tamagui";
|
|
995
|
-
import { jsx as
|
|
1192
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
996
1193
|
function KeyboardStickyFooter({ children, offset }) {
|
|
997
|
-
return /* @__PURE__ */
|
|
1194
|
+
return /* @__PURE__ */ jsx18(YStack11, { maxWidth: 500, alignSelf: "center", paddingTop: "$8", paddingBottom: "$4", style: { paddingBottom: offset }, children });
|
|
998
1195
|
}
|
|
999
1196
|
|
|
1000
1197
|
// src/layouts/SafeArea.tsx
|
|
1001
1198
|
import { YStack as YStack12 } from "tamagui";
|
|
1002
|
-
import { jsx as
|
|
1199
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
1003
1200
|
function SafeArea({ children, edges = ["top", "bottom"] }) {
|
|
1004
|
-
return /* @__PURE__ */
|
|
1201
|
+
return /* @__PURE__ */ jsx19(
|
|
1005
1202
|
YStack12,
|
|
1006
1203
|
{
|
|
1007
1204
|
flex: 1,
|
|
@@ -1018,26 +1215,26 @@ function SafeArea({ children, edges = ["top", "bottom"] }) {
|
|
|
1018
1215
|
// src/layouts/Grid.tsx
|
|
1019
1216
|
import { Children } from "react";
|
|
1020
1217
|
import { XStack as XStack9, YStack as YStack13 } from "tamagui";
|
|
1021
|
-
import { jsx as
|
|
1218
|
+
import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1022
1219
|
function Grid({ children, columns = 2, gap = "$3" }) {
|
|
1023
1220
|
const items = Children.toArray(children);
|
|
1024
1221
|
const rows = [];
|
|
1025
1222
|
for (let i = 0; i < items.length; i += columns) {
|
|
1026
1223
|
rows.push(items.slice(i, i + columns));
|
|
1027
1224
|
}
|
|
1028
|
-
return /* @__PURE__ */
|
|
1029
|
-
row.map((item, ci) => /* @__PURE__ */
|
|
1030
|
-
row.length < columns && Array.from({ length: columns - row.length }).map((_, i) => /* @__PURE__ */
|
|
1225
|
+
return /* @__PURE__ */ jsx20(YStack13, { gap, children: rows.map((row, ri) => /* @__PURE__ */ jsxs13(XStack9, { gap, children: [
|
|
1226
|
+
row.map((item, ci) => /* @__PURE__ */ jsx20(YStack13, { flex: 1, children: item }, ci)),
|
|
1227
|
+
row.length < columns && Array.from({ length: columns - row.length }).map((_, i) => /* @__PURE__ */ jsx20(YStack13, { flex: 1 }, `pad-${i}`))
|
|
1031
1228
|
] }, ri)) });
|
|
1032
1229
|
}
|
|
1033
1230
|
function Container({ children, maxWidth = 500, centered = true, padding = "$4" }) {
|
|
1034
|
-
return /* @__PURE__ */
|
|
1231
|
+
return /* @__PURE__ */ jsx20(YStack13, { width: "100%", maxWidth, alignSelf: centered ? "center" : void 0, padding, children });
|
|
1035
1232
|
}
|
|
1036
1233
|
|
|
1037
1234
|
// src/patterns/PaywallScreen.tsx
|
|
1038
1235
|
import { useState as useState5, useEffect as useEffect3 } from "react";
|
|
1039
1236
|
import { Button as Button3, Circle as Circle2, SizableText as SizableText17, XStack as XStack10, YStack as YStack14, ScrollView as ScrollView2 } from "tamagui";
|
|
1040
|
-
import { jsx as
|
|
1237
|
+
import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1041
1238
|
function useCountdown(minutes) {
|
|
1042
1239
|
const [seconds, setSeconds] = useState5((minutes ?? 0) * 60);
|
|
1043
1240
|
useEffect3(() => {
|
|
@@ -1050,90 +1247,96 @@ function useCountdown(minutes) {
|
|
|
1050
1247
|
const ss = String(seconds % 60).padStart(2, "0");
|
|
1051
1248
|
return { display: `${mm}:${ss}`, expired: seconds <= 0 };
|
|
1052
1249
|
}
|
|
1053
|
-
function normalizeFeature(
|
|
1054
|
-
return typeof
|
|
1055
|
-
}
|
|
1056
|
-
function ComparisonIcon({ enabled }) {
|
|
1057
|
-
return /* @__PURE__ */ jsx20(Circle2, { size: 22, backgroundColor: enabled ? "$green3" : "$color4", children: /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: enabled ? "$green10" : "$color8", fontWeight: "700", children: enabled ? "\u2713" : "\u2014" }) });
|
|
1058
|
-
}
|
|
1059
|
-
function TestimonialCard({ testimonial }) {
|
|
1060
|
-
return /* @__PURE__ */ jsxs13(YStack14, { flex: 1, minWidth: 220, backgroundColor: "$color2", borderRadius: "$6", padding: "$3", gap: "$2", children: [
|
|
1061
|
-
/* @__PURE__ */ jsxs13(SizableText17, { size: "$3", color: "$color11", children: [
|
|
1062
|
-
"\u201C",
|
|
1063
|
-
testimonial.quote,
|
|
1064
|
-
"\u201D"
|
|
1065
|
-
] }),
|
|
1066
|
-
/* @__PURE__ */ jsxs13(YStack14, { children: [
|
|
1067
|
-
/* @__PURE__ */ jsx20(SizableText17, { size: "$2", fontWeight: "700", children: testimonial.author }),
|
|
1068
|
-
testimonial.meta ? /* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: "$color10", children: testimonial.meta }) : null
|
|
1069
|
-
] })
|
|
1070
|
-
] });
|
|
1250
|
+
function normalizeFeature(f) {
|
|
1251
|
+
return typeof f === "string" ? { title: f } : f;
|
|
1071
1252
|
}
|
|
1072
|
-
function
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
borderRadius: "$10",
|
|
1080
|
-
overflow: "hidden",
|
|
1081
|
-
alignItems: "center",
|
|
1082
|
-
justifyContent: "center",
|
|
1083
|
-
backgroundColor: "$color3",
|
|
1084
|
-
children: creator.avatar
|
|
1085
|
-
}
|
|
1086
|
-
) : null,
|
|
1087
|
-
/* @__PURE__ */ jsxs13(YStack14, { alignItems: "center", gap: "$1", children: [
|
|
1088
|
-
/* @__PURE__ */ jsx20(SizableText17, { size: "$6", fontWeight: "800", children: creator.name }),
|
|
1089
|
-
creator.meta ? /* @__PURE__ */ jsx20(SizableText17, { size: "$3", color: "$color10", children: creator.meta }) : null
|
|
1253
|
+
function BenefitRow({ feature, tone, muted }) {
|
|
1254
|
+
const f = normalizeFeature(feature);
|
|
1255
|
+
return /* @__PURE__ */ jsxs14(XStack10, { gap: "$3", alignItems: "center", children: [
|
|
1256
|
+
/* @__PURE__ */ jsx21(Circle2, { size: 40, backgroundColor: "$color3", children: f.icon ?? /* @__PURE__ */ jsx21(SizableText17, { size: "$5", color: "$color9", children: "\u2726" }) }),
|
|
1257
|
+
/* @__PURE__ */ jsxs14(YStack14, { flex: 1, gap: "$0.5", children: [
|
|
1258
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$4", fontWeight: "700", color: tone, children: f.title }),
|
|
1259
|
+
f.description ? /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: muted, children: f.description }) : null
|
|
1090
1260
|
] })
|
|
1091
1261
|
] });
|
|
1092
1262
|
}
|
|
1093
|
-
function
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
onPress,
|
|
1097
|
-
stacked,
|
|
1098
|
-
dark
|
|
1099
|
-
}) {
|
|
1100
|
-
return /* @__PURE__ */ jsxs13(
|
|
1101
|
-
YStack14,
|
|
1263
|
+
function PlanRow({ plan, selected, onPress }) {
|
|
1264
|
+
return /* @__PURE__ */ jsxs14(
|
|
1265
|
+
XStack10,
|
|
1102
1266
|
{
|
|
1103
|
-
|
|
1104
|
-
width: stacked ? "100%" : void 0,
|
|
1267
|
+
width: "100%",
|
|
1105
1268
|
padding: "$3",
|
|
1269
|
+
paddingHorizontal: "$3.5",
|
|
1106
1270
|
borderRadius: "$5",
|
|
1107
1271
|
borderWidth: 2,
|
|
1108
|
-
borderColor: selected ? "$color9" :
|
|
1109
|
-
backgroundColor: selected ? "$color3" :
|
|
1110
|
-
pressStyle: { scale: 0.
|
|
1272
|
+
borderColor: selected ? "$color9" : "$color5",
|
|
1273
|
+
backgroundColor: selected ? "$color3" : "$color1",
|
|
1274
|
+
pressStyle: { scale: 0.98, opacity: 0.9 },
|
|
1111
1275
|
animation: "quick",
|
|
1112
1276
|
onPress,
|
|
1113
1277
|
cursor: "pointer",
|
|
1278
|
+
alignItems: "center",
|
|
1279
|
+
gap: "$3",
|
|
1114
1280
|
position: "relative",
|
|
1115
|
-
gap: "$1.5",
|
|
1116
|
-
alignItems: stacked ? "flex-start" : "center",
|
|
1117
1281
|
children: [
|
|
1118
|
-
plan.popular && /* @__PURE__ */
|
|
1119
|
-
|
|
1120
|
-
/* @__PURE__ */
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
plan.
|
|
1282
|
+
plan.popular && /* @__PURE__ */ jsx21(YStack14, { position: "absolute", top: -10, right: 12, backgroundColor: "$color9", paddingHorizontal: "$2", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ jsx21(SizableText17, { size: "$1", color: "white", fontWeight: "700", children: "BEST VALUE" }) }),
|
|
1283
|
+
/* @__PURE__ */ jsx21(Circle2, { size: 22, borderWidth: 2, borderColor: selected ? "$color9" : "$color7", backgroundColor: selected ? "$color9" : "transparent", children: selected && /* @__PURE__ */ jsx21(Circle2, { size: 8, backgroundColor: "white" }) }),
|
|
1284
|
+
/* @__PURE__ */ jsxs14(YStack14, { flex: 1, gap: "$0.5", children: [
|
|
1285
|
+
/* @__PURE__ */ jsxs14(XStack10, { gap: "$2", alignItems: "center", children: [
|
|
1286
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$4", fontWeight: "700", children: plan.name }),
|
|
1287
|
+
plan.trial && /* @__PURE__ */ jsx21(YStack14, { backgroundColor: "$green3", paddingHorizontal: "$1.5", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ jsx21(SizableText17, { size: "$1", color: "$green9", fontWeight: "700", children: plan.trial }) })
|
|
1288
|
+
] }),
|
|
1289
|
+
plan.tagline ? /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "$color10", children: plan.tagline }) : null
|
|
1126
1290
|
] }),
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1291
|
+
/* @__PURE__ */ jsxs14(YStack14, { alignItems: "flex-end", gap: "$0.5", children: [
|
|
1292
|
+
/* @__PURE__ */ jsxs14(XStack10, { alignItems: "baseline", gap: "$1", children: [
|
|
1293
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$5", fontWeight: "800", children: plan.price }),
|
|
1294
|
+
/* @__PURE__ */ jsxs14(SizableText17, { size: "$2", color: "$color10", children: [
|
|
1295
|
+
"/",
|
|
1296
|
+
plan.period
|
|
1297
|
+
] })
|
|
1298
|
+
] }),
|
|
1299
|
+
plan.savings && /* @__PURE__ */ jsx21(YStack14, { backgroundColor: "$green3", paddingHorizontal: "$1.5", paddingVertical: 1, borderRadius: "$10", children: /* @__PURE__ */ jsx21(SizableText17, { size: "$1", color: "$green9", fontWeight: "700", children: plan.savings }) }),
|
|
1300
|
+
plan.pricePerWeek && /* @__PURE__ */ jsx21(SizableText17, { size: "$1", color: "$color10", children: plan.pricePerWeek })
|
|
1301
|
+
] })
|
|
1133
1302
|
]
|
|
1134
1303
|
}
|
|
1135
1304
|
);
|
|
1136
1305
|
}
|
|
1306
|
+
function ComparisonIcon({ enabled }) {
|
|
1307
|
+
return /* @__PURE__ */ jsx21(Circle2, { size: 24, backgroundColor: enabled ? "$green3" : "$color4", children: /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: enabled ? "$green10" : "$color8", fontWeight: "700", children: enabled ? "\u2713" : "\u2715" }) });
|
|
1308
|
+
}
|
|
1309
|
+
function TestimonialCard({ t }) {
|
|
1310
|
+
return /* @__PURE__ */ jsxs14(YStack14, { minWidth: 240, backgroundColor: "$color2", borderRadius: "$6", padding: "$3.5", gap: "$2.5", children: [
|
|
1311
|
+
/* @__PURE__ */ jsxs14(SizableText17, { size: "$3", color: "$color11", fontStyle: "italic", children: [
|
|
1312
|
+
"\u201C",
|
|
1313
|
+
t.quote,
|
|
1314
|
+
"\u201D"
|
|
1315
|
+
] }),
|
|
1316
|
+
/* @__PURE__ */ jsxs14(XStack10, { gap: "$2", alignItems: "center", children: [
|
|
1317
|
+
/* @__PURE__ */ jsx21(Circle2, { size: 32, backgroundColor: "$color5", children: /* @__PURE__ */ jsx21(SizableText17, { size: "$2", fontWeight: "700", children: t.author[0] }) }),
|
|
1318
|
+
/* @__PURE__ */ jsxs14(YStack14, { children: [
|
|
1319
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$2", fontWeight: "700", children: t.author }),
|
|
1320
|
+
t.meta ? /* @__PURE__ */ jsx21(SizableText17, { size: "$1", color: "$color10", children: t.meta }) : null
|
|
1321
|
+
] })
|
|
1322
|
+
] })
|
|
1323
|
+
] });
|
|
1324
|
+
}
|
|
1325
|
+
function CreatorHeader({ c }) {
|
|
1326
|
+
return /* @__PURE__ */ jsxs14(XStack10, { alignItems: "center", justifyContent: "center", gap: "$3", children: [
|
|
1327
|
+
c.avatar && /* @__PURE__ */ jsx21(Circle2, { size: 72, overflow: "hidden", backgroundColor: "$color3", children: c.avatar }),
|
|
1328
|
+
/* @__PURE__ */ jsxs14(YStack14, { alignItems: "center", gap: "$1", children: [
|
|
1329
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$6", fontWeight: "800", children: c.name }),
|
|
1330
|
+
c.meta ? /* @__PURE__ */ jsx21(SizableText17, { size: "$3", color: "$color10", children: c.meta }) : null
|
|
1331
|
+
] })
|
|
1332
|
+
] });
|
|
1333
|
+
}
|
|
1334
|
+
function TrustBadges({ badges }) {
|
|
1335
|
+
return /* @__PURE__ */ jsx21(XStack10, { justifyContent: "center", gap: "$4", paddingTop: "$1", children: badges.map((b, i) => /* @__PURE__ */ jsxs14(YStack14, { alignItems: "center", gap: "$1", children: [
|
|
1336
|
+
/* @__PURE__ */ jsx21(Circle2, { size: 28, backgroundColor: "$color3", children: b.icon ?? /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "$color9", children: "\u2726" }) }),
|
|
1337
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$1", color: "$color10", textAlign: "center", children: b.label })
|
|
1338
|
+
] }, i)) });
|
|
1339
|
+
}
|
|
1137
1340
|
function PaywallScreen({
|
|
1138
1341
|
variant = "default",
|
|
1139
1342
|
eyebrow,
|
|
@@ -1158,68 +1361,57 @@ function PaywallScreen({
|
|
|
1158
1361
|
testimonials = [],
|
|
1159
1362
|
creator,
|
|
1160
1363
|
topSlot,
|
|
1161
|
-
footerSlot
|
|
1364
|
+
footerSlot,
|
|
1365
|
+
trustBadges
|
|
1162
1366
|
}) {
|
|
1163
1367
|
const selected = selectedPlan ?? plans.find((p) => p.popular)?.id ?? plans[0]?.id;
|
|
1164
1368
|
const countdown = useCountdown(countdownMinutes);
|
|
1165
1369
|
const dark = variant === "immersive-dark";
|
|
1166
|
-
const
|
|
1167
|
-
const
|
|
1168
|
-
const
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
/* @__PURE__ */ jsx20(ScrollView2, { flex: 1, contentContainerStyle: { paddingBottom: 220 }, children: /* @__PURE__ */ jsxs13(YStack14, { padding: "$4", gap: "$4", paddingTop: "$8", children: [
|
|
1370
|
+
const bg = dark ? "$color1" : "$background";
|
|
1371
|
+
const tone = dark ? "$color12" : "$color11";
|
|
1372
|
+
const muted = "$color10";
|
|
1373
|
+
return /* @__PURE__ */ jsxs14(YStack14, { flex: 1, backgroundColor: bg, children: [
|
|
1374
|
+
onClose && /* @__PURE__ */ jsx21(XStack10, { position: "absolute", top: "$4", right: "$4", zIndex: 10, children: /* @__PURE__ */ jsx21(Button3, { size: "$3", circular: true, chromeless: true, onPress: onClose, pressStyle: { opacity: 0.6 }, children: /* @__PURE__ */ jsx21(SizableText17, { size: "$5", color: muted, children: "\u2715" }) }) }),
|
|
1375
|
+
/* @__PURE__ */ jsx21(ScrollView2, { flex: 1, contentContainerStyle: { paddingBottom: 240 }, children: /* @__PURE__ */ jsxs14(YStack14, { paddingHorizontal: "$5", paddingTop: "$8", gap: "$5", children: [
|
|
1173
1376
|
topSlot,
|
|
1174
|
-
creator && variant === "creator-sheet" ? /* @__PURE__ */
|
|
1175
|
-
hero && /* @__PURE__ */
|
|
1176
|
-
badge && /* @__PURE__ */
|
|
1177
|
-
/* @__PURE__ */
|
|
1178
|
-
eyebrow ? /* @__PURE__ */
|
|
1179
|
-
/* @__PURE__ */
|
|
1180
|
-
subtitle && /* @__PURE__ */
|
|
1181
|
-
socialProof && /* @__PURE__ */
|
|
1182
|
-
] }),
|
|
1183
|
-
countdownMinutes && !countdown.expired && /* @__PURE__ */ jsxs13(XStack10, { justifyContent: "center", padding: "$2", backgroundColor: "$red3", borderRadius: "$4", alignSelf: "center", paddingHorizontal: "$4", gap: "$2", alignItems: "center", children: [
|
|
1184
|
-
/* @__PURE__ */ jsx20(SizableText17, { size: "$2", color: "$red9", fontWeight: "600", children: "Offer ends in" }),
|
|
1185
|
-
/* @__PURE__ */ jsx20(SizableText17, { size: "$5", color: "$red9", fontWeight: "800", fontFamily: "$mono", children: countdown.display })
|
|
1377
|
+
creator && variant === "creator-sheet" ? /* @__PURE__ */ jsx21(CreatorHeader, { c: creator }) : null,
|
|
1378
|
+
hero && /* @__PURE__ */ jsx21(YStack14, { alignItems: "center", paddingVertical: "$3", children: hero }),
|
|
1379
|
+
badge && /* @__PURE__ */ jsx21(XStack10, { justifyContent: "center", children: /* @__PURE__ */ jsx21(YStack14, { backgroundColor: "$color9", paddingHorizontal: "$3", paddingVertical: "$1", borderRadius: "$10", children: /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "white", fontWeight: "700", children: badge }) }) }),
|
|
1380
|
+
/* @__PURE__ */ jsxs14(YStack14, { gap: "$1.5", alignItems: "center", children: [
|
|
1381
|
+
eyebrow ? /* @__PURE__ */ jsx21(SizableText17, { size: "$2", fontWeight: "700", color: "$color9", textTransform: "uppercase", children: eyebrow }) : null,
|
|
1382
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$9", fontWeight: "800", textAlign: "center", color: tone, children: title }),
|
|
1383
|
+
subtitle && /* @__PURE__ */ jsx21(SizableText17, { size: "$4", color: muted, textAlign: "center", children: subtitle }),
|
|
1384
|
+
socialProof && /* @__PURE__ */ jsx21(SizableText17, { size: "$3", color: "$color9", fontWeight: "600", textAlign: "center", paddingTop: "$1", children: socialProof })
|
|
1186
1385
|
] }),
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
variant === "comparison" && comparisonRows.length > 0 ? /* @__PURE__ */ jsxs13(YStack14, { backgroundColor: dark ? "$color2" : "$color1", borderRadius: "$6", padding: "$3", gap: "$2", borderWidth: 1, borderColor: "$color4", children: [
|
|
1199
|
-
/* @__PURE__ */ jsxs13(XStack10, { alignItems: "center", children: [
|
|
1200
|
-
/* @__PURE__ */ jsx20(SizableText17, { flex: 1, size: "$2", fontWeight: "700", color: "$color10", children: "Feature" }),
|
|
1201
|
-
/* @__PURE__ */ jsx20(SizableText17, { width: 64, size: "$2", fontWeight: "700", textAlign: "center", color: "$color10", children: "Free" }),
|
|
1202
|
-
/* @__PURE__ */ jsx20(SizableText17, { width: 84, size: "$2", fontWeight: "700", textAlign: "center", color: "$color10", children: "Premium" })
|
|
1386
|
+
countdownMinutes && !countdown.expired ? /* @__PURE__ */ jsxs14(XStack10, { justifyContent: "center", padding: "$2", backgroundColor: "$red3", borderRadius: "$4", alignSelf: "center", paddingHorizontal: "$4", gap: "$2", alignItems: "center", children: [
|
|
1387
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "$red9", fontWeight: "600", children: "Offer ends in" }),
|
|
1388
|
+
/* @__PURE__ */ jsx21(SizableText17, { size: "$5", color: "$red9", fontWeight: "800", fontFamily: "$mono", children: countdown.display })
|
|
1389
|
+
] }) : null,
|
|
1390
|
+
features.length > 0 && /* @__PURE__ */ jsx21(YStack14, { gap: "$3.5", children: features.map((feature, i) => /* @__PURE__ */ jsx21(BenefitRow, { feature, tone, muted }, i)) }),
|
|
1391
|
+
variant === "social-proof" && testimonials.length > 0 ? /* @__PURE__ */ jsx21(ScrollView2, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsx21(XStack10, { gap: "$3", paddingRight: "$4", children: testimonials.map((t, i) => /* @__PURE__ */ jsx21(TestimonialCard, { t }, `${t.author}-${i}`)) }) }) : null,
|
|
1392
|
+
variant === "comparison" && comparisonRows.length > 0 ? /* @__PURE__ */ jsxs14(YStack14, { backgroundColor: dark ? "$color2" : "$color1", borderRadius: "$6", padding: "$3.5", gap: "$2", borderWidth: 1, borderColor: "$color4", children: [
|
|
1393
|
+
/* @__PURE__ */ jsxs14(XStack10, { alignItems: "center", children: [
|
|
1394
|
+
/* @__PURE__ */ jsx21(SizableText17, { flex: 1, size: "$2", fontWeight: "700", color: muted, children: "Feature" }),
|
|
1395
|
+
/* @__PURE__ */ jsx21(SizableText17, { width: 64, size: "$2", fontWeight: "700", textAlign: "center", color: muted, children: "Free" }),
|
|
1396
|
+
/* @__PURE__ */ jsx21(SizableText17, { width: 84, size: "$2", fontWeight: "700", textAlign: "center", color: "$color9", children: "Premium" })
|
|
1203
1397
|
] }),
|
|
1204
|
-
comparisonRows.map((row) => /* @__PURE__ */
|
|
1205
|
-
/* @__PURE__ */
|
|
1206
|
-
/* @__PURE__ */
|
|
1207
|
-
/* @__PURE__ */
|
|
1398
|
+
comparisonRows.map((row) => /* @__PURE__ */ jsxs14(XStack10, { alignItems: "center", paddingVertical: "$1.5", children: [
|
|
1399
|
+
/* @__PURE__ */ jsx21(SizableText17, { flex: 1, size: "$3", color: tone, children: row.label }),
|
|
1400
|
+
/* @__PURE__ */ jsx21(XStack10, { width: 64, justifyContent: "center", children: /* @__PURE__ */ jsx21(ComparisonIcon, { enabled: row.free }) }),
|
|
1401
|
+
/* @__PURE__ */ jsx21(XStack10, { width: 84, justifyContent: "center", children: /* @__PURE__ */ jsx21(ComparisonIcon, { enabled: row.premium }) })
|
|
1208
1402
|
] }, row.label))
|
|
1209
1403
|
] }) : null,
|
|
1210
|
-
/* @__PURE__ */
|
|
1211
|
-
|
|
1404
|
+
/* @__PURE__ */ jsx21(YStack14, { gap: "$3", children: plans.map((plan) => /* @__PURE__ */ jsx21(
|
|
1405
|
+
PlanRow,
|
|
1212
1406
|
{
|
|
1213
1407
|
plan,
|
|
1214
1408
|
selected: selected === plan.id,
|
|
1215
|
-
onPress: () => onSelectPlan?.(plan.id)
|
|
1216
|
-
stacked: stackedPlans,
|
|
1217
|
-
dark
|
|
1409
|
+
onPress: () => onSelectPlan?.(plan.id)
|
|
1218
1410
|
},
|
|
1219
1411
|
plan.id
|
|
1220
1412
|
)) })
|
|
1221
1413
|
] }) }),
|
|
1222
|
-
/* @__PURE__ */
|
|
1414
|
+
/* @__PURE__ */ jsxs14(
|
|
1223
1415
|
YStack14,
|
|
1224
1416
|
{
|
|
1225
1417
|
position: "absolute",
|
|
@@ -1228,12 +1420,12 @@ function PaywallScreen({
|
|
|
1228
1420
|
right: 0,
|
|
1229
1421
|
padding: "$4",
|
|
1230
1422
|
paddingBottom: "$6",
|
|
1231
|
-
backgroundColor,
|
|
1423
|
+
backgroundColor: bg,
|
|
1232
1424
|
borderTopWidth: 1,
|
|
1233
1425
|
borderTopColor: "$color4",
|
|
1234
1426
|
gap: "$2.5",
|
|
1235
1427
|
children: [
|
|
1236
|
-
/* @__PURE__ */
|
|
1428
|
+
/* @__PURE__ */ jsx21(
|
|
1237
1429
|
Button3,
|
|
1238
1430
|
{
|
|
1239
1431
|
size: "$5",
|
|
@@ -1247,12 +1439,13 @@ function PaywallScreen({
|
|
|
1247
1439
|
children: continueLabel
|
|
1248
1440
|
}
|
|
1249
1441
|
),
|
|
1250
|
-
reassurance && /* @__PURE__ */
|
|
1251
|
-
/* @__PURE__ */
|
|
1252
|
-
onRestore && /* @__PURE__ */
|
|
1253
|
-
onTerms && /* @__PURE__ */
|
|
1254
|
-
onPrivacy && /* @__PURE__ */
|
|
1442
|
+
reassurance && /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "$color9", textAlign: "center", children: reassurance }),
|
|
1443
|
+
/* @__PURE__ */ jsxs14(XStack10, { justifyContent: "center", gap: "$3", children: [
|
|
1444
|
+
onRestore && /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "$color8", onPress: onRestore, pressStyle: { opacity: 0.6 }, children: "Restore" }),
|
|
1445
|
+
onTerms && /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "$color8", onPress: onTerms, pressStyle: { opacity: 0.6 }, children: "Terms" }),
|
|
1446
|
+
onPrivacy && /* @__PURE__ */ jsx21(SizableText17, { size: "$2", color: "$color8", onPress: onPrivacy, pressStyle: { opacity: 0.6 }, children: "Privacy" })
|
|
1255
1447
|
] }),
|
|
1448
|
+
trustBadges && trustBadges.length > 0 && /* @__PURE__ */ jsx21(TrustBadges, { badges: trustBadges }),
|
|
1256
1449
|
footerSlot
|
|
1257
1450
|
]
|
|
1258
1451
|
}
|
|
@@ -1263,7 +1456,7 @@ function PaywallScreen({
|
|
|
1263
1456
|
// src/patterns/OnboardingCarousel.tsx
|
|
1264
1457
|
import { useState as useState6 } from "react";
|
|
1265
1458
|
import { Button as Button4, SizableText as SizableText18, XStack as XStack11, YStack as YStack15, Circle as Circle3 } from "tamagui";
|
|
1266
|
-
import { jsx as
|
|
1459
|
+
import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1267
1460
|
function OnboardingCarousel({
|
|
1268
1461
|
steps,
|
|
1269
1462
|
variant = "default",
|
|
@@ -1278,7 +1471,7 @@ function OnboardingCarousel({
|
|
|
1278
1471
|
}) {
|
|
1279
1472
|
const [current, setCurrent] = useState6(0);
|
|
1280
1473
|
if (steps.length === 0) {
|
|
1281
|
-
return /* @__PURE__ */
|
|
1474
|
+
return /* @__PURE__ */ jsx22(YStack15, { flex: 1, backgroundColor: "$background", padding: "$4", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx22(SizableText18, { size: "$5", color: "$color10", textAlign: "center", children: "Add at least one onboarding step." }) });
|
|
1282
1475
|
}
|
|
1283
1476
|
const isLast = current === steps.length - 1;
|
|
1284
1477
|
const step = steps[current];
|
|
@@ -1292,15 +1485,15 @@ function OnboardingCarousel({
|
|
|
1292
1485
|
const heroBackground = isPermission ? "$color3" : isSelection ? "$color1" : "$color2";
|
|
1293
1486
|
const heroRadius = variant === "card-tilt" || isSelection ? "$8" : "$10";
|
|
1294
1487
|
const buttonTone = variant === "editorial" ? "$color12" : "$color9";
|
|
1295
|
-
return /* @__PURE__ */
|
|
1296
|
-
step?.background ? /* @__PURE__ */
|
|
1297
|
-
/* @__PURE__ */
|
|
1298
|
-
/* @__PURE__ */
|
|
1299
|
-
brand ? /* @__PURE__ */
|
|
1300
|
-
!isLast && onSkip && /* @__PURE__ */
|
|
1488
|
+
return /* @__PURE__ */ jsxs15(YStack15, { flex: 1, backgroundColor, padding: "$4", justifyContent: "space-between", children: [
|
|
1489
|
+
step?.background ? /* @__PURE__ */ jsx22(YStack15, { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, children: step.background }) : null,
|
|
1490
|
+
/* @__PURE__ */ jsxs15(XStack11, { justifyContent: "space-between", alignItems: "center", paddingTop: topPadding, children: [
|
|
1491
|
+
/* @__PURE__ */ jsx22(XStack11, { minWidth: 40, children: topLeading }),
|
|
1492
|
+
brand ? /* @__PURE__ */ jsx22(YStack15, { alignItems: "center", flex: 1, children: brand }) : /* @__PURE__ */ jsx22(YStack15, { flex: 1 }),
|
|
1493
|
+
!isLast && onSkip && /* @__PURE__ */ jsx22(Button4, { chromeless: true, onPress: onSkip, children: /* @__PURE__ */ jsx22(SizableText18, { size: "$4", color: "$color9", children: skipLabel }) })
|
|
1301
1494
|
] }),
|
|
1302
|
-
/* @__PURE__ */
|
|
1303
|
-
hero ? variant === "card-tilt" || isSelection ? /* @__PURE__ */
|
|
1495
|
+
/* @__PURE__ */ jsxs15(YStack15, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$5", paddingHorizontal: "$4", children: [
|
|
1496
|
+
hero ? variant === "card-tilt" || isSelection ? /* @__PURE__ */ jsx22(
|
|
1304
1497
|
YStack15,
|
|
1305
1498
|
{
|
|
1306
1499
|
width: "100%",
|
|
@@ -1320,15 +1513,15 @@ function OnboardingCarousel({
|
|
|
1320
1513
|
style: variant === "card-tilt" ? { transform: [{ rotate: "-5deg" }] } : void 0,
|
|
1321
1514
|
children: hero
|
|
1322
1515
|
}
|
|
1323
|
-
) : /* @__PURE__ */
|
|
1324
|
-
/* @__PURE__ */
|
|
1325
|
-
step?.eyebrow ? /* @__PURE__ */
|
|
1326
|
-
/* @__PURE__ */
|
|
1327
|
-
/* @__PURE__ */
|
|
1516
|
+
) : /* @__PURE__ */ jsx22(Circle3, { size: isPermission ? 140 : 120, backgroundColor: heroBackground, alignItems: "center", justifyContent: "center", children: hero }) : null,
|
|
1517
|
+
/* @__PURE__ */ jsxs15(YStack15, { gap: "$3", alignItems: "center", children: [
|
|
1518
|
+
step?.eyebrow ? /* @__PURE__ */ jsx22(SizableText18, { size: "$2", color: "$color9", fontWeight: "700", textTransform: "uppercase", children: step.eyebrow }) : null,
|
|
1519
|
+
/* @__PURE__ */ jsx22(SizableText18, { size: titleSize, fontWeight: "700", textAlign: "center", children: step?.title }),
|
|
1520
|
+
/* @__PURE__ */ jsx22(SizableText18, { size: "$4", color: "$color10", textAlign: "center", maxWidth: 300, children: step?.description })
|
|
1328
1521
|
] })
|
|
1329
1522
|
] }),
|
|
1330
|
-
/* @__PURE__ */
|
|
1331
|
-
/* @__PURE__ */
|
|
1523
|
+
/* @__PURE__ */ jsxs15(YStack15, { gap: "$3", paddingBottom: "$2", children: [
|
|
1524
|
+
/* @__PURE__ */ jsx22(XStack11, { justifyContent: "center", gap: "$2", children: steps.map((_, i) => /* @__PURE__ */ jsx22(
|
|
1332
1525
|
Circle3,
|
|
1333
1526
|
{
|
|
1334
1527
|
size: variant === "card-tilt" ? 10 : 8,
|
|
@@ -1339,7 +1532,7 @@ function OnboardingCarousel({
|
|
|
1339
1532
|
},
|
|
1340
1533
|
i
|
|
1341
1534
|
)) }),
|
|
1342
|
-
/* @__PURE__ */
|
|
1535
|
+
/* @__PURE__ */ jsx22(
|
|
1343
1536
|
Button4,
|
|
1344
1537
|
{
|
|
1345
1538
|
size: "$5",
|
|
@@ -1359,10 +1552,10 @@ function OnboardingCarousel({
|
|
|
1359
1552
|
|
|
1360
1553
|
// src/patterns/ChatBubble.tsx
|
|
1361
1554
|
import { SizableText as SizableText19, XStack as XStack12, YStack as YStack16, Circle as Circle4, Image as Image3 } from "tamagui";
|
|
1362
|
-
import { jsx as
|
|
1555
|
+
import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1363
1556
|
function ChatBubble({ message, showAvatar = true }) {
|
|
1364
1557
|
const isUser = message.sender === "user";
|
|
1365
|
-
return /* @__PURE__ */
|
|
1558
|
+
return /* @__PURE__ */ jsxs16(
|
|
1366
1559
|
XStack12,
|
|
1367
1560
|
{
|
|
1368
1561
|
alignSelf: isUser ? "flex-end" : "flex-start",
|
|
@@ -1370,8 +1563,8 @@ function ChatBubble({ message, showAvatar = true }) {
|
|
|
1370
1563
|
gap: "$2",
|
|
1371
1564
|
flexDirection: isUser ? "row-reverse" : "row",
|
|
1372
1565
|
children: [
|
|
1373
|
-
showAvatar && !isUser && /* @__PURE__ */
|
|
1374
|
-
/* @__PURE__ */
|
|
1566
|
+
showAvatar && !isUser && /* @__PURE__ */ jsx23(Circle4, { size: 32, backgroundColor: "$color4", overflow: "hidden", children: message.avatar ? /* @__PURE__ */ jsx23(Image3, { source: { uri: message.avatar }, width: 32, height: 32, objectFit: "cover" }) : /* @__PURE__ */ jsx23(SizableText19, { size: "$2", fontWeight: "600", color: "$color11", children: message.senderName?.[0]?.toUpperCase() ?? "?" }) }),
|
|
1567
|
+
/* @__PURE__ */ jsxs16(
|
|
1375
1568
|
YStack16,
|
|
1376
1569
|
{
|
|
1377
1570
|
backgroundColor: isUser ? "$color9" : "$color3",
|
|
@@ -1382,8 +1575,8 @@ function ChatBubble({ message, showAvatar = true }) {
|
|
|
1382
1575
|
borderBottomLeftRadius: isUser ? "$5" : "$2",
|
|
1383
1576
|
gap: "$1",
|
|
1384
1577
|
children: [
|
|
1385
|
-
/* @__PURE__ */
|
|
1386
|
-
message.timestamp && /* @__PURE__ */
|
|
1578
|
+
/* @__PURE__ */ jsx23(SizableText19, { size: "$3", color: isUser ? "$color1" : "$color12", children: message.text }),
|
|
1579
|
+
message.timestamp && /* @__PURE__ */ jsx23(SizableText19, { size: "$1", color: isUser ? "$color3" : "$color9", alignSelf: "flex-end", children: message.timestamp })
|
|
1387
1580
|
]
|
|
1388
1581
|
}
|
|
1389
1582
|
)
|
|
@@ -1394,9 +1587,9 @@ function ChatBubble({ message, showAvatar = true }) {
|
|
|
1394
1587
|
|
|
1395
1588
|
// src/patterns/SettingsScreen.tsx
|
|
1396
1589
|
import { Separator as Separator4, SizableText as SizableText20, Switch, XStack as XStack13, YStack as YStack17 } from "tamagui";
|
|
1397
|
-
import { jsx as
|
|
1590
|
+
import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1398
1591
|
function SettingsItemRow({ item }) {
|
|
1399
|
-
return /* @__PURE__ */
|
|
1592
|
+
return /* @__PURE__ */ jsxs17(
|
|
1400
1593
|
XStack13,
|
|
1401
1594
|
{
|
|
1402
1595
|
alignItems: "center",
|
|
@@ -1408,21 +1601,21 @@ function SettingsItemRow({ item }) {
|
|
|
1408
1601
|
onPress: item.onPress,
|
|
1409
1602
|
cursor: item.onPress ? "pointer" : void 0,
|
|
1410
1603
|
children: [
|
|
1411
|
-
item.icon && /* @__PURE__ */
|
|
1412
|
-
/* @__PURE__ */
|
|
1413
|
-
/* @__PURE__ */
|
|
1414
|
-
item.subtitle && /* @__PURE__ */
|
|
1604
|
+
item.icon && /* @__PURE__ */ jsx24(YStack17, { width: 24, alignItems: "center", children: item.icon }),
|
|
1605
|
+
/* @__PURE__ */ jsxs17(YStack17, { flex: 1, gap: "$1", children: [
|
|
1606
|
+
/* @__PURE__ */ jsx24(SizableText20, { size: "$4", fontWeight: "500", children: item.title }),
|
|
1607
|
+
item.subtitle && /* @__PURE__ */ jsx24(SizableText20, { size: "$2", color: "$color9", children: item.subtitle })
|
|
1415
1608
|
] }),
|
|
1416
|
-
item.type === "toggle" ? /* @__PURE__ */
|
|
1609
|
+
item.type === "toggle" ? /* @__PURE__ */ jsx24(Switch, { size: "$3", checked: item.value, onCheckedChange: item.onValueChange, children: /* @__PURE__ */ jsx24(Switch.Thumb, { animation: "quick" }) }) : item.right ? item.right : item.onPress && /* @__PURE__ */ jsx24(SizableText20, { size: "$5", color: "$color8", children: "\u203A" })
|
|
1417
1610
|
]
|
|
1418
1611
|
}
|
|
1419
1612
|
);
|
|
1420
1613
|
}
|
|
1421
1614
|
function SettingsScreen({ sections, header }) {
|
|
1422
|
-
return /* @__PURE__ */
|
|
1615
|
+
return /* @__PURE__ */ jsxs17(YStack17, { flex: 1, backgroundColor: "$background", children: [
|
|
1423
1616
|
header,
|
|
1424
|
-
/* @__PURE__ */
|
|
1425
|
-
section.title && /* @__PURE__ */
|
|
1617
|
+
/* @__PURE__ */ jsx24(YStack17, { gap: "$4", paddingVertical: "$2", children: sections.map((section, si) => /* @__PURE__ */ jsxs17(YStack17, { children: [
|
|
1618
|
+
section.title && /* @__PURE__ */ jsx24(
|
|
1426
1619
|
SizableText20,
|
|
1427
1620
|
{
|
|
1428
1621
|
size: "$2",
|
|
@@ -1434,9 +1627,9 @@ function SettingsScreen({ sections, header }) {
|
|
|
1434
1627
|
children: section.title
|
|
1435
1628
|
}
|
|
1436
1629
|
),
|
|
1437
|
-
/* @__PURE__ */
|
|
1438
|
-
/* @__PURE__ */
|
|
1439
|
-
ii < section.items.length - 1 && /* @__PURE__ */
|
|
1630
|
+
/* @__PURE__ */ jsx24(YStack17, { backgroundColor: "$color1", borderRadius: "$4", marginHorizontal: "$3", overflow: "hidden", children: section.items.map((item, ii) => /* @__PURE__ */ jsxs17(YStack17, { children: [
|
|
1631
|
+
/* @__PURE__ */ jsx24(SettingsItemRow, { item }),
|
|
1632
|
+
ii < section.items.length - 1 && /* @__PURE__ */ jsx24(Separator4, { borderColor: "$color3", marginLeft: "$12" })
|
|
1440
1633
|
] }, item.id)) })
|
|
1441
1634
|
] }, si)) })
|
|
1442
1635
|
] });
|
|
@@ -1444,15 +1637,15 @@ function SettingsScreen({ sections, header }) {
|
|
|
1444
1637
|
|
|
1445
1638
|
// src/patterns/EmptyState.tsx
|
|
1446
1639
|
import { Button as Button5, SizableText as SizableText21, YStack as YStack18 } from "tamagui";
|
|
1447
|
-
import { jsx as
|
|
1640
|
+
import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1448
1641
|
function EmptyState({ icon, title, description, actionLabel, onAction }) {
|
|
1449
|
-
return /* @__PURE__ */
|
|
1642
|
+
return /* @__PURE__ */ jsxs18(YStack18, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$4", padding: "$6", children: [
|
|
1450
1643
|
icon,
|
|
1451
|
-
/* @__PURE__ */
|
|
1452
|
-
/* @__PURE__ */
|
|
1453
|
-
description && /* @__PURE__ */
|
|
1644
|
+
/* @__PURE__ */ jsxs18(YStack18, { gap: "$2", alignItems: "center", children: [
|
|
1645
|
+
/* @__PURE__ */ jsx25(SizableText21, { size: "$6", fontWeight: "600", textAlign: "center", children: title }),
|
|
1646
|
+
description && /* @__PURE__ */ jsx25(SizableText21, { size: "$4", color: "$color9", textAlign: "center", maxWidth: 280, children: description })
|
|
1454
1647
|
] }),
|
|
1455
|
-
actionLabel && onAction && /* @__PURE__ */
|
|
1648
|
+
actionLabel && onAction && /* @__PURE__ */ jsx25(
|
|
1456
1649
|
Button5,
|
|
1457
1650
|
{
|
|
1458
1651
|
size: "$4",
|
|
@@ -1470,17 +1663,17 @@ function EmptyState({ icon, title, description, actionLabel, onAction }) {
|
|
|
1470
1663
|
|
|
1471
1664
|
// src/patterns/ProfileHeader.tsx
|
|
1472
1665
|
import { Circle as Circle5, Image as Image4, SizableText as SizableText22, XStack as XStack14, YStack as YStack19 } from "tamagui";
|
|
1473
|
-
import { jsx as
|
|
1666
|
+
import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1474
1667
|
function ProfileHeader({ name, subtitle, avatar, stats, actions }) {
|
|
1475
|
-
return /* @__PURE__ */
|
|
1476
|
-
/* @__PURE__ */
|
|
1477
|
-
/* @__PURE__ */
|
|
1478
|
-
/* @__PURE__ */
|
|
1479
|
-
subtitle && /* @__PURE__ */
|
|
1668
|
+
return /* @__PURE__ */ jsxs19(YStack19, { alignItems: "center", gap: "$4", paddingVertical: "$6", paddingHorizontal: "$4", children: [
|
|
1669
|
+
/* @__PURE__ */ jsx26(Circle5, { size: 80, backgroundColor: "$color4", overflow: "hidden", children: avatar ? /* @__PURE__ */ jsx26(Image4, { source: { uri: avatar }, width: 80, height: 80, objectFit: "cover" }) : /* @__PURE__ */ jsx26(SizableText22, { size: "$9", fontWeight: "700", color: "$color11", children: name[0]?.toUpperCase() ?? "?" }) }),
|
|
1670
|
+
/* @__PURE__ */ jsxs19(YStack19, { alignItems: "center", gap: "$1", children: [
|
|
1671
|
+
/* @__PURE__ */ jsx26(SizableText22, { size: "$7", fontWeight: "700", children: name }),
|
|
1672
|
+
subtitle && /* @__PURE__ */ jsx26(SizableText22, { size: "$4", color: "$color10", children: subtitle })
|
|
1480
1673
|
] }),
|
|
1481
|
-
stats && stats.length > 0 && /* @__PURE__ */
|
|
1482
|
-
/* @__PURE__ */
|
|
1483
|
-
/* @__PURE__ */
|
|
1674
|
+
stats && stats.length > 0 && /* @__PURE__ */ jsx26(XStack14, { gap: "$6", children: stats.map((stat, i) => /* @__PURE__ */ jsxs19(YStack19, { alignItems: "center", gap: "$1", children: [
|
|
1675
|
+
/* @__PURE__ */ jsx26(SizableText22, { size: "$6", fontWeight: "700", children: stat.value }),
|
|
1676
|
+
/* @__PURE__ */ jsx26(SizableText22, { size: "$2", color: "$color9", children: stat.label })
|
|
1484
1677
|
] }, i)) }),
|
|
1485
1678
|
actions
|
|
1486
1679
|
] });
|
|
@@ -1488,27 +1681,27 @@ function ProfileHeader({ name, subtitle, avatar, stats, actions }) {
|
|
|
1488
1681
|
|
|
1489
1682
|
// src/patterns/AppHeader.tsx
|
|
1490
1683
|
import { SizableText as SizableText23, XStack as XStack15, YStack as YStack20 } from "tamagui";
|
|
1491
|
-
import { jsx as
|
|
1684
|
+
import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1492
1685
|
function AppHeader({ title, subtitle, variant = "simple", onBack, avatar, left, right, transparent, borderless }) {
|
|
1493
1686
|
const leftContent = (() => {
|
|
1494
|
-
if (variant === "back") return /* @__PURE__ */
|
|
1495
|
-
if (variant === "profile") return /* @__PURE__ */
|
|
1687
|
+
if (variant === "back") return /* @__PURE__ */ jsx27(SizableText23, { size: "$6", paddingRight: "$2", onPress: onBack, pressStyle: { opacity: 0.6 }, cursor: "pointer", children: "\u2039" });
|
|
1688
|
+
if (variant === "profile") return /* @__PURE__ */ jsx27(Avatar, { uri: avatar, name: title, size: "sm" });
|
|
1496
1689
|
if (variant === "centered") return left ?? null;
|
|
1497
1690
|
return null;
|
|
1498
1691
|
})();
|
|
1499
1692
|
const rightContent = variant === "profile" || variant === "centered" ? right ?? null : null;
|
|
1500
|
-
return /* @__PURE__ */
|
|
1693
|
+
return /* @__PURE__ */ jsx27(
|
|
1501
1694
|
YStack20,
|
|
1502
1695
|
{
|
|
1503
1696
|
paddingTop: "$6",
|
|
1504
1697
|
backgroundColor: transparent ? "transparent" : "$background",
|
|
1505
1698
|
borderBottomWidth: borderless ? 0 : 1,
|
|
1506
1699
|
borderBottomColor: "$borderColor",
|
|
1507
|
-
children: /* @__PURE__ */
|
|
1700
|
+
children: /* @__PURE__ */ jsxs20(XStack15, { height: 56, alignItems: "center", paddingHorizontal: "$4", gap: "$3", children: [
|
|
1508
1701
|
leftContent,
|
|
1509
|
-
/* @__PURE__ */
|
|
1510
|
-
/* @__PURE__ */
|
|
1511
|
-
subtitle && /* @__PURE__ */
|
|
1702
|
+
/* @__PURE__ */ jsxs20(YStack20, { flex: 1, alignItems: variant === "centered" ? "center" : "flex-start", children: [
|
|
1703
|
+
/* @__PURE__ */ jsx27(SizableText23, { size: "$6", fontWeight: "700", numberOfLines: 1, children: title }),
|
|
1704
|
+
subtitle && /* @__PURE__ */ jsx27(SizableText23, { size: "$2", color: "$color9", numberOfLines: 1, children: subtitle })
|
|
1512
1705
|
] }),
|
|
1513
1706
|
rightContent
|
|
1514
1707
|
] })
|
|
@@ -1519,9 +1712,9 @@ function AppHeader({ title, subtitle, variant = "simple", onBack, avatar, left,
|
|
|
1519
1712
|
// src/patterns/BottomSheet.tsx
|
|
1520
1713
|
import { Sheet, SizableText as SizableText24, XStack as XStack16, YStack as YStack21 } from "tamagui";
|
|
1521
1714
|
import { ScrollView as ScrollView3 } from "react-native";
|
|
1522
|
-
import { jsx as
|
|
1715
|
+
import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1523
1716
|
function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], dismissOnSnapToBottom = true, showHandle = true, showClose = false, zIndex = 1e5 }) {
|
|
1524
|
-
return /* @__PURE__ */
|
|
1717
|
+
return /* @__PURE__ */ jsxs21(
|
|
1525
1718
|
Sheet,
|
|
1526
1719
|
{
|
|
1527
1720
|
modal: true,
|
|
@@ -1533,12 +1726,12 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
|
|
|
1533
1726
|
zIndex,
|
|
1534
1727
|
animation: "medium",
|
|
1535
1728
|
children: [
|
|
1536
|
-
/* @__PURE__ */
|
|
1537
|
-
showHandle && /* @__PURE__ */
|
|
1538
|
-
/* @__PURE__ */
|
|
1539
|
-
(title || showClose) && /* @__PURE__ */
|
|
1540
|
-
/* @__PURE__ */
|
|
1541
|
-
showClose && /* @__PURE__ */
|
|
1729
|
+
/* @__PURE__ */ jsx28(Sheet.Overlay, { animation: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }),
|
|
1730
|
+
showHandle && /* @__PURE__ */ jsx28(Sheet.Handle, {}),
|
|
1731
|
+
/* @__PURE__ */ jsxs21(Sheet.Frame, { children: [
|
|
1732
|
+
(title || showClose) && /* @__PURE__ */ jsxs21(XStack16, { paddingHorizontal: "$4", paddingTop: "$3", paddingBottom: "$2", alignItems: "center", justifyContent: "space-between", children: [
|
|
1733
|
+
/* @__PURE__ */ jsx28(SizableText24, { size: "$6", fontWeight: "600", flexShrink: 1, children: title }),
|
|
1734
|
+
showClose && /* @__PURE__ */ jsx28(
|
|
1542
1735
|
XStack16,
|
|
1543
1736
|
{
|
|
1544
1737
|
width: 28,
|
|
@@ -1549,11 +1742,11 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
|
|
|
1549
1742
|
justifyContent: "center",
|
|
1550
1743
|
pressStyle: { opacity: 0.7 },
|
|
1551
1744
|
onPress: () => onOpenChange(false),
|
|
1552
|
-
children: /* @__PURE__ */
|
|
1745
|
+
children: /* @__PURE__ */ jsx28(SizableText24, { size: "$3", color: "$color10", fontWeight: "600", children: "\u2715" })
|
|
1553
1746
|
}
|
|
1554
1747
|
)
|
|
1555
1748
|
] }),
|
|
1556
|
-
/* @__PURE__ */
|
|
1749
|
+
/* @__PURE__ */ jsx28(ScrollView3, { contentContainerStyle: { paddingBottom: 40 }, children: /* @__PURE__ */ jsx28(YStack21, { padding: "$4", children }) })
|
|
1557
1750
|
] })
|
|
1558
1751
|
]
|
|
1559
1752
|
}
|
|
@@ -1563,36 +1756,13 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
|
|
|
1563
1756
|
// src/patterns/LoginScreen.tsx
|
|
1564
1757
|
import { useState as useState7 } from "react";
|
|
1565
1758
|
import { Button as Button6, Circle as Circle6, SizableText as SizableText25, Spinner, XStack as XStack17, YStack as YStack22 } from "tamagui";
|
|
1566
|
-
import { Fragment as Fragment2, jsx as
|
|
1567
|
-
function GoogleIcon({ size = 20 }) {
|
|
1568
|
-
return /* @__PURE__ */ jsx28(XStack17, { width: size, height: size, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx28(SizableText25, { fontSize: size, lineHeight: size, fontWeight: "700", color: "#4285F4", children: "G" }) });
|
|
1569
|
-
}
|
|
1570
|
-
function AppleIcon({ size = 20 }) {
|
|
1571
|
-
return /* @__PURE__ */ jsx28(XStack17, { width: size, height: size, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx28(SizableText25, { fontSize: size * 0.85, lineHeight: size, color: "$color1", children: "\uF8FF" }) });
|
|
1572
|
-
}
|
|
1573
|
-
function GitHubIcon({ size = 20 }) {
|
|
1574
|
-
return /* @__PURE__ */ jsx28(Circle6, { size, backgroundColor: "$color1", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx28(SizableText25, { fontSize: size * 0.6, lineHeight: size, fontWeight: "900", color: "$color12", textAlign: "center", children: "GH" }) });
|
|
1575
|
-
}
|
|
1576
|
-
function MicrosoftIcon({ size = 20 }) {
|
|
1577
|
-
const half = Math.floor(size * 0.4);
|
|
1578
|
-
const gap = 2;
|
|
1579
|
-
return /* @__PURE__ */ jsxs21(YStack22, { width: size, height: size, alignItems: "center", justifyContent: "center", children: [
|
|
1580
|
-
/* @__PURE__ */ jsxs21(XStack17, { gap, children: [
|
|
1581
|
-
/* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#F25022" }),
|
|
1582
|
-
/* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#7FBA00" })
|
|
1583
|
-
] }),
|
|
1584
|
-
/* @__PURE__ */ jsxs21(XStack17, { gap, children: [
|
|
1585
|
-
/* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#00A4EF" }),
|
|
1586
|
-
/* @__PURE__ */ jsx28(YStack22, { width: half, height: half, backgroundColor: "#FFB900" })
|
|
1587
|
-
] })
|
|
1588
|
-
] });
|
|
1589
|
-
}
|
|
1759
|
+
import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1590
1760
|
var BRAND_ICON_MAP = {
|
|
1591
|
-
google:
|
|
1592
|
-
apple:
|
|
1593
|
-
github:
|
|
1594
|
-
microsoft:
|
|
1595
|
-
custom: ({ size = 20 }) => /* @__PURE__ */
|
|
1761
|
+
google: ({ size }) => /* @__PURE__ */ jsx29(GoogleLogo, { size }),
|
|
1762
|
+
apple: ({ size, color }) => /* @__PURE__ */ jsx29(AppleLogo, { size, color }),
|
|
1763
|
+
github: ({ size, color }) => /* @__PURE__ */ jsx29(GitHubLogo, { size, color }),
|
|
1764
|
+
microsoft: ({ size }) => /* @__PURE__ */ jsx29(MicrosoftLogo, { size }),
|
|
1765
|
+
custom: ({ size = 20 }) => /* @__PURE__ */ jsx29(Circle6, { size, backgroundColor: "$color4", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx29(SizableText25, { fontSize: size * 0.6, color: "$color10", children: "\u2022" }) })
|
|
1596
1766
|
};
|
|
1597
1767
|
var BRAND_STYLES = {
|
|
1598
1768
|
google: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" },
|
|
@@ -1603,9 +1773,10 @@ var BRAND_STYLES = {
|
|
|
1603
1773
|
};
|
|
1604
1774
|
function ProviderBadge({ provider }) {
|
|
1605
1775
|
const brand = provider.brand ?? "custom";
|
|
1606
|
-
if (provider.icon) return /* @__PURE__ */
|
|
1607
|
-
const
|
|
1608
|
-
|
|
1776
|
+
if (provider.icon) return /* @__PURE__ */ jsx29(Fragment2, { children: provider.icon });
|
|
1777
|
+
const renderIcon = BRAND_ICON_MAP[brand];
|
|
1778
|
+
const iconColor = brand === "apple" || brand === "github" ? "#fff" : void 0;
|
|
1779
|
+
return renderIcon({ size: 20, color: iconColor });
|
|
1609
1780
|
}
|
|
1610
1781
|
function LoginScreen({
|
|
1611
1782
|
variant = "default",
|
|
@@ -1630,9 +1801,9 @@ function LoginScreen({
|
|
|
1630
1801
|
const [password, setPassword] = useState7("");
|
|
1631
1802
|
const isEditorial = variant === "editorial";
|
|
1632
1803
|
const isCenteredCard = variant === "centered-card";
|
|
1633
|
-
return /* @__PURE__ */
|
|
1634
|
-
backgroundSlot ? /* @__PURE__ */
|
|
1635
|
-
/* @__PURE__ */
|
|
1804
|
+
return /* @__PURE__ */ jsxs22(YStack22, { flex: 1, padding: "$4", gap: "$5", backgroundColor: "$background", justifyContent: "center", children: [
|
|
1805
|
+
backgroundSlot ? /* @__PURE__ */ jsx29(YStack22, { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, children: backgroundSlot }) : null,
|
|
1806
|
+
/* @__PURE__ */ jsxs22(
|
|
1636
1807
|
YStack22,
|
|
1637
1808
|
{
|
|
1638
1809
|
gap: "$5",
|
|
@@ -1642,13 +1813,13 @@ function LoginScreen({
|
|
|
1642
1813
|
borderWidth: isCenteredCard ? 1 : 0,
|
|
1643
1814
|
borderColor: isCenteredCard ? "$color4" : void 0,
|
|
1644
1815
|
children: [
|
|
1645
|
-
/* @__PURE__ */
|
|
1646
|
-
logo && /* @__PURE__ */
|
|
1647
|
-
hero ? /* @__PURE__ */
|
|
1648
|
-
/* @__PURE__ */
|
|
1649
|
-
/* @__PURE__ */
|
|
1816
|
+
/* @__PURE__ */ jsxs22(YStack22, { alignItems: "center", gap: "$2", children: [
|
|
1817
|
+
logo && /* @__PURE__ */ jsx29(YStack22, { paddingBottom: "$3", children: logo }),
|
|
1818
|
+
hero ? /* @__PURE__ */ jsx29(YStack22, { paddingBottom: "$2", children: hero }) : null,
|
|
1819
|
+
/* @__PURE__ */ jsx29(SizableText25, { size: isEditorial ? "$10" : "$9", fontWeight: "700", textAlign: "center", fontFamily: isEditorial ? "$heading" : void 0, children: title }),
|
|
1820
|
+
/* @__PURE__ */ jsx29(SizableText25, { size: "$4", color: "$color10", textAlign: "center", children: subtitle })
|
|
1650
1821
|
] }),
|
|
1651
|
-
providers.length > 0 && /* @__PURE__ */
|
|
1822
|
+
providers.length > 0 && /* @__PURE__ */ jsx29(YStack22, { gap: "$2.5", children: providers.map((p) => /* @__PURE__ */ jsx29(
|
|
1652
1823
|
Button6,
|
|
1653
1824
|
{
|
|
1654
1825
|
size: "$5",
|
|
@@ -1660,25 +1831,25 @@ function LoginScreen({
|
|
|
1660
1831
|
onPress: () => onProviderPress?.(p.id),
|
|
1661
1832
|
hoverStyle: { backgroundColor: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].backgroundColor : "$color2" },
|
|
1662
1833
|
pressStyle: { backgroundColor: "$color3" },
|
|
1663
|
-
children: /* @__PURE__ */
|
|
1664
|
-
/* @__PURE__ */
|
|
1665
|
-
/* @__PURE__ */
|
|
1666
|
-
/* @__PURE__ */
|
|
1667
|
-
/* @__PURE__ */
|
|
1668
|
-
p.description ? /* @__PURE__ */
|
|
1834
|
+
children: /* @__PURE__ */ jsxs22(XStack17, { alignItems: "center", justifyContent: "space-between", width: "100%", gap: "$2", children: [
|
|
1835
|
+
/* @__PURE__ */ jsxs22(XStack17, { alignItems: "center", gap: "$2.5", children: [
|
|
1836
|
+
/* @__PURE__ */ jsx29(ProviderBadge, { provider: p }),
|
|
1837
|
+
/* @__PURE__ */ jsxs22(YStack22, { alignItems: "flex-start", children: [
|
|
1838
|
+
/* @__PURE__ */ jsx29(SizableText25, { size: "$4", fontWeight: "600", color: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].textColor : void 0, children: p.name }),
|
|
1839
|
+
p.description ? /* @__PURE__ */ jsx29(SizableText25, { size: "$2", color: "$color10", children: p.description }) : null
|
|
1669
1840
|
] })
|
|
1670
1841
|
] }),
|
|
1671
|
-
/* @__PURE__ */
|
|
1842
|
+
/* @__PURE__ */ jsx29(SizableText25, { size: "$4", color: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].textColor : "$color9", children: "\u2192" })
|
|
1672
1843
|
] })
|
|
1673
1844
|
},
|
|
1674
1845
|
p.id
|
|
1675
1846
|
)) }),
|
|
1676
|
-
showEmailForm && providers.length > 0 && /* @__PURE__ */
|
|
1677
|
-
showEmailForm && /* @__PURE__ */
|
|
1678
|
-
/* @__PURE__ */
|
|
1679
|
-
/* @__PURE__ */
|
|
1680
|
-
onForgotPassword && /* @__PURE__ */
|
|
1681
|
-
/* @__PURE__ */
|
|
1847
|
+
showEmailForm && providers.length > 0 && /* @__PURE__ */ jsx29(Divider, { label: "or" }),
|
|
1848
|
+
showEmailForm && /* @__PURE__ */ jsxs22(YStack22, { gap: "$3", children: [
|
|
1849
|
+
/* @__PURE__ */ jsx29(Input, { label: "Email", placeholder: "your@email.com", value: email, onChangeText: setEmail, keyboardType: "email-address", autoCapitalize: "none" }),
|
|
1850
|
+
/* @__PURE__ */ jsx29(Input, { label: "Password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: password, onChangeText: setPassword, secureTextEntry: true }),
|
|
1851
|
+
onForgotPassword && /* @__PURE__ */ jsx29(XStack17, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx29(SizableText25, { size: "$3", color: "$color9", onPress: onForgotPassword, children: "Forgot password?" }) }),
|
|
1852
|
+
/* @__PURE__ */ jsx29(
|
|
1682
1853
|
Button6,
|
|
1683
1854
|
{
|
|
1684
1855
|
size: "$5",
|
|
@@ -1689,18 +1860,18 @@ function LoginScreen({
|
|
|
1689
1860
|
onPress: () => onEmailSubmit?.(email, password),
|
|
1690
1861
|
hoverStyle: { backgroundColor: "$color10" },
|
|
1691
1862
|
pressStyle: { backgroundColor: "$color8" },
|
|
1692
|
-
icon: loading ? /* @__PURE__ */
|
|
1863
|
+
icon: loading ? /* @__PURE__ */ jsx29(Spinner, { size: "small", color: "$color1" }) : void 0,
|
|
1693
1864
|
children: "Sign In"
|
|
1694
1865
|
}
|
|
1695
1866
|
),
|
|
1696
|
-
onCreateAccount && /* @__PURE__ */
|
|
1867
|
+
onCreateAccount && /* @__PURE__ */ jsx29(Button6, { size: "$3", chromeless: true, onPress: onCreateAccount, children: /* @__PURE__ */ jsx29(SizableText25, { size: "$3", color: "$color9", children: "Create Account" }) })
|
|
1697
1868
|
] }),
|
|
1698
|
-
(onTerms || onPrivacy) && /* @__PURE__ */
|
|
1869
|
+
(onTerms || onPrivacy) && /* @__PURE__ */ jsx29(YStack22, { paddingTop: "$2", alignItems: "center", children: /* @__PURE__ */ jsxs22(SizableText25, { size: "$2", color: "$color8", textAlign: "center", children: [
|
|
1699
1870
|
"By continuing you agree to our",
|
|
1700
1871
|
" ",
|
|
1701
|
-
onTerms && /* @__PURE__ */
|
|
1872
|
+
onTerms && /* @__PURE__ */ jsx29(SizableText25, { size: "$2", color: "$color9", onPress: onTerms, children: "Terms of Service" }),
|
|
1702
1873
|
onTerms && onPrivacy && " & ",
|
|
1703
|
-
onPrivacy && /* @__PURE__ */
|
|
1874
|
+
onPrivacy && /* @__PURE__ */ jsx29(SizableText25, { size: "$2", color: "$color9", onPress: onPrivacy, children: "Privacy Policy" })
|
|
1704
1875
|
] }) }),
|
|
1705
1876
|
footerSlot
|
|
1706
1877
|
]
|
|
@@ -1711,11 +1882,11 @@ function LoginScreen({
|
|
|
1711
1882
|
|
|
1712
1883
|
// src/patterns/TabBar.tsx
|
|
1713
1884
|
import { SizableText as SizableText26, XStack as XStack18, YStack as YStack23 } from "tamagui";
|
|
1714
|
-
import { jsx as
|
|
1885
|
+
import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
1715
1886
|
function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
1716
|
-
return /* @__PURE__ */
|
|
1887
|
+
return /* @__PURE__ */ jsx30(XStack18, { height: 56, borderTopWidth: 1, borderTopColor: "$borderColor", backgroundColor: "$background", paddingBottom: "$2", children: tabs.map((tab) => {
|
|
1717
1888
|
const active = tab.id === activeTab;
|
|
1718
|
-
return /* @__PURE__ */
|
|
1889
|
+
return /* @__PURE__ */ jsxs23(
|
|
1719
1890
|
YStack23,
|
|
1720
1891
|
{
|
|
1721
1892
|
flex: 1,
|
|
@@ -1725,8 +1896,8 @@ function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
|
1725
1896
|
pressStyle: { opacity: 0.6 },
|
|
1726
1897
|
onPress: () => onTabPress(tab.id),
|
|
1727
1898
|
children: [
|
|
1728
|
-
tab.icon && /* @__PURE__ */
|
|
1729
|
-
showLabels && /* @__PURE__ */
|
|
1899
|
+
tab.icon && /* @__PURE__ */ jsx30(SizableText26, { size: "$5", color: active ? "$color9" : "$color8", children: tab.icon }),
|
|
1900
|
+
showLabels && /* @__PURE__ */ jsx30(SizableText26, { size: "$1", color: active ? "$color9" : "$color8", fontWeight: active ? "600" : "400", children: tab.label })
|
|
1730
1901
|
]
|
|
1731
1902
|
},
|
|
1732
1903
|
tab.id
|
|
@@ -1736,11 +1907,11 @@ function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
|
1736
1907
|
|
|
1737
1908
|
// src/patterns/SearchBar.tsx
|
|
1738
1909
|
import { Input as Input2, SizableText as SizableText27, XStack as XStack19 } from "tamagui";
|
|
1739
|
-
import { jsx as
|
|
1910
|
+
import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
1740
1911
|
function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter, onCancel, autoFocus }) {
|
|
1741
|
-
return /* @__PURE__ */
|
|
1742
|
-
/* @__PURE__ */
|
|
1743
|
-
/* @__PURE__ */
|
|
1912
|
+
return /* @__PURE__ */ jsxs24(XStack19, { height: 44, borderRadius: "$10", backgroundColor: "$color2", alignItems: "center", paddingHorizontal: "$3", gap: "$2", children: [
|
|
1913
|
+
/* @__PURE__ */ jsx31(SizableText27, { size: "$4", color: "$color8", children: "\u2315" }),
|
|
1914
|
+
/* @__PURE__ */ jsx31(
|
|
1744
1915
|
Input2,
|
|
1745
1916
|
{
|
|
1746
1917
|
flex: 1,
|
|
@@ -1754,14 +1925,14 @@ function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter
|
|
|
1754
1925
|
autoFocus
|
|
1755
1926
|
}
|
|
1756
1927
|
),
|
|
1757
|
-
onFilter && /* @__PURE__ */
|
|
1758
|
-
onCancel && /* @__PURE__ */
|
|
1928
|
+
onFilter && /* @__PURE__ */ jsx31(SizableText27, { size: "$4", color: "$color9", pressStyle: { opacity: 0.6 }, onPress: onFilter, children: "\u2ACF" }),
|
|
1929
|
+
onCancel && /* @__PURE__ */ jsx31(SizableText27, { size: "$3", color: "$color9", pressStyle: { opacity: 0.6 }, onPress: onCancel, children: "Cancel" })
|
|
1759
1930
|
] });
|
|
1760
1931
|
}
|
|
1761
1932
|
|
|
1762
1933
|
// src/patterns/FloatingActionButton.tsx
|
|
1763
1934
|
import { SizableText as SizableText28, XStack as XStack20 } from "tamagui";
|
|
1764
|
-
import { jsx as
|
|
1935
|
+
import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
1765
1936
|
var sizes = { sm: 44, md: 56, lg: 68 };
|
|
1766
1937
|
var positionStyles = {
|
|
1767
1938
|
"bottom-right": { right: 20 },
|
|
@@ -1770,7 +1941,7 @@ var positionStyles = {
|
|
|
1770
1941
|
};
|
|
1771
1942
|
function FloatingActionButton({ icon, label, onPress, position = "bottom-right", size = "md" }) {
|
|
1772
1943
|
const dim = sizes[size];
|
|
1773
|
-
return /* @__PURE__ */
|
|
1944
|
+
return /* @__PURE__ */ jsxs25(
|
|
1774
1945
|
XStack20,
|
|
1775
1946
|
{
|
|
1776
1947
|
position: "absolute",
|
|
@@ -1788,8 +1959,8 @@ function FloatingActionButton({ icon, label, onPress, position = "bottom-right",
|
|
|
1788
1959
|
pressStyle: { scale: 0.95, opacity: 0.9 },
|
|
1789
1960
|
onPress,
|
|
1790
1961
|
children: [
|
|
1791
|
-
icon && /* @__PURE__ */
|
|
1792
|
-
label && /* @__PURE__ */
|
|
1962
|
+
icon && /* @__PURE__ */ jsx32(SizableText28, { color: "$color1", children: icon }),
|
|
1963
|
+
label && /* @__PURE__ */ jsx32(SizableText28, { color: "$color1", size: "$4", fontWeight: "600", children: label })
|
|
1793
1964
|
]
|
|
1794
1965
|
}
|
|
1795
1966
|
);
|
|
@@ -1797,9 +1968,9 @@ function FloatingActionButton({ icon, label, onPress, position = "bottom-right",
|
|
|
1797
1968
|
|
|
1798
1969
|
// src/patterns/ActionSheet.tsx
|
|
1799
1970
|
import { Sheet as Sheet2, SizableText as SizableText29, XStack as XStack21, YStack as YStack24 } from "tamagui";
|
|
1800
|
-
import { jsx as
|
|
1971
|
+
import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
1801
1972
|
function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel = "Cancel", zIndex = 1e5 }) {
|
|
1802
|
-
return /* @__PURE__ */
|
|
1973
|
+
return /* @__PURE__ */ jsxs26(
|
|
1803
1974
|
Sheet2,
|
|
1804
1975
|
{
|
|
1805
1976
|
modal: true,
|
|
@@ -1811,11 +1982,11 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1811
1982
|
zIndex,
|
|
1812
1983
|
animation: "medium",
|
|
1813
1984
|
children: [
|
|
1814
|
-
/* @__PURE__ */
|
|
1815
|
-
/* @__PURE__ */
|
|
1816
|
-
/* @__PURE__ */
|
|
1817
|
-
title && /* @__PURE__ */
|
|
1818
|
-
/* @__PURE__ */
|
|
1985
|
+
/* @__PURE__ */ jsx33(Sheet2.Overlay, { animation: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }),
|
|
1986
|
+
/* @__PURE__ */ jsx33(Sheet2.Handle, {}),
|
|
1987
|
+
/* @__PURE__ */ jsxs26(Sheet2.Frame, { children: [
|
|
1988
|
+
title && /* @__PURE__ */ jsx33(SizableText29, { size: "$3", color: "$color8", textAlign: "center", paddingTop: "$3", paddingBottom: "$1", children: title }),
|
|
1989
|
+
/* @__PURE__ */ jsx33(YStack24, { paddingHorizontal: "$3", paddingTop: "$2", children: items.map((item) => /* @__PURE__ */ jsxs26(
|
|
1819
1990
|
XStack21,
|
|
1820
1991
|
{
|
|
1821
1992
|
height: 52,
|
|
@@ -1829,8 +2000,8 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1829
2000
|
onOpenChange(false);
|
|
1830
2001
|
},
|
|
1831
2002
|
children: [
|
|
1832
|
-
item.icon && /* @__PURE__ */
|
|
1833
|
-
/* @__PURE__ */
|
|
2003
|
+
item.icon && /* @__PURE__ */ jsx33(SizableText29, { size: "$5", children: item.icon }),
|
|
2004
|
+
/* @__PURE__ */ jsx33(
|
|
1834
2005
|
SizableText29,
|
|
1835
2006
|
{
|
|
1836
2007
|
size: "$5",
|
|
@@ -1844,7 +2015,7 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1844
2015
|
},
|
|
1845
2016
|
item.id
|
|
1846
2017
|
)) }),
|
|
1847
|
-
/* @__PURE__ */
|
|
2018
|
+
/* @__PURE__ */ jsx33(YStack24, { paddingHorizontal: "$3", paddingVertical: "$3", borderTopWidth: 1, borderTopColor: "$borderColor", marginTop: "$2", children: /* @__PURE__ */ jsx33(
|
|
1848
2019
|
XStack21,
|
|
1849
2020
|
{
|
|
1850
2021
|
height: 48,
|
|
@@ -1853,7 +2024,7 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1853
2024
|
borderRadius: "$4",
|
|
1854
2025
|
pressStyle: { backgroundColor: "$color3" },
|
|
1855
2026
|
onPress: () => onOpenChange(false),
|
|
1856
|
-
children: /* @__PURE__ */
|
|
2027
|
+
children: /* @__PURE__ */ jsx33(SizableText29, { size: "$5", fontWeight: "600", color: "$color9", children: cancelLabel })
|
|
1857
2028
|
}
|
|
1858
2029
|
) })
|
|
1859
2030
|
] })
|
|
@@ -1864,18 +2035,18 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1864
2035
|
|
|
1865
2036
|
// src/patterns/Skeleton.tsx
|
|
1866
2037
|
import { YStack as YStack25 } from "tamagui";
|
|
1867
|
-
import { jsx as
|
|
2038
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
1868
2039
|
function Skeleton({ width, height, borderRadius, variant = "rectangular" }) {
|
|
1869
2040
|
const size = variant === "circular" ? height ?? 40 : height;
|
|
1870
2041
|
const w = variant === "text" ? width ?? "100%" : width;
|
|
1871
2042
|
const h = variant === "text" ? height ?? 16 : size;
|
|
1872
2043
|
const r = variant === "circular" ? 9999 : borderRadius ?? 8;
|
|
1873
|
-
return /* @__PURE__ */
|
|
2044
|
+
return /* @__PURE__ */ jsx34(YStack25, { width: w, height: h, borderRadius: r, backgroundColor: "$color3", opacity: 0.6, animation: "slow", enterStyle: { opacity: 0.3 }, exitStyle: { opacity: 0.3 } });
|
|
1874
2045
|
}
|
|
1875
2046
|
|
|
1876
2047
|
// src/patterns/NotificationBanner.tsx
|
|
1877
2048
|
import { SizableText as SizableText30, XStack as XStack22, YStack as YStack26 } from "tamagui";
|
|
1878
|
-
import { jsx as
|
|
2049
|
+
import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
1879
2050
|
var variantColors = {
|
|
1880
2051
|
info: { bg: "$blue3", text: "$blue11" },
|
|
1881
2052
|
success: { bg: "$green3", text: "$green11" },
|
|
@@ -1884,7 +2055,7 @@ var variantColors = {
|
|
|
1884
2055
|
};
|
|
1885
2056
|
function NotificationBanner({ title, message, variant = "info", onPress, onDismiss, icon }) {
|
|
1886
2057
|
const colors = variantColors[variant];
|
|
1887
|
-
return /* @__PURE__ */
|
|
2058
|
+
return /* @__PURE__ */ jsxs27(
|
|
1888
2059
|
XStack22,
|
|
1889
2060
|
{
|
|
1890
2061
|
backgroundColor: colors.bg,
|
|
@@ -1895,12 +2066,12 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
|
|
|
1895
2066
|
onPress,
|
|
1896
2067
|
pressStyle: onPress ? { opacity: 0.8 } : void 0,
|
|
1897
2068
|
children: [
|
|
1898
|
-
icon && /* @__PURE__ */
|
|
1899
|
-
/* @__PURE__ */
|
|
1900
|
-
/* @__PURE__ */
|
|
1901
|
-
message && /* @__PURE__ */
|
|
2069
|
+
icon && /* @__PURE__ */ jsx35(YStack26, { paddingTop: "$0.5", children: icon }),
|
|
2070
|
+
/* @__PURE__ */ jsxs27(YStack26, { flex: 1, gap: "$1", children: [
|
|
2071
|
+
/* @__PURE__ */ jsx35(SizableText30, { size: "$4", fontWeight: "600", color: colors.text, children: title }),
|
|
2072
|
+
message && /* @__PURE__ */ jsx35(SizableText30, { size: "$3", color: colors.text, opacity: 0.8, children: message })
|
|
1902
2073
|
] }),
|
|
1903
|
-
onDismiss && /* @__PURE__ */
|
|
2074
|
+
onDismiss && /* @__PURE__ */ jsx35(SizableText30, { size: "$3", color: colors.text, opacity: 0.6, onPress: onDismiss, padding: "$1", children: "\u2715" })
|
|
1904
2075
|
]
|
|
1905
2076
|
}
|
|
1906
2077
|
);
|
|
@@ -1908,35 +2079,35 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
|
|
|
1908
2079
|
|
|
1909
2080
|
// src/patterns/ProgressSteps.tsx
|
|
1910
2081
|
import { Circle as Circle7, SizableText as SizableText31, XStack as XStack23, YStack as YStack27 } from "tamagui";
|
|
1911
|
-
import { jsx as
|
|
2082
|
+
import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
1912
2083
|
function ProgressSteps({ steps, currentStep, variant = "dots" }) {
|
|
1913
2084
|
if (variant === "bar") {
|
|
1914
2085
|
const progress = steps.length > 1 ? currentStep / (steps.length - 1) * 100 : 100;
|
|
1915
|
-
return /* @__PURE__ */
|
|
1916
|
-
/* @__PURE__ */
|
|
1917
|
-
/* @__PURE__ */
|
|
2086
|
+
return /* @__PURE__ */ jsxs28(YStack27, { gap: "$2", children: [
|
|
2087
|
+
/* @__PURE__ */ jsx36(YStack27, { height: 4, backgroundColor: "$color4", borderRadius: 2, overflow: "hidden", children: /* @__PURE__ */ jsx36(YStack27, { height: 4, width: `${progress}%`, backgroundColor: "$color9", borderRadius: 2, animation: "quick" }) }),
|
|
2088
|
+
/* @__PURE__ */ jsx36(XStack23, { justifyContent: "space-between", children: steps.map((label, i) => /* @__PURE__ */ jsx36(SizableText31, { size: "$2", color: i <= currentStep ? "$color9" : "$color8", children: label }, i)) })
|
|
1918
2089
|
] });
|
|
1919
2090
|
}
|
|
1920
|
-
return /* @__PURE__ */
|
|
1921
|
-
/* @__PURE__ */
|
|
1922
|
-
/* @__PURE__ */
|
|
1923
|
-
/* @__PURE__ */
|
|
2091
|
+
return /* @__PURE__ */ jsx36(XStack23, { alignItems: "center", justifyContent: "center", gap: "$0", children: steps.map((label, i) => /* @__PURE__ */ jsxs28(XStack23, { alignItems: "center", gap: "$0", children: [
|
|
2092
|
+
/* @__PURE__ */ jsxs28(YStack27, { alignItems: "center", gap: "$1.5", children: [
|
|
2093
|
+
/* @__PURE__ */ jsx36(Circle7, { size: variant === "numbered" ? 28 : 10, backgroundColor: i <= currentStep ? "$color9" : "$color4", animation: "quick", children: variant === "numbered" && /* @__PURE__ */ jsx36(SizableText31, { size: "$2", fontWeight: "600", color: i <= currentStep ? "$color1" : "$color8", children: i + 1 }) }),
|
|
2094
|
+
/* @__PURE__ */ jsx36(SizableText31, { size: "$1", color: i <= currentStep ? "$color11" : "$color8", numberOfLines: 1, children: label })
|
|
1924
2095
|
] }),
|
|
1925
|
-
i < steps.length - 1 && /* @__PURE__ */
|
|
2096
|
+
i < steps.length - 1 && /* @__PURE__ */ jsx36(YStack27, { height: 2, width: 32, backgroundColor: i < currentStep ? "$color9" : "$color4", marginBottom: "$4" })
|
|
1926
2097
|
] }, i)) });
|
|
1927
2098
|
}
|
|
1928
2099
|
|
|
1929
2100
|
// src/patterns/SwipeableRow.tsx
|
|
1930
2101
|
import { useState as useState8 } from "react";
|
|
1931
2102
|
import { Button as Button7, SizableText as SizableText32, XStack as XStack24, YStack as YStack28 } from "tamagui";
|
|
1932
|
-
import { Fragment as Fragment3, jsx as
|
|
2103
|
+
import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
1933
2104
|
function SwipeableRow({ children, leftActions, rightActions }) {
|
|
1934
2105
|
const [showActions, setShowActions] = useState8(false);
|
|
1935
2106
|
const actions = [...leftActions ?? [], ...rightActions ?? []];
|
|
1936
|
-
if (actions.length === 0) return /* @__PURE__ */
|
|
1937
|
-
return /* @__PURE__ */
|
|
1938
|
-
/* @__PURE__ */
|
|
1939
|
-
showActions && /* @__PURE__ */
|
|
2107
|
+
if (actions.length === 0) return /* @__PURE__ */ jsx37(Fragment3, { children });
|
|
2108
|
+
return /* @__PURE__ */ jsxs29(YStack28, { children: [
|
|
2109
|
+
/* @__PURE__ */ jsx37(YStack28, { onLongPress: () => setShowActions((v) => !v), pressStyle: { opacity: 0.9 }, children }),
|
|
2110
|
+
showActions && /* @__PURE__ */ jsx37(XStack24, { gap: "$2", padding: "$2", animation: "quick", enterStyle: { opacity: 0, scale: 0.95 }, children: actions.map((action) => /* @__PURE__ */ jsx37(
|
|
1940
2111
|
Button7,
|
|
1941
2112
|
{
|
|
1942
2113
|
flex: 1,
|
|
@@ -1947,7 +2118,7 @@ function SwipeableRow({ children, leftActions, rightActions }) {
|
|
|
1947
2118
|
action.onPress();
|
|
1948
2119
|
setShowActions(false);
|
|
1949
2120
|
},
|
|
1950
|
-
children: /* @__PURE__ */
|
|
2121
|
+
children: /* @__PURE__ */ jsx37(SizableText32, { size: "$2", fontWeight: "600", color: "white", children: action.label })
|
|
1951
2122
|
},
|
|
1952
2123
|
action.id
|
|
1953
2124
|
)) })
|
|
@@ -1957,9 +2128,9 @@ function SwipeableRow({ children, leftActions, rightActions }) {
|
|
|
1957
2128
|
// src/patterns/MediaCard.tsx
|
|
1958
2129
|
import { Image as Image5, SizableText as SizableText33, XStack as XStack25, YStack as YStack29 } from "tamagui";
|
|
1959
2130
|
import { LinearGradient } from "tamagui/linear-gradient";
|
|
1960
|
-
import { jsx as
|
|
2131
|
+
import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
1961
2132
|
function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio = 16 / 9, onPress, badge }) {
|
|
1962
|
-
return /* @__PURE__ */
|
|
2133
|
+
return /* @__PURE__ */ jsx38(
|
|
1963
2134
|
YStack29,
|
|
1964
2135
|
{
|
|
1965
2136
|
borderRadius: "$4",
|
|
@@ -1967,9 +2138,9 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
1967
2138
|
onPress,
|
|
1968
2139
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
1969
2140
|
animation: "quick",
|
|
1970
|
-
children: /* @__PURE__ */
|
|
1971
|
-
/* @__PURE__ */
|
|
1972
|
-
overlay === "gradient" && /* @__PURE__ */
|
|
2141
|
+
children: /* @__PURE__ */ jsxs30(YStack29, { aspectRatio, children: [
|
|
2142
|
+
/* @__PURE__ */ jsx38(Image5, { source: { uri: image }, width: "100%", height: "100%", objectFit: "cover" }),
|
|
2143
|
+
overlay === "gradient" && /* @__PURE__ */ jsx38(
|
|
1973
2144
|
LinearGradient,
|
|
1974
2145
|
{
|
|
1975
2146
|
colors: ["transparent", "rgba(0,0,0,0.7)"],
|
|
@@ -1982,8 +2153,8 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
1982
2153
|
height: "60%"
|
|
1983
2154
|
}
|
|
1984
2155
|
),
|
|
1985
|
-
overlay === "dark" && /* @__PURE__ */
|
|
1986
|
-
badge && /* @__PURE__ */
|
|
2156
|
+
overlay === "dark" && /* @__PURE__ */ jsx38(YStack29, { position: "absolute", fullscreen: true, backgroundColor: "rgba(0,0,0,0.4)" }),
|
|
2157
|
+
badge && /* @__PURE__ */ jsx38(
|
|
1987
2158
|
XStack25,
|
|
1988
2159
|
{
|
|
1989
2160
|
position: "absolute",
|
|
@@ -1993,12 +2164,12 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
1993
2164
|
paddingHorizontal: "$2",
|
|
1994
2165
|
paddingVertical: "$1",
|
|
1995
2166
|
borderRadius: "$2",
|
|
1996
|
-
children: /* @__PURE__ */
|
|
2167
|
+
children: /* @__PURE__ */ jsx38(SizableText33, { size: "$1", fontWeight: "600", color: "$color1", children: badge })
|
|
1997
2168
|
}
|
|
1998
2169
|
),
|
|
1999
|
-
/* @__PURE__ */
|
|
2000
|
-
/* @__PURE__ */
|
|
2001
|
-
subtitle && /* @__PURE__ */
|
|
2170
|
+
/* @__PURE__ */ jsxs30(YStack29, { position: "absolute", bottom: 0, left: 0, right: 0, padding: "$3", gap: "$1", children: [
|
|
2171
|
+
/* @__PURE__ */ jsx38(SizableText33, { size: "$5", fontWeight: "600", color: "white", children: title }),
|
|
2172
|
+
subtitle && /* @__PURE__ */ jsx38(SizableText33, { size: "$3", color: "rgba(255,255,255,0.8)", children: subtitle })
|
|
2002
2173
|
] })
|
|
2003
2174
|
] })
|
|
2004
2175
|
}
|
|
@@ -2009,13 +2180,13 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
2009
2180
|
import { Children as Children2, useState as useState9 } from "react";
|
|
2010
2181
|
import { Circle as Circle8, XStack as XStack26, YStack as YStack30 } from "tamagui";
|
|
2011
2182
|
import { ScrollView as ScrollView4 } from "react-native";
|
|
2012
|
-
import { jsx as
|
|
2183
|
+
import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
2013
2184
|
function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false }) {
|
|
2014
2185
|
const [activeIndex, setActiveIndex] = useState9(0);
|
|
2015
2186
|
const count = Children2.count(children);
|
|
2016
2187
|
const gapPx = gap === "$2" ? 8 : gap === "$3" ? 12 : 16;
|
|
2017
|
-
return /* @__PURE__ */
|
|
2018
|
-
/* @__PURE__ */
|
|
2188
|
+
return /* @__PURE__ */ jsxs31(YStack30, { gap: "$3", children: [
|
|
2189
|
+
/* @__PURE__ */ jsx39(
|
|
2019
2190
|
ScrollView4,
|
|
2020
2191
|
{
|
|
2021
2192
|
horizontal: true,
|
|
@@ -2029,50 +2200,50 @@ function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false
|
|
|
2029
2200
|
children
|
|
2030
2201
|
}
|
|
2031
2202
|
),
|
|
2032
|
-
showIndicators && count > 1 && /* @__PURE__ */
|
|
2203
|
+
showIndicators && count > 1 && /* @__PURE__ */ jsx39(XStack26, { justifyContent: "center", gap: "$1.5", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx39(Circle8, { size: 6, backgroundColor: i === activeIndex ? "$color9" : "$color4", animation: "quick" }, i)) })
|
|
2033
2204
|
] });
|
|
2034
2205
|
}
|
|
2035
2206
|
|
|
2036
2207
|
// src/patterns/PullToRefresh.tsx
|
|
2037
2208
|
import { YStack as YStack31 } from "tamagui";
|
|
2038
2209
|
import { RefreshControl, ScrollView as ScrollView5 } from "react-native";
|
|
2039
|
-
import { jsx as
|
|
2210
|
+
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
2040
2211
|
function PullToRefresh({ children, onRefresh, refreshing = false }) {
|
|
2041
|
-
return /* @__PURE__ */
|
|
2212
|
+
return /* @__PURE__ */ jsx40(
|
|
2042
2213
|
ScrollView5,
|
|
2043
2214
|
{
|
|
2044
2215
|
contentContainerStyle: { flexGrow: 1 },
|
|
2045
|
-
refreshControl: /* @__PURE__ */
|
|
2046
|
-
children: /* @__PURE__ */
|
|
2216
|
+
refreshControl: /* @__PURE__ */ jsx40(RefreshControl, { refreshing, onRefresh }),
|
|
2217
|
+
children: /* @__PURE__ */ jsx40(YStack31, { flex: 1, children })
|
|
2047
2218
|
}
|
|
2048
2219
|
);
|
|
2049
2220
|
}
|
|
2050
2221
|
|
|
2051
2222
|
// src/patterns/ProductCard.tsx
|
|
2052
2223
|
import { Button as Button8, Image as Image6, SizableText as SizableText34, XStack as XStack27, YStack as YStack32 } from "tamagui";
|
|
2053
|
-
import { jsx as
|
|
2224
|
+
import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
2054
2225
|
function Stars({ rating = 0 }) {
|
|
2055
|
-
return /* @__PURE__ */
|
|
2226
|
+
return /* @__PURE__ */ jsx41(XStack27, { gap: "$0.5", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx41(SizableText34, { size: "$2", color: i < Math.round(rating) ? "$yellow9" : "$color5", children: "\u2605" }, i)) });
|
|
2056
2227
|
}
|
|
2057
2228
|
function CardContent2({ title, price, originalPrice, rating, reviewCount, onAddToCart }) {
|
|
2058
|
-
return /* @__PURE__ */
|
|
2059
|
-
/* @__PURE__ */
|
|
2060
|
-
/* @__PURE__ */
|
|
2061
|
-
rating !== void 0 && /* @__PURE__ */
|
|
2062
|
-
/* @__PURE__ */
|
|
2063
|
-
reviewCount !== void 0 && /* @__PURE__ */
|
|
2229
|
+
return /* @__PURE__ */ jsxs32(YStack32, { flex: 1, gap: "$1.5", justifyContent: "space-between", children: [
|
|
2230
|
+
/* @__PURE__ */ jsxs32(YStack32, { gap: "$1", children: [
|
|
2231
|
+
/* @__PURE__ */ jsx41(SizableText34, { size: "$4", fontWeight: "600", numberOfLines: 2, children: title }),
|
|
2232
|
+
rating !== void 0 && /* @__PURE__ */ jsxs32(XStack27, { gap: "$1.5", alignItems: "center", children: [
|
|
2233
|
+
/* @__PURE__ */ jsx41(Stars, { rating }),
|
|
2234
|
+
reviewCount !== void 0 && /* @__PURE__ */ jsxs32(SizableText34, { size: "$2", color: "$color9", children: [
|
|
2064
2235
|
"(",
|
|
2065
2236
|
reviewCount,
|
|
2066
2237
|
")"
|
|
2067
2238
|
] })
|
|
2068
2239
|
] })
|
|
2069
2240
|
] }),
|
|
2070
|
-
/* @__PURE__ */
|
|
2071
|
-
/* @__PURE__ */
|
|
2072
|
-
/* @__PURE__ */
|
|
2073
|
-
originalPrice && /* @__PURE__ */
|
|
2241
|
+
/* @__PURE__ */ jsxs32(XStack27, { alignItems: "center", justifyContent: "space-between", children: [
|
|
2242
|
+
/* @__PURE__ */ jsxs32(XStack27, { gap: "$2", alignItems: "baseline", children: [
|
|
2243
|
+
/* @__PURE__ */ jsx41(SizableText34, { size: "$6", fontWeight: "700", children: price }),
|
|
2244
|
+
originalPrice && /* @__PURE__ */ jsx41(SizableText34, { size: "$3", color: "$color8", textDecorationLine: "line-through", children: originalPrice })
|
|
2074
2245
|
] }),
|
|
2075
|
-
onAddToCart && /* @__PURE__ */
|
|
2246
|
+
onAddToCart && /* @__PURE__ */ jsx41(
|
|
2076
2247
|
Button8,
|
|
2077
2248
|
{
|
|
2078
2249
|
size: "$3",
|
|
@@ -2094,7 +2265,7 @@ function CardContent2({ title, price, originalPrice, rating, reviewCount, onAddT
|
|
|
2094
2265
|
function ProductCard({ image, title, price, originalPrice, rating, reviewCount, badge, onPress, onAddToCart, variant = "vertical" }) {
|
|
2095
2266
|
const isHorizontal = variant === "horizontal";
|
|
2096
2267
|
const Wrapper = isHorizontal ? XStack27 : YStack32;
|
|
2097
|
-
return /* @__PURE__ */
|
|
2268
|
+
return /* @__PURE__ */ jsxs32(
|
|
2098
2269
|
Wrapper,
|
|
2099
2270
|
{
|
|
2100
2271
|
backgroundColor: "$color1",
|
|
@@ -2107,9 +2278,9 @@ function ProductCard({ image, title, price, originalPrice, rating, reviewCount,
|
|
|
2107
2278
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
2108
2279
|
...isHorizontal ? { height: 140 } : {},
|
|
2109
2280
|
children: [
|
|
2110
|
-
/* @__PURE__ */
|
|
2111
|
-
/* @__PURE__ */
|
|
2112
|
-
badge && /* @__PURE__ */
|
|
2281
|
+
/* @__PURE__ */ jsxs32(YStack32, { ...isHorizontal ? { width: 140 } : { aspectRatio: 4 / 3 }, position: "relative", children: [
|
|
2282
|
+
/* @__PURE__ */ jsx41(Image6, { source: { uri: image }, width: "100%", height: "100%", objectFit: "cover" }),
|
|
2283
|
+
badge && /* @__PURE__ */ jsx41(
|
|
2113
2284
|
XStack27,
|
|
2114
2285
|
{
|
|
2115
2286
|
position: "absolute",
|
|
@@ -2119,23 +2290,23 @@ function ProductCard({ image, title, price, originalPrice, rating, reviewCount,
|
|
|
2119
2290
|
paddingHorizontal: "$2",
|
|
2120
2291
|
paddingVertical: "$1",
|
|
2121
2292
|
borderRadius: "$10",
|
|
2122
|
-
children: /* @__PURE__ */
|
|
2293
|
+
children: /* @__PURE__ */ jsx41(SizableText34, { size: "$1", fontWeight: "700", color: "white", children: badge })
|
|
2123
2294
|
}
|
|
2124
2295
|
)
|
|
2125
2296
|
] }),
|
|
2126
|
-
/* @__PURE__ */
|
|
2297
|
+
/* @__PURE__ */ jsx41(YStack32, { flex: 1, padding: "$3", children: /* @__PURE__ */ jsx41(CardContent2, { ...{ title, price, originalPrice, rating, reviewCount, onAddToCart } }) })
|
|
2127
2298
|
]
|
|
2128
2299
|
}
|
|
2129
2300
|
);
|
|
2130
2301
|
}
|
|
2131
2302
|
|
|
2132
2303
|
// src/patterns/PricingTable.tsx
|
|
2133
|
-
import { Button as Button9,
|
|
2134
|
-
import { jsx as
|
|
2304
|
+
import { Button as Button9, Circle as Circle9, SizableText as SizableText35, XStack as XStack28, YStack as YStack33 } from "tamagui";
|
|
2305
|
+
import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
2135
2306
|
function BillingToggle({ annual, onToggle }) {
|
|
2136
|
-
return /* @__PURE__ */
|
|
2307
|
+
return /* @__PURE__ */ jsx42(XStack28, { alignSelf: "center", backgroundColor: "$color3", borderRadius: "$10", padding: "$1", gap: "$0.5", children: ["Monthly", "Annual"].map((label, i) => {
|
|
2137
2308
|
const active = i === 1 ? annual : !annual;
|
|
2138
|
-
return /* @__PURE__ */
|
|
2309
|
+
return /* @__PURE__ */ jsx42(
|
|
2139
2310
|
XStack28,
|
|
2140
2311
|
{
|
|
2141
2312
|
paddingHorizontal: "$4",
|
|
@@ -2145,96 +2316,86 @@ function BillingToggle({ annual, onToggle }) {
|
|
|
2145
2316
|
onPress: () => onToggle(i === 1),
|
|
2146
2317
|
pressStyle: { opacity: 0.8 },
|
|
2147
2318
|
animation: "quick",
|
|
2148
|
-
children: /* @__PURE__ */
|
|
2319
|
+
children: /* @__PURE__ */ jsx42(SizableText35, { size: "$3", fontWeight: "600", color: active ? "$color1" : "$color10", children: label })
|
|
2149
2320
|
},
|
|
2150
2321
|
label
|
|
2151
2322
|
);
|
|
2152
2323
|
}) });
|
|
2153
2324
|
}
|
|
2154
|
-
function
|
|
2155
|
-
return /* @__PURE__ */
|
|
2156
|
-
|
|
2325
|
+
function PlanRow2({ plan, selected, onSelect }) {
|
|
2326
|
+
return /* @__PURE__ */ jsxs33(
|
|
2327
|
+
XStack28,
|
|
2157
2328
|
{
|
|
2158
|
-
flex: 1,
|
|
2159
|
-
minWidth: 260,
|
|
2160
2329
|
padding: "$4",
|
|
2161
|
-
borderRadius: "$
|
|
2162
|
-
gap: "$3",
|
|
2330
|
+
borderRadius: "$6",
|
|
2163
2331
|
borderWidth: 2,
|
|
2164
|
-
borderColor: selected ? "$color9" :
|
|
2165
|
-
backgroundColor:
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
animation: "quick",
|
|
2332
|
+
borderColor: selected ? "$color9" : "$color4",
|
|
2333
|
+
backgroundColor: selected ? "$color2" : "$color1",
|
|
2334
|
+
alignItems: "center",
|
|
2335
|
+
gap: "$3",
|
|
2169
2336
|
onPress: onSelect,
|
|
2337
|
+
pressStyle: { scale: 0.98, opacity: 0.9 },
|
|
2338
|
+
animation: "quick",
|
|
2339
|
+
cursor: "pointer",
|
|
2340
|
+
position: "relative",
|
|
2170
2341
|
children: [
|
|
2171
|
-
plan.popular && /* @__PURE__ */
|
|
2172
|
-
|
|
2342
|
+
plan.popular && /* @__PURE__ */ jsx42(XStack28, { position: "absolute", top: -10, right: 12, backgroundColor: "$color9", paddingHorizontal: "$2.5", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ jsx42(SizableText35, { size: "$1", fontWeight: "700", color: "$color1", children: "BEST VALUE" }) }),
|
|
2343
|
+
/* @__PURE__ */ jsx42(
|
|
2344
|
+
Circle9,
|
|
2173
2345
|
{
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
backgroundColor: "$color9",
|
|
2178
|
-
|
|
2179
|
-
paddingVertical: "$1",
|
|
2180
|
-
borderRadius: "$10",
|
|
2181
|
-
children: /* @__PURE__ */ jsx41(SizableText35, { size: "$1", fontWeight: "700", color: "$color1", children: "POPULAR" })
|
|
2346
|
+
size: 22,
|
|
2347
|
+
borderWidth: 2,
|
|
2348
|
+
borderColor: selected ? "$color9" : "$color6",
|
|
2349
|
+
backgroundColor: selected ? "$color9" : "transparent",
|
|
2350
|
+
children: selected && /* @__PURE__ */ jsx42(Circle9, { size: 8, backgroundColor: "$color1" })
|
|
2182
2351
|
}
|
|
2183
2352
|
),
|
|
2184
|
-
/* @__PURE__ */
|
|
2185
|
-
/* @__PURE__ */
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
"/",
|
|
2191
|
-
plan.period
|
|
2192
|
-
] })
|
|
2193
|
-
] })
|
|
2353
|
+
/* @__PURE__ */ jsxs33(YStack33, { flex: 1, gap: "$0.5", children: [
|
|
2354
|
+
/* @__PURE__ */ jsxs33(XStack28, { alignItems: "center", gap: "$2", children: [
|
|
2355
|
+
/* @__PURE__ */ jsx42(SizableText35, { size: "$5", fontWeight: "700", children: plan.name }),
|
|
2356
|
+
plan.trial && /* @__PURE__ */ jsx42(XStack28, { backgroundColor: "$green3", paddingHorizontal: "$2", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ jsx42(SizableText35, { size: "$1", fontWeight: "700", color: "$green9", children: plan.trial }) })
|
|
2357
|
+
] }),
|
|
2358
|
+
plan.description && /* @__PURE__ */ jsx42(SizableText35, { size: "$2", color: "$color10", children: plan.description })
|
|
2194
2359
|
] }),
|
|
2195
|
-
/* @__PURE__ */
|
|
2196
|
-
/* @__PURE__ */ jsx41(SizableText35, { size: "$3", color: f.included ? "$green9" : "$color6", children: f.included ? "\u2713" : "\u2717" }),
|
|
2197
|
-
/* @__PURE__ */ jsx41(SizableText35, { size: "$3", color: f.included ? "$color11" : "$color8", flex: 1, children: f.label })
|
|
2198
|
-
] }, i)) }),
|
|
2199
|
-
/* @__PURE__ */ jsx41(
|
|
2200
|
-
Button9,
|
|
2201
|
-
{
|
|
2202
|
-
size: "$4",
|
|
2203
|
-
borderRadius: "$10",
|
|
2204
|
-
fontWeight: "700",
|
|
2205
|
-
animation: "quick",
|
|
2206
|
-
backgroundColor: selected || plan.popular ? "$color9" : "transparent",
|
|
2207
|
-
color: selected || plan.popular ? "$color1" : "$color11",
|
|
2208
|
-
borderWidth: selected || plan.popular ? 0 : 1,
|
|
2209
|
-
borderColor: "$color7",
|
|
2210
|
-
onPress: onSelect,
|
|
2211
|
-
pressStyle: { scale: 0.97, opacity: 0.9 },
|
|
2212
|
-
children: plan.cta ?? "Get Started"
|
|
2213
|
-
}
|
|
2214
|
-
)
|
|
2360
|
+
/* @__PURE__ */ jsx42(SizableText35, { size: "$5", fontWeight: "800", children: plan.price })
|
|
2215
2361
|
]
|
|
2216
2362
|
}
|
|
2217
2363
|
);
|
|
2218
2364
|
}
|
|
2219
|
-
function
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2365
|
+
function FeatureList({ features }) {
|
|
2366
|
+
return /* @__PURE__ */ jsx42(YStack33, { gap: "$2.5", paddingHorizontal: "$1", children: features.map((f, i) => /* @__PURE__ */ jsxs33(XStack28, { gap: "$2.5", alignItems: "center", children: [
|
|
2367
|
+
/* @__PURE__ */ jsx42(Circle9, { size: 20, backgroundColor: f.included ? "$green3" : "$color3", children: /* @__PURE__ */ jsx42(SizableText35, { size: "$1", fontWeight: "700", color: f.included ? "$green9" : "$color8", children: f.included ? "\u2713" : "\u2014" }) }),
|
|
2368
|
+
/* @__PURE__ */ jsx42(SizableText35, { size: "$3", color: f.included ? "$color11" : "$color8", flex: 1, children: f.label })
|
|
2369
|
+
] }, i)) });
|
|
2370
|
+
}
|
|
2371
|
+
function PricingTable({ plans, selectedPlan, onSelectPlan, annual = false, onToggleBilling, onContinue, continueLabel, reassurance }) {
|
|
2372
|
+
const selected = selectedPlan ?? plans.find((p) => p.popular)?.id ?? plans[0]?.id;
|
|
2373
|
+
const activePlan = plans.find((p) => p.id === selected);
|
|
2374
|
+
return /* @__PURE__ */ jsxs33(YStack33, { gap: "$4", children: [
|
|
2375
|
+
onToggleBilling && /* @__PURE__ */ jsx42(BillingToggle, { annual, onToggle: onToggleBilling }),
|
|
2376
|
+
activePlan && activePlan.features.length > 0 && /* @__PURE__ */ jsx42(YStack33, { backgroundColor: "$color1", borderRadius: "$6", padding: "$4", gap: "$3", borderWidth: 1, borderColor: "$color4", children: /* @__PURE__ */ jsx42(FeatureList, { features: activePlan.features }) }),
|
|
2377
|
+
/* @__PURE__ */ jsx42(YStack33, { gap: "$3", children: plans.map((plan) => /* @__PURE__ */ jsx42(
|
|
2378
|
+
PlanRow2,
|
|
2225
2379
|
{
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2380
|
+
plan,
|
|
2381
|
+
selected: selected === plan.id,
|
|
2382
|
+
onSelect: () => onSelectPlan?.(plan.id)
|
|
2383
|
+
},
|
|
2384
|
+
plan.id
|
|
2385
|
+
)) }),
|
|
2386
|
+
reassurance && /* @__PURE__ */ jsx42(SizableText35, { size: "$2", color: "$color10", textAlign: "center", children: reassurance }),
|
|
2387
|
+
onContinue && /* @__PURE__ */ jsx42(
|
|
2388
|
+
Button9,
|
|
2389
|
+
{
|
|
2390
|
+
size: "$5",
|
|
2391
|
+
backgroundColor: "$color9",
|
|
2392
|
+
color: "$color1",
|
|
2393
|
+
borderRadius: "$10",
|
|
2394
|
+
fontWeight: "700",
|
|
2395
|
+
onPress: onContinue,
|
|
2396
|
+
pressStyle: { scale: 0.97, backgroundColor: "$color8" },
|
|
2397
|
+
animation: "quick",
|
|
2398
|
+
children: continueLabel ?? activePlan?.cta ?? "Get Started"
|
|
2238
2399
|
}
|
|
2239
2400
|
)
|
|
2240
2401
|
] });
|
|
@@ -2243,7 +2404,7 @@ function PricingTable({ plans, selectedPlan, onSelectPlan, annual = false, onTog
|
|
|
2243
2404
|
// src/patterns/CountdownBanner.tsx
|
|
2244
2405
|
import { useState as useState10, useEffect as useEffect4, useRef, useCallback as useCallback2 } from "react";
|
|
2245
2406
|
import { SizableText as SizableText36, XStack as XStack29, YStack as YStack34 } from "tamagui";
|
|
2246
|
-
import { jsx as
|
|
2407
|
+
import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
2247
2408
|
function useCountdown2(endTime, minutes, onExpire) {
|
|
2248
2409
|
const getRemaining = useCallback2(() => {
|
|
2249
2410
|
if (endTime) return Math.max(0, Math.floor((endTime.getTime() - Date.now()) / 1e3));
|
|
@@ -2277,74 +2438,74 @@ function useCountdown2(endTime, minutes, onExpire) {
|
|
|
2277
2438
|
return { display, expired: seconds <= 0 };
|
|
2278
2439
|
}
|
|
2279
2440
|
function TimeBox({ value }) {
|
|
2280
|
-
return /* @__PURE__ */
|
|
2441
|
+
return /* @__PURE__ */ jsx43(XStack29, { backgroundColor: "rgba(0,0,0,0.15)", paddingHorizontal: "$2", paddingVertical: "$1", borderRadius: "$3", children: /* @__PURE__ */ jsx43(SizableText36, { size: "$6", fontWeight: "800", color: "white", fontFamily: "$mono", children: value }) });
|
|
2281
2442
|
}
|
|
2282
2443
|
function CountdownBanner({ endTime, minutes, label = "Offer ends in", onExpire, variant = "banner" }) {
|
|
2283
2444
|
const { display, expired } = useCountdown2(endTime, minutes, onExpire);
|
|
2284
2445
|
if (expired) return null;
|
|
2285
2446
|
const parts = display.split(":");
|
|
2286
2447
|
if (variant === "badge") {
|
|
2287
|
-
return /* @__PURE__ */
|
|
2288
|
-
/* @__PURE__ */
|
|
2289
|
-
/* @__PURE__ */
|
|
2448
|
+
return /* @__PURE__ */ jsxs34(XStack29, { backgroundColor: "$red9", paddingHorizontal: "$2.5", paddingVertical: "$1", borderRadius: "$10", gap: "$1.5", alignItems: "center", children: [
|
|
2449
|
+
/* @__PURE__ */ jsx43(SizableText36, { size: "$1", fontWeight: "600", color: "white", children: label }),
|
|
2450
|
+
/* @__PURE__ */ jsx43(SizableText36, { size: "$2", fontWeight: "800", color: "white", fontFamily: "$mono", children: display })
|
|
2290
2451
|
] });
|
|
2291
2452
|
}
|
|
2292
2453
|
if (variant === "compact") {
|
|
2293
|
-
return /* @__PURE__ */
|
|
2294
|
-
/* @__PURE__ */
|
|
2295
|
-
/* @__PURE__ */
|
|
2454
|
+
return /* @__PURE__ */ jsxs34(XStack29, { backgroundColor: "$red3", paddingHorizontal: "$3", paddingVertical: "$2", borderRadius: "$4", gap: "$2", alignItems: "center", alignSelf: "center", children: [
|
|
2455
|
+
/* @__PURE__ */ jsx43(SizableText36, { size: "$3", fontWeight: "600", color: "$red9", children: label }),
|
|
2456
|
+
/* @__PURE__ */ jsx43(SizableText36, { size: "$5", fontWeight: "800", color: "$red9", fontFamily: "$mono", children: display })
|
|
2296
2457
|
] });
|
|
2297
2458
|
}
|
|
2298
|
-
return /* @__PURE__ */
|
|
2299
|
-
/* @__PURE__ */
|
|
2300
|
-
/* @__PURE__ */
|
|
2301
|
-
i > 0 && /* @__PURE__ */
|
|
2302
|
-
/* @__PURE__ */
|
|
2459
|
+
return /* @__PURE__ */ jsxs34(YStack34, { backgroundColor: "$red9", paddingVertical: "$3", paddingHorizontal: "$4", gap: "$1.5", alignItems: "center", children: [
|
|
2460
|
+
/* @__PURE__ */ jsx43(SizableText36, { size: "$3", fontWeight: "600", color: "white", opacity: 0.9, children: label }),
|
|
2461
|
+
/* @__PURE__ */ jsx43(XStack29, { gap: "$1.5", alignItems: "center", children: parts.map((p, i) => /* @__PURE__ */ jsxs34(XStack29, { gap: "$1.5", alignItems: "center", children: [
|
|
2462
|
+
i > 0 && /* @__PURE__ */ jsx43(SizableText36, { size: "$6", fontWeight: "800", color: "white", children: ":" }),
|
|
2463
|
+
/* @__PURE__ */ jsx43(TimeBox, { value: p })
|
|
2303
2464
|
] }, i)) })
|
|
2304
2465
|
] });
|
|
2305
2466
|
}
|
|
2306
2467
|
|
|
2307
2468
|
// src/patterns/TestimonialCard.tsx
|
|
2308
2469
|
import { Image as Image7, SizableText as SizableText37, XStack as XStack30, YStack as YStack35 } from "tamagui";
|
|
2309
|
-
import { jsx as
|
|
2470
|
+
import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
2310
2471
|
function Stars2({ count = 0 }) {
|
|
2311
2472
|
if (!count) return null;
|
|
2312
|
-
return /* @__PURE__ */
|
|
2473
|
+
return /* @__PURE__ */ jsx44(XStack30, { gap: "$0.5", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx44(SizableText37, { size: "$3", color: i < Math.round(count) ? "$yellow9" : "$color5", children: "\u2605" }, i)) });
|
|
2313
2474
|
}
|
|
2314
2475
|
function AuthorRow({ author, role, avatar }) {
|
|
2315
|
-
return /* @__PURE__ */
|
|
2316
|
-
avatar && /* @__PURE__ */
|
|
2317
|
-
/* @__PURE__ */
|
|
2318
|
-
/* @__PURE__ */
|
|
2319
|
-
role && /* @__PURE__ */
|
|
2476
|
+
return /* @__PURE__ */ jsxs35(XStack30, { gap: "$2.5", alignItems: "center", children: [
|
|
2477
|
+
avatar && /* @__PURE__ */ jsx44(Image7, { source: { uri: avatar }, width: 36, height: 36, borderRadius: 18, objectFit: "cover" }),
|
|
2478
|
+
/* @__PURE__ */ jsxs35(YStack35, { children: [
|
|
2479
|
+
/* @__PURE__ */ jsx44(SizableText37, { size: "$3", fontWeight: "600", children: author }),
|
|
2480
|
+
role && /* @__PURE__ */ jsx44(SizableText37, { size: "$2", color: "$color9", children: role })
|
|
2320
2481
|
] })
|
|
2321
2482
|
] });
|
|
2322
2483
|
}
|
|
2323
2484
|
function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card" }) {
|
|
2324
2485
|
if (variant === "minimal") {
|
|
2325
|
-
return /* @__PURE__ */
|
|
2326
|
-
/* @__PURE__ */
|
|
2327
|
-
/* @__PURE__ */
|
|
2486
|
+
return /* @__PURE__ */ jsxs35(YStack35, { gap: "$3", paddingVertical: "$2", children: [
|
|
2487
|
+
/* @__PURE__ */ jsx44(Stars2, { count: rating }),
|
|
2488
|
+
/* @__PURE__ */ jsxs35(SizableText37, { size: "$4", color: "$color11", fontStyle: "italic", lineHeight: 24, children: [
|
|
2328
2489
|
'"',
|
|
2329
2490
|
quote,
|
|
2330
2491
|
'"'
|
|
2331
2492
|
] }),
|
|
2332
|
-
/* @__PURE__ */
|
|
2493
|
+
/* @__PURE__ */ jsx44(AuthorRow, { author, role, avatar })
|
|
2333
2494
|
] });
|
|
2334
2495
|
}
|
|
2335
2496
|
if (variant === "featured") {
|
|
2336
|
-
return /* @__PURE__ */
|
|
2337
|
-
/* @__PURE__ */
|
|
2338
|
-
/* @__PURE__ */
|
|
2339
|
-
/* @__PURE__ */
|
|
2497
|
+
return /* @__PURE__ */ jsxs35(YStack35, { backgroundColor: "$color3", padding: "$5", borderRadius: "$6", gap: "$4", alignItems: "center", children: [
|
|
2498
|
+
/* @__PURE__ */ jsx44(SizableText37, { size: "$8", color: "$color9", opacity: 0.3, fontWeight: "800", children: '"' }),
|
|
2499
|
+
/* @__PURE__ */ jsx44(Stars2, { count: rating }),
|
|
2500
|
+
/* @__PURE__ */ jsxs35(SizableText37, { size: "$5", color: "$color12", fontStyle: "italic", textAlign: "center", lineHeight: 28, children: [
|
|
2340
2501
|
'"',
|
|
2341
2502
|
quote,
|
|
2342
2503
|
'"'
|
|
2343
2504
|
] }),
|
|
2344
|
-
/* @__PURE__ */
|
|
2505
|
+
/* @__PURE__ */ jsx44(AuthorRow, { author, role, avatar })
|
|
2345
2506
|
] });
|
|
2346
2507
|
}
|
|
2347
|
-
return /* @__PURE__ */
|
|
2508
|
+
return /* @__PURE__ */ jsxs35(
|
|
2348
2509
|
YStack35,
|
|
2349
2510
|
{
|
|
2350
2511
|
backgroundColor: "$color1",
|
|
@@ -2354,13 +2515,13 @@ function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card
|
|
|
2354
2515
|
borderColor: "$color4",
|
|
2355
2516
|
gap: "$3",
|
|
2356
2517
|
children: [
|
|
2357
|
-
/* @__PURE__ */
|
|
2358
|
-
/* @__PURE__ */
|
|
2518
|
+
/* @__PURE__ */ jsx44(Stars2, { count: rating }),
|
|
2519
|
+
/* @__PURE__ */ jsxs35(SizableText37, { size: "$4", color: "$color11", fontStyle: "italic", lineHeight: 24, children: [
|
|
2359
2520
|
'"',
|
|
2360
2521
|
quote,
|
|
2361
2522
|
'"'
|
|
2362
2523
|
] }),
|
|
2363
|
-
/* @__PURE__ */
|
|
2524
|
+
/* @__PURE__ */ jsx44(AuthorRow, { author, role, avatar })
|
|
2364
2525
|
]
|
|
2365
2526
|
}
|
|
2366
2527
|
);
|
|
@@ -2368,7 +2529,7 @@ function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card
|
|
|
2368
2529
|
|
|
2369
2530
|
// src/patterns/ConfirmDialog.tsx
|
|
2370
2531
|
import { AlertDialog as AlertDialog2, Button as Button10, SizableText as SizableText38, XStack as XStack31, YStack as YStack36 } from "tamagui";
|
|
2371
|
-
import { jsx as
|
|
2532
|
+
import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
2372
2533
|
function ConfirmDialog({
|
|
2373
2534
|
open,
|
|
2374
2535
|
onOpenChange,
|
|
@@ -2389,8 +2550,8 @@ function ConfirmDialog({
|
|
|
2389
2550
|
onConfirm?.();
|
|
2390
2551
|
onOpenChange(false);
|
|
2391
2552
|
};
|
|
2392
|
-
return /* @__PURE__ */
|
|
2393
|
-
/* @__PURE__ */
|
|
2553
|
+
return /* @__PURE__ */ jsx45(AlertDialog2, { open, onOpenChange, children: /* @__PURE__ */ jsxs36(AlertDialog2.Portal, { children: [
|
|
2554
|
+
/* @__PURE__ */ jsx45(
|
|
2394
2555
|
AlertDialog2.Overlay,
|
|
2395
2556
|
{
|
|
2396
2557
|
opacity: 0.5,
|
|
@@ -2400,7 +2561,7 @@ function ConfirmDialog({
|
|
|
2400
2561
|
},
|
|
2401
2562
|
"overlay"
|
|
2402
2563
|
),
|
|
2403
|
-
/* @__PURE__ */
|
|
2564
|
+
/* @__PURE__ */ jsx45(
|
|
2404
2565
|
AlertDialog2.Content,
|
|
2405
2566
|
{
|
|
2406
2567
|
bordered: true,
|
|
@@ -2414,11 +2575,11 @@ function ConfirmDialog({
|
|
|
2414
2575
|
scale: 1,
|
|
2415
2576
|
opacity: 1,
|
|
2416
2577
|
animation: "quick",
|
|
2417
|
-
children: /* @__PURE__ */
|
|
2418
|
-
icon && /* @__PURE__ */
|
|
2419
|
-
/* @__PURE__ */
|
|
2420
|
-
/* @__PURE__ */
|
|
2421
|
-
description && /* @__PURE__ */
|
|
2578
|
+
children: /* @__PURE__ */ jsxs36(YStack36, { gap: "$4", padding: "$4", children: [
|
|
2579
|
+
icon && /* @__PURE__ */ jsx45(YStack36, { alignItems: "center", children: icon }),
|
|
2580
|
+
/* @__PURE__ */ jsxs36(YStack36, { gap: "$2", alignItems: icon ? "center" : "flex-start", children: [
|
|
2581
|
+
/* @__PURE__ */ jsx45(AlertDialog2.Title, { size: "$6", fontWeight: "700", children: title }),
|
|
2582
|
+
description && /* @__PURE__ */ jsx45(
|
|
2422
2583
|
AlertDialog2.Description,
|
|
2423
2584
|
{
|
|
2424
2585
|
size: "$3",
|
|
@@ -2428,8 +2589,8 @@ function ConfirmDialog({
|
|
|
2428
2589
|
}
|
|
2429
2590
|
)
|
|
2430
2591
|
] }),
|
|
2431
|
-
/* @__PURE__ */
|
|
2432
|
-
/* @__PURE__ */
|
|
2592
|
+
/* @__PURE__ */ jsxs36(XStack31, { gap: "$3", justifyContent: "flex-end", children: [
|
|
2593
|
+
/* @__PURE__ */ jsx45(
|
|
2433
2594
|
Button10,
|
|
2434
2595
|
{
|
|
2435
2596
|
flex: 1,
|
|
@@ -2440,10 +2601,10 @@ function ConfirmDialog({
|
|
|
2440
2601
|
onPress: handleCancel,
|
|
2441
2602
|
pressStyle: { opacity: 0.7 },
|
|
2442
2603
|
animation: "quick",
|
|
2443
|
-
children: /* @__PURE__ */
|
|
2604
|
+
children: /* @__PURE__ */ jsx45(SizableText38, { fontWeight: "600", children: cancelLabel })
|
|
2444
2605
|
}
|
|
2445
2606
|
),
|
|
2446
|
-
/* @__PURE__ */
|
|
2607
|
+
/* @__PURE__ */ jsx45(
|
|
2447
2608
|
Button10,
|
|
2448
2609
|
{
|
|
2449
2610
|
flex: 1,
|
|
@@ -2453,7 +2614,7 @@ function ConfirmDialog({
|
|
|
2453
2614
|
onPress: handleConfirm,
|
|
2454
2615
|
pressStyle: { backgroundColor: destructive ? "$red8" : "$color8", scale: 0.97 },
|
|
2455
2616
|
animation: "quick",
|
|
2456
|
-
children: /* @__PURE__ */
|
|
2617
|
+
children: /* @__PURE__ */ jsx45(SizableText38, { fontWeight: "600", color: "white", children: confirmLabel })
|
|
2457
2618
|
}
|
|
2458
2619
|
)
|
|
2459
2620
|
] })
|
|
@@ -2467,7 +2628,7 @@ function ConfirmDialog({
|
|
|
2467
2628
|
// src/patterns/Chip.tsx
|
|
2468
2629
|
import { useCallback as useCallback3 } from "react";
|
|
2469
2630
|
import { SizableText as SizableText39, XStack as XStack32 } from "tamagui";
|
|
2470
|
-
import { jsx as
|
|
2631
|
+
import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
2471
2632
|
var sizes2 = { sm: { h: 28, px: "$2", text: "$2" }, md: { h: 34, px: "$3", text: "$3" }, lg: { h: 42, px: "$4", text: "$4" } };
|
|
2472
2633
|
function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "md", icon, color }) {
|
|
2473
2634
|
const s = sizes2[size];
|
|
@@ -2476,7 +2637,7 @@ function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "
|
|
|
2476
2637
|
const bg = active ? color ?? "$color9" : filled ? "$color3" : "transparent";
|
|
2477
2638
|
const border = active ? color ?? "$color9" : "$color6";
|
|
2478
2639
|
const fg = active ? "$color1" : "$color11";
|
|
2479
|
-
return /* @__PURE__ */
|
|
2640
|
+
return /* @__PURE__ */ jsxs37(
|
|
2480
2641
|
XStack32,
|
|
2481
2642
|
{
|
|
2482
2643
|
height: s.h,
|
|
@@ -2492,10 +2653,10 @@ function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "
|
|
|
2492
2653
|
onPress,
|
|
2493
2654
|
cursor: "pointer",
|
|
2494
2655
|
children: [
|
|
2495
|
-
active && /* @__PURE__ */
|
|
2496
|
-
icon && /* @__PURE__ */
|
|
2497
|
-
/* @__PURE__ */
|
|
2498
|
-
onRemove && /* @__PURE__ */
|
|
2656
|
+
active && /* @__PURE__ */ jsx46(SizableText39, { size: s.text, color: fg, children: "\u2713" }),
|
|
2657
|
+
icon && /* @__PURE__ */ jsx46(SizableText39, { color: fg, children: icon }),
|
|
2658
|
+
/* @__PURE__ */ jsx46(SizableText39, { size: s.text, color: fg, fontWeight: "500", children: label }),
|
|
2659
|
+
onRemove && /* @__PURE__ */ jsx46(
|
|
2499
2660
|
SizableText39,
|
|
2500
2661
|
{
|
|
2501
2662
|
size: "$2",
|
|
@@ -2524,7 +2685,7 @@ function ChipGroup({ chips, selected = [], onSelectionChange, multiSelect = true
|
|
|
2524
2685
|
onSelectionChange(isSelected ? [] : [id]);
|
|
2525
2686
|
}
|
|
2526
2687
|
}, [selected, onSelectionChange, multiSelect]);
|
|
2527
|
-
return /* @__PURE__ */
|
|
2688
|
+
return /* @__PURE__ */ jsx46(XStack32, { flexWrap: "wrap", gap: "$2", children: chips.map((chip) => /* @__PURE__ */ jsx46(
|
|
2528
2689
|
Chip,
|
|
2529
2690
|
{
|
|
2530
2691
|
label: chip.label,
|
|
@@ -2542,7 +2703,7 @@ function ChipGroup({ chips, selected = [], onSelectionChange, multiSelect = true
|
|
|
2542
2703
|
import { useCallback as useCallback4, useRef as useRef2, useState as useState11 } from "react";
|
|
2543
2704
|
import { Platform } from "react-native";
|
|
2544
2705
|
import { Input as Input3, SizableText as SizableText40, XStack as XStack33, YStack as YStack37 } from "tamagui";
|
|
2545
|
-
import { jsx as
|
|
2706
|
+
import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
2546
2707
|
function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFocus, secureEntry }) {
|
|
2547
2708
|
const inputRef = useRef2(null);
|
|
2548
2709
|
const [focused, setFocused] = useState11(false);
|
|
@@ -2555,11 +2716,11 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2555
2716
|
const focusInput = useCallback4(() => {
|
|
2556
2717
|
inputRef.current?.focus();
|
|
2557
2718
|
}, []);
|
|
2558
|
-
return /* @__PURE__ */
|
|
2559
|
-
/* @__PURE__ */
|
|
2719
|
+
return /* @__PURE__ */ jsxs38(YStack37, { position: "relative", children: [
|
|
2720
|
+
/* @__PURE__ */ jsx47(XStack33, { gap: "$2", justifyContent: "center", children: Array.from({ length }, (_, i) => {
|
|
2560
2721
|
const char = digits[i]?.trim();
|
|
2561
2722
|
const isCursor = focused && value.length === i;
|
|
2562
|
-
return /* @__PURE__ */
|
|
2723
|
+
return /* @__PURE__ */ jsxs38(
|
|
2563
2724
|
YStack37,
|
|
2564
2725
|
{
|
|
2565
2726
|
width: 48,
|
|
@@ -2573,8 +2734,8 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2573
2734
|
animation: "quick",
|
|
2574
2735
|
pointerEvents: "none",
|
|
2575
2736
|
children: [
|
|
2576
|
-
/* @__PURE__ */
|
|
2577
|
-
isCursor && /* @__PURE__ */
|
|
2737
|
+
/* @__PURE__ */ jsx47(SizableText40, { size: "$7", fontWeight: "600", color: "$color12", children: char ? secureEntry ? "\u25CF" : char : "" }),
|
|
2738
|
+
isCursor && /* @__PURE__ */ jsx47(
|
|
2578
2739
|
YStack37,
|
|
2579
2740
|
{
|
|
2580
2741
|
position: "absolute",
|
|
@@ -2590,7 +2751,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2590
2751
|
i
|
|
2591
2752
|
);
|
|
2592
2753
|
}) }),
|
|
2593
|
-
Platform.OS === "web" ? /* @__PURE__ */
|
|
2754
|
+
Platform.OS === "web" ? /* @__PURE__ */ jsx47(
|
|
2594
2755
|
"input",
|
|
2595
2756
|
{
|
|
2596
2757
|
ref: inputRef,
|
|
@@ -2618,7 +2779,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2618
2779
|
cursor: "pointer"
|
|
2619
2780
|
}
|
|
2620
2781
|
}
|
|
2621
|
-
) : /* @__PURE__ */
|
|
2782
|
+
) : /* @__PURE__ */ jsx47(
|
|
2622
2783
|
Input3,
|
|
2623
2784
|
{
|
|
2624
2785
|
ref: inputRef,
|
|
@@ -2644,7 +2805,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2644
2805
|
// src/patterns/PasswordInput.tsx
|
|
2645
2806
|
import { useState as useState12, useCallback as useCallback5 } from "react";
|
|
2646
2807
|
import { Input as Input4, SizableText as SizableText41, XStack as XStack34, YStack as YStack38 } from "tamagui";
|
|
2647
|
-
import { jsx as
|
|
2808
|
+
import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
2648
2809
|
function getStrength(pw) {
|
|
2649
2810
|
if (!pw) return { label: "", color: "$color6", width: "0%" };
|
|
2650
2811
|
const score = [pw.length >= 8, /[A-Z]/.test(pw), /[0-9]/.test(pw), /[^A-Za-z0-9]/.test(pw)].filter(Boolean).length;
|
|
@@ -2656,9 +2817,9 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2656
2817
|
const [visible, setVisible] = useState12(false);
|
|
2657
2818
|
const toggle = useCallback5(() => setVisible((v) => !v), []);
|
|
2658
2819
|
const strength = getStrength(value);
|
|
2659
|
-
return /* @__PURE__ */
|
|
2660
|
-
label && /* @__PURE__ */
|
|
2661
|
-
/* @__PURE__ */
|
|
2820
|
+
return /* @__PURE__ */ jsxs39(YStack38, { gap: "$1.5", children: [
|
|
2821
|
+
label && /* @__PURE__ */ jsx48(SizableText41, { size: "$3", color: "$color11", fontWeight: "500", children: label }),
|
|
2822
|
+
/* @__PURE__ */ jsxs39(
|
|
2662
2823
|
XStack34,
|
|
2663
2824
|
{
|
|
2664
2825
|
borderWidth: 1,
|
|
@@ -2669,7 +2830,7 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2669
2830
|
paddingRight: "$2",
|
|
2670
2831
|
focusStyle: { borderColor: "$color9" },
|
|
2671
2832
|
children: [
|
|
2672
|
-
/* @__PURE__ */
|
|
2833
|
+
/* @__PURE__ */ jsx48(
|
|
2673
2834
|
Input4,
|
|
2674
2835
|
{
|
|
2675
2836
|
flex: 1,
|
|
@@ -2683,7 +2844,7 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2683
2844
|
borderWidth: 0
|
|
2684
2845
|
}
|
|
2685
2846
|
),
|
|
2686
|
-
/* @__PURE__ */
|
|
2847
|
+
/* @__PURE__ */ jsx48(
|
|
2687
2848
|
SizableText41,
|
|
2688
2849
|
{
|
|
2689
2850
|
size: "$4",
|
|
@@ -2698,24 +2859,24 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2698
2859
|
]
|
|
2699
2860
|
}
|
|
2700
2861
|
),
|
|
2701
|
-
strengthIndicator && value.length > 0 && /* @__PURE__ */
|
|
2702
|
-
/* @__PURE__ */
|
|
2703
|
-
/* @__PURE__ */
|
|
2862
|
+
strengthIndicator && value.length > 0 && /* @__PURE__ */ jsxs39(YStack38, { gap: "$1", children: [
|
|
2863
|
+
/* @__PURE__ */ jsx48(YStack38, { height: 3, backgroundColor: "$color4", borderRadius: 2, overflow: "hidden", children: /* @__PURE__ */ jsx48(YStack38, { height: 3, width: strength.width, backgroundColor: strength.color, borderRadius: 2, animation: "quick" }) }),
|
|
2864
|
+
/* @__PURE__ */ jsx48(SizableText41, { size: "$1", color: strength.color, children: strength.label })
|
|
2704
2865
|
] }),
|
|
2705
|
-
error && /* @__PURE__ */
|
|
2866
|
+
error && /* @__PURE__ */ jsx48(SizableText41, { size: "$2", color: "$red9", children: error })
|
|
2706
2867
|
] });
|
|
2707
2868
|
}
|
|
2708
2869
|
|
|
2709
2870
|
// src/patterns/AvatarGroup.tsx
|
|
2710
|
-
import { Circle as
|
|
2711
|
-
import { jsx as
|
|
2871
|
+
import { Circle as Circle10, Image as Image8, SizableText as SizableText42, XStack as XStack35 } from "tamagui";
|
|
2872
|
+
import { jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
2712
2873
|
function getInitials(name) {
|
|
2713
2874
|
if (!name) return "?";
|
|
2714
2875
|
return name.split(" ").map((p) => p[0]).join("").toUpperCase().slice(0, 2);
|
|
2715
2876
|
}
|
|
2716
2877
|
function AvatarItem({ uri, name, color, size }) {
|
|
2717
|
-
return /* @__PURE__ */
|
|
2718
|
-
|
|
2878
|
+
return /* @__PURE__ */ jsx49(
|
|
2879
|
+
Circle10,
|
|
2719
2880
|
{
|
|
2720
2881
|
size,
|
|
2721
2882
|
backgroundColor: color ?? "$color4",
|
|
@@ -2724,17 +2885,17 @@ function AvatarItem({ uri, name, color, size }) {
|
|
|
2724
2885
|
overflow: "hidden",
|
|
2725
2886
|
alignItems: "center",
|
|
2726
2887
|
justifyContent: "center",
|
|
2727
|
-
children: uri ? /* @__PURE__ */
|
|
2888
|
+
children: uri ? /* @__PURE__ */ jsx49(Image8, { source: { uri }, width: size, height: size, objectFit: "cover" }) : /* @__PURE__ */ jsx49(SizableText42, { size: "$2", fontWeight: "600", color: color ? "$color1" : "$color11", children: getInitials(name) })
|
|
2728
2889
|
}
|
|
2729
2890
|
);
|
|
2730
2891
|
}
|
|
2731
2892
|
function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
2732
2893
|
const visible = avatars.slice(0, max);
|
|
2733
2894
|
const remaining = avatars.length - max;
|
|
2734
|
-
return /* @__PURE__ */
|
|
2735
|
-
visible.map((avatar, i) => /* @__PURE__ */
|
|
2736
|
-
remaining > 0 && /* @__PURE__ */
|
|
2737
|
-
|
|
2895
|
+
return /* @__PURE__ */ jsxs40(XStack35, { alignItems: "center", children: [
|
|
2896
|
+
visible.map((avatar, i) => /* @__PURE__ */ jsx49(XStack35, { marginLeft: i === 0 ? 0 : -overlap, zIndex: visible.length - i, children: /* @__PURE__ */ jsx49(AvatarItem, { ...avatar, size }) }, i)),
|
|
2897
|
+
remaining > 0 && /* @__PURE__ */ jsx49(XStack35, { marginLeft: -overlap, zIndex: 0, children: /* @__PURE__ */ jsx49(
|
|
2898
|
+
Circle10,
|
|
2738
2899
|
{
|
|
2739
2900
|
size,
|
|
2740
2901
|
backgroundColor: "$color6",
|
|
@@ -2742,7 +2903,7 @@ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
|
2742
2903
|
borderColor: "$background",
|
|
2743
2904
|
alignItems: "center",
|
|
2744
2905
|
justifyContent: "center",
|
|
2745
|
-
children: /* @__PURE__ */
|
|
2906
|
+
children: /* @__PURE__ */ jsxs40(SizableText42, { size: "$2", fontWeight: "600", color: "$color11", children: [
|
|
2746
2907
|
"+",
|
|
2747
2908
|
remaining
|
|
2748
2909
|
] })
|
|
@@ -2753,8 +2914,8 @@ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
|
2753
2914
|
|
|
2754
2915
|
// src/patterns/SwipeCards.tsx
|
|
2755
2916
|
import { useState as useState13, useCallback as useCallback6 } from "react";
|
|
2756
|
-
import { Circle as
|
|
2757
|
-
import { jsx as
|
|
2917
|
+
import { Circle as Circle11, SizableText as SizableText43, XStack as XStack36, YStack as YStack39 } from "tamagui";
|
|
2918
|
+
import { jsx as jsx50, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
2758
2919
|
var STACK_SIZE = 3;
|
|
2759
2920
|
var CARD_OFFSETS = [
|
|
2760
2921
|
{ scale: 1, y: 0, opacity: 1 },
|
|
@@ -2791,16 +2952,16 @@ function SwipeCards({
|
|
|
2791
2952
|
return () => clearTimeout(timer);
|
|
2792
2953
|
}, [isEmpty, index, items, onEmpty, onSwipeLeft, onSwipeRight]);
|
|
2793
2954
|
if (isEmpty) {
|
|
2794
|
-
return /* @__PURE__ */
|
|
2955
|
+
return /* @__PURE__ */ jsx50(YStack39, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$3", padding: "$4", children: /* @__PURE__ */ jsx50(SizableText43, { size: "$5", color: "$color8", children: emptyMessage }) });
|
|
2795
2956
|
}
|
|
2796
|
-
return /* @__PURE__ */
|
|
2797
|
-
/* @__PURE__ */
|
|
2957
|
+
return /* @__PURE__ */ jsxs41(YStack39, { flex: 1, gap: "$4", children: [
|
|
2958
|
+
/* @__PURE__ */ jsx50(YStack39, { flex: 1, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx50(YStack39, { width: "100%", maxWidth: 340, aspectRatio: 3 / 4, position: "relative", children: remaining.slice(0, STACK_SIZE).reverse().map((item, reverseIdx) => {
|
|
2798
2959
|
const stackIdx = Math.min(remaining.length, STACK_SIZE) - 1 - reverseIdx;
|
|
2799
2960
|
const isTop = stackIdx === 0;
|
|
2800
2961
|
const offset = CARD_OFFSETS[stackIdx] ?? CARD_OFFSETS[2];
|
|
2801
2962
|
const exitX = exitDir === "left" ? -400 : exitDir === "right" ? 400 : 0;
|
|
2802
2963
|
const exitRotate = exitDir === "left" ? "-15deg" : exitDir === "right" ? "15deg" : "0deg";
|
|
2803
|
-
return /* @__PURE__ */
|
|
2964
|
+
return /* @__PURE__ */ jsxs41(
|
|
2804
2965
|
YStack39,
|
|
2805
2966
|
{
|
|
2806
2967
|
position: "absolute",
|
|
@@ -2812,7 +2973,7 @@ function SwipeCards({
|
|
|
2812
2973
|
borderRadius: "$5",
|
|
2813
2974
|
overflow: "hidden",
|
|
2814
2975
|
backgroundColor: "$background",
|
|
2815
|
-
|
|
2976
|
+
elevation: isTop ? 4 : 1,
|
|
2816
2977
|
shadowColor: "$shadowColor",
|
|
2817
2978
|
shadowRadius: isTop ? 16 : 4,
|
|
2818
2979
|
scale: isTop && exitDir ? 1 : offset.scale,
|
|
@@ -2822,7 +2983,7 @@ function SwipeCards({
|
|
|
2822
2983
|
rotate: isTop ? exitRotate : "0deg",
|
|
2823
2984
|
children: [
|
|
2824
2985
|
renderCard(item),
|
|
2825
|
-
isTop && exitDir === "left" && /* @__PURE__ */
|
|
2986
|
+
isTop && exitDir === "left" && /* @__PURE__ */ jsx50(
|
|
2826
2987
|
YStack39,
|
|
2827
2988
|
{
|
|
2828
2989
|
position: "absolute",
|
|
@@ -2833,10 +2994,10 @@ function SwipeCards({
|
|
|
2833
2994
|
borderRadius: "$3",
|
|
2834
2995
|
padding: "$2",
|
|
2835
2996
|
rotate: "15deg",
|
|
2836
|
-
children: /* @__PURE__ */
|
|
2997
|
+
children: /* @__PURE__ */ jsx50(SizableText43, { size: "$7", fontWeight: "800", color: "$red10", children: leftLabel.toUpperCase() })
|
|
2837
2998
|
}
|
|
2838
2999
|
),
|
|
2839
|
-
isTop && exitDir === "right" && /* @__PURE__ */
|
|
3000
|
+
isTop && exitDir === "right" && /* @__PURE__ */ jsx50(
|
|
2840
3001
|
YStack39,
|
|
2841
3002
|
{
|
|
2842
3003
|
position: "absolute",
|
|
@@ -2847,7 +3008,7 @@ function SwipeCards({
|
|
|
2847
3008
|
borderRadius: "$3",
|
|
2848
3009
|
padding: "$2",
|
|
2849
3010
|
rotate: "-15deg",
|
|
2850
|
-
children: /* @__PURE__ */
|
|
3011
|
+
children: /* @__PURE__ */ jsx50(SizableText43, { size: "$7", fontWeight: "800", color: "$green10", children: rightLabel.toUpperCase() })
|
|
2851
3012
|
}
|
|
2852
3013
|
)
|
|
2853
3014
|
]
|
|
@@ -2855,9 +3016,9 @@ function SwipeCards({
|
|
|
2855
3016
|
item.id
|
|
2856
3017
|
);
|
|
2857
3018
|
}) }) }),
|
|
2858
|
-
/* @__PURE__ */
|
|
2859
|
-
/* @__PURE__ */
|
|
2860
|
-
|
|
3019
|
+
/* @__PURE__ */ jsxs41(XStack36, { justifyContent: "center", gap: "$6", paddingBottom: "$4", children: [
|
|
3020
|
+
/* @__PURE__ */ jsx50(
|
|
3021
|
+
Circle11,
|
|
2861
3022
|
{
|
|
2862
3023
|
size: 60,
|
|
2863
3024
|
backgroundColor: "$red3",
|
|
@@ -2868,11 +3029,11 @@ function SwipeCards({
|
|
|
2868
3029
|
onPress: () => handleSwipe("left"),
|
|
2869
3030
|
alignItems: "center",
|
|
2870
3031
|
justifyContent: "center",
|
|
2871
|
-
children: /* @__PURE__ */
|
|
3032
|
+
children: /* @__PURE__ */ jsx50(SizableText43, { size: "$6", color: "$red10", fontWeight: "700", children: "\u2715" })
|
|
2872
3033
|
}
|
|
2873
3034
|
),
|
|
2874
|
-
/* @__PURE__ */
|
|
2875
|
-
|
|
3035
|
+
/* @__PURE__ */ jsx50(
|
|
3036
|
+
Circle11,
|
|
2876
3037
|
{
|
|
2877
3038
|
size: 60,
|
|
2878
3039
|
backgroundColor: "$green3",
|
|
@@ -2883,7 +3044,7 @@ function SwipeCards({
|
|
|
2883
3044
|
onPress: () => handleSwipe("right"),
|
|
2884
3045
|
alignItems: "center",
|
|
2885
3046
|
justifyContent: "center",
|
|
2886
|
-
children: /* @__PURE__ */
|
|
3047
|
+
children: /* @__PURE__ */ jsx50(SizableText43, { size: "$6", color: "$green10", fontWeight: "700", children: "\u2665" })
|
|
2887
3048
|
}
|
|
2888
3049
|
)
|
|
2889
3050
|
] })
|
|
@@ -2892,7 +3053,7 @@ function SwipeCards({
|
|
|
2892
3053
|
|
|
2893
3054
|
// src/patterns/GlassCard.tsx
|
|
2894
3055
|
import { styled as styled12, YStack as YStack40 } from "tamagui";
|
|
2895
|
-
import { jsx as
|
|
3056
|
+
import { jsx as jsx51 } from "react/jsx-runtime";
|
|
2896
3057
|
var BLUR = { light: 8, medium: 16, heavy: 24 };
|
|
2897
3058
|
var TINT_BG = {
|
|
2898
3059
|
light: "rgba(255,255,255,0.15)",
|
|
@@ -2912,13 +3073,13 @@ function GlassCard({
|
|
|
2912
3073
|
elevated = false
|
|
2913
3074
|
}) {
|
|
2914
3075
|
const blur = BLUR[intensity];
|
|
2915
|
-
return /* @__PURE__ */
|
|
3076
|
+
return /* @__PURE__ */ jsx51(
|
|
2916
3077
|
GlassFrame,
|
|
2917
3078
|
{
|
|
2918
3079
|
borderRadius,
|
|
2919
3080
|
padding,
|
|
2920
3081
|
backgroundColor: TINT_BG[tint],
|
|
2921
|
-
|
|
3082
|
+
elevation: elevated ? 4 : 0,
|
|
2922
3083
|
shadowColor: elevated ? "$shadowColor" : void 0,
|
|
2923
3084
|
shadowRadius: elevated ? 20 : void 0,
|
|
2924
3085
|
shadowOpacity: elevated ? 0.3 : void 0,
|
|
@@ -2931,13 +3092,13 @@ function GlassCard({
|
|
|
2931
3092
|
// src/patterns/DataTable.tsx
|
|
2932
3093
|
import { useMemo, useState as useState14 } from "react";
|
|
2933
3094
|
import { SizableText as SizableText44, Separator as Separator5, XStack as XStack37, YStack as YStack41, useMedia, styled as styled13, View as View6 } from "tamagui";
|
|
2934
|
-
import { jsx as
|
|
3095
|
+
import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
2935
3096
|
var TH = styled13(View6, { padding: "$3", justifyContent: "center" });
|
|
2936
3097
|
var TD = styled13(View6, { padding: "$3", justifyContent: "center" });
|
|
2937
3098
|
function StatusBadge({ status }) {
|
|
2938
3099
|
const isActive = status.toLowerCase() === "active";
|
|
2939
|
-
return /* @__PURE__ */
|
|
2940
|
-
/* @__PURE__ */
|
|
3100
|
+
return /* @__PURE__ */ jsxs42(XStack37, { gap: "$2", alignItems: "center", children: [
|
|
3101
|
+
/* @__PURE__ */ jsx52(
|
|
2941
3102
|
View6,
|
|
2942
3103
|
{
|
|
2943
3104
|
width: 8,
|
|
@@ -2946,13 +3107,13 @@ function StatusBadge({ status }) {
|
|
|
2946
3107
|
backgroundColor: isActive ? "$green9" : "$orange9"
|
|
2947
3108
|
}
|
|
2948
3109
|
),
|
|
2949
|
-
/* @__PURE__ */
|
|
3110
|
+
/* @__PURE__ */ jsx52(SizableText44, { size: "$3", color: "$color11", children: status })
|
|
2950
3111
|
] });
|
|
2951
3112
|
}
|
|
2952
3113
|
function HeaderCell({ col, sort, onSort }) {
|
|
2953
3114
|
const active = sort?.key === col.key;
|
|
2954
3115
|
const indicator = active ? sort.dir === "asc" ? " \u25B2" : " \u25BC" : "";
|
|
2955
|
-
return /* @__PURE__ */
|
|
3116
|
+
return /* @__PURE__ */ jsx52(
|
|
2956
3117
|
TH,
|
|
2957
3118
|
{
|
|
2958
3119
|
width: col.width,
|
|
@@ -2961,7 +3122,7 @@ function HeaderCell({ col, sort, onSort }) {
|
|
|
2961
3122
|
cursor: col.sortable ? "pointer" : void 0,
|
|
2962
3123
|
onPress: col.sortable ? onSort : void 0,
|
|
2963
3124
|
pressStyle: col.sortable ? { opacity: 0.7 } : void 0,
|
|
2964
|
-
children: /* @__PURE__ */
|
|
3125
|
+
children: /* @__PURE__ */ jsxs42(
|
|
2965
3126
|
SizableText44,
|
|
2966
3127
|
{
|
|
2967
3128
|
size: "$2",
|
|
@@ -2980,7 +3141,7 @@ function HeaderCell({ col, sort, onSort }) {
|
|
|
2980
3141
|
);
|
|
2981
3142
|
}
|
|
2982
3143
|
function TableRow({ row, columns, onPress, odd }) {
|
|
2983
|
-
return /* @__PURE__ */
|
|
3144
|
+
return /* @__PURE__ */ jsx52(
|
|
2984
3145
|
XStack37,
|
|
2985
3146
|
{
|
|
2986
3147
|
backgroundColor: odd ? "$color2" : "transparent",
|
|
@@ -2991,12 +3152,12 @@ function TableRow({ row, columns, onPress, odd }) {
|
|
|
2991
3152
|
onPress: onPress ? () => onPress(row) : void 0,
|
|
2992
3153
|
pressStyle: onPress ? { opacity: 0.85 } : void 0,
|
|
2993
3154
|
animation: "quick",
|
|
2994
|
-
children: columns.map((col) => /* @__PURE__ */
|
|
3155
|
+
children: columns.map((col) => /* @__PURE__ */ jsx52(TD, { width: col.width, flex: col.width ? void 0 : 1, children: col.render ? col.render(row[col.key], row) : /* @__PURE__ */ jsx52(SizableText44, { size: "$3", color: "$color11", children: String(row[col.key] ?? "") }) }, col.key))
|
|
2995
3156
|
}
|
|
2996
3157
|
);
|
|
2997
3158
|
}
|
|
2998
3159
|
function CardRow({ row, columns, onPress }) {
|
|
2999
|
-
return /* @__PURE__ */
|
|
3160
|
+
return /* @__PURE__ */ jsx52(
|
|
3000
3161
|
YStack41,
|
|
3001
3162
|
{
|
|
3002
3163
|
backgroundColor: "$color1",
|
|
@@ -3008,11 +3169,11 @@ function CardRow({ row, columns, onPress }) {
|
|
|
3008
3169
|
onPress: onPress ? () => onPress(row) : void 0,
|
|
3009
3170
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
3010
3171
|
animation: "quick",
|
|
3011
|
-
children: columns.map((col, i) => /* @__PURE__ */
|
|
3012
|
-
i > 0 && /* @__PURE__ */
|
|
3013
|
-
/* @__PURE__ */
|
|
3014
|
-
/* @__PURE__ */
|
|
3015
|
-
col.render ? col.render(row[col.key], row) : /* @__PURE__ */
|
|
3172
|
+
children: columns.map((col, i) => /* @__PURE__ */ jsxs42(YStack41, { children: [
|
|
3173
|
+
i > 0 && /* @__PURE__ */ jsx52(Separator5, { marginVertical: "$1.5", borderColor: "$color4" }),
|
|
3174
|
+
/* @__PURE__ */ jsxs42(XStack37, { justifyContent: "space-between", alignItems: "center", children: [
|
|
3175
|
+
/* @__PURE__ */ jsx52(SizableText44, { size: "$2", color: "$color9", fontWeight: "600", children: col.header }),
|
|
3176
|
+
col.render ? col.render(row[col.key], row) : /* @__PURE__ */ jsx52(SizableText44, { size: "$3", color: "$color11", children: String(row[col.key] ?? "") })
|
|
3016
3177
|
] })
|
|
3017
3178
|
] }, col.key))
|
|
3018
3179
|
}
|
|
@@ -3032,21 +3193,21 @@ function DataTable({ columns, data, onRowPress, emptyMessage = "No data" }) {
|
|
|
3032
3193
|
}, [data, sort]);
|
|
3033
3194
|
const toggleSort = (key) => setSort((s) => s?.key === key ? { key, dir: s.dir === "asc" ? "desc" : "asc" } : { key, dir: "asc" });
|
|
3034
3195
|
if (!data.length) {
|
|
3035
|
-
return /* @__PURE__ */
|
|
3196
|
+
return /* @__PURE__ */ jsx52(YStack41, { padding: "$6", alignItems: "center", children: /* @__PURE__ */ jsx52(SizableText44, { size: "$4", color: "$color9", children: emptyMessage }) });
|
|
3036
3197
|
}
|
|
3037
3198
|
if (isSmall) {
|
|
3038
|
-
return /* @__PURE__ */
|
|
3199
|
+
return /* @__PURE__ */ jsx52(YStack41, { gap: "$3", children: sorted.map((row, i) => /* @__PURE__ */ jsx52(CardRow, { row, columns, onPress: onRowPress }, i)) });
|
|
3039
3200
|
}
|
|
3040
|
-
return /* @__PURE__ */
|
|
3041
|
-
/* @__PURE__ */
|
|
3042
|
-
sorted.map((row, i) => /* @__PURE__ */
|
|
3201
|
+
return /* @__PURE__ */ jsxs42(YStack41, { borderWidth: 1, borderColor: "$color4", borderRadius: "$4", overflow: "hidden", children: [
|
|
3202
|
+
/* @__PURE__ */ jsx52(XStack37, { backgroundColor: "$color1", borderBottomWidth: 1, borderColor: "$color4", children: columns.map((col) => /* @__PURE__ */ jsx52(HeaderCell, { col, sort, onSort: () => toggleSort(col.key) }, col.key)) }),
|
|
3203
|
+
sorted.map((row, i) => /* @__PURE__ */ jsx52(TableRow, { row, columns, onPress: onRowPress, odd: i % 2 === 1 }, i))
|
|
3043
3204
|
] });
|
|
3044
3205
|
}
|
|
3045
3206
|
|
|
3046
3207
|
// src/patterns/DatePicker.tsx
|
|
3047
3208
|
import { useCallback as useCallback7, useMemo as useMemo2, useState as useState15 } from "react";
|
|
3048
3209
|
import { SizableText as SizableText45, XStack as XStack38, YStack as YStack42 } from "tamagui";
|
|
3049
|
-
import { jsx as
|
|
3210
|
+
import { jsx as jsx53, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
3050
3211
|
var MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
|
3051
3212
|
var DAY_LABELS_SUN = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
3052
3213
|
var DAY_LABELS_MON = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
|
|
@@ -3071,7 +3232,7 @@ function buildGrid(year, month, startDay) {
|
|
|
3071
3232
|
return cells;
|
|
3072
3233
|
}
|
|
3073
3234
|
function NavButton({ label, onPress }) {
|
|
3074
|
-
return /* @__PURE__ */
|
|
3235
|
+
return /* @__PURE__ */ jsx53(
|
|
3075
3236
|
XStack38,
|
|
3076
3237
|
{
|
|
3077
3238
|
width: 36,
|
|
@@ -3084,7 +3245,7 @@ function NavButton({ label, onPress }) {
|
|
|
3084
3245
|
animation: "quick",
|
|
3085
3246
|
onPress,
|
|
3086
3247
|
cursor: "pointer",
|
|
3087
|
-
children: /* @__PURE__ */
|
|
3248
|
+
children: /* @__PURE__ */ jsx53(SizableText45, { size: "$5", color: "$color11", fontWeight: "600", children: label })
|
|
3088
3249
|
}
|
|
3089
3250
|
);
|
|
3090
3251
|
}
|
|
@@ -3113,23 +3274,23 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3113
3274
|
if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
|
|
3114
3275
|
return false;
|
|
3115
3276
|
}, [minDate, maxDate]);
|
|
3116
|
-
return /* @__PURE__ */
|
|
3117
|
-
/* @__PURE__ */
|
|
3118
|
-
/* @__PURE__ */
|
|
3119
|
-
/* @__PURE__ */
|
|
3277
|
+
return /* @__PURE__ */ jsxs43(YStack42, { backgroundColor: "$color2", borderRadius: "$4", padding: "$3", gap: "$2", animation: "quick", children: [
|
|
3278
|
+
/* @__PURE__ */ jsxs43(XStack38, { alignItems: "center", justifyContent: "space-between", children: [
|
|
3279
|
+
/* @__PURE__ */ jsx53(NavButton, { label: "\u2039", onPress: () => navigate(-1) }),
|
|
3280
|
+
/* @__PURE__ */ jsxs43(SizableText45, { size: "$4", fontWeight: "700", color: "$color12", children: [
|
|
3120
3281
|
MONTH_NAMES[viewMonth],
|
|
3121
3282
|
" ",
|
|
3122
3283
|
viewYear
|
|
3123
3284
|
] }),
|
|
3124
|
-
/* @__PURE__ */
|
|
3285
|
+
/* @__PURE__ */ jsx53(NavButton, { label: "\u203A", onPress: () => navigate(1) })
|
|
3125
3286
|
] }),
|
|
3126
|
-
/* @__PURE__ */
|
|
3127
|
-
Array.from({ length: Math.ceil(grid.length / 7) }, (_, row) => /* @__PURE__ */
|
|
3287
|
+
/* @__PURE__ */ jsx53(XStack38, { children: headers.map((h) => /* @__PURE__ */ jsx53(SizableText45, { size: "$2", color: "$color8", fontWeight: "600", textAlign: "center", flex: 1, children: h }, h)) }),
|
|
3288
|
+
Array.from({ length: Math.ceil(grid.length / 7) }, (_, row) => /* @__PURE__ */ jsx53(XStack38, { children: grid.slice(row * 7, row * 7 + 7).map((cell, i) => {
|
|
3128
3289
|
const date = new Date(cell.year, cell.month, cell.day);
|
|
3129
3290
|
const selected = sameDay(value, date);
|
|
3130
3291
|
const isToday = sameDay(today, date);
|
|
3131
3292
|
const disabled = cell.outside || isDisabled(date);
|
|
3132
|
-
return /* @__PURE__ */
|
|
3293
|
+
return /* @__PURE__ */ jsx53(YStack42, { flex: 1, alignItems: "center", paddingVertical: "$0.5", children: /* @__PURE__ */ jsx53(
|
|
3133
3294
|
XStack38,
|
|
3134
3295
|
{
|
|
3135
3296
|
width: 40,
|
|
@@ -3145,7 +3306,7 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3145
3306
|
opacity: disabled ? 0.35 : 1,
|
|
3146
3307
|
cursor: disabled ? "default" : "pointer",
|
|
3147
3308
|
onPress: disabled ? void 0 : () => onDateChange?.(date),
|
|
3148
|
-
children: /* @__PURE__ */
|
|
3309
|
+
children: /* @__PURE__ */ jsx53(
|
|
3149
3310
|
SizableText45,
|
|
3150
3311
|
{
|
|
3151
3312
|
size: "$3",
|
|
@@ -3162,7 +3323,7 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3162
3323
|
|
|
3163
3324
|
// src/patterns/EventCard.tsx
|
|
3164
3325
|
import { SizableText as SizableText46, Theme, XStack as XStack39, YStack as YStack43 } from "tamagui";
|
|
3165
|
-
import { jsx as
|
|
3326
|
+
import { jsx as jsx54, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
3166
3327
|
var THEME_MAP = {
|
|
3167
3328
|
purple: "purple",
|
|
3168
3329
|
green: "green",
|
|
@@ -3173,8 +3334,8 @@ var THEME_MAP = {
|
|
|
3173
3334
|
};
|
|
3174
3335
|
function ParticipantDots({ count, max }) {
|
|
3175
3336
|
const dots = Math.min(count, 5);
|
|
3176
|
-
return /* @__PURE__ */
|
|
3177
|
-
/* @__PURE__ */
|
|
3337
|
+
return /* @__PURE__ */ jsxs44(XStack39, { alignItems: "center", gap: "$1.5", children: [
|
|
3338
|
+
/* @__PURE__ */ jsx54(XStack39, { children: Array.from({ length: dots }, (_, i) => /* @__PURE__ */ jsx54(
|
|
3178
3339
|
YStack43,
|
|
3179
3340
|
{
|
|
3180
3341
|
width: 22,
|
|
@@ -3186,18 +3347,18 @@ function ParticipantDots({ count, max }) {
|
|
|
3186
3347
|
marginLeft: i > 0 ? -8 : 0,
|
|
3187
3348
|
alignItems: "center",
|
|
3188
3349
|
justifyContent: "center",
|
|
3189
|
-
children: /* @__PURE__ */
|
|
3350
|
+
children: /* @__PURE__ */ jsx54(SizableText46, { size: "$1", color: "$color1", fontWeight: "700", children: String.fromCharCode(65 + i) })
|
|
3190
3351
|
},
|
|
3191
3352
|
i
|
|
3192
3353
|
)) }),
|
|
3193
|
-
/* @__PURE__ */
|
|
3354
|
+
/* @__PURE__ */ jsxs44(SizableText46, { size: "$2", color: "$color11", fontWeight: "500", children: [
|
|
3194
3355
|
count,
|
|
3195
3356
|
max ? `/${max}` : ""
|
|
3196
3357
|
] })
|
|
3197
3358
|
] });
|
|
3198
3359
|
}
|
|
3199
3360
|
function CardInner({ title, subtitle, time, location, label, participants, maxParticipants, onPress, actions }) {
|
|
3200
|
-
return /* @__PURE__ */
|
|
3361
|
+
return /* @__PURE__ */ jsxs44(
|
|
3201
3362
|
YStack43,
|
|
3202
3363
|
{
|
|
3203
3364
|
backgroundColor: "$color4",
|
|
@@ -3211,22 +3372,22 @@ function CardInner({ title, subtitle, time, location, label, participants, maxPa
|
|
|
3211
3372
|
pressStyle: onPress ? { scale: 0.97, opacity: 0.9 } : void 0,
|
|
3212
3373
|
cursor: onPress ? "pointer" : void 0,
|
|
3213
3374
|
children: [
|
|
3214
|
-
/* @__PURE__ */
|
|
3215
|
-
/* @__PURE__ */
|
|
3216
|
-
/* @__PURE__ */
|
|
3217
|
-
subtitle && /* @__PURE__ */
|
|
3375
|
+
/* @__PURE__ */ jsxs44(XStack39, { justifyContent: "space-between", alignItems: "flex-start", children: [
|
|
3376
|
+
/* @__PURE__ */ jsxs44(YStack43, { flex: 1, gap: "$1", children: [
|
|
3377
|
+
/* @__PURE__ */ jsx54(SizableText46, { size: "$6", fontWeight: "700", color: "$color12", children: title }),
|
|
3378
|
+
subtitle && /* @__PURE__ */ jsx54(SizableText46, { size: "$3", color: "$color11", opacity: 0.8, children: subtitle })
|
|
3218
3379
|
] }),
|
|
3219
|
-
time && /* @__PURE__ */
|
|
3380
|
+
time && /* @__PURE__ */ jsx54(YStack43, { backgroundColor: "$color6", paddingHorizontal: "$2.5", paddingVertical: "$1.5", borderRadius: "$3", children: /* @__PURE__ */ jsx54(SizableText46, { size: "$2", fontWeight: "600", color: "$color12", children: time }) })
|
|
3220
3381
|
] }),
|
|
3221
|
-
/* @__PURE__ */
|
|
3222
|
-
location && /* @__PURE__ */
|
|
3223
|
-
/* @__PURE__ */
|
|
3224
|
-
/* @__PURE__ */
|
|
3382
|
+
/* @__PURE__ */ jsxs44(XStack39, { gap: "$4", alignItems: "center", flexWrap: "wrap", children: [
|
|
3383
|
+
location && /* @__PURE__ */ jsxs44(XStack39, { gap: "$1.5", alignItems: "center", children: [
|
|
3384
|
+
/* @__PURE__ */ jsx54(SizableText46, { size: "$3", children: "\u{1F4CD}" }),
|
|
3385
|
+
/* @__PURE__ */ jsx54(SizableText46, { size: "$3", color: "$color11", children: location })
|
|
3225
3386
|
] }),
|
|
3226
|
-
participants !== void 0 && /* @__PURE__ */
|
|
3387
|
+
participants !== void 0 && /* @__PURE__ */ jsx54(ParticipantDots, { count: participants, max: maxParticipants })
|
|
3227
3388
|
] }),
|
|
3228
|
-
(label || actions) && /* @__PURE__ */
|
|
3229
|
-
label ? /* @__PURE__ */
|
|
3389
|
+
(label || actions) && /* @__PURE__ */ jsxs44(XStack39, { justifyContent: "space-between", alignItems: "center", children: [
|
|
3390
|
+
label ? /* @__PURE__ */ jsx54(XStack39, { backgroundColor: "$color6", paddingHorizontal: "$2.5", paddingVertical: "$1", borderRadius: "$10", children: /* @__PURE__ */ jsx54(SizableText46, { size: "$2", fontWeight: "600", color: "$color11", children: label }) }) : /* @__PURE__ */ jsx54(YStack43, {}),
|
|
3230
3391
|
actions
|
|
3231
3392
|
] })
|
|
3232
3393
|
]
|
|
@@ -3234,27 +3395,27 @@ function CardInner({ title, subtitle, time, location, label, participants, maxPa
|
|
|
3234
3395
|
);
|
|
3235
3396
|
}
|
|
3236
3397
|
function EventCard({ theme = "purple", ...props }) {
|
|
3237
|
-
return /* @__PURE__ */
|
|
3398
|
+
return /* @__PURE__ */ jsx54(Theme, { name: THEME_MAP[theme], children: /* @__PURE__ */ jsx54(CardInner, { ...props }) });
|
|
3238
3399
|
}
|
|
3239
3400
|
|
|
3240
3401
|
// src/patterns/UserPreferences.tsx
|
|
3241
3402
|
import { Separator as Separator6, SizableText as SizableText47, Slider, Switch as Switch2, XStack as XStack40, YStack as YStack44 } from "tamagui";
|
|
3242
|
-
import { jsx as
|
|
3403
|
+
import { jsx as jsx55, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
3243
3404
|
function ItemLabel({ title, description, color }) {
|
|
3244
|
-
return /* @__PURE__ */
|
|
3245
|
-
/* @__PURE__ */
|
|
3246
|
-
description && /* @__PURE__ */
|
|
3405
|
+
return /* @__PURE__ */ jsxs45(YStack44, { flex: 1, gap: "$1", children: [
|
|
3406
|
+
/* @__PURE__ */ jsx55(SizableText47, { size: "$4", fontWeight: "500", color: color ?? "$color12", children: title }),
|
|
3407
|
+
description && /* @__PURE__ */ jsx55(SizableText47, { size: "$2", color: "$color9", children: description })
|
|
3247
3408
|
] });
|
|
3248
3409
|
}
|
|
3249
3410
|
function ToggleRow({ item }) {
|
|
3250
|
-
return /* @__PURE__ */
|
|
3251
|
-
/* @__PURE__ */
|
|
3252
|
-
/* @__PURE__ */
|
|
3411
|
+
return /* @__PURE__ */ jsxs45(XStack40, { alignItems: "center", gap: "$3", paddingVertical: "$3", paddingHorizontal: "$4", children: [
|
|
3412
|
+
/* @__PURE__ */ jsx55(ItemLabel, { title: item.title, description: item.description }),
|
|
3413
|
+
/* @__PURE__ */ jsx55(Switch2, { size: "$3", checked: item.value, onCheckedChange: item.onValueChange, children: /* @__PURE__ */ jsx55(Switch2.Thumb, { animation: "quick" }) })
|
|
3253
3414
|
] });
|
|
3254
3415
|
}
|
|
3255
3416
|
function SelectRow({ item }) {
|
|
3256
3417
|
const current = item.options.find((o) => o.value === item.value);
|
|
3257
|
-
return /* @__PURE__ */
|
|
3418
|
+
return /* @__PURE__ */ jsxs45(
|
|
3258
3419
|
XStack40,
|
|
3259
3420
|
{
|
|
3260
3421
|
alignItems: "center",
|
|
@@ -3270,9 +3431,9 @@ function SelectRow({ item }) {
|
|
|
3270
3431
|
if (next) item.onValueChange(next.value);
|
|
3271
3432
|
},
|
|
3272
3433
|
children: [
|
|
3273
|
-
/* @__PURE__ */
|
|
3274
|
-
/* @__PURE__ */
|
|
3275
|
-
/* @__PURE__ */
|
|
3434
|
+
/* @__PURE__ */ jsx55(ItemLabel, { title: item.title, description: item.description }),
|
|
3435
|
+
/* @__PURE__ */ jsx55(SizableText47, { size: "$3", color: "$color9", fontWeight: "500", children: current?.label ?? item.value }),
|
|
3436
|
+
/* @__PURE__ */ jsx55(SizableText47, { size: "$4", color: "$color8", children: "\u203A" })
|
|
3276
3437
|
]
|
|
3277
3438
|
}
|
|
3278
3439
|
);
|
|
@@ -3280,12 +3441,12 @@ function SelectRow({ item }) {
|
|
|
3280
3441
|
function SliderRow({ item }) {
|
|
3281
3442
|
const min = item.min ?? 0;
|
|
3282
3443
|
const max = item.max ?? 100;
|
|
3283
|
-
return /* @__PURE__ */
|
|
3284
|
-
/* @__PURE__ */
|
|
3285
|
-
/* @__PURE__ */
|
|
3286
|
-
/* @__PURE__ */
|
|
3444
|
+
return /* @__PURE__ */ jsxs45(YStack44, { gap: "$2", paddingVertical: "$3", paddingHorizontal: "$4", children: [
|
|
3445
|
+
/* @__PURE__ */ jsxs45(XStack40, { justifyContent: "space-between", alignItems: "center", children: [
|
|
3446
|
+
/* @__PURE__ */ jsx55(ItemLabel, { title: item.title, description: item.description }),
|
|
3447
|
+
/* @__PURE__ */ jsx55(SizableText47, { size: "$3", fontWeight: "600", color: "$color11", children: item.value })
|
|
3287
3448
|
] }),
|
|
3288
|
-
/* @__PURE__ */
|
|
3449
|
+
/* @__PURE__ */ jsxs45(
|
|
3289
3450
|
Slider,
|
|
3290
3451
|
{
|
|
3291
3452
|
value: [item.value],
|
|
@@ -3296,15 +3457,15 @@ function SliderRow({ item }) {
|
|
|
3296
3457
|
if (v !== void 0) item.onValueChange(v);
|
|
3297
3458
|
},
|
|
3298
3459
|
children: [
|
|
3299
|
-
/* @__PURE__ */
|
|
3300
|
-
/* @__PURE__ */
|
|
3460
|
+
/* @__PURE__ */ jsx55(Slider.Track, { backgroundColor: "$color4", height: 4, children: /* @__PURE__ */ jsx55(Slider.TrackActive, { backgroundColor: "$color9" }) }),
|
|
3461
|
+
/* @__PURE__ */ jsx55(Slider.Thumb, { index: 0, size: "$1.5", backgroundColor: "$color9", borderWidth: 0, circular: true })
|
|
3301
3462
|
]
|
|
3302
3463
|
}
|
|
3303
3464
|
)
|
|
3304
3465
|
] });
|
|
3305
3466
|
}
|
|
3306
3467
|
function ActionRow({ item }) {
|
|
3307
|
-
return /* @__PURE__ */
|
|
3468
|
+
return /* @__PURE__ */ jsxs45(
|
|
3308
3469
|
XStack40,
|
|
3309
3470
|
{
|
|
3310
3471
|
alignItems: "center",
|
|
@@ -3316,7 +3477,7 @@ function ActionRow({ item }) {
|
|
|
3316
3477
|
cursor: "pointer",
|
|
3317
3478
|
onPress: item.onPress,
|
|
3318
3479
|
children: [
|
|
3319
|
-
/* @__PURE__ */
|
|
3480
|
+
/* @__PURE__ */ jsx55(
|
|
3320
3481
|
ItemLabel,
|
|
3321
3482
|
{
|
|
3322
3483
|
title: item.title,
|
|
@@ -3324,7 +3485,7 @@ function ActionRow({ item }) {
|
|
|
3324
3485
|
color: item.destructive ? "$red10" : void 0
|
|
3325
3486
|
}
|
|
3326
3487
|
),
|
|
3327
|
-
/* @__PURE__ */
|
|
3488
|
+
/* @__PURE__ */ jsx55(SizableText47, { size: "$4", color: "$color8", children: "\u203A" })
|
|
3328
3489
|
]
|
|
3329
3490
|
}
|
|
3330
3491
|
);
|
|
@@ -3332,22 +3493,22 @@ function ActionRow({ item }) {
|
|
|
3332
3493
|
function PreferenceRow({ item }) {
|
|
3333
3494
|
switch (item.type) {
|
|
3334
3495
|
case "toggle":
|
|
3335
|
-
return /* @__PURE__ */
|
|
3496
|
+
return /* @__PURE__ */ jsx55(ToggleRow, { item });
|
|
3336
3497
|
case "select":
|
|
3337
|
-
return /* @__PURE__ */
|
|
3498
|
+
return /* @__PURE__ */ jsx55(SelectRow, { item });
|
|
3338
3499
|
case "slider":
|
|
3339
|
-
return /* @__PURE__ */
|
|
3500
|
+
return /* @__PURE__ */ jsx55(SliderRow, { item });
|
|
3340
3501
|
case "action":
|
|
3341
|
-
return /* @__PURE__ */
|
|
3502
|
+
return /* @__PURE__ */ jsx55(ActionRow, { item });
|
|
3342
3503
|
}
|
|
3343
3504
|
}
|
|
3344
3505
|
function UserPreferences({ sections }) {
|
|
3345
|
-
return /* @__PURE__ */
|
|
3346
|
-
/* @__PURE__ */
|
|
3347
|
-
/* @__PURE__ */
|
|
3348
|
-
section.description && /* @__PURE__ */
|
|
3506
|
+
return /* @__PURE__ */ jsx55(YStack44, { gap: "$5", children: sections.map((section, si) => /* @__PURE__ */ jsxs45(YStack44, { gap: "$2", children: [
|
|
3507
|
+
/* @__PURE__ */ jsxs45(YStack44, { paddingHorizontal: "$1", gap: "$0.5", children: [
|
|
3508
|
+
/* @__PURE__ */ jsx55(SizableText47, { size: "$2", fontWeight: "600", color: "$color9", textTransform: "uppercase", children: section.title }),
|
|
3509
|
+
section.description && /* @__PURE__ */ jsx55(SizableText47, { size: "$2", color: "$color8", children: section.description })
|
|
3349
3510
|
] }),
|
|
3350
|
-
/* @__PURE__ */
|
|
3511
|
+
/* @__PURE__ */ jsx55(
|
|
3351
3512
|
YStack44,
|
|
3352
3513
|
{
|
|
3353
3514
|
backgroundColor: "$color2",
|
|
@@ -3355,9 +3516,9 @@ function UserPreferences({ sections }) {
|
|
|
3355
3516
|
overflow: "hidden",
|
|
3356
3517
|
borderWidth: 1,
|
|
3357
3518
|
borderColor: "$color4",
|
|
3358
|
-
children: section.items.map((item, ii) => /* @__PURE__ */
|
|
3359
|
-
/* @__PURE__ */
|
|
3360
|
-
ii < section.items.length - 1 && /* @__PURE__ */
|
|
3519
|
+
children: section.items.map((item, ii) => /* @__PURE__ */ jsxs45(YStack44, { children: [
|
|
3520
|
+
/* @__PURE__ */ jsx55(PreferenceRow, { item }),
|
|
3521
|
+
ii < section.items.length - 1 && /* @__PURE__ */ jsx55(Separator6, { borderColor: "$color4" })
|
|
3361
3522
|
] }, item.id))
|
|
3362
3523
|
}
|
|
3363
3524
|
)
|
|
@@ -3366,7 +3527,7 @@ function UserPreferences({ sections }) {
|
|
|
3366
3527
|
|
|
3367
3528
|
// src/patterns/BlinkSelect.tsx
|
|
3368
3529
|
import { Select, Adapt, Sheet as Sheet3, YStack as YStack45, SizableText as SizableText48 } from "tamagui";
|
|
3369
|
-
import { jsx as
|
|
3530
|
+
import { jsx as jsx56, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
3370
3531
|
function BlinkSelect({
|
|
3371
3532
|
items,
|
|
3372
3533
|
value,
|
|
@@ -3377,9 +3538,9 @@ function BlinkSelect({
|
|
|
3377
3538
|
disabled,
|
|
3378
3539
|
width = "100%"
|
|
3379
3540
|
}) {
|
|
3380
|
-
return /* @__PURE__ */
|
|
3381
|
-
label ? /* @__PURE__ */
|
|
3382
|
-
/* @__PURE__ */
|
|
3541
|
+
return /* @__PURE__ */ jsxs46(YStack45, { gap: "$1.5", width, children: [
|
|
3542
|
+
label ? /* @__PURE__ */ jsx56(SizableText48, { size: "$3", fontWeight: "600", children: label }) : null,
|
|
3543
|
+
/* @__PURE__ */ jsxs46(
|
|
3383
3544
|
Select,
|
|
3384
3545
|
{
|
|
3385
3546
|
value,
|
|
@@ -3387,18 +3548,18 @@ function BlinkSelect({
|
|
|
3387
3548
|
disablePreventBodyScroll: true,
|
|
3388
3549
|
...disabled ? { disabled: true } : {},
|
|
3389
3550
|
children: [
|
|
3390
|
-
/* @__PURE__ */
|
|
3391
|
-
/* @__PURE__ */
|
|
3392
|
-
/* @__PURE__ */
|
|
3393
|
-
/* @__PURE__ */
|
|
3551
|
+
/* @__PURE__ */ jsx56(Select.Trigger, { width: "100%", iconAfter: () => /* @__PURE__ */ jsx56(SizableText48, { children: "\u25BC" }), size, children: /* @__PURE__ */ jsx56(Select.Value, { placeholder }) }),
|
|
3552
|
+
/* @__PURE__ */ jsx56(Adapt, { when: "maxMd", platform: "touch", children: /* @__PURE__ */ jsxs46(Sheet3, { modal: true, dismissOnSnapToBottom: true, snapPointsMode: "fit", children: [
|
|
3553
|
+
/* @__PURE__ */ jsx56(Sheet3.Frame, { padding: "$4", children: /* @__PURE__ */ jsx56(Adapt.Contents, {}) }),
|
|
3554
|
+
/* @__PURE__ */ jsx56(Sheet3.Overlay, {})
|
|
3394
3555
|
] }) }),
|
|
3395
|
-
/* @__PURE__ */
|
|
3396
|
-
/* @__PURE__ */
|
|
3397
|
-
/* @__PURE__ */
|
|
3398
|
-
/* @__PURE__ */
|
|
3399
|
-
/* @__PURE__ */
|
|
3556
|
+
/* @__PURE__ */ jsxs46(Select.Content, { zIndex: 2e5, children: [
|
|
3557
|
+
/* @__PURE__ */ jsx56(Select.ScrollUpButton, { alignItems: "center", justifyContent: "center", height: "$3", children: /* @__PURE__ */ jsx56(SizableText48, { children: "\u25B2" }) }),
|
|
3558
|
+
/* @__PURE__ */ jsx56(Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ jsx56(Select.Group, { children: items.map((item, i) => /* @__PURE__ */ jsxs46(Select.Item, { index: i, value: item.value, children: [
|
|
3559
|
+
/* @__PURE__ */ jsx56(Select.ItemText, { children: item.label }),
|
|
3560
|
+
/* @__PURE__ */ jsx56(Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ jsx56(SizableText48, { children: "\u2713" }) })
|
|
3400
3561
|
] }, item.value)) }) }),
|
|
3401
|
-
/* @__PURE__ */
|
|
3562
|
+
/* @__PURE__ */ jsx56(Select.ScrollDownButton, { alignItems: "center", justifyContent: "center", height: "$3", children: /* @__PURE__ */ jsx56(SizableText48, { children: "\u25BC" }) })
|
|
3402
3563
|
] })
|
|
3403
3564
|
]
|
|
3404
3565
|
}
|
|
@@ -3408,7 +3569,7 @@ function BlinkSelect({
|
|
|
3408
3569
|
|
|
3409
3570
|
// src/patterns/BlinkDialog.tsx
|
|
3410
3571
|
import { Dialog, Adapt as Adapt2, Sheet as Sheet4, Button as Button11, XStack as XStack41 } from "tamagui";
|
|
3411
|
-
import { jsx as
|
|
3572
|
+
import { jsx as jsx57, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
3412
3573
|
function BlinkDialog({
|
|
3413
3574
|
open,
|
|
3414
3575
|
onOpenChange,
|
|
@@ -3422,14 +3583,14 @@ function BlinkDialog({
|
|
|
3422
3583
|
onCancel,
|
|
3423
3584
|
confirmTheme = "active"
|
|
3424
3585
|
}) {
|
|
3425
|
-
return /* @__PURE__ */
|
|
3426
|
-
trigger && /* @__PURE__ */
|
|
3427
|
-
/* @__PURE__ */
|
|
3428
|
-
/* @__PURE__ */
|
|
3429
|
-
/* @__PURE__ */
|
|
3586
|
+
return /* @__PURE__ */ jsxs47(Dialog, { modal: true, open, onOpenChange, children: [
|
|
3587
|
+
trigger && /* @__PURE__ */ jsx57(Dialog.Trigger, { asChild: true, children: trigger }),
|
|
3588
|
+
/* @__PURE__ */ jsx57(Adapt2, { when: "maxMd", platform: "touch", children: /* @__PURE__ */ jsxs47(Sheet4, { modal: true, dismissOnSnapToBottom: true, snapPointsMode: "fit", children: [
|
|
3589
|
+
/* @__PURE__ */ jsx57(Sheet4.Frame, { padding: "$4", gap: "$4", children: /* @__PURE__ */ jsx57(Adapt2.Contents, {}) }),
|
|
3590
|
+
/* @__PURE__ */ jsx57(Sheet4.Overlay, {})
|
|
3430
3591
|
] }) }),
|
|
3431
|
-
/* @__PURE__ */
|
|
3432
|
-
/* @__PURE__ */
|
|
3592
|
+
/* @__PURE__ */ jsxs47(Dialog.Portal, { children: [
|
|
3593
|
+
/* @__PURE__ */ jsx57(
|
|
3433
3594
|
Dialog.Overlay,
|
|
3434
3595
|
{
|
|
3435
3596
|
animation: "quick",
|
|
@@ -3439,7 +3600,7 @@ function BlinkDialog({
|
|
|
3439
3600
|
},
|
|
3440
3601
|
"overlay"
|
|
3441
3602
|
),
|
|
3442
|
-
/* @__PURE__ */
|
|
3603
|
+
/* @__PURE__ */ jsxs47(
|
|
3443
3604
|
Dialog.Content,
|
|
3444
3605
|
{
|
|
3445
3606
|
bordered: true,
|
|
@@ -3450,12 +3611,12 @@ function BlinkDialog({
|
|
|
3450
3611
|
exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
|
|
3451
3612
|
gap: "$4",
|
|
3452
3613
|
children: [
|
|
3453
|
-
title && /* @__PURE__ */
|
|
3454
|
-
description && /* @__PURE__ */
|
|
3614
|
+
title && /* @__PURE__ */ jsx57(Dialog.Title, { children: title }),
|
|
3615
|
+
description && /* @__PURE__ */ jsx57(Dialog.Description, { size: "$3", color: "$color10", children: description }),
|
|
3455
3616
|
children,
|
|
3456
|
-
(onConfirm || onCancel) && /* @__PURE__ */
|
|
3457
|
-
onCancel && /* @__PURE__ */
|
|
3458
|
-
onConfirm && /* @__PURE__ */
|
|
3617
|
+
(onConfirm || onCancel) && /* @__PURE__ */ jsxs47(XStack41, { justifyContent: "flex-end", gap: "$3", children: [
|
|
3618
|
+
onCancel && /* @__PURE__ */ jsx57(Dialog.Close, { displayWhenAdapted: true, asChild: true, children: /* @__PURE__ */ jsx57(Button11, { variant: "outlined", onPress: onCancel, children: cancelLabel }) }),
|
|
3619
|
+
onConfirm && /* @__PURE__ */ jsx57(Dialog.Close, { displayWhenAdapted: true, asChild: true, children: /* @__PURE__ */ jsx57(Button11, { theme: confirmTheme, onPress: onConfirm, children: confirmLabel }) })
|
|
3459
3620
|
] })
|
|
3460
3621
|
]
|
|
3461
3622
|
},
|
|
@@ -3467,7 +3628,7 @@ function BlinkDialog({
|
|
|
3467
3628
|
|
|
3468
3629
|
// src/patterns/BlinkPopover.tsx
|
|
3469
3630
|
import { Popover as Popover2, Adapt as Adapt3, YStack as YStack46 } from "tamagui";
|
|
3470
|
-
import { jsx as
|
|
3631
|
+
import { jsx as jsx58, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
3471
3632
|
function BlinkPopover({
|
|
3472
3633
|
trigger,
|
|
3473
3634
|
children,
|
|
@@ -3475,13 +3636,13 @@ function BlinkPopover({
|
|
|
3475
3636
|
allowFlip = true,
|
|
3476
3637
|
size = "$5"
|
|
3477
3638
|
}) {
|
|
3478
|
-
return /* @__PURE__ */
|
|
3479
|
-
/* @__PURE__ */
|
|
3480
|
-
/* @__PURE__ */
|
|
3481
|
-
/* @__PURE__ */
|
|
3482
|
-
/* @__PURE__ */
|
|
3639
|
+
return /* @__PURE__ */ jsxs48(Popover2, { size, allowFlip, placement, children: [
|
|
3640
|
+
/* @__PURE__ */ jsx58(Popover2.Trigger, { asChild: true, children: trigger }),
|
|
3641
|
+
/* @__PURE__ */ jsx58(Adapt3, { when: "maxMd", platform: "touch", children: /* @__PURE__ */ jsxs48(Popover2.Sheet, { modal: true, dismissOnSnapToBottom: true, snapPointsMode: "fit", children: [
|
|
3642
|
+
/* @__PURE__ */ jsx58(Popover2.Sheet.Frame, { padding: "$4", children: /* @__PURE__ */ jsx58(Adapt3.Contents, {}) }),
|
|
3643
|
+
/* @__PURE__ */ jsx58(Popover2.Sheet.Overlay, {})
|
|
3483
3644
|
] }) }),
|
|
3484
|
-
/* @__PURE__ */
|
|
3645
|
+
/* @__PURE__ */ jsxs48(
|
|
3485
3646
|
Popover2.Content,
|
|
3486
3647
|
{
|
|
3487
3648
|
borderWidth: 1,
|
|
@@ -3491,8 +3652,8 @@ function BlinkPopover({
|
|
|
3491
3652
|
elevate: true,
|
|
3492
3653
|
animation: ["quick", { opacity: { overshootClamping: true } }],
|
|
3493
3654
|
children: [
|
|
3494
|
-
/* @__PURE__ */
|
|
3495
|
-
/* @__PURE__ */
|
|
3655
|
+
/* @__PURE__ */ jsx58(Popover2.Arrow, { borderWidth: 1, borderColor: "$borderColor" }),
|
|
3656
|
+
/* @__PURE__ */ jsx58(YStack46, { gap: "$3", padding: "$3", children })
|
|
3496
3657
|
]
|
|
3497
3658
|
}
|
|
3498
3659
|
)
|
|
@@ -3501,7 +3662,7 @@ function BlinkPopover({
|
|
|
3501
3662
|
|
|
3502
3663
|
// src/patterns/ImmersiveMediaScreen.tsx
|
|
3503
3664
|
import { Button as Button12, SizableText as SizableText49, XStack as XStack42, YStack as YStack47 } from "tamagui";
|
|
3504
|
-
import { jsx as
|
|
3665
|
+
import { jsx as jsx59, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
3505
3666
|
function ImmersiveMediaScreen({
|
|
3506
3667
|
variant = "reel",
|
|
3507
3668
|
media,
|
|
@@ -3517,16 +3678,16 @@ function ImmersiveMediaScreen({
|
|
|
3517
3678
|
sheetContent
|
|
3518
3679
|
}) {
|
|
3519
3680
|
const showSheet = variant === "sheet";
|
|
3520
|
-
return /* @__PURE__ */
|
|
3521
|
-
/* @__PURE__ */
|
|
3681
|
+
return /* @__PURE__ */ jsxs49(YStack47, { flex: 1, backgroundColor: "$color1", children: [
|
|
3682
|
+
/* @__PURE__ */ jsxs49(YStack47, { flex: 1, position: "relative", children: [
|
|
3522
3683
|
media,
|
|
3523
|
-
/* @__PURE__ */
|
|
3524
|
-
/* @__PURE__ */
|
|
3525
|
-
/* @__PURE__ */
|
|
3526
|
-
/* @__PURE__ */
|
|
3684
|
+
/* @__PURE__ */ jsxs49(XStack42, { position: "absolute", top: "$5", left: "$4", right: "$4", justifyContent: "space-between", alignItems: "center", children: [
|
|
3685
|
+
/* @__PURE__ */ jsx59(XStack42, { minWidth: 56, children: topLeft }),
|
|
3686
|
+
/* @__PURE__ */ jsx59(YStack47, { alignItems: "center", flex: 1, children: topCenter }),
|
|
3687
|
+
/* @__PURE__ */ jsx59(XStack42, { minWidth: 56, justifyContent: "flex-end", children: topRight })
|
|
3527
3688
|
] }),
|
|
3528
|
-
actions.length > 0 ? /* @__PURE__ */
|
|
3529
|
-
/* @__PURE__ */
|
|
3689
|
+
actions.length > 0 ? /* @__PURE__ */ jsx59(YStack47, { position: "absolute", right: "$3", bottom: showSheet ? "$20" : "$10", gap: "$3", alignItems: "center", children: actions.map((action) => /* @__PURE__ */ jsxs49(YStack47, { gap: "$1", alignItems: "center", onPress: action.onPress, children: [
|
|
3690
|
+
/* @__PURE__ */ jsx59(
|
|
3530
3691
|
YStack47,
|
|
3531
3692
|
{
|
|
3532
3693
|
width: 44,
|
|
@@ -3535,17 +3696,17 @@ function ImmersiveMediaScreen({
|
|
|
3535
3696
|
backgroundColor: "rgba(0,0,0,0.55)",
|
|
3536
3697
|
alignItems: "center",
|
|
3537
3698
|
justifyContent: "center",
|
|
3538
|
-
children: action.icon ?? /* @__PURE__ */
|
|
3699
|
+
children: action.icon ?? /* @__PURE__ */ jsx59(SizableText49, { size: "$5", color: "white", children: "\u2022" })
|
|
3539
3700
|
}
|
|
3540
3701
|
),
|
|
3541
|
-
action.value ? /* @__PURE__ */
|
|
3542
|
-
action.label ? /* @__PURE__ */
|
|
3702
|
+
action.value ? /* @__PURE__ */ jsx59(SizableText49, { size: "$2", color: "white", children: action.value }) : null,
|
|
3703
|
+
action.label ? /* @__PURE__ */ jsx59(SizableText49, { size: "$1", color: "rgba(255,255,255,0.8)", children: action.label }) : null
|
|
3543
3704
|
] }, action.id)) }) : null,
|
|
3544
|
-
/* @__PURE__ */
|
|
3545
|
-
title ? /* @__PURE__ */
|
|
3546
|
-
subtitle ? /* @__PURE__ */
|
|
3705
|
+
/* @__PURE__ */ jsxs49(YStack47, { position: "absolute", left: "$4", right: "$4", bottom: showSheet ? "$20" : "$6", gap: "$2", children: [
|
|
3706
|
+
title ? /* @__PURE__ */ jsx59(SizableText49, { size: "$6", fontWeight: "800", color: "white", children: title }) : null,
|
|
3707
|
+
subtitle ? /* @__PURE__ */ jsx59(SizableText49, { size: "$3", color: "rgba(255,255,255,0.82)", children: subtitle }) : null,
|
|
3547
3708
|
bottomMeta,
|
|
3548
|
-
variant === "story" && inputPlaceholder ? /* @__PURE__ */
|
|
3709
|
+
variant === "story" && inputPlaceholder ? /* @__PURE__ */ jsx59(
|
|
3549
3710
|
XStack42,
|
|
3550
3711
|
{
|
|
3551
3712
|
onPress: onInputPress,
|
|
@@ -3556,22 +3717,22 @@ function ImmersiveMediaScreen({
|
|
|
3556
3717
|
backgroundColor: "rgba(255,255,255,0.14)",
|
|
3557
3718
|
borderWidth: 1,
|
|
3558
3719
|
borderColor: "rgba(255,255,255,0.25)",
|
|
3559
|
-
children: /* @__PURE__ */
|
|
3720
|
+
children: /* @__PURE__ */ jsx59(SizableText49, { size: "$3", color: "rgba(255,255,255,0.82)", children: inputPlaceholder })
|
|
3560
3721
|
}
|
|
3561
3722
|
) : null
|
|
3562
3723
|
] })
|
|
3563
3724
|
] }),
|
|
3564
|
-
showSheet ? /* @__PURE__ */
|
|
3565
|
-
/* @__PURE__ */
|
|
3725
|
+
showSheet ? /* @__PURE__ */ jsxs49(YStack47, { padding: "$4", gap: "$3", backgroundColor: "$background", borderTopLeftRadius: "$8", borderTopRightRadius: "$8", marginTop: -18, children: [
|
|
3726
|
+
/* @__PURE__ */ jsx59(XStack42, { alignSelf: "center", width: 48, height: 5, borderRadius: "$10", backgroundColor: "$color5" }),
|
|
3566
3727
|
sheetContent,
|
|
3567
|
-
inputPlaceholder ? /* @__PURE__ */
|
|
3728
|
+
inputPlaceholder ? /* @__PURE__ */ jsx59(Button12, { size: "$5", backgroundColor: "$color9", color: "$color1", onPress: onInputPress, children: inputPlaceholder }) : null
|
|
3568
3729
|
] }) : null
|
|
3569
3730
|
] });
|
|
3570
3731
|
}
|
|
3571
3732
|
|
|
3572
3733
|
// src/patterns/FinanceDashboard.tsx
|
|
3573
3734
|
import { SizableText as SizableText50, XStack as XStack43, YStack as YStack48 } from "tamagui";
|
|
3574
|
-
import { jsx as
|
|
3735
|
+
import { jsx as jsx60, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
3575
3736
|
function FinanceDashboard({
|
|
3576
3737
|
title = "Overview",
|
|
3577
3738
|
balanceLabel = "Available balance",
|
|
@@ -3583,25 +3744,25 @@ function FinanceDashboard({
|
|
|
3583
3744
|
chartSlot,
|
|
3584
3745
|
topRight
|
|
3585
3746
|
}) {
|
|
3586
|
-
return /* @__PURE__ */
|
|
3587
|
-
/* @__PURE__ */
|
|
3588
|
-
/* @__PURE__ */
|
|
3589
|
-
/* @__PURE__ */
|
|
3590
|
-
rangeLabel ? /* @__PURE__ */
|
|
3747
|
+
return /* @__PURE__ */ jsxs50(YStack48, { flex: 1, backgroundColor: "$background", padding: "$4", gap: "$4", children: [
|
|
3748
|
+
/* @__PURE__ */ jsxs50(XStack43, { justifyContent: "space-between", alignItems: "center", paddingTop: "$4", children: [
|
|
3749
|
+
/* @__PURE__ */ jsxs50(YStack48, { gap: "$1", children: [
|
|
3750
|
+
/* @__PURE__ */ jsx60(SizableText50, { size: "$6", fontWeight: "700", children: title }),
|
|
3751
|
+
rangeLabel ? /* @__PURE__ */ jsx60(SizableText50, { size: "$2", color: "$color9", children: rangeLabel }) : null
|
|
3591
3752
|
] }),
|
|
3592
3753
|
topRight
|
|
3593
3754
|
] }),
|
|
3594
|
-
/* @__PURE__ */
|
|
3595
|
-
/* @__PURE__ */
|
|
3596
|
-
/* @__PURE__ */
|
|
3597
|
-
chartSlot ? /* @__PURE__ */
|
|
3755
|
+
/* @__PURE__ */ jsxs50(YStack48, { backgroundColor: "$color1", borderRadius: "$7", padding: "$4", gap: "$2", borderWidth: 1, borderColor: "$color4", children: [
|
|
3756
|
+
/* @__PURE__ */ jsx60(SizableText50, { size: "$3", color: "$color10", children: balanceLabel }),
|
|
3757
|
+
/* @__PURE__ */ jsx60(SizableText50, { size: "$11", fontWeight: "800", children: balance }),
|
|
3758
|
+
chartSlot ? /* @__PURE__ */ jsx60(YStack48, { marginTop: "$2", children: chartSlot }) : null
|
|
3598
3759
|
] }),
|
|
3599
|
-
metrics.length > 0 ? /* @__PURE__ */
|
|
3600
|
-
/* @__PURE__ */
|
|
3601
|
-
/* @__PURE__ */
|
|
3602
|
-
metric.change ? /* @__PURE__ */
|
|
3760
|
+
metrics.length > 0 ? /* @__PURE__ */ jsx60(XStack43, { gap: "$3", flexWrap: "wrap", children: metrics.map((metric) => /* @__PURE__ */ jsxs50(YStack48, { flex: 1, minWidth: 120, backgroundColor: "$color1", borderRadius: "$6", padding: "$3", gap: "$1", borderWidth: 1, borderColor: "$color4", children: [
|
|
3761
|
+
/* @__PURE__ */ jsx60(SizableText50, { size: "$2", color: "$color10", children: metric.label }),
|
|
3762
|
+
/* @__PURE__ */ jsx60(SizableText50, { size: "$7", fontWeight: "800", children: metric.value }),
|
|
3763
|
+
metric.change ? /* @__PURE__ */ jsx60(SizableText50, { size: "$2", color: "$color9", children: metric.change }) : null
|
|
3603
3764
|
] }, metric.label)) }) : null,
|
|
3604
|
-
quickActions.length > 0 ? /* @__PURE__ */
|
|
3765
|
+
quickActions.length > 0 ? /* @__PURE__ */ jsx60(XStack43, { gap: "$3", flexWrap: "wrap", children: quickActions.map((action) => /* @__PURE__ */ jsxs50(
|
|
3605
3766
|
YStack48,
|
|
3606
3767
|
{
|
|
3607
3768
|
flex: 1,
|
|
@@ -3616,15 +3777,15 @@ function FinanceDashboard({
|
|
|
3616
3777
|
borderColor: "$color4",
|
|
3617
3778
|
onPress: action.onPress,
|
|
3618
3779
|
children: [
|
|
3619
|
-
/* @__PURE__ */
|
|
3620
|
-
/* @__PURE__ */
|
|
3780
|
+
/* @__PURE__ */ jsx60(YStack48, { width: 36, height: 36, borderRadius: "$10", backgroundColor: "$color3", alignItems: "center", justifyContent: "center", children: action.icon ?? /* @__PURE__ */ jsx60(SizableText50, { size: "$4", children: "\u2022" }) }),
|
|
3781
|
+
/* @__PURE__ */ jsx60(SizableText50, { size: "$2", textAlign: "center", children: action.label })
|
|
3621
3782
|
]
|
|
3622
3783
|
},
|
|
3623
3784
|
action.id
|
|
3624
3785
|
)) }) : null,
|
|
3625
|
-
/* @__PURE__ */
|
|
3626
|
-
/* @__PURE__ */
|
|
3627
|
-
/* @__PURE__ */
|
|
3786
|
+
/* @__PURE__ */ jsx60(YStack48, { gap: "$3", children: sections.map((section, index) => /* @__PURE__ */ jsxs50(YStack48, { backgroundColor: "$color1", borderRadius: "$6", borderWidth: 1, borderColor: "$color4", overflow: "hidden", children: [
|
|
3787
|
+
/* @__PURE__ */ jsx60(XStack43, { padding: "$3", justifyContent: "space-between", alignItems: "center", children: /* @__PURE__ */ jsx60(SizableText50, { size: "$4", fontWeight: "700", children: section.title }) }),
|
|
3788
|
+
/* @__PURE__ */ jsx60(YStack48, { children: section.rows.map((row, index2) => /* @__PURE__ */ jsxs50(
|
|
3628
3789
|
XStack43,
|
|
3629
3790
|
{
|
|
3630
3791
|
padding: "$3",
|
|
@@ -3633,12 +3794,12 @@ function FinanceDashboard({
|
|
|
3633
3794
|
borderTopWidth: index2 === 0 ? 0 : 1,
|
|
3634
3795
|
borderTopColor: "$color4",
|
|
3635
3796
|
children: [
|
|
3636
|
-
row.leading ? /* @__PURE__ */
|
|
3637
|
-
/* @__PURE__ */
|
|
3638
|
-
/* @__PURE__ */
|
|
3639
|
-
row.subtitle ? /* @__PURE__ */
|
|
3797
|
+
row.leading ? /* @__PURE__ */ jsx60(YStack48, { width: 32, height: 32, borderRadius: "$8", backgroundColor: "$color3", alignItems: "center", justifyContent: "center", children: row.leading }) : null,
|
|
3798
|
+
/* @__PURE__ */ jsxs50(YStack48, { flex: 1, children: [
|
|
3799
|
+
/* @__PURE__ */ jsx60(SizableText50, { size: "$3", fontWeight: "600", children: row.title }),
|
|
3800
|
+
row.subtitle ? /* @__PURE__ */ jsx60(SizableText50, { size: "$2", color: "$color10", children: row.subtitle }) : null
|
|
3640
3801
|
] }),
|
|
3641
|
-
row.value ? /* @__PURE__ */
|
|
3802
|
+
row.value ? /* @__PURE__ */ jsx60(SizableText50, { size: "$3", color: "$color11", children: row.value }) : null
|
|
3642
3803
|
]
|
|
3643
3804
|
},
|
|
3644
3805
|
row.id
|
|
@@ -3654,10 +3815,13 @@ export {
|
|
|
3654
3815
|
Anchor,
|
|
3655
3816
|
AnimatePresence,
|
|
3656
3817
|
AppHeader,
|
|
3818
|
+
AppleLogo,
|
|
3657
3819
|
Article,
|
|
3658
3820
|
Aside,
|
|
3659
3821
|
Avatar2 as Avatar,
|
|
3660
3822
|
AvatarGroup,
|
|
3823
|
+
BLINK_DESIGN_THEMES,
|
|
3824
|
+
BLINK_DESIGN_THEME_IDS,
|
|
3661
3825
|
Badge,
|
|
3662
3826
|
BlinkAccordion,
|
|
3663
3827
|
Avatar as BlinkAvatar,
|
|
@@ -3681,7 +3845,7 @@ export {
|
|
|
3681
3845
|
Checkbox,
|
|
3682
3846
|
Chip,
|
|
3683
3847
|
ChipGroup,
|
|
3684
|
-
|
|
3848
|
+
Circle12 as Circle,
|
|
3685
3849
|
ConfirmDialog,
|
|
3686
3850
|
Container,
|
|
3687
3851
|
CountdownBanner,
|
|
@@ -3700,7 +3864,9 @@ export {
|
|
|
3700
3864
|
Form,
|
|
3701
3865
|
FormField,
|
|
3702
3866
|
Frame,
|
|
3867
|
+
GitHubLogo,
|
|
3703
3868
|
GlassCard,
|
|
3869
|
+
GoogleLogo,
|
|
3704
3870
|
Grid,
|
|
3705
3871
|
Group,
|
|
3706
3872
|
H12 as H1,
|
|
@@ -3722,6 +3888,7 @@ export {
|
|
|
3722
3888
|
LoginScreen,
|
|
3723
3889
|
Main,
|
|
3724
3890
|
MediaCard,
|
|
3891
|
+
MicrosoftLogo,
|
|
3725
3892
|
Nav,
|
|
3726
3893
|
NotificationBanner,
|
|
3727
3894
|
OTPInput,
|
|
@@ -3746,7 +3913,7 @@ export {
|
|
|
3746
3913
|
RadioGroup,
|
|
3747
3914
|
SafeArea,
|
|
3748
3915
|
ScreenLayout,
|
|
3749
|
-
|
|
3916
|
+
ScrollView6 as ScrollView,
|
|
3750
3917
|
SearchBar,
|
|
3751
3918
|
Section,
|
|
3752
3919
|
Select2 as Select,
|
|
@@ -3802,6 +3969,8 @@ export {
|
|
|
3802
3969
|
createTokens,
|
|
3803
3970
|
createVariable,
|
|
3804
3971
|
dialogConfirm,
|
|
3972
|
+
getBlinkDesignTheme,
|
|
3973
|
+
getBlinkThemePalettes,
|
|
3805
3974
|
getConfig,
|
|
3806
3975
|
getToken,
|
|
3807
3976
|
getTokenValue,
|