docs: customize

.npmignore

@@ -0,0 +1,46 @@
+# Source files
+src/
+!dist/
+
+# Development files
+.git/
+.github/
+.vscode/
+node_modules/
+
+# Config files
+vite.config.ts
+vite.config.lib.ts
+tsconfig.json
+tsconfig.node.json
+.gitignore
+
+# Example and demo files
+src/examples/
+src/App.tsx
+src/App.module.scss
+src/main.tsx
+src/index.css
+public/
+index.html
+
+# Documentation
+README.md
+*.log
+
+# Build files
+.DS_Store
+*.local
+
+# Docker files
+Dockerfile
+docker-compose.yml
+.dockerignore
+.env*
+
+# CI/CD files
+.drone.yml
+.deploy.yml
+
+# Keep the npm README
+!README-npm.md

README.md

@@ -200,22 +200,180 @@ function InteractiveCalendar() {
 }
 ```
 
-## Styling
+## Customization
 
-The components use CSS modules and CSS variables for theming. You can override the default styles by:
+### 1. Built-in Props
 
-1. Using the built-in props for common customizations
+The easiest way to customize the calendar is through props:
-2. Overriding CSS variables in your global styles
-3. Applying custom CSS classes
 
-### CSS Variables
+```tsx
+<Month
+  date={new Date()}
+  dayHeaderStyle="tiny"      // Header style
+  size="xl"                  // Cell size
+  fontProportion={80}        // Font size (10-100)
+  monthCutoff="dimmed"       // How to show other month's days
+  weekendDays={[0, 6]}       // Which days are weekends
+  magnify={true}             // Magnify effect on selection
+/>
+```
+
+### 2. CSS Variables
+
+Override CSS variables in your global styles for theme customization:
+
+```css
+:root {
+  /* Primary colors */
+  --rc-primary: #2196f3;
+  --rc-primary-dark: #1976d2;
+  
+  /* Selection colors */
+  --rc-selected: #e3f2fd;
+  --rc-selected-hover: #bbdefb;
+  
+  /* Text colors */
+  --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 */
+[data-theme="dark"] {
+  --rc-background: #1a1a1a;
+  --rc-text: #ffffff;
+  --rc-border: #333333;
+  --rc-hover: #2a2a2a;
+}
+```
+
+### 3. Custom Styling
+
+The components use CSS modules with predictable class names:
+
+```css
+/* Target specific components */
+.rc_Month__Container {
+  /* Custom month container styles */
+}
+
+.rc_Day__Container {
+  /* Custom day styles */
+}
+
+.rc_Day__Container--selected {
+  /* Custom selected day styles */
+}
+
+.rc_Day__Container--active {
+  /* Custom active day styles */
+}
+
+/* Custom weekend styling */
+.rc_Day__Container--greyed {
+  opacity: 0.5;
+}
+```
+
+### 4. Size Customization
+
+Create custom sizes beyond the built-in options:
+
+```css
+/* Custom size classes */
+.rc_Day--custom .rc_Day__Header {
+  height: 64px;
+  font-size: 1.2rem;
+}
+
+.rc_Day--custom .rc_Day__Content {
+  height: 128px; /* 2x header height */
+}
+```
+
+Then use it:
+```tsx
+<Month size="custom" />
+```
+
+### 5. Complete Theme Example
 
 ```css
+/* Purple theme */
 :root {
-  --color-primary: #2196f3;
+  --rc-primary: #7c3aed;
-  --color-primary-dark: #1976d2;
+  --rc-primary-dark: #6d28d9;
-  --color-selected: #e3f2fd;
+  --rc-selected: #ede9fe;
-  /* ... and more */
+  --rc-selected-hover: #ddd6fe;
+  --rc-text: #1f2937;
+  --rc-hover: #f3f4f6;
+}
+
+/* Rounded corners */
+.rc_Day__Container {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+/* Spacing between days */
+.rc_Week__Container {
+  gap: 4px;
+}
+
+/* Custom header style */
+.rc_Day__Header {
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}
+```
+
+### 6. Advanced Customization
+
+For complete control, you can:
+
+1. **Import SCSS variables** (if using Sass):
+```scss
+@use 'react-calendario/styles/variables' as rc;
+
+.custom-calendar {
+  padding: rc.$week-wrapper-padding;
+}
+```
+
+2. **Override specific component styles**:
+```css
+/* Remove borders */
+.rc_Day__Container {
+  border: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* Custom hover effect */
+.rc_Day__Container--interactive:hover {
+  transform: scale(1.05);
+  transition: transform 0.2s;
+}
+```
+
+3. **Customize date number rendering**:
+```css
+/* Circle style for dates */
+.rc_DayNumber__Container {
+  background: #f0f0f0;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  margin: auto;
 }
 ```
 

src/components/calendar/shared/_colors.scss

@@ -1,5 +1,21 @@
 @use "sass:color";
 
+// CSS Variables for customization
+:root {
+  --rc-primary: #2196f3;
+  --rc-primary-dark: #1976d2;
+  --rc-selected: #e3f2fd;
+  --rc-selected-hover: #bbdefb;
+  --rc-text: #2c2c2c;
+  --rc-text-light: #757575;
+  --rc-background: white;
+  --rc-hover: #f5f5f5;
+  --rc-greyed: #bcbcbc;
+  --rc-border: #f0f0f0;
+  --rc-header-bg: #2c2c2c;
+  --rc-header-text: white;
+}
+
 // -----------------------------------------------------------------------------
 // BORDER COLORS
 // -----------------------------------------------------------------------------
@@ -7,19 +23,19 @@ $border-color: #e5e5e5;
 
 // ----------------------------------
 
-// Colors
+// Colors - using CSS variables with fallbacks
-$day-color-primary: #2196f3; // day default mode selected sate container
+$day-color-primary: var(--rc-primary, #2196f3); // day default mode selected sate container
-$day-color-primary-dark: #1976d2; // day default mode selected sate header
+$day-color-primary-dark: var(--rc-primary-dark, #1976d2); // day default mode selected sate header
-$day-color-background: white; // day default mode default state container background
+$day-color-background: var(--rc-background, white); // day default mode default state container background
-$day-color-border: #f0f0f0; // any day container border
+$day-color-border: var(--rc-border, #f0f0f0); // any day container border
-$day-color-text: #2c2c2c; // day default mode default state container text color
+$day-color-text: var(--rc-text, #2c2c2c); // day default mode default state container text color
-$day-color-text-light: #757575; // day greyed mode default state text color
+$day-color-text-light: var(--rc-text-light, #757575); // day greyed mode default state text color
-$day-color-hover: #f5f5f5; // day default mode default state hover container
+$day-color-hover: var(--rc-hover, #f5f5f5); // day default mode default state hover container
-$day-color-greyed: #bcbcbc; // day greyed mode default state container
+$day-color-greyed: var(--rc-greyed, #bcbcbc); // day greyed mode default state container
 
 // Range colors
-$day-color-selected: #e3f2fd; // day default mode selected state container
+$day-color-selected: var(--rc-selected, #e3f2fd); // day default mode selected state container
-$day-color-selected-hover: #bbdefb; // day default mode selected state hover container
+$day-color-selected-hover: var(--rc-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

src/index.ts

@@ -0,0 +1,23 @@
+// Components
+export { Year } from './components/calendar/Year';
+export { Month } from './components/calendar/Month';
+export { Week } from './components/calendar/Week';
+export { DateRange } from './components/calendar/DateRange';
+export { Day } from './components/calendar/Day';
+
+// Types
+export type {
+  DateRange as DateRangeType,
+  HeaderStyle,
+  MonthCutoffType,
+  DirectionType,
+  DayVariation,
+  DaySize,
+  YearProps,
+  MonthProps,
+  WeekProps,
+  DayProps
+} from './types/calendar';
+
+// Utilities (if needed by consumers)
+export { getDateVariations } from './utils/dateUtils';

vite.config.lib.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { fileURLToPath } from 'node:url';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: fileURLToPath(new URL('./src/index.ts', import.meta.url)),
+      name: 'ReactCalendario',
+      formats: ['es', 'umd'],
+      fileName: (format) => `index.${format}.js`
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': 'react/jsx-runtime'
+        }
+      }
+    },
+    outDir: 'dist',
+    sourcemap: true,
+    emptyOutDir: true
+  },
+  css: {
+    modules: {
+      generateScopedName: 'rc_[local]_[hash:base64:5]'
+    }
+  }
+});