@opensite/ui 3.7.5 → 3.7.6

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

@@ -4,43 +4,18 @@
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var img = require('@page-speed/img');
-var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 var jsxRuntime = require('react/jsx-runtime');
 var pressable = require('@page-speed/pressable');
+var img = require('@page-speed/img');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
 var React__default = /*#__PURE__*/_interopDefault(React);
-var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
 
 // components/blocks/hero/hero-task-timer-animated.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function AspectRatio({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(AspectRatioPrimitive__namespace.Root, { "data-slot": "aspect-ratio", ...props });
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -536,69 +511,71 @@ var BrandLogo = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center", logoClassName), children: imgElement });
 };
+function padTwo(n) {
+  return n.toString().padStart(2, "0");
+}
+var RING_RADIUS = 90;
+var RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
 function HeroTaskTimerAnimated({
   sectionId = "hero-task-timer-animated",
   heading,
+  headingSlot,
   description,
-  descriptionClassName,
   actions,
   actionsSlot,
   actionsClassName,
-  images,
-  imagesSlot,
+  taskItems,
+  timerMinutes = 25,
+  timerSeconds = 0,
   background,
   pattern,
   patternOpacity,
   className,
-  spacing = "xl",
+  spacing = "hero",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
-  imagesClassName,
-  optixFlowConfig,
+  descriptionClassName,
   logo,
   logoSlot,
   logoClassName
 }) {
-  const renderImages = React.useMemo(() => {
-    if (imagesSlot) return imagesSlot;
-    if (!images || images.length < 2) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+  const initialTotal = timerMinutes * 60 + timerSeconds;
+  const [remaining, setRemaining] = React.useState(initialTotal);
+  const [activeTaskIndex, setActiveTaskIndex] = React.useState(0);
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setRemaining((prev) => prev <= 0 ? initialTotal : prev - 1);
+    }, 1e3);
+    return () => clearInterval(interval);
+  }, [initialTotal]);
+  const cycleTask = React.useCallback(() => {
+    if (!taskItems || taskItems.length <= 1) return;
+    setActiveTaskIndex((prev) => (prev + 1) % taskItems.length);
+  }, [taskItems]);
+  React.useEffect(() => {
+    if (!taskItems || taskItems.length <= 1) return;
+    const interval = setInterval(cycleTask, 3e3);
+    return () => clearInterval(interval);
+  }, [taskItems, cycleTask]);
+  const minutes = Math.floor(remaining / 60);
+  const seconds = remaining % 60;
+  const progress = initialTotal > 0 ? remaining / initialTotal : 1;
+  const strokeDashoffset = RING_CIRCUMFERENCE * (1 - progress);
+  const renderHeading = React.useMemo(() => {
+    if (headingSlot) return headingSlot;
+    if (!heading) return null;
+    return typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+      "h1",
       {
         className: cn(
-          "flex flex-col mt-6 gap-6 md:gap-10 lg:flex-row",
-          imagesClassName
+          "max-w-3xl text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+          headingClassName
         ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-10 w-full lg:w-[60%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.916786227 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
-            {
-              src: images[0].src,
-              alt: images[0].alt,
-              className: cn(
-                "block size-full object-cover object-center",
-                images[0].className
-              ),
-              optixFlowConfig
-            }
-          ) }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-10 w-full lg:w-[40%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg shadow-xl", children: /* @__PURE__ */ jsxRuntime.jsx(AspectRatio, { ratio: 1.916786227 / 1, children: /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
-            {
-              src: images[1].src,
-              alt: images[1].alt,
-              className: cn(
-                "block size-full object-cover object-center",
-                images[1].className
-              ),
-              optixFlowConfig
-            }
-          ) }) }) })
-        ]
+        children: heading
       }
