sheer-ui 0.0.0

package/src/lib/internal/tools/utils/compose-handlers.ts

@@ -0,0 +1,36 @@
+import { chain } from 'overrule/props';
+
+import type { EventCallback } from './events.js';
+import type { ReadableBox } from '../box.svelte.js';
+
+/**
+ * Composes event handlers into a single function that can be called with an event.
+ * If the previous handler cancels the event using `event.preventDefault()`, the handlers
+ * that follow will not be called. Stays local rather than overrule's
+ * composeEventHandlers because handlers may arrive boxed.
+ */
+export function composeHandlers<E extends Event = Event, T extends Element = Element>(
+	...handlers: Array<EventCallback<E> | ReadableBox<EventCallback<E>> | undefined>
+): (e: E) => void {
+	return function (this: T, e: E) {
+		for (const handler of handlers) {
+			if (!handler) continue;
+			if (e.defaultPrevented) return;
+			if (typeof handler === 'function') {
+				handler.call(this, e);
+			} else {
+				handler.current?.call(this, e);
+			}
+		}
+	};
+}
+
+/**
+ * Merges event handlers into one function that calls all of them with the same event, regardless
+ * of whether an earlier handler called `event.preventDefault()`. Use this instead of
+ * `composeHandlers` when every handler must run unconditionally — e.g. internal bookkeeping that
+ * has to stay correct even if some unrelated code already prevented default on the event.
+ */
+export function mergeHandlers<E extends Event = Event>(...handlers: Array<EventCallback<E> | null | undefined | false>): (e: E) => void {
+	return chain(...handlers.filter((handler): handler is EventCallback<E> => typeof handler === 'function'));
+}

package/src/lib/internal/tools/utils/dom-context.svelte.ts

@@ -0,0 +1,63 @@
+import { boxWith } from '../box.svelte.js';
+import type { Box } from '../types.js';
+
+function getActiveElement(rootNode: Document | ShadowRoot): HTMLElement | null {
+	let activeElement = rootNode.activeElement as HTMLElement | null;
+	while (activeElement?.shadowRoot) {
+		const next = activeElement.shadowRoot.activeElement as HTMLElement | null;
+		if (!next || next === activeElement) break;
+		activeElement = next;
+	}
+	return activeElement;
+}
+
+export class DOMContext {
+	readonly element: Box<HTMLElement | null>;
+	readonly root: Document | ShadowRoot = $derived.by(() => {
+		if (!this.element.current) return document;
+		const rootNode = this.element.current.getRootNode() ?? document;
+		return rootNode as Document | ShadowRoot;
+	});
+
+	constructor(element: Box<HTMLElement | null> | (() => HTMLElement | null)) {
+		if (typeof element === 'function') {
+			this.element = boxWith(element);
+		} else {
+			this.element = element;
+		}
+	}
+
+	getDocument = () => {
+		return this.element.current?.ownerDocument ?? document;
+	};
+
+	getWindow = () => {
+		return this.getDocument().defaultView ?? window;
+	};
+
+	getActiveElement = () => {
+		return getActiveElement(this.root);
+	};
+
+	getElementById<T extends Element = HTMLElement>(id: string) {
+		return this.root.getElementById(id) as T | null;
+	}
+
+	querySelector = (selector: string) => {
+		if (!this.root) return null;
+		return this.root.querySelector(selector);
+	};
+
+	querySelectorAll = (selector: string) => {
+		if (!this.root) return [] as unknown as NodeListOf<Element>;
+		return this.root.querySelectorAll(selector);
+	};
+
+	setTimeout = (callback: () => void, delay: number) => {
+		return this.getWindow().setTimeout(callback, delay);
+	};
+
+	clearTimeout = (timeoutId: number) => {
+		return this.getWindow().clearTimeout(timeoutId);
+	};
+}

package/src/lib/internal/tools/utils/dom.ts

