sheer-ui 0.0.0

package/src/lib/components/link-preview/types.ts

@@ -0,0 +1,102 @@
+import type { Snippet } from 'svelte';
+import type { OpenCell } from '../../internal/open-cell.svelte.js';
+import type { DismissibleLayerProps } from '../../internal/dismissible-layer/types.js';
+import type { EscapeLayerProps } from '../../internal/escape-layer/types.js';
+import type { FloatingLayerContentProps } from '../../internal/floating-layer/types.js';
+import type { PortalProps } from '../../internal/portal/index.js';
+import type { BitsPrimitiveAnchorAttributes, BitsPrimitiveDivAttributes } from '../../internal/attribute-types.js';
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from '../../internal/types.js';
+import type { FloatingContentSnippetProps } from '../../internal/types.js';
+
+export type LinkPreviewRootPropsWithoutHTML = Omit<
+	WithChildren<{
+	/**
+	 * The derivation source for the link preview's open state: the internal cell
+	 * re-derives whenever this prop changes, and interactions override it until
+	 * the next change. Plain value — 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;
+
+	/**
+	 * A callback that will be called when the link preview finishes opening/closing animations.
+	 */
+	onOpenChangeComplete?: OnChangeFn<boolean>;
+
+	/**
+	 * The delay in milliseconds before the preview opens.
+	 *
+	 * @defaultValue 700
+	 */
+	openDelay?: number;
+
+	/**
+	 * The delay in milliseconds before the preview closes.
+	 *
+	 * @defaultValue 300
+	 */
+	closeDelay?: number;
+
+	/**
+	 * When `true`, the preview will be disabled and will not open.
+	 *
+	 * @defaultValue false
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Prevent the preview from opening if the focus did not come using
+	 * the keyboard.
+	 *
+	 * @defaultValue false
+	 */
+	ignoreNonKeyboardFocus?: boolean;
+}>,
+	'children'
+> & {
+	/** Children receive the state cell, typed and guaranteed within the tree. */
+	children?: Snippet<[OpenCell]>;
+};
+
+export type LinkPreviewRootProps = LinkPreviewRootPropsWithoutHTML;
+
+export type LinkPreviewContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<
+	Pick<
+		FloatingLayerContentProps,
+		| 'side'
+		| 'sideOffset'
+		| 'align'
+		| 'alignOffset'
+		| 'avoidCollisions'
+		| 'collisionPadding'
+		| 'arrowPadding'
+		| 'dir'
+		| 'customAnchor'
+	> &
+		Omit<DismissibleLayerProps, 'onInteractOutsideStart'> &
+		EscapeLayerProps & {
+			/**
+			 * When `true`, the link preview content will be forced to mount in the DOM.
+			 *
+			 * Useful for more control over the transition behavior.
+			 */
+			forceMount?: boolean;
+		},
+	FloatingContentSnippetProps
+>;
+
+export type LinkPreviewContentProps = LinkPreviewContentPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, LinkPreviewContentPropsWithoutHTML>;
+
+export type LinkPreviewPortalPropsWithoutHTML = PortalProps;
+export type LinkPreviewPortalProps = LinkPreviewPortalPropsWithoutHTML;
+
+export type LinkPreviewTriggerPropsWithoutHTML = WithChild;
+
+export type LinkPreviewTriggerProps = LinkPreviewTriggerPropsWithoutHTML &
+	Without<BitsPrimitiveAnchorAttributes, LinkPreviewTriggerPropsWithoutHTML>;

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { MenuArrowProps } from '../types.js';
+	import { MenuArrowState } from '../menu.svelte.js';
+	import FloatingLayerArrow from '../../../internal/floating-layer/components/floating-layer-arrow.svelte';
+
+	let { ref = $bindable(null), ...restProps }: MenuArrowProps = $props();
+
+	const arrowState = MenuArrowState.create();
+
+	const mergedProps = $derived(mergeProps(restProps, arrowState.props));
+</script>
+
+<FloatingLayerArrow bind:ref {...mergedProps} />

