@svelte-atoms/core 1.0.0-alpha.27 → 1.0.0-alpha.29

package/dist/components/scrollable/scrollable-container.svelte

@@ -1,82 +1,82 @@
-<script module lang="ts">
-	export type { ScrollableContainerProps } from './types';
-</script>
-
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { ScrollableContainerProps } from './types';
-	import { ScrollableBond } from './bond.svelte';
-	import { resizeObserver } from '../../attachments/resize-observer.svelte';
-	import { HtmlAtom } from '../atom';
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: ScrollableContainerProps<T> = $props();
-
-	const bond = ScrollableBond.get();
-
-	if (!bond) {
-		throw new Error('ScrollableContainer must be used within a ScrollableRoot');
-	}
-</script>
-
-<HtmlAtom
-	{@attach (node) => {
-		if (!bond) return;
-
-		return resizeObserver(() => {
-			bond.state.props.clientWidth = node.clientWidth;
-			bond.state.props.clientHeight = node.clientHeight;
-			bond.state.props.scrollWidth = node.scrollWidth;
-			bond.state.props.scrollHeight = node.scrollHeight;
-		})(node);
-	}}
-	{bond}
-	preset="scrollable.container"
-	class={[
-		'scrollable-container border-border h-full max-h-full w-full overflow-auto',
-		'$preset',
-		klass
-	]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...bond.container()}
-	{...restProps}
->
-	{#if children}
-		{@render children()}
-	{/if}
-</HtmlAtom>
-
-<style>
-	:global(.scrollable-container) {
-		scrollbar-width: none; /* Firefox */
-		-ms-overflow-style: none; /* Internet Explorer 10+ */
-	}
-
-	:global(.scrollable-container::-webkit-scrollbar) {
-		display: none; /* WebKit */
-	}
-
-	:global(.scrollable-container[data-hide-scrollbar='true']) {
-		--scrollbar-width: 0px;
-	}
-
-	:global(.scrollable-container[data-hide-scrollbar='false']) {
-		--scrollbar-width: 16px;
-		/* margin-right: calc(-1 * var(--scrollbar-width, 16px));
-		margin-bottom: calc(-1 * var(--scrollbar-width, 16px));
-		padding-right: var(--scrollbar-width, 16px);
-		padding-bottom: var(--scrollbar-width, 16px); */
-	}
-</style>
+<script module lang="ts">
+	export type { ScrollableContainerProps } from './types';
+</script>
+
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
+	import type { ScrollableContainerProps } from './types';
+	import { ScrollableBond } from './bond.svelte';
+	import { resizeObserver } from '../../attachments/resize-observer.svelte';
+	import { HtmlAtom } from '../atom';
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: ScrollableContainerProps<T> = $props();
+
+	const bond = ScrollableBond.get();
+
+	if (!bond) {
+		throw new Error('ScrollableContainer must be used within a ScrollableRoot');
+	}
+</script>
+
+<HtmlAtom
+	{@attach (node) => {
+		if (!bond) return;
+
+		return resizeObserver(() => {
+			bond.state.props.clientWidth = node.clientWidth;
+			bond.state.props.clientHeight = node.clientHeight;
+			bond.state.props.scrollWidth = node.scrollWidth;
+			bond.state.props.scrollHeight = node.scrollHeight;
+		})(node);
+	}}
+	{bond}
+	preset="scrollable.container"
+	class={[
+		'scrollable-container border-border h-full max-h-full w-full overflow-auto',
+		'$preset',
+		klass
+	]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...bond.container()}
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</HtmlAtom>
+
+<style>
+	:global(.scrollable-container) {
+		scrollbar-width: none; /* Firefox */
+		-ms-overflow-style: none; /* Internet Explorer 10+ */
+	}
+
+	:global(.scrollable-container::-webkit-scrollbar) {
+		display: none; /* WebKit */
+	}
+
+	:global(.scrollable-container[data-hide-scrollbar='true']) {
+		--scrollbar-width: 0px;
+	}
+
+	:global(.scrollable-container[data-hide-scrollbar='false']) {
+		--scrollbar-width: 16px;
+		/* margin-right: calc(-1 * var(--scrollbar-width, 16px));
+		margin-bottom: calc(-1 * var(--scrollbar-width, 16px));
+		padding-right: var(--scrollbar-width, 16px);
+		padding-bottom: var(--scrollbar-width, 16px); */
+	}
+</style>

package/dist/components/scrollable/scrollable-content.svelte

@@ -1,41 +1,41 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { ScrollableContentProps } from './types';
-	import { ScrollableBond } from './bond.svelte';
-	import { HtmlAtom } from '../atom';
-
-	const bond = ScrollableBond.get();
-
-	let {
-		class: klass = '',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: ScrollableContentProps<T> = $props();
-
-	if (!bond) {
-		throw new Error('ScrollableContent must be used within a ScrollableRoot');
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="scrollable.content"
-	class={['scrollable-content border-border h-full max-h-full', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...bond.content()}
-	{...restProps}
->
-	{#if children}
-		{@render children()}
-	{/if}
-</HtmlAtom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
+	import type { ScrollableContentProps } from './types';
+	import { ScrollableBond } from './bond.svelte';
+	import { HtmlAtom } from '../atom';
+
+	const bond = ScrollableBond.get();
+
+	let {
+		class: klass = '',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: ScrollableContentProps<T> = $props();
+
+	if (!bond) {
+		throw new Error('ScrollableContent must be used within a ScrollableRoot');
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="scrollable.content"
+	class={['scrollable-content border-border h-full max-h-full', '$preset', klass]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...bond.content()}
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</HtmlAtom>

package/dist/components/scrollable/scrollable-root.svelte

@@ -1,100 +1,100 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom } from '../atom';
-	import { ScrollableBond, ScrollableState, type ScrollableStateProps } from './bond.svelte';
-	import type { ScrollableRootProps } from './types';
-	let {
-		scrollX = $bindable(0),
-		scrollY = $bindable(0),
-		scrollWidth = $bindable(0),
-		scrollHeight = $bindable(0),
-		clientWidth = $bindable(0),
-		clientHeight = $bindable(0),
-		class: klass = '',
-		disabled = false,
-		open = true,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: ScrollableRootProps<T> = $props();
-
-	let isScrolling = $state(false);
-
-	const bondProps = defineState<ScrollableStateProps>([
-		defineProperty(
-			'scrollX',
-			() => scrollX,
-			(v) => (scrollX = v)
-		),
-		defineProperty(
-			'scrollY',
-			() => scrollY,
-			(v) => (scrollY = v)
-		),
-		defineProperty(
-			'scrollWidth',
-			() => scrollWidth,
-			(v) => (scrollWidth = v)
-		),
-		defineProperty(
-			'scrollHeight',
-			() => scrollHeight,
-			(v) => (scrollHeight = v)
-		),
-		defineProperty(
-			'clientWidth',
-			() => clientWidth,
-			(v) => (clientWidth = v)
-		),
-		defineProperty(
-			'clientHeight',
-			() => clientHeight,
-			(v) => (clientHeight = v)
-		),
-		defineProperty('disabled', () => disabled),
-		defineProperty(
-			'open',
-			() => open,
-			(v) => (open = v)
-		),
-		defineProperty(
-			'isScrolling',
-			() => isScrolling,
-			(v) => (isScrolling = v)
-		)
-	]);
-
-	const bond = factory(bondProps).share();
-
-	const rootProps = $derived({ ...bond.root(), ...restProps });
-
-	function _factory(props: typeof bondProps) {
-		const scrollableState = new ScrollableState(() => props);
-		return new ScrollableBond(scrollableState).share();
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="scrollable"
-	class={['scrollable-root border-border relative box-content overflow-hidden', '$preset', klass]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...rootProps}
->
-	{@render children?.({ scrollable: bond })}
-</HtmlAtom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
+	import { defineProperty, defineState } from '../../utils';
+	import { HtmlAtom } from '../atom';
+	import { ScrollableBond, ScrollableState, type ScrollableStateProps } from './bond.svelte';
+	import type { ScrollableRootProps } from './types';
+	let {
+		scrollX = $bindable(0),
+		scrollY = $bindable(0),
+		scrollWidth = $bindable(0),
+		scrollHeight = $bindable(0),
+		clientWidth = $bindable(0),
+		clientHeight = $bindable(0),
+		class: klass = '',
+		disabled = false,
+		open = true,
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: ScrollableRootProps<T> = $props();
+
+	let isScrolling = $state(false);
+
+	const bondProps = defineState<ScrollableStateProps>([
+		defineProperty(
+			'scrollX',
+			() => scrollX,
+			(v) => (scrollX = v)
+		),
+		defineProperty(
+			'scrollY',
+			() => scrollY,
+			(v) => (scrollY = v)
+		),
+		defineProperty(
+			'scrollWidth',
+			() => scrollWidth,
+			(v) => (scrollWidth = v)
+		),
+		defineProperty(
+			'scrollHeight',
+			() => scrollHeight,
+			(v) => (scrollHeight = v)
+		),
+		defineProperty(
+			'clientWidth',
+			() => clientWidth,
+			(v) => (clientWidth = v)
+		),
+		defineProperty(
+			'clientHeight',
+			() => clientHeight,
+			(v) => (clientHeight = v)
+		),
+		defineProperty('disabled', () => disabled),
+		defineProperty(
+			'open',
+			() => open,
+			(v) => (open = v)
+		),
+		defineProperty(
+			'isScrolling',
+			() => isScrolling,
+			(v) => (isScrolling = v)
+		)
+	]);
+
+	const bond = factory(bondProps).share();
+
+	const rootProps = $derived({ ...bond.root(), ...restProps });
+
+	function _factory(props: typeof bondProps) {
+		const scrollableState = new ScrollableState(() => props);
+		return new ScrollableBond(scrollableState).share();
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="scrollable"
+	class={['scrollable-root border-border relative box-content overflow-hidden', '$preset', klass]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...rootProps}
+>
+	{@render children?.({ scrollable: bond })}
+</HtmlAtom>

package/dist/components/scrollable/scrollable-thumb.svelte

@@ -1,75 +1,75 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import { HtmlAtom } from '../atom';
-	import { ScrollableBond } from './bond.svelte';
-	import type { ScrollableThumbProps } from './types';
-
-	let {
-		class: klass = '',
-		children = undefined,
-		orientation,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = _animate,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: ScrollableThumbProps<T> = $props();
-
-	const bond = ScrollableBond.get();
-
-	if (!bond) {
-		throw new Error('ScrollableThumb must be used within a ScrollableRoot');
-	}
-
-	const scrollX = $derived(bond.state.props.scrollX);
-	const scrollY = $derived(bond.state.props.scrollY);
-
-	const clientWidth = $derived(bond.state.props.clientWidth);
-	const clientHeight = $derived(bond.state.props.clientHeight);
-
-	const scrollWidth = $derived(bond.state.props.scrollWidth);
-	const scrollHeight = $derived(bond.state.props.scrollHeight);
-
-	const thumbX = $derived((scrollX / scrollWidth) * 100);
-	const thumbY = $derived((scrollY / scrollHeight) * 100);
-
-	const thumbWidth = $derived((clientWidth / scrollWidth) * 100);
-	const thumbHeight = $derived((clientHeight / scrollHeight) * 100);
-
-	const thumbProps = $derived(bond.thumb(orientation));
-
-	function _animate(node: HTMLElement) {
-		if (orientation === 'horizontal') {
-			node.style.left = thumbX + '%';
-			node.style.transform = `translateZ(1px)`;
-			node.style.width = thumbWidth + '%';
-		} else {
-			node.style.top = thumbY + '%';
-			node.style.transform = `translateZ(1px)`;
-			node.style.height = thumbHeight + '%';
-		}
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="scrollable.thumb"
-	class={[
-		'scrollable-thumb border-border bg-foreground/10 hover:bg-foreground/20 absolute cursor-grab rounded-md active:cursor-grabbing',
-		orientation === 'horizontal' ? 'scrollable-thumb-x' : 'scrollable-thumb-y',
-		{ horizontal: 'h-full', vertical: 'w-full' }[orientation],
-		'$preset',
-		klass
-	]}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	{...thumbProps}
-	{...restProps}
->
-	{@render children?.()}
-</HtmlAtom>
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
+	import { HtmlAtom } from '../atom';
+	import { ScrollableBond } from './bond.svelte';
+	import type { ScrollableThumbProps } from './types';
+
+	let {
+		class: klass = '',
+		children = undefined,
+		orientation,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = _animate,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: ScrollableThumbProps<T> = $props();
+
+	const bond = ScrollableBond.get();
+
+	if (!bond) {
+		throw new Error('ScrollableThumb must be used within a ScrollableRoot');
+	}
+
+	const scrollX = $derived(bond.state.props.scrollX);
+	const scrollY = $derived(bond.state.props.scrollY);
+
+	const clientWidth = $derived(bond.state.props.clientWidth);
+	const clientHeight = $derived(bond.state.props.clientHeight);
+
+	const scrollWidth = $derived(bond.state.props.scrollWidth);
+	const scrollHeight = $derived(bond.state.props.scrollHeight);
+
+	const thumbX = $derived((scrollX / scrollWidth) * 100);
+	const thumbY = $derived((scrollY / scrollHeight) * 100);
+
+	const thumbWidth = $derived((clientWidth / scrollWidth) * 100);
+	const thumbHeight = $derived((clientHeight / scrollHeight) * 100);
+
+	const thumbProps = $derived(bond.thumb(orientation));
+
+	function _animate(node: HTMLElement) {
+		if (orientation === 'horizontal') {
+			node.style.left = thumbX + '%';
+			node.style.transform = `translateZ(1px)`;
+			node.style.width = thumbWidth + '%';
+		} else {
+			node.style.top = thumbY + '%';
+			node.style.transform = `translateZ(1px)`;
+			node.style.height = thumbHeight + '%';
+		}
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="scrollable.thumb"
+	class={[
+		'scrollable-thumb border-border bg-foreground/10 hover:bg-foreground/20 absolute cursor-grab rounded-md active:cursor-grabbing',
+		orientation === 'horizontal' ? 'scrollable-thumb-x' : 'scrollable-thumb-y',
+		{ horizontal: 'h-full', vertical: 'w-full' }[orientation],
+		'$preset',
+		klass
+	]}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	{...thumbProps}
+	{...restProps}
+>
+	{@render children?.()}
+</HtmlAtom>