@spinjs/components 0.0.0-stage → 0.1.0-preview.1

package/dist/date-picker/date-picker.state.js

@@ -0,0 +1,177 @@
+import { defaultTwin, isRecord } from "@spinjs/runtime";
+// src/date-picker/date-picker.state.ts
+const MONTH_LENGTHS = [
+	31,
+	28,
+	31,
+	30,
+	31,
+	30,
+	31,
+	31,
+	30,
+	31,
+	30,
+	31
+];
+function isLeapYear(year) {
+	return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+}
+function daysInMonth(year, month) {
+	if (month < 1 || month > 12) return 31;
+	if (month !== 2) return MONTH_LENGTHS[month - 1] ?? 31;
+	return isLeapYear(year) ? 29 : 28;
+}
+const dayOf = (value) => Date.parse(`${iso(value)}T00:00:00Z`);
+const iso = (value) => `${`${value.year}`.padStart(4, "0")}-${`${value.month}`.padStart(2, "0")}-${`${value.day}`.padStart(2, "0")}`;
+function sortKey(value) {
+	const time = dayOf(value);
+	return Number.isNaN(time) ? Number.NEGATIVE_INFINITY : time;
+}
+function parseDay(raw) {
+	if (typeof raw !== "string" || raw.length === 0) return null;
+	const time = Date.parse(`${raw}T00:00:00Z`);
+	if (Number.isNaN(time)) return null;
+	const at = new Date(time);
+	return {
+		year: at.getUTCFullYear(),
+		month: at.getUTCMonth() + 1,
+		day: at.getUTCDate()
+	};
+}
+function dayRecord(raw) {
+	if (typeof raw === "string") return parseDay(raw);
+	if (!isRecord(raw)) return null;
+	const year = raw["year"];
+	const month = raw["month"];
+	const day = raw["day"];
+	if (typeof year !== "number" || !Number.isFinite(year) || typeof month !== "number" || !Number.isFinite(month) || typeof day !== "number" || !Number.isFinite(day)) return null;
+	return {
+		year,
+		month,
+		day
+	};
+}
+function parseDays(raw) {
+	if (typeof raw !== "string" || raw.length === 0) return [];
+	if (raw.startsWith("[")) try {
+		const parsed = JSON.parse(raw);
+		if (!Array.isArray(parsed)) return [];
+		const days = [];
+		for (const entry of parsed) {
+			const day = parseDay(entry);
+			if (day !== null) days.push(day);
+		}
+		return days;
+	} catch {
+		return [];
+	}
+	const day = parseDay(raw);
+	return day === null ? [] : [day];
+}
+function daysOf(raw) {
+	if (!Array.isArray(raw)) return parseDays(raw);
+	const days = [];
+	for (const entry of raw) {
+		const day = dayRecord(entry);
+		if (day !== null) days.push(day);
+	}
+	return days;
+}
+function viewOf(raw) {
+	return raw === "month" || raw === "year" ? raw : "day";
+}
+function initial(args = {}, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const mode = args.selectionMode;
+	const count = args.numOfMonths;
+	const text = (value) => typeof value === "string" && value.length > 0 ? value : null;
+	const min = written("min") ? text(args.min) : null;
+	const max = written("max") ? text(args.max) : null;
+	const parsed = written("value") ? daysOf(args.value) : [];
+	const value = normalizeDays(parsed, min, max);
+	const now = /* @__PURE__ */ new Date();
+	const today = {
+		year: now.getUTCFullYear(),
+		month: now.getUTCMonth() + 1,
+		day: now.getUTCDate()
+	};
+	const focused = (written("focusedValue") ? dayRecord(args.focusedValue) : null) ?? parsed[0] ?? today;
+	const startOfWeek = typeof args.startOfWeek === "number" && args.startOfWeek >= 0 && args.startOfWeek <= 6 ? Math.trunc(args.startOfWeek) : 0;
+	return {
+		value,
+		focusedValue: clampDay(focused, min, max),
+		hoveredValue: null,
+		activeIndex: 0,
+		view: written("view") ? viewOf(args.view) : "day",
+		selectionMode: written("selectionMode") && (mode === "multiple" || mode === "range") ? mode : "single",
+		numOfMonths: written("numOfMonths") && typeof count === "number" && Number.isFinite(count) ? count : 1,
+		startValue: value.length > 0 ? value[0] ?? null : null,
+		min,
+		max,
+		closeOnSelect: written("closeOnSelect") ? args.closeOnSelect !== false : true,
+		disabled: args.disabled === true,
+		readOnly: args.readOnly === true,
+		invalid: args.invalid === true,
+		startOfWeek,
+		dir: args.dir === "rtl" ? "rtl" : "ltr",
+		label: typeof args.label === "string" && args.label.length > 0 ? args.label : "Date",
+		locale: typeof args.locale === "string" && args.locale.length > 0 ? args.locale : "en-US",
+		placeholder: typeof args.placeholder === "string" && args.placeholder.length > 0 ? args.placeholder : "Pick a date",
+		format: typeof args.format === "function" ? args.format : void 0
+	};
+}
+function dayAsString(value) {
+	return iso(value);
+}
+function valueAsAllStrings(value) {
+	return value.map(dayAsString);
+}
+const sameDay = (a, b) => iso(a) === iso(b);
+function clampDay(value, min, max) {
+	const day = Math.min(Math.max(value.day, 1), daysInMonth(value.year, value.month));
+	let at = {
+		...value,
+		day
+	};
+	const time = dayOf(at);
+	const floor = boundDay(min);
+	const ceiling = boundDay(max);
+	if (floor !== null && time < floor) at = fromDayIndex(floor);
+	if (ceiling !== null && time > ceiling) at = fromDayIndex(ceiling);
+	return at;
+}
+function boundDay(bound) {
+	if (bound === null || bound.length === 0) return null;
+	const time = Date.parse(`${bound}T00:00:00Z`);
+	return Number.isNaN(time) ? null : time;
+}
+function fromDayIndex(time) {
+	const at = new Date(time);
+	return {
+		year: at.getUTCFullYear(),
+		month: at.getUTCMonth() + 1,
+		day: at.getUTCDate()
+	};
+}
+const inBounds = (value, min, max) => {
+	const time = dayOf(value);
+	const floor = boundDay(min);
+	const ceiling = boundDay(max);
+	return (floor === null || time >= floor) && (ceiling === null || time <= ceiling);
+};
+function normalizeDays(days, min, max) {
+	const seen = /* @__PURE__ */ new Set();
+	const out = [];
+	for (const day of days) {
+		const at = clampDay(day, min, max);
+		if (!inBounds(at, min, max)) continue;
+		if (seen.has(iso(at))) continue;
+		seen.add(iso(at));
+		out.push(at);
+	}
+	return out.sort((a, b) => sortKey(a) - sortKey(b));
+}
+export { clampDay, dayAsString, dayRecord, daysInMonth, daysOf, inBounds, initial, isLeapYear, normalizeDays, parseDay, parseDays, sameDay, sortKey, valueAsAllStrings, viewOf };
+
+//# sourceMappingURL=date-picker.state.js.map

