@noahbaumgartner/svelte-ui 0.0.1

package/dist/components/card/CardHeader.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** CardTitle, CardDescription and optionally a CardAction. */
+		children: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div {...rest} class={['card-header', className]}>
+	{@render children()}
+</div>
+
+<style>
+	.card-header {
+		display: grid;
+		grid-auto-rows: min-content;
+		align-items: start;
+		gap: 4px;
+		padding-inline: var(--card-spacing);
+	}
+
+	.card-header:has(> :global(.card-action)) {
+		grid-template-columns: 1fr auto;
+	}
+</style>

package/dist/components/card/CardHeader.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** CardTitle, CardDescription and optionally a CardAction. */
+    children: Snippet;
+};
+declare const CardHeader: import("svelte").Component<Props, {}, "">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

package/dist/components/card/CardTitle.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLHeadingElement>, 'children'> & {
+		children: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<h3 {...rest} class={['card-title', className]}>
+	{@render children()}
+</h3>
+
+<style>
+	.card-title {
+		margin: 0;
+		font-size: 15px;
+		font-weight: 600;
+		line-height: 1.4;
+	}
+</style>

package/dist/components/card/CardTitle.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLHeadingElement>, 'children'> & {
+    children: Snippet;
+};
+declare const CardTitle: import("svelte").Component<Props, {}, "">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

package/dist/components/checkbox/Checkbox.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { Check, Minus } from '@lucide/svelte';
+
+	type Props = Omit<HTMLInputAttributes, 'type'>;
+
+	let {
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		...rest
+	}: Props = $props();
+</script>
+
+<span class={['checkbox', className]}>
+	<input {...rest} type="checkbox" bind:checked bind:indeterminate />
+	{#if indeterminate}
+		<Minus class="checkbox-icon" aria-hidden="true" />
+	{:else}
+		<Check class="checkbox-icon" aria-hidden="true" />
+	{/if}
+</span>
+
+<style>
+	.checkbox {
+		position: relative;
+		display: inline-flex;
+		flex-shrink: 0;
+		width: 16px;
+		height: 16px;
+	}
+
+	input {
+		appearance: none;
+		box-sizing: border-box;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		background-color: transparent;
+		border: 1px solid var(--color-border-strong);
+		border-radius: 5px;
+		outline: none;
+		cursor: pointer;
+		transition:
+			background-color 200ms ease,
+			border-color 200ms ease;
+	}
+
+	input:checked,
+	input:indeterminate {
+		background-color: var(--color-accent);
+		border-color: var(--color-accent);
+	}
+
+	input:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 2px;
+	}
+
+	input[aria-invalid='true'] {
+		border-color: var(--color-destructive);
+	}
+
+	input:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.checkbox :global(.checkbox-icon) {
+		position: absolute;
+		inset: 2px;
+		width: 12px;
+		height: 12px;
+		color: var(--color-accent-foreground);
+		stroke-width: 3;
+		pointer-events: none;
+		opacity: 0;
+	}
+
+	input:checked + :global(.checkbox-icon),
+	input:indeterminate + :global(.checkbox-icon) {
+		opacity: 1;
+	}
+
+	input:disabled + :global(.checkbox-icon) {
+		opacity: 0;
+	}
+
+	input:checked:disabled + :global(.checkbox-icon),
+	input:indeterminate:disabled + :global(.checkbox-icon) {
+		opacity: 0.5;
+	}
+</style>

package/dist/components/checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = Omit<HTMLInputAttributes, 'type'>;
+declare const Checkbox: import("svelte").Component<Props, {}, "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/color-picker/ColorPicker.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Input from '../input/Input.svelte';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> & {
+		/** Bindable, `#rrggbb` like `<input type="color">`. */
+		value?: string;
+		/** Called on every change while dragging or typing. */
+		onselect?: (value: string) => void;
+	};
+
+	let { value = $bindable('#000000'), onselect, class: className, ...rest }: Props = $props();
+
+	type Hsv = { h: number; s: number; v: number };
+
+	function hexToHsv(hex: string): Hsv {
+		const n = parseInt(hex.slice(1), 16);
+		const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((c) => c / 255);
+		const max = Math.max(r, g, b);
+		const d = max - Math.min(r, g, b);
+		let h = 0;
+		if (d) {
+			if (max === r) h = ((g - b) / d) % 6;
+			else if (max === g) h = (b - r) / d + 2;
+			else h = (r - g) / d + 4;
+		}
+		return { h: (h * 60 + 360) % 360, s: max ? d / max : 0, v: max };
+	}
+
+	function hsvToHex({ h, s, v }: Hsv) {
+		const f = (n: number) => {
+			const k = (n + h / 60) % 6;
+			return Math.round((v - v * s * Math.max(0, Math.min(k, 4 - k, 1))) * 255);
+		};
+		return '#' + [f(5), f(3), f(1)].map((c) => c.toString(16).padStart(2, '0')).join('');
+	}
+
+	const isHex = (text: string) => /^#[0-9a-f]{6}$/i.test(text);
+
+	/* Kept separately so hue survives when saturation or brightness hit 0 */
+	let hsv = $state(hexToHsv(isHex(value) ? value : '#000000'));
+	let emitted = value;
+	let hexText = $state(value);
+
+	$effect.pre(() => {
+		if (value !== emitted && isHex(value)) {
+			hsv = hexToHsv(value);
+			hexText = value;
+			emitted = value;
+		}
+	});
+
+	function emit(next: Hsv) {
+		hsv = next;
+		value = emitted = hsvToHex(next);
+		hexText = value;
+		onselect?.(value);
+	}
+
+	const clamp = (n: number) => Math.min(1, Math.max(0, n));
+
+	function drag(event: PointerEvent, update: (x: number, y: number) => void) {
+		const el = event.currentTarget as HTMLElement;
+		el.setPointerCapture(event.pointerId);
+		el.focus();
+		const move = (e: PointerEvent) => {
+			const rect = el.getBoundingClientRect();
+			update(
+				clamp((e.clientX - rect.left) / rect.width),
+				clamp((e.clientY - rect.top) / rect.height)
+			);
+		};
+		move(event);
+		el.onpointermove = move;
+		el.onpointerup = () => (el.onpointermove = el.onpointerup = null);
+	}
+
+	function areaKeydown(event: KeyboardEvent) {
+		const delta = event.shiftKey ? 0.1 : 0.01;
+		const change = {
+			ArrowLeft: { s: -delta, v: 0 },
+			ArrowRight: { s: delta, v: 0 },
+			ArrowUp: { s: 0, v: delta },
+			ArrowDown: { s: 0, v: -delta }
+		}[event.key];
+		if (!change) return;
+		event.preventDefault();
+		emit({ h: hsv.h, s: clamp(hsv.s + change.s), v: clamp(hsv.v + change.v) });
+	}
+
+	function hueKeydown(event: KeyboardEvent) {
+		const delta = event.shiftKey ? 10 : 1;
+		const change = { ArrowLeft: -delta, ArrowDown: -delta, ArrowRight: delta, ArrowUp: delta }[
+			event.key
+		];
+		if (change === undefined) return;
+		event.preventDefault();
+		emit({ ...hsv, h: Math.min(360, Math.max(0, hsv.h + change)) });
+	}
+
+	function hexInput(event: Event) {
+		const text = (event.currentTarget as HTMLInputElement).value.trim();
+		const hex = text.startsWith('#') ? text : `#${text}`;
+		if (isHex(hex)) emit(hexToHsv(hex.toLowerCase()));
+	}
+</script>
+
+<div {...rest} class={['color-picker', className]}>
+	<div
+		class="color-picker-area"
+		role="slider"
+		tabindex="0"
+		aria-label="Saturation and brightness"
+		aria-valuenow={Math.round(hsv.s * 100)}
+		aria-valuetext="Saturation {Math.round(hsv.s * 100)}%, brightness {Math.round(hsv.v * 100)}%"
+		style:--hue={hsv.h}
+		onpointerdown={(event) => drag(event, (x, y) => emit({ h: hsv.h, s: x, v: 1 - y }))}
+		onkeydown={areaKeydown}
+	>
+		<span
+			class="color-picker-thumb"
+			style:left="{hsv.s * 100}%"
+			style:top="{(1 - hsv.v) * 100}%"
+			style:background-color={value}
+		></span>
+	</div>
+
+	<div
+		class="color-picker-hue"
+		role="slider"
+		tabindex="0"
+		aria-label="Hue"
+		aria-valuemin={0}
+		aria-valuemax={360}
+		aria-valuenow={Math.round(hsv.h)}
+		onpointerdown={(event) => drag(event, (x) => emit({ ...hsv, h: x * 360 }))}
+		onkeydown={hueKeydown}
+	>
+		<span
+			class="color-picker-thumb"
+			style:left="{(hsv.h / 360) * 100}%"
+			style:background-color="hsl({hsv.h} 100% 50%)"
+		></span>
+	</div>
+
+	<div class="color-picker-footer">
+		<span class="color-picker-swatch" style:background-color={value}></span>
+		<Input value={hexText} aria-label="Hex color" spellcheck="false" oninput={hexInput} />
+	</div>
+</div>
+
+<style>
+	.color-picker {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		width: 224px;
+		user-select: none;
+	}
+
+	.color-picker-area {
+		position: relative;
+		height: 150px;
+		border-radius: 8px;
+		background:
+			linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent),
+			hsl(var(--hue) 100% 50%);
+		outline: none;
+		cursor: crosshair;
+		touch-action: none;
+	}
+
+	.color-picker-hue {
+		position: relative;
+		height: 12px;
+		margin: 0 6px;
+		border-radius: 999px;
+		background: linear-gradient(
+			to right,
+			#f00 0%,
+			#ff0 17%,
+			#0f0 33%,
+			#0ff 50%,
+			#00f 67%,
+			#f0f 83%,
+			#f00 100%
+		);
+		outline: none;
+		cursor: pointer;
+		touch-action: none;
+	}
+
+	/* Let the hue thumb reach both ends of the rounded track */
+	.color-picker-hue::before {
+		content: '';
+		position: absolute;
+		inset: 0 -6px;
+	}
+
+	.color-picker-thumb {
+		position: absolute;
+		top: 50%;
+		width: 14px;
+		height: 14px;
+		box-sizing: border-box;
+		border: 2px solid #fff;
+		border-radius: 999px;
+		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+		transform: translate(-50%, -50%);
+		pointer-events: none;
+	}
+
+	.color-picker-area:focus-visible .color-picker-thumb,
+	.color-picker-hue:focus-visible .color-picker-thumb {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 2px;
+	}
+
+	.color-picker-footer {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.color-picker-swatch {
+		flex-shrink: 0;
+		width: 32px;
+		height: 32px;
+		box-sizing: border-box;
+		border: 1px solid var(--color-border);
+		border-radius: 10px;
+	}
+</style>

package/dist/components/color-picker/ColorPicker.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> & {
+    /** Bindable, `#rrggbb` like `<input type="color">`. */
+    value?: string;
+    /** Called on every change while dragging or typing. */
+    onselect?: (value: string) => void;
+};
+declare const ColorPicker: import("svelte").Component<Props, {}, "value">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/components/context-menu/ContextMenu.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+	import { tick, type Snippet } from 'svelte';
+	import { scale } from 'svelte/transition';
+	import { setMenuContext, type ContextMenuTriggerProps } from './context.js';
+
+	type Props = {
+		/** Whether the menu is open. Bindable. */
+		open?: boolean;
+		/** Horizontal alignment of the menu relative to the trigger. */
+		align?: 'start' | 'center' | 'end';
+		/** Renders the trigger. Spread the given props onto it, e.g. `<Button {...props} />`. */
+		trigger: Snippet<[ContextMenuTriggerProps]>;
+		children: Snippet;
+	};
+
+	let { open = $bindable(false), align = 'start', trigger, children }: Props = $props();
+
+	const id = $props.id();
+	let side: 'top' | 'bottom' = $state('bottom');
+	let wrapperEl: HTMLDivElement;
+	let contentEl: HTMLDivElement | undefined = $state();
+
+	function items() {
+		return Array.from(
+			contentEl?.querySelectorAll<HTMLElement>('[role^="menuitem"]:not(:disabled)') ?? []
+		);
+	}
+
+	async function show(focus: 'first' | 'last') {
+		open = true;
+		await tick();
+		const list = items();
+		const selected = list.find((item) => item.getAttribute('aria-checked') === 'true');
+		(selected ?? (focus === 'first' ? list[0] : list.at(-1)))?.focus();
+	}
+
+	function close({ restoreFocus = false } = {}) {
+		open = false;
+		if (restoreFocus) wrapperEl.querySelector<HTMLElement>('[aria-haspopup="menu"]')?.focus();
+	}
+
+	setMenuContext({ close: () => close({ restoreFocus: true }) });
+
+	const triggerProps: ContextMenuTriggerProps = $derived({
+		onclick: () => (open ? close() : show('first')),
+		onkeydown: (event: KeyboardEvent) => {
+			if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+				event.preventDefault();
+				show(event.key === 'ArrowDown' ? 'first' : 'last');
+			}
+		},
+		'aria-haspopup': 'menu',
+		'aria-expanded': open,
+		'aria-controls': `${id}-menu`
+	});
+
+	function handleMenuKeydown(event: KeyboardEvent) {
+		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 === 'Tab') {
+			close();
+		}
+	}
+
+	$effect(() => {
+		if (!open) return;
+
+		tick().then(() => {
+			if (!contentEl) return;
+			const triggerRect = wrapperEl.getBoundingClientRect();
+			const contentHeight = contentEl.offsetHeight;
+			const spaceBelow = window.innerHeight - triggerRect.bottom;
+			side =
+				spaceBelow < contentHeight + 8 && triggerRect.top > contentHeight + 8 ? 'top' : 'bottom';
+		});
+
+		function handlePointerDown(event: PointerEvent) {
+			if (!wrapperEl.contains(event.target as Node)) close();
+		}
+
+		function handleKeydown(event: KeyboardEvent) {
+			if (event.key === 'Escape') close({ restoreFocus: true });
+		}
+
+		function handleScroll() {
+			close();
+		}
+
+		window.addEventListener('pointerdown', handlePointerDown);
+		window.addEventListener('keydown', handleKeydown);
+		window.addEventListener('scroll', handleScroll, true);
+
+		return () => {
+			window.removeEventListener('pointerdown', handlePointerDown);
+			window.removeEventListener('keydown', handleKeydown);
+			window.removeEventListener('scroll', handleScroll, true);
+		};
+	});
+</script>
+
+<div class="context-menu" bind:this={wrapperEl}>
+	{@render trigger(triggerProps)}
+
+	{#if open}
+		<div
+			id="{id}-menu"
+			role="menu"
+			tabindex="-1"
+			class={[
+				'context-menu-content',
+				`context-menu-content--${side}`,
+				`context-menu-content--${align}`
+			]}
+			bind:this={contentEl}
+			onkeydown={handleMenuKeydown}
+			transition:scale={{ duration: 140, start: 0.95 }}
+		>
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.context-menu {
+		position: relative;
+		display: inline-flex;
+		height: fit-content;
+	}
+
+	.context-menu-content {
+		position: absolute;
+		z-index: 60;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		min-width: 160px;
+		padding: 4px;
+		background-color: var(--color-bg);
+		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;
+	}
+
+	.context-menu-content--bottom {
+		top: calc(100% + 8px);
+	}
+
+	.context-menu-content--top {
+		bottom: calc(100% + 8px);
+	}
+
+	.context-menu-content--start {
+		left: 0;
+	}
+
+	.context-menu-content--center {
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.context-menu-content--end {
+		right: 0;
+	}
+
+	.context-menu-content--bottom.context-menu-content--start {
+		transform-origin: top left;
+	}
+
+	.context-menu-content--bottom.context-menu-content--center {
+		transform-origin: top center;
+	}
+
+	.context-menu-content--bottom.context-menu-content--end {
+		transform-origin: top right;
+	}
+
+	.context-menu-content--top.context-menu-content--start {
+		transform-origin: bottom left;
+	}
+
+	.context-menu-content--top.context-menu-content--center {
+		transform-origin: bottom center;
+	}
+
+	.context-menu-content--top.context-menu-content--end {
+		transform-origin: bottom right;
+	}
+</style>

package/dist/components/context-menu/ContextMenu.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type Snippet } from 'svelte';
+import { type ContextMenuTriggerProps } from './context.js';
+type Props = {
+    /** Whether the menu is open. Bindable. */
+    open?: boolean;
+    /** Horizontal alignment of the menu relative to the trigger. */
+    align?: 'start' | 'center' | 'end';
+    /** Renders the trigger. Spread the given props onto it, e.g. `<Button {...props} />`. */
+    trigger: Snippet<[ContextMenuTriggerProps]>;
+    children: Snippet;
+};
+declare const ContextMenu: import("svelte").Component<Props, {}, "open">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;