@@ -0,0 +1,62 @@
+import { BROWSER } from 'esm-env';
+
+const ELEMENT_NODE = 1;
+const DOCUMENT_NODE = 9;
+const DOCUMENT_FRAGMENT_NODE = 11;
+
+const isObject = (node: unknown): node is Record<string, unknown> =>
+	typeof node === 'object' && node !== null && !Array.isArray(node);
+const hasNodeType = (node: unknown): node is { nodeType: number } => isObject(node) && typeof node.nodeType === 'number';
+const isNode = (node: unknown): node is Node => hasNodeType(node);
+export const isElement = (node: unknown): node is Element => hasNodeType(node) && node.nodeType === ELEMENT_NODE;
+const isDocument = (node: unknown): node is Document => hasNodeType(node) && node.nodeType === DOCUMENT_NODE;
+const isShadowRoot = (node: unknown): node is ShadowRoot => hasNodeType(node) && node.nodeType === DOCUMENT_FRAGMENT_NODE && 'host' in node;
+
+export const isHTMLElement = (node: unknown): node is HTMLElement =>
+	isElement(node) && node.namespaceURI === 'http://www.w3.org/1999/xhtml';
+
+export const isElementOrSVGElement = (node: unknown): node is Element | SVGElement => isElement(node);
+
+export const isIOS =
+	BROWSER &&
+	!!window.navigator.userAgent &&
+	(/iP(ad|hone|od)/.test(window.navigator.userAgent) ||
+		// iPad Pro Gen3 reports as Macintosh, so fall back to touch-point sniffing.
+		(window.navigator.maxTouchPoints > 2 && /iPad|Macintosh/.test(window.navigator.userAgent)));
+
+/**
+ * Yields `element` and then each of its ancestor elements, innermost first. The walk stays inside
+ * `element`'s own tree — a shadow root ends it rather than continuing through the host.
+ */
+export function* selfAndAncestors(element: Element | null | undefined): Generator<Element> {
+	for (let current = element; current; current = current.parentElement) yield current;
+}
+
+type Target = Node | EventTarget | null | undefined;
+
+export function contains(parent: Target, child: Target) {
+	if (!parent || !child) return false;
+	if (!isNode(parent) || !isNode(child)) return false;
+	if (parent === child) return true;
+	if (parent.contains(child)) return true;
+	// `parent.contains` already covered the same-tree case, so this only has to climb out of shadow
+	// roots via their host — a composed walk, which is why it can't use `selfAndAncestors`.
+	let current: Node | null = child;
+	while (current) {
+		if (current === parent) return true;
+		const root = current.getRootNode?.();
+		if (isShadowRoot(root) && current === root) {
+			current = root.host;
+		} else {
+			current = current.parentNode;
+		}
+	}
+	return false;
+}
+
+export function getWindow(node: Node | ShadowRoot | Document | null | undefined) {
+	if (isShadowRoot(node)) return getWindow(node.host);
+	if (isDocument(node)) return node.defaultView ?? window;
+	if (isNode(node)) return node.ownerDocument?.defaultView ?? window;
+	return window;
+}

package/src/lib/internal/tools/utils/events.ts

@@ -0,0 +1 @@
+export type EventCallback<E extends Event = Event> = (event: E) => void;

package/src/lib/internal/tools/utils/index.ts

@@ -0,0 +1,5 @@
+export { attachRef, mountedAttachment, type RefAttachment, type RefSetter, type WritableRef } from './attach-ref.js';
+export { composeHandlers, mergeHandlers } from './compose-handlers.js';
+export { contains, getWindow, isElement, isElementOrSVGElement, isHTMLElement, isIOS } from './dom.js';
+export { DOMContext } from './dom-context.svelte.js';
+export * from './strings.js';

package/src/lib/internal/tools/utils/strings.ts

