@ims360/svelte-ivory 0.0.57 → 0.1.0

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/Tabs.svelte

@@ -3,7 +3,7 @@
     import { getContext, onDestroy, setContext } from 'svelte';
 
     export interface TabsProps extends IvoryComponent<HTMLDivElement> {
-        b_index?: number;
+        initialTab?: number;
     }
 
     export interface TabContext {
@@ -24,27 +24,30 @@
 </script>
 
 <script lang="ts">
-    let { children, b_index = $bindable(0), ...rest }: TabsProps = $props();
+    let { children, initialTab = 0, ...rest }: TabsProps = $props();
 
     let allTabs: string[] = $state([]);
     let panels: string[] = $state([]);
+    let index: number = $state(initialTab);
 
     export const forward = () => {
-        if (b_index >= panels.length - 1) {
-            b_index = 0;
+        if (index >= panels.length - 1) {
+            index = 0;
         } else {
-            b_index++;
+            index++;
         }
     };
 
     export const back = () => {
-        if (b_index === 0) {
-            b_index = panels.length - 1;
+        if (index === 0) {
+            index = panels.length - 1;
         } else {
-            b_index--;
+            index--;
         }
     };
 
+    export const currentTab = () => index;
+
     setTabContext({
         registerTab: (tab: string) => {
             allTabs.push(tab);
@@ -56,23 +59,23 @@
 
         registerPanel: (panel: string) => {
             panels.push(panel);
-            b_index = b_index;
+            index = index;
             onDestroy(() => {
                 panels.filter((p) => p !== panel);
             });
         },
 
         get selectedTab() {
-            return allTabs[b_index];
+            return allTabs[index];
         },
         set selectedTab(tab: string) {
-            b_index = allTabs.indexOf(tab);
+            index = allTabs.indexOf(tab);
         },
         get selectedPanel() {
-            return panels[b_index];
+            return panels[index];
         },
         set selectedPanel(panel: string) {
-            b_index = panels.indexOf(panel);
+            index = panels.indexOf(panel);
         },
         tabs: allTabs
     });

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

@@ -1,6 +1,6 @@
 import type { IvoryComponent } from '../../../types';
 export interface TabsProps extends IvoryComponent<HTMLDivElement> {
-    b_index?: number;
+    initialTab?: number;
 }
 export interface TabContext {
     registerTab: (tab: string) => void;
@@ -13,7 +13,8 @@ export declare function getTabContext(): TabContext;
 declare const Tabs: import("svelte").Component<TabsProps, {
     forward: () => void;
     back: () => void;
-}, "b_index">;
+    currentTab: () => number;
+}, "">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;
 //# sourceMappingURL=Tabs.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACvB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAMD,wBAAgB,aAAa,eAE5B;AAiEL,QAAA,MAAM,IAAI;;;aAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACvB,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAMD,wBAAgB,aAAa,eAE5B;AAoEL,QAAA,MAAM,IAAI;;;;MAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

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

@@ -1,14 +1,4 @@
-import { setDefaultClass } from './Tab.svelte';
-declare const Tabs: import("svelte").Component<import("./Tabs.svelte").TabsProps, {
-    forward: () => void;
-    back: () => void;
-}, "b_index"> & {
-    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/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.57",
+    "version": "0.1.0",
     "keywords": [
         "svelte"
     ],
@@ -74,45 +74,45 @@
         "@floating-ui/dom": "^1.7.4",
         "@lucide/svelte": "^0.503.0",
         "@tailwindcss/forms": "^0.5.10",
-        "@tailwindcss/typography": "^0.5.18",
-        "@tailwindcss/vite": "^4.1.13",
+        "@tailwindcss/typography": "^0.5.19",
+        "@tailwindcss/vite": "^4.1.16",
         "clsx": "^2.1.1",
-        "dompurify": "^3.2.7",
+        "dompurify": "^3.3.0",
         "jsdom": "^26.1.0",
         "marked": "^15.0.12",
         "tailwind-merge": "^3.3.1",
-        "tailwindcss": "^4.1.13"
+        "tailwindcss": "^4.1.16"
     },
     "devDependencies": {
-        "@eslint/compat": "^1.3.2",
-        "@eslint/js": "^9.36.0",
+        "@eslint/compat": "^1.4.1",
+        "@eslint/js": "^9.39.1",
         "@sveltejs/adapter-auto": "^4.0.0",
-        "@sveltejs/package": "^2.5.3",
-        "@sveltejs/vite-plugin-svelte": "^5.1.1",
-        "@testing-library/jest-dom": "^6.8.0",
+        "@sveltejs/package": "^2.5.4",
+        "@sveltejs/vite-plugin-svelte": "^6.2.1",
+        "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/svelte": "^5.2.8",
         "@testing-library/user-event": "^14.6.1",
-        "@vitest/browser": "^3.2.4",
-        "@vitest/coverage-v8": "^3.2.4",
-        "@vitest/spy": "^3.2.4",
-        "eslint": "^9.36.0",
+        "@vitest/browser": "^4.0.0",
+        "@vitest/coverage-v8": "^4.0.0",
+        "@vitest/spy": "^4.0.0",
+        "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-svelte": "^3.12.4",
-        "globals": "^16.4.0",
-        "playwright": "^1.55.0",
+        "eslint-plugin-svelte": "^3.13.0",
+        "globals": "^16.5.0",
+        "playwright": "^1.56.1",
         "prettier": "^3.6.2",
         "prettier-plugin-svelte": "^3.4.0",
-        "prettier-plugin-tailwindcss": "^0.6.14",
-        "publint": "^0.3.13",
-        "svelte-check": "^4.3.1",
-        "typescript": "^5.9.2",
-        "typescript-eslint": "^8.44.0",
-        "vite": "^6.3.6",
-        "vitest": "^3.2.4"
+        "prettier-plugin-tailwindcss": "^0.7.1",
+        "publint": "^0.3.15",
+        "svelte-check": "^4.3.3",
+        "typescript": "^5.9.3",
+        "typescript-eslint": "^8.46.3",
+        "vite": "^7.1.1",
+        "vitest": "^4.0.0"
     },
     "peerDependencies": {
         "@skeletonlabs/skeleton": "^3.1.1",
-        "@sveltejs/kit": "^2.16.0",
-        "svelte": "^5.0.0"
+        "@sveltejs/kit": "^2.48.0",
+        "svelte": "^5.43.0"
     }
 }

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/Tabs.svelte

@@ -3,7 +3,7 @@
     import { getContext, onDestroy, setContext } from 'svelte';
 
     export interface TabsProps extends IvoryComponent<HTMLDivElement> {
-        b_index?: number;
+        initialTab?: number;
     }
 
     export interface TabContext {
@@ -24,27 +24,30 @@
 </script>
 
 <script lang="ts">
-    let { children, b_index = $bindable(0), ...rest }: TabsProps = $props();
+    let { children, initialTab = 0, ...rest }: TabsProps = $props();
 
     let allTabs: string[] = $state([]);
     let panels: string[] = $state([]);
+    let index: number = $state(initialTab);
 
     export const forward = () => {
-        if (b_index >= panels.length - 1) {
-            b_index = 0;
+        if (index >= panels.length - 1) {
+            index = 0;
         } else {
-            b_index++;
+            index++;
         }
     };
 
     export const back = () => {
-        if (b_index === 0) {
-            b_index = panels.length - 1;
+        if (index === 0) {
+            index = panels.length - 1;
         } else {
-            b_index--;
+            index--;
         }
     };
 
+    export const currentTab = () => index;
+
     setTabContext({
         registerTab: (tab: string) => {
             allTabs.push(tab);
@@ -56,23 +59,23 @@
 
         registerPanel: (panel: string) => {
             panels.push(panel);
-            b_index = b_index;
+            index = index;
             onDestroy(() => {
                 panels.filter((p) => p !== panel);
             });
         },
 
         get selectedTab() {
-            return allTabs[b_index];
+            return allTabs[index];
         },
         set selectedTab(tab: string) {
-            b_index = allTabs.indexOf(tab);
+            index = allTabs.indexOf(tab);
         },
         get selectedPanel() {
-            return panels[b_index];
+            return panels[index];
         },
         set selectedPanel(panel: string) {
-            b_index = panels.indexOf(panel);
+            index = panels.indexOf(panel);
         },
         tabs: allTabs
     });

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/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';