@getmicdrop/svelte-components 5.3.10 → 5.3.13

package/dist/components/Layout/Sidebar.svelte

@@ -1,108 +1,108 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  /**
-   * Sidebar - Main content with sidebar layout
-   *
-   * Use Sidebar for pages that have a main content area plus a sidebar.
-   * Common patterns: dashboard stats on right, filters on left, etc.
-   *
-   * @example
-   * <Sidebar sidebar={sidebarContent}>
-   *   <div>Main content here</div>
-   * </Sidebar>
-   *
-   * {#snippet sidebarContent()}
-   *   <StatsCard />
-   * {/snippet}
-   *
-   * @example
-   * <Sidebar sidebarPosition="left" sidebarWidth="narrow" sidebar={filters}>
-   *   <Table />
-   * </Sidebar>
-   */
-
-  interface Props {
-    /**
-     * Sidebar width preset
-     * - narrow: ~25% (col-span-3 of 12)
-     * - medium: ~30% (col-span-4 of 12)
-     * - wide: ~40% (col-span-5 of 12)
-     */
-    sidebarWidth?: 'narrow' | 'medium' | 'wide';
-    /** Sidebar position */
-    sidebarPosition?: 'left' | 'right';
-    /** Gap between main and sidebar */
-    gap?: '4' | '6' | '8';
-    /** Stack vertically on mobile */
-    stackOnMobile?: boolean;
-    /** Additional CSS classes */
-    class?: string;
-    /** Main content */
-    children?: Snippet;
-    /** Sidebar content (named snippet) */
-    sidebar?: Snippet;
-  }
-
-  let {
-    sidebarWidth = 'medium',
-    sidebarPosition = 'right',
-    gap = '6',
-    stackOnMobile = true,
-    class: className = '',
-    children,
-    sidebar
-  }: Props = $props();
-
-  const gapMap: Record<string, string> = {
-    '4': 'gap-4',
-    '6': 'gap-6',
-    '8': 'gap-8'
-  };
-
-  // Using 12-column grid for flexibility
-  // Main content gets remaining columns
-  const sidebarWidthMap: Record<string, { sidebar: string; main: string }> = {
-    narrow: { sidebar: 'lg:col-span-3', main: 'lg:col-span-9' },
-    medium: { sidebar: 'lg:col-span-4', main: 'lg:col-span-8' },
-    wide: { sidebar: 'lg:col-span-5', main: 'lg:col-span-7' }
-  };
-
-  let widthConfig = $derived(sidebarWidthMap[sidebarWidth] || sidebarWidthMap.medium);
-
-  let containerClasses = $derived(
-    [
-      'grid',
-      stackOnMobile ? 'grid-cols-1' : '',
-      'lg:grid-cols-12',
-      gapMap[gap] || 'gap-6',
-      className
-    ].filter(Boolean).join(' ')
-  );
-
-  let mainClasses = $derived(
-    [
-      'col-span-1',
-      widthConfig.main,
-      sidebarPosition === 'left' ? 'lg:order-2' : 'lg:order-1'
-    ].filter(Boolean).join(' ')
-  );
-
-  let sidebarClasses = $derived(
-    [
-      'col-span-1',
-      widthConfig.sidebar,
-      sidebarPosition === 'left' ? 'lg:order-1' : 'lg:order-2'
-    ].filter(Boolean).join(' ')
-  );
-</script>
-
-<div class={containerClasses}>
-  <div class={mainClasses}>
-    {@render children?.()}
-  </div>
-
-  <aside class={sidebarClasses}>
-    {@render sidebar?.()}
-  </aside>
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  /**
+   * Sidebar - Main content with sidebar layout
+   *
+   * Use Sidebar for pages that have a main content area plus a sidebar.
+   * Common patterns: dashboard stats on right, filters on left, etc.
+   *
+   * @example
+   * <Sidebar sidebar={sidebarContent}>
+   *   <div>Main content here</div>
+   * </Sidebar>
+   *
+   * {#snippet sidebarContent()}
+   *   <StatsCard />
+   * {/snippet}
+   *
+   * @example
+   * <Sidebar sidebarPosition="left" sidebarWidth="narrow" sidebar={filters}>
+   *   <Table />
+   * </Sidebar>
+   */
+
+  interface Props {
+    /**
+     * Sidebar width preset
+     * - narrow: ~25% (col-span-3 of 12)
+     * - medium: ~30% (col-span-4 of 12)
+     * - wide: ~40% (col-span-5 of 12)
+     */
+    sidebarWidth?: 'narrow' | 'medium' | 'wide';
+    /** Sidebar position */
+    sidebarPosition?: 'left' | 'right';
+    /** Gap between main and sidebar */
+    gap?: '4' | '6' | '8';
+    /** Stack vertically on mobile */
+    stackOnMobile?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** Main content */
+    children?: Snippet;
+    /** Sidebar content (named snippet) */
+    sidebar?: Snippet;
+  }
+
+  let {
+    sidebarWidth = 'medium',
+    sidebarPosition = 'right',
+    gap = '6',
+    stackOnMobile = true,
+    class: className = '',
+    children,
+    sidebar
+  }: Props = $props();
+
+  const gapMap: Record<string, string> = {
+    '4': 'gap-4',
+    '6': 'gap-6',
+    '8': 'gap-8'
+  };
+
+  // Using 12-column grid for flexibility
+  // Main content gets remaining columns
+  const sidebarWidthMap: Record<string, { sidebar: string; main: string }> = {
+    narrow: { sidebar: 'lg:col-span-3', main: 'lg:col-span-9' },
+    medium: { sidebar: 'lg:col-span-4', main: 'lg:col-span-8' },
+    wide: { sidebar: 'lg:col-span-5', main: 'lg:col-span-7' }
+  };
+
+  let widthConfig = $derived(sidebarWidthMap[sidebarWidth] || sidebarWidthMap.medium);
+
+  let containerClasses = $derived(
+    [
+      'grid',
+      stackOnMobile ? 'grid-cols-1' : '',
+      'lg:grid-cols-12',
+      gapMap[gap] || 'gap-6',
+      className
+    ].filter(Boolean).join(' ')
+  );
+
+  let mainClasses = $derived(
+    [
+      'col-span-1',
+      widthConfig.main,
+      sidebarPosition === 'left' ? 'lg:order-2' : 'lg:order-1'
+    ].filter(Boolean).join(' ')
+  );
+
+  let sidebarClasses = $derived(
+    [
+      'col-span-1',
+      widthConfig.sidebar,
+      sidebarPosition === 'left' ? 'lg:order-1' : 'lg:order-2'
+    ].filter(Boolean).join(' ')
+  );
+</script>
+
+<div class={containerClasses}>
+  <div class={mainClasses}>
+    {@render children?.()}
+  </div>
+
+  <aside class={sidebarClasses}>
+    {@render sidebar?.()}
+  </aside>
+</div>

