@moontra/moonui 2.4.5 → 2.4.7

package/dist/index.mjs

@@ -10,7 +10,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { motion, AnimatePresence, useMotionValue, useTransform, useAnimation, useInView, animate } from 'framer-motion';
+import { motion, AnimatePresence, useMotionValue, useTransform, animate } from 'framer-motion';
 import { format, isSameMonth, isToday, isValid, subMonths, addMonths, isSameDay, startOfMonth, endOfMonth, eachDayOfInterval, getDay, startOfWeek, endOfWeek } from 'date-fns';
 export { format } from 'date-fns';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -10814,88 +10814,85 @@ var ScrollBar = t.forwardRef(({ className, orientation = "vertical", ...props },
   }
 ));
 ScrollBar.displayName = ScrollAreaScrollbar.displayName;
-var defaultVariants = {
-  up: {
-    hidden: { opacity: 0, y: 50 },
-    visible: { opacity: 1, y: 0 }
-  },
-  down: {
-    hidden: { opacity: 0, y: -50 },
-    visible: { opacity: 1, y: 0 }
-  },
-  left: {
-    hidden: { opacity: 0, x: 50 },
-    visible: { opacity: 1, x: 0 }
-  },
-  right: {
-    hidden: { opacity: 0, x: -50 },
-    visible: { opacity: 1, x: 0 }
-  },
-  fade: {
-    hidden: { opacity: 0 },
-    visible: { opacity: 1 }
-  },
-  scale: {
-    hidden: { opacity: 0, scale: 0.8 },
-    visible: { opacity: 1, scale: 1 }
-  },
-  blur: {
-    hidden: { opacity: 0, filter: "blur(10px)" },
-    visible: { opacity: 1, filter: "blur(0px)" }
-  }
+var createDefaultVariants = (direction, distance) => {
+  const baseVariants = {
+    up: {
+      hidden: { opacity: 0, y: distance },
+      visible: { opacity: 1, y: 0 }
+    },
+    down: {
+      hidden: { opacity: 0, y: -distance },
+      visible: { opacity: 1, y: 0 }
+    },
+    left: {
+      hidden: { opacity: 0, x: distance },
+      visible: { opacity: 1, x: 0 }
+    },
+    right: {
+      hidden: { opacity: 0, x: -distance },
+      visible: { opacity: 1, x: 0 }
+    },
+    fade: {
+      hidden: { opacity: 0 },
+      visible: { opacity: 1 }
+    },
+    scale: {
+      hidden: { opacity: 0, scale: 0.85 },
+      visible: { opacity: 1, scale: 1 }
+    },
+    blur: {
+      hidden: { opacity: 0, filter: "blur(10px)" },
+      visible: { opacity: 1, filter: "blur(0px)" }
+    }
+  };
+  return baseVariants[direction] || baseVariants.up;
+};
+var defaultTransition = {
+  duration: 0.5,
+  ease: [0.25, 0.46, 0.45, 0.94]
+  // Custom cubic-bezier for smooth motion
 };
 var ScrollReveal = t.forwardRef(
   ({
     children,
     direction = "up",
     delay = 0,
-    duration = 0.6,
+    duration = 0.5,
     distance = 50,
-    threshold = 0.1,
-    triggerOnce = true,
+    threshold = 0.3,
+    // Increased from 0.1 for better visibility
+    once = true,
+    triggerOnce,
+    // Backward compatibility
     stagger = 0,
     className,
     variants,
     animate: animate2 = true,
     style,
-    id
+    id,
+    viewport
   }, ref) => {
-    const controls = useAnimation();
-    const elementRef = t.useRef(null);
-    const isInView = useInView(elementRef, {
-      amount: threshold,
-      once: triggerOnce
-    });
-    const customVariants = t.useMemo(() => {
+    const shouldTriggerOnce = triggerOnce !== void 0 ? triggerOnce : once;
+    const animationVariants = t.useMemo(() => {
       if (variants)
         return variants;
-      const baseVariants = defaultVariants[direction] || defaultVariants.up;
-      return {
-        hidden: {
-          ...baseVariants.hidden,
-          ...direction === "up" && { y: distance },
-          ...direction === "down" && { y: -distance },
-          ...direction === "left" && { x: distance },
-          ...direction === "right" && { x: -distance }
-        },
-        visible: baseVariants.visible
-      };
+      return createDefaultVariants(direction, distance);
     }, [direction, distance, variants]);
-    t.useEffect(() => {
-      if (!animate2)
-        return;
-      if (isInView) {
-        controls.start("visible");
-      } else if (!triggerOnce) {
-        controls.start("hidden");
-      }
-    }, [isInView, controls, triggerOnce, animate2]);
-    t.useImperativeHandle(ref, () => elementRef.current);
+    const transition = t.useMemo(() => ({
+      ...defaultTransition,
+      duration,
+      delay: delay + stagger
+    }), [duration, delay, stagger]);
+    const viewportConfig = t.useMemo(() => ({
+      once: shouldTriggerOnce,
+      amount: threshold,
+      ...viewport
+    }), [shouldTriggerOnce, threshold, viewport]);
     if (!animate2) {
       return /* @__PURE__ */ jsx(
         "div",
         {
-          ref: elementRef,
+          ref,
           className,
           style,
           id,
@@ -10906,15 +10903,12 @@ var ScrollReveal = t.forwardRef(
     return /* @__PURE__ */ jsx(
       motion.div,
       {
-        ref: elementRef,
-        variants: customVariants,
+        ref,
         initial: "hidden",
-        animate: controls,
-        transition: {
-          duration,
-          delay: delay + stagger,
-          ease: "easeOut"
-        },
+        whileInView: "visible",
+        viewport: viewportConfig,
+        variants: animationVariants,
+        transition,
         className: cn(className),
         style,
         id,
@@ -10925,24 +10919,40 @@ var ScrollReveal = t.forwardRef(
 );
 ScrollReveal.displayName = "ScrollReveal";
 var ScrollRevealContainer = t.forwardRef(
-  ({ children, stagger = 0.1, className, style, id }, ref) => {
-    const containerRef = t.useRef(null);
-    const isInView = useInView(containerRef, { amount: 0.1, once: true });
-    t.useImperativeHandle(ref, () => containerRef.current);
+  ({
+    children,
+    stagger = 0.1,
+    className,
+    style,
+    id,
+    threshold = 0.3,
+    once = true,
+    triggerOnce,
+    viewport
+  }, ref) => {
+    const shouldTriggerOnce = triggerOnce !== void 0 ? triggerOnce : once;
+    const viewportConfig = t.useMemo(() => ({
+      once: shouldTriggerOnce,
+      amount: threshold,
+      ...viewport
+    }), [shouldTriggerOnce, threshold, viewport]);
+    const containerVariants = {
+      hidden: {},
+      visible: {
+        transition: {
+          staggerChildren: stagger,
+          delayChildren: 0
+        }
+      }
+    };
     return /* @__PURE__ */ jsx(
       motion.div,
       {
-        ref: containerRef,
+        ref,
         initial: "hidden",
-        animate: isInView ? "visible" : "hidden",
-        variants: {
-          hidden: {},
-          visible: {
-            transition: {
-              staggerChildren: stagger
-            }
-          }
-        },
+        whileInView: "visible",
+        viewport: viewportConfig,
+        variants: containerVariants,
         className: cn(className),
         style,
         id,
@@ -10956,37 +10966,28 @@ var ScrollRevealItem = t.forwardRef(
   ({
     children,
     direction = "up",
-    duration = 0.6,
+    duration = 0.5,
     distance = 50,
     className,
     variants,
     style,
     id
   }, ref) => {
-    const customVariants = t.useMemo(() => {
+    const animationVariants = t.useMemo(() => {
       if (variants)
         return variants;
-      const baseVariants = defaultVariants[direction] || defaultVariants.up;
-      return {
-        hidden: {
-          ...baseVariants.hidden,
-          ...direction === "up" && { y: distance },
-          ...direction === "down" && { y: -distance },
-          ...direction === "left" && { x: distance },
-          ...direction === "right" && { x: -distance }
-        },
-        visible: baseVariants.visible
-      };
+      return createDefaultVariants(direction, distance);
     }, [direction, distance, variants]);
+    const transition = t.useMemo(() => ({
+      ...defaultTransition,
+      duration
+    }), [duration]);
     return /* @__PURE__ */ jsx(
       motion.div,
       {
         ref,
-        variants: customVariants,
-        transition: {
-          duration,
-          ease: "easeOut"
-        },
+        variants: animationVariants,
+        transition,
         className: cn(className),
         style,
         id,
@@ -12307,7 +12308,7 @@ var TagsInput = t.forwardRef(
         "div",
         {
           className: cn(
-            "flex min-h-[2.5rem] w-full flex-wrap gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background",
+            "flex items-center min-h-[2.5rem] w-full flex-wrap gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background",
             "dark:bg-zinc-950/50 dark:border-zinc-800",
             "focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
             disabled && "cursor-not-allowed opacity-50",