@ims360/svelte-ivory 0.4.21 → 0.5.0

package/dist/components/basic/checkbox/Checkbox.svelte

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-    import { theme } from '../../../theme.svelte';
     import type { IvoryComponent } from '../../../types';
     import { merge } from '../../../utils/functions';
     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';
 
@@ -41,19 +39,16 @@
         innerClass,
         style
     }: { icon?: typeof LucideIcon; innerClass?: string; style?: string } = $derived.by(() => {
-        const overwrittenClass =
-            theme.current.checkbox?.class &&
-            clsx(theme.current.checkbox?.class?.(!!checked, !!partial));
-        if (!checked && !partial) return { innerClass: overwrittenClass ?? 'border-surface-500' };
+        if (!checked && !partial) return { innerClass: 'border-surface-500' };
         if (checked)
             return {
                 icon: Check,
-                innerClass: overwrittenClass ?? 'bg-primary-500 border-primary-500 text-surface-50'
+                innerClass: 'bg-primary-500 border-primary-500 text-surface-50'
             };
         if (partial)
             return {
                 icon: Minus,
-                innerClass: overwrittenClass ?? 'border-primary-700 text-primary-500'
+                innerClass: 'border-primary-700 text-primary-500'
             };
         return {};
     });

package/dist/components/basic/checkbox/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAIjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAuDN,sBAAsB;AACtB,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAoDN,sBAAsB;AACtB,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/buttons/CopyToClipboardButton.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>
+    import { Toasts } from '../..';
     import type { IvoryComponent } from '../../types';
     import { Copy } from '@lucide/svelte';
     import type { ClassValue } from 'svelte/elements';
-    import { Toasts } from '../toast';
 
     export interface CopyToClipboardButtonProps extends IvoryComponent<HTMLButtonElement> {
         text: string;

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

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboardButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttons/CopyToClipboardButton.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,0BAA2B,SAAQ,cAAc,CAAC,iBAAiB,CAAC;IACjF,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAyBL,QAAA,MAAM,qBAAqB,gEAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"CopyToClipboardButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttons/CopyToClipboardButton.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,0BAA2B,SAAQ,cAAc,CAAC,iBAAiB,CAAC;IACjF,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAyBL,QAAA,MAAM,qBAAqB,gEAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/components/inputs/FileInput.svelte

@@ -27,7 +27,10 @@
     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 || [])]);
+            rest.form.set([
+                ...value.filter((f) => f && !files.includes(f)),
+                ...Array.from(files || [])
+            ]);
         } else {
             rest.form.set((files[0] ?? undefined) as File);
         }
@@ -81,7 +84,7 @@
                 <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)}
+                            {#each files.filter((f) => !!f) as file (file)}
                                 {@render fileRender(file)}
                             {/each}
                         </div>

package/dist/components/inputs/FileInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/FileInput.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,MAAM,WAAW,cAAe,SAAQ,UAAU,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAwGL,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"FileInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/FileInput.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,MAAM,WAAW,cAAe,SAAQ,UAAU,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC;IAC7D,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AA2GL,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/inputs/PasswordCreateInput.svelte

@@ -20,7 +20,7 @@
     let popover = $state<Popover>();
     let target = $state<HTMLElement>();
 
-    const value = $derived(props.form.value());
+    const value = $derived(props.form.value() ?? '');
 </script>
 
 <div bind:this={target} class={['bg-inherit ', clazz]}>

package/dist/components/layout/dialog/Dialog.svelte

@@ -2,21 +2,13 @@
     import { theme } from '../../../theme.svelte';
     import type { IvoryComponent } from '../../../types';
     import { merge } from '../../../utils/functions';
-    import type { MouseEventHandler } from 'svelte/elements';
+    import type { EventHandler, MouseEventHandler } from 'svelte/elements';
 
-    export interface DialogProps extends IvoryComponent<HTMLElement> {
-        /** Gets called when the dialog requests to close (Escape, backdrop click) */
-        onclose?: () => void;
-    }
+    export type DialogProps = IvoryComponent<HTMLDialogElement>;
 </script>
 
 <script lang="ts">
-    let {
-        class: clazz,
-        onclose: onclose, // This is the prop from the parent
-        children,
-        ...rest
-    }: DialogProps = $props();
+    let { children, ...props }: DialogProps = $props();
 
     let dialog = $state<HTMLDialogElement>();
 
@@ -34,28 +26,35 @@
         currentlyOpen = false;
     };
 
