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

package/dist/async-list/async-list.state.js

@@ -0,0 +1,31 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/async-list/async-list.state.ts
+const isSortDescriptor = (value) => {
+	if (typeof value !== "object" || value === null) return false;
+	const column = Reflect.get(value, "column");
+	const direction = Reflect.get(value, "direction");
+	return typeof column === "string" && (direction === "ascending" || direction === "descending");
+};
+function itemsOf(raw) {
+	if (!Array.isArray(raw)) return [];
+	if (raw.length === 1 && raw[0] === "[]") return [];
+	return [...raw];
+}
+function initial(args = {}, authored = () => false) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const sortFn = written("sortFn") ? args.sortFn : void 0;
+	return {
+		items: itemsOf(args.initialItems),
+		cursor: null,
+		filterText: typeof args.initialFilterText === "string" ? args.initialFilterText : "",
+		sortDescriptor: isSortDescriptor(args.initialSortDescriptor) ? args.initialSortDescriptor : null,
+		error: void 0,
+		hasSortFn: typeof sortFn === "function",
+		dependenciesHash: void 0,
+		load: args.load,
+		sortFn: args.sortFn
+	};
+}
+export { initial, isSortDescriptor, itemsOf };
+
+//# sourceMappingURL=async-list.state.js.map

package/dist/async-list/async-list.transitions.d.ts

@@ -0,0 +1,16 @@
+import { AsyncListContext } from "./async-list.state.js";
+import { AsyncListEvents } from "./async-list.events.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+type AsyncListAssign<K extends keyof AsyncListEvents = keyof AsyncListEvents> = AssignFor<AsyncListContext, AsyncListEvents, K>;
+export declare const clearItems: AsyncListAssign;
+export declare const setItems: AsyncListAssign<"SUCCESS">;
+export declare const setCursor: AsyncListAssign<"SUCCESS">;
+export declare const setError: AsyncListAssign<"ERROR">;
+export declare const clearError: AsyncListAssign;
+export declare const setFilterText: AsyncListAssign<"FILTER">;
+export declare const setSortDescriptor: AsyncListAssign<"SORT">;
+export declare const clearCursor: AsyncListAssign;
+export declare const hasSortFn: GuardFor<AsyncListContext, AsyncListEvents>;
+export declare const hasCursor: GuardFor<AsyncListContext, AsyncListEvents>;
+export {};
+//# sourceMappingURL=async-list.transitions.d.ts.map

package/dist/async-list/async-list.transitions.js

@@ -0,0 +1,17 @@
+// src/async-list/async-list.transitions.ts
+const clearItems = () => ({ items: [] });
+const setItems = (ctx, event) => {
+	const loaded = [...event.items];
+	return { items: event.append ? [...ctx.items, ...loaded] : loaded };
+};
+const setCursor = (_ctx, event) => ({ cursor: event.cursor ?? null });
+const setError = (_ctx, event) => ({ error: event.error });
+const clearError = () => ({ error: void 0 });
+const setFilterText = (_ctx, event) => ({ filterText: event.filterText });
+const setSortDescriptor = (_ctx, event) => ({ sortDescriptor: event.sortDescriptor });
+const clearCursor = () => ({ cursor: null });
+const hasSortFn = (ctx, _event) => ctx.hasSortFn;
+const hasCursor = (ctx, _event) => ctx.cursor != null;
+export { clearCursor, clearError, clearItems, hasCursor, hasSortFn, setCursor, setError, setFilterText, setItems, setSortDescriptor };
+
+//# sourceMappingURL=async-list.transitions.js.map

package/dist/async-list/examples/basic.html

