sheer-ui 0.4.0 → 0.4.2

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

@@ -1,10 +1,10 @@
 import { createContext } from 'svelte';
-import { attachRef, type ReadableBoxedValues, type WritableBoxedValues } from '../../internal/tools/index.js';
+import { attachRef } from '../../internal/tools/index.js';
 import type { Page, PageItem } from './types.js';
-import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, RefOpts } from '../../internal/types.js';
 import { createBitsAttrs } from '../../internal/attrs.js';
 import { kbd } from '../../internal/kbd.js';
-import { RovingFocusGroup } from '../../internal/roving-focus-group.js';
+import { RovingFocusGroup } from '../../internal/roving-focus-group.svelte.js';
 import { type Orientation } from '../../internal/index.js';
 
 const paginationAttrs = createBitsAttrs({
@@ -14,19 +14,14 @@ const paginationAttrs = createBitsAttrs({
 
 const [getPaginationRoot, setPaginationRoot] = createContext<PaginationRootState>();
 
-interface PaginationRootStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			count: number;
-			perPage: number;
-			siblingCount: number;
-			orientation: Orientation;
-			loop: boolean;
-		}>,
-		WritableBoxedValues<{
-			page: number;
-		}> {}
+interface PaginationRootStateOpts extends RefOpts {
+	readonly count: number;
+	readonly perPage: number;
+	readonly siblingCount: number;
+	readonly orientation: Orientation;
+	readonly loop: boolean;
+	page: number;
+}
 
 export class PaginationRootState {
 	static create(opts: PaginationRootStateOpts) {
@@ -35,73 +30,66 @@ export class PaginationRootState {
 	readonly opts: PaginationRootStateOpts;
 	readonly attachment: RefAttachment;
 	readonly totalPages = $derived.by(() => {
-		if (this.opts.count.current === 0) return 1;
-		return Math.ceil(this.opts.count.current / this.opts.perPage.current);
+		if (this.opts.count === 0) return 1;
+		return Math.ceil(this.opts.count / this.opts.perPage);
 	});
 	readonly range = $derived.by(() => {
-		const start = (this.opts.page.current - 1) * this.opts.perPage.current;
-		const end = Math.min(start + this.opts.perPage.current, this.opts.count.current);
+		const start = (this.opts.page - 1) * this.opts.perPage;
+		const end = Math.min(start + this.opts.perPage, this.opts.count);
 		return { start: start + 1, end };
 	});
 	readonly pages = $derived.by(() =>
 		getPageItems({
-			page: this.opts.page.current,
+			page: this.opts.page,
 			totalPages: this.totalPages,
-			siblingCount: this.opts.siblingCount.current,
+			siblingCount: this.opts.siblingCount,
 		}),
 	);
-	readonly hasPrevPage = $derived.by(() => this.opts.page.current > 1);
-	readonly hasNextPage = $derived.by(() => this.opts.page.current < this.totalPages);
+	readonly hasPrevPage = $derived.by(() => this.opts.page > 1);
+	readonly hasNextPage = $derived.by(() => this.opts.page < this.totalPages);
 
 	readonly rovingFocusGroup: RovingFocusGroup;
 
 	constructor(opts: PaginationRootStateOpts) {
 		this.opts = opts;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 		this.rovingFocusGroup = new RovingFocusGroup({
 			candidateSelector: [paginationAttrs.selector('prev'), paginationAttrs.selector('page'), paginationAttrs.selector('next')].join(', '),
-			rootNode: this.opts.ref,
-			loop: this.opts.loop,
-			orientation: this.opts.orientation,
+			rootNode: () => opts.ref,
+			loop: () => opts.loop,
+			orientation: () => opts.orientation,
 		});
 	}
 
-	setPage(page: number) {
-		this.opts.page.current = page;
-	}
-
 	prevPage() {
-		this.opts.page.current = Math.max(this.opts.page.current - 1, 1);
+		this.opts.page = Math.max(this.opts.page - 1, 1);
 	}
 
 	nextPage() {
-		this.opts.page.current = Math.min(this.opts.page.current + 1, this.totalPages);
+		this.opts.page = Math.min(this.opts.page + 1, this.totalPages);
 	}
 
 	readonly snippetProps = $derived.by(() => ({
 		pages: this.pages,
 		range: this.range,
-		currentPage: this.opts.page.current,
+		currentPage: this.opts.page,
 	}));
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
-				'data-orientation': this.opts.orientation.current,
+				id: this.opts.id,
+				'data-orientation': this.opts.orientation,
 				[paginationAttrs.root]: '',
 				...this.attachment,
 			}) as const,
 	);
 }
 
-interface PaginationPageStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			page: Page;
-			disabled: boolean;
-		}> {}
+interface PaginationPageStateOpts extends RefOpts {
+	readonly page: Page;
+	readonly disabled: boolean;
+}
 
 export class PaginationPageState {
 	static create(opts: PaginationPageStateOpts) {
@@ -110,38 +98,38 @@ export class PaginationPageState {
 	readonly opts: PaginationPageStateOpts;
 	readonly root: PaginationRootState;
 	readonly attachment: RefAttachment;
-	readonly #isSelected = $derived.by(() => this.opts.page.current.value === this.root.opts.page.current);
+	readonly #isSelected = $derived.by(() => this.opts.page.value === this.root.opts.page);
 
 	constructor(opts: PaginationPageStateOpts, root: PaginationRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 
 		this.onclick = this.onclick.bind(this);
 		this.onkeydown = this.onkeydown.bind(this);
 	}
 
 	onclick(e: BitsMouseEvent) {
-		if (this.opts.disabled.current) return;
+		if (this.opts.disabled) return;
 		if (e.button !== 0) return;
-		this.root.setPage(this.opts.page.current.value);
+		this.root.opts.page = this.opts.page.value;
 	}
 
 	onkeydown(e: BitsKeyboardEvent) {
 		if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
 			e.preventDefault();
-			this.root.setPage(this.opts.page.current.value);
+			this.root.opts.page = this.opts.page.value;
 		} else {
-			this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+			this.root.rovingFocusGroup.handleKeydown(this.opts.ref, e);
 		}
 	}
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
-				'aria-label': `Page ${this.opts.page.current.value}`,
-				'data-value': `${this.opts.page.current.value}`,
+				id: this.opts.id,
+				'aria-label': `Page ${this.opts.page.value}`,
+				'data-value': `${this.opts.page.value}`,
 				'data-selected': this.#isSelected ? '' : undefined,
 				[paginationAttrs.page]: '',
 				//
@@ -156,12 +144,8 @@ export class PaginationPageState {
 // NEXT/PREV BUTTON
 //
 
-interface PaginationButtonStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			disabled: boolean;
-		}> {
+interface PaginationButtonStateOpts extends RefOpts {
+	readonly disabled: boolean;
 	type: 'prev' | 'next';
 }
 
@@ -176,7 +160,7 @@ export class PaginationButtonState {
 	constructor(opts: PaginationButtonStateOpts, root: PaginationRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.attachment = attachRef(this.opts.ref);
+		this.attachment = attachRef<HTMLElement>((v) => (opts.ref = v));
 
 		this.onclick = this.onclick.bind(this);
 		this.onkeydown = this.onkeydown.bind(this);
@@ -187,14 +171,14 @@ export class PaginationButtonState {
 	}
 
 	readonly #isDisabled = $derived.by(() => {
-		if (this.opts.disabled.current) return true;
+		if (this.opts.disabled) return true;
 		if (this.opts.type === 'prev') return !this.root.hasPrevPage;
 		if (this.opts.type === 'next') return !this.root.hasNextPage;
 		return false;
 	});
 
 	onclick(e: BitsMouseEvent) {
-		if (this.opts.disabled.current) return;
+		if (this.opts.disabled) return;
 		if (e.button !== 0) return;
 		this.#action();
 	}
@@ -204,14 +188,14 @@ export class PaginationButtonState {
 			e.preventDefault();
 			this.#action();
 		} else {
-			this.root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
+			this.root.rovingFocusGroup.handleKeydown(this.opts.ref, e);
 		}
 	}
 
 	readonly props = $derived.by(
 		() =>
 			({
-				id: this.opts.id.current,
+				id: this.opts.id,
 				[paginationAttrs[this.opts.type]]: '',
 				disabled: this.#isDisabled,
 				//

package/src/lib/components/pin-input/pin-input.svelte.ts

@@ -5,7 +5,6 @@ import {
 	DOMContext,
 	type ReadableBoxedValues,
 	type WritableBoxedValues,
-	simpleBox,
 } from '../../internal/tools/index.js';
 import { usePasswordManagerBadge } from './usePasswordManager.svelte.js';
 import type { PinInputCell, PinInputRootProps as RootComponentProps } from './types.js';
@@ -80,7 +79,7 @@ export class PinInputRootState {
 	readonly attachment: RefAttachment;
 	readonly inputAttachment: RefAttachment<HTMLInputElement>;
 	#isHoveringInput = $state(false);
-	#isFocused = simpleBox(false);
+	isFocused = $state(false);
 	#mirrorSelectionStart = $state<number | null>(null);
 	#mirrorSelectionEnd = $state<number | null>(null);
 
@@ -129,7 +128,7 @@ export class PinInputRootState {
 		this.#pwmb = usePasswordManagerBadge({
 			containerRef: this.opts.ref,
 			inputRef: this.opts.inputRef,
-			isFocused: this.#isFocused,
+			isFocused: () => this.isFocused,
 			pushPasswordManagerStrategy: this.opts.pushPasswordManagerStrategy,
 			domContext: this.domContext,
 		});
@@ -152,7 +151,7 @@ export class PinInputRootState {
 
 			this.#onDocumentSelectionChange();
 			if (this.domContext.getActiveElement() === input) {
-				this.#isFocused.current = true;
+				this.isFocused = true;
 			}
 
 			if (!this.domContext.getElementById('pin-input-style')) {
@@ -386,7 +385,7 @@ export class PinInputRootState {
 			this.#mirrorSelectionStart = start;
 			this.#mirrorSelectionEnd = end;
 		}
-		this.#isFocused.current = true;
+		this.isFocused = true;
 	};
 
 	onpaste = (e: BitsEvent<ClipboardEvent>) => {
@@ -440,7 +439,7 @@ export class PinInputRootState {
 			this.#prevInputMetadata.willSyntheticBlur = false;
 			return;
 		}
-		this.#isFocused.current = false;
+		this.isFocused = false;
 	};
 
 	readonly inputProps = $derived.by(() => ({
@@ -469,7 +468,7 @@ export class PinInputRootState {
 	readonly #cells = $derived.by(() =>
 		Array.from({ length: this.opts.maxLength.current }).map((_, idx) => {
 			const isActive =
-				this.#isFocused.current &&
+				this.isFocused &&
 				this.#mirrorSelectionStart !== null &&
 				this.#mirrorSelectionEnd !== null &&
 				((this.#mirrorSelectionStart === this.#mirrorSelectionEnd && idx === this.#mirrorSelectionStart) ||
@@ -487,7 +486,7 @@ export class PinInputRootState {
 
 	readonly snippetProps = $derived.by(() => ({
 		cells: this.#cells,
-		isFocused: this.#isFocused.current,
+		isFocused: this.isFocused,
 		isHovering: this.#isHoveringInput,
 	}));
 }

package/src/lib/components/pin-input/usePasswordManager.svelte.ts

@@ -16,7 +16,7 @@ type UsePasswordManagerBadgeProps = {
 	containerRef: WritableBox<HTMLElement | null>;
 	inputRef: WritableBox<HTMLInputElement | null>;
 	pushPasswordManagerStrategy: ReadableBox<PinInputRootPropsWithoutHTML['pushPasswordManagerStrategy']>;
-	isFocused: ReadableBox<boolean>;
+	isFocused: () => boolean;
 	domContext: DOMContext;
 };
 
@@ -91,7 +91,7 @@ export function usePasswordManagerBadge({
 	});
 
 	$effect(() => {
-		const focused = isFocused.current || domContext.getActiveElement() === inputRef.current;
+		const focused = isFocused() || domContext.getActiveElement() === inputRef.current;
 
 		if (pushPasswordManagerStrategy.current === 'none' || !focused) return;
 

package/src/lib/components/scroll-area/scroll-area.svelte.ts

@@ -7,14 +7,14 @@
 
 import { createEffectTimeout } from '../../internal/timeout-fn.svelte.js';
 import { createContext, getAbortSignal, untrack } from 'svelte';
-import { simpleBox, attachRef, DOMContext, getWindow, type ReadableBoxedValues } from '../../internal/tools/index.js';
+import { attachRef, DOMContext, getWindow, type ReadableBoxedValues } from '../../internal/tools/index.js';
 import type { ScrollAreaType } from './types.js';
 import type { BitsPointerEvent, RefAttachment, WithRefOpts } from '../../internal/types.js';
 import { type Direction, type Orientation, mergeProps } from '../../internal/index.js';
 import { createId } from '../../internal/create-id.js';
 import { on } from 'svelte/events';
 import { createBitsAttrs } from '../../internal/attrs.js';
-import { StateMachine } from '../../internal/state-machine.js';
+import { StateMachine } from '../../internal/state-machine.svelte.js';
 import { observeResizeMany } from '../../internal/svelte-resize-observer.svelte.js';
 
 const scrollAreaAttrs = createBitsAttrs({
@@ -97,14 +97,13 @@ export class ScrollAreaViewportState {
 	readonly opts: ScrollAreaViewportStateOpts;
 	readonly root: ScrollAreaRootState;
 	readonly attachment: RefAttachment;
-	#contentId = simpleBox('');
-	#contentRef = simpleBox<HTMLElement | null>(null);
-	readonly contentAttachment: RefAttachment = attachRef(this.#contentRef, (v) => (this.root.contentNode = v));
+	readonly #contentId: string;
+	readonly contentAttachment: RefAttachment = attachRef((v) => (this.root.contentNode = v));
 
 	constructor(opts: ScrollAreaViewportStateOpts, root: ScrollAreaRootState) {
 		this.opts = opts;
 		this.root = root;
-		this.#contentId.current = createId('content', opts.id.current);
+		this.#contentId = createId('content', opts.id.current);
 		this.attachment = attachRef(opts.ref, (v) => (this.root.viewportNode = v));
 	}
 
@@ -124,7 +123,7 @@ export class ScrollAreaViewportState {
 	readonly contentProps = $derived.by(
 		() =>
 			({
-				id: this.#contentId.current,
+				id: this.#contentId,
 				'data-scroll-area-content': '',
 				/**
 				 * When horizontal scrollbar is visible: this element should be at least
@@ -252,7 +251,7 @@ export class ScrollAreaScrollbarScrollState {
 			POINTER_ENTER: 'interacting',
 		},
 	});
-	readonly isHidden = $derived.by(() => this.machine.state.current === 'hidden');
+	readonly isHidden = $derived.by(() => this.machine.state === 'hidden');
 
 	constructor(scrollbar: ScrollAreaScrollbarState) {
 		this.scrollbar = scrollbar;
@@ -261,7 +260,7 @@ export class ScrollAreaScrollbarScrollState {
 		const debounceScrollend = createEffectTimeout(() => this.machine.dispatch('SCROLL_END'), () => 100);
 
 		$effect(() => {
-			const _state = this.machine.state.current;
+			const _state = this.machine.state;
 			const scrollHideDelay = this.root.opts.scrollHideDelay.current;
 			if (_state === 'idle') {
 				const hideTimer = this.root.domContext.setTimeout(() => this.machine.dispatch('HIDE'), scrollHideDelay);
@@ -304,7 +303,7 @@ export class ScrollAreaScrollbarScrollState {
 	readonly props = $derived.by(
 		() =>
 			({
-				'data-state': this.machine.state.current === 'hidden' ? 'hidden' : 'visible',
+				'data-state': this.machine.state === 'hidden' ? 'hidden' : 'visible',
 				onpointerenter: this.onpointerenter,
 				onpointerleave: this.onpointerleave,
 			}) as const,

package/src/lib/components/slider/components/slider.svelte

@@ -34,7 +34,8 @@
 	}: SliderRootProps = $props();
 
 	// Slider mode is construction-static: the root state chooses a single/multiple class once.
-	const valueType = untrack(() => type);
+	// svelte-ignore state_referenced_locally
+	const valueType = type;
 
 	const min = $derived.by(() => {
 		if (minProp !== undefined) return minProp;

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { TabsContentProps } from '../types.js';
 	import { TabsContentState } from '../tabs.svelte.js';
@@ -10,12 +9,18 @@
 	let { children, child, id = createId(uid), ref = $bindable(null), value, ...restProps }: TabsContentProps = $props();
 
 	const contentState = TabsContentState.create({
-		value: boxWith(() => value),
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get value() {
+			return value;
+		},
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(mergeProps({ 'data-slot': 'tabs-content', class: 'flex-1 outline-none' }, restProps, contentState.props));

package/src/lib/components/tabs/components/tabs-list.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { TabsListProps } from '../types.js';
 	import { TabsListState } from '../tabs.svelte.js';
@@ -10,11 +9,15 @@
 	let { child, children, id = createId(uid), ref = $bindable(null), ...restProps }: TabsListProps = $props();
 
 	const listState = TabsListState.create({
-		id: boxWith(() => id),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { TabsTriggerProps } from '../types.js';
 	import { TabsTriggerState } from '../tabs.svelte.js';
@@ -19,13 +18,21 @@
 	}: TabsTriggerProps = $props();
 
 	const triggerState = TabsTriggerState.create({
-		id: boxWith(() => id),
-		disabled: boxWith(() => disabled ?? false),
-		value: boxWith(() => value),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get disabled() {
+			return disabled ?? false;
+		},
+		get value() {
+			return value;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(

package/src/lib/components/tabs/components/tabs.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { boxWith } from '../../../internal/tools/index.js';
 	import { mergeProps } from '../../../internal/merge-props.js';
 	import type { TabsRootProps } from '../types.js';
 	import { TabsRootState } from '../tabs.svelte.js';
@@ -22,22 +21,34 @@
 	}: TabsRootProps = $props();
 
 	const rootState = TabsRootState.create({
-		id: boxWith(() => id),
-		value: boxWith(
-			() => value,
-			(v) => {
-				value = v;
-				onValueChange(v);
-			},
-		),
-		orientation: boxWith(() => orientation),
-		loop: boxWith(() => loop),
-		activationMode: boxWith(() => activationMode),
-		disabled: boxWith(() => disabled),
-		ref: boxWith(
-			() => ref,
-			(v) => (ref = v),
-		),
+		get id() {
+			return id;
+		},
+		get value() {
+			return value;
+		},
+		set value(v) {
+			value = v;
+			onValueChange(v);
+		},
+		get orientation() {
+			return orientation;
+		},
+		get loop() {
+			return loop;
+		},
+		get activationMode() {
+			return activationMode;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get ref() {
+			return ref;
+		},
+		set ref(v) {
+			ref = v;
+		},
 	});
 
 	const mergedProps = $derived(mergeProps({ 'data-slot': 'tabs', class: 'flex flex-col gap-2' }, restProps, rootState.props));