react-attendance-calendar 1.0.0 → 2.0.1

package/README.md

@@ -1,18 +1,18 @@
-# Attendance Calendar
+# React Attendance Calendar
 
-A highly customizable and developer-friendly React attendance calendar component with TypeScript support. This component provides a clean, modern interface for displaying attendance data with interactive features and full theme customization.
+A highly customizable and developer-friendly React attendance calendar component with TypeScript support. This component provides a clean, modern interface for displaying attendance data with interactive features and complete styling control through Tailwind CSS classes.
 
 ## ✨ Features
 
 - 📅 **Responsive Design**: Automatically adjusts between 7 and 14 columns based on container width
-- 🎨 **Full Theme Customization**: Customize all colors, borders, and styling
+- 🎨 **Complete Styling Control**: Use any Tailwind CSS classes for full customization
 - 🖱️ **Interactive Dates**: Click on dates to trigger custom actions
 - 📱 **Mobile Friendly**: Responsive design that works on all screen sizes
 - 🔧 **TypeScript Support**: Full TypeScript definitions included
 - ⚡ **Lightweight**: Minimal dependencies, only requires React
 - 🎯 **Accessible**: Includes proper ARIA labels and semantic HTML
-- 🎛️ **Developer Friendly**: Extensive props for customization
-- 🎭 **Pure Tailwind CSS**: No external CSS dependencies
+- 🎛️ **Developer Friendly**: Granular className props for every element
+- 🎭 **Pure Tailwind CSS**: No external CSS dependencies, uses `clsx` and `tailwind-merge`
 
 ## Installation
 
@@ -20,6 +20,10 @@ A highly customizable and developer-friendly React attendance calendar component
 npm install react-attendance-calendar
 ```
 
+### CSS Setup
+
+The component uses Tailwind CSS v4. Make sure you have Tailwind CSS configured in your project. No additional CSS imports are needed.
+
 ## Usage
 
 ### Basic Usage
@@ -42,7 +46,7 @@ function App() {
 }
 ```
 
