Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../_virtual/_rolldown/runtime.cjs");
const require_safe_custom_element = require("../../shared/safe-custom-element.cjs");
const require_index = require("../../shared/tailwind-element/index.cjs");
const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.cjs");
require("../lukso-icon/index.cjs");
require("../lukso-sanitize/index.cjs");
require("../lukso-form-description/index.cjs");
require("../lukso-form-error/index.cjs");
require("../lukso-form-label/index.cjs");
require("../lukso-time-picker/index.cjs");
const require_style = require("./style.css?inline.cjs");
let lit = require("lit");
let lit_decorators_js = require("lit/decorators.js");
let tailwind_variants = require("tailwind-variants");
let lit_directives_style_map_js = require("lit/directives/style-map.js");
//#region src/components/lukso-date-picker/index.ts
var LuksoDatePicker = class LuksoDatePicker extends require_index.TailwindStyledElement(require_style.default) {
	constructor(..._args) {
		super(..._args);
		this.locale = typeof navigator !== "undefined" ? navigator.language : "en-US";
		this.size = "large";
		this.showSummary = true;
		this.showTime = true;
		this.dateFormat = "short";
		this.timeFormat = "auto";
		this.weekStartDay = "monday";
		this.isDisabled = false;
		this.isFullWidth = false;
		this._viewYear = (/* @__PURE__ */ new Date()).getFullYear();
		this._viewMonth = (/* @__PURE__ */ new Date()).getMonth();
		this._selectedDate = null;
		this._selectedHour = (/* @__PURE__ */ new Date()).getHours();
		this._selectedMinute = (/* @__PURE__ */ new Date()).getMinutes();
		this.styles = (0, tailwind_variants.tv)({
			slots: {
				outer: "flex flex-col",
				wrapper: "flex flex-col w-full bg-neutral-100 rounded-12 shadow-drop-shadow-small overflow-hidden select-none",
				header: "flex items-center justify-between px-4 py-3",
				monthLabel: "text-paragraph-sm-bold text-neutral-20 capitalize",
				navBtn: "flex items-center justify-center w-8 h-8 rounded-full hover:bg-neutral-95 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed",
				dayHeaderRow: "grid grid-cols-7 px-2 pb-1",
				dayHeaderCell: "flex items-center justify-center h-8 text-paragraph-xxs text-neutral-40",
				calendarGrid: "grid grid-cols-7 px-2 pb-2 justify-items-center",
				divider: "h-px bg-neutral-90 mx-4",
				timeSection: "flex flex-row flex-nowrap items-center justify-between gap-3 px-4 py-3 w-full min-w-0",
				dateLabel: "flex flex-1 flex-col overflow-hidden min-w-[8rem] max-w-[calc(100%-9.5rem)]",
				dateLabelWeekday: "min-w-0 text-paragraph-xxs text-neutral-40 uppercase tracking-wider truncate",
				dateLabelDate: "min-w-0 text-paragraph-xs-bold text-neutral-20 truncate",
				timeRowWrap: "shrink-0"
			},
			variants: {
				size: {
					small: { outer: "w-[200px]" },
					medium: { outer: "w-[250px]" },
					large: { outer: "w-[300px]" },
					"x-large": { outer: "w-[420px]" }
				},
				isDisabled: { true: { outer: "opacity-50 pointer-events-none" } },
				isFullWidth: { true: { outer: "w-full" } }
			}
		});
		this.dayCellStyles = (0, tailwind_variants.tv)({
			base: "relative flex items-center justify-center h-9 w-9 rounded-full text-paragraph-sm transition-colors",
			variants: {
				isSelected: {
					true: "bg-neutral-20 text-neutral-100",
					false: ""
				},
				isToday: {
					true: "",
					false: ""
				},
				isOutOfRange: {
					true: "opacity-30 cursor-not-allowed pointer-events-none",
					false: "cursor-pointer hover:bg-neutral-95"
				},
				isEmpty: {
					true: "pointer-events-none",
					false: ""
				}
			},
			compoundVariants: [{
				isSelected: false,
				isToday: true,
				isOutOfRange: false,
				class: "ring-1 ring-neutral-20 ring-inset"
			}]
		});
	}
	willUpdate(changed) {
		if (changed.has("value")) if (this.value) {
			const d = new Date(this.value);
			if (!isNaN(d.getTime())) {
				this._selectedDate = d;
				this._viewYear = d.getFullYear();
				this._viewMonth = d.getMonth();
				this._selectedHour = d.getHours();
				this._selectedMinute = d.getMinutes();
			}
		} else this._selectedDate = null;
	}
	get _monthYearLabel() {
		try {
			return new Intl.DateTimeFormat(this.locale, {
				month: "long",
				year: "numeric"
			}).format(new Date(this._viewYear, this._viewMonth));
		} catch {
			return `${this._viewMonth + 1}/${this._viewYear}`;
		}
	}
	get _dayNames() {
		const names = [];
		const monday = new Date(2025, 0, 6);
		const format = new Intl.DateTimeFormat(this.locale, { weekday: "narrow" });
		for (let i = 0; i < 7; i++) {
			const d = new Date(monday);
			d.setDate(monday.getDate() + i);
			names.push(format.format(d));
		}
		if (this.weekStartDay === "sunday") {
			const sun = names.pop();
			names.unshift(sun);
		}
		return names;
	}
	_getDayGrid() {
		const firstDay = new Date(this._viewYear, this._viewMonth, 1);
		const lastDay = new Date(this._viewYear, this._viewMonth + 1, 0);
		let startOffset = firstDay.getDay();
		if (this.weekStartDay === "monday") startOffset = (startOffset + 6) % 7;
		const grid = [];
		for (let i = 0; i < startOffset; i++) grid.push({
			day: null,
			date: null,
			isCurrentMonth: false
		});
		for (let d = 1; d <= lastDay.getDate(); d++) grid.push({
			day: d,
			date: new Date(this._viewYear, this._viewMonth, d),
			isCurrentMonth: true
		});
		while (grid.length % 7 !== 0) grid.push({
			day: null,
			date: null,
			isCurrentMonth: false
		});
		return grid;
	}
	_isSelected(date) {
		if (!date || !this._selectedDate) return false;
		return date.getFullYear() === this._selectedDate.getFullYear() && date.getMonth() === this._selectedDate.getMonth() && date.getDate() === this._selectedDate.getDate();
	}
	_isToday(date) {
		if (!date) return false;
		const today = /* @__PURE__ */ new Date();
		return date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate();
	}
	_isOutOfRange(date) {
		if (!date) return false;
		if (this.min) {
			const minDate = new Date(this.min);
			minDate.setHours(0, 0, 0, 0);
			if (date < minDate) return true;
		}
		if (this.max) {
			const maxDate = new Date(this.max);
			maxDate.setHours(23, 59, 59, 999);
			if (date > maxDate) return true;
		}
		return false;
	}
	_formattedDateLabel() {
		if (!this._selectedDate) return null;
		try {
			const weekday = new Intl.DateTimeFormat(this.locale, { weekday: "short" }).format(this._selectedDate);
			const dateOpts = this.dateFormat === "long" ? {
				month: "long",
				day: "numeric",
				year: "numeric"
			} : {
				month: "short",
				day: "numeric",
				year: "numeric"
			};
			const date = new Intl.DateTimeFormat(this.locale, dateOpts).format(this._selectedDate);
			return {
				weekday: weekday.toUpperCase(),
				date
			};
		} catch {
			return null;
		}
	}
	get _timeValue() {
		return `${String(this._selectedHour).padStart(2, "0")}:${String(this._selectedMinute).padStart(2, "0")}`;
	}
	_buildIsoValue() {
		if (!this._selectedDate) return "";
		const date = this._selectedDate;
		return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}T${String(this._selectedHour).padStart(2, "0")}:${String(this._selectedMinute).padStart(2, "0")}`;
	}
	_prevMonth() {
		if (this._viewMonth === 0) {
			this._viewMonth = 11;
			this._viewYear -= 1;
		} else this._viewMonth -= 1;
	}
	_nextMonth() {
		if (this._viewMonth === 11) {
			this._viewMonth = 0;
			this._viewYear += 1;
		} else this._viewMonth += 1;
	}
	_selectDay(cell, event) {
		if (!cell.date || this._isOutOfRange(cell.date)) return;
		this._selectedDate = cell.date;
		this._emitChange(event);
	}
	_handleTimeChange(event) {
		event.stopPropagation();
		const value = event.detail.value;
		if (!value?.includes(":")) return;
		const [hStr, mStr] = value.split(":");
		const h = parseInt(hStr, 10);
		const m = parseInt(mStr, 10);
		if (isNaN(h) || isNaN(m)) return;
		this._selectedHour = h;
		this._selectedMinute = m;
		this._emitChange(event.detail.event);
	}
	_emitChange(event) {
		const value = this._buildIsoValue();
		if (!value) return;
		this.dispatchEvent(new CustomEvent("on-change", {
			detail: {
				value,
				event
			},
			bubbles: true,
			composed: true
		}));
	}
	render() {
		const { outer, wrapper, header, monthLabel, navBtn, dayHeaderRow, dayHeaderCell, calendarGrid, divider, timeSection, dateLabel, dateLabelWeekday, dateLabelDate, timeRowWrap } = this.styles({
			size: this.size,
			isDisabled: this.isDisabled,
			isFullWidth: this.isFullWidth
		});
		const grid = this._getDayGrid();
		const labelInfo = this._formattedDateLabel();
		const selectedStyleMap = (0, lit_directives_style_map_js.styleMap)({
			"background-color": this.selectedBgColor ?? null,
			color: this.selectedTextColor ?? null
		});
		return lit.html`
      <div class=${outer()}>
        <lukso-form-label label=${this.label ?? lit.nothing}></lukso-form-label>
        <lukso-form-description
          description=${this.description ?? lit.nothing}
        ></lukso-form-description>

        <div class=${wrapper()}>
          <!-- Calendar header -->
          <div class=${header()}>
            <button
              type="button"
              class=${navBtn()}
              @click=${this._prevMonth}
              aria-label="Previous month"
            >
              <lukso-icon name="arrow-left-sm" size="small"></lukso-icon>
            </button>
            <span class=${monthLabel()}>${this._monthYearLabel}</span>
            <button
              type="button"
              class=${navBtn()}
              @click=${this._nextMonth}
              aria-label="Next month"
            >
              <lukso-icon name="arrow-right-sm" size="small"></lukso-icon>
            </button>
          </div>

          <!-- Day-of-week headers -->
          <div class=${dayHeaderRow()}>
            ${this._dayNames.map((name) => lit.html`<div class=${dayHeaderCell()}>${name}</div>`)}
          </div>

          <!-- Calendar grid -->
          <div class=${calendarGrid()}>
            ${grid.map((cell) => {
			const selected = this._isSelected(cell.date);
			const today = this._isToday(cell.date);
			const outOfRange = this._isOutOfRange(cell.date);
			const empty = cell.day === null;
			return lit.html`
                <button
                  type="button"
                  class=${this.dayCellStyles({
				isSelected: selected,
				isToday: today,
				isOutOfRange: outOfRange,
				isEmpty: empty
			})}
                  style=${selected ? selectedStyleMap : lit.nothing}
                  ?disabled=${empty || outOfRange}
                  aria-label=${cell.date ? cell.date.toDateString() : lit.nothing}
                  aria-pressed=${selected ? "true" : "false"}
                  @click=${(e) => this._selectDay(cell, e)}
                >
                  ${cell.day !== null ? cell.day : lit.nothing}
                </button>
              `;
		})}
          </div>

          <!-- Summary footer -->
          ${this.showSummary ? lit.html`
                <div class=${divider()}></div>
                <div class=${timeSection()}>
                  <div class=${dateLabel()}>
                    <span class=${dateLabelWeekday()}
                      >${labelInfo?.weekday ?? "—"}</span
                    >
                    <span class=${dateLabelDate()}
                      >${labelInfo?.date ?? ""}</span
                    >
                  </div>
                  ${this.showTime ? lit.html`
                        <div class=${timeRowWrap()}>
                          <lukso-time-picker
                            value=${this._timeValue}
                            locale=${this.locale}
                            time-format=${this.timeFormat}
                            ?is-standalone=${false}
                            ?is-disabled=${this.isDisabled}
                            @on-change=${this._handleTimeChange}
                            size="full"
                          ></lukso-time-picker>
                        </div>
                      ` : lit.nothing}
                </div>
              ` : lit.nothing}
        </div>

        <lukso-form-error error=${this.error ?? lit.nothing}></lukso-form-error>
      </div>
    `;
	}
};
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoDatePicker.prototype, "value", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoDatePicker.prototype, "min", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoDatePicker.prototype, "max", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoDatePicker.prototype, "locale", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoDatePicker.prototype, "size", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "show-summary"
})], LuksoDatePicker.prototype, "showSummary", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "show-time"
})], LuksoDatePicker.prototype, "showTime", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "date-format"
})], LuksoDatePicker.prototype, "dateFormat", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "time-format"
})], LuksoDatePicker.prototype, "timeFormat", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "week-start-day"
})], LuksoDatePicker.prototype, "weekStartDay", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoDatePicker.prototype, "label", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoDatePicker.prototype, "description", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoDatePicker.prototype, "error", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "selected-bg-color"
})], LuksoDatePicker.prototype, "selectedBgColor", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "selected-text-color"
})], LuksoDatePicker.prototype, "selectedTextColor", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-disabled"
})], LuksoDatePicker.prototype, "isDisabled", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-full-width"
})], LuksoDatePicker.prototype, "isFullWidth", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoDatePicker.prototype, "_viewYear", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoDatePicker.prototype, "_viewMonth", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoDatePicker.prototype, "_selectedDate", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoDatePicker.prototype, "_selectedHour", void 0);
require_decorate.__decorate([(0, lit_decorators_js.state)()], LuksoDatePicker.prototype, "_selectedMinute", void 0);
LuksoDatePicker = require_decorate.__decorate([require_safe_custom_element.safeCustomElement("lukso-date-picker")], LuksoDatePicker);
//#endregion
Object.defineProperty(exports, "LuksoDatePicker", {
	enumerable: true,
	get: function() {
		return LuksoDatePicker;
	}
});
