@getmicdrop/svelte-components 5.17.1 → 5.17.3

package/dist/presets/badges.js

@@ -1,112 +1,112 @@
-/**
- * Badge Presets - Domain-to-Color Mappings
- *
- * These presets provide a migration path for apps that were using
- * domain-specific badge variants (host, headliner, etc.).
- *
- * Usage:
- *   import { ROLE_BADGE_VARIANTS, ENTITY_BADGE_VARIANTS } from '@getmicdrop/svelte-components/presets/badges';
- *   <Badge variant={ROLE_BADGE_VARIANTS[role]}>{role}</Badge>
- *
- * Note: For app-specific customization, apps should define their own
- * mappings in their constants files (e.g., $lib/constants/position.ts).
- */
-
-/**
- * Role/Position badge color mappings
- * Maps performer roles to Flowbite color variants
- */
-export const ROLE_BADGE_VARIANTS = {
-  Host: 'red',
-  Headliner: 'purple',
-  Feature: 'blue',
-  'Special Guest': 'green',
-  Opener: 'orange',
-  Guest: 'gray',
-  Teacher: 'yellow',
-  Assistant: 'indigo',
-};
-
-/**
- * Entity type badge color mappings
- * Maps entity types to Flowbite color variants
- */
-export const ENTITY_BADGE_VARIANTS = {
-  event: 'blue',
-  venue: 'green',
-  user: 'purple',
-  order: 'orange',
-  performer: 'pink',
-};
-
-/**
- * Status badge semantic mappings
- * Maps status strings to semantic variants
- */
-export const STATUS_BADGE_VARIANTS = {
-  // Success states
-  Completed: 'success',
-  Active: 'success',
-  Confirmed: 'success',
-  'On Sale': 'success',
-  Live: 'success',
-  Enabled: 'success',
-  Yes: 'success',
-  Redeemed: 'success',
-  Online: 'success',
-
-  // Warning states
-  Pending: 'warning',
-  Scheduled: 'warning',
-  Paused: 'warning',
-  Ended: 'warning',
-  Refunded: 'warning',
-  'Partially refunded': 'warning',
-  Pinned: 'warning',
-  'Usage Limit Reached': 'warning',
-
-  // Error states
-  Cancelled: 'error',
-  Canceled: 'error',
-  Declined: 'error',
-  'No show': 'error',
-  Expired: 'error',
-  'Sales closed': 'error',
-
-  // Info states
-  'In Progress': 'info',
-  Invited: 'info',
-
-  // Neutral states
-  Draft: 'neutral',
-  Offline: 'neutral',
-  Disabled: 'neutral',
-  No: 'neutral',
-};
-
-/**
- * Get badge variant for a role
- * @param {string} role - The role name
- * @returns {string} Flowbite color variant
- */
-export function getRoleBadgeVariant(role) {
-  return ROLE_BADGE_VARIANTS[role] || 'gray';
-}
-
-/**
- * Get badge variant for an entity type
- * @param {string} entityType - The entity type
- * @returns {string} Flowbite color variant
- */
-export function getEntityBadgeVariant(entityType) {
-  return ENTITY_BADGE_VARIANTS[entityType] || 'gray';
-}
-
-/**
- * Get badge variant for a status
- * @param {string} status - The status string
- * @returns {string} Semantic variant
- */
-export function getStatusBadgeVariant(status) {
-  return STATUS_BADGE_VARIANTS[status] || 'neutral';
-}
+/**
+ * Badge Presets - Domain-to-Color Mappings
+ *
+ * These presets provide a migration path for apps that were using
+ * domain-specific badge variants (host, headliner, etc.).
+ *
+ * Usage:
+ *   import { ROLE_BADGE_VARIANTS, ENTITY_BADGE_VARIANTS } from '@getmicdrop/svelte-components/presets/badges';
+ *   <Badge variant={ROLE_BADGE_VARIANTS[role]}>{role}</Badge>
+ *
+ * Note: For app-specific customization, apps should define their own
+ * mappings in their constants files (e.g., $lib/constants/position.ts).
+ */
+
+/**
+ * Role/Position badge color mappings
+ * Maps performer roles to Flowbite color variants
+ */
+export const ROLE_BADGE_VARIANTS = {
+  Host: 'red',
+  Headliner: 'purple',
+  Feature: 'blue',
+  'Special Guest': 'green',
+  Opener: 'orange',
+  Guest: 'gray',
+  Teacher: 'yellow',
+  Assistant: 'indigo',
+};
+
+/**
+ * Entity type badge color mappings
+ * Maps entity types to Flowbite color variants
+ */
+export const ENTITY_BADGE_VARIANTS = {
+  event: 'blue',
+  venue: 'green',
+  user: 'purple',
+  order: 'orange',
+  performer: 'pink',
+};
+
+/**
+ * Status badge semantic mappings
+ * Maps status strings to semantic variants
+ */
+export const STATUS_BADGE_VARIANTS = {
+  // Success states
+  Completed: 'success',
+  Active: 'success',
+  Confirmed: 'success',
+  'On Sale': 'success',
+  Live: 'success',
+  Enabled: 'success',
+  Yes: 'success',
+  Redeemed: 'success',
+  Online: 'success',
+
+  // Warning states
+  Pending: 'warning',
+  Scheduled: 'warning',
+  Paused: 'warning',
+  Ended: 'warning',
+  Refunded: 'warning',
+  'Partially refunded': 'warning',
+  Pinned: 'warning',
+  'Usage Limit Reached': 'warning',
+
+  // Error states
+  Cancelled: 'error',
+  Canceled: 'error',
+  Declined: 'error',
+  'No show': 'error',
+  Expired: 'error',
+  'Sales closed': 'error',
+
+  // Info states
+  'In Progress': 'info',
+  Invited: 'info',
+
+  // Neutral states
+  Draft: 'neutral',
+  Offline: 'neutral',
+  Disabled: 'neutral',
+  No: 'neutral',
+};
+
+/**
+ * Get badge variant for a role
+ * @param {string} role - The role name
+ * @returns {string} Flowbite color variant
+ */
+export function getRoleBadgeVariant(role) {
+  return ROLE_BADGE_VARIANTS[role] || 'gray';
+}
+
+/**
+ * Get badge variant for an entity type
+ * @param {string} entityType - The entity type
+ * @returns {string} Flowbite color variant
+ */
+export function getEntityBadgeVariant(entityType) {
+  return ENTITY_BADGE_VARIANTS[entityType] || 'gray';
+}
+
+/**
+ * Get badge variant for a status
+ * @param {string} status - The status string
+ * @returns {string} Semantic variant
+ */
+export function getStatusBadgeVariant(status) {
+  return STATUS_BADGE_VARIANTS[status] || 'neutral';
+}

