datex-ui 1.0.0

package/dist/style.css

@@ -0,0 +1 @@
+.datex-picker{position:absolute;color:inherit;background-color:#fff;border-radius:4px;border:1px solid #ddd;width:278px;max-width:none;padding:0;margin-top:7px;top:100px;left:20px;z-index:3001!important;display:none;font-family:arial;font-size:15px;line-height:1em;-webkit-user-select:none;user-select:none}.datex-picker:focus-within{z-index:3001!important}.datex-picker:before,.datex-picker:after{position:absolute;display:inline-block;border-bottom-color:#0003;content:""}.datex-picker:before{top:-7px;border-right:7px solid transparent;border-left:7px solid transparent;border-bottom:7px solid #ccc}.datex-picker:after{top:-6px;border-right:6px solid transparent;border-bottom:6px solid #fff;border-left:6px solid transparent}.datex-picker.opensleft:before{right:9px}.datex-picker.opensleft:after{right:10px}.datex-picker.openscenter:before,.datex-picker.openscenter:after{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.datex-picker.opensright:before{left:9px}.datex-picker.opensright:after{left:10px}.datex-picker.drop-up{margin-top:-7px}.datex-picker.drop-up:before{top:initial;bottom:-7px;border-bottom:initial;border-top:7px solid #ccc}.datex-picker.drop-up:after{top:initial;bottom:-6px;border-bottom:initial;border-top:6px solid #fff}.datex-picker.single .ranges,.datex-picker.single .drp-calendar{float:none}.datex-picker.single .drp-selected{display:none}.datex-picker.show-calendar .drp-calendar,.datex-picker.show-calendar .drp-buttons{display:block}.datex-picker.auto-apply .drp-buttons{display:none}.datex-picker .drp-calendar{display:none;max-width:270px}.datex-picker .drp-calendar.left{padding:6px 0 6px 6px}.datex-picker .drp-calendar.right{padding:6px}.datex-picker .drp-calendar.single .calendar-table{border:none}.datex-picker .calendar-table{border:1px solid #fff;border-radius:4px;background-color:#fff}.datex-picker .calendar-table table{width:100%;margin:0;border-spacing:0;border-collapse:collapse}.datex-picker .calendar-table .next span,.datex-picker .calendar-table .prev span{color:#fff;border:solid black;border-width:0 2px 2px 0;border-radius:0;display:inline-block}.datex-picker .calendar-table .next span{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.datex-picker .calendar-table .prev span{transform:rotate(135deg);-webkit-transform:rotate(135deg)}.datex-picker .calendar-table .next,.datex-picker .calendar-table .prev{cursor:pointer;-webkit-user-select:none;user-select:none;width:32px;height:28px}.datex-picker .calendar-table .next:hover,.datex-picker .calendar-table .prev:hover{background-color:#f0f0f0}.datex-picker .calendar-table th,.datex-picker .calendar-table td{white-space:nowrap;text-align:center;vertical-align:middle;min-width:28px;width:28px;height:22px;line-height:20px;font-size:11px;border-radius:3px;border:1px solid transparent;cursor:pointer}.datex-picker .calendar-table th{font-weight:600;color:#6b7280;cursor:default}.datex-picker .calendar-table th.month{width:auto;font-weight:700;color:#111827}.datex-picker .calendar-table td.available:hover,.datex-picker .calendar-table th.available:hover{background-color:#eee;border-color:transparent;color:inherit}.datex-picker .calendar-table td.week,.datex-picker .calendar-table th.week{font-size:80%;color:#ccc}.datex-picker .calendar-table td.off,.datex-picker .calendar-table td.off.in-range,.datex-picker .calendar-table td.off.start-date,.datex-picker .calendar-table td.off.end-date{background-color:#fff;border-color:transparent;color:#999;cursor:not-allowed}.datex-picker .calendar-table td.in-range{background-color:#ebf4f8;border-color:transparent;color:#000;border-radius:0}.datex-picker .calendar-table td.start-date{border-radius:3px 0 0 3px;background-color:#357ebd;color:#fff}.datex-picker .calendar-table td.start-date.end-date{border-radius:3px}.datex-picker .calendar-table td.end-date{border-radius:0 3px 3px 0;background-color:#357ebd;color:#fff}.datex-picker .calendar-table td.active,.datex-picker .calendar-table td.active:hover{background-color:#357ebd;border-color:transparent;color:#fff}.datex-picker .calendar-table td.today{font-weight:600;color:#357ebd}.datex-picker .calendar-table td.weekend{color:#ef4444}.datex-picker .calendar-table td.disabled,.datex-picker .calendar-table option.disabled{color:#999;cursor:not-allowed;text-decoration:line-through}.datex-picker .calendar-table select.monthselect,.datex-picker .calendar-table select.yearselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default;border:1px solid #ddd;border-radius:4px;background-color:#fff}.datex-picker .calendar-table select.monthselect:focus,.datex-picker .calendar-table select.yearselect:focus{outline:none;border-color:#357ebd;box-shadow:0 0 0 3px #357ebd1a}.datex-picker .calendar-table select.monthselect{margin-right:2%;width:56%}.datex-picker .calendar-table select.yearselect{width:40%}.datex-picker .calendar-time{text-align:center;margin:4px auto 0;line-height:30px;position:relative}.datex-picker .calendar-time select.hourselect,.datex-picker .calendar-time select.minuteselect,.datex-picker .calendar-time select.secondselect,.datex-picker .calendar-time select.ampmselect{width:50px;margin:0 auto;background:#eee;border:1px solid #eee;padding:2px;outline:0;font-size:12px;border-radius:4px}.datex-picker .calendar-time select.hourselect:focus,.datex-picker .calendar-time select.minuteselect:focus,.datex-picker .calendar-time select.secondselect:focus,.datex-picker .calendar-time select.ampmselect:focus{border-color:#357ebd;box-shadow:0 0 0 3px #357ebd1a}.datex-picker .calendar-time select.hourselect.disabled,.datex-picker .calendar-time select.minuteselect.disabled,.datex-picker .calendar-time select.secondselect.disabled,.datex-picker .calendar-time select.ampmselect.disabled{color:#ccc;cursor:not-allowed;background-color:#f3f4f6}.datex-picker .ranges{float:none;text-align:left;margin:0}.datex-picker .ranges ul{list-style:none;margin:0 auto;padding:0;width:100%}.datex-picker .ranges li{font-size:12px;padding:8px 12px;cursor:pointer;transition:all .15s ease-in-out}.datex-picker .ranges li:hover{background-color:#eee}.datex-picker .ranges li.active{background-color:#08c;color:#fff}.datex-picker.show-calendar .ranges{margin-top:8px}.datex-picker .drp-buttons{border-top:1px solid #ddd;vertical-align:middle;clear:both;text-align:right;padding:2px;display:none;line-height:10px}.datex-picker .drp-buttons .drp-selected{display:inline-block;font-size:12px;padding-right:8px}.datex-picker .drp-buttons .btn{border:1px solid transparent;border-radius:3px;cursor:pointer;transition:all .15s ease-in-out;margin-left:8px;font-size:12px;font-weight:700;padding:8px!important;background-color:red}.datex-picker .drp-buttons .btn:focus{outline:none;box-shadow:0 0 0 2px #357ebd1a}.datex-picker .drp-buttons .btn:disabled{opacity:.5;cursor:not-allowed}.datex-picker .drp-buttons .btn.btn-success{background-color:#007bff;color:#fff;border-color:#007bff}.datex-picker .drp-buttons .btn.btn-success:hover:not(:disabled){background-color:#0056b3;border-color:#0056b3}.datex-picker .drp-buttons .btn.btn-danger{background-color:#6c757d;color:#fff;border-color:#6c757d}.datex-picker .drp-buttons .btn.btn-danger:hover:not(:disabled){background-color:#545b62;border-color:#545b62}@media (min-width: 564px){.datex-picker{width:auto}.datex-picker .ranges ul{width:140px}.datex-picker.single .ranges ul{width:100%}.datex-picker.single .drp-calendar.left{clear:none}.datex-picker.single .ranges,.datex-picker.single .drp-calendar{float:left}.datex-picker{direction:ltr;text-align:left}.datex-picker .drp-calendar.left{clear:left;margin-right:0}.datex-picker .drp-calendar.left .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;padding-right:8px}.datex-picker .drp-calendar.right{margin-left:0}.datex-picker .drp-calendar.right .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.datex-picker .ranges,.datex-picker .drp-calendar{float:left}}@media (min-width: 730px){.datex-picker .ranges{width:auto;float:left}.datex-picker .drp-calendar.left{clear:none!important}}

package/dist/tests/setup.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Type definitions for DateX library
+ */
+export interface DateRangePickerTheme {
+    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 interface DateRangePickerLocale {
+    format: string;
+    separator: string;
+    applyLabel: string;
+    cancelLabel: string;
+    customRangeLabel: string;
+    daysOfWeek: string[];
+    monthNames: string[];
+    firstDay: number;
+}
+export interface DateRangePickerOptions {
+    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?: DateRangePickerLocale;
+    buttonClasses?: string;
+    applyButtonClasses?: string;
+    cancelButtonClasses?: string;
+    theme?: DateRangePickerTheme;
+}
+export type DateRangePickerCallback = (startDate: Date, endDate: Date, label?: string) => void;
+export interface CalendarState {
+    month: Date;
+    calendar: Date[][];
+}
+export interface PickerState {
+    startDate: Date;
+    endDate: Date | null;
+    oldStartDate: Date;
+    oldEndDate: Date | null;
+    isShowing: boolean;
+    leftCalendar: CalendarState;
+    rightCalendar: CalendarState;
+    chosenLabel: string | null;
+    hoverDate: Date | null;
+}

package/dist/utils/dateHelpers.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Date utility functions for DateX
+ */
+export declare function format(date: Date, formatStr: string): string;
+export declare function parse(dateStr: string, formatStr: string): Date;
+export declare function addDay(date: Date, days: number): Date;
+export declare function addMonth(date: Date, months: number): Date;
+export declare function dayStart(date: Date): Date;
+export declare function dayEnd(date: Date): Date;
+export declare function isAfter(date1: Date, date2: Date): boolean;
+export declare function isBefore(date1: Date, date2: Date): boolean;
+export declare function isSame(date1: Date, date2: Date, unit?: "day" | "month" | "year"): boolean;
+export declare function isValid(date: Date | null | undefined): date is Date;
+export declare function getStartOfMonth(date: Date): Date;
+export declare function getEndOfMonth(date: Date): Date;
+export declare function getStartOfWeek(date: Date, firstDay?: number): Date;
+/**
+ * Generate common date ranges
+ */
+export declare function getCommonRanges(): Record<string, [Date, Date]>;
+/**
+ * Generate Spanish date ranges
+ */
+export declare function getSpanishRanges(): Record<string, [Date, Date]>;

package/dist/utils/domHelpers.d.ts

@@ -0,0 +1,30 @@
+/**
+ * DOM utility functions for DateX
+ */
+/**
+ * Generate unique ID for theme styles
+ */
+export declare function generateStyleId(): string;
+/**
+ * Create DOM element from HTML string
+ */
+export declare function createElementFromHTML(html: string): HTMLElement;
+/**
+ * Check if element matches selector
+ */
+export declare function matches(element: Element, selector: string): boolean;
+/**
+ * Find closest parent element matching selector
+ */
+export declare function closest(element: Element, selector: string): Element | null;
+/**
+ * Add event listener with cleanup tracking
+ */
+export declare function addEventListener(element: HTMLElement | Document | Window, event: string, handler: EventListener, options?: boolean | AddEventListenerOptions): () => void;
+/**
+ * Position element relative to target
+ */
+export declare function positionElement(element: HTMLElement, target: HTMLElement, options?: {
+    opens?: "left" | "right" | "center";
+    drops?: "up" | "down" | "auto";
+}): void;

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "datex-ui",
+  "access": "public",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A modern, lightweight, and customizable date range picker for TypeScript/JavaScript applications",
+  "main": "dist/index.esm.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "assets/images/*.png",
+    "assets/images/*.jpg",
+    "assets/images/*.gif",
+    "assets/images/screenshots/*.png",
+    "assets/images/screenshots/*.jpg",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "build:watch": "vite build --watch",
+    "dev": "vite dev --config vite.dev.config.ts",
+    "dev:simple": "vite serve dev --port 3000 --open",
+    "test": "vitest --run",
+    "test:watch": "vitest",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "type-check": "tsc --noEmit",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "docs:install": "cd docs && pnpm install"
+  },
+  "keywords": [
+    "date-picker",
+    "date-range-picker",
+    "typescript",
+    "calendar",
+    "datepicker",
+    "ui-component",
+    "vanilla-js",
+    "lightweight"
+  ],
+  "author": "Emilio Senguana sengua2017@gmail.com",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/senguanasoft/datex-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/senguanasoft/datex-ui/issues"
+  },
+  "homepage": "https://datex-docs.vercel.app",
+  "devDependencies": {
+    "@types/node": "^20.10.5",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
+    "eslint": "^8.56.0",
+    "jsdom": "^23.2.0",
+    "sass": "^1.69.5",
+    "sass-embedded": "^1.97.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vitepress": "^1.0.0-rc.31",
+    "vitest": "^1.1.0"
+  },
+  "engines": {
+    "node": ">=16.0.0",
+    "pnpm": ">=8.0.0"
+  },
+  "packageManager": "pnpm@8.15.0"
+}