@getmicdrop/svelte-components 5.2.1 → 5.3.0

package/dist/recipes/CropImage/CropImage.stories.svelte.d.ts

@@ -1,28 +1,8 @@
 export default CropImage;
-type CropImage = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type CropImage = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
 };
-declare const CropImage: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+declare const CropImage: import("svelte").Component<Record<string, never>, {}, "">;
 import CropImage from "./CropImage.svelte";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
 //# sourceMappingURL=CropImage.stories.svelte.d.ts.map

package/dist/recipes/CropImage/CropImage.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CropImage.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/CropImage/CropImage.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA0GA;;;;mBAAqH;sBArG7F,oBAAoB;6CA4FC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CropImage.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/CropImage/CropImage.stories.svelte.js"],"names":[],"mappings":";;;;;AAuFA,mFAAwD;sBAlFhC,oBAAoB"}

package/dist/recipes/CropImage/CropImage.svelte

@@ -136,15 +136,14 @@
           <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
             Crop image
           </h3>
-          <button
-            type="button"
-            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+          <Button
+            variant="icon"
+            size="sm"
             onclick={closeModal}
             aria-label="Close modal"
           >
             <CloseOutline class="w-3 h-3" />
-            <span class="sr-only">Close modal</span>
-          </button>
+          </Button>
         </div>
 
         <div class="p-4 md:p-6 space-y-4">
@@ -171,14 +170,15 @@
           </p>
 
           <div class="flex items-center justify-center gap-3 max-w-xs mx-auto">
-            <button
-              type="button"
-              class="flex items-center justify-center w-9 h-9 text-gray-500 bg-white border border-gray-300 rounded-full hover:bg-gray-100 hover:text-gray-900 focus:ring-4 focus:ring-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700 shrink-0"
+            <Button
+              variant="outline"
+              size="sm"
+              class="!rounded-full !w-9 !h-9 !p-0 shrink-0"
               onclick={() => (zoom = Math.max(1, zoom - 0.2))}
               aria-label="Zoom out"
             >
               <MinusOutline class="w-4 h-4" />
-            </button>
+            </Button>
 
             <input
               type="range"
@@ -190,14 +190,15 @@
               aria-label="Zoom level"
             />
 
-            <button
-              type="button"
-              class="flex items-center justify-center w-9 h-9 text-gray-500 bg-white border border-gray-300 rounded-full hover:bg-gray-100 hover:text-gray-900 focus:ring-4 focus:ring-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700 shrink-0"
+            <Button
+              variant="outline"
+              size="sm"
+              class="!rounded-full !w-9 !h-9 !p-0 shrink-0"
               onclick={() => (zoom = Math.min(3, zoom + 0.2))}
               aria-label="Zoom in"
             >
               <PlusOutline class="w-4 h-4" />
-            </button>
+            </Button>
           </div>
         </div>
 

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

@@ -1 +1 @@
-{"version":3,"file":"CropImage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/CropImage/CropImage.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA4KH,QAAA,MAAM,SAAS,iEAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CropImage.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/CropImage/CropImage.svelte.ts"],"names":[],"mappings":"AAQE,UAAU,KAAK;IACb,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,MAAM,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA2KH,QAAA,MAAM,SAAS,iEAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/recipes/SuperLogin/SuperLogin.svelte

@@ -90,6 +90,8 @@
 
   // Remembered user state for "Welcome back" feature
   let rememberedUser = $state(null);
+  // Track if user clicked "Not me?" to show email input even when userEmail prop is set
+  let showEmailInput = $state(false);
 
   // First name from eligibility check (for setup welcome message)
   let setupFirstName = $state("");
