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

package/dist/editable/editable.state.d.ts

@@ -0,0 +1,54 @@
+export type EditableState = "preview" | "edit";
+export interface EditableContext {
+  value: string;
+  previousValue: string;
+  maxLength: number | null;
+  editControlled: boolean;
+  lastEvent: string;
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean | undefined;
+  required: boolean;
+  placeholder: string | {
+    readonly edit?: string;
+    readonly preview?: string;
+  };
+  autoResize: boolean;
+  dir: "ltr" | "rtl";
+  name: string | undefined;
+  form: string | undefined;
+  submitMode: string;
+  activationMode: string;
+  selectOnFocus: boolean;
+  onInteractOutside?: unknown;
+  onPointerDownOutside?: unknown;
+  onFocusOutside?: unknown;
+}
+export interface EditableArgs {
+  value?: string;
+  maxLength?: number;
+  defaultMaxLength?: number;
+  disabled?: boolean;
+  readOnly?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  placeholder?: string | {
+    readonly edit?: string;
+    readonly preview?: string;
+  };
+  autoResize?: boolean;
+  dir?: "ltr" | "rtl";
+  name?: string;
+  form?: string;
+  submitMode?: string;
+  activationMode?: string;
+  selectOnFocus?: boolean;
+  editing?: boolean;
+  defaultEdit?: boolean;
+  onInteractOutside?: unknown;
+  onPointerDownOutside?: unknown;
+  onFocusOutside?: unknown;
+  onEditChange?: unknown;
+}
+export declare function initial(args: EditableArgs | undefined, authored: (name: string) => boolean): EditableContext;
+//# sourceMappingURL=editable.state.d.ts.map

package/dist/editable/editable.state.js

@@ -0,0 +1,32 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/editable/editable.state.ts
+function initial(args = {}, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	const value = written("value") && typeof args.value === "string" ? args.value : "";
+	const cap = args.maxLength;
+	return {
+		value,
+		previousValue: value,
+		maxLength: written("maxLength") && typeof cap === "number" && Number.isFinite(cap) && cap > 0 ? Math.trunc(cap) : null,
+		editControlled: false,
+		lastEvent: "",
+		disabled: args.disabled === true,
+		readOnly: args.readOnly === true,
+		invalid: authored("invalid") ? args.invalid === true : void 0,
+		required: args.required === true,
+		placeholder: typeof args.placeholder === "string" || typeof args.placeholder === "object" && args.placeholder !== null ? args.placeholder : "",
+		autoResize: args.autoResize === true,
+		dir: args.dir === "rtl" ? "rtl" : "ltr",
+		name: typeof args.name === "string" && args.name.length > 0 ? args.name : void 0,
+		form: typeof args.form === "string" && args.form.length > 0 ? args.form : void 0,
+		submitMode: typeof args.submitMode === "string" ? args.submitMode : "both",
+		activationMode: typeof args.activationMode === "string" ? args.activationMode : "focus",
+		selectOnFocus: args.selectOnFocus !== false,
+		onInteractOutside: args.onInteractOutside,
+		onPointerDownOutside: args.onPointerDownOutside,
+		onFocusOutside: args.onFocusOutside
+	};
+}
+export { initial };
+
+//# sourceMappingURL=editable.state.js.map

package/dist/editable/editable.transitions.d.ts

@@ -0,0 +1,11 @@
+import { EditableEvents } from "./editable.events.js";
+import { EditableContext } from "./editable.state.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+type EditableAssign<K extends keyof EditableEvents = keyof EditableEvents> = AssignFor<EditableContext, EditableEvents, K>;
+export declare const setPreviousValue: EditableAssign;
+export declare const setLastEvent: EditableAssign<"CANCEL" | "SUBMIT">;
+export declare const revertValue: (ctx: EditableContext) => Partial<EditableContext>;
+export declare const isEditControlled: GuardFor<EditableContext, EditableEvents>;
+export declare const controlledPreviewIsSubmit: GuardFor<EditableContext, EditableEvents>;
+export {};
+//# sourceMappingURL=editable.transitions.d.ts.map

package/dist/editable/editable.transitions.js

