@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/components/ui/mode-switcher/shared-mode-sync.js

@@ -0,0 +1,377 @@
+import { CapabilityError } from '@vibesdotdev/kernel';
+import { BROWSER } from 'esm-env';
+import { settleNow } from "../../../attempt.js";
+import { createApiError, failure, success } from "../../../types/errors.js";
+export const SHARED_MODE_COOKIE_NAME = 'vibes-mode';
+export const MODE_STORAGE_KEY = 'mode-watcher-mode';
+export const SHARED_MODE_MAX_AGE = 60 * 60 * 24 * 365;
+const SHARED_MODE_VALUES = ['light', 'dark', 'system'];
+/** The shared mode a stored or transmitted string names, or `null` for anything else. */
+export function parseSharedMode(value) {
+    return SHARED_MODE_VALUES.find((mode) => mode === value) ?? null;
+}
+/** The event other surfaces dispatch on `window` to change the shared mode. */
+export const THEME_MODE_CHANGED_EVENT = 'vibes:theme-mode-changed';
+/**
+ * Follow theme-mode change events on `target`. Any script can dispatch the
+ * event, so its `detail` is parsed: only a shared mode reaches `onMode`.
+ * Answers the unsubscribe.
+ */
+export function subscribeThemeModeChanges(target, onMode) {
+    const listener = (event) => {
+        const mode = event instanceof CustomEvent ? parseSharedMode(event.detail) : null;
+        if (mode)
+            onMode(mode);
+    };
+    target.addEventListener(THEME_MODE_CHANGED_EVENT, listener);
+    return () => target.removeEventListener(THEME_MODE_CHANGED_EVENT, listener);
+}
+function isIpAddress(hostname) {
+    return /^\d{1,3}(?:\.\d{1,3}){3}$/.test(hostname);
+}
+/**
+ * Second-level labels that sit under a two-letter country code as a public
+ * suffix (`co.uk`, `com.au`). A shared cookie never goes above the domain
+ * registered beneath one of them.
+ */
+const COUNTRY_SECOND_LEVEL_LABELS = new Set([
+    'ac',
+    'co',
+    'com',
+    'edu',
+    'gob',
+    'gov',
+    'go',
+    'ltd',
+    'mil',
+    'ne',
+    'net',
+    'nic',
+    'or',
+    'org',
+    'plc',
+    'sch'
+]);
+/** How many trailing labels form the public suffix: two for `co.uk`-style hosts, else one. */
+function publicSuffixLength(parts) {
+    const [secondLevel, topLevel] = parts.slice(-2);
+    const countrySecondLevel = topLevel !== undefined &&
+        topLevel.length === 2 &&
+        secondLevel !== undefined &&
+        COUNTRY_SECOND_LEVEL_LABELS.has(secondLevel);
+    return countrySecondLevel ? 2 : 1;
+}
+/**
+ * The legacy shared cookie domain for a page host: the host minus its first
+ * label, never above the registered domain (`example.co.uk` stays
+ * `.example.co.uk`, `vibes.dev` stays `.vibes.dev`). `null` for local and IP
+ * hosts. Hosts that know their sharing domain pass `cookieDomain` instead.
+ */
+export function deriveSharedCookieDomain(hostname) {
+    const normalized = hostname.trim().toLowerCase();
+    if (!normalized || normalized === 'localhost' || normalized.endsWith('.localhost')) {
+        return null;
+    }
+    if (isIpAddress(normalized)) {
+        return null;
+    }
+    const parts = normalized.split('.').filter(Boolean);
+    const registeredLength = publicSuffixLength(parts) + 1;
+    if (parts.length < registeredLength) {
+        return null;
+    }
+    return `.${parts.slice(Math.min(1, parts.length - registeredLength)).join('.')}`;
+}
+export function readSharedModeCookie(cookieString, cookieName = SHARED_MODE_COOKIE_NAME) {
+    for (const entry of cookieString.split(';')) {
+        const trimmed = entry.trim();
+        if (!trimmed)
+            continue;
+        const separatorIndex = trimmed.indexOf('=');
+        const rawName = separatorIndex >= 0 ? trimmed.slice(0, separatorIndex) : trimmed;
+        const rawValue = separatorIndex >= 0 ? trimmed.slice(separatorIndex + 1) : '';
+        if (decodeCookieText(rawName) !== cookieName)
+            continue;
+        return parseSharedMode(decodeCookieText(rawValue));
+    }
+    return null;
+}
+/**
+ * Cookie text as written, or `null` when it is not valid percent-encoding:
+ * such text names no cookie this module wrote and no mode.
+ */
+function decodeCookieText(value) {
+    const decoded = settleNow(() => decodeURIComponent(value));
+    if (decoded.ok)
+        return decoded.value;
+    if (decoded.error instanceof URIError)
+        return null;
+    throw decoded.error;
+}
+/** Storage access was denied. Fixed text: no host error text is carried. */
+export const SHARED_MODE_STORAGE_BLOCKED = Object.freeze(createApiError('Theme preference storage is unavailable.', 'shared-mode-storage-blocked'));
+/** The configured cookie domain is not a domain name. */
+export const SHARED_MODE_COOKIE_DOMAIN_INVALID = Object.freeze(createApiError('The theme cookie domain is not a domain name.', 'shared-mode-cookie-domain-invalid'));
+/** No browser page is present (server rendering), so nothing was persisted. */
+export const SHARED_MODE_HOST_UNAVAILABLE = Object.freeze(createApiError('No browser page is available for the theme preference.', 'shared-mode-host-unavailable'));
+const COOKIE_DOMAIN = /^\.?[a-z0-9-]+(?:\.[a-z0-9-]+)*$/i;
+/** The stored mode, `null` when none (or no valid one) is stored, or a blocked refusal. */
+export function readStoredSharedMode(storage, key) {
+    const stored = settleNow(() => storage.getItem(key));
+    return stored.ok ? success(parseSharedMode(stored.value)) : failure(SHARED_MODE_STORAGE_BLOCKED);
+}
+export function writeStoredSharedMode(storage, key, mode) {
+    const written = settleNow(() => storage.setItem(key, mode));
+    return written.ok ? success(mode) : failure(SHARED_MODE_STORAGE_BLOCKED);
+}
+/** The serialised shared cookie for `mode`, or a refusal for an invalid domain. */
+export function serializeSharedModeCookie(mode, options = {}) {
+    const parts = [
+        `${encodeURIComponent(options.cookieName ?? SHARED_MODE_COOKIE_NAME)}=${encodeURIComponent(mode)}`,
+        'Path=/',
+        'SameSite=Lax',
+        `Max-Age=${options.maxAge ?? SHARED_MODE_MAX_AGE}`
+    ];
+    if (options.cookieDomain !== undefined) {
+        if (!COOKIE_DOMAIN.test(options.cookieDomain))
+            return failure(SHARED_MODE_COOKIE_DOMAIN_INVALID);
+        parts.push(`Domain=${options.cookieDomain}`);
+    }
+    return success(parts.join('; '));
+}
+/**
+ * Persist `mode` through the host: the shared cookie, then the storage
+ * mirror. A blocked mirror is reported; the cookie still carries the mode.
+ */
+export function persistSharedMode(host, mode, options = {}) {
+    const cookie = serializeSharedModeCookie(mode, options);
+    if (!cookie.success)
+        return cookie;
+    host.writeCookie(cookie.data);
+    return writeStoredSharedMode(host.storage, options.modeStorageKey ?? MODE_STORAGE_KEY, mode);
+}
+/**
+ * Settle the mode before the watcher mounts. The shared cookie (or the
+ * server-resolved mode) wins and is mirrored to storage; otherwise a stored
+ * mode is shared back to the cookie. Blocked storage is reported apart from a
+ * missing preference.
+ */
+export function syncSharedMode(host, options = {}) {
+    const key = options.modeStorageKey ?? MODE_STORAGE_KEY;
+    const cookieMode = readSharedModeCookie(host.readCookies(), options.cookieName) ?? options.ssrMode;
+    if (cookieMode) {
+        const mirrored = writeStoredSharedMode(host.storage, key, cookieMode);
+        return { mode: cookieMode, storage: mirrored.success ? 'mirrored' : 'blocked' };
+    }
+    const stored = readStoredSharedMode(host.storage, key);
+    if (!stored.success)
+        return { mode: null, storage: 'blocked' };
+    if (!stored.data)
+        return { mode: null, storage: 'missing' };
+    const cookie = serializeSharedModeCookie(stored.data, options);
+    if (cookie.success)
+        host.writeCookie(cookie.data);
+    return { mode: stored.data, storage: 'found' };
+}
+/** Apply `mode` to a document root: class sets, `data-mode` and `color-scheme`. */
+export function applySharedMode(root, mode, prefersDark, options = {}) {
+    const resolvedMode = mode === 'system' ? (prefersDark ? 'dark' : 'light') : mode;
+    for (const className of options.darkClassNames ?? ['dark']) {
+        root.classList.toggle(className, resolvedMode === 'dark');
+    }
+    for (const className of options.lightClassNames ?? []) {
+        root.classList.toggle(className, resolvedMode === 'light');
+    }
+    if (mode === 'system')
+        delete root.dataset.mode;
+    else
+        root.dataset.mode = mode;
+    root.style.colorScheme = resolvedMode;
+}
+/** Storage for a page whose runtime composes none: every access refuses, so the cookie alone carries the mode. */
+const UNAVAILABLE_STORAGE = Object.freeze({
+    getItem() {
+        throw new CapabilityError('No runtime preference storage is available.', 'UNAVAILABLE', {
+            reason: 'preference-storage-unavailable',
+            retryable: false
+        });
+    },
+    setItem() {
+        throw new CapabilityError('No runtime preference storage is available.', 'UNAVAILABLE', {
+            reason: 'preference-storage-unavailable',
+            retryable: false
+        });
+    }
+});
+/**
+ * The current page as a host, for the legacy entry points that take none.
+ * `storage` is the runtime browser host's (see `preferences/preference-storage`);
+ * without it the cookie still carries the mode and the mirror reports blocked.
+ * Storage is reached per call, so a blocked store is a blocked read or write,
+ * not a throw.
+ */
+function legacyPageHost(storage = UNAVAILABLE_STORAGE) {
+    if (!BROWSER)
+        return null;
+    return {
+        storage,
+        readCookies: () => document.cookie,
+        writeCookie: (serialized) => {
+            document.cookie = serialized;
+        },
+        prefersDark: () => window.matchMedia('(prefers-color-scheme: dark)').matches
+    };
+}
+/** The legacy sharing domain: the caller's, else derived from the page host. */
+function legacyCookieDomain(cookieDomain) {
+    return cookieDomain ?? deriveSharedCookieDomain(window.location.hostname) ?? undefined;
+}
+/** Legacy entry point: persist on the current page, deriving the sharing domain. */
+export function persistSharedModePreference(mode, options) {
+    const host = legacyPageHost(options?.storage);
+    if (!host)
+        return failure(SHARED_MODE_HOST_UNAVAILABLE);
+    return persistSharedMode(host, mode, {
+        ...options,
+        cookieDomain: legacyCookieDomain(options?.cookieDomain)
+    });
+}
+/** Legacy entry point: apply on the current page's root. */
+export function applySharedModePreference(mode, options) {
+    const host = legacyPageHost();
+    if (!host)
+        return;
+    applySharedMode(document.documentElement, mode, host.prefersDark(), options);
+}
+/** Legacy entry point: sync on the current page, deriving the sharing domain. */
+export function syncSharedModePreference(options) {
+    const host = legacyPageHost(options?.storage);
+    if (!host)
+        return null;
+    return syncSharedMode(host, {
+        ...options,
+        cookieDomain: legacyCookieDomain(options?.cookieDomain)
+    }).mode;
+}
+const LINE_SEPARATOR = String.fromCharCode(0x2028);
+const PARAGRAPH_SEPARATOR = String.fromCharCode(0x2029);
+/**
+ * JSON for embedding in an inline `<script>`: `<` and the JS line separators
+ * are escaped, so no value can close the element or break the statement.
+ */
+function inlineScriptJson(value) {
+    return JSON.stringify(value)
+        .replace(/</g, '\\u003c')
+        .replaceAll(LINE_SEPARATOR, '\\u2028')
+        .replaceAll(PARAGRAPH_SEPARATOR, '\\u2029');
+}
+/** An HTML attribute value with the characters that could end or open markup escaped. */
+function escapeAttribute(value) {
+    return value
+        .replace(/&/g, '&amp;')
+        .replace(/"/g, '&quot;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+/** The bootstrap `<script>` element, with an optional CSP nonce quoted and escaped. */
+export function createSharedModeBootstrapTag(script, nonce) {
+    const nonceAttribute = nonce ? ` nonce="${escapeAttribute(nonce)}"` : '';
+    return `<script${nonceAttribute}>${script}</script>`;
+}
+export function createSharedModeBootstrapScript(options) {
+    const cookieName = options?.cookieName ?? SHARED_MODE_COOKIE_NAME;
+    const modeStorageKey = options?.modeStorageKey ?? MODE_STORAGE_KEY;
+    const cookieDomain = options?.cookieDomain ?? null;
+    const maxAge = options?.maxAge ?? SHARED_MODE_MAX_AGE;
+    const darkClassNames = options?.darkClassNames ?? ['dark'];
+    const lightClassNames = options?.lightClassNames ?? [];
+    return `(() => {
+		const validModes = new Set(['light', 'dark', 'system']);
+		const cookieName = ${inlineScriptJson(cookieName)};
+		const modeStorageKey = ${inlineScriptJson(modeStorageKey)};
+		const configuredDomain = ${inlineScriptJson(cookieDomain)};
+		const maxAge = ${inlineScriptJson(maxAge)};
+		const darkClassNames = ${inlineScriptJson(darkClassNames)};
+		const lightClassNames = ${inlineScriptJson(lightClassNames)};
+		const countrySecondLevel = new Set(${inlineScriptJson([...COUNTRY_SECOND_LEVEL_LABELS])});
+		const safeDecode = (value) => {
+			try {
+				return decodeURIComponent(value);
+			} catch (e) {
+				return null;
+			}
+		};
+		const isIpAddress = (hostname) => /^\\d{1,3}(?:\\.\\d{1,3}){3}$/.test(hostname);
+		const resolveDomain = () => {
+			if (configuredDomain) return configuredDomain;
+			const hostname = window.location.hostname.trim().toLowerCase();
+			if (!hostname || hostname === 'localhost' || hostname.endsWith('.localhost')) return '';
+			if (isIpAddress(hostname)) return '';
+			const parts = hostname.split('.').filter(Boolean);
+			const secondLevel = parts[parts.length - 2];
+			const topLevel = parts[parts.length - 1];
+			const suffixLength = topLevel && topLevel.length === 2 && countrySecondLevel.has(secondLevel) ? 2 : 1;
+			const registeredLength = suffixLength + 1;
+			if (parts.length < registeredLength) return '';
+			return '.' + parts.slice(Math.min(1, parts.length - registeredLength)).join('.');
+		};
+		const readCookieMode = () => {
+			for (const entry of document.cookie.split(';')) {
+				const trimmed = entry.trim();
+				if (!trimmed) continue;
+				const separatorIndex = trimmed.indexOf('=');
+				const rawName = separatorIndex >= 0 ? trimmed.slice(0, separatorIndex) : trimmed;
+				const rawValue = separatorIndex >= 0 ? trimmed.slice(separatorIndex + 1) : '';
+				if (safeDecode(rawName) !== cookieName) continue;
+				const decodedValue = safeDecode(rawValue);
+				return validModes.has(decodedValue) ? decodedValue : null;
+			}
+			return null;
+		};
+		const writeCookie = (mode) => {
+			if (!validModes.has(mode)) return;
+			const parts = [
+				encodeURIComponent(cookieName) + '=' + encodeURIComponent(mode),
+				'Path=/',
+				'SameSite=Lax',
+				'Max-Age=' + maxAge
+			];
+			const domain = resolveDomain();
+			if (domain) parts.push('Domain=' + domain);
+			document.cookie = parts.join('; ');
+		};
+		const applyMode = (mode) => {
+			const resolvedMode = mode === 'system'
+				? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+				: mode;
+			if (mode === 'system') delete document.documentElement.dataset.mode;
+			else document.documentElement.dataset.mode = mode;
+			for (const className of darkClassNames) {
+				document.documentElement.classList.toggle(className, resolvedMode === 'dark');
+			}
+			for (const className of lightClassNames) {
+				document.documentElement.classList.toggle(className, resolvedMode === 'light');
+			}
+			document.documentElement.style.colorScheme = resolvedMode;
+		};
+		const cookieMode = readCookieMode();
+		if (cookieMode) {
+			try {
+				localStorage.setItem(modeStorageKey, cookieMode);
+			} catch (blocked) {
+				// Storage is blocked; the cookie still applies, and the mounted watcher reports it.
+			}
+			applyMode(cookieMode);
+			return;
+		}
+		try {
+			const storedMode = localStorage.getItem(modeStorageKey);
+			if (validModes.has(storedMode)) {
+				writeCookie(storedMode);
+				applyMode(storedMode);
+			}
+		} catch (blocked) {
+			// Storage is blocked; the mounted watcher reports it.
+		}
+	})();`;
+}

package/dist/lib/components/ui/native-select/index.d.ts

@@ -0,0 +1,4 @@
+import Root from './native-select.svelte';
+import Option from './native-select-option.svelte';
+import OptGroup from './native-select-opt-group.svelte';
+export { Root, Option, OptGroup, Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup };

package/dist/lib/components/ui/native-select/index.js

@@ -0,0 +1,4 @@
+import Root from './native-select.svelte';
+import Option from './native-select-option.svelte';
+import OptGroup from './native-select-opt-group.svelte';
+export { Root, Option, OptGroup, Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup };

package/dist/lib/components/ui/native-select/native-select-opt-group.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">let { ref = $bindable(null), children, ...restProps } = $props();
+export {};
+</script>
+
+<optgroup bind:this={ref} data-slot="native-select-opt-group" {...restProps}>
+	{@render children?.()}
+</optgroup>

package/dist/lib/components/ui/native-select/native-select-opt-group.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLOptgroupAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils.js';
+declare const NativeSelectOptGroup: import("svelte").Component<WithElementRef<HTMLOptgroupAttributes>, {}, "ref">;
+type NativeSelectOptGroup = ReturnType<typeof NativeSelectOptGroup>;
+export default NativeSelectOptGroup;

package/dist/lib/components/ui/native-select/native-select-option.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">let { ref = $bindable(null), children, ...restProps } = $props();
+export {};
+</script>
+
+<option bind:this={ref} data-slot="native-select-option" {...restProps}>
+	{@render children?.()}
+</option>

package/dist/lib/components/ui/native-select/native-select-option.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLOptionAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils.js';
+declare const NativeSelectOption: import("svelte").Component<WithElementRef<HTMLOptionAttributes>, {}, "ref">;
+type NativeSelectOption = ReturnType<typeof NativeSelectOption>;
+export default NativeSelectOption;

package/dist/lib/components/ui/native-select/native-select.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+import { Icon } from "../../icon";
+let { ref = $bindable(null), value = $bindable(), class: className, children, ...restProps } = $props();
+</script>
+
+<div
+	class="group/native-select relative w-fit has-[select:disabled]:opacity-50"
+	data-slot="native-select-wrapper"
+>
+	<select
+		bind:value
+		bind:this={ref}
+		data-slot="native-select"
+		class={cn(
+			'h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pe-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed dark:bg-input/30 dark:hover:bg-input/50',
+			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</select>
+	<Icon
+		icon="lucide:chevron-down"
+		class="pointer-events-none absolute end-3.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground opacity-50 select-none"
+		aria-hidden="true"
+		data-slot="native-select-icon"
+	/>
+</div>

package/dist/lib/components/ui/native-select/native-select.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLSelectAttributes } from 'svelte/elements';
+type Props = HTMLSelectAttributes & {
+    ref?: HTMLSelectElement | null;
+};
+declare const NativeSelect: import("svelte").Component<Props, {}, "value" | "ref">;
+type NativeSelect = ReturnType<typeof NativeSelect>;
+export default NativeSelect;

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

@@ -0,0 +1,19 @@
+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';
+declare const NavigationMenu: typeof Root & {
+    Root: typeof Root;
+    Content: typeof Content;
+    Indicator: typeof Indicator;
+    Item: typeof Item;
+    Link: typeof Link;
+    List: typeof List;
+    Trigger: typeof Trigger;
+    Viewport: typeof Viewport;
+};
+export { Root, Content, Indicator, Item, Link, List, Trigger, Viewport, NavigationMenu, 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/lib/components/ui/navigation-menu/index.js

@@ -0,0 +1,22 @@
+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';
+// Dual export: <NavigationMenu> renders Root, <NavigationMenu.Content> accesses the namespace.
+const NavigationMenu = Object.assign(Root, {
+    Root,
+    Content,
+    Indicator,
+    Item,
+    Link,
+    List,
+    Trigger,
+    Viewport
+});
+export { Root, Content, Indicator, Item, Link, List, Trigger, Viewport, NavigationMenu, 
+//
+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/lib/components/ui/navigation-menu/navigation-menu-content.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<NavigationMenuPrimitive.Content
+	bind:ref
+	data-slot="navigation-menu-content"
+	class={cn(
+		'start-0 top-0 w-full data-[motion=from-end]:slide-in-from-end-52 data-[motion=from-start]:slide-in-from-start-52 data-[motion=to-end]:slide-out-to-end-52 data-[motion=to-start]:slide-out-to-start-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto',
+		'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:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground 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 group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95',
+		className
+	)}
+	{...restProps}
+/>

package/dist/lib/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/lib/components/ui/navigation-menu/navigation-menu-indicator.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 } = $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=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in',
+		className
+	)}
+	{...restProps}
+>
+	<div class="rounded-ts-sm relative top-[60%] h-2 w-2 rotate-45 bg-border shadow-md"></div>
+</NavigationMenuPrimitive.Indicator>

package/dist/lib/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/lib/components/ui/navigation-menu/navigation-menu-item.svelte

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

package/dist/lib/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/lib/components/ui/navigation-menu/navigation-menu-link.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<NavigationMenuPrimitive.Link
+	bind:ref
+	data-slot="navigation-menu-link"
+	class={cn(
+		"flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active]:bg-accent/50 data-[active]:text-accent-foreground data-[active]:hover:bg-accent data-[active]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+		className
+	)}
+	{...restProps}
+/>

package/dist/lib/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/lib/components/ui/navigation-menu/navigation-menu-list.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">import { NavigationMenu as NavigationMenuPrimitive } from "bits-ui";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $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/lib/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/lib/components/ui/navigation-menu/navigation-menu-trigger.svelte

@@ -0,0 +1,24 @@
+<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 { Icon } from "../../icon";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<NavigationMenuPrimitive.Trigger
+	bind:ref
+	data-slot="navigation-menu-trigger"
+	class={cn(navigationMenuTriggerStyle(), 'group', className)}
+	{...restProps}
+>
+	{@render children?.()}
+
+	<Icon
+		icon="lucide:chevron-down"
+		class="relative top-[1px] ms-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+		aria-hidden="true"
+	/>
+</NavigationMenuPrimitive.Trigger>

package/dist/lib/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").TVReturnTypeLike<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;