sheer-ui 0.0.0

package/src/lib/components/drawer/drawer-overlay.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import * as DialogPrimitive from '../dialog/index.js';
+	import { type WithChildren, boxWith, attachRef } from '../../internal/tools/index.js';
+	import { mergeProps } from '../../internal/merge-props.js';
+	import type { WithoutChildrenOrChild } from '../../internal/utils.js';
+	import { createId } from '../../internal/create-id.js';
+	import { getDrawer } from '../../internal/vaul/use-drawer-root.svelte.js';
+	import type { DrawerOverlayProps as OverlayProps } from '../../internal/vaul/types.js';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithChildren<WithoutChildrenOrChild<OverlayProps>> = $props();
+
+	const ctx = getDrawer();
+
+	// The element is rendered by DialogPrimitive.Overlay; the attachment forwards
+	// through to it, capturing the node straight into context on mount and clearing
+	// it on unmount — no id lookup or mounted flag needed.
+	const attachment = attachRef(
+		boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		(node) => ctx.setOverlayNode(node),
+	);
+
+	const hasSnapPoints = $derived(ctx.snapPoints.current && ctx.snapPoints.current.length > 0);
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'drawer-overlay',
+				class: join('fixed inset-0 z-50 bg-black/50 transition-opacity data-closed:opacity-0', className),
+			},
+			restProps,
+			{
+				id,
+				onmouseup: ctx.onRelease,
+				'data-vaul-overlay': '',
+				'data-vaul-snap-points': ctx.open.current && hasSnapPoints ? 'true' : 'false',
+				'data-vaul-snap-points-overlay': ctx.open.current && ctx.shouldFade ? 'true' : 'false',
+				'data-vaul-animate': ctx.shouldAnimate ? 'true' : 'false',
+			},
+			attachment,
+		),
+	);
+</script>
+
+{#if ctx.modal.current}
+	<DialogPrimitive.Overlay {...mergedProps}>
+		{@render children?.()}
+	</DialogPrimitive.Overlay>
+{/if}

package/src/lib/components/drawer/drawer-portal.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { Portal, type PortalProps } from '../dialog/index.js';
+	import { getDrawer } from '../../internal/vaul/use-drawer-root.svelte.js';
+
+	const ctx = getDrawer();
+
+	let { to = ctx.container.current ?? undefined, ...restProps }: PortalProps = $props();
+</script>
+
+<Portal {to} {...restProps} />

package/src/lib/components/drawer/drawer-title.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { Title, type TitleProps } from '../dialog/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: TitleProps = $props();
+</script>
+
+<Title bind:ref data-slot="drawer-title" class={join('text-foreground font-semibold', className)} {...restProps} />

package/src/lib/components/drawer/drawer-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Trigger, type TriggerProps } from '../dialog/index.js';
+
+	let { ref = $bindable(null), ...restProps }: TriggerProps = $props();
+</script>
+
+<Trigger bind:ref data-slot="drawer-trigger" {...restProps} />

package/src/lib/components/drawer/drawer.svelte