package/dist/date-picker/date-picker.transitions.d.ts

@@ -0,0 +1,23 @@
+import { DatePickerContext } from "./date-picker.state.js";
+import { DatePickerEvents } from "./date-picker.events.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+type DatePickerAssign<K extends keyof DatePickerEvents = keyof DatePickerEvents> = AssignFor<DatePickerContext, DatePickerEvents, K>;
+export declare const resetView: DatePickerAssign<"OPEN">;
+export declare const drillIntoView: DatePickerAssign<"CELL.CLICK" | "TABLE.ENTER">;
+export declare const selectSingleDay: DatePickerAssign<"CELL.CLICK" | "TABLE.ENTER">;
+export declare const toggleMultiDay: DatePickerAssign<"CELL.CLICK" | "TABLE.ENTER">;
+export declare const selectRangeDay: DatePickerAssign<"CELL.CLICK" | "TABLE.ENTER">;
+export declare const setValue: DatePickerAssign<"VALUE.SET">;
+export declare const clearValue: DatePickerAssign<"VALUE.CLEAR">;
+export declare const setFocusDay: DatePickerAssign<"FOCUS.SET">;
+export declare const setFocusAboveDay: DatePickerAssign<"FOCUS.SET">;
+export declare const setView: DatePickerAssign<"VIEW.SET">;
+export declare const hoverRangeDay: DatePickerAssign<"CELL.POINTER_MOVE">;
+export declare const clearHover: DatePickerAssign<"TABLE.POINTER_LEAVE">;
+export declare const isDayView: GuardFor<DatePickerContext, DatePickerEvents>;
+export declare const isAboveDayView: GuardFor<DatePickerContext, DatePickerEvents>;
+export declare const isRangePicker: GuardFor<DatePickerContext, DatePickerEvents>;
+export declare const isMultiPicker: GuardFor<DatePickerContext, DatePickerEvents>;
+export declare const isSelfClosingSelection: GuardFor<DatePickerContext, DatePickerEvents>;
+export {};
+//# sourceMappingURL=date-picker.transitions.d.ts.map

