@opensite/ui 2.8.8 → 2.9.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 (147) hide show
  1. package/dist/about-culture-tabs.cjs +174 -174
  2. package/dist/about-culture-tabs.js +174 -174
  3. package/dist/about-developer-profile.cjs +200 -200
  4. package/dist/about-developer-profile.js +198 -198
  5. package/dist/about-developer-story.cjs +142 -142
  6. package/dist/about-developer-story.js +142 -142
  7. package/dist/about-mission-dual-image.cjs +142 -142
  8. package/dist/about-mission-dual-image.js +142 -142
  9. package/dist/about-mission-features.cjs +142 -142
  10. package/dist/about-mission-features.js +142 -142
  11. package/dist/about-network-spotlight.cjs +142 -142
  12. package/dist/about-network-spotlight.js +142 -142
  13. package/dist/about-story-expertise.cjs +142 -142
  14. package/dist/about-story-expertise.js +142 -142
  15. package/dist/about-streamline-team.cjs +142 -142
  16. package/dist/about-streamline-team.js +142 -142
  17. package/dist/carousel-feature-badge.cjs +162 -42
  18. package/dist/carousel-feature-badge.d.cts +14 -1
  19. package/dist/carousel-feature-badge.d.ts +14 -1
  20. package/dist/carousel-feature-badge.js +163 -43
  21. package/dist/community-initiatives.cjs +142 -142
  22. package/dist/community-initiatives.js +142 -142
  23. package/dist/components.cjs +723 -1378
  24. package/dist/components.d.cts +0 -2
  25. package/dist/components.d.ts +0 -2
  26. package/dist/components.js +633 -1287
  27. package/dist/contact-map.cjs +14 -1083
  28. package/dist/contact-map.d.cts +13 -3
  29. package/dist/contact-map.d.ts +13 -3
  30. package/dist/contact-map.js +14 -1083
  31. package/dist/cta-feature-checklist.cjs +142 -142
  32. package/dist/cta-feature-checklist.js +142 -142
  33. package/dist/faq-numbered-grid.cjs +142 -142
  34. package/dist/faq-numbered-grid.js +142 -142
  35. package/dist/feature-animated-carousel.cjs +142 -142
  36. package/dist/feature-animated-carousel.js +142 -142
  37. package/dist/feature-bento-utilities.cjs +142 -142
  38. package/dist/feature-bento-utilities.js +142 -142
  39. package/dist/feature-capabilities-grid.cjs +142 -142
  40. package/dist/feature-capabilities-grid.js +142 -142
  41. package/dist/feature-category-image-cards.cjs +142 -142
  42. package/dist/feature-category-image-cards.js +142 -142
  43. package/dist/feature-icon-grid-bordered.cjs +142 -142
  44. package/dist/feature-icon-grid-bordered.js +142 -142
  45. package/dist/feature-icon-grid-muted.cjs +142 -142
  46. package/dist/feature-icon-grid-muted.js +142 -142
  47. package/dist/feature-numbered-cards.cjs +142 -142
  48. package/dist/feature-numbered-cards.js +142 -142
  49. package/dist/feature-three-column-values.cjs +142 -142
  50. package/dist/feature-three-column-values.js +142 -142
  51. package/dist/hero-ad-campaign-expert.cjs +142 -142
  52. package/dist/hero-ad-campaign-expert.js +142 -142
  53. package/dist/hero-adaptable-product-grid.cjs +142 -142
  54. package/dist/hero-adaptable-product-grid.js +142 -142
  55. package/dist/hero-agency-animated-images.cjs +142 -142
  56. package/dist/hero-agency-animated-images.js +142 -142
  57. package/dist/hero-announcement-badge.cjs +142 -142
  58. package/dist/hero-announcement-badge.js +142 -142
  59. package/dist/hero-badge-image-split.cjs +142 -142
  60. package/dist/hero-badge-image-split.js +142 -142
  61. package/dist/hero-business-carousel-dots.cjs +142 -142
  62. package/dist/hero-business-carousel-dots.js +142 -142
  63. package/dist/hero-business-operations-mosaic.cjs +142 -142
  64. package/dist/hero-business-operations-mosaic.js +142 -142
  65. package/dist/hero-conversation-intelligence.cjs +142 -142
  66. package/dist/hero-conversation-intelligence.js +142 -142
  67. package/dist/hero-creative-studio-stacked.cjs +142 -142
  68. package/dist/hero-creative-studio-stacked.js +142 -142
  69. package/dist/hero-crm-streamlined.cjs +142 -142
  70. package/dist/hero-crm-streamlined.js +142 -142
  71. package/dist/hero-customer-support-layered.cjs +142 -142
  72. package/dist/hero-customer-support-layered.js +142 -142
  73. package/dist/hero-design-showcase-logos.cjs +142 -142
  74. package/dist/hero-design-showcase-logos.js +142 -142
  75. package/dist/hero-design-system-3d.cjs +142 -142
  76. package/dist/hero-design-system-3d.js +142 -142
  77. package/dist/hero-developer-tools-code.cjs +142 -142
  78. package/dist/hero-developer-tools-code.js +142 -142
  79. package/dist/hero-digital-agency-fullscreen.cjs +142 -142
  80. package/dist/hero-digital-agency-fullscreen.js +142 -142
  81. package/dist/hero-ecommerce-product-showcase.cjs +174 -174
  82. package/dist/hero-ecommerce-product-showcase.js +174 -174
  83. package/dist/hero-event-registration.cjs +142 -142
  84. package/dist/hero-event-registration.js +142 -142
  85. package/dist/hero-fullscreen-background-image.cjs +142 -142
  86. package/dist/hero-fullscreen-background-image.js +142 -142
  87. package/dist/hero-gradient-avatars-rating.cjs +142 -142
  88. package/dist/hero-gradient-avatars-rating.js +142 -142
  89. package/dist/hero-gradient-client-focused.cjs +142 -142
  90. package/dist/hero-gradient-client-focused.js +142 -142
  91. package/dist/hero-hiring-animated-text.cjs +142 -142
  92. package/dist/hero-hiring-animated-text.js +142 -142
  93. package/dist/hero-image-left-content.cjs +142 -142
  94. package/dist/hero-image-left-content.js +142 -142
  95. package/dist/hero-innovation-image-grid.cjs +142 -142
  96. package/dist/hero-innovation-image-grid.js +142 -142
  97. package/dist/hero-mental-health-team.cjs +142 -142
  98. package/dist/hero-mental-health-team.js +142 -142
  99. package/dist/hero-minimal-centered-dark.cjs +174 -174
  100. package/dist/hero-minimal-centered-dark.js +174 -174
  101. package/dist/hero-presentation-platform-video.cjs +142 -142
  102. package/dist/hero-presentation-platform-video.js +142 -142
  103. package/dist/hero-product-showcase-floating.cjs +174 -174
  104. package/dist/hero-product-showcase-floating.js +174 -174
  105. package/dist/hero-shared-inbox-layered.cjs +142 -142
  106. package/dist/hero-shared-inbox-layered.js +142 -142
  107. package/dist/hero-software-growth-video-dialog.cjs +142 -142
  108. package/dist/hero-software-growth-video-dialog.js +142 -142
  109. package/dist/hero-spiral-pattern-cards.cjs +174 -174
  110. package/dist/hero-spiral-pattern-cards.js +174 -174
  111. package/dist/hero-split-geometric-shapes.cjs +142 -142
  112. package/dist/hero-split-geometric-shapes.js +142 -142
  113. package/dist/hero-startup-launch-cta.cjs +174 -174
  114. package/dist/hero-startup-launch-cta.js +174 -174
  115. package/dist/hero-stats-social-proof.cjs +174 -174
  116. package/dist/hero-stats-social-proof.js +174 -174
  117. package/dist/hero-task-timer-animated.cjs +142 -142
  118. package/dist/hero-task-timer-animated.js +142 -142
  119. package/dist/hero-testimonial-image-grid.cjs +142 -142
  120. package/dist/hero-testimonial-image-grid.js +142 -142
  121. package/dist/hero-therapy-testimonial-grid.cjs +142 -142
  122. package/dist/hero-therapy-testimonial-grid.js +142 -142
  123. package/dist/hero-ui-library-showcase.cjs +142 -142
  124. package/dist/hero-ui-library-showcase.js +142 -142
  125. package/dist/hero-video-background-dark.cjs +174 -174
  126. package/dist/hero-video-background-dark.js +174 -174
  127. package/dist/hero-video-dialog-gradient.cjs +142 -142
  128. package/dist/hero-video-dialog-gradient.js +142 -142
  129. package/dist/hero-video-overlay-stars.cjs +142 -142
  130. package/dist/hero-video-overlay-stars.js +142 -142
  131. package/dist/hero-welcome-asymmetric-images.cjs +142 -142
  132. package/dist/hero-welcome-asymmetric-images.js +142 -142
  133. package/dist/index.cjs +725 -1380
  134. package/dist/index.d.cts +0 -2
  135. package/dist/index.d.ts +0 -2
  136. package/dist/index.js +634 -1288
  137. package/dist/registry.cjs +2201 -2827
  138. package/dist/registry.js +948 -1574
  139. package/dist/testimonials-masonry-grid.cjs +142 -142
  140. package/dist/testimonials-masonry-grid.js +142 -142
  141. package/dist/testimonials-stats-header.cjs +159 -159
  142. package/dist/testimonials-stats-header.js +159 -159
  143. package/package.json +4 -7
  144. package/dist/geo-map.cjs +0 -1117
  145. package/dist/geo-map.d.cts +0 -92
  146. package/dist/geo-map.d.ts +0 -92
  147. package/dist/geo-map.js +0 -1095
