@getmicdrop/svelte-components 5.5.4 → 5.6.0

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

@@ -0,0 +1,159 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import FormField from './FormField.svelte';
+
+describe('FormField Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(FormField);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('wrapper has space-y-1 class', () => {
+    const { container } = render(FormField);
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('space-y-1');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(FormField, { props: { class: 'custom-form-field' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-form-field');
+  });
+});
+
+describe('FormField Label', () => {
+  test('no label renders no label element', () => {
+    const { container } = render(FormField);
+    expect(container.querySelector('label')).not.toBeInTheDocument();
+  });
+
+  test('label prop displays label text', () => {
+    render(FormField, { props: { label: 'Email Address' } });
+    expect(screen.getByText('Email Address')).toBeInTheDocument();
+  });
+
+  test('label uses Label component', () => {
+    const { container } = render(FormField, { props: { label: 'Name' } });
+    const label = container.querySelector('label');
+    expect(label).toBeInTheDocument();
+  });
+
+  test('required shows asterisk', () => {
+    render(FormField, { props: { label: 'Username', required: true } });
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
+
+  test('required asterisk has red color', () => {
+    const { container } = render(FormField, { props: { label: 'Name', required: true } });
+    const asterisk = container.querySelector('.text-red-500');
+    expect(asterisk).toHaveTextContent('*');
+  });
+
+  test('error changes label color to red', () => {
+    const { container } = render(FormField, { props: { label: 'Email', error: 'Invalid' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('text-red-700');
+  });
+
+  test('no error keeps label gray', () => {
+    const { container } = render(FormField, { props: { label: 'Email' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('text-gray-900');
+  });
+});
+
+describe('FormField Hint', () => {
+  test('no hint renders no hint text', () => {
+    const { container } = render(FormField, { props: { label: 'Name' } });
+    const paragraphs = container.querySelectorAll('p');
+    expect(paragraphs.length).toBe(0);
+  });
+
+  test('hint prop displays hint text', () => {
+    render(FormField, { props: { hint: 'Enter your full name' } });
+    expect(screen.getByText('Enter your full name')).toBeInTheDocument();
+  });
+
+  test('hint is displayed in paragraph', () => {
+    const { container } = render(FormField, { props: { hint: 'Helper text' } });
+    const paragraph = container.querySelector('p');
+    expect(paragraph).toBeInTheDocument();
+    expect(paragraph).toHaveTextContent('Helper text');
+  });
+
+  test('hint is hidden when error is present', () => {
+    render(FormField, { props: { hint: 'Helper text', error: 'Error message' } });
+    expect(screen.queryByText('Helper text')).not.toBeInTheDocument();
+  });
+});
+
+describe('FormField Error', () => {
+  test('no error shows no validation message', () => {
+    const { container } = render(FormField);
+    expect(container.querySelector('[role="alert"]')).not.toBeInTheDocument();
+  });
+
+  test('error prop shows validation message', () => {
+    render(FormField, { props: { error: 'This field is required' } });
+    expect(screen.getByText('This field is required')).toBeInTheDocument();
+  });
+
+  test('error message uses ValidationError component', () => {
+    const { container } = render(FormField, { props: { error: 'Invalid input' } });
+    const errorDiv = container.querySelector('.text-red-600');
+    expect(errorDiv).toBeInTheDocument();
+  });
+});
+
+describe('FormField ID', () => {
+  test('generates random id by default', () => {
+    const { container } = render(FormField, { props: { label: 'Test' } });
+    const label = container.querySelector('label');
+    expect(label.getAttribute('for')).toBeTruthy();
+  });
+
+  test('custom id is used when provided', () => {
+    const { container } = render(FormField, { props: { label: 'Test', id: 'my-custom-id' } });
+    const label = container.querySelector('label');
+    expect(label.getAttribute('for')).toBe('my-custom-id');
+  });
+});
+
+describe('FormField Combinations', () => {
+  test('label with hint', () => {
+    render(FormField, { props: { label: 'Email', hint: 'We won\'t share your email' } });
+    expect(screen.getByText('Email')).toBeInTheDocument();
+    expect(screen.getByText("We won't share your email")).toBeInTheDocument();
+  });
+
+  test('label with required and error', () => {
+    const { container } = render(FormField, {
+      props: { label: 'Password', required: true, error: 'Too short' }
+    });
+    expect(screen.getByText('Password')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeInTheDocument();
+    expect(screen.getByText('Too short')).toBeInTheDocument();
+  });
+
+  test('all props together', () => {
+    const { container } = render(FormField, {
+      props: {
+        label: 'Username',
+        hint: 'Choose a unique username',
+        error: 'Username taken',
+        required: true,
+        id: 'username-field',
+        class: 'custom-field'
+      }
+    });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-field');
+    expect(screen.getByText('Username')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeInTheDocument();
+    expect(screen.getByText('Username taken')).toBeInTheDocument();
+    // Hint should be hidden when error is present
+    expect(screen.queryByText('Choose a unique username')).not.toBeInTheDocument();
+    const label = container.querySelector('label');
+    expect(label.getAttribute('for')).toBe('username-field');
+  });
+});

package/dist/recipes/fields/FormField.svelte

@@ -1,58 +1,58 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import Label from '../../primitives/Label/Label.svelte';
-  import ValidationError from '../../primitives/ValidationError.svelte';
-  import { typography } from '../../tokens/typography';
-
-  interface Props {
-    /** Field label text */
-    label?: string;
-    /** Error message to display */
-    error?: string;
-    /** Hint text shown below input (string version) */
-    hint?: string;
-    /** Show required indicator after label */
-    required?: boolean;
-    /** ID to pass to the input via slot props */
-    id?: string;
-    /** Additional class for the wrapper div */
-    class?: string;
-    /** Child content (receives id, error, required as props) */
-    children?: Snippet<[{ id: string; error: string; required: boolean }]>;
-    /** Custom hint content snippet (supports links, formatting) */
-    hintContent?: Snippet;
-  }
-
-  let {
-    label = '',
-    error = '',
-    hint = '',
-    required = false,
-    id = crypto.randomUUID(),
-    class: className = '',
-    children,
-    hintContent
-  }: Props = $props();
-
-  let labelColor: 'red' | 'gray' = $derived(error ? 'red' : 'gray');
-</script>
-
-<div class="space-y-1 {className}">
-  {#if label}
-    <Label for={id} color={labelColor}>
-      {label}{#if required}<span class="text-red-500 ml-0.5">*</span>{/if}
-    </Label>
-  {/if}
-
-  {@render children?.({ id, error, required })}
-
-  {#if !error}
-    {#if hintContent}
-      <p class={typography.xsMuted}>{@render hintContent()}</p>
-    {:else if hint}
-      <p class={typography.xsMuted}>{hint}</p>
-    {/if}
-  {/if}
-
-  <ValidationError {error} />
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Label from '../../primitives/Label/Label.svelte';
+  import ValidationError from '../../primitives/ValidationError.svelte';
+  import { typography } from '../../tokens/typography';
+
+  interface Props {
+    /** Field label text */
+    label?: string;
+    /** Error message to display */
+    error?: string;
+    /** Hint text shown below input (string version) */
+    hint?: string;
+    /** Show required indicator after label */
+    required?: boolean;
+    /** ID to pass to the input via slot props */
+    id?: string;
+    /** Additional class for the wrapper div */
+    class?: string;
+    /** Child content (receives id, error, required as props) */
+    children?: Snippet<[{ id: string; error: string; required: boolean }]>;
+    /** Custom hint content snippet (supports links, formatting) */
+    hintContent?: Snippet;
+  }
+
+  let {
+    label = '',
+    error = '',
+    hint = '',
+    required = false,
+    id = crypto.randomUUID(),
+    class: className = '',
+    children,
+    hintContent
+  }: Props = $props();
+
+  let labelColor: 'red' | 'gray' = $derived(error ? 'red' : 'gray');
+</script>
+
+<div class="space-y-1 {className}">
+  {#if label}
+    <Label for={id} color={labelColor}>
+      {label}{#if required}<span class="text-red-500 ml-0.5">*</span>{/if}
+    </Label>
+  {/if}
+
+  {@render children?.({ id, error, required })}
+
+  {#if !error}
+    {#if hintContent}
+      <p class={typography.xsMuted}>{@render hintContent()}</p>
+    {:else if hint}
+      <p class={typography.xsMuted}>{hint}</p>
+    {/if}
+  {/if}
+
+  <ValidationError {error} />
+</div>

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

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

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

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

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

@@ -0,0 +1,199 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import RadioGroup from './RadioGroup.svelte';
+
+const testOptions = [
+  { value: 'a', label: 'Option A' },
+  { value: 'b', label: 'Option B' },
+  { value: 'c', label: 'Option C' }
+];
+
+describe('RadioGroup Component', () => {
+  test('renders a fieldset', () => {
+    const { container } = render(RadioGroup);
+    expect(container.querySelector('fieldset')).toBeInTheDocument();
+  });
+
+  test('applies custom className to fieldset', () => {
+    const { container } = render(RadioGroup, { props: { class: 'custom-radio-group' } });
+    const fieldset = container.querySelector('fieldset');
+    expect(fieldset).toHaveClass('custom-radio-group');
+  });
+
+  test('renders radio inputs for each option', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions } });
+    const radios = container.querySelectorAll('input[type="radio"]');
+    expect(radios.length).toBe(3);
+  });
+
+  test('empty options renders no radios', () => {
+    const { container } = render(RadioGroup);
+    const radios = container.querySelectorAll('input[type="radio"]');
+    expect(radios.length).toBe(0);
+  });
+});
+
+describe('RadioGroup Label', () => {
+  test('no label renders no legend', () => {
+    const { container } = render(RadioGroup);
+    expect(container.querySelector('legend')).not.toBeInTheDocument();
+  });
+
+  test('label prop displays legend text', () => {
+    render(RadioGroup, { props: { label: 'Select your preference' } });
+    expect(screen.getByText('Select your preference')).toBeInTheDocument();
+  });
+
+  test('legend is rendered in fieldset', () => {
+    const { container } = render(RadioGroup, { props: { label: 'Choose one' } });
+    const legend = container.querySelector('legend');
+    expect(legend).toBeInTheDocument();
+  });
+
+  test('required shows asterisk', () => {
+    render(RadioGroup, { props: { label: 'Selection', required: true } });
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
+
+  test('error state applies red text to legend', () => {
+    const { container } = render(RadioGroup, { props: { label: 'Test', error: 'Required' } });
+    const legend = container.querySelector('legend');
+    expect(legend).toHaveClass('text-red-500');
+  });
+});
+
+describe('RadioGroup Hint', () => {
+  test('no hint renders no hint text', () => {
+    const { container } = render(RadioGroup, { props: { label: 'Test' } });
+    const paragraphs = container.querySelectorAll('p');
+    expect(paragraphs.length).toBe(0);
+  });
+
+  test('hint prop displays hint text', () => {
+    render(RadioGroup, { props: { hint: 'Select one option' } });
+    expect(screen.getByText('Select one option')).toBeInTheDocument();
+  });
+
+  test('hint is hidden when error is present', () => {
+    render(RadioGroup, { props: { hint: 'Helper text', error: 'Error' } });
+    expect(screen.queryByText('Helper text')).not.toBeInTheDocument();
+  });
+});
+
+describe('RadioGroup Error', () => {
+  test('no error shows no validation message', () => {
+    const { container } = render(RadioGroup);
+    expect(container.querySelector('[role="alert"]')).not.toBeInTheDocument();
+  });
+
+  test('error prop shows validation message', () => {
+    render(RadioGroup, { props: { error: 'Please select an option' } });
+    expect(screen.getByText('Please select an option')).toBeInTheDocument();
+  });
+});
+
+describe('RadioGroup Direction', () => {
+  test('default direction is vertical', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions } });
+    const optionsDiv = container.querySelector('.flex.flex-col');
+    expect(optionsDiv).toBeInTheDocument();
+  });
+
+  test('vertical direction has gap-2', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions, direction: 'vertical' } });
+    const optionsDiv = container.querySelector('.flex.flex-col');
+    expect(optionsDiv).toHaveClass('gap-2');
+  });
+
+  test('horizontal direction uses flex wrap', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions, direction: 'horizontal' } });
+    const optionsDiv = container.querySelector('.flex.flex-wrap');
+    expect(optionsDiv).toBeInTheDocument();
+  });
+
+  test('horizontal direction has gap-4', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions, direction: 'horizontal' } });
+    const optionsDiv = container.querySelector('.flex.flex-wrap');
+    expect(optionsDiv).toHaveClass('gap-4');
+  });
+});
+
+describe('RadioGroup Props', () => {
+  test('name prop is passed to radios', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions, name: 'preference' } });
+    const radios = container.querySelectorAll('input[type="radio"]');
+    radios.forEach((radio) => {
+      expect(radio).toHaveAttribute('name', 'preference');
+    });
+  });
+
+  test('disabled prop disables all radios', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions, disabled: true } });
+    const radios = container.querySelectorAll('input[type="radio"]');
+    radios.forEach((radio) => {
+      expect(radio).toBeDisabled();
+    });
+  });
+
+  test('radios are not disabled by default', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions } });
+    const radios = container.querySelectorAll('input[type="radio"]');
+    radios.forEach((radio) => {
+      expect(radio).not.toBeDisabled();
+    });
+  });
+});
+
+describe('RadioGroup Options', () => {
+  test('option labels are displayed', () => {
+    render(RadioGroup, { props: { options: testOptions } });
+    expect(screen.getByText('Option A')).toBeInTheDocument();
+    expect(screen.getByText('Option B')).toBeInTheDocument();
+    expect(screen.getByText('Option C')).toBeInTheDocument();
+  });
+
+  test('option values are set on radios', () => {
+    const { container } = render(RadioGroup, { props: { options: testOptions } });
+    const radios = container.querySelectorAll('input[type="radio"]');
+    expect(radios[0]).toHaveAttribute('value', 'a');
+    expect(radios[1]).toHaveAttribute('value', 'b');
+    expect(radios[2]).toHaveAttribute('value', 'c');
+  });
+});
+
+describe('RadioGroup Combinations', () => {
+  test('label with options horizontal', () => {
+    render(RadioGroup, {
+      props: { label: 'Size', options: testOptions, direction: 'horizontal' }
+    });
+    expect(screen.getByText('Size')).toBeInTheDocument();
+    expect(screen.getByText('Option A')).toBeInTheDocument();
+  });
+
+  test('all props together', () => {
+    const { container } = render(RadioGroup, {
+      props: {
+        label: 'Choose Color',
+        options: testOptions,
+        name: 'color',
+        disabled: true,
+        hint: 'Pick one color',
+        error: 'Selection required',
+        required: true,
+        direction: 'horizontal',
+        class: 'custom-group'
+      }
+    });
+    const fieldset = container.querySelector('fieldset');
+    expect(fieldset).toHaveClass('custom-group');
+    expect(screen.getByText('Choose Color')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeInTheDocument();
+    expect(screen.getByText('Selection required')).toBeInTheDocument();
+    // Hint hidden when error present
+    expect(screen.queryByText('Pick one color')).not.toBeInTheDocument();
+    const radios = container.querySelectorAll('input[type="radio"]');
+    radios.forEach((radio) => {
+      expect(radio).toBeDisabled();
+    });
+  });
+});

package/dist/recipes/fields/RadioGroup.svelte

@@ -1,95 +1,95 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import Radio from '../../primitives/Radio/Radio.svelte';
-  import ValidationError from '../../primitives/ValidationError.svelte';
-  import { typography } from '../../tokens/typography';
-
-  interface RadioOption {
-    value: string;
-    label: string;
-  }
-
-  interface Props {
-    /** Currently selected value */
-    value?: string;
-    /** Radio options array */
-    options?: RadioOption[];
-    /** Name attribute for the radio group */
-    name?: string;
-    /** Whether all radios are disabled */
-    disabled?: boolean;
-    /** Color variant for radios */
-    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
-    /** Group label text */
-    label?: string;
-    /** Hint text shown below label (string version) */
-    hint?: string;
-    /** Custom hint content snippet (supports links, formatting) */
-    hintContent?: Snippet;
-    /** Error message to display */
-    error?: string;
-    /** Show required indicator */
-    required?: boolean;
-    /** Layout direction */
-    direction?: 'vertical' | 'horizontal';
-    /** Additional class for the fieldset */
-    class?: string;
-    /** Change handler */
-    onchange?: (detail: { value: string }) => void;
-  }
-
-  let {
-    value = $bindable(''),
-    options = [],
-    name = '',
-    disabled = false,
-    color = 'blue',
-    label = '',
-    hint = '',
-    hintContent,
-    error = '',
-    required = false,
-    direction = 'vertical',
-    class: className = '',
-    onchange
-  }: Props = $props();
-
-  let layoutClass = $derived(
-    direction === 'horizontal'
-      ? 'flex flex-wrap gap-4'
-      : 'flex flex-col gap-2'
-  );
-</script>
-
-<fieldset class={className}>
-  {#if label}
-    <legend class={`${typography.label} mb-2 ${error ? 'text-red-500' : ''}`}>
-      {label}{#if required}<span class="text-red-500 ml-0.5">*</span>{/if}
-    </legend>
-  {/if}
-
-  {#if !error}
-    {#if hintContent}
-      <p class={`${typography.smMuted} mb-2`}>{@render hintContent()}</p>
-    {:else if hint}
-      <p class={`${typography.smMuted} mb-2`}>{hint}</p>
-    {/if}
-  {/if}
-
-  <div class={layoutClass}>
-    {#each options as option}
-      <Radio
-        {name}
-        value={option.value}
-        {disabled}
-        {color}
-        bind:group={value}
-        {onchange}
-      >
-        {option.label}
-      </Radio>
-    {/each}
-  </div>
-
-  <ValidationError {error} />
-</fieldset>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Radio from '../../primitives/Radio/Radio.svelte';
+  import ValidationError from '../../primitives/ValidationError.svelte';
+  import { typography } from '../../tokens/typography';
+
+  interface RadioOption {
+    value: string;
+    label: string;
+  }
+
+  interface Props {
+    /** Currently selected value */
+    value?: string;
+    /** Radio options array */
+    options?: RadioOption[];
+    /** Name attribute for the radio group */
+    name?: string;
+    /** Whether all radios are disabled */
+    disabled?: boolean;
+    /** Color variant for radios */
+    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
+    /** Group label text */
+    label?: string;
+    /** Hint text shown below label (string version) */
+    hint?: string;
+    /** Custom hint content snippet (supports links, formatting) */
+    hintContent?: Snippet;
+    /** Error message to display */
+    error?: string;
+    /** Show required indicator */
+    required?: boolean;
+    /** Layout direction */
+    direction?: 'vertical' | 'horizontal';
+    /** Additional class for the fieldset */
+    class?: string;
+    /** Change handler */
+    onchange?: (detail: { value: string }) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    options = [],
+    name = '',
+    disabled = false,
+    color = 'blue',
+    label = '',
+    hint = '',
+    hintContent,
+    error = '',
+    required = false,
+    direction = 'vertical',
+    class: className = '',
+    onchange
+  }: Props = $props();
+
+  let layoutClass = $derived(
+    direction === 'horizontal'
+      ? 'flex flex-wrap gap-4'
+      : 'flex flex-col gap-2'
+  );
+</script>
+
+<fieldset class={className}>
+  {#if label}
+    <legend class={`${typography.label} mb-2 ${error ? 'text-red-500' : ''}`}>
+      {label}{#if required}<span class="text-red-500 ml-0.5">*</span>{/if}
+    </legend>
+  {/if}
+
+  {#if !error}
+    {#if hintContent}
+      <p class={`${typography.smMuted} mb-2`}>{@render hintContent()}</p>
+    {:else if hint}
+      <p class={`${typography.smMuted} mb-2`}>{hint}</p>
+    {/if}
+  {/if}
+
+  <div class={layoutClass}>
+    {#each options as option}
+      <Radio
+        {name}
+        value={option.value}
+        {disabled}
+        {color}
+        bind:group={value}
+        {onchange}
+      >
+        {option.label}
+      </Radio>
+    {/each}
+  </div>
+
+  <ValidationError {error} />
+</fieldset>

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

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

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

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