@@ -295,13 +297,14 @@
 
       if (response.ok) {
         const data = await response.json();
-        isLoading = false;
+        // Keep loading state until navigation completes (don't set isLoading = false)
         // Clear errors on success
         errors = {};
         showErrors = false;
 
         if (data.accounts && data.accounts.length > 1) {
           accounts = data.accounts;
+          isLoading = false; // Clear loading for selection view
           view = "selection";
           return;
         }
@@ -373,6 +376,7 @@
 
       if (response.ok) {
         const data = await response.json();
+        // Keep loading state until navigation completes (don't set isLoading = false)
 
         // Call the success callback
         onLoginSuccess({
@@ -382,6 +386,7 @@
         }, rememberMe);
 
         onNavigate(setupRedirectPath);
+        return; // Exit early to skip finally block
       } else {
         const errorData = await response.json();
         errors = {
@@ -513,7 +518,8 @@
   }
 
   function handleReturnToSignIn() {
-    email = "";
+    // Restore email from remembered user if available, otherwise clear it
+    email = rememberedUser?.email || userEmail || "";
     password = "";
     errors = {};
     showErrors = false;
@@ -523,6 +529,7 @@
   function handleNotMe() {
     localStorage.removeItem('rememberedUser');
     rememberedUser = null;
+    showEmailInput = true; // Force showing email input even if userEmail prop is set
     email = "";
     password = "";
     errors = {};
@@ -629,17 +636,13 @@
                     Sign in to access your {portalType}.
                   </p>
                 </div>
-              {:else if rememberedUser?.firstName}
+              {:else if !showEmailInput && rememberedUser?.firstName}
                 <h2 class="text-3xl font-semibold text-gray-900 dark:text-white">
                   Welcome back, {rememberedUser.firstName}
                 </h2>
-                <button
-                  type="button"
-                  class="text-sm text-gray-500 hover:text-blue-600 transition-colors"
-                  onclick={handleNotMe}
-                >
+                <Button variant="link" class="text-gray-500 hover:text-blue-600" onclick={handleNotMe}>
                   Not {rememberedUser.firstName}?
-                </button>
+                </Button>
               {:else}
                 <h2 class="text-3xl font-semibold text-gray-900 dark:text-white">
                   Log in
@@ -651,19 +654,14 @@
               <div class="form-fields-container">
                 <div>
                   <div class="mb-2">
-                    <label
-                      for="email"
-                      class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-                    >Email</label>
-                    {#if userEmail || rememberedUser?.email}
-                      <div
-                        class="w-full h-10 flex items-center bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 px-3"
-                      >
-                        <span class="text-sm font-medium text-gray-900 dark:text-white"
-                          >{userEmail || rememberedUser?.email}</span
-                        >
-                      </div>
+                    {#if !showEmailInput && (userEmail || rememberedUser?.email)}
+                      <p class="text-sm text-gray-500 dark:text-gray-400"
+                        >{userEmail || rememberedUser?.email}</p>
                     {:else}
+                      <label
+                        for="email"
+                        class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                      >Email</label>
                       <Input
                         id="email"
                         placeholder=""
@@ -698,15 +696,9 @@
                         for="password"
                         class="block text-sm font-medium text-gray-900 dark:text-white"
                       >Password</label>
-                      <button
-                        type="button"
-                        onclick={() => {
-                          view = "reset";
-                        }}
-                        class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
-                      >
+                      <Button variant="link" onclick={() => { view = "reset"; }}>
                         Forgot your password?
-                      </button>
+                      </Button>
                     </div>
                     <Input
                       id="password"
@@ -850,13 +842,9 @@
             </div>
 
             <div class="pt-4 border-t border-gray-300 dark:border-gray-600">
-              <button
-                type="button"
-                class="w-full text-center text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
-                onclick={handleReturnToSignIn}
-              >
+              <Button variant="ghost" size="full" class="text-gray-500 dark:text-gray-400" onclick={handleReturnToSignIn}>
                 Log in with a different email
-              </button>
+              </Button>
             </div>
           </div>
         {:else if view === "setup"}
@@ -1000,13 +988,9 @@
                 </Button>
 
                 <div class="text-center">
-                  <button
-                    type="button"
-                    onclick={handleReturnToSignIn}
-                    class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
-                  >
+                  <Button variant="link" onclick={handleReturnToSignIn}>
                     Return to log in
-                  </button>
+                  </Button>
                 </div>
               </div>
             </form>
@@ -1081,13 +1065,9 @@
                 </Button>
 
                 <div class="text-center">
-                  <button
-                    type="button"
-                    onclick={handleReturnToSignIn}
-                    class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
-                  >
+                  <Button variant="link" onclick={handleReturnToSignIn}>
                     Return to log in
-                  </button>
+                  </Button>
                 </div>
               </div>
             </form>
@@ -1144,13 +1124,9 @@
             </div>
 
             <div class="pt-2">
-              <button
-                type="button"
-                onclick={handleReturnToSignIn}
-                class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
-              >
+              <Button variant="link" onclick={handleReturnToSignIn}>
                 Return to sign in
-              </button>
+              </Button>
             </div>
           </div>
         {/if}

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":";;;;;AAs9BA;iBA16BkC,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;WA06B1W;wBA16BtC;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":";;;;;AAy9BA;iBA76BkC,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;WA66B1W;wBA76BtC;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"}

package/dist/recipes/Toaster/Toaster.stories.svelte

@@ -1,7 +1,7 @@
 <script module>
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
-    import { Toaster } from "svelte-sonner";
+  import { Toaster } from "svelte-sonner";
   import { showToast } from "../../stores/toaster";
 
   const { Story } = defineMeta({
@@ -15,7 +15,6 @@
   function showErrorToast() {
     showToast("An error occurred. Please try again.", "error");
   }
-
 </script>
 
 <Story name="Trigger Success Toast">
@@ -31,7 +30,7 @@
       }}
     />
     <button
-      on:click={showSuccessToast}
+      onclick={showSuccessToast}
       class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
     >
       Show Success Toast
@@ -53,7 +52,7 @@
       }}
     />
     <button
-      on:click={showErrorToast}
+      onclick={showErrorToast}
       class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
     >
       Show Error Toast

package/dist/recipes/Toaster/Toaster.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/Toaster/Toaster.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAiEA;;;;mBAAmH;wBA5DvF,eAAe;6CAmDE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Toaster.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/Toaster/Toaster.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAgEA;;;;mBAAmH;wBA3DzF,eAAe;6CAkDI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/recipes/feedback/ErrorDisplay.stories.svelte

@@ -30,12 +30,10 @@
       },
     },
   });