package/dist/components/Layout/Stack.svelte

@@ -1,90 +1,90 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  type GapValue = 'tight' | 'compact' | 'item' | 'group' | 'content' | 'section' | 'layout' | 'page' | '0' | '1' | '1.5' | '2' | '3' | '4' | '6' | '8' | '12' | '16';
-  type Direction = 'vertical' | 'horizontal';
-  type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-  type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-  type ElementType = 'div' | 'section' | 'article' | 'aside' | 'main' | 'nav' | 'ul' | 'ol';
-
-  interface Props {
-    gap?: GapValue;
-    direction?: Direction;
-    align?: Align;
-    justify?: Justify;
-    wrap?: boolean;
-    as?: ElementType;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    gap = '4',
-    direction = 'vertical',
-    align,
-    justify,
-    wrap = false,
-    as = 'div',
-    class: className = '',
-    children,
-    ...restProps
-  }: Props = $props();
-
-  const semanticGapMap: Record<string, string> = {
-    'tight': 'gap-1',
-    'compact': 'gap-1.5',
-    'item': 'gap-2',
-    'group': 'gap-3',
-    'content': 'gap-4',
-    'section': 'gap-6',
-    'layout': 'gap-8',
-    'page': 'gap-12',
-  };
-
-  const numericGapMap: Record<string, string> = {
-    '0': 'gap-0',
-    '1': 'gap-1',
-    '1.5': 'gap-1.5',
-    '2': 'gap-2',
-    '3': 'gap-3',
-    '4': 'gap-4',
-    '6': 'gap-6',
-    '8': 'gap-8',
-    '12': 'gap-12',
-    '16': 'gap-16'
-  };
-
-  const gapMap = { ...numericGapMap, ...semanticGapMap };
-
-  const alignMap: Record<string, string> = {
-    start: 'items-start',
-    center: 'items-center',
-    end: 'items-end',
-    stretch: 'items-stretch',
-    baseline: 'items-baseline'
-  };
-
-  const justifyMap: Record<string, string> = {
-    start: 'justify-start',
-    center: 'justify-center',
-    end: 'justify-end',
-    between: 'justify-between',
-    around: 'justify-around',
-    evenly: 'justify-evenly'
-  };
-
-  let classes = $derived([
-    'flex',
-    direction === 'vertical' ? 'flex-col' : 'flex-row',
-    gapMap[gap] || 'gap-4',
-    align ? alignMap[align] : '',
-    justify ? justifyMap[justify] : '',
-    wrap ? 'flex-wrap' : '',
-    className
-  ].filter(Boolean).join(' '));
-</script>
-
-<svelte:element this={as} class={classes} {...restProps}>
-  {#if children}{@render children()}{/if}
-</svelte:element>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  type GapValue = 'tight' | 'compact' | 'item' | 'group' | 'content' | 'section' | 'layout' | 'page' | '0' | '1' | '1.5' | '2' | '3' | '4' | '6' | '8' | '12' | '16';
+  type Direction = 'vertical' | 'horizontal';
+  type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+  type ElementType = 'div' | 'section' | 'article' | 'aside' | 'main' | 'nav' | 'ul' | 'ol';
+
+  interface Props {
+    gap?: GapValue;
+    direction?: Direction;
+    align?: Align;
+    justify?: Justify;
+    wrap?: boolean;
+    as?: ElementType;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    gap = '4',
+    direction = 'vertical',
+    align,
+    justify,
+    wrap = false,
+    as = 'div',
+    class: className = '',
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const semanticGapMap: Record<string, string> = {
+    'tight': 'gap-1',
+    'compact': 'gap-1.5',
+    'item': 'gap-2',
+    'group': 'gap-3',
+    'content': 'gap-4',
+    'section': 'gap-6',
+    'layout': 'gap-8',
+    'page': 'gap-12',
+  };
+
+  const numericGapMap: Record<string, string> = {
+    '0': 'gap-0',
+    '1': 'gap-1',
+    '1.5': 'gap-1.5',
+    '2': 'gap-2',
+    '3': 'gap-3',
+    '4': 'gap-4',
+    '6': 'gap-6',
+    '8': 'gap-8',
+    '12': 'gap-12',
+    '16': 'gap-16'
+  };
+
+  const gapMap = { ...numericGapMap, ...semanticGapMap };
+
+  const alignMap: Record<string, string> = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+    baseline: 'items-baseline'
+  };
+
+  const justifyMap: Record<string, string> = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+    around: 'justify-around',
+    evenly: 'justify-evenly'
+  };
+
+  let classes = $derived([
+    'flex',
+    direction === 'vertical' ? 'flex-col' : 'flex-row',
+    gapMap[gap] || 'gap-4',
+    align ? alignMap[align] : '',
+    justify ? justifyMap[justify] : '',
+    wrap ? 'flex-wrap' : '',
+    className
+  ].filter(Boolean).join(' '));
+</script>
+
+<svelte:element this={as} class={classes} {...restProps}>
+  {#if children}{@render children()}{/if}
+</svelte:element>

package/dist/constants/formOptions.js

@@ -1,26 +1,26 @@
-/**
- * Form options for dropdowns used across the performers portal.
- * Use these with Select and MultiSelect components instead of
- * creating wrapper components like GenderInput or EthnicityDropdown.
- *
- * Example:
- *   import { GENDER_OPTIONS } from './formOptions';
- *   <Select items={GENDER_OPTIONS} label="Gender" />
- */
-
-export const GENDER_OPTIONS = [
-  { name: "Male", value: 1 },
-  { name: "Female", value: 2 },
-  { name: "Non-binary", value: 3 },
-  { name: "Rather not say", value: null },
-];
-
-export const ETHNICITY_OPTIONS = [
-  { name: "American Indian or Alaska Native", value: 0 },
-  { name: "Asian", value: 1 },
-  { name: "Black or African American", value: 2 },
-  { name: "Hispanic or Latino", value: 3 },
-  { name: "Middle Eastern or North African", value: 4 },
-  { name: "Native Hawaiian or Pacific Islander", value: 5 },
-  { name: "White", value: 6 },
-];
+/**
+ * Form options for dropdowns used across the performers portal.
+ * Use these with Select and MultiSelect components instead of
+ * creating wrapper components like GenderInput or EthnicityDropdown.
+ *
+ * Example:
+ *   import { GENDER_OPTIONS } from './formOptions';
+ *   <Select items={GENDER_OPTIONS} label="Gender" />
+ */
+
+export const GENDER_OPTIONS = [
+  { name: "Male", value: 1 },
+  { name: "Female", value: 2 },
+  { name: "Non-binary", value: 3 },
+  { name: "Rather not say", value: null },
+];
+
+export const ETHNICITY_OPTIONS = [
+  { name: "American Indian or Alaska Native", value: 0 },
+  { name: "Asian", value: 1 },
+  { name: "Black or African American", value: 2 },
+  { name: "Hispanic or Latino", value: 3 },
+  { name: "Middle Eastern or North African", value: 4 },
+  { name: "Native Hawaiian or Pacific Islander", value: 5 },
+  { name: "White", value: 6 },
+];

package/dist/constants/validation.js

@@ -1,91 +1,91 @@
-/**
- * Validation Constants
- *
- * Shared validation rules and defaults for event, ticket, and promo code validation.
- * Used by micdrop-frontend, venue-calendar-npm, and other apps.
- *
- * @example
- * import { MIN_EVENT_DURATION_MINS, DEFAULT_EVENT_DURATION_MINS } from '@getmicdrop/svelte-components';
- */
-
-// ============================================================================
-// Event Time Constants
-// ============================================================================
-
-/** Minimum event duration in minutes (validation constraint) */
-export const MIN_EVENT_DURATION_MINS = 15;
-
-/** Maximum event duration in minutes (24 hours) */
-export const MAX_EVENT_DURATION_MINS = 1440;
-
-/** Default event duration in minutes (used when auto-filling end time) */
-export const DEFAULT_EVENT_DURATION_MINS = 90;
-
-/** Default time doors open before event start in minutes (used when auto-filling) */
-export const DEFAULT_DOORS_BEFORE_START_MINS = 30;
-
-// ============================================================================
-// Ticket Constants
-// ============================================================================
-
-/** Maximum tickets per order limit */
-export const MAX_TICKETS_PER_ORDER = 100;
-
-/** Minimum tickets per order limit */
-export const MIN_TICKETS_PER_ORDER = 0;
-
-// ============================================================================
-// Promo Code Constants
-// ============================================================================
-
-/** Maximum percentage discount */
-export const MAX_PERCENTAGE_DISCOUNT = 100;
-
-// ============================================================================
-// Error Codes
-// ============================================================================
-
-export const ErrorCodes = {
-  // Event errors
-  EVENT_DURATION_TOO_SHORT: 'EVENT_DURATION_TOO_SHORT',
-  EVENT_DURATION_TOO_LONG: 'EVENT_DURATION_TOO_LONG',
-  EVENT_END_BEFORE_START: 'EVENT_END_BEFORE_START',
-  EVENT_DOORS_SAME_AS_START: 'EVENT_DOORS_SAME_AS_START',
-  EVENT_DOORS_TOO_CLOSE: 'EVENT_DOORS_TOO_CLOSE',
-  EVENT_INVALID_TIME_FORMAT: 'EVENT_INVALID_TIME_FORMAT',
-
-  // Price/quantity errors
-  PRICE_REQUIRED: 'PRICE_REQUIRED',
-  PRICE_MUST_BE_POSITIVE: 'PRICE_MUST_BE_POSITIVE',
-  PRICE_INVALID_FORMAT: 'PRICE_INVALID_FORMAT',
-  QUANTITY_REQUIRED: 'QUANTITY_REQUIRED',
-  QUANTITY_MUST_BE_POSITIVE: 'QUANTITY_MUST_BE_POSITIVE',
-  QUANTITY_INVALID_FORMAT: 'QUANTITY_INVALID_FORMAT',
-
-  // Ticket limit errors
-  MIN_TICKETS_REQUIRED: 'MIN_TICKETS_REQUIRED',
-  MIN_TICKETS_EXCEEDS_MAX_ALLOWED: 'MIN_TICKETS_EXCEEDS_MAX_ALLOWED',
-  MAX_TICKETS_EXCEEDS_MAX_ALLOWED: 'MAX_TICKETS_EXCEEDS_MAX_ALLOWED',
-  MIN_EXCEEDS_MAX: 'MIN_EXCEEDS_MAX',
-
-  // Sales window errors
-  SALES_BEGIN_AFTER_EVENT_END: 'SALES_BEGIN_AFTER_EVENT_END',
-  SALES_END_AFTER_EVENT_END: 'SALES_END_AFTER_EVENT_END',
-  SALES_END_BEFORE_BEGIN: 'SALES_END_BEFORE_BEGIN',
-
-  // Capacity errors
-  CAPACITY_EXCEEDED: 'CAPACITY_EXCEEDED',
-
-  // Promo code errors
-  PROMO_NAME_REQUIRED: 'PROMO_NAME_REQUIRED',
-  PROMO_NAME_COLLISION: 'PROMO_NAME_COLLISION',
-  PROMO_END_BEFORE_START: 'PROMO_END_BEFORE_START',
-  PROMO_DISCOUNT_REQUIRED: 'PROMO_DISCOUNT_REQUIRED',
-  PROMO_BOTH_DISCOUNT_TYPES: 'PROMO_BOTH_DISCOUNT_TYPES',
-  PROMO_PERCENT_EXCEEDS_100: 'PROMO_PERCENT_EXCEEDS_100',
-  PROMO_LIMIT_REQUIRED: 'PROMO_LIMIT_REQUIRED',
-
-  // Warning codes
-  PROMO_EXTENDS_PAST_EVENT: 'PROMO_EXTENDS_PAST_EVENT',
-  SALES_CLOSE_TO_EVENT: 'SALES_CLOSE_TO_EVENT',
-};
+/**
+ * Validation Constants
+ *
+ * Shared validation rules and defaults for event, ticket, and promo code validation.
+ * Used by micdrop-frontend, venue-calendar-npm, and other apps.
+ *
+ * @example
+ * import { MIN_EVENT_DURATION_MINS, DEFAULT_EVENT_DURATION_MINS } from '@getmicdrop/svelte-components';
+ */
+
+// ============================================================================
+// Event Time Constants
+// ============================================================================
+
+/** Minimum event duration in minutes (validation constraint) */
+export const MIN_EVENT_DURATION_MINS = 15;
+
+/** Maximum event duration in minutes (24 hours) */
+export const MAX_EVENT_DURATION_MINS = 1440;
+
+/** Default event duration in minutes (used when auto-filling end time) */
+export const DEFAULT_EVENT_DURATION_MINS = 90;
+
+/** Default time doors open before event start in minutes (used when auto-filling) */
+export const DEFAULT_DOORS_BEFORE_START_MINS = 30;
+
+// ============================================================================
+// Ticket Constants
+// ============================================================================
+
+/** Maximum tickets per order limit */
+export const MAX_TICKETS_PER_ORDER = 100;
+
+/** Minimum tickets per order limit */
+export const MIN_TICKETS_PER_ORDER = 0;
+
+// ============================================================================
+// Promo Code Constants
+// ============================================================================
+
+/** Maximum percentage discount */
+export const MAX_PERCENTAGE_DISCOUNT = 100;
+
+// ============================================================================
+// Error Codes
+// ============================================================================
+
+export const ErrorCodes = {
+  // Event errors
+  EVENT_DURATION_TOO_SHORT: 'EVENT_DURATION_TOO_SHORT',
+  EVENT_DURATION_TOO_LONG: 'EVENT_DURATION_TOO_LONG',
+  EVENT_END_BEFORE_START: 'EVENT_END_BEFORE_START',
+  EVENT_DOORS_SAME_AS_START: 'EVENT_DOORS_SAME_AS_START',
+  EVENT_DOORS_TOO_CLOSE: 'EVENT_DOORS_TOO_CLOSE',
+  EVENT_INVALID_TIME_FORMAT: 'EVENT_INVALID_TIME_FORMAT',
+
+  // Price/quantity errors
+  PRICE_REQUIRED: 'PRICE_REQUIRED',
+  PRICE_MUST_BE_POSITIVE: 'PRICE_MUST_BE_POSITIVE',
+  PRICE_INVALID_FORMAT: 'PRICE_INVALID_FORMAT',
+  QUANTITY_REQUIRED: 'QUANTITY_REQUIRED',
+  QUANTITY_MUST_BE_POSITIVE: 'QUANTITY_MUST_BE_POSITIVE',
+  QUANTITY_INVALID_FORMAT: 'QUANTITY_INVALID_FORMAT',
+
+  // Ticket limit errors
+  MIN_TICKETS_REQUIRED: 'MIN_TICKETS_REQUIRED',
+  MIN_TICKETS_EXCEEDS_MAX_ALLOWED: 'MIN_TICKETS_EXCEEDS_MAX_ALLOWED',
+  MAX_TICKETS_EXCEEDS_MAX_ALLOWED: 'MAX_TICKETS_EXCEEDS_MAX_ALLOWED',
+  MIN_EXCEEDS_MAX: 'MIN_EXCEEDS_MAX',
+
+  // Sales window errors
+  SALES_BEGIN_AFTER_EVENT_END: 'SALES_BEGIN_AFTER_EVENT_END',
+  SALES_END_AFTER_EVENT_END: 'SALES_END_AFTER_EVENT_END',
+  SALES_END_BEFORE_BEGIN: 'SALES_END_BEFORE_BEGIN',
+
+  // Capacity errors
+  CAPACITY_EXCEEDED: 'CAPACITY_EXCEEDED',
+
+  // Promo code errors
+  PROMO_NAME_REQUIRED: 'PROMO_NAME_REQUIRED',
+  PROMO_NAME_COLLISION: 'PROMO_NAME_COLLISION',
+  PROMO_END_BEFORE_START: 'PROMO_END_BEFORE_START',
+  PROMO_DISCOUNT_REQUIRED: 'PROMO_DISCOUNT_REQUIRED',
+  PROMO_BOTH_DISCOUNT_TYPES: 'PROMO_BOTH_DISCOUNT_TYPES',
+  PROMO_PERCENT_EXCEEDS_100: 'PROMO_PERCENT_EXCEEDS_100',
+  PROMO_LIMIT_REQUIRED: 'PROMO_LIMIT_REQUIRED',
+
+  // Warning codes
+  PROMO_EXTENDS_PAST_EVENT: 'PROMO_EXTENDS_PAST_EVENT',
+  SALES_CLOSE_TO_EVENT: 'SALES_CLOSE_TO_EVENT',
+};