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

package/dist/tags-input/tags.state.d.ts

@@ -0,0 +1,109 @@
+import { TagsEvent } from "./tags.events.js";
+export interface TagsValidateArgs {
+  readonly inputValue: string;
+  readonly value: readonly string[];
+}
+export type SanitizeValue = (value: string) => string;
+export type ValidateTag = (details: TagsValidateArgs) => boolean;
+/** The mutation log: the connect turns each entry into an announcement. */
+export type TagsLog = {
+  readonly type: "add";
+  readonly value: string;
+} | {
+  readonly type: "delete";
+  readonly value: string;
+} | {
+  readonly type: "update";
+  readonly value: string;
+} | {
+  readonly type: "paste";
+  readonly values: readonly string[];
+} | {
+  readonly type: "select";
+  readonly value: string;
+} | {
+  readonly type: "clear";
+};
+export type TagsState = "idle" | "focused:input" | "navigating:tag" | "editing:tag";
+export interface TagsContext {
+  value: string[];
+  /** The seed for form reset: the value the host declared. */
+  initialValue: string[];
+  inputValue: string;
+  highlightedIndex: number | null;
+  editedValue: string;
+  editedIndex: number | null;
+  log: TagsLog | null;
+  logPrev: TagsLog | null;
+  /** Set when an add was refused; the bridge reports and clears it. */
+  refusal: "invalidTag" | null;
+  max: number;
+  allowOverflow: boolean;
+  allowDuplicates: boolean;
+  editable: boolean;
+  addOnPaste: boolean;
+  addOnBlur: boolean;
+  clearOnBlur: boolean;
+  delimiter: string;
+  sanitizeValue: SanitizeValue;
+  validate: ValidateTag;
+  dir: "ltr" | "rtl";
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean | undefined;
+  required: boolean;
+  name: string | undefined;
+  form: string | undefined;
+  maxLength: number | null;
+  placeholder: string;
+  translations: unknown;
+}
+export interface TagsArgs {
+  readonly value?: string;
+  readonly defaultValue?: string;
+  readonly inputValue?: string;
+  readonly defaultInputValue?: string;
+  readonly max?: number;
+  readonly allowOverflow?: boolean;
+  readonly allowDuplicates?: boolean;
+  readonly editable?: boolean;
+  readonly addOnPaste?: boolean;
+  /** The blur behavior: `add` commits, `clear` empties, neither does. */
+  readonly blurBehavior?: string;
+  readonly delimiter?: string;
+  readonly sanitizeValue?: SanitizeValue;
+  readonly validate?: ValidateTag;
+  readonly dir?: string;
+  readonly disabled?: boolean;
+  readonly readOnly?: boolean;
+  readonly invalid?: boolean;
+  readonly required?: boolean;
+  readonly name?: string;
+  readonly form?: string;
+  readonly maxLength?: number;
+  readonly placeholder?: string;
+  readonly translations?: unknown;
+}
+/** Strings off the transport: JSON text or arrays, well-shaped only.
+ * The scope grammar coerces `= []` to `["[]"]` — the lone artifact entry
+ * drops here, once, for every reader. */
+export declare function stringsOf(raw: unknown): string[];
+export declare function sameTags(a: readonly string[], b: readonly string[]): boolean;
+export declare const uniq: (values: readonly string[]) => string[];
+export declare const clampIndex: (index: number, length: number) => number | null;
+export declare function initial(args: TagsArgs, authored: (name: string) => boolean): TagsContext;
+/** An exact count rather than a ceiling: a list already past the cap is not
+ * "at" it, so the insert still goes through — which is why `api.atMax`
+ * reports `>=` while this guard reports equality. */
+export declare const isAtMax: (ctx: TagsContext) => boolean;
+/** The INSERT_TAG overflow guard: at the cap the input text survives. */
+export declare const canAdd: (ctx: TagsContext) => boolean;
+export declare const caretAtStart: (event: TagsEvent) => boolean;
+/** The selection is announced from a watch on the highlight; here it is
+ * written wherever the highlight moves. */
+export declare const withSelectLog: (ctx: TagsContext, index: number | null) => Partial<TagsContext>;
+export declare const valueAtIndex: (ctx: TagsContext, index: number) => string | undefined;
+/** Append the sanitized input text, then clear it. Guarded by `canInsert`
+ * at every call site. */
+export declare const addFromInput: (ctx: TagsContext) => Partial<TagsContext>;
+//# sourceMappingURL=tags.state.d.ts.map

