@getmicdrop/svelte-components 5.16.2 → 5.17.0

package/dist/recipes/SuperLogin/SuperLogin.svelte

@@ -12,6 +12,75 @@
   import Checkbox from "../../primitives/Checkbox/Checkbox.svelte";
   import { typography } from '../../tokens/typography';
 
+  /**
+   * Default labels for all user-visible strings in SuperLogin.
+   * Consumers can override any string via the `labels` prop.
+   */
+  const defaultLabels = {
+    // Login view
+    welcomeTitle: (name) => name ? `Welcome, ${name}!` : 'Welcome!',
+    signInDescription: (portal) => `Sign in to access your ${portal}.`,
+    welcomeBackTitle: (name) => `Welcome back, ${name}`,
+    notYouButton: (name) => `Not ${name}?`,
+    logInTitle: 'Log in',
+    emailLabel: 'Email',
+    passwordLabel: 'Password',
+    forgotPassword: 'Forgot your password?',
+    rememberMe: 'Remember me on this device',
+    logInButton: 'Log in',
+    or: 'OR',
+    sendMeLoginLink: 'Send me a login link',
+
+    // Account selection view
+    selectAccountTitle: 'Select account',
+    multipleAccountsDescription: (email) => `You have multiple accounts associated with ${email}. Select one to continue.`,
+    loginDifferentEmail: 'Log in with a different email',
+    performerFallback: 'Performer',
+
+    // Setup view
+    setupTitle: (name) => name ? `Welcome, ${name}` : 'Set up your account',
+    setupDescription: 'Create a password to finish setting up your account.',
+    createPasswordLabel: 'Create password',
+    completeSetupButton: 'Complete setup',
+    tosAgreement: 'By setting up your account, you agree to Micdrop\'s',
+    termsOfService: 'terms of service',
+
+    // Reset password view
+    resetTitle: 'Reset your password',
+    resetDescription: 'Enter the email address associated with your account and we\'ll send you a link to reset your password.',
+    sendResetLink: 'Send reset link',
+    returnToLogIn: 'Return to log in',
+
+    // Login link view
+    loginLinkTitle: 'Send a login link',
+    loginLinkDescription: 'Enter the email address associated with your account and we\'ll send you a link to sign in.',
+    sendLoginLink: 'Send login link',
+
+    // Success view
+    checkEmailTitle: 'Check your email',
+    resentMessage: (type, email) => `We've resent ${type === 'reset' ? 'password reset instructions' : 'a login link'} to ${email} if it is an email on file.`,
+    resentFollowUp: 'Please check again. If you still haven\'t received an email,',
+    tryDifferentEmail: 'try a different email',
+    successMessage: (type, email) => `Thanks! If ${email} matches an email we have on file, then we've sent you an email containing further instructions for ${type === 'reset' ? 'resetting your password' : 'signing in'}.`,
+    noEmailReceived: 'If you haven\'t received an email in 5 minutes, check your spam,',
+    resend: 'resend',
+    returnToSignIn: 'Return to sign in',
+
+    // Error messages
+    linkNoLongerValid: 'This link is no longer valid or has already been used.',
+    invalidExpiredLink: 'Invalid or expired link.',
+    unableToValidateLink: 'Unable to validate link. Please try again later.',
+    invalidEmailAddress: (email) => `Invalid email address: ${email}`,
+    incorrectCredentials: 'Incorrect email or password',
+    loginFailed: 'Login failed. Please try again.',
+    networkError: 'Unable to connect. Please check your internet connection.',
+    passwordRequirements: 'Password must be at least 8 characters and include at least 2 of: uppercase, lowercase, numbers, or symbols.',
+    setupNetworkError: 'Network error. Please try again.',
+
+    // TOS checkout (OrderSummary reuse)
+    placeOrderTos: 'By selecting Place order, I agree to the',
+  };
+
   /**
    * @typedef {Object} Account
    * @property {string} type - Account type (e.g., 'owner', 'performer')
@@ -67,8 +136,12 @@
     showDarkModeToggle = true,
     /** @type {string} URL search params for setup detection */
     searchParams = "",