package/dist/date-picker/date-picker.transitions.js

@@ -0,0 +1,94 @@
+import { clampDay, dayRecord, daysOf, normalizeDays, sameDay } from "./date-picker.state.js";
+// src/date-picker/date-picker.transitions.ts
+const resetView = (ctx) => {
+	return {
+		view: "day",
+		focusedValue: (ctx.value.length > 0 ? clampDay(ctx.value[0] ?? ctx.focusedValue, ctx.min, ctx.max) : null) ?? ctx.focusedValue
+	};
+};
+const drillIntoView = (ctx, event) => {
+	return {
+		focusedValue: clampDay(event.value, ctx.min, ctx.max),
+		view: ctx.view === "year" ? "month" : "day"
+	};
+};
+const selectSingleDay = (ctx, event) => {
+	const value = clampDay(event.value, ctx.min, ctx.max);
+	return {
+		value: [value],
+		startValue: null,
+		activeIndex: 0,
+		focusedValue: value,
+		hoveredValue: null
+	};
+};
+const toggleMultiDay = (ctx, event) => {
+	const value = clampDay(event.value, ctx.min, ctx.max);
+	const hit = ctx.value.findIndex((day) => sameDay(day, value));
+	const value_ = hit === -1 ? [...ctx.value, value] : ctx.value.filter((_day, at) => at !== hit);
+	return {
+		value: normalizeDays(value_, ctx.min, ctx.max),
+		startValue: null,
+		activeIndex: 0,
+		focusedValue: value,
+		hoveredValue: null
+	};
+};
+const selectRangeDay = (ctx, event) => {
+	const value = clampDay(event.value, ctx.min, ctx.max);
+	if (ctx.startValue === null) return {
+		startValue: value,
+		focusedValue: value
+	};
+	const first = clampDay(ctx.startValue, ctx.min, ctx.max);
+	const [lo, hi] = first.year * 1e4 + first.month * 100 + first.day <= value.year * 1e4 + value.month * 100 + value.day ? [first, value] : [value, first];
+	return {
+		value: [lo, hi],
+		startValue: null,
+		activeIndex: 0,
+		focusedValue: value,
+		hoveredValue: null
+	};
+};
+const setValue = (ctx, event) => {
+	const value = normalizeDays(daysOf(event.value), ctx.min, ctx.max);
+	return {
+		value,
+		startValue: value.length > 0 ? value[0] ?? null : null,
+		activeIndex: 0,
+		focusedValue: value.length > 0 ? value[0] ?? ctx.focusedValue : ctx.focusedValue
+	};
+};
+const clearValue = () => ({
+	value: [],
+	startValue: null,
+	activeIndex: 0
+});
+const setFocusDay = (ctx, event) => {
+	const day = dayRecord(event.focusedValue);
+	if (day === null) return {};
+	return { focusedValue: clampDay(day, ctx.min, ctx.max) };
+};
+const setFocusAboveDay = (ctx, event) => {
+	const day = dayRecord(event.focusedValue);
+	if (day === null) return {};
+	const value = clampDay(day, ctx.min, ctx.max);
+	return {
+		focusedValue: value,
+		view: value.year !== ctx.focusedValue.year ? "year" : value.month !== ctx.focusedValue.month ? "month" : "day"
+	};
+};
+const setView = (_ctx, event) => ({ view: event.view === "month" || event.view === "year" ? event.view : "day" });
+const hoverRangeDay = (ctx, event) => {
+	if (ctx.startValue === null) return {};
+	return { hoveredValue: clampDay(event.value, ctx.min, ctx.max) };
+};
+const clearHover = () => ({ hoveredValue: null });
+const isDayView = (ctx) => ctx.view === "day";
+const isAboveDayView = (ctx) => ctx.view !== "day";
+const isRangePicker = (ctx) => ctx.selectionMode === "range";
+const isMultiPicker = (ctx) => ctx.selectionMode === "multiple";
+const isSelfClosingSelection = (ctx) => ctx.closeOnSelect;
+export { clearHover, clearValue, drillIntoView, hoverRangeDay, isAboveDayView, isDayView, isMultiPicker, isRangePicker, isSelfClosingSelection, resetView, selectRangeDay, selectSingleDay, setFocusAboveDay, setFocusDay, setValue, setView, toggleMultiDay };
+
+//# sourceMappingURL=date-picker.transitions.js.map

