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

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

@@ -0,0 +1,63 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/pin-input/pin-input.state.ts
+const DEFAULT_COUNT = 4;
+const 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);
+};
+function initial(args, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const count = typeof args.count === "number" && Number.isFinite(args.count) ? Math.max(0, Math.trunc(args.count)) : DEFAULT_COUNT;
+	const chars = written("value") ? parseChars(args.value) : [];
+	const pinType = args.type;
+	return {
+		value: fill(chars, count),
+		focusedIndex: args.autoFocus === true ? 0 : -1,
+		count,
+		dir: args.dir === "rtl" ? "rtl" : "ltr",
+		disabled: args.disabled === true,
+		readOnly: args.readOnly === true,
+		invalid: authored("invalid") ? args.invalid === 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,
+		type: pinType === "alphabetic" || pinType === "alphanumeric" ? pinType : "numeric",
+		mask: args.mask === true,
+		otp: args.otp === true,
+		placeholder: typeof args.placeholder === "string" ? args.placeholder : "○",
+		pattern: typeof args.pattern === "string" ? args.pattern : "",
+		translations: args.translations,
+		sanitizeValue: args.sanitizeValue,
+		blurOnComplete: args.blurOnComplete === true,
+		autoSubmit: args.autoSubmit === true,
+		autoFocus: args.autoFocus === true
+	};
+}
+/**
+* The value padded (or truncated) to the cell count. A cell the value does
+* not reach reads as the empty string.
+*/
+function fill(value, count) {
+	const length = count || value.length;
+	return Array.from({ length }).fill("").map((_char, index) => value[index] || "");
+}
+function pinView(value, count) {
+	const chars = fill(value, count);
+	const filled = chars.filter((char) => char.trim() !== "").length;
+	return {
+		chars,
+		length: chars.length,
+		filled,
+		complete: chars.length === filled,
+		asString: chars.join("")
+	};
+}
+function getNextValue(current, next) {
+	let nextValue = next;
+	if (current[0] === next[0]) nextValue = next[1] ?? "";
+	else if (current[0] === next[1]) nextValue = next[0] ?? "";
+	const chars = nextValue.split("");
+	return chars[chars.length - 1] ?? "";
+}
+export { fill, getNextValue, initial, pinView };
+
+//# sourceMappingURL=pin-input.state.js.map

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

@@ -0,0 +1,10 @@
+import { PinInputContext } from "./pin-input.state.js";
+export declare const clearFocusedValue: (ctx: PinInputContext) => Partial<PinInputContext>;
+export declare const setFocusedIndex: (ctx: PinInputContext, event: {
+  index: number;
+}) => Partial<PinInputContext>;
+export declare const setFocusIndexToFirst: () => Partial<PinInputContext>;
+export declare const advanceFocusedIndex: (ctx: PinInputContext) => Partial<PinInputContext>;
+export declare const setPrevFocusedIndex: (ctx: PinInputContext) => Partial<PinInputContext>;
+export declare const hasValue: (ctx: PinInputContext) => boolean;
+//# sourceMappingURL=pin-input.transitions.d.ts.map

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

@@ -0,0 +1,22 @@
+import { pinView } from "./pin-input.state.js";
+// src/pin-input/pin-input.transitions.ts
+const viewOf = (ctx) => pinView(ctx.value, ctx.count);
+const clearFocusedValue = (ctx) => {
+	if (ctx.focusedIndex === -1) return {};
+	const value = [...viewOf(ctx).chars];
+	value.splice(ctx.focusedIndex, 1);
+	value.push("");
+	return { value };
+};
+const setFocusedIndex = (ctx, event) => {
+	const view = viewOf(ctx);
+	const maxIndex = Math.min(view.filled, view.length - 1);
+	return { focusedIndex: Math.min(event.index, maxIndex) };
+};
+const setFocusIndexToFirst = () => ({ focusedIndex: 0 });
+const advanceFocusedIndex = (ctx) => ({ focusedIndex: Math.min(ctx.focusedIndex + 1, viewOf(ctx).length - 1) });
+const setPrevFocusedIndex = (ctx) => ({ focusedIndex: Math.max(ctx.focusedIndex - 1, 0) });
+const hasValue = (ctx) => (viewOf(ctx).chars[ctx.focusedIndex] ?? "") !== "";
+export { advanceFocusedIndex, clearFocusedValue, hasValue, setFocusIndexToFirst, setFocusedIndex, setPrevFocusedIndex };
+
+//# sourceMappingURL=pin-input.transitions.js.map

