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

package/dist/tabs/examples/with-badges.html

@@ -0,0 +1,43 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  {
+   value: "tasks",
+   label: "Tasks",
+   content: "Eight open, two blocking Deploy #4821.",
+   badge: "8",
+  },
+  {
+   value: "messages",
+   label: "Messages",
+   content: "Tomas asked about the canary graph.",
+   badge: "5",
+  },
+  {
+   value: "alerts",
+   label: "Alerts",
+   content: "Two firing, both on checkout-api.",
+   badge: "2",
+  },
+ ],
+ defaultValue: "tasks",
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-md flex-col items-center"
+ {...machine.getRootProps()}>
+ <div class="mb-4 flex gap-2" {...machine.getListProps()}>
+  <template for={machine.items} as={row} key={row.value}>
+   <button
+    class="bare flex flex-col items-center gap-1 rounded-md px-4 py-3 text-sm font-medium transition-all aria-[selected=true]:bg-surface aria-[selected=true]:text-text aria-[selected=true]:shadow-sm aria-[selected=false]:text-text-muted"
+    {...machine.getTriggerProps(row)}
+   ><span class="bare grid h-6 w-6 place-items-center rounded-full text-xs font-semibold aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected aria-[selected=false]:bg-surface-sunken aria-[selected=false]:text-text-muted" aria-hidden="true">{row.badge}</span><span>{row.label}</span></button>
+  </template>
+ </div>
+ <template for={machine.items} as={row} key={row.value}>
+  <p class=" text-center text-sm text-text-muted"
+   {...machine.getContentProps(row)}>{row.content}</p>
+ </template>
+</div>

package/dist/tabs/examples/with-icons.html

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  {
+   value: "overview",
+   label: "Overview",
+   content: "Fleet health at a glance.",
+  },
+  {
+   value: "projects",
+   label: "Projects",
+   content: "checkout-api and its preview deploys.",
+  },
+  {
+   value: "packages",
+   label: "Packages",
+   content: "Canary channel and pinned versions.",
+  },
+ ],
+ defaultValue: "overview",
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-md flex-col items-center"
+ {...machine.getRootProps()}>
+ <div
+  class="relative mb-4 flex w-fit gap-8 border-b border-solid border-border"
+  {...machine.getListProps()}>
+  <template for={machine.items} as={row} key={row.value}>
+   <button
+    class="bare flex items-center gap-2 border-b-2 border-solid px-1 py-2 text-sm font-medium transition-colors aria-[selected=true]:border-primary aria-[selected=true]:text-text aria-[selected=false]:border-transparent aria-[selected=false]:text-text-muted"
+    {...machine.getTriggerProps(row)}
+   ><span class="i-lucide-house text-sm" aria-hidden="true" show={row.value === "overview"}></span><span class="i-lucide-folder-open text-sm" aria-hidden="true" show={row.value === "projects"}></span><span class="i-lucide-package text-sm" aria-hidden="true" show={row.value === "packages"}></span><span>{row.label}</span></button>
+  </template>
+ </div>
+ <template for={machine.items} as={row} key={row.value}>
+  <p class=" text-center text-sm text-text-muted"
+   {...machine.getContentProps(row)}>{row.content}</p>
+ </template>
+</div>

package/dist/tabs/tabs.events.d.ts

@@ -0,0 +1,19 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+/**
+ * The tabs' events, as a MAP: the contract with the outside. The spec's
+ * `on` map is typed over it, so a transition's KEY narrows the event it
+ * receives — an assign reads its payload with no guard and no cast.
+ */
+export interface TabsEvents {
+  "VALUE.SET": {
+    value: string;
+  };
+  "TAB.SELECT": {
+    value: string;
+  };
+}
+export type TabsEvent = EventUnion<TabsEvents>;
+export type TabsValueChange = {
+  readonly value: string;
+};
+//# sourceMappingURL=tabs.events.d.ts.map

package/dist/tabs/tabs.events.js

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

package/dist/tabs/tabs.machine.d.ts

@@ -0,0 +1,5 @@
+import { TabsArgs, TabsContext, TabsState } from "./tabs.state.js";
+import { TabsEvents } from "./tabs.events.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function tabs(args: TabsArgs | undefined, authored: (name: string) => boolean): Machine<TabsContext, TabsEvents, TabsState>;
+//# sourceMappingURL=tabs.machine.d.ts.map

