npm package: @shashank_s/date-picker
Description: A beautiful, accessible date picker component built with React, TypeScript, and shadcn/ui. Now with self-contained CSS - works out of the box!
Author: shashank_s
Latest version: 1.2.29

# @shashank_s/date-picker

A beautiful, accessible date picker component built with React, TypeScript, and shadcn/ui design system.

## ✨ Features

- 🎨 **shadcn/ui Design** - Follows modern design principles with proper color tokens
- ♿ **Accessibility First** - Full ARIA support, keyboard navigation, and screen reader compatibility
- 📱 **Responsive Design** - Works perfectly on all screen sizes
- 🎯 **Compact Layout** - Efficient use of space with content-hugging width
- 🔧 **TypeScript** - Fully typed with excellent IntelliSense support
- 🎨 **Customizable** - Easy to style and extend with Tailwind CSS
- ⚡ **Performance** - Optimized rendering and state management

## 🚀 Installation

```bash
npm install @shashank_s/date-picker
# or
yarn add @shashank_s/date-picker
# or
pnpm add @shashank_s/date-picker
```

## 📦 Peer Dependencies

This package requires the following peer dependencies:

```bash
npm install react react-dom
npm install -D @types/react @types/react-dom
```

## 🎯 Usage

### Basic Usage

```tsx
import { DatePicker } from '@shashank_s/date-picker';

function App() {
  const handleRangeChange = (range: { start: Date; end: Date }) => {
    console.log('Date range changed:', range);
  };

  return (
    <DatePicker 
      onRangeChange={handleRangeChange}
    />
  );
}
```

### With Custom Props

```tsx
import { DatePicker } from '@shashank_s/date-picker';

function App() {
  return (
    <DatePicker 
      onRangeChange={handleRangeChange}
      placeholder="Choose your dates"
      disabled={false}
      className="w-64"
    />
  );
}
```

## 🔧 Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `onRangeChange` | `(range: DateRange) => void` | - | Callback when date range changes |
| `defaultRange` | `DateRange` | Last 30 days | Initial date range |
| `className` | `string` | `''` | Additional CSS classes |
| `placeholder` | `string` | `'Select date range'` | Placeholder text for accessibility |
| `disabled` | `boolean` | `false` | Whether the picker is disabled |

## 🎨 Styling

The component uses Tailwind CSS and shadcn/ui design tokens. Make sure you have Tailwind CSS configured in your project.

### Required CSS

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }
}
```

## 🎯 Quick Select Options

The component includes these preset options:
- **Today** - Current date
- **This month** - From start of current month to today
- **Last month** - Full previous month
- **Last 7 days** - Past week
- **Last 30 days** - Past month
- **Custom date** - Opens calendar for manual selection

## 🔧 Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build:lib

# Build demo app
npm run build
```

## 📝 License

MIT © [Shashank S](https://github.com/shashank_s)

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## 📚 Learn More

- [React Documentation](https://react.dev/)
- [shadcn/ui Documentation](https://ui.shadcn.com/)
- [Tailwind CSS Documentation](https://tailwindcss.com/)