@opensite/ui 2.0.6 → 2.0.8

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

@@ -2,11 +2,14 @@
 'use strict';
 
 var React = require('react');
+var framerMotion = require('framer-motion');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var icon = require('@page-speed/icon');
+var reactSlot = require('@radix-ui/react-slot');
+var usePlatformFromUrl = require('@opensite/hooks/usePlatformFromUrl');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -32,66 +35,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.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:")) {
@@ -905,12 +848,163 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var badgeVariants = classVarianceAuthority.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 ? reactSlot.Slot : "span";
+  return /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(
+  ({
+    platformName,
+    label,
+    iconSize = 20,
+    iconColor,
+    href,
+    iconClassName,
+    className,
+    iconNameOverride,
+    ...pressableProps
+  }, ref) => {
+    const platform = usePlatformFromUrl.usePlatformFromUrl(href);
+    const smartPlatformName = React__namespace.useMemo(() => {
+      return platform || platformName;
+    }, [platform, platformName]);
+    const iconName = React__namespace.useMemo(() => {
+      return iconNameOverride || platformIconMap[smartPlatformName];
+    }, [iconNameOverride, smartPlatformName]);
+    const accessibleLabel = React__namespace.useMemo(() => {
+      return label || platformName;
+    }, [label, platformName]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Pressable,
+      {
+        ref,
+        href,
+        "aria-label": accessibleLabel,
+        className: cn(
+          "inline-flex items-center justify-center transition-colors",
+          className
+        ),
+        ...pressableProps,
+        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.span,
+          {
+            variants: digitVariants,
+            initial: "initial",
+            animate: "animate",
+            exit: "exit",
+            children: display
+          },
+          display
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mt-2 text-sm"), children: label })
+  ] });
+}
 function HeroComingSoonCountdown({
   badgeIcon,
   badgeText,
   heading,
   description,
-  countdownItems,
+  countdownDate,
   countdownSlot,
   emailPlaceholder = "Enter your email",
   submitAction,
@@ -918,11 +1012,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,
@@ -930,55 +1025,69 @@ function HeroComingSoonCountdown({
   formClassName,
   socialLinksClassName
 }) {
-  const renderCountdown = React.useMemo(() => {
-    if (countdownSlot) return countdownSlot;
-    if (!countdownItems || countdownItems.length === 0) return null;
-    return countdownItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: cn("mt-2 text-sm", getTextColor(background, "muted")), children: item.label })
-    ] }, item.label));
-  }, [countdownSlot, countdownItems, background]);
+  const [timeLeft, setTimeLeft] = React.useState(null);
+  const calculateTimeLeft = React.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]);
+  React.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 = React.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] }) })
     ] });
   }, [formSlot, submitAction, emailPlaceholder]);
   const renderSocialLinks = React.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      Pressable,
+      SocialLinkIcon,
       {
         href: link.href,
-        className: cn(getTextColor(background, "muted"), "hover:opacity-80", link.className),
-        children: link.icon ?? (link.iconName && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.iconName, size: 20 }))
+        className: cn("hover:opacity-80", link.className),
+        asButton: true,
+        variant: "outline",
+        size: "icon"
       },
       index
     ));
@@ -986,25 +1095,73 @@ function HeroComingSoonCountdown({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      className: cn(
-        "dark relative min-h-screen bg-background py-32",
-        className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container flex flex-col items-center justify-center text-center", containerClassName), children: [
-        (badgeText || badgeIcon) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16, className: getAccentColor(background) }),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      patternClassName,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-8 md:pt-0", children: [
+        (badgeText || badgeIcon) && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { className: cn("gap-2 px-4 py-2", badgeClassName), children: [
+          badgeIcon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: badgeIcon, size: 16 }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: badgeText })
         ] }),
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("mt-8", headingClassName), children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 max-w-xl text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
-        (countdownSlot || countdownItems && countdownItems.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12 grid grid-cols-4 gap-4 md:gap-8", countdownClassName), children: renderCountdown }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("mt-16 flex items-center gap-6", socialLinksClassName), children: renderSocialLinks })
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn(
+              "mt-6 max-w-xl text-lg md:text-xl text-balance",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : description),
+        showCountdown && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-12 grid grid-cols-4 gap-4 md:gap-8",
+              countdownClassName
+            ),
+            children: countdownSlot ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CountdownDigit, { value: timeLeft.days, label: "Days" }),
+              /* @__PURE__ */ jsxRuntime.jsx(CountdownDigit, { value: timeLeft.hours, label: "Hours" }),
+              /* @__PURE__ */ jsxRuntime.jsx(CountdownDigit, { value: timeLeft.minutes, label: "Minutes" }),
+              /* @__PURE__ */ jsxRuntime.jsx(CountdownDigit, { value: timeLeft.seconds, label: "Seconds" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mt-16 flex items-center gap-6",
+              socialLinksClassName
+            ),
+            children: renderSocialLinks
+          }
+        )
       ] })
     }
   );