package/dist/popover/examples/basic.html

@@ -0,0 +1,15 @@
+<script lang="ts">
+import { popover } from "../popover.controller-def.js";
+
+const ctl = popover();
+</script>
+
+<button {...ctl.getTriggerProps()}
+  class="secondary s-sm transition-colors hover:bg-surface">Open popover</button>
+
+<popover {...ctl.getContentProps()}
+  class="m-0 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right">
+  <p class="text-sm font-medium text-text">Share this page</p>
+  <p
+    class="text-sm text-text-muted">Copy the link below to send it to a friend.</p>
+</popover>

package/dist/popover/examples/feedback.html

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { popover } from "../popover.controller-def.js";
+
+const ctl = popover();
+</script>
+
+<button {...ctl.getTriggerProps()}
+  class="inline-flex items-center gap-2 secondary s-sm transition-colors hover:bg-surface">
+  <span class="i-lucide-message-square text-sm" aria-hidden="true"></span>
+  Feedback
+</button>
+
+<popover {...ctl.getContentProps()}
+  class="m-0 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right max-w-[20rem]">
+  <p class="text-sm font-medium text-text">Send us feedback</p>
+  <p class="text-sm text-text-muted">Tell us what you think.</p>
+</popover>

package/dist/popover/examples/notifications.html

@@ -0,0 +1,21 @@
+<script lang="ts">
+import { popover } from "../popover.controller-def.js";
+
+const ctl = popover();
+</script>
+
+<button {...ctl.getTriggerProps()}
+  class="inline-flex items-center gap-2 secondary s-sm transition-colors hover:bg-surface">
+  <span class="i-lucide-bell text-sm" aria-hidden="true"></span>
+  Notifications
+</button>
+
+<popover {...ctl.getContentProps()}
+  class="m-0 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right max-w-[20rem]">
+  <p class="text-sm font-medium text-text">Notifications</p>
+  <ul class="flow-list stack-xs text-sm text-text-muted">
+    <li>Maya liked your post</li>
+    <li>David started following you</li>
+    <li>Lisa invited you to a workspace</li>
+  </ul>
+</popover>

package/dist/popover/examples/settings.html

@@ -0,0 +1,39 @@
+<script lang="ts">
+import { popover } from "../popover.controller-def.js";
+
+const ctl = popover();
+</script>
+
+<button {...ctl.getTriggerProps()}
+  class="inline-flex items-center justify-center ghost icon s-sm transition-colors hover:bg-surface">
+  <span class="i-lucide-settings text-sm" aria-hidden="true"></span>
+  <span class="sr-only">Settings</span>
+</button>
+
+<popover {...ctl.getContentProps()}
+  class="m-0 rounded-lg border border-solid border-border bg-surface-raised shadow-lg position-area-bottom-span-right w-64 max-w-[16rem]">
+  <div class="border-b border-solid border-border p-3">
+    <p class="font-medium text-sm text-text">Settings</p>
+  </div>
+  <div class="stack-xs p-2">
+    <label
+      class="flex cursor-pointer items-center justify-between rounded-md px-3 py-2 hover:bg-surface">
+      <span
+        class="flex items-center gap-2 text-sm text-text"><span class="i-lucide-moon text-sm text-text-muted" aria-hidden="true"></span>Dark Mode</span>
+      <input type="checkbox" role="switch" data-setting="dark" />
+    </label>
+    <label
+      class="flex cursor-pointer items-center justify-between rounded-md px-3 py-2 hover:bg-surface">
+      <span
+        class="flex items-center gap-2 text-sm text-text"><span class="i-lucide-bell text-sm text-text-muted" aria-hidden="true"></span>Notifications</span>
+      <input type="checkbox" role="switch" checked
+        data-setting="notifications" />
+    </label>
+    <label
+      class="flex cursor-pointer items-center justify-between rounded-md px-3 py-2 hover:bg-surface">
+      <span
+        class="flex items-center gap-2 text-sm text-text"><span class="i-lucide-shield text-sm text-text-muted" aria-hidden="true"></span>Two-Factor Auth</span>
+      <input type="checkbox" role="switch" checked data-setting="twofactor" />
+    </label>
+  </div>
+</popover>

package/dist/popover/examples/share.html