package/src/lib/components/menu/components/menu-checkbox-group.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { bindableWith, boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { MenuCheckboxGroupProps } from '../types.js';
+	import { MenuCheckboxGroupState } from '../menu.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		children,
+		child,
+		ref = $bindable(null),
+		value = $bindable([]),
+		onValueChange = () => {},
+		...restProps
+	}: MenuCheckboxGroupProps = $props();
+
+	const checkboxGroupState = MenuCheckboxGroupState.create({
+		value: bindableWith(
+			() => $state.snapshot(value),
+			(v) => (value = $state.snapshot(v)),
+			(v) => onValueChange(v),
+		),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		id: boxWith(() => id),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, checkboxGroupState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

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

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { bindableWith, boxWith, repairBindable } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { MenuCheckboxItemProps } from '../types.js';
+	import { MenuCheckboxItemState } from '../menu.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import MinusIcon from '@lucide/svelte/icons/minus';
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		ref = $bindable(null),
+		checked = $bindable(false),
+		id = createId(uid),
+		onCheckedChange = () => {},
+		disabled = false,
+		onSelect = () => {},
+		closeOnSelect = true,
+		indeterminate = $bindable(false),
+		onIndeterminateChange = () => {},
+		value = '',
+		...restProps
+	}: MenuCheckboxItemProps = $props();
+
+	const checkboxItemState = MenuCheckboxItemState.create({
+		checked: bindableWith(
+			() => checked,
+			(v) => (checked = v),
+			(v) => onCheckedChange(v),
+		),
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled),
+		onSelect: boxWith(() => handleSelect),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		closeOnSelect: boxWith(() => closeOnSelect),
+		indeterminate: bindableWith(
+			() => indeterminate,
+			(v) => (indeterminate = v),
+			(v) => onIndeterminateChange(v),
+		),
+		value: boxWith(() => value),
+	});
+
+	repairBindable(checkboxItemState.groupChecked, () => (checked = checkboxItemState.groupChecked() ?? checked));
+
+	function handleSelect(e: Event) {
+		onSelect(e);
+		if (e.defaultPrevented) return;
+		checkboxItemState.toggleChecked();
+	}
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'dropdown-menu-checkbox-item',
+				class:
+					"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+			},
+			restProps,
+			checkboxItemState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ checked, indeterminate, props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		<span class="pointer-events-none absolute inset-s-2 grid size-3.5 place-items-center">
+			{#if indeterminate}
+				<MinusIcon class="size-4" />
+			{:else}
+				<CheckIcon class={join('size-4', !checked && 'text-transparent')} />
+			{/if}
+		</span>
+		{@render children?.({ checked, indeterminate })}
+	</div>
+{/if}

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

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { MenuContentProps } from '../types.js';
+	import { CONTEXT_MENU_TRIGGER_ATTR, MenuContentState } from '../menu.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import PopperLayer from '../../../internal/popper-layer/popper-layer.svelte';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		child,
+		children,
+		ref = $bindable(null),
+		loop = true,
+		isStatic = false,
+		onInteractOutside = () => {},
+		onEscapeKeydown = () => {},
+		onCloseAutoFocus: onCloseAutoFocusProp = () => {},
+		style,
+		...restProps
+	}: MenuContentProps & { isStatic?: boolean } = $props();
+
+	const contentState = MenuContentState.create({
+		id: boxWith(() => id),
+		loop: boxWith(() => loop),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		onCloseAutoFocus: boxWith(() => onCloseAutoFocusProp),
+		// svelte-ignore state_referenced_locally -- fixed per instance, like the Static/floating split it selects
+		isStatic,
+	});
+
+	const isContextMenu = $derived(contentState.parentMenu.root.opts.variant.current === 'context-menu');
+
+	const mergedProps = $derived(mergeProps(restProps, contentState.props));
+
+	function handleInteractOutside(e: PointerEvent) {
+		// a context-menu trigger is the whole right-clickable region, so the engine's
+		// trigger deferral would preventDefault every outside click landing inside it
+		if (!isContextMenu) {
+			contentState.handleInteractOutside(e);
+			if (e.defaultPrevented) return;
+		}
+		onInteractOutside(e);
+		if (e.defaultPrevented) return;
+		// don't close if the interaction is with a submenu content or items
+		if (e.target && e.target instanceof Element) {
+			const subContentSelector = `[${contentState.parentMenu.root.getBitsAttr('sub-content')}]`;
+			if (e.target.closest(subContentSelector)) return;
+		}
+		contentState.parentMenu.onClose();
+	}
+
+	function handleEscapeKeydown(e: KeyboardEvent) {
+		onEscapeKeydown(e);
+		if (e.defaultPrevented) return;
+		contentState.parentMenu.onClose();
+	}
+
+	function isValidEvent(e: PointerEvent) {
+		if (!isContextMenu) return false;
+		if ('button' in e && e.button === 2) {
+			const target = e.target as HTMLElement;
+			if (!target) return false;
+			const isAnotherContextTrigger = target.closest(`[${CONTEXT_MENU_TRIGGER_ATTR}]`) !== contentState.parentMenu.triggerNode;
+			return isAnotherContextTrigger;
+		}
+		return false;
+	}
+</script>
+
+<PopperLayer
+	{...mergedProps}
+	{...contentState.popperProps}
+	ref={contentState.opts.ref}
+	open={contentState.parentMenu.opts.open.current}
+	onInteractOutside={handleInteractOutside}
+	onEscapeKeydown={handleEscapeKeydown}
+	{isValidEvent}
+	{isStatic}
+	{loop}
+	present={contentState.parentMenu.present}
+	{id}>
+	{#snippet popper({ props })}
+		{@const finalProps = mergeProps(props, { style }, { style: contentState.contentStyle })}
+		{#if child}
+			{@render child({ props: finalProps, ...contentState.snippetProps })}
+		{:else}
+			<div {...finalProps}>
+				{@render children?.()}
+			</div>
+		{/if}
+	{/snippet}
+</PopperLayer>

package/src/lib/components/menu/components/menu-group-heading.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { MenuGroupHeadingProps } from '../types.js';
+	import { MenuGroupHeadingState } from '../menu.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		id = createId(uid),
+		inset,
+		...restProps
+	}: MenuGroupHeadingProps & {
+		inset?: boolean;
+	} = $props();
+
+	const groupHeadingState = MenuGroupHeadingState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'dropdown-menu-group-heading',
+				'data-inset': inset,
+				class: 'px-2 py-1.5 text-sm font-semibold data-inset:ps-8',
+			},
+			restProps,
+			groupHeadingState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

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

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

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

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { MenuItemProps } from '../types.js';
+	import { MenuItemState } from '../menu.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		ref = $bindable(null),
+		id = createId(uid),
+		disabled = false,
+		onSelect = () => {},
+		closeOnSelect = true,
+		inset,
+		variant = 'default',
+		...restProps
+	}: MenuItemProps & {
+		inset?: boolean;
+		variant?: 'default' | 'destructive';
+	} = $props();
+
+	const itemState = MenuItemState.create({
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled),
+		onSelect: boxWith(() => onSelect),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		closeOnSelect: boxWith(() => closeOnSelect),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'dropdown-menu-item',
+				'data-inset': inset,
+				'data-variant': variant,
+				class:
+					"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+			},
+			restProps,
+			itemState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/menu/components/menu-radio-group.svelte

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

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

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { MenuRadioItemProps } from '../types.js';
+	import { MenuRadioItemState } from '../menu.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+	import CircleIcon from '@lucide/svelte/icons/circle';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		child,
+		ref = $bindable(null),
+		value,
+		onSelect = () => {},
+		id = createId(uid),
+		disabled = false,
+		closeOnSelect = true,
+		...restProps
+	}: MenuRadioItemProps = $props();
+
+	const radioItemState = MenuRadioItemState.create({
+		value: boxWith(() => value),
+		id: boxWith(() => id),
+		disabled: boxWith(() => disabled),
+		onSelect: boxWith(() => handleSelect),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		closeOnSelect: boxWith(() => closeOnSelect),
+	});
+
+	function handleSelect(e: Event) {
+		onSelect(e);
+		if (e.defaultPrevented) return;
+		radioItemState.selectValue();
+	}
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'dropdown-menu-radio-item',
+				class:
+					"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-md py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+			},
+			restProps,
+			radioItemState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, checked: radioItemState.isChecked })}
+{:else}
+	<div {...mergedProps}>
+		<span class="pointer-events-none absolute inset-s-2 grid size-3.5 place-items-center">
+			{#if radioItemState.isChecked}
+				<CircleIcon class="size-2 fill-current" />
+			{/if}
+		</span>
+		{@render children?.({ checked: radioItemState.isChecked })}
+	</div>
+{/if}

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { MenuSeparatorProps } from '../types.js';
+	import { MenuSeparatorState } from '../menu.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let { ref = $bindable(null), id = createId(uid), child, children, ...restProps }: MenuSeparatorProps = $props();
+
+	const separatorState = MenuSeparatorState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'dropdown-menu-separator',
+				class: 'bg-border -mx-1 my-1 h-px',
+			},
+			restProps,
+			separatorState.props,
+		),
+	);
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { MenuSubContentStaticProps } from '../types.js';
+	import MenuSubContent from './menu-sub-content.svelte';
+
+	let { ref = $bindable(null), ...restProps }: MenuSubContentStaticProps = $props();
+</script>
+
+<MenuSubContent bind:ref {...restProps} isStatic />