sheer-ui 0.0.0

package/src/lib/components/popover/popover.svelte.ts

@@ -0,0 +1,392 @@
+import { createContext, untrack } from 'svelte';
+import {
+	type ReadableBox,
+	type ReadableBoxedValues,
+	type WritableBoxedValues,
+	attachRef,
+	boxWith,
+} from '../../internal/tools/index.js';
+import { kbd } from '../../internal/kbd.js';
+import { createBitsAttrs, boolToStr, getDataOpenClosed } from '../../internal/attrs.js';
+import type {
+	BitsFocusEvent,
+	BitsKeyboardEvent,
+	BitsMouseEvent,
+	BitsPointerEvent,
+	OnChangeFn,
+	RefAttachment,
+	WithRefOpts,
+} from '../../internal/types.js';
+import { isElement } from '../../internal/tools/utils/dom.js';
+import type { Measurable } from '../../internal/floating-layer/index.js';
+import { SafePolygon } from '../../internal/safe-polygon.svelte.js';
+import { isTabbable } from '../../internal/tabbable.js';
+import { createEffectTimeout } from '../../internal/timeout-fn.svelte.js';
+
+const popoverAttrs = createBitsAttrs({
+	component: 'popover',
+	parts: ['root', 'trigger', 'content', 'close'],
+});
+
+const [getPopoverRoot, setPopoverRoot] = createContext<PopoverRootState>();
+
+interface PopoverRootStateOpts
+	extends
+		WritableBoxedValues<{
+			open: boolean;
+		}>,
+		ReadableBoxedValues<{
+			onOpenChangeComplete: OnChangeFn<boolean>;
+		}> {}
+
+export class PopoverRootState {
+	static create(opts: PopoverRootStateOpts) {
+		return setPopoverRoot(new PopoverRootState(opts));
+	}
+
+	readonly opts: PopoverRootStateOpts;
+	contentNode = $state<HTMLElement | null>(null);
+	triggerNode = $state<HTMLElement | null>(null);
+
+	// hover tracking state
+	openedViaHover = $state(false);
+	hasInteractedWithContent = $state(false);
+	hoverCooldown = $state(false);
+	#closeDelaySource = $state<ReadableBox<number>>(boxWith(() => 0));
+	closeDelay = $derived.by(() => this.#closeDelaySource.current);
+	#closeTimer = createEffectTimeout(() => {
+		if (this.openedViaHover && !this.hasInteractedWithContent) {
+			this.opts.open.current = false;
+		}
+	}, () => this.closeDelay);
+
+	constructor(opts: PopoverRootStateOpts) {
+		this.opts = opts;
+
+		$effect(() => {
+			const isOpen = this.opts.open.current;
+			untrack(() => {
+				if (!isOpen) {
+					this.openedViaHover = false;
+					this.hasInteractedWithContent = false;
+					this.#closeTimer.stop();
+				}
+			});
+		});
+	}
+
+	setCloseDelaySource(source: ReadableBox<number>) {
+		this.#closeDelaySource = source;
+	}
+
+	toggleOpen() {
+		this.#closeTimer.stop();
+		this.opts.open.current = !this.opts.open.current;
+	}
+
+	handleClose() {
+		this.#closeTimer.stop();
+		if (!this.opts.open.current) return;
+		this.opts.open.current = false;
+	}
+
+	handleHoverOpen() {
+		this.#closeTimer.stop();
+		if (this.opts.open.current) return;
+		this.openedViaHover = true;
+		this.opts.open.current = true;
+	}
+
+	handleHoverClose() {
+		if (!this.opts.open.current) return;
+		// only close if opened via hover and user hasn't interacted with content
+		if (this.openedViaHover && !this.hasInteractedWithContent) {
+			this.opts.open.current = false;
+		}
+	}
+
+	handleDelayedHoverClose() {
+		if (!this.opts.open.current) return;
+		if (!this.openedViaHover || this.hasInteractedWithContent) return;
+
+		if (this.closeDelay <= 0) {
+			this.#closeTimer.stop();
+			this.opts.open.current = false;
+			return;
+		}
+
+		this.#closeTimer.start();
+	}
+
+	cancelDelayedClose() {
+		this.#closeTimer.stop();
+	}
+
+	markInteraction() {
+		this.hasInteractedWithContent = true;
+		this.#closeTimer.stop();
+	}
+}
+
+interface PopoverTriggerStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			disabled: boolean;
+			openOnHover: boolean;
+			openDelay: number;
+			closeDelay: number;
+		}> {}
+
+export class PopoverTriggerState {
+	static create(opts: PopoverTriggerStateOpts) {
+		return new PopoverTriggerState(opts, getPopoverRoot());
+	}
+
+	readonly opts: PopoverTriggerStateOpts;
+	readonly root: PopoverRootState;
+	readonly attachment: RefAttachment;
+
+	#openTimer = createEffectTimeout(() => this.root.handleHoverOpen(), () => this.opts.openDelay.current);
+	#isHovering = $state(false);
+	#wasOpenOnPointerDown = false;
+
+	constructor(opts: PopoverTriggerStateOpts, root: PopoverRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(this.opts.ref, (v) => (this.root.triggerNode = v));
+
+		this.onclick = this.onclick.bind(this);
+		this.onkeydown = this.onkeydown.bind(this);
+		this.onpointerdown = this.onpointerdown.bind(this);
+		this.onpointerenter = this.onpointerenter.bind(this);
+		this.onpointerleave = this.onpointerleave.bind(this);
+
+		this.root.setCloseDelaySource(this.opts.closeDelay);
+	}
+
+	onpointerenter(e: BitsPointerEvent) {
+		if (this.opts.disabled.current) return;
+		if (!this.opts.openOnHover.current) return;
+		if (e.pointerType === 'touch') return;
+
+		this.#isHovering = true;
+		this.root.cancelDelayedClose();
+
+		if (this.root.opts.open.current || this.root.hoverCooldown) return;
+
+		if (this.opts.openDelay.current <= 0) {
+			this.root.handleHoverOpen();
+			return;
+		}
+
+		this.#openTimer.start();
+	}
+
+	onpointerleave(e: BitsPointerEvent) {
+		if (this.opts.disabled.current) return;
+		if (!this.opts.openOnHover.current) return;
+		if (e.pointerType === 'touch') return;
+
+		this.#isHovering = false;
+		this.#openTimer.stop();
+		this.root.hoverCooldown = false;
+
+		// let GraceArea handle the close - it will call handleHoverClose via onPointerExit
+		// we just need to stop any pending open timer
+	}
+
+	onpointerdown(_: BitsPointerEvent) {
+		this.#wasOpenOnPointerDown = this.root.opts.open.current;
+	}
+
+	onclick(e: BitsMouseEvent) {
+		if (this.opts.disabled.current) return;
+		if (e.button !== 0) return;
+
+		this.#openTimer.stop();
+
+		// On engines without showPopover({source})'s invoker exemption, the UA light-dismisses the auto
+		// popover at pointerdown — before this click — and the toggle below would instantly reopen it.
+		if (this.#wasOpenOnPointerDown && !this.root.opts.open.current) {
+			this.#wasOpenOnPointerDown = false;
+			return;
+		}
+
+		// if clicked while hovering and popover is open, convert to click-based open
+		if (this.#isHovering && this.root.opts.open.current && this.root.openedViaHover) {
+			this.root.openedViaHover = false;
+			this.root.hasInteractedWithContent = true;
+			return;
+		}
+
+		// if closing while hovering with openOnHover enabled, set cooldown to prevent
+		// immediate re-open via hover
+		if (this.#isHovering && this.opts.openOnHover.current && this.root.opts.open.current) {
+			this.root.hoverCooldown = true;
+		}
+
+		// if clicking to open while in cooldown, reset cooldown (explicit open)
+		if (this.root.hoverCooldown && !this.root.opts.open.current) {
+			this.root.hoverCooldown = false;
+		}
+
+		this.root.toggleOpen();
+	}
+
+	onkeydown(e: BitsKeyboardEvent) {
+		if (this.opts.disabled.current) return;
+		if (!(e.key === kbd.ENTER || e.key === kbd.SPACE)) return;
+		e.preventDefault();
+		this.#openTimer.stop();
+		this.root.toggleOpen();
+	}
+
+	#getAriaControls(): string | undefined {
+		if (this.root.opts.open.current && this.root.contentNode?.id) {
+			return this.root.contentNode?.id;
+		}
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				'aria-haspopup': 'dialog',
+				'aria-expanded': boolToStr(this.root.opts.open.current),
+				'data-state': getDataOpenClosed(this.root.opts.open.current),
+				'aria-controls': this.#getAriaControls(),
+				[popoverAttrs.trigger]: '',
+				disabled: this.opts.disabled.current,
+				//
+				onkeydown: this.onkeydown,
+				onclick: this.onclick,
+				onpointerdown: this.onpointerdown,
+				onpointerenter: this.onpointerenter,
+				onpointerleave: this.onpointerleave,
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface PopoverContentStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			customAnchor: string | HTMLElement | null | Measurable;
+		}> {}
+
+export class PopoverContentState {
+	static create(opts: PopoverContentStateOpts) {
+		return new PopoverContentState(opts, getPopoverRoot());
+	}
+
+	readonly opts: PopoverContentStateOpts;
+	readonly root: PopoverRootState;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: PopoverContentStateOpts, root: PopoverRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
+
+		this.onpointerdown = this.onpointerdown.bind(this);
+		this.onfocusin = this.onfocusin.bind(this);
+		this.onpointerenter = this.onpointerenter.bind(this);
+		this.onpointerleave = this.onpointerleave.bind(this);
+
+		new SafePolygon({
+			triggerNode: () => this.root.triggerNode,
+			contentNode: () => this.root.contentNode,
+			enabled: () => this.root.opts.open.current && this.root.openedViaHover && !this.root.hasInteractedWithContent,
+			onPointerExit: () => {
+				this.root.handleDelayedHoverClose();
+			},
+		});
+	}
+
+	onpointerdown(_: BitsPointerEvent) {
+		this.root.markInteraction();
+	}
+
+	onfocusin(e: BitsFocusEvent) {
+		const target = e.target;
+		if (isElement(target) && isTabbable(target)) {
+			this.root.markInteraction();
+		}
+	}
+
+	onpointerenter(e: BitsPointerEvent) {
+		if (e.pointerType === 'touch') return;
+		this.root.cancelDelayedClose();
+	}
+
+	onpointerleave(e: BitsPointerEvent) {
+		if (e.pointerType === 'touch') return;
+		// handled by grace area
+	}
+
+	// The UA owns dismissal (`popover="auto"` light dismiss + Escape); this is how state follows.
+	dismiss = () => {
+		this.root.handleClose();
+	};
+
+	readonly snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				tabindex: -1,
+				'data-state': getDataOpenClosed(this.root.opts.open.current),
+				[popoverAttrs.content]: '',
+				onpointerdown: this.onpointerdown,
+				onfocusin: this.onfocusin,
+				onpointerenter: this.onpointerenter,
+				onpointerleave: this.onpointerleave,
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface PopoverCloseStateOpts extends WithRefOpts {}
+
+export class PopoverCloseState {
+	static create(opts: PopoverCloseStateOpts) {
+		return new PopoverCloseState(opts, getPopoverRoot());
+	}
+
+	readonly opts: PopoverCloseStateOpts;
+	readonly root: PopoverRootState;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: PopoverCloseStateOpts, root: PopoverRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(this.opts.ref);
+		this.onclick = this.onclick.bind(this);
+		this.onkeydown = this.onkeydown.bind(this);
+	}
+
+	onclick(_: BitsPointerEvent) {
+		this.root.handleClose();
+	}
+
+	onkeydown(e: BitsKeyboardEvent) {
+		if (!(e.key === kbd.ENTER || e.key === kbd.SPACE)) return;
+		e.preventDefault();
+		this.root.handleClose();
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				onclick: this.onclick,
+				onkeydown: this.onkeydown,
+				type: 'button',
+				[popoverAttrs.close]: '',
+				...this.attachment,
+			}) as const,
+	);
+}

