fix: tsc errors

README.md

@@ -28,6 +28,7 @@ yarn add react-calendario date-fns classnames
 
 ```tsx
 import { Month } from 'react-calendario';
+import 'react-calendario/dist/react-calendario.css';
 
 function App() {
   return (
@@ -218,41 +219,40 @@ The easiest way to customize the calendar is through props:
 />
 ```
 
-### 2. CSS Variables
+### 2. Theming with CSS
 
-Override CSS variables in your global styles for theme customization:
+The library uses CSS modules with predictable class names (prefixed with `rc_`). While the internal Sass variables don't support CSS custom properties due to color manipulation functions, you can still customize the appearance through CSS overrides:
 
 ```css
-:root {
+/* Override component styles */
-  /* Primary colors */
+.rc_Day__Container {
-  --rc-primary: #2196f3;
+  background: var(--my-bg-color, white);
-  --rc-primary-dark: #1976d2;
+  color: var(--my-text-color, #2c2c2c);
-  
+  border-color: var(--my-border-color, #f0f0f0);
-  /* Selection colors */
+}
-  --rc-selected: #e3f2fd;
+
-  --rc-selected-hover: #bbdefb;
+.rc_Day__Header {
-  
+  background: var(--my-header-bg, #2c2c2c);
-  /* Text colors */
+  color: var(--my-header-text, white);
-  --rc-text: #2c2c2c;
-  --rc-text-light: #757575;
-  
-  /* Background colors */
-  --rc-background: white;
-  --rc-hover: #f5f5f5;
-  
-  /* Weekend/disabled colors */
-  --rc-greyed: #bcbcbc;
-  
-  /* Border colors */
-  --rc-border: #f0f0f0;
 }
 
-/* Dark theme example */
+/* Custom theme example */
 [data-theme="dark"] {
-  --rc-background: #1a1a1a;
+  --my-bg-color: #1a1a1a;
-  --rc-text: #ffffff;
+  --my-text-color: #ffffff;
-  --rc-border: #333333;
+  --my-border-color: #333333;
-  --rc-hover: #2a2a2a;
+  --my-header-bg: #2a2a2a;
+  --my-header-text: #ffffff;
+}
+
+/* Selected state */
+.rc_Day__Container--selected {
+  background: var(--my-selected-bg, #e3f2fd) !important;
+}
+
+/* Hover state */
+.rc_Day__Container--interactive:hover {
+  background: var(--my-hover-bg, #f5f5f5);
 }
 ```
 

package.json

@@ -12,7 +12,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "build:lib": "tsc --declaration --emitDeclarationOnly --outDir dist && vite build --config vite.config.lib.ts",
+    "build:lib": "tsc -p tsconfig.build.json && vite build --config vite.config.lib.ts",
     "preview": "vite preview",
     "prepublishOnly": "npm run build:lib"
   },

src/components/calendar/DateRange/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { eachDayOfInterval, startOfDay } from 'date-fns';
 import { Day } from '../Day';
 import { getDateVariations } from '../../../utils/dateUtils';
-import { HeaderStyle, DaySize } from '../../../types/calendar';
+import { HeaderStyle, DaySize, DayVariation } from '../../../types/calendar';
 import styles from './DateRange.module.scss';
 import classNames from 'classnames';
 

src/components/calendar/Month/index.tsx

@@ -23,7 +23,7 @@ export const Month: React.FC<MonthProps> = ({
   const start = startOfWeek(monthStart, { weekStartsOn: 1 });
   const end = endOfMonth(date);
   const referenceMonth = date.getMonth();
-  const weeks: JSX.Element[] = [];
+  const weeks: React.JSX.Element[] = [];
 
   const effectiveMonthDayOfWeekHeaderStyle: HeaderStyle = monthDayOfWeekHeaderStyle ??
     (dayHeaderStyle === 'none' ? 'compacted' : 'none');

src/components/calendar/shared/_colors.scss

@@ -23,19 +23,19 @@ $border-color: #e5e5e5;
 
 // ----------------------------------
 
-// Colors - using CSS variables with fallbacks
+// Colors - Note: Colors used in Sass functions cannot use CSS variables
-$day-color-primary: var(--rc-primary, #2196f3); // day default mode selected sate container
+$day-color-primary: #2196f3; // day default mode selected sate container
-$day-color-primary-dark: var(--rc-primary-dark, #1976d2); // day default mode selected sate header
+$day-color-primary-dark: #1976d2; // day default mode selected sate header
-$day-color-background: var(--rc-background, white); // day default mode default state container background
+$day-color-background: white; // day default mode default state container background
-$day-color-border: var(--rc-border, #f0f0f0); // any day container border
+$day-color-border: #f0f0f0; // any day container border
-$day-color-text: var(--rc-text, #2c2c2c); // day default mode default state container text color
+$day-color-text: #2c2c2c; // day default mode default state container text color
-$day-color-text-light: var(--rc-text-light, #757575); // day greyed mode default state text color
+$day-color-text-light: #757575; // day greyed mode default state text color
-$day-color-hover: var(--rc-hover, #f5f5f5); // day default mode default state hover container
+$day-color-hover: #f5f5f5; // day default mode default state hover container
-$day-color-greyed: var(--rc-greyed, #bcbcbc); // day greyed mode default state container
+$day-color-greyed: #bcbcbc; // day greyed mode default state container
 
 // Range colors
-$day-color-selected: var(--rc-selected, #e3f2fd); // day default mode selected state container
+$day-color-selected: #e3f2fd; // day default mode selected state container
-$day-color-selected-hover: var(--rc-selected-hover, #bbdefb); // day default mode selected state hover container
+$day-color-selected-hover: #bbdefb; // day default mode selected state hover container
 $day-color-selecting: #f5f5f5; // day default mode selecting state container
 $day-color-selecting-rangestartend-content: #aeaeae; // day default mode selecting state container
 $day-color-selecting-border: #e0e0e0; // day default|greyed mode selecting container border