@svadmin/ui 0.29.0 → 0.29.2

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

@@ -1,23 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-import Root from "./sheet.svelte";
-import Content from "./sheet-content.svelte";
-import Header from "./sheet-header.svelte";
-import Title from "./sheet-title.svelte";
-import Description from "./sheet-description.svelte";
-import Footer from "./sheet-footer.svelte";
-
-export {
-	Root,
-	Content,
-	Header,
-	Title,
-	Description,
-	Footer,
-	Root as Sheet,
-};

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

@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		side?: "left" | "right";
-	};
-
-	let {
-		ref = $bindable(null),
-		side = "right",
-		class: className,
-		children,
-		...restProps
-	}: Props = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="sheet-content"
-	class={cn(
-		"flex flex-col gap-4 h-full",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

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

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

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

@@ -1,22 +0,0 @@
-<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="sheet-footer"
-	class={cn("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

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

@@ -1,22 +0,0 @@
-<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="sheet-header"
-	class={cn("flex flex-col gap-1.5 pb-4", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

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

@@ -1,22 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	type Props = WithElementRef<HTMLAttributes<HTMLHeadingElement>>;
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: Props = $props();
-</script>
-
-<h3
-	bind:this={ref}
-	data-slot="sheet-title"
-	class={cn("text-lg font-semibold text-foreground", className)}
-	{...restProps}
->
-	{@render children?.()}
-</h3>

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

@@ -1,78 +0,0 @@
-<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
-		role="presentation"
-		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

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

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

@@ -1,21 +0,0 @@
-<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

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

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

@@ -1,49 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLButtonAttributes } from "svelte/elements";
-
-	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
-		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

@@ -1,28 +0,0 @@
-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

@@ -1,15 +0,0 @@
-<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(className)} {...restProps}>
-	{@render children?.()}
-</tbody>

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

@@ -1,20 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-<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, HTMLTableCellElement> = $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

@@ -1,20 +0,0 @@
-<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 font-medium", className)}
-	{...restProps}
->
-	{@render children?.()}
-</tfoot>

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

@@ -1,15 +0,0 @@
-<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, HTMLTableCellElement> = $props();
-</script>
-
-<th bind:this={ref} data-slot="table-head" class={cn("text-foreground h-9 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

@@ -1,20 +0,0 @@
-<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(className)}
-	{...restProps}
->
-	{@render children?.()}
-</thead>

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

@@ -1,15 +0,0 @@
-<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 transition-colors", className)} {...restProps}>
-	{@render children?.()}
-</tr>

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

@@ -1,17 +0,0 @@
-<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, HTMLTableElement> = $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

@@ -1,15 +0,0 @@
-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

@@ -1,30 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-<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>

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

@@ -1,37 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLButtonAttributes } from "svelte/elements";
-
-	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
-		value: string;
-		active?: boolean;
-	};
-
-	let {
-		ref = $bindable(null),
-		value,
-		active = false,
-		class: className,
-		children,
-		...restProps
-	}: Props = $props();
-</script>
-
-<button
-	bind:this={ref}
-	type="button"
-	role="tab"
-	data-slot="tabs-trigger"
-	data-state={active ? "active" : "inactive"}
-	aria-selected={active}
-	class={cn(
-		"inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-2.5 py-1 text-sm font-medium transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
-		active
-			? "bg-background text-foreground shadow-sm"
-			: "text-muted-foreground hover:text-foreground",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</button>

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

@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		value?: string;
-		onValueChange?: (value: string) => void;
-	};
-
-	let {
-		ref = $bindable(null),
-		value = $bindable(""),
-		onValueChange,
-		class: className,
-		children,
-		...restProps
-	}: Props = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="tabs"
-	class={cn("flex flex-col gap-2", className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

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

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

package/src/components/ui/textarea/textarea.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	import type { HTMLTextareaAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "../../../utils.js";
-
-	type Props = WithElementRef<HTMLTextareaAttributes, HTMLTextAreaElement>;
-
-	let {
-		ref = $bindable(null),
-		value = $bindable(),
-		class: className,
-		...restProps
-	}: Props = $props();
-</script>
-
-<textarea
-	bind:this={ref}
-	data-slot="textarea"
-	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 w-full rounded-lg border bg-transparent px-3 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground min-h-[80px] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 resize-y",
-		className
-	)}
-	bind:value
-	{...restProps}
-></textarea>