@getmicdrop/svelte-components 5.5.4 → 5.6.0

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/buttons.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=buttons.spec.d.ts.map

package/dist/presets/buttons.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons.spec.d.ts","sourceRoot":"","sources":["../../src/lib/presets/buttons.spec.js"],"names":[],"mappings":""}

package/dist/presets/buttons.spec.js

@@ -0,0 +1,135 @@
+import { describe, it, expect } from 'vitest';
+import { BUTTON_PRESETS, ICON_BUTTON_PRESETS } from './buttons.js';
+
+describe('Button Presets', () => {
+  describe('save preset', () => {
+    it('has default variant', () => {
+      expect(BUTTON_PRESETS.save.variant).toBe('default');
+    });
+
+    it('has submit type', () => {
+      expect(BUTTON_PRESETS.save.type).toBe('submit');
+    });
+  });
+
+  describe('cancel preset', () => {
+    it('has alternative variant', () => {
+      expect(BUTTON_PRESETS.cancel.variant).toBe('alternative');
+    });
+
+    it('has button type', () => {
+      expect(BUTTON_PRESETS.cancel.type).toBe('button');
+    });
+  });
+
+  describe('delete preset', () => {
+    it('has red variant', () => {
+      expect(BUTTON_PRESETS.delete.variant).toBe('red');
+    });
+
+    it('has button type', () => {
+      expect(BUTTON_PRESETS.delete.type).toBe('button');
+    });
+  });
+
+  describe('submit preset', () => {
+    it('has default variant like save', () => {
+      expect(BUTTON_PRESETS.submit.variant).toBe('default');
+    });
+
+    it('has submit type', () => {
+      expect(BUTTON_PRESETS.submit.type).toBe('submit');
+    });
+
+    it('is an alias for save', () => {
+      expect(BUTTON_PRESETS.submit.variant).toBe(BUTTON_PRESETS.save.variant);
+      expect(BUTTON_PRESETS.submit.type).toBe(BUTTON_PRESETS.save.type);
+    });
+  });
+
+  describe('secondary preset', () => {
+    it('has light variant', () => {
+      expect(BUTTON_PRESETS.secondary.variant).toBe('light');
+    });
+
+    it('has button type', () => {
+      expect(BUTTON_PRESETS.secondary.type).toBe('button');
+    });
+  });
+
+  describe('outline preset', () => {
+    it('has outline variant', () => {
+      expect(BUTTON_PRESETS.outline.variant).toBe('outline');
+    });
+
+    it('has button type', () => {
+      expect(BUTTON_PRESETS.outline.type).toBe('button');
+    });
+  });
+
+  describe('ghost preset', () => {
+    it('has ghost variant', () => {
+      expect(BUTTON_PRESETS.ghost.variant).toBe('ghost');
+    });
+
+    it('has button type', () => {
+      expect(BUTTON_PRESETS.ghost.type).toBe('button');
+    });
+  });
+});
+
+describe('Icon Button Presets', () => {
+  describe('default preset', () => {
+    it('has ghost variant', () => {
+      expect(ICON_BUTTON_PRESETS.default.variant).toBe('ghost');
+    });
+
+    it('has sm size', () => {
+      expect(ICON_BUTTON_PRESETS.default.size).toBe('sm');
+    });
+
+    it('has padding className', () => {
+      expect(ICON_BUTTON_PRESETS.default.className).toBe('p-2');
+    });
+  });
+
+  describe('destructive preset', () => {
+    it('has ghost variant', () => {
+      expect(ICON_BUTTON_PRESETS.destructive.variant).toBe('ghost');
+    });
+
+    it('has sm size', () => {
+      expect(ICON_BUTTON_PRESETS.destructive.size).toBe('sm');
+    });
+
+    it('has red color classes', () => {
+      expect(ICON_BUTTON_PRESETS.destructive.className).toContain('text-red-600');
+      expect(ICON_BUTTON_PRESETS.destructive.className).toContain('hover:bg-red-100');
+    });
+
+    it('has dark mode red classes', () => {
+      expect(ICON_BUTTON_PRESETS.destructive.className).toContain('dark:text-red-400');
+      expect(ICON_BUTTON_PRESETS.destructive.className).toContain('dark:hover:bg-red-900');
+    });
+  });
+});
+
+describe('Preset Structure', () => {
+  it('all presets have variant property', () => {
+    Object.values(BUTTON_PRESETS).forEach(preset => {
+      expect(preset).toHaveProperty('variant');
+    });
+  });
+
+  it('all presets have type property', () => {
+    Object.values(BUTTON_PRESETS).forEach(preset => {
+      expect(preset).toHaveProperty('type');
+    });
+  });
+
+  it('all icon presets have size property', () => {
+    Object.values(ICON_BUTTON_PRESETS).forEach(preset => {
+      expect(preset).toHaveProperty('size');
+    });
+  });
+});

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.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Accordion.spec.d.ts.map

