@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.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
5
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
8
|
var __export = (target, all) => {
|
|
7
9
|
for (var name in all)
|
|
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
15
17
|
}
|
|
16
18
|
return to;
|
|
17
19
|
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
18
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
29
|
|
|
20
30
|
// src/index.ts
|
|
@@ -27,10 +37,13 @@ __export(index_exports, {
|
|
|
27
37
|
Anchor: () => import_tamagui69.Anchor,
|
|
28
38
|
AnimatePresence: () => import_tamagui69.AnimatePresence,
|
|
29
39
|
AppHeader: () => AppHeader,
|
|
40
|
+
AppleLogo: () => AppleLogo,
|
|
30
41
|
Article: () => import_tamagui69.Article,
|
|
31
42
|
Aside: () => import_tamagui69.Aside,
|
|
32
43
|
Avatar: () => import_tamagui69.Avatar,
|
|
33
44
|
AvatarGroup: () => AvatarGroup,
|
|
45
|
+
BLINK_DESIGN_THEMES: () => BLINK_DESIGN_THEMES,
|
|
46
|
+
BLINK_DESIGN_THEME_IDS: () => BLINK_DESIGN_THEME_IDS,
|
|
34
47
|
Badge: () => Badge,
|
|
35
48
|
BlinkAccordion: () => BlinkAccordion,
|
|
36
49
|
BlinkAvatar: () => Avatar,
|
|
@@ -73,7 +86,9 @@ __export(index_exports, {
|
|
|
73
86
|
Form: () => import_tamagui69.Form,
|
|
74
87
|
FormField: () => FormField,
|
|
75
88
|
Frame: () => import_tamagui69.Frame,
|
|
89
|
+
GitHubLogo: () => GitHubLogo,
|
|
76
90
|
GlassCard: () => GlassCard,
|
|
91
|
+
GoogleLogo: () => GoogleLogo,
|
|
77
92
|
Grid: () => Grid,
|
|
78
93
|
Group: () => import_tamagui69.Group,
|
|
79
94
|
H1: () => import_tamagui69.H1,
|
|
@@ -95,6 +110,7 @@ __export(index_exports, {
|
|
|
95
110
|
LoginScreen: () => LoginScreen,
|
|
96
111
|
Main: () => import_tamagui69.Main,
|
|
97
112
|
MediaCard: () => MediaCard,
|
|
113
|
+
MicrosoftLogo: () => MicrosoftLogo,
|
|
98
114
|
Nav: () => import_tamagui69.Nav,
|
|
99
115
|
NotificationBanner: () => NotificationBanner,
|
|
100
116
|
OTPInput: () => OTPInput,
|
|
@@ -175,6 +191,8 @@ __export(index_exports, {
|
|
|
175
191
|
createTokens: () => import_tamagui69.createTokens,
|
|
176
192
|
createVariable: () => import_tamagui69.createVariable,
|
|
177
193
|
dialogConfirm: () => dialogConfirm,
|
|
194
|
+
getBlinkDesignTheme: () => getBlinkDesignTheme,
|
|
195
|
+
getBlinkThemePalettes: () => getBlinkThemePalettes,
|
|
178
196
|
getConfig: () => import_tamagui69.getConfig,
|
|
179
197
|
getToken: () => import_tamagui69.getToken,
|
|
180
198
|
getTokenValue: () => import_tamagui69.getTokenValue,
|
|
@@ -215,6 +233,177 @@ var blinkConfig = (0, import_tamagui.createTamagui)({
|
|
|
215
233
|
|
|
216
234
|
// src/index.ts
|
|
217
235
|
var import_v52 = require("@tamagui/config/v5");
|
|
236
|
+
|
|
237
|
+
// src/config/design-themes.ts
|
|
238
|
+
var BLINK_DESIGN_THEMES = {
|
|
239
|
+
"mono": {
|
|
240
|
+
id: "mono",
|
|
241
|
+
name: "Mono",
|
|
242
|
+
description: "Black/white neutral",
|
|
243
|
+
palette: { primary: "#18181B", primary_foreground: "#FAFAFA", secondary: "#F4F4F5", secondary_foreground: "#27272A", accent: "#3F3F46", background: "#FFFFFF", dark_mode: "#09090B" }
|
|
244
|
+
},
|
|
245
|
+
"ocean-teal": {
|
|
246
|
+
id: "ocean-teal",
|
|
247
|
+
name: "Ocean Teal",
|
|
248
|
+
description: "SaaS, fintech, healthcare",
|
|
249
|
+
palette: { primary: "#0D9488", primary_foreground: "#FFFFFF", secondary: "#F0FDFA", secondary_foreground: "#134E4A", accent: "#2DD4BF", background: "#FFFFFF", dark_mode: "#042F2E" }
|
|
250
|
+
},
|
|
251
|
+
"warm-amber": {
|
|
252
|
+
id: "warm-amber",
|
|
253
|
+
name: "Warm Amber",
|
|
254
|
+
description: "E-commerce, food, hospitality",
|
|
255
|
+
palette: { primary: "#D97706", primary_foreground: "#FFFFFF", secondary: "#FFFBEB", secondary_foreground: "#78350F", accent: "#FBBF24", background: "#FFFEF7", dark_mode: "#451A03" }
|
|
256
|
+
},
|
|
257
|
+
"rose-coral": {
|
|
258
|
+
id: "rose-coral",
|
|
259
|
+
name: "Rose Coral",
|
|
260
|
+
description: "Lifestyle, beauty, fashion",
|
|
261
|
+
palette: { primary: "#E11D48", primary_foreground: "#FFFFFF", secondary: "#FFF1F2", secondary_foreground: "#881337", accent: "#FB7185", background: "#FFFAFA", dark_mode: "#4C0519" }
|
|
262
|
+
},
|
|
263
|
+
"lavender": {
|
|
264
|
+
id: "lavender",
|
|
265
|
+
name: "Lavender",
|
|
266
|
+
description: "Creative, wellness, meditation",
|
|
267
|
+
palette: { primary: "#7C3AED", primary_foreground: "#FFFFFF", secondary: "#F5F3FF", secondary_foreground: "#4C1D95", accent: "#A78BFA", background: "#FEFEFF", dark_mode: "#2E1065" }
|
|
268
|
+
},
|
|
269
|
+
"glacier": {
|
|
270
|
+
id: "glacier",
|
|
271
|
+
name: "Glacier",
|
|
272
|
+
description: "Professional, corporate, analytics",
|
|
273
|
+
palette: { primary: "#0EA5E9", primary_foreground: "#FFFFFF", secondary: "#F0F9FF", secondary_foreground: "#0C4A6E", accent: "#38BDF8", background: "#FFFFFF", dark_mode: "#082F49" }
|
|
274
|
+
},
|
|
275
|
+
"forest": {
|
|
276
|
+
id: "forest",
|
|
277
|
+
name: "Forest",
|
|
278
|
+
description: "Sustainability, nature, outdoor",
|
|
279
|
+
palette: { primary: "#16A34A", primary_foreground: "#FFFFFF", secondary: "#F0FDF4", secondary_foreground: "#14532D", accent: "#4ADE80", background: "#FEFFFE", dark_mode: "#052E16" }
|
|
280
|
+
},
|
|
281
|
+
"obsidian": {
|
|
282
|
+
id: "obsidian",
|
|
283
|
+
name: "Obsidian",
|
|
284
|
+
description: "Developer tools, gaming, tech",
|
|
285
|
+
palette: { primary: "#475569", primary_foreground: "#FFFFFF", secondary: "#F1F5F9", secondary_foreground: "#1E293B", accent: "#64748B", background: "#FFFFFF", dark_mode: "#0F172A" }
|
|
286
|
+
},
|
|
287
|
+
"solar": {
|
|
288
|
+
id: "solar",
|
|
289
|
+
name: "Solar",
|
|
290
|
+
description: "Energy, optimistic, kid-friendly",
|
|
291
|
+
palette: { primary: "#CA8A04", primary_foreground: "#FFFFFF", secondary: "#FEFCE8", secondary_foreground: "#713F12", accent: "#FACC15", background: "#FFFEF5", dark_mode: "#422006" }
|
|
292
|
+
},
|
|
293
|
+
"orchid": {
|
|
294
|
+
id: "orchid",
|
|
295
|
+
name: "Orchid",
|
|
296
|
+
description: "Beauty, fashion, luxury",
|
|
297
|
+
palette: { primary: "#C026D3", primary_foreground: "#FFFFFF", secondary: "#FDF4FF", secondary_foreground: "#701A75", accent: "#E879F9", background: "#FFFEFF", dark_mode: "#4A044E" }
|
|
298
|
+
},
|
|
299
|
+
"indigo": {
|
|
300
|
+
id: "indigo",
|
|
301
|
+
name: "Indigo",
|
|
302
|
+
description: "Enterprise, fintech, trust",
|
|
303
|
+
palette: { primary: "#4F46E5", primary_foreground: "#FFFFFF", secondary: "#EEF2FF", secondary_foreground: "#312E81", accent: "#818CF8", background: "#FEFEFF", dark_mode: "#1E1B4B" }
|
|
304
|
+
},
|
|
305
|
+
"cosmic-night": {
|
|
306
|
+
id: "cosmic-night",
|
|
307
|
+
name: "Cosmic Night",
|
|
308
|
+
description: "Dark mode, futuristic, gaming",
|
|
309
|
+
palette: { primary: "#6366F1", primary_foreground: "#FFFFFF", secondary: "#1E1B4B", secondary_foreground: "#E0E7FF", accent: "#A855F7", background: "#0F0D1A", dark_mode: "#030014" }
|
|
310
|
+
},
|
|
311
|
+
"soft-pop": {
|
|
312
|
+
id: "soft-pop",
|
|
313
|
+
name: "Soft Pop",
|
|
314
|
+
description: "Playful, modern, creative",
|
|
315
|
+
palette: { primary: "#14B8A6", primary_foreground: "#FFFFFF", secondary: "#FDF2F8", secondary_foreground: "#134E4A", accent: "#F472B6", background: "#FFFBFE", dark_mode: "#0D1117" }
|
|
316
|
+
},
|
|
317
|
+
"neo-brutalism": {
|
|
318
|
+
id: "neo-brutalism",
|
|
319
|
+
name: "Neo Brutalism",
|
|
320
|
+
description: "Bold, striking, artistic",
|
|
321
|
+
palette: { primary: "#FF6B35", primary_foreground: "#000000", secondary: "#FFE66D", secondary_foreground: "#1A1A1A", accent: "#FF3366", background: "#FFFEF0", dark_mode: "#1A1A1A" }
|
|
322
|
+
},
|
|
323
|
+
"vintage-paper": {
|
|
324
|
+
id: "vintage-paper",
|
|
325
|
+
name: "Vintage Paper",
|
|
326
|
+
description: "Classic, warm, nostalgic",
|
|
327
|
+
palette: { primary: "#B45309", primary_foreground: "#FFFFFF", secondary: "#FEF3C7", secondary_foreground: "#78350F", accent: "#92400E", background: "#FFFDF7", dark_mode: "#292524" }
|
|
328
|
+
},
|
|
329
|
+
"modern-minimal": {
|
|
330
|
+
id: "modern-minimal",
|
|
331
|
+
name: "Modern Minimal",
|
|
332
|
+
description: "Clean, professional, corporate",
|
|
333
|
+
palette: { primary: "#2563EB", primary_foreground: "#FFFFFF", secondary: "#F8FAFC", secondary_foreground: "#1E40AF", accent: "#3B82F6", background: "#FFFFFF", dark_mode: "#0F172A" }
|
|
334
|
+
},
|
|
335
|
+
"bubblegum": {
|
|
336
|
+
id: "bubblegum",
|
|
337
|
+
name: "Bubblegum",
|
|
338
|
+
description: "Fun, feminine, youthful",
|
|
339
|
+
palette: { primary: "#EC4899", primary_foreground: "#FFFFFF", secondary: "#FDF4FF", secondary_foreground: "#9D174D", accent: "#F472B6", background: "#FFFBFF", dark_mode: "#500724" }
|
|
340
|
+
}
|
|
341
|
+
};
|
|
342
|
+
function hexToRgb(hex) {
|
|
343
|
+
const h = hex.replace("#", "");
|
|
344
|
+
return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
|
|
345
|
+
}
|
|
346
|
+
function rgbToHex(r, g, b) {
|
|
347
|
+
return "#" + [r, g, b].map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0")).join("");
|
|
348
|
+
}
|
|
349
|
+
function mixColors(c1, c2, t) {
|
|
350
|
+
const [r1, g1, b1] = hexToRgb(c1);
|
|
351
|
+
const [r2, g2, b2] = hexToRgb(c2);
|
|
352
|
+
return rgbToHex(r1 + (r2 - r1) * t, g1 + (g2 - g1) * t, b1 + (b2 - b1) * t);
|
|
353
|
+
}
|
|
354
|
+
function generateLightPalette(p) {
|
|
355
|
+
return [
|
|
356
|
+
p.background,
|
|
357
|
+
p.secondary,
|
|
358
|
+
mixColors(p.secondary, p.accent, 0.15),
|
|
359
|
+
mixColors(p.secondary, p.accent, 0.3),
|
|
360
|
+
mixColors(p.accent, p.primary, 0.1),
|
|
361
|
+
mixColors(p.accent, p.primary, 0.3),
|
|
362
|
+
mixColors(p.accent, p.primary, 0.5),
|
|
363
|
+
mixColors(p.accent, p.primary, 0.7),
|
|
364
|
+
p.primary,
|
|
365
|
+
mixColors(p.primary, p.secondary_foreground, 0.3),
|
|
366
|
+
p.secondary_foreground,
|
|
367
|
+
p.dark_mode
|
|
368
|
+
];
|
|
369
|
+
}
|
|
370
|
+
function generateDarkPalette(p) {
|
|
371
|
+
return [
|
|
372
|
+
p.dark_mode,
|
|
373
|
+
mixColors(p.dark_mode, p.secondary_foreground, 0.15),
|
|
374
|
+
mixColors(p.dark_mode, p.secondary_foreground, 0.25),
|
|
375
|
+
mixColors(p.dark_mode, p.secondary_foreground, 0.35),
|
|
376
|
+
mixColors(p.secondary_foreground, p.accent, 0.2),
|
|
377
|
+
mixColors(p.secondary_foreground, p.accent, 0.4),
|
|
378
|
+
mixColors(p.secondary_foreground, p.accent, 0.6),
|
|
379
|
+
mixColors(p.accent, p.primary, 0.5),
|
|
380
|
+
p.primary,
|
|
381
|
+
p.accent,
|
|
382
|
+
mixColors(p.accent, p.primary_foreground, 0.5),
|
|
383
|
+
p.primary_foreground
|
|
384
|
+
];
|
|
385
|
+
}
|
|
386
|
+
function getBlinkThemePalettes(themeId) {
|
|
387
|
+
const theme = BLINK_DESIGN_THEMES[themeId];
|
|
388
|
+
if (!theme) throw new Error(`Unknown theme: ${themeId}`);
|
|
389
|
+
const p = theme.palette;
|
|
390
|
+
return {
|
|
391
|
+
base: {
|
|
392
|
+
light: generateLightPalette(p),
|
|
393
|
+
dark: generateDarkPalette(p)
|
|
394
|
+
},
|
|
395
|
+
accent: {
|
|
396
|
+
light: generateDarkPalette(p),
|
|
397
|
+
dark: generateLightPalette(p)
|
|
398
|
+
}
|
|
399
|
+
};
|
|
400
|
+
}
|
|
401
|
+
var BLINK_DESIGN_THEME_IDS = Object.keys(BLINK_DESIGN_THEMES);
|
|
402
|
+
function getBlinkDesignTheme(themeId) {
|
|
403
|
+
return BLINK_DESIGN_THEMES[themeId];
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
// src/index.ts
|
|
218
407
|
var import_tamagui69 = require("tamagui");
|
|
219
408
|
|
|
220
409
|
// src/primitives/Button.tsx
|
|
@@ -1004,17 +1193,43 @@ function BlinkTooltip({ content, children, side = "top" }) {
|
|
|
1004
1193
|
] });
|
|
1005
1194
|
}
|
|
1006
1195
|
|
|
1196
|
+
// src/interface/BrandIcons.tsx
|
|
1197
|
+
var import_react_native_svg = __toESM(require("react-native-svg"));
|
|
1198
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1199
|
+
function GoogleLogo({ size = 20 }) {
|
|
1200
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", children: [
|
|
1201
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Path, { fill: "#4285F4", d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" }),
|
|
1202
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Path, { fill: "#34A853", d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" }),
|
|
1203
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Path, { fill: "#FBBC05", d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" }),
|
|
1204
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Path, { fill: "#EA4335", d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" })
|
|
1205
|
+
] });
|
|
1206
|
+
}
|
|
1207
|
+
function AppleLogo({ size = 20, color = "#000" }) {
|
|
1208
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Path, { fill: color, d: "M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" }) });
|
|
1209
|
+
}
|
|
1210
|
+
function GitHubLogo({ size = 20, color = "#fff" }) {
|
|
1211
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 98 96", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Path, { fillRule: "evenodd", clipRule: "evenodd", fill: color, d: "M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" }) });
|
|
1212
|
+
}
|
|
1213
|
+
function MicrosoftLogo({ size = 20 }) {
|
|
1214
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 21 21", children: [
|
|
1215
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Rect, { width: "10", height: "10", fill: "#F25022" }),
|
|
1216
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Rect, { x: "11", width: "10", height: "10", fill: "#7FBA00" }),
|
|
1217
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Rect, { y: "11", width: "10", height: "10", fill: "#00A4EF" }),
|
|
1218
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Rect, { x: "11", y: "11", width: "10", height: "10", fill: "#FFB900" })
|
|
1219
|
+
] });
|
|
1220
|
+
}
|
|
1221
|
+
|
|
1007
1222
|
// src/layouts/StepPageLayout.tsx
|
|
1008
1223
|
var import_tamagui20 = require("tamagui");
|
|
1009
|
-
var
|
|
1224
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1010
1225
|
function StepPageLayout({ title, description, children, bottom }) {
|
|
1011
|
-
return /* @__PURE__ */ (0,
|
|
1012
|
-
/* @__PURE__ */ (0,
|
|
1013
|
-
/* @__PURE__ */ (0,
|
|
1014
|
-
description && /* @__PURE__ */ (0,
|
|
1226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_tamagui20.YStack, { flex: 1, padding: "$4", maxWidth: 500, marginHorizontal: "auto", width: "100%", children: [
|
|
1227
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui20.YStack, { gap: "$5", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_tamagui20.YStack, { gap: "$2", children: [
|
|
1228
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui20.SizableText, { size: "$8", fontWeight: "700", children: title }),
|
|
1229
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui20.SizableText, { size: "$5", fontWeight: "400", color: "$color10", children: description })
|
|
1015
1230
|
] }) }),
|
|
1016
|
-
/* @__PURE__ */ (0,
|
|
1017
|
-
bottom && /* @__PURE__ */ (0,
|
|
1231
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui20.YStack, { paddingTop: "$5", gap: "$4", children }),
|
|
1232
|
+
bottom && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui20.YStack, { paddingTop: "$4", children: bottom })
|
|
1018
1233
|
] });
|
|
1019
1234
|
}
|
|
1020
1235
|
|
|
@@ -1039,12 +1254,12 @@ var ScreenLayout = (0, import_tamagui21.styled)(import_tamagui21.YStack, {
|
|
|
1039
1254
|
|
|
1040
1255
|
// src/layouts/Section.tsx
|
|
1041
1256
|
var import_tamagui22 = require("tamagui");
|
|
1042
|
-
var
|
|
1257
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1043
1258
|
function Section({ title, description, children, gap = "$3" }) {
|
|
1044
|
-
return /* @__PURE__ */ (0,
|
|
1045
|
-
title && /* @__PURE__ */ (0,
|
|
1046
|
-
/* @__PURE__ */ (0,
|
|
1047
|
-
description && /* @__PURE__ */ (0,
|
|
1259
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_tamagui22.YStack, { gap, children: [
|
|
1260
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_tamagui22.YStack, { gap: "$1", children: [
|
|
1261
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tamagui22.SizableText, { size: "$5", fontWeight: "600", color: "$color12", children: title }),
|
|
1262
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tamagui22.SizableText, { size: "$3", color: "$color9", children: description })
|
|
1048
1263
|
] }),
|
|
1049
1264
|
children
|
|
1050
1265
|
] });
|
|
@@ -1052,7 +1267,7 @@ function Section({ title, description, children, gap = "$3" }) {
|
|
|
1052
1267
|
|
|
1053
1268
|
// src/layouts/ListItem.tsx
|
|
1054
1269
|
var import_tamagui23 = require("tamagui");
|
|
1055
|
-
var
|
|
1270
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1056
1271
|
var ListItemFrame = (0, import_tamagui23.styled)(import_tamagui23.XStack, {
|
|
1057
1272
|
name: "BlinkListItem",
|
|
1058
1273
|
alignItems: "center",
|
|
@@ -1070,11 +1285,11 @@ var ListItemFrame = (0, import_tamagui23.styled)(import_tamagui23.XStack, {
|
|
|
1070
1285
|
}
|
|
1071
1286
|
});
|
|
1072
1287
|
function ListItem({ icon, title, subtitle, right, onPress }) {
|
|
1073
|
-
return /* @__PURE__ */ (0,
|
|
1074
|
-
icon && /* @__PURE__ */ (0,
|
|
1075
|
-
/* @__PURE__ */ (0,
|
|
1076
|
-
/* @__PURE__ */ (0,
|
|
1077
|
-
subtitle && /* @__PURE__ */ (0,
|
|
1288
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ListItemFrame, { pressable: !!onPress, onPress, children: [
|
|
1289
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tamagui23.View, { children: icon }),
|
|
1290
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_tamagui23.YStack, { flex: 1, gap: "$1", children: [
|
|
1291
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tamagui23.SizableText, { size: "$4", fontWeight: "500", color: "$color12", children: title }),
|
|
1292
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tamagui23.SizableText, { size: "$2", color: "$color9", children: subtitle })
|
|
1078
1293
|
] }),
|
|
1079
1294
|
right
|
|
1080
1295
|
] });
|
|
@@ -1082,28 +1297,28 @@ function ListItem({ icon, title, subtitle, right, onPress }) {
|
|
|
1082
1297
|
|
|
1083
1298
|
// src/layouts/Divider.tsx
|
|
1084
1299
|
var import_tamagui24 = require("tamagui");
|
|
1085
|
-
var
|
|
1300
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1086
1301
|
function Divider({ label }) {
|
|
1087
|
-
if (!label) return /* @__PURE__ */ (0,
|
|
1088
|
-
return /* @__PURE__ */ (0,
|
|
1089
|
-
/* @__PURE__ */ (0,
|
|
1090
|
-
/* @__PURE__ */ (0,
|
|
1091
|
-
/* @__PURE__ */ (0,
|
|
1302
|
+
if (!label) return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tamagui24.Separator, { borderColor: "$color4" });
|
|
1303
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_tamagui24.XStack, { alignItems: "center", gap: "$3", children: [
|
|
1304
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tamagui24.Separator, { flex: 1, borderColor: "$color4" }),
|
|
1305
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tamagui24.SizableText, { size: "$2", color: "$color9", children: label }),
|
|
1306
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tamagui24.Separator, { flex: 1, borderColor: "$color4" })
|
|
1092
1307
|
] });
|
|
1093
1308
|
}
|
|
1094
1309
|
|
|
1095
1310
|
// src/layouts/KeyboardStickyFooter.tsx
|
|
1096
1311
|
var import_tamagui25 = require("tamagui");
|
|
1097
|
-
var
|
|
1312
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1098
1313
|
function KeyboardStickyFooter({ children, offset }) {
|
|
1099
|
-
return /* @__PURE__ */ (0,
|
|
1314
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_tamagui25.YStack, { maxWidth: 500, alignSelf: "center", paddingTop: "$8", paddingBottom: "$4", style: { paddingBottom: offset }, children });
|
|
1100
1315
|
}
|
|
1101
1316
|
|
|
1102
1317
|
// src/layouts/SafeArea.tsx
|
|
1103
1318
|
var import_tamagui26 = require("tamagui");
|
|
1104
|
-
var
|
|
1319
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1105
1320
|
function SafeArea({ children, edges = ["top", "bottom"] }) {
|
|
1106
|
-
return /* @__PURE__ */ (0,
|
|
1321
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1107
1322
|
import_tamagui26.YStack,
|
|
1108
1323
|
{
|
|
1109
1324
|
flex: 1,
|
|
@@ -1120,26 +1335,26 @@ function SafeArea({ children, edges = ["top", "bottom"] }) {
|
|
|
1120
1335
|
// src/layouts/Grid.tsx
|
|
1121
1336
|
var import_react6 = require("react");
|
|
1122
1337
|
var import_tamagui27 = require("tamagui");
|
|
1123
|
-
var
|
|
1338
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1124
1339
|
function Grid({ children, columns = 2, gap = "$3" }) {
|
|
1125
1340
|
const items = import_react6.Children.toArray(children);
|
|
1126
1341
|
const rows = [];
|
|
1127
1342
|
for (let i = 0; i < items.length; i += columns) {
|
|
1128
1343
|
rows.push(items.slice(i, i + columns));
|
|
1129
1344
|
}
|
|
1130
|
-
return /* @__PURE__ */ (0,
|
|
1131
|
-
row.map((item, ci) => /* @__PURE__ */ (0,
|
|
1132
|
-
row.length < columns && Array.from({ length: columns - row.length }).map((_, i) => /* @__PURE__ */ (0,
|
|
1345
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui27.YStack, { gap, children: rows.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui27.XStack, { gap, children: [
|
|
1346
|
+
row.map((item, ci) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui27.YStack, { flex: 1, children: item }, ci)),
|
|
1347
|
+
row.length < columns && Array.from({ length: columns - row.length }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui27.YStack, { flex: 1 }, `pad-${i}`))
|
|
1133
1348
|
] }, ri)) });
|
|
1134
1349
|
}
|
|
1135
1350
|
function Container({ children, maxWidth = 500, centered = true, padding = "$4" }) {
|
|
1136
|
-
return /* @__PURE__ */ (0,
|
|
1351
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui27.YStack, { width: "100%", maxWidth, alignSelf: centered ? "center" : void 0, padding, children });
|
|
1137
1352
|
}
|
|
1138
1353
|
|
|
1139
1354
|
// src/patterns/PaywallScreen.tsx
|
|
1140
1355
|
var import_react7 = require("react");
|
|
1141
1356
|
var import_tamagui28 = require("tamagui");
|
|
1142
|
-
var
|
|
1357
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1143
1358
|
function useCountdown(minutes) {
|
|
1144
1359
|
const [seconds, setSeconds] = (0, import_react7.useState)((minutes ?? 0) * 60);
|
|
1145
1360
|
(0, import_react7.useEffect)(() => {
|
|
@@ -1152,90 +1367,96 @@ function useCountdown(minutes) {
|
|
|
1152
1367
|
const ss = String(seconds % 60).padStart(2, "0");
|
|
1153
1368
|
return { display: `${mm}:${ss}`, expired: seconds <= 0 };
|
|
1154
1369
|
}
|
|
1155
|
-
function normalizeFeature(
|
|
1156
|
-
return typeof
|
|
1157
|
-
}
|
|
1158
|
-
function ComparisonIcon({ enabled }) {
|
|
1159
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.Circle, { size: 22, backgroundColor: enabled ? "$green3" : "$color4", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$2", color: enabled ? "$green10" : "$color8", fontWeight: "700", children: enabled ? "\u2713" : "\u2014" }) });
|
|
1370
|
+
function normalizeFeature(f) {
|
|
1371
|
+
return typeof f === "string" ? { title: f } : f;
|
|
1160
1372
|
}
|
|
1161
|
-
function
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
"
|
|
1167
|
-
|
|
1168
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.YStack, { children: [
|
|
1169
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$2", fontWeight: "700", children: testimonial.author }),
|
|
1170
|
-
testimonial.meta ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color10", children: testimonial.meta }) : null
|
|
1373
|
+
function BenefitRow({ feature, tone, muted }) {
|
|
1374
|
+
const f = normalizeFeature(feature);
|
|
1375
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { gap: "$3", alignItems: "center", children: [
|
|
1376
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Circle, { size: 40, backgroundColor: "$color3", children: f.icon ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$5", color: "$color9", children: "\u2726" }) }),
|
|
1377
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { flex: 1, gap: "$0.5", children: [
|
|
1378
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$4", fontWeight: "700", color: tone, children: f.title }),
|
|
1379
|
+
f.description ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: muted, children: f.description }) : null
|
|
1171
1380
|
] })
|
|
1172
1381
|
] });
|
|
1173
1382
|
}
|
|
1174
|
-
function
|
|
1175
|
-
return /* @__PURE__ */ (0,
|
|
1176
|
-
|
|
1177
|
-
import_tamagui28.YStack,
|
|
1178
|
-
{
|
|
1179
|
-
width: 72,
|
|
1180
|
-
height: 72,
|
|
1181
|
-
borderRadius: "$10",
|
|
1182
|
-
overflow: "hidden",
|
|
1183
|
-
alignItems: "center",
|
|
1184
|
-
justifyContent: "center",
|
|
1185
|
-
backgroundColor: "$color3",
|
|
1186
|
-
children: creator.avatar
|
|
1187
|
-
}
|
|
1188
|
-
) : null,
|
|
1189
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.YStack, { alignItems: "center", gap: "$1", children: [
|
|
1190
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$6", fontWeight: "800", children: creator.name }),
|
|
1191
|
-
creator.meta ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$3", color: "$color10", children: creator.meta }) : null
|
|
1192
|
-
] })
|
|
1193
|
-
] });
|
|
1194
|
-
}
|
|
1195
|
-
function PlanCard({
|
|
1196
|
-
plan,
|
|
1197
|
-
selected,
|
|
1198
|
-
onPress,
|
|
1199
|
-
stacked,
|
|
1200
|
-
dark
|
|
1201
|
-
}) {
|
|
1202
|
-
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1203
|
-
import_tamagui28.YStack,
|
|
1383
|
+
function PlanRow({ plan, selected, onPress }) {
|
|
1384
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1385
|
+
import_tamagui28.XStack,
|
|
1204
1386
|
{
|
|
1205
|
-
|
|
1206
|
-
width: stacked ? "100%" : void 0,
|
|
1387
|
+
width: "100%",
|
|
1207
1388
|
padding: "$3",
|
|
1389
|
+
paddingHorizontal: "$3.5",
|
|
1208
1390
|
borderRadius: "$5",
|
|
1209
1391
|
borderWidth: 2,
|
|
1210
|
-
borderColor: selected ? "$color9" :
|
|
1211
|
-
backgroundColor: selected ? "$color3" :
|
|
1212
|
-
pressStyle: { scale: 0.
|
|
1392
|
+
borderColor: selected ? "$color9" : "$color5",
|
|
1393
|
+
backgroundColor: selected ? "$color3" : "$color1",
|
|
1394
|
+
pressStyle: { scale: 0.98, opacity: 0.9 },
|
|
1213
1395
|
animation: "quick",
|
|
1214
1396
|
onPress,
|
|
1215
1397
|
cursor: "pointer",
|
|
1398
|
+
alignItems: "center",
|
|
1399
|
+
gap: "$3",
|
|
1216
1400
|
position: "relative",
|
|
1217
|
-
gap: "$1.5",
|
|
1218
|
-
alignItems: stacked ? "flex-start" : "center",
|
|
1219
1401
|
children: [
|
|
1220
|
-
plan.popular && /* @__PURE__ */ (0,
|
|
1221
|
-
|
|
1222
|
-
/* @__PURE__ */ (0,
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
plan.
|
|
1402
|
+
plan.popular && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { position: "absolute", top: -10, right: 12, backgroundColor: "$color9", paddingHorizontal: "$2", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$1", color: "white", fontWeight: "700", children: "BEST VALUE" }) }),
|
|
1403
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Circle, { size: 22, borderWidth: 2, borderColor: selected ? "$color9" : "$color7", backgroundColor: selected ? "$color9" : "transparent", children: selected && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Circle, { size: 8, backgroundColor: "white" }) }),
|
|
1404
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { flex: 1, gap: "$0.5", children: [
|
|
1405
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { gap: "$2", alignItems: "center", children: [
|
|
1406
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$4", fontWeight: "700", children: plan.name }),
|
|
1407
|
+
plan.trial && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { backgroundColor: "$green3", paddingHorizontal: "$1.5", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$1", color: "$green9", fontWeight: "700", children: plan.trial }) })
|
|
1408
|
+
] }),
|
|
1409
|
+
plan.tagline ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color10", children: plan.tagline }) : null
|
|
1228
1410
|
] }),
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1411
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { alignItems: "flex-end", gap: "$0.5", children: [
|
|
1412
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { alignItems: "baseline", gap: "$1", children: [
|
|
1413
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$5", fontWeight: "800", children: plan.price }),
|
|
1414
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.SizableText, { size: "$2", color: "$color10", children: [
|
|
1415
|
+
"/",
|
|
1416
|
+
plan.period
|
|
1417
|
+
] })
|
|
1418
|
+
] }),
|
|
1419
|
+
plan.savings && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { backgroundColor: "$green3", paddingHorizontal: "$1.5", paddingVertical: 1, borderRadius: "$10", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$1", color: "$green9", fontWeight: "700", children: plan.savings }) }),
|
|
1420
|
+
plan.pricePerWeek && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$1", color: "$color10", children: plan.pricePerWeek })
|
|
1421
|
+
] })
|
|
1235
1422
|
]
|
|
1236
1423
|
}
|
|
1237
1424
|
);
|
|
1238
1425
|
}
|
|
1426
|
+
function ComparisonIcon({ enabled }) {
|
|
1427
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Circle, { size: 24, backgroundColor: enabled ? "$green3" : "$color4", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: enabled ? "$green10" : "$color8", fontWeight: "700", children: enabled ? "\u2713" : "\u2715" }) });
|
|
1428
|
+
}
|
|
1429
|
+
function TestimonialCard({ t }) {
|
|
1430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { minWidth: 240, backgroundColor: "$color2", borderRadius: "$6", padding: "$3.5", gap: "$2.5", children: [
|
|
1431
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.SizableText, { size: "$3", color: "$color11", fontStyle: "italic", children: [
|
|
1432
|
+
"\u201C",
|
|
1433
|
+
t.quote,
|
|
1434
|
+
"\u201D"
|
|
1435
|
+
] }),
|
|
1436
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { gap: "$2", alignItems: "center", children: [
|
|
1437
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Circle, { size: 32, backgroundColor: "$color5", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", fontWeight: "700", children: t.author[0] }) }),
|
|
1438
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { children: [
|
|
1439
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", fontWeight: "700", children: t.author }),
|
|
1440
|
+
t.meta ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$1", color: "$color10", children: t.meta }) : null
|
|
1441
|
+
] })
|
|
1442
|
+
] })
|
|
1443
|
+
] });
|
|
1444
|
+
}
|
|
1445
|
+
function CreatorHeader({ c }) {
|
|
1446
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { alignItems: "center", justifyContent: "center", gap: "$3", children: [
|
|
1447
|
+
c.avatar && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Circle, { size: 72, overflow: "hidden", backgroundColor: "$color3", children: c.avatar }),
|
|
1448
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { alignItems: "center", gap: "$1", children: [
|
|
1449
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$6", fontWeight: "800", children: c.name }),
|
|
1450
|
+
c.meta ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$3", color: "$color10", children: c.meta }) : null
|
|
1451
|
+
] })
|
|
1452
|
+
] });
|
|
1453
|
+
}
|
|
1454
|
+
function TrustBadges({ badges }) {
|
|
1455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.XStack, { justifyContent: "center", gap: "$4", paddingTop: "$1", children: badges.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { alignItems: "center", gap: "$1", children: [
|
|
1456
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Circle, { size: 28, backgroundColor: "$color3", children: b.icon ?? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color9", children: "\u2726" }) }),
|
|
1457
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$1", color: "$color10", textAlign: "center", children: b.label })
|
|
1458
|
+
] }, i)) });
|
|
1459
|
+
}
|
|
1239
1460
|
function PaywallScreen({
|
|
1240
1461
|
variant = "default",
|
|
1241
1462
|
eyebrow,
|
|
@@ -1260,68 +1481,57 @@ function PaywallScreen({
|
|
|
1260
1481
|
testimonials = [],
|
|
1261
1482
|
creator,
|
|
1262
1483
|
topSlot,
|
|
1263
|
-
footerSlot
|
|
1484
|
+
footerSlot,
|
|
1485
|
+
trustBadges
|
|
1264
1486
|
}) {
|
|
1265
1487
|
const selected = selectedPlan ?? plans.find((p) => p.popular)?.id ?? plans[0]?.id;
|
|
1266
1488
|
const countdown = useCountdown(countdownMinutes);
|
|
1267
1489
|
const dark = variant === "immersive-dark";
|
|
1268
|
-
const
|
|
1269
|
-
const
|
|
1270
|
-
const
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.ScrollView, { flex: 1, contentContainerStyle: { paddingBottom: 220 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.YStack, { padding: "$4", gap: "$4", paddingTop: "$8", children: [
|
|
1490
|
+
const bg = dark ? "$color1" : "$background";
|
|
1491
|
+
const tone = dark ? "$color12" : "$color11";
|
|
1492
|
+
const muted = "$color10";
|
|
1493
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { flex: 1, backgroundColor: bg, children: [
|
|
1494
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.XStack, { position: "absolute", top: "$4", right: "$4", zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Button, { size: "$3", circular: true, chromeless: true, onPress: onClose, pressStyle: { opacity: 0.6 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$5", color: muted, children: "\u2715" }) }) }),
|
|
1495
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.ScrollView, { flex: 1, contentContainerStyle: { paddingBottom: 240 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { paddingHorizontal: "$5", paddingTop: "$8", gap: "$5", children: [
|
|
1275
1496
|
topSlot,
|
|
1276
|
-
creator && variant === "creator-sheet" ? /* @__PURE__ */ (0,
|
|
1277
|
-
hero && /* @__PURE__ */ (0,
|
|
1278
|
-
badge && /* @__PURE__ */ (0,
|
|
1279
|
-
/* @__PURE__ */ (0,
|
|
1280
|
-
eyebrow ? /* @__PURE__ */ (0,
|
|
1281
|
-
/* @__PURE__ */ (0,
|
|
1282
|
-
subtitle && /* @__PURE__ */ (0,
|
|
1283
|
-
socialProof && /* @__PURE__ */ (0,
|
|
1284
|
-
] }),
|
|
1285
|
-
countdownMinutes && !countdown.expired && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.XStack, { justifyContent: "center", padding: "$2", backgroundColor: "$red3", borderRadius: "$4", alignSelf: "center", paddingHorizontal: "$4", gap: "$2", alignItems: "center", children: [
|
|
1286
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$red9", fontWeight: "600", children: "Offer ends in" }),
|
|
1287
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$5", color: "$red9", fontWeight: "800", fontFamily: "$mono", children: countdown.display })
|
|
1497
|
+
creator && variant === "creator-sheet" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CreatorHeader, { c: creator }) : null,
|
|
1498
|
+
hero && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { alignItems: "center", paddingVertical: "$3", children: hero }),
|
|
1499
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.XStack, { justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { backgroundColor: "$color9", paddingHorizontal: "$3", paddingVertical: "$1", borderRadius: "$10", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "white", fontWeight: "700", children: badge }) }) }),
|
|
1500
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { gap: "$1.5", alignItems: "center", children: [
|
|
1501
|
+
eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", fontWeight: "700", color: "$color9", textTransform: "uppercase", children: eyebrow }) : null,
|
|
1502
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$9", fontWeight: "800", textAlign: "center", color: tone, children: title }),
|
|
1503
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$4", color: muted, textAlign: "center", children: subtitle }),
|
|
1504
|
+
socialProof && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$3", color: "$color9", fontWeight: "600", textAlign: "center", paddingTop: "$1", children: socialProof })
|
|
1288
1505
|
] }),
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
variant === "comparison" && comparisonRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.YStack, { backgroundColor: dark ? "$color2" : "$color1", borderRadius: "$6", padding: "$3", gap: "$2", borderWidth: 1, borderColor: "$color4", children: [
|
|
1301
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.XStack, { alignItems: "center", children: [
|
|
1302
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { flex: 1, size: "$2", fontWeight: "700", color: "$color10", children: "Feature" }),
|
|
1303
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { width: 64, size: "$2", fontWeight: "700", textAlign: "center", color: "$color10", children: "Free" }),
|
|
1304
|
-
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { width: 84, size: "$2", fontWeight: "700", textAlign: "center", color: "$color10", children: "Premium" })
|
|
1506
|
+
countdownMinutes && !countdown.expired ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { justifyContent: "center", padding: "$2", backgroundColor: "$red3", borderRadius: "$4", alignSelf: "center", paddingHorizontal: "$4", gap: "$2", alignItems: "center", children: [
|
|
1507
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$red9", fontWeight: "600", children: "Offer ends in" }),
|
|
1508
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$5", color: "$red9", fontWeight: "800", fontFamily: "$mono", children: countdown.display })
|
|
1509
|
+
] }) : null,
|
|
1510
|
+
features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { gap: "$3.5", children: features.map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BenefitRow, { feature, tone, muted }, i)) }),
|
|
1511
|
+
variant === "social-proof" && testimonials.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.XStack, { gap: "$3", paddingRight: "$4", children: testimonials.map((t, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TestimonialCard, { t }, `${t.author}-${i}`)) }) }) : null,
|
|
1512
|
+
variant === "comparison" && comparisonRows.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { backgroundColor: dark ? "$color2" : "$color1", borderRadius: "$6", padding: "$3.5", gap: "$2", borderWidth: 1, borderColor: "$color4", children: [
|
|
1513
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { alignItems: "center", children: [
|
|
1514
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { flex: 1, size: "$2", fontWeight: "700", color: muted, children: "Feature" }),
|
|
1515
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { width: 64, size: "$2", fontWeight: "700", textAlign: "center", color: muted, children: "Free" }),
|
|
1516
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { width: 84, size: "$2", fontWeight: "700", textAlign: "center", color: "$color9", children: "Premium" })
|
|
1305
1517
|
] }),
|
|
1306
|
-
comparisonRows.map((row) => /* @__PURE__ */ (0,
|
|
1307
|
-
/* @__PURE__ */ (0,
|
|
1308
|
-
/* @__PURE__ */ (0,
|
|
1309
|
-
/* @__PURE__ */ (0,
|
|
1518
|
+
comparisonRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { alignItems: "center", paddingVertical: "$1.5", children: [
|
|
1519
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { flex: 1, size: "$3", color: tone, children: row.label }),
|
|
1520
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.XStack, { width: 64, justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ComparisonIcon, { enabled: row.free }) }),
|
|
1521
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.XStack, { width: 84, justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ComparisonIcon, { enabled: row.premium }) })
|
|
1310
1522
|
] }, row.label))
|
|
1311
1523
|
] }) : null,
|
|
1312
|
-
/* @__PURE__ */ (0,
|
|
1313
|
-
|
|
1524
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { gap: "$3", children: plans.map((plan) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1525
|
+
PlanRow,
|
|
1314
1526
|
{
|
|
1315
1527
|
plan,
|
|
1316
1528
|
selected: selected === plan.id,
|
|
1317
|
-
onPress: () => onSelectPlan?.(plan.id)
|
|
1318
|
-
stacked: stackedPlans,
|
|
1319
|
-
dark
|
|
1529
|
+
onPress: () => onSelectPlan?.(plan.id)
|
|
1320
1530
|
},
|
|
1321
1531
|
plan.id
|
|
1322
1532
|
)) })
|
|
1323
1533
|
] }) }),
|
|
1324
|
-
/* @__PURE__ */ (0,
|
|
1534
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1325
1535
|
import_tamagui28.YStack,
|
|
1326
1536
|
{
|
|
1327
1537
|
position: "absolute",
|
|
@@ -1330,12 +1540,12 @@ function PaywallScreen({
|
|
|
1330
1540
|
right: 0,
|
|
1331
1541
|
padding: "$4",
|
|
1332
1542
|
paddingBottom: "$6",
|
|
1333
|
-
backgroundColor,
|
|
1543
|
+
backgroundColor: bg,
|
|
1334
1544
|
borderTopWidth: 1,
|
|
1335
1545
|
borderTopColor: "$color4",
|
|
1336
1546
|
gap: "$2.5",
|
|
1337
1547
|
children: [
|
|
1338
|
-
/* @__PURE__ */ (0,
|
|
1548
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1339
1549
|
import_tamagui28.Button,
|
|
1340
1550
|
{
|
|
1341
1551
|
size: "$5",
|
|
@@ -1349,12 +1559,13 @@ function PaywallScreen({
|
|
|
1349
1559
|
children: continueLabel
|
|
1350
1560
|
}
|
|
1351
1561
|
),
|
|
1352
|
-
reassurance && /* @__PURE__ */ (0,
|
|
1353
|
-
/* @__PURE__ */ (0,
|
|
1354
|
-
onRestore && /* @__PURE__ */ (0,
|
|
1355
|
-
onTerms && /* @__PURE__ */ (0,
|
|
1356
|
-
onPrivacy && /* @__PURE__ */ (0,
|
|
1562
|
+
reassurance && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color9", textAlign: "center", children: reassurance }),
|
|
1563
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { justifyContent: "center", gap: "$3", children: [
|
|
1564
|
+
onRestore && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color8", onPress: onRestore, pressStyle: { opacity: 0.6 }, children: "Restore" }),
|
|
1565
|
+
onTerms && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color8", onPress: onTerms, pressStyle: { opacity: 0.6 }, children: "Terms" }),
|
|
1566
|
+
onPrivacy && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color8", onPress: onPrivacy, pressStyle: { opacity: 0.6 }, children: "Privacy" })
|
|
1357
1567
|
] }),
|
|
1568
|
+
trustBadges && trustBadges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TrustBadges, { badges: trustBadges }),
|
|
1358
1569
|
footerSlot
|
|
1359
1570
|
]
|
|
1360
1571
|
}
|
|
@@ -1365,7 +1576,7 @@ function PaywallScreen({
|
|
|
1365
1576
|
// src/patterns/OnboardingCarousel.tsx
|
|
1366
1577
|
var import_react8 = require("react");
|
|
1367
1578
|
var import_tamagui29 = require("tamagui");
|
|
1368
|
-
var
|
|
1579
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1369
1580
|
function OnboardingCarousel({
|
|
1370
1581
|
steps,
|
|
1371
1582
|
variant = "default",
|
|
@@ -1380,7 +1591,7 @@ function OnboardingCarousel({
|
|
|
1380
1591
|
}) {
|
|
1381
1592
|
const [current, setCurrent] = (0, import_react8.useState)(0);
|
|
1382
1593
|
if (steps.length === 0) {
|
|
1383
|
-
return /* @__PURE__ */ (0,
|
|
1594
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.YStack, { flex: 1, backgroundColor: "$background", padding: "$4", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.SizableText, { size: "$5", color: "$color10", textAlign: "center", children: "Add at least one onboarding step." }) });
|
|
1384
1595
|
}
|
|
1385
1596
|
const isLast = current === steps.length - 1;
|
|
1386
1597
|
const step = steps[current];
|
|
@@ -1394,15 +1605,15 @@ function OnboardingCarousel({
|
|
|
1394
1605
|
const heroBackground = isPermission ? "$color3" : isSelection ? "$color1" : "$color2";
|
|
1395
1606
|
const heroRadius = variant === "card-tilt" || isSelection ? "$8" : "$10";
|
|
1396
1607
|
const buttonTone = variant === "editorial" ? "$color12" : "$color9";
|
|
1397
|
-
return /* @__PURE__ */ (0,
|
|
1398
|
-
step?.background ? /* @__PURE__ */ (0,
|
|
1399
|
-
/* @__PURE__ */ (0,
|
|
1400
|
-
/* @__PURE__ */ (0,
|
|
1401
|
-
brand ? /* @__PURE__ */ (0,
|
|
1402
|
-
!isLast && onSkip && /* @__PURE__ */ (0,
|
|
1608
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_tamagui29.YStack, { flex: 1, backgroundColor, padding: "$4", justifyContent: "space-between", children: [
|
|
1609
|
+
step?.background ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.YStack, { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, children: step.background }) : null,
|
|
1610
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_tamagui29.XStack, { justifyContent: "space-between", alignItems: "center", paddingTop: topPadding, children: [
|
|
1611
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.XStack, { minWidth: 40, children: topLeading }),
|
|
1612
|
+
brand ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.YStack, { alignItems: "center", flex: 1, children: brand }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.YStack, { flex: 1 }),
|
|
1613
|
+
!isLast && onSkip && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.Button, { chromeless: true, onPress: onSkip, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.SizableText, { size: "$4", color: "$color9", children: skipLabel }) })
|
|
1403
1614
|
] }),
|
|
1404
|
-
/* @__PURE__ */ (0,
|
|
1405
|
-
hero ? variant === "card-tilt" || isSelection ? /* @__PURE__ */ (0,
|
|
1615
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_tamagui29.YStack, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$5", paddingHorizontal: "$4", children: [
|
|
1616
|
+
hero ? variant === "card-tilt" || isSelection ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1406
1617
|
import_tamagui29.YStack,
|
|
1407
1618
|
{
|
|
1408
1619
|
width: "100%",
|
|
@@ -1422,15 +1633,15 @@ function OnboardingCarousel({
|
|
|
1422
1633
|
style: variant === "card-tilt" ? { transform: [{ rotate: "-5deg" }] } : void 0,
|
|
1423
1634
|
children: hero
|
|
1424
1635
|
}
|
|
1425
|
-
) : /* @__PURE__ */ (0,
|
|
1426
|
-
/* @__PURE__ */ (0,
|
|
1427
|
-
step?.eyebrow ? /* @__PURE__ */ (0,
|
|
1428
|
-
/* @__PURE__ */ (0,
|
|
1429
|
-
/* @__PURE__ */ (0,
|
|
1636
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.Circle, { size: isPermission ? 140 : 120, backgroundColor: heroBackground, alignItems: "center", justifyContent: "center", children: hero }) : null,
|
|
1637
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_tamagui29.YStack, { gap: "$3", alignItems: "center", children: [
|
|
1638
|
+
step?.eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.SizableText, { size: "$2", color: "$color9", fontWeight: "700", textTransform: "uppercase", children: step.eyebrow }) : null,
|
|
1639
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.SizableText, { size: titleSize, fontWeight: "700", textAlign: "center", children: step?.title }),
|
|
1640
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.SizableText, { size: "$4", color: "$color10", textAlign: "center", maxWidth: 300, children: step?.description })
|
|
1430
1641
|
] })
|
|
1431
1642
|
] }),
|
|
1432
|
-
/* @__PURE__ */ (0,
|
|
1433
|
-
/* @__PURE__ */ (0,
|
|
1643
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_tamagui29.YStack, { gap: "$3", paddingBottom: "$2", children: [
|
|
1644
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.XStack, { justifyContent: "center", gap: "$2", children: steps.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1434
1645
|
import_tamagui29.Circle,
|
|
1435
1646
|
{
|
|
1436
1647
|
size: variant === "card-tilt" ? 10 : 8,
|
|
@@ -1441,7 +1652,7 @@ function OnboardingCarousel({
|
|
|
1441
1652
|
},
|
|
1442
1653
|
i
|
|
1443
1654
|
)) }),
|
|
1444
|
-
/* @__PURE__ */ (0,
|
|
1655
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1445
1656
|
import_tamagui29.Button,
|
|
1446
1657
|
{
|
|
1447
1658
|
size: "$5",
|
|
@@ -1461,10 +1672,10 @@ function OnboardingCarousel({
|
|
|
1461
1672
|
|
|
1462
1673
|
// src/patterns/ChatBubble.tsx
|
|
1463
1674
|
var import_tamagui30 = require("tamagui");
|
|
1464
|
-
var
|
|
1675
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1465
1676
|
function ChatBubble({ message, showAvatar = true }) {
|
|
1466
1677
|
const isUser = message.sender === "user";
|
|
1467
|
-
return /* @__PURE__ */ (0,
|
|
1678
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1468
1679
|
import_tamagui30.XStack,
|
|
1469
1680
|
{
|
|
1470
1681
|
alignSelf: isUser ? "flex-end" : "flex-start",
|
|
@@ -1472,8 +1683,8 @@ function ChatBubble({ message, showAvatar = true }) {
|
|
|
1472
1683
|
gap: "$2",
|
|
1473
1684
|
flexDirection: isUser ? "row-reverse" : "row",
|
|
1474
1685
|
children: [
|
|
1475
|
-
showAvatar && !isUser && /* @__PURE__ */ (0,
|
|
1476
|
-
/* @__PURE__ */ (0,
|
|
1686
|
+
showAvatar && !isUser && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui30.Circle, { size: 32, backgroundColor: "$color4", overflow: "hidden", children: message.avatar ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui30.Image, { source: { uri: message.avatar }, width: 32, height: 32, objectFit: "cover" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui30.SizableText, { size: "$2", fontWeight: "600", color: "$color11", children: message.senderName?.[0]?.toUpperCase() ?? "?" }) }),
|
|
1687
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1477
1688
|
import_tamagui30.YStack,
|
|
1478
1689
|
{
|
|
1479
1690
|
backgroundColor: isUser ? "$color9" : "$color3",
|
|
@@ -1484,8 +1695,8 @@ function ChatBubble({ message, showAvatar = true }) {
|
|
|
1484
1695
|
borderBottomLeftRadius: isUser ? "$5" : "$2",
|
|
1485
1696
|
gap: "$1",
|
|
1486
1697
|
children: [
|
|
1487
|
-
/* @__PURE__ */ (0,
|
|
1488
|
-
message.timestamp && /* @__PURE__ */ (0,
|
|
1698
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui30.SizableText, { size: "$3", color: isUser ? "$color1" : "$color12", children: message.text }),
|
|
1699
|
+
message.timestamp && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui30.SizableText, { size: "$1", color: isUser ? "$color3" : "$color9", alignSelf: "flex-end", children: message.timestamp })
|
|
1489
1700
|
]
|
|
1490
1701
|
}
|
|
1491
1702
|
)
|
|
@@ -1496,9 +1707,9 @@ function ChatBubble({ message, showAvatar = true }) {
|
|
|
1496
1707
|
|
|
1497
1708
|
// src/patterns/SettingsScreen.tsx
|
|
1498
1709
|
var import_tamagui31 = require("tamagui");
|
|
1499
|
-
var
|
|
1710
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1500
1711
|
function SettingsItemRow({ item }) {
|
|
1501
|
-
return /* @__PURE__ */ (0,
|
|
1712
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1502
1713
|
import_tamagui31.XStack,
|
|
1503
1714
|
{
|
|
1504
1715
|
alignItems: "center",
|
|
@@ -1510,21 +1721,21 @@ function SettingsItemRow({ item }) {
|
|
|
1510
1721
|
onPress: item.onPress,
|
|
1511
1722
|
cursor: item.onPress ? "pointer" : void 0,
|
|
1512
1723
|
children: [
|
|
1513
|
-
item.icon && /* @__PURE__ */ (0,
|
|
1514
|
-
/* @__PURE__ */ (0,
|
|
1515
|
-
/* @__PURE__ */ (0,
|
|
1516
|
-
item.subtitle && /* @__PURE__ */ (0,
|
|
1724
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.YStack, { width: 24, alignItems: "center", children: item.icon }),
|
|
1725
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_tamagui31.YStack, { flex: 1, gap: "$1", children: [
|
|
1726
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.SizableText, { size: "$4", fontWeight: "500", children: item.title }),
|
|
1727
|
+
item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.SizableText, { size: "$2", color: "$color9", children: item.subtitle })
|
|
1517
1728
|
] }),
|
|
1518
|
-
item.type === "toggle" ? /* @__PURE__ */ (0,
|
|
1729
|
+
item.type === "toggle" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.Switch, { size: "$3", checked: item.value, onCheckedChange: item.onValueChange, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.Switch.Thumb, { animation: "quick" }) }) : item.right ? item.right : item.onPress && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.SizableText, { size: "$5", color: "$color8", children: "\u203A" })
|
|
1519
1730
|
]
|
|
1520
1731
|
}
|
|
1521
1732
|
);
|
|
1522
1733
|
}
|
|
1523
1734
|
function SettingsScreen({ sections, header }) {
|
|
1524
|
-
return /* @__PURE__ */ (0,
|
|
1735
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_tamagui31.YStack, { flex: 1, backgroundColor: "$background", children: [
|
|
1525
1736
|
header,
|
|
1526
|
-
/* @__PURE__ */ (0,
|
|
1527
|
-
section.title && /* @__PURE__ */ (0,
|
|
1737
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.YStack, { gap: "$4", paddingVertical: "$2", children: sections.map((section, si) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_tamagui31.YStack, { children: [
|
|
1738
|
+
section.title && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1528
1739
|
import_tamagui31.SizableText,
|
|
1529
1740
|
{
|
|
1530
1741
|
size: "$2",
|
|
@@ -1536,9 +1747,9 @@ function SettingsScreen({ sections, header }) {
|
|
|
1536
1747
|
children: section.title
|
|
1537
1748
|
}
|
|
1538
1749
|
),
|
|
1539
|
-
/* @__PURE__ */ (0,
|
|
1540
|
-
/* @__PURE__ */ (0,
|
|
1541
|
-
ii < section.items.length - 1 && /* @__PURE__ */ (0,
|
|
1750
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.YStack, { backgroundColor: "$color1", borderRadius: "$4", marginHorizontal: "$3", overflow: "hidden", children: section.items.map((item, ii) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_tamagui31.YStack, { children: [
|
|
1751
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SettingsItemRow, { item }),
|
|
1752
|
+
ii < section.items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.Separator, { borderColor: "$color3", marginLeft: "$12" })
|
|
1542
1753
|
] }, item.id)) })
|
|
1543
1754
|
] }, si)) })
|
|
1544
1755
|
] });
|
|
@@ -1546,15 +1757,15 @@ function SettingsScreen({ sections, header }) {
|
|
|
1546
1757
|
|
|
1547
1758
|
// src/patterns/EmptyState.tsx
|
|
1548
1759
|
var import_tamagui32 = require("tamagui");
|
|
1549
|
-
var
|
|
1760
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1550
1761
|
function EmptyState({ icon, title, description, actionLabel, onAction }) {
|
|
1551
|
-
return /* @__PURE__ */ (0,
|
|
1762
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_tamagui32.YStack, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$4", padding: "$6", children: [
|
|
1552
1763
|
icon,
|
|
1553
|
-
/* @__PURE__ */ (0,
|
|
1554
|
-
/* @__PURE__ */ (0,
|
|
1555
|
-
description && /* @__PURE__ */ (0,
|
|
1764
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_tamagui32.YStack, { gap: "$2", alignItems: "center", children: [
|
|
1765
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_tamagui32.SizableText, { size: "$6", fontWeight: "600", textAlign: "center", children: title }),
|
|
1766
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_tamagui32.SizableText, { size: "$4", color: "$color9", textAlign: "center", maxWidth: 280, children: description })
|
|
1556
1767
|
] }),
|
|
1557
|
-
actionLabel && onAction && /* @__PURE__ */ (0,
|
|
1768
|
+
actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
1558
1769
|
import_tamagui32.Button,
|
|
1559
1770
|
{
|
|
1560
1771
|
size: "$4",
|
|
@@ -1572,17 +1783,17 @@ function EmptyState({ icon, title, description, actionLabel, onAction }) {
|
|
|
1572
1783
|
|
|
1573
1784
|
// src/patterns/ProfileHeader.tsx
|
|
1574
1785
|
var import_tamagui33 = require("tamagui");
|
|
1575
|
-
var
|
|
1786
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1576
1787
|
function ProfileHeader({ name, subtitle, avatar, stats, actions }) {
|
|
1577
|
-
return /* @__PURE__ */ (0,
|
|
1578
|
-
/* @__PURE__ */ (0,
|
|
1579
|
-
/* @__PURE__ */ (0,
|
|
1580
|
-
/* @__PURE__ */ (0,
|
|
1581
|
-
subtitle && /* @__PURE__ */ (0,
|
|
1788
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_tamagui33.YStack, { alignItems: "center", gap: "$4", paddingVertical: "$6", paddingHorizontal: "$4", children: [
|
|
1789
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.Circle, { size: 80, backgroundColor: "$color4", overflow: "hidden", children: avatar ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.Image, { source: { uri: avatar }, width: 80, height: 80, objectFit: "cover" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.SizableText, { size: "$9", fontWeight: "700", color: "$color11", children: name[0]?.toUpperCase() ?? "?" }) }),
|
|
1790
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_tamagui33.YStack, { alignItems: "center", gap: "$1", children: [
|
|
1791
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.SizableText, { size: "$7", fontWeight: "700", children: name }),
|
|
1792
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.SizableText, { size: "$4", color: "$color10", children: subtitle })
|
|
1582
1793
|
] }),
|
|
1583
|
-
stats && stats.length > 0 && /* @__PURE__ */ (0,
|
|
1584
|
-
/* @__PURE__ */ (0,
|
|
1585
|
-
/* @__PURE__ */ (0,
|
|
1794
|
+
stats && stats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.XStack, { gap: "$6", children: stats.map((stat, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_tamagui33.YStack, { alignItems: "center", gap: "$1", children: [
|
|
1795
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.SizableText, { size: "$6", fontWeight: "700", children: stat.value }),
|
|
1796
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.SizableText, { size: "$2", color: "$color9", children: stat.label })
|
|
1586
1797
|
] }, i)) }),
|
|
1587
1798
|
actions
|
|
1588
1799
|
] });
|
|
@@ -1590,27 +1801,27 @@ function ProfileHeader({ name, subtitle, avatar, stats, actions }) {
|
|
|
1590
1801
|
|
|
1591
1802
|
// src/patterns/AppHeader.tsx
|
|
1592
1803
|
var import_tamagui34 = require("tamagui");
|
|
1593
|
-
var
|
|
1804
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1594
1805
|
function AppHeader({ title, subtitle, variant = "simple", onBack, avatar, left, right, transparent, borderless }) {
|
|
1595
1806
|
const leftContent = (() => {
|
|
1596
|
-
if (variant === "back") return /* @__PURE__ */ (0,
|
|
1597
|
-
if (variant === "profile") return /* @__PURE__ */ (0,
|
|
1807
|
+
if (variant === "back") return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tamagui34.SizableText, { size: "$6", paddingRight: "$2", onPress: onBack, pressStyle: { opacity: 0.6 }, cursor: "pointer", children: "\u2039" });
|
|
1808
|
+
if (variant === "profile") return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Avatar, { uri: avatar, name: title, size: "sm" });
|
|
1598
1809
|
if (variant === "centered") return left ?? null;
|
|
1599
1810
|
return null;
|
|
1600
1811
|
})();
|
|
1601
1812
|
const rightContent = variant === "profile" || variant === "centered" ? right ?? null : null;
|
|
1602
|
-
return /* @__PURE__ */ (0,
|
|
1813
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1603
1814
|
import_tamagui34.YStack,
|
|
1604
1815
|
{
|
|
1605
1816
|
paddingTop: "$6",
|
|
1606
1817
|
backgroundColor: transparent ? "transparent" : "$background",
|
|
1607
1818
|
borderBottomWidth: borderless ? 0 : 1,
|
|
1608
1819
|
borderBottomColor: "$borderColor",
|
|
1609
|
-
children: /* @__PURE__ */ (0,
|
|
1820
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_tamagui34.XStack, { height: 56, alignItems: "center", paddingHorizontal: "$4", gap: "$3", children: [
|
|
1610
1821
|
leftContent,
|
|
1611
|
-
/* @__PURE__ */ (0,
|
|
1612
|
-
/* @__PURE__ */ (0,
|
|
1613
|
-
subtitle && /* @__PURE__ */ (0,
|
|
1822
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_tamagui34.YStack, { flex: 1, alignItems: variant === "centered" ? "center" : "flex-start", children: [
|
|
1823
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tamagui34.SizableText, { size: "$6", fontWeight: "700", numberOfLines: 1, children: title }),
|
|
1824
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tamagui34.SizableText, { size: "$2", color: "$color9", numberOfLines: 1, children: subtitle })
|
|
1614
1825
|
] }),
|
|
1615
1826
|
rightContent
|
|
1616
1827
|
] })
|
|
@@ -1621,9 +1832,9 @@ function AppHeader({ title, subtitle, variant = "simple", onBack, avatar, left,
|
|
|
1621
1832
|
// src/patterns/BottomSheet.tsx
|
|
1622
1833
|
var import_tamagui35 = require("tamagui");
|
|
1623
1834
|
var import_react_native2 = require("react-native");
|
|
1624
|
-
var
|
|
1835
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1625
1836
|
function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], dismissOnSnapToBottom = true, showHandle = true, showClose = false, zIndex = 1e5 }) {
|
|
1626
|
-
return /* @__PURE__ */ (0,
|
|
1837
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
1627
1838
|
import_tamagui35.Sheet,
|
|
1628
1839
|
{
|
|
1629
1840
|
modal: true,
|
|
@@ -1635,12 +1846,12 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
|
|
|
1635
1846
|
zIndex,
|
|
1636
1847
|
animation: "medium",
|
|
1637
1848
|
children: [
|
|
1638
|
-
/* @__PURE__ */ (0,
|
|
1639
|
-
showHandle && /* @__PURE__ */ (0,
|
|
1640
|
-
/* @__PURE__ */ (0,
|
|
1641
|
-
(title || showClose) && /* @__PURE__ */ (0,
|
|
1642
|
-
/* @__PURE__ */ (0,
|
|
1643
|
-
showClose && /* @__PURE__ */ (0,
|
|
1849
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui35.Sheet.Overlay, { animation: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }),
|
|
1850
|
+
showHandle && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui35.Sheet.Handle, {}),
|
|
1851
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui35.Sheet.Frame, { children: [
|
|
1852
|
+
(title || showClose) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui35.XStack, { paddingHorizontal: "$4", paddingTop: "$3", paddingBottom: "$2", alignItems: "center", justifyContent: "space-between", children: [
|
|
1853
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui35.SizableText, { size: "$6", fontWeight: "600", flexShrink: 1, children: title }),
|
|
1854
|
+
showClose && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1644
1855
|
import_tamagui35.XStack,
|
|
1645
1856
|
{
|
|
1646
1857
|
width: 28,
|
|
@@ -1651,11 +1862,11 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
|
|
|
1651
1862
|
justifyContent: "center",
|
|
1652
1863
|
pressStyle: { opacity: 0.7 },
|
|
1653
1864
|
onPress: () => onOpenChange(false),
|
|
1654
|
-
children: /* @__PURE__ */ (0,
|
|
1865
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui35.SizableText, { size: "$3", color: "$color10", fontWeight: "600", children: "\u2715" })
|
|
1655
1866
|
}
|
|
1656
1867
|
)
|
|
1657
1868
|
] }),
|
|
1658
|
-
/* @__PURE__ */ (0,
|
|
1869
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native2.ScrollView, { contentContainerStyle: { paddingBottom: 40 }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui35.YStack, { padding: "$4", children }) })
|
|
1659
1870
|
] })
|
|
1660
1871
|
]
|
|
1661
1872
|
}
|
|
@@ -1665,36 +1876,13 @@ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], d
|
|
|
1665
1876
|
// src/patterns/LoginScreen.tsx
|
|
1666
1877
|
var import_react9 = require("react");
|
|
1667
1878
|
var import_tamagui36 = require("tamagui");
|
|
1668
|
-
var
|
|
1669
|
-
function GoogleIcon({ size = 20 }) {
|
|
1670
|
-
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.XStack, { width: size, height: size, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { fontSize: size, lineHeight: size, fontWeight: "700", color: "#4285F4", children: "G" }) });
|
|
1671
|
-
}
|
|
1672
|
-
function AppleIcon({ size = 20 }) {
|
|
1673
|
-
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.XStack, { width: size, height: size, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { fontSize: size * 0.85, lineHeight: size, color: "$color1", children: "\uF8FF" }) });
|
|
1674
|
-
}
|
|
1675
|
-
function GitHubIcon({ size = 20 }) {
|
|
1676
|
-
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.Circle, { size, backgroundColor: "$color1", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { fontSize: size * 0.6, lineHeight: size, fontWeight: "900", color: "$color12", textAlign: "center", children: "GH" }) });
|
|
1677
|
-
}
|
|
1678
|
-
function MicrosoftIcon({ size = 20 }) {
|
|
1679
|
-
const half = Math.floor(size * 0.4);
|
|
1680
|
-
const gap = 2;
|
|
1681
|
-
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.YStack, { width: size, height: size, alignItems: "center", justifyContent: "center", children: [
|
|
1682
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.XStack, { gap, children: [
|
|
1683
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.YStack, { width: half, height: half, backgroundColor: "#F25022" }),
|
|
1684
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.YStack, { width: half, height: half, backgroundColor: "#7FBA00" })
|
|
1685
|
-
] }),
|
|
1686
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.XStack, { gap, children: [
|
|
1687
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.YStack, { width: half, height: half, backgroundColor: "#00A4EF" }),
|
|
1688
|
-
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.YStack, { width: half, height: half, backgroundColor: "#FFB900" })
|
|
1689
|
-
] })
|
|
1690
|
-
] });
|
|
1691
|
-
}
|
|
1879
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1692
1880
|
var BRAND_ICON_MAP = {
|
|
1693
|
-
google:
|
|
1694
|
-
apple:
|
|
1695
|
-
github:
|
|
1696
|
-
microsoft:
|
|
1697
|
-
custom: ({ size = 20 }) => /* @__PURE__ */ (0,
|
|
1881
|
+
google: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(GoogleLogo, { size }),
|
|
1882
|
+
apple: ({ size, color }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppleLogo, { size, color }),
|
|
1883
|
+
github: ({ size, color }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(GitHubLogo, { size, color }),
|
|
1884
|
+
microsoft: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MicrosoftLogo, { size }),
|
|
1885
|
+
custom: ({ size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.Circle, { size, backgroundColor: "$color4", alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { fontSize: size * 0.6, color: "$color10", children: "\u2022" }) })
|
|
1698
1886
|
};
|
|
1699
1887
|
var BRAND_STYLES = {
|
|
1700
1888
|
google: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" },
|
|
@@ -1705,9 +1893,10 @@ var BRAND_STYLES = {
|
|
|
1705
1893
|
};
|
|
1706
1894
|
function ProviderBadge({ provider }) {
|
|
1707
1895
|
const brand = provider.brand ?? "custom";
|
|
1708
|
-
if (provider.icon) return /* @__PURE__ */ (0,
|
|
1709
|
-
const
|
|
1710
|
-
|
|
1896
|
+
if (provider.icon) return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: provider.icon });
|
|
1897
|
+
const renderIcon = BRAND_ICON_MAP[brand];
|
|
1898
|
+
const iconColor = brand === "apple" || brand === "github" ? "#fff" : void 0;
|
|
1899
|
+
return renderIcon({ size: 20, color: iconColor });
|
|
1711
1900
|
}
|
|
1712
1901
|
function LoginScreen({
|
|
1713
1902
|
variant = "default",
|
|
@@ -1732,9 +1921,9 @@ function LoginScreen({
|
|
|
1732
1921
|
const [password, setPassword] = (0, import_react9.useState)("");
|
|
1733
1922
|
const isEditorial = variant === "editorial";
|
|
1734
1923
|
const isCenteredCard = variant === "centered-card";
|
|
1735
|
-
return /* @__PURE__ */ (0,
|
|
1736
|
-
backgroundSlot ? /* @__PURE__ */ (0,
|
|
1737
|
-
/* @__PURE__ */ (0,
|
|
1924
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.YStack, { flex: 1, padding: "$4", gap: "$5", backgroundColor: "$background", justifyContent: "center", children: [
|
|
1925
|
+
backgroundSlot ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.YStack, { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, children: backgroundSlot }) : null,
|
|
1926
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
1738
1927
|
import_tamagui36.YStack,
|
|
1739
1928
|
{
|
|
1740
1929
|
gap: "$5",
|
|
@@ -1744,13 +1933,13 @@ function LoginScreen({
|
|
|
1744
1933
|
borderWidth: isCenteredCard ? 1 : 0,
|
|
1745
1934
|
borderColor: isCenteredCard ? "$color4" : void 0,
|
|
1746
1935
|
children: [
|
|
1747
|
-
/* @__PURE__ */ (0,
|
|
1748
|
-
logo && /* @__PURE__ */ (0,
|
|
1749
|
-
hero ? /* @__PURE__ */ (0,
|
|
1750
|
-
/* @__PURE__ */ (0,
|
|
1751
|
-
/* @__PURE__ */ (0,
|
|
1936
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.YStack, { alignItems: "center", gap: "$2", children: [
|
|
1937
|
+
logo && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.YStack, { paddingBottom: "$3", children: logo }),
|
|
1938
|
+
hero ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.YStack, { paddingBottom: "$2", children: hero }) : null,
|
|
1939
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: isEditorial ? "$10" : "$9", fontWeight: "700", textAlign: "center", fontFamily: isEditorial ? "$heading" : void 0, children: title }),
|
|
1940
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$4", color: "$color10", textAlign: "center", children: subtitle })
|
|
1752
1941
|
] }),
|
|
1753
|
-
providers.length > 0 && /* @__PURE__ */ (0,
|
|
1942
|
+
providers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.YStack, { gap: "$2.5", children: providers.map((p) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1754
1943
|
import_tamagui36.Button,
|
|
1755
1944
|
{
|
|
1756
1945
|
size: "$5",
|
|
@@ -1762,25 +1951,25 @@ function LoginScreen({
|
|
|
1762
1951
|
onPress: () => onProviderPress?.(p.id),
|
|
1763
1952
|
hoverStyle: { backgroundColor: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].backgroundColor : "$color2" },
|
|
1764
1953
|
pressStyle: { backgroundColor: "$color3" },
|
|
1765
|
-
children: /* @__PURE__ */ (0,
|
|
1766
|
-
/* @__PURE__ */ (0,
|
|
1767
|
-
/* @__PURE__ */ (0,
|
|
1768
|
-
/* @__PURE__ */ (0,
|
|
1769
|
-
/* @__PURE__ */ (0,
|
|
1770
|
-
p.description ? /* @__PURE__ */ (0,
|
|
1954
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.XStack, { alignItems: "center", justifyContent: "space-between", width: "100%", gap: "$2", children: [
|
|
1955
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.XStack, { alignItems: "center", gap: "$2.5", children: [
|
|
1956
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ProviderBadge, { provider: p }),
|
|
1957
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.YStack, { alignItems: "flex-start", children: [
|
|
1958
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$4", fontWeight: "600", color: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].textColor : void 0, children: p.name }),
|
|
1959
|
+
p.description ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$2", color: "$color10", children: p.description }) : null
|
|
1771
1960
|
] })
|
|
1772
1961
|
] }),
|
|
1773
|
-
/* @__PURE__ */ (0,
|
|
1962
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$4", color: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].textColor : "$color9", children: "\u2192" })
|
|
1774
1963
|
] })
|
|
1775
1964
|
},
|
|
1776
1965
|
p.id
|
|
1777
1966
|
)) }),
|
|
1778
|
-
showEmailForm && providers.length > 0 && /* @__PURE__ */ (0,
|
|
1779
|
-
showEmailForm && /* @__PURE__ */ (0,
|
|
1780
|
-
/* @__PURE__ */ (0,
|
|
1781
|
-
/* @__PURE__ */ (0,
|
|
1782
|
-
onForgotPassword && /* @__PURE__ */ (0,
|
|
1783
|
-
/* @__PURE__ */ (0,
|
|
1967
|
+
showEmailForm && providers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Divider, { label: "or" }),
|
|
1968
|
+
showEmailForm && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.YStack, { gap: "$3", children: [
|
|
1969
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Input, { label: "Email", placeholder: "your@email.com", value: email, onChangeText: setEmail, keyboardType: "email-address", autoCapitalize: "none" }),
|
|
1970
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Input, { label: "Password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: password, onChangeText: setPassword, secureTextEntry: true }),
|
|
1971
|
+
onForgotPassword && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.XStack, { justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$3", color: "$color9", onPress: onForgotPassword, children: "Forgot password?" }) }),
|
|
1972
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
1784
1973
|
import_tamagui36.Button,
|
|
1785
1974
|
{
|
|
1786
1975
|
size: "$5",
|
|
@@ -1791,18 +1980,18 @@ function LoginScreen({
|
|
|
1791
1980
|
onPress: () => onEmailSubmit?.(email, password),
|
|
1792
1981
|
hoverStyle: { backgroundColor: "$color10" },
|
|
1793
1982
|
pressStyle: { backgroundColor: "$color8" },
|
|
1794
|
-
icon: loading ? /* @__PURE__ */ (0,
|
|
1983
|
+
icon: loading ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.Spinner, { size: "small", color: "$color1" }) : void 0,
|
|
1795
1984
|
children: "Sign In"
|
|
1796
1985
|
}
|
|
1797
1986
|
),
|
|
1798
|
-
onCreateAccount && /* @__PURE__ */ (0,
|
|
1987
|
+
onCreateAccount && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.Button, { size: "$3", chromeless: true, onPress: onCreateAccount, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$3", color: "$color9", children: "Create Account" }) })
|
|
1799
1988
|
] }),
|
|
1800
|
-
(onTerms || onPrivacy) && /* @__PURE__ */ (0,
|
|
1989
|
+
(onTerms || onPrivacy) && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.YStack, { paddingTop: "$2", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.SizableText, { size: "$2", color: "$color8", textAlign: "center", children: [
|
|
1801
1990
|
"By continuing you agree to our",
|
|
1802
1991
|
" ",
|
|
1803
|
-
onTerms && /* @__PURE__ */ (0,
|
|
1992
|
+
onTerms && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$2", color: "$color9", onPress: onTerms, children: "Terms of Service" }),
|
|
1804
1993
|
onTerms && onPrivacy && " & ",
|
|
1805
|
-
onPrivacy && /* @__PURE__ */ (0,
|
|
1994
|
+
onPrivacy && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$2", color: "$color9", onPress: onPrivacy, children: "Privacy Policy" })
|
|
1806
1995
|
] }) }),
|
|
1807
1996
|
footerSlot
|
|
1808
1997
|
]
|
|
@@ -1813,11 +2002,11 @@ function LoginScreen({
|
|
|
1813
2002
|
|
|
1814
2003
|
// src/patterns/TabBar.tsx
|
|
1815
2004
|
var import_tamagui37 = require("tamagui");
|
|
1816
|
-
var
|
|
2005
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1817
2006
|
function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
1818
|
-
return /* @__PURE__ */ (0,
|
|
2007
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_tamagui37.XStack, { height: 56, borderTopWidth: 1, borderTopColor: "$borderColor", backgroundColor: "$background", paddingBottom: "$2", children: tabs.map((tab) => {
|
|
1819
2008
|
const active = tab.id === activeTab;
|
|
1820
|
-
return /* @__PURE__ */ (0,
|
|
2009
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
1821
2010
|
import_tamagui37.YStack,
|
|
1822
2011
|
{
|
|
1823
2012
|
flex: 1,
|
|
@@ -1827,8 +2016,8 @@ function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
|
1827
2016
|
pressStyle: { opacity: 0.6 },
|
|
1828
2017
|
onPress: () => onTabPress(tab.id),
|
|
1829
2018
|
children: [
|
|
1830
|
-
tab.icon && /* @__PURE__ */ (0,
|
|
1831
|
-
showLabels && /* @__PURE__ */ (0,
|
|
2019
|
+
tab.icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_tamagui37.SizableText, { size: "$5", color: active ? "$color9" : "$color8", children: tab.icon }),
|
|
2020
|
+
showLabels && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_tamagui37.SizableText, { size: "$1", color: active ? "$color9" : "$color8", fontWeight: active ? "600" : "400", children: tab.label })
|
|
1832
2021
|
]
|
|
1833
2022
|
},
|
|
1834
2023
|
tab.id
|
|
@@ -1838,11 +2027,11 @@ function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
|
|
|
1838
2027
|
|
|
1839
2028
|
// src/patterns/SearchBar.tsx
|
|
1840
2029
|
var import_tamagui38 = require("tamagui");
|
|
1841
|
-
var
|
|
2030
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1842
2031
|
function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter, onCancel, autoFocus }) {
|
|
1843
|
-
return /* @__PURE__ */ (0,
|
|
1844
|
-
/* @__PURE__ */ (0,
|
|
1845
|
-
/* @__PURE__ */ (0,
|
|
2032
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_tamagui38.XStack, { height: 44, borderRadius: "$10", backgroundColor: "$color2", alignItems: "center", paddingHorizontal: "$3", gap: "$2", children: [
|
|
2033
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_tamagui38.SizableText, { size: "$4", color: "$color8", children: "\u2315" }),
|
|
2034
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1846
2035
|
import_tamagui38.Input,
|
|
1847
2036
|
{
|
|
1848
2037
|
flex: 1,
|
|
@@ -1856,14 +2045,14 @@ function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter
|
|
|
1856
2045
|
autoFocus
|
|
1857
2046
|
}
|
|
1858
2047
|
),
|
|
1859
|
-
onFilter && /* @__PURE__ */ (0,
|
|
1860
|
-
onCancel && /* @__PURE__ */ (0,
|
|
2048
|
+
onFilter && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_tamagui38.SizableText, { size: "$4", color: "$color9", pressStyle: { opacity: 0.6 }, onPress: onFilter, children: "\u2ACF" }),
|
|
2049
|
+
onCancel && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_tamagui38.SizableText, { size: "$3", color: "$color9", pressStyle: { opacity: 0.6 }, onPress: onCancel, children: "Cancel" })
|
|
1861
2050
|
] });
|
|
1862
2051
|
}
|
|
1863
2052
|
|
|
1864
2053
|
// src/patterns/FloatingActionButton.tsx
|
|
1865
2054
|
var import_tamagui39 = require("tamagui");
|
|
1866
|
-
var
|
|
2055
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1867
2056
|
var sizes = { sm: 44, md: 56, lg: 68 };
|
|
1868
2057
|
var positionStyles = {
|
|
1869
2058
|
"bottom-right": { right: 20 },
|
|
@@ -1872,7 +2061,7 @@ var positionStyles = {
|
|
|
1872
2061
|
};
|
|
1873
2062
|
function FloatingActionButton({ icon, label, onPress, position = "bottom-right", size = "md" }) {
|
|
1874
2063
|
const dim = sizes[size];
|
|
1875
|
-
return /* @__PURE__ */ (0,
|
|
2064
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
1876
2065
|
import_tamagui39.XStack,
|
|
1877
2066
|
{
|
|
1878
2067
|
position: "absolute",
|
|
@@ -1890,8 +2079,8 @@ function FloatingActionButton({ icon, label, onPress, position = "bottom-right",
|
|
|
1890
2079
|
pressStyle: { scale: 0.95, opacity: 0.9 },
|
|
1891
2080
|
onPress,
|
|
1892
2081
|
children: [
|
|
1893
|
-
icon && /* @__PURE__ */ (0,
|
|
1894
|
-
label && /* @__PURE__ */ (0,
|
|
2082
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_tamagui39.SizableText, { color: "$color1", children: icon }),
|
|
2083
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_tamagui39.SizableText, { color: "$color1", size: "$4", fontWeight: "600", children: label })
|
|
1895
2084
|
]
|
|
1896
2085
|
}
|
|
1897
2086
|
);
|
|
@@ -1899,9 +2088,9 @@ function FloatingActionButton({ icon, label, onPress, position = "bottom-right",
|
|
|
1899
2088
|
|
|
1900
2089
|
// src/patterns/ActionSheet.tsx
|
|
1901
2090
|
var import_tamagui40 = require("tamagui");
|
|
1902
|
-
var
|
|
2091
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1903
2092
|
function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel = "Cancel", zIndex = 1e5 }) {
|
|
1904
|
-
return /* @__PURE__ */ (0,
|
|
2093
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
1905
2094
|
import_tamagui40.Sheet,
|
|
1906
2095
|
{
|
|
1907
2096
|
modal: true,
|
|
@@ -1913,11 +2102,11 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1913
2102
|
zIndex,
|
|
1914
2103
|
animation: "medium",
|
|
1915
2104
|
children: [
|
|
1916
|
-
/* @__PURE__ */ (0,
|
|
1917
|
-
/* @__PURE__ */ (0,
|
|
1918
|
-
/* @__PURE__ */ (0,
|
|
1919
|
-
title && /* @__PURE__ */ (0,
|
|
1920
|
-
/* @__PURE__ */ (0,
|
|
2105
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.Sheet.Overlay, { animation: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }),
|
|
2106
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.Sheet.Handle, {}),
|
|
2107
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_tamagui40.Sheet.Frame, { children: [
|
|
2108
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.SizableText, { size: "$3", color: "$color8", textAlign: "center", paddingTop: "$3", paddingBottom: "$1", children: title }),
|
|
2109
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.YStack, { paddingHorizontal: "$3", paddingTop: "$2", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
1921
2110
|
import_tamagui40.XStack,
|
|
1922
2111
|
{
|
|
1923
2112
|
height: 52,
|
|
@@ -1931,8 +2120,8 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1931
2120
|
onOpenChange(false);
|
|
1932
2121
|
},
|
|
1933
2122
|
children: [
|
|
1934
|
-
item.icon && /* @__PURE__ */ (0,
|
|
1935
|
-
/* @__PURE__ */ (0,
|
|
2123
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.SizableText, { size: "$5", children: item.icon }),
|
|
2124
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1936
2125
|
import_tamagui40.SizableText,
|
|
1937
2126
|
{
|
|
1938
2127
|
size: "$5",
|
|
@@ -1946,7 +2135,7 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1946
2135
|
},
|
|
1947
2136
|
item.id
|
|
1948
2137
|
)) }),
|
|
1949
|
-
/* @__PURE__ */ (0,
|
|
2138
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.YStack, { paddingHorizontal: "$3", paddingVertical: "$3", borderTopWidth: 1, borderTopColor: "$borderColor", marginTop: "$2", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1950
2139
|
import_tamagui40.XStack,
|
|
1951
2140
|
{
|
|
1952
2141
|
height: 48,
|
|
@@ -1955,7 +2144,7 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1955
2144
|
borderRadius: "$4",
|
|
1956
2145
|
pressStyle: { backgroundColor: "$color3" },
|
|
1957
2146
|
onPress: () => onOpenChange(false),
|
|
1958
|
-
children: /* @__PURE__ */ (0,
|
|
2147
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.SizableText, { size: "$5", fontWeight: "600", color: "$color9", children: cancelLabel })
|
|
1959
2148
|
}
|
|
1960
2149
|
) })
|
|
1961
2150
|
] })
|
|
@@ -1966,18 +2155,18 @@ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel =
|
|
|
1966
2155
|
|
|
1967
2156
|
// src/patterns/Skeleton.tsx
|
|
1968
2157
|
var import_tamagui41 = require("tamagui");
|
|
1969
|
-
var
|
|
2158
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1970
2159
|
function Skeleton({ width, height, borderRadius, variant = "rectangular" }) {
|
|
1971
2160
|
const size = variant === "circular" ? height ?? 40 : height;
|
|
1972
2161
|
const w = variant === "text" ? width ?? "100%" : width;
|
|
1973
2162
|
const h = variant === "text" ? height ?? 16 : size;
|
|
1974
2163
|
const r = variant === "circular" ? 9999 : borderRadius ?? 8;
|
|
1975
|
-
return /* @__PURE__ */ (0,
|
|
2164
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_tamagui41.YStack, { width: w, height: h, borderRadius: r, backgroundColor: "$color3", opacity: 0.6, animation: "slow", enterStyle: { opacity: 0.3 }, exitStyle: { opacity: 0.3 } });
|
|
1976
2165
|
}
|
|
1977
2166
|
|
|
1978
2167
|
// src/patterns/NotificationBanner.tsx
|
|
1979
2168
|
var import_tamagui42 = require("tamagui");
|
|
1980
|
-
var
|
|
2169
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1981
2170
|
var variantColors = {
|
|
1982
2171
|
info: { bg: "$blue3", text: "$blue11" },
|
|
1983
2172
|
success: { bg: "$green3", text: "$green11" },
|
|
@@ -1986,7 +2175,7 @@ var variantColors = {
|
|
|
1986
2175
|
};
|
|
1987
2176
|
function NotificationBanner({ title, message, variant = "info", onPress, onDismiss, icon }) {
|
|
1988
2177
|
const colors = variantColors[variant];
|
|
1989
|
-
return /* @__PURE__ */ (0,
|
|
2178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
1990
2179
|
import_tamagui42.XStack,
|
|
1991
2180
|
{
|
|
1992
2181
|
backgroundColor: colors.bg,
|
|
@@ -1997,12 +2186,12 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
|
|
|
1997
2186
|
onPress,
|
|
1998
2187
|
pressStyle: onPress ? { opacity: 0.8 } : void 0,
|
|
1999
2188
|
children: [
|
|
2000
|
-
icon && /* @__PURE__ */ (0,
|
|
2001
|
-
/* @__PURE__ */ (0,
|
|
2002
|
-
/* @__PURE__ */ (0,
|
|
2003
|
-
message && /* @__PURE__ */ (0,
|
|
2189
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui42.YStack, { paddingTop: "$0.5", children: icon }),
|
|
2190
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_tamagui42.YStack, { flex: 1, gap: "$1", children: [
|
|
2191
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui42.SizableText, { size: "$4", fontWeight: "600", color: colors.text, children: title }),
|
|
2192
|
+
message && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui42.SizableText, { size: "$3", color: colors.text, opacity: 0.8, children: message })
|
|
2004
2193
|
] }),
|
|
2005
|
-
onDismiss && /* @__PURE__ */ (0,
|
|
2194
|
+
onDismiss && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui42.SizableText, { size: "$3", color: colors.text, opacity: 0.6, onPress: onDismiss, padding: "$1", children: "\u2715" })
|
|
2006
2195
|
]
|
|
2007
2196
|
}
|
|
2008
2197
|
);
|
|
@@ -2010,35 +2199,35 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
|
|
|
2010
2199
|
|
|
2011
2200
|
// src/patterns/ProgressSteps.tsx
|
|
2012
2201
|
var import_tamagui43 = require("tamagui");
|
|
2013
|
-
var
|
|
2202
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2014
2203
|
function ProgressSteps({ steps, currentStep, variant = "dots" }) {
|
|
2015
2204
|
if (variant === "bar") {
|
|
2016
2205
|
const progress = steps.length > 1 ? currentStep / (steps.length - 1) * 100 : 100;
|
|
2017
|
-
return /* @__PURE__ */ (0,
|
|
2018
|
-
/* @__PURE__ */ (0,
|
|
2019
|
-
/* @__PURE__ */ (0,
|
|
2206
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_tamagui43.YStack, { gap: "$2", children: [
|
|
2207
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.YStack, { height: 4, backgroundColor: "$color4", borderRadius: 2, overflow: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.YStack, { height: 4, width: `${progress}%`, backgroundColor: "$color9", borderRadius: 2, animation: "quick" }) }),
|
|
2208
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.XStack, { justifyContent: "space-between", children: steps.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.SizableText, { size: "$2", color: i <= currentStep ? "$color9" : "$color8", children: label }, i)) })
|
|
2020
2209
|
] });
|
|
2021
2210
|
}
|
|
2022
|
-
return /* @__PURE__ */ (0,
|
|
2023
|
-
/* @__PURE__ */ (0,
|
|
2024
|
-
/* @__PURE__ */ (0,
|
|
2025
|
-
/* @__PURE__ */ (0,
|
|
2211
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.XStack, { alignItems: "center", justifyContent: "center", gap: "$0", children: steps.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_tamagui43.XStack, { alignItems: "center", gap: "$0", children: [
|
|
2212
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_tamagui43.YStack, { alignItems: "center", gap: "$1.5", children: [
|
|
2213
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.Circle, { size: variant === "numbered" ? 28 : 10, backgroundColor: i <= currentStep ? "$color9" : "$color4", animation: "quick", children: variant === "numbered" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.SizableText, { size: "$2", fontWeight: "600", color: i <= currentStep ? "$color1" : "$color8", children: i + 1 }) }),
|
|
2214
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.SizableText, { size: "$1", color: i <= currentStep ? "$color11" : "$color8", numberOfLines: 1, children: label })
|
|
2026
2215
|
] }),
|
|
2027
|
-
i < steps.length - 1 && /* @__PURE__ */ (0,
|
|
2216
|
+
i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.YStack, { height: 2, width: 32, backgroundColor: i < currentStep ? "$color9" : "$color4", marginBottom: "$4" })
|
|
2028
2217
|
] }, i)) });
|
|
2029
2218
|
}
|
|
2030
2219
|
|
|
2031
2220
|
// src/patterns/SwipeableRow.tsx
|
|
2032
2221
|
var import_react10 = require("react");
|
|
2033
2222
|
var import_tamagui44 = require("tamagui");
|
|
2034
|
-
var
|
|
2223
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2035
2224
|
function SwipeableRow({ children, leftActions, rightActions }) {
|
|
2036
2225
|
const [showActions, setShowActions] = (0, import_react10.useState)(false);
|
|
2037
2226
|
const actions = [...leftActions ?? [], ...rightActions ?? []];
|
|
2038
|
-
if (actions.length === 0) return /* @__PURE__ */ (0,
|
|
2039
|
-
return /* @__PURE__ */ (0,
|
|
2040
|
-
/* @__PURE__ */ (0,
|
|
2041
|
-
showActions && /* @__PURE__ */ (0,
|
|
2227
|
+
if (actions.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
|
|
2228
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_tamagui44.YStack, { children: [
|
|
2229
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_tamagui44.YStack, { onLongPress: () => setShowActions((v) => !v), pressStyle: { opacity: 0.9 }, children }),
|
|
2230
|
+
showActions && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_tamagui44.XStack, { gap: "$2", padding: "$2", animation: "quick", enterStyle: { opacity: 0, scale: 0.95 }, children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2042
2231
|
import_tamagui44.Button,
|
|
2043
2232
|
{
|
|
2044
2233
|
flex: 1,
|
|
@@ -2049,7 +2238,7 @@ function SwipeableRow({ children, leftActions, rightActions }) {
|
|
|
2049
2238
|
action.onPress();
|
|
2050
2239
|
setShowActions(false);
|
|
2051
2240
|
},
|
|
2052
|
-
children: /* @__PURE__ */ (0,
|
|
2241
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_tamagui44.SizableText, { size: "$2", fontWeight: "600", color: "white", children: action.label })
|
|
2053
2242
|
},
|
|
2054
2243
|
action.id
|
|
2055
2244
|
)) })
|
|
@@ -2059,9 +2248,9 @@ function SwipeableRow({ children, leftActions, rightActions }) {
|
|
|
2059
2248
|
// src/patterns/MediaCard.tsx
|
|
2060
2249
|
var import_tamagui45 = require("tamagui");
|
|
2061
2250
|
var import_linear_gradient = require("tamagui/linear-gradient");
|
|
2062
|
-
var
|
|
2251
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2063
2252
|
function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio = 16 / 9, onPress, badge }) {
|
|
2064
|
-
return /* @__PURE__ */ (0,
|
|
2253
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2065
2254
|
import_tamagui45.YStack,
|
|
2066
2255
|
{
|
|
2067
2256
|
borderRadius: "$4",
|
|
@@ -2069,9 +2258,9 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
2069
2258
|
onPress,
|
|
2070
2259
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
2071
2260
|
animation: "quick",
|
|
2072
|
-
children: /* @__PURE__ */ (0,
|
|
2073
|
-
/* @__PURE__ */ (0,
|
|
2074
|
-
overlay === "gradient" && /* @__PURE__ */ (0,
|
|
2261
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_tamagui45.YStack, { aspectRatio, children: [
|
|
2262
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.Image, { source: { uri: image }, width: "100%", height: "100%", objectFit: "cover" }),
|
|
2263
|
+
overlay === "gradient" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2075
2264
|
import_linear_gradient.LinearGradient,
|
|
2076
2265
|
{
|
|
2077
2266
|
colors: ["transparent", "rgba(0,0,0,0.7)"],
|
|
@@ -2084,8 +2273,8 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
2084
2273
|
height: "60%"
|
|
2085
2274
|
}
|
|
2086
2275
|
),
|
|
2087
|
-
overlay === "dark" && /* @__PURE__ */ (0,
|
|
2088
|
-
badge && /* @__PURE__ */ (0,
|
|
2276
|
+
overlay === "dark" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.YStack, { position: "absolute", fullscreen: true, backgroundColor: "rgba(0,0,0,0.4)" }),
|
|
2277
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2089
2278
|
import_tamagui45.XStack,
|
|
2090
2279
|
{
|
|
2091
2280
|
position: "absolute",
|
|
@@ -2095,12 +2284,12 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
2095
2284
|
paddingHorizontal: "$2",
|
|
2096
2285
|
paddingVertical: "$1",
|
|
2097
2286
|
borderRadius: "$2",
|
|
2098
|
-
children: /* @__PURE__ */ (0,
|
|
2287
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.SizableText, { size: "$1", fontWeight: "600", color: "$color1", children: badge })
|
|
2099
2288
|
}
|
|
2100
2289
|
),
|
|
2101
|
-
/* @__PURE__ */ (0,
|
|
2102
|
-
/* @__PURE__ */ (0,
|
|
2103
|
-
subtitle && /* @__PURE__ */ (0,
|
|
2290
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_tamagui45.YStack, { position: "absolute", bottom: 0, left: 0, right: 0, padding: "$3", gap: "$1", children: [
|
|
2291
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.SizableText, { size: "$5", fontWeight: "600", color: "white", children: title }),
|
|
2292
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.SizableText, { size: "$3", color: "rgba(255,255,255,0.8)", children: subtitle })
|
|
2104
2293
|
] })
|
|
2105
2294
|
] })
|
|
2106
2295
|
}
|
|
@@ -2111,13 +2300,13 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
|
|
|
2111
2300
|
var import_react11 = require("react");
|
|
2112
2301
|
var import_tamagui46 = require("tamagui");
|
|
2113
2302
|
var import_react_native3 = require("react-native");
|
|
2114
|
-
var
|
|
2303
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2115
2304
|
function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false }) {
|
|
2116
2305
|
const [activeIndex, setActiveIndex] = (0, import_react11.useState)(0);
|
|
2117
2306
|
const count = import_react11.Children.count(children);
|
|
2118
2307
|
const gapPx = gap === "$2" ? 8 : gap === "$3" ? 12 : 16;
|
|
2119
|
-
return /* @__PURE__ */ (0,
|
|
2120
|
-
/* @__PURE__ */ (0,
|
|
2308
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_tamagui46.YStack, { gap: "$3", children: [
|
|
2309
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2121
2310
|
import_react_native3.ScrollView,
|
|
2122
2311
|
{
|
|
2123
2312
|
horizontal: true,
|
|
@@ -2131,50 +2320,50 @@ function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false
|
|
|
2131
2320
|
children
|
|
2132
2321
|
}
|
|
2133
2322
|
),
|
|
2134
|
-
showIndicators && count > 1 && /* @__PURE__ */ (0,
|
|
2323
|
+
showIndicators && count > 1 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_tamagui46.XStack, { justifyContent: "center", gap: "$1.5", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_tamagui46.Circle, { size: 6, backgroundColor: i === activeIndex ? "$color9" : "$color4", animation: "quick" }, i)) })
|
|
2135
2324
|
] });
|
|
2136
2325
|
}
|
|
2137
2326
|
|
|
2138
2327
|
// src/patterns/PullToRefresh.tsx
|
|
2139
2328
|
var import_tamagui47 = require("tamagui");
|
|
2140
2329
|
var import_react_native4 = require("react-native");
|
|
2141
|
-
var
|
|
2330
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2142
2331
|
function PullToRefresh({ children, onRefresh, refreshing = false }) {
|
|
2143
|
-
return /* @__PURE__ */ (0,
|
|
2332
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
2144
2333
|
import_react_native4.ScrollView,
|
|
2145
2334
|
{
|
|
2146
2335
|
contentContainerStyle: { flexGrow: 1 },
|
|
2147
|
-
refreshControl: /* @__PURE__ */ (0,
|
|
2148
|
-
children: /* @__PURE__ */ (0,
|
|
2336
|
+
refreshControl: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native4.RefreshControl, { refreshing, onRefresh }),
|
|
2337
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_tamagui47.YStack, { flex: 1, children })
|
|
2149
2338
|
}
|
|
2150
2339
|
);
|
|
2151
2340
|
}
|
|
2152
2341
|
|
|
2153
2342
|
// src/patterns/ProductCard.tsx
|
|
2154
2343
|
var import_tamagui48 = require("tamagui");
|
|
2155
|
-
var
|
|
2344
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2156
2345
|
function Stars({ rating = 0 }) {
|
|
2157
|
-
return /* @__PURE__ */ (0,
|
|
2346
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.XStack, { gap: "$0.5", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.SizableText, { size: "$2", color: i < Math.round(rating) ? "$yellow9" : "$color5", children: "\u2605" }, i)) });
|
|
2158
2347
|
}
|
|
2159
2348
|
function CardContent2({ title, price, originalPrice, rating, reviewCount, onAddToCart }) {
|
|
2160
|
-
return /* @__PURE__ */ (0,
|
|
2161
|
-
/* @__PURE__ */ (0,
|
|
2162
|
-
/* @__PURE__ */ (0,
|
|
2163
|
-
rating !== void 0 && /* @__PURE__ */ (0,
|
|
2164
|
-
/* @__PURE__ */ (0,
|
|
2165
|
-
reviewCount !== void 0 && /* @__PURE__ */ (0,
|
|
2349
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.YStack, { flex: 1, gap: "$1.5", justifyContent: "space-between", children: [
|
|
2350
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.YStack, { gap: "$1", children: [
|
|
2351
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.SizableText, { size: "$4", fontWeight: "600", numberOfLines: 2, children: title }),
|
|
2352
|
+
rating !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.XStack, { gap: "$1.5", alignItems: "center", children: [
|
|
2353
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Stars, { rating }),
|
|
2354
|
+
reviewCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.SizableText, { size: "$2", color: "$color9", children: [
|
|
2166
2355
|
"(",
|
|
2167
2356
|
reviewCount,
|
|
2168
2357
|
")"
|
|
2169
2358
|
] })
|
|
2170
2359
|
] })
|
|
2171
2360
|
] }),
|
|
2172
|
-
/* @__PURE__ */ (0,
|
|
2173
|
-
/* @__PURE__ */ (0,
|
|
2174
|
-
/* @__PURE__ */ (0,
|
|
2175
|
-
originalPrice && /* @__PURE__ */ (0,
|
|
2361
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.XStack, { alignItems: "center", justifyContent: "space-between", children: [
|
|
2362
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.XStack, { gap: "$2", alignItems: "baseline", children: [
|
|
2363
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.SizableText, { size: "$6", fontWeight: "700", children: price }),
|
|
2364
|
+
originalPrice && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.SizableText, { size: "$3", color: "$color8", textDecorationLine: "line-through", children: originalPrice })
|
|
2176
2365
|
] }),
|
|
2177
|
-
onAddToCart && /* @__PURE__ */ (0,
|
|
2366
|
+
onAddToCart && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2178
2367
|
import_tamagui48.Button,
|
|
2179
2368
|
{
|
|
2180
2369
|
size: "$3",
|
|
@@ -2196,7 +2385,7 @@ function CardContent2({ title, price, originalPrice, rating, reviewCount, onAddT
|
|
|
2196
2385
|
function ProductCard({ image, title, price, originalPrice, rating, reviewCount, badge, onPress, onAddToCart, variant = "vertical" }) {
|
|
2197
2386
|
const isHorizontal = variant === "horizontal";
|
|
2198
2387
|
const Wrapper = isHorizontal ? import_tamagui48.XStack : import_tamagui48.YStack;
|
|
2199
|
-
return /* @__PURE__ */ (0,
|
|
2388
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
2200
2389
|
Wrapper,
|
|
2201
2390
|
{
|
|
2202
2391
|
backgroundColor: "$color1",
|
|
@@ -2209,9 +2398,9 @@ function ProductCard({ image, title, price, originalPrice, rating, reviewCount,
|
|
|
2209
2398
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
2210
2399
|
...isHorizontal ? { height: 140 } : {},
|
|
2211
2400
|
children: [
|
|
2212
|
-
/* @__PURE__ */ (0,
|
|
2213
|
-
/* @__PURE__ */ (0,
|
|
2214
|
-
badge && /* @__PURE__ */ (0,
|
|
2401
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.YStack, { ...isHorizontal ? { width: 140 } : { aspectRatio: 4 / 3 }, position: "relative", children: [
|
|
2402
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.Image, { source: { uri: image }, width: "100%", height: "100%", objectFit: "cover" }),
|
|
2403
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2215
2404
|
import_tamagui48.XStack,
|
|
2216
2405
|
{
|
|
2217
2406
|
position: "absolute",
|
|
@@ -2221,11 +2410,11 @@ function ProductCard({ image, title, price, originalPrice, rating, reviewCount,
|
|
|
2221
2410
|
paddingHorizontal: "$2",
|
|
2222
2411
|
paddingVertical: "$1",
|
|
2223
2412
|
borderRadius: "$10",
|
|
2224
|
-
children: /* @__PURE__ */ (0,
|
|
2413
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.SizableText, { size: "$1", fontWeight: "700", color: "white", children: badge })
|
|
2225
2414
|
}
|
|
2226
2415
|
)
|
|
2227
2416
|
] }),
|
|
2228
|
-
/* @__PURE__ */ (0,
|
|
2417
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.YStack, { flex: 1, padding: "$3", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CardContent2, { ...{ title, price, originalPrice, rating, reviewCount, onAddToCart } }) })
|
|
2229
2418
|
]
|
|
2230
2419
|
}
|
|
2231
2420
|
);
|
|
@@ -2233,11 +2422,11 @@ function ProductCard({ image, title, price, originalPrice, rating, reviewCount,
|
|
|
2233
2422
|
|
|
2234
2423
|
// src/patterns/PricingTable.tsx
|
|
2235
2424
|
var import_tamagui49 = require("tamagui");
|
|
2236
|
-
var
|
|
2425
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2237
2426
|
function BillingToggle({ annual, onToggle }) {
|
|
2238
|
-
return /* @__PURE__ */ (0,
|
|
2427
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.XStack, { alignSelf: "center", backgroundColor: "$color3", borderRadius: "$10", padding: "$1", gap: "$0.5", children: ["Monthly", "Annual"].map((label, i) => {
|
|
2239
2428
|
const active = i === 1 ? annual : !annual;
|
|
2240
|
-
return /* @__PURE__ */ (0,
|
|
2429
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2241
2430
|
import_tamagui49.XStack,
|
|
2242
2431
|
{
|
|
2243
2432
|
paddingHorizontal: "$4",
|
|
@@ -2247,96 +2436,86 @@ function BillingToggle({ annual, onToggle }) {
|
|
|
2247
2436
|
onPress: () => onToggle(i === 1),
|
|
2248
2437
|
pressStyle: { opacity: 0.8 },
|
|
2249
2438
|
animation: "quick",
|
|
2250
|
-
children: /* @__PURE__ */ (0,
|
|
2439
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$3", fontWeight: "600", color: active ? "$color1" : "$color10", children: label })
|
|
2251
2440
|
},
|
|
2252
2441
|
label
|
|
2253
2442
|
);
|
|
2254
2443
|
}) });
|
|
2255
2444
|
}
|
|
2256
|
-
function
|
|
2257
|
-
return /* @__PURE__ */ (0,
|
|
2258
|
-
import_tamagui49.
|
|
2445
|
+
function PlanRow2({ plan, selected, onSelect }) {
|
|
2446
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
2447
|
+
import_tamagui49.XStack,
|
|
2259
2448
|
{
|
|
2260
|
-
flex: 1,
|
|
2261
|
-
minWidth: 260,
|
|
2262
2449
|
padding: "$4",
|
|
2263
|
-
borderRadius: "$
|
|
2264
|
-
gap: "$3",
|
|
2450
|
+
borderRadius: "$6",
|
|
2265
2451
|
borderWidth: 2,
|
|
2266
|
-
borderColor: selected ? "$color9" :
|
|
2267
|
-
backgroundColor:
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
animation: "quick",
|
|
2452
|
+
borderColor: selected ? "$color9" : "$color4",
|
|
2453
|
+
backgroundColor: selected ? "$color2" : "$color1",
|
|
2454
|
+
alignItems: "center",
|
|
2455
|
+
gap: "$3",
|
|
2271
2456
|
onPress: onSelect,
|
|
2457
|
+
pressStyle: { scale: 0.98, opacity: 0.9 },
|
|
2458
|
+
animation: "quick",
|
|
2459
|
+
cursor: "pointer",
|
|
2460
|
+
position: "relative",
|
|
2272
2461
|
children: [
|
|
2273
|
-
plan.popular && /* @__PURE__ */ (0,
|
|
2274
|
-
|
|
2462
|
+
plan.popular && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.XStack, { position: "absolute", top: -10, right: 12, backgroundColor: "$color9", paddingHorizontal: "$2.5", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$1", fontWeight: "700", color: "$color1", children: "BEST VALUE" }) }),
|
|
2463
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2464
|
+
import_tamagui49.Circle,
|
|
2275
2465
|
{
|
|
2276
|
-
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
backgroundColor: "$color9",
|
|
2280
|
-
|
|
2281
|
-
paddingVertical: "$1",
|
|
2282
|
-
borderRadius: "$10",
|
|
2283
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui49.SizableText, { size: "$1", fontWeight: "700", color: "$color1", children: "POPULAR" })
|
|
2466
|
+
size: 22,
|
|
2467
|
+
borderWidth: 2,
|
|
2468
|
+
borderColor: selected ? "$color9" : "$color6",
|
|
2469
|
+
backgroundColor: selected ? "$color9" : "transparent",
|
|
2470
|
+
children: selected && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.Circle, { size: 8, backgroundColor: "$color1" })
|
|
2284
2471
|
}
|
|
2285
2472
|
),
|
|
2286
|
-
/* @__PURE__ */ (0,
|
|
2287
|
-
/* @__PURE__ */ (0,
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
"/",
|
|
2293
|
-
plan.period
|
|
2294
|
-
] })
|
|
2295
|
-
] })
|
|
2473
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_tamagui49.YStack, { flex: 1, gap: "$0.5", children: [
|
|
2474
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_tamagui49.XStack, { alignItems: "center", gap: "$2", children: [
|
|
2475
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$5", fontWeight: "700", children: plan.name }),
|
|
2476
|
+
plan.trial && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.XStack, { backgroundColor: "$green3", paddingHorizontal: "$2", paddingVertical: 2, borderRadius: "$10", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$1", fontWeight: "700", color: "$green9", children: plan.trial }) })
|
|
2477
|
+
] }),
|
|
2478
|
+
plan.description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$2", color: "$color10", children: plan.description })
|
|
2296
2479
|
] }),
|
|
2297
|
-
/* @__PURE__ */ (0,
|
|
2298
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui49.SizableText, { size: "$3", color: f.included ? "$green9" : "$color6", children: f.included ? "\u2713" : "\u2717" }),
|
|
2299
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui49.SizableText, { size: "$3", color: f.included ? "$color11" : "$color8", flex: 1, children: f.label })
|
|
2300
|
-
] }, i)) }),
|
|
2301
|
-
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
2302
|
-
import_tamagui49.Button,
|
|
2303
|
-
{
|
|
2304
|
-
size: "$4",
|
|
2305
|
-
borderRadius: "$10",
|
|
2306
|
-
fontWeight: "700",
|
|
2307
|
-
animation: "quick",
|
|
2308
|
-
backgroundColor: selected || plan.popular ? "$color9" : "transparent",
|
|
2309
|
-
color: selected || plan.popular ? "$color1" : "$color11",
|
|
2310
|
-
borderWidth: selected || plan.popular ? 0 : 1,
|
|
2311
|
-
borderColor: "$color7",
|
|
2312
|
-
onPress: onSelect,
|
|
2313
|
-
pressStyle: { scale: 0.97, opacity: 0.9 },
|
|
2314
|
-
children: plan.cta ?? "Get Started"
|
|
2315
|
-
}
|
|
2316
|
-
)
|
|
2480
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$5", fontWeight: "800", children: plan.price })
|
|
2317
2481
|
]
|
|
2318
2482
|
}
|
|
2319
2483
|
);
|
|
2320
2484
|
}
|
|
2321
|
-
function
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2485
|
+
function FeatureList({ features }) {
|
|
2486
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.YStack, { gap: "$2.5", paddingHorizontal: "$1", children: features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_tamagui49.XStack, { gap: "$2.5", alignItems: "center", children: [
|
|
2487
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.Circle, { size: 20, backgroundColor: f.included ? "$green3" : "$color3", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$1", fontWeight: "700", color: f.included ? "$green9" : "$color8", children: f.included ? "\u2713" : "\u2014" }) }),
|
|
2488
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$3", color: f.included ? "$color11" : "$color8", flex: 1, children: f.label })
|
|
2489
|
+
] }, i)) });
|
|
2490
|
+
}
|
|
2491
|
+
function PricingTable({ plans, selectedPlan, onSelectPlan, annual = false, onToggleBilling, onContinue, continueLabel, reassurance }) {
|
|
2492
|
+
const selected = selectedPlan ?? plans.find((p) => p.popular)?.id ?? plans[0]?.id;
|
|
2493
|
+
const activePlan = plans.find((p) => p.id === selected);
|
|
2494
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_tamagui49.YStack, { gap: "$4", children: [
|
|
2495
|
+
onToggleBilling && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(BillingToggle, { annual, onToggle: onToggleBilling }),
|
|
2496
|
+
activePlan && activePlan.features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.YStack, { backgroundColor: "$color1", borderRadius: "$6", padding: "$4", gap: "$3", borderWidth: 1, borderColor: "$color4", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FeatureList, { features: activePlan.features }) }),
|
|
2497
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.YStack, { gap: "$3", children: plans.map((plan) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2498
|
+
PlanRow2,
|
|
2327
2499
|
{
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
|
|
2500
|
+
plan,
|
|
2501
|
+
selected: selected === plan.id,
|
|
2502
|
+
onSelect: () => onSelectPlan?.(plan.id)
|
|
2503
|
+
},
|
|
2504
|
+
plan.id
|
|
2505
|
+
)) }),
|
|
2506
|
+
reassurance && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$2", color: "$color10", textAlign: "center", children: reassurance }),
|
|
2507
|
+
onContinue && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2508
|
+
import_tamagui49.Button,
|
|
2509
|
+
{
|
|
2510
|
+
size: "$5",
|
|
2511
|
+
backgroundColor: "$color9",
|
|
2512
|
+
color: "$color1",
|
|
2513
|
+
borderRadius: "$10",
|
|
2514
|
+
fontWeight: "700",
|
|
2515
|
+
onPress: onContinue,
|
|
2516
|
+
pressStyle: { scale: 0.97, backgroundColor: "$color8" },
|
|
2517
|
+
animation: "quick",
|
|
2518
|
+
children: continueLabel ?? activePlan?.cta ?? "Get Started"
|
|
2340
2519
|
}
|
|
2341
2520
|
)
|
|
2342
2521
|
] });
|
|
@@ -2345,7 +2524,7 @@ function PricingTable({ plans, selectedPlan, onSelectPlan, annual = false, onTog
|
|
|
2345
2524
|
// src/patterns/CountdownBanner.tsx
|
|
2346
2525
|
var import_react12 = require("react");
|
|
2347
2526
|
var import_tamagui50 = require("tamagui");
|
|
2348
|
-
var
|
|
2527
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2349
2528
|
function useCountdown2(endTime, minutes, onExpire) {
|
|
2350
2529
|
const getRemaining = (0, import_react12.useCallback)(() => {
|
|
2351
2530
|
if (endTime) return Math.max(0, Math.floor((endTime.getTime() - Date.now()) / 1e3));
|
|
@@ -2379,74 +2558,74 @@ function useCountdown2(endTime, minutes, onExpire) {
|
|
|
2379
2558
|
return { display, expired: seconds <= 0 };
|
|
2380
2559
|
}
|
|
2381
2560
|
function TimeBox({ value }) {
|
|
2382
|
-
return /* @__PURE__ */ (0,
|
|
2561
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.XStack, { backgroundColor: "rgba(0,0,0,0.15)", paddingHorizontal: "$2", paddingVertical: "$1", borderRadius: "$3", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$6", fontWeight: "800", color: "white", fontFamily: "$mono", children: value }) });
|
|
2383
2562
|
}
|
|
2384
2563
|
function CountdownBanner({ endTime, minutes, label = "Offer ends in", onExpire, variant = "banner" }) {
|
|
2385
2564
|
const { display, expired } = useCountdown2(endTime, minutes, onExpire);
|
|
2386
2565
|
if (expired) return null;
|
|
2387
2566
|
const parts = display.split(":");
|
|
2388
2567
|
if (variant === "badge") {
|
|
2389
|
-
return /* @__PURE__ */ (0,
|
|
2390
|
-
/* @__PURE__ */ (0,
|
|
2391
|
-
/* @__PURE__ */ (0,
|
|
2568
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_tamagui50.XStack, { backgroundColor: "$red9", paddingHorizontal: "$2.5", paddingVertical: "$1", borderRadius: "$10", gap: "$1.5", alignItems: "center", children: [
|
|
2569
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$1", fontWeight: "600", color: "white", children: label }),
|
|
2570
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$2", fontWeight: "800", color: "white", fontFamily: "$mono", children: display })
|
|
2392
2571
|
] });
|
|
2393
2572
|
}
|
|
2394
2573
|
if (variant === "compact") {
|
|
2395
|
-
return /* @__PURE__ */ (0,
|
|
2396
|
-
/* @__PURE__ */ (0,
|
|
2397
|
-
/* @__PURE__ */ (0,
|
|
2574
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_tamagui50.XStack, { backgroundColor: "$red3", paddingHorizontal: "$3", paddingVertical: "$2", borderRadius: "$4", gap: "$2", alignItems: "center", alignSelf: "center", children: [
|
|
2575
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$3", fontWeight: "600", color: "$red9", children: label }),
|
|
2576
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$5", fontWeight: "800", color: "$red9", fontFamily: "$mono", children: display })
|
|
2398
2577
|
] });
|
|
2399
2578
|
}
|
|
2400
|
-
return /* @__PURE__ */ (0,
|
|
2401
|
-
/* @__PURE__ */ (0,
|
|
2402
|
-
/* @__PURE__ */ (0,
|
|
2403
|
-
i > 0 && /* @__PURE__ */ (0,
|
|
2404
|
-
/* @__PURE__ */ (0,
|
|
2579
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_tamagui50.YStack, { backgroundColor: "$red9", paddingVertical: "$3", paddingHorizontal: "$4", gap: "$1.5", alignItems: "center", children: [
|
|
2580
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$3", fontWeight: "600", color: "white", opacity: 0.9, children: label }),
|
|
2581
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.XStack, { gap: "$1.5", alignItems: "center", children: parts.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_tamagui50.XStack, { gap: "$1.5", alignItems: "center", children: [
|
|
2582
|
+
i > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$6", fontWeight: "800", color: "white", children: ":" }),
|
|
2583
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TimeBox, { value: p })
|
|
2405
2584
|
] }, i)) })
|
|
2406
2585
|
] });
|
|
2407
2586
|
}
|
|
2408
2587
|
|
|
2409
2588
|
// src/patterns/TestimonialCard.tsx
|
|
2410
2589
|
var import_tamagui51 = require("tamagui");
|
|
2411
|
-
var
|
|
2590
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2412
2591
|
function Stars2({ count = 0 }) {
|
|
2413
2592
|
if (!count) return null;
|
|
2414
|
-
return /* @__PURE__ */ (0,
|
|
2593
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.XStack, { gap: "$0.5", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.SizableText, { size: "$3", color: i < Math.round(count) ? "$yellow9" : "$color5", children: "\u2605" }, i)) });
|
|
2415
2594
|
}
|
|
2416
2595
|
function AuthorRow({ author, role, avatar }) {
|
|
2417
|
-
return /* @__PURE__ */ (0,
|
|
2418
|
-
avatar && /* @__PURE__ */ (0,
|
|
2419
|
-
/* @__PURE__ */ (0,
|
|
2420
|
-
/* @__PURE__ */ (0,
|
|
2421
|
-
role && /* @__PURE__ */ (0,
|
|
2596
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.XStack, { gap: "$2.5", alignItems: "center", children: [
|
|
2597
|
+
avatar && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.Image, { source: { uri: avatar }, width: 36, height: 36, borderRadius: 18, objectFit: "cover" }),
|
|
2598
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.YStack, { children: [
|
|
2599
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.SizableText, { size: "$3", fontWeight: "600", children: author }),
|
|
2600
|
+
role && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.SizableText, { size: "$2", color: "$color9", children: role })
|
|
2422
2601
|
] })
|
|
2423
2602
|
] });
|
|
2424
2603
|
}
|
|
2425
2604
|
function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card" }) {
|
|
2426
2605
|
if (variant === "minimal") {
|
|
2427
|
-
return /* @__PURE__ */ (0,
|
|
2428
|
-
/* @__PURE__ */ (0,
|
|
2429
|
-
/* @__PURE__ */ (0,
|
|
2606
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.YStack, { gap: "$3", paddingVertical: "$2", children: [
|
|
2607
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Stars2, { count: rating }),
|
|
2608
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.SizableText, { size: "$4", color: "$color11", fontStyle: "italic", lineHeight: 24, children: [
|
|
2430
2609
|
'"',
|
|
2431
2610
|
quote,
|
|
2432
2611
|
'"'
|
|
2433
2612
|
] }),
|
|
2434
|
-
/* @__PURE__ */ (0,
|
|
2613
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AuthorRow, { author, role, avatar })
|
|
2435
2614
|
] });
|
|
2436
2615
|
}
|
|
2437
2616
|
if (variant === "featured") {
|
|
2438
|
-
return /* @__PURE__ */ (0,
|
|
2439
|
-
/* @__PURE__ */ (0,
|
|
2440
|
-
/* @__PURE__ */ (0,
|
|
2441
|
-
/* @__PURE__ */ (0,
|
|
2617
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.YStack, { backgroundColor: "$color3", padding: "$5", borderRadius: "$6", gap: "$4", alignItems: "center", children: [
|
|
2618
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.SizableText, { size: "$8", color: "$color9", opacity: 0.3, fontWeight: "800", children: '"' }),
|
|
2619
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Stars2, { count: rating }),
|
|
2620
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.SizableText, { size: "$5", color: "$color12", fontStyle: "italic", textAlign: "center", lineHeight: 28, children: [
|
|
2442
2621
|
'"',
|
|
2443
2622
|
quote,
|
|
2444
2623
|
'"'
|
|
2445
2624
|
] }),
|
|
2446
|
-
/* @__PURE__ */ (0,
|
|
2625
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AuthorRow, { author, role, avatar })
|
|
2447
2626
|
] });
|
|
2448
2627
|
}
|
|
2449
|
-
return /* @__PURE__ */ (0,
|
|
2628
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
2450
2629
|
import_tamagui51.YStack,
|
|
2451
2630
|
{
|
|
2452
2631
|
backgroundColor: "$color1",
|
|
@@ -2456,13 +2635,13 @@ function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card
|
|
|
2456
2635
|
borderColor: "$color4",
|
|
2457
2636
|
gap: "$3",
|
|
2458
2637
|
children: [
|
|
2459
|
-
/* @__PURE__ */ (0,
|
|
2460
|
-
/* @__PURE__ */ (0,
|
|
2638
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Stars2, { count: rating }),
|
|
2639
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.SizableText, { size: "$4", color: "$color11", fontStyle: "italic", lineHeight: 24, children: [
|
|
2461
2640
|
'"',
|
|
2462
2641
|
quote,
|
|
2463
2642
|
'"'
|
|
2464
2643
|
] }),
|
|
2465
|
-
/* @__PURE__ */ (0,
|
|
2644
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AuthorRow, { author, role, avatar })
|
|
2466
2645
|
]
|
|
2467
2646
|
}
|
|
2468
2647
|
);
|
|
@@ -2470,7 +2649,7 @@ function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card
|
|
|
2470
2649
|
|
|
2471
2650
|
// src/patterns/ConfirmDialog.tsx
|
|
2472
2651
|
var import_tamagui52 = require("tamagui");
|
|
2473
|
-
var
|
|
2652
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2474
2653
|
function ConfirmDialog({
|
|
2475
2654
|
open,
|
|
2476
2655
|
onOpenChange,
|
|
@@ -2491,8 +2670,8 @@ function ConfirmDialog({
|
|
|
2491
2670
|
onConfirm?.();
|
|
2492
2671
|
onOpenChange(false);
|
|
2493
2672
|
};
|
|
2494
|
-
return /* @__PURE__ */ (0,
|
|
2495
|
-
/* @__PURE__ */ (0,
|
|
2673
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_tamagui52.AlertDialog.Portal, { children: [
|
|
2674
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2496
2675
|
import_tamagui52.AlertDialog.Overlay,
|
|
2497
2676
|
{
|
|
2498
2677
|
opacity: 0.5,
|
|
@@ -2502,7 +2681,7 @@ function ConfirmDialog({
|
|
|
2502
2681
|
},
|
|
2503
2682
|
"overlay"
|
|
2504
2683
|
),
|
|
2505
|
-
/* @__PURE__ */ (0,
|
|
2684
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2506
2685
|
import_tamagui52.AlertDialog.Content,
|
|
2507
2686
|
{
|
|
2508
2687
|
bordered: true,
|
|
@@ -2516,11 +2695,11 @@ function ConfirmDialog({
|
|
|
2516
2695
|
scale: 1,
|
|
2517
2696
|
opacity: 1,
|
|
2518
2697
|
animation: "quick",
|
|
2519
|
-
children: /* @__PURE__ */ (0,
|
|
2520
|
-
icon && /* @__PURE__ */ (0,
|
|
2521
|
-
/* @__PURE__ */ (0,
|
|
2522
|
-
/* @__PURE__ */ (0,
|
|
2523
|
-
description && /* @__PURE__ */ (0,
|
|
2698
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_tamagui52.YStack, { gap: "$4", padding: "$4", children: [
|
|
2699
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.YStack, { alignItems: "center", children: icon }),
|
|
2700
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_tamagui52.YStack, { gap: "$2", alignItems: icon ? "center" : "flex-start", children: [
|
|
2701
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.AlertDialog.Title, { size: "$6", fontWeight: "700", children: title }),
|
|
2702
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2524
2703
|
import_tamagui52.AlertDialog.Description,
|
|
2525
2704
|
{
|
|
2526
2705
|
size: "$3",
|
|
@@ -2530,8 +2709,8 @@ function ConfirmDialog({
|
|
|
2530
2709
|
}
|
|
2531
2710
|
)
|
|
2532
2711
|
] }),
|
|
2533
|
-
/* @__PURE__ */ (0,
|
|
2534
|
-
/* @__PURE__ */ (0,
|
|
2712
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_tamagui52.XStack, { gap: "$3", justifyContent: "flex-end", children: [
|
|
2713
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2535
2714
|
import_tamagui52.Button,
|
|
2536
2715
|
{
|
|
2537
2716
|
flex: 1,
|
|
@@ -2542,10 +2721,10 @@ function ConfirmDialog({
|
|
|
2542
2721
|
onPress: handleCancel,
|
|
2543
2722
|
pressStyle: { opacity: 0.7 },
|
|
2544
2723
|
animation: "quick",
|
|
2545
|
-
children: /* @__PURE__ */ (0,
|
|
2724
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.SizableText, { fontWeight: "600", children: cancelLabel })
|
|
2546
2725
|
}
|
|
2547
2726
|
),
|
|
2548
|
-
/* @__PURE__ */ (0,
|
|
2727
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2549
2728
|
import_tamagui52.Button,
|
|
2550
2729
|
{
|
|
2551
2730
|
flex: 1,
|
|
@@ -2555,7 +2734,7 @@ function ConfirmDialog({
|
|
|
2555
2734
|
onPress: handleConfirm,
|
|
2556
2735
|
pressStyle: { backgroundColor: destructive ? "$red8" : "$color8", scale: 0.97 },
|
|
2557
2736
|
animation: "quick",
|
|
2558
|
-
children: /* @__PURE__ */ (0,
|
|
2737
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.SizableText, { fontWeight: "600", color: "white", children: confirmLabel })
|
|
2559
2738
|
}
|
|
2560
2739
|
)
|
|
2561
2740
|
] })
|
|
@@ -2569,7 +2748,7 @@ function ConfirmDialog({
|
|
|
2569
2748
|
// src/patterns/Chip.tsx
|
|
2570
2749
|
var import_react13 = require("react");
|
|
2571
2750
|
var import_tamagui53 = require("tamagui");
|
|
2572
|
-
var
|
|
2751
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2573
2752
|
var sizes2 = { sm: { h: 28, px: "$2", text: "$2" }, md: { h: 34, px: "$3", text: "$3" }, lg: { h: 42, px: "$4", text: "$4" } };
|
|
2574
2753
|
function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "md", icon, color }) {
|
|
2575
2754
|
const s = sizes2[size];
|
|
@@ -2578,7 +2757,7 @@ function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "
|
|
|
2578
2757
|
const bg = active ? color ?? "$color9" : filled ? "$color3" : "transparent";
|
|
2579
2758
|
const border = active ? color ?? "$color9" : "$color6";
|
|
2580
2759
|
const fg = active ? "$color1" : "$color11";
|
|
2581
|
-
return /* @__PURE__ */ (0,
|
|
2760
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
2582
2761
|
import_tamagui53.XStack,
|
|
2583
2762
|
{
|
|
2584
2763
|
height: s.h,
|
|
@@ -2594,10 +2773,10 @@ function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "
|
|
|
2594
2773
|
onPress,
|
|
2595
2774
|
cursor: "pointer",
|
|
2596
2775
|
children: [
|
|
2597
|
-
active && /* @__PURE__ */ (0,
|
|
2598
|
-
icon && /* @__PURE__ */ (0,
|
|
2599
|
-
/* @__PURE__ */ (0,
|
|
2600
|
-
onRemove && /* @__PURE__ */ (0,
|
|
2776
|
+
active && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_tamagui53.SizableText, { size: s.text, color: fg, children: "\u2713" }),
|
|
2777
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_tamagui53.SizableText, { color: fg, children: icon }),
|
|
2778
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_tamagui53.SizableText, { size: s.text, color: fg, fontWeight: "500", children: label }),
|
|
2779
|
+
onRemove && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
2601
2780
|
import_tamagui53.SizableText,
|
|
2602
2781
|
{
|
|
2603
2782
|
size: "$2",
|
|
@@ -2626,7 +2805,7 @@ function ChipGroup({ chips, selected = [], onSelectionChange, multiSelect = true
|
|
|
2626
2805
|
onSelectionChange(isSelected ? [] : [id]);
|
|
2627
2806
|
}
|
|
2628
2807
|
}, [selected, onSelectionChange, multiSelect]);
|
|
2629
|
-
return /* @__PURE__ */ (0,
|
|
2808
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_tamagui53.XStack, { flexWrap: "wrap", gap: "$2", children: chips.map((chip) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
2630
2809
|
Chip,
|
|
2631
2810
|
{
|
|
2632
2811
|
label: chip.label,
|
|
@@ -2644,7 +2823,7 @@ function ChipGroup({ chips, selected = [], onSelectionChange, multiSelect = true
|
|
|
2644
2823
|
var import_react14 = require("react");
|
|
2645
2824
|
var import_react_native5 = require("react-native");
|
|
2646
2825
|
var import_tamagui54 = require("tamagui");
|
|
2647
|
-
var
|
|
2826
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2648
2827
|
function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFocus, secureEntry }) {
|
|
2649
2828
|
const inputRef = (0, import_react14.useRef)(null);
|
|
2650
2829
|
const [focused, setFocused] = (0, import_react14.useState)(false);
|
|
@@ -2657,11 +2836,11 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2657
2836
|
const focusInput = (0, import_react14.useCallback)(() => {
|
|
2658
2837
|
inputRef.current?.focus();
|
|
2659
2838
|
}, []);
|
|
2660
|
-
return /* @__PURE__ */ (0,
|
|
2661
|
-
/* @__PURE__ */ (0,
|
|
2839
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_tamagui54.YStack, { position: "relative", children: [
|
|
2840
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_tamagui54.XStack, { gap: "$2", justifyContent: "center", children: Array.from({ length }, (_, i) => {
|
|
2662
2841
|
const char = digits[i]?.trim();
|
|
2663
2842
|
const isCursor = focused && value.length === i;
|
|
2664
|
-
return /* @__PURE__ */ (0,
|
|
2843
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
2665
2844
|
import_tamagui54.YStack,
|
|
2666
2845
|
{
|
|
2667
2846
|
width: 48,
|
|
@@ -2675,8 +2854,8 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2675
2854
|
animation: "quick",
|
|
2676
2855
|
pointerEvents: "none",
|
|
2677
2856
|
children: [
|
|
2678
|
-
/* @__PURE__ */ (0,
|
|
2679
|
-
isCursor && /* @__PURE__ */ (0,
|
|
2857
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_tamagui54.SizableText, { size: "$7", fontWeight: "600", color: "$color12", children: char ? secureEntry ? "\u25CF" : char : "" }),
|
|
2858
|
+
isCursor && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
2680
2859
|
import_tamagui54.YStack,
|
|
2681
2860
|
{
|
|
2682
2861
|
position: "absolute",
|
|
@@ -2692,7 +2871,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2692
2871
|
i
|
|
2693
2872
|
);
|
|
2694
2873
|
}) }),
|
|
2695
|
-
import_react_native5.Platform.OS === "web" ? /* @__PURE__ */ (0,
|
|
2874
|
+
import_react_native5.Platform.OS === "web" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
2696
2875
|
"input",
|
|
2697
2876
|
{
|
|
2698
2877
|
ref: inputRef,
|
|
@@ -2720,7 +2899,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2720
2899
|
cursor: "pointer"
|
|
2721
2900
|
}
|
|
2722
2901
|
}
|
|
2723
|
-
) : /* @__PURE__ */ (0,
|
|
2902
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
2724
2903
|
import_tamagui54.Input,
|
|
2725
2904
|
{
|
|
2726
2905
|
ref: inputRef,
|
|
@@ -2746,7 +2925,7 @@ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFoc
|
|
|
2746
2925
|
// src/patterns/PasswordInput.tsx
|
|
2747
2926
|
var import_react15 = require("react");
|
|
2748
2927
|
var import_tamagui55 = require("tamagui");
|
|
2749
|
-
var
|
|
2928
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
2750
2929
|
function getStrength(pw) {
|
|
2751
2930
|
if (!pw) return { label: "", color: "$color6", width: "0%" };
|
|
2752
2931
|
const score = [pw.length >= 8, /[A-Z]/.test(pw), /[0-9]/.test(pw), /[^A-Za-z0-9]/.test(pw)].filter(Boolean).length;
|
|
@@ -2758,9 +2937,9 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2758
2937
|
const [visible, setVisible] = (0, import_react15.useState)(false);
|
|
2759
2938
|
const toggle = (0, import_react15.useCallback)(() => setVisible((v) => !v), []);
|
|
2760
2939
|
const strength = getStrength(value);
|
|
2761
|
-
return /* @__PURE__ */ (0,
|
|
2762
|
-
label && /* @__PURE__ */ (0,
|
|
2763
|
-
/* @__PURE__ */ (0,
|
|
2940
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_tamagui55.YStack, { gap: "$1.5", children: [
|
|
2941
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_tamagui55.SizableText, { size: "$3", color: "$color11", fontWeight: "500", children: label }),
|
|
2942
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
|
|
2764
2943
|
import_tamagui55.XStack,
|
|
2765
2944
|
{
|
|
2766
2945
|
borderWidth: 1,
|
|
@@ -2771,7 +2950,7 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2771
2950
|
paddingRight: "$2",
|
|
2772
2951
|
focusStyle: { borderColor: "$color9" },
|
|
2773
2952
|
children: [
|
|
2774
|
-
/* @__PURE__ */ (0,
|
|
2953
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
2775
2954
|
import_tamagui55.Input,
|
|
2776
2955
|
{
|
|
2777
2956
|
flex: 1,
|
|
@@ -2785,7 +2964,7 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2785
2964
|
borderWidth: 0
|
|
2786
2965
|
}
|
|
2787
2966
|
),
|
|
2788
|
-
/* @__PURE__ */ (0,
|
|
2967
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
2789
2968
|
import_tamagui55.SizableText,
|
|
2790
2969
|
{
|
|
2791
2970
|
size: "$4",
|
|
@@ -2800,23 +2979,23 @@ function PasswordInput({ value = "", onChangeText, placeholder = "Password", lab
|
|
|
2800
2979
|
]
|
|
2801
2980
|
}
|
|
2802
2981
|
),
|
|
2803
|
-
strengthIndicator && value.length > 0 && /* @__PURE__ */ (0,
|
|
2804
|
-
/* @__PURE__ */ (0,
|
|
2805
|
-
/* @__PURE__ */ (0,
|
|
2982
|
+
strengthIndicator && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_tamagui55.YStack, { gap: "$1", children: [
|
|
2983
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_tamagui55.YStack, { height: 3, backgroundColor: "$color4", borderRadius: 2, overflow: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_tamagui55.YStack, { height: 3, width: strength.width, backgroundColor: strength.color, borderRadius: 2, animation: "quick" }) }),
|
|
2984
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_tamagui55.SizableText, { size: "$1", color: strength.color, children: strength.label })
|
|
2806
2985
|
] }),
|
|
2807
|
-
error && /* @__PURE__ */ (0,
|
|
2986
|
+
error && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_tamagui55.SizableText, { size: "$2", color: "$red9", children: error })
|
|
2808
2987
|
] });
|
|
2809
2988
|
}
|
|
2810
2989
|
|
|
2811
2990
|
// src/patterns/AvatarGroup.tsx
|
|
2812
2991
|
var import_tamagui56 = require("tamagui");
|
|
2813
|
-
var
|
|
2992
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
2814
2993
|
function getInitials(name) {
|
|
2815
2994
|
if (!name) return "?";
|
|
2816
2995
|
return name.split(" ").map((p) => p[0]).join("").toUpperCase().slice(0, 2);
|
|
2817
2996
|
}
|
|
2818
2997
|
function AvatarItem({ uri, name, color, size }) {
|
|
2819
|
-
return /* @__PURE__ */ (0,
|
|
2998
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
2820
2999
|
import_tamagui56.Circle,
|
|
2821
3000
|
{
|
|
2822
3001
|
size,
|
|
@@ -2826,16 +3005,16 @@ function AvatarItem({ uri, name, color, size }) {
|
|
|
2826
3005
|
overflow: "hidden",
|
|
2827
3006
|
alignItems: "center",
|
|
2828
3007
|
justifyContent: "center",
|
|
2829
|
-
children: uri ? /* @__PURE__ */ (0,
|
|
3008
|
+
children: uri ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tamagui56.Image, { source: { uri }, width: size, height: size, objectFit: "cover" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tamagui56.SizableText, { size: "$2", fontWeight: "600", color: color ? "$color1" : "$color11", children: getInitials(name) })
|
|
2830
3009
|
}
|
|
2831
3010
|
);
|
|
2832
3011
|
}
|
|
2833
3012
|
function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
2834
3013
|
const visible = avatars.slice(0, max);
|
|
2835
3014
|
const remaining = avatars.length - max;
|
|
2836
|
-
return /* @__PURE__ */ (0,
|
|
2837
|
-
visible.map((avatar, i) => /* @__PURE__ */ (0,
|
|
2838
|
-
remaining > 0 && /* @__PURE__ */ (0,
|
|
3015
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_tamagui56.XStack, { alignItems: "center", children: [
|
|
3016
|
+
visible.map((avatar, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tamagui56.XStack, { marginLeft: i === 0 ? 0 : -overlap, zIndex: visible.length - i, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AvatarItem, { ...avatar, size }) }, i)),
|
|
3017
|
+
remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tamagui56.XStack, { marginLeft: -overlap, zIndex: 0, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
2839
3018
|
import_tamagui56.Circle,
|
|
2840
3019
|
{
|
|
2841
3020
|
size,
|
|
@@ -2844,7 +3023,7 @@ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
|
2844
3023
|
borderColor: "$background",
|
|
2845
3024
|
alignItems: "center",
|
|
2846
3025
|
justifyContent: "center",
|
|
2847
|
-
children: /* @__PURE__ */ (0,
|
|
3026
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_tamagui56.SizableText, { size: "$2", fontWeight: "600", color: "$color11", children: [
|
|
2848
3027
|
"+",
|
|
2849
3028
|
remaining
|
|
2850
3029
|
] })
|
|
@@ -2856,7 +3035,7 @@ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
|
|
|
2856
3035
|
// src/patterns/SwipeCards.tsx
|
|
2857
3036
|
var import_react16 = require("react");
|
|
2858
3037
|
var import_tamagui57 = require("tamagui");
|
|
2859
|
-
var
|
|
3038
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
2860
3039
|
var STACK_SIZE = 3;
|
|
2861
3040
|
var CARD_OFFSETS = [
|
|
2862
3041
|
{ scale: 1, y: 0, opacity: 1 },
|
|
@@ -2893,16 +3072,16 @@ function SwipeCards({
|
|
|
2893
3072
|
return () => clearTimeout(timer);
|
|
2894
3073
|
}, [isEmpty, index, items, onEmpty, onSwipeLeft, onSwipeRight]);
|
|
2895
3074
|
if (isEmpty) {
|
|
2896
|
-
return /* @__PURE__ */ (0,
|
|
3075
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.YStack, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$3", padding: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$5", color: "$color8", children: emptyMessage }) });
|
|
2897
3076
|
}
|
|
2898
|
-
return /* @__PURE__ */ (0,
|
|
2899
|
-
/* @__PURE__ */ (0,
|
|
3077
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_tamagui57.YStack, { flex: 1, gap: "$4", children: [
|
|
3078
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.YStack, { flex: 1, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.YStack, { width: "100%", maxWidth: 340, aspectRatio: 3 / 4, position: "relative", children: remaining.slice(0, STACK_SIZE).reverse().map((item, reverseIdx) => {
|
|
2900
3079
|
const stackIdx = Math.min(remaining.length, STACK_SIZE) - 1 - reverseIdx;
|
|
2901
3080
|
const isTop = stackIdx === 0;
|
|
2902
3081
|
const offset = CARD_OFFSETS[stackIdx] ?? CARD_OFFSETS[2];
|
|
2903
3082
|
const exitX = exitDir === "left" ? -400 : exitDir === "right" ? 400 : 0;
|
|
2904
3083
|
const exitRotate = exitDir === "left" ? "-15deg" : exitDir === "right" ? "15deg" : "0deg";
|
|
2905
|
-
return /* @__PURE__ */ (0,
|
|
3084
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
|
|
2906
3085
|
import_tamagui57.YStack,
|
|
2907
3086
|
{
|
|
2908
3087
|
position: "absolute",
|
|
@@ -2914,7 +3093,7 @@ function SwipeCards({
|
|
|
2914
3093
|
borderRadius: "$5",
|
|
2915
3094
|
overflow: "hidden",
|
|
2916
3095
|
backgroundColor: "$background",
|
|
2917
|
-
|
|
3096
|
+
elevation: isTop ? 4 : 1,
|
|
2918
3097
|
shadowColor: "$shadowColor",
|
|
2919
3098
|
shadowRadius: isTop ? 16 : 4,
|
|
2920
3099
|
scale: isTop && exitDir ? 1 : offset.scale,
|
|
@@ -2924,7 +3103,7 @@ function SwipeCards({
|
|
|
2924
3103
|
rotate: isTop ? exitRotate : "0deg",
|
|
2925
3104
|
children: [
|
|
2926
3105
|
renderCard(item),
|
|
2927
|
-
isTop && exitDir === "left" && /* @__PURE__ */ (0,
|
|
3106
|
+
isTop && exitDir === "left" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
2928
3107
|
import_tamagui57.YStack,
|
|
2929
3108
|
{
|
|
2930
3109
|
position: "absolute",
|
|
@@ -2935,10 +3114,10 @@ function SwipeCards({
|
|
|
2935
3114
|
borderRadius: "$3",
|
|
2936
3115
|
padding: "$2",
|
|
2937
3116
|
rotate: "15deg",
|
|
2938
|
-
children: /* @__PURE__ */ (0,
|
|
3117
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$7", fontWeight: "800", color: "$red10", children: leftLabel.toUpperCase() })
|
|
2939
3118
|
}
|
|
2940
3119
|
),
|
|
2941
|
-
isTop && exitDir === "right" && /* @__PURE__ */ (0,
|
|
3120
|
+
isTop && exitDir === "right" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
2942
3121
|
import_tamagui57.YStack,
|
|
2943
3122
|
{
|
|
2944
3123
|
position: "absolute",
|
|
@@ -2949,7 +3128,7 @@ function SwipeCards({
|
|
|
2949
3128
|
borderRadius: "$3",
|
|
2950
3129
|
padding: "$2",
|
|
2951
3130
|
rotate: "-15deg",
|
|
2952
|
-
children: /* @__PURE__ */ (0,
|
|
3131
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$7", fontWeight: "800", color: "$green10", children: rightLabel.toUpperCase() })
|
|
2953
3132
|
}
|
|
2954
3133
|
)
|
|
2955
3134
|
]
|
|
@@ -2957,8 +3136,8 @@ function SwipeCards({
|
|
|
2957
3136
|
item.id
|
|
2958
3137
|
);
|
|
2959
3138
|
}) }) }),
|
|
2960
|
-
/* @__PURE__ */ (0,
|
|
2961
|
-
/* @__PURE__ */ (0,
|
|
3139
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_tamagui57.XStack, { justifyContent: "center", gap: "$6", paddingBottom: "$4", children: [
|
|
3140
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
2962
3141
|
import_tamagui57.Circle,
|
|
2963
3142
|
{
|
|
2964
3143
|
size: 60,
|
|
@@ -2970,10 +3149,10 @@ function SwipeCards({
|
|
|
2970
3149
|
onPress: () => handleSwipe("left"),
|
|
2971
3150
|
alignItems: "center",
|
|
2972
3151
|
justifyContent: "center",
|
|
2973
|
-
children: /* @__PURE__ */ (0,
|
|
3152
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$6", color: "$red10", fontWeight: "700", children: "\u2715" })
|
|
2974
3153
|
}
|
|
2975
3154
|
),
|
|
2976
|
-
/* @__PURE__ */ (0,
|
|
3155
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
2977
3156
|
import_tamagui57.Circle,
|
|
2978
3157
|
{
|
|
2979
3158
|
size: 60,
|
|
@@ -2985,7 +3164,7 @@ function SwipeCards({
|
|
|
2985
3164
|
onPress: () => handleSwipe("right"),
|
|
2986
3165
|
alignItems: "center",
|
|
2987
3166
|
justifyContent: "center",
|
|
2988
|
-
children: /* @__PURE__ */ (0,
|
|
3167
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$6", color: "$green10", fontWeight: "700", children: "\u2665" })
|
|
2989
3168
|
}
|
|
2990
3169
|
)
|
|
2991
3170
|
] })
|
|
@@ -2994,7 +3173,7 @@ function SwipeCards({
|
|
|
2994
3173
|
|
|
2995
3174
|
// src/patterns/GlassCard.tsx
|
|
2996
3175
|
var import_tamagui58 = require("tamagui");
|
|
2997
|
-
var
|
|
3176
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
2998
3177
|
var BLUR = { light: 8, medium: 16, heavy: 24 };
|
|
2999
3178
|
var TINT_BG = {
|
|
3000
3179
|
light: "rgba(255,255,255,0.15)",
|
|
@@ -3014,13 +3193,13 @@ function GlassCard({
|
|
|
3014
3193
|
elevated = false
|
|
3015
3194
|
}) {
|
|
3016
3195
|
const blur = BLUR[intensity];
|
|
3017
|
-
return /* @__PURE__ */ (0,
|
|
3196
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
|
|
3018
3197
|
GlassFrame,
|
|
3019
3198
|
{
|
|
3020
3199
|
borderRadius,
|
|
3021
3200
|
padding,
|
|
3022
3201
|
backgroundColor: TINT_BG[tint],
|
|
3023
|
-
|
|
3202
|
+
elevation: elevated ? 4 : 0,
|
|
3024
3203
|
shadowColor: elevated ? "$shadowColor" : void 0,
|
|
3025
3204
|
shadowRadius: elevated ? 20 : void 0,
|
|
3026
3205
|
shadowOpacity: elevated ? 0.3 : void 0,
|
|
@@ -3033,13 +3212,13 @@ function GlassCard({
|
|
|
3033
3212
|
// src/patterns/DataTable.tsx
|
|
3034
3213
|
var import_react17 = require("react");
|
|
3035
3214
|
var import_tamagui59 = require("tamagui");
|
|
3036
|
-
var
|
|
3215
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
3037
3216
|
var TH = (0, import_tamagui59.styled)(import_tamagui59.View, { padding: "$3", justifyContent: "center" });
|
|
3038
3217
|
var TD = (0, import_tamagui59.styled)(import_tamagui59.View, { padding: "$3", justifyContent: "center" });
|
|
3039
3218
|
function StatusBadge({ status }) {
|
|
3040
3219
|
const isActive = status.toLowerCase() === "active";
|
|
3041
|
-
return /* @__PURE__ */ (0,
|
|
3042
|
-
/* @__PURE__ */ (0,
|
|
3220
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_tamagui59.XStack, { gap: "$2", alignItems: "center", children: [
|
|
3221
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
3043
3222
|
import_tamagui59.View,
|
|
3044
3223
|
{
|
|
3045
3224
|
width: 8,
|
|
@@ -3048,13 +3227,13 @@ function StatusBadge({ status }) {
|
|
|
3048
3227
|
backgroundColor: isActive ? "$green9" : "$orange9"
|
|
3049
3228
|
}
|
|
3050
3229
|
),
|
|
3051
|
-
/* @__PURE__ */ (0,
|
|
3230
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.SizableText, { size: "$3", color: "$color11", children: status })
|
|
3052
3231
|
] });
|
|
3053
3232
|
}
|
|
3054
3233
|
function HeaderCell({ col, sort, onSort }) {
|
|
3055
3234
|
const active = sort?.key === col.key;
|
|
3056
3235
|
const indicator = active ? sort.dir === "asc" ? " \u25B2" : " \u25BC" : "";
|
|
3057
|
-
return /* @__PURE__ */ (0,
|
|
3236
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
3058
3237
|
TH,
|
|
3059
3238
|
{
|
|
3060
3239
|
width: col.width,
|
|
@@ -3063,7 +3242,7 @@ function HeaderCell({ col, sort, onSort }) {
|
|
|
3063
3242
|
cursor: col.sortable ? "pointer" : void 0,
|
|
3064
3243
|
onPress: col.sortable ? onSort : void 0,
|
|
3065
3244
|
pressStyle: col.sortable ? { opacity: 0.7 } : void 0,
|
|
3066
|
-
children: /* @__PURE__ */ (0,
|
|
3245
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
|
|
3067
3246
|
import_tamagui59.SizableText,
|
|
3068
3247
|
{
|
|
3069
3248
|
size: "$2",
|
|
@@ -3082,7 +3261,7 @@ function HeaderCell({ col, sort, onSort }) {
|
|
|
3082
3261
|
);
|
|
3083
3262
|
}
|
|
3084
3263
|
function TableRow({ row, columns, onPress, odd }) {
|
|
3085
|
-
return /* @__PURE__ */ (0,
|
|
3264
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
3086
3265
|
import_tamagui59.XStack,
|
|
3087
3266
|
{
|
|
3088
3267
|
backgroundColor: odd ? "$color2" : "transparent",
|
|
@@ -3093,12 +3272,12 @@ function TableRow({ row, columns, onPress, odd }) {
|
|
|
3093
3272
|
onPress: onPress ? () => onPress(row) : void 0,
|
|
3094
3273
|
pressStyle: onPress ? { opacity: 0.85 } : void 0,
|
|
3095
3274
|
animation: "quick",
|
|
3096
|
-
children: columns.map((col) => /* @__PURE__ */ (0,
|
|
3275
|
+
children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TD, { width: col.width, flex: col.width ? void 0 : 1, children: col.render ? col.render(row[col.key], row) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.SizableText, { size: "$3", color: "$color11", children: String(row[col.key] ?? "") }) }, col.key))
|
|
3097
3276
|
}
|
|
3098
3277
|
);
|
|
3099
3278
|
}
|
|
3100
3279
|
function CardRow({ row, columns, onPress }) {
|
|
3101
|
-
return /* @__PURE__ */ (0,
|
|
3280
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
3102
3281
|
import_tamagui59.YStack,
|
|
3103
3282
|
{
|
|
3104
3283
|
backgroundColor: "$color1",
|
|
@@ -3110,11 +3289,11 @@ function CardRow({ row, columns, onPress }) {
|
|
|
3110
3289
|
onPress: onPress ? () => onPress(row) : void 0,
|
|
3111
3290
|
pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
|
|
3112
3291
|
animation: "quick",
|
|
3113
|
-
children: columns.map((col, i) => /* @__PURE__ */ (0,
|
|
3114
|
-
i > 0 && /* @__PURE__ */ (0,
|
|
3115
|
-
/* @__PURE__ */ (0,
|
|
3116
|
-
/* @__PURE__ */ (0,
|
|
3117
|
-
col.render ? col.render(row[col.key], row) : /* @__PURE__ */ (0,
|
|
3292
|
+
children: columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_tamagui59.YStack, { children: [
|
|
3293
|
+
i > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.Separator, { marginVertical: "$1.5", borderColor: "$color4" }),
|
|
3294
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_tamagui59.XStack, { justifyContent: "space-between", alignItems: "center", children: [
|
|
3295
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.SizableText, { size: "$2", color: "$color9", fontWeight: "600", children: col.header }),
|
|
3296
|
+
col.render ? col.render(row[col.key], row) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.SizableText, { size: "$3", color: "$color11", children: String(row[col.key] ?? "") })
|
|
3118
3297
|
] })
|
|
3119
3298
|
] }, col.key))
|
|
3120
3299
|
}
|
|
@@ -3134,21 +3313,21 @@ function DataTable({ columns, data, onRowPress, emptyMessage = "No data" }) {
|
|
|
3134
3313
|
}, [data, sort]);
|
|
3135
3314
|
const toggleSort = (key) => setSort((s) => s?.key === key ? { key, dir: s.dir === "asc" ? "desc" : "asc" } : { key, dir: "asc" });
|
|
3136
3315
|
if (!data.length) {
|
|
3137
|
-
return /* @__PURE__ */ (0,
|
|
3316
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.YStack, { padding: "$6", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.SizableText, { size: "$4", color: "$color9", children: emptyMessage }) });
|
|
3138
3317
|
}
|
|
3139
3318
|
if (isSmall) {
|
|
3140
|
-
return /* @__PURE__ */ (0,
|
|
3319
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.YStack, { gap: "$3", children: sorted.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(CardRow, { row, columns, onPress: onRowPress }, i)) });
|
|
3141
3320
|
}
|
|
3142
|
-
return /* @__PURE__ */ (0,
|
|
3143
|
-
/* @__PURE__ */ (0,
|
|
3144
|
-
sorted.map((row, i) => /* @__PURE__ */ (0,
|
|
3321
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_tamagui59.YStack, { borderWidth: 1, borderColor: "$color4", borderRadius: "$4", overflow: "hidden", children: [
|
|
3322
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.XStack, { backgroundColor: "$color1", borderBottomWidth: 1, borderColor: "$color4", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(HeaderCell, { col, sort, onSort: () => toggleSort(col.key) }, col.key)) }),
|
|
3323
|
+
sorted.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TableRow, { row, columns, onPress: onRowPress, odd: i % 2 === 1 }, i))
|
|
3145
3324
|
] });
|
|
3146
3325
|
}
|
|
3147
3326
|
|
|
3148
3327
|
// src/patterns/DatePicker.tsx
|
|
3149
3328
|
var import_react18 = require("react");
|
|
3150
3329
|
var import_tamagui60 = require("tamagui");
|
|
3151
|
-
var
|
|
3330
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
3152
3331
|
var MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
|
3153
3332
|
var DAY_LABELS_SUN = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
3154
3333
|
var DAY_LABELS_MON = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
|
|
@@ -3173,7 +3352,7 @@ function buildGrid(year, month, startDay) {
|
|
|
3173
3352
|
return cells;
|
|
3174
3353
|
}
|
|
3175
3354
|
function NavButton({ label, onPress }) {
|
|
3176
|
-
return /* @__PURE__ */ (0,
|
|
3355
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
3177
3356
|
import_tamagui60.XStack,
|
|
3178
3357
|
{
|
|
3179
3358
|
width: 36,
|
|
@@ -3186,7 +3365,7 @@ function NavButton({ label, onPress }) {
|
|
|
3186
3365
|
animation: "quick",
|
|
3187
3366
|
onPress,
|
|
3188
3367
|
cursor: "pointer",
|
|
3189
|
-
children: /* @__PURE__ */ (0,
|
|
3368
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_tamagui60.SizableText, { size: "$5", color: "$color11", fontWeight: "600", children: label })
|
|
3190
3369
|
}
|
|
3191
3370
|
);
|
|
3192
3371
|
}
|
|
@@ -3215,23 +3394,23 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3215
3394
|
if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
|
|
3216
3395
|
return false;
|
|
3217
3396
|
}, [minDate, maxDate]);
|
|
3218
|
-
return /* @__PURE__ */ (0,
|
|
3219
|
-
/* @__PURE__ */ (0,
|
|
3220
|
-
/* @__PURE__ */ (0,
|
|
3221
|
-
/* @__PURE__ */ (0,
|
|
3397
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_tamagui60.YStack, { backgroundColor: "$color2", borderRadius: "$4", padding: "$3", gap: "$2", animation: "quick", children: [
|
|
3398
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_tamagui60.XStack, { alignItems: "center", justifyContent: "space-between", children: [
|
|
3399
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(NavButton, { label: "\u2039", onPress: () => navigate(-1) }),
|
|
3400
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_tamagui60.SizableText, { size: "$4", fontWeight: "700", color: "$color12", children: [
|
|
3222
3401
|
MONTH_NAMES[viewMonth],
|
|
3223
3402
|
" ",
|
|
3224
3403
|
viewYear
|
|
3225
3404
|
] }),
|
|
3226
|
-
/* @__PURE__ */ (0,
|
|
3405
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(NavButton, { label: "\u203A", onPress: () => navigate(1) })
|
|
3227
3406
|
] }),
|
|
3228
|
-
/* @__PURE__ */ (0,
|
|
3229
|
-
Array.from({ length: Math.ceil(grid.length / 7) }, (_, row) => /* @__PURE__ */ (0,
|
|
3407
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_tamagui60.XStack, { children: headers.map((h) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_tamagui60.SizableText, { size: "$2", color: "$color8", fontWeight: "600", textAlign: "center", flex: 1, children: h }, h)) }),
|
|
3408
|
+
Array.from({ length: Math.ceil(grid.length / 7) }, (_, row) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_tamagui60.XStack, { children: grid.slice(row * 7, row * 7 + 7).map((cell, i) => {
|
|
3230
3409
|
const date = new Date(cell.year, cell.month, cell.day);
|
|
3231
3410
|
const selected = sameDay(value, date);
|
|
3232
3411
|
const isToday = sameDay(today, date);
|
|
3233
3412
|
const disabled = cell.outside || isDisabled(date);
|
|
3234
|
-
return /* @__PURE__ */ (0,
|
|
3413
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_tamagui60.YStack, { flex: 1, alignItems: "center", paddingVertical: "$0.5", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
3235
3414
|
import_tamagui60.XStack,
|
|
3236
3415
|
{
|
|
3237
3416
|
width: 40,
|
|
@@ -3247,7 +3426,7 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3247
3426
|
opacity: disabled ? 0.35 : 1,
|
|
3248
3427
|
cursor: disabled ? "default" : "pointer",
|
|
3249
3428
|
onPress: disabled ? void 0 : () => onDateChange?.(date),
|
|
3250
|
-
children: /* @__PURE__ */ (0,
|
|
3429
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
3251
3430
|
import_tamagui60.SizableText,
|
|
3252
3431
|
{
|
|
3253
3432
|
size: "$3",
|
|
@@ -3264,7 +3443,7 @@ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
|
|
|
3264
3443
|
|
|
3265
3444
|
// src/patterns/EventCard.tsx
|
|
3266
3445
|
var import_tamagui61 = require("tamagui");
|
|
3267
|
-
var
|
|
3446
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
3268
3447
|
var THEME_MAP = {
|
|
3269
3448
|
purple: "purple",
|
|
3270
3449
|
green: "green",
|
|
@@ -3275,8 +3454,8 @@ var THEME_MAP = {
|
|
|
3275
3454
|
};
|
|
3276
3455
|
function ParticipantDots({ count, max }) {
|
|
3277
3456
|
const dots = Math.min(count, 5);
|
|
3278
|
-
return /* @__PURE__ */ (0,
|
|
3279
|
-
/* @__PURE__ */ (0,
|
|
3457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.XStack, { alignItems: "center", gap: "$1.5", children: [
|
|
3458
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.XStack, { children: Array.from({ length: dots }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
3280
3459
|
import_tamagui61.YStack,
|
|
3281
3460
|
{
|
|
3282
3461
|
width: 22,
|
|
@@ -3288,18 +3467,18 @@ function ParticipantDots({ count, max }) {
|
|
|
3288
3467
|
marginLeft: i > 0 ? -8 : 0,
|
|
3289
3468
|
alignItems: "center",
|
|
3290
3469
|
justifyContent: "center",
|
|
3291
|
-
children: /* @__PURE__ */ (0,
|
|
3470
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$1", color: "$color1", fontWeight: "700", children: String.fromCharCode(65 + i) })
|
|
3292
3471
|
},
|
|
3293
3472
|
i
|
|
3294
3473
|
)) }),
|
|
3295
|
-
/* @__PURE__ */ (0,
|
|
3474
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.SizableText, { size: "$2", color: "$color11", fontWeight: "500", children: [
|
|
3296
3475
|
count,
|
|
3297
3476
|
max ? `/${max}` : ""
|
|
3298
3477
|
] })
|
|
3299
3478
|
] });
|
|
3300
3479
|
}
|
|
3301
3480
|
function CardInner({ title, subtitle, time, location, label, participants, maxParticipants, onPress, actions }) {
|
|
3302
|
-
return /* @__PURE__ */ (0,
|
|
3481
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
|
|
3303
3482
|
import_tamagui61.YStack,
|
|
3304
3483
|
{
|
|
3305
3484
|
backgroundColor: "$color4",
|
|
@@ -3313,22 +3492,22 @@ function CardInner({ title, subtitle, time, location, label, participants, maxPa
|
|
|
3313
3492
|
pressStyle: onPress ? { scale: 0.97, opacity: 0.9 } : void 0,
|
|
3314
3493
|
cursor: onPress ? "pointer" : void 0,
|
|
3315
3494
|
children: [
|
|
3316
|
-
/* @__PURE__ */ (0,
|
|
3317
|
-
/* @__PURE__ */ (0,
|
|
3318
|
-
/* @__PURE__ */ (0,
|
|
3319
|
-
subtitle && /* @__PURE__ */ (0,
|
|
3495
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.XStack, { justifyContent: "space-between", alignItems: "flex-start", children: [
|
|
3496
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.YStack, { flex: 1, gap: "$1", children: [
|
|
3497
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$6", fontWeight: "700", color: "$color12", children: title }),
|
|
3498
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$3", color: "$color11", opacity: 0.8, children: subtitle })
|
|
3320
3499
|
] }),
|
|
3321
|
-
time && /* @__PURE__ */ (0,
|
|
3500
|
+
time && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.YStack, { backgroundColor: "$color6", paddingHorizontal: "$2.5", paddingVertical: "$1.5", borderRadius: "$3", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$2", fontWeight: "600", color: "$color12", children: time }) })
|
|
3322
3501
|
] }),
|
|
3323
|
-
/* @__PURE__ */ (0,
|
|
3324
|
-
location && /* @__PURE__ */ (0,
|
|
3325
|
-
/* @__PURE__ */ (0,
|
|
3326
|
-
/* @__PURE__ */ (0,
|
|
3502
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.XStack, { gap: "$4", alignItems: "center", flexWrap: "wrap", children: [
|
|
3503
|
+
location && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.XStack, { gap: "$1.5", alignItems: "center", children: [
|
|
3504
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$3", children: "\u{1F4CD}" }),
|
|
3505
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$3", color: "$color11", children: location })
|
|
3327
3506
|
] }),
|
|
3328
|
-
participants !== void 0 && /* @__PURE__ */ (0,
|
|
3507
|
+
participants !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ParticipantDots, { count: participants, max: maxParticipants })
|
|
3329
3508
|
] }),
|
|
3330
|
-
(label || actions) && /* @__PURE__ */ (0,
|
|
3331
|
-
label ? /* @__PURE__ */ (0,
|
|
3509
|
+
(label || actions) && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.XStack, { justifyContent: "space-between", alignItems: "center", children: [
|
|
3510
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.XStack, { backgroundColor: "$color6", paddingHorizontal: "$2.5", paddingVertical: "$1", borderRadius: "$10", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$2", fontWeight: "600", color: "$color11", children: label }) }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.YStack, {}),
|
|
3332
3511
|
actions
|
|
3333
3512
|
] })
|
|
3334
3513
|
]
|
|
@@ -3336,27 +3515,27 @@ function CardInner({ title, subtitle, time, location, label, participants, maxPa
|
|
|
3336
3515
|
);
|
|
3337
3516
|
}
|
|
3338
3517
|
function EventCard({ theme = "purple", ...props }) {
|
|
3339
|
-
return /* @__PURE__ */ (0,
|
|
3518
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.Theme, { name: THEME_MAP[theme], children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CardInner, { ...props }) });
|
|
3340
3519
|
}
|
|
3341
3520
|
|
|
3342
3521
|
// src/patterns/UserPreferences.tsx
|
|
3343
3522
|
var import_tamagui62 = require("tamagui");
|
|
3344
|
-
var
|
|
3523
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
3345
3524
|
function ItemLabel({ title, description, color }) {
|
|
3346
|
-
return /* @__PURE__ */ (0,
|
|
3347
|
-
/* @__PURE__ */ (0,
|
|
3348
|
-
description && /* @__PURE__ */ (0,
|
|
3525
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.YStack, { flex: 1, gap: "$1", children: [
|
|
3526
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$4", fontWeight: "500", color: color ?? "$color12", children: title }),
|
|
3527
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$2", color: "$color9", children: description })
|
|
3349
3528
|
] });
|
|
3350
3529
|
}
|
|
3351
3530
|
function ToggleRow({ item }) {
|
|
3352
|
-
return /* @__PURE__ */ (0,
|
|
3353
|
-
/* @__PURE__ */ (0,
|
|
3354
|
-
/* @__PURE__ */ (0,
|
|
3531
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.XStack, { alignItems: "center", gap: "$3", paddingVertical: "$3", paddingHorizontal: "$4", children: [
|
|
3532
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ItemLabel, { title: item.title, description: item.description }),
|
|
3533
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.Switch, { size: "$3", checked: item.value, onCheckedChange: item.onValueChange, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.Switch.Thumb, { animation: "quick" }) })
|
|
3355
3534
|
] });
|
|
3356
3535
|
}
|
|
3357
3536
|
function SelectRow({ item }) {
|
|
3358
3537
|
const current = item.options.find((o) => o.value === item.value);
|
|
3359
|
-
return /* @__PURE__ */ (0,
|
|
3538
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
3360
3539
|
import_tamagui62.XStack,
|
|
3361
3540
|
{
|
|
3362
3541
|
alignItems: "center",
|
|
@@ -3372,9 +3551,9 @@ function SelectRow({ item }) {
|
|
|
3372
3551
|
if (next) item.onValueChange(next.value);
|
|
3373
3552
|
},
|
|
3374
3553
|
children: [
|
|
3375
|
-
/* @__PURE__ */ (0,
|
|
3376
|
-
/* @__PURE__ */ (0,
|
|
3377
|
-
/* @__PURE__ */ (0,
|
|
3554
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ItemLabel, { title: item.title, description: item.description }),
|
|
3555
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$3", color: "$color9", fontWeight: "500", children: current?.label ?? item.value }),
|
|
3556
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$4", color: "$color8", children: "\u203A" })
|
|
3378
3557
|
]
|
|
3379
3558
|
}
|
|
3380
3559
|
);
|
|
@@ -3382,12 +3561,12 @@ function SelectRow({ item }) {
|
|
|
3382
3561
|
function SliderRow({ item }) {
|
|
3383
3562
|
const min = item.min ?? 0;
|
|
3384
3563
|
const max = item.max ?? 100;
|
|
3385
|
-
return /* @__PURE__ */ (0,
|
|
3386
|
-
/* @__PURE__ */ (0,
|
|
3387
|
-
/* @__PURE__ */ (0,
|
|
3388
|
-
/* @__PURE__ */ (0,
|
|
3564
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.YStack, { gap: "$2", paddingVertical: "$3", paddingHorizontal: "$4", children: [
|
|
3565
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.XStack, { justifyContent: "space-between", alignItems: "center", children: [
|
|
3566
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ItemLabel, { title: item.title, description: item.description }),
|
|
3567
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$3", fontWeight: "600", color: "$color11", children: item.value })
|
|
3389
3568
|
] }),
|
|
3390
|
-
/* @__PURE__ */ (0,
|
|
3569
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
3391
3570
|
import_tamagui62.Slider,
|
|
3392
3571
|
{
|
|
3393
3572
|
value: [item.value],
|
|
@@ -3398,15 +3577,15 @@ function SliderRow({ item }) {
|
|
|
3398
3577
|
if (v !== void 0) item.onValueChange(v);
|
|
3399
3578
|
},
|
|
3400
3579
|
children: [
|
|
3401
|
-
/* @__PURE__ */ (0,
|
|
3402
|
-
/* @__PURE__ */ (0,
|
|
3580
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.Slider.Track, { backgroundColor: "$color4", height: 4, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.Slider.TrackActive, { backgroundColor: "$color9" }) }),
|
|
3581
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.Slider.Thumb, { index: 0, size: "$1.5", backgroundColor: "$color9", borderWidth: 0, circular: true })
|
|
3403
3582
|
]
|
|
3404
3583
|
}
|
|
3405
3584
|
)
|
|
3406
3585
|
] });
|
|
3407
3586
|
}
|
|
3408
3587
|
function ActionRow({ item }) {
|
|
3409
|
-
return /* @__PURE__ */ (0,
|
|
3588
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
3410
3589
|
import_tamagui62.XStack,
|
|
3411
3590
|
{
|
|
3412
3591
|
alignItems: "center",
|
|
@@ -3418,7 +3597,7 @@ function ActionRow({ item }) {
|
|
|
3418
3597
|
cursor: "pointer",
|
|
3419
3598
|
onPress: item.onPress,
|
|
3420
3599
|
children: [
|
|
3421
|
-
/* @__PURE__ */ (0,
|
|
3600
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
3422
3601
|
ItemLabel,
|
|
3423
3602
|
{
|
|
3424
3603
|
title: item.title,
|
|
@@ -3426,7 +3605,7 @@ function ActionRow({ item }) {
|
|
|
3426
3605
|
color: item.destructive ? "$red10" : void 0
|
|
3427
3606
|
}
|
|
3428
3607
|
),
|
|
3429
|
-
/* @__PURE__ */ (0,
|
|
3608
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$4", color: "$color8", children: "\u203A" })
|
|
3430
3609
|
]
|
|
3431
3610
|
}
|
|
3432
3611
|
);
|
|
@@ -3434,22 +3613,22 @@ function ActionRow({ item }) {
|
|
|
3434
3613
|
function PreferenceRow({ item }) {
|
|
3435
3614
|
switch (item.type) {
|
|
3436
3615
|
case "toggle":
|
|
3437
|
-
return /* @__PURE__ */ (0,
|
|
3616
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ToggleRow, { item });
|
|
3438
3617
|
case "select":
|
|
3439
|
-
return /* @__PURE__ */ (0,
|
|
3618
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectRow, { item });
|
|
3440
3619
|
case "slider":
|
|
3441
|
-
return /* @__PURE__ */ (0,
|
|
3620
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SliderRow, { item });
|
|
3442
3621
|
case "action":
|
|
3443
|
-
return /* @__PURE__ */ (0,
|
|
3622
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ActionRow, { item });
|
|
3444
3623
|
}
|
|
3445
3624
|
}
|
|
3446
3625
|
function UserPreferences({ sections }) {
|
|
3447
|
-
return /* @__PURE__ */ (0,
|
|
3448
|
-
/* @__PURE__ */ (0,
|
|
3449
|
-
/* @__PURE__ */ (0,
|
|
3450
|
-
section.description && /* @__PURE__ */ (0,
|
|
3626
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.YStack, { gap: "$5", children: sections.map((section, si) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.YStack, { gap: "$2", children: [
|
|
3627
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.YStack, { paddingHorizontal: "$1", gap: "$0.5", children: [
|
|
3628
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$2", fontWeight: "600", color: "$color9", textTransform: "uppercase", children: section.title }),
|
|
3629
|
+
section.description && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$2", color: "$color8", children: section.description })
|
|
3451
3630
|
] }),
|
|
3452
|
-
/* @__PURE__ */ (0,
|
|
3631
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
3453
3632
|
import_tamagui62.YStack,
|
|
3454
3633
|
{
|
|
3455
3634
|
backgroundColor: "$color2",
|
|
@@ -3457,9 +3636,9 @@ function UserPreferences({ sections }) {
|
|
|
3457
3636
|
overflow: "hidden",
|
|
3458
3637
|
borderWidth: 1,
|
|
3459
3638
|
borderColor: "$color4",
|
|
3460
|
-
children: section.items.map((item, ii) => /* @__PURE__ */ (0,
|
|
3461
|
-
/* @__PURE__ */ (0,
|
|
3462
|
-
ii < section.items.length - 1 && /* @__PURE__ */ (0,
|
|
3639
|
+
children: section.items.map((item, ii) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.YStack, { children: [
|
|
3640
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PreferenceRow, { item }),
|
|
3641
|
+
ii < section.items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.Separator, { borderColor: "$color4" })
|
|
3463
3642
|
] }, item.id))
|
|
3464
3643
|
}
|
|
3465
3644
|
)
|
|
@@ -3468,7 +3647,7 @@ function UserPreferences({ sections }) {
|
|
|
3468
3647
|
|
|
3469
3648
|
// src/patterns/BlinkSelect.tsx
|
|
3470
3649
|
var import_tamagui63 = require("tamagui");
|
|
3471
|
-
var
|
|
3650
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
3472
3651
|
function BlinkSelect({
|
|
3473
3652
|
items,
|
|
3474
3653
|
value,
|
|
@@ -3479,9 +3658,9 @@ function BlinkSelect({
|
|
|
3479
3658
|
disabled,
|
|
3480
3659
|
width = "100%"
|
|
3481
3660
|
}) {
|
|
3482
|
-
return /* @__PURE__ */ (0,
|
|
3483
|
-
label ? /* @__PURE__ */ (0,
|
|
3484
|
-
/* @__PURE__ */ (0,
|
|
3661
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_tamagui63.YStack, { gap: "$1.5", width, children: [
|
|
3662
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.SizableText, { size: "$3", fontWeight: "600", children: label }) : null,
|
|
3663
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
3485
3664
|
import_tamagui63.Select,
|
|
3486
3665
|
{
|
|
3487
3666
|
value,
|
|
@@ -3489,18 +3668,18 @@ function BlinkSelect({
|
|
|
3489
3668
|
disablePreventBodyScroll: true,
|
|
3490
3669
|
...disabled ? { disabled: true } : {},
|
|
3491
3670
|
children: [
|
|
3492
|
-
/* @__PURE__ */ (0,
|
|
3493
|
-
/* @__PURE__ */ (0,
|
|
3494
|
-
/* @__PURE__ */ (0,
|
|
3495
|
-
/* @__PURE__ */ (0,
|
|
3671
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.Trigger, { width: "100%", iconAfter: () => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.SizableText, { children: "\u25BC" }), size, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.Value, { placeholder }) }),
|
|
3672
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Adapt, { when: "maxMd", platform: "touch", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_tamagui63.Sheet, { modal: true, dismissOnSnapToBottom: true, snapPointsMode: "fit", children: [
|
|
3673
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Sheet.Frame, { padding: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Adapt.Contents, {}) }),
|
|
3674
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Sheet.Overlay, {})
|
|
3496
3675
|
] }) }),
|
|
3497
|
-
/* @__PURE__ */ (0,
|
|
3498
|
-
/* @__PURE__ */ (0,
|
|
3499
|
-
/* @__PURE__ */ (0,
|
|
3500
|
-
/* @__PURE__ */ (0,
|
|
3501
|
-
/* @__PURE__ */ (0,
|
|
3676
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_tamagui63.Select.Content, { zIndex: 2e5, children: [
|
|
3677
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.ScrollUpButton, { alignItems: "center", justifyContent: "center", height: "$3", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.SizableText, { children: "\u25B2" }) }),
|
|
3678
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.Viewport, { minWidth: 200, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.Group, { children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_tamagui63.Select.Item, { index: i, value: item.value, children: [
|
|
3679
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.ItemText, { children: item.label }),
|
|
3680
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.SizableText, { children: "\u2713" }) })
|
|
3502
3681
|
] }, item.value)) }) }),
|
|
3503
|
-
/* @__PURE__ */ (0,
|
|
3682
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.ScrollDownButton, { alignItems: "center", justifyContent: "center", height: "$3", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.SizableText, { children: "\u25BC" }) })
|
|
3504
3683
|
] })
|
|
3505
3684
|
]
|
|
3506
3685
|
}
|
|
@@ -3510,7 +3689,7 @@ function BlinkSelect({
|
|
|
3510
3689
|
|
|
3511
3690
|
// src/patterns/BlinkDialog.tsx
|
|
3512
3691
|
var import_tamagui64 = require("tamagui");
|
|
3513
|
-
var
|
|
3692
|
+
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
3514
3693
|
function BlinkDialog({
|
|
3515
3694
|
open,
|
|
3516
3695
|
onOpenChange,
|
|
@@ -3524,14 +3703,14 @@ function BlinkDialog({
|
|
|
3524
3703
|
onCancel,
|
|
3525
3704
|
confirmTheme = "active"
|
|
3526
3705
|
}) {
|
|
3527
|
-
return /* @__PURE__ */ (0,
|
|
3528
|
-
trigger && /* @__PURE__ */ (0,
|
|
3529
|
-
/* @__PURE__ */ (0,
|
|
3530
|
-
/* @__PURE__ */ (0,
|
|
3531
|
-
/* @__PURE__ */ (0,
|
|
3706
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_tamagui64.Dialog, { modal: true, open, onOpenChange, children: [
|
|
3707
|
+
trigger && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Dialog.Trigger, { asChild: true, children: trigger }),
|
|
3708
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Adapt, { when: "maxMd", platform: "touch", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_tamagui64.Sheet, { modal: true, dismissOnSnapToBottom: true, snapPointsMode: "fit", children: [
|
|
3709
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Sheet.Frame, { padding: "$4", gap: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Adapt.Contents, {}) }),
|
|
3710
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Sheet.Overlay, {})
|
|
3532
3711
|
] }) }),
|
|
3533
|
-
/* @__PURE__ */ (0,
|
|
3534
|
-
/* @__PURE__ */ (0,
|
|
3712
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_tamagui64.Dialog.Portal, { children: [
|
|
3713
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
3535
3714
|
import_tamagui64.Dialog.Overlay,
|
|
3536
3715
|
{
|
|
3537
3716
|
animation: "quick",
|
|
@@ -3541,7 +3720,7 @@ function BlinkDialog({
|
|
|
3541
3720
|
},
|
|
3542
3721
|
"overlay"
|
|
3543
3722
|
),
|
|
3544
|
-
/* @__PURE__ */ (0,
|
|
3723
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
|
|
3545
3724
|
import_tamagui64.Dialog.Content,
|
|
3546
3725
|
{
|
|
3547
3726
|
bordered: true,
|
|
@@ -3552,12 +3731,12 @@ function BlinkDialog({
|
|
|
3552
3731
|
exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
|
|
3553
3732
|
gap: "$4",
|
|
3554
3733
|
children: [
|
|
3555
|
-
title && /* @__PURE__ */ (0,
|
|
3556
|
-
description && /* @__PURE__ */ (0,
|
|
3734
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Dialog.Title, { children: title }),
|
|
3735
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Dialog.Description, { size: "$3", color: "$color10", children: description }),
|
|
3557
3736
|
children,
|
|
3558
|
-
(onConfirm || onCancel) && /* @__PURE__ */ (0,
|
|
3559
|
-
onCancel && /* @__PURE__ */ (0,
|
|
3560
|
-
onConfirm && /* @__PURE__ */ (0,
|
|
3737
|
+
(onConfirm || onCancel) && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_tamagui64.XStack, { justifyContent: "flex-end", gap: "$3", children: [
|
|
3738
|
+
onCancel && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Dialog.Close, { displayWhenAdapted: true, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Button, { variant: "outlined", onPress: onCancel, children: cancelLabel }) }),
|
|
3739
|
+
onConfirm && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Dialog.Close, { displayWhenAdapted: true, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Button, { theme: confirmTheme, onPress: onConfirm, children: confirmLabel }) })
|
|
3561
3740
|
] })
|
|
3562
3741
|
]
|
|
3563
3742
|
},
|
|
@@ -3569,7 +3748,7 @@ function BlinkDialog({
|
|
|
3569
3748
|
|
|
3570
3749
|
// src/patterns/BlinkPopover.tsx
|
|
3571
3750
|
var import_tamagui65 = require("tamagui");
|
|
3572
|
-
var
|
|
3751
|
+
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
3573
3752
|
function BlinkPopover({
|
|
3574
3753
|
trigger,
|
|
3575
3754
|
children,
|
|
@@ -3577,13 +3756,13 @@ function BlinkPopover({
|
|
|
3577
3756
|
allowFlip = true,
|
|
3578
3757
|
size = "$5"
|
|
3579
3758
|
}) {
|
|
3580
|
-
return /* @__PURE__ */ (0,
|
|
3581
|
-
/* @__PURE__ */ (0,
|
|
3582
|
-
/* @__PURE__ */ (0,
|
|
3583
|
-
/* @__PURE__ */ (0,
|
|
3584
|
-
/* @__PURE__ */ (0,
|
|
3759
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_tamagui65.Popover, { size, allowFlip, placement, children: [
|
|
3760
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Popover.Trigger, { asChild: true, children: trigger }),
|
|
3761
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Adapt, { when: "maxMd", platform: "touch", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_tamagui65.Popover.Sheet, { modal: true, dismissOnSnapToBottom: true, snapPointsMode: "fit", children: [
|
|
3762
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Popover.Sheet.Frame, { padding: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Adapt.Contents, {}) }),
|
|
3763
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Popover.Sheet.Overlay, {})
|
|
3585
3764
|
] }) }),
|
|
3586
|
-
/* @__PURE__ */ (0,
|
|
3765
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
3587
3766
|
import_tamagui65.Popover.Content,
|
|
3588
3767
|
{
|
|
3589
3768
|
borderWidth: 1,
|
|
@@ -3593,8 +3772,8 @@ function BlinkPopover({
|
|
|
3593
3772
|
elevate: true,
|
|
3594
3773
|
animation: ["quick", { opacity: { overshootClamping: true } }],
|
|
3595
3774
|
children: [
|
|
3596
|
-
/* @__PURE__ */ (0,
|
|
3597
|
-
/* @__PURE__ */ (0,
|
|
3775
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Popover.Arrow, { borderWidth: 1, borderColor: "$borderColor" }),
|
|
3776
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.YStack, { gap: "$3", padding: "$3", children })
|
|
3598
3777
|
]
|
|
3599
3778
|
}
|
|
3600
3779
|
)
|
|
@@ -3603,7 +3782,7 @@ function BlinkPopover({
|
|
|
3603
3782
|
|
|
3604
3783
|
// src/patterns/ImmersiveMediaScreen.tsx
|
|
3605
3784
|
var import_tamagui66 = require("tamagui");
|
|
3606
|
-
var
|
|
3785
|
+
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
3607
3786
|
function ImmersiveMediaScreen({
|
|
3608
3787
|
variant = "reel",
|
|
3609
3788
|
media,
|
|
@@ -3619,16 +3798,16 @@ function ImmersiveMediaScreen({
|
|
|
3619
3798
|
sheetContent
|
|
3620
3799
|
}) {
|
|
3621
3800
|
const showSheet = variant === "sheet";
|
|
3622
|
-
return /* @__PURE__ */ (0,
|
|
3623
|
-
/* @__PURE__ */ (0,
|
|
3801
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.YStack, { flex: 1, backgroundColor: "$color1", children: [
|
|
3802
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.YStack, { flex: 1, position: "relative", children: [
|
|
3624
3803
|
media,
|
|
3625
|
-
/* @__PURE__ */ (0,
|
|
3626
|
-
/* @__PURE__ */ (0,
|
|
3627
|
-
/* @__PURE__ */ (0,
|
|
3628
|
-
/* @__PURE__ */ (0,
|
|
3804
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.XStack, { position: "absolute", top: "$5", left: "$4", right: "$4", justifyContent: "space-between", alignItems: "center", children: [
|
|
3805
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.XStack, { minWidth: 56, children: topLeft }),
|
|
3806
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.YStack, { alignItems: "center", flex: 1, children: topCenter }),
|
|
3807
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.XStack, { minWidth: 56, justifyContent: "flex-end", children: topRight })
|
|
3629
3808
|
] }),
|
|
3630
|
-
actions.length > 0 ? /* @__PURE__ */ (0,
|
|
3631
|
-
/* @__PURE__ */ (0,
|
|
3809
|
+
actions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.YStack, { position: "absolute", right: "$3", bottom: showSheet ? "$20" : "$10", gap: "$3", alignItems: "center", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.YStack, { gap: "$1", alignItems: "center", onPress: action.onPress, children: [
|
|
3810
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
3632
3811
|
import_tamagui66.YStack,
|
|
3633
3812
|
{
|
|
3634
3813
|
width: 44,
|
|
@@ -3637,17 +3816,17 @@ function ImmersiveMediaScreen({
|
|
|
3637
3816
|
backgroundColor: "rgba(0,0,0,0.55)",
|
|
3638
3817
|
alignItems: "center",
|
|
3639
3818
|
justifyContent: "center",
|
|
3640
|
-
children: action.icon ?? /* @__PURE__ */ (0,
|
|
3819
|
+
children: action.icon ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$5", color: "white", children: "\u2022" })
|
|
3641
3820
|
}
|
|
3642
3821
|
),
|
|
3643
|
-
action.value ? /* @__PURE__ */ (0,
|
|
3644
|
-
action.label ? /* @__PURE__ */ (0,
|
|
3822
|
+
action.value ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$2", color: "white", children: action.value }) : null,
|
|
3823
|
+
action.label ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$1", color: "rgba(255,255,255,0.8)", children: action.label }) : null
|
|
3645
3824
|
] }, action.id)) }) : null,
|
|
3646
|
-
/* @__PURE__ */ (0,
|
|
3647
|
-
title ? /* @__PURE__ */ (0,
|
|
3648
|
-
subtitle ? /* @__PURE__ */ (0,
|
|
3825
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.YStack, { position: "absolute", left: "$4", right: "$4", bottom: showSheet ? "$20" : "$6", gap: "$2", children: [
|
|
3826
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$6", fontWeight: "800", color: "white", children: title }) : null,
|
|
3827
|
+
subtitle ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$3", color: "rgba(255,255,255,0.82)", children: subtitle }) : null,
|
|
3649
3828
|
bottomMeta,
|
|
3650
|
-
variant === "story" && inputPlaceholder ? /* @__PURE__ */ (0,
|
|
3829
|
+
variant === "story" && inputPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
|
|
3651
3830
|
import_tamagui66.XStack,
|
|
3652
3831
|
{
|
|
3653
3832
|
onPress: onInputPress,
|
|
@@ -3658,22 +3837,22 @@ function ImmersiveMediaScreen({
|
|
|
3658
3837
|
backgroundColor: "rgba(255,255,255,0.14)",
|
|
3659
3838
|
borderWidth: 1,
|
|
3660
3839
|
borderColor: "rgba(255,255,255,0.25)",
|
|
3661
|
-
children: /* @__PURE__ */ (0,
|
|
3840
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$3", color: "rgba(255,255,255,0.82)", children: inputPlaceholder })
|
|
3662
3841
|
}
|
|
3663
3842
|
) : null
|
|
3664
3843
|
] })
|
|
3665
3844
|
] }),
|
|
3666
|
-
showSheet ? /* @__PURE__ */ (0,
|
|
3667
|
-
/* @__PURE__ */ (0,
|
|
3845
|
+
showSheet ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.YStack, { padding: "$4", gap: "$3", backgroundColor: "$background", borderTopLeftRadius: "$8", borderTopRightRadius: "$8", marginTop: -18, children: [
|
|
3846
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.XStack, { alignSelf: "center", width: 48, height: 5, borderRadius: "$10", backgroundColor: "$color5" }),
|
|
3668
3847
|
sheetContent,
|
|
3669
|
-
inputPlaceholder ? /* @__PURE__ */ (0,
|
|
3848
|
+
inputPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.Button, { size: "$5", backgroundColor: "$color9", color: "$color1", onPress: onInputPress, children: inputPlaceholder }) : null
|
|
3670
3849
|
] }) : null
|
|
3671
3850
|
] });
|
|
3672
3851
|
}
|
|
3673
3852
|
|
|
3674
3853
|
// src/patterns/FinanceDashboard.tsx
|
|
3675
3854
|
var import_tamagui67 = require("tamagui");
|
|
3676
|
-
var
|
|
3855
|
+
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
3677
3856
|
function FinanceDashboard({
|
|
3678
3857
|
title = "Overview",
|
|
3679
3858
|
balanceLabel = "Available balance",
|
|
@@ -3685,25 +3864,25 @@ function FinanceDashboard({
|
|
|
3685
3864
|
chartSlot,
|
|
3686
3865
|
topRight
|
|
3687
3866
|
}) {
|
|
3688
|
-
return /* @__PURE__ */ (0,
|
|
3689
|
-
/* @__PURE__ */ (0,
|
|
3690
|
-
/* @__PURE__ */ (0,
|
|
3691
|
-
/* @__PURE__ */ (0,
|
|
3692
|
-
rangeLabel ? /* @__PURE__ */ (0,
|
|
3867
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { flex: 1, backgroundColor: "$background", padding: "$4", gap: "$4", children: [
|
|
3868
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.XStack, { justifyContent: "space-between", alignItems: "center", paddingTop: "$4", children: [
|
|
3869
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { gap: "$1", children: [
|
|
3870
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$6", fontWeight: "700", children: title }),
|
|
3871
|
+
rangeLabel ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$2", color: "$color9", children: rangeLabel }) : null
|
|
3693
3872
|
] }),
|
|
3694
3873
|
topRight
|
|
3695
3874
|
] }),
|
|
3696
|
-
/* @__PURE__ */ (0,
|
|
3697
|
-
/* @__PURE__ */ (0,
|
|
3698
|
-
/* @__PURE__ */ (0,
|
|
3699
|
-
chartSlot ? /* @__PURE__ */ (0,
|
|
3875
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { backgroundColor: "$color1", borderRadius: "$7", padding: "$4", gap: "$2", borderWidth: 1, borderColor: "$color4", children: [
|
|
3876
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$3", color: "$color10", children: balanceLabel }),
|
|
3877
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$11", fontWeight: "800", children: balance }),
|
|
3878
|
+
chartSlot ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.YStack, { marginTop: "$2", children: chartSlot }) : null
|
|
3700
3879
|
] }),
|
|
3701
|
-
metrics.length > 0 ? /* @__PURE__ */ (0,
|
|
3702
|
-
/* @__PURE__ */ (0,
|
|
3703
|
-
/* @__PURE__ */ (0,
|
|
3704
|
-
metric.change ? /* @__PURE__ */ (0,
|
|
3880
|
+
metrics.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.XStack, { gap: "$3", flexWrap: "wrap", children: metrics.map((metric) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { flex: 1, minWidth: 120, backgroundColor: "$color1", borderRadius: "$6", padding: "$3", gap: "$1", borderWidth: 1, borderColor: "$color4", children: [
|
|
3881
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$2", color: "$color10", children: metric.label }),
|
|
3882
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$7", fontWeight: "800", children: metric.value }),
|
|
3883
|
+
metric.change ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$2", color: "$color9", children: metric.change }) : null
|
|
3705
3884
|
] }, metric.label)) }) : null,
|
|
3706
|
-
quickActions.length > 0 ? /* @__PURE__ */ (0,
|
|
3885
|
+
quickActions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.XStack, { gap: "$3", flexWrap: "wrap", children: quickActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
|
|
3707
3886
|
import_tamagui67.YStack,
|
|
3708
3887
|
{
|
|
3709
3888
|
flex: 1,
|
|
@@ -3718,15 +3897,15 @@ function FinanceDashboard({
|
|
|
3718
3897
|
borderColor: "$color4",
|
|
3719
3898
|
onPress: action.onPress,
|
|
3720
3899
|
children: [
|
|
3721
|
-
/* @__PURE__ */ (0,
|
|
3722
|
-
/* @__PURE__ */ (0,
|
|
3900
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.YStack, { width: 36, height: 36, borderRadius: "$10", backgroundColor: "$color3", alignItems: "center", justifyContent: "center", children: action.icon ?? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$4", children: "\u2022" }) }),
|
|
3901
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$2", textAlign: "center", children: action.label })
|
|
3723
3902
|
]
|
|
3724
3903
|
},
|
|
3725
3904
|
action.id
|
|
3726
3905
|
)) }) : null,
|
|
3727
|
-
/* @__PURE__ */ (0,
|
|
3728
|
-
/* @__PURE__ */ (0,
|
|
3729
|
-
/* @__PURE__ */ (0,
|
|
3906
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.YStack, { gap: "$3", children: sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { backgroundColor: "$color1", borderRadius: "$6", borderWidth: 1, borderColor: "$color4", overflow: "hidden", children: [
|
|
3907
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.XStack, { padding: "$3", justifyContent: "space-between", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$4", fontWeight: "700", children: section.title }) }),
|
|
3908
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.YStack, { children: section.rows.map((row, index2) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
|
|
3730
3909
|
import_tamagui67.XStack,
|
|
3731
3910
|
{
|
|
3732
3911
|
padding: "$3",
|
|
@@ -3735,12 +3914,12 @@ function FinanceDashboard({
|
|
|
3735
3914
|
borderTopWidth: index2 === 0 ? 0 : 1,
|
|
3736
3915
|
borderTopColor: "$color4",
|
|
3737
3916
|
children: [
|
|
3738
|
-
row.leading ? /* @__PURE__ */ (0,
|
|
3739
|
-
/* @__PURE__ */ (0,
|
|
3740
|
-
/* @__PURE__ */ (0,
|
|
3741
|
-
row.subtitle ? /* @__PURE__ */ (0,
|
|
3917
|
+
row.leading ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.YStack, { width: 32, height: 32, borderRadius: "$8", backgroundColor: "$color3", alignItems: "center", justifyContent: "center", children: row.leading }) : null,
|
|
3918
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { flex: 1, children: [
|
|
3919
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$3", fontWeight: "600", children: row.title }),
|
|
3920
|
+
row.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$2", color: "$color10", children: row.subtitle }) : null
|
|
3742
3921
|
] }),
|
|
3743
|
-
row.value ? /* @__PURE__ */ (0,
|
|
3922
|
+
row.value ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$3", color: "$color11", children: row.value }) : null
|
|
3744
3923
|
]
|
|
3745
3924
|
},
|
|
3746
3925
|
row.id
|
|
@@ -3757,10 +3936,13 @@ function FinanceDashboard({
|
|
|
3757
3936
|
Anchor,
|
|
3758
3937
|
AnimatePresence,
|
|
3759
3938
|
AppHeader,
|
|
3939
|
+
AppleLogo,
|
|
3760
3940
|
Article,
|
|
3761
3941
|
Aside,
|
|
3762
3942
|
Avatar,
|
|
3763
3943
|
AvatarGroup,
|
|
3944
|
+
BLINK_DESIGN_THEMES,
|
|
3945
|
+
BLINK_DESIGN_THEME_IDS,
|
|
3764
3946
|
Badge,
|
|
3765
3947
|
BlinkAccordion,
|
|
3766
3948
|
BlinkAvatar,
|
|
@@ -3803,7 +3985,9 @@ function FinanceDashboard({
|
|
|
3803
3985
|
Form,
|
|
3804
3986
|
FormField,
|
|
3805
3987
|
Frame,
|
|
3988
|
+
GitHubLogo,
|
|
3806
3989
|
GlassCard,
|
|
3990
|
+
GoogleLogo,
|
|
3807
3991
|
Grid,
|
|
3808
3992
|
Group,
|
|
3809
3993
|
H1,
|
|
@@ -3825,6 +4009,7 @@ function FinanceDashboard({
|
|
|
3825
4009
|
LoginScreen,
|
|
3826
4010
|
Main,
|
|
3827
4011
|
MediaCard,
|
|
4012
|
+
MicrosoftLogo,
|
|
3828
4013
|
Nav,
|
|
3829
4014
|
NotificationBanner,
|
|
3830
4015
|
OTPInput,
|
|
@@ -3905,6 +4090,8 @@ function FinanceDashboard({
|
|
|
3905
4090
|
createTokens,
|
|
3906
4091
|
createVariable,
|
|
3907
4092
|
dialogConfirm,
|
|
4093
|
+
getBlinkDesignTheme,
|
|
4094
|
+
getBlinkThemePalettes,
|
|
3908
4095
|
getConfig,
|
|
3909
4096
|
getToken,
|
|
3910
4097
|
getTokenValue,
|