@hashrytech/quick-components-kit 0.18.1 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # @hashrytech/quick-components-kit
 
+## 0.19.0
+
+### Minor Changes
+
+- Update: adding ui components and refactoring textbox and select components
 ## 0.18.1
 
 ### Patch Changes

package/dist/components/button/Button.svelte

@@ -6,7 +6,8 @@
         disabled?: boolean;
         children?: Snippet;
         icon?: Snippet;
-        activeIcon?: Snippet;
+        loadingIcon?: Snippet;
+        loading?: boolean;
         onclick?: (event: MouseEvent) => void;
         class?: ClassNameValue;
     };
@@ -16,15 +17,15 @@
 <script lang="ts">
   import {twMerge} from 'tailwind-merge';
   
-  let { disabled=$bindable(), children, icon, activeIcon, onclick, ...props }: ButtonProps = $props();
+  let { disabled=$bindable(), loading=$bindable(false), children, icon, loadingIcon, onclick, ...props }: ButtonProps = $props();
 
 </script>
 
 <button {disabled} class={twMerge("flex flex-row items-center gap-2 px-4 py-2 focus:outline-primary-focus bg-primary-button hover:bg-primary-button-hover rounded-primary cursor-pointer focus:ring-primary-focus focus:ring", 
   "disabled:bg-primary-button/60 disabled:cursor-default", props.class)}
