@getmicdrop/svelte-components 5.17.3 → 5.17.4

package/dist/recipes/modals/StatusModal.svelte

@@ -1,206 +1,206 @@
-<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';
-
-  let {
-    open = $bindable(false),
-    size = "sm",
-    title = "",
-    subtitle = "",
-    description = "",
-    buttonText = "Ok",
-    iconType = "success",
-    customIcon = null,
-    image = null,
-    disabled = false,
-    loading = false,
-    variant = null,
-    actions = [],
-    closeBtn = false,
-    onconfirm,
-    onclose,
-    ...restProps
-  } = $props();
-
-  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="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="Status icon" 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}
-        >
-          {buttonText}
-        </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';
+
+  let {
+    open = $bindable(false),
+    size = "sm",
+    title = "",
+    subtitle = "",
+    description = "",
+    buttonText = "Ok",
+    iconType = "success",
+    customIcon = null,
+    image = null,
+    disabled = false,
+    loading = false,
+    variant = null,
+    actions = [],
+    closeBtn = false,
+    onconfirm,
+    onclose,
+    ...restProps
+  } = $props();
+
+  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="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="Status icon" 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}
+        >
+          {buttonText}
+        </Button>
+      {/if}
+    </div>
+  {/snippet}
+</Modal>

package/dist/schemas/__tests__/auth.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=auth.test.d.ts.map

package/dist/schemas/__tests__/auth.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth.test.d.ts","sourceRoot":"","sources":["../../../src/lib/schemas/__tests__/auth.test.ts"],"names":[],"mappings":""}

package/dist/schemas/__tests__/auth.test.js