package/dist/tags-input/tags.state.js

@@ -0,0 +1,111 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/tags-input/tags.state.ts
+/** Strings off the transport: JSON text or arrays, well-shaped only.
+* The scope grammar coerces `= []` to `["[]"]` — the lone artifact entry
+* drops here, once, for every reader. */
+function stringsOf(raw) {
+	if (Array.isArray(raw)) {
+		const clean = raw.filter((item) => typeof item === "string");
+		return clean.some((item) => item === "[]") && clean.length === 1 ? [] : clean;
+	}
+	if (typeof raw !== "string") return [];
+	try {
+		const parsed = JSON.parse(raw);
+		return Array.isArray(parsed) && parsed.every((item) => typeof item === "string") ? [...parsed] : [];
+	} catch {
+		return [];
+	}
+}
+function sameTags(a, b) {
+	return a.length === b.length && a.every((value, index) => value === b[index]);
+}
+const uniq = (values) => [...new Set(values)];
+const clampIndex = (index, length) => index < 0 || index >= length ? null : index;
+const sanitizeDefault = (value) => value.trim();
+const validateDefault = () => true;
+function initial(args, authored) {
+	const count = (value) => typeof value === "number" && Number.isFinite(value) ? value : Infinity;
+	const flag = (value) => value === true;
+	const text = (value, fallback) => typeof value === "string" ? value : fallback;
+	const fn = (value, fallback) => typeof value === "function" ? value : fallback;
+	const behavior = args.blurBehavior;
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const seeded = written("value") ? stringsOf(args.value) : stringsOf(args.defaultValue);
+	return {
+		value: seeded,
+		initialValue: seeded,
+		inputValue: written("inputValue") ? text(args.inputValue, "") : text(args.defaultInputValue, ""),
+		max: count(args.max),
+		allowOverflow: flag(args.allowOverflow),
+		allowDuplicates: flag(args.allowDuplicates),
+		editable: args.editable !== false,
+		addOnPaste: flag(args.addOnPaste),
+		addOnBlur: behavior === "add",
+		clearOnBlur: behavior === "clear",
+		delimiter: text(args.delimiter, ","),
+		sanitizeValue: fn(args.sanitizeValue, sanitizeDefault),
+		validate: fn(args.validate, validateDefault),
+		dir: args.dir === "rtl" ? "rtl" : "ltr",
+		disabled: args.disabled === true,
+		readOnly: args.readOnly === true,
+		invalid: args.invalid === true ? true : void 0,
+		required: args.required === true,
+		name: typeof args.name === "string" && args.name.length > 0 ? args.name : void 0,
+		form: typeof args.form === "string" && args.form.length > 0 ? args.form : void 0,
+		maxLength: typeof args.maxLength === "number" && Number.isFinite(args.maxLength) && args.maxLength > 0 ? Math.trunc(args.maxLength) : null,
+		placeholder: typeof args.placeholder === "string" ? args.placeholder : "",
+		translations: args.translations
+	};
+}
+/** An exact count rather than a ceiling: a list already past the cap is not
+* "at" it, so the insert still goes through — which is why `api.atMax`
+* reports `>=` while this guard reports equality. */
+const isAtMax = (ctx) => ctx.value.length === ctx.max;
+/** The INSERT_TAG overflow guard: at the cap the input text survives. */
+const canAdd = (ctx) => ctx.allowOverflow || !isAtMax(ctx);
+const caretAtStart = (event) => {
+	switch (event.type) {
+		case "ARROW_LEFT":
+		case "ARROW_RIGHT":
+		case "BACKSPACE":
+		case "DELETE": return event.caretAtStart === true;
+		default: return false;
+	}
+};
+/** The selection is announced from a watch on the highlight; here it is
+* written wherever the highlight moves. */
+const withSelectLog = (ctx, index) => {
+	if (index === null || ctx.log === null) return { highlightedIndex: index };
+	const value = ctx.value[index];
+	if (value === void 0) return { highlightedIndex: index };
+	return {
+		highlightedIndex: index,
+		logPrev: ctx.log,
+		log: {
+			type: "select",
+			value
+		}
+	};
+};
+const valueAtIndex = (ctx, index) => ctx.value[index];
+/** Append the sanitized input text, then clear it. Guarded by `canInsert`
+* at every call site. */
+const addFromInput = (ctx) => {
+	const inputValue = ctx.sanitizeValue(ctx.inputValue);
+	if (!ctx.validate({
+		inputValue,
+		value: ctx.value
+	})) return { refusal: "invalidTag" };
+	return {
+		value: ctx.allowDuplicates ? [...ctx.value, inputValue] : uniq([...ctx.value, inputValue]),
+		inputValue: "",
+		log: {
+			type: "add",
+			value: inputValue
+		},
+		logPrev: ctx.log
+	};
+};
+export { addFromInput, canAdd, caretAtStart, clampIndex, initial, isAtMax, sameTags, stringsOf, uniq, valueAtIndex, withSelectLog };
+
+//# sourceMappingURL=tags.state.js.map

