@ims360/svelte-ivory 0.1.15 → 0.2.0

package/dist/utils/{actions → attachments}/clickOutside.js

@@ -1,5 +1,4 @@
-/** Dispatch event on click outside of node */
-export function clickOutside(node, params) {
+export const clickOutside = (params) => (node) => {
     function handleClick(event) {
         if (!(event.target instanceof Node) ||
             !node ||
@@ -15,9 +14,7 @@ export function clickOutside(node, params) {
         params.callback(event);
     }
     document.addEventListener('click', handleClick, true);
-    return {
-        destroy() {
-            document.removeEventListener('click', handleClick, true);
-        }
+    return () => {
+        document.removeEventListener('click', handleClick, true);
     };
-}
+};

package/dist/utils/attachments/focusTrap.d.ts

@@ -0,0 +1,3 @@
+import type { Attachment } from 'svelte/attachments';
+export declare const focusTrap: (enabled: boolean) => Attachment;
+//# sourceMappingURL=focusTrap.d.ts.map

package/dist/utils/attachments/focusTrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusTrap.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/attachments/focusTrap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,eAAO,MAAM,SAAS,GACjB,SAAS,OAAO,KAAG,UA+DnB,CAAC"}

package/dist/utils/{actions → attachments}/focusTrap.js

@@ -1,4 +1,4 @@
-export function focusTrap(node, enabled) {
+export const focusTrap = (enabled) => (node) => {
     const elementWhitelist = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
     let firstElement;
     let lastElement;
@@ -48,17 +48,8 @@ export function focusTrap(node, enabled) {
     const observer = new MutationObserver(onObservationChange);
     observer.observe(node, { childList: true, subtree: true });
     // Lifecycle
-    return {
-        update(newArgs) {
-            enabled = newArgs;
-            if (newArgs)
-                scanElements(false);
-            else
-                cleanUp();
-        },
-        destroy() {
-            cleanUp();
-            observer.disconnect();
-        }
+    return () => {
+        cleanUp();
+        observer.disconnect();
     };
-}
+};

package/dist/utils/{actions → attachments}/index.d.ts

@@ -1,6 +1,5 @@
 export { clickOutside } from './clickOutside';
 export { focusTrap } from './focusTrap';
-export { portal } from './portal';
 export { resize } from './resize';
 export { shortcut } from './shortcut.svelte';
 export { onFirstVisible } from './visible';

package/dist/utils/attachments/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/attachments/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC"}

package/dist/utils/{actions → attachments}/index.js

@@ -1,6 +1,5 @@
 export { clickOutside } from './clickOutside';
 export { focusTrap } from './focusTrap';
-export { portal } from './portal';
 export { resize } from './resize';
 export { shortcut } from './shortcut.svelte';
 export { onFirstVisible } from './visible';

package/dist/utils/attachments/resize.d.ts

@@ -0,0 +1,6 @@
+import type { Attachment } from 'svelte/attachments';
+export declare const resize: ({ resized, dragging }: {
+    resized: (mouseX: number) => void;
+    dragging: (dragging: boolean) => void;
+}) => Attachment;
+//# sourceMappingURL=resize.d.ts.map

package/dist/utils/attachments/resize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/attachments/resize.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,eAAO,MAAM,MAAM,GACd,uBAGE;IACC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,KAAG,UA4BH,CAAC"}

package/dist/utils/{actions → attachments}/resize.js

@@ -1,4 +1,4 @@
-export const resize = (node, { resized, dragging }) => {
+export const resize = ({ resized, dragging }) => (node) => {
     const onResize = (e) => {
         resized(e.clientX);
     };
@@ -17,9 +17,7 @@ export const resize = (node, { resized, dragging }) => {
         document.getElementsByTagName('html')[0].style.userSelect = 'none';
     };
     node.addEventListener('pointerdown', onResizeStart);
-    return {
-        destroy() {
-            node.removeEventListener('pointerdown', onResizeStart);
-        }
+    return () => {
+        node.removeEventListener('pointerdown', onResizeStart);
     };
 };

package/dist/utils/attachments/shortcut.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcut.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/attachments/shortcut.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,MAAM,WAAW,cAAc;IAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AA4CD,wBAAgB,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU,CAQ3D"}

package/dist/utils/attachments/visible.d.ts

@@ -0,0 +1,6 @@
+import type { Attachment } from 'svelte/attachments';
+export declare const onFirstVisible: (params: {
+    callback: () => void;
+    options?: Partial<IntersectionObserverInit>;
+}) => Attachment;
+//# sourceMappingURL=visible.d.ts.map

package/dist/utils/attachments/visible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visible.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/attachments/visible.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,eAAO,MAAM,cAAc,GACtB,QAAQ;IAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,CAAA;CAAE,KAAG,UAkBhF,CAAC"}

package/dist/utils/attachments/visible.js

@@ -0,0 +1,12 @@
+export const onFirstVisible = (params) => (node) => {
+    const observer = new IntersectionObserver((e) => {
+        if (!e[0].isIntersecting) {
+            return;
+        }
+        params.callback();
+    }, { root: null, threshold: 1, ...params.options });
+    observer.observe(node);
+    return () => {
+        observer.disconnect();
+    };
+};

package/dist/utils/merge.d.ts

@@ -0,0 +1,4 @@
+import { type ClassArray } from 'clsx';
+/** `twMerge(clsx(classes))` */
+export declare const merge: (...classes: ClassArray) => string;
+//# sourceMappingURL=merge.d.ts.map

package/dist/utils/merge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge.d.ts","sourceRoot":"","sources":["../../src/lib/utils/merge.ts"],"names":[],"mappings":"AAAA,OAAa,EAAE,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,+BAA+B;AAC/B,eAAO,MAAM,KAAK,GAAI,GAAG,SAAS,UAAU,WAE3C,CAAC"}

package/dist/utils/merge.js

@@ -0,0 +1,6 @@
+import clsx, {} from 'clsx';
+import { twMerge } from 'tailwind-merge';
+/** `twMerge(clsx(classes))` */
+export const merge = (...classes) => {
+    return twMerge(clsx(classes));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ims360/svelte-ivory",
-    "version": "0.1.15",
+    "version": "0.2.0",
     "keywords": [
         "svelte"
     ],
@@ -38,9 +38,9 @@
             "types": "./dist/components/inputs/index.d.ts",
             "svelte": "./dist/components/inputs/index.js"
         },
-        "./utils/actions": {
-            "types": "./dist/utils/actions/index.d.ts",
-            "svelte": "./dist/utils/actions/index.js"
+        "./utils/attachments": {
+            "types": "./dist/utils/attachments/index.d.ts",
+            "svelte": "./dist/utils/attachments/index.js"
         },
         "./utils/functions": {
             "types": "./dist/utils/functions/index.d.ts",
@@ -73,6 +73,7 @@
     "dependencies": {
         "@floating-ui/dom": "^1.7.4",
         "@lucide/svelte": "^0.553.0",
+        "@oddbird/css-anchor-positioning": "^0.8.0",
         "@tailwindcss/forms": "^0.5.10",
         "@tailwindcss/typography": "^0.5.19",
         "@tailwindcss/vite": "^4.1.17",
@@ -108,7 +109,8 @@
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.46.4",
         "vite": "^7.2.2",
-        "vitest": "^4.0.8"
+        "vitest": "^4.0.8",
+        "zod": "^4.1.13"
     },
     "peerDependencies": {
         "@skeletonlabs/skeleton": "^3.1.1",

package/src/lib/components/ai/AiMessage.svelte

@@ -5,11 +5,10 @@
 -->
 
 <script lang="ts">
+    import { merge } from '$lib/utils/merge';
     import { ThumbsDown, ThumbsUp } from '@lucide/svelte';
-    import clsx from 'clsx';
     import type { Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
     import CopyToClipboardButton from '../buttons/CopyToClipboardButton.svelte';
     import type { AiChatMessage } from './Chat.svelte';
     import Markdown from './Markdown.svelte';
@@ -48,7 +47,7 @@
 </script>
 
 <div
-    class={twMerge(clsx('group flex w-full flex-col items-start', clazz))}
+    class={merge('group flex w-full flex-col items-start', clazz)}
     style={minHeight ? `min-height: ${minHeight}px;` : undefined}
 >
     {@render messageText({

package/src/lib/components/ai/Chat.svelte

@@ -6,10 +6,9 @@
 -->
 
 <script lang="ts" module>
-    import clsx from 'clsx';
+    import { merge } from '$lib/utils/merge';
     import { tick, type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
     import AiMessage from './AiMessage.svelte';
     import UserMessage from './UserMessage.svelte';
 
@@ -101,7 +100,7 @@
     }
 </script>
 
-<div class={twMerge(clsx('flex grow flex-col gap-2 overflow-hidden', clazz))}>
+<div class={merge('flex grow flex-col gap-2 overflow-hidden', clazz)}>
     <div
         class="flex grow flex-col gap-4 overflow-auto pr-2 [scrollbar-gutter:stable]"
         bind:this={chatContainer}

package/src/lib/components/ai/Markdown.svelte

@@ -5,11 +5,10 @@
 -->
 
 <script lang="ts">
-    import clsx from 'clsx';
+    import { merge } from '$lib/utils/merge';
     import DomPurify from 'dompurify';
     import { marked } from 'marked';
     import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
 
     interface Props {
         source: string;
@@ -44,11 +43,9 @@
 </script>
 
 <div
-    class={twMerge(
-        clsx(
-            'text-surface-950-50 prose prose-strong:text-surface-950-50 prose-p:my-1 flex flex-col items-start gap-1',
-            clazz
-        )
+    class={merge(
+        'text-surface-950-50 prose prose-strong:text-surface-950-50 prose-p:my-1 flex flex-col items-start gap-1',
+        clazz
     )}
 >
     {#await html then html}

package/src/lib/components/ai/UserMessage.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-    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 AttachedFile from './AttachedFile.svelte';
     import type { AiChatMessage } from './Chat.svelte';
     import Markdown from './Markdown.svelte';
@@ -24,7 +23,7 @@
     }: Props = $props();
 </script>
 
-<div class={twMerge(clsx('flex w-full flex-col items-end gap-1', clazz))}>
+<div class={merge('flex w-full flex-col items-end gap-1', clazz)}>
     {@render messageText({ message })}
     {#if message.files}
         <div class="flex flex-row items-center gap-2">

package/src/lib/components/basic/checkbox/Checkbox.svelte

@@ -1,10 +1,11 @@
 <script lang="ts" module>
+    import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent } from '$lib/types';
+    import { merge } from '$lib/utils/merge';
     import { Check, type Icon as LucideIcon, Minus } from '@lucide/svelte';
     import clsx from 'clsx';
     import type { ClassValue } from 'svelte/elements';
     import { scale } from 'svelte/transition';
-    import { twMerge } from 'tailwind-merge';
 
     export interface CheckboxProps extends IvoryComponent<HTMLElement> {
         class?: ClassValue;
@@ -40,16 +41,19 @@
         innerClass,
         style
     }: { icon?: typeof LucideIcon; innerClass?: string; style?: string } = $derived.by(() => {
-        if (!checked && !partial) return { innerClass: 'border-surface-500' };
+        const overwrittenClass =
+            theme.current.checkbox?.class &&
+            clsx(theme.current.checkbox?.class?.(!!checked, !!partial));
+        if (!checked && !partial) return { innerClass: overwrittenClass ?? 'border-surface-500' };
         if (checked)
             return {
                 icon: Check,
-                innerClass: 'bg-primary-500 border-primary-500 text-surface-50'
+                innerClass: overwrittenClass ?? 'bg-primary-500 border-primary-500 text-surface-50'
             };
         if (partial)
             return {
                 icon: Minus,
-                innerClass: 'border-primary-700 text-primary-500'
+                innerClass: overwrittenClass ?? 'border-primary-700 text-primary-500'
             };
         return {};
     });
@@ -62,13 +66,11 @@
     {disabled}
     {style}
     {onclick}
-    class={twMerge(
-        clsx(
-            'box-border flex h-5 w-5 items-center justify-center overflow-hidden rounded border-2 transition-colors',
-            disabled && 'cursor-not-allowed opacity-70',
-            innerClass,
-            clazz
-        )
+    class={merge(
+        'box-border flex h-5 w-5 items-center justify-center overflow-hidden rounded border-2 transition-colors',
+        disabled && 'cursor-not-allowed opacity-70',
+        innerClass,
+        clazz
     )}
     {...rest}
 >

package/src/lib/components/basic/toggle/Toggle.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
     import type { IvoryComponent } from '$lib/types';
-    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';
 
     export interface ToggleProps extends IvoryComponent<HTMLElement> {
         value?: boolean;
@@ -18,12 +17,10 @@
 
 <svelte:element
     this={rest.onclick ? 'button' : 'div'}
-    class={twMerge(
-        clsx(
-            'group relative flex h-5 w-9 flex-row items-center rounded-full p-0.5 transition-colors duration-100',
-            value ? 'bg-primary-500' : 'bg-surface-300-700',
-            clazz
-        )
+    class={merge(
+        'group relative flex h-5 w-9 flex-row items-center rounded-full p-0.5 transition-colors duration-100',
+        value ? 'bg-primary-500' : 'bg-surface-300-700',
+        clazz
     )}
     type={rest.onclick ? 'button' : undefined}
     role={rest.onclick ? 'button' : undefined}

package/src/lib/components/inputs/CheckboxInput.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import type { ClassValue } from 'svelte/elements';
+    import { Checkbox } from '../basic';
+    import type { InputProps } from './Input.svelte';
+    import FormIssues from './issues/FormIssues.svelte';
+
+    interface Props extends InputProps<boolean> {
+        class?: ClassValue;
+        label: string;
+        description?: string;
+        onclick?: () => void;
+    }
+
+    let { class: clazz = '', label, description, onclick, disabled, form }: Props = $props();
+
+    const { set, issues, value } = $derived(form);
+
+    const checked = $derived(value());
+</script>
+
+<div class={['flex flex-col', clazz]}>
+    <button
+        type="button"
+        {disabled}
+        onclick={onclick ||
+            (() => {
+                set(!checked);
+            })}
+        class={['flex flex-row items-center gap-2', disabled && 'opacity-80']}
+    >
+        <Checkbox {checked} />
+        {label}
+    </button>
+    <input class="hidden" {...form.as('checkbox')} {checked} />
+    {#if description}
+        <p class="text-surface-700-300">{description}</p>
+    {/if}
+    <FormIssues issues={issues?.()} />
+</div>

package/src/lib/components/inputs/ColorInput.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { merge } from '$lib/utils/merge';
+    import Input, { INPUT_UNSET_OUTLINE, type InputProps } from './Input.svelte';
+
+    let props: InputProps<string> = $props();
+</script>
+
+<Input {...props}>
+    {#snippet children({ id, class: inputClass })}
+        <div
+            class={merge([inputClass, 'flex grow flex-row items-center justify-between gap-4 p-0'])}
+        >
+            <input
+                type="text"
+                bind:value={props.form.value, props.form.set}
+                class={['flex h-full grow items-center bg-transparent pl-2', INPUT_UNSET_OUTLINE]}
+            />
+            <input
+                class={['h-full rounded', INPUT_UNSET_OUTLINE]}
+                {id}
+                {...props.form.as('color')}
+            />
+        </div>
+    {/snippet}
+</Input>

package/src/lib/components/inputs/DateInput.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import Input, { type InputProps } from './Input.svelte';
+
+    let props: InputProps<string> = $props();
+</script>
+
+<Input {...props}>
+    {#snippet children(inputProps)}
+        <input {...inputProps} {...props.form.as?.('date')} />
+    {/snippet}
+</Input>

package/src/lib/components/inputs/EmailInput.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import Input, { type InputProps } from './Input.svelte';
+
+    let props: InputProps<string> = $props();
+</script>
+
+<Input {...props}>
+    {#snippet children(inputProps)}
+        <input
+            {...inputProps}
+            {...props.form.as?.('email')}
+            autocomplete="email"
+            autocapitalize="off"
+        />
+    {/snippet}
+</Input>

package/src/lib/components/inputs/FileInput.svelte

@@ -0,0 +1,131 @@
+<script lang="ts" module>
+    import { FileUp, X } from '@lucide/svelte';
+    import type { Snippet } from 'svelte';
+    import type { InputProps } from './Input.svelte';
+    import Input from './Input.svelte';
+
+    export interface FileInputProps extends InputProps<File[] | File> {
+        accept?: string[];
+        children?: Snippet;
+        multiple?: boolean;
+    }
+</script>
+
+<script lang="ts">
+    let { accept, children: passedChildren, multiple = false, ...rest }: FileInputProps = $props();
+
+    let hovering = $state(false);
+
+    function onDrop(
+        event: DragEvent & {
+            currentTarget: EventTarget & HTMLElement;
+        }
+    ) {
+        add(event.dataTransfer?.files ? Array.from(event.dataTransfer.files) : []);
+    }
+
+    function add(files: File[]) {
+        const value = rest.form.value();
+        if (Array.isArray(value)) {
+            rest.form.set([...value.filter((f) => !files.includes(f)), ...Array.from(files || [])]);
+        } else {
+            rest.form.set((files[0] ?? undefined) as File);
+        }
+    }
+
+    function remove(file: File) {
+        const value = rest.form.value();
+        if (Array.isArray(value)) {
+            rest.form.set(value.filter((e) => e !== file));
+        } else {
+            rest.form.set(undefined as unknown as File);
+        }
+    }
+
+    const files = $derived.by(() => {
+        const value = rest.form.value();
+        if (Array.isArray(value)) {
+            return value;
+        } else {
+            return value ? [value] : [];
+        }
+    });
+
+    const formAttributes = $derived(rest.form.as(multiple ? 'file multiple' : 'file'));
+</script>
+
+<Input {...rest} fixTitle>
+    {#snippet children({ id })}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div
+            class={[
+                'group relative h-full min-h-16 w-full rounded transition-all',
+                hovering ? 'bg-primary-50-950' : ''
+            ]}
+            ondragover={() => {
+                hovering = true;
+            }}
+            ondragleave={() => {
+                hovering = false;
+            }}
+            ondrop={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                hovering = false;
+                onDrop(e);
+            }}
+        >
+            {#if passedChildren}
+                {@render passedChildren()}
+            {:else}
+                <div class="flex h-full w-full flex-col items-center justify-center gap-2 p-4">
+                    {#if files && files.length > 0}
+                        <div class="flex flex-row items-center gap-4">
+                            {#each files as file (file)}
+                                {@render fileRender(file)}
+                            {/each}
+                        </div>
+                    {:else}
+                        <div
+                            class="text-primary-200-800 group-hover:text-primary-300-700 group-hover:bg-primary-100-900 flex h-14 w-14 shrink-0 items-center justify-center rounded-full text-xl transition-colors"
+                        >
+                            <FileUp />
+                        </div>
+                    {/if}
+                </div>
+            {/if}
+            <input
+                type={formAttributes.type}
+                aria-invalid={formAttributes['aria-invalid']}
+                name={formAttributes.name}
+                oninput={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    add(e.currentTarget.files ? Array.from(e.currentTarget.files) : []);
+                }}
+                {multiple}
+                title=""
+                accept={accept?.join(', ')}
+                class="absolute top-0 left-0 h-full w-full grow cursor-pointer opacity-0"
+                {id}
+            />
+        </div>
+    {/snippet}
+</Input>
+
+{#snippet fileRender(file: File)}
+    <div class="bg-primary-200-800 flex w-fit items-center rounded-full py-2 pr-2 pl-4">
+        <p>{file.name}</p>
+        <button
+            type="button"
+            class="btn-icon hover:text-primary-500"
+            onclick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                remove(file);
+            }}
+        >
+            <X />
+        </button>
+    </div>
+{/snippet}