@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/chunk-ZUPVK5L7.js

@@ -0,0 +1,838 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkJCMGBKS6js = require('./chunk-JCMGBKS6.js');
+
+// src/components/DatePicker.ts
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var CalendarIcon = _chunkJCMGBKS6js.createFilledIcon.call(void 0, _tigercatcore.CalendarIconPath, "w-5 h-5");
+var CloseIcon = _chunkJCMGBKS6js.createFilledIcon.call(void 0, _tigercatcore.CloseIconPath, "w-4 h-4");
+var ChevronLeftIcon = _chunkJCMGBKS6js.createFilledIcon.call(void 0, _tigercatcore.ChevronLeftIconPath, "w-5 h-5");
+var ChevronRightIcon = _chunkJCMGBKS6js.createFilledIcon.call(void 0, _tigercatcore.ChevronRightIconPath, "w-5 h-5");
+var isDateLike = (value) => value === null || value instanceof Date || typeof value === "string";
+var isModelValue = (value) => {
+  if (isDateLike(value)) return true;
+  if (Array.isArray(value) && value.length === 2) {
+    return isDateLike(value[0]) && isDateLike(value[1]);
+  }
+  return false;
+};
+var DatePicker = _vue.defineComponent.call(void 0, {
+  name: "TigerDatePicker",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Enable range selection (start/end).
+     * When true, v-model uses a tuple: [start, end].
+     * @default false
+     */
+    range: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Locale used for month/day names in the calendar UI.
+     * Example: 'zh-CN', 'en-US'
+     */
+    locale: {
+      type: [String, Object]
+    },
+    /**
+     * UI labels for i18n.
+     */
+    labels: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Selected date value (for v-model)
+     */
+    modelValue: {
+      type: [Date, String, Array, null],
+      default: null
+    },
+    /**
+     * Date picker size
+     * @default 'md'
+     */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Date format string
+     * @default 'yyyy-MM-dd'
+     */
+    format: {
+      type: String,
+      default: "yyyy-MM-dd"
+    },
+    /**
+     * Placeholder text
+     */
+    placeholder: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Whether the date picker is disabled
+     * @default false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether the date picker is readonly
+     * @default false
+     */
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether the date picker is required
+     * @default false
+     */
+    required: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Minimum selectable date
+     */
+    minDate: {
+      type: [Date, String, null],
+      default: null
+    },
+    /**
+     * Maximum selectable date
+     */
+    maxDate: {
+      type: [Date, String, null],
+      default: null
+    },
+    /**
+     * Show clear button
+     * @default true
+     */
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Input name attribute
+     */
+    name: {
+      type: String
+    },
+    /**
+     * Input id attribute
+     */
+    id: {
+      type: String
+    },
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Custom styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Shortcut presets for quick date selection
+     */
+    shortcuts: {
+      type: Array,
+      default: void 0
+    }
+  },
+  emits: {
+    /**
+     * Emitted when date changes (for v-model)
+     */
+    "update:modelValue": (value) => {
+      return isModelValue(value);
+    },
+    /**
+     * Emitted when date changes
+     */
+    change: (value) => {
+      return isModelValue(value);
+    },
+    /**
+     * Emitted when clear button is clicked
+     */
+    clear: () => true
+  },
+  setup(props, { emit, attrs }) {
+    const isOpen = _vue.ref.call(void 0, false);
+    const calendarRef = _vue.ref.call(void 0, null);
+    const mobileCalendarRef = _vue.ref.call(void 0, null);
+    const inputWrapperRef = _vue.ref.call(void 0, null);
+    const inputRef = _vue.ref.call(void 0, null);
+    const activeDateIso = _vue.ref.call(void 0, null);
+    const activeRangePart = _vue.ref.call(void 0, "start");
+    const pendingFocusIso = _vue.ref.call(void 0, null);
+    const restoreFocusEl = _vue.ref.call(void 0, null);
+    const isRangeMode = _vue.computed.call(void 0, () => props.range);
+    const selectedDate = _vue.computed.call(void 0, () => {
+      if (isRangeMode.value) return null;
+      return _tigercatcore.parseDate.call(void 0, props.modelValue);
+    });
+    const selectedRange = _vue.computed.call(void 0, () => {
+      if (!isRangeMode.value) return [null, null];
+      const raw = props.modelValue;
+      if (!raw || !Array.isArray(raw)) return [null, null];
+      return [_tigercatcore.parseDate.call(void 0, raw[0]), _tigercatcore.parseDate.call(void 0, raw[1])];
+    });
+    const minDateParsed = _vue.computed.call(void 0, () => _tigercatcore.parseDate.call(void 0, props.minDate));
+    const maxDateParsed = _vue.computed.call(void 0, () => _tigercatcore.parseDate.call(void 0, props.maxDate));
+    const localeCode = _vue.computed.call(void 0, () => _tigercatcore.getDatePickerLocaleCode.call(void 0, props.locale));
+    const viewingMonth = _vue.ref.call(void 0, 
+      _nullishCoalesce(_optionalChain([(_nullishCoalesce(selectedDate.value, () => ( selectedRange.value[0]))), 'optionalAccess', _2 => _2.getMonth, 'call', _3 => _3()]), () => ( (/* @__PURE__ */ new Date()).getMonth()))
+    );
+    const viewingYear = _vue.ref.call(void 0, 
+      _nullishCoalesce(_optionalChain([(_nullishCoalesce(selectedDate.value, () => ( selectedRange.value[0]))), 'optionalAccess', _4 => _4.getFullYear, 'call', _5 => _5()]), () => ( (/* @__PURE__ */ new Date()).getFullYear()))
+    );
+    const displayValue = _vue.computed.call(void 0, () => {
+      if (!isRangeMode.value) {
+        return selectedDate.value ? _tigercatcore.formatDate.call(void 0, selectedDate.value, props.format, localeCode.value) : "";
+      }
+      const [start, end] = selectedRange.value;
+      const startText = start ? _tigercatcore.formatDate.call(void 0, start, props.format, localeCode.value) : "";
+      const endText = end ? _tigercatcore.formatDate.call(void 0, end, props.format, localeCode.value) : "";
+      if (!startText && !endText) return "";
+      if (startText && endText) return `${startText} - ${endText}`;
+      return startText ? `${startText} - ` : ` - ${endText}`;
+    });
+    const placeholderText = _vue.computed.call(void 0, 
+      () => _nullishCoalesce(props.placeholder, () => ( (props.range ? "Select date range" : "Select date")))
+    );
+    const showClearButton = _vue.computed.call(void 0, () => {
+      if (!props.clearable || props.disabled || props.readonly) return false;
+      if (!isRangeMode.value) return selectedDate.value !== null;
+      const [start, end] = selectedRange.value;
+      return start !== null || end !== null;
+    });
+    const calendarDays = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getCalendarDays.call(void 0, viewingYear.value, viewingMonth.value);
+    });
+    const dayNames = _vue.computed.call(void 0, () => _tigercatcore.getShortDayNames.call(void 0, localeCode.value));
+    const isRtl = _vue.computed.call(void 0, () => _tigercatcore.getLocaleDirection.call(void 0, localeCode.value) === "rtl");
+    const previousMonthIcon = _vue.computed.call(void 0, () => isRtl.value ? ChevronRightIcon : ChevronLeftIcon);
+    const nextMonthIcon = _vue.computed.call(void 0, () => isRtl.value ? ChevronLeftIcon : ChevronRightIcon);
+    const labels = _vue.computed.call(void 0, () => _tigercatcore.getDatePickerLabels.call(void 0, props.locale, props.labels));
+    const mobileDate = _vue.computed.call(void 0, () => {
+      if (!isRangeMode.value) return _nullishCoalesce(selectedDate.value, () => ( _tigercatcore.normalizeDate.call(void 0, /* @__PURE__ */ new Date())));
+      const [start, end] = selectedRange.value;
+      return _nullishCoalesce(_nullishCoalesce(_nullishCoalesce((activeRangePart.value === "start" ? start : end), () => ( start)), () => ( end)), () => ( _tigercatcore.normalizeDate.call(void 0, /* @__PURE__ */ new Date())));
+    });
+    const mobileYears = _vue.computed.call(void 0, () => {
+      const baseYear = mobileDate.value.getFullYear();
+      return Array.from({ length: 101 }, (_, index) => baseYear - 50 + index);
+    });
+    const mobileDays = _vue.computed.call(void 0, () => {
+      const date = mobileDate.value;
+      const daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+      return Array.from({ length: daysInMonth }, (_, index) => index + 1);
+    });
+    const emitValue = (value) => {
+      emit("update:modelValue", value);
+      emit("change", value);
+    };
+    const addDays = (date, days) => {
+      const next = new Date(date);
+      next.setDate(next.getDate() + days);
+      return next;
+    };
+    const focusDateButtonByIso = (iso) => {
+      const button = _optionalChain([calendarRef, 'access', _6 => _6.value, 'optionalAccess', _7 => _7.querySelector, 'call', _8 => _8(
+        `button[data-date="${iso}"]`
+      )]);
+      if (!button || button.disabled) return false;
+      button.focus();
+      activeDateIso.value = iso;
+      return true;
+    };
+    const getFirstEnabledIsoInView = () => {
+      for (const date of calendarDays.value) {
+        if (!date) continue;
+        const iso = _tigercatcore.formatDate.call(void 0, date, "yyyy-MM-dd");
+        if (!isDateDisabled(date)) return iso;
+      }
+      return null;
+    };
+    const getPreferredFocusIso = () => {
+      const focusDate = isRangeMode.value ? _nullishCoalesce(selectedRange.value[0], () => ( selectedRange.value[1])) : selectedDate.value;
+      if (focusDate) return _tigercatcore.formatDate.call(void 0, focusDate, "yyyy-MM-dd");
+      const today = _tigercatcore.normalizeDate.call(void 0, /* @__PURE__ */ new Date());
+      if (_tigercatcore.isDateInRange.call(void 0, today, minDateParsed.value, maxDateParsed.value)) {
+        return _tigercatcore.formatDate.call(void 0, today, "yyyy-MM-dd");
+      }
+      return getFirstEnabledIsoInView();
+    };
+    const restoreFocus = () => {
+      const target = _nullishCoalesce(restoreFocusEl.value, () => ( inputRef.value));
+      if (!target) return;
+      if (typeof target.focus === "function") {
+        ;
+        target.focus();
+      }
+    };
+    const moveFocus = async (deltaDays) => {
+      const activeEl = document.activeElement;
+      const currentIso = _nullishCoalesce(_nullishCoalesce(_optionalChain([activeEl, 'optionalAccess', _9 => _9.getAttribute, 'call', _10 => _10("data-date")]), () => ( activeDateIso.value)), () => ( null));
+      const baseIso = _nullishCoalesce(currentIso, () => ( getPreferredFocusIso()));
+      if (!baseIso) return;
+      const baseDate = _tigercatcore.parseDate.call(void 0, baseIso);
+      if (!baseDate) return;
+      let candidate = addDays(baseDate, deltaDays);
+      for (let attempts = 0; attempts < 42; attempts++) {
+        const iso = _tigercatcore.formatDate.call(void 0, candidate, "yyyy-MM-dd");
+        const el = _optionalChain([calendarRef, 'access', _11 => _11.value, 'optionalAccess', _12 => _12.querySelector, 'call', _13 => _13(
+          `button[data-date="${iso}"]`
+        )]);
+        if (el && !el.disabled) {
+          el.focus();
+          activeDateIso.value = iso;
+          return;
+        }
+        if (!el) {
+          pendingFocusIso.value = iso;
+          viewingYear.value = candidate.getFullYear();
+          viewingMonth.value = candidate.getMonth();
+          activeDateIso.value = iso;
+          await _vue.nextTick.call(void 0, );
+          if (pendingFocusIso.value) {
+            const nextIso = pendingFocusIso.value;
+            pendingFocusIso.value = null;
+            if (focusDateButtonByIso(nextIso)) return;
+          }
+          const fallback = getFirstEnabledIsoInView();
+          if (fallback) focusDateButtonByIso(fallback);
+          return;
+        }
+        candidate = addDays(candidate, deltaDays);
+      }
+    };
+    const handleCalendarKeyDown = async (event) => {
+      if (!isOpen.value) return;
+      switch (event.key) {
+        case "Escape": {
+          event.preventDefault();
+          closeCalendar();
+          return;
+        }
+        case "ArrowRight": {
+          event.preventDefault();
+          await moveFocus(1);
+          return;
+        }
+        case "ArrowLeft": {
+          event.preventDefault();
+          await moveFocus(-1);
+          return;
+        }
+        case "ArrowDown": {
+          event.preventDefault();
+          await moveFocus(7);
+          return;
+        }
+        case "ArrowUp": {
+          event.preventDefault();
+          await moveFocus(-7);
+          return;
+        }
+        case "Enter":
+        case " ": {
+          const activeEl = document.activeElement;
+          if (_optionalChain([activeEl, 'optionalAccess', _14 => _14.tagName]) === "BUTTON" && activeEl.dataset.date) {
+            event.preventDefault();
+            if (!activeEl.disabled) activeEl.click();
+          }
+          return;
+        }
+      }
+    };
+    function toggleCalendar() {
+      if (!props.disabled && !props.readonly) {
+        isOpen.value = !isOpen.value;
+        if (isOpen.value) {
+          restoreFocusEl.value = _nullishCoalesce(inputRef.value, () => ( null));
+          const baseDate = _nullishCoalesce(selectedDate.value, () => ( selectedRange.value[0]));
+          if (baseDate) {
+            viewingMonth.value = baseDate.getMonth();
+            viewingYear.value = baseDate.getFullYear();
+          }
+        }
+      }
+    }
+    function closeCalendar() {
+      isOpen.value = false;
+    }
+    function setToday() {
+      selectDate(/* @__PURE__ */ new Date());
+    }
+    function handleShortcut(shortcut) {
+      const val = typeof shortcut.value === "function" ? shortcut.value() : shortcut.value;
+      emitValue(val);
+      closeCalendar();
+    }
+    function selectDate(date) {
+      if (!date) return;
+      const normalizedDate = _tigercatcore.normalizeDate.call(void 0, date);
+      if (!_tigercatcore.isDateInRange.call(void 0, normalizedDate, minDateParsed.value, maxDateParsed.value)) {
+        return;
+      }
+      if (!isRangeMode.value) {
+        emitValue(normalizedDate);
+        closeCalendar();
+        return;
+      }
+      const [start, end] = selectedRange.value;
+      if (!start || start && end) {
+        emitValue([normalizedDate, null]);
+        return;
+      }
+      emitValue([start, normalizedDate < start ? start : normalizedDate]);
+    }
+    function commitMobileDate(date) {
+      const normalized = _tigercatcore.normalizeDate.call(void 0, date);
+      if (!_tigercatcore.isDateInRange.call(void 0, normalized, minDateParsed.value, maxDateParsed.value)) return;
+      viewingYear.value = normalized.getFullYear();
+      viewingMonth.value = normalized.getMonth();
+      if (!isRangeMode.value) {
+        emitValue(normalized);
+        return;
+      }
+      const [start, end] = selectedRange.value;
+      if (activeRangePart.value === "start") {
+        emitValue([normalized, end && end < normalized ? normalized : end]);
+        activeRangePart.value = "end";
+        return;
+      }
+      emitValue([_nullishCoalesce(start, () => ( normalized)), start && normalized < start ? start : normalized]);
+    }
+    function updateMobileDate(part, value) {
+      const base = mobileDate.value;
+      const nextYear = part === "year" ? value : base.getFullYear();
+      const nextMonth2 = part === "month" ? value : base.getMonth();
+      const maxDay = new Date(nextYear, nextMonth2 + 1, 0).getDate();
+      const nextDay = Math.min(part === "day" ? value : base.getDate(), maxDay);
+      commitMobileDate(new Date(nextYear, nextMonth2, nextDay));
+    }
+    function clearDate(event) {
+      event.stopPropagation();
+      emitValue(!isRangeMode.value ? null : [null, null]);
+      emit("clear");
+    }
+    function previousMonth() {
+      if (viewingMonth.value === 0) {
+        viewingMonth.value = 11;
+        viewingYear.value--;
+      } else {
+        viewingMonth.value--;
+      }
+    }
+    function nextMonth() {
+      if (viewingMonth.value === 11) {
+        viewingMonth.value = 0;
+        viewingYear.value++;
+      } else {
+        viewingMonth.value++;
+      }
+    }
+    function isDateDisabled(date) {
+      if (!date) return true;
+      return !_tigercatcore.isDateInRange.call(void 0, date, minDateParsed.value, maxDateParsed.value);
+    }
+    function isCurrentMonth(date) {
+      if (!date) return false;
+      return date.getMonth() === viewingMonth.value;
+    }
+    function handleClickOutside(event) {
+      if (inputWrapperRef.value && !_optionalChain([calendarRef, 'access', _15 => _15.value, 'optionalAccess', _16 => _16.contains, 'call', _17 => _17(event.target)]) && !_optionalChain([mobileCalendarRef, 'access', _18 => _18.value, 'optionalAccess', _19 => _19.contains, 'call', _20 => _20(event.target)]) && !inputWrapperRef.value.contains(event.target)) {
+        closeCalendar();
+      }
+    }
+    function handleInputClick() {
+      toggleCalendar();
+    }
+    _vue.watch.call(void 0, isOpen, (newValue) => {
+      if (newValue) {
+        document.addEventListener("click", handleClickOutside);
+        const preferred = _nullishCoalesce(pendingFocusIso.value, () => ( getPreferredFocusIso()));
+        pendingFocusIso.value = null;
+        _vue.nextTick.call(void 0, ).then(() => {
+          if (preferred && focusDateButtonByIso(preferred)) return;
+          const fallback = getFirstEnabledIsoInView();
+          if (fallback) focusDateButtonByIso(fallback);
+        });
+      } else {
+        document.removeEventListener("click", handleClickOutside);
+        _vue.nextTick.call(void 0, ).then(() => {
+          restoreFocus();
+        });
+      }
+    });
+    _vue.onBeforeUnmount.call(void 0, () => {
+      document.removeEventListener("click", handleClickOutside);
+    });
+    const rootClass = _vue.computed.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, _tigercatcore.datePickerBaseClasses, props.className, _tigercatcore.coerceClassValue.call(void 0, attrs.class))
+    );
+    const rootStyle = _vue.computed.call(void 0, () => _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style));
+    const forwardedAttrs = _vue.computed.call(void 0, () => {
+      const { class: _class, style: _style, ...rest } = _nullishCoalesce(attrs, () => ( {}));
+      return rest;
+    });
+    return () => {
+      const inputClasses = _tigercatcore.getDatePickerInputClasses.call(void 0, props.size, props.disabled || props.readonly);
+      const iconButtonClasses = _tigercatcore.getDatePickerIconButtonClasses.call(void 0, props.size);
+      return _vue.h.call(void 0, 
+        "div",
+        {
+          ...forwardedAttrs.value,
+          class: rootClass.value,
+          style: rootStyle.value
+        },
+        [
+          // Input wrapper
+          _vue.h.call(void 0, 
+            "div",
+            {
+              ref: inputWrapperRef,
+              class: _tigercatcore.datePickerInputWrapperClasses
+            },
+            [
+              // Input field for date display
+              _vue.h.call(void 0, "input", {
+                ref: inputRef,
+                type: "text",
+                class: inputClasses,
+                value: displayValue.value,
+                placeholder: placeholderText.value,
+                disabled: props.disabled,
+                readonly: true,
+                // Always readonly to prevent manual text input and ensure date selection via calendar only
+                required: props.required,
+                name: props.name,
+                id: props.id,
+                onClick: handleInputClick,
+                "aria-label": placeholderText.value
+              }),
+              // Clear button
+              showClearButton.value && _vue.h.call(void 0, 
+                "button",
+                {
+                  type: "button",
+                  class: _tigercatcore.datePickerClearButtonClasses,
+                  onClick: clearDate,
+                  "aria-label": labels.value.clearDate
+                },
+                CloseIcon
+              ),
+              // Calendar icon button
+              _vue.h.call(void 0, 
+                "button",
+                {
+                  type: "button",
+                  class: iconButtonClasses,
+                  disabled: props.disabled || props.readonly,
+                  onClick: toggleCalendar,
+                  "aria-label": labels.value.toggleCalendar
+                },
+                CalendarIcon
+              )
+            ]
+          ),
+          // Calendar dropdown
+          isOpen.value && _vue.h.call(void 0, 
+            "div",
+            {
+              ref: mobileCalendarRef,
+              class: _tigercatcore.datePickerMobileWheelClasses,
+              role: "group",
+              "aria-label": labels.value.calendar
+            },
+            [
+              isRangeMode.value ? _vue.h.call(void 0, "div", { class: "mb-3 flex items-center gap-2" }, [
+                _vue.h.call(void 0, 
+                  "button",
+                  {
+                    type: "button",
+                    class: _tigercatcore.datePickerFooterButtonClasses,
+                    "aria-selected": activeRangePart.value === "start",
+                    onClick: () => activeRangePart.value = "start"
+                  },
+                  "Start"
+                ),
+                _vue.h.call(void 0, 
+                  "button",
+                  {
+                    type: "button",
+                    class: _tigercatcore.datePickerFooterButtonClasses,
+                    "aria-selected": activeRangePart.value === "end",
+                    onClick: () => activeRangePart.value = "end"
+                  },
+                  "End"
+                )
+              ]) : null,
+              _vue.h.call(void 0, "div", { class: _tigercatcore.datePickerMobileWheelGridClasses }, [
+                _vue.h.call(void 0, 
+                  "select",
+                  {
+                    class: _tigercatcore.datePickerMobileWheelSelectClasses,
+                    value: mobileDate.value.getFullYear(),
+                    "aria-label": "Year",
+                    onChange: (event) => updateMobileDate("year", Number(event.target.value))
+                  },
+                  mobileYears.value.map((year) => _vue.h.call(void 0, "option", { value: year }, year))
+                ),
+                _vue.h.call(void 0, 
+                  "select",
+                  {
+                    class: _tigercatcore.datePickerMobileWheelSelectClasses,
+                    value: mobileDate.value.getMonth(),
+                    "aria-label": "Month",
+                    onChange: (event) => updateMobileDate("month", Number(event.target.value))
+                  },
+                  Array.from(
+                    { length: 12 },
+                    (_, month) => _vue.h.call(void 0, "option", { value: month }, month + 1)
+                  )
+                ),
+                _vue.h.call(void 0, 
+                  "select",
+                  {
+                    class: _tigercatcore.datePickerMobileWheelSelectClasses,
+                    value: mobileDate.value.getDate(),
+                    "aria-label": "Day",
+                    onChange: (event) => updateMobileDate("day", Number(event.target.value))
+                  },
+                  mobileDays.value.map((day) => _vue.h.call(void 0, "option", { value: day }, day))
+                )
+              ]),
+              _vue.h.call(void 0, "div", { class: "mt-4 flex justify-end gap-2" }, [
+                _vue.h.call(void 0, 
+                  "button",
+                  {
+                    type: "button",
+                    class: _tigercatcore.datePickerFooterButtonClasses,
+                    "aria-label": `Mobile ${labels.value.ok}`,
+                    onClick: closeCalendar
+                  },
+                  labels.value.ok
+                )
+              ])
+            ]
+          ),
+          isOpen.value && _vue.h.call(void 0, 
+            "div",
+            {
+              ref: calendarRef,
+              class: _tigercatcore.datePickerCalendarClasses,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-label": labels.value.calendar,
+              onKeydown: handleCalendarKeyDown
+            },
+            [
+              // Calendar header
+              _vue.h.call(void 0, "div", { class: _tigercatcore.datePickerCalendarHeaderClasses }, [
+                _vue.h.call(void 0, 
+                  "button",
+                  {
+                    type: "button",
+                    class: _tigercatcore.datePickerNavButtonClasses,
+                    onClick: previousMonth,
+                    "aria-label": labels.value.previousMonth
+                  },
+                  previousMonthIcon.value
+                ),
+                _vue.h.call(void 0, 
+                  "div",
+                  { class: _tigercatcore.datePickerMonthYearClasses },
+                  _tigercatcore.formatMonthYear.call(void 0, viewingYear.value, viewingMonth.value, localeCode.value)
+                ),
+                _vue.h.call(void 0, 
+                  "button",
+                  {
+                    type: "button",
+                    class: _tigercatcore.datePickerNavButtonClasses,
+                    onClick: nextMonth,
+                    "aria-label": labels.value.nextMonth
+                  },
+                  nextMonthIcon.value
+                )
+              ]),
+              // Day names header
+              _vue.h.call(void 0, "div", { class: _tigercatcore.datePickerCalendarGridClasses, role: "row" }, [
+                ...dayNames.value.map(
+                  (day) => _vue.h.call(void 0, 
+                    "div",
+                    {
+                      class: _tigercatcore.datePickerDayNameClasses,
+                      key: day,
+                      role: "columnheader"
+                    },
+                    day
+                  )
+                )
+              ]),
+              // Calendar grid
+              (() => {
+                const [rangeStart, rangeEnd] = selectedRange.value;
+                const normStart = rangeStart ? _tigercatcore.normalizeDate.call(void 0, rangeStart) : null;
+                const normEnd = rangeEnd ? _tigercatcore.normalizeDate.call(void 0, rangeEnd) : null;
+                const isSelectingEnd = isRangeMode.value && Boolean(rangeStart) && !rangeEnd;
+                return _vue.h.call(void 0, 
+                  "div",
+                  {
+                    class: _tigercatcore.datePickerCalendarGridClasses,
+                    role: "grid",
+                    "aria-rowcount": 6,
+                    "aria-colcount": 7
+                  },
+                  [
+                    ...calendarDays.value.map((date, index) => {
+                      if (!date) return null;
+                      const normDate = _tigercatcore.normalizeDate.call(void 0, date);
+                      const isRangeStart = isRangeMode.value && rangeStart ? _tigercatcore.isSameDay.call(void 0, date, rangeStart) : false;
+                      const isRangeEnd = isRangeMode.value && rangeEnd ? _tigercatcore.isSameDay.call(void 0, date, rangeEnd) : false;
+                      const isInRange = isRangeMode.value && normStart && normEnd && normDate >= normStart && normDate <= normEnd;
+                      const isSelected = !isRangeMode.value ? selectedDate.value ? _tigercatcore.isSameDay.call(void 0, date, selectedDate.value) : false : isRangeStart || isRangeEnd;
+                      const isCurrentMonthDay = isCurrentMonth(date);
+                      const isTodayDay = _tigercatcore.isToday.call(void 0, date);
+                      const isBeforeRangeStart = isSelectingEnd && normStart && normDate < normStart;
+                      const isDisabled = isDateDisabled(date) || Boolean(isBeforeRangeStart);
+                      const iso = _tigercatcore.formatDate.call(void 0, date, "yyyy-MM-dd");
+                      return _vue.h.call(void 0, 
+                        "button",
+                        {
+                          key: index,
+                          type: "button",
+                          class: _tigercatcore.getDatePickerDayCellClasses.call(void 0, 
+                            isCurrentMonthDay,
+                            isSelected,
+                            isTodayDay,
+                            isDisabled,
+                            Boolean(isInRange),
+                            Boolean(isRangeStart),
+                            Boolean(isRangeEnd)
+                          ),
+                          disabled: isDisabled,
+                          onClick: () => selectDate(date),
+                          role: "gridcell",
+                          "data-date": iso,
+                          onFocus: () => {
+                            activeDateIso.value = iso;
+                          },
+                          tabindex: activeDateIso.value === iso && !isDisabled ? 0 : -1,
+                          "aria-label": iso,
+                          "aria-selected": isSelected,
+                          "aria-current": isTodayDay ? "date" : void 0
+                        },
+                        date.getDate()
+                      );
+                    })
+                  ]
+                );
+              })(),
+              // Shortcuts panel
+              _optionalChain([props, 'access', _21 => _21.shortcuts, 'optionalAccess', _22 => _22.length]) ? _vue.h.call(void 0, 
+                "div",
+                {
+                  class: "flex flex-wrap gap-1 px-3 py-2 border-t border-[var(--tiger-border,#e5e7eb)]"
+                },
+                props.shortcuts.map(
+                  (sc) => _vue.h.call(void 0, 
+                    "button",
+                    {
+                      type: "button",
+                      class: _tigercatcore.datePickerFooterButtonClasses,
+                      onClick: () => handleShortcut(sc)
+                    },
+                    sc.label
+                  )
+                )
+              ) : null,
+              // Footer (range mode only)
+              isRangeMode.value ? _vue.h.call(void 0, "div", { class: _tigercatcore.datePickerFooterClasses }, [
+                _vue.h.call(void 0, 
+                  "button",
+                  {
+                    type: "button",
+                    class: _tigercatcore.datePickerFooterButtonClasses,
+                    onClick: setToday
+                  },
+                  labels.value.today
+                ),
+                _vue.h.call(void 0, 
+                  "button",
+                  {
+                    type: "button",
+                    class: _tigercatcore.datePickerFooterButtonClasses,
+                    onClick: closeCalendar
+                  },
+                  labels.value.ok
+                )
+              ]) : null
+            ]
+          )
+        ]
+      );
+    };
+  }
+});
+var DatePicker_default = DatePicker;
+
+
+
+
+exports.DatePicker = DatePicker; exports.DatePicker_default = DatePicker_default;