@ims360/svelte-ivory 0.0.60 → 0.1.1

package/README.md

@@ -9,7 +9,7 @@ Eventually we will add more documentation and examples to make it easier for dev
 Include this line in your `app.css` file, so the TW classes used in the lib are included:
 
 ```css
-@source "../node_modules/@ims360/svelte-ivory";
+@source '../node_modules/@ims360/svelte-ivory';
 ```
 
 _You may need to adjust the path if your `app.css` is not located in `/src`_

package/dist/components/layout/Heading.svelte

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

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

@@ -0,0 +1,9 @@
+import type { IvoryComponent } from '../../types';
+import type { ClassValue } from 'svelte/elements';
+export interface HeadingProps extends IvoryComponent<HTMLHeadingElement> {
+    class?: ClassValue;
+}
+declare const Heading: import("svelte").Component<HeadingProps, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;
+//# sourceMappingURL=Heading.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/layout/Heading.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,kBAAkB,CAAC;IACpE,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB;AAgBL,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,79 @@
+<script lang="ts" module>
+    import { theme } from '../../../theme.svelte';
+    import type { IvoryComponent, TransitionProps } from '../../../types';
+    import clsx from 'clsx';
+    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) */
+        onclose?: () => void;
+    }
+</script>
+
+<script lang="ts">
+    let {
+        class: clazz,
+        onclose: close, // This is the prop from the parent
+        children,
+        inTransition = (e) => fade(e, { duration: 200 }),
+        outTransition = (e) => fade(e, { duration: 200 }),
+        ...rest
+    }: DialogProps = $props();
+
+    let dialog = $state<HTMLDialogElement>();
+
+    /**
+     * This function "requests" a close.
+     * It tries to stop the native close and lets the parent decide.
+     */
+    async function requestClose(event: Event) {
+        event.preventDefault(); // Stop the native close
+        event.stopPropagation();
+        close?.(); // Ask the parent to close
+        await tick();
+        await tick();
+
+        console.log(dialog);
+
+        dialog?.showModal();
+    }
+
+    onMount(() => {
+        if (dialog && !dialog.open) {
+            dialog.showModal();
+        }
+        return () => {
+            if (dialog && dialog.open) {
+                dialog.close();
+            }
+        };
+    });
+
+    const handleBackdropClick: MouseEventHandler<HTMLElement> = (event) => {
+        if (event.target === dialog) {
+            requestClose(event);
+        }
+    };
+</script>
+
+<dialog
+    bind:this={dialog}
+    onclick={handleBackdropClick}
+    oncancel={requestClose}
+    onclose={close}
+    class={twMerge(
+        clsx(
+            'h-full max-h-none w-screen max-w-full bg-transparent backdrop:bg-black/20',
+            theme.current.hiddenBackground?.class,
+            clazz
+        )
+    )}
+    in:inTransition
+    out:outTransition
+    {...rest}
+>
+    {@render children?.()}
+</dialog>

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

@@ -0,0 +1,9 @@
+import type { IvoryComponent, TransitionProps } from '../../../types';
+export interface DialogProps extends IvoryComponent<HTMLElement>, TransitionProps {
+    /** Gets called when the dialog requests to close (Escape, backdrop click) */
+    onclose?: () => void;
+}
+declare const Dialog: import("svelte").Component<DialogProps, {}, "">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;
+//# sourceMappingURL=Dialog.svelte.d.ts.map

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

@@ -0,0 +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,eAAe,EAAE,MAAM,YAAY,CAAC;AAOlE,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC,EAAE,eAAe;IAC7E,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AA8DL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,2 @@
+export { default as Dialog, type DialogProps } from './Dialog.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1 @@
+export { default as Dialog } from './Dialog.svelte';

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

@@ -5,9 +5,8 @@
     import type { Snippet } from 'svelte';
     import { fly } from 'svelte/transition';
     import { twMerge } from 'tailwind-merge';
-    import { Portal } from '..';
-    import Heading from '../heading';
-    import HiddenBackground from '../hiddenBackground';
+    import { HiddenBackground, Portal } from '..';
+    import Heading from '../Heading.svelte';
 
     export type DrawerPlacement = 'left' | 'right';
 

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":"AAGI,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAuEN,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,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC,CAAC;AAuEN,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,9 +1,9 @@
 export { default as Drawer } from './drawer/Drawer.svelte';