@@ -0,0 +1,18 @@
+<script lang="ts">
+import { popover } from "../popover.controller-def.js";
+
+const ctl = popover();
+</script>
+
+<button {...ctl.getTriggerProps()}
+  class="inline-flex items-center gap-2 secondary s-sm transition-colors hover:bg-surface">
+  <span class="i-lucide-share text-sm" aria-hidden="true"></span>
+  Share
+</button>
+
+<popover {...ctl.getContentProps()}
+  class="m-0 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg position-area-bottom-span-right max-w-[20rem]">
+  <p class="text-sm font-medium text-text">Share this page</p>
+  <p
+    class="text-sm text-text-muted">Copy the link below to send it to a friend.</p>
+</popover>

package/dist/popover/examples/user.html

@@ -0,0 +1,43 @@
+<script lang="ts">
+import { popover } from "../popover.controller-def.js";
+
+const ctl = popover();
+</script>
+
+<button {...ctl.getTriggerProps()}
+  aria-label="Sarah Chen's profile"
+  class="bare relative inline-flex items-center justify-center rounded-full transition-colors hover:bg-surface">
+  <span
+    class="grid h-8 w-8 place-items-center rounded-full bg-primary text-xs font-semibold text-on-primary"
+    aria-hidden="true">SC</span>
+  <span
+    class="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-solid border-surface-raised bg-semantic-success"
+    aria-hidden="true"></span>
+</button>
+
+<popover {...ctl.getContentProps()}
+  class="m-0 rounded-lg border border-solid border-border bg-surface-raised shadow-lg position-area-bottom-span-right w-full max-w-[18rem]">
+  <div class="border-b border-solid border-border p-3">
+    <div class="flex items-center gap-3">
+      <span
+        class="relative grid h-10 w-10 shrink-0 place-items-center rounded-full bg-primary text-sm font-semibold text-on-primary"
+        aria-hidden="true">SC<span class="absolute -bottom-1 -right-1 h-3 w-3 rounded-full border-2 border-solid border-surface-raised bg-semantic-success"></span></span>
+      <div class="min-w-0 flex-1">
+        <strong class="text-sm text-text">Sarah Chen</strong>
+        <p class="text-xs text-text-muted">Product Designer</p>
+      </div>
+    </div>
+  </div>
+  <div class="stack-sm p-3 text-sm text-text-muted">
+    <p
+      class="flex items-center gap-2"><span class="i-lucide-mail text-sm" aria-hidden="true"></span>sarah.chen@example.com</p>
+    <p
+      class="flex items-center gap-2"><span class="i-lucide-map-pin text-sm" aria-hidden="true"></span>San Francisco, CA</p>
+  </div>
+  <div class="flex gap-2 border-t border-solid border-border p-3">
+    <button
+      class="flex-1 s-sm">Message</button>
+    <button
+      class="flex-1 secondary s-sm">View Profile</button>
+  </div>
+</popover>

package/dist/popover/popover.controller-def.d.ts

@@ -0,0 +1,39 @@
+import { ControllerDef } from "@spinjs/runtime";
+/**
+ * Popover on the platform: the browser owns open/closed, the top layer,
+ * light-dismiss, and Escape. There is no machine here — the `attach`
+ * wires the native popover behavior to the declared commands and events.
+ *
+ * Positioning is platform-owned too: the panel's `position-area` places it
+ * against its invoker (the implicit anchor needs no names), and the
+ * recipe's utilities carry the surface. The popover never reports where it
+ * landed — a recipe that needs the resolved placement wants the measured
+ * controller, not this one.
+ *
+ * The api is what markup spreads and what the app-controller hook reaches:
+ * prop bags for the trigger and the panel, imperative commands that call
+ * the native methods, and `open` as a reactive read for hosts that render
+ * from state.
+ */
+export interface PopoverOpenChange {
+  readonly open: boolean;
+}
+export declare const popoverManifest: {
+  readonly parts: readonly [];
+  readonly slots: readonly [];
+  readonly readers: readonly ["open"];
+  readonly methods: readonly ["show", "hide", "toggle", "getTriggerProps", "getContentProps"];
+};
+export interface PopoverApi {
+  readonly open: boolean;
+  show(): void;
+  hide(): void;
+  toggle(): void;
+  getTriggerProps(): Record<string, unknown>;
+  getContentProps(): Record<string, unknown>;
+}
+export declare function attachPopover(el: Element): PopoverApi;
+export declare const popover: ControllerDef & {
+  attach(el: Element): PopoverApi;
+} & (() => PopoverApi);
+//# sourceMappingURL=popover.controller-def.d.ts.map

