bs-ad-calendar-react 1.0.3 → 1.1.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Bibek Amatya
+Copyright (c) 2026 Bibek Amatya
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,61 +1,80 @@
 # BS-AD Calendar
 
-A modern, feature-rich React calendar component supporting both **Bikram Sambat (BS)** and **Gregorian (AD)** calendars with full TypeScript support.
+A modern React calendar component for seamless conversion between **Bikram Sambat (BS)** and **Gregorian (AD)** calendars.
 
 [![npm version](https://img.shields.io/npm/v/bs-ad-calendar-react.svg)](https://www.npmjs.com/package/bs-ad-calendar-react)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-## 🎯 [Live Demo](https://bibekamatya.github.io/bs-ad-calendar/)
+## Live Demo
 
-## Features
+[View Demo](https://bibekamatya.github.io/bs-ad-calendar/)
 
-✨ **Dual Calendar Support** - Switch between BS (Nepali) and AD (Gregorian) calendars  
-🎨 **Customizable Themes** - Light/dark themes with custom color support  
-📅 **Date & Range Selection** - Single date or date range selection modes  
-🌏 **Localization** - Nepali months, days, and number support  
-⌨️ **Keyboard Navigation** - Full keyboard accessibility  
-📱 **Responsive Design** - Works on all screen sizes  
-🎯 **DatePicker Component** - Input field with popup calendar  
-🔧 **TypeScript** - Full type definitions included  
-♿ **Accessible** - ARIA labels and keyboard navigation
+## Key Feature
 
-## Installation
+**Select any date → Get both BS and AD dates automatically**
 
-```bash
-npm install bs-ad-calendar-react
+When you click a date on either calendar, you instantly receive both the BS and AD equivalents with formatted output.
+
+**Example Output:**
 ```
+Input: Click on Poush 15, 2081 (BS Calendar)
 
-```bash
-yarn add bs-ad-calendar-react
+Output:
+{
+  bs: "2081-09-15",
+  ad: "2024-12-31",
+  formatted: {
+    bs: "Poush 15, 2081",
+    ad: "December 31, 2024"
+  }
+}
 ```
 
+## Features
+
+- Automatic dual calendar conversion
+- Single date and range selection modes
+- Customizable themes (light/dark)
+- Nepali localization support
+- Full keyboard navigation
+- Responsive design
+- Complete TypeScript support
+- Accessible (ARIA labels)
+
+## Installation
+
 ```bash
-pnpm add bs-ad-calendar-react
+npm install bs-ad-calendar-react
 ```
 
 ## Quick Start
 
-### Basic Calendar
+### Basic Usage
 
 ```tsx
 import { Calendar } from 'bs-ad-calendar-react'
 
-function App() {
+export default function App() {
   return (
     <Calendar
       calendarType="BS"
-      onDateSelect={(date) => console.log(date)}
+      onDateSelect={(date) => {
+        console.log(date.bs)           // "2081-09-15"
+        console.log(date.ad)           // "2024-12-31"
+        console.log(date.formatted.bs) // "Poush 15, 2081"
+        console.log(date.formatted.ad) // "December 31, 2024"
+      }}
     />
   )
 }
 ```
 
-### DatePicker with Input
+### DatePicker Input
 
 ```tsx
 import { DatePicker } from 'bs-ad-calendar-react'
 
-function App() {
+export default function App() {
   return (
     <DatePicker
       calendarType="AD"
@@ -71,7 +90,7 @@ function App() {
 ```tsx
 import { Calendar } from 'bs-ad-calendar-react'
 
-function App() {
+export default function App() {
   return (
     <Calendar
       calendarType="BS"
@@ -91,71 +110,45 @@ function App() {
 |------|------|---------|-------------|
 | `calendarType` | `'BS' \| 'AD'` | `'AD'` | Calendar type |
 | `mode` | `'single' \| 'range'` | `'single'` | Selection mode |
-| `onDateSelect` | `(date: DateOutput) => void` | - | Single date selection callback |
+| `onDateSelect` | `(date: DateOutput) => void` | - | Date selection callback |
 | `onRangeSelect` | `(range: DateRange) => void` | - | Range selection callback |
-| `showToday` | `boolean` | `true` | Highlight today's date |
-| `disabled` | `boolean` | `false` | Disable calendar interaction |
-| `minDate` | `string` | - | Minimum selectable date (ISO format) |
-| `maxDate` | `string` | - | Maximum selectable date (ISO format) |
-| `theme` | `'light' \| 'dark' \| 'custom'` | `'light'` | Theme variant |
-| `colors` | `ColorConfig` | - | Custom color configuration |
-| `showNepaliMonths` | `boolean` | `false` | Show Nepali month names |
-| `showNepaliDays` | `boolean` | `false` | Show Nepali day names |
-| `showNepaliNumbers` | `boolean` | `false` | Show Nepali numerals |
-| `showRangePresets` | `boolean` | `false` | Show range preset buttons |
-| `rangePresetsPosition` | `'top' \| 'left'` | `'top'` | Position of range presets |
-| `className` | `string` | - | Additional CSS class |
+| `showToday` | `boolean` | `true` | Highlight today |
+| `disabled` | `boolean` | `false` | Disable interaction |
+| `minDate` | `string` | - | Min selectable date |
+| `maxDate` | `string` | - | Max selectable date |
+| `theme` | `'light' \| 'dark'` | `'light'` | Theme variant |
+| `colors` | `ColorConfig` | - | Custom colors |
+| `showNepaliMonths` | `boolean` | `false` | Nepali month names |
+| `showNepaliDays` | `boolean` | `false` | Nepali day names |
+| `showNepaliNumbers` | `boolean` | `false` | Nepali numerals |
+| `showRangePresets` | `boolean` | `false` | Show preset buttons |
 
 ### DatePicker Props
 
-Extends all Calendar props plus:
+Extends Calendar props plus:
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `placeholder` | `string` | `'Select date'` | Input placeholder text |
-| `inputClassName` | `string` | - | Input container CSS class |
-| `popupClassName` | `string` | - | Popup calendar CSS class |
-
-### Color Configuration
-
-```tsx
-colors={{
-  primary: '#3b82f6',      // Primary accent color
-  selected: '#3b82f6',     // Selected date background
-  today: '#dbeafe',        // Today's date background
-  hover: '#eff6ff',        // Hover state background
-  background: '#ffffff',   // Calendar background
-  text: '#1f2937',        // Text color
-  border: '#e5e7eb',      // Border color
-  disabled: '#d1d5db'     // Disabled date color
-}}
-```
+| `placeholder` | `string` | `'Select date'` | Input placeholder |
+| `inputClassName` | `string` | - | Input CSS class |
+| `popupClassName` | `string` | - | Popup CSS class |
 
-### Date Output Format
+### Output Format
 
 ```tsx
 {
-  bs: "2081-09-15",           // BS date (ISO format)
-  ad: "2024-12-31",           // AD date (ISO format)
+  bs: "2081-09-15",
+  ad: "2024-12-31",
   formatted: {
-    bs: "Poush 15, 2081",     // Formatted BS date
-    ad: "December 31, 2024"   // Formatted AD date
+    bs: "Poush 15, 2081",
+    ad: "December 31, 2024"
   }
 }
 ```
 
-### Range Output Format
-
-```tsx
-{
-  start: { year: 2081, month: 8, day: 1 },
-  end: { year: 2081, month: 8, day: 30 }
-}
-```
-
 ## Examples
 
-### Custom Colors
+### Custom Theme
 
 ```tsx
 <Calendar
@@ -163,8 +156,7 @@ colors={{
   colors={{
     primary: '#10b981',
     selected: '#059669',
-    today: '#d1fae5',
-    hover: '#ecfdf5'
+    today: '#d1fae5'
   }}
   onDateSelect={(date) => console.log(date)}
 />
@@ -182,87 +174,41 @@ colors={{
 />
 ```
 
-### Date Constraints
-
-```tsx
-<Calendar
-  calendarType="AD"
-  minDate="2024-01-01"
-  maxDate="2024-12-31"
-  onDateSelect={(date) => console.log(date)}
-/>
-```
-
-### Dark Theme
-
-```tsx
-<Calendar
-  calendarType="BS"
-  theme="dark"
-  onDateSelect={(date) => console.log(date)}
-/>
-```
-
-### Custom Range Presets
+### Date Range
 
 ```tsx
 <Calendar
   calendarType="BS"
   mode="range"
-  showRangePresets
-  predefinedRanges={[
-    {
-      label: 'This Month',
-      key: 'this-month',
-      getValue: (type) => ({
-        start: { year: 2081, month: 8, day: 1 },
-        end: { year: 2081, month: 8, day: 30 }
-      })
-    }
-  ]}
+  minDate="2024-01-01"
+  maxDate="2024-12-31"
   onRangeSelect={(range) => console.log(range)}
 />
 ```
 
 ## Keyboard Navigation
 
-- **Arrow Left/Right**: Navigate months
-- **Arrow Up/Down**: Navigate years
-- **PageUp/PageDown**: Navigate months
-- **Shift + PageUp/PageDown**: Navigate years
-- **Tab**: Navigate between interactive elements
+- Arrow Left/Right - Navigate months
+- Arrow Up/Down - Navigate years
+- PageUp/PageDown - Navigate months
+- Shift + PageUp/PageDown - Navigate years
 
 ## Browser Support
 
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
+Chrome, Firefox, Safari, Edge (latest versions)
 
 ## TypeScript
 
-Full TypeScript support with exported types:
-
 ```tsx
-import type { 
-  DateInfo, 
-  DateRange, 
-  DateOutput, 
-  CalendarProps 
-} from 'bs-ad-calendar-react'
+import type { DateOutput, DateRange, CalendarProps } from 'bs-ad-calendar-react'
 ```
 
-## Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
-
 ## License
 
 MIT © [Bibek Amatya](https://github.com/bibekamatya)
 
 ## Links
 
-- [GitHub Repository](https://github.com/bibekamatya/bs-ad-calendar)
-- [NPM Package](https://www.npmjs.com/package/bs-ad-calendar-react)
-- [Live Demo](https://bibekamatya.github.io/bs-ad-calendar/)
-- [Report Issues](https://github.com/bibekamatya/bs-ad-calendar/issues)
+- [GitHub](https://github.com/bibekamatya/bs-ad-calendar)
+- [NPM](https://www.npmjs.com/package/bs-ad-calendar-react)
+- [Demo](https://bibekamatya.github.io/bs-ad-calendar/)