@getmicdrop/svelte-components 5.17.4 → 5.18.1

package/dist/recipes/modals/InputModal.svelte

@@ -5,6 +5,13 @@
   import Modal from "../../primitives/Modal/Modal.svelte";
   import { typography } from '../../tokens/typography';
 
+  const defaultLabels = {
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    close: 'Close',
+    invalidEmail: 'Please enter a valid email address',
+  };
+
   let {
     open = $bindable(false),
     size = "md", // "sm" | "md" | "lg" | "xl"
@@ -29,8 +36,8 @@
     validateEmail = false, // Auto-validate email format
 
     // Buttons
-    primaryButtonText = "Confirm",
-    secondaryButtonText = "Cancel",
+    primaryButtonText = undefined,
+    secondaryButtonText = undefined,
     primaryButtonVariant = "blue-solid", // blue-solid | red-solid
 
     // State
@@ -41,8 +48,13 @@
     onconfirm,
     oncancel,
     onclose,
+    labels: userLabels = {},
   } = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+  let effectivePrimaryText = $derived(primaryButtonText ?? labels.confirm);
+  let effectiveSecondaryText = $derived(secondaryButtonText ?? labels.cancel);
+
   // Email validation
   const isValidEmail = (email) => {
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -84,7 +96,7 @@
       {#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="Close" class="w-5 h-5" />
+            <img src={Cancel} alt={labels.close} class="w-5 h-5" />
           </Button>
         </div>
       {/if}
@@ -144,7 +156,7 @@
         {#if hasError && (errorMessage || emailError)}
           <p class={`${typography.label} text-red-600 dark:text-red-400 mt-2 flex items-center gap-1`}>
             <ExclamationTriangleOutline class="w-4 h-4" />
-            {emailError ? "Please enter a valid email address" : errorMessage}
+            {emailError ? labels.invalidEmail : errorMessage}
           </p>
         {:else if helpText && !hasError}
           <p class={`${typography.xsMuted} pt-2`}>
@@ -157,14 +169,14 @@
 
   {#snippet footer()}
     <div class="flex gap-3">
-      {#if secondaryButtonText}
+      {#if effectiveSecondaryText}
         <Button
           size="full"
           variant="alternative"
           onclick={handleSecondaryAction}
           disabled={disabled || loading}
         >
-          {secondaryButtonText}
+          {effectiveSecondaryText}
         </Button>
       {/if}
 
@@ -175,7 +187,7 @@
         disabled={isDisabled}
         {loading}
       >
-        {primaryButtonText}
+        {effectivePrimaryText}
       </Button>
     </div>
   {/snippet}

package/dist/recipes/modals/InputModal.svelte.d.ts

@@ -21,14 +21,15 @@ declare const InputModal: import("svelte").Component<{
     errorMessage?: string;
     showError?: boolean;
     validateEmail?: boolean;
-    primaryButtonText?: string;
-    secondaryButtonText?: string;
+    primaryButtonText?: any;
+    secondaryButtonText?: any;
     primaryButtonVariant?: string;
     disabled?: boolean;
     loading?: boolean;
     onconfirm: any;
     oncancel: any;
     onclose: any;
+    labels?: Record<string, any>;
 }, {}, "open" | "inputValue">;
 type $$ComponentProps = {
     open?: boolean;
@@ -48,13 +49,14 @@ type $$ComponentProps = {
     errorMessage?: string;
     showError?: boolean;
     validateEmail?: boolean;
-    primaryButtonText?: string;
-    secondaryButtonText?: string;
+    primaryButtonText?: any;
+    secondaryButtonText?: any;
     primaryButtonVariant?: string;
     disabled?: boolean;
     loading?: boolean;
     onconfirm: any;
     oncancel: any;
     onclose: any;
+    labels?: Record<string, any>;
 };
 //# sourceMappingURL=InputModal.svelte.d.ts.map

package/dist/recipes/modals/InputModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/InputModal.svelte.js"],"names":[],"mappings":";;;;;AAqKA;WArJ4B,OAAO;WAAS,MAAM;YAAU,MAAM;kBAAgB,MAAM;eAAa,OAAO;iBAAe,OAAO;iBAAe,MAAM;uBAAqB,MAAM;gBAAc,MAAM;iBAAe,MAAM;oBAAkB,OAAO;gBAAc,MAAM;gBAAc,GAAG;eAAa,MAAM;mBAAiB,MAAM;gBAAc,OAAO;oBAAkB,OAAO;wBAAsB,MAAM;0BAAwB,MAAM;2BAAyB,MAAM;eAAa,OAAO;cAAY,OAAO;eAAa,GAAG;cAAY,GAAG;aAAW,GAAG;8BAqJre;wBArJtC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/InputModal.svelte.js"],"names":[],"mappings":";;;;;AAiLA;WA1J4B,OAAO;WAAS,MAAM;YAAU,MAAM;kBAAgB,MAAM;eAAa,OAAO;iBAAe,OAAO;iBAAe,MAAM;uBAAqB,MAAM;gBAAc,MAAM;iBAAe,MAAM;oBAAkB,OAAO;gBAAc,MAAM;gBAAc,GAAG;eAAa,MAAM;mBAAiB,MAAM;gBAAc,OAAO;oBAAkB,OAAO;wBAAsB,GAAG;0BAAwB,GAAG;2BAAyB,MAAM;eAAa,OAAO;cAAY,OAAO;eAAa,GAAG;cAAY,GAAG;aAAW,GAAG;aAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;8BA0J7f;wBA1JtC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IAAC,iBAAiB,CAAC,EAAE,GAAG,CAAC;IAAC,mBAAmB,CAAC,EAAE,GAAG,CAAC;IAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}

package/dist/recipes/modals/StatusModal.svelte

@@ -5,13 +5,19 @@
   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 = "Ok",
+    buttonText = undefined,
     iconType = "success",
     customIcon = null,
     image = null,
@@ -22,9 +28,13 @@
     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);
 
@@ -117,7 +127,7 @@
       {#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="Close" class="w-5 h-5" />
+            <img src={Cancel} alt={labels.close} class="w-5 h-5" />
           </Button>
         </div>
       {/if}
@@ -141,7 +151,7 @@
         <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="Status icon" class="w-8 h-8" />
+              <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">
@@ -198,7 +208,7 @@
           {loading}
           onclick={handleButtonClick}
         >
-          {buttonText}
+          {effectiveButtonText}
         </Button>
       {/if}
     </div>

package/dist/recipes/modals/StatusModal.svelte.d.ts

@@ -9,7 +9,7 @@ declare const StatusModal: import("svelte").Component<{
     title?: string;
     subtitle?: string;
     description?: string;
-    buttonText?: string;
+    buttonText?: any;
     iconType?: string;
     customIcon?: any;
     image?: any;
@@ -20,6 +20,7 @@ declare const StatusModal: import("svelte").Component<{
     closeBtn?: boolean;
     onconfirm: any;
     onclose: any;
+    labels?: Record<string, any>;
 } & Record<string, any>, {}, "open">;
 type $$ComponentProps = {
     open?: boolean;
@@ -27,7 +28,7 @@ type $$ComponentProps = {
     title?: string;
     subtitle?: string;
     description?: string;
-    buttonText?: string;
+    buttonText?: any;
     iconType?: string;
     customIcon?: any;
     image?: any;
@@ -38,5 +39,6 @@ type $$ComponentProps = {
     closeBtn?: boolean;
     onconfirm: any;
     onclose: any;
+    labels?: Record<string, any>;
 } & Record<string, any>;
 //# sourceMappingURL=StatusModal.svelte.d.ts.map

package/dist/recipes/modals/StatusModal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/StatusModal.svelte.js"],"names":[],"mappings":";;;;;AA0MA;WA1L4B,OAAO;WAAS,MAAM;YAAU,MAAM;eAAa,MAAM;kBAAgB,MAAM;iBAAe,MAAM;eAAa,MAAM;iBAAe,GAAG;YAAU,GAAG;eAAa,OAAO;cAAY,OAAO;cAAY,GAAG;cAAY,GAAG,EAAE;eAAa,OAAO;eAAa,GAAG;aAAW,GAAG;qCA0LjP;wBA1LvC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}
+{"version":3,"file":"StatusModal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/StatusModal.svelte.js"],"names":[],"mappings":";;;;;AAoNA;WA9L4B,OAAO;WAAS,MAAM;YAAU,MAAM;eAAa,MAAM;kBAAgB,MAAM;iBAAe,GAAG;eAAa,MAAM;iBAAe,GAAG;YAAU,GAAG;eAAa,OAAO;cAAY,OAAO;cAAY,GAAG;cAAY,GAAG,EAAE;eAAa,OAAO;eAAa,GAAG;aAAW,GAAG;aAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;qCA8L5Q;wBA9LvC;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,CAAC;IAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}

package/dist/tokens/__tests__/variants.test.js

@@ -82,25 +82,33 @@ describe('color variant tokens', () => {
         });
     });
     describe('alertColorVariants', () => {
-        it('has info variant with blue-50 background', () => {
+        it('has info variant with blue-50 background and border', () => {
             expect(alertColorVariants.info).toContain('text-blue-800');
             expect(alertColorVariants.info).toContain('bg-blue-50');
+            expect(alertColorVariants.info).toContain('border-blue-300');
             expect(alertColorVariants.info).toContain('dark:bg-gray-800');
             expect(alertColorVariants.info).toContain('dark:text-blue-400');
+            expect(alertColorVariants.info).toContain('dark:border-blue-800');
         });
-        it('has success variant with green-50 background', () => {
+        it('has success variant with green-50 background and border', () => {
             expect(alertColorVariants.success).toContain('text-green-800');
             expect(alertColorVariants.success).toContain('bg-green-50');
+            expect(alertColorVariants.success).toContain('border-green-300');
+            expect(alertColorVariants.success).toContain('dark:bg-gray-800');
             expect(alertColorVariants.success).toContain('dark:text-green-400');
         });
-        it('has warning variant with yellow-50 background', () => {
+        it('has warning variant with yellow-50 background and border', () => {
             expect(alertColorVariants.warning).toContain('text-yellow-800');
             expect(alertColorVariants.warning).toContain('bg-yellow-50');
+            expect(alertColorVariants.warning).toContain('border-yellow-300');
+            expect(alertColorVariants.warning).toContain('dark:bg-gray-800');
             expect(alertColorVariants.warning).toContain('dark:text-yellow-300');
         });
-        it('has danger variant with red-50 background', () => {
+        it('has danger variant with red-50 background and border', () => {
             expect(alertColorVariants.danger).toContain('text-red-800');
             expect(alertColorVariants.danger).toContain('bg-red-50');
+            expect(alertColorVariants.danger).toContain('border-red-300');
+            expect(alertColorVariants.danger).toContain('dark:bg-gray-800');
             expect(alertColorVariants.danger).toContain('dark:text-red-400');
         });
         it('has exactly 4 variants', () => {

package/dist/tokens/variants.d.ts

@@ -34,10 +34,10 @@ export type BadgeColorVariant = keyof typeof badgeColorVariants;
  * Alert color variants - slightly different pattern (uses bg-*-50).
  */
 export declare const alertColorVariants: {
-    readonly info: "text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-400";
-    readonly success: "text-green-800 bg-green-50 dark:bg-gray-800 dark:text-green-400";
-    readonly warning: "text-yellow-800 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300";
-    readonly danger: "text-red-800 bg-red-50 dark:bg-gray-800 dark:text-red-400";
+    readonly info: "text-blue-800 border border-blue-300 bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800";
+    readonly success: "text-green-800 border border-green-300 bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800";
+    readonly warning: "text-yellow-800 border border-yellow-300 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-700";
+    readonly danger: "text-red-800 border border-red-300 bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800";
 };
 export type AlertColorVariant = keyof typeof alertColorVariants;
 /**

package/dist/tokens/variants.js

@@ -36,10 +36,10 @@ export const badgeColorVariants = {
  * Alert color variants - slightly different pattern (uses bg-*-50).
  */
 export const alertColorVariants = {
-    info: 'text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-400',
-    success: 'text-green-800 bg-green-50 dark:bg-gray-800 dark:text-green-400',
-    warning: 'text-yellow-800 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300',
-    danger: 'text-red-800 bg-red-50 dark:bg-gray-800 dark:text-red-400',
+    info: 'text-blue-800 border border-blue-300 bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800',
+    success: 'text-green-800 border border-green-300 bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800',
+    warning: 'text-yellow-800 border border-yellow-300 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-700',
+    danger: 'text-red-800 border border-red-300 bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800',
 };
 /**
  * Alert close button color variants - specific hover states per type.

package/dist/utils/formatters.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Rounds a number to 2 decimal places (cents precision).
+ * Use after any arithmetic on currency values to avoid IEEE 754 drift.
+ * e.g. roundCurrency(167.79999999999) → 167.8
+ */
+export declare function roundCurrency(value: number): number;
 /**
  * Format a credit card number with spaces every 4 digits
  * @param value - Raw input (digits only)

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

@@ -1 +1 @@
-{"version":3,"file":"formatters.d.ts","sourceRoot":"","sources":["../../src/lib/utils/formatters.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE5D;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOvD"}
+{"version":3,"file":"formatters.d.ts","sourceRoot":"","sources":["../../src/lib/utils/formatters.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEnD;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE5D;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOvD"}

package/dist/utils/formatters.js

@@ -1,3 +1,11 @@
+/**
+ * Rounds a number to 2 decimal places (cents precision).
+ * Use after any arithmetic on currency values to avoid IEEE 754 drift.
+ * e.g. roundCurrency(167.79999999999) → 167.8
+ */
+export function roundCurrency(value) {
+    return Math.round(value * 100) / 100;
+}
 /**
  * Format a credit card number with spaces every 4 digits
  * @param value - Raw input (digits only)

package/dist/utils/phoneUtils.d.ts

@@ -0,0 +1,35 @@
+import type { CountryCode } from 'libphonenumber-js/min';
+export interface ParsedPhone {
+    countryCode: CountryCode;
+    nationalNumber: string;
+}
+/**
+ * Parse an E.164 string or bare 10-digit US number into country + national number.
+ * Returns null if unparseable.
+ */
+export declare function parseStoredPhone(value: string): ParsedPhone | null;
+/**
+ * Format digits for display using the country's national format.
+ * e.g. formatNational('US', '5551234567') → '(555) 123-4567'
+ */
+export declare function formatNational(isoCode: CountryCode, digits: string): string;
+/**
+ * Format digits as-you-type for live input formatting.
+ * e.g. formatAsYouType('US', '555123') → '(555) 123'
+ */
+export declare function formatAsYouType(isoCode: CountryCode, digits: string): string;
+/**
+ * Combine country code + national digits into E.164.
+ * e.g. toE164('US', '5551234567') → '+15551234567'
+ */
+export declare function toE164(isoCode: CountryCode, digits: string): string;
+/**
+ * Validate a complete E.164 number.
+ */
+export declare function isValidE164(value: string): boolean;
+/**
+ * Backward-compat: normalize bare 10-digit US numbers to E.164.
+ * Already-E.164 numbers pass through unchanged.
+ */
+export declare function normalizeIncoming(value: string): string;
+//# sourceMappingURL=phoneUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"phoneUtils.d.ts","sourceRoot":"","sources":["../../src/lib/utils/phoneUtils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CA4BlE;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAK3E;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAI5E;AAED;;;GAGG;AACH,wBAAgB,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAWnE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAQlD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOvD"}

package/dist/utils/phoneUtils.js

@@ -0,0 +1,104 @@
+import { AsYouType, parsePhoneNumber, isValidPhoneNumber } from 'libphonenumber-js/min';
+/**
+ * Parse an E.164 string or bare 10-digit US number into country + national number.
+ * Returns null if unparseable.
+ */
+export function parseStoredPhone(value) {
+    if (!value)
+        return null;
+    // Bare 10-digit US number (legacy format)
+    const digits = value.replace(/\D/g, '');
+    if (digits.length === 10 && !value.startsWith('+')) {
+        return { countryCode: 'US', nationalNumber: digits };
+    }
+    // E.164 or other formatted number
+    try {
+        const parsed = parsePhoneNumber(value);
+        if (parsed && parsed.country) {
+            return {
+                countryCode: parsed.country,
+                nationalNumber: parsed.nationalNumber
+            };
+        }
+    }
+    catch {
+        // Fall through
+    }
+    // +1 with 10 digits but parsePhoneNumber didn't resolve country (US/CA ambiguity)
+    if (value.startsWith('+1') && digits.length === 11) {
+        return { countryCode: 'US', nationalNumber: digits.slice(1) };
+    }
+    return null;
+}
+/**
+ * Format digits for display using the country's national format.
+ * e.g. formatNational('US', '5551234567') → '(555) 123-4567'
+ */
+export function formatNational(isoCode, digits) {
+    if (!digits)
+        return '';
+    const formatter = new AsYouType(isoCode);
+    formatter.input(digits);
+    return formatter.getNumber()?.formatNational() ?? formatter.getNumber()?.number ?? digits;
+}
+/**
+ * Format digits as-you-type for live input formatting.
+ * e.g. formatAsYouType('US', '555123') → '(555) 123'
+ */
+export function formatAsYouType(isoCode, digits) {
+    if (!digits)
+        return '';
+    const formatter = new AsYouType(isoCode);
+    return formatter.input(digits);
+}
+/**
+ * Combine country code + national digits into E.164.
+ * e.g. toE164('US', '5551234567') → '+15551234567'
+ */
+export function toE164(isoCode, digits) {
+    if (!digits)
+        return '';
+    const clean = digits.replace(/\D/g, '');
+    if (!clean)
+        return '';
+    try {
+        const parsed = parsePhoneNumber(clean, isoCode);
+        if (parsed)
+            return parsed.format('E.164');
+    }
+    catch {
+        // Fall through
+    }
+    return '';
+}
+/**
+ * Validate a complete E.164 number.
+ */
+export function isValidE164(value) {
+    if (!value)
+        return false;
+    if (!value.startsWith('+'))
+        return false;
+    try {
+        return isValidPhoneNumber(value);
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Backward-compat: normalize bare 10-digit US numbers to E.164.
+ * Already-E.164 numbers pass through unchanged.
+ */
+export function normalizeIncoming(value) {
+    if (!value)
+        return '';
+    if (value.startsWith('+'))
+        return value;
+    const digits = value.replace(/\D/g, '');
+    if (digits.length === 10)
+        return `+1${digits}`;
+    if (digits.length === 11 && digits.startsWith('1'))
+        return `+${digits}`;
+    return value;
+}

package/dist/utils/utils.js

@@ -585,41 +585,50 @@ export const getRoleFromRoleOnStage = (roleOnStage) => {
 };
 
 // Format Event as Show for Listing data
+// Handles both V1 (EventPerformer with event.Event) and V2 (PerformerInvite with event.event) shapes
 export const formatEvent = (event) => {
+  // V2 uses lowercase "event", V1 uses uppercase "Event"
+  const eventData = event.event || event.Event;
+
   // Get venue stage name (the physical stage at the venue, e.g., "Main Room", "Showroom")
   // Not to be confused with performer's stage name (their performance alias)
-  const venueStageName = event.Event.stage?.name || event.Event.stage?.googleName || event.Event.googleName || "";
+  const venueStageName = eventData?.stage?.name || eventData?.stage?.googleName || eventData?.googleName || "";
 
   // Handle potentially undefined venue address
-  const venueAddress = event.Event.venue.address || "";
+  const venueAddress = eventData?.venue?.address || "";
 
   // Map roleOnStage number to role name string
   const role = getRoleFromRoleOnStage(event.roleOnStage);
 
   // Get custom booking notification message from venue (set in venue edit page)
-  const bookingMessage = event.Event.venue.booking_notification || "No additional details available.";
+  const bookingMessage = eventData?.venue?.booking_notification || "No additional details available.";
+
+  // V2 returns "status" string, V1 returns numeric "acceptedState"
+  const status = event.status || (event.acceptedState !== undefined ? { 0: "invited", 2: "confirmed", 1: "declined", 3: "declined", 4: "cancelled" }[event.acceptedState] : "unknown");
+
+  const setLength = event.setLength ?? 0;
 
   return {
-    eventId: event.Event.ID,
-    venueId: event.Event.venue.ID,
-    title: event.Event.title,
+    eventId: eventData?.ID,
+    venueId: eventData?.venue?.ID,
+    title: eventData?.title,
     role: role,
-    startDateTime: event.Event.startDateTime,
-    acceptedState: event.acceptedState,
-    doorsOpenTime: event.Event.doorsOpenTime,
-    spotDuration: `${event.setLength} min spot`,
-    venueName: event.Event.venue.name,
+    startDateTime: eventData?.startDateTime,
+    status: status,
+    doorsOpenTime: eventData?.doorsOpenTime,
+    spotDuration: `${setLength} min spot`,
+    venueName: eventData?.venue?.name,
     location: venueAddress,
-    id: event.invitationId,
-    image: event.Event.image,
+    id: event.invitationId || String(event.id || event.ID),
+    image: eventData?.image,
     details: {
-      venue: event.Event.venue.name,
+      venue: eventData?.venue?.name,
       stageName: venueStageName,
       address: venueAddress,
-      setLength: `${event.setLength} min`,
+      setLength: `${setLength} min`,
       eventDetails: bookingMessage,
     },
-    lastUpdated: event.UpdatedAt,
+    lastUpdated: event.updatedAt || event.UpdatedAt,
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "5.17.4",
+  "version": "5.18.1",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -107,6 +107,10 @@
     "./utils/imageValidation": {
       "import": "./dist/utils/imageValidation.js"
     },
+    "./utils/phoneUtils": {
+      "types": "./dist/utils/phoneUtils.d.ts",
+      "import": "./dist/utils/phoneUtils.js"
+    },
     "./utils/portal": {
       "import": "./dist/utils/portal.js"
     },
@@ -227,6 +231,7 @@
     "filepond-plugin-image-exif-orientation": "^1.0.11",
     "filepond-plugin-image-preview": "^4.6.12",
     "jwt-decode": "^4.0.0",
+    "libphonenumber-js": "^1.12.38",
     "sortablejs": "^1.15.6",
     "svelte-easy-crop": "^5.0.0",
     "svelte-filepond": "^0.2.2",