-
 </script>
 
 <script>
-  
-  let showShakeDemo = false;
+  let showShakeDemo = $state(false);
   function triggerShake() {
     showShakeDemo = false;
     setTimeout(() => {
@@ -67,7 +65,7 @@
   <div class="space-y-4">
     <button
       class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-primary"
-      on:click={triggerShake}
+      onclick={triggerShake}
     >
       Trigger Error Shake
     </button>

package/dist/recipes/feedback/ErrorDisplay.stories.svelte.d.ts

@@ -1,28 +1,8 @@
 export default ErrorDisplay;
-type ErrorDisplay = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type ErrorDisplay = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
 };
-declare const ErrorDisplay: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+declare const ErrorDisplay: import("svelte").Component<Record<string, never>, {}, "">;
 import ErrorDisplay from './ErrorDisplay.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
 //# sourceMappingURL=ErrorDisplay.stories.svelte.d.ts.map

package/dist/recipes/feedback/ErrorDisplay.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorDisplay.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/feedback/ErrorDisplay.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAyGA;;;;mBAAwH;yBApG7F,uBAAuB;6CA2FL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ErrorDisplay.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/feedback/ErrorDisplay.stories.svelte.js"],"names":[],"mappings":";;;;;AA8FA,sFAA2D;yBAzFhC,uBAAuB"}

package/dist/recipes/inputs/MultiSelect.stories.svelte

@@ -8,11 +8,9 @@
     component: MultiSelect,
     tags: ['autodocs'],
   });
-
 </script>
 
 <script>
-  
   const fruits = [
     { name: 'Apple', value: 'apple' },
     { name: 'Banana', value: 'banana' },
@@ -32,8 +30,8 @@
     { name: 'Rust', value: 'rust' },
   ];
 
-  let selectedFruits = [];
-  let selectedSkills = ['js', 'ts'];
+  let selectedFruits = $state([]);
+  let selectedSkills = $state(['js', 'ts']);
 </script>
 
 
@@ -97,7 +95,7 @@
       bind:value={selectedFruits}
       placeholder="Select your favorite fruits"
       label="Favorite Fruits"
-      on:change={(e) => console.log('Selected:', e.detail.value)}
+      onchange={(e) => console.log('Selected:', e.value)}
     />
 
     <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded">

package/dist/recipes/inputs/MultiSelect.stories.svelte.d.ts

@@ -1,28 +1,8 @@
 export default MultiSelect;
-type MultiSelect = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type MultiSelect = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
 };
-declare const MultiSelect: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+declare const MultiSelect: import("svelte").Component<Record<string, never>, {}, "">;
 import MultiSelect from './MultiSelect.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
 //# sourceMappingURL=MultiSelect.stories.svelte.d.ts.map

package/dist/recipes/inputs/MultiSelect.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/MultiSelect.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAiHA;;;;mBAAuH;wBA5G7F,sBAAsB;6CAmGH,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"MultiSelect.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/MultiSelect.stories.svelte.js"],"names":[],"mappings":";;;;;AAsGA,qFAA0D;wBAjGhC,sBAAsB"}

package/dist/recipes/inputs/OTPInput.stories.svelte

@@ -18,20 +18,18 @@
       },
     },
   });
-
 </script>
 
 <script>
