@blinkdotnew/mobile-ui 2.0.0-alpha.9 → 2.0.0

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.
Files changed (7) hide show
  1. package/dist/index.d.mts +570 -99
  2. package/dist/index.d.ts +570 -99
  3. package/dist/index.js +2645 -405
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +2596 -398
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +8 -2
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,126 +17,211 @@ var __copyProps = (to, from, except, desc) => {
15
17
  }
16
18
  return to;
17
19
  };
20
+ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
21
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
22
+ // If the importer is in node compatibility mode or this is not an ESM
23
+ // file that has been converted to a CommonJS file using a Babel-
24
+ // compatible transform (i.e. "__esModule" has not been set), then set
25
+ // "default" to the CommonJS "module.exports" for node compatibility.
26
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
27
+ mod
28
+ ));
18
29
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
30
 
20
31
  // src/index.ts
21
32
  var index_exports = {};
22
33
  __export(index_exports, {
23
- Accordion: () => import_tamagui49.Accordion,
34
+ Accordion: () => import_tamagui69.Accordion,
24
35
  ActionSheet: () => ActionSheet,
25
- Adapt: () => import_tamagui49.Adapt,
26
- AlertDialog: () => import_tamagui49.AlertDialog,
27
- Anchor: () => import_tamagui49.Anchor,
36
+ Adapt: () => import_tamagui69.Adapt,
37
+ AlertDialog: () => import_tamagui69.AlertDialog,
38
+ Anchor: () => import_tamagui69.Anchor,
39
+ AnimatePresence: () => import_tamagui69.AnimatePresence,
28
40
  AppHeader: () => AppHeader,
29
- Avatar: () => import_tamagui49.Avatar,
41
+ AppleLogo: () => AppleLogo,
42
+ Article: () => import_tamagui69.Article,
43
+ Aside: () => import_tamagui69.Aside,
44
+ Avatar: () => import_tamagui69.Avatar,
45
+ AvatarGroup: () => AvatarGroup,
46
+ BLINK_DESIGN_THEMES: () => BLINK_DESIGN_THEMES,
47
+ BLINK_DESIGN_THEME_IDS: () => BLINK_DESIGN_THEME_IDS,
30
48
  Badge: () => Badge,
31
49
  BlinkAccordion: () => BlinkAccordion,
32
50
  BlinkAvatar: () => Avatar,
33
51
  BlinkButton: () => Button,
34
52
  BlinkCard: () => Card,
53
+ BlinkDialog: () => BlinkDialog,
35
54
  BlinkInput: () => Input,
36
- BlinkProvider: () => import_tamagui49.TamaguiProvider,
55
+ BlinkPopover: () => BlinkPopover,
56
+ BlinkProvider: () => import_tamagui69.TamaguiProvider,
57
+ BlinkSelect: () => BlinkSelect,
37
58
  BlinkTabs: () => BlinkTabs,
38
59
  BlinkText: () => BlinkText,
39
60
  BlinkToastProvider: () => BlinkToastProvider,
40
61
  BlinkToggleGroup: () => BlinkToggleGroup,
41
62
  BlinkTooltip: () => BlinkTooltip,
42
63
  BottomSheet: () => BottomSheet,
43
- Button: () => import_tamagui49.Button,
44
- Card: () => import_tamagui49.Card,
64
+ Button: () => import_tamagui69.Button,
65
+ Card: () => import_tamagui69.Card,
45
66
  Carousel: () => Carousel,
46
67
  ChatBubble: () => ChatBubble,
47
- Checkbox: () => import_tamagui49.Checkbox,
48
- Circle: () => import_tamagui49.Circle,
68
+ Checkbox: () => import_tamagui69.Checkbox,
69
+ Chip: () => Chip,
70
+ ChipGroup: () => ChipGroup,
71
+ Circle: () => import_tamagui69.Circle,
72
+ ConfirmDialog: () => ConfirmDialog,
49
73
  Container: () => Container,
50
- Dialog: () => import_tamagui49.Dialog,
74
+ CountdownBanner: () => CountdownBanner,
75
+ DataTable: () => DataTable,
76
+ DatePicker: () => DatePicker,
77
+ Dialog: () => import_tamagui69.Dialog,
51
78
  DialogProvider: () => DialogProvider,
52
79
  Divider: () => Divider,
53
80
  EmptyState: () => EmptyState,
54
- Fieldset: () => import_tamagui49.Fieldset,
81
+ EnsureFlexed: () => import_tamagui69.EnsureFlexed,
82
+ EventCard: () => EventCard,
83
+ Fieldset: () => import_tamagui69.Fieldset,
84
+ FinanceDashboard: () => FinanceDashboard,
55
85
  FloatingActionButton: () => FloatingActionButton,
56
- Form: () => import_tamagui49.Form,
86
+ Footer: () => import_tamagui69.Footer,
87
+ Form: () => import_tamagui69.Form,
57
88
  FormField: () => FormField,
89
+ Frame: () => import_tamagui69.Frame,
90
+ GitHubLogo: () => GitHubLogo,
91
+ GlassCard: () => GlassCard,
92
+ GoogleLogo: () => GoogleLogo,
58
93
  Grid: () => Grid,
59
- H1: () => import_tamagui49.H1,
60
- H2: () => import_tamagui49.H2,
61
- H3: () => import_tamagui49.H3,
62
- H4: () => import_tamagui49.H4,
63
- H5: () => import_tamagui49.H5,
64
- H6: () => import_tamagui49.H6,
94
+ Group: () => import_tamagui69.Group,
95
+ H1: () => import_tamagui69.H1,
96
+ H2: () => import_tamagui69.H2,
97
+ H3: () => import_tamagui69.H3,
98
+ H4: () => import_tamagui69.H4,
99
+ H5: () => import_tamagui69.H5,
100
+ H6: () => import_tamagui69.H6,
101
+ Header: () => import_tamagui69.Header,
102
+ Heading: () => import_tamagui69.Heading,
65
103
  ICONS: () => ICONS,
66
104
  Icon: () => Icon,
67
105
  Image: () => Image2,
68
- Input: () => import_tamagui49.Input,
106
+ ImmersiveMediaScreen: () => ImmersiveMediaScreen,
107
+ Input: () => import_tamagui69.Input,
69
108
  KeyboardStickyFooter: () => KeyboardStickyFooter,
70
- Label: () => import_tamagui49.Label,
109
+ Label: () => import_tamagui69.Label,
71
110
  ListItem: () => ListItem,
72
111
  LoginScreen: () => LoginScreen,
112
+ Main: () => import_tamagui69.Main,
73
113
  MediaCard: () => MediaCard,
114
+ MicrosoftLogo: () => MicrosoftLogo,
115
+ Nav: () => import_tamagui69.Nav,
74
116
  NotificationBanner: () => NotificationBanner,
117
+ OTPInput: () => OTPInput,
75
118
  OnboardingCarousel: () => OnboardingCarousel,
76
119
  PageContainer: () => PageContainer,
77
120
  PageMainContainer: () => PageMainContainer,
78
- Paragraph: () => import_tamagui49.Paragraph,
121
+ Paragraph: () => import_tamagui69.Paragraph,
122
+ PasswordInput: () => PasswordInput,
79
123
  PaywallScreen: () => PaywallScreen,
80
- Popover: () => import_tamagui49.Popover,
81
- PortalProvider: () => import_tamagui49.PortalProvider,
124
+ Popover: () => import_tamagui69.Popover,
125
+ Portal: () => import_tamagui69.Portal,
126
+ PortalHost: () => import_tamagui69.PortalHost,
127
+ PortalItem: () => import_tamagui69.PortalItem,
128
+ PortalProvider: () => import_tamagui69.PortalProvider,
82
129
  Pressable: () => Pressable,
130
+ PricingTable: () => PricingTable,
131
+ ProductCard: () => ProductCard,
83
132
  ProfileHeader: () => ProfileHeader,
84
- Progress: () => import_tamagui49.Progress,
133
+ Progress: () => import_tamagui69.Progress,
85
134
  ProgressSteps: () => ProgressSteps,
86
135
  PullToRefresh: () => PullToRefresh,
87
- RadioGroup: () => import_tamagui49.RadioGroup,
136
+ RadioGroup: () => import_tamagui69.RadioGroup,
88
137
  SafeArea: () => SafeArea,
89
138
  ScreenLayout: () => ScreenLayout,
90
- ScrollView: () => import_tamagui49.ScrollView,
139
+ ScrollView: () => import_tamagui69.ScrollView,
91
140
  SearchBar: () => SearchBar,
92
141
  Section: () => Section,
93
- Select: () => import_tamagui49.Select,
142
+ Select: () => import_tamagui69.Select,
94
143
  SepHeading: () => SepHeading,
95
- Separator: () => import_tamagui49.Separator,
144
+ Separator: () => import_tamagui69.Separator,
96
145
  SettingsScreen: () => SettingsScreen,
97
- Sheet: () => import_tamagui49.Sheet,
98
- SizableText: () => import_tamagui49.SizableText,
146
+ Sheet: () => import_tamagui69.Sheet,
147
+ SizableStack: () => import_tamagui69.SizableStack,
148
+ SizableText: () => import_tamagui69.SizableText,
99
149
  Skeleton: () => Skeleton,
100
- Slider: () => import_tamagui49.Slider,
101
- Spinner: () => import_tamagui49.Spinner,
102
- Square: () => import_tamagui49.Square,
150
+ Slider: () => import_tamagui69.Slider,
151
+ Spacer: () => import_tamagui69.Spacer,
152
+ Spinner: () => import_tamagui69.Spinner,
153
+ Square: () => import_tamagui69.Square,
154
+ Stack: () => import_tamagui69.Stack,
155
+ StatusBadge: () => StatusBadge,
103
156
  StepPageLayout: () => StepPageLayout,
104
157
  SubHeading: () => SubHeading,
158
+ SwipeCards: () => SwipeCards,
105
159
  SwipeableRow: () => SwipeableRow,
106
- Switch: () => import_tamagui49.Switch,
160
+ Switch: () => import_tamagui69.Switch,
107
161
  TabBar: () => TabBar,
108
- Tabs: () => import_tamagui49.Tabs,
109
- TamaguiImage: () => import_tamagui49.Image,
110
- TamaguiListItem: () => import_tamagui49.ListItem,
111
- TamaguiProvider: () => import_tamagui49.TamaguiProvider,
112
- Text: () => import_tamagui49.Text,
113
- TextArea: () => import_tamagui49.TextArea,
114
- Theme: () => import_tamagui49.Theme,
115
- ToggleGroup: () => import_tamagui49.ToggleGroup,
116
- Tooltip: () => import_tamagui49.Tooltip,
117
- TooltipSimple: () => import_tamagui49.TooltipSimple,
118
- Unspaced: () => import_tamagui49.Unspaced,
119
- View: () => import_tamagui49.View,
120
- VisuallyHidden: () => import_tamagui49.VisuallyHidden,
121
- XGroup: () => import_tamagui49.XGroup,
122
- XStack: () => import_tamagui49.XStack,
123
- YGroup: () => import_tamagui49.YGroup,
124
- YStack: () => import_tamagui49.YStack,
125
- ZStack: () => import_tamagui49.ZStack,
162
+ Tabs: () => import_tamagui69.Tabs,
163
+ TamaguiImage: () => import_tamagui69.Image,
164
+ TamaguiListItem: () => import_tamagui69.ListItem,
165
+ TamaguiProvider: () => import_tamagui69.TamaguiProvider,
166
+ TestimonialCard: () => TestimonialCard2,
167
+ Text: () => import_tamagui69.Text,
168
+ TextArea: () => import_tamagui69.TextArea,
169
+ Theme: () => import_tamagui69.Theme,
170
+ ThemeableStack: () => import_tamagui69.ThemeableStack,
171
+ ToggleGroup: () => import_tamagui69.ToggleGroup,
172
+ Tooltip: () => import_tamagui69.Tooltip,
173
+ TooltipSimple: () => import_tamagui69.TooltipSimple,
174
+ Unspaced: () => import_tamagui69.Unspaced,
175
+ UserPreferences: () => UserPreferences,
176
+ View: () => import_tamagui69.View,
177
+ VisuallyHidden: () => import_tamagui69.VisuallyHidden,
178
+ XGroup: () => import_tamagui69.XGroup,
179
+ XStack: () => import_tamagui69.XStack,
180
+ YGroup: () => import_tamagui69.YGroup,
181
+ YStack: () => import_tamagui69.YStack,
182
+ ZStack: () => import_tamagui69.ZStack,
183
+ addTheme: () => import_tamagui69.addTheme,
126
184
  blinkConfig: () => blinkConfig,
127
- createTamagui: () => import_tamagui49.createTamagui,
185
+ composeEventHandlers: () => import_tamagui69.composeEventHandlers,
186
+ composeRefs: () => import_tamagui69.composeRefs,
187
+ createFont: () => import_tamagui69.createFont,
188
+ createMedia: () => import_tamagui69.createMedia,
189
+ createStyledContext: () => import_tamagui69.createStyledContext,
190
+ createTamagui: () => import_tamagui69.createTamagui,
191
+ createTheme: () => import_tamagui69.createTheme,
192
+ createTokens: () => import_tamagui69.createTokens,
193
+ createVariable: () => import_tamagui69.createVariable,
128
194
  dialogConfirm: () => dialogConfirm,
195
+ getBlinkDesignTheme: () => getBlinkDesignTheme,
196
+ getBlinkThemePalettes: () => getBlinkThemePalettes,
197
+ getConfig: () => import_tamagui69.getConfig,
198
+ getToken: () => import_tamagui69.getToken,
199
+ getTokenValue: () => import_tamagui69.getTokenValue,
200
+ getTokens: () => import_tamagui69.getTokens,
201
+ isClient: () => import_tamagui69.isClient,
202
+ isWeb: () => import_tamagui69.isWeb,
203
+ replaceTheme: () => import_tamagui69.replaceTheme,
129
204
  showError: () => showError,
130
- styled: () => import_tamagui49.styled,
205
+ styled: () => import_tamagui69.styled,
131
206
  tamaguiDefaultConfig: () => import_v52.defaultConfig,
132
207
  toast: () => toast,
208
+ updateTheme: () => import_tamagui69.updateTheme,
133
209
  useBlinkToast: () => useBlinkToast,
134
- useMedia: () => import_tamagui49.useMedia,
135
- useTheme: () => import_tamagui49.useTheme,
136
- useThemeName: () => import_tamagui49.useThemeName,
137
- withStaticProperties: () => import_tamagui49.withStaticProperties
210
+ useComposedRefs: () => import_tamagui69.useComposedRefs,
211
+ useControllableState: () => import_tamagui69.useControllableState,
212
+ useDebounce: () => import_tamagui69.useDebounce,
213
+ useDebounceValue: () => import_tamagui69.useDebounceValue,
214
+ useDidFinishSSR: () => import_tamagui69.useDidFinishSSR,
215
+ useEvent: () => import_tamagui69.useEvent,
216
+ useForceUpdate: () => import_tamagui69.useForceUpdate,
217
+ useIsPresent: () => import_tamagui69.useIsPresent,
218
+ useIsomorphicLayoutEffect: () => import_tamagui69.useIsomorphicLayoutEffect,
219
+ useMedia: () => import_tamagui69.useMedia,
220
+ usePresence: () => import_tamagui69.usePresence,
221
+ useTheme: () => import_tamagui69.useTheme,
222
+ useThemeName: () => import_tamagui69.useThemeName,
223
+ useWindowDimensions: () => import_tamagui69.useWindowDimensions,
224
+ withStaticProperties: () => import_tamagui69.withStaticProperties
138
225
  });
139
226
  module.exports = __toCommonJS(index_exports);
140
227
 
@@ -147,7 +234,178 @@ var blinkConfig = (0, import_tamagui.createTamagui)({
147
234
 
148
235
  // src/index.ts
149
236
  var import_v52 = require("@tamagui/config/v5");
150
- var import_tamagui49 = require("tamagui");
237
+
238
+ // src/config/design-themes.ts
239
+ var BLINK_DESIGN_THEMES = {
240
+ "mono": {
241
+ id: "mono",
242
+ name: "Mono",
243
+ description: "Black/white neutral",
244
+ palette: { primary: "#18181B", primary_foreground: "#FAFAFA", secondary: "#F4F4F5", secondary_foreground: "#27272A", accent: "#3F3F46", background: "#FFFFFF", dark_mode: "#09090B" }
245
+ },
246
+ "ocean-teal": {
247
+ id: "ocean-teal",
248
+ name: "Ocean Teal",
249
+ description: "SaaS, fintech, healthcare",
250
+ palette: { primary: "#0D9488", primary_foreground: "#FFFFFF", secondary: "#F0FDFA", secondary_foreground: "#134E4A", accent: "#2DD4BF", background: "#FFFFFF", dark_mode: "#042F2E" }
251
+ },
252
+ "warm-amber": {
253
+ id: "warm-amber",
254
+ name: "Warm Amber",
255
+ description: "E-commerce, food, hospitality",
256
+ palette: { primary: "#D97706", primary_foreground: "#FFFFFF", secondary: "#FFFBEB", secondary_foreground: "#78350F", accent: "#FBBF24", background: "#FFFEF7", dark_mode: "#451A03" }
257
+ },
258
+ "rose-coral": {
259
+ id: "rose-coral",
260
+ name: "Rose Coral",
261
+ description: "Lifestyle, beauty, fashion",
262
+ palette: { primary: "#E11D48", primary_foreground: "#FFFFFF", secondary: "#FFF1F2", secondary_foreground: "#881337", accent: "#FB7185", background: "#FFFAFA", dark_mode: "#4C0519" }
263
+ },
264
+ "lavender": {
265
+ id: "lavender",
266
+ name: "Lavender",
267
+ description: "Creative, wellness, meditation",
268
+ palette: { primary: "#7C3AED", primary_foreground: "#FFFFFF", secondary: "#F5F3FF", secondary_foreground: "#4C1D95", accent: "#A78BFA", background: "#FEFEFF", dark_mode: "#2E1065" }
269
+ },
270
+ "glacier": {
271
+ id: "glacier",
272
+ name: "Glacier",
273
+ description: "Professional, corporate, analytics",
274
+ palette: { primary: "#0EA5E9", primary_foreground: "#FFFFFF", secondary: "#F0F9FF", secondary_foreground: "#0C4A6E", accent: "#38BDF8", background: "#FFFFFF", dark_mode: "#082F49" }
275
+ },
276
+ "forest": {
277
+ id: "forest",
278
+ name: "Forest",
279
+ description: "Sustainability, nature, outdoor",
280
+ palette: { primary: "#16A34A", primary_foreground: "#FFFFFF", secondary: "#F0FDF4", secondary_foreground: "#14532D", accent: "#4ADE80", background: "#FEFFFE", dark_mode: "#052E16" }
281
+ },
282
+ "obsidian": {
283
+ id: "obsidian",
284
+ name: "Obsidian",
285
+ description: "Developer tools, gaming, tech",
286
+ palette: { primary: "#475569", primary_foreground: "#FFFFFF", secondary: "#F1F5F9", secondary_foreground: "#1E293B", accent: "#64748B", background: "#FFFFFF", dark_mode: "#0F172A" }
287
+ },
288
+ "solar": {
289
+ id: "solar",
290
+ name: "Solar",
291
+ description: "Energy, optimistic, kid-friendly",
292
+ palette: { primary: "#CA8A04", primary_foreground: "#FFFFFF", secondary: "#FEFCE8", secondary_foreground: "#713F12", accent: "#FACC15", background: "#FFFEF5", dark_mode: "#422006" }
293
+ },
294
+ "orchid": {
295
+ id: "orchid",
296
+ name: "Orchid",
297
+ description: "Beauty, fashion, luxury",
298
+ palette: { primary: "#C026D3", primary_foreground: "#FFFFFF", secondary: "#FDF4FF", secondary_foreground: "#701A75", accent: "#E879F9", background: "#FFFEFF", dark_mode: "#4A044E" }
299
+ },
300
+ "indigo": {
301
+ id: "indigo",
302
+ name: "Indigo",
303
+ description: "Enterprise, fintech, trust",
304
+ palette: { primary: "#4F46E5", primary_foreground: "#FFFFFF", secondary: "#EEF2FF", secondary_foreground: "#312E81", accent: "#818CF8", background: "#FEFEFF", dark_mode: "#1E1B4B" }
305
+ },
306
+ "cosmic-night": {
307
+ id: "cosmic-night",
308
+ name: "Cosmic Night",
309
+ description: "Dark mode, futuristic, gaming",
310
+ palette: { primary: "#6366F1", primary_foreground: "#FFFFFF", secondary: "#1E1B4B", secondary_foreground: "#E0E7FF", accent: "#A855F7", background: "#0F0D1A", dark_mode: "#030014" }
311
+ },
312
+ "soft-pop": {
313
+ id: "soft-pop",
314
+ name: "Soft Pop",
315
+ description: "Playful, modern, creative",
316
+ palette: { primary: "#14B8A6", primary_foreground: "#FFFFFF", secondary: "#FDF2F8", secondary_foreground: "#134E4A", accent: "#F472B6", background: "#FFFBFE", dark_mode: "#0D1117" }
317
+ },
318
+ "neo-brutalism": {
319
+ id: "neo-brutalism",
320
+ name: "Neo Brutalism",
321
+ description: "Bold, striking, artistic",
322
+ palette: { primary: "#FF6B35", primary_foreground: "#000000", secondary: "#FFE66D", secondary_foreground: "#1A1A1A", accent: "#FF3366", background: "#FFFEF0", dark_mode: "#1A1A1A" }
323
+ },
324
+ "vintage-paper": {
325
+ id: "vintage-paper",
326
+ name: "Vintage Paper",
327
+ description: "Classic, warm, nostalgic",
328
+ palette: { primary: "#B45309", primary_foreground: "#FFFFFF", secondary: "#FEF3C7", secondary_foreground: "#78350F", accent: "#92400E", background: "#FFFDF7", dark_mode: "#292524" }
329
+ },
330
+ "modern-minimal": {
331
+ id: "modern-minimal",
332
+ name: "Modern Minimal",
333
+ description: "Clean, professional, corporate",
334
+ palette: { primary: "#2563EB", primary_foreground: "#FFFFFF", secondary: "#F8FAFC", secondary_foreground: "#1E40AF", accent: "#3B82F6", background: "#FFFFFF", dark_mode: "#0F172A" }
335
+ },
336
+ "bubblegum": {
337
+ id: "bubblegum",
338
+ name: "Bubblegum",
339
+ description: "Fun, feminine, youthful",
340
+ palette: { primary: "#EC4899", primary_foreground: "#FFFFFF", secondary: "#FDF4FF", secondary_foreground: "#9D174D", accent: "#F472B6", background: "#FFFBFF", dark_mode: "#500724" }
341
+ }
342
+ };
343
+ function hexToRgb(hex) {
344
+ const h = hex.replace("#", "");
345
+ return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
346
+ }
347
+ function rgbToHex(r, g, b) {
348
+ return "#" + [r, g, b].map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0")).join("");
349
+ }
350
+ function mixColors(c1, c2, t) {
351
+ const [r1, g1, b1] = hexToRgb(c1);
352
+ const [r2, g2, b2] = hexToRgb(c2);
353
+ return rgbToHex(r1 + (r2 - r1) * t, g1 + (g2 - g1) * t, b1 + (b2 - b1) * t);
354
+ }
355
+ function generateLightPalette(p) {
356
+ return [
357
+ p.background,
358
+ p.secondary,
359
+ mixColors(p.secondary, p.accent, 0.15),
360
+ mixColors(p.secondary, p.accent, 0.3),
361
+ mixColors(p.accent, p.primary, 0.1),
362
+ mixColors(p.accent, p.primary, 0.3),
363
+ mixColors(p.accent, p.primary, 0.5),
364
+ mixColors(p.accent, p.primary, 0.7),
365
+ p.primary,
366
+ mixColors(p.primary, p.secondary_foreground, 0.3),
367
+ p.secondary_foreground,
368
+ p.dark_mode
369
+ ];
370
+ }
371
+ function generateDarkPalette(p) {
372
+ return [
373
+ p.dark_mode,
374
+ mixColors(p.dark_mode, p.secondary_foreground, 0.15),
375
+ mixColors(p.dark_mode, p.secondary_foreground, 0.25),
376
+ mixColors(p.dark_mode, p.secondary_foreground, 0.35),
377
+ mixColors(p.secondary_foreground, p.accent, 0.2),
378
+ mixColors(p.secondary_foreground, p.accent, 0.4),
379
+ mixColors(p.secondary_foreground, p.accent, 0.6),
380
+ mixColors(p.accent, p.primary, 0.5),
381
+ p.primary,
382
+ p.accent,
383
+ mixColors(p.accent, p.primary_foreground, 0.5),
384
+ p.primary_foreground
385
+ ];
386
+ }
387
+ function getBlinkThemePalettes(themeId) {
388
+ const theme = BLINK_DESIGN_THEMES[themeId];
389
+ if (!theme) throw new Error(`Unknown theme: ${themeId}`);
390
+ const p = theme.palette;
391
+ return {
392
+ base: {
393
+ light: generateLightPalette(p),
394
+ dark: generateDarkPalette(p)
395
+ },
396
+ accent: {
397
+ light: generateDarkPalette(p),
398
+ dark: generateLightPalette(p)
399
+ }
400
+ };
401
+ }
402
+ var BLINK_DESIGN_THEME_IDS = Object.keys(BLINK_DESIGN_THEMES);
403
+ function getBlinkDesignTheme(themeId) {
404
+ return BLINK_DESIGN_THEMES[themeId];
405
+ }
406
+
407
+ // src/index.ts
408
+ var import_tamagui69 = require("tamagui");
151
409
 
152
410
  // src/primitives/Button.tsx
153
411
  var import_tamagui2 = require("tamagui");
@@ -936,17 +1194,43 @@ function BlinkTooltip({ content, children, side = "top" }) {
936
1194
  ] });
