@getmicdrop/svelte-components 5.5.4 → 5.6.0

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

@@ -1,71 +1,71 @@
-<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?: 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>

package/dist/primitives/Typography/Typography.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Typography.spec.d.ts.map

package/dist/primitives/Typography/Typography.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Typography/Typography.spec.js"],"names":[],"mappings":""}

package/dist/primitives/Typography/Typography.spec.js

@@ -0,0 +1,183 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import Typography from './Typography.svelte';
+
+describe('Typography Component', () => {
+  test('renders a p element by default', () => {
+    const { container } = render(Typography);
+    expect(container.querySelector('p')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Typography, { props: { class: 'custom-text' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('custom-text');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(Typography, { props: { 'data-testid': 'my-text' } });
+    const element = container.querySelector('[data-testid="my-text"]');
+    expect(element).toBeInTheDocument();
+  });
+});
+
+describe('Typography Variants', () => {
+  test('h1 variant renders h1 element', () => {
+    const { container } = render(Typography, { props: { variant: 'h1' } });
+    expect(container.querySelector('h1')).toBeInTheDocument();
+  });
+
+  test('h2 variant renders h2 element', () => {
+    const { container } = render(Typography, { props: { variant: 'h2' } });
+    expect(container.querySelector('h2')).toBeInTheDocument();
+  });
+
+  test('h3 variant renders h3 element', () => {
+    const { container } = render(Typography, { props: { variant: 'h3' } });
+    expect(container.querySelector('h3')).toBeInTheDocument();
+  });
+
+  test('h4 variant renders h4 element', () => {
+    const { container } = render(Typography, { props: { variant: 'h4' } });
+    expect(container.querySelector('h4')).toBeInTheDocument();
+  });
+
+  test('h5 variant renders h5 element', () => {
+    const { container } = render(Typography, { props: { variant: 'h5' } });
+    expect(container.querySelector('h5')).toBeInTheDocument();
+  });
+
+  test('h6 variant renders h6 element', () => {
+    const { container } = render(Typography, { props: { variant: 'h6' } });
+    expect(container.querySelector('h6')).toBeInTheDocument();
+  });
+
+  test('p variant renders p element', () => {
+    const { container } = render(Typography, { props: { variant: 'p' } });
+    expect(container.querySelector('p')).toBeInTheDocument();
+  });
+});
+
+describe('Typography Size Classes', () => {
+  test('h1 has text-3xl', () => {
+    const { container } = render(Typography, { props: { variant: 'h1' } });
+    const h1 = container.querySelector('h1');
+    expect(h1).toHaveClass('text-3xl');
+  });
+
+  test('h2 has text-2xl', () => {
+    const { container } = render(Typography, { props: { variant: 'h2' } });
+    const h2 = container.querySelector('h2');
+    expect(h2).toHaveClass('text-2xl');
+  });
+
+  test('h3 has text-xl', () => {
+    const { container } = render(Typography, { props: { variant: 'h3' } });
+    const h3 = container.querySelector('h3');
+    expect(h3).toHaveClass('text-xl');
+  });
+
+  test('h4 has text-lg', () => {
+    const { container } = render(Typography, { props: { variant: 'h4' } });
+    const h4 = container.querySelector('h4');
+    expect(h4).toHaveClass('text-lg');
+  });
+
+  test('h5 has text-base', () => {
+    const { container } = render(Typography, { props: { variant: 'h5' } });
+    const h5 = container.querySelector('h5');
+    expect(h5).toHaveClass('text-base');
+  });
+
+  test('h6 has text-xs', () => {
+    const { container } = render(Typography, { props: { variant: 'h6' } });
+    const h6 = container.querySelector('h6');
+    expect(h6).toHaveClass('text-xs');
+  });
+
+  test('p has text-sm', () => {
+    const { container } = render(Typography);
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('text-sm');
+  });
+});
+
+describe('Typography Weight Classes', () => {
+  test('default weight is regular (font-normal)', () => {
+    const { container } = render(Typography);
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('font-normal');
+  });
+
+  test('bold weight applies font-bold', () => {
+    const { container } = render(Typography, { props: { weight: 'bold' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('font-bold');
+  });
+
+  test('semibold weight applies font-semibold', () => {
+    const { container } = render(Typography, { props: { weight: 'semibold' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('font-semibold');
+  });
+
+  test('medium weight applies font-medium', () => {
+    const { container } = render(Typography, { props: { weight: 'medium' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('font-medium');
+  });
+
+  test('regular weight applies font-normal', () => {
+    const { container } = render(Typography, { props: { weight: 'regular' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('font-normal');
+  });
+});
+
+describe('Typography Text Content', () => {
+  test('renders text prop content', () => {
+    render(Typography, { props: { text: 'Hello World' } });
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
+  });
+
+  test('text prop takes precedence over children', () => {
+    // When text prop is provided, it's rendered
+    const { container } = render(Typography, { props: { text: 'Text Content' } });
+    expect(container.textContent).toBe('Text Content');
+  });
+});
+
+describe('Typography Class Composition', () => {
+  test('combines variant size, weight, and custom class', () => {
+    const { container } = render(Typography, {
+      props: { variant: 'h2', weight: 'bold', class: 'extra-class' }
+    });
+    const h2 = container.querySelector('h2');
+    expect(h2).toHaveClass('text-2xl'); // from variant
+    expect(h2).toHaveClass('font-bold'); // from weight
+    expect(h2).toHaveClass('extra-class'); // from custom class
+  });
+});
+
+describe('Typography with Different Combinations', () => {
+  test('h1 bold', () => {
+    const { container } = render(Typography, { props: { variant: 'h1', weight: 'bold' } });
+    const h1 = container.querySelector('h1');
+    expect(h1).toHaveClass('text-3xl');
+    expect(h1).toHaveClass('font-bold');
+  });
+
+  test('h3 semibold', () => {
+    const { container } = render(Typography, { props: { variant: 'h3', weight: 'semibold' } });
+    const h3 = container.querySelector('h3');
+    expect(h3).toHaveClass('text-xl');
+    expect(h3).toHaveClass('font-semibold');
+  });
+
+  test('p medium', () => {
+    const { container } = render(Typography, { props: { variant: 'p', weight: 'medium' } });
+    const p = container.querySelector('p');
+    expect(p).toHaveClass('text-sm');
+    expect(p).toHaveClass('font-medium');
+  });
+});

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>