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

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

@@ -1,118 +0,0 @@
-<script lang="ts">
-	import type { autoUpdate, ComputePositionConfig } from "@floating-ui/dom";
-	import { PopoverBond, type PopoverParams } from "./bond.svelte";
-	import { offset } from "@floating-ui/dom";
-	import { flip } from "svelte/animate";
-	import { shift } from "@floating-ui/dom";
-	import { computePosition } from "@floating-ui/dom";
-
-    const bond = PopoverBond.get();
-    const placement = $derived(bond?.state.props.placement);
-    const placements = $derived(bond?.state.props.placements);
-    const offsetValue = $derived(bond?.state.props.offset);
-    const portal = $derived(bond?.state.props.portal);
-
-    let {} = $props();
-
-    $effect.pre(() => {
-        if(!bond) {
-            return;
-        }
-
-        const trigger = bond.elements.trigger;
-        if(!trigger) {
-            return;
-        }
-        const content = bond.elements.content;
-        if(!content) {
-            return;
-        }
-
-
-
-    });
-
-    function popover(bond: PopoverBond) {
-	    return (props: Record<string, unknown>, updater?: typeof autoUpdate) => {
-            const { offset: ofs, placements, placement } = bond.state.props;
-
-            // Guard: ensure required elements exist
-            if (!bond.elements.content || !bond.elements.trigger) {
-                return;
-            }
-
-            const { content, trigger, arrow: arrowElement } = bond.elements;
-
-            // Build middleware stack
-            const middleware: ComputePositionConfig['middleware'] = [
-                offset(ofs),
-                flip({
-                    fallbackPlacements: placements,
-                    padding: 8,
-                    crossAxis: true,
-                    fallbackStrategy: 'bestFit',
-                    
-                }),
-                shift({
-                    padding: 8,
-                    limiter: {
-                        fn: (state) => {
-                            const { x, y } = state;
-                            return {
-                                x,
-                                y
-                            };
-                        }
-                    }
-                })
-            ];
-
-            // Add arrow middleware if element exists
-            if (arrowElement) {
-                middleware.push(arrow({ element: arrowElement }));
-            }
-
-            // Debounce position change callback
-            const onchangeCallback = props.onchange as PopoverParams['onchange'];
-
-            // Compute position and notify listeners
-            const compute = async () => {
-                // Wait for next frame to ensure DOM has settled and styles are applied
-                // Double requestAnimationFrame - This ensures the browser has completed both layout calculation AND painting, giving us accurate final dimensions
-                await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
-
-                const position = await computePosition(trigger, content, {
-                    placement: placement ?? 'bottom',
-                    middleware
-                });
-
-                // Round to 0.001 precision to avoid excessive updates from sub-pixel changes
-                const x = Math.round((position.x ?? 0) * 100) / 100;
-                const y = Math.round((position.y ?? 0) * 100) / 100;
-
-                bond.state.position = {
-                    middlewareData: position.middlewareData,
-                    placement: position.placement,
-                    strategy: position.strategy,
-                    x,
-                    y
-                };
-                onchangeCallback?.(content, position);
-
-                // Set minimum width to match trigger
-                requestAnimationFrame(() => {
-                    content.style.minWidth = `${trigger.clientWidth}px`;
-                });
-            };
-
-            // Use auto-update if provided, otherwise compute once
-            if (updater) {
-                return updater(trigger, content, compute, {
-                    ancestorScroll: false
-                });
-            }
-
-            compute();
-	};
-}
-</script>

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

@@ -1,3 +0,0 @@
-declare const PopoverEngine: import("svelte").Component<$$ComponentProps, {}, "">;
-type PopoverEngine = ReturnType<typeof PopoverEngine>;
-export default PopoverEngine;

package/dist/components/toast/bond.d.ts

@@ -1,35 +0,0 @@
-import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte';
-export type ToastBondProps = BondStateProps & {
-    open: boolean;
-    disabled: boolean;
-    extend?: Record<string, unknown>;
-};
-export type ToastBondElements = {
-    root: HTMLElement;
-    title: HTMLElement;
-    description: HTMLElement;
-};
-export declare class ToastBond<Props extends ToastBondProps = ToastBondProps, State extends ToastBondState<Props> = ToastBondState<Props>> extends Bond<Props, State, ToastBondElements> {
-    static CONTEXT_KEY: string;
-    constructor(s: State);
-    share(): this;
-    root(props?: Record<string, unknown>): {
-        id: string;
-        'aria-labeledby': string;
-        'aria-describedby': string;
-        'aria-disabled': boolean;
-    };
-    title(props?: Record<string, unknown>): {
-        id: string;
-    };
-    description(props?: Record<string, unknown>): {
-        id: string;
-    };
-    static get(): ToastBond | undefined;
-    static set(atom: ToastBond): ToastBond;
-}
-export declare class ToastBondState<Props extends ToastBondProps> extends BondState<Props> {
-    constructor(props: () => Props);
-    open(): void;
-    close(): void;
-}

