@opensite/ui 2.0.6 → 2.0.8

package/dist/hero-coming-soon-countdown.js

@@ -1,76 +1,19 @@
 "use client";
 import * as React from 'react';
-import React__default, { useMemo } from 'react';
+import React__default, { useState, useCallback, useEffect, useMemo } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@page-speed/icon';
+import { Slot } from '@radix-ui/react-slot';
+import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
 
 // components/blocks/hero/hero-coming-soon-countdown.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getNestedCardBg(parentBg, variant = "muted", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "muted":
-        return "bg-background";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-background/50";
-    }
-  } else {
-    switch (variant) {
-      case "muted":
-        return "bg-muted";
-      case "card":
-        return "bg-card";
-      case "accent":
-        return "bg-accent";
-      case "subtle":
-        return "bg-muted/50";
-    }
-  }
-}
-function getNestedCardTextColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-foreground" : "";
-}
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
-function getAccentColor(parentBg, options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  return isDark ? "text-accent-foreground" : "text-primary";
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -884,12 +827,163 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var badgeVariants = cva(
+  "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",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        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",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+var platformIconMap = {
+  instagram: "cib/instagram",
+  linkedin: "cib/linkedin",
+  google: "cib/google",
+  facebook: "cib/facebook",
+  tiktok: "cib/tiktok",
+  youtube: "cib/youtube",
+  yelp: "cib/yelp",
+  spotify: "cib/spotify",
+  apple: "cib/apple",
+  x: "line-md/twitter-x-alt",
+  github: "cib/github",
+  snapchat: "cib/snapchat",
+  discord: "cib/discord",
+  dev: "simple-icons/devdotto",
+  substack: "simple-icons/substack",
+  reddit: "cib/reddit",
+  pinterest: "cib/pinterest",
+  threads: "simple-icons/threads",
+  twitch: "cib/twitch",
+  whatsapp: "cib/whatsapp",
+  telegram: "cib/telegram",
+  medium: "simple-icons/medium",
+  patreon: "cib/patreon",
+  onlyfans: "simple-icons/onlyfans",
+  eventbrite: "cib/eventbrite",
+  npmjs: "simple-icons/npm",
+  crates: "cib/rust",
+  rubygems: "cib/rubygems",
+  behance: "cib/behance",
+  dribbble: "cib/dribbble",
+  unknown: "icon-park-solid/circular-connection"
+};
+var SocialLinkIcon = React.forwardRef(
+  ({
+    platformName,
+    label,
+    iconSize = 20,
+    iconColor,
+    href,
+    iconClassName,
+    className,
+    iconNameOverride,
+    ...pressableProps
+  }, ref) => {
+    const platform = usePlatformFromUrl(href);
+    const smartPlatformName = React.useMemo(() => {
+      return platform || platformName;
+    }, [platform, platformName]);
+    const iconName = React.useMemo(() => {
+      return iconNameOverride || platformIconMap[smartPlatformName];
+    }, [iconNameOverride, smartPlatformName]);
+    const accessibleLabel = React.useMemo(() => {
+      return label || platformName;
+    }, [label, platformName]);
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        ref,
+        href,
+        "aria-label": accessibleLabel,
+        className: cn(
+          "inline-flex items-center justify-center transition-colors",
+          className
+        ),
+        ...pressableProps,
+        children: /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: iconName,
+            size: iconSize,
+            color: iconColor,
+            className: iconClassName,
+            alt: accessibleLabel
+          }
+        )
+      }
+    );
+  }
+);
+SocialLinkIcon.displayName = "SocialLinkIcon";
+var digitVariants = {
+  initial: { y: -20, opacity: 0 },
+  animate: {
+    y: 0,
+    opacity: 1,
+    transition: { type: "spring", stiffness: 300, damping: 25 }
+  },
+  exit: {
+    y: 20,
+    opacity: 0,
+    transition: { duration: 0.15 }
+  }
+};
+function CountdownDigit({ value, label }) {
+  const display = value.toString().padStart(2, "0");
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex h-16 w-16 items-center justify-center overflow-hidden rounded-xl text-3xl font-bold md:h-24 md:w-24 md:text-5xl"
+        ),
+        children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            variants: digitVariants,
+            initial: "initial",
+            animate: "animate",
+            exit: "exit",
+            children: display
+          },
+          display
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: cn("mt-2 text-sm"), children: label })
+  ] });
+}
 function HeroComingSoonCountdown({
   badgeIcon,
   badgeText,
   heading,
   description,
-  countdownItems,
+  countdownDate,
   countdownSlot,
   emailPlaceholder = "Enter your email",
   submitAction,
@@ -897,11 +991,12 @@ function HeroComingSoonCountdown({
   socialLinks,
   socialLinksSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
+  patternClassName,
   className,
-  containerClassName,
   badgeClassName,
   headingClassName,
   descriptionClassName,
@@ -909,55 +1004,69 @@ function HeroComingSoonCountdown({
   formClassName,
   socialLinksClassName
 }) {
-  const renderCountdown = useMemo(() => {
-    if (countdownSlot) return countdownSlot;
-    if (!countdownItems || countdownItems.length === 0) return null;
-    return countdownItems.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-      /* @__PURE__ */ jsx("div", { className: cn(
-        "flex h-16 w-16 items-center justify-center rounded-xl text-3xl font-bold md:h-24 md:w-24 md:text-5xl",
-        getNestedCardBg(background, "muted"),
-        getNestedCardTextColor(background)
-      ), children: item.value }),
-      /* @__PURE__ */ jsx("span", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: item.label })
-    ] }, item.label));
-  }, [countdownSlot, countdownItems, background]);
+  const [timeLeft, setTimeLeft] = useState(null);
+  const calculateTimeLeft = useCallback(() => {
+    if (!countdownDate) return null;
+    const now = Date.now();
+    const target = countdownDate.getTime();
+    const diff = target - now;
+    if (diff <= 0) return null;
+    return {
+      days: Math.floor(diff / (1e3 * 60 * 60 * 24)),
+      hours: Math.floor(diff % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60)),
+      minutes: Math.floor(diff % (1e3 * 60 * 60) / (1e3 * 60)),
+      seconds: Math.floor(diff % (1e3 * 60) / 1e3)
+    };
+  }, [countdownDate]);
+  useEffect(() => {
+    setTimeLeft(calculateTimeLeft());
+    if (!countdownDate) return;
+    const timer = setInterval(() => {
+      const remaining = calculateTimeLeft();
+      setTimeLeft(remaining);
+      if (!remaining) clearInterval(timer);
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [countdownDate, calculateTimeLeft]);
+  const showCountdown = countdownSlot || timeLeft;
   const renderForm = useMemo(() => {
     if (formSlot) return formSlot;
     if (!submitAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = submitAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = submitAction;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Input,
         {
           type: "email",
           placeholder: emailPlaceholder,
-          className: cn("h-12 flex-1 border-border/50", `${getNestedCardBg(background, "muted")}/30`)
+          className: cn("h-12 flex-1 border-border/50")
         }
       ),
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        }
-      )
+      /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] }) })
     ] });
   }, [formSlot, submitAction, emailPlaceholder]);
   const renderSocialLinks = useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((link, index) => /* @__PURE__ */ jsx(
-      Pressable,
+      SocialLinkIcon,
       {
         href: link.href,
-        className: cn(getTextColor(background, "muted"), "hover:opacity-80", link.className),
-        children: link.icon ?? (link.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: link.iconName, size: 20 }))
+        className: cn("hover:opacity-80", link.className),
+        asButton: true,
+        variant: "outline",
+        size: "icon"
       },
       index
     ));
