@noahbaumgartner/svelte-ui 0.0.3 → 0.0.5

package/dist/components/drawer/Drawer.svelte

@@ -0,0 +1,368 @@
+<script module lang="ts">
+	export type DrawerTriggerProps = {
+		onclick: () => void;
+		'aria-haspopup': 'dialog';
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { X } from '@lucide/svelte';
+
+	type Props = {
+		/**
+		 * 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]>;
+	};
+
+	let { open = $bindable(false), title, description, trigger, children, actions }: Props = $props();
+
+	const id = $props.id();
+	let dialogEl: HTMLDialogElement;
+
+	const triggerProps: DrawerTriggerProps = {
+		onclick: () => (open = true),
+		'aria-haspopup': 'dialog'
+	};
+
+	function close() {
+		open = false;
+	}
+
+	$effect(() => {
+		if (open && !dialogEl.open) {
+			dialogEl.showModal();
+		} else if (!open && dialogEl.open) {
+			dialogEl.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 ? dialogEl.offsetWidth : dialogEl.offsetHeight) / 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
+	bind:this={dialogEl}
+	aria-labelledby="{id}-title"
+	aria-describedby={description ? `${id}-description` : undefined}
+	class={['drawer', { 'drawer--dragging': dragging }]}
+	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 !== dialogEl) return;
+		const rect = dialogEl.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="Close"
+		onpointerdown={startDrag}
+		onclick={() => {
+			if (!dragged) close();
+		}}
+	>
+		<span class="drawer-handle-bar"></span>
+		<X class="drawer-handle-icon" aria-hidden="true" />
+	</button>
+</dialog>
+
+<style>
+	/* 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 {
+			transition-duration: 0ms;
+		}
+	}
+
+	.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,23 @@
+export type DrawerTriggerProps = {
+    onclick: () => void;
+    'aria-haspopup': 'dialog';
+};
+import type { Snippet } from 'svelte';
+type Props = {
+    /**
+     * 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]>;
+};
+declare const Drawer: import("svelte").Component<Props, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { LucideIcon } from '@lucide/svelte';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+		/** Any Lucide icon (import from `svelte-ui/icons`). */
+		icon?: LucideIcon;
+		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;
+	};
+
+	let {
+		icon: Icon,
+		title,
+		description,
+		variant = 'secondary',
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<div {...rest} class={['empty-state', `empty-state--${variant}`, className]}>
+	{#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>
+	.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;
+	}
+</style>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { LucideIcon } from '@lucide/svelte';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+    /** Any Lucide icon (import from `svelte-ui/icons`). */
+    icon?: LucideIcon;
+    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;
+};
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/entry/Entry.svelte

@@ -0,0 +1,83 @@
+<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;
+	};
+
+	let { title, meta, class: className, children, footer, ...rest }: Props = $props();
+</script>
+
+<div {...rest} 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>
+	.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: 14px;
+	}
+
+	.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,15 @@
+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;
+};
+declare const Entry: import("svelte").Component<Props, {}, "">;
+type Entry = ReturnType<typeof Entry>;
+export default Entry;

package/dist/components/footer/Footer.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
+		/** Message in the panel, rendered as an `<h2>`; `\n` breaks the line. */
+		title?: string;
+		/** Owner shown below the panel as "© <current year> <copyright>". */
+		copyright?: string;
+		/** FooterColumns. */
+		children?: Snippet;
+	};
+
+	let { title, copyright, class: className, children, ...rest }: Props = $props();
+
+	const year = new Date().getFullYear();
+</script>
+
+<footer {...rest} class={['footer', className]}>
+	<div class="footer-panel">
+		{#if title}
+			<h2 class="footer-title">{title}</h2>
+		{/if}
+		{#if children}
+			<div class="footer-columns">{@render children()}</div>
+		{/if}
+	</div>
+	{#if copyright}
+		<p class="footer-copyright">© {year} {copyright}</p>
+	{/if}
+</footer>
+
+<style>
+	.footer {
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+		font-size: 14px;
+	}
+
+	.footer-panel {
+		display: flex;
+		flex-direction: column;
+		gap: 40px;
+		box-sizing: border-box;
+		min-height: 256px;
+		padding: 40px;
+		color: #fff;
+		background-color: #000;
+		border-radius: 14px;
+	}
+
+	.footer-title {
+		margin: 0;
+		font-size: 24px;
+		font-weight: 600;
+		line-height: 1.25;
+		white-space: pre-line;
+		user-select: none;
+	}
+
+	.footer-columns {
+		display: flex;
+		flex-direction: column;
+		gap: 40px;
+	}
+
+	.footer-copyright {
+		margin: 0;
+		text-align: center;
+		color: var(--color-text-muted);
+		user-select: none;
+	}
+
+	@media (min-width: 640px) {
+		.footer-panel {
+			flex-direction: row;
+		}
+
+		.footer-title {
+			flex: 1;
+		}
+
+		.footer-columns {
+			flex: 1;
+			flex-direction: row;
+		}
+	}
+</style>

package/dist/components/footer/Footer.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
+    /** Message in the panel, rendered as an `<h2>`; `\n` breaks the line. */
+    title?: string;
+    /** Owner shown below the panel as "© <current year> <copyright>". */
+    copyright?: string;
+    /** FooterColumns. */
+    children?: Snippet;
+};
+declare const Footer: import("svelte").Component<Props, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;