@tessera-ui/core 0.4.0

package/dist/collection/components/date-picker/date-picker.js

@@ -0,0 +1,462 @@
+import { h, Host } from "@stencil/core";
+import { generateId } from "../../utils/aria";
+const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+/**
+ * @part trigger - The input trigger element.
+ * @part calendar - The calendar dropdown container.
+ * @part header - The month/year navigation header.
+ * @part grid - The day grid.
+ * @part day - Individual day cell.
+ * @part label - The label element.
+ * @part error - The error message.
+ */
+export class TsDatePicker {
+    hostEl;
+    pickerId = generateId('ts-date-picker');
+    triggerEl;
+    /** The selected date value in ISO format (YYYY-MM-DD). */
+    value;
+    /** Placeholder text for the input. */
+    placeholder = 'Select date';
+    /** Whether the date picker is disabled. */
+    disabled = false;
+    /** Minimum selectable date in ISO format. */
+    min;
+    /** Maximum selectable date in ISO format. */
+    max;
+    /** Label text for the input. */
+    label;
+    /** Whether the input is in an error state. */
+    error = false;
+    /** Error message to display. */
+    errorMessage;
+    /** The input size. */
+    size = 'md';
+    /** Form field name. */
+    name;
+    /** Emitted when a date is selected. */
+    tsChange;
+    /** Whether the calendar dropdown is open. */
+    isOpen = false;
+    /** The month currently being viewed (0-11). */
+    viewMonth = new Date().getMonth();
+    /** The year currently being viewed. */
+    viewYear = new Date().getFullYear();
+    /** Currently focused day in the grid for keyboard navigation. */
+    focusedDay = null;
+    handleValueChange() {
+        if (this.value) {
+            const date = new Date(this.value + 'T00:00:00');
+            if (!isNaN(date.getTime())) {
+                this.viewMonth = date.getMonth();
+                this.viewYear = date.getFullYear();
+            }
+        }
+    }
+    connectedCallback() {
+        this.handleValueChange();
+    }
+    toggleCalendar = () => {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            this.handleValueChange();
+        }
+    };
+    closeCalendar = () => {
+        this.isOpen = false;
+        this.focusedDay = null;
+    };
+    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 = (day) => {
+        const month = String(this.viewMonth + 1).padStart(2, '0');
+        const dayStr = String(day).padStart(2, '0');
+        const newValue = `${this.viewYear}-${month}-${dayStr}`;
+        this.value = newValue;
+        this.tsChange.emit({ value: newValue });
+        this.closeCalendar();
+        this.triggerEl?.focus();
+    };
+    isDayDisabled(day) {
+        const dateStr = `${this.viewYear}-${String(this.viewMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+        if (this.min && dateStr < this.min)
+            return true;
+        if (this.max && dateStr > this.max)
+            return true;
+        return false;
+    }
+    isToday(day) {
+        const today = new Date();
+        return (day === today.getDate() &&
+            this.viewMonth === today.getMonth() &&
+            this.viewYear === today.getFullYear());
+    }
+    isSelected(day) {
+        if (!this.value)
+            return false;
+        const date = new Date(this.value + 'T00:00:00');
+        return (day === date.getDate() &&
+            this.viewMonth === date.getMonth() &&
+            this.viewYear === date.getFullYear());
+    }
+    getDaysInMonth() {
+        return new Date(this.viewYear, this.viewMonth + 1, 0).getDate();
+    }
+    getFirstDayOfWeek() {
+        return new Date(this.viewYear, this.viewMonth, 1).getDay();
+    }
+    getMonthName() {
+        return new Date(this.viewYear, this.viewMonth).toLocaleString('default', { month: 'long' });
+    }
+    handleTriggerKeydown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.toggleCalendar();
+        }
+        else if (event.key === 'Escape' && this.isOpen) {
+            this.closeCalendar();
+        }
+    };
+    handleCalendarKeydown = (event) => {
+        const daysInMonth = this.getDaysInMonth();
+        if (event.key === 'Escape') {
+            this.closeCalendar();
+            this.triggerEl?.focus();
+            return;
+        }
+        if (this.focusedDay === null) {
+            this.focusedDay = 1;
+            return;
+        }
+        let newDay = this.focusedDay;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                newDay = Math.min(this.focusedDay + 1, daysInMonth);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                newDay = Math.max(this.focusedDay - 1, 1);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                newDay = Math.min(this.focusedDay + 7, daysInMonth);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                newDay = Math.max(this.focusedDay - 7, 1);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (!this.isDayDisabled(this.focusedDay)) {
+                    this.selectDay(this.focusedDay);
+                }
+                return;
+            default:
+                return;
+        }
+        this.focusedDay = newDay;
+    };
+    handleDocumentClick = (event) => {
+        const path = event.composedPath();
+        if (!path.includes(this.hostEl)) {
+            this.closeCalendar();
+        }
+    };
+    componentDidLoad() {
+        document.addEventListener('click', this.handleDocumentClick);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleDocumentClick);
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    renderCalendar() {
+        const daysInMonth = this.getDaysInMonth();
+        const firstDay = this.getFirstDayOfWeek();
+        const days = [];
+        for (let i = 0; i < firstDay; i++) {
+            days.push(null);
+        }
+        for (let d = 1; d <= daysInMonth; d++) {
+            days.push(d);
+        }
+        return (h("div", { class: "date-picker__calendar", part: "calendar", role: "dialog", "aria-label": `${this.getMonthName()} ${this.viewYear}`, onKeyDown: this.handleCalendarKeydown }, h("div", { class: "date-picker__header", part: "header" }, h("button", { class: "date-picker__nav-btn", type: "button", "aria-label": "Previous month", onClick: this.prevMonth }, "\u2039"), h("span", { class: "date-picker__month-year" }, this.getMonthName(), " ", this.viewYear), h("button", { class: "date-picker__nav-btn", type: "button", "aria-label": "Next month", onClick: this.nextMonth }, "\u203A")), h("div", { class: "date-picker__grid", role: "grid", "aria-label": "Calendar" }, h("div", { class: "date-picker__weekdays" }, WEEKDAYS.map((wd) => (h("span", { class: "date-picker__weekday", role: "columnheader", key: wd }, wd)))), h("div", { class: "date-picker__days" }, days.map((day, index) => day === null ? (h("span", { class: "date-picker__day date-picker__day--empty", key: `empty-${index}` })) : (h("button", { class: {
+                'date-picker__day': true,
+                'date-picker__day--today': this.isToday(day),
+                'date-picker__day--selected': this.isSelected(day),
+                'date-picker__day--disabled': this.isDayDisabled(day),
+                'date-picker__day--focused': this.focusedDay === day,
+            }, part: "day", type: "button", disabled: this.isDayDisabled(day), tabindex: this.focusedDay === day ? 0 : -1, "aria-label": `${day} ${this.getMonthName()} ${this.viewYear}`, "aria-selected": this.isSelected(day) ? 'true' : undefined, key: `day-${day}`, onClick: () => this.selectDay(day) }, day)))))));
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '50137a4ae337d96c546d842875d4d22a710a6473', class: {
+                'ts-date-picker': true,
+                'ts-date-picker--open': this.isOpen,
+                'ts-date-picker--error': this.error,
+                [`ts-date-picker--${this.size}`]: true,
+            } }, this.label && (h("label", { key: '475c187da383d04c078f0870ae67010183983574', class: "date-picker__label", part: "label", htmlFor: this.pickerId }, this.label)), h("input", { key: '74f792fb4db7930dbacbf310162d89a2224480ad', ref: (el) => (this.triggerEl = el), class: "date-picker__trigger", part: "trigger", type: "text", id: this.pickerId, name: this.name, value: this.value || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: true, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-invalid": this.error ? 'true' : undefined, onClick: this.toggleCalendar, onKeyDown: this.handleTriggerKeydown }), this.isOpen && this.renderCalendar(), this.error && this.errorMessage && (h("span", { key: '8b807115f167df573ff6a48d6790da72e2e82197', class: "date-picker__error", part: "error", role: "alert" }, this.errorMessage))));
+    }
+    static get is() { return "ts-date-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["date-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["date-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected date value in ISO format (YYYY-MM-DD)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Select date'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the date picker is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum selectable date in ISO format."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum selectable date in ISO format."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message to display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The input size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Form field name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "viewMonth": {},
+            "viewYear": {},
+            "focusedDay": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsChange",
+                "name": "tsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a date is selected."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=date-picker.js.map

package/dist/collection/components/date-picker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, h, Host, Element, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport { generateId } from '../../utils/aria';\n\nconst WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];\n\n/**\n * @part trigger - The input trigger element.\n * @part calendar - The calendar dropdown container.\n * @part header - The month/year navigation header.\n * @part grid - The day grid.\n * @part day - Individual day cell.\n * @part label - The label element.\n * @part error - The error message.\n */\n@Component({\n  tag: 'ts-date-picker',\n  styleUrl: 'date-picker.css',\n  shadow: true,\n})\nexport class TsDatePicker {\n  @Element() hostEl!: HTMLElement;\n\n  private pickerId = generateId('ts-date-picker');\n  private triggerEl?: HTMLInputElement;\n\n  /** The selected date value in ISO format (YYYY-MM-DD). */\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  /** Placeholder text for the input. */\n  @Prop() placeholder = 'Select date';\n\n  /** Whether the date picker is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Minimum selectable date in ISO format. */\n  @Prop() min?: string;\n\n  /** Maximum selectable date in ISO format. */\n  @Prop() max?: string;\n\n  /** Label text for the input. */\n  @Prop() label?: string;\n\n  /** Whether the input is in an error state. */\n  @Prop({ reflect: true }) error = false;\n\n  /** Error message to display. */\n  @Prop() errorMessage?: string;\n\n  /** The input size. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Form field name. */\n  @Prop() name?: string;\n\n  /** Emitted when a date is selected. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<{ value: string }>;\n\n  /** Whether the calendar dropdown is open. */\n  @State() isOpen = false;\n\n  /** The month currently being viewed (0-11). */\n  @State() viewMonth = new Date().getMonth();\n\n  /** The year currently being viewed. */\n  @State() viewYear = new Date().getFullYear();\n\n  /** Currently focused day in the grid for keyboard navigation. */\n  @State() focusedDay: number | null = null;\n\n  @Watch('value')\n  handleValueChange(): void {\n    if (this.value) {\n      const date = new Date(this.value + 'T00:00:00');\n      if (!isNaN(date.getTime())) {\n        this.viewMonth = date.getMonth();\n        this.viewYear = date.getFullYear();\n      }\n    }\n  }\n\n  connectedCallback(): void {\n    this.handleValueChange();\n  }\n\n  private toggleCalendar = (): void => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) {\n      this.handleValueChange();\n    }\n  };\n\n  private closeCalendar = (): void => {\n    this.isOpen = false;\n    this.focusedDay = null;\n  };\n\n  private prevMonth = (): void => {\n    if (this.viewMonth === 0) {\n      this.viewMonth = 11;\n      this.viewYear -= 1;\n    } else {\n      this.viewMonth -= 1;\n    }\n  };\n\n  private nextMonth = (): void => {\n    if (this.viewMonth === 11) {\n      this.viewMonth = 0;\n      this.viewYear += 1;\n    } else {\n      this.viewMonth += 1;\n    }\n  };\n\n  private selectDay = (day: number): void => {\n    const month = String(this.viewMonth + 1).padStart(2, '0');\n    const dayStr = String(day).padStart(2, '0');\n    const newValue = `${this.viewYear}-${month}-${dayStr}`;\n    this.value = newValue;\n    this.tsChange.emit({ value: newValue });\n    this.closeCalendar();\n    this.triggerEl?.focus();\n  };\n\n  private isDayDisabled(day: number): boolean {\n    const dateStr = `${this.viewYear}-${String(this.viewMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;\n    if (this.min && dateStr < this.min) return true;\n    if (this.max && dateStr > this.max) return true;\n    return false;\n  }\n\n  private isToday(day: number): boolean {\n    const today = new Date();\n    return (\n      day === today.getDate() &&\n      this.viewMonth === today.getMonth() &&\n      this.viewYear === today.getFullYear()\n    );\n  }\n\n  private isSelected(day: number): boolean {\n    if (!this.value) return false;\n    const date = new Date(this.value + 'T00:00:00');\n    return (\n      day === date.getDate() &&\n      this.viewMonth === date.getMonth() &&\n      this.viewYear === date.getFullYear()\n    );\n  }\n\n  private getDaysInMonth(): number {\n    return new Date(this.viewYear, this.viewMonth + 1, 0).getDate();\n  }\n\n  private getFirstDayOfWeek(): number {\n    return new Date(this.viewYear, this.viewMonth, 1).getDay();\n  }\n\n  private getMonthName(): string {\n    return new Date(this.viewYear, this.viewMonth).toLocaleString('default', { month: 'long' });\n  }\n\n  private handleTriggerKeydown = (event: KeyboardEvent): void => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.toggleCalendar();\n    } else if (event.key === 'Escape' && this.isOpen) {\n      this.closeCalendar();\n    }\n  };\n\n  private handleCalendarKeydown = (event: KeyboardEvent): void => {\n    const daysInMonth = this.getDaysInMonth();\n\n    if (event.key === 'Escape') {\n      this.closeCalendar();\n      this.triggerEl?.focus();\n      return;\n    }\n\n    if (this.focusedDay === null) {\n      this.focusedDay = 1;\n      return;\n    }\n\n    let newDay = this.focusedDay;\n\n    switch (event.key) {\n      case 'ArrowRight':\n        event.preventDefault();\n        newDay = Math.min(this.focusedDay + 1, daysInMonth);\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n        newDay = Math.max(this.focusedDay - 1, 1);\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n        newDay = Math.min(this.focusedDay + 7, daysInMonth);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        newDay = Math.max(this.focusedDay - 7, 1);\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (!this.isDayDisabled(this.focusedDay)) {\n          this.selectDay(this.focusedDay);\n        }\n        return;\n      default:\n        return;\n    }\n\n    this.focusedDay = newDay;\n  };\n\n  private handleDocumentClick = (event: MouseEvent): void => {\n    const path = event.composedPath();\n    if (!path.includes(this.hostEl)) {\n      this.closeCalendar();\n    }\n  };\n\n  componentDidLoad(): void {\n    document.addEventListener('click', this.handleDocumentClick);\n  }\n\n  disconnectedCallback(): void {\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderCalendar() {\n    const daysInMonth = this.getDaysInMonth();\n    const firstDay = this.getFirstDayOfWeek();\n    const days: (number | null)[] = [];\n\n    for (let i = 0; i < firstDay; i++) {\n      days.push(null);\n    }\n    for (let d = 1; d <= daysInMonth; d++) {\n      days.push(d);\n    }\n\n    return (\n      <div\n        class=\"date-picker__calendar\"\n        part=\"calendar\"\n        role=\"dialog\"\n        aria-label={`${this.getMonthName()} ${this.viewYear}`}\n        onKeyDown={this.handleCalendarKeydown}\n      >\n        <div class=\"date-picker__header\" part=\"header\">\n          <button\n            class=\"date-picker__nav-btn\"\n            type=\"button\"\n            aria-label=\"Previous month\"\n            onClick={this.prevMonth}\n          >\n            &#x2039;\n          </button>\n          <span class=\"date-picker__month-year\">\n            {this.getMonthName()} {this.viewYear}\n          </span>\n          <button\n            class=\"date-picker__nav-btn\"\n            type=\"button\"\n            aria-label=\"Next month\"\n            onClick={this.nextMonth}\n          >\n            &#x203A;\n          </button>\n        </div>\n\n        <div class=\"date-picker__grid\" role=\"grid\" aria-label=\"Calendar\">\n          <div class=\"date-picker__weekdays\">\n            {WEEKDAYS.map((wd) => (\n              <span class=\"date-picker__weekday\" role=\"columnheader\" key={wd}>\n                {wd}\n              </span>\n            ))}\n          </div>\n          <div class=\"date-picker__days\">\n            {days.map((day, index) =>\n              day === null ? (\n                <span class=\"date-picker__day date-picker__day--empty\" key={`empty-${index}`} />\n              ) : (\n                <button\n                  class={{\n                    'date-picker__day': true,\n                    'date-picker__day--today': this.isToday(day),\n                    'date-picker__day--selected': this.isSelected(day),\n                    'date-picker__day--disabled': this.isDayDisabled(day),\n                    'date-picker__day--focused': this.focusedDay === day,\n                  }}\n                  part=\"day\"\n                  type=\"button\"\n                  disabled={this.isDayDisabled(day)}\n                  tabindex={this.focusedDay === day ? 0 : -1}\n                  aria-label={`${day} ${this.getMonthName()} ${this.viewYear}`}\n                  aria-selected={this.isSelected(day) ? 'true' : undefined}\n                  key={`day-${day}`}\n                  onClick={() => this.selectDay(day)}\n                >\n                  {day}\n                </button>\n              ),\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-date-picker': true,\n          'ts-date-picker--open': this.isOpen,\n          'ts-date-picker--error': this.error,\n          [`ts-date-picker--${this.size}`]: true,\n        }}\n      >\n        {this.label && (\n          <label class=\"date-picker__label\" part=\"label\" htmlFor={this.pickerId}>\n            {this.label}\n          </label>\n        )}\n\n        <input\n          ref={(el) => (this.triggerEl = el)}\n          class=\"date-picker__trigger\"\n          part=\"trigger\"\n          type=\"text\"\n          id={this.pickerId}\n          name={this.name}\n          value={this.value || ''}\n          placeholder={this.placeholder}\n          disabled={this.disabled}\n          readOnly\n          aria-haspopup=\"dialog\"\n          aria-expanded={this.isOpen ? 'true' : 'false'}\n          aria-invalid={this.error ? 'true' : undefined}\n          onClick={this.toggleCalendar}\n          onKeyDown={this.handleTriggerKeydown}\n        />\n\n        {this.isOpen && this.renderCalendar()}\n\n        {this.error && this.errorMessage && (\n          <span class=\"date-picker__error\" part=\"error\" role=\"alert\">\n            {this.errorMessage}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/date-picker/date-picker.stories.js

@@ -0,0 +1,119 @@
+// Hand-written stories for ts-date-picker
+export default {
+    title: 'Components/DatePicker',
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'text',
+            description: 'The selected date value in ISO format (YYYY-MM-DD).',
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text for the input.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the date picker is disabled.',
+        },
+        min: {
+            control: 'text',
+            description: 'Minimum selectable date in ISO format.',
+        },
+        max: {
+            control: 'text',
+            description: 'Maximum selectable date in ISO format.',
+        },
+        label: {
+            control: 'text',
+            description: 'Label text for the input.',
+        },
+        error: {
+            control: 'boolean',
+            description: 'Whether the input is in an error state.',
+        },
+        errorMessage: {
+            control: 'text',
+            description: 'Error message to display.',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'The input size.',
+        },
+        name: {
+            control: 'text',
+            description: 'Form field name.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.value !== undefined && args.value !== '')
+        attrs.push(`value="${args.value}"`);
+    if (args.placeholder !== undefined)
+        attrs.push(`placeholder="${args.placeholder}"`);
+    if (args.disabled)
+        attrs.push('disabled');
+    if (args.min !== undefined && args.min !== '')
+        attrs.push(`min="${args.min}"`);
+    if (args.max !== undefined && args.max !== '')
+        attrs.push(`max="${args.max}"`);
+    if (args.label !== undefined)
+        attrs.push(`label="${args.label}"`);
+    if (args.error)
+        attrs.push('error');
+    if (args.errorMessage !== undefined && args.errorMessage !== '')
+        attrs.push(`error-message="${args.errorMessage}"`);
+    if (args.size !== undefined)
+        attrs.push(`size="${args.size}"`);
+    if (args.name !== undefined && args.name !== '')
+        attrs.push(`name="${args.name}"`);
+    return `<ts-date-picker ${attrs.join(' ')}></ts-date-picker>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        label: 'Start date',
+        placeholder: 'Select date',
+        size: 'md',
+        disabled: false,
+        error: false,
+    },
+});
+export const Sizes = () => `
+  <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;">
+    <ts-date-picker label="Small" size="sm" placeholder="Select date"></ts-date-picker>
+    <ts-date-picker label="Medium" size="md" placeholder="Select date"></ts-date-picker>
+    <ts-date-picker label="Large" size="lg" placeholder="Select date"></ts-date-picker>
+  </div>
+`;
+export const States = () => `
+  <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;">
+    <ts-date-picker label="Default" placeholder="Select date"></ts-date-picker>
+    <ts-date-picker label="With value" value="2026-03-15" placeholder="Select date"></ts-date-picker>
+    <ts-date-picker label="Disabled" placeholder="Select date" disabled></ts-date-picker>
+    <ts-date-picker label="Error state" placeholder="Select date" error error-message="Please select a valid date"></ts-date-picker>
+  </div>
+`;
+export const Composition = () => `
+  <div style="max-width: 400px; font-family: sans-serif;">
+    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px;">
+      <h4 style="margin: 0 0 16px;">Travel Dates</h4>
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <ts-date-picker
+          label="Departure"
+          placeholder="Select departure date"
+          min="2026-03-24"
+          name="departure"
+        ></ts-date-picker>
+        <ts-date-picker
+          label="Return"
+          placeholder="Select return date"
+          min="2026-03-25"
+          name="return"
+        ></ts-date-picker>
+        <ts-button variant="primary" block>Search Flights</ts-button>
+      </div>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=date-picker.stories.js.map

package/dist/collection/components/date-picker/date-picker.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.stories.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-date-picker\n\nexport default {\n  title: 'Components/DatePicker',\n  tags: ['autodocs'],\n  argTypes: {\n    value: {\n      control: 'text',\n      description: 'The selected date value in ISO format (YYYY-MM-DD).',\n    },\n    placeholder: {\n      control: 'text',\n      description: 'Placeholder text for the input.',\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Whether the date picker is disabled.',\n    },\n    min: {\n      control: 'text',\n      description: 'Minimum selectable date in ISO format.',\n    },\n    max: {\n      control: 'text',\n      description: 'Maximum selectable date in ISO format.',\n    },\n    label: {\n      control: 'text',\n      description: 'Label text for the input.',\n    },\n    error: {\n      control: 'boolean',\n      description: 'Whether the input is in an error state.',\n    },\n    errorMessage: {\n      control: 'text',\n      description: 'Error message to display.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The input size.',\n    },\n    name: {\n      control: 'text',\n      description: 'Form field name.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.value !== undefined && args.value !== '') attrs.push(`value=\"${args.value}\"`);\n  if (args.placeholder !== undefined) attrs.push(`placeholder=\"${args.placeholder}\"`);\n  if (args.disabled) attrs.push('disabled');\n  if (args.min !== undefined && args.min !== '') attrs.push(`min=\"${args.min}\"`);\n  if (args.max !== undefined && args.max !== '') attrs.push(`max=\"${args.max}\"`);\n  if (args.label !== undefined) attrs.push(`label=\"${args.label}\"`);\n  if (args.error) attrs.push('error');\n  if (args.errorMessage !== undefined && args.errorMessage !== '') attrs.push(`error-message=\"${args.errorMessage}\"`);\n  if (args.size !== undefined) attrs.push(`size=\"${args.size}\"`);\n  if (args.name !== undefined && args.name !== '') attrs.push(`name=\"${args.name}\"`);\n  return `<ts-date-picker ${attrs.join(' ')}></ts-date-picker>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    label: 'Start date',\n    placeholder: 'Select date',\n    size: 'md',\n    disabled: false,\n    error: false,\n  },\n});\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;\">\n    <ts-date-picker label=\"Small\" size=\"sm\" placeholder=\"Select date\"></ts-date-picker>\n    <ts-date-picker label=\"Medium\" size=\"md\" placeholder=\"Select date\"></ts-date-picker>\n    <ts-date-picker label=\"Large\" size=\"lg\" placeholder=\"Select date\"></ts-date-picker>\n  </div>\n`;\n\nexport const States = (): string => `\n  <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start;\">\n    <ts-date-picker label=\"Default\" placeholder=\"Select date\"></ts-date-picker>\n    <ts-date-picker label=\"With value\" value=\"2026-03-15\" placeholder=\"Select date\"></ts-date-picker>\n    <ts-date-picker label=\"Disabled\" placeholder=\"Select date\" disabled></ts-date-picker>\n    <ts-date-picker label=\"Error state\" placeholder=\"Select date\" error error-message=\"Please select a valid date\"></ts-date-picker>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"max-width: 400px; font-family: sans-serif;\">\n    <div style=\"border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px;\">\n      <h4 style=\"margin: 0 0 16px;\">Travel Dates</h4>\n      <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n        <ts-date-picker\n          label=\"Departure\"\n          placeholder=\"Select departure date\"\n          min=\"2026-03-24\"\n          name=\"departure\"\n        ></ts-date-picker>\n        <ts-date-picker\n          label=\"Return\"\n          placeholder=\"Select return date\"\n          min=\"2026-03-25\"\n          name=\"return\"\n        ></ts-date-picker>\n        <ts-button variant=\"primary\" block>Search Flights</ts-button>\n      </div>\n    </div>\n  </div>\n`;\n"]}