-### With Attendance Data & Custom Theme
+### With Attendance Data & Custom Styling
 
 ```tsx
 import React, { useState } from "react";
@@ -50,7 +54,6 @@ import {
   AttendanceCalendar,
   MonthView,
   AttendanceData,
-  CalendarTheme,
 } from "react-attendance-calendar";
 
 function App() {
@@ -69,17 +72,6 @@ function App() {
     absentDays: new Set([4, 11, 18, 25]),
   };
 
-  // Custom theme
-  const customTheme: CalendarTheme = {
-    primaryColor: "#10b981", // Green for present
-    absentColor: "#f59e0b", // Orange for absent
-    textColor: "#1f2937",
-    borderColor: "#d1d5db",
-    mutedTextColor: "#9ca3af",
-    hoverColor: "#f3f4f6",
-    backgroundColor: "#ffffff",
-  };
-
   const handleDateClick = (day: number, month: number, year: number) => {
     console.log(`Clicked on ${day}/${month + 1}/${year}`);
     // Your custom logic here
@@ -91,11 +83,16 @@ function App() {
         view={view}
         onChangeView={setView}
         attendanceData={attendanceData}
-        theme={customTheme}
         onDateClick={handleDateClick}
         showNavigation={true}
         showWeekdayHeaders={true}
-        className="border border-gray-200 rounded-lg p-4"
+        // Custom styling with className props
+        cellClassName="rounded-full"
+        presentCellClassName="bg-green-500 text-white shadow-lg"
+        absentCellClassName="bg-red-500 text-white border-2 border-red-300"
+        navigationButtonClassName="bg-blue-500 text-white hover:bg-blue-600"
+        monthTitleClassName="text-3xl text-purple-600"
+        containerClassName="border border-gray-200 rounded-lg p-4"
       />
     </div>
   );
@@ -106,16 +103,22 @@ function App() {
 
 ### AttendanceCalendar
 
-| Prop                 | Type                                                 | Required | Description                                     |
-| -------------------- | ---------------------------------------------------- | -------- | ----------------------------------------------- |
-| `view`               | `MonthView`                                          | ✅       | Current month view with year and month index    |
-| `onChangeView`       | `(view: MonthView) => void`                          | ✅       | Callback when user navigates to different month |
-| `attendanceData`     | `AttendanceData`                                     | ❌       | Optional attendance data to display             |
-| `theme`              | `CalendarTheme`                                      | ❌       | Custom theme colors and styling                 |
-| `onDateClick`        | `(day: number, month: number, year: number) => void` | ❌       | Callback when a date is clicked                 |
-| `showNavigation`     | `boolean`                                            | ❌       | Show/hide month navigation (default: true)      |
-| `showWeekdayHeaders` | `boolean`                                            | ❌       | Show/hide weekday headers (default: true)       |
-| `className`          | `string`                                             | ❌       | Additional CSS classes                          |
+| Prop                        | Type                                                 | Required | Description                                     |
+| --------------------------- | ---------------------------------------------------- | -------- | ----------------------------------------------- |
+| `view`                      | `MonthView`                                          | ✅       | Current month view with year and month index    |
+| `onChangeView`              | `(view: MonthView) => void`                          | ✅       | Callback when user navigates to different month |
+| `attendanceData`            | `AttendanceData`                                     | ❌       | Optional attendance data to display             |
+| `onDateClick`               | `(day: number, month: number, year: number) => void` | ❌       | Callback when a date is clicked                 |
+| `showNavigation`            | `boolean`                                            | ❌       | Show/hide month navigation (default: true)      |
+| `showWeekdayHeaders`        | `boolean`                                            | ❌       | Show/hide weekday headers (default: true)       |
+| `className`                 | `string`                                             | ❌       | Additional CSS classes for main container       |
+| `cellClassName`             | `string`                                             | ❌       | CSS classes for all calendar cells              |
+| `presentCellClassName`      | `string`                                             | ❌       | CSS classes for present day cells               |
+| `absentCellClassName`       | `string`                                             | ❌       | CSS classes for absent day cells                |
+| `navigationButtonClassName` | `string`                                             | ❌       | CSS classes for prev/next buttons               |
+| `weekdayHeaderClassName`    | `string`                                             | ❌       | CSS classes for weekday headers                 |
+| `monthTitleClassName`       | `string`                                             | ❌       | CSS classes for month title                     |
+| `containerClassName`        | `string`                                             | ❌       | CSS classes for main container                  |
 
 ### Types
 
@@ -131,48 +134,58 @@ type AttendanceData = {
   presentDays: Set<number>; // Set of day numbers (1-31)
   absentDays: Set<number>; // Set of day numbers (1-31)
 };
-
-type CalendarTheme = {
-  primaryColor?: string; // Color for present days (default: "#3b82f6")
-  absentColor?: string; // Color for absent days (default: "#ef4444")
-  textColor?: string; // Main text color (default: "#1f2937")
-  borderColor?: string; // Border color (default: "#e5e7eb")
-  mutedTextColor?: string; // Muted text color (default: "#6b7280")
-  hoverColor?: string; // Hover background color (default: "#f3f4f6")
-  backgroundColor?: string; // Background color (default: "#ffffff")
-};
 ```
 
 ## Styling
 
-The component uses Tailwind CSS classes. Make sure you have Tailwind CSS installed and configured in your project. The component uses these standard Tailwind classes:
+The component uses Tailwind CSS classes with the `cn` utility function (combining `clsx` and `tailwind-merge`) for optimal class merging. Make sure you have Tailwind CSS installed and configured in your project.
 
-- Layout: `w-full`, `flex`, `grid`, `gap-3`, `gap-4`, `items-center`, `justify-center`
-- Sizing: `size-8`, `size-10`, `size-12`, `size-14`
-- Colors: `bg-emerald-500`, `bg-amber-500`, `text-slate-900`, `text-slate-600`
-- Borders: `border`, `border-slate-200`, `rounded-xl`, `rounded-2xl`
-- Spacing: `mb-4`, `mb-6`, `mb-8`, `p-6`, `p-8`
-- Typography: `text-xl`, `text-2xl`, `font-semibold`, `font-bold`
+### Default Styling
 
-### Custom Styling
+The component comes with modern, clean default styles:
 
