@rushdi94/hijri-datepicker 1.0.1

package/dist/hijri-datepicker.umd.js

@@ -0,0 +1,749 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.HijriDatePickerLib = {}));
+})(this, (function (exports) { 'use strict';
+
+    // Tabular Islamic Calendar (arithmetic algorithm)
+    // Verified against known dates: 30 Dhu al-Qi'dah 1447 = 2026-05-17
+    const HIJRI_MONTHS_AR = [
+        'محرم', 'صفر', 'ربيع الأول', 'ربيع الآخر',
+        'جمادى الأولى', 'جمادى الآخرة', 'رجب', 'شعبان',
+        'رمضان', 'شوال', 'ذو القعدة', 'ذو الحجة',
+    ];
+    // Sunday → Saturday in Arabic
+    const WEEKDAY_AR = ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];
+    // ── calendar arithmetic ──────────────────────────────────────────────────────
+    function gToJDN(y, m, d) {
+        const a = Math.floor((14 - m) / 12);
+        const yr = y + 4800 - a;
+        const mo = m + 12 * a - 3;
+        return (d +
+            Math.floor((153 * mo + 2) / 5) +
+            365 * yr +
+            Math.floor(yr / 4) -
+            Math.floor(yr / 100) +
+            Math.floor(yr / 400) -
+            32045);
+    }
+    function jdnToG(jdn) {
+        const a = jdn + 32044;
+        const b = Math.floor((4 * a + 3) / 146097);
+        const c = a - Math.floor((b * 146097) / 4);
+        const dd = Math.floor((4 * c + 3) / 1461);
+        const e = c - Math.floor((1461 * dd) / 4);
+        const mo = Math.floor((5 * e + 2) / 153);
+        return [
+            b * 100 + dd - 4800 + Math.floor(mo / 10),
+            mo + 3 - 12 * Math.floor(mo / 10),
+            e - Math.floor((153 * mo + 2) / 5) + 1,
+        ];
+    }
+    function hToJDN(y, m, d) {
+        return (Math.floor((11 * y + 3) / 30) +
+            354 * y +
+            30 * m -
+            Math.floor((m - 1) / 2) +
+            d +
+            1948440 -
+            385);
+    }
+    function jdnToH(jdn) {
+        const l = jdn - 1948440 + 10632;
+        const n = Math.floor((l - 1) / 10631);
+        const ll = l - 10631 * n + 354;
+        const j = Math.floor((10985 - ll) / 5316) * Math.floor((50 * ll) / 17719) +
+            Math.floor(ll / 5670) * Math.floor((43 * ll) / 15238);
+        const lll = ll -
+            Math.floor((30 - j) / 15) * Math.floor((17719 * j) / 50) -
+            Math.floor(j / 16) * Math.floor((15238 * j) / 43) +
+            29;
+        const month = Math.floor((24 * lll) / 709);
+        const day = lll - Math.floor((709 * month) / 24);
+        const year = 30 * n + j - 30;
+        return [year, month, day];
+    }
+    // ── public helpers ───────────────────────────────────────────────────────────
+    function toHijri(date) {
+        const [year, month, day] = jdnToH(gToJDN(date.getFullYear(), date.getMonth() + 1, date.getDate()));
+        return { year, month, day };
+    }
+    function toGregorian(year, month, day) {
+        const [gy, gm, gd] = jdnToG(hToJDN(year, month, day));
+        return new Date(gy, gm - 1, gd);
+    }
+    function daysInMonth(year, month) {
+        const nm = month === 12 ? 1 : month + 1;
+        const ny = month === 12 ? year + 1 : year;
+        return hToJDN(ny, nm, 1) - hToJDN(year, month, 1);
+    }
+    function firstWeekday(year, month) {
+        return toGregorian(year, month, 1).getDay(); // 0 = Sunday
+    }
+    function todayHijri() {
+        return toHijri(new Date());
+    }
+    function formatHijri(h, fmt = 'DD/MM/YYYY') {
+        return fmt
+            .replace('YYYY', String(h.year))
+            .replace('MM', String(h.month).padStart(2, '0'))
+            .replace('DD', String(h.day).padStart(2, '0'))
+            .replace('M', String(h.month))
+            .replace('D', String(h.day));
+    }
+    function parseHijri(value, fmt = 'DD/MM/YYYY') {
+        try {
+            const sep = fmt.replace(/[DMY]/g, '').charAt(0);
+            const parts = value.split(sep).map(Number);
+            const fmtParts = fmt.split(sep);
+            const di = fmtParts.findIndex((p) => p.startsWith('D'));
+            const mi = fmtParts.findIndex((p) => p.startsWith('M'));
+            const yi = fmtParts.findIndex((p) => p.startsWith('Y'));
+            const d = parts[di], m = parts[mi], y = parts[yi];
+            if (!d || !m || !y || m < 1 || m > 12 || d < 1 || d > daysInMonth(y, m))
+                return null;
+            return { year: y, month: m, day: d };
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+
+    const CSS = /* css */ `
+/* ── HijriDatePicker ─────────────────────────────────────────────────────── */
+.hdp,
+.hdp *,
+.hdp *::before,
+.hdp *::after {
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
+}
+
+/* wrapper */
+.hdp-wrapper { position: relative; display: inline-block; }
+
+/* input */
+.hdp-input-wrap { position: relative; display: block; }
+.hdp-input {
+  width: 100%;
+  padding: 9px 14px 9px 38px;
+  border: 1.5px solid #d1d5db;
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  background: #fff;
+  outline: none;
+  color: #333;
+  min-width: 210px;
+  transition: border-color .2s, box-shadow .2s;
+  caret-color: transparent;
+  text-align: inherit;
+}
+[dir="rtl"] .hdp-input { padding: 9px 14px 9px 38px; text-align: right; }
+[dir="ltr"] .hdp-input { padding: 9px 38px 9px 14px; text-align: left; }
+.hdp-input::placeholder { color: #aaa; }
+.hdp-input:focus,
+.hdp-input.open {
+  border-color: var(--hdp-primary, #8b1a2e);
+  box-shadow: 0 0 0 3px rgba(139,26,46,.14);
+}
+.hdp-input-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: #9ca3af;
+  width: 18px;
+  height: 18px;
+}
+[dir="rtl"] .hdp-input-icon { left: 10px; right: auto; }
+[dir="ltr"] .hdp-input-icon { right: 10px; left: auto; }
+
+/* ── popup ───────────────────────────────────────────────────────────────── */
+.hdp-popup {
+  position: absolute;
+  top: calc(100% + 6px);
+  z-index: 99999;
+}
+[dir="rtl"] .hdp-popup { right: 0; left: auto; }
+[dir="ltr"] .hdp-popup { left: 0; right: auto; }
+.hdp-popup {
+  width: 312px;
+  border-radius: 12px;
+  overflow: visible;
+  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
+  background: var(--hdp-body-bg, #fff);
+  animation: _hdpIn .15s cubic-bezier(.2,.8,.4,1);
+}
+
+/* upward-pointing caret connecting popup to the input */
+.hdp-popup:not(.hdp-inline)::before {
+  content: '';
+  position: absolute;
+  top: -8px;
+  width: 0; height: 0;
+  border-left: 9px solid transparent;
+  border-right: 9px solid transparent;
+  border-bottom: 9px solid var(--hdp-primary, #8b1a2e);
+  pointer-events: none;
+}
+[dir="rtl"] .hdp-popup:not(.hdp-inline)::before { right: 18px; left: auto; }
+[dir="ltr"] .hdp-popup:not(.hdp-inline)::before { left: 18px; right: auto; }
+@keyframes _hdpIn {
+  from { opacity: 0; transform: translateY(-8px) scale(.97); }
+  to   { opacity: 1; transform: translateY(0)  scale(1);    }
+}
+.hdp-popup.hdp-inline {
+  position: static;
+  box-shadow: 0 2px 16px rgba(0,0,0,.1);
+  animation: none;
+}
+
+/* ── header ──────────────────────────────────────────────────────────────── */
+.hdp-header {
+  background: var(--hdp-primary, #8b1a2e);
+  color: var(--hdp-on-primary, #fff);
+  display: flex;
+  flex-direction: row;        /* always LTR regardless of dir attribute */
+  align-items: stretch;
+  height: 44px;
+  user-select: none;
+}
+
+/* prev / next month arrows */
+.hdp-nav {
+  flex-shrink: 0;
+  width: 36px;
+  border: none;
+  background: transparent;
+  color: var(--hdp-on-primary, #fff);
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 18px;
+  transition: background .15s;
+  line-height: 1;
+}
+.hdp-nav:hover { background: rgba(255,255,255,.18); }
+
+/* ── month half (left 50%) ───────────────────────────────────────────────── */
+.hdp-month-half {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-right: 1px solid rgba(255,255,255,.2);
+  padding: 0 4px;
+  min-width: 0;
+}
+
+.hdp-month-select {
+  width: 100%;
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
+  border: none;
+  padding: 6px 26px 6px 10px;
+  font-size: 14px; font-weight: 700;
+  color: var(--hdp-on-primary, #fff);
+  cursor: pointer;
+  outline: none;
+  text-align: center;
+  text-align-last: center;
+  letter-spacing: .2px;
+}
+[dir="rtl"] .hdp-month-select {
+  background-position: left 8px center;
+  padding: 6px 10px 6px 26px;
+}
+.hdp-month-select:hover { background-color: rgba(255,255,255,.12); border-radius: 6px; }
+.hdp-month-select option { background: #fff; color: #111; font-weight: 600; }
+
+/* ── year half (right 50%) ───────────────────────────────────────────────── */
+.hdp-year-half {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 6px;
+  min-width: 0;
+}
+
+/* inner wrapper: year number + arrows in a row */
+.hdp-year-inner {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.hdp-year-display {
+  font-size: 15px; font-weight: 800;
+  color: var(--hdp-on-primary, #fff);
+  letter-spacing: .4px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* arrows: collapsed (width 0) when not hovered, slide in on hover */
+.hdp-year-arrows {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-width: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: max-width .18s ease, opacity .18s ease;
+}
+.hdp-year-half:hover .hdp-year-arrows {
+  max-width: 22px;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.hdp-year-arrow {
+  background: none;
+  border: none;
+  color: var(--hdp-on-primary, #fff);
+  cursor: pointer;
+  width: 18px; height: 13px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 7px;
+  border-radius: 3px;
+  padding: 0;
+  line-height: 1;
+  flex-shrink: 0;
+  transition: background .12s;
+}
+.hdp-year-arrow:hover { background: rgba(255,255,255,.25); }
+
+/* ── weekday row ─────────────────────────────────────────────────────────── */
+.hdp-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  background: var(--hdp-primary, #8b1a2e);
+  padding: 0 10px 10px;
+}
+.hdp-wday {
+  text-align: center;
+  font-size: 11.5px;
+  color: var(--hdp-on-primary, #fff);
+  opacity: .82;
+  font-weight: 500;
+  padding: 3px 0;
+}
+
+/* ── days ────────────────────────────────────────────────────────────────── */
+.hdp-days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  padding: 8px 8px 12px;
+  gap: 2px;
+  border-radius: 0 0 12px 12px;
+  background: var(--hdp-body-bg, #fff);
+}
+.hdp-day {
+  aspect-ratio: 1;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 50%;
+  font-size: 13.5px;
+  cursor: pointer;
+  color: var(--hdp-day-color, #1f2937);
+  transition: background .12s, color .12s, transform .08s;
+  font-weight: 400;
+  border: 2px solid transparent;
+}
+.hdp-day:not(.hdp-empty):hover {
+  background: var(--hdp-hover-bg, rgba(139,26,46,.1));
+  transform: scale(1.08);
+}
+.hdp-day.hdp-today:not(.hdp-selected) {
+  border-color: var(--hdp-primary, #8b1a2e);
+  color: var(--hdp-primary, #8b1a2e);
+  font-weight: 700;
+}
+.hdp-day.hdp-selected {
+  background: var(--hdp-primary, #8b1a2e) !important;
+  color: var(--hdp-on-primary, #fff) !important;
+  font-weight: 700;
+  border-color: transparent !important;
+  transform: scale(1.1);
+}
+.hdp-day.hdp-empty {
+  cursor: default;
+  pointer-events: none;
+}
+`;
+
+    // ── style injection (once per page) ─────────────────────────────────────────
+    let _stylesInjected = false;
+    function ensureStyles() {
+        if (_stylesInjected || typeof document === 'undefined')
+            return;
+        _stylesInjected = true;
+        const el = document.createElement('style');
+        el.dataset.hdpStyles = '1';
+        el.textContent = CSS;
+        document.head.appendChild(el);
+    }
+    // ── component ────────────────────────────────────────────────────────────────
+    const DEFAULT_WEEKDAYS_AR = [...WEEKDAY_AR];
+    const DEFAULT_WEEKDAYS_EN = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    class HijriDatePicker {
+        // ── constructor ────────────────────────────────────────────────────────────
+        constructor(options) {
+            var _a;
+            this.selected = null;
+            // ── event handlers ─────────────────────────────────────────────────────────
+            this._onDocClick = (e) => {
+                if (!this.root.contains(e.target))
+                    this._close();
+            };
+            this._onKeyDown = (e) => {
+                if (e.key === 'Escape')
+                    this._close();
+            };
+            if (!options.container)
+                throw new Error('HijriDatePicker: "container" is required');
+            const today = todayHijri();
+            const dir = (_a = options.dir) !== null && _a !== void 0 ? _a : 'rtl';
+            const defaults = {
+                inline: false,
+                dir,
+                placeholder: dir === 'rtl' ? 'اختر تاريخاً هجرياً' : 'Select Hijri date',
+                weekdayLabels: dir === 'rtl' ? DEFAULT_WEEKDAYS_AR : DEFAULT_WEEKDAYS_EN,
+                monthLabels: [...HIJRI_MONTHS_AR],
+                primaryColor: '#8b1a2e',
+                onPrimaryColor: '#ffffff',
+                bodyBg: '#ffffff',
+                dayColor: '#1f2937',
+                format: 'DD/MM/YYYY',
+                initialDate: today,
+                editable: false,
+                container: options.container,
+                onSelect: () => undefined,
+                onOpen: () => undefined,
+                onClose: () => undefined,
+            };
+            this.opts = { ...defaults, ...options, dir };
+            this.isRTL = this.opts.dir === 'rtl';
+            this.viewYear = this.opts.initialDate.year;
+            this.viewMonth = this.opts.initialDate.month;
+            ensureStyles();
+            this._mount();
+        }
+        // ── mount ──────────────────────────────────────────────────────────────────
+        _mount() {
+            const containerEl = typeof this.opts.container === 'string'
+                ? document.querySelector(this.opts.container)
+                : this.opts.container;
+            if (!containerEl)
+                throw new Error('HijriDatePicker: container element not found');
+            this.root = document.createElement('div');
+            this.root.className = 'hdp hdp-wrapper';
+            this.root.dir = this.opts.dir;
+            this._applyVars(this.root);
+            if (!this.opts.inline) {
+                this.root.appendChild(this._buildInput());
+            }
+            this.popup = this._buildPopup();
+            if (!this.opts.inline)
+                this.popup.style.display = 'none';
+            this.root.appendChild(this.popup);
+            containerEl.appendChild(this.root);
+            if (!this.opts.inline) {
+                document.addEventListener('click', this._onDocClick, true);
+                document.addEventListener('keydown', this._onKeyDown);
+            }
+        }
+        _applyVars(el) {
+            const { primaryColor, onPrimaryColor, bodyBg, dayColor, primaryColor: p } = this.opts;
+            el.style.setProperty('--hdp-primary', primaryColor);
+            el.style.setProperty('--hdp-on-primary', onPrimaryColor);
+            el.style.setProperty('--hdp-body-bg', bodyBg);
+            el.style.setProperty('--hdp-day-color', dayColor);
+            el.style.setProperty('--hdp-hover-bg', `${p}1a`);
+        }
+        // ── input ──────────────────────────────────────────────────────────────────
+        _buildInput() {
+            const wrap = document.createElement('div');
+            wrap.className = 'hdp-input-wrap';
+            this.inputEl = document.createElement('input');
+            this.inputEl.type = 'text';
+            this.inputEl.className = 'hdp-input';
+            this.inputEl.placeholder = this.opts.placeholder;
+            this.inputEl.readOnly = !this.opts.editable;
+            this.inputEl.setAttribute('autocomplete', 'off');
+            this.inputEl.addEventListener('click', () => this._open());
+            if (this.opts.editable) {
+                this.inputEl.addEventListener('input', () => {
+                    const parsed = parseHijri(this.inputEl.value, this.opts.format);
+                    if (parsed)
+                        this._applySelection(parsed, false);
+                });
+            }
+            const icon = document.createElement('span');
+            icon.className = 'hdp-input-icon';
+            icon.innerHTML =
+                `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">` +
+                    `<rect x="3" y="4" width="18" height="18" rx="2"/>` +
+                    `<line x1="16" y1="2" x2="16" y2="6"/>` +
+                    `<line x1="8" y1="2" x2="8" y2="6"/>` +
+                    `<line x1="3" y1="10" x2="21" y2="10"/>` +
+                    `</svg>`;
+            wrap.appendChild(this.inputEl);
+            wrap.appendChild(icon);
+            return wrap;
+        }
+        // ── popup ──────────────────────────────────────────────────────────────────
+        _buildPopup() {
+            const popup = document.createElement('div');
+            popup.className = this.opts.inline ? 'hdp-popup hdp-inline' : 'hdp-popup';
+            popup.dir = this.opts.dir;
+            if (!this.isRTL && !this.opts.inline) {
+                popup.style.right = 'auto';
+                popup.style.left = '0';
+            }
+            popup.setAttribute('role', 'dialog');
+            popup.setAttribute('aria-label', this.isRTL ? 'منتقي التاريخ الهجري' : 'Hijri Date Picker');
+            popup.appendChild(this._buildHeader());
+            popup.appendChild(this._buildWeekdays());
+            this.daysGrid = this._buildDaysGrid();
+            popup.appendChild(this.daysGrid);
+            return popup;
+        }
+        // ── header ─────────────────────────────────────────────────────────────────
+        _buildHeader() {
+            const hdr = document.createElement('div');
+            hdr.className = 'hdp-header';
+            // ── Month half (left) ─────────────────────────────────────────
+            const monthHalf = document.createElement('div');
+            monthHalf.className = 'hdp-month-half';
+            this.monthSelectEl = document.createElement('select');
+            this.monthSelectEl.className = 'hdp-month-select';
+            this.monthSelectEl.setAttribute('aria-label', this.isRTL ? 'الشهر' : 'Month');
+            this.opts.monthLabels.forEach((name, i) => {
+                const opt = document.createElement('option');
+                opt.value = String(i + 1);
+                opt.textContent = name;
+                this.monthSelectEl.appendChild(opt);
+            });
+            this.monthSelectEl.addEventListener('change', () => {
+                this.viewMonth = Number(this.monthSelectEl.value);
+                this._renderDays();
+            });
+            monthHalf.appendChild(this.monthSelectEl);
+            // ── Year half (right) ─────────────────────────────────────────
+            const yearHalf = document.createElement('div');
+            yearHalf.className = 'hdp-year-half';
+            // Inner group: year number + arrows side by side
+            const yearInner = document.createElement('div');
+            yearInner.className = 'hdp-year-inner';
+            this.yearDisplayEl = document.createElement('span');
+            this.yearDisplayEl.className = 'hdp-year-display';
+            const yearArrows = document.createElement('div');
+            yearArrows.className = 'hdp-year-arrows';
+            const yearUp = document.createElement('button');
+            yearUp.className = 'hdp-year-arrow';
+            yearUp.innerHTML = '▲';
+            yearUp.setAttribute('aria-label', this.isRTL ? 'السنة التالية' : 'Next year');
+            yearUp.addEventListener('click', () => {
+                this.viewYear++;
+                this._syncHeader();
+                this._renderDays();
+            });
+            const yearDown = document.createElement('button');
+            yearDown.className = 'hdp-year-arrow';
+            yearDown.innerHTML = '▼';
+            yearDown.setAttribute('aria-label', this.isRTL ? 'السنة السابقة' : 'Previous year');
+            yearDown.addEventListener('click', () => {
+                this.viewYear--;
+                this._syncHeader();
+                this._renderDays();
+            });
+            yearArrows.appendChild(yearUp);
+            yearArrows.appendChild(yearDown);
+            yearInner.appendChild(this.yearDisplayEl);
+            yearInner.appendChild(yearArrows);
+            yearHalf.appendChild(yearInner);
+            // ── Assemble: [‹] [month | year] [›]  (always LTR order) ─────
+            hdr.appendChild(this._navBtn('‹', -1));
+            hdr.appendChild(monthHalf);
+            hdr.appendChild(yearHalf);
+            hdr.appendChild(this._navBtn('›', 1));
+            this._syncHeader();
+            return hdr;
+        }
+        _navBtn(symbol, delta) {
+            const btn = document.createElement('button');
+            btn.className = 'hdp-nav';
+            btn.innerHTML = symbol;
+            btn.setAttribute('aria-label', delta > 0 ? 'الشهر التالي' : 'الشهر السابق');
+            btn.addEventListener('click', () => this._navigate(delta));
+            return btn;
+        }
+        _syncHeader() {
+            this.monthSelectEl.value = String(this.viewMonth);
+            this.yearDisplayEl.textContent = String(this.viewYear);
+        }
+        // ── weekdays ───────────────────────────────────────────────────────────────
+        _buildWeekdays() {
+            const row = document.createElement('div');
+            row.className = 'hdp-weekdays';
+            this.opts.weekdayLabels.forEach((name) => {
+                const cell = document.createElement('div');
+                cell.className = 'hdp-wday';
+                cell.textContent = name;
+                row.appendChild(cell);
+            });
+            return row;
+        }
+        // ── days grid ──────────────────────────────────────────────────────────────
+        _buildDaysGrid() {
+            const grid = document.createElement('div');
+            grid.className = 'hdp-days';
+            this._renderDays(grid);
+            return grid;
+        }
+        _renderDays(grid) {
+            const g = grid !== null && grid !== void 0 ? grid : this.daysGrid;
+            g.innerHTML = '';
+            const today = todayHijri();
+            const total = daysInMonth(this.viewYear, this.viewMonth);
+            const start = firstWeekday(this.viewYear, this.viewMonth);
+            for (let i = 0; i < start; i++) {
+                const blank = document.createElement('div');
+                blank.className = 'hdp-day hdp-empty';
+                g.appendChild(blank);
+            }
+            for (let d = 1; d <= total; d++) {
+                const cell = document.createElement('div');
+                cell.className = 'hdp-day';
+                cell.textContent = String(d);
+                cell.setAttribute('role', 'button');
+                cell.setAttribute('tabindex', '0');
+                cell.setAttribute('aria-label', `${d} ${this.opts.monthLabels[this.viewMonth - 1]} ${this.viewYear}`);
+                const isToday = d === today.day && this.viewMonth === today.month && this.viewYear === today.year;
+                const isSel = this.selected !== null &&
+                    d === this.selected.day &&
+                    this.viewMonth === this.selected.month &&
+                    this.viewYear === this.selected.year;
+                if (isToday)
+                    cell.classList.add('hdp-today');
+                if (isSel)
+                    cell.classList.add('hdp-selected');
+                cell.addEventListener('click', () => this._pickDay(d));
+                cell.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this._pickDay(d);
+                    }
+                });
+                g.appendChild(cell);
+            }
+        }
+        // ── navigation ─────────────────────────────────────────────────────────────
+        _navigate(delta) {
+            this.viewMonth += delta;
+            if (this.viewMonth > 12) {
+                this.viewMonth = 1;
+                this.viewYear++;
+            }
+            if (this.viewMonth < 1) {
+                this.viewMonth = 12;
+                this.viewYear--;
+            }
+            this._syncHeader();
+            this._renderDays();
+        }
+        // ── selection ──────────────────────────────────────────────────────────────
+        _pickDay(day) {
+            this._applySelection({ year: this.viewYear, month: this.viewMonth, day }, true);
+        }
+        _applySelection(date, closeAfter) {
+            this.selected = { ...date };
+            this.viewYear = date.year;
+            this.viewMonth = date.month;
+            const fmt = formatHijri(date, this.opts.format);
+            if (this.inputEl)
+                this.inputEl.value = fmt;
+            this._syncHeader();
+            this._renderDays();
+            this.opts.onSelect(date, fmt);
+            if (closeAfter && !this.opts.inline)
+                this._close();
+        }
+        // ── open / close ───────────────────────────────────────────────────────────
+        _open() {
+            var _a;
+            if (this.popup.style.display !== 'none')
+                return;
+            this.popup.style.display = 'block';
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.classList.add('open');
+            this.opts.onOpen();
+        }
+        _close() {
+            var _a;
+            if (this.popup.style.display === 'none')
+                return;
+            this.popup.style.display = 'none';
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.classList.remove('open');
+            this.opts.onClose();
+        }
+        // ── public API ─────────────────────────────────────────────────────────────
+        /** Get the currently selected Hijri date (or null) */
+        getValue() {
+            return this.selected ? { ...this.selected } : null;
+        }
+        /** Programmatically select a date */
+        setValue(date) {
+            this._applySelection(date, false);
+        }
+        /** Clear the selected date */
+        clear() {
+            this.selected = null;
+            if (this.inputEl)
+                this.inputEl.value = '';
+            this._renderDays();
+        }
+        /** Navigate the calendar view to a specific month */
+        goTo(year, month) {
+            this.viewYear = year;
+            this.viewMonth = month;
+            this._syncHeader();
+            this._renderDays();
+        }
+        /** Update colors after instantiation */
+        setColors(opts) {
+            Object.assign(this.opts, opts);
+            this._applyVars(this.root);
+            this._renderDays();
+        }
+        /** Open the picker programmatically */
+        open() {
+            this._open();
+        }
+        /** Close the picker programmatically */
+        close() {
+            this._close();
+        }
+        /** Remove the picker from the DOM and clean up listeners */
+        destroy() {
+            document.removeEventListener('click', this._onDocClick, true);
+            document.removeEventListener('keydown', this._onKeyDown);
+            this.root.remove();
+        }
+    }
+
+    exports.HIJRI_MONTHS_AR = HIJRI_MONTHS_AR;
+    exports.HijriDatePicker = HijriDatePicker;
+    exports.WEEKDAY_AR = WEEKDAY_AR;
+    exports.daysInMonth = daysInMonth;
+    exports.firstWeekday = firstWeekday;
+    exports.formatHijri = formatHijri;
+    exports.parseHijri = parseHijri;
+    exports.toGregorian = toGregorian;
+    exports.toHijri = toHijri;
+    exports.todayHijri = todayHijri;
+
+}));
+//# sourceMappingURL=hijri-datepicker.umd.js.map