@@ -0,0 +1,290 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { DialogRootState, DialogState } from '../dialog/dialog.svelte.js';
+	import { OpenCell } from '../../internal/open-cell.svelte.js';
+	import { boxWith } from '../../internal/tools/index.js';
+	import type { DrawerRootProps as RootProps } from '../../internal/vaul/types.js';
+	import { CLOSE_THRESHOLD, SCROLL_LOCK_TIMEOUT } from '../../internal/vaul/constants.js';
+	import { useDrawerRoot } from '../../internal/vaul/use-drawer-root.svelte.js';
+
+	let {
+		open = false,
+		state: givenCell,
+		_internal_onOpenChange = () => {},
+		onDrag = () => {},
+		onRelease = () => {},
+		snapPoints,
+		shouldScaleBackground = true,
+		setBackgroundColorOnScale = true,
+		closeThreshold = CLOSE_THRESHOLD,
+		scrollLockTimeout = SCROLL_LOCK_TIMEOUT,
+		dismissible = true,
+		handleOnly = false,
+		fadeFromIndex = snapPoints && snapPoints.length - 1,
+		activeSnapPoint = $bindable(snapPoints?.[0] ?? null),
+		onActiveSnapPointChange = () => {},
+		fixed = false,
+		modal = true,
+		onClose = () => {},
+		nested = false,
+		noBodyStyles = false,
+		direction = 'bottom',
+		snapToSequentialPoint = false,
+		preventScrollRestoration = false,
+		repositionInputs = true,
+		onAnimationEnd = () => {},
+		onOpenChangeComplete = () => {},
+		container = null,
+		autoFocus = false,
+		disablePreventScroll = true,
+		...restProps
+	}: Omit<RootProps, 'open' | 'onOpenChange'> & {
+		/**
+		 * The derivation source for the drawer's open state: the internal cell
+		 * re-derives whenever this prop changes, and interactions (drag-dismiss,
+		 * a snippet-cell write) override it until the next change. Not bindable.
+		 */
+		open?: boolean;
+		/**
+		 * A caller-constructed cell (own source and, optionally, a delegate writer)
+		 * used instead of building one from `open`. When given, `open` is ignored.
+		 */
+		state?: OpenCell;
+		/** Machine-level open notification for the nested-drawer wiring — not a consumer API. */
+		_internal_onOpenChange?: (open: boolean) => void;
+	} = $props();
+
+	function handleOpenChangeComplete(o: boolean) {
+		rootState.handleOpenChangeComplete(o);
+		onOpenChangeComplete(o);
+	}
+
+	// Consumer cell over the source prop; vaul's machine keeps its boxed-open input
+	// (vendored, ADR 0006) — the box is a bridge over the cell, so the cell owns the
+	// consumer-facing `open` while the machine still drives dismissal internally.
+	// svelte-ignore state_referenced_locally
+	const cell = givenCell ?? new OpenCell(() => open);
+
+	const rootState = useDrawerRoot({
+		open: boxWith(
+			() => cell.open,
+			(o) => (cell.open = o),
+		),
+		closeThreshold: boxWith(() => closeThreshold),
+		scrollLockTimeout: boxWith(() => scrollLockTimeout),
+		snapPoints: boxWith(() => snapPoints),
+		fadeFromIndex: boxWith(() => fadeFromIndex),
+		nested: boxWith(() => nested),
+		shouldScaleBackground: boxWith(() => shouldScaleBackground),
+		activeSnapPoint: boxWith(
+			() => activeSnapPoint,
+			(v) => {
+				activeSnapPoint = v;
+				onActiveSnapPointChange(v);
+			},
+		),
+		onRelease: boxWith(() => onRelease),
+		onDrag: boxWith(() => onDrag),
+		onClose: boxWith(() => onClose),
+		dismissible: boxWith(() => dismissible),
+		direction: boxWith(() => direction),
+		fixed: boxWith(() => fixed),
+		modal: boxWith(() => modal),
+		handleOnly: boxWith(() => handleOnly),
+		noBodyStyles: boxWith(() => noBodyStyles),
+		preventScrollRestoration: boxWith(() => preventScrollRestoration),
+		setBackgroundColorOnScale: boxWith(() => setBackgroundColorOnScale),
+		repositionInputs: boxWith(() => repositionInputs),
+		autoFocus: boxWith(() => autoFocus),
+		snapToSequentialPoint: boxWith(() => snapToSequentialPoint),
+		container: boxWith(() => container),
+		disablePreventScroll: boxWith(() => disablePreventScroll),
+		onOpenChange: boxWith(() => _internal_onOpenChange),
+		onAnimationEnd: boxWith(() => onAnimationEnd),
+	});
+
+	// The drawer (vendored vaul) is an external state machine that owns `open`;
+	// the dialog cell derives from it. Dialog-initiated closes (a Close button,
+	// the dialog layers) write the cell, and this adapter routes them through
+	// the drawer's own animated close instead of just flipping the signal.
+	// The drawer acts as its own dialog root (the sheet.svelte pattern) so the
+	// cell stays internal — no consumer-facing state surface exists.
+	const dialogCell = new DialogState(() => rootState.open.current);
+	$effect(() => {
+		const o = dialogCell.open;
+		untrack(() => {
+			if (o !== rootState.open.current) rootState.onDialogOpenChange(o);
+		});
+	});
+
+	DialogRootState.create({
+		variant: boxWith(() => 'dialog'),
+		cell: dialogCell,
+		onOpenChangeComplete: boxWith(() => handleOpenChangeComplete),
+	});
+</script>
+
+{@render restProps.children?.()}
+
+<style global>
+	/* Mirrors TRANSITIONS in internal/vaul/constants.ts — keep the two in sync. */
+	:global([data-vaul-drawer]),
+	:global([data-vaul-overlay]) {
+		--vaul-duration: 0.5s;
+		--vaul-ease: cubic-bezier(0.32, 0.72, 0, 1);
+	}
+
+	:global([data-vaul-drawer]) {
+		touch-action: none;
+		will-change: transform;
+		transition: transform var(--vaul-duration) var(--vaul-ease);
+		animation-duration: var(--vaul-duration);
+		animation-timing-function: var(--vaul-ease);
+	}
+
+	:global([data-vaul-overlay]) {
+		transition: opacity var(--vaul-duration) var(--vaul-ease);
+	}
+
+	:global([data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='open']) {
+		animation-name: slideFromBottom;
+	}
+	:global([data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-state='closed']) {
+		animation-name: slideToBottom;
+	}
+
+	:global([data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='top'][data-state='open']) {
+		animation-name: slideFromTop;
+	}
+	:global([data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='top'][data-state='closed']) {
+		animation-name: slideToTop;
+	}
+
+	:global([data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='left'][data-state='open']) {
+		animation-name: slideFromLeft;
+	}
+	:global([data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='left'][data-state='closed']) {
+		animation-name: slideToLeft;
+	}
+
+	:global([data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='right'][data-state='open']) {
+		animation-name: slideFromRight;
+	}
+	:global([data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='right'][data-state='closed']) {
+		animation-name: slideToRight;
+	}
+
+	/* Snap-point drawers exit by transform transition, not keyframes: hold visibility for its length. */
+	:global([data-vaul-drawer][data-vaul-snap-points='true'][data-state='closed']) {
+		transition: transform var(--vaul-duration) var(--vaul-ease), visibility var(--vaul-duration);
+	}
+
+	:global([data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='bottom']) {
+		transform: translate3d(0, var(--initial-transform, 100%), 0);
+	}
+
+	:global([data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='top']) {
+		transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
+	}
+
+	:global([data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='left']) {
+		transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
+	}
+
+	:global([data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='right']) {
+		transform: translate3d(var(--initial-transform, 100%), 0, 0);
+	}
+
+	:global([data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='top']) {
+		transform: translate3d(0, var(--snap-point-height, 0), 0);
+	}
+
+	:global([data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='bottom']) {
+		transform: translate3d(0, var(--snap-point-height, 0), 0);
+	}
+
+	:global([data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='left']) {
+		transform: translate3d(var(--snap-point-height, 0), 0, 0);
+	}
+
+	:global([data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='right']) {
+		transform: translate3d(var(--snap-point-height, 0), 0, 0);
+	}
+
+	:global([data-vaul-overlay][data-vaul-snap-points='false']) {
+		animation-duration: var(--vaul-duration);
+		animation-timing-function: var(--vaul-ease);
+	}
+	:global([data-vaul-overlay][data-vaul-snap-points='false'][data-state='open']) {
+		animation-name: fadeIn;
+	}
+	:global([data-vaul-overlay][data-state='closed']) {
+		animation-name: fadeOut;
+	}
+
+	:global([data-vaul-animate='false']) {
+		animation: none !important;
+	}
+
+	:global([data-vaul-overlay][data-vaul-snap-points='true']) {
+		opacity: 1;
+	}
+
+	:global([data-vaul-drawer].vaul-dragging),
+	:global([data-vaul-overlay].vaul-dragging) {
+		transition: none;
+	}
+
+	:global([data-vaul-drawer]:not([data-vaul-custom-container='true'])::after) {
+		content: '';
+		position: absolute;
+		background: inherit;
+		background-color: inherit;
+	}
+
+	:global([data-vaul-drawer][data-vaul-drawer-direction='top']::after) {
+		top: initial;
+		bottom: 100%;
+		left: 0;
+		right: 0;
+		height: 200%;
+	}
+
+	:global([data-vaul-drawer][data-vaul-drawer-direction='bottom']::after) {
+		top: 100%;
+		bottom: initial;
+		left: 0;
+		right: 0;
+		height: 200%;
+	}
+
+	:global([data-vaul-drawer][data-vaul-drawer-direction='left']::after) {
+		left: initial;
+		right: 100%;
+		top: 0;
+		bottom: 0;
+		width: 200%;
+	}
+
+	:global([data-vaul-drawer][data-vaul-drawer-direction='right']::after) {
+		left: 100%;
+		right: initial;
+		top: 0;
+		bottom: 0;
+		width: 200%;
+	}
+
+	:global([data-vaul-overlay][data-vaul-snap-points='true']:not([data-vaul-snap-points-overlay='true']):not([data-state='closed'])) {
+		opacity: 0;
+	}
+
+	:global([data-vaul-overlay][data-vaul-snap-points-overlay='true']) {
+		opacity: 1;
+	}
+
+	@media (hover: hover) and (pointer: fine) {
+		:global([data-vaul-drawer]) {
+			user-select: none !important;
+		}
+	}
+</style>

