@dayflow/core 2.0.3 → 2.0.4

package/dist/styles/classNames.d.ts

@@ -6,15 +6,15 @@
  * Calendar main container
  * Used for the root container of WeekView and DayView
  */
-export declare const calendarContainer = "relative flex flex-col bg-white dark:bg-gray-900 w-full overflow-hidden h-full select-none";
+export declare const calendarContainer = "df-calendar relative flex flex-col bg-white dark:bg-gray-900 w-full overflow-hidden h-full select-none";
 /**
  * MonthView container
  */
-export declare const monthViewContainer = "h-full flex flex-col bg-white dark:bg-gray-900 select-none";
+export declare const monthViewContainer = "df-month-view h-full flex flex-col bg-white dark:bg-gray-900 select-none";
 /**
  * Top navigation bar container
  */
-export declare const headerContainer = "p-2 flex justify-between";
+export declare const headerContainer = "df-header p-2 flex justify-between";
 /**
  * Title text style
  */
@@ -26,7 +26,7 @@ export declare const headerSubtitle = "mt-3 text-gray-600 dark:text-gray-400";
 /**
  * Navigation button container
  */
-export declare const buttonGroup = "flex items-center";
+export declare const buttonGroup = "df-navigation flex items-center";
 /**
  * Navigation button (forward/backward)
  */
@@ -50,7 +50,7 @@ export declare const weekGrid = "grid grid-cols-7";
 /**
  * Week title row (MonthView)
  */
-export declare const weekHeaderRow = "sticky top-0 z-10 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700";
+export declare const weekHeaderRow = "df-week-header-row sticky top-0 z-10 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700";
 /**
  * Weekday labels
  */
@@ -58,15 +58,15 @@ export declare const dayLabel = "text-right text-gray-500 dark:text-gray-400 tex
 /**
  * WeekView week title
  */
-export declare const weekDayHeader = "flex border-b border-gray-200 dark:border-gray-700";
+export declare const weekDayHeader = "df-week-header flex border-b border-gray-200 dark:border-gray-700";
 /**
  * WeekView week title cell
  */
-export declare const weekDayCell = "flex flex-1 justify-center items-center text-center text-gray-500 dark:text-gray-400 text-sm p-1 select-none";
+export declare const weekDayCell = "df-week-day-cell flex flex-1 justify-center items-center text-center text-gray-500 dark:text-gray-400 text-sm p-1 select-none";
 /**
  * Date number style
  */
-export declare const dateNumber = "inline-flex items-center justify-center h-6 w-6 rounded-full text-sm mt-1 select-none";
+export declare const dateNumber = "df-date-number inline-flex items-center justify-center h-6 w-6 rounded-full text-sm mt-1 select-none";
 /**
  * Virtual scroll container
  */
@@ -74,7 +74,27 @@ export declare const scrollContainer = "flex-1 overflow-auto will-change-scroll"
 /**
  * Month view 6-row grid container - fixed 6-row equal height layout
  */
-export declare const monthGrid6Rows = "grid grid-rows-6 h-full overflow-hidden";
+export declare const monthGrid6Rows = "df-month-grid grid grid-rows-6 h-full overflow-hidden";
+/**
+ * Month day cell
+ */
+export declare const monthDayCell = "df-month-day-cell relative flex flex-col border-r border-gray-200 dark:border-gray-700 last:border-r-0";
+/**
+ * Month date number container
+ */
+export declare const monthDateNumberContainer = "df-month-date-number-container flex items-center justify-between px-2 h-[33px] relative z-20";
+/**
+ * Month date number
+ */
+export declare const monthDateNumber = "df-month-date-number inline-flex items-center justify-center h-6 min-w-6 rounded-full text-sm font-medium whitespace-nowrap px-1";
+/**
+ * Month more events indicator
+ */
+export declare const monthMoreEvents = "df-month-more-events text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer hover:underline text-center md:text-left font-medium md:font-normal relative z-20 bg-white dark:bg-gray-900";
+/**
+ * Month title (sticky)
+ */
+export declare const monthTitle = "df-month-title absolute top-10 left-0 z-30 bg-white/50 dark:bg-gray-900/50 py-2 px-2 duration-300";
 /**
  * Calendar content area (week/day view)
  */
