@getmicdrop/svelte-components 5.20.0 → 5.20.2

package/dist/components/Text.spec.js

@@ -1,89 +1,89 @@
-import { render } from '@testing-library/svelte';
-import { createRawSnippet } from 'svelte';
-import { expect, describe, test } from 'vitest';
-import Text from './Text.svelte';
-
-function textSnippet(text) {
-  return createRawSnippet(() => ({
-    render: () => `<span>${text}</span>`
-  }));
-}
-
-describe('Text', () => {
-  test('renders a span element', () => {
-    const { container } = render(Text, { props: { children: textSnippet('Hello') } });
-    expect(container.querySelector('span')).toBeInTheDocument();
-    expect(container.textContent).toContain('Hello');
-  });
-
-  test('default size is md (text-base)', () => {
-    const { container } = render(Text, { props: { children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('text-base');
-  });
-
-  test('size xs', () => {
-    const { container } = render(Text, { props: { size: 'xs', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('text-xs');
-  });
-
-  test('size lg', () => {
-    const { container } = render(Text, { props: { size: 'lg', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('text-lg');
-  });
-
-  test('size 2xl', () => {
-    const { container } = render(Text, { props: { size: '2xl', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('text-2xl');
-  });
-
-  test('default color is default (gray-900)', () => {
-    const { container } = render(Text, { props: { children: textSnippet('T') } });
-    expect(container.querySelector('span').className).toContain('text-gray-900');
-  });
-
-  test('color muted', () => {
-    const { container } = render(Text, { props: { color: 'muted', children: textSnippet('T') } });
-    expect(container.querySelector('span').className).toContain('text-gray-500');
-  });
-
-  test('color success', () => {
-    const { container } = render(Text, { props: { color: 'success', children: textSnippet('T') } });
-    expect(container.querySelector('span').className).toContain('text-green-600');
-  });
-
-  test('color error', () => {
-    const { container } = render(Text, { props: { color: 'error', children: textSnippet('T') } });
-    expect(container.querySelector('span').className).toContain('text-red-600');
-  });
-
-  test('leading tight', () => {
-    const { container } = render(Text, { props: { leading: 'tight', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('leading-tight');
-  });
-
-  test('leading relaxed', () => {
-    const { container } = render(Text, { props: { leading: 'relaxed', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('leading-relaxed');
-  });
-
-  test('no leading class when not provided', () => {
-    const { container } = render(Text, { props: { children: textSnippet('T') } });
-    const cls = container.querySelector('span').className;
-    expect(cls).not.toContain('leading-');
-  });
-
-  test('applies custom className', () => {
-    const { container } = render(Text, { props: { class: 'custom-text', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('custom-text');
-  });
-
-  test('invalid size falls back to text-base', () => {
-    const { container } = render(Text, { props: { size: 'invalid', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toHaveClass('text-base');
-  });
-
-  test('invalid color falls back gracefully', () => {
-    const { container } = render(Text, { props: { color: 'invalid', children: textSnippet('T') } });
-    expect(container.querySelector('span')).toBeInTheDocument();
-  });
-});
+import { render } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { expect, describe, test } from 'vitest';
+import Text from './Text.svelte';
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
+
+describe('Text', () => {
+  test('renders a span element', () => {
+    const { container } = render(Text, { props: { children: textSnippet('Hello') } });
+    expect(container.querySelector('span')).toBeInTheDocument();
+    expect(container.textContent).toContain('Hello');
+  });
+
+  test('default size is md (text-base)', () => {
+    const { container } = render(Text, { props: { children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('text-base');
+  });
+
+  test('size xs', () => {
+    const { container } = render(Text, { props: { size: 'xs', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('text-xs');
+  });
+
+  test('size lg', () => {
+    const { container } = render(Text, { props: { size: 'lg', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('text-lg');
+  });
+
+  test('size 2xl', () => {
+    const { container } = render(Text, { props: { size: '2xl', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('text-2xl');
+  });
+
+  test('default color is default (gray-900)', () => {
+    const { container } = render(Text, { props: { children: textSnippet('T') } });
+    expect(container.querySelector('span').className).toContain('text-gray-900');
+  });
+
+  test('color muted', () => {
+    const { container } = render(Text, { props: { color: 'muted', children: textSnippet('T') } });
+    expect(container.querySelector('span').className).toContain('text-gray-500');
+  });
+
+  test('color success', () => {
+    const { container } = render(Text, { props: { color: 'success', children: textSnippet('T') } });
+    expect(container.querySelector('span').className).toContain('text-green-600');
+  });
+
+  test('color error', () => {
+    const { container } = render(Text, { props: { color: 'error', children: textSnippet('T') } });
+    expect(container.querySelector('span').className).toContain('text-red-600');
+  });
+
+  test('leading tight', () => {
+    const { container } = render(Text, { props: { leading: 'tight', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('leading-tight');
+  });
+
+  test('leading relaxed', () => {
+    const { container } = render(Text, { props: { leading: 'relaxed', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('leading-relaxed');
+  });
+
+  test('no leading class when not provided', () => {
+    const { container } = render(Text, { props: { children: textSnippet('T') } });
+    const cls = container.querySelector('span').className;
+    expect(cls).not.toContain('leading-');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Text, { props: { class: 'custom-text', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('custom-text');
+  });
+
+  test('invalid size falls back to text-base', () => {
+    const { container } = render(Text, { props: { size: 'invalid', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toHaveClass('text-base');
+  });
+
+  test('invalid color falls back gracefully', () => {
+    const { container } = render(Text, { props: { color: 'invalid', children: textSnippet('T') } });
+    expect(container.querySelector('span')).toBeInTheDocument();
+  });
+});

package/dist/components/Text.svelte

@@ -1,64 +1,64 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    as?: 'span' | 'p' | 'label' | 'div';
-    size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
-    leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
-    color?: 'default' | 'muted' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'none';
-    class?: string;
-    children: Snippet;
-  }
-
-  let {
-    as = 'span',
-    size = 'md',
-    leading,
-    color = 'default',
-    class: className = '',
-    children,
-  }: Props = $props();
-
-  const sizeClasses: Record<string, string> = {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    base: 'text-base',
-    md: 'text-base',
-    lg: 'text-lg',
-    xl: 'text-xl',
-    '2xl': 'text-2xl',
-  };
-
-  const colorClasses: Record<string, string> = {
-    default: 'text-gray-900 dark:text-gray-100',
-    muted: 'text-gray-500 dark:text-gray-400',
-    primary: 'text-primary-600 dark:text-primary-400',
-    secondary: 'text-gray-600 dark:text-gray-300',
-    success: 'text-green-600 dark:text-green-400',
-    warning: 'text-yellow-600 dark:text-yellow-400',
-    error: 'text-red-600 dark:text-red-400',
-    none: '',
-  };
-
-  const leadingClasses: Record<string, string> = {
-    none: 'leading-none',
-    tight: 'leading-tight',
-    snug: 'leading-snug',
-    normal: 'leading-normal',
-    relaxed: 'leading-relaxed',
-    loose: 'leading-loose',
-  };
-
-  let leadingClass = $derived(leading ? leadingClasses[leading] : '');
-  let classes = $derived(`${sizeClasses[size] || 'text-base'} ${leadingClass} ${colorClasses[color] || ''} ${className}`.trim());
-</script>
-
-{#if as === 'p'}
-  <p class={classes}>{@render children()}</p>
-{:else if as === 'label'}
-  <label class={classes}>{@render children()}</label>
-{:else if as === 'div'}
-  <div class={classes}>{@render children()}</div>
-{:else}
-  <span class={classes}>{@render children()}</span>
-{/if}
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    as?: 'span' | 'p' | 'label' | 'div';
+    size?: 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
+    leading?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
+    color?: 'default' | 'muted' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'none';
+    class?: string;
+    children: Snippet;
+  }
+
+  let {
+    as = 'span',
+    size = 'md',
+    leading,
+    color = 'default',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const sizeClasses: Record<string, string> = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    md: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+  };
+
+  const colorClasses: Record<string, string> = {
+    default: 'text-gray-900 dark:text-gray-100',
+    muted: 'text-gray-500 dark:text-gray-400',
+    primary: 'text-primary-600 dark:text-primary-400',
+    secondary: 'text-gray-600 dark:text-gray-300',
+    success: 'text-green-600 dark:text-green-400',
+    warning: 'text-yellow-600 dark:text-yellow-400',
+    error: 'text-red-600 dark:text-red-400',
+    none: '',
+  };
+
+  const leadingClasses: Record<string, string> = {
+    none: 'leading-none',
+    tight: 'leading-tight',
+    snug: 'leading-snug',
+    normal: 'leading-normal',
+    relaxed: 'leading-relaxed',
+    loose: 'leading-loose',
+  };
+
+  let leadingClass = $derived(leading ? leadingClasses[leading] : '');
+  let classes = $derived(`${sizeClasses[size] || 'text-base'} ${leadingClass} ${colorClasses[color] || ''} ${className}`.trim());
+</script>
+
+{#if as === 'p'}
+  <p class={classes}>{@render children()}</p>
+{:else if as === 'label'}
+  <label class={classes}>{@render children()}</label>
+{:else if as === 'div'}
+  <div class={classes}>{@render children()}</div>
+{:else}
+  <span class={classes}>{@render children()}</span>
+{/if}

package/dist/config.d.ts

@@ -1,5 +1,16 @@
-export const API_BASE_URL: any;
-export const PUBLIC_GOOGLE_MAPS_API_KEY: any;
+/**
+ * Configure runtime values (call once at app startup).
+ * SvelteKit apps should call this in their root layout with env values.
+ * @param {{ apiBaseUrl?: string, googleMapsApiKey?: string }} opts
+ */
+export function configureApp(opts?: {
+    apiBaseUrl?: string;
+    googleMapsApiKey?: string;
+}): void;
+/** @type {string} */
+export let API_BASE_URL: string;
+/** @type {string} */
+export let PUBLIC_GOOGLE_MAPS_API_KEY: string;
 export namespace STRING_LIMITS {
     let EVENT_TITLE_MIN: number;
     let EVENT_TITLE_MAX: number;

package/dist/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/lib/config.js"],"names":[],"mappings":"AAAA,+BACiE;AAEjE,6CAE4C"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/lib/config.js"],"names":[],"mappings":"AAMA;;;;GAIG;AACH,oCAFW;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAAE,QAK5D;AAdD,qBAAqB;AACrB,yBADW,MAAM,CACmC;AAEpD,qBAAqB;AACrB,uCADW,MAAM,CACiE"}

package/dist/config.js

@@ -1,152 +1,161 @@
-export const API_BASE_URL =
-  import.meta.env.VITE_API_BASE_URL || 'https://get-micdrop.com';
-
-export const PUBLIC_GOOGLE_MAPS_API_KEY =
-  import.meta.env.VITE_PUBLIC_GOOGLE_MAPS_API_KEY ||
-  'AIzaSyCFB0-9qay7P0jZZDw93SsTnyLtZDlch7Q';
-
-/**
- * String length limits for validation schemas
- */
-export const STRING_LIMITS = {
-  EVENT_TITLE_MIN: 1,
-  EVENT_TITLE_MAX: 200,
-  EVENT_DESCRIPTION_MAX: 5000,
-  VENUE_NAME_MIN: 1,
-  VENUE_NAME_MAX: 200,
-  VENUE_DESCRIPTION_MAX: 3000,
-  PERFORMER_NAME_MIN: 1,
-  PERFORMER_NAME_MAX: 100,
-  PERFORMER_BIO_MAX: 2000,
-  TICKET_NAME_MIN: 1,
-  TICKET_NAME_MAX: 100,
-  TICKET_DESCRIPTION_MAX: 500,
-  PROMO_CODE_MIN: 3,
-  PROMO_CODE_MAX: 20,
-  SHORT_TEXT_MAX: 100,
-  MEDIUM_TEXT_MAX: 500,
-  LONG_TEXT_MAX: 2000,
-  EMAIL_MAX: 254,
-  PHONE_MAX: 20,
-  URL_MAX: 2048,
-  ADDRESS_MAX: 200,
-  CITY_MAX: 100,
-  POSTAL_CODE_MAX: 20,
-  NOTES_MAX: 1000,
-};
-
-/**
- * Number limits for validation schemas
- */
-export const NUMBER_LIMITS = {
-  AGE_MIN: 0,
-  AGE_MAX: 21,
-  PERCENT_MIN: 0,
-  PERCENT_MAX: 100,
-  CURRENCY_MIN: 0,
-  CURRENCY_MAX: 1000000,
-  QUANTITY_MIN: 0,
-  QUANTITY_MAX: 100000,
-  YEAR_MIN: 1900,
-  YEAR_MAX: 2100,
-  RATING_MIN: 1,
-  RATING_MAX: 5,
-};
-
-/**
- * File validation limits
- */
-export const FILE_LIMITS = {
-  MAX_SIZE: 10 * 1024 * 1024,
-  MAX_IMAGE_SIZE: 5 * 1024 * 1024,
-  MAX_CSV_SIZE: 50 * 1024 * 1024,
-  MAX_FILENAME_LENGTH: 255,
-};
-
-/**
- * Input patterns (regex)
- */
-export const PATTERNS = {
-  EMAIL: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-  PHONE: /^\+?1?[-.\s]?\(?[0-9]{3}\)?[-.\s]?[0-9]{3}[-.\s]?[0-9]{4}$/,
-  ZIP_CODE: /^\d{5}(-\d{4})?$/,
-  ALPHANUMERIC: /^[a-zA-Z0-9]+$/,
-  SLUG: /^[a-z0-9]+(?:-[a-z0-9]+)*$/,
-  PROMO_CODE: /^[A-Z0-9_]+$/,
-  URL: /^https?:\/\/.+/,
-  TIME_24H: /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/,
-  CURRENCY: /^\d+(\.\d{1,2})?$/,
-};
-
-/**
- * Password requirements
- */
-export const PASSWORD = {
-  MIN_LENGTH: 8,
-  MAX_LENGTH: 128,
-  REQUIRE_UPPERCASE: true,
-  REQUIRE_LOWERCASE: true,
-  REQUIRE_NUMBER: true,
-  REQUIRE_SPECIAL: false,
-};
-
-/**
- * Order limits
- */
-export const ORDER = {
-  MIN_TICKETS: 1,
-  MAX_TICKETS: 50,
-  DEFAULT_MAX_TICKETS: 10,
-  CART_TIMEOUT_MINUTES: 15,
-};
-
-/**
- * Ticket pricing limits
- */
-export const TICKET_PRICING = {
-  MIN_PRICE: 0,
-  MAX_PRICE: 10000,
-  PRICE_PRECISION: 2,
-};
-
-/**
- * Event capacity limits
- */
-export const CAPACITY = {
-  MIN_CAPACITY: 1,
-  MAX_CAPACITY: 100000,
-  DEFAULT_CAPACITY: 100,
-};
-
-/**
- * Promo code limits
- */
-export const PROMO_CODE = {
-  MIN_CODE_LENGTH: 3,
-  MAX_CODE_LENGTH: 20,
-  MAX_DISCOUNT_PERCENT: 100,
-  MAX_DISCOUNT_FIXED: 1000,
-  DEFAULT_USAGE_LIMIT: 100,
-};
-
-/**
- * Performer/roster limits
- */
-export const PERFORMER = {
-  MIN_SET_TIME: 5,
-  MAX_SET_TIME: 180,
-  DEFAULT_SET_TIME: 15,
-  MAX_PER_EVENT: 50,
-  MAX_TIER: 5,
-};
-
-/**
- * Schedule/timeline limits
- */
-export const SCHEDULE = {
-  MIN_EVENT_DURATION: 15,
-  MAX_EVENT_DURATION: 24 * 60,
-  DEFAULT_EVENT_DURATION: 120,
-  DEFAULT_DOORS_BEFORE: 30,
-  MAX_ADVANCE_DAYS: 365,
+/** @type {string} */
+export let API_BASE_URL = 'https://get-micdrop.com';
+
+/** @type {string} */
+export let PUBLIC_GOOGLE_MAPS_API_KEY = 'AIzaSyCFB0-9qay7P0jZZDw93SsTnyLtZDlch7Q';
+
+/**
+ * Configure runtime values (call once at app startup).
+ * SvelteKit apps should call this in their root layout with env values.
+ * @param {{ apiBaseUrl?: string, googleMapsApiKey?: string }} opts
+ */
+export function configureApp(opts = {}) {
+  if (opts.apiBaseUrl) API_BASE_URL = opts.apiBaseUrl;
+  if (opts.googleMapsApiKey) PUBLIC_GOOGLE_MAPS_API_KEY = opts.googleMapsApiKey;
+}
+
+/**
+ * String length limits for validation schemas
+ */
+export const STRING_LIMITS = {
+  EVENT_TITLE_MIN: 1,
+  EVENT_TITLE_MAX: 200,
+  EVENT_DESCRIPTION_MAX: 5000,
+  VENUE_NAME_MIN: 1,
+  VENUE_NAME_MAX: 200,
+  VENUE_DESCRIPTION_MAX: 3000,
+  PERFORMER_NAME_MIN: 1,
+  PERFORMER_NAME_MAX: 100,
+  PERFORMER_BIO_MAX: 2000,
+  TICKET_NAME_MIN: 1,
+  TICKET_NAME_MAX: 100,
+  TICKET_DESCRIPTION_MAX: 500,
+  PROMO_CODE_MIN: 3,
+  PROMO_CODE_MAX: 20,
+  SHORT_TEXT_MAX: 100,
+  MEDIUM_TEXT_MAX: 500,
+  LONG_TEXT_MAX: 2000,
+  EMAIL_MAX: 254,
+  PHONE_MAX: 20,
+  URL_MAX: 2048,
+  ADDRESS_MAX: 200,
+  CITY_MAX: 100,
+  POSTAL_CODE_MAX: 20,
+  NOTES_MAX: 1000,
+};
+
+/**
+ * Number limits for validation schemas
+ */
+export const NUMBER_LIMITS = {
+  AGE_MIN: 0,
+  AGE_MAX: 21,
+  PERCENT_MIN: 0,
+  PERCENT_MAX: 100,
+  CURRENCY_MIN: 0,
+  CURRENCY_MAX: 1000000,
+  QUANTITY_MIN: 0,
+  QUANTITY_MAX: 100000,
+  YEAR_MIN: 1900,
+  YEAR_MAX: 2100,
+  RATING_MIN: 1,
+  RATING_MAX: 5,
+};
+
+/**
+ * File validation limits
+ */
+export const FILE_LIMITS = {
+  MAX_SIZE: 10 * 1024 * 1024,
+  MAX_IMAGE_SIZE: 5 * 1024 * 1024,
+  MAX_CSV_SIZE: 50 * 1024 * 1024,
+  MAX_FILENAME_LENGTH: 255,
+};
+
+/**
+ * Input patterns (regex)
+ */
+export const PATTERNS = {
+  EMAIL: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+  PHONE: /^\+?1?[-.\s]?\(?[0-9]{3}\)?[-.\s]?[0-9]{3}[-.\s]?[0-9]{4}$/,
+  ZIP_CODE: /^\d{5}(-\d{4})?$/,
+  ALPHANUMERIC: /^[a-zA-Z0-9]+$/,
+  SLUG: /^[a-z0-9]+(?:-[a-z0-9]+)*$/,
+  PROMO_CODE: /^[A-Z0-9_]+$/,
+  URL: /^https?:\/\/.+/,
+  TIME_24H: /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/,
+  CURRENCY: /^\d+(\.\d{1,2})?$/,
+};
+
+/**
+ * Password requirements
+ */
+export const PASSWORD = {
+  MIN_LENGTH: 8,
+  MAX_LENGTH: 128,
+  REQUIRE_UPPERCASE: true,
+  REQUIRE_LOWERCASE: true,
+  REQUIRE_NUMBER: true,
+  REQUIRE_SPECIAL: false,
+};
+
+/**
+ * Order limits
+ */
+export const ORDER = {
+  MIN_TICKETS: 1,
+  MAX_TICKETS: 50,
+  DEFAULT_MAX_TICKETS: 10,
+  CART_TIMEOUT_MINUTES: 15,
+};
+
+/**
+ * Ticket pricing limits
+ */
+export const TICKET_PRICING = {
+  MIN_PRICE: 0,
+  MAX_PRICE: 10000,
+  PRICE_PRECISION: 2,
+};
+
+/**
+ * Event capacity limits
+ */
+export const CAPACITY = {
+  MIN_CAPACITY: 1,
+  MAX_CAPACITY: 100000,
+  DEFAULT_CAPACITY: 100,
+};
+
+/**
+ * Promo code limits
+ */
+export const PROMO_CODE = {
+  MIN_CODE_LENGTH: 3,
+  MAX_CODE_LENGTH: 20,
+  MAX_DISCOUNT_PERCENT: 100,
+  MAX_DISCOUNT_FIXED: 1000,
+  DEFAULT_USAGE_LIMIT: 100,
+};
+
+/**
+ * Performer/roster limits
+ */
+export const PERFORMER = {
+  MIN_SET_TIME: 5,
+  MAX_SET_TIME: 180,
+  DEFAULT_SET_TIME: 15,
+  MAX_PER_EVENT: 50,
+  MAX_TIER: 5,
+};
+
+/**
+ * Schedule/timeline limits
+ */
+export const SCHEDULE = {
+  MIN_EVENT_DURATION: 15,
+  MAX_EVENT_DURATION: 24 * 60,
+  DEFAULT_EVENT_DURATION: 120,
+  DEFAULT_DOORS_BEFORE: 30,
+  MAX_ADVANCE_DAYS: 365,
 };