@@ -0,0 +1,88 @@
+<script lang="ts">
+import { asyncList } from "../async-list.presentation.js";
+
+const machine = asyncList({
+  initialItems: [{ "value": "ada", "label": "Ada Lovelace" }, {
+    "value": "grace",
+    "label": "Grace Hopper",
+  }, { "value": "margaret", "label": "Margaret Hamilton" }],
+  sortFn: ({ items, descriptor }) => {
+    const label = (item) => String(item.label);
+    const sorted = [...items].sort((a, b) =>
+      label(a).localeCompare(label(b))
+    );
+    if (descriptor !== undefined && descriptor.direction === "descending") {
+      sorted.reverse();
+    }
+    return { items: sorted };
+  },
+});
+</script>
+<div class="w-64 max-w-full" {...machine.getRootProps()}>
+  <div class="mb-2 flex flex-wrap items-center justify-between gap-2">
+    <div class="flex items-center gap-1">
+      <button
+        class="secondary s-sm"
+        aria-label="Sort ascending"
+        {...machine.getSortTriggerProps({ column: "name", direction: "ascending" })}
+      ><span aria-hidden="true">A</span><span class="i-lucide-arrow-right text-xs" aria-hidden="true"></span><span aria-hidden="true">Z</span></button>
+      <button
+        class="secondary s-sm"
+        aria-label="Sort descending"
+        {...machine.getSortTriggerProps({ column: "name", direction: "descending" })}
+      ><span aria-hidden="true">Z</span><span class="i-lucide-arrow-right text-xs" aria-hidden="true"></span><span aria-hidden="true">A</span></button>
+    </div>
+    <div class="flex items-center gap-2">
+      <input
+        class="w-36 transition-colors duration-fast ease-decelerate"
+        aria-label="Filter"
+        {...machine.getFilterInputProps()}
+      />
+      <button
+        class={["secondary s-sm", { "inline-flex": machine.filterText.length > 0, "hidden": machine.filterText.length === 0 }]}
+        {...machine.getClearFilterProps()}
+      >Clear</button>
+      <button
+        class={["secondary s-sm", { "text-primary": machine.state === "loading" }]}
+        {...machine.getReloadProps()}
+      >Reload</button>
+    </div>
+  </div>
+
+  <div
+    class="relative max-h-60 overflow-y-auto rounded-lg border border-solid border-border bg-surface-raised shadow-sm transition-shadow duration-fast ease-decelerate"
+    {...machine.getListProps()}
+  >
+    <div class="relative p-1">
+      <div
+        class={["pointer-events-none absolute inset-x-0 top-0 h-1 origin-left scale-x-0 rounded-full bg-primary transition-transform duration-fast ease-decelerate", { "scale-x-100": machine.state === "loading" || machine.state === "sorting" }]}
+        {...machine.getProgressProps()}
+      ></div>
+      <template for={machine.getRows()} as={row} key={row.value}>
+        <div
+          class="flex items-center gap-2 rounded-md px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate"
+          {...machine.getItemProps(row)}
+        >
+          <span class="min-w-0 flex-1 truncate">{row.label}</span>
+          <span class="text-xs text-text-muted tabular-nums">{row.value}</span>
+        </div>
+      </template>
+      <span
+        class={["px-2 py-6 text-center text-sm text-text-muted transition-colors duration-fast ease-decelerate", { "block": machine.empty, "hidden": !machine.empty }]}
+        {...machine.getEmptyProps()}>Nothing loaded yet</span>
+      <div class="h-[1px]" {...machine.getSentinelProps()}></div>
+    </div>
+  </div>
+
+  <div class="mt-2 flex justify-center">
+    <button
+      class={["secondary s-sm", { "inline-flex": machine.hasMore, "hidden": !machine.hasMore }]}
+      {...machine.getLoadMoreProps()}
+    >Load more</button>
+  </div>
+
+  <div
+    class={["mt-2 rounded-md border border-solid border-border bg-surface px-3 py-2 text-sm text-text transition-colors duration-fast ease-decelerate", { "block": machine.error !== undefined, "hidden": machine.error === undefined }]}
+    {...machine.getErrorProps()}
+  >Something went wrong.</div>
+</div>

package/dist/avatar/avatar.events.d.ts

@@ -0,0 +1,18 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface AvatarEvents {
+  "IMG.LOADED": {};
+  "IMG.ERROR": {};
+  "IMG.UNMOUNT": {};
+  "SRC.CHANGE": {
+    src: string;
+  };
+  "SET_SRC": {
+    src: string;
+  };
+}
+export type AvatarEvent = EventUnion<AvatarEvents>;
+export type AvatarStatus = "loading" | "error" | "loaded";
+export type AvatarStatusChange = {
+  readonly status: AvatarStatus;
+};
+//# sourceMappingURL=avatar.events.d.ts.map

