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

package/dist/theme-picker/theme-picker.transitions.js

@@ -0,0 +1,62 @@
+import { parseThemes } from "./theme-picker.state.js";
+// src/theme-picker/theme-picker.transitions.ts
+function enabledItems(ctx) {
+	return ctx.themes.filter((item) => !item.disabled).length;
+}
+function stepHighlight(ctx, direction) {
+	const items = ctx.themes;
+	if (items.length === 0) return ctx.highlightedValue;
+	const at = items.findIndex((item) => item.value === ctx.highlightedValue);
+	const start = at < 0 ? direction === 1 ? -1 : 0 : at;
+	for (let i = 1; i <= items.length; i++) {
+		const next = items[(start + direction * i + items.length * items.length) % items.length];
+		if (next !== void 0 && !next.disabled) return next.value;
+	}
+	return ctx.highlightedValue;
+}
+const moveNext = (ctx) => ({ highlightedValue: stepHighlight(ctx, 1) });
+const movePrev = (ctx) => ({ highlightedValue: stepHighlight(ctx, -1) });
+const moveFirst = (ctx) => {
+	const first = ctx.themes.find((item) => !item.disabled);
+	return first === void 0 ? {} : { highlightedValue: first.value };
+};
+const moveLast = (ctx) => {
+	const rest = [...ctx.themes].reverse().find((item) => !item.disabled);
+	return rest === void 0 ? {} : { highlightedValue: rest.value };
+};
+const setHighlight = (_ctx, event) => {
+	const value = event.value;
+	return typeof value === "string" ? { highlightedValue: value } : {};
+};
+const selectItem = (ctx, event) => {
+	const value = event.value;
+	if (typeof value !== "string") return {};
+	const item = ctx.themes.find((entry) => entry.value === value);
+	if (item === void 0 || item.disabled) return {};
+	return {
+		value,
+		highlightedValue: value
+	};
+};
+const setValue = (_ctx, event) => {
+	const value = event.value;
+	if (typeof value !== "string" || value.length === 0) return {};
+	return {
+		value,
+		highlightedValue: value
+	};
+};
+const setThemes = (_ctx, event) => {
+	const parsed = parseThemes(event.themes);
+	return parsed === null ? {} : { themes: parsed };
+};
+const selectEnabled = (ctx, event) => {
+	const value = event.value;
+	if (typeof value !== "string") return false;
+	const item = ctx.themes.find((entry) => entry.value === value);
+	return item !== void 0 && !item.disabled;
+};
+const hasEnabled = (ctx) => enabledItems(ctx) > 0;
+export { hasEnabled, moveFirst, moveLast, moveNext, movePrev, selectEnabled, selectItem, setHighlight, setThemes, setValue };
+
+//# sourceMappingURL=theme-picker.transitions.js.map

package/dist/timer/examples/basic.html