+    /** @type {Partial<typeof defaultLabels>} Override any user-visible string */
+    labels: userLabels = {},
   } = $props();
 
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
   // Parse search params
   let parsedParams = $derived.by(() => {
     if (typeof window === 'undefined') return { setup: null, email: null };
@@ -156,8 +229,7 @@
     } else if (currentScore !== -1 && currentScore < 2) {
       errors = {
         ...errors,
-        password:
-          "Password must be at least 8 characters and include at least 2 of: uppercase, lowercase, numbers, or symbols.",
+        password: labels.passwordRequirements,
       };
       showErrors = true;
     } else if (currentScore >= 2) {
@@ -252,19 +324,19 @@
           view = "setup";
         } else {
           errors = {
-            email: "This link is no longer valid or has already been used.",
+            email: labels.linkNoLongerValid,
           };
           showErrors = true;
           triggerShake();
         }
       } else {
-        errors = { email: "Invalid or expired link." };
+        errors = { email: labels.invalidExpiredLink };
         showErrors = true;
         triggerShake();
       }
     } catch (e) {
       console.error(e);
-      errors = { email: "Unable to validate link. Please try again later." };
+      errors = { email: labels.unableToValidateLink };
       showErrors = true;
       triggerShake();
     } finally {
@@ -285,7 +357,7 @@
     // Validate email format
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     if (!emailRegex.test(emailValue)) {
-      errors = { email: `Invalid email address: ${emailValue}` };
+      errors = { email: typeof labels.invalidEmailAddress === 'function' ? labels.invalidEmailAddress(emailValue) : labels.invalidEmailAddress };
       triggerShake();
       isLoading = false;
       return;
@@ -341,10 +413,10 @@
         }
 
         if (response.status === 401) {
-          errors = { password: "Incorrect email or password" };
+          errors = { password: labels.incorrectCredentials };
         } else {
           errors = {
-            password: errorData.message || "Login failed. Please try again.",
+            password: errorData.message || labels.loginFailed,
           };
         }
         triggerShake();
@@ -353,10 +425,10 @@
       console.error("Login Error:", error);
       if (error.message === "Network Error" || error.name === "TypeError") {
         errors = {
-          password: "Unable to connect. Please check your internet connection.",
+          password: labels.networkError,
         };
       } else {
-        errors = { password: "Incorrect email or password" };
+        errors = { password: labels.incorrectCredentials };
       }
       triggerShake();
       isLoading = false;
@@ -399,14 +471,14 @@
         errors = {
           password:
             errorData.error ||
-            "Password must be at least 8 characters and include at least 2 of: uppercase, lowercase, numbers, or symbols.",
+            labels.passwordRequirements,
         };
         showErrors = true;
         triggerShake();
       }
     } catch (error) {
       console.error("Error setting up account:", error);
-      errors = { password: "Network error. Please try again." };
+      errors = { password: labels.setupNetworkError };
       showErrors = true;
       triggerShake();
     } finally {
@@ -423,7 +495,7 @@
     // Validate email format
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     if (!emailRegex.test(emailValue)) {
-      errors = { email: `Invalid email address: ${emailValue}` };
+      errors = { email: typeof labels.invalidEmailAddress === 'function' ? labels.invalidEmailAddress(emailValue) : labels.invalidEmailAddress };
       triggerShake();
       isLoading = false;
       return false;
@@ -467,7 +539,7 @@
     // Validate email format
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     if (!emailRegex.test(emailValue)) {
-      errors = { email: `Invalid email address: ${emailValue}` };
+      errors = { email: typeof labels.invalidEmailAddress === 'function' ? labels.invalidEmailAddress(emailValue) : labels.invalidEmailAddress };
       triggerShake();
       isLoading = false;
       return false;
@@ -585,7 +657,7 @@
 
     const first = profile.firstName || account.firstName || account.name || "";
     const lastName = profile.lastName || account.lastName || "";
-    return `${first} ${lastName}`.trim() || "Performer";
+    return `${first} ${lastName}`.trim() || labels.performerFallback;
   }
 
   function triggerShake() {
@@ -635,22 +707,22 @@
               {#if isFirstTime}
                 <div>
                   <h2 class={typography.h1}>
-                    Welcome{firstName ? `, ${firstName}` : ""}!
+                    {typeof labels.welcomeTitle === 'function' ? labels.welcomeTitle(firstName) : labels.welcomeTitle}
                   </h2>
                   <p class={`${typography.smMuted} mt-2`}>
-                    Sign in to access your {portalType}.
+                    {typeof labels.signInDescription === 'function' ? labels.signInDescription(portalType) : labels.signInDescription}
                   </p>
                 </div>
               {:else if !showEmailInput && rememberedUser?.firstName}
                 <h2 class={typography.h1}>
-                  Welcome back, {rememberedUser.firstName}
+                  {typeof labels.welcomeBackTitle === 'function' ? labels.welcomeBackTitle(rememberedUser.firstName) : labels.welcomeBackTitle}
                 </h2>
                 <Button variant="link" class="text-gray-500 hover:text-blue-600" onclick={handleNotMe}>
-                  Not {rememberedUser.firstName}?
+                  {typeof labels.notYouButton === 'function' ? labels.notYouButton(rememberedUser.firstName) : labels.notYouButton}
                 </Button>
               {:else}
                 <h2 class={typography.h1}>
-                  Log in
+                  {labels.logInTitle}
                 </h2>
               {/if}
             </div>
@@ -666,7 +738,7 @@
                       <label
                         for="email"
                         class={`${typography.label} block mb-2`}
-                      >Email</label>
+                      >{labels.emailLabel}</label>
                       <Input
                         id="email"
                         placeholder=""
@@ -700,7 +772,7 @@
                       <label
                         for="password"
                         class={`${typography.label} block`}
-                      >Password</label>
+                      >{labels.passwordLabel}</label>
                       <!-- Placeholder to maintain layout - actual button is after input for tab order -->
                       <span class="forgot-password-placeholder"></span>
                     </div>
@@ -713,7 +785,7 @@
                     />
                     <!-- Forgot password button: after input in DOM for correct tab order, positioned visually in label row -->
                     <Button variant="link" type="button" class="forgot-password-btn" onclick={() => { view = "reset"; }}>
-                      Forgot your password?
+                      {labels.forgotPassword}
                     </Button>
                   </div>
                 </div>
@@ -740,7 +812,7 @@
                   <Checkbox
                     bind:checked={rememberMe}
                     id="remember-me"
-                  >Remember me on this device</Checkbox>
+                  >{labels.rememberMe}</Checkbox>
                 </div>
               </div>
 
@@ -751,7 +823,7 @@
                   loading={isLoading}
                   disabled={!isFormValid}
                 >
-                  Log in
+                  {labels.logInButton}
                 </Button>
 
                 <div class="relative">
@@ -762,7 +834,7 @@
                   </div>
                   <div class="relative flex justify-center text-sm">
                     <span class={`px-2 bg-white dark:bg-gray-800 ${typography.textMuted}`}
-                      >OR</span
+                      >{labels.or}</span
                     >
                   </div>
                 </div>
@@ -775,7 +847,7 @@
                     view = "login-link";
                   }}
                 >
-                  Send me a login link
+                  {labels.sendMeLoginLink}
                 </Button>
               </div>
             </form>
@@ -784,13 +856,14 @@
           <div in:fade={{ duration: 200 }} class="space-y-6">
             <div class="space-y-2">
               <h2 class={typography.h1}>
-                Select account
+                {labels.selectAccountTitle}
               </h2>
               <p class={typography.smMuted}>
-                You have multiple accounts associated with <span
-                  class={typography.sm}
-                  >{email}</span
-                >. Select one to continue.
+                {#if true}
+                  {@const message = typeof labels.multipleAccountsDescription === 'function' ? labels.multipleAccountsDescription(email) : labels.multipleAccountsDescription}
+                  {@const parts = message.split(email)}
+                  {parts[0]}<span class={typography.sm}>{email}</span>{parts[1] || ''}
+                {/if}
               </p>
             </div>
 
@@ -850,7 +923,7 @@
 
             <div class="pt-4 border-t border-gray-300 dark:border-gray-600">
               <Button variant="ghost" size="full" class="text-gray-500 dark:text-gray-400" onclick={handleReturnToSignIn}>
-                Log in with a different email
+                {labels.loginDifferentEmail}
               </Button>
             </div>
           </div>
@@ -858,10 +931,10 @@
           <div in:fade={{ duration: 200 }} class="space-y-6">
             <div class="space-y-2">
               <h2 class={typography.h1}>
-                {setupFirstName ? `Welcome, ${setupFirstName}` : "Set up your account"}
+                {typeof labels.setupTitle === 'function' ? labels.setupTitle(setupFirstName) : labels.setupTitle}
               </h2>
               <p class={typography.smMuted}>
-                Create a password to finish setting up your account.
+                {labels.setupDescription}
               </p>
             </div>
 
@@ -876,7 +949,7 @@
                       <label
                         for="setup-password"
                         class={`${typography.label} block`}
-                      >Create password</label>
+                      >{labels.createPasswordLabel}</label>
                       {#if strengthText}
                         <span
                           class="text-xs font-medium {strengthTextColor} transition-opacity duration-300"
@@ -921,16 +994,16 @@
                   loading={isLoading}
                   disabled={!isSetupValid}
                 >
-                  Complete setup
+                  {labels.completeSetupButton}
                 </Button>
 
                 <div class="text-center">
                   <p class={typography.xsMuted}>
-                    By setting up your account, you agree to Micdrop's <a
+                    {labels.tosAgreement} <a
                       href={tosUrl}
                       target="_blank"
                       rel="noopener noreferrer"
-                      class="text-blue-600 hover:underline dark:text-blue-400">terms of service</a
+                      class="text-blue-600 hover:underline dark:text-blue-400">{labels.termsOfService}</a
                     >.
                   </p>
                 </div>
@@ -941,11 +1014,10 @@
           <div in:fade={{ duration: 200 }} class="space-y-6">
             <div class="space-y-2">
               <h2 class={typography.h1}>
-                Reset your password
+                {labels.resetTitle}
               </h2>
               <p class={typography.smMuted}>
-                Enter the email address associated with your account and we'll
-                send you a link to reset your password.
+                {labels.resetDescription}
               </p>
             </div>
 
@@ -959,7 +1031,7 @@
                     <label
                       for="reset-email"
                       class={`${typography.label} block mb-2`}
-                    >Email</label>
+                    >{labels.emailLabel}</label>
                     <Input
                       id="reset-email"
                       placeholder=""
@@ -991,12 +1063,12 @@
                   loading={isLoading}
                   disabled={!email}
                 >
-                  Send reset link
+                  {labels.sendResetLink}
                 </Button>
 
                 <div class="text-center">
                   <Button variant="link" onclick={handleReturnToSignIn}>
-                    Return to log in
+                    {labels.returnToLogIn}
                   </Button>
                 </div>
               </div>
@@ -1006,11 +1078,10 @@
           <div in:fade={{ duration: 200 }} class="space-y-6">
             <div class="space-y-2">
               <h2 class={typography.h1}>
-                Send a login link
+                {labels.loginLinkTitle}
               </h2>
               <p class={typography.smMuted}>
-                Enter the email address associated with your account and we'll
-                send you a link to sign in.
+                {labels.loginLinkDescription}
               </p>
             </div>
 
@@ -1024,7 +1095,7 @@
                     <label
                       for="login-link-email"
                       class={`${typography.label} block mb-2`}
-                    >Email</label>
+                    >{labels.emailLabel}</label>
                     <Input
                       id="login-link-email"
                       placeholder=""
@@ -1068,12 +1139,12 @@
                   loading={isLoading}
                   disabled={!email}
                 >
-                  Send login link
+                  {labels.sendLoginLink}
                 </Button>
 
                 <div class="text-center">
                   <Button variant="link" onclick={handleReturnToSignIn}>
-                    Return to log in
+                    {labels.returnToLogIn}
                   </Button>
                 </div>
               </div>
@@ -1083,45 +1154,40 @@
           <div in:fade={{ duration: 200 }} class="space-y-6 text-center">
             <div class="space-y-4">
               <h2 class={typography.h1}>
-                Check your email
+                {labels.checkEmailTitle}
               </h2>
               {#if isResendSuccess}
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
-                  We've resent {successType === "reset"
-                    ? "password reset instructions"
-                    : "a login link"} to
-                  <span class={typography.sm}
-                    >{successEmail}</span
-                  > if it is an email on file.
+                  {#if true}
+                    {@const message = typeof labels.resentMessage === 'function' ? labels.resentMessage(successType, successEmail) : labels.resentMessage}
+                    {@const parts = message.split(successEmail)}
+                    {parts[0]}<span class={typography.sm}>{successEmail}</span>{parts[1] || ''}
+                  {/if}
                 </p>
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
-                  Please check again. If you still haven't received an email, <Button
+                  {labels.resentFollowUp} <Button
                     variant="link"
                     onclick={handleTryDifferentEmail}
-                  >try a different email</Button>.
+                  >{labels.tryDifferentEmail}</Button>.
                 </p>
               {:else}
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
-                  Thanks! If <span
-                    class={typography.sm}
-                    >{successEmail}</span
-                  >
-                  matches an email we have on file, then we've sent you an email
-                  containing further instructions for {successType === "reset"
-                    ? "resetting your password"
-                    : "signing in"}.
+                  {#if true}
+                    {@const message = typeof labels.successMessage === 'function' ? labels.successMessage(successType, successEmail) : labels.successMessage}
+                    {@const parts = message.split(successEmail)}
+                    {parts[0]}<span class={typography.sm}>{successEmail}</span>{parts[1] || ''}
+                  {/if}
                 </p>
                 <p class={`${typography.smMuted} leading-relaxed text-left`}>
-                  If you haven't received an email in 5 minutes, check your
-                  spam, <Button variant="link" onclick={handleResend}>resend</Button>, or
-                  <Button variant="link" onclick={handleTryDifferentEmail}>try a different email</Button>.
+                  {labels.noEmailReceived} <Button variant="link" onclick={handleResend}>{labels.resend}</Button>, or
+                  <Button variant="link" onclick={handleTryDifferentEmail}>{labels.tryDifferentEmail}</Button>.
                 </p>
               {/if}
             </div>
 
             <div class="pt-2">
               <Button variant="link" onclick={handleReturnToSignIn}>
-                Return to sign in
+                {labels.returnToSignIn}
               </Button>
             </div>
           </div>

package/dist/recipes/SuperLogin/SuperLogin.svelte.d.ts

@@ -21,6 +21,7 @@ declare const SuperLogin: import("svelte").Component<{
     onExternalNavigate?: Function;
     showDarkModeToggle?: boolean;
     searchParams?: string;
+    labels?: Record<string, any>;
 }, {}, "">;
 type $$ComponentProps = {
     apiBaseUrl?: string;
@@ -40,5 +41,6 @@ type $$ComponentProps = {
     onExternalNavigate?: Function;
     showDarkModeToggle?: boolean;
     searchParams?: string;
+    labels?: Record<string, any>;
 };
 //# sourceMappingURL=SuperLogin.svelte.d.ts.map

package/dist/recipes/SuperLogin/SuperLogin.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SuperLogin.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/SuperLogin/SuperLogin.svelte.js"],"names":[],"mappings":";;;;;AAs+BA;iBAp7BkC,MAAM;cAAY,MAAM;cAAY,MAAM;kBAAgB,MAAM;kBAAgB,OAAO;gBAAc,MAAM;gBAAc,MAAM;iBAAe,MAAM;0BAAwB,MAAM;wBAAsB,MAAM;aAAW,MAAM;;;;;yBAAoI,OAAO;mBAAiB,MAAM;WAo7B1W;wBAp7BtC;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,eAAe,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,kBAAkB,CAAC,WAAW;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE"}
+{"version":3,"file":"SuperLogin.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/SuperLogin/SuperLogin.svelte.js"],"names":[],"mappings":";;;;;AAgjCA;iBAz7BkC,MAAM;cAAY,MAAM;cAAY,MAAM;kBAAgB,MAAM;kBAAgB,OAAO;gBAAc,MAAM;gBAAc,MAAM;iBAAe,MAAM;0BAAwB,MAAM;wBAAsB,MAAM;aAAW,MAAM;;;;;yBAAoI,OAAO;mBAAiB,MAAM;aAAW,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAy7BxY;wBAz7BtC;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,eAAe,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,kBAAkB,CAAC,WAAW;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "5.16.2",
+  "version": "5.17.0",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -197,9 +197,6 @@
     "svelte": "^5.0.0"
   },
   "dependencies": {
-    "@fullcalendar/core": "^6.1.19",
-    "@fullcalendar/daygrid": "^6.1.19",
-    "@fullcalendar/interaction": "^6.1.19",
     "@googlemaps/js-api-loader": "^1.16.10",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/auto-instrumentations-node": "^0.65.0",