@getmicdrop/svelte-components 5.19.0 → 5.20.1

package/dist/recipes/modals/StatusModal.svelte

@@ -1,216 +1,216 @@
-<script>
-  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from "../../primitives/Icons";
-  import Button from "../../primitives/Button/Button.svelte";
-  import Cancel from "../../assets/svg/cancel.svg";
-  import Modal from "../../primitives/Modal/Modal.svelte";
-  import { typography } from '../../tokens/typography';
-
-  const defaultLabels = {
-    ok: 'Ok',
-    close: 'Close',
-    statusIcon: 'Status icon',
-  };
-
-  let {
-    open = $bindable(false),
-    size = "sm",
-    title = "",
-    subtitle = "",
-    description = "",
-    buttonText = undefined,
-    iconType = "success",
-    customIcon = null,
-    image = null,
-    disabled = false,
-    loading = false,
-    variant = null,
-    actions = [],
-    closeBtn = false,
-    onconfirm,
-    onclose,
-    labels: userLabels = {},
-    ...restProps
-  } = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-  let effectiveButtonText = $derived(buttonText ?? labels.ok);
-
-  let effectiveVariant = $derived(variant || iconType);
-  let isProfileMode = $derived(!!image);
-
-  const handleButtonClick = () => {
-    if (!disabled && !loading) {
-      onconfirm?.();
-      closeModal();
-    }
-  };
-
-  const handleAction = (action) => {
-    if (!disabled && !loading) {
-      action.onClick?.();
-      if (!action.keepOpen) {
-        closeModal();
-      }
-    }
-  };
-
-  const closeModal = () => {
-    open = false;
-    onclose?.();
-  };
-
-  const handleClose = () => {
-    if (disabled || loading) return;
-    closeModal();
-  };
-
-  const getActionVariant = (action) => {
-    if (action.variant) return action.variant;
-    const label = action.label.toLowerCase();
-    if (label.startsWith('delete') || label.startsWith('archive') || action.danger) {
-      return 'red';
-    }
-    if (label === 'continue' || label === 'finish' || label === 'done' || label === 'save & notify') {
-      return 'default';
-    }
-    return 'alternative';
-  };
-
-  const getIconColors = (type) => {
-    switch (type) {
-      case "success":
-        return {
-          bg: "bg-green-100 dark:bg-green-900/30",
-          icon: "text-green-600 dark:text-green-400",
-        };
-      case "error":
-        return {
-          bg: "bg-red-100 dark:bg-red-900/30",
-          icon: "text-red-600 dark:text-red-400",
-        };
-      case "warning":
-        return {
-          bg: "bg-amber-100 dark:bg-amber-900/30",
-          icon: "text-amber-600 dark:text-amber-400",
-        };
-      case "info":
-        return {
-          bg: "bg-blue-100 dark:bg-blue-900/30",
-          icon: "text-blue-600 dark:text-blue-400",
-        };
-      default:
-        return {
-          bg: "bg-green-100 dark:bg-green-900/30",
-          icon: "text-green-600 dark:text-green-400",
-        };
-    }
-  };
-
-  const getButtonVariant = (type) => {
-    switch (type) {
-      case "error":
-        return "red";
-      case "warning":
-        return "default";
-      default:
-        return "default";
-    }
-  };
-
-  let colors = $derived(getIconColors(effectiveVariant));
-  let buttonVariant = $derived(getButtonVariant(effectiveVariant));
-</script>
-
-<Modal bind:open {size} oncancel={handleClose} {...restProps}>
-  {#snippet header()}
-    <div class="text-center">
-      {#if closeBtn}
-        <div class="flex justify-end -mt-2 -mr-2 mb-2">
-          <Button variant="icon" size="xs" onclick={handleClose} {disabled}>
-            <img src={Cancel} alt={labels.close} class="w-5 h-5" />
-          </Button>
-        </div>
-      {/if}
-      {#if isProfileMode}
-        <div class="flex justify-center">
-          <img
-            src={image}
-            alt={title}
-            class="w-16 h-16 rounded-lg object-cover"
-          />
-        </div>
-        <div class="mt-4">
-          {#if title}
-            <h2 class={typography.h2}>{title}</h2>
-          {/if}
-          {#if subtitle}
-            <p class={`${typography.smMuted} mt-1`}>{subtitle}</p>
-          {/if}
-        </div>
-      {:else}
-        <div class="flex justify-center items-center">
-          {#if customIcon}
-            <div class="w-14 h-14 rounded-full {colors.bg} flex items-center justify-center">
-              <img src={customIcon} alt={labels.statusIcon} class="w-8 h-8" />
-            </div>
-          {:else}
-            <div class="w-14 h-14 rounded-full {colors.bg} flex items-center justify-center">
-              {#if effectiveVariant === "success"}
-                <CheckOutline class="w-7 h-7 {colors.icon}" />
-              {:else if effectiveVariant === "error"}
-                <CloseOutline class="w-7 h-7 {colors.icon}" />
-              {:else if effectiveVariant === "warning"}
-                <ExclamationTriangleOutline class="w-7 h-7 {colors.icon}" />
-              {:else if effectiveVariant === "info"}
-                <InfoCircleOutline class="w-7 h-7 {colors.icon}" />
-              {/if}
-            </div>
-          {/if}
-        </div>
-        {#if title}
-          <h2 class={`${typography.h2} mt-4`}>{title}</h2>
-        {/if}
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet body()}
-    <div class="text-center mt-4">
-      {#if description}
-        <p class={`leading-relaxed ${isProfileMode ? `${typography.label}` : `${typography.smMuted}`}`}>
-          {description}
-        </p>
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet footer()}
-    <div class="w-full">
-      {#if actions.length > 0}
-        <div class="flex gap-3">
-          {#each actions as action}
-            <Button
-              size="full"
-              variant={getActionVariant(action)}
-              disabled={action.disabled || disabled}
-              loading={action.loading || (loading && action.primary)}
-              onclick={() => handleAction(action)}
-            >
-              {action.label}
-            </Button>
-          {/each}
-        </div>
-      {:else}
-        <Button
-          size="full"
-          variant={buttonVariant}
-          {disabled}
-          {loading}
-          onclick={handleButtonClick}
-        >
-          {effectiveButtonText}
-        </Button>
-      {/if}
-    </div>
-  {/snippet}
-</Modal>
+<script>
+  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from "../../primitives/Icons";
+  import Button from "../../primitives/Button/Button.svelte";
+  import Cancel from "../../assets/svg/cancel.svg";
+  import Modal from "../../primitives/Modal/Modal.svelte";
+  import { typography } from '../../tokens/typography';
+
+  const defaultLabels = {
+    ok: 'Ok',
+    close: 'Close',
+    statusIcon: 'Status icon',
+  };
+
+  let {
+    open = $bindable(false),
+    size = "sm",
+    title = "",
+    subtitle = "",
+    description = "",
+    buttonText = undefined,
+    iconType = "success",
+    customIcon = null,
+    image = null,
+    disabled = false,
+    loading = false,
+    variant = null,
+    actions = [],
+    closeBtn = false,
+    onconfirm,
+    onclose,
+    labels: userLabels = {},
+    ...restProps
+  } = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+  let effectiveButtonText = $derived(buttonText ?? labels.ok);
+
+  let effectiveVariant = $derived(variant || iconType);
+  let isProfileMode = $derived(!!image);
+
+  const handleButtonClick = () => {
+    if (!disabled && !loading) {
+      onconfirm?.();
+      closeModal();
+    }
+  };
+
+  const handleAction = (action) => {
+    if (!disabled && !loading) {
+      action.onClick?.();
+      if (!action.keepOpen) {
+        closeModal();
+      }
+    }
+  };
+
+  const closeModal = () => {
+    open = false;
+    onclose?.();
+  };
+
+  const handleClose = () => {
+    if (disabled || loading) return;
+    closeModal();
+  };
+
+  const getActionVariant = (action) => {
+    if (action.variant) return action.variant;
+    const label = action.label.toLowerCase();
+    if (label.startsWith('delete') || label.startsWith('archive') || action.danger) {
+      return 'red';
+    }
+    if (label === 'continue' || label === 'finish' || label === 'done' || label === 'save & notify') {
+      return 'default';
+    }
+    return 'alternative';
+  };
+
+  const getIconColors = (type) => {
+    switch (type) {
+      case "success":
+        return {
+          bg: "bg-green-100 dark:bg-green-900/30",
+          icon: "text-green-600 dark:text-green-400",
+        };
+      case "error":
+        return {
+          bg: "bg-red-100 dark:bg-red-900/30",
+          icon: "text-red-600 dark:text-red-400",
+        };
+      case "warning":
+        return {
+          bg: "bg-amber-100 dark:bg-amber-900/30",
+          icon: "text-amber-600 dark:text-amber-400",
+        };
+      case "info":
+        return {
+          bg: "bg-blue-100 dark:bg-blue-900/30",
+          icon: "text-blue-600 dark:text-blue-400",
+        };
+      default:
+        return {
+          bg: "bg-green-100 dark:bg-green-900/30",
+          icon: "text-green-600 dark:text-green-400",
+        };
+    }
+  };
+
+  const getButtonVariant = (type) => {
+    switch (type) {
+      case "error":
+        return "red";
+      case "warning":
+        return "default";
+      default:
+        return "default";
+    }
+  };
+
+  let colors = $derived(getIconColors(effectiveVariant));
+  let buttonVariant = $derived(getButtonVariant(effectiveVariant));
+</script>
+
+<Modal bind:open {size} oncancel={handleClose} {...restProps}>
+  {#snippet header()}
+    <div class="text-center">
+      {#if closeBtn}
+        <div class="flex justify-end -mt-2 -mr-2 mb-2">
+          <Button variant="icon" size="xs" onclick={handleClose} {disabled}>
+            <img src={Cancel} alt={labels.close} class="w-5 h-5" />
+          </Button>
+        </div>
+      {/if}
+      {#if isProfileMode}
+        <div class="flex justify-center">
+          <img
+            src={image}
+            alt={title}
+            class="w-16 h-16 rounded-lg object-cover"
+          />
+        </div>
+        <div class="mt-4">
+          {#if title}
+            <h2 class={typography.h2}>{title}</h2>
+          {/if}
+          {#if subtitle}
+            <p class={`${typography.smMuted} mt-1`}>{subtitle}</p>
+          {/if}
+        </div>
+      {:else}
+        <div class="flex justify-center items-center">
+          {#if customIcon}
+            <div class="w-14 h-14 rounded-full {colors.bg} flex items-center justify-center">
+              <img src={customIcon} alt={labels.statusIcon} class="w-8 h-8" />
+            </div>
+          {:else}
+            <div class="w-14 h-14 rounded-full {colors.bg} flex items-center justify-center">
+              {#if effectiveVariant === "success"}
+                <CheckOutline class="w-7 h-7 {colors.icon}" />
+              {:else if effectiveVariant === "error"}
+                <CloseOutline class="w-7 h-7 {colors.icon}" />
+              {:else if effectiveVariant === "warning"}
+                <ExclamationTriangleOutline class="w-7 h-7 {colors.icon}" />
+              {:else if effectiveVariant === "info"}
+                <InfoCircleOutline class="w-7 h-7 {colors.icon}" />
+              {/if}
+            </div>
+          {/if}
+        </div>
+        {#if title}
+          <h2 class={`${typography.h2} mt-4`}>{title}</h2>
+        {/if}
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet body()}
+    <div class="text-center mt-4">
+      {#if description}
+        <p class={`leading-relaxed ${isProfileMode ? `${typography.label}` : `${typography.smMuted}`}`}>
+          {description}
+        </p>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet footer()}
+    <div class="w-full">
+      {#if actions.length > 0}
+        <div class="flex gap-3">
+          {#each actions as action}
+            <Button
+              size="full"
+              variant={getActionVariant(action)}
+              disabled={action.disabled || disabled}
+              loading={action.loading || (loading && action.primary)}
+              onclick={() => handleAction(action)}
+            >
+              {action.label}
+            </Button>
+          {/each}
+        </div>
+      {:else}
+        <Button
+          size="full"
+          variant={buttonVariant}
+          {disabled}
+          {loading}
+          onclick={handleButtonClick}
+        >
+          {effectiveButtonText}
+        </Button>
+      {/if}
+    </div>
+  {/snippet}
+</Modal>

package/dist/recipes/modals/index.d.ts

@@ -1,5 +1,6 @@
 export { default as AlertModal } from "./AlertModal.svelte";
 export { default as ConfirmationModal } from "./ConfirmationModal.svelte";
+export { default as FeedbackModal } from "./FeedbackModal.svelte";
 export { default as InputModal } from "./InputModal.svelte";
 export { default as ModalStateManager } from "./ModalStateManager.svelte";
 export { default as ModalTestWrapper } from "./ModalTestWrapper.svelte";

package/dist/recipes/modals/index.js

@@ -1,7 +1,8 @@
-// Composite modal components - built on Modal primitive
-export { default as AlertModal } from './AlertModal.svelte';
-export { default as ConfirmationModal } from './ConfirmationModal.svelte';
-export { default as InputModal } from './InputModal.svelte';
-export { default as ModalStateManager } from './ModalStateManager.svelte';
-export { default as ModalTestWrapper } from './ModalTestWrapper.svelte';
-export { default as StatusModal } from './StatusModal.svelte';
+// Composite modal components - built on Modal primitive
+export { default as AlertModal } from './AlertModal.svelte';
+export { default as ConfirmationModal } from './ConfirmationModal.svelte';
+export { default as FeedbackModal } from './FeedbackModal.svelte';
+export { default as InputModal } from './InputModal.svelte';
+export { default as ModalStateManager } from './ModalStateManager.svelte';
+export { default as ModalTestWrapper } from './ModalTestWrapper.svelte';
+export { default as StatusModal } from './StatusModal.svelte';

package/dist/schemas/common.js

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { FILE_LIMITS, NUMBER_LIMITS, PATTERNS, STRING_LIMITS, } from '../config';
+import { FILE_LIMITS, PATTERNS, STRING_LIMITS, } from '../config';
 import { VALIDATION_MESSAGES } from '../messages';
 export const emailSchema = z
     .string()

package/dist/schemas/event.js

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { SCHEDULE, STRING_LIMITS } from '../config';
+import { STRING_LIMITS } from '../config';
 import { VALIDATION_MESSAGES } from '../messages';
 import { dateSchema, imageSchema, optionalDateSchema, optionalString, optionalUuidSchema, positiveIntSchema, requiredString, timezoneSchema, uuidSchema, } from './common';
 export const eventStatusSchema = z.enum([

package/dist/schemas/order.js

@@ -1,5 +1,4 @@
 import { z } from 'zod';
-import { ORDER } from '../config';
 import { VALIDATION_MESSAGES } from '../messages';
 import { addressSchema, emailSchema, optionalString, phoneSchema, priceSchema, requiredString, uuidSchema, } from './common';
 import { cartItemSchema } from './ticket';

package/dist/schemas/performer.js

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import { PERFORMER, STRING_LIMITS } from '../config';
 import { VALIDATION_MESSAGES } from '../messages';
-import { emailSchema, imageSchema, optionalString, phoneSchema, requiredString, socialLinksSchema, urlSchema, } from './common';
+import { emailSchema, imageSchema, optionalString, phoneSchema, requiredString, urlSchema, } from './common';
 export const genderSchema = z.enum([
     'male',
     'female',

package/dist/schemas/promo.js

@@ -1,7 +1,7 @@
 import { z } from 'zod';
-import { PROMO_CODE, STRING_LIMITS } from '../config';
+import { PROMO_CODE } from '../config';
 import { VALIDATION_MESSAGES } from '../messages';
-import { optionalDateSchema, percentageSchema, positiveIntSchema, priceSchema, requiredString, } from './common';
+import { optionalDateSchema, percentageSchema, positiveIntSchema, priceSchema, } from './common';
 export const promoCodeTypeSchema = z.enum(['dollar', 'percent']);
 export const promoCodeLimitTypeSchema = z.enum(['unlimited', 'limited']);
 export const promoCodeNameSchema = z

package/dist/schemas/ticket.js

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { ORDER, STRING_LIMITS, TICKET_PRICING } from '../config';
+import { ORDER, STRING_LIMITS } from '../config';
 import { VALIDATION_MESSAGES } from '../messages';
 import { nonNegativeIntSchema, optionalDateSchema, optionalString, positiveIntSchema, priceSchema, requiredString, uuidSchema, } from './common';
 export const ticketPriceTypeSchema = z.enum(['free', 'paid', 'donation']);

package/dist/schemas/user.js

@@ -1,6 +1,5 @@
 import { z } from 'zod';
-import { STRING_LIMITS } from '../config';
-import { addressSchema, emailSchema, imageSchema, optionalString, phoneSchema, requiredString, } from './common';
+import { emailSchema, imageSchema, optionalString, phoneSchema, requiredString, } from './common';
 export const userRoleSchema = z.enum([
     'owner',
     'admin',

package/dist/services/show.service.d.ts

@@ -1,47 +1,47 @@
-/**
- * Accept an event performer invitation
- * @param {string|number} inviteId - The invitation ID
- * @param {string} message - Optional message to include
- * @returns {Promise<{ok: boolean, result?: any}>}
- */
-export function acceptInvite(inviteId: string | number, message?: string): Promise<{
-    ok: boolean;
-    result?: any;
-}>;
-/**
- * Decline an event performer invitation
- * @param {string|number} inviteId - The invitation ID
- * @param {string} message - Optional message to include
- * @returns {Promise<{ok: boolean, result?: any}>}
- */
-export function declineInvite(inviteId: string | number, message?: string): Promise<{
-    ok: boolean;
-    result?: any;
-}>;
-/**
- * Cancel an event performer invitation
- * @param {string|number} inviteId - The invitation ID
- * @param {string} message - Optional message to include
- * @returns {Promise<{ok: boolean, result?: any}>}
- */
-export function cancelInvite(inviteId: string | number, message?: string): Promise<{
-    ok: boolean;
-    result?: any;
-}>;
-/**
- * Send a message to a venue
- * @param {string|number} inviteId - The invitation/event ID
- * @param {string} message - The message to send
- * @returns {Promise<{ok: boolean, result?: any}>}
- */
-export function sendVenueMessage(inviteId: string | number, message: string): Promise<{
-    ok: boolean;
-    result?: any;
-}>;
-/**
- * Get the ticketing event URL
- * @param {string|number} venueId - The venue/event ID
- * @returns {string}
- */
-export function getEventUrl(venueId: string | number): string;
+/**
+ * Accept an event performer invitation
+ * @param {string|number} inviteId - The invitation ID
+ * @param {string} message - Optional message to include
+ * @returns {Promise<{ok: boolean, result?: any}>}
+ */
+export function acceptInvite(inviteId: string | number, message?: string): Promise<{
+    ok: boolean;
+    result?: any;
+}>;
+/**
+ * Decline an event performer invitation
+ * @param {string|number} inviteId - The invitation ID
+ * @param {string} message - Optional message to include
+ * @returns {Promise<{ok: boolean, result?: any}>}
+ */
+export function declineInvite(inviteId: string | number, message?: string): Promise<{
+    ok: boolean;
+    result?: any;
+}>;
+/**
+ * Cancel an event performer invitation
+ * @param {string|number} inviteId - The invitation ID
+ * @param {string} message - Optional message to include
+ * @returns {Promise<{ok: boolean, result?: any}>}
+ */
+export function cancelInvite(inviteId: string | number, message?: string): Promise<{
+    ok: boolean;
+    result?: any;
+}>;
+/**
+ * Send a message to a venue
+ * @param {string|number} inviteId - The invitation/event ID
+ * @param {string} message - The message to send
+ * @returns {Promise<{ok: boolean, result?: any}>}
+ */
+export function sendVenueMessage(inviteId: string | number, message: string): Promise<{
+    ok: boolean;
+    result?: any;
+}>;
+/**
+ * Get the ticketing event URL
+ * @param {string|number} venueId - The venue/event ID
+ * @returns {string}
+ */
+export function getEventUrl(venueId: string | number): string;
 //# sourceMappingURL=show.service.d.ts.map

package/dist/stores/auth.d.ts

@@ -1,9 +1,9 @@
-export const auth: import("svelte/store").Writable<{
-    isAuthenticated: boolean;
-    token: null;
-    userDetails: null;
-}>;
-export function setAuthState(state: any): void;
-export function clearAuthState(): void;
-export function initializeAuthState(): void;
+export const auth: import("svelte/store").Writable<{
+    isAuthenticated: boolean;
+    token: null;
+    userDetails: null;
+}>;
+export function setAuthState(state: any): void;
+export function clearAuthState(): void;
+export function initializeAuthState(): void;
 //# sourceMappingURL=auth.d.ts.map

package/dist/stores/auth.svelte.spec.js

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { describe, it, expect, beforeEach } from 'vitest';
 import { auth, setAuthState, clearAuthState, initializeAuthState } from './auth.svelte';
 describe('auth store', () => {
     beforeEach(() => {

package/dist/stores/index.js

@@ -1,9 +1,9 @@
-// Form utilities (Svelte 5 runes-based)
-export { createFormStore, createFieldTracker } from '../forms/index';
-
-// Store exports (Svelte 5 runes-based)
-export { createFormSave, createDirtyTracker } from './formSave.svelte';
-export { profileFormData, initialFormData, hasChanges } from './formDataStore.svelte';
-export { isSubPage, hideHeaderBackButton, selectedVenueData, isAnimatedNavigation } from './navigation.svelte';
-export { toast, showToast } from './toaster';
-export { auth, setAuthState, clearAuthState, initializeAuthState } from './auth.svelte';
+// Form utilities (Svelte 5 runes-based)
+export { createFormStore, createFieldTracker } from '../forms/index';
+
+// Store exports (Svelte 5 runes-based)
+export { createFormSave, createDirtyTracker } from './formSave.svelte';
+export { profileFormData, initialFormData, hasChanges } from './formDataStore.svelte';
+export { isSubPage, hideHeaderBackButton, selectedVenueData, isAnimatedNavigation } from './navigation.svelte';
+export { toast, showToast } from './toaster';
+export { auth, setAuthState, clearAuthState, initializeAuthState } from './auth.svelte';