package/src/lib/components/drawer/index.ts

@@ -0,0 +1,37 @@
+import Root from './drawer.svelte';
+import Close from './drawer-close.svelte';
+import Content from './drawer-content.svelte';
+import Description from './drawer-description.svelte';
+import Footer from './drawer-footer.svelte';
+import Header from './drawer-header.svelte';
+import NestedRoot from './drawer-nested.svelte';
+import Overlay from './drawer-overlay.svelte';
+import Portal from './drawer-portal.svelte';
+import Title from './drawer-title.svelte';
+import Trigger from './drawer-trigger.svelte';
+
+export {
+	Root,
+	NestedRoot,
+	Content,
+	Description,
+	Overlay,
+	Footer,
+	Header,
+	Title,
+	Trigger,
+	Portal,
+	Close,
+	//
+	Root as Drawer,
+	NestedRoot as DrawerNestedRoot,
+	Content as DrawerContent,
+	Description as DrawerDescription,
+	Overlay as DrawerOverlay,
+	Footer as DrawerFooter,
+	Header as DrawerHeader,
+	Title as DrawerTitle,
+	Trigger as DrawerTrigger,
+	Portal as DrawerPortal,
+	Close as DrawerClose,
+};

package/src/lib/components/dropdown-menu/components/dropdown-menu-content-static.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { DropdownMenuContentStaticProps } from '../types.js';
+	import MenuContent from '../../menu/components/menu-content.svelte';
+	import { getFloatingContentCSSVars } from '../../../internal/floating-layer/index.js';
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuContentStaticProps = $props();
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'dropdown-menu-content',
+				class:
+					'bg-popover text-popover-foreground popup-surface popup-surface-static z-50 min-w-32 origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none',
+				style: getFloatingContentCSSVars('dropdown-menu'),
+			},
+			restProps,
+		),
+	);
+</script>
+
+<MenuContent bind:ref {...mergedProps} isStatic />

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { DropdownMenuContentProps } from '../types.js';
+	import MenuContent from '../../menu/components/menu-content.svelte';
+	import { getFloatingContentCSSVars } from '../../../internal/floating-layer/index.js';
+
+	let { ref = $bindable(null), sideOffset = 4, trapFocus = false, ...restProps }: DropdownMenuContentProps = $props();
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'dropdown-menu-content',
+				class:
+					'bg-popover text-popover-foreground popup-surface z-50 min-w-32 origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none',
+				style: getFloatingContentCSSVars('dropdown-menu'),
+			},
+			restProps,
+		),
+	);
+</script>
+
+<MenuContent bind:ref {...mergedProps} {sideOffset} {trapFocus} />

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

