@getmicdrop/svelte-components 5.4.2 → 5.5.0

package/dist/primitives/Accordion/AccordionItem.svelte

@@ -1,95 +1,95 @@
-<script lang="ts">
-  /**
-   * AccordionItem Component - Flowbite Native (Pure Tailwind)
-   *
-   * Props:
-   *   open: boolean - Start expanded
-   *   border: boolean - Show bottom border (Flowbite API)
-   *   borderOpenClass: string - Additional classes when open
-   */
-  import type { Snippet } from 'svelte';
-  import { getContext, onMount } from "svelte";
-  import { slide } from "svelte/transition";
-  import type { Writable } from "svelte/store";
-  import { ChevronUpOutline } from "../Icons";
-  import { typography } from "../../tokens/typography";
-
-  interface Props {
-    open?: boolean;
-    class?: string;
-    border?: boolean;
-    borderOpenClass?: string;
-    header?: Snippet;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    open = false,
-    class: className = "",
-    border = true,
-    borderOpenClass = "",
-    header,
-    children,
-    ...restProps
-  }: Props = $props();
-
-  const { openItems, toggle, flush } = getContext<{
-    openItems: Writable<Set<string>>;
-    toggle: (id: string) => void;
-    flush: boolean;
-  }>("accordion");
-
-  // Generate unique ID for this item
-  let id = Math.random().toString(36).substring(2, 9);
-
-  onMount(() => {
-    if (open) {
-      toggle(id);
-    }
-  });
-
-  let isOpen = $derived($openItems.has(id));
-
-  function handleClick() {
-    toggle(id);
-  }
-
-  // Flowbite-native header classes
-  let headerClasses = $derived([
-    "flex items-center justify-between w-full p-5 font-medium text-left",
-    typography.smMuted,
-    "bg-gray-100 dark:bg-gray-800",
-    "hover:bg-gray-200 dark:hover:bg-gray-700",
-    "focus:outline-none",
-    "gap-3",
-    isOpen ? "bg-gray-100 dark:bg-gray-800" : "",
-  ].join(" "));
-</script>
-
-<div class="{className} {isOpen && borderOpenClass ? borderOpenClass : ''}" {...restProps}>
-  <h2>
-    <button
-      type="button"
-      class={headerClasses}
-      aria-expanded={isOpen}
-      onclick={handleClick}
-    >
-      <span class={typography.body}>
-        {#if header}{@render header()}{:else}Accordion Item{/if}
-      </span>
-      <!-- Flowbite arrow icon -->
-      <ChevronUpOutline class="w-3 h-3 shrink-0 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
-    </button>
-  </h2>
-
-  {#if isOpen}
-    <div transition:slide={{ duration: 200 }}>
-      <div class="p-5 {flush ? '' : 'border border-t-0 border-gray-200 dark:border-gray-700'}">
-        <p class={typography.bodyMuted}>
-          {#if children}{@render children()}{/if}
-        </p>
-      </div>
-    </div>
-  {/if}
-</div>
+<script lang="ts">
+  /**
+   * AccordionItem Component - Flowbite Native (Pure Tailwind)
+   *
+   * Props:
+   *   open: boolean - Start expanded
+   *   border: boolean - Show bottom border (Flowbite API)
+   *   borderOpenClass: string - Additional classes when open
+   */
+  import type { Snippet } from 'svelte';
+  import { getContext, onMount } from "svelte";
+  import { slide } from "svelte/transition";
+  import type { Writable } from "svelte/store";
+  import { ChevronUpOutline } from "../Icons";
+  import { typography } from "../../tokens/typography";
+
+  interface Props {
+    open?: boolean;
+    class?: string;
+    border?: boolean;
+    borderOpenClass?: string;
+    header?: Snippet;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    open = false,
+    class: className = "",
+    border = true,
+    borderOpenClass = "",
+    header,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const { openItems, toggle, flush } = getContext<{
+    openItems: Writable<Set<string>>;
+    toggle: (id: string) => void;
+    flush: boolean;
+  }>("accordion");
+
+  // Generate unique ID for this item
+  let id = Math.random().toString(36).substring(2, 9);
+
+  onMount(() => {
+    if (open) {
+      toggle(id);
+    }
+  });
+
+  let isOpen = $derived($openItems.has(id));
+
+  function handleClick() {
+    toggle(id);
+  }
+
+  // Flowbite-native header classes
+  let headerClasses = $derived([
+    "flex items-center justify-between w-full p-5 font-medium text-left",
+    typography.smMuted,
+    "bg-gray-100 dark:bg-gray-800",
+    "hover:bg-gray-200 dark:hover:bg-gray-700",
+    "focus:outline-none",
+    "gap-3",
+    isOpen ? "bg-gray-100 dark:bg-gray-800" : "",
+  ].join(" "));
+</script>
+
+<div class="{className} {isOpen && borderOpenClass ? borderOpenClass : ''}" {...restProps}>
+  <h2>
+    <button
+      type="button"
+      class={headerClasses}
+      aria-expanded={isOpen}
+      onclick={handleClick}
+    >
+      <span class={typography.body}>
+        {#if header}{@render header()}{:else}Accordion Item{/if}
+      </span>
+      <!-- Flowbite arrow icon -->
+      <ChevronUpOutline class="w-3 h-3 shrink-0 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+    </button>
+  </h2>
+
+  {#if isOpen}
+    <div transition:slide={{ duration: 200 }}>
+      <div class="p-5 {flush ? '' : 'border border-t-0 border-gray-200 dark:border-gray-700'}">
+        <p class={typography.bodyMuted}>
+          {#if children}{@render children()}{/if}
+        </p>
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/primitives/Alert/Alert.spec.js

@@ -1,170 +1,170 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import Alert from "./Alert.svelte";
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component } = render(Alert, {
-    props: { ...args },
-  });
-  return { user, component };
-}
-
-describe("Alert Component Tests", () => {
-  test("Renders alert with title", () => {
-    setupTest({
-      title: "Alert Title",
-    });
-    expect(screen.getByText("Alert Title")).toBeInTheDocument();
-  });
-
-  test("Renders alert with message", () => {
-    setupTest({
-      message: "This is an alert message",
-    });
-    expect(screen.getByText("This is an alert message")).toBeInTheDocument();
-  });
-
-  test("Renders alert with both title and message", () => {
-    setupTest({
-      title: "Warning",
-      message: "Something needs your attention",
-    });
-    expect(screen.getByText("Warning")).toBeInTheDocument();
-    expect(screen.getByText("Something needs your attention")).toBeInTheDocument();
-  });
-
-  test("Maps info type to blue color", () => {
-    const { component } = setupTest({
-      title: "Info Alert",
-      type: "info",
-    });
-    // The Alert component should have the correct Flowbite color prop
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-
-  test("Maps success type to green color", () => {
-    setupTest({
-      title: "Success Alert",
-      type: "success",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-
-  test("Maps warning type to yellow color", () => {
-    setupTest({
-      title: "Warning Alert",
-      type: "warning",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-
-  test("Maps danger type to red color", () => {
-    setupTest({
-      title: "Danger Alert",
-      type: "danger",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-
-  test("Defaults to info type when type is invalid", () => {
-    setupTest({
-      title: "Default Alert",
-      type: "invalid-type",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-
-  test("Shows dismiss button when onClose is provided", () => {
-    const onCloseMock = vi.fn();
-    setupTest({
-      title: "Dismissable Alert",
-      onClose: onCloseMock,
-    });
-    // Flowbite Alert shows dismiss button when dismissable
-    const dismissButton = screen.queryByRole("button");
-    expect(dismissButton).toBeInTheDocument();
-  });
-
-  test("Does not show dismiss button when onClose is not provided", () => {
-    setupTest({
-      title: "Non-dismissable Alert",
-    });
-    // Without onClose, there should be no dismiss button
-    const dismissButton = screen.queryByRole("button");
-    expect(dismissButton).not.toBeInTheDocument();
-  });
-
-  test("Calls onClose when dismiss button is clicked", async () => {
-    const onCloseMock = vi.fn();
-    const { user } = setupTest({
-      title: "Dismissable Alert",
-      onClose: onCloseMock,
-    });
-
-    const dismissButton = screen.getByRole("button");
-    await user.click(dismissButton);
-
-    // Note: Flowbite Alert may handle close differently - check if button exists
-    expect(dismissButton).toBeInTheDocument();
-  });
-
-  test("Renders with close button when onClose provided", async () => {
-    const onCloseMock = vi.fn();
-    setupTest({
-      title: "Dismissable Alert",
-      onClose: onCloseMock,
-    });
-
-    const dismissButton = screen.getByRole("button");
-    expect(dismissButton).toBeInTheDocument();
-  });
-
-  test("Has custom-alert class for dark mode styling", () => {
-    setupTest({
-      title: "Styled Alert",
-    });
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toHaveClass("custom-alert");
-  });
-
-  test("Renders without title when only message is provided", () => {
-    setupTest({
-      message: "Message only alert",
-    });
-    expect(screen.getByText("Message only alert")).toBeInTheDocument();
-  });
-
-  test("Renders empty alert when no props provided", () => {
-    setupTest({});
-    const alertElement = screen.getByRole("alert");
-    expect(alertElement).toBeInTheDocument();
-  });
-});
-
-describe("Alert Type Color Mapping", () => {
-  const typeColorMap = [
-    { type: "info", expectedColor: "blue" },
-    { type: "success", expectedColor: "green" },
-    { type: "warning", expectedColor: "yellow" },
-    { type: "danger", expectedColor: "red" },
-  ];
-
-  typeColorMap.forEach(({ type, expectedColor }) => {
-    test(`Type "${type}" maps to "${expectedColor}" color`, () => {
-      setupTest({
-        title: `${type} Alert`,
-        type,
-      });
-      // Alert renders successfully with correct type
-      const alertElement = screen.getByRole("alert");
-      expect(alertElement).toBeInTheDocument();
-    });
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import Alert from "./Alert.svelte";
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(Alert, {
+    props: { ...args },
+  });
+  return { user, component };
+}
+
+describe("Alert Component Tests", () => {
+  test("Renders alert with title", () => {
+    setupTest({
+      title: "Alert Title",
+    });
+    expect(screen.getByText("Alert Title")).toBeInTheDocument();
+  });
+
+  test("Renders alert with message", () => {
+    setupTest({
+      message: "This is an alert message",
+    });
+    expect(screen.getByText("This is an alert message")).toBeInTheDocument();
+  });
+
+  test("Renders alert with both title and message", () => {
+    setupTest({
+      title: "Warning",
+      message: "Something needs your attention",
+    });
+    expect(screen.getByText("Warning")).toBeInTheDocument();
+    expect(screen.getByText("Something needs your attention")).toBeInTheDocument();
+  });
+
+  test("Maps info type to blue color", () => {
+    const { component } = setupTest({
+      title: "Info Alert",
+      type: "info",
+    });
+    // The Alert component should have the correct Flowbite color prop
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+
+  test("Maps success type to green color", () => {
+    setupTest({
+      title: "Success Alert",
+      type: "success",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+
+  test("Maps warning type to yellow color", () => {
+    setupTest({
+      title: "Warning Alert",
+      type: "warning",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+
+  test("Maps danger type to red color", () => {
+    setupTest({
+      title: "Danger Alert",
+      type: "danger",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+
+  test("Defaults to info type when type is invalid", () => {
+    setupTest({
+      title: "Default Alert",
+      type: "invalid-type",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+
+  test("Shows dismiss button when onClose is provided", () => {
+    const onCloseMock = vi.fn();
+    setupTest({
+      title: "Dismissable Alert",
+      onClose: onCloseMock,
+    });
+    // Flowbite Alert shows dismiss button when dismissable
+    const dismissButton = screen.queryByRole("button");
+    expect(dismissButton).toBeInTheDocument();
+  });
+
+  test("Does not show dismiss button when onClose is not provided", () => {
+    setupTest({
+      title: "Non-dismissable Alert",
+    });
+    // Without onClose, there should be no dismiss button
+    const dismissButton = screen.queryByRole("button");
+    expect(dismissButton).not.toBeInTheDocument();
+  });
+
+  test("Calls onClose when dismiss button is clicked", async () => {
+    const onCloseMock = vi.fn();
+    const { user } = setupTest({
+      title: "Dismissable Alert",
+      onClose: onCloseMock,
+    });
+
+    const dismissButton = screen.getByRole("button");
+    await user.click(dismissButton);
+
+    // Note: Flowbite Alert may handle close differently - check if button exists
+    expect(dismissButton).toBeInTheDocument();
+  });
+
+  test("Renders with close button when onClose provided", async () => {
+    const onCloseMock = vi.fn();
+    setupTest({
+      title: "Dismissable Alert",
+      onClose: onCloseMock,
+    });
+
+    const dismissButton = screen.getByRole("button");
+    expect(dismissButton).toBeInTheDocument();
+  });
+
+  test("Has custom-alert class for dark mode styling", () => {
+    setupTest({
+      title: "Styled Alert",
+    });
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toHaveClass("custom-alert");
+  });
+
+  test("Renders without title when only message is provided", () => {
+    setupTest({
+      message: "Message only alert",
+    });
+    expect(screen.getByText("Message only alert")).toBeInTheDocument();
+  });
+
+  test("Renders empty alert when no props provided", () => {
+    setupTest({});
+    const alertElement = screen.getByRole("alert");
+    expect(alertElement).toBeInTheDocument();
+  });
+});
+
+describe("Alert Type Color Mapping", () => {
+  const typeColorMap = [
+    { type: "info", expectedColor: "blue" },
+    { type: "success", expectedColor: "green" },
+    { type: "warning", expectedColor: "yellow" },
+    { type: "danger", expectedColor: "red" },
+  ];
+
+  typeColorMap.forEach(({ type, expectedColor }) => {
+    test(`Type "${type}" maps to "${expectedColor}" color`, () => {
+      setupTest({
+        title: `${type} Alert`,
+        type,
+      });
+      // Alert renders successfully with correct type
+      const alertElement = screen.getByRole("alert");
+      expect(alertElement).toBeInTheDocument();
+    });
+  });
+});