@c2n/date-selector 0.0.8

package/LICENSE

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

package/README.md

@@ -0,0 +1,17 @@
+# Date Selector
+
+Accessible one- or two-month date-range picker for Lit applications and plain HTML.
+
+```bash
+npm install @c2n/date-selector
+```
+
+```html
+<script type="module" src="@c2n/date-selector"></script>
+
+<c2-date-selector from="2026-09-10" to="2026-09-15" min="2026-09-01" name="trip"></c2-date-selector>
+```
+
+Dates use local-calendar ISO strings (`YYYY-MM-DD`). The first selection starts a range, the second completes it, and
+the next starts over. The component supports arrow-key navigation, month paging, locale and week-start options,
+min/max constraints, disabled and required states, and form submission.

package/dist/date-selector.js

@@ -0,0 +1,299 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { property, queryAll, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+//#region src/date-selector.scss?inline
+var date_selector_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-date-selector {\n  display: grid;\n  grid-template-columns: repeat(var(--date-selector-months, 2), minmax(0, 1fr));\n  gap: var(--c2-date-selector--month-gap,40px);\n  min-width: var(--c2-date-selector--min-width,312px);\n  box-sizing: border-box;\n  padding: var(--c2-date-selector--padding,16px);\n  border: var(--c2-date-selector--border,1px solid #e4e4e7);\n  border-radius: var(--c2-date-selector--border-radius,14px);\n  box-shadow: var(--c2-date-selector--box-shadow,0 12px 32px rgba(24, 24, 27, 0.08));\n  background: var(--c2-date-selector--background,#ffffff);\n  color: var(--c2-date-selector--color,#18181b);\n  font-family: var(--c2-date-selector--font-family,inherit);\n  font-size: var(--c2-date-selector--font-size,14px);\n}\n\n:host([months=\"1\"]) .c2-date-selector {\n  --date-selector-months: 1;\n}\n\n.month {\n  min-width: calc(7 * var(--c2-date-selector__day--size,40px));\n}\n\n.month-header {\n  position: relative;\n  display: flex;\n  min-height: var(--c2-date-selector__navigation--size,32px);\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 8px;\n}\n\nh2 {\n  margin: 0;\n  font: inherit;\n  font-weight: var(--c2-date-selector__month-title--font-weight,600);\n}\n\n.navigation {\n  position: absolute;\n  top: 0;\n  display: inline-flex;\n  width: var(--c2-date-selector__navigation--size,32px);\n  height: var(--c2-date-selector__navigation--size,32px);\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: 999px;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-size: 24px;\n  line-height: 1;\n  transition: background 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.navigation.previous {\n  left: 0;\n}\n.navigation.next {\n  right: 0;\n}\n.navigation:hover:not(:disabled) {\n  background: var(--c2-date-selector__navigation__hover--background,#f4f4f5);\n}\n.navigation:focus-visible {\n  outline: var(--c2-date-selector__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-date-selector__focus--outline-offset,2px);\n}\n.navigation:disabled {\n  cursor: default;\n  opacity: var(--c2-date-selector__disabled--opacity,0.38);\n}\n\n.weekdays,\n.days {\n  display: grid;\n  grid-template-columns: repeat(7, var(--c2-date-selector__day--size,40px));\n}\n\n.week {\n  display: contents;\n}\n\n.weekdays span {\n  display: flex;\n  height: var(--c2-date-selector__day--size,40px);\n  align-items: center;\n  justify-content: center;\n  color: var(--c2-date-selector__weekday--color,#71717a);\n  font-size: var(--c2-date-selector__weekday--font-size,12px);\n}\n\n.day {\n  position: relative;\n  display: inline-flex;\n  width: var(--c2-date-selector__day--size,40px);\n  height: var(--c2-date-selector__day--size,40px);\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  border-radius: 0;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n}\n.day::before {\n  position: absolute;\n  inset: 0;\n  content: \"\";\n  background: transparent;\n}\n.day span {\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--c2-date-selector__day--border-radius,999px);\n  transition: background 250ms cubic-bezier(0.2, 0, 0, 1), color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.day:hover:not(:disabled) span {\n  background: var(--c2-date-selector__day__hover--background,#f4f4f5);\n}\n.day[aria-current=date]:not([aria-selected=true]) span {\n  color: var(--c2-date-selector__day__today--color,#0265dc);\n  font-weight: var(--c2-date-selector__day__today--font-weight,600);\n}\n.day.in-range::before, .day.range-start:not(.range-end)::before, .day.range-end:not(.range-start)::before {\n  background: var(--c2-date-selector__range--background,#edf1fe);\n}\n.day.range-start::before {\n  border-radius: var(--c2-date-selector__day--border-radius,999px) 0 0 var(--c2-date-selector__day--border-radius,999px);\n}\n.day.range-end::before {\n  border-radius: 0 var(--c2-date-selector__day--border-radius,999px) var(--c2-date-selector__day--border-radius,999px) 0;\n}\n.day.in-range {\n  color: var(--c2-date-selector__range--color,#18181b);\n}\n.day[aria-selected=true] span {\n  background: var(--c2-date-selector__day__selected--background,#0265dc);\n  color: var(--c2-date-selector__day__selected--color,#ffffff);\n}\n.day:focus-visible {\n  z-index: 2;\n  outline: var(--c2-date-selector__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-date-selector__focus--outline-offset,2px);\n  border-radius: var(--c2-date-selector__day--border-radius,999px);\n}\n.day:disabled {\n  cursor: default;\n  opacity: var(--c2-date-selector__day__disabled--opacity,0.38);\n}\n\n:host([disabled]) .c2-date-selector {\n  opacity: var(--c2-date-selector__disabled--opacity,0.38);\n}\n\n@media (max-width: 680px) {\n  .c2-date-selector {\n    grid-template-columns: 1fr;\n  }\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/date-selector.ts
+var isoPattern = /^\d{4}-\d{2}-\d{2}$/;
+function toIso(date) {
+	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+function fromIso(value) {
+	if (!isoPattern.test(value)) return null;
+	const [year, month, day] = value.split("-").map(Number);
+	const date = new Date(year, month - 1, day, 12);
+	return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day ? date : null;
+}
+function beginningOfMonth(date) {
+	return new Date(date.getFullYear(), date.getMonth(), 1, 12);
+}
+function addMonths(date, amount) {
+	return new Date(date.getFullYear(), date.getMonth() + amount, 1, 12);
+}
+function addDays(date, amount) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount, 12);
+}
+var DateSelector = class DateSelector extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.internals = this.attachInternals();
+		this.defaultsCaptured = false;
+		this.defaultFrom = "";
+		this.defaultTo = "";
+		this.disabledByForm = false;
+		this.visibleMonth = beginningOfMonth(/* @__PURE__ */ new Date());
+		this.focusDate = "";
+		this.from = "";
+		this.to = "";
+		this.min = "";
+		this.max = "";
+		this.locale = "";
+		this.weekStart = "monday";
+		this.months = 2;
+		this.name = "";
+		this.endName = "";
+		this.required = false;
+		this.disabled = false;
+		this.ariaLabel = "Choose a date range";
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.styles = unsafeCSS(date_selector_default);
+	}
+	get form() {
+		return this.internals.form;
+	}
+	get labels() {
+		return this.internals.labels;
+	}
+	get validity() {
+		return this.internals.validity;
+	}
+	get validationMessage() {
+		return this.internals.validationMessage;
+	}
+	get willValidate() {
+		return this.internals.willValidate;
+	}
+	checkValidity() {
+		return this.internals.checkValidity();
+	}
+	reportValidity() {
+		return this.internals.reportValidity();
+	}
+	formResetCallback() {
+		this.from = this.defaultFrom;
+		this.to = this.defaultTo;
+		this.visibleMonth = beginningOfMonth(fromIso(this.from) ?? /* @__PURE__ */ new Date());
+	}
+	formDisabledCallback(disabled) {
+		this.disabledByForm = disabled && !this.hasAttribute("disabled");
+	}
+	formStateRestoreCallback(state) {
+		if (typeof state !== "string") return;
+		const [from, to = ""] = state.split("/");
+		this.from = from;
+		this.to = to;
+	}
+	willUpdate(changed) {
+		if (!this.defaultsCaptured) {
+			this.defaultFrom = this.from;
+			this.defaultTo = this.to;
+			this.defaultsCaptured = true;
+			const selected = fromIso(this.from);
+			if (selected) this.visibleMonth = beginningOfMonth(selected);
+		}
+		if (changed.has("from") || changed.has("to")) this.normalizeRange();
+	}
+	updated(changed) {
+		if (changed.has("from") || changed.has("to") || changed.has("name") || changed.has("endName") || changed.has("required") || changed.has("disabled")) this.syncFormState();
+	}
+	get effectiveDisabled() {
+		return this.disabled || this.disabledByForm;
+	}
+	get effectiveLocale() {
+		return this.locale || this.ownerDocument?.documentElement.lang || "en-US";
+	}
+	get displayedMonths() {
+		return Math.min(2, Math.max(1, Number.isFinite(this.months) ? Math.round(this.months) : 2));
+	}
+	normalizeRange() {
+		if (this.from && !fromIso(this.from)) this.from = "";
+		if (this.to && !fromIso(this.to)) this.to = "";
+		if (this.to && (!this.from || this.to < this.from)) this.to = "";
+	}
+	syncFormState() {
+		if (this.effectiveDisabled || !this.name || !this.from) this.internals.setFormValue(null);
+		else if (this.to) {
+			const data = new FormData();
+			data.append(this.name, this.from);
+			data.append(this.endName || `${this.name}-end`, this.to);
+			this.internals.setFormValue(data, `${this.from}/${this.to}`);
+		} else this.internals.setFormValue(this.from, `${this.from}/`);
+		if (this.required && (!this.from || !this.to)) this.internals.setValidity({ valueMissing: true }, "Choose a start and end date");
+		else this.internals.setValidity({});
+	}
+	isUnavailable(value) {
+		return this.effectiveDisabled || !!this.min && value < this.min || !!this.max && value > this.max;
+	}
+	select(value) {
+		if (this.isUnavailable(value)) return;
+		if (!this.from || this.to) {
+			this.from = value;
+			this.to = "";
+		} else if (value > this.from) this.to = value;
+		else {
+			this.from = value;
+			this.to = "";
+		}
+		this.focusDate = value;
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new CustomEvent("change", {
+			detail: {
+				from: this.from,
+				to: this.to
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	navigate(amount) {
+		if (this.effectiveDisabled) return;
+		const target = addMonths(this.visibleMonth, amount);
+		if (amount < 0 && this.min && toIso(new Date(target.getFullYear(), target.getMonth() + 1, 0, 12)) < this.min) return;
+		if (amount > 0 && this.max && toIso(target) > this.max) return;
+		this.visibleMonth = target;
+	}
+	async moveFocus(current, offset, byMonth = false) {
+		const date = fromIso(current);
+		if (!date) return;
+		const target = byMonth ? new Date(date.getFullYear(), date.getMonth() + offset, Math.min(date.getDate(), new Date(date.getFullYear(), date.getMonth() + offset + 1, 0).getDate()), 12) : addDays(date, offset);
+		const value = toIso(target);
+		if (this.isUnavailable(value)) return;
+		const firstVisible = toIso(this.visibleMonth);
+		const afterVisible = toIso(addMonths(this.visibleMonth, this.displayedMonths));
+		if (value < firstVisible || value >= afterVisible) this.visibleMonth = beginningOfMonth(target);
+		this.focusDate = value;
+		await this.updateComplete;
+		Array.from(this.dayButtons).find((button) => button.dataset.date === value)?.focus();
+	}
+	handleDayKeydown(event, value, column) {
+		let action;
+		if (event.key === "ArrowLeft") action = this.moveFocus(value, -1);
+		else if (event.key === "ArrowRight") action = this.moveFocus(value, 1);
+		else if (event.key === "ArrowUp") action = this.moveFocus(value, -7);
+		else if (event.key === "ArrowDown") action = this.moveFocus(value, 7);
+		else if (event.key === "Home") action = this.moveFocus(value, -column);
+		else if (event.key === "End") action = this.moveFocus(value, 6 - column);
+		else if (event.key === "PageUp") action = this.moveFocus(value, event.shiftKey ? -12 : -1, true);
+		else if (event.key === "PageDown") action = this.moveFocus(value, event.shiftKey ? 12 : 1, true);
+		if (action) event.preventDefault();
+	}
+	weekdayLabels() {
+		const formatter = new Intl.DateTimeFormat(this.effectiveLocale, { weekday: "narrow" });
+		const monday = new Date(2024, 0, 1, 12);
+		const start = this.weekStart === "monday" ? monday : addDays(monday, -1);
+		return Array.from({ length: 7 }, (_, index) => formatter.format(addDays(start, index)));
+	}
+	renderDay(date, column, dateLabel, today) {
+		const value = toIso(date);
+		const disabled = this.isUnavailable(value);
+		const selected = value === this.from || value === this.to;
+		const inRange = !!this.to && value > this.from && value < this.to;
+		const focusable = !disabled && (this.focusDate ? value === this.focusDate : this.from ? value === this.from : value === today || !this.min || value >= this.min);
+		return html`<button
+      class="day ${value === this.from ? "range-start" : ""} ${value === this.to ? "range-end" : ""} ${inRange ? "in-range" : ""}"
+      type="button"
+      role="gridcell"
+      data-date=${value}
+      aria-label=${dateLabel.format(date)}
+      aria-selected=${selected ? "true" : "false"}
+      aria-current=${value === today ? "date" : nothing}
+      ?disabled=${disabled}
+      tabindex=${focusable ? "0" : "-1"}
+      @click=${() => this.select(value)}
+      @focus=${() => this.focusDate = value}
+      @keydown=${(event) => this.handleDayKeydown(event, value, column)}
+    >
+      <span>${date.getDate()}</span>
+    </button>`;
+	}
+	renderMonth(month, index) {
+		const year = month.getFullYear();
+		const monthIndex = month.getMonth();
+		const offset = this.weekStart === "monday" ? (month.getDay() + 6) % 7 : month.getDay();
+		const days = new Date(year, monthIndex + 1, 0).getDate();
+		const monthLabel = new Intl.DateTimeFormat(this.effectiveLocale, {
+			month: "long",
+			year: "numeric"
+		}).format(month);
+		const dateLabel = new Intl.DateTimeFormat(this.effectiveLocale, {
+			weekday: "long",
+			month: "long",
+			day: "numeric",
+			year: "numeric"
+		});
+		const today = toIso(/* @__PURE__ */ new Date());
+		const cells = Array.from({ length: 42 }, (_, cellIndex) => {
+			const day = cellIndex - offset + 1;
+			return day < 1 || day > days ? html`<span class="empty" role="gridcell" aria-disabled="true"></span>` : this.renderDay(new Date(year, monthIndex, day, 12), cellIndex % 7, dateLabel, today);
+		});
+		return html`<section class="month" aria-label=${monthLabel}>
+      <header class="month-header">
+        ${index === 0 ? html`<button class="navigation previous" type="button" aria-label="Previous month" ?disabled=${this.effectiveDisabled} @click=${() => this.navigate(-1)}><span aria-hidden="true">‹</span></button>` : nothing}
+        <h2>${monthLabel}</h2>
+        ${index === this.displayedMonths - 1 ? html`<button class="navigation next" type="button" aria-label="Next month" ?disabled=${this.effectiveDisabled} @click=${() => this.navigate(1)}><span aria-hidden="true">›</span></button>` : nothing}
+      </header>
+      <div class="weekdays" aria-hidden="true">${this.weekdayLabels().map((label) => html`<span>${label}</span>`)}</div>
+      <div class="days" role="grid" aria-label=${monthLabel}>
+        ${Array.from({ length: 6 }, (_, week) => html`<div class="week" role="row">${cells.slice(week * 7, week * 7 + 7)}</div>`)}
+      </div>
+    </section>`;
+	}
+	render() {
+		return html`<div class="c2-date-selector" role="group" aria-label=${this.ariaLabel ?? nothing} aria-disabled=${this.effectiveDisabled ? "true" : "false"}>
+      ${Array.from({ length: this.displayedMonths }, (_, index) => this.renderMonth(addMonths(this.visibleMonth, index), index))}
+    </div>`;
+	}
+};
+__decorate([state()], DateSelector.prototype, "disabledByForm", void 0);
+__decorate([state()], DateSelector.prototype, "visibleMonth", void 0);
+__decorate([state()], DateSelector.prototype, "focusDate", void 0);
+__decorate([queryAll(".day:not(:disabled)")], DateSelector.prototype, "dayButtons", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], DateSelector.prototype, "from", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], DateSelector.prototype, "to", void 0);
+__decorate([property({ type: String })], DateSelector.prototype, "min", void 0);
+__decorate([property({ type: String })], DateSelector.prototype, "max", void 0);
+__decorate([property({ type: String })], DateSelector.prototype, "locale", void 0);
+__decorate([property({
+	attribute: "week-start",
+	reflect: true
+})], DateSelector.prototype, "weekStart", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], DateSelector.prototype, "months", void 0);
+__decorate([property({ type: String })], DateSelector.prototype, "name", void 0);
+__decorate([property({ attribute: "end-name" })], DateSelector.prototype, "endName", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DateSelector.prototype, "required", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DateSelector.prototype, "disabled", void 0);
+__decorate([property({ attribute: "aria-label" })], DateSelector.prototype, "ariaLabel", void 0);
+DateSelector = __decorate([customElement("c2-date-selector")], DateSelector);
+//#endregion
+export { DateSelector };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@c2n/date-selector",
+  "version": "0.0.8",
+  "type": "module",
+  "main": "dist/date-selector.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/date-selector.d.ts",
+      "default": "./dist/date-selector.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "date-selector",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.8",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "be59cbccee1d33ca248e39f69b05c0b595ec6c6d"
+}

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/date-selector. Import once, anywhere in the program:
+//
+//     import '@c2n/date-selector/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { DateSelector } from '@c2n/date-selector'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-date-selector': C2Props<DateSelector>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/date-selector.d.ts

