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

package/dist/pagination/pagination.state.d.ts

@@ -0,0 +1,44 @@
+import { PaginationPageItem } from "./pagination.events.js";
+export type PaginationState = "idle";
+export interface PaginationContext {
+  page: number;
+  pageSize: number;
+  count: number;
+  siblingCount: number;
+  boundaryCount: number;
+  label: string | undefined;
+  firstLabel: string | undefined;
+  prevLabel: string | undefined;
+  nextLabel: string | undefined;
+  lastLabel: string | undefined;
+}
+export interface PaginationArgs {
+  page?: string | number;
+  pageSize?: string | number;
+  count?: number;
+  siblingCount?: number;
+  boundaryCount?: number;
+  defaultBoundaryCount?: number;
+  label?: string;
+  firstLabel?: string;
+  prevLabel?: string;
+  nextLabel?: string;
+  lastLabel?: string;
+}
+/** A numeric prop: numbers pass, numeric strings parse, everything else
+ * absent. */
+export declare const asCount: (raw: unknown) => number | null;
+export declare function totalPages(ctx: PaginationContext): number;
+export declare function previousPage(ctx: PaginationContext): number | null;
+export declare function nextPage(ctx: PaginationContext): number | null;
+export declare function pageRange(ctx: PaginationContext): {
+  start: number;
+  end: number;
+};
+export declare function pageWindow(ctx: PaginationContext): (number | "ellipsis")[];
+export declare function pageOptions(ctx: PaginationContext): PaginationPageItem[];
+export declare function pageItems(ctx: PaginationContext): PaginationPageItem[];
+declare const clampPage: (page: number, total: number) => number;
+export declare function initial(args: PaginationArgs, authored: (name: string) => boolean): PaginationContext;
+export { clampPage };
+//# sourceMappingURL=pagination.state.d.ts.map

package/dist/pagination/pagination.state.js

@@ -0,0 +1,115 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/pagination/pagination.state.ts
+/** A numeric prop: numbers pass, numeric strings parse, everything else
+* absent. */
+const asCount = (raw) => {
+	if (typeof raw === "number") return Number.isFinite(raw) ? raw : null;
+	if (typeof raw === "string" && raw.trim().length > 0) {
+		const n = Number(raw.trim());
+		return Number.isFinite(n) ? n : null;
+	}
+	return null;
+};
+function totalPages(ctx) {
+	return Math.max(1, Math.ceil(ctx.count / Math.max(1, ctx.pageSize)));
+}
+function previousPage(ctx) {
+	return ctx.page <= 1 ? null : ctx.page - 1;
+}
+function nextPage(ctx) {
+	return ctx.page >= totalPages(ctx) ? null : ctx.page + 1;
+}
+function pageRange(ctx) {
+	const start = (ctx.page - 1) * ctx.pageSize;
+	return {
+		start,
+		end: Math.min(start + ctx.pageSize, ctx.count)
+	};
+}
+function range(start, end) {
+	const length = end - start + 1;
+	return Array.from({ length }, (_, index) => index + start);
+}
+function pageWindow(ctx) {
+	const total = totalPages(ctx);
+	const { siblingCount, boundaryCount } = ctx;
+	const page = ctx.page;
+	if (total <= 0) return [];
+	if (total === 1) return [1];
+	const leftSibling = Math.max(page - siblingCount, 1);
+	const rightSibling = Math.min(page + siblingCount, total);
+	const totalNumbers = Math.min(siblingCount * 2 + 3 + boundaryCount * 2, total);
+	if (total <= totalNumbers) return range(1, total);
+	const slots = totalNumbers - 1 - boundaryCount;
+	const showLeft = leftSibling > 1 + boundaryCount + 1 && Math.abs(leftSibling - 1) > boundaryCount + 1;
+	const showRight = rightSibling < total - boundaryCount - 1 && Math.abs(total - rightSibling) > boundaryCount + 1;
+	let pages = [];
+	if (!showLeft && showRight) {
+		pages.push(...range(1, slots), "ellipsis");
+		pages.push(...range(total - boundaryCount + 1, total));
+	} else if (showLeft && !showRight) {
+		pages.push(...range(1, boundaryCount));
+		pages.push("ellipsis");
+		pages.push(...range(total - slots + 1, total));
+	} else if (showLeft && showRight) {
+		pages.push(...range(1, boundaryCount));
+		pages.push("ellipsis");
+		pages.push(...range(leftSibling, rightSibling));
+		pages.push("ellipsis");
+		pages.push(...range(total - boundaryCount + 1, total));
+	} else pages.push(...range(1, total));
+	const at = (index) => {
+		const value = pages[index];
+		return typeof value === "number" ? value : null;
+	};
+	for (let index = 0; index < pages.length; index += 1) if (pages[index] === "ellipsis") {
+		const prev = at(index - 1) ?? 0;
+		if ((at(index + 1) ?? total + 1) - prev === 2) pages[index] = prev + 1;
+	}
+	return pages;
+}
+function pageOptions(ctx) {
+	return range(1, totalPages(ctx)).map((value) => ({
+		type: "page",
+		value,
+		key: `page:${value}`,
+		label: String(value)
+	}));
+}
+function pageItems(ctx) {
+	let ellipsis = 0;
+	return pageWindow(ctx).map((value) => {
+		if (typeof value === "number") return {
+			type: "page",
+			value,
+			key: `page:${value}`,
+			label: String(value)
+		};
+		ellipsis += 1;
+		return {
+			type: "ellipsis",
+			index: ellipsis,
+			key: `ellipsis:${ellipsis}`,
+			label: "…"
+		};
+	});
+}
+const clampPage = (page, total) => Math.min(Math.max(page, 1), total);
+function initial(args, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	return {
+		page: written("page") ? asCount(args.page) ?? 1 : 1,
+		pageSize: written("pageSize") ? asCount(args.pageSize) ?? 10 : 10,
+		count: asCount(args.count) ?? 0,
+		siblingCount: asCount(args.siblingCount) ?? 1,
+		boundaryCount: asCount(args.boundaryCount) ?? 1,
+		label: args.label,
+		firstLabel: args.firstLabel,
+		prevLabel: args.prevLabel,
+		nextLabel: args.nextLabel,
+		lastLabel: args.lastLabel
+	};
+}
+export { asCount, clampPage, initial, nextPage, pageItems, pageOptions, pageRange, pageWindow, previousPage, totalPages };
+
+//# sourceMappingURL=pagination.state.js.map

