@getmicdrop/svelte-components 5.2.1 → 5.3.0

package/dist/index.d.ts

@@ -108,8 +108,6 @@ export { default as ShowCard } from "./calendar/ShowCard/ShowCard.svelte";
 export { default as AboutShow } from "./calendar/AboutShow/AboutShow.svelte";
 export { default as FAQs } from "./calendar/FAQs/FAQs.svelte";
 export { default as ShowTimeCard } from "./calendar/ShowTimeCard/ShowTimeCard.svelte";
-export * from "./config.js";
-export * from "./telemetry.js";
 export * from "./constants/formOptions.js";
 export * from "./constants/validation.js";
 export * from "./presets/index.js";

package/dist/index.js

@@ -203,9 +203,8 @@ export { default as ShowTimeCard } from './calendar/ShowTimeCard/ShowTimeCard.sv
 // NON-COMPONENT EXPORTS
 // =============================================================================
 
-// Config & Telemetry
-export * from './config.js';
-export * from './telemetry.js';
+// Note: config.js and telemetry.js removed - they use import.meta.env which
+// is Vite-specific. Apps should define their own config/telemetry locally.
 
 // Constants
 export * from './constants/formOptions.js';

package/dist/patterns/forms/FormValidationSummary.svelte

@@ -2,6 +2,7 @@
   import { slide } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import WarningIcon from "../../primitives/Icons/WarningIcon.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
 
   let {
     errors = {},
@@ -49,13 +50,14 @@
         <ul class="mt-2 space-y-1">
           {#each errorFields as field}
             <li>
-              <button
-                type="button"
-                class="text-sm text-red-600 dark:text-red-500 hover:text-red-900 dark:hover:text-red-400 hover:underline cursor-pointer focus:outline-none focus:underline"
+              <Button
+                variant="link"
+                size="sm"
+                class="!text-red-600 dark:!text-red-500 hover:!text-red-900 dark:hover:!text-red-400"
                 onclick={() => scrollToField(field.elementId)}
               >
                 {field.label}
-              </button>
+              </Button>
             </li>
           {/each}
         </ul>

package/dist/patterns/forms/FormValidationSummary.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormValidationSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormValidationSummary.svelte.js"],"names":[],"mappings":";;;;;AAkEA;aAtD8B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAAS,OAAO;kBAAgB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;eAAa,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAsDhE;wBAtDjD;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}
+{"version":3,"file":"FormValidationSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/forms/FormValidationSummary.svelte.js"],"names":[],"mappings":";;;;;AAoEA;aAtD8B,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAAS,OAAO;kBAAgB,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;eAAa,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WAsDhE;wBAtDjD;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE"}

package/dist/patterns/navigation/Header.svelte

@@ -7,6 +7,7 @@
   import DarkModeToggle from "../../primitives/DarkModeToggle.svelte";
   import Icon from "../../primitives/Icons/Icon.svelte";
   import ChevronLeft from "../../primitives/Icons/ChevronLeft.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
   import { fade, fly } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import { portal } from "../../utils/portal.js";
@@ -46,13 +47,10 @@
 
 {#if showBackButton}
   <div class="block flex-1 md:hidden">
-    <button
-      class="flex items-center gap-1 px-2 py-1.5 text-sm font-medium text-gray-600 dark:text-gray-300 rounded-lg transition-colors hover:bg-gray-100 dark:hover:bg-gray-700"
-      onclick={() => history.back()}
-    >
+    <Button variant="ghost" size="sm" onclick={() => history.back()}>
       <ChevronLeft class="w-5 h-5" />
-      <span>Back</span>
-    </button>
+      Back
+    </Button>
   </div>
   <div class="hidden md:flex w-full items-center">
     <div class="flex items-center">
@@ -221,12 +219,9 @@
       </div>
 
       <div class="border-t-8 border-gray-100 dark:border-gray-700">
-        <button
-          onclick={() => showMobileSheet = false}
-          class="w-full px-6 py-4 text-base font-semibold text-gray-900 dark:text-white bg-transparent border-none cursor-pointer active:bg-gray-100 dark:active:bg-gray-700"
-        >
+        <Button variant="ghost" size="full" class="py-4 text-base font-semibold" onclick={() => showMobileSheet = false}>
           Cancel
-        </button>
+        </Button>
       </div>
     </div>
   </div>

package/dist/patterns/navigation/Header.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.svelte.js"],"names":[],"mappings":";;;;;AA2MA;;WA/KuD,MAAM;aAAW,MAAM;YAAU,MAAM;eAAa,GAAG,EAAE;oBAAkB,GAAG,EAAE;qBAAmB,OAAO;WA+K5G;wBA/KlC;IAAE,cAAc,CAAC,WAAW;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE"}
+{"version":3,"file":"Header.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/navigation/Header.svelte.js"],"names":[],"mappings":";;;;;AA6MA;;WA/KuD,MAAM;aAAW,MAAM;YAAU,MAAM;eAAa,GAAG,EAAE;oBAAkB,GAAG,EAAE;qBAAmB,OAAO;WA+K5G;wBA/KlC;IAAE,cAAc,CAAC,WAAW;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAA;CAAE"}

