@delightstack/components 0.1.0

package/dist/feedback/Toast.svelte.d.ts

@@ -0,0 +1,54 @@
+type Position = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastOptions {
+    /** Optional secondary line shown beneath the title. */
+    description?: string;
+    /** Auto-dismiss delay in milliseconds (overrides the Toaster default) */
+    duration?: number;
+    /** Whether the toast shows a close button */
+    dismissible?: boolean;
+    /** Style the toast as a success message */
+    success?: boolean;
+    /** Style the toast as a warning message */
+    warning?: boolean;
+    /** Style the toast as an error message */
+    error?: boolean;
+    /** Style the toast as an informational message */
+    info?: boolean;
+    /** An action button shown in the toast */
+    action?: {
+        label: string;
+        onclick: () => void;
+    };
+    /** Whether the toast stays until manually dismissed (no auto-dismiss) */
+    persistent?: boolean;
+    /** Custom toast id — reusing an id updates the existing toast in place */
+    id?: string;
+}
+/** Show a toast notification. Returns the toast ID for later dismissal. */
+export declare function toast(message: string, options?: ToastOptions): string;
+export declare namespace toast {
+    var success: (message: string, options?: ToastOptions) => string;
+    var error: (message: string, options?: ToastOptions) => string;
+    var warning: (message: string, options?: ToastOptions) => string;
+    var info: (message: string, options?: ToastOptions) => string;
+    var loading: (message: string, options?: ToastOptions) => string;
+    var promise: <T>(p: Promise<T>, messages: {
+        loading: string;
+        success: string | ((result: T) => string);
+        error: string | ((err: Error) => string);
+    }, options?: ToastOptions) => Promise<T>;
+    var dismiss: (id?: string) => void;
+}
+declare const Toast: import("svelte").Component<{
+    position?: Position;
+    max_visible?: number;
+    gap?: number;
+    width?: number;
+    duration?: number;
+    rich_colors?: boolean;
+    id?: string;
+    class?: string;
+}, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;
+//# sourceMappingURL=Toast.svelte.d.ts.map

package/dist/feedback/Toast.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.svelte.d.ts","sourceRoot":"","sources":["../../src/feedback/Toast.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,QAAQ,GACV,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAElB,MAAM,WAAW,YAAY;IAC5B,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kDAAkD;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;CACZ;AAiGD,2EAA2E;AAC3E,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAErE;yBAFe,KAAK;2BAIqB,MAAM,YAAY,YAAY,KAAG,MAAM;yBAI3C,MAAM,YAAY,YAAY,KAAG,MAAM;2BAInC,MAAM,YAAY,YAAY,KAAG,MAAM;wBAI7C,MAAM,YAAY,YAAY,KAAG,MAAM;2BAIjC,MAAM,YAAY,YAAY,KAAG,MAAM;kBAI1C,CAAC,KACpC,OAAO,CAAC,CAAC,CAAC,YACH;QACT,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;QAC1C,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC;KACzC,YACS,YAAY,KACpB,OAAO,CAAC,CAAC,CAAC;uBAsByB,MAAM,KAAG,IAAI;;AAsYpD,QAAA,MAAM,KAAK;eAlXyE,QAAQ;kBAAgB,MAAM;UAAQ,MAAM;YAAU,MAAM;eAAa,MAAM;kBAAgB,OAAO;;YAA8B,MAAM;UAkX3K,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/feedback/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Callout } from './Callout.svelte';
+export { default as Confetti, confetti } from './Confetti.svelte';
+export type { ConfettiOptions, ConfettiTarget, CannonOptions, RainOptions, } from './Confetti.svelte';
+export { default as Progress } from './Progress.svelte';
+export { default as Toaster, toast } from './Toast.svelte';
+export type { ToastOptions } from './Toast.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/feedback/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/feedback/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClE,YAAY,EACX,eAAe,EACf,cAAc,EACd,aAAa,EACb,WAAW,GACX,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC3D,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/feedback/index.js

@@ -0,0 +1,4 @@
+export { default as Callout } from './Callout.svelte';
+export { default as Confetti, confetti } from './Confetti.svelte';
+export { default as Progress } from './Progress.svelte';
+export { default as Toaster, toast } from './Toast.svelte';

package/dist/form/Checkbox.svelte