package/dist/presets/buttons.js

@@ -1,76 +1,76 @@
-/**
- * Button Presets - Common Button Configurations
- *
- * These presets provide ready-to-use button configurations for common actions.
- * Use spread syntax to apply: <Button {...BUTTON_PRESETS.save}>Save</Button>
- *
- * Note: These are not separate components - they're prop objects.
- * This keeps the Button component simple while enabling common patterns.
- */
-
-/**
- * Common button presets
- * Spread these into Button component for consistent styling
- */
-export const BUTTON_PRESETS = {
-  /** Primary save action */
-  save: {
-    variant: 'default',
-    type: 'submit',
-  },
-
-  /** Cancel/back action */
-  cancel: {
-    variant: 'alternative',
-    type: 'button',
-  },
-
-  /** Destructive delete action */
-  delete: {
-    variant: 'red',
-    type: 'button',
-  },
-
-  /** Form submit (alias for save) */
-  submit: {
-    variant: 'default',
-    type: 'submit',
-  },
-
-  /** Secondary action */
-  secondary: {
-    variant: 'light',
-    type: 'button',
-  },
-
-  /** Outline style */
-  outline: {
-    variant: 'outline',
-    type: 'button',
-  },
-
-  /** Ghost/text style */
-  ghost: {
-    variant: 'ghost',
-    type: 'button',
-  },
-};
-
-/**
- * Icon button presets (square, icon-only)
- */
-export const ICON_BUTTON_PRESETS = {
-  /** Default icon button */
-  default: {
-    variant: 'ghost',
-    size: 'sm',
-    className: 'p-2',
-  },
-
-  /** Destructive icon button */
-  destructive: {
-    variant: 'ghost',
-    size: 'sm',
-    className: 'p-2 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900',
-  },
-};
+/**
+ * Button Presets - Common Button Configurations
+ *
+ * These presets provide ready-to-use button configurations for common actions.
+ * Use spread syntax to apply: <Button {...BUTTON_PRESETS.save}>Save</Button>
+ *
+ * Note: These are not separate components - they're prop objects.
+ * This keeps the Button component simple while enabling common patterns.
+ */
+
+/**
+ * Common button presets
+ * Spread these into Button component for consistent styling
+ */
+export const BUTTON_PRESETS = {
+  /** Primary save action */
+  save: {
+    variant: 'default',
+    type: 'submit',
+  },
+
+  /** Cancel/back action */
+  cancel: {
+    variant: 'alternative',
+    type: 'button',
+  },
+
+  /** Destructive delete action */
+  delete: {
+    variant: 'red',
+    type: 'button',
+  },
+
+  /** Form submit (alias for save) */
+  submit: {
+    variant: 'default',
+    type: 'submit',
+  },
+
+  /** Secondary action */
+  secondary: {
+    variant: 'light',
+    type: 'button',
+  },
+
+  /** Outline style */
+  outline: {
+    variant: 'outline',
+    type: 'button',
+  },
+
+  /** Ghost/text style */
+  ghost: {
+    variant: 'ghost',
+    type: 'button',
+  },
+};
+
+/**
+ * Icon button presets (square, icon-only)
+ */
+export const ICON_BUTTON_PRESETS = {
+  /** Default icon button */
+  default: {
+    variant: 'ghost',
+    size: 'sm',
+    className: 'p-2',
+  },
+
+  /** Destructive icon button */
+  destructive: {
+    variant: 'ghost',
+    size: 'sm',
+    className: 'p-2 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900',
+  },
+};

