@hashrytech/quick-components-kit 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hashrytech/quick-components-kit
 
+## 0.5.0
+
+### Minor Changes
+
+- feat: adding navbar and nad-aside
+
+## 0.4.1
+
+### Patch Changes
+
+- fix: link button package fix
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/hamburger-menu/HamburgerMenu.svelte

@@ -0,0 +1,30 @@
+<script lang="ts" module>
+    import type { ClassNameValue } from 'tailwind-merge';
+    
+    export type ButtonProps = {
+        open?: boolean;
+        ariaLabel: string;
+        linesClasses?: string;
+        numberOfLines?: number;
+        onclick?: (event: MouseEvent) => void;
+        class?: ClassNameValue;
+    };
+
+</script>
+
+<script lang="ts">
+  import {twMerge} from 'tailwind-merge';
+  
+  let { open=$bindable(true), ariaLabel, linesClasses, numberOfLines=3, onclick, ...props }: ButtonProps = $props();
+
+</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}>
+    <!-- Icon -->
+    <div class="space-y-2">
+      {#each Array(numberOfLines) as _}
+      <span class={twMerge("block w-7 h-0.5 bg-button-primary", linesClasses)}></span>
+      {/each}
+    </div>
+</button>
+

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

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

package/dist/hamburger-menu/index.d.ts

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

package/dist/hamburger-menu/index.js

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

package/dist/index.d.ts

@@ -1,2 +1,5 @@
-export * from './button/index.js';
 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';

package/dist/index.js

@@ -1,5 +1,8 @@
 // Reexport your entry components here
 // lib/index.js
-export * from './button/index.js';
 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';
 // Add more components here...

package/dist/navbar-aside/NavBarAside.svelte

@@ -0,0 +1,35 @@
+<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

@@ -0,0 +1,14 @@
+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

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

package/dist/navbar-aside/index.js

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

package/dist/text-input/TextInput.svelte

@@ -19,7 +19,7 @@
      * @prop {string} [value] - The bound value of the input.
      * @prop {string} [placeholder] - Placeholder text.
      * @prop {string} [labelText] - Optional label text.
-     * @prop {ClassNameValue} [inputStyle] - Additional Tailwind classes to apply to the input. Example: "border-red-500 text-green-600"
+     * @prop {ClassNameValue} [inputClasses] - Additional Tailwind classes to apply to the input. Example: "border-red-500 text-green-600"
      * @prop {TextInputSize} [size] - Size variant ("sm", "md", "lg") with predefined Tailwind styles.
      *        - "sm": h-[2.05rem] text-sm placeholder:text-sm
      *        - "md": h-[2.375rem] text-sm placeholder:text-sm
@@ -35,7 +35,7 @@
         type?: TextInputType;
         placeholder?: string;
         labelText?: string;        
-        inputStyle?: ClassNameValue;
+        inputClasses?: ClassNameValue;
         size?: TextInputSize;
         disabled?: boolean;
         required?: boolean;
@@ -52,7 +52,7 @@
 <script lang="ts">
     import { twMerge } from 'tailwind-merge';
     
-    let { id, type="text", name="", value="", placeholder="", labelText, size="md", inputStyle="", disabled=false, required=false, error, onchange, onmouseup, label, icon}: TextInputProps = $props();
+    let { id, type="text", name="", value="", placeholder="", labelText, size="md", inputClasses="", disabled=false, required=false, error, onchange, onmouseup, label, icon}: TextInputProps = $props();
 
     /**
      * Predefined size classes for the TextBox input.
@@ -76,7 +76,7 @@
             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",
             error ? "bg-red-50 border-red-300 ring-red-300" : "", 
             icon ? "pl-10" : "",
-            sizeStyle[size], inputStyle)}
+            sizeStyle[size], inputClasses)}
         />
     </div>
     {#if error}

package/dist/text-input/TextInput.svelte.d.ts

@@ -16,7 +16,7 @@ export type TextInputType = "text" | "password" | "number" | "email" | "tel" | "
  * @prop {string} [value] - The bound value of the input.
  * @prop {string} [placeholder] - Placeholder text.
  * @prop {string} [labelText] - Optional label text.
- * @prop {ClassNameValue} [inputStyle] - Additional Tailwind classes to apply to the input. Example: "border-red-500 text-green-600"
+ * @prop {ClassNameValue} [inputClasses] - Additional Tailwind classes to apply to the input. Example: "border-red-500 text-green-600"
  * @prop {TextInputSize} [size] - Size variant ("sm", "md", "lg") with predefined Tailwind styles.
  *        - "sm": h-[2.05rem] text-sm placeholder:text-sm
  *        - "md": h-[2.375rem] text-sm placeholder:text-sm
@@ -32,7 +32,7 @@ export type TextInputProps = {
     type?: TextInputType;
     placeholder?: string;
     labelText?: string;
-    inputStyle?: ClassNameValue;
+    inputClasses?: ClassNameValue;
     size?: TextInputSize;
     disabled?: boolean;
     required?: boolean;

package/package.json

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