@svadmin/ui 0.0.1

package/src/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLButtonAttributes> & {
+		inset?: boolean;
+		destructive?: boolean;
+	};
+
+	let {
+		ref = $bindable(null),
+		inset = false,
+		destructive = false,
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+<button
+	bind:this={ref}
+	type="button"
+	data-slot="dropdown-menu-item"
+	class={cn(
+		"relative flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors [&_svg]:size-4 [&_svg]:shrink-0",
+		destructive
+			? "text-destructive hover:bg-destructive/10 focus:bg-destructive/10"
+			: "hover:bg-accent focus:bg-accent focus:text-accent-foreground",
+		"disabled:pointer-events-none disabled:opacity-50",
+		inset && "pl-8",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</button>

package/src/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+
+	let { class: className }: { class?: string } = $props();
+</script>
+
+<div
+	data-slot="dropdown-menu-separator"
+	class={cn("-mx-1 my-1 h-px bg-border", className)}
+></div>

package/src/components/ui/dropdown-menu/dropdown-menu.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	};
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		onOpenChange,
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+
+	function handleClickOutside(e: MouseEvent) {
+		if (ref && !ref.contains(e.target as Node)) {
+			open = false;
+			onOpenChange?.(false);
+		}
+	}
+
+	$effect(() => {
+		if (open) {
+			document.addEventListener('click', handleClickOutside, true);
+			return () => document.removeEventListener('click', handleClickOutside, true);
+		}
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dropdown-menu"
+	class={cn("relative inline-block", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,15 @@
+import DropdownMenu from "./dropdown-menu.svelte";
+import DropdownMenuContent from "./dropdown-menu-content.svelte";
+import DropdownMenuItem from "./dropdown-menu-item.svelte";
+import DropdownMenuSeparator from "./dropdown-menu-separator.svelte";
+
+export {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenu as Root,
+	DropdownMenuContent as Content,
+	DropdownMenuItem as Item,
+	DropdownMenuSeparator as Separator,
+};

package/src/components/ui/input/index.ts

@@ -0,0 +1,7 @@
+import Root from "./input.svelte";
+
+export {
+	Root,
+	//
+	Root as Input,
+};

package/src/components/ui/input/input.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, "type"> &
+			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "input",
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === "file"}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			className
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}

package/src/components/ui/select/index.ts

@@ -0,0 +1,2 @@
+import Root from "./select.svelte";
+export { Root, Root as Select };

package/src/components/ui/select/select.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLSelectAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLSelectAttributes> & {
+		placeholder?: string;
+	};
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		placeholder,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+<select
+	bind:this={ref}
+	data-slot="select"
+	class={cn(
+		"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 w-full appearance-none rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 bg-[length:16px] bg-[right_8px_center] bg-no-repeat",
+		"bg-[url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\")]",
+		className
+	)}
+	bind:value
+	{...restProps}
+>
+	{#if placeholder}
+		<option value="" disabled selected>{placeholder}</option>
+	{/if}
+	{@render children?.()}
+</select>

package/src/components/ui/separator/index.ts

@@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};

package/src/components/ui/separator/separator.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		"data-slot": dataSlot = "separator",
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot={dataSlot}
+	class={cn(
+		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
+		// this is different in shadcn/ui but self-stretch breaks things for us
+		"data-[orientation=vertical]:h-full",
+		className
+	)}
+	{...restProps}
+/>

package/src/components/ui/sheet/index.ts

@@ -0,0 +1,2 @@
+import Root from "./sheet.svelte";
+export { Root, Root as Sheet };

package/src/components/ui/sheet/sheet.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		open?: boolean;
+		side?: "left" | "right";
+		onClose?: () => void;
+	};
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		side = "right",
+		onClose,
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+
+	function close() {
+		open = false;
+		onClose?.();
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === "Escape") close();
+	}
+
+	$effect(() => {
+		if (open) {
+			document.addEventListener("keydown", handleKeydown);
+			document.body.style.overflow = "hidden";
+			return () => {
+				document.removeEventListener("keydown", handleKeydown);
+				document.body.style.overflow = "";
+			};
+		}
+	});
+</script>
+
+{#if open}
+	<!-- Overlay -->
+	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 z-50 bg-black/80 animate-in fade-in-0"
+		onclick={close}
+	></div>
+
+	<!-- Sheet panel -->
+	<div
+		bind:this={ref}
+		data-slot="sheet"
+		class={cn(
+			"fixed z-50 flex flex-col gap-4 bg-background p-6 shadow-lg transition-transform",
+			side === "right"
+				? "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l animate-in slide-in-from-right"
+				: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r animate-in slide-in-from-left",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+
+		<!-- Close button -->
+		<button
+			type="button"
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+			onclick={close}
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+				<path d="M18 6 6 18"/><path d="m6 6 12 12"/>
+			</svg>
+			<span class="sr-only">Close</span>
+		</button>
+	</div>
+{/if}

package/src/components/ui/skeleton/index.ts

@@ -0,0 +1,2 @@
+import Root from "./skeleton.svelte";
+export { Root, Root as Skeleton };

package/src/components/ui/skeleton/skeleton.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		class?: string;
+	};
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: Props = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn("animate-pulse rounded-md bg-muted", className)}
+	{...restProps}
+></div>

package/src/components/ui/switch/index.ts

@@ -0,0 +1,2 @@
+import Root from "./switch.svelte";
+export { Root, Root as Switch };

package/src/components/ui/switch/switch.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLButtonAttributes> & {
+		checked?: boolean;
+		disabled?: boolean;
+		onCheckedChange?: (checked: boolean) => void;
+	};
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		disabled = false,
+		onCheckedChange,
+		class: className,
+		...restProps
+	}: Props = $props();
+
+	function toggle() {
+		if (disabled) return;
+		checked = !checked;
+		onCheckedChange?.(checked);
+	}
+</script>
+
+<button
+	bind:this={ref}
+	type="button"
+	role="switch"
+	aria-checked={checked}
+	data-state={checked ? "checked" : "unchecked"}
+	data-slot="switch"
+	{disabled}
+	class={cn(
+		"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50",
+		checked ? "bg-primary" : "bg-input dark:bg-input/80",
+		className
+	)}
+	onclick={toggle}
+	{...restProps}
+>
+	<span
+		class={cn(
+			"pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform",
+			checked ? "translate-x-4" : "translate-x-0"
+		)}
+	></span>
+</button>

package/src/components/ui/table/index.ts

@@ -0,0 +1,28 @@
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow,
+};

package/src/components/ui/table/table-body.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody bind:this={ref} data-slot="table-body" class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
+	{@render children?.()}
+</tbody>

package/src/components/ui/table/table-caption.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn("text-muted-foreground mt-4 text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>

package/src/components/ui/table/table-cell.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLTdAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td bind:this={ref} data-slot="table-cell" class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
+	{@render children?.()}
+</td>

package/src/components/ui/table/table-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tfoot>

package/src/components/ui/table/table-head.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLThAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th bind:this={ref} data-slot="table-head" class={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
+	{@render children?.()}
+</th>

package/src/components/ui/table/table-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead
+	bind:this={ref}
+	data-slot="table-header"
+	class={cn("[&_tr]:border-b", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</thead>

package/src/components/ui/table/table-row.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
+</script>
+
+<tr bind:this={ref} data-slot="table-row" class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)} {...restProps}>
+	{@render children?.()}
+</tr>

package/src/components/ui/table/table.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLTableAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+	<table bind:this={ref} data-slot="table" class={cn("w-full caption-bottom text-sm", className)} {...restProps}>
+		{@render children?.()}
+	</table>
+</div>

package/src/components/ui/tabs/index.ts

@@ -0,0 +1,15 @@
+import Tabs from "./tabs.svelte";
+import TabsList from "./tabs-list.svelte";
+import TabsTrigger from "./tabs-trigger.svelte";
+import TabsContent from "./tabs-content.svelte";
+
+export {
+	Tabs,
+	TabsList,
+	TabsTrigger,
+	TabsContent,
+	Tabs as Root,
+	TabsList as List,
+	TabsTrigger as Trigger,
+	TabsContent as Content,
+};

package/src/components/ui/tabs/tabs-content.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		value: string;
+		active?: boolean;
+	};
+
+	let {
+		ref = $bindable(null),
+		value,
+		active = false,
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if active}
+	<div
+		bind:this={ref}
+		data-slot="tabs-content"
+		role="tabpanel"
+		class={cn("flex-1 outline-none", className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/src/components/ui/tabs/tabs-list.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="tabs-list"
+	class={cn(
+		"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px] gap-1",
+		className
+	)}
+	role="tablist"
+	{...restProps}
+>
+	{@render children?.()}
+</div>