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

package/dist/toast/examples/basic.html

@@ -0,0 +1,37 @@
+<script lang="ts">
+import { toast } from "../toast.presentation.js";
+
+const machine = toast({
+ placement: "bottom",
+});
+</script>
+<div class="mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3">
+ <button data-fire="" data-title="Saved"
+  data-description="Your changes are live." data-type="success"
+  data-duration="5000" data-action=""
+  class="s-sm">Show toast</button>
+ <div
+  class="pointer-events-none fixed z-toast flex w-full flex-col"
+  {...machine.getGroupProps()}
+ >
+  <template for={machine.getToasts()} as={row} key={row.id}>
+   <div
+    class="pointer-events-auto absolute bottom-0 inset-x-4 mx-auto max-w-[38rem] transition-all duration-fast ease-decelerate"
+    {...machine.getToastProps(row)}
+   >
+    <div
+     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     <div class="min-w-0 flex-1">
+      <div class="text-sm font-medium text-text"
+       {...machine.getTitleProps(row)}>{row.title}</div>
+      <div class="text-sm text-text-muted"
+       {...machine.getDescriptionProps(row)}>{row.description}</div>
+     </div>
+     <button
+      class="ghost icon s-sm"
+      {...machine.getCloseTriggerProps(row)}>X</button>
+    </div>
+   </div>
+  </template>
+ </div>
+</div>

package/dist/toast/examples/bottomcenter.html

@@ -0,0 +1,37 @@
+<script lang="ts">
+import { toast } from "../toast.presentation.js";
+
+const machine = toast({
+ placement: "bottom",
+});
+</script>
+<div class="mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3">
+ <button data-fire="" data-title="Bottom center"
+  data-description="Toast from bottom center." data-type="info"
+  data-duration="5000" data-action=""
+  class="s-sm">Show toast</button>
+ <div
+  class="pointer-events-none fixed z-toast flex w-full flex-col"
+  {...machine.getGroupProps()}
+ >
+  <template for={machine.getToasts()} as={row} key={row.id}>
+   <div
+    class="pointer-events-auto absolute bottom-0 inset-x-4 mx-auto max-w-[38rem] transition-all duration-fast ease-decelerate"
+    {...machine.getToastProps(row)}
+   >
+    <div
+     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     <div class="min-w-0 flex-1">
+      <div class="text-sm font-medium text-text"
+       {...machine.getTitleProps(row)}>{row.title}</div>
+      <div class="text-sm text-text-muted"
+       {...machine.getDescriptionProps(row)}>{row.description}</div>
+     </div>
+     <button
+      class="ghost icon s-sm"
+      {...machine.getCloseTriggerProps(row)}>X</button>
+    </div>
+   </div>
+  </template>
+ </div>
+</div>

package/dist/toast/examples/bottomleft.html

@@ -0,0 +1,37 @@
+<script lang="ts">
+import { toast } from "../toast.presentation.js";
+
+const machine = toast({
+ placement: "bottom-start",
+});
+</script>
+<div class="mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3">
+ <button data-fire="" data-title="Bottom left"
+  data-description="Toast from bottom left." data-type="info"
+  data-duration="5000" data-action=""
+  class="s-sm">Show toast</button>
+ <div
+  class="pointer-events-none fixed z-toast flex w-full flex-col"
+  {...machine.getGroupProps()}
+ >
+  <template for={machine.getToasts()} as={row} key={row.id}>
+   <div
+    class="pointer-events-auto absolute bottom-0 inset-x-0 mr-auto w-full max-w-[38rem] transition-all duration-fast ease-decelerate"
+    {...machine.getToastProps(row)}
+   >
+    <div
+     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     <div class="min-w-0 flex-1">
+      <div class="text-sm font-medium text-text"
+       {...machine.getTitleProps(row)}>{row.title}</div>
+      <div class="text-sm text-text-muted"
+       {...machine.getDescriptionProps(row)}>{row.description}</div>
+     </div>
+     <button
+      class="ghost icon s-sm"
+      {...machine.getCloseTriggerProps(row)}>X</button>
+    </div>
+   </div>
+  </template>
+ </div>
+</div>

package/dist/toast/examples/bottomright.html

