@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/Icons/Home.svelte

@@ -11,18 +11,18 @@
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <path
-    d="M12.5 18V11.3333C12.5 11.1123 12.4122 10.9004 12.2559 10.7441C12.0996 10.5878 11.8877 10.5 11.6667 10.5H8.33333C8.11232 10.5 7.90036 10.5878 7.74408 10.7441C7.5878 10.9004 7.5 11.1123 7.5 11.3333V18"
-    stroke={color}
-    stroke-width="1.66667"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M2.5 8.8342C2.49994 8.59176 2.55278 8.35222 2.65482 8.1323C2.75687 7.91238 2.90566 7.71737 3.09083 7.56087L8.92417 2.5617C9.22499 2.30746 9.60613 2.16797 10 2.16797C10.3939 2.16797 10.775 2.30746 11.0758 2.5617L16.9092 7.56087C17.0943 7.71737 17.2431 7.91238 17.3452 8.1323C17.4472 8.35222 17.5001 8.59176 17.5 8.8342V16.3342C17.5 16.7762 17.3244 17.2002 17.0118 17.5127C16.6993 17.8253 16.2754 18.0009 15.8333 18.0009H4.16667C3.72464 18.0009 3.30072 17.8253 2.98816 17.5127C2.67559 17.2002 2.5 16.7762 2.5 16.3342V8.8342Z"
-    stroke={color}
-    stroke-width="1.66667"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  />
-</svg>
+  <path
+    d="M12.5 18V11.3333C12.5 11.1123 12.4122 10.9004 12.2559 10.7441C12.0996 10.5878 11.8877 10.5 11.6667 10.5H8.33333C8.11232 10.5 7.90036 10.5878 7.74408 10.7441C7.5878 10.9004 7.5 11.1123 7.5 11.3333V18"
+    stroke={color}
+    stroke-width="1.66667"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M2.5 8.8342C2.49994 8.59176 2.55278 8.35222 2.65482 8.1323C2.75687 7.91238 2.90566 7.71737 3.09083 7.56087L8.92417 2.5617C9.22499 2.30746 9.60613 2.16797 10 2.16797C10.3939 2.16797 10.775 2.30746 11.0758 2.5617L16.9092 7.56087C17.0943 7.71737 17.2431 7.91238 17.3452 8.1323C17.4472 8.35222 17.5001 8.59176 17.5 8.8342V16.3342C17.5 16.7762 17.3244 17.2002 17.0118 17.5127C16.6993 17.8253 16.2754 18.0009 15.8333 18.0009H4.16667C3.72464 18.0009 3.30072 17.8253 2.98816 17.5127C2.67559 17.2002 2.5 16.7762 2.5 16.3342V8.8342Z"
+    stroke={color}
+    stroke-width="1.66667"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

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>