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

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>

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

@@ -1,59 +1,59 @@
-<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
-	import type { ScrollableTrackProps } from './types';
-	import { ScrollableBond } from './bond.svelte';
-	import { HtmlAtom } from '../atom';
-
-	let {
-		class: klass = '',
-
-		orientation = undefined,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: ScrollableTrackProps<T> = $props();
-
-	const bond = ScrollableBond.get();
-
-	if (!bond) {
-		throw new Error('ScrollableTrack must be used within a ScrollableRoot');
-	}
-
-	const hasYScroll = $derived(bond.state.props.scrollHeight > bond.state.props.clientHeight);
-	const hasXScroll = $derived(bond.state.props.scrollWidth > bond.state.props.clientWidth);
-
-	const hasScroll = $derived(hasXScroll || hasYScroll);
-
-	const isOpen = $derived(bond?.state?.props?.open ?? true);
-
-	const isScrolling = $derived(bond?.state?.props?.isScrolling ?? false);
-
-	const trackProps = $derived(bond.track(orientation));
-</script>
-
-{#if (isOpen || isScrolling) && hasScroll}
-	<HtmlAtom
-		{bond}
-		preset="scrollable.track"
-		class={[
-			'scrollable-track bg-foreground/10 hover:bg-foreground/15 border-border absolute z-10 rounded transition-opacity',
-			{ vertical: 'inset-y-0 right-0 w-2', horizontal: 'inset-x-0 bottom-0 h-2' }[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)}
-		{...trackProps}
-		{...restProps}
-	>
-		{@render children?.()}
-	</HtmlAtom>
-{/if}
+<script lang="ts" generics="T extends keyof HTMLElementTagNameMap">
+	import type { ScrollableTrackProps } from './types';
+	import { ScrollableBond } from './bond.svelte';
+	import { HtmlAtom } from '../atom';
+
+	let {
+		class: klass = '',
+
+		orientation = undefined,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: ScrollableTrackProps<T> = $props();
+
+	const bond = ScrollableBond.get();
+
+	if (!bond) {
+		throw new Error('ScrollableTrack must be used within a ScrollableRoot');
+	}
+
+	const hasYScroll = $derived(bond.state.props.scrollHeight > bond.state.props.clientHeight);
+	const hasXScroll = $derived(bond.state.props.scrollWidth > bond.state.props.clientWidth);
+
+	const hasScroll = $derived(hasXScroll || hasYScroll);
+
+	const isOpen = $derived(bond?.state?.props?.open ?? true);
+
+	const isScrolling = $derived(bond?.state?.props?.isScrolling ?? false);
+
+	const trackProps = $derived(bond.track(orientation));
+</script>
+
+{#if (isOpen || isScrolling) && hasScroll}
+	<HtmlAtom
+		{bond}
+		preset="scrollable.track"
+		class={[
+			'scrollable-track bg-foreground/10 hover:bg-foreground/15 border-border absolute z-10 rounded transition-opacity',
+			{ vertical: 'inset-y-0 right-0 w-2', horizontal: 'inset-x-0 bottom-0 h-2' }[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)}
+		{...trackProps}
+		{...restProps}
+	>
+		{@render children?.()}
+	</HtmlAtom>
+{/if}

package/dist/components/scrollable/scrollable.stories.svelte.d.ts

@@ -4,7 +4,7 @@ type Scrollable = SvelteComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
-    $$bindings?: string | undefined;
+    $$bindings?: string;
 };
 declare const Scrollable: $$__sveltets_2_IsomorphicComponent<{
     [x: string]: never;

package/dist/components/tabs/tab/tab-body.svelte

@@ -1,52 +1,52 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import { HtmlAtom, type Base } from '../../atom';
-	import type { TabBodyProps } from '../types';
-	import { TabBond } from './bond.svelte';
-
-	const bond = TabBond.get();
-
-	if (!bond) {
-		throw new Error('TabBody must be used within a Tab');
-	}
-
-	let {
-		class: klass = '',
-		children,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: TabBodyProps<E, B> = $props();
-
-	let mounted = $state(false);
-
-	const bodyProps = $derived({
-		...bond?.body(),
-		...restProps
-	});
-
-	$effect(() => {
-		mounted = true;
-	});
-</script>
-
-<HtmlAtom
-	preset="tab.body"
-	class={[
-		'tab-body border-border pointer-events-auto flex h-auto w-full min-w-full flex-1 flex-col',
-		'$preset',
-		klass
-	]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	{...bodyProps}
->
-	{@render children?.({ tab: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../../atom';
+	import type { TabBodyProps } from '../types';
+	import { TabBond } from './bond.svelte';
+
+	const bond = TabBond.get();
+
+	if (!bond) {
+		throw new Error('TabBody must be used within a Tab');
+	}
+
+	let {
+		class: klass = '',
+		children,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: TabBodyProps<E, B> = $props();
+
+	let mounted = $state(false);
+
+	const bodyProps = $derived({
+		...bond?.body(),
+		...restProps
+	});
+
+	$effect(() => {
+		mounted = true;
+	});
+</script>
+
+<HtmlAtom
+	preset="tab.body"
+	class={[
+		'tab-body border-border pointer-events-auto flex h-auto w-full min-w-full flex-1 flex-col',
+		'$preset',
+		klass
+	]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{...bodyProps}
+>
+	{@render children?.({ tab: bond })}
+</HtmlAtom>

package/dist/components/tabs/tab/tab-description.svelte

@@ -1,41 +1,41 @@
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
-	import type { TabDescriptionProps } from '../types';
-	import { HtmlAtom, type Base } from '../../atom';
-	import { TabBond } from './bond.svelte';
-
-	const bond = TabBond.get();
-
-	let {
-		class: klass = '',
-		as = 'p' as E,
-		children,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: TabDescriptionProps<E, B> = $props();
-
-	const descriptionProps = $derived({
-		...bond?.description(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="tab.description"
-	class={['border-border', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	{as}
-	{...descriptionProps}
->
-	{@render children?.({ tab: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
+	import type { TabDescriptionProps } from '../types';
+	import { HtmlAtom, type Base } from '../../atom';
+	import { TabBond } from './bond.svelte';
+
+	const bond = TabBond.get();
+
+	let {
+		class: klass = '',
+		as = 'p' as E,
+		children,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: TabDescriptionProps<E, B> = $props();
+
+	const descriptionProps = $derived({
+		...bond?.description(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="tab.description"
+	class={['border-border', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{as}
+	{...descriptionProps}
+>
+	{@render children?.({ tab: bond })}
+</HtmlAtom>

package/dist/components/tabs/tab/tab-header.svelte

@@ -1,71 +1,71 @@
-<script
-	lang="ts"
-	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
->
-	import type { TabHeaderProps } from '../types';
-	import { TabBond } from './bond.svelte';
-	import { HtmlAtom, type Base } from '../../atom';
-
-	const bond = TabBond.get();
-
-	const isActive = $derived(bond?.state.isActive);
-	const isDisabled = $derived(bond?.state.props.disabled);
-
-	let {
-		class: klass = '',
-		as = 'button' as E,
-		children,
-		onpointerdown,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: TabHeaderProps = $props();
-
-	const headerProps = $derived({
-		...bond?.header(),
-		...restProps
-	});
-
-	function handlePointerDown(ev: PointerEvent) {
-		if (isDisabled) return;
-
-		onpointerdown?.(ev, { tab: bond });
-
-		if (ev.defaultPrevented) {
-			return;
-		}
-
-		bond?.state.select();
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="tab.header"
-	as="button"
-	class={[
-		'border-border text-foreground/60 hover:text-foreground/80 active:text-foreground/100 bg-foreground/0 hover:bg-foreground/5 active:bg-foreground/10 flex cursor-pointer items-center px-2 py-2 text-sm font-medium transition-colors duration-100',
-		isActive && 'text-primary bg-accent/10 hover:bg-accent/15 active:bg-accent/20',
-		isDisabled && 'opacity-50',
-		'$preset',
-		klass
-	]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	type="button"
-	disabled={isDisabled}
-	onpointerdown={handlePointerDown}
-	{...headerProps}
->
-	{@render children?.({
-		tab: bond
-	})}
-</HtmlAtom>
+<script
+	lang="ts"
+	generics="E extends keyof HTMLElementTagNameMap = 'button', B extends Base = Base"
+>
+	import type { TabHeaderProps } from '../types';
+	import { TabBond } from './bond.svelte';
+	import { HtmlAtom, type Base } from '../../atom';
+
+	const bond = TabBond.get();
+
+	const isActive = $derived(bond?.state.isActive);
+	const isDisabled = $derived(bond?.state.props.disabled);
+
+	let {
+		class: klass = '',
+		as = 'button' as E,
+		children,
+		onpointerdown,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: TabHeaderProps = $props();
+
+	const headerProps = $derived({
+		...bond?.header(),
+		...restProps
+	});
+
+	function handlePointerDown(ev: PointerEvent) {
+		if (isDisabled) return;
+
+		onpointerdown?.(ev, { tab: bond });
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+
+		bond?.state.select();
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="tab.header"
+	as="button"
+	class={[
+		'border-border text-foreground/60 hover:text-foreground/80 active:text-foreground/100 bg-foreground/0 hover:bg-foreground/5 active:bg-foreground/10 flex cursor-pointer items-center px-2 py-2 text-sm font-medium transition-colors duration-100',
+		isActive && 'text-primary bg-accent/10 hover:bg-accent/15 active:bg-accent/20',
+		isDisabled && 'opacity-50',
+		'$preset',
+		klass
+	]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	type="button"
+	disabled={isDisabled}
+	onpointerdown={handlePointerDown}
+	{...headerProps}
+>
+	{@render children?.({
+		tab: bond
+	})}
+</HtmlAtom>