package/dist/tabs/tabs.machine.js

@@ -0,0 +1,54 @@
+import { initial, parseItems } from "./tabs.state.js";
+import { selectTab, setValue } from "./tabs.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/tabs/tabs.machine.ts
+/** Tabs machine: selection is component state, not platform state. */
+function tabs(args = {}, authored) {
+	return createMachine({
+		id: "tabs",
+		initial: "idle",
+		context: initial(args, authored),
+		/**
+		* 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 rows are the machine's own configuration: they never change
+		* while the tabs live, so the host may not write them.
+		*/
+		fields: {
+			value: { event: "VALUE.SET" },
+			items: { parse: parseItems },
+			activationMode: {},
+			loopFocus: {},
+			deselectable: {},
+			composite: {}
+		},
+		states: {
+			idle: { on: {
+				"VALUE.SET": {
+					target: "idle",
+					assign: setValue
+				},
+				"TAB.SELECT": {
+					target: "idle",
+					assign: selectTab
+				}
+			} },
+			focused: { on: {
+				"VALUE.SET": {
+					target: "focused",
+					assign: setValue
+				},
+				"TAB.SELECT": {
+					target: "focused",
+					assign: selectTab
+				}
+			} }
+		}
+	});
+}
+export { tabs };
+
+//# sourceMappingURL=tabs.machine.js.map

package/dist/tabs/tabs.presentation.d.ts

@@ -0,0 +1,83 @@
+import { TabsArgs, TabsContext, TabsItem, TabsState } from "./tabs.state.js";
+import { TabsEvents } from "./tabs.events.js";
+import { ApiOf, ViewFor } from "@spinjs/runtime";
+export declare const def: {
+  name: string;
+  machine: (args: TabsArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<TabsContext, TabsEvents, TabsState>;
+  start: "idle";
+  parts: {
+    root: {};
+    list: {
+      attrs: (scope: ViewFor<TabsContext, TabsEvents, TabsState>) => {
+        role: string;
+      };
+    };
+    trigger: {
+      attrs: (scope: ViewFor<TabsContext, TabsEvents, TabsState> & {
+        readonly slot: TabsItem;
+      }) => {
+        tabindex: number;
+        onClick: () => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        id: string;
+        type: string;
+        role: string;
+      };
+    };
+    content: {
+      attrs: (scope: ViewFor<TabsContext, TabsEvents, TabsState> & {
+        readonly slot: TabsItem;
+      }) => {
+        hidden: boolean | undefined;
+        id: string;
+        role: string;
+      };
+    };
+  };
+  commands: {
+    select: {
+      event: ([value]: [value: string]) => {
+        type: "TAB.SELECT";
+        value: string;
+      };
+    };
+  };
+  readers: {
+    value: {
+      read: (context: TabsContext) => string;
+    };
+    items: {
+      read: (context: TabsContext) => readonly TabsItem[];
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: TabsContext) => string[];
+      detail: (watched: readonly [string]) => {
+        value: string;
+      };
+    };
+  };
+  settled: ({ event, focus }: {
+    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly before: {
+      readonly context: TabsContext;
+      readonly state: TabsState;
+    };
+    readonly after: {
+      readonly context: TabsContext;
+      readonly state: TabsState;
+    };
+    readonly props: Record<string, unknown>;
+    readonly root: () => Element;
+    readonly id: (part: string, slot?: unknown) => string;
+    readonly focus: (part: string, slot?: unknown) => void;
+    readonly measure: (part: string, slot?: unknown) => DOMRect | null;
+    readonly send: (event: import("@spinjs/runtime").AnyEvent) => void;
+  }) => void;
+};
+export type TabsApi = ApiOf<typeof def>;
+export declare const tabs: import("@spinjs/runtime").DefinedComponent<TabsApi, TabsArgs>;
+export type { TabsArgs, TabsItem, TabsState };
+//# sourceMappingURL=tabs.presentation.d.ts.map

package/dist/tabs/tabs.presentation.js

