@ims360/svelte-ivory 0.1.15 → 0.2.1

package/src/lib/components/inputs/issues/FormIssues.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { theme } from '$lib/theme.svelte';
+    import { merge } from '$lib/utils/merge';
+    import { TriangleAlert } from '@lucide/svelte';
+    import type { RemoteFormIssue } from '@sveltejs/kit';
+    import type { ClassValue } from 'svelte/elements';
+    import { slide } from 'svelte/transition';
+
+    interface Props {
+        issues?: RemoteFormIssue[];
+        class?: ClassValue;
+    }
+
+    let { issues = [], class: clazz }: Props = $props();
+</script>
+
+{#each issues as err, i (i)}
+    <div
+        class={merge(
+            'text-error-500 flex h-fit w-full flex-row items-start justify-center gap-2 overflow-hidden pl-1',
+            theme.current.input?.issues?.issue?.class,
+            clazz
+        )}
+        transition:slide={{ axis: 'y' }}
+    >
+        <TriangleAlert size="18" class="my-auto" />
+        <p class="flex grow">
+            {#if theme.current.input?.issues?.issue?.label}
+                {theme.current.input?.issues?.issue?.label(err)}
+            {:else}
+                {err.message}
+            {/if}
+        </p>
+    </div>
+{/each}

package/src/lib/components/inputs/select/Select.svelte

@@ -0,0 +1,69 @@
+<script lang="ts" module>
+    import { Popover } from '$lib/components/layout';
+    import { ChevronDown } from '@lucide/svelte';
+    import { createContext, type Snippet } from 'svelte';
+    import Input, { type InputProps } from '../Input.svelte';
+
+    export interface SelectContext {
+        select: (value: string, snippet: Snippet) => void;
+        value: string | undefined | null;
+    }
+
+    export const [getSelectContext, setSelectContext] = createContext<SelectContext>();
+</script>
+
+<script lang="ts">
+    interface Props extends InputProps<string> {
+        placeholder?: string;
+        children: Snippet;
+    }
+
+    let { placeholder = '', children, ...props }: Props = $props();
+
+    let button = $state<HTMLButtonElement | undefined>();
+    let buttonWidth = $state<number>(200);
+    let popover = $state<Popover>();
+    let selectedSnippet = $state<Snippet>();
+
+    const value = $derived(props.form.value());
+
+    function select(newValue: string, snippet: Snippet) {
+        selectedSnippet = snippet;
+        if (newValue === value) return;
+        props.form.set(newValue);
+        popover?.close();
+    }
+
+    setSelectContext({
+        select,
+        get value() {
+            return value;
+        }
+    });
+</script>
+
+<Input {...props}>
+    <button
+        type="button"
+        class="flex h-14 w-full flex-row items-center justify-start gap-2 px-4 py-2"
+        onclick={popover?.toggle}
+        bind:this={button}
+        bind:clientWidth={buttonWidth}
+    >
+        {#if selectedSnippet}
+            {@render selectedSnippet()}
+        {:else}
+            {placeholder}
+        {/if}
+        <ChevronDown class={['ml-auto transition-all', popover?.isOpen() && 'rotate-180']} />
+    </button>
+</Input>
+
+<Popover
+    bind:this={popover}
+    class="bg-surface-50-950 mt-2 flex flex-col gap-2 rounded p-2 shadow"
+    style={`min-width: ${buttonWidth}px`}
+    target={button}
+>
+    {@render children()}
+</Popover>

package/src/lib/components/inputs/select/SelectOption.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { type Snippet } from 'svelte';
+    import type { ClassValue } from 'svelte/elements';
+    import { getSelectContext } from './Select.svelte';
+
+    interface Props {
+        class?: ClassValue;
+        value: string;
+        children: Snippet;
+    }
+
+    let {
+        class: clazz = 'flex flex-row justify-start items-center gap-2',
+        value,
+        children
+    }: Props = $props();
+
+    const context = getSelectContext();
+
+    // this needs to run in an effect so we can update the value from outside the component
+    $effect(function setValue() {
+        if (context.value === value) context.select(value, children);
+    });
+</script>
+
+<button
+    type="button"
+    class={[clazz]}
+    onclick={() => {
+        context.select(value, children);
+    }}
+>
+    {@render children()}
+</button>

package/src/lib/components/layout/Heading.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
     import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent } from '$lib/types';
-    import clsx from 'clsx';
+    import { merge } from '$lib/utils/merge';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
 
     export interface HeadingProps extends IvoryComponent<HTMLHeadingElement> {
         class?: ClassValue;
@@ -15,8 +14,10 @@
 </script>
 
 <h2
-    class={twMerge(
-        clsx('shrink-0 truncate text-lg font-bold select-none', theme.current.heading?.class, clazz)
+    class={merge(
+        'shrink-0 truncate text-lg font-bold select-none',
+        theme.current.heading?.class,
+        clazz
     )}
     {...rest}
 >

package/src/lib/components/layout/dialog/Dialog.svelte

@@ -1,11 +1,10 @@
 <script lang="ts" module>
     import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent, TransitionProps } from '$lib/types';
-    import clsx from 'clsx';
+    import { merge } from '$lib/utils/merge';
     import { onMount, tick } from 'svelte';
     import type { MouseEventHandler } from 'svelte/elements';
     import { fade } from 'svelte/transition';
-    import { twMerge } from 'tailwind-merge';
 
     export interface DialogProps extends IvoryComponent<HTMLElement>, TransitionProps {
         /** Gets called when the dialog requests to close (Escape, backdrop click) */
@@ -61,12 +60,10 @@
     onclick={handleBackdropClick}
     oncancel={requestClose}
     onclose={close}
-    class={twMerge(
-        clsx(
-            'h-full max-h-none w-screen max-w-full bg-transparent backdrop:bg-transparent',
-            theme.current.dialog?.class,
-            clazz
-        )
+    class={merge(
+        'h-full max-h-none w-screen max-w-full bg-transparent backdrop:bg-transparent',
+        theme.current.dialog?.class,
+        clazz
     )}
     in:inTransition
     out:outTransition

package/src/lib/components/layout/drawer/Drawer.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" module>
     import type { TransitionProps } from '$lib/types';
+    import { merge } from '$lib/utils/merge';
     import { X } from '@lucide/svelte';
-    import clsx from 'clsx';
     import type { Snippet } from 'svelte';
     import { fly } from 'svelte/transition';
-    import { twMerge } from 'tailwind-merge';
     import { HiddenBackground } from '..';
     import Heading from '../Heading.svelte';
 
@@ -58,14 +57,12 @@
         }}
     >
         <div
-            class={twMerge(
-                clsx([
-                    'bg-surface-50-950 absolute top-0 flex h-full flex-col gap-4 p-4',
-                    placement === 'left' && 'left-0',
-                    placement === 'right' && 'right-0',
-                    clazz
-                ])
-            )}
+            class={merge([
+                'bg-surface-50-950 absolute top-0 flex h-full flex-col gap-4 p-4',
+                placement === 'left' && 'left-0',
+                placement === 'right' && 'right-0',
+                clazz
+            ])}
             onclick={(e) => e.stopPropagation()}
             in:inTransition|global
             out:outTransition|global

package/src/lib/components/layout/index.ts

@@ -1,16 +1,12 @@
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as Heading } from './Heading.svelte';
-export {
-    default as HiddenBackground,
-    type HiddenBackgroundProps
-} from './hiddenBackground/HiddenBackground.svelte';
+export { default as HiddenBackground } from './hiddenBackground/HiddenBackground.svelte';
 export { default as Modal, type ModalProps, type ModalVariant } from './modal/Modal.svelte';
 export {
     default as Popover,
     type PopoverPlacement,
     type PopoverProps
 } from './popover/Popover.svelte';
-export { default as Portal } from './portal';
 export {
     getTabContext,
     Tab,

package/src/lib/components/layout/modal/Modal.svelte

@@ -1,12 +1,11 @@
 <script lang="ts" module>
     import { theme } from '$lib/theme.svelte';
     import type { TransitionProps } from '$lib/types';
+    import { merge } from '$lib/utils/merge';
     import { X } from '@lucide/svelte';
-    import clsx from 'clsx';
     import { type Snippet } from 'svelte';
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
     import { fade } from 'svelte/transition';
-    import { twMerge } from 'tailwind-merge';
     import { Heading, HiddenBackground } from '..';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
@@ -95,13 +94,11 @@
             </div>
         {:else}
             <div
-                class={twMerge(
-                    clsx([
-                        'bg-surface-50-950 relative flex max-h-full max-w-full flex-col overflow-hidden rounded',
-                        theme.current.modal?.class,
-                        clazz
-                    ])
-                )}
+                class={merge([
+                    'bg-surface-50-950 flex max-h-full max-w-full flex-col overflow-hidden rounded',
+                    theme.current.modal?.class,
+                    clazz
+                ])}
                 {...rest}
                 {onclick}
                 in:inTransition|global
@@ -131,12 +128,10 @@
                     </button>
                 </div>
                 <div
-                    class={twMerge(
-                        clsx(
-                            'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
-                            theme.current.modal?.innerClass,
-                            innerClass
-                        )
+                    class={merge(
+                        'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
+                        theme.current.modal?.innerClass,
+                        innerClass
                     )}
                 >
                     {@render children?.()}

package/src/lib/components/layout/popover/Popover.svelte

@@ -2,6 +2,7 @@
     import { browser } from '$app/environment';
     import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent } from '$lib/types';
+    import { clickOutside } from '$lib/utils/attachments';
     import {
         autoPlacement,
         autoUpdate,
@@ -12,8 +13,6 @@
     } from '@floating-ui/dom';
     import clsx from 'clsx';
     import { twMerge } from 'tailwind-merge';
-    import { clickOutside } from '../../../utils/actions/clickOutside';
-    import { Dialog } from '../dialog';
 
     /** Possible placements for the popover */
     export type PopoverPlacement = ComputePositionConfig['placement'];
@@ -99,15 +98,13 @@
     A popover, positions itself relative to a target element.
 -->
 {#if currentlyOpen}
-    <Dialog>
-        <div
-            class={twMerge(clsx('absolute', theme.current.popover?.class, clazz))}
-            style={style + ' ' + externalStyle}
-            bind:this={popover}
-            use:clickOutside={{ callback: onClickOutside, target }}
-            {...rest}
-        >
-            {@render children?.()}
-        </div>
-    </Dialog>
+    <div
+        class={twMerge(clsx('absolute', theme.current.popover?.class, clazz))}
+        style={style + ' ' + externalStyle}
+        bind:this={popover}
+        {@attach clickOutside({ callback: onClickOutside, target })}
+        {...rest}
+    >
+        {@render children?.()}
+    </div>
 {/if}

package/src/lib/components/layout/tabs/Tab.svelte

@@ -3,10 +3,9 @@
     import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent } from '$lib/types';
     import { pseudoRandomId } from '$lib/utils/functions/index';
-    import clsx from 'clsx';
+    import { merge } from '$lib/utils/merge';
     import { onMount, type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
     import { getTabContext } from './Tabs.svelte';
 
     export interface TabProps extends Omit<IvoryComponent<HTMLElement>, 'children'> {
@@ -52,12 +51,10 @@
 
 <svelte:element
     this={href ? 'a' : 'button'}
-    class={twMerge(
-        clsx(
-            'btn flex h-fit w-fit shrink-0 items-center justify-center px-0 text-xl font-bold select-none',
-            theme.current.tabs?.tab?.class?.(selected),
-            typeof clazz === 'function' ? clazz(selected) : clazz
-        )
+    class={merge(
+        'btn flex h-fit w-fit shrink-0 items-center justify-center px-0 text-xl font-bold select-none',
+        theme.current.tabs?.tab?.class?.(selected),
+        typeof clazz === 'function' ? clazz(selected) : clazz
     )}
     onclick={href
         ? undefined

package/src/lib/components/layout/tooltip/Tooltip.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" module>
-    import clsx from 'clsx';
+    import { merge } from '$lib/utils/merge';
     import type { Snippet } from 'svelte';
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
     import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
 
     export interface TooltipProps {
@@ -84,11 +83,9 @@
     bind:this={popover}
     {target}
     {placement}
-    class={twMerge(
-        clsx(
-            'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
-            tooltipClass
-        )
+    class={merge(
+        'bg-surface-50-950 max-w-96 -translate-y-0.5 rounded px-4 py-1 shadow-lg',
+        tooltipClass
     )}
 >
     {#if typeof tooltip === 'string'}

package/src/lib/components/table/Column.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
     import { theme } from '$lib/theme.svelte';
-    import clsx from 'clsx';
+    import { merge } from '$lib/utils/merge';
     import { type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
     import type { ColumnConfig } from './columnController.svelte';
     import { getRowContext } from './Row.svelte';
     import { getTableContext } from './Table.svelte';
@@ -67,14 +66,12 @@
     href={!allowClicking ? rowContext.href : undefined}
     type={allowClicking ? 'button' : undefined}
     style={ignoreWidth ? '' : `width: ${widthStyle}`}
-    class={twMerge(
-        clsx([
-            'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
-            column.width !== 0 && 'border-r-[calc(var(--spacing)*2)] border-transparent',
-            theme.current.table?.column?.class,
-            clazz
-        ])
-    )}
+    class={merge([
+        'box-border flex h-full shrink-0 flex-row items-center justify-start gap-1 truncate',
+        column.width !== 0 && 'border-r-[calc(var(--spacing)*2)] border-transparent',
+        theme.current.table?.column?.class,
+        clazz
+    ])}
 >
     {@render children()}
 </svelte:element>

package/src/lib/components/table/ColumnHead.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
     import { getContext, setContext, type Snippet } from 'svelte';
-    import { resize } from '../../utils/actions';
+    import { resize } from '../../utils/attachments';
     import type { ColumnController } from './columnController.svelte';
 
     const CONTEXT = {};
@@ -53,12 +53,12 @@
     {@render children?.()}
     {#if column.resizable}
         <button
+            {@attach resize({ resized: onResize, dragging: onDragging })}
             type="button"
             class={[
                 'relative ml-auto h-full w-4 shrink-0 cursor-col-resize bg-inherit after:absolute after:top-0 after:right-2 after:h-full after:w-px',
                 dragging ? 'after:bg-primary-400-600' : 'group-hover:after:bg-surface-300-700'
             ]}
-            use:resize={{ resized: onResize, dragging: onDragging }}
             onmouseenter={onHoverStart}
             onmouseleave={onHoverEnd}
             onfocusin={onHoverStart}

package/src/lib/components/table/Table.svelte

@@ -1,10 +1,9 @@
 <script lang="ts" module>
+    import { merge } from '$lib/utils/merge';
     import { ChevronRight } from '@lucide/svelte';
-    import clsx from 'clsx';
     import { getContext, setContext, untrack, type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
     import { SvelteSet } from 'svelte/reactivity';
-    import { twMerge } from 'tailwind-merge';
     import ColumnComponent from './Column.svelte';
     import { ColumnController, type ColumnConfig } from './columnController.svelte';
     import ColumnHead from './ColumnHead.svelte';
@@ -200,17 +199,15 @@
     bind:this={list}
     bind:b_scrollTop
     data={results.entries}
-    class={twMerge(clsx(['flex flex-col overflow-hidden border-transparent', clazz]))}
+    class={merge(['flex flex-col overflow-hidden border-transparent', clazz])}
     rowClass={['pl-2 pr-4', rowClass]}
     {rowHeight}
 >
     {#snippet header()}
         <div
-            class={twMerge(
-                clsx(
-                    'flex w-fit min-w-full flex-row border-b border-inherit pr-4 pl-2',
-                    headerClass
-                )
+            class={merge(
+                'flex w-fit min-w-full flex-row border-b border-inherit pr-4 pl-2',
+                headerClass
             )}
         >
             {#if results.someHaveChildren}

package/src/lib/components/table/VirtualList.svelte

@@ -1,8 +1,7 @@
 <script lang="ts" generics="T extends { id: string }">
-    import clsx from 'clsx';
+    import { merge } from '$lib/utils/merge';
     import { onMount, tick, untrack, type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
 
     type Props<T> = {
         class?: ClassValue;
@@ -27,7 +26,7 @@
     }: Props<T> = $props();
 
     const finalRowClass = $derived(
-        twMerge(clsx(['flex w-full shrink-0 grow flex-row items-center overflow-hidden', rowClass]))
+        merge(['flex w-full shrink-0 grow flex-row items-center overflow-hidden', rowClass])
     );
 
     let viewportReactivity = $state(0);
@@ -93,11 +92,7 @@
     });
 </script>
 
-<div
-    class={twMerge(
-        clsx(['scroll relative flex grow flex-col overflow-hidden border-inherit', clazz])
-    )}
->
+<div class={merge(['scroll relative flex grow flex-col overflow-hidden border-inherit', clazz])}>
     {#if header}
         <div class="h-fit w-full border-inherit">
             <div

package/src/lib/theme.svelte.ts

@@ -1,6 +1,10 @@
+import type { RemoteFormIssue } from '@sveltejs/kit';
 import type { ClassValue } from 'svelte/elements';
 
 export interface Theme {
+    checkbox?: {
+        class?: (checked: boolean, partial: boolean) => ClassValue;
+    };
     heading?: {
         class?: ClassValue;
     };
@@ -27,6 +31,20 @@ export interface Theme {
     popover?: {
         class?: ClassValue;
     };
+    input?: {
+        outerClass?: ClassValue;
+        class?: (value: boolean, issues?: boolean) => ClassValue;
+        label?: {
+            class?: (value: boolean, issues?: boolean) => ClassValue;
+        };
+        issues?: {
+            issue?: {
+                label?: (issue: RemoteFormIssue) => string;
+                class?: ClassValue;
+            };
+            class?: ClassValue;
+        };
+    };
 }
 
 function createTheme() {

package/src/lib/types.ts

@@ -2,8 +2,9 @@ import type { HTMLAttributes } from 'svelte/elements';
 import type { TransitionConfig } from 'svelte/transition';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface IvoryComponent<RootElement extends EventTarget>
-    extends HTMLAttributes<RootElement> {}
+export interface IvoryComponent<
+    RootElement extends EventTarget
+> extends HTMLAttributes<RootElement> {}
 
 export interface TransitionProps {
     inTransition?: (node: Element) => TransitionConfig;

package/src/lib/utils/attachments/clickOutside.ts

@@ -0,0 +1,36 @@
+import type { Attachment } from 'svelte/attachments';
+
+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;
+}
+
+export const clickOutside =
+    (params: ((e: MouseEvent) => void) | ClickOutsideParams): Attachment =>
+    (node) => {
+        function handleClick(event: MouseEvent) {
+            if (
+                !(event.target instanceof Node) ||
+                !node ||
+                node.contains(event.target) ||
+                event.defaultPrevented
+            )
+                return;
+
+            if (typeof params === 'function') {
+                params(event);
+                return;
+            }
+
+            if (params.target?.contains(event.target)) return;
+            params.callback(event);
+        }
+
+        document.addEventListener('click', handleClick, true);
+
+        return () => {
+            document.removeEventListener('click', handleClick, true);
+        };
+    };

package/src/lib/utils/attachments/focusTrap.ts

@@ -0,0 +1,67 @@
+import type { Attachment } from 'svelte/attachments';
+
+export const focusTrap =
+    (enabled: boolean): Attachment =>
+    (node) => {
+        const elementWhitelist =
+            'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
+        let firstElement: HTMLElement;
+        let lastElement: HTMLElement;
+
+        function onFirstElemKeydown(e: KeyboardEvent): void {
+            if (e.shiftKey && e.code === 'Tab') {
+                e.preventDefault();
+                lastElement.focus();
+            }
+        }
+
+        function onLastElemKeydown(e: KeyboardEvent): void {
+            if (!e.shiftKey && e.code === 'Tab') {
+                e.preventDefault();
+                firstElement.focus();
+            }
+        }
+
+        function scanElements(fromObserver: boolean) {
+            if (enabled === false) return;
+            const focusableElems: HTMLElement[] = Array.from(
+                node.querySelectorAll(elementWhitelist)
+            );
+            if (focusableElems.length) {
+                // Set first/last focusable elements
+                firstElement = focusableElems[0];
+                lastElement = focusableElems[focusableElems.length - 1];
+                // Auto-focus first focusable element only when not called from mutation observer
+                if (!fromObserver) firstElement.focus();
+                // Listen for keydown on first & last element
+                firstElement.addEventListener('keydown', onFirstElemKeydown);
+                lastElement.addEventListener('keydown', onLastElemKeydown);
+            }
+        }
+        scanElements(false);
+
+        function cleanUp(): void {
+            if (firstElement) firstElement.removeEventListener('keydown', onFirstElemKeydown);
+            if (lastElement) lastElement.removeEventListener('keydown', onLastElemKeydown);
+        }
+
+        // Re-determine focusable elements when mutations are observed
+        const onObservationChange = (
+            mutationRecords: MutationRecord[],
+            observer: MutationObserver
+        ) => {
+            if (mutationRecords.length) {
+                cleanUp();
+                scanElements(true);
+            }
+            return observer;
+        };
+        const observer = new MutationObserver(onObservationChange);
+        observer.observe(node, { childList: true, subtree: true });
+
+        // Lifecycle
+        return () => {
+            cleanUp();
+            observer.disconnect();
+        };
+    };