@getmicdrop/svelte-components 5.5.1 → 5.5.5

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 { safeSlide } from "../../utils/transitions.js";
+  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:safeSlide={{ 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/Accordion/AccordionItemWrapper.test.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  /**
+   * Test wrapper for AccordionItem
+   * Provides the necessary accordion context that AccordionItem expects
+   */
+  import type { Snippet } from 'svelte';
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import AccordionItem from './AccordionItem.svelte';
+
+  interface Props {
+    /** Allow multiple items open at once */
+    multiple?: boolean;
+    /** Remove outer border/radius (Flowbite flush variant) */
+    flush?: boolean;
+    /** Initial open state of the item */
+    open?: boolean;
+    /** Show bottom border */
+    border?: boolean;
+    /** Additional classes when open */
+    borderOpenClass?: string;
+    /** Custom class for the item */
+    class?: string;
+    /** Header snippet */
+    header?: Snippet;
+    /** Children snippet */
+    children?: Snippet;
+    /** Expose the openItems store for testing */
+    openItems?: any;
+    /** Expose the toggle function for testing */
+    toggleFn?: any;
+    /** Data attributes for testing */
+    'data-testid'?: string;
+    'data-custom'?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    multiple = false,
+    flush = false,
+    open = false,
+    border = true,
+    borderOpenClass = '',
+    class: className = '',
+    header,
+    children,
+    openItems: exposedOpenItems = $bindable(null),
+    toggleFn: exposedToggleFn = $bindable(null),
+    'data-testid': dataTestId,
+    'data-custom': dataCustom,
+    ...restProps
+  }: Props = $props();
+
+  // Create the accordion context
+  const openItems = writable(new Set<string>());
+
+  // Expose openItems to parent for testing
+  exposedOpenItems = openItems;
+
+  const toggle = (id: string) => {
+    openItems.update((items) => {
+      if (items.has(id)) {
+        items.delete(id);
+      } else {
+        if (!multiple) {
+          items.clear();
+        }
+        items.add(id);
+      }
+      return new Set(items);
+    });
+  };
+
+  // Expose toggle function to parent for testing
+  exposedToggleFn = toggle;
+
+  setContext("accordion", {
+    openItems,
+    toggle,
+    get flush() { return flush; }
+  });
+</script>
+
+<AccordionItem
+  {open}
+  {border}
+  {borderOpenClass}
+  class={className}
+  data-testid={dataTestId}
+  data-custom={dataCustom}
+  {...restProps}
+>
+  {#snippet header()}
+    {#if header}
+      {@render header()}
+    {:else}
+      Test Header
+    {/if}
+  {/snippet}
+  {#snippet children()}
+    {#if children}
+      {@render children()}
+    {:else}
+      Test Content
+    {/if}
+  {/snippet}
+</AccordionItem>

package/dist/primitives/Accordion/AccordionItemWrapper.test.svelte.d.ts

@@ -0,0 +1,35 @@
+/**
+   * Test wrapper for AccordionItem
+   * Provides the necessary accordion context that AccordionItem expects
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Allow multiple items open at once */
+    multiple?: boolean;
+    /** Remove outer border/radius (Flowbite flush variant) */
+    flush?: boolean;
+    /** Initial open state of the item */
+    open?: boolean;
+    /** Show bottom border */
+    border?: boolean;
+    /** Additional classes when open */
+    borderOpenClass?: string;
+    /** Custom class for the item */
+    class?: string;
+    /** Header snippet */
+    header?: Snippet;
+    /** Children snippet */
+    children?: Snippet;
+    /** Expose the openItems store for testing */
+    openItems?: any;
+    /** Expose the toggle function for testing */
+    toggleFn?: any;
+    /** Data attributes for testing */
+    'data-testid'?: string;
+    'data-custom'?: string;
+    [key: string]: unknown;
+}
+declare const AccordionItemWrapper: import("svelte").Component<Props, {}, "openItems" | "toggleFn">;
+type AccordionItemWrapper = ReturnType<typeof AccordionItemWrapper>;
+export default AccordionItemWrapper;
+//# sourceMappingURL=AccordionItemWrapper.test.svelte.d.ts.map

package/dist/primitives/Accordion/AccordionItemWrapper.test.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItemWrapper.test.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/AccordionItemWrapper.test.svelte.ts"],"names":[],"mappings":"AAGA;;;KAGK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMpC,UAAU,KAAK;IACb,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qCAAqC;IACrC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAsEH,QAAA,MAAM,oBAAoB,iEAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}