@hanzo/ui 5.3.34 → 5.3.36

package/dist/3d/carousel.mjs

@@ -1,344 +1,2 @@
 "use client";
-import * as React from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { cn } from '@hanzo/ui/lib/utils';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var Carousel3D = React.forwardRef(
-  ({
-    items,
-    itemWidth = 300,
-    itemHeight = 400,
-    spacing = 80,
-    perspective = 1e3,
-    rotateY = 40,
-    autoRotate = false,
-    autoRotateSpeed = 3e3,
-    showControls = true,
-    infinite = true,
-    className,
-    ...props
-  }, ref) => {
-    const containerRef = React.useRef(null);
-    const [currentIndex, setCurrentIndex] = React.useState(0);
-    const [isHovered, setIsHovered] = React.useState(false);
-    const [isDragging, setIsDragging] = React.useState(false);
-    const [dragStart, setDragStart] = React.useState({ x: 0, y: 0 });
-    const [dragOffset, setDragOffset] = React.useState(0);
-    const autoRotateRef = React.useRef(void 0);
-    const totalItems = items.length;
-    const radius = (itemWidth + spacing) / 2 / Math.tan(Math.PI / totalItems);
-    React.useEffect(() => {
-      if (autoRotate && !isHovered && !isDragging) {
-        autoRotateRef.current = setInterval(() => {
-          setCurrentIndex((prev) => (prev + 1) % totalItems);
-        }, autoRotateSpeed);
-      } else {
-        if (autoRotateRef.current) {
-          clearInterval(autoRotateRef.current);
-        }
-      }
-      return () => {
-        if (autoRotateRef.current) {
-          clearInterval(autoRotateRef.current);
-        }
-      };
-    }, [autoRotate, isHovered, isDragging, autoRotateSpeed, totalItems]);
-    const goToPrevious = React.useCallback(() => {
-      setCurrentIndex(
-        (prev) => infinite ? (prev - 1 + totalItems) % totalItems : Math.max(0, prev - 1)
-      );
-    }, [infinite, totalItems]);
-    const goToNext = React.useCallback(() => {
-      setCurrentIndex(
-        (prev) => infinite ? (prev + 1) % totalItems : Math.min(totalItems - 1, prev + 1)
-      );
-    }, [infinite, totalItems]);
-    const goToIndex = React.useCallback(
-      (index) => {
-        setCurrentIndex(Math.max(0, Math.min(totalItems - 1, index)));
-      },
-      [totalItems]
-    );
-    const handleDragStart = React.useCallback(
-      (clientX, clientY) => {
-        setIsDragging(true);
-        setDragStart({ x: clientX, y: clientY });
-        setDragOffset(0);
-      },
-      []
-    );
-    const handleDragMove = React.useCallback(
-      (clientX, clientY) => {
-        if (!isDragging) return;
-        const deltaX = clientX - dragStart.x;
-        const sensitivity = 0.5;
-        const newOffset = deltaX * sensitivity;
-        setDragOffset(newOffset);
-      },
-      [isDragging, dragStart.x]
-    );
-    const handleDragEnd = React.useCallback(() => {
-      if (!isDragging) return;
-      const threshold = 50;
-      if (Math.abs(dragOffset) > threshold) {
-        if (dragOffset > 0) {
-          goToPrevious();
-        } else {
-          goToNext();
-        }
-      }
-      setIsDragging(false);
-      setDragOffset(0);
-    }, [isDragging, dragOffset, goToPrevious, goToNext]);
-    const handleMouseDown = React.useCallback(
-      (e) => {
-        e.preventDefault();
-        handleDragStart(e.clientX, e.clientY);
-      },
-      [handleDragStart]
-    );
-    const handleMouseMove = React.useCallback(
-      (e) => {
-        handleDragMove(e.clientX, e.clientY);
-      },
-      [handleDragMove]
-    );
-    const handleMouseUp = React.useCallback(() => {
-      handleDragEnd();
-    }, [handleDragEnd]);
-    const handleTouchStart = React.useCallback(
-      (e) => {
-        if (e.touches.length === 1) {
-          const touch = e.touches[0];
-          handleDragStart(touch.clientX, touch.clientY);
-        }
-      },
-      [handleDragStart]
-    );
-    const handleTouchMove = React.useCallback(
-      (e) => {
-        if (e.touches.length === 1) {
-          e.preventDefault();
-          const touch = e.touches[0];
-          handleDragMove(touch.clientX, touch.clientY);
-        }
-      },
-      [handleDragMove]
-    );
-    const handleTouchEnd = React.useCallback(() => {
-      handleDragEnd();
-    }, [handleDragEnd]);
-    React.useEffect(() => {
-      const handleKeyDown = /* @__PURE__ */ __name((e) => {
-        if (e.key === "ArrowLeft") {
-          e.preventDefault();
-          goToPrevious();
-        } else if (e.key === "ArrowRight") {
-          e.preventDefault();
-          goToNext();
-        } else if (e.key >= "1" && e.key <= "9") {
-          const index = parseInt(e.key) - 1;
-          if (index < totalItems) {
-            goToIndex(index);
-          }
-        }
-      }, "handleKeyDown");
-      if (containerRef.current) {
-        containerRef.current.addEventListener("keydown", handleKeyDown);
-        return () => {
-          containerRef.current?.removeEventListener("keydown", handleKeyDown);
-        };
-      }
-    }, [goToPrevious, goToNext, goToIndex, totalItems]);
-    React.useImperativeHandle(ref, () => containerRef.current);
-    const containerStyle = {
-      perspective: `${perspective}px`,
-      height: `${itemHeight + 100}px`
-    };
-    const carouselStyle = {
-      transform: `translateZ(-${radius}px) rotateY(${-currentIndex * (360 / totalItems) + dragOffset / 5}deg)`,
-      transition: isDragging ? "none" : "transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1)",
-      transformStyle: "preserve-3d"
-    };
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: containerRef,
-        className: cn(
-          "relative w-full select-none focus:outline-none",
-          className
-        ),
-        style: containerStyle,
-        onMouseEnter: () => setIsHovered(true),
-        onMouseLeave: () => setIsHovered(false),
-        onMouseDown: handleMouseDown,
-        onMouseMove: handleMouseMove,
-        onMouseUp: handleMouseUp,
-        onTouchStart: handleTouchStart,
-        onTouchMove: handleTouchMove,
-        onTouchEnd: handleTouchEnd,
-        tabIndex: 0,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "relative mx-auto",
-              style: {
-                width: `${itemWidth}px`,
-                height: `${itemHeight}px`,
-                transformStyle: "preserve-3d"
-              },
-              children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: carouselStyle, children: items.map((item, index) => {
-                const angle = index / totalItems * 360;
-                const isCurrent = index === currentIndex;
-                const itemStyle = {
-                  transform: `rotateY(${angle}deg) translateZ(${radius}px)`,
-                  width: `${itemWidth}px`,
-                  height: `${itemHeight}px`,
-                  position: "absolute",
-                  backfaceVisibility: "hidden",
-                  transformStyle: "preserve-3d"
-                };
-                return /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn(
-                      "rounded-lg border bg-card text-card-foreground shadow-lg cursor-pointer",
-                      "transition-all duration-300 transform-gpu will-change-transform",
-                      isCurrent && "ring-2 ring-primary ring-offset-2"
-                    ),
-                    style: itemStyle,
-                    onClick: () => goToIndex(index),
-                    children: /* @__PURE__ */ jsx("div", { className: "w-full h-full overflow-hidden rounded-lg", children: item.content })
-                  },
-                  item.id
-                );
-              }) })
-            }
-          ),
-          showControls && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: cn(
-                  "absolute left-4 top-1/2 -translate-y-1/2 z-10",
-                  "p-2 rounded-full bg-background/80 backdrop-blur-sm",
-                  "border shadow-lg hover:bg-background transition-all",
-                  "disabled:opacity-50 disabled:cursor-not-allowed"
-                ),
-                onClick: goToPrevious,
-                disabled: !infinite && currentIndex === 0,
-                "aria-label": "Previous item",
-                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-5 h-5" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: cn(
-                  "absolute right-4 top-1/2 -translate-y-1/2 z-10",
-                  "p-2 rounded-full bg-background/80 backdrop-blur-sm",
-                  "border shadow-lg hover:bg-background transition-all",
-                  "disabled:opacity-50 disabled:cursor-not-allowed"
-                ),
-                onClick: goToNext,
-                disabled: !infinite && currentIndex === totalItems - 1,
-                "aria-label": "Next item",
-                children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-5 h-5" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10", children: /* @__PURE__ */ jsx("div", { className: "flex space-x-2 p-2 rounded-full bg-background/80 backdrop-blur-sm border shadow-lg", children: items.map((_, index) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: cn(
-                "w-2 h-2 rounded-full transition-all",
-                index === currentIndex ? "bg-primary scale-125" : "bg-muted-foreground/50 hover:bg-muted-foreground/75"
-              ),
-              onClick: () => goToIndex(index),
-              "aria-label": `Go to item ${index + 1}`
-            },
-            index
-          )) }) }),
-          autoRotate && /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 p-2 rounded-full bg-background/80 backdrop-blur-sm border shadow-sm", children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "w-2 h-2 rounded-full transition-all",
-                  isHovered || isDragging ? "bg-orange-500" : "bg-green-500 animate-pulse"
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: isHovered || isDragging ? "Paused" : "Auto" })
-          ] }) })
-        ]
-      }
-    );
-  }
-);
-Carousel3D.displayName = "Carousel3D";
-var Carousel3DCard = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn(
-      "w-full h-full flex flex-col bg-gradient-to-br from-background to-muted/20",
-      "border rounded-lg overflow-hidden group",
-      className
-    ),
-    ...props,
-    children
-  }
-));
-Carousel3DCard.displayName = "Carousel3DCard";
-var Carousel3DCardImage = React.forwardRef(({ className, alt, ...props }, ref) => /* @__PURE__ */ jsx(
-  "img",
-  {
-    ref,
-    className: cn(
-      "w-full h-48 object-cover transition-transform duration-300",
-      "group-hover:scale-105",
-      className
-    ),
-    alt,
-    ...props
-  }
-));
-Carousel3DCardImage.displayName = "Carousel3DCardImage";
-var Carousel3DCardContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex-1 p-4 flex flex-col justify-between", className),
-    ...props,
-    children
-  }
-));
-Carousel3DCardContent.displayName = "Carousel3DCardContent";
-var Carousel3DCardTitle = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  "h3",
-  {
-    ref,
-    className: cn("font-semibold text-lg mb-2 line-clamp-2", className),
-    ...props,
-    children
-  }
-));
-Carousel3DCardTitle.displayName = "Carousel3DCardTitle";
-var Carousel3DCardDescription = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  "p",
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground line-clamp-3 mb-4", className),
-    ...props,
-    children
-  }
-));
-Carousel3DCardDescription.displayName = "Carousel3DCardDescription";
-
-export { Carousel3D, Carousel3DCard, Carousel3DCardContent, Carousel3DCardDescription, Carousel3DCardImage, Carousel3DCardTitle };
+import*as t from'react';import {ChevronLeft,ChevronRight}from'lucide-react';import {cn}from'@hanzo/ui/lib/utils';import {jsxs,jsx,Fragment}from'react/jsx-runtime';var B=Object.defineProperty;var $=(s,n)=>B(s,"name",{value:n,configurable:true});var W=t.forwardRef(({items:s,itemWidth:n=300,itemHeight:l=400,spacing:c=80,perspective:A=1e3,rotateY:ne=40,autoRotate:w=false,autoRotateSpeed:E=3e3,showControls:Y=true,infinite:i=true,className:X,...z},O)=>{let m=t.useRef(null),[f,v]=t.useState(0),[R,L]=t.useState(false),[d,H]=t.useState(false),[S,K]=t.useState({x:0,y:0}),[C,x]=t.useState(0),b=t.useRef(void 0),o=s.length,I=(n+c)/2/Math.tan(Math.PI/o);t.useEffect(()=>(w&&!R&&!d?b.current=setInterval(()=>{v(e=>(e+1)%o);},E):b.current&&clearInterval(b.current),()=>{b.current&&clearInterval(b.current);}),[w,R,d,E,o]);let g=t.useCallback(()=>{v(e=>i?(e-1+o)%o:Math.max(0,e-1));},[i,o]),p=t.useCallback(()=>{v(e=>i?(e+1)%o:Math.min(o-1,e+1));},[i,o]),y=t.useCallback(e=>{v(Math.max(0,Math.min(o-1,e)));},[o]),D=t.useCallback((e,a)=>{H(true),K({x:e,y:a}),x(0);},[]),M=t.useCallback((e,a)=>{if(!d)return;let T=(e-S.x)*.5;x(T);},[d,S.x]),k=t.useCallback(()=>{if(!d)return;Math.abs(C)>50&&(C>0?g():p()),H(false),x(0);},[d,C,g,p]),U=t.useCallback(e=>{e.preventDefault(),D(e.clientX,e.clientY);},[D]),Z=t.useCallback(e=>{M(e.clientX,e.clientY);},[M]),j=t.useCallback(()=>{k();},[k]),G=t.useCallback(e=>{if(e.touches.length===1){let a=e.touches[0];D(a.clientX,a.clientY);}},[D]),J=t.useCallback(e=>{if(e.touches.length===1){e.preventDefault();let a=e.touches[0];M(a.clientX,a.clientY);}},[M]),V=t.useCallback(()=>{k();},[k]);t.useEffect(()=>{let e=$(a=>{if(a.key==="ArrowLeft")a.preventDefault(),g();else if(a.key==="ArrowRight")a.preventDefault(),p();else if(a.key>="1"&&a.key<="9"){let h=parseInt(a.key)-1;h<o&&y(h);}},"handleKeyDown");if(m.current)return m.current.addEventListener("keydown",e),()=>{m.current?.removeEventListener("keydown",e);}},[g,p,y,o]),t.useImperativeHandle(O,()=>m.current);let _={perspective:`${A}px`,height:`${l+100}px`},q={transform:`translateZ(-${I}px) rotateY(${-f*(360/o)+C/5}deg)`,transition:d?"none":"transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1)",transformStyle:"preserve-3d"};return jsxs("div",{ref:m,className:cn("relative w-full select-none focus:outline-none",X),style:_,onMouseEnter:()=>L(true),onMouseLeave:()=>L(false),onMouseDown:U,onMouseMove:Z,onMouseUp:j,onTouchStart:G,onTouchMove:J,onTouchEnd:V,tabIndex:0,...z,children:[jsx("div",{className:"relative mx-auto",style:{width:`${n}px`,height:`${l}px`,transformStyle:"preserve-3d"},children:jsx("div",{className:"absolute inset-0",style:q,children:s.map((e,a)=>{let h=a/o*360,P=a===f,T={transform:`rotateY(${h}deg) translateZ(${I}px)`,width:`${n}px`,height:`${l}px`,position:"absolute",backfaceVisibility:"hidden",transformStyle:"preserve-3d"};return jsx("div",{className:cn("rounded-lg border bg-card text-card-foreground shadow-lg cursor-pointer","transition-all duration-300 transform-gpu will-change-transform",P&&"ring-2 ring-primary ring-offset-2"),style:T,onClick:()=>y(a),children:jsx("div",{className:"w-full h-full overflow-hidden rounded-lg",children:e.content})},e.id)})})}),Y&&jsxs(Fragment,{children:[jsx("button",{className:cn("absolute left-4 top-1/2 -translate-y-1/2 z-10","p-2 rounded-full bg-background/80 backdrop-blur-sm","border shadow-lg hover:bg-background transition-all","disabled:opacity-50 disabled:cursor-not-allowed"),onClick:g,disabled:!i&&f===0,"aria-label":"Previous item",children:jsx(ChevronLeft,{className:"w-5 h-5"})}),jsx("button",{className:cn("absolute right-4 top-1/2 -translate-y-1/2 z-10","p-2 rounded-full bg-background/80 backdrop-blur-sm","border shadow-lg hover:bg-background transition-all","disabled:opacity-50 disabled:cursor-not-allowed"),onClick:p,disabled:!i&&f===o-1,"aria-label":"Next item",children:jsx(ChevronRight,{className:"w-5 h-5"})})]}),jsx("div",{className:"absolute bottom-4 left-1/2 -translate-x-1/2 z-10",children:jsx("div",{className:"flex space-x-2 p-2 rounded-full bg-background/80 backdrop-blur-sm border shadow-lg",children:s.map((e,a)=>jsx("button",{className:cn("w-2 h-2 rounded-full transition-all",a===f?"bg-primary scale-125":"bg-muted-foreground/50 hover:bg-muted-foreground/75"),onClick:()=>y(a),"aria-label":`Go to item ${a+1}`},a))})}),w&&jsx("div",{className:"absolute top-4 right-4 z-10",children:jsxs("div",{className:"flex items-center space-x-2 p-2 rounded-full bg-background/80 backdrop-blur-sm border shadow-sm",children:[jsx("div",{className:cn("w-2 h-2 rounded-full transition-all",R||d?"bg-orange-500":"bg-green-500 animate-pulse")}),jsx("span",{className:"text-xs text-muted-foreground",children:R||d?"Paused":"Auto"})]})})]})});W.displayName="Carousel3D";var ee=t.forwardRef(({className:s,children:n,...l},c)=>jsx("div",{ref:c,className:cn("w-full h-full flex flex-col bg-gradient-to-br from-background to-muted/20","border rounded-lg overflow-hidden group",s),...l,children:n}));ee.displayName="Carousel3DCard";var te=t.forwardRef(({className:s,alt:n,...l},c)=>jsx("img",{ref:c,className:cn("w-full h-48 object-cover transition-transform duration-300","group-hover:scale-105",s),alt:n,...l}));te.displayName="Carousel3DCardImage";var ae=t.forwardRef(({className:s,children:n,...l},c)=>jsx("div",{ref:c,className:cn("flex-1 p-4 flex flex-col justify-between",s),...l,children:n}));ae.displayName="Carousel3DCardContent";var re=t.forwardRef(({className:s,children:n,...l},c)=>jsx("h3",{ref:c,className:cn("font-semibold text-lg mb-2 line-clamp-2",s),...l,children:n}));re.displayName="Carousel3DCardTitle";var oe=t.forwardRef(({className:s,children:n,...l},c)=>jsx("p",{ref:c,className:cn("text-sm text-muted-foreground line-clamp-3 mb-4",s),...l,children:n}));oe.displayName="Carousel3DCardDescription";export{W as Carousel3D,ee as Carousel3DCard,ae as Carousel3DCardContent,oe as Carousel3DCardDescription,te as Carousel3DCardImage,re as Carousel3DCardTitle};