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

package/dist/toast/toast.transitions.d.ts

@@ -0,0 +1,24 @@
+import { ToastEvents } from "./toast.events.js";
+import { ToastContext } from "./toast.state.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+type ToastAssign<K extends keyof ToastEvents = keyof ToastEvents> = AssignFor<ToastContext, ToastEvents, K>;
+export declare const createToast: ToastAssign<"TOAST.CREATE">;
+export declare const updateToast: ToastAssign<"TOAST.CREATE" | "TOAST.UPDATE">;
+export declare const removeToast: ToastAssign<"TOAST.REMOVE" | "TIMER.REMOVED">;
+export declare const dismissToast: ToastAssign<"TOAST.DISMISS" | "TIMER.ELAPSED">;
+export declare const pauseToasts: (ctx: ToastContext) => Partial<ToastContext>;
+export declare const resumeToasts: (ctx: ToastContext) => Partial<ToastContext>;
+export declare const enterPointer: () => Partial<ToastContext>;
+export declare const leavePointer: () => Partial<ToastContext>;
+export declare const enterFocus: () => Partial<ToastContext>;
+export declare const leaveFocus: () => Partial<ToastContext>;
+export declare const shouldCollapse: GuardFor<ToastContext, ToastEvents>;
+export declare const toastMounted: ToastAssign<"TOAST.MOUNTED">;
+export declare const heightSet: ToastAssign<"HEIGHT.SET">;
+export declare const dismissAll: (ctx: ToastContext) => Partial<ToastContext>;
+export declare const toastPause: ToastAssign<"TOAST.PAUSE">;
+export declare const toastResume: ToastAssign<"TOAST.RESUME">;
+export declare const pageIdle: () => Partial<ToastContext>;
+export declare const pageActive: () => Partial<ToastContext>;
+export {};
+//# sourceMappingURL=toast.transitions.d.ts.map

package/dist/toast/toast.transitions.js

