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

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

@@ -1,76 +1,64 @@
-<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 { HTMLAttributes } from 'svelte/elements';
-	import type { PortalOuterProps } from './types';
-	import { PortalsBond, PortalBond, PortalState, type PortalStateProps } from '.';
-	import { RootBond } from '../root';
-	import { HtmlAtom, type ElementType, 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), defineProperty('rest', () => restProps)]);
-	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>
+<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 { HTMLAttributes } from 'svelte/elements';
+	import type { PortalOuterProps } from './types';
+	import { PortalsBond, PortalBond, PortalState, type PortalStateProps } from '.';
+	import { RootBond } from '../root';
+	import { HtmlAtom, type ElementType, type Base } from '../atom';
+	import { defineProperty, defineState } from '../../utils';
+
+	type Element = ElementType<E>;
+
+	let {
+		class: klass = '',
+		id,
+		factory = _factory,
+		children = undefined,
+		...restProps
+	}: PortalOuterProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const rootBond = RootBond.get();
+	const portalsBond = PortalsBond.get();
+
+	const bondProps = defineState<PortalStateProps>([defineProperty('id', () => id), defineProperty('rest', () => restProps)]);
+	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().spread,
+		...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]}
+	{...rootProps}
+>
+	{@render children?.()}
+</HtmlAtom>

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

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'svelte/elements';
 import { PortalBond } from '.';
 import { type ElementType, type Base } from '../atom';
 declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