@@ -0,0 +1,36 @@
+<script lang="ts">
+import { timer } from "../timer.presentation.js";
+
+const machine = timer({
+ targetMs: "3600000",
+});
+</script>
+<div class="mx-auto w-full max-w-[20rem]" {...machine.getRootProps()}>
+ <div class="flex items-center justify-center gap-1"
+  {...machine.getAreaProps()}>
+  <template for={machine.getUnits()} as={unit} key={unit.type}>
+   <div class="flex flex-col items-center"
+    {...machine.getItemProps({ type: unit.type })}>
+    <span class="stat-value tabular-nums"
+     {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
+   </div>
+   <span aria-hidden="true" class="text-lg text-text-muted"
+    {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
+  </template>
+ </div>
+ <div class="mt-3 flex items-center justify-center gap-2"
+  {...machine.getControlProps()}>
+  <button
+   class="secondary s-sm"
+   {...machine.getActionTriggerProps({ action: "start" })}>Start</button>
+  <button
+   class="secondary s-sm"
+   {...machine.getActionTriggerProps({ action: "pause" })}>Pause</button>
+  <button
+   class="secondary s-sm"
+   {...machine.getActionTriggerProps({ action: "resume" })}>Resume</button>
+  <button
+   class="secondary s-sm"
+   {...machine.getActionTriggerProps({ action: "reset" })}>Reset</button>
+ </div>
+</div>

package/dist/timer/examples/card.html

@@ -0,0 +1,45 @@
+<script lang="ts">
+import { timer } from "../timer.presentation.js";
+
+const machine = timer({
+ targetMs: "2700000",
+});
+</script>
+<div class="mx-auto w-full max-w-[20rem]" {...machine.getRootProps()}>
+ <div
+  class="rounded-lg border border-solid border-border bg-surface-raised p-4"
+  {...machine.getAreaProps()}>
+  <div
+   class="mb-3 flex items-center gap-2"><span class="i-lucide-clock text-sm text-primary"></span><span class="text-sm font-medium text-text">Meeting Timer</span></div>
+  <div class="flex items-center justify-center gap-1">
+   <template for={machine.getUnits()} as={unit} key={unit.type}>
+    <div class="flex flex-col items-center"
+     {...machine.getItemProps({ type: unit.type })}>
+     <span
+      class="rounded-md border border-solid border-border bg-surface px-3 py-2 stat-value tabular-nums"
+      {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
+    </div>
+    <span aria-hidden="true" class="mx-1 text-text-muted"
+     {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
+   </template>
+  </div>
+  <div class="mt-3 h-2 w-full overflow-hidden rounded-full bg-surface">
+   <div class="h-full rounded-full bg-primary" {...machine.getProgressProps()}></div>
+  </div>
+ </div>
+ <div class="mt-3 flex items-center justify-center gap-2"
+  {...machine.getControlProps()}>
+  <button
+   class="secondary s-sm"
+   {...machine.getActionTriggerProps({ action: "start" })}>Start</button>
+  <button
+   class="secondary s-sm"
+   {...machine.getActionTriggerProps({ action: "pause" })}>Pause</button>
+  <button
+   class="secondary s-sm"
+   {...machine.getActionTriggerProps({ action: "resume" })}>Resume</button>
+  <button
+   class="secondary s-sm"
+   {...machine.getActionTriggerProps({ action: "reset" })}>Reset</button>
+ </div>
+</div>

package/dist/timer/examples/compact.html

@@ -0,0 +1,32 @@
+<script lang="ts">
+import { timer } from "../timer.presentation.js";
+
+const machine = timer({
+ targetMs: "900000",
+});
+</script>
+<div class="mx-auto w-full max-w-[20rem]" {...machine.getRootProps()}>
+ <div class="flex items-center gap-3" {...machine.getAreaProps()}>
+  <div class="flex items-center gap-1 text-sm tabular-nums text-text">
+   <template for={machine.getUnits()} as={unit} key={unit.type}>
+    <div class="flex items-center gap-1"
+     show={unit.type === "minutes" || unit.type === "seconds"}>
+     <div class="flex flex-col items-center" {...machine.getItemProps({ type: unit.type })}>
+      <span class="min-w-[2ch] text-center" {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
+     </div><span aria-hidden="true" class="text-text-muted" {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
+    </div>
+   </template>
+  </div>
+  <div class="flex items-center gap-1" {...machine.getControlProps()}>
+   <button aria-label="Start"
+    class="ghost icon s-sm grid h-7 w-7 place-items-center"
+    {...machine.getActionTriggerProps({ action: "start" })}><span class="i-lucide-play text-xs"></span></button>
+   <button aria-label="Pause"
+    class="ghost icon s-sm grid h-7 w-7 place-items-center"
+    {...machine.getActionTriggerProps({ action: "pause" })}><span class="i-lucide-pause text-xs"></span></button>
+   <button aria-label="Resume"
+    class="ghost icon s-sm grid h-7 w-7 place-items-center"
+    {...machine.getActionTriggerProps({ action: "resume" })}><span class="i-lucide-play text-xs"></span></button>
+  </div>
+ </div>
+</div>

package/dist/timer/examples/countdown.html

@@ -0,0 +1,45 @@
+<script lang="ts">
+import { timer } from "../timer.presentation.js";
+
+const machine = timer({
+ startMs: "86400000",
+ countdown: true,
+});
+</script>
+<div class="mx-auto w-full max-w-[20rem]" {...machine.getRootProps()}>
+ <div class="flex flex-col items-center" {...machine.getAreaProps()}>
+  <span
+   class="mb-2 text-sm font-medium text-semantic-error">Flash Sale Ends In</span>
+  <div
+   class="flex items-start gap-2 stat-value tabular-nums">
+   <template for={machine.getUnits()} as={unit} key={unit.type}>
+    <div class="flex items-start gap-2">
+     <div class="flex flex-col items-center"
+      {...machine.getItemProps({ type: unit.type })}>
+      <span class="min-w-[2ch] text-center"
+       {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
+      <span class="text-xs font-regular text-text-muted"
+       {...machine.getItemLabelProps({ type: unit.type })}>{unit.label}</span>
+     </div>
+     <span aria-hidden="true" class="text-text-muted"
+      {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
+    </div>
+   </template>
+  </div>
+  <div class="mt-3 flex items-center justify-center gap-2"
+   {...machine.getControlProps()}>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "start" })}>Start</button>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "pause" })}>Pause</button>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "resume" })}>Resume</button>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "reset" })}>Reset</button>
+  </div>
+ </div>
+</div>

package/dist/timer/examples/labels.html

