@getmicdrop/svelte-components 5.21.0 → 5.21.2

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

@@ -1,176 +1,176 @@
-<script lang="ts">
-  interface Props {
-    /** Current status */
-    status?: "idle" | "loading" | "success" | "error" | "active" | "pending" | "inactive";
-    /** Size in pixels */
-    size?: number;
-  }
-
-  let { status = "idle", size = 48 }: Props = $props();
-  
-  // Map legacy status names to visual representations
-  const statusMap: Record<string, "idle" | "loading" | "success" | "error"> = {
-    active: "success",
-    pending: "loading",
-    inactive: "idle",
-  };
-  
-  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>
+<script lang="ts">
+  interface Props {
+    /** Current status */
+    status?: "idle" | "loading" | "success" | "error" | "active" | "pending" | "inactive";
+    /** Size in pixels */
+    size?: number;
+  }
+
+  let { status = "idle", size = 48 }: Props = $props();
+  
+  // Map legacy status names to visual representations
+  const statusMap: Record<string, "idle" | "loading" | "success" | "error"> = {
+    active: "success",
+    pending: "loading",
+    inactive: "idle",
+  };
+  
+  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"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          stroke-width="4"
+        />
+        <circle
+          class="spinner-head stroke-blue-700"
+          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-accent-success fill-status-success-bg"
+          cx="25"
+          cy="25"
+          r="23"
+          fill="none"
+          stroke-width="2"
+        />
+        <polyline
+          class="checkmark stroke-accent-success"
+          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-accent-danger fill-status-error-bg"
+          cx="25"
+          cy="25"
+          r="23"
+          fill="none"
+          stroke-width="2"
+        />
+        <line
+          class="error-x stroke-accent-danger"
+          x1="17" y1="17" x2="33" y2="33"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+        <line
+          class="error-x error-x-2 stroke-accent-danger"
+          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/feedback/index.js

@@ -1,4 +1,4 @@
-// Feedback components - status, errors, empty states
-export { default as EmptyState } from './EmptyState/EmptyState.svelte';
-export { default as ErrorDisplay } from './ErrorDisplay.svelte';
-export { default as StatusIndicator } from './StatusIndicator/StatusIndicator.svelte';
+// Feedback components - status, errors, empty states
+export { default as EmptyState } from './EmptyState/EmptyState.svelte';
+export { default as ErrorDisplay } from './ErrorDisplay.svelte';
+export { default as StatusIndicator } from './StatusIndicator/StatusIndicator.svelte';

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

@@ -39,7 +39,7 @@ describe('CheckboxField Label', () => {
   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');
+    expect(labelSpan).toHaveClass('text-accent-danger');
   });
 });
 
@@ -65,7 +65,7 @@ describe('CheckboxField Description', () => {
 describe('CheckboxField Error', () => {
   test('no error shows no validation message', () => {
     const { container } = render(CheckboxField);
-    const errorDiv = container.querySelector('.text-red-600');
+    const errorDiv = container.querySelector('.text-accent-danger');
     expect(errorDiv).not.toBeInTheDocument();
   });
 

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-accent-danger' : ''}`}>
+            {label}{#if required}<span class="text-accent-danger 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.js

@@ -45,20 +45,20 @@ describe('FormField Label', () => {
 
   test('required asterisk has red color', () => {
     const { container } = render(FormField, { props: { label: 'Name', required: true } });
-    const asterisk = container.querySelector('.text-red-500');
+    const asterisk = container.querySelector('.text-accent-danger');
     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');
+    expect(label).toHaveClass('text-status-error-text');
   });
 
   test('no error keeps label gray', () => {
     const { container } = render(FormField, { props: { label: 'Email' } });
     const label = container.querySelector('label');
-    expect(label).toHaveClass('text-gray-900');
+    expect(label).toHaveClass('text-text-primary');
   });
 });
 
@@ -100,7 +100,7 @@ describe('FormField Error', () => {
 
   test('error message uses ValidationError component', () => {
     const { container } = render(FormField, { props: { error: 'Invalid input' } });
-    const errorDiv = container.querySelector('.text-red-600');
+    const errorDiv = container.querySelector('.text-accent-danger');
     expect(errorDiv).toBeInTheDocument();
   });
 });