package/dist/hero-coming-soon-countdown.d.cts

@@ -6,13 +6,6 @@ import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
-/**
- * Countdown item configuration
- */
-interface CountdownItem {
-    value: string;
-    label: string;
-}
 interface HeroComingSoonCountdownProps {
     /**
      * Badge icon name (DynamicIcon format)
@@ -31,11 +24,11 @@ interface HeroComingSoonCountdownProps {
      */
     description?: React.ReactNode;
     /**
-     * Countdown items array
+     * Target date for the countdown. If in the past or not provided, countdown is hidden.
      */
-    countdownItems?: CountdownItem[];
+    countdownDate?: Date;
     /**
-     * Custom slot for countdown (overrides countdownItems)
+     * Custom slot for countdown (overrides countdownDate)
      */
     countdownSlot?: React.ReactNode;
     /**
@@ -108,7 +101,11 @@ interface HeroComingSoonCountdownProps {
      * Additional CSS classes for the social links container
      */
     socialLinksClassName?: string;
+    /**
+     * Additional CSS classes for the pattern overlay
+     */
+    patternClassName?: string;
 }
-declare function HeroComingSoonCountdown({ badgeIcon, badgeText, heading, description, countdownItems, countdownSlot, emailPlaceholder, submitAction, formSlot, socialLinks, socialLinksSlot, background, spacing, pattern, patternOpacity, className, containerClassName, badgeClassName, headingClassName, descriptionClassName, countdownClassName, formClassName, socialLinksClassName, }: HeroComingSoonCountdownProps): React.JSX.Element;
+declare function HeroComingSoonCountdown({ badgeIcon, badgeText, heading, description, countdownDate, countdownSlot, emailPlaceholder, submitAction, formSlot, socialLinks, socialLinksSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, badgeClassName, headingClassName, descriptionClassName, countdownClassName, formClassName, socialLinksClassName, }: HeroComingSoonCountdownProps): React.JSX.Element;
 
 export { HeroComingSoonCountdown, type HeroComingSoonCountdownProps };

package/dist/hero-coming-soon-countdown.d.ts

@@ -6,13 +6,6 @@ import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
-/**
- * Countdown item configuration
- */
-interface CountdownItem {
-    value: string;
-    label: string;
-}
 interface HeroComingSoonCountdownProps {
     /**
      * Badge icon name (DynamicIcon format)
@@ -31,11 +24,11 @@ interface HeroComingSoonCountdownProps {
      */
     description?: React.ReactNode;
     /**
-     * Countdown items array
+     * Target date for the countdown. If in the past or not provided, countdown is hidden.
      */
-    countdownItems?: CountdownItem[];
+    countdownDate?: Date;
     /**
-     * Custom slot for countdown (overrides countdownItems)
+     * Custom slot for countdown (overrides countdownDate)
      */
     countdownSlot?: React.ReactNode;
     /**
@@ -108,7 +101,11 @@ interface HeroComingSoonCountdownProps {
      * Additional CSS classes for the social links container
      */
     socialLinksClassName?: string;
+    /**
+     * Additional CSS classes for the pattern overlay
+     */
+    patternClassName?: string;
 }
-declare function HeroComingSoonCountdown({ badgeIcon, badgeText, heading, description, countdownItems, countdownSlot, emailPlaceholder, submitAction, formSlot, socialLinks, socialLinksSlot, background, spacing, pattern, patternOpacity, className, containerClassName, badgeClassName, headingClassName, descriptionClassName, countdownClassName, formClassName, socialLinksClassName, }: HeroComingSoonCountdownProps): React.JSX.Element;
+declare function HeroComingSoonCountdown({ badgeIcon, badgeText, heading, description, countdownDate, countdownSlot, emailPlaceholder, submitAction, formSlot, socialLinks, socialLinksSlot, background, containerClassName, spacing, pattern, patternOpacity, patternClassName, className, badgeClassName, headingClassName, descriptionClassName, countdownClassName, formClassName, socialLinksClassName, }: HeroComingSoonCountdownProps): React.JSX.Element;
 
 export { HeroComingSoonCountdown, type HeroComingSoonCountdownProps };