@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/recipes/feedback/StatusIndicator/StatusIndicator.svelte

@@ -17,160 +17,160 @@
   
   let effectiveStatus = $derived(statusMap[status] ?? status);
 </script>
-
-<div
-  class="flex items-center justify-center"
-  style="width: {size}px; height: {size}px;"
->
-  {#if effectiveStatus === "loading"}
-    <div class="spinner" style="width: {size}px; height: {size}px;">
-      <svg viewBox="0 0 50 50">
-        <circle
-          class="stroke-gray-200 dark:stroke-gray-600"
-          cx="25"
-          cy="25"
-          r="20"
-          fill="none"
-          stroke-width="4"
-        />
-        <circle
-          class="spinner-head stroke-blue-700 dark:stroke-blue-500"
-          cx="25"
-          cy="25"
-          r="20"
-          fill="none"
-          stroke-width="4"
-        />
-      </svg>
-    </div>
-  {:else if effectiveStatus === "success"}
-    <div class="success-circle" style="width: {size}px; height: {size}px;">
-      <svg viewBox="0 0 50 50">
-        <circle
-          class="stroke-green-600 fill-green-50 dark:fill-green-900/20"
-          cx="25"
-          cy="25"
-          r="23"
-          fill="none"
-          stroke-width="2"
-        />
-        <polyline
-          class="checkmark stroke-green-600"
-          points="15,26 22,33 35,18"
-          fill="none"
-          stroke-width="3"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </div>
-  {:else if effectiveStatus === "error"}
-    <div class="error-circle" style="width: {size}px; height: {size}px;">
-      <svg viewBox="0 0 50 50">
-        <circle
-          class="stroke-red-600 fill-red-50 dark:fill-red-900/20"
-          cx="25"
-          cy="25"
-          r="23"
-          fill="none"
-          stroke-width="2"
-        />
-        <line
-          class="error-x stroke-red-600"
-          x1="17" y1="17" x2="33" y2="33"
-          stroke-width="3"
-          stroke-linecap="round"
-        />
-        <line
-          class="error-x error-x-2 stroke-red-600"
-          x1="33" y1="17" x2="17" y2="33"
-          stroke-width="3"
-          stroke-linecap="round"
-        />
-      </svg>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .spinner svg {
-    animation: rotate 1s linear infinite;
-  }
-
-  .spinner-head {
-    stroke-dasharray: 80, 200;
-    stroke-dashoffset: 0;
-    animation: dash 1.2s ease-in-out infinite;
-  }
-
-  @keyframes rotate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes dash {
-    0% {
-      stroke-dasharray: 1, 200;
-      stroke-dashoffset: 0;
-    }
-    50% {
-      stroke-dasharray: 80, 200;
-      stroke-dashoffset: -35;
-    }
-    100% {
-      stroke-dasharray: 80, 200;
-      stroke-dashoffset: -125;
-    }
-  }
-
-  .success-circle {
-    animation: pop-in 300ms ease-out;
-  }
-
-  .checkmark {
-    stroke-dasharray: 40;
-    stroke-dashoffset: 40;
-    animation: draw-check 400ms ease-out 100ms forwards;
-  }
-
-  @keyframes pop-in {
-    0% {
-      transform: scale(0.8);
-      opacity: 0;
-    }
-    50% {
-      transform: scale(1.05);
-    }
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }
-
-  @keyframes draw-check {
-    to {
-      stroke-dashoffset: 0;
-    }
-  }
-
-  .error-circle {
-    animation: pop-in 300ms ease-out;
-  }
-
-  .error-x {
-    stroke-dasharray: 25;
-    stroke-dashoffset: 25;
-    animation: draw-x 300ms ease-out 100ms forwards;
-  }
-
-  .error-x-2 {
-    animation-delay: 200ms;
-  }
-
-  @keyframes draw-x {
-    to {
-      stroke-dashoffset: 0;
-    }
-  }
-</style>
+
+<div
+  class="flex items-center justify-center"
+  style="width: {size}px; height: {size}px;"
+>
+  {#if effectiveStatus === "loading"}
+    <div class="spinner" style="width: {size}px; height: {size}px;">
+      <svg viewBox="0 0 50 50">
+        <circle
+          class="stroke-gray-200 dark:stroke-gray-600"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          stroke-width="4"
+        />
+        <circle
+          class="spinner-head stroke-blue-700 dark:stroke-blue-500"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          stroke-width="4"
+        />
+      </svg>
+    </div>
+  {:else if effectiveStatus === "success"}
+    <div class="success-circle" style="width: {size}px; height: {size}px;">
+      <svg viewBox="0 0 50 50">
+        <circle
+          class="stroke-green-600 fill-green-50 dark:fill-green-900/20"
+          cx="25"
+          cy="25"
+          r="23"
+          fill="none"
+          stroke-width="2"
+        />
+        <polyline
+          class="checkmark stroke-green-600"
+          points="15,26 22,33 35,18"
+          fill="none"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  {:else if effectiveStatus === "error"}
+    <div class="error-circle" style="width: {size}px; height: {size}px;">
+      <svg viewBox="0 0 50 50">
+        <circle
+          class="stroke-red-600 fill-red-50 dark:fill-red-900/20"
+          cx="25"
+          cy="25"
+          r="23"
+          fill="none"
+          stroke-width="2"
+        />
+        <line
+          class="error-x stroke-red-600"
+          x1="17" y1="17" x2="33" y2="33"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+        <line
+          class="error-x error-x-2 stroke-red-600"
+          x1="33" y1="17" x2="17" y2="33"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+      </svg>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .spinner svg {
+    animation: rotate 1s linear infinite;
+  }
+
+  .spinner-head {
+    stroke-dasharray: 80, 200;
+    stroke-dashoffset: 0;
+    animation: dash 1.2s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 80, 200;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 80, 200;
+      stroke-dashoffset: -125;
+    }
+  }
+
+  .success-circle {
+    animation: pop-in 300ms ease-out;
+  }
+
+  .checkmark {
+    stroke-dasharray: 40;
+    stroke-dashoffset: 40;
+    animation: draw-check 400ms ease-out 100ms forwards;
+  }
+
+  @keyframes pop-in {
+    0% {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(1.05);
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes draw-check {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  .error-circle {
+    animation: pop-in 300ms ease-out;
+  }
+
+  .error-x {
+    stroke-dasharray: 25;
+    stroke-dashoffset: 25;
+    animation: draw-x 300ms ease-out 100ms forwards;
+  }
+
+  .error-x-2 {
+    animation-delay: 200ms;
+  }
+
+  @keyframes draw-x {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+</style>

package/dist/recipes/fields/CheckboxField.spec.d.ts

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

package/dist/recipes/fields/CheckboxField.spec.d.ts.map

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

package/dist/recipes/fields/CheckboxField.spec.js

@@ -0,0 +1,135 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import CheckboxField from './CheckboxField.svelte';
+
+describe('CheckboxField Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(CheckboxField);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(CheckboxField, { props: { class: 'custom-field' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-field');
+  });
+
+  test('renders a checkbox input', () => {
+    const { container } = render(CheckboxField);
+    expect(container.querySelector('input[type="checkbox"]')).toBeInTheDocument();
+  });
+});
+
+describe('CheckboxField Label', () => {
+  test('no label renders no label text', () => {
+    render(CheckboxField);
+    expect(screen.queryByText(/test label/i)).not.toBeInTheDocument();
+  });
+
+  test('label prop displays label text', () => {
+    render(CheckboxField, { props: { label: 'Accept terms' } });
+    expect(screen.getByText('Accept terms')).toBeInTheDocument();
+  });
+
+  test('required adds asterisk to label', () => {
+    render(CheckboxField, { props: { label: 'Name', required: true } });
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
+
+  test('error state applies error styling to label', () => {
+    const { container } = render(CheckboxField, { props: { label: 'Test', error: 'Required' } });
+    const labelSpan = container.querySelector('span');
+    expect(labelSpan).toHaveClass('text-red-500');
+  });
+});
+
+describe('CheckboxField Description', () => {
+  test('no description renders no description', () => {
+    const { container } = render(CheckboxField);
+    const spans = container.querySelectorAll('span');
+    expect(spans.length).toBeLessThanOrEqual(1);
+  });
+
+  test('description prop displays description text', () => {
+    render(CheckboxField, { props: { description: 'You agree to our terms' } });
+    expect(screen.getByText('You agree to our terms')).toBeInTheDocument();
+  });
+
+  test('label and description together', () => {
+    render(CheckboxField, { props: { label: 'Terms', description: 'Read carefully' } });
+    expect(screen.getByText('Terms')).toBeInTheDocument();
+    expect(screen.getByText('Read carefully')).toBeInTheDocument();
+  });
+});
+
+describe('CheckboxField Error', () => {
+  test('no error shows no validation message', () => {
+    const { container } = render(CheckboxField);
+    const errorDiv = container.querySelector('.text-red-600');
+    expect(errorDiv).not.toBeInTheDocument();
+  });
+
+  test('error prop shows validation message', () => {
+    render(CheckboxField, { props: { error: 'This field is required' } });
+    expect(screen.getByText('This field is required')).toBeInTheDocument();
+  });
+});
+
+describe('CheckboxField Props', () => {
+  test('name prop is passed to checkbox', () => {
+    const { container } = render(CheckboxField, { props: { name: 'terms' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('name', 'terms');
+  });
+
+  test('value prop is passed to checkbox', () => {
+    const { container } = render(CheckboxField, { props: { value: 'accepted' } });
+    const input = container.querySelector('input');
+    expect(input).toHaveAttribute('value', 'accepted');
+  });
+
+  test('disabled prop disables checkbox', () => {
+    const { container } = render(CheckboxField, { props: { disabled: true } });
+    const input = container.querySelector('input');
+    expect(input).toBeDisabled();
+  });
+});
+
+describe('CheckboxField Layout', () => {
+  test('has flex container for checkbox and label', () => {
+    const { container } = render(CheckboxField, { props: { label: 'Test' } });
+    const flexDiv = container.querySelector('.flex.items-start');
+    expect(flexDiv).toBeInTheDocument();
+  });
+
+  test('has gap between checkbox and label', () => {
+    const { container } = render(CheckboxField, { props: { label: 'Test' } });
+    const flexDiv = container.querySelector('.flex.items-start');
+    expect(flexDiv).toHaveClass('gap-3');
+  });
+});
+
+describe('CheckboxField Combinations', () => {
+  test('all props together', () => {
+    const { container } = render(CheckboxField, {
+      props: {
+        label: 'Newsletter',
+        description: 'Receive updates',
+        error: 'Please accept',
+        name: 'newsletter',
+        value: 'yes',
+        disabled: true,
+        required: true,
+        class: 'my-field'
+      }
+    });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('my-field');
+    expect(screen.getByText('Newsletter')).toBeInTheDocument();
+    expect(screen.getByText('Receive updates')).toBeInTheDocument();
+    expect(screen.getByText('Please accept')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeInTheDocument();
+    const input = container.querySelector('input');
+    expect(input).toBeDisabled();
+  });
+});

package/dist/recipes/fields/CheckboxField.svelte

@@ -1,85 +1,85 @@
-<script lang="ts">
-  import Checkbox from '../../primitives/Checkbox/Checkbox.svelte';
-  import ValidationError from '../../primitives/ValidationError.svelte';
-  import { typography } from '../../tokens/typography';
-
-  interface Props {
-    /** Whether the checkbox is checked */
-    checked?: boolean;
-    /** The value attribute */
-    value?: string;
-    /** Name attribute for form submission */
-    name?: string;
-    /** Whether the checkbox is disabled */
-    disabled?: boolean;
-    /** Color variant */
-    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
-    /** Label text displayed next to the checkbox */
-    label?: string;
-    /** Description text shown below the label */
-    description?: string;
-    /** Error message to display */
-    error?: string;
-    /** Show required indicator */
-    required?: boolean;
-    /** Additional class for the wrapper div */
-    class?: string;
-    /** Change handler */
-    onchange?: (detail: { checked: boolean; value: string }) => void;
-    /** Click handler */
-    onclick?: () => void;
-    /** Focus handler */
-    onfocus?: () => void;
-    /** Blur handler */
-    onblur?: () => void;
-  }
-
-  let {
-    checked = $bindable(false),
-    value = '',
-    name = '',
-    disabled = false,
-    color = 'blue',
-    label = '',
-    description = '',
-    error = '',
-    required = false,
-    class: className = '',
-    onchange,
-    onclick,
-    onfocus,
-    onblur
-  }: Props = $props();
-</script>
-
-<div class={className}>
-  <div class="flex items-start gap-3">
-    <div class="flex items-center h-5 mt-0.5">
-      <Checkbox
-        {name}
-        {value}
-        {disabled}
-        {color}
-        bind:checked
-        {onchange}
-        {onclick}
-        {onfocus}
-        {onblur}
-      />
-    </div>
-    {#if label || description}
-      <div class="flex flex-col">
-        {#if label}
-          <span class={`${typography.label} ${error ? 'text-red-500' : ''}`}>
-            {label}{#if required}<span class="text-red-500 ml-0.5">*</span>{/if}
-          </span>
-        {/if}
-        {#if description}
-          <span class={typography.smMuted}>{description}</span>
-        {/if}
-      </div>
-    {/if}
-  </div>
-
-  <ValidationError {error} />
-</div>
+<script lang="ts">
+  import Checkbox from '../../primitives/Checkbox/Checkbox.svelte';
+  import ValidationError from '../../primitives/ValidationError.svelte';
+  import { typography } from '../../tokens/typography';
+
+  interface Props {
+    /** Whether the checkbox is checked */
+    checked?: boolean;
+    /** The value attribute */
+    value?: string;
+    /** Name attribute for form submission */
+    name?: string;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Color variant */
+    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
+    /** Label text displayed next to the checkbox */
+    label?: string;
+    /** Description text shown below the label */
+    description?: string;
+    /** Error message to display */
+    error?: string;
+    /** Show required indicator */
+    required?: boolean;
+    /** Additional class for the wrapper div */
+    class?: string;
+    /** Change handler */
+    onchange?: (detail: { checked: boolean; value: string }) => void;
+    /** Click handler */
+    onclick?: () => void;
+    /** Focus handler */
+    onfocus?: () => void;
+    /** Blur handler */
+    onblur?: () => void;
+  }
+
+  let {
+    checked = $bindable(false),
+    value = '',
+    name = '',
+    disabled = false,
+    color = 'blue',
+    label = '',
+    description = '',
+    error = '',
+    required = false,
+    class: className = '',
+    onchange,
+    onclick,
+    onfocus,
+    onblur
+  }: Props = $props();
+</script>
+
+<div class={className}>
+  <div class="flex items-start gap-3">
+    <div class="flex items-center h-5 mt-0.5">
+      <Checkbox
+        {name}
+        {value}
+        {disabled}
+        {color}
+        bind:checked
+        {onchange}
+        {onclick}
+        {onfocus}
+        {onblur}
+      />
+    </div>
+    {#if label || description}
+      <div class="flex flex-col">
+        {#if label}
+          <span class={`${typography.label} ${error ? 'text-red-500' : ''}`}>
+            {label}{#if required}<span class="text-red-500 ml-0.5">*</span>{/if}
+          </span>
+        {/if}
+        {#if description}
+          <span class={typography.smMuted}>{description}</span>
+        {/if}
+      </div>
+    {/if}
+  </div>
+
+  <ValidationError {error} />
+</div>

package/dist/recipes/fields/FormField.spec.d.ts

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

package/dist/recipes/fields/FormField.spec.d.ts.map

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