package/dist/popover/popover.controller-def.js

@@ -0,0 +1,74 @@
+import { defineController } from "@spinjs/runtime";
+// src/popover/popover.controller-def.ts
+const popoverManifest = {
+	parts: [],
+	slots: [],
+	readers: ["open"],
+	methods: [
+		"show",
+		"hide",
+		"toggle",
+		"getTriggerProps",
+		"getContentProps"
+	]
+};
+function panelOf(el) {
+	return el.querySelector("[popover]");
+}
+let instanceCounter = 0;
+function attachPopover(el) {
+	const readOpen = () => panelOf(el)?.matches(":popover-open") ?? false;
+	const emit = (open) => {
+		el.dispatchEvent(new CustomEvent("open-change", {
+			detail: { open },
+			bubbles: true
+		}));
+	};
+	el.addEventListener("toggle", (event) => {
+		emit(event.newState === "open");
+	}, true);
+	const instance = el.id !== "" ? el.id : `popover-${++instanceCounter}`;
+	const triggerId = `${instance}:trigger`;
+	const panelId = `${instance}:panel`;
+	return {
+		get open() {
+			return readOpen();
+		},
+		show: () => panelOf(el)?.showPopover(),
+		hide: () => panelOf(el)?.hidePopover(),
+		toggle: () => panelOf(el)?.togglePopover(),
+		getTriggerProps: () => ({
+			id: triggerId,
+			"data-scope": "popover",
+			"data-part": "trigger",
+			popovertarget: panelId,
+			"aria-expanded": readOpen(),
+			"aria-details": panelId,
+			"aria-haspopup": "dialog",
+			"data-state": readOpen() ? "open" : "closed"
+		}),
+		getContentProps: () => ({
+			id: panelId,
+			"data-scope": "popover",
+			"data-part": "content",
+			popover: "",
+			role: "dialog",
+			"data-state": readOpen() ? "open" : "closed"
+		})
+	};
+}
+const popover = defineController({
+	attach: attachPopover,
+	commands: [
+		"show",
+		"hide",
+		"toggle"
+	],
+	events: { "open-change": {
+		on: "onOpenChange",
+		detail: (change) => ({ open: change.open })
+	} }
+});
+export { attachPopover, popover, popoverManifest };
+
+//# sourceMappingURL=popover.controller-def.js.map

package/dist/rating-group/examples/basic.html

@@ -0,0 +1,39 @@
+<script lang="ts">
+import { ratingGroup } from "../rating-group.presentation.js";
+
+const machine = ratingGroup({ value: "3.5", allowHalf: true });
+</script>
+
+<div class="mx-auto w-full max-w-[20rem] text-center" {...machine.getRootProps()}>
+  <div class="mb-1 text-lg font-semibold text-text" {...machine.getLabelProps()}>Product Rating</div>
+  <div class="mb-4 text-sm text-text-muted">How would you rate this product?</div>
+  <div
+    class="inline-flex items-center gap-1"
+    {...machine.getControlProps()}
+  >
+    <template for={machine.getItems()} as={row} key={row}>
+      <span
+        class={["bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-2xl text-border-strong transition-all", { "scale-110 text-semantic-warning": machine.getItemState(row).highlighted, "cursor-not-allowed opacity-50": machine.disabled, "cursor-default": machine.readOnly }]}
+        {...machine.getItemProps(row)}
+      >
+        <span class="relative"
+          aria-hidden="true">★︎<span class="absolute inset-y-0 right-0 w-1/2 overflow-hidden" show={machine.getItemState(row).half}><span class="absolute top-0 right-0 text-border-strong">★︎</span></span></span>
+      </span>
+    </template>
+  </div>
+  <input {...machine.getHiddenInputProps()} />
+  <div class="pt-2" show={machine.value > 0}>
+    <div
+      class="text-sm font-medium text-text">You rated this {machine.value} star<span show={machine.value !== 1}>s</span></div>
+    <div class="text-xs text-text-muted"
+      show={machine.value - machine.value % 1 === 1}>Poor</div>
+    <div class="text-xs text-text-muted"
+      show={machine.value - machine.value % 1 === 2}>Fair</div>
+    <div class="text-xs text-text-muted"
+      show={machine.value - machine.value % 1 === 3}>Good</div>
+    <div class="text-xs text-text-muted"
+      show={machine.value - machine.value % 1 === 4}>Very Good</div>
+    <div class="text-xs text-text-muted"
+      show={machine.value - machine.value % 1 === 5}>Excellent</div>
+  </div>
+</div>