@@ -0,0 +1,39 @@
+export { default as Root } from '../menu/components/menu.svelte';
+export { default as Sub } from '../menu/components/menu-sub.svelte';
+export { default as Item } from '../menu/components/menu-item.svelte';
+export { default as Group } from '../menu/components/menu-group.svelte';
+export { default as GroupHeading } from '../menu/components/menu-group-heading.svelte';
+export { default as Arrow } from '../menu/components/menu-arrow.svelte';
+export { default as Content } from './components/dropdown-menu-content.svelte';
+export { default as ContentStatic } from './components/dropdown-menu-content-static.svelte';
+export { default as Trigger } from '../menu/components/menu-trigger.svelte';
+export { default as RadioItem } from '../menu/components/menu-radio-item.svelte';
+export { default as Separator } from '../menu/components/menu-separator.svelte';
+export { default as RadioGroup } from '../menu/components/menu-radio-group.svelte';
+export { default as SubContent } from '../menu/components/menu-sub-content.svelte';
+export { default as SubContentStatic } from '../menu/components/menu-sub-content-static.svelte';
+export { default as SubTrigger } from '../menu/components/menu-sub-trigger.svelte';
+export { default as CheckboxItem } from '../menu/components/menu-checkbox-item.svelte';
+export { default as Portal } from '../../internal/portal/portal.svelte';
+export { default as CheckboxGroup } from '../menu/components/menu-checkbox-group.svelte';
+
+export type {
+	DropdownMenuArrowProps as ArrowProps,
+	DropdownMenuCheckboxItemProps as CheckboxItemProps,
+	DropdownMenuContentProps as ContentProps,
+	DropdownMenuContentStaticProps as ContentStaticProps,
+	DropdownMenuGroupProps as GroupProps,
+	DropdownMenuItemProps as ItemProps,
+	DropdownMenuGroupHeadingProps as GroupHeadingProps,
+	DropdownMenuRootProps as RootProps,
+	DropdownMenuRadioGroupProps as RadioGroupProps,
+	DropdownMenuRadioItemProps as RadioItemProps,
+	DropdownMenuSeparatorProps as SeparatorProps,
+	DropdownMenuSubContentProps as SubContentProps,
+	DropdownMenuSubContentStaticProps as SubContentStaticProps,
+	DropdownMenuSubProps as SubProps,
+	DropdownMenuSubTriggerProps as SubTriggerProps,
+	DropdownMenuTriggerProps as TriggerProps,
+	DropdownMenuPortalProps as PortalProps,
+	DropdownMenuCheckboxGroupProps as CheckboxGroupProps,
+} from './types.js';