@@ -0,0 +1,94 @@
+import { ROVING_KEYS } from "../shared/keyboard.js";
+import { tabs as tabs$1 } from "./tabs.machine.js";
+import { ariaControls, ariaLabelledBy, ariaOrientation, defineComponent, optionRow } from "@spinjs/runtime";
+// src/tabs/tabs.presentation.ts
+const enabledValues = (context) => context.items.map((item) => item.value);
+const neighbor = (context, value, direction) => {
+	const items = context.items;
+	const idx = items.findIndex((item) => item.value === value);
+	if (idx === -1) return null;
+	const next = idx + direction;
+	if (next < 0 || next >= items.length) return context.loopFocus ? items[(next + items.length) % items.length]?.value ?? null : null;
+	return items[next]?.value ?? null;
+};
+const def = {
+	name: "tabs",
+	machine: (args, authored) => tabs$1(args, authored),
+	start: "idle",
+	parts: {
+		root: {},
+		list: { attrs: (scope) => ({
+			role: "tablist",
+			...ariaOrientation(scope.context.orientation === "vertical" ? "vertical" : void 0)
+		}) },
+		trigger: { attrs: (scope) => {
+			const row = scope.slot;
+			const isSelected = scope.context.value === row.value;
+			return {
+				id: scope.id("trigger", row.value),
+				type: "button",
+				role: "tab",
+				...optionRow({ selected: isSelected ? "true" : "false" }),
+				...ariaControls(scope, {
+					part: "content",
+					slot: row.value
+				}),
+				tabindex: isSelected ? 0 : -1,
+				onClick: () => {
+					scope.send({
+						type: "TAB.SELECT",
+						value: row.value
+					});
+				},
+				onKeydown: (event) => {
+					if (event.defaultPrevented) return;
+					const intent = ROVING_KEYS[event.key];
+					if (intent === void 0) return;
+					const order = enabledValues(scope.context);
+					const target = intent.intent === "next" ? neighbor(scope.context, row.value, 1) : intent.intent === "prev" ? neighbor(scope.context, row.value, -1) : intent.intent === "first" ? order[0] ?? null : order[order.length - 1] ?? null;
+					if (target === null) return;
+					event.preventDefault();
+					scope.send({
+						type: "TAB.SELECT",
+						value: target
+					});
+				}
+			};
+		} },
+		content: { attrs: (scope) => {
+			const row = scope.slot;
+			const isSelected = scope.context.value === row.value;
+			return {
+				id: scope.id("content", row.value),
+				role: "tabpanel",
+				...ariaLabelledBy(scope, {
+					part: "trigger",
+					slot: row.value
+				}),
+				hidden: isSelected ? void 0 : true
+			};
+		} }
+	},
+	commands: { select: { event: ([value]) => ({
+		type: "TAB.SELECT",
+		value
+	}) } },
+	readers: {
+		value: { read: (context) => context.value },
+		items: { read: (context) => context.items }
+	},
+	events: { "value-change": {
+		prop: "onValueChange",
+		watch: (context) => [context.value],
+		detail: (watched) => ({ value: watched[0] })
+	} },
+	settled: ({ event, focus }) => {
+		if (event.type !== "TAB.SELECT") return;
+		const value = event["value"];
+		if (typeof value === "string") focus("trigger", value);
+	}
+};
+const tabs = defineComponent(def);
+export { def, tabs };
+
+//# sourceMappingURL=tabs.presentation.js.map

package/dist/tabs/tabs.state.d.ts