@@ -0,0 +1,85 @@
+import { amend, durationFor, makeEntry, priorityFor, projectedCount, promote, resumeEntry } from "./toast.state.js";
+// src/toast/toast.transitions.ts
+const createToast = (ctx, event) => {
+	if (ctx.toasts.some((entry) => entry.id === event.id)) return updateToast(ctx, event);
+	const entry = makeEntry(event);
+	if (ctx.toasts.length >= ctx.max) return { queued: [...ctx.queued, entry] };
+	return { toasts: [entry, ...ctx.toasts] };
+};
+const updateToast = (ctx, event) => {
+	const merge = (entry) => ({
+		...entry,
+		title: event.title,
+		description: event.description,
+		type: event.toastType,
+		action: event.action,
+		priority: priorityFor(event.toastType, event.priority, event.action.length > 0),
+		remaining: durationFor(event.toastType, event.duration)
+	});
+	const toasts = amend(ctx.toasts, event.id, merge);
+	if (toasts !== void 0) return { toasts };
+	const queued = amend(ctx.queued, event.id, merge);
+	return queued === void 0 ? {} : { queued };
+};
+const removeToast = (ctx, event) => {
+	const gone = (entry) => entry.id !== event.id;
+	if (!ctx.toasts.some((entry) => entry.id === event.id)) return ctx.queued.some((entry) => entry.id === event.id) ? { queued: ctx.queued.filter(gone) } : {};
+	return promote({
+		...ctx,
+		toasts: ctx.toasts.filter(gone),
+		queued: ctx.queued.filter(gone)
+	});
+};
+const dismissToast = (ctx, event) => {
+	const toasts = amend(ctx.toasts, event.id, (entry) => entry.status === "dismissing" ? entry : {
+		...entry,
+		status: "dismissing"
+	});
+	return toasts === void 0 ? {} : { toasts };
+};
+const pauseToasts = (ctx) => ({ toasts: ctx.toasts.map((entry) => entry.status === "visible" ? {
+	...entry,
+	status: "persist"
+} : entry) });
+const resumeToasts = (ctx) => ({ toasts: ctx.toasts.map(resumeEntry) });
+const enterPointer = () => ({ pointerWithin: true });
+const leavePointer = () => ({ pointerWithin: false });
+const enterFocus = () => ({ focusWithin: true });
+const leaveFocus = () => ({ focusWithin: false });
+const shouldCollapse = (ctx, event) => ctx.overlap && projectedCount(ctx, event) <= 1;
+const toastMounted = (ctx, event) => {
+	const toasts = amend(ctx.toasts, event.id, (entry) => ({
+		...entry,
+		mounted: true
+	}));
+	return toasts === void 0 ? {} : { toasts };
+};
+const heightSet = (ctx, event) => {
+	if (event.height < 0) return {};
+	const toasts = amend(ctx.toasts, event.id, (entry) => entry.height === event.height ? entry : {
+		...entry,
+		height: event.height
+	});
+	return toasts === void 0 ? {} : { toasts };
+};
+const dismissAll = (ctx) => ({ toasts: ctx.toasts.map((entry) => entry.status === "dismissing" ? entry : {
+	...entry,
+	status: "dismissing"
+}) });
+const toastPause = (ctx, event) => {
+	const toasts = amend(ctx.toasts, event.id, (entry) => ({
+		...entry,
+		status: "persist",
+		remaining: event.remaining
+	}));
+	return toasts === void 0 ? {} : { toasts };
+};
+const toastResume = (ctx, event) => {
+	const toasts = amend(ctx.toasts, event.id, resumeEntry);
+	return toasts === void 0 ? {} : { toasts };
+};
+const pageIdle = () => ({ pageIdle: true });
+const pageActive = () => ({ pageIdle: false });
+export { createToast, dismissAll, dismissToast, enterFocus, enterPointer, heightSet, leaveFocus, leavePointer, pageActive, pageIdle, pauseToasts, removeToast, resumeToasts, shouldCollapse, toastMounted, toastPause, toastResume, updateToast };
+
+//# sourceMappingURL=toast.transitions.js.map

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+import { toggleGroup } from "../toggle-group.presentation.js";
+
+const machine = toggleGroup({
+  items: [{ "value": "left", "label": "Left" }, {
+    "value": "center",
+    "label": "Center",
+  }, { "value": "right", "label": "Right" }],
+  defaultValue: ["left"],
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-md justify-center">
+  <div
+    class={["inline-flex items-center gap-1 rounded-lg border border-solid border-border bg-surface-raised p-1", { "flex-col": machine.orientation === "vertical" }]}
+    {...machine.getRootProps()}
+  >
+    <template for={machine.getItems()} as={row} key={row.value}>
+      <button
+        class={["bare rounded-md px-3 py-1 text-sm font-medium transition-all hover:bg-surface hover:text-text", { "bg-surface text-text shadow-sm": machine.getItemState(row).pressed, "text-text-muted": !machine.getItemState(row).pressed, "cursor-not-allowed opacity-50": machine.disabled }]}
+        {...machine.getItemProps(row)}
+      >{row.label}</button>
+    </template>
+  </div>
+</div>

package/dist/toggle-group/examples/ghost.html

@@ -0,0 +1,22 @@
+<script lang="ts">
+import { toggleGroup } from "../toggle-group.presentation.js";
+
+const machine = toggleGroup({
+  items: [{ "value": "sm", "label": "S" }, { "value": "md", "label": "M" }, {
+    "value": "lg",
+    "label": "L",
+  }, { "value": "xl", "label": "XL" }],
+  defaultValue: ["md"],
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-md justify-center">
+  <div class="inline-flex items-center gap-1" {...machine.getRootProps()}>
+    <template for={machine.getItems()} as={row} key={row.value}>
+      <button
+        class={["bare rounded-md px-3 py-2 text-sm font-medium transition-all hover:bg-surface hover:text-text", { "bg-surface-raised text-text": machine.getItemState(row).pressed, "text-text-muted": !machine.getItemState(row).pressed }]}
+        {...machine.getItemProps(row)}
+      >{row.label}</button>
+    </template>
+  </div>
+</div>

package/dist/toggle-group/examples/icons.html

@@ -0,0 +1,25 @@
+<script lang="ts">
+import { toggleGroup } from "../toggle-group.presentation.js";
+
+const machine = toggleGroup({
+  items: [{ "value": "grid", "label": "Grid" }, {
+    "value": "list",
+    "label": "List",
+  }, { "value": "calendar", "label": "Calendar" }],
+  defaultValue: ["grid"],
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-md justify-center">
+  <div
+    class={["inline-flex items-center gap-1 rounded-lg border border-solid border-border bg-surface-raised p-1", { "flex-col": machine.orientation === "vertical" }]}
+    {...machine.getRootProps()}
+  >
+    <template for={machine.getItems()} as={row} key={row.value}>
+      <button
+        class={["bare flex items-center gap-2 rounded-md px-3 py-1 text-sm font-medium transition-all hover:bg-surface hover:text-text", { "bg-surface text-text shadow-sm": machine.getItemState(row).pressed, "text-text-muted": !machine.getItemState(row).pressed, "cursor-not-allowed opacity-50": machine.disabled }]}
+        {...machine.getItemProps(row)}
+      ><span class="text-md" aria-hidden="true"><span show={row.value === "grid"} class="inline-block i-lucide-layout-grid"></span><span show={row.value === "list"} class="inline-block i-lucide-list"></span><span show={row.value === "calendar"} class="inline-block i-lucide-calendar"></span></span>{row.label}</button>
+    </template>
+  </div>
+</div>

package/dist/toggle-group/examples/multiple.html

@@ -0,0 +1,14 @@
+<script lang="ts">
+import { toggleGroup } from "../toggle-group.presentation.js";
+
+const machine = toggleGroup({
+  items: [{ "value": "bold", "label": "Bold" }, {
+    "value": "italic",
+    "label": "Italic",
+  }, { "value": "underline", "label": "Underline" }],
+  multiple: true,
+  defaultValue: ["bold"],
+});
+</script>
+
+<include file="./basic.html" />

package/dist/toggle-group/examples/outline.html

@@ -0,0 +1,25 @@
+<script lang="ts">
+import { toggleGroup } from "../toggle-group.presentation.js";
+
+const machine = toggleGroup({
+  items: [
+    { "value": "day", "label": "Day" },
+    { "value": "week", "label": "Week" },
+    { "value": "month", "label": "Month" },
+    { "value": "year", "label": "Year" },
+  ],
+  defaultValue: ["month"],
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-md justify-center">
+  <div class="inline-flex overflow-hidden border border-solid border-border rounded-lg"
+    {...machine.getRootProps()}>
+    <template for={machine.getItems()} as={row} key={row.value}>
+      <button
+        class={["bare border-r border-border px-4 py-2 text-sm font-medium transition-all last:border-r-0 hover:bg-surface hover:text-text", { "bg-surface-raised text-text": machine.getItemState(row).pressed, "text-text-muted": !machine.getItemState(row).pressed }]}
+        {...machine.getItemProps(row)}
+      >{row.label}</button>
+    </template>
+  </div>
+</div>

package/dist/toggle-group/examples/toolbar.html

@@ -0,0 +1,25 @@
+<script lang="ts">
+import { toggleGroup } from "../toggle-group.presentation.js";
+
+const machine = toggleGroup({
+  items: [{ "value": "bold", "label": "Bold" }, {
+    "value": "italic",
+    "label": "Italic",
+  }, { "value": "underline", "label": "Underline" }],
+  multiple: true,
+  defaultValue: ["bold"],
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-md justify-center">
+  <div
+    class="inline-flex items-center gap-1 rounded-lg border border-solid border-border bg-surface-raised p-2"
+    {...machine.getRootProps()}>
+    <template for={machine.getItems()} as={row} key={row.value}>
+      <button
+        class={["bare rounded-md p-2 transition-all hover:bg-surface hover:text-text", { "bg-surface text-text shadow-sm": machine.getItemState(row).pressed, "text-text-muted": !machine.getItemState(row).pressed }]}
+        {...machine.getItemProps(row)}
+      ><span class="text-md" aria-hidden="true"><span show={row.value === "bold"} class="inline-block i-lucide-bold"></span><span show={row.value === "italic"} class="inline-block i-lucide-italic"></span><span show={row.value === "underline"} class="inline-block i-lucide-underline"></span></span></button>
+    </template>
+  </div>
+</div>

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

@@ -0,0 +1,45 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+/**
+ * The toggle-group's 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.
+ *
+ * `disabled` (and the other host fields) sync silently via `fields`, so
+ * there is no SET_DISABLED event.
+ */
+export interface ToggleGroupEvents {
+  "VALUE.SET": {
+    value: string | readonly string[];
+  };
+  "TOGGLE.CLICK": {
+    id: string;
+    value: string;
+  };
+  "ROOT.MOUSE_DOWN": {};
+  "ROOT.FOCUS": {};
+  "ROOT.BLUR": {};
+  "TOGGLE.FOCUS": {
+    id: string;
+  };
+  "TOGGLE.FOCUS_NEXT": {
+    id: string;
+  };
+  "TOGGLE.FOCUS_PREV": {
+    id: string;
+  };
+  "TOGGLE.FOCUS_FIRST": {
+    id: string;
+  };
+  "TOGGLE.FOCUS_LAST": {
+    id: string;
+  };
+  "TOGGLE.SHIFT_TAB": {
+    isShiftTab: boolean;
+    firstId: string;
+  };
+}
+export type ToggleGroupEvent = EventUnion<ToggleGroupEvents>;
+export type ToggleGroupValueChange = {
+  readonly value: string[];
+};
+//# sourceMappingURL=toggle-group.events.d.ts.map

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

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

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

@@ -0,0 +1,5 @@
+import { ToggleGroupArgs, ToggleGroupContext, ToggleGroupState } from "./toggle-group.state.js";
+import { ToggleGroupEvents } from "./toggle-group.events.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function toggleGroup(args?: ToggleGroupArgs, authored?: (name: string) => boolean): Machine<ToggleGroupContext, ToggleGroupEvents, ToggleGroupState>;
+//# sourceMappingURL=toggle-group.machine.d.ts.map

package/dist/toggle-group/toggle-group.machine.js

@@ -0,0 +1,65 @@
+import { initial } from "./toggle-group.state.js";
+import { clearClickFocus, setFocusedId, setTabbingBackward, setValue } from "./toggle-group.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/toggle-group/toggle-group.machine.ts
+/** Toggle-group machine: idle/focused over two states. */
+function toggleGroup(args = {}, authored = () => false) {
+	return createMachine({
+		id: "toggle-group",
+		initial: "idle",
+		context: initial(args, authored),
+		fields: {
+			value: { event: "VALUE.SET" },
+			multiple: {},
+			deselectable: {},
+			rovingFocus: {},
+			loopFocus: {},
+			orientation: {},
+			disabled: {}
+		},
+		on: {
+			"VALUE.SET": { assign: setValue },
+			"TOGGLE.CLICK": { assign: (ctx, event) => {
+				if (ctx.multiple) return { value: ctx.value.includes(event.value) ? ctx.value.filter((current) => current !== event.value) : [...ctx.value, event.value] };
+				return { value: ctx.value.length === 1 && ctx.value[0] === event.value && ctx.deselectable ? [] : [event.value] };
+			} },
+			"ROOT.MOUSE_DOWN": { assign: () => ({ clickFocus: true }) }
+		},
+		states: {
+			idle: { on: {
+				"ROOT.FOCUS": [{
+					cond: (ctx) => !ctx.clickFocus && !ctx.tabbingBackward,
+					target: "focused",
+					assign: clearClickFocus
+				}],
+				"TOGGLE.FOCUS": {
+					target: "focused",
+					assign: setFocusedId
+				}
+			} },
+			focused: { on: {
+				"ROOT.BLUR": {
+					target: "idle",
+					assign: [
+						() => ({ tabbingBackward: false }),
+						() => ({ focusedId: null }),
+						clearClickFocus
+					]
+				},
+				"TOGGLE.FOCUS": { assign: setFocusedId },
+				"TOGGLE.FOCUS_NEXT": { assign: (_ctx, event) => ({ focusedId: event.id }) },
+				"TOGGLE.FOCUS_PREV": { assign: (_ctx, event) => ({ focusedId: event.id }) },
+				"TOGGLE.FOCUS_FIRST": { assign: (_ctx, event) => ({ focusedId: event.id }) },
+				"TOGGLE.FOCUS_LAST": { assign: (_ctx, event) => ({ focusedId: event.id }) },
+				"TOGGLE.SHIFT_TAB": [{
+					cond: (ctx, event) => ctx.focusedId !== event.firstId,
+					target: "idle",
+					assign: setTabbingBackward
+				}, { assign: setTabbingBackward }]
+			} }
+		}
+	});
+}
+export { toggleGroup };
+
+//# sourceMappingURL=toggle-group.machine.js.map

package/dist/toggle-group/toggle-group.presentation.d.ts

@@ -0,0 +1,112 @@
+import { ToggleGroupArgs, ToggleGroupContext, ToggleGroupItem, ToggleGroupState } from "./toggle-group.state.js";
+import { ToggleGroupEvents, ToggleGroupValueChange } from "./toggle-group.events.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+type Ctx = ToggleGroupContext;
+type ScopeLike = ViewFor<ToggleGroupContext, ToggleGroupEvents, "idle" | "focused">;
+type SlotLike<R> = SlotViewFor<R, ToggleGroupContext, ToggleGroupEvents, "idle" | "focused">;
+export declare const def: {
+  name: string;
+  machine: (args: ToggleGroupArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<ToggleGroupContext, ToggleGroupEvents, ToggleGroupState>;
+  start: "idle";
+  parts: {
+    root: {
+      attrs: (scope: ScopeLike) => {
+        role: string;
+        tabindex: string;
+        "data-disabled": string | undefined;
+        "data-focus": string | undefined;
+        style: {
+          outline: string;
+        };
+        onMousedown: () => void;
+        onFocus: (event: FocusEvent) => void;
+        onBlur: (event: FocusEvent) => void;
+      };
+    };
+  };
+  slots: {
+    item: {
+      indexes: (context: Ctx) => readonly ToggleGroupItem[];
+      attrs: (scope: SlotLike<ToggleGroupItem>) => {
+        "data-disabled": string | undefined;
+        "data-state": string;
+        onFocus: () => void;
+        onClick: (event: MouseEvent) => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        id: string;
+        type: string;
+        "data-focus": string | undefined;
+        disabled: boolean | undefined;
+        tabindex: string | undefined;
+        role: string | undefined;
+      };
+    };
+  };
+  commands: {
+    setValue: {
+      event: ([value]: [value: readonly string[]]) => {
+        type: "VALUE.SET";
+        value: string[];
+      };
+    };
+  };
+  readers: {
+    value: {
+      read: (context: Ctx) => string[];
+    };
+    multiple: {
+      read: (context: Ctx) => boolean;
+    };
+    disabled: {
+      read: (context: Ctx) => boolean;
+    };
+    orientation: {
+      read: (context: Ctx) => "horizontal" | "vertical";
+    };
+  };
+  methods: {
+    isPressed: {
+      call: (context: Ctx, _state: "idle" | "focused", [value]: [value: string]) => boolean;
+    };
+    getItemState: {
+      call: (context: Ctx, _state: "idle" | "focused", [slot]: [slot: ToggleGroupItem], _props: Record<string, unknown>, id: (part: string, slot?: unknown) => string) => {
+        pressed: boolean;
+        focused: boolean;
+        disabled: boolean;
+      };
+    };
+    getItems: {
+      call: (context: Ctx) => readonly ToggleGroupItem[];
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: Ctx) => string[];
+      detail: (watched: readonly string[]) => {
+        value: string[];
+      };
+    };
+  };
+  settled: ({ event, focus }: {
+    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly before: {
+      readonly context: ToggleGroupContext;
+      readonly state: "idle" | "focused";
+    };
+    readonly after: {
+      readonly context: ToggleGroupContext;
+      readonly state: "idle" | "focused";
+    };
+    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 ToggleGroupApi = ApiOf<typeof def>;
+export declare const toggleGroup: import("@spinjs/runtime").DefinedComponent<ToggleGroupApi, ToggleGroupArgs>;
+export type { ToggleGroupArgs, ToggleGroupItem, ToggleGroupValueChange };
+//# sourceMappingURL=toggle-group.presentation.d.ts.map