@getmicdrop/svelte-components 5.5.5 → 5.6.1

package/dist/primitives/Toggle.stories.svelte

@@ -1,92 +1,92 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import Toggle from './Toggle.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/Toggle',
-    component: Toggle,
-    tags: ['autodocs'],
-    argTypes: {
-      checked: { control: 'boolean' },
-      disabled: { control: 'boolean' },
-    },
-  });
-
-</script>
-
-<script>
-  
-  let toggleState = false;
-  let disabledToggle = true;
-</script>
-
-
-<Story
-  name="Default (Unchecked)"
-  args={{
-    checked: false,
-    disabled: false,
-  }}
-/>
-
-<Story
-  name="Checked"
-  args={{
-    checked: true,
-    disabled: false,
-  }}
-/>
-
-<Story
-  name="Disabled Unchecked"
-  args={{
-    checked: false,
-    disabled: true,
-  }}
-/>
-
-<Story
-  name="Disabled Checked"
-  args={{
-    checked: true,
-    disabled: true,
-  }}
-/>
-
-<Story name="Interactive">
-  <div class="space-y-4">
-    <div class="flex items-center gap-3">
-      <Toggle bind:checked={toggleState} />
-      <span class="text-sm">State: {toggleState ? 'On' : 'Off'}</span>
-    </div>
-  </div>
-</Story>
-
-<Story name="Settings List">
-  <div class="max-w-md space-y-4">
-    <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-900 rounded-lg border">
-      <div>
-        <div class="font-medium">Email Notifications</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Receive updates via email</div>
-      </div>
-      <Toggle bind:checked={toggleState} />
-    </div>
-
-    <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-900 rounded-lg border">
-      <div>
-        <div class="font-medium">Dark Mode</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Use dark color scheme</div>
-      </div>
-      <Toggle checked={false} />
-    </div>
-
-    <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border">
-      <div>
-        <div class="font-medium text-gray-500 dark:text-gray-400">Premium Feature</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Requires subscription</div>
-      </div>
-      <Toggle disabled={true} checked={false} />
-    </div>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import Toggle from './Toggle.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Toggle',
+    component: Toggle,
+    tags: ['autodocs'],
+    argTypes: {
+      checked: { control: 'boolean' },
+      disabled: { control: 'boolean' },
+    },
+  });
+
+</script>
+
+<script>
+  
+  let toggleState = false;
+  let disabledToggle = true;
+</script>
+
+
+<Story
+  name="Default (Unchecked)"
+  args={{
+    checked: false,
+    disabled: false,
+  }}
+/>
+
+<Story
+  name="Checked"
+  args={{
+    checked: true,
+    disabled: false,
+  }}
+/>
+
+<Story
+  name="Disabled Unchecked"
+  args={{
+    checked: false,
+    disabled: true,
+  }}
+/>
+
+<Story
+  name="Disabled Checked"
+  args={{
+    checked: true,
+    disabled: true,
+  }}
+/>
+
+<Story name="Interactive">
+  <div class="space-y-4">
+    <div class="flex items-center gap-3">
+      <Toggle bind:checked={toggleState} />
+      <span class="text-sm">State: {toggleState ? 'On' : 'Off'}</span>
+    </div>
+  </div>
+</Story>
+
+<Story name="Settings List">
+  <div class="max-w-md space-y-4">
+    <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-900 rounded-lg border">
+      <div>
+        <div class="font-medium">Email Notifications</div>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Receive updates via email</div>
+      </div>
+      <Toggle bind:checked={toggleState} />
+    </div>
+
+    <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-900 rounded-lg border">
+      <div>
+        <div class="font-medium">Dark Mode</div>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Use dark color scheme</div>
+      </div>
+      <Toggle checked={false} />
+    </div>
+
+    <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border">
+      <div>
+        <div class="font-medium text-gray-500 dark:text-gray-400">Premium Feature</div>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Requires subscription</div>
+      </div>
+      <Toggle disabled={true} checked={false} />
+    </div>
+  </div>
+</Story>

package/dist/primitives/Toggle.svelte

@@ -10,8 +10,7 @@
     size?: 'sm' | 'md' | 'lg',
     class?: string,
     onchange?: (detail: { checked: boolean }) => void,
