@opensite/ui 1.6.7 → 1.6.8

package/dist/hero-task-timer-animated.cjs

@@ -452,111 +452,6 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var svgCache = /* @__PURE__ */ new Map();
-function DynamicIcon({
-  name,
-  size = 28,
-  color,
-  className,
-  alt
-}) {
-  const [svgContent, setSvgContent] = React__namespace.useState(null);
-  const [isLoading, setIsLoading] = React__namespace.useState(true);
-  const [error, setError] = React__namespace.useState(null);
-  const { url, iconName } = React__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}&key=au382bi7fsh96w9h9xlrnat2jglx`;
-    return {
-      url: baseUrl,
-      iconName: iconName2
-    };
-  }, [name, size]);
-  React__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(
-    "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;
-}
 function AspectRatio({
   ...props
 }) {
@@ -939,58 +834,35 @@ var Section = React__namespace.default.forwardRef(
 Section.displayName = "Section";
 function HeroTaskTimerAnimated({
   heading,
+  description,
+  descriptionClassName,
   actions,
   actionsSlot,
   images,
   imagesSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   imagesClassName,
   optixFlowConfig
 }) {
-  const defaultActions = [
-    {
-      label: "Download for Mac",
-      href: "#",
-      variant: "default",
-      className: "group h-fit rounded-xl p-4 text-xl font-semibold shadow-xl",
-      icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/apple", size: 20, className: "mr-2" })
-    },
-    {
-      label: "Download for Windows",
-      href: "#",
-      variant: "link",
-      className: "flex items-center gap-2 text-lg font-semibold ",
-      iconAfter: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
-    }
-  ];
   const renderActions = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
-    const actionsToRender = actions || defaultActions;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-start gap-4 sm:flex-row sm:items-center", children: actionsToRender.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      const isPrimaryAction = index === 0 && !actions;
-      if (isPrimaryAction) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          Pressable,
-          {
-            asButton: true,
-            className: actionClassName,
-            ...pressableProps,
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center transition-all group-hover:-translate-x-5", children: [
-              icon,
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
-              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20, className: "ml-2 opacity-0 transition-opacity group-hover:opacity-100" })
-            ] }) })
-          },
-          index
-        );
-      }
+    if (!actions || actions.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-start gap-4 sm:flex-row sm:items-center", children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -1006,7 +878,7 @@ function HeroTaskTimerAnimated({
         index
       );
     }) });
-  }, [actionsSlot, actions, defaultActions]);
+  }, [actionsSlot, actions]);
   const renderImages = React.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length < 2) return null;
@@ -1016,7 +888,10 @@ function HeroTaskTimerAnimated({
         {
           src: images[0].src,
           alt: images[0].alt,
-          className: cn("block size-full object-cover object-top-left", images[0].className),
+          className: cn(
+            "block size-full object-cover object-top-left",
+            images[0].className
+          ),
           optixFlowConfig
         }
       ) }) }) }),
@@ -1025,26 +900,59 @@ function HeroTaskTimerAnimated({
         {
           src: images[1].src,
           alt: images[1].alt,
-          className: cn("block size-full object-cover object-top-left", images[1].className),
+          className: cn(
+            "block size-full object-cover object-top-left",
+            images[1].className
+          ),
           optixFlowConfig
         }
       ) }) }) })
     ] });
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
-      className: cn(
-        "container flex flex-col gap-10 bg-background py-20 sm:gap-20",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-10 lg:w-[80%] lg:self-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl", headingClassName), children: heading })),
-          renderActions
-        ] }),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-6 md:gap-16", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-10 lg:w-[80%] lg:self-center",
+              headerClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  className: cn(
+                    "max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
+              renderActions
+            ]
+          }
+        ),
         renderImages
-      ]
+      ] })
     }
   );
 }

package/dist/hero-task-timer-animated.d.cts

@@ -46,6 +46,10 @@ interface HeroTaskTimerAnimatedProps {
      * Additional CSS classes for the section
      */
     className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Additional CSS classes for the header area
      */
@@ -62,7 +66,15 @@ interface HeroTaskTimerAnimatedProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Description text below heading
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
 }
-declare function HeroTaskTimerAnimated({ heading, actions, actionsSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, headerClassName, headingClassName, imagesClassName, optixFlowConfig, }: HeroTaskTimerAnimatedProps): React.JSX.Element;
+declare function HeroTaskTimerAnimated({ heading, description, descriptionClassName, actions, actionsSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, imagesClassName, optixFlowConfig, }: HeroTaskTimerAnimatedProps): React.JSX.Element;
 
 export { HeroTaskTimerAnimated, type HeroTaskTimerAnimatedProps };

package/dist/hero-task-timer-animated.d.ts

@@ -46,6 +46,10 @@ interface HeroTaskTimerAnimatedProps {
      * Additional CSS classes for the section
      */
     className?: string;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
     /**
      * Additional CSS classes for the header area
      */
@@ -62,7 +66,15 @@ interface HeroTaskTimerAnimatedProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Description text below heading
+     */
+    description?: React.ReactNode;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
 }
-declare function HeroTaskTimerAnimated({ heading, actions, actionsSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, headerClassName, headingClassName, imagesClassName, optixFlowConfig, }: HeroTaskTimerAnimatedProps): React.JSX.Element;
+declare function HeroTaskTimerAnimated({ heading, description, descriptionClassName, actions, actionsSlot, images, imagesSlot, background, spacing, pattern, patternOpacity, className, containerClassName, headerClassName, headingClassName, imagesClassName, optixFlowConfig, }: HeroTaskTimerAnimatedProps): React.JSX.Element;
 
 export { HeroTaskTimerAnimated, type HeroTaskTimerAnimatedProps };

package/dist/hero-task-timer-animated.js

@@ -430,111 +430,6 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var svgCache = /* @__PURE__ */ new Map();
-function DynamicIcon({
-  name,
-  size = 28,
-  color,
-  className,
-  alt
-}) {
-  const [svgContent, setSvgContent] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const { url, iconName } = React.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}&key=au382bi7fsh96w9h9xlrnat2jglx`;
-    return {
-      url: baseUrl,
-      iconName: iconName2
-    };
-  }, [name, size]);
-  React.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;
-}
 function AspectRatio({
   ...props
 }) {
@@ -917,58 +812,35 @@ var Section = React__default.forwardRef(
 Section.displayName = "Section";
 function HeroTaskTimerAnimated({
   heading,
+  description,
+  descriptionClassName,
   actions,
   actionsSlot,
   images,
   imagesSlot,
   background,
-  spacing,
+  spacing = "py-32 md:py-32",
   pattern,
   patternOpacity,
   className,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   imagesClassName,
   optixFlowConfig
 }) {
-  const defaultActions = [
-    {
-      label: "Download for Mac",
-      href: "#",
-      variant: "default",
-      className: "group h-fit rounded-xl p-4 text-xl font-semibold shadow-xl",
-      icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/apple", size: 20, className: "mr-2" })
-    },
-    {
-      label: "Download for Windows",
-      href: "#",
-      variant: "link",
-      className: "flex items-center gap-2 text-lg font-semibold ",
-      iconAfter: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20 })
-    }
-  ];
   const renderActions = useMemo(() => {
     if (actionsSlot) return actionsSlot;
-    const actionsToRender = actions || defaultActions;
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start gap-4 sm:flex-row sm:items-center", children: actionsToRender.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      const isPrimaryAction = index === 0 && !actions;
-      if (isPrimaryAction) {
-        return /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            asButton: true,
-            className: actionClassName,
-            ...pressableProps,
-            children: /* @__PURE__ */ jsx("div", { className: "size-full overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center transition-all group-hover:-translate-x-5", children: [
-              icon,
-              /* @__PURE__ */ jsx("span", { children: label }),
-              /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 20, className: "ml-2 opacity-0 transition-opacity group-hover:opacity-100" })
-            ] }) })
-          },
-          index
-        );
-      }
+    if (!actions || actions.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start gap-4 sm:flex-row sm:items-center", children: actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -984,7 +856,7 @@ function HeroTaskTimerAnimated({
         index
       );
     }) });
