@hanzo/ui 5.3.35 → 5.3.38

package/dist/animation/animated-list.js

@@ -1,339 +1,2 @@
 "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;
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),react$1=require('motion/react'),utils=require('@/lib/utils'),jsxRuntime=require('react/jsx-runtime');var B=Object.defineProperty;var t=(e,s)=>B(e,"name",{value:s,configurable:true});function W(){let[e,s]=react.useState(false);return react.useEffect(()=>{if(typeof window>"u")return;let a=window.matchMedia("(prefers-reduced-motion: reduce)");s(a.matches);let d=t(c=>{s(c.matches);},"handleChange");return a.addEventListener("change",d),()=>a.removeEventListener("change",d)},[]),e}t(W,"usePrefersReducedMotion");var X={hidden:{opacity:0,x:-50},visible:t(e=>({opacity:1,x:0,transition:{delay:e*.1,duration:.5,ease:"easeOut"}}),"visible"),exit:{opacity:0,x:50,transition:{duration:.3}}},Y={hidden:{opacity:0},visible:t(e=>({opacity:1,transition:{delay:e*.1,duration:.5,ease:"easeOut"}}),"visible"),exit:{opacity:0,transition:{duration:.3}}},Z={hidden:{opacity:0,scale:.8},visible:t(e=>({opacity:1,scale:1,transition:{delay:e*.1,duration:.5,ease:"easeOut",type:"spring",stiffness:100}}),"visible"),exit:{opacity:0,scale:.8,transition:{duration:.3}}},_={hidden:{opacity:0,y:50},visible:t(e=>({opacity:1,y:0,transition:{delay:e*.1,duration:.5,ease:"easeOut"}}),"visible"),exit:{opacity:0,y:-50,transition:{duration:.3}}},j={hidden:{opacity:0,y:-50},visible:t(e=>({opacity:1,y:0,transition:{delay:e*.1,duration:.5,ease:"easeOut"}}),"visible"),exit:{opacity:0,y:50,transition:{duration:.3}}},H={hidden:{opacity:0,x:50},visible:t(e=>({opacity:1,x:0,transition:{delay:e*.1,duration:.5,ease:"easeOut"}}),"visible"),exit:{opacity:0,x:-50,transition:{duration:.3}}},ee={hidden:{opacity:0,x:-50},visible:t(e=>({opacity:1,x:0,transition:{delay:e*.1,duration:.5,ease:"easeOut"}}),"visible"),exit:{opacity:0,x:50,transition:{duration:.3}}},te={slide:X,fade:Y,scale:Z,slideUp:_,slideDown:j,slideLeft:H,slideRight:ee};function ie(e,s,a,d){let[c,x]=react.useState(0),b=react.useMemo(()=>{if(!d)return e;let r=Math.floor(c/a),p=Math.min(r+Math.ceil(s/a)+1,e.length);return e.slice(r,p).map((A,f)=>({...A,virtualIndex:r+f,style:{position:"absolute",top:(r+f)*a,height:a,width:"100%"}}))},[e,c,a,s,d]),g=e.length*a,m=react.useCallback(r=>{x(r.currentTarget.scrollTop);},[]);return {visibleItems:b,totalHeight:g,handleScroll:m}}t(ie,"useVirtualizedList");function l({items:e,animation:s="slideUp",staggerDelay:a=100,duration:d=500,reorderable:c=false,enableAddRemove:x=true,layout:b="vertical",gridColumns:g=3,className:m,itemClassName:r,style:p,onReorder:A,onItemClick:f,showHoverEffects:R=true,customVariants:T,virtualized:I=false,itemHeight:E=60,containerHeight:P=400,autoStart:N=true,onAnimationComplete:z}){let[v,w]=react.useState(e),[D,ne]=react.useState(0),G=W(),u=T||te[s],K=!G&&N,{visibleItems:Q,totalHeight:F,handleScroll:$}=ie(e,P,E,I);react.useEffect(()=>{w(e);},[e]);let q=react.useMemo(()=>!u.visible||typeof u.visible!="function"?u:{...u,visible:t(i=>{let o=u.visible,h=o(i);return {...h,transition:{...h.transition,delay:i*(a/1e3),duration:d/1e3}}},"visible")},[u,a,d]),C=t(()=>{switch(b){case "horizontal":return "flex flex-row gap-4 overflow-x-auto";case "grid":return `grid gap-4 grid-cols-${g}`;default:return "flex flex-col gap-4"}},"getLayoutClassName"),S=t((i,o,h)=>jsxRuntime.jsx(react$1.motion.div,{custom:o,variants:q,initial:K?"hidden":"visible",animate:"visible",exit:"exit",layout:x,className:utils.cn("cursor-pointer select-none",R&&"hover:scale-105 transition-transform",r),style:h,onClick:()=>f?.(i,o),whileHover:R?{scale:1.02}:void 0,whileTap:R?{scale:.98}:void 0,onAnimationComplete:()=>{o===v.length-1&&z?.();},children:i.content},i.id),"renderListItem");return c&&!I?jsxRuntime.jsx(react$1.Reorder.Group,{axis:b==="horizontal"?"x":"y",values:v,onReorder:i=>{w(i),A?.(i);},className:utils.cn(C(),m),style:p,children:jsxRuntime.jsx(react$1.AnimatePresence,{mode:"popLayout",children:v.map((i,o)=>jsxRuntime.jsx(react$1.Reorder.Item,{value:i,className:utils.cn("cursor-grab active:cursor-grabbing",r),whileDrag:{scale:1.05,zIndex:10},children:i.content},i.id))})}):I?jsxRuntime.jsx("div",{className:utils.cn("overflow-auto",m),style:{height:P,...p},onScroll:$,children:jsxRuntime.jsx("div",{style:{height:F,position:"relative"},children:jsxRuntime.jsx(react$1.AnimatePresence,{mode:"popLayout",children:Q.map((i,o)=>S(i,i.virtualIndex||o,i.style))})})}):jsxRuntime.jsx(react$1.motion.div,{className:utils.cn(C(),m),style:p,initial:"hidden",animate:"visible",children:jsxRuntime.jsx(react$1.AnimatePresence,{mode:"popLayout",children:v.map((i,o)=>S(i,o))})},D)}t(l,"AnimatedList");var ue={FadeList:t(e=>jsxRuntime.jsx(l,{animation:"fade",...e}),"FadeList"),ScaleList:t(e=>jsxRuntime.jsx(l,{animation:"scale",...e}),"ScaleList"),SlideUpList:t(e=>jsxRuntime.jsx(l,{animation:"slideUp",...e}),"SlideUpList"),CarouselList:t(e=>jsxRuntime.jsx(l,{layout:"horizontal",animation:"slideLeft",...e}),"CarouselList"),GridList:t(e=>jsxRuntime.jsx(l,{layout:"grid",animation:"scale",...e}),"GridList"),TaskList:t(e=>jsxRuntime.jsx(l,{reorderable:true,animation:"slideUp",showHoverEffects:true,...e}),"TaskList")},me=l;exports.AnimatedList=l;exports.AnimatedListPresets=ue;exports.default=me;