package/src/lib/components/dropdown-menu/types.ts

@@ -0,0 +1,41 @@
+export type {
+	MenuArrowProps as DropdownMenuArrowProps,
+	MenuCheckboxItemProps as DropdownMenuCheckboxItemProps,
+	MenuContentProps as DropdownMenuContentProps,
+	MenuContentStaticProps as DropdownMenuContentStaticProps,
+	MenuGroupProps as DropdownMenuGroupProps,
+	MenuItemProps as DropdownMenuItemProps,
+	MenuGroupHeadingProps as DropdownMenuGroupHeadingProps,
+	MenuRootProps as DropdownMenuRootProps,
+	MenuRadioGroupProps as DropdownMenuRadioGroupProps,
+	MenuRadioItemProps as DropdownMenuRadioItemProps,
+	MenuSeparatorProps as DropdownMenuSeparatorProps,
+	MenuSubContentProps as DropdownMenuSubContentProps,
+	MenuSubContentStaticProps as DropdownMenuSubContentStaticProps,
+	MenuSubProps as DropdownMenuSubProps,
+	MenuSubTriggerProps as DropdownMenuSubTriggerProps,
+	MenuTriggerProps as DropdownMenuTriggerProps,
+	MenuPortalProps as DropdownMenuPortalProps,
+	MenuCheckboxGroupProps as DropdownMenuCheckboxGroupProps,
+} from "../menu/types.js";
+
+export type {
+	MenuRootPropsWithoutHTML as DropdownMenuRootPropsWithoutHTML,
+	MenuArrowPropsWithoutHTML as DropdownMenuArrowPropsWithoutHTML,
+	MenuCheckboxItemPropsWithoutHTML as DropdownMenuCheckboxItemPropsWithoutHTML,
+	MenuContentPropsWithoutHTML as DropdownMenuContentPropsWithoutHTML,
+	MenuContentStaticPropsWithoutHTML as DropdownMenuContentStaticPropsWithoutHTML,
+	MenuGroupPropsWithoutHTML as DropdownMenuGroupPropsWithoutHTML,
+	MenuItemPropsWithoutHTML as DropdownMenuItemPropsWithoutHTML,
+	MenuGroupHeadingPropsWithoutHTML as DropdownMenuGroupHeadingPropsWithoutHTML,
+	MenuRadioGroupPropsWithoutHTML as DropdownMenuRadioGroupPropsWithoutHTML,
+	MenuRadioItemPropsWithoutHTML as DropdownMenuRadioItemPropsWithoutHTML,
+	MenuSeparatorPropsWithoutHTML as DropdownMenuSeparatorPropsWithoutHTML,
+	MenuSubPropsWithoutHTML as DropdownMenuSubPropsWithoutHTML,
+	MenuSubTriggerPropsWithoutHTML as DropdownMenuSubTriggerPropsWithoutHTML,
+	MenuSubContentPropsWithoutHTML as DropdownMenuSubContentPropsWithoutHTML,
+	MenuSubContentStaticPropsWithoutHTML as DropdownMenuSubContentStaticPropsWithoutHTML,
+	MenuTriggerPropsWithoutHTML as DropdownMenuTriggerPropsWithoutHTML,
+	MenuPortalPropsWithoutHTML as DropdownMenuPortalPropsWithoutHTML,
+	MenuCheckboxGroupPropsWithoutHTML as DropdownMenuCheckboxGroupPropsWithoutHTML,
+} from "../menu/types.js";

