@svelte-atoms/core 1.0.0-alpha.41 → 1.0.0-alpha.44

package/dist/components/portal/teleport.svelte

@@ -1,49 +1,47 @@
-<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 Base } from '../atom';
-	import type { HtmlElementTagName, HtmlElementType } from '../element';
-	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.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}
+<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 Base } from '../atom';
+	import type { HtmlElementTagName, HtmlElementType } from '../element';
+	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.by(() => {
+		if (typeof portal === 'string') {
+			const p = portalsBond?.state.get(portal);
+			if(p) return p;
+
+			return rootBond?.state?.getPortal(portal!);
+		}
+
+		return portal;
+	});
+
+	const targetElement = $derived(portalBond?.targetElement);
+
+	const ui = $derived(targetElement ? content : undefined);
+
+	function teleport(node: HTMLElement) {
+
+		const unport = port(node, targetElement);
+
+		return unport;
+	}
+</script>
+
+{#snippet content()}
+	<HtmlAtom {@attach teleport} as={as as E} {base} {...restProps}>
+		{@render children?.({ portal: portalBond })}
+	</HtmlAtom>
+{/snippet}
+
+{@render ui?.()}

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

@@ -1,9 +1,8 @@
-export type { TeleportProps } from './types';
 import type { HTMLAttributes } from 'svelte/elements';
 import { type Base } from '../atom';
 import type { HtmlElementTagName, HtmlElementType } from '../element';
 declare function $$render<E extends HtmlElementTagName = 'div', B extends Base = Base>(): {
-    props: import("../atom").HtmlAtomProps<E, B> & import("./types").TeleportExtendProps & {
+    props: import("../atom").HtmlAtomProps<E, B, import("./types").PortalChildren> & {
         portal?: string | import("./bond.svelte").PortalBond;
     } & HTMLAttributes<HtmlElementType<E>>;
     exports: {};

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

@@ -1,39 +1,21 @@
 import type { Snippet } from 'svelte';
-import type { HtmlAtomProps, Base } from '../atom';
+import type { HtmlAtomProps, Base, SnippetProps } 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 {
+export interface PortalSnippetProps extends SnippetProps {
+    portal: PortalBond;
 }
-/**
- * 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 & {
+export type PortalChildren = Snippet<[PortalSnippetProps]>;
+export type PortalRootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B, PortalChildren> & {
     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 & {
+export type PortalOuterProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = HtmlAtomProps<E, B, PortalChildren> & {
     id: RootPortals | (string & {});
     children?: Snippet;
 };
-export type TeleportProps<E extends HtmlElementTagName = 'div', B extends Base = Base> = HtmlAtomProps<E, B> & TeleportExtendProps & {
+export type TeleportProps<E extends HtmlElementTagName = 'div', B extends Base = Base> = HtmlAtomProps<E, B, PortalChildren> & {
     portal?: string | PortalBond;
 };
-/**
- * @deprecated Use PortalRootExtendProps instead
- */
-export type PortalExtendProps = PortalRootExtendProps;

package/dist/components/portal/utils.js

@@ -2,18 +2,18 @@ export function port(node, target = document.body) {
     if (!target) {
         throw Error('[actions] portal: Target element is undefined !');
     }
+    const opacity = node.style.opacity;
     if (node.parentElement !== target) {
-        // node.hidden = true;
+        node.style.opacity = '0';
         // Check if element is already mounted on target
         if (node.parentElement !== target) {
             target.appendChild(node);
             requestAnimationFrame(() => {
-                node.hidden = false;
+                node.style.opacity = opacity;
             });
         }
     }
     return () => {
-        node.hidden = true;
         node.remove();
     };
 }

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

@@ -0,0 +1,16 @@
+export declare const LAYER_BASE: {
+    readonly sidebar: 100;
+    readonly drawer: 200;
+    readonly dialog: 300;
+    readonly popover: 400;
+    readonly tooltip: 500;
+};
+export type LayerName = keyof typeof LAYER_BASE;
+export declare class ZLayer {
+    #private;
+    constructor(base: number | LayerName, offset?: () => number);
+    get(): number;
+    share(): ZLayer;
+    static get: () => ZLayer;
+    static set: (context: ZLayer) => ZLayer;
+}

package/dist/components/portal/zlayer.svelte.js

@@ -0,0 +1,25 @@
+import { createContext } from 'svelte';
+const [get, set] = createContext();
+export const LAYER_BASE = {
+    sidebar: 100,
+    drawer: 200,
+    dialog: 300,
+    popover: 400,
+    tooltip: 500
+};
+export class ZLayer {
+    #base;
+    #offset;
+    constructor(base, offset = () => 0) {
+        this.#base = typeof base === 'string' ? LAYER_BASE[base] : base;
+        this.#offset = offset;
+    }
+    get() {
+        return this.#base + this.#offset();
+    }
+    share() {
+        return ZLayer.set(this);
+    }
+    static get = get;
+    static set = set;
+}

package/dist/components/radio/index.d.ts

@@ -1,2 +1,4 @@
 export { default as Radio } from './radio.svelte';
 export { default as RadioGroup } from './radio-group.svelte';
+export type { RadioSnippetProps, RadioChildren } from './types';
+export * from './motion';

package/dist/components/radio/index.js

@@ -1,2 +1,3 @@
 export { default as Radio } from './radio.svelte';
 export { default as RadioGroup } from './radio-group.svelte';
+export * from './motion';

package/dist/components/radio/motion.d.ts

@@ -0,0 +1,24 @@
+import type { EasingFunction } from 'svelte/transition';
+import type { TransitionFunction } from '../element';
+export type AnimateRadioIndicatorParams = {
+    /** Animation duration in milliseconds (default: 200 for in, 150 for out) */
+    duration?: number;
+    /** Delay before animation starts in milliseconds (default: 0) */
+    delay?: number;
+    /** Custom easing function (default: cubicOut for in, cubicIn for out) */
+    easing?: EasingFunction;
+};
+/**
+ * Enter transition for radio indicator (check)
+ * Smooth scale and fade in
+ *
+ * Respects prefers-reduced-motion by using instant transition
+ */
+export declare function animateRadioIndicatorIn(params?: AnimateRadioIndicatorParams): TransitionFunction<HTMLElement>;
+/**
+ * Exit transition for radio indicator (uncheck)
+ * Quick scale and fade out
+ *
+ * Respects prefers-reduced-motion by using instant transition
+ */
+export declare function animateRadioIndicatorOut(params?: AnimateRadioIndicatorParams): TransitionFunction<HTMLElement>;

package/dist/components/radio/motion.js

@@ -0,0 +1,59 @@
+import { cubicOut, cubicIn } from 'svelte/easing';
+/**
+ * Check if user prefers reduced motion
+ */
+function prefersReducedMotion() {
+    if (typeof window === 'undefined')
+        return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * Enter transition for radio indicator (check)
+ * Smooth scale and fade in
+ *
+ * Respects prefers-reduced-motion by using instant transition
+ */
+export function animateRadioIndicatorIn(params = {}) {
+    const { duration = 200, delay = 0, easing = cubicOut } = params;
+    return () => {
+        // If user prefers reduced motion, use instant transition
+        if (prefersReducedMotion()) {
+            return {
+                duration: 0,
+                delay: 0,
+                css: () => ''
+            };
+        }
+        return () => ({
+            duration,
+            delay,
+            easing,
+            css: (t) => `transform: scale(${t}); opacity: ${t};`
+        });
+    };
+}
+/**
+ * Exit transition for radio indicator (uncheck)
+ * Quick scale and fade out
+ *
+ * Respects prefers-reduced-motion by using instant transition
+ */
+export function animateRadioIndicatorOut(params = {}) {
+    const { duration = 150, delay = 0, easing = cubicIn } = params;
+    return () => {
+        // If user prefers reduced motion, use instant transition
+        if (prefersReducedMotion()) {
+            return {
+                duration: 0,
+                delay: 0,
+                css: () => ''
+            };
+        }
+        return () => ({
+            duration,
+            delay,
+            easing,
+            css: (t) => `transform: scale(${t}); opacity: ${t};`
+        });
+    };
+}

package/dist/components/radio/radio.svelte

@@ -3,6 +3,7 @@
 	import { Stack } from '../stack';
 	import { toClassValue } from '../../utils';
 	import { HtmlAtom, type Base } from '../atom';
+	import { animateRadioIndicatorIn, animateRadioIndicatorOut } from './motion';
 
 	const radioGroupContext = getRadioGroupContext();
 
@@ -43,6 +44,8 @@
 	const isReadonly = $derived(_readonly || readonly);
 	const isChecked = $derived(proxy.current === value);
 
+	const checkedContentSnippet = $derived(isChecked ? checkedContent ? customCheckedContent: defaultCheckedContent : undefined);
+
 	function handleChange(ev: Event) {
 		const checked = (ev.currentTarget as HTMLInputElement)?.checked ?? false;
 
@@ -69,12 +72,28 @@
 	}
 </script>
 
+{#snippet defaultCheckedContent()}
+	<Stack.Item 
+		class="rounded-inherit pointer-events-none size-full scale-[0.6] bg-current" 
+		enter={animateRadioIndicatorIn()}
+		exit={animateRadioIndicatorOut()}
+	/>
+{/snippet}
+
+{#snippet customCheckedContent()}
+	<HtmlAtom
+		class="rounded-inherit pointer-events-none size-full scale-[0.6] bg-current"
+		base={checkedContent}
+		enter={animateRadioIndicatorIn()}
+		exit={animateRadioIndicatorOut()}
+	/>
+{/snippet}
+
 <Stack.Root
 	preset="radio"
 	class={[
-		'text-foreground bg-input box-border inline-flex aspect-square size-4 max-h-fit max-w-fit cursor-pointer place-items-center rounded-full border p-0',
+		'text-foreground bg-input box-border inline-flex aspect-square size-4 max-h-fit max-w-fit cursor-pointer place-items-center rounded-full border border-border p-0',
 		isDisabled && 'pointer-events-none opacity-50',
-		'$preset',
 		toClassValue.apply(null, [klass, {}])
 	]}
 	as="label"
@@ -96,14 +115,5 @@
 		/>
 	</Stack.Item>
 
-	{#if isChecked}
-		{#if checkedContent}
-			<HtmlAtom
-				class="rounded-inherit pointer-events-none size-full scale-50 bg-current"
-				base={checkedContent}
-			/>
-		{:else}
-			<Stack.Item class="rounded-inherit pointer-events-none size-full scale-50 bg-current" />
-		{/if}
-	{/if}
+	{@render checkedContentSnippet?.()}
 </Stack.Root>

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

@@ -1,16 +1,9 @@
 import { type Component, type Snippet } from 'svelte';
-import { type HtmlAtomProps } from '../atom';
-/**
- * Extend this interface to add custom radio properties in your application.
- */
-export interface RadioExtendProps {
+import { type HtmlAtomProps, type SnippetProps } from '../atom';
+export interface RadioSnippetProps extends SnippetProps {
 }
-/**
- * Extend this interface to add custom radio group properties in your application.
- */
-export interface RadioGroupExtendProps {
-}
-export interface RadioProps<T = string> extends HtmlAtomProps<'label'>, RadioExtendProps {
+export type RadioChildren = Snippet<[RadioSnippetProps]>;
+export interface RadioProps<T = string> extends HtmlAtomProps<'label', never, RadioChildren> {
     /**
      * The value of the radio button
      */
@@ -46,7 +39,6 @@ export interface RadioProps<T = string> extends HtmlAtomProps<'label'>, RadioExt
     /**
      * Child content (label text)
      */
-    children?: Snippet<[]>;
     /**
      * Change event handler
      */
@@ -64,7 +56,7 @@ export interface RadioProps<T = string> extends HtmlAtomProps<'label'>, RadioExt
         type: 'boolean';
     }) => void;
 }
-export interface RadioGroupProps<T = string> extends HtmlAtomProps<'div'>, RadioGroupExtendProps {
+export interface RadioGroupProps<T = string> extends HtmlAtomProps<'div', never, RadioChildren> {
     /**
      * The currently selected value
      */
@@ -88,7 +80,6 @@ export interface RadioGroupProps<T = string> extends HtmlAtomProps<'div'>, Radio
     /**
      * Child content (radio buttons)
      */
-    children?: Snippet<[]>;
     /**
      * Input event handler triggered when the selected value changes
      */

package/dist/components/root/bond.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { PortalBond } from '../portal/bond.svelte.js';
-import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte.js';
+import type { PortalBond } from '../portal/bond.svelte';
+import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
 import type { Component } from 'svelte';
 export type RootStateProps<T extends Record<string, unknown> = Record<string, unknown>> = BondStateProps & {
     renderers?: {

package/dist/components/root/bond.svelte.js

@@ -1,6 +1,6 @@
 import { SvelteMap } from 'svelte/reactivity';
 import { getContext, setContext } from 'svelte';
-import { Bond, BondState } from '../../shared/bond.svelte.js';
+import { Bond, BondState } from '../../shared/bond.svelte';
 export class RootBond extends Bond {
     static CONTEXT_KEY = '@atomic-sv/bonds/root';
     constructor(atom) {

package/dist/components/root/root.svelte

@@ -1,92 +1,82 @@
-<script module lang="ts">
-	export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
-</script>
-
-<script lang="ts">
-	import { cn, defineState, defineProperty } from '../../utils';
-	import { ActivePortal, Portals } from '../portal';
-	import { HtmlAtom as Atom } from '../atom';
-	import { HtmlElement, SvgElement } from '../element';
-	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
-	import L0Portal from './l0-portal.svelte';
-	import L1Portal from './l1-portal.svelte';
-	import type { RootProps } from './types';
-
-	let {
-		class: klass = '',
-		base = undefined,
-		children = undefined,
-		portals = undefined,
-		l0portal = undefined,
-		l1portal = undefined,
-		...restProps
-	}: RootProps = $props();
-
-	let html: typeof HtmlElement | undefined = $state(HtmlElement);
-	let svg: typeof SvgElement | undefined = $state(undefined);
-
-	type Renderers = {
-		html?: typeof HtmlElement;
-		svg?: typeof SvgElement;
-	};
-
-	const renderers = defineState<Renderers>([
-		defineProperty('html', () => {
-			if (!html) {
-				import('../element/html-element.svelte').then((mod) => {
-					html = mod.default;
-				});
-			}
-
-			return html;
-		}),
-		defineProperty('svg', () => {
-			if (!svg) {
-				import('../element/svg-element.svelte').then((mod) => {
-					svg = mod.default;
-				});
-			}
-
-			return svg;
-		})
-	]);
-
-	const bondProps = defineState<RootStateProps>([defineProperty('renderers', () => renderers)]);
-
-	const bondState = new RootBondState(() => bondProps);
-	const bond = new RootBond(bondState).share();
-</script>
-
-<Portals id="root">
-	<Atom
-		{@attach (node) => {
-			bond.rootElement = node;
-		}}
-		{base}
-		preset="root"
-		class={cn(
-			'atom-root bg-background text-foreground relative flex h-full w-full flex-1 flex-col items-start justify-stretch font-sans',
-			'$preset',
-			klass
-		)}
-		{...restProps}
-	>
-		{#if l0portal}
-			{@render l0portal?.()}
-		{:else}
-			<L0Portal />
-		{/if}
-
-		{#if l1portal}
-			{@render l1portal?.()}
-		{:else}
-			<L1Portal />
-		{/if}
-
-		{@render portals?.()}
-
-		<ActivePortal portal="root.l0">
-			{@render children?.()}
-		</ActivePortal>
-	</Atom>
-</Portals>
+<script module lang="ts">
+	export type RootPortals = 'root.l0';
+</script>
+
+<script lang="ts">
+	import { cn, defineState, defineProperty } from '../../utils';
+	import { ActivePortal, Portal, Portals } from '../portal';
+	import { HtmlAtom as Atom } from '../atom';
+	import { HtmlElement, SvgElement } from '../element';
+	import { RootBond, RootBondState, type RootStateProps } from './bond.svelte';
+	import type { RootProps } from './types';
+
+	let {
+		class: klass = '',
+		base = undefined,
+		children = undefined,
+		portal = undefined,
+		...restProps
+	}: RootProps = $props();
+
+	let html: typeof HtmlElement | undefined = $state(HtmlElement);
+	let svg: typeof SvgElement | undefined = $state(undefined);
+
+	type Renderers = {
+		html?: typeof HtmlElement;
+		svg?: typeof SvgElement;
+	};
+
+	const renderers = defineState<Renderers>([
+		defineProperty('html', () => {
+			if (!html) {
+				import('../element/html-element.svelte').then((mod) => {
+					html = mod.default;
+				});
+			}
+
+			return html;
+		}),
+		defineProperty('svg', () => {
+			if (!svg) {
+				import('../element/svg-element.svelte').then((mod) => {
+					svg = mod.default;
+				});
+			}
+
+			return svg;
+		})
+	]);
+
+	const bondProps = defineState<RootStateProps>([defineProperty('renderers', () => renderers)]);
+
+	const bondState = new RootBondState(() => bondProps);
+	const bond = new RootBond(bondState).share();
+</script>
+
+<Portals id="root">
+	<Atom
+		{@attach (node) => {
+			bond.rootElement = node;
+		}}
+		{base}
+		preset="root"
+		class={cn(
+			'atom-root bg-background text-foreground relative flex h-full w-full flex-1 flex-col items-start justify-stretch font-sans',
+			'$preset',
+			klass
+		)}
+		{...restProps}
+	>
+		{#if portal}
+			{@render portal?.()}
+		{:else}
+			<Portal.Outer id="root.l0" class="pointer-events-none absolute inset-0 z-10 overflow-hidden">
+				<Portal.Inner />
+			</Portal.Outer>
+		{/if}
+
+		<ActivePortal portal="root.l0">
+			{@render children?.()}
+		</ActivePortal>
+	</Atom>
+</Portals>

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

@@ -1,5 +1,5 @@
-export type RootPortals = 'root.l0' | 'root.l1' | 'root.l2' | 'root.l3';
+export type RootPortals = 'root.l0';
 import type { RootProps } from './types';
-declare const Root: import("svelte").Component<RootProps<"div", import("../atom").ComponentBase | import("../atom").SnippetBase>, {}, "">;
+declare const Root: import("svelte").Component<RootProps<"div", import("../atom").SnippetBase>, {}, "">;
 type Root = ReturnType<typeof Root>;
 export default Root;

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

@@ -1,25 +1,14 @@
-import type { HtmlAtomProps, Base } from '../atom';
+import type { HtmlAtomProps, Base, SnippetProps } from '../atom';
 import type { Snippet } from 'svelte';
-/**
- * Extend this interface to add custom root properties in your application.
- */
-export interface RootExtendProps {
+export interface RootSnippetProps extends SnippetProps {
 }
-export interface RootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B>, RootExtendProps {
+export type RootChildren = Snippet<[RootSnippetProps]>;
+export interface RootProps<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> extends HtmlAtomProps<E, B, RootChildren> {
     /**
      * Main content to render inside the root component.
      */
-    children?: Snippet;
     /**
      * Custom portal configuration snippet.
      */
     portals?: Snippet;
-    /**
-     * Custom L0 portal snippet (z-10 layer for popovers).
-     */
-    l0portal?: Snippet;
-    /**
-     * Custom L1 portal snippet (z-12 layer).
-     */
-    l1portal?: Snippet;
 }