-  }, [actionsSlot, actions, defaultActions]);
+  }, [actionsSlot, actions]);
   const renderImages = useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length < 2) return null;
@@ -994,7 +866,10 @@ function HeroTaskTimerAnimated({
         {
           src: images[0].src,
           alt: images[0].alt,
-          className: cn("block size-full object-cover object-top-left", images[0].className),
+          className: cn(
+            "block size-full object-cover object-top-left",
+            images[0].className
+          ),
           optixFlowConfig
         }
       ) }) }) }),
@@ -1003,26 +878,59 @@ function HeroTaskTimerAnimated({
         {
           src: images[1].src,
           alt: images[1].alt,
-          className: cn("block size-full object-cover object-top-left", images[1].className),
+          className: cn(
+            "block size-full object-cover object-top-left",
+            images[1].className
+          ),
           optixFlowConfig
         }
       ) }) }) })
     ] });
   }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
-      className: cn(
-        "container flex flex-col gap-10 bg-background py-20 sm:gap-20",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-10 lg:w-[80%] lg:self-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl", headingClassName), children: heading })),
-          renderActions
-        ] }),
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-6 md:gap-16", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col gap-10 lg:w-[80%] lg:self-center",
+              headerClassName
+            ),
+            children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-balance", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
+              renderActions
+            ]
+          }
+        ),
         renderImages
-      ]
+      ] })
     }
   );
 }