package/dist/tags-input/tags.transitions.d.ts

@@ -0,0 +1,23 @@
+import { TagsEvent } from "./tags.events.js";
+import { TagsContext, addFromInput, canAdd, caretAtStart, isAtMax } from "./tags.state.js";
+export declare const setInputValue: (_ctx: TagsContext, e: TagsEvent) => Partial<TagsContext>;
+export declare const addTagFromPaste: (ctx: TagsContext, e: TagsEvent) => Partial<TagsContext>;
+export declare const deleteTag: (ctx: TagsContext, e: TagsEvent) => Partial<TagsContext>;
+export declare const deleteHighlighted: (ctx: TagsContext) => Partial<TagsContext>;
+export declare const clearInputValue: () => Partial<TagsContext>;
+export declare const clearHighlight: () => Partial<TagsContext>;
+export declare const highlightPrev: (ctx: TagsContext) => Partial<TagsContext>;
+export declare const highlightLast: (ctx: TagsContext) => Partial<TagsContext>;
+export declare const highlightAtIndex: (ctx: TagsContext) => Partial<TagsContext>;
+export declare const beginEdit: (ctx: TagsContext, e: TagsEvent) => Partial<TagsContext>;
+export declare const finishEdit: (ctx: TagsContext) => Partial<TagsContext>;
+export declare const clearEditAll: () => Partial<TagsContext>;
+export declare const hasHighlighted: (ctx: TagsContext) => boolean;
+export declare const canInsert: (ctx: TagsContext) => boolean;
+export declare const insertOnBlur: (ctx: TagsContext) => boolean;
+export declare const clearOnBlur: (ctx: TagsContext) => boolean;
+export declare const addOnPaste: (ctx: TagsContext) => boolean;
+export declare const canLeaveInput: (ctx: TagsContext, event: TagsEvent) => boolean;
+export declare const caretNotAtStart: (_ctx: TagsContext, event: TagsEvent) => boolean;
+export { addFromInput, canAdd, caretAtStart, isAtMax };
+//# sourceMappingURL=tags.transitions.d.ts.map

package/dist/tags-input/tags.transitions.js

