@opensite/ui 2.8.7 → 2.8.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/about-culture-tabs.cjs +174 -174
- package/dist/about-culture-tabs.js +174 -174
- package/dist/about-developer-profile.cjs +200 -200
- package/dist/about-developer-profile.js +198 -198
- package/dist/about-developer-story.cjs +142 -142
- package/dist/about-developer-story.js +142 -142
- package/dist/about-mission-dual-image.cjs +142 -142
- package/dist/about-mission-dual-image.js +142 -142
- package/dist/about-mission-features.cjs +142 -142
- package/dist/about-mission-features.js +142 -142
- package/dist/about-network-spotlight.cjs +142 -142
- package/dist/about-network-spotlight.js +142 -142
- package/dist/about-story-expertise.cjs +142 -142
- package/dist/about-story-expertise.js +142 -142
- package/dist/about-streamline-team.cjs +142 -142
- package/dist/about-streamline-team.js +142 -142
- package/dist/carousel-icon-sidebar.cjs +5 -4
- package/dist/carousel-icon-sidebar.js +5 -4
- package/dist/community-initiatives.cjs +142 -142
- package/dist/community-initiatives.js +142 -142
- package/dist/components.cjs +723 -1364
- package/dist/components.d.cts +0 -2
- package/dist/components.d.ts +0 -2
- package/dist/components.js +633 -1273
- package/dist/contact-map.cjs +14 -1069
- package/dist/contact-map.d.cts +13 -3
- package/dist/contact-map.d.ts +13 -3
- package/dist/contact-map.js +14 -1069
- package/dist/cta-feature-checklist.cjs +142 -142
- package/dist/cta-feature-checklist.js +142 -142
- package/dist/faq-numbered-grid.cjs +142 -142
- package/dist/faq-numbered-grid.js +142 -142
- package/dist/feature-animated-carousel.cjs +142 -142
- package/dist/feature-animated-carousel.js +142 -142
- package/dist/feature-bento-utilities.cjs +142 -142
- package/dist/feature-bento-utilities.js +142 -142
- package/dist/feature-capabilities-grid.cjs +142 -142
- package/dist/feature-capabilities-grid.js +142 -142
- package/dist/feature-category-image-cards.cjs +142 -142
- package/dist/feature-category-image-cards.js +142 -142
- package/dist/feature-icon-grid-bordered.cjs +142 -142
- package/dist/feature-icon-grid-bordered.js +142 -142
- package/dist/feature-icon-grid-muted.cjs +142 -142
- package/dist/feature-icon-grid-muted.js +142 -142
- package/dist/feature-numbered-cards.cjs +142 -142
- package/dist/feature-numbered-cards.js +142 -142
- package/dist/feature-three-column-values.cjs +142 -142
- package/dist/feature-three-column-values.js +142 -142
- package/dist/hero-ad-campaign-expert.cjs +142 -142
- package/dist/hero-ad-campaign-expert.js +142 -142
- package/dist/hero-adaptable-product-grid.cjs +142 -142
- package/dist/hero-adaptable-product-grid.js +142 -142
- package/dist/hero-agency-animated-images.cjs +142 -142
- package/dist/hero-agency-animated-images.js +142 -142
- package/dist/hero-announcement-badge.cjs +142 -142
- package/dist/hero-announcement-badge.js +142 -142
- package/dist/hero-badge-image-split.cjs +142 -142
- package/dist/hero-badge-image-split.js +142 -142
- package/dist/hero-business-carousel-dots.cjs +142 -142
- package/dist/hero-business-carousel-dots.js +142 -142
- package/dist/hero-business-operations-mosaic.cjs +142 -142
- package/dist/hero-business-operations-mosaic.js +142 -142
- package/dist/hero-conversation-intelligence.cjs +142 -142
- package/dist/hero-conversation-intelligence.js +142 -142
- package/dist/hero-creative-studio-stacked.cjs +142 -142
- package/dist/hero-creative-studio-stacked.js +142 -142
- package/dist/hero-crm-streamlined.cjs +142 -142
- package/dist/hero-crm-streamlined.js +142 -142
- package/dist/hero-customer-support-layered.cjs +142 -142
- package/dist/hero-customer-support-layered.js +142 -142
- package/dist/hero-design-showcase-logos.cjs +142 -142
- package/dist/hero-design-showcase-logos.js +142 -142
- package/dist/hero-design-system-3d.cjs +142 -142
- package/dist/hero-design-system-3d.js +142 -142
- package/dist/hero-developer-tools-code.cjs +142 -142
- package/dist/hero-developer-tools-code.js +142 -142
- package/dist/hero-digital-agency-fullscreen.cjs +142 -142
- package/dist/hero-digital-agency-fullscreen.js +142 -142
- package/dist/hero-ecommerce-product-showcase.cjs +174 -174
- package/dist/hero-ecommerce-product-showcase.js +174 -174
- package/dist/hero-event-registration.cjs +142 -142
- package/dist/hero-event-registration.js +142 -142
- package/dist/hero-fullscreen-background-image.cjs +142 -142
- package/dist/hero-fullscreen-background-image.js +142 -142
- package/dist/hero-gradient-avatars-rating.cjs +142 -142
- package/dist/hero-gradient-avatars-rating.js +142 -142
- package/dist/hero-gradient-client-focused.cjs +142 -142
- package/dist/hero-gradient-client-focused.js +142 -142
- package/dist/hero-hiring-animated-text.cjs +142 -142
- package/dist/hero-hiring-animated-text.js +142 -142
- package/dist/hero-image-left-content.cjs +142 -142
- package/dist/hero-image-left-content.js +142 -142
- package/dist/hero-innovation-image-grid.cjs +142 -142
- package/dist/hero-innovation-image-grid.js +142 -142
- package/dist/hero-mental-health-team.cjs +142 -142
- package/dist/hero-mental-health-team.js +142 -142
- package/dist/hero-minimal-centered-dark.cjs +174 -174
- package/dist/hero-minimal-centered-dark.js +174 -174
- package/dist/hero-presentation-platform-video.cjs +142 -142
- package/dist/hero-presentation-platform-video.js +142 -142
- package/dist/hero-product-showcase-floating.cjs +174 -174
- package/dist/hero-product-showcase-floating.js +174 -174
- package/dist/hero-shared-inbox-layered.cjs +142 -142
- package/dist/hero-shared-inbox-layered.js +142 -142
- package/dist/hero-software-growth-video-dialog.cjs +142 -142
- package/dist/hero-software-growth-video-dialog.js +142 -142
- package/dist/hero-spiral-pattern-cards.cjs +174 -174
- package/dist/hero-spiral-pattern-cards.js +174 -174
- package/dist/hero-split-geometric-shapes.cjs +142 -142
- package/dist/hero-split-geometric-shapes.js +142 -142
- package/dist/hero-startup-launch-cta.cjs +174 -174
- package/dist/hero-startup-launch-cta.js +174 -174
- package/dist/hero-stats-social-proof.cjs +174 -174
- package/dist/hero-stats-social-proof.js +174 -174
- package/dist/hero-task-timer-animated.cjs +142 -142
- package/dist/hero-task-timer-animated.js +142 -142
- package/dist/hero-testimonial-image-grid.cjs +142 -142
- package/dist/hero-testimonial-image-grid.js +142 -142
- package/dist/hero-therapy-testimonial-grid.cjs +142 -142
- package/dist/hero-therapy-testimonial-grid.js +142 -142
- package/dist/hero-ui-library-showcase.cjs +142 -142
- package/dist/hero-ui-library-showcase.js +142 -142
- package/dist/hero-video-background-dark.cjs +174 -174
- package/dist/hero-video-background-dark.js +174 -174
- package/dist/hero-video-dialog-gradient.cjs +142 -142
- package/dist/hero-video-dialog-gradient.js +142 -142
- package/dist/hero-video-overlay-stars.cjs +142 -142
- package/dist/hero-video-overlay-stars.js +142 -142
- package/dist/hero-welcome-asymmetric-images.cjs +142 -142
- package/dist/hero-welcome-asymmetric-images.js +142 -142
- package/dist/index.cjs +725 -1366
- package/dist/index.d.cts +0 -2
- package/dist/index.d.ts +0 -2
- package/dist/index.js +634 -1274
- package/dist/registry.cjs +2371 -2915
- package/dist/registry.js +1120 -1664
- package/dist/testimonials-large-quote.cjs +74 -43
- package/dist/testimonials-large-quote.d.cts +5 -1
- package/dist/testimonials-large-quote.d.ts +5 -1
- package/dist/testimonials-large-quote.js +74 -43
- package/dist/testimonials-logo-cards.cjs +8 -2
- package/dist/testimonials-logo-cards.js +8 -2
- package/dist/testimonials-masonry-grid.cjs +486 -69
- package/dist/testimonials-masonry-grid.d.cts +5 -1
- package/dist/testimonials-masonry-grid.d.ts +5 -1
- package/dist/testimonials-masonry-grid.js +483 -63
- package/dist/testimonials-mini-dividers.cjs +2 -3
- package/dist/testimonials-mini-dividers.js +2 -3
- package/dist/testimonials-minimal-numbered.cjs +5 -4
- package/dist/testimonials-minimal-numbered.js +5 -4
- package/dist/testimonials-parallax-number.cjs +5 -4
- package/dist/testimonials-parallax-number.js +5 -4
- package/dist/testimonials-scrolling-columns.cjs +7 -12
- package/dist/testimonials-scrolling-columns.js +7 -12
- package/dist/testimonials-stats-header.cjs +528 -87
- package/dist/testimonials-stats-header.d.cts +39 -3
- package/dist/testimonials-stats-header.d.ts +39 -3
- package/dist/testimonials-stats-header.js +523 -82
- package/package.json +4 -7
- package/dist/geo-map.cjs +0 -1103
- package/dist/geo-map.d.cts +0 -92
- package/dist/geo-map.d.ts +0 -92
- package/dist/geo-map.js +0 -1081
|
@@ -487,6 +487,148 @@ var Section = React4__default.forwardRef(
|
|
|
487
487
|
}
|
|
488
488
|
);
|
|
489
489
|
Section.displayName = "Section";
|
|
490
|
+
var baseStyles = [
|
|
491
|
+
// Layout
|
|
492
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
|
|
493
|
+
// Typography - using CSS variables with sensible defaults
|
|
494
|
+
"font-[var(--button-font-family,inherit)]",
|
|
495
|
+
"font-[var(--button-font-weight,500)]",
|
|
496
|
+
"tracking-[var(--button-letter-spacing,0)]",
|
|
497
|
+
"leading-[var(--button-line-height,1.25)]",
|
|
498
|
+
"[text-transform:var(--button-text-transform,none)]",
|
|
499
|
+
"text-sm",
|
|
500
|
+
// Border radius
|
|
501
|
+
"rounded-[var(--button-radius,var(--radius,0.375rem))]",
|
|
502
|
+
// Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
|
|
503
|
+
"[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
|
|
504
|
+
// Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
|
|
505
|
+
"[box-shadow:var(--button-shadow,none)]",
|
|
506
|
+
"hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
|
|
507
|
+
// Disabled state
|
|
508
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
509
|
+
// SVG handling
|
|
510
|
+
"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
|
|
511
|
+
// Focus styles
|
|
512
|
+
"outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
513
|
+
// Invalid state
|
|
514
|
+
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
|
|
515
|
+
].join(" ");
|
|
516
|
+
var buttonVariants = cva(baseStyles, {
|
|
517
|
+
variants: {
|
|
518
|
+
variant: {
|
|
519
|
+
// Default (Primary) variant - full customization
|
|
520
|
+
default: [
|
|
521
|
+
"bg-[var(--button-default-bg,hsl(var(--primary)))]",
|
|
522
|
+
"text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
|
|
523
|
+
"border-[length:var(--button-default-border-width,0px)]",
|
|
524
|
+
"border-[color:var(--button-default-border,transparent)]",
|
|
525
|
+
"[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
|
|
526
|
+
"hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
|
|
527
|
+
"hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
|
|
528
|
+
"hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
|
|
529
|
+
"hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
|
|
530
|
+
].join(" "),
|
|
531
|
+
// Destructive variant - full customization
|
|
532
|
+
destructive: [
|
|
533
|
+
"bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
|
|
534
|
+
"text-[var(--button-destructive-fg,white)]",
|
|
535
|
+
"border-[length:var(--button-destructive-border-width,0px)]",
|
|
536
|
+
"border-[color:var(--button-destructive-border,transparent)]",
|
|
537
|
+
"[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
|
|
538
|
+
"hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
|
|
539
|
+
"hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
|
|
540
|
+
"hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
|
|
541
|
+
"hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
|
|
542
|
+
"focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
|
|
543
|
+
"dark:bg-destructive/60"
|
|
544
|
+
].join(" "),
|
|
545
|
+
// Outline variant - full customization with proper border handling
|
|
546
|
+
outline: [
|
|
547
|
+
"bg-[var(--button-outline-bg,hsl(var(--background)))]",
|
|
548
|
+
"text-[var(--button-outline-fg,inherit)]",
|
|
549
|
+
"border-[length:var(--button-outline-border-width,1px)]",
|
|
550
|
+
"border-[color:var(--button-outline-border,hsl(var(--border)))]",
|
|
551
|
+
"[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
|
|
552
|
+
"hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
|
|
553
|
+
"hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
|
|
554
|
+
"hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
|
|
555
|
+
"hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
|
|
556
|
+
"dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
|
|
557
|
+
].join(" "),
|
|
558
|
+
// Secondary variant - full customization
|
|
559
|
+
secondary: [
|
|
560
|
+
"bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
|
|
561
|
+
"text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
|
|
562
|
+
"border-[length:var(--button-secondary-border-width,0px)]",
|
|
563
|
+
"border-[color:var(--button-secondary-border,transparent)]",
|
|
564
|
+
"[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
|
|
565
|
+
"hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
|
|
566
|
+
"hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
|
|
567
|
+
"hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
|
|
568
|
+
"hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
|
|
569
|
+
].join(" "),
|
|
570
|
+
// Ghost variant - full customization
|
|
571
|
+
ghost: [
|
|
572
|
+
"bg-[var(--button-ghost-bg,transparent)]",
|
|
573
|
+
"text-[var(--button-ghost-fg,inherit)]",
|
|
574
|
+
"border-[length:var(--button-ghost-border-width,0px)]",
|
|
575
|
+
"border-[color:var(--button-ghost-border,transparent)]",
|
|
576
|
+
"[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
|
|
577
|
+
"hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
|
|
578
|
+
"hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
|
|
579
|
+
"hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
|
|
580
|
+
"hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
|
|
581
|
+
"dark:hover:bg-accent/50"
|
|
582
|
+
].join(" "),
|
|
583
|
+
// Link variant - full customization
|
|
584
|
+
link: [
|
|
585
|
+
"bg-[var(--button-link-bg,transparent)]",
|
|
586
|
+
"text-[var(--button-link-fg,hsl(var(--primary)))]",
|
|
587
|
+
"border-[length:var(--button-link-border-width,0px)]",
|
|
588
|
+
"border-[color:var(--button-link-border,transparent)]",
|
|
589
|
+
"[box-shadow:var(--button-link-shadow,none)]",
|
|
590
|
+
"hover:bg-[var(--button-link-hover-bg,transparent)]",
|
|
591
|
+
"hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
|
|
592
|
+
"hover:[box-shadow:var(--button-link-shadow-hover,none)]",
|
|
593
|
+
"underline-offset-4 hover:underline"
|
|
594
|
+
].join(" ")
|
|
595
|
+
},
|
|
596
|
+
size: {
|
|
597
|
+
default: [
|
|
598
|
+
"h-[var(--button-height-md,2.25rem)]",
|
|
599
|
+
"px-[var(--button-padding-x-md,1rem)]",
|
|
600
|
+
"py-[var(--button-padding-y-md,0.5rem)]",
|
|
601
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
|
|
602
|
+
].join(" "),
|
|
603
|
+
sm: [
|
|
604
|
+
"h-[var(--button-height-sm,2rem)]",
|
|
605
|
+
"px-[var(--button-padding-x-sm,0.75rem)]",
|
|
606
|
+
"py-[var(--button-padding-y-sm,0.25rem)]",
|
|
607
|
+
"gap-1.5",
|
|
608
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
|
|
609
|
+
].join(" "),
|
|
610
|
+
md: [
|
|
611
|
+
"h-[var(--button-height-md,2.25rem)]",
|
|
612
|
+
"px-[var(--button-padding-x-md,1rem)]",
|
|
613
|
+
"py-[var(--button-padding-y-md,0.5rem)]",
|
|
614
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
|
|
615
|
+
].join(" "),
|
|
616
|
+
lg: [
|
|
617
|
+
"h-[var(--button-height-lg,2.5rem)]",
|
|
618
|
+
"px-[var(--button-padding-x-lg,1.5rem)]",
|
|
619
|
+
"py-[var(--button-padding-y-lg,0.5rem)]",
|
|
620
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
|
|
621
|
+
].join(" "),
|
|
622
|
+
icon: "size-[var(--button-height-md,2.25rem)]",
|
|
623
|
+
"icon-sm": "size-[var(--button-height-sm,2rem)]",
|
|
624
|
+
"icon-lg": "size-[var(--button-height-lg,2.5rem)]"
|
|
625
|
+
}
|
|
626
|
+
},
|
|
627
|
+
defaultVariants: {
|
|
628
|
+
variant: "default",
|
|
629
|
+
size: "default"
|
|
630
|
+
}
|
|
631
|
+
});
|
|
490
632
|
function normalizePhoneNumber(input) {
|
|
491
633
|
const trimmed = input.trim();
|
|
492
634
|
if (trimmed.toLowerCase().startsWith("tel:")) {
|
|
@@ -665,148 +807,6 @@ function useNavigation({
|
|
|
665
807
|
handleClick
|
|
666
808
|
};
|
|
667
809
|
}
|
|
668
|
-
var baseStyles = [
|
|
669
|
-
// Layout
|
|
670
|
-
"inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
|
|
671
|
-
// Typography - using CSS variables with sensible defaults
|
|
672
|
-
"font-[var(--button-font-family,inherit)]",
|
|
673
|
-
"font-[var(--button-font-weight,500)]",
|
|
674
|
-
"tracking-[var(--button-letter-spacing,0)]",
|
|
675
|
-
"leading-[var(--button-line-height,1.25)]",
|
|
676
|
-
"[text-transform:var(--button-text-transform,none)]",
|
|
677
|
-
"text-sm",
|
|
678
|
-
// Border radius
|
|
679
|
-
"rounded-[var(--button-radius,var(--radius,0.375rem))]",
|
|
680
|
-
// Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
|
|
681
|
-
"[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
|
|
682
|
-
// Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
|
|
683
|
-
"[box-shadow:var(--button-shadow,none)]",
|
|
684
|
-
"hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
|
|
685
|
-
// Disabled state
|
|
686
|
-
"disabled:pointer-events-none disabled:opacity-50",
|
|
687
|
-
// SVG handling
|
|
688
|
-
"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
|
|
689
|
-
// Focus styles
|
|
690
|
-
"outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
691
|
-
// Invalid state
|
|
692
|
-
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
|
|
693
|
-
].join(" ");
|
|
694
|
-
var buttonVariants = cva(baseStyles, {
|
|
695
|
-
variants: {
|
|
696
|
-
variant: {
|
|
697
|
-
// Default (Primary) variant - full customization
|
|
698
|
-
default: [
|
|
699
|
-
"bg-[var(--button-default-bg,hsl(var(--primary)))]",
|
|
700
|
-
"text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
|
|
701
|
-
"border-[length:var(--button-default-border-width,0px)]",
|
|
702
|
-
"border-[color:var(--button-default-border,transparent)]",
|
|
703
|
-
"[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
|
|
704
|
-
"hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
|
|
705
|
-
"hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
|
|
706
|
-
"hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
|
|
707
|
-
"hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
|
|
708
|
-
].join(" "),
|
|
709
|
-
// Destructive variant - full customization
|
|
710
|
-
destructive: [
|
|
711
|
-
"bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
|
|
712
|
-
"text-[var(--button-destructive-fg,white)]",
|
|
713
|
-
"border-[length:var(--button-destructive-border-width,0px)]",
|
|
714
|
-
"border-[color:var(--button-destructive-border,transparent)]",
|
|
715
|
-
"[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
|
|
716
|
-
"hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
|
|
717
|
-
"hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
|
|
718
|
-
"hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
|
|
719
|
-
"hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
|
|
720
|
-
"focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
|
|
721
|
-
"dark:bg-destructive/60"
|
|
722
|
-
].join(" "),
|
|
723
|
-
// Outline variant - full customization with proper border handling
|
|
724
|
-
outline: [
|
|
725
|
-
"bg-[var(--button-outline-bg,hsl(var(--background)))]",
|
|
726
|
-
"text-[var(--button-outline-fg,inherit)]",
|
|
727
|
-
"border-[length:var(--button-outline-border-width,1px)]",
|
|
728
|
-
"border-[color:var(--button-outline-border,hsl(var(--border)))]",
|
|
729
|
-
"[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
|
|
730
|
-
"hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
|
|
731
|
-
"hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
|
|
732
|
-
"hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
|
|
733
|
-
"hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
|
|
734
|
-
"dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
|
|
735
|
-
].join(" "),
|
|
736
|
-
// Secondary variant - full customization
|
|
737
|
-
secondary: [
|
|
738
|
-
"bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
|
|
739
|
-
"text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
|
|
740
|
-
"border-[length:var(--button-secondary-border-width,0px)]",
|
|
741
|
-
"border-[color:var(--button-secondary-border,transparent)]",
|
|
742
|
-
"[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
|
|
743
|
-
"hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
|
|
744
|
-
"hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
|
|
745
|
-
"hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
|
|
746
|
-
"hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
|
|
747
|
-
].join(" "),
|
|
748
|
-
// Ghost variant - full customization
|
|
749
|
-
ghost: [
|
|
750
|
-
"bg-[var(--button-ghost-bg,transparent)]",
|
|
751
|
-
"text-[var(--button-ghost-fg,inherit)]",
|
|
752
|
-
"border-[length:var(--button-ghost-border-width,0px)]",
|
|
753
|
-
"border-[color:var(--button-ghost-border,transparent)]",
|
|
754
|
-
"[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
|
|
755
|
-
"hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
|
|
756
|
-
"hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
|
|
757
|
-
"hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
|
|
758
|
-
"hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
|
|
759
|
-
"dark:hover:bg-accent/50"
|
|
760
|
-
].join(" "),
|
|
761
|
-
// Link variant - full customization
|
|
762
|
-
link: [
|
|
763
|
-
"bg-[var(--button-link-bg,transparent)]",
|
|
764
|
-
"text-[var(--button-link-fg,hsl(var(--primary)))]",
|
|
765
|
-
"border-[length:var(--button-link-border-width,0px)]",
|
|
766
|
-
"border-[color:var(--button-link-border,transparent)]",
|
|
767
|
-
"[box-shadow:var(--button-link-shadow,none)]",
|
|
768
|
-
"hover:bg-[var(--button-link-hover-bg,transparent)]",
|
|
769
|
-
"hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
|
|
770
|
-
"hover:[box-shadow:var(--button-link-shadow-hover,none)]",
|
|
771
|
-
"underline-offset-4 hover:underline"
|
|
772
|
-
].join(" ")
|
|
773
|
-
},
|
|
774
|
-
size: {
|
|
775
|
-
default: [
|
|
776
|
-
"h-[var(--button-height-md,2.25rem)]",
|
|
777
|
-
"px-[var(--button-padding-x-md,1rem)]",
|
|
778
|
-
"py-[var(--button-padding-y-md,0.5rem)]",
|
|
779
|
-
"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
|
|
780
|
-
].join(" "),
|
|
781
|
-
sm: [
|
|
782
|
-
"h-[var(--button-height-sm,2rem)]",
|
|
783
|
-
"px-[var(--button-padding-x-sm,0.75rem)]",
|
|
784
|
-
"py-[var(--button-padding-y-sm,0.25rem)]",
|
|
785
|
-
"gap-1.5",
|
|
786
|
-
"has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
|
|
787
|
-
].join(" "),
|
|
788
|
-
md: [
|
|
789
|
-
"h-[var(--button-height-md,2.25rem)]",
|
|
790
|
-
"px-[var(--button-padding-x-md,1rem)]",
|
|
791
|
-
"py-[var(--button-padding-y-md,0.5rem)]",
|
|
792
|
-
"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
|
|
793
|
-
].join(" "),
|
|
794
|
-
lg: [
|
|
795
|
-
"h-[var(--button-height-lg,2.5rem)]",
|
|
796
|
-
"px-[var(--button-padding-x-lg,1.5rem)]",
|
|
797
|
-
"py-[var(--button-padding-y-lg,0.5rem)]",
|
|
798
|
-
"has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
|
|
799
|
-
].join(" "),
|
|
800
|
-
icon: "size-[var(--button-height-md,2.25rem)]",
|
|
801
|
-
"icon-sm": "size-[var(--button-height-sm,2rem)]",
|
|
802
|
-
"icon-lg": "size-[var(--button-height-lg,2.5rem)]"
|
|
803
|
-
}
|
|
804
|
-
},
|
|
805
|
-
defaultVariants: {
|
|
806
|
-
variant: "default",
|
|
807
|
-
size: "default"
|
|
808
|
-
}
|
|
809
|
-
});
|
|
810
810
|
var Pressable = React4.forwardRef(
|
|
811
811
|
({
|
|
812
812
|
children,
|
|
@@ -416,6 +416,148 @@ var Section = React4__namespace.default.forwardRef(
|
|
|
416
416
|
}
|
|
417
417
|
);
|
|
418
418
|
Section.displayName = "Section";
|
|
419
|
+
var baseStyles = [
|
|
420
|
+
// Layout
|
|
421
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
|
|
422
|
+
// Typography - using CSS variables with sensible defaults
|
|
423
|
+
"font-[var(--button-font-family,inherit)]",
|
|
424
|
+
"font-[var(--button-font-weight,500)]",
|
|
425
|
+
"tracking-[var(--button-letter-spacing,0)]",
|
|
426
|
+
"leading-[var(--button-line-height,1.25)]",
|
|
427
|
+
"[text-transform:var(--button-text-transform,none)]",
|
|
428
|
+
"text-sm",
|
|
429
|
+
// Border radius
|
|
430
|
+
"rounded-[var(--button-radius,var(--radius,0.375rem))]",
|
|
431
|
+
// Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
|
|
432
|
+
"[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
|
|
433
|
+
// Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
|
|
434
|
+
"[box-shadow:var(--button-shadow,none)]",
|
|
435
|
+
"hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
|
|
436
|
+
// Disabled state
|
|
437
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
438
|
+
// SVG handling
|
|
439
|
+
"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
|
|
440
|
+
// Focus styles
|
|
441
|
+
"outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
442
|
+
// Invalid state
|
|
443
|
+
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
|
|
444
|
+
].join(" ");
|
|
445
|
+
var buttonVariants = classVarianceAuthority.cva(baseStyles, {
|
|
446
|
+
variants: {
|
|
447
|
+
variant: {
|
|
448
|
+
// Default (Primary) variant - full customization
|
|
449
|
+
default: [
|
|
450
|
+
"bg-[var(--button-default-bg,hsl(var(--primary)))]",
|
|
451
|
+
"text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
|
|
452
|
+
"border-[length:var(--button-default-border-width,0px)]",
|
|
453
|
+
"border-[color:var(--button-default-border,transparent)]",
|
|
454
|
+
"[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
|
|
455
|
+
"hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
|
|
456
|
+
"hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
|
|
457
|
+
"hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
|
|
458
|
+
"hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
|
|
459
|
+
].join(" "),
|
|
460
|
+
// Destructive variant - full customization
|
|
461
|
+
destructive: [
|
|
462
|
+
"bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
|
|
463
|
+
"text-[var(--button-destructive-fg,white)]",
|
|
464
|
+
"border-[length:var(--button-destructive-border-width,0px)]",
|
|
465
|
+
"border-[color:var(--button-destructive-border,transparent)]",
|
|
466
|
+
"[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
|
|
467
|
+
"hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
|
|
468
|
+
"hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
|
|
469
|
+
"hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
|
|
470
|
+
"hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
|
|
471
|
+
"focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
|
|
472
|
+
"dark:bg-destructive/60"
|
|
473
|
+
].join(" "),
|
|
474
|
+
// Outline variant - full customization with proper border handling
|
|
475
|
+
outline: [
|
|
476
|
+
"bg-[var(--button-outline-bg,hsl(var(--background)))]",
|
|
477
|
+
"text-[var(--button-outline-fg,inherit)]",
|
|
478
|
+
"border-[length:var(--button-outline-border-width,1px)]",
|
|
479
|
+
"border-[color:var(--button-outline-border,hsl(var(--border)))]",
|
|
480
|
+
"[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
|
|
481
|
+
"hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
|
|
482
|
+
"hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
|
|
483
|
+
"hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
|
|
484
|
+
"hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
|
|
485
|
+
"dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
|
|
486
|
+
].join(" "),
|
|
487
|
+
// Secondary variant - full customization
|
|
488
|
+
secondary: [
|
|
489
|
+
"bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
|
|
490
|
+
"text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
|
|
491
|
+
"border-[length:var(--button-secondary-border-width,0px)]",
|
|
492
|
+
"border-[color:var(--button-secondary-border,transparent)]",
|
|
493
|
+
"[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
|
|
494
|
+
"hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
|
|
495
|
+
"hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
|
|
496
|
+
"hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
|
|
497
|
+
"hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
|
|
498
|
+
].join(" "),
|
|
499
|
+
// Ghost variant - full customization
|
|
500
|
+
ghost: [
|
|
501
|
+
"bg-[var(--button-ghost-bg,transparent)]",
|
|
502
|
+
"text-[var(--button-ghost-fg,inherit)]",
|
|
503
|
+
"border-[length:var(--button-ghost-border-width,0px)]",
|
|
504
|
+
"border-[color:var(--button-ghost-border,transparent)]",
|
|
505
|
+
"[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
|
|
506
|
+
"hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
|
|
507
|
+
"hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
|
|
508
|
+
"hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
|
|
509
|
+
"hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
|
|
510
|
+
"dark:hover:bg-accent/50"
|
|
511
|
+
].join(" "),
|
|
512
|
+
// Link variant - full customization
|
|
513
|
+
link: [
|
|
514
|
+
"bg-[var(--button-link-bg,transparent)]",
|
|
515
|
+
"text-[var(--button-link-fg,hsl(var(--primary)))]",
|
|
516
|
+
"border-[length:var(--button-link-border-width,0px)]",
|
|
517
|
+
"border-[color:var(--button-link-border,transparent)]",
|
|
518
|
+
"[box-shadow:var(--button-link-shadow,none)]",
|
|
519
|
+
"hover:bg-[var(--button-link-hover-bg,transparent)]",
|
|
520
|
+
"hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
|
|
521
|
+
"hover:[box-shadow:var(--button-link-shadow-hover,none)]",
|
|
522
|
+
"underline-offset-4 hover:underline"
|
|
523
|
+
].join(" ")
|
|
524
|
+
},
|
|
525
|
+
size: {
|
|
526
|
+
default: [
|
|
527
|
+
"h-[var(--button-height-md,2.25rem)]",
|
|
528
|
+
"px-[var(--button-padding-x-md,1rem)]",
|
|
529
|
+
"py-[var(--button-padding-y-md,0.5rem)]",
|
|
530
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
|
|
531
|
+
].join(" "),
|
|
532
|
+
sm: [
|
|
533
|
+
"h-[var(--button-height-sm,2rem)]",
|
|
534
|
+
"px-[var(--button-padding-x-sm,0.75rem)]",
|
|
535
|
+
"py-[var(--button-padding-y-sm,0.25rem)]",
|
|
536
|
+
"gap-1.5",
|
|
537
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
|
|
538
|
+
].join(" "),
|
|
539
|
+
md: [
|
|
540
|
+
"h-[var(--button-height-md,2.25rem)]",
|
|
541
|
+
"px-[var(--button-padding-x-md,1rem)]",
|
|
542
|
+
"py-[var(--button-padding-y-md,0.5rem)]",
|
|
543
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
|
|
544
|
+
].join(" "),
|
|
545
|
+
lg: [
|
|
546
|
+
"h-[var(--button-height-lg,2.5rem)]",
|
|
547
|
+
"px-[var(--button-padding-x-lg,1.5rem)]",
|
|
548
|
+
"py-[var(--button-padding-y-lg,0.5rem)]",
|
|
549
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
|
|
550
|
+
].join(" "),
|
|
551
|
+
icon: "size-[var(--button-height-md,2.25rem)]",
|
|
552
|
+
"icon-sm": "size-[var(--button-height-sm,2rem)]",
|
|
553
|
+
"icon-lg": "size-[var(--button-height-lg,2.5rem)]"
|
|
554
|
+
}
|
|
555
|
+
},
|
|
556
|
+
defaultVariants: {
|
|
557
|
+
variant: "default",
|
|
558
|
+
size: "default"
|
|
559
|
+
}
|
|
560
|
+
});
|
|
419
561
|
function normalizePhoneNumber(input) {
|
|
420
562
|
const trimmed = input.trim();
|
|
421
563
|
if (trimmed.toLowerCase().startsWith("tel:")) {
|
|
@@ -594,148 +736,6 @@ function useNavigation({
|
|
|
594
736
|
handleClick
|
|
595
737
|
};
|
|
596
738
|
}
|
|
597
|
-
var baseStyles = [
|
|
598
|
-
// Layout
|
|
599
|
-
"inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
|
|
600
|
-
// Typography - using CSS variables with sensible defaults
|
|
601
|
-
"font-[var(--button-font-family,inherit)]",
|
|
602
|
-
"font-[var(--button-font-weight,500)]",
|
|
603
|
-
"tracking-[var(--button-letter-spacing,0)]",
|
|
604
|
-
"leading-[var(--button-line-height,1.25)]",
|
|
605
|
-
"[text-transform:var(--button-text-transform,none)]",
|
|
606
|
-
"text-sm",
|
|
607
|
-
// Border radius
|
|
608
|
-
"rounded-[var(--button-radius,var(--radius,0.375rem))]",
|
|
609
|
-
// Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
|
|
610
|
-
"[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
|
|
611
|
-
// Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
|
|
612
|
-
"[box-shadow:var(--button-shadow,none)]",
|
|
613
|
-
"hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
|
|
614
|
-
// Disabled state
|
|
615
|
-
"disabled:pointer-events-none disabled:opacity-50",
|
|
616
|
-
// SVG handling
|
|
617
|
-
"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
|
|
618
|
-
// Focus styles
|
|
619
|
-
"outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
620
|
-
// Invalid state
|
|
621
|
-
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
|
|
622
|
-
].join(" ");
|
|
623
|
-
var buttonVariants = classVarianceAuthority.cva(baseStyles, {
|
|
624
|
-
variants: {
|
|
625
|
-
variant: {
|
|
626
|
-
// Default (Primary) variant - full customization
|
|
627
|
-
default: [
|
|
628
|
-
"bg-[var(--button-default-bg,hsl(var(--primary)))]",
|
|
629
|
-
"text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
|
|
630
|
-
"border-[length:var(--button-default-border-width,0px)]",
|
|
631
|
-
"border-[color:var(--button-default-border,transparent)]",
|
|
632
|
-
"[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
|
|
633
|
-
"hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
|
|
634
|
-
"hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
|
|
635
|
-
"hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
|
|
636
|
-
"hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
|
|
637
|
-
].join(" "),
|
|
638
|
-
// Destructive variant - full customization
|
|
639
|
-
destructive: [
|
|
640
|
-
"bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
|
|
641
|
-
"text-[var(--button-destructive-fg,white)]",
|
|
642
|
-
"border-[length:var(--button-destructive-border-width,0px)]",
|
|
643
|
-
"border-[color:var(--button-destructive-border,transparent)]",
|
|
644
|
-
"[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
|
|
645
|
-
"hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
|
|
646
|
-
"hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
|
|
647
|
-
"hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
|
|
648
|
-
"hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
|
|
649
|
-
"focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
|
|
650
|
-
"dark:bg-destructive/60"
|
|
651
|
-
].join(" "),
|
|
652
|
-
// Outline variant - full customization with proper border handling
|
|
653
|
-
outline: [
|
|
654
|
-
"bg-[var(--button-outline-bg,hsl(var(--background)))]",
|
|
655
|
-
"text-[var(--button-outline-fg,inherit)]",
|
|
656
|
-
"border-[length:var(--button-outline-border-width,1px)]",
|
|
657
|
-
"border-[color:var(--button-outline-border,hsl(var(--border)))]",
|
|
658
|
-
"[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
|
|
659
|
-
"hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
|
|
660
|
-
"hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
|
|
661
|
-
"hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
|
|
662
|
-
"hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
|
|
663
|
-
"dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
|
|
664
|
-
].join(" "),
|
|
665
|
-
// Secondary variant - full customization
|
|
666
|
-
secondary: [
|
|
667
|
-
"bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
|
|
668
|
-
"text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
|
|
669
|
-
"border-[length:var(--button-secondary-border-width,0px)]",
|
|
670
|
-
"border-[color:var(--button-secondary-border,transparent)]",
|
|
671
|
-
"[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
|
|
672
|
-
"hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
|
|
673
|
-
"hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
|
|
674
|
-
"hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
|
|
675
|
-
"hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
|
|
676
|
-
].join(" "),
|
|
677
|
-
// Ghost variant - full customization
|
|
678
|
-
ghost: [
|
|
679
|
-
"bg-[var(--button-ghost-bg,transparent)]",
|
|
680
|
-
"text-[var(--button-ghost-fg,inherit)]",
|
|
681
|
-
"border-[length:var(--button-ghost-border-width,0px)]",
|
|
682
|
-
"border-[color:var(--button-ghost-border,transparent)]",
|
|
683
|
-
"[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
|
|
684
|
-
"hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
|
|
685
|
-
"hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
|
|
686
|
-
"hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
|
|
687
|
-
"hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
|
|
688
|
-
"dark:hover:bg-accent/50"
|
|
689
|
-
].join(" "),
|
|
690
|
-
// Link variant - full customization
|
|
691
|
-
link: [
|
|
692
|
-
"bg-[var(--button-link-bg,transparent)]",
|
|
693
|
-
"text-[var(--button-link-fg,hsl(var(--primary)))]",
|
|
694
|
-
"border-[length:var(--button-link-border-width,0px)]",
|
|
695
|
-
"border-[color:var(--button-link-border,transparent)]",
|
|
696
|
-
"[box-shadow:var(--button-link-shadow,none)]",
|
|
697
|
-
"hover:bg-[var(--button-link-hover-bg,transparent)]",
|
|
698
|
-
"hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
|
|
699
|
-
"hover:[box-shadow:var(--button-link-shadow-hover,none)]",
|
|
700
|
-
"underline-offset-4 hover:underline"
|
|
701
|
-
].join(" ")
|
|
702
|
-
},
|
|
703
|
-
size: {
|
|
704
|
-
default: [
|
|
705
|
-
"h-[var(--button-height-md,2.25rem)]",
|
|
706
|
-
"px-[var(--button-padding-x-md,1rem)]",
|
|
707
|
-
"py-[var(--button-padding-y-md,0.5rem)]",
|
|
708
|
-
"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
|
|
709
|
-
].join(" "),
|
|
710
|
-
sm: [
|
|
711
|
-
"h-[var(--button-height-sm,2rem)]",
|
|
712
|
-
"px-[var(--button-padding-x-sm,0.75rem)]",
|
|
713
|
-
"py-[var(--button-padding-y-sm,0.25rem)]",
|
|
714
|
-
"gap-1.5",
|
|
715
|
-
"has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
|
|
716
|
-
].join(" "),
|
|
717
|
-
md: [
|
|
718
|
-
"h-[var(--button-height-md,2.25rem)]",
|
|
719
|
-
"px-[var(--button-padding-x-md,1rem)]",
|
|
720
|
-
"py-[var(--button-padding-y-md,0.5rem)]",
|
|
721
|
-
"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
|
|
722
|
-
].join(" "),
|
|
723
|
-
lg: [
|
|
724
|
-
"h-[var(--button-height-lg,2.5rem)]",
|
|
725
|
-
"px-[var(--button-padding-x-lg,1.5rem)]",
|
|
726
|
-
"py-[var(--button-padding-y-lg,0.5rem)]",
|
|
727
|
-
"has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
|
|
728
|
-
].join(" "),
|
|
729
|
-
icon: "size-[var(--button-height-md,2.25rem)]",
|
|
730
|
-
"icon-sm": "size-[var(--button-height-sm,2rem)]",
|
|
731
|
-
"icon-lg": "size-[var(--button-height-lg,2.5rem)]"
|
|
732
|
-
}
|
|
733
|
-
},
|
|
734
|
-
defaultVariants: {
|
|
735
|
-
variant: "default",
|
|
736
|
-
size: "default"
|
|
737
|
-
}
|
|
738
|
-
});
|
|
739
739
|
var Pressable = React4__namespace.forwardRef(
|
|
740
740
|
({
|
|
741
741
|
children,
|