-    children?: any,
-    [key: string]: any
+    children?: import('svelte').Snippet,
   }} */
   let {
     checked = $bindable(false),

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/Typography/Typography.svelte

@@ -1,53 +1,53 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import type { HTMLAttributes } from 'svelte/elements';
-
-  interface Props extends HTMLAttributes<HTMLElement> {
-    /** The semantic element to render */
-    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
-    /** Font weight variant */
-    weight?: 'bold' | 'semibold' | 'medium' | 'regular';
-    /** Additional CSS classes */
-    class?: string;
-    /** Text content (alternative to children) */
-    text?: string;
-    /** Child content */
-    children?: Snippet;
-  }
-
-  let {
-    variant = 'p',
-    weight = 'regular',
-    class: className = '',
-    text = '',
-    children,
-    ...restProps
-  }: Props = $props();
-
-  const sizeMap: Record<string, string> = {
-    h1: 'text-3xl',
-    h2: 'text-2xl',
-    h3: 'text-xl',
-    h4: 'text-lg',
-    h5: 'text-base',
-    h6: 'text-xs',
-    p: 'text-sm',
-  };
-
-  const weightMap: Record<string, string> = {
-    bold: 'font-bold',
-    semibold: 'font-semibold',
-    medium: 'font-medium',
-    regular: 'font-normal',
-  };
-
-  let computedClass = $derived(`${sizeMap[variant]} ${weightMap[weight]} ${className}`.trim());
-</script>
-
-<svelte:element this={variant} class={computedClass} {...restProps}>
-  {#if text}
-    {text}
-  {:else}
-    {@render children?.()}
-  {/if}
-</svelte:element>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    /** The semantic element to render */
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+    /** Font weight variant */
+    weight?: 'bold' | 'semibold' | 'medium' | 'regular';
+    /** Additional CSS classes */
+    class?: string;
+    /** Text content (alternative to children) */
+    text?: string;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'p',
+    weight = 'regular',
+    class: className = '',
+    text = '',
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const sizeMap: Record<string, string> = {
+    h1: 'text-3xl',
+    h2: 'text-2xl',
+    h3: 'text-xl',
+    h4: 'text-lg',
+    h5: 'text-base',
+    h6: 'text-xs',
+    p: 'text-sm',
+  };
+
+  const weightMap: Record<string, string> = {
+    bold: 'font-bold',
+    semibold: 'font-semibold',
+    medium: 'font-medium',
+    regular: 'font-normal',
+  };
+
+  let computedClass = $derived(`${sizeMap[variant]} ${weightMap[weight]} ${className}`.trim());
+</script>
+
+<svelte:element this={variant} class={computedClass} {...restProps}>
+  {#if text}
+    {text}
+  {:else}
+    {@render children?.()}
+  {/if}
+</svelte:element>

package/dist/primitives/ValidationError.spec.js

@@ -1,103 +1,103 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/svelte';
-import ValidationError from './ValidationError.svelte';
-
-describe('ValidationError Component', () => {
-  it('renders error message when error prop is provided', () => {
-    const { container, getByText } = render(ValidationError, {
-      props: { error: 'This field is required' },
-    });
-    expect(getByText('This field is required')).toBeTruthy();
-  });
-
-  it('does not render when error is empty', () => {
-    const { container } = render(ValidationError, {
-      props: { error: '' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('does not render when show is false', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message', show: false },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeFalsy();
-  });
-
-  it('has role="alert" attribute', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeTruthy();
-  });
-
-  it('has red text styling', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.classList.contains('text-red-600')).toBe(true);
-  });
-
-  it('renders WarningIcon', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    // The WarningIcon should render an SVG
-    const svg = container.querySelector('svg');
-    expect(svg).toBeTruthy();
-  });
-
-  it('renders error text in a paragraph', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Custom error text' },
-    });
-    const paragraph = container.querySelector('p');
-    expect(paragraph).toBeTruthy();
-    expect(paragraph.textContent).toBe('Custom error text');
-  });
-
-  it('shows when show is true and error exists', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message', show: true },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert).toBeTruthy();
-  });
-
-  it('renders with flex layout', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.classList.contains('flex')).toBe(true);
-    expect(alert.classList.contains('items-start')).toBe(true);
-  });
-
-  it('has aria-live="assertive" for screen reader announcements', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.getAttribute('aria-live')).toBe('assertive');
-  });
-
-  it('renders with id when provided', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message', id: 'my-error-id' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.getAttribute('id')).toBe('my-error-id');
-  });
-
-  it('does not render id when not provided', () => {
-    const { container } = render(ValidationError, {
-      props: { error: 'Error message' },
-    });
-    const alert = container.querySelector('[role="alert"]');
-    expect(alert.getAttribute('id')).toBeFalsy();
-  });
-});
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import ValidationError from './ValidationError.svelte';
+
+describe('ValidationError Component', () => {
+  it('renders error message when error prop is provided', () => {
+    const { container, getByText } = render(ValidationError, {
+      props: { error: 'This field is required' },
+    });
+    expect(getByText('This field is required')).toBeTruthy();
+  });
+
+  it('does not render when error is empty', () => {
+    const { container } = render(ValidationError, {
+      props: { error: '' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('does not render when show is false', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message', show: false },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeFalsy();
+  });
+
+  it('has role="alert" attribute', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeTruthy();
+  });
+
+  it('has red text styling', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.classList.contains('text-red-600')).toBe(true);
+  });
+
+  it('renders WarningIcon', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    // The WarningIcon should render an SVG
+    const svg = container.querySelector('svg');
+    expect(svg).toBeTruthy();
+  });
+
+  it('renders error text in a paragraph', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Custom error text' },
+    });
+    const paragraph = container.querySelector('p');
+    expect(paragraph).toBeTruthy();
+    expect(paragraph.textContent).toBe('Custom error text');
+  });
+
+  it('shows when show is true and error exists', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message', show: true },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert).toBeTruthy();
+  });
+
+  it('renders with flex layout', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.classList.contains('flex')).toBe(true);
+    expect(alert.classList.contains('items-start')).toBe(true);
+  });
+
+  it('has aria-live="assertive" for screen reader announcements', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.getAttribute('aria-live')).toBe('assertive');
+  });
+
+  it('renders with id when provided', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message', id: 'my-error-id' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.getAttribute('id')).toBe('my-error-id');
+  });
+
+  it('does not render id when not provided', () => {
+    const { container } = render(ValidationError, {
+      props: { error: 'Error message' },
+    });
+    const alert = container.querySelector('[role="alert"]');
+    expect(alert.getAttribute('id')).toBeFalsy();
+  });
+});