@@ -0,0 +1,101 @@
+import { addFromInput, canAdd, caretAtStart, clampIndex, isAtMax, uniq, valueAtIndex, withSelectLog } from "./tags.state.js";
+// src/tags-input/tags.transitions.ts
+const setInputValue = (_ctx, e) => {
+	if (e.type === "TYPE" || e.type === "SET_INPUT_VALUE" || e.type === "PASTE") return { inputValue: e.value };
+	return {};
+};
+const addTagFromPaste = (ctx, e) => {
+	if (e.type !== "PASTE") return {};
+	const inputValue = ctx.sanitizeValue(ctx.inputValue);
+	const values = ctx.delimiter.length > 0 ? inputValue.split(ctx.delimiter).map((part) => ctx.sanitizeValue(part)) : [inputValue];
+	if (!ctx.validate({
+		inputValue,
+		value: ctx.value
+	})) return {
+		refusal: "invalidTag",
+		inputValue: ""
+	};
+	return {
+		value: ctx.allowDuplicates ? [...ctx.value, ...values] : uniq([...ctx.value, ...values]),
+		inputValue: "",
+		log: {
+			type: "paste",
+			values
+		},
+		logPrev: ctx.log
+	};
+};
+const deleteTag = (ctx, e) => {
+	if (e.type !== "CLEAR_TAG" && e.type !== "CLICK_DELETE_TAG") return {};
+	const removed = ctx.value[e.index];
+	if (removed === void 0) return {};
+	return {
+		value: ctx.value.filter((_, i) => i !== e.index),
+		log: {
+			type: "delete",
+			value: removed
+		},
+		logPrev: ctx.log
+	};
+};
+const deleteHighlighted = (ctx) => {
+	const index = ctx.highlightedIndex;
+	if (index === null) return {};
+	const removed = ctx.value[index];
+	if (removed === void 0) return {};
+	return {
+		value: ctx.value.filter((_, i) => i !== index),
+		editedIndex: index,
+		log: {
+			type: "delete",
+			value: removed
+		},
+		logPrev: ctx.log
+	};
+};
+const clearInputValue = () => ({ inputValue: "" });
+const clearHighlight = () => ({ highlightedIndex: null });
+const highlightPrev = (ctx) => {
+	const at = ctx.highlightedIndex;
+	if (at === null) return {};
+	return withSelectLog(ctx, at > 0 ? at - 1 : null);
+};
+const highlightLast = (ctx) => withSelectLog(ctx, ctx.value.length > 0 ? ctx.value.length - 1 : null);
+const highlightAtIndex = (ctx) => {
+	const index = ctx.editedIndex;
+	return withSelectLog(ctx, index === null ? null : clampIndex(index, ctx.value.length));
+};
+const beginEdit = (ctx, e) => {
+	const index = e.type === "DOUBLE_CLICK_TAG" ? e.index : ctx.highlightedIndex;
+	if (index === null) return {};
+	const value = valueAtIndex(ctx, index);
+	if (value === void 0) return {};
+	return {
+		editedIndex: index,
+		editedValue: value
+	};
+};
+const finishEdit = (ctx) => {
+	const index = ctx.editedIndex;
+	const clamped = index === null ? null : clampIndex(index, ctx.value.length);
+	return {
+		...withSelectLog(ctx, clamped),
+		editedIndex: null,
+		editedValue: ""
+	};
+};
+const clearEditAll = () => ({
+	editedValue: "",
+	editedIndex: null,
+	highlightedIndex: null
+});
+const hasHighlighted = (ctx) => ctx.highlightedIndex !== null;
+const canInsert = (ctx) => canAdd(ctx) && ctx.sanitizeValue(ctx.inputValue).length > 0;
+const insertOnBlur = (ctx) => ctx.addOnBlur && canAdd(ctx) && ctx.sanitizeValue(ctx.inputValue).length > 0;
+const clearOnBlur = (ctx) => ctx.clearOnBlur;
+const addOnPaste = (ctx) => ctx.addOnPaste;
+const canLeaveInput = (ctx, event) => ctx.value.length > 0 && caretAtStart(event);
+const caretNotAtStart = (_ctx, event) => !caretAtStart(event);
+export { addFromInput, addOnPaste, addTagFromPaste, beginEdit, canAdd, canInsert, canLeaveInput, caretAtStart, caretNotAtStart, clearEditAll, clearHighlight, clearInputValue, clearOnBlur, deleteHighlighted, deleteTag, finishEdit, hasHighlighted, highlightAtIndex, highlightLast, highlightPrev, insertOnBlur, isAtMax, setInputValue };
+
+//# sourceMappingURL=tags.transitions.js.map

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+import { themePicker } from "../theme-picker.presentation.js";
+
+const machine = themePicker({
+  syncDocument: false,
+  defaultValue: "silk",
+  themes: [
+    { value: "silk", label: "Silk" },
+    { value: "neobrut", label: "Neobrut", modes: ["light"] },
+    { value: "nord", label: "Nord" },
+    { value: "synthwave", label: "Synthwave", modes: ["dark"] },
+  ],
+});
+</script>
+
+<div class="relative inline-block" {...machine.getRootProps()}>
+  <button
+    class="bare inline-flex items-center gap-2 rounded-lg border border-solid border-border bg-surface px-2 py-1 text-sm text-text transition-colors hover:bg-surface-raised"
+    {...machine.getTriggerProps()}
+  >
+    <span class="inline-flex h-4 items-center gap-1" {...machine.getTriggerSwatchProps()}>
+      <span class="h-2 w-2 shrink-0 rounded-full border border-solid border-border bg-surface"></span>
+      <span class="h-2 w-2 shrink-0 rounded-full bg-primary"></span>
+      <span class="h-2 w-2 shrink-0 rounded-full bg-text"></span>
+    </span>
+    <span {...machine.getTriggerLabelProps()}>{machine.value}</span>
+    <span class="inline-block i-lucide-chevron-down icon-sm text-text-muted" {...machine.getTriggerIndicatorProps()}></span>
+  </button>
+  <div class="absolute z-dropdown" {...machine.getPositionerProps()}>
+    <panel
+      {...machine.getContentProps()}
+    >
+      <panel-list {...machine.getListProps()}>
+        <template for={machine.getItems()} as={row} key={row.value}>
+          <div
+            class="bare flex w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors"
+            {...machine.getItemProps(row)}
+          >
+            <span class="inline-flex h-4 items-center gap-1" {...machine.getItemSwatchProps(row)}>
+              <span class="h-3 w-3 shrink-0 rounded-full border border-solid border-border bg-surface"></span>
+              <span class="h-3 w-3 shrink-0 rounded-full bg-primary"></span>
+              <span class="h-3 w-3 shrink-0 rounded-full bg-text"></span>
+            </span>
+            <span class="flex-1" {...machine.getItemLabelProps(row)}>{row.label}</span>
+            <span class="inline-block i-lucide-sun h-3 w-3 text-text-muted" show={machine.getItemState(row).dualMode}></span>
+            <span class="inline-block i-lucide-check h-4 w-4 text-primary" show={machine.getItemState(row).selected} {...machine.getItemIndicatorProps(row)}></span>
+          </div>
+        </template>
+      </panel-list>
+    </panel>
+  </div>
+</div>