package/dist/pagination/pagination.transitions.d.ts

@@ -0,0 +1,17 @@
+import { PaginationEvents } from "./pagination.events.js";
+import { PaginationContext } from "./pagination.state.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+type PaginationAssign<K extends keyof PaginationEvents = keyof PaginationEvents> = AssignFor<PaginationContext, PaginationEvents, K>;
+export declare const setCount: PaginationAssign<"SET_COUNT">;
+export declare const canSetPage: GuardFor<PaginationContext, PaginationEvents>;
+export declare const setPage: PaginationAssign<"SET_PAGE">;
+export declare const setPageSize: PaginationAssign<"SET_PAGE_SIZE">;
+export declare const resetPageIfStranded: PaginationAssign<"SET_PAGE_SIZE" | "SET_COUNT">;
+export declare const firstPage: PaginationAssign<"FIRST_PAGE">;
+export declare const lastPage: PaginationAssign<"LAST_PAGE">;
+export declare const hasPrev: GuardFor<PaginationContext, PaginationEvents>;
+export declare const prevPage: PaginationAssign<"PREVIOUS_PAGE">;
+export declare const hasNext: GuardFor<PaginationContext, PaginationEvents>;
+export declare const nextPage: PaginationAssign<"NEXT_PAGE">;
+export {};
+//# sourceMappingURL=pagination.transitions.d.ts.map

package/dist/pagination/pagination.transitions.js

@@ -0,0 +1,30 @@
+import { asCount, clampPage, totalPages } from "./pagination.state.js";
+// src/pagination/pagination.transitions.ts
+const setCount = (_ctx, event) => ({ count: Math.max(0, Math.floor(event.count)) });
+const canSetPage = (_ctx, event) => event.type === "SET_PAGE" && event.page >= 1 && event.page <= totalPages(_ctx);
+const setPage = (ctx, event) => {
+	const page = clampPage(asCount(event.page) ?? 1, totalPages(ctx));
+	return page === ctx.page ? {} : { page };
+};
+const setPageSize = (ctx, event) => {
+	const size = asCount(event.pageSize);
+	if (size === null) return {};
+	return { pageSize: Math.max(1, Math.floor(size)) };
+};
+const resetPageIfStranded = (ctx) => {
+	return ctx.page > totalPages(ctx) ? { page: 1 } : {};
+};
+const firstPage = (ctx) => {
+	return ctx.page === 1 ? {} : { page: 1 };
+};
+const lastPage = (ctx) => {
+	const last = totalPages(ctx);
+	return ctx.page === last ? {} : { page: last };
+};
+const hasPrev = (ctx) => ctx.page > 1;
+const prevPage = (ctx) => ({ page: clampPage(ctx.page - 1, totalPages(ctx)) });
+const hasNext = (ctx) => ctx.page < totalPages(ctx);
+const nextPage = (ctx) => ({ page: clampPage(ctx.page + 1, totalPages(ctx)) });
+export { canSetPage, firstPage, hasNext, hasPrev, lastPage, nextPage, prevPage, resetPageIfStranded, setCount, setPage, setPageSize };
+
+//# sourceMappingURL=pagination.transitions.js.map