@@ -86,55 +106,55 @@ export declare const scrollbarHide = "scrollbar-hide";
 /**
  * Time column container
  */
-export declare const timeColumn = "flex-shrink-0 border-gray-200 dark:border-gray-700";
+export declare const timeColumn = "df-time-column flex-shrink-0 border-gray-200 dark:border-gray-700";
 /**
  * Time slot
  */
-export declare const timeSlot = "relative h-[4.5rem] flex";
+export declare const timeSlot = "df-time-slot relative h-[4.5rem] flex";
 /**
  * Time label
  */
-export declare const timeLabel = "absolute -top-2.5 right-2 text-[12px] text-gray-500 dark:text-gray-400 select-none";
+export declare const timeLabel = "df-time-label absolute -top-2.5 right-2 text-[12px] text-gray-500 dark:text-gray-400 select-none";
 /**
  * Time grid row
  */
-export declare const timeGridRow = "h-[4.5rem] border-t first:border-none border-gray-200 dark:border-gray-700 flex";
+export declare const timeGridRow = "df-time-grid-row h-[4.5rem] border-t first:border-none border-gray-200 dark:border-gray-700 flex";
 /**
  * Time grid cell
  */
-export declare const timeGridCell = "flex-1 relative border-r border-gray-200 dark:border-gray-700 select-none";
+export declare const timeGridCell = "df-time-grid-cell flex-1 relative border-r border-gray-200 dark:border-gray-700 select-none";
 /**
  * Current time line container
  */
-export declare const currentTimeLine = "absolute left-0 top-0 flex pointer-events-none";
+export declare const currentTimeLine = "df-current-time-line absolute left-0 top-0 flex pointer-events-none";
 /**
  * Current time label
  */
-export declare const currentTimeLabel = "ml-2 text-primary-foreground text-xs font-bold px-1.5 bg-primary rounded-sm";
+export declare const currentTimeLabel = "df-current-time-label ml-2 text-primary-foreground text-xs font-bold px-1.5 bg-primary rounded-sm";
 /**
  * Current time line bar
  */
-export declare const currentTimeLineBar = "h-0.5 w-full bg-primary relative";
+export declare const currentTimeLineBar = "df-current-time-bar h-0.5 w-full bg-primary relative";
 /**
  * All-day event row container
  */
-export declare const allDayRow = "flex items-center border-b border-gray-200 dark:border-gray-700 sticky";
+export declare const allDayRow = "df-all-day-row flex items-center border-b border-gray-200 dark:border-gray-700 sticky";
 /**
  * All-day event label
  */
-export declare const allDayLabel = "flex-shrink-0 p-1 text-xs font-medium text-gray-500 dark:text-gray-400 flex justify-end select-none";
+export declare const allDayLabel = "df-all-day-label flex-shrink-0 p-1 text-xs font-medium text-gray-500 dark:text-gray-400 flex justify-end select-none";
 /**
  * All-day event content area
  */
-export declare const allDayContent = "flex flex-1 relative";
+export declare const allDayContent = "df-all-day-content flex flex-1 relative";
 /**
  * All-day event cell
  */
-export declare const allDayCell = "flex-1 border-r border-gray-200 dark:border-gray-700 relative";
+export declare const allDayCell = "df-all-day-cell flex-1 border-r border-gray-200 dark:border-gray-700 relative";
 /**
  * Base event style
  */
-export declare const baseEvent = "calendar-event select-none pointer-events-auto px-0.5";
+export declare const baseEvent = "df-event calendar-event select-none pointer-events-auto px-0.5";
 /**
  * Event shadow
  */
@@ -170,15 +190,15 @@ export declare const monthRegularContent = "text-xs mb-[2px] cursor-pointer flex
 /**
  * Event title (small)
  */
-export declare const eventTitleSmall = "font-medium text-xs truncate pr-1";
+export declare const eventTitleSmall = "df-event-title font-medium text-xs truncate pr-1";
 /**
  * Event time text
  */
