@hanzo/ui 5.3.28 → 5.3.30

package/dist/animation/animated-list.js

@@ -0,0 +1,339 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var react$1 = require('motion/react');
+var utils = require('@/lib/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = react.useState(false);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = /* @__PURE__ */ __name((event) => {
+      setPrefersReducedMotion(event.matches);
+    }, "handleChange");
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  return prefersReducedMotion;
+}
+__name(usePrefersReducedMotion, "usePrefersReducedMotion");
+var slideVariants = {
+  hidden: { opacity: 0, x: -50 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    x: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, x: 50, transition: { duration: 0.3 } }
+};
+var fadeVariants = {
+  hidden: { opacity: 0 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, transition: { duration: 0.3 } }
+};
+var scaleVariants = {
+  hidden: { opacity: 0, scale: 0.8 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    scale: 1,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut",
+      type: "spring",
+      stiffness: 100
+    }
+  }), "visible"),
+  exit: { opacity: 0, scale: 0.8, transition: { duration: 0.3 } }
+};
+var slideUpVariants = {
+  hidden: { opacity: 0, y: 50 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, y: -50, transition: { duration: 0.3 } }
+};
+var slideDownVariants = {
+  hidden: { opacity: 0, y: -50 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, y: 50, transition: { duration: 0.3 } }
+};
+var slideLeftVariants = {
+  hidden: { opacity: 0, x: 50 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    x: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, x: -50, transition: { duration: 0.3 } }
+};
+var slideRightVariants = {
+  hidden: { opacity: 0, x: -50 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    x: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, x: 50, transition: { duration: 0.3 } }
+};
+var animationVariants = {
+  slide: slideVariants,
+  fade: fadeVariants,
+  scale: scaleVariants,
+  slideUp: slideUpVariants,
+  slideDown: slideDownVariants,
+  slideLeft: slideLeftVariants,
+  slideRight: slideRightVariants
+};
+function useVirtualizedList(items, containerHeight, itemHeight, enabled) {
+  const [scrollTop, setScrollTop] = react.useState(0);
+  const visibleItems = react.useMemo(() => {
+    if (!enabled) return items;
+    const startIndex = Math.floor(scrollTop / itemHeight);
+    const endIndex = Math.min(
+      startIndex + Math.ceil(containerHeight / itemHeight) + 1,
+      items.length
+    );
+    return items.slice(startIndex, endIndex).map((item, index) => ({
+      ...item,
+      virtualIndex: startIndex + index,
+      style: {
+        position: "absolute",
+        top: (startIndex + index) * itemHeight,
+        height: itemHeight,
+        width: "100%"
+      }
+    }));
+  }, [items, scrollTop, itemHeight, containerHeight, enabled]);
+  const totalHeight = items.length * itemHeight;
+  const handleScroll = react.useCallback((e) => {
+    setScrollTop(e.currentTarget.scrollTop);
+  }, []);
+  return {
+    visibleItems,
+    totalHeight,
+    handleScroll
+  };
+}
+__name(useVirtualizedList, "useVirtualizedList");
+function AnimatedList({
+  items,
+  animation = "slideUp",
+  staggerDelay = 100,
+  duration = 500,
+  reorderable = false,
+  enableAddRemove = true,
+  layout = "vertical",
+  gridColumns = 3,
+  className,
+  itemClassName,
+  style,
+  onReorder,
+  onItemClick,
+  showHoverEffects = true,
+  customVariants,
+  virtualized = false,
+  itemHeight = 60,
+  containerHeight = 400,
+  autoStart = true,
+  onAnimationComplete
+}) {
+  const [animatedItems, setAnimatedItems] = react.useState(items);
+  const [animationKey, setAnimationKey] = react.useState(0);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const variants = customVariants || animationVariants[animation];
+  const shouldAnimate = !prefersReducedMotion && autoStart;
+  const { visibleItems, totalHeight, handleScroll } = useVirtualizedList(
+    items,
+    containerHeight,
+    itemHeight,
+    virtualized
+  );
+  react.useEffect(() => {
+    setAnimatedItems(items);
+  }, [items]);
+  const updatedVariants = react.useMemo(() => {
+    if (!variants.visible || typeof variants.visible !== "function")
+      return variants;
+    return {
+      ...variants,
+      visible: /* @__PURE__ */ __name((i) => {
+        const original = variants.visible;
+        const originalResult = original(i);
+        return {
+          ...originalResult,
+          transition: {
+            ...originalResult.transition,
+            delay: i * (staggerDelay / 1e3),
+            duration: duration / 1e3
+          }
+        };
+      }, "visible")
+    };
+  }, [variants, staggerDelay, duration]);
+  const getLayoutClassName = /* @__PURE__ */ __name(() => {
+    switch (layout) {
+      case "horizontal":
+        return "flex flex-row gap-4 overflow-x-auto";
+      case "grid":
+        return `grid gap-4 grid-cols-${gridColumns}`;
+      default:
+        return "flex flex-col gap-4";
+    }
+  }, "getLayoutClassName");
+  const renderListItem = /* @__PURE__ */ __name((item, index, virtualStyle) => {
+    const itemContent = /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.motion.div,
+      {
+        custom: index,
+        variants: updatedVariants,
+        initial: shouldAnimate ? "hidden" : "visible",
+        animate: "visible",
+        exit: "exit",
+        layout: enableAddRemove,
+        className: utils.cn(
+          "cursor-pointer select-none",
+          showHoverEffects && "hover:scale-105 transition-transform",
+          itemClassName
+        ),
+        style: virtualStyle,
+        onClick: () => onItemClick?.(item, index),
+        whileHover: showHoverEffects ? { scale: 1.02 } : void 0,
+        whileTap: showHoverEffects ? { scale: 0.98 } : void 0,
+        onAnimationComplete: () => {
+          if (index === animatedItems.length - 1) {
+            onAnimationComplete?.();
+          }
+        },
+        children: item.content
+      },
+      item.id
+    );
+    return itemContent;
+  }, "renderListItem");
+  if (reorderable && !virtualized) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.Reorder.Group,
+      {
+        axis: layout === "horizontal" ? "x" : "y",
+        values: animatedItems,
+        onReorder: (newItems) => {
+          setAnimatedItems(newItems);
+          onReorder?.(newItems);
+        },
+        className: utils.cn(getLayoutClassName(), className),
+        style,
+        children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "popLayout", children: animatedItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.Reorder.Item,
+          {
+            value: item,
+            className: utils.cn(
+              "cursor-grab active:cursor-grabbing",
+              itemClassName
+            ),
+            whileDrag: { scale: 1.05, zIndex: 10 },
+            children: item.content
+          },
+          item.id
+        )) })
+      }
+    );
+  }
+  if (virtualized) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: utils.cn("overflow-auto", className),
+        style: { height: containerHeight, ...style },
+        onScroll: handleScroll,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "popLayout", children: visibleItems.map(
+          (item, index) => renderListItem(item, item.virtualIndex || index, item.style)
+        ) }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.motion.div,
+    {
+      className: utils.cn(getLayoutClassName(), className),
+      style,
+      initial: "hidden",
+      animate: "visible",
+      children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "popLayout", children: animatedItems.map((item, index) => renderListItem(item, index)) })
+    },
+    animationKey
+  );
+}
+__name(AnimatedList, "AnimatedList");
+var AnimatedListPresets = {
+  /**
+   * Simple fade in list
+   */
+  FadeList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedList, { animation: "fade", ...props }), "FadeList"),
+  /**
+   * Scale up from center
+   */
+  ScaleList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedList, { animation: "scale", ...props }), "ScaleList"),
+  /**
+   * Slide up from bottom
+   */
+  SlideUpList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedList, { animation: "slideUp", ...props }), "SlideUpList"),
+  /**
+   * Horizontal carousel-style list
+   */
+  CarouselList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedList, { layout: "horizontal", animation: "slideLeft", ...props }), "CarouselList"),
+  /**
+   * Grid with scale animation
+   */
+  GridList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedList, { layout: "grid", animation: "scale", ...props }), "GridList"),
+  /**
+   * Reorderable task list
+   */
+  TaskList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(AnimatedList, { reorderable: true, animation: "slideUp", showHoverEffects: true, ...props }), "TaskList")
+};
+var list_default = AnimatedList;
+
+exports.AnimatedList = AnimatedList;
+exports.AnimatedListPresets = AnimatedListPresets;
+exports.default = list_default;