-    const handleBackdropClick: MouseEventHandler<HTMLElement> = (event) => {
+    const onclick: MouseEventHandler<HTMLDialogElement> = (event) => {
         if (event.target !== dialog) return;
-        onclose?.();
+        if (props.onclick) props.onclick(event);
+        else close();
+    };
+
+    const onclose: EventHandler<Event, HTMLDialogElement> = (event) => {
+        props.onclose?.(event);
+        currentlyOpen = false;
     };
 
-    const handleClose = () => {
-        onclose?.();
+    const oncancel: EventHandler<Event, HTMLDialogElement> = (event) => {
+        if (props.oncancel) props.oncancel(event);
+        else props.onclose?.(event);
         currentlyOpen = false;
     };
 </script>
 
 <dialog
     bind:this={dialog}
-    onclick={handleBackdropClick}
-    oncancel={handleClose}
-    onclose={handleClose}
+    {...props}
+    {oncancel}
+    {onclose}
+    {onclick}
     class={merge(
         'backdrop:bg-surface-800-200/30 h-full max-h-none w-screen max-w-full overflow-hidden bg-transparent',
         theme.current.dialog?.class,
-        clazz
+        props.class
     )}
-    {...rest}
 >
     {@render children?.()}
 </dialog>

package/dist/components/layout/dialog/Dialog.svelte.d.ts

@@ -1,8 +1,5 @@
 import type { IvoryComponent } from '../../../types';
-export interface DialogProps extends IvoryComponent<HTMLElement> {
-    /** Gets called when the dialog requests to close (Escape, backdrop click) */
-    onclose?: () => void;
-}
+export type DialogProps = IvoryComponent<HTMLDialogElement>;
 declare const Dialog: import("svelte").Component<DialogProps, {
     open: () => void;
     isOpen: () => boolean;

package/dist/components/layout/dialog/Dialog.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAIjD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAmDL,QAAA,MAAM,MAAM;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/dialog/Dialog.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAIjD,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAqDhE,QAAA,MAAM,MAAM;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/layout/drawer/Drawer.svelte

@@ -1,20 +1,16 @@
 <script lang="ts" module>
+    import type { IvoryComponent } from '../../../types';
     import { merge } from '../../../utils/functions';
-    import { X } from '@lucide/svelte';
     import type { Snippet } from 'svelte';
-    import Heading from '../Heading.svelte';
-    import { Dialog } from '../dialog';
+    import type { MouseEventHandler } from 'svelte/elements';
+    import { Dialog, type DialogProps } from '../dialog';
 
     export type DrawerPlacement = 'left' | 'right';
-
-    export type DrawerProps = {
+    export type DrawerProps = IvoryComponent<HTMLDivElement> & {
         class?: string;
-        title?: string | Snippet;
         children?: Snippet;
         placement?: DrawerPlacement;
-        closeOnOutsideClick?: boolean;
-        /** Overwrites entire content of the drawer */
-        inner?: Snippet;
+        dialog?: DialogProps;
     };
 </script>
 
@@ -22,33 +18,35 @@
     let {
         class: clazz,
         children,
-        title,
         placement = 'right',
-        closeOnOutsideClick = true,
-        inner,
-        ...rest
+        dialog: dialogProps,
+        ...props
     }: DrawerProps = $props();
 
     let dialog = $state<Dialog>();
 
     export const close = () => dialog?.close();
-
     export const open = () => dialog?.open();
-
     export const isOpen = () => dialog?.isOpen();
-
     export const toggle = () => {
         if (isOpen()) close();
         else open();
     };
+
+    const onclick: MouseEventHandler<HTMLDivElement> = (e) => {
+        e.stopPropagation();
+        props.onclick?.(e);
+    };
 </script>
 
 <Dialog
     bind:this={dialog}
-    onclose={() => {
-        if (closeOnOutsideClick) close();
-    }}
-    class={['flex flex-row justify-start overflow-visible', placement === 'right' && 'justify-end']}
+    {...dialogProps}
+    class={merge(
+        'flex flex-row justify-start overflow-visible',
+        placement === 'right' && 'justify-end',
+        dialogProps?.class
+    )}
 >
     <div
         data-placement={placement}
@@ -56,28 +54,10 @@
             'drawer bg-surface-50-950 flex h-full flex-col gap-4 p-4 transition-transform ease-in-out',
             clazz
         )}
-        onclick={(e) => e.stopPropagation()}
-        {...rest}
+        {...props}
+        {onclick}
     >
-        {#if inner}
-            {@render inner()}
-        {:else}
-            <div class="flex flex-row items-center justify-between gap-8">
-                {#if title}
-                    <Heading class="flex grow flex-row items-center gap-4">
-                        {#if typeof title === 'function'}
-                            {@render title()}
-                        {:else}
-                            {title}
-                        {/if}
-                    </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>
-            {@render children?.()}
-        {/if}
+        {@render children?.()}
     </div>
 </Dialog>
 

package/dist/components/layout/drawer/Drawer.svelte.d.ts

@@ -1,13 +1,12 @@
+import type { IvoryComponent } from '../../../types';
 import type { Snippet } from 'svelte';
+import { type DialogProps } from '../dialog';
 export type DrawerPlacement = 'left' | 'right';
-export type DrawerProps = {
+export type DrawerProps = IvoryComponent<HTMLDivElement> & {
     class?: string;
-    title?: string | Snippet;
     children?: Snippet;
     placement?: DrawerPlacement;
-    closeOnOutsideClick?: boolean;
-    /** Overwrites entire content of the drawer */
-    inner?: Snippet;
+    dialog?: DialogProps;
 };
 declare const Drawer: import("svelte").Component<DrawerProps, {
     close: () => void | undefined;

package/dist/components/layout/drawer/Drawer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA8DN,QAAA,MAAM,MAAM;;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAErD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAC/C,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,MAAM,CAAC,EAAE,WAAW,CAAC;CACxB,CAAC;AA8CN,QAAA,MAAM,MAAM;;;;;MAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

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

@@ -1,6 +1,5 @@
 export { Dialog, type DialogProps } from './dialog';
 export { default as Drawer } from './drawer/Drawer.svelte';
-export { default as Heading } from './Heading.svelte';
 export { default as Modal, type ModalProps } from './modal/Modal.svelte';
 export { default as Popover, type PopoverPlacement, type PopoverProps } from './popover/Popover.svelte';
 export { getTabContext, Tab, TabPanel, Tabs, type TabPanelProps, type TabProps, type TabsProps } from './tabs';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EACH,OAAO,IAAI,OAAO,EAClB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACH,aAAa,EACb,GAAG,EACH,QAAQ,EACR,IAAI,EACJ,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,SAAS,EACjB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EACH,OAAO,IAAI,OAAO,EAClB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACH,aAAa,EACb,GAAG,EACH,QAAQ,EACR,IAAI,EACJ,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,SAAS,EACjB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/layout/index.js

@@ -1,6 +1,5 @@
 export { Dialog } from './dialog';
 export { default as Drawer } from './drawer/Drawer.svelte';
-export { default as Heading } from './Heading.svelte';
 export { default as Modal } from './modal/Modal.svelte';
 export { default as Popover } from './popover/Popover.svelte';
 export { getTabContext, Tab, TabPanel, Tabs } from './tabs';

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

@@ -1,30 +1,17 @@
 <script lang="ts" module>
-    import type { Variant } from '../../..';
-    import { theme } from '../../../theme.svelte';
+    import type { IvoryComponent } from '../../../types';
     import { merge } from '../../../utils/functions';
-    import { X } from '@lucide/svelte';
     import { type Snippet } from 'svelte';
     import type { ClassValue, MouseEventHandler } from 'svelte/elements';
-    import { Heading } from '..';
-    import { Dialog } from '../dialog';
+    import { Dialog, type DialogProps } from '../dialog';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
-    export type ModalProps = {
+    export type ModalProps = IvoryComponent<HTMLDivElement> & {
         /** Class of the modal itself, does not apply to the inner div */
         class?: ClassValue;
-        /** Class of the div wrapping the children */
-        innerClass?: ClassValue;
+        dialog?: DialogProps;
         /** Content of the modal */
         children?: Snippet;
-        /**
-         * If `true` the modal will not close when clicking outside of it
-         *
-         * Defaults to `true`
-         * */
-        closeOnOutsideClick?: boolean;
-        /** Variant of the modal, applies styling to the header */
-        variant?: Variant;
-        title?: string | Snippet;
         onclick?: MouseEventHandler<HTMLDivElement>;
     };
 </script>
@@ -35,16 +22,7 @@
         inner?: Snippet;
     }
 
-    let {
-        class: clazz = 'flex flex-col',
-        title,
-        children,
-        inner,
-        closeOnOutsideClick = true,
-        variant,
-        innerClass,
-        ...rest
-    }: Props = $props();
+    let { children, dialog: dialogProps = {}, ...props }: Props = $props();
 
     let dialog = $state<Dialog>();
 
@@ -59,72 +37,29 @@
 
     const onclick: MouseEventHandler<HTMLDivElement> = (e) => {
         e.stopPropagation();
-        rest.onclick?.(e);
+        props.onclick?.(e);
     };
 </script>
 
 <!-- 
 	@component
-	A modal, comes with a title, close button and different variants per default.
+	A modal inside a dialog element
 -->
 <Dialog
     bind:this={dialog}
-    onclose={() => {
-        if (closeOnOutsideClick) close();
-    }}
-    class="flex h-full w-full flex-col items-center justify-center p-2 sm:p-4 md:p-8 lg:p-12 xl:p-16"
+    {...dialogProps}
+    class={merge(
+        'flex h-full w-full flex-col items-center justify-center p-2 sm:p-4 md:p-8 lg:p-12 xl:p-16',
+        dialogProps?.class
+    )}
 >
-    {#if inner}
-        <div {...rest} {onclick} class={merge('modal-content transition-all ease-in-out', clazz)}>
-            {@render inner()}
-        </div>
-    {:else}
-        <div
-            class={merge(
-                'modal-content bg-surface-50-950 flex max-h-full max-w-full flex-col overflow-hidden rounded transition-all ease-in-out',
-                theme.current.modal?.class,
-                clazz
-            )}
-            {...rest}
-            {onclick}
-        >
-            <div
-                class={[
-                    'flex flex-row items-center justify-between gap-4 px-4 py-3',
-                    !variant && 'pb-0',
-                    variant === 'primary' && 'preset-tonal-primary',
-                    variant === 'secondary' && 'preset-tonal-secondary',
-                    variant === 'tertiary' && 'preset-tonal-tertiary',
-                    variant === 'success' && 'preset-tonal-success',
-                    variant === 'warning' && 'preset-tonal-warning',
-                    variant === 'error' && 'preset-tonal-error',
-                    variant === 'surface' && 'preset-tonal-surface'
-                ]}
-            >
-                {#if title}
-                    <Heading class="flex grow flex-row items-center gap-4">
-                        {#if typeof title === 'function'}
-                            {@render title()}
-                        {:else}
-                            {title}
-                        {/if}
-                    </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={merge(
-                    'flex grow flex-col gap-4 overflow-hidden bg-inherit p-4 pt-3',
-                    theme.current.modal?.innerClass,
-                    innerClass
-                )}
-            >
-                {@render children?.()}
-            </div>
-        </div>
-    {/if}
+    <div
+        {...props}
+        {onclick}
+        class={merge('modal-content transition-all ease-in-out', props.class)}
+    >
+        {@render children?.()}
+    </div>
 </Dialog>
 
 <style>

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

@@ -1,30 +1,21 @@
-import type { Variant } from '../../..';
+import type { IvoryComponent } from '../../../types';
 import { type Snippet } from 'svelte';
 import type { ClassValue, MouseEventHandler } from 'svelte/elements';
+import { type DialogProps } from '../dialog';
 /** Props for the modal, expose if you overwrite the defaults in a custom component */
-export type ModalProps = {
+export type ModalProps = IvoryComponent<HTMLDivElement> & {
     /** Class of the modal itself, does not apply to the inner div */
     class?: ClassValue;
-    /** Class of the div wrapping the children */
-    innerClass?: ClassValue;
+    dialog?: DialogProps;
     /** Content of the modal */
     children?: Snippet;
-    /**
-     * If `true` the modal will not close when clicking outside of it
-     *
-     * Defaults to `true`
-     * */
-    closeOnOutsideClick?: boolean;
-    /** Variant of the modal, applies styling to the header */
-    variant?: Variant;
-    title?: string | Snippet;
     onclick?: MouseEventHandler<HTMLDivElement>;
 };
 interface Props extends ModalProps {
     /** If you don't want the title and close button to be included you can overwrite the default modal */
     inner?: Snippet;
 }
-/** A modal, comes with a title, close button and different variants per default. */
+/** A modal inside a dialog element */
 declare const Modal: import("svelte").Component<Props, {
     close: () => void | undefined;
     open: () => void | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAIpC,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAIrE,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG;IACrB,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;SAIK;IACL,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAuFL,oFAAoF;AACpF,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/Modal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AAErD,sFAAsF;AACtF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACtD,iEAAiE;IACjE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,UAAU,KAAM,SAAQ,UAAU;IAC9B,sGAAsG;IACtG,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAuCL,sCAAsC;AACtC,QAAA,MAAM,KAAK;;;;;MAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

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

@@ -1,5 +1,4 @@
 <script lang="ts" module>
-    import { theme } from '../../../theme.svelte';
     import type { IvoryComponent } from '../../../types';
     import { merge, pseudoRandomId } from '../../../utils/functions';
 
@@ -173,7 +172,7 @@
     bind:this={popoverEl}
     style="{style} {externalStyle}"
     {popover}
-    class={merge('bg-transparent not-open:hidden!', theme.current.popover?.class, clazz)}
+    class={merge('bg-transparent not-open:hidden!', clazz)}
     {...rest}
 >
     {@render children?.()}

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GACtB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAC;AAEjB,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,6DAA6D;IAC7D,MAAM,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAiJL,QAAA,MAAM,OAAO;;;;;MAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GACtB,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAC;AAEjB,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,6DAA6D;IAC7D,MAAM,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AAiJL,QAAA,MAAM,OAAO;;;;;MAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

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

@@ -1,6 +1,5 @@
 <script lang="ts" module>
     import { page } from '$app/state';
-    import { theme } from '../../../theme.svelte';
     import type { IvoryComponent } from '../../../types';
     import { merge, pseudoRandomId } from '../../../utils/functions';
     import { onMount, type Snippet } from 'svelte';
@@ -52,7 +51,6 @@
     this={href ? 'a' : 'button'}
     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

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/Tab.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC3E,KAAK,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,QAAQ,EAAE,OAAO,KAAK,UAAU,CAAC,CAAC;IACzD,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IAC3C,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AA8CL,QAAA,MAAM,GAAG,8CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/Tab.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC3E,KAAK,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,QAAQ,EAAE,OAAO,KAAK,UAAU,CAAC,CAAC;IACzD,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IAC3C,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AA6CL,QAAA,MAAM,GAAG,8CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

package/dist/components/table/Column.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" module>
-    import { theme } from '../../theme.svelte';
     import { merge } from '../../utils/functions';
     import { type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
@@ -76,7 +75,6 @@
     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
     )}
 />

package/dist/components/table/Column.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Column.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Column.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAI9D,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AA6DL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Column.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Column.svelte.ts"],"names":[],"mappings":"AAII,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAI9D,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC7C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2EAA2E;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AA4DL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/table/ColumnHead.svelte

@@ -1,5 +1,4 @@
 <script lang="ts" module>
-    import { theme } from '../../theme.svelte';
     import { merge } from '../../utils/functions';
     import { getContext, setContext, type Snippet } from 'svelte';
     import { resize } from '../../utils/attachments';
@@ -48,7 +47,7 @@
 </script>
 
 <div
-    class={merge('group flex shrink-0 flex-row justify-start', theme.current.table?.head?.class)}
+    class={merge('group flex shrink-0 flex-row justify-start')}
     bind:this={target}
     style="width: {column?.width ?? 0}px;"
 >

package/dist/components/table/ColumnHead.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHead.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/ColumnHead.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAOlE,wBAAgB,oBAAoB,IAAI,gBAAgB,CAEvD;AAED,KAAK,KAAK,GAAG;IACT,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AA6CN,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ColumnHead.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/ColumnHead.svelte.ts"],"names":[],"mappings":"AAII,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAOlE,wBAAgB,oBAAoB,IAAI,gBAAgB,CAEvD;AAED,KAAK,KAAK,GAAG;IACT,MAAM,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AA6CN,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}