-    );
-  }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
+    ) : heading;
+  }, [headingSlot, heading, headingClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -609,48 +586,140 @@ function HeroTaskTimerAnimated({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-6 md:gap-16", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-center gap-10 lg:flex-row lg:items-center lg:gap-16", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "flex flex-col gap-4 w-full pt-12 lg:pt-0",
+              "flex flex-col gap-5 w-full lg:w-1/2 pt-8 lg:pt-0",
               headerClassName
             ),
             children: [
               (logo || logoSlot) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", logoClassName), children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot, size: "lg" }) }),
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "h1",
+              renderHeading,
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
                 {
                   className: cn(
-                    "max-w-2xl text-6xl font-bold tracking-tight md:text-7xl lg:text-8xl text-balance",
-                    headingClassName
+                    "max-w-xl text-lg text-muted-foreground text-balance",
+                    descriptionClassName
                   ),
-                  children: heading
+                  children: description
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                "h1",
+              ) : description),
+              taskItems && taskItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-col gap-3", children: taskItems.map((task, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
                 {
-                  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 })),
+                  className: "flex items-center gap-3 transition-all duration-700 ease-in-out",
+                  style: {
+                    opacity: index === activeTaskIndex ? 1 : 0.35,
+                    transform: index === activeTaskIndex ? "translateX(8px)" : "translateX(0)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "size-2.5 shrink-0 rounded-full transition-colors duration-700",
+                          index === activeTaskIndex ? "bg-primary" : "bg-muted-foreground/30"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "text-sm font-medium transition-colors duration-700",
+                          index === activeTaskIndex ? "text-foreground" : "text-muted-foreground/50"
+                        ),
+                        children: task
+                      }
+                    )
+                  ]
+                },
+                index
+              )) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 BlockActions,
                 {
                   actions,
                   actionsSlot,
-                  actionsClassName
+                  actionsClassName: cn("mt-2", actionsClassName)
                 }
               )
             ]
           }
         ),
-        renderImages
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full items-center justify-center lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-center gap-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                width: "240",
+                height: "240",
+                viewBox: "0 0 220 220",
+                className: "drop-shadow-lg",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "circle",
+                    {
+                      cx: "110",
+                      cy: "110",
+                      r: RING_RADIUS,
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "5",
+                      className: "text-muted-foreground/15"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "circle",
+                    {
+                      cx: "110",
+                      cy: "110",
+                      r: RING_RADIUS,
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "5",
+                      strokeLinecap: "round",
+                      className: "text-primary transition-[stroke-dashoffset] duration-1000 ease-linear",
+                      strokeDasharray: RING_CIRCUMFERENCE,
+                      strokeDashoffset,
+                      transform: "rotate(-90 110 110)"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-1 font-mono", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-5xl font-bold tabular-nums tracking-tight md:text-6xl", children: padTwo(minutes) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-pulse text-3xl font-bold text-primary md:text-4xl", children: ":" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-5xl font-bold tabular-nums tracking-tight md:text-6xl", children: padTwo(seconds) })
+            ] }) })
+          ] }),
+          taskItems && taskItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-8 w-full max-w-[280px] overflow-hidden", children: taskItems.map((task, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute inset-0 flex items-center justify-center transition-all duration-700 ease-in-out",
+              style: {
+                opacity: index === activeTaskIndex ? 1 : 0,
+                transform: index === activeTaskIndex ? "translateY(0)" : "translateY(12px)"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate rounded-full bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary", children: task })
+            },
+            index
+          )) }),
+          taskItems && taskItems.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: taskItems.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "size-2 rounded-full transition-all duration-500",
+                index === activeTaskIndex ? "scale-125 bg-primary" : "bg-muted-foreground/25"
+              )
+            },
+            index
+          )) })
+        ] }) })
       ] })
     }
   );

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cgd-IXlI.cjs';
 import { L as LogoConfig } from './types-mWZcgKth.cjs';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DyouPohq.cjs';
+import { A as ActionConfig } from './blocks-DyouPohq.cjs';
 import 'react/jsx-runtime';
 import './dynamic-icon.cjs';
 import '@page-speed/icon';
