@getmicdrop/svelte-components 2.4.0 → 2.6.1

package/dist/__LIB_STORES__.js

@@ -1,8 +1,8 @@
 import { writable } from 'svelte/store';
 
-// Create a reactive page store that updates on navigation
+// Create a minimal page store for library builds
 const createPageStore = () => {
-  const getPageState = () => ({
+  const { subscribe, set } = writable({
     url: typeof window !== 'undefined' ? new URL(window.location.href) : new URL('http://localhost'),
     params: {},
     route: { id: null },
@@ -13,34 +13,6 @@ const createPageStore = () => {
     state: {}
   });
 
-  const { subscribe, set } = writable(getPageState());
-
-  // Listen for navigation events in the browser
-  if (typeof window !== 'undefined') {
-    // Update on popstate (back/forward navigation)
-    window.addEventListener('popstate', () => set(getPageState()));
-
-    // Intercept pushState and replaceState to detect programmatic navigation
-    const originalPushState = history.pushState;
-    const originalReplaceState = history.replaceState;
-
-    history.pushState = function(...args) {
-      originalPushState.apply(this, args);
-      set(getPageState());
-    };
-
-    history.replaceState = function(...args) {
-      originalReplaceState.apply(this, args);
-      set(getPageState());
-    };
-
-    // Also listen for click events on links to catch SvelteKit navigation
-    window.addEventListener('click', (e) => {
-      // Small delay to let the navigation complete
-      setTimeout(() => set(getPageState()), 0);
-    });
-  }
-
   return { subscribe };
 };
 

package/dist/components/Badges/Badge.svelte

@@ -6,14 +6,8 @@
 
   export let size = "medium";
   export let className = "";
-  /** @type {string|number} Semantic variant or tier number (1-5) */
+  /** @type {string} Semantic variant (required) */
   export let variant = "neutral";
-  /** @type {string|null} Event display type: "square" or "circle" */
-  export let event = null;
-  /** @type {string|null} Custom text color (hex) */
-  export let textColor = null;
-  /** @type {string|null} Custom background color (hex or rgba) */
-  export let bgColor = null;
 
   $: sizeClass = (() => {
     switch (size) {
@@ -28,24 +22,8 @@
     }
   })();
 
-  // Handle tier numbers (1-5) as variants
-  $: normalizedVariant = (() => {
-    if (typeof variant === "number" || !isNaN(Number(variant))) {
-      const tierNum = Number(variant);
-      switch (tierNum) {
-        case 1: return "tier-1";
-        case 2: return "tier-2";
-        case 3: return "tier-3";
-        case 4: return "tier-4";
-        case 5: return "tier-5";
-        default: return "neutral";
-      }
-    }
-    return String(variant).toLowerCase();
-  })();
-
   $: variantClass = (() => {
-    switch (normalizedVariant) {
+    switch (variant.toLowerCase()) {
       // Role variants
       case "host":
         return "badge-host";
@@ -69,46 +47,14 @@
       case "warning":
         return "badge-warning";
       case "error":
-      case "danger":
         return "badge-error";
       case "info":
         return "badge-info";
-      // Tier variants (for lineup position badges)
-      case "tier-1":
-        return "badge-tier-1";
-      case "tier-2":
-        return "badge-tier-2";
-      case "tier-3":
-        return "badge-tier-3";
-      case "tier-4":
-        return "badge-tier-4";
-      case "tier-5":
-        return "badge-tier-5";
       case "neutral":
       default:
         return "badge-neutral";
     }
   })();
-
-  $: eventClass = (() => {
-    if (!event) return "";
-    switch (event) {
-      case "square":
-        return "badge-event-square";
-      case "circle":
-        return "badge-event-circle";
-      default:
-        return "";
-    }
-  })();
-
-  // Custom style for text/bg color overrides
-  $: customStyle = (() => {
-    const styles = [];
-    if (textColor) styles.push(`color: ${textColor}`);
-    if (bgColor) styles.push(`background-color: ${bgColor}`);
-    return styles.length > 0 ? styles.join("; ") : null;
-  })();
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -118,11 +64,9 @@
     "badge",
     sizeClass,
     variantClass,
-    eventClass,
     className
   )}
-  style={customStyle}
-  on:click={(e) => dispatch("click", e)}
+  on:click={(event) => dispatch("click", event)}
 >
   <slot />
 </div>
@@ -132,9 +76,6 @@
 
   Role variants: host, headliner, feature, special-guest, opener, guest, teacher, assistant
   Status variants: success, warning, error, info, neutral
-  Tier variants: 1, 2, 3, 4, 5 (pass as number or string)
-  Event types: event="square" or event="circle"
-  Custom colors: textColor="#hex" bgColor="rgba(...)"
 -->
 
 <style>
@@ -238,71 +179,4 @@
     color: #4b5563;
     background-color: #f9fafb;
   }
-
-  /* Tier variants (lineup position badges) - colors match local frontend implementation */
-  .badge-tier-1 {
-    color: rgba(108, 43, 217, 1);
-    background-color: rgba(108, 43, 217, 0.15);
-  }
-
-  .badge-tier-2 {
-    color: rgba(255, 146, 46, 1);
-    background-color: rgba(255, 146, 46, 0.15);
-  }
-
-  .badge-tier-3 {
-    color: rgba(2, 132, 254, 1);
-    background-color: rgba(2, 132, 254, 0.15);
-  }
-
-  .badge-tier-4 {
-    color: rgba(21, 160, 51, 1);
-    background-color: rgba(21, 160, 51, 0.15);
-  }
-
-  .badge-tier-5 {
-    color: rgba(255, 102, 102, 1);
-    background-color: rgba(255, 102, 102, 0.15);
-  }
-
-  /* Event display types */
-  .badge-event-square {
-    padding: 4px;
-    border-radius: 4px;
-    border: 0.8px solid rgba(2, 132, 254, 0.5);
-    box-shadow:
-      0px 20px 6px 0px rgba(0, 0, 0, 0),
-      0px 13px 5px 0px rgba(0, 0, 0, 0.02),
-      0px 7px 4px 0px rgba(0, 0, 0, 0.08),
-      0px 3px 3px 0px rgba(0, 0, 0, 0.14),
-      0px 1px 2px 0px rgba(0, 0, 0, 0.16);
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 14px;
-  }
-
-  .badge-event-circle {
-    padding: 4px;
-    border-radius: 9999px;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 14px;
-  }
-
-  @media only screen and (max-width: 640px) {
-    .badge-event-square {
-      padding: 2px;
-      font-size: 8px;
-      line-height: 10px;
-      font-weight: 200;
-    }
-
-    .badge-event-circle {
-      padding: 2px;
-      font-size: 8px;
-      gap: 0px;
-      font-weight: 500;
-      line-height: 8px;
-    }
-  }
 </style>

package/dist/components/Badges/Badge.svelte.d.ts

@@ -2,10 +2,7 @@ export default Badge;
 type Badge = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     size?: string | undefined;
     className?: string | undefined;
-    variant?: string | number | undefined;
-    event?: string | null | undefined;
-    textColor?: string | null | undefined;
-    bgColor?: string | null | undefined;
+    variant?: string | undefined;
 }, {
     default: {};
 }>, {
@@ -20,10 +17,7 @@ type Badge = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
 declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     size?: string | undefined;
     className?: string | undefined;
-    variant?: string | number | undefined;
-    event?: string | null | undefined;
-    textColor?: string | null | undefined;
-    bgColor?: string | null | undefined;
+    variant?: string | undefined;
 }, {
     default: {};
 }>, {

package/dist/components/Badges/Badge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/Badge.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA2JA;;;;;;;;;;;;;;;eAAqL;sCAT/I,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Badges/Badge.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiGA;;;;;;;;;;;;eAAuJ;sCATjH,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Breadcrumb/Breadcrumb.svelte

@@ -1,18 +1,8 @@
 <script>
   import { createEventDispatcher } from "svelte";
-  import ArrowRight from "../Icons/ArrowRight.svelte";
-  import Home from "../Icons/Home.svelte";
+  import BreadcrumbArrow from "../../assets/svg/arrow-up.svg";
 
-  /** @type {Array<{name: string, href: string}>} */
   export let data = [];
-  /** @type {string} Additional CSS classes */
-  export let className = "";
-  /** @type {boolean} Show built-in home icon for first item */
-  export let showHomeIcon = true;
-  /** @type {string} Page title displayed below breadcrumb */
-  export let title = "";
-  /** @type {string} Subtitle displayed below title */
-  export let subtitle = "";
 
   const dispatch = createEventDispatcher();
 
@@ -21,59 +11,40 @@
   }
 </script>
 