@@ -0,0 +1,61 @@
+export interface TabsItem {
+  readonly value: string;
+  readonly label: string;
+  readonly content: string;
+  readonly badge?: string;
+}
+export type TabsState = "idle" | "focused";
+export interface TabsContext {
+  value: string;
+  defaultValue: string;
+  /** Configuration-that-never-changes: the shaped rows, supplied once at
+   * instantiation. Bags read this for keyboard navigation. */
+  items: readonly TabsItem[];
+  orientation: "horizontal" | "vertical";
+  activationMode: "automatic" | "manual";
+  loopFocus: boolean;
+  deselectable: boolean;
+  composite: boolean;
+}
+/** A row as the host set it: the fields the host wrote, narrowed to their
+ * own types. `label` may be absent — transport does not invent labels,
+ * `initial` falls back to the value. */
+export interface TabsRow {
+  readonly value?: string;
+  readonly label?: string;
+  readonly content?: string;
+  readonly badge?: string;
+}
+/**
+ * The tabs' arguments: the values the host may set.
+ *
+ * The twin (`defaultValue`) is resolved by the framework before the factory
+ * is called, so the machine only ever sees the live value; the machine
+ * keeps the twin's own text in its context, so it also reads it when the
+ * factory is called on its own.
+ */
+export interface TabsArgs {
+  items?: readonly TabsRow[];
+  value?: string;
+  defaultValue?: string;
+  orientation?: "horizontal" | "vertical";
+  activationMode?: "automatic" | "manual";
+  loopFocus?: boolean;
+  deselectable?: boolean;
+  composite?: boolean;
+}
+/** Shape raw items into rows: label-from-value, content-to-empty, and a row
+ * without a usable value drops out. Shared by `initial` and the field
+ * contract, so a host write parses exactly like the seed. */
+export declare function parseItems(raw: unknown): TabsItem[];
+/**
+ * Shape the arguments into the machine's initial context.
+ * Pure shaping only: the rows (label-from-value, content-to-empty, and a
+ * row without a usable value drops out), and the first-selected fallback
+ * (the host's write, then `defaultValue`, then the first row).
+ *
+ * The seed twin (`defaultValue`) is the host's write of the selection —
+ * the framework resolved it into the args — so it counts as a write too.
+ */
+export declare function initial(args: TabsArgs | undefined, authored: (name: string) => boolean): TabsContext;
+//# sourceMappingURL=tabs.state.d.ts.map

package/dist/tabs/tabs.state.js

@@ -0,0 +1,53 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/tabs/tabs.state.ts
+/** Shape raw items into rows: label-from-value, content-to-empty, and a row
+* without a usable value drops out. Shared by `initial` and the field
+* contract, so a host write parses exactly like the seed. */
+function parseItems(raw) {
+	const items = [];
+	const list = Array.isArray(raw) ? raw : [];
+	for (const entry of list) {
+		if (typeof entry !== "object" || entry === null) continue;
+		const row = entry;
+		const value = row["value"];
+		if (typeof value !== "string" || value.length === 0) continue;
+		const label = row["label"];
+		const content = row["content"];
+		const badge = row["badge"];
+		items.push({
+			value,
+			label: typeof label === "string" ? label : value,
+			content: typeof content === "string" ? content : "",
+			...typeof badge === "string" ? { badge } : {}
+		});
+	}
+	return items;
+}
+/**
+* Shape the arguments into the machine's initial context.
+* Pure shaping only: the rows (label-from-value, content-to-empty, and a
+* row without a usable value drops out), and the first-selected fallback
+* (the host's write, then `defaultValue`, then the first row).
+*
+* The seed twin (`defaultValue`) is the host's write of the selection —
+* the framework resolved it into the args — so it counts as a write too.
+*/
+function initial(args = {}, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args.defaultValue !== void 0;
+	const items = parseItems(args.items ?? []);
+	const hostValue = args.value ?? "";
+	const defaultValue = args.defaultValue ?? "";
+	return {
+		value: written("value") ? hostValue || defaultValue || items[0]?.value || "" : items[0]?.value || "",
+		defaultValue,
+		items,
+		orientation: args.orientation ?? "horizontal",
+		activationMode: args.activationMode ?? "automatic",
+		loopFocus: args.loopFocus ?? true,
+		deselectable: args.deselectable ?? false,
+		composite: args.composite ?? true
+	};
+}
+export { initial, parseItems };
+
+//# sourceMappingURL=tabs.state.js.map

package/dist/tabs/tabs.transitions.d.ts

@@ -0,0 +1,8 @@
+import { TabsContext } from "./tabs.state.js";
+import { TabsEvents } from "./tabs.events.js";
+import { AssignFor } from "@spinjs/runtime/fsm";
+type TabsAssign<K extends keyof TabsEvents = keyof TabsEvents> = AssignFor<TabsContext, TabsEvents, K>;
+export declare const setValue: TabsAssign<"VALUE.SET">;
+export declare const selectTab: TabsAssign<"TAB.SELECT">;
+export {};
+//# sourceMappingURL=tabs.transitions.d.ts.map

package/dist/tabs/tabs.transitions.js

@@ -0,0 +1,6 @@
+// src/tabs/tabs.transitions.ts
+const setValue = (_ctx, event) => ({ value: event.value });
+const selectTab = (ctx, event) => event.value.length === 0 || event.value === ctx.value ? {} : { value: event.value };
+export { selectTab, setValue };
+
+//# sourceMappingURL=tabs.transitions.js.map

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