-export declare const eventTime = "text-xs opacity-80 truncate";
+export declare const eventTime = "df-event-time text-xs opacity-80 truncate";
 /**
  * Event color bar
  */
-export declare const eventColorBar = "absolute left-1 top-1 bottom-1 w-[3px] rounded-full";
+export declare const eventColorBar = "df-event-color-bar absolute left-1 top-1 bottom-1 w-[3px] rounded-full";
 /**
  * Event icon
  */
@@ -202,19 +222,19 @@ export declare const resizeHandleRight = "resize-handle absolute right-0 top-0 b
 /**
  * Mini calendar container
  */
-export declare const miniCalendarContainer = "px-2 border-b border-gray-200 dark:border-gray-700";
+export declare const miniCalendarContainer = "df-mini-calendar px-2 border-b border-gray-200 dark:border-gray-700";
 /**
  * Mini calendar grid
  */
-export declare const miniCalendarGrid = "grid grid-cols-7 gap-1 text-xs justify-items-center";
+export declare const miniCalendarGrid = "df-mini-calendar-grid grid grid-cols-7 gap-1 text-xs justify-items-center";
 /**
  * Mini calendar weekday title
  */
-export declare const miniCalendarDayHeader = "text-center text-gray-500 dark:text-gray-400 font-medium py-1 h-6 w-6";
+export declare const miniCalendarDayHeader = "df-mini-calendar-header text-center text-gray-500 dark:text-gray-400 font-medium py-1 h-6 w-6";
 /**
  * Mini calendar date cell base style
  */
-export declare const miniCalendarDay = "text-center py-1 rounded text-xs h-6 w-6";
+export declare const miniCalendarDay = "df-mini-calendar-day text-center py-1 rounded text-xs h-6 w-6";
 /**
  * Mini calendar current month date
  */
@@ -231,6 +251,67 @@ export declare const miniCalendarToday = "bg-primary rounded-full text-primary-f
  * Mini calendar selected date
  */
 export declare const miniCalendarSelected = "bg-secondary text-secondary-foreground rounded-full font-medium";
+/**
+ * Calendar navigation button (prev/next arrows)
+ * Used in TodayBox component for navigation
+ */
+export declare const calendarNavButton = "df-nav-button calendar-nav-button group relative inline-flex items-center justify-center w-7 h-7 rounded-md border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-500 active:bg-gray-100 dark:active:bg-gray-600 transition-all duration-150 shadow-sm hover:shadow focus:outline-none";
+/**
+ * Calendar today button
+ * Used in TodayBox component for "Today" button
+ */
+export declare const calendarTodayButton = "df-today-button calendar-today-button inline-flex items-center justify-center px-4 h-7 text-sm font-medium rounded-md border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-500 active:bg-gray-100 dark:active:bg-gray-600 transition-all duration-150 shadow-sm hover:shadow focus:outline-none";
+/**
+ * Navigation button icon size
+ */
+export declare const navButtonIcon = "h-4 w-4 transition-transform group-hover:scale-110";
+/**
+ * Fixed event detail panel
+ * Used in DefaultEventDetailPanel, EventDetailPanelWithContent
+ */
+export declare const eventDetailPanel = "df-event-detail-panel fixed bg-white dark:bg-gray-800 shadow-lg border border-gray-200 dark:border-gray-700 rounded-lg";
+/**
+ * Event detail dialog overlay
+ * Used in DefaultEventDetailDialog
+ */
+export declare const dialogOverlay = "df-dialog-overlay fixed inset-0 bg-black/50 flex items-center justify-center z-50";
+/**
+ * Event detail dialog container
+ */
+export declare const dialogContainer = "df-dialog-container relative bg-white dark:bg-gray-800 shadow-2xl border border-gray-200 dark:border-gray-700 rounded-lg p-6 max-w-md w-full mx-4";
+/**
+ * Dropdown panel (ViewSwitcher, ColorPicker)
+ */
+export declare const dropdownPanel = "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg dark:shadow-gray-900/50 overflow-hidden";
+/**
+ * Color picker dropdown
+ */
+export declare const colorPickerDropdown = "bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden transition-all duration-200 origin-top-right animate-in fade-in zoom-in-95";
+/**
+ * Time grid bottom boundary (midnight line)
+ * Used in TimeGrid.tsx and DayContent.tsx
+ */
+export declare const timeGridBoundary = "h-3 border-t border-gray-200 dark:border-gray-700 relative";
+/**
+ * Midnight time label
+ */
+export declare const midnightLabel = "absolute -top-2.5 text-[12px] text-gray-500 dark:text-gray-400";
+/**
+ * Sidebar container
+ */
+export declare const sidebarContainer = "df-sidebar flex h-full flex-col border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900";
+/**
+ * Mobile fullscreen overlay
+ */
+export declare const mobileFullscreen = "fixed inset-0 z-9999 bg-white dark:bg-gray-900 flex flex-col";
+/**
+ * Search input
+ */
+export declare const searchInput = "pl-9 pr-8 py-1 h-7 text-sm border border-slate-200 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary transition resize-none";
+/**
+ * Icon button (square, no text)
+ */
+export declare const iconButton = "flex h-7 w-7 items-center justify-center rounded hover:bg-gray-100 dark:hover:bg-slate-800 transition-colors";
 /**
  * Border styles
  */

