@mrintel/villain-ui 0.2.2 → 0.6.3

package/dist/components/overlays/Modal.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { open = $bindable(false), title, size = 'md', closeOnBackdrop = true, closeOnEscape = true, children, footer, iconBefore, class: className = '' } = $props();
+let modalElement = $state();
+let previousFocus = $state(null);
+const sizeClasses = {
+    sm: 'max-w-[28rem]',
+    md: 'max-w-[36rem]',
+    lg: 'max-w-[48rem]',
+    xl: 'max-w-[64rem]'
+};
+const titleId = createId('modal-title');
+const focusableSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable="true"], summary, details, audio[controls], video[controls]';
+function handleClose() {
+    open = false;
+}
+function handleBackdropClick(event) {
+    if (closeOnBackdrop && event.target === event.currentTarget) {
+        handleClose();
+    }
+}
+function handleEscape(event) {
+    if (closeOnEscape && event.key === 'Escape') {
+        handleClose();
+    }
+}
+function handleFocusTrap(event) {
+    if (event.key !== 'Tab' || !modalElement)
+        return;
+    const focusableElements = Array.from(modalElement.querySelectorAll(focusableSelector));
+    if (focusableElements.length === 0)
+        return;
+    const firstFocusable = focusableElements[0];
+    const lastFocusable = focusableElements[focusableElements.length - 1];
+    if (event.shiftKey) {
+        // Shift+Tab: moving backwards
+        if (document.activeElement === firstFocusable) {
+            event.preventDefault();
+            lastFocusable.focus();
+        }
+    }
+    else {
+        // Tab: moving forwards
+        if (document.activeElement === lastFocusable) {
+            event.preventDefault();
+            firstFocusable.focus();
+        }
+    }
+}
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    if (open) {
+        // Store previous focus
+        previousFocus = document.activeElement;
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden';
+        // Add event listeners
+        document.addEventListener('keydown', handleEscape);
+        document.addEventListener('keydown', handleFocusTrap);
+        // Focus first interactive element
+        requestAnimationFrame(() => {
+            const firstInteractive = modalElement?.querySelector(focusableSelector);
+            firstInteractive?.focus();
+        });
+        return () => {
+            // Restore body scroll
+            document.body.style.overflow = '';
+            // Remove event listeners
+            document.removeEventListener('keydown', handleEscape);
+            document.removeEventListener('keydown', handleFocusTrap);
+            // Restore previous focus
+            previousFocus?.focus();
+        };
+    }
+});
+</script>
+
+{#if open}
+  <div
+    class="fixed inset-0 z-[var(--z-50)] flex items-center justify-center p-4 bg-overlay backdrop-blur-md animate-[fade-in_0.2s_var(--ease-luxe)]"
+    onclick={handleBackdropClick}
+    role="presentation"
+  >
+    <div
+      bind:this={modalElement}
+      class="panel-floating rounded-[var(--radius-lg)] shadow-deep w-full {sizeClasses[size]} {className} animate-[fade-up_0.3s_var(--ease-luxe)] flex flex-col max-h-[90vh]"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? titleId : undefined}
+    >
+      {#if title}
+        <div class="flex items-center justify-between p-8 border-b border-border">
+          <h2 id={titleId} class="text-xl font-semibold text-text flex items-center gap-3">
+            {#if iconBefore}
+              <span class="inline-flex items-center justify-center">
+                {@render iconBefore()}
+              </span>
+            {/if}
+            {title}
+          </h2>
+          <button
+            type="button"
+            onclick={handleClose}
+            class="text-text-soft hover:text-text transition-colors"
+            aria-label="Close modal"
+          >
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      {/if}
+
+      <div class="flex-1 overflow-y-auto p-8 max-h-[70vh]" style="scrollbar-width: thin; scrollbar-color: var(--color-accent) var(--color-base-3);">
+        {@render children?.()}
+      </div>
+
+      {#if footer}
+        <div class="flex items-center justify-end gap-4 p-8 border-t border-border">
+          {@render footer?.()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/components/overlays/Modal.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    open?: boolean;
+    title?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    children?: Snippet;
+    footer?: Snippet;
+    iconBefore?: Snippet;
+    class?: string;
+}
+declare const Modal: import("svelte").Component<Props, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/overlays/Popover.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { open = $bindable(false), placement = 'bottom', closeOnClickOutside = true, trigger, children } = $props();
+let popoverElement = $state();
+let wrapperElement = $state();
+let actualPlacement = $state(placement);
+const popoverId = createId('popover');
+const placementClasses = {
+    'top': 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    'top-start': 'bottom-full left-0 mb-2',
+    'top-end': 'bottom-full right-0 mb-2',
+    'bottom': 'top-full left-1/2 -translate-x-1/2 mt-2',
+    'bottom-start': 'top-full left-0 mt-2',
+    'bottom-end': 'top-full right-0 mt-2',
+    'left': 'right-full top-1/2 -translate-y-1/2 mr-2',
+    'right': 'left-full top-1/2 -translate-y-1/2 ml-2'
+};
+const oppositePlacement = {
+    'top': 'bottom',
+    'top-start': 'bottom-start',
+    'top-end': 'bottom-end',
+    'bottom': 'top',
+    'bottom-start': 'top-start',
+    'bottom-end': 'top-end',
+    'left': 'right',
+    'right': 'left'
+};
+function toggleOpen() {
+    open = !open;
+}
+function handleClickOutside(event) {
+    if (closeOnClickOutside && popoverElement && wrapperElement && !wrapperElement.contains(event.target)) {
+        open = false;
+    }
+}
+function handleEscape(event) {
+    if (event.key === 'Escape') {
+        open = false;
+    }
+}
+// Reset actualPlacement when visibility changes
+$effect(() => {
+    if (!open) {
+        actualPlacement = placement;
+    }
+});
+// Check viewport bounds and flip placement if needed
+$effect(() => {
+    if (typeof window === 'undefined')
+        return;
+    if (open && popoverElement) {
+        const rect = popoverElement.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Determine if current placement overflows and flip if needed
+        if (actualPlacement.startsWith('top') && rect.top < 0) {
+            actualPlacement = oppositePlacement[actualPlacement] || placement;
+        }
+        else if (actualPlacement.startsWith('bottom') && rect.bottom > viewportHeight) {
+            actualPlacement = oppositePlacement[actualPlacement] || placement;
+        }
+        else if (actualPlacement === 'left' && rect.left < 0) {
+            actualPlacement = 'right';
+        }
+        else if (actualPlacement === 'right' && rect.right > viewportWidth) {
+            actualPlacement = 'left';
+        }
+    }
+});
+$effect(() => {
+    if (typeof document === 'undefined')
+        return;
+    if (open) {
+        document.addEventListener('click', handleClickOutside);
+        document.addEventListener('keydown', handleEscape);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }
+});
+</script>
+
+<div bind:this={wrapperElement} class="relative inline-block">
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    onclick={toggleOpen}
+    onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleOpen(); } }}
+    aria-haspopup="true"
+    aria-expanded={open}
+    aria-controls={open ? popoverId : undefined}
+    class="inline-block"
+  >
+    {@render trigger?.()}
+  </div>
+
+  {#if open}
+    <div
+      bind:this={popoverElement}
+      id={popoverId}
+      class="absolute {placementClasses[actualPlacement]} z-[var(--z-50)] panel-floating rounded-[var(--radius-lg)] shadow-deep p-4 animate-[fade-up_0.2s_var(--ease-luxe)]"
+      role="dialog"
+    >
+      {@render children?.()}
+    </div>
+  {/if}
+</div>

package/dist/components/overlays/Popover.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+    closeOnClickOutside?: boolean;
+    trigger?: Snippet;
+    children?: Snippet;
+}
+declare const Popover: import("svelte").Component<Props, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/overlays/ProgressBar.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">"use strict";
+let { value, max = 100, size = 'md', showLabel = false, label } = $props();
+const percentage = $derived(Math.min(100, Math.max(0, (value / max) * 100)));
+const heightClasses = {
+    sm: 'h-2',
+    md: 'h-3',
+    lg: 'h-4'
+};
+</script>
+
+<div
+  class="relative bg-[var(--color-base-3)] border border-[var(--color-border)] rounded-[var(--radius-pill)] overflow-hidden shadow-[var(--shadow-deep)] {heightClasses[size]}"
+  role="progressbar"
+  aria-valuenow={value}
+  aria-valuemin="0"
+  aria-valuemax={max}
+  aria-label={label || `${percentage.toFixed(0)}% complete`}
+>
+  <div
+    class="h-full bg-[var(--color-accent)] accent-glow transition-all duration-500 ease-[var(--ease-luxe)]"
+    style="width: {percentage}%"
+  />
+
+  {#if showLabel}
+    <div class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-[var(--color-text)] text-glow">
+      {label || `${percentage.toFixed(0)}%`}
+    </div>
+  {/if}
+</div>

package/dist/components/overlays/ProgressBar.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    value: number;
+    max?: number;
+    size?: 'sm' | 'md' | 'lg';
+    showLabel?: boolean;
+    label?: string;
+}
+declare const ProgressBar: import("svelte").Component<Props, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/components/overlays/SkeletonLoader.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">"use strict";
+let { variant = 'rectangular', width, height, count = 1 } = $props();
+const defaultDimensions = {
+    text: { width: '100%', height: '1rem' },
+    circular: { width: '3rem', height: '3rem' },
+    rectangular: { width: '100%', height: '8rem' }
+};
+const roundingClasses = {
+    text: 'rounded-[var(--radius-sm)]',
+    circular: 'rounded-[var(--radius-pill)]',
+    rectangular: 'rounded-[var(--radius-lg)]'
+};
+const finalWidth = width || defaultDimensions[variant].width;
+const finalHeight = height || defaultDimensions[variant].height;
+</script>
+
+<div
+  aria-busy="true"
+  aria-live="polite"
+  aria-label="Loading content"
+>
+  {#if variant === 'text'}
+    {#each Array(count) as _, i}
+      <div
+        class="bg-[var(--color-base-3)] border border-[var(--color-border)] {roundingClasses[variant]} mb-2 skeleton-shimmer"
+        style="width: {i === count - 1 ? '80%' : finalWidth}; height: {finalHeight};"
+      />
+    {/each}
+  {:else}
+    <div
+      class="bg-[var(--color-base-3)] border border-[var(--color-border)] {roundingClasses[variant]} skeleton-shimmer"
+      style="width: {finalWidth}; height: {finalHeight};"
+    />
+  {/if}
+</div>
+
+<style>
+  .skeleton-shimmer {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .skeleton-shimmer::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--color-accent-overlay-10),
+      transparent
+    );
+    animation: shimmer 1.5s ease-in-out infinite;
+  }
+
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }</style>

