@ims360/svelte-ivory 0.0.21 → 0.0.24

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

@@ -1,16 +1,9 @@
 <script lang="ts">
-    import type { Snippet } from 'svelte';
-    import Modal from './Modal.svelte';
+    import Modal, { type ModalProps } from './Modal.svelte';
 
-    interface Props {
-        open: boolean;
-        testId: string;
-        children: Snippet;
-    }
-
-    let { open, ...props }: Props = $props();
+    let { open, ...props }: ModalProps & { open: boolean } = $props();
 
     let b_open = $state(open);
 </script>
 
-<Modal bind:b_open {...props} />
+<Modal {...props} bind:b_open />

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

@@ -1,10 +1,8 @@
-import type { Snippet } from 'svelte';
-interface Props {
+import { type ModalProps } from './Modal.svelte';
+type $$ComponentProps = ModalProps & {
     open: boolean;
-    testId: string;
-    children: Snippet;
-}
-declare const ModalTest: import("svelte").Component<Props, {}, "">;
+};
+declare const ModalTest: import("svelte").Component<$$ComponentProps, {}, "">;
 type ModalTest = ReturnType<typeof ModalTest>;
 export default ModalTest;
 //# sourceMappingURL=ModalTest.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ModalTest.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/ModalTest.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIlC,UAAU,KAAK;IACX,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;CACrB;AAeL,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ModalTest.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/modal/ModalTest.svelte.ts"],"names":[],"mappings":"AAGA,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,UAAU,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAazD,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

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

@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { browser } from '$app/environment';
+    import type { IvoryComponent } from '../../../types';
     import {
         autoPlacement,
         autoUpdate,
@@ -9,21 +10,15 @@
         type ComputePositionConfig
     } from '@floating-ui/dom';
     import clsx from 'clsx';
-    import type { Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
     import { twMerge } from 'tailwind-merge';
     import { clickOutside } from '../../../utils/actions/clickOutside';
 
     /** Possible placements for the popover */
     export type PopoverPlacement = ComputePositionConfig['placement'];
-</script>
 
-<script lang="ts">
-    type Props = {
-        class?: ClassValue;
+    export interface PopoverProps extends IvoryComponent<HTMLDivElement> {
         /** Whether the popover is open or not */
         b_open: boolean;
-        style?: string;
         /** The element the popover will be positioned relative to */
         target: Element | undefined;
         /**
@@ -38,15 +33,16 @@
         onClickOutside?: (e: MouseEvent) => void;
         /** If set to `true`, the nested component will not be unmounted when the popover is closed */
         keepMounted?: boolean;
-        children: Snippet;
         /**
          * Whether to place the popover automatically
          *
          * [Further reading](https://floating-ui.com/docs/autoPlacement)
          */
         autoplacement?: boolean;
-    };
+    }
+</script>
 
+<script lang="ts">
     let {
         class: clazz,
         b_open = $bindable(false),
@@ -58,8 +54,9 @@
         },
         keepMounted = false,
         children,
-        autoplacement
-    }: Props = $props();
+        autoplacement,
+        ...rest
+    }: PopoverProps = $props();
 
     let style: string = $state('');
     let popover: HTMLDivElement | undefined = $state();
@@ -102,7 +99,8 @@
         style={style + ' ' + externalStyle}
         bind:this={popover}
         use:clickOutside={{ callback: onClickOutside, target }}
+        {...rest}
     >
-        {@render children()}
+        {@render children?.()}
     </div>
 {/if}

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

@@ -1,13 +1,10 @@
+import type { IvoryComponent } from '../../../types';
 import { type ComputePositionConfig } from '@floating-ui/dom';
-import type { Snippet } from 'svelte';
-import type { ClassValue } from 'svelte/elements';
 /** Possible placements for the popover */
 export type PopoverPlacement = ComputePositionConfig['placement'];
-type Props = {
-    class?: ClassValue;
+export interface PopoverProps extends IvoryComponent<HTMLDivElement> {
     /** Whether the popover is open or not */
     b_open: boolean;
-    style?: string;
     /** The element the popover will be positioned relative to */
     target: Element | undefined;
     /**
@@ -22,16 +19,15 @@ type Props = {
     onClickOutside?: (e: MouseEvent) => void;
     /** If set to `true`, the nested component will not be unmounted when the popover is closed */
     keepMounted?: boolean;
-    children: Snippet;
     /**
      * Whether to place the popover automatically
      *
      * [Further reading](https://floating-ui.com/docs/autoPlacement)
      */
     autoplacement?: boolean;
-};
+}
 /** A popover, positions itself relative to a target element. */