@@ -0,0 +1,37 @@
+<script lang="ts">
+import { toast } from "../toast.presentation.js";
+
+const machine = toast({
+ placement: "bottom-end",
+});
+</script>
+<div class="mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3">
+ <button data-fire="" data-title="Bottom right"
+  data-description="Toast from bottom right." data-type="info"
+  data-duration="5000" data-action=""
+  class="s-sm">Show toast</button>
+ <div
+  class="pointer-events-none fixed z-toast flex w-full flex-col"
+  {...machine.getGroupProps()}
+ >
+  <template for={machine.getToasts()} as={row} key={row.id}>
+   <div
+    class="pointer-events-auto absolute bottom-0 inset-x-0 ml-auto w-full max-w-[38rem] transition-all duration-fast ease-decelerate"
+    {...machine.getToastProps(row)}
+   >
+    <div
+     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     <div class="min-w-0 flex-1">
+      <div class="text-sm font-medium text-text"
+       {...machine.getTitleProps(row)}>{row.title}</div>
+      <div class="text-sm text-text-muted"
+       {...machine.getDescriptionProps(row)}>{row.description}</div>
+     </div>
+     <button
+      class="ghost icon s-sm"
+      {...machine.getCloseTriggerProps(row)}>X</button>
+    </div>
+   </div>
+  </template>
+ </div>
+</div>

package/dist/toast/examples/duration.html

@@ -0,0 +1,36 @@
+<script lang="ts">
+import { toast } from "../toast.presentation.js";
+
+const machine = toast({
+ placement: "bottom",
+});
+</script>
+<div class="mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3">
+ <button data-fire="" data-title="Slow news" data-description="Stays a while."
+  data-type="info" data-duration="15000" data-action=""
+  class="s-sm">Show toast</button>
+ <div
+  class="pointer-events-none fixed z-toast flex w-full flex-col"
+  {...machine.getGroupProps()}
+ >
+  <template for={machine.getToasts()} as={row} key={row.id}>
+   <div
+    class="pointer-events-auto absolute bottom-0 inset-x-4 mx-auto max-w-[38rem] transition-all duration-fast ease-decelerate"
+    {...machine.getToastProps(row)}
+   >
+    <div
+     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     <div class="min-w-0 flex-1">
+      <div class="text-sm font-medium text-text"
+       {...machine.getTitleProps(row)}>{row.title}</div>
+      <div class="text-sm text-text-muted"
+       {...machine.getDescriptionProps(row)}>{row.description}</div>
+     </div>
+     <button
+      class="ghost icon s-sm"
+      {...machine.getCloseTriggerProps(row)}>X</button>
+    </div>
+   </div>
+  </template>
+ </div>
+</div>

package/dist/toast/examples/promise.html

@@ -0,0 +1,44 @@
+<script lang="ts">
+import { toast } from "../toast.presentation.js";
+
+const machine = toast({
+ placement: "bottom",
+});
+</script>
+<div class="mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3">
+ <button data-fire="" class="secondary s-sm">Run toast</button>
+ <div
+  class="pointer-events-none fixed z-toast flex w-full flex-col"
+  {...machine.getGroupProps()}
+ >
+ <template for={machine.getToasts()} as={row} key={row.id}>
+  <div
+   class="pointer-events-auto absolute bottom-0 inset-x-4 mx-auto max-w-[38rem] transition-all duration-fast ease-decelerate"
+   {...machine.getToastProps(row)}
+  >
+   <div
+    class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg transition-colors duration-fast ease-decelerate">
+    <span
+     aria-hidden="true"
+     data-type={row.type}
+     class="mt-1 shrink-0 text-sm text-text-muted transition-colors duration-fast ease-decelerate"
+    ><span class="i-lucide-circle text-[0.4rem]" aria-hidden="true"></span></span>
+    <div class="min-w-0 flex-1">
+     <div class="text-sm font-medium text-text"
+      {...machine.getTitleProps(row)}>{row.title}</div>
+     <div class="text-sm text-text-muted"
+      {...machine.getDescriptionProps(row)}>{row.description}</div>
+     <button
+      class="secondary s-sm mt-2"
+      {...machine.getActionTriggerProps(row)}
+     >{row.action}</button>
+    </div>
+    <button
+     class="ghost icon s-sm"
+     {...machine.getCloseTriggerProps(row)}
+    ><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+   </div>
+  </div>
+ </template>
+ </div>
+</div>

