@getmicdrop/svelte-components 5.6.0 → 5.7.1

package/dist/primitives/Input/Textarea.stories.svelte

@@ -1,137 +1,137 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Textarea from './Textarea.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Textarea',
-    component: Textarea,
-    tags: ['autodocs'],
-    argTypes: {
-      label: { control: 'text' },
-      placeholder: { control: 'text' },
-      rows: { control: 'number' },
-      disabled: { control: 'boolean' },
-      required: { control: 'boolean' },
-      maxlength: { control: 'number' },
-      errorText: { control: 'text' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Multi-line text input component.',
-        },
-      },
-    },
-  });
-
-  let value = $state('');
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Description"
-        placeholder="Enter your description..."
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Value">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Bio"
-        placeholder="Tell us about yourself..."
-        bind:value={value}
-      />
-      <p class="text-sm text-gray-500 mt-2">{value.length} characters</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Max Length">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Short Bio"
-        placeholder="Keep it brief..."
-        maxlength={200}
-        helperText="Maximum 200 characters"
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Error">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Comments"
-        placeholder="Enter your comments..."
-        errorText="Please provide at least 10 characters"
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Custom Rows">
-  {#snippet template()}
-    <div class="space-y-6 max-w-md">
-      <Textarea
-        label="Small (2 rows)"
-        placeholder="Two rows..."
-        rows={2}
-      />
-      <Textarea
-        label="Medium (4 rows)"
-        placeholder="Four rows..."
-        rows={4}
-      />
-      <Textarea
-        label="Large (8 rows)"
-        placeholder="Eight rows..."
-        rows={8}
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Disabled">
-  {#snippet template()}
-    <div class="max-w-md">
-      <Textarea
-        label="Disabled Textarea"
-        placeholder="Cannot edit this..."
-        disabled
-      />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="All States">
-  {#snippet template()}
-    <div class="grid grid-cols-2 gap-6 max-w-2xl">
-      <Textarea
-        label="Default"
-        placeholder="Enter text..."
-      />
-      <Textarea
-        label="With Error"
-        placeholder="Enter text..."
-        errorText="This field is required"
-      />
-      <Textarea
-        label="Disabled"
-        placeholder="Cannot edit..."
-        disabled
-      />
-      <Textarea
-        label="With Helper"
-        placeholder="Enter text..."
-        helperText="Optional additional information"
-      />
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Textarea from './Textarea.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Textarea',
+    component: Textarea,
+    tags: ['autodocs'],
+    argTypes: {
+      label: { control: 'text' },
+      placeholder: { control: 'text' },
+      rows: { control: 'number' },
+      disabled: { control: 'boolean' },
+      required: { control: 'boolean' },
+      maxlength: { control: 'number' },
+      errorText: { control: 'text' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Multi-line text input component.',
+        },
+      },
+    },
+  });
+
+  let value = $state('');
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Description"
+        placeholder="Enter your description..."
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Value">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Bio"
+        placeholder="Tell us about yourself..."
+        bind:value={value}
+      />
+      <p class="text-sm text-gray-500 mt-2">{value.length} characters</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Max Length">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Short Bio"
+        placeholder="Keep it brief..."
+        maxlength={200}
+        helperText="Maximum 200 characters"
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Error">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Comments"
+        placeholder="Enter your comments..."
+        errorText="Please provide at least 10 characters"
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Custom Rows">
+  {#snippet template()}
+    <div class="space-y-6 max-w-md">
+      <Textarea
+        label="Small (2 rows)"
+        placeholder="Two rows..."
+        rows={2}
+      />
+      <Textarea
+        label="Medium (4 rows)"
+        placeholder="Four rows..."
+        rows={4}
+      />
+      <Textarea
+        label="Large (8 rows)"
+        placeholder="Eight rows..."
+        rows={8}
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Disabled">
+  {#snippet template()}
+    <div class="max-w-md">
+      <Textarea
+        label="Disabled Textarea"
+        placeholder="Cannot edit this..."
+        disabled
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All States">
+  {#snippet template()}
+    <div class="grid grid-cols-2 gap-6 max-w-2xl">
+      <Textarea
+        label="Default"
+        placeholder="Enter text..."
+      />
+      <Textarea
+        label="With Error"
+        placeholder="Enter text..."
+        errorText="This field is required"
+      />
+      <Textarea
+        label="Disabled"
+        placeholder="Cannot edit..."
+        disabled
+      />
+      <Textarea
+        label="With Helper"
+        placeholder="Enter text..."
+        helperText="Optional additional information"
+      />
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Input/Textarea.svelte

@@ -68,38 +68,38 @@
     onfocus?.(event);
   }
 </script>
-
-<div class="flex flex-col gap-2 w-full">
-  {#if label}
-    <label for={id || name} class={`${typography.label} leading-tight`}>
-      {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
-    </label>
-  {/if}
-
-  <textarea
-    {id}
-    {name}
-    {placeholder}
-    {rows}
-    {disabled}
-    {readonly}
-    {maxlength}
-    {minlength}
-    class="{typography.sm} w-full p-2.5 bg-gray-50 dark:bg-gray-800 leading-normal border rounded-lg resize-y transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-500 dark:placeholder-gray-400 {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
-    bind:value
-    oninput={handleInput}
-    onchange={handleChange}
-    onblur={handleBlur}
-    onfocus={handleFocus}
-    {onkeydown}
-    {onkeyup}
-    {onkeypress}
-    aria-required={required}
-    aria-invalid={!!error}
-    {...restProps}
-  ></textarea>
-
-  {#if error}
-    <p class={typography.error}>{error}</p>
-  {/if}
-</div>
+
+<div class="flex flex-col gap-2 w-full">
+  {#if label}
+    <label for={id || name} class={`${typography.label} leading-tight`}>
+      {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
+    </label>
+  {/if}
+
+  <textarea
+    {id}
+    {name}
+    {placeholder}
+    {rows}
+    {disabled}
+    {readonly}
+    {maxlength}
+    {minlength}
+    class="{typography.sm} w-full p-2.5 bg-gray-50 dark:bg-gray-800 leading-normal border rounded-lg resize-y transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-500 dark:placeholder-gray-400 {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
+    bind:value
+    oninput={handleInput}
+    onchange={handleChange}
+    onblur={handleBlur}
+    onfocus={handleFocus}
+    {onkeydown}
+    {onkeyup}
+    {onkeypress}
+    aria-required={required}
+    aria-invalid={!!error}
+    {...restProps}
+  ></textarea>
+
+  {#if error}
+    <p class={typography.error}>{error}</p>
+  {/if}
+</div>

package/dist/primitives/Label/Label.svelte

@@ -1,37 +1,37 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    color?: 'gray' | 'green' | 'red' | 'disabled';
-    defaultClass?: string;
-    show?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    color = "gray",
-    defaultClass = "text-sm rtl:text-right font-medium block",
-    show = true,
-    class: className = "",
-    children,
-    ...restProps
-  }: Props = $props();
-
-  const colorClasses = {
-    gray: "text-gray-900 dark:text-gray-300",
-    green: "text-green-700 dark:text-green-500",
-    red: "text-red-700 dark:text-red-500",
-    disabled: "text-gray-400 dark:text-gray-500"
-  };
-
-  let labelClass = $derived(`${defaultClass} ${colorClasses[color] || colorClasses.gray} ${className}`.trim());
-</script>
-
-{#if show}
-  <!-- svelte-ignore a11y_label_has_associated_control -->
-  <label {...restProps} class={labelClass}>{#if children}{@render children()}{/if}</label>
-{:else}
-  {#if children}{@render children()}{/if}
-{/if}
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    color?: 'gray' | 'green' | 'red' | 'disabled';
+    defaultClass?: string;
+    show?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    color = "gray",
+    defaultClass = "text-sm rtl:text-right font-medium block",
+    show = true,
+    class: className = "",
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const colorClasses = {
+    gray: "text-gray-900 dark:text-gray-300",
+    green: "text-green-700 dark:text-green-500",
+    red: "text-red-700 dark:text-red-500",
+    disabled: "text-gray-400 dark:text-gray-500"
+  };
+
+  let labelClass = $derived(`${defaultClass} ${colorClasses[color] || colorClasses.gray} ${className}`.trim());
+</script>
+
+{#if show}
+  <!-- svelte-ignore a11y_label_has_associated_control -->
+  <label {...restProps} class={labelClass}>{#if children}{@render children()}{/if}</label>
+{:else}
+  {#if children}{@render children()}{/if}
+{/if}

package/dist/primitives/Modal/Modal.spec.js

@@ -1,99 +1,99 @@
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { expect, describe, test, vi } from 'vitest';
-import ModalTestWrapper from './ModalTestWrapper.svelte';
-
-function setupTest(args) {
-  const user = userEvent.setup();
-  const { component, rerender } = render(ModalTestWrapper, { props: { ...args } });
-  return { user, component, rerender };
-}
-
-describe('Modal Component Tests', () => {
-  // Note: Modal renders both mobile sheet and desktop centered versions
-  // CSS hides one based on viewport, but in tests both are in DOM
-  // Use getAllByText and check that at least one exists
-
-  test('Renders Modal when show is true', () => {
-    setupTest({
-      show: true,
-      title: 'Test Title',
-      description: 'Test Description',
-      warningText: 'Test Warning'
-    });
-    // Modal renders both mobile and desktop versions, so use getAllByText
-    expect(screen.getAllByText((content, element) => content.includes('Test Title')).length).toBeGreaterThan(0);
-    expect(screen.getAllByText((content, element) => content.includes('Test Description')).length).toBeGreaterThan(0);
-    expect(screen.getAllByText((content, element) => content.includes('Test Warning')).length).toBeGreaterThan(0);
-    expect(screen.getAllByRole('button', { name: /Cancel/i }).length).toBeGreaterThan(0);
-    expect(screen.getAllByRole('button', { name: /Confirm/i }).length).toBeGreaterThan(0);
-  });
-
-  test('Does not render Modal when show is false', () => {
-    setupTest({
-      show: false,
-      title: 'Test Title',
-      description: 'Test Description',
-      warningText: 'Test Warning'
-    });
-    expect(screen.queryByText('Test Title')).not.toBeInTheDocument();
-    expect(screen.queryByText('Test Description')).not.toBeInTheDocument();
-    expect(screen.queryByText('Test Warning')).not.toBeInTheDocument();
-  });
-
-  test('Displays the correct title, description, and warning text', () => {
-    const title = 'Correct Title';
-    const description = 'Correct Description';
-    const warningText = 'Correct Warning';
-    setupTest({
-      show: true,
-      title,
-      description,
-      warningText,
-    });
-    // Modal renders both mobile and desktop versions
-    expect(screen.getAllByText((content) => content.includes(title)).length).toBeGreaterThan(0);
-    expect(screen.getAllByText((content) => content.includes(description)).length).toBeGreaterThan(0);
-    expect(screen.getAllByText((content) => content.includes(warningText)).length).toBeGreaterThan(0);
-  });
-
-  test('Dispatches cancel event on escape key press', async () => {
-    // Create a mock function to track cancel calls
-    const oncancel = vi.fn();
-
-    const { user } = setupTest({
-      show: true,
-      title: 'Test Title',
-      oncancel
-    });
-
-    // Verify modal is open
-    expect(screen.getAllByText((content) => content.includes('Test Title')).length).toBeGreaterThan(0);
-
-    // Press Escape key
-    await fireEvent.keyDown(window, { key: 'Escape' });
-
-    // Cancel callback should be called
-    expect(oncancel).toHaveBeenCalled();
-  });
-
-  test('Prevents propagation of click events within modal', async () => {
-    const { user } = setupTest({
-      show: true,
-      title: 'Test Title'
-    });
-
-    // Find the modal content (first instance)
-    const modalElements = screen.getAllByText((content) => content.includes('Test Title'));
-    expect(modalElements.length).toBeGreaterThan(0);
-
-    const modalContent = modalElements[0].closest('.md\\:hidden, .hidden');
-    if (modalContent) {
-      const clickEvent = new MouseEvent('click', { bubbles: true });
-      modalContent.dispatchEvent(clickEvent);
-
-      // Modal should still be visible
-      expect(screen.getAllByText((content) => content.includes('Test Title')).length).toBeGreaterThan(0);
-    }
-  });
-});
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import ModalTestWrapper from './ModalTestWrapper.svelte';
+
+function setupTest(args) {
+  const user = userEvent.setup();
+  const { component, rerender } = render(ModalTestWrapper, { props: { ...args } });
+  return { user, component, rerender };
+}
+
+describe('Modal Component Tests', () => {
+  // Note: Modal renders both mobile sheet and desktop centered versions
+  // CSS hides one based on viewport, but in tests both are in DOM
+  // Use getAllByText and check that at least one exists
+
+  test('Renders Modal when show is true', () => {
+    setupTest({
+      show: true,
+      title: 'Test Title',
+      description: 'Test Description',
+      warningText: 'Test Warning'
+    });
+    // Modal renders both mobile and desktop versions, so use getAllByText
+    expect(screen.getAllByText((content, element) => content.includes('Test Title')).length).toBeGreaterThan(0);
+    expect(screen.getAllByText((content, element) => content.includes('Test Description')).length).toBeGreaterThan(0);
+    expect(screen.getAllByText((content, element) => content.includes('Test Warning')).length).toBeGreaterThan(0);
+    expect(screen.getAllByRole('button', { name: /Cancel/i }).length).toBeGreaterThan(0);
+    expect(screen.getAllByRole('button', { name: /Confirm/i }).length).toBeGreaterThan(0);
+  });
+
+  test('Does not render Modal when show is false', () => {
+    setupTest({
+      show: false,
+      title: 'Test Title',
+      description: 'Test Description',
+      warningText: 'Test Warning'
+    });
+    expect(screen.queryByText('Test Title')).not.toBeInTheDocument();
+    expect(screen.queryByText('Test Description')).not.toBeInTheDocument();
+    expect(screen.queryByText('Test Warning')).not.toBeInTheDocument();
+  });
+
+  test('Displays the correct title, description, and warning text', () => {
+    const title = 'Correct Title';
+    const description = 'Correct Description';
+    const warningText = 'Correct Warning';
+    setupTest({
+      show: true,
+      title,
+      description,
+      warningText,
+    });
+    // Modal renders both mobile and desktop versions
+    expect(screen.getAllByText((content) => content.includes(title)).length).toBeGreaterThan(0);
+    expect(screen.getAllByText((content) => content.includes(description)).length).toBeGreaterThan(0);
+    expect(screen.getAllByText((content) => content.includes(warningText)).length).toBeGreaterThan(0);
+  });
+
+  test('Dispatches cancel event on escape key press', async () => {
+    // Create a mock function to track cancel calls
+    const oncancel = vi.fn();
+
+    const { user } = setupTest({
+      show: true,
+      title: 'Test Title',
+      oncancel
+    });
+
+    // Verify modal is open
+    expect(screen.getAllByText((content) => content.includes('Test Title')).length).toBeGreaterThan(0);
+
+    // Press Escape key
+    await fireEvent.keyDown(window, { key: 'Escape' });
+
+    // Cancel callback should be called
+    expect(oncancel).toHaveBeenCalled();
+  });
+
+  test('Prevents propagation of click events within modal', async () => {
+    const { user } = setupTest({
+      show: true,
+      title: 'Test Title'
+    });
+
+    // Find the modal content (first instance)
+    const modalElements = screen.getAllByText((content) => content.includes('Test Title'));
+    expect(modalElements.length).toBeGreaterThan(0);
+
+    const modalContent = modalElements[0].closest('.md\\:hidden, .hidden');
+    if (modalContent) {
+      const clickEvent = new MouseEvent('click', { bubbles: true });
+      modalContent.dispatchEvent(clickEvent);
+
+      // Modal should still be visible
+      expect(screen.getAllByText((content) => content.includes('Test Title')).length).toBeGreaterThan(0);
+    }
+  });
+});