@@ -0,0 +1,28 @@
+import { styleToString as serializeStyle } from 'overrule/props';
+
+import type { StyleProperties } from '../types.js';
+
+export const srOnlyStyles: StyleProperties = {
+	position: 'absolute',
+	width: '1px',
+	height: '1px',
+	padding: '0',
+	margin: '-1px',
+	overflow: 'hidden',
+	clip: 'rect(0, 0, 0, 0)',
+	clipPath: 'inset(50%)',
+	whiteSpace: 'nowrap',
+	borderWidth: '0',
+};
+
+// Adapter over overrule's serializer: this one also passes strings through
+// and tolerates null, the shapes floating-layer feeds it.
+export function styleToString(style: string | StyleProperties | null | undefined = {}): string {
+	if (!style) return '';
+	if (typeof style === 'string') return style;
+	return serializeStyle(style as Record<string, string | number | null | undefined>);
+}
+
+// Runs at module load, so it must not sit above `styleToString` (temporal
+// dead zone → ReferenceError during SSR).
+export const srOnlyStylesString = styleToString(srOnlyStyles);

package/src/lib/internal/typeahead.svelte.ts

@@ -0,0 +1,48 @@
+import { boxAutoReset, type WritableBox } from './tools/index.js';
+import { getNextMatch } from './arrays.js';
+
+export const textContentOf = (node: HTMLElement) => node.textContent?.trim() ?? '';
+
+type TypeaheadOpts<T> = {
+	getSearchText: (candidate: T) => string;
+	getCurrentCandidate: () => T | null;
+	onMatch: (candidate: T) => void;
+	getWindow: () => Window & typeof globalThis;
+};
+
+export class Typeahead<T> {
+	readonly #opts: TypeaheadOpts<T>;
+	readonly #search: WritableBox<string>;
+
+	constructor(opts: TypeaheadOpts<T>) {
+		this.#opts = opts;
+		this.#search = boxAutoReset('', {
+			afterMs: 1000,
+			getWindow: opts.getWindow,
+		});
+	}
+
+	get search() {
+		return this.#search.current;
+	}
+
+	handleKey(key: string, candidates: T[]) {
+		if (!candidates.length) return;
+
+		this.#search.current = this.#search.current + key;
+
+		const currentCandidate = this.#opts.getCurrentCandidate();
+		const current = candidates.find((candidate) => candidate === currentCandidate);
+		const currentMatch = current === undefined ? '' : this.#opts.getSearchText(current);
+
+		const values = candidates.map((candidate) => this.#opts.getSearchText(candidate));
+		const nextMatch = getNextMatch(values, this.#search.current, currentMatch);
+		const newCandidate = candidates.find((candidate) => this.#opts.getSearchText(candidate) === nextMatch);
+		if (newCandidate) this.#opts.onMatch(newCandidate);
+		return newCandidate;
+	}
+
+	reset() {
+		this.#search.current = '';
+	}
+}

package/src/lib/internal/types.ts

@@ -0,0 +1,119 @@
+// oxlint-disable no-explicit-any
+import type { Snippet } from 'svelte';
+
+import type { Box, ReadableBoxedValues, WritableBoxedValues, RefAttachment as InternalRefAttachment } from './tools/index.js';
+import type { StyleProperties } from './tools/types.js';
+
+export type OnChangeFn<T> = (value: T) => void;
+
+export type ElementRef = Box<HTMLElement | null>;
+
+export type WithChild<
+	/**
+	 * The props that the component accepts.
+	 */
+	Props extends Record<PropertyKey, unknown> = {},
+	/**
+	 * The props that are passed to the `child` and `children` snippets. The `ElementProps` are
+	 * merged with these props for the `child` snippet.
+	 */
+	SnippetProps extends Record<PropertyKey, unknown> = { _default: never },
+	/**
+	 * The underlying DOM element being rendered. You can bind to this prop to
+	 * programmatically interact with the element.
+	 */
+	Ref = HTMLElement,
+> = Omit<Props, 'child' | 'children'> & {
+	child?: SnippetProps extends { _default: never }
+		? Snippet<[{ props: Record<string, unknown> }]>
+		: Snippet<[SnippetProps & { props: Record<string, unknown> }]>;
+	children?: SnippetProps extends { _default: never } ? Snippet : Snippet<[SnippetProps]>;
+	style?: StyleProperties | string | null | undefined;
+	ref?: Ref | null | undefined;
+};
+
+export type WithChildNoChildrenSnippetProps<
+	/**
+	 * The props that the component accepts.
+	 */
+	Props extends Record<PropertyKey, unknown> = {},
+	/**
+	 * The props that are passed to the `child` and `children` snippets. The `ElementProps` are
+	 * merged with these props for the `child` snippet.
+	 */
+	SnippetProps extends Record<PropertyKey, unknown> = { _default: never },
+	/**
+	 * The underlying DOM element being rendered. You can bind to this prop to
+	 * programmatically interact with the element.
+	 */
+	Ref = HTMLElement,
+> = Omit<Props, 'child' | 'children'> & {
+	child?: SnippetProps extends { _default: never }
+		? Snippet<[{ props: Record<string, unknown> }]>
+		: Snippet<[SnippetProps & { props: Record<string, unknown> }]>;
+	children?: Snippet;
+	style?: StyleProperties | string | null | undefined;
+	ref?: Ref | null | undefined;
+};
+
+export type WithChildren<Props = {}> = Props & {
+	children?: Snippet | undefined;
+};
+
+/**
+ * Constructs a new type by omitting properties from type
+ * 'T' that exist in type 'U'.
+ *
+ * @template T - The base object type from which properties will be omitted.
+ * @template U - The object type whose properties will be omitted from 'T'.
+ * @example
+ * type Result = Without<{ a: number; b: string; }, { b: string; }>;
+ * // Result type will be { a: number; }
+ */
+export type Without<T extends object, U extends object> = Omit<T, keyof U>;
+
+export type Arrayable<T> = T[] | T;
+
+export type Fn = () => void;
+export type AnyFn = (...args: any[]) => any;
+
+export type WithRefOpts<T = {}> = T & ReadableBoxedValues<{ id: string }> & WritableBoxedValues<{ ref: HTMLElement | null }>;
+
+export type BitsEvent<T extends Event = Event, U extends HTMLElement = HTMLElement> = T & {
+	currentTarget: U;
+};
+
+export type BitsPointerEvent<T extends HTMLElement = HTMLElement> = BitsEvent<PointerEvent, T>;
+export type BitsKeyboardEvent<T extends HTMLElement = HTMLElement> = BitsEvent<KeyboardEvent, T>;
+export type BitsMouseEvent<T extends HTMLElement = HTMLElement> = BitsEvent<MouseEvent, T>;
+export type BitsFocusEvent<T extends HTMLElement = HTMLElement> = BitsEvent<FocusEvent, T>;
+export type BitsInputEvent<T extends HTMLElement = HTMLElement> = BitsEvent<InputEvent, T>;
+
+export type RefAttachment<T extends HTMLElement = HTMLElement> = InternalRefAttachment<T>;
+
+export type FloatingContentSnippetProps = {
+	/**
+	 * Whether the content is open or closed.
+	 */
+	open: boolean;
+};
+
+export type StaticContentSnippetProps = FloatingContentSnippetProps;
+
+/**
+ * Accepted for API compatibility on Dialog and Popover content and ignored: every surface is
+ * mounted while closed now (native top layer, or hidden inline with a CSS exit).
+ */
+export type PresenceProps = {
+	forceMount?: boolean;
+};
+
+export type TextSelectionGuardProps = {
+	/**
+	 * Whether to prevent a drag that starts inside the surface from selecting page text behind
+	 * it: the open surface is flagged for the `user-select` guard in ui.css.
+	 *
+	 * @default true
+	 */
+	preventOverflowTextSelection?: boolean;
+};

package/src/lib/internal/utils.ts

@@ -0,0 +1,10 @@
+// Snippet/ref prop helpers used across the styled bits-ui components (the
+// shadcn-svelte convention). The reactive accessor/box types live in
+// `#lib/internal/tools` and `#lib/internal/types` — these are only the surface props.
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };

package/src/lib/internal/vaul/browser.ts

@@ -0,0 +1,8 @@
+// FxiOS is a WebKit shell yet resizes window.innerHeight on keyboard toggle (mozilla-mobile/firefox-ios#17929)
+export const isIOSFirefox = () => /FxiOS/.test(navigator.userAgent);
+
+// On iOS this is every engine except EU alt-engine ports (allowed since iOS 17.4) — Safari, WKWebView shells, FxiOS, CriOS all carry AppleWebKit.
+export const isWebKit = () => /AppleWebKit/.test(navigator.userAgent);
+
+export const needsIOSFixedBodyScrollLock = () =>
+	/iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);