-export { default as Heading } from './heading';
-export { default as HiddenBackground, type HiddenBackgroundProps } from './hiddenBackground';
+export { default as Heading } from './Heading.svelte';
+export { default as HiddenBackground, type HiddenBackgroundProps } 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, default as Tabs, type TabPanelProps, type TabProps, type TabsProps } from './tabs';
+export { getTabContext, Tab, TabPanel, Tabs, type TabPanelProps, type TabProps, type TabsProps } from './tabs';
 export { default as Tooltip, type TooltipProps } from './tooltip/Tooltip.svelte';
 //# sourceMappingURL=index.d.ts.map

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,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC7F,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC5F,OAAO,EACH,OAAO,IAAI,OAAO,EAClB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EACH,aAAa,EACb,OAAO,IAAI,IAAI,EACf,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,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EACH,OAAO,IAAI,gBAAgB,EAC3B,KAAK,qBAAqB,EAC7B,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC5F,OAAO,EACH,OAAO,IAAI,OAAO,EAClB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACpB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,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,8 +1,8 @@
 export { default as Drawer } from './drawer/Drawer.svelte';
-export { default as Heading } from './heading';
-export { default as HiddenBackground } from './hiddenBackground';
+export { default as Heading } from './Heading.svelte';
+export { default as HiddenBackground } from './hiddenBackground/HiddenBackground.svelte';
 export { default as Modal } from './modal/Modal.svelte';
 export { default as Popover } from './popover/Popover.svelte';
 export { default as Portal } from './portal';
-export { getTabContext, default as Tabs } from './tabs';
+export { getTabContext, Tab, TabPanel, Tabs } from './tabs';
 export { default as Tooltip } from './tooltip/Tooltip.svelte';

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

@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { page } from '$app/state';
+    import { theme } from '../../../theme.svelte';
     import type { IvoryComponent } from '../../../types';
     import { pseudoRandomId } from '../../../utils/functions/index';
     import clsx from 'clsx';
@@ -8,14 +9,6 @@
     import { twMerge } from 'tailwind-merge';
     import { getTabContext } from './Tabs.svelte';
 
-    let defaultClass = $state(
-        (selected: boolean): ClassValue => [selected ? 'text-primary-500' : '']
-    );
-
-    export function setDefaultClass(clazz: (selected: boolean) => ClassValue) {
-        defaultClass = clazz;
-    }
-
     export interface TabProps extends Omit<IvoryComponent<HTMLElement>, 'children'> {
         class?: ClassValue | ((selected: boolean) => ClassValue);
         id?: string | undefined;
@@ -32,7 +25,7 @@
 </script>
 
 <script lang="ts">
-    let { class: clazz = defaultClass, id, href, children, active }: TabProps = $props();
+    let { class: clazz, id, href, children, active }: TabProps = $props();
 
     const tab = pseudoRandomId('tab-');
     const tabs = getTabContext();
@@ -62,6 +55,7 @@
     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
         )
     )}

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

@@ -1,7 +1,6 @@
 import type { IvoryComponent } from '../../../types';
 import { type Snippet } from 'svelte';
 import type { ClassValue } from 'svelte/elements';
