@opensite/ui 0.0.7 → 0.0.9

package/dist/components.js

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import React__default, { useId, useRef, useEffect } from 'react';
+import * as React4 from 'react';
+import React4__default, { useId, useRef, useEffect } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -8,6 +8,7 @@ import { useOnClickOutside } from '@opensite/hooks';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Img } from '@page-speed/img';
 
 // components/ui/container.tsx
 function cn(...inputs) {
@@ -22,7 +23,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.forwardRef(
+var Container = React4__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -56,7 +57,7 @@ var spacingStyles = {
   lg: "py-20 md:py-32",
   xl: "py-24 md:py-40"
 };
-var Section = React__default.forwardRef(
+var Section = React4__default.forwardRef(
   ({
     id,
     title,
@@ -497,6 +498,7 @@ function PopoverContent({
     }
   ) });
 }
+var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
   size = 28,
@@ -504,32 +506,372 @@ function DynamicIcon({
   className,
   alt
 }) {
-  const payload = React.useMemo(() => {
+  const [svgContent, setSvgContent] = React4.useState(null);
+  const [isLoading, setIsLoading] = React4.useState(true);
+  const [error, setError] = React4.useState(null);
+  const { url, iconName } = React4.useMemo(() => {
     const separator = name.includes("/") ? "/" : ":";
-    const [prefix, iconName] = name.split(separator);
-    const encodedColor = getEncodedColor(color);
-    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName}?format=svg&width=${size}&height=${size}&`;
+    const [prefix, iconName2] = name.split(separator);
+    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
     return {
-      url: encodedColor ? `${baseUrl}color=${encodedColor}` : baseUrl,
-      iconName
+      url: baseUrl,
+      iconName: iconName2
     };
-  }, [name, size, color]);
+  }, [name, size]);
+  React4.useEffect(() => {
+    let isMounted = true;
+    const fetchSvg = async () => {
+      const cached = svgCache.get(url);
+      if (cached) {
+        if (isMounted) {
+          setSvgContent(cached);
+          setIsLoading(false);
+        }
+        return;
+      }
+      try {
+        setIsLoading(true);
+        setError(null);
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch icon: ${response.status}`);
+        }
+        let svg = await response.text();
+        svg = processSvgForCurrentColor(svg);
+        svgCache.set(url, svg);
+        if (isMounted) {
+          setSvgContent(svg);
+          setIsLoading(false);
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err instanceof Error ? err.message : "Failed to load icon");
+          setIsLoading(false);
+        }
+      }
+    };
+    fetchSvg();
+    return () => {
+      isMounted = false;
+    };
+  }, [url]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("inline-block", className),
+        style: { width: size, height: size },
+        "aria-hidden": "true"
+      }
+    );
+  }
+  if (error || !svgContent) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("inline-block", className),
+        style: { width: size, height: size },
+        role: "img",
+        "aria-label": alt || iconName
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
-    "img",
+    "span",
     {
-      src: payload?.url,
-      alt: alt || payload?.iconName,
-      width: size,
-      height: size,
-      loading: "lazy",
-      className: cn("inline-block", className)
+      className: cn("inline-flex items-center justify-center", className),
+      style: {
+        width: size,
+        height: size,
+        color: color || "inherit"
+      },
+      role: "img",
+      "aria-label": alt || iconName,
+      dangerouslySetInnerHTML: { __html: svgContent }
     }
   );
 }
