@hashrytech/quick-components-kit 0.18.1 → 0.19.1

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|number) => 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 | number) => 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.1",
+  "version": "0.19.1",
   "license": "MIT",
   "author": "Hashry Tech",
   "files": [