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

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

@@ -1,89 +1,82 @@
-<script module lang="ts">
-	export type ScrollableContainerProps<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 { resizeObserver } from '../../attachments/resize-observer.svelte';
-	import { HtmlAtom, type HtmlAtomProps } 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-container.svelte.d.ts

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

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 {