package/dist/rating-group/examples/movie.html

@@ -0,0 +1,45 @@
+<script lang="ts">
+import { ratingGroup } from "../rating-group.presentation.js";
+
+const machine = ratingGroup({ value: "0", allowHalf: true });
+</script>
+
+<div
+  class="mx-auto w-full max-w-sm rounded-lg border border-solid border-border bg-surface text-text"
+  {...machine.getRootProps()}>
+  <div class="flex items-center gap-3 border-b border-solid border-border p-4">
+    <div
+      class="grid h-14 w-10 place-items-center rounded-md bg-primary text-on-primary text-lg text-on-primary"
+      aria-hidden="true">▶</div>
+    <div>
+      <strong class="text-sm text-text">The Great Adventure</strong>
+      <p class="text-xs text-text-muted">Action • Adventure • 2024</p>
+    </div>
+  </div>
+  <div class="stack p-4">
+    <div>
+      <div class="mb-2 block text-xs font-medium"
+        {...machine.getLabelProps()}>Rate this movie</div>
+      <div class="inline-flex" {...machine.getControlProps()}>
+        <template for={machine.getItems()} as={row} key={row}>
+          <span
+            class={["bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-2xl text-border-strong transition-all", { "scale-110 text-primary": machine.getItemState(row).highlighted, "cursor-not-allowed opacity-50": machine.disabled }]}
+            {...machine.getItemProps(row)}
+          >
+            <span class="relative"
+              aria-hidden="true">★︎<span class="absolute inset-y-0 right-0 w-1/2 overflow-hidden" show={machine.getItemState(row).half}><span class="absolute top-0 right-0 text-border-strong">★︎</span></span></span>
+          </span>
+        </template>
+      </div>
+      <input {...machine.getHiddenInputProps()} />
+      <p class="text-xs text-text-muted"
+        show={machine.value > 0}>You rated this {machine.value} out of 5 stars</p>
+    </div>
+    <div class="flex gap-2">
+      <button type="button" variant="filled"
+        id="rt-trailer">Watch Trailer</button>
+      <button type="button" id="rt-list">Add to List</button>
+    </div>
+    <p class="text-xs text-text-muted" id="rt-note"></p>
+  </div>
+</div>

package/dist/rating-group/examples/product-review.html

@@ -0,0 +1,52 @@
+<script lang="ts">
+import { ratingGroup } from "../rating-group.presentation.js";
+
+const machine = ratingGroup({ value: "0", allowHalf: true });
+</script>
+
+<div
+  class="mx-auto w-full max-w-sm rounded-lg border border-solid border-border bg-surface text-text"
+  {...machine.getRootProps()}>
+  <div class="border-b border-solid border-border p-4">
+    <strong class="text-sm text-text">Product Review</strong>
+    <p
+      class="text-xs text-text-muted">Share your experience with this product</p>
+  </div>
+  <div class="stack p-4">
+    <div>
+      <div class="mb-2 block text-xs font-medium"
+        {...machine.getLabelProps()}>Overall Rating</div>
+      <div class="inline-flex" {...machine.getControlProps()}>
+        <template for={machine.getItems()} as={row} key={row}>
+          <span
+            class={["bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-2xl text-border-strong transition-all", { "scale-110 text-semantic-info": machine.getItemState(row).highlighted, "cursor-not-allowed opacity-50": machine.disabled }]}
+            {...machine.getItemProps(row)}
+          >
+            <span class="relative"
+              aria-hidden="true">★︎<span class="absolute inset-y-0 right-0 w-1/2 overflow-hidden" show={machine.getItemState(row).half}><span class="absolute top-0 right-0 text-border-strong">★︎</span></span></span>
+          </span>
+        </template>
+      </div>
+      <input {...machine.getHiddenInputProps()} />
+      <div class="text-xs text-text-muted" show={machine.value > 0}>
+        <span show={machine.value - machine.value % 1 === 1}>Poor</span>
+        <span show={machine.value - machine.value % 1 === 2}>Fair</span>
+        <span show={machine.value - machine.value % 1 === 3}>Good</span>
+        <span show={machine.value - machine.value % 1 === 4}>Very Good</span>
+        <span show={machine.value - machine.value % 1 === 5}>Excellent</span>
+      </div>
+    </div>
+    <div>
+      <label class="mb-2 block text-xs font-medium"
+        for="rv-text">Your Review</label>
+      <textarea
+        class="w-full text-xs"
+        id="rv-text" rows="3"
+        placeholder="Share your thoughts about this product..."></textarea>
+    </div>
+  </div>
+  <div class="border-t border-solid border-border p-4">
+    <button type="button" variant="filled" id="rv-submit">Submit Review</button>
+    <p class="text-xs text-text-muted" id="rv-note"></p>
+  </div>
+</div>

