@ims360/svelte-ivory 0.0.2

package/dist/components/basic/toggle/Toggle.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import clsx from 'clsx';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+
+    type Props = {
+        value?: boolean;
+        class?: ClassValue;
+        onclick?: () => void;
+        children?: Snippet;
+        testId?: string;
+    };
+
+    let { value, class: clazz, onclick, children, testId }: Props = $props();
+
+    let thumbWidth = $state(0);
+</script>
+
+<svelte:element
+    this={onclick ? 'button' : 'div'}
+    class={twMerge(
+        clsx(
+            'flex h-5 w-9 items-center rounded-full border p-0.5',
+            value ? 'bg-primary-500 border-primary-500' : 'bg-surface-500/30 border-surface-500/60',
+            clazz
+        )
+    )}
+    type={onclick ? 'button' : undefined}
+    role={onclick ? 'button' : undefined}
+    {onclick}
+    tabindex="0"
+    data-testid={testId}
+>
+    <div class="relative flex h-full w-full flex-row items-center">
+        <div
+            class={[
+                'relative flex aspect-square h-full items-center justify-center rounded-full transition-all',
+                value ? 'bg-surface-50' : 'bg-surface-600'
+            ]}
+            style={value ? `left: calc(100% - ${thumbWidth}px);` : 'left: 0;'}
+            bind:clientWidth={thumbWidth}
+        >
+            {@render children?.()}
+        </div>
+    </div>
+</svelte:element>

package/dist/components/basic/toggle/Toggle.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+type Props = {
+    value?: boolean;
+    class?: ClassValue;
+    onclick?: () => void;
+    children?: Snippet;
+    testId?: string;
+};
+declare const Toggle: import("svelte").Component<Props, {}, "">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/components/buttons/CopyToClipboardButton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+    import { Copy } from '@lucide/svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { Toasts } from '../toast';
+
+    let lastCopied = $state<string>();
+</script>
+
+<script lang="ts">
+    interface Props {
+        text: string;
+        class?: ClassValue;
+        toastMessage?: string;
+    }
+
+    let { text, class: clazz = 'text-xl', toastMessage }: Props = $props();
+
+    async function copyText() {
+        await navigator.clipboard.writeText(text);
+        lastCopied = text;
+        if (toastMessage) {
+            Toasts.trigger({
+                variant: 'success',
+                message: toastMessage,
+                icon: Copy
+            });
+        }
+    }
+</script>
+
+<button type="button" class={['text-surface-500 btn', clazz]} onclick={copyText}>
+    <Copy class={['h-5 w-5']} />
+</button>

package/dist/components/buttons/CopyToClipboardButton.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ClassValue } from 'svelte/elements';
+interface Props {
+    text: string;
+    class?: ClassValue;
+    toastMessage?: string;
+}
+declare const CopyToClipboardButton: import("svelte").Component<Props, {}, "">;
+type CopyToClipboardButton = ReturnType<typeof CopyToClipboardButton>;
+export default CopyToClipboardButton;

package/dist/components/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/layout/heading/Heading.svelte

@@ -0,0 +1,33 @@
+<script lang="ts" module>
+    import clsx from 'clsx';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+
+    export interface Props {
+        children: Snippet;
+        class?: ClassValue;
+    }
+
+    export function setClasses(c: ClassValue) {
+        defaultClasses = c;
+    }
+
+    let defaultClasses = $state<ClassValue>('');
+</script>
+
+<script lang="ts">
+    let { children, class: clazz }: Props = $props();
+</script>
+
+<!-- 
+    @component
+    A component for unified headings.  
+    Classes that are set using the `setDefaultClasses` function will be applied to all headings,
+    including the ones used in other components of this lib, e.g. the `Modal`.
+    If you set the `defaultClasses`, make sure to call it before using a component that uses the heading component (e.g. your root `+layout.svelte`).
+-->
+
+<h2 class={twMerge(clsx('truncate text-lg font-bold select-none', defaultClasses, clazz))}>
+    {@render children()}
+</h2>

package/dist/components/layout/heading/Heading.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+export interface Props {
+    children: Snippet;
+    class?: ClassValue;
+}
+export declare function setClasses(c: ClassValue): void;
+/**
+ * A component for unified headings.
+ * Classes that are set using the `setDefaultClasses` function will be applied to all headings,
+ * including the ones used in other components of this lib, e.g. the `Modal`.
+ * If you set the `defaultClasses`, make sure to call it before using a component that uses the heading component (e.g. your root `+layout.svelte`).
+ */
+declare const Heading: import("svelte").Component<Props, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;

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