package/src/lib/components/popover/types.ts

@@ -0,0 +1,92 @@
+import type { EscapeLayerProps } from '../../internal/escape-layer/types.js';
+import type { DismissibleLayerProps } from '../../internal/dismissible-layer/types.js';
+import type { FloatingLayerContentProps } from '../../internal/floating-layer/types.js';
+import type { TextSelectionGuardProps } from '../../internal/types.js';
+import type { PresenceProps } from '../../internal/types.js';
+import type { FocusScopeProps } from '../../internal/focus-scope/types.js';
+import type { ScrollLockProps } from '../../internal/body-scroll-lock.svelte.js';
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from '../../internal/types.js';
+import type { Snippet } from 'svelte';
+import type { OpenCell } from '../../internal/open-cell.svelte.js';
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from '../../internal/attribute-types.js';
+import type { FloatingContentSnippetProps } from '../../internal/types.js';
+import type { PortalProps } from '../../internal/portal/index.js';
+
+/**
+ * Content prop surface, composed from the same layer building blocks the (now-removed) Floating-UI
+ * `PopperLayer` aggregated. The component no longer renders any Floating-UI layer — positioning is
+ * native CSS `anchor()` — but the prop names are preserved so existing consumers keep type-checking;
+ * the Floating-UI-only positioning props are simply ignored at runtime.
+ */
+type PopoverFloatingProps = EscapeLayerProps &
+	Omit<DismissibleLayerProps, 'onInteractOutsideStart'> &
+	FloatingLayerContentProps &
+	PresenceProps &
+	TextSelectionGuardProps &
+	FocusScopeProps &
+	Omit<ScrollLockProps, 'restoreScrollDelay'>;
+
+export type PopoverRootPropsWithoutHTML = {
+	/**
+	 * The derivation source for the popover's open state: the internal cell
+	 * re-derives whenever this prop changes, and interactions (trigger, Escape,
+	 * a snippet-cell write) override it until the next change. Reconcile
+	 * dismissals via onOpenChangeComplete. Plain value — not bindable.
+	 */
+	open?: boolean;
+
+	/**
+	 * A callback that is called when the popover's open state changes and the animation is complete.
+	 * This is an occurrence (animation settled), not a state mirror — depend on the cell instead.
+	 */
+	onOpenChangeComplete?: OnChangeFn<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;
+
+	/** Children receive the state cell, typed and guaranteed within the tree. */
+	children?: Snippet<[OpenCell]>;
+};
+
+export type PopoverRootProps = PopoverRootPropsWithoutHTML;
+
+export type PopoverContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<
+	Omit<PopoverFloatingProps, 'content' | 'loop'>,
+	FloatingContentSnippetProps
+>;
+
+export type PopoverContentProps = PopoverContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, PopoverContentPropsWithoutHTML>;
+
+export type PopoverTriggerPropsWithoutHTML = WithChild<{
+	/**
+	 * Whether the popover should open when the trigger is hovered.
+	 * @default false
+	 */
+	openOnHover?: boolean;
+
+	/**
+	 * How long to wait before opening the popover on hover (ms).
+	 * Only applies when `openOnHover` is `true`.
+	 * @default 700
+	 */
+	openDelay?: number;
+
+	/**
+	 * How long to wait before closing the popover after hover ends (ms).
+	 * Only applies when `openOnHover` is `true`.
+	 * @default 300
+	 */
+	closeDelay?: number;
+}>;
+
+export type PopoverTriggerProps = PopoverTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PopoverTriggerPropsWithoutHTML>;
+
+export type PopoverClosePropsWithoutHTML = WithChild;
+
+export type PopoverCloseProps = PopoverClosePropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, PopoverClosePropsWithoutHTML>;
+
+export type PopoverPortalPropsWithoutHTML = PortalProps;
+export type PopoverPortalProps = PortalProps;

