@hanzo/ui 5.3.35 → 5.3.36

package/dist/animation/apple-cards-carousel.mjs

@@ -1,285 +1,2 @@
 "use client";
-import * as React from 'react';
-import { useMotionValue, AnimatePresence, motion, useTransform } from 'framer-motion';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { cn } from '@hanzo/ui/lib/utils';
-import { Card, Button } from '@hanzo/ui';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-function AppleCardsCarousel({
-  cards,
-  autoPlay = false,
-  autoPlayInterval = 5e3,
-  className,
-  cardClassName,
-  showArrows = true,
-  showDots = true,
-  parallaxOffset = 50,
-  stackOffset = 10,
-  stackScale = 0.95,
-  swipeThreshold = 50
-}) {
-  const [currentIndex, setCurrentIndex] = React.useState(0);
-  const [isAutoPlaying, setIsAutoPlaying] = React.useState(autoPlay);
-  const containerRef = React.useRef(null);
-  const dragX = useMotionValue(0);
-  const getCardStyle = /* @__PURE__ */ __name((index) => {
-    const offset = index - currentIndex;
-    const absOffset = Math.abs(offset);
-    if (absOffset > 2) {
-      return {
-        display: "none",
-        x: 0,
-        scale: 1,
-        opacity: 0,
-        zIndex: 0
-      };
-    }
-    const baseX = offset * stackOffset;
-    const scale = Math.pow(stackScale, absOffset);
-    const opacity = Math.max(0, 1 - absOffset * 0.3);
-    const zIndex = cards.length - absOffset;
-    return {
-      display: "block",
-      x: baseX,
-      scale,
-      opacity,
-      zIndex
-    };
-  }, "getCardStyle");
-  const goToNext = React.useCallback(() => {
-    setCurrentIndex((prev) => (prev + 1) % cards.length);
-  }, [cards.length]);
-  const goToPrevious = React.useCallback(() => {
-    setCurrentIndex((prev) => (prev - 1 + cards.length) % cards.length);
-  }, [cards.length]);
-  const goToCard = React.useCallback((index) => {
-    setCurrentIndex(index);
-  }, []);
-  const handleDragEnd = React.useCallback(
-    (event, info) => {
-      const { offset, velocity } = info;
-      if (Math.abs(offset.x) > swipeThreshold || Math.abs(velocity.x) > 500) {
-        if (offset.x > 0) {
-          goToPrevious();
-        } else {
-          goToNext();
-        }
-      }
-    },
-    [goToNext, goToPrevious, swipeThreshold]
-  );
-  React.useEffect(() => {
-    if (!isAutoPlaying) return;
-    const interval = setInterval(goToNext, autoPlayInterval);
-    return () => clearInterval(interval);
-  }, [isAutoPlaying, goToNext, autoPlayInterval]);
-  const handleMouseEnter = React.useCallback(() => {
-    if (autoPlay) {
-      setIsAutoPlaying(false);
-    }
-  }, [autoPlay]);
-  const handleMouseLeave = React.useCallback(() => {
-    if (autoPlay) {
-      setIsAutoPlaying(true);
-    }
-  }, [autoPlay]);
-  React.useEffect(() => {
-    const handleKeyDown = /* @__PURE__ */ __name((e) => {
-      if (e.key === "ArrowLeft") {
-        goToPrevious();
-      } else if (e.key === "ArrowRight") {
-        goToNext();
-      }
-    }, "handleKeyDown");
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [goToNext, goToPrevious]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: cn("relative w-full max-w-6xl mx-auto px-4 py-8", className),
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "relative h-[400px] md:h-[500px] lg:h-[600px] flex items-center justify-center", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: cards.map((card, index) => {
-          const style = getCardStyle(index);
-          const isActive = index === currentIndex;
-          return /* @__PURE__ */ jsx(
-            motion.div,
-            {
-              className: cn(
-                "absolute inset-0 w-full h-full",
-                !isActive && "pointer-events-none"
-              ),
-              initial: false,
-              animate: {
-                x: style.x,
-                scale: style.scale,
-                opacity: style.opacity,
-                zIndex: style.zIndex
-              },
-              transition: {
-                type: "spring",
-                stiffness: 300,
-                damping: 30
-              },
-              drag: isActive ? "x" : false,
-              dragSnapToOrigin: true,
-              dragElastic: 0.2,
-              onDragEnd: handleDragEnd,
-              whileDrag: { cursor: "grabbing" },
-              style: {
-                x: dragX,
-                display: style.display
-              },
-              children: /* @__PURE__ */ jsxs(
-                Card,
-                {
-                  className: cn(
-                    "relative w-full h-full overflow-hidden cursor-grab",
-                    "bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-950",
-                    "shadow-2xl hover:shadow-3xl transition-shadow duration-300",
-                    cardClassName
-                  ),
-                  style: {
-                    background: card.gradient
-                  },
-                  children: [
-                    card.image && /* @__PURE__ */ jsxs(
-                      motion.div,
-                      {
-                        className: "absolute inset-0 w-full h-full",
-                        style: {
-                          x: useTransform(
-                            dragX,
-                            [-200, 0, 200],
-                            [parallaxOffset, 0, -parallaxOffset]
-                          )
-                        },
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            "img",
-                            {
-                              src: card.image,
-                              alt: card.title,
-                              className: "w-full h-full object-cover"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" })
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("div", { className: "relative z-10 flex flex-col justify-end h-full p-8 md:p-12", children: card.content ? card.content : /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(
-                        motion.h3,
-                        {
-                          className: "text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-2",
-                          initial: { opacity: 0, y: 20 },
-                          animate: { opacity: isActive ? 1 : 0.7, y: 0 },
-                          transition: { delay: 0.1 },
-                          children: card.title
-                        }
-                      ),
-                      card.subtitle && /* @__PURE__ */ jsx(
-                        motion.p,
-                        {
-                          className: "text-xl md:text-2xl text-white/80 mb-4",
-                          initial: { opacity: 0, y: 20 },
-                          animate: { opacity: isActive ? 1 : 0.7, y: 0 },
-                          transition: { delay: 0.2 },
-                          children: card.subtitle
-                        }
-                      ),
-                      card.description && /* @__PURE__ */ jsx(
-                        motion.p,
-                        {
-                          className: "text-base md:text-lg text-white/70 max-w-2xl",
-                          initial: { opacity: 0, y: 20 },
-                          animate: { opacity: isActive ? 1 : 0.7, y: 0 },
-                          transition: { delay: 0.3 },
-                          children: card.description
-                        }
-                      )
-                    ] }) })
-                  ]
-                }
-              )
-            },
-            card.id
-          );
-        }) }) }),
-        showArrows && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: cn(
-                "absolute left-4 top-1/2 -translate-y-1/2 z-20",
-                "bg-white/10 backdrop-blur-md hover:bg-white/20",
-                "text-white border border-white/20",
-                "hidden md:flex"
-              ),
-              onClick: goToPrevious,
-              children: [
-                /* @__PURE__ */ jsx(ChevronLeft, { className: "h-6 w-6" }),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous card" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              className: cn(
-                "absolute right-4 top-1/2 -translate-y-1/2 z-20",
-                "bg-white/10 backdrop-blur-md hover:bg-white/20",
-                "text-white border border-white/20",
-                "hidden md:flex"
-              ),
-              onClick: goToNext,
-              children: [
-                /* @__PURE__ */ jsx(ChevronRight, { className: "h-6 w-6" }),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next card" })
-              ]
-            }
-          )
-        ] }),
-        showDots && /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-20 flex gap-2", children: cards.map((_, index) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: cn(
-              "w-2 h-2 rounded-full transition-all duration-300",
-              "bg-white/40 hover:bg-white/60",
-              index === currentIndex && "w-8 bg-white"
-            ),
-            onClick: () => goToCard(index),
-            children: /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
-              "Go to card ",
-              index + 1
-            ] })
-          },
-          index
-        )) })
-      ]
-    }
-  );
-}
-__name(AppleCardsCarousel, "AppleCardsCarousel");
-var gradientPresets = {
-  sunset: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
-  ocean: "linear-gradient(135deg, #667eea 0%, #4ca1af 100%)",
-  fire: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
-  forest: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
-  galaxy: "linear-gradient(135deg, #7303c0 0%, #ec38bc 50%, #fdeff9 100%)",
-  aurora: "linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)",
-  peach: "linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)",
-  lavender: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)"
-};
-
-export { AppleCardsCarousel, gradientPresets };
+import*as n from'react';import {useMotionValue,AnimatePresence,motion,useTransform}from'framer-motion';import {ChevronLeft,ChevronRight}from'lucide-react';import {cn}from'@hanzo/ui/lib/utils';import {Card,Button}from'@hanzo/ui';import {jsxs,jsx,Fragment}from'react/jsx-runtime';var X=Object.defineProperty;var g=(o,l)=>X(o,"name",{value:l,configurable:true});function ee({cards:o,autoPlay:l=false,autoPlayInterval:p=5e3,className:N,cardClassName:R,showArrows:E=true,showDots:M=true,parallaxOffset:h=50,stackOffset:A=10,stackScale:I=.95,swipeThreshold:x=50}){let[m,b]=n.useState(0),[y,v]=n.useState(l),z=n.useRef(null),w=useMotionValue(0),P=g(e=>{let t=e-m,s=Math.abs(t);if(s>2)return {display:"none",x:0,scale:1,opacity:0,zIndex:0};let B=t*A,O=Math.pow(I,s),j=Math.max(0,1-s*.3),K=o.length-s;return {display:"block",x:B,scale:O,opacity:j,zIndex:K}},"getCardStyle"),c=n.useCallback(()=>{b(e=>(e+1)%o.length);},[o.length]),f=n.useCallback(()=>{b(e=>(e-1+o.length)%o.length);},[o.length]),L=n.useCallback(e=>{b(e);},[]),T=n.useCallback((e,t)=>{let{offset:s,velocity:i}=t;(Math.abs(s.x)>x||Math.abs(i.x)>500)&&(s.x>0?f():c());},[c,f,x]);n.useEffect(()=>{if(!y)return;let e=setInterval(c,p);return ()=>clearInterval(e)},[y,c,p]);let D=n.useCallback(()=>{l&&v(false);},[l]),S=n.useCallback(()=>{l&&v(true);},[l]);return n.useEffect(()=>{let e=g(t=>{t.key==="ArrowLeft"?f():t.key==="ArrowRight"&&c();},"handleKeyDown");return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[c,f]),jsxs("div",{ref:z,className:cn("relative w-full max-w-6xl mx-auto px-4 py-8",N),onMouseEnter:D,onMouseLeave:S,children:[jsx("div",{className:"relative h-[400px] md:h-[500px] lg:h-[600px] flex items-center justify-center",children:jsx(AnimatePresence,{mode:"popLayout",children:o.map((e,t)=>{let s=P(t),i=t===m;return jsx(motion.div,{className:cn("absolute inset-0 w-full h-full",!i&&"pointer-events-none"),initial:false,animate:{x:s.x,scale:s.scale,opacity:s.opacity,zIndex:s.zIndex},transition:{type:"spring",stiffness:300,damping:30},drag:i?"x":false,dragSnapToOrigin:true,dragElastic:.2,onDragEnd:T,whileDrag:{cursor:"grabbing"},style:{x:w,display:s.display},children:jsxs(Card,{className:cn("relative w-full h-full overflow-hidden cursor-grab","bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-950","shadow-2xl hover:shadow-3xl transition-shadow duration-300",R),style:{background:e.gradient},children:[e.image&&jsxs(motion.div,{className:"absolute inset-0 w-full h-full",style:{x:useTransform(w,[-200,0,200],[h,0,-h])},children:[jsx("img",{src:e.image,alt:e.title,className:"w-full h-full object-cover"}),jsx("div",{className:"absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"})]}),jsx("div",{className:"relative z-10 flex flex-col justify-end h-full p-8 md:p-12",children:e.content?e.content:jsxs(Fragment,{children:[jsx(motion.h3,{className:"text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-2",initial:{opacity:0,y:20},animate:{opacity:i?1:.7,y:0},transition:{delay:.1},children:e.title}),e.subtitle&&jsx(motion.p,{className:"text-xl md:text-2xl text-white/80 mb-4",initial:{opacity:0,y:20},animate:{opacity:i?1:.7,y:0},transition:{delay:.2},children:e.subtitle}),e.description&&jsx(motion.p,{className:"text-base md:text-lg text-white/70 max-w-2xl",initial:{opacity:0,y:20},animate:{opacity:i?1:.7,y:0},transition:{delay:.3},children:e.description})]})})]})},e.id)})})}),E&&jsxs(Fragment,{children:[jsxs(Button,{variant:"ghost",size:"icon",className:cn("absolute left-4 top-1/2 -translate-y-1/2 z-20","bg-white/10 backdrop-blur-md hover:bg-white/20","text-white border border-white/20","hidden md:flex"),onClick:f,children:[jsx(ChevronLeft,{className:"h-6 w-6"}),jsx("span",{className:"sr-only",children:"Previous card"})]}),jsxs(Button,{variant:"ghost",size:"icon",className:cn("absolute right-4 top-1/2 -translate-y-1/2 z-20","bg-white/10 backdrop-blur-md hover:bg-white/20","text-white border border-white/20","hidden md:flex"),onClick:c,children:[jsx(ChevronRight,{className:"h-6 w-6"}),jsx("span",{className:"sr-only",children:"Next card"})]})]}),M&&jsx("div",{className:"absolute bottom-4 left-1/2 -translate-x-1/2 z-20 flex gap-2",children:o.map((e,t)=>jsx("button",{className:cn("w-2 h-2 rounded-full transition-all duration-300","bg-white/40 hover:bg-white/60",t===m&&"w-8 bg-white"),onClick:()=>L(t),children:jsxs("span",{className:"sr-only",children:["Go to card ",t+1]})},t))})]})}g(ee,"AppleCardsCarousel");var te={sunset:"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",ocean:"linear-gradient(135deg, #667eea 0%, #4ca1af 100%)",fire:"linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",forest:"linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",galaxy:"linear-gradient(135deg, #7303c0 0%, #ec38bc 50%, #fdeff9 100%)",aurora:"linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)",peach:"linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)",lavender:"linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)"};export{ee as AppleCardsCarousel,te as gradientPresets};

package/dist/animation/apple-hello-effect.js

@@ -1,60 +1,2 @@
 "use client";
-'use strict';
-
-var React = require('react');
-var framerMotion = require('framer-motion');
-var utils = require('@hanzo/ui/lib/utils');
-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);
-
-var AppleHelloEffect = React__namespace.forwardRef(({ className, text = "Hello", duration = 2, ...props }, ref) => {
-  const letters = text.split("");
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: utils.cn(
-        "relative flex items-center justify-center text-6xl font-bold",
-        className
-      ),
-      ...props,
-      children: letters.map((letter, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        framerMotion.motion.span,
-        {
-          initial: { opacity: 0, y: 50 },
-          animate: { opacity: 1, y: 0 },
-          transition: {
-            duration,
-            delay: index * 0.1,
-            ease: [0.215, 0.61, 0.355, 1]
-          },
-          className: "inline-block",
-          children: letter
-        },
-        index
-      ))
-    }
-  );
-});
-AppleHelloEffect.displayName = "AppleHelloEffect";
-
-exports.AppleHelloEffect = AppleHelloEffect;
+'use strict';var l=require('react'),framerMotion=require('framer-motion'),utils=require('@hanzo/ui/lib/utils'),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 l__namespace=/*#__PURE__*/_interopNamespace(l);var m=l__namespace.forwardRef(({className:o,text:i="Hello",duration:a=2,...n},r)=>{let p=i.split("");return jsxRuntime.jsx("div",{ref:r,className:utils.cn("relative flex items-center justify-center text-6xl font-bold",o),...n,children:p.map((s,e)=>jsxRuntime.jsx(framerMotion.motion.span,{initial:{opacity:0,y:50},animate:{opacity:1,y:0},transition:{duration:a,delay:e*.1,ease:[.215,.61,.355,1]},className:"inline-block",children:s},e))})});m.displayName="AppleHelloEffect";exports.AppleHelloEffect=m;

