@svadmin/ui 0.0.1

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+import Root from "./tooltip.svelte";
+import Trigger from "./tooltip-trigger.svelte";
+import Content from "./tooltip-content.svelte";
+import Provider from "./tooltip-provider.svelte";
+import Portal from "./tooltip-portal.svelte";
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	Portal,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+	Portal as TooltipPortal,
+};

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+	import TooltipPortal from "./tooltip-portal.svelte";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = "top",
+		children,
+		arrowClasses,
+		portalProps,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+	} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm bg-foreground text-background z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin)",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50",
+						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]",
+						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]",
+						"data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2",
+						"data-[side=left]:-translate-y-[calc(50%-3px)]",
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPortal>

package/src/components/ui/tooltip/tooltip-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />

package/src/components/ui/tooltip/tooltip-provider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {delayDuration} {...restProps} />

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

package/src/components/ui/tooltip/tooltip.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import TooltipProvider from "./tooltip-provider.svelte";
+
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+</script>
+
+<TooltipProvider>
+	<TooltipPrimitive.Root bind:open {...restProps} />
+</TooltipProvider>

package/src/index.ts

@@ -0,0 +1,43 @@
+// @svadmin/ui — Pre-built admin UI components
+
+// Entry component
+export { default as AdminApp } from './components/AdminApp.svelte';
+
+// Admin components
+export { default as AutoTable } from './components/AutoTable.svelte';
+export { default as AutoForm } from './components/AutoForm.svelte';
+export { default as ShowPage } from './components/ShowPage.svelte';
+export { default as ConfirmDialog } from './components/ConfirmDialog.svelte';
+export { default as Sidebar } from './components/Sidebar.svelte';
+export { default as Layout } from './components/Layout.svelte';
+export { default as Header } from './components/Header.svelte';
+export { default as ErrorBoundary } from './components/ErrorBoundary.svelte';
+export { default as Toast } from './components/Toast.svelte';
+export { default as Breadcrumbs } from './components/Breadcrumbs.svelte';
+export { default as FieldRenderer } from './components/FieldRenderer.svelte';
+export { default as EmptyState } from './components/EmptyState.svelte';
+export { default as StatsCard } from './components/StatsCard.svelte';
+export { default as PageHeader } from './components/PageHeader.svelte';
+
+// Base UI components (shadcn-svelte)
+export { Button, buttonVariants } from './components/ui/button/index.js';
+export { Input } from './components/ui/input/index.js';
+export { Textarea } from './components/ui/textarea/index.js';
+export { Select } from './components/ui/select/index.js';
+export { Switch } from './components/ui/switch/index.js';
+export { Checkbox } from './components/ui/checkbox/index.js';
+export { Badge } from './components/ui/badge/index.js';
+export { Separator } from './components/ui/separator/index.js';
+export { Avatar } from './components/ui/avatar/index.js';
+export { Skeleton } from './components/ui/skeleton/index.js';
+export { Sheet } from './components/ui/sheet/index.js';
+export * as Alert from './components/ui/alert/index.js';
+export * as Card from './components/ui/card/index.js';
+export * as Dialog from './components/ui/dialog/index.js';
+export * as Table from './components/ui/table/index.js';
+export * as Tabs from './components/ui/tabs/index.js';
+export * as Tooltip from './components/ui/tooltip/index.js';
+export * as DropdownMenu from './components/ui/dropdown-menu/index.js';
+
+// Utils
+export { cn } from './utils';

package/src/utils.ts

@@ -0,0 +1,28 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import type { Snippet } from "svelte";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+/**
+ * A utility type that makes the `ref` prop optional and adds it to the given props type.
+ */
+export type WithElementRef<T, E extends HTMLElement = HTMLElement> = T & {
+	ref?: E | null;
+};
+
+/**
+ * A utility type that removes `children` and `child` from the given props type.
+ */
+export type WithoutChildrenOrChild<T> = T extends infer U
+	? Omit<U, "children" | "child">
+	: never;
+
+/**
+ * A utility type that removes `children` from the given props type (keeps `child`).
+ */
+export type WithoutChildren<T> = T extends infer U
+	? Omit<U, "children">
+	: never;