@ims360/svelte-ivory 0.4.21 → 0.5.1

package/dist/components/table/Table.svelte

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-    import { theme } from '../../theme.svelte';
     import { merge } from '../../utils/functions';
     import { ChevronRight } from '@lucide/svelte';
     import { getContext, setContext, untrack, type Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
+    import type { ClassValue, HTMLAttributes } from 'svelte/elements';
     import { SvelteSet } from 'svelte/reactivity';
     import ColumnComponent from './Column.svelte';
     import { ColumnController, type ColumnConfig } from './columnController.svelte';
@@ -22,8 +21,8 @@
         virtualized?: boolean;
         /** Renders the rows */
         children?: Snippet<[{ row: T; nestingLevel?: number; index: number }]>;
-        rowClass?: ClassValue;
-        headerClass?: ClassValue;
+        row?: HTMLAttributes<HTMLDivElement>;
+        header?: HTMLAttributes<HTMLDivElement>;
         search?: {
             term: string;
             matches: (row: T) => boolean;
@@ -67,8 +66,8 @@
         class: clazz,
         data,
         children: passedChildren,
-        rowClass = 'hover:bg-surface-950-50/10 transition-colors',
-        headerClass,
+        row,
+        header: headerProps,
         rowHeight = 64,
         onclick,
         href,
@@ -202,20 +201,17 @@
     bind:this={list}
     bind:b_scrollTop
     data={results.entries}
-    class={merge(
-        'flex flex-col overflow-hidden border-transparent',
-        theme.current.table?.class,
-        clazz
-    )}
-    rowClass={merge('pl-2 pr-4', theme.current.table?.row?.class, rowClass)}
+    class={merge('flex flex-col overflow-hidden border-transparent', clazz)}
+    {row}
     {rowHeight}
     {virtualized}
 >
     {#snippet header()}
         <div
+            {...headerProps}
             class={merge(
                 'flex w-fit min-w-full flex-row border-b border-inherit pr-4 pl-2',
-                headerClass
+                headerProps?.class
             )}
         >
             {#if results.someHaveChildren}

package/dist/components/table/Table.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type Snippet } from 'svelte';
-import type { ClassValue } from 'svelte/elements';
+import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 import { SvelteSet } from 'svelte/reactivity';
 import { ColumnController, type ColumnConfig } from './columnController.svelte';
 import { type TableRow } from './controller';
@@ -16,8 +16,8 @@ export interface TableProps<T extends TableRow<T>> {
         nestingLevel?: number;
         index: number;
     }]>;
-    rowClass?: ClassValue;
-    headerClass?: ClassValue;
+    row?: HTMLAttributes<HTMLDivElement>;
+    header?: HTMLAttributes<HTMLDivElement>;
     search?: {
         term: string;
         matches: (row: T) => boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Table.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Table.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Table.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/Table.svelte.ts"],"names":[],"mappings":"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"}

package/dist/components/table/VirtualList.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="T extends { id: string }">
     import { merge } from '../../utils/functions';
     import { onMount, tick, untrack, type Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
+    import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 
     type Props<T> = {
         class?: ClassValue;
@@ -11,7 +11,7 @@
         b_scrollTop?: number;
         rowHeight: number;
         overscan?: number;
-        rowClass?: ClassValue;
+        row?: HTMLAttributes<HTMLDivElement>;
         virtualized?: boolean;
     };
 
@@ -23,12 +23,12 @@
         b_scrollTop = $bindable(),
         rowHeight,
         overscan = 2,
-        rowClass,
+        row: rowProps,
         virtualized = true
     }: Props<T> = $props();
 
     const finalRowClass = $derived(
-        merge('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', rowProps?.class)
     );
 
     let viewportReactivity = $state(0);
@@ -131,7 +131,11 @@
                 style="padding-top: {top}px; padding-bottom: {bottom}px; min-width: max(100%, {header_width}px) !important;"
             >
                 {#each visible as row, i (row.data.id)}
-                    <div class={finalRowClass} style="height: {rowHeight}px !important;">
+                    <div
+                        {...rowProps}
+                        class={finalRowClass}
+                        style="height: {rowHeight}px !important; {rowProps?.style}"
+                    >
                         {@render children({
                             row: row.data,
                             domIndex: i,

package/dist/components/table/VirtualList.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type Snippet } from 'svelte';
-import type { ClassValue } from 'svelte/elements';
+import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 type Props<T> = {
     class?: ClassValue;
     data: T[];
@@ -12,7 +12,7 @@ type Props<T> = {
     b_scrollTop?: number;
     rowHeight: number;
     overscan?: number;
-    rowClass?: ClassValue;
+    row?: HTMLAttributes<HTMLDivElement>;
     virtualized?: boolean;
 };
 declare function $$render<T extends {

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

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/VirtualList.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG9C,KAAK,KAAK,CAAC,CAAC,IAAI;IACZ,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,CAAC,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAAC,iBAAS,QAAQ,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE;WA6HpB,KAAK,CAAC,CAAC,CAAC;aAAwB;QAAE,QAAQ,SA/F1C,MAAM,SAAS,MAAM,UA+FsC;KAAE;;;;EAA0E;AACpK,cAAM,iBAAiB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE;IAC5C,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;yBArGkB,MAAM,SAAS,MAAM;;CAsGjD;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACnZ,CAAC,CAAC,SAAS;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAClJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,WAAW,EAAE,qBAAmC,CAAC;AACrC,KAAK,WAAW,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACnF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"VirtualList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/VirtualList.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC9D,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAG9D,KAAK,KAAK,CAAC,CAAC,IAAI;IACZ,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,GAAG,EAAE,CAAC,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAAC,iBAAS,QAAQ,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE;WA6HpB,KAAK,CAAC,CAAC,CAAC;aAAwB;QAAE,QAAQ,SA/F1C,MAAM,SAAS,MAAM,UA+FsC;KAAE;;;;EAA0E;AACpK,cAAM,iBAAiB,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE;IAC5C,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;yBArGkB,MAAM,SAAS,MAAM;;CAsGjD;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACnZ,CAAC,CAAC,SAAS;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAClJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,WAAW,EAAE,qBAAmC,CAAC;AACrC,KAAK,WAAW,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AACnF,eAAe,WAAW,CAAC"}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { ColorTheme, type ColorThemePreference } from './colorTheme.svelte';
 export { theme, type Theme } from './theme.svelte';
+export { Toasts, type ToastSettings } from './toasts.svelte';
 export { type IvoryComponent } from './types';
 export type Variant = 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'surface';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,MAAM,OAAO,GACb,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,MAAM,MAAM,OAAO,GACb,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,CAAC"}

package/dist/index.js

@@ -1,4 +1,5 @@
 // Reexport your entry components here
 export { ColorTheme } from './colorTheme.svelte';
 export { theme } from './theme.svelte';
+export { Toasts } from './toasts.svelte';
 export {} from './types';

package/dist/theme.svelte.d.ts

@@ -1,45 +1,9 @@
 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;
-    };
     dialog?: {
         class?: ClassValue;
     };
-    tabs?: {
-        tab?: {
-            class?: (active: boolean) => ClassValue;
-        };
-    };
-    table?: {
-        class?: ClassValue;
-        column?: {
-            class?: ClassValue;
-        };
-        head?: {
-            class?: ClassValue;
-        };
-        row?: {
-            class?: ClassValue;
-        };
-    };
-    modal?: {
-        class?: ClassValue;
-        innerClass?: ClassValue;
-        dialog?: {
-            class?: ClassValue;
-        };
-    };
-    drawer?: {
-        class?: ClassValue;
-    };
-    popover?: {
-        class?: ClassValue;
-    };
     input?: {
         outerClass?: ClassValue;
         class?: (value: boolean, issues?: boolean) => ClassValue;

package/dist/theme.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.svelte.d.ts","sourceRoot":"","sources":["../src/lib/theme.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,KAAK;IAClB,QAAQ,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,KAAK,UAAU,CAAC;KAC9D,CAAC;IACF,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,MAAM,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,IAAI,CAAC,EAAE;QACH,GAAG,CAAC,EAAE;YACF,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,UAAU,CAAC;SAC3C,CAAC;KACL,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;QACF,IAAI,CAAC,EAAE;YACH,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;QACF,GAAG,CAAC,EAAE;YACF,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;IACF,MAAM,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;QACzD,KAAK,CAAC,EAAE;YACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;SAC5D,CAAC;QACF,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE;gBACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;gBAC3C,KAAK,CAAC,EAAE,UAAU,CAAC;aACtB,CAAC;YACF,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;CACL;AAkBD,eAAO,MAAM,KAAK;uBAZS,KAAK;aAGF,KAAK;CASD,CAAC"}
+{"version":3,"file":"theme.svelte.d.ts","sourceRoot":"","sources":["../src/lib/theme.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,KAAK;IAClB,MAAM,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,KAAK,CAAC,EAAE;QACJ,UAAU,CAAC,EAAE,UAAU,CAAC;QACxB,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;QACzD,KAAK,CAAC,EAAE;YACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,KAAK,UAAU,CAAC;SAC5D,CAAC;QACF,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE;gBACJ,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;gBAC3C,KAAK,CAAC,EAAE,UAAU,CAAC;aACtB,CAAC;YACF,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;CACL;AAkBD,eAAO,MAAM,KAAK;uBAZS,KAAK;aAGF,KAAK;CASD,CAAC"}

package/dist/{components/toast/toasts.svelte.d.ts → toasts.svelte.d.ts}

@@ -1,3 +1,4 @@
+import type { Variant } from './';
 import type { Icon } from '@lucide/svelte';
 export interface ToastSettings {
     message: string;
@@ -5,7 +6,7 @@ export interface ToastSettings {
     timeout?: number;
     hideDismiss?: boolean;
     icon?: typeof Icon;
-    variant: 'info' | 'success' | 'warning' | 'error';
+    variant: Variant;
 }
 interface Toast extends ToastSettings {
     id: string;

package/dist/toasts.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toasts.svelte.d.ts","sourceRoot":"","sources":["../src/lib/toasts.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,aAAa;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,IAAI,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,KAAM,SAAQ,aAAa;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;CAC7C;AASD,cAAM,UAAU;IACZ,MAAM,UAAuB;IAE7B,OAAO,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,SAA0B;IAW1D,KAAK,CAAC,EAAE,EAAE,MAAM;IAOhB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa;IAiBvC,MAAM,CAAC,EAAE,EAAE,MAAM;IAMjB,QAAQ,CAAC,EAAE,EAAE,MAAM;IAMnB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,YAAY;CAKvB;AAED,2EAA2E;AAC3E,eAAO,MAAM,MAAM,YAAmB,CAAC"}

package/dist/{components/toast/toasts.svelte.js → toasts.svelte.js}

@@ -1,9 +1,9 @@
-import { pseudoRandomId } from '../../utils/functions';
+import { pseudoRandomId } from './utils/functions';
 const TOAST_DEFAULTS = {
     message: 'Missing Toast Message',
     autohide: true,
     timeout: 3000,
-    variant: 'info'
+    variant: 'primary'
 };
 class ToastStore {
     toasts = $state([]);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ims360/svelte-ivory",
-    "version": "0.4.21",
+    "version": "0.5.1",
     "keywords": [
         "svelte"
     ],
@@ -34,10 +34,6 @@
             "types": "./dist/components/table/index.d.ts",
             "svelte": "./dist/components/table/index.js"
         },
-        "./components/toast": {
-            "types": "./dist/components/toast/index.d.ts",
-            "svelte": "./dist/components/toast/index.js"
-        },
         "./components/inputs": {
             "types": "./dist/components/inputs/index.d.ts",
             "svelte": "./dist/components/inputs/index.js"
@@ -75,7 +71,7 @@
         "test:unit": "vitest"
     },
     "dependencies": {
-        "@lucide/svelte": "^0.553.0",
+        "@lucide/svelte": "^1.8.0",
         "@tailwindcss/forms": "^0.5.11",
         "@tailwindcss/typography": "^0.5.19",
         "@tailwindcss/vite": "^4.2.1",
@@ -95,9 +91,9 @@
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/svelte": "^5.3.1",
         "@testing-library/user-event": "^14.6.1",
-        "@vitest/browser": "^4.0.18",
-        "@vitest/coverage-v8": "^4.0.18",
-        "@vitest/spy": "^4.0.18",
+        "@vitest/browser": "^4.1.4",
+        "@vitest/coverage-v8": "^4.1.4",
+        "@vitest/spy": "^4.1.4",
         "eslint": "^10.0.2",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-svelte": "^3.15.0",
@@ -110,13 +106,13 @@
         "svelte-check": "^4.4.4",
         "typescript": "^5.9.3",
         "typescript-eslint": "^8.56.1",
-        "vite": "^7.3.2",
-        "vitest": "^4.0.18",
+        "vite": "^7.0.0",
+        "vitest": "^4.1.4",
         "zod": "^4.3.6"
     },
     "peerDependencies": {
         "@skeletonlabs/skeleton": "^4.0.0",
-        "@sveltejs/kit": "^2.49.5",
-        "svelte": "^5.46.4"
+        "@sveltejs/kit": "^2.55.0",
+        "svelte": "^5.55.1"
     }
 }

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

@@ -1,9 +1,7 @@
 <script lang="ts" module>
-    import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent } from '$lib/types';
     import { merge } from '$lib/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/src/lib/components/buttons/CopyToClipboardButton.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>
+    import { Toasts } from '$lib';
     import type { IvoryComponent } from '$lib/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/src/lib/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/src/lib/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/src/lib/components/layout/dialog/Dialog.svelte

@@ -2,21 +2,13 @@
     import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent } from '$lib/types';
     import { merge } from '$lib/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/src/lib/components/layout/drawer/Drawer.svelte

@@ -1,20 +1,16 @@
 <script lang="ts" module>
+    import type { IvoryComponent } from '$lib/types';
     import { merge } from '$lib/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/src/lib/components/layout/index.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 Drawer, type DrawerPlacement, type DrawerProps } from './drawer/Drawer.svelte';
 export { default as Modal, type ModalProps } from './modal/Modal.svelte';
 export {
     default as Popover,