-    props: import("../atom").HtmlAtomProps<E, B> & import("./types").PortalOuterExtendProps & {
+    props: import("../atom").HtmlAtomProps<E, B, import("./types").PortalChildren> & {
         id: import("../root/root.svelte").RootPortals | (string & {});
         children?: import("svelte").Snippet;
     } & HTMLAttributes<ElementType<E>>;

package/dist/components/portal/portals/bond.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { PortalBond } from '../bond.svelte.js';
-import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelte.js';
+import type { PortalBond } from '../bond.svelte';
+import { Bond, BondState, type BondStateProps } from '../../../shared/bond.svelte';
 export type PortalsStateProps = BondStateProps & {
     id: string;
 };

package/dist/components/portal/portals/bond.svelte.js

@@ -1,10 +1,10 @@
 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 PortalsBond extends Bond {
     static CONTEXT_KEY = '@atoms/context/portals';
     constructor(bond) {
-        super(bond);
+        super(bond, 'portals');
     }
     share() {
         return PortalsBond.set(this);

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, Children extends Snippet<unknown[]> = PortalChildren> = HtmlAtomProps<E, B, Children> & {
     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/progress/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ProgressLinear } from './progress-linear.svelte';
+export { default as ProgressCircular } from './progress-circular.svelte';
+export * from './types';

package/dist/components/progress/index.js

@@ -0,0 +1,3 @@
+export { default as ProgressLinear } from './progress-linear.svelte';
+export { default as ProgressCircular } from './progress-circular.svelte';
+export * from './types';

package/dist/components/progress/progress-circular.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom } from '../atom';
+	import type { ProgressCircularProps } from './types';
+	import { SvgElement } from '../element'
+
+	let {
+		class: klass = '',
+		value = null,
+		max = 100,
+		preset = 'progress.circular',
+		...restProps
+	}: ProgressCircularProps & HTMLAttributes<HTMLDivElement> = $props();
+
+	const isIndeterminate = $derived(value === null || value === undefined);
+	const percent = $derived(isIndeterminate ? null : Math.min(100, Math.max(0, (value! / max) * 100)));
+
+	const radius = 20;
+	const circumference = 2 * Math.PI * radius;
+	const strokeDashoffset = $derived(
+		isIndeterminate ? circumference : circumference - (percent! / 100) * circumference
+	);
+</script>
+
+{#snippet defaultCircularFill()}
+	<SvgElement
+		as="circle"
+		preset="progress.circular.fill"
+		cx="24"
+		cy="24"
+		r={radius}
+		fill="none"
+		stroke-width="4"
+		stroke-linecap="round"
+		stroke-dasharray={circumference}
+		stroke-dashoffset={strokeDashoffset}
+		class={[
+			'stroke-foreground origin-center duration-300',
+			!isIndeterminate && 'transition-[stroke-dashoffset]',
+			isIndeterminate && 'animate-progress-circular-indeterminate'
+		]
+			.filter(Boolean)
+			.join(' ')}
+	/>
+{/snippet}
+
+<HtmlAtom
+	{preset}
+	as="div"
+	class={[
+		'progress-root progress-root--circular relative inline-flex items-center justify-center',
+		'$preset',
+		klass
+	]}
+	role="progressbar"
+	aria-valuemin={0}
+	aria-valuemax={max}
+	aria-valuenow={isIndeterminate ? undefined : value ?? undefined}
+	aria-valuetext={isIndeterminate ? undefined : `${Math.round(percent!)}%`}
+	data-indeterminate={isIndeterminate}
+	data-value={isIndeterminate ? undefined : value ?? undefined}
+	data-max={max}
+	data-completed={!isIndeterminate && percent === 100}
+	{...restProps}
+>
+	<svg viewBox="0 0 48 48" class="h-full w-full -rotate-90" aria-hidden="true">
+		<SvgElement
+			as="circle"
+			preset="progress.circular.track"
+			cx="24"
+			cy="24"
+			r={radius}
+			fill="none"
+			stroke-width="4"
+			class="stroke-input"
+		/>
+		{@render defaultCircularFill()}
+	</svg>
+</HtmlAtom>
+
+<style>
+	@keyframes progress-circular-spin {
+		0% { transform: rotate(0deg); }
+		100% { transform: rotate(360deg); }
+	}
+
+	@keyframes progress-circular-dash {
+		0% { stroke-dashoffset: 119; }
+		50% { stroke-dashoffset: 30; }
+		100% { stroke-dashoffset: 119; }
+	}
+
+	:global(.animate-progress-circular-indeterminate) {
+		animation:
+			progress-circular-spin 1.4s linear infinite,
+			progress-circular-dash 1.4s ease-in-out infinite;
+		transform-origin: center;
+	}
+</style>

package/dist/components/progress/progress-circular.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ProgressCircularProps } from './types';
+type $$ComponentProps = ProgressCircularProps & HTMLAttributes<HTMLDivElement>;
+declare const ProgressCircular: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProgressCircular = ReturnType<typeof ProgressCircular>;
+export default ProgressCircular;

package/dist/components/progress/progress-linear.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { HtmlAtom } from '../atom';
+	import type { ProgressLinearProps } from './types';
+	import { HtmlElement } from '../element';
+
+	let {
+		class: klass = '',
+		value = null,
+		max = 100,
+		preset = 'progress.linear',
+		...restProps
+	}: ProgressLinearProps & HTMLAttributes<HTMLDivElement> = $props();
+
+	const isIndeterminate = $derived(value === null || value === undefined);
+	const percent = $derived(isIndeterminate ? null : Math.min(100, Math.max(0, (value! / max) * 100)));
+</script>
+
+{#snippet defaultLinearFill({ percent: p }: { percent: number | null })}
+	<HtmlElement
+		preset="progress.linear.fill"
+		as="div"
+		class={[
+			'progress-fill bg-foreground h-full rounded-full transition-[width] duration-300',
+			isIndeterminate && 'animate-progress-indeterminate w-1/3',
+			'$preset'
+		]}
+		style={p !== null ? `width: ${p}%` : undefined}
+	/>
+{/snippet}
+
+<HtmlAtom
+	{preset}
+	as="div"
+	class={['progress-root flex flex-col gap-1', '$preset', klass]}
+	role="progressbar"
+	aria-valuemin={0}
+	aria-valuemax={max}
+	aria-valuenow={isIndeterminate ? undefined : value ?? undefined}
+	aria-valuetext={isIndeterminate ? undefined : `${Math.round(percent!)}%`}
+	data-indeterminate={isIndeterminate}
+	data-value={isIndeterminate ? undefined : value ?? undefined}
+	data-max={max}
+	data-completed={!isIndeterminate && percent === 100}
+	{...restProps}
+>
+	<HtmlElement
+		preset="progress.linear.track"
+		as="div"
+		class="progress-track bg-input border-none p-0.5 h-2 w-full overflow-hidden rounded-full border $preset"
+	>
+		{@render defaultLinearFill({ percent })}
+	</HtmlElement>
+</HtmlAtom>
+
+<style>
+	@keyframes progress-indeterminate {
+		0%   { transform: translateX(-100%); }
+		50%  { transform: translateX(300%); }
+		100% { transform: translateX(-100%); }
+	}
+
+	:global(.animate-progress-indeterminate) {
+		animation: progress-indeterminate 1.8s ease-in-out infinite;
+	}
+</style>

package/dist/components/progress/progress-linear.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ProgressLinearProps } from './types';
+type $$ComponentProps = ProgressLinearProps & HTMLAttributes<HTMLDivElement>;
+declare const ProgressLinear: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProgressLinear = ReturnType<typeof ProgressLinear>;
+export default ProgressLinear;

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

@@ -0,0 +1,18 @@
+import type { HtmlAtomProps } from '../atom';
+interface ProgressSharedProps {
+    /**
+     * Current value (0–max). Set to `null` for indeterminate state.
+     * @default null
+     */
+    value?: number | null;
+    /**
+     * Maximum value
+     * @default 100
+     */
+    max?: number;
+}
+export interface ProgressLinearProps extends HtmlAtomProps<'div'>, ProgressSharedProps {
+}
+export interface ProgressCircularProps extends HtmlAtomProps<'div'>, ProgressSharedProps {
+}
+export {};

package/dist/components/progress/types.js

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

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>;