@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/recipes/fields/TextareaField.svelte

@@ -1,101 +1,101 @@
-<script lang="ts">
-  import Textarea from '../../primitives/Input/Textarea.svelte';
-  import { typography } from '../../tokens/typography';
-
-  interface Props {
-    /** Current value */
-    value?: string;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Number of rows */
-    rows?: number;
-    /** Whether disabled */
-    disabled?: boolean;
-    /** Whether required */
-    required?: boolean;
-    /** Whether readonly */
-    readonly?: boolean;
-    /** Input id */
-    id?: string;
-    /** Input name */
-    name?: string;
-    /** Label text */
-    label?: string;
-    /** Error message */
-    error?: string;
-    /** Max character length */
-    maxlength?: number | null;
-    /** Min character length */
-    minlength?: number | null;
-    /** Hint text shown below input */
-    hint?: string;
-    /** Additional class for the wrapper div */
-    class?: string;
+<script lang="ts">
+  import Textarea from '../../primitives/Input/Textarea.svelte';
+  import { typography } from '../../tokens/typography';
+
+  interface Props {
+    /** Current value */
+    value?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Number of rows */
+    rows?: number;
+    /** Whether disabled */
+    disabled?: boolean;
+    /** Whether required */
+    required?: boolean;
+    /** Whether readonly */
+    readonly?: boolean;
+    /** Input id */
+    id?: string;
+    /** Input name */
+    name?: string;
+    /** Label text */
+    label?: string;
+    /** Error message */
+    error?: string;
+    /** Max character length */
+    maxlength?: number | null;
+    /** Min character length */
+    minlength?: number | null;
+    /** Hint text shown below input */
+    hint?: string;
+    /** Additional class for the wrapper div */
+    class?: string;
     /** Input handler */
     oninput?: (detail: { value: string }) => void;
     /** Change handler */
     onchange?: (detail: { value: string }) => void;
-    /** Blur handler */
-    onblur?: (e: FocusEvent) => void;
-    /** Focus handler */
-    onfocus?: (e: FocusEvent) => void;
-    /** Keydown handler */
-    onkeydown?: (e: KeyboardEvent) => void;
-    /** Keyup handler */
-    onkeyup?: (e: KeyboardEvent) => void;
-    /** Keypress handler */
-    onkeypress?: (e: KeyboardEvent) => void;
-  }
-
-  let {
-    value = $bindable(''),
-    placeholder = '',
-    rows = 4,
-    disabled = false,
-    required = false,
-    readonly = false,
-    id = '',
-    name = '',
-    label = '',
-    error = '',
-    maxlength = null,
-    minlength = null,
-    hint = '',
-    class: className = '',
-    oninput,
-    onchange,
-    onblur,
-    onfocus,
-    onkeydown,
-    onkeyup,
-    onkeypress
-  }: Props = $props();
-</script>
-
-<div class={className}>
-  <Textarea
-    {id}
-    {name}
-    {placeholder}
-    {rows}
-    {disabled}
-    {required}
-    {readonly}
-    {label}
-    {error}
-    {maxlength}
-    {minlength}
-    {oninput}
-    {onchange}
-    {onblur}
-    {onfocus}
-    {onkeydown}
-    {onkeyup}
-    {onkeypress}
-    bind:value
-  />
-
-  {#if hint && !error}
-    <p class={`${typography.xsMuted} mt-1`}>{hint}</p>
-  {/if}
-</div>
+    /** Blur handler */
+    onblur?: (e: FocusEvent) => void;
+    /** Focus handler */
+    onfocus?: (e: FocusEvent) => void;
+    /** Keydown handler */
+    onkeydown?: (e: KeyboardEvent) => void;
+    /** Keyup handler */
+    onkeyup?: (e: KeyboardEvent) => void;
+    /** Keypress handler */
+    onkeypress?: (e: KeyboardEvent) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    placeholder = '',
+    rows = 4,
+    disabled = false,
+    required = false,
+    readonly = false,
+    id = '',
+    name = '',
+    label = '',
+    error = '',
+    maxlength = null,
+    minlength = null,
+    hint = '',
+    class: className = '',
+    oninput,
+    onchange,
+    onblur,
+    onfocus,
+    onkeydown,
+    onkeyup,
+    onkeypress
+  }: Props = $props();
+</script>
+
+<div class={className}>
+  <Textarea
+    {id}
+    {name}
+    {placeholder}
+    {rows}
+    {disabled}
+    {required}
+    {readonly}
+    {label}
+    {error}
+    {maxlength}
+    {minlength}
+    {oninput}
+    {onchange}
+    {onblur}
+    {onfocus}
+    {onkeydown}
+    {onkeyup}
+    {onkeypress}
+    bind:value
+  />
+
+  {#if hint && !error}
+    <p class={`${typography.xsMuted} mt-1`}>{hint}</p>
+  {/if}
+</div>

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

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

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

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

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

@@ -0,0 +1,153 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ToggleField from './ToggleField.svelte';
+
+describe('ToggleField Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(ToggleField);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ToggleField, { props: { class: 'custom-toggle-field' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-toggle-field');
+  });
+
+  test('renders a toggle switch', () => {
+    const { container } = render(ToggleField);
+    const toggle = container.querySelector('[role="switch"]');
+    expect(toggle).toBeInTheDocument();
+  });
+});
+
+describe('ToggleField Label', () => {
+  test('no label renders no label text', () => {
+    render(ToggleField);
+    expect(screen.queryByText(/test/i)).not.toBeInTheDocument();
+  });
+
+  test('label prop displays label text', () => {
+    render(ToggleField, { props: { label: 'Enable notifications' } });
+    expect(screen.getByText('Enable notifications')).toBeInTheDocument();
+  });
+
+  test('error state applies error styling to label', () => {
+    const { container } = render(ToggleField, { props: { label: 'Test', error: 'Required' } });
+    const labelSpan = container.querySelector('span');
+    expect(labelSpan).toHaveClass('text-red-500');
+  });
+});
+
+describe('ToggleField Description', () => {
+  test('no description renders no description text', () => {
+    const { container } = render(ToggleField, { props: { label: 'Test' } });
+    const spans = container.querySelectorAll('span');
+    expect(spans.length).toBe(1); // Just the label
+  });
+
+  test('description prop displays description text', () => {
+    render(ToggleField, { props: { description: 'Get daily updates' } });
+    expect(screen.getByText('Get daily updates')).toBeInTheDocument();
+  });
+
+  test('label and description together', () => {
+    render(ToggleField, { props: { label: 'Notifications', description: 'Stay informed' } });
+    expect(screen.getByText('Notifications')).toBeInTheDocument();
+    expect(screen.getByText('Stay informed')).toBeInTheDocument();
+  });
+});
+
+describe('ToggleField Error', () => {
+  test('no error shows no validation message', () => {
+    const { container } = render(ToggleField);
+    const errorDiv = container.querySelector('.text-red-600');
+    expect(errorDiv).not.toBeInTheDocument();
+  });
+
+  test('error prop shows validation message', () => {
+    render(ToggleField, { props: { error: 'Please enable this option' } });
+    expect(screen.getByText('Please enable this option')).toBeInTheDocument();
+  });
+});
+
+describe('ToggleField Disabled', () => {
+  test('disabled prop disables toggle', () => {
+    const { container } = render(ToggleField, { props: { disabled: true } });
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input).toBeDisabled();
+  });
+
+  test('not disabled by default', () => {
+    const { container } = render(ToggleField);
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input).not.toBeDisabled();
+  });
+});
+
+describe('ToggleField Size', () => {
+  test('default size is md', () => {
+    const { container } = render(ToggleField);
+    expect(container.querySelector('[role="switch"]')).toBeInTheDocument();
+  });
+
+  test('size sm works', () => {
+    const { container } = render(ToggleField, { props: { size: 'sm' } });
+    expect(container.querySelector('[role="switch"]')).toBeInTheDocument();
+  });
+
+  test('size lg works', () => {
+    const { container } = render(ToggleField, { props: { size: 'lg' } });
+    expect(container.querySelector('[role="switch"]')).toBeInTheDocument();
+  });
+});
+
+describe('ToggleField Layout', () => {
+  test('has flex container for label and toggle', () => {
+    const { container } = render(ToggleField, { props: { label: 'Test' } });
+    const flexDiv = container.querySelector('.flex.items-start');
+    expect(flexDiv).toBeInTheDocument();
+  });
+
+  test('has justify-between', () => {
+    const { container } = render(ToggleField, { props: { label: 'Test' } });
+    const flexDiv = container.querySelector('.flex.items-start');
+    expect(flexDiv).toHaveClass('justify-between');
+  });
+
+  test('has gap-4', () => {
+    const { container } = render(ToggleField, { props: { label: 'Test' } });
+    const flexDiv = container.querySelector('.flex.items-start');
+    expect(flexDiv).toHaveClass('gap-4');
+  });
+});
+
+describe('ToggleField Combinations', () => {
+  test('label and description with toggle', () => {
+    render(ToggleField, {
+      props: { label: 'Dark mode', description: 'Use dark color scheme' }
+    });
+    expect(screen.getByText('Dark mode')).toBeInTheDocument();
+    expect(screen.getByText('Use dark color scheme')).toBeInTheDocument();
+  });
+
+  test('all props together', () => {
+    const { container } = render(ToggleField, {
+      props: {
+        label: 'Settings',
+        description: 'Configure options',
+        error: 'Please select',
+        disabled: true,
+        size: 'lg',
+        class: 'custom-class'
+      }
+    });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-class');
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+    expect(screen.getByText('Configure options')).toBeInTheDocument();
+    expect(screen.getByText('Please select')).toBeInTheDocument();
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input).toBeDisabled();
+  });
+});

