sheer-ui 0.0.0

package/src/lib/components/navigation-menu/components/navigation-menu-content.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { ClassValue } from 'svelte/elements';
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+
+	import { NavigationMenuContentState } from '../navigation-menu.svelte.js';
+	import NavigationMenuContentImpl from './navigation-menu-content-impl.svelte';
+
+	import Portal from '../../../internal/portal/portal.svelte';
+
+	import { createId } from '../../../internal/create-id.js';
+
+	import type { NavigationMenuContentProps } from '../types.js';
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid),
+		class: className,
+		children,
+		child,
+		...restProps
+	}: NavigationMenuContentProps & {
+		class?: ClassValue;
+	} = $props();
+
+	const contentState = NavigationMenuContentState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(value) => (ref = value),
+		),
+	});
+
+	const contentClass = $derived(
+		join(
+			'top-0 left-0 w-full p-2 pr-2.5 ease-[cubic-bezier(0.22,1,0.36,1)] 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:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 nav-content-surface duration-150 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-closed:opacity-0 group-data-[viewport=false]/navigation-menu:data-closed:scale-95',
+			className,
+		),
+	);
+
+	const mergedProps = $derived(
+		mergeProps(
+			restProps,
+			{
+				'data-slot': 'navigation-menu-content',
+				class: contentClass,
+			},
+			contentState.props,
+		),
+	);
+</script>
+
+<Portal to={contentState.context.viewportRef.current || undefined} disabled={!contentState.context.viewportRef.current}>
+	<NavigationMenuContentImpl {...mergedProps} {children} {child} />
+</Portal>

package/src/lib/components/navigation-menu/components/navigation-menu-indicator-impl.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { NavigationMenuIndicatorProps } from '../types.js';
+	import { NavigationMenuIndicatorImplState } from '../navigation-menu.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { id = createId(uid), ref = $bindable(null), children, child, ...restProps }: NavigationMenuIndicatorProps = $props();
+
+	const indicatorState = NavigationMenuIndicatorImplState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, indicatorState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/navigation-menu/components/navigation-menu-indicator.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { ClassValue } from 'svelte/elements';
+	import { mergeProps } from '../../../internal/merge-props.js';
+
+	import type { NavigationMenuIndicatorProps } from '../types.js';
+	import { NavigationMenuIndicatorState } from '../navigation-menu.svelte.js';
+	import NavigationMenuIndicatorImpl from './navigation-menu-indicator-impl.svelte';
+
+	import Portal from '../../../internal/portal/portal.svelte';
+
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		...restProps
+	}: NavigationMenuIndicatorProps & {
+		class?: ClassValue;
+	} = $props();
+
+	const indicatorState = NavigationMenuIndicatorState.create();
+
+	const indicatorClass = $derived(
+		join(
+			'top-full z-1 flex h-1.5 items-end justify-center overflow-hidden nav-indicator-surface duration-150',
+			className,
+		),
+	);
+
+	const mergedProps = $derived(
+		mergeProps(restProps, {
+			'data-slot': 'navigation-menu-indicator',
+			class: indicatorClass,
+		}),
+	);
+</script>
+
+{#if indicatorState.context.indicatorTrackRef.current}
+	<Portal to={indicatorState.context.indicatorTrackRef.current}>
+		<NavigationMenuIndicatorImpl {...mergedProps} {id} bind:ref {child}>
+			{#snippet children()}
+				{#if children}
+					{@render children()}
+				{:else}
+					<div class="bg-border relative top-3/5 h-2 w-2 rotate-45 rounded-tl-sm shadow-md"></div>
+				{/if}
+			{/snippet}
+		</NavigationMenuIndicatorImpl>
+	</Portal>
+{/if}

package/src/lib/components/navigation-menu/components/navigation-menu-item.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { ClassValue } from 'svelte/elements';
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+
+	import type { NavigationMenuItemProps } from '../types.js';
+	import { NavigationMenuItemState } from '../navigation-menu.svelte.js';
+
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+	const defaultId = createId(uid);
+
+	let {
+		id = defaultId,
+		value = defaultId,
+		ref = $bindable(null),
+		class: className,
+		child,
+		children,
+		openOnHover = true,
+		...restProps
+	}: NavigationMenuItemProps & {
+		class?: ClassValue;
+	} = $props();
+
+	const itemState = NavigationMenuItemState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(value) => (ref = value),
+		),
+		value: boxWith(() => value),
+		openOnHover: boxWith(() => openOnHover),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			restProps,
+			{
+				'data-slot': 'navigation-menu-item',
+				class: join('relative', className),
+			},
+			itemState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<li {...mergedProps}>
+		{@render children?.()}
+	</li>
+{/if}

package/src/lib/components/navigation-menu/components/navigation-menu-link.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { ClassValue } from 'svelte/elements';
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+
+	import type { NavigationMenuLinkProps } from '../types.js';
+	import { NavigationMenuLinkState } from '../navigation-menu.svelte.js';
+
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		class: className,
+		child,
+		children,
+		active = false,
+		onSelect = () => {},
+		tabindex = 0,
+		...restProps
+	}: NavigationMenuLinkProps & {
+		class?: ClassValue;
+	} = $props();
+
+	const linkState = NavigationMenuLinkState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(value) => (ref = value),
+		),
+		active: boxWith(() => active),
+		onSelect: boxWith(() => onSelect),
+	});
+
+	const linkClass = $derived(
+		join(
+			"flex items-center gap-1.5 rounded-md p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-sm data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+			className,
+		),
+	);
+
+	const mergedProps = $derived(
+		mergeProps(
+			restProps,
+			{
+				'data-slot': 'navigation-menu-link',
+				class: linkClass,
+			},
+			linkState.props,
+			{ tabindex },
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<a {...mergedProps}>
+		{@render children?.()}
+	</a>
+{/if}

package/src/lib/components/navigation-menu/components/navigation-menu-list.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { ClassValue } from 'svelte/elements';
+	import { boxWith, mountedAttachment } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+
+	import type { NavigationMenuListProps } from '../types.js';
+	import { NavigationMenuListState } from '../navigation-menu.svelte.js';
+
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		...restProps
+	}: NavigationMenuListProps & {
+		class?: ClassValue;
+	} = $props();
+
+	const listState = NavigationMenuListState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(value) => (ref = value),
+		),
+	});
+
+	const listClass = $derived(join('group flex flex-1 list-none items-center justify-center gap-0', className));
+
+	const mergedProps = $derived(
+		mergeProps(
+			restProps,
+			{
+				'data-slot': 'navigation-menu-list',
+				class: listClass,
+			},
+			listState.props,
+		),
+	);
+
+	const mounted = mountedAttachment<HTMLElement>((m) => (listState.wrapperMounted = m));
+
+	const wrapperProps = $derived(mergeProps(listState.wrapperProps, mounted));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, wrapperProps })}
+{:else}
+	<div {...wrapperProps}>
+		<ul {...mergedProps}>
+			{@render children?.()}
+		</ul>
+	</div>
+{/if}

