@countermeasure-platform/web-components 0.2.0

package/dist/form/date-picker/range.js

@@ -0,0 +1,179 @@
+import { t as e } from "../../a11y-B5pN4M_a.js";
+import { n as t, t as n } from "../../utils-Cn_W3h3f.js";
+import { Calendar as r } from "../calendar/index.js";
+//#region src/form/date-picker/range.ts
+function i(e, t, n) {
+	if (t === "YYYY-MM-DD") return e.toISOString().split("T")[0] ?? "";
+	let r = n ?? (typeof navigator < "u" ? navigator.language : "en-US");
+	return new Intl.DateTimeFormat(r, {
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit"
+	}).format(e);
+}
+function a() {
+	return [
+		{
+			label: "Last 7 days",
+			getRange: () => {
+				let e = /* @__PURE__ */ new Date(), t = /* @__PURE__ */ new Date();
+				return t.setDate(t.getDate() - 6), [t, e];
+			}
+		},
+		{
+			label: "Last 30 days",
+			getRange: () => {
+				let e = /* @__PURE__ */ new Date(), t = /* @__PURE__ */ new Date();
+				return t.setDate(t.getDate() - 29), [t, e];
+			}
+		},
+		{
+			label: "Last 90 days",
+			getRange: () => {
+				let e = /* @__PURE__ */ new Date(), t = /* @__PURE__ */ new Date();
+				return t.setDate(t.getDate() - 89), [t, e];
+			}
+		},
+		{
+			label: "Year to date",
+			getRange: () => {
+				let e = /* @__PURE__ */ new Date();
+				return [new Date(e.getFullYear(), 0, 1), e];
+			}
+		}
+	];
+}
+var o = class {
+	el;
+	inputEl;
+	dropdownEl;
+	inputId;
+	dropdownId;
+	leftCalendar = null;
+	rightCalendar = null;
+	config;
+	startDate;
+	endDate;
+	pendingStart = null;
+	pendingEnd = null;
+	isOpen = !1;
+	isDestroyed = !1;
+	handleDocumentClick;
+	handleInputKeydown;
+	constructor(e) {
+		this.config = e, this.inputId = t("cmm-daterange"), this.dropdownId = t("cmm-daterange-dropdown"), this.startDate = e.startDate ?? null, this.endDate = e.endDate ?? null, this.el = document.createElement("div"), this.el.className = this.buildRootClass();
+		let r = document.createElement("div");
+		r.className = "cmm-date-range__input-wrap", this.inputEl = document.createElement("input"), this.inputEl.id = this.inputId, this.inputEl.type = "text", this.inputEl.className = "cmm-date-range__input", this.inputEl.readOnly = !0, this.inputEl.placeholder = "Select date range", this.inputEl.setAttribute("role", "combobox"), this.inputEl.setAttribute("aria-haspopup", "dialog"), this.inputEl.setAttribute("aria-expanded", "false"), this.inputEl.setAttribute("aria-controls", this.dropdownId), this.inputEl.setAttribute("aria-label", "Date range"), this.updateInputDisplay(), this.inputEl.addEventListener("click", () => {
+			this.isDestroyed || (this.isOpen ? this.close() : this.open());
+		});
+		let i = document.createElement("button");
+		i.type = "button", i.className = "cmm-date-range__toggle", i.setAttribute("aria-label", "Open date range picker"), i.innerHTML = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><rect x=\"2\" y=\"3\" width=\"12\" height=\"11\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.2\"/><path d=\"M2 6.5h12M5.5 2v2M10.5 2v2\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"/></svg>", i.addEventListener("click", (e) => {
+			e.stopPropagation(), !this.isDestroyed && (this.isOpen ? this.close() : this.open());
+		}), r.appendChild(this.inputEl), r.appendChild(i), this.el.appendChild(r), this.dropdownEl = document.createElement("div"), this.dropdownEl.id = this.dropdownId, this.dropdownEl.className = "cmm-date-range__dropdown", this.dropdownEl.setAttribute("role", "dialog"), this.dropdownEl.setAttribute("aria-modal", "false"), this.dropdownEl.setAttribute("aria-label", "Choose date range"), this.dropdownEl.style.display = "none", this.el.appendChild(this.dropdownEl), this.handleDocumentClick = (e) => {
+			if (this.isDestroyed) return;
+			let t = e.target;
+			this.el.contains(t) || this.close();
+		}, this.handleInputKeydown = (e) => {
+			this.isDestroyed || e.key === "Escape" && this.isOpen && (e.preventDefault(), this.close());
+		}, this.inputEl.addEventListener("keydown", this.handleInputKeydown), n(e.container).appendChild(this.el);
+	}
+	getRange() {
+		return {
+			start: this.startDate,
+			end: this.endDate
+		};
+	}
+	setRange(e, t) {
+		this.startDate = e, this.endDate = t, this.updateInputDisplay(), this.syncCalendars();
+	}
+	open() {
+		this.isOpen || this.isDestroyed || (this.isOpen = !0, this.pendingStart = this.startDate, this.pendingEnd = this.endDate, this.dropdownEl.style.display = "", this.inputEl.setAttribute("aria-expanded", "true"), this.buildDropdownContent(), this.positionDropdown(), document.addEventListener("click", this.handleDocumentClick));
+	}
+	close() {
+		this.isOpen && (this.isOpen = !1, this.dropdownEl.style.display = "none", this.inputEl.setAttribute("aria-expanded", "false"), document.removeEventListener("click", this.handleDocumentClick));
+	}
+	destroy() {
+		this.isDestroyed = !0, this.close(), this.inputEl.removeEventListener("keydown", this.handleInputKeydown), document.removeEventListener("click", this.handleDocumentClick), this.leftCalendar?.destroy(), this.rightCalendar?.destroy(), this.el.remove();
+	}
+	buildRootClass() {
+		let e = ["cmm-date-range"];
+		return this.config.className && e.push(this.config.className), e.join(" ");
+	}
+	buildDropdownContent() {
+		this.dropdownEl.innerHTML = "", this.leftCalendar?.destroy(), this.rightCalendar?.destroy(), this.leftCalendar = null, this.rightCalendar = null;
+		let t = document.createElement("div");
+		t.className = "cmm-date-range__body";
+		let n = this.config.presets ?? a(), i = document.createElement("div");
+		i.className = "cmm-date-range__presets";
+		for (let e of n) {
+			let t = document.createElement("button");
+			t.type = "button", t.className = "cmm-date-range__preset-btn", t.textContent = e.label, t.addEventListener("click", () => {
+				if (this.isDestroyed) return;
+				let [t, n] = e.getRange();
+				this.pendingStart = t, this.pendingEnd = n, this.syncCalendars();
+			}), i.appendChild(t);
+		}
+		t.appendChild(i);
+		let o = document.createElement("div");
+		o.className = "cmm-date-range__calendars";
+		let s = document.createElement("div");
+		s.className = "cmm-date-range__calendar-left", o.appendChild(s);
+		let c = document.createElement("div");
+		c.className = "cmm-date-range__calendar-right", o.appendChild(c), t.appendChild(o), this.dropdownEl.appendChild(t);
+		let l = this.pendingStart ?? /* @__PURE__ */ new Date(), u = l.getFullYear(), d = l.getMonth(), f = u, p = d + 1;
+		p > 11 && (p = 0, f += 1), this.leftCalendar = new r({
+			container: s,
+			mode: "range",
+			rangeStart: this.pendingStart,
+			rangeEnd: this.pendingEnd,
+			minDate: this.config.minDate,
+			maxDate: this.config.maxDate,
+			onRangeChange: (e, t) => {
+				this.pendingStart = e, this.pendingEnd = t, this.rightCalendar?.setRange(e, t);
+			}
+		}), this.leftCalendar.goToMonth(u, d), this.rightCalendar = new r({
+			container: c,
+			mode: "range",
+			rangeStart: this.pendingStart,
+			rangeEnd: this.pendingEnd,
+			minDate: this.config.minDate,
+			maxDate: this.config.maxDate,
+			onRangeChange: (e, t) => {
+				this.pendingStart = e, this.pendingEnd = t, this.leftCalendar?.setRange(e, t);
+			}
+		}), this.rightCalendar.goToMonth(f, p);
+		let m = document.createElement("div");
+		m.className = "cmm-date-range__footer";
+		let h = document.createElement("button");
+		h.type = "button", h.className = "cmm-date-range__cancel-btn", h.textContent = "Cancel", h.addEventListener("click", () => {
+			this.isDestroyed || this.close();
+		});
+		let g = document.createElement("button");
+		g.type = "button", g.className = "cmm-date-range__apply-btn", g.textContent = "Apply", g.addEventListener("click", () => {
+			this.isDestroyed || (this.startDate = this.pendingStart, this.endDate = this.pendingEnd, this.updateInputDisplay(), this.config.onChange?.(this.startDate, this.endDate), this.startDate !== null && this.endDate !== null && e(`Selected range from ${this.startDate.toLocaleDateString("en-US", {
+				month: "short",
+				day: "numeric",
+				year: "numeric"
+			})} to ${this.endDate.toLocaleDateString("en-US", {
+				month: "short",
+				day: "numeric",
+				year: "numeric"
+			})}`, "polite"), this.close());
+		}), m.appendChild(h), m.appendChild(g), this.dropdownEl.appendChild(m);
+	}
+	syncCalendars() {
+		this.leftCalendar?.setRange(this.pendingStart, this.pendingEnd), this.rightCalendar?.setRange(this.pendingStart, this.pendingEnd);
+	}
+	updateInputDisplay() {
+		let e = this.config.format ?? "YYYY-MM-DD", t = this.config.locale;
+		this.startDate !== null && this.endDate !== null ? this.inputEl.value = `${i(this.startDate, e, t)} \u2014 ${i(this.endDate, e, t)}` : this.startDate === null ? this.inputEl.value = "" : this.inputEl.value = `${i(this.startDate, e, t)} \u2014 ...`;
+	}
+	positionDropdown() {
+		let e = this.el.getBoundingClientRect(), t = window.innerHeight - e.bottom;
+		t < 400 && e.top > t ? (this.dropdownEl.classList.add("cmm-date-range__dropdown--above"), this.dropdownEl.classList.remove("cmm-date-range__dropdown--below")) : (this.dropdownEl.classList.add("cmm-date-range__dropdown--below"), this.dropdownEl.classList.remove("cmm-date-range__dropdown--above"));
+	}
+};
+//#endregion
+export { o as DateRangePicker };
+
+//# sourceMappingURL=range.js.map

