Kairos DatePicker

A standalone, high-performance, aesthetically premium Date Range Picker component for React/Next.js applications.

Kairos-Date-Picker.mp4

🚀 Overview

Existing libraries often struggle with precise styling customization and alignment issues. Kairos DatePicker is built from scratch to provide 100% control over the DOM structure, ensuring pixel-perfect alignment and smooth interactions.

✨ Features

• Dual Month View: Perfect for range selection context.
• Smart Presets: Quick selection for "Last 7 Days", "Last Month", etc.
• Pixel-Perfect Alignment: Uses CSS Grid to ensure weekday headers align perfectly with day columns.
• Premium UX: Smooth hover effects, rounded highlights, and intuitive range visualization.
• Headless Logic: Separated hooks (useCalendarMatrix) for maximum flexibility.
• Compatible: Built for Next.js 15+ Server Components architecture (works as a Client Component).

🛠 Tech Stack

• Framework: React 19 / Next.js
• Styling: Tailwind CSS v3
• Icons: Lucide React
• Logic: date-fns

📦 Installation

(Coming Soon)

npm install kairos-date-picker

📖 Usage

import { DatePicker } from '@/components/kairos-date-picker';
import { useState } from 'react';
import { DateRange } from '@/types/date-picker';

export default function Page() {
  const [date, setDate] = useState<DateRange | undefined>();

  return (
    <div className="p-10">
      <DatePicker 
        value={date} 
        onChange={setDate} 
      />
    </div>
  );
}

🗺 Roadmap

• Core Grid Logic Implementation (useCalendarMatrix)
• Visual Component Construction
• Sidebar & Presets Integration
• Accessibility (ARIA Roles & Labels)
• Keyboard Navigation
• Npm Package Publication

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.