@noahbaumgartner/svelte-ui 0.0.4 → 0.0.5

package/dist/components/preview-card/PreviewCard.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { LucideIcon } from '@lucide/svelte';
+
+	type Props = {
+		/** Makes the whole card a link. */
+		href?: string;
+		/** Bold lead-in before the description, followed by a colon. */
+		title: string;
+		description?: string;
+		/** Muted text below, e.g. a date. */
+		meta?: string;
+		/** Any Lucide icon (import from `svelte-ui/icons`), shown in the top-left corner of the media. */
+		icon?: LucideIcon;
+		orientation?: 'vertical' | 'horizontal';
+		/** Square media that fills the frame, e.g. a MeshGradient or an `<img>`. */
+		media: Snippet;
+		class?: string;
+	};
+
+	let {
+		href,
+		title,
+		description,
+		meta,
+		icon: Icon,
+		orientation = 'vertical',
+		media,
+		class: className
+	}: Props = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'div'}
+	{href}
+	class={['preview-card', `preview-card--${orientation}`, className]}
+>
+	<div class="preview-card-media">
+		{@render media()}
+		{#if Icon}
+			<span class="preview-card-icon"><Icon aria-hidden="true" /></span>
+		{/if}
+	</div>
+	<div class="preview-card-info">
+		<p class="preview-card-headline">
+			<span class="preview-card-title">{title}{description ? ':' : ''}</span>
+			{description}
+		</p>
+		{#if meta}
+			<span class="preview-card-meta">{meta}</span>
+		{/if}
+	</div>
+</svelte:element>
+
+<style>
+	.preview-card {
+		display: flex;
+		gap: 20px;
+		color: var(--color-text);
+		text-decoration: none;
+		border-radius: 14px;
+		outline: none;
+	}
+
+	a.preview-card:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 2px;
+	}
+
+	.preview-card--vertical {
+		flex-direction: column;
+	}
+
+	.preview-card--horizontal {
+		align-items: center;
+	}
+
+	.preview-card-media {
+		position: relative;
+		flex-shrink: 0;
+		aspect-ratio: 1;
+		overflow: hidden;
+		border-radius: 14px;
+	}
+
+	.preview-card--horizontal .preview-card-media {
+		width: 140px;
+	}
+
+	.preview-card-media > :global(:not(.preview-card-icon)) {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border-radius: inherit;
+		transition: transform 300ms ease;
+	}
+
+	a.preview-card:hover .preview-card-media > :global(:not(.preview-card-icon)) {
+		transform: scale(1.05);
+	}
+
+	.preview-card-icon {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 40px;
+		height: 40px;
+		color: var(--color-base);
+		background-color: var(--color-ink);
+		border-radius: 14px 0 0 0;
+	}
+
+	.preview-card-icon :global(svg) {
+		width: 20px;
+		height: 20px;
+	}
+
+	.preview-card--horizontal .preview-card-icon {
+		width: 32px;
+		height: 32px;
+	}
+
+	.preview-card--horizontal .preview-card-icon :global(svg) {
+		width: 16px;
+		height: 16px;
+	}
+
+	.preview-card-info {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		min-width: 0;
+	}
+
+	.preview-card-headline {
+		margin: 0;
+		font-size: 16px;
+	}
+
+	.preview-card-title {
+		font-weight: 600;
+	}
+
+	.preview-card-meta {
+		font-size: 14px;
+		color: var(--color-text-muted);
+	}
+
+	@media (min-width: 640px) {
+		.preview-card--horizontal .preview-card-media {
+			width: 168px;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.preview-card-media > :global(*) {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/preview-card/PreviewCard.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { LucideIcon } from '@lucide/svelte';
+type Props = {
+    /** Makes the whole card a link. */
+    href?: string;
+    /** Bold lead-in before the description, followed by a colon. */
+    title: string;
+    description?: string;
+    /** Muted text below, e.g. a date. */
+    meta?: string;
+    /** Any Lucide icon (import from `svelte-ui/icons`), shown in the top-left corner of the media. */
+    icon?: LucideIcon;
+    orientation?: 'vertical' | 'horizontal';
+    /** Square media that fills the frame, e.g. a MeshGradient or an `<img>`. */
+    media: Snippet;
+    class?: string;
+};
+declare const PreviewCard: import("svelte").Component<Props, {}, "">;
+type PreviewCard = ReturnType<typeof PreviewCard>;
+export default PreviewCard;

package/dist/components/progress/Progress.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Progress between 0 and `max`. Omit while the amount is unknown: the bar then runs back and forth. */
+		value?: number;
+		max?: number;
+		size?: 'sm' | 'md';
+		/** Accessible name, e.g. what is loading. */
+		label?: string;
+	};
+
+	let { value, max = 100, size = 'md', label, class: className, ...rest }: Props = $props();
+
+	let fraction = $derived(value === undefined ? undefined : Math.min(Math.max(value / max, 0), 1));
+</script>
+
+<div
+	{...rest}
+	role="progressbar"
+	aria-label={label}
+	aria-valuemin={0}
+	aria-valuemax={max}
+	aria-valuenow={fraction === undefined ? undefined : fraction * max}
+	class={[
+		'progress',
+		`progress--${size}`,
+		{ 'progress--indeterminate': fraction === undefined },
+		className
+	]}
+>
+	<div
+		class="progress-bar"
+		style:width={fraction === undefined ? undefined : `${fraction * 100}%`}
+	></div>
+</div>
+
+<style>
+	.progress {
+		width: 100%;
+		overflow: hidden;
+		background-color: var(--color-surface);
+		border-radius: 999px;
+	}
+
+	.progress--sm {
+		height: 4px;
+	}
+
+	.progress--md {
+		height: 8px;
+	}
+
+	.progress-bar {
+		height: 100%;
+		background-color: var(--color-accent);
+		border-radius: inherit;
+		transition: width 300ms ease;
+	}
+
+	.progress--indeterminate .progress-bar {
+		width: 40%;
+		animation: progress-slide 1.4s ease-in-out infinite;
+	}
+
+	@keyframes progress-slide {
+		from {
+			translate: -100% 0;
+		}
+
+		to {
+			translate: 250% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.progress-bar {
+			transition: none;
+		}
+
+		/* A full, dimmed bar instead of the movement */
+		.progress--indeterminate .progress-bar {
+			width: 100%;
+			opacity: 0.4;
+			animation: none;
+		}
+	}
+</style>

package/dist/components/progress/Progress.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Progress between 0 and `max`. Omit while the amount is unknown: the bar then runs back and forth. */
+    value?: number;
+    max?: number;
+    size?: 'sm' | 'md';
+    /** Accessible name, e.g. what is loading. */
+    label?: string;
+};
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/components/select/Select.svelte

@@ -0,0 +1,391 @@
+<script lang="ts" module>
+	export type SelectOption<T extends string | number | null = string> = {
+		value: T;
+		label: string;
+		disabled?: boolean;
+	};
+</script>
+
+<script lang="ts" generics="T extends string | number | null">
+	import { tick } from 'svelte';
+	import { scale } from 'svelte/transition';
+	import type { Attachment } from 'svelte/attachments';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { Check, ChevronsUpDown } from '@lucide/svelte';
+
+	type Props = Omit<
+		HTMLButtonAttributes,
+		'value' | 'children' | 'onchange' | 'type' | 'role' | 'name'
+	> & {
+		/** Value of the chosen option. Bindable. */
+		value?: T;
+		options: SelectOption<T>[];
+		/** Shown while no option is chosen. */
+		placeholder?: string;
+		/** Form field name; submits the value through a hidden input. */
+		name?: string;
+		onchange?: (value: T) => void;
+	};
+
+	let {
+		value = $bindable(),
+		options,
+		placeholder = 'Select',
+		name,
+		disabled = false,
+		class: className,
+		onchange,
+		...rest
+	}: Props = $props();
+
+	const id = $props.id();
+	const gap = 4;
+	const edge = 8;
+	const maxHeight = 320;
+
+	let open = $state(false);
+	let wrapperEl: HTMLSpanElement;
+	let triggerEl: HTMLButtonElement;
+	let listEl: HTMLDivElement | undefined = $state();
+	let placement: 'top' | 'bottom' = $state('bottom');
+	let position: { top?: number; bottom?: number; left: number; width: number; height: number } =
+		$state({ left: 0, width: 0, height: maxHeight });
+
+	let current = $derived(options.find((option) => option.value === value));
+
+	function items() {
+		return Array.from(
+			listEl?.querySelectorAll<HTMLElement>('[role="option"]:not(:disabled)') ?? []
+		);
+	}
+
+	async function show(focus: 'first' | 'last' = 'first') {
+		open = true;
+		await tick();
+		const list = items();
+		const selected = list.find((item) => item.getAttribute('aria-selected') === 'true');
+		(selected ?? (focus === 'first' ? list[0] : list.at(-1)))?.focus();
+	}
+
+	function close({ restoreFocus = false } = {}) {
+		open = false;
+		if (restoreFocus) triggerEl.focus();
+	}
+
+	function choose(option: SelectOption<T>) {
+		value = option.value;
+		onchange?.(option.value);
+		close({ restoreFocus: true });
+	}
+
+	/* The list sits in the top layer so dialogs and scroll containers cannot clip it */
+	function place() {
+		if (!listEl) return;
+		const rect = triggerEl.getBoundingClientRect();
+		const below = window.innerHeight - rect.bottom - gap - edge;
+		const above = rect.top - gap - edge;
+		const wanted = Math.min(listEl.scrollHeight + 2, maxHeight);
+		placement = below < wanted && above > below ? 'top' : 'bottom';
+		const left = Math.max(edge, Math.min(rect.left, window.innerWidth - listEl.offsetWidth - edge));
+		position =
+			placement === 'top'
+				? {
+						bottom: window.innerHeight - rect.top + gap,
+						left,
+						width: rect.width,
+						height: Math.min(maxHeight, above)
+					}
+				: { top: rect.bottom + gap, left, width: rect.width, height: Math.min(maxHeight, below) };
+	}
+
+	const popover: Attachment<HTMLDivElement> = (node) => {
+		node.showPopover();
+		place();
+	};
+
+	/* Typing jumps to the option that starts with the typed letters */
+	let typed = '';
+	let typedTimer: ReturnType<typeof setTimeout> | undefined;
+
+	function typeahead(key: string) {
+		clearTimeout(typedTimer);
+		typed += key.toLowerCase();
+		typedTimer = setTimeout(() => (typed = ''), 500);
+		items()
+			.find((item) => item.textContent?.trim().toLowerCase().startsWith(typed))
+			?.focus();
+	}
+
+	function handleListKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			// Only the list closes, not a Dialog or Drawer around it
+			event.preventDefault();
+			event.stopPropagation();
+			close({ restoreFocus: true });
+			return;
+		}
+		if (event.key === 'Tab') {
+			event.preventDefault();
+			close({ restoreFocus: true });
+			return;
+		}
+
+		const list = items();
+		const index = list.indexOf(document.activeElement as HTMLElement);
+		const last = list.length - 1;
+		const target = {
+			ArrowDown: index === last ? 0 : index + 1,
+			ArrowUp: index <= 0 ? last : index - 1,
+			Home: 0,
+			End: last
+		}[event.key];
+
+		if (target !== undefined) {
+			event.preventDefault();
+			list[target]?.focus();
+		} else if (event.key.length === 1 && event.key !== ' ' && !event.metaKey && !event.ctrlKey) {
+			typeahead(event.key);
+		}
+	}
+
+	$effect(() => {
+		if (!open) return;
+
+		function handlePointerDown(event: PointerEvent) {
+			if (!wrapperEl.contains(event.target as Node)) close();
+		}
+
+		window.addEventListener('pointerdown', handlePointerDown);
+		window.addEventListener('scroll', place, true);
+		window.addEventListener('resize', place);
+
+		return () => {
+			window.removeEventListener('pointerdown', handlePointerDown);
+			window.removeEventListener('scroll', place, true);
+			window.removeEventListener('resize', place);
+		};
+	});
+</script>
+
+<span class={['select', className]} bind:this={wrapperEl}>
+	<button
+		{...rest}
+		bind:this={triggerEl}
+		type="button"
+		role="combobox"
+		aria-haspopup="listbox"
+		aria-expanded={open}
+		aria-controls="{id}-listbox"
+		{disabled}
+		class="select-trigger"
+		onclick={(event) => {
+			rest.onclick?.(event);
+			if (open) close();
+			else show();
+		}}
+		onkeydown={(event) => {
+			rest.onkeydown?.(event);
+			if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+			event.preventDefault();
+			show(event.key === 'ArrowDown' ? 'first' : 'last');
+		}}
+	>
+		<span class={['select-value', { 'select-value--placeholder': !current }]}>
+			{current?.label ?? placeholder}
+		</span>
+		<ChevronsUpDown class="select-chevron" aria-hidden="true" />
+	</button>
+	{#if name}<input type="hidden" {name} value={value ?? ''} />{/if}
+
+	{#if open}
+		<div
+			id="{id}-listbox"
+			role="listbox"
+			tabindex="-1"
+			popover="manual"
+			class={['select-list', `select-list--${placement}`]}
+			style:top={position.top === undefined ? undefined : `${position.top}px`}
+			style:bottom={position.bottom === undefined ? undefined : `${position.bottom}px`}
+			style:left="{position.left}px"
+			style:min-width="{position.width}px"
+			style:max-height="{position.height}px"
+			bind:this={listEl}
+			onkeydown={handleListKeydown}
+			onfocusout={(event) => {
+				if (!wrapperEl.contains(event.relatedTarget as Node | null)) close();
+			}}
+			{@attach popover}
+			transition:scale={{ duration: 140, start: 0.95 }}
+		>
+			{#each options as option (option.value)}
+				{@const selected = option.value === value}
+				<button
+					type="button"
+					role="option"
+					tabindex="-1"
+					aria-selected={selected}
+					disabled={option.disabled}
+					class={['select-option', { 'select-option--selected': selected }]}
+					onclick={() => choose(option)}
+				>
+					<span class="select-option-label">{option.label}</span>
+					<span class="select-option-check">
+						{#if selected}<Check aria-hidden="true" />{/if}
+					</span>
+				</button>
+			{/each}
+		</div>
+	{/if}
+</span>
+
+<style>
+	.select {
+		display: flex;
+		width: 100%;
+		min-width: 0;
+	}
+
+	/* Looks like an Input */
+	.select-trigger {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 8px;
+		box-sizing: border-box;
+		width: 100%;
+		min-width: 0;
+		height: 32px;
+		padding: 0 8px 0 10px;
+		font-family: inherit;
+		font-size: 13px;
+		color: var(--color-text);
+		text-align: left;
+		background-color: transparent;
+		border: 1px solid var(--color-border-strong);
+		border-radius: 10px;
+		outline: none;
+		cursor: pointer;
+		transition: border-color 200ms ease;
+	}
+
+	.select-trigger:focus-visible,
+	.select-trigger[aria-expanded='true'] {
+		border-color: var(--color-accent);
+		outline: 1px solid var(--color-accent);
+	}
+
+	.select-trigger[aria-invalid='true'] {
+		border-color: var(--color-destructive);
+	}
+
+	.select-trigger[aria-invalid='true']:is(:focus-visible, [aria-expanded='true']) {
+		outline-color: var(--color-destructive);
+	}
+
+	.select-trigger:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.select-value {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.select-value--placeholder {
+		color: var(--color-text-faint);
+	}
+
+	.select-trigger :global(.select-chevron) {
+		width: 14px;
+		height: 14px;
+		flex-shrink: 0;
+		color: var(--color-text-muted);
+	}
+
+	.select-list {
+		position: fixed;
+		inset: auto;
+		flex-direction: column;
+		gap: 2px;
+		box-sizing: border-box;
+		max-width: calc(100vw - 16px);
+		margin: 0;
+		padding: 4px;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		background-color: var(--color-bg);
+		color: var(--color-text);
+		border: 1px solid var(--color-border);
+		border-radius: 10px;
+		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+		outline: none;
+		user-select: none;
+	}
+
+	.select-list:popover-open {
+		display: flex;
+	}
+
+	.select-list--bottom {
+		transform-origin: top left;
+	}
+
+	.select-list--top {
+		transform-origin: bottom left;
+	}
+
+	.select-option {
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		gap: 10px;
+		width: 100%;
+		padding: 8px 10px;
+		font: inherit;
+		font-size: 13px;
+		color: var(--color-text);
+		text-align: left;
+		background-color: transparent;
+		border: none;
+		border-radius: 6px;
+		outline: none;
+		cursor: pointer;
+		transition: background-color 150ms ease;
+	}
+
+	/* Plain :focus, so the current option also shows after opening with the mouse */
+	.select-option:hover:not(:disabled),
+	.select-option:focus {
+		background-color: var(--color-surface);
+	}
+
+	.select-option:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.select-option--selected {
+		font-weight: 600;
+	}
+
+	.select-option-label {
+		flex-grow: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.select-option-check {
+		display: flex;
+		width: 14px;
+		height: 14px;
+		flex-shrink: 0;
+	}
+
+	.select-option-check :global(svg) {
+		width: 14px;
+		height: 14px;
+	}
+</style>

package/dist/components/select/Select.svelte.d.ts

@@ -0,0 +1,39 @@
+export type SelectOption<T extends string | number | null = string> = {
+    value: T;
+    label: string;
+    disabled?: boolean;
+};
+import type { HTMLButtonAttributes } from 'svelte/elements';
+declare function $$render<T extends string | number | null>(): {
+    props: Omit<HTMLButtonAttributes, "children" | "role" | "onchange" | "name" | "type" | "value"> & {
+        /** Value of the chosen option. Bindable. */
+        value?: T;
+        options: SelectOption<T>[];
+        /** Shown while no option is chosen. */
+        placeholder?: string;
+        /** Form field name; submits the value through a hidden input. */
+        name?: string;
+        onchange?: (value: T) => void;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number | null> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string | number | null>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string | number | null>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Select: $$IsomorphicComponent;
+type Select<T extends string | number | null> = InstanceType<typeof Select<T>>;
+export default Select;