937
1195
  }
938
1196
 
1197
+ // src/interface/BrandIcons.tsx
1198
+ var import_react_native_svg = __toESM(require("react-native-svg"));
1199
+ var import_jsx_runtime13 = require("react/jsx-runtime");
1200
+ function GoogleLogo({ size = 20 }) {
1201
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 24 24", children: [
1202
+ /* @__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" }),
1203
+ /* @__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" }),
1204
+ /* @__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" }),
1205
+ /* @__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" })
1206
+ ] });
1207
+ }
1208
+ function AppleLogo({ size = 20, color = "#000" }) {
1209
+ 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" }) });
1210
+ }
1211
+ function GitHubLogo({ size = 20, color = "#fff" }) {
1212
+ 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" }) });
1213
+ }
1214
+ function MicrosoftLogo({ size = 20 }) {
1215
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native_svg.default, { width: size, height: size, viewBox: "0 0 21 21", children: [
1216
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Rect, { width: "10", height: "10", fill: "#F25022" }),
1217
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Rect, { x: "11", width: "10", height: "10", fill: "#7FBA00" }),
1218
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Rect, { y: "11", width: "10", height: "10", fill: "#00A4EF" }),
1219
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_svg.Rect, { x: "11", y: "11", width: "10", height: "10", fill: "#FFB900" })
1220
+ ] });
1221
+ }
1222
+
939
1223
  // src/layouts/StepPageLayout.tsx
940
1224
  var import_tamagui20 = require("tamagui");
941
- var import_jsx_runtime13 = require("react/jsx-runtime");
1225
+ var import_jsx_runtime14 = require("react/jsx-runtime");
942
1226
  function StepPageLayout({ title, description, children, bottom }) {
943
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_tamagui20.YStack, { flex: 1, padding: "$4", maxWidth: 500, marginHorizontal: "auto", width: "100%", children: [
944
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_tamagui20.YStack, { gap: "$5", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_tamagui20.YStack, { gap: "$2", children: [
945
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_tamagui20.SizableText, { size: "$8", fontWeight: "700", children: title }),
946
- description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_tamagui20.SizableText, { size: "$5", fontWeight: "400", color: "$color10", children: description })
1227
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_tamagui20.YStack, { flex: 1, padding: "$4", maxWidth: 500, marginHorizontal: "auto", width: "100%", children: [
1228
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui20.YStack, { gap: "$5", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_tamagui20.YStack, { gap: "$2", children: [
1229
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui20.SizableText, { size: "$8", fontWeight: "700", children: title }),
1230
+ description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui20.SizableText, { size: "$5", fontWeight: "400", color: "$color10", children: description })
947
1231
  ] }) }),
948
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_tamagui20.YStack, { paddingTop: "$5", gap: "$4", children }),
949
- bottom && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_tamagui20.YStack, { paddingTop: "$4", children: bottom })
1232
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui20.YStack, { paddingTop: "$5", gap: "$4", children }),
1233
+ bottom && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui20.YStack, { paddingTop: "$4", children: bottom })
950
1234
  ] });
951
1235
  }
952
1236
 
@@ -971,12 +1255,12 @@ var ScreenLayout = (0, import_tamagui21.styled)(import_tamagui21.YStack, {
971
1255
 
972
1256
  // src/layouts/Section.tsx
973
1257
  var import_tamagui22 = require("tamagui");
974
- var import_jsx_runtime14 = require("react/jsx-runtime");
1258
+ var import_jsx_runtime15 = require("react/jsx-runtime");
975
1259
  function Section({ title, description, children, gap = "$3" }) {
976
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_tamagui22.YStack, { gap, children: [
977
- title && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_tamagui22.YStack, { gap: "$1", children: [
978
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui22.SizableText, { size: "$5", fontWeight: "600", color: "$color12", children: title }),
979
- description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tamagui22.SizableText, { size: "$3", color: "$color9", children: description })
1260
+ return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_tamagui22.YStack, { gap, children: [
1261
+ title && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_tamagui22.YStack, { gap: "$1", children: [
1262
+ /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tamagui22.SizableText, { size: "$5", fontWeight: "600", color: "$color12", children: title }),
1263
+ description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tamagui22.SizableText, { size: "$3", color: "$color9", children: description })
980
1264
  ] }),
981
1265
  children
982
1266
  ] });
@@ -984,7 +1268,7 @@ function Section({ title, description, children, gap = "$3" }) {
984
1268
 
985
1269
  // src/layouts/ListItem.tsx
986
1270
  var import_tamagui23 = require("tamagui");
987
- var import_jsx_runtime15 = require("react/jsx-runtime");
1271
+ var import_jsx_runtime16 = require("react/jsx-runtime");
988
1272
  var ListItemFrame = (0, import_tamagui23.styled)(import_tamagui23.XStack, {
989
1273
  name: "BlinkListItem",
990
1274
  alignItems: "center",
@@ -1002,11 +1286,11 @@ var ListItemFrame = (0, import_tamagui23.styled)(import_tamagui23.XStack, {
1002
1286
  }
1003
1287
  });
1004
1288
  function ListItem({ icon, title, subtitle, right, onPress }) {
1005
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(ListItemFrame, { pressable: !!onPress, onPress, children: [
1006
- icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tamagui23.View, { children: icon }),
1007
- /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_tamagui23.YStack, { flex: 1, gap: "$1", children: [
1008
- /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tamagui23.SizableText, { size: "$4", fontWeight: "500", color: "$color12", children: title }),
1009
- subtitle && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tamagui23.SizableText, { size: "$2", color: "$color9", children: subtitle })
1289
+ return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ListItemFrame, { pressable: !!onPress, onPress, children: [
1290
+ icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tamagui23.View, { children: icon }),
1291
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_tamagui23.YStack, { flex: 1, gap: "$1", children: [
1292
+ /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tamagui23.SizableText, { size: "$4", fontWeight: "500", color: "$color12", children: title }),
1293
+ subtitle && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tamagui23.SizableText, { size: "$2", color: "$color9", children: subtitle })
1010
1294
  ] }),
1011
1295
  right
1012
1296
  ] });
@@ -1014,28 +1298,28 @@ function ListItem({ icon, title, subtitle, right, onPress }) {
1014
1298
 
1015
1299
  // src/layouts/Divider.tsx
1016
1300
  var import_tamagui24 = require("tamagui");
1017
- var import_jsx_runtime16 = require("react/jsx-runtime");
1301
+ var import_jsx_runtime17 = require("react/jsx-runtime");
1018
1302
  function Divider({ label }) {
1019
- if (!label) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tamagui24.Separator, { borderColor: "$color4" });
1020
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_tamagui24.XStack, { alignItems: "center", gap: "$3", children: [
1021
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tamagui24.Separator, { flex: 1, borderColor: "$color4" }),
1022
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tamagui24.SizableText, { size: "$2", color: "$color9", children: label }),
1023
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tamagui24.Separator, { flex: 1, borderColor: "$color4" })
1303
+ if (!label) return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tamagui24.Separator, { borderColor: "$color4" });
1304
+ return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_tamagui24.XStack, { alignItems: "center", gap: "$3", children: [
1305
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tamagui24.Separator, { flex: 1, borderColor: "$color4" }),
1306
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tamagui24.SizableText, { size: "$2", color: "$color9", children: label }),
1307
+ /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tamagui24.Separator, { flex: 1, borderColor: "$color4" })
1024
1308
  ] });
1025
1309
  }
1026
1310
 
1027
1311
  // src/layouts/KeyboardStickyFooter.tsx
1028
1312
  var import_tamagui25 = require("tamagui");
1029
- var import_jsx_runtime17 = require("react/jsx-runtime");
1313
+ var import_jsx_runtime18 = require("react/jsx-runtime");
1030
1314
  function KeyboardStickyFooter({ children, offset }) {
1031
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tamagui25.YStack, { maxWidth: 500, alignSelf: "center", paddingTop: "$8", paddingBottom: "$4", style: { paddingBottom: offset }, children });
1315
+ return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_tamagui25.YStack, { maxWidth: 500, alignSelf: "center", paddingTop: "$8", paddingBottom: "$4", style: { paddingBottom: offset }, children });
1032
1316
  }
1033
1317
 
1034
1318
  // src/layouts/SafeArea.tsx
1035
1319
  var import_tamagui26 = require("tamagui");
1036
- var import_jsx_runtime18 = require("react/jsx-runtime");
1320
+ var import_jsx_runtime19 = require("react/jsx-runtime");
1037
1321
  function SafeArea({ children, edges = ["top", "bottom"] }) {
1038
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1322
+ return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1039
1323
  import_tamagui26.YStack,
1040
1324
  {
1041
1325
  flex: 1,
@@ -1052,149 +1336,347 @@ function SafeArea({ children, edges = ["top", "bottom"] }) {
1052
1336
  // src/layouts/Grid.tsx
1053
1337
  var import_react6 = require("react");
1054
1338
  var import_tamagui27 = require("tamagui");
1055
- var import_jsx_runtime19 = require("react/jsx-runtime");
1339
+ var import_jsx_runtime20 = require("react/jsx-runtime");
1056
1340
  function Grid({ children, columns = 2, gap = "$3" }) {
1057
1341
  const items = import_react6.Children.toArray(children);
1058
1342
  const rows = [];
1059
1343
  for (let i = 0; i < items.length; i += columns) {
1060
1344
  rows.push(items.slice(i, i + columns));
1061
1345
  }
1062
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_tamagui27.YStack, { gap, children: rows.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_tamagui27.XStack, { gap, children: [
1063
- row.map((item, ci) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_tamagui27.YStack, { flex: 1, children: item }, ci)),
1064
- row.length < columns && Array.from({ length: columns - row.length }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_tamagui27.YStack, { flex: 1 }, `pad-${i}`))
1346
+ 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: [
1347
+ row.map((item, ci) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui27.YStack, { flex: 1, children: item }, ci)),
1348
+ row.length < columns && Array.from({ length: columns - row.length }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui27.YStack, { flex: 1 }, `pad-${i}`))
1065
1349
  ] }, ri)) });
1066
1350
  }
1067
1351
  function Container({ children, maxWidth = 500, centered = true, padding = "$4" }) {
1068
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_tamagui27.YStack, { width: "100%", maxWidth, alignSelf: centered ? "center" : void 0, padding, children });
1352
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui27.YStack, { width: "100%", maxWidth, alignSelf: centered ? "center" : void 0, padding, children });
1069
1353
  }
1070
1354
 
1071
1355
  // src/patterns/PaywallScreen.tsx
1356
+ var import_react7 = require("react");
1072
1357
  var import_tamagui28 = require("tamagui");
1073
- var import_jsx_runtime20 = require("react/jsx-runtime");
1358
+ var import_jsx_runtime21 = require("react/jsx-runtime");
1359
+ function useCountdown(minutes) {
1360
+ const [seconds, setSeconds] = (0, import_react7.useState)((minutes ?? 0) * 60);
1361
+ (0, import_react7.useEffect)(() => {
1362
+ if (!minutes) return;
1363
+ setSeconds(minutes * 60);
1364
+ const id = setInterval(() => setSeconds((s) => s > 0 ? s - 1 : 0), 1e3);
1365
+ return () => clearInterval(id);
1366
+ }, [minutes]);
1367
+ const mm = String(Math.floor(seconds / 60)).padStart(2, "0");
1368
+ const ss = String(seconds % 60).padStart(2, "0");
1369
+ return { display: `${mm}:${ss}`, expired: seconds <= 0 };
1370
+ }
1371
+ function normalizeFeature(f) {
1372
+ return typeof f === "string" ? { title: f } : f;
1373
+ }
1374
+ function BenefitRow({ feature, tone, muted }) {
1375
+ const f = normalizeFeature(feature);
1376
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { gap: "$3", alignItems: "center", children: [
1377
+ /* @__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" }) }),
1378
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { flex: 1, gap: "$0.5", children: [
1379
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$4", fontWeight: "700", color: tone, children: f.title }),
1380
+ f.description ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: muted, children: f.description }) : null
1381
+ ] })
1382
+ ] });
1383
+ }
1384
+ function PlanRow({ plan, selected, onPress }) {
1385
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1386
+ import_tamagui28.XStack,
1387
+ {
1388
+ width: "100%",
1389
+ padding: "$3",
1390
+ paddingHorizontal: "$3.5",
1391
+ borderRadius: "$5",
1392
+ borderWidth: 2,
1393
+ borderColor: selected ? "$color9" : "$color5",
1394
+ backgroundColor: selected ? "$color3" : "$color1",
1395
+ pressStyle: { scale: 0.98, opacity: 0.9 },
1396
+ animation: "quick",
1397
+ onPress,
1398
+ cursor: "pointer",
1399
+ alignItems: "center",
1400
+ gap: "$3",
1401
+ position: "relative",
1402
+ children: [
1403
+ 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" }) }),
1404
+ /* @__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" }) }),
1405
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { flex: 1, gap: "$0.5", children: [
1406
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { gap: "$2", alignItems: "center", children: [
1407
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$4", fontWeight: "700", children: plan.name }),
1408
+ 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 }) })
1409
+ ] }),
1410
+ plan.tagline ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color10", children: plan.tagline }) : null
1411
+ ] }),
1412
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { alignItems: "flex-end", gap: "$0.5", children: [
1413
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { alignItems: "baseline", gap: "$1", children: [
1414
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$5", fontWeight: "800", children: plan.price }),
1415
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.SizableText, { size: "$2", color: "$color10", children: [
1416
+ "/",
1417
+ plan.period
1418
+ ] })
1419
+ ] }),
1420
+ 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 }) }),
1421
+ plan.pricePerWeek && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$1", color: "$color10", children: plan.pricePerWeek })
1422
+ ] })
1423
+ ]
1424
+ }
1425
+ );
1426
+ }
1427
+ function ComparisonIcon({ enabled }) {
1428
+ 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" }) });
1429
+ }
1430
+ function TestimonialCard({ t }) {
1431
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { minWidth: 240, backgroundColor: "$color2", borderRadius: "$6", padding: "$3.5", gap: "$2.5", children: [
1432
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.SizableText, { size: "$3", color: "$color11", fontStyle: "italic", children: [
1433
+ "\u201C",
1434
+ t.quote,
1435
+ "\u201D"
1436
+ ] }),
1437
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { gap: "$2", alignItems: "center", children: [
1438
+ /* @__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] }) }),
1439
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { children: [
1440
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", fontWeight: "700", children: t.author }),
1441
+ t.meta ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$1", color: "$color10", children: t.meta }) : null
1442
+ ] })
1443
+ ] })
1444
+ ] });
1445
+ }
1446
+ function CreatorHeader({ c }) {
1447
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { alignItems: "center", justifyContent: "center", gap: "$3", children: [
1448
+ c.avatar && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.Circle, { size: 72, overflow: "hidden", backgroundColor: "$color3", children: c.avatar }),
1449
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { alignItems: "center", gap: "$1", children: [
1450
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$6", fontWeight: "800", children: c.name }),
1451
+ c.meta ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$3", color: "$color10", children: c.meta }) : null
1452
+ ] })
1453
+ ] });
1454
+ }
1455
+ function TrustBadges({ badges }) {
1456
+ 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: [
1457
+ /* @__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" }) }),
1458
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$1", color: "$color10", textAlign: "center", children: b.label })
1459
+ ] }, i)) });
1460
+ }
1074
1461
  function PaywallScreen({
1075
- title = "Upgrade Your Experience",
1076
- subtitle = "Choose the plan that works for you",
1462
+ variant = "default",
1463
+ eyebrow,
1464
+ title = "Unlock Premium",
1465
+ subtitle,
1466
+ features = [],
1077
1467
  plans,
1078
1468
  selectedPlan,
1079
1469
  onSelectPlan,
1080
1470
  onContinue,
1471
+ onClose,
1081
1472
  onRestore,
1082
- continueLabel = "Continue"
1473
+ onTerms,
1474
+ onPrivacy,
1475
+ continueLabel = "Continue",
1476
+ reassurance = "Cancel anytime",
1477
+ hero,
1478
+ socialProof,
1479
+ countdownMinutes,
1480
+ badge,
1481
+ comparisonRows = [],
1482
+ testimonials = [],
1483
+ creator,
1484
+ topSlot,
1485
+ footerSlot,
1486
+ trustBadges
1083
1487
  }) {
1084
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.YStack, { flex: 1, padding: "$4", gap: "$5", backgroundColor: "$background", children: [
1085
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.YStack, { gap: "$2", paddingTop: "$6", children: [
1086
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$9", fontWeight: "700", textAlign: "center", children: title }),
1087
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$4", color: "$color10", textAlign: "center", children: subtitle })
1088
- ] }),
1089
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.YStack, { gap: "$3", flex: 1, children: plans.map((plan) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
1488
+ const selected = selectedPlan ?? plans.find((p) => p.popular)?.id ?? plans[0]?.id;
1489
+ const countdown = useCountdown(countdownMinutes);
1490
+ const dark = variant === "immersive-dark";
1491
+ const bg = dark ? "$color1" : "$background";
1492
+ const tone = dark ? "$color12" : "$color11";
1493
+ const muted = "$color10";
1494
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { flex: 1, backgroundColor: bg, children: [
1495
+ 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" }) }) }),
1496
+ /* @__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: [
1497
+ topSlot,
1498
+ creator && variant === "creator-sheet" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CreatorHeader, { c: creator }) : null,
1499
+ hero && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { alignItems: "center", paddingVertical: "$3", children: hero }),
1500
+ 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 }) }) }),
1501
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.YStack, { gap: "$1.5", alignItems: "center", children: [
1502
+ eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", fontWeight: "700", color: "$color9", textTransform: "uppercase", children: eyebrow }) : null,
1503
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$9", fontWeight: "800", textAlign: "center", color: tone, children: title }),
1504
+ subtitle && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$4", color: muted, textAlign: "center", children: subtitle }),
1505
+ socialProof && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$3", color: "$color9", fontWeight: "600", textAlign: "center", paddingTop: "$1", children: socialProof })
1506
+ ] }),
1507
+ 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: [
1508
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$red9", fontWeight: "600", children: "Offer ends in" }),
1509
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$5", color: "$red9", fontWeight: "800", fontFamily: "$mono", children: countdown.display })
1510
+ ] }) : null,
1511
+ 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)) }),
1512
+ 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,
1513
+ 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: [
1514
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { alignItems: "center", children: [
1515
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { flex: 1, size: "$2", fontWeight: "700", color: muted, children: "Feature" }),
1516
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { width: 64, size: "$2", fontWeight: "700", textAlign: "center", color: muted, children: "Free" }),
1517
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { width: 84, size: "$2", fontWeight: "700", textAlign: "center", color: "$color9", children: "Premium" })
1518
+ ] }),
1519
+ comparisonRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { alignItems: "center", paddingVertical: "$1.5", children: [
1520
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { flex: 1, size: "$3", color: tone, children: row.label }),
1521
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.XStack, { width: 64, justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ComparisonIcon, { enabled: row.free }) }),
1522
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.XStack, { width: 84, justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ComparisonIcon, { enabled: row.premium }) })
1523
+ ] }, row.label))
1524
+ ] }) : null,
1525
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.YStack, { gap: "$3", children: plans.map((plan) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1526
+ PlanRow,
1527
+ {
1528
+ plan,
1529
+ selected: selected === plan.id,
1530
+ onPress: () => onSelectPlan?.(plan.id)
1531
+ },
1532
+ plan.id
1533
+ )) })
1534
+ ] }) }),
1535
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
1090
1536
  import_tamagui28.YStack,
1091
1537
  {
1538
+ position: "absolute",
1539
+ bottom: 0,
1540
+ left: 0,
1541
+ right: 0,
1092
1542
  padding: "$4",
1093
- borderRadius: "$5",
1094
- borderWidth: 2,
1095
- borderColor: selectedPlan === plan.id ? "$color9" : "$color4",
1096
- backgroundColor: selectedPlan === plan.id ? "$color2" : "$color1",
1097
- pressStyle: { scale: 0.98 },
1098
- onPress: () => onSelectPlan?.(plan.id),
1099
- cursor: "pointer",
1543
+ paddingBottom: "$6",
1544
+ backgroundColor: bg,
1545
+ borderTopWidth: 1,
1546
+ borderTopColor: "$color4",
1547
+ gap: "$2.5",
1100
1548
  children: [
1101
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.XStack, { justifyContent: "space-between", alignItems: "center", children: [
1102
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.YStack, { children: [
1103
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$5", fontWeight: "600", children: plan.name }),
1104
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.XStack, { alignItems: "baseline", gap: "$1", children: [
1105
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$8", fontWeight: "700", children: plan.price }),
1106
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.SizableText, { size: "$3", color: "$color9", children: [
1107
- "/",
1108
- plan.period
1109
- ] })
1110
- ] })
1111
- ] }),
1112
- plan.popular && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.YStack, { backgroundColor: "$color9", paddingHorizontal: "$2", paddingVertical: "$1", borderRadius: "$10", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$1", color: "$color1", fontWeight: "600", children: "POPULAR" }) })
1549
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1550
+ import_tamagui28.Button,
1551
+ {
1552
+ size: "$5",
1553
+ backgroundColor: "$color9",
1554
+ color: "$color1",
1555
+ onPress: onContinue,
1556
+ pressStyle: { backgroundColor: "$color8", scale: 0.98 },
1557
+ animation: "quick",
1558
+ borderRadius: "$10",
1559
+ fontWeight: "700",
1560
+ children: continueLabel
1561
+ }
1562
+ ),
1563
+ reassurance && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color9", textAlign: "center", children: reassurance }),
1564
+ /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui28.XStack, { justifyContent: "center", gap: "$3", children: [
1565
+ onRestore && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color8", onPress: onRestore, pressStyle: { opacity: 0.6 }, children: "Restore" }),
1566
+ onTerms && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color8", onPress: onTerms, pressStyle: { opacity: 0.6 }, children: "Terms" }),
1567
+ onPrivacy && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui28.SizableText, { size: "$2", color: "$color8", onPress: onPrivacy, pressStyle: { opacity: 0.6 }, children: "Privacy" })
1113
1568
  ] }),
1114
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.YStack, { gap: "$2", paddingTop: "$3", children: plan.features.map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.XStack, { gap: "$2", alignItems: "center", children: [
1115
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.Circle, { size: 6, backgroundColor: "$green9" }),
1116
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$3", color: "$color11", children: feature })
1117
- ] }, i)) })
1569
+ trustBadges && trustBadges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TrustBadges, { badges: trustBadges }),
1570
+ footerSlot
1118
1571
  ]
1119
- },
1120
- plan.id
1121
- )) }),
1122
- /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_tamagui28.YStack, { gap: "$3", paddingBottom: "$4", children: [
1123
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
1124
- import_tamagui28.Button,
1125
- {
1126
- size: "$5",
1127
- backgroundColor: "$color9",
1128
- color: "$color1",
1129
- onPress: onContinue,
1130
- hoverStyle: { backgroundColor: "$color10" },
1131
- pressStyle: { backgroundColor: "$color8" },
1132
- borderRadius: "$5",
1133
- children: continueLabel
1134
- }
1135
- ),
1136
- onRestore && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.Button, { size: "$3", chromeless: true, onPress: onRestore, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tamagui28.SizableText, { size: "$3", color: "$color9", children: "Restore Purchases" }) })
1137
- ] })
1572
+ }
1573
+ )
1138
1574
  ] });
1139
1575
  }
1140
1576
 
1141
1577
  // src/patterns/OnboardingCarousel.tsx
1142
- var import_react7 = require("react");
1578
+ var import_react8 = require("react");
1143
1579
  var import_tamagui29 = require("tamagui");
1144
- var import_jsx_runtime21 = require("react/jsx-runtime");
1580
+ var import_jsx_runtime22 = require("react/jsx-runtime");
1145
1581
  function OnboardingCarousel({
1146
1582
  steps,
1583
+ variant = "default",
1584
+ brand,
1585
+ topLeading,
1147
1586
  onComplete,
1148
1587
  onSkip,
1149
1588
  completeLabel = "Get Started",
1150
1589
  skipLabel = "Skip",
1151
- nextLabel = "Next"
1590
+ nextLabel = "Next",
1591
+ footerSlot
1152
1592
  }) {
1153
- const [current, setCurrent] = (0, import_react7.useState)(0);
1593
+ const [current, setCurrent] = (0, import_react8.useState)(0);
1594
+ if (steps.length === 0) {
1595
+ 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." }) });
1596
+ }
1154
1597
  const isLast = current === steps.length - 1;
1155
1598
  const step = steps[current];
1156
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui29.YStack, { flex: 1, backgroundColor: "$background", padding: "$4", justifyContent: "space-between", children: [
1157
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui29.XStack, { justifyContent: "flex-end", paddingTop: "$4", children: !isLast && onSkip && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui29.Button, { chromeless: true, onPress: onSkip, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui29.SizableText, { size: "$4", color: "$color9", children: skipLabel }) }) }),
1158
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui29.YStack, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$5", paddingHorizontal: "$4", children: [
1159
- step?.icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui29.Circle, { size: 120, backgroundColor: "$color2", alignItems: "center", justifyContent: "center", children: step.icon }),
1160
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui29.YStack, { gap: "$3", alignItems: "center", children: [
1161
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui29.SizableText, { size: "$9", fontWeight: "700", textAlign: "center", children: step?.title }),
1162
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui29.SizableText, { size: "$4", color: "$color10", textAlign: "center", maxWidth: 300, children: step?.description })
1599
+ const hero = step?.hero ?? step?.icon;
1600
+ const isEditorial = variant === "editorial";
1601
+ const isSelection = variant === "selection-step";
1602
+ const isPermission = variant === "permission-prompt";
1603
+ const topPadding = isEditorial ? "$6" : "$4";
1604
+ const titleSize = isEditorial ? "$10" : "$9";
1605
+ const backgroundColor = variant === "calm-gradient" ? "$color2" : "$background";
1606
+ const heroBackground = isPermission ? "$color3" : isSelection ? "$color1" : "$color2";
1607
+ const heroRadius = variant === "card-tilt" || isSelection ? "$8" : "$10";
1608
+ const buttonTone = variant === "editorial" ? "$color12" : "$color9";
1609
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_tamagui29.YStack, { flex: 1, backgroundColor, padding: "$4", justifyContent: "space-between", children: [
1610
+ 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,
1611
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_tamagui29.XStack, { justifyContent: "space-between", alignItems: "center", paddingTop: topPadding, children: [
1612
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.XStack, { minWidth: 40, children: topLeading }),
1613
+ 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 }),
1614
+ !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 }) })
1615
+ ] }),
1616
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_tamagui29.YStack, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$5", paddingHorizontal: "$4", children: [
1617
+ hero ? variant === "card-tilt" || isSelection ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1618
+ import_tamagui29.YStack,
1619
+ {
1620
+ width: "100%",
1621
+ maxWidth: 340,
1622
+ minHeight: 260,
1623
+ borderRadius: heroRadius,
1624
+ backgroundColor: heroBackground,
1625
+ padding: "$3",
1626
+ alignItems: "center",
1627
+ justifyContent: "center",
1628
+ borderWidth: variant === "card-tilt" ? 3 : 1,
1629
+ borderColor: "$color4",
1630
+ shadowColor: "$shadowColor",
1631
+ shadowOpacity: 0.14,
1632
+ shadowRadius: 18,
1633
+ shadowOffset: { width: 0, height: 10 },
1634
+ style: variant === "card-tilt" ? { transform: [{ rotate: "-5deg" }] } : void 0,
1635
+ children: hero
1636
+ }
1637
+ ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.Circle, { size: isPermission ? 140 : 120, backgroundColor: heroBackground, alignItems: "center", justifyContent: "center", children: hero }) : null,
1638
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_tamagui29.YStack, { gap: "$3", alignItems: "center", children: [
1639
+ step?.eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.SizableText, { size: "$2", color: "$color9", fontWeight: "700", textTransform: "uppercase", children: step.eyebrow }) : null,
1640
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.SizableText, { size: titleSize, fontWeight: "700", textAlign: "center", children: step?.title }),
1641
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.SizableText, { size: "$4", color: "$color10", textAlign: "center", maxWidth: 300, children: step?.description })
1163
1642
  ] })
1164
1643
  ] }),
1165
- /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_tamagui29.YStack, { gap: "$3", paddingBottom: "$2", children: [
1166
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_tamagui29.XStack, { justifyContent: "center", gap: "$2", children: steps.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1644
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_tamagui29.YStack, { gap: "$3", paddingBottom: "$2", children: [
1645
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui29.XStack, { justifyContent: "center", gap: "$2", children: steps.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1167
1646
  import_tamagui29.Circle,
1168
1647
  {
1169
- size: 8,
1648
+ size: variant === "card-tilt" ? 10 : 8,
1649
+ width: i === current && variant !== "default" ? 24 : void 0,
1170
1650
  backgroundColor: i === current ? "$color9" : "$color4",
1651
+ borderRadius: "$10",
1171
1652
  animation: "quick"
1172
1653
  },
1173
1654
  i
1174
1655
  )) }),
1175
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1656
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1176
1657
  import_tamagui29.Button,
1177
1658
  {
1178
1659
  size: "$5",
1179
- backgroundColor: "$color9",
1660
+ backgroundColor: buttonTone,
1180
1661
  color: "$color1",
1181
- borderRadius: "$5",
1182
- hoverStyle: { backgroundColor: "$color10" },
1662
+ borderRadius: variant === "editorial" ? "$10" : "$5",
1663
+ hoverStyle: { backgroundColor: variant === "editorial" ? "$color11" : "$color10" },
1183
1664
  pressStyle: { backgroundColor: "$color8" },
1184
1665
  onPress: () => isLast ? onComplete?.() : setCurrent((c) => c + 1),
1185
- children: isLast ? completeLabel : nextLabel
1666
+ children: isLast ? step?.ctaLabel ?? completeLabel : step?.ctaLabel ?? nextLabel
1186
1667
  }
1187
- )
1668
+ ),
1669
+ footerSlot
1188
1670
  ] })
1189
1671
  ] });
1190
1672
  }
1191
1673
 
1192
1674
  // src/patterns/ChatBubble.tsx
1193
1675
  var import_tamagui30 = require("tamagui");
1194
- var import_jsx_runtime22 = require("react/jsx-runtime");
1676
+ var import_jsx_runtime23 = require("react/jsx-runtime");
1195
1677
  function ChatBubble({ message, showAvatar = true }) {
1196
1678
  const isUser = message.sender === "user";
1197
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
1679
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
1198
1680
  import_tamagui30.XStack,
1199
1681
  {
1200
1682
  alignSelf: isUser ? "flex-end" : "flex-start",
@@ -1202,8 +1684,8 @@ function ChatBubble({ message, showAvatar = true }) {
1202
1684
  gap: "$2",
1203
1685
  flexDirection: isUser ? "row-reverse" : "row",
1204
1686
  children: [
1205
- showAvatar && !isUser && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui30.Circle, { size: 32, backgroundColor: "$color4", overflow: "hidden", children: message.avatar ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui30.Image, { source: { uri: message.avatar }, width: 32, height: 32, objectFit: "cover" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui30.SizableText, { size: "$2", fontWeight: "600", color: "$color11", children: message.senderName?.[0]?.toUpperCase() ?? "?" }) }),
1206
- /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
1687
+ 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() ?? "?" }) }),
1688
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
1207
1689
  import_tamagui30.YStack,
1208
1690
  {
1209
1691
  backgroundColor: isUser ? "$color9" : "$color3",
@@ -1214,8 +1696,8 @@ function ChatBubble({ message, showAvatar = true }) {
1214
1696
  borderBottomLeftRadius: isUser ? "$5" : "$2",
1215
1697
  gap: "$1",
1216
1698
  children: [
1217
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui30.SizableText, { size: "$3", color: isUser ? "$color1" : "$color12", children: message.text }),
1218
- message.timestamp && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_tamagui30.SizableText, { size: "$1", color: isUser ? "$color3" : "$color9", alignSelf: "flex-end", children: message.timestamp })
1699
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui30.SizableText, { size: "$3", color: isUser ? "$color1" : "$color12", children: message.text }),
1700
+ message.timestamp && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui30.SizableText, { size: "$1", color: isUser ? "$color3" : "$color9", alignSelf: "flex-end", children: message.timestamp })
1219
1701
  ]
1220
1702
  }
1221
1703
  )
@@ -1226,9 +1708,9 @@ function ChatBubble({ message, showAvatar = true }) {
1226
1708
 
1227
1709
  // src/patterns/SettingsScreen.tsx
1228
1710
  var import_tamagui31 = require("tamagui");
1229
- var import_jsx_runtime23 = require("react/jsx-runtime");
1711
+ var import_jsx_runtime24 = require("react/jsx-runtime");
1230
1712
  function SettingsItemRow({ item }) {
1231
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
1713
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
1232
1714
  import_tamagui31.XStack,
1233
1715
  {
1234
1716
  alignItems: "center",
@@ -1240,21 +1722,21 @@ function SettingsItemRow({ item }) {
1240
1722
  onPress: item.onPress,
1241
1723
  cursor: item.onPress ? "pointer" : void 0,
1242
1724
  children: [
1243
- item.icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui31.YStack, { width: 24, alignItems: "center", children: item.icon }),
1244
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_tamagui31.YStack, { flex: 1, gap: "$1", children: [
1245
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui31.SizableText, { size: "$4", fontWeight: "500", children: item.title }),
1246
- item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui31.SizableText, { size: "$2", color: "$color9", children: item.subtitle })
1725
+ item.icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.YStack, { width: 24, alignItems: "center", children: item.icon }),
1726
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_tamagui31.YStack, { flex: 1, gap: "$1", children: [
1727
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.SizableText, { size: "$4", fontWeight: "500", children: item.title }),
1728
+ item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.SizableText, { size: "$2", color: "$color9", children: item.subtitle })
1247
1729
  ] }),
1248
- item.type === "toggle" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui31.Switch, { size: "$3", checked: item.value, onCheckedChange: item.onValueChange, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui31.Switch.Thumb, { animation: "quick" }) }) : item.right ? item.right : item.onPress && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui31.SizableText, { size: "$5", color: "$color8", children: "\u203A" })
1730
+ 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" })
1249
1731
  ]
1250
1732
  }
1251
1733
  );
1252
1734
  }
1253
1735
  function SettingsScreen({ sections, header }) {
1254
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_tamagui31.YStack, { flex: 1, backgroundColor: "$background", children: [
1736
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_tamagui31.YStack, { flex: 1, backgroundColor: "$background", children: [
1255
1737
  header,
1256
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui31.YStack, { gap: "$4", paddingVertical: "$2", children: sections.map((section, si) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_tamagui31.YStack, { children: [
1257
- section.title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
1738
+ /* @__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: [
1739
+ section.title && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1258
1740
  import_tamagui31.SizableText,
1259
1741
  {
1260
1742
  size: "$2",
@@ -1266,9 +1748,9 @@ function SettingsScreen({ sections, header }) {
1266
1748
  children: section.title
1267
1749
  }
1268
1750
  ),
1269
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui31.YStack, { backgroundColor: "$color1", borderRadius: "$4", marginHorizontal: "$3", overflow: "hidden", children: section.items.map((item, ii) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_tamagui31.YStack, { children: [
1270
- /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SettingsItemRow, { item }),
1271
- ii < section.items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tamagui31.Separator, { borderColor: "$color3", marginLeft: "$12" })
1751
+ /* @__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: [
1752
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SettingsItemRow, { item }),
1753
+ ii < section.items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui31.Separator, { borderColor: "$color3", marginLeft: "$12" })
1272
1754
  ] }, item.id)) })
1273
1755
  ] }, si)) })
1274
1756
  ] });
@@ -1276,15 +1758,15 @@ function SettingsScreen({ sections, header }) {
1276
1758
 
1277
1759
  // src/patterns/EmptyState.tsx
1278
1760
  var import_tamagui32 = require("tamagui");
1279
- var import_jsx_runtime24 = require("react/jsx-runtime");
1761
+ var import_jsx_runtime25 = require("react/jsx-runtime");
1280
1762
  function EmptyState({ icon, title, description, actionLabel, onAction }) {
1281
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_tamagui32.YStack, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$4", padding: "$6", children: [
1763
+ return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_tamagui32.YStack, { flex: 1, alignItems: "center", justifyContent: "center", gap: "$4", padding: "$6", children: [
1282
1764
  icon,
1283
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_tamagui32.YStack, { gap: "$2", alignItems: "center", children: [
1284
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui32.SizableText, { size: "$6", fontWeight: "600", textAlign: "center", children: title }),
1285
- description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_tamagui32.SizableText, { size: "$4", color: "$color9", textAlign: "center", maxWidth: 280, children: description })
1765
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_tamagui32.YStack, { gap: "$2", alignItems: "center", children: [
1766
+ /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_tamagui32.SizableText, { size: "$6", fontWeight: "600", textAlign: "center", children: title }),
1767
+ description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_tamagui32.SizableText, { size: "$4", color: "$color9", textAlign: "center", maxWidth: 280, children: description })
1286
1768
  ] }),
1287
- actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1769
+ actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1288
1770
  import_tamagui32.Button,
1289
1771
  {
1290
1772
  size: "$4",
@@ -1302,17 +1784,17 @@ function EmptyState({ icon, title, description, actionLabel, onAction }) {
1302
1784
 
1303
1785
  // src/patterns/ProfileHeader.tsx
1304
1786
  var import_tamagui33 = require("tamagui");
1305
- var import_jsx_runtime25 = require("react/jsx-runtime");
1787
+ var import_jsx_runtime26 = require("react/jsx-runtime");
1306
1788
  function ProfileHeader({ name, subtitle, avatar, stats, actions }) {
1307
- return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_tamagui33.YStack, { alignItems: "center", gap: "$4", paddingVertical: "$6", paddingHorizontal: "$4", children: [
1308
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_tamagui33.Circle, { size: 80, backgroundColor: "$color4", overflow: "hidden", children: avatar ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_tamagui33.Image, { source: { uri: avatar }, width: 80, height: 80, objectFit: "cover" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_tamagui33.SizableText, { size: "$9", fontWeight: "700", color: "$color11", children: name[0]?.toUpperCase() ?? "?" }) }),
1309
- /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_tamagui33.YStack, { alignItems: "center", gap: "$1", children: [
1310
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_tamagui33.SizableText, { size: "$7", fontWeight: "700", children: name }),
1311
- subtitle && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_tamagui33.SizableText, { size: "$4", color: "$color10", children: subtitle })
1789
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_tamagui33.YStack, { alignItems: "center", gap: "$4", paddingVertical: "$6", paddingHorizontal: "$4", children: [
1790
+ /* @__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() ?? "?" }) }),
1791
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_tamagui33.YStack, { alignItems: "center", gap: "$1", children: [
1792
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.SizableText, { size: "$7", fontWeight: "700", children: name }),
1793
+ subtitle && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.SizableText, { size: "$4", color: "$color10", children: subtitle })
1312
1794
  ] }),
1313
- stats && stats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_tamagui33.XStack, { gap: "$6", children: stats.map((stat, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_tamagui33.YStack, { alignItems: "center", gap: "$1", children: [
1314
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_tamagui33.SizableText, { size: "$6", fontWeight: "700", children: stat.value }),
1315
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_tamagui33.SizableText, { size: "$2", color: "$color9", children: stat.label })
1795
+ 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: [
1796
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.SizableText, { size: "$6", fontWeight: "700", children: stat.value }),
1797
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui33.SizableText, { size: "$2", color: "$color9", children: stat.label })
1316
1798
  ] }, i)) }),
1317
1799
  actions
1318
1800
  ] });
@@ -1320,27 +1802,27 @@ function ProfileHeader({ name, subtitle, avatar, stats, actions }) {
1320
1802
 
1321
1803
  // src/patterns/AppHeader.tsx
1322
1804
  var import_tamagui34 = require("tamagui");
1323
- var import_jsx_runtime26 = require("react/jsx-runtime");
1805
+ var import_jsx_runtime27 = require("react/jsx-runtime");
1324
1806
  function AppHeader({ title, subtitle, variant = "simple", onBack, avatar, left, right, transparent, borderless }) {
1325
1807
  const leftContent = (() => {
1326
- if (variant === "back") return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui34.SizableText, { size: "$6", paddingRight: "$2", onPress: onBack, pressStyle: { opacity: 0.6 }, cursor: "pointer", children: "\u2039" });
1327
- if (variant === "profile") return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Avatar, { uri: avatar, name: title, size: "sm" });
1808
+ 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" });
1809
+ if (variant === "profile") return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Avatar, { uri: avatar, name: title, size: "sm" });
1328
1810
  if (variant === "centered") return left ?? null;
1329
1811
  return null;
1330
1812
  })();
1331
1813
  const rightContent = variant === "profile" || variant === "centered" ? right ?? null : null;
1332
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
1814
+ return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1333
1815
  import_tamagui34.YStack,
1334
1816
  {
1335
1817
  paddingTop: "$6",
1336
1818
  backgroundColor: transparent ? "transparent" : "$background",
1337
1819
  borderBottomWidth: borderless ? 0 : 1,
1338
1820
  borderBottomColor: "$borderColor",
1339
- children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_tamagui34.XStack, { height: 56, alignItems: "center", paddingHorizontal: "$4", gap: "$3", children: [
1821
+ children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_tamagui34.XStack, { height: 56, alignItems: "center", paddingHorizontal: "$4", gap: "$3", children: [
1340
1822
  leftContent,
1341
- /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_tamagui34.YStack, { flex: 1, alignItems: variant === "centered" ? "center" : "flex-start", children: [
1342
- /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui34.SizableText, { size: "$6", fontWeight: "700", numberOfLines: 1, children: title }),
1343
- subtitle && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_tamagui34.SizableText, { size: "$2", color: "$color9", numberOfLines: 1, children: subtitle })
1823
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_tamagui34.YStack, { flex: 1, alignItems: variant === "centered" ? "center" : "flex-start", children: [
1824
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tamagui34.SizableText, { size: "$6", fontWeight: "700", numberOfLines: 1, children: title }),
1825
+ subtitle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tamagui34.SizableText, { size: "$2", color: "$color9", numberOfLines: 1, children: subtitle })
1344
1826
  ] }),
1345
1827
  rightContent
1346
1828
  ] })
@@ -1351,105 +1833,181 @@ function AppHeader({ title, subtitle, variant = "simple", onBack, avatar, left,
1351
1833
  // src/patterns/BottomSheet.tsx
1352
1834
  var import_tamagui35 = require("tamagui");
1353
1835
  var import_react_native2 = require("react-native");
1354
- var import_jsx_runtime27 = require("react/jsx-runtime");
1355
- function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], dismissOnSnapToBottom = true, showHandle = true, showClose = false }) {
1356
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_tamagui35.Sheet, { modal: true, open, onOpenChange, snapPoints, dismissOnSnapToBottom, animation: "medium", children: [
1357
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tamagui35.Sheet.Overlay, { animation: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }),
1358
- showHandle && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tamagui35.Sheet.Handle, {}),
1359
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_tamagui35.Sheet.Frame, { borderTopLeftRadius: "$6", borderTopRightRadius: "$6", backgroundColor: "$background", children: [
1360
- (title || showClose) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_tamagui35.XStack, { paddingHorizontal: "$4", paddingTop: "$3", paddingBottom: "$2", alignItems: "center", justifyContent: "space-between", children: [
1361
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tamagui35.SizableText, { size: "$6", fontWeight: "600", flexShrink: 1, children: title }),
1362
- showClose && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1363
- import_tamagui35.XStack,
1364
- {
1365
- width: 28,
1366
- height: 28,
1367
- borderRadius: "$10",
1368
- backgroundColor: "$color4",
1369
- alignItems: "center",
1370
- justifyContent: "center",
1371
- pressStyle: { opacity: 0.7 },
1372
- onPress: () => onOpenChange(false),
1373
- children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tamagui35.SizableText, { size: "$3", color: "$color10", fontWeight: "600", children: "\u2715" })
1374
- }
1375
- )
1376
- ] }),
1377
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native2.ScrollView, { contentContainerStyle: { paddingBottom: 40 }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tamagui35.YStack, { padding: "$4", children }) })
1378
- ] })
1379
- ] });
1836
+ var import_jsx_runtime28 = require("react/jsx-runtime");
1837
+ function BottomSheet({ open, onOpenChange, title, children, snapPoints = [85], dismissOnSnapToBottom = true, showHandle = true, showClose = false, zIndex = 1e5 }) {
1838
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
1839
+ import_tamagui35.Sheet,
1840
+ {
1841
+ modal: true,
1842
+ forceRemoveScrollEnabled: open,
1843
+ open,
1844
+ onOpenChange,
1845
+ snapPoints,
1846
+ dismissOnSnapToBottom,
1847
+ zIndex,
1848
+ animation: "medium",
1849
+ children: [
1850
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui35.Sheet.Overlay, { animation: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }),
1851
+ showHandle && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui35.Sheet.Handle, {}),
1852
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui35.Sheet.Frame, { children: [
1853
+ (title || showClose) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui35.XStack, { paddingHorizontal: "$4", paddingTop: "$3", paddingBottom: "$2", alignItems: "center", justifyContent: "space-between", children: [
1854
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui35.SizableText, { size: "$6", fontWeight: "600", flexShrink: 1, children: title }),
1855
+ showClose && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1856
+ import_tamagui35.XStack,
1857
+ {
1858
+ width: 28,
1859
+ height: 28,
1860
+ borderRadius: "$10",
1861
+ backgroundColor: "$color4",
1862
+ alignItems: "center",
1863
+ justifyContent: "center",
1864
+ pressStyle: { opacity: 0.7 },
1865
+ onPress: () => onOpenChange(false),
1866
+ children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui35.SizableText, { size: "$3", color: "$color10", fontWeight: "600", children: "\u2715" })
1867
+ }
1868
+ )
1869
+ ] }),
1870
+ /* @__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 }) })
1871
+ ] })
1872
+ ]
1873
+ }
1874
+ );
1380
1875
  }
1381
1876
 
1382
1877
  // src/patterns/LoginScreen.tsx
1383
- var import_react8 = require("react");
1878
+ var import_react9 = require("react");
1384
1879
  var import_tamagui36 = require("tamagui");
1385
- var import_jsx_runtime28 = require("react/jsx-runtime");
1386
- function LoginScreen({ title = "Welcome", subtitle = "Sign in to continue", logo, providers = [], onProviderPress, showEmailForm, onEmailSubmit, onForgotPassword, onCreateAccount, onTerms, onPrivacy, loading }) {
1387
- const [email, setEmail] = (0, import_react8.useState)("");
1388
- const [password, setPassword] = (0, import_react8.useState)("");
1389
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.YStack, { flex: 1, padding: "$4", gap: "$5", backgroundColor: "$background", justifyContent: "center", children: [
1390
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.YStack, { alignItems: "center", gap: "$2", children: [
1391
- logo && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.YStack, { paddingBottom: "$3", children: logo }),
1392
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { size: "$9", fontWeight: "700", textAlign: "center", children: title }),
1393
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { size: "$4", color: "$color10", textAlign: "center", children: subtitle })
1394
- ] }),
1395
- providers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.YStack, { gap: "$2.5", children: providers.map((p) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1396
- import_tamagui36.Button,
1880
+ var import_jsx_runtime29 = require("react/jsx-runtime");
1881
+ var BRAND_ICON_MAP = {
1882
+ google: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(GoogleLogo, { size }),
1883
+ apple: ({ size, color }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AppleLogo, { size, color }),
1884
+ github: ({ size, color }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(GitHubLogo, { size, color }),
1885
+ microsoft: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MicrosoftLogo, { size }),
1886
+ 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" }) })
1887
+ };
1888
+ var BRAND_STYLES = {
1889
+ google: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" },
1890
+ apple: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1" },
1891
+ github: { backgroundColor: "$color12", borderColor: "$color12", textColor: "$color1" },
1892
+ microsoft: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" },
1893
+ custom: { backgroundColor: "$color1", borderColor: "$color5", textColor: "$color12" }
1894
+ };
1895
+ function ProviderBadge({ provider }) {
1896
+ const brand = provider.brand ?? "custom";
1897
+ if (provider.icon) return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: provider.icon });
1898
+ const renderIcon = BRAND_ICON_MAP[brand];
1899
+ const iconColor = brand === "apple" || brand === "github" ? "#fff" : void 0;
1900
+ return renderIcon({ size: 20, color: iconColor });
1901
+ }
1902
+ function LoginScreen({
1903
+ variant = "default",
1904
+ title = "Welcome",
1905
+ subtitle = "Sign in to continue",
1906
+ logo,
1907
+ providers = [],
1908
+ hero,
1909
+ backgroundSlot,
1910
+ footerSlot,
1911
+ providerButtonStyle = "brand",
1912
+ onProviderPress,
1913
+ showEmailForm,
1914
+ onEmailSubmit,
1915
+ onForgotPassword,
1916
+ onCreateAccount,
1917
+ onTerms,
1918
+ onPrivacy,
1919
+ loading
1920
+ }) {
1921
+ const [email, setEmail] = (0, import_react9.useState)("");
1922
+ const [password, setPassword] = (0, import_react9.useState)("");
1923
+ const isEditorial = variant === "editorial";
1924
+ const isCenteredCard = variant === "centered-card";
1925
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.YStack, { flex: 1, padding: "$4", gap: "$5", backgroundColor: "$background", justifyContent: "center", children: [
1926
+ backgroundSlot ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.YStack, { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, children: backgroundSlot }) : null,
1927
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
1928
+ import_tamagui36.YStack,
1397
1929
  {
1398
- size: "$5",
1399
- borderWidth: 1.5,
1400
- borderColor: "$color5",
1401
- backgroundColor: "$color1",
1402
- borderRadius: "$4",
1403
- disabled: loading,
1404
- onPress: () => onProviderPress?.(p.id),
1405
- hoverStyle: { backgroundColor: "$color2" },
1406
- pressStyle: { backgroundColor: "$color3" },
1407
- children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.XStack, { alignItems: "center", gap: "$2", children: [
1408
- p.icon,
1409
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { size: "$4", fontWeight: "500", children: p.name })
1410
- ] })
1411
- },
1412
- p.id
1413
- )) }),
1414
- showEmailForm && providers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Divider, { label: "or" }),
1415
- showEmailForm && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.YStack, { gap: "$3", children: [
1416
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Input, { label: "Email", placeholder: "your@email.com", value: email, onChangeText: setEmail, keyboardType: "email-address", autoCapitalize: "none" }),
1417
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Input, { label: "Password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: password, onChangeText: setPassword, secureTextEntry: true }),
1418
- onForgotPassword && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.XStack, { justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { size: "$3", color: "$color9", onPress: onForgotPassword, children: "Forgot password?" }) }),
1419
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1420
- import_tamagui36.Button,
1421
- {
1422
- size: "$5",
1423
- backgroundColor: "$color9",
1424
- color: "$color1",
1425
- borderRadius: "$5",
1426
- disabled: loading,
1427
- onPress: () => onEmailSubmit?.(email, password),
1428
- hoverStyle: { backgroundColor: "$color10" },
1429
- pressStyle: { backgroundColor: "$color8" },
1430
- icon: loading ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.Spinner, { size: "small", color: "$color1" }) : void 0,
1431
- children: "Sign In"
1432
- }
1433
- ),
1434
- onCreateAccount && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.Button, { size: "$3", chromeless: true, onPress: onCreateAccount, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { size: "$3", color: "$color9", children: "Create Account" }) })
1435
- ] }),
1436
- (onTerms || onPrivacy) && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.YStack, { paddingTop: "$2", alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_tamagui36.SizableText, { size: "$2", color: "$color8", textAlign: "center", children: [
1437
- "By continuing you agree to our",
1438
- " ",
1439
- onTerms && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { size: "$2", color: "$color9", onPress: onTerms, children: "Terms of Service" }),
1440
- onTerms && onPrivacy && " & ",
1441
- onPrivacy && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_tamagui36.SizableText, { size: "$2", color: "$color9", onPress: onPrivacy, children: "Privacy Policy" })
1442
- ] }) })
1930
+ gap: "$5",
1931
+ backgroundColor: isCenteredCard ? "$color1" : "transparent",
1932
+ borderRadius: isCenteredCard ? "$7" : void 0,
1933
+ padding: isCenteredCard ? "$4" : void 0,
1934
+ borderWidth: isCenteredCard ? 1 : 0,
1935
+ borderColor: isCenteredCard ? "$color4" : void 0,
1936
+ children: [
1937
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.YStack, { alignItems: "center", gap: "$2", children: [
1938
+ logo && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.YStack, { paddingBottom: "$3", children: logo }),
1939
+ hero ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.YStack, { paddingBottom: "$2", children: hero }) : null,
1940
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: isEditorial ? "$10" : "$9", fontWeight: "700", textAlign: "center", fontFamily: isEditorial ? "$heading" : void 0, children: title }),
1941
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$4", color: "$color10", textAlign: "center", children: subtitle })
1942
+ ] }),
1943
+ 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)(
1944
+ import_tamagui36.Button,
1945
+ {
1946
+ size: "$5",
1947
+ borderWidth: 1.5,
1948
+ borderColor: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].borderColor : "$color5",
1949
+ backgroundColor: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].backgroundColor : "$color1",
1950
+ borderRadius: isEditorial ? "$6" : "$4",
1951
+ disabled: loading,
1952
+ onPress: () => onProviderPress?.(p.id),
1953
+ hoverStyle: { backgroundColor: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].backgroundColor : "$color2" },
1954
+ pressStyle: { backgroundColor: "$color3" },
1955
+ children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.XStack, { alignItems: "center", justifyContent: "space-between", width: "100%", gap: "$2", children: [
1956
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.XStack, { alignItems: "center", gap: "$2.5", children: [
1957
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ProviderBadge, { provider: p }),
1958
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.YStack, { alignItems: "flex-start", children: [
1959
+ /* @__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 }),
1960
+ p.description ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$2", color: "$color10", children: p.description }) : null
1961
+ ] })
1962
+ ] }),
1963
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$4", color: providerButtonStyle === "brand" ? BRAND_STYLES[p.brand ?? "custom"].textColor : "$color9", children: "\u2192" })
1964
+ ] })
1965
+ },
1966
+ p.id
1967
+ )) }),
1968
+ showEmailForm && providers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Divider, { label: "or" }),
1969
+ showEmailForm && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_tamagui36.YStack, { gap: "$3", children: [
1970
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Input, { label: "Email", placeholder: "your@email.com", value: email, onChangeText: setEmail, keyboardType: "email-address", autoCapitalize: "none" }),
1971
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Input, { label: "Password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", value: password, onChangeText: setPassword, secureTextEntry: true }),
1972
+ 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?" }) }),
1973
+ /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
1974
+ import_tamagui36.Button,
1975
+ {
1976
+ size: "$5",
1977
+ backgroundColor: "$color9",
1978
+ color: "$color1",
1979
+ borderRadius: "$5",
1980
+ disabled: loading,
1981
+ onPress: () => onEmailSubmit?.(email, password),
1982
+ hoverStyle: { backgroundColor: "$color10" },
1983
+ pressStyle: { backgroundColor: "$color8" },
1984
+ icon: loading ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.Spinner, { size: "small", color: "$color1" }) : void 0,
1985
+ children: "Sign In"
1986
+ }
1987
+ ),
1988
+ 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" }) })
1989
+ ] }),
1990
+ (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: [
1991
+ "By continuing you agree to our",
1992
+ " ",
1993
+ onTerms && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$2", color: "$color9", onPress: onTerms, children: "Terms of Service" }),
1994
+ onTerms && onPrivacy && " & ",
1995
+ onPrivacy && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui36.SizableText, { size: "$2", color: "$color9", onPress: onPrivacy, children: "Privacy Policy" })
1996
+ ] }) }),
1997
+ footerSlot
1998
+ ]
1999
+ }
2000
+ )
1443
2001
  ] });
1444
2002
  }
1445
2003
 
1446
2004
  // src/patterns/TabBar.tsx
1447
2005
  var import_tamagui37 = require("tamagui");
1448
- var import_jsx_runtime29 = require("react/jsx-runtime");
2006
+ var import_jsx_runtime30 = require("react/jsx-runtime");
1449
2007
  function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
1450
- return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui37.XStack, { height: 56, borderTopWidth: 1, borderTopColor: "$borderColor", backgroundColor: "$background", paddingBottom: "$2", children: tabs.map((tab) => {
2008
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_tamagui37.XStack, { height: 56, borderTopWidth: 1, borderTopColor: "$borderColor", backgroundColor: "$background", paddingBottom: "$2", children: tabs.map((tab) => {
1451
2009
  const active = tab.id === activeTab;
1452
- return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
2010
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
1453
2011
  import_tamagui37.YStack,
1454
2012
  {
1455
2013
  flex: 1,
@@ -1459,8 +2017,8 @@ function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
1459
2017
  pressStyle: { opacity: 0.6 },
1460
2018
  onPress: () => onTabPress(tab.id),
1461
2019
  children: [
1462
- tab.icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui37.SizableText, { size: "$5", color: active ? "$color9" : "$color8", children: tab.icon }),
1463
- showLabels && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tamagui37.SizableText, { size: "$1", color: active ? "$color9" : "$color8", fontWeight: active ? "600" : "400", children: tab.label })
2020
+ tab.icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_tamagui37.SizableText, { size: "$5", color: active ? "$color9" : "$color8", children: tab.icon }),
2021
+ showLabels && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_tamagui37.SizableText, { size: "$1", color: active ? "$color9" : "$color8", fontWeight: active ? "600" : "400", children: tab.label })
1464
2022
  ]
1465
2023
  },
1466
2024
  tab.id
@@ -1470,11 +2028,11 @@ function TabBar({ tabs, activeTab, onTabPress, showLabels = true }) {
1470
2028
 
1471
2029
  // src/patterns/SearchBar.tsx
1472
2030
  var import_tamagui38 = require("tamagui");
1473
- var import_jsx_runtime30 = require("react/jsx-runtime");
2031
+ var import_jsx_runtime31 = require("react/jsx-runtime");
1474
2032
  function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter, onCancel, autoFocus }) {
1475
- return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_tamagui38.XStack, { height: 44, borderRadius: "$10", backgroundColor: "$color2", alignItems: "center", paddingHorizontal: "$3", gap: "$2", children: [
1476
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_tamagui38.SizableText, { size: "$4", color: "$color8", children: "\u2315" }),
1477
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
2033
+ return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_tamagui38.XStack, { height: 44, borderRadius: "$10", backgroundColor: "$color2", alignItems: "center", paddingHorizontal: "$3", gap: "$2", children: [
2034
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_tamagui38.SizableText, { size: "$4", color: "$color8", children: "\u2315" }),
2035
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
1478
2036
  import_tamagui38.Input,
1479
2037
  {
1480
2038
  flex: 1,
@@ -1488,14 +2046,14 @@ function SearchBar({ value, onChangeText, placeholder = "Search\u2026", onFilter
1488
2046
  autoFocus
1489
2047
  }
1490
2048
  ),
1491
- onFilter && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_tamagui38.SizableText, { size: "$4", color: "$color9", pressStyle: { opacity: 0.6 }, onPress: onFilter, children: "\u2ACF" }),
1492
- onCancel && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_tamagui38.SizableText, { size: "$3", color: "$color9", pressStyle: { opacity: 0.6 }, onPress: onCancel, children: "Cancel" })
2049
+ onFilter && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_tamagui38.SizableText, { size: "$4", color: "$color9", pressStyle: { opacity: 0.6 }, onPress: onFilter, children: "\u2ACF" }),
2050
+ onCancel && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_tamagui38.SizableText, { size: "$3", color: "$color9", pressStyle: { opacity: 0.6 }, onPress: onCancel, children: "Cancel" })
1493
2051
  ] });
1494
2052
  }
1495
2053
 
1496
2054
  // src/patterns/FloatingActionButton.tsx
1497
2055
  var import_tamagui39 = require("tamagui");
1498
- var import_jsx_runtime31 = require("react/jsx-runtime");
2056
+ var import_jsx_runtime32 = require("react/jsx-runtime");
1499
2057
  var sizes = { sm: 44, md: 56, lg: 68 };
1500
2058
  var positionStyles = {
1501
2059
  "bottom-right": { right: 20 },
@@ -1504,7 +2062,7 @@ var positionStyles = {
1504
2062
  };
1505
2063
  function FloatingActionButton({ icon, label, onPress, position = "bottom-right", size = "md" }) {
1506
2064
  const dim = sizes[size];
1507
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
2065
+ return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
1508
2066
  import_tamagui39.XStack,
1509
2067
  {
1510
2068
  position: "absolute",
@@ -1522,8 +2080,8 @@ function FloatingActionButton({ icon, label, onPress, position = "bottom-right",
1522
2080
  pressStyle: { scale: 0.95, opacity: 0.9 },
1523
2081
  onPress,
1524
2082
  children: [
1525
- icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_tamagui39.SizableText, { color: "$color1", children: icon }),
1526
- label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_tamagui39.SizableText, { color: "$color1", size: "$4", fontWeight: "600", children: label })
2083
+ icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_tamagui39.SizableText, { color: "$color1", children: icon }),
2084
+ label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_tamagui39.SizableText, { color: "$color1", size: "$4", fontWeight: "600", children: label })
1527
2085
  ]
1528
2086
  }
1529
2087
  );
@@ -1531,72 +2089,85 @@ function FloatingActionButton({ icon, label, onPress, position = "bottom-right",
1531
2089
 
1532
2090
  // src/patterns/ActionSheet.tsx
1533
2091
  var import_tamagui40 = require("tamagui");
1534
- var import_jsx_runtime32 = require("react/jsx-runtime");
1535
- function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel = "Cancel" }) {
1536
- return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_tamagui40.Sheet, { modal: true, open, onOpenChange, snapPoints: [50], dismissOnSnapToBottom: true, animation: "medium", children: [
1537
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_tamagui40.Sheet.Overlay, { animation: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }),
1538
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_tamagui40.Sheet.Handle, {}),
1539
- /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_tamagui40.Sheet.Frame, { borderTopLeftRadius: "$6", borderTopRightRadius: "$6", backgroundColor: "$background", children: [
1540
- title && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_tamagui40.SizableText, { size: "$3", color: "$color8", textAlign: "center", paddingTop: "$3", paddingBottom: "$1", children: title }),
1541
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_tamagui40.YStack, { paddingHorizontal: "$3", paddingTop: "$2", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
1542
- import_tamagui40.XStack,
1543
- {
1544
- height: 52,
1545
- alignItems: "center",
1546
- gap: "$3",
1547
- paddingHorizontal: "$3",
1548
- borderRadius: "$4",
1549
- pressStyle: { backgroundColor: "$color3" },
1550
- onPress: () => {
1551
- onSelect(item.id);
1552
- onOpenChange(false);
1553
- },
1554
- children: [
1555
- item.icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_tamagui40.SizableText, { size: "$5", children: item.icon }),
1556
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
1557
- import_tamagui40.SizableText,
1558
- {
1559
- size: "$5",
1560
- flex: 1,
1561
- color: item.destructive ? "$red9" : "$color12",
1562
- fontWeight: item.destructive ? "600" : "400",
1563
- children: item.label
1564
- }
1565
- )
1566
- ]
1567
- },
1568
- item.id
1569
- )) }),
1570
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_tamagui40.YStack, { paddingHorizontal: "$3", paddingVertical: "$3", borderTopWidth: 1, borderTopColor: "$borderColor", marginTop: "$2", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
1571
- import_tamagui40.XStack,
1572
- {
1573
- height: 48,
1574
- alignItems: "center",
1575
- justifyContent: "center",
1576
- borderRadius: "$4",
1577
- pressStyle: { backgroundColor: "$color3" },
1578
- onPress: () => onOpenChange(false),
1579
- children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_tamagui40.SizableText, { size: "$5", fontWeight: "600", color: "$color9", children: cancelLabel })
1580
- }
1581
- ) })
1582
- ] })
1583
- ] });
2092
+ var import_jsx_runtime33 = require("react/jsx-runtime");
2093
+ function ActionSheet({ open, onOpenChange, title, items, onSelect, cancelLabel = "Cancel", zIndex = 1e5 }) {
2094
+ return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
2095
+ import_tamagui40.Sheet,
2096
+ {
2097
+ modal: true,
2098
+ forceRemoveScrollEnabled: open,
2099
+ open,
2100
+ onOpenChange,
2101
+ snapPoints: [50],
2102
+ dismissOnSnapToBottom: true,
2103
+ zIndex,
2104
+ animation: "medium",
2105
+ children: [
2106
+ /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.Sheet.Overlay, { animation: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }),
2107
+ /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.Sheet.Handle, {}),
2108
+ /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_tamagui40.Sheet.Frame, { children: [
2109
+ title && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.SizableText, { size: "$3", color: "$color8", textAlign: "center", paddingTop: "$3", paddingBottom: "$1", children: title }),
2110
+ /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.YStack, { paddingHorizontal: "$3", paddingTop: "$2", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
2111
+ import_tamagui40.XStack,
2112
+ {
2113
+ height: 52,
2114
+ alignItems: "center",
2115
+ gap: "$3",
2116
+ paddingHorizontal: "$3",
2117
+ borderRadius: "$4",
2118
+ pressStyle: { backgroundColor: "$color3" },
2119
+ onPress: () => {
2120
+ onSelect(item.id);
2121
+ onOpenChange(false);
2122
+ },
2123
+ children: [
2124
+ item.icon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.SizableText, { size: "$5", children: item.icon }),
2125
+ /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
2126
+ import_tamagui40.SizableText,
2127
+ {
2128
+ size: "$5",
2129
+ flex: 1,
2130
+ color: item.destructive ? "$red9" : "$color12",
2131
+ fontWeight: item.destructive ? "600" : "400",
2132
+ children: item.label
2133
+ }
2134
+ )
2135
+ ]
2136
+ },
2137
+ item.id
2138
+ )) }),
2139
+ /* @__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)(
2140
+ import_tamagui40.XStack,
2141
+ {
2142
+ height: 48,
2143
+ alignItems: "center",
2144
+ justifyContent: "center",
2145
+ borderRadius: "$4",
2146
+ pressStyle: { backgroundColor: "$color3" },
2147
+ onPress: () => onOpenChange(false),
2148
+ children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_tamagui40.SizableText, { size: "$5", fontWeight: "600", color: "$color9", children: cancelLabel })
2149
+ }
2150
+ ) })
2151
+ ] })
2152
+ ]
2153
+ }
2154
+ );
1584
2155
  }
1585
2156
 
1586
2157
  // src/patterns/Skeleton.tsx
1587
2158
  var import_tamagui41 = require("tamagui");
1588
- var import_jsx_runtime33 = require("react/jsx-runtime");
2159
+ var import_jsx_runtime34 = require("react/jsx-runtime");
1589
2160
  function Skeleton({ width, height, borderRadius, variant = "rectangular" }) {
1590
2161
  const size = variant === "circular" ? height ?? 40 : height;
1591
2162
  const w = variant === "text" ? width ?? "100%" : width;
1592
2163
  const h = variant === "text" ? height ?? 16 : size;
1593
2164
  const r = variant === "circular" ? 9999 : borderRadius ?? 8;
1594
- return /* @__PURE__ */ (0, import_jsx_runtime33.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 } });
2165
+ 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 } });
1595
2166
  }