package/src/lib/components/navigation-menu/components/navigation-menu-sub.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { NavigationMenuSubProps } from '../types.js';
+	import { NavigationMenuSubState } from '../navigation-menu.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		id = createId(uid),
+		ref = $bindable(null),
+		value = $bindable(''),
+		onValueChange = () => {},
+		orientation = 'horizontal',
+		...restProps
+	}: NavigationMenuSubProps = $props();
+
+	const rootState = NavigationMenuSubState.create({
+		id: boxWith(() => id),
+		value: boxWith(
+			() => value,
+			(v) => {
+				value = v;
+				onValueChange(v);
+			},
+		),
+		orientation: boxWith(() => orientation),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/navigation-menu/components/navigation-menu-trigger.svelte

@@ -0,0 +1,80 @@
+<script lang="ts" module>
+	import { declareVariants } from 'overrule';
+
+	export const navigationMenuTriggerStyle = declareVariants({
+		base: 'hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none',
+	});
+</script>
+
+<script lang="ts">
+	import type { ClassValue } from 'svelte/elements';
+	import { boxWith, mountedAttachment } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+	import type { NavigationMenuTriggerProps } from '../types.js';
+	import { NavigationMenuTriggerState } from '../navigation-menu.svelte.js';
+
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		disabled = false,
+		children,
+		child,
+		ref = $bindable(null),
+		class: className,
+		tabindex = 0,
+		...restProps
+	}: NavigationMenuTriggerProps & {
+		class?: ClassValue;
+	} = $props();
+
+	const triggerState = NavigationMenuTriggerState.create({
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled ?? false),
+		ref: boxWith(
+			() => ref,
+			(value) => (ref = value),
+		),
+	});
+
+	const triggerClass = $derived(navigationMenuTriggerStyle({ class: ['group', className] }));
+
+	const mergedProps = $derived(
+		mergeProps(
+			restProps,
+			{
+				'data-slot': 'navigation-menu-trigger',
+				class: triggerClass,
+			},
+			triggerState.props,
+			{ tabindex },
+		),
+	);
+
+	const mounted = mountedAttachment<HTMLElement>((m) => (triggerState.focusProxyMounted = m));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<button {...mergedProps}>
+		{@render children?.()}
+
+		<ChevronDownIcon
+			class="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+			aria-hidden="true" />
+	</button>
+{/if}
+
+{#if triggerState.open}
+	<!-- focus proxy: visually hidden (the sr-only utility) but focusable, for nav-menu focus management -->
+	<span {...mergeProps(triggerState.focusProxyProps, mounted, { class: 'sr-only' })}></span>
+
+	{#if triggerState.context.viewportRef.current}
+		<span aria-owns={triggerState.itemContext.contentId ?? undefined}></span>
+	{/if}
+{/if}

package/src/lib/components/navigation-menu/components/navigation-menu-viewport.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { ClassValue } from 'svelte/elements';
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+
+	import type { NavigationMenuViewportProps } from '../types.js';
+	import { NavigationMenuViewportState } from '../navigation-menu.svelte.js';
+
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		class: className,
+		child,
+		children,
+		...restProps
+	}: NavigationMenuViewportProps & {
+		class?: ClassValue;
+	} = $props();
+
+	const viewportState = NavigationMenuViewportState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(value) => (ref = value),
+		),
+	});
+
+	const viewportClass = $derived(
+		join(
+			'origin-top-center relative mt-1.5 h-[calc(var(--bits-navigation-menu-viewport-height)+1rem)] w-full overflow-hidden rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 nav-viewport-surface duration-100 md:w-[calc(var(--bits-navigation-menu-viewport-width)+1rem)]',
+			className,
+		),
+	);
+
+	const mergedProps = $derived(
+		mergeProps(
+			restProps,
+			{
+				'data-slot': 'navigation-menu-viewport',
+				class: viewportClass,
+			},
+			viewportState.props,
+		),
+	);
+
+</script>
+
+<!-- pointer-events-none: the always-mounted (hidden) viewport gives this box a height, and it must
+     not intercept clicks meant for the page beneath; the viewport re-enables them while open. -->
+<div class="pointer-events-none absolute inset-s-0 top-full isolate z-50 flex justify-center">
+	{#if child}
+		{@render child({ props: mergedProps, open: viewportState.open })}
+	{:else}
+		<div {...mergedProps}>
+			{@render children?.()}
+		</div>
+	{/if}
+</div>

package/src/lib/components/navigation-menu/components/navigation-menu.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { ClassValue } from 'svelte/elements';
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+
+	import type { NavigationMenuRootProps } from '../types.js';
+	import { NavigationMenuRootState } from '../navigation-menu.svelte.js';
+
+	import NavigationMenuViewport from './navigation-menu-viewport.svelte';
+
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		id = createId(uid),
+		ref = $bindable(null),
+		value = $bindable(''),
+		onValueChange = () => {},
+		delayDuration = 200,
+		skipDelayDuration = 300,
+		dir = 'ltr',
+		orientation = 'horizontal',
+		viewport = true,
+		class: className,
+		...restProps
+	}: NavigationMenuRootProps & {
+		viewport?: boolean;
+		class?: ClassValue;
+	} = $props();
+
+	const rootState = NavigationMenuRootState.create({
+		id: boxWith(() => id),
+		value: boxWith(
+			() => value,
+			(v) => {
+				value = v;
+				onValueChange(v);
+			},
+		),
+		delayDuration: boxWith(() => delayDuration),
+		skipDelayDuration: boxWith(() => skipDelayDuration),
+		dir: boxWith(() => dir),
+		orientation: boxWith(() => orientation),
+		ref: boxWith(
+			() => ref,
+			(value) => (ref = value),
+		),
+	});
+
+	const rootClass = $derived(join('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className));
+
+	const mergedProps = $derived(
+		mergeProps(
+			{ 'aria-label': 'main' },
+			restProps,
+			{
+				'data-slot': 'navigation-menu',
+				'data-viewport': viewport,
+				class: rootClass,
+			},
+			rootState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<nav {...mergedProps}>
+		{@render children?.()}
+
+		{#if viewport}
+			<NavigationMenuViewport />
+		{/if}
+	</nav>
+{/if}

package/src/lib/components/navigation-menu/index.ts

@@ -0,0 +1,28 @@
+import Root from './components/navigation-menu.svelte';
+import Content from './components/navigation-menu-content.svelte';
+import Indicator from './components/navigation-menu-indicator.svelte';
+import Item from './components/navigation-menu-item.svelte';
+import Link from './components/navigation-menu-link.svelte';
+import List from './components/navigation-menu-list.svelte';
+import Trigger from './components/navigation-menu-trigger.svelte';
+import Viewport from './components/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,
+};