@moontra/moonui 2.3.9 → 2.4.0

package/dist/index.js

@@ -2026,10 +2026,10 @@ var inputVariants = classVarianceAuthority.cva(
   {
     variants: {
       variant: {
-        standard: "border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20 focus-visible:border-primary dark:focus-visible:border-primary/80 dark:bg-gray-900/60 dark:shadow-inner dark:shadow-gray-950/10",
-        filled: "border border-transparent bg-gray-100 dark:bg-gray-800/90 rounded-md px-3 py-2 hover:bg-gray-200 dark:hover:bg-gray-700/90 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20 dark:shadow-inner dark:shadow-gray-950/10",
+        standard: "border border-gray-300 dark:border-gray-700 rounded-md px-3 py-2 hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20 focus-visible:border-primary dark:focus-visible:border-primary/80 dark:bg-gray-800/80 dark:shadow-inner dark:shadow-gray-950/10",
+        filled: "border border-transparent bg-gray-100 dark:bg-gray-800 rounded-md px-3 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20 dark:shadow-inner dark:shadow-gray-950/10",
         ghost: "border-none bg-transparent shadow-none px-1 dark:text-gray-300 dark:placeholder:text-gray-500 hover:bg-gray-100/50 dark:hover:bg-gray-800/30 focus-visible:bg-transparent",
-        underline: "border-t-0 border-l-0 border-r-0 border-b border-gray-300 dark:border-gray-600 rounded-none px-0 py-2 hover:border-gray-400 dark:hover:border-gray-500 focus-visible:ring-0 focus-visible:border-b-2 focus-visible:border-primary dark:focus-visible:border-primary/80 dark:text-gray-300"
+        underline: "border-t-0 border-l-0 border-r-0 border-b border-gray-300 dark:border-gray-600 rounded-none px-0 py-2 hover:border-gray-400 dark:hover:border-gray-500 focus-visible:ring-0 focus-visible:border-b-2 focus-visible:border-primary dark:focus-visible:border-primary/80 dark:text-gray-300 dark:bg-transparent"
       },
       size: {
         sm: "h-8 text-xs",
@@ -2089,12 +2089,59 @@ var Input = t__namespace.forwardRef(
     rightIcon,
     rightButton,
     alwaysShowMessage = false,
+    label,
+    floatingLabel = false,
+    floatingLabelClassName,
+    value,
+    defaultValue,
+    onChange,
+    onFocus,
+    onBlur,
+    placeholder,
     ...props
   }, ref) => {
+    const [isFocused, setIsFocused] = t__namespace.useState(false);
+    const [internalValue, setInternalValue] = t__namespace.useState(value || defaultValue || "");
+    const hasValue = internalValue !== "" && internalValue !== null && internalValue !== void 0;
+    const isLabelActive = isFocused || hasValue;
+    const handleFocus = (e) => {
+      setIsFocused(true);
+      onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+      setIsFocused(false);
+      onBlur?.(e);
+    };
+    const handleChange = (e) => {
+      setInternalValue(e.target.value);
+      onChange?.(e);
+    };
+    t__namespace.useEffect(() => {
+      if (value !== void 0) {
+        setInternalValue(value);
+      }
+    }, [value]);
     const showMessage = alwaysShowMessage || error || success;
     const messageType = error ? "error" : success ? "success" : "normal";
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5 w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("moonui-theme", inputWrapperVariants({ size }), wrapperClassName), children: [
+        floatingLabel && label && /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: props.id,
+            className: cn(
+              "absolute transition-all duration-200 pointer-events-none",
+              leftIcon || loading ? "left-10" : "left-3",
+              "text-gray-500 dark:text-gray-400",
+              isLabelActive ? "top-0 -translate-y-1/2 text-xs bg-background dark:bg-gray-800 px-1" : "top-1/2 -translate-y-1/2 text-sm",
+              isFocused && "text-primary dark:text-primary",
+              !!error && "text-error",
+              disabled && "opacity-50",
+              floatingLabelClassName
+            ),
+            children: label
+          }
+        ),
         leftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 text-gray-500 flex items-center justify-center pointer-events-none", children: loading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }) : leftIcon }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
@@ -2119,6 +2166,12 @@ var Input = t__namespace.forwardRef(
             "data-success": !!success ? "" : void 0,
             "aria-invalid": !!error || !!isError || void 0,
             "aria-describedby": error ? `${props.id || ""}-error` : success ? `${props.id || ""}-success` : void 0,
+            value,
+            defaultValue,
+            onChange: handleChange,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            placeholder: floatingLabel ? isLabelActive ? placeholder : "" : placeholder,
             ...props
           }
         ),
@@ -7132,7 +7185,7 @@ var TableRow = t__namespace.forwardRef(({ className, ...props }, ref) => /* @__P
 ));
 TableRow.displayName = "TableRow";
 var TableHead = t__namespace.forwardRef(
-  ({ className, sortable, sorted, onSort, children, ...props }, ref) => {
+  ({ className, sortable, sorted, onSort, align = "left", children, ...props }, ref) => {
     const renderSortIcon = () => {
       if (!sortable)
         return null;
@@ -7192,34 +7245,48 @@ var TableHead = t__namespace.forwardRef(
         }
       );
     };
+    const alignmentClasses = {
+      left: "text-left justify-start",
+      center: "text-center justify-center",
+      right: "text-right justify-end"
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(
       "th",
       {
         ref,
         className: cn(
-          "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+          "h-10 px-4 align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+          alignmentClasses[align].split(" ")[0],
+          // text alignment
           sortable && "cursor-pointer hover:text-foreground select-none",
           className
         ),
         onClick: sortable ? onSort : void 0,
         ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+        children: sortable || align !== "left" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center", alignmentClasses[align].split(" ")[1]), children: [
           children,
           sortable && renderSortIcon()
-        ] })
+        ] }) : children
       }
     );
   }
 );
 TableHead.displayName = "TableHead";
-var TableCell = t__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-  "td",
-  {
-    ref,
-    className: cn("moonui-theme", "p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
-    ...props
-  }
-));
+var TableCell = t__namespace.forwardRef(({ className, align = "left", ...props }, ref) => {
+  const alignmentClass = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  }[align];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      ref,
+      className: cn("moonui-theme", "p-4 align-middle [&:has([role=checkbox])]:pr-0", alignmentClass, className),
+      ...props
+    }
+  );
+});
 TableCell.displayName = "TableCell";
 var TableCaption = t__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "caption",
@@ -10778,6 +10845,188 @@ var ScrollBar = t__namespace.forwardRef(({ className, orientation = "vertical",
   }
 ));
 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 ScrollReveal = t__namespace.forwardRef(
+  ({
+    children,
+    direction = "up",
+    delay = 0,
+    duration = 0.6,
+    distance = 50,
+    threshold = 0.1,
+    triggerOnce = true,
+    stagger = 0,
+    className,
+    variants,
+    animate: animate2 = true,
+    style,
+    id
+  }, ref) => {
+    const controls = framerMotion.useAnimation();
+    const elementRef = t__namespace.useRef(null);
+    const isInView = framerMotion.useInView(elementRef, {
+      amount: threshold,
+      once: triggerOnce
+    });
+    const customVariants = t__namespace.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
+      };
+    }, [direction, distance, variants]);
+    t__namespace.useEffect(() => {
+      if (!animate2)
+        return;
+      if (isInView) {
+        controls.start("visible");
+      } else if (!triggerOnce) {
+        controls.start("hidden");
+      }
+    }, [isInView, controls, triggerOnce, animate2]);
+    t__namespace.useImperativeHandle(ref, () => elementRef.current);
+    if (!animate2) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: elementRef,
+          className,
+          style,
+          id,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        ref: elementRef,
+        variants: customVariants,
+        initial: "hidden",
+        animate: controls,
+        transition: {
+          duration,
+          delay: delay + stagger,
+          ease: "easeOut"
+        },
+        className: cn(className),
+        style,
+        id,
+        children
+      }
+    );
+  }
+);
+ScrollReveal.displayName = "ScrollReveal";
+var ScrollRevealContainer = t__namespace.forwardRef(
+  ({ children, stagger = 0.1, className, style, id }, ref) => {
+    const containerRef = t__namespace.useRef(null);
+    const isInView = framerMotion.useInView(containerRef, { amount: 0.1, once: true });
+    t__namespace.useImperativeHandle(ref, () => containerRef.current);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        ref: containerRef,
+        initial: "hidden",
+        animate: isInView ? "visible" : "hidden",
+        variants: {
+          hidden: {},
+          visible: {
+            transition: {
+              staggerChildren: stagger
+            }
+          }
+        },
+        className: cn(className),
+        style,
+        id,
+        children
+      }
+    );
+  }
+);
+ScrollRevealContainer.displayName = "ScrollRevealContainer";
+var ScrollRevealItem = t__namespace.forwardRef(
+  ({
+    children,
+    direction = "up",
+    duration = 0.6,
+    distance = 50,
+    className,
+    variants,
+    style,
+    id
+  }, ref) => {
+    const customVariants = t__namespace.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
+      };
+    }, [direction, distance, variants]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      framerMotion.motion.div,
+      {
+        ref,
+        variants: customVariants,
+        transition: {
+          duration,
+          ease: "easeOut"
+        },
+        className: cn(className),
+        style,
+        id,
+        children
+      }
+    );
+  }
+);
+ScrollRevealItem.displayName = "ScrollRevealItem";
 var separatorVariants = classVarianceAuthority.cva(
   "shrink-0 bg-border",
   {
@@ -12144,32 +12393,147 @@ var TagsInput = t__namespace.forwardRef(
   }
 );
 TagsInput.displayName = "TagsInput";
+var textareaVariants = classVarianceAuthority.cva(
+  [
+    "flex w-full rounded-md px-3 py-2 text-sm transition-all duration-200",
+    "text-foreground placeholder:text-muted-foreground dark:placeholder:text-gray-500",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "focus-visible:outline-none dark:text-gray-200",
+    "resize-none"
+    // Always disable manual resize, we control it
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border border-gray-300 dark:border-gray-700 bg-background dark:bg-gray-800/80 hover:border-gray-400 dark:hover:border-gray-600 focus-visible:ring-2 focus-visible:ring-primary/30 dark:focus-visible:ring-primary/20 focus-visible:border-primary dark:focus-visible:border-primary/80 dark:shadow-inner dark:shadow-gray-950/10",
+        outline: "border-2 border-gray-300 dark:border-gray-700 bg-transparent hover:border-gray-400 dark:hover:border-gray-600 focus-visible:border-primary dark:focus-visible:border-primary/80",
+        ghost: "border-none bg-transparent hover:bg-gray-100/50 dark:hover:bg-gray-800/30 focus-visible:bg-transparent",
+        underline: "border-t-0 border-l-0 border-r-0 border-b-2 border-gray-300 dark:border-gray-600 rounded-none px-0 hover:border-gray-400 dark:hover:border-gray-500 focus-visible:ring-0 focus-visible:border-primary dark:focus-visible:border-primary/80 bg-transparent dark:bg-transparent"
+      },
+      size: {
+        sm: "min-h-[60px] text-xs",
+        md: "min-h-[80px] text-sm",
+        lg: "min-h-[120px] text-base"
+      },
+      isError: {
+        true: "border-error focus-visible:ring-error/30 focus-visible:border-error hover:border-error/80 dark:hover:border-error/80",
+        false: ""
+      },
+      isSuccess: {
+        true: "border-success focus-visible:ring-success/30 focus-visible:border-success hover:border-success/80 dark:hover:border-success/80",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      isError: false,
+      isSuccess: false
+    }
+  }
+);
 var Textarea = t__namespace.forwardRef(
   ({
     className,
-    // Extract enhanced props to prevent them from being passed to DOM
+    wrapperClassName,
+    messageClassName,
     variant,
     size,
     error,
     success,
     loading,
-    autoResize,
+    autoResize = false,
     maxHeight,
-    characterCount,
+    characterCount = false,
+    disabled,
+    maxLength,
+    value,
+    defaultValue,
+    onChange,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
-      {
-        className: cn(
-          "moonui-theme",
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ref,
-        ...props
+    const textareaRef = t__namespace.useRef(null);
+    const [internalValue, setInternalValue] = t__namespace.useState(value || defaultValue || "");
+    t__namespace.useImperativeHandle(ref, () => textareaRef.current);
+    const adjustHeight = t__namespace.useCallback(() => {
+      const textarea = textareaRef.current;
+      if (!textarea || !autoResize)
+        return;
+      textarea.style.height = "auto";
+      const newHeight = textarea.scrollHeight;
+      if (maxHeight && newHeight > maxHeight) {
+        textarea.style.height = `${maxHeight}px`;
+        textarea.style.overflowY = "auto";
+      } else {
+        textarea.style.height = `${newHeight}px`;
+        textarea.style.overflowY = "hidden";
       }
-    );
+    }, [autoResize, maxHeight]);
+    t__namespace.useEffect(() => {
+      adjustHeight();
+    }, [internalValue, adjustHeight]);
+    t__namespace.useEffect(() => {
+      if (value !== void 0) {
+        setInternalValue(value);
+      }
+    }, [value]);
+    const handleChange = (e) => {
+      setInternalValue(e.target.value);
+      onChange?.(e);
+    };
+    const currentLength = String(internalValue).length;
+    const showCharCount = characterCount && (maxLength !== void 0 || currentLength > 0);
+    const errorMessage = typeof error === "string" ? error : void 0;
+    const successMessage = typeof success === "string" ? success : void 0;
+    const showMessage = errorMessage || successMessage;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("moonui-theme", "space-y-1.5 w-full", wrapperClassName), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            ref: textareaRef,
+            className: cn(
+              textareaVariants({
+                variant,
+                size,
+                isError: !!error,
+                isSuccess: !!success
+              }),
+              loading && "pr-10",
+              className
+            ),
+            disabled: disabled || loading,
+            value,
+            defaultValue,
+            onChange: handleChange,
+            maxLength,
+            "aria-invalid": !!error || void 0,
+            "aria-describedby": errorMessage ? `${props.id || ""}-error` : successMessage ? `${props.id || ""}-success` : void 0,
+            ...props
+          }
+        ),
+        loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 right-3 text-gray-500", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        showMessage && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: cn(
+              "text-xs transition-all",
+              errorMessage && "text-error",
+              successMessage && "text-success",
+              messageClassName
+            ),
+            id: errorMessage ? `${props.id || ""}-error` : successMessage ? `${props.id || ""}-success` : void 0,
+            children: errorMessage || successMessage
+          }
+        ),
+        showCharCount && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground dark:text-gray-500 ml-auto", children: [
+          currentLength,
+          maxLength !== void 0 && ` / ${maxLength}`
+        ] })
+      ] })
+    ] });
   }
 );
 Textarea.displayName = "Textarea";
@@ -12624,6 +12988,9 @@ exports.MoonUIRadioLabel = RadioLabel;
 exports.MoonUIRichTextEditor = RichTextEditor;
 exports.MoonUIScrollArea = ScrollArea2;
 exports.MoonUIScrollBar = ScrollBar;
+exports.MoonUIScrollReveal = ScrollReveal;
+exports.MoonUIScrollRevealContainer = ScrollRevealContainer;
+exports.MoonUIScrollRevealItem = ScrollRevealItem;
 exports.MoonUISelect = Select;
 exports.MoonUISelectContent = SelectContent;
 exports.MoonUISelectGroup = SelectGroup;
@@ -12697,6 +13064,9 @@ exports.RadioLabel = RadioLabel;
 exports.RichTextEditor = RichTextEditor;
 exports.ScrollArea = ScrollArea2;
 exports.ScrollBar = ScrollBar;
+exports.ScrollReveal = ScrollReveal;
+exports.ScrollRevealContainer = ScrollRevealContainer;
+exports.ScrollRevealItem = ScrollRevealItem;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;