1596
2167
 
1597
2168
  // src/patterns/NotificationBanner.tsx
1598
2169
  var import_tamagui42 = require("tamagui");
1599
- var import_jsx_runtime34 = require("react/jsx-runtime");
2170
+ var import_jsx_runtime35 = require("react/jsx-runtime");
1600
2171
  var variantColors = {
1601
2172
  info: { bg: "$blue3", text: "$blue11" },
1602
2173
  success: { bg: "$green3", text: "$green11" },
@@ -1605,7 +2176,7 @@ var variantColors = {
1605
2176
  };
1606
2177
  function NotificationBanner({ title, message, variant = "info", onPress, onDismiss, icon }) {
1607
2178
  const colors = variantColors[variant];
1608
- return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
2179
+ return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
1609
2180
  import_tamagui42.XStack,
1610
2181
  {
1611
2182
  backgroundColor: colors.bg,
@@ -1616,12 +2187,12 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
1616
2187
  onPress,
1617
2188
  pressStyle: onPress ? { opacity: 0.8 } : void 0,
1618
2189
  children: [
1619
- icon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_tamagui42.YStack, { paddingTop: "$0.5", children: icon }),
1620
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_tamagui42.YStack, { flex: 1, gap: "$1", children: [
1621
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_tamagui42.SizableText, { size: "$4", fontWeight: "600", color: colors.text, children: title }),
1622
- message && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_tamagui42.SizableText, { size: "$3", color: colors.text, opacity: 0.8, children: message })
2190
+ icon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui42.YStack, { paddingTop: "$0.5", children: icon }),
2191
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_tamagui42.YStack, { flex: 1, gap: "$1", children: [
2192
+ /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui42.SizableText, { size: "$4", fontWeight: "600", color: colors.text, children: title }),
2193
+ message && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui42.SizableText, { size: "$3", color: colors.text, opacity: 0.8, children: message })
1623
2194
  ] }),
