@kayord/ui 0.19.4 → 0.20.0

package/dist/components/custom/data-table/shad-table.svelte.js

@@ -1,6 +1,7 @@
 import { createTable, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, } from "@tanstack/table-core";
 import DataTableCheckbox from "./DataTableCheckbox.svelte";
 import { renderComponent } from "../../ui";
+import { mergeObjects } from "../../ui/data-table/data-table.svelte";
 export function createShadTable(shadOptions, stateUpdate) {
     if (!shadOptions.getCoreRowModel) {
         shadOptions.getCoreRowModel = getCoreRowModel();
@@ -201,33 +202,3 @@ export function createShadTable(shadOptions, stateUpdate) {
     }
     return table;
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function mergeObjects(...sources) {
-    const target = {};
-    for (let i = 0; i < sources.length; i++) {
-        let source = sources[i];
-        if (typeof source === "function")
-            source = source();
-        if (source) {
-            const descriptors = Object.getOwnPropertyDescriptors(source);
-            for (const key in descriptors) {
-                if (key in target)
-                    continue;
-                Object.defineProperty(target, key, {
-                    enumerable: true,
-                    get() {
-                        for (let i = sources.length - 1; i >= 0; i--) {
-                            let s = sources[i];
-                            if (typeof s === "function")
-                                s = s();
-                            const v = (s || {})[key];
-                            if (v !== undefined)
-                                return v;
-                        }
-                    },
-                });
-            }
-        }
-    }
-    return target;
-}

package/dist/components/ui/data-table/data-table.svelte.d.ts

@@ -26,3 +26,15 @@ import { type RowData, type TableOptions } from "@tanstack/table-core";
  * ```
  */
 export declare function createSvelteTable<TData extends RowData>(options: TableOptions<TData>): import("@tanstack/table-core").Table<TData>;
+type MaybeThunk<T extends object> = T | (() => T | null | undefined);
+type Intersection<T extends readonly unknown[]> = (T extends [infer H, ...infer R] ? H & Intersection<R> : unknown) & {};
+/**
+ * Lazily merges several objects (or thunks) while preserving
+ * getter semantics from every source.
+ *
+ * Proxy-based to avoid known WebKit recursion issue.
+ */
+export declare function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(...sources: Sources): Intersection<{
+    [K in keyof Sources]: Sources[K];
+}>;
+export {};

package/dist/components/ui/data-table/data-table.svelte.js

@@ -57,33 +57,54 @@ export function createSvelteTable(options) {
     });
     return table;
 }
+/**
+ * Lazily merges several objects (or thunks) while preserving
+ * getter semantics from every source.
+ *
+ * Proxy-based to avoid known WebKit recursion issue.
+ */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function mergeObjects(...sources) {
-    const target = {};
-    for (let i = 0; i < sources.length; i++) {
-        let source = sources[i];
-        if (typeof source === "function")
-            source = source();
-        if (source) {
-            const descriptors = Object.getOwnPropertyDescriptors(source);
-            for (const key in descriptors) {
-                if (key in target)
-                    continue;
-                Object.defineProperty(target, key, {
-                    enumerable: true,
-                    get() {
-                        for (let i = sources.length - 1; i >= 0; i--) {
-                            let s = sources[i];
-                            if (typeof s === "function")
-                                s = s();
-                            const v = (s || {})[key];
-                            if (v !== undefined)
-                                return v;
-                        }
-                    },
-                });
-            }
+export function mergeObjects(...sources) {
+    const resolve = (src) => typeof src === "function" ? (src() ?? undefined) : src;
+    const findSourceWithKey = (key) => {
+        for (let i = sources.length - 1; i >= 0; i--) {
+            const obj = resolve(sources[i]);
+            if (obj && key in obj)
+                return obj;
         }
-    }
-    return target;
+        return undefined;
+    };
+    return new Proxy(Object.create(null), {
+        get(_, key) {
+            const src = findSourceWithKey(key);
+            return src?.[key];
+        },
+        has(_, key) {
+            return !!findSourceWithKey(key);
+        },
+        ownKeys() {
+            const all = new Set();
+            for (const s of sources) {
+                const obj = resolve(s);
+                if (obj) {
+                    for (const k of Reflect.ownKeys(obj)) {
+                        all.add(k);
+                    }
+                }
+            }
+            return [...all];
+        },
+        getOwnPropertyDescriptor(_, key) {
+            const src = findSourceWithKey(key);
+            if (!src)
+                return undefined;
+            return {
+                configurable: true,
+                enumerable: true,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                value: src[key],
+                writable: true,
+            };
+        },
+    });
 }

package/dist/components/ui/data-table/flex-render.svelte

@@ -1,12 +1,5 @@
-<script lang="ts" module>
-	import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
-
-	type TData = unknown;
-	type TValue = unknown;
-	type TContext = unknown;
-</script>
-
 <script lang="ts" generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>">
+	import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
 	import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
 	type Props = {
 		/** The cell or header field of the current cell's column definition. */

package/dist/components/ui/drawer/drawer-content.svelte

@@ -20,7 +20,7 @@
 		bind:ref
 		data-slot="drawer-content"
 		class={cn(
-			"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+			"group/drawer-content bg-background fixed z-50 flex h-auto flex-col gap-4 p-4",
 			"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
 			"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
 			"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",

package/dist/components/ui/drawer/drawer-footer.svelte

@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="drawer-footer" class={cn("mt-auto flex flex-col gap-2 p-4", className)} {...restProps}>
+<div bind:this={ref} data-slot="drawer-footer" class={cn("mt-auto flex flex-col gap-2", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/drawer/drawer-header.svelte

@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="drawer-header" class={cn("flex flex-col gap-1.5 p-4", className)} {...restProps}>
+<div bind:this={ref} data-slot="drawer-header" class={cn("flex flex-col gap-1.5", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/form/form-element-field.svelte

@@ -1,11 +1,6 @@
-<script lang="ts" module>
-	import type { FormPathLeaves as _FormPathLeaves } from "sveltekit-superforms";
-	type T = Record<string, unknown>;
-	type U = _FormPathLeaves<T>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPathLeaves<T>">
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
 	import * as FormPrimitive from "formsnap";
+	import type { FormPathLeaves } from "sveltekit-superforms";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
 

package/dist/components/ui/form/form-element-field.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { FormPathLeaves as _FormPathLeaves } from "sveltekit-superforms";
 import * as FormPrimitive from "formsnap";
+import type { FormPathLeaves } from "sveltekit-superforms";
 import type { HTMLAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../../utils.js";
-declare class __sveltets_Render<T extends Record<string, unknown>, U extends _FormPathLeaves<T>> {
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPathLeaves<T>> {
     props(): Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children"> & FormPrimitive.ElementFieldProps<T, U, any>;
     events(): {};
     slots(): {};
@@ -10,12 +10,12 @@ declare class __sveltets_Render<T extends Record<string, unknown>, U extends _Fo
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends Record<string, unknown>, U extends _FormPathLeaves<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
+    new <T extends Record<string, unknown>, U extends FormPathLeaves<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T, U>['bindings']>;
     } & ReturnType<__sveltets_Render<T, U>['exports']>;
-    <T extends Record<string, unknown>, U extends _FormPathLeaves<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPathLeaves<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const FormElementField: $$IsomorphicComponent;
-type FormElementField<T extends Record<string, unknown>, U extends _FormPathLeaves<T>> = InstanceType<typeof FormElementField<T, U>>;
+type FormElementField<T extends Record<string, unknown>, U extends FormPathLeaves<T>> = InstanceType<typeof FormElementField<T, U>>;
 export default FormElementField;

package/dist/components/ui/form/form-field.svelte

@@ -1,11 +1,6 @@
-<script lang="ts" module>
-	import type { FormPath as _FormPath } from "sveltekit-superforms";
-	type T = Record<string, unknown>;
-	type U = _FormPath<T>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPath<T>">
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
 	import * as FormPrimitive from "formsnap";
+	import type { FormPath } from "sveltekit-superforms";
 	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
 

package/dist/components/ui/form/form-field.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { FormPath as _FormPath } from "sveltekit-superforms";
 import * as FormPrimitive from "formsnap";
+import type { FormPath } from "sveltekit-superforms";
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare class __sveltets_Render<T extends Record<string, unknown>, U extends _FormPath<T>> {
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>> {
     props(): FormPrimitive.FieldProps<T, U, any> & Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children">;
     events(): {};
     slots(): {};
@@ -10,12 +10,12 @@ declare class __sveltets_Render<T extends Record<string, unknown>, U extends _Fo
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends Record<string, unknown>, U extends _FormPath<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
+    new <T extends Record<string, unknown>, U extends FormPath<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T, U>['bindings']>;
     } & ReturnType<__sveltets_Render<T, U>['exports']>;
-    <T extends Record<string, unknown>, U extends _FormPath<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPath<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const FormField: $$IsomorphicComponent;
-type FormField<T extends Record<string, unknown>, U extends _FormPath<T>> = InstanceType<typeof FormField<T, U>>;
+type FormField<T extends Record<string, unknown>, U extends FormPath<T>> = InstanceType<typeof FormField<T, U>>;
 export default FormField;

package/dist/components/ui/form/form-fieldset.svelte

@@ -1,11 +1,6 @@
-<script lang="ts" module>
-	import type { FormPath as _FormPath } from "sveltekit-superforms";
-	type T = Record<string, unknown>;
-	type U = _FormPath<T>;
-</script>
-
-<script lang="ts" generics="T extends Record<string, unknown>, U extends _FormPath<T>">
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
 	import * as FormPrimitive from "formsnap";
+	import type { FormPath } from "sveltekit-superforms";
 	import { cn, type WithoutChild } from "../../../utils.js";
 
 	let {

package/dist/components/ui/form/form-fieldset.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { FormPath as _FormPath } from "sveltekit-superforms";
 import * as FormPrimitive from "formsnap";
-declare class __sveltets_Render<T extends Record<string, unknown>, U extends _FormPath<T>> {
+import type { FormPath } from "sveltekit-superforms";
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>> {
     props(): Omit<FormPrimitive.FieldsetProps<T, U, any>, "child">;
     events(): {};
     slots(): {};
@@ -8,12 +8,12 @@ declare class __sveltets_Render<T extends Record<string, unknown>, U extends _Fo
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends Record<string, unknown>, U extends _FormPath<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
+    new <T extends Record<string, unknown>, U extends FormPath<T>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U>['props']>, ReturnType<__sveltets_Render<T, U>['events']>, ReturnType<__sveltets_Render<T, U>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<T, U>['bindings']>;
     } & ReturnType<__sveltets_Render<T, U>['exports']>;
-    <T extends Record<string, unknown>, U extends _FormPath<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPath<T>>(internal: unknown, props: ReturnType<__sveltets_Render<T, U>['props']> & {}): ReturnType<__sveltets_Render<T, U>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const FormFieldset: $$IsomorphicComponent;
-type FormFieldset<T extends Record<string, unknown>, U extends _FormPath<T>> = InstanceType<typeof FormFieldset<T, U>>;
+type FormFieldset<T extends Record<string, unknown>, U extends FormPath<T>> = InstanceType<typeof FormFieldset<T, U>>;
 export default FormFieldset;

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

@@ -0,0 +1,9 @@
+import Root from "./navigation-menu.svelte";
+import Content from "./navigation-menu-content.svelte";
+import Indicator from "./navigation-menu-indicator.svelte";
+import Item from "./navigation-menu-item.svelte";
+import Link from "./navigation-menu-link.svelte";
+import List from "./navigation-menu-list.svelte";
+import Trigger from "./navigation-menu-trigger.svelte";
+import Viewport from "./navigation-menu-viewport.svelte";
+export { Root, Content, Indicator, Item, Link, List, Trigger, Viewport, Root as NavigationMenuRoot, Content as NavigationMenuContent, Indicator as NavigationMenuIndicator, Item as NavigationMenuItem, Link as NavigationMenuLink, List as NavigationMenuList, Trigger as NavigationMenuTrigger, Viewport as NavigationMenuViewport, };

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

@@ -0,0 +1,11 @@
+import Root from "./navigation-menu.svelte";
+import Content from "./navigation-menu-content.svelte";
+import Indicator from "./navigation-menu-indicator.svelte";
+import Item from "./navigation-menu-item.svelte";
+import Link from "./navigation-menu-link.svelte";
+import List from "./navigation-menu-list.svelte";
+import Trigger from "./navigation-menu-trigger.svelte";
+import Viewport from "./navigation-menu-viewport.svelte";
+export { Root, Content, Indicator, Item, Link, List, Trigger, Viewport, 
+//
+Root as NavigationMenuRoot, Content as NavigationMenuContent, Indicator as NavigationMenuIndicator, Item as NavigationMenuItem, Link as NavigationMenuLink, List as NavigationMenuList, Trigger as NavigationMenuTrigger, Viewport as NavigationMenuViewport, };

package/dist/components/ui/navigation-menu/navigation-menu-content.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.ContentProps = $props();
+</script>
+
+<NavigationMenuPrimitive.Content
+	bind:ref
+	data-slot="navigation-menu-content"
+	class={cn(
+		"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 top-0 left-0 w-full md:absolute md:w-auto",
+		"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+		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,18 @@
+<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(
+		"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+		className
+	)}
+	{...restProps}
+>
+	<div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm 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,13 @@
+<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,16 @@
+<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(
+		"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+		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,13 @@
+<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,34 @@
+<script lang="ts" module>
+	import { cn } from "../../../utils.js";
+	import { tv } from "tailwind-variants";
+
+	export const navigationMenuTriggerStyle = tv({
+		base: "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50",
+	});
+</script>
+
+<script lang="ts">
+	import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+	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(navigationMenuTriggerStyle(), "group", className)}
+	{...restProps}
+>
+	{@render children?.()}
+
+	<ChevronDownIcon
+		class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+		aria-hidden="true"
+	/>
+</NavigationMenuPrimitive.Trigger>

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

@@ -0,0 +1,5 @@
+export declare const navigationMenuTriggerStyle: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
+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,18 @@
+<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={cn("absolute top-full left-0 isolate z-50 flex justify-center")}>
+	<NavigationMenuPrimitive.Viewport
+		bind:ref
+		data-slot="navigation-menu-viewport"
+		class={cn(
+			"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--bits-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow 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,29 @@
+<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),
+		class: className,
+		viewport = true,
+		children,
+		...restProps
+	}: NavigationMenuPrimitive.RootProps & {
+		viewport?: boolean;
+	} = $props();
+</script>
+
+<NavigationMenuPrimitive.Root
+	bind:ref
+	data-slot="navigation-menu"
+	data-viewport={viewport}
+	class={cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+
+	{#if viewport}
+		<NavigationMenuViewport />
+	{/if}
+</NavigationMenuPrimitive.Root>

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

@@ -0,0 +1,7 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+type $$ComponentProps = NavigationMenuPrimitive.RootProps & {
+    viewport?: boolean;
+};
+declare const NavigationMenu: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type NavigationMenu = ReturnType<typeof NavigationMenu>;
+export default NavigationMenu;

package/dist/components/ui/select/index.d.ts

@@ -6,5 +6,5 @@ import Trigger from "./select-trigger.svelte";
 import Separator from "./select-separator.svelte";
 import ScrollDownButton from "./select-scroll-down-button.svelte";
 import ScrollUpButton from "./select-scroll-up-button.svelte";
-declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
+declare const Root: import("svelte").Component<import("bits-ui").SelectRootPropsWithoutHTML, {}, "value" | "open">;
 export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, Root as Select, Group as SelectGroup, Label as SelectLabel, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, };

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

@@ -33,10 +33,10 @@
 				<div
 					class={cn(
 						"bg-primary z-50 size-2.5 rotate-45 rounded-[2px]",
-						side === "top" && "translate-x-1/2 translate-y-[calc(-50%_+_2px)]",
-						side === "bottom" && "-translate-x-1/2 -translate-y-[calc(-50%_+_1px)]",
-						side === "right" && "translate-x-[calc(50%_+_2px)] translate-y-1/2",
-						side === "left" && "-translate-y-[calc(50%_-_3px)]",
+						"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}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "0.19.4",
+  "version": "0.20.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -35,13 +35,13 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.8.1",
-    "bits-ui": "1.8.0",
+    "bits-ui": "2.4.1",
     "clsx": "^2.1.1",
     "embla-carousel-svelte": "8.6.0",
     "formsnap": "2.0.1",
     "mode-watcher": "^1.0.7",
     "paneforge": "1.0.0-next.5",
-    "svelte-sonner": "^1.0.3",
+    "svelte-sonner": "^1.0.4",
     "tailwind-merge": "^3.3.0",
     "tailwind-variants": "^1.0.0",
     "vaul-svelte": "1.0.0-next.7"
@@ -52,39 +52,38 @@
     "@sveltejs/kit": "^2.21.1",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@tailwindcss/vite": "^4.1.7",
+    "@tailwindcss/vite": "^4.1.8",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.8",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.7",
-    "@typescript-eslint/eslint-plugin": "^8.32.1",
-    "@typescript-eslint/parser": "^8.32.1",
+    "@typescript-eslint/eslint-plugin": "^8.33.0",
+    "@typescript-eslint/parser": "^8.33.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
-    "eslint": "^9.27.0",
+    "eslint": "^9.28.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.9.0",
-    "happy-dom": "^17.4.7",
+    "eslint-plugin-svelte": "^3.9.1",
+    "happy-dom": "^17.5.6",
     "layerchart": "2.0.0-next.6",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier-plugin-tailwindcss": "^0.6.12",
     "publint": "^0.3.12",
-    "svelte": "5.33.2",
+    "svelte": "5.33.13",
     "svelte-check": "^4.2.1",
-    "tailwindcss": "^4.1.7",
+    "tailwindcss": "^4.1.8",
     "tslib": "^2.8.1",
-    "tw-animate-css": "1.3.0",
+    "tw-animate-css": "1.3.3",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vitest": "^3.1.4",
-    "zod": "^3.25.28"
+    "zod": "^3.25.46"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "type": "module",
-  "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",