package/src/lib/components/empty/empty-content.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-content"
+	class={join('flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance', className)}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/empty/empty-description.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-description"
+	class={join('text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4', className)}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/empty/empty-header.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-header"
+	class={join('flex max-w-sm flex-col items-center gap-2 text-center', className)}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/empty/empty-media.svelte

@@ -0,0 +1,21 @@
+<script lang="ts" module>
+	import { emptyMediaVariants, type EmptyMediaVariant } from './variants';
+	export { emptyMediaVariants, type EmptyMediaVariant };
+</script>
+
+<script lang="ts">
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = 'default',
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: EmptyMediaVariant } = $props();
+</script>
+
+<div bind:this={ref} data-slot="empty-icon" data-variant={variant} class={emptyMediaVariants({ variant, class: className })} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/empty/empty-title.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="empty-title" class={join('text-lg font-medium tracking-tight', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/empty/empty.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty"
+	class={join(
+		'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
+		className,
+	)}
+	{...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/empty/index.ts

@@ -0,0 +1,22 @@
+import Root from './empty.svelte';
+import Header from './empty-header.svelte';
+import Media from './empty-media.svelte';
+import Title from './empty-title.svelte';
+import Description from './empty-description.svelte';
+import Content from './empty-content.svelte';
+
+export {
+	Root,
+	Header,
+	Media,
+	Title,
+	Description,
+	Content,
+	//
+	Root as Empty,
+	Header as EmptyHeader,
+	Media as EmptyMedia,
+	Title as EmptyTitle,
+	Description as EmptyDescription,
+	Content as EmptyContent,
+};