@@ -387,6 +387,148 @@ var Section = React3__default.forwardRef(
387
387
  }
388
388
  );
389
389
  Section.displayName = "Section";
390
+ var baseStyles = [
391
+ // Layout
392
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
393
+ // Typography - using CSS variables with sensible defaults
394
+ "font-[var(--button-font-family,inherit)]",
395
+ "font-[var(--button-font-weight,500)]",
396
+ "tracking-[var(--button-letter-spacing,0)]",
397
+ "leading-[var(--button-line-height,1.25)]",
398
+ "[text-transform:var(--button-text-transform,none)]",
399
+ "text-sm",
400
+ // Border radius
401
+ "rounded-[var(--button-radius,var(--radius,0.375rem))]",
402
+ // Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
403
+ "[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
404
+ // Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
405
+ "[box-shadow:var(--button-shadow,none)]",
406
+ "hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
407
+ // Disabled state
408
+ "disabled:pointer-events-none disabled:opacity-50",
409
+ // SVG handling
410
+ "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
411
+ // Focus styles
412
+ "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
413
+ // Invalid state
414
+ "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
415
+ ].join(" ");
416
+ var buttonVariants = cva(baseStyles, {
417
+ variants: {
418
+ variant: {
419
+ // Default (Primary) variant - full customization
420
+ default: [
421
+ "bg-[var(--button-default-bg,hsl(var(--primary)))]",
422
+ "text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
423
+ "border-[length:var(--button-default-border-width,0px)]",
424
+ "border-[color:var(--button-default-border,transparent)]",
425
+ "[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
426
+ "hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
427
+ "hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
428
+ "hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
429
+ "hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
430
+ ].join(" "),
431
+ // Destructive variant - full customization
432
+ destructive: [
433
+ "bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
434
+ "text-[var(--button-destructive-fg,white)]",
435
+ "border-[length:var(--button-destructive-border-width,0px)]",
436
+ "border-[color:var(--button-destructive-border,transparent)]",
437
+ "[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
438
+ "hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
439
+ "hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
440
+ "hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
441
+ "hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
442
+ "focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
443
+ "dark:bg-destructive/60"
444
+ ].join(" "),
445
+ // Outline variant - full customization with proper border handling
446
+ outline: [
447
+ "bg-[var(--button-outline-bg,hsl(var(--background)))]",
448
+ "text-[var(--button-outline-fg,inherit)]",
449
+ "border-[length:var(--button-outline-border-width,1px)]",
450
+ "border-[color:var(--button-outline-border,hsl(var(--border)))]",
451
+ "[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
452
+ "hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
453
+ "hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
454
+ "hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
455
+ "hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
456
+ "dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
457
+ ].join(" "),
458
+ // Secondary variant - full customization
459
+ secondary: [
460
+ "bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
461
+ "text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
462
+ "border-[length:var(--button-secondary-border-width,0px)]",
463
+ "border-[color:var(--button-secondary-border,transparent)]",
464
+ "[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
465
+ "hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
466
+ "hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
467
+ "hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
468
+ "hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
469
+ ].join(" "),
470
+ // Ghost variant - full customization
471
+ ghost: [
472
+ "bg-[var(--button-ghost-bg,transparent)]",
473
+ "text-[var(--button-ghost-fg,inherit)]",
474
+ "border-[length:var(--button-ghost-border-width,0px)]",
475
+ "border-[color:var(--button-ghost-border,transparent)]",
476
+ "[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
477
+ "hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
478
+ "hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
479
+ "hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
480
+ "hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
481
+ "dark:hover:bg-accent/50"
482
+ ].join(" "),
483
+ // Link variant - full customization
484
+ link: [
485
+ "bg-[var(--button-link-bg,transparent)]",
486
+ "text-[var(--button-link-fg,hsl(var(--primary)))]",
487
+ "border-[length:var(--button-link-border-width,0px)]",
488
+ "border-[color:var(--button-link-border,transparent)]",
489
+ "[box-shadow:var(--button-link-shadow,none)]",
490
+ "hover:bg-[var(--button-link-hover-bg,transparent)]",
491
+ "hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
492
+ "hover:[box-shadow:var(--button-link-shadow-hover,none)]",
493
+ "underline-offset-4 hover:underline"
494
+ ].join(" ")
495
+ },
496
+ size: {
497
+ default: [
498
+ "h-[var(--button-height-md,2.25rem)]",
499
+ "px-[var(--button-padding-x-md,1rem)]",
500
+ "py-[var(--button-padding-y-md,0.5rem)]",
501
+ "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
502
+ ].join(" "),
503
+ sm: [
504
+ "h-[var(--button-height-sm,2rem)]",
505
+ "px-[var(--button-padding-x-sm,0.75rem)]",
506
+ "py-[var(--button-padding-y-sm,0.25rem)]",
507
+ "gap-1.5",
508
+ "has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
509
+ ].join(" "),
510
+ md: [
511
+ "h-[var(--button-height-md,2.25rem)]",
512
+ "px-[var(--button-padding-x-md,1rem)]",
513
+ "py-[var(--button-padding-y-md,0.5rem)]",
514
+ "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
515
+ ].join(" "),
516
+ lg: [
517
+ "h-[var(--button-height-lg,2.5rem)]",
518
+ "px-[var(--button-padding-x-lg,1.5rem)]",
519
+ "py-[var(--button-padding-y-lg,0.5rem)]",
520
+ "has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
521
+ ].join(" "),
522
+ icon: "size-[var(--button-height-md,2.25rem)]",
523
+ "icon-sm": "size-[var(--button-height-sm,2rem)]",
524
+ "icon-lg": "size-[var(--button-height-lg,2.5rem)]"
525
+ }
526
+ },
527
+ defaultVariants: {
528
+ variant: "default",
529
+ size: "default"
530
+ }
531
+ });
390
532
  function normalizePhoneNumber(input) {
391
533
  const trimmed = input.trim();
392
534
  if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -565,148 +707,6 @@ function useNavigation({
565
707
  handleClick
566
708
  };
567
709
  }
568
- var baseStyles = [
569
- // Layout
570
- "inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
571
- // Typography - using CSS variables with sensible defaults
572
- "font-[var(--button-font-family,inherit)]",
573
- "font-[var(--button-font-weight,500)]",
574
- "tracking-[var(--button-letter-spacing,0)]",
575
- "leading-[var(--button-line-height,1.25)]",
576
- "[text-transform:var(--button-text-transform,none)]",
577
- "text-sm",
578
- // Border radius
579
- "rounded-[var(--button-radius,var(--radius,0.375rem))]",
580
- // Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
581
- "[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
582
- // Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
583
- "[box-shadow:var(--button-shadow,none)]",
584
- "hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
585
- // Disabled state
586
- "disabled:pointer-events-none disabled:opacity-50",
587
- // SVG handling
588
- "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
589
- // Focus styles
590
- "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
591
- // Invalid state
592
- "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
593
- ].join(" ");
594
- var buttonVariants = cva(baseStyles, {
595
- variants: {
596
- variant: {
597
- // Default (Primary) variant - full customization
598
- default: [
599
- "bg-[var(--button-default-bg,hsl(var(--primary)))]",
600
- "text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
601
- "border-[length:var(--button-default-border-width,0px)]",
602
- "border-[color:var(--button-default-border,transparent)]",
603
- "[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
604
- "hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
605
- "hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
606
- "hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
607
- "hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
608
- ].join(" "),
609
- // Destructive variant - full customization
610
- destructive: [
611
- "bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
612
- "text-[var(--button-destructive-fg,white)]",
613
- "border-[length:var(--button-destructive-border-width,0px)]",
614
- "border-[color:var(--button-destructive-border,transparent)]",
615
- "[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
616
- "hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
617
- "hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
618
- "hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
619
- "hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
620
- "focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
621
- "dark:bg-destructive/60"
622
- ].join(" "),
623
- // Outline variant - full customization with proper border handling
624
- outline: [
625
- "bg-[var(--button-outline-bg,hsl(var(--background)))]",
626
- "text-[var(--button-outline-fg,inherit)]",
627
- "border-[length:var(--button-outline-border-width,1px)]",
628
- "border-[color:var(--button-outline-border,hsl(var(--border)))]",
629
- "[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
630
- "hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
631
- "hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
632
- "hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
633
- "hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
634
- "dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
635
- ].join(" "),
636
- // Secondary variant - full customization
637
- secondary: [
638
- "bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
639
- "text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
640
- "border-[length:var(--button-secondary-border-width,0px)]",
641
- "border-[color:var(--button-secondary-border,transparent)]",
642
- "[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
643
- "hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
644
- "hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
645
- "hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
646
- "hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
647
- ].join(" "),
648
- // Ghost variant - full customization
649
- ghost: [
650
- "bg-[var(--button-ghost-bg,transparent)]",
651
- "text-[var(--button-ghost-fg,inherit)]",
652
- "border-[length:var(--button-ghost-border-width,0px)]",
653
- "border-[color:var(--button-ghost-border,transparent)]",
654
- "[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
655
- "hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
656
- "hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
657
- "hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
658
- "hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
659
- "dark:hover:bg-accent/50"
660
- ].join(" "),
661
- // Link variant - full customization
662
- link: [
663
- "bg-[var(--button-link-bg,transparent)]",
664
- "text-[var(--button-link-fg,hsl(var(--primary)))]",
665
- "border-[length:var(--button-link-border-width,0px)]",
666
- "border-[color:var(--button-link-border,transparent)]",
667
- "[box-shadow:var(--button-link-shadow,none)]",
668
- "hover:bg-[var(--button-link-hover-bg,transparent)]",
669
- "hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
670
- "hover:[box-shadow:var(--button-link-shadow-hover,none)]",
671
- "underline-offset-4 hover:underline"
672
- ].join(" ")
673
- },
674
- size: {
675
- default: [
676
- "h-[var(--button-height-md,2.25rem)]",
677
- "px-[var(--button-padding-x-md,1rem)]",
678
- "py-[var(--button-padding-y-md,0.5rem)]",
679
- "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
680
- ].join(" "),
681
- sm: [
682
- "h-[var(--button-height-sm,2rem)]",
683
- "px-[var(--button-padding-x-sm,0.75rem)]",
684
- "py-[var(--button-padding-y-sm,0.25rem)]",
685
- "gap-1.5",
686
- "has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
687
- ].join(" "),
688
- md: [
689
- "h-[var(--button-height-md,2.25rem)]",
690
- "px-[var(--button-padding-x-md,1rem)]",
691
- "py-[var(--button-padding-y-md,0.5rem)]",
692
- "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
693
- ].join(" "),
694
- lg: [
695
- "h-[var(--button-height-lg,2.5rem)]",
696
- "px-[var(--button-padding-x-lg,1.5rem)]",
697
- "py-[var(--button-padding-y-lg,0.5rem)]",
698
- "has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
699
- ].join(" "),
700
- icon: "size-[var(--button-height-md,2.25rem)]",
701
- "icon-sm": "size-[var(--button-height-sm,2rem)]",
702
- "icon-lg": "size-[var(--button-height-lg,2.5rem)]"
703
- }
704
- },
705
- defaultVariants: {
706
- variant: "default",
707
- size: "default"
708
- }
709
- });
710
710
  var Pressable = React3.forwardRef(
711
711
  ({
712
712
  children,
@@ -407,6 +407,148 @@ var Section = React3__namespace.default.forwardRef(
407
407
  }
408
408
  );
409
409
  Section.displayName = "Section";
410
+ var baseStyles = [
411
+ // Layout
412
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
413
+ // Typography - using CSS variables with sensible defaults
414
+ "font-[var(--button-font-family,inherit)]",
415
+ "font-[var(--button-font-weight,500)]",
416
+ "tracking-[var(--button-letter-spacing,0)]",
417
+ "leading-[var(--button-line-height,1.25)]",
418
+ "[text-transform:var(--button-text-transform,none)]",
419
+ "text-sm",
420
+ // Border radius
421
+ "rounded-[var(--button-radius,var(--radius,0.375rem))]",
422
+ // Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
423
+ "[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
424
+ // Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
425
+ "[box-shadow:var(--button-shadow,none)]",
426
+ "hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
427
+ // Disabled state
428
+ "disabled:pointer-events-none disabled:opacity-50",
429
+ // SVG handling
430
+ "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
431
+ // Focus styles
432
+ "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
433
+ // Invalid state
434
+ "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
435
+ ].join(" ");
436
+ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
437
+ variants: {
438
+ variant: {
439
+ // Default (Primary) variant - full customization
440
+ default: [
441
+ "bg-[var(--button-default-bg,hsl(var(--primary)))]",
442
+ "text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
443
+ "border-[length:var(--button-default-border-width,0px)]",
444
+ "border-[color:var(--button-default-border,transparent)]",
445
+ "[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
446
+ "hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
447
+ "hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
448
+ "hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
449
+ "hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
450
+ ].join(" "),
451
+ // Destructive variant - full customization
452
+ destructive: [
453
+ "bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
454
+ "text-[var(--button-destructive-fg,white)]",
455
+ "border-[length:var(--button-destructive-border-width,0px)]",
456
+ "border-[color:var(--button-destructive-border,transparent)]",
457
+ "[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
458
+ "hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
459
+ "hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
460
+ "hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
461
+ "hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
462
+ "focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
463
+ "dark:bg-destructive/60"
464
+ ].join(" "),
465
+ // Outline variant - full customization with proper border handling
466
+ outline: [
467
+ "bg-[var(--button-outline-bg,hsl(var(--background)))]",
468
+ "text-[var(--button-outline-fg,inherit)]",
469
+ "border-[length:var(--button-outline-border-width,1px)]",
470
+ "border-[color:var(--button-outline-border,hsl(var(--border)))]",
471
+ "[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
472
+ "hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
473
+ "hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
474
+ "hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
475
+ "hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
476
+ "dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
477
+ ].join(" "),
478
+ // Secondary variant - full customization
479
+ secondary: [
480
+ "bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
481
+ "text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
482
+ "border-[length:var(--button-secondary-border-width,0px)]",
483
+ "border-[color:var(--button-secondary-border,transparent)]",
484
+ "[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
485
+ "hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
486
+ "hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
487
+ "hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
488
+ "hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
489
+ ].join(" "),
490
+ // Ghost variant - full customization
491
+ ghost: [
492
+ "bg-[var(--button-ghost-bg,transparent)]",
493
+ "text-[var(--button-ghost-fg,inherit)]",
494
+ "border-[length:var(--button-ghost-border-width,0px)]",
495
+ "border-[color:var(--button-ghost-border,transparent)]",
496
+ "[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
497
+ "hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
498
+ "hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
499
+ "hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
500
+ "hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
501
+ "dark:hover:bg-accent/50"
502
+ ].join(" "),
503
+ // Link variant - full customization
504
+ link: [
505
+ "bg-[var(--button-link-bg,transparent)]",
506
+ "text-[var(--button-link-fg,hsl(var(--primary)))]",
507
+ "border-[length:var(--button-link-border-width,0px)]",
508
+ "border-[color:var(--button-link-border,transparent)]",
509
+ "[box-shadow:var(--button-link-shadow,none)]",
510
+ "hover:bg-[var(--button-link-hover-bg,transparent)]",
511
+ "hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
512
+ "hover:[box-shadow:var(--button-link-shadow-hover,none)]",
513
+ "underline-offset-4 hover:underline"
514
+ ].join(" ")
515
+ },
516
+ size: {
517
+ default: [
518
+ "h-[var(--button-height-md,2.25rem)]",
519
+ "px-[var(--button-padding-x-md,1rem)]",
520
+ "py-[var(--button-padding-y-md,0.5rem)]",
521
+ "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
522
+ ].join(" "),
523
+ sm: [
524
+ "h-[var(--button-height-sm,2rem)]",
525
+ "px-[var(--button-padding-x-sm,0.75rem)]",
526
+ "py-[var(--button-padding-y-sm,0.25rem)]",
527
+ "gap-1.5",
528
+ "has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
529
+ ].join(" "),
530
+ md: [
531
+ "h-[var(--button-height-md,2.25rem)]",
532
+ "px-[var(--button-padding-x-md,1rem)]",
533
+ "py-[var(--button-padding-y-md,0.5rem)]",
534
+ "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
535
+ ].join(" "),
536
+ lg: [
537
+ "h-[var(--button-height-lg,2.5rem)]",
538
+ "px-[var(--button-padding-x-lg,1.5rem)]",
539
+ "py-[var(--button-padding-y-lg,0.5rem)]",
540
+ "has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
541
+ ].join(" "),
542
+ icon: "size-[var(--button-height-md,2.25rem)]",
543
+ "icon-sm": "size-[var(--button-height-sm,2rem)]",
544
+ "icon-lg": "size-[var(--button-height-lg,2.5rem)]"
545
+ }
546
+ },
547
+ defaultVariants: {
548
+ variant: "default",
549
+ size: "default"
550
+ }
551
+ });
410
552
  function normalizePhoneNumber(input) {
411
553
  const trimmed = input.trim();
412
554
  if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -585,148 +727,6 @@ function useNavigation({
585
727
  handleClick
586
728
  };
587
729
  }
588
- var baseStyles = [
589
- // Layout
590
- "inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
591
- // Typography - using CSS variables with sensible defaults
592
- "font-[var(--button-font-family,inherit)]",
593
- "font-[var(--button-font-weight,500)]",
594
- "tracking-[var(--button-letter-spacing,0)]",
595
- "leading-[var(--button-line-height,1.25)]",
596
- "[text-transform:var(--button-text-transform,none)]",
597
- "text-sm",
598
- // Border radius
599
- "rounded-[var(--button-radius,var(--radius,0.375rem))]",
600
- // Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
601
- "[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
602
- // Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
603
- "[box-shadow:var(--button-shadow,none)]",
604
- "hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
605
- // Disabled state
606
- "disabled:pointer-events-none disabled:opacity-50",
607
- // SVG handling
608
- "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
609
- // Focus styles
610
- "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
611
- // Invalid state
612
- "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
613
- ].join(" ");
614
- var buttonVariants = classVarianceAuthority.cva(baseStyles, {
615
- variants: {
616
- variant: {
617
- // Default (Primary) variant - full customization
618
- default: [
619
- "bg-[var(--button-default-bg,hsl(var(--primary)))]",
620
- "text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
621
- "border-[length:var(--button-default-border-width,0px)]",
622
- "border-[color:var(--button-default-border,transparent)]",
623
- "[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
624
- "hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
625
- "hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
626
- "hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
627
- "hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
628
- ].join(" "),
629
- // Destructive variant - full customization
630
- destructive: [
631
- "bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
632
- "text-[var(--button-destructive-fg,white)]",
633
- "border-[length:var(--button-destructive-border-width,0px)]",
634
- "border-[color:var(--button-destructive-border,transparent)]",
635
- "[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
636
- "hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
637
- "hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
638
- "hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
639
- "hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
640
- "focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
641
- "dark:bg-destructive/60"
642
- ].join(" "),
643
- // Outline variant - full customization with proper border handling
644
- outline: [
645
- "bg-[var(--button-outline-bg,hsl(var(--background)))]",
646
- "text-[var(--button-outline-fg,inherit)]",
647
- "border-[length:var(--button-outline-border-width,1px)]",
648
- "border-[color:var(--button-outline-border,hsl(var(--border)))]",
649
- "[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
650
- "hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
651
- "hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
652
- "hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
653
- "hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
654
- "dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
655
- ].join(" "),
656
- // Secondary variant - full customization
657
- secondary: [
658
- "bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
659
- "text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
660
- "border-[length:var(--button-secondary-border-width,0px)]",
661
- "border-[color:var(--button-secondary-border,transparent)]",
662
- "[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
663
- "hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
664
- "hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
665
- "hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
666
- "hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
667
- ].join(" "),
668
- // Ghost variant - full customization
669
- ghost: [
670
- "bg-[var(--button-ghost-bg,transparent)]",
671
- "text-[var(--button-ghost-fg,inherit)]",
672
- "border-[length:var(--button-ghost-border-width,0px)]",
673
- "border-[color:var(--button-ghost-border,transparent)]",
674
- "[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
675
- "hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
676
- "hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
677
- "hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
678
- "hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
679
- "dark:hover:bg-accent/50"
680
- ].join(" "),
681
- // Link variant - full customization
682
- link: [
683
- "bg-[var(--button-link-bg,transparent)]",
684
- "text-[var(--button-link-fg,hsl(var(--primary)))]",
685
- "border-[length:var(--button-link-border-width,0px)]",
686
- "border-[color:var(--button-link-border,transparent)]",
687
- "[box-shadow:var(--button-link-shadow,none)]",
688
- "hover:bg-[var(--button-link-hover-bg,transparent)]",
689
- "hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
690
- "hover:[box-shadow:var(--button-link-shadow-hover,none)]",
691
- "underline-offset-4 hover:underline"
692
- ].join(" ")
693
- },
694
- size: {
695
- default: [
696
- "h-[var(--button-height-md,2.25rem)]",
697
- "px-[var(--button-padding-x-md,1rem)]",
698
- "py-[var(--button-padding-y-md,0.5rem)]",
699
- "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
700
- ].join(" "),
701
- sm: [
702
- "h-[var(--button-height-sm,2rem)]",
703
- "px-[var(--button-padding-x-sm,0.75rem)]",
704
- "py-[var(--button-padding-y-sm,0.25rem)]",
705
- "gap-1.5",
706
- "has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
707
- ].join(" "),
708
- md: [
709
- "h-[var(--button-height-md,2.25rem)]",
710
- "px-[var(--button-padding-x-md,1rem)]",
711
- "py-[var(--button-padding-y-md,0.5rem)]",
712
- "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
713
- ].join(" "),
714
- lg: [
715
- "h-[var(--button-height-lg,2.5rem)]",
716
- "px-[var(--button-padding-x-lg,1.5rem)]",
717
- "py-[var(--button-padding-y-lg,0.5rem)]",
718
- "has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
719
- ].join(" "),
720
- icon: "size-[var(--button-height-md,2.25rem)]",
721
- "icon-sm": "size-[var(--button-height-sm,2rem)]",
722
- "icon-lg": "size-[var(--button-height-lg,2.5rem)]"
723
- }
724
- },
725
- defaultVariants: {
726
- variant: "default",
727
- size: "default"
728
- }
729
- });
730
730
  var Pressable = React3__namespace.forwardRef(
731
731
  ({
732
732
  children,