package/dist/theme-picker/examples/cards.html

@@ -0,0 +1,32 @@
+<script lang="ts">
+import { themePicker } from "../theme-picker.presentation.js";
+
+const machine = themePicker({
+  syncDocument: false,
+  defaultValue: "silk",
+  themes: [
+    { value: "silk", label: "Silk" },
+    { value: "neobrut", label: "Neobrut", modes: ["light"] },
+    { value: "nord", label: "Nord" },
+    { value: "synthwave", label: "Synthwave", modes: ["dark"] },
+  ],
+});
+</script>
+
+<div class="grid w-full grid-cols-2 gap-3" {...machine.getRootProps()}>
+  <template for={machine.getItems()} as={row} key={row.value}>
+    <button
+      class={["bare flex flex-col items-stretch justify-between gap-0 p-0 overflow-hidden rounded-lg border border-solid bg-surface text-left text-text transition-all", { "border-border": machine.getItemState(row).selected === false, "border-primary ring-1 ring-primary": machine.getItemState(row).selected }]}
+      {...machine.getItemProps(row)}
+    >
+      <span class="block w-full bg-surface px-3 py-2" {...machine.getItemSwatchProps(row)}>
+        <span class="block text-sm font-medium text-text" {...machine.getItemLabelProps(row)}>{row.label}</span>
+        <span class="mt-1 inline-block rounded-sm bg-primary px-2 py-1 text-xs text-on-primary">Aa</span>
+      </span>
+      <span class="flex w-full items-center justify-between bg-surface-raised px-3 py-1 text-xs text-text-muted">
+        <span>{row.value}</span>
+        <span class="inline-block i-lucide-check h-3 w-3 text-primary" show={machine.getItemState(row).selected} {...machine.getItemIndicatorProps(row)}></span>
+      </span>
+    </button>
+  </template>
+</div>