package/dist/utils/ics/icsDateUtils.d.ts

@@ -0,0 +1,37 @@
+/**
+ * ICS Date Utilities
+ *
+ * Convert between ICS date formats (RFC 5545) and Temporal API types.
+ *
+ * ICS Date Formats:
+ * 1. DATE (all-day): YYYYMMDD (e.g., 20250115)
+ * 2. DATE-TIME (local): YYYYMMDDTHHMMSS (e.g., 20250115T143000)
+ * 3. DATE-TIME (UTC): YYYYMMDDTHHMMSSZ (e.g., 20250115T143000Z)
+ * 4. DATE-TIME (with TZID): DTSTART;TZID=America/New_York:20250115T143000
+ */
+import { Temporal } from 'temporal-polyfill';
+import { ICSDateParams } from './types';
+/**
+ * Parse ICS date string to Temporal type
+ *
+ * @param dateStr - ICS date string
+ * @param params - Date parameters (VALUE, TZID)
+ * @param defaultTimeZone - Default timezone when none specified
+ * @returns Temporal.PlainDate, PlainDateTime, or ZonedDateTime
+ */
+export declare function parseICSDate(dateStr: string, params?: ICSDateParams, defaultTimeZone?: string): Temporal.PlainDate | Temporal.PlainDateTime | Temporal.ZonedDateTime;
+/**
+ * Format Temporal type to ICS date string
+ *
+ * @param temporal - Temporal date/time object
+ * @param allDay - Force all-day format
+ * @returns Object with value and optional params
+ */
+export declare function formatICSDate(temporal: Temporal.PlainDate | Temporal.PlainDateTime | Temporal.ZonedDateTime, allDay?: boolean): {
+    value: string;
+    params?: Record<string, string>;
+};
+/**
+ * Format a Date to ICS timestamp (UTC format for DTSTAMP)
+ */
+export declare function formatDateToICSTimestamp(date: Date): string;

package/dist/utils/ics/icsGenerator.d.ts

@@ -0,0 +1,23 @@
+/**
+ * ICS Generator
+ *
+ * Generates iCalendar (.ics) files from DayFlow Event objects.
+ * Supports standard RFC 5545 components.
+ */
+import { Event } from '../../types/event';
+import { ICSExportOptions } from './types';
+/**
+ * Generate ICS content string from events
+ *
+ * @param events - List of DayFlow events to export
+ * @param options - Export options
+ * @returns ICS file content string
+ */
+export declare function generateICS(events: Event[], options?: ICSExportOptions): string;
+/**
+ * Trigger download of ICS file (Browser only)
+ *
+ * @param events - Events to export
+ * @param options - Export options
+ */
+export declare function downloadICS(events: Event[], options?: ICSExportOptions): void;

