@web-my-money/blocks 1.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.
@@ -0,0 +1,532 @@
1
+ import * as React from 'react';
2
+ import { ReactNode, MouseEventHandler, ComponentType } from 'react';
3
+ export { L as LightboxGallery, a as LightboxGalleryProps, b as LightboxImageItem, T as Thumbnail, c as ThumbnailProps } from './index-D5sr_PKq.mjs';
4
+
5
+ declare function FadeUp({ children, className, delay, }: {
6
+ children: ReactNode;
7
+ className?: string;
8
+ delay?: number;
9
+ }): React.JSX.Element;
10
+
11
+ interface ScrollRevealProps {
12
+ children: React.ReactNode;
13
+ className?: string;
14
+ /** slide direction on reveal */
15
+ direction?: "up" | "down" | "left" | "right" | "none";
16
+ delay?: number;
17
+ /** reveal once, or every time it enters view */
18
+ once?: boolean;
19
+ amount?: number;
20
+ }
21
+ /** Reveal children when scrolled into view (framer-motion useInView). */
22
+ declare function ScrollReveal({ children, className, direction, delay, once, amount, }: ScrollRevealProps): React.JSX.Element;
23
+
24
+ type SectionLabelVariant = "pill" | "rule" | "indexed" | "flanked";
25
+ interface SectionLabelProps {
26
+ children: string;
27
+ variant?: SectionLabelVariant;
28
+ /** Step number shown when variant="indexed" */
29
+ index?: number;
30
+ dotColor?: string;
31
+ className?: string;
32
+ }
33
+ declare function SectionLabel({ children, variant, index, dotColor, className, }: SectionLabelProps): React.JSX.Element;
34
+
35
+ interface SectionGlowProps {
36
+ variant?: "primary" | "secondary";
37
+ className?: string;
38
+ }
39
+ declare function SectionGlow({ variant, className }: SectionGlowProps): React.JSX.Element;
40
+
41
+ interface SectionIntroProps {
42
+ label: string;
43
+ title: ReactNode;
44
+ body?: string;
45
+ centered?: boolean;
46
+ }
47
+ declare function SectionIntro({ label, title, body, centered, }: SectionIntroProps): React.JSX.Element;
48
+
49
+ interface TextRotatorProps {
50
+ /** Phrases to cycle through */
51
+ phrases: string[];
52
+ /** Interval in ms between phrase changes. Default 2800. */
53
+ interval?: number;
54
+ className?: string;
55
+ phraseClassName?: string;
56
+ }
57
+ declare function TextRotator({ phrases, interval, className, phraseClassName, }: TextRotatorProps): React.JSX.Element;
58
+
59
+ interface AvatarItem {
60
+ src?: string;
61
+ name: string;
62
+ /** Fallback initials if no image */
63
+ initials?: string;
64
+ }
65
+ interface AvatarGroupProps {
66
+ avatars: AvatarItem[];
67
+ /** Max number of avatars to show before "+N" overflow */
68
+ max?: number;
69
+ /** Label shown after the avatars, e.g. "Join 200+ teams" */
70
+ label?: React.ReactNode;
71
+ /** "sm" = 28px | "md" = 36px (default) | "lg" = 44px */
72
+ size?: "sm" | "md" | "lg";
73
+ className?: string;
74
+ }
75
+ declare function AvatarGroup({ avatars, max, label, size, className, }: AvatarGroupProps): React.JSX.Element;
76
+
77
+ interface MarqueeProps {
78
+ children: React.ReactNode[];
79
+ /** Second row scrolling in the opposite direction */
80
+ reverse?: boolean;
81
+ /** Duration in seconds for one pass. Default 30. */
82
+ speed?: number;
83
+ /** Gap between items */
84
+ gap?: string;
85
+ /** Pause on hover */
86
+ pauseOnHover?: boolean;
87
+ /** Width of the edge fade masks. Pass "0" to disable. Default "6rem". */
88
+ fadeWidth?: string;
89
+ className?: string;
90
+ }
91
+ declare function Marquee({ children, reverse, speed, gap, pauseOnHover, fadeWidth, className, }: MarqueeProps): React.JSX.Element;
92
+
93
+ type LayeredButtonBaseProps = {
94
+ children: ReactNode;
95
+ variant?: "solid" | "ghost";
96
+ className?: string;
97
+ disabled?: boolean;
98
+ icon?: ReactNode;
99
+ };
100
+ type LayeredButtonLinkProps = LayeredButtonBaseProps & {
101
+ href: string;
102
+ onClick?: MouseEventHandler<HTMLElement>;
103
+ type?: never;
104
+ };
105
+ type LayeredButtonButtonProps = LayeredButtonBaseProps & {
106
+ href?: undefined;
107
+ onClick?: MouseEventHandler<HTMLElement>;
108
+ type?: "button" | "submit" | "reset";
109
+ };
110
+ type LayeredButtonProps = LayeredButtonLinkProps | LayeredButtonButtonProps;
111
+ declare function LayeredButton({ href, children, variant, className, disabled, icon, onClick, type, }: LayeredButtonProps): React.JSX.Element;
112
+
113
+ interface NavLink {
114
+ label: string;
115
+ href: string;
116
+ }
117
+ interface NavBarData {
118
+ links: NavLink[];
119
+ cta?: {
120
+ label: string;
121
+ href: string;
122
+ };
123
+ }
124
+ interface NavBarProps {
125
+ /** Navigation content — links and optional CTA button */
126
+ data: NavBarData;
127
+ /** Logo / wordmark node rendered left of the nav */
128
+ logo?: React.ReactNode;
129
+ className?: string;
130
+ }
131
+ /**
132
+ * Sticky responsive navigation bar.
133
+ * Starts transparent, gains glass blur on scroll.
134
+ * Logo slot + desktop links + CTA button + mobile hamburger.
135
+ * Brand-agnostic — all colors via CSS custom properties.
136
+ */
137
+ declare function NavBar({ data, logo, className }: NavBarProps): React.JSX.Element;
138
+
139
+ interface CTABannerData {
140
+ /** Optional pill label above the heading */
141
+ badge?: string;
142
+ heading: string;
143
+ subheading?: string;
144
+ primaryCta: {
145
+ label: string;
146
+ href: string;
147
+ };
148
+ secondaryCta?: {
149
+ label: string;
150
+ href: string;
151
+ };
152
+ }
153
+ interface CTABannerProps {
154
+ data: CTABannerData;
155
+ className?: string;
156
+ }
157
+ /**
158
+ * Full-width gradient CTA section — typically placed near the bottom of a landing page.
159
+ * Uses --gradient-cta from the active theme. Works on all three themes.
160
+ */
161
+ declare function CTABanner({ data, className }: CTABannerProps): React.JSX.Element;
162
+
163
+ interface ProcessStep {
164
+ title: string;
165
+ description: string;
166
+ /** Custom icon — if omitted, renders the step number */
167
+ icon?: React.ReactNode;
168
+ }
169
+ interface ProcessStepsProps {
170
+ label?: string;
171
+ heading?: string;
172
+ subheading?: string;
173
+ steps: ProcessStep[];
174
+ /** "vertical" = stacked list with connectors | "horizontal" = row of cards (default) */
175
+ layout?: "horizontal" | "vertical";
176
+ className?: string;
177
+ }
178
+ declare function ProcessSteps({ label, heading, subheading, steps, layout, className, }: ProcessStepsProps): React.JSX.Element;
179
+
180
+ interface ContactFormField {
181
+ name: string;
182
+ label: string;
183
+ type?: "text" | "email" | "tel" | "textarea" | "select";
184
+ placeholder?: string;
185
+ required?: boolean;
186
+ options?: string[];
187
+ colSpan?: 1 | 2;
188
+ }
189
+ interface ContactFormData {
190
+ label?: string;
191
+ heading?: string;
192
+ subheading?: string;
193
+ fields: ContactFormField[];
194
+ submitLabel?: string;
195
+ /** Additional info shown beside the form */
196
+ aside?: React.ReactNode;
197
+ }
198
+ interface ContactFormProps {
199
+ data: ContactFormData;
200
+ /** Called on submit with a plain object of field values */
201
+ onSubmit?: (values: Record<string, string>) => void | Promise<void>;
202
+ className?: string;
203
+ }
204
+ declare function ContactForm({ data, onSubmit, className }: ContactFormProps): React.JSX.Element;
205
+
206
+ interface CaseStudyResult {
207
+ label: string;
208
+ value: string;
209
+ }
210
+ interface CaseStudy {
211
+ client: string;
212
+ /** Short industry/vertical label, e.g. "Med Spa" */
213
+ vertical?: string;
214
+ /** What was the problem before */
215
+ before: string;
216
+ /** What was built / done */
217
+ built: string;
218
+ /** Quantified outcome */
219
+ result: string;
220
+ /** Pull-quote from the client */
221
+ quote?: string;
222
+ quoteAuthor?: string;
223
+ /** Optional hero image/screenshot */
224
+ image?: React.ReactNode;
225
+ /** 2–3 stat highlights */
226
+ stats?: CaseStudyResult[];
227
+ /** Link to full case study */
228
+ href?: string;
229
+ }
230
+ interface CaseStudiesSectionProps {
231
+ label?: string;
232
+ heading?: string;
233
+ subheading?: string;
234
+ items: CaseStudy[];
235
+ className?: string;
236
+ }
237
+ declare function CaseStudiesSection({ label, heading, subheading, items, className, }: CaseStudiesSectionProps): React.JSX.Element;
238
+
239
+ interface BentoCell {
240
+ /** Column span: 1, 2, or 3 (of a 3-col grid) */
241
+ colSpan?: 1 | 2 | 3;
242
+ /** Row span: 1 or 2 */
243
+ rowSpan?: 1 | 2;
244
+ /** Pill label in the corner */
245
+ tag?: string;
246
+ title: string;
247
+ description?: string;
248
+ /** Optional icon or illustration */
249
+ visual?: React.ReactNode;
250
+ /** Accentuate with a primary glow border */
251
+ highlight?: boolean;
252
+ className?: string;
253
+ }
254
+ interface BentoGridProps {
255
+ label?: string;
256
+ heading?: string;
257
+ subheading?: string;
258
+ cells: BentoCell[];
259
+ className?: string;
260
+ }
261
+ declare function BentoGrid({ label, heading, subheading, cells, className, }: BentoGridProps): React.JSX.Element;
262
+
263
+ interface StatItem {
264
+ /** The number to count up to, e.g. 98 */
265
+ value: number;
266
+ /** Prefix shown before the number, e.g. "$" */
267
+ prefix?: string;
268
+ /** Suffix shown after the number, e.g. "%" or "K+" */
269
+ suffix?: string;
270
+ label: string;
271
+ description?: string;
272
+ }
273
+ interface StatsSectionProps {
274
+ label?: string;
275
+ heading?: string;
276
+ subheading?: string;
277
+ stats: StatItem[];
278
+ /** Animate numbers counting up on scroll into view */
279
+ animate?: boolean;
280
+ className?: string;
281
+ }
282
+ declare function StatsSection({ label, heading, subheading, stats, animate: shouldAnimate, className, }: StatsSectionProps): React.JSX.Element;
283
+
284
+ interface LogoItem {
285
+ name: string;
286
+ /** SVG node, img tag, or any renderable ReactNode */
287
+ logo: React.ReactNode;
288
+ }
289
+ interface LogoCloudProps {
290
+ eyebrow?: string;
291
+ items: LogoItem[];
292
+ /** "static" = no animation, "marquee" = infinite scroll (default) */
293
+ variant?: "static" | "marquee";
294
+ /** Speed of marquee in seconds for one full pass (lower = faster). Default 32. */
295
+ speed?: number;
296
+ className?: string;
297
+ }
298
+ declare function LogoCloud({ eyebrow, items, variant, speed, className, }: LogoCloudProps): React.JSX.Element;
299
+
300
+ interface HeroSectionProps {
301
+ headline: string;
302
+ subheadline: string;
303
+ primaryCta?: React.ReactNode;
304
+ secondaryCta?: React.ReactNode;
305
+ className?: string;
306
+ children?: React.ReactNode;
307
+ }
308
+ declare function HeroSection({ headline, subheadline, primaryCta, secondaryCta, className, children, }: HeroSectionProps): React.JSX.Element;
309
+
310
+ interface Feature {
311
+ title: string;
312
+ description: string;
313
+ icon?: React.ReactNode;
314
+ }
315
+ interface FeatureGridProps {
316
+ sectionTitle: string;
317
+ features: Feature[];
318
+ columns?: 2 | 3 | 4;
319
+ className?: string;
320
+ }
321
+ declare function FeatureGrid({ sectionTitle, features, columns, className, }: FeatureGridProps): React.JSX.Element;
322
+
323
+ interface PricingPlan {
324
+ name: string;
325
+ target: string;
326
+ /** Price shown when billing = "monthly". Number for auto-format, string for "Custom" / "Free" */
327
+ price: string | number;
328
+ /** Annual price (monthly equivalent). Omit to hide the billing toggle for this plan. */
329
+ annualPrice?: string | number;
330
+ priceSuffix?: string;
331
+ badge?: string;
332
+ features: string[];
333
+ ctaText: string;
334
+ ctaHref?: string;
335
+ cta?: React.ReactNode;
336
+ /** Highlight this card — gradient border + glow */
337
+ isPrimary?: boolean;
338
+ featured?: boolean;
339
+ }
340
+ interface PricingTableProps {
341
+ sectionTitle?: string;
342
+ label?: string;
343
+ heading?: string;
344
+ subheading?: string;
345
+ plans: PricingPlan[];
346
+ priceSuffix?: string;
347
+ /** Show monthly / annual billing toggle */
348
+ showToggle?: boolean;
349
+ /** "Save X%" label on the annual toggle option */
350
+ annualSavingsLabel?: string;
351
+ className?: string;
352
+ }
353
+ declare function PricingTable({ sectionTitle, label, heading, subheading, plans, priceSuffix, showToggle, annualSavingsLabel, className, }: PricingTableProps): React.JSX.Element;
354
+
355
+ interface TestimonialReview {
356
+ author: string;
357
+ company: string;
358
+ quote: string;
359
+ video?: string;
360
+ thumbnail?: string;
361
+ vertical?: string;
362
+ hidden?: boolean;
363
+ }
364
+ interface TestimonialsData {
365
+ label: string;
366
+ title: string;
367
+ description?: string;
368
+ vertical_labels?: Record<string, string>;
369
+ reviews: TestimonialReview[];
370
+ }
371
+ interface TestimonialsCarouselProps {
372
+ data: TestimonialsData;
373
+ filterByVertical?: string;
374
+ className?: string;
375
+ }
376
+ interface TestimonialsSectionProps {
377
+ data: TestimonialsData;
378
+ filterByVertical?: string;
379
+ }
380
+ declare function TestimonialsCarousel({ data, filterByVertical, className, }: TestimonialsCarouselProps): React.JSX.Element | null;
381
+ declare function TestimonialsSection({ data, filterByVertical }: TestimonialsSectionProps): React.JSX.Element;
382
+ /** @deprecated Use TestimonialsCarousel */
383
+ declare const TestimonialCarousel: typeof TestimonialsCarousel;
384
+ type TestimonialCarouselProps = TestimonialsCarouselProps;
385
+
386
+ interface UseCase {
387
+ title: string;
388
+ subtitle: string;
389
+ tracking: string;
390
+ icon: string;
391
+ }
392
+ interface UseCasesData {
393
+ label: string;
394
+ title: string;
395
+ cards: UseCase[];
396
+ }
397
+ interface UseCasesSectionProps {
398
+ data: UseCasesData;
399
+ /** Extend or override the default icon map (lucide component names → components). */
400
+ iconMap?: Record<string, ComponentType<{
401
+ className?: string;
402
+ }>>;
403
+ }
404
+ declare function UseCasesSection({ data, iconMap }: UseCasesSectionProps): React.JSX.Element;
405
+
406
+ interface StackRow {
407
+ deliverable: string;
408
+ value: string;
409
+ note?: string;
410
+ }
411
+ interface StackBlock {
412
+ title: string;
413
+ subtitle?: string;
414
+ rows: StackRow[];
415
+ }
416
+ interface ValueStackData {
417
+ label: string;
418
+ title: string;
419
+ body?: string;
420
+ setup_block: StackBlock;
421
+ ongoing_block: StackBlock;
422
+ totals: {
423
+ monthly_label: string;
424
+ monthly_value: string;
425
+ setup_label: string;
426
+ setup_value: string;
427
+ };
428
+ investment: {
429
+ label: string;
430
+ value: string;
431
+ note?: string;
432
+ };
433
+ }
434
+ interface ValueStackSectionProps {
435
+ data: ValueStackData;
436
+ }
437
+ declare function ValueStackSection({ data }: ValueStackSectionProps): React.JSX.Element;
438
+
439
+ interface TechItem {
440
+ name: string;
441
+ icon: React.ReactNode;
442
+ }
443
+ interface TechCarouselProps {
444
+ items: TechItem[];
445
+ className?: string;
446
+ speed?: "normal" | "slow";
447
+ reverse?: boolean;
448
+ hoverColor?: string;
449
+ }
450
+ declare function TechCarousel({ items, className, speed, reverse, hoverColor, }: TechCarouselProps): React.JSX.Element;
451
+
452
+ interface FooterLink {
453
+ label: string;
454
+ href: string;
455
+ }
456
+ interface FooterProps {
457
+ copyrightText: string;
458
+ links: FooterLink[];
459
+ className?: string;
460
+ children?: React.ReactNode;
461
+ }
462
+ declare function Footer({ copyrightText, links, className, children, }: FooterProps): React.JSX.Element;
463
+
464
+ interface SocialProofItem {
465
+ label: string;
466
+ value: string;
467
+ }
468
+ interface SocialProofProps {
469
+ items: SocialProofItem[];
470
+ logos?: React.ReactNode[];
471
+ className?: string;
472
+ }
473
+ declare function SocialProof({ items, logos, className }: SocialProofProps): React.JSX.Element;
474
+
475
+ interface FaqItem {
476
+ question: string;
477
+ answer: string;
478
+ }
479
+ interface FaqProps {
480
+ sectionTitle?: string;
481
+ label?: string;
482
+ heading?: string;
483
+ subheading?: string;
484
+ items: FaqItem[];
485
+ /** "single" = only one open at a time (default) | "multi" = multiple can be open */
486
+ mode?: "single" | "multi";
487
+ className?: string;
488
+ }
489
+ declare function Faq({ sectionTitle, label, heading, subheading, items, mode, className, }: FaqProps): React.JSX.Element;
490
+
491
+ interface ComparisonRow {
492
+ feature: string;
493
+ values: (boolean | string)[];
494
+ }
495
+ interface ComparisonTableProps {
496
+ columns: string[];
497
+ rows: ComparisonRow[];
498
+ highlightColumn?: number;
499
+ className?: string;
500
+ }
501
+ declare function ComparisonTable({ columns, rows, highlightColumn, className, }: ComparisonTableProps): React.JSX.Element;
502
+
503
+ interface HeroCanvasProps {
504
+ /** Accent node color (default WMM pearl-aqua `#8fccb6`). */
505
+ accentColor?: string;
506
+ /** Base node + connection-line color (default WMM periwinkle `#7388cf`). */
507
+ baseColor?: string;
508
+ /** Fixed particle count. Omit for responsive (350 mobile / 800 desktop). */
509
+ density?: number;
510
+ /** Wrapper class. Defaults to an absolute-fill, pointer-transparent layer. */
511
+ className?: string;
512
+ }
513
+ declare function HeroCanvas({ accentColor, baseColor, density, className, }: HeroCanvasProps): React.JSX.Element;
514
+
515
+ interface WaveDef {
516
+ yOffset: number;
517
+ amplitude: number;
518
+ freq: number;
519
+ speed: number;
520
+ color: string;
521
+ opacity: number;
522
+ }
523
+ /** WMM default palette: pearl-aqua → teal → periwinkle → space-cadet navy. */
524
+ declare const DEFAULT_WAVES: WaveDef[];
525
+ interface WaveCanvasProps {
526
+ /** Wave layers (default WMM palette). */
527
+ waves?: WaveDef[];
528
+ className?: string;
529
+ }
530
+ declare function WaveCanvas({ waves, className }: WaveCanvasProps): React.JSX.Element;
531
+
532
+ export { AvatarGroup, type AvatarGroupProps, type AvatarItem, type BentoCell, BentoGrid, type BentoGridProps, CTABanner, type CTABannerData, type CTABannerProps, CaseStudiesSection, type CaseStudiesSectionProps, type CaseStudy, type CaseStudyResult, type ComparisonRow, ComparisonTable, type ComparisonTableProps, ContactForm, type ContactFormData, type ContactFormField, type ContactFormProps, DEFAULT_WAVES, FadeUp, Faq, type FaqItem, type FaqProps, type Feature, FeatureGrid, type FeatureGridProps, Footer, type FooterLink, type FooterProps, HeroCanvas, type HeroCanvasProps, HeroSection, type HeroSectionProps, LayeredButton, LogoCloud, type LogoCloudProps, type LogoItem, Marquee, type MarqueeProps, NavBar, type NavBarData, type NavBarProps, type NavLink, type PricingPlan, PricingTable, type PricingTableProps, type ProcessStep, ProcessSteps, type ProcessStepsProps, ScrollReveal, type ScrollRevealProps, SectionGlow, type SectionGlowProps, SectionIntro, type SectionIntroProps, SectionLabel, type SectionLabelProps, type SectionLabelVariant, SocialProof, type SocialProofItem, type SocialProofProps, type StackBlock, type StackRow, type StatItem, StatsSection, type StatsSectionProps, TechCarousel, type TechCarouselProps, type TechItem, type TestimonialReview as Testimonial, TestimonialCarousel, type TestimonialCarouselProps, type TestimonialReview, TestimonialsCarousel, type TestimonialsCarouselProps, type TestimonialsData, TestimonialsSection, type TestimonialsSectionProps, TextRotator, type TextRotatorProps, type UseCase, type UseCasesData, UseCasesSection, type UseCasesSectionProps, type ValueStackData, ValueStackSection, type ValueStackSectionProps, WaveCanvas, type WaveCanvasProps, type WaveDef };