@svadmin/ui 0.3.0 → 0.5.0

package/src/components/Sidebar.svelte

@@ -6,10 +6,14 @@
   import { toggleTheme, getResolvedTheme, colorThemes, getColorTheme, setColorTheme, canAccessAsync } from '@svadmin/core';
   import { Button } from './ui/button/index.js';
   import * as Tooltip from './ui/tooltip/index.js';
+  import * as DropdownMenu from './ui/dropdown-menu/index.js';
   import { Separator } from './ui/separator/index.js';
+  import { ScrollArea } from './ui/scroll-area/index.js';
+  import * as Collapsible from './ui/collapsible/index.js';
+  import { Avatar } from './ui/avatar/index.js';
   import {
     LayoutDashboard, FileText, Users, Settings, Home,
-    ChevronLeft, ChevronRight, LogOut, Sun, Moon, Languages
+    ChevronLeft, ChevronRight, ChevronDown, LogOut, Sun, Moon, Languages, Palette
   } from 'lucide-svelte';
 
   let { collapsed, identity, title, onToggle, onLogout } = $props<{
@@ -34,15 +38,21 @@
     path: string;
     label: string;
     Icon: typeof LayoutDashboard;
+    group?: string;
+  }
+
+  interface NavGroup {
+    name: string | null; // null = ungrouped
+    items: NavItem[];
   }
 
   // Use effect to build nav items, taking access control into account
