datex-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 DateX
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,300 @@
+# DateX UI - Modern Date Range Picker
+
+A modern, lightweight, and customizable date range picker for TypeScript/JavaScript applications. Built with native JavaScript, no external dependencies.
+
+<!-- Add your demo GIF here -->
+
+![DateX Demo](./assets/images/demo.gif)
+
+## Features
+
+- 📅 **Date Range Selection** - Select start and end dates with intuitive interface
+- � **\*Single Date Mode** - Use as a single date picker
+- ⏰ **Time Picker** - Optional time selection with 12/24 hour formats
+- 🎨 **Customizable Themes** - Built-in themes (Default, Bootstrap, Material) or create your own
+- � **Inteernationalization** - Built-in Spanish locale with easy customization
+- 📱 **Responsive Design** - Works on desktop and mobile devices
+- 🚀 **Zero Dependencies** - Pure JavaScript/TypeScript implementation
+- 🎛️ **Predefined Ranges** - Quick selection with common date ranges
+- ♿ **Accessible** - Keyboard navigation and screen reader support
+
+<!-- Basic image here -->
+
+![Basic Date Range](./assets/images/screenshots/basic-date-range.png)
+
+## Installation
+
+```bash
+npm install datex-ui
+# or
+pnpm add datex-ui
+# or
+yarn add datex-ui
+```
+
+## Quick Start
+
+```typescript
+import { Datex, SPANISH_LOCALE, DEFAULT_THEME } from "datex-ui";
+
+// Basic usage with CSS selector
+const picker = new Datex(
+  "#date-input", // CSS selector or DOM element
+  {
+    locale: SPANISH_LOCALE,
+    theme: DEFAULT_THEME,
+  },
+  (startDate, endDate, label) => {
+    console.log("Selected:", { startDate, endDate, label });
+  }
+);
+
+// Also works with class selectors and DOM elements
+const picker2 = new Datex(".date-range-picker");
+const picker3 = new Datex(document.getElementById("my-input"));
+```
+
+## Usage Examples
+
+### Basic Date Range Picker
+
+```typescript
+import { Datex, SPANISH_LOCALE } from "datex-ui";
+
+// Using CSS selectors
+const picker = new Datex(
+  "#date-input", // ID selector
+  {
+    locale: SPANISH_LOCALE,
+    autoUpdateInput: true,
+  },
+  (startDate, endDate) => {
+    console.log(`Selected: ${startDate} to ${endDate}`);
+  }
+);
+
+// Also works with class selectors
+const picker2 = new Datex(".date-range-picker");
+
+// Or complex CSS selectors
+const picker3 = new Datex("[data-datex='range']");
+
+// Or DOM elements directly
+const picker4 = new Datex(document.getElementById("my-input"));
+```
+
+### Single Date Picker
+
+```typescript
+const singlePicker = new Datex("#single-date", {
+  singleDatePicker: true,
+  locale: SPANISH_LOCALE,
+});
+```
+
+### With Predefined Ranges
+
+```typescript
+import { getSpanishRanges } from "datex-ui";
+
+const picker = new Datex("#range-input", {
+  ranges: getSpanishRanges(), // Built-in Spanish ranges
+  locale: SPANISH_LOCALE,
+  autoApply: true,
+});
+
+// Or create custom ranges
+const customRanges = {
+  Hoy: [new Date(), new Date()],
+  Ayer: [
+    new Date(Date.now() - 24 * 60 * 60 * 1000),
+    new Date(Date.now() - 24 * 60 * 60 * 1000),
+  ],
+  "Últimos 7 días": [
+    new Date(Date.now() - 6 * 24 * 60 * 60 * 1000),
+    new Date(),
+  ],
+};
+
+const picker2 = new Datex("#custom-ranges", {
+  ranges: customRanges,
+  locale: SPANISH_LOCALE,
+});
+```
+
+### With Time Picker
+
+```typescript
+import { SPANISH_LOCALE_WITH_TIME } from "datex-ui";
+
+const timePicker = new Datex("#datetime-input", {
+  timePicker: true,
+  timePicker24Hour: true,
+  timePickerIncrement: 15,
+  locale: SPANISH_LOCALE_WITH_TIME,
+});
+```
+
+<!-- Add time picker screenshot here -->
+
+![Time Picker](./assets/images/screenshots/time-picker.png)
+
+### Custom Theme
+
+```typescript
+import { Datex } from "datex-ui";
+
+const customTheme = {
+  primaryColor: "#ff6b6b",
+  backgroundColor: "#ffffff",
+  borderColor: "#e1e5e9",
+  textColor: "#495057",
+  selectedColor: "#ff6b6b",
+  rangeColor: "#ffe0e0",
+};
+
+const picker = new Datex("#themed-input", {
+  theme: customTheme,
+});
+```
+
+### Mobile Responsive
+
+<!-- Add mobile screenshot here -->
+
+<!-- ![Mobile View](./assets/images/screenshots/mobile-view.png)-->
+
+## Configuration Options
+
+```typescript
+interface DatexOptions {
+  startDate?: Date; // Initial start date
+  endDate?: Date; // Initial end date
+  minDate?: Date | null; // Minimum selectable date
+  maxDate?: Date | null; // Maximum selectable date
+  minYear?: number; // Minimum year in dropdowns
+  maxYear?: number; // Maximum year in dropdowns
+  maxSpan?: { days?: number }; // Maximum range span
+  autoApply?: boolean; // Auto-apply selection
+  singleDatePicker?: boolean; // Single date mode
+  showDropdowns?: boolean; // Show month/year dropdowns
+  linkedCalendars?: boolean; // Link calendar navigation
+  autoUpdateInput?: boolean; // Auto-update input value
+  alwaysShowCalendars?: boolean; // Always show calendars
+  showCustomRangeLabel?: boolean; // Show "Custom Range" option
+  timePicker?: boolean; // Enable time picker
+  timePicker24Hour?: boolean; // 24-hour format
+  timePickerIncrement?: number; // Minute increment
+  timePickerSeconds?: boolean; // Show seconds
+  ranges?: Record<string, [Date, Date]>; // Predefined ranges
+  opens?: "left" | "right" | "center"; // Picker position
+  drops?: "up" | "down" | "auto"; // Picker direction
+  locale?: DatexLocale; // Localization
+  theme?: DatexTheme; // Theme configuration
+}
+```
+
+## Built-in Themes
+
+- `DEFAULT_THEME` - Clean, modern default theme
+- `BOOTSTRAP_THEME` - Bootstrap-compatible styling
+- `MATERIAL_THEME` - Material Design inspired theme
+
+## Built-in Locales
+
+- `SPANISH_LOCALE` - Spanish localization for dates
+- `SPANISH_LOCALE_WITH_TIME` - Spanish localization with time format
+
+## API Methods
+
+```typescript
+// Show/hide picker
+picker.show();
+picker.hide();
+picker.toggle();
+
+// Get/set dates
+const startDate = picker.getStartDate();
+const endDate = picker.getEndDate();
+picker.setStartDate(new Date());
+picker.setEndDate(new Date());
+
+// Theme management
+picker.setTheme(newTheme);
+picker.refreshTheme();
+
+// Update ranges
+picker.updateRanges(newRanges);
+
+// Cleanup
+picker.remove();
+```
+
+## Events
+
+The picker dispatches custom events:
+
+```typescript
+element.addEventListener("show.daterangepicker", (e) => {
+  console.log("Picker shown");
+});
+
+element.addEventListener("hide.daterangepicker", (e) => {
+  console.log("Picker hidden");
+});
+
+element.addEventListener("apply.daterangepicker", (e) => {
+  console.log("Selection applied");
+});
+
+element.addEventListener("cancel.daterangepicker", (e) => {
+  console.log("Selection cancelled");
+});
+```
+
+## Legacy Support
+
+For backward compatibility, you can still use the old names:
+
+```typescript
+import { DateRangePicker } from "datex-ui"; // Same as Datex
+// All DateRangePickerOptions, DateRangePickerTheme, etc. are available
+```
+
+## Browser Support
+
+- Chrome 60+
+- Firefox 60+
+- Safari 12+
+- Edge 79+
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm run dev
+
+# Build library
+pnpm run build
+
+# Run tests
+pnpm test
+
+# Type checking
+pnpm run type-check
+```
+
+## Testing
+
+Open `test.html` in your browser to see the library in action with various configurations.
+
+## License
+
+MIT License - see LICENSE file for details.
+
+## Contributing
+
+Contributions are welcome! Please read CONTRIBUTING.md for guidelines.

package/dist/constants/locales.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Predefined locales for DateX
+ */
+import type { DateRangePickerLocale } from "../types";
+export declare const ENGLISH_LOCALE: DateRangePickerLocale;
+export declare const SPANISH_LOCALE: DateRangePickerLocale;
+export declare const SPANISH_LOCALE_WITH_TIME: DateRangePickerLocale;
+export declare const FRENCH_LOCALE: DateRangePickerLocale;
+export declare const GERMAN_LOCALE: DateRangePickerLocale;

package/dist/constants/themes.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Predefined themes for DateX
+ */
+import type { DateRangePickerTheme } from "../types";
+export declare const DEFAULT_THEME: DateRangePickerTheme;
+export declare const BOOTSTRAP_THEME: DateRangePickerTheme;
+export declare const MATERIAL_THEME: DateRangePickerTheme;
+export declare const DARK_THEME: DateRangePickerTheme;

package/dist/datex.d.ts

@@ -0,0 +1,136 @@
+export interface DatexTheme {
+    primaryColor?: string;
+    secondaryColor?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    textColor?: string;
+    hoverColor?: string;
+    selectedColor?: string;
+    rangeColor?: string;
+    todayColor?: string;
+    disabledColor?: string;
+    applyButtonColor?: string;
+    cancelButtonColor?: string;
+    borderRadius?: string;
+    fontSize?: string;
+    fontFamily?: string;
+}
+export declare const DEFAULT_THEME: DatexTheme;
+export declare const BOOTSTRAP_THEME: DatexTheme;
+export declare const MATERIAL_THEME: DatexTheme;
+export interface DatexOptions {
+    startDate?: Date;
+    endDate?: Date;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    minYear?: number;
+    maxYear?: number;
+    maxSpan?: {
+        days?: number;
+    } | null;
+    autoApply?: boolean;
+    singleDatePicker?: boolean;
+    showDropdowns?: boolean;
+    linkedCalendars?: boolean;
+    autoUpdateInput?: boolean;
+    alwaysShowCalendars?: boolean;
+    showCustomRangeLabel?: boolean;
+    timePicker?: boolean;
+    timePicker24Hour?: boolean;
+    timePickerIncrement?: number;
+    timePickerSeconds?: boolean;
+    ranges?: Record<string, [Date, Date]>;
+    opens?: "left" | "right" | "center";
+    drops?: "up" | "down" | "auto";
+    locale?: DatexLocale;
+    buttonClasses?: string;
+    applyButtonClasses?: string;
+    cancelButtonClasses?: string;
+    theme?: DatexTheme;
+}
+export interface DatexLocale {
+    format: string;
+    separator: string;
+    applyLabel: string;
+    cancelLabel: string;
+    customRangeLabel: string;
+    daysOfWeek: string[];
+    monthNames: string[];
+    firstDay: number;
+}
+export declare const SPANISH_LOCALE: DatexLocale;
+export declare const SPANISH_LOCALE_WITH_TIME: DatexLocale;
+export type DatexCallback = (startDate: Date, endDate: Date, label?: string) => void;
+export declare class Datex {
+    private element;
+    private container;
+    private options;
+    private locale;
+    private theme;
+    private callback;
+    private state;
+    private boundHandlers;
+    private resizeHandler?;
+    private scrollHandler?;
+    private documentClickHandler?;
+    private documentFocusHandler?;
+    constructor(element: HTMLElement | string, options?: DatexOptions, callback?: DatexCallback);
+    private applyTheme;
+    private generateThemeCSS;
+    setTheme(theme: DatexTheme): void;
+    refreshTheme(): void;
+    getCurrentTheme(): DatexTheme;
+    testDropdowns(): void;
+    private mergeOptions;
+    private createContainer;
+    private renderRanges;
+    private setupEventListeners;
+    private addEventHandler;
+    private containerChange;
+    private containerMouseOver;
+    private containerMouseLeave;
+    private containerClick;
+    private preventBlur;
+    show(): void;
+    hide(): void;
+    private removeDocumentListeners;
+    private outsideClick;
+    private outsideFocus;
+    toggle(): void;
+    private updateView;
+    private updateMonthsInView;
+    private getStartOfMonth;
+    private getEndOfMonth;
+    private getStartOfWeek;
+    private updateCalendars;
+    private renderCalendar;
+    private renderDropdowns;
+    private getDayClasses;
+    private updateFormInputs;
+    private updateSelectedDisplay;
+    private renderTimePicker;
+    private timeChanged;
+    private updateElement;
+    private move;
+    private clickRange;
+    private clickPrev;
+    private clickNext;
+    private clickDate;
+    private hoverDate;
+    private updateDateClasses;
+    private clickApply;
+    private clickCancel;
+    private monthOrYearChanged;
+    private elementChanged;
+    private keydown;
+    private showCalendars;
+    private hideCalendars;
+    private calculateChosenLabel;
+    setStartDate(date: Date): void;
+    setEndDate(date: Date): void;
+    getStartDate(): Date;
+    getEndDate(): Date | null;
+    remove(): void;
+    updateRanges(newRanges: Record<string, [Date, Date]>): void;
+    private dispatchEvent;
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import "./datex.scss";
+export { Datex } from "./datex";
+export type { DatexOptions, DatexTheme, DatexLocale, DatexCallback, } from "./datex";
+export { DEFAULT_THEME, BOOTSTRAP_THEME, MATERIAL_THEME } from "./datex";
+export { SPANISH_LOCALE, SPANISH_LOCALE_WITH_TIME } from "./datex";