package/src/lib/internal/vaul/constants.ts

@@ -0,0 +1,19 @@
+// Mirrored as --vaul-duration/--vaul-ease in drawer.svelte's stylesheet — keep in sync.
+export const TRANSITIONS = {
+	DURATION: 0.5,
+	EASE: [0.32, 0.72, 0, 1],
+};
+
+export const VELOCITY_THRESHOLD = 0.4;
+
+export const CLOSE_THRESHOLD = 0.25;
+
+export const SCROLL_LOCK_TIMEOUT = 100;
+
+export const BORDER_RADIUS = 8;
+
+export const NESTED_DISPLACEMENT = 16;
+
+export const WINDOW_TOP_OFFSET = 26;
+
+export const DRAG_CLASS = 'vaul-dragging';

package/src/lib/internal/vaul/helpers.ts

@@ -0,0 +1,39 @@
+import type { DrawerDirection } from './types.js';
+
+type StyleValue = string | number | null | undefined;
+type Style = Record<string, StyleValue>;
+
+export const applyStyle = (element: Element | HTMLElement | null | undefined, style: Style) => {
+	if (!(element instanceof HTMLElement)) return;
+
+	for (const [key, value] of Object.entries(style)) {
+		if (value != null) Object.assign(element.style, { [key]: String(value) });
+	}
+};
+
+export const assignStyle = (element: HTMLElement | null | undefined, style: Style) => {
+	if (!element) return () => {};
+
+	const prevStyle = element.style.cssText;
+
+	applyStyle(element, style);
+
+	return () => {
+		element.style.cssText = prevStyle;
+	};
+};
+
+export const isVertical = (direction: DrawerDirection) => direction === 'top' || direction === 'bottom';
+
+export const getTranslate = (element: HTMLElement, direction: DrawerDirection) => {
+	const win = element.ownerDocument.defaultView ?? window;
+	const transform = win.getComputedStyle(element).transform;
+
+	if (transform === 'none') return 0;
+
+	const matrix = new win.DOMMatrixReadOnly(transform);
+
+	return isVertical(direction) ? matrix.m42 : matrix.m41;
+};
+
+export const dampenValue = (value: number) => 8 * (Math.log(value + 1) - 2);