@@ -965,25 +1074,73 @@ function HeroComingSoonCountdown({
   return /* @__PURE__ */ jsx(
     Section,
     {
-      className: cn(
-        "dark relative min-h-screen bg-background py-32",
-        className
-      ),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center justify-center text-center", containerClassName), children: [
-        (badgeText || badgeIcon) && /* @__PURE__ */ jsxs("div", { className: cn(
-          "inline-flex items-center gap-2 rounded-full border border-border/50 px-4 py-2 text-sm",
-          getNestedCardBg(background, "muted"),
-          getNestedCardTextColor(background),
-          badgeClassName
-        ), children: [
-          badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16, className: getAccentColor(background) }),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      patternClassName,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "pt-8 md:pt-0", children: [
+        (badgeText || badgeIcon) && /* @__PURE__ */ jsxs(Badge, { className: cn("gap-2 px-4 py-2", badgeClassName), children: [
+          badgeIcon && /* @__PURE__ */ jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
           /* @__PURE__ */ jsx("span", { children: badgeText })
         ] }),
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-8 max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: cn("mt-8", headingClassName), children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 max-w-xl text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
-        (countdownSlot || countdownItems && countdownItems.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-12 grid grid-cols-4 gap-4 md:gap-8", countdownClassName), children: renderCountdown }),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-12 flex w-full max-w-md flex-col gap-4 sm:flex-row", formClassName), children: renderForm }),
-        (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex items-center gap-6", socialLinksClassName), children: renderSocialLinks })
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "mt-8 max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-balance",
+              headingClassName
+            ),
+            children: heading
+          }
+        ) : heading),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-6 max-w-xl text-lg md:text-xl text-balance",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : description),
+        showCountdown && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-12 grid grid-cols-4 gap-4 md:gap-8",
+              countdownClassName
+            ),
+            children: countdownSlot ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(CountdownDigit, { value: timeLeft.days, label: "Days" }),
+              /* @__PURE__ */ jsx(CountdownDigit, { value: timeLeft.hours, label: "Hours" }),
+              /* @__PURE__ */ jsx(CountdownDigit, { value: timeLeft.minutes, label: "Minutes" }),
+              /* @__PURE__ */ jsx(CountdownDigit, { value: timeLeft.seconds, label: "Seconds" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-12 flex w-full max-w-md flex-col gap-4 sm:flex-row",
+              formClassName
+            ),
+            children: renderForm
+          }
+        ),
+        (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-16 flex items-center gap-6",
+              socialLinksClassName
+            ),
+            children: renderSocialLinks
+          }
+        )
       ] })
     }
   );