package/dist/theme-picker/examples/compact.html

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { themePicker } from "../theme-picker.presentation.js";
+
+const machine = themePicker({
+  syncDocument: false,
+  defaultValue: "silk",
+  themes: [
+    { value: "silk", label: "Silk" },
+    { value: "neobrut", label: "Neobrut", modes: ["light"] },
+    { value: "nord", label: "Nord" },
+    { value: "synthwave", label: "Synthwave", modes: ["dark"] },
+  ],
+});
+</script>
+
+<div class="relative inline-flex" {...machine.getRootProps()}>
+  <button
+    class="bare inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm text-text-muted transition-colors hover:bg-surface hover:text-text"
+    {...machine.getTriggerProps()}
+  >
+    <span class="inline-block i-lucide-palette h-4 w-4"></span>
+    <span {...machine.getTriggerLabelProps()}>{machine.value}</span>
+  </button>
+  <div class="absolute z-dropdown" {...machine.getPositionerProps()}>
+    <div
+      class="rounded-lg border border-solid border-border bg-surface p-1 shadow-lg"
+      {...machine.getContentProps()}
+    >
+      <div {...machine.getListProps()}>
+        <template for={machine.getItems()} as={row} key={row.value}>
+          <div
+            class="bare flex w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors hover:bg-surface-raised"
+            {...machine.getItemProps(row)}
+          >
+            <span class="flex-1" {...machine.getItemLabelProps(row)}>{row.label}</span>
+            <span class="inline-block i-lucide-check h-3 w-3 text-primary" show={machine.getItemState(row).selected} {...machine.getItemIndicatorProps(row)}></span>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/theme-picker/examples/swatches.html

@@ -0,0 +1,31 @@
+<script lang="ts">
+import { themePicker } from "../theme-picker.presentation.js";
+
+const machine = themePicker({
+  syncDocument: false,
+  defaultValue: "silk",
+  themes: [
+    { value: "silk", label: "Silk" },
+    { value: "neobrut", label: "Neobrut", modes: ["light"] },
+    { value: "nord", label: "Nord" },
+    { value: "synthwave", label: "Synthwave", modes: ["dark"] },
+  ],
+});
+</script>
+
+<div class="flex flex-wrap items-center gap-2" {...machine.getRootProps()}>
+  <template for={machine.getItems()} as={row} key={row.value}>
+    <button
+      class={["bare inline-flex items-center gap-2 rounded-full border border-solid bg-surface px-3 py-1 text-sm text-text transition-colors", { "border-border": machine.getItemState(row).selected === false, "border-primary ring-1 ring-primary": machine.getItemState(row).selected }]}
+      {...machine.getItemProps(row)}
+    >
+      <span class="inline-flex h-3 items-center gap-1" {...machine.getItemSwatchProps(row)}>
+        <span class="h-2 w-2 shrink-0 rounded-full border border-solid border-border bg-surface"></span>
+        <span class="h-2 w-2 shrink-0 rounded-full bg-primary"></span>
+        <span class="h-2 w-2 shrink-0 rounded-full bg-text"></span>
+      </span>
+      <span {...machine.getItemLabelProps(row)}>{row.label}</span>
+      <span class="inline-block i-lucide-check h-3 w-3 text-primary" show={machine.getItemState(row).selected} {...machine.getItemIndicatorProps(row)}></span>
+    </button>
+  </template>
+</div>