package/dist/patterns/page/PageLoader.stories.svelte

@@ -15,13 +15,11 @@
       showRetry: { control: 'boolean' },
     },
   });
-
 </script>
 
 <script>
-  
-  let loading = true;
-  let hasError = false;
+  let loading = $state(true);
+  let hasError = $state(false);
 
   function simulateLoading() {
     loading = true;
@@ -92,13 +90,13 @@
     <div class="flex gap-2">
       <button
         class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-        on:click={simulateLoading}
+        onclick={simulateLoading}
       >
         Simulate Loading
       </button>
       <button
         class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
-        on:click={simulateError}
+        onclick={simulateError}
       >
         Simulate Error
       </button>

package/dist/patterns/page/PageLoader.stories.svelte.d.ts

@@ -1,28 +1,8 @@
 export default PageLoader;
-type PageLoader = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type PageLoader = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
 };
-declare const PageLoader: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+declare const PageLoader: import("svelte").Component<Record<string, never>, {}, "">;
 import PageLoader from './PageLoader.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=PageLoader.stories.svelte.d.ts.map

package/dist/patterns/page/PageLoader.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageLoader.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA+HA;;;;mBAAsH;uBA1H7F,qBAAqB;6CAiHD,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":"PageLoader.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.stories.svelte.js"],"names":[],"mappings":";;;;;AAoHA,oFAAyD;uBA/GhC,qBAAqB"}

package/dist/patterns/page/PageLoader.svelte

@@ -1,6 +1,7 @@
 <script>
   import Spinner from "../../primitives/Spinner/Spinner.svelte";
   import Alert from "../../primitives/Alert/Alert.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
 
   let {
     isLoading = true,
@@ -28,12 +29,9 @@
     <Alert type="danger" title={errorTitle} message={error} />
     {#if showRetry}
       <div class="mt-4 text-center">
-        <button
-          class="text-blue-600 hover:text-blue-700 dark:text-blue-500 dark:hover:text-blue-400 font-medium"
-          onclick={onRetry}
-        >
+        <Button variant="link" onclick={onRetry}>
           Try again
-        </button>
+        </Button>
       </div>
     {/if}
   </div>

package/dist/patterns/page/PageLoader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageLoader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.svelte.js"],"names":[],"mappings":";;;;;AAgDA;gBAtCiC,OAAO;YAAU,GAAG;qBAAmB,MAAM;iBAAe,MAAM;gBAAc,OAAO;;gBAAkC,MAAM;cAAY,GAAG;WAsCtH;wBAtCtC;IAAE,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,WAAW;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"PageLoader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/page/PageLoader.svelte.js"],"names":[],"mappings":";;;;;AAkDA;gBAtCiC,OAAO;YAAU,GAAG;qBAAmB,MAAM;iBAAe,MAAM;gBAAc,OAAO;;gBAAkC,MAAM;cAAY,GAAG;WAsCtH;wBAtCtC;IAAE,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,CAAC;IAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,WAAW;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/primitives/BottomSheet/BottomSheet.stories.svelte

@@ -18,15 +18,14 @@
       },
     },
   });
-
 </script>
 
 <script>
-    import Button from '../Button/Button.svelte';
+  import Button from '../Button/Button.svelte';
 
-  let showBasic = false;
-  let showWithActions = false;
-  let showWithTitle = false;
+  let showBasic = $state(false);
+  let showWithActions = $state(false);
+  let showWithTitle = $state(false);
 </script>
 
 
@@ -38,11 +37,11 @@
 />
 
 <Story name="With Title">