package/dist/toast/examples/topcenter.html

@@ -0,0 +1,37 @@
+<script lang="ts">
+import { toast } from "../toast.presentation.js";
+
+const machine = toast({
+ placement: "top",
+});
+</script>
+<div class="mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3">
+ <button data-fire="" data-title="Top center"
+  data-description="Toast from top center." data-type="info"
+  data-duration="5000" data-action=""
+  class="s-sm">Show toast</button>
+ <div
+  class="pointer-events-none fixed z-toast flex w-full flex-col"
+  {...machine.getGroupProps()}
+ >
+  <template for={machine.getToasts()} as={row} key={row.id}>
+   <div
+    class="pointer-events-auto absolute top-0 inset-x-4 mx-auto max-w-[38rem] transition-all duration-fast ease-decelerate"
+    {...machine.getToastProps(row)}
+   >
+    <div
+     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     <div class="min-w-0 flex-1">
+      <div class="text-sm font-medium text-text"
+       {...machine.getTitleProps(row)}>{row.title}</div>
+      <div class="text-sm text-text-muted"
+       {...machine.getDescriptionProps(row)}>{row.description}</div>
+     </div>
+     <button
+      class="ghost icon s-sm"
+      {...machine.getCloseTriggerProps(row)}>X</button>
+    </div>
+   </div>
+  </template>
+ </div>
+</div>

package/dist/toast/examples/topleft.html

@@ -0,0 +1,37 @@
+<script lang="ts">
+import { toast } from "../toast.presentation.js";
+
+const machine = toast({
+ placement: "top-start",
+});
+</script>
+<div class="mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3">
+ <button data-fire="" data-title="Top left"
+  data-description="Toast from top left." data-type="info"
+  data-duration="5000" data-action=""
+  class="s-sm">Show toast</button>
+ <div
+  class="pointer-events-none fixed z-toast flex w-full flex-col"
+  {...machine.getGroupProps()}
+ >
+  <template for={machine.getToasts()} as={row} key={row.id}>
+   <div
+    class="pointer-events-auto absolute top-0 inset-x-0 mr-auto w-full max-w-[38rem] transition-all duration-fast ease-decelerate"
+    {...machine.getToastProps(row)}
+   >
+    <div
+     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     <div class="min-w-0 flex-1">
+      <div class="text-sm font-medium text-text"
+       {...machine.getTitleProps(row)}>{row.title}</div>
+      <div class="text-sm text-text-muted"
+       {...machine.getDescriptionProps(row)}>{row.description}</div>
+     </div>
+     <button
+      class="ghost icon s-sm"
+      {...machine.getCloseTriggerProps(row)}>X</button>
+    </div>
+   </div>
+  </template>
+ </div>
+</div>

package/dist/toast/examples/topright.html

@@ -0,0 +1,37 @@
+<script lang="ts">
+import { toast } from "../toast.presentation.js";
+
+const machine = toast({
+ placement: "top-end",
+});
+</script>
+<div class="mx-auto flex w-full max-w-[20rem] flex-col items-center gap-3">
+ <button data-fire="" data-title="Top right"
+  data-description="Toast from top right." data-type="info"
+  data-duration="5000" data-action=""
+  class="s-sm">Show toast</button>
+ <div
+  class="pointer-events-none fixed z-toast flex w-full flex-col"
+  {...machine.getGroupProps()}
+ >
+  <template for={machine.getToasts()} as={row} key={row.id}>
+   <div
+    class="pointer-events-auto absolute top-0 inset-x-0 ml-auto w-full max-w-[38rem] transition-all duration-fast ease-decelerate"
+    {...machine.getToastProps(row)}
+   >
+    <div
+     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     <div class="min-w-0 flex-1">
+      <div class="text-sm font-medium text-text"
+       {...machine.getTitleProps(row)}>{row.title}</div>
+      <div class="text-sm text-text-muted"
+       {...machine.getDescriptionProps(row)}>{row.description}</div>
+     </div>
+     <button
+      class="ghost icon s-sm"
+      {...machine.getCloseTriggerProps(row)}>X</button>
+    </div>
+   </div>
+  </template>
+ </div>
+</div>

