@moontra/moonui-pro 2.20.0 → 2.20.2

package/src/components/performance-debugger/index.tsx

@@ -348,8 +348,8 @@ const PerformanceDebuggerInternal: React.FC<PerformanceDebuggerProps> = ({
   }
 
   return (
-    <Card className={cn("w-full max-w-4xl", className)}>
-      <CardHeader>
+    <Card className={cn("w-full max-w-6xl", className)}>
+      <CardHeader className="pb-6">
         <div className="flex items-center justify-between">
           <div>
             <CardTitle className="flex items-center gap-2">
@@ -362,48 +362,72 @@ const PerformanceDebuggerInternal: React.FC<PerformanceDebuggerProps> = ({
           </div>
           
           <div className="flex items-center gap-2">
-            <Badge variant={isCapturing ? "secondary" : "secondary"} className="gap-1">
-              {isCapturing ? <Activity className="h-3 w-3 animate-pulse" /> : <Clock className="h-3 w-3" />}
-              {isCapturing ? "Live" : "Paused"}
-            </Badge>
-            
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => setIsCapturing(!isCapturing)}
-            >
-              {isCapturing ? "Pause" : "Start"}
-            </Button>
-            
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={capture}
-            >
-              <RefreshCw className="h-4 w-4" />
-            </Button>
-            
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={exportData}
-            >
-              <Download className="h-4 w-4" />
-            </Button>
+            <div className={cn(
+              "inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium",
+              isCapturing 
+                ? "border border-border bg-background text-foreground" 
+                : "bg-secondary text-secondary-foreground"
+            )}>
+              {isCapturing ? (
+                <Activity className="h-3 w-3 animate-pulse" />
+              ) : (
+                <Clock className="h-3 w-3" />
+              )}
+              <span>{isCapturing ? "Live" : "Paused"}</span>
+            </div>
             
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => setIsVisible(false)}
-            >
-              <EyeOff className="h-4 w-4" />
-            </Button>
+            <div className="flex items-center gap-1">
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                onClick={() => setIsCapturing(!isCapturing)}
+              >
+                {isCapturing ? (
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <rect x="6" y="4" width="4" height="16"></rect>
+                    <rect x="14" y="4" width="4" height="16"></rect>
+                  </svg>
+                ) : (
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                  </svg>
+                )}
+              </Button>
+              
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                onClick={capture}
+              >
+                <RefreshCw className="h-3.5 w-3.5" />
+              </Button>
+              
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                onClick={exportData}
+              >
+                <Download className="h-3.5 w-3.5" />
+              </Button>
+              
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={() => setIsVisible(false)}
+              >
+                <EyeOff className="h-3.5 w-3.5" />
+              </Button>
+            </div>
           </div>
         </div>
       </CardHeader>
 
       <CardContent>
-        <Tabs defaultValue="current" className="w-full">
+        <Tabs defaultValue="current" className="w-full mt-2">
           <TabsList className="grid w-full grid-cols-3">
             <TabsTrigger value="current">Current Metrics</TabsTrigger>
             <TabsTrigger value="history">History</TabsTrigger>

package/src/components/performance-monitor/index.tsx

@@ -351,7 +351,7 @@ const PerformanceMonitorInternal: React.FC<PerformanceMonitorProps> = ({
 
   return (
     <Card className={cn("w-full max-w-6xl", className)}>
-      <CardHeader>
+      <CardHeader className="pb-6">
         <div className="flex items-center justify-between">
           <div>
             <CardTitle className="flex items-center gap-2">
@@ -364,48 +364,62 @@ const PerformanceMonitorInternal: React.FC<PerformanceMonitorProps> = ({
           </div>
           
           <div className="flex items-center gap-2">
-            <Badge variant={autoRefresh ? "outline" : "secondary"} className="gap-1">
-              {autoRefresh ? <Activity className="h-3 w-3 animate-pulse" /> : <Timer className="h-3 w-3" />}
-              {autoRefresh ? "Live" : "Paused"}
-            </Badge>
+            <div className={cn(
+              "inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium",
+              autoRefresh 
+                ? "border border-border bg-background text-foreground" 
+                : "bg-secondary text-secondary-foreground"
+            )}>
+              {autoRefresh ? (
+                <Activity className="h-3 w-3 animate-pulse" />
+              ) : (
+                <Timer className="h-3 w-3" />
+              )}
+              <span>{autoRefresh ? "Live" : "Paused"}</span>
+            </div>
             
             {showAlerts && alerts.length > 0 && (
-              <Badge variant="destructive" className="gap-1">
+              <div className="inline-flex items-center gap-1 rounded-md bg-destructive px-2 py-0.5 text-xs font-medium text-destructive-foreground">
                 <AlertTriangle className="h-3 w-3" />
-                {alerts.length}
-              </Badge>
+                <span>{alerts.length}</span>
+              </div>
             )}
             
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={updateMetrics}
-              disabled={isRefreshing}
-            >
-              <RefreshCw className={cn("h-4 w-4", isRefreshing && "animate-spin")} />
-            </Button>
-            
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={exportMetrics}
-            >
-              <Download className="h-4 w-4" />
-            </Button>
-            
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => setIsVisible(false)}
-            >
-              <EyeOff className="h-4 w-4" />
-            </Button>
+            <div className="flex items-center gap-1">
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                onClick={updateMetrics}
+                disabled={isRefreshing}
+              >
+                <RefreshCw className={cn("h-3.5 w-3.5", isRefreshing && "animate-spin")} />
+              </Button>
+              
+              <Button
+                variant="outline"
+                size="icon"
+                className="h-7 w-7"
+                onClick={exportMetrics}
+              >
+                <Download className="h-3.5 w-3.5" />
+              </Button>
+              
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={() => setIsVisible(false)}
+              >
+                <EyeOff className="h-3.5 w-3.5" />
+              </Button>
+            </div>
           </div>
         </div>
       </CardHeader>
 
       <CardContent>
-        <Tabs defaultValue="overview" className="w-full">
+        <Tabs defaultValue="overview" className="w-full mt-2">
           <TabsList className="grid w-full grid-cols-4">
             <TabsTrigger value="overview">Overview</TabsTrigger>
             <TabsTrigger value="details">Details</TabsTrigger>

package/src/components/phone-number-input/index.tsx

@@ -100,8 +100,10 @@ function toInternationalFormat(countryCode: string, phoneNumber: string): string
   return `${country.dialCode}${cleaned}`
 }
 
+const defaultValue = { country: 'US', number: '' }
+
 export const MoonUIPhoneNumberInputPro = React.forwardRef<HTMLDivElement, PhoneNumberInputProps>(({
-  value = { country: 'US', number: '' },
+  value,
   onChange,
   defaultCountry = 'US',
   countries: customCountries,
@@ -123,31 +125,31 @@ export const MoonUIPhoneNumberInputPro = React.forwardRef<HTMLDivElement, PhoneN
   allowInternationalFormat = true,
   ...props
 }, ref) => {
-  const [isValid, setIsValid] = useState(false)
+  // Stable default value
+  const phoneValue = React.useMemo(() => {
+    return value || defaultValue
+  }, [value])
   const [isFocused, setIsFocused] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
   
   const countryList = customCountries || countries
-  const selectedCountry = countryList.find(c => c.code === value.country) || countryList[0]
+  const selectedCountry = countryList.find(c => c.code === phoneValue.country) || countryList[0]
 
-  // Doğrulama
-  useEffect(() => {
-    if (validateOnChange && value.number) {
-      const valid = validatePhoneNumber(value.number, value.country)
-      setIsValid(valid)
-    }
-  }, [value, validateOnChange])
+  // Doğrulama - useEffect yerine doğrudan hesapla
+  const isValid = validateOnChange && phoneValue.number 
+    ? validatePhoneNumber(phoneValue.number, phoneValue.country)
+    : false
 
   const handleCountryChange = (countryCode: string) => {
     const fullNumber = allowInternationalFormat 
-      ? toInternationalFormat(countryCode, value.number)
-      : value.number
+      ? toInternationalFormat(countryCode, phoneValue.number)
+      : phoneValue.number
       
     onChange?.({
       country: countryCode,
-      number: value.number,
+      number: phoneValue.number,
       fullNumber,
-      isValid: validatePhoneNumber(value.number, countryCode)
+      isValid: validatePhoneNumber(phoneValue.number, countryCode)
     })
   }
 
@@ -161,13 +163,13 @@ export const MoonUIPhoneNumberInputPro = React.forwardRef<HTMLDivElement, PhoneN
       newValue = formatPhoneNumber(cleaned, selectedCountry.format)
     }
     
-    const valid = validatePhoneNumber(newValue, value.country)
+    const valid = validatePhoneNumber(newValue, phoneValue.country)
     const fullNumber = allowInternationalFormat 
-      ? toInternationalFormat(value.country, newValue)
+      ? toInternationalFormat(phoneValue.country, newValue)
       : newValue
     
     onChange?.({
-      country: value.country,
+      country: phoneValue.country,
       number: newValue,
       fullNumber,
       isValid: valid
@@ -182,13 +184,13 @@ export const MoonUIPhoneNumberInputPro = React.forwardRef<HTMLDivElement, PhoneN
     const cleaned = pastedText.replace(/\D/g, '')
     const formatted = formatPhoneNumber(cleaned, selectedCountry.format)
     
-    const valid = validatePhoneNumber(formatted, value.country)
+    const valid = validatePhoneNumber(formatted, phoneValue.country)
     const fullNumber = allowInternationalFormat 
-      ? toInternationalFormat(value.country, formatted)
+      ? toInternationalFormat(phoneValue.country, formatted)
       : formatted
     
     onChange?.({
-      country: value.country,
+      country: phoneValue.country,
       number: formatted,
       fullNumber,
       isValid: valid
@@ -196,7 +198,7 @@ export const MoonUIPhoneNumberInputPro = React.forwardRef<HTMLDivElement, PhoneN
   }
 
   return (
-    <div ref={ref} className={cn("space-y-2", className)} {...props}>
+    <div ref={ref} className={cn("space-y-2", className)}>
       {label && (
         <Label htmlFor="phone-number" className={labelClassName}>
           {label}
@@ -207,7 +209,7 @@ export const MoonUIPhoneNumberInputPro = React.forwardRef<HTMLDivElement, PhoneN
       <div className="flex gap-2">
         {/* Ülke Seçici */}
         <Select
-          value={value.country}
+          value={phoneValue.country}
           onValueChange={handleCountryChange}
           disabled={disabled}
         >
@@ -245,7 +247,7 @@ export const MoonUIPhoneNumberInputPro = React.forwardRef<HTMLDivElement, PhoneN
             ref={inputRef}
             id="phone-number"
             type="tel"
-            value={value.number}
+            value={phoneValue.number}
             onChange={handleNumberChange}
             onPaste={handlePaste}
             onFocus={() => setIsFocused(true)}
@@ -260,7 +262,7 @@ export const MoonUIPhoneNumberInputPro = React.forwardRef<HTMLDivElement, PhoneN
           />
           
           {/* Doğrulama İkonu */}
-          {showValidationIcon && value.number && (
+          {showValidationIcon && phoneValue.number && (
             <div className="absolute right-3 top-1/2 -translate-y-1/2">
               <AnimatePresence mode="wait">
                 {isValid ? (
@@ -318,14 +320,14 @@ export const MoonUIPhoneNumberInputPro = React.forwardRef<HTMLDivElement, PhoneN
       )}
 
       {/* Uluslararası Format Gösterimi */}
-      {allowInternationalFormat && value.number && isValid && (
+      {allowInternationalFormat && phoneValue.number && isValid && (
         <motion.div
           initial={{ opacity: 0, y: -10 }}
           animate={{ opacity: 1, y: 0 }}
           className="flex items-center gap-2 text-sm text-muted-foreground"
         >
           <Globe className="w-4 h-4" />
-          <span>International: {toInternationalFormat(value.country, value.number)}</span>
+          <span>International: {toInternationalFormat(phoneValue.country, phoneValue.number)}</span>
         </motion.div>
       )}
     </div>
@@ -335,4 +337,7 @@ export const MoonUIPhoneNumberInputPro = React.forwardRef<HTMLDivElement, PhoneN
 MoonUIPhoneNumberInputPro.displayName = "MoonUIPhoneNumberInputPro"
 
 // Ülke listesini de export edelim
-export { countries as phoneCountries }
+export { countries as phoneCountries }
+
+// Basit versiyon
+export { MoonUIPhoneNumberInputSimple } from "./phone-number-input-simple"

package/src/components/phone-number-input/phone-number-input-simple.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import React, { useState, useRef } from "react"
+import { cn } from "../../lib/utils"
+import { Input } from "../ui/input"
+import { Label } from "../ui/label"
+import { Phone, Check, X } from "lucide-react"
+import { motion, AnimatePresence } from "framer-motion"
+
+export interface PhoneNumberInputSimpleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size'> {
+  value?: string
+  onChange?: (value: string) => void
+  label?: string
+  error?: string
+  helperText?: string
+  required?: boolean
+  showValidationIcon?: boolean
+  inputClassName?: string
+  labelClassName?: string
+  errorClassName?: string
+  size?: 'sm' | 'md' | 'lg'
+}
+
+// Basit telefon numarası doğrulama
+function validatePhoneNumber(number: string): boolean {
+  if (!number) return false
+  const cleaned = number.replace(/\D/g, '')
+  return cleaned.length >= 10 && cleaned.length <= 15
+}
+
+// Telefon numarası formatlama
+function formatPhoneNumber(number: string): string {
+  const cleaned = number.replace(/\D/g, '')
+  
+  // Türkiye formatı için basit formatlama
+  if (cleaned.length <= 3) {
+    return cleaned
+  } else if (cleaned.length <= 6) {
+    return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`
+  } else if (cleaned.length <= 10) {
+    return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)} ${cleaned.slice(6)}`
+  } else {
+    return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)} ${cleaned.slice(6, 8)} ${cleaned.slice(8, 10)}`
+  }
+}
+
+export const MoonUIPhoneNumberInputSimple = React.forwardRef<HTMLInputElement, PhoneNumberInputSimpleProps>(({
+  value = '',
+  onChange,
+  label,
+  error,
+  helperText,
+  required,
+  showValidationIcon = true,
+  className,
+  inputClassName,
+  labelClassName,
+  errorClassName,
+  disabled,
+  placeholder = "(555) 123 45 67",
+  size,
+  ...props
+}, ref) => {
+  const [isFocused, setIsFocused] = useState(false)
+  const [localValue, setLocalValue] = useState(value)
+  const isValid = validatePhoneNumber(localValue)
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value
+    const formattedValue = formatPhoneNumber(newValue)
+    
+    setLocalValue(formattedValue)
+    onChange?.(formattedValue)
+  }
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {label && (
+        <Label htmlFor={props.id} className={labelClassName}>
+          {label}
+          {required && <span className="text-destructive ml-1">*</span>}
+        </Label>
+      )}
+      
+      <div className="relative">
+        <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+          <Phone className="h-4 w-4" />
+        </div>
+        
+        <Input
+          ref={ref}
+          type="tel"
+          value={localValue}
+          onChange={handleChange}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          placeholder={placeholder}
+          className={cn(
+            "pl-10 pr-10",
+            error && "border-destructive",
+            inputClassName
+          )}
+          disabled={disabled}
+          {...props}
+        />
+        
+        {/* Doğrulama İkonu */}
+        {showValidationIcon && localValue && (
+          <div className="absolute right-3 top-1/2 -translate-y-1/2">
+            <AnimatePresence mode="wait">
+              {isValid ? (
+                <motion.div
+                  key="valid"
+                  initial={{ scale: 0, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  exit={{ scale: 0, opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <Check className="w-4 h-4 text-green-500" />
+                </motion.div>
+              ) : (
+                <motion.div
+                  key="invalid"
+                  initial={{ scale: 0, opacity: 0 }}
+                  animate={{ scale: 1, opacity: 1 }}
+                  exit={{ scale: 0, opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <X className="w-4 h-4 text-destructive" />
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        )}
+      </div>
+
+      {/* Helper Text veya Error */}
+      {(error || helperText) && (
+        <AnimatePresence mode="wait">
+          {error ? (
+            <motion.p
+              key="error"
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              className={cn("text-sm text-destructive", errorClassName)}
+            >
+              {error}
+            </motion.p>
+          ) : (
+            <motion.p
+              key="helper"
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 0, height: 0 }}
+              className="text-sm text-muted-foreground"
+            >
+              {helperText}
+            </motion.p>
+          )}
+        </AnimatePresence>
+      )}
+    </div>
+  )
+})
+
+MoonUIPhoneNumberInputSimple.displayName = "MoonUIPhoneNumberInputSimple"