@@ -0,0 +1,43 @@
+<script lang="ts">
+import { tags } from "../tags.presentation.js";
+
+const machine = tags({
+ defaultValue: '["TypeScript","React","CSS"]',
+ placeholder: "Add a skill…",
+});
+</script>
+<div class="w-full" {...machine.getRootProps()}>
+ <label
+  class={["mb-1 block text-xs font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+  {...machine.getLabelProps()}>Skills</label>
+ <div
+  class={["flex flex-wrap items-center gap-1 rounded-md border border-solid border-border bg-surface-raised p-1 transition-shadow duration-fast ease-decelerate", { "ring-2 ring-border-strong": machine.focused }]}
+  {...machine.getControlProps()}>
+  <template for={machine.getTags()} as={row}
+   key={row.value + ":" + row.occurrence}>
+   <span
+    class={["inline-flex items-center gap-1 rounded-sm border border-solid border-border bg-surface py-1 pl-2 pr-1 text-xs text-text transition-colors duration-fast ease-decelerate", { "border-primary text-primary": machine.getItemState(row).highlighted }]}
+    {...machine.getItemProps(row)}>
+    <span class="inline-flex items-center gap-1"
+     {...machine.getItemPreviewProps(row)}>
+     <span class="truncate"
+      {...machine.getItemTextProps(row)}>{row.value}</span>
+     <button
+      class={["bare ghost icon s-sm", { "text-primary": machine.getItemState(row).highlighted }]}
+      {...machine.getItemDeleteTriggerProps(row)}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+    </span>
+    <input
+   class="bare w-20 rounded-sm px-1 py-1 text-xs"
+   {...machine.getItemInputProps(row)} />
+   </span>
+  </template>
+  <input
+  class="bare min-w-16 flex-1 bg-transparent py-1 text-xs outline-none "
+  {...machine.getInputProps()} />
+  <button aria-label="Clear tags"
+   class="ghost icon s-sm"
+   {...machine.getClearTriggerProps()}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+ </div>
+ <input {...machine.getHiddenInputProps()} />
+ <div class="visually-hidden" {...machine.getLiveRegionProps()}></div>
+</div>

package/dist/tags-input/examples/with-combobox.html

@@ -0,0 +1,64 @@
+<script lang="ts">
+import { tags } from "../tags.presentation.js";
+import { combobox } from "../../combobox/combobox.presentation.js";
+
+const machine_tags = tags({});
+const machine_combobox = combobox({items: [{"value":"react","label":"React"},{"value":"solid","label":"Solid"},{"value":"svelte","label":"Svelte"},{"value":"vue","label":"Vue"}]});
+</script>
+<div class="w-full">
+ <label class="mb-1 block text-xs font-medium text-text"
+  {...machine_tags.getLabelProps()}>Frameworks</label>
+ <div
+  class="flex flex-wrap items-center gap-1 rounded-md border border-solid border-border bg-surface-raised p-1"
+  {...machine_tags.getControlProps()}>
+  <template for={machine_tags.getTags()} as={row}
+   key={row.value + ":" + row.occurrence}>
+   <span
+    class={["inline-flex items-center gap-1 rounded-sm border border-solid border-border bg-surface py-1 pl-2 pr-1 text-xs text-text", { "border-primary text-primary": machine_tags.getItemState(row).highlighted }]}
+    {...machine_tags.getItemProps(row)}>
+    <span class="inline-flex items-center gap-1"
+     {...machine_tags.getItemPreviewProps(row)}>
+     <span class="truncate"
+      {...machine_tags.getItemTextProps(row)}>{row.value}</span>
+     <button
+      class="bare inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-text-muted hover:text-text"
+      {...machine_tags.getItemDeleteTriggerProps(row)}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+    </span>
+    <input
+   class="bare w-20 rounded-sm px-1 py-1 text-xs"
+   {...machine_tags.getItemInputProps(row)} />
+   </span>
+  </template>
+  <div class="relative min-w-16 flex-1" {...machine_combobox.getRootProps()}>
+   <input
+  class="w-full border-0 bg-transparent py-1 text-xs"
+  {...machine_combobox.getInputProps()} />
+   <button aria-hidden="true" tabindex="-1" class="hidden"
+    {...machine_combobox.getClearTriggerProps()}></button>
+   <div class="absolute left-0 top-full z-dropdown mt-1 w-full origin-top"
+    {...machine_combobox.getPositionerProps()}>
+    <div
+     class="overflow-hidden rounded-lg border border-solid border-border bg-surface-raised shadow-lg"
+     {...machine_combobox.getContentProps()}>
+     <div class="max-h-60 overflow-y-auto p-1"
+      {...machine_combobox.getListProps()}>
+      <template for={machine_combobox.getBlocks()} as={block}
+       key={block.id}>
+       <template for={machine_combobox.getRows(block)} as={brow}
+        key={brow.value}>
+        <div
+         class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-xs text-text", { "bg-surface": machine_combobox.getItemState(brow).highlighted }]}
+         show={brow.label.toLowerCase().indexOf(machine_combobox.inputValue.toLowerCase()) !== -1}
+         {...machine_combobox.getItemProps(brow)}>{brow.label}</div>
+       </template>
+      </template>
+     </div>
+    </div>
+   </div>
+  </div>
+  <button aria-label="Clear tags"
+   class="bare inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-text-muted hover:text-text"
+   {...machine_tags.getClearTriggerProps()}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+ </div>
+ <input {...machine_tags.getHiddenInputProps()} />
+</div>

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

@@ -0,0 +1,77 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface TagsEvents {
+  "FOCUS": {};
+  "POINTER_DOWN": {};
+  "TYPE": {
+    value: string;
+  };
+  "BLUR": {};
+  "ENTER": {};
+  "DELIMITER_KEY": {};
+  "ARROW_LEFT": {
+    caretAtStart: boolean;
+  };
+  "ARROW_RIGHT": {
+    caretAtStart: boolean;
+  };
+  "ARROW_DOWN": {};
+  "ESCAPE": {};
+  "BACKSPACE": {
+    caretAtStart: boolean;
+  };
+  "DELETE": {
+    caretAtStart: boolean;
+  };
+  "PASTE": {
+    value: string;
+  };
+  "DOUBLE_CLICK_TAG": {
+    index: number;
+  };
+  "POINTER_DOWN_TAG": {
+    index: number;
+  };
+  "CLICK_DELETE_TAG": {
+    index: number;
+  };
+  "SET_INPUT_VALUE": {
+    value: string;
+  };
+  "SET_VALUE": {
+    value: readonly string[];
+  };
+  "SET_VALUE_AT_INDEX": {
+    index: number;
+    value: string;
+  };
+  "CLEAR_TAG": {
+    index: number;
+  };
+  "CLEAR_VALUE": {};
+  "ADD_TAG": {
+    value?: string;
+  };
+  "EXTERNAL_BLUR": {};
+  "TAG_INPUT_TYPE": {
+    value: string;
+  };
+  "TAG_INPUT_ESCAPE": {};
+  "TAG_INPUT_BLUR": {
+    relatedToInput: boolean;
+  };
+  "TAG_INPUT_ENTER": {};
+}
+export type TagsEvent = EventUnion<TagsEvents>;
+export interface TagsValueChange {
+  readonly value: readonly string[];
+}
+export interface TagsInputValueChange {
+  readonly inputValue: string;
+}
+export interface TagsHighlightChange {
+  readonly highlightedValue: number | null;
+}
+export interface TagsValueInvalid {
+  readonly reason: "invalidTag" | "rangeOverflow";
+}
+//# sourceMappingURL=tags.events.d.ts.map

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

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

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

@@ -0,0 +1,6 @@
+import { TagsEvent, TagsEvents } from "./tags.events.js";
+import { SanitizeValue, TagsArgs, TagsContext, TagsLog, TagsState, TagsValidateArgs, ValidateTag, initial, sameTags, stringsOf } from "./tags.state.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function tags(args?: TagsArgs, authored?: (name: string) => boolean): Machine<TagsContext, TagsEvents, TagsState>;
+export { type SanitizeValue, type TagsArgs, type TagsContext, type TagsEvent, type TagsEvents, type TagsLog, type TagsValidateArgs, type ValidateTag, initial, sameTags, stringsOf };
+//# sourceMappingURL=tags.machine.d.ts.map