@hashrytech/quick-components-kit 0.18.0 → 0.19.0

package/dist/ui/footers/footer-1/Footer1.svelte

@@ -0,0 +1,81 @@
+<script lang="ts" module>
+	import {twMerge} from 'tailwind-merge';
+    import type { ClassNameValue } from 'tailwind-merge';
+    
+    export type Footer1Props = {
+        links?: {title : string, items: { text: string, href: string }[]}[];        
+        title: string;
+        logo?: string;
+        tagline?: string;
+        copyright?: string;
+        class?: ClassNameValue;
+    };
+
+</script>
+
+<script lang="ts">
+    let { links=[], logo, title, tagline, copyright, ...restProps }: Footer1Props = $props();
+    
+    const year = new Date().getFullYear();
+    const facebookSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14 13.5H16.5L17.5 9.5H14V7.5C14 6.47062 14 5.5 16 5.5H17.5V2.1401C17.1743 2.09685 15.943 2 14.6429 2C11.9284 2 10 3.65686 10 6.69971V9.5H7V13.5H10V22H14V13.5Z"></path></svg>`;
+    const twitterSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.4883 14.651L15.25 21H22.25L14.3917 10.5223L20.9308 3H18.2808L13.1643 8.88578L8.75 3H1.75L9.26086 13.0145L2.31915 21H4.96917L10.4883 14.651ZM16.25 19L5.75 5H7.75L18.25 19H16.25Z"></path></svg>`;  
+    const instagramSVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.001 9C10.3436 9 9.00098 10.3431 9.00098 12C9.00098 13.6573 10.3441 15 12.001 15C13.6583 15 15.001 13.6569 15.001 12C15.001 10.3427 13.6579 9 12.001 9ZM12.001 7C14.7614 7 17.001 9.2371 17.001 12C17.001 14.7605 14.7639 17 12.001 17C9.24051 17 7.00098 14.7629 7.00098 12C7.00098 9.23953 9.23808 7 12.001 7ZM18.501 6.74915C18.501 7.43926 17.9402 7.99917 17.251 7.99917C16.5609 7.99917 16.001 7.4384 16.001 6.74915C16.001 6.0599 16.5617 5.5 17.251 5.5C17.9393 5.49913 18.501 6.0599 18.501 6.74915ZM12.001 4C9.5265 4 9.12318 4.00655 7.97227 4.0578C7.18815 4.09461 6.66253 4.20007 6.17416 4.38967C5.74016 4.55799 5.42709 4.75898 5.09352 5.09255C4.75867 5.4274 4.55804 5.73963 4.3904 6.17383C4.20036 6.66332 4.09493 7.18811 4.05878 7.97115C4.00703 9.0752 4.00098 9.46105 4.00098 12C4.00098 14.4745 4.00753 14.8778 4.05877 16.0286C4.0956 16.8124 4.2012 17.3388 4.39034 17.826C4.5591 18.2606 4.7605 18.5744 5.09246 18.9064C5.42863 19.2421 5.74179 19.4434 6.17187 19.6094C6.66619 19.8005 7.19148 19.9061 7.97212 19.9422C9.07618 19.9939 9.46203 20 12.001 20C14.4755 20 14.8788 19.9934 16.0296 19.9422C16.8117 19.9055 17.3385 19.7996 17.827 19.6106C18.2604 19.4423 18.5752 19.2402 18.9074 18.9085C19.2436 18.5718 19.4445 18.2594 19.6107 17.8283C19.8013 17.3358 19.9071 16.8098 19.9432 16.0289C19.9949 14.9248 20.001 14.5389 20.001 12C20.001 9.52552 19.9944 9.12221 19.9432 7.97137C19.9064 7.18906 19.8005 6.66149 19.6113 6.17318C19.4434 5.74038 19.2417 5.42635 18.9084 5.09255C18.573 4.75715 18.2616 4.55693 17.8271 4.38942C17.338 4.19954 16.8124 4.09396 16.0298 4.05781C14.9258 4.00605 14.5399 4 12.001 4ZM12.001 2C14.7176 2 15.0568 2.01 16.1235 2.06C17.1876 2.10917 17.9135 2.2775 18.551 2.525C19.2101 2.77917 19.7668 3.1225 20.3226 3.67833C20.8776 4.23417 21.221 4.7925 21.476 5.45C21.7226 6.08667 21.891 6.81333 21.941 7.8775C21.9885 8.94417 22.001 9.28333 22.001 12C22.001 14.7167 21.991 15.0558 21.941 16.1225C21.8918 17.1867 21.7226 17.9125 21.476 18.55C21.2218 19.2092 20.8776 19.7658 20.3226 20.3217C19.7668 20.8767 19.2076 21.22 18.551 21.475C17.9135 21.7217 17.1876 21.89 16.1235 21.94C15.0568 21.9875 14.7176 22 12.001 22C9.28431 22 8.94514 21.99 7.87848 21.94C6.81431 21.8908 6.08931 21.7217 5.45098 21.475C4.79264 21.2208 4.23514 20.8767 3.67931 20.3217C3.12348 19.7658 2.78098 19.2067 2.52598 18.55C2.27848 17.9125 2.11098 17.1867 2.06098 16.1225C2.01348 15.0558 2.00098 14.7167 2.00098 12C2.00098 9.28333 2.01098 8.94417 2.06098 7.8775C2.11014 6.8125 2.27848 6.0875 2.52598 5.45C2.78014 4.79167 3.12348 4.23417 3.67931 3.67833C4.23514 3.1225 4.79348 2.78 5.45098 2.525C6.08848 2.2775 6.81348 2.11 7.87848 2.06C8.94514 2.0125 9.28431 2 12.001 2Z"></path></svg>`;    
+  
+</script>
+
+<footer class={twMerge("bg-neutral-900 text-white flex flex-col justify-center items", restProps.class)}>
+    <div class="px-4 py-6 w-full max-w-5xl mx-auto flex flex-row flex-wrap gap-7">
+
+        <!-- Branding -->
+         {#if logo || title }
+        <div class="space-y-4">
+            <div class="flex items-center gap-2">
+                {#if logo}<a href="/"><img src={logo} alt="Logo" class="h-8 w-auto" /></a>{/if}
+                {#if title}<a href="/"><span class="text-lg font-semibold">{title}</span></a>{/if}
+            </div>
+            {#if tagline}<p class="text-sm text-neutral-400 w-full max-w-sm">{tagline}</p>{/if}
+        </div>
+        {/if}
+
+        <div class="flex flex-row flex-wrap gap-10">
+
+            {#snippet footerLinks(title: string, items: { text: string, href: string }[])}
+            <div class="w-fit">
+                <h4 class="text-sm font-semibold mb-3">{title}</h4>
+                <ul class="space-y-2 text-sm text-neutral-300">
+                    {#each items as { text, href }}
+                    <li><a href={href} class="hover:text-primary-button-hover">{text}</a></li>
+                    {/each}
+                </ul>
+            </div>
+            {/snippet}
+
+            {#each links as { title, items }}
+            {@render footerLinks(title, items)}
+            {/each}
+
+            <!-- Social & Legal -->
+            <div class="space-y-4 w-fit ring bg-red-500/10 hidden">
+                <h4 class="text-sm font-semibold">Follow Us</h4>
+                <div class="flex gap-4">
+                    <a href="https://facebook.com" aria-label="Facebook" class="hover:text-primary-button-hover size-5">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14 13.5H16.5L17.5 9.5H14V7.5C14 6.47062 14 5.5 16 5.5H17.5V2.1401C17.1743 2.09685 15.943 2 14.6429 2C11.9284 2 10 3.65686 10 6.69971V9.5H7V13.5H10V22H14V13.5Z"></path></svg>
+                    </a>
+                    <a href="https://x.com" aria-label="X" class="hover:text-primary-button-hover size-5">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.4883 14.651L15.25 21H22.25L14.3917 10.5223L20.9308 3H18.2808L13.1643 8.88578L8.75 3H1.75L9.26086 13.0145L2.31915 21H4.96917L10.4883 14.651ZM16.25 19L5.75 5H7.75L18.25 19H16.25Z"></path></svg>
+                    </a>
+                    <a href="https://instagram.com" aria-label="Instagram" class="hover:text-primary-button-hover size-5">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12.001 9C10.3436 9 9.00098 10.3431 9.00098 12C9.00098 13.6573 10.3441 15 12.001 15C13.6583 15 15.001 13.6569 15.001 12C15.001 10.3427 13.6579 9 12.001 9ZM12.001 7C14.7614 7 17.001 9.2371 17.001 12C17.001 14.7605 14.7639 17 12.001 17C9.24051 17 7.00098 14.7629 7.00098 12C7.00098 9.23953 9.23808 7 12.001 7ZM18.501 6.74915C18.501 7.43926 17.9402 7.99917 17.251 7.99917C16.5609 7.99917 16.001 7.4384 16.001 6.74915C16.001 6.0599 16.5617 5.5 17.251 5.5C17.9393 5.49913 18.501 6.0599 18.501 6.74915ZM12.001 4C9.5265 4 9.12318 4.00655 7.97227 4.0578C7.18815 4.09461 6.66253 4.20007 6.17416 4.38967C5.74016 4.55799 5.42709 4.75898 5.09352 5.09255C4.75867 5.4274 4.55804 5.73963 4.3904 6.17383C4.20036 6.66332 4.09493 7.18811 4.05878 7.97115C4.00703 9.0752 4.00098 9.46105 4.00098 12C4.00098 14.4745 4.00753 14.8778 4.05877 16.0286C4.0956 16.8124 4.2012 17.3388 4.39034 17.826C4.5591 18.2606 4.7605 18.5744 5.09246 18.9064C5.42863 19.2421 5.74179 19.4434 6.17187 19.6094C6.66619 19.8005 7.19148 19.9061 7.97212 19.9422C9.07618 19.9939 9.46203 20 12.001 20C14.4755 20 14.8788 19.9934 16.0296 19.9422C16.8117 19.9055 17.3385 19.7996 17.827 19.6106C18.2604 19.4423 18.5752 19.2402 18.9074 18.9085C19.2436 18.5718 19.4445 18.2594 19.6107 17.8283C19.8013 17.3358 19.9071 16.8098 19.9432 16.0289C19.9949 14.9248 20.001 14.5389 20.001 12C20.001 9.52552 19.9944 9.12221 19.9432 7.97137C19.9064 7.18906 19.8005 6.66149 19.6113 6.17318C19.4434 5.74038 19.2417 5.42635 18.9084 5.09255C18.573 4.75715 18.2616 4.55693 17.8271 4.38942C17.338 4.19954 16.8124 4.09396 16.0298 4.05781C14.9258 4.00605 14.5399 4 12.001 4ZM12.001 2C14.7176 2 15.0568 2.01 16.1235 2.06C17.1876 2.10917 17.9135 2.2775 18.551 2.525C19.2101 2.77917 19.7668 3.1225 20.3226 3.67833C20.8776 4.23417 21.221 4.7925 21.476 5.45C21.7226 6.08667 21.891 6.81333 21.941 7.8775C21.9885 8.94417 22.001 9.28333 22.001 12C22.001 14.7167 21.991 15.0558 21.941 16.1225C21.8918 17.1867 21.7226 17.9125 21.476 18.55C21.2218 19.2092 20.8776 19.7658 20.3226 20.3217C19.7668 20.8767 19.2076 21.22 18.551 21.475C17.9135 21.7217 17.1876 21.89 16.1235 21.94C15.0568 21.9875 14.7176 22 12.001 22C9.28431 22 8.94514 21.99 7.87848 21.94C6.81431 21.8908 6.08931 21.7217 5.45098 21.475C4.79264 21.2208 4.23514 20.8767 3.67931 20.3217C3.12348 19.7658 2.78098 19.2067 2.52598 18.55C2.27848 17.9125 2.11098 17.1867 2.06098 16.1225C2.01348 15.0558 2.00098 14.7167 2.00098 12C2.00098 9.28333 2.01098 8.94417 2.06098 7.8775C2.11014 6.8125 2.27848 6.0875 2.52598 5.45C2.78014 4.79167 3.12348 4.23417 3.67931 3.67833C4.23514 3.1225 4.79348 2.78 5.45098 2.525C6.08848 2.2775 6.81348 2.11 7.87848 2.06C8.94514 2.0125 9.28431 2 12.001 2Z"></path></svg>
+                    </a>
+                </div>
+
+                <ul class="text-sm text-neutral-300 space-y-1">
+                    <li><a href="/privacy" class="hover:text-primary-button-hover">Privacy Policy</a></li>
+                    <li><a href="/terms" class="hover:text-primary-button-hover">Terms of Service</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
+    <div class="text-center text-sm text-neutral-300 py-4 border-t border-neutral-700">{copyright}</div>
+</footer>

package/dist/ui/footers/footer-1/Footer1.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { ClassNameValue } from 'tailwind-merge';
+export type Footer1Props = {
+    links?: {
+        title: string;
+        items: {
+            text: string;
+            href: string;
+        }[];
+    }[];
+    title: string;
+    logo?: string;
+    tagline?: string;
+    copyright?: string;
+    class?: ClassNameValue;
+};
+declare const Footer1: import("svelte").Component<Footer1Props, {}, "">;
+type Footer1 = ReturnType<typeof Footer1>;
+export default Footer1;

package/dist/ui/footers/footer-1/index.d.ts

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

package/dist/ui/footers/footer-1/index.js

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

package/dist/ui/headers/header-1/Header1.svelte

@@ -0,0 +1,94 @@
+<script lang="ts" module>
+    import type { ClassNameValue } from 'tailwind-merge';
+    
+    export type Header1Props = {        
+        title: string;
+        logo?: string;
+        links?: { text : string, href: string}[];
+        cartLink?: string;
+        accountLink?: string;
+        class?: ClassNameValue;
+    };
+
+</script>
+
+<script lang="ts">
+    import { HamburgerMenu, onKeydown, Overlay } from "../../../index.js";
+	import { fly } from 'svelte/transition';
+	import { twMerge } from "tailwind-merge";
+
+    let { logo, title, links=[], cartLink, accountLink, ...restProps }: Header1Props = $props();
+
+    let mobileMenuOpen = $state(false);
+
+    function closeMobileMenu() {
+		mobileMenuOpen = false;
+	};
+  
+</script>
+
+<header class="px-4 shadow-sm">
+
+    <div class={twMerge("flex min-h-16 justify-between items-center w-full max-w-7xl mx-auto", restProps.class)}>
+        {#if logo || title}
+        <div class="flex items-center gap-2">
+            {#if logo}<a href="/"><img src={logo} alt="Logo" class="h-8 w-auto" /></a>{/if}
+            {#if title}<a href="/"><span class="text-lg font-semibold">{title}</span></a>{/if}
+        </div>
+        {/if}
+
+        {#if links}
+        <nav class="hidden md:flex gap-6 text-base font-medium text-neutral-700">
+            {#each links as { text, href } }
+            <a href={href} class="hover:text-primary-button-hover">{text}</a>
+            {/each}
+        </nav>
+        {/if}
+        
+        {#if cartLink || accountLink}
+        <div class="flex items-center gap-4">            
+            <a href={cartLink} class="text-neutral-700 hover:text-primary-button-hover size-6" aria-label="Shopping Cart">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M6.00488 9H19.9433L20.4433 7H8.00488V5H21.7241C22.2764 5 22.7241 5.44772 22.7241 6C22.7241 6.08176 22.7141 
+                        6.16322 22.6942 6.24254L20.1942 16.2425C20.083 16.6877 19.683 17 19.2241 17H5.00488C4.4526 17 4.00488 16.5523 4.00488 
+                        16V4H2.00488V2H5.00488C5.55717 2 6.00488 2.44772 6.00488 3V9ZM6.00488 23C4.90031 23 4.00488 22.1046 4.00488 21C4.00488 
+                        19.8954 4.90031 19 6.00488 19C7.10945 19 8.00488 19.8954 8.00488 21C8.00488 22.1046 7.10945 23 6.00488 23ZM18.0049 
+                        23C16.9003 23 16.0049 22.1046 16.0049 21C16.0049 19.8954 16.9003 19 18.0049 19C19.1095 19 20.0049 19.8954 20.0049 
+                        21C20.0049 22.1046 19.1095 23 18.0049 23Z">
+                    </path>
+                </svg>
+            </a>
+            <a href={accountLink} aria-label="Account" class="text-neutral-700 hover:text-primary-button-hover size-6">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 
+                        18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 
+                        11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z">
+                    </path>
+                </svg>
+            </a>
+            <HamburgerMenu bind:open={mobileMenuOpen} onclick={() => (mobileMenuOpen = !mobileMenuOpen)} class="md:hidden"/>
+        </div>
+        {/if}        
+
+    </div>
+
+    {#if mobileMenuOpen}
+    <Overlay transitionDuration={150} onclick={()=> mobileMenuOpen = false} />
+    <div transition:fly={{ duration: 150, x: -64 }} class="w-64 fixed top-0 bottom-0 left-0 h-fit rounded-b shadow-primary overflow-y-auto" use:onKeydown={{ key: 'Escape', callback: closeMobileMenu }}>
+        
+        {#if logo || title}
+        <div class="text-neutral-700 border-b-2 border-neutral-100 bg-white gap-3 flex flex-row items-center h-16 shadow-2xl px-4">
+            {#if logo}<img src={logo} alt="Logo" class="size-8" />{/if}
+            {#if title}<span class="text-lg font-bold text-neutral-800">{title}</span>{/if}
+        </div>
+        {/if}
+        
+        <nav class="flex flex-col items-start text-white text-base min-h-screen bg-white shadow-primary px-2 pt-2">
+            {#each links as { text, href } }
+            <a {href} class="py-2 text-neutral-700 hover:bg-primary-100 px-4 rounded-primary w-full" onclick={closeMobileMenu}>{text}</a>
+            {/each}
+        </nav>
+    </div>
+    {/if}
+
+</header>

package/dist/ui/headers/header-1/Header1.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ClassNameValue } from 'tailwind-merge';
+export type Header1Props = {
+    title: string;
+    logo?: string;
+    links?: {
+        text: string;
+        href: string;
+    }[];
+    cartLink?: string;
+    accountLink?: string;
+    class?: ClassNameValue;
+};
+declare const Header1: import("svelte").Component<Header1Props, {}, "">;
+type Header1 = ReturnType<typeof Header1>;
+export default Header1;

package/dist/ui/headers/header-1/index.d.ts

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

package/dist/ui/headers/header-1/index.js

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

package/dist/ui/product-filters/product-filter-1/ProductFilter1.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" module>
+    import type { ClassNameValue } from 'tailwind-merge';
+
+    export type ProductFilter1List = {
+      title: string;
+      values: ProductFilter1Value[];
+    };
+
+    export type ProductFilter1Value = {
+      key: string;
+      value: string;
+      count?: number;
+    };
+
+    export type ProductFilter1Props = {
+      filters: ProductFilter1List[];
+      path?: string;
+      startExpanded?: boolean;
+      expandAlways?: boolean;
+      selectedValues?: {key: string, value: string}[];
+      showCounts?: boolean;
+      onFilter?: (key: string, value: string) => void;
+      class?: ClassNameValue;
+    };
+
+</script>
+
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+  import ProductFilterBlock from './ProductFilterBlock.svelte';
+
+  let { filters=$bindable([]), expandAlways=false, startExpanded=true, selectedValues=$bindable([]), showCounts=false, path="/products", onFilter, ...restProps }: ProductFilter1Props = $props();
+
+</script>
+
+<div class={twMerge("", restProps.class)}>
+    <div class={twMerge("w-64 flex flex-col space-y-4 p-2 divide-y divide-neutral-300")}>
+      {#each filters as filter}
+      <ProductFilterBlock filter={filter} open={startExpanded} {expandAlways} {onFilter} bind:selectedValues {showCounts} />
+      {/each}
+    </div>
+</div>

package/dist/ui/product-filters/product-filter-1/ProductFilter1.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { ClassNameValue } from 'tailwind-merge';
+export type ProductFilter1List = {
+    title: string;
+    values: ProductFilter1Value[];
+};
+export type ProductFilter1Value = {
+    key: string;
+    value: string;
+    count?: number;
+};
+export type ProductFilter1Props = {
+    filters: ProductFilter1List[];
+    path?: string;
+    startExpanded?: boolean;
+    expandAlways?: boolean;
+    selectedValues?: {
+        key: string;
+        value: string;
+    }[];
+    showCounts?: boolean;
+    onFilter?: (key: string, value: string) => void;
+    class?: ClassNameValue;
+};
+declare const ProductFilter1: import("svelte").Component<ProductFilter1Props, {}, "filters" | "selectedValues">;
+type ProductFilter1 = ReturnType<typeof ProductFilter1>;
+export default ProductFilter1;

package/dist/ui/product-filters/product-filter-1/ProductFilterBlock.svelte

@@ -0,0 +1,49 @@
+
+
+<script lang="ts">
+  import Checkbox from "../../../components/checkbox/Checkbox.svelte";
+	import { twMerge, type ClassNameValue } from "tailwind-merge";
+  //import { twMerge } from "tailwind-merge";
+  import type { ProductFilter1List } from "./ProductFilter1.svelte";
+  import { slide } from "svelte/transition";
+
+  let { open=$bindable(false), filter=$bindable(), expandAlways=false, showCounts=true, countsClass, selectedValues=$bindable([]), onFilter }: 
+    {open?: boolean, filter: ProductFilter1List, expandAlways?: boolean, showCounts?: boolean, countsClass?: ClassNameValue, selectedValues?: {key: string, value: string}[], onFilter?: (key: string, value: string) => void } = $props();
+
+  /*let hasKeyValue = $derived.by(() => {
+    return selectedValues?.some(item => item.key === filter.title && item.value === value);
+  }); */
+
+  function hasSelectedValue(arr: { key: string; value: string }[] | undefined, key: string, value: string): boolean {
+    return !!arr?.some(item => item.key === key && item.value === value);
+  }
+
+
+</script>
+
+<div class="flex flex-col gap-4 pb-4">
+    <button class="flex flex-row justify-between items-center ml-1 cursor-pointer" onclick={() => open = !open}>
+        <h4 class="truncate font-medium text-neutral-700">{filter.title}</h4>
+        {#if !expandAlways}
+        {#if open}
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-neutral-500" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11V13H19V11H5Z"></path></svg>
+        {:else}
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-5 text-neutral-500" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>
+        {/if}
+        {/if}
+    </button>
+
+    {#if open}
+    <div transition:slide={{ duration: 100, axis: "y" }} class="flex flex-col gap-2 ml-1.5">
+        {#each filter.values as keyValue}
+        {@const isChecked = hasSelectedValue(selectedValues, filter.title, keyValue.value)}
+        <div class="flex flex-row gap-2 items-center">
+          <Checkbox checked={isChecked} id={keyValue.key} value={keyValue.value} label={keyValue.value} class="size-4" onchange={()=> onFilter?.(filter.title, keyValue.value)} />
+          {#if showCounts}
+          <p class={twMerge("text-sm", countsClass)}>({keyValue.count})</p>
+          {/if}
+        </div>
+        {/each}
+    </div>
+    {/if}
+</div>

package/dist/ui/product-filters/product-filter-1/ProductFilterBlock.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type ClassNameValue } from "tailwind-merge";
+import type { ProductFilter1List } from "./ProductFilter1.svelte";
+type $$ComponentProps = {
+    open?: boolean;
+    filter: ProductFilter1List;
+    expandAlways?: boolean;
+    showCounts?: boolean;
+    countsClass?: ClassNameValue;
+    selectedValues?: {
+        key: string;
+        value: string;
+    }[];
+    onFilter?: (key: string, value: string) => void;
+};
+declare const ProductFilterBlock: import("svelte").Component<$$ComponentProps, {}, "open" | "filter" | "selectedValues">;
+type ProductFilterBlock = ReturnType<typeof ProductFilterBlock>;
+export default ProductFilterBlock;

package/dist/ui/product-filters/product-filter-1/index.d.ts

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

package/dist/ui/product-filters/product-filter-1/index.js

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

package/dist/ui/product-list/product-list-1/ProductList1.svelte

@@ -0,0 +1,76 @@
+<script lang="ts" module>
+	import { Button } from '../../../components/button/index.js';
+  import type { ClassNameValue } from 'tailwind-merge';
+
+  export type Product = {
+    uid: string; 
+    title: string; 
+    description?: string;
+    price: string; 
+    price_compare?: string; 
+    image: string; 
+    badges?: string[]; 
+    swatches?: string[];
+  }
+
+  export type ProductList1Props = {
+    products: Product[];
+    titleClass?: ClassNameValue;
+    imageClass?: ClassNameValue;
+    priceClass?: ClassNameValue;
+    priceCompareClass?: ClassNameValue;
+    onShowMore?: () => void;
+    onAddToCart?: (product: Product) => void;
+    class?: ClassNameValue;
+  };
+
+</script>
+
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+  let { products, titleClass, imageClass, priceClass, priceCompareClass, onShowMore, onAddToCart, ...restProps }: ProductList1Props = $props();
+  
+</script>
+
+<section class="flex flex-col gap-16">
+  <div class="mx-auto p-2">
+    <div class={twMerge("grid [grid-template-columns:repeat(auto-fit,minmax(260px,1fr))] gap-4 mx-auto", restProps.class)}>
+      {#each products as product}
+      <div class="border border-primary-card-border shadow-primary rounded-primary overflow-hidden bg-white">
+        <a href="/products/{product.uid}" class="aspect-[4/3] rounded-primary">
+          <img src={product.image} alt={product.title} class={twMerge("object-cover w-full h-[250px]", imageClass)} />
+        </a>
+        <div class="p-3 flex flex-col gap-2">
+          <h3 class={twMerge("text-base font-medium", titleClass)}>{product.title}</h3>
+          <p class={twMerge("text-sm font-normal line-clamp-3", titleClass)}>{product.description}</p>
+          <div class="mt-1 flex items-center gap-2">
+            <span class={twMerge("font-semibold", priceClass)}>${product.price}</span>
+            {#if product.price_compare}
+              <span class={twMerge("text-base text-neutral-500 line-through", priceCompareClass)}>${product.price_compare}</span>
+            {/if}
+          </div>
+        </div>
+        <Button class="py-1 w-full !rounded-none text-white text-sm justify-center" onclick={()=> {onAddToCart?.(product)}}>
+            {#snippet icon()}
+            <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>
+            {/snippet}
+            Add to cart
+        </Button>
+      </div>
+      {/each}
+    </div>
+  </div>
+
+  
+  <Button class="py-2 px-4 w-fit text-white text-sm justify-center mx-auto font-semibold" onclick={onShowMore}>
+    {#snippet loadingIcon()}
+    <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="currentColor"><path d="M3.05469 13H5.07065C5.55588 16.3923 8.47329 19 11.9998 19C15.5262 19 18.4436 16.3923 18.9289 13H20.9448C20.4474 17.5 16.6323 21 11.9998 21C7.36721 21 3.55213 17.5 3.05469 13ZM3.05469 11C3.55213 6.50005 7.36721 3 11.9998 3C16.6323 3 20.4474 6.50005 20.9448 11H18.9289C18.4436 7.60771 15.5262 5 11.9998 5C8.47329 5 5.55588 7.60771 5.07065 11H3.05469Z"></path></svg>
+    {/snippet}
+
+    {#snippet icon()}
+    <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>
+    {/snippet}
+    Show More
+  </Button>
+  
+</section>

package/dist/ui/product-list/product-list-1/ProductList1.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { ClassNameValue } from 'tailwind-merge';
+export type Product = {
+    uid: string;
+    title: string;
+    description?: string;
+    price: string;
+    price_compare?: string;
+    image: string;
+    badges?: string[];
+    swatches?: string[];
+};
+export type ProductList1Props = {
+    products: Product[];
+    titleClass?: ClassNameValue;
+    imageClass?: ClassNameValue;
+    priceClass?: ClassNameValue;
+    priceCompareClass?: ClassNameValue;
+    onShowMore?: () => void;
+    onAddToCart?: (product: Product) => void;
+    class?: ClassNameValue;
+};
+declare const ProductList1: import("svelte").Component<ProductList1Props, {}, "">;
+type ProductList1 = ReturnType<typeof ProductList1>;
+export default ProductList1;

package/dist/ui/product-list/product-list-1/index.d.ts

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

package/dist/ui/product-list/product-list-1/index.js

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

package/dist/ui/product-list-navigation/product-list-navigation-1/ProductListNavigation1.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+	import Select from '../../../components/select/Select.svelte';
+	import Breadcrumbs1 from '../../breadcrumbs/breadcrumbs-1/Breadcrumbs1.svelte';
+  import type { ClassNameValue } from 'tailwind-merge';
+
+  export type ProductListNavigation1Props = {
+    filters: { key: string; value: string }[];
+    searchTerm: string;
+    class?: ClassNameValue;
+  };
+
+  /*let filters = $state([
+    { key: 'brand', value: 'Nike' },
+    { key: 'category', value: 'Shoes' },
+    { key: 'size', value: '10' },
+    { key: 'color', value: 'Red' },
+    { key: 'material', value: 'Leather' },
+    { key: 'style', value: 'Sporty' },
+    { key: 'fitadjjadjadkjadkjadlkjadlkad', value: 'Regularad;kjadkadjkadjadlkjadlkjadlkjad' },
+    { key: 'length', value: 'Medium' },
+    { key: 'width', value: 'Standard' },
+    { key: 'height', value: 'Regular' }
+  ]);*/    
+
+</script>
+
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+  
+  let { filters=$bindable([]), searchTerm=$bindable(""), ...restProps }: ProductListNavigation1Props = $props();
+
+  function removeFilter(key: string, value: string) {
+    filters = filters.filter(f => !(f.key === key && f.value === value));
+  }
+
+  function clearFilters() {
+    filters = [];
+  }
+
+</script>
+
+<section class={twMerge("min-h-10 px-2 flex flex-row flex-wrap justify-between gap-10", restProps.class)}>
+    <div class="flex flex-row gap-2 items-center justify-end w-full">
+      <button class="cursor-pointer px-2 sm:hidden" aria-label="Filter Product List">
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-7 text-neutral-600" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M10 14L4 5V3H20V5L14 14V20L10 22V14Z"></path>
+        </svg>
+      </button>
+      
+    </div>
+</section>

package/dist/ui/product-list-navigation/product-list-navigation-1/ProductListNavigation1.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ClassNameValue } from 'tailwind-merge';
+export type ProductListNavigation1Props = {
+    filters: {
+        key: string;
+        value: string;
+    }[];
+    searchTerm: string;
+    class?: ClassNameValue;
+};
+declare const ProductListNavigation1: import("svelte").Component<ProductListNavigation1Props, {}, "filters" | "searchTerm">;
+type ProductListNavigation1 = ReturnType<typeof ProductListNavigation1>;
+export default ProductListNavigation1;

package/dist/ui/product-list-navigation/product-list-navigation-1/index.d.ts

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

package/dist/ui/product-list-navigation/product-list-navigation-1/index.js

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

package/dist/ui/searchbox/Searchbox.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	import TextInput from '../../components/text-input/TextInput.svelte';	
+    import type { ClassNameValue } from 'tailwind-merge';
+
+  export type ProductListNavigation1Props = {
+    searchTerm?: string;
+    firstDivClass?: string;
+    secondDivClass?: string;
+    thirdDivClass?: string;
+    class?: ClassNameValue;
+    onclick?: (event: Event) => void;
+    onInput?: (value: string) => void;
+  };
+
+</script>
+
+<script lang="ts">
+  import { twMerge } from "tailwind-merge";
+
+  let { searchTerm = $bindable(""), firstDivClass, secondDivClass, thirdDivClass, onclick, onInput, ...restProps }: ProductListNavigation1Props = $props();
+
+</script>
+
+<TextInput id="searchBox" placeholder="Product search..." bind:value={searchTerm} type="search" {onInput} {firstDivClass} {secondDivClass} {thirdDivClass} class={"pl-3 " + restProps.class} autocomplete="off">
+
+    <!--{#snippet leftIcon()}
+    <button aria-label="Search" class="w-fit ml-2 h-full hover:bg-primary-100 cursor-pointer hidden" {onclick}>
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-5 mx-auto text-neutral-400" viewBox="0 0 256 256">
+            <rect width="256" height="256" fill="none"/>
+            <circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+            <line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+        </svg>
+    </button>
+    {/snippet}
+    -->
+
+    {#snippet rightIcon()}
+    <button aria-label="Search" class="size-10 hover:bg-primary-100 border-l-2 border-primary-500 cursor-pointer" {onclick}>
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-5 mx-auto text-neutral-400" viewBox="0 0 256 256">
+            <rect width="256" height="256" fill="none"/>
+            <circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+            <line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+        </svg>
+    </button>
+    {/snippet}
+</TextInput>

package/dist/ui/searchbox/Searchbox.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ClassNameValue } from 'tailwind-merge';
+export type ProductListNavigation1Props = {
+    searchTerm?: string;
+    firstDivClass?: string;
+    secondDivClass?: string;
+    thirdDivClass?: string;
+    class?: ClassNameValue;
+    onclick?: (event: Event) => void;
+    onInput?: (value: string) => void;
+};
+declare const Searchbox: import("svelte").Component<ProductListNavigation1Props, {}, "searchTerm">;
+type Searchbox = ReturnType<typeof Searchbox>;
+export default Searchbox;

package/dist/ui/searchbox/index.d.ts

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

package/dist/ui/searchbox/index.js

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

package/package.json

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