@opensite/ui 0.0.6 → 0.0.8

package/README.md

@@ -256,6 +256,52 @@ import { AlternatingBlocks } from "@opensite/ui/blocks/about/alternating-blocks"
 
 **Note:** Blocks are now organized by category. Import path includes category: `@opensite/ui/blocks/[category]/[block-name]`
 
+#### MediaHoverCtas
+
+Two-column CTA grid that reveals background imagery or color on hover. Located in the `cta` category.
+
+```tsx
+import { MediaHoverCtas } from "@opensite/ui/blocks/cta/media-hover-ctas";
+
+<MediaHoverCtas
+  items={[
+    {
+      content: (
+        <div>
+          <h3 className="mb-3 text-xl font-semibold">Our Mission</h3>
+          <p className="text-muted-foreground">Deliver remarkable experiences.</p>
+        </div>
+      ),
+      onHoverImgSrc: "/images/mission.jpg",
+      altText: "Our Mission"
+    },
+    {
+      content: (
+        <div>
+          <h3 className="mb-3 text-xl font-semibold">Our Vision</h3>
+          <p className="text-muted-foreground">Build the future of our industry.</p>
+        </div>
+      ),
+      initialBackgroundColor: "var(--brand-100)",
+      onHoverBackgroundColor: "var(--brand-900)"
+    }
+  ]}
+/>
+```
+
+**Props:**
+- `items?: MediaHoverCtaItem[]` - Array of CTA items (default: [])
+  - `content?: ReactNode` - Content to render inside the card
+  - `onHoverImgSrc?: string` - Image URL to reveal on hover
+  - `imgHoverClassName?: string` - Additional classes for hover image
+  - `altText?: string` - Alt text for hover image (leave empty for decorative)
+  - `cardHref?: string` - Optional href to make the card a link
+  - `initialBackgroundColor?: string` - CSS color value or variable for base background
+  - `onHoverBackgroundColor?: string` - CSS color value or variable for hover background (ignored when hover image is used)
+- `sectionClassName?: string` - Additional classes for section wrapper
+- `gridClassName?: string` - Additional classes for grid container
+- `optixFlowConfig?: { apiKey: string; compression?: number }` - Optional Optix Flow config for `@page-speed/img`
+
 ### Block Registry
 
 Semantic registry for AI-driven component selection. Maps semantic concepts to available UI blocks.

package/dist/components.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
@@ -9,8 +9,7 @@ var hooks = require('@opensite/hooks');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var PopoverPrimitive = require('@radix-ui/react-popover');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+var img = require('@page-speed/img');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -30,7 +29,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 
 // components/ui/container.tsx
@@ -46,7 +45,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.default.forwardRef(
+var Container = React4__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -80,7 +79,7 @@ var spacingStyles = {
   lg: "py-20 md:py-32",
   xl: "py-24 md:py-40"
 };
-var Section = React__default.default.forwardRef(
+var Section = React4__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -140,15 +139,15 @@ function AnimatedDialog({
   className,
   contentClassName
 }) {
-  const titleId = React.useId();
-  const descriptionId = React.useId();
-  const containerRef = React.useRef(null);
+  const titleId = React4.useId();
+  const descriptionId = React4.useId();
+  const containerRef = React4.useRef(null);
   hooks.useOnClickOutside(containerRef, () => {
     if (open) {
       onOpenChange(false);
     }
   });
-  React.useEffect(() => {
+  React4.useEffect(() => {
     if (!open) {
       return;
     }
@@ -521,29 +520,380 @@ function PopoverContent({
     }
   ) });
 }
+var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
   size = 28,
-  color = "currentColor",
+  color,
   className,
   alt
 }) {
-  const separator = name.includes("/") ? "/" : ":";
-  const [prefix, iconName] = name.split(separator);
-  const encodedColor = encodeURIComponent(color);
-  const url = `https://icons.opensite.ai/api/icon/${prefix}/${iconName}?format=svg&width=${size}&height=${size}&color=${encodedColor}`;
+  const [svgContent, setSvgContent] = React4__namespace.useState(null);
+  const [isLoading, setIsLoading] = React4__namespace.useState(true);
+  const [error, setError] = React4__namespace.useState(null);
+  const { url, iconName } = React4__namespace.useMemo(() => {
+    const separator = name.includes("/") ? "/" : ":";
+    const [prefix, iconName2] = name.split(separator);
+    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
+    return {
+      url: baseUrl,
+      iconName: iconName2
+    };
+  }, [name, size]);
+  React4__namespace.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__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn("inline-block", className),
+        style: { width: size, height: size },
+        "aria-hidden": "true"
+      }
+    );
+  }
+  if (error || !svgContent) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn("inline-block", className),
+        style: { width: size, height: size },
+        role: "img",
+        "aria-label": alt || iconName
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "img",
+    "span",
     {
-      src: url,
-      alt: alt || 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 }
+    }
+  );
+}
+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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__ */ jsxRuntime.jsx(
+        "a",
+        {
+          ref,
+          href: normalizedHref,
+          target,
+          rel,
+          ...commonProps,
+          ...props,
+          children
+        }
+      );
+    }
+    if (finalComponentType === "button") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          ref,
+          type: props.type || "button",
+          ...commonProps,
+          ...props,
+          children
+        }
+      );
+    }
+    if (finalComponentType === "div") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref,
+          ...commonProps,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        ref,
+        ...commonProps,
+        children
+      }
+    );
+  }
+);
+Pressable.displayName = "Pressable";
 function AlternatingBlocks({
   sections,
   title,
@@ -584,6 +934,66 @@ function AlternatingBlocks({
     }
   );
 }
+function MediaHoverCtas(props) {
+  const { sectionClassName, gridClassName, items, optixFlowConfig } = props;
+  const resolvedItems = items ?? [];
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", sectionClassName), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                img.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
+        );
+      })
+    }
+  ) });
+}
 
 exports.AlternatingBlocks = AlternatingBlocks;
 exports.AnimatedDialog = AnimatedDialog;
@@ -597,10 +1007,12 @@ exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.Container = Container;
 exports.DynamicIcon = DynamicIcon;
+exports.MediaHoverCtas = MediaHoverCtas;
 exports.PageHeroBanner = PageHeroBanner;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
+exports.Pressable = Pressable;
 exports.Section = Section;
 //# sourceMappingURL=components.cjs.map
 //# sourceMappingURL=components.cjs.map