package/dist/pin-input/examples/basic.html

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { pinInput } from "../pin-input.presentation.js";
+
+const machine = pinInput({
+  count: 4,
+  placeholder: "○",
+  otp: true,
+});
+</script>
+<div class="w-full" {...machine.getRootProps()}>
+  <label
+    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    {...machine.getLabelProps()}>Verification code</label>
+  <div class="flex items-center gap-2" {...machine.getControlProps()}>
+    <template for={machine.getItems()} as={cell} key={cell}>
+      <input
+        class={["w-10 p-0 text-center text-lg tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
+        {...machine.getInputProps(cell)}
+      />
+    </template>
+  </div>
+  <input {...machine.getHiddenInputProps()} />
+</div>

package/dist/pin-input/examples/field.html

@@ -0,0 +1,25 @@
+<script lang="ts">
+import { pinInput } from "../pin-input.presentation.js";
+
+const machine = pinInput({
+  count: 4,
+  invalid: false,
+});
+</script>
+<div class="w-full" {...machine.getRootProps()}>
+  <label
+    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    {...machine.getLabelProps()}>Enter PIN</label>
+  <div class="flex items-center gap-2" {...machine.getControlProps()}>
+    <template for={machine.getItems()} as={cell} key={cell}>
+      <input
+        class={["w-10 p-0 text-center text-lg tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
+        {...machine.getInputProps(cell)}
+      />
+    </template>
+  </div>
+  <input {...machine.getHiddenInputProps()} />
+  <p class="text-xs text-text-muted">Enter a 4-digit PIN (don't use 1234)</p>
+  <p class="text-xs text-semantic-error"
+    show={machine.valueAsString === "1234"}>This PIN is too common. Please choose a different one.</p>
+</div>

package/dist/pin-input/examples/masked.html

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { pinInput } from "../pin-input.presentation.js";
+
+const machine = pinInput({
+  count: 4,
+  mask: true,
+});
+</script>
+<div class="w-full" {...machine.getRootProps()}>
+  <label
+    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    {...machine.getLabelProps()}>Enter secure PIN</label>
+  <div class="flex items-center gap-2" {...machine.getControlProps()}>
+    <template for={machine.getItems()} as={cell} key={cell}>
+      <input
+        class={["w-10 p-0 text-center text-lg tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
+        {...machine.getInputProps(cell)}
+      />
+    </template>
+  </div>
+  <input {...machine.getHiddenInputProps()} />
+  <p class="text-xs text-text-muted">Your PIN will be masked for security</p>
+</div>

package/dist/pin-input/examples/placeholder.html

@@ -0,0 +1,24 @@
+<script lang="ts">
+import { pinInput } from "../pin-input.presentation.js";
+
+const machine = pinInput({
+  count: 5,
+  placeholder: "*",
+});
+</script>
+<div class="w-full" {...machine.getRootProps()}>
+  <label
+    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    {...machine.getLabelProps()}>Enter access code</label>
+  <div class="flex items-center gap-2" {...machine.getControlProps()}>
+    <template for={machine.getItems()} as={cell} key={cell}>
+      <input
+        class={["w-10 p-0 text-center text-lg tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
+        {...machine.getInputProps(cell)}
+      />
+    </template>
+  </div>
+  <input {...machine.getHiddenInputProps()} />
+  <p
+    class="text-xs text-text-muted">Uses asterisk (*) as placeholder instead of default circle</p>
+</div>

package/dist/pin-input/examples/twofactor.html

@@ -0,0 +1,25 @@
+<script lang="ts">
+import { pinInput } from "../pin-input.presentation.js";
+
+const machine = pinInput({
+  count: 6,
+  otp: true,
+});
+</script>
+<div class="w-full" {...machine.getRootProps()}>
+  <label
+    class={["block text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    {...machine.getLabelProps()}>Two-factor authentication code</label>
+  <div class="flex items-center gap-2" {...machine.getControlProps()}>
+    <template for={machine.getItems()} as={cell} key={cell}>
+      <input
+        class={["w-10 p-0 text-center text-lg tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
+        {...machine.getInputProps(cell)}
+      />
+      <span show={cell === 2} class="text-lg font-medium text-text-muted">-</span>
+    </template>
+  </div>
+  <input {...machine.getHiddenInputProps()} />
+  <p
+    class="text-xs text-text-muted">Enter the 6-digit code from your authenticator app</p>
+</div>

package/dist/pin-input/examples/verification.html

@@ -0,0 +1,32 @@
+<script lang="ts">
+import { pinInput } from "../pin-input.presentation.js";
+
+const machine = pinInput({
+  count: 6,
+  otp: true,
+  autoFocus: true,
+  blurOnComplete: true,
+});
+</script>
+<div class="w-full text-center" {...machine.getRootProps()}>
+  <div class="mb-4">
+    <div class="text-lg font-semibold text-text">Verify your phone</div>
+    <div
+      class="text-sm text-text-muted">We sent a verification code to <br /><span class="font-medium text-text">+1 (555) 123-4567</span></div>
+  </div>
+  <div class="mb-6 flex items-center justify-center gap-3"
+    {...machine.getControlProps()}>
+    <template for={machine.getItems()} as={cell} key={cell}>
+      <input
+        class={["w-10 p-0 text-center text-lg tabular-nums transition-colors duration-fast ease-decelerate", { "cursor-not-allowed opacity-50": machine.disabled }]}
+        {...machine.getInputProps(cell)}
+      />
+    </template>
+  </div>
+  <input {...machine.getHiddenInputProps()} />
+  <div class="stack-sm">
+    <div class="text-sm text-text-muted">Didn't receive the code?</div>
+    <button type="button"
+      class="bare text-sm font-medium text-primary transition-colors duration-fast ease-decelerate hover:text-primary">Resend code</button>
+  </div>
+</div>

package/dist/pin-input/pin-input.events.d.ts

@@ -0,0 +1,48 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface PinInputEvents {
+  "VALUE.SET": {
+    value: readonly string[];
+    index?: undefined;
+  } | {
+    value: string;
+    index: number;
+  };
+  "VALUE.CLEAR": {};
+  "INPUT.FOCUS": {
+    index: number;
+  };
+  "INPUT.BLUR": {
+    index: number;
+  };
+  "INPUT.CHANGE": {
+    index: number;
+    value: string;
+  };
+  "INPUT.PASTE": {
+    value: string;
+  };
+  "INPUT.ADVANCE": {};
+  "INPUT.BACKSPACE": {};
+  "INPUT.DELETE": {};
+  "INPUT.ARROW_LEFT": {};
+  "INPUT.ARROW_RIGHT": {};
+  "INPUT.HOME": {};
+  "INPUT.END": {};
+  "VALUE.INVALID": {
+    value: string;
+  };
+}
+export type PinInputEvent = EventUnion<PinInputEvents>;
+export interface PinInputValueChange {
+  readonly value: string[];
+  readonly valueAsString: string;
+}
+export interface PinInputValueComplete {
+  readonly value: string[];
+  readonly valueAsString: string;
+}
+export interface PinInputValueInvalid {
+  readonly value: string;
+  readonly index: number;
+}
+//# sourceMappingURL=pin-input.events.d.ts.map

package/dist/pin-input/pin-input.events.js

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

package/dist/pin-input/pin-input.machine.d.ts

@@ -0,0 +1,5 @@
+import { PinInputArgs, PinInputContext, PinInputState } from "./pin-input.state.js";
+import { PinInputEvents } from "./pin-input.events.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function pinInput(args?: PinInputArgs, authored?: (name: string) => boolean): Machine<PinInputContext, PinInputEvents, PinInputState>;
+//# sourceMappingURL=pin-input.machine.d.ts.map

package/dist/pin-input/pin-input.machine.js

@@ -0,0 +1,99 @@
+import { fill, getNextValue, initial, pinView } from "./pin-input.state.js";
+import { advanceFocusedIndex, clearFocusedValue, hasValue, setFocusIndexToFirst, setFocusedIndex, setPrevFocusedIndex } from "./pin-input.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/pin-input/pin-input.machine.ts
+/** Pin-input machine: chart only. */
+function pinInput(args = {}, authored = () => false) {
+	const viewOf = (ctx) => pinView(ctx.value, ctx.count);
+	return createMachine({
+		id: "pin-input",
+		initial: "idle",
+		fields: {
+			value: { event: "VALUE.SET" },
+			count: {},
+			dir: {},
+			disabled: {},
+			readOnly: {},
+			invalid: {},
+			required: {},
+			name: {},
+			form: {},
+			type: {},
+			mask: {},
+			otp: {},
+			placeholder: {},
+			pattern: {},
+			translations: {},
+			sanitizeValue: {},
+			blurOnComplete: {},
+			autoSubmit: {},
+			autoFocus: {}
+		},
+		context: initial(args, authored),
+		on: {
+			"VALUE.SET": [{
+				cond: (_ctx, event) => event.type === "VALUE.SET" && event.index !== void 0,
+				assign: (ctx, event) => {
+					if (event.index === void 0) return {};
+					const chars = viewOf(ctx).chars;
+					const write = getNextValue(chars[ctx.focusedIndex] ?? "", event.value);
+					if (chars[event.index] === write) return {};
+					const value = [...chars];
+					value[event.index] = write;
+					return { value };
+				}
+			}, { assign: (ctx, event) => event.index === void 0 ? { value: fill(parseChars(event.value), ctx.count) } : {} }],
+			"VALUE.CLEAR": { assign: [(ctx) => ({ value: fill([], ctx.count) }), setFocusIndexToFirst] }
+		},
+		states: {
+			idle: { on: { "INPUT.FOCUS": {
+				target: "focused",
+				assign: setFocusedIndex
+			} } },
+			focused: { on: {
+				"INPUT.CHANGE": { assign: [(ctx, event) => {
+					if (ctx.focusedIndex === -1) return {};
+					const chars = viewOf(ctx).chars;
+					const write = getNextValue(chars[ctx.focusedIndex] ?? "", event.value);
+					const value = [...chars];
+					value[ctx.focusedIndex] = write;
+					return { value };
+				}, advanceFocusedIndex] },
+				"INPUT.ADVANCE": { assign: advanceFocusedIndex },
+				"INPUT.PASTE": { assign: [(ctx, event) => {
+					const view = viewOf(ctx);
+					const startIndex = Math.min(ctx.focusedIndex, view.filled);
+					const left = startIndex > 0 ? view.asString.substring(0, ctx.focusedIndex) : "";
+					const right = event.value.substring(0, view.length - startIndex);
+					return { value: fill(`${left}${right}`.split(""), view.length) };
+				}, (ctx) => ({ focusedIndex: Math.min(viewOf(ctx).filled, viewOf(ctx).length - 1) })] },
+				"INPUT.FOCUS": { assign: setFocusedIndex },
+				"INPUT.BLUR": {
+					target: "idle",
+					assign: () => ({ focusedIndex: -1 })
+				},
+				"INPUT.DELETE": [{
+					cond: hasValue,
+					assign: clearFocusedValue
+				}],
+				"INPUT.ARROW_LEFT": { assign: setPrevFocusedIndex },
+				"INPUT.ARROW_RIGHT": { assign: (ctx) => {
+					const view = viewOf(ctx);
+					return { focusedIndex: Math.min(ctx.focusedIndex + 1, Math.min(view.filled, view.length - 1)) };
+				} },
+				"INPUT.HOME": { assign: setFocusIndexToFirst },
+				"INPUT.END": { assign: (ctx) => ({ focusedIndex: Math.max(viewOf(ctx).filled - 1, 0) }) },
+				"INPUT.BACKSPACE": [{
+					cond: hasValue,
+					assign: [clearFocusedValue, setPrevFocusedIndex]
+				}, { assign: [setPrevFocusedIndex, clearFocusedValue] }]
+			} }
+		}
+	});
+}
+function parseChars(raw) {
+	return (Array.isArray(raw) ? raw.filter((part) => typeof part === "string") : typeof raw === "string" ? raw.split(",").map((part) => part.trim()) : []).filter((part) => part.length === 1);
+}
+export { pinInput };
+
+//# sourceMappingURL=pin-input.machine.js.map