package/dist/presets/index.js

@@ -1,9 +1,9 @@
-/**
- * Design System Presets
- *
- * Pre-configured prop objects for common component patterns.
- * Use spread syntax: <Button {...BUTTON_PRESETS.save}>Save</Button>
- */
-
-export * from './badges.js';
-export * from './buttons.js';
+/**
+ * Design System Presets
+ *
+ * Pre-configured prop objects for common component patterns.
+ * Use spread syntax: <Button {...BUTTON_PRESETS.save}>Save</Button>
+ */
+
+export * from './badges.js';
+export * from './buttons.js';

package/dist/primitives/Accordion/Accordion.spec.js

@@ -1,6 +1,25 @@
-import { render, screen } from '@testing-library/svelte';
-import { expect, describe, test } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
+import { tick } from 'svelte';
+import { expect, describe, test, vi } from 'vitest';
 import Accordion from './Accordion.svelte';
+import AccordionItemWrapper from './AccordionToggleWrapper.test.svelte';
+
+// Mock the transitions module to avoid animation issues in tests
+vi.mock('../../utils/transitions.js', () => ({
+  safeSlide: () => ({
+    delay: 0,
+    duration: 0,
+    css: () => ''
+  })
+}));
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
 
 describe('Accordion Component', () => {
   test('renders correctly with default props', () => {
@@ -66,6 +85,14 @@ describe('Accordion Component', () => {
     const accordion = container.querySelector('[data-accordion]');
     expect(accordion).toHaveClass('dark:border-gray-700');
   });
+
+  test('renders children snippet content', () => {
+    const { container } = render(Accordion, {
+      props: { children: textSnippet('Accordion body') }
+    });
+    const accordion = container.querySelector('[data-accordion]');
+    expect(accordion.textContent).toContain('Accordion body');
+  });
 });
 
 describe('Accordion Props', () => {
@@ -81,3 +108,86 @@ describe('Accordion Props', () => {
     expect(accordion).toHaveClass('border');
   });
 });
+
+describe('Accordion toggle context (single mode)', () => {
+  test('opens an item when toggled', async () => {
+    const user = userEvent.setup();
+    const { container } = render(AccordionItemWrapper, {
+      props: { multiple: false }
+    });
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBe(2);
+
+    // Click first item to open
+    await user.click(buttons[0]);
+    await tick();
+    await waitFor(() => {
+      expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+
+  test('closes an item when toggled again', async () => {
+    const user = userEvent.setup();
+    const { container } = render(AccordionItemWrapper, {
+      props: { multiple: false }
+    });
+    const buttons = container.querySelectorAll('button');
+
+    // Open then close
+    await user.click(buttons[0]);
+    await tick();
+    await user.click(buttons[0]);
+    await tick();
+    await waitFor(() => {
+      expect(buttons[0]).toHaveAttribute('aria-expanded', 'false');
+    });
+  });
+
+  test('in single mode, opening a second item closes the first', async () => {
+    const user = userEvent.setup();
+    const { container } = render(AccordionItemWrapper, {
+      props: { multiple: false }
+    });
+    const buttons = container.querySelectorAll('button');
+
+    // Open first
+    await user.click(buttons[0]);
+    await tick();
+    await waitFor(() => {
+      expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    // Open second -- first should close
+    await user.click(buttons[1]);
+    await tick();
+    await waitFor(() => {
+      expect(buttons[0]).toHaveAttribute('aria-expanded', 'false');
+      expect(buttons[1]).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+});
+
+describe('Accordion toggle context (multiple mode)', () => {
+  test('in multiple mode, opening a second item keeps the first open', async () => {
+    const user = userEvent.setup();
+    const { container } = render(AccordionItemWrapper, {
+      props: { multiple: true }
+    });
+    const buttons = container.querySelectorAll('button');
+
+    // Open first
+    await user.click(buttons[0]);
+    await tick();
+    await waitFor(() => {
+      expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
+    });
+
+    // Open second -- first stays open
+    await user.click(buttons[1]);
+    await tick();
+    await waitFor(() => {
+      expect(buttons[0]).toHaveAttribute('aria-expanded', 'true');
+      expect(buttons[1]).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+});

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>