react-attendance-calendar 2.3.3 → 2.3.5

package/README.md

@@ -1,15 +1,19 @@
 # React Attendance Calendar
 
-A modern, customizable attendance calendar component for React with TypeScript support.
+A modern, responsive, and highly customizable attendance calendar component for React with full TypeScript support. Perfect for tracking employee attendance, student presence, or any date-based status system.
 
 ## ✨ Features
 
-- 📅 Responsive design (7-14 columns based on width)
-- 🎨 Fully customizable with Tailwind CSS classes
-- 🖱️ Interactive date clicks with callbacks
-- 📱 Mobile-friendly
-- 🔧 TypeScript support
-- 🎭 Beautiful default styling included
+- 📅 **Responsive design** - Automatically switches between 7-14 columns based on container width
+- 🎨 **Fully customizable** - Complete control with Tailwind CSS classes
+- 🖱️ **Interactive** - Date click callbacks with hover effects
+- 📱 **Mobile-friendly** - Responsive grid layout with touch-friendly interactions
+- 🔧 **TypeScript support** - Full type safety and IntelliSense
+- 🎭 **Beautiful defaults** - Modern design with emerald/amber color scheme
+- 📊 **Multi-month support** - Provide attendance data for multiple months at once
+- 🔄 **Flexible data format** - Support both single month and array of months
+- ⚡ **Auto-initialization** - Defaults to current month if no view provided
+- 🎯 **Smart navigation** - Seamless month/year transitions
 
 ## 📦 Installation
 
@@ -46,7 +50,20 @@ function App() {
 }
 ```
 
-### With Attendance Data
+### Minimal Example (Auto-initialize to current month)
+
+```tsx
+import { AttendanceCalendar } from "react-attendance-calendar";
+import "react-attendance-calendar/styles.css";
+
+function App() {
+  const [view, setView] = useState();
+
+  return <AttendanceCalendar onChangeView={setView} />;
+}
+```
+
+### With Single Month Attendance Data
 
 ```tsx
 import { AttendanceCalendar } from "react-attendance-calendar";
@@ -67,6 +84,42 @@ const attendanceData = {
 />;
 ```
 
+### With Multiple Months Attendance Data
+
+```tsx
+import { AttendanceCalendar } from "react-attendance-calendar";
+import "react-attendance-calendar/styles.css";
+
+// Provide data for multiple months at once
+const attendanceData = [
+  // January 2024
+  {
+    year: 2024,
+    monthIndex: 0,
+    presentDays: new Set([
+      1, 2, 3, 5, 8, 9, 10, 12, 15, 16, 17, 19, 22, 23, 24, 26, 29, 30, 31,
+    ]),
+    absentDays: new Set([4, 11, 18, 25]),
+  },
+  // February 2025
+  {
+    year: 2025,
+    monthIndex: 1,
+    presentDays: new Set([
+      1, 2, 5, 6, 7, 8, 9, 12, 13, 14, 15, 16, 19, 20, 21, 22, 23, 26, 27, 28,
+    ]),
+    absentDays: new Set([3, 10, 17, 24]),
+  },
+];
+
+<AttendanceCalendar
+  view={view}
+  onChangeView={setView}
+  attendanceData={attendanceData}
+  onDateClick={(day, month, year) => console.log(day, month, year)}
+/>;
+```
+
 ### Custom Styling
 
 ```tsx
@@ -96,15 +149,27 @@ function App() {
     monthIndex: 0, // January
   });
 
