@orochibraru/ui 1.0.0 → 1.0.1

package/dist/components/kit/file-dropzone.svelte

@@ -0,0 +1,253 @@
+<script lang="ts" module>
+	export type { FileRejection } from "./file-dropzone/files.js";
+</script>
+
+<script lang="ts">
+	import FileIcon from "@lucide/svelte/icons/file";
+	import FileAudioIcon from "@lucide/svelte/icons/file-headphone";
+	import FileImageIcon from "@lucide/svelte/icons/file-image";
+	import FileVideoIcon from "@lucide/svelte/icons/file-play";
+	import FileTextIcon from "@lucide/svelte/icons/file-text";
+	import FolderUpIcon from "@lucide/svelte/icons/folder-up";
+	import UploadIcon from "@lucide/svelte/icons/upload";
+	import XIcon from "@lucide/svelte/icons/x";
+
+	import { Button } from "../ui/button/index.js";
+	import { cn } from "../../utils.js";
+
+	import FieldFrame, { errorList, type FieldProps } from "./field-frame.svelte";
+	import {
+		displaySize,
+		type FileRejection,
+		filesIn,
+		rejectionOf,
+	} from "./file-dropzone/files.js";
+
+	const defaultMessages = {
+		drop: "Drop files here, or click to choose",
+		tap: "Tap to choose files",
+		folder: "Or choose a folder",
+		maxFiles: (count: number) =>
+			count === 1 ? "One file" : `Up to ${count} files`,
+		maxFileSize: (size: string) => `${size} max each`,
+		remove: (name: string) => `Remove ${name}`,
+	};
+
+	type Props = FieldProps & {
+		files?: File[];
+		accept?: string;
+		maxFiles?: number;
+		maxFileSize?: number;
+		folders?: boolean;
+		onfiles?: (added: File[]) => void;
+		onreject?: (rejected: { file: File; reason: FileRejection }) => void;
+		messages?: Partial<typeof defaultMessages>;
+	};
+
+	let {
+		files = $bindable([]),
+		name,
+		label,
+		description,
+		error,
+		required = false,
+		disabled = false,
+		id,
+		class: className,
+		accept,
+		maxFiles,
+		maxFileSize,
+		folders = false,
+		onfiles,
+		onreject,
+		messages = {},
+	}: Props = $props();
+
+	const text = $derived({ ...defaultMessages, ...messages });
+	const generatedId = $props.id();
+	const inputId = $derived(id ?? generatedId);
+	const invalid = $derived(errorList(error).length > 0);
+	const full = $derived(maxFiles !== undefined && files.length >= maxFiles);
+	const blocked = $derived(disabled || full);
+	const limits = $derived(
+		[
+			maxFiles !== undefined && text.maxFiles(maxFiles),
+			maxFileSize !== undefined && text.maxFileSize(displaySize(maxFileSize)),
+		]
+			.filter(Boolean)
+			.join(", "),
+	);
+
+	let input = $state<HTMLInputElement | null>(null);
+	let dragDepth = $state(0);
+
+	$effect(() => {
+		if (!input || typeof DataTransfer === "undefined") {
+			return;
+		}
+		const transfer = new DataTransfer();
+		for (const file of files) {
+			transfer.items.add(file);
+		}
+		input.files = transfer.files;
+	});
+
+	function add(incoming: File[]) {
+		const accepted: File[] = [];
+		for (const file of incoming) {
+			const reason = rejectionOf(file, files.length + accepted.length + 1, {
+				accept,
+				maxFiles,
+				maxFileSize,
+			});
+			if (reason) {
+				onreject?.({ file, reason });
+			} else {
+				accepted.push(file);
+			}
+		}
+		if (accepted.length > 0) {
+			files = [...files, ...accepted];
+			onfiles?.(accepted);
+		}
+	}
+
+	function remove(index: number) {
+		files = files.filter((_, position) => position !== index);
+	}
+
+	async function ondrop(event: DragEvent) {
+		event.preventDefault();
+		dragDepth = 0;
+		if (blocked || !event.dataTransfer) {
+			return;
+		}
+		const entries = Array.from(event.dataTransfer.items)
+			.map((item) => item.webkitGetAsEntry?.())
+			.filter((entry): entry is FileSystemEntry => Boolean(entry));
+		if (folders && entries.some((entry) => entry.isDirectory)) {
+			add((await Promise.all(entries.map(filesIn))).flat());
+			return;
+		}
+		add(Array.from(event.dataTransfer.files));
+	}
+
+	function onpick(event: Event & { currentTarget: HTMLInputElement }) {
+		const picked = Array.from(event.currentTarget.files ?? []);
+		event.currentTarget.value = "";
+		files = [...files];
+		add(picked);
+	}
+
+	function iconOf(file: File) {
+		if (file.type.startsWith("image/")) {
+			return FileImageIcon;
+		}
+		if (file.type.startsWith("video/")) {
+			return FileVideoIcon;
+		}
+		if (file.type.startsWith("audio/")) {
+			return FileAudioIcon;
+		}
+		return file.type.startsWith("text/") || file.type === "application/pdf"
+			? FileTextIcon
+			: FileIcon;
+	}
+</script>
+
+<FieldFrame
+	id={inputId}
+	{label}
+	{description}
+	{error}
+	{required}
+	class={className}
+>
+	<label
+		for={inputId}
+		aria-disabled={blocked || undefined}
+		data-dragging={dragDepth > 0 || undefined}
+		data-invalid={invalid || undefined}
+		class="border-input hover:bg-accent/40 has-focus-visible:ring-ring/50 data-dragging:border-primary data-dragging:bg-primary/5 data-invalid:border-destructive flex min-h-40 cursor-pointer flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed bg-white p-6 text-center transition-colors has-focus-visible:ring-3 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 dark:bg-transparent"
+		ondragenter={(event) => {
+			event.preventDefault();
+			dragDepth += 1;
+		}}
+		ondragover={(event) => event.preventDefault()}
+		ondragleave={() => (dragDepth = Math.max(0, dragDepth - 1))}
+		{ondrop}
+	>
+		<span
+			class="bg-accent text-accent-foreground flex size-12 items-center justify-center rounded-2xl"
+		>
+			<UploadIcon class="size-6" />
+		</span>
+		<span class="font-medium">
+			<span class="max-md:hidden">{text.drop}</span>
+			<span class="md:hidden">{text.tap}</span>
+		</span>
+		{#if limits}
+			<span class="text-muted-foreground text-sm">{limits}</span>
+		{/if}
+		<input
+			bind:this={input}
+			id={inputId}
+			{name}
+			type="file"
+			{accept}
+			multiple={maxFiles !== 1}
+			disabled={blocked}
+			aria-invalid={invalid || undefined}
+			aria-describedby={invalid
+				? `${inputId}-error`
+				: description
+					? `${inputId}-description`
+					: undefined}
+			class="sr-only"
+			onchange={onpick}
+		/>
+	</label>
+	{#if folders}
+		<label
+			class="text-primary has-focus-visible:ring-ring/50 inline-flex min-h-11 cursor-pointer items-center gap-2 self-start rounded-lg text-sm font-medium has-focus-visible:ring-3"
+		>
+			<FolderUpIcon class="size-4" />
+			{text.folder}
+			<input
+				type="file"
+				webkitdirectory
+				disabled={blocked}
+				class="sr-only"
+				onchange={onpick}
+			/>
+		</label>
+	{/if}
+	{#if files.length > 0}
+		<ul class="border-border divide-border divide-y rounded-2xl border">
+			{#each files as file, index (`${file.name}-${file.size}-${index}`)}
+				{@const Icon = iconOf(file)}
+				<li class="flex min-h-14 items-center gap-3 py-2 pr-1.5 pl-3">
+					<Icon class="text-muted-foreground size-5 shrink-0" />
+					<span class="min-w-0 flex-1">
+						<span class="block truncate text-sm font-medium"
+							>{file.webkitRelativePath || file.name}</span
+						>
+						<span class="text-muted-foreground block text-xs tabular"
+							>{displaySize(file.size)}</span
+						>
+					</span>
+					<Button
+						variant="ghost"
+						size="icon"
+						class={cn("size-11 rounded-full md:size-9")}
+						aria-label={text.remove(file.name)}
+						{disabled}
+						onclick={() => remove(index)}
+					>
+						<XIcon />
+					</Button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</FieldFrame>

package/dist/components/kit/file-dropzone.svelte.d.ts

@@ -0,0 +1,25 @@
+export type { FileRejection } from "./file-dropzone/files.js";
+import { type FieldProps } from "./field-frame.svelte";
+import { type FileRejection } from "./file-dropzone/files.js";
+declare const FileDropzone: import("svelte").Component<FieldProps & {
+    files?: File[];
+    accept?: string;
+    maxFiles?: number;
+    maxFileSize?: number;
+    folders?: boolean;
+    onfiles?: (added: File[]) => void;
+    onreject?: (rejected: {
+        file: File;
+        reason: FileRejection;
+    }) => void;
+    messages?: Partial<{
+        drop: string;
+        tap: string;
+        folder: string;
+        maxFiles: (count: number) => string;
+        maxFileSize: (size: string) => string;
+        remove: (name: string) => string;
+    }>;
+}, {}, "files">;
+type FileDropzone = ReturnType<typeof FileDropzone>;
+export default FileDropzone;

package/dist/components/kit/form.svelte

@@ -0,0 +1,335 @@
+<script lang="ts" module>
+	import type { Component } from "svelte";
+
+	export type FormFieldType =
+		| "text"
+		| "email"
+		| "password"
+		| "number"
+		| "url"
+		| "tel"
+		| "search"
+		| "textarea"
+		| "select"
+		| "date"
+		| "checkbox"
+		| "switch"
+		| "checkboxes"
+		| "radio"
+		| "segmented"
+		| "file";
+
+	export interface FormFieldOption {
+		value: string;
+		label: string;
+		description?: string;
+		icon?: Component<{ class?: string }>;
+		disabled?: boolean;
+	}
+
+	export interface FormField {
+		name: string;
+		type?: FormFieldType;
+		label?: string;
+		description?: string;
+		placeholder?: string;
+		required?: boolean;
+		disabled?: boolean;
+		autocomplete?: HTMLInputElement["autocomplete"];
+		options?: FormFieldOption[];
+		searchable?: boolean;
+		variant?: "list" | "cards";
+		rows?: number;
+		maxlength?: number;
+		min?: string;
+		max?: string;
+		/** For `file`: what it accepts, how many and how big. */
+		accept?: string;
+		maxFiles?: number;
+		maxFileSize?: number;
+		/** Takes the whole row when the form has two columns. */
+		span?: "full";
+	}
+
+	export type FormValues = Record<string, string | string[] | boolean>;
+
+	/** Each field's starting value: what `values` gives, else empty for its type. */
+	export function initialValues(
+		fields: FormField[],
+		values: FormValues = {},
+	): FormValues {
+		return Object.fromEntries(
+			fields.map((field) => [
+				field.name,
+				values[field.name] ??
+					(field.type === "checkbox" || field.type === "switch"
+						? false
+						: field.type === "checkboxes"
+							? []
+							: ""),
+			]),
+		);
+	}
+</script>
+
+<script lang="ts">
+	import { enhance } from "$app/forms";
+	import { type Snippet, untrack } from "svelte";
+
+	import { Button } from "../ui/button/index.js";
+	import { Spinner } from "../ui/spinner/index.js";
+	import { type ActionData, enhanceToast } from "../../toast.js";
+	import { cn } from "../../utils.js";
+
+	import CheckboxList from "./checkbox-list.svelte";
+	import Checkbox from "./checkbox.svelte";
+	import DateField from "./date-field.svelte";
+	import FileDropzone from "./file-dropzone.svelte";
+	import Input from "./input.svelte";
+	import RadioList from "./radio-list.svelte";
+	import SegmentedControl from "./segmented-control.svelte";
+	import Select from "./select.svelte";
+	import Switch from "./switch.svelte";
+	import Textarea from "./textarea.svelte";
+
+	const defaultMessages = {
+		submit: "Save",
+		loading: "Saving",
+		success: "Saved.",
+		error: "Couldn't save. Check the form and try again.",
+	};
+
+	interface Props {
+		fields: FormField[];
+		values?: FormValues;
+		action?: string;
+		/** Field errors to show, like a form action's `errors` after a full-page submit. */
+		errors?: Record<string, string[] | undefined>;
+		columns?: 1 | 2;
+		onsuccess?: (data: ActionData) => void | Promise<void>;
+		children?: Snippet;
+		actions?: Snippet<[{ pending: boolean }]>;
+		messages?: Partial<typeof defaultMessages>;
+		class?: string;
+	}
+
+	let {
+		fields,
+		values = $bindable({}),
+		action,
+		errors = {},
+		columns = 2,
+		onsuccess,
+		children,
+		actions,
+		messages = {},
+		class: className,
+	}: Props = $props();
+
+	const text = $derived({ ...defaultMessages, ...messages });
+
+	let current = $state<FormValues>(
+		initialValues(
+			untrack(() => fields),
+			untrack(() => values),
+		),
+	);
+	let returnedErrors = $state<Record<string, string[] | undefined>>({});
+	let pending = $state(false);
+
+	values = current;
+
+	const fieldErrors = $derived({ ...errors, ...returnedErrors });
+
+	function textValue(name: string) {
+		return {
+			get value() {
+				return String(current[name] ?? "");
+			},
+			set value(next: string) {
+				current[name] = next;
+			},
+		};
+	}
+
+	function listValue(name: string) {
+		return {
+			get value() {
+				const value = current[name];
+				return Array.isArray(value) ? value : [];
+			},
+			set value(next: string[]) {
+				current[name] = next;
+			},
+		};
+	}
+
+	function checkedValue(name: string) {
+		return {
+			get value() {
+				return current[name] === true;
+			},
+			set value(next: boolean) {
+				current[name] = next;
+			},
+		};
+	}
+
+	function errorsFrom(data: ActionData): Record<string, string[] | undefined> {
+		const found = data?.errors;
+		return found && typeof found === "object"
+			? (found as Record<string, string[] | undefined>)
+			: {};
+	}
+
+	const submit = $derived(
+		enhanceToast({
+			loading: text.loading,
+			success: text.success,
+			error: text.error,
+			onStart: () => {
+				pending = true;
+				returnedErrors = {};
+			},
+			onSettled: () => {
+				pending = false;
+			},
+			onFailure: (data) => {
+				returnedErrors = errorsFrom(data);
+			},
+			onSuccess: async (data) => {
+				await onsuccess?.(data);
+			},
+		}),
+	);
+</script>
+
+<form
+	method="POST"
+	{action}
+	enctype={fields.some((field) => field.type === "file")
+		? "multipart/form-data"
+		: undefined}
+	use:enhance={submit}
+	class={cn("grid gap-6", className)}
+	novalidate
+>
+	<div
+		class={cn(
+			"grid grid-cols-1 gap-x-6 gap-y-5",
+			columns === 2 && "md:grid-cols-2",
+		)}
+	>
+		{#each fields as field (field.name)}
+			{@const type = field.type ?? "text"}
+			{@const common = {
+				name: field.name,
+				label: field.label,
+				description: field.description,
+				required: field.required,
+				disabled: field.disabled || pending,
+				error: fieldErrors[field.name],
+			}}
+			<div
+				class={cn(
+					"min-w-0",
+					(field.span === "full" ||
+						type === "textarea" ||
+						type === "checkboxes" ||
+						type === "file" ||
+						(type === "radio" && field.variant === "cards")) &&
+						"md:col-span-2",
+				)}
+			>
+				{#if type === "textarea"}
+					{@const bound = textValue(field.name)}
+					<Textarea
+						{...common}
+						placeholder={field.placeholder}
+						rows={field.rows}
+						maxlength={field.maxlength}
+						bind:value={bound.value}
+					/>
+				{:else if type === "select"}
+					{@const bound = textValue(field.name)}
+					<Select
+						{...common}
+						options={field.options ?? []}
+						placeholder={field.placeholder}
+						searchable={field.searchable}
+						bind:value={bound.value}
+					/>
+				{:else if type === "date"}
+					{@const bound = textValue(field.name)}
+					<DateField
+						{...common}
+						min={field.min}
+						max={field.max}
+						placeholder={field.placeholder}
+						bind:value={bound.value}
+					/>
+				{:else if type === "checkbox"}
+					{@const bound = checkedValue(field.name)}
+					<Checkbox {...common} bind:checked={bound.value} />
+				{:else if type === "switch"}
+					{@const bound = checkedValue(field.name)}
+					<Switch {...common} bind:checked={bound.value} />
+				{:else if type === "checkboxes"}
+					{@const bound = listValue(field.name)}
+					<CheckboxList
+						{...common}
+						options={field.options ?? []}
+						bind:value={bound.value}
+					/>
+				{:else if type === "radio"}
+					{@const bound = textValue(field.name)}
+					<RadioList
+						{...common}
+						options={field.options ?? []}
+						variant={field.variant}
+						bind:value={bound.value}
+					/>
+				{:else if type === "file"}
+					<FileDropzone
+						{...common}
+						accept={field.accept}
+						maxFiles={field.maxFiles}
+						maxFileSize={field.maxFileSize}
+					/>
+				{:else if type === "segmented"}
+					{@const bound = textValue(field.name)}
+					<SegmentedControl
+						{...common}
+						options={field.options ?? []}
+						bind:value={bound.value}
+					/>
+				{:else}
+					{@const bound = textValue(field.name)}
+					<Input
+						{...common}
+						{type}
+						placeholder={field.placeholder}
+						autocomplete={field.autocomplete}
+						maxlength={field.maxlength}
+						bind:value={bound.value}
+					/>
+				{/if}
+			</div>
+		{/each}
+	</div>
+	{@render children?.()}
+	{#if actions}
+		{@render actions({ pending })}
+	{:else}
+		<div class="flex justify-end">
+			<Button
+				type="submit"
+				disabled={pending}
+				class="h-11 w-full rounded-xl md:w-auto md:px-6"
+			>
+				{#if pending}<Spinner />{/if}
+				{text.submit}
+			</Button>
+		</div>
+	{/if}
+</form>

package/dist/components/kit/form.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { Component } from "svelte";
+export type FormFieldType = "text" | "email" | "password" | "number" | "url" | "tel" | "search" | "textarea" | "select" | "date" | "checkbox" | "switch" | "checkboxes" | "radio" | "segmented" | "file";
+export interface FormFieldOption {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+    disabled?: boolean;
+}
+export interface FormField {
+    name: string;
+    type?: FormFieldType;
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    autocomplete?: HTMLInputElement["autocomplete"];
+    options?: FormFieldOption[];
+    searchable?: boolean;
+    variant?: "list" | "cards";
+    rows?: number;
+    maxlength?: number;
+    min?: string;
+    max?: string;
+    /** For `file`: what it accepts, how many and how big. */
+    accept?: string;
+    maxFiles?: number;
+    maxFileSize?: number;
+    /** Takes the whole row when the form has two columns. */
+    span?: "full";
+}
+export type FormValues = Record<string, string | string[] | boolean>;
+/** Each field's starting value: what `values` gives, else empty for its type. */
+export declare function initialValues(fields: FormField[], values?: FormValues): FormValues;
+import { type Snippet } from "svelte";
+import { type ActionData } from "../../toast.js";
+declare const Form: Component<{
+    fields: FormField[];
+    values?: FormValues;
+    action?: string;
+    /** Field errors to show, like a form action's `errors` after a full-page submit. */
+    errors?: Record<string, string[] | undefined>;
+    columns?: 1 | 2;
+    onsuccess?: (data: ActionData) => void | Promise<void>;
+    children?: Snippet;
+    actions?: Snippet<[{
+        pending: boolean;
+    }]>;
+    messages?: Partial<{
+        submit: string;
+        loading: string;
+        success: string;
+        error: string;
+    }>;
+    class?: string;
+}, {}, "values">;
+type Form = ReturnType<typeof Form>;
+export default Form;