package/dist/components/overlays/SkeletonLoader.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    variant?: 'text' | 'circular' | 'rectangular';
+    width?: string;
+    height?: string;
+    count?: number;
+}
+declare const SkeletonLoader: import("svelte").Component<Props, {}, "">;
+type SkeletonLoader = ReturnType<typeof SkeletonLoader>;
+export default SkeletonLoader;

package/dist/components/overlays/Spinner.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">"use strict";
+let { size = 'md', label } = $props();
+const sizeClasses = {
+    sm: 'w-4 h-4 border-2',
+    md: 'w-8 h-8 border-4',
+    lg: 'w-12 h-12 border-4'
+};
+</script>
+
+<div
+  class="inline-flex items-center justify-center"
+  role="status"
+  aria-live="polite"
+  aria-label={label || 'Loading'}
+>
+  <div
+    class="{sizeClasses[size]} border-[var(--color-base-3)] border-t-[var(--color-accent)] rounded-[var(--radius-pill)] accent-glow animate-spin"
+  />
+  <span class="sr-only">{label || 'Loading'}</span>
+</div>
+
+<style>
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }</style>

package/dist/components/overlays/Spinner.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+}
+declare const Spinner: import("svelte").Component<Props, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/components/overlays/Toast.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">"use strict";
+let { message, variant = 'info', duration = 3000, position = 'bottom-right', dismissible = true, onClose, onclose, index = 0, icon } = $props();
+const onCloseCallback = $derived(onClose ?? onclose);
+let visible = $state(true);
+let isExiting = $state(false);
+const positionClasses = {
+    'top-left': 'top-4 left-4',
+    'top-center': 'top-4 left-1/2 -translate-x-1/2',
+    'top-right': 'top-4 right-4',
+    'bottom-left': 'bottom-4 left-4',
+    'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2',
+    'bottom-right': 'bottom-4 right-4'
+};
+const variantBorderClasses = {
+    info: 'border-l-4 border-[var(--color-accent)]',
+    success: 'border-l-4 border-[var(--color-success)]',
+    warning: 'border-l-4 border-[var(--color-warning)]',
+    error: 'border-l-4 border-[var(--color-error)]'
+};
+const variantIconClasses = {
+    info: 'text-[var(--color-accent-soft)]',
+    success: 'text-[var(--color-success)]',
+    warning: 'text-[var(--color-warning)]',
+    error: 'text-[var(--color-error)]'
+};
+const variantIcons = {
+    info: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+    success: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
+    warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
+    error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z'
+};
+const roleMap = {
+    info: 'status',
+    success: 'status',
+    warning: 'alert',
+    error: 'alert'
+};
+const ariaLiveMap = {
+    info: 'polite',
+    success: 'polite',
+    warning: 'polite',
+    error: 'assertive'
+};
+const animationClasses = $derived(position.startsWith('bottom')
+    ? 'animate-[fade-up_0.3s_var(--ease-luxe)]'
+    : 'animate-[fade-in_0.3s_var(--ease-luxe)]');
+const stackOffset = $derived(position.startsWith('bottom')
+    ? `translateY(-${index * 5}rem)`
+    : `translateY(${index * 5}rem)`);
+function handleClose() {
+    if (isExiting || !visible)
+        return; // Prevent double-close
+    isExiting = true;
+    setTimeout(() => {
+        visible = false;
+        onCloseCallback?.();
+    }, 200); // Match fade-out animation duration
+}
+$effect(() => {
+    // Only auto-dismiss if toast is visible and duration is set
+    if (visible && !isExiting && duration > 0) {
+        const timer = setTimeout(() => {
+            handleClose();
+        }, duration);
+        return () => {
+            clearTimeout(timer);
+        };
+    }
+});
+</script>
+
+{#if visible}
+  <div
+    class="fixed z-[100] {positionClasses[position]} {isExiting ? 'animate-[fade-out_0.2s_var(--ease-sharp)]' : animationClasses}"
+    style="transform: {stackOffset}"
+  >
+    <div
+      class="panel-floating rounded-[var(--radius-lg)] p-4 min-w-[20rem] max-w-md flex gap-3 items-start {variantBorderClasses[variant]}"
+      role={roleMap[variant]}
+      aria-live={ariaLiveMap[variant]}
+      aria-atomic="true"
+    >
+      <div class="flex-shrink-0 {variantIconClasses[variant]}">
+        {#if icon}
+          {@render icon()}
+        {:else}
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={variantIcons[variant]} />
+          </svg>
+        {/if}
+      </div>
+
+      <div class="flex-1 text-sm text-[var(--color-text)]">
+        {message}
+      </div>
+
+      {#if dismissible}
+        <button
+          type="button"
+          onclick={handleClose}
+          class="flex-shrink-0 text-[var(--color-text-soft)] hover:text-[var(--color-text)] transition-colors"
+          aria-label="Dismiss notification"
+        >
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/components/overlays/Toast.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    message: string;
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    duration?: number;
+    position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+    dismissible?: boolean;
+    onClose?: () => void;
+    /** @deprecated Use onClose */
+    onclose?: () => void;
+    /** Index in toast stack for vertical offset. Pass the toast's position in a list to enable stacking. */
+    index?: number;
+    icon?: import('svelte').Snippet;
+}
+declare const Toast: import("svelte").Component<Props, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/components/overlays/Tooltip.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">import { createId } from '../../lib/internal/id.js';
+let { content, placement = 'top', delay = 200, trigger, children, class: className = '' } = $props();
+// Use children as fallback if trigger not provided
+const renderedTrigger = $derived(trigger ?? children);
+let visible = $state(false);
+let actualPlacement = $state(placement);
+let tooltipElement = $state();
+let timeoutId;
+const tooltipId = createId('tooltip');
+const placementClasses = {
+    top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+    bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+    left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+    right: 'left-full top-1/2 -translate-y-1/2 ml-2'
+};
+const oppositePlacement = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left'
+};
+function handleMouseEnter() {
+    if (typeof window === 'undefined')
+        return;
+    timeoutId = window.setTimeout(() => {
+        visible = true;
+    }, delay);
+}
+function handleMouseLeave() {
+    if (timeoutId) {
+        clearTimeout(timeoutId);
+    }
+    visible = false;
+}
+function handleFocus() {
+    handleMouseEnter();
+}
+function handleBlur() {
+    handleMouseLeave();
+}
+// Reset actualPlacement when visibility changes
+$effect(() => {
+    if (!visible) {
+        actualPlacement = placement;
+    }
+});
+// Check viewport bounds and flip placement if needed
+$effect(() => {
+    if (typeof window === 'undefined')
+        return;
+    if (visible && tooltipElement) {
+        const rect = tooltipElement.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        // Determine if current placement overflows and flip if needed
+        if (actualPlacement === 'top' && rect.top < 0 && actualPlacement !== oppositePlacement[placement]) {
+            actualPlacement = 'bottom';
+        }
+        else if (actualPlacement === 'bottom' && rect.bottom > viewportHeight && actualPlacement !== oppositePlacement[placement]) {
+            actualPlacement = 'top';
+        }
+        else if (actualPlacement === 'left' && rect.left < 0 && actualPlacement !== oppositePlacement[placement]) {
+            actualPlacement = 'right';
+        }
+        else if (actualPlacement === 'right' && rect.right > viewportWidth && actualPlacement !== oppositePlacement[placement]) {
+            actualPlacement = 'left';
+        }
+    }
+});
+</script>
+
+<div class="relative inline-block">
+  <div
+    aria-describedby={tooltipId}
+    onmouseenter={handleMouseEnter}
+    onmouseleave={handleMouseLeave}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+    role="presentation"
+    class="contents"
+  >
+    {@render renderedTrigger?.()}
+  </div>
+
+  <div
+    bind:this={tooltipElement}
+    id={tooltipId}
+    role="tooltip"
+    aria-hidden={visible ? 'false' : 'true'}
+    class="absolute {placementClasses[actualPlacement]} z-[var(--z-50)] panel-floating rounded-[var(--radius-md)] px-4 py-2.5 text-sm text-text whitespace-nowrap pointer-events-none {className} {visible ? 'animate-[fade-in_0.15s_var(--ease-luxe)] opacity-100' : 'opacity-0 invisible'}"
+  >
+    {content}
+  </div>
+</div>

package/dist/components/overlays/Tooltip.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    content: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+    trigger?: Snippet;
+    children?: Snippet;
+    class?: string;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

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

@@ -0,0 +1,11 @@
+export { default as Modal } from './Modal.svelte';
+export { default as Alert } from './Alert.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as ProgressBar } from './ProgressBar.svelte';
+export { default as SkeletonLoader } from './SkeletonLoader.svelte';
+export { default as Toast } from './Toast.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as CommandPalette } from './CommandPalette.svelte';