@getmicdrop/svelte-components 5.19.0 → 5.20.0

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 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/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.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.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>