@hashrytech/quick-components-kit 0.6.1 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hashrytech/quick-components-kit
 
+## 0.8.0
+
+### Minor Changes
+
+- feat: Adding overlay component
+
+## 0.7.0
+
+### Minor Changes
+
+- feat: Adding close button state to hamburger menu
+
 ## 0.6.1
 
 ### Patch Changes

package/dist/hamburger-menu/HamburgerMenu.svelte

@@ -1,11 +1,12 @@
 <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;
+        linesParentClasses?: string;
         onclick?: (event: MouseEvent) => void;
         class?: ClassNameValue;
     };
@@ -15,12 +16,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, linesParentClasses, 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 +29,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("px-1 py-0.5 rounded focus:outline-none focus:ring-2 focus:ring-focus-primary cursor-pointer w-fit", props.class)} {onclick}>
+  <div class={twMerge("flex flex-col items-center justify-center size-7 transition-all gap-2", linesParentClasses)}>
+    <!-- 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,13 @@
 import type { ClassNameValue } from 'tailwind-merge';
-export type ButtonProps = {
+export type HamburgerProps = {
     open?: boolean;
+    useCloseBtn?: boolean;
     ariaLabel: string;
     linesClasses?: string;
-    numberOfLines?: number;
+    linesParentClasses?: string;
     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/dist/index.d.ts

@@ -4,3 +4,4 @@ export * from './link-button/index.js';
 export * from './hamburger-menu/index.js';
 export * from './drawer/index.js';
 export * from './modal/index.js';
+export * from './overlay/index.js';

package/dist/index.js

@@ -6,4 +6,5 @@ export * from './link-button/index.js';
 export * from './hamburger-menu/index.js';
 export * from './drawer/index.js';
 export * from './modal/index.js';
+export * from './overlay/index.js';
 // Add more components here...

package/dist/modal/Modal.svelte

@@ -40,13 +40,13 @@
     }
   });
 
-  export function closeDrawer() {
+  export function closeModal() {
     open = false;
   };
 
   function handleKeydown (event: { key: string; }) {
     if(open && escapeKeyClose && event.key === "Escape") {
-      closeDrawer();
+      closeModal();
     }
   };
 

package/dist/modal/Modal.svelte.d.ts

@@ -11,7 +11,7 @@ export type ModalProps = {
     class?: ClassNameValue;
 };
 declare const Modal: import("svelte").Component<ModalProps, {
-    closeDrawer: () => void;
+    closeModal: () => void;
 }, "open">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/dist/overlay/Overlay.svelte

@@ -0,0 +1,58 @@
+<script lang="ts" module>    
+	  import { onDestroy, onMount, type Snippet } from 'svelte';
+    import type { ClassNameValue } from 'tailwind-merge';
+    import { fade } from 'svelte/transition';
+    import {twMerge} from 'tailwind-merge';
+	  import { browser } from '$app/environment';
+    
+    export type OverlayProps = {
+      open?: boolean;
+      escapeKeyClose?: boolean;
+      disableBodyScroll?: boolean;
+      ariaLabel?: string;
+      overlayTransitionDuration?: number;
+      overlayClasses?: string;
+      children?: Snippet;
+      class?: ClassNameValue;
+    };
+
+</script>
+
+<script lang="ts">
+  let {open=$bindable(false), escapeKeyClose=true, disableBodyScroll=true, overlayTransitionDuration=0, ariaLabel="Modal", overlayClasses="", children, ...props}: OverlayProps = $props();
+
+  const lockScroll = () => document.body.style.overflow = 'hidden';
+  const unlockScroll = () => document.body.style.overflow = '';
+
+  $effect(() => {
+		if (open && disableBodyScroll) lockScroll(); else unlockScroll();
+	});
+
+  onMount(() => {
+    if(browser){
+      window.addEventListener('keydown', handleKeydown);
+    }
+  });
+
+  onDestroy(() => {
+    if(browser){
+      window.removeEventListener('keydown', handleKeydown);
+    }
+  });
+
+  export function closeOverlay() {
+    open = false;
+  };
+
+  function handleKeydown (event: { key: string; }) {
+    if(open && escapeKeyClose && event.key === "Escape") {
+      closeOverlay();
+    }
+  };
+
+</script>
+
+{#if open}
+<div transition:fade={{duration: overlayTransitionDuration}} class={twMerge("fixed inset-0 bg-overlay-primary", overlayClasses)} role="presentation" onclick={() => open = false}></div>
+{/if}
+

package/dist/overlay/Overlay.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type OverlayProps = {
+    open?: boolean;
+    escapeKeyClose?: boolean;
+    disableBodyScroll?: boolean;
+    ariaLabel?: string;
+    overlayTransitionDuration?: number;
+    overlayClasses?: string;
+    children?: Snippet;
+    class?: ClassNameValue;
+};
+declare const Overlay: import("svelte").Component<OverlayProps, {
+    closeOverlay: () => void;
+}, "open">;
+type Overlay = ReturnType<typeof Overlay>;
+export default Overlay;

package/dist/overlay/index.d.ts

@@ -0,0 +1 @@
+export { default as Overlay } from './Overlay.svelte';

package/dist/overlay/index.js

@@ -0,0 +1 @@
+export { default as Overlay } from './Overlay.svelte';

package/package.json

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