@ims360/svelte-ivory 0.0.22 → 0.0.25

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

@@ -1,17 +1,7 @@
-<!-- 
-    @component
-    It's a checkbox 
--->
-
-<script lang="ts">
-    import { type Icon as LucideIcon, Minus, icons } from '@lucide/svelte';
-    import clsx from 'clsx';
-    import type { ClassValue } from 'svelte/elements';
-    import { twMerge } from 'tailwind-merge';
+<script lang="ts" module>
+    import type { IvoryComponent } from '../../../types';
 
-    const Check = $derived(icons.Check);
-
-    type Props = {
+    export interface CheckboxProps extends IvoryComponent<HTMLElement> {
         class?: ClassValue;
         /** `checked` has prioriy over `partial` */
         checked?: boolean | null;
@@ -23,7 +13,19 @@
         onclick?: () => void;
         /** data-testid */
         testId?: string;
-    };
+    }
+</script>
+
+<!-- 
+    @component
+    It's a checkbox 
+-->
+
+<script lang="ts">
+    import { Check, type Icon as LucideIcon, Minus } from '@lucide/svelte';
+    import clsx from 'clsx';
+    import type { ClassValue } from 'svelte/elements';
+    import { twMerge } from 'tailwind-merge';
 
     let {
         class: clazz,
@@ -32,8 +34,8 @@
         id,
         disabled = false,
         onclick,
-        testId
-    }: Props = $props();
+        ...rest
+    }: CheckboxProps = $props();
 
     const {
         icon: Icon,
@@ -62,6 +64,7 @@
     {id}
     {disabled}
     {style}
+    {onclick}
     class={twMerge(
         clsx(
             'box-border flex h-5 w-5 items-center justify-center overflow-hidden rounded border-2 transition-colors',
@@ -70,8 +73,7 @@
             clazz
         )
     )}
-    {onclick}
-    data-testid={testId}
+    {...rest}
 >
     {#if Icon}
         <Icon class="h-full w-full" size={16} strokeWidth={3} />

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

@@ -1,5 +1,5 @@
-import type { ClassValue } from 'svelte/elements';
-type Props = {
+import type { IvoryComponent } from '../../../types';
+export interface CheckboxProps extends IvoryComponent<HTMLElement> {
     class?: ClassValue;
     /** `checked` has prioriy over `partial` */
     checked?: boolean | null;
@@ -11,9 +11,10 @@ type Props = {
     onclick?: () => void;
     /** data-testid */
     testId?: string;
-};
+}
+import type { ClassValue } from 'svelte/elements';
 /** It's a checkbox */
-declare const Checkbox: import("svelte").Component<Props, {}, "">;
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;
 //# sourceMappingURL=Checkbox.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI9C,KAAK,KAAK,GAAG;IACT,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AA0DN,sBAAsB;AACtB,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAKL,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AA2DlD,sBAAsB;AACtB,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

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

@@ -1,3 +1,5 @@
+export * from './checkbox/Checkbox.svelte';
 export { default as Checkbox } from './checkbox/Checkbox.svelte';
+export * from './toggle/Toggle.svelte';
 export { default as Toggle } from './toggle/Toggle.svelte';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACjE,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/basic/index.js

@@ -1,2 +1,4 @@
+export * from './checkbox/Checkbox.svelte';
 export { default as Checkbox } from './checkbox/Checkbox.svelte';
+export * from './toggle/Toggle.svelte';
 export { default as Toggle } from './toggle/Toggle.svelte';

package/dist/components/basic/toggle/Toggle.svelte

@@ -1,22 +1,23 @@
-<script lang="ts">
+<script lang="ts" module>
+    import type { IvoryComponent } from '../../../types';
     import clsx from 'clsx';
     import type { Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
     import { twMerge } from 'tailwind-merge';
 
-    type Props = {
+    export interface ToggleProps extends IvoryComponent<HTMLElement> {
         value?: boolean;
         class?: ClassValue;
-        onclick?: () => void;
         children?: Snippet;
-        testId?: string;
-    };
+    }
+</script>
 
-    let { value, class: clazz, onclick, children, testId }: Props = $props();
+<script lang="ts">
+    let { value, class: clazz, children, ...rest }: ToggleProps = $props();
 </script>
 
 <svelte:element
-    this={onclick ? 'button' : 'div'}
+    this={rest.onclick ? 'button' : 'div'}
     class={twMerge(
         clsx(
             'group relative flex h-5 w-9 flex-row items-center rounded-full p-0.5 transition-colors duration-100',
@@ -24,10 +25,9 @@
             clazz
         )
     )}
-    type={onclick ? 'button' : undefined}
-    role={onclick ? 'button' : undefined}
-    {onclick}
-    data-testid={testId}
+    type={rest.onclick ? 'button' : undefined}
+    role={rest.onclick ? 'button' : undefined}
+    {...rest}
 >
     <div
         class={[

package/dist/components/basic/toggle/Toggle.svelte.d.ts

@@ -1,13 +1,12 @@
+import type { IvoryComponent } from '../../../types';
 import type { Snippet } from 'svelte';
 import type { ClassValue } from 'svelte/elements';
-type Props = {
+export interface ToggleProps extends IvoryComponent<HTMLElement> {
     value?: boolean;
     class?: ClassValue;
-    onclick?: () => void;
     children?: Snippet;
-    testId?: string;
-};
-declare const Toggle: import("svelte").Component<Props, {}, "">;
+}
+declare const Toggle: import("svelte").Component<ToggleProps, {}, "">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;
 //# sourceMappingURL=Toggle.svelte.d.ts.map

package/dist/components/basic/toggle/Toggle.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI9C,KAAK,KAAK,GAAG;IACT,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAmCN,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/toggle/Toggle.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;AAGlD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC5D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAgCL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/components/buttons/CopyToClipboardButton.svelte

@@ -1,23 +1,21 @@
 <script lang="ts" module>
+    import type { IvoryComponent } from '../../types';
     import { Copy } from '@lucide/svelte';
     import type { ClassValue } from 'svelte/elements';
     import { Toasts } from '../toast';
 
-    let lastCopied = $state<string>();
-</script>
-
-<script lang="ts">
-    interface Props {
+    export interface CopyToClipboardButtonProps extends IvoryComponent<HTMLButtonElement> {
         text: string;
         class?: ClassValue;
         toastMessage?: string;
     }
+</script>
 
-    let { text, class: clazz = 'text-xl', toastMessage }: Props = $props();
+<script lang="ts">
+    let { text, toastMessage, ...rest }: CopyToClipboardButtonProps = $props();
 
     async function copyText() {
         await navigator.clipboard.writeText(text);
-        lastCopied = text;
         if (toastMessage) {
             Toasts.trigger({
                 variant: 'success',
@@ -28,6 +26,6 @@
     }
 </script>
 
-<button type="button" class={['text-surface-500 btn', clazz]} onclick={copyText}>
+<button type="button" class={['text-surface-500 btn', rest.class]} onclick={copyText} {...rest}>
     <Copy class={['h-5 w-5']} />
 </button>

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

@@ -1,10 +1,11 @@
+import type { IvoryComponent } from '../../types';
 import type { ClassValue } from 'svelte/elements';
-interface Props {
+export interface CopyToClipboardButtonProps extends IvoryComponent<HTMLButtonElement> {
     text: string;
     class?: ClassValue;
     toastMessage?: string;
 }
-declare const CopyToClipboardButton: import("svelte").Component<Props, {}, "">;
+declare const CopyToClipboardButton: import("svelte").Component<CopyToClipboardButtonProps, {}, "">;
 type CopyToClipboardButton = ReturnType<typeof CopyToClipboardButton>;
 export default CopyToClipboardButton;
 //# sourceMappingURL=CopyToClipboardButton.svelte.d.ts.map

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

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

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

@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts" module>
+    import type { IvoryComponent } from '../../../types';
     import { X } from '@lucide/svelte';
     import clsx from 'clsx';
     import type { Snippet } from 'svelte';
@@ -7,31 +8,34 @@
     import Heading from '../heading';
     import HiddenBackground from '../hiddenBackground';
 
-    type DrawerPlacement = 'left' | 'right';
+    export type DrawerPlacement = 'left' | 'right';
 
-    interface Props {
+    export interface DrawerProps extends IvoryComponent<HTMLDivElement> {
         class?: string;
         b_open: boolean;
         title?: string;
         children: Snippet;
         placement?: DrawerPlacement;
     }
+</script>
 
+<script lang="ts">
     let {
         class: clazz,
         b_open = $bindable(false),
         children,
         title,
-        placement = 'right'
-    }: Props = $props();
+        placement = 'right',
+        ...rest
+    }: DrawerProps = $props();
 
-    const close = () => {
+    const onclose = () => {
         b_open = false;
     };
 </script>
 
 {#if b_open}
-    <HiddenBackground onclose={close}>
+    <HiddenBackground {onclose}>
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <!-- svelte-ignore a11y_no_static_element_interactions -->
         <div
@@ -45,12 +49,13 @@
             )}
             transition:fly={{ x: placement === 'right' ? '100%' : '-100%', duration: 200 }}
             onclick={(e) => e.stopPropagation()}
+            {...rest}
         >
             <div class="flex flex-row items-center justify-between gap-8">
                 {#if title}
                     <Heading>{title}</Heading>
                 {/if}
-                <button class="group ml-auto flex justify-end" type="button" onclick={close}>
+                <button class="group ml-auto flex justify-end" type="button" onclick={onclose}>
                     <X class="h-full w-auto transition-[stroke-width] group-hover:stroke-3" />
                 </button>
             </div>

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

@@ -1,13 +1,14 @@
+import type { IvoryComponent } from '../../../types';
 import type { Snippet } from 'svelte';
-type DrawerPlacement = 'left' | 'right';
-interface Props {
+export type DrawerPlacement = 'left' | 'right';
+export interface DrawerProps extends IvoryComponent<HTMLDivElement> {
     class?: string;
     b_open: boolean;
     title?: string;
     children: Snippet;
     placement?: DrawerPlacement;
 }
-declare const Drawer: import("svelte").Component<Props, {}, "b_open">;
+declare const Drawer: import("svelte").Component<DrawerProps, {}, "b_open">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;
 //# sourceMappingURL=Drawer.svelte.d.ts.map

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":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOlC,KAAK,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAExC,UAAU,KAAK;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAoDL,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMtC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AA8CL,QAAA,MAAM,MAAM,uDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

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

@@ -1,11 +1,10 @@
 <script lang="ts" module>
+    import type { IvoryComponent } from '../../../types';
     import clsx from 'clsx';
-    import type { Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
     import { twMerge } from 'tailwind-merge';
 
-    export interface Props {
-        children: Snippet;
+    export interface HeadingProps extends IvoryComponent<HTMLHeadingElement> {
         class?: ClassValue;
     }
 
@@ -17,7 +16,7 @@
 </script>
 
 <script lang="ts">
-    let { children, class: clazz }: Props = $props();
+    let { children, class: clazz, ...rest }: HeadingProps = $props();
 </script>
 
 <!-- 
@@ -28,6 +27,9 @@
     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))}>
-    {@render children()}
+<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,7 +1,6 @@
-import type { Snippet } from 'svelte';
+import type { IvoryComponent } from '../../../types';
 import type { ClassValue } from 'svelte/elements';
-export interface Props {
-    children: Snippet;
+export interface HeadingProps extends IvoryComponent<HTMLHeadingElement> {
     class?: ClassValue;
 }
 export declare function setClasses(c: ClassValue): void;
@@ -11,7 +10,7 @@ export declare function setClasses(c: ClassValue): void;
  * 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<Props, {}, "">;
+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 +1 @@
-{"version":3,"file":"Heading.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/heading/Heading.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,KAAK;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,UAAU,QAEvC;AAkBL;;;;;GAKG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"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,5 +1,5 @@
 import { setClasses } from './Heading.svelte';
-declare const Heading: import("svelte").Component<import("./Heading.svelte").Props, {}, ""> & {
+declare const Heading: import("svelte").Component<import("./Heading.svelte").HeadingProps, {}, ""> & {
     setClasses: typeof setClasses;
 };
 export default Heading;

package/dist/components/layout/hiddenBackground/HiddenBackground.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
+    import type { IvoryComponent } from '../../../types';
     import clsx from 'clsx';
-    import type { Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
     import { fade } from 'svelte/transition';
     import { twMerge } from 'tailwind-merge';
@@ -14,16 +14,21 @@
 
     export const TEST_ID = 'background';
 
-    export interface Props {
-        class?: ClassValue;
+    export interface HiddenBackgroundProps extends IvoryComponent<HTMLDialogElement> {
         /** Gets called when the dialog is clicked */
         onclose?: () => void;
-        children: Snippet;
+        duration?: number;
     }
 </script>
 
 <script lang="ts">
-    let { class: clazz, onclose, children }: Props = $props();
+    let {
+        class: clazz,
+        onclose,
+        children,
+        duration = 300,
+        ...rest
+    }: HiddenBackgroundProps = $props();
 </script>
 
 <dialog
@@ -41,8 +46,9 @@
         callback: onclose ?? (() => {})
     }}
     onclick={onclose}
-    transition:fade={{ duration: 200 }}
+    transition:fade={{ duration }}
     data-testid={TEST_ID}
+    {...rest}
 >
-    {@render children()}
+    {@render children?.()}
 </dialog>

package/dist/components/layout/hiddenBackground/HiddenBackground.svelte.d.ts

@@ -1,14 +1,13 @@
-import type { Snippet } from 'svelte';
+import type { IvoryComponent } from '../../../types';
 import type { ClassValue } from 'svelte/elements';
 export declare function setClasses(value: ClassValue): void;
 export declare const TEST_ID = "background";
-export interface Props {
-    class?: ClassValue;
+export interface HiddenBackgroundProps extends IvoryComponent<HTMLDialogElement> {
     /** Gets called when the dialog is clicked */
     onclose?: () => void;
-    children: Snippet;
+    duration?: number;
 }
-declare const HiddenBackground: import("svelte").Component<Props, {}, "">;
+declare const HiddenBackground: import("svelte").Component<HiddenBackgroundProps, {}, "">;
 type HiddenBackground = ReturnType<typeof HiddenBackground>;
 export default HiddenBackground;
 //# sourceMappingURL=HiddenBackground.svelte.d.ts.map

package/dist/components/layout/hiddenBackground/HiddenBackground.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HiddenBackground.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/hiddenBackground/HiddenBackground.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAOlD,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,QAE3C;AAED,eAAO,MAAM,OAAO,eAAe,CAAC;AAEpC,MAAM,WAAW,KAAK;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACrB;AAuBL,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"HiddenBackground.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/hiddenBackground/HiddenBackground.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAOlD,wBAAgB,UAAU,CAAC,KAAK,EAAE,UAAU,QAE3C;AAED,eAAO,MAAM,OAAO,eAAe,CAAC;AAEpC,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,iBAAiB,CAAC;IAC5E,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AA6BL,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

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

@@ -1,5 +1,5 @@
 import { setClasses } from './HiddenBackground.svelte';
-declare const HiddenBackground: import("svelte").Component<import("./HiddenBackground.svelte").Props, {}, ""> & {
+declare const HiddenBackground: import("svelte").Component<import("./HiddenBackground.svelte").HiddenBackgroundProps, {}, ""> & {
     setClasses: typeof setClasses;
     TEST_ID: string;
 };

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

@@ -1,9 +1,14 @@
 export { default as Drawer } from './drawer/Drawer.svelte';
-export { default as Heading } from './heading/index';
-export { default as HiddenBackground } from './hiddenBackground/index';
-export { default as Modal, type ModalProps } from './modal/Modal.svelte';
+export { default as Heading } from './heading';
+export * from './hiddenBackground';
+export { default as HiddenBackground } from './hiddenBackground';
+export * from './modal/Modal.svelte';
+export { default as Modal } from './modal/Modal.svelte';
 export { default as Popover } from './popover/Popover.svelte';
-export { default as Portal, setConfig, type PortalConfig } from './portal/Portal.svelte';
-export { default as Tabs } from './tabs/index';
-export { default as Tooltip, type Props as TooltipProps } from './tooltip/Tooltip.svelte';
+export * from './portal/Portal.svelte';
+export { default as Portal } from './portal/Portal.svelte';
+export * from './tabs';
+export { default as Tabs } from './tabs';
+export * from './tooltip/Tooltip.svelte';
+export { default as Tooltip } 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,iBAAiB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,KAAK,KAAK,IAAI,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,WAAW,CAAC;AAE/C,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEjE,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAE9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAE3D,cAAc,QAAQ,CAAC;AACvB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEzC,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/layout/index.js

@@ -1,8 +1,13 @@
 export { default as Drawer } from './drawer/Drawer.svelte';
-export { default as Heading } from './heading/index';
-export { default as HiddenBackground } from './hiddenBackground/index';
+export { default as Heading } from './heading';
+export * from './hiddenBackground';
+export { default as HiddenBackground } from './hiddenBackground';
+export * from './modal/Modal.svelte';
 export { default as Modal } from './modal/Modal.svelte';
 export { default as Popover } from './popover/Popover.svelte';
-export { default as Portal, setConfig } from './portal/Portal.svelte';
-export { default as Tabs } from './tabs/index';
+export * from './portal/Portal.svelte';
+export { default as Portal } from './portal/Portal.svelte';
+export * from './tabs';
+export { default as Tabs } from './tabs';
+export * from './tooltip/Tooltip.svelte';
 export { default as Tooltip } from './tooltip/Tooltip.svelte';

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

@@ -1,13 +1,14 @@
 <script lang="ts" module>
+    import type { IvoryComponent } from '../../../types';
     import { X } from '@lucide/svelte';
     import clsx from 'clsx';
     import type { Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
+    import type { ClassValue, MouseEventHandler } from 'svelte/elements';
     import { twMerge } from 'tailwind-merge';
     import { Heading, HiddenBackground, Portal } from '..';
 
     /** Props for the modal, expose if you overwrite the defaults in a custom component */
-    export interface ModalProps {
+    export interface ModalProps extends IvoryComponent<HTMLDivElement> {
         /** Class of the modal itself, does not apply to the inner div */
         class?: ClassValue;
         /** Class of the div wrapping the children */
@@ -16,8 +17,6 @@
         b_open: boolean;
         /** Content of the modal */
         children?: Snippet;
-        /** Style applied to the */
-        style?: string;
         /** If `true` the modal will not close when clicking outside of it */
         preventClosing?: boolean;
         /** Variant of the modal, applies styling to the header */
@@ -32,12 +31,10 @@
     interface Props extends ModalProps {
         /** If you don't want the title and close button to be included you can overwrite the default modal */
         modal?: Snippet;
-        testId?: string;
     }
 
     let {
-        class: clazz = 'flex ',
-        style,
+        class: clazz = 'flex flex-col',
         title,
         b_open = $bindable(),
         children,
@@ -45,13 +42,18 @@
         preventClosing = false,
         variant,
         innerClass,
-        testId
+        ...rest
     }: Props = $props();
 
     function close() {
         if (preventClosing) return;
         b_open = false;
     }
+
+    const onclick: MouseEventHandler<HTMLDivElement> = (e) => {
+        e.stopPropagation();
+        rest.onclick?.(e);
+    };
 </script>
 
 <!-- 
@@ -67,12 +69,7 @@
             {#if modal}
                 <!-- svelte-ignore a11y_no_static_element_interactions -->
                 <!-- svelte-ignore a11y_click_events_have_key_events -->
-                <div
-                    class={clazz}
-                    onclick={(e) => e.stopPropagation()}
-                    data-testid={testId}
-                    {style}
-                >
+                <div {...rest} {onclick}>
                     {@render modal()}
                 </div>
             {:else}
@@ -85,9 +82,8 @@
                             clazz
                         ])
                     )}
-                    {style}
-                    onclick={(e) => e.stopPropagation()}
-                    data-testid={testId}
+                    {...rest}
+                    {onclick}
                 >
                     <div
                         class={[