package/dist/recipes/fields/ToggleField.svelte

@@ -1,60 +1,60 @@
-<script lang="ts">
-  import Toggle from '../../primitives/Toggle.svelte';
-  import ValidationError from '../../primitives/ValidationError.svelte';
-  import { typography } from '../../tokens/typography';
-
-  interface Props {
-    /** Whether the toggle is checked */
-    checked?: boolean;
-    /** Whether the toggle is disabled */
-    disabled?: boolean;
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Label text displayed next to the toggle */
-    label?: string;
-    /** Description text shown below the label */
-    description?: string;
-    /** Error message to display */
-    error?: string;
-    /** Additional class for the wrapper div */
-    class?: string;
-    /** Change handler callback */
-    onchange?: (detail: { checked: boolean }) => void;
-  }
-
-  let {
-    checked = $bindable(false),
-    disabled = false,
-    size = 'md',
-    label = '',
-    description = '',
-    error = '',
-    class: className = '',
-    onchange
-  }: Props = $props();
-</script>
-
-<div class={className}>
-  <div class="flex items-start justify-between gap-4">
-    {#if label || description}
-      <div class="flex flex-col">
-        {#if label}
-          <span class={`${typography.label} ${error ? 'text-red-500' : ''}`}>
-            {label}
-          </span>
-        {/if}
-        {#if description}
-          <span class={typography.smMuted}>{description}</span>
-        {/if}
-      </div>
-    {/if}
-    <Toggle
-      {disabled}
-      {size}
-      bind:checked
-      {onchange}
-    />
-  </div>
-
-  <ValidationError {error} />
-</div>
+<script lang="ts">
+  import Toggle from '../../primitives/Toggle.svelte';
+  import ValidationError from '../../primitives/ValidationError.svelte';
+  import { typography } from '../../tokens/typography';
+
+  interface Props {
+    /** Whether the toggle is checked */
+    checked?: boolean;
+    /** Whether the toggle is disabled */
+    disabled?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Label text displayed next to the toggle */
+    label?: string;
+    /** Description text shown below the label */
+    description?: string;
+    /** Error message to display */
+    error?: string;
+    /** Additional class for the wrapper div */
+    class?: string;
+    /** Change handler callback */
+    onchange?: (detail: { checked: boolean }) => void;
+  }
+
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    size = 'md',
+    label = '',
+    description = '',
+    error = '',
+    class: className = '',
+    onchange
+  }: Props = $props();
+</script>
+
+<div class={className}>
+  <div class="flex items-start justify-between gap-4">
+    {#if label || description}
+      <div class="flex flex-col">
+        {#if label}
+          <span class={`${typography.label} ${error ? 'text-red-500' : ''}`}>
+            {label}
+          </span>
+        {/if}
+        {#if description}
+          <span class={typography.smMuted}>{description}</span>
+        {/if}
+      </div>
+    {/if}
+    <Toggle
+      {disabled}
+      {size}
+      bind:checked
+      {onchange}
+    />
+  </div>
+
+  <ValidationError {error} />
+</div>

package/dist/recipes/fields/index.js

@@ -1,7 +1,7 @@
-// Field recipes - Label + Input + Error compositions
-export { default as CheckboxField } from './CheckboxField.svelte';
-export { default as FormField } from './FormField.svelte';
-export { default as RadioGroup } from './RadioGroup.svelte';
-export { default as SelectField } from './SelectField.svelte';
-export { default as TextareaField } from './TextareaField.svelte';
-export { default as ToggleField } from './ToggleField.svelte';
+// Field recipes - Label + Input + Error compositions
+export { default as CheckboxField } from './CheckboxField.svelte';
+export { default as FormField } from './FormField.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as SelectField } from './SelectField.svelte';
+export { default as TextareaField } from './TextareaField.svelte';
+export { default as ToggleField } from './ToggleField.svelte';