@sepale/components 0.0.0-stage → 0.1.0

package/dist/components/EmptyState.svelte

@@ -0,0 +1,64 @@
+<script module lang="ts">
+	/** What .empty-state is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'empty-state';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* A dashed frame, as around a drop zone. */
+		variant: ['dashed']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['icon', 'title', 'body', 'actions'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * What to show when there is nothing: no results, an empty folder, a list
+	 * not started yet. Sits in the `empty` slot of Table, Grid and List.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+		title?: string;
+		/** An illustration or an icon, in a disc. Defaults to an empty tray. */
+		icon?: Snippet;
+		/** What to do about it: buttons, links. */
+		actions?: Snippet;
+		class?: string;
+		/** The explanation, under the title. */
+		children?: Snippet;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		title,
+		icon,
+		actions,
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<div {...applied.rest} class={classes}>
+	<div class="empty-state-icon" aria-hidden="true">
+		{#if icon}
+			{@render icon()}
+		{:else}
+			<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+				<path d="M3 13h5l1.5 2.5h5L16 13h5" /><path d="M5.5 5h13L21 13v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5z" />
+			</svg>
+		{/if}
+	</div>
+	{#if title}<p class="empty-state-title">{title}</p>{/if}
+	{#if children}<p class="empty-state-body">{@render children()}</p>{/if}
+	{#if actions}<div class="empty-state-actions">{@render actions()}</div>{/if}
+</div>

package/dist/components/EmptyState.svelte.d.ts

@@ -0,0 +1,29 @@
+/** What .empty-state is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "empty-state";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly variant: readonly ["dashed"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["icon", "title", "body", "actions"];
+/**
+     * What to show when there is nothing: no results, an empty folder, a list
+     * not started yet. Sits in the `empty` slot of Table, Grid and List.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title?: string;
+    /** An illustration or an icon, in a disc. Defaults to an empty tray. */
+    icon?: Snippet;
+    /** What to do about it: buttons, links. */
+    actions?: Snippet;
+    class?: string;
+    /** The explanation, under the title. */
+    children?: Snippet;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/Fieldset.svelte

@@ -0,0 +1,42 @@
+<script module lang="ts">
+	/** What .fieldset is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'fieldset';
+
+	export const AXES = {} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['legend', 'label'] as const;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLFieldsetAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLFieldsetAttributes {
+		/** The group's heading. */
+		legend?: string | Snippet;
+		/** A note under the group. */
+		label?: string | Snippet;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		legend,
+		label,
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<fieldset {...applied.rest} class={classes}>
+	{#if legend}<legend class="fieldset-legend">{#if typeof legend === 'function'}{@render legend()}{:else}{legend}{/if}</legend>{/if}
+	{@render children?.()}
+	{#if label}<p class="fieldset-label">{#if typeof label === 'function'}{@render label()}{:else}{label}{/if}</p>{/if}
+</fieldset>

package/dist/components/Fieldset.svelte.d.ts

@@ -0,0 +1,20 @@
+/** What .fieldset is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "fieldset";
+export declare const AXES: {};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["legend", "label"];
+import type { Snippet } from 'svelte';
+import type { HTMLFieldsetAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLFieldsetAttributes {
+    /** The group's heading. */
+    legend?: string | Snippet;
+    /** A note under the group. */
+    label?: string | Snippet;
+    class?: string;
+    children?: Snippet;
+}
+declare const Fieldset: import("svelte").Component<Props, {}, "">;
+type Fieldset = ReturnType<typeof Fieldset>;
+export default Fieldset;

package/dist/components/FileDropzone.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+	/**
+	 * Its content becomes a place to drop files on. It draws nothing of its
+	 * own — no namespace —: what is inside is the look, `over` says when
+	 * files are dragged above it, `open()` opens the file dialog.
+	 *
+	 * A visually hidden `<input type="file">` holds the files: it carries
+	 * `name`, `accept`, `multiple` and `required`, so a form submits and
+	 * validates them, and a drop fills it as a pick does. `onFiles` gets the
+	 * files that match `accept` (and `maxSize`), then those that do not.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+		/** As on a file input: `image/*`, `.pdf`, `application/json`… */
+		accept?: string;
+		/** Several files at once. */
+		multiple?: boolean;
+		/** Neither drops nor the dialog. */
+		disabled?: boolean;
+		/** For a form: the file input's name. */
+		name?: string;
+		/** A file is needed: the file input says so to its form. */
+		required?: boolean;
+		/** On the file input. */
+		id?: string;
+		/** A click on the zone opens the dialog. Off by default: the content usually holds its own button. */
+		clickable?: boolean;
+		/** Largest file, in bytes. */
+		maxSize?: number;
+		/** Files are dragged above the zone. Bindable, for a look drawn outside it. */
+		over?: boolean;
+		/** After a drop or a pick: the files kept, then the ones refused. */
+		onFiles?: (accepted: File[], rejected: File[]) => void;
+		/** The content, given whether files are dragged above it and how to open the dialog. */
+		children?: Snippet<[{ over: boolean; open: () => void }]>;
+		class?: string;
+	}
+
+	let {
+		accept,
+		multiple = false,
+		disabled = false,
+		name,
+		required = false,
+		id,
+		clickable = false,
+		maxSize = Infinity,
+		over = $bindable(false),
+		onFiles,
+		children,
+		class: klass = '',
+		...rest
+	}: Props = $props();
+
+	let input: HTMLInputElement | undefined = $state();
+	/** dragenter / dragleave fire for every child crossed: count them. */
+	let depth = 0;
+	function count(next: number) {
+		depth = Math.max(0, next);
+		over = depth > 0;
+	}
+
+	/** Open the file dialog. */
+	export function open() {
+		if (!disabled) input?.click();
+	}
+
+	function matches(file: File): boolean {
+		if (file.size > maxSize) return false;
+		if (!accept) return true;
+		const type = file.type.toLowerCase();
+		const fileName = file.name.toLowerCase();
+		return accept.split(',').some((raw) => {
+			const rule = raw.trim().toLowerCase();
+			if (!rule) return false;
+			if (rule.startsWith('.')) return fileName.endsWith(rule);
+			if (rule.endsWith('/*')) return type.startsWith(rule.slice(0, -1));
+			return type === rule;
+		});
+	}
+
+	function take(list: FileList | File[]) {
+		const files = multiple ? [...list] : [...list].slice(0, 1);
+		const accepted = files.filter(matches);
+		const rejected = files.filter((f) => !matches(f));
+		onFiles?.(accepted, rejected);
+	}
+
+	const carriesFiles = (e: DragEvent) => !!e.dataTransfer?.types.includes('Files');
+
+	function handleDragEnter(e: DragEvent) {
+		if (disabled || !carriesFiles(e)) return;
+		e.preventDefault();
+		count(depth + 1);
+	}
+
+	function handleDragOver(e: DragEvent) {
+		if (disabled || !carriesFiles(e)) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+	}
+
+	function handleDragLeave(e: DragEvent) {
+		if (disabled || !carriesFiles(e)) return;
+		count(depth - 1);
+	}
+
+	function handleDrop(e: DragEvent) {
+		count(0);
+		if (disabled || !e.dataTransfer?.files.length) return;
+		e.preventDefault();
+		const dropped = e.dataTransfer.files;
+		// The file input holds what was dropped, as if picked: a form sees it.
+		if (input) {
+			const kept = new DataTransfer();
+			for (const f of multiple ? [...dropped] : [...dropped].slice(0, 1)) if (matches(f)) kept.items.add(f);
+			input.files = kept.files;
+		}
+		take(dropped);
+	}
+</script>
+
+<!-- The zone itself is not a control: the content holds the button, or
+     `clickable` makes a click anywhere open the dialog. -->
+<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+<div
+	{...rest}
+	class={klass}
+	style="position: relative;"
+	data-over={over || undefined}
+	ondragenter={handleDragEnter}
+	ondragover={handleDragOver}
+	ondragleave={handleDragLeave}
+	ondrop={handleDrop}
+	onclick={clickable ? (e) => { if (e.target !== input) open(); } : undefined}
+>
+	{@render children?.({ over, open })}
+	<input
+		bind:this={input}
+		type="file"
+		{id}
+		{name}
+		{accept}
+		{multiple}
+		{required}
+		{disabled}
+		tabindex="-1"
+		aria-hidden="true"
+		style="position: absolute; inset-inline-start: 0; inset-block-end: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none;"
+		onchange={(e) => e.currentTarget.files && take(e.currentTarget.files)}
+	/>
+</div>

package/dist/components/FileDropzone.svelte.d.ts

@@ -0,0 +1,45 @@
+/**
+     * Its content becomes a place to drop files on. It draws nothing of its
+     * own — no namespace —: what is inside is the look, `over` says when
+     * files are dragged above it, `open()` opens the file dialog.
+     *
+     * A visually hidden `<input type="file">` holds the files: it carries
+     * `name`, `accept`, `multiple` and `required`, so a form submits and
+     * validates them, and a drop fills it as a pick does. `onFiles` gets the
+     * files that match `accept` (and `maxSize`), then those that do not.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** As on a file input: `image/*`, `.pdf`, `application/json`… */
+    accept?: string;
+    /** Several files at once. */
+    multiple?: boolean;
+    /** Neither drops nor the dialog. */
+    disabled?: boolean;
+    /** For a form: the file input's name. */
+    name?: string;
+    /** A file is needed: the file input says so to its form. */
+    required?: boolean;
+    /** On the file input. */
+    id?: string;
+    /** A click on the zone opens the dialog. Off by default: the content usually holds its own button. */
+    clickable?: boolean;
+    /** Largest file, in bytes. */
+    maxSize?: number;
+    /** Files are dragged above the zone. Bindable, for a look drawn outside it. */
+    over?: boolean;
+    /** After a drop or a pick: the files kept, then the ones refused. */
+    onFiles?: (accepted: File[], rejected: File[]) => void;
+    /** The content, given whether files are dragged above it and how to open the dialog. */
+    children?: Snippet<[{
+        over: boolean;
+        open: () => void;
+    }]>;
+    class?: string;
+}
+declare const FileDropzone: import("svelte").Component<Props, {
+    open: () => void;
+}, "over">;
+type FileDropzone = ReturnType<typeof FileDropzone>;
+export default FileDropzone;