package/dist/date-picker/examples/appointment.html

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { datePicker } from "../date-picker.presentation.js";
+
+  const machine = datePicker({});
+</script>
+<div class="relative w-full max-w-[20rem]">
+  <label class="block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate" for={machine.getTriggerProps()["id"]}>Date</label>
+
+  <button class={["secondary s-sm w-full items-center justify-between gap-2", { "border-primary": machine.isOpen }]} {...machine.getTriggerProps()}>
+    <span class="flex min-w-0 items-center gap-1">
+      <template for={machine.getValueTextRows()} as={row} key={row.value}>
+        <span show={!row.first} aria-hidden="true">–</span>
+        <span class="truncate">{row.text}</span>
+      </template>
+    </span>
+    <span class={["i-lucide-chevron-down shrink-0 text-xs transition-transform duration-fast ease-decelerate", { "rotate-180": machine.isOpen }]} aria-hidden="true"></span>
+  </button>
+
+  <div class={["absolute left-0 top-full z-dropdown mt-1 w-full origin-top-left transition duration-fast ease-decelerate", { "pointer-events-none invisible scale-95 opacity-0": !machine.isOpen }]} {...machine.getContentProps()}>
+    <div class="rounded-lg border border-solid border-border bg-surface-raised p-3 shadow-lg">
+      <div class="mb-2 flex items-center justify-between gap-2">
+        <button class="ghost icon s-sm" {...machine.getPrevTriggerProps()}>
+          <span class="i-lucide-chevron-left text-sm" aria-hidden="true"></span>
+        </button>
+        <button class="ghost s-sm" {...machine.getViewControlProps()}>
+          <template for={machine.getViewTextRows()} as={row} key={row.value}>
+            <span>{row.text}</span>
+          </template>
+        </button>
+        <button class="ghost icon s-sm" {...machine.getNextTriggerProps()}>
+          <span class="i-lucide-chevron-right text-sm" aria-hidden="true"></span>
+        </button>
+      </div>
+
+      <div {...machine.getGridProps()}>
+        <template for={machine.getWeekdayLabels()} as={day_}>
+          <span class="text-center text-xs font-medium text-text-muted">{day_}</span>
+        </template>
+        <template for={machine.getCells()} as={cell} key={cell.key}>
+          <button class="bare h-7 rounded-sm text-xs tabular-nums text-text transition-colors duration-fast ease-decelerate hover:bg-surface focus-visible:outline-none data-[selected]:bg-selected data-[selected]:font-semibold data-[selected]:text-on-selected data-[in-range]:bg-surface-sunken aria-[disabled=true]:pointer-events-none aria-[disabled=true]:opacity-40 data-[outside]:opacity-60" {...machine.getCellProps(cell)}>{machine.getCellProps(cell).text}</button>
+        </template>
+      </div>
+
+      <div class="mt-2 flex justify-end">
+        <button class="ghost s-sm" {...machine.getClearTriggerProps()}>Clear</button>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/date-picker/examples/basic.html

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import { datePicker } from "../date-picker.presentation.js";
+
+  const machine = datePicker({ value: ["2026-05-15"] });
+</script>
+<include file="./appointment.html" />

package/dist/date-picker/examples/multiple.html

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import { datePicker } from "../date-picker.presentation.js";
+
+  const machine = datePicker({ selectionMode: "multiple", value: ["2026-05-10", "2026-05-14", "2026-05-18"] });
+</script>
+<include file="./appointment.html" />

package/dist/date-picker/examples/pricing.html

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import { datePicker } from "../date-picker.presentation.js";
+
+  const machine = datePicker({ selectionMode: "range", value: ["2026-05-12", "2026-05-15"] });
+</script>
+<include file="./appointment.html" />

