@getmicdrop/svelte-components 5.3.10 → 5.3.13

package/dist/primitives/Radio/Radio.stories.svelte

@@ -1,80 +1,80 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Radio from './Radio.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Radio',
-    component: Radio,
-    tags: ['autodocs'],
-    argTypes: {
-      label: { control: 'text' },
-      value: { control: 'text' },
-      disabled: { control: 'boolean' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'Radio button for single selection from a group.',
-        },
-      },
-    },
-  });
-
-  let selectedSize = $state('md');
-  let selectedPlan = $state('basic');
-</script>
-
-<Story name="Single">
-  {#snippet template()}
-    <Radio name="single" value="option" label="Single option" />
-  {/snippet}
-</Story>
-
-<Story name="Group">
-  {#snippet template()}
-    <div class="space-y-3">
-      <p class="text-sm font-medium text-gray-700">Select size:</p>
-      <Radio name="size" value="sm" label="Small" bind:group={selectedSize} />
-      <Radio name="size" value="md" label="Medium" bind:group={selectedSize} />
-      <Radio name="size" value="lg" label="Large" bind:group={selectedSize} />
-      <p class="text-xs text-gray-500 mt-2">Selected: {selectedSize}</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Disabled">
-  {#snippet template()}
-    <div class="space-y-3">
-      <Radio name="disabled-demo" value="1" label="Enabled option" />
-      <Radio name="disabled-demo" value="2" label="Disabled option" disabled />
-      <Radio name="disabled-demo" value="3" label="Disabled checked" disabled checked />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Pricing Plans">
-  {#snippet template()}
-    <div class="space-y-3">
-      <p class="text-sm font-medium text-gray-700">Choose your plan:</p>
-      <div class="space-y-2">
-        <Radio name="plan" value="basic" label="Basic - Free" bind:group={selectedPlan} />
-        <Radio name="plan" value="pro" label="Pro - $29/month" bind:group={selectedPlan} />
-        <Radio name="plan" value="enterprise" label="Enterprise - Contact us" bind:group={selectedPlan} />
-      </div>
-      <p class="text-xs text-gray-500 mt-2">Selected plan: {selectedPlan}</p>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Horizontal Layout">
-  {#snippet template()}
-    <div class="space-y-2">
-      <p class="text-sm font-medium text-gray-700">Payment method:</p>
-      <div class="flex gap-6">
-        <Radio name="payment" value="card" label="Credit Card" />
-        <Radio name="payment" value="paypal" label="PayPal" />
-        <Radio name="payment" value="bank" label="Bank Transfer" />
-      </div>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Radio from './Radio.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Radio',
+    component: Radio,
+    tags: ['autodocs'],
+    argTypes: {
+      label: { control: 'text' },
+      value: { control: 'text' },
+      disabled: { control: 'boolean' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'Radio button for single selection from a group.',
+        },
+      },
+    },
+  });
+
+  let selectedSize = $state('md');
+  let selectedPlan = $state('basic');
+</script>
+
+<Story name="Single">
+  {#snippet template()}
+    <Radio name="single" value="option" label="Single option" />
+  {/snippet}
+</Story>
+
+<Story name="Group">
+  {#snippet template()}
+    <div class="space-y-3">
+      <p class="text-sm font-medium text-gray-700">Select size:</p>
+      <Radio name="size" value="sm" label="Small" bind:group={selectedSize} />
+      <Radio name="size" value="md" label="Medium" bind:group={selectedSize} />
+      <Radio name="size" value="lg" label="Large" bind:group={selectedSize} />
+      <p class="text-xs text-gray-500 mt-2">Selected: {selectedSize}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Disabled">
+  {#snippet template()}
+    <div class="space-y-3">
+      <Radio name="disabled-demo" value="1" label="Enabled option" />
+      <Radio name="disabled-demo" value="2" label="Disabled option" disabled />
+      <Radio name="disabled-demo" value="3" label="Disabled checked" disabled checked />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Pricing Plans">
+  {#snippet template()}
+    <div class="space-y-3">
+      <p class="text-sm font-medium text-gray-700">Choose your plan:</p>
+      <div class="space-y-2">
+        <Radio name="plan" value="basic" label="Basic - Free" bind:group={selectedPlan} />
+        <Radio name="plan" value="pro" label="Pro - $29/month" bind:group={selectedPlan} />
+        <Radio name="plan" value="enterprise" label="Enterprise - Contact us" bind:group={selectedPlan} />
+      </div>
+      <p class="text-xs text-gray-500 mt-2">Selected plan: {selectedPlan}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Horizontal Layout">
+  {#snippet template()}
+    <div class="space-y-2">
+      <p class="text-sm font-medium text-gray-700">Payment method:</p>
+      <div class="flex gap-6">
+        <Radio name="payment" value="card" label="Credit Card" />
+        <Radio name="payment" value="paypal" label="PayPal" />
+        <Radio name="payment" value="bank" label="Bank Transfer" />
+      </div>
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Radio/Radio.svelte

@@ -1,67 +1,67 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    value?: string;
-    group?: string;
-    name?: string;
-    disabled?: boolean;
-    checked?: boolean;
-    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
-    class?: string;
-    onchange?: (detail: { value: string }) => void;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    value = "",
-    group = $bindable(""),
-    name = "",
-    disabled = false,
-    checked = undefined,
-    color = 'blue',
-    class: className = "",
-    onchange,
-    children,
-    ...restProps
-  }: Props = $props();
-
-  let isChecked = $derived(checked !== undefined ? checked : group === value);
-
-  function handleChange() {
-    group = value;
-    onchange?.({ value });
-  }
-
-  const colorClasses = {
-    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600',
-    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
-    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
-    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
-    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
-    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600'
-  };
-
-  let colorClass = $derived(colorClasses[color] || colorClasses.blue);
-</script>
-
-<label
-  class="inline-flex items-center gap-2 {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}"
-  {...restProps}
->
-  <input
-    type="radio"
-    {name}
-    {value}
-    {disabled}
-    checked={isChecked}
-    onchange={handleChange}
-    class="w-4 h-4 bg-gray-100 border-gray-300 focus:ring-2 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 {colorClass}"
-  />
-  {#if children}
-    <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
-      {@render children()}
-    </span>
-  {/if}
-</label>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    value?: string;
+    group?: string;
+    name?: string;
+    disabled?: boolean;
+    checked?: boolean;
+    color?: 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow';
+    class?: string;
+    onchange?: (detail: { value: string }) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    value = "",
+    group = $bindable(""),
+    name = "",
+    disabled = false,
+    checked = undefined,
+    color = 'blue',
+    class: className = "",
+    onchange,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  let isChecked = $derived(checked !== undefined ? checked : group === value);
+
+  function handleChange() {
+    group = value;
+    onchange?.({ value });
+  }
+
+  const colorClasses = {
+    blue: 'text-blue-600',
+    red: 'text-red-600',
+    green: 'text-green-600',
+    purple: 'text-purple-600',
+    orange: 'text-orange-500',
+    yellow: 'text-yellow-400'
+  };
+
+  let colorClass = $derived(colorClasses[color] || colorClasses.blue);
+</script>
+
+<label
+  class="inline-flex items-center gap-2 {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}"
+  {...restProps}
+>
+  <input
+    type="radio"
+    {name}
+    {value}
+    {disabled}
+    checked={isChecked}
+    onchange={handleChange}
+    class="w-4 h-4 bg-gray-100 border-gray-300 focus:outline-none dark:bg-gray-700 dark:border-gray-600 {colorClass}"
+  />
+  {#if children}
+    <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
+      {@render children()}
+    </span>
+  {/if}
+</label>

package/dist/primitives/Skeleton/CardPlaceholder.svelte

@@ -1,87 +1,87 @@
-<script lang="ts">
-  interface Props {
-    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    animate?: boolean;
-    showAvatar?: boolean;
-    showImage?: boolean;
-    class?: string;
-    [key: string]: unknown;
-  }
-
-  let {
-    size = 'md',
-    animate = true,
-    showAvatar = true,
-    showImage = true,
-    class: className = '',
-    ...restProps
-  }: Props = $props();
-
-  const cardSizeClasses = {
-    sm: 'max-w-xs',
-    md: 'max-w-sm',
-    lg: 'max-w-md',
-    xl: 'max-w-lg',
-    '2xl': 'max-w-xl'
-  };
-
-  const imageSizeClasses = {
-    sm: 'h-32',
-    md: 'h-48',
-    lg: 'h-56',
-    xl: 'h-64',
-    '2xl': 'h-72'
-  };
-
-  let cardWidthClass = $derived(cardSizeClasses[size] || cardSizeClasses.md);
-  let imageHeightClass = $derived(imageSizeClasses[size] || imageSizeClasses.md);
-  let animateClass = $derived(animate ? 'animate-pulse' : '');
-</script>
-
-<div
-  role="status"
-  class="{cardWidthClass} p-4 border border-gray-200 rounded-lg shadow dark:border-gray-700 {animateClass} {className}"
-  aria-label="Loading card"
-  {...restProps}
->
-  {#if showImage}
-    <div class="flex items-center justify-center {imageHeightClass} mb-4 bg-gray-300 rounded-lg dark:bg-gray-700">
-      <svg
-        class="w-10 h-10 text-gray-200 dark:text-gray-600"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        viewBox="0 0 16 20"
-      >
-        <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"/>
-        <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
-      </svg>
-    </div>
-  {/if}
-
-  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-80 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-72 mb-2.5"></div>
-  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-sm"></div>
-
-  {#if showAvatar}
-    <div class="flex items-center mt-4">
-      <svg
-        class="w-8 h-8 text-gray-200 dark:text-gray-700 me-3"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-      >
-        <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
-      </svg>
-      <div>
-        <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2"></div>
-        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-48"></div>
-      </div>
-    </div>
-  {/if}
-
-  <span class="sr-only">Loading...</span>
-</div>
+<script lang="ts">
+  interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    animate?: boolean;
+    showAvatar?: boolean;
+    showImage?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    animate = true,
+    showAvatar = true,
+    showImage = true,
+    class: className = '',
+    ...restProps
+  }: Props = $props();
+
+  const cardSizeClasses = {
+    sm: 'max-w-xs',
+    md: 'max-w-sm',
+    lg: 'max-w-md',
+    xl: 'max-w-lg',
+    '2xl': 'max-w-xl'
+  };
+
+  const imageSizeClasses = {
+    sm: 'h-32',
+    md: 'h-48',
+    lg: 'h-56',
+    xl: 'h-64',
+    '2xl': 'h-72'
+  };
+
+  let cardWidthClass = $derived(cardSizeClasses[size] || cardSizeClasses.md);
+  let imageHeightClass = $derived(imageSizeClasses[size] || imageSizeClasses.md);
+  let animateClass = $derived(animate ? 'animate-pulse' : '');
+</script>
+
+<div
+  role="status"
+  class="{cardWidthClass} p-4 border border-gray-200 rounded-lg shadow dark:border-gray-700 {animateClass} {className}"
+  aria-label="Loading card"
+  {...restProps}
+>
+  {#if showImage}
+    <div class="flex items-center justify-center {imageHeightClass} mb-4 bg-gray-300 rounded-lg dark:bg-gray-700">
+      <svg
+        class="w-10 h-10 text-gray-200 dark:text-gray-600"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 16 20"
+      >
+        <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"/>
+        <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z"/>
+      </svg>
+    </div>
+  {/if}
+
+  <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-80 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-72 mb-2.5"></div>
+  <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-sm"></div>
+
+  {#if showAvatar}
+    <div class="flex items-center mt-4">
+      <svg
+        class="w-8 h-8 text-gray-200 dark:text-gray-700 me-3"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
+      </svg>
+      <div>
+        <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2"></div>
+        <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 w-48"></div>
+      </div>
+    </div>
+  {/if}
+
+  <span class="sr-only">Loading...</span>
+</div>

package/dist/primitives/Skeleton/ImagePlaceholder.svelte

@@ -1,59 +1,59 @@
-<script lang="ts">
-  interface Props {
-    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-    animate?: boolean;
-    showText?: boolean;
-    class?: string;
-    [key: string]: unknown;
-  }
-
-  let {
-    size = 'md',
-    animate = true,
-    showText = false,
-    class: className = '',
-    ...restProps
-  }: Props = $props();
-
-  const imageSizeClasses = {
-    sm: 'h-32',
-    md: 'h-48',
-    lg: 'h-64',
-    xl: 'h-80',
-    '2xl': 'h-96'
-  };
-
-  let imageHeightClass = $derived(imageSizeClasses[size] || imageSizeClasses.md);
-  let animateClass = $derived(animate ? 'animate-pulse' : '');
-</script>
-
-<div
-  role="status"
-  class="{animateClass} {className}"
-  aria-label="Loading image"
-  {...restProps}
->
-  <div class="flex items-center justify-center w-full {imageHeightClass} bg-gray-300 rounded-lg dark:bg-gray-700">
-    <svg
-      class="w-10 h-10 text-gray-200 dark:text-gray-600"
-      aria-hidden="true"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      viewBox="0 0 20 18"
-    >
-      <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
-    </svg>
-  </div>
-
-  {#if showText}
-    <div class="mt-4">
-      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-lg mb-2.5"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-md mb-2.5"></div>
-      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-md"></div>
-    </div>
-  {/if}
-
-  <span class="sr-only">Loading...</span>
-</div>
+<script lang="ts">
+  interface Props {
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    animate?: boolean;
+    showText?: boolean;
+    class?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    animate = true,
+    showText = false,
+    class: className = '',
+    ...restProps
+  }: Props = $props();
+
+  const imageSizeClasses = {
+    sm: 'h-32',
+    md: 'h-48',
+    lg: 'h-64',
+    xl: 'h-80',
+    '2xl': 'h-96'
+  };
+
+  let imageHeightClass = $derived(imageSizeClasses[size] || imageSizeClasses.md);
+  let animateClass = $derived(animate ? 'animate-pulse' : '');
+</script>
+
+<div
+  role="status"
+  class="{animateClass} {className}"
+  aria-label="Loading image"
+  {...restProps}
+>
+  <div class="flex items-center justify-center w-full {imageHeightClass} bg-gray-300 rounded-lg dark:bg-gray-700">
+    <svg
+      class="w-10 h-10 text-gray-200 dark:text-gray-600"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 20 18"
+    >
+      <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z"/>
+    </svg>
+  </div>
+
+  {#if showText}
+    <div class="mt-4">
+      <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-lg mb-2.5"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-md mb-2.5"></div>
+      <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-md"></div>
+    </div>
+  {/if}
+
+  <span class="sr-only">Loading...</span>
+</div>