@orochibraru/ui 1.0.0 → 1.0.1

package/dist/components/kit/checkbox-list.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type FieldProps } from "./field-frame.svelte";
+interface Option {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+type Props = FieldProps & {
+    options: readonly Option[];
+    value?: string[];
+    orientation?: "vertical" | "horizontal";
+};
+declare const CheckboxList: import("svelte").Component<Props, {}, "value">;
+type CheckboxList = ReturnType<typeof CheckboxList>;
+export default CheckboxList;

package/dist/components/kit/checkbox.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { Checkbox } from "../ui/checkbox/index.js";
+	import * as Field from "../ui/field/index.js";
+	import { cn } from "../../utils.js";
+
+	import { errorList, type FieldProps } from "./field-frame.svelte";
+
+	type Props = FieldProps & {
+		checked?: boolean;
+	};
+
+	let {
+		checked = $bindable(false),
+		name,
+		label,
+		description,
+		error,
+		required = false,
+		disabled = false,
+		id,
+		class: className,
+	}: Props = $props();
+
+	const generatedId = $props.id();
+	const checkboxId = $derived(id ?? generatedId);
+	const errors = $derived(errorList(error));
+	const invalid = $derived(errors.length > 0);
+	const describedBy = $derived(
+		invalid
+			? `${checkboxId}-error`
+			: description
+				? `${checkboxId}-description`
+				: undefined,
+	);
+</script>
+
+<div
+	class={cn("flex w-full flex-col", className)}
+	data-invalid={invalid || undefined}
+>
+	<div
+		class="group/row relative flex min-h-11 items-start gap-3 py-2.5 has-disabled:opacity-50"
+	>
+		<Checkbox
+			id={checkboxId}
+			{name}
+			{required}
+			{disabled}
+			bind:checked
+			aria-invalid={invalid || undefined}
+			aria-describedby={describedBy}
+			class="z-10 size-5"
+		/>
+		<span class="min-w-0 flex-1">
+			{#if label}
+				<label
+					for={checkboxId}
+					class={cn(
+						"block cursor-pointer text-sm leading-snug font-medium after:absolute after:inset-0 group-has-disabled/row:cursor-not-allowed",
+						invalid && "text-destructive",
+					)}
+				>
+					{label}
+					{#if required}
+						<span class="text-destructive" aria-hidden="true">*</span>
+					{/if}
+				</label>
+			{/if}
+			{#if description && !invalid}
+				<span
+					id="{checkboxId}-description"
+					class="text-muted-foreground mt-0.5 block text-sm">{description}</span
+				>
+			{/if}
+		</span>
+	</div>
+	{#if invalid}
+		<Field.Error
+			id="{checkboxId}-error"
+			class="pl-8"
+			errors={errors.map((message) => ({ message }))}
+		/>
+	{/if}
+</div>

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

@@ -0,0 +1,8 @@
+import { Checkbox } from "../ui/checkbox/index.js";
+import { type FieldProps } from "./field-frame.svelte";
+type Props = FieldProps & {
+    checked?: boolean;
+};
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/kit/confirm-dialog.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { MediaQuery } from "svelte/reactivity";
+
+	import * as AlertDialog from "../ui/alert-dialog/index.js";
+	import { Button } from "../ui/button/index.js";
+	import * as Drawer from "../ui/drawer/index.js";
+	import { Spinner } from "../ui/spinner/index.js";
+
+	const defaultMessages = {
+		confirm: "Confirm",
+		cancel: "Cancel",
+		working: "Working…",
+	};
+
+	interface Props {
+		open?: boolean;
+		title: string;
+		description?: string;
+		confirmLabel?: string;
+		cancelLabel?: string;
+		destructive?: boolean;
+		/** A returned promise keeps the dialog open with a spinner until it settles: it closes on success and stays open on rejection, so report the error yourself. */
+		onconfirm: () => unknown;
+		children?: Snippet;
+		messages?: Partial<typeof defaultMessages>;
+	}
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		confirmLabel,
+		cancelLabel,
+		destructive = false,
+		onconfirm,
+		children,
+		messages = {},
+	}: Props = $props();
+
+	const desktop = new MediaQuery("(min-width: 768px)");
+	const text = $derived({ ...defaultMessages, ...messages });
+
+	let pending = $state(false);
+
+	function setOpen(next: boolean) {
+		if (!pending) {
+			open = next;
+		}
+	}
+
+	async function confirm() {
+		const result = onconfirm();
+		if (!(result instanceof Promise)) {
+			open = false;
+			return;
+		}
+		pending = true;
+		const succeeded = await result.then(
+			() => true,
+			() => false,
+		);
+		pending = false;
+		if (succeeded) {
+			open = false;
+		}
+	}
+</script>
+
+{#snippet actions()}
+	<Button
+		variant="outline"
+		class="h-11 rounded-xl md:h-9"
+		disabled={pending}
+		onclick={() => setOpen(false)}
+	>
+		{cancelLabel ?? text.cancel}
+	</Button>
+	<Button
+		variant={destructive ? "destructive" : "default"}
+		class="h-11 rounded-xl md:h-9"
+		disabled={pending}
+		aria-busy={pending || undefined}
+		onclick={confirm}
+	>
+		{#if pending}
+			<Spinner aria-label={text.working} />
+		{/if}
+		{confirmLabel ?? text.confirm}
+	</Button>
+{/snippet}
+
+{#if desktop.current}
+	<AlertDialog.Root bind:open={() => open, setOpen}>
+		<AlertDialog.Content>
+			<AlertDialog.Header>
+				<AlertDialog.Title>{title}</AlertDialog.Title>
+				{#if description}
+					<AlertDialog.Description>{description}</AlertDialog.Description>
+				{/if}
+			</AlertDialog.Header>
+			{#if children}
+				<div class="grid gap-3">{@render children()}</div>
+			{/if}
+			<AlertDialog.Footer>
+				{@render actions()}
+			</AlertDialog.Footer>
+		</AlertDialog.Content>
+	</AlertDialog.Root>
+{:else}
+	<Drawer.Root bind:open={() => open, setOpen} dismissible={!pending}>
+		<Drawer.Content>
+			<Drawer.Header class="px-5 text-left">
+				<Drawer.Title>{title}</Drawer.Title>
+				{#if description}
+					<Drawer.Description>{description}</Drawer.Description>
+				{/if}
+			</Drawer.Header>
+			{#if children}
+				<div class="grid gap-3 px-5">{@render children()}</div>
+			{/if}
+			<div class="flex flex-col-reverse gap-2 px-5 pt-4 pb-4">
+				{@render actions()}
+			</div>
+		</Drawer.Content>
+	</Drawer.Root>
+{/if}

package/dist/components/kit/confirm-dialog.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+declare const ConfirmDialog: import("svelte").Component<{
+    open?: boolean;
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    destructive?: boolean;
+    /** A returned promise keeps the dialog open with a spinner until it settles: it closes on success and stays open on rejection, so report the error yourself. */
+    onconfirm: () => unknown;
+    children?: Snippet;
+    messages?: Partial<{
+        confirm: string;
+        cancel: string;
+        working: string;
+    }>;
+}, {}, "open">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;

package/dist/components/kit/data-table.svelte

@@ -0,0 +1,280 @@
+<script lang="ts" module>
+	export type DataTableColumn<Row extends object> = {
+		[Key in keyof Row & string]: {
+			key: Key;
+			label: string;
+			align?: "left" | "center" | "right";
+			format?: (value: Row[Key], row: Row) => string;
+			sortable?: boolean;
+			hideOnMobile?: boolean;
+		};
+	}[keyof Row & string];
+
+	function isMissing(value: unknown): boolean {
+		return value === null || value === undefined;
+	}
+
+	function compareValues(left: unknown, right: unknown): number {
+		if (typeof left === "number" && typeof right === "number") {
+			return left - right;
+		}
+		if (left instanceof Date && right instanceof Date) {
+			return left.getTime() - right.getTime();
+		}
+		return String(left).localeCompare(String(right), undefined, {
+			numeric: true,
+		});
+	}
+</script>
+
+<script lang="ts" generics="Row extends object">
+	import ArrowDownIcon from "@lucide/svelte/icons/arrow-down";
+	import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
+	import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
+	import type { Snippet } from "svelte";
+
+	import { Skeleton } from "../ui/skeleton/index.js";
+	import * as Table from "../ui/table/index.js";
+	import { cn } from "../../utils.js";
+
+	const defaultMessages = {
+		empty: "Nothing here yet.",
+	};
+
+	interface Props {
+		columns: DataTableColumn<Row>[];
+		rows: Row[];
+		cell?: Snippet<[Row, DataTableColumn<Row>, string]>;
+		rowHref?: (row: Row) => string;
+		onrowclick?: (row: Row) => void;
+		loading?: boolean;
+		messages?: Partial<typeof defaultMessages>;
+		class?: string;
+	}
+
+	const {
+		columns,
+		rows,
+		cell,
+		rowHref,
+		onrowclick,
+		loading = false,
+		messages = {},
+		class: className,
+	}: Props = $props();
+
+	const text = $derived({ ...defaultMessages, ...messages });
+	const interactive = $derived(Boolean(rowHref || onrowclick));
+	const firstColumn = $derived(columns[0]);
+	const detailColumns = $derived(
+		columns.slice(1).filter((column) => !column.hideOnMobile),
+	);
+	const placeholders = [0, 1, 2, 3, 4];
+	const alignment = {
+		left: "text-left",
+		center: "text-center",
+		right: "text-right",
+	};
+	const raisedControls =
+		"[&_a]:relative [&_a]:z-10 [&_button]:relative [&_button]:z-10";
+
+	let sortKey = $state<keyof Row & string>();
+	let descending = $state(false);
+
+	const sortedRows = $derived.by(() => {
+		const key = sortKey;
+		if (key === undefined) {
+			return rows;
+		}
+		return rows.toSorted((left, right) => {
+			const leftValue = left[key];
+			const rightValue = right[key];
+			if (isMissing(leftValue) || isMissing(rightValue)) {
+				return Number(isMissing(leftValue)) - Number(isMissing(rightValue));
+			}
+			const order = compareValues(leftValue, rightValue);
+			return descending ? -order : order;
+		});
+	});
+
+	function toggleSort(key: keyof Row & string) {
+		if (sortKey === key) {
+			descending = !descending;
+			return;
+		}
+		sortKey = key;
+		descending = false;
+	}
+
+	function display(row: Row, column: DataTableColumn<Row>): string {
+		const value = row[column.key];
+		const format = column.format as
+			((value: unknown, row: Row) => string) | undefined;
+		if (format) {
+			return format(value, row);
+		}
+		return isMissing(value) ? "–" : String(value);
+	}
+
+	function ariaSort(column: DataTableColumn<Row>) {
+		if (!column.sortable || sortKey !== column.key) {
+			return undefined;
+		}
+		return descending ? "descending" : "ascending";
+	}
+</script>
+
+{#snippet content(row: Row, column: DataTableColumn<Row>)}
+	{#if cell}
+		{@render cell(row, column, display(row, column))}
+	{:else}
+		{display(row, column)}
+	{/if}
+{/snippet}
+
+{#snippet primary(row: Row, column: DataTableColumn<Row>)}
+	{#if rowHref}
+		<a
+			href={rowHref(row)}
+			class="font-medium outline-none after:absolute after:inset-0 after:rounded-[inherit] focus-visible:after:ring-3 focus-visible:after:ring-ring/50"
+		>
+			{@render content(row, column)}
+		</a>
+	{:else if onrowclick}
+		<button
+			type="button"
+			onclick={() => onrowclick(row)}
+			class="text-left font-medium outline-none after:absolute after:inset-0 after:rounded-[inherit] focus-visible:after:ring-3 focus-visible:after:ring-ring/50"
+		>
+			{@render content(row, column)}
+		</button>
+	{:else}
+		<span class="font-medium">{@render content(row, column)}</span>
+	{/if}
+{/snippet}
+
+{#if !loading && rows.length === 0}
+	<p
+		class={cn(
+			"glass text-muted-foreground w-full rounded-2xl px-4 py-10 text-center text-sm",
+			className,
+		)}
+	>
+		{text.empty}
+	</p>
+{:else}
+	<div class={cn("w-full", className)} aria-busy={loading || undefined}>
+		<div class="glass hidden overflow-hidden rounded-2xl md:block">
+			<Table.Root>
+				<Table.Header>
+					<Table.Row class="hover:bg-transparent">
+						{#each columns as column, index (index)}
+							<Table.Head
+								aria-sort={ariaSort(column)}
+								class={cn(
+									"text-muted-foreground h-11 px-4 text-xs",
+									alignment[column.align ?? "left"],
+								)}
+							>
+								{#if column.sortable}
+									<button
+										type="button"
+										onclick={() => toggleSort(column.key)}
+										class="hover:text-foreground focus-visible:ring-ring/50 inline-flex items-center gap-1 rounded-sm font-medium outline-none focus-visible:ring-3"
+									>
+										{column.label}
+										{#if sortKey !== column.key}
+											<ChevronsUpDownIcon class="size-3.5 opacity-50" />
+										{:else if descending}
+											<ArrowDownIcon class="size-3.5" />
+										{:else}
+											<ArrowUpIcon class="size-3.5" />
+										{/if}
+									</button>
+								{:else}
+									{column.label}
+								{/if}
+							</Table.Head>
+						{/each}
+					</Table.Row>
+				</Table.Header>
+				<Table.Body>
+					{#if loading}
+						{#each placeholders as placeholder (placeholder)}
+							<Table.Row class="hover:bg-transparent">
+								{#each columns as column, index (index)}
+									<Table.Cell class="px-4 py-3">
+										<Skeleton class="h-4 w-full" />
+									</Table.Cell>
+								{/each}
+							</Table.Row>
+						{/each}
+					{:else}
+						{#each sortedRows as row, rowIndex (rowIndex)}
+							<Table.Row
+								class={cn(
+									"relative",
+									interactive ? "cursor-pointer" : "hover:bg-transparent",
+								)}
+							>
+								{#each columns as column, index (index)}
+									<Table.Cell
+										class={cn(
+											"tabular px-4 py-3",
+											alignment[column.align ?? "left"],
+											index > 0 && raisedControls,
+										)}
+									>
+										{#if index === 0}
+											{@render primary(row, column)}
+										{:else}
+											{@render content(row, column)}
+										{/if}
+									</Table.Cell>
+								{/each}
+							</Table.Row>
+						{/each}
+					{/if}
+				</Table.Body>
+			</Table.Root>
+		</div>
+
+		<ul class="flex flex-col gap-3 md:hidden">
+			{#if loading}
+				{#each placeholders as placeholder (placeholder)}
+					<li class="glass flex flex-col gap-3 rounded-2xl p-4">
+						<Skeleton class="h-5 w-1/2" />
+						<Skeleton class="h-4 w-full" />
+					</li>
+				{/each}
+			{:else if firstColumn}
+				{#each sortedRows as row, rowIndex (rowIndex)}
+					<li class="glass relative flex flex-col gap-2 rounded-2xl p-4">
+						<div class="min-w-0 wrap-break-word">
+							{@render primary(row, firstColumn)}
+						</div>
+						{#if detailColumns.length > 0}
+							<dl class="flex flex-col gap-1.5 text-sm">
+								{#each detailColumns as column, index (index)}
+									<div class="flex items-baseline justify-between gap-4">
+										<dt class="text-muted-foreground shrink-0">
+											{column.label}
+										</dt>
+										<dd
+											class={cn(
+												"tabular min-w-0 text-right wrap-break-word",
+												raisedControls,
+											)}
+										>
+											{@render content(row, column)}
+										</dd>
+									</div>
+								{/each}
+							</dl>
+						{/if}
+					</li>
+				{/each}
+			{/if}
+		</ul>
+	</div>
+{/if}

package/dist/components/kit/data-table.svelte.d.ts

@@ -0,0 +1,46 @@
+export type DataTableColumn<Row extends object> = {
+    [Key in keyof Row & string]: {
+        key: Key;
+        label: string;
+        align?: "left" | "center" | "right";
+        format?: (value: Row[Key], row: Row) => string;
+        sortable?: boolean;
+        hideOnMobile?: boolean;
+    };
+}[keyof Row & string];
+import type { Snippet } from "svelte";
+declare function $$render<Row extends object>(): {
+    props: {
+        columns: DataTableColumn<Row>[];
+        rows: Row[];
+        cell?: Snippet<[Row, DataTableColumn<Row>, string]>;
+        rowHref?: (row: Row) => string;
+        onrowclick?: (row: Row) => void;
+        loading?: boolean;
+        messages?: Partial<{
+            empty: string;
+        }>;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Row extends object> {
+    props(): ReturnType<typeof $$render<Row>>['props'];
+    events(): ReturnType<typeof $$render<Row>>['events'];
+    slots(): ReturnType<typeof $$render<Row>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Row extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Row>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Row>['props']>, ReturnType<__sveltets_Render<Row>['events']>, ReturnType<__sveltets_Render<Row>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Row>['bindings']>;
+    } & ReturnType<__sveltets_Render<Row>['exports']>;
+    <Row extends object>(internal: unknown, props: ReturnType<__sveltets_Render<Row>['props']> & {}): ReturnType<__sveltets_Render<Row>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<Row extends object> = InstanceType<typeof DataTable<Row>>;
+export default DataTable;