package/dist/animation/apple-hello-effect.mjs

@@ -1,38 +1,2 @@
 "use client";
-import * as React from 'react';
-import { motion } from 'framer-motion';
-import { cn } from '@hanzo/ui/lib/utils';
-import { jsx } from 'react/jsx-runtime';
-
-var AppleHelloEffect = React.forwardRef(({ className, text = "Hello", duration = 2, ...props }, ref) => {
-  const letters = text.split("");
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(
-        "relative flex items-center justify-center text-6xl font-bold",
-        className
-      ),
-      ...props,
-      children: letters.map((letter, index) => /* @__PURE__ */ jsx(
-        motion.span,
-        {
-          initial: { opacity: 0, y: 50 },
-          animate: { opacity: 1, y: 0 },
-          transition: {
-            duration,
-            delay: index * 0.1,
-            ease: [0.215, 0.61, 0.355, 1]
-          },
-          className: "inline-block",
-          children: letter
-        },
-        index
-      ))
-    }
-  );
-});
-AppleHelloEffect.displayName = "AppleHelloEffect";
-
-export { AppleHelloEffect };
+import*as l from'react';import {motion}from'framer-motion';import {cn}from'@hanzo/ui/lib/utils';import {jsx}from'react/jsx-runtime';var m=l.forwardRef(({className:o,text:i="Hello",duration:a=2,...n},r)=>{let p=i.split("");return jsx("div",{ref:r,className:cn("relative flex items-center justify-center text-6xl font-bold",o),...n,children:p.map((s,e)=>jsx(motion.span,{initial:{opacity:0,y:50},animate:{opacity:1,y:0},transition:{duration:a,delay:e*.1,ease:[.215,.61,.355,1]},className:"inline-block",children:s},e))})});m.displayName="AppleHelloEffect";export{m as AppleHelloEffect};