@getmicdrop/svelte-components 5.5.1 → 5.5.5

package/dist/tokens/tokens.css

@@ -1,87 +1,87 @@
-:root {
-  --bg-primary: 0 0% 100%;
-  --bg-secondary: 220 7% 97%;
-  --bg-tertiary: 220 7% 94%;
-  --bg-quaternary: 220 6% 91%;
-
-  --text-primary: 221 50% 10%;
-  --text-secondary: 220 20% 18%;
-  --text-tertiary: 221 9% 44%;
-  --text-head: 221 9% 44%;
-
-  --brand-primary: 209 99% 50%;
-
-  --accent-warning: 28 100% 59%;
-  --accent-danger: 0 100% 70%;
-  --accent-success: 131 77% 35%;
-
-  --stroke-primary: 216 6% 84%;
-  --stroke-secondary: 216 6% 84%;
-  --border: 220 13% 91%;
-
-  --card: 0 0% 100%;
-  --card-foreground: 224 71.4% 4.1%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 224 71.4% 4.1%;
-  --muted: 220 14.3% 95.9%;
-  --muted-foreground: 220 8.9% 46.1%;
-  --hover-primary: 210 20% 96%;
-
-  --sidebar-background: 0 0% 100%;
-  --sidebar-foreground: 220 20% 18%;
-  --sidebar-border: 220 13% 91%;
-  --sidebar-primary: 221 65% 54%;
-  --sidebar-primary-foreground: 221 50% 10%;
-
-  --BG-Primary: var(--bg-primary);
-  --BG-Secondary: var(--bg-secondary);
-  --BG-Tertiary: var(--bg-tertiary);
-  --BG-Quaternary: var(--bg-quaternary);
-  --Text-Primary: var(--text-primary);
-  --Text-Secondary: var(--text-secondary);
-  --Text-Tartiary: var(--text-tertiary);
-  --Text-Head: var(--text-head);
-  --Brand-Primary: var(--brand-primary);
-  --Accent-Warning: var(--accent-warning);
-  --Accent-Danger: var(--accent-danger);
-  --Accent-Success: var(--accent-success);
-  --Stroke-Primary: var(--stroke-primary);
-  --Stroke-Secondary: var(--stroke-secondary);
-}
-
-[data-theme="dark"],
-.dark {
-  --bg-primary: 220 20% 18%;
-  --bg-secondary: 221 50% 10%;
-  --bg-tertiary: 221 50% 6%;
-  --bg-quaternary: 0 0% 0%;
-
-  --text-primary: 220 7% 97%;
-  --text-secondary: 220 7% 94%;
-  --text-tertiary: 220 6% 91%;
-  --text-head: 220 9% 70%;
-
-  --brand-primary: 220 89% 63%;
-
-  --accent-warning: 30 100% 70%;
-  --accent-danger: 0 100% 70%;
-  --accent-success: 142 71% 45%;
-
-  --stroke-primary: 220 20% 28%;
-  --stroke-secondary: 220 20% 28%;
-  --border: 215 27.9% 16.9%;
-
-  --card: 224 20% 10%;
-  --card-foreground: 210 20% 98%;
-  --popover: 224 71.4% 4.1%;
-  --popover-foreground: 210 20% 98%;
-  --muted: 215 27.9% 16.9%;
-  --muted-foreground: 217.9 10.6% 64.9%;
-  --hover-primary: 222 10% 39%;
-
-  --sidebar-background: 220 20% 18%;
-  --sidebar-foreground: 220 7% 94%;
-  --sidebar-border: 215 20% 20%;
-  --sidebar-primary: 221 65% 54%;
-  --sidebar-primary-foreground: 220 7% 97%;
-}
+:root {
+  --bg-primary: 0 0% 100%;
+  --bg-secondary: 220 7% 97%;
+  --bg-tertiary: 220 7% 94%;
+  --bg-quaternary: 220 6% 91%;
+
+  --text-primary: 221 50% 10%;
+  --text-secondary: 220 20% 18%;
+  --text-tertiary: 221 9% 44%;
+  --text-head: 221 9% 44%;
+
+  --brand-primary: 209 99% 50%;
+
+  --accent-warning: 28 100% 59%;
+  --accent-danger: 0 100% 70%;
+  --accent-success: 131 77% 35%;
+
+  --stroke-primary: 216 6% 84%;
+  --stroke-secondary: 216 6% 84%;
+  --border: 220 13% 91%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+  --hover-primary: 210 20% 96%;
+
+  --sidebar-background: 0 0% 100%;
+  --sidebar-foreground: 220 20% 18%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-primary: 221 65% 54%;
+  --sidebar-primary-foreground: 221 50% 10%;
+
+  --BG-Primary: var(--bg-primary);
+  --BG-Secondary: var(--bg-secondary);
+  --BG-Tertiary: var(--bg-tertiary);
+  --BG-Quaternary: var(--bg-quaternary);
+  --Text-Primary: var(--text-primary);
+  --Text-Secondary: var(--text-secondary);
+  --Text-Tartiary: var(--text-tertiary);
+  --Text-Head: var(--text-head);
+  --Brand-Primary: var(--brand-primary);
+  --Accent-Warning: var(--accent-warning);
+  --Accent-Danger: var(--accent-danger);
+  --Accent-Success: var(--accent-success);
+  --Stroke-Primary: var(--stroke-primary);
+  --Stroke-Secondary: var(--stroke-secondary);
+}
+
+[data-theme="dark"],
+.dark {
+  --bg-primary: 220 20% 18%;
+  --bg-secondary: 221 50% 10%;
+  --bg-tertiary: 221 50% 6%;
+  --bg-quaternary: 0 0% 0%;
+
+  --text-primary: 220 7% 97%;
+  --text-secondary: 220 7% 94%;
+  --text-tertiary: 220 6% 91%;
+  --text-head: 220 9% 70%;
+
+  --brand-primary: 220 89% 63%;
+
+  --accent-warning: 30 100% 70%;
+  --accent-danger: 0 100% 70%;
+  --accent-success: 142 71% 45%;
+
+  --stroke-primary: 220 20% 28%;
+  --stroke-secondary: 220 20% 28%;
+  --border: 215 27.9% 16.9%;
+
+  --card: 224 20% 10%;
+  --card-foreground: 210 20% 98%;
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+  --hover-primary: 222 10% 39%;
+
+  --sidebar-background: 220 20% 18%;
+  --sidebar-foreground: 220 7% 94%;
+  --sidebar-border: 215 20% 20%;
+  --sidebar-primary: 221 65% 54%;
+  --sidebar-primary-foreground: 220 7% 97%;
+}

