react-datepicker-bkrdmrcioglu 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,266 @@
+# React DatePicker
+
+Modern, özelleştirilebilir ve kullanıcı dostu React DatePicker komponenti. Next.js ve Tailwind CSS ile geliştirilmiştir.
+
+## 🚀 Özellikler
+
+- ✅ Modern ve şık tasarım
+- ✅ **Dark Mode** - Tam karanlık mod desteği
+- ✅ **11 Dil Desteği** - English, Türkçe, Deutsch, Français, Español, Italiano, Português, Русский, 日本語, 中文, العربية
+- ✅ Tarih seçimi
+- ✅ Tarih ve saat seçimi
+- ✅ Tarih aralığı seçimi (DateRangePicker)
+- ✅ Min/Max tarih kısıtlaması
+- ✅ Devre dışı bırakılabilir
+- ✅ TypeScript desteği
+- ✅ Tamamen özelleştirilebilir
+- ✅ Responsive tasarım
+
+## 📦 Kurulum
+
+### NPM ile Kurulum
+
+```bash
+npm install react-datepicker-bkrdmrcioglu
+# veya
+yarn add react-datepicker-bkrdmrcioglu
+# veya
+pnpm add react-datepicker-bkrdmrcioglu
+```
+
+### Gereksinimler
+
+Bu paket Tailwind CSS kullanır. Projenizde Tailwind CSS kurulu olmalıdır:
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+`tailwind.config.js` dosyanıza şunu ekleyin:
+
+```js
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/react-datepicker-bkrdmrcioglu/**/*.{js,jsx,ts,tsx}"
+  ],
+  darkMode: 'class', // Dark mode için
+  // ... diğer ayarlarınız
+}
+```
+
+## 🏃 Geliştirme (Bu Repo İçin)
+
+```bash
+npm install
+npm run dev
+```
+
+Tarayıcınızda [http://localhost:3000](http://localhost:3000) adresini açın.
+
+## 📖 Kullanım
+
+### Temel Kullanım
+
+```tsx
+import { DatePicker } from 'react-datepicker-bkrdmrcioglu';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [date, setDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      value={date}
+      onChange={setDate}
+      language="en" // Default: 'en'
+    />
+  );
+}
+```
+
+### Dil Desteği
+
+```tsx
+import { DatePicker } from 'react-datepicker-bkrdmrcioglu';
+import type { Language } from 'react-datepicker-bkrdmrcioglu';
+
+// İngilizce (varsayılan)
+<DatePicker language="en" />
+
+// Türkçe
+<DatePicker language="tr" />
+
+// Almanca
+<DatePicker language="de" />
+
+// Fransızca
+<DatePicker language="fr" />
+
+// İspanyolca
+<DatePicker language="es" />
+
+// İtalyanca
+<DatePicker language="it" />
+
+// Portekizce
+<DatePicker language="pt" />
+
+// Rusça
+<DatePicker language="ru" />
+
+// Japonca
+<DatePicker language="ja" />
+
+// Çince
+<DatePicker language="zh" />
+
+// Arapça
+<DatePicker language="ar" />
+```
+
+### Tarih ve Saat Seçimi
+
+```tsx
+<DatePicker
+  value={date}
+  onChange={setDate}
+  showTime={true}
+  placeholder="Tarih ve saat seçin..."
+/>
+```
+
+### Min/Max Tarih Kısıtlaması
+
+```tsx
+const minDate = new Date();
+minDate.setDate(minDate.getDate() - 7);
+const maxDate = new Date();
+maxDate.setDate(maxDate.getDate() + 30);
+
+<DatePicker
+  value={date}
+  onChange={setDate}
+  minDate={minDate}
+  maxDate={maxDate}
+/>
+```
+
+### Tarih Aralığı Seçimi
+
+```tsx
+import { DateRangePicker } from 'react-datepicker-bkrdmrcioglu';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  return (
+    <DateRangePicker
+      startDate={startDate}
+      endDate={endDate}
+      onChange={(start, end) => {
+        setStartDate(start);
+        setEndDate(end);
+      }}
+    />
+  );
+}
+```
+
+## 🔧 API Referansı
+
+### DatePicker Props
+
+| Prop | Tip | Varsayılan | Açıklama |
+|------|-----|------------|----------|
+| `value` | `Date \| null` | `undefined` | Seçili tarih |
+| `onChange` | `(date: Date \| null) => void` | `undefined` | Tarih değiştiğinde çağrılır |
+| `placeholder` | `string` | `"Tarih seçin..."` | Input placeholder metni |
+| `minDate` | `Date` | `undefined` | Minimum seçilebilir tarih |
+| `maxDate` | `Date` | `undefined` | Maksimum seçilebilir tarih |
+| `disabled` | `boolean` | `false` | Devre dışı bırakma |
+| `className` | `string` | `""` | Ek CSS sınıfları |
+| `showTime` | `boolean` | `false` | Saat seçimi göster |
+| `format` | `string` | `"DD/MM/YYYY"` | Tarih formatı |
+| `language` | `Language` | `"en"` | Dil seçimi (en, tr, de, fr, es, it, pt, ru, ja, zh, ar) |
+
+### DateRangePicker Props
+
+| Prop | Tip | Varsayılan | Açıklama |
+|------|-----|------------|----------|
+| `startDate` | `Date \| null` | `undefined` | Başlangıç tarihi |
+| `endDate` | `Date \| null` | `undefined` | Bitiş tarihi |
+| `onChange` | `(start: Date \| null, end: Date \| null) => void` | `undefined` | Tarih değiştiğinde çağrılır |
+| `placeholder` | `string` | `"Tarih aralığı seçin..."` | Placeholder metni |
+| `minDate` | `Date` | `undefined` | Minimum seçilebilir tarih |
+| `maxDate` | `Date` | `undefined` | Maksimum seçilebilir tarih |
+| `disabled` | `boolean` | `false` | Devre dışı bırakma |
+| `className` | `string` | `""` | Ek CSS sınıfları |
+
+## 🎨 Özelleştirme
+
+Komponentler Tailwind CSS kullanılarak oluşturulmuştur. Stilleri özelleştirmek için `components/DatePicker.tsx` dosyasındaki className'leri değiştirebilirsiniz.
+
+### Dark Mode
+
+Dark mode otomatik olarak sistem tercihine göre ayarlanır veya `DarkModeToggle` komponenti ile manuel olarak kontrol edilebilir. Tüm komponentler dark mode'u destekler.
+
+**Önemli:** Dark mode için HTML elementine `dark` class'ını eklemeniz gerekir:
+
+```tsx
+import { DarkModeToggle } from 'react-datepicker-bkrdmrcioglu';
+
+function MyComponent() {
+  return <DarkModeToggle />;
+}
+```
+
+Dark mode'u manuel olarak kontrol etmek için:
+
+```tsx
+// Dark mode'u aç
+document.documentElement.classList.add('dark');
+
+// Dark mode'u kapat
+document.documentElement.classList.remove('dark');
+```
+
+### Dil Seçici
+
+Dil seçimi için `LanguageSelector` komponentini kullanabilirsiniz:
+
+```tsx
+import { LanguageSelector, DatePicker } from 'react-datepicker-bkrdmrcioglu';
+import type { Language } from 'react-datepicker-bkrdmrcioglu';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [language, setLanguage] = useState<Language>('en');
+  
+  return (
+    <>
+      <LanguageSelector value={language} onChange={setLanguage} />
+      <DatePicker language={language} />
+    </>
+  );
+}
+```
+
+## 📝 Lisans
+
+MIT License - Özgürce kullanabilirsiniz.
+
+## 🤝 Katkıda Bulunma
+
+Katkılarınızı bekliyoruz! Lütfen bir issue açın veya pull request gönderin.
+
+## 📧 İletişim
+
+Sorularınız için GitHub Issues kullanabilirsiniz.
+
+---
+
+⭐ Bu projeyi beğendiyseniz yıldız vermeyi unutmayın!

package/components/DarkModeToggle.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export default function DarkModeToggle() {
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    // Check initial theme
+    const darkMode = localStorage.getItem('darkMode') === 'true' || 
+                     (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    setIsDark(darkMode);
+    
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, []);
+
+  const toggleDarkMode = () => {
+    const newDarkMode = !isDark;
+    setIsDark(newDarkMode);
+    localStorage.setItem('darkMode', String(newDarkMode));
+    
+    if (newDarkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  };
+
+  return (
+    <button
+      onClick={toggleDarkMode}
+      className="relative p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+      aria-label="Toggle dark mode"
+      type="button"
+    >
+      {isDark ? (
+        <svg className="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
+        </svg>
+      ) : (
+        <svg className="w-5 h-5 text-gray-700" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+        </svg>
+      )}
+    </button>
+  );
+}
+

package/components/DatePicker.tsx

@@ -0,0 +1,350 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { getTranslations, type Language } from '../lib/i18n';
+
+export interface DatePickerProps {
+  value?: Date | null;
+  onChange?: (date: Date | null) => void;
+  placeholder?: string;
+  minDate?: Date;
+  maxDate?: Date;
+  disabled?: boolean;
+  className?: string;
+  showTime?: boolean;
+  format?: string;
+  language?: Language;
+}
+
+export default function DatePicker({
+  value,
+  onChange,
+  placeholder,
+  minDate,
+  maxDate,
+  disabled = false,
+  className = '',
+  showTime = false,
+  format = 'DD/MM/YYYY',
+  language = 'en'
+}: DatePickerProps) {
+  const t = getTranslations(language);
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | null>(value || null);
+  const [time, setTime] = useState({ hours: 0, minutes: 0 });
+  const pickerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (value) {
+      setSelectedDate(value);
+      setTime({
+        hours: value.getHours(),
+        minutes: value.getMinutes()
+      });
+    }
+  }, [value]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (pickerRef.current && !pickerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const formatDate = (date: Date | null): string => {
+    if (!date) return '';
+    
+    if (format === 'DD/MM/YYYY') {
+      const day = date.getDate().toString().padStart(2, '0');
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');
+      const year = date.getFullYear();
+      const timeStr = showTime 
+        ? ` ${time.hours.toString().padStart(2, '0')}:${time.minutes.toString().padStart(2, '0')}`
+        : '';
+      return `${day}/${month}/${year}${timeStr}`;
+    }
+    
+    return date.toLocaleDateString(language === 'en' ? 'en-US' : language);
+  };
+
+  const getDaysInMonth = (date: Date): number => {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+  };
+
+  const getFirstDayOfMonth = (date: Date): number => {
+    const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
+    return firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1; // Monday = 0
+  };
+
+  const isDateDisabled = (date: Date): boolean => {
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    return false;
+  };
+
+  const isSameDay = (date1: Date, date2: Date): boolean => {
+    return (
+      date1.getDate() === date2.getDate() &&
+      date1.getMonth() === date2.getMonth() &&
+      date1.getFullYear() === date2.getFullYear()
+    );
+  };
+
+  const handleDateSelect = (day: number) => {
+    const newDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
+    
+    if (showTime) {
+      newDate.setHours(time.hours, time.minutes);
+    }
+    
+    if (!isDateDisabled(newDate)) {
+      setSelectedDate(newDate);
+      onChange?.(newDate);
+      if (!showTime) {
+        setIsOpen(false);
+      }
+    }
+  };
+
+  const handleTimeChange = (type: 'hours' | 'minutes', value: number) => {
+    const newTime = { ...time, [type]: value };
+    setTime(newTime);
+    
+    if (selectedDate) {
+      const newDate = new Date(selectedDate);
+      newDate.setHours(newTime.hours, newTime.minutes);
+      setSelectedDate(newDate);
+      onChange?.(newDate);
+    }
+  };
+
+  const navigateMonth = (direction: 'prev' | 'next') => {
+    setCurrentMonth(prev => {
+      const newDate = new Date(prev);
+      if (direction === 'prev') {
+        newDate.setMonth(prev.getMonth() - 1);
+      } else {
+        newDate.setMonth(prev.getMonth() + 1);
+      }
+      return newDate;
+    });
+  };
+
+  const goToToday = () => {
+    const today = new Date();
+    setCurrentMonth(today);
+    if (!isDateDisabled(today)) {
+      setSelectedDate(today);
+      onChange?.(today);
+    }
+  };
+
+  const clearDate = () => {
+    setSelectedDate(null);
+    onChange?.(null);
+  };
+
+  const daysInMonth = getDaysInMonth(currentMonth);
+  const firstDay = getFirstDayOfMonth(currentMonth);
+  const days: (number | null)[] = [];
+
+  // Empty days
+  for (let i = 0; i < firstDay; i++) {
+    days.push(null);
+  }
+
+  // Month days
+  for (let day = 1; day <= daysInMonth; day++) {
+    days.push(day);
+  }
+
+  const defaultPlaceholder = showTime ? t.selectTime : t.selectDate;
+
+  return (
+    <div ref={pickerRef} className={`relative ${className}`}>
+      <div className="relative">
+        <input
+          type="text"
+          value={formatDate(selectedDate)}
+          placeholder={placeholder || defaultPlaceholder}
+          readOnly
+          disabled={disabled}
+          onClick={() => !disabled && setIsOpen(!isOpen)}
+          className={`
+            w-full px-4 py-2.5 rounded-lg border border-gray-300 
+            bg-white text-gray-900 placeholder-gray-400
+            dark:bg-gray-800 dark:text-gray-100 dark:border-gray-600 dark:placeholder-gray-500
+            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
+            dark:focus:ring-blue-400
+            disabled:bg-gray-100 disabled:cursor-not-allowed
+            dark:disabled:bg-gray-700 dark:disabled:text-gray-400
+            cursor-pointer transition-all
+            ${selectedDate ? 'font-medium' : ''}
+          `}
+        />
+        <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
+          <svg
+            className="w-5 h-5 text-gray-400 dark:text-gray-500"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+            />
+          </svg>
+        </div>
+      </div>
+
+      {isOpen && (
+        <div className="absolute z-50 mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 p-4 w-80">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-4">
+            <button
+              onClick={() => navigateMonth('prev')}
+              className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
+              type="button"
+            >
+              <svg className="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+            
+            <div className="flex items-center gap-2">
+              <span className="font-semibold text-gray-900 dark:text-gray-100">
+                {t.months[currentMonth.getMonth()]} {currentMonth.getFullYear()}
+              </span>
+            </div>
+            
+            <button
+              onClick={() => navigateMonth('next')}
+              className="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
+              type="button"
+            >
+              <svg className="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Weekday Headers */}
+          <div className="grid grid-cols-7 gap-1 mb-2">
+            {t.weekdaysShort.map(day => (
+              <div key={day} className="text-center text-xs font-medium text-gray-500 dark:text-gray-400 py-1">
+                {day}
+              </div>
+            ))}
+          </div>
+
+          {/* Calendar Days */}
+          <div className="grid grid-cols-7 gap-1">
+            {days.map((day, index) => {
+              if (day === null) {
+                return <div key={index} className="aspect-square" />;
+              }
+
+              const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day);
+              const isDisabled = isDateDisabled(date);
+              const isSelected = selectedDate && isSameDay(date, selectedDate);
+              const isToday = isSameDay(date, new Date());
+
+              return (
+                <button
+                  key={index}
+                  onClick={() => handleDateSelect(day)}
+                  disabled={isDisabled}
+                  className={`
+                    aspect-square rounded-lg text-sm font-medium transition-all
+                    ${isSelected
+                      ? 'bg-blue-600 dark:bg-blue-500 text-white shadow-md'
+                      : isToday
+                      ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 font-semibold'
+                      : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                    }
+                    ${isDisabled ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer'}
+                  `}
+                  type="button"
+                >
+                  {day}
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Time Picker */}
+          {showTime && (
+            <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+              <div className="flex items-center justify-center gap-4">
+                <div className="flex items-center gap-2">
+                  <label className="text-sm text-gray-600 dark:text-gray-400">{t.hours}:</label>
+                  <input
+                    type="number"
+                    min="0"
+                    max="23"
+                    value={time.hours}
+                    onChange={(e) => handleTimeChange('hours', parseInt(e.target.value) || 0)}
+                    className="w-16 px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded text-center focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
+                  />
+                </div>
+                <span className="text-gray-400 dark:text-gray-500">:</span>
+                <div className="flex items-center gap-2">
+                  <label className="text-sm text-gray-600 dark:text-gray-400">{t.minutes}:</label>
+                  <input
+                    type="number"
+                    min="0"
+                    max="59"
+                    value={time.minutes}
+                    onChange={(e) => handleTimeChange('minutes', parseInt(e.target.value) || 0)}
+                    className="w-16 px-2 py-1 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded text-center focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Footer Actions */}
+          <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
+            <button
+              onClick={goToToday}
+              className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium transition-colors"
+              type="button"
+            >
+              {t.today}
+            </button>
+            {selectedDate && (
+              <button
+                onClick={clearDate}
+                className="text-sm text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 font-medium transition-colors"
+                type="button"
+              >
+                {t.clear}
+              </button>
+            )}
+            {showTime && (
+              <button
+                onClick={() => setIsOpen(false)}
+                className="px-4 py-1.5 bg-blue-600 dark:bg-blue-500 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors text-sm font-medium"
+                type="button"
+              >
+                {t.ok}
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/DateRangePicker.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import DatePicker from './DatePicker';
+import { getTranslations, type Language } from '../lib/i18n';
+
+export interface DateRangePickerProps {
+  startDate?: Date | null;
+  endDate?: Date | null;
+  onChange?: (startDate: Date | null, endDate: Date | null) => void;
+  placeholder?: string;
+  minDate?: Date;
+  maxDate?: Date;
+  disabled?: boolean;
+  className?: string;
+  language?: Language;
+}
+
+export default function DateRangePicker({
+  startDate,
+  endDate,
+  onChange,
+  placeholder,
+  minDate,
+  maxDate,
+  disabled = false,
+  className = '',
+  language = 'en'
+}: DateRangePickerProps) {
+  const t = getTranslations(language);
+  const [localStartDate, setLocalStartDate] = useState<Date | null>(startDate || null);
+  const [localEndDate, setLocalEndDate] = useState<Date | null>(endDate || null);
+
+  useEffect(() => {
+    setLocalStartDate(startDate || null);
+    setLocalEndDate(endDate || null);
+  }, [startDate, endDate]);
+
+  const handleStartDateChange = (date: Date | null) => {
+    setLocalStartDate(date);
+    if (date && localEndDate && date > localEndDate) {
+      setLocalEndDate(null);
+      onChange?.(date, null);
+    } else {
+      onChange?.(date, localEndDate);
+    }
+  };
+
+  const handleEndDateChange = (date: Date | null) => {
+    setLocalEndDate(date);
+    onChange?.(localStartDate, date);
+  };
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      <DatePicker
+        value={localStartDate}
+        onChange={handleStartDateChange}
+        placeholder={t.startDate}
+        minDate={minDate}
+        maxDate={localEndDate || maxDate}
+        disabled={disabled}
+        className="flex-1"
+        language={language}
+      />
+      <span className="text-gray-400 dark:text-gray-500">-</span>
+      <DatePicker
+        value={localEndDate}
+        onChange={handleEndDateChange}
+        placeholder={t.endDate}
+        minDate={localStartDate || minDate}
+        maxDate={maxDate}
+        disabled={disabled}
+        className="flex-1"
+        language={language}
+      />
+    </div>
+  );
+}

package/components/LanguageSelector.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { languageNames, type Language } from '../lib/i18n';
+
+interface LanguageSelectorProps {
+  value: Language;
+  onChange: (lang: Language) => void;
+}
+
+export default function LanguageSelector({ value, onChange }: LanguageSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const selectorRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (selectorRef.current && !selectorRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const languages: Language[] = ['en', 'tr', 'de', 'fr', 'es', 'it', 'pt', 'ru', 'ja', 'zh', 'ar'];
+
+  return (
+    <div ref={selectorRef} className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 px-4 py-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+        type="button"
+      >
+        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
+        </svg>
+        <span className="font-medium">{languageNames[value]}</span>
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div className="absolute z-50 mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-2 min-w-[200px] max-h-64 overflow-y-auto">
+          {languages.map((lang) => (
+            <button
+              key={lang}
+              onClick={() => {
+                onChange(lang);
+                setIsOpen(false);
+              }}
+              className={`
+                w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors
+                ${value === lang ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 font-medium' : 'text-gray-700 dark:text-gray-300'}
+              `}
+              type="button"
+            >
+              {languageNames[lang]}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+

package/components/index.ts

@@ -0,0 +1,11 @@
+export { default as DatePicker } from './DatePicker';
+export { default as DateRangePicker } from './DateRangePicker';
+export { default as DarkModeToggle } from './DarkModeToggle';
+export { default as LanguageSelector } from './LanguageSelector';
+export type { DatePickerProps } from './DatePicker';
+export type { DateRangePickerProps } from './DateRangePicker';
+
+// Export i18n utilities
+export { getTranslations, languageNames } from '../lib/i18n';
+export type { Language, Translations } from '../lib/i18n';
+

package/lib/i18n.ts

@@ -0,0 +1,237 @@
+export type Language = 'en' | 'tr' | 'de' | 'fr' | 'es' | 'it' | 'pt' | 'ru' | 'ja' | 'zh' | 'ar';
+
+export interface Translations {
+  months: string[];
+  weekdays: string[];
+  weekdaysShort: string[];
+  today: string;
+  clear: string;
+  selectDate: string;
+  selectTime: string;
+  selectRange: string;
+  startDate: string;
+  endDate: string;
+  hours: string;
+  minutes: string;
+  ok: string;
+}
+
+export const translations: Record<Language, Translations> = {
+  en: {
+    months: [
+      'January', 'February', 'March', 'April', 'May', 'June',
+      'July', 'August', 'September', 'October', 'November', 'December'
+    ],
+    weekdays: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+    weekdaysShort: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    today: 'Today',
+    clear: 'Clear',
+    selectDate: 'Select a date...',
+    selectTime: 'Select date and time...',
+    selectRange: 'Select date range...',
+    startDate: 'Start',
+    endDate: 'End',
+    hours: 'Hours',
+    minutes: 'Minutes',
+    ok: 'OK'
+  },
+  tr: {
+    months: [
+      'Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran',
+      'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'
+    ],
+    weekdays: ['Pazartesi', 'Salı', 'Çarşamba', 'Perşembe', 'Cuma', 'Cumartesi', 'Pazar'],
+    weekdaysShort: ['Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt', 'Paz'],
+    today: 'Bugün',
+    clear: 'Temizle',
+    selectDate: 'Bir tarih seçin...',
+    selectTime: 'Tarih ve saat seçin...',
+    selectRange: 'Tarih aralığı seçin...',
+    startDate: 'Başlangıç',
+    endDate: 'Bitiş',
+    hours: 'Saat',
+    minutes: 'Dakika',
+    ok: 'Tamam'
+  },
+  de: {
+    months: [
+      'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
+      'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'
+    ],
+    weekdays: ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'],
+    weekdaysShort: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
+    today: 'Heute',
+    clear: 'Löschen',
+    selectDate: 'Datum auswählen...',
+    selectTime: 'Datum und Uhrzeit auswählen...',
+    selectRange: 'Datumsbereich auswählen...',
+    startDate: 'Anfang',
+    endDate: 'Ende',
+    hours: 'Stunden',
+    minutes: 'Minuten',
+    ok: 'OK'
+  },
+  fr: {
+    months: [
+      'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
+      'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
+    ],
+    weekdays: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'],
+    weekdaysShort: ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'],
+    today: "Aujourd'hui",
+    clear: 'Effacer',
+    selectDate: 'Sélectionner une date...',
+    selectTime: 'Sélectionner la date et l\'heure...',
+    selectRange: 'Sélectionner une plage de dates...',
+    startDate: 'Début',
+    endDate: 'Fin',
+    hours: 'Heures',
+    minutes: 'Minutes',
+    ok: 'OK'
+  },
+  es: {
+    months: [
+      'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
+      'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
+    ],
+    weekdays: ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'],
+    weekdaysShort: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'],
+    today: 'Hoy',
+    clear: 'Limpiar',
+    selectDate: 'Seleccionar una fecha...',
+    selectTime: 'Seleccionar fecha y hora...',
+    selectRange: 'Seleccionar rango de fechas...',
+    startDate: 'Inicio',
+    endDate: 'Fin',
+    hours: 'Horas',
+    minutes: 'Minutos',
+    ok: 'OK'
+  },
+  it: {
+    months: [
+      'Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno',
+      'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'
+    ],
+    weekdays: ['Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato', 'Domenica'],
+    weekdaysShort: ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'],
+    today: 'Oggi',
+    clear: 'Cancella',
+    selectDate: 'Seleziona una data...',
+    selectTime: 'Seleziona data e ora...',
+    selectRange: 'Seleziona intervallo di date...',
+    startDate: 'Inizio',
+    endDate: 'Fine',
+    hours: 'Ore',
+    minutes: 'Minuti',
+    ok: 'OK'
+  },
+  pt: {
+    months: [
+      'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
+      'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'
+    ],
+    weekdays: ['Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado', 'Domingo'],
+    weekdaysShort: ['Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
+    today: 'Hoje',
+    clear: 'Limpar',
+    selectDate: 'Selecione uma data...',
+    selectTime: 'Selecione data e hora...',
+    selectRange: 'Selecione intervalo de datas...',
+    startDate: 'Início',
+    endDate: 'Fim',
+    hours: 'Horas',
+    minutes: 'Minutos',
+    ok: 'OK'
+  },
+  ru: {
+    months: [
+      'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
+      'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
+    ],
+    weekdays: ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'],
+    weekdaysShort: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
+    today: 'Сегодня',
+    clear: 'Очистить',
+    selectDate: 'Выберите дату...',
+    selectTime: 'Выберите дату и время...',
+    selectRange: 'Выберите диапазон дат...',
+    startDate: 'Начало',
+    endDate: 'Конец',
+    hours: 'Часы',
+    minutes: 'Минуты',
+    ok: 'ОК'
+  },
+  ja: {
+    months: [
+      '1月', '2月', '3月', '4月', '5月', '6月',
+      '7月', '8月', '9月', '10月', '11月', '12月'
+    ],
+    weekdays: ['月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日'],
+    weekdaysShort: ['月', '火', '水', '木', '金', '土', '日'],
+    today: '今日',
+    clear: 'クリア',
+    selectDate: '日付を選択...',
+    selectTime: '日付と時刻を選択...',
+    selectRange: '日付範囲を選択...',
+    startDate: '開始',
+    endDate: '終了',
+    hours: '時',
+    minutes: '分',
+    ok: 'OK'
+  },
+  zh: {
+    months: [
+      '一月', '二月', '三月', '四月', '五月', '六月',
+      '七月', '八月', '九月', '十月', '十一月', '十二月'
+    ],
+    weekdays: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
+    weekdaysShort: ['一', '二', '三', '四', '五', '六', '日'],
+    today: '今天',
+    clear: '清除',
+    selectDate: '选择日期...',
+    selectTime: '选择日期和时间...',
+    selectRange: '选择日期范围...',
+    startDate: '开始',
+    endDate: '结束',
+    hours: '小时',
+    minutes: '分钟',
+    ok: '确定'
+  },
+  ar: {
+    months: [
+      'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+      'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+    ],
+    weekdays: ['الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت', 'الأحد'],
+    weekdaysShort: ['اث', 'ثل', 'أر', 'خم', 'جم', 'سب', 'أح'],
+    today: 'اليوم',
+    clear: 'مسح',
+    selectDate: 'اختر تاريخاً...',
+    selectTime: 'اختر التاريخ والوقت...',
+    selectRange: 'اختر نطاق التاريخ...',
+    startDate: 'البداية',
+    endDate: 'النهاية',
+    hours: 'ساعات',
+    minutes: 'دقائق',
+    ok: 'موافق'
+  }
+};
+
+export const getTranslations = (lang: Language = 'en'): Translations => {
+  return translations[lang] || translations.en;
+};
+
+export const languageNames: Record<Language, string> = {
+  en: 'English',
+  tr: 'Türkçe',
+  de: 'Deutsch',
+  fr: 'Français',
+  es: 'Español',
+  it: 'Italiano',
+  pt: 'Português',
+  ru: 'Русский',
+  ja: '日本語',
+  zh: '中文',
+  ar: 'العربية'
+};
+

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "react-datepicker-bkrdmrcioglu",
+  "version": "0.1.0",
+  "description": "Modern, customizable and user-friendly React DatePicker component with dark mode and multi-language support. Built with Next.js and Tailwind CSS.",
+  "main": "components/index.ts",
+  "types": "components/index.ts",
+  "files": [
+    "components",
+    "lib",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "react",
+    "datepicker",
+    "date-picker",
+    "calendar",
+    "tailwindcss",
+    "typescript",
+    "date-range-picker",
+    "dark-mode",
+    "i18n",
+    "multi-language"
+  ],
+  "author": "bkrdmrcioglu <bkrdmrcioglu@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bkrdmrcioglu/react-datepicker.git"
+  },
+  "bugs": {
+    "url": "https://github.com/bkrdmrcioglu/react-datepicker/issues"
+  },
+  "homepage": "https://github.com/bkrdmrcioglu/react-datepicker#readme",
+  "private": false,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.1",
+    "next": "16.1.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}