@@ -0,0 +1,43 @@
+<script lang="ts">
+import { timer } from "../timer.presentation.js";
+
+const machine = timer({
+ targetMs: "5400000",
+});
+</script>
+<div class="mx-auto w-full max-w-[20rem]" {...machine.getRootProps()}>
+ <div class="flex flex-col items-center gap-3" {...machine.getAreaProps()}>
+  <span class="text-lg font-medium text-text">Study Session</span>
+  <div class="flex items-start gap-4">
+   <template for={machine.getUnits()} as={unit} key={unit.type}>
+    <div class="flex items-start gap-2"
+     show={unit.type === "minutes" || unit.type === "seconds"}>
+     <div class="flex flex-col items-center"
+      {...machine.getItemProps({ type: unit.type })}>
+      <span class="stat-value tabular-nums"
+       {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
+      <span class="text-xs text-text-muted"
+       {...machine.getItemLabelProps({ type: unit.type })}>{unit.label}</span>
+     </div>
+     <span aria-hidden="true" class="stat-value text-text-muted"
+      {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
+    </div>
+   </template>
+  </div>
+  <div class="mt-3 flex items-center justify-center gap-2"
+   {...machine.getControlProps()}>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "start" })}>Start</button>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "pause" })}>Pause</button>
+  <button
+   class="secondary s-sm"
+   {...machine.getActionTriggerProps({ action: "resume" })}>Resume</button>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "reset" })}>Reset</button>
+  </div>
+ </div>
+</div>

package/dist/timer/examples/large.html

@@ -0,0 +1,38 @@
+<script lang="ts">
+import { timer } from "../timer.presentation.js";
+
+const machine = timer({
+ targetMs: "7200000",
+});
+</script>
+<div class="mx-auto w-full max-w-[20rem]" {...machine.getRootProps()}>
+ <div class="flex flex-col items-center gap-4" {...machine.getAreaProps()}>
+  <div
+   class="flex items-center gap-2 text-3xl font-bold tabular-nums text-text">
+   <template for={machine.getUnits()} as={unit} key={unit.type}>
+    <div class="flex flex-col items-center"
+     {...machine.getItemProps({ type: unit.type })}>
+     <span class="min-w-[2ch] text-center"
+      {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
+    </div>
+    <span aria-hidden="true" class="text-text-muted"
+     {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
+   </template>
+  </div>
+  <div class="mt-3 flex items-center justify-center gap-2"
+   {...machine.getControlProps()}>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "start" })}>Start</button>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "pause" })}>Pause</button>
+  <button
+   class="secondary s-sm"
+   {...machine.getActionTriggerProps({ action: "resume" })}>Resume</button>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "reset" })}>Reset</button>
+  </div>
+ </div>
+</div>

package/dist/timer/examples/minimal.html

@@ -0,0 +1,21 @@
+<script lang="ts">
+import { timer } from "../timer.presentation.js";
+
+const machine = timer({
+ targetMs: "300000",
+});
+</script>
+<div class="mx-auto w-full max-w-[20rem]" {...machine.getRootProps()}>
+ <div class="text-center" {...machine.getAreaProps()}>
+  <div class="inline-flex items-center stat-value tabular-nums">
+   <template for={machine.getUnits()} as={unit} key={unit.type}>
+    <div class="flex items-center"
+     show={unit.type === "minutes" || unit.type === "seconds"}>
+     <div class="flex flex-col items-center" {...machine.getItemProps({ type: unit.type })}>
+      <span class="min-w-[2ch] text-center" {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
+     </div><span aria-hidden="true" class="text-text-muted" {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
+    </div>
+   </template>
+  </div>
+ </div>
+</div>

package/dist/timer/examples/pomodoro.html

@@ -0,0 +1,45 @@
+<script lang="ts">
+import { timer } from "../timer.presentation.js";
+
+const machine = timer({
+ startMs: "1500000",
+ countdown: true,
+});
+</script>
+<div class="mx-auto w-full max-w-[20rem]" {...machine.getRootProps()}>
+ <div
+  class="rounded-lg border-2 border-solid border-semantic-error bg-surface-raised p-4"
+  {...machine.getAreaProps()}>
+  <div
+   class="mb-3 flex items-center justify-center gap-2"><span class="grid h-8 w-8 place-items-center rounded-full bg-semantic-error text-on-semantic-error"><span class="i-lucide-coffee text-sm"></span></span><span class="font-semibold text-text">Focus Time</span></div>
+  <div
+   class="flex items-center justify-center stat-value tabular-nums">
+   <template for={machine.getUnits()} as={unit} key={unit.type}>
+    <div class="flex flex-col items-center"
+     {...machine.getItemProps({ type: unit.type })}>
+     <span class="min-w-[2ch] text-center"
+      {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
+    </div>
+    <span aria-hidden="true" class="text-lg text-text-muted"
+     {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
+   </template>
+  </div>
+  <div
+   class="mt-1 text-center text-xs text-text-muted">25 minutes of focused work</div>
+  <div class="mt-3 flex items-center justify-center gap-2"
+   {...machine.getControlProps()}>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "start" })}>Start</button>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "pause" })}>Pause</button>
+  <button
+   class="secondary s-sm"
+   {...machine.getActionTriggerProps({ action: "resume" })}>Resume</button>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "reset" })}>Reset</button>
+  </div>
+ </div>
+</div>