-declare const Popover: import("svelte").Component<Props, {}, "b_open">;
+declare const Popover: import("svelte").Component<PopoverProps, {}, "b_open">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;
 //# sourceMappingURL=Popover.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAII,OAAO,EAMH,KAAK,qBAAqB,EAC7B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAC;AAElE,KAAK,KAAK,GAAG;IACT,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,yCAAyC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,8FAA8F;IAC9F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AA4DN,gEAAgE;AAChE,QAAA,MAAM,OAAO,iDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Popover.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/popover/Popover.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAMH,KAAK,qBAAqB,EAC7B,MAAM,kBAAkB,CAAC;AAK1B,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAC;AAElE,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,yCAAyC;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,6DAA6D;IAC7D,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,8FAA8F;IAC9F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B;AA4DL,gEAAgE;AAChE,QAAA,MAAM,OAAO,wDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/layout/portal/Portal.svelte

@@ -1,4 +1,13 @@
 <script lang="ts" module>
+    import type { IvoryComponent } from '../../../types';
+    import type { Snippet } from 'svelte';
+    import { portal } from '../../../utils/actions/index';
+
+    export interface PortalProps extends IvoryComponent<HTMLDivElement> {
+        children: Snippet;
+        target?: string | HTMLElement;
+    }
+
     export interface PortalConfig {
         defaultTarget: string;
     }
@@ -14,15 +23,7 @@
 </script>
 
 <script lang="ts">
-    import type { Snippet } from 'svelte';
-    import { portal } from '../../../utils/actions/index';
-
-    interface Props {
-        children: Snippet;
-        target?: string | HTMLElement;
-    }
-
-    let { children, target }: Props = $props();
+    let { children, target }: PortalProps = $props();
 </script>
 
 <!-- 

package/dist/components/layout/portal/Portal.svelte.d.ts

@@ -1,12 +1,13 @@
-export interface PortalConfig {
-    defaultTarget: string;
-}
-export declare function setConfig(newConfig: Partial<PortalConfig>): void;
+import type { IvoryComponent } from '../../../types';
 import type { Snippet } from 'svelte';
-interface Props {
+export interface PortalProps extends IvoryComponent<HTMLDivElement> {
     children: Snippet;
     target?: string | HTMLElement;
 }
+export interface PortalConfig {
+    defaultTarget: string;
+}
+export declare function setConfig(newConfig: Partial<PortalConfig>): void;
 /**
  * A portal, renders its children in a different DOM element.
  *
@@ -14,7 +15,7 @@ interface Props {
  *
  * **Use sparingy as it can make the DOM structure confusing**
  */
-declare const Portal: import("svelte").Component<Props, {}, "">;
+declare const Portal: import("svelte").Component<PortalProps, {}, "">;
 type Portal = ReturnType<typeof Portal>;
 export default Portal;
 //# sourceMappingURL=Portal.svelte.d.ts.map

package/dist/components/layout/portal/Portal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/portal/Portal.svelte.ts"],"names":[],"mappings":"AAGI,MAAM,WAAW,YAAY;IACzB,aAAa,EAAE,MAAM,CAAC;CACzB;AAOD,wBAAgB,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC,QAEzD;AAGL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIlC,UAAU,KAAK;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CACjC;AAkBL;;;;;;GAMG;AACH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Portal.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/portal/Portal.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;CACjC;AAED,MAAM,WAAW,YAAY;IACzB,aAAa,EAAE,MAAM,CAAC;CACzB;AAOD,wBAAgB,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC,YAAY,CAAC,QAEzD;AAeL;;;;;;GAMG;AACH,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

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

@@ -1,5 +1,6 @@
-<script lang="ts">
+<script lang="ts" module>
     import { page } from '$app/state';
+    import type { IvoryComponent } from '../../../types';
     import { pseudoRandomId } from '../../../utils/functions/index';
     import clsx from 'clsx';
     import { onMount, type Snippet } from 'svelte';
@@ -7,7 +8,7 @@
     import { twMerge } from 'tailwind-merge';
     import { getTabContext } from './Tabs.svelte';
 
-    type Props = {
+    export interface TabProps extends Omit<IvoryComponent<HTMLElement>, 'children'> {
         class?: ClassValue | ((selected: boolean) => ClassValue);
         id?: string | undefined;
         /**
@@ -17,19 +18,19 @@
          */
         href?: string | undefined;
         children: Snippet<[{ selected: boolean }]>;
-        testId?: string;
         /** If `href` is set, this can be used to highlight an active tab */
         active?: boolean;
-    };
+    }
+</script>
 
+<script lang="ts">
     let {
         class: clazz = (selected: boolean) => [selected && 'text-primary-500 underline'],
         id,
         href,
         children,
-        testId,
         active
-    }: Props = $props();
+    }: TabProps = $props();
 
     const tab = pseudoRandomId('tab-');
     const tabs = getTabContext();