package/dist/rating-group/examples/service-evaluation.html

@@ -0,0 +1,31 @@
+<script lang="ts">
+import { ratingGroup } from "../rating-group.presentation.js";
+
+const machine = ratingGroup({ value: "4", count: 5 });
+</script>
+
+<div
+  class="mx-auto w-full max-w-sm rounded-lg border border-solid border-border bg-surface-raised p-4 text-text shadow-sm"
+  {...machine.getRootProps()}>
+  <div class="mb-3 flex items-center justify-between">
+    <div>
+      <strong class="text-sm text-text"
+        {...machine.getLabelProps()}>Support Quality</strong>
+      <p
+        class="text-xs text-text-muted">How was your recent support interaction?</p>
+    </div>
+    <span
+      class="rounded-full bg-surface px-3 py-1 font-mono text-xs font-medium text-text">{machine.value} / {machine.count}</span>
+  </div>
+  <div class="inline-flex gap-1" {...machine.getControlProps()}>
+    <template for={machine.getItems()} as={row} key={row}>
+      <span
+        class={["bare grid h-8 w-8 cursor-pointer place-items-center rounded-md text-xl text-border-strong transition-all", { "scale-110 text-semantic-info": machine.getItemState(row).highlighted, "cursor-not-allowed opacity-50": machine.disabled }]}
+        {...machine.getItemProps(row)}
+      >
+        <span class="relative" aria-hidden="true">★︎</span>
+      </span>
+    </template>
+  </div>
+  <input {...machine.getHiddenInputProps()} />
+</div>

package/dist/rating-group/rating-group.events.d.ts

@@ -0,0 +1,38 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface RatingGroupEvents {
+  "SET_VALUE": {
+    value: number;
+  };
+  "CLEAR_VALUE": {};
+  "GROUP_POINTER_OVER": {};
+  "GROUP_POINTER_LEAVE": {
+    radioFocused: boolean;
+  };
+  "POINTER_OVER": {
+    index: number;
+    isMidway: boolean;
+  };
+  "FOCUS": {};
+  "BLUR": {};
+  "SPACE": {
+    value: number;
+  };
+  "CLICK": {
+    value: number;
+  };
+  "ARROW_LEFT": {};
+  "ARROW_RIGHT": {};
+  "HOME": {};
+  "END": {};
+  "SET_COUNT": {
+    count: number;
+  };
+}
+export type RatingGroupEvent = EventUnion<RatingGroupEvents>;
+export type RatingGroupValueChange = {
+  readonly value: number;
+};
+export type RatingGroupHoverChange = {
+  readonly hoveredValue: number;
+};
+//# sourceMappingURL=rating-group.events.d.ts.map

package/dist/rating-group/rating-group.events.js

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

package/dist/rating-group/rating-group.machine.d.ts

@@ -0,0 +1,6 @@
+import { RatingGroupArgs, RatingGroupContext, RatingGroupState, isHovering, isInteractive, itemState, ratingValue, step } from "./rating-group.state.js";
+import { RatingGroupEvents, RatingGroupHoverChange, RatingGroupValueChange } from "./rating-group.events.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function ratingGroup(args?: RatingGroupArgs, authored?: (name: string) => boolean): Machine<RatingGroupContext, RatingGroupEvents, RatingGroupState>;
+export { type RatingGroupArgs, type RatingGroupContext, type RatingGroupEvents, type RatingGroupHoverChange, type RatingGroupState, type RatingGroupValueChange, isHovering, isInteractive, itemState, ratingValue, step };
+//# sourceMappingURL=rating-group.machine.d.ts.map