package/dist/toast/examples/types.html

@@ -0,0 +1,47 @@
+<script lang="ts">
+import { toast } from "../toast.presentation.js";
+
+const machine = toast({
+ placement: "bottom",
+});
+</script>
+<div class="mx-auto flex w-full max-w-[20rem] flex-col items-center gap-2">
+ <div class="flex flex-wrap justify-center gap-2">
+  <button data-fire="" data-title="Done" data-description="It worked."
+   data-type="success" data-duration="5000" data-action=""
+   class="secondary s-sm">Success</button>
+  <button data-fire="" data-title="Careful" data-description="Check this."
+   data-type="warning" data-duration="5000" data-action=""
+   class="secondary s-sm">Warning</button>
+  <button data-fire="" data-title="Failed" data-description="Try again."
+   data-type="error" data-duration="5000" data-action=""
+   class="secondary s-sm">Error</button>
+  <button data-fire="" data-title="FYI" data-description="Heads up."
+   data-type="info" data-duration="5000" data-action=""
+   class="secondary s-sm">Info</button>
+ </div>
+ <div
+  class="pointer-events-none fixed z-toast flex w-full flex-col"
+  {...machine.getGroupProps()}
+ >
+  <template for={machine.getToasts()} as={row} key={row.id}>
+   <div
+    class="pointer-events-auto absolute bottom-0 inset-x-4 mx-auto max-w-[38rem] transition-all duration-fast ease-decelerate"
+    {...machine.getToastProps(row)}
+   >
+    <div
+     class="flex items-start gap-3 rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-lg">
+     <div class="min-w-0 flex-1">
+      <div class="text-sm font-medium text-text"
+       {...machine.getTitleProps(row)}>{row.title}</div>
+      <div class="text-sm text-text-muted"
+       {...machine.getDescriptionProps(row)}>{row.description}</div>
+     </div>
+     <button
+      class="ghost icon s-sm"
+      {...machine.getCloseTriggerProps(row)}>X</button>
+    </div>
+   </div>
+  </template>
+ </div>
+</div>

package/dist/toast/examples/updatable.html

@@ -0,0 +1,8 @@
+<script lang="ts">
+import { toast } from "../toast.presentation.js";
+
+const machine = toast({
+ placement: "bottom",
+});
+</script>
+<include file="./promise.html" />

package/dist/toast/toast.events.d.ts

@@ -0,0 +1,60 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export type ToastType = "info" | "success" | "warning" | "error" | "loading";
+export interface ToastEvents {
+  "TOAST.CREATE": {
+    id: string;
+    title: string;
+    description: string;
+    toastType: ToastType;
+    duration: number;
+    priority: number;
+    action: string;
+  };
+  "TOAST.UPDATE": {
+    id: string;
+    title: string;
+    description: string;
+    toastType: ToastType;
+    duration: number;
+    priority: number;
+    action: string;
+  };
+  "TOAST.REMOVE": {
+    id: string;
+  };
+  "TOAST.DISMISS": {
+    id: string;
+    src: string;
+  };
+  "DISMISS.ALL": {};
+  "TOAST.PAUSE": {
+    id: string;
+    remaining: number;
+  };
+  "TOAST.RESUME": {
+    id: string;
+  };
+  "TOAST.MOUNTED": {
+    id: string;
+  };
+  "TIMER.ELAPSED": {
+    id: string;
+  };
+  "TIMER.REMOVED": {
+    id: string;
+  };
+  "HEIGHT.SET": {
+    id: string;
+    height: number;
+  };
+  "REGION.POINTER_ENTER": {};
+  "REGION.POINTER_LEAVE": {};
+  "REGION.FOCUS": {};
+  "REGION.BLUR": {};
+  "REGION.OVERLAP": {};
+  "REGION.STACK": {};
+  "PAGE.IDLE": {};
+  "PAGE.ACTIVE": {};
+}
+export type ToastEvent = EventUnion<ToastEvents>;
+//# sourceMappingURL=toast.events.d.ts.map

package/dist/toast/toast.events.js

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

package/dist/toast/toast.machine.d.ts