@@ -69,7 +70,6 @@
           }}
     type={href ? undefined : 'button'}
     {href}
-    data-testid={testId}
     role="tab"
     tabindex="0"
     aria-selected={selected}

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

@@ -1,6 +1,7 @@
+import type { IvoryComponent } from '../../../types';
 import { type Snippet } from 'svelte';
 import type { ClassValue } from 'svelte/elements';
-type Props = {
+export interface TabProps extends Omit<IvoryComponent<HTMLElement>, 'children'> {
     class?: ClassValue | ((selected: boolean) => ClassValue);
     id?: string | undefined;
     /**
@@ -12,11 +13,10 @@ type Props = {
     children: Snippet<[{
         selected: boolean;
     }]>;
-    testId?: string;
     /** If `href` is set, this can be used to highlight an active tab */
     active?: boolean;
-};
-declare const Tab: import("svelte").Component<Props, {}, "">;
+}
+declare const Tab: import("svelte").Component<TabProps, {}, "">;
 type Tab = ReturnType<typeof Tab>;
 export default Tab;
 //# sourceMappingURL=Tab.svelte.d.ts.map

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":"AAMA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAK9C,KAAK,KAAK,GAAG;IACT,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,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA4DN,QAAA,MAAM,GAAG,2CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/Tab.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;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;AAqDL,QAAA,MAAM,GAAG,8CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

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

@@ -1,14 +1,16 @@
-<script lang="ts">
+<script lang="ts" module>
     import { pseudoRandomId } from '../../../utils/functions/index';
     import { type Snippet } from 'svelte';
     import { getTabContext } from './Tabs.svelte';
 
-    type Props = {
+    export interface TabPanelProps {
         keepMounted?: boolean;
         children: Snippet<[{ visible: boolean }]>;
-    };
+    }
+</script>
 
-    let { keepMounted = false, children }: Props = $props();
+<script lang="ts">
+    let { keepMounted = false, children }: TabPanelProps = $props();
 
     const panel = pseudoRandomId('tab-panel-');
     const tabs = getTabContext();

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

@@ -1,11 +1,11 @@
 import { type Snippet } from 'svelte';
-type Props = {
+export interface TabPanelProps {
     keepMounted?: boolean;
     children: Snippet<[{
         visible: boolean;
     }]>;
-};
-declare const TabPanel: import("svelte").Component<Props, {}, "">;
+}
+declare const TabPanel: import("svelte").Component<TabPanelProps, {}, "">;
 type TabPanel = ReturnType<typeof TabPanel>;
 export default TabPanel;
 //# sourceMappingURL=TabPanel.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/TabPanel.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIlC,KAAK,KAAK,GAAG;IACT,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;CAC7C,CAAC;AAuBN,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TabPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/TabPanel.svelte.ts"],"names":[],"mappings":"AAII,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,MAAM,WAAW,aAAa;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;CAC7C;AAqBL,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

@@ -1,33 +1,30 @@
 <script lang="ts" module>
-    import { getContext, onDestroy, setContext, type Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
+    import type { IvoryComponent } from '../../../types';
+    import { getContext, onDestroy, setContext } from 'svelte';
 
-    interface TabContext {
+    export interface TabsProps extends IvoryComponent<HTMLDivElement> {
+        b_index?: number;
+    }
+
+    export interface TabContext {
         registerTab: (tab: string) => void;
         registerPanel: (panel: string) => void;
         selectedTab: string | undefined;
         tabs: string[];
         selectedPanel: string | undefined;
     }
-    const TABS = {};
 
+    const CONTEXT = {};
     function setTabContext(context: TabContext) {
-        setContext<TabContext>(TABS, context);
+        setContext<TabContext>(CONTEXT, context);
     }
-
     export function getTabContext() {
-        return getContext<TabContext>(TABS);
+        return getContext<TabContext>(CONTEXT);
     }
 </script>
 
 <script lang="ts">
-    type Props = {
-        class?: ClassValue;
-        children: Snippet;
-        b_index?: number;
-    };
-
-    let { class: clazz = '', children, b_index = $bindable(0) }: Props = $props();
+    let { children, b_index = $bindable(0), ...rest }: TabsProps = $props();
 
     let allTabs: string[] = $state([]);
     let panels: string[] = $state([]);
@@ -81,6 +78,6 @@
     });
 </script>
 