@@ -0,0 +1,210 @@
+import { describe, expect, it } from 'vitest';
+import { forgotPasswordSchema, loginSchema, passwordChangeSchema, passwordSchema, profileUpdateSchema, registerSchema, resetPasswordSchema, } from '../auth';
+describe('passwordSchema', () => {
+    it('accepts valid password', () => {
+        const result = passwordSchema.safeParse('SecurePass123');
+        expect(result.success).toBe(true);
+    });
+    it('rejects password too short', () => {
+        const result = passwordSchema.safeParse('Short1');
+        expect(result.success).toBe(false);
+    });
+    it('rejects password without uppercase', () => {
+        const result = passwordSchema.safeParse('securepass123');
+        expect(result.success).toBe(false);
+    });
+    it('rejects password without lowercase', () => {
+        const result = passwordSchema.safeParse('SECUREPASS123');
+        expect(result.success).toBe(false);
+    });
+    it('rejects password without number', () => {
+        const result = passwordSchema.safeParse('SecurePassword');
+        expect(result.success).toBe(false);
+    });
+});
+describe('loginSchema', () => {
+    it('accepts valid login data', () => {
+        const result = loginSchema.safeParse({
+            email: 'test@example.com',
+            password: 'anypassword',
+        });
+        expect(result.success).toBe(true);
+    });
+    it('defaults rememberMe to false', () => {
+        const result = loginSchema.safeParse({
+            email: 'test@example.com',
+            password: 'anypassword',
+        });
+        expect(result.success).toBe(true);
+        if (result.success) {
+            expect(result.data.rememberMe).toBe(false);
+        }
+    });
+    it('rejects invalid email', () => {
+        const result = loginSchema.safeParse({
+            email: 'invalid',
+            password: 'anypassword',
+        });
+        expect(result.success).toBe(false);
+    });
+    it('rejects empty password', () => {
+        const result = loginSchema.safeParse({
+            email: 'test@example.com',
+            password: '',
+        });
+        expect(result.success).toBe(false);
+    });
+});
+describe('registerSchema', () => {
+    it('accepts valid registration data', () => {
+        const result = registerSchema.safeParse({
+            email: 'test@example.com',
+            password: 'SecurePass123',
+            confirmPassword: 'SecurePass123',
+            firstName: 'John',
+            lastName: 'Doe',
+            acceptTerms: true,
+        });
+        expect(result.success).toBe(true);
+    });
+    it('rejects mismatched passwords', () => {
+        const result = registerSchema.safeParse({
+            email: 'test@example.com',
+            password: 'SecurePass123',
+            confirmPassword: 'DifferentPass123',
+            firstName: 'John',
+            lastName: 'Doe',
+            acceptTerms: true,
+        });
+        expect(result.success).toBe(false);
+        if (!result.success) {
+            const error = result.error.issues.find(e => e.path.includes('confirmPassword'));
+            expect(error?.message).toBe('Passwords do not match');
+        }
+    });
+    it('rejects if terms not accepted', () => {
+        const result = registerSchema.safeParse({
+            email: 'test@example.com',
+            password: 'SecurePass123',
+            confirmPassword: 'SecurePass123',
+            firstName: 'John',
+            lastName: 'Doe',
+            acceptTerms: false,
+        });
+        expect(result.success).toBe(false);
+    });
+    it('rejects weak password', () => {
+        const result = registerSchema.safeParse({
+            email: 'test@example.com',
+            password: 'weak',
+            confirmPassword: 'weak',
+            firstName: 'John',
+            lastName: 'Doe',
+            acceptTerms: true,
+        });
+        expect(result.success).toBe(false);
+    });
+});
+describe('passwordChangeSchema', () => {
+    it('accepts valid password change data', () => {
+        const result = passwordChangeSchema.safeParse({
+            currentPassword: 'OldPassword123',
+            newPassword: 'NewSecurePass456',
+            confirmNewPassword: 'NewSecurePass456',
+        });
+        expect(result.success).toBe(true);
+    });
+    it('rejects if new password same as current', () => {
+        const result = passwordChangeSchema.safeParse({
+            currentPassword: 'SecurePass123',
+            newPassword: 'SecurePass123',
+            confirmNewPassword: 'SecurePass123',
+        });
+        expect(result.success).toBe(false);
+        if (!result.success) {
+            const error = result.error.issues.find(e => e.path.includes('newPassword'));
+            expect(error?.message).toBe('New password must be different from current password');
+        }
+    });
+    it('rejects mismatched confirm password', () => {
+        const result = passwordChangeSchema.safeParse({
+            currentPassword: 'OldPassword123',
+            newPassword: 'NewSecurePass456',
+            confirmNewPassword: 'DifferentPass789',
+        });
+        expect(result.success).toBe(false);
+    });
+});
+describe('forgotPasswordSchema', () => {
+    it('accepts valid email', () => {
+        const result = forgotPasswordSchema.safeParse({
+            email: 'test@example.com',
+        });
+        expect(result.success).toBe(true);
+    });
+    it('rejects invalid email', () => {
+        const result = forgotPasswordSchema.safeParse({
+            email: 'invalid',
+        });
+        expect(result.success).toBe(false);
+    });
+});
+describe('resetPasswordSchema', () => {
+    it('accepts valid reset data', () => {
+        const result = resetPasswordSchema.safeParse({
+            token: 'valid-token-123',
+            password: 'NewSecurePass123',
+            confirmPassword: 'NewSecurePass123',
+        });
+        expect(result.success).toBe(true);
+    });
+    it('rejects mismatched passwords', () => {
+        const result = resetPasswordSchema.safeParse({
+            token: 'valid-token-123',
+            password: 'NewSecurePass123',
+            confirmPassword: 'DifferentPass456',
+        });
+        expect(result.success).toBe(false);
+    });
+    it('rejects empty token', () => {
+        const result = resetPasswordSchema.safeParse({
+            token: '',
+            password: 'NewSecurePass123',
+            confirmPassword: 'NewSecurePass123',
+        });
+        expect(result.success).toBe(false);
+    });
+});
+describe('profileUpdateSchema', () => {
+    it('accepts valid profile data', () => {
+        const result = profileUpdateSchema.safeParse({
+            firstName: 'John',
+            lastName: 'Doe',
+        });
+        expect(result.success).toBe(true);
+    });
+    it('accepts profile with phone', () => {
+        const result = profileUpdateSchema.safeParse({
+            firstName: 'John',
+            lastName: 'Doe',
+            phone: '555-123-4567',
+        });
+        expect(result.success).toBe(true);
+    });
+    it('accepts profile with bio', () => {
+        const result = profileUpdateSchema.safeParse({
+            firstName: 'John',
+            lastName: 'Doe',
+            bio: 'A short bio about me.',
+        });
+        expect(result.success).toBe(true);
+    });
+    it('rejects bio over 500 characters', () => {
+        const result = profileUpdateSchema.safeParse({
+            firstName: 'John',
+            lastName: 'Doe',
+            bio: 'x'.repeat(501),
+        });
+        expect(result.success).toBe(false);
+    });
+});

package/dist/schemas/__tests__/common.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=common.test.d.ts.map

package/dist/schemas/__tests__/common.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.test.d.ts","sourceRoot":"","sources":["../../../src/lib/schemas/__tests__/common.test.ts"],"names":[],"mappings":""}