@@ -0,0 +1,6 @@
+import { ToastEvent, ToastEvents } from "./toast.events.js";
+import { ToastArgs, ToastContext, ToastEntry, ToastState, ToastStatus } from "./toast.state.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function toast(args?: ToastArgs, authored?: (name: string) => boolean): Machine<ToastContext, ToastEvents, ToastState>;
+export type { ToastArgs, ToastContext, ToastEntry, ToastEvent, ToastEvents, ToastStatus };
+//# sourceMappingURL=toast.machine.d.ts.map

package/dist/toast/toast.machine.js

@@ -0,0 +1,97 @@
+import { initial } from "./toast.state.js";
+import { createToast, dismissAll, dismissToast, enterFocus, enterPointer, heightSet, leaveFocus, leavePointer, pauseToasts, removeToast, resumeToasts, shouldCollapse, toastMounted, toastPause, toastResume, updateToast } from "./toast.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/toast/toast.machine.ts
+/** Toast machine: the queue, each toast's lifecycle, and the stacking mode. */
+const QUEUE_EVENTS = {
+	"TOAST.CREATE": [{
+		target: "overlap",
+		cond: shouldCollapse,
+		assign: createToast
+	}, { assign: createToast }],
+	"TOAST.REMOVE": [{
+		target: "overlap",
+		cond: shouldCollapse,
+		assign: removeToast
+	}, { assign: removeToast }],
+	"TIMER.REMOVED": [{
+		target: "overlap",
+		cond: shouldCollapse,
+		assign: removeToast
+	}, { assign: removeToast }],
+	"TOAST.UPDATE": { assign: updateToast },
+	"TOAST.DISMISS": { assign: dismissToast },
+	"DISMISS.ALL": { assign: dismissAll },
+	"TIMER.ELAPSED": { assign: dismissToast },
+	"TOAST.MOUNTED": { assign: toastMounted },
+	"HEIGHT.SET": { assign: heightSet }
+};
+function toast(args = {}, authored = () => false) {
+	return createMachine({
+		id: "toast",
+		initial: "stack",
+		context: initial(args, authored),
+		on: {
+			"TOAST.PAUSE": { assign: toastPause },
+			"TOAST.RESUME": { assign: toastResume },
+			"PAGE.IDLE": { assign: [() => ({ pageIdle: true }), pauseToasts] },
+			"PAGE.ACTIVE": { assign: [() => ({ pageIdle: false }), resumeToasts] },
+			"REGION.BLUR": [
+				{
+					target: "overlap",
+					cond: (ctx) => ctx.overlap && !ctx.pointerWithin,
+					assign: [resumeToasts, leaveFocus]
+				},
+				{
+					target: "stack",
+					cond: (ctx) => !ctx.pointerWithin,
+					assign: [resumeToasts, leaveFocus]
+				},
+				{ assign: leaveFocus }
+			]
+		},
+		fields: {
+			overlap: {},
+			max: {},
+			removeDelay: {},
+			placement: {},
+			gap: {},
+			offsets: {},
+			hotkey: {},
+			label: {},
+			pauseOnPageIdle: {},
+			closable: {}
+		},
+		states: {
+			stack: { on: {
+				...QUEUE_EVENTS,
+				"REGION.POINTER_LEAVE": [{
+					target: "overlap",
+					cond: (ctx) => ctx.overlap,
+					assign: [leavePointer, resumeToasts]
+				}, { assign: [leavePointer, resumeToasts] }],
+				"REGION.OVERLAP": { target: "overlap" },
+				"REGION.FOCUS": { assign: [enterFocus, pauseToasts] },
+				"REGION.POINTER_ENTER": { assign: [enterPointer, pauseToasts] }
+			} },
+			overlap: { on: {
+				...QUEUE_EVENTS,
+				"REGION.STACK": {
+					target: "stack",
+					assign: resumeToasts
+				},
+				"REGION.POINTER_ENTER": {
+					target: "stack",
+					assign: [enterPointer, pauseToasts]
+				},
+				"REGION.FOCUS": {
+					target: "stack",
+					assign: [enterFocus, pauseToasts]
+				}
+			} }
+		}
+	});
+}
+export { toast };
+
+//# sourceMappingURL=toast.machine.js.map