1624
- onDismiss && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_tamagui42.SizableText, { size: "$3", color: colors.text, opacity: 0.6, onPress: onDismiss, padding: "$1", children: "\u2715" })
2195
+ onDismiss && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui42.SizableText, { size: "$3", color: colors.text, opacity: 0.6, onPress: onDismiss, padding: "$1", children: "\u2715" })
1625
2196
  ]
1626
2197
  }
1627
2198
  );
@@ -1629,35 +2200,35 @@ function NotificationBanner({ title, message, variant = "info", onPress, onDismi
1629
2200
 
1630
2201
  // src/patterns/ProgressSteps.tsx
1631
2202
  var import_tamagui43 = require("tamagui");
1632
- var import_jsx_runtime35 = require("react/jsx-runtime");
2203
+ var import_jsx_runtime36 = require("react/jsx-runtime");
1633
2204
  function ProgressSteps({ steps, currentStep, variant = "dots" }) {
1634
2205
  if (variant === "bar") {
1635
2206
  const progress = steps.length > 1 ? currentStep / (steps.length - 1) * 100 : 100;
1636
- return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_tamagui43.YStack, { gap: "$2", children: [
1637
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui43.YStack, { height: 4, backgroundColor: "$color4", borderRadius: 2, overflow: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui43.YStack, { height: 4, width: `${progress}%`, backgroundColor: "$color9", borderRadius: 2, animation: "quick" }) }),
1638
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui43.XStack, { justifyContent: "space-between", children: steps.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui43.SizableText, { size: "$2", color: i <= currentStep ? "$color9" : "$color8", children: label }, i)) })
2207
+ return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_tamagui43.YStack, { gap: "$2", children: [
2208
+ /* @__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" }) }),
2209
+ /* @__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)) })
1639
2210
  ] });
1640
2211
  }
1641
- return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui43.XStack, { alignItems: "center", justifyContent: "center", gap: "$0", children: steps.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_tamagui43.XStack, { alignItems: "center", gap: "$0", children: [
1642
- /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_tamagui43.YStack, { alignItems: "center", gap: "$1.5", children: [
1643
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui43.Circle, { size: variant === "numbered" ? 28 : 10, backgroundColor: i <= currentStep ? "$color9" : "$color4", animation: "quick", children: variant === "numbered" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui43.SizableText, { size: "$2", fontWeight: "600", color: i <= currentStep ? "$color1" : "$color8", children: i + 1 }) }),
1644
- /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui43.SizableText, { size: "$1", color: i <= currentStep ? "$color11" : "$color8", numberOfLines: 1, children: label })
2212
+ 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: [
2213
+ /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_tamagui43.YStack, { alignItems: "center", gap: "$1.5", children: [
2214
+ /* @__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 }) }),
2215
+ /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.SizableText, { size: "$1", color: i <= currentStep ? "$color11" : "$color8", numberOfLines: 1, children: label })
1645
2216
  ] }),
1646
- i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_tamagui43.YStack, { height: 2, width: 32, backgroundColor: i < currentStep ? "$color9" : "$color4", marginBottom: "$4" })
2217
+ i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui43.YStack, { height: 2, width: 32, backgroundColor: i < currentStep ? "$color9" : "$color4", marginBottom: "$4" })
1647
2218
  ] }, i)) });
1648
2219
  }
1649
2220
 
1650
2221
  // src/patterns/SwipeableRow.tsx
1651
- var import_react9 = require("react");
2222
+ var import_react10 = require("react");
1652
2223
  var import_tamagui44 = require("tamagui");
1653
- var import_jsx_runtime36 = require("react/jsx-runtime");
2224
+ var import_jsx_runtime37 = require("react/jsx-runtime");
1654
2225
  function SwipeableRow({ children, leftActions, rightActions }) {
1655
- const [showActions, setShowActions] = (0, import_react9.useState)(false);
2226
+ const [showActions, setShowActions] = (0, import_react10.useState)(false);
1656
2227
  const actions = [...leftActions ?? [], ...rightActions ?? []];
1657
- if (actions.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children });
1658
- return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_tamagui44.YStack, { children: [
1659
- /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui44.YStack, { onLongPress: () => setShowActions((v) => !v), pressStyle: { opacity: 0.9 }, children }),
1660
- showActions && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui44.XStack, { gap: "$2", padding: "$2", animation: "quick", enterStyle: { opacity: 0, scale: 0.95 }, children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
2228
+ if (actions.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
2229
+ return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_tamagui44.YStack, { children: [
2230
+ /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_tamagui44.YStack, { onLongPress: () => setShowActions((v) => !v), pressStyle: { opacity: 0.9 }, children }),
2231
+ 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)(
1661
2232
  import_tamagui44.Button,
1662
2233
  {
1663
2234
  flex: 1,
@@ -1668,7 +2239,7 @@ function SwipeableRow({ children, leftActions, rightActions }) {
1668
2239
  action.onPress();
1669
2240
  setShowActions(false);
1670
2241
  },
1671
- children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_tamagui44.SizableText, { size: "$2", fontWeight: "600", color: "white", children: action.label })
2242
+ children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_tamagui44.SizableText, { size: "$2", fontWeight: "600", color: "white", children: action.label })
1672
2243
  },
1673
2244
  action.id
1674
2245
  )) })
@@ -1678,9 +2249,9 @@ function SwipeableRow({ children, leftActions, rightActions }) {
1678
2249
  // src/patterns/MediaCard.tsx
1679
2250
  var import_tamagui45 = require("tamagui");
1680
2251
  var import_linear_gradient = require("tamagui/linear-gradient");
1681
- var import_jsx_runtime37 = require("react/jsx-runtime");
2252
+ var import_jsx_runtime38 = require("react/jsx-runtime");
1682
2253
  function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio = 16 / 9, onPress, badge }) {
1683
- return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
2254
+ return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
1684
2255
  import_tamagui45.YStack,
1685
2256
  {
1686
2257
  borderRadius: "$4",
@@ -1688,9 +2259,9 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
1688
2259
  onPress,
1689
2260
  pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
1690
2261
  animation: "quick",
1691
- children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_tamagui45.YStack, { aspectRatio, children: [
1692
- /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_tamagui45.Image, { source: { uri: image }, width: "100%", height: "100%", objectFit: "cover" }),
1693
- overlay === "gradient" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
2262
+ children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_tamagui45.YStack, { aspectRatio, children: [
2263
+ /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.Image, { source: { uri: image }, width: "100%", height: "100%", objectFit: "cover" }),
2264
+ overlay === "gradient" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
1694
2265
  import_linear_gradient.LinearGradient,
1695
2266
  {
1696
2267
  colors: ["transparent", "rgba(0,0,0,0.7)"],
@@ -1703,8 +2274,8 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
1703
2274
  height: "60%"
1704
2275
  }
1705
2276
  ),
1706
- overlay === "dark" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_tamagui45.YStack, { position: "absolute", fullscreen: true, backgroundColor: "rgba(0,0,0,0.4)" }),
1707
- badge && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
2277
+ overlay === "dark" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.YStack, { position: "absolute", fullscreen: true, backgroundColor: "rgba(0,0,0,0.4)" }),
2278
+ badge && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
1708
2279
  import_tamagui45.XStack,
1709
2280
  {
1710
2281
  position: "absolute",
@@ -1714,12 +2285,12 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
1714
2285
  paddingHorizontal: "$2",
1715
2286
  paddingVertical: "$1",
1716
2287
  borderRadius: "$2",
1717
- children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_tamagui45.SizableText, { size: "$1", fontWeight: "600", color: "$color1", children: badge })
2288
+ children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.SizableText, { size: "$1", fontWeight: "600", color: "$color1", children: badge })
1718
2289
  }
1719
2290
  ),
1720
- /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_tamagui45.YStack, { position: "absolute", bottom: 0, left: 0, right: 0, padding: "$3", gap: "$1", children: [
1721
- /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_tamagui45.SizableText, { size: "$5", fontWeight: "600", color: "white", children: title }),
1722
- subtitle && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_tamagui45.SizableText, { size: "$3", color: "rgba(255,255,255,0.8)", children: subtitle })
2291
+ /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_tamagui45.YStack, { position: "absolute", bottom: 0, left: 0, right: 0, padding: "$3", gap: "$1", children: [
2292
+ /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.SizableText, { size: "$5", fontWeight: "600", color: "white", children: title }),
2293
+ subtitle && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui45.SizableText, { size: "$3", color: "rgba(255,255,255,0.8)", children: subtitle })
1723
2294
  ] })
1724
2295
  ] })
1725
2296
  }
@@ -1727,16 +2298,16 @@ function MediaCard({ image, title, subtitle, overlay = "gradient", aspectRatio =
1727
2298
  }
1728
2299
 
1729
2300
  // src/patterns/Carousel.tsx
1730
- var import_react10 = require("react");
2301
+ var import_react11 = require("react");
1731
2302
  var import_tamagui46 = require("tamagui");
1732
2303
  var import_react_native3 = require("react-native");
1733
- var import_jsx_runtime38 = require("react/jsx-runtime");
2304
+ var import_jsx_runtime39 = require("react/jsx-runtime");
1734
2305
  function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false }) {
1735
- const [activeIndex, setActiveIndex] = (0, import_react10.useState)(0);
1736
- const count = import_react10.Children.count(children);
2306
+ const [activeIndex, setActiveIndex] = (0, import_react11.useState)(0);
2307
+ const count = import_react11.Children.count(children);
1737
2308
  const gapPx = gap === "$2" ? 8 : gap === "$3" ? 12 : 16;
1738
- return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_tamagui46.YStack, { gap: "$3", children: [
1739
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
2309
+ return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_tamagui46.YStack, { gap: "$3", children: [
2310
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
1740
2311
  import_react_native3.ScrollView,
1741
2312
  {
1742
2313
  horizontal: true,
@@ -1750,24 +2321,1616 @@ function Carousel({ children, gap = "$3", snapToInterval, showIndicators = false
1750
2321
  children
1751
2322
  }
1752
2323
  ),
1753
- showIndicators && count > 1 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui46.XStack, { justifyContent: "center", gap: "$1.5", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_tamagui46.Circle, { size: 6, backgroundColor: i === activeIndex ? "$color9" : "$color4", animation: "quick" }, i)) })
2324
+ 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)) })
1754
2325
  ] });
1755
2326
  }
1756
2327
 
1757
2328
  // src/patterns/PullToRefresh.tsx
1758
2329
  var import_tamagui47 = require("tamagui");
1759
2330
  var import_react_native4 = require("react-native");
1760
- var import_jsx_runtime39 = require("react/jsx-runtime");
2331
+ var import_jsx_runtime40 = require("react/jsx-runtime");
1761
2332
  function PullToRefresh({ children, onRefresh, refreshing = false }) {
1762
- return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
2333
+ return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
1763
2334
  import_react_native4.ScrollView,
1764
2335
  {
1765
2336
  contentContainerStyle: { flexGrow: 1 },
1766
- refreshControl: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native4.RefreshControl, { refreshing, onRefresh }),
1767
- children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_tamagui47.YStack, { flex: 1, children })
2337
+ refreshControl: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_native4.RefreshControl, { refreshing, onRefresh }),
2338
+ children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_tamagui47.YStack, { flex: 1, children })
2339
+ }
2340
+ );
2341
+ }
2342
+
2343
+ // src/patterns/ProductCard.tsx
2344
+ var import_tamagui48 = require("tamagui");
2345
+ var import_jsx_runtime41 = require("react/jsx-runtime");
2346
+ function Stars({ rating = 0 }) {
2347
+ 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)) });
2348
+ }
2349
+ function CardContent2({ title, price, originalPrice, rating, reviewCount, onAddToCart }) {
2350
+ return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.YStack, { flex: 1, gap: "$1.5", justifyContent: "space-between", children: [
2351
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.YStack, { gap: "$1", children: [
2352
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.SizableText, { size: "$4", fontWeight: "600", numberOfLines: 2, children: title }),
2353
+ rating !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.XStack, { gap: "$1.5", alignItems: "center", children: [
2354
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Stars, { rating }),
2355
+ reviewCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.SizableText, { size: "$2", color: "$color9", children: [
2356
+ "(",
2357
+ reviewCount,
2358
+ ")"
2359
+ ] })
2360
+ ] })
2361
+ ] }),
2362
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.XStack, { alignItems: "center", justifyContent: "space-between", children: [
2363
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.XStack, { gap: "$2", alignItems: "baseline", children: [
2364
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.SizableText, { size: "$6", fontWeight: "700", children: price }),
2365
+ originalPrice && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.SizableText, { size: "$3", color: "$color8", textDecorationLine: "line-through", children: originalPrice })
2366
+ ] }),
2367
+ onAddToCart && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
2368
+ import_tamagui48.Button,
2369
+ {
2370
+ size: "$3",
2371
+ backgroundColor: "$color9",
2372
+ color: "$color1",
2373
+ borderRadius: "$10",
2374
+ onPress: (e) => {
2375
+ e.stopPropagation?.();
2376
+ onAddToCart();
2377
+ },
2378
+ pressStyle: { backgroundColor: "$color8", scale: 0.95 },
2379
+ animation: "quick",
2380
+ children: "+ Cart"
2381
+ }
2382
+ )
2383
+ ] })
2384
+ ] });
2385
+ }
2386
+ function ProductCard({ image, title, price, originalPrice, rating, reviewCount, badge, onPress, onAddToCart, variant = "vertical" }) {
2387
+ const isHorizontal = variant === "horizontal";
2388
+ const Wrapper = isHorizontal ? import_tamagui48.XStack : import_tamagui48.YStack;
2389
+ return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
2390
+ Wrapper,
2391
+ {
2392
+ backgroundColor: "$color1",
2393
+ borderRadius: "$5",
2394
+ overflow: "hidden",
2395
+ borderWidth: 1,
2396
+ borderColor: "$color4",
2397
+ onPress,
2398
+ animation: "quick",
2399
+ pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
2400
+ ...isHorizontal ? { height: 140 } : {},
2401
+ children: [
2402
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_tamagui48.YStack, { ...isHorizontal ? { width: 140 } : { aspectRatio: 4 / 3 }, position: "relative", children: [
2403
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.Image, { source: { uri: image }, width: "100%", height: "100%", objectFit: "cover" }),
2404
+ badge && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
2405
+ import_tamagui48.XStack,
2406
+ {
2407
+ position: "absolute",
2408
+ top: "$2",
2409
+ left: "$2",
2410
+ backgroundColor: "$red9",
2411
+ paddingHorizontal: "$2",
2412
+ paddingVertical: "$1",
2413
+ borderRadius: "$10",
2414
+ children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_tamagui48.SizableText, { size: "$1", fontWeight: "700", color: "white", children: badge })
2415
+ }
2416
+ )
2417
+ ] }),
2418
+ /* @__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 } }) })
2419
+ ]
2420
+ }
2421
+ );
2422
+ }
2423
+
2424
+ // src/patterns/PricingTable.tsx
2425
+ var import_tamagui49 = require("tamagui");
2426
+ var import_jsx_runtime42 = require("react/jsx-runtime");
2427
+ function BillingToggle({ annual, onToggle }) {
2428
+ 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) => {
2429
+ const active = i === 1 ? annual : !annual;
2430
+ return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
2431
+ import_tamagui49.XStack,
2432
+ {
2433
+ paddingHorizontal: "$4",
2434
+ paddingVertical: "$2",
2435
+ borderRadius: "$10",
2436
+ backgroundColor: active ? "$color9" : "transparent",
2437
+ onPress: () => onToggle(i === 1),
2438
+ pressStyle: { opacity: 0.8 },
2439
+ animation: "quick",
2440
+ children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$3", fontWeight: "600", color: active ? "$color1" : "$color10", children: label })
2441
+ },
2442
+ label
2443
+ );
2444
+ }) });
2445
+ }
2446
+ function PlanRow2({ plan, selected, onSelect }) {
2447
+ return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
2448
+ import_tamagui49.XStack,
2449
+ {
2450
+ padding: "$4",
2451
+ borderRadius: "$6",
2452
+ borderWidth: 2,
2453
+ borderColor: selected ? "$color9" : "$color4",
2454
+ backgroundColor: selected ? "$color2" : "$color1",
2455
+ alignItems: "center",
2456
+ gap: "$3",
2457
+ onPress: onSelect,
2458
+ pressStyle: { scale: 0.98, opacity: 0.9 },
2459
+ animation: "quick",
2460
+ cursor: "pointer",
2461
+ position: "relative",
2462
+ children: [
2463
+ 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" }) }),
2464
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
2465
+ import_tamagui49.Circle,
2466
+ {
2467
+ size: 22,
2468
+ borderWidth: 2,
2469
+ borderColor: selected ? "$color9" : "$color6",
2470
+ backgroundColor: selected ? "$color9" : "transparent",
2471
+ children: selected && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.Circle, { size: 8, backgroundColor: "$color1" })
2472
+ }
2473
+ ),
2474
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_tamagui49.YStack, { flex: 1, gap: "$0.5", children: [
2475
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_tamagui49.XStack, { alignItems: "center", gap: "$2", children: [
2476
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$5", fontWeight: "700", children: plan.name }),
2477
+ 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 }) })
2478
+ ] }),
2479
+ plan.description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$2", color: "$color10", children: plan.description })
2480
+ ] }),
2481
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$5", fontWeight: "800", children: plan.price })
2482
+ ]
2483
+ }
2484
+ );
2485
+ }
2486
+ function FeatureList({ features }) {
2487
+ 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: [
2488
+ /* @__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" }) }),
2489
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$3", color: f.included ? "$color11" : "$color8", flex: 1, children: f.label })
2490
+ ] }, i)) });
2491
+ }
2492
+ function PricingTable({ plans, selectedPlan, onSelectPlan, annual = false, onToggleBilling, onContinue, continueLabel, reassurance }) {
2493
+ const selected = selectedPlan ?? plans.find((p) => p.popular)?.id ?? plans[0]?.id;
2494
+ const activePlan = plans.find((p) => p.id === selected);
2495
+ return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_tamagui49.YStack, { gap: "$4", children: [
2496
+ onToggleBilling && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(BillingToggle, { annual, onToggle: onToggleBilling }),
2497
+ 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 }) }),
2498
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.YStack, { gap: "$3", children: plans.map((plan) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
2499
+ PlanRow2,
2500
+ {
2501
+ plan,
2502
+ selected: selected === plan.id,
2503
+ onSelect: () => onSelectPlan?.(plan.id)
2504
+ },
2505
+ plan.id
2506
+ )) }),
2507
+ reassurance && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_tamagui49.SizableText, { size: "$2", color: "$color10", textAlign: "center", children: reassurance }),
2508
+ onContinue && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
2509
+ import_tamagui49.Button,
2510
+ {
2511
+ size: "$5",
2512
+ backgroundColor: "$color9",
2513
+ color: "$color1",
2514
+ borderRadius: "$10",
2515
+ fontWeight: "700",
2516
+ onPress: onContinue,
2517
+ pressStyle: { scale: 0.97, backgroundColor: "$color8" },
2518
+ animation: "quick",
2519
+ children: continueLabel ?? activePlan?.cta ?? "Get Started"
2520
+ }
2521
+ )
2522
+ ] });
2523
+ }
2524
+
2525
+ // src/patterns/CountdownBanner.tsx
2526
+ var import_react12 = require("react");
2527
+ var import_tamagui50 = require("tamagui");
2528
+ var import_jsx_runtime43 = require("react/jsx-runtime");
2529
+ function useCountdown2(endTime, minutes, onExpire) {
2530
+ const getRemaining = (0, import_react12.useCallback)(() => {
2531
+ if (endTime) return Math.max(0, Math.floor((endTime.getTime() - Date.now()) / 1e3));
2532
+ return 0;
2533
+ }, [endTime]);
2534
+ const [seconds, setSeconds] = (0, import_react12.useState)(() => endTime ? getRemaining() : (minutes ?? 0) * 60);
2535
+ const firedRef = (0, import_react12.useRef)(false);
2536
+ (0, import_react12.useEffect)(() => {
2537
+ if (endTime) setSeconds(getRemaining());
2538
+ else setSeconds((minutes ?? 0) * 60);
2539
+ firedRef.current = false;
2540
+ }, [endTime, minutes, getRemaining]);
2541
+ (0, import_react12.useEffect)(() => {
2542
+ if (seconds <= 0) return;
2543
+ const id = setInterval(() => {
2544
+ setSeconds((s) => {
2545
+ const next = endTime ? Math.max(0, Math.floor((endTime.getTime() - Date.now()) / 1e3)) : s - 1;
2546
+ if (next <= 0 && !firedRef.current) {
2547
+ firedRef.current = true;
2548
+ onExpire?.();
2549
+ }
2550
+ return Math.max(0, next);
2551
+ });
2552
+ }, 1e3);
2553
+ return () => clearInterval(id);
2554
+ }, [seconds > 0, endTime, onExpire]);
2555
+ const hh = String(Math.floor(seconds / 3600)).padStart(2, "0");
2556
+ const mm = String(Math.floor(seconds % 3600 / 60)).padStart(2, "0");
2557
+ const ss = String(seconds % 60).padStart(2, "0");
2558
+ const display = seconds >= 3600 ? `${hh}:${mm}:${ss}` : `${mm}:${ss}`;
2559
+ return { display, expired: seconds <= 0 };
2560
+ }
2561
+ function TimeBox({ value }) {
2562
+ 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 }) });
2563
+ }
2564
+ function CountdownBanner({ endTime, minutes, label = "Offer ends in", onExpire, variant = "banner" }) {
2565
+ const { display, expired } = useCountdown2(endTime, minutes, onExpire);
2566
+ if (expired) return null;
2567
+ const parts = display.split(":");
2568
+ if (variant === "badge") {
2569
+ 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: [
2570
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$1", fontWeight: "600", color: "white", children: label }),
2571
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$2", fontWeight: "800", color: "white", fontFamily: "$mono", children: display })
2572
+ ] });
2573
+ }
2574
+ if (variant === "compact") {
2575
+ 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: [
2576
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$3", fontWeight: "600", color: "$red9", children: label }),
2577
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$5", fontWeight: "800", color: "$red9", fontFamily: "$mono", children: display })
2578
+ ] });
2579
+ }
2580
+ return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_tamagui50.YStack, { backgroundColor: "$red9", paddingVertical: "$3", paddingHorizontal: "$4", gap: "$1.5", alignItems: "center", children: [
2581
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$3", fontWeight: "600", color: "white", opacity: 0.9, children: label }),
2582
+ /* @__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: [
2583
+ i > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_tamagui50.SizableText, { size: "$6", fontWeight: "800", color: "white", children: ":" }),
2584
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TimeBox, { value: p })
2585
+ ] }, i)) })
2586
+ ] });
2587
+ }
2588
+
2589
+ // src/patterns/TestimonialCard.tsx
2590
+ var import_tamagui51 = require("tamagui");
2591
+ var import_jsx_runtime44 = require("react/jsx-runtime");
2592
+ function Stars2({ count = 0 }) {
2593
+ if (!count) return null;
2594
+ 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)) });
2595
+ }
2596
+ function AuthorRow({ author, role, avatar }) {
2597
+ return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.XStack, { gap: "$2.5", alignItems: "center", children: [
2598
+ avatar && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.Image, { source: { uri: avatar }, width: 36, height: 36, borderRadius: 18, objectFit: "cover" }),
2599
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.YStack, { children: [
2600
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.SizableText, { size: "$3", fontWeight: "600", children: author }),
2601
+ role && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.SizableText, { size: "$2", color: "$color9", children: role })
2602
+ ] })
2603
+ ] });
2604
+ }
2605
+ function TestimonialCard2({ quote, author, role, avatar, rating, variant = "card" }) {
2606
+ if (variant === "minimal") {
2607
+ return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.YStack, { gap: "$3", paddingVertical: "$2", children: [
2608
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Stars2, { count: rating }),
2609
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.SizableText, { size: "$4", color: "$color11", fontStyle: "italic", lineHeight: 24, children: [
2610
+ '"',
2611
+ quote,
2612
+ '"'
2613
+ ] }),
2614
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AuthorRow, { author, role, avatar })
2615
+ ] });
2616
+ }
2617
+ if (variant === "featured") {
2618
+ return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.YStack, { backgroundColor: "$color3", padding: "$5", borderRadius: "$6", gap: "$4", alignItems: "center", children: [
2619
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_tamagui51.SizableText, { size: "$8", color: "$color9", opacity: 0.3, fontWeight: "800", children: '"' }),
2620
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Stars2, { count: rating }),
2621
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.SizableText, { size: "$5", color: "$color12", fontStyle: "italic", textAlign: "center", lineHeight: 28, children: [
2622
+ '"',
2623
+ quote,
2624
+ '"'
2625
+ ] }),
2626
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AuthorRow, { author, role, avatar })
2627
+ ] });
2628
+ }
2629
+ return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
2630
+ import_tamagui51.YStack,
2631
+ {
2632
+ backgroundColor: "$color1",
2633
+ padding: "$4",
2634
+ borderRadius: "$5",
2635
+ borderWidth: 1,
2636
+ borderColor: "$color4",
2637
+ gap: "$3",
2638
+ children: [
2639
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Stars2, { count: rating }),
2640
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_tamagui51.SizableText, { size: "$4", color: "$color11", fontStyle: "italic", lineHeight: 24, children: [
2641
+ '"',
2642
+ quote,
2643
+ '"'
2644
+ ] }),
2645
+ /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AuthorRow, { author, role, avatar })
2646
+ ]
2647
+ }
2648
+ );
2649
+ }
2650
+
2651
+ // src/patterns/ConfirmDialog.tsx
2652
+ var import_tamagui52 = require("tamagui");
2653
+ var import_jsx_runtime45 = require("react/jsx-runtime");
2654
+ function ConfirmDialog({
2655
+ open,
2656
+ onOpenChange,
2657
+ title,
2658
+ description,
2659
+ confirmLabel = "Confirm",
2660
+ cancelLabel = "Cancel",
2661
+ onConfirm,
2662
+ onCancel,
2663
+ destructive = false,
2664
+ icon
2665
+ }) {
2666
+ const handleCancel = () => {
2667
+ onCancel?.();
2668
+ onOpenChange(false);
2669
+ };
2670
+ const handleConfirm = () => {
2671
+ onConfirm?.();
2672
+ onOpenChange(false);
2673
+ };
2674
+ return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_tamagui52.AlertDialog.Portal, { children: [
2675
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
2676
+ import_tamagui52.AlertDialog.Overlay,
2677
+ {
2678
+ opacity: 0.5,
2679
+ enterStyle: { opacity: 0 },
2680
+ exitStyle: { opacity: 0 },
2681
+ animation: "quick"
2682
+ },
2683
+ "overlay"
2684
+ ),
2685
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
2686
+ import_tamagui52.AlertDialog.Content,
2687
+ {
2688
+ bordered: true,
2689
+ elevate: true,
2690
+ width: "90%",
2691
+ maxWidth: 400,
2692
+ enterStyle: { y: -20, opacity: 0, scale: 0.9 },
2693
+ exitStyle: { y: 10, opacity: 0, scale: 0.95 },
2694
+ x: 0,
2695
+ y: 0,
2696
+ scale: 1,
2697
+ opacity: 1,
2698
+ animation: "quick",
2699
+ children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_tamagui52.YStack, { gap: "$4", padding: "$4", children: [
2700
+ icon && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.YStack, { alignItems: "center", children: icon }),
2701
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_tamagui52.YStack, { gap: "$2", alignItems: icon ? "center" : "flex-start", children: [
2702
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.AlertDialog.Title, { size: "$6", fontWeight: "700", children: title }),
2703
+ description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
2704
+ import_tamagui52.AlertDialog.Description,
2705
+ {
2706
+ size: "$3",
2707
+ color: "$color10",
2708
+ textAlign: icon ? "center" : "left",
2709
+ children: description
2710
+ }
2711
+ )
2712
+ ] }),
2713
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_tamagui52.XStack, { gap: "$3", justifyContent: "flex-end", children: [
2714
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
2715
+ import_tamagui52.Button,
2716
+ {
2717
+ flex: 1,
2718
+ size: "$4",
2719
+ borderRadius: "$4",
2720
+ variant: "outlined",
2721
+ borderColor: "$color7",
2722
+ onPress: handleCancel,
2723
+ pressStyle: { opacity: 0.7 },
2724
+ animation: "quick",
2725
+ children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.SizableText, { fontWeight: "600", children: cancelLabel })
2726
+ }
2727
+ ),
2728
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
2729
+ import_tamagui52.Button,
2730
+ {
2731
+ flex: 1,
2732
+ size: "$4",
2733
+ borderRadius: "$4",
2734
+ backgroundColor: destructive ? "$red9" : "$color9",
2735
+ onPress: handleConfirm,
2736
+ pressStyle: { backgroundColor: destructive ? "$red8" : "$color8", scale: 0.97 },
2737
+ animation: "quick",
2738
+ children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_tamagui52.SizableText, { fontWeight: "600", color: "white", children: confirmLabel })
2739
+ }
2740
+ )
2741
+ ] })
2742
+ ] })
2743
+ },
2744
+ "content"
2745
+ )
2746
+ ] }) });
2747
+ }
2748
+
2749
+ // src/patterns/Chip.tsx
2750
+ var import_react13 = require("react");
2751
+ var import_tamagui53 = require("tamagui");
2752
+ var import_jsx_runtime46 = require("react/jsx-runtime");
2753
+ var sizes2 = { sm: { h: 28, px: "$2", text: "$2" }, md: { h: 34, px: "$3", text: "$3" }, lg: { h: 42, px: "$4", text: "$4" } };
2754
+ function Chip({ label, selected, onPress, onRemove, variant = "filled", size = "md", icon, color }) {
2755
+ const s = sizes2[size];
2756
+ const filled = variant === "filled";
2757
+ const active = selected ?? false;
2758
+ const bg = active ? color ?? "$color9" : filled ? "$color3" : "transparent";
2759
+ const border = active ? color ?? "$color9" : "$color6";
2760
+ const fg = active ? "$color1" : "$color11";
2761
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
2762
+ import_tamagui53.XStack,
2763
+ {
2764
+ height: s.h,
2765
+ borderRadius: "$10",
2766
+ paddingHorizontal: s.px,
2767
+ backgroundColor: bg,
2768
+ borderWidth: filled ? 0 : 1,
2769
+ borderColor: border,
2770
+ alignItems: "center",
2771
+ gap: "$1.5",
2772
+ pressStyle: { scale: 0.96, opacity: 0.85 },
2773
+ animation: "quick",
2774
+ onPress,
2775
+ cursor: "pointer",
2776
+ children: [
2777
+ active && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_tamagui53.SizableText, { size: s.text, color: fg, children: "\u2713" }),
2778
+ icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_tamagui53.SizableText, { color: fg, children: icon }),
2779
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_tamagui53.SizableText, { size: s.text, color: fg, fontWeight: "500", children: label }),
2780
+ onRemove && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
2781
+ import_tamagui53.SizableText,
2782
+ {
2783
+ size: "$2",
2784
+ color: fg,
2785
+ opacity: 0.7,
2786
+ pressStyle: { opacity: 1 },
2787
+ onPress: (e) => {
2788
+ e.stopPropagation?.();
2789
+ onRemove();
2790
+ },
2791
+ marginLeft: "$1",
2792
+ children: "\u2715"
2793
+ }
2794
+ )
2795
+ ]
2796
+ }
2797
+ );
2798
+ }
2799
+ function ChipGroup({ chips, selected = [], onSelectionChange, multiSelect = true, variant, size }) {
2800
+ const toggle = (0, import_react13.useCallback)((id) => {
2801
+ if (!onSelectionChange) return;
2802
+ const isSelected = selected.includes(id);
2803
+ if (multiSelect) {
2804
+ onSelectionChange(isSelected ? selected.filter((s) => s !== id) : [...selected, id]);
2805
+ } else {
2806
+ onSelectionChange(isSelected ? [] : [id]);
2807
+ }
2808
+ }, [selected, onSelectionChange, multiSelect]);
2809
+ return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_tamagui53.XStack, { flexWrap: "wrap", gap: "$2", children: chips.map((chip) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
2810
+ Chip,
2811
+ {
2812
+ label: chip.label,
2813
+ icon: chip.icon,
2814
+ selected: selected.includes(chip.id),
2815
+ onPress: () => toggle(chip.id),
2816
+ variant,
2817
+ size
2818
+ },
2819
+ chip.id
2820
+ )) });
2821
+ }
2822
+
2823
+ // src/patterns/OTPInput.tsx
2824
+ var import_react14 = require("react");
2825
+ var import_react_native5 = require("react-native");
2826
+ var import_tamagui54 = require("tamagui");
2827
+ var import_jsx_runtime47 = require("react/jsx-runtime");
2828
+ function OTPInput({ length = 6, value = "", onChange, onComplete, error, autoFocus, secureEntry }) {
2829
+ const inputRef = (0, import_react14.useRef)(null);
2830
+ const [focused, setFocused] = (0, import_react14.useState)(false);
2831
+ const digits = value.padEnd(length, " ").slice(0, length);
2832
+ const handleChange = (0, import_react14.useCallback)((text) => {
2833
+ const cleaned = text.replace(/\D/g, "").slice(0, length);
2834
+ onChange?.(cleaned);
2835
+ if (cleaned.length === length) onComplete?.(cleaned);
2836
+ }, [length, onChange, onComplete]);
2837
+ const focusInput = (0, import_react14.useCallback)(() => {
2838
+ inputRef.current?.focus();
2839
+ }, []);
2840
+ return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_tamagui54.YStack, { position: "relative", children: [
2841
+ /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_tamagui54.XStack, { gap: "$2", justifyContent: "center", children: Array.from({ length }, (_, i) => {
2842
+ const char = digits[i]?.trim();
2843
+ const isCursor = focused && value.length === i;
2844
+ return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
2845
+ import_tamagui54.YStack,
2846
+ {
2847
+ width: 48,
2848
+ height: 56,
2849
+ borderRadius: "$3",
2850
+ borderWidth: 2,
2851
+ borderColor: error ? "$red9" : isCursor ? "$color9" : char ? "$color7" : "$color5",
2852
+ backgroundColor: error ? "$red2" : isCursor ? "$color2" : "$color1",
2853
+ alignItems: "center",
2854
+ justifyContent: "center",
2855
+ animation: "quick",
2856
+ pointerEvents: "none",
2857
+ children: [
2858
+ /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_tamagui54.SizableText, { size: "$7", fontWeight: "600", color: "$color12", children: char ? secureEntry ? "\u25CF" : char : "" }),
2859
+ isCursor && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
2860
+ import_tamagui54.YStack,
2861
+ {
2862
+ position: "absolute",
2863
+ bottom: 10,
2864
+ width: 20,
2865
+ height: 2,
2866
+ backgroundColor: "$color9",
2867
+ animation: "quick"
2868
+ }
2869
+ )
2870
+ ]
2871
+ },
2872
+ i
2873
+ );
2874
+ }) }),
2875
+ import_react_native5.Platform.OS === "web" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
2876
+ "input",
2877
+ {
2878
+ ref: inputRef,
2879
+ type: "text",
2880
+ inputMode: "numeric",
2881
+ pattern: "[0-9]*",
2882
+ autoComplete: "one-time-code",
2883
+ maxLength: length,
2884
+ value,
2885
+ autoFocus,
2886
+ onChange: (e) => handleChange(e.target.value),
2887
+ onFocus: () => setFocused(true),
2888
+ onBlur: () => setFocused(false),
2889
+ style: {
2890
+ position: "absolute",
2891
+ top: 0,
2892
+ left: 0,
2893
+ right: 0,
2894
+ bottom: 0,
2895
+ width: "100%",
2896
+ height: "100%",
2897
+ opacity: 0,
2898
+ fontSize: 16,
2899
+ caretColor: "transparent",
2900
+ cursor: "pointer"
2901
+ }
2902
+ }
2903
+ ) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
2904
+ import_tamagui54.Input,
2905
+ {
2906
+ ref: inputRef,
2907
+ value,
2908
+ onChangeText: handleChange,
2909
+ keyboardType: "number-pad",
2910
+ maxLength: length,
2911
+ autoFocus,
2912
+ onFocus: () => setFocused(true),
2913
+ onBlur: () => setFocused(false),
2914
+ position: "absolute",
2915
+ top: 0,
2916
+ left: 0,
2917
+ right: 0,
2918
+ bottom: 0,
2919
+ opacity: 0,
2920
+ fontSize: 16
2921
+ }
2922
+ )
2923
+ ] });
2924
+ }
2925
+
2926
+ // src/patterns/PasswordInput.tsx
2927
+ var import_react15 = require("react");
2928
+ var import_tamagui55 = require("tamagui");
2929
+ var import_jsx_runtime48 = require("react/jsx-runtime");
2930
+ function getStrength(pw) {
2931
+ if (!pw) return { label: "", color: "$color6", width: "0%" };
2932
+ const score = [pw.length >= 8, /[A-Z]/.test(pw), /[0-9]/.test(pw), /[^A-Za-z0-9]/.test(pw)].filter(Boolean).length;
2933
+ if (score <= 1) return { label: "Weak", color: "$red9", width: "33%" };
2934
+ if (score <= 2) return { label: "Medium", color: "$yellow9", width: "66%" };
2935
+ return { label: "Strong", color: "$green9", width: "100%" };
2936
+ }
2937
+ function PasswordInput({ value = "", onChangeText, placeholder = "Password", label, error, size = "$4", strengthIndicator }) {
2938
+ const [visible, setVisible] = (0, import_react15.useState)(false);
2939
+ const toggle = (0, import_react15.useCallback)(() => setVisible((v) => !v), []);
2940
+ const strength = getStrength(value);
2941
+ return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_tamagui55.YStack, { gap: "$1.5", children: [
2942
+ label && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_tamagui55.SizableText, { size: "$3", color: "$color11", fontWeight: "500", children: label }),
2943
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
2944
+ import_tamagui55.XStack,
2945
+ {
2946
+ borderWidth: 1,
2947
+ borderColor: error ? "$red9" : "$color6",
2948
+ borderRadius: "$3",
2949
+ backgroundColor: "$color2",
2950
+ alignItems: "center",
2951
+ paddingRight: "$2",
2952
+ focusStyle: { borderColor: "$color9" },
2953
+ children: [
2954
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
2955
+ import_tamagui55.Input,
2956
+ {
2957
+ flex: 1,
2958
+ size,
2959
+ value,
2960
+ onChangeText,
2961
+ placeholder,
2962
+ placeholderTextColor: "$color8",
2963
+ secureTextEntry: !visible,
2964
+ backgroundColor: "transparent",
2965
+ borderWidth: 0
2966
+ }
2967
+ ),
2968
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
2969
+ import_tamagui55.SizableText,
2970
+ {
2971
+ size: "$4",
2972
+ color: "$color8",
2973
+ paddingHorizontal: "$2",
2974
+ pressStyle: { opacity: 0.6 },
2975
+ onPress: toggle,
2976
+ cursor: "pointer",
2977
+ children: visible ? "\u25C9" : "\u25CE"
2978
+ }
2979
+ )
2980
+ ]
2981
+ }
2982
+ ),
2983
+ strengthIndicator && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_tamagui55.YStack, { gap: "$1", children: [
2984
+ /* @__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" }) }),
2985
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_tamagui55.SizableText, { size: "$1", color: strength.color, children: strength.label })
2986
+ ] }),
2987
+ error && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_tamagui55.SizableText, { size: "$2", color: "$red9", children: error })
2988
+ ] });
2989
+ }
2990
+
2991
+ // src/patterns/AvatarGroup.tsx
2992
+ var import_tamagui56 = require("tamagui");
2993
+ var import_jsx_runtime49 = require("react/jsx-runtime");
2994
+ function getInitials(name) {
2995
+ if (!name) return "?";
2996
+ return name.split(" ").map((p) => p[0]).join("").toUpperCase().slice(0, 2);
2997
+ }
2998
+ function AvatarItem({ uri, name, color, size }) {
2999
+ return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
3000
+ import_tamagui56.Circle,
3001
+ {
3002
+ size,
3003
+ backgroundColor: color ?? "$color4",
3004
+ borderWidth: 2,
3005
+ borderColor: "$background",
3006
+ overflow: "hidden",
3007
+ alignItems: "center",
3008
+ justifyContent: "center",
3009
+ 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) })
3010
+ }
3011
+ );
3012
+ }
3013
+ function AvatarGroup({ avatars, max = 4, size = 36, overlap = 10 }) {
3014
+ const visible = avatars.slice(0, max);
3015
+ const remaining = avatars.length - max;
3016
+ return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_tamagui56.XStack, { alignItems: "center", children: [
3017
+ 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)),
3018
+ remaining > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_tamagui56.XStack, { marginLeft: -overlap, zIndex: 0, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
3019
+ import_tamagui56.Circle,
3020
+ {
3021
+ size,
3022
+ backgroundColor: "$color6",
3023
+ borderWidth: 2,
3024
+ borderColor: "$background",
3025
+ alignItems: "center",
3026
+ justifyContent: "center",
3027
+ children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_tamagui56.SizableText, { size: "$2", fontWeight: "600", color: "$color11", children: [
3028
+ "+",
3029
+ remaining
3030
+ ] })
3031
+ }
3032
+ ) })
3033
+ ] });
3034
+ }
3035
+
3036
+ // src/patterns/SwipeCards.tsx
3037
+ var import_react16 = require("react");
3038
+ var import_tamagui57 = require("tamagui");
3039
+ var import_jsx_runtime50 = require("react/jsx-runtime");
3040
+ var STACK_SIZE = 3;
3041
+ var CARD_OFFSETS = [
3042
+ { scale: 1, y: 0, opacity: 1 },
3043
+ { scale: 0.95, y: 8, opacity: 0.9 },
3044
+ { scale: 0.9, y: 16, opacity: 0.8 }
3045
+ ];
3046
+ function SwipeCards({
3047
+ items,
3048
+ renderCard,
3049
+ onSwipeLeft,
3050
+ onSwipeRight,
3051
+ onEmpty,
3052
+ leftLabel = "Nope",
3053
+ rightLabel = "Like",
3054
+ emptyMessage = "No more cards"
3055
+ }) {
3056
+ const [index, setIndex] = (0, import_react16.useState)(0);
3057
+ const [exitDir, setExitDir] = (0, import_react16.useState)(null);
3058
+ const remaining = items.slice(index);
3059
+ const isEmpty = remaining.length === 0;
3060
+ const handleSwipe = (0, import_react16.useCallback)((dir) => {
3061
+ if (isEmpty) return;
3062
+ const current = items[index];
3063
+ setExitDir(dir);
3064
+ const timer = setTimeout(() => {
3065
+ setExitDir(null);
3066
+ setIndex((i) => {
3067
+ const next = i + 1;
3068
+ if (next >= items.length) onEmpty?.();
3069
+ return next;
3070
+ });
3071
+ dir === "left" ? onSwipeLeft?.(current) : onSwipeRight?.(current);
3072
+ }, 250);
3073
+ return () => clearTimeout(timer);
3074
+ }, [isEmpty, index, items, onEmpty, onSwipeLeft, onSwipeRight]);
3075
+ if (isEmpty) {
3076
+ 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 }) });
3077
+ }
3078
+ return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_tamagui57.YStack, { flex: 1, gap: "$4", children: [
3079
+ /* @__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) => {
3080
+ const stackIdx = Math.min(remaining.length, STACK_SIZE) - 1 - reverseIdx;
3081
+ const isTop = stackIdx === 0;
3082
+ const offset = CARD_OFFSETS[stackIdx] ?? CARD_OFFSETS[2];
3083
+ const exitX = exitDir === "left" ? -400 : exitDir === "right" ? 400 : 0;
3084
+ const exitRotate = exitDir === "left" ? "-15deg" : exitDir === "right" ? "15deg" : "0deg";
3085
+ return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
3086
+ import_tamagui57.YStack,
3087
+ {
3088
+ position: "absolute",
3089
+ top: 0,
3090
+ left: 0,
3091
+ right: 0,
3092
+ bottom: 0,
3093
+ animation: "quick",
3094
+ borderRadius: "$5",
3095
+ overflow: "hidden",
3096
+ backgroundColor: "$background",
3097
+ elevation: isTop ? 4 : 1,
3098
+ shadowColor: "$shadowColor",
3099
+ shadowRadius: isTop ? 16 : 4,
3100
+ scale: isTop && exitDir ? 1 : offset.scale,
3101
+ opacity: isTop && exitDir ? 0 : offset.opacity,
3102
+ y: isTop && exitDir ? 0 : offset.y,
3103
+ x: isTop ? exitX : 0,
3104
+ rotate: isTop ? exitRotate : "0deg",
3105
+ children: [
3106
+ renderCard(item),
3107
+ isTop && exitDir === "left" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
3108
+ import_tamagui57.YStack,
3109
+ {
3110
+ position: "absolute",
3111
+ top: "$4",
3112
+ right: "$4",
3113
+ borderWidth: 3,
3114
+ borderColor: "$red10",
3115
+ borderRadius: "$3",
3116
+ padding: "$2",
3117
+ rotate: "15deg",
3118
+ children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$7", fontWeight: "800", color: "$red10", children: leftLabel.toUpperCase() })
3119
+ }
3120
+ ),
3121
+ isTop && exitDir === "right" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
3122
+ import_tamagui57.YStack,
3123
+ {
3124
+ position: "absolute",
3125
+ top: "$4",
3126
+ left: "$4",
3127
+ borderWidth: 3,
3128
+ borderColor: "$green10",
3129
+ borderRadius: "$3",
3130
+ padding: "$2",
3131
+ rotate: "-15deg",
3132
+ children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$7", fontWeight: "800", color: "$green10", children: rightLabel.toUpperCase() })
3133
+ }
3134
+ )
3135
+ ]
3136
+ },
3137
+ item.id
3138
+ );
3139
+ }) }) }),
3140
+ /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_tamagui57.XStack, { justifyContent: "center", gap: "$6", paddingBottom: "$4", children: [
3141
+ /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
3142
+ import_tamagui57.Circle,
3143
+ {
3144
+ size: 60,
3145
+ backgroundColor: "$red3",
3146
+ borderWidth: 2,
3147
+ borderColor: "$red7",
3148
+ pressStyle: { scale: 0.9, backgroundColor: "$red5" },
3149
+ animation: "quick",
3150
+ onPress: () => handleSwipe("left"),
3151
+ alignItems: "center",
3152
+ justifyContent: "center",
3153
+ children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$6", color: "$red10", fontWeight: "700", children: "\u2715" })
3154
+ }
3155
+ ),
3156
+ /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
3157
+ import_tamagui57.Circle,
3158
+ {
3159
+ size: 60,
3160
+ backgroundColor: "$green3",
3161
+ borderWidth: 2,
3162
+ borderColor: "$green7",
3163
+ pressStyle: { scale: 0.9, backgroundColor: "$green5" },
3164
+ animation: "quick",
3165
+ onPress: () => handleSwipe("right"),
3166
+ alignItems: "center",
3167
+ justifyContent: "center",
3168
+ children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_tamagui57.SizableText, { size: "$6", color: "$green10", fontWeight: "700", children: "\u2665" })
3169
+ }
3170
+ )
3171
+ ] })
3172
+ ] });
3173
+ }
3174
+
3175
+ // src/patterns/GlassCard.tsx
3176
+ var import_tamagui58 = require("tamagui");
3177
+ var import_jsx_runtime51 = require("react/jsx-runtime");
3178
+ var BLUR = { light: 8, medium: 16, heavy: 24 };
3179
+ var TINT_BG = {
3180
+ light: "rgba(255,255,255,0.15)",
3181
+ dark: "rgba(0,0,0,0.25)"
3182
+ };
3183
+ var GlassFrame = (0, import_tamagui58.styled)(import_tamagui58.YStack, {
3184
+ borderWidth: 1,
3185
+ borderColor: "rgba(255,255,255,0.2)",
3186
+ overflow: "hidden"
3187
+ });
3188
+ function GlassCard({
3189
+ children,
3190
+ intensity = "medium",
3191
+ tint = "light",
3192
+ borderRadius = "$4",
3193
+ padding = "$4",
3194
+ elevated = false
3195
+ }) {
3196
+ const blur = BLUR[intensity];
3197
+ return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
3198
+ GlassFrame,
3199
+ {
3200
+ borderRadius,
3201
+ padding,
3202
+ backgroundColor: TINT_BG[tint],
3203
+ elevation: elevated ? 4 : 0,
3204
+ shadowColor: elevated ? "$shadowColor" : void 0,
3205
+ shadowRadius: elevated ? 20 : void 0,
3206
+ shadowOpacity: elevated ? 0.3 : void 0,
3207
+ style: { backdropFilter: `blur(${blur}px)`, WebkitBackdropFilter: `blur(${blur}px)` },
3208
+ children
3209
+ }
3210
+ );
3211
+ }
3212
+
3213
+ // src/patterns/DataTable.tsx
3214
+ var import_react17 = require("react");
3215
+ var import_tamagui59 = require("tamagui");
3216
+ var import_jsx_runtime52 = require("react/jsx-runtime");
3217
+ var TH = (0, import_tamagui59.styled)(import_tamagui59.View, { padding: "$3", justifyContent: "center" });
3218
+ var TD = (0, import_tamagui59.styled)(import_tamagui59.View, { padding: "$3", justifyContent: "center" });
3219
+ function StatusBadge({ status }) {
3220
+ const isActive = status.toLowerCase() === "active";
3221
+ return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_tamagui59.XStack, { gap: "$2", alignItems: "center", children: [
3222
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
3223
+ import_tamagui59.View,
3224
+ {
3225
+ width: 8,
3226
+ height: 8,
3227
+ borderRadius: 4,
3228
+ backgroundColor: isActive ? "$green9" : "$orange9"
3229
+ }
3230
+ ),
3231
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.SizableText, { size: "$3", color: "$color11", children: status })
3232
+ ] });
3233
+ }
3234
+ function HeaderCell({ col, sort, onSort }) {
3235
+ const active = sort?.key === col.key;
3236
+ const indicator = active ? sort.dir === "asc" ? " \u25B2" : " \u25BC" : "";
3237
+ return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
3238
+ TH,
3239
+ {
3240
+ width: col.width,
3241
+ flexDirection: "row",
3242
+ alignItems: "center",
3243
+ cursor: col.sortable ? "pointer" : void 0,
3244
+ onPress: col.sortable ? onSort : void 0,
3245
+ pressStyle: col.sortable ? { opacity: 0.7 } : void 0,
3246
+ children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
3247
+ import_tamagui59.SizableText,
3248
+ {
3249
+ size: "$2",
3250
+ fontWeight: "700",
3251
+ color: active ? "$color12" : "$color9",
3252
+ textTransform: "uppercase",
3253
+ letterSpacing: 0.5,
3254
+ children: [
3255
+ col.header,
3256
+ indicator
3257
+ ]
3258
+ }
3259
+ )
3260
+ },
3261
+ col.key
3262
+ );
3263
+ }
3264
+ function TableRow({ row, columns, onPress, odd }) {
3265
+ return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
3266
+ import_tamagui59.XStack,
3267
+ {
3268
+ backgroundColor: odd ? "$color2" : "transparent",
3269
+ borderBottomWidth: 0.5,
3270
+ borderColor: "$color4",
3271
+ hoverStyle: { backgroundColor: "$color3" },
3272
+ cursor: onPress ? "pointer" : void 0,
3273
+ onPress: onPress ? () => onPress(row) : void 0,
3274
+ pressStyle: onPress ? { opacity: 0.85 } : void 0,
3275
+ animation: "quick",
3276
+ 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))
3277
+ }
3278
+ );
3279
+ }
3280
+ function CardRow({ row, columns, onPress }) {
3281
+ return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
3282
+ import_tamagui59.YStack,
3283
+ {
3284
+ backgroundColor: "$color1",
3285
+ borderRadius: "$4",
3286
+ borderWidth: 1,
3287
+ borderColor: "$color4",
3288
+ padding: "$3",
3289
+ gap: "$2",
3290
+ onPress: onPress ? () => onPress(row) : void 0,
3291
+ pressStyle: onPress ? { scale: 0.98, opacity: 0.9 } : void 0,
3292
+ animation: "quick",
3293
+ children: columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_tamagui59.YStack, { children: [
3294
+ i > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.Separator, { marginVertical: "$1.5", borderColor: "$color4" }),
3295
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_tamagui59.XStack, { justifyContent: "space-between", alignItems: "center", children: [
3296
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_tamagui59.SizableText, { size: "$2", color: "$color9", fontWeight: "600", children: col.header }),
3297
+ 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] ?? "") })
3298
+ ] })
3299
+ ] }, col.key))
3300
+ }
3301
+ );
3302
+ }
3303
+ function DataTable({ columns, data, onRowPress, emptyMessage = "No data" }) {
3304
+ const [sort, setSort] = (0, import_react17.useState)(null);
3305
+ const media = (0, import_tamagui59.useMedia)();
3306
+ const isSmall = media.sm;
3307
+ const sorted = (0, import_react17.useMemo)(() => {
3308
+ if (!sort) return data;
3309
+ return [...data].sort((a, b) => {
3310
+ const av = a[sort.key], bv = b[sort.key];
3311
+ const cmp = typeof av === "number" && typeof bv === "number" ? av - bv : String(av ?? "").localeCompare(String(bv ?? ""));
3312
+ return sort.dir === "asc" ? cmp : -cmp;
3313
+ });
3314
+ }, [data, sort]);
3315
+ const toggleSort = (key) => setSort((s) => s?.key === key ? { key, dir: s.dir === "asc" ? "desc" : "asc" } : { key, dir: "asc" });
3316
+ if (!data.length) {
3317
+ 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 }) });
3318
+ }
3319
+ if (isSmall) {
3320
+ 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)) });
3321
+ }
3322
+ return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_tamagui59.YStack, { borderWidth: 1, borderColor: "$color4", borderRadius: "$4", overflow: "hidden", children: [
3323
+ /* @__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)) }),
3324
+ sorted.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(TableRow, { row, columns, onPress: onRowPress, odd: i % 2 === 1 }, i))
3325
+ ] });
3326
+ }
3327
+
3328
+ // src/patterns/DatePicker.tsx
3329
+ var import_react18 = require("react");
3330
+ var import_tamagui60 = require("tamagui");
3331
+ var import_jsx_runtime53 = require("react/jsx-runtime");
3332
+ var MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
3333
+ var DAY_LABELS_SUN = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
3334
+ var DAY_LABELS_MON = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
3335
+ function daysInMonth(year, month) {
3336
+ return new Date(year, month + 1, 0).getDate();
3337
+ }
3338
+ function sameDay(a, b) {
3339
+ return a ? a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate() : false;
3340
+ }
3341
+ function buildGrid(year, month, startDay) {
3342
+ const total = daysInMonth(year, month);
3343
+ const firstWeekday = new Date(year, month, 1).getDay();
3344
+ const offset = (firstWeekday - startDay + 7) % 7;
3345
+ const prevTotal = daysInMonth(year, month - 1);
3346
+ const cells = [];
3347
+ for (let i = offset - 1; i >= 0; i--)
3348
+ cells.push({ day: prevTotal - i, month: month - 1, year: month === 0 ? year - 1 : year, outside: true });
3349
+ for (let d = 1; d <= total; d++)
3350
+ cells.push({ day: d, month, year, outside: false });
3351
+ while (cells.length < 42)
3352
+ cells.push({ day: cells.length - offset - total + 1, month: month + 1, year: month === 11 ? year + 1 : year, outside: true });
3353
+ return cells;
3354
+ }
3355
+ function NavButton({ label, onPress }) {
3356
+ return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
3357
+ import_tamagui60.XStack,
3358
+ {
3359
+ width: 36,
3360
+ height: 36,
3361
+ borderRadius: "$10",
3362
+ alignItems: "center",
3363
+ justifyContent: "center",
3364
+ backgroundColor: "$color3",
3365
+ pressStyle: { scale: 0.92, backgroundColor: "$color5" },
3366
+ animation: "quick",
3367
+ onPress,
3368
+ cursor: "pointer",
3369
+ children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_tamagui60.SizableText, { size: "$5", color: "$color11", fontWeight: "600", children: label })
1768
3370
  }
1769
3371
  );
1770
3372
  }
3373
+ function DatePicker({ value, onDateChange, minDate, maxDate, startDay = 1 }) {
3374
+ const today = (0, import_react18.useMemo)(() => /* @__PURE__ */ new Date(), []);
3375
+ const [viewMonth, setViewMonth] = (0, import_react18.useState)(value?.getMonth() ?? today.getMonth());
3376
+ const [viewYear, setViewYear] = (0, import_react18.useState)(value?.getFullYear() ?? today.getFullYear());
3377
+ const headers = startDay === 1 ? DAY_LABELS_MON : DAY_LABELS_SUN;
3378
+ const grid = (0, import_react18.useMemo)(() => buildGrid(viewYear, viewMonth, startDay), [viewYear, viewMonth, startDay]);
3379
+ const navigate = (0, import_react18.useCallback)((dir) => {
3380
+ setViewMonth((m) => {
3381
+ const next = m + dir;
3382
+ if (next < 0) {
3383
+ setViewYear((y) => y - 1);
3384
+ return 11;
3385
+ }
3386
+ if (next > 11) {
3387
+ setViewYear((y) => y + 1);
3388
+ return 0;
3389
+ }
3390
+ return next;
3391
+ });
3392
+ }, []);
3393
+ const isDisabled = (0, import_react18.useCallback)((d) => {
3394
+ if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
3395
+ if (maxDate && d > new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate())) return true;
3396
+ return false;
3397
+ }, [minDate, maxDate]);
3398
+ return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_tamagui60.YStack, { backgroundColor: "$color2", borderRadius: "$4", padding: "$3", gap: "$2", animation: "quick", children: [
3399
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_tamagui60.XStack, { alignItems: "center", justifyContent: "space-between", children: [
3400
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(NavButton, { label: "\u2039", onPress: () => navigate(-1) }),
3401
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_tamagui60.SizableText, { size: "$4", fontWeight: "700", color: "$color12", children: [
3402
+ MONTH_NAMES[viewMonth],
3403
+ " ",
3404
+ viewYear
3405
+ ] }),
3406
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(NavButton, { label: "\u203A", onPress: () => navigate(1) })
3407
+ ] }),
3408
+ /* @__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)) }),
3409
+ 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) => {
3410
+ const date = new Date(cell.year, cell.month, cell.day);
3411
+ const selected = sameDay(value, date);
3412
+ const isToday = sameDay(today, date);
3413
+ const disabled = cell.outside || isDisabled(date);
3414
+ return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_tamagui60.YStack, { flex: 1, alignItems: "center", paddingVertical: "$0.5", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
3415
+ import_tamagui60.XStack,
3416
+ {
3417
+ width: 40,
3418
+ height: 40,
3419
+ borderRadius: "$10",
3420
+ alignItems: "center",
3421
+ justifyContent: "center",
3422
+ backgroundColor: selected ? "$color9" : "transparent",
3423
+ borderWidth: isToday && !selected ? 1.5 : 0,
3424
+ borderColor: "$color9",
3425
+ pressStyle: disabled ? void 0 : { scale: 0.9, backgroundColor: selected ? "$color10" : "$color4" },
3426
+ animation: "quick",
3427
+ opacity: disabled ? 0.35 : 1,
3428
+ cursor: disabled ? "default" : "pointer",
3429
+ onPress: disabled ? void 0 : () => onDateChange?.(date),
3430
+ children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
3431
+ import_tamagui60.SizableText,
3432
+ {
3433
+ size: "$3",
3434
+ fontWeight: selected || isToday ? "700" : "400",
3435
+ color: selected ? "white" : cell.outside ? "$color5" : "$color12",
3436
+ children: cell.day
3437
+ }
3438
+ )
3439
+ }
3440
+ ) }, `${row}-${i}`);
3441
+ }) }, row))
3442
+ ] });
3443
+ }
3444
+
3445
+ // src/patterns/EventCard.tsx
3446
+ var import_tamagui61 = require("tamagui");
3447
+ var import_jsx_runtime54 = require("react/jsx-runtime");
3448
+ var THEME_MAP = {
3449
+ purple: "purple",
3450
+ green: "green",
3451
+ blue: "blue",
3452
+ orange: "orange",
3453
+ red: "red",
3454
+ pink: "pink"
3455
+ };
3456
+ function ParticipantDots({ count, max }) {
3457
+ const dots = Math.min(count, 5);
3458
+ return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.XStack, { alignItems: "center", gap: "$1.5", children: [
3459
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.XStack, { children: Array.from({ length: dots }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
3460
+ import_tamagui61.YStack,
3461
+ {
3462
+ width: 22,
3463
+ height: 22,
3464
+ borderRadius: 11,
3465
+ backgroundColor: "$color7",
3466
+ borderWidth: 2,
3467
+ borderColor: "$color4",
3468
+ marginLeft: i > 0 ? -8 : 0,
3469
+ alignItems: "center",
3470
+ justifyContent: "center",
3471
+ children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$1", color: "$color1", fontWeight: "700", children: String.fromCharCode(65 + i) })
3472
+ },
3473
+ i
3474
+ )) }),
3475
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.SizableText, { size: "$2", color: "$color11", fontWeight: "500", children: [
3476
+ count,
3477
+ max ? `/${max}` : ""
3478
+ ] })
3479
+ ] });
3480
+ }
3481
+ function CardInner({ title, subtitle, time, location, label, participants, maxParticipants, onPress, actions }) {
3482
+ return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
3483
+ import_tamagui61.YStack,
3484
+ {
3485
+ backgroundColor: "$color4",
3486
+ borderRadius: "$5",
3487
+ padding: "$4",
3488
+ gap: "$3",
3489
+ borderWidth: 1,
3490
+ borderColor: "$color7",
3491
+ onPress,
3492
+ animation: "quick",
3493
+ pressStyle: onPress ? { scale: 0.97, opacity: 0.9 } : void 0,
3494
+ cursor: onPress ? "pointer" : void 0,
3495
+ children: [
3496
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.XStack, { justifyContent: "space-between", alignItems: "flex-start", children: [
3497
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.YStack, { flex: 1, gap: "$1", children: [
3498
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$6", fontWeight: "700", color: "$color12", children: title }),
3499
+ subtitle && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$3", color: "$color11", opacity: 0.8, children: subtitle })
3500
+ ] }),
3501
+ 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 }) })
3502
+ ] }),
3503
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.XStack, { gap: "$4", alignItems: "center", flexWrap: "wrap", children: [
3504
+ location && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.XStack, { gap: "$1.5", alignItems: "center", children: [
3505
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$3", children: "\u{1F4CD}" }),
3506
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.SizableText, { size: "$3", color: "$color11", children: location })
3507
+ ] }),
3508
+ participants !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ParticipantDots, { count: participants, max: maxParticipants })
3509
+ ] }),
3510
+ (label || actions) && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_tamagui61.XStack, { justifyContent: "space-between", alignItems: "center", children: [
3511
+ 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, {}),
3512
+ actions
3513
+ ] })
3514
+ ]
3515
+ }
3516
+ );
3517
+ }
3518
+ function EventCard({ theme = "purple", ...props }) {
3519
+ return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_tamagui61.Theme, { name: THEME_MAP[theme], children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CardInner, { ...props }) });
3520
+ }
3521
+
3522
+ // src/patterns/UserPreferences.tsx
3523
+ var import_tamagui62 = require("tamagui");
3524
+ var import_jsx_runtime55 = require("react/jsx-runtime");
3525
+ function ItemLabel({ title, description, color }) {
3526
+ return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.YStack, { flex: 1, gap: "$1", children: [
3527
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$4", fontWeight: "500", color: color ?? "$color12", children: title }),
3528
+ description && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$2", color: "$color9", children: description })
3529
+ ] });
3530
+ }
3531
+ function ToggleRow({ item }) {
3532
+ return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.XStack, { alignItems: "center", gap: "$3", paddingVertical: "$3", paddingHorizontal: "$4", children: [
3533
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ItemLabel, { title: item.title, description: item.description }),
3534
+ /* @__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" }) })
3535
+ ] });
3536
+ }
3537
+ function SelectRow({ item }) {
3538
+ const current = item.options.find((o) => o.value === item.value);
3539
+ return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
3540
+ import_tamagui62.XStack,
3541
+ {
3542
+ alignItems: "center",
3543
+ gap: "$3",
3544
+ paddingVertical: "$3",
3545
+ paddingHorizontal: "$4",
3546
+ pressStyle: { backgroundColor: "$color3" },
3547
+ animation: "quick",
3548
+ cursor: "pointer",
3549
+ onPress: () => {
3550
+ const idx = item.options.findIndex((o) => o.value === item.value);
3551
+ const next = item.options[(idx + 1) % item.options.length];
3552
+ if (next) item.onValueChange(next.value);
3553
+ },
3554
+ children: [
3555
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ItemLabel, { title: item.title, description: item.description }),
3556
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$3", color: "$color9", fontWeight: "500", children: current?.label ?? item.value }),
3557
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$4", color: "$color8", children: "\u203A" })
3558
+ ]
3559
+ }
3560
+ );
3561
+ }
3562
+ function SliderRow({ item }) {
3563
+ const min = item.min ?? 0;
3564
+ const max = item.max ?? 100;
3565
+ return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.YStack, { gap: "$2", paddingVertical: "$3", paddingHorizontal: "$4", children: [
3566
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.XStack, { justifyContent: "space-between", alignItems: "center", children: [
3567
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ItemLabel, { title: item.title, description: item.description }),
3568
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$3", fontWeight: "600", color: "$color11", children: item.value })
3569
+ ] }),
3570
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
3571
+ import_tamagui62.Slider,
3572
+ {
3573
+ value: [item.value],
3574
+ min,
3575
+ max,
3576
+ step: 1,
3577
+ onValueChange: ([v]) => {
3578
+ if (v !== void 0) item.onValueChange(v);
3579
+ },
3580
+ children: [
3581
+ /* @__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" }) }),
3582
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.Slider.Thumb, { index: 0, size: "$1.5", backgroundColor: "$color9", borderWidth: 0, circular: true })
3583
+ ]
3584
+ }
3585
+ )
3586
+ ] });
3587
+ }
3588
+ function ActionRow({ item }) {
3589
+ return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
3590
+ import_tamagui62.XStack,
3591
+ {
3592
+ alignItems: "center",
3593
+ gap: "$3",
3594
+ paddingVertical: "$3",
3595
+ paddingHorizontal: "$4",
3596
+ pressStyle: { backgroundColor: "$color3" },
3597
+ animation: "quick",
3598
+ cursor: "pointer",
3599
+ onPress: item.onPress,
3600
+ children: [
3601
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
3602
+ ItemLabel,
3603
+ {
3604
+ title: item.title,
3605
+ description: item.description,
3606
+ color: item.destructive ? "$red10" : void 0
3607
+ }
3608
+ ),
3609
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$4", color: "$color8", children: "\u203A" })
3610
+ ]
3611
+ }
3612
+ );
3613
+ }
3614
+ function PreferenceRow({ item }) {
3615
+ switch (item.type) {
3616
+ case "toggle":
3617
+ return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ToggleRow, { item });
3618
+ case "select":
3619
+ return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SelectRow, { item });
3620
+ case "slider":
3621
+ return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SliderRow, { item });
3622
+ case "action":
3623
+ return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ActionRow, { item });
3624
+ }
3625
+ }
3626
+ function UserPreferences({ sections }) {
3627
+ 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: [
3628
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.YStack, { paddingHorizontal: "$1", gap: "$0.5", children: [
3629
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$2", fontWeight: "600", color: "$color9", textTransform: "uppercase", children: section.title }),
3630
+ section.description && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.SizableText, { size: "$2", color: "$color8", children: section.description })
3631
+ ] }),
3632
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
3633
+ import_tamagui62.YStack,
3634
+ {
3635
+ backgroundColor: "$color2",
3636
+ borderRadius: "$4",
3637
+ overflow: "hidden",
3638
+ borderWidth: 1,
3639
+ borderColor: "$color4",
3640
+ children: section.items.map((item, ii) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_tamagui62.YStack, { children: [
3641
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PreferenceRow, { item }),
3642
+ ii < section.items.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_tamagui62.Separator, { borderColor: "$color4" })
3643
+ ] }, item.id))
3644
+ }
3645
+ )
3646
+ ] }, si)) });
3647
+ }
3648
+
3649
+ // src/patterns/BlinkSelect.tsx
3650
+ var import_tamagui63 = require("tamagui");
3651
+ var import_jsx_runtime56 = require("react/jsx-runtime");
3652
+ function BlinkSelect({
3653
+ items,
3654
+ value,
3655
+ onValueChange,
3656
+ placeholder = "Select...",
3657
+ label,
3658
+ size = "$4",
3659
+ disabled,
3660
+ width = "100%"
3661
+ }) {
3662
+ return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_tamagui63.YStack, { gap: "$1.5", width, children: [
3663
+ label ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.SizableText, { size: "$3", fontWeight: "600", children: label }) : null,
3664
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
3665
+ import_tamagui63.Select,
3666
+ {
3667
+ value,
3668
+ onValueChange,
3669
+ disablePreventBodyScroll: true,
3670
+ ...disabled ? { disabled: true } : {},
3671
+ children: [
3672
+ /* @__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 }) }),
3673
+ /* @__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: [
3674
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Sheet.Frame, { padding: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Adapt.Contents, {}) }),
3675
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Sheet.Overlay, {})
3676
+ ] }) }),
3677
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_tamagui63.Select.Content, { zIndex: 2e5, children: [
3678
+ /* @__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" }) }),
3679
+ /* @__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: [
3680
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.ItemText, { children: item.label }),
3681
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.Select.ItemIndicator, { marginLeft: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_tamagui63.SizableText, { children: "\u2713" }) })
3682
+ ] }, item.value)) }) }),
3683
+ /* @__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" }) })
3684
+ ] })
3685
+ ]
3686
+ }
3687
+ )
3688
+ ] });
3689
+ }
3690
+
3691
+ // src/patterns/BlinkDialog.tsx
3692
+ var import_tamagui64 = require("tamagui");
3693
+ var import_jsx_runtime57 = require("react/jsx-runtime");
3694
+ function BlinkDialog({
3695
+ open,
3696
+ onOpenChange,
3697
+ trigger,
3698
+ title,
3699
+ description,
3700
+ children,
3701
+ confirmLabel = "Confirm",
3702
+ cancelLabel = "Cancel",
3703
+ onConfirm,
3704
+ onCancel,
3705
+ confirmTheme = "active"
3706
+ }) {
3707
+ return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_tamagui64.Dialog, { modal: true, open, onOpenChange, children: [
3708
+ trigger && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Dialog.Trigger, { asChild: true, children: trigger }),
3709
+ /* @__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: [
3710
+ /* @__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, {}) }),
3711
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Sheet.Overlay, {})
3712
+ ] }) }),
3713
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_tamagui64.Dialog.Portal, { children: [
3714
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
3715
+ import_tamagui64.Dialog.Overlay,
3716
+ {
3717
+ animation: "quick",
3718
+ opacity: 0.5,
3719
+ enterStyle: { opacity: 0 },
3720
+ exitStyle: { opacity: 0 }
3721
+ },
3722
+ "overlay"
3723
+ ),
3724
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
3725
+ import_tamagui64.Dialog.Content,
3726
+ {
3727
+ bordered: true,
3728
+ elevate: true,
3729
+ animateOnly: ["transform", "opacity"],
3730
+ animation: ["quick", { opacity: { overshootClamping: true } }],
3731
+ enterStyle: { x: 0, y: -20, opacity: 0, scale: 0.9 },
3732
+ exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 },
3733
+ gap: "$4",
3734
+ children: [
3735
+ title && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Dialog.Title, { children: title }),
3736
+ description && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_tamagui64.Dialog.Description, { size: "$3", color: "$color10", children: description }),
3737
+ children,
3738
+ (onConfirm || onCancel) && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_tamagui64.XStack, { justifyContent: "flex-end", gap: "$3", children: [
3739
+ 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 }) }),
3740
+ 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 }) })
3741
+ ] })
3742
+ ]
3743
+ },
3744
+ "content"
3745
+ )
3746
+ ] })
3747
+ ] });
3748
+ }
3749
+
3750
+ // src/patterns/BlinkPopover.tsx
3751
+ var import_tamagui65 = require("tamagui");
3752
+ var import_jsx_runtime58 = require("react/jsx-runtime");
3753
+ function BlinkPopover({
3754
+ trigger,
3755
+ children,
3756
+ placement = "bottom",
3757
+ allowFlip = true,
3758
+ size = "$5"
3759
+ }) {
3760
+ return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_tamagui65.Popover, { size, allowFlip, placement, children: [
3761
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Popover.Trigger, { asChild: true, children: trigger }),
3762
+ /* @__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: [
3763
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Popover.Sheet.Frame, { padding: "$4", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Adapt.Contents, {}) }),
3764
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Popover.Sheet.Overlay, {})
3765
+ ] }) }),
3766
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
3767
+ import_tamagui65.Popover.Content,
3768
+ {
3769
+ borderWidth: 1,
3770
+ borderColor: "$borderColor",
3771
+ enterStyle: { y: -10, opacity: 0 },
3772
+ exitStyle: { y: -10, opacity: 0 },
3773
+ elevate: true,
3774
+ animation: ["quick", { opacity: { overshootClamping: true } }],
3775
+ children: [
3776
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.Popover.Arrow, { borderWidth: 1, borderColor: "$borderColor" }),
3777
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_tamagui65.YStack, { gap: "$3", padding: "$3", children })
3778
+ ]
3779
+ }
3780
+ )
3781
+ ] });
3782
+ }
3783
+
3784
+ // src/index.ts
3785
+ __reExport(index_exports, require("@tamagui/lucide-icons"), module.exports);
3786
+
3787
+ // src/patterns/ImmersiveMediaScreen.tsx
3788
+ var import_tamagui66 = require("tamagui");
3789
+ var import_jsx_runtime59 = require("react/jsx-runtime");
3790
+ function ImmersiveMediaScreen({
3791
+ variant = "reel",
3792
+ media,
3793
+ title,
3794
+ subtitle,
3795
+ topLeft,
3796
+ topCenter,
3797
+ topRight,
3798
+ actions = [],
3799
+ bottomMeta,
3800
+ inputPlaceholder,
3801
+ onInputPress,
3802
+ sheetContent
3803
+ }) {
3804
+ const showSheet = variant === "sheet";
3805
+ return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.YStack, { flex: 1, backgroundColor: "$color1", children: [
3806
+ /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.YStack, { flex: 1, position: "relative", children: [
3807
+ media,
3808
+ /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.XStack, { position: "absolute", top: "$5", left: "$4", right: "$4", justifyContent: "space-between", alignItems: "center", children: [
3809
+ /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.XStack, { minWidth: 56, children: topLeft }),
3810
+ /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.YStack, { alignItems: "center", flex: 1, children: topCenter }),
3811
+ /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.XStack, { minWidth: 56, justifyContent: "flex-end", children: topRight })
3812
+ ] }),
3813
+ 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: [
3814
+ /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
3815
+ import_tamagui66.YStack,
3816
+ {
3817
+ width: 44,
3818
+ height: 44,
3819
+ borderRadius: "$10",
3820
+ backgroundColor: "rgba(0,0,0,0.55)",
3821
+ alignItems: "center",
3822
+ justifyContent: "center",
3823
+ children: action.icon ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$5", color: "white", children: "\u2022" })
3824
+ }
3825
+ ),
3826
+ action.value ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$2", color: "white", children: action.value }) : null,
3827
+ action.label ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$1", color: "rgba(255,255,255,0.8)", children: action.label }) : null
3828
+ ] }, action.id)) }) : null,
3829
+ /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.YStack, { position: "absolute", left: "$4", right: "$4", bottom: showSheet ? "$20" : "$6", gap: "$2", children: [
3830
+ title ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$6", fontWeight: "800", color: "white", children: title }) : null,
3831
+ subtitle ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$3", color: "rgba(255,255,255,0.82)", children: subtitle }) : null,
3832
+ bottomMeta,
3833
+ variant === "story" && inputPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
3834
+ import_tamagui66.XStack,
3835
+ {
3836
+ onPress: onInputPress,
3837
+ alignItems: "center",
3838
+ paddingHorizontal: "$4",
3839
+ paddingVertical: "$3",
3840
+ borderRadius: "$10",
3841
+ backgroundColor: "rgba(255,255,255,0.14)",
3842
+ borderWidth: 1,
3843
+ borderColor: "rgba(255,255,255,0.25)",
3844
+ children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.SizableText, { size: "$3", color: "rgba(255,255,255,0.82)", children: inputPlaceholder })
3845
+ }
3846
+ ) : null
3847
+ ] })
3848
+ ] }),
3849
+ showSheet ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_tamagui66.YStack, { padding: "$4", gap: "$3", backgroundColor: "$background", borderTopLeftRadius: "$8", borderTopRightRadius: "$8", marginTop: -18, children: [
3850
+ /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.XStack, { alignSelf: "center", width: 48, height: 5, borderRadius: "$10", backgroundColor: "$color5" }),
3851
+ sheetContent,
3852
+ inputPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_tamagui66.Button, { size: "$5", backgroundColor: "$color9", color: "$color1", onPress: onInputPress, children: inputPlaceholder }) : null
3853
+ ] }) : null
3854
+ ] });
3855
+ }
3856
+
3857
+ // src/patterns/FinanceDashboard.tsx
3858
+ var import_tamagui67 = require("tamagui");
3859
+ var import_jsx_runtime60 = require("react/jsx-runtime");
3860
+ function FinanceDashboard({
3861
+ title = "Overview",
3862
+ balanceLabel = "Available balance",
3863
+ balance,
3864
+ rangeLabel,
3865
+ metrics = [],
3866
+ quickActions = [],
3867
+ sections = [],
3868
+ chartSlot,
3869
+ topRight
3870
+ }) {
3871
+ return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { flex: 1, backgroundColor: "$background", padding: "$4", gap: "$4", children: [
3872
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.XStack, { justifyContent: "space-between", alignItems: "center", paddingTop: "$4", children: [
3873
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { gap: "$1", children: [
3874
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$6", fontWeight: "700", children: title }),
3875
+ rangeLabel ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$2", color: "$color9", children: rangeLabel }) : null
3876
+ ] }),
3877
+ topRight
3878
+ ] }),
3879
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { backgroundColor: "$color1", borderRadius: "$7", padding: "$4", gap: "$2", borderWidth: 1, borderColor: "$color4", children: [
3880
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$3", color: "$color10", children: balanceLabel }),
3881
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$11", fontWeight: "800", children: balance }),
3882
+ chartSlot ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.YStack, { marginTop: "$2", children: chartSlot }) : null
3883
+ ] }),
3884
+ 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: [
3885
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$2", color: "$color10", children: metric.label }),
3886
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$7", fontWeight: "800", children: metric.value }),
3887
+ metric.change ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$2", color: "$color9", children: metric.change }) : null
3888
+ ] }, metric.label)) }) : null,
3889
+ 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)(
3890
+ import_tamagui67.YStack,
3891
+ {
3892
+ flex: 1,
3893
+ minWidth: 88,
3894
+ backgroundColor: "$color1",
3895
+ borderRadius: "$6",
3896
+ padding: "$3",
3897
+ gap: "$2",
3898
+ alignItems: "center",
3899
+ justifyContent: "center",
3900
+ borderWidth: 1,
3901
+ borderColor: "$color4",
3902
+ onPress: action.onPress,
3903
+ children: [
3904
+ /* @__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" }) }),
3905
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$2", textAlign: "center", children: action.label })
3906
+ ]
3907
+ },
3908
+ action.id
3909
+ )) }) : null,
3910
+ /* @__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: [
3911
+ /* @__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 }) }),
3912
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.YStack, { children: section.rows.map((row, index2) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
3913
+ import_tamagui67.XStack,
3914
+ {
3915
+ padding: "$3",
3916
+ gap: "$3",
3917
+ alignItems: "center",
3918
+ borderTopWidth: index2 === 0 ? 0 : 1,
3919
+ borderTopColor: "$color4",
3920
+ children: [
3921
+ 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,
3922
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_tamagui67.YStack, { flex: 1, children: [
3923
+ /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$3", fontWeight: "600", children: row.title }),
3924
+ row.subtitle ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$2", color: "$color10", children: row.subtitle }) : null
3925
+ ] }),
3926
+ row.value ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_tamagui67.SizableText, { size: "$3", color: "$color11", children: row.value }) : null
3927
+ ]
3928
+ },
3929
+ row.id
3930
+ )) })
3931
+ ] }, section.id ?? `${section.title}-${index}`)) })
3932
+ ] });
3933
+ }
1771
3934
  // Annotate the CommonJS export names for ESM import in node:
1772
3935
  0 && (module.exports = {
1773
3936
  Accordion,
@@ -1775,15 +3938,25 @@ function PullToRefresh({ children, onRefresh, refreshing = false }) {
1775
3938
  Adapt,
1776
3939
  AlertDialog,
1777
3940
  Anchor,
3941
+ AnimatePresence,
1778
3942
  AppHeader,
3943
+ AppleLogo,
3944
+ Article,
3945
+ Aside,
1779
3946
  Avatar,
3947
+ AvatarGroup,
3948
+ BLINK_DESIGN_THEMES,
3949
+ BLINK_DESIGN_THEME_IDS,
1780
3950
  Badge,
1781
3951
  BlinkAccordion,
1782
3952
  BlinkAvatar,
1783
3953
  BlinkButton,
1784
3954
  BlinkCard,
3955
+ BlinkDialog,
1785
3956
  BlinkInput,
3957
+ BlinkPopover,
1786
3958
  BlinkProvider,
3959
+ BlinkSelect,
1787
3960
  BlinkTabs,
1788
3961
  BlinkText,
1789
3962
  BlinkToastProvider,
@@ -1795,41 +3968,69 @@ function PullToRefresh({ children, onRefresh, refreshing = false }) {
1795
3968
  Carousel,
1796
3969
  ChatBubble,
1797
3970
  Checkbox,
3971
+ Chip,
3972
+ ChipGroup,
1798
3973
  Circle,
3974
+ ConfirmDialog,
1799
3975
  Container,
3976
+ CountdownBanner,
3977
+ DataTable,
3978
+ DatePicker,
1800
3979
  Dialog,
1801
3980
  DialogProvider,
1802
3981
  Divider,
1803
3982
  EmptyState,
3983
+ EnsureFlexed,
3984
+ EventCard,
1804
3985
  Fieldset,
3986
+ FinanceDashboard,
1805
3987
  FloatingActionButton,
3988
+ Footer,
1806
3989
  Form,
1807
3990
  FormField,
3991
+ Frame,
3992
+ GitHubLogo,
3993
+ GlassCard,
3994
+ GoogleLogo,
1808
3995
  Grid,
3996
+ Group,
1809
3997
  H1,
1810
3998
  H2,
1811
3999
  H3,
1812
4000
  H4,
1813
4001
  H5,
1814
4002
  H6,
4003
+ Header,
4004
+ Heading,
1815
4005
  ICONS,
1816
4006
  Icon,
1817
4007
  Image,
4008
+ ImmersiveMediaScreen,
1818
4009
  Input,
1819
4010
  KeyboardStickyFooter,
1820
4011
  Label,
1821
4012
  ListItem,
1822
4013
  LoginScreen,
4014
+ Main,
1823
4015
  MediaCard,
4016
+ MicrosoftLogo,
4017
+ Nav,
1824
4018
  NotificationBanner,
4019
+ OTPInput,
1825
4020
  OnboardingCarousel,
1826
4021
  PageContainer,
1827
4022
  PageMainContainer,
1828
4023
  Paragraph,
4024
+ PasswordInput,
1829
4025
  PaywallScreen,
1830
4026
  Popover,
4027
+ Portal,
4028
+ PortalHost,
4029
+ PortalItem,
1831
4030
  PortalProvider,
1832
4031
  Pressable,
4032
+ PricingTable,
4033
+ ProductCard,
1833
4034
  ProfileHeader,
1834
4035
  Progress,
1835
4036
  ProgressSteps,
@@ -1845,13 +4046,18 @@ function PullToRefresh({ children, onRefresh, refreshing = false }) {
1845
4046
  Separator,
1846
4047
  SettingsScreen,
1847
4048
  Sheet,
4049
+ SizableStack,
1848
4050
  SizableText,
1849
4051
  Skeleton,
1850
4052
  Slider,
4053
+ Spacer,
1851
4054
  Spinner,
1852
4055
  Square,
4056
+ Stack,
4057
+ StatusBadge,
1853
4058
  StepPageLayout,
1854
4059
  SubHeading,
4060
+ SwipeCards,
1855
4061
  SwipeableRow,
1856
4062
  Switch,
1857
4063
  TabBar,
@@ -1859,13 +4065,16 @@ function PullToRefresh({ children, onRefresh, refreshing = false }) {
1859
4065
  TamaguiImage,
1860
4066
  TamaguiListItem,
1861
4067
  TamaguiProvider,
4068
+ TestimonialCard,
1862
4069
  Text,
1863
4070
  TextArea,
1864
4071
  Theme,
4072
+ ThemeableStack,
1865
4073
  ToggleGroup,
1866
4074
  Tooltip,
1867
4075
  TooltipSimple,
1868
4076
  Unspaced,
4077
+ UserPreferences,
1869
4078
  View,
1870
4079
  VisuallyHidden,
1871
4080
  XGroup,
@@ -1873,17 +4082,48 @@ function PullToRefresh({ children, onRefresh, refreshing = false }) {
1873
4082
  YGroup,
1874
4083
  YStack,
1875
4084
  ZStack,
4085
+ addTheme,
1876
4086
  blinkConfig,
4087
+ composeEventHandlers,
4088
+ composeRefs,
4089
+ createFont,
4090
+ createMedia,
4091
+ createStyledContext,
1877
4092
  createTamagui,
4093
+ createTheme,
4094
+ createTokens,
4095
+ createVariable,
1878
4096
  dialogConfirm,
4097
+ getBlinkDesignTheme,
4098
+ getBlinkThemePalettes,
4099
+ getConfig,
4100
+ getToken,
4101
+ getTokenValue,
4102
+ getTokens,
4103
+ isClient,
4104
+ isWeb,
4105
+ replaceTheme,
1879
4106
  showError,
1880
4107
  styled,
1881
4108
  tamaguiDefaultConfig,
1882
4109
  toast,
4110
+ updateTheme,
1883
4111
  useBlinkToast,
4112
+ useComposedRefs,
4113
+ useControllableState,
4114
+ useDebounce,
4115
+ useDebounceValue,
4116
+ useDidFinishSSR,
4117
+ useEvent,
4118
+ useForceUpdate,
4119
+ useIsPresent,
4120
+ useIsomorphicLayoutEffect,
1884
4121
  useMedia,
4122
+ usePresence,
1885
4123
  useTheme,
1886
4124
  useThemeName,
1887
- withStaticProperties
4125
+ useWindowDimensions,
4126
+ withStaticProperties,
4127
+ ...require("@tamagui/lucide-icons")
1888
4128
  });
1889
4129
  //# sourceMappingURL=index.js.map