package/dist/animation/animated-list.mjs

@@ -1,333 +1,2 @@
 "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 };
+import {useState,useEffect,useMemo,useCallback}from'react';import {motion,Reorder,AnimatePresence}from'motion/react';import {cn}from'@/lib/utils';import {jsx}from'react/jsx-runtime';var B=Object.defineProperty;var t=(e,s)=>B(e,"name",{value:s,configurable:true});function W(){let[e,s]=useState(false);return useEffect(()=>{if(typeof window>"u")return;let a=window.matchMedia("(prefers-reduced-motion: reduce)");s(a.matches);let d=t(c=>{s(c.matches);},"handleChange");return a.addEventListener("change",d),()=>a.removeEventListener("change",d)},[]),e}t(W,"usePrefersReducedMotion");var X={hidden:{opacity:0,x:-50},visible:t(e=>({opacity:1,x:0,transition:{delay:e*.1,duration:.5,ease:"easeOut"}}),"visible"),exit:{opacity:0,x:50,transition:{duration:.3}}},Y={hidden:{opacity:0},visible:t(e=>({opacity:1,transition:{delay:e*.1,duration:.5,ease:"easeOut"}}),"visible"),exit:{opacity:0,transition:{duration:.3}}},Z={hidden:{opacity:0,scale:.8},visible:t(e=>({opacity:1,scale:1,transition:{delay:e*.1,duration:.5,ease:"easeOut",type:"spring",stiffness:100}}),"visible"),exit:{opacity:0,scale:.8,transition:{duration:.3}}},_={hidden:{opacity:0,y:50},visible:t(e=>({opacity:1,y:0,transition:{delay:e*.1,duration:.5,ease:"easeOut"}}),"visible"),exit:{opacity:0,y:-50,transition:{duration:.3}}},j={hidden:{opacity:0,y:-50},visible:t(e=>({opacity:1,y:0,transition:{delay:e*.1,duration:.5,ease:"easeOut"}}),"visible"),exit:{opacity:0,y:50,transition:{duration:.3}}},H={hidden:{opacity:0,x:50},visible:t(e=>({opacity:1,x:0,transition:{delay:e*.1,duration:.5,ease:"easeOut"}}),"visible"),exit:{opacity:0,x:-50,transition:{duration:.3}}},ee={hidden:{opacity:0,x:-50},visible:t(e=>({opacity:1,x:0,transition:{delay:e*.1,duration:.5,ease:"easeOut"}}),"visible"),exit:{opacity:0,x:50,transition:{duration:.3}}},te={slide:X,fade:Y,scale:Z,slideUp:_,slideDown:j,slideLeft:H,slideRight:ee};function ie(e,s,a,d){let[c,x]=useState(0),b=useMemo(()=>{if(!d)return e;let r=Math.floor(c/a),p=Math.min(r+Math.ceil(s/a)+1,e.length);return e.slice(r,p).map((A,f)=>({...A,virtualIndex:r+f,style:{position:"absolute",top:(r+f)*a,height:a,width:"100%"}}))},[e,c,a,s,d]),g=e.length*a,m=useCallback(r=>{x(r.currentTarget.scrollTop);},[]);return {visibleItems:b,totalHeight:g,handleScroll:m}}t(ie,"useVirtualizedList");function l({items:e,animation:s="slideUp",staggerDelay:a=100,duration:d=500,reorderable:c=false,enableAddRemove:x=true,layout:b="vertical",gridColumns:g=3,className:m,itemClassName:r,style:p,onReorder:A,onItemClick:f,showHoverEffects:R=true,customVariants:T,virtualized:I=false,itemHeight:E=60,containerHeight:P=400,autoStart:N=true,onAnimationComplete:z}){let[v,w]=useState(e),[D,ne]=useState(0),G=W(),u=T||te[s],K=!G&&N,{visibleItems:Q,totalHeight:F,handleScroll:$}=ie(e,P,E,I);useEffect(()=>{w(e);},[e]);let q=useMemo(()=>!u.visible||typeof u.visible!="function"?u:{...u,visible:t(i=>{let o=u.visible,h=o(i);return {...h,transition:{...h.transition,delay:i*(a/1e3),duration:d/1e3}}},"visible")},[u,a,d]),C=t(()=>{switch(b){case "horizontal":return "flex flex-row gap-4 overflow-x-auto";case "grid":return `grid gap-4 grid-cols-${g}`;default:return "flex flex-col gap-4"}},"getLayoutClassName"),S=t((i,o,h)=>jsx(motion.div,{custom:o,variants:q,initial:K?"hidden":"visible",animate:"visible",exit:"exit",layout:x,className:cn("cursor-pointer select-none",R&&"hover:scale-105 transition-transform",r),style:h,onClick:()=>f?.(i,o),whileHover:R?{scale:1.02}:void 0,whileTap:R?{scale:.98}:void 0,onAnimationComplete:()=>{o===v.length-1&&z?.();},children:i.content},i.id),"renderListItem");return c&&!I?jsx(Reorder.Group,{axis:b==="horizontal"?"x":"y",values:v,onReorder:i=>{w(i),A?.(i);},className:cn(C(),m),style:p,children:jsx(AnimatePresence,{mode:"popLayout",children:v.map((i,o)=>jsx(Reorder.Item,{value:i,className:cn("cursor-grab active:cursor-grabbing",r),whileDrag:{scale:1.05,zIndex:10},children:i.content},i.id))})}):I?jsx("div",{className:cn("overflow-auto",m),style:{height:P,...p},onScroll:$,children:jsx("div",{style:{height:F,position:"relative"},children:jsx(AnimatePresence,{mode:"popLayout",children:Q.map((i,o)=>S(i,i.virtualIndex||o,i.style))})})}):jsx(motion.div,{className:cn(C(),m),style:p,initial:"hidden",animate:"visible",children:jsx(AnimatePresence,{mode:"popLayout",children:v.map((i,o)=>S(i,o))})},D)}t(l,"AnimatedList");var ue={FadeList:t(e=>jsx(l,{animation:"fade",...e}),"FadeList"),ScaleList:t(e=>jsx(l,{animation:"scale",...e}),"ScaleList"),SlideUpList:t(e=>jsx(l,{animation:"slideUp",...e}),"SlideUpList"),CarouselList:t(e=>jsx(l,{layout:"horizontal",animation:"slideLeft",...e}),"CarouselList"),GridList:t(e=>jsx(l,{layout:"grid",animation:"scale",...e}),"GridList"),TaskList:t(e=>jsx(l,{reorderable:true,animation:"slideUp",showHoverEffects:true,...e}),"TaskList")},me=l;export{l as AnimatedList,ue as AnimatedListPresets,me as default};