@svadmin/ui 0.63.0 → 0.65.0

package/dist/components/VersionDiffViewer.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { Badge } from './ui/badge/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Columns2, AlignJustify } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    oldValue: Record<string, unknown>;
+    newValue: Record<string, unknown>;
+    oldTitle?: string;
+    newTitle?: string;
+    viewMode?: 'split' | 'unified';
+    fieldLabels?: Record<string, string>;
+    class?: string;
+  }
+
+  let {
+    oldValue = {},
+    newValue = {},
+    oldTitle = 'Previous Version',
+    newTitle = 'Current Version',
+    viewMode = 'split',
+    fieldLabels = {},
+    class: className = '',
+  }: Props = $props();
+
+  let mode = $state<'split' | 'unified'>(untrack(() => viewMode));
+
+  interface FieldDiff {
+    key: string;
+    label: string;
+    oldVal: unknown;
+    newVal: unknown;
+    status: 'added' | 'removed' | 'modified' | 'unchanged';
+  }
+
+  const diffList = $derived.by<FieldDiff[]>(() => {
+    const oldObj = oldValue || {};
+    const newObj = newValue || {};
+    const allKeys = Array.from(new Set([...Object.keys(oldObj), ...Object.keys(newObj)]));
+
+    return allKeys.map((key) => {
+      const hasOld = key in oldObj && oldObj[key] !== undefined;
+      const hasNew = key in newObj && newObj[key] !== undefined;
+      const oldVal = oldObj[key];
+      const newVal = newObj[key];
+
+      let status: FieldDiff['status'] = 'unchanged';
+      if (!hasOld && hasNew) {
+        status = 'added';
+      } else if (hasOld && !hasNew) {
+        status = 'removed';
+      } else if (JSON.stringify(oldVal) !== JSON.stringify(newVal)) {
+        status = 'modified';
+      }
+
+      return {
+        key,
+        label: fieldLabels[key] || key,
+        oldVal,
+        newVal,
+        status,
+      };
+    });
+  });
+
+  const modifiedCount = $derived(diffList.filter((d) => d.status !== 'unchanged').length);
+
+  function formatValue(val: unknown): string {
+    if (val === undefined || val === null) return '—';
+    if (typeof val === 'object') {
+      try {
+        return JSON.stringify(val, null, 2);
+      } catch {
+        return String(val);
+      }
+    }
+    return String(val);
+  }
+</script>
+
+<div class={cn('rounded-xl border border-border bg-card shadow-xs overflow-hidden', className)}>
+  <!-- Header & Toolbar -->
+  <div class="flex items-center justify-between p-3.5 border-b border-border/60 bg-muted/20">
+    <div class="flex items-center gap-2">
+      <h4 class="text-xs font-semibold text-foreground">Record Comparison</h4>
+      <Badge variant="outline" class="text-[11px]">
+        {modifiedCount} change{modifiedCount === 1 ? '' : 's'}
+      </Badge>
+    </div>
+
+    <div class="flex items-center gap-1">
+      <Button
+        variant={mode === 'split' ? 'secondary' : 'ghost'}
+        size="sm"
+        class="h-7 text-xs gap-1 px-2"
+        onclick={() => { mode = 'split'; }}
+      >
+        <Columns2 class="h-3.5 w-3.5" />
+        Side by Side
+      </Button>
+      <Button
+        variant={mode === 'unified' ? 'secondary' : 'ghost'}
+        size="sm"
+        class="h-7 text-xs gap-1 px-2"
+        onclick={() => { mode = 'unified'; }}
+      >
+        <AlignJustify class="h-3.5 w-3.5" />
+        Unified
+      </Button>
+    </div>
+  </div>
+
+  {#if mode === 'split'}
+    <!-- Split Side-by-Side View -->
+    <div class="grid grid-cols-2 divide-x divide-border/60 text-xs">
+      <div class="p-3 bg-muted/10 font-semibold text-muted-foreground border-b border-border/60">{oldTitle}</div>
+      <div class="p-3 bg-muted/10 font-semibold text-muted-foreground border-b border-border/60">{newTitle}</div>
+    </div>
+
+    <div class="divide-y divide-border/40 text-xs">
+      {#each diffList as diff (diff.key)}
+        {@const isDiff = diff.status !== 'unchanged'}
+        <div class={cn('grid grid-cols-2 divide-x divide-border/40 transition-colors', isDiff ? 'bg-muted/15' : '')}>
+          <!-- Left Column -->
+          <div class={cn('p-3 space-y-1', diff.status === 'removed' ? 'bg-destructive/5' : '')}>
+            <div class="flex items-center justify-between text-[11px] text-muted-foreground font-medium">
+              <span>{diff.label}</span>
+              {#if diff.status === 'removed'}
+                <Badge variant="outline" class="bg-destructive/15 text-destructive border-destructive/20 text-[10px]">Deleted</Badge>
+              {/if}
+            </div>
+            <div class={cn('font-mono text-xs break-words', diff.status === 'removed' ? 'line-through text-destructive' : 'text-foreground')}>
+              {formatValue(diff.oldVal)}
+            </div>
+          </div>
+
+          <!-- Right Column -->
+          <div class={cn('p-3 space-y-1', diff.status === 'added' ? 'bg-success/5' : diff.status === 'modified' ? 'bg-warning/5' : '')}>
+            <div class="flex items-center justify-between text-[11px] text-muted-foreground font-medium">
+              <span>{diff.label}</span>
+              {#if diff.status === 'added'}
+                <Badge variant="outline" class="bg-success/15 text-success border-success/20 text-[10px]">Added</Badge>
+              {:else if diff.status === 'modified'}
+                <Badge variant="outline" class="bg-warning/15 text-warning-foreground border-warning/20 text-[10px]">Modified</Badge>
+              {/if}
+            </div>
+            <div class={cn('font-mono text-xs break-words', diff.status === 'added' ? 'text-success font-medium' : diff.status === 'modified' ? 'text-warning-foreground font-medium' : 'text-foreground')}>
+              {formatValue(diff.newVal)}
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <!-- Unified List View -->
+    <div class="divide-y divide-border/40 text-xs">
+      {#each diffList as diff (diff.key)}
+        <div class="p-3 space-y-2">
+          <div class="flex items-center justify-between">
+            <span class="font-medium text-foreground">{diff.label}</span>
+            {#if diff.status === 'added'}
+              <Badge variant="outline" class="bg-success/15 text-success border-success/20 text-[10px]">Added</Badge>
+            {:else if diff.status === 'removed'}
+              <Badge variant="outline" class="bg-destructive/15 text-destructive border-destructive/20 text-[10px]">Removed</Badge>
+            {:else if diff.status === 'modified'}
+              <Badge variant="outline" class="bg-warning/15 text-warning-foreground border-warning/20 text-[10px]">Modified</Badge>
+            {:else}
+              <Badge variant="outline" class="text-[10px] text-muted-foreground">Unchanged</Badge>
+            {/if}
+          </div>
+
+          {#if diff.status === 'modified'}
+            <div class="space-y-1 rounded-md bg-muted/40 p-2 font-mono text-[11px]">
+              <div class="text-destructive line-through">- {formatValue(diff.oldVal)}</div>
+              <div class="text-success font-medium">+ {formatValue(diff.newVal)}</div>
+            </div>
+          {:else if diff.status === 'added'}
+            <div class="rounded-md bg-success/10 p-2 font-mono text-[11px] text-success">
+              + {formatValue(diff.newVal)}
+            </div>
+          {:else if diff.status === 'removed'}
+            <div class="rounded-md bg-destructive/10 p-2 font-mono text-[11px] text-destructive line-through">
+              - {formatValue(diff.oldVal)}
+            </div>
+          {:else}
+            <div class="font-mono text-[11px] text-muted-foreground">
+              {formatValue(diff.newVal)}
+            </div>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

package/dist/components/VersionDiffViewer.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    oldValue: Record<string, unknown>;
+    newValue: Record<string, unknown>;
+    oldTitle?: string;
+    newTitle?: string;
+    viewMode?: 'split' | 'unified';
+    fieldLabels?: Record<string, string>;
+    class?: string;
+}
+declare const VersionDiffViewer: import("svelte").Component<Props, {}, "">;
+type VersionDiffViewer = ReturnType<typeof VersionDiffViewer>;
+export default VersionDiffViewer;

package/dist/components/VirtualTable.svelte

@@ -1,74 +1,106 @@
 <script lang="ts">
-  /**
-   * VirtualTable — A lightweight virtual scrolling wrapper for large datasets.
-   * Uses IntersectionObserver-based approach instead of a heavy dependency.
-   *
-   * Usage:
-   *   <VirtualTable items={rows} rowHeight={40} containerHeight={500}>
-   *     {#snippet row(item, index)}
-   *       <tr>...</tr>
-   *     {/snippet}
-   *   </VirtualTable>
-   */
   import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
 
-  interface Props<T> {
-    items: T[];
-    /** Estimated row height in pixels */
-    rowHeight?: number;
-    /** Container height in pixels */
-    containerHeight?: number;
-    /** Number of extra rows to render above/below visible area */
+  export interface VirtualTableColumn {
+    key: string;
+    label: string;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+  }
+
+  interface Props {
+    items?: Record<string, unknown>[];
+    columns: VirtualTableColumn[];
+    itemHeight?: number;
+    height?: number;
     overscan?: number;
-    /** Row rendering snippet */
-    row: Snippet<[T, number]>;
+    rowKey?: string;
     class?: string;
+    rowSnippet?: Snippet<[Record<string, unknown>, number]>;
   }
 
   let {
-    items,
-    rowHeight = 40,
-    containerHeight = 500,
-    overscan = 5,
-    row,
+    items = [],
+    columns,
+    itemHeight = 44,
+    height = 360,
+    overscan = 4,
+    rowKey = 'id',
     class: className = '',
-  }: Props<unknown> = $props();
+    rowSnippet,
+  }: Props = $props();
 
   let scrollTop = $state(0);
 
-  const visibleRange = $derived.by(() => {
-    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
-    const visibleCount = Math.ceil(containerHeight / rowHeight);
-    const end = Math.min(items.length - 1, start + visibleCount + overscan * 2);
-    return { start, end };
-  });
+  function handleScroll(e: Event) {
+    const target = e.currentTarget as HTMLElement;
+    scrollTop = target.scrollTop;
+  }
 
-  const visibleItems = $derived(
-    items.slice(visibleRange.start, visibleRange.end + 1).map((item, i) => ({
+  const totalHeight = $derived(items.length * itemHeight);
+  const startIndex = $derived(Math.max(0, Math.floor(scrollTop / itemHeight) - overscan));
+  const endIndex = $derived(Math.min(items.length, Math.ceil((scrollTop + height) / itemHeight) + overscan));
+  const visibleSlice = $derived(
+    items.slice(startIndex, endIndex).map((item, idx) => ({
       item,
-      index: visibleRange.start + i,
-      offsetY: (visibleRange.start + i) * rowHeight,
+      index: startIndex + idx,
+      top: (startIndex + idx) * itemHeight,
     }))
   );
-
-  function handleScroll(e: Event) {
-    const target = e.target as HTMLDivElement;
-    scrollTop = target.scrollTop;
-  }
 </script>
 
-<div
-  class="overflow-auto {className}"
-  style="height: {containerHeight}px;"
-  onscroll={handleScroll}
->
-  <table class="w-full relative" style="border-spacing: 0;">
-    <tbody style="display: block;">
-      <tr style="height: {visibleRange.start * rowHeight}px; border: none; padding: 0; display: block;"></tr>
-      {#each visibleItems as { item, index } (index)}
-        {@render row(item, index)}
+<div class={cn('w-full rounded-xl border border-border bg-card shadow-xs overflow-hidden flex flex-col text-xs', className)}>
+  <!-- Sticky Header -->
+  <div class="border-b border-border/80 bg-muted/40 font-semibold text-muted-foreground flex items-center h-10 px-4 select-none shrink-0">
+    {#each columns as col (col.key)}
+      <div
+        style={col.width ? `width: ${col.width}; flex-shrink: 0;` : 'flex: 1; min-width: 0;'}
+        class={cn('truncate px-2', col.align === 'right' ? 'text-right' : col.align === 'center' ? 'text-center' : 'text-left')}
+      >
+        {col.label}
+      </div>
+    {/each}
+  </div>
+
+  <!-- Virtual Scroll Viewport -->
+  <div
+    class="overflow-y-auto relative w-full"
+    style="height: {height}px;"
+    onscroll={handleScroll}
+  >
+    <div style="height: {totalHeight}px; width: 100%; position: relative;">
+      {#each visibleSlice as { item, index, top } (item[rowKey] ?? index)}
+        <div
+          class="absolute left-0 right-0 flex items-center px-4 border-b border-border/40 hover:bg-muted/30 transition-colors"
+          style="top: {top}px; height: {itemHeight}px;"
+        >
+          {#if rowSnippet}
+            {@render rowSnippet(item, index)}
+          {:else}
+            {#each columns as col (col.key)}
+              <div
+                style={col.width ? `width: ${col.width}; flex-shrink: 0;` : 'flex: 1; min-width: 0;'}
+                class={cn('truncate px-2 font-medium text-foreground', col.align === 'right' ? 'text-right' : col.align === 'center' ? 'text-center' : 'text-left')}
+              >
+                {item[col.key] ?? '—'}
+              </div>
+            {/each}
+          {/if}
+        </div>
       {/each}
-      <tr style="height: {Math.max(0, (items.length - visibleRange.end - 1) * rowHeight)}px; border: none; padding: 0; display: block;"></tr>
-    </tbody>
-  </table>
+
+      {#if items.length === 0}
+        <div class="h-32 flex items-center justify-center text-muted-foreground text-xs">
+          No records to display
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Footer Info -->
+  <div class="flex items-center justify-between px-4 py-2 border-t border-border/60 bg-muted/20 text-[11px] text-muted-foreground shrink-0">
+    <span>Total <strong class="text-foreground font-semibold">{items.length}</strong> rows</span>
+    <span>Rendered {visibleSlice.length} in viewport</span>
+  </div>
 </div>

package/dist/components/VirtualTable.svelte.d.ts

@@ -1,27 +1,20 @@
-/**
-   * VirtualTable — A lightweight virtual scrolling wrapper for large datasets.
-   * Uses IntersectionObserver-based approach instead of a heavy dependency.
-   *
-   * Usage:
-   *   <VirtualTable items={rows} rowHeight={40} containerHeight={500}>
-   *     {#snippet row(item, index)}
-   *       <tr>...</tr>
-   *     {/snippet}
-   *   </VirtualTable>
-   */
 import type { Snippet } from 'svelte';
-interface Props<T> {
-    items: T[];
-    /** Estimated row height in pixels */
-    rowHeight?: number;
-    /** Container height in pixels */
-    containerHeight?: number;
-    /** Number of extra rows to render above/below visible area */
+export interface VirtualTableColumn {
+    key: string;
+    label: string;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+}
+interface Props {
+    items?: Record<string, unknown>[];
+    columns: VirtualTableColumn[];
+    itemHeight?: number;
+    height?: number;
     overscan?: number;
-    /** Row rendering snippet */
-    row: Snippet<[T, number]>;
+    rowKey?: string;
     class?: string;
+    rowSnippet?: Snippet<[Record<string, unknown>, number]>;
 }
-declare const VirtualTable: import("svelte").Component<Props<unknown>, {}, "">;
+declare const VirtualTable: import("svelte").Component<Props, {}, "">;
 type VirtualTable = ReturnType<typeof VirtualTable>;
 export default VirtualTable;

package/dist/components/Watermark.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+  import { onMount, onDestroy, type Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  interface WatermarkFont {
+    color?: string;
+    fontSize?: number;
+    fontWeight?: 'normal' | 'light' | 'weight' | 'bold' | number;
+    fontFamily?: string;
+    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+  }
+
+  interface Props {
+    content?: string | string[];
+    image?: string;
+    width?: number;
+    height?: number;
+    rotate?: number;
+    zIndex?: number;
+    gap?: [number, number];
+    offset?: [number, number];
+    opacity?: number;
+    font?: WatermarkFont;
+    antiTamper?: boolean;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    content = 'CONFIDENTIAL',
+    image,
+    width = 120,
+    height = 64,
+    rotate = -22,
+    zIndex = 9,
+    gap = [100, 100],
+    offset = [gap[0] / 2, gap[1] / 2],
+    opacity = 0.12,
+    font = {},
+    antiTamper = true,
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  let containerEl: HTMLDivElement | null = $state(null);
+  let base64Url = $state<string>('');
+  let watermarkRevision = $state(0);
+  let observer: MutationObserver | null = null;
+  let isCleaningUp = false;
+
+  function renderWatermark() {
+    if (typeof window === 'undefined') return;
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const ratio = window.devicePixelRatio || 1;
+    const [gapX, gapY] = gap;
+    const canvasWidth = (gapX + width) * ratio;
+    const canvasHeight = (gapY + height) * ratio;
+
+    canvas.width = canvasWidth;
+    canvas.height = canvasHeight;
+    canvas.style.width = `${gapX + width}px`;
+    canvas.style.height = `${gapY + height}px`;
+
+    ctx.scale(ratio, ratio);
+    ctx.translate(offset[0], offset[1]);
+    ctx.rotate((rotate * Math.PI) / 180);
+
+    if (image) {
+      const img = new Image();
+      img.crossOrigin = 'anonymous';
+      img.referrerPolicy = 'no-referrer';
+      img.onload = () => {
+        ctx.globalAlpha = opacity;
+        ctx.drawImage(img, -width / 2, -height / 2, width, height);
+        base64Url = canvas.toDataURL();
+      };
+      img.src = image;
+    } else {
+      const {
+        fontSize = 14,
+        fontFamily = 'sans-serif',
+        fontWeight = 'normal',
+        fontStyle = 'normal',
+        color = 'currentColor',
+      } = font;
+
+      ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+      ctx.fillStyle = color === 'currentColor' ? 'rgba(128, 128, 128, 0.85)' : color;
+      ctx.globalAlpha = opacity;
+      ctx.textBaseline = 'middle';
+      ctx.textAlign = 'center';
+
+      const contents = Array.isArray(content) ? content : [content];
+      const lineHeight = fontSize + 4;
+      const totalHeight = contents.length * lineHeight;
+      const startY = -(totalHeight / 2) + lineHeight / 2;
+
+      contents.forEach((text, i) => {
+        ctx.fillText(text, 0, startY + i * lineHeight);
+      });
+
+      base64Url = canvas.toDataURL();
+    }
+  }
+
+  $effect(() => {
+    // Re-generate watermark when inputs change
+    if (content || image || width || height || rotate || gap || offset || opacity || font) {
+      renderWatermark();
+    }
+  });
+
+  onMount(() => {
+    renderWatermark();
+
+    if (antiTamper && typeof MutationObserver !== 'undefined' && containerEl) {
+      observer = new MutationObserver((mutations) => {
+        if (isCleaningUp) return;
+        for (const mutation of mutations) {
+          if (mutation.type === 'childList' || mutation.type === 'attributes') {
+            watermarkRevision += 1;
+            break;
+          }
+        }
+      });
+
+      observer.observe(containerEl, {
+        attributes: true,
+        subtree: true,
+        childList: true,
+        attributeFilter: ['style', 'class', 'hidden'],
+      });
+    }
+  });
+
+  onDestroy(() => {
+    isCleaningUp = true;
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  });
+</script>
+
+<div
+  bind:this={containerEl}
+  class={cn('relative overflow-hidden', className)}
+  data-svadmin-watermark-wrapper
+>
+  {#key watermarkRevision}
+    {#if base64Url}
+      <div
+        data-svadmin-watermark
+        class="absolute inset-0 pointer-events-none"
+        style="z-index: {zIndex}; background-image: url('{base64Url}'); background-position: {offset[0]}px {offset[1]}px; background-repeat: repeat;"
+      ></div>
+    {/if}
+  {/key}
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

package/dist/components/Watermark.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type Snippet } from 'svelte';
+interface WatermarkFont {
+    color?: string;
+    fontSize?: number;
+    fontWeight?: 'normal' | 'light' | 'weight' | 'bold' | number;
+    fontFamily?: string;
+    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
+}
+interface Props {
+    content?: string | string[];
+    image?: string;
+    width?: number;
+    height?: number;
+    rotate?: number;
+    zIndex?: number;
+    gap?: [number, number];
+    offset?: [number, number];
+    opacity?: number;
+    font?: WatermarkFont;
+    antiTamper?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const Watermark: import("svelte").Component<Props, {}, "">;
+type Watermark = ReturnType<typeof Watermark>;
+export default Watermark;

package/dist/components/ui/navigation-menu/index.d.ts

@@ -0,0 +1,11 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+import Root from "./navigation-menu.svelte";
+import List from "./navigation-menu-list.svelte";
+import Item from "./navigation-menu-item.svelte";
+import Trigger from "./navigation-menu-trigger.svelte";
+import Content from "./navigation-menu-content.svelte";
+import Link from "./navigation-menu-link.svelte";
+import Viewport from "./navigation-menu-viewport.svelte";
+import Indicator from "./navigation-menu-indicator.svelte";
+declare const Sub: import("svelte").Component<NavigationMenuPrimitive.SubProps, {}, "value" | "ref">;
+export { Root, List, Item, Trigger, Content, Link, Viewport, Indicator, Sub, Root as NavigationMenu, List as NavigationMenuList, Item as NavigationMenuItem, Trigger as NavigationMenuTrigger, Content as NavigationMenuContent, Link as NavigationMenuLink, Viewport as NavigationMenuViewport, Indicator as NavigationMenuIndicator, Sub as NavigationMenuSub, };

package/dist/components/ui/navigation-menu/index.js

@@ -0,0 +1,13 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+import Root from "./navigation-menu.svelte";
+import List from "./navigation-menu-list.svelte";
+import Item from "./navigation-menu-item.svelte";
+import Trigger from "./navigation-menu-trigger.svelte";
+import Content from "./navigation-menu-content.svelte";
+import Link from "./navigation-menu-link.svelte";
+import Viewport from "./navigation-menu-viewport.svelte";
+import Indicator from "./navigation-menu-indicator.svelte";
+const Sub = NavigationMenuPrimitive.Sub;
+export { Root, List, Item, Trigger, Content, Link, Viewport, Indicator, Sub, 
+//
+Root as NavigationMenu, List as NavigationMenuList, Item as NavigationMenuItem, Trigger as NavigationMenuTrigger, Content as NavigationMenuContent, Link as NavigationMenuLink, Viewport as NavigationMenuViewport, Indicator as NavigationMenuIndicator, Sub as NavigationMenuSub, };

package/dist/components/ui/navigation-menu/navigation-menu-content.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ContentProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Content
+	bind:ref
+	data-slot="navigation-menu-content"
+	class={cn(
+		"top-0 left-0 w-full md:absolute md:w-auto",
+		"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/navigation-menu/navigation-menu-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+declare const NavigationMenuContent: import("svelte").Component<NavigationMenuPrimitive.ContentProps, {}, "ref">;
+type NavigationMenuContent = ReturnType<typeof NavigationMenuContent>;
+export default NavigationMenuContent;