package/dist/avatar/avatar.events.js

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

package/dist/avatar/avatar.machine.d.ts

@@ -0,0 +1,5 @@
+import { AvatarEvents } from "./avatar.events.js";
+import { AvatarArgs, AvatarContext, AvatarState } from "./avatar.state.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function avatar(args?: AvatarArgs, authored?: (name: string) => boolean): Machine<AvatarContext, AvatarEvents, AvatarState>;
+//# sourceMappingURL=avatar.machine.d.ts.map

package/dist/avatar/avatar.machine.js

@@ -0,0 +1,47 @@
+import { initial } from "./avatar.state.js";
+import { setSrc } from "./avatar.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/avatar/avatar.machine.ts
+/**
+* Avatar machine: loading/error/loaded over three states.
+*
+* Load and error signals arrive as events from the image node; the
+* machine owns which face shows.
+*
+* Context stays serializable for the scope channel: the src and nothing
+* else. There is no guard: the last signal wins.
+*/
+function avatar(args = {}, authored = () => false) {
+	return createMachine({
+		id: "avatar",
+		initial: "loading",
+		context: initial(args, authored),
+		fields: {
+			src: { event: "SRC.CHANGE" },
+			label: {},
+			fallback: {}
+		},
+		on: {
+			"SRC.CHANGE": {
+				target: "loading",
+				assign: setSrc
+			},
+			"IMG.UNMOUNT": { target: "error" },
+			"SET_SRC": {
+				target: "loading",
+				assign: setSrc
+			}
+		},
+		states: {
+			loading: { on: {
+				"IMG.LOADED": { target: "loaded" },
+				"IMG.ERROR": { target: "error" }
+			} },
+			error: { on: { "IMG.LOADED": { target: "loaded" } } },
+			loaded: { on: { "IMG.ERROR": { target: "error" } } }
+		}
+	});
+}
+export { avatar };
+
+//# sourceMappingURL=avatar.machine.js.map

package/dist/avatar/avatar.presentation.d.ts