@@ -0,0 +1,5 @@
+import { setClasses } from './Heading.svelte';
+declare const Heading: import("svelte").Component<import("./Heading.svelte").Props, {}, ""> & {
+    setClasses: typeof setClasses;
+};
+export default Heading;

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

@@ -0,0 +1,5 @@
+import { default as HeadingComponent, setClasses } from './Heading.svelte';
+const Heading = Object.assign(HeadingComponent, {
+    setClasses
+});
+export default Heading;

package/dist/components/layout/hiddenBackground/HiddenBackground.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" module>
+    import clsx from 'clsx';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { fade } from 'svelte/transition';
+    import { twMerge } from 'tailwind-merge';
+    import { focusTrap, shortcut } from '../../../utils/actions/index';
+
+    let globalClass = $state<ClassValue>();
+
+    export function setClasses(value: ClassValue) {
+        globalClass = value;
+    }
+
+    export const TEST_ID = 'background';
+</script>
+
+<script lang="ts">
+    interface Props {
+        class?: ClassValue;
+        /** Gets called when the dialog is clicked */
+        onclose?: () => void;
+        children: Snippet;
+    }
+
+    let { class: clazz, onclose, children }: Props = $props();
+</script>
+
+<dialog
+    class={twMerge(
+        clsx(
+            'bg-surface-950-50/40 absolute top-0 left-0 z-40 m-0 h-full w-full p-0',
+            globalClass,
+            clazz
+        )
+    )}
+    open
+    use:focusTrap={true}
+    use:shortcut={{
+        code: 'Escape',
+        callback: onclose ?? (() => {})
+    }}
+    onclick={onclose}
+    transition:fade={{ duration: 200 }}
+    data-testid={TEST_ID}
+>
+    {@render children()}
+</dialog>

package/dist/components/layout/hiddenBackground/HiddenBackground.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+export declare function setClasses(value: ClassValue): void;
+export declare const TEST_ID = "background";
+interface Props {
+    class?: ClassValue;
+    /** Gets called when the dialog is clicked */
+    onclose?: () => void;
+    children: Snippet;
+}
+declare const HiddenBackground: import("svelte").Component<Props, {}, "">;
+type HiddenBackground = ReturnType<typeof HiddenBackground>;
+export default HiddenBackground;

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

@@ -0,0 +1,6 @@
+import { default as HiddenBg, setClasses, TEST_ID } from './HiddenBackground.svelte';
+const HiddenBackground = Object.assign(HiddenBg, {
+    setClasses,
+    TEST_ID
+});
+export default HiddenBackground;

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

@@ -0,0 +1,7 @@
+export { default as Heading } from './heading/index';
+export { default as HiddenBackground } from './hiddenBackground/index';
+export { default as Modal } from './modal/Modal.svelte';
+export { default as Popover } from './popover/Popover.svelte';
+export { default as Portal } from './portal/Portal.svelte';
+export { default as Tabs } from './tabs/index';
+export { default as Tooltip } from './tooltip/Tooltip.svelte';

package/dist/components/layout/index.js

@@ -0,0 +1,7 @@
+export { default as Heading } from './heading/index';
+export { default as HiddenBackground } from './hiddenBackground/index';
+export { default as Modal } from './modal/Modal.svelte';
+export { default as Popover } from './popover/Popover.svelte';
+export { default as Portal } from './portal/Portal.svelte';
+export { default as Tabs } from './tabs/index';
+export { default as Tooltip } from './tooltip/Tooltip.svelte';

