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

package/dist/avatar/examples/multiples.html

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { avatar } from "../avatar.presentation.js";
+
+  const face1 = avatar({ label: "User One", fallback: "U1", src: "https://i.pravatar.cc/80?img=1" });
+  const face2 = avatar({ label: "User Two", fallback: "U2", src: "https://i.pravatar.cc/80?img=2" });
+  const face3 = avatar({ label: "User Three", fallback: "U3", src: "https://i.pravatar.cc/80?img=3" });
+  const face4 = avatar({ label: "User Four", fallback: "U4", src: "https://i.pravatar.cc/80?img=4" });
+</script>
+
+
+<div class="flex items-center gap-4">
+  <div class="flex flex-col items-center gap-2">
+    <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()}>U1</span>
+      </span>
+      <span class="absolute bottom-0 right-0 h-5 w-5 rounded-full border-2 border-solid border-surface bg-semantic-success"></span>
+    </div>
+  </div>
+  <div class="flex flex-col items-center gap-2">
+    <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" {...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()}>U2</span>
+      </span>
+      <span class="absolute bottom-0 right-0 h-5 w-5 rounded-full border-2 border-solid border-surface bg-semantic-warning"></span>
+    </div>
+  </div>
+  <div class="flex flex-col items-center gap-2">
+    <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" {...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()}>U3</span>
+      </span>
+      <span class="absolute bottom-0 right-0 h-5 w-5 rounded-full border-2 border-solid border-surface bg-semantic-error"></span>
+    </div>
+  </div>
+  <div class="flex flex-col items-center gap-2">
+    <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" {...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()}>U4</span>
+      </span>
+      <span class="absolute bottom-0 right-0 h-5 w-5 rounded-full border-2 border-solid border-surface bg-surface-sunken"></span>
+    </div>
+  </div>
+</div>

package/dist/avatar/examples/pills.html