@@ -0,0 +1,75 @@
+import { AvatarEvents, AvatarStatus } from "./avatar.events.js";
+import { AvatarArgs, AvatarContext, AvatarState } from "./avatar.state.js";
+import { ApiOf, ViewFor } from "@spinjs/runtime";
+/** Avatar definition: the DOM contract as data. */
+type ScopeLike = ViewFor<AvatarContext, AvatarEvents, AvatarState>;
+export declare const def: {
+  name: string;
+  machine: (args: AvatarArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<AvatarContext, AvatarEvents, AvatarState>;
+  start: "loading";
+  parts: {
+    root: {};
+    image: {
+      attrs: (scope: ScopeLike) => {
+        src: string | undefined;
+        alt: string;
+        "data-state": string;
+        onLoad: () => void;
+        onError: () => void;
+        "use:observe": {
+          attributes: string[];
+          onAttributes: (node: Element) => void;
+        };
+      };
+    };
+    fallback: {
+      attrs: (scope: ScopeLike) => {
+        role: string;
+        "aria-label": string;
+        "data-state": string;
+      };
+    };
+  };
+  commands: {
+    setSrc: {
+      event: ([src]: [src: string]) => {
+        type: "SET_SRC";
+        src: string;
+      };
+    };
+    setLoaded: {
+      event: () => {
+        type: "IMG.LOADED";
+      };
+    };
+    setError: {
+      event: () => {
+        type: "IMG.ERROR";
+      };
+    };
+  };
+  readers: {
+    loaded: {
+      read: (_context: AvatarContext, state: AvatarState) => state is "loaded";
+    };
+    src: {
+      read: (context: AvatarContext) => string;
+    };
+    status: {
+      read: (_context: AvatarContext, state: AvatarState) => AvatarStatus;
+    };
+  };
+  events: {
+    "status-change": {
+      prop: string;
+      watch: (_context: AvatarContext, state: AvatarState) => AvatarState[];
+      detail: (watched: readonly unknown[]) => {
+        status: AvatarStatus;
+      };
+    };
+  };
+};
+export type AvatarApi = ApiOf<typeof def>;
+export declare const avatar: import("@spinjs/runtime").DefinedComponent<AvatarApi, AvatarArgs>;
+export type { AvatarArgs, AvatarState };
+//# sourceMappingURL=avatar.presentation.d.ts.map

package/dist/avatar/avatar.presentation.js

@@ -0,0 +1,68 @@
+import { avatar as avatar$1 } from "./avatar.machine.js";
+import { defineComponent } from "@spinjs/runtime";
+// src/avatar/avatar.presentation.ts
+const def = {
+	name: "avatar",
+	machine: (args, authored) => avatar$1(args, authored),
+	start: "loading",
+	parts: {
+		root: {},
+		image: { attrs: (scope) => {
+			const src = scope.context.src;
+			const loaded = scope.state === "loaded";
+			return {
+				src: src.length > 0 ? src : void 0,
+				alt: scope.context.label,
+				"data-state": loaded ? "visible" : "hidden",
+				onLoad: () => {
+					scope.send({ type: "IMG.LOADED" });
+				},
+				onError: () => {
+					scope.send({ type: "IMG.ERROR" });
+				},
+				"use:observe": {
+					attributes: ["src"],
+					onAttributes: (node) => {
+						scope.send({
+							type: "SRC.CHANGE",
+							src: node.getAttribute("src") ?? ""
+						});
+					}
+				}
+			};
+		} },
+		fallback: { attrs: (scope) => {
+			const loaded = scope.state === "loaded";
+			return {
+				role: "img",
+				"aria-label": scope.context.label,
+				"data-state": loaded ? "hidden" : "visible"
+			};
+		} }
+	},
+	commands: {
+		setSrc: { event: ([src]) => ({
+			type: "SET_SRC",
+			src
+		}) },
+		setLoaded: { event: () => ({ type: "IMG.LOADED" }) },
+		setError: { event: () => ({ type: "IMG.ERROR" }) }
+	},
+	readers: {
+		loaded: { read: (_context, state) => state === "loaded" },
+		src: { read: (context) => context.src },
+		status: { read: (_context, state) => state === "loaded" || state === "error" ? state : "loading" }
+	},
+	events: { "status-change": {
+		prop: "onStatusChange",
+		watch: (_context, state) => [state],
+		detail: (watched) => {
+			const status = watched[0];
+			return { status: status === "loading" || status === "error" || status === "loaded" ? status : "loading" };
+		}
+	} }
+};
+const avatar = defineComponent(def);
+export { avatar, def };
+
+//# sourceMappingURL=avatar.presentation.js.map

package/dist/avatar/avatar.state.d.ts

@@ -0,0 +1,28 @@
+export type AvatarState = "loading" | "loaded" | "error";
+export interface AvatarContext {
+  src: string;
+  label: string;
+  fallback: string;
+}
+/**
+ * The avatar's arguments: the machine's own domain types. The host sets
+ * typed values; nothing parses text here.
+ *
+ * The twin (`defaultSrc`) is resolved by the framework before the factory
+ * is called, so the machine only ever sees the live value.
+ */
+export interface AvatarArgs {
+  src?: string;
+  defaultSrc?: string;
+  label?: string;
+  fallback?: string;
+}
+/**
+ * The machine's context, built from its arguments: what the args did not
+ * carry takes the machine's own default.
+ *
+ * The seed twin (`defaultSrc`) is the host's write of the src — the
+ * framework resolved it into the args — so it counts as a write too.
+ */
+export declare function initial(args: AvatarArgs | undefined, authored: (name: string) => boolean): AvatarContext;
+//# sourceMappingURL=avatar.state.d.ts.map

package/dist/avatar/avatar.state.js

@@ -0,0 +1,20 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/avatar/avatar.state.ts
+/**
+* The machine's context, built from its arguments: what the args did not
+* carry takes the machine's own default.
+*
+* The seed twin (`defaultSrc`) is the host's write of the src — the
+* framework resolved it into the args — so it counts as a write too.
+*/
+function initial(args = {}, authored) {
+	const written = (field) => args[field] !== void 0 || authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	return {
+		src: written("src") ? args.src ?? "" : "",
+		label: args.label ?? "",
+		fallback: args.fallback ?? ""
+	};
+}
+export { initial };
+
+//# sourceMappingURL=avatar.state.js.map

package/dist/avatar/avatar.transitions.d.ts

@@ -0,0 +1,7 @@
+import { AvatarEvents } from "./avatar.events.js";
+import { AvatarContext } from "./avatar.state.js";
+import { AssignFor } from "@spinjs/runtime/fsm";
+type AvatarAssign<K extends keyof AvatarEvents = keyof AvatarEvents> = AssignFor<AvatarContext, AvatarEvents, K>;
+export declare const setSrc: AvatarAssign<"SRC.CHANGE" | "SET_SRC">;
+export {};
+//# sourceMappingURL=avatar.transitions.d.ts.map

package/dist/avatar/avatar.transitions.js

@@ -0,0 +1,5 @@
+// src/avatar/avatar.transitions.ts
+const setSrc = (_ctx, event) => ({ src: event.src });
+export { setSrc };
+
+//# sourceMappingURL=avatar.transitions.js.map

package/dist/avatar/examples/badge.html

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { avatar } from "../avatar.presentation.js";
+
+  const face1 = avatar({ label: "Jordan Doe", fallback: "JD", src: "https://i.pravatar.cc/80?img=1" });
+  const face2 = avatar({ label: "Alex Blair", fallback: "AB", src: "https://i.pravatar.cc/80?img=2" });
+</script>
+
+
+<div class="flex items-center gap-4">
+  <div class="relative">
+    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-lg font-semibold text-text-muted" {...face1.getRootProps()}>
+      <img show={face1.src !== "" && face1.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face1.getImageProps()} />
+      <span show={!face1.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face1.getFallbackProps()}>JD</span>
+    </span>
+    <badge class="absolute -top-1 -right-1 grid h-6 w-6 place-items-center" variant="danger">6</badge>
+  </div>
+  <div class="relative">
+    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken text-lg font-semibold text-text-muted" {...face2.getRootProps()}>
+      <img show={face2.src !== "" && face2.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face2.getImageProps()} />
+      <span show={!face2.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face2.getFallbackProps()}>AB</span>
+    </span>
+    <badge class="absolute -top-1 -right-1 grid h-6 w-6 place-items-center" variant="danger">6</badge>
+  </div>
+</div>

package/dist/avatar/examples/badgeminimal.html

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { avatar } from "../avatar.presentation.js";
+
+  const machine = avatar({ label: "Avatar", fallback: "AB", src: "https://i.pravatar.cc/80?img=1" });
+</script>
+
+
+<div class="mx-auto flex w-full max-w-[20rem] justify-center">
+  <div class="relative">
+    <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-lg bg-surface-sunken text-lg font-semibold text-text-muted" {...machine.getRootProps()}>
+      <img show={machine.src !== "" && machine.status !== "error"} class="h-full w-full object-cover" draggable="false" {...machine.getImageProps()} />
+      <span show={!machine.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...machine.getFallbackProps()}>AB</span>
+    </span>
+    <badge class="absolute -top-1 -right-1 grid h-6 w-6 place-items-center" variant="danger">6</badge>
+  </div>
+</div>

package/dist/avatar/examples/basic.html

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { avatar } from "../avatar.presentation.js";
+
+  const machine = avatar({ label: "Paula Aster", fallback: "PA", src: "https://i.pravatar.cc/80?img=1" });
+</script>
+
+
+<div class="mx-auto flex w-full max-w-[20rem] justify-center">
+<span
+  class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-lg font-semibold text-text-muted"
+  {...machine.getRootProps()}
+>
+  <img show={machine.src !== "" && machine.status !== "error"}
+    class="h-full w-full object-cover"
+    draggable="false"
+    {...machine.getImageProps()}
+  />
+  <span show={!machine.loaded}
+    aria-hidden="true"
+    class="grid h-full w-full place-items-center"
+    {...machine.getFallbackProps()}
+  >PA</span>
+</span>
+</div>

package/dist/avatar/examples/count.html

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { avatar } from "../avatar.presentation.js";
+
+  const face1 = avatar({ label: "Jordan Doe", fallback: "JD", src: "https://i.pravatar.cc/80?img=1" });
+  const face2 = avatar({ label: "Sam Morgan", fallback: "SM", src: "https://i.pravatar.cc/80?img=2" });
+  const face3 = avatar({ label: "Alex Blair", fallback: "AB", src: "https://i.pravatar.cc/80?img=3" });
+  const face4 = avatar({ label: "Kai Lee", fallback: "KL", src: "https://i.pravatar.cc/80?img=4" });
+</script>
+
+
+<div class="flex">
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face1.getRootProps()}>
+    <img show={face1.src !== "" && face1.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face1.getImageProps()} />
+    <span show={!face1.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face1.getFallbackProps()}>JD</span>
+  </span>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face2.getRootProps()}>
+    <img show={face2.src !== "" && face2.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face2.getImageProps()} />
+    <span show={!face2.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face2.getFallbackProps()}>SM</span>
+  </span>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face3.getRootProps()}>
+    <img show={face3.src !== "" && face3.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face3.getImageProps()} />
+    <span show={!face3.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face3.getFallbackProps()}>AB</span>
+  </span>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face4.getRootProps()}>
+    <img show={face4.src !== "" && face4.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face4.getImageProps()} />
+    <span show={!face4.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face4.getFallbackProps()}>KL</span>
+  </span>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted border-2 border-solid border-surface">+3</span>
+</div>

