@getmicdrop/svelte-components 5.17.4 → 5.19.0

package/dist/primitives/Accordion/Accordion.stories.svelte

@@ -1,75 +1,75 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Accordion from './Accordion.svelte';
-  import AccordionItem from './AccordionItem.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Accordion',
-    component: Accordion,
-    tags: ['autodocs'],
-    parameters: {
-      docs: {
-        description: {
-          component: 'Collapsible content sections. Use AccordionItem children to create expandable sections.',
-        },
-      },
-    },
-  });
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <div class="max-w-xl">
-      <Accordion>
-        <AccordionItem title="What is Micdrop?">
-          <p class="text-gray-600">Micdrop is a platform for comedians and venues to manage shows, ticket sales, and performer booking.</p>
-        </AccordionItem>
-        <AccordionItem title="How do I get started?">
-          <p class="text-gray-600">Sign up for an account, set up your venue or performer profile, and start creating shows.</p>
-        </AccordionItem>
-        <AccordionItem title="What are the fees?">
-          <p class="text-gray-600">Micdrop charges a small percentage per ticket sold. There are no monthly fees.</p>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Single Item Open">
-  {#snippet template()}
-    <div class="max-w-xl">
-      <Accordion>
-        <AccordionItem title="Expanded by default" open={true}>
-          <p class="text-gray-600">This item starts expanded.</p>
-        </AccordionItem>
-        <AccordionItem title="Collapsed item">
-          <p class="text-gray-600">Click to expand this item.</p>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Rich Content">
-  {#snippet template()}
-    <div class="max-w-xl">
-      <Accordion>
-        <AccordionItem title="Features">
-          <ul class="list-disc list-inside text-gray-600 space-y-2">
-            <li>Online ticket sales</li>
-            <li>Performer management</li>
-            <li>Show scheduling</li>
-            <li>Analytics dashboard</li>
-          </ul>
-        </AccordionItem>
-        <AccordionItem title="Pricing">
-          <div class="space-y-2">
-            <p class="text-gray-600"><strong>Basic:</strong> Free</p>
-            <p class="text-gray-600"><strong>Pro:</strong> $29/month</p>
-            <p class="text-gray-600"><strong>Enterprise:</strong> Contact us</p>
-          </div>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Accordion from './Accordion.svelte';
+  import AccordionItem from './AccordionItem.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Accordion',
+    component: Accordion,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: 'Collapsible content sections. Use AccordionItem children to create expandable sections.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="max-w-xl">
+      <Accordion>
+        <AccordionItem title="What is Micdrop?">
+          <p class="text-gray-600">Micdrop is a platform for comedians and venues to manage shows, ticket sales, and performer booking.</p>
+        </AccordionItem>
+        <AccordionItem title="How do I get started?">
+          <p class="text-gray-600">Sign up for an account, set up your venue or performer profile, and start creating shows.</p>
+        </AccordionItem>
+        <AccordionItem title="What are the fees?">
+          <p class="text-gray-600">Micdrop charges a small percentage per ticket sold. There are no monthly fees.</p>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Single Item Open">
+  {#snippet template()}
+    <div class="max-w-xl">
+      <Accordion>
+        <AccordionItem title="Expanded by default" open={true}>
+          <p class="text-gray-600">This item starts expanded.</p>
+        </AccordionItem>
+        <AccordionItem title="Collapsed item">
+          <p class="text-gray-600">Click to expand this item.</p>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Rich Content">
+  {#snippet template()}
+    <div class="max-w-xl">
+      <Accordion>
+        <AccordionItem title="Features">
+          <ul class="list-disc list-inside text-gray-600 space-y-2">
+            <li>Online ticket sales</li>
+            <li>Performer management</li>
+            <li>Show scheduling</li>
+            <li>Analytics dashboard</li>
+          </ul>
+        </AccordionItem>
+        <AccordionItem title="Pricing">
+          <div class="space-y-2">
+            <p class="text-gray-600"><strong>Basic:</strong> Free</p>
+            <p class="text-gray-600"><strong>Pro:</strong> $29/month</p>
+            <p class="text-gray-600"><strong>Enterprise:</strong> Contact us</p>
+          </div>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  {/snippet}
+</Story>

package/dist/primitives/Accordion/Accordion.svelte

@@ -1,62 +1,62 @@
-<script lang="ts">
-  /**
-   * Accordion Component - Flowbite Native (Pure Tailwind)
-   *
-   * Props:
-   *   multiple: boolean - Allow multiple items open at once
-   *   flush: boolean - Remove outer border/radius (Flowbite flush variant)
-   */
-  import type { Snippet } from 'svelte';
-  import { setContext } from "svelte";
-  import { writable } from "svelte/store";
-
-  interface Props {
-    multiple?: boolean;
-    flush?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    multiple = false,
-    flush = false,
-    class: className = "",
-    children,
-    ...restProps
-  }: Props = $props();
-
-  // Store to track which items are open
-  const openItems = writable(new Set<string>());
-
-  // Context for child AccordionItem components
-  // Use getters to capture current prop values (not initial values)
-  setContext("accordion", {
-    openItems,
-    get multiple() { return multiple; },
-    get flush() { return flush; },
-    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);
-      });
-    },
-  });
-
-  // Flowbite-native classes
-  // Note: overflow-hidden was removed to allow dropdowns/menus inside accordion items to render outside the container
-  let containerClasses = $derived(flush
-    ? "divide-y divide-gray-200 dark:divide-gray-700"
-    : "border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700");
-</script>
-
-<div class="{containerClasses} {className}" data-accordion={multiple ? "open" : "collapse"} {...restProps}>
-  {#if children}{@render children()}{/if}
-</div>
+<script lang="ts">
+  /**
+   * Accordion Component - Flowbite Native (Pure Tailwind)
+   *
+   * Props:
+   *   multiple: boolean - Allow multiple items open at once
+   *   flush: boolean - Remove outer border/radius (Flowbite flush variant)
+   */
+  import type { Snippet } from 'svelte';
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  interface Props {
+    multiple?: boolean;
+    flush?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    multiple = false,
+    flush = false,
+    class: className = "",
+    children,
+    ...restProps
+  }: Props = $props();
+
+  // Store to track which items are open
+  const openItems = writable(new Set<string>());
+
+  // Context for child AccordionItem components
+  // Use getters to capture current prop values (not initial values)
+  setContext("accordion", {
+    openItems,
+    get multiple() { return multiple; },
+    get flush() { return flush; },
+    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);
+      });
+    },
+  });
+
+  // Flowbite-native classes
+  // Note: overflow-hidden was removed to allow dropdowns/menus inside accordion items to render outside the container
+  let containerClasses = $derived(flush
+    ? "divide-y divide-gray-200 dark:divide-gray-700"
+    : "border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700");
+</script>
+
+<div class="{containerClasses} {className}" data-accordion={multiple ? "open" : "collapse"} {...restProps}>
+  {#if children}{@render children()}{/if}
+</div>

package/dist/primitives/Accordion/AccordionItem.svelte

@@ -1,95 +1,103 @@
-<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-hidden",
-    "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>
+<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";
+
+  const defaultLabels = {
+    accordionItem: 'Accordion Item',
+  };
+
+  interface Props {
+    open?: boolean;
+    class?: string;
+    border?: boolean;
+    borderOpenClass?: string;
+    header?: Snippet;
+    children?: Snippet;
+    labels?: Partial<typeof defaultLabels>;
+    [key: string]: unknown;
+  }
+
+  let {
+    open = false,
+    class: className = "",
+    border = true,
+    borderOpenClass = "",
+    header,
+    children,
+    labels: userLabels = {},
+    ...restProps
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  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-hidden",
+    "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}{labels.accordionItem}{/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/AccordionItem.svelte.d.ts

@@ -7,16 +7,18 @@
    *   borderOpenClass: string - Additional classes when open
    */
 import type { Snippet } from 'svelte';
-interface Props {
+declare const AccordionItem: import("svelte").Component<{
+    [key: string]: unknown;
     open?: boolean;
     class?: string;
     border?: boolean;
     borderOpenClass?: string;
     header?: Snippet;
     children?: Snippet;
-    [key: string]: unknown;
-}
-declare const AccordionItem: import("svelte").Component<Props, {}, "">;
+    labels?: Partial<{
+        accordionItem: string;
+    }>;
+}, {}, "">;
 type AccordionItem = ReturnType<typeof AccordionItem>;
 export default AccordionItem;
 //# sourceMappingURL=AccordionItem.svelte.d.ts.map

package/dist/primitives/Accordion/AccordionItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/AccordionItem.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;KAOK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA8EH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AccordionItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/AccordionItem.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;KAOK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAqGtC,QAAA,MAAM,aAAa;;WAhFR,OAAO;YACN,MAAM;aACL,OAAO;sBACE,MAAM;aACf,OAAO;eACL,OAAO;aACT,OAAO;;MAAsB;UA0EiB,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}