-You can customize the appearance using the `theme` prop or by adding custom CSS classes:
+- **Present days**: `bg-emerald-500 text-white`
+- **Absent days**: `bg-amber-500 text-white`
+- **Regular days**: `text-slate-700 border-2 border-slate-200`
+- **Navigation buttons**: `border-2 border-slate-200 text-slate-700`
+
+### Custom Styling with className Props
+
+You have complete control over styling using the granular className props:
 
 ```tsx
-// Example with custom styling
+// Example with complete customization
 <AttendanceCalendar
   view={view}
   onChangeView={setView}
   attendanceData={attendanceData}
-  theme={{
-    primaryColor: "#3b82f6",
-    absentColor: "#ef4444",
-    textColor: "#1f2937",
-  }}
-  className="my-custom-calendar"
+  // Shape customization
+  cellClassName="rounded-full"
+  presentCellClassName="bg-green-500 text-white shadow-lg"
+  absentCellClassName="bg-red-500 text-white border-4 border-red-300"
+  // Navigation styling
+  navigationButtonClassName="bg-blue-500 text-white hover:bg-blue-600"
+  weekdayHeaderClassName="bg-gray-100 rounded-lg"
+  monthTitleClassName="text-3xl text-purple-600"
+  // Container styling
+  containerClassName="border border-gray-200 rounded-lg p-4"
 />
 ```
 
+### Available Styling Options
+
+- **Shapes**: `rounded-full`, `rounded-lg`, `rounded-none`, `rounded-2xl`
+- **Colors**: Any Tailwind color classes (`bg-blue-500`, `text-red-600`, etc.)
+- **Effects**: `shadow-lg`, `hover:scale-105`, `transition-all`
+- **Gradients**: `bg-gradient-to-r from-blue-500 to-purple-500`
+- **Borders**: `border-2`, `border-4`, `border-dashed`
+
+### Pro Tips
+
+- Use `cn()` utility for conditional classes: `cn("base-class", condition && "conditional-class")`
+- Combine multiple effects: `"bg-blue-500 hover:bg-blue-600 transition-colors shadow-lg"`
+- Override default colors completely with your own Tailwind classes
+
 ## License
 
 MIT

package/dist/AttendanceCalendar.d.ts

@@ -0,0 +1,30 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+export type MonthView = {
+    year: number;
+    monthIndex: number;
+};
+export type AttendanceData = {
+    year: number;
+    monthIndex: number;
+    presentDays: Set<number>;
+    absentDays: Set<number>;
+};
+export type CalendarProps = {
+    view: MonthView;
+    onChangeView: (next: MonthView) => void;
+    attendanceData?: AttendanceData;
+    onDateClick?: (day: number, month: number, year: number) => void;
+    showNavigation?: boolean;
+    showWeekdayHeaders?: boolean;
+    className?: string;
+    cellClassName?: string;
+    presentCellClassName?: string;
+    absentCellClassName?: string;
+    navigationButtonClassName?: string;
+    weekdayHeaderClassName?: string;
+    monthTitleClassName?: string;
+    containerClassName?: string;
+};
+export default function AttendanceCalendar({ view, onChangeView, attendanceData, onDateClick, showNavigation, showWeekdayHeaders, className, cellClassName, presentCellClassName, absentCellClassName, navigationButtonClassName, weekdayHeaderClassName, monthTitleClassName, containerClassName, }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AttendanceCalendar.d.ts.map

package/dist/AttendanceCalendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttendanceCalendar.d.ts","sourceRoot":"","sources":["../src/AttendanceCalendar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAI7C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAuCF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,IAAI,EACJ,YAAY,EACZ,cAAc,EACd,WAAW,EACX,cAAqB,EACrB,kBAAyB,EACzB,SAAc,EAEd,aAAkB,EAClB,oBAAyB,EACzB,mBAAwB,EACxB,yBAA8B,EAC9B,sBAA2B,EAC3B,mBAAwB,EACxB,kBAAuB,GACxB,EAAE,aAAa,2CAkNf"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AttendanceCalendar, cn } from "./AttendanceCalendar";
+export type { MonthView, AttendanceData, CalendarProps, } from "./AttendanceCalendar";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,EAAE,EAAE,MAAM,sBAAsB,CAAC;AACzE,YAAY,EACV,SAAS,EACT,cAAc,EACd,aAAa,GACd,MAAM,sBAAsB,CAAC"}