@getmicdrop/svelte-components 5.5.5 → 5.6.0

package/dist/primitives/Icons/Icon.spec.js

@@ -1,175 +1,175 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import Icon from "./Icon.svelte";
-
-describe("Icon Component Tests", () => {
-  test("Renders Home icon", () => {
-    const { container } = render(Icon, { props: { name: "Home" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Shows icon", () => {
-    const { container } = render(Icon, { props: { name: "Shows" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Availability icon", () => {
-    const { container } = render(Icon, { props: { name: "Availability" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Profile icon", () => {
-    const { container } = render(Icon, { props: { name: "Profile" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Payment icon", () => {
-    const { container } = render(Icon, { props: { name: "Payment" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Notification icon", () => {
-    const { container } = render(Icon, { props: { name: "Notification" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Signout icon", () => {
-    const { container } = render(Icon, { props: { name: "Signout" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ChevronLeft icon", () => {
-    const { container } = render(Icon, { props: { name: "ChevronLeft" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ChevronRight icon", () => {
-    const { container } = render(Icon, { props: { name: "ChevronRight" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders CheckCircle icon", () => {
-    const { container } = render(Icon, { props: { name: "CheckCircle" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ErrorCircle icon", () => {
-    const { container } = render(Icon, { props: { name: "ErrorCircle" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ArrowLeft icon", () => {
-    const { container } = render(Icon, { props: { name: "ArrowLeft" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Back icon", () => {
-    const { container } = render(Icon, { props: { name: "Back" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Shows error message for unknown icon", () => {
-    render(Icon, { props: { name: "UnknownIcon" } });
-    expect(screen.getByText('Icon "UnknownIcon" not found.')).toBeInTheDocument();
-  });
-
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import Icon from "./Icon.svelte";
+
+describe("Icon Component Tests", () => {
+  test("Renders Home icon", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Shows icon", () => {
+    const { container } = render(Icon, { props: { name: "Shows" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Availability icon", () => {
+    const { container } = render(Icon, { props: { name: "Availability" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Profile icon", () => {
+    const { container } = render(Icon, { props: { name: "Profile" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Payment icon", () => {
+    const { container } = render(Icon, { props: { name: "Payment" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Notification icon", () => {
+    const { container } = render(Icon, { props: { name: "Notification" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Signout icon", () => {
+    const { container } = render(Icon, { props: { name: "Signout" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ChevronLeft icon", () => {
+    const { container } = render(Icon, { props: { name: "ChevronLeft" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ChevronRight icon", () => {
+    const { container } = render(Icon, { props: { name: "ChevronRight" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders CheckCircle icon", () => {
+    const { container } = render(Icon, { props: { name: "CheckCircle" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ErrorCircle icon", () => {
+    const { container } = render(Icon, { props: { name: "ErrorCircle" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ArrowLeft icon", () => {
+    const { container } = render(Icon, { props: { name: "ArrowLeft" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Back icon", () => {
+    const { container } = render(Icon, { props: { name: "Back" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Shows error message for unknown icon", () => {
+    render(Icon, { props: { name: "UnknownIcon" } });
+    expect(screen.getByText('Icon "UnknownIcon" not found.')).toBeInTheDocument();
+  });
+
   test("Default size is 24", () => {
     const { container } = render(Icon, { props: { name: "Home" } });
     const svg = container.querySelector("svg");
     // Check width or height attribute
     expect(svg).toHaveAttribute("width", "24");
   });
-
-  test("Accepts custom size prop", () => {
-    const { container } = render(Icon, { props: { name: "Home", size: "32" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toHaveAttribute("width", "32");
-  });
-
-  test("Default color is currentColor", () => {
-    const { container } = render(Icon, { props: { name: "Home" } });
-    const svg = container.querySelector("svg");
-    // Color is typically applied to stroke or fill
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Accepts custom color prop", () => {
-    const { container } = render(Icon, { props: { name: "Home", color: "red" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders More icon", () => {
-    const { container } = render(Icon, { props: { name: "More" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Info icon", () => {
-    const { container } = render(Icon, { props: { name: "Info" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Message icon", () => {
-    const { container } = render(Icon, { props: { name: "Message" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Reload icon", () => {
-    const { container } = render(Icon, { props: { name: "Reload" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Copy icon", () => {
-    const { container } = render(Icon, { props: { name: "Copy" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders Cross icon", () => {
-    const { container } = render(Icon, { props: { name: "Cross" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders ArrowRight icon", () => {
-    const { container } = render(Icon, { props: { name: "ArrowRight" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders DownArrow icon", () => {
-    const { container } = render(Icon, { props: { name: "DownArrow" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders MoreHori icon", () => {
-    const { container } = render(Icon, { props: { name: "MoreHori" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Renders CheckCircleOutline icon", () => {
-    const { container } = render(Icon, { props: { name: "CheckCircleOutline" } });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-});
+
+  test("Accepts custom size prop", () => {
+    const { container } = render(Icon, { props: { name: "Home", size: "32" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("width", "32");
+  });
+
+  test("Default color is currentColor", () => {
+    const { container } = render(Icon, { props: { name: "Home" } });
+    const svg = container.querySelector("svg");
+    // Color is typically applied to stroke or fill
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Accepts custom color prop", () => {
+    const { container } = render(Icon, { props: { name: "Home", color: "red" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders More icon", () => {
+    const { container } = render(Icon, { props: { name: "More" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Info icon", () => {
+    const { container } = render(Icon, { props: { name: "Info" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Message icon", () => {
+    const { container } = render(Icon, { props: { name: "Message" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Reload icon", () => {
+    const { container } = render(Icon, { props: { name: "Reload" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Copy icon", () => {
+    const { container } = render(Icon, { props: { name: "Copy" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders Cross icon", () => {
+    const { container } = render(Icon, { props: { name: "Cross" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders ArrowRight icon", () => {
+    const { container } = render(Icon, { props: { name: "ArrowRight" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders DownArrow icon", () => {
+    const { container } = render(Icon, { props: { name: "DownArrow" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders MoreHori icon", () => {
+    const { container } = render(Icon, { props: { name: "MoreHori" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Renders CheckCircleOutline icon", () => {
+    const { container } = render(Icon, { props: { name: "CheckCircleOutline" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+});

package/dist/primitives/Icons/Icon.stories.svelte

@@ -1,100 +1,100 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-    import Icon from "./Icon.svelte";
-
-  const { Story } = defineMeta({
-    title: "Components/Icons",
-    component: Icon,
-    argTypes: {
-      name: { control: "text" },
-      size: { control: "text" },
-      color: { control: "color" },
-    },
-  });
-
-  const iconNames = [
-    "Home",
-    "Shows",
-    "Availability",
-    "Profile",
-    "Payment",
-    "Notification",
-    "Signout",
-    "More",
-    "MoreHori",
-    "Info",
-    "ChevronLeft",
-    "ChevronRight",
-    "CheckCircle",
-    "CheckCircleOutline",
-    "ErrorCircle",
-    "ArrowLeft",
-    "ArrowRight",
-    "Back",
-    "DownArrow",
-    "Message",
-    "Reload",
-    "Copy",
-    "Cross",
-  ];
-
-</script>
-
-
-<Story name="All Icons">
-  <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-6 p-4">
-    {#each iconNames as iconName}
-      <div class="flex flex-col items-center gap-2 p-3 border rounded-lg hover:bg-gray-50 dark:bg-gray-800">
-        <Icon name={iconName} size="24" />
-        <span class="text-xs text-gray-500 dark:text-gray-400 text-center">{iconName}</span>
-      </div>
-    {/each}
-  </div>
-</Story>
-
-<Story name="Icon Sizes">
-  <div class="flex items-end gap-6 p-4">
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="Home" size="16" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">16px</span>
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="Home" size="20" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">20px</span>
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="Home" size="24" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">24px</span>
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="Home" size="32" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">32px</span>
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="Home" size="48" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">48px</span>
-    </div>
-  </div>
-</Story>
-
-<Story name="Icon Colors">
-  <div class="flex items-center gap-6 p-4">
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="CheckCircle" size="32" color="#22c55e" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">Success</span>
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="ErrorCircle" size="32" color="#ef4444" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">Error</span>
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="Info" size="32" color="#3b82f6" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">Info</span>
-    </div>
-    <div class="flex flex-col items-center gap-2">
-      <Icon name="Notification" size="32" color="#f59e0b" />
-      <span class="text-xs text-gray-500 dark:text-gray-400">Warning</span>
-    </div>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+    import Icon from "./Icon.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/Icons",
+    component: Icon,
+    argTypes: {
+      name: { control: "text" },
+      size: { control: "text" },
+      color: { control: "color" },
+    },
+  });
+
+  const iconNames = [
+    "Home",
+    "Shows",
+    "Availability",
+    "Profile",
+    "Payment",
+    "Notification",
+    "Signout",
+    "More",
+    "MoreHori",
+    "Info",
+    "ChevronLeft",
+    "ChevronRight",
+    "CheckCircle",
+    "CheckCircleOutline",
+    "ErrorCircle",
+    "ArrowLeft",
+    "ArrowRight",
+    "Back",
+    "DownArrow",
+    "Message",
+    "Reload",
+    "Copy",
+    "Cross",
+  ];
+
+</script>
+
+
+<Story name="All Icons">
+  <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-6 p-4">
+    {#each iconNames as iconName}
+      <div class="flex flex-col items-center gap-2 p-3 border rounded-lg hover:bg-gray-50 dark:bg-gray-800">
+        <Icon name={iconName} size="24" />
+        <span class="text-xs text-gray-500 dark:text-gray-400 text-center">{iconName}</span>
+      </div>
+    {/each}
+  </div>
+</Story>
+
+<Story name="Icon Sizes">
+  <div class="flex items-end gap-6 p-4">
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Home" size="16" />
+      <span class="text-xs text-gray-500 dark:text-gray-400">16px</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Home" size="20" />
+      <span class="text-xs text-gray-500 dark:text-gray-400">20px</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Home" size="24" />
+      <span class="text-xs text-gray-500 dark:text-gray-400">24px</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Home" size="32" />
+      <span class="text-xs text-gray-500 dark:text-gray-400">32px</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Home" size="48" />
+      <span class="text-xs text-gray-500 dark:text-gray-400">48px</span>
+    </div>
+  </div>
+</Story>
+
+<Story name="Icon Colors">
+  <div class="flex items-center gap-6 p-4">
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="CheckCircle" size="32" color="#22c55e" />
+      <span class="text-xs text-gray-500 dark:text-gray-400">Success</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="ErrorCircle" size="32" color="#ef4444" />
+      <span class="text-xs text-gray-500 dark:text-gray-400">Error</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Info" size="32" color="#3b82f6" />
+      <span class="text-xs text-gray-500 dark:text-gray-400">Info</span>
+    </div>
+    <div class="flex flex-col items-center gap-2">
+      <Icon name="Notification" size="32" color="#f59e0b" />
+      <span class="text-xs text-gray-500 dark:text-gray-400">Warning</span>
+    </div>
+  </div>
+</Story>

package/dist/primitives/Icons/Icon.svelte

@@ -1,55 +1,55 @@
-<script lang="ts">
-  import Home from "./Home.svelte";
-  import Shows from "./Shows.svelte";
-  import Availability from "./Availability.svelte";
-  import Profile from "./Profile.svelte";
-  import Payment from "./Payment.svelte";
-  import Notification from "./Notification.svelte";
-  import Signout from "./Signout.svelte";
-  import More from "./More.svelte";
-  import Info from "./Info.svelte";
-
-  import ChevronLeft from "./ChevronLeft.svelte";
-  import ChevronRight from "./ChevronRight.svelte";
-  import CheckCircle from "./CheckCircle.svelte";
-  import ErrorCircle from "./ErrorCircle.svelte";
-  import ArrowLeft from "./ArrowLeft.svelte";
-  import Back from "./Back.svelte";
-  import DownArrow from "./DownArrow.svelte";
-  import Message from "./Message.svelte";
-  import ArrowRight from "./ArrowRight.svelte";
-  import Reload from "./Reload.svelte";
-  import CheckCircleOutline from "./CheckCircleOutline.svelte";
-  import Copy from "./Copy.svelte";
-  import Cross from "./Cross.svelte";
-  import MoreHori from "./MoreHori.svelte";
-
-  const iconMap = {
-    Home,
-    Shows,
-    Availability,
-    Profile,
-    Payment,
-    Notification,
-    More,
-    MoreHori,
-    Info,
-    ChevronLeft,
-    ChevronRight,
-    Signout,
-    CheckCircle,
-    CheckCircleOutline,
-    ErrorCircle,
-    ArrowLeft,
-    ArrowRight,
-    Back,
-    DownArrow,
-    Message,
-    Reload,
-    Copy,
-    Cross,
-  };
-
+<script lang="ts">
+  import Home from "./Home.svelte";
+  import Shows from "./Shows.svelte";
+  import Availability from "./Availability.svelte";
+  import Profile from "./Profile.svelte";
+  import Payment from "./Payment.svelte";
+  import Notification from "./Notification.svelte";
+  import Signout from "./Signout.svelte";
+  import More from "./More.svelte";
+  import Info from "./Info.svelte";
+
+  import ChevronLeft from "./ChevronLeft.svelte";
+  import ChevronRight from "./ChevronRight.svelte";
+  import CheckCircle from "./CheckCircle.svelte";
+  import ErrorCircle from "./ErrorCircle.svelte";
+  import ArrowLeft from "./ArrowLeft.svelte";
+  import Back from "./Back.svelte";
+  import DownArrow from "./DownArrow.svelte";
+  import Message from "./Message.svelte";
+  import ArrowRight from "./ArrowRight.svelte";
+  import Reload from "./Reload.svelte";
+  import CheckCircleOutline from "./CheckCircleOutline.svelte";
+  import Copy from "./Copy.svelte";
+  import Cross from "./Cross.svelte";
+  import MoreHori from "./MoreHori.svelte";
+
+  const iconMap = {
+    Home,
+    Shows,
+    Availability,
+    Profile,
+    Payment,
+    Notification,
+    More,
+    MoreHori,
+    Info,
+    ChevronLeft,
+    ChevronRight,
+    Signout,
+    CheckCircle,
+    CheckCircleOutline,
+    ErrorCircle,
+    ArrowLeft,
+    ArrowRight,
+    Back,
+    DownArrow,
+    Message,
+    Reload,
+    Copy,
+    Cross,
+  };
+
   type IconName = keyof typeof iconMap;
   
   let { name, size = "24", color = "currentColor", class: className = "" }: { name: string; size?: string; color?: string; class?: string } = $props();