package/dist/components/layout/modal/Modal.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" module>
+    import { X } from '@lucide/svelte';
+    import clsx from 'clsx';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import Heading from '../heading/Heading.svelte';
+    import HiddenBackground from '../hiddenBackground/HiddenBackground.svelte';
+
+    /** Props for the modal, expose if you overwrite the defaults in a custom component */
+    export interface ModalProps {
+        /** Class of the modal itself, does not apply to the inner div */
+        class?: ClassValue;
+        /** Class of the div wrapping the children */
+        innerClass?: ClassValue;
+        /** If `true`, the modal will be open */
+        b_open: boolean;
+        /** Content of the modal */
+        children?: Snippet;
+        /** Style applied to the */
+        style?: string;
+        /** If `true` the modal will not close when clicking outside of it */
+        preventClosing?: boolean;
+        /** Variant of the modal, applies styling to the header */
+        variant?: ModalVariant;
+        title?: string;
+    }
+
+    export type ModalVariant = 'success' | 'warning' | 'error' | 'info';
+</script>
+
+<script lang="ts">
+    interface Props extends ModalProps {
+        /** If you don't want the title and close button to be included you can overwrite the default modal */
+        modal?: Snippet;
+        testId?: string;
+    }
+
+    let {
+        class: clazz = 'flex ',
+        style,
+        title,
+        b_open = $bindable(),
+        children,
+        modal,
+        preventClosing = false,
+        variant,
+        innerClass,
+        testId
+    }: Props = $props();
+
+    function close() {
+        if (preventClosing) return;
+        b_open = false;
+    }
+</script>
+
+<!-- 
+	@component
+	A modal, comes with a title, close button and different variants per default.
+-->
+{#if b_open}
+    <HiddenBackground
+        onclose={close}
+        class="flex h-full w-full flex-col items-center justify-start p-16"
+    >
+        {#if modal}
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <div class={clazz} onclick={(e) => e.stopPropagation()} data-testid={testId} {style}>
+                {@render modal()}
+            </div>
+        {:else}
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+                class={twMerge(
+                    clsx([
+                        'bg-surface-50-950 relative flex max-h-full max-w-full flex-col overflow-hidden rounded',
+                        clazz
+                    ])
+                )}
+                {style}
+                onclick={(e) => e.stopPropagation()}
+                data-testid={testId}
+            >
+                <div
+                    class={[
+                        'flex flex-row items-center justify-between gap-4 px-4 py-3',
+                        // !variant && 'pt-3',
+                        variant === 'success' && 'preset-tonal-success',
+                        variant === 'warning' && 'preset-tonal-warning',
+                        variant === 'error' && 'preset-tonal-error',
+                        variant === 'info' && 'preset-tonal-primary'
+                    ]}
+                >
+                    {#if title}
+                        <Heading>{title}</Heading>
+                    {/if}
+                    <button class="group ml-auto flex justify-end" type="button" onclick={close}>
+                        <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
+                    </button>
+                </div>
+                <div
+                    class={twMerge(
+                        clsx('flex flex-col gap-4 overflow-hidden bg-inherit p-4 pt-2', innerClass)
+                    )}
+                >
+                    {@render children?.()}
+                </div>
+            </div>
+        {/if}
+    </HiddenBackground>
+{/if}

package/dist/components/layout/modal/Modal.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+/** Props for the modal, expose if you overwrite the defaults in a custom component */
+export interface ModalProps {
+    /** Class of the modal itself, does not apply to the inner div */
+    class?: ClassValue;
+    /** Class of the div wrapping the children */
+    innerClass?: ClassValue;
+    /** If `true`, the modal will be open */
+    b_open: boolean;
+    /** Content of the modal */
+    children?: Snippet;
+    /** Style applied to the */
+    style?: string;
+    /** If `true` the modal will not close when clicking outside of it */
+    preventClosing?: boolean;
+    /** Variant of the modal, applies styling to the header */
+    variant?: ModalVariant;
+    title?: string;
+}
+export type ModalVariant = 'success' | 'warning' | 'error' | 'info';
+interface Props extends ModalProps {
+    /** If you don't want the title and close button to be included you can overwrite the default modal */
+    modal?: Snippet;
+    testId?: string;
+}
+/** A modal, comes with a title, close button and different variants per default. */
+declare const Modal: import("svelte").Component<Props, {}, "b_open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/layout/modal/ModalTest.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import Modal from './Modal.svelte';
+
+    interface Props {
+        open: boolean;
+        testId: string;
+        children: Snippet;
+    }
+
+    let { open, ...props }: Props = $props();
+
+    let b_open = $state(open);
+</script>
+
+<Modal bind:b_open {...props} />

package/dist/components/layout/modal/ModalTest.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open: boolean;
+    testId: string;
+    children: Snippet;
+}
+declare const ModalTest: import("svelte").Component<Props, {}, "">;
+type ModalTest = ReturnType<typeof ModalTest>;
+export default ModalTest;

package/dist/components/layout/popover/Popover.svelte

@@ -0,0 +1,108 @@
+<script lang="ts" module>
+    import { browser } from '$app/environment';
+    import {
+        autoPlacement,
+        autoUpdate,
+        computePosition,
+        flip,
+        shift,
+        type ComputePositionConfig
+    } from '@floating-ui/dom';
+    import clsx from 'clsx';
+    import type { Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
+    import { clickOutside } from '../../../utils/actions/clickOutside';
+
+    /** Possible placements for the popover */
+    export type PopoverPlacement = ComputePositionConfig['placement'];
+</script>
+
+<script lang="ts">
+    type Props = {
+        class?: ClassValue;
+        /** Whether the popover is open or not */
+        b_open: boolean;
+        style?: string;
+        /** The element the popover will be positioned relative to */
+        target: Element | undefined;
+        /**
+         * Where the popover should be positioned relative to the target.
+         *
+         * default: `bottom-start`
+         */
+        placement?: PopoverPlacement;
+        /**
+         * Callback that is called when the user clicks outside the popover or the target element.
+         */
+        onClickOutside?: (e: MouseEvent) => void;
+        /** If set to `true`, the nested component will not be unmounted when the popover is closed */
+        keepMounted?: boolean;
+        children: Snippet;
+        /**
+         * Whether to place the popover automatically
+         *
+         * [Further reading](https://floating-ui.com/docs/autoPlacement)
+         */
+        autoplacement?: boolean;
+    };
+
+    let {
+        class: clazz,
+        b_open = $bindable(false),
+        style: externalStyle,
+        target,
+        placement = 'bottom-start',
+        onClickOutside = () => {
+            b_open = false;
+        },
+        keepMounted = false,
+        children,
+        autoplacement
+    }: Props = $props();
+
+    let style: string = $state('');
+    let popover: HTMLDivElement | undefined = $state();
+
+    const postion = async (open: boolean) => {
+        if (!open || !popover || !browser || !target) return;
+        const { x, y } = await computePosition(target, popover, {
+            middleware: [shift(), ...(autoplacement ? [autoPlacement()] : [flip()])],
+            placement
+        });
+        style = `top: ${y}px; left: ${x}px;`;
+    };
+
+    let cleanup: () => void = () => {};
+    $effect(() => {
+        if (browser && popover && target)
+            if (b_open) {
+                cleanup = autoUpdate(target, popover, () => postion(b_open));
+            } else {
+                cleanup();
+            }
+    });
+
+    // TODO: this is kinda hacky
+    $effect(() => {
+        [popover, target];
+        postion(b_open);
+    });
+</script>
+
+<!-- 
+    @component
+    A popover, positions itself relative to a target element.
+-->
+{#if b_open || keepMounted}
+    <div
+        class={twMerge(
+            clsx('absolute z-30', !keepMounted && clazz, keepMounted && !b_open ? 'hidden' : clazz)
+        )}
+        style={style + ' ' + externalStyle}
+        bind:this={popover}
+        use:clickOutside={{ callback: onClickOutside, target }}
+    >
+        {@render children()}
+    </div>
+{/if}

package/dist/components/layout/popover/Popover.svelte.d.ts

@@ -0,0 +1,36 @@
+import { type ComputePositionConfig } from '@floating-ui/dom';
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+/** Possible placements for the popover */
+export type PopoverPlacement = ComputePositionConfig['placement'];
+type Props = {
+    class?: ClassValue;
+    /** Whether the popover is open or not */
+    b_open: boolean;
+    style?: string;
+    /** The element the popover will be positioned relative to */
+    target: Element | undefined;
+    /**
+     * Where the popover should be positioned relative to the target.
+     *
+     * default: `bottom-start`
+     */
+    placement?: PopoverPlacement;
+    /**
+     * Callback that is called when the user clicks outside the popover or the target element.
+     */
+    onClickOutside?: (e: MouseEvent) => void;
+    /** If set to `true`, the nested component will not be unmounted when the popover is closed */
+    keepMounted?: boolean;
+    children: Snippet;
+    /**
+     * Whether to place the popover automatically
+     *
+     * [Further reading](https://floating-ui.com/docs/autoPlacement)
+     */
+    autoplacement?: boolean;
+};
+/** A popover, positions itself relative to a target element. */
+declare const Popover: import("svelte").Component<Props, {}, "b_open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/layout/portal/Portal.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { portal } from '../../../utils/actions/index';
+
+    interface Props {
+        children: Snippet;
+        target?: string | HTMLElement;
+    }
+
+    let { children, target = 'body' }: Props = $props();
+</script>
+
+<!-- 
+    @component
+    A portal, renders its children in a different DOM element.
+
+    Wrapps the `use:portal` action.
+
+    **Use sparingy as it can make the DOM structure confusing**
+-->
+<div use:portal={target} hidden>
+    {@render children()}
+</div>

package/dist/components/layout/portal/Portal.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+    target?: string | HTMLElement;
+}
+/**
+ * A portal, renders its children in a different DOM element.
+ *
+ * Wrapps the `use:portal` action.
+ *
+ * **Use sparingy as it can make the DOM structure confusing**
+ */
+declare const Portal: import("svelte").Component<Props, {}, "">;
+type Portal = ReturnType<typeof Portal>;
+export default Portal;