@@ -0,0 +1,124 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+export type DateSelectorWeekStart = 'monday' | 'sunday';
+export interface DateRangeChangeDetail {
+    from: string;
+    to: string;
+}
+export interface DateSelectorEventMap {
+    input: Event;
+    change: CustomEvent<DateRangeChangeDetail>;
+}
+export interface DateSelector {
+    addEventListener: TypedAddEventListener<DateSelector, DateSelectorEventMap>;
+    removeEventListener: TypedRemoveEventListener<DateSelector, DateSelectorEventMap>;
+}
+/**
+ * A keyboard-accessible date-range calendar inspired by travel booking pickers. It shows one or two consecutive
+ * months, starts a range on the first activation, completes it on the second, and starts over on the third. Dates are
+ * local-calendar ISO strings (`YYYY-MM-DD`), so they do not shift across time zones. Arrow keys move by day or week,
+ * Home/End move within the week, and Page Up/Page Down change month.
+ *
+ * When `name` is present, the start date is submitted under that name and the end date under `end-name` (or
+ * `${name}-end`). `required` requires a complete range. Use `min` and `max` to constrain availability.
+ *
+ * @tag c2-date-selector
+ * @event {Event} input - Fired after either endpoint changes, with `from` and `to` already updated.
+ * @event {CustomEvent<DateRangeChangeDetail>} change - Fired with `input`; `detail` contains the ISO `from` and `to` values.
+ * @cssproperty {color} [--c2-date-selector--background=#ffffff]
+ * @cssproperty {color} [--c2-date-selector--color=#18181b]
+ * @cssproperty {border} [--c2-date-selector--border=1px solid #e4e4e7]
+ * @cssproperty {border-radius} [--c2-date-selector--border-radius=14px]
+ * @cssproperty {box-shadow} [--c2-date-selector--box-shadow=0 12px 32px rgba(24, 24, 27, 0.08)]
+ * @cssproperty {pixel} [--c2-date-selector--min-width=312px] - Prevents the seven day columns and container padding from collapsing.
+ * @cssproperty {padding} [--c2-date-selector--padding=16px]
+ * @cssproperty {pixel} [--c2-date-selector--month-gap=40px]
+ * @cssproperty {font-family} [--c2-date-selector--font-family=inherit]
+ * @cssproperty {font-size} [--c2-date-selector--font-size=14px]
+ * @cssproperty {pixel} [--c2-date-selector__day--size=40px]
+ * @cssproperty {border-radius} [--c2-date-selector__day--border-radius=999px]
+ * @cssproperty {color} [--c2-date-selector__day__hover--background=#f4f4f5]
+ * @cssproperty {color} [--c2-date-selector__day__today--color=#0265dc]
+ * @cssproperty {font-weight} [--c2-date-selector__day__today--font-weight=600]
+ * @cssproperty {color} [--c2-date-selector__day__selected--background=#0265dc]
+ * @cssproperty {color} [--c2-date-selector__day__selected--color=#ffffff]
+ * @cssproperty {color} [--c2-date-selector__range--background=#edf1fe]
+ * @cssproperty {color} [--c2-date-selector__range--color=#18181b]
+ * @cssproperty {opacity} [--c2-date-selector__day__disabled--opacity=0.38]
+ * @cssproperty {color} [--c2-date-selector__weekday--color=#71717a]
+ * @cssproperty {font-size} [--c2-date-selector__weekday--font-size=12px]
+ * @cssproperty {font-weight} [--c2-date-selector__month-title--font-weight=600]
+ * @cssproperty {pixel} [--c2-date-selector__navigation--size=32px]
+ * @cssproperty {color} [--c2-date-selector__navigation__hover--background=#f4f4f5]
+ * @cssproperty {outline} [--c2-date-selector__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-date-selector__focus--outline-offset=2px]
+ * @cssproperty {opacity} [--c2-date-selector__disabled--opacity=0.38]
+ */
+export declare class DateSelector extends LitElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult;
+    private readonly internals;
+    private defaultsCaptured;
+    private defaultFrom;
+    private defaultTo;
+    private disabledByForm;
+    private visibleMonth;
+    private focusDate;
+    private readonly dayButtons;
+    /** Start of the selected range as `YYYY-MM-DD`. */
+    from: string;
+    /** End of the selected range as `YYYY-MM-DD`; empty while the range is incomplete. */
+    to: string;
+    /** Earliest selectable date as `YYYY-MM-DD`. */
+    min: string;
+    /** Latest selectable date as `YYYY-MM-DD`. */
+    max: string;
+    /** Locale used for month, weekday and accessible date labels. Defaults to the document language. */
+    locale: string;
+    /** First day of each calendar week. */
+    weekStart: DateSelectorWeekStart;
+    /** Number of consecutive months shown; clamped to one or two. */
+    months: number;
+    /** Form field name for the start date. */
+    name: string;
+    /** Form field name for the end date. Defaults to `${name}-end`. */
+    endName: string;
+    /** Requires both endpoints when the selector participates in a form. */
+    required: boolean;
+    /** Prevents navigation and selection and excludes the control from form submission. */
+    disabled: boolean;
+    /** Accessible name for the complete calendar. */
+    ariaLabel: string | null;
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private get effectiveDisabled();
+    private get effectiveLocale();
+    private get displayedMonths();
+    private normalizeRange;
+    private syncFormState;
+    private isUnavailable;
+    private select;
+    private navigate;
+    private moveFocus;
+    private handleDayKeydown;
+    private weekdayLabels;
+    private renderDay;
+    private renderMonth;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-date-selector': DateSelector;
+    }
+}
+//# sourceMappingURL=date-selector.d.ts.map