-  // Sample attendance data
-  const attendanceData: AttendanceData = {
-    year: 2024,
-    monthIndex: 0,
-    presentDays: new Set([
-      1, 2, 3, 5, 8, 9, 10, 12, 15, 16, 17, 19, 22, 23, 24, 26, 29, 30, 31,
-    ]),
-    absentDays: new Set([4, 11, 18, 25]),
-  };
+  // Sample attendance data for multiple months
+  const attendanceData: AttendanceData = [
+    // January 2024
+    {
+      year: 2024,
+      monthIndex: 0,
+      presentDays: new Set([
+        1, 2, 3, 5, 8, 9, 10, 12, 15, 16, 17, 19, 22, 23, 24, 26, 29, 30, 31,
+      ]),
+      absentDays: new Set([4, 11, 18, 25]),
+    },
+    // February 2025
+    {
+      year: 2025,
+      monthIndex: 1,
+      presentDays: new Set([
+        1, 2, 5, 6, 7, 8, 9, 12, 13, 14, 15, 16, 19, 20, 21, 22, 23, 26, 27, 28,
+      ]),
+      absentDays: new Set([3, 10, 17, 24]),
+    },
+  ];
 
   const handleDateClick = (day: number, month: number, year: number) => {
     console.log(`Clicked on ${day}/${month + 1}/${year}`);
@@ -137,22 +202,22 @@ export default App;
 
 ## 📚 Props
 
-| Prop                        | Type                         | Required | Description                            |
-| --------------------------- | ---------------------------- | -------- | -------------------------------------- |
-| `view`                      | `MonthView`                  | ✅       | Current month and year                 |
-| `onChangeView`              | `(view: MonthView) => void`  | ✅       | Month navigation callback              |
-| `attendanceData`            | `AttendanceData`             | ❌       | Present/absent days data               |
-| `onDateClick`               | `(day, month, year) => void` | ❌       | Date click callback                    |
-| `showNavigation`            | `boolean`                    | ❌       | Show nav arrows (default: `true`)      |
-| `showWeekdayHeaders`        | `boolean`                    | ❌       | Show weekday headers (default: `true`) |
-| `className`                 | `string`                     | ❌       | Additional classes for root element    |
-| `cellClassName`             | `string`                     | ❌       | Custom classes for all cells           |
-| `presentCellClassName`      | `string`                     | ❌       | Custom classes for present days        |
-| `absentCellClassName`       | `string`                     | ❌       | Custom classes for absent days         |
-| `navigationButtonClassName` | `string`                     | ❌       | Custom classes for nav buttons         |
-| `monthTitleClassName`       | `string`                     | ❌       | Custom classes for month title         |
-| `weekdayHeaderClassName`    | `string`                     | ❌       | Custom classes for weekday headers     |
-| `containerClassName`        | `string`                     | ❌       | Custom classes for main container      |
+| Prop                        | Type                         | Required | Description                                        |
+| --------------------------- | ---------------------------- | -------- | -------------------------------------------------- |
+| `view`                      | `MonthView`                  | ❌       | Current month and year (defaults to current month) |
+| `onChangeView`              | `(view: MonthView) => void`  | ✅       | Month navigation callback                          |
+| `attendanceData`            | `AttendanceData`             | ❌       | Present/absent days data (single month or array)   |
+| `onDateClick`               | `(day, month, year) => void` | ❌       | Date click callback                                |
+| `showNavigation`            | `boolean`                    | ❌       | Show nav arrows (default: `true`)                  |
+| `showWeekdayHeaders`        | `boolean`                    | ❌       | Show weekday headers (default: `true`)             |
+| `className`                 | `string`                     | ❌       | Additional classes for root element                |
+| `cellClassName`             | `string`                     | ❌       | Custom classes for all cells                       |
+| `presentCellClassName`      | `string`                     | ❌       | Custom classes for present days                    |
+| `absentCellClassName`       | `string`                     | ❌       | Custom classes for absent days                     |
+| `navigationButtonClassName` | `string`                     | ❌       | Custom classes for nav buttons                     |
+| `monthTitleClassName`       | `string`                     | ❌       | Custom classes for month title                     |
+| `weekdayHeaderClassName`    | `string`                     | ❌       | Custom classes for weekday headers                 |
+| `containerClassName`        | `string`                     | ❌       | Custom classes for main container                  |
 
 ### TypeScript
 
@@ -162,22 +227,86 @@ type MonthView = {
   monthIndex: number; // 0-11 (0 = January)
 };
 
-type AttendanceData = {
+type MonthAttendanceData = {
   year: number;
   monthIndex: number;
   presentDays: Set<number>; // Day numbers 1-31
   absentDays: Set<number>; // Day numbers 1-31
 };
+
+// Support both single month and multiple months
+type AttendanceData = MonthAttendanceData | MonthAttendanceData[];
 ```
 
 ## 🎨 Styling
 
-The component uses Tailwind CSS classes. Default theme includes:
+The component uses Tailwind CSS classes with a modern design system:
+
+### Default Theme
+
+- **Present days**: Emerald green (`emerald-500`) with white text
+- **Absent days**: Amber orange (`amber-500`) with white text
+- **Regular days**: Slate gray (`slate-700`) with light border
+- **Navigation**: Rounded buttons with hover effects
+- **Typography**: Clean, readable fonts with proper hierarchy
+
+### Responsive Behavior
+
+- **Desktop**: 7 columns with larger cells (`size-12 sm:size-14`)
+- **Wide screens**: 14 columns with smaller cells (`size-8 sm:size-12`)
+- **Mobile**: Optimized touch targets and spacing
+
+### Customization
+
+Override any styling using the `className` props. All Tailwind classes are supported:
+
+- Colors, spacing, borders, shadows
+- Hover effects, transitions, animations
+- Responsive breakpoints and utilities
+
+## 🔄 Multi-Month Data Format
+
+The `attendanceData` prop supports two formats:
+
+### Single Month (Legacy Format)
+
+```typescript
+const attendanceData: AttendanceData = {
+  year: 2024,
+  monthIndex: 0,
+  presentDays: new Set([1, 2, 3, 5, 8]),
+  absentDays: new Set([4, 6, 7]),
+};
+```
+
+### Multiple Months (New Format)
+
+```typescript
+const attendanceData: AttendanceData = [
+  {
+    year: 2024,
+    monthIndex: 0, // January
+    presentDays: new Set([1, 2, 3, 5, 8]),
+    absentDays: new Set([4, 6, 7]),
+  },
+  {
+    year: 2024,
+    monthIndex: 1, // February
+    presentDays: new Set([1, 2, 5, 6, 7]),
+    absentDays: new Set([3, 4, 8]),
+  },
+  // ... add more months as needed
+];
+```
 
-- Present days: Green (`emerald-500`)
-- Absent days: Orange (`amber-500`)
+**Benefits of Multi-Month Format:**
 
-Customize with any Tailwind classes via the `className` props.
+- ✅ **Batch loading** - Load attendance data for multiple months at once
+- ✅ **Better performance** - No need to fetch data when navigating between months
+- ✅ **Seamless navigation** - Smooth transitions between months with data
+- ✅ **Backward compatible** - Works with existing single month format
+- ✅ **Memory efficient** - Store data in memory for instant access
+- ✅ **Offline ready** - Pre-load data for offline calendar browsing
 
 ## 📝 License
 

package/dist/AttendanceCalendar.d.ts

@@ -12,7 +12,7 @@ export type MonthAttendanceData = {
 };
 export type AttendanceData = MonthAttendanceData | MonthAttendanceData[];
 export type CalendarProps = {
-    view: MonthView;
+    view?: MonthView;
     onChangeView: (next: MonthView) => void;
     attendanceData?: AttendanceData;
     onDateClick?: (day: number, month: number, year: number) => void;

package/dist/AttendanceCalendar.d.ts.map

@@ -1 +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,mBAAmB,GAAG;IAChC,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,cAAc,GAAG,mBAAmB,GAAG,mBAAmB,EAAE,CAAC;AAEzE,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,2CAgOf"}
+{"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,mBAAmB,GAAG;IAChC,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,cAAc,GAAG,mBAAmB,GAAG,mBAAmB,EAAE,CAAC;AAEzE,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,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,IAA4E,EAC5E,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,2CAgOf"}

package/dist/index.js

@@ -1,4 +1,4 @@
-import Le, { useRef as $e, useState as Fe, useEffect as We, useMemo as fe } from "react";
+import Le, { useRef as Fe, useState as $e, useEffect as We, useMemo as fe } from "react";
 var ce = { exports: {} }, se = {};
 /**
  * @license React
@@ -47,7 +47,7 @@ function Ye() {
     function e(r) {
       if (r == null) return null;
       if (typeof r == "function")
-        return r.$$typeof === P ? null : r.displayName || r.name || null;
+        return r.$$typeof === M ? null : r.displayName || r.name || null;
       if (typeof r == "string") return r;
       switch (r) {
         case j:
@@ -69,11 +69,11 @@ function Ye() {
         ), r.$$typeof) {
           case v:
             return "Portal";
-          case $:
+          case F:
             return r.displayName || "Context";
           case Y:
             return (r._context.displayName || "Context") + ".Consumer";
-          case F:
+          case $:
             var f = r.render;
             return r = r.displayName, r || (r = f.displayName || f.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
           case u:
@@ -237,16 +237,16 @@ React keys must be passed directly to JSX without using spread:
     function L(r) {
       return typeof r == "object" && r !== null && r.$$typeof === E;
     }
-    var M = Le, E = Symbol.for("react.transitional.element"), v = Symbol.for("react.portal"), j = Symbol.for("react.fragment"), O = Symbol.for("react.strict_mode"), q = Symbol.for("react.profiler"), Y = Symbol.for("react.consumer"), $ = Symbol.for("react.context"), F = Symbol.for("react.forward_ref"), W = Symbol.for("react.suspense"), G = Symbol.for("react.suspense_list"), u = Symbol.for("react.memo"), _ = Symbol.for("react.lazy"), y = Symbol.for("react.activity"), P = Symbol.for("react.client.reference"), N = M.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, J = Object.prototype.hasOwnProperty, I = Array.isArray, S = console.createTask ? console.createTask : function() {
+    var z = Le, E = Symbol.for("react.transitional.element"), v = Symbol.for("react.portal"), j = Symbol.for("react.fragment"), O = Symbol.for("react.strict_mode"), q = Symbol.for("react.profiler"), Y = Symbol.for("react.consumer"), F = Symbol.for("react.context"), $ = Symbol.for("react.forward_ref"), W = Symbol.for("react.suspense"), G = Symbol.for("react.suspense_list"), u = Symbol.for("react.memo"), _ = Symbol.for("react.lazy"), y = Symbol.for("react.activity"), M = Symbol.for("react.client.reference"), N = z.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, J = Object.prototype.hasOwnProperty, I = Array.isArray, S = console.createTask ? console.createTask : function() {
       return null;
     };
-    M = {
+    z = {
       react_stack_bottom_frame: function(r) {
         return r();
       }
     };
-    var R, D = {}, d = M.react_stack_bottom_frame.bind(
-      M,
+    var R, D = {}, d = z.react_stack_bottom_frame.bind(
+      z,
       c
     )(), oe = S(t(c)), ne = {};
     ae.Fragment = j, ae.jsx = function(r, f, b) {
@@ -410,12 +410,12 @@ const ye = "-", Be = (e) => {
       }
       v === "[" ? l++ : v === "]" ? l-- : v === "(" ? h++ : v === ")" && h--;
     }
-    const w = c.length === 0 ? i : i.substring(m), T = Ke(w), L = T !== w, M = k && k > m ? k - m : void 0;
+    const w = c.length === 0 ? i : i.substring(m), T = Ke(w), L = T !== w, z = k && k > m ? k - m : void 0;
     return {
       modifiers: c,
       hasImportantModifier: L,
       baseClassName: T,
-      maybePostfixModifierPosition: M
+      maybePostfixModifierPosition: z
     };
   };
   if (n) {
@@ -464,7 +464,7 @@ const ye = "-", Be = (e) => {
     const w = h[k], {
       isExternal: T,
       modifiers: L,
-      hasImportantModifier: M,
+      hasImportantModifier: z,
       baseClassName: E,
       maybePostfixModifierPosition: v
     } = o(w);
@@ -484,13 +484,13 @@ const ye = "-", Be = (e) => {
       }
       j = !1;
     }
-    const q = c(L).join(":"), Y = M ? q + he : q, $ = Y + O;
-    if (l.includes($))
+    const q = c(L).join(":"), Y = z ? q + he : q, F = Y + O;
+    if (l.includes(F))
       continue;
-    l.push($);
-    const F = i(O, j);
-    for (let W = 0; W < F.length; ++W) {
-      const G = F[W];
+    l.push(F);
+    const $ = i(O, j);
+    for (let W = 0; W < $.length; ++W) {
+      const G = $[W];
       l.push(Y + G);
     }
     m = w + (m.length > 0 ? " " + m : m);
@@ -531,19 +531,19 @@ function sr(e, ...n) {
 const A = (e) => {
   const n = (o) => o[e] || [];
   return n.isThemeGetter = !0, n;
-}, Pe = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, ze = /^\((?:(\w[\w-]*):)?(.+)\)$/i, ar = /^\d+\/\d+$/, ir = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, lr = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, cr = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, dr = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, ur = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, ee = (e) => ar.test(e), p = (e) => !!e && !Number.isNaN(Number(e)), H = (e) => !!e && Number.isInteger(Number(e)), pe = (e) => e.endsWith("%") && p(e.slice(0, -1)), B = (e) => ir.test(e), mr = () => !0, fr = (e) => (
+}, Me = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, Pe = /^\((?:(\w[\w-]*):)?(.+)\)$/i, ar = /^\d+\/\d+$/, ir = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, lr = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, cr = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, dr = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, ur = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, ee = (e) => ar.test(e), p = (e) => !!e && !Number.isNaN(Number(e)), H = (e) => !!e && Number.isInteger(Number(e)), pe = (e) => e.endsWith("%") && p(e.slice(0, -1)), B = (e) => ir.test(e), mr = () => !0, fr = (e) => (
   // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
   // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   lr.test(e) && !cr.test(e)
-), Me = () => !1, pr = (e) => dr.test(e), br = (e) => ur.test(e), gr = (e) => !s(e) && !a(e), hr = (e) => re(e, Ie, Me), s = (e) => Pe.test(e), Z = (e) => re(e, Oe, fr), be = (e) => re(e, vr, p), Ae = (e) => re(e, je, Me), xr = (e) => re(e, Ne, br), de = (e) => re(e, Ge, pr), a = (e) => ze.test(e), ie = (e) => te(e, Oe), yr = (e) => te(e, Rr), Ce = (e) => te(e, je), kr = (e) => te(e, Ie), wr = (e) => te(e, Ne), ue = (e) => te(e, Ge, !0), re = (e, n, o) => {
-  const t = Pe.exec(e);
+), ze = () => !1, pr = (e) => dr.test(e), br = (e) => ur.test(e), gr = (e) => !s(e) && !a(e), hr = (e) => re(e, Ie, ze), s = (e) => Me.test(e), Z = (e) => re(e, Oe, fr), be = (e) => re(e, vr, p), Ae = (e) => re(e, je, ze), xr = (e) => re(e, Ne, br), de = (e) => re(e, Ge, pr), a = (e) => Pe.test(e), ie = (e) => te(e, Oe), yr = (e) => te(e, Rr), Ce = (e) => te(e, je), kr = (e) => te(e, Ie), wr = (e) => te(e, Ne), ue = (e) => te(e, Ge, !0), re = (e, n, o) => {
+  const t = Me.exec(e);
   return t ? t[1] ? n(t[1]) : o(t[2]) : !1;
 }, te = (e, n, o = !1) => {
-  const t = ze.exec(e);
+  const t = Pe.exec(e);
   return t ? t[1] ? n(t[1]) : o : !1;
 }, je = (e) => e === "position" || e === "percentage", Ne = (e) => e === "image" || e === "url", Ie = (e) => e === "length" || e === "size" || e === "bg-size", Oe = (e) => e === "length", vr = (e) => e === "number", Rr = (e) => e === "family-name", Ge = (e) => e === "shadow", Er = () => {
-  const e = A("color"), n = A("font"), o = A("text"), t = A("font-weight"), i = A("tracking"), c = A("leading"), l = A("breakpoint"), h = A("container"), m = A("spacing"), k = A("radius"), w = A("shadow"), T = A("inset-shadow"), L = A("text-shadow"), M = A("drop-shadow"), E = A("blur"), v = A("perspective"), j = A("aspect"), O = A("ease"), q = A("animate"), Y = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], $ = () => [
+  const e = A("color"), n = A("font"), o = A("text"), t = A("font-weight"), i = A("tracking"), c = A("leading"), l = A("breakpoint"), h = A("container"), m = A("spacing"), k = A("radius"), w = A("shadow"), T = A("inset-shadow"), L = A("text-shadow"), z = A("drop-shadow"), E = A("blur"), v = A("perspective"), j = A("aspect"), O = A("ease"), q = A("animate"), Y = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], F = () => [
     "center",
     "top",
     "bottom",
@@ -561,9 +561,9 @@ const A = (e) => {
     "bottom-left",
     // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
     "left-bottom"
-  ], F = () => [...$(), a, s], W = () => ["auto", "hidden", "clip", "visible", "scroll"], G = () => ["auto", "contain", "none"], u = () => [a, s, m], _ = () => [ee, "full", "auto", ...u()], y = () => [H, "none", "subgrid", a, s], P = () => ["auto", {
+  ], $ = () => [...F(), a, s], W = () => ["auto", "hidden", "clip", "visible", "scroll"], G = () => ["auto", "contain", "none"], u = () => [a, s, m], _ = () => [ee, "full", "auto", ...u()], y = () => [H, "none", "subgrid", a, s], M = () => ["auto", {
     span: ["full", H, a, s]
-  }, H, a, s], N = () => [H, "auto", a, s], J = () => ["auto", "min", "max", "fr", a, s], I = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], S = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], R = () => ["auto", ...u()], D = () => [ee, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...u()], d = () => [e, a, s], oe = () => [...$(), Ce, Ae, {
+  }, H, a, s], N = () => [H, "auto", a, s], J = () => ["auto", "min", "max", "fr", a, s], I = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], S = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], R = () => ["auto", ...u()], D = () => [ee, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...u()], d = () => [e, a, s], oe = () => [...F(), Ce, Ae, {
     position: [a, s]
   }], ne = () => ["no-repeat", {
     repeat: ["", "x", "y", "space", "round"]
@@ -708,7 +708,7 @@ const A = (e) => {
        * @see https://tailwindcss.com/docs/object-position
        */
       "object-position": [{
-        object: F()
+        object: $()
       }],
       /**
        * Overflow
@@ -896,7 +896,7 @@ const A = (e) => {
        * @see https://tailwindcss.com/docs/grid-column
        */
       "col-start-end": [{
-        col: P()
+        col: M()
       }],
       /**
        * Grid Column Start
@@ -924,7 +924,7 @@ const A = (e) => {
        * @see https://tailwindcss.com/docs/grid-row
        */
       "row-start-end": [{
-        row: P()
+        row: M()
       }],
       /**
        * Grid Row Start
@@ -2177,7 +2177,7 @@ const A = (e) => {
         }]
       }],
       "mask-image-radial-pos": [{
-        "mask-radial-at": $()
+        "mask-radial-at": F()
       }],
       "mask-image-conic-pos": [{
         "mask-conic": [p]
@@ -2289,7 +2289,7 @@ const A = (e) => {
           // Deprecated since Tailwind CSS v4.0.0
           "",
           "none",
-          M,
+          z,
           ue,
           de
         ]
@@ -2524,7 +2524,7 @@ const A = (e) => {
        * @see https://tailwindcss.com/docs/perspective-origin
        */
       "perspective-origin": [{
-        "perspective-origin": F()
+        "perspective-origin": $()
       }],
       /**
        * Rotate
@@ -2620,7 +2620,7 @@ const A = (e) => {
        * @see https://tailwindcss.com/docs/transform-origin
        */
       "transform-origin": [{
-        origin: F()
+        origin: $()
       }],
       /**
        * Transform Style
@@ -3013,7 +3013,7 @@ const A = (e) => {
     orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
   };
 }, Ar = /* @__PURE__ */ sr(Er);
-function z(...e) {
+function P(...e) {
   return Ar(Ue(e));
 }
 const Cr = [
@@ -3040,7 +3040,7 @@ function _r({ year: e, monthIndex: n }, o) {
   return h;
 }
 function Tr({
-  view: e,
+  view: e = { year: (/* @__PURE__ */ new Date()).getFullYear(), monthIndex: (/* @__PURE__ */ new Date()).getMonth() },
   onChangeView: n,
   attendanceData: o,
   onDateClick: t,
@@ -3054,26 +3054,26 @@ function Tr({
   navigationButtonClassName: w = "",
   weekdayHeaderClassName: T = "",
   monthTitleClassName: L = "",
-  containerClassName: M = ""
+  containerClassName: z = ""
 }) {
-  const E = $e(null), [v, j] = Fe(7);
+  const E = Fe(null), [v, j] = $e(7);
   We(() => {
     if (!E.current) return;
-    const y = E.current, P = new ResizeObserver((N) => {
+    const y = E.current, M = new ResizeObserver((N) => {
       const R = (N[0]?.contentRect.width ?? y.clientWidth) >= 8 * 64 + 156;
       j(R ? 14 : 7);
     });
-    return P.observe(y), () => P.disconnect();
+    return M.observe(y), () => M.disconnect();
   }, []);
-  const O = fe(() => _r(e, v), [e, v]), q = fe(() => Array.from({ length: v }).map((y, P) => Cr[P % 7]), [v]), Y = fe(
+  const O = fe(() => _r(e, v), [e, v]), q = fe(() => Array.from({ length: v }).map((y, M) => Cr[M % 7]), [v]), Y = fe(
     () => new Date(e.year, e.monthIndex).toLocaleString("en-US", {
       month: "long"
     }),
     [e]
-  ), $ = () => {
+  ), F = () => {
     const y = e.monthIndex - 1;
     y < 0 ? n({ year: e.year - 1, monthIndex: 11 }) : n({ ...e, monthIndex: y });
-  }, F = () => {
+  }, $ = () => {
     const y = e.monthIndex + 1;
     y > 11 ? n({ year: e.year + 1, monthIndex: 0 }) : n({ ...e, monthIndex: y });
   }, G = (() => {
@@ -3084,14 +3084,14 @@ function Tr({
   })(), u = G !== void 0, _ = (y) => {
     t && u && t(y, e.monthIndex, e.year);
   };
-  return /* @__PURE__ */ C.jsxs("div", { className: z("w-full", l, M), children: [
+  return /* @__PURE__ */ C.jsxs("div", { className: P("w-full", l, z), children: [
     i && /* @__PURE__ */ C.jsxs("div", { className: "flex items-center justify-between mb-8", children: [
       /* @__PURE__ */ C.jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ C.jsx(
           "button",
           {
-            onClick: $,
-            className: z(
+            onClick: F,
+            className: P(
               "size-10 rounded-xl border-2 border-slate-200 text-slate-700 grid place-items-center",
               "transition-colors duration-200 hover:bg-slate-50",
               w
@@ -3114,8 +3114,8 @@ function Tr({
         /* @__PURE__ */ C.jsx(
           "button",
           {
-            onClick: F,
-            className: z(
+            onClick: $,
+            className: P(
               "size-10 rounded-xl border-2 border-slate-200 text-slate-700 grid place-items-center",
               "transition-colors duration-200 hover:bg-slate-50",
               w
@@ -3139,7 +3139,7 @@ function Tr({
       /* @__PURE__ */ C.jsxs(
         "h2",
         {
-          className: z(
+          className: P(
             "text-2xl font-bold text-slate-900",
             L
           ),
@@ -3156,19 +3156,19 @@ function Tr({
     c && /* @__PURE__ */ C.jsx(
       "div",
       {
-        className: z("grid gap-4 text-center mb-6"),
+        className: P("grid gap-4 text-center mb-6"),
         style: { gridTemplateColumns: `repeat(${v}, minmax(0, 1fr))` },
-        children: q.map((y, P) => /* @__PURE__ */ C.jsx(
+        children: q.map((y, M) => /* @__PURE__ */ C.jsx(
           "div",
           {
-            className: z(
+            className: P(
               "text-sm font-semibold uppercase tracking-wide py-2",
               "text-slate-500 bg-transparent rounded-xl",
               T
             ),
             children: y
           },
-          P
+          M
         ))
       }
     ),
@@ -3176,31 +3176,31 @@ function Tr({
       "div",
       {
         ref: E,
-        className: z("grid gap-4"),
+        className: P("grid gap-4"),
         style: { gridTemplateColumns: `repeat(${v}, minmax(0, 1fr))` },
-        children: O.map((y, P) => {
-          const N = u && y.inCurrentMonth && G?.presentDays.has(y.day), J = u && y.inCurrentMonth && G?.absentDays.has(y.day), I = z(
+        children: O.map((y, M) => {
+          const N = u && y.inCurrentMonth && G?.presentDays.has(y.day), J = u && y.inCurrentMonth && G?.absentDays.has(y.day), I = P(
             "rounded-2xl grid place-items-center font-semibold cursor-pointer",
             "transition-all duration-200",
             v >= 14 ? "size-8 sm:size-12 text-sm" : "size-12 sm:size-14 text-base",
             h
           ), S = t && y.inCurrentMonth && u;
           let R = I;
-          return y.inCurrentMonth ? N ? R = z(
+          return y.inCurrentMonth ? N ? R = P(
             I,
             "bg-emerald-500 text-white border-2 border-emerald-500",
             m
-          ) : J ? R = z(
+          ) : J ? R = P(
             I,
             "bg-amber-500 text-white border-2 border-amber-500",
             k
-          ) : R = z(
+          ) : R = P(
             I,
             "text-slate-700 border-2 border-slate-200"
-          ) : R = z(
+          ) : R = P(
             I,
             "text-slate-400 border-2 border-slate-200"
-          ), /* @__PURE__ */ C.jsx("div", { className: z("flex items-center justify-center"), children: /* @__PURE__ */ C.jsx(
+          ), /* @__PURE__ */ C.jsx("div", { className: P("flex items-center justify-center"), children: /* @__PURE__ */ C.jsx(
             "div",
             {
               className: R,
@@ -3208,7 +3208,7 @@ function Tr({
               title: S ? `Click to interact with ${y.day}` : void 0,
               children: y.day
             }
-          ) }, P);
+          ) }, M);
         })
       }
     )
@@ -3216,6 +3216,6 @@ function Tr({
 }
 export {
   Tr as AttendanceCalendar,
-  z as cn
+  P as cn
 };
 //# sourceMappingURL=index.js.map