@hanzo/ui 5.3.26 → 5.3.28

package/dist/animation/animated-list.js

@@ -1,339 +0,0 @@
-"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

@@ -1,333 +0,0 @@
-"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 };