@hashrytech/quick-components-kit 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hashrytech/quick-components-kit
 
+## 0.8.1
+
+### Patch Changes
+
+- fix: Adding close func property
+
+## 0.8.0
+
+### Minor Changes
+
+- feat: Adding overlay component
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/hamburger-menu/HamburgerMenu.svelte

@@ -6,6 +6,7 @@
         useCloseBtn?: boolean;
         ariaLabel: string;
         linesClasses?: string;
+        linesParentClasses?: string;
         onclick?: (event: MouseEvent) => void;
         class?: ClassNameValue;
     };
@@ -15,7 +16,7 @@
 <script lang="ts">
   import {twMerge} from 'tailwind-merge';
   
-  let { open=$bindable(true), ariaLabel, linesClasses, useCloseBtn=true, onclick, ...props }: HamburgerProps = $props();
+  let { open=$bindable(true), ariaLabel, linesClasses, linesParentClasses, useCloseBtn=true, onclick, ...props }: HamburgerProps = $props();
 
 </script>
 
@@ -37,8 +38,8 @@
 </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">
+<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>
 

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

@@ -4,6 +4,7 @@ export type HamburgerProps = {
     useCloseBtn?: boolean;
     ariaLabel: string;
     linesClasses?: string;
+    linesParentClasses?: string;
     onclick?: (event: MouseEvent) => void;
     class?: ClassNameValue;
 };

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="", onclick, 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}></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.7.0",
+  "version": "0.8.1",
   "license": "MIT",
   "author": "Hashry Tech",
   "files": [