package/dist/components/toast/bond.js

@@ -1,59 +0,0 @@
-import { Bond, BondState } from '../../shared/bond.svelte';
-import { getContext, setContext } from 'svelte';
-import { createAttachmentKey } from 'svelte/attachments';
-export class ToastBond extends Bond {
-    static CONTEXT_KEY = '@atoms/context/toast';
-    constructor(s) {
-        super(s);
-    }
-    share() {
-        return ToastBond.set(this);
-    }
-    root(props = {}) {
-        return {
-            id: `toast-root-${this.id}`,
-            'aria-labeledby': `toast-title-${this.id}`,
-            'aria-describedby': `toast-description-${this.id}`,
-            'aria-disabled': this.state.props.disabled ?? false,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.root = node;
-            }
-        };
-    }
-    title(props = {}) {
-        return {
-            id: `toast-title-${this.id}`,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.title = node;
-            }
-        };
-    }
-    description(props = {}) {
-        return {
-            id: `toast-description-${this.id}`,
-            ...props,
-            [createAttachmentKey()]: (node) => {
-                this.elements.description = node;
-            }
-        };
-    }
-    static get() {
-        return getContext(this.CONTEXT_KEY);
-    }
-    static set(atom) {
-        return setContext(this.CONTEXT_KEY, atom);
-    }
-}
-export class ToastBondState extends BondState {
-    constructor(props) {
-        super(props);
-    }
-    open() {
-        this.props.open = true;
-    }
-    close() {
-        this.props.open = false;
-    }
-}

package/dist/components/toast/manager.svelte.d.ts

@@ -1,38 +0,0 @@
-import { ToastBond } from './bond';
-export type ToastType = 'info' | 'success' | 'error' | 'warning' | 'default';
-export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export interface ToastItem {
-    id: string;
-    type: ToastType;
-    title?: string | undefined;
-    description?: string | undefined;
-    duration: number;
-    dismissible: boolean;
-    bond: ToastBond;
-    open: boolean;
-}
-export interface ToastOptions {
-    id?: string;
-    description?: string;
-    duration?: number;
-    dismissible?: boolean;
-}
-declare class ToastManager {
-    #private;
-    get toasts(): ToastItem[];
-    add(title: string, type?: ToastType, options?: ToastOptions): string;
-    dismiss(id: string): void;
-    dismissAll(): void;
-    remove(id: string): void;
-}
-export declare const toastManager: ToastManager;
-export declare function toast(title: string, options?: ToastOptions): string;
-export declare namespace toast {
-    var info: (title: string, options?: ToastOptions) => string;
-    var success: (title: string, options?: ToastOptions) => string;
-    var error: (title: string, options?: ToastOptions) => string;
-    var warning: (title: string, options?: ToastOptions) => string;
-    var dismiss: (id: string) => void;
-    var dismissAll: () => void;
-}
-export {};

package/dist/components/toast/manager.svelte.js

@@ -1,82 +0,0 @@
-import { nanoid } from 'nanoid';
-import { ToastBond, ToastBondState } from './bond';
-import { defineProperty, defineState } from '../../utils';
-const DEFAULT_DURATION = 4000;
-class ToastManager {
-    #toasts = $state([]);
-    get toasts() {
-        return this.#toasts;
-    }
-    add(title, type = 'default', options = {}) {
-        const id = options.id ?? nanoid(8);
-        // If a toast with this id already exists, update it
-        const existing = this.#toasts.find((t) => t.id === id);
-        if (existing) {
-            existing.title = title;
-            existing.type = type;
-            if (options.description !== undefined)
-                existing.description = options.description;
-            return id;
-        }
-        const duration = options.duration ?? DEFAULT_DURATION;
-        const dismissible = options.dismissible ?? true;
-        let open = $state(true);
-        const bondProps = defineState([
-            defineProperty('open', () => open, (v) => {
-                open = v;
-                if (!v) {
-                    // Remove after exit animation completes
-                    setTimeout(() => this.remove(id), 300);
-                }
-            })
-        ], () => ({ disabled: false, extend: {} }));
-        const bondState = new ToastBondState(() => bondProps);
-        const bond = new ToastBond(bondState);
-        const item = {
-            id,
-            type,
-            title,
-            description: options.description,
-            duration,
-            dismissible,
-            bond,
-            get open() {
-                return open;
-            }
-        };
-        this.#toasts.push(item);
-        // Auto-dismiss
-        if (duration > 0) {
-            setTimeout(() => {
-                open = false;
-            }, duration);
-        }
-        return id;
-    }
-    dismiss(id) {
-        const item = this.#toasts.find((t) => t.id === id);
-        if (item) {
-            item.bond.state.close();
-        }
-    }
-    dismissAll() {
-        for (const item of this.#toasts) {
-            item.bond.state.close();
-        }
-    }
-    remove(id) {
-        this.#toasts = this.#toasts.filter((t) => t.id !== id);
-    }
-}
-// Singleton manager instance
-export const toastManager = new ToastManager();
-// Imperative API
-export function toast(title, options) {
-    return toastManager.add(title, 'default', options);
-}
-toast.info = (title, options) => toastManager.add(title, 'info', options);
-toast.success = (title, options) => toastManager.add(title, 'success', options);
-toast.error = (title, options) => toastManager.add(title, 'error', options);
-toast.warning = (title, options) => toastManager.add(title, 'warning', options);
-toast.dismiss = (id) => toastManager.dismiss(id);
-toast.dismissAll = () => toastManager.dismissAll();