-  
-  let code = ['', '', '', '', '', ''];
-  let code4 = ['', '', '', ''];
-  let code8 = ['', '', '', '', '', '', '', ''];
-  let completedCode = '';
-  let otpRef;
+  let code = $state(['', '', '', '', '', '']);
+  let code4 = $state(['', '', '', '']);
+  let code8 = $state(['', '', '', '', '', '', '', '']);
+  let completedCode = $state('');
+  let otpRef = $state(null);
 
   function handleComplete(event) {
-    completedCode = event.detail.code;
-    console.log('OTP Complete:', event.detail.code);
+    completedCode = event.code;
+    console.log('OTP Complete:', event.code);
   }
 </script>
 
@@ -91,8 +89,8 @@
       <OTPInput
         bind:value={code}
         bind:this={otpRef}
-        on:complete={handleComplete}
-        on:change={(e) => console.log('Changed:', e.detail.code)}
+        oncomplete={handleComplete}
+        onchange={(e) => console.log('Changed:', e.code)}
       />
     </div>
 
@@ -107,13 +105,13 @@
     <div class="flex gap-2">
       <button
         class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-primary"
-        on:click={() => otpRef?.focus()}
+        onclick={() => otpRef?.focus()}
       >
         Focus First Input
       </button>
       <button
-        class="px-4 py-2 bg-gray-50 dark:bg-gray-8000 text-white rounded hover:bg-gray-600"
-        on:click={() => {
+        class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
+        onclick={() => {
           otpRef?.clear();
           completedCode = '';
         }}
@@ -138,7 +136,7 @@
       <OTPInput
         bind:value={code4}
         length={4}
-        on:complete={(e) => alert(`Verifying code: ${e.detail.code}`)}
+        oncomplete={(e) => alert(`Verifying code: ${e.code}`)}
       />
     </div>
 
@@ -156,8 +154,8 @@
     </p>
     <OTPInput
       value={['', '', '', '', '', '']}
-      on:complete={(e) => {
-        alert(`Auto-submitting code: ${e.detail.code}`);
+      oncomplete={(e) => {
+        alert(`Auto-submitting code: ${e.code}`);
       }}
     />
   </div>

package/dist/recipes/inputs/OTPInput.stories.svelte.d.ts

@@ -1,28 +1,8 @@
 export default OTPInput;
-type OTPInput = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type OTPInput = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
 };
-declare const OTPInput: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+declare const OTPInput: import("svelte").Component<Record<string, never>, {}, "">;
 import OTPInput from './OTPInput.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
 //# sourceMappingURL=OTPInput.stories.svelte.d.ts.map

package/dist/recipes/inputs/OTPInput.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OTPInput.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/OTPInput.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAkJA;;;;mBAAoH;qBA7I7F,mBAAmB;6CAoIG,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"OTPInput.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/OTPInput.stories.svelte.js"],"names":[],"mappings":";;;;;AAuIA,kFAAuD;qBAlIhC,mBAAmB"}

package/dist/recipes/modals/ConfirmationModal.svelte

@@ -100,13 +100,9 @@
     <div class="text-center">
       {#if closeBtn}
         <div class="flex justify-end -mt-2 -mr-2 mb-2">
-          <button
-            class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none transition-colors"
-            onclick={handleClose}
-            {disabled}
-          >
+          <Button variant="icon" size="xs" onclick={handleClose} {disabled}>
             <img src={Cancel} alt="Close" class="w-5 h-5" />
-          </button>
+          </Button>
         </div>
       {/if}
       {#if resolvedIcon}

package/dist/recipes/modals/InputModal.svelte

@@ -82,13 +82,9 @@
     <div class="text-left">
       {#if closeBtn}
         <div class="flex justify-end -mt-2 -mr-2 mb-2">
-          <button
-            class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none transition-colors"
-            onclick={handleClose}
-            {disabled}
-          >
+          <Button variant="icon" size="xs" onclick={handleClose} {disabled}>
             <img src={Cancel} alt="Close" class="w-5 h-5" />
-          </button>
+          </Button>
         </div>
       {/if}
       {#if title}

package/dist/recipes/modals/ModalTestWrapper.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import Modal from "../../primitives/Modal/Modal.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
 
   interface Props {
     /** Whether the modal is visible */
@@ -57,8 +58,8 @@
     {#if footer}
       {@render footer()}
     {:else}
-      <button>Cancel</button>
-      <button>Confirm</button>
+      <Button variant="alternative">Cancel</Button>
+      <Button variant="default">Confirm</Button>
     {/if}
   {/snippet}
 </Modal>

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

@@ -1 +1 @@
-{"version":3,"file":"ModalTestWrapper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/ModalTestWrapper.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mBAAmB;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAkDH,QAAA,MAAM,gBAAgB,+CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ModalTestWrapper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/ModalTestWrapper.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mBAAmB;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qBAAqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmDH,QAAA,MAAM,gBAAgB,+CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}