react-smart-scheduler 0.1.3 → 0.1.5

package/README.md

@@ -106,6 +106,93 @@ export default function App() {
 
 ---
 
+## 🎨 Styling options
+
+react-smart-scheduler ships with a zero-dependency default theme and two optional CSS adapters. All three are drop-in replacements for `<Scheduler />` — just swap the import.
+
+| Adapter | Import | Accent | Font |
+|---|---|---|---|
+| **Default** | `import { Scheduler }` | Blue `#3b82f6` | System UI |
+| **Tailwind** | `import { TailwindScheduler }` | Indigo `#6366f1` | Inter |
+| **MUI** | `import { MuiScheduler }` | MUI Blue `#1976d2` | Roboto |
+
+### Default (built-in)
+
+```tsx
+import { Scheduler } from 'react-smart-scheduler';
+import 'react-smart-scheduler/dist/scheduler.css';
+
+<Scheduler events={events} onEventAdd={...} onEventChange={...} onEventDelete={...} />
+```
+
+### Tailwind-inspired adapter
+
+No Tailwind installation required — this is CSS-only styling inspired by the Tailwind design system.
+
+```tsx
+import { TailwindScheduler } from 'react-smart-scheduler';
+import 'react-smart-scheduler/dist/scheduler.css';
+
+<TailwindScheduler events={events} onEventAdd={...} onEventChange={...} onEventDelete={...} />
+```
+
+### MUI-inspired adapter
+
+No `@mui/material` installation required — pure CSS that mirrors Material Design aesthetics.
+
+```tsx
+import { MuiScheduler } from 'react-smart-scheduler';
+import 'react-smart-scheduler/dist/scheduler.css';
+
+<MuiScheduler events={events} onEventAdd={...} onEventChange={...} onEventDelete={...} />
+```
+
+### Headless (bring your own styles)
+
+Use `HeadlessScheduler` when you want the scheduler's logic with a completely custom CSS layer.
+
+```tsx
+import { HeadlessScheduler } from 'react-smart-scheduler';
+import 'react-smart-scheduler/dist/scheduler.css'; // structural styles only
+
+<HeadlessScheduler events={events} className="my-custom-theme" ... />
+```
+
+### Custom CSS tokens
+
+All adapters expose the same CSS custom properties. Override any token on a parent element:
+
+```css
+/* your-theme.css */
+.rss-root {
+  --rss-primary:        #0ea5e9; /* sky-500 */
+  --rss-primary-light:  #f0f9ff;
+  --rss-today-bg:       #f0f9ff;
+  --rss-radius:         10px;
+  --rss-event-radius:   8px;
+}
+```
+
+### Slots — swap built-in sub-components
+
+For deeper customisation, swap the `Header` or `EventModal` with your own components:
+
+```tsx
+import { Scheduler, HeaderSlotProps, EventModalSlotProps } from 'react-smart-scheduler';
+
+const MyHeader: React.FC<HeaderSlotProps> = ({ view, date, onViewChange, onDateChange }) => (
+  // your custom header JSX
+);
+
+<Scheduler
+  events={events}
+  slots={{ Header: MyHeader }}
+  ...
+/>
+```
+
+---
+
 ## 📖 API
 
 ### `<Scheduler />` Props
@@ -124,6 +211,7 @@ export default function App() {
 | `startHour` | `number` | `0` | First visible hour (0–23) |
 | `endHour` | `number` | `24` | Last visible hour (1–24) |
 | `className` | `string` | `''` | Extra CSS class on the root element |
+| `slots` | `SchedulerSlots` | — | Swap `Header` or `EventModal` with custom components |
 
 ### `CalendarEvent` type
 

package/dist/index.d.ts

@@ -20,40 +20,41 @@ export declare interface CalendarEvent {
 /** A small palette of default event colours. */
 export declare const EVENT_COLORS: readonly string[];
 
+/** Props passed to a custom EventModal slot component. */
+export declare interface EventModalSlotProps {
+    event: CalendarEvent | null;
+    initialStart?: Date;
+    initialEnd?: Date;
+    onSave: (data: {
+        title: string;
+        start: Date;
+        end: Date;
+        color?: string;
+    }) => void;
+    onDelete?: () => void;
+    onClose: () => void;
+}
+
 /** Generate a stable unique id for a new event. */
 export declare function generateId(): string;
 
+/** Props passed to a custom Header slot component. */
+export declare interface HeaderSlotProps {
+    view: ViewType;
+    date: Date;
+    isMobile?: boolean;
+    onViewChange: (view: ViewType) => void;
+    onDateChange: (date: Date) => void;
+}
+
+export declare const MuiScheduler: default_2.FC<SchedulerProps>;
+
 /** Pick a colour from the palette, cycling based on a hash of the id. */
 export declare function pickColor(id: string): string;
 
-/**
- * <Scheduler /> — the root component.
- *
- * Architecture decisions:
- *
- * 1. Fully controlled: events, view, and date are all owned by the parent.
- *    The Scheduler only owns transient UI state (drag preview, modal open).
- *
- * 2. Single DndContext: wraps all views so dnd-kit's sensors work across
- *    view transitions without needing multiple contexts.
- *
- * 3. Drag math uses delta (pixels moved from drag start) rather than
- *    absolute drop coordinates. This avoids needing per-cell droppables
- *    and gives sub-cell precision. Column width is measured via
- *    ResizeObserver and stored in a mutable ref (not state) to avoid
- *    re-renders on window resize.
- *
- * 4. Resize is handled entirely in EventItem via Pointer Capture API,
- *    completely independent of dnd-kit. EventItem calls onEventResizeEnd
- *    after commit; Scheduler forwards to onEventChange.
- *
- * 5. Responsive: uses useBreakpoint() to set the initial default view
- *    when no `view` prop is provided (uncontrolled mode).
- *    mobile → 'day', tablet/desktop → 'week'.
- *    Both PointerSensor and TouchSensor are active so drag & drop works
- *    on touch devices out of the box.
- */
-export declare const Scheduler: default_2.FC<SchedulerProps>;
+declare const Scheduler: default_2.FC<SchedulerProps>;
+export { Scheduler as HeadlessScheduler }
+export { Scheduler }
 
 /** Props accepted by the top-level <Scheduler /> component. */
 export declare interface SchedulerProps {
@@ -85,25 +86,27 @@ export declare interface SchedulerProps {
     endHour?: number;
     /** Extra CSS class applied to the root element. */
     className?: string;
+    /** Optional component overrides — swap the built-in Header or EventModal. */
+    slots?: SchedulerSlots;
 }
 
+/** Map of swappable sub-components. */
+export declare interface SchedulerSlots {
+    Header?: default_2.ComponentType<HeaderSlotProps>;
+    EventModal?: default_2.ComponentType<EventModalSlotProps>;
+}
+
+export declare const TailwindScheduler: default_2.FC<SchedulerProps>;
+
 /**
- * Returns the current responsive breakpoint and re-renders whenever the
- * window is resized across a threshold.
- *
- * Breakpoints:
- *   mobile  — < 640 px   (phones, small screens)
- *   tablet  — 640–1023 px (tablets, small laptops)
- *   desktop — ≥ 1024 px  (standard laptop / desktop)
- *
- * Usage:
- *   const bp = useBreakpoint();
- *   const isMobile = bp === 'mobile';
+ * Returns the current responsive breakpoint, updating on window resize.
+ *   mobile  — < 640 px
+ *   tablet  — 640–1023 px
+ *   desktop — ≥ 1024 px
  */
 export declare function useBreakpoint(): Breakpoint;
 
-/** Library version — matches package.json version field. */
-export declare const VERSION: "0.1.3";
+export declare const VERSION: "0.1.5";
 
 export declare type ViewType = 'day' | 'week' | 'month';