@svadmin/ui 0.63.0 → 0.64.0

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

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+export interface TransferItem {
+    key: string | number;
+    title: string;
+    description?: string;
+    disabled?: boolean;
+}
+interface Props {
+    dataSource?: TransferItem[];
+    targetKeys?: (string | number)[];
+    titles?: [string, string];
+    searchable?: boolean;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (nextTargetKeys: (string | number)[], direction: 'left' | 'right', moveKeys: (string | number)[]) => void;
+    renderItem?: Snippet<[{
+        item: TransferItem;
+        direction: 'left' | 'right';
+    }]>;
+}
+declare const Transfer: import("svelte").Component<Props, {
+    moveToRight: () => void;
+    moveToLeft: () => void;
+    moveAllToRight: () => void;
+    moveAllToLeft: () => void;
+}, "targetKeys">;
+type Transfer = ReturnType<typeof Transfer>;
+export default Transfer;

package/dist/components/TreeSelect.svelte

@@ -0,0 +1,307 @@
+<script lang="ts">
+  import { SvelteSet } from 'svelte/reactivity';
+  import { ChevronRight, ChevronDown, Check, X, Search, ChevronsUpDown } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+  import * as Popover from './ui/popover/index.js';
+  import { Input } from './ui/input/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { useTranslation } from '@svadmin/core/i18n';
+
+  export interface TreeSelectOption {
+    value: string | number;
+    label: string;
+    children?: TreeSelectOption[];
+    disabled?: boolean;
+    expanded?: boolean;
+  }
+
+  const i18n = useTranslation();
+
+  interface Props {
+    options?: TreeSelectOption[];
+    value?: string | number | (string | number)[];
+    multiple?: boolean;
+    placeholder?: string;
+    searchable?: boolean;
+    onlyLeafSelectable?: boolean;
+    disabled?: boolean;
+    allowClear?: boolean;
+    class?: string;
+    onchange?: (value: string | number | (string | number)[] | undefined) => void;
+  }
+
+  let {
+    options = [],
+    value = $bindable(undefined),
+    multiple = false,
+    placeholder,
+    searchable = true,
+    onlyLeafSelectable = false,
+    disabled = false,
+    allowClear = true,
+    class: className,
+    onchange,
+  }: Props = $props();
+
+  let open = $state(false);
+  let searchQuery = $state('');
+  let expandedNodes = new SvelteSet<string | number>();
+
+  // Map to quickly look up option info by value
+  const optionMap = $derived.by(() => {
+    const map = new Map<string | number, TreeSelectOption>();
+    function traverse(nodes: TreeSelectOption[]) {
+      for (const node of nodes) {
+        map.set(node.value, node);
+        if (node.children) traverse(node.children);
+      }
+    }
+    traverse(options);
+    return map;
+  });
+
+  // Selected values array normalized
+  const selectedValues = $derived.by< (string | number)[]>(() => {
+    if (value === undefined || value === null || value === '') return [];
+    return Array.isArray(value) ? value : [value];
+  });
+
+  const selectedLabels = $derived.by(() => {
+    return selectedValues.map((v) => optionMap.get(v)?.label ?? String(v));
+  });
+
+  function toggleExpand(nodeValue: string | number, event?: MouseEvent) {
+    event?.stopPropagation();
+    if (expandedNodes.has(nodeValue)) {
+      expandedNodes.delete(nodeValue);
+    } else {
+      expandedNodes.add(nodeValue);
+    }
+  }
+
+  function isNodeExpanded(node: TreeSelectOption): boolean {
+    if (searchQuery.trim()) return true; // Auto expand all on search
+    return expandedNodes.has(node.value) || !!node.expanded;
+  }
+
+  function isSelected(val: string | number): boolean {
+    return selectedValues.includes(val);
+  }
+
+  function handleSelect(node: TreeSelectOption) {
+    if (node.disabled) return;
+    const hasChildren = node.children && node.children.length > 0;
+    if (onlyLeafSelectable && hasChildren) {
+      toggleExpand(node.value);
+      return;
+    }
+
+    if (multiple) {
+      let next: (string | number)[];
+      if (isSelected(node.value)) {
+        next = selectedValues.filter((v) => v !== node.value);
+      } else {
+        next = [...selectedValues, node.value];
+      }
+      value = next;
+      onchange?.(next);
+    } else {
+      const next = node.value;
+      value = next;
+      onchange?.(next);
+      open = false;
+    }
+  }
+
+  function clearAll(event?: MouseEvent) {
+    event?.stopPropagation();
+    const next = multiple ? [] : undefined;
+    value = next;
+    onchange?.(next);
+  }
+
+  function removeSingle(val: string | number, event?: MouseEvent) {
+    event?.stopPropagation();
+    if (multiple) {
+      const next = selectedValues.filter((v) => v !== val);
+      value = next;
+      onchange?.(next);
+    }
+  }
+
+  function filterTree(nodes: TreeSelectOption[], query: string): TreeSelectOption[] {
+    const q = query.trim().toLowerCase();
+    if (!q) return nodes;
+
+    const filtered: TreeSelectOption[] = [];
+    for (const node of nodes) {
+      const matchSelf = node.label.toLowerCase().includes(q);
+      const filteredChildren = node.children ? filterTree(node.children, q) : undefined;
+      const matchChildren = filteredChildren && filteredChildren.length > 0;
+
+      if (matchSelf || matchChildren) {
+        filtered.push({
+          ...node,
+          children: filteredChildren ?? node.children,
+        });
+      }
+    }
+    return filtered;
+  }
+
+  const visibleOptions = $derived(filterTree(options, searchQuery));
+</script>
+
+{#snippet treeNode(node: TreeSelectOption, level: number)}
+  {@const hasChildren = Boolean(node.children && node.children.length > 0)}
+  {@const expanded = isNodeExpanded(node)}
+  {@const selected = isSelected(node.value)}
+  {@const selectable = !node.disabled && (!onlyLeafSelectable || !hasChildren)}
+
+  <div class="flex flex-col">
+    <div
+      role="treeitem"
+      tabindex="0"
+      aria-selected={selected}
+      aria-expanded={hasChildren ? expanded : undefined}
+      class={cn(
+        'group flex items-center justify-between gap-1.5 rounded-md px-2 py-1.5 text-xs transition-colors cursor-pointer select-none',
+        selected ? 'bg-primary/10 text-primary font-medium' : 'hover:bg-muted/60 text-foreground',
+        node.disabled && 'opacity-50 cursor-not-allowed pointer-events-none'
+      )}
+      style="padding-left: {level * 16 + 8}px;"
+      onclick={() => {
+        if (selectable) handleSelect(node);
+      }}
+      onkeydown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          if (selectable) handleSelect(node);
+        }
+      }}
+    >
+      <div class="flex min-w-0 items-center gap-1.5">
+        {#if hasChildren}
+          <button
+            type="button"
+            class="flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted"
+            onclick={(e) => toggleExpand(node.value, e)}
+          >
+            {#if expanded}
+              <ChevronDown class="h-3.5 w-3.5" />
+            {:else}
+              <ChevronRight class="h-3.5 w-3.5" />
+            {/if}
+          </button>
+        {:else}
+          <span class="inline-block h-4 w-4 shrink-0"></span>
+        {/if}
+
+        <span class="truncate">{node.label}</span>
+      </div>
+
+      {#if selected}
+        <Check class="h-3.5 w-3.5 shrink-0 text-primary" />
+      {/if}
+    </div>
+
+    {#if hasChildren && expanded && node.children}
+      <div role="group" class="flex flex-col">
+        {#each node.children as child (child.value)}
+          {@render treeNode(child, level + 1)}
+        {/each}
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
+<div class={cn('relative w-full', className)} data-testid="tree-select">
+  <Popover.Root bind:open>
+    <Popover.Trigger class="w-full">
+      {#snippet child({ props })}
+        <button
+          type="button"
+          {...props}
+          {disabled}
+          class={cn(
+            'flex min-h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-1.5 text-xs ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-left',
+            open && 'ring-2 ring-ring ring-offset-2'
+          )}
+        >
+          <div class="flex flex-wrap items-center gap-1 min-w-0 flex-1">
+            {#if selectedValues.length === 0}
+              <span class="text-muted-foreground">
+                {placeholder ?? (i18n.t('field.selectPlaceholder', undefined) ?? '请选择...')}
+              </span>
+            {:else if multiple}
+              {#each selectedValues as val (val)}
+                {@const opt = optionMap.get(val)}
+                <Badge variant="secondary" class="h-5 px-1.5 py-0 text-[11px] gap-1 shrink-0">
+                  <span>{opt?.label ?? val}</span>
+                  {#if !disabled}
+                    <span
+                      role="button"
+                      tabindex="0"
+                      class="hover:text-destructive cursor-pointer"
+                      onclick={(e) => removeSingle(val, e)}
+                      onkeydown={(e) => {
+                        if (e.key === 'Enter') removeSingle(val, e as never);
+                      }}
+                    >
+                      <X class="h-3 w-3" />
+                    </span>
+                  {/if}
+                </Badge>
+              {/each}
+            {:else}
+              <span class="truncate text-foreground font-normal">
+                {selectedLabels[0] ?? ''}
+              </span>
+            {/if}
+          </div>
+
+          <div class="flex items-center gap-1 shrink-0 ml-1 text-muted-foreground">
+            {#if allowClear && selectedValues.length > 0 && !disabled}
+              <span
+                role="button"
+                tabindex="0"
+                class="hover:text-foreground cursor-pointer p-0.5"
+                onclick={clearAll}
+                onkeydown={(e) => {
+                  if (e.key === 'Enter') clearAll(e as never);
+                }}
+              >
+                <X class="h-3.5 w-3.5" />
+              </span>
+            {/if}
+            <ChevronsUpDown class="h-3.5 w-3.5 opacity-50" />
+          </div>
+        </button>
+      {/snippet}
+    </Popover.Trigger>
+
+    <Popover.Content class="w-(--bits-popover-anchor-width) min-w-[220px] max-w-[400px] p-2" align="start">
+      {#if searchable}
+        <div class="relative mb-2">
+          <Search class="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
+          <Input
+            type="text"
+            bind:value={searchQuery}
+            placeholder={i18n.t('common.search', undefined) ?? '搜索...'}
+            class="h-8 pl-8 pr-2 text-xs"
+          />
+        </div>
+      {/if}
+
+      <div role="tree" class="max-h-60 overflow-y-auto space-y-0.5 pr-1">
+        {#each visibleOptions as rootNode (rootNode.value)}
+          {@render treeNode(rootNode, 0)}
+        {:else}
+          <div class="py-6 text-center text-xs text-muted-foreground">
+            {i18n.t('common.noData', undefined) ?? '无匹配选项'}
+          </div>
+        {/each}
+      </div>
+    </Popover.Content>
+  </Popover.Root>
+</div>

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

@@ -0,0 +1,22 @@
+export interface TreeSelectOption {
+    value: string | number;
+    label: string;
+    children?: TreeSelectOption[];
+    disabled?: boolean;
+    expanded?: boolean;
+}
+interface Props {
+    options?: TreeSelectOption[];
+    value?: string | number | (string | number)[];
+    multiple?: boolean;
+    placeholder?: string;
+    searchable?: boolean;
+    onlyLeafSelectable?: boolean;
+    disabled?: boolean;
+    allowClear?: boolean;
+    class?: string;
+    onchange?: (value: string | number | (string | number)[] | undefined) => void;
+}
+declare const TreeSelect: import("svelte").Component<Props, {}, "value">;
+type TreeSelect = ReturnType<typeof TreeSelect>;
+export default TreeSelect;

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;

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.IndicatorProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Indicator
+	bind:ref
+	data-slot="navigation-menu-indicator"
+	class={cn(
+		"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+		className
+	)}
+	{...restProps}
+>
+	<div class="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md"></div>
+</NavigationMenuPrimitive.Indicator>

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

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

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ItemProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Item
+	bind:ref
+	data-slot="navigation-menu-item"
+	class={cn("relative", className)}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.LinkProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Link
+	bind:ref
+	data-slot="navigation-menu-link"
+	class={cn(
+		"inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ListProps = $props();
+</script>
+
+<NavigationMenuPrimitive.List
+	bind:ref
+	data-slot="navigation-menu-list"
+	class={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: NavigationMenuPrimitive.TriggerProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Trigger
+	bind:ref
+	data-slot="navigation-menu-trigger"
+	class={cn(
+		"group/trigger inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-muted/50 data-[state=open]:text-foreground",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon
+		class="relative top-[1px] ml-1 size-3 transition duration-200 group-data-[state=open]/trigger:rotate-180"
+		aria-hidden="true"
+	/>
+</NavigationMenuPrimitive.Trigger>

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

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

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: NavigationMenuPrimitive.ViewportProps = $props();
+</script>
+
+<div class="absolute top-full left-0 flex justify-center">
+	<NavigationMenuPrimitive.Viewport
+		bind:ref
+		data-slot="navigation-menu-viewport"
+		class={cn(
+			"origin-top-center relative mt-1.5 h-[var(--bits-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-[0_18px_48px_rgba(15,23,42,0.14),0_4px_12px_rgba(15,23,42,0.08)] backdrop-blur-md transition-[width,height] duration-300 md:w-[var(--bits-navigation-menu-viewport-width)]",
+			className
+		)}
+		{...restProps}
+	/>
+</div>

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

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

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+	import NavigationMenuViewport from "./navigation-menu-viewport.svelte";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		children,
+		...restProps
+	}: NavigationMenuPrimitive.RootProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="navigation-menu"
+	class={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+	<NavigationMenuViewport />
+</NavigationMenuPrimitive.Root>

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

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

package/dist/index.d.ts

@@ -49,6 +49,15 @@ export { default as CatchAllNavigate } from './components/CatchAllNavigate.svelt
 export { default as ThemedTitle } from './components/ThemedTitle.svelte';
 export { default as CommandPalette } from './components/CommandPalette.svelte';
 export { default as StepsForm } from './components/StepsForm.svelte';
+export { default as DynamicFormList } from './components/DynamicFormList.svelte';
+export { default as TreeSelect } from './components/TreeSelect.svelte';
+export type { TreeSelectOption } from './components/TreeSelect.svelte';
+export { default as Cascader } from './components/Cascader.svelte';
+export type { CascaderOption } from './components/Cascader.svelte';
+export { default as Transfer } from './components/Transfer.svelte';
+export type { TransferItem } from './components/Transfer.svelte';
+export { default as FilterBuilder } from './components/FilterBuilder.svelte';
+export type { FilterRuleItem } from './components/FilterBuilder.svelte';
 export { default as InfiniteList } from './components/InfiniteList.svelte';
 export { default as ComboboxField } from './components/ComboboxField.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
@@ -137,6 +146,7 @@ export * as DropdownMenu from './components/ui/dropdown-menu/index.js';
 export * as Breadcrumb from './components/ui/breadcrumb/index.js';
 export * as Pagination from './components/ui/pagination/index.js';
 export * as ContextMenu from './components/ui/context-menu/index.js';
+export * as NavigationMenu from './components/ui/navigation-menu/index.js';
 export * as Collapsible from './components/ui/collapsible/index.js';
 export { Label } from './components/ui/label/index.js';
 export { Command } from './components/ui/command/index.js';

package/dist/index.js

@@ -52,6 +52,12 @@ export { default as CatchAllNavigate } from './components/CatchAllNavigate.svelt
 export { default as ThemedTitle } from './components/ThemedTitle.svelte';
 export { default as CommandPalette } from './components/CommandPalette.svelte';
 export { default as StepsForm } from './components/StepsForm.svelte';
+// Advanced Form & Data Controls (Refine/Antd Parity)
+export { default as DynamicFormList } from './components/DynamicFormList.svelte';
+export { default as TreeSelect } from './components/TreeSelect.svelte';
+export { default as Cascader } from './components/Cascader.svelte';
+export { default as Transfer } from './components/Transfer.svelte';
+export { default as FilterBuilder } from './components/FilterBuilder.svelte';
 export { default as InfiniteList } from './components/InfiniteList.svelte';
 export { default as ComboboxField } from './components/ComboboxField.svelte';
 export { default as PasswordInput } from './components/PasswordInput.svelte';
@@ -144,6 +150,7 @@ export * as DropdownMenu from './components/ui/dropdown-menu/index.js';
 export * as Breadcrumb from './components/ui/breadcrumb/index.js';
 export * as Pagination from './components/ui/pagination/index.js';
 export * as ContextMenu from './components/ui/context-menu/index.js';
+export * as NavigationMenu from './components/ui/navigation-menu/index.js';
 export * as Collapsible from './components/ui/collapsible/index.js';
 export { Label } from './components/ui/label/index.js';
 export { Command } from './components/ui/command/index.js';