@noahbaumgartner/svelte-ui 0.0.4 → 0.0.6

package/dist/components/drawer/Drawer.svelte

@@ -0,0 +1,419 @@
+<script module lang="ts">
+	export type DrawerTriggerProps = {
+		onclick: () => void;
+		'aria-haspopup': 'dialog';
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLDialogAttributes } from 'svelte/elements';
+	import X from '../../internal/icons/X.svelte';
+
+	type Props = Omit<
+		HTMLDialogAttributes,
+		'open' | 'title' | 'children' | 'aria-labelledby' | 'aria-describedby'
+	> & {
+		/** The dialog element. Bindable. */
+		ref?: HTMLDialogElement | null;
+		/**
+		 * Whether the drawer is open. Bindable. A sheet from the bottom on phones, a panel on the right from 768px up.
+		 * Escape, the handle or close button, dragging it away and a click on the backdrop close it.
+		 */
+		open?: boolean;
+		title: string;
+		description?: string;
+		/** Renders the trigger. Spread the given props onto it, e.g. `<Button {...props} />`. Omit to control `open` yourself. */
+		trigger?: Snippet<[DrawerTriggerProps]>;
+		/** The drawer's content; scrolls when it is taller than the screen. The first focusable element in it gets the focus on open. */
+		children?: Snippet;
+		/** Optional Buttons in the footer, stacked at full width with the primary one last; it ends up on top. Call `close` to close the drawer. */
+		actions?: Snippet<[close: () => void]>;
+		/** Accessible name of the handle and close button. */
+		closeLabel?: string;
+	};
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		title,
+		description,
+		trigger,
+		children,
+		actions,
+		closeLabel = 'Close',
+		class: className,
+		style,
+		...rest
+	}: Props = $props();
+
+	const id = $props.id();
+
+	const triggerProps: DrawerTriggerProps = {
+		onclick: () => (open = true),
+		'aria-haspopup': 'dialog'
+	};
+
+	function close() {
+		open = false;
+	}
+
+	$effect(() => {
+		if (!ref) return;
+		if (open && !ref.open) {
+			ref.showModal();
+		} else if (!open && ref.open) {
+			ref.close();
+		}
+	});
+
+	/* Dragging the header towards the edge moves the drawer along; letting go far enough or fast enough closes it */
+	const slop = 4;
+	let offset = $state(0);
+	let dragging = $state(false);
+	/* Matches the media query below: the panel on the right leaves sideways */
+	let sideways = $state(false);
+	let dragged = false;
+
+	function startDrag(event: PointerEvent) {
+		if (event.button !== 0) return;
+		sideways = window.matchMedia('(min-width: 768px)').matches;
+		const start = sideways ? event.clientX : event.clientY;
+		const startTime = event.timeStamp;
+
+		function move(e: PointerEvent) {
+			const distance = (sideways ? e.clientX : e.clientY) - start;
+			if (!dragging && Math.abs(distance) < slop) return;
+			dragging = true;
+			dragged = true;
+			offset = Math.max(0, distance);
+		}
+
+		function end(e: PointerEvent) {
+			window.removeEventListener('pointermove', move);
+			window.removeEventListener('pointerup', end);
+			window.removeEventListener('pointercancel', end);
+			if (!dragging) return;
+			const velocity = offset / Math.max(1, e.timeStamp - startTime);
+			const dismiss =
+				e.type === 'pointerup' &&
+				(offset > (sideways ? (ref?.offsetWidth ?? 0) : (ref?.offsetHeight ?? 0)) / 3 ||
+					velocity > 0.5);
+			dragging = false;
+			offset = 0;
+			if (dismiss) close();
+			// The click that follows a drag ending on the handle must not count as a tap on it
+			setTimeout(() => (dragged = false));
+		}
+
+		window.addEventListener('pointermove', move);
+		window.addEventListener('pointerup', end);
+		window.addEventListener('pointercancel', end);
+	}
+</script>
+
+{@render trigger?.(triggerProps)}
+
+<dialog
+	{...rest}
+	bind:this={ref}
+	aria-labelledby="{id}-title"
+	aria-describedby={description ? `${id}-description` : undefined}
+	class={['drawer', { 'drawer--dragging': dragging }, className]}
+	{style}
+	style:translate={dragging ? (sideways ? `${offset}px 0` : `0 ${offset}px`) : undefined}
+	onkeydown={(event) => {
+		if (event.key !== 'Escape') return;
+		event.preventDefault();
+		close();
+	}}
+	oncancel={(event) => {
+		event.preventDefault();
+		close();
+	}}
+	onclose={() => (open = false)}
+	onclick={(event) => {
+		// Clicks on the ::backdrop target the <dialog> itself, outside its box
+		if (event.target !== ref || !ref) return;
+		const rect = ref.getBoundingClientRect();
+		const inside =
+			event.clientX >= rect.left &&
+			event.clientX <= rect.right &&
+			event.clientY >= rect.top &&
+			event.clientY <= rect.bottom;
+		if (!inside) close();
+	}}
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="drawer-header" onpointerdown={startDrag}>
+		<h2 id="{id}-title" class="drawer-title">{title}</h2>
+		{#if description}
+			<p id="{id}-description" class="drawer-description">{description}</p>
+		{/if}
+	</div>
+	{#if children}
+		<div class="drawer-body">{@render children()}</div>
+	{/if}
+	{#if actions}
+		<div class="drawer-actions">{@render actions(close)}</div>
+	{/if}
+	<!-- Last in the DOM so the content, not the handle, gets the initial focus -->
+	<button
+		type="button"
+		class="drawer-handle"
+		aria-label={closeLabel}
+		onpointerdown={startDrag}
+		onclick={() => {
+			if (!dragged) close();
+		}}
+	>
+		<span class="drawer-handle-bar"></span>
+		<X class="drawer-handle-icon" aria-hidden="true" />
+	</button>
+</dialog>
+
+<style>
+	@layer svelte-ui {
+		/* Locks page scrolling while open; the gutter keeps the layout from shifting */
+		:global(html:has(.drawer[open])) {
+			overflow: hidden;
+			scrollbar-gutter: stable;
+		}
+
+		.drawer {
+			box-sizing: border-box;
+			width: 100%;
+			max-width: 560px;
+			max-height: calc(100dvh - 48px);
+			flex-direction: column;
+			/* Pinned to the bottom edge */
+			margin: auto auto 0;
+			padding: 0 0 env(safe-area-inset-bottom);
+			overflow: hidden;
+			background-color: var(--color-bg);
+			color: var(--color-text);
+			border: 1px solid var(--color-border);
+			border-bottom: 0;
+			border-radius: 16px 16px 0 0;
+			box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
+			outline: none;
+			translate: 0 100%;
+			transition:
+				translate 260ms cubic-bezier(0.32, 0.72, 0, 1),
+				display 260ms allow-discrete,
+				overlay 260ms allow-discrete;
+		}
+
+		.drawer[open] {
+			display: flex;
+			translate: 0 0;
+		}
+
+		/* Follows the finger directly */
+		.drawer--dragging {
+			transition: none;
+		}
+
+		.drawer::backdrop {
+			background-color: rgba(0, 0, 0, 0);
+			transition:
+				background-color 260ms ease,
+				display 260ms allow-discrete,
+				overlay 260ms allow-discrete;
+		}
+
+		.drawer[open]::backdrop {
+			background-color: rgba(0, 0, 0, 0.4);
+		}
+
+		@starting-style {
+			.drawer[open] {
+				translate: 0 100%;
+			}
+
+			.drawer[open]::backdrop {
+				background-color: rgba(0, 0, 0, 0);
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.drawer,
+			.drawer::backdrop,
+			.drawer-handle-bar {
+				transition: none;
+			}
+		}
+
+		@media (forced-colors: active) {
+			.drawer {
+				border: 1px solid CanvasText;
+			}
+
+			.drawer-handle-bar {
+				background-color: ButtonText;
+			}
+
+			.drawer-handle:focus-visible {
+				outline-color: Highlight;
+			}
+		}
+
+		@media (pointer: coarse) {
+			.drawer-handle {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				box-sizing: border-box;
+				min-width: 44px;
+				min-height: 44px;
+			}
+		}
+
+		.drawer-header {
+			flex-shrink: 0;
+			/* Room for the handle */
+			padding: 28px 20px 12px;
+			cursor: grab;
+			user-select: none;
+			/* Dragging must not scroll the page or get cancelled by the browser */
+			touch-action: none;
+		}
+
+		.drawer--dragging .drawer-header,
+		.drawer--dragging .drawer-handle {
+			cursor: grabbing;
+		}
+
+		.drawer-title {
+			margin: 0;
+			font-size: 15px;
+			font-weight: 600;
+		}
+
+		.drawer-description {
+			margin: 6px 0 0;
+			font-size: 13px;
+			line-height: 1.5;
+			color: var(--color-text-muted);
+		}
+
+		.drawer-body {
+			min-height: 0;
+			padding: 4px 20px 20px;
+			overflow-y: auto;
+			overscroll-behavior: contain;
+			font-size: 13px;
+		}
+
+		/* Stacked, the primary action (last in the markup) on top */
+		.drawer-actions {
+			display: flex;
+			flex-shrink: 0;
+			flex-direction: column-reverse;
+			gap: 8px;
+			padding: 4px 20px 20px;
+		}
+
+		.drawer-actions :global(.button) {
+			width: 100%;
+		}
+
+		.drawer-handle {
+			position: absolute;
+			top: 0;
+			left: 50%;
+			padding: 10px 24px;
+			background: none;
+			border: 0;
+			border-radius: 8px;
+			cursor: grab;
+			translate: -50% 0;
+			touch-action: none;
+			-webkit-tap-highlight-color: transparent;
+		}
+
+		.drawer-handle:focus-visible {
+			outline: 2px solid var(--color-accent);
+			outline-offset: -4px;
+		}
+
+		.drawer-handle-bar {
+			display: block;
+			width: 36px;
+			height: 4px;
+			background-color: var(--color-border-strong);
+			border-radius: 2px;
+			transition: background-color 120ms ease;
+		}
+
+		.drawer-handle:hover .drawer-handle-bar {
+			background-color: var(--color-text-faint);
+		}
+
+		.drawer-handle :global(.drawer-handle-icon) {
+			display: none;
+			width: 16px;
+			height: 16px;
+		}
+
+		/* Larger screens: a floating panel on the right, with a close button instead of the handle */
+		@media (min-width: 768px) {
+			.drawer {
+				width: 400px;
+				max-width: calc(100% - 48px);
+				height: calc(100dvh - 2 * var(--drawer-inset));
+				max-height: none;
+				/* Floats with a gap to the screen edges */
+				--drawer-inset: 8px;
+				margin: var(--drawer-inset) var(--drawer-inset) var(--drawer-inset) auto;
+				padding: 0;
+				border: 1px solid var(--color-border);
+				border-radius: 20px;
+				box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
+				translate: calc(100% + var(--drawer-inset)) 0;
+			}
+
+			@starting-style {
+				.drawer[open] {
+					translate: calc(100% + var(--drawer-inset)) 0;
+				}
+			}
+
+			.drawer-header {
+				padding: 20px 56px 12px 20px;
+			}
+
+			/* Pushes the actions to the bottom */
+			.drawer-body {
+				flex: 1;
+			}
+
+			.drawer-handle {
+				top: 14px;
+				right: 14px;
+				left: auto;
+				padding: 6px;
+				color: var(--color-text-muted);
+				cursor: pointer;
+				translate: none;
+			}
+
+			.drawer-handle:hover {
+				color: var(--color-text);
+				background-color: var(--color-surface);
+			}
+
+			.drawer-handle:focus-visible {
+				outline-offset: 2px;
+			}
+
+			.drawer-handle-bar {
+				display: none;
+			}
+
+			.drawer-handle :global(.drawer-handle-icon) {
+				display: block;
+			}
+		}
+	}
+</style>

package/dist/components/drawer/Drawer.svelte.d.ts

@@ -0,0 +1,28 @@
+export type DrawerTriggerProps = {
+    onclick: () => void;
+    'aria-haspopup': 'dialog';
+};
+import type { Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
+type Props = Omit<HTMLDialogAttributes, 'open' | 'title' | 'children' | 'aria-labelledby' | 'aria-describedby'> & {
+    /** The dialog element. Bindable. */
+    ref?: HTMLDialogElement | null;
+    /**
+     * Whether the drawer is open. Bindable. A sheet from the bottom on phones, a panel on the right from 768px up.
+     * Escape, the handle or close button, dragging it away and a click on the backdrop close it.
+     */
+    open?: boolean;
+    title: string;
+    description?: string;
+    /** Renders the trigger. Spread the given props onto it, e.g. `<Button {...props} />`. Omit to control `open` yourself. */
+    trigger?: Snippet<[DrawerTriggerProps]>;
+    /** The drawer's content; scrolls when it is taller than the screen. The first focusable element in it gets the focus on open. */
+    children?: Snippet;
+    /** Optional Buttons in the footer, stacked at full width with the primary one last; it ends up on top. Call `close` to close the drawer. */
+    actions?: Snippet<[close: () => void]>;
+    /** Accessible name of the handle and close button. */
+    closeLabel?: string;
+};
+declare const Drawer: import("svelte").Component<Props, {}, "ref" | "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/empty-state/EmptyState.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { IconComponent } from '../../icon.js';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+		/** Any icon component, e.g. from `@lucide/svelte`. */
+		icon?: IconComponent;
+		title: string;
+		description?: string;
+		/** `outline` has a dashed border, for empty areas that can be filled. */
+		variant?: 'secondary' | 'outline';
+		/** Optional actions below the text, e.g. a Button that creates the first entry. */
+		children?: Snippet;
+		/** Custom media instead of `icon`. */
+		media?: Snippet;
+		ref?: HTMLDivElement | null;
+	};
+
+	let {
+		icon: Icon,
+		title,
+		description,
+		variant = 'secondary',
+		class: className,
+		children,
+		media,
+		ref = $bindable(null),
+		...rest
+	}: Props = $props();
+</script>
+
+<div {...rest} bind:this={ref} class={['empty-state', `empty-state--${variant}`, className]}>
+	{#if media}{@render media()}{:else if Icon}<Icon
+			class="empty-state-icon"
+			aria-hidden="true"
+		/>{/if}
+	<p class="empty-state-title">{title}</p>
+	{#if description}<p class="empty-state-description">{description}</p>{/if}
+	{#if children}<div class="empty-state-actions">{@render children()}</div>{/if}
+</div>
+
+<style>
+	@layer svelte-ui {
+		.empty-state {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: 6px;
+			box-sizing: border-box;
+			padding: 32px 16px;
+			font-size: 13px;
+			line-height: 1.5;
+			color: var(--color-text);
+			text-align: center;
+			border-radius: 14px;
+		}
+
+		.empty-state--secondary {
+			background-color: var(--color-surface);
+			border: 1px solid transparent;
+		}
+
+		.empty-state--outline {
+			border: 1px dashed var(--color-border-strong);
+		}
+
+		.empty-state :global(.empty-state-icon) {
+			width: 20px;
+			height: 20px;
+			margin-bottom: 4px;
+			color: var(--color-text-muted);
+		}
+
+		p {
+			max-width: 44ch;
+			margin: 0;
+		}
+
+		.empty-state-title {
+			font-weight: 500;
+		}
+
+		.empty-state-description {
+			color: var(--color-text-muted);
+		}
+
+		.empty-state-actions {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+			gap: 8px;
+			margin-top: 8px;
+		}
+
+		@media (forced-colors: active) {
+			.empty-state--secondary {
+				border-color: GrayText;
+			}
+
+			.empty-state--outline {
+				border-color: CanvasText;
+			}
+		}
+	}
+</style>

package/dist/components/empty-state/EmptyState.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { IconComponent } from '../../icon.js';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+    /** Any icon component, e.g. from `@lucide/svelte`. */
+    icon?: IconComponent;
+    title: string;
+    description?: string;
+    /** `outline` has a dashed border, for empty areas that can be filled. */
+    variant?: 'secondary' | 'outline';
+    /** Optional actions below the text, e.g. a Button that creates the first entry. */
+    children?: Snippet;
+    /** Custom media instead of `icon`. */
+    media?: Snippet;
+    ref?: HTMLDivElement | null;
+};
+declare const EmptyState: import("svelte").Component<Props, {}, "ref">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/entry/Entry.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+		/** Rendered as an `<h3>`. */
+		title: string;
+		/** Muted text next to the title, e.g. a period like "2021 - 2025". */
+		meta?: string;
+		/** The description. */
+		children?: Snippet;
+		/** Below the description, e.g. a Link. */
+		footer?: Snippet;
+		ref?: HTMLDivElement | null;
+	};
+
+	let {
+		title,
+		meta,
+		class: className,
+		children,
+		footer,
+		ref = $bindable(null),
+		...rest
+	}: Props = $props();
+</script>
+
+<div {...rest} bind:this={ref} class={['entry', className]}>
+	<div class="entry-heading">
+		<h3 class="entry-title">{title}</h3>
+		{#if meta}
+			<span class="entry-meta">{meta}</span>
+		{/if}
+	</div>
+	{#if children}
+		<p class="entry-description">{@render children()}</p>
+	{/if}
+	{#if footer}
+		<div class="entry-footer">{@render footer()}</div>
+	{/if}
+</div>
+
+<style>
+	@layer svelte-ui {
+		.entry {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 10px;
+			box-sizing: border-box;
+			padding: 24px;
+			color: var(--color-text);
+			border: 1px solid var(--color-border-strong);
+			border-radius: 10px;
+		}
+
+		.entry-heading {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: baseline;
+			column-gap: 8px;
+		}
+
+		.entry-title {
+			margin: 0;
+			font-size: 20px;
+			font-weight: 500;
+		}
+
+		.entry-meta {
+			font-size: 14px;
+			color: var(--color-text-muted);
+			white-space: nowrap;
+		}
+
+		.entry-description {
+			margin: 0;
+			max-width: 640px;
+		}
+
+		.entry-footer {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: 8px;
+		}
+
+		@media (min-width: 768px) {
+			.entry {
+				padding: 32px;
+			}
+		}
+	}
+</style>

package/dist/components/entry/Entry.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+    /** Rendered as an `<h3>`. */
+    title: string;
+    /** Muted text next to the title, e.g. a period like "2021 - 2025". */
+    meta?: string;
+    /** The description. */
+    children?: Snippet;
+    /** Below the description, e.g. a Link. */
+    footer?: Snippet;
+    ref?: HTMLDivElement | null;
+};
+declare const Entry: import("svelte").Component<Props, {}, "ref">;
+type Entry = ReturnType<typeof Entry>;
+export default Entry;