@ims360/svelte-ivory 0.0.21 → 0.0.24

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

package/src/lib/components/layout/tooltip/Tooltip.svelte

@@ -1,4 +1,5 @@
 <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';
@@ -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/src/lib/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>

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

@@ -1,2 +1,2 @@
-export { default as ToastUI } from './Toast.svelte';
-export { Toasts } from './toasts.svelte';
+export { default as ToastUI, type Props as ToastUIProps } from './Toast.svelte';
+export { Toasts, type ToastSettings } from './toasts.svelte';

package/src/lib/components/toast/toasts.svelte.ts

@@ -1,18 +1,18 @@
 import type { Icon } from '@lucide/svelte';
 
-export type ToastSettings = {
+export interface ToastSettings {
     message: string;
     autohide?: boolean;
     timeout?: number;
     hideDismiss?: boolean;
     icon?: typeof Icon;
     variant: 'info' | 'success' | 'warning' | 'error';
-};
+}
 
-type Toast = ToastSettings & {
+interface Toast extends ToastSettings {
     id: string;
     timeoutId?: ReturnType<typeof setTimeout>;
-};
+}
 
 const TOAST_DEFAULTS: ToastSettings = {
     message: 'Missing Toast Message',

package/src/lib/index.ts

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

package/src/lib/types.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface IvoryComponent<RootElement extends EventTarget>
+    extends HTMLAttributes<RootElement> {}