@hashrytech/quick-components-kit 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hashrytech/quick-components-kit
 
+## 0.7.0
+
+### Minor Changes
+
+- feat: Adding close button state to hamburger menu
+
+## 0.6.1
+
+### Patch Changes
+
+- fix: renaming transitionPosition property for drawer to position
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/drawer/Drawer.svelte

@@ -12,7 +12,7 @@
       ariaLabel?: string;
       transitionDuration?: number;
       transitionDistance?: number;
-      transitionPosition?: "left" | "right" | "top" | "bottom";
+      position?: "left" | "right" | "top" | "bottom";
       overlayClasses?: string;
       children?: Snippet;
       class?: ClassNameValue;
@@ -21,11 +21,11 @@
 </script>
 
 <script lang="ts">  
-  let {open=$bindable(false), escapeKeyClose=true, disableBodyScroll=true, ariaLabel="Drawer", transitionPosition="left", transitionDuration=200, transitionDistance=240, overlayClasses="", children, ...props}: DrawerProps = $props();
+  let {open=$bindable(false), escapeKeyClose=true, disableBodyScroll=true, ariaLabel="Drawer", position="left", transitionDuration=200, transitionDistance=240, overlayClasses="", children, ...props}: DrawerProps = $props();
 
   const transitionProperties = {
-    x: transitionPosition == "left" ? -transitionDistance : transitionPosition == "right" ? transitionDistance : 0,
-    y: transitionPosition == "top" ? -transitionDistance : transitionPosition == "bottom" ? transitionDistance : 0,
+    x: position == "left" ? -transitionDistance : position == "right" ? transitionDistance : 0,
+    y: position == "top" ? -transitionDistance : position == "bottom" ? transitionDistance : 0,
     duration: transitionDuration
   };
 
@@ -73,7 +73,7 @@
 <div transition:fade={{duration: transitionDuration}} class={twMerge("fixed inset-0 bg-overlay-primary", overlayClasses)} role="presentation" onclick={() => open = false}></div>
 
 <div role="dialog" aria-modal="true" aria-label={ariaLabel} tabindex="{open ? 0 : -1}" aria-hidden="{!open}" 
-  class={twMerge("fixed flex flex-col items-center gap-2 bg-white outline-0 focus:outline-0 active:outline-focus-primary focus:outline-focus-primary overflow-y-auto", postionClasses[transitionPosition], props.class)}
+  class={twMerge("fixed flex flex-col items-center gap-2 bg-white outline-0 focus:outline-0 active:outline-focus-primary focus:outline-focus-primary overflow-y-auto", postionClasses[position], props.class)}
   in:fly={transitionProperties}
   out:fly={transitionProperties}>
   {@render children?.()}

package/dist/drawer/Drawer.svelte.d.ts

@@ -7,7 +7,7 @@ export type DrawerProps = {
     ariaLabel?: string;
     transitionDuration?: number;
     transitionDistance?: number;
-    transitionPosition?: "left" | "right" | "top" | "bottom";
+    position?: "left" | "right" | "top" | "bottom";
     overlayClasses?: string;
     children?: Snippet;
     class?: ClassNameValue;

package/dist/hamburger-menu/HamburgerMenu.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" module>
     import type { ClassNameValue } from 'tailwind-merge';
     
-    export type ButtonProps = {
+    export type HamburgerProps = {
         open?: boolean;
+        useCloseBtn?: boolean;
         ariaLabel: string;
         linesClasses?: string;
-        numberOfLines?: number;
         onclick?: (event: MouseEvent) => void;
         class?: ClassNameValue;
     };
@@ -15,12 +15,12 @@
 <script lang="ts">
   import {twMerge} from 'tailwind-merge';
   
-  let { open=$bindable(true), ariaLabel, linesClasses, numberOfLines=3, onclick, ...props }: ButtonProps = $props();
+  let { open=$bindable(true), ariaLabel, linesClasses, useCloseBtn=true, onclick, ...props }: HamburgerProps = $props();
 
 </script>
 
-<button class={twMerge("p-2 rounded focus:outline-none focus:ring-2 focus:ring-focus-primary cursor-pointer w-fit", props.class)} aria-label={ariaLabel} {onclick}>
-    <!-- Icon -->
+<!--
+<button class={twMerge("p-2 rounded focus:outline-none focus:ring-2 focus:ring-focus-primary cursor-pointer w-fit", props.class)} aria-label={ariaLabel} {onclick}>    
     <div class="space-y-2">
       {#each Array(numberOfLines) as _}
       <span class={twMerge("block w-7 h-0.5 bg-button-primary", linesClasses)}></span>
@@ -28,3 +28,24 @@
     </div>
 </button>
 
+<button class={twMerge("p-2 rounded focus:outline-none focus:ring-2 focus:ring-focus-primary cursor-pointer w-fit", props.class)} aria-label={ariaLabel} {onclick}>
+  <div class="relative w-7 h-7">   
+    <span class={twMerge("absolute left-0 top-1.5 w-full h-0.5 bg-button-primary transition-all duration-300", open ? "rotate-45 top-3.5" : "")}></span>   
+    <span class={twMerge("absolute left-0 top-3.5 w-full h-0.5 bg-button-primary transition-all duration-300", open ? "opacity-0" : "opacity-100")}></span>   
+    <span class={twMerge("absolute left-0 bottom-1 w-full h-0.5 bg-button-primary transition-all duration-300", open ? "-rotate-45 top-3.5" : "")}></span>
+  </div>
+</button>
+-->
+
+<button aria-label={ariaLabel} class={twMerge("p-2 rounded focus:outline-none focus:ring-2 focus:ring-focus-primary cursor-pointer w-fit", props.class)} {onclick}>
+  <div class="flex flex-col items-center justify-center size-7 transition-all gap-2">
+    <!-- Top bar -->
+    <span class={twMerge("h-0.5 w-7 bg-button-primary transition-transform duration-300 origin-center", open && useCloseBtn ? "rotate-45 translate-y-2.5" : "", linesClasses)}></span>
+
+    <!-- Middle bar -->
+    <span class={twMerge("h-0.5 w-7 bg-button-primary transition-opacity duration-300", open && useCloseBtn ? "opacity-0" : "opacity-100", linesClasses)}></span>
+
+    <!-- Bottom bar -->
+    <span class={twMerge("h-0.5 w-7 bg-button-primary transition-transform duration-300 origin-center", open && useCloseBtn ? "-rotate-45 -translate-y-2.5" : "", linesClasses)}></span>
+  </div>
+</button>

package/dist/hamburger-menu/HamburgerMenu.svelte.d.ts

@@ -1,12 +1,12 @@
 import type { ClassNameValue } from 'tailwind-merge';
-export type ButtonProps = {
+export type HamburgerProps = {
     open?: boolean;
+    useCloseBtn?: boolean;
     ariaLabel: string;
     linesClasses?: string;
-    numberOfLines?: number;
     onclick?: (event: MouseEvent) => void;
     class?: ClassNameValue;
 };
-declare const HamburgerMenu: import("svelte").Component<ButtonProps, {}, "open">;
+declare const HamburgerMenu: import("svelte").Component<HamburgerProps, {}, "open">;
 type HamburgerMenu = ReturnType<typeof HamburgerMenu>;
 export default HamburgerMenu;

package/package.json

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