package/dist/utils/ics/icsParser.d.ts

@@ -0,0 +1,15 @@
+/**
+ * ICS Parser
+ *
+ * Parses iCalendar (.ics) format into DayFlow Event objects.
+ * Supports standard RFC 5545 VEVENT components.
+ */
+import { ICSImportOptions, ICSImportResult } from './types';
+/**
+ * Main function to parse ICS content string
+ *
+ * @param icsContent - Raw string content of the .ics file
+ * @param options - Import options
+ * @returns Result object containing success flag, events, and errors
+ */
+export declare function parseICS(icsContent: string, options?: ICSImportOptions): ICSImportResult;

package/dist/utils/ics/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * ICS Utilities Module
+ */
+import { ICSImportResult, ICSImportOptions } from './types';
+export * from './types';
+export * from './icsDateUtils';
+export * from './icsParser';
+export * from './icsGenerator';
+/**
+ * Import events from an ICS file object
+ *
+ * @param file - The File object (from input[type="file"])
+ * @param options - Import options
+ * @returns Promise resolving to import result
+ */
+export declare function importICSFile(file: File, options?: ICSImportOptions): Promise<ICSImportResult>;

package/dist/utils/ics/types.d.ts

@@ -0,0 +1,91 @@
+/**
+ * ICS (iCalendar) Types
+ *
+ * Type definitions for ICS file import/export functionality.
+ * Based on RFC 5545 iCalendar specification.
+ */
+import { Event } from '../../types/event';
+/**
+ * ICS VEVENT raw data structure (intermediate format after parsing)
+ */
+export interface ICSVEvent {
+    /** Unique identifier */
+    uid: string;
+    /** Event summary/title */
+    summary: string;
+    /** Event description */
+    description?: string;
+    /** Start date/time in ICS format */
+    dtstart: string;
+    /** End date/time in ICS format */
+    dtend: string;
+    /** DTSTART parameters */
+    dtstartParams?: ICSDateParams;
+    /** DTEND parameters */
+    dtendParams?: ICSDateParams;
+    /** Event location */
+    location?: string;
+    /** Event categories */
+    categories?: string[];
+}
+/**
+ * ICS date/time parameters
+ */
+export interface ICSDateParams {
+    /** Value type: DATE for all-day, DATE-TIME for timed events */
+    value?: 'DATE' | 'DATE-TIME';
+    /** Timezone identifier (e.g., "America/New_York") */
+    tzid?: string;
+}
+/**
+ * ICS import options
+ */
+export interface ICSImportOptions {
+    /** Default calendar ID for imported events */
+    calendarId?: string;
+    /** Generate new IDs for imported events (default: true) */
+    generateNewIds?: boolean;
+    /** ID prefix for generated IDs (default: "ics-") */
+    idPrefix?: string;
+    /** Default timezone when ICS has no timezone info */
+    defaultTimeZone?: string;
+}
+/**
+ * ICS export options
+ */
+export interface ICSExportOptions {
+    /** Calendar name in exported file */
+    calendarName?: string;
+    /** Product identifier */
+    productId?: string;
+    /** Include timezone information */
+    includeTimezone?: boolean;
+    /** Export filename (without extension) */
+    filename?: string;
+}
+/**
+ * ICS import result
+ */
+export interface ICSImportResult {
+    /** Whether import completed without errors */
+    success: boolean;
+    /** Successfully imported events */
+    events: Event[];
+    /** Parse errors encountered */
+    errors: ICSParseError[];
+    /** Total VEVENTs found in file */
+    totalParsed: number;
+    /** Successfully imported event count */
+    totalImported: number;
+}
+/**
+ * ICS parse error
+ */
+export interface ICSParseError {
+    /** Line number where error occurred */
+    line?: number;
+    /** Error message */
+    message: string;
+    /** UID of the event that failed (if available) */
+    eventUid?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dayflow/core",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "A flexible and feature-rich calendar component library for React applications with drag-and-drop support, multiple views (Day, Week, Month, Year), and plugin architecture",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",