@getmicdrop/svelte-components 5.6.0 → 5.6.1

package/dist/primitives/Toggle.svelte

@@ -1,71 +1,70 @@
-<script>
-  /**
-   * Toggle Component - Flowbite Native
-   * Migrated to Svelte 5 runes
-   */
-
-  /** @type {{
-    checked?: boolean,
-    disabled?: boolean,
-    size?: 'sm' | 'md' | 'lg',
-    class?: string,
-    onchange?: (detail: { checked: boolean }) => void,
-    children?: any,
-    [key: string]: any
-  }} */
-  let {
-    checked = $bindable(false),
-    disabled = false,
-    size = 'md',
-    class: className = '',
-    onchange,
-    children,
-    ...restProps
-  } = $props();
-
-  function handleChange(event) {
-    checked = event.target.checked;
-    onchange?.({ checked });
-  }
-
-  // Flowbite toggle sizes - thumb uses after: pseudo-element
-  const sizes = {
-    sm: {
-      track: 'w-9 h-5',
-      thumb: 'after:h-4 after:w-4 after:top-0.5 after:start-0.5',
-      translate: 'peer-checked:after:translate-x-full'
-    },
-    md: {
-      track: 'w-11 h-6',
-      thumb: 'after:h-5 after:w-5 after:top-0.5 after:start-0.5',
-      translate: 'peer-checked:after:translate-x-full'
-    },
-    lg: {
-      track: 'w-14 h-7',
-      thumb: 'after:h-6 after:w-6 after:top-0.5 after:start-0.5',
-      translate: 'peer-checked:after:translate-x-full'
-    }
-  };
-
-  let sizeConfig = $derived(sizes[size] || sizes.md);
-</script>
-
-<label class="inline-flex items-center {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}" {...restProps}>
-  <input
-    type="checkbox"
-    bind:checked
-    {disabled}
-    onchange={handleChange}
-    class="sr-only peer"
-  />
-  <div
-    class="relative {sizeConfig.track} bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute {sizeConfig.thumb} after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
-    role="switch"
-    aria-checked={checked}
-  ></div>
-  {#if children}
-    <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
-      {#if typeof children === 'function'}{@render children()}{:else}{children}{/if}
-    </span>
-  {/if}
-</label>
+<script>
+  /**
+   * Toggle Component - Flowbite Native
+   * Migrated to Svelte 5 runes
+   */
+
+  /** @type {{
+    checked?: boolean,
+    disabled?: boolean,
+    size?: 'sm' | 'md' | 'lg',
+    class?: string,
+    onchange?: (detail: { checked: boolean }) => void,
+    children?: import('svelte').Snippet,
+  }} */
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    size = 'md',
+    class: className = '',
+    onchange,
+    children,
+    ...restProps
+  } = $props();
+
+  function handleChange(event) {
+    checked = event.target.checked;
+    onchange?.({ checked });
+  }
+
+  // Flowbite toggle sizes - thumb uses after: pseudo-element
+  const sizes = {
+    sm: {
+      track: 'w-9 h-5',
+      thumb: 'after:h-4 after:w-4 after:top-0.5 after:start-0.5',
+      translate: 'peer-checked:after:translate-x-full'
+    },
+    md: {
+      track: 'w-11 h-6',
+      thumb: 'after:h-5 after:w-5 after:top-0.5 after:start-0.5',
+      translate: 'peer-checked:after:translate-x-full'
+    },
+    lg: {
+      track: 'w-14 h-7',
+      thumb: 'after:h-6 after:w-6 after:top-0.5 after:start-0.5',
+      translate: 'peer-checked:after:translate-x-full'
+    }
+  };
+
+  let sizeConfig = $derived(sizes[size] || sizes.md);
+</script>
+
+<label class="inline-flex items-center {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}" {...restProps}>
+  <input
+    type="checkbox"
+    bind:checked
+    {disabled}
+    onchange={handleChange}
+    class="sr-only peer"
+  />
+  <div
+    class="relative {sizeConfig.track} bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute {sizeConfig.thumb} after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+    role="switch"
+    aria-checked={checked}
+  ></div>
+  {#if children}
+    <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+      {#if typeof children === 'function'}{@render children()}{:else}{children}{/if}
+    </span>
+  {/if}
+</label>

package/dist/primitives/Toggle.svelte.d.ts

@@ -2,7 +2,6 @@ export default Toggle;
 type Toggle = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<{
-        [key: string]: any;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
         size?: "sm" | "md" | "lg" | undefined;
@@ -10,11 +9,10 @@ type Toggle = {
         onchange?: ((detail: {
             checked: boolean;
         }) => void) | undefined;
-        children?: any;
+        children?: Snippet<[]> | undefined;
     }>): void;
 };
 declare const Toggle: import("svelte").Component<{
-    [key: string]: any;
     checked?: boolean;
     disabled?: boolean;
     size?: "sm" | "md" | "lg";
@@ -22,6 +20,6 @@ declare const Toggle: import("svelte").Component<{
     onchange?: (detail: {
         checked: boolean;
     }) => void;
-    children?: any;
+    children?: import("svelte").Snippet;
 }, {}, "checked">;
 //# sourceMappingURL=Toggle.svelte.d.ts.map

package/dist/primitives/Toggle.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/Toggle.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AA2EA;;cARc,OAAO;eACN,OAAO;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;YACjB,MAAM;eACH,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;eACtC,GAAG;kBAGmC"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/Toggle.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAyEA;cAPc,OAAO;eACN,OAAO;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;YACjB,MAAM;eACH,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;eACtC,OAAO,QAAQ,EAAE,OAAO;kBAEc"}

package/dist/primitives/Tooltip/Tooltip.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  /**
+   * Tooltip Component - Native implementation
+   *
+   * Displays a tooltip on hover/focus with configurable placement
+   */
+  import { fly } from 'svelte/transition';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Tooltip content text */
+    content: string;
+    /** Placement relative to trigger */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** Additional CSS classes for the tooltip */
+    class?: string;
+    /** Child content (trigger element) */
+    children?: Snippet;
+  }
+
+  let {
+    content,
+    placement = 'top',
+    class: className = '',
+    children
+  }: Props = $props();
+
+  let visible = $state(false);
+
+  // Placement-specific classes
+  const placementClasses: Record<string, string> = {
+    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'
+  };
+
+  // Arrow placement classes
+  const arrowClasses: Record<string, string> = {
+    top: 'top-full left-1/2 -translate-x-1/2 border-t-gray-900 dark:border-t-gray-700 border-l-transparent border-r-transparent border-b-transparent',
+    bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-gray-900 dark:border-b-gray-700 border-l-transparent border-r-transparent border-t-transparent',
+    left: 'left-full top-1/2 -translate-y-1/2 border-l-gray-900 dark:border-l-gray-700 border-t-transparent border-b-transparent border-r-transparent',
+    right: 'right-full top-1/2 -translate-y-1/2 border-r-gray-900 dark:border-r-gray-700 border-t-transparent border-b-transparent border-l-transparent'
+  };
+
+  function handleMouseEnter() {
+    visible = true;
+  }
+
+  function handleMouseLeave() {
+    visible = false;
+  }
+
+  function handleFocus() {
+    visible = true;
+  }
+
+  function handleBlur() {
+    visible = false;
+  }
+</script>
+
+<div
+  class="relative inline-block"
+  onmouseenter={handleMouseEnter}
+  onmouseleave={handleMouseLeave}
+  onfocus={handleFocus}
+  onblur={handleBlur}
+  role="tooltip"
+>
+  {#if children}{@render children()}{/if}
+
+  {#if visible && content}
+    <div
+      class="absolute z-50 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow-sm whitespace-nowrap pointer-events-none dark:bg-gray-700 {placementClasses[placement]} {className}"
+      transition:fly={{ y: placement === 'top' ? 5 : placement === 'bottom' ? -5 : 0, x: placement === 'left' ? 5 : placement === 'right' ? -5 : 0, duration: 150 }}
+    >
+      {content}
+      <!-- Arrow -->
+      <div class="absolute w-0 h-0 border-4 {arrowClasses[placement]}"></div>
+    </div>
+  {/if}
+</div>

package/dist/primitives/Tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Tooltip content text */
+    content: string;
+    /** Placement relative to trigger */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** Additional CSS classes for the tooltip */
+    class?: string;
+    /** Child content (trigger element) */
+    children?: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;
+//# sourceMappingURL=Tooltip.svelte.d.ts.map

package/dist/primitives/Tooltip/Tooltip.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,2BAA2B;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+DH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/primitives/index.d.ts

@@ -13,6 +13,8 @@ export { default as DarkModeToggle } from "./DarkModeToggle.svelte";
 export { default as Drawer } from "./Drawer/Drawer.svelte";
 export { default as Dropdown } from "./Dropdown/Dropdown.svelte";
 export { default as DropdownItem } from "./Dropdown/DropdownItem.svelte";
+export { default as DropdownDivider } from "./Dropdown/DropdownDivider.svelte";
+export { default as Helper } from "./Helper/Helper.svelte";
 export * from "./Icons/index.js";
 export * from "./Skeleton/index.js";
 export { default as Input } from "./Input/Input.svelte";
@@ -27,6 +29,7 @@ export { default as Spinner } from "./Spinner/Spinner.svelte";
 export { default as Tabs } from "./Tabs/Tabs.svelte";
 export { default as TabItem } from "./Tabs/TabItem.svelte";
 export { default as Toggle } from "./Toggle.svelte";
+export { default as Tooltip } from "./Tooltip/Tooltip.svelte";
 export { default as Typography } from "./Typography/Typography.svelte";
 export { default as ValidationError } from "./ValidationError.svelte";
 //# sourceMappingURL=index.d.ts.map

package/dist/primitives/index.js

@@ -40,6 +40,10 @@ export { default as Drawer } from './Drawer/Drawer.svelte';
 // Dropdown
 export { default as Dropdown } from './Dropdown/Dropdown.svelte';
 export { default as DropdownItem } from './Dropdown/DropdownItem.svelte';
+export { default as DropdownDivider } from './Dropdown/DropdownDivider.svelte';
+
+// Helper
+export { default as Helper } from './Helper/Helper.svelte';
 
 // Icons - re-export from Icons/index.js
 export * from './Icons/index.js';
@@ -77,6 +81,9 @@ export { default as TabItem } from './Tabs/TabItem.svelte';
 // Toggle
 export { default as Toggle } from './Toggle.svelte';
 
+// Tooltip
+export { default as Tooltip } from './Tooltip/Tooltip.svelte';
+
 // Typography
 export { default as Typography } from './Typography/Typography.svelte';
 

package/dist/recipes/ImageUploader/ImageUploader.spec.js

@@ -3,14 +3,15 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import ImageUploader from './ImageUploader.svelte';
 
-// Mock Sortable.js
+// Mock Sortable.js - Vitest 4.x requires class syntax for constructor mocks
 const mockSortableDestroy = vi.fn();
-const mockSortableInstance = {
-  destroy: mockSortableDestroy,
-};
 
 vi.mock('sortablejs', () => ({
-  default: vi.fn(() => mockSortableInstance),
+  default: class MockSortable {
+    constructor() {
+      this.destroy = mockSortableDestroy;
+    }
+  },
 }));
 
 // Helper to create a mock file