package/src/lib/internal/vaul/types.ts

@@ -0,0 +1,142 @@
+import type { BitsPrimitiveDivAttributes } from "../attribute-types.js";
+import type {
+	DialogContentPropsWithoutHTML,
+	DialogOverlayPropsWithoutHTML,
+	DialogRootProps,
+} from "../../components/dialog/types.js";
+import type { WithChildren, Without } from "../types.js";
+import type { WithoutChildrenOrChild } from "../utils.js";
+
+export type DrawerDirection = "left" | "right" | "top" | "bottom";
+
+export type Getters<T> = {
+	[K in keyof T]: () => T[K];
+};
+
+type WithFadeFromProps = {
+	/**
+	 * Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
+	 * Should go from least visible. Example `[0.2, 0.5, 0.8]`.
+	 * You can also use px values, which doesn't take screen height into account.
+	 */
+	snapPoints: (number | string)[];
+	/**
+	 * Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.
+	 */
+	fadeFromIndex: number;
+};
+
+type WithoutFadeFromProps = {
+	/**
+	 * Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
+	 * Should go from least visible. Example `[0.2, 0.5, 0.8]`.
+	 * You can also use px values, which doesn't take screen height into account.
+	 */
+	snapPoints?: (number | string)[];
+	fadeFromIndex?: never;
+};
+
+type BaseDrawerRootPropsWithoutHTML = WithChildren<{
+	activeSnapPoint?: number | string | null;
+	onActiveSnapPointChange?: (snapPoint: number | string | null) => void;
+	open?: boolean;
+	/**
+	 * Number between 0 and 1 that determines when the drawer should be closed.
+	 * Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
+	 * @default 0.25
+	 */
+	closeThreshold?: number;
+	/**
+	 * When `true` the `body` doesn't get any styles assigned from Vaul
+	 */
+	noBodyStyles?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	shouldScaleBackground?: boolean;
+	/**
+	 * When `false` we don't change body's background color when the drawer is open.
+	 * @default true
+	 */
+	setBackgroundColorOnScale?: boolean;
+	/**
+	 * Duration for which the drawer is not draggable after scrolling content inside of the drawer.
+	 * @default 500ms
+	 */
+	scrollLockTimeout?: number;
+	/**
+	 * When `true`, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open
+	 */
+	fixed?: boolean;
+	/**
+	 * When `true` only allows the drawer to be dragged by the `<Drawer.Handle />` component.
+	 * @default false
+	 */
+	handleOnly?: boolean;
+	/**
+	 * When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer.
+	 * Use this in combination with the `open` prop, otherwise you won't be able to open/close the drawer.
+	 * @default true
+	 */
+	dismissible?: boolean;
+	onDrag?: (event: PointerEvent, percentageDragged: number) => void;
+	onRelease?: (event: PointerEvent, open: boolean) => void;
+	/**
+	 * When `false` it allows to interact with elements outside of the drawer without closing it.
+	 * @default true
+	 */
+	modal?: boolean;
+	nested?: boolean;
+	onClose?: () => void;
+	/**
+	 * Direction of the drawer. Can be `top` or `bottom`, `left`, `right`.
+	 * @default 'bottom'
+	 */
+	direction?: "top" | "bottom" | "left" | "right";
+	/**
+	 * Opened by default, skips initial enter animation. Still reacts to `open` state changes
+	 * @default false
+	 */
+	defaultOpen?: boolean;
+	/**
+	 * When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
+	 * @default false
+	 */
+	disablePreventScroll?: boolean;
+	/**
+	 * When `true` Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way.
+	 * Setting it to `false` will fall back to the default browser behavior.
+	 * @default true when {@link snapPoints} is defined
+	 */
+	repositionInputs?: boolean;
+	/**
+	 * Disabled velocity based swiping for snap points.
+	 * This means that a snap point won't be skipped even if the velocity is high enough.
+	 * Useful if each snap point in a drawer is equally important.
+	 * @default false
+	 */
+	snapToSequentialPoint?: boolean;
+	container?: HTMLElement | null;
+	/**
+	 * Gets triggered after the open or close animation ends, it receives an `open` argument with the `open` state of the drawer by the time the function was triggered.
+	 * Useful to revert any state changes for example.
+	 */
+	onAnimationEnd?: (open: boolean) => void;
+	preventScrollRestoration?: boolean;
+	autoFocus?: boolean;
+}> &
+	(WithFadeFromProps | WithoutFadeFromProps);
+
+export type DrawerRootProps = BaseDrawerRootPropsWithoutHTML &
+	Without<DialogRootProps, BaseDrawerRootPropsWithoutHTML>;
+
+type DrawerContentPropsWithoutHTML = WithChildren<
+	WithoutChildrenOrChild<Omit<DialogContentPropsWithoutHTML, "preventScroll">>
+>;
+
+export type DrawerContentProps = DrawerContentPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, DrawerContentPropsWithoutHTML>;
+
+type DrawerOverlayPropsWithoutHTML = WithChildren<
+	WithoutChildrenOrChild<DialogOverlayPropsWithoutHTML>
+>;
+export type DrawerOverlayProps = DrawerOverlayPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, DrawerOverlayPropsWithoutHTML>;