react-attendance-calendar 2.0.1 → 2.0.2

package/README.md

@@ -20,9 +20,19 @@ A highly customizable and developer-friendly React attendance calendar component
 npm install react-attendance-calendar
 ```
 
-### CSS Setup
+### CSS Import
 
-The component uses Tailwind CSS v4. Make sure you have Tailwind CSS configured in your project. No additional CSS imports are needed.
+The component includes its own CSS styles. Import the CSS file:
+
+```tsx
+import "react-attendance-calendar/dist/index.css";
+```
+
+Or if your bundler supports the `style` field:
+
+```tsx
+import "react-attendance-calendar";
+```
 
 ## Usage
 

package/dist/index.css

@@ -0,0 +1 @@
+.w-full{width:100%}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.place-items-center{place-items:center}.size-8{width:2rem;height:2rem}.size-10{width:2.5rem;height:2.5rem}.size-12{width:3rem;height:3rem}.size-14{width:3.5rem;height:3.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-12{margin-bottom:3rem}.ml-2{margin-left:.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.text-white{color:#fff}.text-slate-500{color:#64748b}.text-slate-600{color:#475569}.text-slate-700{color:#334155}.text-slate-900{color:#0f172a}.bg-emerald-500{background-color:#10b981}.bg-amber-500{background-color:#f59e0b}.bg-slate-50{background-color:#f8fafc}.bg-slate-100{background-color:#f1f5f9}.bg-slate-200{background-color:#e2e8f0}.bg-transparent{background-color:transparent}.border{border-width:1px}.border-2{border-width:2px}.border-slate-200{border-color:#e2e8f0}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-semibold{font-weight:600}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.025em}.text-center{text-align:center}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.hover\:bg-slate-50:hover{background-color:#f8fafc}.hover\:bg-blue-600:hover{background-color:#2563eb}.hover\:scale-105:hover{transform:scale(1.05)}.hover\:scale-110:hover{transform:scale(1.1)}.cursor-pointer{cursor:pointer}@media (min-width: 640px){.sm\:size-12{width:3rem;height:3rem}.sm\:size-14{width:3.5rem;height:3.5rem}}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.grid-cols-14{grid-template-columns:repeat(14,minmax(0,1fr))}.calendar-grid-7{grid-template-columns:repeat(7,minmax(0,1fr))}.calendar-grid-14{grid-template-columns:repeat(14,minmax(0,1fr))}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import "./styles.css";
 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

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

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "react-attendance-calendar",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A responsive React attendance calendar component with TypeScript support",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "style": "./dist/index.css",
   "exports": {
     ".": {
       "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "style": "./dist/index.css"
     }
   },
   "files": [