@hashrytech/quick-components-kit 0.17.3 → 0.17.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hashrytech/quick-components-kit
 
+## 0.17.5
+
+### Patch Changes
+
+- patch: refactoring button
+
+## 0.17.4
+
+### Patch Changes
+
+- patch: adding higher z-index for modal and drawer
+
 ## 0.17.3
 
 ### Patch Changes

package/dist/components/button/Button.svelte

@@ -6,7 +6,7 @@
         disabled?: boolean;
         children?: Snippet;
         icon?: Snippet;
-        loadingIcon?: Snippet;
+        activeIcon?: Snippet;
         onclick?: (event: MouseEvent) => void;
         class?: ClassNameValue;
     };
@@ -16,15 +16,18 @@
 <script lang="ts">
   import {twMerge} from 'tailwind-merge';
   
-  let { disabled=$bindable(), children, icon, loadingIcon, onclick, ...props }: ButtonProps = $props();
+  let { disabled=$bindable(), children, icon, activeIcon, onclick, ...props }: ButtonProps = $props();
 
 </script>
 
-<button {disabled} class={twMerge("flex flex-row items-center gap-2 px-4 py-2 focus:outline-primary-focus bg-primary-button hover:bg-primary-button-hover rounded-primary w-fit cursor-pointer text-white focus:ring-primary-focus focus:ring", 
+<button {disabled} class={twMerge("flex flex-row items-center gap-2 px-4 py-2 focus:outline-primary-focus bg-primary-button hover:bg-primary-button-hover rounded-primary cursor-pointer focus:ring-primary-focus focus:ring", 
   "disabled:bg-primary-button/60 disabled:cursor-default", props.class)}
   {onclick}>
-  {#if icon}<span class="w-10">{@render icon()}</span>{/if}
-  {#if loadingIcon}<span class="w-10">{@render loadingIcon()}</span>{/if}
+  {#if activeIcon}
+  <span>{@render activeIcon()}</span>
+  {:else if icon}
+  <span>{@render icon()}</span>
+  {/if}
   {@render children?.()}
 </button>
 

package/dist/components/button/Button.svelte.d.ts

@@ -4,7 +4,7 @@ export type ButtonProps = {
     disabled?: boolean;
     children?: Snippet;
     icon?: Snippet;
-    loadingIcon?: Snippet;
+    activeIcon?: Snippet;
     onclick?: (event: MouseEvent) => void;
     class?: ClassNameValue;
 };

package/dist/components/drawer/Drawer.svelte

@@ -112,7 +112,7 @@ A flexible, accessible slide-in drawer component for Svelte 5 using Tailwind CSS
 </script>
 
 {#if open}
-<Portal>
+<Portal class="fixed z-50">
   <Overlay {transitionDuration} {disableBodyScroll} class={overlayClasses} onclick={closeDrawer} />
   <div bind:this={drawerElement} use:trapFocus role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex={open ? 0 : -1} aria-hidden={!open}
     class={twMerge("fixed bg-white overflow-y-auto focus:outline-none", postionClasses[position], props.class)}

package/dist/components/modal/Modal.svelte

@@ -53,7 +53,7 @@
 </script>
 
 {#if open}
-<Portal>
+<Portal class="fixed z-50">
   <Overlay {transitionDuration} {disableBodyScroll} class={overlayClasses} onclick={closeModal} />
   <div bind:this={modalElement} use:trapFocus role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex={open ? 0 : -1} aria-hidden={!open}
     class={twMerge("fixed w-full max-w-2xl top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-6/12 overflow-y-auto focus:outline-none bg-white rounded-primary", props.class)}
@@ -61,7 +61,7 @@
     in:fly={{y: 150, duration: transitionDuration}}
     out:fly={{y: 150, duration: transitionDuration}}>       
     
-      {@render children?.()}    
+      {@render children?.()}
 
   </div>
 </Portal>

package/dist/components/portal/Portal.svelte

@@ -36,17 +36,17 @@ A utility component that renders its children outside the current DOM hierarchy
 
 <script lang="ts" module>    
 	import { type Snippet } from 'svelte';
-    import type { ClassNameValue } from 'tailwind-merge';    
-    import {twMerge} from 'tailwind-merge';
-    import { onMount, onDestroy } from 'svelte';
-    import { browser } from '$app/environment';
-    
-    export type PortalProps = {
-      target?: HTMLElement;
-      append?: boolean;    
-      children?: Snippet;
-      class?: ClassNameValue;
-    };
+  import type { ClassNameValue } from 'tailwind-merge';    
+  import {twMerge} from 'tailwind-merge';
+  import { onMount, onDestroy } from 'svelte';
+  import { browser } from '$app/environment';
+  
+  export type PortalProps = {
+    target?: HTMLElement;
+    append?: boolean;    
+    children?: Snippet;
+    class?: ClassNameValue;
+  };
 
 </script>
 

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "git+https://github.com/hashrytech/quick-components-kit.git"
   },
-  "version": "0.17.3",
+  "version": "0.17.5",
   "license": "MIT",
   "author": "Hashry Tech",
   "files": [