@@ -0,0 +1,58 @@
+<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" });
+  const face5 = avatar({ label: "Jordan Doe", fallback: "JD", src: "https://i.pravatar.cc/80?img=5" });
+  const face6 = avatar({ label: "Sam Morgan", fallback: "SM", src: "https://i.pravatar.cc/80?img=6" });
+  const face7 = avatar({ label: "Alex Blair", fallback: "AB", src: "https://i.pravatar.cc/80?img=7" });
+  const face8 = avatar({ label: "Kai Lee", fallback: "KL", src: "https://i.pravatar.cc/80?img=8" });
+</script>
+
+
+<div class="flex items-center gap-4">
+  <div class="flex items-center gap-2 rounded-full border-2 border-solid border-border bg-surface px-4 py-2">
+    <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>
+    <span class="text-sm text-text-muted font-medium">+3</span>
+  </div>
+  <div class="flex items-center gap-2 rounded-full border border-solid border-border bg-surface px-4 py-2">
+    <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" {...face5.getRootProps()}>
+        <img show={face5.src !== "" && face5.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face5.getImageProps()} />
+        <span show={!face5.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face5.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" {...face6.getRootProps()}>
+        <img show={face6.src !== "" && face6.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face6.getImageProps()} />
+        <span show={!face6.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face6.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" {...face7.getRootProps()}>
+        <img show={face7.src !== "" && face7.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face7.getImageProps()} />
+        <span show={!face7.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face7.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" {...face8.getRootProps()}>
+        <img show={face8.src !== "" && face8.status !== "error"} class="h-full w-full object-cover" draggable="false" {...face8.getImageProps()} />
+        <span show={!face8.loaded} aria-hidden="true" class="grid h-full w-full place-items-center" {...face8.getFallbackProps()}>KL</span>
+      </span>
+    </div>
+    <span class="text-sm font-medium text-text-muted">+3</span>
+  </div>
+</div>

package/dist/avatar/examples/pillsolid.html

@@ -0,0 +1,21 @@
+<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" });
+</script>
+
+
+<div class="flex items-center gap-2 rounded-full border border-solid border-border bg-surface px-4 py-2">
+  <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>
+  </div>
+  <span class="text-sm font-medium text-text-muted">+3</span>
+</div>

package/dist/avatar/examples/rounded.html

@@ -0,0 +1,13 @@
+<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">
+  <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>
+</div>

package/dist/avatar/examples/status.html

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { avatar } from "../avatar.presentation.js";
+
+  const face1 = avatar({ label: "Sam Morgan", fallback: "SM", 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()}>SM</span>
+    </span>
+    <span class="absolute bottom-0 right-0 h-5 w-5 rounded-full border-2 border-solid border-surface bg-semantic-success"></span>
+  </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>
+    <span class="absolute -top-1 -right-1 h-4 w-4 rounded-full border-2 border-solid border-surface bg-semantic-success"></span>
+  </div>
+</div>

package/dist/avatar/examples/statusminimal.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>
+    <span class="absolute -top-1 -right-1 h-4 w-4 rounded-full border-2 border-solid border-surface bg-semantic-success"></span>
+  </div>
+</div>

package/dist/avatar/examples/trusted.html

@@ -0,0 +1,33 @@
+<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="mx-auto flex w-full max-w-[20rem] justify-center">
+  <div class="flex items-center gap-2 rounded-full border border-solid border-border bg-surface px-4 py-2">
+    <div class="flex">
+      <span class="relative grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-xs 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-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-xs 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-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-xs 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-8 w-8 shrink-0 place-items-center overflow-hidden rounded-full bg-surface-sunken text-xs 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>
+    <span class="text-sm text-text-muted font-medium">Trusted by <span class="font-bold text-text">80K+</span> developers.</span>
+  </div>
+</div>

package/dist/avatar/examples/verification.html

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { avatar } from "../avatar.presentation.js";
+
+  const machine = avatar({ label: "Avatar", fallback: "VU", 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-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()}>VU</span>
+    </span>
+    <span class="absolute bottom-0 right-0 grid h-6 w-6 place-items-center rounded-full border-2 border-solid border-surface bg-primary text-xs text-on-primary">
+      <span class="i-lucide-check text-xs" aria-hidden="true"></span>
+    </span>
+  </div>
+</div>

package/dist/carousel/carousel.events.d.ts

@@ -0,0 +1,50 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface CarouselEvents {
+  "NEXT": {};
+  "PREV": {};
+  "GO_TO": {
+    index: number;
+  };
+  "PAGES.SET": {
+    count: number;
+  };
+  "SLIDE.VIEW": {
+    index: number;
+    inView: boolean;
+  };
+  "DRAG.START": {};
+  "DRAG.END": {};
+  "SCROLL.SETTLE": {
+    index: number;
+  };
+  "POINTER.DOWN": {};
+  "VIEWPORT.FOCUS": {};
+  "VIEWPORT.BLUR": {};
+  "PART.FOCUS": {
+    id: string;
+  };
+  "PART.BLUR": {
+    id: string;
+  };
+  "AUTOPLAY.START": {};
+  "AUTOPLAY.STOP": {};
+  "AUTOPLAY.TICK": {};
+}
+export type CarouselEvent = EventUnion<CarouselEvents>;
+export interface CarouselIndexChange {
+  readonly index: number;
+  readonly pageCount: number;
+}
+export interface CarouselSlideView {
+  readonly index: number;
+  readonly inView: boolean;
+}
+export interface CarouselDragStatusChange {
+  readonly status: "idle" | "focus" | "dragging" | "settling";
+  readonly index: number;
+}
+export interface CarouselAutoplayStatusChange {
+  readonly status: "playing" | "stopped";
+  readonly index: number;
+}
+//# sourceMappingURL=carousel.events.d.ts.map

package/dist/carousel/carousel.events.js

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

package/dist/carousel/carousel.machine.d.ts

@@ -0,0 +1,6 @@
+import { CarouselEvents } from "./carousel.events.js";
+import { CarouselArgs, CarouselContext, CarouselState } from "./carousel.state.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function carousel(args?: CarouselArgs, authored?: (name: string) => boolean): Machine<CarouselContext, CarouselEvents, CarouselState>;
+export type { CarouselArgs, CarouselContext, CarouselEvents };
+//# sourceMappingURL=carousel.machine.d.ts.map

package/dist/carousel/carousel.machine.js

@@ -0,0 +1,70 @@
+import { initial } from "./carousel.state.js";
+import { advance, autoplayStart, autoplayStop, dragEnd, dragStart, goTo, pagesSet, partBlur, partFocus, previous, scrollSettle, slideView, viewportBlur, viewportFocus } from "./carousel.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/carousel/carousel.machine.ts
+function carousel(args = {}, authored = () => false) {
+	return createMachine({
+		id: "carousel",
+		initial: "idle",
+		context: initial(args, authored),
+		fields: {
+			index: { event: "GO_TO" },
+			loop: {},
+			orientation: {},
+			allowMouseDrag: {},
+			autoplayDelay: {},
+			dir: {},
+			inViewThreshold: {},
+			autoSize: {},
+			slidesPerPage: {}
+		},
+		on: {
+			"NEXT": {
+				target: "idle",
+				assign: advance
+			},
+			"PREV": {
+				target: "idle",
+				assign: previous
+			},
+			"GO_TO": {
+				target: "idle",
+				assign: goTo
+			},
+			"PAGES.SET": { assign: pagesSet },
+			"SLIDE.VIEW": { assign: slideView },
+			"DRAG.START": {
+				target: "idle",
+				assign: dragStart
+			},
+			"DRAG.END": { assign: dragEnd },
+			"SCROLL.SETTLE": { assign: scrollSettle },
+			"POINTER.DOWN": { target: "idle" },
+			"VIEWPORT.FOCUS": {
+				target: "idle",
+				assign: viewportFocus
+			},
+			"VIEWPORT.BLUR": { assign: viewportBlur },
+			"PART.FOCUS": { assign: partFocus },
+			"PART.BLUR": { assign: partBlur },
+			"AUTOPLAY.START": {
+				target: "autoplay",
+				assign: autoplayStart
+			},
+			"AUTOPLAY.STOP": {
+				target: "idle",
+				assign: autoplayStop
+			}
+		},
+		states: {
+			idle: {},
+			autoplay: { on: { "AUTOPLAY.TICK": {
+				target: "autoplay",
+				assign: advance
+			} } }
+		}
+	});
+}
+export { carousel };
+
+//# sourceMappingURL=carousel.machine.js.map