@ims360/svelte-ivory 0.0.22 → 0.0.24

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

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

package/package.json

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

package/src/lib/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 '$lib/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/src/lib/components/basic/index.ts

@@ -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/src/lib/components/basic/toggle/Toggle.svelte

@@ -1,18 +1,19 @@
-<script lang="ts">
+<script lang="ts" module>
+    import type { IvoryComponent } from '$lib/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
@@ -26,8 +27,7 @@
     )}
     type={onclick ? 'button' : undefined}
     role={onclick ? 'button' : undefined}
-    {onclick}
-    data-testid={testId}
+    {...rest}
 >
     <div
         class={[

package/src/lib/components/buttons/CopyToClipboardButton.svelte

@@ -1,19 +1,20 @@
 <script lang="ts" module>
+    import type { IvoryComponent } from '$lib/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);
@@ -28,6 +29,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/src/lib/components/layout/drawer/Drawer.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">
+<script lang="ts" module>
+    import type { IvoryComponent } from '$lib/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/src/lib/components/layout/heading/Heading.svelte

@@ -1,11 +1,10 @@
 <script lang="ts" module>
+    import type { IvoryComponent } from '$lib/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/src/lib/components/layout/hiddenBackground/HiddenBackground.svelte

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

@@ -1,8 +1,19 @@
 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';

package/src/lib/components/layout/modal/Modal.svelte

@@ -1,13 +1,14 @@
 <script lang="ts" module>
+    import type { IvoryComponent } from '$lib/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={[

package/src/lib/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/src/lib/components/layout/popover/Popover.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" module>
     import { browser } from '$app/environment';
+    import type { IvoryComponent } from '$lib/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/src/lib/components/layout/portal/Portal.svelte

@@ -1,4 +1,13 @@
 <script lang="ts" module>
+    import type { IvoryComponent } from '$lib/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/src/lib/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 '$lib/types';
     import { pseudoRandomId } from '$lib/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/src/lib/components/layout/tabs/TabPanel.svelte

@@ -1,14 +1,16 @@
-<script lang="ts">
+<script lang="ts" module>
     import { pseudoRandomId } from '$lib/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/src/lib/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 '$lib/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/src/lib/components/layout/tabs/index.ts

@@ -8,3 +8,6 @@ const Tabs = Object.assign(TabsComponent, {
 });
 
 export default Tabs;
+export { type TabProps } from './Tab.svelte';
+export { type TabPanelProps } from './TabPanel.svelte';
+export { getTabContext, type TabContext, type TabsProps } from './Tabs.svelte';