package/types/src/date-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-selector.d.ts","sourceRoot":"","sources":["../../src/date-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAG/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAGhG,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAEvD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAA;IACZ,EAAE,EAAE,MAAM,CAAA;CACX;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,KAAK,CAAA;IACZ,MAAM,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAA;CAC3C;AAED,MAAM,WAAW,YAAY;IAC3B,gBAAgB,EAAE,qBAAqB,CAAC,YAAY,EAAE,oBAAoB,CAAC,CAAA;IAC3E,mBAAmB,EAAE,wBAAwB,CAAC,YAAY,EAAE,oBAAoB,CAAC,CAAA;CAClF;AA2BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,cAAc,UAAO;IAC5B,OAAgB,MAAM,0BAAoB;IAE1C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,gBAAgB,CAAQ;IAChC,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,SAAS,CAAK;IACb,OAAO,CAAC,cAAc,CAAQ;IAC9B,OAAO,CAAC,YAAY,CAA+B;IACnD,OAAO,CAAC,SAAS,CAAK;IACE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAgC;IAE5F,mDAAmD;IACR,IAAI,SAAK;IACpD,sFAAsF;IAC3C,EAAE,SAAK;IAClD,gDAAgD;IACpB,GAAG,SAAK;IACpC,8CAA8C;IAClB,GAAG,SAAK;IACpC,oGAAoG;IACxE,MAAM,SAAK;IACvC,uCAAuC;IACe,SAAS,EAAE,qBAAqB,CAAW;IACjG,iEAAiE;IACtB,MAAM,SAAI;IACrD,0CAA0C;IACd,IAAI,SAAK;IACrC,mEAAmE;IAC9B,OAAO,SAAK;IACjD,wEAAwE;IAC5B,QAAQ,UAAQ;IAC5D,uFAAuF;IAC3C,QAAQ,UAAQ;IAC5D,iDAAiD;IACD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAwB;IAEhG,IAAI,IAAI,2BAEP;IACD,IAAI,MAAM,aAET;IACD,IAAI,QAAQ,kBAEX;IACD,IAAI,iBAAiB,WAEpB;IACD,IAAI,YAAY,YAEf;IACD,aAAa;IAGb,cAAc;IAId,iBAAiB;IAMjB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAItC,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI;cAO5C,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;cAWxC,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAKxD,OAAO,KAAK,iBAAiB,GAE5B;IACD,OAAO,KAAK,eAAe,GAE1B;IACD,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,MAAM;IAed,OAAO,CAAC,QAAQ;YAQF,SAAS;IAuBvB,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,SAAS;IAyBjB,OAAO,CAAC,WAAW;IA2BV,MAAM;CAKhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,YAAY,CAAA;KACjC;CACF"}

package/vue.d.ts

@@ -0,0 +1,37 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/date-selector. Import once, anywhere in the program:
+//
+//     import '@c2n/date-selector/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { DateSelector, DateSelectorEventMap } from '@c2n/date-selector'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-date-selector': DefineComponent<
+      C2Props<DateSelector> & {
+        'week-start'?: unknown
+        'end-name'?: unknown
+        'aria-label'?: unknown
+        onInput?: (event: DateSelectorEventMap['input']) => void
+        onChange?: (event: DateSelectorEventMap['change']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}