-  let navItems = $state<NavItem[]>([]);
+  let navItems = $state.raw<NavItem[]>([]);
 
   $effect(() => {
     // Re-run when locale or resources change
     const localeVal = getLocale();
-    
+
     Promise.all(resources.map(async (r) => {
       try {
         const { can } = await canAccessAsync(r.name, 'list');
@@ -58,6 +68,7 @@
             path: `/${r.name}`,
             label: r.label,
             Icon: iconMap[r.name] ?? Settings,
+            group: r.group,
           });
         }
       }
@@ -79,19 +90,39 @@
 
   // Track current hash for active state
   let path = $state(currentPath());
-  $effect(() => {
-    function onHash() { path = currentPath(); }
-    window.addEventListener('hashchange', onHash);
-    return () => window.removeEventListener('hashchange', onHash);
-  });
+
+  function onHashChange() { path = currentPath(); }
 
   function isActive(itemPath: string): boolean {
     if (itemPath === '/') return path === '/';
     return path.startsWith(itemPath);
   }
+
+  // Group nav items by group field (null = ungrouped)
+  const navGroups = $derived.by((): NavGroup[] => {
+    const groups: NavGroup[] = [];
+    const groupMap = new Map<string | null, NavItem[]>();
+
+    for (const item of navItems) {
+      const key = item.group ?? null;
+      if (!groupMap.has(key)) {
+        groupMap.set(key, []);
+        groups.push({ name: key, items: groupMap.get(key)! });
+      }
+      groupMap.get(key)!.push(item);
+    }
+
+    return groups;
+  });
+
+  // Track which groups are open
+  let openGroups = $state<Set<string>>(new Set());
 </script>
 
+<svelte:window onhashchange={onHashChange} />
+
 <aside
+  aria-label="Sidebar navigation"
   class="fixed inset-y-0 left-0 z-30 flex flex-col bg-sidebar/80 backdrop-blur-xl border-r border-sidebar-border/50 shadow-xl transition-all duration-300"
   class:w-64={!collapsed}
   class:w-16={collapsed}
@@ -112,73 +143,133 @@
     </Button>
   </div>
 
-  <!-- Nav -->
-  <nav class="flex-1 overflow-y-auto py-4 px-2 space-y-1">
-    {#each navItems as item}
-      {@const active = isActive(item.path)}
-      {#if collapsed}
-        <Tooltip.Root>
-          <Tooltip.Trigger>
-            {#snippet child({ props })}
-              <a
-                {...props}
-                href={`#${item.path}`}
-                class="flex items-center justify-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors"
-                class:bg-sidebar-accent={active}
-                class:text-sidebar-accent-foreground={active}
-                class:text-sidebar-foreground={!active}
-                class:hover:bg-sidebar-accent={!active}
-              >
-                <item.Icon class="h-5 w-5 flex-shrink-0" />
-              </a>
-            {/snippet}
-          </Tooltip.Trigger>
-          <Tooltip.Content side="right">
-            {item.label}
-          </Tooltip.Content>
-        </Tooltip.Root>
+  <ScrollArea class="flex-1">
+  <nav aria-label="Main menu" class="py-4 px-2 space-y-1">
+    {#each navGroups as group}
+      {#if group.name && !collapsed}
+        <!-- Grouped section with Collapsible -->
+        <Collapsible.Root open={openGroups.has(group.name)} onOpenChange={(isOpen) => {
+          const next = new Set(openGroups);
+          if (isOpen) next.add(group.name!); else next.delete(group.name!);
+          openGroups = next;
+        }}>
+          <Collapsible.Trigger
+            class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-xs font-semibold uppercase tracking-wider text-sidebar-foreground/60 hover:bg-sidebar-accent/50 transition-colors"
+          >
+            <span>{group.name}</span>
+            <ChevronDown class="h-3 w-3 transition-transform {openGroups.has(group.name) ? 'rotate-180' : ''}" />
+          </Collapsible.Trigger>
+          <Collapsible.Content>
+            <div class="mt-1 space-y-0.5 pl-1">
+              {#each group.items as item}
+                {@const active = isActive(item.path)}
+                <a
+                  href={`#${item.path}`}
+                  class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors"
+                  class:bg-sidebar-accent={active}
+                  class:text-sidebar-accent-foreground={active}
+                  class:text-sidebar-foreground={!active}
+                  class:hover:bg-sidebar-accent={!active}
+                >
+                  <item.Icon class="h-5 w-5 flex-shrink-0" />
+                  <span>{item.label}</span>
+                </a>
+              {/each}
+            </div>
+          </Collapsible.Content>
+        </Collapsible.Root>
       {:else}
-        <a
-          href={`#${item.path}`}
-          class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors"
-          class:bg-sidebar-accent={active}
-          class:text-sidebar-accent-foreground={active}
-          class:text-sidebar-foreground={!active}
-          class:hover:bg-sidebar-accent={!active}
-        >
-          <item.Icon class="h-5 w-5 flex-shrink-0" />
-          <span>{item.label}</span>
-        </a>
+        <!-- Ungrouped items (flat) -->
+        {#each group.items as item}
+          {@const active = isActive(item.path)}
+          {#if collapsed}
+            <Tooltip.Root>
+              <Tooltip.Trigger>
+                {#snippet child({ props })}
+                  <a
+                    {...props}
+                    href={`#${item.path}`}
+                    class="flex items-center justify-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors"
+                    class:bg-sidebar-accent={active}
+                    class:text-sidebar-accent-foreground={active}
+                    class:text-sidebar-foreground={!active}
+                    class:hover:bg-sidebar-accent={!active}
+                  >
+                    <item.Icon class="h-5 w-5 flex-shrink-0" />
+                  </a>
+                {/snippet}
+              </Tooltip.Trigger>
+              <Tooltip.Content side="right">
+                {item.label}
+              </Tooltip.Content>
+            </Tooltip.Root>
+          {:else}
+            <a
+              href={`#${item.path}`}
+              class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors"
+              class:bg-sidebar-accent={active}
+              class:text-sidebar-accent-foreground={active}
+              class:text-sidebar-foreground={!active}
+              class:hover:bg-sidebar-accent={!active}
+            >
+              <item.Icon class="h-5 w-5 flex-shrink-0" />
+              <span>{item.label}</span>
+            </a>
+          {/if}
+        {/each}
       {/if}
     {/each}
   </nav>
+  </ScrollArea>
 
   <!-- Footer -->
   <Separator class="bg-sidebar-border" />
   <div class="p-3 space-y-2">
-    <!-- Color theme picker -->
+    <!-- Color theme picker via DropdownMenu -->
     {#if !collapsed}
-      <div class="flex items-center justify-center gap-1.5 px-2 py-1">
-        {#each colorThemes as ct}
-          <button
-            class="h-5 w-5 rounded-full transition-all duration-200 hover:scale-110 {getColorTheme() === ct.id ? 'ring-2 ring-offset-2 ring-offset-sidebar scale-110' : 'opacity-70 hover:opacity-100'}"
-            style="background-color: {ct.color}; {getColorTheme() === ct.id ? `--tw-ring-color: ${ct.color}` : ''}"
-            title={ct.label}
-            onclick={() => setColorTheme(ct.id)}
-          ></button>
-        {/each}
-      </div>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          {#snippet child({ props })}
+            <Button
+              {...props}
+              variant="ghost"
+              class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-sidebar-foreground hover:bg-sidebar-accent transition-colors h-auto justify-start"
+            >
+              <Palette class="h-4 w-4" />
+              <span class="flex-1 text-left text-xs">{t('common.toggleTheme')}</span>
+              <span
+                class="h-4 w-4 rounded-full ring-1 ring-offset-1 ring-offset-sidebar"
+                style="background-color: {colorThemes.find(c => c.id === getColorTheme())?.color ?? '#3b82f6'}; --tw-ring-color: {colorThemes.find(c => c.id === getColorTheme())?.color ?? '#3b82f6'}"
+              ></span>
+            </Button>
+          {/snippet}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content side="right" align="end" class="w-40">
+          {#each colorThemes as ct}
+            <DropdownMenu.Item onclick={() => setColorTheme(ct.id)} class="gap-2">
+              <span
+                class="h-4 w-4 rounded-full {getColorTheme() === ct.id ? 'ring-2 ring-offset-2 scale-110' : 'opacity-70'}"
+                style="background-color: {ct.color}; {getColorTheme() === ct.id ? `--tw-ring-color: ${ct.color}` : ''}"
+              ></span>
+              {ct.label}
+            </DropdownMenu.Item>
+          {/each}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
     {/if}
 
     {#if !collapsed && identity}
       <div class="flex items-center gap-3 rounded-lg px-2 py-2">
-        <div class="flex h-8 w-8 items-center justify-center rounded-full bg-sidebar-accent text-sm font-medium text-sidebar-accent-foreground">
-          {identity.name?.charAt(0).toUpperCase() ?? 'U'}
-        </div>
+        <Avatar
+          src={(identity as Record<string, unknown>).avatar as string | undefined}
+          alt={identity.name ?? 'User'}
+          fallback={identity.name?.charAt(0).toUpperCase() ?? 'U'}
+          size="sm"
+        />
         <div class="flex-1 min-w-0">
           <p class="truncate text-sm font-medium text-sidebar-foreground">{identity.name}</p>
         </div>
-        <Button variant="ghost" size="icon-sm" onclick={toggleLocale} class="text-sidebar-foreground" title="Switch language">
+        <Button variant="ghost" size="icon-sm" onclick={toggleLocale} class="text-sidebar-foreground" title={t('common.switchLanguage')}>
           <span class="text-xs font-bold">{localeLabel}</span>
         </Button>
         <Button variant="ghost" size="icon-sm" onclick={toggleTheme} class="text-sidebar-foreground" title={t('common.toggleTheme')}>
@@ -193,22 +284,43 @@
         </Button>
       </div>
     {:else if collapsed}
-      <Button variant="ghost" size="icon" onclick={toggleLocale} class="w-full text-sidebar-foreground" title="Switch language">
-        <span class="text-xs font-bold">{localeLabel}</span>
-      </Button>
-      <Button variant="ghost" size="icon" onclick={toggleTheme} class="w-full text-sidebar-foreground" title={t('common.toggleTheme')}>
-        {#if getResolvedTheme() === 'dark'}
-          <Sun class="h-5 w-5" />
-        {:else}
-          <Moon class="h-5 w-5" />
-        {/if}
-      </Button>
-      <Button variant="ghost" size="icon" onclick={onLogout} class="w-full text-sidebar-foreground hover:text-destructive" title={t('common.logout')}>
-        <LogOut class="h-5 w-5" />
-      </Button>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button {...props} variant="ghost" size="icon" onclick={toggleLocale} class="w-full text-sidebar-foreground" title={t('common.switchLanguage')}>
+              <span class="text-xs font-bold">{localeLabel}</span>
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content side="right">{t('common.switchLanguage')}</Tooltip.Content>
+      </Tooltip.Root>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button {...props} variant="ghost" size="icon" onclick={toggleTheme} class="w-full text-sidebar-foreground" title={t('common.toggleTheme')}>
+              {#if getResolvedTheme() === 'dark'}
+                <Sun class="h-5 w-5" />
+              {:else}
+                <Moon class="h-5 w-5" />
+              {/if}
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content side="right">{t('common.toggleTheme')}</Tooltip.Content>
+      </Tooltip.Root>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button {...props} variant="ghost" size="icon" onclick={onLogout} class="w-full text-sidebar-foreground hover:text-destructive" title={t('common.logout')}>
+              <LogOut class="h-5 w-5" />
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content side="right">{t('common.logout')}</Tooltip.Content>
+      </Tooltip.Root>
     {:else}
       <div class="flex gap-1">
-        <Button variant="ghost" size="icon" onclick={toggleLocale} class="flex-1 text-sidebar-foreground" title="Switch language">
+        <Button variant="ghost" size="icon" onclick={toggleLocale} class="flex-1 text-sidebar-foreground" title={t('common.switchLanguage')}>
           <span class="text-xs font-bold">{localeLabel}</span>
         </Button>
         <Button variant="ghost" size="icon" onclick={toggleTheme} class="flex-1 text-sidebar-foreground" title={t('common.toggleTheme')}>

package/src/components/StatsCard.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { Loader2 } from 'lucide-svelte';
+  import { Skeleton } from './ui/skeleton/index.js';
+  import type { Snippet } from 'svelte';
 
   type ColorVariant = 'primary' | 'success' | 'warning' | 'danger' | 'info';
   type StyleVariant = 'default' | 'outline' | 'filled';
@@ -21,11 +22,13 @@
   interface Props {
     label: string;
     value: string | number;
-    icon?: typeof Loader2;
+    icon?: import('svelte').Component<{ class?: string }>;
     trend?: { value: number; label?: string };
     loading?: boolean;
     color?: ColorVariant;
     variant?: StyleVariant;
+    /** Optional footer snippet for additional content below the value */
+    footer?: Snippet;
     class?: string;
   }
 
@@ -37,6 +40,7 @@
     loading = false,
     color = 'primary',
     variant = 'default',
+    footer,
     class: className = '',
   }: Props = $props();
 </script>
@@ -50,7 +54,7 @@
   <div class="flex-1 min-w-0">
     <p class="text-sm text-muted-foreground">{label}</p>
     {#if loading}
-      <Loader2 class="mt-1 h-5 w-5 animate-spin text-muted-foreground" />
+      <Skeleton class="mt-1 h-7 w-20" />
     {:else}
       <div class="flex items-baseline gap-2">
         <p class="text-2xl font-bold text-foreground">{value}</p>
@@ -66,5 +70,10 @@
         {/if}
       </div>
     {/if}
+    {#if footer}
+      <div class="mt-2">
+        {@render footer()}
+      </div>
+    {/if}
   </div>
 </div>

package/src/components/StepsForm.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  import { fly } from 'svelte/transition';
+  import { useStepsForm } from '@svadmin/core';
+  import type { FieldDefinition } from '@svadmin/core';
+  import { getResource } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from './ui/button/index.js';
+  import * as Card from './ui/card/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Progress } from './ui/progress/index.js';
+  import { Skeleton } from './ui/skeleton/index.js';
+  import { Save, ArrowLeft, ArrowRight, Check, Loader2 } from 'lucide-svelte';
+  import FieldRenderer from './FieldRenderer.svelte';
+
+  interface StepDef {
+    title: string;
+    fields: string[];
+  }
+
+  interface Props {
+    resourceName: string;
+    id?: string | number;
+    mode?: 'create' | 'edit';
+    steps: StepDef[];
+  }
+
+  let { resourceName, id, mode = 'create', steps }: Props = $props();
+
+  const resource = getResource(resourceName);
+  const primaryKey = resource.primaryKey ?? 'id';
+
+  const stepsForm = useStepsForm({
+    resource: resourceName,
+    action: mode,
+    id,
+  });
+
+  const { currentStep, next, prev, gotoStep } = stepsForm;
+
+  const totalSteps = steps.length;
+  const progressValue = $derived(((currentStep + 1) / totalSteps) * 100);
+  const isLastStep = $derived(currentStep >= totalSteps - 1);
+
+  // Get fields for current step
+  const currentFields = $derived(
+    steps[currentStep]?.fields
+      .map(key => resource.fields.find(f => f.key === key))
+      .filter((f): f is FieldDefinition => f != null && f.key !== primaryKey) ?? []
+  );
+
+  function handleSubmit() {
+    if (!isLastStep) {
+      next();
+      return;
+    }
+    stepsForm.onFinish(stepsForm.formValues);
+  }
+</script>
+
+<div class="space-y-6">
+  <!-- Step indicators -->
+  <div class="space-y-3">
+    <div class="flex items-center justify-between text-sm">
+      {#each steps as step, i}
+        <Button
+          variant="ghost"
+          type="button"
+          class="flex items-center gap-2 transition-colors h-auto py-1 px-2 {i === currentStep ? 'text-primary font-semibold' : 'text-muted-foreground'}"
+          onclick={() => gotoStep(i)}
+        >
+          <span
+            class="flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium transition-colors"
+            class:bg-primary={i <= currentStep}
+            class:text-primary-foreground={i <= currentStep}
+            class:bg-muted={i > currentStep}
+            class:text-muted-foreground={i > currentStep}
+          >
+            {#if i < currentStep}
+              <Check class="h-3.5 w-3.5" />
+            {:else}
+              {i + 1}
+            {/if}
+          </span>
+          <span class="hidden sm:inline">{step.title}</span>
+        </Button>
+        {#if i < steps.length - 1}
+          <div class="flex-1 mx-2 h-px bg-border" class:bg-primary={i < currentStep}></div>
+        {/if}
+      {/each}
+    </div>
+    <Progress value={progressValue} class="h-1.5" />
+  </div>
+
+  <!-- Step content -->
+  <Card.Root>
+    <Card.CardHeader>
+      <Card.CardTitle>{steps[currentStep]?.title ?? ''}</Card.CardTitle>
+      <Badge variant="outline" class="w-fit">
+        {t('common.step')} {currentStep + 1} / {totalSteps}
+      </Badge>
+    </Card.CardHeader>
+    <Card.CardContent>
+      {#key currentStep}
+        <form class="space-y-5" onsubmit={(e) => { e.preventDefault(); handleSubmit(); }} in:fly={{ x: 30, duration: 250 }}>
+        {#each currentFields as field}
+          <FieldRenderer
+            {field}
+            value={stepsForm.formValues[field.key]}
+            onchange={(v) => stepsForm.setFieldValue(field.key, v)}
+          />
+        {/each}
+
+        <div class="flex items-center justify-between pt-4">
+          <Button
+            type="button"
+            variant="outline"
+            onclick={() => currentStep === 0 ? navigate(`/${resourceName}`) : prev()}
+          >
+            <ArrowLeft class="h-4 w-4" data-icon="inline-start" />
+            {currentStep === 0 ? t('common.cancel') : t('common.back')}
+          </Button>
+
+          <Button type="submit" disabled={stepsForm.formLoading}>
+            {#if stepsForm.formLoading}
+              <Loader2 class="h-4 w-4 animate-spin" data-icon="inline-start" />
+            {:else if isLastStep}
+              <Save class="h-4 w-4" data-icon="inline-start" />
+            {:else}
+              <ArrowRight class="h-4 w-4" data-icon="inline-start" />
+            {/if}
+            {isLastStep ? t('common.save') : t('common.next')}
+          </Button>
+        </div>
+      </form>
+      {/key}
+    </Card.CardContent>
+  </Card.Root>
+</div>

package/src/components/Toast.svelte

@@ -1,58 +1,19 @@
 <script lang="ts">
-  import { getToasts, removeToast } from '@svadmin/core/toast';
-  import { Button } from './ui/button/index.js';
-  import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-svelte';
-  import UndoableNotification from './UndoableNotification.svelte';
+  import { Toaster } from 'svelte-sonner';
+  import { getResolvedTheme } from '@svadmin/core';
 
-  const iconMap = {
-    success: CheckCircle,
-    error: AlertCircle,
-    info: Info,
-    warning: AlertTriangle,
-  };
-  const colorMap = {
-    success: 'bg-green-50 border-green-200 text-green-800',
-    error: 'bg-red-50 border-red-200 text-red-800',
-    info: 'bg-blue-50 border-blue-200 text-blue-800',
-    warning: 'bg-amber-50 border-amber-200 text-amber-800',
-  };
-
-  const toasts = $derived(getToasts());
+  const theme = $derived(getResolvedTheme() === 'dark' ? 'dark' : 'light');
 </script>
 
-{#if toasts.length > 0}
-  <div class="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
-    {#each toasts as t (t.id)}
-      {#if t.type === 'undoable'}
-        <UndoableNotification
-          message={t.message}
-          duration={t.duration}
-          onUndo={() => { t.onUndo?.(); removeToast(t.id); }}
-          onTimeout={() => { t.onTimeout?.(); removeToast(t.id); }}
-        />
-      {:else}
-        {@const Icon = iconMap[t.type]}
-        <div
-          class="flex items-start gap-3 rounded-lg border px-4 py-3 shadow-lg animate-slide-in {colorMap[t.type]}"
-          role="alert"
-        >
-          <Icon class="h-5 w-5 flex-shrink-0 mt-0.5" />
-          <p class="flex-1 text-sm font-medium">{t.message}</p>
-          <Button variant="ghost" size="icon-xs" onclick={() => removeToast(t.id)} class="flex-shrink-0 -mr-2 -mt-1">
-            <X class="h-4 w-4" />
-          </Button>
-        </div>
-      {/if}
-    {/each}
-  </div>
-{/if}
-
-<style>
-  @keyframes slide-in {
-    from { transform: translateX(100%); opacity: 0; }
-    to { transform: translateX(0); opacity: 1; }
-  }
-  .animate-slide-in {
-    animation: slide-in 0.2s ease-out;
-  }
-</style>
+<Toaster
+  position="top-right"
+  richColors
+  closeButton
+  expand
+  {theme}
+  toastOptions={{
+    classes: {
+      toast: 'font-sans',
+    },
+  }}
+/>

package/src/components/TooltipButton.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import * as Tooltip from './ui/tooltip/index.js';
+  import { Button } from './ui/button/index.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  interface Props {
+    tooltip: string;
+    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+    size?: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm';
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    class?: string;
+    onclick?: (e: MouseEvent) => void;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    tabindex?: number;
+    children: Snippet;
+  }
+
+  let {
+    tooltip,
+    variant = 'ghost',
+    size = 'icon',
+    side = 'top',
+    class: className = '',
+    onclick,
+    disabled = false,
+    type = 'button',
+    tabindex,
+    children,
+  }: Props = $props();
+</script>
+
+<Tooltip.Root>
+  <Tooltip.Trigger>
+    {#snippet child({ props })}
+      <Button
+        {...props}
+        {variant}
+        {size}
+        {type}
+        class={className}
+        {onclick}
+        {disabled}
+        {tabindex}
+      >
+        {@render children()}
+      </Button>
+    {/snippet}
+  </Tooltip.Trigger>
+  <Tooltip.Content {side}>{tooltip}</Tooltip.Content>
+</Tooltip.Root>