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

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

@@ -1,51 +1,41 @@
-<script module lang="ts">
-	export type ScrollableContentProps<T extends keyof HTMLElementTagNameMap> = Override<
-		HtmlAtomProps<T>,
-		{
-			children?: Snippet;
-		}
-	>;
-</script>
-
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { Snippet } from 'svelte';
-	import { ScrollableBond } from './bond.svelte';
-	import type { Override } from '../../types';
-	import { HtmlAtom, type HtmlAtomProps } 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-content.svelte.d.ts

@@ -1,9 +1,4 @@
-export type ScrollableContentProps<T extends keyof HTMLElementTagNameMap> = Override<HtmlAtomProps<T>, {
-    children?: Snippet;
-}>;
-import type { Snippet } from 'svelte';
-import type { Override } from '../../types';
-import { type HtmlAtomProps } from '../atom';
+import type { ScrollableContentProps } from './types';
 declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
     props: ScrollableContentProps<T>;
     exports: {};

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

@@ -1,120 +1,100 @@
-<script module lang="ts">
-	export type ScrollableRootProps<T extends keyof HTMLElementTagNameMap> = Override<
-		HtmlAtomProps<T>,
-		{
-			children?: Snippet<[{ scrollable: ScrollableBond }]>;
-		}
-	> & {
-		scrollX?: number;
-		scrollY?: number;
-		scrollWidth?: number;
-		scrollHeight?: number;
-		clientWidth?: number;
-		clientHeight?: number;
-		disabled?: boolean;
-		open?: boolean;
-	};
-</script>
-
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { Snippet } from 'svelte';
-	import { ScrollableBond, ScrollableState, type ScrollableStateProps } from './bond.svelte';
-	import type { Override } from '../../types';
-	import { defineProperty, defineState } from '../../utils';
-	import { HtmlAtom, type HtmlAtomProps } from '../atom';
-
-	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-root.svelte.d.ts

@@ -1,25 +1,9 @@
-export type ScrollableRootProps<T extends keyof HTMLElementTagNameMap> = Override<HtmlAtomProps<T>, {
-    children?: Snippet<[{
-        scrollable: ScrollableBond;
-    }]>;
-}> & {
-    scrollX?: number;
-    scrollY?: number;
-    scrollWidth?: number;
-    scrollHeight?: number;
-    clientWidth?: number;
-    clientHeight?: number;
-    disabled?: boolean;
-    open?: boolean;
-};
-import type { Snippet } from 'svelte';
 import { ScrollableBond } from './bond.svelte';
-import type { Override } from '../../types';
-import { type HtmlAtomProps } from '../atom';
+import type { ScrollableRootProps } from './types';
 declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
     props: ScrollableRootProps<T>;
     exports: {
-        getBond: () => any;
+        getBond: () => ScrollableBond;
     };
     bindings: "scrollX" | "clientWidth" | "scrollWidth" | "scrollY" | "clientHeight" | "scrollHeight";
     slots: {};
@@ -31,7 +15,7 @@ declare class __sveltets_Render<T extends keyof HTMLElementTagNameMap> {
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "scrollX" | "clientWidth" | "scrollWidth" | "scrollY" | "clientHeight" | "scrollHeight";
     exports(): {
-        getBond: () => any;
+        getBond: () => ScrollableBond;
     };
 }
 interface $$IsomorphicComponent {

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

@@ -1,86 +1,75 @@
-<script module lang="ts">
-	export type ScrollableThumbProps<T extends keyof HTMLElementTagNameMap> = Override<
-		HtmlAtomProps<T>,
-		{
-			children?: Snippet;
-			orientation: 'horizontal' | 'vertical';
-		}
-	>;
-</script>
-
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { Snippet } from 'svelte';
-	import { ScrollableBond } from './bond.svelte';
-	import type { Override } from '../../types';
-	import { HtmlAtom, type HtmlAtomProps } from '../atom';
-
-	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>

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

@@ -1,10 +1,4 @@
-export type ScrollableThumbProps<T extends keyof HTMLElementTagNameMap> = Override<HtmlAtomProps<T>, {
-    children?: Snippet;
-    orientation: 'horizontal' | 'vertical';
-}>;
-import type { Snippet } from 'svelte';
-import type { Override } from '../../types';
-import { type HtmlAtomProps } from '../atom';
+import type { ScrollableThumbProps } from './types';
 declare function $$render<T extends keyof HTMLElementTagNameMap>(): {
     props: ScrollableThumbProps<T>;
     exports: {};