package/dist/date-picker/examples/range.html

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import { datePicker } from "../date-picker.presentation.js";
+
+  const machine = datePicker({ selectionMode: "range", value: ["2026-05-10", "2026-05-16"] });
+</script>
+<include file="./appointment.html" />

package/dist/date-picker/examples/unavailable.html

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import { datePicker } from "../date-picker.presentation.js";
+
+  const machine = datePicker({ value: ["2026-05-15"], min: "2026-05-05", max: "2026-05-25" });
+</script>
+<include file="./appointment.html" />

package/dist/editable/editable.events.d.ts

@@ -0,0 +1,29 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface EditableEvents {
+  "VALUE.SET": {
+    value: string;
+  };
+  "EDIT": {
+    src?: string;
+  };
+  "SUBMIT": {
+    focusable?: boolean;
+    src?: string;
+  };
+  "CANCEL": {
+    focusable?: boolean;
+    src?: string;
+  };
+  "CONTROLLED.EDIT": {};
+  "CONTROLLED.PREVIEW": {
+    previousEvent: string;
+  };
+}
+export type EditableEvent = EventUnion<EditableEvents>;
+export type EditableEditChange = {
+  readonly edit: boolean;
+};
+export type EditableValueChange = {
+  readonly value: string;
+};
+//# sourceMappingURL=editable.events.d.ts.map

package/dist/editable/editable.events.js

@@ -0,0 +1 @@
+export {};

package/dist/editable/editable.machine.d.ts

@@ -0,0 +1,5 @@
+import { EditableEvents } from "./editable.events.js";
+import { EditableArgs, EditableContext, EditableState } from "./editable.state.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function editable(args?: EditableArgs, authored?: (name: string) => boolean): Machine<EditableContext, EditableEvents, EditableState>;
+//# sourceMappingURL=editable.machine.d.ts.map

package/dist/editable/editable.machine.js

@@ -0,0 +1,82 @@
+import { initial } from "./editable.state.js";
+import { controlledPreviewIsSubmit, isEditControlled, revertValue, setLastEvent, setPreviousValue } from "./editable.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/editable/editable.machine.ts
+function editable(args = {}, authored = () => false) {
+	return createMachine({
+		id: "editable",
+		initial: "preview",
+		context: initial(args, authored),
+		on: { "VALUE.SET": { assign: (ctx, e) => {
+			const raw = typeof e.value === "string" ? e.value : "";
+			const max = ctx.maxLength;
+			const value = max === null || max <= 0 ? raw : raw.slice(0, max);
+			return value === ctx.value ? {} : { value };
+		} } },
+		states: {
+			preview: { on: {
+				"CONTROLLED.EDIT": {
+					target: "edit",
+					assign: setPreviousValue
+				},
+				EDIT: [{ cond: isEditControlled }, {
+					target: "edit",
+					assign: setPreviousValue
+				}]
+			} },
+			edit: { on: {
+				"CONTROLLED.PREVIEW": [{
+					cond: controlledPreviewIsSubmit,
+					target: "preview",
+					assign: setPreviousValue
+				}, {
+					target: "preview",
+					assign: revertValue
+				}],
+				CANCEL: [{
+					cond: isEditControlled,
+					assign: setLastEvent
+				}, {
+					target: "preview",
+					assign: [revertValue, setLastEvent]
+				}],
+				SUBMIT: [{
+					cond: isEditControlled,
+					assign: setLastEvent
+				}, {
+					target: "preview",
+					assign: [setPreviousValue, setLastEvent]
+				}]
+			} }
+		},
+		/**
+		* The machine's contract with its hosts: the context fields a host
+		* may write, and the event each write carries. A field with an event
+		* is REPORTED — the machine decides, and the change reaches the host;
+		* a field without one is SILENT — the write lands and nothing reports.
+		*/
+		fields: {
+			value: { event: "VALUE.SET" },
+			editControlled: {},
+			maxLength: {},
+			disabled: {},
+			readOnly: {},
+			invalid: {},
+			required: {},
+			placeholder: {},
+			autoResize: {},
+			dir: {},
+			name: {},
+			form: {},
+			submitMode: {},
+			activationMode: {},
+			selectOnFocus: {},
+			onInteractOutside: {},
+			onPointerDownOutside: {},
+			onFocusOutside: {}
+		}
+	});
+}
+export { editable };
+
+//# sourceMappingURL=editable.machine.js.map