@moontra/moonui 2.3.9 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "2.3.9",
+  "version": "2.4.0",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",

package/src/components/ui/index.ts

@@ -218,6 +218,13 @@ export {
     ScrollBar as MoonUIScrollBar,
 } from "./scroll-area";
 
+// ScrollReveal
+export {
+    ScrollReveal as MoonUIScrollReveal,
+    ScrollRevealContainer as MoonUIScrollRevealContainer,
+    ScrollRevealItem as MoonUIScrollRevealItem,
+} from "./scroll-reveal";
+
 // Select
 export {
     Select as MoonUISelect,
@@ -342,6 +349,7 @@ export * from "./progress";
 export * from "./radio-group";
 export * from "./rich-text-editor";
 export * from "./scroll-area";
+export * from "./scroll-reveal";
 export * from "./select";
 export * from "./separator";
 export * from "./simple-editor";

package/src/components/ui/input.tsx

@@ -39,10 +39,10 @@ const inputVariants = 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",
@@ -90,6 +90,12 @@ const inputVariants = cva(
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
     Omit<VariantProps<typeof inputVariants>, "isDisabled" | "hasLeftIcon" | "hasRightIcon" | "hasRightButton"> {
+  /** Label metni */
+  label?: string;
+  /** Floating label animasyonu (Material Design pattern) */
+  floatingLabel?: boolean;
+  /** Floating label için ek sınıflar */
+  floatingLabelClassName?: string;
   /** Hata mesajı */
   error?: string;
   /** Başarı mesajı */
@@ -125,14 +131,14 @@ export interface InputProps
  * @param props.alwaysShowMessage - Mesajın her zaman görünür olması
  */
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ 
-    className, 
+  ({
+    className,
     wrapperClassName,
     messageClassName,
-    variant, 
-    size, 
+    variant,
+    size,
     isError,
-    disabled, 
+    disabled,
     error,
     success,
     loading,
@@ -140,8 +146,48 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     rightIcon,
     rightButton,
     alwaysShowMessage = false,
-    ...props 
+    label,
+    floatingLabel = false,
+    floatingLabelClassName,
+    value,
+    defaultValue,
+    onChange,
+    onFocus,
+    onBlur,
+    placeholder,
+    ...props
   }, ref) => {
+    // Floating label state management
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState(value || defaultValue || "");
+
+    // Floating label aktif mi kontrolü
+    const hasValue = internalValue !== "" && internalValue !== null && internalValue !== undefined;
+    const isLabelActive = isFocused || hasValue;
+
+    // Event handler'lar
+    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsFocused(true);
+      onFocus?.(e);
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      setIsFocused(false);
+      onBlur?.(e);
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setInternalValue(e.target.value);
+      onChange?.(e);
+    };
+
+    // Value değişikliklerini takip et
+    React.useEffect(() => {
+      if (value !== undefined) {
+        setInternalValue(value);
+      }
+    }, [value]);
+
     // Mesajı göster/gizle
     const showMessage = alwaysShowMessage || error || success;
     const messageType = error ? "error" : success ? "success" : "normal";
@@ -149,18 +195,39 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className="space-y-1.5 w-full">
         <div className={cn("moonui-theme", inputWrapperVariants({ size }), wrapperClassName)}>
+          {/* Floating Label */}
+          {floatingLabel && label && (
+            <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
+              )}
+            >
+              {label}
+            </label>
+          )}
+
           {leftIcon && (
             <div className="absolute left-3 text-gray-500 flex items-center justify-center pointer-events-none">
               {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : leftIcon}
             </div>
           )}
-          
+
           <input
             className={cn(
-              inputVariants({ 
-                variant, 
-                size, 
-                isError: !!error || isError, 
+              inputVariants({
+                variant,
+                size,
+                isError: !!error || isError,
                 isSuccess: !!success,
                 isDisabled: disabled || loading,
                 hasLeftIcon: !!leftIcon || loading,
@@ -176,30 +243,36 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             data-success={!!success ? "" : undefined}
             aria-invalid={!!error || !!isError || undefined}
             aria-describedby={error ? `${props.id || ''}-error` : success ? `${props.id || ''}-success` : undefined}
+            value={value}
+            defaultValue={defaultValue}
+            onChange={handleChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            placeholder={floatingLabel ? (isLabelActive ? placeholder : "") : placeholder}
             {...props}
           />
-          
+
           {rightIcon && !loading && (
             <div className="absolute right-3 text-gray-500 flex items-center justify-center pointer-events-none">
               {rightIcon}
             </div>
           )}
-          
+
           {rightButton && (
             <div className="absolute right-3">
               {rightButton}
             </div>
           )}
-          
+
           {loading && !leftIcon && (
             <div className="absolute left-3 text-gray-500 flex items-center justify-center pointer-events-none">
               <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
             </div>
           )}
         </div>
-        
+
         {showMessage && (
-          <p 
+          <p
             className={cn(
               "text-xs transition-all",
               messageType === "error" && "text-error",

package/src/components/ui/pagination.tsx

@@ -37,7 +37,7 @@ PaginationItem.displayName = "PaginationItem"
 
 type PaginationLinkProps = {
   isActive?: boolean
-} & Pick<ButtonProps, "size"> &
+} & Partial<Pick<ButtonProps, "size">> &
   React.ComponentProps<"a">
 
 const PaginationLink = ({

package/src/components/ui/scroll-reveal.tsx

@@ -0,0 +1,245 @@
+"use client"
+
+import * as React from "react"
+import { motion, useInView, useAnimation, Variants } from "framer-motion"
+import { cn } from "../../lib/utils"
+
+interface ScrollRevealProps {
+  children: React.ReactNode
+  direction?: "up" | "down" | "left" | "right"
+  delay?: number
+  duration?: number
+  distance?: number
+  threshold?: number
+  triggerOnce?: boolean
+  stagger?: number
+  className?: string
+  variants?: Variants
+  animate?: boolean
+  style?: React.CSSProperties
+  id?: string
+}
+
+const defaultVariants: Record<string, Variants> = {
+  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)" }
+  }
+}
+
+const ScrollReveal = React.forwardRef<HTMLDivElement, ScrollRevealProps>(
+  ({
+    children,
+    direction = "up",
+    delay = 0,
+    duration = 0.6,
+    distance = 50,
+    threshold = 0.1,
+    triggerOnce = true,
+    stagger = 0,
+    className,
+    variants,
+    animate = true,
+    style,
+    id
+  }, ref) => {
+    const controls = useAnimation()
+    const elementRef = React.useRef<HTMLDivElement>(null)
+    const isInView = useInView(elementRef, { 
+      amount: threshold,
+      once: triggerOnce
+    })
+
+    // Custom variants with distance
+    const customVariants = React.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])
+
+    React.useEffect(() => {
+      if (!animate) return
+      
+      if (isInView) {
+        controls.start("visible")
+      } else if (!triggerOnce) {
+        controls.start("hidden")
+      }
+    }, [isInView, controls, triggerOnce, animate])
+
+    React.useImperativeHandle(ref, () => elementRef.current!)
+
+    if (!animate) {
+      return (
+        <div
+          ref={elementRef}
+          className={className}
+          style={style}
+          id={id}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    return (
+      <motion.div
+        ref={elementRef}
+        variants={customVariants}
+        initial="hidden"
+        animate={controls}
+        transition={{
+          duration,
+          delay: delay + stagger,
+          ease: "easeOut"
+        }}
+        className={cn(className)}
+        style={style}
+        id={id}
+      >
+        {children}
+      </motion.div>
+    )
+  }
+)
+
+ScrollReveal.displayName = "ScrollReveal"
+
+// ScrollReveal container for staggered animations
+interface ScrollRevealContainerProps {
+  children: React.ReactNode
+  stagger?: number
+  className?: string
+  style?: React.CSSProperties
+  id?: string
+}
+
+const ScrollRevealContainer = React.forwardRef<HTMLDivElement, ScrollRevealContainerProps>(
+  ({ children, stagger = 0.1, className, style, id }, ref) => {
+    const containerRef = React.useRef<HTMLDivElement>(null)
+    const isInView = useInView(containerRef, { amount: 0.1, once: true })
+
+    React.useImperativeHandle(ref, () => containerRef.current!)
+
+    return (
+      <motion.div
+        ref={containerRef}
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+        variants={{
+          hidden: {},
+          visible: {
+            transition: {
+              staggerChildren: stagger
+            }
+          }
+        }}
+        className={cn(className)}
+        style={style}
+        id={id}
+      >
+        {children}
+      </motion.div>
+    )
+  }
+)
+
+ScrollRevealContainer.displayName = "ScrollRevealContainer"
+
+// ScrollReveal item for use within containers
+interface ScrollRevealItemProps {
+  children: React.ReactNode
+  direction?: "up" | "down" | "left" | "right"
+  duration?: number
+  distance?: number
+  className?: string
+  variants?: Variants
+  style?: React.CSSProperties
+  id?: string
+}
+
+const ScrollRevealItem = React.forwardRef<HTMLDivElement, ScrollRevealItemProps>(
+  ({
+    children,
+    direction = "up",
+    duration = 0.6,
+    distance = 50,
+    className,
+    variants,
+    style,
+    id
+  }, ref) => {
+    const customVariants = React.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 (
+      <motion.div
+        ref={ref}
+        variants={customVariants}
+        transition={{
+          duration,
+          ease: "easeOut"
+        }}
+        className={cn(className)}
+        style={style}
+        id={id}
+      >
+        {children}
+      </motion.div>
+    )
+  }
+)
+
+ScrollRevealItem.displayName = "ScrollRevealItem"
+
+export { ScrollReveal, ScrollRevealContainer, ScrollRevealItem }
+export type { ScrollRevealProps, ScrollRevealContainerProps, ScrollRevealItemProps }

package/src/components/ui/table.tsx

@@ -207,10 +207,12 @@ interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
   sorted?: SortDirection;
   /** Sıralama değiştiğinde çağrılacak fonksiyon */
   onSort?: () => void;
+  /** Text alignment */
+  align?: 'left' | 'center' | 'right';
 }
 
 const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
-  ({ className, sortable, sorted, onSort, children, ...props }, ref) => {
+  ({ className, sortable, sorted, onSort, align = 'left', children, ...props }, ref) => {
     // Sıralama için simgeler
     const renderSortIcon = () => {
       if (!sortable) return null;
@@ -265,37 +267,61 @@ const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
       );
     };
     
+    const alignmentClasses = {
+      left: 'text-left justify-start',
+      center: 'text-center justify-center',
+      right: 'text-right justify-end'
+    };
+
     return (
       <th
         ref={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 : undefined}
         {...props}
       >
-        <div className="flex items-center">
-          {children}
-          {sortable && renderSortIcon()}
-        </div>
+        {sortable || align !== 'left' ? (
+          <div className={cn("flex items-center", alignmentClasses[align].split(' ')[1])}>
+            {children}
+            {sortable && renderSortIcon()}
+          </div>
+        ) : (
+          children
+        )}
       </th>
     );
   }
 );
 TableHead.displayName = "TableHead";
 
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  /** Text alignment */
+  align?: 'left' | 'center' | 'right';
+}
+
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn("moonui-theme", "p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-));
+  TableCellProps
+>(({ className, align = 'left', ...props }, ref) => {
+  const alignmentClass = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right'
+  }[align];
+
+  return (
+    <td
+      ref={ref}
+      className={cn("moonui-theme", "p-4 align-middle [&:has([role=checkbox])]:pr-0", alignmentClass, className)}
+      {...props}
+    />
+  );
+});
 TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<