-var getEncodedColor = (color) => {
-  if (!color) return void 0;
-  return encodeURIComponent(color);
-};
+function processSvgForCurrentColor(svg) {
+  let processed = svg;
+  processed = processed.replace(
+    /stroke=["'](#000000|#000|black)["']/gi,
+    'stroke="currentColor"'
+  );
+  processed = processed.replace(
+    /fill=["'](#000000|#000|black)["']/gi,
+    'fill="currentColor"'
+  );
+  return processed;
+}
+function normalizePhoneNumber(input) {
+  const trimmed = input.trim();
+  if (trimmed.toLowerCase().startsWith("tel:")) {
+    return trimmed;
+  }
+  const match = trimmed.match(/^[\s\+\-\(\)]*(\d[\d\s\-\(\)\.]*\d)[\s\-]*(x|ext\.?|extension)?[\s\-]*(\d+)?$/i);
+  if (match) {
+    const mainNumber = match[1].replace(/[\s\-\(\)\.]/g, "");
+    const extension = match[3];
+    const normalized = mainNumber.length >= 10 && !trimmed.startsWith("+") ? `+${mainNumber}` : mainNumber;
+    const withExtension = extension ? `${normalized};ext=${extension}` : normalized;
+    return `tel:${withExtension}`;
+  }
+  const cleaned = trimmed.replace(/[\s\-\(\)\.]/g, "");
+  return `tel:${cleaned}`;
+}
+function normalizeEmail(input) {
+  const trimmed = input.trim();
+  if (trimmed.toLowerCase().startsWith("mailto:")) {
+    return trimmed;
+  }
+  return `mailto:${trimmed}`;
+}
+function isEmail(input) {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(input.trim());
+}
+function isPhoneNumber(input) {
+  const trimmed = input.trim();
+  if (trimmed.toLowerCase().startsWith("tel:")) {
+    return true;
+  }
+  const phoneRegex = /^[\s\+\-\(\)]*\d[\d\s\-\(\)\.]*\d[\s\-]*(x|ext\.?|extension)?[\s\-]*\d*$/i;
+  return phoneRegex.test(trimmed);
+}
+function isInternalUrl(href) {
+  if (typeof window === "undefined") {
+    return href.startsWith("/") && !href.startsWith("//");
+  }
+  const trimmed = href.trim();
+  if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
+    return true;
+  }
+  try {
+    const url = new URL(trimmed, window.location.href);
+    const currentOrigin = window.location.origin;
+    const normalizeOrigin = (origin) => origin.replace(/^(https?:\/\/)(www\.)?/, "$1");
+    return normalizeOrigin(url.origin) === normalizeOrigin(currentOrigin);
+  } catch {
+    return false;
+  }
+}
+function toRelativePath(href) {
+  if (typeof window === "undefined") {
+    return href;
+  }
+  const trimmed = href.trim();
+  if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
+    return trimmed;
+  }
+  try {
+    const url = new URL(trimmed, window.location.href);
+    const currentOrigin = window.location.origin;
+    const normalizeOrigin = (origin) => origin.replace(/^(https?:\/\/)(www\.)?/, "$1");
+    if (normalizeOrigin(url.origin) === normalizeOrigin(currentOrigin)) {
+      return url.pathname + url.search + url.hash;
+    }
+  } catch {
+  }
+  return trimmed;
+}
+function useNavigation({
+  href,
+  onClick
+} = {}) {
+  const linkType = React4.useMemo(() => {
+    if (!href || href.trim() === "") {
+      return onClick ? "none" : "none";
+    }
+    const trimmed = href.trim();
+    if (trimmed.toLowerCase().startsWith("mailto:") || isEmail(trimmed)) {
+      return "mailto";
+    }
+    if (trimmed.toLowerCase().startsWith("tel:") || isPhoneNumber(trimmed)) {
+      return "tel";
+    }
+    if (isInternalUrl(trimmed)) {
+      return "internal";
+    }
+    try {
+      new URL(trimmed, typeof window !== "undefined" ? window.location.href : "http://localhost");
+      return "external";
+    } catch {
+      return "internal";
+    }
+  }, [href, onClick]);
+  const normalizedHref = React4.useMemo(() => {
+    if (!href || href.trim() === "") {
+      return void 0;
+    }
+    const trimmed = href.trim();
+    switch (linkType) {
+      case "tel":
+        return normalizePhoneNumber(trimmed);
+      case "mailto":
+        return normalizeEmail(trimmed);
+      case "internal":
+        return toRelativePath(trimmed);
+      case "external":
+        return trimmed;
+      default:
+        return trimmed;
+    }
+  }, [href, linkType]);
+  const target = React4.useMemo(() => {
+    switch (linkType) {
+      case "external":
+        return "_blank";
+      case "internal":
+        return "_self";
+      case "mailto":
+      case "tel":
+        return void 0;
+      default:
+        return void 0;
+    }
+  }, [linkType]);
+  const rel = React4.useMemo(() => {
+    if (linkType === "external") {
+      return "noopener noreferrer";
+    }
+    return void 0;
+  }, [linkType]);
+  const isExternal = linkType === "external";
+  const isInternal = linkType === "internal";
+  const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
+  const handleClick = React4.useCallback(
+    (event) => {
+      if (onClick) {
+        try {
+          onClick(event);
+        } catch (error) {
+          console.error("Error in user onClick handler:", error);
+        }
+      }
+      if (event.defaultPrevented) {
+        return;
+      }
+      if (shouldUseRouter && normalizedHref && event.button === 0 && // left-click only
+      !event.metaKey && !event.altKey && !event.ctrlKey && !event.shiftKey) {
+        if (typeof window !== "undefined") {
+          const handler = window.__opensiteNavigationHandler;
+          if (typeof handler === "function") {
+            try {
+              const handled = handler(normalizedHref, event.nativeEvent || event);
+              if (handled !== false) {
+                event.preventDefault();
+              }
+            } catch (error) {
+              console.error("Error in navigation handler:", error);
+            }
+          }
+        }
+      }
+    },
+    [onClick, shouldUseRouter, normalizedHref]
+  );
+  return {
+    linkType,
+    normalizedHref,
+    target,
+    rel,
+    isExternal,
+    isInternal,
+    shouldUseRouter,
+    handleClick
+  };
+}
+var Pressable = React4.forwardRef(
+  ({
+    children,
+    className,
+    href,
+    onClick,
+    variant,
+    size,
+    asButton = false,
+    fallbackComponentType = "span",
+    componentType,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    id,
+    ...props
+  }, ref) => {
+    const navigation = useNavigation({ href, onClick });
+    const {
+      normalizedHref,
+      target,
+      rel,
+      linkType,
+      isInternal,
+      handleClick
+    } = navigation;
+    const shouldRenderLink = normalizedHref && linkType !== "none";
+    const shouldRenderButton = !shouldRenderLink && onClick;
+    const effectiveComponentType = componentType || (shouldRenderLink ? "a" : shouldRenderButton ? "button" : fallbackComponentType);
+    const finalComponentType = isInternal && shouldRenderLink ? "a" : effectiveComponentType;
+    const shouldApplyButtonStyles = asButton || variant || size;
+    const combinedClassName = cn(
+      shouldApplyButtonStyles && buttonVariants({ variant, size }),
+      className
+    );
+    const commonProps = {
+      className: combinedClassName,
+      onClick: handleClick,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedby,
+      id,
+      ...Object.fromEntries(
+        Object.entries(props).filter(([key]) => key.startsWith("data-"))
+      )
+    };
+    if (finalComponentType === "a" && shouldRenderLink) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ref,
+          href: normalizedHref,
+          target,
+          rel,
+          ...commonProps,
+          ...props,
+          children
+        }
+      );
+    }
+    if (finalComponentType === "button") {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          type: props.type || "button",
+          ...commonProps,
+          ...props,
+          children
+        }
+      );
+    }
+    if (finalComponentType === "div") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          ...commonProps,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        ...commonProps,
+        children
+      }
+    );
+  }
+);
+Pressable.displayName = "Pressable";
 function AlternatingBlocks({
   sections,
   title,
@@ -570,7 +912,67 @@ function AlternatingBlocks({
     }
   );
 }
+function MediaHoverCtas(props) {
+  const { sectionClassName, gridClassName, items, optixFlowConfig } = props;
+  const resolvedItems = items ?? [];
+  return /* @__PURE__ */ jsx("section", { className: cn("py-32", sectionClassName), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid min-h-100 grid-cols-1 gap-1 lg:grid-cols-2",
+        gridClassName
+      ),
+      children: resolvedItems.map((item, index) => {
+        const CardComponent = item.cardHref ? "a" : "div";
+        const hasHoverImage = Boolean(item.onHoverImgSrc);
+        const applyHoverBackground = Boolean(
+          item.onHoverBackgroundColor && !hasHoverImage
+        );
+        const cardStyle = item.initialBackgroundColor || applyHoverBackground ? {
+          ...item.initialBackgroundColor ? { "--media-hover-cta-bg": item.initialBackgroundColor } : {},
+          ...applyHoverBackground ? {
+            "--media-hover-cta-hover-bg": item.onHoverBackgroundColor
+          } : {}
+        } : void 0;
+        const baseBackgroundClassName = item.initialBackgroundColor ? "bg-[var(--media-hover-cta-bg)]" : "bg-muted-foreground/10";
+        const hoverBackgroundClassName = applyHoverBackground ? "group-hover:bg-[var(--media-hover-cta-hover-bg)]" : "";
+        const hoverImageAltText = item.altText ?? "";
+        return /* @__PURE__ */ jsxs(
+          CardComponent,
+          {
+            ...item.cardHref ? { href: item.cardHref } : {},
+            className: cn(
+              "group relative flex min-h-100 cursor-pointer items-center overflow-hidden justify-start p-10 transition-colors duration-500",
+              index % 2 === 0 ? "md:justify-center" : "md:justify-start md:pl-24",
+              baseBackgroundClassName,
+              hoverBackgroundClassName
+            ),
+            style: cardStyle,
+            children: [
+              item.onHoverImgSrc ? /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: item.onHoverImgSrc,
+                  alt: hoverImageAltText,
+                  "aria-hidden": item.altText ? void 0 : true,
+                  className: cn(
+                    "absolute top-0 left-0 z-[-1] h-full w-full object-cover opacity-0 transition-opacity duration-500 group-hover:opacity-100",
+                    item.imgHoverClassName
+                  ),
+                  loading: "lazy",
+                  optixFlowConfig
+                }
+              ) : null,
+              item.content
+            ]
+          },
+          index
+        );
+      })
+    }
+  ) });
+}
 
-export { AlternatingBlocks, AnimatedDialog, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Container, DynamicIcon, PageHeroBanner, Popover, PopoverContent, PopoverTrigger, Section };
+export { AlternatingBlocks, AnimatedDialog, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Container, DynamicIcon, MediaHoverCtas, PageHeroBanner, Popover, PopoverContent, PopoverTrigger, Pressable, Section };
 //# sourceMappingURL=components.js.map
 //# sourceMappingURL=components.js.map