package/dist/utils/apiConfig.spec.js

@@ -1,9 +1,12 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import {
   API_BASE_URL,
   FRONTEND_BASE_URL,
   buildApiUrl,
   API_ENDPOINTS,
+  buildPerformerInviteUrl,
+  getPerformerInviteMethod,
+  buildV2PerformerActionUrl,
 } from './apiConfig';
 
 describe('apiConfig', () => {
@@ -115,4 +118,102 @@ describe('apiConfig', () => {
       expect(loginUrl).toContain('/api/public/login');
     });
   });
+
+  describe('buildPerformerInviteUrl', () => {
+    it('builds V1 accept URL', () => {
+      const url = buildPerformerInviteUrl(123, 'accept');
+      expect(url).toContain('/api/public/acceptEventPerformerInvite/123');
+    });
+
+    it('builds V1 decline URL', () => {
+      const url = buildPerformerInviteUrl(456, 'decline');
+      expect(url).toContain('/api/public/declineEventPerformerInvite/456');
+    });
+
+    it('builds V1 cancel URL', () => {
+      const url = buildPerformerInviteUrl(789, 'cancel');
+      expect(url).toContain('/api/public/cancelEventPerformerInvite/789');
+    });
+  });
+
+  describe('getPerformerInviteMethod', () => {
+    it('returns correct HTTP method for V1 actions', () => {
+      expect(getPerformerInviteMethod('accept')).toBe('PUT');
+      expect(getPerformerInviteMethod('decline')).toBe('PUT');
+      expect(getPerformerInviteMethod('cancel')).toBe('PUT');
+    });
+  });
+
+  describe('buildV2PerformerActionUrl', () => {
+    it('builds V2 performer action URL with confirm', () => {
+      const url = buildV2PerformerActionUrl(123, 'confirm');
+      expect(url).toContain('/api/v2/event-performers/123/confirm');
+    });
+
+    it('builds V2 performer action URL with decline', () => {
+      const url = buildV2PerformerActionUrl(456, 'decline');
+      expect(url).toContain('/api/v2/event-performers/456/decline');
+    });
+
+    it('builds V2 performer action URL with reassign', () => {
+      const url = buildV2PerformerActionUrl(789, 'reassign');
+      expect(url).toContain('/api/v2/event-performers/789/reassign');
+    });
+  });
+
+  describe('V2 API paths', () => {
+    let originalEnv;
+
+    beforeEach(async () => {
+      originalEnv = import.meta.env.VITE_API_VERSION;
+      vi.resetModules();
+    });
+
+    afterEach(async () => {
+      import.meta.env.VITE_API_VERSION = originalEnv;
+      vi.resetModules();
+    });
+
+    it('buildPerformerInviteUrl uses V2 endpoint for accept when USE_V2_API is true', async () => {
+      // Set environment variable to v2
+      import.meta.env.VITE_API_VERSION = 'v2';
+
+      // Re-import to get fresh module with new env
+      const module = await import('./apiConfig');
+
+      const url = module.buildPerformerInviteUrl(123, 'accept');
+      expect(url).toContain('/api/v2/event-performers/123/confirm');
+    });
+
+    it('buildPerformerInviteUrl uses V2 endpoint for decline when USE_V2_API is true', async () => {
+      import.meta.env.VITE_API_VERSION = 'v2';
+      const module = await import('./apiConfig');
+
+      const url = module.buildPerformerInviteUrl(456, 'decline');
+      expect(url).toContain('/api/v2/event-performers/456/decline');
+    });
+
+    it('buildPerformerInviteUrl uses V1 endpoint for cancel even when USE_V2_API is true', async () => {
+      import.meta.env.VITE_API_VERSION = 'v2';
+      const module = await import('./apiConfig');
+
+      const url = module.buildPerformerInviteUrl(789, 'cancel');
+      expect(url).toContain('/api/public/cancelEventPerformerInvite/789');
+    });
+
+    it('getPerformerInviteMethod returns POST for V2 non-cancel actions', async () => {
+      import.meta.env.VITE_API_VERSION = 'v2';
+      const module = await import('./apiConfig');
+
+      expect(module.getPerformerInviteMethod('accept')).toBe('POST');
+      expect(module.getPerformerInviteMethod('decline')).toBe('POST');
+    });
+
+    it('getPerformerInviteMethod returns PUT for V2 cancel action', async () => {
+      import.meta.env.VITE_API_VERSION = 'v2';
+      const module = await import('./apiConfig');
+
+      expect(module.getPerformerInviteMethod('cancel')).toBe('PUT');
+    });
+  });
 });