-<div class="flex flex-col gap-4">
-  {#if data.length > 0}
-    <nav class="inline-flex lg:ml-6 text-sm leading-[14px] font-medium flex-wrap gap-1 {className}">
-      {#each data as crumb, index}
-        <div class="flex items-center gap-2">
-          {#if index > 0}
-            <div class="pl-1 text-text-secondary">
-              <ArrowRight size="12" />
-            </div>
-          {/if}
-          {#if index === 0 && showHomeIcon}
-            <span class="text-text-primary">
-              <Home size="12" />
-            </span>
-          {/if}
-          {#if index === data.length - 1}
-            <span
-              class="text-text-primary cursor-default max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap"
-              title={crumb.name}
+{#if data.length > 0}
+  <nav class="inline-flex text-sm leading-[14px] font-medium">
+    {#each data as crumb, index}
+      <div class="flex items-center">
+        {#if index > 0}
+          <img
+            src={BreadcrumbArrow}
+            alt=""
+            class="w-2.5 sm:w-3 h-2.5 sm:h-3 mx-2 sm:mx-2.5"
+          />
+        {/if}
+        {#if index === 0}
+          <img
+            src={crumb.icon}
+            alt=""
+            class="w-3 sm:w-4 h-3 sm:h-4 mx-2 sm:mx-2.5"
+          />
+        {/if}
+        {#if index === data.length - 1}
+          <span class="text-Text-Tartiary cursor-default">{crumb.name}</span>
+        {:else}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <span class="text-Text-Secondary no-underline cursor-pointer">
+            <a
+              href={crumb.href}
+              on:click={() => handleClick(crumb)}
+              class="hover:no-underline"
             >
               {crumb.name}
-            </span>
-          {:else}
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <!-- svelte-ignore a11y-no-static-element-interactions -->
-            <span
-              class="text-text-secondary no-underline cursor-pointer max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap"
-              title={crumb.name}
-            >
-              <a
-                href={crumb.href}
-                on:click={() => handleClick(crumb)}
-                class="hover:no-underline"
-              >
-                {crumb.name}
-              </a>
-            </span>
-          {/if}
-        </div>
-      {/each}
-    </nav>
-  {/if}
-
-  {#if title || subtitle}
-    <div class="pl-1 mb-2 md:pl-6 flex flex-col gap-1">
-      {#if title}
-        <h1 class="text-[32px] font-semibold text-text-primary text-start">
-          {title}
-        </h1>
-      {/if}
-      {#if subtitle}
-        <p class="text-sm text-text-secondary">{subtitle}</p>
-      {/if}
-    </div>
-  {/if}
-</div>
+            </a>
+          </span>
+        {/if}
+      </div>
+    {/each}
+  </nav>
+{/if}

package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts

@@ -1,13 +1,6 @@
 export default Breadcrumb;
 type Breadcrumb = SvelteComponent<{
-    title?: string | undefined;
-    className?: string | undefined;
-    data?: {
-        name: string;
-        href: string;
-    }[] | undefined;
-    showHomeIcon?: boolean | undefined;
-    subtitle?: string | undefined;
+    data?: any[] | undefined;
 }, {
     click: CustomEvent<any>;
 } & {
@@ -16,14 +9,7 @@ type Breadcrumb = SvelteComponent<{
     $$bindings?: string | undefined;
 };
 declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<{
-    title?: string | undefined;
-    className?: string | undefined;
-    data?: {
-        name: string;
-        href: string;
-    }[] | undefined;
-    showHomeIcon?: boolean | undefined;
-    subtitle?: string | undefined;
+    data?: any[] | undefined;
 }, {
     click: CustomEvent<any>;
 } & {

package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Breadcrumb/Breadcrumb.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA6FA;;;;cAdwB,MAAM;cAAQ,MAAM;;;;;;;;mBAckI;6CATjI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Breadcrumb/Breadcrumb.svelte.js"],"names":[],"mappings":";;;;;;;;;;AAwDA;;;;;;mBAAgI;6CATnF,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/Button/Button.svelte

@@ -605,7 +605,6 @@
     display: inline-flex;
     align-items: center;
     gap: 0.375rem; /* 6px - matches gap-1.5 */
-    white-space: nowrap;
   }
 
   @media (min-width: 640px) {

package/dist/components/Calendar/Calendar.spec.d.ts

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

package/dist/components/Calendar/Calendar.spec.d.ts.map

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

package/dist/components/Calendar/Calendar.spec.js

@@ -0,0 +1,131 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+
+// Mock FullCalendar since it's complex and requires DOM
+vi.mock('@fullcalendar/core', () => ({
+  Calendar: vi.fn().mockImplementation(() => ({
+    render: vi.fn(),
+    destroy: vi.fn(),
+    next: vi.fn(),
+    prev: vi.fn(),
+    today: vi.fn(),
+    getDate: vi.fn(() => new Date()),
+    changeView: vi.fn(),
+  })),
+}));
+
+vi.mock('@fullcalendar/daygrid', () => ({
+  default: {},
+}));
+
+vi.mock('@fullcalendar/interaction', () => ({
+  default: {},
+}));
+
+vi.mock('$app/environment', () => ({
+  browser: true,
+}));
+
+// Import after mocks
+import Calendar from './Calendar.svelte';
+
+describe('Calendar', () => {
+  describe('basic rendering', () => {
+    it('renders calendar container', () => {
+      const { container } = render(Calendar);
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('renders with default variant availability', () => {
+      const { container } = render(Calendar);
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+  });
+
+  describe('props', () => {
+    it('accepts variant prop', () => {
+      const { container } = render(Calendar, { variant: 'scheduler' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts view prop', () => {
+      const { container } = render(Calendar, { view: 'dayGridMonth' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts events prop', () => {
+      const events = [
+        { title: 'Event 1', start: '2025-01-01' },
+        { title: 'Event 2', start: '2025-01-02' },
+      ];
+      const { container } = render(Calendar, { events });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts selectedDates prop', () => {
+      const selectedDates = ['2025-01-01', '2025-01-02'];
+      const { container } = render(Calendar, { selectedDates });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts compact prop', () => {
+      const { container } = render(Calendar, { compact: true });
+      // Component renders with compact mode - verify container exists
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts readOnly prop', () => {
+      const { container } = render(Calendar, { readOnly: true });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts showNavigation prop', () => {
+      const { container } = render(Calendar, { showNavigation: false });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('accepts showLegend prop', () => {
+      const { container } = render(Calendar, { showLegend: false });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+  });
+
+  describe('variant styles', () => {
+    it('renders availability variant', () => {
+      const { container } = render(Calendar, { variant: 'availability' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('renders scheduler variant', () => {
+      const { container } = render(Calendar, { variant: 'scheduler' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('renders display variant', () => {
+      const { container } = render(Calendar, { variant: 'display' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('renders public variant', () => {
+      const { container } = render(Calendar, { variant: 'public' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+  });
+
+  describe('saveStatus states', () => {
+    it('handles saving status', () => {
+      const { container } = render(Calendar, { saveStatus: 'saving' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('handles saved status', () => {
+      const { container } = render(Calendar, { saveStatus: 'saved' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+
+    it('handles empty status', () => {
+      const { container } = render(Calendar, { saveStatus: '' });
+      expect(container.querySelector('.calendar-wrapper')).toBeTruthy();
+    });
+  });
+});