@opensite/ui 0.3.0 → 0.3.2

package/dist/hero-stats-social-proof.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, S as StatItem, O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
+import { A as ActionConfig, S as StatItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface HeroStatsSocialProofProps {

package/dist/hero-stats-social-proof.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, S as StatItem, O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
+import { A as ActionConfig, S as StatItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface HeroStatsSocialProofProps {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface HeroTaskTimerAnimatedProps {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface HeroTaskTimerAnimatedProps {

package/dist/hero-tech-carousel.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface TechnologyItem {

package/dist/hero-tech-carousel.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface TechnologyItem {

package/dist/hero-therapy-testimonial-grid.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface TestimonialConfig {

package/dist/hero-therapy-testimonial-grid.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface TestimonialConfig {

package/dist/hero-ui-library-showcase.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { I as ImageItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
+import { I as ImageItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface HeroUiLibraryShowcaseProps {

package/dist/hero-ui-library-showcase.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { I as ImageItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
+import { I as ImageItem, A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface HeroUiLibraryShowcaseProps {

package/dist/hero-video-background-dark.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig } from './blocks-CJYRLpXR.cjs';
+import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface HeroVideoBackgroundDarkProps {

package/dist/hero-video-background-dark.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig } from './blocks-BWc_7JNA.js';
+import { A as ActionConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface HeroVideoBackgroundDarkProps {

package/dist/hero-video-dialog-gradient.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface VideoDialogConfig {

package/dist/hero-video-dialog-gradient.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface VideoDialogConfig {

package/dist/hero-welcome-asymmetric-images.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, I as ImageItem } from './blocks-CJYRLpXR.cjs';
+import { A as ActionConfig, I as ImageItem } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface HeroWelcomeAsymmetricImagesProps {

package/dist/hero-welcome-asymmetric-images.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { A as ActionConfig, I as ImageItem } from './blocks-BWc_7JNA.js';
+import { A as ActionConfig, I as ImageItem } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface HeroWelcomeAsymmetricImagesProps {

package/dist/image-slider.cjs

@@ -0,0 +1,192 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var react = require('motion/react');
+var img = require('@page-speed/img');
+var jsxRuntime = require('react/jsx-runtime');
+
+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__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var slideVariants = {
+  initial: {
+    scale: 0.98,
+    opacity: 0,
+    rotateX: 12
+  },
+  visible: {
+    scale: 1,
+    rotateX: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.55,
+      ease: [0.645, 0.045, 0.355, 1]
+    }
+  },
+  upExit: {
+    opacity: 0.8,
+    y: "-120%",
+    transition: {
+      duration: 0.8
+    }
+  },
+  downExit: {
+    opacity: 0.8,
+    y: "120%",
+    transition: {
+      duration: 0.8
+    }
+  }
+};
+var normalizeIndex = (index, length) => {
+  if (!length) return 0;
+  const safeIndex = index % length;
+  return safeIndex < 0 ? safeIndex + length : safeIndex;
+};
+var ImageSlider = ({
+  images,
+  children,
+  overlay = true,
+  overlaySlot,
+  overlayClassName,
+  className,
+  imageClassName,
+  contentClassName,
+  autoplay = true,
+  autoplayIntervalMs = 6e3,
+  direction = "up",
+  startIndex = 0,
+  enableKeyboard = true,
+  onSlideChange,
+  optixFlowConfig
+}) => {
+  const hasImages = images.length > 0;
+  const [currentIndex, setCurrentIndex] = React__namespace.useState(
+    () => normalizeIndex(startIndex, images.length)
+  );
+  const handleNext = React__namespace.useCallback(() => {
+    if (!hasImages) return;
+    setCurrentIndex((prevIndex) => {
+      const nextIndex = prevIndex + 1 >= images.length ? 0 : prevIndex + 1;
+      onSlideChange?.(nextIndex);
+      return nextIndex;
+    });
+  }, [hasImages, images.length, onSlideChange]);
+  const handlePrevious = React__namespace.useCallback(() => {
+    if (!hasImages) return;
+    setCurrentIndex((prevIndex) => {
+      const nextIndex = prevIndex - 1 < 0 ? images.length - 1 : prevIndex - 1;
+      onSlideChange?.(nextIndex);
+      return nextIndex;
+    });
+  }, [hasImages, images.length, onSlideChange]);
+  React__namespace.useEffect(() => {
+    if (!hasImages) return;
+    setCurrentIndex(normalizeIndex(startIndex, images.length));
+  }, [startIndex, images.length, hasImages]);
+  React__namespace.useEffect(() => {
+    if (!enableKeyboard || !hasImages) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "ArrowRight") {
+        handleNext();
+      } else if (event.key === "ArrowLeft") {
+        handlePrevious();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [enableKeyboard, handleNext, handlePrevious, hasImages]);
+  React__namespace.useEffect(() => {
+    if (!autoplay || images.length < 2) return;
+    const interval = window.setInterval(handleNext, autoplayIntervalMs);
+    return () => window.clearInterval(interval);
+  }, [autoplay, autoplayIntervalMs, handleNext, images.length]);
+  const activeImage = hasImages ? images[currentIndex] : null;
+  const overlayContent = overlaySlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 z-10", overlayClassName), children: overlaySlot }) : overlay ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0 z-10 bg-linear-to-b from-black/35 via-black/50 to-black/70",
+        overlayClassName
+      )
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex min-h-[420px] w-full items-center justify-center overflow-hidden rounded-3xl border border-border/40 bg-muted/30 shadow-2xl",
+        className
+      ),
+      style: {
+        perspective: "1000px"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", initial: false, children: activeImage ? /* @__PURE__ */ jsxRuntime.jsx(
+          react.motion.div,
+          {
+            initial: "initial",
+            animate: "visible",
+            exit: direction === "up" ? "upExit" : "downExit",
+            variants: slideVariants,
+            className: "absolute inset-0",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: activeImage.src,
+                mediaId: activeImage.mediaId,
+                alt: activeImage.alt,
+                className: cn(
+                  "h-full w-full object-cover object-center",
+                  imageClassName,
+                  activeImage.className
+                ),
+                optixFlowConfig: activeImage.optixFlowConfig ?? optixFlowConfig,
+                eager: true
+              }
+            )
+          },
+          `${currentIndex}-${activeImage.src ?? activeImage.mediaId ?? "image"}`
+        ) : null }),
+        overlayContent,
+        children ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "relative z-20 flex w-full flex-col items-center justify-center px-6 py-12 text-center text-white md:px-12",
+              contentClassName
+            ),
+            children
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
+exports.ImageSlider = ImageSlider;

package/dist/image-slider.d.cts

@@ -0,0 +1,101 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import 'class-variance-authority';
+import './button-variants-lRElsmTc.cjs';
+import 'class-variance-authority/types';
+
+type ImageSliderDirection = "up" | "down";
+interface ImageSliderImage {
+    /**
+     * Image source URL
+     */
+    src?: string;
+    /**
+     * Alt text for accessibility
+     */
+    alt: string;
+    /**
+     * Optional legacy media ID for the image component
+     */
+    mediaId?: number;
+    /**
+     * Additional CSS classes for the image
+     */
+    className?: string;
+    /**
+     * Optional per-image OptixFlow configuration
+     */
+    optixFlowConfig?: OptixFlowConfig;
+}
+interface ImageSliderProps {
+    /**
+     * Images to rotate through
+     */
+    images: ImageSliderImage[];
+    /**
+     * Optional overlay content rendered above the images
+     */
+    children?: React.ReactNode;
+    /**
+     * Enable the default overlay gradient
+     * @default true
+     */
+    overlay?: boolean;
+    /**
+     * Custom overlay slot (overrides default overlay)
+     */
+    overlaySlot?: React.ReactNode;
+    /**
+     * Additional classes for the overlay layer
+     */
+    overlayClassName?: string;
+    /**
+     * Additional classes for the slider wrapper
+     */
+    className?: string;
+    /**
+     * Additional classes for the image element
+     */
+    imageClassName?: string;
+    /**
+     * Additional classes for the content wrapper
+     */
+    contentClassName?: string;
+    /**
+     * Enable autoplay rotation
+     * @default true
+     */
+    autoplay?: boolean;
+    /**
+     * Autoplay interval in milliseconds
+     * @default 6000
+     */
+    autoplayIntervalMs?: number;
+    /**
+     * Direction for the slide exit animation
+     * @default "up"
+     */
+    direction?: ImageSliderDirection;
+    /**
+     * Starting image index
+     * @default 0
+     */
+    startIndex?: number;
+    /**
+     * Enable keyboard navigation via arrow keys
+     * @default true
+     */
+    enableKeyboard?: boolean;
+    /**
+     * Optional callback when the slide changes
+     */
+    onSlideChange?: (index: number) => void;
+    /**
+     * Global OptixFlow configuration for all images
+     */
+    optixFlowConfig?: OptixFlowConfig;
+}
+declare const ImageSlider: ({ images, children, overlay, overlaySlot, overlayClassName, className, imageClassName, contentClassName, autoplay, autoplayIntervalMs, direction, startIndex, enableKeyboard, onSlideChange, optixFlowConfig, }: ImageSliderProps) => react_jsx_runtime.JSX.Element;
+
+export { ImageSlider, type ImageSliderDirection, type ImageSliderImage, type ImageSliderProps };

package/dist/image-slider.d.ts

@@ -0,0 +1,101 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import 'class-variance-authority';
+import './button-variants-lRElsmTc.js';
+import 'class-variance-authority/types';
+
+type ImageSliderDirection = "up" | "down";
+interface ImageSliderImage {
+    /**
+     * Image source URL
+     */
+    src?: string;
+    /**
+     * Alt text for accessibility
+     */
+    alt: string;
+    /**
+     * Optional legacy media ID for the image component
+     */
+    mediaId?: number;
+    /**
+     * Additional CSS classes for the image
+     */
+    className?: string;
+    /**
+     * Optional per-image OptixFlow configuration
+     */
+    optixFlowConfig?: OptixFlowConfig;
+}
+interface ImageSliderProps {
+    /**
+     * Images to rotate through
+     */
+    images: ImageSliderImage[];
+    /**
+     * Optional overlay content rendered above the images
+     */
+    children?: React.ReactNode;
+    /**
+     * Enable the default overlay gradient
+     * @default true
+     */
+    overlay?: boolean;
+    /**
+     * Custom overlay slot (overrides default overlay)
+     */
+    overlaySlot?: React.ReactNode;
+    /**
+     * Additional classes for the overlay layer
+     */
+    overlayClassName?: string;
+    /**
+     * Additional classes for the slider wrapper
+     */
+    className?: string;
+    /**
+     * Additional classes for the image element
+     */
+    imageClassName?: string;
+    /**
+     * Additional classes for the content wrapper
+     */
+    contentClassName?: string;
+    /**
+     * Enable autoplay rotation
+     * @default true
+     */
+    autoplay?: boolean;
+    /**
+     * Autoplay interval in milliseconds
+     * @default 6000
+     */
+    autoplayIntervalMs?: number;
+    /**
+     * Direction for the slide exit animation
+     * @default "up"
+     */
+    direction?: ImageSliderDirection;
+    /**
+     * Starting image index
+     * @default 0
+     */
+    startIndex?: number;
+    /**
+     * Enable keyboard navigation via arrow keys
+     * @default true
+     */
+    enableKeyboard?: boolean;
+    /**
+     * Optional callback when the slide changes
+     */
+    onSlideChange?: (index: number) => void;
+    /**
+     * Global OptixFlow configuration for all images
+     */
+    optixFlowConfig?: OptixFlowConfig;
+}
+declare const ImageSlider: ({ images, children, overlay, overlaySlot, overlayClassName, className, imageClassName, contentClassName, autoplay, autoplayIntervalMs, direction, startIndex, enableKeyboard, onSlideChange, optixFlowConfig, }: ImageSliderProps) => react_jsx_runtime.JSX.Element;
+
+export { ImageSlider, type ImageSliderDirection, type ImageSliderImage, type ImageSliderProps };