package/dist/animation/animated-list.mjs

@@ -0,0 +1,333 @@
+"use client";
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { Reorder, AnimatePresence, motion } from 'motion/react';
+import { cn } from '@/lib/utils';
+import { jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = /* @__PURE__ */ __name((event) => {
+      setPrefersReducedMotion(event.matches);
+    }, "handleChange");
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  return prefersReducedMotion;
+}
+__name(usePrefersReducedMotion, "usePrefersReducedMotion");
+var slideVariants = {
+  hidden: { opacity: 0, x: -50 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    x: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, x: 50, transition: { duration: 0.3 } }
+};
+var fadeVariants = {
+  hidden: { opacity: 0 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, transition: { duration: 0.3 } }
+};
+var scaleVariants = {
+  hidden: { opacity: 0, scale: 0.8 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    scale: 1,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut",
+      type: "spring",
+      stiffness: 100
+    }
+  }), "visible"),
+  exit: { opacity: 0, scale: 0.8, transition: { duration: 0.3 } }
+};
+var slideUpVariants = {
+  hidden: { opacity: 0, y: 50 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, y: -50, transition: { duration: 0.3 } }
+};
+var slideDownVariants = {
+  hidden: { opacity: 0, y: -50 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    y: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, y: 50, transition: { duration: 0.3 } }
+};
+var slideLeftVariants = {
+  hidden: { opacity: 0, x: 50 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    x: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, x: -50, transition: { duration: 0.3 } }
+};
+var slideRightVariants = {
+  hidden: { opacity: 0, x: -50 },
+  visible: /* @__PURE__ */ __name((i) => ({
+    opacity: 1,
+    x: 0,
+    transition: {
+      delay: i * 0.1,
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }), "visible"),
+  exit: { opacity: 0, x: 50, transition: { duration: 0.3 } }
+};
+var animationVariants = {
+  slide: slideVariants,
+  fade: fadeVariants,
+  scale: scaleVariants,
+  slideUp: slideUpVariants,
+  slideDown: slideDownVariants,
+  slideLeft: slideLeftVariants,
+  slideRight: slideRightVariants
+};
+function useVirtualizedList(items, containerHeight, itemHeight, enabled) {
+  const [scrollTop, setScrollTop] = useState(0);
+  const visibleItems = useMemo(() => {
+    if (!enabled) return items;
+    const startIndex = Math.floor(scrollTop / itemHeight);
+    const endIndex = Math.min(
+      startIndex + Math.ceil(containerHeight / itemHeight) + 1,
+      items.length
+    );
+    return items.slice(startIndex, endIndex).map((item, index) => ({
+      ...item,
+      virtualIndex: startIndex + index,
+      style: {
+        position: "absolute",
+        top: (startIndex + index) * itemHeight,
+        height: itemHeight,
+        width: "100%"
+      }
+    }));
+  }, [items, scrollTop, itemHeight, containerHeight, enabled]);
+  const totalHeight = items.length * itemHeight;
+  const handleScroll = useCallback((e) => {
+    setScrollTop(e.currentTarget.scrollTop);
+  }, []);
+  return {
+    visibleItems,
+    totalHeight,
+    handleScroll
+  };
+}
+__name(useVirtualizedList, "useVirtualizedList");
+function AnimatedList({
+  items,
+  animation = "slideUp",
+  staggerDelay = 100,
+  duration = 500,
+  reorderable = false,
+  enableAddRemove = true,
+  layout = "vertical",
+  gridColumns = 3,
+  className,
+  itemClassName,
+  style,
+  onReorder,
+  onItemClick,
+  showHoverEffects = true,
+  customVariants,
+  virtualized = false,
+  itemHeight = 60,
+  containerHeight = 400,
+  autoStart = true,
+  onAnimationComplete
+}) {
+  const [animatedItems, setAnimatedItems] = useState(items);
+  const [animationKey, setAnimationKey] = useState(0);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const variants = customVariants || animationVariants[animation];
+  const shouldAnimate = !prefersReducedMotion && autoStart;
+  const { visibleItems, totalHeight, handleScroll } = useVirtualizedList(
+    items,
+    containerHeight,
+    itemHeight,
+    virtualized
+  );
+  useEffect(() => {
+    setAnimatedItems(items);
+  }, [items]);
+  const updatedVariants = useMemo(() => {
+    if (!variants.visible || typeof variants.visible !== "function")
+      return variants;
+    return {
+      ...variants,
+      visible: /* @__PURE__ */ __name((i) => {
+        const original = variants.visible;
+        const originalResult = original(i);
+        return {
+          ...originalResult,
+          transition: {
+            ...originalResult.transition,
+            delay: i * (staggerDelay / 1e3),
+            duration: duration / 1e3
+          }
+        };
+      }, "visible")
+    };
+  }, [variants, staggerDelay, duration]);
+  const getLayoutClassName = /* @__PURE__ */ __name(() => {
+    switch (layout) {
+      case "horizontal":
+        return "flex flex-row gap-4 overflow-x-auto";
+      case "grid":
+        return `grid gap-4 grid-cols-${gridColumns}`;
+      default:
+        return "flex flex-col gap-4";
+    }
+  }, "getLayoutClassName");
+  const renderListItem = /* @__PURE__ */ __name((item, index, virtualStyle) => {
+    const itemContent = /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        custom: index,
+        variants: updatedVariants,
+        initial: shouldAnimate ? "hidden" : "visible",
+        animate: "visible",
+        exit: "exit",
+        layout: enableAddRemove,
+        className: cn(
+          "cursor-pointer select-none",
+          showHoverEffects && "hover:scale-105 transition-transform",
+          itemClassName
+        ),
+        style: virtualStyle,
+        onClick: () => onItemClick?.(item, index),
+        whileHover: showHoverEffects ? { scale: 1.02 } : void 0,
+        whileTap: showHoverEffects ? { scale: 0.98 } : void 0,
+        onAnimationComplete: () => {
+          if (index === animatedItems.length - 1) {
+            onAnimationComplete?.();
+          }
+        },
+        children: item.content
+      },
+      item.id
+    );
+    return itemContent;
+  }, "renderListItem");
+  if (reorderable && !virtualized) {
+    return /* @__PURE__ */ jsx(
+      Reorder.Group,
+      {
+        axis: layout === "horizontal" ? "x" : "y",
+        values: animatedItems,
+        onReorder: (newItems) => {
+          setAnimatedItems(newItems);
+          onReorder?.(newItems);
+        },
+        className: cn(getLayoutClassName(), className),
+        style,
+        children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: animatedItems.map((item, index) => /* @__PURE__ */ jsx(
+          Reorder.Item,
+          {
+            value: item,
+            className: cn(
+              "cursor-grab active:cursor-grabbing",
+              itemClassName
+            ),
+            whileDrag: { scale: 1.05, zIndex: 10 },
+            children: item.content
+          },
+          item.id
+        )) })
+      }
+    );
+  }
+  if (virtualized) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("overflow-auto", className),
+        style: { height: containerHeight, ...style },
+        onScroll: handleScroll,
+        children: /* @__PURE__ */ jsx("div", { style: { height: totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: visibleItems.map(
+          (item, index) => renderListItem(item, item.virtualIndex || index, item.style)
+        ) }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      className: cn(getLayoutClassName(), className),
+      style,
+      initial: "hidden",
+      animate: "visible",
+      children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: animatedItems.map((item, index) => renderListItem(item, index)) })
+    },
+    animationKey
+  );
+}
+__name(AnimatedList, "AnimatedList");
+var AnimatedListPresets = {
+  /**
+   * Simple fade in list
+   */
+  FadeList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedList, { animation: "fade", ...props }), "FadeList"),
+  /**
+   * Scale up from center
+   */
+  ScaleList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedList, { animation: "scale", ...props }), "ScaleList"),
+  /**
+   * Slide up from bottom
+   */
+  SlideUpList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedList, { animation: "slideUp", ...props }), "SlideUpList"),
+  /**
+   * Horizontal carousel-style list
+   */
+  CarouselList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedList, { layout: "horizontal", animation: "slideLeft", ...props }), "CarouselList"),
+  /**
+   * Grid with scale animation
+   */
+  GridList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedList, { layout: "grid", animation: "scale", ...props }), "GridList"),
+  /**
+   * Reorderable task list
+   */
+  TaskList: /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsx(AnimatedList, { reorderable: true, animation: "slideUp", showHoverEffects: true, ...props }), "TaskList")
+};
+var list_default = AnimatedList;
+
+export { AnimatedList, AnimatedListPresets, list_default as default };