package/dist/primitives/Accordion/Accordion.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/Accordion.spec.js"],"names":[],"mappings":""}

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

@@ -0,0 +1,83 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import Accordion from './Accordion.svelte';
+
+describe('Accordion Component', () => {
+  test('renders correctly with default props', () => {
+    const { container } = render(Accordion);
+    const accordion = container.querySelector('[data-accordion]');
+    expect(accordion).toBeInTheDocument();
+  });
+
+  test('has collapse data attribute by default (single mode)', () => {
+    const { container } = render(Accordion);
+    const accordion = container.querySelector('[data-accordion="collapse"]');
+    expect(accordion).toBeInTheDocument();
+  });
+
+  test('has open data attribute when multiple is true', () => {
+    const { container } = render(Accordion, { props: { multiple: true } });
+    const accordion = container.querySelector('[data-accordion="open"]');
+    expect(accordion).toBeInTheDocument();
+  });
+
+  test('applies default styling (bordered)', () => {
+    const { container } = render(Accordion);
+    const accordion = container.querySelector('[data-accordion]');
+    expect(accordion).toHaveClass('border');
+    expect(accordion).toHaveClass('rounded-lg');
+  });
+
+  test('applies flush styling when flush is true', () => {
+    const { container } = render(Accordion, { props: { flush: true } });
+    const accordion = container.querySelector('[data-accordion]');
+    expect(accordion).not.toHaveClass('border');
+    expect(accordion).not.toHaveClass('rounded-lg');
+    expect(accordion).toHaveClass('divide-y');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Accordion, { props: { class: 'custom-accordion' } });
+    const accordion = container.querySelector('[data-accordion]');
+    expect(accordion).toHaveClass('custom-accordion');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(Accordion, { props: { 'data-testid': 'my-accordion' } });
+    const accordion = container.querySelector('[data-testid="my-accordion"]');
+    expect(accordion).toBeInTheDocument();
+  });
+
+  test('has divide-y class for item separation', () => {
+    const { container } = render(Accordion);
+    const accordion = container.querySelector('[data-accordion]');
+    expect(accordion).toHaveClass('divide-y');
+    expect(accordion).toHaveClass('divide-gray-200');
+  });
+
+  test('has dark mode divide classes', () => {
+    const { container } = render(Accordion);
+    const accordion = container.querySelector('[data-accordion]');
+    expect(accordion).toHaveClass('dark:divide-gray-700');
+  });
+
+  test('has dark mode border classes when not flush', () => {
+    const { container } = render(Accordion);
+    const accordion = container.querySelector('[data-accordion]');
+    expect(accordion).toHaveClass('dark:border-gray-700');
+  });
+});
+
+describe('Accordion Props', () => {
+  test('multiple defaults to false', () => {
+    const { container } = render(Accordion);
+    const accordion = container.querySelector('[data-accordion="collapse"]');
+    expect(accordion).toBeInTheDocument();
+  });
+
+  test('flush defaults to false', () => {
+    const { container } = render(Accordion);
+    const accordion = container.querySelector('[data-accordion]');
+    expect(accordion).toHaveClass('border');
+  });
+});

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,34 +1,34 @@
-<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>());
-
+<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", {
@@ -49,14 +49,14 @@
       });
     },
   });
-
-  // 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>
+
+  // 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.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AccordionItem.spec.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Accordion/AccordionItem.spec.js"],"names":[],"mappings":""}