@@ -0,0 +1,9 @@
+// src/editable/editable.transitions.ts
+const setPreviousValue = (ctx) => ({ previousValue: ctx.value });
+const setLastEvent = (_ctx, e) => ({ lastEvent: e.type });
+const revertValue = (ctx) => ctx.previousValue === "" ? {} : { value: ctx.previousValue };
+const isEditControlled = (ctx) => ctx.editControlled;
+const controlledPreviewIsSubmit = (_ctx, e) => e.type === "CONTROLLED.PREVIEW" && e.previousEvent === "SUBMIT";
+export { controlledPreviewIsSubmit, isEditControlled, revertValue, setLastEvent, setPreviousValue };
+
+//# sourceMappingURL=editable.transitions.js.map

package/dist/editable/examples/basic.html

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { editable } from "../editable.presentation.js";
+
+  const machine = editable({ value: "Ada Lovelace" });
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div class="mb-1 flex items-center justify-between gap-2">
+    <label
+      class="text-sm font-medium text-text transition-colors duration-fast ease-decelerate"
+      {...machine.getLabelProps()}
+    >Display name</label>
+  </div>
+
+  <div
+    class="relative rounded-md border border-solid border-border bg-surface-raised transition-shadow duration-fast ease-decelerate"
+    {...machine.getAreaProps()}
+  >
+    <span show={!machine.editing}
+      class="block min-w-0 cursor-text px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate hover:text-primary"
+      {...machine.getPreviewProps()}
+    >{machine.valueText}</span>
+    <input show={machine.editing}
+      class="w-full bg-transparent px-2 py-1 outline-none transition-colors duration-fast ease-decelerate placeholder:text-text-muted"
+      {...machine.getInputProps()}
+    />
+  </div>
+
+  <div class="mt-2 flex items-center gap-1" {...machine.getControlProps()}>
+    <button
+      class={["secondary icon s-sm", { "inline-flex": !machine.editing, "hidden": machine.editing }]}
+      {...machine.getEditTriggerProps()}
+    ><span class="i-lucide-pencil text-xs" aria-hidden="true"></span></button>
+    <button
+      class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]}
+      {...machine.getSubmitTriggerProps()}
+    ><span class="i-lucide-check text-xs" aria-hidden="true"></span></button>
+    <button
+      class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]}
+      {...machine.getCancelTriggerProps()}
+    ><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+  </div>
+</div>

package/dist/editable/examples/doubleclick.html

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { editable } from "../editable.presentation.js";
+
+  const machine = editable({ value: "Double-click me to edit", placeholder: "Double-click to edit…", activationMode: "dblclick" });
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div class="mb-1 flex items-center gap-2">
+    <span class="i-lucide-mouse-pointer-2 text-sm text-text-muted" aria-hidden="true"></span>
+    <label class="text-sm font-medium text-text transition-colors duration-fast ease-decelerate" {...machine.getLabelProps()}>Double-click me to edit</label>
+  </div>
+
+  <div class="relative rounded-md border border-solid border-border bg-surface-raised transition-shadow duration-fast ease-decelerate" {...machine.getAreaProps()}>
+    <span show={!machine.editing} class="block min-w-0 cursor-text px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate hover:text-primary" {...machine.getPreviewProps()}>{machine.valueText}</span>
+    <input show={machine.editing} class="w-full bg-transparent px-2 py-1 outline-none transition-colors duration-fast ease-decelerate placeholder:text-text-muted" {...machine.getInputProps()} />
+  </div>
+
+  <p class="text-xs text-text-muted">Double-click the text above to start editing</p>
+</div>

package/dist/editable/examples/inline-edit.html

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { editable } from "../editable.presentation.js";
+
+  const machine = editable({ value: "Click to edit inline note" });
+</script>
+
+<div class="w-full max-w-md" {...machine.getRootProps()}>
+  <label class="mb-1 block text-xs font-medium text-text-muted" {...machine.getLabelProps()}>Inline Note</label>
+  <div class="relative rounded-md border border-solid border-border bg-surface-raised" {...machine.getAreaProps()}>
+    <span show={!machine.editing} class="block min-w-0 cursor-text px-3 py-1 text-sm text-text hover:text-primary" {...machine.getPreviewProps()}>{machine.valueText}</span>
+    <input show={machine.editing} class="w-full bg-transparent px-3 py-1 outline-none" {...machine.getInputProps()} />
+  </div>
+</div>