package/dist/components/toast/toast-root-managed.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-	import { HtmlAtom } from '../atom';
-	import type { ToastItem } from './manager.svelte';
-
-	let { item }: { item: ToastItem } = $props();
-
-	const typeClasses: Record<string, string> = {
-		default: 'border-border bg-card text-foreground',
-		info: 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-100',
-		success: 'border-green-200 bg-green-50 text-green-900 dark:border-green-800 dark:bg-green-950 dark:text-green-100',
-		error: 'border-red-200 bg-red-50 text-red-900 dark:border-red-800 dark:bg-red-950 dark:text-red-100',
-		warning: 'border-yellow-200 bg-yellow-50 text-yellow-900 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-100'
-	};
-</script>
-
-<HtmlAtom
-	as="li"
-	{...item.bond.root()}
-	preset="toast.item"
-	class={[
-		'pointer-events-auto flex w-80 max-w-sm flex-col gap-1 rounded-md border p-4 shadow-md transition-all duration-200',
-		typeClasses[item.type] ?? typeClasses.default,
-		!item.open && 'opacity-0 translate-y-2',
-		'$preset'
-	]}
-	role="status"
-	aria-live="polite"
->
-	{#if item.title}
-		<HtmlAtom
-			as="p"
-			{...item.bond.title()}
-			preset="toast.title"
-			class={['font-medium text-sm leading-tight', '$preset']}
-		>
-			{item.title}
-		</HtmlAtom>
-	{/if}
-
-	{#if item.description}
-		<HtmlAtom
-			as="p"
-			{...item.bond.description()}
-			preset="toast.description"
-			class={['text-sm opacity-80', '$preset']}
-		>
-			{item.description}
-		</HtmlAtom>
-	{/if}
-
-	{#if item.dismissible}
-		<button
-			class="absolute top-2 right-2 rounded p-1 opacity-50 hover:opacity-100 transition-opacity"
-			type="button"
-			aria-label="Dismiss notification"
-			onclick={() => item.bond.state.close()}
-		>
-			<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-				<line x1="18" y1="6" x2="6" y2="18"></line>
-				<line x1="6" y1="6" x2="18" y2="18"></line>
-			</svg>
-		</button>
-	{/if}
-</HtmlAtom>

package/dist/components/toast/toast-root-managed.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { ToastItem } from './manager.svelte';
-type $$ComponentProps = {
-    item: ToastItem;
-};
-declare const ToastRootManaged: import("svelte").Component<$$ComponentProps, {}, "">;
-type ToastRootManaged = ReturnType<typeof ToastRootManaged>;
-export default ToastRootManaged;

package/dist/components/toast/toast-toaster.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-	import { HtmlAtom } from '../atom';
-	import { toastManager, type ToastPosition } from './manager.svelte';
-	import type { ToasterProps } from './types';
-	import ToastRootManaged from './toast-root-managed.svelte';
-
-	let {
-		class: klass = '',
-		position = 'bottom-right' as ToastPosition,
-		gap = 8,
-		...restProps
-	}: ToasterProps = $props();
-
-	const positionClasses: Record<ToastPosition, string> = {
-		'top-left': 'top-0 left-0 items-start',
-		'top-center': 'top-0 left-1/2 -translate-x-1/2 items-center',
-		'top-right': 'top-0 right-0 items-end',
-		'bottom-left': 'bottom-0 left-0 items-start',
-		'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2 items-center',
-		'bottom-right': 'bottom-0 right-0 items-end'
-	};
-</script>
-
-<HtmlAtom
-	as="ol"
-	class={[
-		'pointer-events-none fixed z-50 flex flex-col p-4',
-		positionClasses[position],
-		'$preset',
-		klass
-	]}
-	preset="toast.toaster"
-	style={`gap: ${gap}px`}
-	aria-label="Notifications"
-	aria-live="polite"
-	aria-atomic="false"
-	{...restProps}
->
-	{#each toastManager.toasts as item (item.id)}
-		<ToastRootManaged {item} />
-	{/each}
-</HtmlAtom>

package/dist/components/toast/toast-toaster.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { ToasterProps } from './types';
-declare const ToastToaster: import("svelte").Component<ToasterProps, {}, "">;
-type ToastToaster = ReturnType<typeof ToastToaster>;
-export default ToastToaster;