package/src/lib/components/progress/components/progress.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { boxWith } from '../../../internal/tools/index.js';
+	import { mergeProps } from '../../../internal/merge-props.js';
+	import type { ProgressRootProps } from '../types.js';
+	import { getProgressPercent, ProgressRootState } from '../progress.svelte.js';
+	import { createId } from '../../../internal/create-id.js';
+
+	const uid = $props.id();
+
+	let {
+		child,
+		children,
+		value = 0,
+		max = 100,
+		min = 0,
+		id = createId(uid),
+		ref = $bindable(null),
+		...restProps
+	}: ProgressRootProps = $props();
+
+	const rootState = ProgressRootState.create({
+		value: boxWith(() => value),
+		max: boxWith(() => max),
+		min: boxWith(() => min),
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+	});
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'progress',
+				class: 'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+			},
+			restProps,
+			rootState.props,
+		),
+	);
+	const percent = $derived(getProgressPercent(value, min, max));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		<div
+			data-slot="progress-indicator"
+			class="bg-primary h-full w-full flex-1 transition-all"
+			style="transform: translateX(-{100 - (percent ?? 0)}%)">
+		</div>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/components/progress/exports.ts

@@ -0,0 +1,3 @@
+export { default as Root } from './components/progress.svelte';
+
+export type { ProgressRootProps as RootProps } from './types.js';

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

