svelora 3.0.14 → 3.0.16

package/dist/components/Toast/internal/french-toast/components/ToastBar.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">import { prefersReducedMotion } from "../core/utils.js";
+import toastApi from "../core/toast.js";
+import { getToastToasterContext } from "../toast-context.js";
+import ToastIcon from "./ToastIcon.svelte";
+import ToastMessage from "./ToastMessage.svelte";
+let { toast, position = undefined, style = "", Component = undefined, children } = $props();
+const toasterContext = $derived(getToastToasterContext());
+let factor = $derived.by(() => {
+	const top = (toast.position || position || "top-center").includes("top");
+	return top ? 1 : -1;
+});
+let animation = $derived.by(() => {
+	const [enter, exit] = prefersReducedMotion() ? ["_sft-fadeIn", "_sft-fadeOut"] : ["_sft-enter", "_sft-exit"];
+	return toast.visible ? enter : exit;
+});
+const showCloseButton = $derived(toast.closeButton ?? toasterContext.closeButton ?? false);
+</script>
+
+<div
+    class="_sft-base {toast.height ? animation : '_sft-transparent'} {toast.className || ''}"
+    style="{style}; {toast.style}"
+    style:--factor={factor}
+    data-svelora-toast=""
+    data-styled="true"
+    data-type={toast.type}
+>
+    {#if Component}
+        <Component>
+            {#snippet icon()}
+                <ToastIcon {toast} />
+            {/snippet}
+            {#snippet message()}
+                <ToastMessage {toast} />
+            {/snippet}
+        </Component>
+    {:else if children}
+        {@render children({ ToastIcon, ToastMessage, toast })}
+    {:else}
+        <ToastIcon {toast} />
+        <div data-content="">
+            <div data-title="">
+                <ToastMessage {toast} field="message" />
+            </div>
+            {#if toast.description}
+                <div data-description="" class={toast.descriptionClass || ''}>
+                    <ToastMessage {toast} field="description" />
+                </div>
+            {/if}
+        </div>
+        {#if toast.action}
+            <button type="button" data-button="" onclick={toast.action.onClick}>
+                {toast.action.label}
+            </button>
+        {/if}
+        {#if toast.cancel}
+            <button type="button" data-cancel="" onclick={toast.cancel.onClick}>
+                {toast.cancel.label}
+            </button>
+        {/if}
+        {#if showCloseButton}
+            <button
+                type="button"
+                data-close-button=""
+                aria-label={toasterContext.closeButtonAriaLabel ?? 'Close toast'}
+                onclick={() => toastApi.dismiss(toast.id)}
+            >
+                {#if toasterContext.closeIcon}
+                    {@render toasterContext.closeIcon()}
+                {:else}
+                    ×
+                {/if}
+            </button>
+        {/if}
+    {/if}
+</div>
+
+<style>
+    @keyframes enterAnimation {
+        0% {
+            transform: translate3d(0, calc(var(--factor) * -200%), 0) scale(0.6);
+            opacity: 0.5;
+        }
+        100% {
+            transform: translate3d(0, 0, 0) scale(1);
+            opacity: 1;
+        }
+    }
+
+    @keyframes exitAnimation {
+        0% {
+            transform: translate3d(0, 0, -1px) scale(1);
+            opacity: 1;
+        }
+        100% {
+            transform: translate3d(0, calc(var(--factor) * -150%), -1px) scale(0.6);
+            opacity: 0;
+        }
+    }
+
+    @keyframes fadeInAnimation {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fadeOutAnimation {
+        0% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+
+    ._sft-base {
+        display: flex;
+        align-items: center;
+        line-height: 1.3;
+        will-change: transform;
+        pointer-events: auto;
+        position: relative;
+        width: 100%;
+    }
+
+    ._sft-transparent {
+        opacity: 0;
+    }
+
+    ._sft-enter {
+        animation: enterAnimation 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
+    }
+
+    ._sft-exit {
+        animation: exitAnimation 0.4s cubic-bezier(0.06, 0.71, 0.55, 1) forwards;
+    }
+
+    ._sft-fadeIn {
+        animation: fadeInAnimation 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
+    }
+
+    ._sft-fadeOut {
+        animation: fadeOutAnimation 0.4s cubic-bezier(0.06, 0.71, 0.55, 1) forwards;
+    }
+
+    [data-content] {
+        flex: 1 1 auto;
+        min-width: 0;
+    }
+
+    [data-button],
+    [data-cancel] {
+        border: none;
+        cursor: pointer;
+        white-space: nowrap;
+    }
+
+    [data-close-button] {
+        background-color: var(--toast-close-bg, var(--color-surface-container-highest));
+        border-color: var(--toast-close-border, transparent);
+        color: var(--toast-close-color, var(--color-on-surface-variant));
+    }
+
+    [data-close-button]:hover {
+        background-color: var(--toast-close-hover-bg, var(--color-surface-container-high));
+    }
+</style>

package/dist/components/Toast/internal/french-toast/components/ToastBar.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Component as ComponentType, Snippet } from 'svelte';
+import type { Toast, ToastPosition } from '../core/types.js';
+import ToastIcon from './ToastIcon.svelte';
+import ToastMessage from './ToastMessage.svelte';
+interface Props {
+    toast: Toast;
+    position?: ToastPosition | undefined;
+    style?: string;
+    Component?: ComponentType<Record<string, unknown>> | undefined;
+    children?: Snippet<[
+        {
+            ToastIcon: typeof ToastIcon;
+            ToastMessage: typeof ToastMessage;
+            toast: Toast;
+        }
+    ]>;
+}
+declare const ToastBar: ComponentType<Props, {}, "">;
+type ToastBar = ReturnType<typeof ToastBar>;
+export default ToastBar;

package/dist/components/Toast/internal/french-toast/components/ToastIcon.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">import { getToastToasterContext } from "../toast-context.js";
+import { ToastError, ToastInfo, ToastLoading, ToastSuccess, ToastWarning } from "../../toast-icons/index.js";
+let { toast } = $props();
+let { type, icon } = $derived(toast);
+const toasterContext = $derived(getToastToasterContext());
+const iconTone = $derived(toasterContext.iconTone ?? "standard");
+const hasIcon = $derived.by(() => {
+	if (icon === null) return false;
+	if (typeof icon === "string") return true;
+	if (typeof icon !== "undefined") return true;
+	return type === "loading" || type === "error" || type === "success" || type === "warning" || type === "info";
+});
+</script>
+
+{#if hasIcon}
+<div data-icon="">
+    {#if typeof icon === 'string'}
+        <div class="_sft-animated">{icon}</div>
+    {:else if typeof icon !== 'undefined'}
+        {@const IconComponent = icon}
+        <IconComponent />
+    {:else if type === 'loading'}
+        {#if toasterContext.loadingIcon}
+            {@render toasterContext.loadingIcon()}
+        {:else}
+            <ToastLoading tone={iconTone} />
+        {/if}
+    {:else if type === 'error'}
+        {#if toasterContext.errorIcon}
+            {@render toasterContext.errorIcon()}
+        {:else}
+            <ToastError tone={iconTone} />
+        {/if}
+    {:else if type === 'success'}
+        {#if toasterContext.successIcon}
+            {@render toasterContext.successIcon()}
+        {:else}
+            <ToastSuccess tone={iconTone} />
+        {/if}
+    {:else if type === 'warning'}
+        {#if toasterContext.warningIcon}
+            {@render toasterContext.warningIcon()}
+        {:else}
+            <ToastWarning tone={iconTone} />
+        {/if}
+    {:else if type === 'info'}
+        {#if toasterContext.infoIcon}
+            {@render toasterContext.infoIcon()}
+        {:else}
+            <ToastInfo tone={iconTone} />
+        {/if}
+    {/if}
+</div>
+{/if}
+
+<style>
+    [data-icon] :global(.animated-icon-root) {
+        width: 1.5rem;
+        height: 1.5rem;
+        padding: 0;
+    }
+
+    ._sft-animated {
+        position: relative;
+        transform: scale(0.6);
+        opacity: 0.4;
+        min-width: 20px;
+        animation: enter 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+    }
+
+    @keyframes enter {
+        from {
+            transform: scale(0.6);
+            opacity: 0.4;
+        }
+        to {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+</style>

package/dist/components/Toast/internal/french-toast/components/ToastIcon.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Toast } from '../core/types.js';
+interface Props {
+    toast: Toast;
+}
+declare const ToastIcon: import("svelte").Component<Props, {}, "">;
+type ToastIcon = ReturnType<typeof ToastIcon>;
+export default ToastIcon;

package/dist/components/Toast/internal/french-toast/components/ToastMessage.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">let { toast, field = "message" } = $props();
+const content = $derived(field === "description" ? toast.description : toast.message);
+export {};
+</script>
+
+{#if content}
+    {#if typeof content === 'string'}
+        {content}
+    {:else}
+        {@const Content = content}
+        <Content {toast} {...toast.props} />
+    {/if}
+{/if}

package/dist/components/Toast/internal/french-toast/components/ToastMessage.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Toast } from '../core/types.js';
+interface Props {
+    toast: Toast;
+    field?: 'message' | 'description';
+}
+declare const ToastMessage: import("svelte").Component<Props, {}, "">;
+type ToastMessage = ReturnType<typeof ToastMessage>;
+export default ToastMessage;

package/dist/components/Toast/internal/french-toast/components/ToastWrapper.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">import { onMount } from "svelte";
+import { prefersReducedMotion } from "../core/utils.js";
+import ToastBar from "./ToastBar.svelte";
+import ToastMessage from "./ToastMessage.svelte";
+let { toast, setHeight, children } = $props();
+let clientHeight = $state();
+onMount(() => {
+	if (clientHeight === undefined) return;
+	setHeight(clientHeight);
+});
+let top = $derived(toast.position?.includes("top") ? 0 : null);
+let bottom = $derived(toast.position?.includes("bottom") ? 0 : null);
+let factor = $derived(toast.position?.includes("top") ? 1 : -1);
+let justifyContent = $derived(toast.position?.includes("center") && "center" || (toast.position?.includes("right") || toast.position?.includes("end")) && "flex-end" || null);
+</script>
+
+<div
+    bind:clientHeight
+    class="_sft-wrapper"
+    class:_sft-active={toast.visible}
+    class:_sft-transition={!prefersReducedMotion()}
+    style:--factor={factor}
+    style:--offset={toast.offset}
+    style:top
+    style:bottom
+    style:justify-content={justifyContent}
+>
+    {#if toast.type === 'custom'}
+        <ToastMessage {toast} />
+    {:else if children}
+        {@render children({ toast })}
+    {:else}
+        <ToastBar {toast} position={toast.position} />
+    {/if}
+</div>
+
+<style>
+    ._sft-wrapper {
+        left: 0;
+        right: 0;
+        display: flex;
+        position: absolute;
+        transform: translateY(calc(var(--offset, 16px) * var(--factor) * 1px));
+    }
+
+    ._sft-transition {
+        transition: all 230ms cubic-bezier(0.21, 1.02, 0.73, 1);
+    }
+
+    ._sft-active {
+        z-index: 9999;
+    }
+
+    ._sft-active > :global(*) {
+        pointer-events: auto;
+    }
+</style>

package/dist/components/Toast/internal/french-toast/components/ToastWrapper.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type Snippet } from 'svelte';
+import type { DOMToast } from '../core/types.js';
+interface Props {
+    toast: DOMToast;
+    setHeight: (height: number) => void;
+    children?: Snippet<[{
+        toast: DOMToast;
+    }]>;
+}
+declare const ToastWrapper: import("svelte").Component<Props, {}, "">;
+type ToastWrapper = ReturnType<typeof ToastWrapper>;
+export default ToastWrapper;

package/dist/components/Toast/internal/french-toast/components/Toaster.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">import { useToaster } from "../core/use-toaster.svelte.js";
+import { parsePosition } from "../core/utils.js";
+import { setToastToasterContext } from "../toast-context.js";
+import ToastWrapper from "./ToastWrapper.svelte";
+let { reverseOrder = false, position = "bottom-right", toastOptions = undefined, gutter = 14, containerStyle = undefined, containerClassName = undefined, closeButton = false, closeButtonAriaLabel = "Close toast", theme = "light", iconTone = "standard", successIcon, errorIcon, warningIcon, infoIcon, loadingIcon, closeIcon } = $props();
+setToastToasterContext(() => ({
+	closeButton,
+	closeButtonAriaLabel,
+	iconTone,
+	successIcon,
+	errorIcon,
+	warningIcon,
+	infoIcon,
+	loadingIcon,
+	closeIcon
+}));
+const resolvedToastOptions = $derived(toastOptions ?? {});
+const toaster = useToaster(() => resolvedToastOptions);
+const _toasts = $derived(toaster.mergedToasts.map((toast) => ({
+	...toast,
+	position: toast.position || position,
+	offset: toaster.handlers.calculateOffset(toast, toaster.mergedToasts, {
+		reverseOrder,
+		gutter,
+		defaultPosition: position
+	})
+})));
+const positionAttrs = $derived(parsePosition(position));
+const resolvedTheme = $derived.by(() => {
+	if (theme !== "system") return theme;
+	if (typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+		return "dark";
+	}
+	return "light";
+});
+</script>
+
+<div
+    class="_sft-toaster {containerClassName || ''}"
+    style={containerStyle}
+    data-svelora-toaster=""
+    data-x-position={positionAttrs.xPosition}
+    data-y-position={positionAttrs.yPosition}
+    data-svelora-theme={resolvedTheme}
+    onmouseenter={toaster.handlers.startPause}
+    onmouseleave={toaster.handlers.endPause}
+    role="alert"
+>
+    {#each _toasts as toast (toast.id)}
+        <ToastWrapper {toast} setHeight={(height) => toaster.handlers.updateHeight(toast.id, height)} />
+    {/each}
+</div>
+
+<style>
+    ._sft-toaster {
+        --default-offset: 16px;
+
+        position: fixed;
+        z-index: 9999;
+        top: var(--default-offset);
+        left: var(--default-offset);
+        right: var(--default-offset);
+        bottom: var(--default-offset);
+        pointer-events: none;
+    }
+
+    :global(._sft-toaster ._sft-base) {
+        background: transparent;
+        box-shadow: none;
+        padding: 0;
+        max-width: none;
+    }
+</style>

package/dist/components/Toast/internal/french-toast/components/Toaster.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { ToastOptions, ToastPosition } from '../core/types.js';
+import type { Snippet } from 'svelte';
+interface Props {
+    reverseOrder?: boolean;
+    position?: ToastPosition;
+    toastOptions?: ToastOptions | undefined;
+    gutter?: number;
+    containerStyle?: string | undefined;
+    containerClassName?: string | undefined;
+    closeButton?: boolean;
+    closeButtonAriaLabel?: string;
+    theme?: 'light' | 'dark' | 'system';
+    successIcon?: Snippet;
+    errorIcon?: Snippet;
+    warningIcon?: Snippet;
+    infoIcon?: Snippet;
+    loadingIcon?: Snippet;
+    closeIcon?: Snippet;
+    iconTone?: import('../toast-context.js').ToastIconTone;
+}
+declare const Toaster: import("svelte").Component<Props, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/components/Toast/internal/french-toast/core/store.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { DefaultToastOptions, Toast } from './types.js';
+declare class ToastStore {
+    toasts: Toast<Record<string, unknown>>[];
+    pausedAt: number | null;
+}
+export declare const toastStore: ToastStore;
+export declare function update(toast: Partial<Toast>, clearTimeout?: boolean): void;
+export declare function add(toast: Toast): void;
+export declare function upsert(toast: Toast): void;
+export declare function dismiss(toastId?: Toast['id']): void;
+export declare function remove(toastId?: Toast['id']): void;
+export declare function startPause(time: number): void;
+export declare function endPause(time: number): void;
+export declare function mergeToastOptions(toasts: Toast[], toastOptions?: DefaultToastOptions): Toast[];
+export {};

package/dist/components/Toast/internal/french-toast/core/store.svelte.js

@@ -0,0 +1,92 @@
+// Vendored from svelte-french-toast (MIT License)
+// https://github.com/kbrgl/svelte-french-toast
+const TOAST_LIMIT = 20;
+const defaultTimeouts = {
+    blank: 4000,
+    error: 4000,
+    success: 2000,
+    loading: Number.POSITIVE_INFINITY,
+    custom: 4000,
+    warning: 4000,
+    info: 4000
+};
+class ToastStore {
+    toasts = $state([]);
+    pausedAt = $state(null);
+}
+export const toastStore = new ToastStore();
+const toastTimeouts = new Map();
+const addToRemoveQueue = (toastId) => {
+    if (toastTimeouts.has(toastId)) {
+        return;
+    }
+    const timeout = setTimeout(() => {
+        toastTimeouts.delete(toastId);
+        remove(toastId);
+    }, 1000);
+    toastTimeouts.set(toastId, timeout);
+};
+const clearFromRemoveQueue = (toastId) => {
+    const timeout = toastTimeouts.get(toastId);
+    if (timeout) {
+        clearTimeout(timeout);
+    }
+};
+export function update(toast, clearTimeout = true) {
+    if (clearTimeout && toast.id) {
+        clearFromRemoveQueue(toast.id);
+    }
+    toastStore.toasts = toastStore.toasts.map((t) => (t.id === toast.id ? { ...t, ...toast } : t));
+}
+export function add(toast) {
+    toastStore.toasts = [toast, ...toastStore.toasts].slice(0, TOAST_LIMIT);
+}
+export function upsert(toast) {
+    if (toastStore.toasts.find((t) => t.id === toast.id)) {
+        update(toast);
+    }
+    else {
+        add(toast);
+    }
+}
+export function dismiss(toastId) {
+    if (toastId) {
+        addToRemoveQueue(toastId);
+    }
+    else {
+        toastStore.toasts.forEach((toast) => {
+            addToRemoveQueue(toast.id);
+        });
+    }
+    toastStore.toasts = toastStore.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, visible: false } : t);
+}
+export function remove(toastId) {
+    if (toastId === undefined) {
+        toastStore.toasts = [];
+        return;
+    }
+    toastStore.toasts = toastStore.toasts.filter((t) => t.id !== toastId);
+}
+export function startPause(time) {
+    toastStore.pausedAt = time;
+}
+export function endPause(time) {
+    const diff = time - (toastStore.pausedAt || 0);
+    toastStore.pausedAt = null;
+    toastStore.toasts = toastStore.toasts.map((t) => ({
+        ...t,
+        pauseDuration: t.pauseDuration + diff
+    }));
+}
+export function mergeToastOptions(toasts, toastOptions = {}) {
+    return toasts.map((t) => ({
+        ...toastOptions,
+        ...toastOptions[t.type],
+        ...t,
+        duration: t.duration ||
+            toastOptions[t.type]?.duration ||
+            toastOptions?.duration ||
+            defaultTimeouts[t.type],
+        style: [toastOptions.style, toastOptions[t.type]?.style, t.style].filter(Boolean).join(';')
+    }));
+}

package/dist/components/Toast/internal/french-toast/core/toast.d.ts

@@ -0,0 +1,21 @@
+import { type Renderable, type DefaultToastOptions, type ToastOptions, type ValueOrFunction } from './types.js';
+type Message<T extends Record<string, unknown> = Record<string, unknown>> = Renderable<T>;
+type ToastHandler = <T extends Record<string, unknown> = Record<string, unknown>>(message: Message<T>, options?: ToastOptions<T>) => string;
+declare const toast: {
+    <T extends Record<string, unknown> = Record<string, unknown>>(message: Message<T>, opts?: ToastOptions<T>): string;
+    error: ToastHandler;
+    success: ToastHandler;
+    loading: ToastHandler;
+    custom: ToastHandler;
+    warning: ToastHandler;
+    info: ToastHandler;
+    message: ToastHandler;
+    dismiss(toastId?: string): void;
+    remove(toastId?: string): void;
+    promise<T>(promise: Promise<T>, msgs: {
+        loading: Renderable;
+        success: ValueOrFunction<Renderable, T>;
+        error: ValueOrFunction<Renderable, unknown>;
+    }, opts?: DefaultToastOptions): Promise<T>;
+};
+export default toast;

package/dist/components/Toast/internal/french-toast/core/toast.js

@@ -0,0 +1,67 @@
+// Vendored from svelte-french-toast (MIT License)
+// https://github.com/kbrgl/svelte-french-toast
+import { dismiss, remove, upsert } from './store.svelte.js';
+import { resolveValue } from './types.js';
+import { genId } from './utils.js';
+const createToast = (message, type = 'blank', opts) => ({
+    createdAt: Date.now(),
+    visible: true,
+    type,
+    ariaProps: {
+        role: type === 'error' ? 'alert' : 'status',
+        'aria-live': type === 'error' ? 'assertive' : 'polite'
+    },
+    message,
+    pauseDuration: 0,
+    icon: opts?.icon,
+    description: opts?.description,
+    duration: opts?.duration,
+    iconTheme: opts?.iconTheme,
+    position: opts?.position,
+    props: opts?.props,
+    className: opts?.className,
+    descriptionClass: opts?.descriptionClass,
+    style: opts?.style,
+    action: opts?.action,
+    cancel: opts?.cancel,
+    closeButton: opts?.closeButton,
+    id: opts?.id?.toString() || genId()
+});
+const createHandler = (type) => (message, options) => {
+    const nextToast = createToast(message, type, options);
+    upsert(nextToast);
+    return nextToast.id;
+};
+const toast = (message, opts) => createHandler('blank')(message, opts);
+toast.error = createHandler('error');
+toast.success = createHandler('success');
+toast.loading = createHandler('loading');
+toast.custom = createHandler('custom');
+toast.warning = createHandler('warning');
+toast.info = createHandler('info');
+toast.message = createHandler('blank');
+toast.dismiss = (toastId) => {
+    dismiss(toastId);
+};
+toast.remove = (toastId) => remove(toastId);
+toast.promise = (promise, msgs, opts) => {
+    const id = toast.loading(msgs.loading, { ...opts, ...opts?.loading });
+    promise
+        .then((p) => {
+        toast.success(resolveValue(msgs.success, p), {
+            id,
+            ...opts,
+            ...opts?.success
+        });
+        return p;
+    })
+        .catch((e) => {
+        toast.error(resolveValue(msgs.error, e), {
+            id,
+            ...opts,
+            ...opts?.error
+        });
+    });
+    return promise;
+};
+export default toast;