package/dist/timer/examples/workout.html

@@ -0,0 +1,47 @@
+<script lang="ts">
+import { timer } from "../timer.presentation.js";
+
+const machine = timer({
+ startMs: "1800000",
+ countdown: true,
+});
+</script>
+<div class="mx-auto w-full max-w-[20rem]" {...machine.getRootProps()}>
+ <div
+  class="rounded-lg border-2 border-solid border-semantic-success bg-surface-raised p-4"
+  {...machine.getAreaProps()}>
+  <div
+   class="mb-3 flex items-center justify-center gap-2"><span class="grid h-8 w-8 place-items-center rounded-full bg-semantic-success text-on-semantic-success"><span class="i-lucide-dumbbell text-sm"></span></span><span class="font-semibold text-text">Workout — Round 1 / 4</span></div>
+  <div
+   class="flex items-center justify-center stat-value tabular-nums">
+   <template for={machine.getUnits()} as={unit} key={unit.type}>
+    <div class="flex flex-col items-center"
+     {...machine.getItemProps({ type: unit.type })}>
+     <span class="min-w-[2ch] text-center"
+      {...machine.getItemValueProps({ type: unit.type })}>{machine.formattedTime[unit.type]}</span>
+     <span class="text-xs text-text-muted"
+      {...machine.getItemLabelProps({ type: unit.type })}>{unit.label}</span>
+    </div>
+    <span aria-hidden="true" class="text-lg text-text-muted"
+     {...machine.getSeparatorProps({ after: unit.type, last: unit.last })}>:</span>
+   </template>
+  </div>
+  <div
+   class="mt-1 text-center text-xs text-text-muted">45s work · 15s rest · 4 rounds</div>
+  <div class="mt-3 flex items-center justify-center gap-2"
+   {...machine.getControlProps()}>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "start" })}>Start</button>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "pause" })}>Pause</button>
+  <button
+   class="secondary s-sm"
+   {...machine.getActionTriggerProps({ action: "resume" })}>Resume</button>
+   <button
+    class="secondary s-sm"
+    {...machine.getActionTriggerProps({ action: "reset" })}>Reset</button>
+  </div>
+ </div>
+</div>

package/dist/timer/timer.events.d.ts

@@ -0,0 +1,18 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface TimerEvents {
+  "START": {};
+  "PAUSE": {};
+  "RESUME": {};
+  "RESET": {};
+  "RESTART": {
+    startMs?: string | number;
+  };
+  "TICK": {
+    deltaMs: number;
+  };
+  "CURRENT_MS.SET": {
+    currentMs: string | number;
+  };
+}
+export type TimerEvent = EventUnion<TimerEvents>;
+//# sourceMappingURL=timer.events.d.ts.map

package/dist/timer/timer.events.js

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

package/dist/timer/timer.machine.d.ts

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

package/dist/timer/timer.machine.js

@@ -0,0 +1,50 @@
+import { initial } from "./timer.state.js";
+import { isComplete, resetTime, restartChanged, setCurrentMs, tick } from "./timer.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/timer/timer.machine.ts
+function timer(args = {}, authored = () => false) {
+	return createMachine({
+		id: "timer",
+		initial: "idle",
+		context: initial(args, authored),
+		fields: {
+			startMs: { event: "RESTART" },
+			currentMs: { event: "CURRENT_MS.SET" },
+			targetMs: {},
+			countdown: {},
+			interval: {}
+		},
+		on: {
+			RESTART: {
+				target: "running",
+				cond: restartChanged,
+				assign: resetTime
+			},
+			"CURRENT_MS.SET": { assign: setCurrentMs }
+		},
+		states: {
+			idle: { on: {
+				START: { target: "running" },
+				RESET: { assign: resetTime }
+			} },
+			running: { on: {
+				PAUSE: { target: "paused" },
+				RESET: { assign: resetTime },
+				TICK: [{
+					target: "idle",
+					cond: isComplete
+				}, { assign: tick }]
+			} },
+			paused: { on: {
+				RESUME: { target: "running" },
+				RESET: {
+					target: "idle",
+					assign: resetTime
+				}
+			} }
+		}
+	});
+}
+export { timer };
+
+//# sourceMappingURL=timer.machine.js.map