@noahbaumgartner/svelte-ui 0.0.1

package/dist/components/table/Table.svelte

@@ -0,0 +1,276 @@
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export type TableSortValue = string | number | Date | null | undefined;
+
+	export type TableSort = {
+		/** The column's `id`, falling back to its `key`, then its `header`. */
+		column: string;
+		direction: 'asc' | 'desc';
+	};
+
+	export type TableColumn<T> = {
+		id?: string;
+		header: string;
+		align?: 'left' | 'center' | 'right';
+		/** Any CSS width, e.g. `120px` or `30%`. */
+		width?: string;
+	} & (
+		| {
+				/** Renders `row[key]` as plain text. */
+				key: keyof T & string;
+				cell?: never;
+				/** Sorts by `row[key]`. */
+				sortable?: boolean;
+		  }
+		| {
+				key?: never;
+				/** Renders custom content for the current row. */
+				cell: Snippet<[T]>;
+				/** Returns the value this column sorts by. */
+				sortable?: (row: T) => TableSortValue;
+		  }
+	);
+</script>
+
+<script lang="ts" generics="T">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { ArrowDown, ArrowUp, ChevronsUpDown } from '@lucide/svelte';
+	import Checkbox from '../checkbox/Checkbox.svelte';
+
+	type Props = Omit<HTMLAttributes<HTMLTableElement>, 'children'> & {
+		data: T[];
+		columns: TableColumn<T>[];
+		sort?: TableSort;
+		/** Adds a checkbox column. */
+		selection?: 'single' | 'multiple';
+		selected?: T[];
+		/** Identifies rows across data updates; defaults to the row object itself. */
+		rowId?: (row: T) => unknown;
+	};
+
+	let {
+		data,
+		columns,
+		sort = $bindable(),
+		selection,
+		selected = $bindable([]),
+		rowId = (row) => row,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const columnId = (column: TableColumn<T>) => column.id ?? column.key ?? column.header;
+
+	function sortValue(column: TableColumn<T>, row: T): unknown {
+		if (typeof column.sortable === 'function') return column.sortable(row);
+		return column.key ? row[column.key] : undefined;
+	}
+
+	function compare(a: unknown, b: unknown) {
+		if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+		if (typeof a === 'number' && typeof b === 'number') return a - b;
+		return String(a).localeCompare(String(b), undefined, { numeric: true });
+	}
+
+	const rows = $derived.by(() => {
+		const column = sort && columns.find((c) => c.sortable && columnId(c) === sort!.column);
+		if (!sort || !column) return data;
+		const direction = sort.direction === 'asc' ? 1 : -1;
+		return [...data].sort((rowA, rowB) => {
+			const a = sortValue(column, rowA);
+			const b = sortValue(column, rowB);
+			if (a == null || b == null) return a == null ? (b == null ? 0 : 1) : -1;
+			return compare(a, b) * direction;
+		});
+	});
+
+	function toggleSort(column: TableColumn<T>) {
+		const id = columnId(column);
+		if (sort?.column !== id) sort = { column: id, direction: 'asc' };
+		else if (sort.direction === 'asc') sort = { column: id, direction: 'desc' };
+		else sort = undefined;
+	}
+
+	function ariaSort(column: TableColumn<T>) {
+		if (!column.sortable) return undefined;
+		if (sort?.column !== columnId(column)) return 'none';
+		return sort.direction === 'asc' ? 'ascending' : 'descending';
+	}
+
+	const selectedIds = $derived(new Set(selected.map(rowId)));
+	const allSelected = $derived(data.length > 0 && data.every((row) => selectedIds.has(rowId(row))));
+	const someSelected = $derived(!allSelected && data.some((row) => selectedIds.has(rowId(row))));
+
+	function toggleRow(row: T) {
+		const id = rowId(row);
+		if (selectedIds.has(id)) selected = selected.filter((r) => rowId(r) !== id);
+		else selected = selection === 'single' ? [row] : [...selected, row];
+	}
+
+	function toggleAll() {
+		selected = allSelected ? [] : [...data];
+	}
+</script>
+
+<div class="table-container">
+	<table {...rest} class={['table', className]}>
+		<thead>
+			<tr>
+				{#if selection}
+					<th scope="col" class="table-select">
+						{#if selection === 'multiple'}
+							<Checkbox
+								aria-label="Select all rows"
+								checked={allSelected}
+								indeterminate={someSelected}
+								onchange={toggleAll}
+							/>
+						{/if}
+					</th>
+				{/if}
+				{#each columns as column, i (i)}
+					<th
+						scope="col"
+						class="table-{column.align ?? 'left'}"
+						style:width={column.width}
+						aria-sort={ariaSort(column)}
+					>
+						{#if column.sortable}
+							{@const active = sort?.column === columnId(column)}
+							<button type="button" class="table-sort" onclick={() => toggleSort(column)}>
+								{column.header}
+								{#if active && sort?.direction === 'asc'}
+									<ArrowUp class="table-sort-icon" aria-hidden="true" />
+								{:else if active}
+									<ArrowDown class="table-sort-icon" aria-hidden="true" />
+								{:else}
+									<ChevronsUpDown
+										class="table-sort-icon table-sort-icon--idle"
+										aria-hidden="true"
+									/>
+								{/if}
+							</button>
+						{:else}
+							{column.header}
+						{/if}
+					</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#each rows as row (rowId(row))}
+				{@const isSelected = selectedIds.has(rowId(row))}
+				<tr data-selected={isSelected || undefined}>
+					{#if selection}
+						<td class="table-select">
+							<Checkbox
+								aria-label="Select row"
+								checked={isSelected}
+								onchange={() => toggleRow(row)}
+							/>
+						</td>
+					{/if}
+					{#each columns as column, i (i)}
+						<td class="table-{column.align ?? 'left'}">
+							{#if column.cell}
+								{@render column.cell(row)}
+							{:else if column.key}
+								{row[column.key]}
+							{/if}
+						</td>
+					{/each}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
+
+<style>
+	.table-container {
+		width: 100%;
+		overflow-x: auto;
+	}
+
+	.table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: 13px;
+		color: var(--color-text);
+	}
+
+	th,
+	td {
+		padding: 10px 12px;
+		white-space: nowrap;
+		border-bottom: 1px solid var(--color-border);
+	}
+
+	th {
+		font-weight: 500;
+		color: var(--color-text-muted);
+	}
+
+	tbody tr:last-child td {
+		border-bottom: none;
+	}
+
+	tbody tr:hover,
+	tbody tr[data-selected] {
+		background-color: var(--color-surface);
+	}
+
+	.table-left {
+		text-align: left;
+	}
+
+	.table-center {
+		text-align: center;
+	}
+
+	.table-right {
+		text-align: right;
+	}
+
+	.table-select {
+		width: 16px;
+		padding-right: 0;
+		line-height: 0;
+	}
+
+	.table-sort {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		margin: -2px -4px;
+		padding: 2px 4px;
+		font: inherit;
+		color: inherit;
+		background: none;
+		border: none;
+		border-radius: 6px;
+		outline: none;
+		cursor: pointer;
+		transition: color 200ms ease;
+	}
+
+	.table-sort:hover,
+	th[aria-sort='ascending'] .table-sort,
+	th[aria-sort='descending'] .table-sort {
+		color: var(--color-text);
+	}
+
+	.table-sort:focus-visible {
+		outline: 2px solid var(--color-accent);
+	}
+
+	.table-sort :global(.table-sort-icon) {
+		width: 14px;
+		height: 14px;
+		flex-shrink: 0;
+	}
+
+	.table-sort :global(.table-sort-icon--idle) {
+		opacity: 0.5;
+	}
+</style>

package/dist/components/table/Table.svelte.d.ts

@@ -0,0 +1,60 @@
+import type { Snippet } from 'svelte';
+export type TableSortValue = string | number | Date | null | undefined;
+export type TableSort = {
+    /** The column's `id`, falling back to its `key`, then its `header`. */
+    column: string;
+    direction: 'asc' | 'desc';
+};
+export type TableColumn<T> = {
+    id?: string;
+    header: string;
+    align?: 'left' | 'center' | 'right';
+    /** Any CSS width, e.g. `120px` or `30%`. */
+    width?: string;
+} & ({
+    /** Renders `row[key]` as plain text. */
+    key: keyof T & string;
+    cell?: never;
+    /** Sorts by `row[key]`. */
+    sortable?: boolean;
+} | {
+    key?: never;
+    /** Renders custom content for the current row. */
+    cell: Snippet<[T]>;
+    /** Returns the value this column sorts by. */
+    sortable?: (row: T) => TableSortValue;
+});
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<T>(): {
+    props: Omit<HTMLAttributes<HTMLTableElement>, "children"> & {
+        data: T[];
+        columns: TableColumn<T>[];
+        sort?: TableSort;
+        /** Adds a checkbox column. */
+        selection?: "single" | "multiple";
+        selected?: T[];
+        /** Identifies rows across data updates; defaults to the row object itself. */
+        rowId?: (row: T) => unknown;
+    };
+    exports: {};
+    bindings: "sort" | "selected";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "sort" | "selected";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(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>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Table: $$IsomorphicComponent;
+type Table<T> = InstanceType<typeof Table<T>>;
+export default Table;

package/dist/components/textarea/Textarea.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	let { value = $bindable(), class: className, ...rest }: HTMLTextareaAttributes = $props();
+</script>
+
+<textarea {...rest} bind:value class={['textarea', className]}></textarea>
+
+<style>
+	/* Grows with its content from a two-line minimum, like the Input's 32px height */
+	.textarea {
+		box-sizing: border-box;
+		display: block;
+		width: 100%;
+		min-width: 0;
+		min-height: 64px;
+		padding: 6px 10px;
+		font-family: inherit;
+		font-size: 13px;
+		line-height: 1.5;
+		color: var(--color-text);
+		background-color: transparent;
+		border: 1px solid var(--color-border-strong);
+		border-radius: 10px;
+		outline: none;
+		resize: vertical;
+		field-sizing: content;
+		transition: border-color 200ms ease;
+	}
+
+	.textarea::selection {
+		color: var(--color-accent-foreground);
+		background-color: var(--color-accent);
+	}
+
+	.textarea::placeholder {
+		color: var(--color-text-faint);
+	}
+
+	.textarea:focus-visible {
+		border-color: var(--color-accent);
+		outline: 1px solid var(--color-accent);
+	}
+
+	.textarea[aria-invalid='true'] {
+		border-color: var(--color-destructive);
+	}
+
+	.textarea[aria-invalid='true']:focus-visible {
+		outline-color: var(--color-destructive);
+	}
+
+	.textarea:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+</style>

package/dist/components/textarea/Textarea.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+declare const Textarea: import("svelte").Component<HTMLTextareaAttributes, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/time-picker/TimePicker.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> & {
+		/** Bindable, `HH:MM` in 24-hour time like `<input type="time">`. */
+		value?: string;
+		/** Minutes between the offered values. */
+		minuteStep?: number;
+		onselect?: (value: string) => void;
+	};
+
+	let {
+		value = $bindable(''),
+		minuteStep = 1,
+		onselect,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const pad = (n: number) => String(n).padStart(2, '0');
+	const hours = Array.from({ length: 24 }, (_, i) => i);
+	let minutes = $derived(
+		Array.from(
+			{ length: Math.ceil(60 / Math.max(1, minuteStep)) },
+			(_, i) => i * Math.max(1, minuteStep)
+		)
+	);
+
+	let hour = $derived(value ? Number(value.slice(0, 2)) : undefined);
+	let minute = $derived(value ? Number(value.slice(3, 5)) : undefined);
+
+	let hoursEl: HTMLElement | undefined = $state();
+	let minutesEl: HTMLElement | undefined = $state();
+
+	function set(nextHour: number, nextMinute: number) {
+		value = `${pad(nextHour)}:${pad(nextMinute)}`;
+		onselect?.(value);
+	}
+
+	function center(column: HTMLElement | undefined) {
+		const item = column?.querySelector<HTMLElement>('[tabindex="0"]');
+		if (column && item)
+			column.scrollTop = item.offsetTop - (column.clientHeight - item.offsetHeight) / 2;
+	}
+
+	$effect(() => {
+		void value;
+		tick().then(() => {
+			center(hoursEl);
+			center(minutesEl);
+		});
+	});
+
+	async function handleKeydown(event: KeyboardEvent, column: 'hour' | 'minute') {
+		const list = column === 'hour' ? hours : minutes;
+		const current = list.indexOf((column === 'hour' ? hour : minute) ?? list[0]);
+		const next = {
+			ArrowUp: current - 1,
+			ArrowDown: current + 1,
+			Home: 0,
+			End: list.length - 1
+		}[event.key];
+		if (next === undefined) return;
+
+		event.preventDefault();
+		const clamped = list[Math.min(list.length - 1, Math.max(0, next))];
+		if (column === 'hour') set(clamped, minute ?? 0);
+		else set(hour ?? 0, clamped);
+		await tick();
+		(column === 'hour' ? hoursEl : minutesEl)
+			?.querySelector<HTMLElement>('[tabindex="0"]')
+			?.focus();
+	}
+</script>
+
+{#snippet columnItems(list: number[], current: number | undefined, column: 'hour' | 'minute')}
+	{#each list as item, i (item)}
+		<button
+			type="button"
+			class={['time-picker-item', { 'time-picker-item--selected': item === current }]}
+			tabindex={item === current || (current === undefined && i === 0) ? 0 : -1}
+			aria-pressed={item === current}
+			onclick={() => (column === 'hour' ? set(item, minute ?? 0) : set(hour ?? 0, item))}
+			onkeydown={(event) => handleKeydown(event, column)}
+		>
+			{pad(item)}
+		</button>
+	{/each}
+{/snippet}
+
+<div {...rest} class={['time-picker', className]}>
+	<div class="time-picker-column" role="group" aria-label="Hours" bind:this={hoursEl}>
+		{@render columnItems(hours, hour, 'hour')}
+	</div>
+	<div class="time-picker-column" role="group" aria-label="Minutes" bind:this={minutesEl}>
+		{@render columnItems(minutes, minute, 'minute')}
+	</div>
+</div>
+
+<style>
+	.time-picker {
+		display: flex;
+		gap: 4px;
+		height: 232px;
+		font-size: 13px;
+		color: var(--color-text);
+		user-select: none;
+	}
+
+	.time-picker-column {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		width: 48px;
+		padding: 0 2px;
+		overflow-y: auto;
+		scrollbar-width: none;
+		scroll-snap-type: y proximity;
+	}
+
+	.time-picker-column + .time-picker-column {
+		padding-left: 6px;
+		border-left: 1px solid var(--color-border);
+	}
+
+	.time-picker-item {
+		flex-shrink: 0;
+		height: 28px;
+		padding: 0;
+		font-family: inherit;
+		font-size: 13px;
+		font-variant-numeric: tabular-nums;
+		color: var(--color-text);
+		background-color: transparent;
+		border: none;
+		border-radius: 8px;
+		outline: none;
+		cursor: pointer;
+		scroll-snap-align: center;
+		transition: background-color 200ms ease;
+	}
+
+	.time-picker-item:hover {
+		background-color: var(--color-surface);
+	}
+
+	.time-picker-item:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: -2px;
+	}
+
+	.time-picker-item--selected,
+	.time-picker-item--selected:hover {
+		color: var(--color-accent-foreground);
+		background-color: var(--color-accent);
+	}
+
+	.time-picker-item--selected:focus-visible {
+		outline-color: var(--color-accent-foreground);
+	}
+</style>

package/dist/components/time-picker/TimePicker.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> & {
+    /** Bindable, `HH:MM` in 24-hour time like `<input type="time">`. */
+    value?: string;
+    /** Minutes between the offered values. */
+    minuteStep?: number;
+    onselect?: (value: string) => void;
+};
+declare const TimePicker: import("svelte").Component<Props, {}, "value">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;