package/dist/editable/examples/profile-field.html

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { editable } from "../editable.presentation.js";
+
+  const machine = editable({ value: "Principal Systems Architect" });
+</script>
+
+<div class="w-full max-w-md rounded-lg border border-solid border-border bg-surface-raised p-4" {...machine.getRootProps()}>
+  <div class="flex items-center justify-between gap-2">
+    <label class="text-xs font-semibold uppercase tracking-wide text-text-muted" {...machine.getLabelProps()}>Role Title</label>
+    <div class="flex items-center gap-1" {...machine.getControlProps()}>
+      <button class={["secondary icon s-sm", { "inline-flex": !machine.editing, "hidden": machine.editing }]} {...machine.getEditTriggerProps()}><span class="i-lucide-pencil text-xs" aria-hidden="true"></span></button>
+      <button class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]} {...machine.getSubmitTriggerProps()}><span class="i-lucide-check text-xs" aria-hidden="true"></span></button>
+      <button class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]} {...machine.getCancelTriggerProps()}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+    </div>
+  </div>
+  <div class="mt-1 rounded-md border border-solid border-transparent" {...machine.getAreaProps()}>
+    <span show={!machine.editing} class="block cursor-text py-1 font-medium text-text" {...machine.getPreviewProps()}>{machine.valueText}</span>
+    <input show={machine.editing} class="w-full bg-transparent py-1 font-medium" {...machine.getInputProps()} />
+  </div>
+</div>

package/dist/editable/examples/resize.html

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { editable } from "../editable.presentation.js";
+
+  const machine = editable({ value: "Short text", placeholder: "Type a longer message…", autoResize: true });
+</script>
+
+<div class="w-fit max-w-full" {...machine.getRootProps()}>
+  <div class="mb-1 flex items-center gap-2">
+    <span class="i-lucide-align-left text-sm text-text-muted" aria-hidden="true"></span>
+    <label class="text-sm font-medium text-text transition-colors duration-fast ease-decelerate" {...machine.getLabelProps()}>Short text</label>
+  </div>
+
+  <div class="relative grid rounded-md border border-solid border-border bg-surface-raised transition-shadow duration-fast ease-decelerate" {...machine.getAreaProps()}>
+    <span class={["col-start-1 row-start-1 block min-w-0 cursor-text px-2 py-1 text-sm text-text transition-colors duration-fast ease-decelerate hover:text-primary", { "invisible": machine.editing }]} {...machine.getPreviewProps()}>{machine.valueText}</span>
+    <input show={machine.editing} class="bare col-start-1 row-start-1 min-w-0 bg-transparent px-2 py-1 outline-none transition-colors duration-fast ease-decelerate placeholder:text-text-muted" {...machine.getInputProps()} />
+  </div>
+
+  <p class="text-xs text-text-muted">Click to edit • The field grows as you type</p>
+</div>