-  <Button on:click={() => (showWithTitle = true)}>Open With Title</Button>
+  <Button onclick={() => (showWithTitle = true)}>Open With Title</Button>
   <BottomSheet
     show={showWithTitle}
     title="Bottom Sheet Title"
-    on:close={() => (showWithTitle = false)}
+    onclose={() => (showWithTitle = false)}
   >
     <p>This bottom sheet has a title at the top.</p>
     <p>The title helps provide context for the sheet's purpose.</p>
@@ -50,30 +49,30 @@
 </Story>
 
 <Story name="With Actions">
-  <Button on:click={() => (showWithActions = true)}>Open With Actions</Button>
+  <Button onclick={() => (showWithActions = true)}>Open With Actions</Button>
   <BottomSheet
     show={showWithActions}
     title="Confirm Action"
-    on:close={() => (showWithActions = false)}
+    onclose={() => (showWithActions = false)}
   >
     <p>Are you sure you want to proceed with this action?</p>
-    <p slot="actions">
-      <Button variant="secondary" on:click={() => (showWithActions = false)}>
+    {#snippet actions()}
+      <Button variant="alternative" onclick={() => (showWithActions = false)}>
         Cancel
       </Button>
-      <Button variant="primary" on:click={() => (showWithActions = false)}>
+      <Button variant="default" onclick={() => (showWithActions = false)}>
         Confirm
       </Button>
-    </p>
+    {/snippet}
   </BottomSheet>
 </Story>
 
 <Story name="Long Content">
-  <Button on:click={() => showBasic = true}>Open With Long Content</Button>
+  <Button onclick={() => showBasic = true}>Open With Long Content</Button>
   <BottomSheet
     show={showBasic}
     title="Privacy Policy"
-    on:close={() => (showBasic = false)}
+    onclose={() => (showBasic = false)}
   >
     <div>
       {#each Array(20) as _, i}

package/dist/primitives/BottomSheet/BottomSheet.stories.svelte.d.ts

@@ -1,28 +1,8 @@
 export default BottomSheet;
-type BottomSheet = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type BottomSheet = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
 };
-declare const BottomSheet: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+declare const BottomSheet: import("svelte").Component<Record<string, never>, {}, "">;
 import BottomSheet from './BottomSheet.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=BottomSheet.stories.svelte.d.ts.map

package/dist/primitives/BottomSheet/BottomSheet.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheet.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAuFA;;;;mBAAuH;wBAlF7F,sBAAsB;6CAyEH,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":"BottomSheet.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheet.stories.svelte.js"],"names":[],"mappings":";;;;;AA6EA,qFAA0D;wBAxEhC,sBAAsB"}

package/dist/primitives/Button/Button.svelte

@@ -16,7 +16,6 @@
    *
    * Sizes (Flowbite native): xs, sm, md, lg, xl
    */
-  import Spinner from '../Spinner/Spinner.svelte';
   import { CheckOutline } from '../Icons';
 
   /** @type {{
@@ -84,17 +83,18 @@
   };
 
   // Variant classes with all states in Tailwind
+  // Note: focus:ring-4 is added per-variant to allow icon/link variants to have no ring
   const variantClasses = {
-    default: "text-white bg-blue-700 border border-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
-    alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:ring-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700",
-    outline: "text-blue-700 bg-transparent border border-blue-700 hover:text-white hover:bg-blue-800 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500",
-    red: "text-white bg-red-700 border border-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900",
-    "red-outline": "text-red-700 bg-transparent border border-red-700 hover:text-white hover:bg-red-800 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600",
-    ghost: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 hover:text-gray-900 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
-    "ghost-red": "text-red-700 bg-transparent border-transparent hover:bg-red-100 hover:text-red-900 focus:ring-red-200 dark:text-red-500 dark:hover:bg-red-900/50 dark:hover:text-red-400",
-    link: "text-blue-700 bg-transparent border-transparent hover:underline focus:ring-0 dark:text-blue-500",
+    default: "text-white bg-blue-700 border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
+    alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:ring-4 focus:ring-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700",
+    outline: "text-blue-700 bg-transparent border border-blue-700 hover:text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500",
+    red: "text-white bg-red-700 border border-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900",
+    "red-outline": "text-red-700 bg-transparent border border-red-700 hover:text-white hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600",
+    ghost: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 hover:text-gray-900 focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
+    "ghost-red": "text-red-700 bg-transparent border-transparent hover:bg-red-100 hover:text-red-900 focus:ring-4 focus:ring-red-200 dark:text-red-500 dark:hover:bg-red-900/50 dark:hover:text-red-400",
+    link: "text-blue-700 bg-transparent border-transparent hover:underline dark:text-blue-500",
     icon: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700",
-    toggle: "text-gray-500 bg-gray-100 border border-gray-200 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-600",
+    toggle: "text-gray-500 bg-gray-100 border border-gray-200 hover:bg-gray-200 focus:ring-4 focus:ring-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-600",
     success: "text-white bg-green-600 border border-green-600",
   };
 
@@ -129,7 +129,7 @@
     "inline-flex items-center justify-center",
     "rounded-lg",
     "font-medium leading-none",
-    "focus:outline-none focus:ring-4",
+    "focus:outline-none",
     "transition-colors duration-150",
     "select-none",
     sizeClass,
@@ -142,7 +142,7 @@
 {#if href}
   <a
     {href}
-    class={buttonClasses}
+    class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
     {onclick}
     {...restProps}
   >
@@ -152,15 +152,10 @@
     <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
       {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
     </span>
-    {#if loading}
-      <span class="absolute inset-0 flex items-center justify-center">
-        <Spinner size="sm" color="white" />
-      </span>
-    {/if}
   </a>
 {:else}
   <button
-    class={buttonClasses}
+    class="{buttonClasses} {loading ? 'loading-pulse' : ''}"
     disabled={effectiveDisabled}
     {onclick}
     {...restProps}
@@ -171,11 +166,7 @@
     <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
       {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
     </span>
-    {#if loading}
-      <span class="absolute inset-0 flex items-center justify-center">
-        <Spinner size="sm" color="white" />
-      </span>
-    {:else if success}
+    {#if success}
       <span class="absolute inset-0 flex items-center justify-center gap-2">
         <CheckOutline class="w-5 h-5" />
         {#if successText}<span class="font-medium">{successText}</span>{/if}
@@ -185,6 +176,15 @@
 {/if}
 
 <style>
+  .loading-pulse {
+    animation: pulse-bg 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse-bg {
+    0%, 100% { filter: brightness(1); }
+    50% { filter: brightness(1.15); }
+  }
+
   .shimmer-overlay {
     position: absolute;
     inset: 0;
@@ -202,10 +202,10 @@
     background: linear-gradient(
       90deg,
       transparent 0%,
-      rgba(255, 255, 255, 0.15) 50%,
+      rgba(255, 255, 255, 0.2) 50%,
       transparent 100%
     );
-    animation: shimmer 1.5s ease-in-out infinite;
+    animation: shimmer 1s ease-in-out infinite;
   }
 
   @keyframes shimmer {

package/dist/primitives/Button/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAwMA;;cAbc,MAAM;WACT,MAAM;eACF,OAAO;cACR,OAAO;cACP,OAAO;kBACH,MAAM;aACX,OAAO;WACT,MAAM,GAAG,IAAI;eACT,GAAG;YACN,MAAM;cACJ,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;WAGgB"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA8LA;;cAbc,MAAM;WACT,MAAM;eACF,OAAO;cACR,OAAO;cACP,OAAO;kBACH,MAAM;aACX,OAAO;WACT,MAAM,GAAG,IAAI;eACT,GAAG;YACN,MAAM;cACJ,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;WAGgB"}

package/dist/primitives/Icons/CheckOutline.svelte

@@ -1,4 +1,4 @@
-<script>
+<script>
   let { class: className = "" } = $props();
 </script>
 

package/dist/primitives/Modal/Modal.stories.svelte

@@ -1,85 +1,86 @@
 <script module>
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
-    import ModalProgress from "./Modal.svelte";
+  import ModalProgress from "./Modal.svelte";
 
   const { Story } = defineMeta({
     title: "Components/Modal/ModalProgress",
     component: ModalProgress,
   });
+</script>
 
-  let show1 = false;
-  let show2 = false;
-  let show3 = false;
-
+<script>
+  let show1 = $state(false);
+  let show2 = $state(false);
+  let show3 = $state(false);
 </script>
 
 <Story name="Basic Modal">
   <button
-    on:click={() => (show1 = true)}
+    onclick={() => (show1 = true)}
     class="px-4 py-2 bg-primary text-white rounded-lg"
   >
     Open Basic Modal
   </button>
   <ModalProgress bind:show={show1}>
-    <div slot="header">
+    {#snippet header()}
       <h2 class="text-xl font-semibold mb-2">Modal Title</h2>
-    </div>
-    <div slot="body">
+    {/snippet}
+    {#snippet body()}
       <p class="text-gray-500 dark:text-gray-400">This is the modal body content.</p>
-    </div>
-    <div slot="footer">
+    {/snippet}
+    {#snippet footer()}
       <button
-        on:click={() => (show1 = false)}
+        onclick={() => (show1 = false)}
         class="px-4 py-2 bg-gray-600 text-white rounded-lg"
       >
         Close
       </button>
-    </div>
+    {/snippet}
   </ModalProgress>
 </Story>
 
 <Story name="Processing State">
   <button
-    on:click={() => (show2 = true)}
+    onclick={() => (show2 = true)}
     class="px-4 py-2 bg-primary text-white rounded-lg"
   >
     Open Processing Modal
   </button>
   <ModalProgress bind:show={show2} isProcessing={true}>
-    <div slot="body">
+    {#snippet body()}
       <div class="flex flex-col items-center gap-4">
         <div
           class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"
         ></div>
         <p class="text-gray-500 dark:text-gray-400">Processing your request...</p>
       </div>
-    </div>
+    {/snippet}
   </ModalProgress>
 </Story>
 
 <Story name="Success State">
   <button
-    on:click={() => (show3 = true)}
+    onclick={() => (show3 = true)}
     class="px-4 py-2 bg-green-600 text-white rounded-lg"
   >
     Open Success Modal
   </button>
   <ModalProgress bind:show={show3} isSuccess={true}>
-    <div slot="body">
+    {#snippet body()}
       <div class="flex flex-col items-center gap-4 text-center">
         <div class="text-green-600 dark:text-green-400 text-5xl">✓</div>
         <h3 class="text-xl font-semibold">Success!</h3>
         <p class="text-gray-500 dark:text-gray-400">Your action was completed successfully.</p>
       </div>
-    </div>
-    <div slot="footer">
+    {/snippet}
+    {#snippet footer()}
       <button
-        on:click={() => (show3 = false)}
+        onclick={() => (show3 = false)}
         class="px-4 py-2 bg-green-600 text-white rounded-lg"
       >
         Done
       </button>
-    </div>
+    {/snippet}
   </ModalProgress>
 </Story>

package/dist/primitives/Modal/Modal.stories.svelte.d.ts

@@ -1,27 +1,7 @@
 export default Modal;
-type Modal = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type Modal = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
 };
-declare const Modal: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-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;
-}
+declare const Modal: import("svelte").Component<Record<string, never>, {}, "">;
 //# sourceMappingURL=Modal.stories.svelte.d.ts.map

package/dist/primitives/Modal/Modal.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Modal/Modal.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAkFA;;;;mBAAiH;6CATpE,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":"Modal.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Modal/Modal.stories.svelte.js"],"names":[],"mappings":";;;;;AA2EA,+EAAoD"}

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

@@ -12,14 +12,11 @@
       imageSrc: { control: "text" },
     },
   });
-
 </script>
 
 <script>
-    import { writable } from "svelte/store";
-
-  let showModal = writable(false);
-  let croppedImage = null;
+  let showModal = $state(false);
+  let croppedImage = $state(null);
 
   function handleSave(image) {
     croppedImage = image;
@@ -30,10 +27,6 @@
   function handleCancel() {
     console.log("Cropping cancelled");
   }
-
-  function openModal() {
-    $showModal = true;
-  }
 </script>
 
 
@@ -47,14 +40,14 @@
 <Story name="With Sample Image">
   <div>
     <button
-      on:click={() => ($showModal = true)}
+      onclick={() => (showModal = true)}
       class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
     >
       Crop Microphone Image
     </button>
 
     <CropImage
-      bind:showModal={$showModal}
+      bind:showModal={showModal}
       imageSrc={MicrophoneImage}
       onSave={handleSave}
       onCancel={handleCancel}
@@ -84,14 +77,14 @@
     </ul>
 
     <button
-      on:click={() => ($showModal = true)}
+      onclick={() => (showModal = true)}
       class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium"
     >
       Start Cropping
     </button>
 
     <CropImage
-      bind:showModal={$showModal}
+      bind:showModal={showModal}
       imageSrc={MicrophoneImage}
       onSave={handleSave}
       onCancel={handleCancel}