package/dist/avatar/examples/fallback.html

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { avatar } from "../avatar.presentation.js";
+
+  const machine = avatar({ label: "Quinn Reyes", fallback: "QR" });
+</script>
+
+
+<div class="mx-auto flex w-full max-w-[20rem] justify-center">
+<span
+  class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-lg font-semibold text-text-muted"
+  {...machine.getRootProps()}
+>
+  <img show={machine.src !== "" && machine.status !== "error"}
+    class="h-full w-full object-cover"
+    draggable="false"
+    {...machine.getImageProps()}
+  />
+  <span show={!machine.loaded}
+    aria-hidden="true"
+    class="grid h-full w-full place-items-center"
+    {...machine.getFallbackProps()}
+  >QR</span>
+</span>
+</div>

package/dist/avatar/examples/group.html

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { avatar } from "../avatar.presentation.js";
+
+  const face1 = avatar({ label: "Jordan Doe", fallback: "JD", src: "https://i.pravatar.cc/80?img=1" });
+  const face2 = avatar({ label: "Sam Morgan", fallback: "SM", src: "https://i.pravatar.cc/80?img=2" });
+  const face3 = avatar({ label: "Alex Blair", fallback: "AB", src: "https://i.pravatar.cc/80?img=3" });
+  const face4 = avatar({ label: "Kai Lee", fallback: "KL", src: "https://i.pravatar.cc/80?img=4" });
+</script>
+
+
+<div class="flex">
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face1.getRootProps()}>
+    <img show={face1.src !== "" && face1.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face1.getImageProps()} />
+    <span show={!face1.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face1.getFallbackProps()}>JD</span>
+  </span>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face2.getRootProps()}>
+    <img show={face2.src !== "" && face2.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face2.getImageProps()} />
+    <span show={!face2.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face2.getFallbackProps()}>SM</span>
+  </span>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face3.getRootProps()}>
+    <img show={face3.src !== "" && face3.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face3.getImageProps()} />
+    <span show={!face3.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face3.getFallbackProps()}>AB</span>
+  </span>
+  <span class="relative grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-sm font-semibold text-text-muted" {...face4.getRootProps()}>
+    <img show={face4.src !== "" && face4.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face4.getImageProps()} />
+    <span show={!face4.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face4.getFallbackProps()}>KL</span>
+  </span>
+</div>

package/dist/avatar/examples/icon.html

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { avatar } from "../avatar.presentation.js";
+
+  const machine = avatar({ label: "Avatar", fallback: " " });
+</script>
+
+
+<div class="mx-auto flex w-full max-w-[20rem] justify-center">
+  <span class="relative grid h-16 w-16 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-text-muted" {...machine.getRootProps()}>
+    <img show={machine.src !== "" && machine.status !== "error"} class="h-full w-full object-cover" draggable="false" {...machine.getImageProps()} />
+    <span show={!machine.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...machine.getFallbackProps()}>
+      <span class="i-lucide-user text-lg" aria-hidden="true"></span>
+    </span>
+  </span>
+</div>