@ims360/svelte-ivory 0.0.2

package/dist/components/layout/tabs/Tab.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { pseudoRandomId } from '../../../utils/functions/index';
+    import clsx from 'clsx';
+    import { onMount, type Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import { getTabContext } from './Tabs.svelte';
+
+    type Props = {
+        class?: (selected: boolean) => ClassValue;
+        id?: string | undefined;
+        /**
+         * If this is set the element will be a link.
+         *
+         * This is useful if your tabs are in a `+layout.svelte` and the Panels are seperate pages.
+         */
+        href?: string | undefined;
+        children: Snippet<[{ selected: boolean }]>;
+        testId?: string;
+        /** If `href` is set, this can be used to highlight an active tab */
+        active?: boolean;
+    };
+
+    let {
+        class: clazz = (selected: boolean) => [selected && 'text-primary-500 underline'],
+        id,
+        href,
+        children,
+        testId,
+        active
+    }: Props = $props();
+
+    const tab = pseudoRandomId('tab-');
+    const tabs = getTabContext();
+
+    const tabId = id || tab;
+
+    const selected = $derived.by(() => {
+        if (typeof active === 'boolean') {
+            return active;
+        } else if (href) {
+            return page.url.pathname.startsWith(href);
+        } else if (tabs && tabs.selectedTab === tabId) {
+            return true;
+        } else {
+            return false;
+        }
+    });
+
+    onMount(() => {
+        if (href) return;
+        tabs.registerTab(tabId);
+    });
+</script>
+
+<svelte:element
+    this={href ? 'a' : 'button'}
+    class={twMerge(
+        clsx(
+            'btn flex h-fit w-fit items-center justify-center px-0 text-xl font-bold',
+            clazz(selected)
+        )
+    )}
+    onclick={href
+        ? undefined
+        : () => {
+              tabs.selectedTab = tabId;
+          }}
+    type={href ? undefined : 'button'}
+    {href}
+    data-testid={testId}
+    role="tab"
+    tabindex="0"
+    aria-selected={selected}
+>
+    {@render children({
+        selected
+    })}
+</svelte:element>

package/dist/components/layout/tabs/Tab.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+type Props = {
+    class?: (selected: boolean) => ClassValue;
+    id?: string | undefined;
+    /**
+     * If this is set the element will be a link.
+     *
+     * This is useful if your tabs are in a `+layout.svelte` and the Panels are seperate pages.
+     */
+    href?: string | undefined;
+    children: Snippet<[{
+        selected: boolean;
+    }]>;
+    testId?: string;
+    /** If `href` is set, this can be used to highlight an active tab */
+    active?: boolean;
+};
+declare const Tab: import("svelte").Component<Props, {}, "">;
+type Tab = ReturnType<typeof Tab>;
+export default Tab;

package/dist/components/layout/tabs/TabPanel.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { pseudoRandomId } from '../../../utils/functions/index';
+    import { type Snippet } from 'svelte';
+    import { getTabContext } from './Tabs.svelte';
+
+    type Props = {
+        keepMounted?: boolean;
+        children: Snippet<[{ visible: boolean }]>;
+    };
+
+    let { keepMounted = false, children }: Props = $props();
+
+    const panel = pseudoRandomId('tab-panel-');
+    const tabs = getTabContext();
+
+    tabs.registerPanel(panel);
+</script>
+
+{#if keepMounted}
+    {@render children({ visible: tabs.selectedPanel === panel })}
+{:else if tabs.selectedPanel === panel}
+    {@render children({ visible: true })}
+{/if}

package/dist/components/layout/tabs/TabPanel.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Snippet } from 'svelte';
+type Props = {
+    keepMounted?: boolean;
+    children: Snippet<[{
+        visible: boolean;
+    }]>;
+};
+declare const TabPanel: import("svelte").Component<Props, {}, "">;
+type TabPanel = ReturnType<typeof TabPanel>;
+export default TabPanel;

package/dist/components/layout/tabs/Tabs.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+    import { getContext, onDestroy, setContext, type Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+
+    interface TabContext {
+        registerTab: (tab: string) => void;
+        registerPanel: (panel: string) => void;
+        selectedTab: string | undefined;
+        tabs: string[];
+        selectedPanel: string | undefined;
+    }
+    const TABS = {};
+
+    function setTabContext(context: TabContext) {
+        setContext<TabContext>(TABS, context);
+    }
+
+    export function getTabContext() {
+        return getContext<TabContext>(TABS);
+    }
+</script>
+
+<script lang="ts">
+    type Props = {
+        class?: ClassValue;
+        children: Snippet;
+        b_index?: number;
+    };
+
+    let { class: clazz = '', children, b_index = $bindable(0) }: Props = $props();
+
+    let allTabs: string[] = $state([]);
+    let panels: string[] = $state([]);
+
+    export const forward = () => {
+        if (b_index >= panels.length - 1) {
+            b_index = 0;
+        } else {
+            b_index++;
+        }
+    };
+
+    export const back = () => {
+        if (b_index === 0) {
+            b_index = panels.length - 1;
+        } else {
+            b_index--;
+        }
+    };
+
+    setTabContext({
+        registerTab: (tab: string) => {
+            allTabs.push(tab);
+            onDestroy(() => {
+                const i = allTabs.indexOf(tab);
+                allTabs.splice(i, 1);
+            });
+        },
+
+        registerPanel: (panel: string) => {
+            panels.push(panel);
+            b_index = b_index;
+            onDestroy(() => {
+                panels.filter((p) => p !== panel);
+            });
+        },
+
+        get selectedTab() {
+            return allTabs[b_index];
+        },
+        set selectedTab(tab: string) {
+            b_index = allTabs.indexOf(tab);
+        },
+        get selectedPanel() {
+            return panels[b_index];
+        },
+        set selectedPanel(panel: string) {
+            b_index = panels.indexOf(panel);
+        },
+        tabs: allTabs
+    });
+</script>
+
+<div class={[clazz]}>
+    {@render children()}
+</div>

package/dist/components/layout/tabs/Tabs.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+interface TabContext {
+    registerTab: (tab: string) => void;
+    registerPanel: (panel: string) => void;
+    selectedTab: string | undefined;
+    tabs: string[];
+    selectedPanel: string | undefined;
+}
+export declare function getTabContext(): TabContext;
+type Props = {
+    class?: ClassValue;
+    children: Snippet;
+    b_index?: number;
+};
+declare const Tabs: import("svelte").Component<Props, {
+    forward: () => void;
+    back: () => void;
+}, "b_index">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/layout/tabs/index.d.ts

@@ -0,0 +1,26 @@
+declare const Tabs: import("svelte").Component<{
+    class?: import("svelte/elements").ClassValue;
+    children: import("svelte").Snippet;
+    b_index?: number;
+}, {
+    forward: () => void;
+    back: () => void;
+}, "b_index"> & {
+    Tab: import("svelte").Component<{
+        class?: (selected: boolean) => import("svelte/elements").ClassValue;
+        id?: string | undefined;
+        href?: string | undefined;
+        children: import("svelte").Snippet<[{
+            selected: boolean;
+        }]>;
+        testId?: string;
+        active?: boolean;
+    }, {}, "">;
+    Panel: import("svelte").Component<{
+        keepMounted?: boolean;
+        children: import("svelte").Snippet<[{
+            visible: boolean;
+        }]>;
+    }, {}, "">;
+};
+export default Tabs;

package/dist/components/layout/tabs/index.js

@@ -0,0 +1,8 @@
+import Tab from './Tab.svelte';
+import TabPanel from './TabPanel.svelte';
+import { default as TabsComponent } from './Tabs.svelte';
+const Tabs = Object.assign(TabsComponent, {
+    Tab: Tab,
+    Panel: TabPanel
+});
+export default Tabs;

package/dist/components/layout/tooltip/Tooltip.svelte

@@ -0,0 +1,111 @@
+<script lang="ts" module>
+    import clsx from 'clsx';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
+    import Portal from '../portal/Portal.svelte';
+
+    export interface Props {
+        children?: Snippet;
+        /** The content of the tooltip */
+        tooltip: string | Snippet;
+        /** The class of the element that triggers the tooltip */
+        class?: ClassValue;
+        /** The class of the tooltip itself */
+        tooltipClass?: ClassValue;
+        style?: string;
+        onclick?: (e: Event) => void;
+        /** If the href is set, the resulting element will be a link to the href */
+        href?: string;
+        /**
+         * The delay before the tooltip is shown in ms.
+         *
+         * default: `500`
+         */
+        timeout?: number;
+        /**
+         * Where the tooltip should be placed
+         *
+         * default: `top`
+         */
+        placement?: PopoverPlacement;
+    }
+</script>
+
+<script lang="ts">
+    let {
+        children,
+        tooltip,
+        class: clazz,
+        style,
+        onclick,
+        href,
+        timeout = 500,
+        tooltipClass
+    }: Props = $props();
+
+    let target = $state<HTMLElement>();
+
+    let open = $state(false);
+
+    let showTimeout: number;
+    function onpointerenter() {
+        clearTimeout(timeout);
+        if (timeout === 0) {
+            open = true;
+        } else {
+            showTimeout = setTimeout(() => {
+                open = true;
+            }, timeout) as unknown as number;
+        }
+    }
+
+    function onpointerleave() {
+        clearTimeout(timeout);
+        open = false;
+    }
+</script>
+
+<!-- 
+    @component
+    Shows additional information when hovering over an element.
+-->
+
+<!-- Ignoring this error is fine since it's a false positive -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<svelte:element
+    this={href ? 'a' : onclick ? 'button' : 'div'}
+    {href}
+    type={onclick ? 'button' : undefined}
+    class={clazz}
+    bind:this={target}
+    {onpointerenter}
+    {onpointerleave}
+    {style}
+    {onclick}
+>
+    {@render children?.()}
+</svelte:element>
+
+{#if open}
+    <Portal>
+        <Popover
+            bind:b_open={open}
+            {target}
+            placement="top"
+            class={twMerge(
+                clsx(
+                    'bg-surface-100-800-token max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
+                    tooltipClass
+                )
+            )}
+        >
+            {#if typeof tooltip === 'string'}
+                {tooltip}
+            {:else}
+                {@render tooltip()}
+            {/if}
+        </Popover>
+    </Portal>
+{/if}

package/dist/components/layout/tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+import { type PopoverPlacement } from '../popover/Popover.svelte';
+export interface Props {
+    children?: Snippet;
+    /** The content of the tooltip */
+    tooltip: string | Snippet;
+    /** The class of the element that triggers the tooltip */
+    class?: ClassValue;
+    /** The class of the tooltip itself */
+    tooltipClass?: ClassValue;
+    style?: string;
+    onclick?: (e: Event) => void;
+    /** If the href is set, the resulting element will be a link to the href */
+    href?: string;
+    /**
+     * The delay before the tooltip is shown in ms.
+     *
+     * default: `500`
+     */
+    timeout?: number;
+    /**
+     * Where the tooltip should be placed
+     *
+     * default: `top`
+     */
+    placement?: PopoverPlacement;
+}
+/** Shows additional information when hovering over an element. */
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/toast/Toast.svelte

@@ -0,0 +1,100 @@
+<!-- 
+	@component
+	Renders the toasts that have been triggered by the `Toasts` store.  
+	Make sure to include this component in your root `+layout.svelte` file.
+-->
+<script lang="ts">
+    import type { Icon } from '@lucide/svelte';
+    import { Check, CircleAlert, Info, TriangleAlert, X } from '@lucide/svelte';
+    import type { Snippet } from 'svelte';
+    import { flip } from 'svelte/animate';
+    import type { ClassValue } from 'svelte/elements';
+    import { fly, scale } from 'svelte/transition';
+    import { Toasts, type ToastSettings } from './toasts.svelte';
+
+    type Props = {
+        class?: ClassValue;
+        children?: Snippet<[toast: ToastSettings & { close: () => void }]>;
+    };
+
+    let { class: clazz = 'px-2 pb-2', children }: Props = $props();
+
+    function getIcon(
+        variant: 'info' | 'success' | 'warning' | 'error',
+        icon?: typeof Icon
+    ): typeof Icon {
+        if (icon) return icon;
+        switch (variant) {
+            case 'info':
+                return Info;
+            case 'success':
+                return Check;
+            case 'warning':
+                return CircleAlert;
+            case 'error':
+                return TriangleAlert;
+        }
+    }
+</script>
+
+<div
+    class="pointer-events-none absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-start"
+>
+    <div
+        class={[
+            'flex h-full max-h-full flex-col-reverse items-center justify-end gap-2 overflow-hidden',
+            clazz
+        ]}
+    >
+        {#each Toasts.toasts as toast (toast.id)}
+            {@const VariantIcon = getIcon(toast.variant, toast.icon)}
+
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+                in:fly={{ y: '-100%', duration: 300 }}
+                out:scale={{ duration: 300 }}
+                animate:flip={{ duration: 300 }}
+                onpointerenter={() => {
+                    Toasts.freeze(toast.id);
+                }}
+                onpointerleave={() => {
+                    Toasts.unfreeze(toast.id);
+                }}
+                class="group pointer-events-auto flex h-fit w-fit flex-row items-center"
+            >
+                {#if children}
+                    {@render children({
+                        ...toast,
+                        close: () => Toasts.close(toast.id)
+                    })}
+                {:else}
+                    <div
+                        class={[
+                            'bg-opacity-85 flex flex-row items-center gap-4 rounded px-4 py-2 shadow-lg group-last:rounded-t-none',
+                            toast.variant === 'info' && 'preset-filled-primary-500',
+                            toast.variant === 'success' && 'preset-filled-success-500',
+                            toast.variant === 'warning' && 'preset-filled-warning-500',
+                            toast.variant === 'error' && 'preset-filled-error-500'
+                        ]}
+                    >
+                        <VariantIcon />
+                        <p class="font-bold">
+                            {toast.message}
+                        </p>
+                        {#if !toast.hideDismiss}
+                            <button
+                                type="button"
+                                onclick={() => {
+                                    Toasts.close(toast.id);
+                                }}
+                                class="transition-transform hover:rotate-90"
+                            >
+                                <X />
+                            </button>
+                        {/if}
+                    </div>
+                {/if}
+            </div>
+        {/each}
+    </div>
+</div>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+import { type ToastSettings } from './toasts.svelte';
+type Props = {
+    class?: ClassValue;
+    children?: Snippet<[toast: ToastSettings & {
+        close: () => void;
+    }]>;
+};
+/**
+ * Renders the toasts that have been triggered by the `Toasts` store.
+ * Make sure to include this component in your root `+layout.svelte` file.
+ */
+declare const Toast: import("svelte").Component<Props, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

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

@@ -0,0 +1,2 @@
+export { default as ToastUI } from './Toast.svelte';
+export { Toasts } from './toasts.svelte';

package/dist/components/toast/index.js

@@ -0,0 +1,2 @@
+export { default as ToastUI } from './Toast.svelte';
+export { Toasts } from './toasts.svelte';

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

@@ -0,0 +1,26 @@
+import type { Icon } from '@lucide/svelte';
+export type ToastSettings = {
+    message: string;
+    autohide?: boolean;
+    timeout?: number;
+    hideDismiss?: boolean;
+    icon?: typeof Icon;
+    variant: 'info' | 'success' | 'warning' | 'error';
+};
+type Toast = ToastSettings & {
+    id: string;
+    timeoutId?: ReturnType<typeof setTimeout>;
+};
+declare class ToastStore {
+    toasts: Toast[];
+    trigger(toast: ToastSettings, id?: string): string;
+    close(id: string): void;
+    update(id: string, toast: ToastSettings): void;
+    freeze(id: string): void;
+    unfreeze(id: string): void;
+    private startAutoHide;
+    private stopAutoHide;
+}
+/** Exposes functions to manage toasts, contains currently active toasts */
+export declare const Toasts: ToastStore;
+export {};

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

@@ -0,0 +1,67 @@
+const TOAST_DEFAULTS = {
+    message: 'Missing Toast Message',
+    autohide: true,
+    timeout: 3000,
+    variant: 'info'
+};
+class ToastStore {
+    toasts = $state([]);
+    trigger(toast, id = crypto.randomUUID()) {
+        const mergedToasts = { ...TOAST_DEFAULTS, ...toast, id };
+        // start the autohide timeout
+        this.startAutoHide(mergedToasts);
+        // add the toasts to the list
+        this.toasts.push(mergedToasts);
+        return id;
+    }
+    close(id) {
+        const toast = this.toasts.find((t) => t.id === id);
+        if (!toast)
+            return;
+        this.stopAutoHide(toast);
+        this.toasts = this.toasts.filter((t) => t.id !== id);
+    }
+    update(id, toast) {
+        const existingToast = this.toasts.find((t) => t.id === id);
+        if (!existingToast) {
+            this.trigger(toast, id);
+            return;
+        }
+        const mergedToast = {
+            ...TOAST_DEFAULTS,
+            ...existingToast,
+            ...toast
+        };
+        // clear the existing timeout and restart the autohide
+        this.stopAutoHide(existingToast);
+        this.startAutoHide(mergedToast);
+        this.toasts.splice(this.toasts.indexOf(existingToast), 1, mergedToast);
+    }
+    freeze(id) {
+        const toast = this.toasts.find((t) => t.id === id);
+        if (!toast)
+            return;
+        this.stopAutoHide(toast);
+    }
+    unfreeze(id) {
+        const toast = this.toasts.find((t) => t.id === id);
+        if (!toast)
+            return;
+        this.startAutoHide(toast);
+    }
+    startAutoHide(toast) {
+        if (!toast.autohide)
+            return;
+        toast.timeoutId = setTimeout(() => {
+            this.close(toast.id);
+        }, toast.timeout);
+    }
+    stopAutoHide(toast) {
+        if (!toast.timeoutId)
+            return;
+        clearTimeout(toast.timeoutId);
+        delete toast.timeoutId;
+    }
+}
+/** Exposes functions to manage toasts, contains currently active toasts */
+export const Toasts = new ToastStore();

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";
+// Reexport your entry components here

package/dist/utils/actions/clickOutside.d.ts

@@ -0,0 +1,11 @@
+interface ClickOutsideParams {
+    /** Callback to be called when clicking outside of node */
+    callback: (e: MouseEvent) => void;
+    /** Callback is also not fired if the click target is inside this element */
+    target?: Element;
+}
+/** Dispatch event on click outside of node */
+export declare function clickOutside(node: Element, params: ((e: MouseEvent) => void) | ClickOutsideParams): {
+    destroy(): void;
+};
+export {};