@hashrytech/quick-components-kit 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @hashrytech/quick-components-kit
 
+## 0.6.0
+
+### Minor Changes
+
+- feat: adding modal component
+- feat: adding checkbox component
+- feat: Adding drawer component
+- feat: adding radio button component
+
+### Patch Changes
+
+- fix: removing navbar-aside component
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/checkbox/Checkbox.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	  import type { Snippet } from 'svelte';
+    import type { ClassNameValue } from 'tailwind-merge';
+    import {twMerge} from 'tailwind-merge';
+    
+    export type CheckBoxProps = {
+        id: string;
+        name?: string;
+        label?: string;
+        disabled?: boolean;
+        checked?: boolean;
+        group?: any[];
+        labelPosition?: "left" | "right";
+        size?: "sm" | "md" | "lg";
+        children?: Snippet;
+        icon?: Snippet;
+        onclick?: (event: MouseEvent) => void;
+        labelClass?: ClassNameValue;
+        class?: ClassNameValue;
+    };
+
+</script>
+
+<script lang="ts"> 
+
+  let {id, name, label="", labelPosition="right", checked=$bindable(true), group=$bindable(), size="md", disabled=$bindable(false), onclick, labelClass, ...props}: CheckBoxProps = $props();
+
+  const sizeMap = {
+    sm: 'w-4 h-4',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6',
+  };
+
+</script>
+
+<label for={id} class="inline-flex items-center gap-2 cursor-pointer select-none">
+  {#if labelPosition === "left"}<span class={twMerge("text-sm", labelClass)}>{label}</span>{/if}
+  <input {id} name={name ? name : id} type="checkbox" bind:checked bind:group {disabled} class={twMerge("rounded border-border-primary focus:ring-2 ring-focus-primary text-button-primary accent-button-primary cursor-pointer", 
+    sizeMap[size], props.class)} />
+  {#if labelPosition === "right"}<span class={twMerge("text-sm", labelClass)}>{label}</span>{/if}
+</label>

package/dist/checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type CheckBoxProps = {
+    id: string;
+    name?: string;
+    label?: string;
+    disabled?: boolean;
+    checked?: boolean;
+    group?: any[];
+    labelPosition?: "left" | "right";
+    size?: "sm" | "md" | "lg";
+    children?: Snippet;
+    icon?: Snippet;
+    onclick?: (event: MouseEvent) => void;
+    labelClass?: ClassNameValue;
+    class?: ClassNameValue;
+};
+declare const Checkbox: import("svelte").Component<CheckBoxProps, {}, "disabled" | "checked" | "group">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/checkbox/index.d.ts

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

package/dist/checkbox/index.js

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

package/dist/drawer/Drawer.svelte

@@ -0,0 +1,82 @@
+<script lang="ts" module>    
+	  import { onDestroy, onMount, type Snippet } from 'svelte';
+    import type { ClassNameValue } from 'tailwind-merge';
+    import { fade, fly } from 'svelte/transition';
+    import {twMerge} from 'tailwind-merge';
+	  import { browser } from '$app/environment';
+    
+    export type DrawerProps = {
+      open?: boolean;
+      escapeKeyClose?: boolean;
+      disableBodyScroll?: boolean;
+      ariaLabel?: string;
+      transitionDuration?: number;
+      transitionDistance?: number;
+      transitionPosition?: "left" | "right" | "top" | "bottom";
+      overlayClasses?: string;
+      children?: Snippet;
+      class?: ClassNameValue;
+    };
+
+</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();
+
+  const transitionProperties = {
+    x: transitionPosition == "left" ? -transitionDistance : transitionPosition == "right" ? transitionDistance : 0,
+    y: transitionPosition == "top" ? -transitionDistance : transitionPosition == "bottom" ? transitionDistance : 0,
+    duration: transitionDuration
+  };
+
+  const postionClasses = {
+    left: "top-0 bottom-0 left-0 w-60",
+    right: "top-0 bottom-0 right-0 w-60",
+    top: "top-0 left-0 right-0 h-60",
+    bottom: "bottom-0 left-0 right-0 h-60",
+  };
+
+  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 closeDrawer() {
+    open = false;
+  };
+
+  function handleKeydown (event: { key: string; }) {
+    if(open && escapeKeyClose && event.key === "Escape") {
+      closeDrawer();
+    }
+  };
+
+</script>
+
+{#if open}
+<!-- Overlay -->
+<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)}
+  in:fly={transitionProperties}
+  out:fly={transitionProperties}>
+  {@render children?.()}
+</div>
+{/if}
+

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

@@ -0,0 +1,19 @@
+import { type Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type DrawerProps = {
+    open?: boolean;
+    escapeKeyClose?: boolean;
+    disableBodyScroll?: boolean;
+    ariaLabel?: string;
+    transitionDuration?: number;
+    transitionDistance?: number;
+    transitionPosition?: "left" | "right" | "top" | "bottom";
+    overlayClasses?: string;
+    children?: Snippet;
+    class?: ClassNameValue;
+};
+declare const Drawer: import("svelte").Component<DrawerProps, {
+    closeDrawer: () => void;
+}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/drawer/index.d.ts

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

package/dist/drawer/index.js

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

package/dist/hamburger-menu/HamburgerMenu.svelte

@@ -19,7 +19,7 @@
 
 </script>
 
-<button class={twMerge("p-2 rounded focus:outline-none focus:ring-2 focus:ring-focus-primary cursor-pointer relative w-fit", props.class)} aria-label={ariaLabel} {onclick}>
+<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 -->
     <div class="space-y-2">
       {#each Array(numberOfLines) as _}

package/dist/index.d.ts

@@ -2,4 +2,5 @@ export * from './text-input/index.js';
 export * from './button/index.js';
 export * from './link-button/index.js';
 export * from './hamburger-menu/index.js';
-export * from './navbar-aside/index.js';
+export * from './drawer/index.js';
+export * from './modal/index.js';

package/dist/index.js

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

package/dist/modal/Modal.svelte

@@ -0,0 +1,64 @@
+<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 ModalProps = {
+      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}: ModalProps = $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 closeDrawer() {
+    open = false;
+  };
+
+  function handleKeydown (event: { key: string; }) {
+    if(open && escapeKeyClose && event.key === "Escape") {
+      closeDrawer();
+    }
+  };
+
+</script>
+
+{#if open}
+<!-- Overlay -->
+<div transition:fade={{duration: overlayTransitionDuration}} 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 bg-white top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 outline-0 focus:outline-0 active:outline-focus-primary focus:outline-focus-primary overflow-y-auto w-full max-w-md h-96", props.class)}>
+  {@render children?.()}
+</div>
+{/if}
+

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

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

package/dist/modal/index.d.ts

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

package/dist/modal/index.js

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

package/dist/radio/Radio.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+	  import type { Snippet } from 'svelte';
+    import type { ClassNameValue } from 'tailwind-merge';
+    import {twMerge} from 'tailwind-merge';
+    
+    export type RadioProps = {
+        id: string;
+        name?: string;
+        label?: string;
+        disabled?: boolean;
+        value?: any;
+        group?: any;
+        labelPosition?: "left" | "right";
+        size?: "sm" | "md" | "lg";
+        children?: Snippet;
+        icon?: Snippet;
+        onclick?: (event: MouseEvent) => void;
+        labelClass?: ClassNameValue;
+        class?: ClassNameValue;
+    };
+
+</script>
+
+<script lang="ts"> 
+
+  let {id, name, label="", labelPosition="right", value=$bindable(), group=$bindable(), size="md", disabled=$bindable(false), onclick, labelClass, ...props}: RadioProps = $props();
+
+  const sizeMap = {
+    sm: 'w-4 h-4',
+    md: 'w-5 h-5',
+    lg: 'w-6 h-6',
+  };
+
+</script>
+
+<label for={id} class="inline-flex items-center gap-2 cursor-pointer select-none">
+  {#if labelPosition === "left"}<span class={twMerge("text-sm", labelClass)}>{label}</span>{/if}
+  <input {id} name={name ? name : id} type="radio" bind:value bind:group {disabled} class={twMerge("border-border-primary focus:ring-2 ring-focus-primary text-button-primary accent-button-primary cursor-pointer", 
+    sizeMap[size], props.class)} />
+  {#if labelPosition === "right"}<span class={twMerge("text-sm", labelClass)}>{label}</span>{/if}
+</label>

package/dist/radio/Radio.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type RadioProps = {
+    id: string;
+    name?: string;
+    label?: string;
+    disabled?: boolean;
+    value?: any;
+    group?: any;
+    labelPosition?: "left" | "right";
+    size?: "sm" | "md" | "lg";
+    children?: Snippet;
+    icon?: Snippet;
+    onclick?: (event: MouseEvent) => void;
+    labelClass?: ClassNameValue;
+    class?: ClassNameValue;
+};
+declare const Radio: import("svelte").Component<RadioProps, {}, "value" | "disabled" | "group">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/radio/index.d.ts

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

package/dist/radio/index.js

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

package/dist/text-input/TextInput.svelte

@@ -73,7 +73,7 @@
     <div class="relative">
         {#if icon}<div class="absolute inset-y-0 left-0 flex items-center justify-center rounded-l-primary m-0.5 w-10">{@render icon()}</div>{/if}
         <input {disabled} {required} {type} {id} {name} {placeholder} {onchange} {onmouseup} bind:value 
-            class={twMerge("rounded-primary border-neutral-300 focus:border-primary-500 focus:ring-primary-500 placeholder:opacity-50 disabled:bg-neutral-300/30 disabled:border-gray-300/30",
+            class={twMerge("rounded-primary border-border-primary focus:border-primary-500 focus:ring-primary-500 placeholder:opacity-50 disabled:bg-neutral-300/30 disabled:border-gray-300/30",
             error ? "bg-red-50 border-red-300 ring-red-300" : "", 
             icon ? "pl-10" : "",
             sizeStyle[size], inputClasses)}

package/package.json

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

package/dist/navbar-aside/NavBarAside.svelte

@@ -1,35 +0,0 @@
-<script lang="ts" module>
-    import { fade, fly, slide } from 'svelte/transition';
-	  import type { Snippet } from 'svelte';
-    import type { ClassNameValue } from 'tailwind-merge';
-    
-    export type ButtonProps = {
-      open?: boolean;
-      transitionDuration?: number;
-      transitionDistance?: number;
-      transitionPosition?: "left-0" | "right-0";
-      overlayClasses?: string;
-      children?: Snippet;
-      class?: ClassNameValue;
-    };
-
-</script>
-
-<script lang="ts">
-  import {twMerge} from 'tailwind-merge';
-  
-  let {open=$bindable(false), transitionPosition="left-0", transitionDuration=200, transitionDistance=-240, overlayClasses="", children, ...props}: ButtonProps = $props();
-
-</script>
-
-{#if open}
-<!-- Overlay -->
-<div transition:fade={{duration: transitionDuration}} class={twMerge("fixed inset-0 bg-neutral-700/80", overlayClasses)} role="presentation" onclick={() => open = false}></div>
-
-<aside class={twMerge("fixed top-0 flex flex-col items-center gap-2 bg-white w-60 h-screen", transitionPosition, props.class)}
-  in:fly={{ x: transitionDistance, duration: transitionDuration }}
-  out:fly={{ x: transitionDistance, duration: transitionDuration }}>
-  {@render children?.()}
-</aside>
-{/if}
-

package/dist/navbar-aside/NavBarAside.svelte.d.ts

@@ -1,14 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
-export type ButtonProps = {
-    open?: boolean;
-    transitionDuration?: number;
-    transitionDistance?: number;
-    transitionPosition?: "left-0" | "right-0";
-    overlayClasses?: string;
-    children?: Snippet;
-    class?: ClassNameValue;
-};
-declare const NavBarAside: import("svelte").Component<ButtonProps, {}, "open">;
-type NavBarAside = ReturnType<typeof NavBarAside>;
-export default NavBarAside;

package/dist/navbar-aside/index.d.ts

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

package/dist/navbar-aside/index.js

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