-export declare function setDefaultClass(clazz: (selected: boolean) => ClassValue): void;
 export interface TabProps extends Omit<IvoryComponent<HTMLElement>, 'children'> {
     class?: ClassValue | ((selected: boolean) => ClassValue);
     id?: string | undefined;

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":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAQlD,wBAAgB,eAAe,CAAC,KAAK,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,UAAU,QAEvE;AAED,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;AA+CL,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":"AAKI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,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;AAgDL,QAAA,MAAM,GAAG,8CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

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

@@ -1,15 +1,4 @@
-import { setDefaultClass } from './Tab.svelte';
-declare const Tabs: import("svelte").Component<import("./Tabs.svelte").TabsProps, {
-    forward: () => void;
-    back: () => void;
-    currentTab: () => number;
-}, ""> & {
-    Tab: import("svelte").Component<import("./Tab.svelte").TabProps, {}, "">;
-    Panel: import("svelte").Component<import("./TabPanel.svelte").TabPanelProps, {}, "">;
-    setDefaultTabClass: typeof setDefaultClass;
-};
-export default Tabs;
-export { type TabProps } from './Tab.svelte';
-export { type TabPanelProps } from './TabPanel.svelte';
-export { getTabContext, type TabContext, type TabsProps } from './Tabs.svelte';
+export { default as Tab, type TabProps } from './Tab.svelte';
+export { default as TabPanel, type TabPanelProps } from './TabPanel.svelte';
+export { getTabContext, default as Tabs, type TabContext, type TabsProps } from './Tabs.svelte';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,QAAA,MAAM,IAAI;;;;;;;;CAIR,CAAC;AAEH,eAAe,IAAI,CAAC;AACpB,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,OAAO,IAAI,IAAI,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC"}

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

@@ -1,12 +1,3 @@
-import Tab, { setDefaultClass } from './Tab.svelte';
-import TabPanel from './TabPanel.svelte';
-import { default as TabsComponent } from './Tabs.svelte';
-const Tabs = Object.assign(TabsComponent, {
-    Tab: Tab,
-    Panel: TabPanel,
-    setDefaultTabClass: setDefaultClass
-});
-export default Tabs;
-export {} from './Tab.svelte';
-export {} from './TabPanel.svelte';
-export { getTabContext } from './Tabs.svelte';
+export { default as Tab } from './Tab.svelte';
+export { default as TabPanel } from './TabPanel.svelte';
+export { getTabContext, default as Tabs } from './Tabs.svelte';

package/dist/components/table/Column.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" module>
+    import { theme } from '../../theme.svelte';
     import clsx from 'clsx';
     import { type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
@@ -7,12 +8,6 @@
     import { getRowContext } from './Row.svelte';
     import { getTableContext } from './Table.svelte';
 
-    let defaultClasses = $state<ClassValue>();
-
-    export function setClasses(c: ClassValue) {
-        defaultClasses = c;
-    }
-
     export interface ColumnProps extends ColumnConfig {
         class?: ClassValue;
         /** If the type is incorrect pass the "row" property with the right type */
@@ -75,8 +70,8 @@
     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',
-            defaultClasses,
+            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

@@ -1,7 +1,6 @@
 import { type Snippet } from 'svelte';
 import type { ClassValue } from 'svelte/elements';
 import type { ColumnConfig } from './columnController.svelte';
-export declare function setClasses(c: ClassValue): void;
 export interface ColumnProps extends ColumnConfig {
     class?: ClassValue;
     /** If the type is incorrect pass the "row" property with the right type */

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":"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;AAM9D,wBAAgB,UAAU,CAAC,CAAC,EAAE,UAAU,QAEvC;AAED,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,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AA2DL,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":"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,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B;AA2DL,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

@@ -48,7 +48,7 @@
 <div
     class={['group flex shrink-0 flex-row justify-start']}
     bind:this={target}
-    style="width: {column.width}px;"
+    style="width: {column?.width ?? 0}px;"
 >
     {@render children?.()}
     {#if column.resizable}

package/dist/components/table/Table.svelte

@@ -191,11 +191,11 @@
 
 <VirtualList
     bind:this={list}
+    bind:b_scrollTop
     data={results.entries}
     class={twMerge(clsx(['flex flex-col overflow-hidden border-transparent', clazz]))}
-    bind:b_scrollTop
-    {rowHeight}
     rowClass={['pl-2 pr-4', rowClass]}
+    {rowHeight}
 >
     {#snippet header()}
         <div
@@ -206,7 +206,7 @@
                 )
             )}
         >
-            {#if treeIndicatorColumn}
+            {#if treeIndicatorColumn instanceof ColumnController}
                 <ColumnHead column={treeIndicatorColumn}></ColumnHead>
             {/if}
             {#each externalColumns || columns as column (column.id)}

package/dist/components/table/columnController.svelte.js

@@ -24,7 +24,7 @@ export class ColumnController {
             this.minimalWidth = (conf.width ?? DEFAULT_WIDTH) * MINIMAL_WIDTH_MULTIPLIER;
         }
         if (this.width === undefined) {
-            const newWidth = conf.width ?? DEFAULT_WIDTH;
+            const newWidth = typeof conf.width === 'undefined' ? DEFAULT_WIDTH : conf.width;
             this.width = newWidth;
         }
         if (!this.header)

package/dist/index.d.ts

@@ -1,2 +1,3 @@
+export { theme, type Theme } from './theme.svelte';
 export { type IvoryComponent } from './types';
 //# 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,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,2 +1,3 @@
 // Reexport your entry components here
+export { theme } from './theme.svelte';
 export {} from './types';

package/dist/theme.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { ClassValue } from 'svelte/elements';
+export interface Theme {
+    heading?: {
+        class?: ClassValue;
+    };
+    hiddenBackground?: {
+        class?: ClassValue;
+    };
+    tabs?: {
+        tab?: {
+            class?: (active: boolean) => ClassValue;
+        };
+    };
+    table?: {
+        column?: {
+            class?: ClassValue;
+        };
+    };
+}
+export declare const theme: {
+    setTheme(newTheme: Theme): void;
+    current: Theme;
+};
+//# sourceMappingURL=theme.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.svelte.d.ts","sourceRoot":"","sources":["../src/lib/theme.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,KAAK;IAClB,OAAO,CAAC,EAAE;QACN,KAAK,CAAC,EAAE,UAAU,CAAC;KACtB,CAAC;IACF,gBAAgB,CAAC,EAAE;QACf,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,MAAM,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC;SACtB,CAAC;KACL,CAAC;CACL;AAkBD,eAAO,MAAM,KAAK;uBAZS,KAAK;aAGF,KAAK;CASD,CAAC"}

package/dist/theme.svelte.js

@@ -0,0 +1,15 @@
+function createTheme() {
+    let theme = $state({});
+    return {
+        setTheme(newTheme) {
+            theme = newTheme;
+        },
+        set current(newTheme) {
+            theme = newTheme;
+        },
+        get current() {
+            return theme;
+        }
+    };
+}
+export const theme = createTheme();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ims360/svelte-ivory",
-    "version": "0.0.60",
+    "version": "0.1.1",
     "keywords": [
         "svelte"
     ],

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

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

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

@@ -0,0 +1,79 @@
+<script lang="ts" module>
+    import { theme } from '$lib/theme.svelte';
+    import type { IvoryComponent, TransitionProps } from '$lib/types';
+    import clsx from 'clsx';
+    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) */
+        onclose?: () => void;
+    }
+</script>
+
+<script lang="ts">
+    let {
+        class: clazz,
+        onclose: close, // This is the prop from the parent
+        children,
+        inTransition = (e) => fade(e, { duration: 200 }),
+        outTransition = (e) => fade(e, { duration: 200 }),
+        ...rest
+    }: DialogProps = $props();
+
+    let dialog = $state<HTMLDialogElement>();
+
+    /**
+     * This function "requests" a close.
+     * It tries to stop the native close and lets the parent decide.
+     */
+    async function requestClose(event: Event) {
+        event.preventDefault(); // Stop the native close
+        event.stopPropagation();
+        close?.(); // Ask the parent to close
+        await tick();
+        await tick();
+
+        console.log(dialog);
+
+        dialog?.showModal();
+    }
+
+    onMount(() => {
+        if (dialog && !dialog.open) {
+            dialog.showModal();
+        }
+        return () => {
+            if (dialog && dialog.open) {
+                dialog.close();
+            }
+        };
+    });
+
+    const handleBackdropClick: MouseEventHandler<HTMLElement> = (event) => {
+        if (event.target === dialog) {
+            requestClose(event);
+        }
+    };
+</script>
+
+<dialog
+    bind:this={dialog}
+    onclick={handleBackdropClick}
+    oncancel={requestClose}
+    onclose={close}
+    class={twMerge(
+        clsx(
+            'h-full max-h-none w-screen max-w-full bg-transparent backdrop:bg-black/20',
+            theme.current.hiddenBackground?.class,
+            clazz
+        )
+    )}
+    in:inTransition
+    out:outTransition
+    {...rest}
+>
+    {@render children?.()}
+</dialog>

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

@@ -0,0 +1 @@
+export { default as Dialog, type DialogProps } from './Dialog.svelte';

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

@@ -5,9 +5,8 @@
     import type { Snippet } from 'svelte';
     import { fly } from 'svelte/transition';
     import { twMerge } from 'tailwind-merge';
-    import { Portal } from '..';
-    import Heading from '../heading';
-    import HiddenBackground from '../hiddenBackground';
+    import { HiddenBackground, Portal } from '..';
+    import Heading from '../Heading.svelte';
 
     export type DrawerPlacement = 'left' | 'right';
 

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

@@ -1,6 +1,9 @@
 export { default as Drawer } from './drawer/Drawer.svelte';
-export { default as Heading } from './heading';
-export { default as HiddenBackground, type HiddenBackgroundProps } from './hiddenBackground';
+export { default as Heading } from './Heading.svelte';
+export {
+    default as HiddenBackground,
+    type HiddenBackgroundProps
+} from './hiddenBackground/HiddenBackground.svelte';
 export { default as Modal, type ModalProps, type ModalVariant } from './modal/Modal.svelte';
 export {
     default as Popover,
@@ -10,7 +13,9 @@ export {
 export { default as Portal } from './portal';
 export {
     getTabContext,
-    default as Tabs,
+    Tab,
+    TabPanel,
+    Tabs,
     type TabPanelProps,
     type TabProps,
     type TabsProps

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

@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { page } from '$app/state';
+    import { theme } from '$lib/theme.svelte';
     import type { IvoryComponent } from '$lib/types';
     import { pseudoRandomId } from '$lib/utils/functions/index';
     import clsx from 'clsx';
@@ -8,14 +9,6 @@
     import { twMerge } from 'tailwind-merge';
     import { getTabContext } from './Tabs.svelte';
 
-    let defaultClass = $state(
-        (selected: boolean): ClassValue => [selected ? 'text-primary-500' : '']
-    );
-
-    export function setDefaultClass(clazz: (selected: boolean) => ClassValue) {
-        defaultClass = clazz;
-    }
-
     export interface TabProps extends Omit<IvoryComponent<HTMLElement>, 'children'> {
         class?: ClassValue | ((selected: boolean) => ClassValue);
         id?: string | undefined;
@@ -32,7 +25,7 @@
 </script>
 
 <script lang="ts">
-    let { class: clazz = defaultClass, id, href, children, active }: TabProps = $props();
+    let { class: clazz, id, href, children, active }: TabProps = $props();
 
     const tab = pseudoRandomId('tab-');
     const tabs = getTabContext();
@@ -62,6 +55,7 @@
     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
         )
     )}

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

@@ -1,14 +1,3 @@
-import Tab, { setDefaultClass } from './Tab.svelte';
-import TabPanel from './TabPanel.svelte';
-import { default as TabsComponent } from './Tabs.svelte';
-
-const Tabs = Object.assign(TabsComponent, {
-    Tab: Tab,
-    Panel: TabPanel,
-    setDefaultTabClass: setDefaultClass
-});
-
-export default Tabs;
-export { type TabProps } from './Tab.svelte';
-export { type TabPanelProps } from './TabPanel.svelte';
-export { getTabContext, type TabContext, type TabsProps } from './Tabs.svelte';
+export { default as Tab, type TabProps } from './Tab.svelte';
+export { default as TabPanel, type TabPanelProps } from './TabPanel.svelte';
+export { getTabContext, default as Tabs, type TabContext, type TabsProps } from './Tabs.svelte';

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

@@ -1,4 +1,5 @@
 <script lang="ts" module>
+    import { theme } from '$lib/theme.svelte';
     import clsx from 'clsx';
     import { type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
@@ -7,12 +8,6 @@
     import { getRowContext } from './Row.svelte';
     import { getTableContext } from './Table.svelte';
 
-    let defaultClasses = $state<ClassValue>();
-
-    export function setClasses(c: ClassValue) {
-        defaultClasses = c;
-    }
-
     export interface ColumnProps extends ColumnConfig {
         class?: ClassValue;
         /** If the type is incorrect pass the "row" property with the right type */
@@ -75,8 +70,8 @@
     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',
-            defaultClasses,
+            column.width !== 0 && 'border-r-[calc(var(--spacing)*2)] border-transparent',
+            theme.current.table?.column?.class,
             clazz
         ])
     )}

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

@@ -48,7 +48,7 @@
 <div
     class={['group flex shrink-0 flex-row justify-start']}
     bind:this={target}
-    style="width: {column.width}px;"
+    style="width: {column?.width ?? 0}px;"
 >
     {@render children?.()}
     {#if column.resizable}

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

@@ -191,11 +191,11 @@
 
 <VirtualList
     bind:this={list}
+    bind:b_scrollTop
     data={results.entries}
     class={twMerge(clsx(['flex flex-col overflow-hidden border-transparent', clazz]))}
-    bind:b_scrollTop
-    {rowHeight}
     rowClass={['pl-2 pr-4', rowClass]}
+    {rowHeight}
 >
     {#snippet header()}
         <div
@@ -206,7 +206,7 @@
                 )
             )}
         >
-            {#if treeIndicatorColumn}
+            {#if treeIndicatorColumn instanceof ColumnController}
                 <ColumnHead column={treeIndicatorColumn}></ColumnHead>
             {/if}
             {#each externalColumns || columns as column (column.id)}

package/src/lib/components/table/columnController.svelte.ts

@@ -38,7 +38,7 @@ export class ColumnController {
             this.minimalWidth = (conf.width ?? DEFAULT_WIDTH) * MINIMAL_WIDTH_MULTIPLIER;
         }
         if (this.width === undefined) {
-            const newWidth = conf.width ?? DEFAULT_WIDTH;
+            const newWidth = typeof conf.width === 'undefined' ? DEFAULT_WIDTH : conf.width;
             this.width = newWidth;
         }
         if (!this.header) this.header = conf.header;

package/src/lib/index.ts

@@ -1,2 +1,3 @@
 // Reexport your entry components here
+export { theme, type Theme } from './theme.svelte';
 export { type IvoryComponent } from './types';

package/src/lib/theme.svelte.ts

@@ -0,0 +1,38 @@
+import type { ClassValue } from 'svelte/elements';
+
+export interface Theme {
+    heading?: {
+        class?: ClassValue;
+    };
+    hiddenBackground?: {
+        class?: ClassValue;
+    };
+    tabs?: {
+        tab?: {
+            class?: (active: boolean) => ClassValue;
+        };
+    };
+    table?: {
+        column?: {
+            class?: ClassValue;
+        };
+    };
+}
+
+function createTheme() {
+    let theme = $state<Theme>({});
+
+    return {
+        setTheme(newTheme: Theme) {
+            theme = newTheme;
+        },
+        set current(newTheme: Theme) {
+            theme = newTheme;
+        },
+        get current() {
+            return theme;
+        }
+    };
+}
+
+export const theme = createTheme();

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Heading.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/heading/Heading.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,YAAa,SAAQ,cAAc,CAAC,kBAAkB,CAAC;IACpE,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,UAAU,QAEvC;AAkBL;;;;;GAKG;AACH,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

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

@@ -1,6 +0,0 @@
-import { setClasses } from './Heading.svelte';
-declare const Heading: import("svelte").Component<import("./Heading.svelte").HeadingProps, {}, ""> & {
-    setClasses: typeof setClasses;
-};
-export default Heading;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/heading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3E,QAAA,MAAM,OAAO;;CAEX,CAAC;AAEH,eAAe,OAAO,CAAC"}

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

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

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

@@ -1,7 +0,0 @@
-import { setClasses } from './HiddenBackground.svelte';
-declare const HiddenBackground: import("svelte").Component<import("./HiddenBackground.svelte").HiddenBackgroundProps, {}, ""> & {
-    setClasses: typeof setClasses;
-};
-export default HiddenBackground;
-export { type HiddenBackgroundProps } from './HiddenBackground.svelte';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/hiddenBackground/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5E,QAAA,MAAM,gBAAgB;;CAEpB,CAAC;AAEH,eAAe,gBAAgB,CAAC;AAChC,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,2BAA2B,CAAC"}

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

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

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

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

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

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

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

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