@@ -0,0 +1,2 @@
+export * as Progress from "./exports.js";
+export * from "./exports.js";

package/src/lib/components/progress/progress.svelte.ts

@@ -0,0 +1,58 @@
+import { attachRef, type ReadableBoxedValues } from '../../internal/tools/index.js';
+import { createBitsAttrs } from '../../internal/attrs.js';
+import type { RefAttachment, WithRefOpts } from '../../internal/types.js';
+
+const progressAttrs = createBitsAttrs({
+	component: 'progress',
+	parts: ['root'],
+});
+
+export function getProgressPercent(value: number | null, min: number, max: number): number | null {
+	if (value === null) return null;
+	const range = max - min;
+	if (!Number.isFinite(value) || !Number.isFinite(min) || !Number.isFinite(max) || range <= 0) return 0;
+	return Math.min(100, Math.max(0, ((value - min) / range) * 100));
+}
+
+interface ProgressRootStateOpts
+	extends
+		WithRefOpts,
+		ReadableBoxedValues<{
+			value: number | null;
+			max: number;
+			min: number;
+		}> {}
+
+export class ProgressRootState {
+	static create(opts: ProgressRootStateOpts) {
+		return new ProgressRootState(opts);
+	}
+
+	readonly opts: ProgressRootStateOpts;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: ProgressRootStateOpts) {
+		this.opts = opts;
+		this.attachment = attachRef(this.opts.ref);
+	}
+
+	readonly props = $derived.by(() => {
+		const value = this.opts.value.current;
+		const percent = getProgressPercent(value, this.opts.min.current, this.opts.max.current);
+		const isIndeterminate = value === null;
+		return {
+			role: 'progressbar',
+			value,
+			'aria-valuemin': this.opts.min.current,
+			'aria-valuemax': this.opts.max.current,
+			'aria-valuenow': isIndeterminate ? undefined : value,
+			'data-value': isIndeterminate ? undefined : value,
+			'data-state': value === null ? 'indeterminate' : percent === 100 ? 'loaded' : 'loading',
+			'data-max': this.opts.max.current,
+			'data-min': this.opts.min.current,
+			'data-indeterminate': isIndeterminate ? '' : undefined,
+			[progressAttrs.root]: '',
+			...this.attachment,
+		} as const;
+	});
+}