package/dist/theme-picker/theme-picker.events.d.ts

@@ -0,0 +1,32 @@
+import { ThemePickerItem } from "./theme-picker.state.js";
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface ThemePickerEvents {
+  "TRIGGER.CLICK": {};
+  "OPEN": {};
+  "CLOSE": {};
+  "HIGHLIGHT.NEXT": {};
+  "HIGHLIGHT.PREV": {};
+  "HIGHLIGHT.FIRST": {};
+  "HIGHLIGHT.LAST": {};
+  "HIGHLIGHT.SET": {
+    readonly value: string;
+  };
+  "ITEM.SELECT": {
+    readonly value: string;
+  };
+  "VALUE.SET": {
+    readonly value: string;
+  };
+  "THEMES.SET": {
+    readonly themes: readonly unknown[] | string;
+  };
+}
+export type ThemePickerEvent = EventUnion<ThemePickerEvents>;
+export type ThemePickerValueChange = {
+  readonly value: string;
+  readonly item: ThemePickerItem;
+};
+export type ThemePickerOpenChange = {
+  readonly open: boolean;
+};
+//# sourceMappingURL=theme-picker.events.d.ts.map

package/dist/theme-picker/theme-picker.events.js

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

package/dist/theme-picker/theme-picker.machine.d.ts

@@ -0,0 +1,5 @@
+import { ThemePickerArgs, ThemePickerContext, ThemePickerState } from "./theme-picker.state.js";
+import { ThemePickerEvents } from "./theme-picker.events.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function themePicker(args?: ThemePickerArgs, authored?: (name: string) => boolean): Machine<ThemePickerContext, ThemePickerEvents, ThemePickerState>;
+//# sourceMappingURL=theme-picker.machine.d.ts.map

package/dist/theme-picker/theme-picker.machine.js

@@ -0,0 +1,65 @@
+import { initial } from "./theme-picker.state.js";
+import { hasEnabled, moveFirst, moveLast, moveNext, movePrev, selectEnabled, selectItem, setHighlight, setThemes, setValue } from "./theme-picker.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/theme-picker/theme-picker.machine.ts
+/** Theme-picker machine: closed/open over two states. */
+function themePicker(args = {}, authored = () => false) {
+	const openMoves = {
+		"HIGHLIGHT.NEXT": {
+			cond: hasEnabled,
+			assign: moveNext
+		},
+		"HIGHLIGHT.PREV": {
+			cond: hasEnabled,
+			assign: movePrev
+		},
+		"HIGHLIGHT.FIRST": {
+			cond: hasEnabled,
+			assign: moveFirst
+		},
+		"HIGHLIGHT.LAST": {
+			cond: hasEnabled,
+			assign: moveLast
+		},
+		"HIGHLIGHT.SET": { assign: setHighlight },
+		"VALUE.SET": { assign: setValue },
+		"THEMES.SET": { assign: setThemes }
+	};
+	return createMachine({
+		id: "theme-picker",
+		initial: "closed",
+		context: initial(args, authored),
+		fields: { value: { event: "VALUE.SET" } },
+		on: { ...openMoves },
+		states: {
+			closed: { on: {
+				...openMoves,
+				"TRIGGER.CLICK": {
+					target: "open",
+					cond: hasEnabled
+				},
+				OPEN: {
+					target: "open",
+					cond: hasEnabled
+				},
+				"ITEM.SELECT": {
+					cond: selectEnabled,
+					assign: selectItem
+				}
+			} },
+			open: { on: {
+				...openMoves,
+				"TRIGGER.CLICK": { target: "closed" },
+				CLOSE: { target: "closed" },
+				"ITEM.SELECT": {
+					target: "closed",
+					cond: selectEnabled,
+					assign: selectItem
+				}
+			} }
+		}
+	});
+}
+export { themePicker };
+
+//# sourceMappingURL=theme-picker.machine.js.map