package/dist/form/date-picker/range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.js","names":[],"sources":["../../../src/form/date-picker/range.ts"],"sourcesContent":["/**\n * DateRangePicker - Dual calendar range selection with presets\n * @countermeasure/web-components/form/date-picker\n */\n\nimport { type DateRangePickerConfig, type DateRangePreset } from './types'\nimport { Calendar } from '../calendar/index'\nimport { resolveContainer, uniqueId } from '../../primitives/utils'\nimport { announce } from '../../utils/a11y'\n\nfunction formatDate(date: Date, format: string, locale?: string): string {\n  // For ISO format, use standard formatting\n  if (format === 'YYYY-MM-DD') {\n    return date.toISOString().split('T')[0] ?? ''\n  }\n\n  // For display, use Intl.DateTimeFormat\n  const loc = locale ?? (typeof navigator !== 'undefined' ? navigator.language : 'en-US')\n\n  return new Intl.DateTimeFormat(loc, {\n    year: 'numeric',\n    month: '2-digit',\n    day: '2-digit',\n  }).format(date)\n}\n\nfunction defaultPresets(): DateRangePreset[] {\n  return [\n    {\n      label: 'Last 7 days',\n      getRange: () => {\n        const end = new Date()\n        const start = new Date()\n        start.setDate(start.getDate() - 6)\n        return [start, end]\n      },\n    },\n    {\n      label: 'Last 30 days',\n      getRange: () => {\n        const end = new Date()\n        const start = new Date()\n        start.setDate(start.getDate() - 29)\n        return [start, end]\n      },\n    },\n    {\n      label: 'Last 90 days',\n      getRange: () => {\n        const end = new Date()\n        const start = new Date()\n        start.setDate(start.getDate() - 89)\n        return [start, end]\n      },\n    },\n    {\n      label: 'Year to date',\n      getRange: () => {\n        const end = new Date()\n        const start = new Date(end.getFullYear(), 0, 1)\n        return [start, end]\n      },\n    },\n  ]\n}\n\nexport class DateRangePicker {\n  public readonly el: HTMLElement\n\n  private readonly inputEl: HTMLInputElement\n  private readonly dropdownEl: HTMLElement\n  private readonly inputId: string\n  private readonly dropdownId: string\n  private leftCalendar: Calendar | null = null\n  private rightCalendar: Calendar | null = null\n  private config: DateRangePickerConfig\n  private startDate: Date | null\n  private endDate: Date | null\n  private pendingStart: Date | null = null\n  private pendingEnd: Date | null = null\n  private isOpen = false\n  private isDestroyed = false\n\n  private readonly handleDocumentClick: (e: MouseEvent) => void\n  private readonly handleInputKeydown: (e: KeyboardEvent) => void\n\n  constructor(config: DateRangePickerConfig) {\n    this.config = config\n    this.inputId = uniqueId('cmm-daterange')\n    this.dropdownId = uniqueId('cmm-daterange-dropdown')\n    this.startDate = config.startDate ?? null\n    this.endDate = config.endDate ?? null\n\n    this.el = document.createElement('div')\n    this.el.className = this.buildRootClass()\n\n    const inputWrap = document.createElement('div')\n    inputWrap.className = 'cmm-date-range__input-wrap'\n\n    this.inputEl = document.createElement('input')\n    this.inputEl.id = this.inputId\n    this.inputEl.type = 'text'\n    this.inputEl.className = 'cmm-date-range__input'\n    this.inputEl.readOnly = true\n    this.inputEl.placeholder = 'Select date range'\n\n    // Combobox ARIA pattern\n    this.inputEl.setAttribute('role', 'combobox')\n    this.inputEl.setAttribute('aria-haspopup', 'dialog')\n    this.inputEl.setAttribute('aria-expanded', 'false')\n    this.inputEl.setAttribute('aria-controls', this.dropdownId)\n    this.inputEl.setAttribute('aria-label', 'Date range')\n    this.updateInputDisplay()\n\n    this.inputEl.addEventListener('click', () => {\n      if (this.isDestroyed) return\n      if (this.isOpen) this.close()\n      else this.open()\n    })\n\n    const calIcon = document.createElement('button')\n    calIcon.type = 'button'\n    calIcon.className = 'cmm-date-range__toggle'\n    calIcon.setAttribute('aria-label', 'Open date range picker')\n    calIcon.innerHTML =\n      '<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><rect x=\"2\" y=\"3\" width=\"12\" height=\"11\" rx=\"1.5\" stroke=\"currentColor\" stroke-width=\"1.2\"/><path d=\"M2 6.5h12M5.5 2v2M10.5 2v2\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"/></svg>'\n    calIcon.addEventListener('click', e => {\n      e.stopPropagation()\n      if (this.isDestroyed) return\n      if (this.isOpen) this.close()\n      else this.open()\n    })\n\n    inputWrap.appendChild(this.inputEl)\n    inputWrap.appendChild(calIcon)\n    this.el.appendChild(inputWrap)\n\n    this.dropdownEl = document.createElement('div')\n    this.dropdownEl.id = this.dropdownId\n    this.dropdownEl.className = 'cmm-date-range__dropdown'\n    this.dropdownEl.setAttribute('role', 'dialog')\n    this.dropdownEl.setAttribute('aria-modal', 'false')\n    this.dropdownEl.setAttribute('aria-label', 'Choose date range')\n    this.dropdownEl.style.display = 'none'\n    this.el.appendChild(this.dropdownEl)\n\n    this.handleDocumentClick = (e: MouseEvent) => {\n      if (this.isDestroyed) return\n      const target = e.target as Node\n      if (!this.el.contains(target)) {\n        this.close()\n      }\n    }\n\n    this.handleInputKeydown = (e: KeyboardEvent) => {\n      if (this.isDestroyed) return\n      if (e.key === 'Escape' && this.isOpen) {\n        e.preventDefault()\n        this.close()\n      }\n    }\n\n    this.inputEl.addEventListener('keydown', this.handleInputKeydown)\n\n    const parent = resolveContainer(config.container)\n    parent.appendChild(this.el)\n  }\n\n  getRange(): { start: Date | null; end: Date | null } {\n    return { start: this.startDate, end: this.endDate }\n  }\n\n  setRange(start: Date | null, end: Date | null): void {\n    this.startDate = start\n    this.endDate = end\n    this.updateInputDisplay()\n    this.syncCalendars()\n  }\n\n  open(): void {\n    if (this.isOpen || this.isDestroyed) return\n    this.isOpen = true\n    this.pendingStart = this.startDate\n    this.pendingEnd = this.endDate\n    this.dropdownEl.style.display = ''\n    this.inputEl.setAttribute('aria-expanded', 'true')\n    this.buildDropdownContent()\n    this.positionDropdown()\n    document.addEventListener('click', this.handleDocumentClick)\n  }\n\n  close(): void {\n    if (!this.isOpen) return\n    this.isOpen = false\n    this.dropdownEl.style.display = 'none'\n    this.inputEl.setAttribute('aria-expanded', 'false')\n    document.removeEventListener('click', this.handleDocumentClick)\n  }\n\n  destroy(): void {\n    this.isDestroyed = true\n    this.close()\n    this.inputEl.removeEventListener('keydown', this.handleInputKeydown)\n    document.removeEventListener('click', this.handleDocumentClick)\n    this.leftCalendar?.destroy()\n    this.rightCalendar?.destroy()\n    this.el.remove()\n  }\n\n  private buildRootClass(): string {\n    const classes = ['cmm-date-range']\n    if (this.config.className) classes.push(this.config.className)\n    return classes.join(' ')\n  }\n\n  private buildDropdownContent(): void {\n    this.dropdownEl.innerHTML = ''\n    this.leftCalendar?.destroy()\n    this.rightCalendar?.destroy()\n    this.leftCalendar = null\n    this.rightCalendar = null\n\n    const body = document.createElement('div')\n    body.className = 'cmm-date-range__body'\n\n    // Presets sidebar\n    const presets = this.config.presets ?? defaultPresets()\n    const sidebar = document.createElement('div')\n    sidebar.className = 'cmm-date-range__presets'\n\n    for (const preset of presets) {\n      const btn = document.createElement('button')\n      btn.type = 'button'\n      btn.className = 'cmm-date-range__preset-btn'\n      btn.textContent = preset.label\n      btn.addEventListener('click', () => {\n        if (this.isDestroyed) return\n        const [start, end] = preset.getRange()\n        this.pendingStart = start\n        this.pendingEnd = end\n        this.syncCalendars()\n      })\n      sidebar.appendChild(btn)\n    }\n\n    body.appendChild(sidebar)\n\n    // Calendar container\n    const calendarsWrap = document.createElement('div')\n    calendarsWrap.className = 'cmm-date-range__calendars'\n\n    const leftContainer = document.createElement('div')\n    leftContainer.className = 'cmm-date-range__calendar-left'\n    calendarsWrap.appendChild(leftContainer)\n\n    const rightContainer = document.createElement('div')\n    rightContainer.className = 'cmm-date-range__calendar-right'\n    calendarsWrap.appendChild(rightContainer)\n\n    body.appendChild(calendarsWrap)\n    this.dropdownEl.appendChild(body)\n\n    // Create calendars\n    const now = this.pendingStart ?? new Date()\n    const leftYear = now.getFullYear()\n    const leftMonth = now.getMonth()\n    let rightYear = leftYear\n    let rightMonth = leftMonth + 1\n    if (rightMonth > 11) {\n      rightMonth = 0\n      rightYear += 1\n    }\n\n    this.leftCalendar = new Calendar({\n      container: leftContainer,\n      mode: 'range',\n      rangeStart: this.pendingStart,\n      rangeEnd: this.pendingEnd,\n      minDate: this.config.minDate,\n      maxDate: this.config.maxDate,\n      onRangeChange: (start, end) => {\n        this.pendingStart = start\n        this.pendingEnd = end\n        this.rightCalendar?.setRange(start, end)\n      },\n    })\n    this.leftCalendar.goToMonth(leftYear, leftMonth)\n\n    this.rightCalendar = new Calendar({\n      container: rightContainer,\n      mode: 'range',\n      rangeStart: this.pendingStart,\n      rangeEnd: this.pendingEnd,\n      minDate: this.config.minDate,\n      maxDate: this.config.maxDate,\n      onRangeChange: (start, end) => {\n        this.pendingStart = start\n        this.pendingEnd = end\n        this.leftCalendar?.setRange(start, end)\n      },\n    })\n    this.rightCalendar.goToMonth(rightYear, rightMonth)\n\n    // Footer with buttons\n    const footer = document.createElement('div')\n    footer.className = 'cmm-date-range__footer'\n\n    const cancelBtn = document.createElement('button')\n    cancelBtn.type = 'button'\n    cancelBtn.className = 'cmm-date-range__cancel-btn'\n    cancelBtn.textContent = 'Cancel'\n    cancelBtn.addEventListener('click', () => {\n      if (this.isDestroyed) return\n      this.close()\n    })\n\n    const applyBtn = document.createElement('button')\n    applyBtn.type = 'button'\n    applyBtn.className = 'cmm-date-range__apply-btn'\n    applyBtn.textContent = 'Apply'\n    applyBtn.addEventListener('click', () => {\n      if (this.isDestroyed) return\n      this.startDate = this.pendingStart\n      this.endDate = this.pendingEnd\n      this.updateInputDisplay()\n      this.config.onChange?.(this.startDate, this.endDate)\n\n      // Announce the selection to screen readers\n      if (this.startDate !== null && this.endDate !== null) {\n        const startStr = this.startDate.toLocaleDateString('en-US', {\n          month: 'short',\n          day: 'numeric',\n          year: 'numeric',\n        })\n        const endStr = this.endDate.toLocaleDateString('en-US', {\n          month: 'short',\n          day: 'numeric',\n          year: 'numeric',\n        })\n        announce(`Selected range from ${startStr} to ${endStr}`, 'polite')\n      }\n\n      this.close()\n    })\n\n    footer.appendChild(cancelBtn)\n    footer.appendChild(applyBtn)\n    this.dropdownEl.appendChild(footer)\n  }\n\n  private syncCalendars(): void {\n    this.leftCalendar?.setRange(this.pendingStart, this.pendingEnd)\n    this.rightCalendar?.setRange(this.pendingStart, this.pendingEnd)\n  }\n\n  private updateInputDisplay(): void {\n    const fmt = this.config.format ?? 'YYYY-MM-DD'\n    const loc = this.config.locale\n    if (this.startDate !== null && this.endDate !== null) {\n      this.inputEl.value = `${formatDate(this.startDate, fmt, loc)} \\u2014 ${formatDate(this.endDate, fmt, loc)}`\n    } else if (this.startDate !== null) {\n      this.inputEl.value = `${formatDate(this.startDate, fmt, loc)} \\u2014 ...`\n    } else {\n      this.inputEl.value = ''\n    }\n  }\n\n  private positionDropdown(): void {\n    const rect = this.el.getBoundingClientRect()\n    const spaceBelow = window.innerHeight - rect.bottom\n    if (spaceBelow < 400 && rect.top > spaceBelow) {\n      this.dropdownEl.classList.add('cmm-date-range__dropdown--above')\n      this.dropdownEl.classList.remove('cmm-date-range__dropdown--below')\n    } else {\n      this.dropdownEl.classList.add('cmm-date-range__dropdown--below')\n      this.dropdownEl.classList.remove('cmm-date-range__dropdown--above')\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/form/date-picker/time.d.ts

@@ -0,0 +1,41 @@
+import { TimePickerConfig } from './types';
+interface TimeValue {
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+export declare class TimePicker {
+    readonly el: HTMLElement;
+    private readonly timerId;
+    private config;
+    private hours;
+    private minutes;
+    private seconds;
+    private isPM;
+    private isDestroyed;
+    private hourCol;
+    private minuteCol;
+    private secondCol;
+    private periodCol;
+    private readonly handleKeydown;
+    constructor(config: TimePickerConfig);
+    getValue(): TimeValue;
+    setValue(time: {
+        hours: number;
+        minutes: number;
+        seconds?: number;
+    }): void;
+    destroy(): void;
+    private buildRootClass;
+    private buildColumns;
+    private buildColumn;
+    private buildSeparator;
+    private clearColumnSelection;
+    private updateColumnHighlights;
+    private selectValueInColumn;
+    private updatePeriodHighlight;
+    private emitChange;
+    private onKeydown;
+}
+export {};
+//# sourceMappingURL=time.d.ts.map

package/dist/form/date-picker/time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../../src/form/date-picker/time.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAI/C,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;CAChB;AAMD,qBAAa,UAAU;IACrB,SAAgB,EAAE,EAAE,WAAW,CAAA;IAE/B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAQ;IAChC,OAAO,CAAC,MAAM,CAAkB;IAChC,OAAO,CAAC,KAAK,CAAQ;IACrB,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,IAAI,CAAQ;IACpB,OAAO,CAAC,WAAW,CAAQ;IAE3B,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,SAAS,CAA2B;IAC5C,OAAO,CAAC,SAAS,CAA2B;IAE5C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA4B;gBAE9C,MAAM,EAAE,gBAAgB;IAiCpC,QAAQ,IAAI,SAAS;IASrB,QAAQ,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;IAe1E,OAAO,IAAI,IAAI;IAMf,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,YAAY;IAsEpB,OAAO,CAAC,WAAW;IAiDnB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,sBAAsB;IAW9B,OAAO,CAAC,mBAAmB;IAU3B,OAAO,CAAC,qBAAqB;IAgB7B,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,SAAS;CAkDlB"}

package/dist/form/date-picker/time.js

@@ -0,0 +1,146 @@
+import { t as e } from "../../a11y-B5pN4M_a.js";
+import { n as t, t as n } from "../../utils-Cn_W3h3f.js";
+//#region src/form/date-picker/time.ts
+function r(e) {
+	return String(e).padStart(2, "0");
+}
+var i = class {
+	el;
+	timerId;
+	config;
+	hours;
+	minutes;
+	seconds;
+	isPM = !1;
+	isDestroyed = !1;
+	hourCol;
+	minuteCol;
+	secondCol = null;
+	periodCol = null;
+	handleKeydown;
+	constructor(e) {
+		this.config = e, this.timerId = t("cmm-timepicker");
+		let r = e.value ?? {
+			hours: 0,
+			minutes: 0,
+			seconds: 0
+		};
+		this.hours = r.hours, this.minutes = r.minutes, this.seconds = r.seconds ?? 0, e.use24Hour !== !0 && (this.isPM = this.hours >= 12, this.hours > 12 && (this.hours -= 12), this.hours === 0 && (this.hours = 12)), this.el = document.createElement("div"), this.el.className = this.buildRootClass(), this.el.id = this.timerId, this.el.setAttribute("role", "group"), this.el.setAttribute("aria-label", "Time picker"), this.buildColumns(), this.handleKeydown = (e) => {
+			this.isDestroyed || this.onKeydown(e);
+		}, this.el.addEventListener("keydown", this.handleKeydown), n(e.container).appendChild(this.el);
+	}
+	getValue() {
+		let e = this.hours;
+		return this.config.use24Hour !== !0 && (this.isPM && e < 12 && (e += 12), !this.isPM && e === 12 && (e = 0)), {
+			hours: e,
+			minutes: this.minutes,
+			seconds: this.seconds
+		};
+	}
+	setValue(e) {
+		this.hours = e.hours, this.minutes = e.minutes, this.seconds = e.seconds ?? 0, this.config.use24Hour !== !0 && (this.isPM = this.hours >= 12, this.hours > 12 && (this.hours -= 12), this.hours === 0 && (this.hours = 12)), this.updateColumnHighlights(), this.emitChange();
+	}
+	destroy() {
+		this.isDestroyed = !0, this.el.removeEventListener("keydown", this.handleKeydown), this.el.remove();
+	}
+	buildRootClass() {
+		let e = ["cmm-time-picker"];
+		return this.config.className && e.push(this.config.className), e.join(" ");
+	}
+	buildColumns() {
+		let e = this.config.use24Hour === !0, t = e ? 23 : 12, n = e ? 0 : 1;
+		if (this.hourCol = this.buildColumn("Hours", n, t, this.hours, (e) => {
+			this.hours = e, this.emitChange();
+		}), this.el.appendChild(this.hourCol), this.el.appendChild(this.buildSeparator()), this.minuteCol = this.buildColumn("Minutes", 0, 59, this.minutes, (e) => {
+			this.minutes = e, this.emitChange();
+		}), this.el.appendChild(this.minuteCol), this.config.showSeconds !== !1 && (this.el.appendChild(this.buildSeparator()), this.secondCol = this.buildColumn("Seconds", 0, 59, this.seconds, (e) => {
+			this.seconds = e, this.emitChange();
+		}), this.el.appendChild(this.secondCol)), !e) {
+			this.periodCol = document.createElement("div"), this.periodCol.className = "cmm-time-picker__column cmm-time-picker__period", this.periodCol.setAttribute("role", "listbox"), this.periodCol.setAttribute("aria-label", "Period"), this.periodCol.tabIndex = 0;
+			for (let e of ["AM", "PM"]) {
+				let t = document.createElement("button");
+				t.type = "button", t.className = "cmm-time-picker__item", t.setAttribute("role", "option"), t.textContent = e, t.setAttribute("data-value", e), (e === "PM" ? this.isPM : !this.isPM) ? (t.classList.add("cmm-time-picker__item--selected"), t.setAttribute("aria-selected", "true")) : t.setAttribute("aria-selected", "false"), t.addEventListener("click", () => {
+					this.isDestroyed || (this.isPM = e === "PM", this.updatePeriodHighlight(), this.emitChange());
+				}), this.periodCol.appendChild(t);
+			}
+			this.el.appendChild(this.periodCol);
+		}
+	}
+	buildColumn(e, t, n, i, a) {
+		let o = document.createElement("div");
+		o.className = "cmm-time-picker__column", o.setAttribute("role", "listbox"), o.setAttribute("aria-label", e), o.tabIndex = 0;
+		for (let e = t; e <= n; e++) {
+			let t = document.createElement("button");
+			t.type = "button", t.className = "cmm-time-picker__item", t.setAttribute("role", "option"), t.textContent = r(e), t.setAttribute("data-value", String(e)), e === i ? (t.classList.add("cmm-time-picker__item--selected"), t.setAttribute("aria-selected", "true")) : t.setAttribute("aria-selected", "false"), t.addEventListener("click", () => {
+				this.isDestroyed || (this.clearColumnSelection(o), t.classList.add("cmm-time-picker__item--selected"), t.setAttribute("aria-selected", "true"), a(e), t.scrollIntoView({ block: "nearest" }));
+			}), o.appendChild(t);
+		}
+		return requestAnimationFrame(() => {
+			o.querySelector(".cmm-time-picker__item--selected")?.scrollIntoView({ block: "center" });
+		}), o;
+	}
+	buildSeparator() {
+		let e = document.createElement("span");
+		return e.className = "cmm-time-picker__separator", e.textContent = ":", e.setAttribute("aria-hidden", "true"), e;
+	}
+	clearColumnSelection(e) {
+		let t = e.querySelectorAll(".cmm-time-picker__item");
+		for (let e of t) e.classList.remove("cmm-time-picker__item--selected"), e.setAttribute("aria-selected", "false");
+	}
+	updateColumnHighlights() {
+		this.selectValueInColumn(this.hourCol, this.hours), this.selectValueInColumn(this.minuteCol, this.minutes), this.secondCol !== null && this.selectValueInColumn(this.secondCol, this.seconds), this.periodCol !== null && this.updatePeriodHighlight();
+	}
+	selectValueInColumn(e, t) {
+		this.clearColumnSelection(e);
+		let n = e.querySelector(`[data-value="${String(t)}"]`);
+		n !== null && (n.classList.add("cmm-time-picker__item--selected"), n.setAttribute("aria-selected", "true"), n.scrollIntoView({ block: "center" }));
+	}
+	updatePeriodHighlight() {
+		if (this.periodCol === null) return;
+		let e = this.periodCol.querySelectorAll(".cmm-time-picker__item");
+		for (let t of e) (t.getAttribute("data-value") === "PM" ? this.isPM : !this.isPM) ? (t.classList.add("cmm-time-picker__item--selected"), t.setAttribute("aria-selected", "true")) : (t.classList.remove("cmm-time-picker__item--selected"), t.setAttribute("aria-selected", "false"));
+	}
+	emitChange() {
+		let e = this.getValue();
+		this.config.onChange?.(e);
+	}
+	onKeydown(t) {
+		let n = t.target.closest(".cmm-time-picker__column");
+		if (n === null) return;
+		let r = Array.from(n.querySelectorAll(".cmm-time-picker__item")), i = r.findIndex((e) => e.classList.contains("cmm-time-picker__item--selected")), a = i, o = !0;
+		switch (t.key) {
+			case "ArrowUp":
+				a = i > 0 ? i - 1 : r.length - 1;
+				break;
+			case "ArrowDown":
+				a = i < r.length - 1 ? i + 1 : 0;
+				break;
+			case "PageUp":
+				a = Math.max(0, i - 5);
+				break;
+			case "PageDown":
+				a = Math.min(r.length - 1, i + 5);
+				break;
+			case "Home":
+				a = 0;
+				break;
+			case "End":
+				a = r.length - 1;
+				break;
+			default: o = !1;
+		}
+		if (o && a !== i) {
+			t.preventDefault();
+			let i = r[a];
+			if (i !== void 0) {
+				i.click();
+				let t = i.textContent;
+				e(`${n.getAttribute("aria-label") ?? "Value"}: ${t}`, "polite");
+			}
+		}
+	}
+};
+//#endregion
+export { i as TimePicker };
+
+//# sourceMappingURL=time.js.map

package/dist/form/date-picker/time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.js","names":[],"sources":["../../../src/form/date-picker/time.ts"],"sourcesContent":["/**\n * TimePicker - Scrollable hour/minute/second column picker\n * @countermeasure/web-components/form/date-picker\n */\n\nimport { type TimePickerConfig } from './types'\nimport { resolveContainer, uniqueId } from '../../primitives/utils'\nimport { announce } from '../../utils/a11y'\n\ninterface TimeValue {\n  hours: number\n  minutes: number\n  seconds: number\n}\n\nfunction padTwo(n: number): string {\n  return String(n).padStart(2, '0')\n}\n\nexport class TimePicker {\n  public readonly el: HTMLElement\n\n  private readonly timerId: string\n  private config: TimePickerConfig\n  private hours: number\n  private minutes: number\n  private seconds: number\n  private isPM = false\n  private isDestroyed = false\n\n  private hourCol!: HTMLElement\n  private minuteCol!: HTMLElement\n  private secondCol: HTMLElement | null = null\n  private periodCol: HTMLElement | null = null\n\n  private readonly handleKeydown: (e: KeyboardEvent) => void\n\n  constructor(config: TimePickerConfig) {\n    this.config = config\n    this.timerId = uniqueId('cmm-timepicker')\n\n    const val = config.value ?? { hours: 0, minutes: 0, seconds: 0 }\n    this.hours = val.hours\n    this.minutes = val.minutes\n    this.seconds = val.seconds ?? 0\n\n    if (config.use24Hour !== true) {\n      this.isPM = this.hours >= 12\n      if (this.hours > 12) this.hours -= 12\n      if (this.hours === 0) this.hours = 12\n    }\n\n    this.el = document.createElement('div')\n    this.el.className = this.buildRootClass()\n    this.el.id = this.timerId\n    this.el.setAttribute('role', 'group')\n    this.el.setAttribute('aria-label', 'Time picker')\n\n    this.buildColumns()\n\n    this.handleKeydown = (e: KeyboardEvent) => {\n      if (this.isDestroyed) return\n      this.onKeydown(e)\n    }\n    this.el.addEventListener('keydown', this.handleKeydown)\n\n    const parent = resolveContainer(config.container)\n    parent.appendChild(this.el)\n  }\n\n  getValue(): TimeValue {\n    let h = this.hours\n    if (this.config.use24Hour !== true) {\n      if (this.isPM && h < 12) h += 12\n      if (!this.isPM && h === 12) h = 0\n    }\n    return { hours: h, minutes: this.minutes, seconds: this.seconds }\n  }\n\n  setValue(time: { hours: number; minutes: number; seconds?: number }): void {\n    this.hours = time.hours\n    this.minutes = time.minutes\n    this.seconds = time.seconds ?? 0\n\n    if (this.config.use24Hour !== true) {\n      this.isPM = this.hours >= 12\n      if (this.hours > 12) this.hours -= 12\n      if (this.hours === 0) this.hours = 12\n    }\n\n    this.updateColumnHighlights()\n    this.emitChange()\n  }\n\n  destroy(): void {\n    this.isDestroyed = true\n    this.el.removeEventListener('keydown', this.handleKeydown)\n    this.el.remove()\n  }\n\n  private buildRootClass(): string {\n    const classes = ['cmm-time-picker']\n    if (this.config.className) classes.push(this.config.className)\n    return classes.join(' ')\n  }\n\n  private buildColumns(): void {\n    const use24 = this.config.use24Hour === true\n    const maxHour = use24 ? 23 : 12\n    const minHour = use24 ? 0 : 1\n\n    // Hours column\n    this.hourCol = this.buildColumn('Hours', minHour, maxHour, this.hours, val => {\n      this.hours = val\n      this.emitChange()\n    })\n    this.el.appendChild(this.hourCol)\n\n    // Separator\n    this.el.appendChild(this.buildSeparator())\n\n    // Minutes column\n    this.minuteCol = this.buildColumn('Minutes', 0, 59, this.minutes, val => {\n      this.minutes = val\n      this.emitChange()\n    })\n    this.el.appendChild(this.minuteCol)\n\n    // Seconds column\n    if (this.config.showSeconds !== false) {\n      this.el.appendChild(this.buildSeparator())\n      this.secondCol = this.buildColumn('Seconds', 0, 59, this.seconds, val => {\n        this.seconds = val\n        this.emitChange()\n      })\n      this.el.appendChild(this.secondCol)\n    }\n\n    // AM/PM column\n    if (!use24) {\n      this.periodCol = document.createElement('div')\n      this.periodCol.className = 'cmm-time-picker__column cmm-time-picker__period'\n      this.periodCol.setAttribute('role', 'listbox')\n      this.periodCol.setAttribute('aria-label', 'Period')\n      this.periodCol.tabIndex = 0\n\n      for (const label of ['AM', 'PM']) {\n        const item = document.createElement('button')\n        item.type = 'button'\n        item.className = 'cmm-time-picker__item'\n        item.setAttribute('role', 'option')\n        item.textContent = label\n        item.setAttribute('data-value', label)\n\n        const isActive = label === 'PM' ? this.isPM : !this.isPM\n        if (isActive) {\n          item.classList.add('cmm-time-picker__item--selected')\n          item.setAttribute('aria-selected', 'true')\n        } else {\n          item.setAttribute('aria-selected', 'false')\n        }\n\n        item.addEventListener('click', () => {\n          if (this.isDestroyed) return\n          this.isPM = label === 'PM'\n          this.updatePeriodHighlight()\n          this.emitChange()\n        })\n\n        this.periodCol.appendChild(item)\n      }\n\n      this.el.appendChild(this.periodCol)\n    }\n  }\n\n  private buildColumn(\n    label: string,\n    min: number,\n    max: number,\n    current: number,\n    onSelect: (val: number) => void\n  ): HTMLElement {\n    const col = document.createElement('div')\n    col.className = 'cmm-time-picker__column'\n    col.setAttribute('role', 'listbox')\n    col.setAttribute('aria-label', label)\n    col.tabIndex = 0\n\n    for (let i = min; i <= max; i++) {\n      const item = document.createElement('button')\n      item.type = 'button'\n      item.className = 'cmm-time-picker__item'\n      item.setAttribute('role', 'option')\n      item.textContent = padTwo(i)\n      item.setAttribute('data-value', String(i))\n\n      if (i === current) {\n        item.classList.add('cmm-time-picker__item--selected')\n        item.setAttribute('aria-selected', 'true')\n      } else {\n        item.setAttribute('aria-selected', 'false')\n      }\n\n      item.addEventListener('click', () => {\n        if (this.isDestroyed) return\n        this.clearColumnSelection(col)\n        item.classList.add('cmm-time-picker__item--selected')\n        item.setAttribute('aria-selected', 'true')\n        onSelect(i)\n        item.scrollIntoView({ block: 'nearest' })\n      })\n\n      col.appendChild(item)\n    }\n\n    // Scroll selected into view after mount\n    requestAnimationFrame(() => {\n      const selected = col.querySelector('.cmm-time-picker__item--selected')\n      selected?.scrollIntoView({ block: 'center' })\n    })\n\n    return col\n  }\n\n  private buildSeparator(): HTMLElement {\n    const sep = document.createElement('span')\n    sep.className = 'cmm-time-picker__separator'\n    sep.textContent = ':'\n    sep.setAttribute('aria-hidden', 'true')\n    return sep\n  }\n\n  private clearColumnSelection(col: HTMLElement): void {\n    const items = col.querySelectorAll('.cmm-time-picker__item')\n    for (const item of items) {\n      item.classList.remove('cmm-time-picker__item--selected')\n      item.setAttribute('aria-selected', 'false')\n    }\n  }\n\n  private updateColumnHighlights(): void {\n    this.selectValueInColumn(this.hourCol, this.hours)\n    this.selectValueInColumn(this.minuteCol, this.minutes)\n    if (this.secondCol !== null) {\n      this.selectValueInColumn(this.secondCol, this.seconds)\n    }\n    if (this.periodCol !== null) {\n      this.updatePeriodHighlight()\n    }\n  }\n\n  private selectValueInColumn(col: HTMLElement, value: number): void {\n    this.clearColumnSelection(col)\n    const item = col.querySelector<HTMLElement>(`[data-value=\"${String(value)}\"]`)\n    if (item !== null) {\n      item.classList.add('cmm-time-picker__item--selected')\n      item.setAttribute('aria-selected', 'true')\n      item.scrollIntoView({ block: 'center' })\n    }\n  }\n\n  private updatePeriodHighlight(): void {\n    if (this.periodCol === null) return\n    const items = this.periodCol.querySelectorAll<HTMLElement>('.cmm-time-picker__item')\n    for (const item of items) {\n      const val = item.getAttribute('data-value')\n      const isActive = val === 'PM' ? this.isPM : !this.isPM\n      if (isActive) {\n        item.classList.add('cmm-time-picker__item--selected')\n        item.setAttribute('aria-selected', 'true')\n      } else {\n        item.classList.remove('cmm-time-picker__item--selected')\n        item.setAttribute('aria-selected', 'false')\n      }\n    }\n  }\n\n  private emitChange(): void {\n    const val = this.getValue()\n    this.config.onChange?.(val)\n  }\n\n  private onKeydown(e: KeyboardEvent): void {\n    const col = (e.target as HTMLElement).closest<HTMLElement>('.cmm-time-picker__column')\n    if (col === null) return\n\n    const items = Array.from(col.querySelectorAll<HTMLElement>('.cmm-time-picker__item'))\n    const currentIdx = items.findIndex(item =>\n      item.classList.contains('cmm-time-picker__item--selected')\n    )\n\n    let nextIdx = currentIdx\n    let handled = true\n\n    switch (e.key) {\n      case 'ArrowUp':\n        nextIdx = currentIdx > 0 ? currentIdx - 1 : items.length - 1\n        break\n      case 'ArrowDown':\n        nextIdx = currentIdx < items.length - 1 ? currentIdx + 1 : 0\n        break\n      case 'PageUp':\n        // Jump by 5 items (like hours or 5 minutes at a time)\n        nextIdx = Math.max(0, currentIdx - 5)\n        break\n      case 'PageDown':\n        // Jump by 5 items\n        nextIdx = Math.min(items.length - 1, currentIdx + 5)\n        break\n      case 'Home':\n        nextIdx = 0\n        break\n      case 'End':\n        nextIdx = items.length - 1\n        break\n      default:\n        handled = false\n    }\n\n    if (handled && nextIdx !== currentIdx) {\n      e.preventDefault()\n      const item = items[nextIdx]\n      if (item !== undefined) {\n        item.click()\n\n        // Announce the selected value\n        const value = item.textContent\n        const label = col.getAttribute('aria-label')\n        announce(`${label ?? 'Value'}: ${value}`, 'polite')\n      }\n    }\n  }\n}\n"],"mappings":";;;AAeA,SAAS,EAAO,GAAmB;AACjC,QAAO,OAAO,EAAE,CAAC,SAAS,GAAG,IAAI;;AAGnC,IAAa,IAAb,MAAwB;CACtB;CAEA;CACA;CACA;CACA;CACA;CACA,OAAe;CACf,cAAsB;CAEtB;CACA;CACA,YAAwC;CACxC,YAAwC;CAExC;CAEA,YAAY,GAA0B;AAEpC,EADA,KAAK,SAAS,GACd,KAAK,UAAU,EAAS,iBAAiB;EAEzC,IAAM,IAAM,EAAO,SAAS;GAAE,OAAO;GAAG,SAAS;GAAG,SAAS;GAAG;AAyBjD,EAxBf,KAAK,QAAQ,EAAI,OACjB,KAAK,UAAU,EAAI,SACnB,KAAK,UAAU,EAAI,WAAW,GAE1B,EAAO,cAAc,OACvB,KAAK,OAAO,KAAK,SAAS,IACtB,KAAK,QAAQ,OAAI,KAAK,SAAS,KAC/B,KAAK,UAAU,MAAG,KAAK,QAAQ,MAGrC,KAAK,KAAK,SAAS,cAAc,MAAM,EACvC,KAAK,GAAG,YAAY,KAAK,gBAAgB,EACzC,KAAK,GAAG,KAAK,KAAK,SAClB,KAAK,GAAG,aAAa,QAAQ,QAAQ,EACrC,KAAK,GAAG,aAAa,cAAc,cAAc,EAEjD,KAAK,cAAc,EAEnB,KAAK,iBAAiB,MAAqB;AACrC,QAAK,eACT,KAAK,UAAU,EAAE;KAEnB,KAAK,GAAG,iBAAiB,WAAW,KAAK,cAAc,EAExC,EAAiB,EAAO,UAAU,CAC1C,YAAY,KAAK,GAAG;;CAG7B,WAAsB;EACpB,IAAI,IAAI,KAAK;AAKb,SAJI,KAAK,OAAO,cAAc,OACxB,KAAK,QAAQ,IAAI,OAAI,KAAK,KAC1B,CAAC,KAAK,QAAQ,MAAM,OAAI,IAAI,KAE3B;GAAE,OAAO;GAAG,SAAS,KAAK;GAAS,SAAS,KAAK;GAAS;;CAGnE,SAAS,GAAkE;AAYzE,EAXA,KAAK,QAAQ,EAAK,OAClB,KAAK,UAAU,EAAK,SACpB,KAAK,UAAU,EAAK,WAAW,GAE3B,KAAK,OAAO,cAAc,OAC5B,KAAK,OAAO,KAAK,SAAS,IACtB,KAAK,QAAQ,OAAI,KAAK,SAAS,KAC/B,KAAK,UAAU,MAAG,KAAK,QAAQ,MAGrC,KAAK,wBAAwB,EAC7B,KAAK,YAAY;;CAGnB,UAAgB;AAGd,EAFA,KAAK,cAAc,IACnB,KAAK,GAAG,oBAAoB,WAAW,KAAK,cAAc,EAC1D,KAAK,GAAG,QAAQ;;CAGlB,iBAAiC;EAC/B,IAAM,IAAU,CAAC,kBAAkB;AAEnC,SADI,KAAK,OAAO,aAAW,EAAQ,KAAK,KAAK,OAAO,UAAU,EACvD,EAAQ,KAAK,IAAI;;CAG1B,eAA6B;EAC3B,IAAM,IAAQ,KAAK,OAAO,cAAc,IAClC,IAAU,IAAQ,KAAK,IACvB,IAAU,IAAQ,IAAI;AA8B5B,MA3BA,KAAK,UAAU,KAAK,YAAY,SAAS,GAAS,GAAS,KAAK,QAAO,MAAO;AAE5E,GADA,KAAK,QAAQ,GACb,KAAK,YAAY;IACjB,EACF,KAAK,GAAG,YAAY,KAAK,QAAQ,EAGjC,KAAK,GAAG,YAAY,KAAK,gBAAgB,CAAC,EAG1C,KAAK,YAAY,KAAK,YAAY,WAAW,GAAG,IAAI,KAAK,UAAS,MAAO;AAEvE,GADA,KAAK,UAAU,GACf,KAAK,YAAY;IACjB,EACF,KAAK,GAAG,YAAY,KAAK,UAAU,EAG/B,KAAK,OAAO,gBAAgB,OAC9B,KAAK,GAAG,YAAY,KAAK,gBAAgB,CAAC,EAC1C,KAAK,YAAY,KAAK,YAAY,WAAW,GAAG,IAAI,KAAK,UAAS,MAAO;AAEvE,GADA,KAAK,UAAU,GACf,KAAK,YAAY;IACjB,EACF,KAAK,GAAG,YAAY,KAAK,UAAU,GAIjC,CAAC,GAAO;AAKV,GAJA,KAAK,YAAY,SAAS,cAAc,MAAM,EAC9C,KAAK,UAAU,YAAY,mDAC3B,KAAK,UAAU,aAAa,QAAQ,UAAU,EAC9C,KAAK,UAAU,aAAa,cAAc,SAAS,EACnD,KAAK,UAAU,WAAW;AAE1B,QAAK,IAAM,KAAS,CAAC,MAAM,KAAK,EAAE;IAChC,IAAM,IAAO,SAAS,cAAc,SAAS;AAsB7C,IArBA,EAAK,OAAO,UACZ,EAAK,YAAY,yBACjB,EAAK,aAAa,QAAQ,SAAS,EACnC,EAAK,cAAc,GACnB,EAAK,aAAa,cAAc,EAAM,GAErB,MAAU,OAAO,KAAK,OAAO,CAAC,KAAK,SAElD,EAAK,UAAU,IAAI,kCAAkC,EACrD,EAAK,aAAa,iBAAiB,OAAO,IAE1C,EAAK,aAAa,iBAAiB,QAAQ,EAG7C,EAAK,iBAAiB,eAAe;AAC/B,UAAK,gBACT,KAAK,OAAO,MAAU,MACtB,KAAK,uBAAuB,EAC5B,KAAK,YAAY;MACjB,EAEF,KAAK,UAAU,YAAY,EAAK;;AAGlC,QAAK,GAAG,YAAY,KAAK,UAAU;;;CAIvC,YACE,GACA,GACA,GACA,GACA,GACa;EACb,IAAM,IAAM,SAAS,cAAc,MAAM;AAIzC,EAHA,EAAI,YAAY,2BAChB,EAAI,aAAa,QAAQ,UAAU,EACnC,EAAI,aAAa,cAAc,EAAM,EACrC,EAAI,WAAW;AAEf,OAAK,IAAI,IAAI,GAAK,KAAK,GAAK,KAAK;GAC/B,IAAM,IAAO,SAAS,cAAc,SAAS;AAuB7C,GAtBA,EAAK,OAAO,UACZ,EAAK,YAAY,yBACjB,EAAK,aAAa,QAAQ,SAAS,EACnC,EAAK,cAAc,EAAO,EAAE,EAC5B,EAAK,aAAa,cAAc,OAAO,EAAE,CAAC,EAEtC,MAAM,KACR,EAAK,UAAU,IAAI,kCAAkC,EACrD,EAAK,aAAa,iBAAiB,OAAO,IAE1C,EAAK,aAAa,iBAAiB,QAAQ,EAG7C,EAAK,iBAAiB,eAAe;AAC/B,SAAK,gBACT,KAAK,qBAAqB,EAAI,EAC9B,EAAK,UAAU,IAAI,kCAAkC,EACrD,EAAK,aAAa,iBAAiB,OAAO,EAC1C,EAAS,EAAE,EACX,EAAK,eAAe,EAAE,OAAO,WAAW,CAAC;KACzC,EAEF,EAAI,YAAY,EAAK;;AASvB,SALA,4BAA4B;AACT,KAAI,cAAc,mCAAmC,EAC5D,eAAe,EAAE,OAAO,UAAU,CAAC;IAC7C,EAEK;;CAGT,iBAAsC;EACpC,IAAM,IAAM,SAAS,cAAc,OAAO;AAI1C,SAHA,EAAI,YAAY,8BAChB,EAAI,cAAc,KAClB,EAAI,aAAa,eAAe,OAAO,EAChC;;CAGT,qBAA6B,GAAwB;EACnD,IAAM,IAAQ,EAAI,iBAAiB,yBAAyB;AAC5D,OAAK,IAAM,KAAQ,EAEjB,CADA,EAAK,UAAU,OAAO,kCAAkC,EACxD,EAAK,aAAa,iBAAiB,QAAQ;;CAI/C,yBAAuC;AAMrC,EALA,KAAK,oBAAoB,KAAK,SAAS,KAAK,MAAM,EAClD,KAAK,oBAAoB,KAAK,WAAW,KAAK,QAAQ,EAClD,KAAK,cAAc,QACrB,KAAK,oBAAoB,KAAK,WAAW,KAAK,QAAQ,EAEpD,KAAK,cAAc,QACrB,KAAK,uBAAuB;;CAIhC,oBAA4B,GAAkB,GAAqB;AACjE,OAAK,qBAAqB,EAAI;EAC9B,IAAM,IAAO,EAAI,cAA2B,gBAAgB,OAAO,EAAM,CAAC,IAAI;AAC9E,EAAI,MAAS,SACX,EAAK,UAAU,IAAI,kCAAkC,EACrD,EAAK,aAAa,iBAAiB,OAAO,EAC1C,EAAK,eAAe,EAAE,OAAO,UAAU,CAAC;;CAI5C,wBAAsC;AACpC,MAAI,KAAK,cAAc,KAAM;EAC7B,IAAM,IAAQ,KAAK,UAAU,iBAA8B,yBAAyB;AACpF,OAAK,IAAM,KAAQ,EAGjB,EAFY,EAAK,aAAa,aAAa,KAClB,OAAO,KAAK,OAAO,CAAC,KAAK,SAEhD,EAAK,UAAU,IAAI,kCAAkC,EACrD,EAAK,aAAa,iBAAiB,OAAO,KAE1C,EAAK,UAAU,OAAO,kCAAkC,EACxD,EAAK,aAAa,iBAAiB,QAAQ;;CAKjD,aAA2B;EACzB,IAAM,IAAM,KAAK,UAAU;AAC3B,OAAK,OAAO,WAAW,EAAI;;CAG7B,UAAkB,GAAwB;EACxC,IAAM,IAAO,EAAE,OAAuB,QAAqB,2BAA2B;AACtF,MAAI,MAAQ,KAAM;EAElB,IAAM,IAAQ,MAAM,KAAK,EAAI,iBAA8B,yBAAyB,CAAC,EAC/E,IAAa,EAAM,WAAU,MACjC,EAAK,UAAU,SAAS,kCAAkC,CAC3D,EAEG,IAAU,GACV,IAAU;AAEd,UAAQ,EAAE,KAAV;GACE,KAAK;AACH,QAAU,IAAa,IAAI,IAAa,IAAI,EAAM,SAAS;AAC3D;GACF,KAAK;AACH,QAAU,IAAa,EAAM,SAAS,IAAI,IAAa,IAAI;AAC3D;GACF,KAAK;AAEH,QAAU,KAAK,IAAI,GAAG,IAAa,EAAE;AACrC;GACF,KAAK;AAEH,QAAU,KAAK,IAAI,EAAM,SAAS,GAAG,IAAa,EAAE;AACpD;GACF,KAAK;AACH,QAAU;AACV;GACF,KAAK;AACH,QAAU,EAAM,SAAS;AACzB;GACF,QACE,KAAU;;AAGd,MAAI,KAAW,MAAY,GAAY;AACrC,KAAE,gBAAgB;GAClB,IAAM,IAAO,EAAM;AACnB,OAAI,MAAS,KAAA,GAAW;AACtB,MAAK,OAAO;IAGZ,IAAM,IAAQ,EAAK;AAEnB,MAAS,GADK,EAAI,aAAa,aAAa,IACvB,QAAQ,IAAI,KAAS,SAAS"}

package/dist/form/date-picker/types.d.ts

@@ -0,0 +1,52 @@
+/**
+ * DatePicker family type definitions
+ * @countermeasure/web-components/form/date-picker
+ */
+export interface DatePickerConfig {
+    container: HTMLElement | string;
+    value?: Date | null;
+    format?: string;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[] | ((date: Date) => boolean);
+    weekStart?: 0 | 1;
+    /** Locale for date formatting (defaults to navigator.language) */
+    locale?: string;
+    className?: string;
+    onChange?: (date: Date | null) => void;
+}
+export interface DateRangePreset {
+    label: string;
+    getRange: () => [Date, Date];
+}
+export interface DateRangePickerConfig {
+    container: HTMLElement | string;
+    startDate?: Date | null;
+    endDate?: Date | null;
+    format?: string;
+    presets?: DateRangePreset[];
+    minDate?: Date;
+    maxDate?: Date;
+    /** Locale for date formatting (defaults to navigator.language) */
+    locale?: string;
+    className?: string;
+    onChange?: (start: Date | null, end: Date | null) => void;
+}
+export interface TimePickerConfig {
+    container: HTMLElement | string;
+    value?: {
+        hours: number;
+        minutes: number;
+        seconds?: number;
+    };
+    use24Hour?: boolean;
+    showSeconds?: boolean;
+    className?: string;
+    onChange?: (time: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    }) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/form/date-picker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/form/date-picker/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,aAAa,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAA;IAClD,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACjB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;CACvC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;CAC7B;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,eAAe,EAAE,CAAA;IAC3B,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;CAC1D;AAED,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,KAAK,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CAC/E"}

package/dist/form/direction/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Direction - RTL/LTR direction wrapper utility
+ * @countermeasure/web-components/form/direction
+ */
+export type DirectionValue = 'ltr' | 'rtl' | 'auto';
+export interface DirectionConfig {
+    container: HTMLElement | string;
+    direction?: DirectionValue;
+    onChange?: (direction: string) => void;
+}
+export declare class Direction {
+    private readonly container;
+    private readonly config;
+    private observer;
+    constructor(config: DirectionConfig);
+    /** Set the direction on the container */
+    setDirection(dir: DirectionValue): void;
+    /** Get the current computed direction */
+    getDirection(): string;
+    /** Clean up the mutation observer */
+    destroy(): void;
+    /** Observe changes to dir attribute on html or body elements */
+    private observeRootChanges;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/form/direction/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/form/direction/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAA;AAEnD,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC;AAED,qBAAa,SAAS;IACpB,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAa;IACvC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAiB;IACxC,OAAO,CAAC,QAAQ,CAAgC;gBAEpC,MAAM,EAAE,eAAe;IAWnC,yCAAyC;IACzC,YAAY,CAAC,GAAG,EAAE,cAAc,GAAG,IAAI;IAKvC,yCAAyC;IACzC,YAAY,IAAI,MAAM;IAItB,qCAAqC;IACrC,OAAO,IAAI,IAAI;IAOf,gEAAgE;IAChE,OAAO,CAAC,kBAAkB;CAY3B"}

package/dist/form/direction/index.js

@@ -0,0 +1,36 @@
+import { t as e } from "../../utils-Cn_W3h3f.js";
+//#region src/form/direction/index.ts
+var t = class {
+	container;
+	config;
+	observer = null;
+	constructor(t) {
+		this.container = e(t.container), this.config = t, t.direction !== void 0 && this.container.setAttribute("dir", t.direction), this.observeRootChanges();
+	}
+	setDirection(e) {
+		this.container.setAttribute("dir", e), this.config.onChange?.(e);
+	}
+	getDirection() {
+		return this.container.getAttribute("dir") ?? getComputedStyle(this.container).direction;
+	}
+	destroy() {
+		this.observer !== null && (this.observer.disconnect(), this.observer = null);
+	}
+	observeRootChanges() {
+		let e = document.documentElement, t = document.body;
+		this.observer = new MutationObserver(() => {
+			let e = this.getDirection();
+			this.config.onChange?.(e);
+		}), this.observer.observe(e, {
+			attributes: !0,
+			attributeFilter: ["dir"]
+		}), this.observer.observe(t, {
+			attributes: !0,
+			attributeFilter: ["dir"]
+		});
+	}
+};
+//#endregion
+export { t as Direction };
+
+//# sourceMappingURL=index.js.map

package/dist/form/direction/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/form/direction/index.ts"],"sourcesContent":["/**\n * Direction - RTL/LTR direction wrapper utility\n * @countermeasure/web-components/form/direction\n */\n\nimport { resolveContainer } from '../../primitives/utils'\n\nexport type DirectionValue = 'ltr' | 'rtl' | 'auto'\n\nexport interface DirectionConfig {\n  container: HTMLElement | string\n  direction?: DirectionValue\n  onChange?: (direction: string) => void\n}\n\nexport class Direction {\n  private readonly container: HTMLElement\n  private readonly config: DirectionConfig\n  private observer: MutationObserver | null = null\n\n  constructor(config: DirectionConfig) {\n    this.container = resolveContainer(config.container)\n    this.config = config\n\n    if (config.direction !== undefined) {\n      this.container.setAttribute('dir', config.direction)\n    }\n\n    this.observeRootChanges()\n  }\n\n  /** Set the direction on the container */\n  setDirection(dir: DirectionValue): void {\n    this.container.setAttribute('dir', dir)\n    this.config.onChange?.(dir)\n  }\n\n  /** Get the current computed direction */\n  getDirection(): string {\n    return this.container.getAttribute('dir') ?? getComputedStyle(this.container).direction\n  }\n\n  /** Clean up the mutation observer */\n  destroy(): void {\n    if (this.observer !== null) {\n      this.observer.disconnect()\n      this.observer = null\n    }\n  }\n\n  /** Observe changes to dir attribute on html or body elements */\n  private observeRootChanges(): void {\n    const htmlEl = document.documentElement\n    const bodyEl = document.body\n\n    this.observer = new MutationObserver(() => {\n      const resolved = this.getDirection()\n      this.config.onChange?.(resolved)\n    })\n\n    this.observer.observe(htmlEl, { attributes: true, attributeFilter: ['dir'] })\n    this.observer.observe(bodyEl, { attributes: true, attributeFilter: ['dir'] })\n  }\n}\n"],"mappings":";;AAeA,IAAa,IAAb,MAAuB;CACrB;CACA;CACA,WAA4C;CAE5C,YAAY,GAAyB;AAQnC,EAPA,KAAK,YAAY,EAAiB,EAAO,UAAU,EACnD,KAAK,SAAS,GAEV,EAAO,cAAc,KAAA,KACvB,KAAK,UAAU,aAAa,OAAO,EAAO,UAAU,EAGtD,KAAK,oBAAoB;;CAI3B,aAAa,GAA2B;AAEtC,EADA,KAAK,UAAU,aAAa,OAAO,EAAI,EACvC,KAAK,OAAO,WAAW,EAAI;;CAI7B,eAAuB;AACrB,SAAO,KAAK,UAAU,aAAa,MAAM,IAAI,iBAAiB,KAAK,UAAU,CAAC;;CAIhF,UAAgB;AACd,EAAI,KAAK,aAAa,SACpB,KAAK,SAAS,YAAY,EAC1B,KAAK,WAAW;;CAKpB,qBAAmC;EACjC,IAAM,IAAS,SAAS,iBAClB,IAAS,SAAS;AAQxB,EANA,KAAK,WAAW,IAAI,uBAAuB;GACzC,IAAM,IAAW,KAAK,cAAc;AACpC,QAAK,OAAO,WAAW,EAAS;IAChC,EAEF,KAAK,SAAS,QAAQ,GAAQ;GAAE,YAAY;GAAM,iBAAiB,CAAC,MAAM;GAAE,CAAC,EAC7E,KAAK,SAAS,QAAQ,GAAQ;GAAE,YAAY;GAAM,iBAAiB,CAAC,MAAM;GAAE,CAAC"}

package/dist/form/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Form - Form component library
+ * @countermeasure/web-components/form
+ */
+export { Calendar } from './calendar/index';
+export type { CalendarConfig, WeekStart } from './calendar/types';
+export { DatePicker } from './date-picker/index';
+export { DateRangePicker } from './date-picker/range';
+export { TimePicker } from './date-picker/time';
+export type { DatePickerConfig, DateRangePickerConfig, DateRangePreset, TimePickerConfig, } from './date-picker/types';
+export { TagInput } from './tag-input/index';
+export type { TagInputConfig, TagSuggestion } from './tag-input/types';
+export { ColorPicker } from './color-picker/index';
+export type { ColorPickerConfig } from './color-picker/types';
+export { CronEditor, cronToHuman, formatCron, getNextRuns, isValidCron, parseCron, } from './cron-editor/index';
+export type { CronConfig, CronField, CronFieldConfig, CronFieldMode, ParsedCron, } from './cron-editor/types';
+export { Direction } from './direction/index';
+export type { DirectionConfig, DirectionValue } from './direction/index';
+//# sourceMappingURL=index.d.ts.map

package/dist/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC3C,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAGjE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAC/C,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,eAAe,EACf,gBAAgB,GACjB,MAAM,qBAAqB,CAAA;AAG5B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAGtE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAG7D,OAAO,EACL,UAAU,EACV,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,GACV,MAAM,qBAAqB,CAAA;AAC5B,YAAY,EACV,UAAU,EACV,SAAS,EACT,eAAe,EACf,aAAa,EACb,UAAU,GACX,MAAM,qBAAqB,CAAA;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAC7C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/form/index.js

@@ -0,0 +1,10 @@
+import { Calendar as e } from "./calendar/index.js";
+import { DateRangePicker as t } from "./date-picker/range.js";
+import { TimePicker as n } from "./date-picker/time.js";
+import { DatePicker as r } from "./date-picker/index.js";
+import { TagInput as i } from "./tag-input/index.js";
+import { ColorPicker as a } from "./color-picker/index.js";
+import { cronToHuman as o, formatCron as s, getNextRuns as c, isValidCron as l, parseCron as u } from "./cron-editor/parser.js";
+import { CronEditor as d } from "./cron-editor/index.js";
+import { Direction as f } from "./direction/index.js";
+export { e as Calendar, a as ColorPicker, d as CronEditor, r as DatePicker, t as DateRangePicker, f as Direction, i as TagInput, n as TimePicker, o as cronToHuman, s as formatCron, c as getNextRuns, l as isValidCron, u as parseCron };