@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.
- 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-feature-badge.cjs +162 -42
- package/dist/carousel-feature-badge.d.cts +14 -1
- package/dist/carousel-feature-badge.d.ts +14 -1
- package/dist/carousel-feature-badge.js +163 -43
- package/dist/community-initiatives.cjs +142 -142
- package/dist/community-initiatives.js +142 -142
- package/dist/components.cjs +723 -1378
- package/dist/components.d.cts +0 -2
- package/dist/components.d.ts +0 -2
- package/dist/components.js +633 -1287
- package/dist/contact-map.cjs +14 -1083
- package/dist/contact-map.d.cts +13 -3
- package/dist/contact-map.d.ts +13 -3
- package/dist/contact-map.js +14 -1083
- 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 -1380
- package/dist/index.d.cts +0 -2
- package/dist/index.d.ts +0 -2
- package/dist/index.js +634 -1288
- package/dist/registry.cjs +2201 -2827
- package/dist/registry.js +948 -1574
- package/dist/testimonials-masonry-grid.cjs +142 -142
- package/dist/testimonials-masonry-grid.js +142 -142
- package/dist/testimonials-stats-header.cjs +159 -159
- package/dist/testimonials-stats-header.js +159 -159
- package/package.json +4 -7
- package/dist/geo-map.cjs +0 -1117
- package/dist/geo-map.d.cts +0 -92
- package/dist/geo-map.d.ts +0 -92
- package/dist/geo-map.js +0 -1095
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import * as
|
|
3
|
-
import
|
|
2
|
+
import * as React4 from 'react';
|
|
3
|
+
import React4__default, { useMemo } from 'react';
|
|
4
4
|
import { clsx } from 'clsx';
|
|
5
5
|
import { twMerge } from 'tailwind-merge';
|
|
6
6
|
import { Img } from '@page-speed/img';
|
|
7
7
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
8
8
|
import { cva } from 'class-variance-authority';
|
|
9
|
-
import { Icon } from '@page-speed/icon';
|
|
10
9
|
import { Slot } from '@radix-ui/react-slot';
|
|
10
|
+
import { Icon } from '@page-speed/icon';
|
|
11
11
|
import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
|
|
12
12
|
|
|
13
13
|
// components/blocks/about/about-developer-profile.tsx
|
|
@@ -23,7 +23,7 @@ var maxWidthStyles = {
|
|
|
23
23
|
"4xl": "max-w-[1536px]",
|
|
24
24
|
full: "max-w-full"
|
|
25
25
|
};
|
|
26
|
-
var Container =
|
|
26
|
+
var Container = React4__default.forwardRef(
|
|
27
27
|
({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
|
|
28
28
|
const Component = as;
|
|
29
29
|
return /* @__PURE__ */ jsx(
|
|
@@ -329,7 +329,7 @@ var spacingStyles = {
|
|
|
329
329
|
};
|
|
330
330
|
var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
|
|
331
331
|
var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
|
|
332
|
-
var Section =
|
|
332
|
+
var Section = React4__default.forwardRef(
|
|
333
333
|
({
|
|
334
334
|
id,
|
|
335
335
|
title,
|
|
@@ -390,6 +390,188 @@ var Section = React3__default.forwardRef(
|
|
|
390
390
|
}
|
|
391
391
|
);
|
|
392
392
|
Section.displayName = "Section";
|
|
393
|
+
var baseStyles = [
|
|
394
|
+
// Layout
|
|
395
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
|
|
396
|
+
// Typography - using CSS variables with sensible defaults
|
|
397
|
+
"font-[var(--button-font-family,inherit)]",
|
|
398
|
+
"font-[var(--button-font-weight,500)]",
|
|
399
|
+
"tracking-[var(--button-letter-spacing,0)]",
|
|
400
|
+
"leading-[var(--button-line-height,1.25)]",
|
|
401
|
+
"[text-transform:var(--button-text-transform,none)]",
|
|
402
|
+
"text-sm",
|
|
403
|
+
// Border radius
|
|
404
|
+
"rounded-[var(--button-radius,var(--radius,0.375rem))]",
|
|
405
|
+
// Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
|
|
406
|
+
"[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
|
|
407
|
+
// Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
|
|
408
|
+
"[box-shadow:var(--button-shadow,none)]",
|
|
409
|
+
"hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
|
|
410
|
+
// Disabled state
|
|
411
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
412
|
+
// SVG handling
|
|
413
|
+
"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
|
|
414
|
+
// Focus styles
|
|
415
|
+
"outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
416
|
+
// Invalid state
|
|
417
|
+
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
|
|
418
|
+
].join(" ");
|
|
419
|
+
var buttonVariants = cva(baseStyles, {
|
|
420
|
+
variants: {
|
|
421
|
+
variant: {
|
|
422
|
+
// Default (Primary) variant - full customization
|
|
423
|
+
default: [
|
|
424
|
+
"bg-[var(--button-default-bg,hsl(var(--primary)))]",
|
|
425
|
+
"text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
|
|
426
|
+
"border-[length:var(--button-default-border-width,0px)]",
|
|
427
|
+
"border-[color:var(--button-default-border,transparent)]",
|
|
428
|
+
"[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
|
|
429
|
+
"hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
|
|
430
|
+
"hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
|
|
431
|
+
"hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
|
|
432
|
+
"hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
|
|
433
|
+
].join(" "),
|
|
434
|
+
// Destructive variant - full customization
|
|
435
|
+
destructive: [
|
|
436
|
+
"bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
|
|
437
|
+
"text-[var(--button-destructive-fg,white)]",
|
|
438
|
+
"border-[length:var(--button-destructive-border-width,0px)]",
|
|
439
|
+
"border-[color:var(--button-destructive-border,transparent)]",
|
|
440
|
+
"[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
|
|
441
|
+
"hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
|
|
442
|
+
"hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
|
|
443
|
+
"hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
|
|
444
|
+
"hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
|
|
445
|
+
"focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
|
|
446
|
+
"dark:bg-destructive/60"
|
|
447
|
+
].join(" "),
|
|
448
|
+
// Outline variant - full customization with proper border handling
|
|
449
|
+
outline: [
|
|
450
|
+
"bg-[var(--button-outline-bg,hsl(var(--background)))]",
|
|
451
|
+
"text-[var(--button-outline-fg,inherit)]",
|
|
452
|
+
"border-[length:var(--button-outline-border-width,1px)]",
|
|
453
|
+
"border-[color:var(--button-outline-border,hsl(var(--border)))]",
|
|
454
|
+
"[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
|
|
455
|
+
"hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
|
|
456
|
+
"hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
|
|
457
|
+
"hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
|
|
458
|
+
"hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
|
|
459
|
+
"dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
|
|
460
|
+
].join(" "),
|
|
461
|
+
// Secondary variant - full customization
|
|
462
|
+
secondary: [
|
|
463
|
+
"bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
|
|
464
|
+
"text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
|
|
465
|
+
"border-[length:var(--button-secondary-border-width,0px)]",
|
|
466
|
+
"border-[color:var(--button-secondary-border,transparent)]",
|
|
467
|
+
"[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
|
|
468
|
+
"hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
|
|
469
|
+
"hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
|
|
470
|
+
"hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
|
|
471
|
+
"hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
|
|
472
|
+
].join(" "),
|
|
473
|
+
// Ghost variant - full customization
|
|
474
|
+
ghost: [
|
|
475
|
+
"bg-[var(--button-ghost-bg,transparent)]",
|
|
476
|
+
"text-[var(--button-ghost-fg,inherit)]",
|
|
477
|
+
"border-[length:var(--button-ghost-border-width,0px)]",
|
|
478
|
+
"border-[color:var(--button-ghost-border,transparent)]",
|
|
479
|
+
"[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
|
|
480
|
+
"hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
|
|
481
|
+
"hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
|
|
482
|
+
"hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
|
|
483
|
+
"hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
|
|
484
|
+
"dark:hover:bg-accent/50"
|
|
485
|
+
].join(" "),
|
|
486
|
+
// Link variant - full customization
|
|
487
|
+
link: [
|
|
488
|
+
"bg-[var(--button-link-bg,transparent)]",
|
|
489
|
+
"text-[var(--button-link-fg,hsl(var(--primary)))]",
|
|
490
|
+
"border-[length:var(--button-link-border-width,0px)]",
|
|
491
|
+
"border-[color:var(--button-link-border,transparent)]",
|
|
492
|
+
"[box-shadow:var(--button-link-shadow,none)]",
|
|
493
|
+
"hover:bg-[var(--button-link-hover-bg,transparent)]",
|
|
494
|
+
"hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
|
|
495
|
+
"hover:[box-shadow:var(--button-link-shadow-hover,none)]",
|
|
496
|
+
"underline-offset-4 hover:underline"
|
|
497
|
+
].join(" ")
|
|
498
|
+
},
|
|
499
|
+
size: {
|
|
500
|
+
default: [
|
|
501
|
+
"h-[var(--button-height-md,2.25rem)]",
|
|
502
|
+
"px-[var(--button-padding-x-md,1rem)]",
|
|
503
|
+
"py-[var(--button-padding-y-md,0.5rem)]",
|
|
504
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
|
|
505
|
+
].join(" "),
|
|
506
|
+
sm: [
|
|
507
|
+
"h-[var(--button-height-sm,2rem)]",
|
|
508
|
+
"px-[var(--button-padding-x-sm,0.75rem)]",
|
|
509
|
+
"py-[var(--button-padding-y-sm,0.25rem)]",
|
|
510
|
+
"gap-1.5",
|
|
511
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
|
|
512
|
+
].join(" "),
|
|
513
|
+
md: [
|
|
514
|
+
"h-[var(--button-height-md,2.25rem)]",
|
|
515
|
+
"px-[var(--button-padding-x-md,1rem)]",
|
|
516
|
+
"py-[var(--button-padding-y-md,0.5rem)]",
|
|
517
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
|
|
518
|
+
].join(" "),
|
|
519
|
+
lg: [
|
|
520
|
+
"h-[var(--button-height-lg,2.5rem)]",
|
|
521
|
+
"px-[var(--button-padding-x-lg,1.5rem)]",
|
|
522
|
+
"py-[var(--button-padding-y-lg,0.5rem)]",
|
|
523
|
+
"has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
|
|
524
|
+
].join(" "),
|
|
525
|
+
icon: "size-[var(--button-height-md,2.25rem)]",
|
|
526
|
+
"icon-sm": "size-[var(--button-height-sm,2rem)]",
|
|
527
|
+
"icon-lg": "size-[var(--button-height-lg,2.5rem)]"
|
|
528
|
+
}
|
|
529
|
+
},
|
|
530
|
+
defaultVariants: {
|
|
531
|
+
variant: "default",
|
|
532
|
+
size: "default"
|
|
533
|
+
}
|
|
534
|
+
});
|
|
535
|
+
var badgeVariants = cva(
|
|
536
|
+
"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
|
537
|
+
{
|
|
538
|
+
variants: {
|
|
539
|
+
variant: {
|
|
540
|
+
default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
|
541
|
+
secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
|
542
|
+
destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
543
|
+
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
|
|
544
|
+
}
|
|
545
|
+
},
|
|
546
|
+
defaultVariants: {
|
|
547
|
+
variant: "default"
|
|
548
|
+
}
|
|
549
|
+
}
|
|
550
|
+
);
|
|
551
|
+
function Badge({
|
|
552
|
+
className,
|
|
553
|
+
variant,
|
|
554
|
+
asChild = false,
|
|
555
|
+
...props
|
|
556
|
+
}) {
|
|
557
|
+
const Comp = asChild ? Slot : "span";
|
|
558
|
+
return /* @__PURE__ */ jsx(
|
|
559
|
+
Comp,
|
|
560
|
+
{
|
|
561
|
+
"data-slot": "badge",
|
|
562
|
+
className: cn(badgeVariants({ variant }), className),
|
|
563
|
+
...props
|
|
564
|
+
}
|
|
565
|
+
);
|
|
566
|
+
}
|
|
567
|
+
var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
|
|
568
|
+
var DynamicIcon = React4.memo(function DynamicIcon2({
|
|
569
|
+
apiKey,
|
|
570
|
+
...props
|
|
571
|
+
}) {
|
|
572
|
+
return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
|
|
573
|
+
});
|
|
574
|
+
DynamicIcon.displayName = "DynamicIcon";
|
|
393
575
|
function normalizePhoneNumber(input) {
|
|
394
576
|
const trimmed = input.trim();
|
|
395
577
|
if (trimmed.toLowerCase().startsWith("tel:")) {
|
|
@@ -465,7 +647,7 @@ function useNavigation({
|
|
|
465
647
|
href,
|
|
466
648
|
onClick
|
|
467
649
|
} = {}) {
|
|
468
|
-
const linkType =
|
|
650
|
+
const linkType = React4.useMemo(() => {
|
|
469
651
|
if (!href || href.trim() === "") {
|
|
470
652
|
return onClick ? "none" : "none";
|
|
471
653
|
}
|
|
@@ -486,7 +668,7 @@ function useNavigation({
|
|
|
486
668
|
return "internal";
|
|
487
669
|
}
|
|
488
670
|
}, [href, onClick]);
|
|
489
|
-
const normalizedHref =
|
|
671
|
+
const normalizedHref = React4.useMemo(() => {
|
|
490
672
|
if (!href || href.trim() === "") {
|
|
491
673
|
return void 0;
|
|
492
674
|
}
|
|
@@ -504,7 +686,7 @@ function useNavigation({
|
|
|
504
686
|
return trimmed;
|
|
505
687
|
}
|
|
506
688
|
}, [href, linkType]);
|
|
507
|
-
const target =
|
|
689
|
+
const target = React4.useMemo(() => {
|
|
508
690
|
switch (linkType) {
|
|
509
691
|
case "external":
|
|
510
692
|
return "_blank";
|
|
@@ -517,7 +699,7 @@ function useNavigation({
|
|
|
517
699
|
return void 0;
|
|
518
700
|
}
|
|
519
701
|
}, [linkType]);
|
|
520
|
-
const rel =
|
|
702
|
+
const rel = React4.useMemo(() => {
|
|
521
703
|
if (linkType === "external") {
|
|
522
704
|
return "noopener noreferrer";
|
|
523
705
|
}
|
|
@@ -526,7 +708,7 @@ function useNavigation({
|
|
|
526
708
|
const isExternal = linkType === "external";
|
|
527
709
|
const isInternal = linkType === "internal";
|
|
528
710
|
const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
|
|
529
|
-
const handleClick =
|
|
711
|
+
const handleClick = React4.useCallback(
|
|
530
712
|
(event) => {
|
|
531
713
|
if (onClick) {
|
|
532
714
|
try {
|
|
@@ -568,149 +750,7 @@ function useNavigation({
|
|
|
568
750
|
handleClick
|
|
569
751
|
};
|
|
570
752
|
}
|
|
571
|
-
var
|
|
572
|
-
// Layout
|
|
573
|
-
"inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
|
|
574
|
-
// Typography - using CSS variables with sensible defaults
|
|
575
|
-
"font-[var(--button-font-family,inherit)]",
|
|
576
|
-
"font-[var(--button-font-weight,500)]",
|
|
577
|
-
"tracking-[var(--button-letter-spacing,0)]",
|
|
578
|
-
"leading-[var(--button-line-height,1.25)]",
|
|
579
|
-
"[text-transform:var(--button-text-transform,none)]",
|
|
580
|
-
"text-sm",
|
|
581
|
-
// Border radius
|
|
582
|
-
"rounded-[var(--button-radius,var(--radius,0.375rem))]",
|
|
583
|
-
// Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
|
|
584
|
-
"[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
|
|
585
|
-
// Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
|
|
586
|
-
"[box-shadow:var(--button-shadow,none)]",
|
|
587
|
-
"hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
|
|
588
|
-
// Disabled state
|
|
589
|
-
"disabled:pointer-events-none disabled:opacity-50",
|
|
590
|
-
// SVG handling
|
|
591
|
-
"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
|
|
592
|
-
// Focus styles
|
|
593
|
-
"outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
594
|
-
// Invalid state
|
|
595
|
-
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
|
|
596
|
-
].join(" ");
|
|
597
|
-
var buttonVariants = cva(baseStyles, {
|
|
598
|
-
variants: {
|
|
599
|
-
variant: {
|
|
600
|
-
// Default (Primary) variant - full customization
|
|
601
|
-
default: [
|
|
602
|
-
"bg-[var(--button-default-bg,hsl(var(--primary)))]",
|
|
603
|
-
"text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
|
|
604
|
-
"border-[length:var(--button-default-border-width,0px)]",
|
|
605
|
-
"border-[color:var(--button-default-border,transparent)]",
|
|
606
|
-
"[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
|
|
607
|
-
"hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
|
|
608
|
-
"hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
|
|
609
|
-
"hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
|
|
610
|
-
"hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
|
|
611
|
-
].join(" "),
|
|
612
|
-
// Destructive variant - full customization
|
|
613
|
-
destructive: [
|
|
614
|
-
"bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
|
|
615
|
-
"text-[var(--button-destructive-fg,white)]",
|
|
616
|
-
"border-[length:var(--button-destructive-border-width,0px)]",
|
|
617
|
-
"border-[color:var(--button-destructive-border,transparent)]",
|
|
618
|
-
"[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
|
|
619
|
-
"hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
|
|
620
|
-
"hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
|
|
621
|
-
"hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
|
|
622
|
-
"hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
|
|
623
|
-
"focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
|
|
624
|
-
"dark:bg-destructive/60"
|
|
625
|
-
].join(" "),
|
|
626
|
-
// Outline variant - full customization with proper border handling
|
|
627
|
-
outline: [
|
|
628
|
-
"bg-[var(--button-outline-bg,hsl(var(--background)))]",
|
|
629
|
-
"text-[var(--button-outline-fg,inherit)]",
|
|
630
|
-
"border-[length:var(--button-outline-border-width,1px)]",
|
|
631
|
-
"border-[color:var(--button-outline-border,hsl(var(--border)))]",
|
|
632
|
-
"[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
|
|
633
|
-
"hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
|
|
634
|
-
"hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
|
|
635
|
-
"hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
|
|
636
|
-
"hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
|
|
637
|
-
"dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
|
|
638
|
-
].join(" "),
|
|
639
|
-
// Secondary variant - full customization
|
|
640
|
-
secondary: [
|
|
641
|
-
"bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
|
|
642
|
-
"text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
|
|
643
|
-
"border-[length:var(--button-secondary-border-width,0px)]",
|
|
644
|
-
"border-[color:var(--button-secondary-border,transparent)]",
|
|
645
|
-
"[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
|
|
646
|
-
"hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
|
|
647
|
-
"hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
|
|
648
|
-
"hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
|
|
649
|
-
"hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
|
|
650
|
-
].join(" "),
|
|
651
|
-
// Ghost variant - full customization
|
|
652
|
-
ghost: [
|
|
653
|
-
"bg-[var(--button-ghost-bg,transparent)]",
|
|
654
|
-
"text-[var(--button-ghost-fg,inherit)]",
|
|
655
|
-
"border-[length:var(--button-ghost-border-width,0px)]",
|
|
656
|
-
"border-[color:var(--button-ghost-border,transparent)]",
|
|
657
|
-
"[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
|
|
658
|
-
"hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
|
|
659
|
-
"hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
|
|
660
|
-
"hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
|
|
661
|
-
"hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
|
|
662
|
-
"dark:hover:bg-accent/50"
|
|
663
|
-
].join(" "),
|
|
664
|
-
// Link variant - full customization
|
|
665
|
-
link: [
|
|
666
|
-
"bg-[var(--button-link-bg,transparent)]",
|
|
667
|
-
"text-[var(--button-link-fg,hsl(var(--primary)))]",
|
|
668
|
-
"border-[length:var(--button-link-border-width,0px)]",
|
|
669
|
-
"border-[color:var(--button-link-border,transparent)]",
|
|
670
|
-
"[box-shadow:var(--button-link-shadow,none)]",
|
|
671
|
-
"hover:bg-[var(--button-link-hover-bg,transparent)]",
|
|
672
|
-
"hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
|
|
673
|
-
"hover:[box-shadow:var(--button-link-shadow-hover,none)]",
|
|
674
|
-
"underline-offset-4 hover:underline"
|
|
675
|
-
].join(" ")
|
|
676
|
-
},
|
|
677
|
-
size: {
|
|
678
|
-
default: [
|
|
679
|
-
"h-[var(--button-height-md,2.25rem)]",
|
|
680
|
-
"px-[var(--button-padding-x-md,1rem)]",
|
|
681
|
-
"py-[var(--button-padding-y-md,0.5rem)]",
|
|
682
|
-
"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
|
|
683
|
-
].join(" "),
|
|
684
|
-
sm: [
|
|
685
|
-
"h-[var(--button-height-sm,2rem)]",
|
|
686
|
-
"px-[var(--button-padding-x-sm,0.75rem)]",
|
|
687
|
-
"py-[var(--button-padding-y-sm,0.25rem)]",
|
|
688
|
-
"gap-1.5",
|
|
689
|
-
"has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
|
|
690
|
-
].join(" "),
|
|
691
|
-
md: [
|
|
692
|
-
"h-[var(--button-height-md,2.25rem)]",
|
|
693
|
-
"px-[var(--button-padding-x-md,1rem)]",
|
|
694
|
-
"py-[var(--button-padding-y-md,0.5rem)]",
|
|
695
|
-
"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
|
|
696
|
-
].join(" "),
|
|
697
|
-
lg: [
|
|
698
|
-
"h-[var(--button-height-lg,2.5rem)]",
|
|
699
|
-
"px-[var(--button-padding-x-lg,1.5rem)]",
|
|
700
|
-
"py-[var(--button-padding-y-lg,0.5rem)]",
|
|
701
|
-
"has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
|
|
702
|
-
].join(" "),
|
|
703
|
-
icon: "size-[var(--button-height-md,2.25rem)]",
|
|
704
|
-
"icon-sm": "size-[var(--button-height-sm,2rem)]",
|
|
705
|
-
"icon-lg": "size-[var(--button-height-lg,2.5rem)]"
|
|
706
|
-
}
|
|
707
|
-
},
|
|
708
|
-
defaultVariants: {
|
|
709
|
-
variant: "default",
|
|
710
|
-
size: "default"
|
|
711
|
-
}
|
|
712
|
-
});
|
|
713
|
-
var Pressable = React3.forwardRef(
|
|
753
|
+
var Pressable = React4.forwardRef(
|
|
714
754
|
({
|
|
715
755
|
children,
|
|
716
756
|
className,
|
|
@@ -808,46 +848,6 @@ var Pressable = React3.forwardRef(
|
|
|
808
848
|
}
|
|
809
849
|
);
|
|
810
850
|
Pressable.displayName = "Pressable";
|
|
811
|
-
var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
|
|
812
|
-
var DynamicIcon = React3.memo(function DynamicIcon2({
|
|
813
|
-
apiKey,
|
|
814
|
-
...props
|
|
815
|
-
}) {
|
|
816
|
-
return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
|
|
817
|
-
});
|
|
818
|
-
DynamicIcon.displayName = "DynamicIcon";
|
|
819
|
-
var badgeVariants = cva(
|
|
820
|
-
"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
|
|
821
|
-
{
|
|
822
|
-
variants: {
|
|
823
|
-
variant: {
|
|
824
|
-
default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
|
825
|
-
secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
|
826
|
-
destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
827
|
-
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
|
|
828
|
-
}
|
|
829
|
-
},
|
|
830
|
-
defaultVariants: {
|
|
831
|
-
variant: "default"
|
|
832
|
-
}
|
|
833
|
-
}
|
|
834
|
-
);
|
|
835
|
-
function Badge({
|
|
836
|
-
className,
|
|
837
|
-
variant,
|
|
838
|
-
asChild = false,
|
|
839
|
-
...props
|
|
840
|
-
}) {
|
|
841
|
-
const Comp = asChild ? Slot : "span";
|
|
842
|
-
return /* @__PURE__ */ jsx(
|
|
843
|
-
Comp,
|
|
844
|
-
{
|
|
845
|
-
"data-slot": "badge",
|
|
846
|
-
className: cn(badgeVariants({ variant }), className),
|
|
847
|
-
...props
|
|
848
|
-
}
|
|
849
|
-
);
|
|
850
|
-
}
|
|
851
851
|
var platformIconMap = {
|
|
852
852
|
instagram: "cib/instagram",
|
|
853
853
|
linkedin: "cib/linkedin",
|
|
@@ -881,7 +881,7 @@ var platformIconMap = {
|
|
|
881
881
|
dribbble: "cib/dribbble",
|
|
882
882
|
unknown: "icon-park-solid/circular-connection"
|
|
883
883
|
};
|
|
884
|
-
var SocialLinkIcon =
|
|
884
|
+
var SocialLinkIcon = React4.forwardRef(
|
|
885
885
|
({
|
|
886
886
|
platformName,
|
|
887
887
|
label,
|
|
@@ -895,16 +895,16 @@ var SocialLinkIcon = React3.forwardRef(
|
|
|
895
895
|
...pressableProps
|
|
896
896
|
}, ref) => {
|
|
897
897
|
const platform = usePlatformFromUrl(href);
|
|
898
|
-
const smartPlatformName =
|
|
898
|
+
const smartPlatformName = React4.useMemo(() => {
|
|
899
899
|
return platform || platformName;
|
|
900
900
|
}, [platform, platformName]);
|
|
901
|
-
const iconName =
|
|
901
|
+
const iconName = React4.useMemo(() => {
|
|
902
902
|
return iconNameOverride || platformIconMap[smartPlatformName];
|
|
903
903
|
}, [iconNameOverride, smartPlatformName]);
|
|
904
|
-
const accessibleLabel =
|
|
904
|
+
const accessibleLabel = React4.useMemo(() => {
|
|
905
905
|
return label || platformName;
|
|
906
906
|
}, [label, platformName]);
|
|
907
|
-
const icon =
|
|
907
|
+
const icon = React4.useMemo(() => {
|
|
908
908
|
return /* @__PURE__ */ jsx(
|
|
909
909
|
DynamicIcon,
|
|
910
910
|
{
|