@moontra/moonui 2.3.10 → 2.4.1

package/package.json

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

package/src/components/ui/index.ts

@@ -17,6 +17,10 @@ export {
     AlertDescription as MoonUIAlertDescription,
 } from "./alert";
 
+export type {
+    AlertProps as MoonUIAlertProps,
+} from "./alert";
+
 // AspectRatio
 export { AspectRatio as MoonUIAspectRatio } from "./aspect-ratio";
 
@@ -28,12 +32,20 @@ export {
     AvatarGroup as MoonUIAvatarGroup,
 } from "./avatar";
 
+export type {
+    AvatarProps as MoonUIAvatarProps,
+} from "./avatar";
+
 // Badge
 export {
     Badge as MoonUIBadge,
     badgeVariants as moonUIBadgeVariants,
 } from "./badge";
 
+export type {
+    BadgeProps as MoonUIBadgeProps,
+} from "./badge";
+
 // Breadcrumb
 export {
     Breadcrumb as MoonUIBreadcrumb,
@@ -51,6 +63,10 @@ export {
     buttonVariants as moonUIButtonVariants,
 } from "./button";
 
+export type {
+    ButtonProps as MoonUIButtonProps,
+} from "./button";
+
 // Card
 export {
     Card as MoonUICard,
@@ -61,6 +77,19 @@ export {
     CardContent as MoonUICardContent,
 } from "./card";
 
+export type {
+    CardProps as MoonUICardProps,
+} from "./card";
+
+// Calendar
+export {
+    Calendar as MoonUICalendar,
+} from "./calendar";
+
+export type {
+    CalendarProps as MoonUICalendarProps,
+} from "./calendar";
+
 // Card Input
 export {
     CardNumberInput as MoonUICardNumberInput,
@@ -77,6 +106,10 @@ export {
     CheckboxLabel as MoonUICheckboxLabel,
 } from "./checkbox";
 
+export type {
+    CheckboxProps as MoonUICheckboxProps,
+} from "./checkbox";
+
 // Collapsible
 export {
     Collapsible as MoonUICollapsible,
@@ -91,6 +124,10 @@ export {
     GradientPicker as MoonUIGradientPicker,
 } from "./color-picker";
 
+export type {
+    ColorPickerProps as MoonUIColorPickerProps,
+} from "./color-picker";
+
 // Command
 export {
     Command as MoonUICommand,
@@ -117,6 +154,10 @@ export {
     MonthPicker as MoonUIMonthPicker,
 } from "./date-picker";
 
+export type {
+    DatePickerProps as MoonUIDatePickerProps,
+} from "./date-picker";
+
 // Dialog
 export {
     Dialog as MoonUIDialog,
@@ -132,6 +173,10 @@ export {
 // DraggableList
 export { DraggableList as MoonUIDraggableList } from "./draggable-list";
 
+export type {
+    DraggableListProps as MoonUIDraggableListProps,
+} from "./draggable-list";
+
 // DropdownMenu
 export {
     DropdownMenu as MoonUIDropdownMenu,
@@ -154,15 +199,27 @@ export {
 // FileUpload
 export { FileUpload as MoonUIFileUpload } from "./file-upload";
 
+export type {
+    FileUploadProps as MoonUIFileUploadProps,
+} from "./file-upload";
+
 // GestureDrawer
 export { GestureDrawer as MoonUIGestureDrawer } from "./gesture-drawer";
 
+export type {
+    GestureDrawerProps as MoonUIGestureDrawerProps,
+} from "./gesture-drawer";
+
 // GitHubStars
 export { GitHubStars as MoonUIGitHubStars } from "./github-stars";
 
 // Input
 export { Input as MoonUIInput } from "./input";
 
+export type {
+    InputProps as MoonUIInputProps,
+} from "./input";
+
 // Label
 export { Label as MoonUILabel } from "./label";
 
@@ -201,6 +258,10 @@ export {
 // Progress
 export { Progress as MoonUIProgress } from "./progress";
 
+export type {
+    ProgressProps as MoonUIProgressProps,
+} from "./progress";
+
 // RadioGroup
 export {
     RadioGroup as MoonUIRadioGroup,
@@ -209,6 +270,10 @@ export {
     RadioItemWithLabel as MoonUIRadioItemWithLabel,
 } from "./radio-group";
 
+export type {
+    RadioGroupProps as MoonUIRadioGroupProps,
+} from "./radio-group";
+
 // RichTextEditor
 export { RichTextEditor as MoonUIRichTextEditor } from "./rich-text-editor";
 
@@ -254,6 +319,10 @@ export {
     skeletonVariants as moonUISkeletonVariants,
 } from "./skeleton";
 
+export type {
+    SkeletonProps as MoonUISkeletonProps,
+} from "./skeleton";
+
 // Slider
 export { Slider as MoonUISlider } from "./slider";
 
@@ -263,6 +332,10 @@ export { SwipeableCard as MoonUISwipeableCard } from "./swipeable-card";
 // Switch
 export { Switch as MoonUISwitch } from "./switch";
 
+export type {
+    SwitchProps as MoonUISwitchProps,
+} from "./switch";
+
 // Table
 export {
     Table as MoonUITable,
@@ -289,6 +362,10 @@ export { TagsInput as MoonUITagsInput } from "./tags-input";
 // Textarea
 export { Textarea as MoonUITextarea } from "./textarea";
 
+export type {
+    TextareaProps as MoonUITextareaProps,
+} from "./textarea";
+
 // Toast
 export {
     Toast as MoonUIToast,

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/moon-logo.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { cn } from "../../lib/utils"
+import { cn } from "@/lib/utils"
 
 interface MoonLogoProps extends React.SVGProps<SVGSVGElement> {
   variant?: "default" | "monochrome" | "gradient"
@@ -16,9 +16,10 @@ export function MoonLogo({
 }: MoonLogoProps) {
   const logoId = React.useId()
   const gradientId = `moon-gradient-${logoId}`
+  const maskId = `moon-mask-${logoId}`
   
   return (
-    <div className={cn("moonui-theme", "flex items-center gap-2", className)}>
+    <div className={cn("flex items-center gap-2", className)}>
       {/* Moon Icon */}
       <svg
         width="32"
@@ -29,32 +30,28 @@ export function MoonLogo({
         className="flex-shrink-0"
         {...props}
       >
-        {variant === "gradient" && (
-          <defs>
+        <defs>
+          {variant === "gradient" && (
             <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="100%">
               <stop offset="0%" stopColor="#3B82F6" />
               <stop offset="50%" stopColor="#8B5CF6" />
               <stop offset="100%" stopColor="#EC4899" />
             </linearGradient>
-          </defs>
-        )}
+          )}
+          <mask id={maskId}>
+            <rect width="32" height="32" fill="white"/>
+            <circle cx="22" cy="10" r="10" fill="black"/>
+          </mask>
+        </defs>
         
-        {/* Moon Circle */}
+        {/* Moon Circle with transparent crescent */}
         <circle
           cx="16"
           cy="16"
           r="14"
           fill={variant === "gradient" ? `url(#${gradientId})` : "currentColor"}
           className={variant === "default" ? "fill-primary" : ""}
-        />
-        
-        {/* Crescent cutout */}
-        <circle
-          cx="22"
-          cy="10"
-          r="10"
-          fill="white"
-          className="dark:fill-background"
+          mask={`url(#${maskId})`}
         />
       </svg>
       

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/textarea.tsx

@@ -1,45 +1,219 @@
 "use client"
 
 import * as React from "react"
-
+import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../lib/utils"
+import { Loader2 } from "lucide-react"
+
+/**
+ * Textarea Variant Styles
+ */
+const textareaVariants = 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
+    }
+  }
+)
 
 export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  // Enhanced props that shouldn't be passed to DOM
-  variant?: "default" | "outline" | "ghost" | "underline"
-  size?: "sm" | "md" | "lg"
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">,
+    Omit<VariantProps<typeof textareaVariants>, "isError" | "isSuccess"> {
+  /** Hata mesajı */
   error?: boolean | string
-  success?: boolean
+  /** Başarı mesajı */
+  success?: boolean | string
+  /** Yükleniyor durumu */
   loading?: boolean
+  /** Otomatik yükseklik ayarlama */
   autoResize?: boolean
+  /** Maksimum yükseklik (px) */
   maxHeight?: number
+  /** Karakter sayacı göster */
   characterCount?: boolean
+  /** Wrapper için ek sınıflar */
+  wrapperClassName?: string
+  /** Mesaj için ek sınıflar */
+  messageClassName?: string
 }
 
+/**
+ * Advanced Textarea Component
+ *
+ * Features:
+ * - Auto-resize based on content
+ * - Character count display
+ * - Max height constraint
+ * - Multiple variants
+ * - Error/Success states
+ * - Loading state
+ */
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ 
-    className, 
-    // Extract enhanced props to prevent them from being passed to DOM
+  ({
+    className,
+    wrapperClassName,
+    messageClassName,
     variant,
     size,
     error,
     success,
     loading,
-    autoResize,
+    autoResize = false,
     maxHeight,
-    characterCount,
-    ...props 
+    characterCount = false,
+    disabled,
+    maxLength,
+    value,
+    defaultValue,
+    onChange,
+    ...props
   }, ref) => {
+    const textareaRef = React.useRef<HTMLTextAreaElement>(null)
+    const [internalValue, setInternalValue] = React.useState(value || defaultValue || "")
+
+    // Merge refs
+    React.useImperativeHandle(ref, () => textareaRef.current!)
+
+    // Auto-resize logic
+    const adjustHeight = React.useCallback(() => {
+      const textarea = textareaRef.current
+      if (!textarea || !autoResize) return
+
+      // Reset height to get correct scrollHeight
+      textarea.style.height = 'auto'
+
+      // Set new height
+      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])
+
+    // Adjust height on value change
+    React.useEffect(() => {
+      adjustHeight()
+    }, [internalValue, adjustHeight])
+
+    // Handle value changes
+    React.useEffect(() => {
+      if (value !== undefined) {
+        setInternalValue(value)
+      }
+    }, [value])
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setInternalValue(e.target.value)
+      onChange?.(e)
+    }
+
+    // Character count
+    const currentLength = String(internalValue).length
+    const showCharCount = characterCount && (maxLength !== undefined || currentLength > 0)
+
+    // Messages
+    const errorMessage = typeof error === "string" ? error : undefined
+    const successMessage = typeof success === "string" ? success : undefined
+    const showMessage = errorMessage || successMessage
+
     return (
-      <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={ref}
-        {...props}
-      />
+      <div className={cn("moonui-theme", "space-y-1.5 w-full", wrapperClassName)}>
+        <div className="relative">
+          <textarea
+            ref={textareaRef}
+            className={cn(
+              textareaVariants({
+                variant,
+                size,
+                isError: !!error,
+                isSuccess: !!success
+              }),
+              loading && "pr-10",
+              className
+            )}
+            disabled={disabled || loading}
+            value={value}
+            defaultValue={defaultValue}
+            onChange={handleChange}
+            maxLength={maxLength}
+            aria-invalid={!!error || undefined}
+            aria-describedby={
+              errorMessage ? `${props.id || ''}-error` :
+              successMessage ? `${props.id || ''}-success` :
+              undefined
+            }
+            {...props}
+          />
+
+          {loading && (
+            <div className="absolute top-3 right-3 text-gray-500">
+              <Loader2 className="h-4 w-4 animate-spin" aria-hidden="true" />
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between">
+          {/* Error/Success Message */}
+          {showMessage && (
+            <p
+              className={cn(
+                "text-xs transition-all",
+                errorMessage && "text-error",
+                successMessage && "text-success",
+                messageClassName
+              )}
+              id={
+                errorMessage ? `${props.id || ''}-error` :
+                successMessage ? `${props.id || ''}-success` :
+                undefined
+              }
+            >
+              {errorMessage || successMessage}
+            </p>
+          )}
+
+          {/* Character Count */}
+          {showCharCount && (
+            <p className="text-xs text-muted-foreground dark:text-gray-500 ml-auto">
+              {currentLength}{maxLength !== undefined && ` / ${maxLength}`}
+            </p>
+          )}
+        </div>
+      </div>
     )
   }
 )