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

package/dist/components/radio/radio.svelte

@@ -1,109 +1,109 @@
-<script lang="ts">
-	import { getRadioGroupContext } from './context';
-	import { Stack } from '../stack';
-	import { toClassValue } from '../../utils';
-	import { HtmlAtom, type Base } from '../atom';
-
-	const radioGroupContext = getRadioGroupContext();
-
-	let {
-		class: klass = '',
-		value = $bindable(undefined),
-		group = $bindable(),
-		id = undefined,
-		name = undefined,
-		disabled = false,
-		required = false,
-		readonly = false,
-		onchange = undefined,
-		oninput = undefined,
-		checkedContent = undefined,
-		...restProps
-	} = $props();
-
-	const _disabled = $derived(radioGroupContext?.disabled);
-	const _required = $derived(radioGroupContext?.required);
-	const _readonly = $derived(radioGroupContext?.readonly);
-	const _name = $derived(radioGroupContext?.name);
-
-	const proxy = {
-		get current() {
-			return radioGroupContext?.value ?? group;
-		},
-		set current(v) {
-			group = v;
-			if (radioGroupContext) {
-				radioGroupContext.value = v;
-			}
-		}
-	};
-
-	const isDisabled = $derived(_disabled || disabled);
-	const isRequired = $derived(_required || required);
-	const isReadonly = $derived(_readonly || readonly);
-	const isChecked = $derived(proxy.current === value);
-
-	function handleChange(ev: Event) {
-		const checked = (ev.currentTarget as HTMLInputElement)?.checked ?? false;
-
-		onchange?.(ev, {
-			checked,
-			value: checked,
-			type: 'boolean'
-		});
-	}
-
-	function handleInput(ev: Event) {
-		const currentTarget = ev.currentTarget as HTMLInputElement;
-		const _checked = currentTarget?.checked ?? false;
-
-		oninput?.(ev, {
-			checked: _checked,
-			value: _checked,
-			type: 'boolean'
-		});
-
-		if (ev.defaultPrevented) {
-			return;
-		}
-	}
-</script>
-
-<Stack.Root
-	preset="radio"
-	class={[
-		'text-foreground bg-input box-border inline-flex aspect-square size-4 max-w-fit cursor-pointer place-items-center rounded-full border p-0',
-		isDisabled && 'pointer-events-none opacity-50',
-		'$preset',
-		toClassValue.apply(null, [klass, {}])
-	]}
-	as="label"
-	{...restProps}
->
-	<Stack.Item class="pointer-events-none flex size-full">
-		<input
-			bind:group={proxy.current}
-			{id}
-			{value}
-			class="pointer-events-auto size-0 opacity-0"
-			type="radio"
-			name={_name ?? name}
-			disabled={isDisabled}
-			required={isRequired}
-			readonly={isReadonly}
-			onchange={handleChange}
-			oninput={handleInput}
-		/>
-	</Stack.Item>
-
-	{#if isChecked}
-		{#if checkedContent}
-			<HtmlAtom
-				class="rounded-inherit pointer-events-none size-1/2 bg-current"
-				base={checkedContent}
-			/>
-		{:else}
-			<Stack.Item class="rounded-inherit pointer-events-none size-1/2 bg-current"></Stack.Item>
-		{/if}
-	{/if}
-</Stack.Root>
+<script lang="ts">
+	import { getRadioGroupContext } from './context';
+	import { Stack } from '../stack';
+	import { toClassValue } from '../../utils';
+	import { HtmlAtom, type Base } from '../atom';
+
+	const radioGroupContext = getRadioGroupContext();
+
+	let {
+		class: klass = '',
+		value = $bindable(undefined),
+		group = $bindable(),
+		id = undefined,
+		name = undefined,
+		disabled = false,
+		required = false,
+		readonly = false,
+		onchange = undefined,
+		oninput = undefined,
+		checkedContent = undefined,
+		...restProps
+	} = $props();
+
+	const _disabled = $derived(radioGroupContext?.disabled);
+	const _required = $derived(radioGroupContext?.required);
+	const _readonly = $derived(radioGroupContext?.readonly);
+	const _name = $derived(radioGroupContext?.name);
+
+	const proxy = {
+		get current() {
+			return radioGroupContext?.value ?? group;
+		},
+		set current(v) {
+			group = v;
+			if (radioGroupContext) {
+				radioGroupContext.value = v;
+			}
+		}
+	};
+
+	const isDisabled = $derived(_disabled || disabled);
+	const isRequired = $derived(_required || required);
+	const isReadonly = $derived(_readonly || readonly);
+	const isChecked = $derived(proxy.current === value);
+
+	function handleChange(ev: Event) {
+		const checked = (ev.currentTarget as HTMLInputElement)?.checked ?? false;
+
+		onchange?.(ev, {
+			checked,
+			value: checked,
+			type: 'boolean'
+		});
+	}
+
+	function handleInput(ev: Event) {
+		const currentTarget = ev.currentTarget as HTMLInputElement;
+		const _checked = currentTarget?.checked ?? false;
+
+		oninput?.(ev, {
+			checked: _checked,
+			value: _checked,
+			type: 'boolean'
+		});
+
+		if (ev.defaultPrevented) {
+			return;
+		}
+	}
+</script>
+
+<Stack.Root
+	preset="radio"
+	class={[
+		'text-foreground bg-input box-border inline-flex aspect-square size-4 max-w-fit cursor-pointer place-items-center rounded-full border p-0',
+		isDisabled && 'pointer-events-none opacity-50',
+		'$preset',
+		toClassValue.apply(null, [klass, {}])
+	]}
+	as="label"
+	{...restProps}
+>
+	<Stack.Item class="pointer-events-none flex size-full">
+		<input
+			bind:group={proxy.current}
+			{id}
+			{value}
+			class="pointer-events-auto size-0 opacity-0"
+			type="radio"
+			name={_name ?? name}
+			disabled={isDisabled}
+			required={isRequired}
+			readonly={isReadonly}
+			onchange={handleChange}
+			oninput={handleInput}
+		/>
+	</Stack.Item>
+
+	{#if isChecked}
+		{#if checkedContent}
+			<HtmlAtom
+				class="rounded-inherit pointer-events-none size-1/2 bg-current"
+				base={checkedContent}
+			/>
+		{:else}
+			<Stack.Item class="rounded-inherit pointer-events-none size-1/2 bg-current"></Stack.Item>
+		{/if}
+	{/if}
+</Stack.Root>

package/dist/components/radio/types.svelte.d.ts

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

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>