@opensite/ui 0.0.6 → 0.0.8

package/dist/registry.js

@@ -1,8 +1,9 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React3 from 'react';
-import React3__default, { useState, useRef, useEffect } from 'react';
+import * as React4 from 'react';
+import React4__default, { useState, useRef, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Img } from '@page-speed/img';
 import useEmblaCarousel from 'embla-carousel-react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -20,7 +21,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React3__default.forwardRef(
+var Container = React4__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -54,7 +55,7 @@ var spacingStyles = {
   lg: "py-20 md:py-32",
   xl: "py-24 md:py-40"
 };
-var Section = React3__default.forwardRef(
+var Section = React4__default.forwardRef(
   ({
     id,
     title,
@@ -130,54 +131,66 @@ function AlternatingBlocks({
     }
   );
 }
-var ArrowLeft = ({
-  size = 24,
-  className,
-  strokeWidth = 2,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className,
-      ...props,
-      children: /* @__PURE__ */ jsx("path", { d: "m12 19l-7-7l7-7m7 7H5" })
-    }
-  );
-};
-var ArrowRight = ({
-  size = 24,
-  className,
-  strokeWidth = 2,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    "svg",
+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",
     {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className,
-      ...props,
-      children: /* @__PURE__ */ jsx("path", { d: "M5 12h14m-7-7l7 7l-7 7" })
+      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
+        );
+      })
     }
-  );
-};
+  ) });
+}
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-button text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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",
   {
@@ -225,9 +238,114 @@ function Button({
     }
   );
 }
-var CarouselContext = React3.createContext(null);
+var svgCache = /* @__PURE__ */ new Map();
+function DynamicIcon({
+  name,
+  size = 28,
+  color,
+  className,
+  alt
+}) {
+  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, 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.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(
+    "span",
+    {
+      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;
+}
+var CarouselContext = React4.createContext(null);
 function useCarousel() {
-  const context = React3.useContext(CarouselContext);
+  const context = React4.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -249,20 +367,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React3.useState(false);
-  const [canScrollNext, setCanScrollNext] = React3.useState(false);
-  const onSelect = React3.useCallback((api2) => {
+  const [canScrollPrev, setCanScrollPrev] = React4.useState(false);
+  const [canScrollNext, setCanScrollNext] = React4.useState(false);
+  const onSelect = React4.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
-  const scrollPrev = React3.useCallback(() => {
+  const scrollPrev = React4.useCallback(() => {
     api?.scrollPrev();
   }, [api]);
-  const scrollNext = React3.useCallback(() => {
+  const scrollNext = React4.useCallback(() => {
     api?.scrollNext();
   }, [api]);
-  const handleKeyDown = React3.useCallback(
+  const handleKeyDown = React4.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -274,11 +392,11 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -376,7 +494,7 @@ function CarouselPrevious({
       onClick: scrollPrev,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ArrowLeft, {}),
+        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left" }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
       ]
     }
@@ -404,7 +522,7 @@ function CarouselNext({
       onClick: scrollNext,
       ...props,
       children: [
-        /* @__PURE__ */ jsx(ArrowRight, {}),
+        /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right" }),
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
       ]
     }
@@ -558,6 +676,60 @@ var BLOCK_REGISTRY = {
       mediaLeft: true
     }
   ]}
+/>
+    `.trim()
+  },
+  "media-hover-ctas": {
+    id: "media-hover-ctas",
+    name: "Media Hover CTAs",
+    description: "Display CTA cards that reveal background imagery or color on hover. Ideal for mission/vision tiles, service highlights, or campaign prompts.",
+    semanticTags: [
+      "cta",
+      "call-to-action",
+      "hover",
+      "media",
+      "cards",
+      "grid",
+      "image-hover",
+      "tiles",
+      "mission",
+      "vision"
+    ],
+    category: "cta",
+    component: MediaHoverCtas,
+    props: "MediaHoverCtasProps",
+    exampleUsage: `
+<MediaHoverCtas
+  items={[
+    {
+      content: (
+        <div className="flex max-w-sm flex-col gap-4">
+          <span className="text-sm font-semibold uppercase tracking-wide text-primary">
+            Our Mission
+          </span>
+          <p className="text-muted-foreground">
+            Deliver remarkable experiences with thoughtful design.
+          </p>
+        </div>
+      ),
+      onHoverImgSrc: "/images/mission.jpg",
+      altText: "Our Mission"
+    },
+    {
+      content: (
+        <div className="flex max-w-sm flex-col gap-4">
+          <span className="text-sm font-semibold uppercase tracking-wide text-primary">
+            Our Vision
+          </span>
+          <p className="text-muted-foreground">
+            Build the future of adaptive customer experiences.
+          </p>
+        </div>
+      ),
+      initialBackgroundColor: "var(--brand-100)",
+      onHoverBackgroundColor: "var(--brand-900)"
+    }
+  ]}
 />
     `.trim()
   },
@@ -645,7 +817,9 @@ function getAllCategories() {
 function searchBlocks(query) {
   const lowercaseQuery = query.toLowerCase();
   return Object.values(BLOCK_REGISTRY).filter(
-    (block) => block.name.toLowerCase().includes(lowercaseQuery) || block.description.toLowerCase().includes(lowercaseQuery) || block.semanticTags.some((tag) => tag.toLowerCase().includes(lowercaseQuery))
+    (block) => block.name.toLowerCase().includes(lowercaseQuery) || block.description.toLowerCase().includes(lowercaseQuery) || block.semanticTags.some(
+      (tag) => tag.toLowerCase().includes(lowercaseQuery)
+    )
   );
 }