package/dist/utils/formatters.spec.d.ts

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

package/dist/utils/formatters.spec.d.ts.map

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

package/dist/utils/formatters.spec.js

@@ -0,0 +1,82 @@
+import { expect, describe, test } from 'vitest';
+import { formatCreditCardNumber, formatPhoneNumber } from './formatters.ts';
+
+describe('formatCreditCardNumber', () => {
+  test('formats empty string', () => {
+    expect(formatCreditCardNumber('')).toBe('');
+  });
+
+  test('formats 4 digits', () => {
+    expect(formatCreditCardNumber('1234')).toBe('1234');
+  });
+
+  test('formats 8 digits with space', () => {
+    expect(formatCreditCardNumber('12345678')).toBe('1234 5678');
+  });
+
+  test('formats 12 digits with spaces', () => {
+    expect(formatCreditCardNumber('123456789012')).toBe('1234 5678 9012');
+  });
+
+  test('formats 16 digits with spaces', () => {
+    expect(formatCreditCardNumber('1234567890123456')).toBe('1234 5678 9012 3456');
+  });
+
+  test('removes non-digit characters', () => {
+    expect(formatCreditCardNumber('1234-5678-9012-3456')).toBe('1234 5678 9012 3456');
+  });
+
+  test('handles spaces in input', () => {
+    expect(formatCreditCardNumber('1234 5678')).toBe('1234 5678');
+  });
+
+  test('handles letters in input', () => {
+    expect(formatCreditCardNumber('1234abcd5678')).toBe('1234 5678');
+  });
+
+  test('handles partial card number', () => {
+    expect(formatCreditCardNumber('123456789')).toBe('1234 5678 9');
+  });
+});
+
+describe('formatPhoneNumber', () => {
+  test('formats empty string', () => {
+    expect(formatPhoneNumber('')).toBe('');
+  });
+
+  test('formats 3 digits', () => {
+    expect(formatPhoneNumber('123')).toBe('123');
+  });
+
+  test('formats 4 digits with dash', () => {
+    expect(formatPhoneNumber('1234')).toBe('123-4');
+  });
+
+  test('formats 6 digits with dash', () => {
+    expect(formatPhoneNumber('123456')).toBe('123-456');
+  });
+
+  test('formats 7 digits with two dashes', () => {
+    expect(formatPhoneNumber('1234567')).toBe('123-456-7');
+  });
+
+  test('formats 10 digits fully', () => {
+    expect(formatPhoneNumber('1234567890')).toBe('123-456-7890');
+  });
+
+  test('removes non-digit characters', () => {
+    expect(formatPhoneNumber('123-456-7890')).toBe('123-456-7890');
+  });
+
+  test('handles parentheses in input', () => {
+    expect(formatPhoneNumber('(123) 456-7890')).toBe('123-456-7890');
+  });
+
+  test('handles letters in input', () => {
+    expect(formatPhoneNumber('123abc456')).toBe('123-456');
+  });
+
+  test('truncates after 10 digits', () => {
+    expect(formatPhoneNumber('12345678901234')).toBe('123-456-7890');
+  });
+});

