@c2n/date-input 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,11 @@
+# Date Input
+
+A form-associated, themeable single-date input for Lit applications.
+
+```bash
+npm install @c2n/date-input
+```
+
+```html
+<c2-date-input name="due" value="2026-09-15" min="2026-09-01" required aria-label="Due date"></c2-date-input>
+```

package/dist/date-input.js

@@ -0,0 +1,240 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { redispatchEvent } from "@c2n/core/dom-helper.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+//#region src/date-input.scss?inline
+var date_input_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--c2-date-input__supporting-text--gap,4px);\n  vertical-align: middle;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: var(--c2-date-input--min-height,36px);\n  gap: var(--c2-date-input--gap,8px);\n  padding: var(--c2-date-input--padding,6px 8px 6px 12px);\n  border: var(--c2-date-input--border,1px solid #bcbcc6);\n  border-radius: var(--c2-date-input--border-radius,6px);\n  color: var(--c2-date-input--color,#18181b);\n  background: var(--c2-date-input--background,#ffffff);\n  font-size: var(--c2-date-input--font-size,14px);\n  font-family: var(--c2-date-input--font-family,inherit);\n  line-height: var(--c2-date-input--line-height,20px);\n  cursor: text;\n  outline: var(--c2-date-input__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-color: transparent;\n  outline-offset: var(--c2-date-input__focus--outline-offset,0px);\n  transition: border 250ms cubic-bezier(0.2, 0, 0, 1), background 250ms cubic-bezier(0.2, 0, 0, 1), outline-color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.field:hover {\n  border: var(--c2-date-input__hover--border,1px solid #a1a1aa);\n}\n.field.focused {\n  border: var(--c2-date-input__focus--border,1px solid #0265dc);\n  outline: var(--c2-date-input__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-date-input__focus--outline-offset,0px);\n}\n.field.error {\n  border: var(--c2-date-input__error--border,1px solid #dc2626);\n}\n.field.error.focused {\n  outline: var(--c2-date-input__error__focus--outline,2px solid rgba(220, 38, 38, 0.25));\n}\n.field.read-only {\n  cursor: default;\n  background: var(--c2-date-input__read-only--background,#fafafa);\n}\n.field.disabled {\n  cursor: default;\n  opacity: var(--c2-date-input__disabled--opacity,0.38);\n  pointer-events: none;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  color: inherit;\n  background: transparent;\n  font: inherit;\n  line-height: inherit;\n}\ninput::-webkit-calendar-picker-indicator {\n  display: none;\n}\n\n.calendar-button {\n  display: inline-grid;\n  flex: none;\n  place-items: center;\n  width: var(--c2-date-input__calendar-icon--size,18px);\n  height: var(--c2-date-input__calendar-icon--size,18px);\n  margin: 0;\n  padding: 0;\n  border: 0;\n  color: var(--c2-date-input__calendar-icon--color,#71717a);\n  background: transparent;\n  cursor: pointer;\n}\n.calendar-button:hover {\n  color: var(--c2-date-input__calendar-icon__hover--color,#18181b);\n}\n.calendar-button:disabled {\n  cursor: default;\n}\n\n.calendar-button svg,\n::slotted([slot=calendar-icon]) {\n  width: var(--c2-date-input__calendar-icon--size,18px);\n  height: var(--c2-date-input__calendar-icon--size,18px);\n}\n\n.supporting-text {\n  color: var(--c2-date-input__supporting-text--color,#71717a);\n  font-size: var(--c2-date-input__supporting-text--font-size,12px);\n  line-height: var(--c2-date-input__supporting-text--line-height,16px);\n}\n.supporting-text.error {\n  color: var(--c2-date-input__supporting-text__error--color,#dc2626);\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-input.ts
+var DateInput = class DateInput extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.internals = this.attachInternals();
+		this.customValidityMessage = "";
+		this.defaultValue = "";
+		this.defaultCaptured = false;
+		this.disabledByForm = false;
+		this.focused = false;
+		this.hasSupportingSlot = false;
+		this.value = "";
+		this.min = "";
+		this.max = "";
+		this.step = 1;
+		this.name = "";
+		this.autocomplete = "";
+		this.required = false;
+		this.readOnly = false;
+		this.disabled = false;
+		this.error = false;
+		this.help = "";
+		this.errorText = "";
+		this.ariaLabel = null;
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.styles = unsafeCSS(date_input_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;
+	}
+	/** Current date as a `Date` at UTC midnight, or `null` when empty. */
+	get valueAsDate() {
+		return this.input?.valueAsDate ?? null;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.defaultCaptured) {
+			this.defaultValue = this.getAttribute("value") ?? "";
+			this.defaultCaptured = true;
+		}
+	}
+	focus(options) {
+		this.input?.focus(options);
+	}
+	/** Opens the browser date picker when supported. Must be called from a user gesture. */
+	showPicker() {
+		this.input?.showPicker();
+	}
+	checkValidity() {
+		return this.internals.checkValidity();
+	}
+	reportValidity() {
+		return this.internals.reportValidity();
+	}
+	setCustomValidity(message) {
+		this.customValidityMessage = message;
+		this.input?.setCustomValidity(message);
+		this.syncFormState();
+	}
+	formResetCallback() {
+		this.value = this.defaultValue;
+		this.error = false;
+	}
+	formDisabledCallback(disabled) {
+		this.disabledByForm = disabled && !this.hasAttribute("disabled");
+	}
+	formStateRestoreCallback(state) {
+		if (typeof state === "string") this.value = state;
+	}
+	get effectiveDisabled() {
+		return this.disabled || this.disabledByForm;
+	}
+	handleInput(event) {
+		this.value = event.target.value;
+		redispatchEvent(this, event);
+	}
+	handleChange(event) {
+		this.value = event.target.value;
+		redispatchEvent(this, event);
+	}
+	handleFocusIn(event) {
+		this.focused = true;
+		redispatchEvent(this, event);
+	}
+	handleFocusOut(event) {
+		this.focused = false;
+		redispatchEvent(this, event);
+	}
+	handleSlotChange(event) {
+		this.hasSupportingSlot = event.target.assignedNodes({ flatten: true }).length > 0;
+	}
+	openPicker(event) {
+		event.stopPropagation();
+		if (!this.effectiveDisabled && !this.readOnly) this.showPicker();
+	}
+	forwardFocus(event) {
+		if (event.target !== this.input) this.input?.focus();
+	}
+	updated(changed) {
+		if (changed.has("value") && this.input && this.input.value !== this.value) {
+			this.value = this.input.value;
+			return;
+		}
+		this.syncFormState();
+	}
+	syncFormState() {
+		if (!this.input) return;
+		if (this.effectiveDisabled) {
+			this.internals.setFormValue(null);
+			this.internals.setValidity({});
+			return;
+		}
+		this.internals.setFormValue(this.value, this.value);
+		this.input.setCustomValidity(this.customValidityMessage);
+		this.internals.setValidity(this.input.validity, this.input.validationMessage, this.input);
+	}
+	render() {
+		const showError = this.error && !this.effectiveDisabled;
+		const message = showError ? this.errorText : this.help;
+		const showSupporting = !!message || this.hasSupportingSlot;
+		return html`
+      <div
+        class="field ${classMap({
+			focused: this.focused,
+			error: showError,
+			"read-only": this.readOnly,
+			disabled: this.effectiveDisabled
+		})}"
+        @click=${this.forwardFocus}
+      >
+        <input
+          type="date"
+          aria-label=${ifDefined(this.ariaLabel || void 0)}
+          aria-invalid=${showError ? "true" : nothing}
+          aria-describedby=${showSupporting ? "supporting-text" : nothing}
+          name=${ifDefined(this.name || void 0)}
+          autocomplete=${ifDefined(this.autocomplete || void 0)}
+          min=${ifDefined(this.min || void 0)}
+          max=${ifDefined(this.max || void 0)}
+          step=${this.step}
+          ?required=${this.required}
+          ?readonly=${this.readOnly}
+          ?disabled=${this.effectiveDisabled}
+          .value=${live(this.value)}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+          @focusin=${this.handleFocusIn}
+          @focusout=${this.handleFocusOut}
+        />
+        <button
+          class="calendar-button"
+          type="button"
+          tabindex="-1"
+          aria-label="Open calendar"
+          ?disabled=${this.effectiveDisabled || this.readOnly}
+          @click=${this.openPicker}
+        >
+          <slot name="calendar-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <rect x="3" y="5" width="18" height="16" rx="2"></rect>
+              <path d="M16 3v4M8 3v4M3 10h18"></path>
+            </svg>
+          </slot>
+        </button>
+      </div>
+      ${showSupporting ? html`<div id="supporting-text" class="supporting-text ${classMap({ error: showError })}">
+              <slot name="supporting-text" @slotchange=${this.handleSlotChange}>${message}</slot>
+            </div>` : html`<slot name="supporting-text" hidden @slotchange=${this.handleSlotChange}></slot>`}
+    `;
+	}
+};
+__decorate([state()], DateInput.prototype, "disabledByForm", void 0);
+__decorate([state()], DateInput.prototype, "focused", void 0);
+__decorate([state()], DateInput.prototype, "hasSupportingSlot", void 0);
+__decorate([query("input")], DateInput.prototype, "input", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], DateInput.prototype, "value", void 0);
+__decorate([property({ type: String })], DateInput.prototype, "min", void 0);
+__decorate([property({ type: String })], DateInput.prototype, "max", void 0);
+__decorate([property({ type: Number })], DateInput.prototype, "step", void 0);
+__decorate([property({ type: String })], DateInput.prototype, "name", void 0);
+__decorate([property({ type: String })], DateInput.prototype, "autocomplete", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DateInput.prototype, "required", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DateInput.prototype, "readOnly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DateInput.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DateInput.prototype, "error", void 0);
+__decorate([property({ type: String })], DateInput.prototype, "help", void 0);
+__decorate([property({ attribute: "error-text" })], DateInput.prototype, "errorText", void 0);
+__decorate([property({ attribute: "aria-label" })], DateInput.prototype, "ariaLabel", void 0);
+DateInput = __decorate([customElement("c2-date-input")], DateInput);
+//#endregion
+export { DateInput };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@c2n/date-input",
+  "version": "0.0.8",
+  "type": "module",
+  "main": "dist/date-input.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/date-input.d.ts",
+      "default": "./dist/date-input.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-input",
+    "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-input. Import once, anywhere in the program:
+//
+//     import '@c2n/date-input/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 { DateInput } from '@c2n/date-input'
+
+/** 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-input': C2Props<DateInput>
+    }
+  }
+}
+
+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-input.d.ts

@@ -0,0 +1,123 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+/** Events fired by {@link DateInput}, keyed for `addEventListener`. */
+export interface DateInputEventMap {
+    input: InputEvent;
+    change: Event;
+}
+export interface DateInput {
+    addEventListener: TypedAddEventListener<DateInput, DateInputEventMap>;
+    removeEventListener: TypedRemoveEventListener<DateInput, DateInputEventMap>;
+}
+/**
+ * A form-associated single-date field backed by a native `<input type="date">`. Values, `min` and `max` use local
+ * calendar ISO strings (`YYYY-MM-DD`). The native picker and keyboard editing remain available while the component
+ * adds a consistent field, calendar affordance, helper text, error state and theming surface.
+ *
+ * @tag c2-date-input
+ *
+ * @slot calendar-icon - Replaces the calendar icon at the end of the field.
+ * @slot supporting-text - Rich helper content below the field. `help` and `error-text` are plain-text shortcuts.
+ *
+ * @event {InputEvent} input - Re-dispatched from the inner date input whenever the value changes.
+ * @event {Event} change - Re-dispatched from the inner date input when the value is committed.
+ *
+ * @cssproperty {pixel} [--c2-date-input--min-height=36px]
+ * @cssproperty {pixel} [--c2-date-input--gap=8px]
+ * @cssproperty {padding} [--c2-date-input--padding=6px 8px 6px 12px]
+ * @cssproperty {border} [--c2-date-input--border=1px solid #bcbcc6]
+ * @cssproperty {border-radius} [--c2-date-input--border-radius=6px]
+ * @cssproperty {color} [--c2-date-input--color=#18181b]
+ * @cssproperty {color} [--c2-date-input--background=#ffffff]
+ * @cssproperty {font-size} [--c2-date-input--font-size=14px]
+ * @cssproperty {font-family} [--c2-date-input--font-family=inherit]
+ * @cssproperty {pixel} [--c2-date-input--line-height=20px]
+ * @cssproperty {border} [--c2-date-input__hover--border=1px solid #a1a1aa]
+ * @cssproperty {border} [--c2-date-input__focus--border=1px solid #0265dc]
+ * @cssproperty {outline} [--c2-date-input__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-date-input__focus--outline-offset=0px]
+ * @cssproperty {border} [--c2-date-input__error--border=1px solid #dc2626]
+ * @cssproperty {outline} [--c2-date-input__error__focus--outline=2px solid rgba(220, 38, 38, 0.25)]
+ * @cssproperty {color} [--c2-date-input__read-only--background=#fafafa]
+ * @cssproperty {opacity} [--c2-date-input__disabled--opacity=0.38]
+ * @cssproperty {pixel} [--c2-date-input__calendar-icon--size=18px]
+ * @cssproperty {color} [--c2-date-input__calendar-icon--color=#71717a]
+ * @cssproperty {color} [--c2-date-input__calendar-icon__hover--color=#18181b]
+ * @cssproperty {pixel} [--c2-date-input__supporting-text--gap=4px]
+ * @cssproperty {font-size} [--c2-date-input__supporting-text--font-size=12px]
+ * @cssproperty {pixel} [--c2-date-input__supporting-text--line-height=16px]
+ * @cssproperty {color} [--c2-date-input__supporting-text--color=#71717a]
+ * @cssproperty {color} [--c2-date-input__supporting-text__error--color=#dc2626]
+ */
+export declare class DateInput extends LitElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResult;
+    private readonly internals;
+    private customValidityMessage;
+    private defaultValue;
+    private defaultCaptured;
+    private disabledByForm;
+    private focused;
+    private hasSupportingSlot;
+    private readonly input?;
+    /** Current date as a local-calendar `YYYY-MM-DD` string, or an empty string. */
+    value: string;
+    /** Earliest selectable date as `YYYY-MM-DD`. */
+    min: string;
+    /** Latest selectable date as `YYYY-MM-DD`. */
+    max: string;
+    /** Number of days between valid dates. */
+    step: number;
+    /** Form field name. */
+    name: string;
+    /** Browser autocomplete hint, for example `bday`. */
+    autocomplete: string;
+    /** Requires a date before the form can be submitted. */
+    required: boolean;
+    /** Prevents editing while keeping the value in form submission. */
+    readOnly: boolean;
+    /** Prevents interaction and excludes the value from form submission. */
+    disabled: boolean;
+    /** Applies the visual error state and sets `aria-invalid`. */
+    error: boolean;
+    /** Helper text shown below the field. */
+    help: string;
+    /** Message shown below the field while `error` is set. */
+    errorText: string;
+    /** Accessible name forwarded to the native date input. */
+    ariaLabel: string | null;
+    get form(): HTMLFormElement | null;
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    /** Current date as a `Date` at UTC midnight, or `null` when empty. */
+    get valueAsDate(): Date | null;
+    connectedCallback(): void;
+    focus(options?: FocusOptions): void;
+    /** Opens the browser date picker when supported. Must be called from a user gesture. */
+    showPicker(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    private get effectiveDisabled();
+    private handleInput;
+    private handleChange;
+    private handleFocusIn;
+    private handleFocusOut;
+    private handleSlotChange;
+    private openPicker;
+    private forwardFocus;
+    protected updated(changed: PropertyValues<this>): void;
+    private syncFormState;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-date-input': DateInput;
+    }
+}
+//# sourceMappingURL=date-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.d.ts","sourceRoot":"","sources":["../../src/date-input.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;AAOhG,uEAAuE;AACvE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,UAAU,CAAA;IACjB,MAAM,EAAE,KAAK,CAAA;CACd;AAED,MAAM,WAAW,SAAS;IACxB,gBAAgB,EAAE,qBAAqB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAA;IACrE,mBAAmB,EAAE,wBAAwB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAA;CAC5E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,cAAc,UAAO;IAC5B,OAAgB,MAAM,0BAAoB;IAE1C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,qBAAqB,CAAK;IAClC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,eAAe,CAAQ;IACtB,OAAO,CAAC,cAAc,CAAQ;IAC9B,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,iBAAiB,CAAQ;IAC1B,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAkB;IAEzD,gFAAgF;IACrC,KAAK,SAAK;IACrD,gDAAgD;IACpB,GAAG,SAAK;IACpC,8CAA8C;IAClB,GAAG,SAAK;IACpC,0CAA0C;IACd,IAAI,SAAI;IACpC,uBAAuB;IACK,IAAI,SAAK;IACrC,qDAAqD;IACzB,YAAY,SAAK;IAC7C,wDAAwD;IACZ,QAAQ,UAAQ;IAC5D,mEAAmE;IACvB,QAAQ,UAAQ;IAC5D,wEAAwE;IAC5B,QAAQ,UAAQ;IAC5D,8DAA8D;IAClB,KAAK,UAAQ;IACzD,yCAAyC;IACb,IAAI,SAAK;IACrC,0DAA0D;IACnB,SAAS,SAAK;IACrD,0DAA0D;IACV,SAAS,EAAE,MAAM,GAAG,IAAI,CAAO;IAE/E,IAAI,IAAI,2BAEP;IACD,IAAI,MAAM,aAET;IACD,IAAI,QAAQ,kBAEX;IACD,IAAI,iBAAiB,WAEpB;IACD,IAAI,YAAY,YAEf;IACD,sEAAsE;IACtE,IAAI,WAAW,gBAEd;IAEQ,iBAAiB;IAQjB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAIrC,wFAAwF;IACxF,UAAU;IAIV,aAAa;IAGb,cAAc;IAGd,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAMjC,iBAAiB;IAIjB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAGtC,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI;IAI/D,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,gBAAgB;IAGxB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,YAAY;cAID,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAQxD,OAAO,CAAC,aAAa;IAYZ,MAAM;CAqDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,SAAS,CAAA;KAC3B;CACF"}

package/vue.d.ts

@@ -0,0 +1,36 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/date-input. Import once, anywhere in the program:
+//
+//     import '@c2n/date-input/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 { DateInput, DateInputEventMap } from '@c2n/date-input'
+
+/** 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-input': DefineComponent<
+      C2Props<DateInput> & {
+        'error-text'?: unknown
+        'aria-label'?: unknown
+        onInput?: (event: DateInputEventMap['input']) => void
+        onChange?: (event: DateInputEventMap['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 {}