@@ -0,0 +1,449 @@
+<script lang="ts">
+	import { ripple, tooltip } from '@delightstack/utilities';
+	import { getContext } from 'svelte';
+	import type { FormContext } from './Form.svelte';
+
+	const propId = $props.id();
+	let {
+		/** Whether the checkbox is checked. When omitted inside a Form (with a
+		 *  name), the checked state is driven by the form data instead. */
+		checked = $bindable() as boolean | undefined,
+
+		/** Whether the checkbox is in an indeterminate state */
+		indeterminate = false,
+
+		/** The value submitted with form data */
+		value = '',
+
+		/** Whether the checkbox is disabled */
+		disabled = false,
+
+		/** The size of the checkbox. 0=16px, 1=20px, 2=24px, 3=28px */
+		size = '1' as '0' | '1' | '2' | '3',
+
+		/** The label text for the checkbox */
+		label = '',
+
+		/** A description shown below the label */
+		description = '',
+
+		/** An error message shown below the checkbox */
+		error = '',
+
+		/** Parses & validates the value (e.g. a database table form field's
+		 *  `parse`). Inside a Form it is registered with the form, which runs it
+		 *  on the form's validation timing. */
+		parse = undefined as ((value: unknown) => unknown) | undefined,
+
+		/** Tri-state mode (set by optional non-defaulted boolean form fields):
+		 *  a null/undefined value means "unanswered" and displays as
+		 *  indeterminate. Clicking resolves to checked, matching the browser's
+		 *  native indeterminate-checkbox behavior — use Toggle for a control
+		 *  the user can cycle back to the middle state. */
+		tristate = false,
+
+		/** The field's default value (set by defaulted boolean form fields):
+		 *  shown when the form data has no value yet, so the display matches
+		 *  what saving would persist. */
+		default_checked = undefined as boolean | undefined,
+
+		/** Whether the checkbox is required */
+		required = false,
+
+		/** The tooltip message shown on hover */
+		tooltip: tooltip_message = '',
+
+		/** Whether the checkbox should display in a condensed view */
+		dense = false,
+
+		/** Whether the checkbox should display in an expanded view */
+		comfortable = false,
+
+		/** The ID of the checkbox element */
+		id = propId,
+
+		/** The name attribute for the hidden input */
+		name = '',
+
+		/** Specifies a custom class name for the container element */
+		class: class_name = '',
+
+		/** Called when the checked state changes */
+		onchange = undefined as
+			| ((detail: { checked: boolean; value: string }) => void)
+			| undefined,
+	} = $props();
+
+	const sizes: Record<string, number> = { '0': 16, '1': 20, '2': 24, '3': 28 };
+	const px = $derived(sizes[size] ?? 20);
+
+	let animation = $state<'none' | 'check' | 'uncheck'>('none');
+	let indicator_element = $state<HTMLElement | undefined>(undefined);
+
+	/* ------------------------------------------------------------------ */
+	/*  Form context integration                                           */
+	/* ------------------------------------------------------------------ */
+
+	const form_ctx = getContext<FormContext | undefined>('form');
+
+	$effect(() => {
+		if (!form_ctx || !name) return;
+		if (indicator_element) form_ctx.register(name, indicator_element, parse);
+		return () => {
+			if (name) form_ctx.unregister(name);
+		};
+	});
+
+	/**
+	 * Context-driven mode: inside a Form, with a name, and no checked prop,
+	 * the checkbox mirrors the form data (e.g. an entity's draft) —
+	 * `<Checkbox {...field.is_public} />` needs no bind:checked.
+	 */
+	const context_driven = !!(form_ctx && name && checked === undefined);
+
+	$effect(() => {
+		if (!context_driven || !form_ctx || !name) return;
+		const ctx_value = form_ctx.getValue(name);
+		let next: boolean | undefined;
+		if (ctx_value === undefined || ctx_value === null) {
+			// Unanswered: tri-state fields stay undefined (indeterminate display),
+			// defaulted fields show their default, plain booleans show unchecked
+			next = tristate ? undefined : (default_checked ?? false);
+		} else {
+			next = Boolean(ctx_value);
+		}
+		if (next !== checked) checked = next;
+	});
+
+	/** The effective checked state (an omitted checked prop means unchecked) */
+	const is_checked = $derived(checked ?? false);
+
+	/** Indeterminate display: the explicit prop, or an unanswered tri-state value */
+	const show_indeterminate = $derived(
+		indeterminate || (tristate && (checked === undefined || checked === null)),
+	);
+
+	/** Error from the local prop or the form context */
+	const resolved_error = $derived.by(() => {
+		if (error) return error;
+		if (form_ctx && name && form_ctx.errors[name]) return form_ctx.errors[name];
+		return '';
+	});
+
+	function toggle() {
+		if (disabled) return;
+		checked = !is_checked;
+		animation = checked ? 'check' : 'uncheck';
+		setTimeout(() => (animation = 'none'), checked ? 350 : 50);
+		if (form_ctx && name) {
+			form_ctx.setValue(name, checked);
+			form_ctx.setTouched(name);
+		}
+		onchange?.({ checked, value });
+	}
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (e.key === ' ') {
+			e.preventDefault();
+			toggle();
+		}
+	}
+</script>
+
+<!-- The whole container is the click target so the hit area matches the
+     hover/press feedback (which keys off `.checkbox`). Keyboard activation
+     stays on the focusable role="checkbox" indicator below. -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class={['checkbox', class_name].filter(Boolean).join(' ')}
+	class:dense
+	class:comfortable
+	class:disabled
+	class:has-error={!!resolved_error}
+	{@attach tooltip(tooltip_message)}
+	style:--size="{px}px"
+	style:font-size={`var(--control-font-${size})`}
+	onclick={toggle}>
+	<!-- Hidden native input for form submission -->
+	<input
+		type="checkbox"
+		{id}
+		{name}
+		{value}
+		{required}
+		{disabled}
+		checked={is_checked}
+		indeterminate={show_indeterminate}
+		tabindex={-1}
+		aria-hidden="true" />
+
+	<div
+		bind:this={indicator_element}
+		class="indicator-wrapper"
+		class:checked={is_checked}
+		class:indeterminate={show_indeterminate}
+		role="checkbox"
+		tabindex={disabled ? -1 : 0}
+		aria-checked={show_indeterminate ? 'mixed' : is_checked}
+		aria-disabled={disabled}
+		aria-labelledby={label ? `${id}-label` : undefined}
+		{@attach ripple({ enabled: !disabled, centered: true, opacity: 0.15 })}
+		onkeydown={onKeyDown}>
+		<svg
+			class="indicator"
+			class:checked={is_checked}
+			class:indeterminate={show_indeterminate}
+			class:animating-check={animation === 'check'}
+			class:animating-uncheck={animation === 'uncheck'}
+			viewBox="0 0 24 24"
+			width={px}
+			height={px}
+			fill="none">
+			<rect class="box" x="2" y="2" width="20" height="20" rx="3" stroke-width="2" />
+			{#if show_indeterminate}
+				<line
+					class="dash"
+					x1="7"
+					y1="12"
+					x2="17"
+					y2="12"
+					stroke-width="2.5"
+					stroke-linecap="round" />
+			{:else}
+				<path
+					class="check"
+					d="M6 12.5 L10 16.5 L18 8"
+					stroke-width="2.5"
+					stroke-linecap="round"
+					stroke-linejoin="round" />
+			{/if}
+		</svg>
+	</div>
+
+	{#if label || description}
+		<div class="content">
+			{#if label}
+				<span id="{id}-label" class="label">{label}</span>
+			{/if}
+			{#if description}
+				<span class="description">{description}</span>
+			{/if}
+		</div>
+	{/if}
+
+	{#if resolved_error}
+		<span class="error-text">{resolved_error}</span>
+	{/if}
+</div>
+
+<style>
+	.checkbox {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		gap: 0.5em;
+		/* The whole container is clickable, so the pointer cursor and the
+		   hover/press feedback now line up with the actual hit area. Bound it
+		   to its content (indicator + label + description) so a block-level
+		   parent can't stretch the hit area across the whole row. */
+		width: fit-content;
+		cursor: pointer;
+		user-select: none;
+		position: relative;
+		perspective: 100px;
+		transition: translate 200ms ease;
+
+		&:not(.disabled):active {
+			translate: 0px 3px clamp(-10px, calc(0.2em - 12px), -2px);
+		}
+
+		&.dense {
+			gap: 0.25em;
+		}
+		&.comfortable {
+			gap: 0.75em;
+		}
+		&.disabled {
+			opacity: 0.5;
+			pointer-events: none;
+		}
+		&.has-error {
+			.indicator .box {
+				stroke: var(--color-error, #d32f2f);
+			}
+			.error-text {
+				display: block;
+			}
+		}
+
+		/* Hover: circular background tint on indicator (triggers from label hover too) */
+		&:not(.disabled):hover > .indicator-wrapper {
+			background: var(--hover-tint);
+			transition: none;
+		}
+
+		/* Active: press scale on indicator (triggers from label click too) */
+		&:not(.disabled):active > .indicator-wrapper {
+			transform: scale(0.9);
+			transition:
+				transform 80ms ease,
+				background 200ms ease;
+		}
+	}
+
+	/* Hidden native checkbox, kept for form submission */
+	input {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+		padding: 0;
+		margin: -1px;
+	}
+
+	.indicator-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: calc(var(--size) + 20px);
+		height: calc(var(--size) + 20px);
+		border-radius: 50%;
+		cursor: pointer;
+		flex-shrink: 0;
+		overflow: hidden;
+		outline: none;
+		-webkit-tap-highlight-color: transparent;
+		--hover-tint: color-mix(in srgb, var(--color-text, currentColor) 12%, transparent);
+		transition:
+			background 200ms ease,
+			transform 150ms ease;
+
+		/* Accent-tinted hover when checked or indeterminate */
+		&.checked,
+		&.indeterminate {
+			--hover-tint: color-mix(in srgb, var(--color-action, #1976d2) 16%, transparent);
+		}
+
+		&:focus-visible {
+			box-shadow: 0 0 0 2px var(--color-text, currentColor);
+			border-radius: 50%;
+		}
+	}
+
+	.indicator {
+		flex-shrink: 0;
+
+		.box {
+			stroke: var(--color-text-disabled, #999);
+			fill: transparent;
+			transition:
+				stroke 150ms ease,
+				fill 150ms ease;
+		}
+
+		.check {
+			stroke: transparent;
+			fill: none;
+			stroke-dasharray: 28;
+			stroke-dashoffset: 28;
+			transition:
+				stroke-dashoffset 250ms ease,
+				stroke 150ms ease;
+		}
+
+		.dash {
+			stroke: transparent;
+			transition: stroke 150ms ease;
+		}
+
+		&.checked {
+			.box {
+				stroke: var(--color-action, #1976d2);
+				fill: var(--color-action, #1976d2);
+			}
+			.check {
+				stroke: var(--color-action-text, #fff);
+				stroke-dashoffset: 0;
+			}
+		}
+
+		&.indeterminate {
+			.box {
+				stroke: var(--color-action, #1976d2);
+				fill: var(--color-action, #1976d2);
+			}
+			.dash {
+				stroke: var(--color-action-text, #fff);
+			}
+		}
+
+		/* Check-in: elastic checkmark draw with overshoot + scale pulse */
+		&.animating-check {
+			animation: box-pulse 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
+
+			.check {
+				stroke-dashoffset: 0;
+				transition: stroke-dashoffset 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+			}
+		}
+
+		/* Uncheck: visible stroke retraction, box holds fill then fades */
+		&.animating-uncheck {
+			.check {
+				stroke: var(--color-action-text, #fff);
+				stroke-dashoffset: 28;
+				transition: stroke-dashoffset 50ms cubic-bezier(0.4, 0, 0.2, 1);
+			}
+			.box {
+				stroke: var(--color-action, #1976d2);
+				fill: var(--color-action, #1976d2);
+			}
+		}
+	}
+
+	@keyframes box-pulse {
+		0% {
+			transform: scale(1);
+		}
+		40% {
+			transform: scale(1.1);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		gap: 0.1em;
+		padding-top: calc((var(--size) + 20px) / 2 - 0.7em);
+		margin-left: -8px;
+	}
+
+	.label {
+		cursor: pointer;
+		user-select: none;
+		line-height: 1.4;
+		color: var(--color-text, inherit);
+	}
+
+	.description {
+		font-size: 0.85em;
+		color: var(--color-text-disabled, #888);
+		line-height: 1.3;
+	}
+
+	.error-text {
+		display: none;
+		width: 100%;
+		font-size: 0.8em;
+		color: var(--color-error, #d32f2f);
+		margin-top: -0.25em;
+	}
+</style>

package/dist/form/Checkbox.svelte.d.ts

@@ -0,0 +1,27 @@
+declare const Checkbox: import("svelte").Component<{
+    checked?: boolean | undefined;
+    indeterminate?: boolean;
+    value?: string;
+    disabled?: boolean;
+    size?: "0" | "1" | "2" | "3";
+    label?: string;
+    description?: string;
+    error?: string;
+    parse?: ((value: unknown) => unknown) | undefined;
+    tristate?: boolean;
+    default_checked?: boolean | undefined;
+    required?: boolean;
+    tooltip?: string;
+    dense?: boolean;
+    comfortable?: boolean;
+    id?: string;
+    name?: string;
+    class?: string;
+    onchange?: ((detail: {
+        checked: boolean;
+        value: string;
+    }) => void) | undefined;
+}, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.svelte.d.ts.map

package/dist/form/Checkbox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../src/form/Checkbox.svelte.ts"],"names":[],"mappings":"AAsMA,QAAA,MAAM,QAAQ;cA1LqE,OAAO,GAAG,SAAS;oBAAkB,OAAO;YAAU,MAAM;eAAa,OAAO;WAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;YAAU,MAAM;kBAAgB,MAAM;YAAU,MAAM;YAAU,CAAC,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAC,GAAG,SAAS;eAAa,OAAO;sBAAoB,OAAO,GAAG,SAAS;eAAa,OAAO;cAAY,MAAM;YAAU,OAAO;kBAAgB,OAAO;;WAA6B,MAAM;YAAU,MAAM;eAAe,CAAC,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC,GACviB,SAAS;iBAyLwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}