package/src/lib/components/progress/types.ts

@@ -0,0 +1,28 @@
+import type { WithChild, Without } from '../../internal/types.js';
+import type { BitsPrimitiveDivAttributes } from '../../internal/attribute-types.js';
+
+export type ProgressRootPropsWithoutHTML = WithChild<{
+	/**
+	 * The current value of the progress bar.
+	 * If `null`, the progress bar will be in an indeterminate state.
+	 *
+	 * @default 0
+	 */
+	value?: number | null;
+
+	/**
+	 * The maximum value of the progress bar.
+	 *
+	 * @default 100
+	 */
+	max?: number;
+
+	/**
+	 * The minimum value of the progress bar.
+	 *
+	 * @default 0
+	 */
+	min?: number;
+}>;
+
+export type ProgressRootProps = ProgressRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ProgressRootPropsWithoutHTML>;

package/src/lib/components/radio-group/context.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'svelte';
+
+export type RadioGroupContext = {
+	/** Shared <input> name; native radios group by name (roving focus + single selection). */
+	readonly name: string;
+	readonly value: string;
+	readonly disabled: boolean;
+	readonly readonly: boolean;
+	readonly required: boolean;
+	select: (value: string) => void;
+};
+
+export const [getRadioGroupContext, setRadioGroupContext] = createContext<RadioGroupContext>();

package/src/lib/components/radio-group/index.ts

@@ -0,0 +1,10 @@
+import Root from './radio-group.svelte';
+import Item from './radio-group-item.svelte';
+
+export type { RadioGroupProps } from './radio-group.svelte';
+export type { RadioGroupItemProps } from './radio-group-item.svelte';
+
+export {
+	Root,
+	Item,
+};