@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/primitives/Skeleton/Skeleton.stories.svelte

@@ -1,151 +1,151 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Skeleton from './Skeleton.svelte';
-  import ImagePlaceholder from './ImagePlaceholder.svelte';
-  import CardPlaceholder from './CardPlaceholder.svelte';
-  import ListPlaceholder from './ListPlaceholder.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Skeleton',
-    component: Skeleton,
-    tags: ['autodocs'],
-    parameters: {
-      docs: {
-        description: {
-          component: 'Loading placeholder components that animate while content loads.',
-        },
-      },
-    },
-  });
-</script>
-
-<Story name="Basic Lines">
-  {#snippet template()}
-    <div class="space-y-2 max-w-md">
-      <Skeleton class="h-4 w-full" />
-      <Skeleton class="h-4 w-3/4" />
-      <Skeleton class="h-4 w-1/2" />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Paragraph">
-  {#snippet template()}
-    <div class="space-y-3 max-w-lg">
-      <Skeleton class="h-6 w-1/3" />
-      <div class="space-y-2">
-        <Skeleton class="h-4 w-full" />
-        <Skeleton class="h-4 w-full" />
-        <Skeleton class="h-4 w-5/6" />
-      </div>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Avatar + Text">
-  {#snippet template()}
-    <div class="flex items-center gap-4">
-      <Skeleton class="h-12 w-12 rounded-full" />
-      <div class="space-y-2 flex-1">
-        <Skeleton class="h-4 w-32" />
-        <Skeleton class="h-3 w-48" />
-      </div>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Image Placeholder">
-  {#snippet template()}
-    <div class="max-w-sm">
-      <ImagePlaceholder />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Card Placeholder">
-  {#snippet template()}
-    <div class="max-w-sm">
-      <CardPlaceholder />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="List Placeholder">
-  {#snippet template()}
-    <div class="max-w-md">
-      <ListPlaceholder />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Grid of Cards">
-  {#snippet template()}
-    <div class="grid grid-cols-3 gap-4">
-      <CardPlaceholder />
-      <CardPlaceholder />
-      <CardPlaceholder />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Page Layout Loading">
-  {#snippet template()}
-    <div class="space-y-6 max-w-2xl">
-      <!-- Header -->
-      <div class="flex items-center justify-between">
-        <Skeleton class="h-8 w-48" />
-        <Skeleton class="h-10 w-24 rounded-lg" />
-      </div>
-
-      <!-- Stats -->
-      <div class="grid grid-cols-3 gap-4">
-        {#each [1, 2, 3] as _}
-          <div class="border rounded-lg p-4">
-            <Skeleton class="h-4 w-20 mb-2" />
-            <Skeleton class="h-8 w-16" />
-          </div>
-        {/each}
-      </div>
-
-      <!-- Table -->
-      <div class="border rounded-lg">
-        <div class="border-b p-4 flex gap-4">
-          <Skeleton class="h-4 w-24" />
-          <Skeleton class="h-4 w-32" />
-          <Skeleton class="h-4 w-20" />
-        </div>
-        <ListPlaceholder />
-      </div>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="All Variants">
-  {#snippet template()}
-    <div class="space-y-8">
-      <div>
-        <h3 class="text-sm font-medium text-gray-700 mb-3">Basic Skeleton</h3>
-        <div class="space-y-2 max-w-md">
-          <Skeleton class="h-4 w-full" />
-          <Skeleton class="h-4 w-3/4" />
-          <Skeleton class="h-4 w-1/2" />
-        </div>
-      </div>
-
-      <div class="grid grid-cols-3 gap-6">
-        <div>
-          <h3 class="text-sm font-medium text-gray-700 mb-3">Image Placeholder</h3>
-          <ImagePlaceholder />
-        </div>
-        <div>
-          <h3 class="text-sm font-medium text-gray-700 mb-3">Card Placeholder</h3>
-          <CardPlaceholder />
-        </div>
-        <div>
-          <h3 class="text-sm font-medium text-gray-700 mb-3">List Placeholder</h3>
-          <ListPlaceholder />
-        </div>
-      </div>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Skeleton from './Skeleton.svelte';
+  import ImagePlaceholder from './ImagePlaceholder.svelte';
+  import CardPlaceholder from './CardPlaceholder.svelte';
+  import ListPlaceholder from './ListPlaceholder.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Skeleton',
+    component: Skeleton,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: 'Loading placeholder components that animate while content loads.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="Basic Lines">
+  {#snippet template()}
+    <div class="space-y-2 max-w-md">
+      <Skeleton class="h-4 w-full" />
+      <Skeleton class="h-4 w-3/4" />
+      <Skeleton class="h-4 w-1/2" />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Paragraph">
+  {#snippet template()}
+    <div class="space-y-3 max-w-lg">
+      <Skeleton class="h-6 w-1/3" />
+      <div class="space-y-2">
+        <Skeleton class="h-4 w-full" />
+        <Skeleton class="h-4 w-full" />
+        <Skeleton class="h-4 w-5/6" />
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Avatar + Text">
+  {#snippet template()}
+    <div class="flex items-center gap-4">
+      <Skeleton class="h-12 w-12 rounded-full" />
+      <div class="space-y-2 flex-1">
+        <Skeleton class="h-4 w-32" />
+        <Skeleton class="h-3 w-48" />
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Image Placeholder">
+  {#snippet template()}
+    <div class="max-w-sm">
+      <ImagePlaceholder />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Card Placeholder">
+  {#snippet template()}
+    <div class="max-w-sm">
+      <CardPlaceholder />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="List Placeholder">
+  {#snippet template()}
+    <div class="max-w-md">
+      <ListPlaceholder />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Grid of Cards">
+  {#snippet template()}
+    <div class="grid grid-cols-3 gap-4">
+      <CardPlaceholder />
+      <CardPlaceholder />
+      <CardPlaceholder />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Page Layout Loading">
+  {#snippet template()}
+    <div class="space-y-6 max-w-2xl">
+      <!-- Header -->
+      <div class="flex items-center justify-between">
+        <Skeleton class="h-8 w-48" />
+        <Skeleton class="h-10 w-24 rounded-lg" />
+      </div>
+
+      <!-- Stats -->
+      <div class="grid grid-cols-3 gap-4">
+        {#each [1, 2, 3] as _}
+          <div class="border rounded-lg p-4">
+            <Skeleton class="h-4 w-20 mb-2" />
+            <Skeleton class="h-8 w-16" />
+          </div>
+        {/each}
+      </div>
+
+      <!-- Table -->
+      <div class="border rounded-lg">
+        <div class="border-b p-4 flex gap-4">
+          <Skeleton class="h-4 w-24" />
+          <Skeleton class="h-4 w-32" />
+          <Skeleton class="h-4 w-20" />
+        </div>
+        <ListPlaceholder />
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="All Variants">
+  {#snippet template()}
+    <div class="space-y-8">
+      <div>
+        <h3 class="text-sm font-medium text-text-secondary mb-3">Basic Skeleton</h3>
+        <div class="space-y-2 max-w-md">
+          <Skeleton class="h-4 w-full" />
+          <Skeleton class="h-4 w-3/4" />
+          <Skeleton class="h-4 w-1/2" />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-3 gap-6">
+        <div>
+          <h3 class="text-sm font-medium text-text-secondary mb-3">Image Placeholder</h3>
+          <ImagePlaceholder />
+        </div>
+        <div>
+          <h3 class="text-sm font-medium text-text-secondary mb-3">Card Placeholder</h3>
+          <CardPlaceholder />
+        </div>
+        <div>
+          <h3 class="text-sm font-medium text-text-secondary mb-3">List Placeholder</h3>
+          <ListPlaceholder />
+        </div>
+      </div>
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Skeleton/Skeleton.svelte

@@ -1,55 +1,55 @@
-<script lang="ts">
-  import { skeletonSizes, type SkeletonSize } from '../../tokens/sizing.js';
-
-  const defaultLabels = {
-    loadingContent: 'Loading content',
-    loading: 'Loading...',
-  };
-
-  interface Props {
-    size?: SkeletonSize;
-    lines?: number;
-    animate?: boolean;
-    class?: string;
-    labels?: Partial<typeof defaultLabels>;
-    [key: string]: unknown;
-  }
-
-  let {
-    size = 'md',
-    lines = 3,
-    animate = true,
-    class: className = '',
-    labels: userLabels = {},
-    ...restProps
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  const widthPatterns = [
-    'w-full',
-    'max-w-sm',
-    'w-full',
-    'max-w-80',
-    'max-w-72',
-    'w-full',
-    'max-w-72'
-  ];
-
-  let heightClass = $derived(skeletonSizes[size] || skeletonSizes.md);
-  let animateClass = $derived(animate ? 'animate-pulse' : '');
-</script>
-
-<div
-  role="status"
-  class="{animateClass} {className}"
-  aria-label={labels.loadingContent}
-  {...restProps}
->
-  {#each Array(lines) as _, i}
-    <div
-      class="{heightClass} bg-gray-200 rounded-full dark:bg-gray-700 {widthPatterns[i % widthPatterns.length]} {i < lines - 1 ? 'mb-2.5' : ''}"
-    ></div>
-  {/each}
-  <span class="sr-only">{labels.loading}</span>
-</div>
+<script lang="ts">
+  import { skeletonSizes, type SkeletonSize } from '../../tokens/sizing.js';
+
+  const defaultLabels = {
+    loadingContent: 'Loading content',
+    loading: 'Loading...',
+  };
+
+  interface Props {
+    size?: SkeletonSize;
+    lines?: number;
+    animate?: boolean;
+    class?: string;
+    labels?: Partial<typeof defaultLabels>;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    lines = 3,
+    animate = true,
+    class: className = '',
+    labels: userLabels = {},
+    ...restProps
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  const widthPatterns = [
+    'w-full',
+    'max-w-sm',
+    'w-full',
+    'max-w-80',
+    'max-w-72',
+    'w-full',
+    'max-w-72'
+  ];
+
+  let heightClass = $derived(skeletonSizes[size] || skeletonSizes.md);
+  let animateClass = $derived(animate ? 'animate-pulse' : '');
+</script>
+
+<div
+  role="status"
+  class="{animateClass} {className}"
+  aria-label={labels.loadingContent}
+  {...restProps}
+>
+  {#each Array(lines) as _, i}
+    <div
+      class="{heightClass} bg-bg-tertiary rounded-full {widthPatterns[i % widthPatterns.length]} {i < lines - 1 ? 'mb-2.5' : ''}"
+    ></div>
+  {/each}
+  <span class="sr-only">{labels.loading}</span>
+</div>

package/dist/primitives/Spinner/Spinner.spec.js

@@ -1,84 +1,83 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import Spinner from "./Spinner.svelte";
-
-describe("Spinner Component Tests", () => {
-  test("Renders spinner with SVG element", () => {
-    const { container } = render(Spinner);
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("SVG has role status for accessibility", () => {
-    const { container } = render(Spinner);
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveAttribute("role", "status");
-  });
-
-  test("Has loading text for screen readers", () => {
-    render(Spinner);
-    expect(screen.getByText("Loading...")).toBeInTheDocument();
-  });
-
-  test("Loading text is sr-only", () => {
-    render(Spinner);
-    const loadingText = screen.getByText("Loading...");
-    expect(loadingText).toHaveClass("sr-only");
-  });
-
-  test("SVG is hidden from accessibility tree", () => {
-    const { container } = render(Spinner);
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveAttribute("aria-hidden", "true");
-  });
-
-  test("SVG has animation class", () => {
-    const { container } = render(Spinner);
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveClass("animate-spin");
-  });
-
-  test("SVG has correct viewBox", () => {
-    const { container } = render(Spinner);
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveAttribute("viewBox", "0 0 100 101");
-  });
-
-  test("Has dark mode text color classes", () => {
-    const { container } = render(Spinner);
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveClass("text-gray-200");
-    expect(svg).toHaveClass("dark:text-gray-600");
-  });
-
-  test("Has default blue fill color", () => {
-    const { container } = render(Spinner);
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveClass("fill-blue-600");
-  });
-
-  test("Accepts custom class", () => {
-    const { container } = render(Spinner, { class: "custom-class" });
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveClass("custom-class");
-  });
-
-  test("Contains two path elements", () => {
-    const { container } = render(Spinner);
-    const paths = container.querySelectorAll("path");
-    expect(paths.length).toBe(2);
-  });
-
-  test("Falls back to md size when an invalid size is provided", () => {
-    const { container } = render(Spinner, { size: "invalid-size" });
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveClass("w-8");
-    expect(svg).toHaveClass("h-8");
-  });
-
-  test("Falls back to blue color when an invalid color is provided", () => {
-    const { container } = render(Spinner, { color: "invalid-color" });
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveClass("fill-blue-600");
-  });
-});
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import Spinner from "./Spinner.svelte";
+
+describe("Spinner Component Tests", () => {
+  test("Renders spinner with SVG element", () => {
+    const { container } = render(Spinner);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("SVG has role status for accessibility", () => {
+    const { container } = render(Spinner);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("role", "status");
+  });
+
+  test("Has loading text for screen readers", () => {
+    render(Spinner);
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+  });
+
+  test("Loading text is sr-only", () => {
+    render(Spinner);
+    const loadingText = screen.getByText("Loading...");
+    expect(loadingText).toHaveClass("sr-only");
+  });
+
+  test("SVG is hidden from accessibility tree", () => {
+    const { container } = render(Spinner);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("aria-hidden", "true");
+  });
+
+  test("SVG has animation class", () => {
+    const { container } = render(Spinner);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("animate-spin");
+  });
+
+  test("SVG has correct viewBox", () => {
+    const { container } = render(Spinner);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("viewBox", "0 0 100 101");
+  });
+
+  test("Has text color classes", () => {
+    const { container } = render(Spinner);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("text-text-tertiary");
+  });
+
+  test("Has default blue fill color", () => {
+    const { container } = render(Spinner);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("fill-brand-primary");
+  });
+
+  test("Accepts custom class", () => {
+    const { container } = render(Spinner, { class: "custom-class" });
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("custom-class");
+  });
+
+  test("Contains two path elements", () => {
+    const { container } = render(Spinner);
+    const paths = container.querySelectorAll("path");
+    expect(paths.length).toBe(2);
+  });
+
+  test("Falls back to md size when an invalid size is provided", () => {
+    const { container } = render(Spinner, { size: "invalid-size" });
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("w-8");
+    expect(svg).toHaveClass("h-8");
+  });
+
+  test("Falls back to blue color when an invalid color is provided", () => {
+    const { container } = render(Spinner, { color: "invalid-color" });
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("fill-brand-primary");
+  });
+});

package/dist/primitives/Spinner/Spinner.stories.svelte

@@ -1,29 +1,29 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-    import Spinner from "./Spinner.svelte";
-
-  const { Story } = defineMeta({
-    title: "Components/Spinner",
-    component: Spinner,
-  });
-
-</script>
-
-
-<Story name="Default Spinner">
-  <Spinner />
-</Story>
-
-<Story name="Spinner in Container">
-  <div class="flex items-center justify-center h-40 bg-gray-100 dark:bg-gray-700 rounded-lg">
-    <Spinner />
-  </div>
-</Story>
-
-<Story name="Spinner with Text">
-  <div class="flex flex-col items-center gap-4">
-    <Spinner />
-    <p class="text-gray-500 dark:text-gray-400">Loading data...</p>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+    import Spinner from "./Spinner.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/Spinner",
+    component: Spinner,
+  });
+
+</script>
+
+
+<Story name="Default Spinner">
+  <Spinner />
+</Story>
+
+<Story name="Spinner in Container">
+  <div class="flex items-center justify-center h-40 bg-muted rounded-lg">
+    <Spinner />
+  </div>
+</Story>
+
+<Story name="Spinner with Text">
+  <div class="flex flex-col items-center gap-4">
+    <Spinner />
+    <p class="text-muted-foreground">Loading data...</p>
+  </div>
+</Story>