package/dist/utils/transitions.d.ts

@@ -0,0 +1,24 @@
+/**
+ * A safe version of Svelte's slide transition that guards against NaN height values.
+ *
+ * When an element is inside an {#if} block and the condition becomes true,
+ * Svelte tries to animate from height 0. If the element hasn't been measured yet,
+ * offsetHeight can be 0 or undefined, leading to NaN in the animation.
+ *
+ * This wrapper checks if the element is measurable and skips the animation if not.
+ *
+ * @param {HTMLElement} node - The element to transition
+ * @param {Object} params - Transition parameters
+ * @param {number} [params.delay=0] - Delay before transition starts (ms)
+ * @param {number} [params.duration=400] - Duration of transition (ms)
+ * @param {Function} [params.easing] - Easing function
+ * @param {'x'|'y'} [params.axis='y'] - Axis to slide on
+ * @returns {Object} Transition configuration
+ */
+export function safeSlide(node: HTMLElement, params?: {
+    delay?: number | undefined;
+    duration?: number | undefined;
+    easing?: Function | undefined;
+    axis?: "y" | "x" | undefined;
+}): Object;
+//# sourceMappingURL=transitions.d.ts.map

package/dist/utils/transitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transitions.d.ts","sourceRoot":"","sources":["../../src/lib/utils/transitions.js"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;;;;GAgBG;AACH,gCARW,WAAW,WAEnB;IAAwB,KAAK;IACL,QAAQ;IACN,MAAM;IACP,IAAI;CAC7B,GAAU,MAAM,CAkBlB"}

package/dist/utils/transitions.js

@@ -0,0 +1,62 @@
+/**
+ * Safe transition utilities that guard against NaN values
+ *
+ * The standard Svelte slide transition can produce "Invalid keyframe value for property height: NaNpx"
+ * when the element hasn't been measured yet (e.g., during SSR hydration or when mounted in an unmeasured container).
+ *
+ * These utilities wrap Svelte's transitions with guards against invalid values.
+ */
+
+import { slide as svelteSlide } from 'svelte/transition';
+
+/**
+ * A safe version of Svelte's slide transition that guards against NaN height values.
+ *
+ * When an element is inside an {#if} block and the condition becomes true,
+ * Svelte tries to animate from height 0. If the element hasn't been measured yet,
+ * offsetHeight can be 0 or undefined, leading to NaN in the animation.
+ *
+ * This wrapper checks if the element is measurable and skips the animation if not.
+ *
+ * @param {HTMLElement} node - The element to transition
+ * @param {Object} params - Transition parameters
+ * @param {number} [params.delay=0] - Delay before transition starts (ms)
+ * @param {number} [params.duration=400] - Duration of transition (ms)
+ * @param {Function} [params.easing] - Easing function
+ * @param {'x'|'y'} [params.axis='y'] - Axis to slide on
+ * @returns {Object} Transition configuration
+ */
+export function safeSlide(node, params = {}) {
+  // Check if the element is measurable
+  const height = node.offsetHeight;
+  const width = node.offsetWidth;
+
+  // If element has no dimensions (not yet in DOM or hidden), skip animation
+  if ((!height && !width) || !isFinite(height) || !isFinite(width)) {
+    return {
+      delay: params.delay || 0,
+      duration: 0,
+      css: () => ''
+    };
+  }
+
+  // Element is measurable, use standard slide
+  return svelteSlide(node, params);
+}
+
+/**
+ * CSS-based slide alternative using grid-template-rows.
+ * This approach doesn't require JS measurement and never produces NaN.
+ *
+ * Usage in Svelte:
+ * ```svelte
+ * <div class="grid {isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'} transition-all duration-200">
+ *   <div class="overflow-hidden">
+ *     <!-- content -->
+ *   </div>
+ * </div>
+ * ```
+ *
+ * This is an alternative approach documented here for reference.
+ * The grid-based approach is more performant but requires wrapping content.
+ */