package/dist/editable/examples/task-item.html

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { editable } from "../editable.presentation.js";
+
+  const machine = editable({ value: "Finalize statechart transition audit" });
+</script>
+
+<div class="flex w-full max-w-md items-center gap-3 rounded-lg border border-solid border-border bg-surface-raised px-3 py-2" {...machine.getRootProps()}>
+  <span class="i-lucide-check-circle-2 shrink-0 text-sm text-primary" aria-hidden="true"></span>
+  <span class="sr-only" {...machine.getLabelProps()}>Task</span>
+  <div class="min-w-0 flex-1" {...machine.getAreaProps()}>
+    <span show={!machine.editing} class="block truncate cursor-text text-sm text-text" {...machine.getPreviewProps()}>{machine.valueText}</span>
+    <input show={machine.editing} class="w-full bg-transparent outline-none" {...machine.getInputProps()} />
+  </div>
+  <div class="flex shrink-0 items-center gap-1" {...machine.getControlProps()}>
+    <button class={["secondary icon s-sm", { "inline-flex": !machine.editing, "hidden": machine.editing }]} {...machine.getEditTriggerProps()}><span class="i-lucide-pencil text-xs" aria-hidden="true"></span></button>
+    <button class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]} {...machine.getSubmitTriggerProps()}><span class="i-lucide-check text-xs" aria-hidden="true"></span></button>
+    <button class={["secondary icon s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]} {...machine.getCancelTriggerProps()}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+  </div>
+</div>

package/dist/editable/examples/title-editor.html

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { editable } from "../editable.presentation.js";
+
+  const machine = editable({ value: "Q4 Architecture Roadmap" });
+</script>
+
+<div class="w-full max-w-md" {...machine.getRootProps()}>
+  <span class="sr-only" {...machine.getLabelProps()}>Document title</span>
+  <div class="rounded-lg border border-solid border-border bg-surface-raised px-3 py-2" {...machine.getAreaProps()}>
+    <span show={!machine.editing} class="block cursor-text text-lg font-semibold text-text hover:text-primary" {...machine.getPreviewProps()}>{machine.valueText}</span>
+    <input show={machine.editing} class="w-full bg-transparent text-lg font-semibold outline-none" {...machine.getInputProps()} />
+  </div>
+</div>

package/dist/editable/examples/with-controls.html

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { editable } from "../editable.presentation.js";
+
+  const machine = editable({ value: "Release v0.1.0 candidate" });
+</script>
+
+<div class="w-full max-w-md" {...machine.getRootProps()}>
+  <label class="block text-sm font-medium text-text" {...machine.getLabelProps()}>Release Tag</label>
+  <div class="flex items-center gap-2">
+    <div class="min-w-0 flex-1 rounded-md border border-solid border-border bg-surface-raised" {...machine.getAreaProps()}>
+      <span show={!machine.editing} class="block truncate cursor-text px-3 py-1 text-sm text-text" {...machine.getPreviewProps()}>{machine.valueText}</span>
+      <input show={machine.editing} class="w-full bg-transparent px-3 py-1 outline-none" {...machine.getInputProps()} />
+    </div>
+    <div class="flex shrink-0 items-center gap-1" {...machine.getControlProps()}>
+      <button class={["secondary s-sm", { "inline-flex": !machine.editing, "hidden": machine.editing }]} {...machine.getEditTriggerProps()}>Edit</button>
+      <button class={["s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]} {...machine.getSubmitTriggerProps()}>Save</button>
+      <button class={["secondary s-sm", { "inline-flex": machine.editing, "hidden": !machine.editing }]} {...machine.getCancelTriggerProps()}>Cancel</button>
+    </div>
+  </div>
+</div>

package/dist/file-upload/examples/avatar.html

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { fileUpload } from "../file-upload.presentation.js";
+
+  const machine = fileUpload({maxFiles: 1});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div
+    class={["flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-border bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging, "ring-2 ring-border-strong": machine.focused, "cursor-not-allowed opacity-50": machine.disabled }]}
+    {...machine.getDropzoneProps()}
+  >
+    <span class="i-lucide-upload text-lg text-text-muted" aria-hidden="true"></span>
+    <span class="text-sm text-text" {...machine.getLabelProps()}>Upload avatar</span>
+    <span class="text-xs text-text-muted">or click to browse</span>
+  </div>
+
+  <input {...machine.getHiddenInputProps()} />
+
+  <div class="mt-2 flex flex-col gap-1" {...machine.getItemGroupProps()}>
+    <template for={machine.getAcceptedRows()} as={row} key={row.value}>
+      <div class="flex items-center justify-between gap-2 rounded-md border border-solid border-border bg-surface-raised px-2 py-1" {...machine.getItemProps(row)}>
+        <span class="min-w-0 flex-1 truncate text-xs text-text" {...machine.getItemNameProps(row)}>{row.value}</span>
+        <span class="shrink-0 text-xs text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+        <button class="shrink-0 ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
+          <span class="i-lucide-x text-xs" aria-hidden="true"></span>
+        </button>
+      </div>
+    </template>
+  </div>
+
+  <div class="mt-1 flex justify-end">
+    <button class="ghost s-sm" {...machine.getClearTriggerProps()}>Clear</button>
+  </div>
+</div>

package/dist/file-upload/examples/basic.html

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { fileUpload } from "../file-upload.presentation.js";
+
+  const machine = fileUpload({ multiple: true, maxFiles: 5 });
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div
+    class={["flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-border bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging, "ring-2 ring-border-strong": machine.focused, "cursor-not-allowed opacity-50": machine.disabled }]}
+    {...machine.getDropzoneProps()}
+  >
+    <span class="i-lucide-upload-cloud icon-lg text-text-muted" aria-hidden="true"></span>
+    <span class="text-sm font-medium text-text" {...machine.getLabelProps()}>Drop files here or click to browse</span>
+    <span class="text-xs text-text-muted">Up to 5 files supported</span>
+  </div>
+
+  <input {...machine.getHiddenInputProps()} />
+
+  <div class="mt-2 flex flex-col gap-1" {...machine.getItemGroupProps()}>
+    <template for={machine.getAcceptedRows()} as={row} key={row.value}>
+      <div class="flex items-center justify-between gap-2 rounded-md border border-solid border-border bg-surface-raised px-3 py-1" {...machine.getItemProps(row)}>
+        <span class="min-w-0 flex-1 truncate text-xs text-text" {...machine.getItemNameProps(row)}>{row.value}</span>
+        <span class="shrink-0 text-xs text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+        <button class="ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
+          <span class="i-lucide-x text-xs" aria-hidden="true"></span>
+        </button>
+      </div>
+    </template>
+  </div>
+
+  <div class="mt-1 flex justify-end">
+    <button class="ghost s-sm" {...machine.getClearTriggerProps()}>Clear</button>
+  </div>
+</div>

package/dist/file-upload/examples/directory.html

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { fileUpload } from "../file-upload.presentation.js";
+
+  const machine = fileUpload({maxFiles: 100, directory: true});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div
+    class={["flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-border bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging, "ring-2 ring-border-strong": machine.focused, "cursor-not-allowed opacity-50": machine.disabled }]}
+    {...machine.getDropzoneProps()}
+  >
+    <span class="i-lucide-upload text-lg text-text-muted" aria-hidden="true"></span>
+    <span class="text-sm text-text" {...machine.getLabelProps()}>Upload directory</span>
+    <span class="text-xs text-text-muted">All files and subdirectories will be included</span>
+  </div>
+
+  <input {...machine.getHiddenInputProps()} />
+
+  <div class="mt-2 flex flex-col gap-1" {...machine.getItemGroupProps()}>
+    <template for={machine.getAcceptedRows()} as={row} key={row.value}>
+      <div class="flex items-center justify-between gap-2 rounded-md border border-solid border-border bg-surface-raised px-2 py-1" {...machine.getItemProps(row)}>
+        <span class="min-w-0 flex-1 truncate text-xs text-text" {...machine.getItemNameProps(row)}>{machine.getItemPathText(row) ?? row.value}</span>
+        <span class="shrink-0 text-xs text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+        <button class="shrink-0 ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
+          <span class="i-lucide-x text-xs" aria-hidden="true"></span>
+        </button>
+      </div>
+    </template>
+  </div>
+
+  <div class="mt-1 flex justify-end">
+    <button class="ghost s-sm" {...machine.getClearTriggerProps()}>Clear</button>
+  </div>
+</div>

package/dist/file-upload/examples/dragdrop.html

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { fileUpload } from "../file-upload.presentation.js";
+
+  const machine = fileUpload({ multiple: true, maxFiles: 10 });
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div
+    class={["flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-border bg-surface-raised px-6 py-8 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface": machine.dragging, "ring-2 ring-border-strong": machine.focused, "cursor-not-allowed opacity-50": machine.disabled }]}
+    {...machine.getDropzoneProps()}
+  >
+    <span class="i-lucide-folder-up icon-lg text-primary" aria-hidden="true"></span>
+    <span class="text-sm font-semibold text-text" {...machine.getLabelProps()}>Drag and drop project archives</span>
+    <span class="text-xs text-text-muted">ZIP, TAR, or source bundles up to 10 files</span>
+  </div>
+
+  <input {...machine.getHiddenInputProps()} />
+
+  <div class="mt-3 flex flex-col gap-2" {...machine.getItemGroupProps()}>
+    <template for={machine.getAcceptedRows()} as={row} key={row.value}>
+      <div class="flex items-center justify-between gap-2 rounded-md border border-solid border-border bg-surface px-3 py-2" {...machine.getItemProps(row)}>
+        <span class="i-lucide-file-archive shrink-0 text-sm text-text-muted" aria-hidden="true"></span>
+        <span class="min-w-0 flex-1 truncate text-xs font-medium text-text" {...machine.getItemNameProps(row)}>{row.value}</span>
+        <span class="shrink-0 text-xs text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+        <button class="ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
+          <span class="i-lucide-x text-xs" aria-hidden="true"></span>
+        </button>
+      </div>
+    </template>
+  </div>
+</div>

package/dist/file-upload/examples/files.html

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { fileUpload } from "../file-upload.presentation.js";
+
+  const machine = fileUpload({
+    multiple: true,
+    value: [
+      { name: "architecture-spec.pdf", size: 245760, type: "application/pdf" },
+      { name: "tokens.json", size: 18432, type: "application/json" },
+    ],
+  });
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div
+    class={["flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-dashed border-border bg-surface px-4 py-3 transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging }]}
+    {...machine.getDropzoneProps()}
+  >
+    <div class="flex items-center gap-2">
+      <span class="i-lucide-paperclip text-sm text-text-muted" aria-hidden="true"></span>
+      <span class="text-sm font-medium text-text" {...machine.getLabelProps()}>Attached Documents</span>
+    </div>
+    <span class="text-xs text-primary">Add files</span>
+  </div>
+
+  <input {...machine.getHiddenInputProps()} />
+
+  <div class="mt-2 flex flex-col gap-2" {...machine.getItemGroupProps()}>
+    <template for={machine.getAcceptedRows()} as={row} key={row.value}>
+      <div class="flex items-center justify-between gap-2 rounded-md border border-solid border-border bg-surface-raised px-3 py-2" {...machine.getItemProps(row)}>
+        <span class="i-lucide-file-text shrink-0 text-sm text-primary" aria-hidden="true"></span>
+        <span class="min-w-0 flex-1 truncate text-xs font-medium text-text" {...machine.getItemNameProps(row)}>{row.value}</span>
+        <span class="shrink-0 text-xs text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+        <button class="ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
+          <span class="i-lucide-trash-2 text-xs" aria-hidden="true"></span>
+        </button>
+      </div>
+    </template>
+  </div>
+</div>

package/dist/file-upload/examples/images.html

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { fileUpload } from "../file-upload.presentation.js";
+
+  const machine = fileUpload({
+    multiple: true,
+    accept: "image/*",
+    value: [
+      { name: "hero-banner.png", size: 512000, type: "image/png" },
+      { name: "avatar-preview.webp", size: 84200, type: "image/webp" },
+    ],
+  });
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div
+    class={["flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-border bg-surface px-4 py-5 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging }]}
+    {...machine.getDropzoneProps()}
+  >
+    <span class="i-lucide-image-plus icon-lg text-primary" aria-hidden="true"></span>
+    <span class="text-sm font-medium text-text" {...machine.getLabelProps()}>Upload gallery images</span>
+    <span class="text-xs text-text-muted">PNG, JPG, WEBP, or SVG</span>
+  </div>
+
+  <input {...machine.getHiddenInputProps()} />
+
+  <div class="mt-2 grid grid-cols-2 gap-2" {...machine.getItemGroupProps()}>
+    <template for={machine.getAcceptedRows()} as={row} key={row.value}>
+      <div class="flex items-center justify-between gap-2 rounded-lg border border-solid border-border bg-surface-raised p-2" {...machine.getItemProps(row)}>
+        <span class="i-lucide-image shrink-0 text-sm text-primary" aria-hidden="true"></span>
+        <div class="min-w-0 flex-1">
+          <span class="block truncate text-xs font-medium text-text" {...machine.getItemNameProps(row)}>{row.value}</span>
+          <span class="block text-xs text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+        </div>
+        <button class="ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
+          <span class="i-lucide-x text-xs" aria-hidden="true"></span>
+        </button>
+      </div>
+    </template>
+  </div>
+</div>

package/dist/file-upload/examples/paste.html

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { fileUpload } from "../file-upload.presentation.js";
+
+  const machine = fileUpload({ multiple: true });
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div
+    class={["flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging, "ring-2 ring-border-strong": machine.focused }]}
+    {...machine.getDropzoneProps()}
+  >
+    <span class="i-lucide-clipboard-paste text-lg text-text-muted" aria-hidden="true"></span>
+    <span class="text-sm font-medium text-text" {...machine.getLabelProps()}>Click or paste clipboard files</span>
+    <span class="text-xs text-text-muted">Screenshots and copied attachments</span>
+  </div>
+
+  <input {...machine.getHiddenInputProps()} />
+
+  <div class="mt-2 flex flex-col gap-1" {...machine.getItemGroupProps()}>
+    <template for={machine.getAcceptedRows()} as={row} key={row.value}>
+      <div class="flex items-center justify-between gap-2 rounded-md border border-solid border-border bg-surface-raised px-3 py-1" {...machine.getItemProps(row)}>
+        <span class="min-w-0 flex-1 truncate text-xs text-text" {...machine.getItemNameProps(row)}>{row.value}</span>
+        <span class="shrink-0 text-xs text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+        <button class="ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
+          <span class="i-lucide-x text-xs" aria-hidden="true"></span>
+        </button>
+      </div>
+    </template>
+  </div>
+</div>

package/dist/file-upload/examples/table.html

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { fileUpload } from "../file-upload.presentation.js";
+
+  const machine = fileUpload({
+    multiple: true,
+    value: [
+      { name: "release-notes.md", size: 4200, type: "text/markdown" },
+      { name: "bundle-stats.json", size: 128400, type: "application/json" },
+      { name: "schema.sql", size: 15800, type: "application/sql" },
+    ],
+  });
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div class="mb-2 flex items-center justify-between">
+    <div
+      class={["inline-flex cursor-pointer items-center gap-2 rounded-md border border-solid border-border bg-surface-raised px-3 py-1 text-xs font-medium text-text hover:bg-surface", { "border-primary": machine.dragging }]}
+      {...machine.getDropzoneProps()}
+    >
+      <span class="i-lucide-plus text-xs" aria-hidden="true"></span>
+      <span {...machine.getLabelProps()}>Upload Artifacts</span>
+    </div>
+    <button class="secondary s-sm" {...machine.getClearTriggerProps()}>Clear all</button>
+  </div>
+
+  <input {...machine.getHiddenInputProps()} />
+
+  <div class="overflow-hidden rounded-lg border border-solid border-border bg-surface-raised" {...machine.getItemGroupProps()}>
+    <template for={machine.getAcceptedRows()} as={row} key={row.value}>
+      <div class="flex items-center justify-between gap-3 border-b border-solid border-border px-3 py-2 text-xs last:border-b-0" {...machine.getItemProps(row)}>
+        <span class="min-w-0 flex-1 truncate font-medium text-text" {...machine.getItemNameProps(row)}>{row.value}</span>
+        <span class="shrink-0 font-mono text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+        <button class="ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
+          <span class="i-lucide-x text-xs" aria-hidden="true"></span>
+        </button>
+      </div>
+    </template>
+  </div>
+</div>

package/dist/file-upload/file-upload.events.d.ts

@@ -0,0 +1,27 @@
+import { FileRecord, FileRejection } from "./file-upload.state.js";
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface FileUploadEvents {
+  "INPUT.CHANGE": {
+    files: readonly FileRecord[];
+  };
+  "DROP": {
+    files: readonly FileRecord[];
+  };
+  "DROPZONE.FOCUS": {};
+  "DROPZONE.BLUR": {};
+  "DROPZONE.DRAG_OVER": {};
+  "DROPZONE.DRAG_LEAVE": {};
+  "FILE.REMOVE": {
+    name: string;
+  };
+  "VALUE.SET": {
+    value: readonly FileRecord[] | string;
+  };
+  "VALUE.CLEAR": {};
+}
+export type FileUploadEvent = EventUnion<FileUploadEvents>;
+export type FileUploadValueChange = {
+  readonly acceptedFiles: readonly FileRecord[];
+  readonly rejectedFiles: readonly FileRejection[];
+};
+//# sourceMappingURL=file-upload.events.d.ts.map

package/dist/file-upload/file-upload.events.js

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

package/dist/file-upload/file-upload.machine.d.ts

@@ -0,0 +1,6 @@
+import { FileRecord, FileRejection, FileUploadArgs, FileUploadContext, FileUploadState, filesOf, initial, matchesPattern, patterns, splitFiles } from "./file-upload.state.js";
+import { FileUploadEvent, FileUploadEvents, FileUploadValueChange } from "./file-upload.events.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function fileUpload(args?: FileUploadArgs, authored?: (name: string) => boolean): Machine<FileUploadContext, FileUploadEvents, FileUploadState>;
+export { type FileRecord, type FileRejection, type FileUploadArgs, type FileUploadContext, type FileUploadEvent, type FileUploadEvents, type FileUploadValueChange, filesOf, initial, matchesPattern, patterns, splitFiles };
+//# sourceMappingURL=file-upload.machine.d.ts.map