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

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

@@ -1,63 +1,49 @@
-<script module lang="ts">
-	import type { Factory } from '../../types';
-
-	export type PopoverRootProps = {
-		open?: boolean;
-		disabled?: boolean;
-		placements?: Placement[];
-		placement?: Placement;
-		offset?: number;
-		extend?: Record<string, unknown>;
-		factory?: Factory<PopoverBond>;
-		children?: Snippet<[{ popover: PopoverBond }]>;
-	};
-</script>
-
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { Placement } from '@floating-ui/dom';
-	import { PopoverState, PopoverBond, type PopoverStateProps } from './bond.svelte';
-	import { defineProperty, defineState } from '../../utils';
-
-	let {
-		open = $bindable(false),
-		disabled = false,
-		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
-		placement = 'bottom-start',
-		offset = 0,
-		extend = {},
-		factory = _factory,
-		children = undefined
-	}: PopoverRootProps = $props();
-
-	const bondProps = defineState<PopoverStateProps>(
-		[
-			defineProperty(
-				'open',
-				() => open,
-				(v) => {
-					open = v;
-				}
-			),
-			defineProperty('disabled', () => disabled),
-			defineProperty('placement', () => placement),
-			defineProperty('offset', () => offset),
-			defineProperty('placements', () => placements ?? [])
-		],
-		() => ({ extend })
-	);
-	const bond = factory(bondProps).share();
-
-	function _factory(props: typeof bondProps) {
-		const popoverState = new PopoverState(() => props);
-		const popoverBond = new PopoverBond(popoverState);
-
-		return popoverBond;
-	}
-
-	export function getBond() {
-		return bond;
-	}
-</script>
-
-{@render children?.({ popover: bond })}
+<script lang="ts">
+	import { PopoverState, PopoverBond, type PopoverStateProps } from './bond.svelte';
+	import { defineProperty, defineState } from '../../utils';
+	import type { PopoverRootProps } from './types';
+
+	let {
+		open = $bindable(false),
+		disabled = false,
+		placements = ['bottom-start', 'bottom-end', 'top-start', 'top-end'],
+		placement = 'bottom-start',
+		offset = 0,
+		portal = undefined,
+		extend = {},
+		factory = _factory,
+		children = undefined
+	}: PopoverRootProps = $props();
+
+	const bondProps = defineState<PopoverStateProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty('disabled', () => disabled),
+			defineProperty('placement', () => placement),
+			defineProperty('offset', () => offset),
+			defineProperty('placements', () => placements ?? []),
+			defineProperty('portal', () => portal)
+		],
+		() => ({ extend })
+	);
+	const bond = factory(bondProps).share();
+
+	function _factory(props: typeof bondProps) {
+		const popoverState = new PopoverState(() => props);
+		const popoverBond = new PopoverBond(popoverState);
+
+		return popoverBond;
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+{@render children?.({ popover: bond })}

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

@@ -1,19 +1,5 @@
-import type { Factory } from '../../types';
-export type PopoverRootProps = {
-    open?: boolean;
-    disabled?: boolean;
-    placements?: Placement[];
-    placement?: Placement;
-    offset?: number;
-    extend?: Record<string, unknown>;
-    factory?: Factory<PopoverBond>;
-    children?: Snippet<[{
-        popover: PopoverBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
-import type { Placement } from '@floating-ui/dom';
 import { PopoverState, PopoverBond, type PopoverStateProps } from './bond.svelte';
+import type { PopoverRootProps } from './types';
 declare const PopoverRoot: import("svelte").Component<PopoverRootProps, {
     getBond: () => PopoverBond<PopoverStateProps<Record<string, unknown>>, PopoverState<PopoverStateProps<Record<string, unknown>>>, import("./bond.svelte").PopoverDomElements>;
 }, "open">;

package/dist/components/popover/popover-trigger.svelte

@@ -1,56 +1,47 @@
-<script module lang="ts">
-	export type PopoverTriggerProps<
-		T extends keyof HTMLElementTagNameMap,
-		B extends Base = Base
-	> = HtmlAtomProps<T, B> & {
-		children?: Snippet<[{ popover?: PopoverBond }]>;
-	};
-</script>
-
-<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
-	import type { Snippet } from 'svelte';
-	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
-	import { PopoverBond } from './bond.svelte';
-
-	const bond = PopoverBond.get();
-
-	if (!bond) {
-		throw new Error('');
-	}
-
-	let {
-		class: klass = '',
-		as = 'button' as E,
-		preset = 'popover.trigger',
-		children = undefined,
-		onmount = undefined,
-		ondestroy = undefined,
-		animate = undefined,
-		enter = undefined,
-		exit = undefined,
-		initial = undefined,
-		...restProps
-	}: PopoverTriggerProps<E, B> = $props();
-
-	const triggerProps = $derived({
-		...bond.trigger(),
-		...restProps
-	});
-</script>
-
-<HtmlAtom
-	{as}
-	{bond}
-	{preset}
-	class={['flex w-fit cursor-pointer rounded-md p-2', '$preset', klass]}
-	onmount={onmount?.bind(bond.state)}
-	ondestroy={ondestroy?.bind(bond.state)}
-	animate={animate?.bind(bond.state)}
-	enter={enter?.bind(bond.state)}
-	exit={exit?.bind(bond.state)}
-	initial={initial?.bind(bond.state)}
-	type={as === 'button' ? 'button' : undefined}
-	{...triggerProps}
->
-	{@render children?.({ popover: bond })}
-</HtmlAtom>
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import { HtmlAtom, type Base } from '../atom';
+	import { PopoverBond } from './bond.svelte';
+	import type { PopoverTriggerProps } from './types';
+
+	const bond = PopoverBond.get();
+
+	if (!bond) {
+		throw new Error('');
+	}
+
+	let {
+		class: klass = '',
+		as = 'button' as E,
+		preset = 'popover.trigger',
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: PopoverTriggerProps<E, B> = $props();
+
+	const triggerProps = $derived({
+		...bond.trigger(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{bond}
+	{preset}
+	class={['border-border flex w-fit cursor-pointer rounded-md p-2', '$preset', klass]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	type={as === 'button' ? 'button' : undefined}
+	{...triggerProps}
+>
+	{@render children?.({ popover: bond })}
+</HtmlAtom>

package/dist/components/popover/popover-trigger.svelte.d.ts

@@ -1,11 +1,5 @@
-export type PopoverTriggerProps<T extends keyof HTMLElementTagNameMap, B extends Base = Base> = HtmlAtomProps<T, B> & {
-    children?: Snippet<[{
-        popover?: PopoverBond;
-    }]>;
-};
-import type { Snippet } from 'svelte';
-import { type HtmlAtomProps, type Base } from '../atom';
-import { PopoverBond } from './bond.svelte';
+import { type Base } from '../atom';
+import type { PopoverTriggerProps } from './types';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
     props: PopoverTriggerProps<E, B>;
     exports: {};

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

@@ -0,0 +1,39 @@
+import type { Snippet } from 'svelte';
+import type { Placement } from '@floating-ui/dom';
+import type { Factory } from '../../types';
+import type { PopoverBond } from './bond.svelte';
+import type { Override } from '../../types';
+import type { Base, HtmlAtomProps } from '../atom';
+import type { HtmlElementTagName } from '../element';
+import type { PortalBond } from '../portal';
+export type PopoverRootProps = {
+    open?: boolean;
+    disabled?: boolean;
+    placements?: Placement[];
+    placement?: Placement;
+    offset?: number;
+    portal?: string | PortalBond;
+    extend?: Record<string, unknown>;
+    factory?: Factory<PopoverBond>;
+    children?: Snippet<[{
+        popover: PopoverBond;
+    }]>;
+};
+export type AnimateParams = {
+    x: number;
+    y: number;
+    xOffset: number;
+    yOffset: number;
+    open: boolean;
+};
+export type PopoverContentProps<T extends HtmlElementTagName, B extends Base = Base> = Override<HtmlAtomProps<T, B>, {
+    children?: Snippet<[{
+        popover?: PopoverBond;
+    }]>;
+}>;
+export type PopoverArrowProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B>;
+export type PopoverTriggerProps<T extends keyof HTMLElementTagNameMap, B extends Base = Base> = HtmlAtomProps<T, B> & {
+    children?: Snippet<[{
+        popover?: PopoverBond;
+    }]>;
+};

package/dist/components/popover/types.js

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

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

@@ -1,16 +1,22 @@
-<script>
-	import { PortalsBond } from './portals/bond.svelte';
-
-	let { id, children = undefined } = $props();
-
-	const portalsBond = PortalsBond.get();
-	const activePortal = portalsBond?.state.get(id)?.share();
-
-	if (!portalsBond) {
-		throw new Error('Portals bond is not found');
-	}
-</script>
-
-{#if activePortal}
-	{@render children?.()}
-{/if}
+<script>
+	import { PortalsBond } from './portals/bond.svelte';
+
+	let { portal, children = undefined } = $props();
+
+	const portalsBond = PortalsBond.get();
+	const activePortal = (() => {
+		if (typeof portal === 'string') {
+			return portalsBond?.state?.get(portal) ?? undefined;
+		}
+
+		return portal;
+	})()?.share();
+
+	if (!portalsBond) {
+		throw new Error('Portals bond is not found');
+	}
+</script>
+
+{#if activePortal}
+	{@render children?.()}
+{/if}

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

@@ -4,10 +4,10 @@ type ActivePortal = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const ActivePortal: import("svelte").Component<{
-    id: any;
+    portal: any;
     children?: any;
 }, {}, "">;
 type $$ComponentProps = {
-    id: any;
+    portal: any;
     children?: any;
 };

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

@@ -33,7 +33,7 @@
 <HtmlAtom
 	{bond}
 	preset="portal.inner"
-	class={['relative size-full', '$preset', klass]}
+	class={['border-border relative size-full', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

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

@@ -75,7 +75,7 @@
 <HtmlAtom
 	{bond}
 	preset="portal"
-	class={['pointer-events-none', '$preset', klass]}
+	class={['border-border pointer-events-none', '$preset', klass]}
 	enter={enter?.bind(bond.state)}
 	exit={exit?.bind(bond.state)}
 	initial={initial?.bind(bond.state)}

package/dist/components/portal/teleport.svelte

@@ -1,49 +1,55 @@
-<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">
+	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 | PortalBond;
+	};
+</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';
+	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,9 +1,10 @@
 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;
+    portal?: string | PortalBond;
 };
 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;
@@ -23,7 +24,7 @@ declare function $$render<E extends HtmlElementTagName = 'div', B extends Base =
         preset?: import("../..").ModuleName | (string & {});
         variants?: import("../..").VariantDefinition<any> | ((bond: import("../..").Bond, variantProps: Record<string, any>) => Record<string, any>);
     } & {
-        portal?: string;
+        portal?: string | PortalBond;
     } & HTMLAttributes<HtmlElementType<E>>;
     exports: {};
     bindings: "";

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

@@ -72,7 +72,7 @@
 <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]',
+		'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, {}])
@@ -99,11 +99,11 @@
 	{#if isChecked}
 		{#if checkedContent}
 			<HtmlAtom
-				class="rounded-inherit pointer-events-none size-full bg-current"
+				class="rounded-inherit pointer-events-none size-1/2 bg-current"
 				base={checkedContent}
 			/>
 		{:else}
-			<Stack.Item class="rounded-inherit pointer-events-none size-full bg-current"></Stack.Item>
+			<Stack.Item class="rounded-inherit pointer-events-none size-1/2 bg-current"></Stack.Item>
 		{/if}
 	{/if}
 </Stack.Root>