@svadmin/ui 0.5.14 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.5.14",
+  "version": "0.6.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -22,7 +22,7 @@
   "peerDependencies": {
     "svelte": "^5.0.0",
     "@svadmin/core": "^0.5.0",
-    "@tanstack/svelte-query": "^5.0.0",
+    "@tanstack/svelte-query": "^6.0.0",
     "bits-ui": "^2.0.0",
     "tailwind-variants": "^3.0.0",
     "clsx": "^2.0.0",

package/src/components/AutoTable.svelte

@@ -414,7 +414,7 @@
   {/if}
 
   <!-- Table (TanStack-powered) -->
-  <div class="rounded-lg border border-border bg-card shadow-sm overflow-hidden">
+  <div class="rounded-lg bg-card shadow-sm overflow-hidden">
     {#if query.isLoading}
       <div class="p-4 space-y-3">
         <div class="flex gap-4 mb-2">

package/src/components/EmptyState.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <div
-  class="flex flex-col items-center justify-center p-8 text-center min-h-[300px] bg-card rounded-lg border border-dashed border-border/50 shadow-sm"
+  class="flex flex-col items-center justify-center p-8 text-center min-h-[300px] bg-card/50 rounded-lg shadow-sm"
   in:scale={{ start: 0.95, duration: 250, opacity: 0 }}
 >
   <div class="h-20 w-20 rounded-full bg-muted flex items-center justify-center mb-4">

package/src/components/Header.svelte

@@ -21,7 +21,7 @@
   }>();
 </script>
 
-<header class="sticky top-0 z-30 flex h-14 w-full shrink-0 items-center justify-between border-b border-slate-200/60 dark:border-slate-800/60 bg-white/60 dark:bg-slate-900/60 backdrop-blur-md px-4 md:px-6">
+<header class="sticky top-0 z-30 flex h-14 w-full shrink-0 items-center justify-between bg-white/60 dark:bg-slate-900/60 backdrop-blur-md px-4 md:px-6">
   <div class="flex items-center gap-4">
     {#if children}
       {@render children()}

package/src/components/Layout.svelte

@@ -64,7 +64,7 @@
 <div role="application" onkeydown={(e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); commandOpen = true; } }}>
 {#if loading}
   <div class="flex h-screen" in:fade={{ duration: 150 }}>
-    <div class="hidden md:block w-64 border-r bg-sidebar/80 p-4 space-y-4">
+    <div class="hidden md:block w-64 bg-sidebar/80 p-4 space-y-4">
       <Skeleton class="h-8 w-32" />
       <div class="space-y-2 mt-6">
         {#each Array(5) as _}

package/src/components/Sidebar.svelte

@@ -142,13 +142,13 @@
 
 <aside
   aria-label="Sidebar navigation"
-  class="fixed inset-y-0 left-0 z-30 flex flex-col backdrop-blur-xl border-r border-sidebar-border transition-all duration-300"
+  class="fixed inset-y-0 left-0 z-30 flex flex-col backdrop-blur-xl transition-all duration-300"
   style="background-color: var(--sidebar);"
   class:w-64={!collapsed}
   class:w-16={collapsed}
 >
   <!-- Logo -->
-  <div class="flex h-16 items-center justify-between border-b border-sidebar-border px-4">
+  <div class="flex h-16 items-center justify-between px-4">
     {#if !collapsed}
       <div class="flex items-center gap-3">
         <div class="w-8 h-8 rounded-lg bg-gradient-to-tr from-primary to-purple-500 shrink-0" style="box-shadow: 0 4px 12px oklch(0.488 0.243 264.376 / 20%);"></div>
@@ -245,7 +245,7 @@
   </ScrollArea>
 
   <!-- Footer -->
-  <div class="border-t border-sidebar-border">
+  <div>
     <!-- Color theme picker -->
     {#if !collapsed}
       <div class="px-3 pt-3 pb-1">

package/src/components/StatsCard.svelte

@@ -14,7 +14,7 @@
   };
 
   const variantMap: Record<StyleVariant, string> = {
-    default: 'border border-border bg-card shadow-sm',
+    default: 'bg-card shadow-sm hover:shadow-md transition-shadow duration-300',
     outline: 'border-2 border-border bg-transparent',
     filled: 'border-0 bg-muted/50 shadow-sm',
   };

package/src/components/ui/avatar/avatar.svelte

@@ -19,7 +19,7 @@
 	// AvatarSize type is exported from the package index.ts
 	type AvatarSize = VariantProps<typeof avatarVariants>["size"];
 
-	type Props = WithElementRef<HTMLImgAttributes> & {
+	type Props = WithElementRef<HTMLImgAttributes, HTMLImageElement> & {
 		size?: AvatarSize;
 		fallback?: string;
 	};

package/src/components/ui/button/button.svelte

@@ -34,8 +34,8 @@
 	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
 	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 
-	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-		WithElementRef<HTMLAnchorAttributes> & {
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> &
+		WithElementRef<HTMLAnchorAttributes, HTMLAnchorElement> & {
 			variant?: ButtonVariant;
 			size?: ButtonSize;
 		};

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

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-footer"
-	class={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
+	class={cn("bg-muted/50 rounded-b-xl p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/src/components/ui/card/card.svelte

@@ -15,7 +15,7 @@
 	bind:this={ref}
 	data-slot="card"
 	data-size={size}
-	class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-lg py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg group/card flex flex-col", className)}
+	class={cn("shadow-sm bg-card text-card-foreground gap-4 overflow-hidden rounded-lg py-4 text-sm has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg group/card flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLButtonAttributes> & {
+	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
 		checked?: boolean;
 		onCheckedChange?: (checked: boolean) => void;
 	};

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

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLButtonAttributes> & {
+	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
 		inset?: boolean;
 		destructive?: boolean;
 	};

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

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLButtonAttributes>;
+	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement>;
 
 	let {
 		ref = $bindable(null),

package/src/components/ui/label/label.svelte

@@ -2,7 +2,7 @@
   import { cn, type WithElementRef } from '../../../utils.js';
   import type { HTMLLabelAttributes } from 'svelte/elements';
 
-  let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLabelAttributes> = $props();
+  let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLabelAttributes, HTMLLabelElement> = $props();
 </script>
 
 <label

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

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLSelectAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLSelectAttributes> & {
+	type Props = WithElementRef<HTMLSelectAttributes, HTMLSelectElement> & {
 		placeholder?: string;
 	};
 

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

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLButtonAttributes> & {
+	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
 		checked?: boolean;
 		disabled?: boolean;
 		onCheckedChange?: (checked: boolean) => void;

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

@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<tbody bind:this={ref} data-slot="table-body" class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
+<tbody bind:this={ref} data-slot="table-body" class={cn(className)} {...restProps}>
 	{@render children?.()}
 </tbody>

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

@@ -7,7 +7,7 @@
 		class: className,
 		children,
 		...restProps
-	}: WithElementRef<HTMLTdAttributes> = $props();
+	}: 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}>

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

@@ -13,7 +13,7 @@
 <tfoot
 	bind:this={ref}
 	data-slot="table-footer"
-	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	class={cn("bg-muted/50 font-medium", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -7,7 +7,7 @@
 		class: className,
 		children,
 		...restProps
-	}: WithElementRef<HTMLThAttributes> = $props();
+	}: 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}>

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

@@ -13,7 +13,7 @@
 <thead
 	bind:this={ref}
 	data-slot="table-header"
-	class={cn("[&_tr]:border-b", className)}
+	class={cn(className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -10,6 +10,6 @@
 	}: 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}>
+<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

@@ -7,7 +7,7 @@
 		class: className,
 		children,
 		...restProps
-	}: WithElementRef<HTMLTableAttributes> = $props();
+	}: WithElementRef<HTMLTableAttributes, HTMLTableElement> = $props();
 </script>
 
 <div data-slot="table-container" class="relative w-full overflow-x-auto">

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

@@ -2,7 +2,7 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 
-	type Props = WithElementRef<HTMLButtonAttributes> & {
+	type Props = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
 		value: string;
 		active?: boolean;
 	};

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

@@ -2,7 +2,7 @@
 	import type { HTMLTextareaAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
 
-	type Props = WithElementRef<HTMLTextareaAttributes>;
+	type Props = WithElementRef<HTMLTextareaAttributes, HTMLTextAreaElement>;
 
 	let {
 		ref = $bindable(null),