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

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

@@ -1,88 +1,83 @@
-<script module lang="ts">
-	export type PortalOuterProps<
-		E extends keyof HTMLElementTagNameMap = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		id: RootPortals | (string & {});
-		children?: Snippet;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { PortalsBond, PortalBond, PortalState, type PortalStateProps } from '.';
-	import { RootBond } from '../root';
-	import type { RootPortals } from '../root/root.svelte';
-	import {
-		HtmlAtom,
-		type ElementType,
-		type HtmlAtomProps,
-		type Base
-	} from '../atom';
-	import { defineProperty, defineState } from '../../utils';
-
-	type Element = ElementType<E>;
-
-	let {
-		class: klass = '',
-		id,
-		factory = _factory,
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PortalOuterProps<E, B> & HTMLAttributes<Element> = $props();
-
-	const rootBond = RootBond.get();
-	const portalsBond = PortalsBond.get();
-
-	const bondProps = defineState<PortalStateProps>([defineProperty('id', () => id)]);
-	const bond = factory(bondProps).share() as PortalBond;
-
-	portalsBond?.state.set(id, bond);
-
-	$effect(() => {
-		if (rootBond) {
-			rootBond.state.setPortal(id, bond);
-		}
-
-		return () => {
-			portalsBond?.state.delete(id);
-			bond.destroy();
-		};
-	});
-
-	const rootProps = $derived({
-		...bond.root(),
-		...restProps
-	});
-
-	function _factory(props: typeof bondProps) {
-		const portalState = new PortalState(() => props);
-		return new PortalBond(portalState);
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-<HtmlAtom
-	{bond}
-	preset="portal"
-	class={['pointer-events-none', '$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?.()}
-</HtmlAtom>
+<script module lang="ts">
+	export type { PortalOuterProps } from './types';
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { PortalOuterProps } from './types';
+	import { PortalsBond, PortalBond, PortalState, type PortalStateProps } from '.';
+	import { RootBond } from '../root';
+	import type { RootPortals } from '../root/root.svelte';
+	import {
+		HtmlAtom,
+		type ElementType,
+		type HtmlAtomProps,
+		type Base
+	} from '../atom';
+	import { defineProperty, defineState } from '../../utils';
+
+	type Element = ElementType<E>;
+
+	let {
+		class: klass = '',
+		id,
+		factory = _factory,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: PortalOuterProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const rootBond = RootBond.get();
+	const portalsBond = PortalsBond.get();
+
+	const bondProps = defineState<PortalStateProps>([defineProperty('id', () => id)]);
+	const bond = factory(bondProps).share() as PortalBond;
+
+	portalsBond?.state.set(id, bond);
+
+	$effect(() => {
+		if (rootBond) {
+			rootBond.state.setPortal(id, bond);
+		}
+
+		return () => {
+			portalsBond?.state.delete(id);
+			bond.destroy();
+		};
+	});
+
+	const rootProps = $derived({
+		...bond.root(),
+		...restProps
+	});
+
+	function _factory(props: typeof bondProps) {
+		const portalState = new PortalState(() => props);
+		return new PortalBond(portalState);
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<HtmlAtom
+	{bond}
+	preset="portal"
+	class={['border-border pointer-events-none', '$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?.()}
+</HtmlAtom>

package/dist/components/portal/portal-root.svelte.d.ts

@@ -1,31 +1,11 @@
-export type PortalOuterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    id: RootPortals | (string & {});
-    children?: Snippet;
-};
+export type { PortalOuterProps } from './types';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import { PortalBond } from '.';
 import type { RootPortals } from '../root/root.svelte';
 import { type ElementType, type HtmlAtomProps, type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../../utils").ClassValue | import("../../utils").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("..").NodeFunction<E> | undefined;
-        enter?: import("..").TransitionFunction<E> | undefined;
-        exit?: import("..").TransitionFunction<E> | undefined;
-        animate?: import("..").NodeFunction<E> | undefined;
-        onmount?: import("..").NodeFunction<E> | undefined;
-        ondestroy?: import("..").NodeFunction<E> | undefined;
-        children?: Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-        variants?: import("../../utils").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & {
+    props: HtmlAtomProps<E, B> & import("./types").PortalOuterExtendProps & {
         id: RootPortals | (string & {});
         children?: Snippet;
     } & HTMLAttributes<ElementType<E>>;

package/dist/components/portal/teleport.svelte

@@ -1,49 +1,50 @@
-<script module lang="ts">
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	import type { HtmlElementTagName, HtmlElementType } from '../element';
-
-	export type TeleportProps<
-		E extends HtmlElementTagName = 'div',
-		B extends Base = Base
-	> = HtmlAtomProps<E, B> & {
-		portal?: string;
-	};
-</script>
-
-<script lang="ts" generics="E extends HtmlElementTagName = 'div', B extends Base = Base">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { PortalsBond } from './portals';
-	import { RootBond } from '../root/bond.svelte';
-	import { port } from './utils';
-
-	type Element = HtmlElementType<E>;
-
-	let { portal, as, base, children, ...restProps }: TeleportProps<E, B> & HTMLAttributes<Element> =
-		$props();
-
-	const portalsBond = PortalsBond.get();
-	const rootBond = RootBond.get();
-
-	const portalBond = $derived(
-		portalsBond?.state?.get(portal!) ?? rootBond?.state?.getPortal(portal!)
-	);
-	const targetElement = $derived(portalBond?.targetElement);
-
-	function _port(node: HTMLElement) {
-		const hidden = node.hidden;
-
-		node.hidden = true;
-
-		const unport = port(node, targetElement);
-
-		node.hidden = hidden;
-
-		return unport;
-	}
-</script>
-
-{#if targetElement && portal}
-	<HtmlAtom {@attach _port} as={as as E} {base} {...restProps}>
-		{@render children?.({ portal: portalBond })}
-	</HtmlAtom>
-{/if}
+<script module lang="ts">
+	export type { TeleportProps } from './types';
+</script>
+
+<script lang="ts" generics="E extends HtmlElementTagName = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { TeleportProps } from './types';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import type { HtmlElementTagName, HtmlElementType } from '../element';
+	import { PortalsBond } from './portals';
+	import { RootBond } from '../root/bond.svelte';
+	import { port } from './utils';
+	import type { PortalBond } from '.';
+
+	type Element = HtmlElementType<E>;
+
+	let { portal, as, base, children, ...restProps }: TeleportProps<E, B> & HTMLAttributes<Element> =
+		$props();
+
+	const portalsBond = PortalsBond.get();
+	const rootBond = RootBond.get();
+
+	const portalBond = $derived.by(() => {
+		if (typeof portal === 'string') {
+			return portalsBond?.state?.get(portal!) ?? rootBond?.state?.getPortal(portal!);
+		}
+
+		return portal;
+	});
+
+	const targetElement = $derived(portalBond?.targetElement);
+
+	function _port(node: HTMLElement) {
+		const hidden = node.hidden;
+
+		node.hidden = true;
+
+		const unport = port(node, targetElement);
+
+		node.hidden = hidden;
+
+		return unport;
+	}
+</script>
+
+{#if targetElement && portal}
+	<HtmlAtom {@attach _port} as={as as E} {base} {...restProps}>
+		{@render children?.({ portal: portalBond })}
+	</HtmlAtom>
+{/if}

package/dist/components/portal/teleport.svelte.d.ts

@@ -1,29 +1,11 @@
+export type { TeleportProps } from './types';
+import type { HTMLAttributes } from 'svelte/elements';
 import { type HtmlAtomProps, type Base } from '../atom';
 import type { HtmlElementTagName, HtmlElementType } from '../element';
-export type TeleportProps<E extends HtmlElementTagName = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & {
-    portal?: string;
-};
-import type { HTMLAttributes } from 'svelte/elements';
+import type { PortalBond } from '.';
 declare function $$render<E extends HtmlElementTagName = 'div', B extends Base = Base>(): {
-    props: Record<string, unknown> & {
-        [key: string]: unknown;
-        class?: import("../..").ClassValue | import("../..").ClassValue[];
-        as?: (string & {}) | E | undefined;
-        global?: boolean;
-        initial?: import("../element").NodeFunction<E> | undefined;
-        enter?: import("../element").TransitionFunction<E> | undefined;
-        exit?: import("../element").TransitionFunction<E> | undefined;
-        animate?: import("../element").NodeFunction<E> | undefined;
-        onmount?: import("../element").NodeFunction<E> | undefined;
-        ondestroy?: import("../element").NodeFunction<E> | undefined;
-        children?: import("svelte").Snippet;
-    } & {
-        bond?: import("../..").Bond;
-        base?: B | undefined;
-        preset?: import("../..").ModuleName | (string & {});
-        variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
-    } & {
-        portal?: string;
+    props: HtmlAtomProps<E, B> & import("./types").TeleportExtendProps & {
+        portal?: string | PortalBond;
     } & HTMLAttributes<HtmlElementType<E>>;
     exports: {};
     bindings: "";

package/dist/components/portal/types.d.ts

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+import type { Factory } from '../../types';
+import type { PortalBond } from './bond.svelte';
+import type { RootPortals } from '../root/root.svelte';
+import type { HtmlElementTagName } from '../element';
+/**
+ * Extend this interface to add custom portal root properties in your application.
+ */
+export interface PortalRootExtendProps {
+}
+/**
+ * Extend this interface to add custom portal outer properties in your application.
+ */
+export interface PortalOuterExtendProps {
+}
+/**
+ * Extend this interface to add custom teleport properties in your application.
+ */
+export interface TeleportExtendProps {
+}
+export type PortalRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = Omit<HtmlAtomProps<E, B>, 'children'> & PortalRootExtendProps & {
+    name?: string;
+    factory?: Factory<PortalBond>;
+    children?: Snippet<[{
+        portal: PortalBond;
+    }]>;
+};
+export type PortalOuterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & PortalOuterExtendProps & {
+    id: RootPortals | (string & {});
+    children?: Snippet;
+};
+export type TeleportProps<E extends HtmlElementTagName = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & TeleportExtendProps & {
+    portal?: string | PortalBond;
+};
+/**
+ * @deprecated Use PortalRootExtendProps instead
+ */
+export type PortalExtendProps = PortalRootExtendProps;

package/dist/components/portal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/radio/radio-group.stories.svelte

@@ -20,22 +20,22 @@
 				<div class="flex h-full w-full flex-col items-center justify-center">
 					<RadioGroupComponent class="gap-4" name="choice" bind:value>
 						<label class="flex items-center gap-2">
-							<RadioComponent class="size-8 p-1.5" value="t1" />
+							<RadioComponent class="size-8" value="t1" />
 							<div>Test 1</div>
 						</label>
 
 						<label class="flex items-center gap-2">
-							<RadioComponent class="size-8 p-1.5" value="t2" />
+							<RadioComponent class="size-8" value="t2" />
 							<div>Test 2</div>
 						</label>
 
 						<label class="flex items-center gap-2">
-							<RadioComponent class="size-8 p-1.5" value="t3" />
+							<RadioComponent class="size-8" value="t3" />
 							<div>Test 3</div>
 						</label>
 
 						<label class="flex items-center gap-2">
-							<RadioComponent class="size-8 p-1.5" value="t4" />
+							<RadioComponent class="size-8" value="t4" />
 							<div>Test 4</div>
 						</label>
 					</RadioGroupComponent>

package/dist/components/radio/radio.svelte

@@ -1,109 +1,109 @@
-<script lang="ts" generics="B extends Base = Base">
-	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 box-border inline-flex aspect-square size-4 max-w-fit cursor-pointer place-items-center rounded-full border p-[3px]',
-		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-full bg-current"
-				base={checkedContent}
-			/>
-		{:else}
-			<Stack.Item class="rounded-inherit pointer-events-none size-full 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>