-  {onclick}>
-  {#if activeIcon}
-  <span>{@render activeIcon()}</span>
+  {onclick}>  
+  {#if loadingIcon && loading}
+  <span class="shrink-0 animate-spin font-semibold">{@render loadingIcon()}</span>
   {:else if icon}
   <span>{@render icon()}</span>
   {/if}

package/dist/components/button/Button.svelte.d.ts

@@ -4,10 +4,11 @@ export type ButtonProps = {
     disabled?: boolean;
     children?: Snippet;
     icon?: Snippet;
-    activeIcon?: Snippet;
+    loadingIcon?: Snippet;
+    loading?: boolean;
     onclick?: (event: MouseEvent) => void;
     class?: ClassNameValue;
 };
-declare const Button: import("svelte").Component<ButtonProps, {}, "disabled">;
+declare const Button: import("svelte").Component<ButtonProps, {}, "disabled" | "loading">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/button/index.d.ts

@@ -1 +1 @@
-export { default as Button } from './Button.svelte';
+export { default as Button, type ButtonProps } from './Button.svelte';

package/dist/components/hamburger-menu/HamburgerMenu.svelte

@@ -4,7 +4,7 @@
     export type HamburgerProps = {
         open?: boolean;
         useCloseBtn?: boolean;
-        ariaLabel: string;
+        ariaLabel?: string;
         linesClasses?: string;
         linesParentClasses?: string;
         onclick?: (event: MouseEvent) => void;
@@ -16,7 +16,7 @@
 <script lang="ts">
   import {twMerge} from 'tailwind-merge';
   
-  let { open=$bindable(true), ariaLabel, linesClasses, linesParentClasses, useCloseBtn=true, onclick, ...props }: HamburgerProps = $props();
+  let { open=$bindable(true), ariaLabel="menu button", linesClasses, linesParentClasses, useCloseBtn=true, onclick, ...props }: HamburgerProps = $props();
 
 </script>
 

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

@@ -2,7 +2,7 @@ import type { ClassNameValue } from 'tailwind-merge';
 export type HamburgerProps = {
     open?: boolean;
     useCloseBtn?: boolean;
-    ariaLabel: string;
+    ariaLabel?: string;
     linesClasses?: string;
     linesParentClasses?: string;
     onclick?: (event: MouseEvent) => void;

package/dist/components/select/Select.svelte

@@ -11,16 +11,20 @@
   export type SelectProps = {
     id: string;
     name?: string;
-    label?: string;
+    labelText?: string;
     disabled?: boolean;
     value?: string | number;
-    options: Option[];
+    options?: Option[];
     size?: "sm" | "md" | "lg";
     labelPosition?: "left" | "top" | "right" | "bottom";
     class?: ClassNameValue;
     labelClass?: ClassNameValue;
+    firstDivClass?: ClassNameValue;
+    secondDivClass?: ClassNameValue;
     optionsClass?: ClassNameValue;
-    parentDivClass?: ClassNameValue;
+    error?: string;
+    label?: Snippet;
+    optionsSnippet?: Snippet;
     icon?: Snippet;
     onchange?: (event: Event) => void;
   };
@@ -29,12 +33,30 @@
 <script lang="ts">
   import { twMerge } from 'tailwind-merge';
 
-  let { id, name, label = "", labelPosition = "top", value = $bindable(), options=$bindable([]), size = "md", disabled = $bindable(false), labelClass, parentDivClass, optionsClass, onchange, ...restProps}: SelectProps = $props();
+  let { 
+    id, 
+    name, 
+    label,
+    labelText = "", 
+    labelPosition = "right", 
+    value = $bindable(), 
+    options=$bindable([]), 
+    size = "md", 
+    disabled = $bindable(false), 
+    firstDivClass,
+    secondDivClass,
+    labelClass, 
+    optionsClass, 
+    error, 
+    onchange, 
+    icon, 
+    optionsSnippet, 
+    ...restProps}: SelectProps = $props();
 
   const sizeMap = {
-    sm: "text-sm py-1 px-2 h-8",
-    md: "text-base py-2 px-3 h-10",
-    lg: "text-lg py-3 px-4 h-12",
+    sm: "text-sm py-1 h-[2.05rem]",
+    md: "text-base py-2 h-[2.375rem]",
+    lg: "text-lg py-3 h-[2.8rem]",
   };
 
   const directionClass = {
@@ -45,18 +67,28 @@
   };
 </script>
 
-<div class={twMerge("flex", directionClass[labelPosition] ?? directionClass.top, parentDivClass)}>
-  {#if label}
-    <label for={id} class={twMerge("text-sm font-medium text-primary-label-text ml-1", labelClass)}>{label}</label>
-  {/if}
+<div class={twMerge("flex flex-col gap-1", firstDivClass)}>
+  <div class={twMerge("flex", directionClass[labelPosition] ?? directionClass.top, secondDivClass)}>
+    {#if label}
+      {@render label()}
+    {:else}
+      {#if labelText}
+      <label for={id} class={twMerge("text-sm font-medium text-primary-label-text ml-1 w-full", labelClass)}>{labelText}</label>
+      {/if}
+    {/if}
 
-  <select {id} name={name ?? id} bind:value {disabled} onchange={onchange} 
-    class={twMerge("rounded-primary border border-primary-input-border focus:border-primary-focus focus:ring-primary-focus placeholder:opacity-50 disabled:bg-neutral-300/30 disabled:border-neutral-300/30",
-    sizeMap[size], restProps.class)}>
-    {#each options as option}
-      <option value={option.value} disabled={option.disabled} class={twMerge("", optionsClass)}>
-        {option.label}
-      </option>
-    {/each}
-  </select>
+    <select {id} name={name ?? id} bind:value {disabled} onchange={onchange} 
+      class={twMerge("rounded-primary border border-primary-input-border focus:border-primary-focus focus:ring-primary-focus placeholder:opacity-50 disabled:bg-neutral-300/30 disabled:border-neutral-300/30",
+      sizeMap[size], error ? "bg-red-50 border-red-300" : "", restProps.class)}>
+      {@render optionsSnippet?.()}
+      {#each options as option}
+        <option value={option.value} disabled={option.disabled} class={twMerge("", optionsClass)}>
+          {option.label}
+        </option>
+      {/each}
+    </select>
+  </div>
+  {#if error}
+    <p class="text-sm text-red-500 mt-0.5 bg-red-100/30 px-2 rounded-primary">{error}</p>
+  {/if}
 </div>

package/dist/components/select/Select.svelte.d.ts

@@ -8,16 +8,20 @@ export type Option = {
 export type SelectProps = {
     id: string;
     name?: string;
-    label?: string;
+    labelText?: string;
     disabled?: boolean;
     value?: string | number;
-    options: Option[];
+    options?: Option[];
     size?: "sm" | "md" | "lg";
     labelPosition?: "left" | "top" | "right" | "bottom";
     class?: ClassNameValue;
     labelClass?: ClassNameValue;
+    firstDivClass?: ClassNameValue;
+    secondDivClass?: ClassNameValue;
     optionsClass?: ClassNameValue;
-    parentDivClass?: ClassNameValue;
+    error?: string;
+    label?: Snippet;
+    optionsSnippet?: Snippet;
     icon?: Snippet;
     onchange?: (event: Event) => void;
 };

package/dist/components/text-input/TextInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" module>
 	import type { Snippet } from 'svelte';
+	import type { FullAutoFill } from 'svelte/elements';
     import type { ClassNameValue } from 'tailwind-merge';
 
     /**
@@ -9,7 +10,7 @@
      * - "lg": h-[2.8rem] text-lg placeholder:text-lg
     */
     export type TextInputSize = "sm" | "md" | "lg";
-    export type TextInputType = "text" | "password" | "number" | "email" | "tel" | "url";
+    export type TextInputType = "text" | "password" | "number" | "email" | "tel" | "url" | "search";
 
     /**
      * Props for the TextBox component.
@@ -35,14 +36,23 @@
         type?: TextInputType;
         placeholder?: string;
         labelText?: string;
+        labelPosition?: "top" | "left" | "right" | "bottom";
         size?: TextInputSize;
         disabled?: boolean;
         required?: boolean;
         error?: string;
-        onchange?: () => void;
+        labelClass?: ClassNameValue;
+        firstDivClass?: ClassNameValue;
+        secondDivClass?: ClassNameValue;        
+        thirdDivClass?: ClassNameValue;
+        autocomplete?: FullAutoFill | null;
+        debounceDelay?: number;
+        onInput?: (value: string) => void;
+        onchange?: (event: Event) => void;
         onmouseup?: () => void;
         label?: Snippet;
-        icon?: Snippet;
+        leftIcon?: Snippet;
+        rightIcon?: Snippet;
         class?: ClassNameValue;
     };
     
@@ -51,8 +61,32 @@
 
 <script lang="ts">
     import { twMerge } from 'tailwind-merge';
-    
-    let { id, type="text", name="", value=$bindable(""), placeholder="", labelText, size="md", disabled=false, required=false, error, onchange, onmouseup, label, icon, ...props}: TextInputProps = $props();
+
+    let { 
+        id, 
+        type="text", 
+        name="", 
+        value=$bindable(""), 
+        placeholder="", 
+        labelText="",
+        labelClass, 
+        labelPosition="top",
+        size="md", 
+        disabled=false, 
+        required=false, 
+        error, 
+        firstDivClass, 
+        secondDivClass,
+        thirdDivClass,
+        autocomplete, 
+        debounceDelay=300, //ms
+        onchange,
+        onInput,
+        onmouseup, 
+        label, 
+        leftIcon, 
+        rightIcon, 
+        ...restProps}: TextInputProps = $props();
 
     /**
      * Predefined size classes for the TextBox input.
@@ -61,25 +95,61 @@
      * - "lg": h-[2.8rem] text-lg placeholder:text-lg
      */
     let sizeStyle: Record<TextInputSize, string> = {
-        sm: "h-[2.05rem] text-sm placeholder:text-sm",
-        md: "h-[2.375rem] text-sm placeholder:text-sm",
-        lg: "h-[2.8rem] text-base placeholder:text-base"
+        sm: "text-sm placeholder:text-sm",
+        md: "text-sm placeholder:text-sm",
+        lg: "text-base placeholder:text-base"
+    };
+
+    let textBoxStyle: Record<TextInputSize, string> = {
+        sm: "h-[2.05rem] pl-2 pr-1.5",
+        md: "h-[2.375rem]",
+        lg: "h-[2.8rem] pl-3 pr-2"
+    };
+
+    const directionClass = {
+        top: "flex-col gap-1",
+        bottom: "flex-col-reverse gap-1",
+        left: "flex-row items-center gap-2",
+        right: "flex-row-reverse items-center gap-2",
     };
 
+    // --- Debounce logic ---
+	let localValue = value; // local for immediate typing
+	let debounceTimer: ReturnType<typeof setTimeout>;	
+
+    function handleInput(e: Event) {
+		localValue = (e.target as HTMLInputElement).value;
+		clearTimeout(debounceTimer);
+		debounceTimer = setTimeout(() => {
+			value = localValue; // sync to bound value after delay
+			onInput?.(value); // call handler if provided
+		}, debounceDelay);
+	}
+
 </script>
 
-<div class="flex flex-col gap-1 w-full">
-    {#if label}{@render label()}{:else}{#if labelText}<label for={id} class="text-sm font-medium text-primary-label-text ml-1">{labelText}</label>{/if}{/if}
-    <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={name ? name: id} {placeholder} {onchange} {onmouseup} bind:value 
-            class={twMerge("rounded-primary border border-primary-input-border focus:border-primary-focus focus:ring-primary-focus placeholder:opacity-50 disabled:bg-neutral-300/30 disabled:border-neutral-300/30",
-            error ? "bg-red-50 border-red-300" : "", 
-            icon ? "pl-10" : "",
-            sizeStyle[size], props.class)}
-        />
+<div class={twMerge("", firstDivClass)}>
+    <div class={twMerge("flex rounded-primary", directionClass[labelPosition] ?? directionClass.top, secondDivClass)}>
+        
+        {#if label}{@render label()}{/if}
+        {#if !label && labelText}<label for={id} class={twMerge("text-sm font-medium text-primary-label-text ml-1", labelClass)}>{labelText}</label>{/if}
+
+        <!-- Text Box -->
+        <div class={twMerge("flex flex-row items-center rounded-primary border border-primary-input-border gap-2 focus-within:ring focus-within:border-primary-focus focus-within:ring-primary-focus has-[input:disabled]:bg-neutral-300/30 has-[input:disabled]:border-neutral-300/30", 
+            error ? "bg-red-50 border-red-300" : "", textBoxStyle[size], thirdDivClass)}>
+            
+            {#if leftIcon}<div class="h-full flex flex-col items-center justify-center">{@render leftIcon()}</div>{/if}
+            
+            <input {disabled} {required} {type} {id} name={name ? name: id} {placeholder} {onmouseup} bind:value {autocomplete} oninput={handleInput}
+                class={twMerge("border-0 focus:border-0 focus:ring-0 active:border-0 outline-none p-0 bg-transparent placeholder:text-neutral-600/50 h-full w-full", sizeStyle[size], restProps.class)} />
+
+            {#if rightIcon}<div class="h-full flex flex-col items-center justify-center">{@render rightIcon()}</div>{/if}
+        </div>
+        
     </div>
+    
     {#if error}
     <p class="text-sm text-red-500 mt-0.5 bg-red-100/30 px-2 rounded-primary">{error}</p>
     {/if}
+    
 </div>

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { FullAutoFill } from 'svelte/elements';
 import type { ClassNameValue } from 'tailwind-merge';
 /**
  * Predefined size classes for the TextBox input.
@@ -7,7 +8,7 @@ import type { ClassNameValue } from 'tailwind-merge';
  * - "lg": h-[2.8rem] text-lg placeholder:text-lg
 */
 export type TextInputSize = "sm" | "md" | "lg";
-export type TextInputType = "text" | "password" | "number" | "email" | "tel" | "url";
+export type TextInputType = "text" | "password" | "number" | "email" | "tel" | "url" | "search";
 /**
  * Props for the TextBox component.
  *
@@ -32,14 +33,23 @@ export type TextInputProps = {
     type?: TextInputType;
     placeholder?: string;
     labelText?: string;
+    labelPosition?: "top" | "left" | "right" | "bottom";
     size?: TextInputSize;
     disabled?: boolean;
     required?: boolean;
     error?: string;
-    onchange?: () => void;
+    labelClass?: ClassNameValue;
+    firstDivClass?: ClassNameValue;
+    secondDivClass?: ClassNameValue;
+    thirdDivClass?: ClassNameValue;
+    autocomplete?: FullAutoFill | null;
+    debounceDelay?: number;
+    onInput?: (value: string) => void;
+    onchange?: (event: Event) => void;
     onmouseup?: () => void;
     label?: Snippet;
-    icon?: Snippet;
+    leftIcon?: Snippet;
+    rightIcon?: Snippet;
     class?: ClassNameValue;
 };
 declare const TextInput: import("svelte").Component<TextInputProps, {}, "value">;

package/dist/index.d.ts

@@ -22,3 +22,7 @@ export * from './modules/api-proxy.js';
 export * from './modules/crypto.js';
 export * from './modules/problem-details.js';
 export * from './functions/object-to-form-data.js';
+export * from './ui/headers/header-1/index.js';
+export * from './ui/footers/footer-1/index.js';
+export * from './ui/banners/banner-1/index.js';
+export * from './ui/featured-products/featured-products-1/index.js';

package/dist/index.js

@@ -24,4 +24,8 @@ export * from './modules/api-proxy.js';
 export * from './modules/crypto.js';
 export * from './modules/problem-details.js';
 export * from './functions/object-to-form-data.js';
+export * from './ui/headers/header-1/index.js';
+export * from './ui/footers/footer-1/index.js';
+export * from './ui/banners/banner-1/index.js';
+export * from './ui/featured-products/featured-products-1/index.js';
 // Add more components here...

package/dist/ui/banners/banner-1/Banner1.svelte

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+    import type { ClassNameValue } from 'tailwind-merge';
+    
+    export type Banner1Props = {
+        mainText: string;
+        subText?: string;
+        image?: string;
+        primaryButtonText?: string;
+        primaryButtonLink?: string;
+        secondaryButtonText?: string;
+        secondaryButtonLink?: string;
+        class?: ClassNameValue;
+    };
+
+</script>
+
+<script lang="ts">
+	import { twMerge } from "tailwind-merge";
+
+  let { mainText, subText, image, primaryButtonText, primaryButtonLink, secondaryButtonText, secondaryButtonLink, ...restProps }: Banner1Props = $props();
+  let style = image ? "background-image: url('" + image + "');" : "";
+
+</script>
+
+<section class={twMerge("lg:grid", restProps.class)} {style}>
+  <div class="mx-auto w-screen max-w-screen-xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8 lg:py-32">
+    <div class="mx-auto max-w-prose text-center">
+      <h1 class="text-4xl font-bold text-gray-900 sm:text-5xl">{@html mainText}</h1>
+      <p class="mt-4 text-base text-pretty text-gray-700 sm:text-lg/relaxed dark:text-gray-200">{subText}</p>
+
+      {#if primaryButtonText || secondaryButtonText}
+      <div class="mt-4 flex justify-center gap-4 sm:mt-6">
+        {#if primaryButtonText && primaryButtonLink}
+        <a class="inline-block rounded-primary bg-primary-button px-5 py-3 font-medium text-white shadow-primary transition-colors hover:bg-primary-button-hover"
+          href={primaryButtonLink}>{primaryButtonText}</a>
+        {/if}
+
+        {#if secondaryButtonText && secondaryButtonLink}
+        <a class="inline-block bg-white rounded-primary border border-gray-200 px-5 py-3 font-medium text-gray-700 shadow-primary transition-colors 
+            hover:bg-gray-50 hover:text-gray-900" href={secondaryButtonLink}>
+          {secondaryButtonText}</a>
+        {/if}
+      </div>
+      {/if}
+    </div>
+  </div>
+</section>

package/dist/ui/banners/banner-1/Banner1.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { ClassNameValue } from 'tailwind-merge';
+export type Banner1Props = {
+    mainText: string;
+    subText?: string;
+    image?: string;
+    primaryButtonText?: string;
+    primaryButtonLink?: string;
+    secondaryButtonText?: string;
+    secondaryButtonLink?: string;
+    class?: ClassNameValue;
+};
+declare const Banner1: import("svelte").Component<Banner1Props, {}, "">;
+type Banner1 = ReturnType<typeof Banner1>;
+export default Banner1;

package/dist/ui/banners/banner-1/index.d.ts

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

package/dist/ui/banners/banner-1/index.js

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

package/dist/ui/breadcrumbs/breadcrumbs-1/Breadcrumbs1.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { twMerge, type ClassNameValue } from "tailwind-merge";
+  let {filters=$bindable([]), onRemove, onClear, ...restProps}:
+    { 
+      filters: { key: string; value: string }[]; 
+      onRemove: (key: string, value: string) => void; 
+      onClear: () => void; 
+      class?: ClassNameValue; 
+    } = $props();
+
+</script>
+
+<nav aria-label="Breadcrumb filters" class={twMerge("flex flex-wrap items-center gap-2 text-sm", restProps.class)}>
+
+  <!-- Dynamic filters -->
+  {#if filters.length > 0}
+    {#each filters as { key, value }}
+      <button class="flex items-center gap-1 rounded-full bg-neutral-100 px-3 py-1 text-neutral-700 hover:bg-neutral-200 cursor-pointer break-all" onclick={() => onRemove?.(key, value)}>
+        <span class="capitalize text-neutral-600">{key}:</span>
+        <span class="font-medium">{value}</span>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4 text-neutral-500 shrink-0">
+            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 
+              01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+        </svg>
+      </button>
+    {/each}
+    <!-- Clear all -->    
+    <button class="text-red-600 hover:underline cursor-pointer" onclick={onClear}>Clear all</button>
+  {/if}
+</nav>

package/dist/ui/breadcrumbs/breadcrumbs-1/Breadcrumbs1.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type ClassNameValue } from "tailwind-merge";
+type $$ComponentProps = {
+    filters: {
+        key: string;
+        value: string;
+    }[];
+    onRemove: (key: string, value: string) => void;
+    onClear: () => void;
+    class?: ClassNameValue;
+};
+declare const Breadcrumbs1: import("svelte").Component<$$ComponentProps, {}, "filters">;
+type Breadcrumbs1 = ReturnType<typeof Breadcrumbs1>;
+export default Breadcrumbs1;

package/dist/ui/breadcrumbs/breadcrumbs-1/index.d.ts

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

package/dist/ui/breadcrumbs/breadcrumbs-1/index.js

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

package/dist/ui/featured-products/featured-products-1/FeaturedProducts1.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" module>
+    import type { ClassNameValue } from 'tailwind-merge';
+    
+    export type FeaturedProducts1Props = {
+      title: string;
+      titleDescription?: string;
+      products: {uid: string, title: string, price: string, price_compare: string, image: string, badges?: string[], swatches?: string[]}[];
+      titleClass?: ClassNameValue;
+      imageClass?: ClassNameValue;
+      priceClass?: ClassNameValue;
+      priceCompareClass?: ClassNameValue;
+      class?: ClassNameValue;
+    };
+
+</script>
+
+<script lang="ts">
+	import { twMerge } from "tailwind-merge";
+
+  let { title, products, titleClass, titleDescription, imageClass, priceClass, priceCompareClass, ...restProps }: FeaturedProducts1Props = $props();
+
+</script>
+
+<section class="space-y-6">
+  <div class="text-center">
+    <h2 class="text-2xl font-semibold">{title}</h2>
+    <div class="w-32 bg-primary-button h-0.5 rounded-primary mx-auto mt-2"></div>
+    {#if titleDescription}
+    <p class="mt-6 px-6 max-w-2xl mx-auto">{titleDescription}</p>
+    {/if}
+  </div>
+
+  <div class="mx-auto p-2">
+    <div class={twMerge("grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mx-auto w-fit p-1", restProps.class)}>
+      {#each products as product}
+      <a href={`/products/${product.uid}`} class="border border-primary-card-border shadow-primary rounded-primary overflow-hidden bg-white">
+        
+        <div class="aspect-[4/3] rounded-primary">
+          <img src={product.image} alt={product.title} class={twMerge("object-cover w-full h-[250px]", imageClass)} />
+        </div>
+
+        <div class="p-3">
+          <h3 class={twMerge("text-base font-medium text-neutral-900", titleClass)}>{product.title}</h3>
+          <div class="mt-1 flex items-center gap-2">
+            <span class={twMerge("font-medium", 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>
+      </a>
+      {/each}
+    </div>
+  </div>
+  
+</section>

package/dist/ui/featured-products/featured-products-1/FeaturedProducts1.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ClassNameValue } from 'tailwind-merge';
+export type FeaturedProducts1Props = {
+    title: string;
+    titleDescription?: string;
+    products: {
+        uid: string;
+        title: string;
+        price: string;
+        price_compare: string;
+        image: string;
+        badges?: string[];
+        swatches?: string[];
+    }[];
+    titleClass?: ClassNameValue;
+    imageClass?: ClassNameValue;
+    priceClass?: ClassNameValue;
+    priceCompareClass?: ClassNameValue;
+    class?: ClassNameValue;
+};
+declare const FeaturedProducts1: import("svelte").Component<FeaturedProducts1Props, {}, "">;
+type FeaturedProducts1 = ReturnType<typeof FeaturedProducts1>;
+export default FeaturedProducts1;

package/dist/ui/featured-products/featured-products-1/index.d.ts

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

package/dist/ui/featured-products/featured-products-1/index.js

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