@@ -14,6 +14,14 @@ interface HeroTaskTimerAnimatedProps {
      * Main heading content
      */
     heading?: React.ReactNode;
+    /**
+     * Custom slot for heading (overrides heading prop)
+     */
+    headingSlot?: React.ReactNode;
+    /**
+     * Description text below heading
+     */
+    description?: React.ReactNode;
     /**
      * Array of action configurations for CTA buttons
      */
@@ -27,13 +35,18 @@ interface HeroTaskTimerAnimatedProps {
      */
     actionsClassName?: string;
     /**
-     * Array of showcase images (expects 2 images)
+     * Array of task labels that cycle through with animation
+     */
+    taskItems?: string[];
+    /**
+     * Starting minutes for the animated countdown display (default: 25 — Pomodoro style)
      */
-    images?: ImageItem[];
+    timerMinutes?: number;
     /**
-     * Custom slot for images (overrides images array)
+     * Starting seconds for the animated countdown display (default: 0)
      */
-    imagesSlot?: React.ReactNode; /**
+    timerSeconds?: number;
+    /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -65,18 +78,6 @@ interface HeroTaskTimerAnimatedProps {
      * Additional CSS classes for the heading
      */
     headingClassName?: string;
-    /**
-     * Additional CSS classes for the images area
-     */
-    imagesClassName?: string;
-    /**
-     * OptixFlow image optimization configuration
-     */
-    optixFlowConfig?: OptixFlowConfig;
-    /**
-     * Description text below heading
-     */
-    description?: React.ReactNode;
     /**
      * Additional CSS classes for the description
      */
@@ -96,6 +97,6 @@ interface HeroTaskTimerAnimatedProps {
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function HeroTaskTimerAnimated({ sectionId, heading, description, descriptionClassName, actions, actionsSlot, actionsClassName, images, imagesSlot, background, pattern, patternOpacity, className, spacing, containerClassName, headerClassName, headingClassName, imagesClassName, optixFlowConfig, logo, logoSlot, logoClassName, }: HeroTaskTimerAnimatedProps): React.JSX.Element;
+declare function HeroTaskTimerAnimated({ sectionId, heading, headingSlot, description, actions, actionsSlot, actionsClassName, taskItems, timerMinutes, timerSeconds, background, pattern, patternOpacity, className, spacing, containerClassName, headerClassName, headingClassName, descriptionClassName, logo, logoSlot, logoClassName, }: HeroTaskTimerAnimatedProps): React.JSX.Element;
 
 export { HeroTaskTimerAnimated, type HeroTaskTimerAnimatedProps };

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Dud0DKXB.js';
 import { L as LogoConfig } from './types-hJ2R0GoH.js';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DyouPohq.js';
+import { A as ActionConfig } from './blocks-DyouPohq.js';
 import 'react/jsx-runtime';
 import './dynamic-icon.js';
 import '@page-speed/icon';
@@ -14,6 +14,14 @@ interface HeroTaskTimerAnimatedProps {
      * Main heading content
      */
     heading?: React.ReactNode;
+    /**
+     * Custom slot for heading (overrides heading prop)
+     */
+    headingSlot?: React.ReactNode;
+    /**
+     * Description text below heading
+     */
+    description?: React.ReactNode;
     /**
      * Array of action configurations for CTA buttons
      */
@@ -27,13 +35,18 @@ interface HeroTaskTimerAnimatedProps {
      */
     actionsClassName?: string;
     /**
-     * Array of showcase images (expects 2 images)
+     * Array of task labels that cycle through with animation
+     */
+    taskItems?: string[];
+    /**
+     * Starting minutes for the animated countdown display (default: 25 — Pomodoro style)
      */
-    images?: ImageItem[];
+    timerMinutes?: number;
     /**
-     * Custom slot for images (overrides images array)
+     * Starting seconds for the animated countdown display (default: 0)
      */
-    imagesSlot?: React.ReactNode; /**
+    timerSeconds?: number;
+    /**
      * Background style for the section
      */
     background?: SectionBackground;
@@ -65,18 +78,6 @@ interface HeroTaskTimerAnimatedProps {
      * Additional CSS classes for the heading
      */
     headingClassName?: string;
-    /**
-     * Additional CSS classes for the images area
-     */
-    imagesClassName?: string;
-    /**
-     * OptixFlow image optimization configuration
-     */
-    optixFlowConfig?: OptixFlowConfig;
-    /**
-     * Description text below heading
-     */
-    description?: React.ReactNode;
     /**
      * Additional CSS classes for the description
      */
@@ -96,6 +97,6 @@ interface HeroTaskTimerAnimatedProps {
     /** Optional Section ID */
     sectionId?: string;
 }
-declare function HeroTaskTimerAnimated({ sectionId, heading, description, descriptionClassName, actions, actionsSlot, actionsClassName, images, imagesSlot, background, pattern, patternOpacity, className, spacing, containerClassName, headerClassName, headingClassName, imagesClassName, optixFlowConfig, logo, logoSlot, logoClassName, }: HeroTaskTimerAnimatedProps): React.JSX.Element;
+declare function HeroTaskTimerAnimated({ sectionId, heading, headingSlot, description, actions, actionsSlot, actionsClassName, taskItems, timerMinutes, timerSeconds, background, pattern, patternOpacity, className, spacing, containerClassName, headerClassName, headingClassName, descriptionClassName, logo, logoSlot, logoClassName, }: HeroTaskTimerAnimatedProps): React.JSX.Element;
 
 export { HeroTaskTimerAnimated, type HeroTaskTimerAnimatedProps };