@hanzo/ui 5.3.28 → 5.3.29

package/dist/animation/animated-testimonials.mjs

@@ -0,0 +1,75 @@
+"use client";
+import * as React from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { cn } from '@hanzo/ui/lib/utils';
+import { Avatar, AvatarImage, AvatarFallback } from '@hanzo/ui/primitives/avatar';
+import { Card, CardContent } from '@hanzo/ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var AnimatedTestimonials = React.forwardRef(
+  ({ className, testimonials, autoPlay = true, duration = 5e3, ...props }, ref) => {
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    React.useEffect(() => {
+      if (!autoPlay) return;
+      const interval = setInterval(() => {
+        setActiveIndex((prev) => (prev + 1) % testimonials.length);
+      }, duration);
+      return () => clearInterval(interval);
+    }, [autoPlay, duration, testimonials.length]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("relative min-h-[200px]", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { opacity: 0, y: 20 },
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0, y: -20 },
+              transition: { duration: 0.5 },
+              children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "pt-6", children: /* @__PURE__ */ jsxs("blockquote", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxs("p", { className: "text-lg italic", children: [
+                  '"',
+                  testimonials[activeIndex].content,
+                  '"'
+                ] }),
+                /* @__PURE__ */ jsxs("footer", { className: "flex items-center gap-4", children: [
+                  /* @__PURE__ */ jsxs(Avatar, { children: [
+                    /* @__PURE__ */ jsx(AvatarImage, { src: testimonials[activeIndex].avatar }),
+                    /* @__PURE__ */ jsx(AvatarFallback, { children: testimonials[activeIndex].author.slice(0, 2).toUpperCase() })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("cite", { className: "not-italic font-medium", children: testimonials[activeIndex].author }),
+                    testimonials[activeIndex].role && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                      testimonials[activeIndex].role,
+                      testimonials[activeIndex].company && `, ${testimonials[activeIndex].company}`
+                    ] })
+                  ] })
+                ] })
+              ] }) }) })
+            },
+            activeIndex
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-center gap-2", children: testimonials.map((_, index) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setActiveIndex(index),
+              className: cn(
+                "h-2 w-2 rounded-full transition-all",
+                index === activeIndex ? "w-8 bg-primary" : "bg-muted hover:bg-muted-foreground"
+              ),
+              "aria-label": `Go to testimonial ${index + 1}`
+            },
+            index
+          )) })
+        ]
+      }
+    );
+  }
+);
+AnimatedTestimonials.displayName = "AnimatedTestimonials";
+
+export { AnimatedTestimonials };

package/dist/animation/animated-tooltip.js