package/dist/utils/transitions.spec.d.ts

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

package/dist/utils/transitions.spec.d.ts.map

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

package/dist/utils/transitions.spec.js

@@ -0,0 +1,130 @@
+import { expect, describe, test, vi } from 'vitest';
+import { safeSlide } from './transitions.js';
+
+// Mock svelte/transition
+vi.mock('svelte/transition', () => ({
+  slide: vi.fn((node, params) => ({
+    delay: params?.delay || 0,
+    duration: params?.duration || 400,
+    css: (t) => `height: ${t * 100}px`
+  }))
+}));
+
+describe('safeSlide', () => {
+  test('returns no-op transition for zero dimensions', () => {
+    const node = {
+      offsetHeight: 0,
+      offsetWidth: 0
+    };
+
+    const result = safeSlide(node);
+
+    expect(result.duration).toBe(0);
+    expect(result.css()).toBe('');
+  });
+
+  test('returns no-op transition for undefined dimensions', () => {
+    const node = {};
+
+    const result = safeSlide(node);
+
+    expect(result.duration).toBe(0);
+    expect(result.css()).toBe('');
+  });
+
+  test('returns no-op transition for NaN dimensions', () => {
+    const node = {
+      offsetHeight: NaN,
+      offsetWidth: NaN
+    };
+
+    const result = safeSlide(node);
+
+    expect(result.duration).toBe(0);
+    expect(result.css()).toBe('');
+  });
+
+  test('returns no-op transition for Infinity dimensions', () => {
+    const node = {
+      offsetHeight: Infinity,
+      offsetWidth: Infinity
+    };
+
+    const result = safeSlide(node);
+
+    expect(result.duration).toBe(0);
+    expect(result.css()).toBe('');
+  });
+
+  test('uses standard slide for valid dimensions', async () => {
+    const node = {
+      offsetHeight: 100,
+      offsetWidth: 200
+    };
+
+    const result = safeSlide(node);
+
+    // Should have received slide transition result
+    expect(result.duration).toBe(400);
+    expect(typeof result.css).toBe('function');
+  });
+
+  test('passes params to slide transition', async () => {
+    const node = {
+      offsetHeight: 100,
+      offsetWidth: 200
+    };
+    const params = { delay: 100, duration: 200 };
+
+    const result = safeSlide(node, params);
+
+    expect(result.delay).toBe(100);
+    expect(result.duration).toBe(200);
+  });
+
+  test('uses default delay for no-op transition', () => {
+    const node = {
+      offsetHeight: 0,
+      offsetWidth: 0
+    };
+
+    const result = safeSlide(node);
+
+    expect(result.delay).toBe(0);
+  });
+
+  test('uses custom delay for no-op transition', () => {
+    const node = {
+      offsetHeight: 0,
+      offsetWidth: 0
+    };
+
+    const result = safeSlide(node, { delay: 500 });
+
+    expect(result.delay).toBe(500);
+  });
+
+  test('handles node with only height (uses slide)', () => {
+    const node = {
+      offsetHeight: 100,
+      offsetWidth: 0
+    };
+
+    const result = safeSlide(node);
+
+    // At least one dimension is valid, so should use slide
+    expect(result.duration).toBe(400);
+  });
+
+  test('handles node with only width (uses slide)', () => {
+    const node = {
+      offsetHeight: 0,
+      offsetWidth: 100
+    };
+
+    const result = safeSlide(node);
+
+    // At least one dimension is valid, so should use slide
+    expect(result.duration).toBe(400);
+  });
+});