-<div class={[clazz]}>
-    {@render children()}
+<div {...rest}>
+    {@render children?.()}
 </div>

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

@@ -1,6 +1,8 @@
-import { type Snippet } from 'svelte';
-import type { ClassValue } from 'svelte/elements';
-interface TabContext {
+import type { IvoryComponent } from '../../../types';
+export interface TabsProps extends IvoryComponent<HTMLDivElement> {
+    b_index?: number;
+}
+export interface TabContext {
     registerTab: (tab: string) => void;
     registerPanel: (panel: string) => void;
     selectedTab: string | undefined;
@@ -8,12 +10,7 @@ interface TabContext {
     selectedPanel: string | undefined;
 }
 export declare function getTabContext(): TabContext;
-type Props = {
-    class?: ClassValue;
-    children: Snippet;
-    b_index?: number;
-};
-declare const Tabs: import("svelte").Component<Props, {
+declare const Tabs: import("svelte").Component<TabsProps, {
     forward: () => void;
     back: () => void;
 }, "b_index">;

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,EAAqC,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,UAAU,UAAU;IAChB,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;AAOD,wBAAgB,aAAa,eAE5B;AAED,KAAK,KAAK,GAAG;IACT,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAkEN,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,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"}

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

@@ -1,27 +1,12 @@
-declare const Tabs: import("svelte").Component<{
-    class?: import("svelte/elements").ClassValue;
-    children: import("svelte").Snippet;
-    b_index?: number;
-}, {
+declare const Tabs: import("svelte").Component<import("./Tabs.svelte").TabsProps, {
     forward: () => void;
     back: () => void;
 }, "b_index"> & {
-    Tab: import("svelte").Component<{
-        class?: import("svelte/elements").ClassValue | ((selected: boolean) => import("svelte/elements").ClassValue);
-        id?: string | undefined;
-        href?: string | undefined;
-        children: import("svelte").Snippet<[{
-            selected: boolean;
-        }]>;
-        testId?: string;
-        active?: boolean;
-    }, {}, "">;
-    Panel: import("svelte").Component<{
-        keepMounted?: boolean;
-        children: import("svelte").Snippet<[{
-            visible: boolean;
-        }]>;
-    }, {}, "">;
+    Tab: import("svelte").Component<import("./Tab.svelte").TabProps, {}, "">;
+    Panel: import("svelte").Component<import("./TabPanel.svelte").TabPanelProps, {}, "">;
 };
 export default Tabs;
+export { type TabProps } from './Tab.svelte';
+export { type TabPanelProps } from './TabPanel.svelte';
+export { getTabContext, 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":"AAIA,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;CAGR,CAAC;AAEH,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/index.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,IAAI;;;;;;CAGR,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"}

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

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

package/dist/components/layout/tooltip/Tooltip.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" module>
+    import type { IvoryComponent } from '../../../types';
     import clsx from 'clsx';
     import type { Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
@@ -6,16 +7,12 @@
     import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
     import Portal from '../portal/Portal.svelte';
 
-    export interface Props {
+    export interface Props extends IvoryComponent<HTMLElement> {
         children?: Snippet;
         /** The content of the tooltip */
         tooltip: string | Snippet;
-        /** The class of the element that triggers the tooltip */
-        class?: ClassValue;
         /** The class of the tooltip itself */
         tooltipClass?: ClassValue;
-        style?: string;
-        onclick?: (e: Event) => void;
         /** If the href is set, the resulting element will be a link to the href */
         href?: string;
         /**
@@ -37,13 +34,11 @@
     let {
         children,
         tooltip,
-        class: clazz,
-        style,
-        onclick,
         href,
         timeout = 500,
         tooltipClass,
-        placement = 'top'
+        placement = 'top',
+        ...rest
     }: Props = $props();
 
     let target = $state<HTMLElement>();
@@ -72,19 +67,16 @@
     @component
     Shows additional information when hovering over an element.
 -->
-
 <!-- Ignoring this error is fine since it's a false positive -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <svelte:element
     this={href ? 'a' : onclick ? 'button' : 'div'}
-    {href}
     type={onclick ? 'button' : undefined}
-    class={clazz}
+    {...rest}
+    {href}
     bind:this={target}
     {onmouseenter}
     {onmouseleave}
-    {style}
-    {onclick}
 >
     {@render children?.()}
 </svelte:element>

package/dist/components/layout/tooltip/Tooltip.svelte.d.ts

@@ -1,16 +1,13 @@
+import type { IvoryComponent } from '../../../types';
 import type { Snippet } from 'svelte';
 import type { ClassValue } from 'svelte/elements';
 import { type PopoverPlacement } from '../popover/Popover.svelte';
-export interface Props {
+export interface Props extends IvoryComponent<HTMLElement> {
     children?: Snippet;
     /** The content of the tooltip */
     tooltip: string | Snippet;
-    /** The class of the element that triggers the tooltip */
-    class?: ClassValue;
     /** The class of the tooltip itself */
     tooltipClass?: ClassValue;
-    style?: string;
-    onclick?: (e: Event) => void;
     /** If the href is set, the resulting element will be a link to the href */
     href?: string;
     /**

package/dist/components/layout/tooltip/Tooltip.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,WAAW,KAAK;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,yDAAyD;IACzD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,sCAAsC;IACtC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;AAkEL,kEAAkE;AAClE,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAG3E,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,WAAW,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iCAAiC;IACjC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,sCAAsC;IACtC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;AA+DL,kEAAkE;AAClE,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/toast/Toast.svelte

@@ -1,3 +1,11 @@
+<script lang="ts" module>
+    export interface Props {
+        class?: ClassValue;
+        children?: Snippet<[toast: ToastSettings & { close: () => void }]>;
+        duration?: number;
+    }
+</script>
+
 <!-- 
 	@component
 	Renders the toasts that have been triggered by the `Toasts` store.  
@@ -12,12 +20,7 @@
     import { fly, scale } from 'svelte/transition';
     import { Toasts, type ToastSettings } from './toasts.svelte';
 
-    type Props = {
-        class?: ClassValue;
-        children?: Snippet<[toast: ToastSettings & { close: () => void }]>;
-    };
-
-    let { class: clazz = 'px-2 pb-2', children }: Props = $props();
+    let { class: clazz = 'px-2 pb-2', children, duration = 200 }: Props = $props();
 
     function getIcon(
         variant: 'info' | 'success' | 'warning' | 'error',
@@ -51,9 +54,9 @@
 
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div
-                in:fly={{ y: '-100%', duration: 300 }}
-                out:scale={{ duration: 300 }}
-                animate:flip={{ duration: 300 }}
+                in:fly={{ y: '-100%', duration }}
+                out:scale={{ duration }}
+                animate:flip={{ duration }}
                 onpointerenter={() => {
                     Toasts.freeze(toast.id);
                 }}
@@ -71,10 +74,14 @@
                     <div
                         class={[
                             'bg-opacity-85 flex flex-row items-center gap-4 rounded px-4 py-2 shadow-lg group-last:rounded-t-none',
-                            toast.variant === 'info' && 'preset-filled-primary-500',
-                            toast.variant === 'success' && 'preset-filled-success-500',
-                            toast.variant === 'warning' && 'preset-filled-warning-500',
-                            toast.variant === 'error' && 'preset-filled-error-500'
+                            toast.variant === 'info' &&
+                                'bg-primary-200-800 text-primary-contrast-50-950',
+                            toast.variant === 'success' &&
+                                'bg-success-200-800 text-success-contrast-50-950',
+                            toast.variant === 'warning' &&
+                                'bg-warning-200-800 text-warning-contrast-50-950',
+                            toast.variant === 'error' &&
+                                'bg-error-200-800 text-error-contrast-50-950'
                         ]}
                     >
                         <VariantIcon />
@@ -87,9 +94,9 @@
                                 onclick={() => {
                                     Toasts.close(toast.id);
                                 }}
-                                class="transition-transform hover:rotate-90"
+                                class="group"
                             >
-                                <X />
+                                <X size={20} class="stroke-1 transition-all group-hover:stroke-2" />
                             </button>
                         {/if}
                     </div>