@@ -0,0 +1,67 @@
+"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 AnimatedTooltip = React__namespace.forwardRef(
+  ({ className, content, children, delay = 0, ...props }, ref) => {
+    const [isVisible, setIsVisible] = React__namespace.useState(false);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: utils.cn("relative inline-block", className),
+        onMouseEnter: () => setIsVisible(true),
+        onMouseLeave: () => setIsVisible(false),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isVisible && /* @__PURE__ */ jsxRuntime.jsxs(
+            framerMotion.motion.div,
+            {
+              initial: { opacity: 0, y: 10, scale: 0.95 },
+              animate: { opacity: 1, y: 0, scale: 1 },
+              exit: { opacity: 0, y: 10, scale: 0.95 },
+              transition: {
+                duration: 0.2,
+                delay: delay / 1e3,
+                ease: "easeOut"
+              },
+              className: "absolute left-1/2 -translate-x-1/2 bottom-full mb-2 px-3 py-1.5 bg-popover text-popover-foreground text-sm rounded-md shadow-md whitespace-nowrap z-50",
+              children: [
+                content,
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-popover" })
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+AnimatedTooltip.displayName = "AnimatedTooltip";
+
+exports.AnimatedTooltip = AnimatedTooltip;

package/dist/animation/animated-tooltip.mjs

@@ -0,0 +1,45 @@
+"use client";
+import * as React from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { cn } from '@hanzo/ui/lib/utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var AnimatedTooltip = React.forwardRef(
+  ({ className, content, children, delay = 0, ...props }, ref) => {
+    const [isVisible, setIsVisible] = React.useState(false);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("relative inline-block", className),
+        onMouseEnter: () => setIsVisible(true),
+        onMouseLeave: () => setIsVisible(false),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(AnimatePresence, { children: isVisible && /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { opacity: 0, y: 10, scale: 0.95 },
+              animate: { opacity: 1, y: 0, scale: 1 },
+              exit: { opacity: 0, y: 10, scale: 0.95 },
+              transition: {
+                duration: 0.2,
+                delay: delay / 1e3,
+                ease: "easeOut"
+              },
+              className: "absolute left-1/2 -translate-x-1/2 bottom-full mb-2 px-3 py-1.5 bg-popover text-popover-foreground text-sm rounded-md shadow-md whitespace-nowrap z-50",
+              children: [
+                content,
+                /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-popover" })
+              ]
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+AnimatedTooltip.displayName = "AnimatedTooltip";
+
+export { AnimatedTooltip };

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

@@ -0,0 +1,308 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var lucideReact = require('lucide-react');
+var utils = require('@hanzo/ui/lib/utils');
+var ui = require('@hanzo/ui');
+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 __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__namespace.useState(0);
+  const [isAutoPlaying, setIsAutoPlaying] = React__namespace.useState(autoPlay);
+  const containerRef = React__namespace.useRef(null);
+  const dragX = framerMotion.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__namespace.useCallback(() => {
+    setCurrentIndex((prev) => (prev + 1) % cards.length);
+  }, [cards.length]);
+  const goToPrevious = React__namespace.useCallback(() => {
+    setCurrentIndex((prev) => (prev - 1 + cards.length) % cards.length);
+  }, [cards.length]);
+  const goToCard = React__namespace.useCallback((index) => {
+    setCurrentIndex(index);
+  }, []);
+  const handleDragEnd = React__namespace.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__namespace.useEffect(() => {
+    if (!isAutoPlaying) return;
+    const interval = setInterval(goToNext, autoPlayInterval);
+    return () => clearInterval(interval);
+  }, [isAutoPlaying, goToNext, autoPlayInterval]);
+  const handleMouseEnter = React__namespace.useCallback(() => {
+    if (autoPlay) {
+      setIsAutoPlaying(false);
+    }
+  }, [autoPlay]);
+  const handleMouseLeave = React__namespace.useCallback(() => {
+    if (autoPlay) {
+      setIsAutoPlaying(true);
+    }
+  }, [autoPlay]);
+  React__namespace.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: utils.cn("relative w-full max-w-6xl mx-auto px-4 py-8", className),
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[400px] md:h-[500px] lg:h-[600px] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", children: cards.map((card, index) => {
+          const style = getCardStyle(index);
+          const isActive = index === currentIndex;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              className: utils.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__ */ jsxRuntime.jsxs(
+                ui.Card,
+                {
+                  className: utils.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__ */ jsxRuntime.jsxs(
+                      framerMotion.motion.div,
+                      {
+                        className: "absolute inset-0 w-full h-full",
+                        style: {
+                          x: framerMotion.useTransform(
+                            dragX,
+                            [-200, 0, 200],
+                            [parallaxOffset, 0, -parallaxOffset]
+                          )
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "img",
+                            {
+                              src: card.image,
+                              alt: card.title,
+                              className: "w-full h-full object-cover"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex flex-col justify-end h-full p-8 md:p-12", children: card.content ? card.content : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        framerMotion.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__ */ jsxRuntime.jsx(
+                        framerMotion.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__ */ jsxRuntime.jsx(
+                        framerMotion.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: utils.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__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-6 w-6" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Previous card" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: utils.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__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-6 w-6" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Next card" })
+              ]
+            }
+          )
+        ] }),
+        showDots && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-20 flex gap-2", children: cards.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: utils.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__ */ jsxRuntime.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%)"
+};
+
+exports.AppleCardsCarousel = AppleCardsCarousel;
+exports.gradientPresets = gradientPresets;